idmission-web-sdk 2.3.5 → 2.3.7

package/dist/sdk2.cjs.development.js

@@ -235,7 +235,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   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
@@ -518,7 +518,7 @@ var WideBorderButton = styled__default.default(WideButton)(templateObject_8$4 ||
   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__default.default(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__default.default(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__default.default.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';
@@ -527,17 +527,23 @@ var LoadingOverlayHeader = styled__default.default.div(templateObject_10$2 || (t
 });
 var LoadingOverlayGuidanceMessage = styled__default.default(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__default.default(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__default.default.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__default.default.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__default.default.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__default.default.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__default.default.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__default.default.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__default.default(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__default.default.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__default.default.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__default.default.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__default.default.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;
 
 var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
   var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -2503,19 +2509,23 @@ function useLoadFocusModel(_a) {
     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));
     }
@@ -2532,6 +2542,8 @@ function useLoadFocusModel(_a) {
             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() {
@@ -2544,7 +2556,7 @@ function useLoadFocusModel(_a) {
               setTimeout(function () {
                 if (cancelled) return;
                 loadedModel.classifyForVideo(videoRef.current, performance.now());
-                setReady(true);
+                setModelLoadState('ready');
               }, 500);
               return [2 /*return*/];
           }
@@ -2552,6 +2564,7 @@ function useLoadFocusModel(_a) {
       });
     })["catch"](function (e) {
       setModelError(e);
+      setModelLoadState('error');
     })["finally"](function () {
       clearTimeout(modelLoadTimeout);
     });
@@ -2566,11 +2579,15 @@ function useLoadFocusModel(_a) {
   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;
@@ -2662,18 +2679,22 @@ function useLoadFaceDetector(_a) {
     _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);
@@ -2690,6 +2711,8 @@ function useLoadFaceDetector(_a) {
             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() {
@@ -2701,13 +2724,14 @@ function useLoadFaceDetector(_a) {
               _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);
     });
@@ -2722,11 +2746,15 @@ function useLoadFaceDetector(_a) {
   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;
@@ -3168,19 +3196,23 @@ function useLoadDocumentDetector(_a) {
     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));
     }
@@ -3196,6 +3228,8 @@ function useLoadDocumentDetector(_a) {
           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;
@@ -3209,7 +3243,7 @@ function useLoadDocumentDetector(_a) {
               setTimeout(function () {
                 if (cancelled) return;
                 model.detectForVideo(videoRef.current, performance.now());
-                setReady(true);
+                setModelLoadState('ready');
               }, 500);
               return [2 /*return*/];
           }
@@ -3217,6 +3251,7 @@ function useLoadDocumentDetector(_a) {
       });
     })["catch"](function (e) {
       setModelError(e);
+      setModelLoadState('error');
     })["finally"](function () {
       clearTimeout(modelLoadTimeout);
     });
@@ -3231,12 +3266,16 @@ function useLoadDocumentDetector(_a) {
   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 () {
@@ -4643,6 +4682,12 @@ var zh = {
   "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__namespace.default.createElement(React__namespace.default.Fragment, null, verbiage);
+  var Verbiage = verbiage;
+  return /*#__PURE__*/React__namespace.default.createElement(Verbiage, null);
+}
+
 var resources = {
   en: {
     translation: en
@@ -4697,11 +4742,12 @@ var useLanguage = function useLanguage(lang) {
 };
 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);
 }
@@ -5193,8 +5239,9 @@ var DocumentDetectionModelContext = /*#__PURE__*/React.createContext({
   loadDocumentDetectionModel: function loadDocumentDetectionModel() {
     return null;
   },
-  documentDetectionModelReady: false,
+  documentDetectionModelState: 'not-started',
   documentDetectionModelDownloadProgress: 0,
+  documentDetectionModelWarmingStartedAt: null,
   documentDetectionModelError: null,
   onDocumentDetected: function onDocumentDetected() {
     return null;
@@ -5267,7 +5314,9 @@ function DocumentDetectionModelProvider(_a) {
       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) {
@@ -5334,7 +5383,8 @@ function DocumentDetectionModelProvider(_a) {
       startDocumentDetection: start,
       stopDocumentDetection: stop,
       loadDocumentDetectionModel: load,
-      documentDetectionModelReady: ready,
+      documentDetectionModelState: modelLoadState,
+      documentDetectionModelWarmingStartedAt: modelWarmingStartedAt,
       documentDetectionModelError: modelError,
       documentDetectionModelDownloadProgress: modelDownloadProgress,
       onDocumentDetected: onDocumentDetected,
@@ -5346,7 +5396,7 @@ function DocumentDetectionModelProvider(_a) {
       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, {
@@ -5359,8 +5409,9 @@ var FocusModelContext = /*#__PURE__*/React.createContext({
   loadFocusModel: function loadFocusModel() {
     return null;
   },
-  focusModelReady: false,
+  focusModelState: 'not-started',
   focusModelDownloadProgress: 0,
+  focusModelWarmingStartedAt: null,
   focusModelError: null,
   focusThresholds: {},
   setFocusThresholds: function setFocusThresholds() {
@@ -5402,7 +5453,9 @@ function FocusModelProvider(_a) {
       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;
@@ -5414,15 +5467,16 @@ function FocusModelProvider(_a) {
   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__namespace.default.createElement(FocusModelContext.Provider, {
     value: value
   }, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
@@ -5487,6 +5541,8 @@ var IdCaptureModelsContext = /*#__PURE__*/React.createContext({
     return null;
   },
   modelDownloadProgress: 0,
+  modelLoadState: 'not-started',
+  modelWarmingStartedAt: null,
   modelError: null,
   thresholds: defaultIdCaptureThresholds,
   setThresholds: function setThresholds() {
@@ -5521,8 +5577,9 @@ function IdCaptureModelsProviderInner(_a) {
     _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,
@@ -5537,8 +5594,9 @@ function IdCaptureModelsProviderInner(_a) {
     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,
@@ -5646,10 +5704,17 @@ function IdCaptureModelsProviderInner(_a) {
     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,
@@ -5667,7 +5732,7 @@ function IdCaptureModelsProviderInner(_a) {
       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__namespace.default.createElement(IdCaptureModelsContext.Provider, {
     value: value
   }, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
@@ -7310,7 +7375,10 @@ function LoadingListItemIndicator(_a) {
 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,
@@ -7328,7 +7396,9 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
   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,
@@ -7351,11 +7421,27 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
     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);
@@ -7364,6 +7450,19 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
     };
   }, [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__namespace.default.createElement(React__namespace.default.Fragment, null);
   if (cameraAccessDenied) {
     return /*#__PURE__*/React__namespace.default.createElement(CameraAccessDeniedOverlay, {
@@ -7423,7 +7522,7 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
   }, /*#__PURE__*/React__namespace.default.createElement(ProgressBarBackground$1, {
     className: classNames.progressBackground
   }), /*#__PURE__*/React__namespace.default.createElement(LoadingOverlayProgressBar, {
-    "$progress": modelDownloadProgress,
+    "$progress": modelLoadProgress,
     className: classNames.progressBar
   }, /*#__PURE__*/React__namespace.default.createElement(ProgressIndicator$1, {
     className: classNames.progressIndicator
@@ -7441,7 +7540,7 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
   }, /*#__PURE__*/React__namespace.default.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__namespace.default.createElement(ContinueButtonContainer$1, {
+  }), !sessionReady ? verbiage.sessionCheckingText : modelsReady ? verbiage.modelsReadyText : modelLoadState === 'downloading' ? "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)") : modelLoadState === 'warming' ? verbiage.modelsWarmingUpText : verbiage.modelsReadyText))), /*#__PURE__*/React__namespace.default.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__namespace.default.createElement(ContinueButton$1, {
     autoFocus: true,
@@ -7480,9 +7579,12 @@ var ProgressBarBackground$1 = styled__default.default(LoadingOverlayProgressBarB
   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__default.default(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__default.default(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__default.default.img(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n"], ["\n  transform-style: preserve-3d;\n"])));
-var ContinueButtonContainer$1 = styled__default.default.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var ContinueButtonContainer$1 = styled__default.default.div(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var ContinueButton$1 = styled__default.default(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, ";") : '';
@@ -7502,7 +7604,7 @@ var ContinueButton$1 = styled__default.default(LoaderButton)(templateObject_10$1
   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__default.default.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__default.default.input(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
@@ -8368,7 +8470,7 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
     "$maskColor": maskColor,
     "$minHeight": padding,
     className: regionClsx(classNames, 'Top')
-  }, instruction !== '' && ( /*#__PURE__*/React__namespace.default.createElement(GuideText, {
+  }, !!instruction && ( /*#__PURE__*/React__namespace.default.createElement(GuideText, {
     className: classNames.guideText
   }, instruction))), /*#__PURE__*/React__namespace.default.createElement(GuideCenterRow, {
     className: classNames.centerRow
@@ -8419,7 +8521,7 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
     "$maskColor": maskColor,
     "$minHeight": padding,
     className: regionClsx(classNames, 'Bottom')
-  }, instruction !== '' && ( /*#__PURE__*/React__namespace.default.createElement(GuideText, {
+  }, !!instruction && ( /*#__PURE__*/React__namespace.default.createElement(GuideText, {
     style: {
       opacity: 0
     }
@@ -8457,8 +8559,8 @@ var GuideCenterBorder = styled__default.default.div(templateObject_7$5 || (templ
   return props.$padding ? "padding: ".concat(props.$padding, "px;") : '';
 });
 var GuideText = styled__default.default.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__default.default.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__default.default.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;
@@ -9972,7 +10074,7 @@ var ScreenActionsBar = styled__default.default.div(templateObject_5$6 || (templa
 var DashedSeparator = styled__default.default.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__default.default.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__default.default.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__default.default(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__default.default(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__default.default.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__default.default.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;
@@ -10250,17 +10352,20 @@ function humanFileSize(bytes, si, dp) {
   } 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,
@@ -10606,6 +10711,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     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();
@@ -11263,6 +11371,8 @@ var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
   },
   ready: false,
   error: null,
+  modelLoadState: 'not-started',
+  modelWarmingStartedAt: null,
   modelDownloadProgress: 0
 });
 function SelfieGuidanceModelsProvider(_a) {
@@ -11294,7 +11404,9 @@ function SelfieGuidanceModelsProvider(_a) {
       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 () {
@@ -11356,9 +11468,11 @@ function SelfieGuidanceModelsProvider(_a) {
       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, {
@@ -11723,7 +11837,7 @@ var SelfieCapture = function SelfieCapture(_a) {
   }), /*#__PURE__*/React__namespace.default.createElement(GuidesComponent, {
     classNames: classNames.guides,
     status: satisfied ? 'processing' : 'ready'
-  }), guidanceMessage !== '' && ( /*#__PURE__*/React__namespace.default.createElement(GuidanceMessageContainer, {
+  }), !!guidanceMessage && ( /*#__PURE__*/React__namespace.default.createElement(GuidanceMessageContainer, {
     className: classNames.guidanceMessageContainer
   }, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
     "$variant": satisfied ? 'positive' : 'negative',
@@ -12064,7 +12178,7 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     guidesComponent: guidesByRequestState,
     classNames: classNames,
     colors: colors,
-    verbiage: verbiage,
+    verbiage: rawVerbiage,
     debugMode: debugMode
   }), debugMode && !disableCapturePreview && imageUrl && ( /*#__PURE__*/React__namespace.default.createElement(SelfieProgressPreview, {
     classNames: classNames.imagePreview,
@@ -13561,8 +13675,6 @@ function VideoSignatureGuides(_a) {
     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,
@@ -13583,6 +13695,8 @@ function VideoSignatureGuides(_a) {
     signatureValid = _l[0],
     setSignatureValid = _l[1];
   var verbiage = useTranslations(rawVerbiage, {
+    signaturePadEmptyText: '',
+    headTrackingUnsatisfiedText: '',
     clearSignatureBtnText: 'Clear',
     acceptSignatureBtnText: 'Accept'
   });
@@ -13596,9 +13710,13 @@ function VideoSignatureGuides(_a) {
   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__namespace.default.createElement(Container$3, {
     className: classNames.container
   }, /*#__PURE__*/React__namespace.default.createElement(Inner$1, {
@@ -13634,11 +13752,18 @@ function VideoSignatureGuides(_a) {
       });
       setSignatureValid(points.length >= minSignaturePadPoints);
     }
-  }), !headTrackingSatisfied && HeadTrackingUnsatisfiedContent ? ( /*#__PURE__*/React__namespace.default.createElement(SignaturePadContentContainer, {
-    className: classNames.headTrackingUnsatisfiedContent
-  }, typeof HeadTrackingUnsatisfiedContent === 'string' ? HeadTrackingUnsatisfiedContent : ( /*#__PURE__*/React__namespace.default.createElement(HeadTrackingUnsatisfiedContent, null)))) : displayEmptyState && EmptyContent && ( /*#__PURE__*/React__namespace.default.createElement(SignaturePadContentContainer, {
-    className: classNames.emptyContentContainer
-  }, typeof EmptyContent === 'string' ? EmptyContent : ( /*#__PURE__*/React__namespace.default.createElement(EmptyContent, null))))), /*#__PURE__*/React__namespace.default.createElement(SignatureButtonsContainer, {
+  }), !headTrackingSatisfied && !!verbiage.headTrackingUnsatisfiedText ? ( /*#__PURE__*/React__namespace.default.createElement(SignaturePadContentContainer, {
+    className: classNames.headTrackingUnsatisfiedContentContainer
+  }, /*#__PURE__*/React__namespace.default.createElement(SignaturePadContentInner, {
+    className: classNames.headTrackingUnsatisfiedContentInner
+  }, verbiage.headTrackingUnsatisfiedText))) : displayEmptyState && !!verbiage.signaturePadEmptyText && ( /*#__PURE__*/React__namespace.default.createElement(SignaturePadContentContainer, {
+    className: classNames.emptyContentContainer,
+    onClick: function onClick() {
+      return setEmptyContentDismissed(true);
+    }
+  }, /*#__PURE__*/React__namespace.default.createElement(SignaturePadContentInner, {
+    className: classNames.emptyContentInner
+  }, verbiage.signaturePadEmptyText)))), /*#__PURE__*/React__namespace.default.createElement(SignatureButtonsContainer, {
     className: classNames.signatureButtonsRow
   }, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
     variant: "secondary",
@@ -13674,13 +13799,15 @@ var SignatureCanvasContainer = styled__default.default.div(templateObject_6$2 ||
   return props.$headTrackingUnsatisfied ? 'pointer-events: none;' : '';
 });
 var AcceptBtn = styled__default.default(LoaderButton)(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
-var SignaturePadContentContainer = styled__default.default.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__default.default.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__default.default.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,
@@ -13690,38 +13817,38 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     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(shallow.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(shallow.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;
@@ -13740,31 +13867,31 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
       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(useDebounce.useThrottledCallback(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(useDebounce.useThrottledCallback(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,
@@ -13779,7 +13906,7 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   return /*#__PURE__*/React__namespace.default.createElement(Container$2, {
     ref: ref,
     className: classNames.container
-  }, verbiage.guidanceMessageText && ( /*#__PURE__*/React__namespace.default.createElement(GuidanceMessageContainer, {
+  }, !!verbiage.guidanceMessageText && ( /*#__PURE__*/React__namespace.default.createElement(GuidanceMessageContainer, {
     "$top": "10%",
     className: classNames.guidanceMessageContainer
   }, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
@@ -13789,11 +13916,10 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   }, verbiage.guidanceMessageText))), /*#__PURE__*/React__namespace.default.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
@@ -13881,43 +14007,43 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
     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(shallow.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();
   }, []);
@@ -13953,9 +14079,9 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
       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));
@@ -13963,16 +14089,16 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
     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) {
@@ -13991,11 +14117,11 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
   }, [cameraAccessDenied]);
   var guidesComponent = React.useCallback(function (props) {
     return /*#__PURE__*/React__namespace.default.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);
@@ -14040,8 +14166,7 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
           onFaceNotDetected: onSignatureCaptureFacesNotDetected,
           onExit: onExitCapture,
           minSignaturePadPoints: minSignaturePadPoints,
-          signaturePadEmptyContent: signaturePadEmptyContent,
-          headTrackingUnsatisfiedContent: headTrackingUnsatisfiedContent,
+          headTrackingBoundaryPercentage: headTrackingBoundaryPercentage,
           restartVideoOnSignaturePadCleared: restartVideoOnSignaturePadCleared,
           guidesComponent: guidesComponent,
           classNames: classNames,
@@ -14240,8 +14365,7 @@ var IdCardGuideInstructions = styled__default.default(GuidanceMessage)(templateO
 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,
@@ -14250,13 +14374,13 @@ var ReadTextPrompt = function ReadTextPrompt(_a) {
     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) {
@@ -14294,7 +14418,7 @@ var ReadTextPrompt = function ReadTextPrompt(_a) {
     className: classNames.heading
   }, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ReadTextPromptText, {
     className: classNames.prompt
-  }, text), /*#__PURE__*/React__namespace.default.createElement(ReadTextPromptButtonsRow, {
+  }, verbiage.promptText), /*#__PURE__*/React__namespace.default.createElement(ReadTextPromptButtonsRow, {
     className: classNames.buttonsRow
   }, /*#__PURE__*/React__namespace.default.createElement(ReadTextPromptTimeRemaining, {
     className: classNames.timeRemaining
@@ -14735,18 +14859,22 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   });
   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__namespace.default.createElement(Container, {
     ref: ref,
     className: classNames.container
   }, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
     ref: photoCanvas
   }), requestedAction === 'READ_TEXT' ? ( /*#__PURE__*/React__namespace.default.createElement(ReadTextPrompt, {
-    text: readTextPrompt,
     startedAt: timeoutStartedAt || undefined,
     durationMs: readTextTimeoutDurationMs,
     minReadingMs: readTextMinReadingMs,
     classNames: classNames.readTextPrompt,
-    verbiage: rawVerbiage.readTextPrompt,
+    verbiage: readTextPromptVerbiage,
     onComplete: stopRecording
   })) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureGuides, {
     classNames: classNames.guides,
@@ -15740,6 +15868,9 @@ var IdValidation = function IdValidation(_a) {
     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,
@@ -15781,6 +15912,9 @@ var IdValidation = function IdValidation(_a) {
   useDebugLogging(debugMode);
   var idCaptureProps = React.useMemo(function () {
     return {
+      onLoadingStarted: onLoadingStarted,
+      onLoadingProgress: onLoadingProgress,
+      onLoadingCompleted: onLoadingCompleted,
       onExitCapture: onExitCapture,
       onUserCancel: onUserCancel,
       onModelError: onModelError,
@@ -15810,7 +15944,7 @@ var IdValidation = function IdValidation(_a) {
       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,
@@ -17764,24 +17898,24 @@ var SignatureKYC = function SignatureKYC(_a) {
     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__namespace.default.createElement(AuthProvider, {
@@ -17826,8 +17960,7 @@ var SignatureKYC = function SignatureKYC(_a) {
         skipSuccessScreen: skipSuccessScreen,
         captureAudio: captureAudio,
         minSignaturePadPoints: minSignaturePadPoints,
-        signaturePadEmptyContent: signaturePadEmptyContent,
-        headTrackingUnsatisfiedContent: headTrackingUnsatisfiedContent,
+        headTrackingBoundaryPercentage: headTrackingBoundaryPercentage,
         modelLoadTimeoutMs: modelLoadTimeoutMs,
         faceLivenessProps: faceLivenessProps,
         allowSignatureAfterLivenessCheckFailure: allowSignatureAfterLivenessCheckFailure,
@@ -17839,7 +17972,7 @@ var SignatureKYC = function SignatureKYC(_a) {
         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])
   })))));
 };