idmission-web-sdk 2.3.5 → 2.3.7

package/dist/sdk2.umd.development.js

@@ -211,7 +211,7 @@
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  var webSdkVersion = '2.3.5';
+  var webSdkVersion = '2.3.7';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -494,7 +494,7 @@
     var _a, _b;
     return (_b = (_a = props.colors) === null || _a === void 0 ? void 0 : _a.borderColor) !== null && _b !== void 0 ? _b : 'var(--idm-color-secondary-500)';
   });
-  var LoadingOverlayInner = styled(OverlayInner$2)(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n"], ["\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n"])));
+  var LoadingOverlayInner = styled(OverlayInner$2)(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n"], ["\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n"])));
   var LoadingOverlayHeader = styled.div(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"])), function (props) {
     var _a;
     return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
@@ -503,17 +503,23 @@
   });
   var LoadingOverlayGuidanceMessage = styled(GuidanceMessage)(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
   var LoadingOverlayImageContainer = styled(OverlayImageContainer)(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  padding: 0;\n  max-height: 100%;\n  pointer-events: none;\n"], ["\n  padding: 0;\n  max-height: 100%;\n  pointer-events: none;\n"])));
-  var LoadingOverlayProgressBarBackground = styled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
-  var LoadingOverlayProgressBar = styled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: block;\n  width: ", "%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n"], ["\n  display: block;\n  width: ", "%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n"])), function (props) {
+  var LoadingOverlayProgressBarBackground = styled.div.attrs({
+    className: 'loading-overlay-progress-bar-background'
+  })(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
+  var LoadingOverlayProgressBar = styled.span.attrs({
+    className: 'loading-overlay-progress-bar'
+  })(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: block;\n  width: ", "%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  position: absolute;\n"], ["\n  display: block;\n  width: ", "%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  position: absolute;\n"])), function (props) {
     return props.$progress;
   });
-  var LoadingOverlayProgressIndicator = styled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  height: 100%;\n  animation: ", " 3s ease-in-out;\n  animation-fill-mode: both;\n"], ["\n  display: block;\n  height: 100%;\n  animation: ", " 3s ease-in-out;\n  animation-fill-mode: both;\n"])), progressBarAnimation);
+  var LoadingOverlayProgressIndicator = styled.span.attrs({
+    className: 'loading-overlay-progress-indicator'
+  })(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  height: 100%;\n  animation: ", " 3s ease-in-out;\n  animation-fill-mode: both;\n"], ["\n  display: block;\n  height: 100%;\n  animation: ", " 3s ease-in-out;\n  animation-fill-mode: both;\n"])), progressBarAnimation);
   var LoadingOverlayButtonsRow = styled(ButtonsRow$2)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  min-height: 100px;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  min-height: 100px;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n"])));
   var LoadingOverlayLoadingListContainer = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  z-index: 2;\n"], ["\n  display: flex;\n  position: relative;\n  z-index: 2;\n"])));
   var LoadingOverlayLoadingList = styled.ul(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: block;\n  margin: auto;\n  list-style: none;\n  padding: 0;\n"], ["\n  display: block;\n  margin: auto;\n  list-style: none;\n  padding: 0;\n"])));
   var LoadingOverlayLoadingListItem = styled.li(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 1.25rem 2px 0;\n  line-height: 1rem;\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 1.25rem 2px 0;\n  line-height: 1rem;\n"])));
   var LoadingOverlayProgressContainer = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
-  var templateObject_1$M, templateObject_2$D, templateObject_3$r, templateObject_4$l, templateObject_5$e, templateObject_6$a, templateObject_7$7, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
+  var templateObject_1$M, templateObject_2$D, templateObject_3$r, templateObject_4$l, templateObject_5$e, templateObject_6$a, templateObject_7$7, templateObject_8$4, templateObject_9$4, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
 
   function _extends() {
     return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -8377,19 +8383,23 @@
       videoRef = _a.videoRef,
       _d = _a.shouldLoadModels,
       shouldLoadModels = _d === void 0 ? true : _d;
-    var _e = React.useState(false),
-      ready = _e[0],
-      setReady = _e[1];
+    var _e = React.useState('not-started'),
+      modelLoadState = _e[0],
+      setModelLoadState = _e[1];
     var _f = React.useState(0),
       modelDownloadProgress = _f[0],
       setModelDownloadProgress = _f[1];
     var _g = React.useState(null),
-      modelError = _g[0],
-      setModelError = _g[1];
+      modelWarmingStartedAt = _g[0],
+      setModelWarmingStartedAt = _g[1];
+    var _h = React.useState(null),
+      modelError = _h[0],
+      setModelError = _h[1];
     React.useEffect(function loadModel() {
       var _this = this;
       if (!shouldLoadModels) return;
-      setReady(false);
+      setModelLoadState('downloading');
+      setModelWarmingStartedAt(null);
       function handleDownloadProgress(event) {
         setModelDownloadProgress(progressToPercentage(event.detail));
       }
@@ -8406,6 +8416,8 @@
               case 0:
                 setModelDownloadProgress(100);
                 clearTimeout(modelLoadTimeout);
+                setModelLoadState('warming');
+                setModelWarmingStartedAt(new Date().getTime());
                 _a = waitForVideoReady(videoRef), videoReady = _a[0], cancel = _a[1];
                 cancelled = false;
                 cancelVideoReady = function cancelVideoReady() {
@@ -8418,7 +8430,7 @@
                 setTimeout(function () {
                   if (cancelled) return;
                   loadedModel.classifyForVideo(videoRef.current, performance.now());
-                  setReady(true);
+                  setModelLoadState('ready');
                 }, 500);
                 return [2 /*return*/];
             }
@@ -8426,6 +8438,7 @@
         });
       })["catch"](function (e) {
         setModelError(e);
+        setModelLoadState('error');
       })["finally"](function () {
         clearTimeout(modelLoadTimeout);
       });
@@ -8440,11 +8453,15 @@
     React.useEffect(function handleModelError() {
       if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
     }, [modelError, onModelError]);
-    return {
-      ready: ready,
-      modelDownloadProgress: modelDownloadProgress,
-      modelError: modelError
-    };
+    return React.useMemo(function () {
+      return {
+        ready: modelLoadState === 'ready',
+        modelLoadState: modelLoadState,
+        modelDownloadProgress: modelDownloadProgress,
+        modelWarmingStartedAt: modelWarmingStartedAt,
+        modelError: modelError
+      };
+    }, [modelLoadState, modelDownloadProgress, modelWarmingStartedAt, modelError]);
   }
   var lastFocusPredictionAt = 0;
   var lastFocusPredictionTime = 0;
@@ -8536,18 +8553,22 @@
       _b = _a.modelLoadTimeoutMs,
       modelLoadTimeoutMs = _b === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _b,
       videoRef = _a.videoRef;
-    var _c = React.useState(false),
-      ready = _c[0],
-      setReady = _c[1];
+    var _c = React.useState('not-started'),
+      modelLoadState = _c[0],
+      setModelLoadState = _c[1];
     var _d = React.useState(0),
       modelDownloadProgress = _d[0],
       setModelDownloadProgress = _d[1];
     var _e = React.useState(null),
-      modelError = _e[0],
-      setModelError = _e[1];
+      modelWarmingStartedAt = _e[0],
+      setModelWarmingStartedAt = _e[1];
+    var _f = React.useState(null),
+      modelError = _f[0],
+      setModelError = _f[1];
     React.useEffect(function loadModel() {
       var _this = this;
-      setReady(false);
+      setModelLoadState('downloading');
+      setModelWarmingStartedAt(null);
       var modelLoadTimeout = setTimeout(function () {
         setModelError(new Error('Model loading time limit exceeded.'));
       }, modelLoadTimeoutMs);
@@ -8564,6 +8585,8 @@
               case 0:
                 setModelDownloadProgress(100);
                 clearTimeout(modelLoadTimeout);
+                setModelLoadState('warming');
+                setModelWarmingStartedAt(new Date().getTime());
                 _a = waitForVideoReady(videoRef), videoReady = _a[0], cancel = _a[1];
                 cancelled = false;
                 cancelVideoReady = function cancelVideoReady() {
@@ -8575,13 +8598,14 @@
                 _b.sent();
                 if (cancelled) return [2 /*return*/];
                 model.detectForVideo(videoRef.current, performance.now());
-                setReady(true);
+                setModelLoadState('ready');
                 return [2 /*return*/];
             }
           });
         });
       })["catch"](function (e) {
         setModelError(e);
+        setModelLoadState('error');
       })["finally"](function () {
         clearTimeout(modelLoadTimeout);
       });
