idmission-web-sdk 2.3.7 → 2.3.8

package/dist/sdk2.cjs.development.js

@@ -235,7 +235,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.3.7';
+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) {
@@ -543,7 +543,9 @@ var LoadingOverlayLoadingListContainer = styled__default.default.div(templateObj
 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;
@@ -7372,6 +7374,42 @@ 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;
@@ -7409,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',
@@ -7421,27 +7460,11 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
     pleaseWaitText: 'Please wait...',
     sessionCheckingText: 'Authenticating...'
   });
-  var onLoadingStartedRef = React.useRef(onLoadingStarted);
-  React.useEffect(function () {
-    onLoadingStartedRef.current = onLoadingStarted;
-  }, [onLoadingStarted]);
-  var onLoadingProgressRef = React.useRef(onLoadingProgress);
-  React.useEffect(function () {
-    onLoadingProgressRef.current = onLoadingProgress;
-  }, [onLoadingProgress]);
-  var onLoadingCompletedRef = React.useRef(onLoadingCompleted);
-  React.useEffect(function () {
-    onLoadingCompletedRef.current = onLoadingCompleted;
-  }, [onLoadingCompleted]);
   var ready = sessionReady && modelsReady && cameraReady;
   React.useEffect(function () {
-    var _a;
-    if (ready) {
-      (_a = onLoadingCompletedRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadingCompletedRef);
-      return function () {
-        return null;
-      };
-    }
+    if (ready) return function () {
+      return null;
+    };
     var t = setTimeout(function () {
       return setDismissed(false);
     }, 500);
@@ -7453,16 +7476,14 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
   var timeSinceWarmingStarted = modelWarmingStartedAt ? new Date().getTime() - modelWarmingStartedAt : 0;
   var warmingProgress = timeSinceWarmingStarted / 5000.0;
   var modelLoadProgress = modelsReady ? 100 : modelDownloadProgress * 0.5 + warmingProgress * 49.0;
-  React.useEffect(function () {
-    var _a;
-    (_a = onLoadingStartedRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadingStartedRef);
-  }, []);
-  React.useEffect(function () {
-    var _a;
-    if (modelLoadProgress > 0) {
-      (_a = onLoadingProgressRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadingProgressRef, modelLoadProgress);
-    }
-  }, [modelLoadProgress]);
+  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, {
@@ -7492,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,
@@ -7540,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 : modelLoadState === 'downloading' ? "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)") : modelLoadState === 'warming' ? verbiage.modelsWarmingUpText : verbiage.modelsReadyText))), /*#__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,
@@ -7563,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';
@@ -7572,20 +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  background: ", ";\n"], ["\n  animation: ", " 3s ease-in-out;\n  animation-fill-mode: both;\n  background: ", ";\n"])), progressBarAnimation, 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 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 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) {
@@ -7604,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"])));
@@ -7855,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;
@@ -8547,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) {
@@ -8560,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;
@@ -9432,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,
@@ -9710,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(),
@@ -10071,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"])));
@@ -10352,7 +10371,7 @@ 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;
@@ -12439,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,
@@ -12465,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, {
@@ -12493,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];
@@ -12513,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, {
@@ -12528,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
@@ -12541,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
@@ -12559,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,
@@ -12599,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) {
@@ -12620,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,
@@ -12637,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,
@@ -12904,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
@@ -13992,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,
@@ -14144,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,
@@ -15089,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,
@@ -15246,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
@@ -15270,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, {
@@ -16073,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,
@@ -16109,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,
@@ -16122,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
@@ -16245,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,
@@ -16289,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,
@@ -16316,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,
@@ -16336,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,
@@ -16512,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,
@@ -16558,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,
@@ -16585,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,
@@ -16604,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,
@@ -17019,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,
@@ -17149,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;
             });
           }
@@ -17164,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');
     }
   }));
 };
@@ -17208,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,
@@ -17276,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,
@@ -17589,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,
@@ -17734,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');
@@ -17771,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,
@@ -17844,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,
@@ -17875,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,
@@ -17954,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,
@@ -17972,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])
   })))));
 };
 
@@ -18010,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,
@@ -18094,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,
@@ -18126,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,
@@ -18249,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,
@@ -18291,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,
@@ -18306,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,