idmission-web-sdk 2.3.6 → 2.3.8

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.6';
+  var webSdkVersion = '2.3.8';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -482,8 +482,8 @@
   var OverlayImageContainer = styled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  overflow: hidden;\n\n  & > img,\n  & > svg {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  overflow: hidden;\n\n  & > img,\n  & > svg {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"])));
   var OverlayImageRow = styled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100% - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"], ["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100% - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"])));
   var GrayOverlayContainer = styled(OverlayContainer)(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  background: #f7f6fb;\n"], ["\n  background: #f7f6fb;\n"])));
-  var ButtonsColumn = styled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 15px 0;\n  justify-content: center;\n  margin-top: 24px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 15px 0;\n  justify-content: center;\n  margin-top: 24px;\n"])));
-  var WideButton = styled(LoaderButton)(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 30px;\n"], ["\n  width: 100%;\n  border-radius: 30px;\n"])));
+  var ButtonsColumn = styled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 15px 0;\n  justify-content: center;\n  margin-top: 24px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 15px 0;\n  justify-content: center;\n  margin-top: 24px;\n"])));
+  var WideButton = styled(LoaderButton)(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 30px;\n"], ["\n  width: 100%;\n  border-radius: 30px;\n"])));
   var WideBorderButton = styled(WideButton)(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  color: ", ";\n  background: ", ";\n  border: 1px solid\n    ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  background: ", ";\n  border: 1px solid\n    ", ";\n  box-sizing: border-box;\n"])), function (props) {
     var _a, _b;
     return (_b = (_a = props.colors) === null || _a === void 0 ? void 0 : _a.textColor) !== null && _b !== void 0 ? _b : 'black';
@@ -494,8 +494,8 @@
     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$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 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 LoadingOverlayHeader = styled.div(templateObject_10$1 || (templateObject_10$1 = __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';
   }, function (props) {
@@ -503,17 +503,25 @@
   });
   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$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 LoadingOverlayCustomLoadingGraphic = styled.img(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n"], ["\n  transform-style: preserve-3d;\n"])));
+  var LoadingOverlayContinueButtonContainer = styled.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+  var templateObject_1$M, templateObject_2$D, templateObject_3$r, templateObject_4$l, templateObject_5$e, templateObject_6$9, templateObject_7$6, templateObject_8$4, templateObject_9$3, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
 
   function _extends() {
     return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -8377,19 +8385,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 +8418,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 +8432,7 @@
                 setTimeout(function () {
                   if (cancelled) return;
                   loadedModel.classifyForVideo(videoRef.current, performance.now());
-                  setReady(true);
+                  setModelLoadState('ready');
                 }, 500);
                 return [2 /*return*/];
             }
@@ -8426,6 +8440,7 @@
         });
       })["catch"](function (e) {
         setModelError(e);
+        setModelLoadState('error');
       })["finally"](function () {
         clearTimeout(modelLoadTimeout);
       });
@@ -8440,11 +8455,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 +8555,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 +8587,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 +8600,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 +8622,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 +9072,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 +9104,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 +9119,7 @@
                 setTimeout(function () {
                   if (cancelled) return;
                   model.detectForVideo(videoRef.current, performance.now());
-                  setReady(true);
+                  setModelLoadState('ready');
                 }, 500);
                 return [2 /*return*/];
             }
@@ -9091,6 +9127,7 @@
         });
       })["catch"](function (e) {
         setModelError(e);
+        setModelLoadState('error');
       })["finally"](function () {
         clearTimeout(modelLoadTimeout);
       });
@@ -9105,12 +9142,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 () {
@@ -13929,8 +13970,9 @@
     loadDocumentDetectionModel: function loadDocumentDetectionModel() {
       return null;
     },
-    documentDetectionModelReady: false,
+    documentDetectionModelState: 'not-started',
     documentDetectionModelDownloadProgress: 0,
+    documentDetectionModelWarmingStartedAt: null,
     documentDetectionModelError: null,
     onDocumentDetected: function onDocumentDetected() {
       return null;
@@ -14003,7 +14045,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) {
@@ -14070,7 +14114,8 @@
         startDocumentDetection: start,
         stopDocumentDetection: stop,
         loadDocumentDetectionModel: load,
-        documentDetectionModelReady: ready,
+        documentDetectionModelState: modelLoadState,
+        documentDetectionModelWarmingStartedAt: modelWarmingStartedAt,
         documentDetectionModelError: modelError,
         documentDetectionModelDownloadProgress: modelDownloadProgress,
         onDocumentDetected: onDocumentDetected,
@@ -14082,7 +14127,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, {
@@ -14095,8 +14140,9 @@
     loadFocusModel: function loadFocusModel() {
       return null;
     },
-    focusModelReady: false,
+    focusModelState: 'not-started',
     focusModelDownloadProgress: 0,
+    focusModelWarmingStartedAt: null,
     focusModelError: null,
     focusThresholds: {},
     setFocusThresholds: function setFocusThresholds() {
@@ -14138,7 +14184,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;
@@ -14150,15 +14198,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, {
@@ -14223,6 +14272,8 @@
       return null;
     },
     modelDownloadProgress: 0,
+    modelLoadState: 'not-started',
+    modelWarmingStartedAt: null,
     modelError: null,
     thresholds: defaultIdCaptureThresholds,
     setThresholds: function setThresholds() {
@@ -14257,8 +14308,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,
@@ -14273,8 +14325,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,
@@ -14382,10 +14435,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,
@@ -14403,7 +14463,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, {
@@ -16421,10 +16481,49 @@
     }))))));
   }
 
+  function useLoadProgressHooks(_a) {
+    var ready = _a.ready,
+      modelLoadState = _a.modelLoadState,
+      modelLoadProgress = _a.modelLoadProgress,
+      onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted;
+    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 loadingStarted = modelLoadState !== 'not-started';
+    React.useEffect(function () {
+      var _a;
+      if (loadingStarted) (_a = onLoadingStartedRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadingStartedRef);
+    }, [loadingStarted]);
+    React.useEffect(function () {
+      var _a;
+      if (modelLoadProgress > 0) {
+        (_a = onLoadingProgressRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadingProgressRef, modelLoadProgress);
+      }
+    }, [modelLoadProgress]);
+    React.useEffect(function () {
+      var _a;
+      if (ready) (_a = onLoadingCompletedRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadingCompletedRef);
+    }, [ready]);
+  }
+
   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,