@@ -8596,11 +8620,15 @@
     React.useEffect(function handleModelError() {
       if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
     }, [modelError, onModelError]);
-    return {
-      ready: ready,
-      modelDownloadProgress: modelDownloadProgress,
-      modelError: modelError
-    };
+    return React.useMemo(function () {
+      return {
+        ready: modelLoadState === 'ready',
+        modelLoadState: modelLoadState,
+        modelDownloadProgress: modelDownloadProgress,
+        modelWarmingStartedAt: modelWarmingStartedAt,
+        modelError: modelError
+      };
+    }, [modelLoadState, modelDownloadProgress, modelWarmingStartedAt, modelError]);
   }
   var lastFaceDetectionAt = 0;
   var lastFaceDetectionTime = 0;
@@ -9042,19 +9070,23 @@
       scoreThreshold = _e === void 0 ? defaultDocumentDetectionScoreThreshold : _e,
       onModelError = _a.onModelError,
       videoRef = _a.videoRef;
-    var _f = React.useState(false),
-      ready = _f[0],
-      setReady = _f[1];
-    var _g = React.useState(0),
-      modelDownloadProgress = _g[0],
-      setModelDownloadProgress = _g[1];
-    var _h = React.useState(null),
-      modelError = _h[0],
-      setModelError = _h[1];
+    var _f = React.useState('not-started'),
+      modelLoadState = _f[0],
+      setModelLoadState = _f[1];
+    var _g = React.useState(null),
+      modelWarmingStartedAt = _g[0],
+      setModelWarmingStartedAt = _g[1];
+    var _h = React.useState(0),
+      modelDownloadProgress = _h[0],
+      setModelDownloadProgress = _h[1];
+    var _j = React.useState(null),
+      modelError = _j[0],
+      setModelError = _j[1];
     React.useEffect(function loadModel() {
       var _this = this;
       if (!shouldLoadModels) return;
-      setReady(false);
+      setModelLoadState('downloading');
+      setModelWarmingStartedAt(null);
       function handleDownloadProgress(event) {
         setModelDownloadProgress(progressToPercentage(event.detail));
       }
@@ -9070,6 +9102,8 @@
             switch (_b.label) {
               case 0:
                 setModelDownloadProgress(100);
+                setModelLoadState('warming');
+                setModelWarmingStartedAt(new Date().getTime());
                 clearTimeout(modelLoadTimeout);
                 _a = waitForVideoReady(videoRef), videoReady = _a[0], cancel = _a[1];
                 cancelled = false;
@@ -9083,7 +9117,7 @@
                 setTimeout(function () {
                   if (cancelled) return;
                   model.detectForVideo(videoRef.current, performance.now());
-                  setReady(true);
+                  setModelLoadState('ready');
                 }, 500);
                 return [2 /*return*/];
             }
@@ -9091,6 +9125,7 @@
         });
       })["catch"](function (e) {
         setModelError(e);
+        setModelLoadState('error');
       })["finally"](function () {
         clearTimeout(modelLoadTimeout);
       });
@@ -9105,12 +9140,16 @@
     React.useEffect(function handleModelError() {
       if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
     }, [modelError, onModelError]);
-    return {
-      ready: ready,
-      modelDownloadProgress: modelDownloadProgress,
-      modelError: modelError,
-      setModelError: setModelError
-    };
+    return React.useMemo(function () {
+      return {
+        ready: modelLoadState === 'ready',
+        modelLoadState: modelLoadState,
+        modelDownloadProgress: modelDownloadProgress,
+        modelWarmingStartedAt: modelWarmingStartedAt,
+        modelError: modelError,
+        setModelError: setModelError
+      };
+    }, [modelLoadState, modelDownloadProgress, modelWarmingStartedAt, modelError]);
   }
   function makeDocumentDetectorPrediction(frame) {
     return __awaiter(this, void 0, void 0, function () {
@@ -13372,6 +13411,12 @@
     "We're sorry, but it looks like the camera is being tampered with. Please check your device and try again by reloading the page.": '很抱歉，看起來相機被篡改了。請檢查您的設備並重新載入頁面。'
   };
 
+  function renderVerbiage(verbiage) {
+    if (typeof verbiage === 'string') return /*#__PURE__*/React.createElement(React.Fragment, null, verbiage);
+    var Verbiage = verbiage;
+    return /*#__PURE__*/React.createElement(Verbiage, null);
+  }
+
   var resources = {
     en: {
       translation: en
@@ -13426,11 +13471,12 @@
   };
   function evaluateVerbiage(t, currentLanguage, verbiage, fallback) {
     if (typeof verbiage === 'string') return verbiage;
+    if (typeof verbiage === 'function') return renderVerbiage(verbiage);
     if (typeof verbiage === 'object') {
       var translations = verbiage;
-      if (translations[currentLanguage]) return translations[currentLanguage];
+      if (translations[currentLanguage]) return renderVerbiage(translations[currentLanguage]);
       var nonLocaleLang = currentLanguage.split('-')[0];
-      if (translations[nonLocaleLang]) return translations[nonLocaleLang];
+      if (translations[nonLocaleLang]) return renderVerbiage(translations[nonLocaleLang]);
     }
     return t(fallback);
   }
@@ -13922,8 +13968,9 @@
     loadDocumentDetectionModel: function loadDocumentDetectionModel() {
       return null;
     },
-    documentDetectionModelReady: false,
+    documentDetectionModelState: 'not-started',
     documentDetectionModelDownloadProgress: 0,
+    documentDetectionModelWarmingStartedAt: null,
     documentDetectionModelError: null,
     onDocumentDetected: function onDocumentDetected() {
       return null;
@@ -13996,7 +14043,9 @@
         shouldLoadModels: shouldLoadModels
       }),
       ready = _q.ready,
+      modelLoadState = _q.modelLoadState,
       modelDownloadProgress = _q.modelDownloadProgress,
+      modelWarmingStartedAt = _q.modelWarmingStartedAt,
       modelError = _q.modelError,
       setModelError = _q.setModelError;
     var _r = useFrameLoop(React.useCallback(function (frameId, timeRunning) {
@@ -14063,7 +14112,8 @@
         startDocumentDetection: start,
         stopDocumentDetection: stop,
         loadDocumentDetectionModel: load,
-        documentDetectionModelReady: ready,
+        documentDetectionModelState: modelLoadState,
+        documentDetectionModelWarmingStartedAt: modelWarmingStartedAt,
         documentDetectionModelError: modelError,
         documentDetectionModelDownloadProgress: modelDownloadProgress,
         onDocumentDetected: onDocumentDetected,
@@ -14075,7 +14125,7 @@
         documentDetectionLastPredictionCanvas: lastPredictionCanvas,
         clearDocumentDetectionLastPredictionCanvas: clearDocumentDetectionLastPredictionCanvas
       };
-    }, [start, stop, load, ready, modelError, modelDownloadProgress, onDocumentDetected, documentDetectionThresholds, documentDetectionBoundaries, clearDocumentDetectionLastPredictionCanvas]);
+    }, [start, stop, load, modelLoadState, modelWarmingStartedAt, modelError, modelDownloadProgress, onDocumentDetected, documentDetectionThresholds, documentDetectionBoundaries, clearDocumentDetectionLastPredictionCanvas]);
     return /*#__PURE__*/React__namespace.createElement(DocumentDetectionModelContext.Provider, {
       value: value
     }, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
@@ -14088,8 +14138,9 @@
     loadFocusModel: function loadFocusModel() {
       return null;
     },
-    focusModelReady: false,
+    focusModelState: 'not-started',
     focusModelDownloadProgress: 0,
+    focusModelWarmingStartedAt: null,
     focusModelError: null,
     focusThresholds: {},
     setFocusThresholds: function setFocusThresholds() {
@@ -14131,7 +14182,9 @@
         shouldLoadModels: shouldLoadModels
       }),
       ready = _h.ready,
+      modelLoadState = _h.modelLoadState,
       modelDownloadProgress = _h.modelDownloadProgress,
