npm - idmission-web-sdk - Versions diffs - 2.3.6 → 2.3.8 - Mend

idmission-web-sdk 2.3.6 → 2.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/dist/sdk2.cjs.development.js CHANGED Viewed

@@ -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.6';
+var webSdkVersion = '2.3.8';
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -506,8 +506,8 @@ var OverlayInner$2 = styled__default.default.div(templateObject_2$D || (template
 var OverlayImageContainer = styled__default.default.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__default.default.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__default.default(OverlayContainer)(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  background: #f7f6fb;\n"], ["\n  background: #f7f6fb;\n"])));
-var ButtonsColumn = styled__default.default.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__default.default(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__default.default.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__default.default(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__default.default(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';
@@ -518,8 +518,8 @@ 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$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 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 LoadingOverlayHeader = styled__default.default.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) {
@@ -527,17 +527,25 @@ 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$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__default.default.img(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n"], ["\n  transform-style: preserve-3d;\n"])));
+var LoadingOverlayContinueButtonContainer = styled__default.default.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;
 var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
   var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -2503,19 +2511,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 +2544,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 +2558,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 +2566,7 @@ function useLoadFocusModel(_a) {
       });
     })["catch"](function (e) {
       setModelError(e);
+      setModelLoadState('error');
     })["finally"](function () {
       clearTimeout(modelLoadTimeout);
     });
@@ -2566,11 +2581,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 +2681,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 +2713,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 +2726,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 +2748,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 +3198,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 +3230,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 +3245,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 +3253,7 @@ function useLoadDocumentDetector(_a) {
       });
     })["catch"](function (e) {
       setModelError(e);
+      setModelLoadState('error');
     })["finally"](function () {
       clearTimeout(modelLoadTimeout);
     });
@@ -3231,12 +3268,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 () {
@@ -5200,8 +5241,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;
@@ -5274,7 +5316,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) {
@@ -5341,7 +5385,8 @@ function DocumentDetectionModelProvider(_a) {
       startDocumentDetection: start,
       stopDocumentDetection: stop,
       loadDocumentDetectionModel: load,
-      documentDetectionModelReady: ready,
+      documentDetectionModelState: modelLoadState,
+      documentDetectionModelWarmingStartedAt: modelWarmingStartedAt,
       documentDetectionModelError: modelError,
       documentDetectionModelDownloadProgress: modelDownloadProgress,
       onDocumentDetected: onDocumentDetected,
@@ -5353,7 +5398,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, {
@@ -5366,8 +5411,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() {
@@ -5409,7 +5455,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;
@@ -5421,15 +5469,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, {
@@ -5494,6 +5543,8 @@ var IdCaptureModelsContext = /*#__PURE__*/React.createContext({
     return null;
   },
   modelDownloadProgress: 0,
+  modelLoadState: 'not-started',
+  modelWarmingStartedAt: null,
   modelError: null,
   thresholds: defaultIdCaptureThresholds,
   setThresholds: function setThresholds() {
@@ -5528,8 +5579,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,
@@ -5544,8 +5596,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,
@@ -5653,10 +5706,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,
@@ -5674,7 +5734,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, {
@@ -7314,10 +7374,49 @@ function LoadingListItemIndicator(_a) {
   }))))));
 }
+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,
@@ -7335,7 +7434,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,
@@ -7346,6 +7447,7 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
     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',
@@ -7371,6 +7473,17 @@ 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;
+  useLoadProgressHooks({
+    ready: ready,
+    modelLoadState: modelLoadState,
+    modelLoadProgress: modelLoadProgress,
+    onLoadingStarted: onLoadingStarted,
+    onLoadingProgress: onLoadingProgress,
+    onLoadingCompleted: onLoadingCompleted
+  });
   if (dismissed) return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null);
   if (cameraAccessDenied) {
     return /*#__PURE__*/React__namespace.default.createElement(CameraAccessDeniedOverlay, {
@@ -7400,7 +7513,7 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
     className: classNames.heading
   }, verbiage.headingText)), /*#__PURE__*/React__namespace.default.createElement(LoadingOverlayImageContainer, {
     className: classNames.imageContainer
-  }, (assets === null || assets === void 0 ? void 0 : assets.instructionImageUrl) && assets.instructionImageUrl !== legacyInstructionImageUrl$1 ? ( /*#__PURE__*/React__namespace.default.createElement(CustomLoadingGraphic$1, {
+  }, hasCustomInstructionGraphic ? ( /*#__PURE__*/React__namespace.default.createElement(LoadingOverlayCustomLoadingGraphic, {
     ref: imageRef,
     alt: verbiage.headingText,
     src: assets.instructionImageUrl,
@@ -7430,7 +7543,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
@@ -7448,7 +7561,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(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__namespace.default.createElement(ContinueButton$1, {
     autoFocus: true,
@@ -7471,8 +7584,8 @@ var OverlayInner$1 = styled__default.default(LoadingOverlayInner)(templateObject
   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__default.default.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__default.default(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__default.default.input(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
+var ContinuityCameraCheckboxInner = styled__default.default(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__default.default.input(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 var ButtonsRow$1 = styled__default.default(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';
@@ -7480,17 +7593,18 @@ var ButtonsRow$1 = styled__default.default(LoadingOverlayButtonsRow)(templateObj
   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__default.default(LoadingOverlayProgressBarBackground)(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  background: ", ";\n  opacity: ", ";\n"], ["\n  background: ", ";\n  opacity: ", ";\n"])), function (props) {
+var ProgressBarBackground$1 = styled__default.default(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__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 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$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 ProgressIndicator$1 = styled__default.default(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__default.default(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) {
@@ -7509,7 +7623,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$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__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"])));
@@ -7760,8 +7874,8 @@ var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObj
 var ImageRow = styled__default.default(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__default.default.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__default.default(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__default.default.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__default.default.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;
@@ -8452,12 +8566,12 @@ var GuideRegion = styled__default.default.div(templateObject_4$d || (templateObj
   return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
 });
 var Spacer = styled__default.default(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__default.default.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__default.default.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__default.default.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__default.default.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) {
@@ -8465,7 +8579,7 @@ var GuideCenterBorder = styled__default.default.div(templateObject_7$5 || (templ
 });
 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$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;
@@ -9337,9 +9451,9 @@ var Instructions = styled__default.default.div(templateObject_5$8 || (templateOb
   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__default.default(ButtonsRow$2)(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  padding-top: 20px;\n"], ["\n  padding-top: 20px;\n"])));
-var PreviewImage = styled__default.default.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__default.default(ButtonsRow$2)(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  padding-top: 20px;\n"], ["\n  padding-top: 20px;\n"])));
+var PreviewImage = styled__default.default.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,
@@ -9615,8 +9729,8 @@ var Heading$8 = styled__default.default.h3(templateObject_2$m || (templateObject
 var Description$3 = styled__default.default.p(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
 var Instruction = styled__default.default.p(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
 var ImageCol = styled__default.default.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__default.default(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__default.default(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(),
@@ -9976,8 +10090,8 @@ var ScreenPanel = styled__default.default.div(templateObject_2$l || (templateObj
 var SelectIdCardScreenPanel = styled__default.default(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__default.default.h3(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  margin: 0 0 30px;\n"], ["\n  margin: 0 0 30px;\n"])));
 var ScreenActionsBar = styled__default.default.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__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 DashedSeparator = styled__default.default.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__default.default.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__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$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"])));
@@ -10257,17 +10371,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$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,
@@ -10613,6 +10730,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();
@@ -11270,6 +11390,8 @@ var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
   },
   ready: false,
   error: null,
+  modelLoadState: 'not-started',
+  modelWarmingStartedAt: null,
   modelDownloadProgress: 0
 });
 function SelfieGuidanceModelsProvider(_a) {
@@ -11301,7 +11423,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 () {
@@ -11363,9 +11487,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, {
@@ -12332,7 +12458,10 @@ var templateObject_1$h, templateObject_2$e;
 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,
@@ -12358,8 +12487,9 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
     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, {
@@ -12386,6 +12516,19 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
       });
     }, 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];
@@ -12406,8 +12549,6 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
       verbiage: rawVerbiage.microphoneAccessDenied
     });
   }
-  var allModelsReady = modelsReady && (!waitForIdCaptureModels || (idCaptureModelsContext === null || idCaptureModelsContext === void 0 ? void 0 : idCaptureModelsContext.ready));
-  var ready = sessionReady && allModelsReady && cameraReady;
   return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
     className: classNames.container
   }, /*#__PURE__*/React__namespace.default.createElement(OverlayInner, {
@@ -12421,7 +12562,7 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
     className: classNames.heading
   }, headingText)), /*#__PURE__*/React__namespace.default.createElement(LoadingOverlayImageContainer, {
     className: classNames.imageContainer
-  }, (assets === null || assets === void 0 ? void 0 : assets.instructionImageUrl) && assets.instructionImageUrl !== legacyInstructionImageUrl ? ( /*#__PURE__*/React__namespace.default.createElement(CustomLoadingGraphic, {
+  }, (assets === null || assets === void 0 ? void 0 : assets.instructionImageUrl) && assets.instructionImageUrl !== legacyInstructionImageUrl ? ( /*#__PURE__*/React__namespace.default.createElement(LoadingOverlayCustomLoadingGraphic, {
     className: classNames.image,
     alt: verbiage.headingText,
     src: assets.instructionImageUrl
@@ -12434,7 +12575,7 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
   }, /*#__PURE__*/React__namespace.default.createElement(ProgressBarBackground, {
     className: classNames.progressBackground
   }), /*#__PURE__*/React__namespace.default.createElement(LoadingOverlayProgressBar, {
-    "$progress": modelDownloadProgress,
+    "$progress": modelLoadProgress,
     className: classNames.progressBar
   }, /*#__PURE__*/React__namespace.default.createElement(ProgressIndicator, {
     className: classNames.progressIndicator
@@ -12452,7 +12593,7 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
   }, /*#__PURE__*/React__namespace.default.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__namespace.default.createElement(ContinueButtonContainer, {
+  }), !sessionReady ? verbiage.sessionCheckingText : allModelsReady ? verbiage.modelsReadyText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))), /*#__PURE__*/React__namespace.default.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__namespace.default.createElement(ContinueButton, {
     autoFocus: true,
@@ -12492,9 +12633,7 @@ var ProgressIndicator = styled__default.default(LoadingOverlayProgressIndicator)
   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__default.default.img(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n"], ["\n  transform-style: preserve-3d;\n"])));
-var ContinueButtonContainer = styled__default.default.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var ContinueButton = styled__default.default(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__default.default(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) {
@@ -12513,7 +12652,7 @@ var ContinueButton = styled__default.default(LoaderButton)(templateObject_7$2 ||
   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,
@@ -12530,7 +12669,10 @@ var SelfieCaptureLoadingOverlay = function SelfieCaptureLoadingOverlay(_a) {
 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,
@@ -12797,6 +12939,9 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
     classNames: classNames.loadingOverlay,
     colors: colors.loadingOverlay,
     verbiage: verbiage.loadingOverlay,
+    onLoadingStarted: onLoadingStarted,
+    onLoadingProgress: onLoadingProgress,
+    onLoadingCompleted: onLoadingCompleted,
     onUserCancel: onUserCancel,
     onDismissed: onLoadingOverlayDismissedCallback,
     waitForIdCaptureModels: waitForIdCaptureModels
@@ -13885,7 +14030,10 @@ var StyledVideo$1 = styled__default.default.video(templateObject_1$9 || (templat
 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,
@@ -14037,6 +14185,9 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
         return /*#__PURE__*/React__namespace.default.createElement(FaceLivenessWizard, _assign({
           key: "face-liveness-".concat(attempt)
         }, faceLivenessProps, {
+          onLoadingStarted: onLoadingStarted,
+          onLoadingProgress: onLoadingProgress,
+          onLoadingCompleted: onLoadingCompleted,
           onSuccess: onFaceCaptureSuccess,
           onExitCapture: onExitCapture,
           onUserCancel: onUserCancel,
@@ -14982,6 +15133,9 @@ var VideoIdWizard = function VideoIdWizard(_a) {
     _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,
@@ -15139,6 +15293,9 @@ var VideoIdWizard = function VideoIdWizard(_a) {
           key: "id-capture-".concat(attempt),
           loadingOverlayMode: idCaptureLoadingOverlayMode,
           customOverlayContent: customOverlayContent,
+          onLoadingStarted: onLoadingStarted,
+          onLoadingProgress: onLoadingProgress,
+          onLoadingCompleted: onLoadingCompleted,
           onLoadingOverlayDismissed: onLoadingOverlayDismissed,
           silentFallback: silentFallback,
           guideImages: idCaptureGuideImages
@@ -15163,6 +15320,9 @@ var VideoIdWizard = function VideoIdWizard(_a) {
           key: "face-liveness-".concat(attempt),
           loadingOverlayMode: faceLivenessLoadingOverlayMode,
           customOverlayContent: customOverlayContent,
+          onLoadingStarted: onLoadingStarted,
+          onLoadingProgress: onLoadingProgress,
+          onLoadingCompleted: onLoadingCompleted,
           onLoadingOverlayDismissed: onLoadingOverlayDismissed,
           silentFallback: silentFallback
         }, faceLivenessProps, {
@@ -15761,6 +15921,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,
@@ -15802,6 +15965,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,
@@ -15831,7 +15997,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,
@@ -15960,6 +16126,9 @@ var FaceValidation = function FaceValidation(_a) {
     _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,
@@ -15996,6 +16165,9 @@ var FaceValidation = function FaceValidation(_a) {
       timeoutDurationMs: timeoutDurationMs,
       modelLoadTimeoutMs: modelLoadTimeoutMs,
       skipSuccessScreen: skipSuccessScreen,
+      onLoadingStarted: onLoadingStarted,
+      onLoadingProgress: onLoadingProgress,
+      onLoadingCompleted: onLoadingCompleted,
       onComplete: onComplete,
       onSuccess: onApproved,
       onDenied: onDenied,
@@ -16009,7 +16181,7 @@ var FaceValidation = function FaceValidation(_a) {
       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__namespace.default.createElement(AuthProvider, {
     sessionId: sessionId,
     authUrl: authUrl
@@ -16132,6 +16304,9 @@ var IdAndFaceValidation = function IdAndFaceValidation(_a) {
     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,
@@ -16176,6 +16351,9 @@ var IdAndFaceValidation = function IdAndFaceValidation(_a) {
   useDebugLogging(debugMode);
   var idCaptureProps = React.useMemo(function () {
     return {
+      onLoadingStarted: onLoadingStarted,
+      onLoadingProgress: onLoadingProgress,
+      onLoadingCompleted: onLoadingCompleted,
       onExitCapture: onExitCapture,
       onUserCancel: onUserCancel,
       onModelError: onIdCaptureModelError,
@@ -16203,9 +16381,12 @@ var IdAndFaceValidation = function IdAndFaceValidation(_a) {
       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,
@@ -16223,7 +16404,7 @@ var IdAndFaceValidation = function IdAndFaceValidation(_a) {
       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,
@@ -16399,6 +16580,9 @@ var CustomerIdAndBiometricsEnrollment = function CustomerIdAndBiometricsEnrollme
     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,
@@ -16445,6 +16629,9 @@ var CustomerIdAndBiometricsEnrollment = function CustomerIdAndBiometricsEnrollme
   useDebugLogging(debugMode);
   var idCaptureProps = React.useMemo(function () {
     return {
+      onLoadingStarted: onLoadingStarted,
+      onLoadingProgress: onLoadingProgress,
+      onLoadingCompleted: onLoadingCompleted,
       assets: assets.idCapture,
       classNames: classNames.idCapture,
       colors: colors.idCapture,
@@ -16472,9 +16659,12 @@ var CustomerIdAndBiometricsEnrollment = function CustomerIdAndBiometricsEnrollme
       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,
@@ -16491,7 +16681,7 @@ var CustomerIdAndBiometricsEnrollment = function CustomerIdAndBiometricsEnrollme
       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,
@@ -16906,7 +17096,10 @@ var templateObject_1$2, templateObject_2$2, templateObject_3$2;
 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,
@@ -17036,7 +17229,7 @@ var CustomerVerificationWizard = function CustomerVerificationWizard(_a) {
             onExitAfterFailure === null || onExitAfterFailure === void 0 ? void 0 : onExitAfterFailure();
           },
           onRetryClick: function onRetryClick() {
-            setAttempt(function (n) {
+            return setAttempt(function (n) {
               return n + 1;
             });
           }
@@ -17051,9 +17244,12 @@ var CustomerVerificationWizard = function CustomerVerificationWizard(_a) {
     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');
     }
   }));
 };
@@ -17095,6 +17291,9 @@ var CustomerVerification = function CustomerVerification(_a) {
     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,
@@ -17163,6 +17362,9 @@ var CustomerVerification = function CustomerVerification(_a) {
   }, /*#__PURE__*/React__namespace.default.createElement(SdkPage, {
     className: classNames === null || classNames === void 0 ? void 0 : classNames.container
   }, /*#__PURE__*/React__namespace.default.createElement(CustomerVerificationWizard, {
+    onLoadingStarted: onLoadingStarted,
+    onLoadingProgress: onLoadingProgress,
+    onLoadingCompleted: onLoadingCompleted,
     onComplete: onComplete,
     onCustomerMatched: onCustomerMatched,
     onCustomerNotMatched: onCustomerNotMatched,
@@ -17476,7 +17678,10 @@ var templateObject_1, templateObject_2, templateObject_3;
 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,
@@ -17621,6 +17826,9 @@ var CustomerIdentificationWizard = function CustomerIdentificationWizard(_a) {
     classNames: classNames.loadingOverlay,
     colors: colors.loadingOverlay,
     verbiage: verbiage.loadingOverlay,
+    onLoadingStarted: onLoadingStarted,
+    onLoadingProgress: onLoadingProgress,
+    onLoadingCompleted: onLoadingCompleted,
     onUserCancel: onUserCancel,
     onDismissed: function onDismissed() {
       setCaptureState('CAPTURING');
@@ -17658,6 +17866,9 @@ var CustomerIdentification = function CustomerIdentification(_a) {
     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,
@@ -17731,6 +17942,9 @@ var CustomerIdentification = function CustomerIdentification(_a) {
   }, /*#__PURE__*/React__namespace.default.createElement(SdkPage, {
     className: classNames === null || classNames === void 0 ? void 0 : classNames.container
   }, /*#__PURE__*/React__namespace.default.createElement(CustomerIdentificationWizard, {
+    onLoadingStarted: onLoadingStarted,
+    onLoadingProgress: onLoadingProgress,
+    onLoadingCompleted: onLoadingCompleted,
     onComplete: onComplete,
     onCustomerMatched: onCustomerMatched,
     onCustomerNotMatched: onCustomerNotMatched,
@@ -17762,6 +17976,9 @@ var SignatureKYC = function SignatureKYC(_a) {
     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,
@@ -17841,6 +18058,9 @@ var SignatureKYC = function SignatureKYC(_a) {
     onCameraTamperingDetected: onCameraTamperingDetected,
     videoSignatureCaptureProps: React.useMemo(function () {
       return {
+        onLoadingStarted: onLoadingStarted,
+        onLoadingProgress: onLoadingProgress,
+        onLoadingCompleted: onLoadingCompleted,
         customOverlayContent: customOverlayContent,
         onLoadingOverlayDismissed: onLoadingOverlayDismissed,
         loadingOverlayMode: loadingOverlayMode,
@@ -17859,7 +18079,7 @@ var SignatureKYC = function SignatureKYC(_a) {
         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])
   })))));
 };
@@ -17897,6 +18117,9 @@ var VideoIdValidation = function VideoIdValidation(_a) {
     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,
@@ -17981,6 +18204,9 @@ var VideoIdValidation = function VideoIdValidation(_a) {
   useDebugLogging(debugMode);
   var videoIdCaptureProps = React.useMemo(function () {
     return {
+      onLoadingStarted: onLoadingStarted,
+      onLoadingProgress: onLoadingProgress,
+      onLoadingCompleted: onLoadingCompleted,
       idCaptureProps: idCaptureProps,
       faceLivenessProps: faceLivenessProps,
       idCaptureModelsEnabled: idCaptureModelsEnabled,
@@ -18013,7 +18239,7 @@ var VideoIdValidation = function VideoIdValidation(_a) {
       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,
@@ -18136,6 +18362,9 @@ var CustomerBiometricsEnrollment = function CustomerBiometricsEnrollment(_a) {
     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,
@@ -18178,6 +18407,9 @@ var CustomerBiometricsEnrollment = function CustomerBiometricsEnrollment(_a) {
   useDebugLogging(debugMode);
   var faceLivenessProps = React.useMemo(function () {
     return {
+      onLoadingStarted: onLoadingStarted,
+      onLoadingProgress: onLoadingProgress,
+      onLoadingCompleted: onLoadingCompleted,
       onExitCapture: onExitCapture,
       onUserCancel: onUserCancel,
       onExitAfterFailure: onExitAfterFailure,
@@ -18193,7 +18425,7 @@ var CustomerBiometricsEnrollment = function CustomerBiometricsEnrollment(_a) {
       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,