idmission-web-sdk 1.0.187 → 1.0.189

package/dist/sdk2.cjs.development.js

@@ -48,7 +48,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.187';
+var webSdkVersion = '1.0.189';
 
 function getPlatform() {
   if (typeof window === 'undefined') return;
@@ -8796,9 +8796,9 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
     (function () {
       return tslib.__awaiter(void 0, void 0, void 0, function () {
         var canvases, prediction, e_1;
-        var _a, _b, _c;
-        return tslib.__generator(this, function (_d) {
-          switch (_d.label) {
+        var _a, _b, _c, _d;
+        return tslib.__generator(this, function (_e) {
+          switch (_e.label) {
             case 0:
               if (!documentDetectionModel || !focusModel || !lastPredictionCanvas.current || !cropCanvas.current || !rotateCanvas.current) return [2 /*return*/];
               canvases = {
@@ -8806,12 +8806,12 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
                 cropCanvas: cropCanvas.current,
                 rotateCanvas: rotateCanvas.current
               };
-              _d.label = 1;
+              _e.label = 1;
             case 1:
-              _d.trys.push([1, 3,, 4]);
+              _e.trys.push([1, 3,, 4]);
               return [4 /*yield*/, makePredictions(frame, thresholds, canvases, logPredictions)];
             case 2:
-              prediction = _d.sent();
+              prediction = _e.sent();
               setDetectionTime(prediction.detectionTime);
               setFocusPredictionTime(prediction.focusPredictionTime);
               if (bestFocusScore.current <= prediction.focusScore) {
@@ -8827,8 +8827,15 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
               (_c = onPredictionHandler.current) === null || _c === void 0 ? void 0 : _c.call(onPredictionHandler, prediction);
               return [3 /*break*/, 4];
             case 3:
-              e_1 = _d.sent();
+              e_1 = _e.sent();
               console.log('caught an error while predicting!', e_1);
+              if ((_d = e_1.message) === null || _d === void 0 ? void 0 : _d.includes('Requested texture size [0x0] is invalid.')) {
+                console.log("it's the texture one!");
+              } else if (e_1.message === 'CanvasRenderingContext2D.drawImage: Passed-in canvas is empty') {
+                console.log("it's the empty canvas one!");
+              } else {
+                throw e_1;
+              }
               return [3 /*break*/, 4];
             case 4:
               working.current = false;
@@ -8909,7 +8916,7 @@ function makePredictions(frame, thresholds, canvases, logPredictions) {
         case 0:
           _o = getFrameDimensions(frame), frameWidth = _o[0], frameHeight = _o[1];
           drawToCanvas(canvases.lastPredictionCanvas, frame);
-          return [4 /*yield*/, makeDocumentDetectionPredictions(frame, logPredictions)];
+          return [4 /*yield*/, makeDocumentDetectionPredictions(canvases.lastPredictionCanvas, logPredictions)];
         case 1:
           _p = _t.sent(), boxes = _p.boxes, scores = _p.scores, labels = _p.labels, time = _p.time;
           allZero = boxes.length > 0 && !boxes.some(function (box) {
@@ -8971,7 +8978,7 @@ function makePredictions(frame, thresholds, canvases, logPredictions) {
           }
           focusPrediction = null, focusPredictionTime = 0, focusScore = 0, focusThresholdMet = false;
           if (!(detectionThresholdMet && documentInBounds && !documentTooClose)) return [3 /*break*/, 3];
-          return [4 /*yield*/, makeFocusPrediction(frame, canvases, bestDocumentOrPassport === null || bestDocumentOrPassport === void 0 ? void 0 : bestDocumentOrPassport.bbox, logPredictions)];
+          return [4 /*yield*/, makeFocusPrediction(canvases.lastPredictionCanvas, canvases, bestDocumentOrPassport === null || bestDocumentOrPassport === void 0 ? void 0 : bestDocumentOrPassport.bbox, logPredictions)];
         case 2:
           _s = _t.sent(), focusPrediction = _s[0], focusPredictionTime = _s[1];
           focusScore = (_j = focusPrediction === null || focusPrediction === void 0 ? void 0 : focusPrediction[1]) !== null && _j !== void 0 ? _j : 0;
@@ -9537,6 +9544,7 @@ function SelfieCaptureFaceDebugBox(_a) {
     scaledHeight = scaling.scaledHeight,
     xOffset = scaling.xOffset,
     yOffset = scaling.yOffset;
+  if (!videoWidth || !videoHeight || !pageWidth || !pageHeight) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
   var top;
   var left;
   var width;
@@ -11804,7 +11812,7 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
               return [4 /*yield*/, function renderPrediction() {
                 var _a;
                 return tslib.__awaiter(this, void 0, void 0, function () {
-                  var vw, vh, prediction, faces, error_1;
+                  var vw, vh, prediction, faces;
                   return tslib.__generator(this, function (_b) {
                     switch (_b.label) {
                       case 0:
@@ -11822,50 +11830,42 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
                         vw = videoRef.current.videoWidth;
                         vh = videoRef.current.videoHeight;
                         ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(videoRef.current, 0, 0, vw, vh);
-                        _b.label = 3;
-                      case 3:
-                        _b.trys.push([3, 5,, 6]);
-                        return [4 /*yield*/, detectorRef.current.detectForVideo(videoRef.current, performance.now())];
-                      case 4:
-                        prediction = _b.sent();
-                        if (prediction) {
-                          faces = prediction.detections.map(function (d) {
-                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-                            return {
-                              keypoints: d.keypoints.map(function (k) {
-                                var _a;
-                                return tslib.__assign(tslib.__assign({}, k), {
-                                  x: k.x * vw,
-                                  y: k.y * vh,
-                                  name: (_a = k.label) !== null && _a !== void 0 ? _a : ''
-                                });
-                              }),
-                              box: {
-                                xMin: (_b = (_a = d.boundingBox) === null || _a === void 0 ? void 0 : _a.originX) !== null && _b !== void 0 ? _b : 0,
-                                xMax: ((_d = (_c = d.boundingBox) === null || _c === void 0 ? void 0 : _c.originX) !== null && _d !== void 0 ? _d : 0) + ((_f = (_e = d.boundingBox) === null || _e === void 0 ? void 0 : _e.width) !== null && _f !== void 0 ? _f : 0),
-                                yMin: (_h = (_g = d.boundingBox) === null || _g === void 0 ? void 0 : _g.originY) !== null && _h !== void 0 ? _h : 0,
-                                yMax: ((_k = (_j = d.boundingBox) === null || _j === void 0 ? void 0 : _j.originY) !== null && _k !== void 0 ? _k : 0) + ((_m = (_l = d.boundingBox) === null || _l === void 0 ? void 0 : _l.height) !== null && _m !== void 0 ? _m : 0),
-                                width: (_p = (_o = d.boundingBox) === null || _o === void 0 ? void 0 : _o.width) !== null && _p !== void 0 ? _p : 0,
-                                height: (_r = (_q = d.boundingBox) === null || _q === void 0 ? void 0 : _q.height) !== null && _r !== void 0 ? _r : 0
-                              }
-                            };
-                          });
-                          (_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, faces);
-                          ctx && drawResults(ctx, faces, true, true);
+                        // Detectors can throw errors, for example when using custom URLs that
+                        // contain a model that doesn't provide the expected output.
+                        try {
+                          prediction = detectorRef.current.detectForVideo(videoRef.current, performance.now());
+                          if (prediction) {
+                            faces = prediction.detections.map(function (d) {
+                              var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+                              return {
+                                keypoints: d.keypoints.map(function (k) {
+                                  var _a;
+                                  return tslib.__assign(tslib.__assign({}, k), {
+                                    x: k.x * vw,
+                                    y: k.y * vh,
+                                    name: (_a = k.label) !== null && _a !== void 0 ? _a : ''
+                                  });
+                                }),
+                                box: {
+                                  xMin: (_b = (_a = d.boundingBox) === null || _a === void 0 ? void 0 : _a.originX) !== null && _b !== void 0 ? _b : 0,
+                                  xMax: ((_d = (_c = d.boundingBox) === null || _c === void 0 ? void 0 : _c.originX) !== null && _d !== void 0 ? _d : 0) + ((_f = (_e = d.boundingBox) === null || _e === void 0 ? void 0 : _e.width) !== null && _f !== void 0 ? _f : 0),
+                                  yMin: (_h = (_g = d.boundingBox) === null || _g === void 0 ? void 0 : _g.originY) !== null && _h !== void 0 ? _h : 0,
+                                  yMax: ((_k = (_j = d.boundingBox) === null || _j === void 0 ? void 0 : _j.originY) !== null && _k !== void 0 ? _k : 0) + ((_m = (_l = d.boundingBox) === null || _l === void 0 ? void 0 : _l.height) !== null && _m !== void 0 ? _m : 0),
+                                  width: (_p = (_o = d.boundingBox) === null || _o === void 0 ? void 0 : _o.width) !== null && _p !== void 0 ? _p : 0,
+                                  height: (_r = (_q = d.boundingBox) === null || _q === void 0 ? void 0 : _q.height) !== null && _r !== void 0 ? _r : 0
+                                }
+                              };
+                            });
+                            (_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, faces);
+                            ctx && drawResults(ctx, faces, true, true);
+                          }
+                        } catch (error) {
+                          console.error('caught face detection error', error);
+                          // detector.dispose()
                         }
-                        return [3 /*break*/, 6];
-                      case 5:
-                        error_1 = _b.sent();
-                        console.error('caught face detection error', error_1);
-                        return [3 /*break*/, 6];
-                      case 6:
-                        if (throttleMs) {
-                          timer = setTimeout(function () {
-                            rafId.current = requestAnimationFrame(renderPrediction);
-                          }, throttleMs);
-                        } else {
+                        timer = setTimeout(function () {
                           rafId.current = requestAnimationFrame(renderPrediction);
-                        }
+                        }, throttleMs !== null && throttleMs !== void 0 ? throttleMs : 0);
                         return [2 /*return*/];
                     }
                   });
@@ -14025,58 +14025,55 @@ var templateObject_1$7, templateObject_2$6, templateObject_3$5, templateObject_4
 
 var edgeBoundary = 0.05;
 var IdVideoCapture = function IdVideoCapture(_a) {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
   var onComplete = _a.onComplete,
     onIdFrontImageCaptured = _a.onIdFrontImageCaptured,
     onIdBackImageCaptured = _a.onIdBackImageCaptured,
     onFaceNotDetected = _a.onFaceNotDetected,
-    _u = _a.idCardFrontDetectionThreshold,
-    idCardFrontDetectionThreshold = _u === void 0 ? 0.6 : _u,
-    _v = _a.idCardFrontFocusThreshold,
-    idCardFrontFocusThreshold = _v === void 0 ? 0 : _v,
-    _w = _a.goodIdCardFrontFramesThreshold,
-    goodIdCardFrontFramesThreshold = _w === void 0 ? 3 : _w,
-    _x = _a.idCardBackDetectionThreshold,
-    idCardBackDetectionThreshold = _x === void 0 ? 0.6 : _x,
-    _y = _a.idCardBackFocusThreshold,
-    idCardBackFocusThreshold = _y === void 0 ? 0 : _y,
-    _z = _a.goodIdCardBackFramesThreshold,
-    goodIdCardBackFramesThreshold = _z === void 0 ? 3 : _z,
-    _0 = _a.skipShowIdCardBack,
-    skipShowIdCardBack = _0 === void 0 ? false : _0,
+    _v = _a.idCardFrontDetectionThreshold,
+    idCardFrontDetectionThreshold = _v === void 0 ? 0.6 : _v,
+    _w = _a.idCardFrontFocusThreshold,
+    idCardFrontFocusThreshold = _w === void 0 ? 0 : _w,
+    _x = _a.goodIdCardFrontFramesThreshold,
+    goodIdCardFrontFramesThreshold = _x === void 0 ? 3 : _x,
+    _y = _a.idCardBackDetectionThreshold,
+    idCardBackDetectionThreshold = _y === void 0 ? 0.6 : _y,
+    _z = _a.idCardBackFocusThreshold,
+    idCardBackFocusThreshold = _z === void 0 ? 0 : _z,
+    _0 = _a.goodIdCardBackFramesThreshold,
+    goodIdCardBackFramesThreshold = _0 === void 0 ? 3 : _0,
+    _1 = _a.skipShowIdCardBack,
+    skipShowIdCardBack = _1 === void 0 ? false : _1,
     readTextPrompt = _a.readTextPrompt,
-    _1 = _a.readTextTimeoutDurationMs,
-    readTextTimeoutDurationMs = _1 === void 0 ? 15000 : _1,
-    _2 = _a.assets,
-    assets = _2 === void 0 ? {} : _2,
-    _3 = _a.classNames,
-    classNames = _3 === void 0 ? {} : _3,
-    _4 = _a.colors,
-    colors = _4 === void 0 ? {} : _4,
-    _5 = _a.verbiage,
-    rawVerbiage = _5 === void 0 ? {} : _5,
-    _6 = _a.debugMode,
-    debugMode = _6 === void 0 ? false : _6;
-  var _7 = useResizeObserver__default['default'](),
-    ref = _7.ref,
-    _8 = _7.width,
-    width = _8 === void 0 ? 1 : _8,
-    _9 = _7.height,
-    height = _9 === void 0 ? 1 : _9;
-  var _10 = React.useContext(CameraStateContext),
-    cameraRef = _10.cameraRef,
-    videoRef = _10.videoRef,
-    videoLoaded = _10.videoLoaded,
-    cameraReady = _10.cameraReady;
-  var _11 = React.useState([]),
-    detectedObjects = _11[0],
-    setDetectedObjects = _11[1];
+    _2 = _a.readTextTimeoutDurationMs,
+    readTextTimeoutDurationMs = _2 === void 0 ? 15000 : _2,
+    _3 = _a.assets,
+    assets = _3 === void 0 ? {} : _3,
+    _4 = _a.classNames,
+    classNames = _4 === void 0 ? {} : _4,
+    _5 = _a.colors,
+    colors = _5 === void 0 ? {} : _5,
+    _6 = _a.verbiage,
+    rawVerbiage = _6 === void 0 ? {} : _6,
+    _7 = _a.debugMode,
+    debugMode = _7 === void 0 ? false : _7;
+  var _8 = useResizeObserver__default['default'](),
+    ref = _8.ref,
+    _9 = _8.width,
+    width = _9 === void 0 ? 1 : _9,
+    _10 = _8.height,
+    height = _10 === void 0 ? 1 : _10;
+  var _11 = React.useContext(CameraStateContext),
+    cameraRef = _11.cameraRef,
+    videoRef = _11.videoRef,
+    videoLoaded = _11.videoLoaded,
+    cameraReady = _11.cameraReady;
   var _12 = React.useState([]),
-    faces = _12[0],
-    setFaces = _12[1];
-  var _13 = React.useState(true),
-    faceCentered = _13[0],
-    setFaceCentered = _13[1];
+    detectedObjects = _12[0],
+    setDetectedObjects = _12[1];
+  var _13 = React.useState([]),
+    faces = _13[0],
+    setFaces = _13[1];
   var _14 = React.useContext(IdCaptureModelsContext),
     idModelsReady = _14.ready,
     idModelsWorking = _14.working,
@@ -14171,6 +14168,10 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       stopRecording();
     }
   }, [readTextPrompt, stopRecording]);
+  var frameWidth = (_c = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) !== null && _c !== void 0 ? _c : 0;
+  var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
+  var faceBox = (_f = faces === null || faces === void 0 ? void 0 : faces[0]) === null || _f === void 0 ? void 0 : _f.box;
+  var faceCentered = faceBox && faceBox.xMin > frameWidth * edgeBoundary && faceBox.yMin > frameHeight * edgeBoundary && faceBox.xMax < frameWidth * (1 - edgeBoundary) && faceBox.yMax < frameHeight * (1 - edgeBoundary);
   var satisfied = goodFramesCount > 0 && faceCentered;
   React.useEffect(function () {
     (function () {
@@ -14225,8 +14226,6 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     stopRecording();
   }, [stopRecording]);
   var timeoutStartedAt = useTimeout(readTextTimeoutDurationMs, onReadTextTimeout, requestedAction !== 'READ_TEXT', false, requestedAction === 'READ_TEXT').timeoutStartedAt;
-  var frameWidth = (_c = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) !== null && _c !== void 0 ? _c : 0;
-  var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
   var _20 = React.useState(0),
     numFramesWithoutFaces = _20[0],
     setNumFramesWithoutFaces = _20[1];
@@ -14236,14 +14235,8 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       setNumFramesWithoutFaces(function (n) {
         return faces.length === 0 ? n + 1 : 0;
       });
-      if (faces.length > 0) {
-        var box = faces[0].box;
-        setFaceCentered(box.xMin > frameWidth * edgeBoundary && box.yMin > frameHeight * edgeBoundary && box.xMax < frameWidth * (1 - edgeBoundary) && box.yMax < frameHeight * (1 - edgeBoundary));
-      } else {
-        setFaceCentered(false);
-      }
     });
-  }, [frameHeight, frameWidth, onSelfiePredictionMade]);
+  }, [onSelfiePredictionMade]);
   React.useEffect(function () {
     if (numFramesWithoutFaces >= 2) {
       onFaceNotDetected === null || onFaceNotDetected === void 0 ? void 0 : onFaceNotDetected();
@@ -14259,12 +14252,12 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     enabled: debugMode,
     pageWidth: width,
     pageHeight: height,
-    videoWidth: (_g = (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.videoWidth) !== null && _g !== void 0 ? _g : 0,
-    videoHeight: (_j = (_h = videoRef.current) === null || _h === void 0 ? void 0 : _h.videoHeight) !== null && _j !== void 0 ? _j : 0
+    videoWidth: (_h = (_g = videoRef.current) === null || _g === void 0 ? void 0 : _g.videoWidth) !== null && _h !== void 0 ? _h : 0,
+    videoHeight: (_k = (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.videoHeight) !== null && _k !== void 0 ? _k : 0
   });
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     ref: ref,
-    className: "flex ".concat((_k = classNames.container) !== null && _k !== void 0 ? _k : '')
+    className: "flex ".concat((_l = classNames.container) !== null && _l !== void 0 ? _l : '')
   }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, {
     className: classNames.cameraFeed
   }), /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
@@ -14281,11 +14274,8 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     verbiage: rawVerbiage.guides,
     requestedAction: requestedAction,
     borderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
-  }), !faceCentered && ( /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, null, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, {
-    "$background": (_o = (_m = (_l = theme.guidanceMessages) === null || _l === void 0 ? void 0 : _l.negative) === null || _m === void 0 ? void 0 : _m.backgroundColor) !== null && _o !== void 0 ? _o : 'red',
-    "$textColor": (_r = (_q = (_p = theme.guidanceMessages) === null || _p === void 0 ? void 0 : _p.negative) === null || _q === void 0 ? void 0 : _q.textColor) !== null && _r !== void 0 ? _r : 'white'
-  }, faceNotCenteredText))), debugMode && ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction) && ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlayDiv, {
-    "$flipX": !((_s = cameraRef.current) === null || _s === void 0 ? void 0 : _s.isRearFacing)
+  }), debugMode && ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction) && ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlayDiv, {
+    "$flipX": !((_m = cameraRef.current) === null || _m === void 0 ? void 0 : _m.isRearFacing)
   }, detectedObjects.map(function (obj, i) {
     var _a;
     return /*#__PURE__*/React__default['default'].createElement(IdCaptureDetectedObjectDebugBox, {
@@ -14296,7 +14286,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
     });
   })), /*#__PURE__*/React__default['default'].createElement(DebugBoundingBoxOverlay, {
-    "$flipX": !((_t = cameraRef.current) === null || _t === void 0 ? void 0 : _t.isRearFacing)
+    "$flipX": !((_o = cameraRef.current) === null || _o === void 0 ? void 0 : _o.isRearFacing)
   }, faces.map(function (face, i) {
     var _a;
     return /*#__PURE__*/React__default['default'].createElement(SelfieCaptureFaceDebugBox, {
@@ -14305,7 +14295,10 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       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: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), isRecording ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__default['default'].createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__default['default'].createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Best Frame Detection Score: ", bestFrameDetectionScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Best Frame Focus Score: ", bestFrameFocusScore)));
+  })))))), !faceCentered && ( /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, null, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, {
+    "$background": (_r = (_q = (_p = theme.guidanceMessages) === null || _p === void 0 ? void 0 : _p.negative) === null || _q === void 0 ? void 0 : _q.backgroundColor) !== null && _r !== void 0 ? _r : 'red',
+    "$textColor": (_u = (_t = (_s = theme.guidanceMessages) === null || _s === void 0 ? void 0 : _s.negative) === null || _t === void 0 ? void 0 : _t.textColor) !== null && _u !== void 0 ? _u : 'white'
+  }, faceNotCenteredText))), debugMode && ( /*#__PURE__*/React__default['default'].createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), isRecording ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__default['default'].createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__default['default'].createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Best Frame Detection Score: ", bestFrameDetectionScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Best Frame Focus Score: ", bestFrameFocusScore)));
 };
 
 var IdVideoCaptureSuccess = function IdVideoCaptureSuccess(_a) {