+      modelWarmingStartedAt = _h.modelWarmingStartedAt,
       modelError = _h.modelError;
     var makeFocusPrediction = React.useCallback(function (imageData, box) {
       if (!ready) return null;
@@ -14143,15 +14196,16 @@
     var value = React.useMemo(function () {
       return {
         loadFocusModel: load,
-        focusModelReady: ready,
+        focusModelState: modelLoadState,
         focusModelDownloadProgress: modelDownloadProgress,
+        focusModelWarmingStartedAt: modelWarmingStartedAt,
         focusModelError: modelError,
         makeFocusPrediction: makeFocusPrediction,
         focusPredictionTime: lastFocusPredictionTime,
         focusThresholds: focusThresholds,
         setFocusThresholds: setFocusThresholds
       };
-    }, [focusThresholds, load, makeFocusPrediction, modelDownloadProgress, modelError, ready]);
+    }, [focusThresholds, load, makeFocusPrediction, modelDownloadProgress, modelError, modelLoadState, modelWarmingStartedAt]);
     return /*#__PURE__*/React.createElement(FocusModelContext.Provider, {
       value: value
     }, /*#__PURE__*/React.createElement(InvisibleCanvas, {
@@ -14216,6 +14270,8 @@
       return null;
     },
     modelDownloadProgress: 0,
+    modelLoadState: 'not-started',
+    modelWarmingStartedAt: null,
     modelError: null,
     thresholds: defaultIdCaptureThresholds,
     setThresholds: function setThresholds() {
@@ -14250,8 +14306,9 @@
       _b = _a.allowSinglePageIdCapture,
       allowSinglePageIdCapture = _b === void 0 ? false : _b;
     var _c = React.useContext(DocumentDetectionModelContext),
-      documentDetectionModelReady = _c.documentDetectionModelReady,
+      documentDetectionModelState = _c.documentDetectionModelState,
       documentDetectionModelDownloadProgress = _c.documentDetectionModelDownloadProgress,
+      documentDetectionModelWarmingStartedAt = _c.documentDetectionModelWarmingStartedAt,
       startDocumentDetection = _c.startDocumentDetection,
       stopDocumentDetection = _c.stopDocumentDetection,
       loadDocumentDetectionModel = _c.loadDocumentDetectionModel,
@@ -14266,8 +14323,9 @@
       documentDetectionModelError = _c.documentDetectionModelError;
     var _d = React.useContext(FocusModelContext),
       loadFocusModel = _d.loadFocusModel,
-      focusModelReady = _d.focusModelReady,
+      focusModelState = _d.focusModelState,
       focusModelDownloadProgress = _d.focusModelDownloadProgress,
+      focusModelWarmingStartedAt = _d.focusModelWarmingStartedAt,
       makeFocusPrediction = _d.makeFocusPrediction,
       focusThresholds = _d.focusThresholds,
       setFocusThresholds = _d.setFocusThresholds,
@@ -14375,10 +14433,17 @@
       loadDocumentDetectionModel();
       loadFocusModel();
     }, [loadDocumentDetectionModel, loadFocusModel]);
+    var ready = documentDetectionModelState === 'ready' && focusModelState === 'ready';
+    var modelLoadState = ready ? 'ready' : documentDetectionModelState === 'warming' || focusModelState === 'warming' ? 'warming' : focusModelState === 'downloading' || documentDetectionModelState === 'downloading' ? 'downloading' : 'not-started';
+    var modelWarmingStartedAt = !documentDetectionModelWarmingStartedAt && !focusModelWarmingStartedAt ? null : Math.min.apply(Math, [documentDetectionModelWarmingStartedAt, focusModelWarmingStartedAt].filter(function (v) {
+      return v !== null;
+    }));
     var value = React.useMemo(function () {
       return {
-        ready: documentDetectionModelReady && focusModelReady,
+        ready: ready,
         modelDownloadProgress: (documentDetectionModelDownloadProgress + focusModelDownloadProgress) / 2,
+        modelLoadState: modelLoadState,
+        modelWarmingStartedAt: modelWarmingStartedAt,
         modelError: modelError,
         start: startDocumentDetection,
         stop: stopDocumentDetection,
@@ -14396,7 +14461,7 @@
         requiredDocumentType: requiredDocumentType,
         setRequiredDocumentType: setRequiredDocumentType
       };
-    }, [detectionTime, documentDetectionBoundaries, documentDetectionModelDownloadProgress, documentDetectionModelReady, focusModelDownloadProgress, focusModelReady, focusPredictionTime, getBestFrame, load, modelError, onPredictionMade, requiredDocumentType, resetBestFrame, setDocumentDetectionBoundaries, setThresholds, startDocumentDetection, stopDocumentDetection, thresholds]);
+    }, [detectionTime, documentDetectionBoundaries, documentDetectionModelDownloadProgress, focusModelDownloadProgress, focusPredictionTime, getBestFrame, load, modelLoadState, modelError, modelWarmingStartedAt, onPredictionMade, ready, requiredDocumentType, resetBestFrame, setDocumentDetectionBoundaries, setThresholds, startDocumentDetection, stopDocumentDetection, thresholds]);
     return /*#__PURE__*/React.createElement(IdCaptureModelsContext.Provider, {
       value: value
     }, /*#__PURE__*/React.createElement(InvisibleCanvas, {
@@ -16417,7 +16482,10 @@
   var legacyInstructionImageUrl$1 = "".concat(DEFAULT_CDN_URL, "/WebSDK-Instruction-DL-Capture-3-Portrait.png");
   var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a) {
     var _b, _c, _d, _e, _f, _g;
-    var onDismissed = _a.onDismissed,
+    var onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
+      onDismissed = _a.onDismissed,
       onUserCancel = _a.onUserCancel,
       instructions = _a.instructions,
       _h = _a.rotateImage,
@@ -16435,7 +16503,9 @@
     var sessionReady = sessionCheckState === 'PASSED';
     var _o = useIdCaptureModelsContext(),
       modelsReady = _o.ready,
-      modelDownloadProgress = _o.modelDownloadProgress;
+      modelLoadState = _o.modelLoadState,
+      modelDownloadProgress = _o.modelDownloadProgress,
+      modelWarmingStartedAt = _o.modelWarmingStartedAt;
     var _p = useCameraStore(),
       cameraReady = _p.cameraReady,
       cameraAccessDenied = _p.cameraAccessDenied,
@@ -16458,11 +16528,27 @@
       pleaseWaitText: 'Please wait...',
       sessionCheckingText: 'Authenticating...'
     });
+    var onLoadingStartedRef = React.useRef(onLoadingStarted);
+    React.useEffect(function () {
+      onLoadingStartedRef.current = onLoadingStarted;
+    }, [onLoadingStarted]);
+    var onLoadingProgressRef = React.useRef(onLoadingProgress);
+    React.useEffect(function () {
+      onLoadingProgressRef.current = onLoadingProgress;
+    }, [onLoadingProgress]);
+    var onLoadingCompletedRef = React.useRef(onLoadingCompleted);
+    React.useEffect(function () {
+      onLoadingCompletedRef.current = onLoadingCompleted;
+    }, [onLoadingCompleted]);
     var ready = sessionReady && modelsReady && cameraReady;
     React.useEffect(function () {
-      if (ready) return function () {
-        return null;
-      };
+      var _a;
+      if (ready) {
+        (_a = onLoadingCompletedRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadingCompletedRef);
+        return function () {
+          return null;
+        };
+      }
       var t = setTimeout(function () {
         return setDismissed(false);
       }, 500);
@@ -16471,6 +16557,19 @@
       };
     }, [ready]);
     var imageRef = React.useRef(null);