@@ -16442,7 +16541,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,
@@ -16453,6 +16554,7 @@
       setDismissed = _q[1];
     var theme = styled.useTheme();
     assets.instructionImageUrl || (assets.instructionImageUrl = legacyInstructionImageUrl$1);
+    var hasCustomInstructionGraphic = assets.instructionImageUrl !== legacyInstructionImageUrl$1;
     var verbiage = useTranslations(rawVerbiage, {
       headingText: 'Use your device camera to capture your ID',
       useContinuityCameraText: 'Use your iPhone as a webcam',
@@ -16478,6 +16580,17 @@
       };
     }, [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;
+    useLoadProgressHooks({
+      ready: ready,
+      modelLoadState: modelLoadState,
+      modelLoadProgress: modelLoadProgress,
+      onLoadingStarted: onLoadingStarted,
+      onLoadingProgress: onLoadingProgress,
+      onLoadingCompleted: onLoadingCompleted
+    });
     if (dismissed) return /*#__PURE__*/React.createElement(React.Fragment, null);
     if (cameraAccessDenied) {
       return /*#__PURE__*/React.createElement(CameraAccessDeniedOverlay, {
@@ -16507,7 +16620,7 @@
       className: classNames.heading
     }, verbiage.headingText)), /*#__PURE__*/React.createElement(LoadingOverlayImageContainer, {
       className: classNames.imageContainer
-    }, (assets === null || assets === void 0 ? void 0 : assets.instructionImageUrl) && assets.instructionImageUrl !== legacyInstructionImageUrl$1 ? ( /*#__PURE__*/React.createElement(CustomLoadingGraphic$1, {
+    }, hasCustomInstructionGraphic ? ( /*#__PURE__*/React.createElement(LoadingOverlayCustomLoadingGraphic, {
       ref: imageRef,
       alt: verbiage.headingText,
       src: assets.instructionImageUrl,
@@ -16537,7 +16650,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
@@ -16555,7 +16668,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(LoadingOverlayContinueButtonContainer, {
       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,
@@ -16578,8 +16691,8 @@
     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.textColor) !== null && _d !== void 0 ? _d : 'black';
   });
   var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  position: absolute;\n  bottom: 120px;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  bottom: 120px;\n  width: 100%;\n  display: flex;\n"])));
-  var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  padding: 12px 18px;\n  margin: 0 auto;\n  font-size: 14px;\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: 12px 18px;\n  margin: 0 auto;\n  font-size: 14px;\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 ContinuityCameraCheckbox$1 = styled.input(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
+  var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding: 12px 18px;\n  margin: 0 auto;\n  font-size: 14px;\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  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding: 12px 18px;\n  margin: 0 auto;\n  font-size: 14px;\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 ContinuityCameraCheckbox$1 = styled.input(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
   var ButtonsRow$1 = styled(LoadingOverlayButtonsRow)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  color: ", ";\n  ", "\n"], ["\n  color: ", ";\n  ", "\n"])), 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.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
@@ -16587,17 +16700,18 @@
     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, ";") : '';
   });
-  var ProgressBarBackground$1 = styled(LoadingOverlayProgressBarBackground)(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  background: ", ";\n  opacity: ", ";\n"], ["\n  background: ", ";\n  opacity: ", ";\n"])), function (props) {
+  var ProgressBarBackground$1 = styled(LoadingOverlayProgressBarBackground)(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  background: ", ";\n  opacity: ", ";\n"], ["\n  background: ", ";\n  opacity: ", ";\n"])), 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.progressBarBackgroundColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
   }, 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.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 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$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 ProgressIndicator$1 = styled(LoadingOverlayProgressIndicator)(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), 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 ContinueButton$1 = styled(LoaderButton)(templateObject_8$3 || (templateObject_8$3 = __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, ";") : '';
   }, function (props) {
@@ -16616,7 +16730,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$3, templateObject_10$1;
+  var templateObject_1$E, templateObject_2$x, templateObject_3$m, templateObject_4$g, templateObject_5$c, templateObject_6$8, templateObject_7$5, templateObject_8$3;
 
   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"])));
@@ -16867,8 +16981,8 @@
   var ImageRow = styled(OverlayImageRow)(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  max-width: 100%;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n"], ["\n  max-width: 100%;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n"])));
   var ImageCol$1 = styled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  width: 450px;\n  max-width: 100%;\n  max-height: none !important;\n"], ["\n  width: 450px;\n  max-width: 100%;\n  max-height: none !important;\n"])));
   var StyledImage = styled(CapturedDocumentImg)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 12px;\n"], ["\n  width: 100%;\n  border-radius: 12px;\n"])));
-  var DebugPre = styled.pre(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  display: block;\n  text-align: left;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: auto;\n"], ["\n  display: block;\n  text-align: left;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: auto;\n"])));
-  var templateObject_1$B, templateObject_2$u, templateObject_3$l, templateObject_4$f, templateObject_5$b, templateObject_6$8;
+  var DebugPre = styled.pre(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  display: block;\n  text-align: left;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: auto;\n"], ["\n  display: block;\n  text-align: left;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: auto;\n"])));
+  var templateObject_1$B, templateObject_2$u, templateObject_3$l, templateObject_4$f, templateObject_5$b, templateObject_6$7;
 
   function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
     var _this = this;
@@ -17559,12 +17673,12 @@
     return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
   });
   var Spacer = styled(GuideRegion)(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  display: block;\n  width: auto;\n"], ["\n  display: block;\n  width: auto;\n"])));
-  var GuideCenterRegion = styled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  ", "\n  ", "\n  transform-style: preserve-3d;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  max-height: 100%;\n  height: 100%;\n"], ["\n  ", "\n  ", "\n  transform-style: preserve-3d;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  max-height: 100%;\n  height: 100%;\n"])), function (props) {
+  var GuideCenterRegion = styled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  ", "\n  ", "\n  transform-style: preserve-3d;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  max-height: 100%;\n  height: 100%;\n"], ["\n  ", "\n  ", "\n  transform-style: preserve-3d;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  max-height: 100%;\n  height: 100%;\n"])), function (props) {
     return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
   }, function (props) {
     return props.$isMirrored ? 'transform: scaleX(-1);' : '';
   });
-  var GuideCenterBorder = styled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  max-height: 100%;\n  min-height: 0;\n  position: relative;\n  ", "\n"], ["\n  box-sizing: border-box;\n  border: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  max-height: 100%;\n  min-height: 0;\n  position: relative;\n  ", "\n"])), function (props) {
+  var GuideCenterBorder = styled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  max-height: 100%;\n  min-height: 0;\n  position: relative;\n  ", "\n"], ["\n  box-sizing: border-box;\n  border: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  max-height: 100%;\n  min-height: 0;\n  position: relative;\n  ", "\n"])), function (props) {
     var _a, _b;
     return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
   }, function (props) {
@@ -17572,7 +17686,7 @@
   });
   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$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 templateObject_1$y, templateObject_2$s, templateObject_3$j, templateObject_4$d, templateObject_5$9, templateObject_6$6, templateObject_7$4, templateObject_8$2, templateObject_9$2;
 
   var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
@@ -18444,9 +18558,9 @@
     var _a, _b, _c;
     return (_c = (_b = (_a = props.theme.documentCapture) === null || _a === void 0 ? void 0 : _a.instructions) === null || _b === void 0 ? void 0 : _b.maxHeight) !== null && _c !== void 0 ? _c : '8rem';
   });
-  var StyledButtonsRow$8 = styled(ButtonsRow$2)(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  padding-top: 20px;\n"], ["\n  padding-top: 20px;\n"])));
-  var PreviewImage = styled.img(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"])));
-  var templateObject_1$r, templateObject_2$n, templateObject_3$h, templateObject_4$b, templateObject_5$8, templateObject_6$6, templateObject_7$4;
+  var StyledButtonsRow$8 = styled(ButtonsRow$2)(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  padding-top: 20px;\n"], ["\n  padding-top: 20px;\n"])));
+  var PreviewImage = styled.img(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"])));
+  var templateObject_1$r, templateObject_2$n, templateObject_3$h, templateObject_4$b, templateObject_5$8, templateObject_6$5, templateObject_7$3;
 
   var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
     var onSuccess = _a.onSuccess,
@@ -18722,8 +18836,8 @@
   var Description$3 = styled.p(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
   var Instruction = styled.p(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
   var ImageCol = styled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  flex-basis: 0;\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  flex-basis: 0;\n"])));
-  var StyledButtonsRow$7 = styled(ButtonsRow$2)(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-  var templateObject_1$q, templateObject_2$m, templateObject_3$g, templateObject_4$a, templateObject_5$7, templateObject_6$5;
+  var StyledButtonsRow$7 = styled(ButtonsRow$2)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+  var templateObject_1$q, templateObject_2$m, templateObject_3$g, templateObject_4$a, templateObject_5$7, templateObject_6$4;
 
   function ScalingCameraFeed() {
     var _a = useIdCaptureStore(),
@@ -19083,8 +19197,8 @@
   var SelectIdCardScreenPanel = styled(ScreenPanel)(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  background: white;\n  padding: 80px 0;\n\n  @media (max-height: 1000px) {\n    padding: 40px 0;\n  }\n"], ["\n  background: white;\n  padding: 80px 0;\n\n  @media (max-height: 1000px) {\n    padding: 40px 0;\n  }\n"])));
   var ScreenPanelHeading = styled.h3(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  margin: 0 0 30px;\n"], ["\n  margin: 0 0 30px;\n"])));
   var ScreenActionsBar = styled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: end;\n  gap: 20px;\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n  border-top: 1px solid #ccc;\n\n  @media (max-width: 600px) {\n    justify-content: center;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: end;\n  gap: 20px;\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n  border-top: 1px solid #ccc;\n\n  @media (max-width: 600px) {\n    justify-content: center;\n  }\n"])));
-  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 DashedSeparator = styled.div(templateObject_6$3 || (templateObject_6$3 = __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$2 || (templateObject_7$2 = __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$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"])));
@@ -19364,17 +19478,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$1, 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$3, templateObject_7$2, 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,
@@ -19720,6 +19837,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();
@@ -20377,6 +20497,8 @@
     },
     ready: false,
     error: null,
+    modelLoadState: 'not-started',
+    modelWarmingStartedAt: null,
     modelDownloadProgress: 0
   });
   function SelfieGuidanceModelsProvider(_a) {
@@ -20408,7 +20530,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 () {
@@ -20470,9 +20594,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, {
@@ -21439,7 +21565,10 @@
   var legacyInstructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png");
   var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDefault(_a) {
     var _b, _c;
-    var onDismissed = _a.onDismissed,
+    var onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
+      onDismissed = _a.onDismissed,
       onUserCancel = _a.onUserCancel,
       customOverlayContent = _a.customOverlayContent,
       _d = _a.waitForIdCaptureModels,
@@ -21465,8 +21594,9 @@
       cameraAccessDenied = _j.cameraAccessDenied,
       microphoneAccessDenied = _j.microphoneAccessDenied;
     var _k = useSelfieGuidanceModelsContext(),
-      modelsReady = _k.ready,
-      modelDownloadProgress = _k.modelDownloadProgress;
+      modelLoadState = _k.modelLoadState,
+      modelDownloadProgress = _k.modelDownloadProgress,
+      modelWarmingStartedAt = _k.modelWarmingStartedAt;
     var idCaptureModelsContext = React.useContext(IdCaptureModelsContext);
     var theme = styled.useTheme();
     var verbiage = useTranslations(rawVerbiage, {
@@ -21493,6 +21623,19 @@
         });
       }, 3000);
     }, []);
+    var timeSinceWarmingStarted = modelWarmingStartedAt ? new Date().getTime() - modelWarmingStartedAt : 0;
+    var warmingProgress = timeSinceWarmingStarted / 5000.0;
+    var allModelsReady = modelLoadState === 'ready' && (!waitForIdCaptureModels || (idCaptureModelsContext === null || idCaptureModelsContext === void 0 ? void 0 : idCaptureModelsContext.ready));
+    var ready = sessionReady && allModelsReady && cameraReady;
+    var modelLoadProgress = allModelsReady ? 100 : modelDownloadProgress * 0.5 + warmingProgress * 49.0;
+    useLoadProgressHooks({
+      ready: ready,
+      modelLoadState: modelLoadState,
+      modelLoadProgress: modelLoadProgress,
+      onLoadingStarted: onLoadingStarted,
+      onLoadingProgress: onLoadingProgress,
+      onLoadingCompleted: onLoadingCompleted
+    });
     var _m = React.useState(false),
       dismissed = _m[0],
       setDismissed = _m[1];
@@ -21513,8 +21656,6 @@
         verbiage: rawVerbiage.microphoneAccessDenied
       });
     }
-    var allModelsReady = modelsReady && (!waitForIdCaptureModels || (idCaptureModelsContext === null || idCaptureModelsContext === void 0 ? void 0 : idCaptureModelsContext.ready));
-    var ready = sessionReady && allModelsReady && cameraReady;
     return /*#__PURE__*/React.createElement(OverlayContainer, {
       className: classNames.container
     }, /*#__PURE__*/React.createElement(OverlayInner, {
@@ -21528,7 +21669,7 @@
       className: classNames.heading
     }, headingText)), /*#__PURE__*/React.createElement(LoadingOverlayImageContainer, {
       className: classNames.imageContainer
-    }, (assets === null || assets === void 0 ? void 0 : assets.instructionImageUrl) && assets.instructionImageUrl !== legacyInstructionImageUrl ? ( /*#__PURE__*/React.createElement(CustomLoadingGraphic, {
+    }, (assets === null || assets === void 0 ? void 0 : assets.instructionImageUrl) && assets.instructionImageUrl !== legacyInstructionImageUrl ? ( /*#__PURE__*/React.createElement(LoadingOverlayCustomLoadingGraphic, {
       className: classNames.image,
       alt: verbiage.headingText,
       src: assets.instructionImageUrl
@@ -21541,7 +21682,7 @@
     }, /*#__PURE__*/React.createElement(ProgressBarBackground, {
       className: classNames.progressBackground
     }), /*#__PURE__*/React.createElement(LoadingOverlayProgressBar, {
-      "$progress": modelDownloadProgress,
+      "$progress": modelLoadProgress,
       className: classNames.progressBar
     }, /*#__PURE__*/React.createElement(ProgressIndicator, {
       className: classNames.progressIndicator
@@ -21559,7 +21700,7 @@
     }, /*#__PURE__*/React.createElement(LoadingListItemIndicator, {
       className: classNames.loadingListItemIndicator,
       state: sessionReady && allModelsReady ? 'done' : 'running'
-    }), !sessionReady ? verbiage.sessionCheckingText : allModelsReady ? verbiage.modelsReadyText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))), /*#__PURE__*/React.createElement(ContinueButtonContainer, {
+    }), !sessionReady ? verbiage.sessionCheckingText : allModelsReady ? verbiage.modelsReadyText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))), /*#__PURE__*/React.createElement(LoadingOverlayContinueButtonContainer, {
       className: classNames.continueBtnContainer
     }, (ready || ((_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.displayDisabledContinueBtn)) && ( /*#__PURE__*/React.createElement(ContinueButton, {
       autoFocus: true,
@@ -21599,9 +21740,7 @@
     var _a, _b, _c, _d;
     return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarIndicatorColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
   });
-  var CustomLoadingGraphic = styled.img(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n"], ["\n  transform-style: preserve-3d;\n"])));
-  var ContinueButtonContainer = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-  var ContinueButton = styled(LoaderButton)(templateObject_7$2 || (templateObject_7$2 = __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    box-shadow: none;\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    box-shadow: none;\n  }\n"])), function (props) {
+  var ContinueButton = styled(LoaderButton)(templateObject_5$4 || (templateObject_5$4 = __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    box-shadow: none;\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    box-shadow: none;\n  }\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f;
     return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === 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.selfieCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.progressBarFontSize, ";") : '';
   }, function (props) {
@@ -21620,7 +21759,7 @@
     var _a, _b, _c, _d;
     return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnBorder) !== null && _d !== void 0 ? _d : 'none';
   });
-  var templateObject_1$g, templateObject_2$d, templateObject_3$b, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$2;
+  var templateObject_1$g, templateObject_2$d, templateObject_3$b, templateObject_4$6, templateObject_5$4;
 
   var components = {
     "default": SelfieCaptureLoadingOverlayDefault,
@@ -21637,7 +21776,10 @@
 
   var FaceLivenessWizard = function FaceLivenessWizard(_a) {
     var _b;
-    var onComplete = _a.onComplete,
+    var onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
+      onComplete = _a.onComplete,
       onSuccess = _a.onSuccess,
       onFailure = _a.onFailure,
       onTimeout = _a.onTimeout,
@@ -21904,6 +22046,9 @@
       classNames: classNames.loadingOverlay,
       colors: colors.loadingOverlay,
       verbiage: verbiage.loadingOverlay,
+      onLoadingStarted: onLoadingStarted,
+      onLoadingProgress: onLoadingProgress,
+      onLoadingCompleted: onLoadingCompleted,
       onUserCancel: onUserCancel,
       onDismissed: onLoadingOverlayDismissedCallback,
       waitForIdCaptureModels: waitForIdCaptureModels
@@ -23760,7 +23905,10 @@
   var templateObject_1$9;
 
   var VideoSignatureWizard = function VideoSignatureWizard(_a) {
-    var onComplete = _a.onComplete,
+    var onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
+      onComplete = _a.onComplete,
       onVideoCaptured = _a.onVideoCaptured,
       onRetryClicked = _a.onRetryClicked,
       onExitCapture = _a.onExitCapture,
@@ -23912,6 +24060,9 @@
           return /*#__PURE__*/React.createElement(FaceLivenessWizard, _assign({
             key: "face-liveness-".concat(attempt)
           }, faceLivenessProps, {
+            onLoadingStarted: onLoadingStarted,
+            onLoadingProgress: onLoadingProgress,
+            onLoadingCompleted: onLoadingCompleted,
             onSuccess: onFaceCaptureSuccess,
             onExitCapture: onExitCapture,
             onUserCancel: onUserCancel,
@@ -24857,6 +25008,9 @@
       _s = _a.idCaptureLoadingOverlayMode,
       idCaptureLoadingOverlayMode = _s === void 0 ? 'default' : _s,
       customOverlayContent = _a.customOverlayContent,
+      onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
       onLoadingOverlayDismissed = _a.onLoadingOverlayDismissed,
       _t = _a.idDocumentType,
       idDocumentType = _t === void 0 ? 'idCardOrPassport' : _t,
@@ -25014,6 +25168,9 @@
             key: "id-capture-".concat(attempt),
             loadingOverlayMode: idCaptureLoadingOverlayMode,
             customOverlayContent: customOverlayContent,
+            onLoadingStarted: onLoadingStarted,
+            onLoadingProgress: onLoadingProgress,
+            onLoadingCompleted: onLoadingCompleted,
             onLoadingOverlayDismissed: onLoadingOverlayDismissed,
             silentFallback: silentFallback,
             guideImages: idCaptureGuideImages
@@ -25038,6 +25195,9 @@
             key: "face-liveness-".concat(attempt),
             loadingOverlayMode: faceLivenessLoadingOverlayMode,
             customOverlayContent: customOverlayContent,
+            onLoadingStarted: onLoadingStarted,
+            onLoadingProgress: onLoadingProgress,
+            onLoadingCompleted: onLoadingCompleted,
             onLoadingOverlayDismissed: onLoadingOverlayDismissed,
             silentFallback: silentFallback
           }, faceLivenessProps, {
@@ -25636,6 +25796,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,
@@ -25677,6 +25840,9 @@
     useDebugLogging(debugMode);
     var idCaptureProps = React.useMemo(function () {
       return {
+        onLoadingStarted: onLoadingStarted,
+        onLoadingProgress: onLoadingProgress,
+        onLoadingCompleted: onLoadingCompleted,
         onExitCapture: onExitCapture,
         onUserCancel: onUserCancel,
         onModelError: onModelError,
@@ -25706,7 +25872,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,
@@ -25835,6 +26001,9 @@
       _h = _a.skipSuccessScreen,
       skipSuccessScreen = _h === void 0 ? false : _h,
       idCardForFaceMatch = _a.idCardForFaceMatch,
+      onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
       onBeforeDocumentUpload = _a.onBeforeDocumentUpload,
       onDocumentUploadProgress = _a.onDocumentUploadProgress,
       onDocumentUploaded = _a.onDocumentUploaded,
@@ -25871,6 +26040,9 @@
         timeoutDurationMs: timeoutDurationMs,
         modelLoadTimeoutMs: modelLoadTimeoutMs,
         skipSuccessScreen: skipSuccessScreen,
+        onLoadingStarted: onLoadingStarted,
+        onLoadingProgress: onLoadingProgress,
+        onLoadingCompleted: onLoadingCompleted,
         onComplete: onComplete,
         onSuccess: onApproved,
         onDenied: onDenied,
@@ -25884,7 +26056,7 @@
         verbiage: verbiage,
         debugMode: debugMode
       };
-    }, [assets, classNames, colors, debugMode, initialCaptureDelayMs, loadingOverlayMode, modelLoadTimeoutMs, onApproved, onComplete, onDenied, onExitAfterFailure, onExitCapture, onModelError, onUserCancel, skipSuccessScreen, timeoutDurationMs, verbiage]);
+    }, [assets, classNames, colors, debugMode, initialCaptureDelayMs, loadingOverlayMode, modelLoadTimeoutMs, onApproved, onComplete, onDenied, onExitAfterFailure, onExitCapture, onLoadingCompleted, onLoadingProgress, onLoadingStarted, onModelError, onUserCancel, skipSuccessScreen, timeoutDurationMs, verbiage]);
     return /*#__PURE__*/React.createElement(AuthProvider, {
       sessionId: sessionId,
       authUrl: authUrl
@@ -26007,6 +26179,9 @@
       enableOverrideWrongDocumentTypeDialog = _w === void 0 ? false : _w,
       _x = _a.allowOverrideWrongDocumentTypeAfterMs,
       allowOverrideWrongDocumentTypeAfterMs = _x === void 0 ? 8000 : _x,
+      onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
       onBeforeDocumentUpload = _a.onBeforeDocumentUpload,
       onDocumentUploaded = _a.onDocumentUploaded,
       onDocumentUploadProgress = _a.onDocumentUploadProgress,
@@ -26051,6 +26226,9 @@
     useDebugLogging(debugMode);
     var idCaptureProps = React.useMemo(function () {
       return {
+        onLoadingStarted: onLoadingStarted,
+        onLoadingProgress: onLoadingProgress,
+        onLoadingCompleted: onLoadingCompleted,
         onExitCapture: onExitCapture,
         onUserCancel: onUserCancel,
         onModelError: onIdCaptureModelError,
@@ -26078,9 +26256,12 @@
         skipSuccessScreen: skipSuccessScreen,
         debugMode: debugMode
       };
-    }, [onExitCapture, onUserCancel, onIdCaptureModelError, assets.idCapture, classNames.idCapture, colors.idCapture, verbiage.idCapture, precapturedDocuments, idCaptureRequirement, allowSinglePageIdCapture, idCaptureThresholds, idCaptureLoadingOverlayMode, idCaptureInstructions, idCaptureGuideType, idCaptureGuideImages, idCapturePortraitGuidesOnMobile, idCaptureRotateLoadingOverlayImageWhenPortrait, idCaptureModelLoadTimeoutMs, allowIdCardBackToFrontCapture, idCaptureAllowUploadingDocumentsFromStorage, enableOverrideWrongDocumentTypeDialog, allowOverrideWrongDocumentTypeAfterMs, idCaptureForceFallbackMode, separateIdCardCaptureSequence, skipSuccessScreen, debugMode]);
+    }, [onLoadingStarted, onLoadingProgress, onLoadingCompleted, onExitCapture, onUserCancel, onIdCaptureModelError, assets.idCapture, classNames.idCapture, colors.idCapture, verbiage.idCapture, precapturedDocuments, idCaptureRequirement, allowSinglePageIdCapture, idCaptureThresholds, idCaptureLoadingOverlayMode, idCaptureInstructions, idCaptureGuideType, idCaptureGuideImages, idCapturePortraitGuidesOnMobile, idCaptureRotateLoadingOverlayImageWhenPortrait, idCaptureModelLoadTimeoutMs, allowIdCardBackToFrontCapture, idCaptureAllowUploadingDocumentsFromStorage, enableOverrideWrongDocumentTypeDialog, allowOverrideWrongDocumentTypeAfterMs, idCaptureForceFallbackMode, separateIdCardCaptureSequence, skipSuccessScreen, debugMode]);
     var faceLivenessProps = React.useMemo(function () {
       return {
+        onLoadingStarted: onLoadingStarted,
+        onLoadingProgress: onLoadingProgress,
+        onLoadingCompleted: onLoadingCompleted,
         loadingOverlayMode: faceLivenessLoadingOverlayMode,
         initialCaptureDelayMs: faceLivenessInitialCaptureDelayMs,
         timeoutDurationMs: faceLivenessTimeoutDurationMs,
@@ -26098,7 +26279,7 @@
         verbiage: verbiage.faceLiveness,
         debugMode: debugMode
       };
-    }, [assets.faceLiveness, classNames.faceLiveness, colors.faceLiveness, debugMode, faceLivenessInitialCaptureDelayMs, faceLivenessLoadingOverlayMode, faceLivenessTimeoutDurationMs, onDenied, onExitAfterFailure, onExitCapture, onSelfieCaptureModelError, onUserCancel, precapturedDocuments, selfieCaptureModelLoadTimeoutMs, skipSuccessScreen, verbiage.faceLiveness]);
+    }, [assets.faceLiveness, classNames.faceLiveness, colors.faceLiveness, debugMode, faceLivenessInitialCaptureDelayMs, faceLivenessLoadingOverlayMode, faceLivenessTimeoutDurationMs, onDenied, onExitAfterFailure, onExitCapture, onLoadingCompleted, onLoadingProgress, onLoadingStarted, onSelfieCaptureModelError, onUserCancel, precapturedDocuments, selfieCaptureModelLoadTimeoutMs, skipSuccessScreen, verbiage.faceLiveness]);
     var additionalDocumentCaptureProps = React.useMemo(function () {
       return {
         documents: captureAdditionalDocuments,
@@ -26274,6 +26455,9 @@
       allowUploadingDocumentsFromStorage = _w === void 0 ? false : _w,
       _x = _a.separateIdCardCaptureSequence,
       separateIdCardCaptureSequence = _x === void 0 ? false : _x,
+      onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
       onBeforeDocumentUpload = _a.onBeforeDocumentUpload,
       onDocumentUploadProgress = _a.onDocumentUploadProgress,
       onDocumentUploaded = _a.onDocumentUploaded,
@@ -26320,6 +26504,9 @@
     useDebugLogging(debugMode);
     var idCaptureProps = React.useMemo(function () {
       return {
+        onLoadingStarted: onLoadingStarted,
+        onLoadingProgress: onLoadingProgress,
+        onLoadingCompleted: onLoadingCompleted,
         assets: assets.idCapture,
         classNames: classNames.idCapture,
         colors: colors.idCapture,
@@ -26347,9 +26534,12 @@
         skipSuccessScreen: skipSuccessScreen,
         debugMode: debugMode
       };
-    }, [assets.idCapture, classNames.idCapture, colors.idCapture, verbiage.idCapture, precapturedDocuments, idCaptureRequirement, allowSinglePageIdCapture, idCaptureThresholds, idCaptureLoadingOverlayMode, idCaptureInstructions, idCaptureGuideType, idCaptureGuideImages, idCapturePortraitGuidesOnMobile, idCaptureRotateLoadingOverlayImageWhenPortrait, idCaptureModelLoadTimeoutMs, allowIdCardBackToFrontCapture, idCaptureForceFallbackMode, enableOverrideWrongDocumentTypeDialog, allowOverrideWrongDocumentTypeAfterMs, allowUploadingDocumentsFromStorage, separateIdCardCaptureSequence, onExitCapture, onUserCancel, onIdCaptureModelError, skipSuccessScreen, debugMode]);
+    }, [onLoadingCompleted, onLoadingProgress, onLoadingStarted, assets.idCapture, classNames.idCapture, colors.idCapture, verbiage.idCapture, precapturedDocuments, idCaptureRequirement, allowSinglePageIdCapture, idCaptureThresholds, idCaptureLoadingOverlayMode, idCaptureInstructions, idCaptureGuideType, idCaptureGuideImages, idCapturePortraitGuidesOnMobile, idCaptureRotateLoadingOverlayImageWhenPortrait, idCaptureModelLoadTimeoutMs, allowIdCardBackToFrontCapture, idCaptureForceFallbackMode, enableOverrideWrongDocumentTypeDialog, allowOverrideWrongDocumentTypeAfterMs, allowUploadingDocumentsFromStorage, separateIdCardCaptureSequence, onExitCapture, onUserCancel, onIdCaptureModelError, skipSuccessScreen, debugMode]);
     var faceLivenessProps = React.useMemo(function () {
       return {
+        onLoadingStarted: onLoadingStarted,
+        onLoadingProgress: onLoadingProgress,
+        onLoadingCompleted: onLoadingCompleted,
         onExitCapture: onExitCapture,
         onExitAfterFailure: onExitAfterFailure,
         onUserCancel: onUserCancel,
@@ -26366,7 +26556,7 @@
         verbiage: verbiage.faceLiveness,
         debugMode: debugMode
       };
-    }, [assets.faceLiveness, classNames.faceLiveness, colors.faceLiveness, debugMode, faceLivenessInitialCaptureDelayMs, faceLivenessLoadingOverlayMode, faceLivenessTimeoutDurationMs, onExitAfterFailure, onExitCapture, onSelfieCaptureModelError, onUserCancel, precapturedDocuments, selfieCaptureModelLoadTimeoutMs, skipSuccessScreen, verbiage.faceLiveness]);
+    }, [onLoadingCompleted, onLoadingProgress, onLoadingStarted, assets.faceLiveness, classNames.faceLiveness, colors.faceLiveness, debugMode, faceLivenessInitialCaptureDelayMs, faceLivenessLoadingOverlayMode, faceLivenessTimeoutDurationMs, onExitAfterFailure, onExitCapture, onSelfieCaptureModelError, onUserCancel, precapturedDocuments, selfieCaptureModelLoadTimeoutMs, skipSuccessScreen, verbiage.faceLiveness]);
     var videoIdCaptureProps = React.useMemo(function () {
       return _assign({
         onExitCapture: onExitCapture,
@@ -26781,7 +26971,10 @@
 
   var ALLOWED_RETRIES$2 = 2;
   var CustomerVerificationWizard = function CustomerVerificationWizard(_a) {
-    var onComplete = _a.onComplete,
+    var onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
+      onComplete = _a.onComplete,
       onCustomerMatched = _a.onCustomerMatched,
       onCustomerNotMatched = _a.onCustomerNotMatched,
       onExitCapture = _a.onExitCapture,
@@ -26911,7 +27104,7 @@
               onExitAfterFailure === null || onExitAfterFailure === void 0 ? void 0 : onExitAfterFailure();
             },
             onRetryClick: function onRetryClick() {
-              setAttempt(function (n) {
+              return setAttempt(function (n) {
                 return n + 1;
               });
             }
@@ -26926,9 +27119,12 @@
       classNames: classNames.loadingOverlay,
       colors: colors.loadingOverlay,
       verbiage: verbiage.loadingOverlay,
+      onLoadingStarted: onLoadingStarted,
+      onLoadingProgress: onLoadingProgress,
+      onLoadingCompleted: onLoadingCompleted,
       onUserCancel: onUserCancel,
       onDismissed: function onDismissed() {
-        setCaptureState('CAPTURING');
+        return setCaptureState('CAPTURING');
       }
     }));
   };
@@ -26970,6 +27166,9 @@
       classNames = _a.classNames,
       colors = _a.colors,
       verbiage = _a.verbiage,
+      onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
       onBeforeDocumentUpload = _a.onBeforeDocumentUpload,
       onDocumentUploadProgress = _a.onDocumentUploadProgress,
       onDocumentUploaded = _a.onDocumentUploaded,
@@ -27038,6 +27237,9 @@
     }, /*#__PURE__*/React.createElement(SdkPage, {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.container
     }, /*#__PURE__*/React.createElement(CustomerVerificationWizard, {
+      onLoadingStarted: onLoadingStarted,
+      onLoadingProgress: onLoadingProgress,
+      onLoadingCompleted: onLoadingCompleted,
       onComplete: onComplete,
       onCustomerMatched: onCustomerMatched,
       onCustomerNotMatched: onCustomerNotMatched,
@@ -27351,7 +27553,10 @@
 
   var ALLOWED_RETRIES = 2;
   var CustomerIdentificationWizard = function CustomerIdentificationWizard(_a) {
-    var onComplete = _a.onComplete,
+    var onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
+      onComplete = _a.onComplete,
       onCustomerMatched = _a.onCustomerMatched,
       onCustomerNotMatched = _a.onCustomerNotMatched,
       onExitCapture = _a.onExitCapture,
@@ -27496,6 +27701,9 @@
       classNames: classNames.loadingOverlay,
       colors: colors.loadingOverlay,
       verbiage: verbiage.loadingOverlay,
+      onLoadingStarted: onLoadingStarted,
+      onLoadingProgress: onLoadingProgress,
+      onLoadingCompleted: onLoadingCompleted,
       onUserCancel: onUserCancel,
       onDismissed: function onDismissed() {
         setCaptureState('CAPTURING');
@@ -27533,6 +27741,9 @@
       modelLoadTimeoutMs = _e === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _e,
       _f = _a.skipSuccessScreen,
       skipSuccessScreen = _f === void 0 ? false : _f,
+      onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
       onBeforeDocumentUpload = _a.onBeforeDocumentUpload,
       onDocumentUploadProgress = _a.onDocumentUploadProgress,
       onDocumentUploaded = _a.onDocumentUploaded,
@@ -27606,6 +27817,9 @@
     }, /*#__PURE__*/React.createElement(SdkPage, {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.container
     }, /*#__PURE__*/React.createElement(CustomerIdentificationWizard, {
+      onLoadingStarted: onLoadingStarted,
+      onLoadingProgress: onLoadingProgress,
+      onLoadingCompleted: onLoadingCompleted,
       onComplete: onComplete,
       onCustomerMatched: onCustomerMatched,
       onCustomerNotMatched: onCustomerNotMatched,
@@ -27637,6 +27851,9 @@
       documentServiceUrl = _a.documentServiceUrl,
       sendBase64DocumentsInSwaggerProxy = _a.sendBase64DocumentsInSwaggerProxy,
       useDocumentServiceForLivenessChecks = _a.useDocumentServiceForLivenessChecks,
+      onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
       onBeforeDocumentUpload = _a.onBeforeDocumentUpload,
       onDocumentUploadProgress = _a.onDocumentUploadProgress,
       onDocumentUploaded = _a.onDocumentUploaded,
@@ -27716,6 +27933,9 @@
       onCameraTamperingDetected: onCameraTamperingDetected,
       videoSignatureCaptureProps: React.useMemo(function () {
         return {
+          onLoadingStarted: onLoadingStarted,
+          onLoadingProgress: onLoadingProgress,
+          onLoadingCompleted: onLoadingCompleted,
           customOverlayContent: customOverlayContent,
           onLoadingOverlayDismissed: onLoadingOverlayDismissed,
           loadingOverlayMode: loadingOverlayMode,
@@ -27734,7 +27954,7 @@
           onModelError: onModelError,
           onUserCancel: onUserCancel
         };
-      }, [customOverlayContent, onLoadingOverlayDismissed, loadingOverlayMode, skipSuccessScreen, captureAudio, minSignaturePadPoints, headTrackingBoundaryPercentage, modelLoadTimeoutMs, faceLivenessProps, allowSignatureAfterLivenessCheckFailure, restartVideoOnSignaturePadCleared, classNames, colors, debugMode, verbiage, onModelError, onUserCancel])
+      }, [onLoadingStarted, onLoadingProgress, onLoadingCompleted, customOverlayContent, onLoadingOverlayDismissed, loadingOverlayMode, skipSuccessScreen, captureAudio, minSignaturePadPoints, headTrackingBoundaryPercentage, modelLoadTimeoutMs, faceLivenessProps, allowSignatureAfterLivenessCheckFailure, restartVideoOnSignaturePadCleared, classNames, colors, debugMode, verbiage, onModelError, onUserCancel])
     })))));
   };
 
@@ -27772,6 +27992,9 @@
       sendBase64DocumentsInSwaggerProxy = _a.sendBase64DocumentsInSwaggerProxy,
       customerDataMatchConfig = _a.customerDataMatchConfig,
       useDocumentServiceForLivenessChecks = _a.useDocumentServiceForLivenessChecks,
+      onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
       onBeforeDocumentUpload = _a.onBeforeDocumentUpload,
       onDocumentUploadProgress = _a.onDocumentUploadProgress,
       onDocumentUploaded = _a.onDocumentUploaded,
@@ -27856,6 +28079,9 @@
     useDebugLogging(debugMode);
     var videoIdCaptureProps = React.useMemo(function () {
       return {
+        onLoadingStarted: onLoadingStarted,
+        onLoadingProgress: onLoadingProgress,
+        onLoadingCompleted: onLoadingCompleted,
         idCaptureProps: idCaptureProps,
         faceLivenessProps: faceLivenessProps,
         idCaptureModelsEnabled: idCaptureModelsEnabled,
@@ -27888,7 +28114,7 @@
         verbiage: verbiage,
         debugMode: debugMode
       };
-    }, [idCaptureProps, faceLivenessProps, idCaptureModelsEnabled, videoIdCaptureThresholds, readTextPrompt, readTextTimeoutDurationMs, readTextMinReadingMs, onExitCapture, onExitAfterFailure, onUserCancel, skipSuccessScreen, skipIdCapture, skipShowIdCardBack, idCaptureLoadingOverlayMode, customOverlayContent, onLoadingOverlayDismissed, idDocumentType, idCaptureGuideType, idCaptureGuideImages, idCapturePortraitGuidesOnMobile, idCaptureRotateLoadingOverlayImageWhenPortrait, faceLivenessLoadingOverlayMode, disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, silentFallback, mergeAVStreams, assets, classNames, colors, verbiage, debugMode]);
+    }, [onLoadingStarted, onLoadingProgress, onLoadingCompleted, idCaptureProps, faceLivenessProps, idCaptureModelsEnabled, videoIdCaptureThresholds, readTextPrompt, readTextTimeoutDurationMs, readTextMinReadingMs, onExitCapture, onExitAfterFailure, onUserCancel, skipSuccessScreen, skipIdCapture, skipShowIdCardBack, idCaptureLoadingOverlayMode, customOverlayContent, onLoadingOverlayDismissed, idDocumentType, idCaptureGuideType, idCaptureGuideImages, idCapturePortraitGuidesOnMobile, idCaptureRotateLoadingOverlayImageWhenPortrait, faceLivenessLoadingOverlayMode, disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, silentFallback, mergeAVStreams, assets, classNames, colors, verbiage, debugMode]);
     var additionalDocumentCaptureProps = React.useMemo(function () {
       return {
         documents: captureAdditionalDocuments,
@@ -28011,6 +28237,9 @@
       modelLoadTimeoutMs = _f === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _f,
       _g = _a.skipSuccessScreen,
       skipSuccessScreen = _g === void 0 ? false : _g,
+      onLoadingStarted = _a.onLoadingStarted,
+      onLoadingProgress = _a.onLoadingProgress,
+      onLoadingCompleted = _a.onLoadingCompleted,
       onBeforeDocumentUpload = _a.onBeforeDocumentUpload,
       onDocumentUploadProgress = _a.onDocumentUploadProgress,
       onDocumentUploaded = _a.onDocumentUploaded,
@@ -28053,6 +28282,9 @@
     useDebugLogging(debugMode);
     var faceLivenessProps = React.useMemo(function () {
       return {
+        onLoadingStarted: onLoadingStarted,
+        onLoadingProgress: onLoadingProgress,
+        onLoadingCompleted: onLoadingCompleted,
         onExitCapture: onExitCapture,
         onUserCancel: onUserCancel,
         onExitAfterFailure: onExitAfterFailure,
@@ -28068,7 +28300,7 @@
         verbiage: verbiage.faceLiveness,
         debugMode: debugMode
       };
-    }, [assets.faceLiveness, classNames.faceLiveness, colors.faceLiveness, debugMode, initialCaptureDelayMs, loadingOverlayMode, modelLoadTimeoutMs, onExitAfterFailure, onExitCapture, onModelError, onUserCancel, skipSuccessScreen, timeoutDurationMs, verbiage.faceLiveness]);
+    }, [assets.faceLiveness, classNames.faceLiveness, colors.faceLiveness, debugMode, initialCaptureDelayMs, loadingOverlayMode, modelLoadTimeoutMs, onExitAfterFailure, onExitCapture, onLoadingCompleted, onLoadingProgress, onLoadingStarted, onModelError, onUserCancel, skipSuccessScreen, timeoutDurationMs, verbiage.faceLiveness]);
     var additionalDocumentCaptureProps = React.useMemo(function () {
       return {
         documents: captureAdditionalDocuments,