+    var timeSinceWarmingStarted = modelWarmingStartedAt ? new Date().getTime() - modelWarmingStartedAt : 0;
+    var warmingProgress = timeSinceWarmingStarted / 5000.0;
+    var modelLoadProgress = modelsReady ? 100 : modelDownloadProgress * 0.5 + warmingProgress * 49.0;
+    React.useEffect(function () {
+      var _a;
+      (_a = onLoadingStartedRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadingStartedRef);
+    }, []);
+    React.useEffect(function () {
+      var _a;
+      if (modelLoadProgress > 0) {
+        (_a = onLoadingProgressRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadingProgressRef, modelLoadProgress);
+      }
+    }, [modelLoadProgress]);
     if (dismissed) return /*#__PURE__*/React.createElement(React.Fragment, null);
     if (cameraAccessDenied) {
       return /*#__PURE__*/React.createElement(CameraAccessDeniedOverlay, {
@@ -16530,7 +16629,7 @@
     }, /*#__PURE__*/React.createElement(ProgressBarBackground$1, {
       className: classNames.progressBackground
     }), /*#__PURE__*/React.createElement(LoadingOverlayProgressBar, {
-      "$progress": modelDownloadProgress,
+      "$progress": modelLoadProgress,
       className: classNames.progressBar
     }, /*#__PURE__*/React.createElement(ProgressIndicator$1, {
       className: classNames.progressIndicator
@@ -16548,7 +16647,7 @@
     }, /*#__PURE__*/React.createElement(LoadingListItemIndicator, {
       className: classNames.loadingListItemIndicator,
       state: sessionReady && modelsReady ? 'done' : 'running'
-    }), !sessionReady ? verbiage.sessionCheckingText : modelsReady ? verbiage.modelsReadyText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))), /*#__PURE__*/React.createElement(ContinueButtonContainer$1, {
+    }), !sessionReady ? verbiage.sessionCheckingText : modelsReady ? verbiage.modelsReadyText : modelLoadState === 'downloading' ? "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)") : modelLoadState === 'warming' ? verbiage.modelsWarmingUpText : verbiage.modelsReadyText))), /*#__PURE__*/React.createElement(ContinueButtonContainer$1, {
       className: classNames.continueBtnContainer
     }, (ready || ((_g = (_f = theme.idCapture) === null || _f === void 0 ? void 0 : _f.loadingOverlay) === null || _g === void 0 ? void 0 : _g.displayDisabledContinueBtn)) && ( /*#__PURE__*/React.createElement(ContinueButton$1, {
       autoFocus: true,
@@ -16587,9 +16686,12 @@
     var _a, _b, _c, _d;
     return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarBackgroundOpacity) !== null && _d !== void 0 ? _d : 0.75;
   });
-  var ProgressIndicator$1 = styled(LoadingOverlayProgressIndicator)(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  animation: ", " 3s ease-in-out;\n  animation-fill-mode: both;\n"], ["\n  animation: ", " 3s ease-in-out;\n  animation-fill-mode: both;\n"])), progressBarAnimation);
+  var ProgressIndicator$1 = styled(LoadingOverlayProgressIndicator)(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  animation: ", " 3s ease-in-out;\n  animation-fill-mode: both;\n  background: ", ";\n"], ["\n  animation: ", " 3s ease-in-out;\n  animation-fill-mode: both;\n  background: ", ";\n"])), progressBarAnimation, function (props) {
+    var _a, _b, _c, _d;
+    return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarIndicatorColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-primary-500)';
+  });
   var CustomLoadingGraphic$1 = styled.img(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n"], ["\n  transform-style: preserve-3d;\n"])));
-  var ContinueButtonContainer$1 = styled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+  var ContinueButtonContainer$1 = styled.div(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
   var ContinueButton$1 = styled(LoaderButton)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n  \n  &:focus-visible {\n    ", "\n    box-shadow: none;\n  }\n\n  &.disabled {\n    background: ", ";\n    color: ", ";\n    border: ", ";\n  }\n"], ["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n  \n  &:focus-visible {\n    ", "\n    box-shadow: none;\n  }\n\n  &.disabled {\n    background: ", ";\n    color: ", ";\n    border: ", ";\n  }\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f;
     return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarFontSize) ? "font-size: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.progressBarFontSize, ";") : '';
@@ -16609,7 +16711,7 @@
     var _a, _b, _c, _d;
     return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnDisabledBorder) !== null && _d !== void 0 ? _d : 'none';
   });
-  var templateObject_1$E, templateObject_2$x, templateObject_3$m, templateObject_4$g, templateObject_5$c, templateObject_6$9, templateObject_7$6, templateObject_8$3, templateObject_9$2, templateObject_10$1;
+  var templateObject_1$E, templateObject_2$x, templateObject_3$m, templateObject_4$g, templateObject_5$c, templateObject_6$9, templateObject_7$6, templateObject_8$3, templateObject_9$3, templateObject_10$1;
 
   var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"], ["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"])));
   var ContinuityCameraCheckbox = styled.input(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
@@ -17475,7 +17577,7 @@
       "$maskColor": maskColor,
       "$minHeight": padding,
       className: regionClsx(classNames, 'Top')
-    }, instruction !== '' && ( /*#__PURE__*/React.createElement(GuideText, {
+    }, !!instruction && ( /*#__PURE__*/React.createElement(GuideText, {
       className: classNames.guideText
     }, instruction))), /*#__PURE__*/React.createElement(GuideCenterRow, {
       className: classNames.centerRow
@@ -17526,7 +17628,7 @@
       "$maskColor": maskColor,
       "$minHeight": padding,
       className: regionClsx(classNames, 'Bottom')
-    }, instruction !== '' && ( /*#__PURE__*/React.createElement(GuideText, {
+    }, !!instruction && ( /*#__PURE__*/React.createElement(GuideText, {
       style: {
         opacity: 0
       }
@@ -17564,8 +17666,8 @@
     return props.$padding ? "padding: ".concat(props.$padding, "px;") : '';
   });
   var GuideText = styled.span(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"], ["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"])));
-  var GuideCenterInner = styled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  position: relative;\n  margin: auto;\n"], ["\n  position: relative;\n  margin: auto;\n"])));
-  var templateObject_1$y, templateObject_2$s, templateObject_3$j, templateObject_4$d, templateObject_5$9, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9$1;
+  var GuideCenterInner = styled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n  position: relative;\n  margin: auto;\n"], ["\n  position: relative;\n  margin: auto;\n"])));
+  var templateObject_1$y, templateObject_2$s, templateObject_3$j, templateObject_4$d, templateObject_5$9, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9$2;
 
   var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
@@ -19079,7 +19181,7 @@
   var DashedSeparator = styled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  width: 100%;\n  height: 0;\n  border-top: 2px solid #606060;\n  border-top-style: dashed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 0;\n  border-top: 2px solid #606060;\n  border-top-style: dashed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
   var OrWrapper = styled.div(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  color: #323232;\n  font-weight: bold;\n  background: white;\n  border-radius: 50%;\n  top: -2px;\n  position: relative;\n  width: 60px;\n  height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  color: #323232;\n  font-weight: bold;\n  background: white;\n  border-radius: 50%;\n  top: -2px;\n  position: relative;\n  width: 60px;\n  height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
   var UploadIdBackHelpText = styled.p(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  color: #323232;\n  font-style: italic;\n  margin: 30px 0 0;\n"], ["\n  color: #323232;\n  font-style: italic;\n  margin: 30px 0 0;\n"])));
-  var Button = styled(WideBorderButton)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: auto;\n  font-weight: 500;\n  padding-left: 40px;\n  padding-right: 40px;\n  transition: background-color 0.3s ease;\n  background-color: #ffffff;\n  white-space: nowrap;\n\n  &:disabled,\n  &.disabled {\n    background-color: #f1f1f1 !important;\n    border-color: #dbdbdb !important;\n    color: #323232 !important;\n  }\n\n  &:hover {\n    filter: none;\n    background-color: #fafafa !important;\n  }\n"], ["\n  width: auto;\n  font-weight: 500;\n  padding-left: 40px;\n  padding-right: 40px;\n  transition: background-color 0.3s ease;\n  background-color: #ffffff;\n  white-space: nowrap;\n\n  &:disabled,\n  &.disabled {\n    background-color: #f1f1f1 !important;\n    border-color: #dbdbdb !important;\n    color: #323232 !important;\n  }\n\n  &:hover {\n    filter: none;\n    background-color: #fafafa !important;\n  }\n"])));
+  var Button = styled(WideBorderButton)(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  width: auto;\n  font-weight: 500;\n  padding-left: 40px;\n  padding-right: 40px;\n  transition: background-color 0.3s ease;\n  background-color: #ffffff;\n  white-space: nowrap;\n\n  &:disabled,\n  &.disabled {\n    background-color: #f1f1f1 !important;\n    border-color: #dbdbdb !important;\n    color: #323232 !important;\n  }\n\n  &:hover {\n    filter: none;\n    background-color: #fafafa !important;\n  }\n"], ["\n  width: auto;\n  font-weight: 500;\n  padding-left: 40px;\n  padding-right: 40px;\n  transition: background-color 0.3s ease;\n  background-color: #ffffff;\n  white-space: nowrap;\n\n  &:disabled,\n  &.disabled {\n    background-color: #f1f1f1 !important;\n    border-color: #dbdbdb !important;\n    color: #323232 !important;\n  }\n\n  &:hover {\n    filter: none;\n    background-color: #fafafa !important;\n  }\n"])));
   var Modal = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 10000;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 10000;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])));
   var Dialog = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: 100%;\n  max-width: 500px;\n  height: 100%;\n  max-height: 600px;\n  background: white;\n  border-radius: 25px;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n  font-family: ", ";\n  //margin: 25px;\n"], ["\n  width: 100%;\n  max-width: 500px;\n  height: 100%;\n  max-height: 600px;\n  background: white;\n  border-radius: 25px;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n  font-family: ", ";\n  //margin: 25px;\n"])), function (props) {
     var _a;
@@ -19357,17 +19459,20 @@
     } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
     return bytes.toFixed(dp) + ' ' + units[u];
   }
-  var templateObject_1$p, templateObject_2$l, templateObject_3$f, templateObject_4$9, templateObject_5$6, templateObject_6$4, templateObject_7$3, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+  var templateObject_1$p, templateObject_2$l, templateObject_3$f, templateObject_4$9, templateObject_5$6, templateObject_6$4, templateObject_7$3, templateObject_8$1, templateObject_9$1, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
 
   var IdCaptureWizard = function IdCaptureWizard(_a) {
     var _b, _c, _d, _e, _f;
-    var onSuccess = _a.onSuccess,
+    var onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
+      onSuccess = _a.onSuccess,
       onExitCapture = _a.onExitCapture,
       onUserCancel = _a.onUserCancel,
+      onLoadingOverlayDismissed = _a.onLoadingOverlayDismissed,
       _g = _a.loadingOverlayMode,
       loadingOverlayMode = _g === void 0 ? 'default' : _g,
       customOverlayContent = _a.customOverlayContent,
-      onLoadingOverlayDismissed = _a.onLoadingOverlayDismissed,
       precapturedDocuments = _a.precapturedDocuments,
       _h = _a.captureRequirement,
       captureRequirement = _h === void 0 ? 'idCardOrPassport' : _h,
@@ -19713,6 +19818,9 @@
       colors: colors.loadingOverlay,
       verbiage: verbiage.loadingOverlay,
       onUserCancel: onUserCancel,
+      onLoadingStarted: onLoadingStarted,
+      onLoadingProgress: onLoadingProgress,
+      onLoadingCompleted: onLoadingCompleted,
       onDismissed: function onDismissed() {
         setOverlayDismissed(true);
         onLoadingOverlayDismissed === null || onLoadingOverlayDismissed === void 0 ? void 0 : onLoadingOverlayDismissed();
@@ -20370,6 +20478,8 @@
     },
     ready: false,
     error: null,
+    modelLoadState: 'not-started',
+    modelWarmingStartedAt: null,
     modelDownloadProgress: 0
   });
   function SelfieGuidanceModelsProvider(_a) {
@@ -20401,7 +20511,9 @@
         videoRef: videoRef
       }),
       ready = _f.ready,
+      modelLoadState = _f.modelLoadState,
       modelDownloadProgress = _f.modelDownloadProgress,
+      modelWarmingStartedAt = _f.modelWarmingStartedAt,
       modelError = _f.modelError;
     var _g = useFrameLoop(React.useCallback(function () {
         return __awaiter(_this, void 0, void 0, function () {
@@ -20463,9 +20575,11 @@
         canvasRef: canvasRef,
         onPredictionMade: onPredictionMade,
         error: modelError,
-        modelDownloadProgress: modelDownloadProgress
+        modelDownloadProgress: modelDownloadProgress,
+        modelLoadState: modelLoadState,
+        modelWarmingStartedAt: modelWarmingStartedAt
       };
-    }, [start, stop, ready, onPredictionMade, modelError, modelDownloadProgress]);
+    }, [start, stop, ready, onPredictionMade, modelError, modelDownloadProgress, modelLoadState, modelWarmingStartedAt]);
     return /*#__PURE__*/React__namespace.createElement(SelfieGuidanceModelsContext.Provider, {
       value: value
     }, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
@@ -20830,7 +20944,7 @@
     }), /*#__PURE__*/React.createElement(GuidesComponent, {
       classNames: classNames.guides,
       status: satisfied ? 'processing' : 'ready'
-    }), guidanceMessage !== '' && ( /*#__PURE__*/React.createElement(GuidanceMessageContainer, {
+    }), !!guidanceMessage && ( /*#__PURE__*/React.createElement(GuidanceMessageContainer, {
       className: classNames.guidanceMessageContainer
     }, /*#__PURE__*/React.createElement(GuidanceMessage, {
       "$variant": satisfied ? 'positive' : 'negative',
@@ -21171,7 +21285,7 @@
       guidesComponent: guidesByRequestState,
       classNames: classNames,
       colors: colors,
-      verbiage: verbiage,
+      verbiage: rawVerbiage,
       debugMode: debugMode
     }), debugMode && !disableCapturePreview && imageUrl && ( /*#__PURE__*/React.createElement(SelfieProgressPreview, {
       classNames: classNames.imagePreview,
@@ -23436,8 +23550,6 @@
       onClearSignaturePadClicked = _a.onClearSignaturePadClicked,
       _d = _a.minSignaturePadPoints,
       minSignaturePadPoints = _d === void 0 ? DEFAULT_MIN_SIGNATURE_PAD_POINTS : _d,
-      signaturePadEmptyContent = _a.signaturePadEmptyContent,
-      headTrackingUnsatisfiedContent = _a.headTrackingUnsatisfiedContent,
       _e = _a.headTrackingSatisfied,
       headTrackingSatisfied = _e === void 0 ? true : _e,
       _f = _a.classNames,
@@ -23458,6 +23570,8 @@
       signatureValid = _l[0],
       setSignatureValid = _l[1];
     var verbiage = useTranslations(rawVerbiage, {
+      signaturePadEmptyText: '',
+      headTrackingUnsatisfiedText: '',
       clearSignatureBtnText: 'Clear',
       acceptSignatureBtnText: 'Accept'
     });
@@ -23471,9 +23585,13 @@
     var isSigning = requestedAction === 'CAPTURE_SIGNATURE';
     var canClear = isSigning && !signaturePadEmpty;
     var canSubmit = isSigning && signatureValid && headTrackingSatisfied;
-    var displayEmptyState = requestedAction === 'CAPTURE_SIGNATURE' && signaturePadEmpty;
-    var EmptyContent = signaturePadEmptyContent;
-    var HeadTrackingUnsatisfiedContent = headTrackingUnsatisfiedContent;
+    var _m = React.useState(false),
+      emptyContentDismissed = _m[0],
+      setEmptyContentDismissed = _m[1];
+    var displayEmptyState = requestedAction === 'CAPTURE_SIGNATURE' && signaturePadEmpty && !emptyContentDismissed;
+    React.useEffect(function () {
+      if (signaturePadEmpty) setEmptyContentDismissed(false);
+    }, [signaturePadEmpty]);
     return /*#__PURE__*/React.createElement(Container$3, {
       className: classNames.container
     }, /*#__PURE__*/React.createElement(Inner$1, {
@@ -23509,11 +23627,18 @@
         });
         setSignatureValid(points.length >= minSignaturePadPoints);
       }
-    }), !headTrackingSatisfied && HeadTrackingUnsatisfiedContent ? ( /*#__PURE__*/React.createElement(SignaturePadContentContainer, {
-      className: classNames.headTrackingUnsatisfiedContent
-    }, typeof HeadTrackingUnsatisfiedContent === 'string' ? HeadTrackingUnsatisfiedContent : ( /*#__PURE__*/React.createElement(HeadTrackingUnsatisfiedContent, null)))) : displayEmptyState && EmptyContent && ( /*#__PURE__*/React.createElement(SignaturePadContentContainer, {
-      className: classNames.emptyContentContainer
-    }, typeof EmptyContent === 'string' ? EmptyContent : ( /*#__PURE__*/React.createElement(EmptyContent, null))))), /*#__PURE__*/React.createElement(SignatureButtonsContainer, {
+    }), !headTrackingSatisfied && !!verbiage.headTrackingUnsatisfiedText ? ( /*#__PURE__*/React.createElement(SignaturePadContentContainer, {
+      className: classNames.headTrackingUnsatisfiedContentContainer
+    }, /*#__PURE__*/React.createElement(SignaturePadContentInner, {
+      className: classNames.headTrackingUnsatisfiedContentInner
+    }, verbiage.headTrackingUnsatisfiedText))) : displayEmptyState && !!verbiage.signaturePadEmptyText && ( /*#__PURE__*/React.createElement(SignaturePadContentContainer, {
+      className: classNames.emptyContentContainer,
+      onClick: function onClick() {
+        return setEmptyContentDismissed(true);
+      }
+    }, /*#__PURE__*/React.createElement(SignaturePadContentInner, {
+      className: classNames.emptyContentInner
+    }, verbiage.signaturePadEmptyText)))), /*#__PURE__*/React.createElement(SignatureButtonsContainer, {
       className: classNames.signatureButtonsRow
     }, /*#__PURE__*/React.createElement(LoaderButton, {
       variant: "secondary",
@@ -23549,13 +23674,15 @@
     return props.$headTrackingUnsatisfied ? 'pointer-events: none;' : '';
   });
   var AcceptBtn = styled(LoaderButton)(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
-  var SignaturePadContentContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  pointer-events: none;\n  color: ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  pointer-events: none;\n  color: ", ";\n"])), function (props) {
+  var SignaturePadContentContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
+  var SignaturePadContentInner = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  pointer-events: none;\n  color: ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  pointer-events: none;\n  color: ", ";\n"])), function (props) {
     var _a, _b, _c;
     return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.emptyTextColor) !== null && _c !== void 0 ? _c : 'black';
   });
-  var templateObject_1$b, templateObject_2$9, templateObject_3$8, templateObject_4$3, templateObject_5$3, templateObject_6$2, templateObject_7$1, templateObject_8;
+  var templateObject_1$b, templateObject_2$9, templateObject_3$8, templateObject_4$3, templateObject_5$3, templateObject_6$2, templateObject_7$1, templateObject_8, templateObject_9;
 
   var DEFAULT_MIN_SIGNATURE_PAD_POINTS = 10;
+  var DEFAULT_HEAD_TRACKING_BOUNDARY_PERCENTAGE = 0.01;
   var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     var onVideoCaptured = _a.onVideoCaptured,
       onFaceNotDetected = _a.onFaceNotDetected,
@@ -23565,38 +23692,38 @@
       guidesComponent = _a.guidesComponent,
       _c = _a.minSignaturePadPoints,
       minSignaturePadPoints = _c === void 0 ? DEFAULT_MIN_SIGNATURE_PAD_POINTS : _c,
-      signaturePadEmptyContent = _a.signaturePadEmptyContent,
-      headTrackingUnsatisfiedContent = _a.headTrackingUnsatisfiedContent,
-      _d = _a.classNames,
-      classNames = _d === void 0 ? {} : _d,
-      _e = _a.colors,
-      colors = _e === void 0 ? {} : _e,
-      _f = _a.verbiage,
-      rawVerbiage = _f === void 0 ? {} : _f,
-      _g = _a.debugMode,
-      debugMode = _g === void 0 ? false : _g;
-    var _h = useCameraStore(useShallow(function (state) {
+      _d = _a.headTrackingBoundaryPercentage,
+      headTrackingBoundaryPercentage = _d === void 0 ? DEFAULT_HEAD_TRACKING_BOUNDARY_PERCENTAGE : _d,
+      _e = _a.classNames,
+      classNames = _e === void 0 ? {} : _e,
+      _f = _a.colors,
+      colors = _f === void 0 ? {} : _f,
+      _g = _a.verbiage,
+      rawVerbiage = _g === void 0 ? {} : _g,
+      _h = _a.debugMode,
+      debugMode = _h === void 0 ? false : _h;
+    var _j = useCameraStore(useShallow(function (state) {
         return {
           camera: state.camera,
           videoWidth: state.videoWidth,
           videoHeight: state.videoHeight
         };
       })),
-      camera = _h.camera,
-      videoWidth = _h.videoWidth,
-      videoHeight = _h.videoHeight;
-    var _j = useSelfieGuidanceModelsContext(),
-      onPredictionMade = _j.onPredictionMade,
-      start = _j.start,
-      stop = _j.stop;
-    var _k = useVideoSignatureContext(),
-      signatureData = _k.signatureData,
-      signatureDataUrl = _k.signatureDataUrl,
-      signatureVideoData = _k.signatureVideoData,
-      startRecording = _k.startRecording,
-      stopRecording = _k.stopRecording,
-      clearRecordedData = _k.clearRecordedData,
-      isRecording = _k.isRecording;
+      camera = _j.camera,
+      videoWidth = _j.videoWidth,
+      videoHeight = _j.videoHeight;
+    var _k = useSelfieGuidanceModelsContext(),
+      onPredictionMade = _k.onPredictionMade,
+      start = _k.start,
+      stop = _k.stop;
+    var _l = useVideoSignatureContext(),
+      signatureData = _l.signatureData,
+      signatureDataUrl = _l.signatureDataUrl,
+      signatureVideoData = _l.signatureVideoData,
+      startRecording = _l.startRecording,
+      stopRecording = _l.stopRecording,
+      clearRecordedData = _l.clearRecordedData,
+      isRecording = _l.isRecording;
     React.useEffect(function () {
       startRecording();
       return stopRecording;
@@ -23615,31 +23742,31 @@
         onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(signatureVideoData, signatureData, signatureDataUrl);
       }
     }, [onVideoCaptured, signatureData, signatureDataUrl, signatureVideoData]);
-    var _l = React.useState(true),
-      headTrackingSatisfied = _l[0],
-      setHeadTrackingSatisfied = _l[1];
-    var _m = React.useState(null),
-      lastFace = _m[0],
-      setLastFace = _m[1];
-    var _o = React.useState(0),
-      numFramesWithoutFaces = _o[0],
-      setNumFramesWithoutFaces = _o[1];
-    onPredictionMade(f(function (_a) {
+    var _m = React.useState(true),
+      headTrackingSatisfied = _m[0],
+      setHeadTrackingSatisfied = _m[1];
+    var _o = React.useState(null),
+      lastFace = _o[0],
+      setLastFace = _o[1];
+    var _p = React.useState(0),
+      numFramesWithoutFaces = _p[0],
+      setNumFramesWithoutFaces = _p[1];
+    onPredictionMade(f(React.useCallback(function (_a) {
       var face = _a.face;
       if (!camera) return;
-      var nearBoundary = (face === null || face === void 0 ? void 0 : face.box.xMin) < videoWidth * 0.2 || (face === null || face === void 0 ? void 0 : face.box.xMax) > videoWidth * 0.8 || (face === null || face === void 0 ? void 0 : face.box.yMin) < videoHeight * 0.1 || (face === null || face === void 0 ? void 0 : face.box.yMax) > videoHeight * 0.9;
+      var nearBoundary = (face === null || face === void 0 ? void 0 : face.box.xMin) < videoWidth * headTrackingBoundaryPercentage || (face === null || face === void 0 ? void 0 : face.box.xMax) > videoWidth * (1 - headTrackingBoundaryPercentage) || (face === null || face === void 0 ? void 0 : face.box.yMin) < videoHeight * headTrackingBoundaryPercentage || (face === null || face === void 0 ? void 0 : face.box.yMax) > videoHeight * (1 - headTrackingBoundaryPercentage);
       setLastFace(face);
       setHeadTrackingSatisfied(!!face && !nearBoundary);
       setNumFramesWithoutFaces(face ? 0 : function (n) {
         return n + 1;
       });
-    }, 16));
-    var _p = useResizeObserver(),
-      ref = _p.ref,
-      _q = _p.width,
-      width = _q === void 0 ? 1 : _q,
-      _r = _p.height,
-      height = _r === void 0 ? 1 : _r;
+    }, [camera, headTrackingBoundaryPercentage, videoHeight, videoWidth]), 16));
+    var _q = useResizeObserver(),
+      ref = _q.ref,
+      _r = _q.width,
+      width = _r === void 0 ? 1 : _r,
+      _s = _q.height,
+      height = _s === void 0 ? 1 : _s;
     var debugScalingDetails = useDebugScalingDetails({
       enabled: debugMode,
       pageWidth: width,
@@ -23654,7 +23781,7 @@
     return /*#__PURE__*/React.createElement(Container$2, {
       ref: ref,
       className: classNames.container
-    }, verbiage.guidanceMessageText && ( /*#__PURE__*/React.createElement(GuidanceMessageContainer, {
+    }, !!verbiage.guidanceMessageText && ( /*#__PURE__*/React.createElement(GuidanceMessageContainer, {
       "$top": "10%",
       className: classNames.guidanceMessageContainer
     }, /*#__PURE__*/React.createElement(GuidanceMessage, {
@@ -23664,11 +23791,10 @@
     }, verbiage.guidanceMessageText))), /*#__PURE__*/React.createElement(GuidesComponent, {
       status: "success",
       key: "video-signature-guides-".concat(headTrackingSatisfied ? 'satisfied' : 'unsatisfied'),
-      classNames: classNames.videoSignatureGuidesClassNames,
       minSignaturePadPoints: minSignaturePadPoints,
-      signaturePadEmptyContent: signaturePadEmptyContent,
-      headTrackingUnsatisfiedContent: headTrackingUnsatisfiedContent,
       headTrackingSatisfied: headTrackingSatisfied,
+      classNames: classNames.guides,
+      verbiage: rawVerbiage.guides,
       onClearSignaturePadClicked: restartVideoOnSignaturePadCleared ? function () {
         return setTimeout(clearRecordedData, 100);
       } : undefined
@@ -23756,43 +23882,43 @@
       captureAudio = _d === void 0 ? false : _d,
       _e = _a.minSignaturePadPoints,
       minSignaturePadPoints = _e === void 0 ? DEFAULT_MIN_SIGNATURE_PAD_POINTS : _e,
-      signaturePadEmptyContent = _a.signaturePadEmptyContent,
-      headTrackingUnsatisfiedContent = _a.headTrackingUnsatisfiedContent,
-      _f = _a.allowSignatureAfterLivenessCheckFailure,
-      allowSignatureAfterLivenessCheckFailure = _f === void 0 ? false : _f,
-      _g = _a.restartVideoOnSignaturePadCleared,
-      restartVideoOnSignaturePadCleared = _g === void 0 ? true : _g,
+      _f = _a.headTrackingBoundaryPercentage,
+      headTrackingBoundaryPercentage = _f === void 0 ? DEFAULT_HEAD_TRACKING_BOUNDARY_PERCENTAGE : _f,
+      _g = _a.allowSignatureAfterLivenessCheckFailure,
+      allowSignatureAfterLivenessCheckFailure = _g === void 0 ? false : _g,
+      _h = _a.restartVideoOnSignaturePadCleared,
+      restartVideoOnSignaturePadCleared = _h === void 0 ? true : _h,
       faceLivenessProps = _a.faceLivenessProps,
-      _h = _a.assets,
-      assets = _h === void 0 ? {} : _h,
-      _j = _a.classNames,
-      classNames = _j === void 0 ? {} : _j,
-      _k = _a.colors,
-      colors = _k === void 0 ? {} : _k,
-      _l = _a.verbiage,
-      verbiage = _l === void 0 ? {} : _l,
-      _m = _a.debugMode,
-      debugMode = _m === void 0 ? false : _m;
-    var _o = React.useContext(SubmissionContext),
-      selfieImage = _o.selfieImage,
-      setSelfieImage = _o.setSelfieImage,
-      setSignatureData = _o.setSignatureData,
-      setSignatureVideoUrl = _o.setSignatureVideoUrl,
-      logSelfieCaptureAttempt = _o.logSelfieCaptureAttempt;
+      _j = _a.assets,
+      assets = _j === void 0 ? {} : _j,
+      _k = _a.classNames,
+      classNames = _k === void 0 ? {} : _k,
+      _l = _a.colors,
+      colors = _l === void 0 ? {} : _l,
+      _m = _a.verbiage,
+      verbiage = _m === void 0 ? {} : _m,
+      _o = _a.debugMode,
+      debugMode = _o === void 0 ? false : _o;
+    var _p = React.useContext(SubmissionContext),
+      selfieImage = _p.selfieImage,
+      setSelfieImage = _p.setSelfieImage,
+      setSignatureData = _p.setSignatureData,
+      setSignatureVideoUrl = _p.setSignatureVideoUrl,
+      logSelfieCaptureAttempt = _p.logSelfieCaptureAttempt;
     var cameraAccessDenied = useCameraStore(useShallow(function (state) {
       return {
         cameraAccessDenied: state.cameraAccessDenied
       };
     })).cameraAccessDenied;
-    var _p = React.useState('CHECKING_LIVENESS'),
-      captureState = _p[0],
-      setCaptureState = _p[1];
+    var _q = React.useState('CHECKING_LIVENESS'),
+      captureState = _q[0],
+      setCaptureState = _q[1];
     var operationStartedAt = React.useRef();
     var captureStartedAt = React.useRef();
     var captureEndedAt = React.useRef();
-    var _q = useSelfieGuidanceModelsContext(),
-      start = _q.start,
-      stop = _q.stop;
+    var _r = useSelfieGuidanceModelsContext(),
+      start = _r.start,
+      stop = _r.stop;
     React.useEffect(function () {
       operationStartedAt.current = new Date();
     }, []);
@@ -23828,9 +23954,9 @@
         setSelfieImage(selfieFromRequest);
       }
     }, [logCaptureMetadata, onFaceLivenessSuccessProp, selfieImage, setSelfieImage]);
-    var _r = React.useState(null),
-      signatureImageUrl = _r[0],
-      setSignatureImageUrl = _r[1];
+    var _s = React.useState(null),
+      signatureImageUrl = _s[0],
+      setSignatureImageUrl = _s[1];
     var onSignatureCaptureCompleted = React.useCallback(function (videoData, signatureData, signatureImageData) {
       setSignatureData(signatureData);
       setSignatureVideoUrl(URL.createObjectURL(videoData));
@@ -23838,16 +23964,16 @@
       setCaptureState('SUCCESS');
       onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(videoData, signatureData, signatureImageData);
     }, [onVideoCaptured, setSignatureData, setSignatureVideoUrl]);
-    var _s = React.useState(true),
-      showLoadingOverlay = _s[0],
-      setShowLoadingOverlay = _s[1];
+    var _t = React.useState(true),
+      showLoadingOverlay = _t[0],
+      setShowLoadingOverlay = _t[1];
     var onSignatureCaptureFacesNotDetected = React.useCallback(function () {
       setShowLoadingOverlay(false);
       setCaptureState('CHECKING_LIVENESS');
     }, []);
-    var _t = React.useState(0),
-      attempt = _t[0],
-      setAttempt = _t[1];
+    var _u = React.useState(0),
+      attempt = _u[0],
+      setAttempt = _u[1];
     var onRetry = React.useCallback(function () {
       onRetryClicked === null || onRetryClicked === void 0 ? void 0 : onRetryClicked();
       setAttempt(function (n) {
@@ -23866,11 +23992,11 @@
     }, [cameraAccessDenied]);
     var guidesComponent = React.useCallback(function (props) {
       return /*#__PURE__*/React.createElement(VideoSignatureWizardGuides, _assign({}, props, {
-        classNames: classNames === null || classNames === void 0 ? void 0 : classNames.videoSignatureGuidesClassNames,
-        restartVideoOnSignaturePadCleared: restartVideoOnSignaturePadCleared,
-        signaturePadEmptyContent: signaturePadEmptyContent
+        classNames: classNames === null || classNames === void 0 ? void 0 : classNames.guides,
+        verbiage: verbiage === null || verbiage === void 0 ? void 0 : verbiage.guides,
+        restartVideoOnSignaturePadCleared: restartVideoOnSignaturePadCleared
       }));
-    }, [classNames === null || classNames === void 0 ? void 0 : classNames.videoSignatureGuidesClassNames, restartVideoOnSignaturePadCleared, signaturePadEmptyContent]);
+    }, [classNames === null || classNames === void 0 ? void 0 : classNames.guides, restartVideoOnSignaturePadCleared, verbiage === null || verbiage === void 0 ? void 0 : verbiage.guides]);
     var onExitAfterFailureProp = faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.onExitAfterFailure;
     var onExitAfterFailure = React.useCallback(function (resp, req) {
       onExitAfterFailureProp === null || onExitAfterFailureProp === void 0 ? void 0 : onExitAfterFailureProp(resp, req);
@@ -23915,8 +24041,7 @@
             onFaceNotDetected: onSignatureCaptureFacesNotDetected,
             onExit: onExitCapture,
             minSignaturePadPoints: minSignaturePadPoints,
-            signaturePadEmptyContent: signaturePadEmptyContent,
-            headTrackingUnsatisfiedContent: headTrackingUnsatisfiedContent,
+            headTrackingBoundaryPercentage: headTrackingBoundaryPercentage,
             restartVideoOnSignaturePadCleared: restartVideoOnSignaturePadCleared,
             guidesComponent: guidesComponent,
             classNames: classNames,
@@ -24115,8 +24240,7 @@
   var templateObject_1$8, templateObject_2$8, templateObject_3$7, templateObject_4$2, templateObject_5$2, templateObject_6$1, templateObject_7;
 
   var ReadTextPrompt = function ReadTextPrompt(_a) {
-    var text = _a.text,
-      onComplete = _a.onComplete,
+    var onComplete = _a.onComplete,
       _b = _a.durationMs,
       durationMs = _b === void 0 ? 15000 : _b,
       _c = _a.minReadingMs,
@@ -24125,13 +24249,13 @@
       classNames = _d === void 0 ? {} : _d,
       _e = _a.verbiage,
       rawVerbiage = _e === void 0 ? {} : _e;
-    text = useVerbiage(text, '');
     var countdownTimeoutRef = React.useRef(undefined);
     var _f = React.useState(durationMs / 1000),
       countdownRemaining = _f[0],
       setCountdownRemaining = _f[1];
     var verbiage = useTranslations(rawVerbiage, {
       headingText: 'Please read the following text aloud',
+      promptText: '',
       doneBtnText: 'Done'
     });
     var manualCountdown = React.useCallback(function (remainingTime) {
@@ -24169,7 +24293,7 @@
       className: classNames.heading
     }, verbiage.headingText), /*#__PURE__*/React.createElement(ReadTextPromptText, {
       className: classNames.prompt
-    }, text), /*#__PURE__*/React.createElement(ReadTextPromptButtonsRow, {
+    }, verbiage.promptText), /*#__PURE__*/React.createElement(ReadTextPromptButtonsRow, {
       className: classNames.buttonsRow
     }, /*#__PURE__*/React.createElement(ReadTextPromptTimeRemaining, {
       className: classNames.timeRemaining
@@ -24610,18 +24734,22 @@
     });
     var capturingId = ['SHOW_ID_FRONT', 'SHOW_ID_BACK', 'SHOW_PASSPORT'].includes(requestedAction);
     var guidanceText = !faceCentered ? faceNotCenteredText : undefined;
+    var readTextPromptVerbiage = React.useMemo(function () {
+      return _assign({
+        promptText: readTextPrompt
+      }, rawVerbiage.readTextPrompt);
+    }, [rawVerbiage.readTextPrompt, readTextPrompt]);
     return /*#__PURE__*/React.createElement(Container, {
       ref: ref,
       className: classNames.container
     }, /*#__PURE__*/React.createElement(InvisibleCanvas, {
       ref: photoCanvas
     }), requestedAction === 'READ_TEXT' ? ( /*#__PURE__*/React.createElement(ReadTextPrompt, {
-      text: readTextPrompt,
       startedAt: timeoutStartedAt || undefined,
       durationMs: readTextTimeoutDurationMs,
       minReadingMs: readTextMinReadingMs,
       classNames: classNames.readTextPrompt,
-      verbiage: rawVerbiage.readTextPrompt,
+      verbiage: readTextPromptVerbiage,
       onComplete: stopRecording
     })) : ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IdVideoCaptureGuides, {
       classNames: classNames.guides,
@@ -25615,6 +25743,9 @@
       allowOverrideWrongDocumentTypeAfterMs = _t === void 0 ? 8000 : _t,
       _u = _a.allowUploadingDocumentsFromStorage,
       allowUploadingDocumentsFromStorage = _u === void 0 ? false : _u,
+      onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
       onBeforeSubmit = _a.onBeforeSubmit,
       onBeforeDocumentUpload = _a.onBeforeDocumentUpload,
       onDocumentUploadProgress = _a.onDocumentUploadProgress,
@@ -25656,6 +25787,9 @@
     useDebugLogging(debugMode);
     var idCaptureProps = React.useMemo(function () {
       return {
+        onLoadingStarted: onLoadingStarted,
+        onLoadingProgress: onLoadingProgress,
+        onLoadingCompleted: onLoadingCompleted,
         onExitCapture: onExitCapture,
         onUserCancel: onUserCancel,
         onModelError: onModelError,
@@ -25685,7 +25819,7 @@
         verbiage: verbiage,
         debugMode: debugMode
       };
-    }, [onExitCapture, onUserCancel, onModelError, precapturedDocuments, idCaptureRequirement, allowSinglePageIdCapture, separateIdCardCaptureSequence, idCaptureThresholds, skipSuccessScreen, loadingOverlayMode, customOverlayContent, onLoadingOverlayDismissed, forceFallbackMode, allowIdCardBackToFrontCapture, allowUploadingDocumentsFromStorage, instructions, guideType, guideImages, portraitGuidesOnMobile, rotateLoadingOverlayImageWhenPortrait, modelLoadTimeoutMs, enableOverrideWrongDocumentTypeDialog, allowOverrideWrongDocumentTypeAfterMs, assets, classNames, colors, verbiage, debugMode]);
+    }, [onLoadingStarted, onLoadingProgress, onLoadingCompleted, onExitCapture, onUserCancel, onModelError, precapturedDocuments, idCaptureRequirement, allowSinglePageIdCapture, separateIdCardCaptureSequence, idCaptureThresholds, skipSuccessScreen, loadingOverlayMode, customOverlayContent, onLoadingOverlayDismissed, forceFallbackMode, allowIdCardBackToFrontCapture, allowUploadingDocumentsFromStorage, instructions, guideType, guideImages, portraitGuidesOnMobile, rotateLoadingOverlayImageWhenPortrait, modelLoadTimeoutMs, enableOverrideWrongDocumentTypeDialog, allowOverrideWrongDocumentTypeAfterMs, assets, classNames, colors, verbiage, debugMode]);
     var additionalDocumentCaptureProps = React.useMemo(function () {
       return {
         documents: captureAdditionalDocuments,
@@ -27639,24 +27773,24 @@
       idCardForFaceMatch = _a.idCardForFaceMatch,
       _f = _a.minSignaturePadPoints,
       minSignaturePadPoints = _f === void 0 ? DEFAULT_MIN_SIGNATURE_PAD_POINTS : _f,
-      signaturePadEmptyContent = _a.signaturePadEmptyContent,
-      headTrackingUnsatisfiedContent = _a.headTrackingUnsatisfiedContent,
-      _g = _a.modelLoadTimeoutMs,
-      modelLoadTimeoutMs = _g === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _g,
-      _h = _a.allowSignatureAfterLivenessCheckFailure,
-      allowSignatureAfterLivenessCheckFailure = _h === void 0 ? false : _h,
-      _j = _a.restartVideoOnSignaturePadCleared,
-      restartVideoOnSignaturePadCleared = _j === void 0 ? true : _j,
+      _g = _a.headTrackingBoundaryPercentage,
+      headTrackingBoundaryPercentage = _g === void 0 ? DEFAULT_HEAD_TRACKING_BOUNDARY_PERCENTAGE : _g,
+      _h = _a.modelLoadTimeoutMs,
+      modelLoadTimeoutMs = _h === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _h,
+      _j = _a.allowSignatureAfterLivenessCheckFailure,
+      allowSignatureAfterLivenessCheckFailure = _j === void 0 ? false : _j,
+      _k = _a.restartVideoOnSignaturePadCleared,
+      restartVideoOnSignaturePadCleared = _k === void 0 ? true : _k,
       faceLivenessProps = _a.faceLivenessProps,
-      _k = _a.theme,
-      theme = _k === void 0 ? 'default' : _k,
+      _l = _a.theme,
+      theme = _l === void 0 ? 'default' : _l,
       classNames = _a.classNames,
       colors = _a.colors,
       verbiage = _a.verbiage,
       geolocationEnabled = _a.geolocationEnabled,
       geolocationRequired = _a.geolocationRequired,
-      _l = _a.debugMode,
-      debugMode = _l === void 0 ? false : _l;
+      _m = _a.debugMode,
+      debugMode = _m === void 0 ? false : _m;
     useLanguage(lang);
     useDebugLogging(debugMode);
     return /*#__PURE__*/React.createElement(AuthProvider, {
@@ -27701,8 +27835,7 @@
           skipSuccessScreen: skipSuccessScreen,
           captureAudio: captureAudio,
           minSignaturePadPoints: minSignaturePadPoints,
-          signaturePadEmptyContent: signaturePadEmptyContent,
-          headTrackingUnsatisfiedContent: headTrackingUnsatisfiedContent,
+          headTrackingBoundaryPercentage: headTrackingBoundaryPercentage,
           modelLoadTimeoutMs: modelLoadTimeoutMs,
           faceLivenessProps: faceLivenessProps,
           allowSignatureAfterLivenessCheckFailure: allowSignatureAfterLivenessCheckFailure,
@@ -27714,7 +27847,7 @@
           onModelError: onModelError,
           onUserCancel: onUserCancel
         };
-      }, [customOverlayContent, onLoadingOverlayDismissed, loadingOverlayMode, skipSuccessScreen, captureAudio, minSignaturePadPoints, signaturePadEmptyContent, headTrackingUnsatisfiedContent, modelLoadTimeoutMs, faceLivenessProps, allowSignatureAfterLivenessCheckFailure, restartVideoOnSignaturePadCleared, classNames, colors, debugMode, verbiage, onModelError, onUserCancel])
+      }, [customOverlayContent, onLoadingOverlayDismissed, loadingOverlayMode, skipSuccessScreen, captureAudio, minSignaturePadPoints, headTrackingBoundaryPercentage, modelLoadTimeoutMs, faceLivenessProps, allowSignatureAfterLivenessCheckFailure, restartVideoOnSignaturePadCleared, classNames, colors, debugMode, verbiage, onModelError, onUserCancel])
     })))));
   };