idmission-web-sdk 0.0.71 → 0.0.73

package/dist/sdk2.cjs.development.js

@@ -652,7 +652,7 @@ var SubmissionProvider = function SubmissionProvider(_a) {
               statusMessage: err.message
             }));
             onRequestFailure === null || onRequestFailure === void 0 ? void 0 : onRequestFailure(err);
-            return [2, null];
+            throw err;
           case 9:
             return [2];
         }
@@ -719,7 +719,7 @@ var SubmissionProvider = function SubmissionProvider(_a) {
               statusMessage: err.message
             }));
             onRequestFailure === null || onRequestFailure === void 0 ? void 0 : onRequestFailure(err);
-            return [2, null];
+            throw err;
           case 7:
             return [2];
         }
@@ -8495,6 +8495,165 @@ var templateObject_1$7, templateObject_2$3, templateObject_3$2, templateObject_4
 var ExitCaptureButton = styled__default['default'].button(templateObject_1$6 || (templateObject_1$6 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n\n  &:hover {\n    background: #ddd;\n  }\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n\n  &:hover {\n    background: #ddd;\n  }\n"])));
 var templateObject_1$6;
 
+var Spinner = styled__default['default'].div(templateObject_1$5 || (templateObject_1$5 = tslib.__makeTemplateObject(["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (_a) {
+  var $size = _a.$size;
+  return $size !== null && $size !== void 0 ? $size : 80;
+}, function (_a) {
+  var $size = _a.$size;
+  return $size !== null && $size !== void 0 ? $size : 80;
+}, function (_a) {
+  var $size = _a.$size;
+  return ($size !== null && $size !== void 0 ? $size : 80) - 16;
+}, function (_a) {
+  var $size = _a.$size;
+  return ($size !== null && $size !== void 0 ? $size : 80) - 16;
+}, function (_a) {
+  var $thickness = _a.$thickness;
+  return $thickness !== null && $thickness !== void 0 ? $thickness : 6;
+}, function (_a) {
+  var $color = _a.$color;
+  return $color !== null && $color !== void 0 ? $color : '#888';
+}, function (_a) {
+  var $color = _a.$color;
+  return $color !== null && $color !== void 0 ? $color : '#888';
+}, function (_a) {
+  var $color = _a.$color;
+  return $color !== null && $color !== void 0 ? $color : '#888';
+});
+var templateObject_1$5;
+
+var IdCaptureImagePreview = function IdCaptureImagePreview(_a) {
+  var text = _a.text,
+    imageUrl = _a.imageUrl;
+  return /*#__PURE__*/React__default['default'].createElement(ImagePreviewWrapper, null, text && /*#__PURE__*/React__default['default'].createElement(ImagePreviewText, null, text), /*#__PURE__*/React__default['default'].createElement(ImagePreviewImageWrapper, null, /*#__PURE__*/React__default['default'].createElement("img", {
+    src: imageUrl,
+    alt: ""
+  })));
+};
+var SelfieProgressPreview = function SelfieProgressPreview(_a) {
+  var imageUrl = _a.imageUrl;
+  return /*#__PURE__*/React__default['default'].createElement(ImagePreviewWrapper, null, /*#__PURE__*/React__default['default'].createElement(ImagePreviewText, null, /*#__PURE__*/React__default['default'].createElement(Spinner, {
+    "$size": 24,
+    "$color": "white",
+    "$thickness": 3,
+    style: {
+      position: 'relative',
+      top: 4,
+      left: -3,
+      margin: '0 3px 0 -12px'
+    }
+  }), "Processing..."), /*#__PURE__*/React__default['default'].createElement(ImagePreviewImageWrapper, null, /*#__PURE__*/React__default['default'].createElement("img", {
+    src: imageUrl,
+    alt: ""
+  })));
+};
+var ImagePreviewWrapper = styled__default['default'].div(templateObject_1$4 || (templateObject_1$4 = tslib.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"], ["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"])));
+var ImagePreviewText = styled__default['default'].div(templateObject_2$2 || (templateObject_2$2 = tslib.__makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"], ["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"])));
+var ImagePreviewImageWrapper = styled__default['default'].div(templateObject_3$1 || (templateObject_3$1 = tslib.__makeTemplateObject(["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"], ["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"])));
+var templateObject_1$4, templateObject_2$2, templateObject_3$1;
+
+var enTranslation = {};
+
+var esTranslation = {
+  'Use your device camera to capture your ID': 'Para capturar la identificación hay que utilizar la cámara del dispositivo.',
+  'Use your iPhone as a webcam': 'Usar el iPhone como cámara web',
+  'Models warming up...': 'Cargando modelos...',
+  'Camera initializing...': 'Inicializando la cámara...',
+  'Camera access blocked': 'Acceso bloqueado a la cámara',
+  'Location access blocked': 'Acceso bloqueado a la localización',
+  Continue: 'Continuar',
+  'Your camera permission is disabled': 'El permiso de la cámara está desactivado',
+  'This application requires access to your camera to continue. Please accept the permission once prompted by the browser. If the browser does not prompt for camera permissions, you must go to settings and provide camera access to the current browser.': 'Esta aplicación requiere el acceso a la cámara para continuar. Hay que aceptar el permiso una vez que se muestre la ventana en el explorador. Si no aparece la ventana para otorgar permisos, entonces hay que dirigirse a Configuración y otorgar el permiso a la cámara en el explorador actual.',
+  'Your location permission is disabled': 'El permiso de la localización está desactivado',
+  'This application requires access to your location to continue. Please accept the permission once prompted by the browser. If the browser does not prompt for location permissions, you must go to settings and provide location access to the current browser.': 'Esta aplicación requiere el acceso a la localización para continuar. Hay que aceptar el permiso una vez que se muestre la ventana en el explorador. Si no aparece la ventana para otorgar permisos, entonces hay que dirigirse a Configuración y otorgar el permiso a la localización en el explorador actual.',
+  Retry: 'Reintentar',
+  'Scan the front of ID': 'Escanear el frente de la ID',
+  'Scan the back of ID': 'Escanear el reverso de la ID',
+  'Scan the ID page of passport': 'Escanear la página de datos del pasaporte',
+  'ID Card Front': 'Frente de la ID',
+  'ID Card Back': 'Reverso de la ID',
+  Passport: 'Pasaporte',
+  'Capturing...': 'Capturando...',
+  'Capture failed!': 'Falló la captura',
+  'Please flip your ID card...': 'Por favor voltea la identificación...',
+  'ID card front captured.': '',
+  'ID Capture Successful': 'Captura Exitosa de ID',
+  'Verify the entire ID was captured clearly with no glare.': 'Hay que verificar que toda la ID se vea completa y sin reflejos.',
+  Submit: 'Enviar',
+  'Submitting...': 'Enviando...',
+  'Use your device camera to capture your face': 'Hay que utilizar la cámara del dispositivo para capturar el rostro',
+  'Remove Sunglasses & Hat': 'Hay que quitarse lentes y/o la gorra',
+  'Avoid Excessive Backlighting': 'Hay que evitar demasiada luz en el fondo',
+  'Hold still for a few seconds...': 'Hay que permanecer quieto por unos segundos...',
+  'Look straight into the camera...': 'Hay que mirar directamente a la cámara...',
+  'Move back...': 'Hay que hacerse hacia atrás..',
+  'Move forward...': 'Hay que hacerse hacia adelante...',
+  'Move to the center...': 'Hay que moverse hacia el centro...',
+  'Please remove your eye coverings (sunglasses, eye patch, etc.)...': 'Hay que quitarse lo que cubre los ojos (lentes, parche, etc.)...',
+  'Please remove your head coverings (hat, scarf, etc.)...': 'Hay que quitarse lo que cubre la cabeza (gorra, mascada, etc.)...',
+  'Please remove your mask...': 'Hay que quitarse el cubrebocas...',
+  'Live face not detected, please try again': 'Rostro vivo no detectado. Por favor hay que intentar de nuevo.',
+  Exit: 'Salir',
+  'Face liveness has been verified!': 'Se ha verificado la Prueba de Vida en rostro!',
+  Done: 'Terminar',
+  'Customer has been identified!': '¡Se ha identificado al cliente!',
+  'Customer not found': 'Cliente no encontrado',
+  'Additional document capture': 'Captura de otro documento',
+  Next: 'Siguiente',
+  'Please sign the box below': 'Por favor, hay que firmar en el recuadro de abajo',
+  Accept: 'Aceptar',
+  Clear: 'Borrar',
+  'Video signature has been successfully captured!': 'La video firma ha sido exitosa.'
+};
+
+var resources = {
+  en: {
+    translation: enTranslation
+  },
+  es: {
+    translation: esTranslation
+  }
+};
+var useLanguage = function useLanguage(lang) {
+  var i18n = reactI18next.useTranslation().i18n;
+  React.useEffect(function () {
+    if (lang !== 'auto') {
+      i18n.changeLanguage(lang);
+    } else {
+      i18n.changeLanguage();
+    }
+  }, [i18n, lang]);
+};
+function evaluateVerbiage(t, currentLanguage, verbiage, fallback) {
+  if (typeof verbiage === 'string') return verbiage;
+  if (typeof verbiage === 'object') {
+    var translations = verbiage;
+    if (translations[currentLanguage]) return translations[currentLanguage];
+    var nonLocaleLang = currentLanguage.split('-')[0];
+    if (translations[nonLocaleLang]) return translations[nonLocaleLang];
+  }
+  return t(fallback);
+}
+function useVerbiage(verbiage, fallback) {
+  var _a = reactI18next.useTranslation(),
+    t = _a.t,
+    i18n = _a.i18n;
+  return React.useMemo(function () {
+    return evaluateVerbiage(t, i18n.language, verbiage, fallback);
+  }, [fallback, i18n.language, t, verbiage]);
+}
+function useTranslations(verbiage, fallbacks) {
+  var _a = reactI18next.useTranslation(),
+    t = _a.t,
+    i18n = _a.i18n;
+  return React.useMemo(function () {
+    return tslib.__assign(tslib.__assign({}, verbiage), Object.keys(fallbacks).reduce(function (result, key) {
+      var _a;
+      return tslib.__assign(tslib.__assign({}, result), (_a = {}, _a[key] = evaluateVerbiage(t, i18n.language, verbiage === null || verbiage === void 0 ? void 0 : verbiage[key], fallbacks[key]), _a));
+    }, {}));
+  }, [fallbacks, i18n.language, t, verbiage]);
+}
+
 var initialState$5 = {
   videoWidth: 0,
   videoHeight: 0,
@@ -8694,7 +8853,7 @@ var IdCapture = function IdCapture(_a) {
     _u = _a.colors,
     colors = _u === void 0 ? {} : _u,
     _v = _a.verbiage,
-    verbiage = _v === void 0 ? {} : _v,
+    rawVerbiage = _v === void 0 ? {} : _v,
     _w = _a.debugMode,
     debugMode = _w === void 0 ? false : _w;
   var _x = useResizeObserver__default['default'](),
@@ -8718,7 +8877,6 @@ var IdCapture = function IdCapture(_a) {
     takePhoto = _3.takePhoto,
     videoRef = _3.videoRef,
     videoLoaded = _3.videoLoaded;
-  var t = reactI18next.useTranslation().t;
   var captureStartedAt = React.useRef();
   var _4 = React.useContext(IdCaptureModelsContext),
     modelsReady = _4.ready,
@@ -8915,6 +9073,14 @@ var IdCapture = function IdCapture(_a) {
       });
     })();
   }, [getBestFrame, onCapture, processingDelay, shouldCapture, state.barcodeResult]);
+  colors.guideBoxUnsatisfiedColor || (colors.guideBoxUnsatisfiedColor = 'white');
+  colors.guideBoxSatisfiedColor || (colors.guideBoxSatisfiedColor = 'green');
+  var verbiage = useTranslations(rawVerbiage, {
+    instructionText: 'Scan the front of ID',
+    processingIdCardText: 'ID card front captured.',
+    capturingText: 'Capturing...',
+    captureFailedText: 'Capture failed!'
+  });
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
     pageWidth: width,
@@ -8923,7 +9089,10 @@ var IdCapture = function IdCapture(_a) {
     videoHeight: state.videoHeight
   });
   if (processingFrame) {
-    return processingScreen || /*#__PURE__*/React__default['default'].createElement("div", null, "Processing...");
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, processingScreen, imageURL && /*#__PURE__*/React__default['default'].createElement(IdCaptureImagePreview, {
+      text: verbiage.processingIdCardText,
+      imageUrl: imageURL
+    }));
   }
   if (imageURL !== '') {
     return /*#__PURE__*/React__default['default'].createElement("img", {
@@ -8935,11 +9104,6 @@ var IdCapture = function IdCapture(_a) {
       }
     });
   }
-  colors.guideBoxUnsatisfiedColor || (colors.guideBoxUnsatisfiedColor = 'white');
-  colors.guideBoxSatisfiedColor || (colors.guideBoxSatisfiedColor = 'green');
-  verbiage.instructionText || (verbiage.instructionText = t('Scan the front of ID'));
-  verbiage.capturingText || (verbiage.capturingText = t('Capturing...'));
-  verbiage.captureFailedText || (verbiage.captureFailedText = t('Capture failed!'));
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     ref: ref,
     className: "flex"
@@ -8977,16 +9141,17 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
     _e = _a.colors,
     colors = _e === void 0 ? {} : _e,
     _f = _a.verbiage,
-    verbiage = _f === void 0 ? {} : _f;
-  var t = reactI18next.useTranslation().t;
+    rawVerbiage = _f === void 0 ? {} : _f;
   var retryCameraAccess = React.useContext(CameraStateContext).retryCameraAccess;
   assets.imageUrl || (assets.imageUrl = DEFAULT_CDN_URL + '/camera-disable-icon.png');
   colors.retryBtn || (colors.retryBtn = {});
   (_b = colors.retryBtn).backgroundColor || (_b.backgroundColor = '#ea8557');
   (_c = colors.retryBtn).textColor || (_c.textColor = 'white');
-  verbiage.headingText || (verbiage.headingText = t('Your camera permission is disabled'));
-  verbiage.descriptionText || (verbiage.descriptionText = t('This application requires access to your camera to continue. ' + 'Please accept the permission once prompted by the browser. ' + 'If the browser does not prompt for camera permissions, you must go to settings ' + 'and provide camera access to the current browser.'));
-  verbiage.retryBtnText || (verbiage.retryBtnText = t('Retry'));
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: 'Your camera permission is disabled',
+    descriptionText: 'This application requires access to your camera to continue. ' + 'Please accept the permission once prompted by the browser. ' + 'If the browser does not prompt for camera permissions, you must go to settings ' + 'and provide camera access to the current browser.',
+    retryBtnText: 'Retry'
+  });
   return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       display: 'flex',
@@ -9029,8 +9194,7 @@ var IdCaptureLoadingOverlay = function IdCaptureLoadingOverlay(_a) {
     _c = _a.colors,
     colors = _c === void 0 ? {} : _c,
     _d = _a.verbiage,
-    verbiage = _d === void 0 ? {} : _d;
-  var t = reactI18next.useTranslation().t;
+    rawVerbiage = _d === void 0 ? {} : _d;
   var modelsReady = React.useContext(IdCaptureModelsContext).ready;
   var _e = React.useContext(CameraStateContext),
     cameraReady = _e.cameraReady,
@@ -9041,11 +9205,13 @@ var IdCaptureLoadingOverlay = function IdCaptureLoadingOverlay(_a) {
     dismissed = _f[0],
     setDismissed = _f[1];
   assets.instructionImageUrl || (assets.instructionImageUrl = "".concat(DEFAULT_CDN_URL, "/WebSDK-Instruction-DL-Capture-3-Portrait.png"));
-  verbiage.headingText || (verbiage.headingText = t('Use your device camera to capture your ID'));
-  verbiage.useContinuityCameraText || (verbiage.useContinuityCameraText = t('Use your iPhone as a webcam'));
-  verbiage.modelsWarmingUpText || (verbiage.modelsWarmingUpText = t('Models warming up...'));
-  verbiage.cameraInitializingText || (verbiage.cameraInitializingText = t('Camera initializing...'));
-  verbiage.continueText || (verbiage.continueText = t('Continue'));
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: 'Use your device camera to capture your ID',
+    useContinuityCameraText: 'Use your iPhone as a webcam',
+    modelsWarmingUpText: 'Models warming up...',
+    cameraInitializingText: 'Camera initializing...',
+    continueText: 'Continue'
+  });
   React.useEffect(function () {
     if (modelsReady && cameraReady) return function () {
       return null;
@@ -9062,7 +9228,7 @@ var IdCaptureLoadingOverlay = function IdCaptureLoadingOverlay(_a) {
     return /*#__PURE__*/React__default['default'].createElement(CameraAccessDeniedOverlay, {
       assets: assets.cameraAccessDenied,
       colors: colors.cameraAccessDenied,
-      verbiage: verbiage.cameraAccessDenied
+      verbiage: rawVerbiage.cameraAccessDenied
     });
   }
   return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("h3", null, verbiage.headingText), /*#__PURE__*/React__default['default'].createElement(OverlayImageWrapper, {
@@ -9110,7 +9276,6 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
     assets = _c === void 0 ? {} : _c,
     _d = _a.verbiage,
     verbiage = _d === void 0 ? {} : _d;
-  var t = reactI18next.useTranslation().t;
   var _e = useResizeObserver__default['default'](),
     ref = _e.ref,
     _f = _e.width,
@@ -9118,11 +9283,11 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
     _g = _e.height,
     height = _g === void 0 ? 1 : _g;
   var cameraRef = React.useContext(CameraStateContext).cameraRef;
-  verbiage.instructionText || (verbiage.instructionText = t('Please flip your ID card...'));
   assets.frontPortraitGuidesImageUrl || (assets.frontPortraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Portrait-2.svg"));
   assets.frontLandscapeGuidesImageUrl || (assets.frontLandscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
   assets.backPortraitGuidesImageUrl || (assets.backPortraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Portrait-2.svg"));
   assets.backLandscapeGuidesImageUrl || (assets.backLandscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
+  var instructionText = useVerbiage(verbiage.instructionText, 'Please flip your ID card...');
   var padding = isMobile() ? 0 : 50;
   var borderWidth = 4;
   var borderColor = 'white';
@@ -9210,7 +9375,7 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
       marginTop: 12,
       marginBottom: 12
     }
-  }, verbiage.instructionText)), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, instructionText)), /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       position: 'relative',
       display: 'flex',
@@ -9292,7 +9457,7 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
       marginBottom: 12,
       opacity: 0
     }
-  }, verbiage.instructionText)))));
+  }, instructionText)))));
 };
 
 var IdCaptureSuccess = function IdCaptureSuccess(_a) {
@@ -9303,23 +9468,24 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
     _d = _a.colors,
     colors = _d === void 0 ? {} : _d,
     _e = _a.verbiage,
-    verbiage = _e === void 0 ? {} : _e;
+    rawVerbiage = _e === void 0 ? {} : _e;
   var submissionStatus = React.useContext(SubmissionContext).submissionStatus;
-  var t = reactI18next.useTranslation().t;
   var idCardFront = capturedDocuments['ID_CARD_FRONT'];
   var idCardBack = capturedDocuments['ID_CARD_BACK'];
   var passport = capturedDocuments['PASSPORT'];
   colors.retryBtn || (colors.retryBtn = {});
   (_b = colors.retryBtn).backgroundColor || (_b.backgroundColor = '#ea8557');
   (_c = colors.retryBtn).textColor || (_c.textColor = 'white');
-  verbiage.headingText || (verbiage.headingText = t('ID Capture Successful'));
-  verbiage.idCardFrontText || (verbiage.idCardFrontText = t('ID Card Front'));
-  verbiage.idCardBackText || (verbiage.idCardBackText = t('ID Card Back'));
-  verbiage.passportText || (verbiage.passportText = t('Passport'));
-  verbiage.instructionText || (verbiage.instructionText = t('Verify the entire ID was captured clearly with no glare.'));
-  verbiage.retryText || (verbiage.retryText = t('Retry'));
-  verbiage.submittingText || (verbiage.submittingText = t('Submitting...'));
-  verbiage.submitText || (verbiage.submitText = t('Done'));
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: 'ID Capture Successful',
+    idCardFrontText: 'ID Card Front',
+    idCardBackText: 'ID Card Back',
+    passportText: 'Passport',
+    instructionText: 'Verify the entire ID was captured clearly with no glare.',
+    retryText: 'Retry',
+    submittingText: 'Submitting...',
+    submitText: 'Done'
+  });
   return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("h1", null, verbiage.headingText), /*#__PURE__*/React__default['default'].createElement(OverlayImageWrapper, null, /*#__PURE__*/React__default['default'].createElement(OverlayImageMultiContainer, {
     style: {
       paddingBottom: 40
@@ -9390,10 +9556,10 @@ var CameraVideoTag = function CameraVideoTag() {
     "$isRearFacing": (_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing
   });
 };
-var FullscreenVideoTag = styled__default['default'].video(templateObject_1$5 || (templateObject_1$5 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
+var FullscreenVideoTag = styled__default['default'].video(templateObject_1$3 || (templateObject_1$3 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
   return props.$isRearFacing ? '' : 'scaleX(-1)';
 });
-var templateObject_1$5;
+var templateObject_1$3;
 
 function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
   var _this = this;
@@ -9484,52 +9650,51 @@ var reducer$4 = function reducer(state, action) {
   }
 };
 var IdCaptureWizard = function IdCaptureWizard(_a) {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   var onSuccess = _a.onSuccess,
-    _q = _a.autoCaptureEnabled,
-    autoCaptureEnabled = _q === void 0 ? true : _q,
-    _r = _a.autoCaptureGoodFramesRequired,
-    autoCaptureGoodFramesRequired = _r === void 0 ? 3 : _r,
-    _s = _a.autoCaptureBarcodeRequired,
-    autoCaptureBarcodeRequired = _s === void 0 ? 'mobile' : _s,
-    _t = _a.barcodeScanningEnabled,
-    barcodeScanningEnabled = _t === void 0 ? false : _t,
-    _u = _a.idCardAutoCaptureScoreThreshold,
-    idCardAutoCaptureScoreThreshold = _u === void 0 ? 0.9 : _u,
-    _v = _a.passportAutoCaptureScoreThreshold,
-    passportAutoCaptureScoreThreshold = _v === void 0 ? 0.85 : _v,
-    _w = _a.mrzDetectionScoreThreshold,
-    mrzDetectionScoreThreshold = _w === void 0 ? 0.25 : _w,
-    _x = _a.idCardFocusScoreThreshold,
-    idCardFocusScoreThreshold = _x === void 0 ? 0.3 : _x,
-    _y = _a.passportFocusScoreThreshold,
-    passportFocusScoreThreshold = _y === void 0 ? 0.3 : _y,
-    _z = _a.skipSuccessScreen,
-    skipSuccessScreen = _z === void 0 ? false : _z,
-    _0 = _a.assets,
-    assets = _0 === void 0 ? {} : _0,
-    _1 = _a.colors,
-    colors = _1 === void 0 ? {} : _1,
-    _2 = _a.verbiage,
-    verbiage = _2 === void 0 ? {} : _2,
-    _3 = _a.debugMode,
-    debugMode = _3 === void 0 ? false : _3;
-  var _4 = React.useReducer(reducer$4, initialState$4),
-    state = _4[0],
-    dispatch = _4[1];
+    _m = _a.autoCaptureEnabled,
+    autoCaptureEnabled = _m === void 0 ? true : _m,
+    _o = _a.autoCaptureGoodFramesRequired,
+    autoCaptureGoodFramesRequired = _o === void 0 ? 3 : _o,
+    _p = _a.autoCaptureBarcodeRequired,
+    autoCaptureBarcodeRequired = _p === void 0 ? 'mobile' : _p,
+    _q = _a.barcodeScanningEnabled,
+    barcodeScanningEnabled = _q === void 0 ? false : _q,
+    _r = _a.idCardAutoCaptureScoreThreshold,
+    idCardAutoCaptureScoreThreshold = _r === void 0 ? 0.9 : _r,
+    _s = _a.passportAutoCaptureScoreThreshold,
+    passportAutoCaptureScoreThreshold = _s === void 0 ? 0.85 : _s,
+    _t = _a.mrzDetectionScoreThreshold,
+    mrzDetectionScoreThreshold = _t === void 0 ? 0.25 : _t,
+    _u = _a.idCardFocusScoreThreshold,
+    idCardFocusScoreThreshold = _u === void 0 ? 0.3 : _u,
+    _v = _a.passportFocusScoreThreshold,
+    passportFocusScoreThreshold = _v === void 0 ? 0.3 : _v,
+    _w = _a.skipSuccessScreen,
+    skipSuccessScreen = _w === void 0 ? false : _w,
+    _x = _a.assets,
+    assets = _x === void 0 ? {} : _x,
+    _y = _a.colors,
+    colors = _y === void 0 ? {} : _y,
+    _z = _a.verbiage,
+    verbiage = _z === void 0 ? {} : _z,
+    _0 = _a.debugMode,
+    debugMode = _0 === void 0 ? false : _0;
+  var _1 = React.useReducer(reducer$4, initialState$4),
+    state = _1[0],
+    dispatch = _1[1];
   var releaseCameraAccess = React.useContext(CameraStateContext).releaseCameraAccess;
-  var _5 = React.useState(false),
-    overlayDismissed = _5[0],
-    setOverlayDismissed = _5[1];
-  var _6 = React.useContext(SubmissionContext),
-    submissionStatus = _6.submissionStatus,
-    submissionResponse = _6.submissionResponse,
-    setIdFrontImage = _6.setIdFrontImage,
-    setIdBackImage = _6.setIdBackImage,
-    setPassportImage = _6.setPassportImage,
-    logIdFrontCaptureAttempt = _6.logIdFrontCaptureAttempt,
-    logIdBackCaptureAttempt = _6.logIdBackCaptureAttempt;
-  var t = reactI18next.useTranslation().t;
+  var _2 = React.useState(false),
+    overlayDismissed = _2[0],
+    setOverlayDismissed = _2[1];
+  var _3 = React.useContext(SubmissionContext),
+    submissionStatus = _3.submissionStatus,
+    submissionResponse = _3.submissionResponse,
+    setIdFrontImage = _3.setIdFrontImage,
+    setIdBackImage = _3.setIdBackImage,
+    setPassportImage = _3.setPassportImage,
+    logIdFrontCaptureAttempt = _3.logIdFrontCaptureAttempt,
+    logIdBackCaptureAttempt = _3.logIdBackCaptureAttempt;
   var operationStartedAt = React.useRef();
   React.useEffect(function () {
     operationStartedAt.current = new Date();
@@ -9621,9 +9786,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
       type: 'reset'
     });
   }, []);
-  var _7 = React.useState(0),
-    attempt = _7[0],
-    setAttempt = _7[1];
+  var _4 = React.useState(0),
+    attempt = _4[0],
+    setAttempt = _4[1];
   var onExit = React.useCallback(function () {
     setOverlayDismissed(false);
     setAttempt(function (n) {
@@ -9652,12 +9817,16 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
   (_j = assets.flipIdPrompt).frontLandscapeGuidesImageUrl || (_j.frontLandscapeGuidesImageUrl = assets.idCardFront.landscapeGuidesImageUrl);
   (_k = assets.flipIdPrompt).backPortraitGuidesImageUrl || (_k.backPortraitGuidesImageUrl = assets.idCardBack.portraitGuidesImageUrl);
   (_l = assets.flipIdPrompt).backLandscapeGuidesImageUrl || (_l.backLandscapeGuidesImageUrl = assets.idCardBack.landscapeGuidesImageUrl);
-  verbiage.idCardFront || (verbiage.idCardFront = {});
-  (_m = verbiage.idCardFront).instructionText || (_m.instructionText = t('Scan the front of ID'));
-  verbiage.idCardBack || (verbiage.idCardBack = {});
-  (_o = verbiage.idCardBack).instructionText || (_o.instructionText = t('Scan the back of ID'));
-  verbiage.passport || (verbiage.passport = {});
-  (_p = verbiage.passport).instructionText || (_p.instructionText = t('Scan the ID page of passport'));
+  var idCardFrontVerbiage = useTranslations(verbiage.idCardFront, {
+    instructionText: 'Scan the front of ID',
+    processingIdCardText: 'ID card front captured.'
+  });
+  var idCardBackVerbiage = useTranslations(verbiage.idCardBack, {
+    instructionText: 'Scan the back of ID'
+  });
+  var passportVerbiage = useTranslations(verbiage.idCardBack, {
+    instructionText: 'Scan the ID page of passport'
+  });
   if (submissionResponse) {
     return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
       className: "padded"
@@ -9685,7 +9854,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
           processingDelay: 3500,
           assets: assets.idCardFront,
           colors: colors,
-          verbiage: verbiage.idCardFront,
+          verbiage: idCardFrontVerbiage,
           debugMode: debugMode,
           processingScreen: /*#__PURE__*/React__default['default'].createElement(FlipIdPrompt, {
             assets: assets.flipIdPrompt,
@@ -9709,7 +9878,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
           onExit: onExit,
           assets: assets.idCardBack,
           colors: colors,
-          verbiage: verbiage.idCardBack,
+          verbiage: idCardBackVerbiage,
           debugMode: debugMode
         });
       case DocumentType.PASSPORT:
@@ -9729,7 +9898,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
           onExit: onExit,
           assets: assets.passport,
           colors: colors,
-          verbiage: verbiage.passport,
+          verbiage: passportVerbiage,
           debugMode: debugMode
         });
       default:
@@ -9738,6 +9907,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
   }(), !overlayDismissed && /*#__PURE__*/React__default['default'].createElement(IdCaptureLoadingOverlay, {
     key: attempt,
     assets: assets.loadingOverlay,
+    colors: colors.loadingOverlay,
     verbiage: verbiage.loadingOverlay,
     onDismissed: function onDismissed() {
       setOverlayDismissed(true);
@@ -9747,6 +9917,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     barcodeResult: state.barcodeResult,
     onSubmitClick: onSubmitClick,
     onRetryClick: onRetryClick,
+    colors: colors.success,
     verbiage: verbiage.success
   }));
 };
@@ -10039,18 +10210,18 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
   }) : children);
 };
 
-var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$4 || (templateObject_1$4 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
+var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
   var $top = _a.$top;
   return $top !== null && $top !== void 0 ? $top : '10vh';
 });
-var GuidanceMessage = styled__default['default'].div(templateObject_2$2 || (templateObject_2$2 = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"])), function (_a) {
+var GuidanceMessage = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"])), function (_a) {
   var $background = _a.$background;
   return $background !== null && $background !== void 0 ? $background : '#ccc';
 }, function (_a) {
   var $textColor = _a.$textColor;
   return $textColor !== null && $textColor !== void 0 ? $textColor : 'black';
 });
-var templateObject_1$4, templateObject_2$2;
+var templateObject_1$2, templateObject_2$1;
 
 var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger) {
   var _a = React.useState(false),
@@ -10191,26 +10362,27 @@ var SelfieCapture = function SelfieCapture(_a) {
     _e = _a.timeoutDurationMs,
     timeoutDurationMs = _e === void 0 ? 15000 : _e,
     guidanceMessage = _a.guidanceMessage,
+    guidanceSatisfied = _a.guidanceSatisfied,
     _f = _a.colors,
     colors = _f === void 0 ? {} : _f,
     _g = _a.verbiage,
-    verbiage = _g === void 0 ? {} : _g,
-    debugMode = _a.debugMode;
-  var t = reactI18next.useTranslation().t;
-  var _h = useResizeObserver__default['default'](),
-    ref = _h.ref,
-    _j = _h.width,
-    width = _j === void 0 ? 1 : _j,
-    _k = _h.height,
-    height = _k === void 0 ? 1 : _k;
-  var _l = React.useReducer(reducer$3, initialState$3),
-    state = _l[0],
-    dispatch = _l[1];
-  var _m = React.useContext(CameraStateContext),
-    cameraRef = _m.cameraRef,
-    cameraReady = _m.cameraReady,
-    takePhoto = _m.takePhoto,
-    videoRef = _m.videoRef;
+    rawVerbiage = _g === void 0 ? {} : _g,
+    _h = _a.debugMode,
+    debugMode = _h === void 0 ? false : _h;
+  var _j = useResizeObserver__default['default'](),
+    ref = _j.ref,
+    _k = _j.width,
+    width = _k === void 0 ? 1 : _k,
+    _l = _j.height,
+    height = _l === void 0 ? 1 : _l;
+  var _m = React.useReducer(reducer$3, initialState$3),
+    state = _m[0],
+    dispatch = _m[1];
+  var _o = React.useContext(CameraStateContext),
+    cameraRef = _o.cameraRef,
+    cameraReady = _o.cameraReady,
+    takePhoto = _o.takePhoto,
+    videoRef = _o.videoRef;
   var onPredictionMade = React.useContext(HighPerformanceSelfieGuidanceModelsContext).onPredictionMade;
   React.useEffect(function () {
     if (cameraReady && videoRef.current && videoRef.current.videoWidth !== 0) {
@@ -10233,9 +10405,9 @@ var SelfieCapture = function SelfieCapture(_a) {
       });
     });
   }, [onPredictionMade]);
-  var _o = React.useState(false),
-    captureReady = _o[0],
-    setCaptureReady = _o[1];
+  var _p = React.useState(false),
+    captureReady = _p[0],
+    setCaptureReady = _p[1];
   React.useEffect(function () {
     var timer;
     if (state.faceReady) {
@@ -10279,9 +10451,9 @@ var SelfieCapture = function SelfieCapture(_a) {
       });
     })();
   }, [captureReady, onSelfieCaptured, state.faces, takePhoto]);
-  var _p = useTimeout(timeoutDurationMs, onTimeout),
-    timedOut = _p.timedOut,
-    timeoutStartedAt = _p.timeoutStartedAt;
+  var _q = useTimeout(timeoutDurationMs, onTimeout),
+    timedOut = _q.timedOut,
+    timeoutStartedAt = _q.timeoutStartedAt;
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
     pageWidth: width,
@@ -10295,22 +10467,24 @@ var SelfieCapture = function SelfieCapture(_a) {
   colors.guidanceMessagesSatisfiedBackgroundColor || (colors.guidanceMessagesSatisfiedBackgroundColor = 'green');
   colors.guidanceMessagesUnsatisfiedTextColor || (colors.guidanceMessagesUnsatisfiedTextColor = 'white');
   colors.guidanceMessagesSatisfiedTextColor || (colors.guidanceMessagesSatisfiedTextColor = 'white');
-  if (!guidanceMessage) {
-    verbiage.guidanceHoldStillText || (verbiage.guidanceHoldStillText = t('Hold still for a few seconds...'));
-    verbiage.guidanceLookStraightText || (verbiage.guidanceLookStraightText = t('Look straight into the camera...'));
-    verbiage.guidanceMoveBackText || (verbiage.guidanceMoveBackText = t('Move back...'));
-    verbiage.guidanceMoveForwardText || (verbiage.guidanceMoveForwardText = t('Move forward...'));
-    verbiage.guidanceMoveToCenterText || (verbiage.guidanceMoveToCenterText = t('Move to the center...'));
-    guidanceMessage = state.faceReady ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : '';
-  }
+  var verbiage = useTranslations(rawVerbiage, {
+    guidanceHoldStillText: 'Hold still for a few seconds...',
+    guidanceLookStraightText: 'Look straight into the camera...',
+    guidanceMoveBackText: 'Move back...',
+    guidanceMoveForwardText: 'Move forward...',
+    guidanceMoveToCenterText: 'Move to the center...'
+  });
+  guidanceMessage || (guidanceMessage = state.faceReady ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : '');
+  var satisfied = state.faceReady;
+  if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     ref: ref,
     className: "flex"
   }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), /*#__PURE__*/React__default['default'].createElement(FaceCaptureGuideOverlay, {
-    borderColor: state.faceReady ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
+    borderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
   }), guidanceMessage !== '' && /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, null, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, {
-    "$background": state.faceReady ? colors.guidanceMessagesSatisfiedBackgroundColor : colors.guidanceMessagesUnsatisfiedBackgroundColor,
-    "$textColor": state.faceReady ? colors.guidanceMessagesSatisfiedTextColor : colors.guidanceMessagesUnsatisfiedTextColor
+    "$background": satisfied ? colors.guidanceMessagesSatisfiedBackgroundColor : colors.guidanceMessagesUnsatisfiedBackgroundColor,
+    "$textColor": satisfied ? colors.guidanceMessagesSatisfiedTextColor : colors.guidanceMessagesUnsatisfiedTextColor
   }, guidanceMessage)), debugMode && state.faces.length > 0 && /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlay, {
     "$flipX": !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing)
   }, state.faces.map(function (face, i) {
@@ -10320,62 +10494,13 @@ var SelfieCapture = function SelfieCapture(_a) {
       face: face,
       scaling: debugScalingDetails,
       flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing),
-      color: state.faceReady ? 'green' : 'red'
+      color: satisfied ? 'green' : 'red'
     });
   })), debugMode && /*#__PURE__*/React__default['default'].createElement(DebugStatsPane, null, cameraRef.current ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u2705 Camera: ", (_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.width, "x", (_d = cameraRef.current) === null || _d === void 0 ? void 0 : _d.height) : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), !state.faceNotCentered ? '✅' : '❌', " Face Centered", /*#__PURE__*/React__default['default'].createElement("br", null), !state.faceTooClose && !state.faceTooFar ? '✅' : '❌', " Face", ' ', state.faceTooClose ? 'Too Close' : state.faceTooFar ? 'Too Far' : 'Distance Correct', /*#__PURE__*/React__default['default'].createElement("br", null), !state.faceLookingAway ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React__default['default'].createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " ", state.goodFramesCount, ' ', "Good Frames", /*#__PURE__*/React__default['default'].createElement("br", null), !timedOut ? '✅' : '❌', " Time Remaining:", ' ', Math.max(0, timeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())), "ms"), /*#__PURE__*/React__default['default'].createElement(ExitCaptureButton, {
     onClick: onExit
   }, "\xD7"));
 };
 
-var Spinner = styled__default['default'].div(templateObject_1$3 || (templateObject_1$3 = tslib.__makeTemplateObject(["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (_a) {
-  var $size = _a.$size;
-  return $size !== null && $size !== void 0 ? $size : 80;
-}, function (_a) {
-  var $size = _a.$size;
-  return $size !== null && $size !== void 0 ? $size : 80;
-}, function (_a) {
-  var $size = _a.$size;
-  return ($size !== null && $size !== void 0 ? $size : 80) - 16;
-}, function (_a) {
-  var $size = _a.$size;
-  return ($size !== null && $size !== void 0 ? $size : 80) - 16;
-}, function (_a) {
-  var $thickness = _a.$thickness;
-  return $thickness !== null && $thickness !== void 0 ? $thickness : 6;
-}, function (_a) {
-  var $color = _a.$color;
-  return $color !== null && $color !== void 0 ? $color : '#888';
-}, function (_a) {
-  var $color = _a.$color;
-  return $color !== null && $color !== void 0 ? $color : '#888';
-}, function (_a) {
-  var $color = _a.$color;
-  return $color !== null && $color !== void 0 ? $color : '#888';
-});
-var templateObject_1$3;
-
-var SelfieProgressPreview = function SelfieProgressPreview(_a) {
-  var imageUrl = _a.imageUrl;
-  return /*#__PURE__*/React__default['default'].createElement(SelfieProgressPreviewWrapper, null, /*#__PURE__*/React__default['default'].createElement(SelfieProgressText, null, /*#__PURE__*/React__default['default'].createElement(Spinner, {
-    "$size": 24,
-    "$color": "white",
-    "$thickness": 3,
-    style: {
-      position: 'relative',
-      top: 4,
-      left: -3,
-      margin: '0 3px 0 -12px'
-    }
-  }), "Processing..."), /*#__PURE__*/React__default['default'].createElement(SelfiePreviewImageWrapper, null, /*#__PURE__*/React__default['default'].createElement("img", {
-    src: imageUrl,
-    alt: ""
-  })));
-};
-var SelfieProgressPreviewWrapper = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"], ["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"])));
-var SelfieProgressText = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = tslib.__makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"], ["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"])));
-var SelfiePreviewImageWrapper = styled__default['default'].div(templateObject_3$1 || (templateObject_3$1 = tslib.__makeTemplateObject(["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"], ["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"])));
-var templateObject_1$2, templateObject_2$1, templateObject_3$1;
-
 var initialState$2 = {
   frame: null,
   face: null,
@@ -10467,9 +10592,8 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     _c = _a.colors,
     colors = _c === void 0 ? {} : _c,
     _d = _a.verbiage,
-    verbiage = _d === void 0 ? {} : _d,
+    rawVerbiage = _d === void 0 ? {} : _d,
     debugMode = _a.debugMode;
-  var t = reactI18next.useTranslation().t;
   var checkLiveness = React.useContext(SubmissionContext).checkLiveness;
   var _e = React.useReducer(reducer$2, initialState$2),
     state = _e[0],
@@ -10546,15 +10670,18 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     }
   }, [onTimeout, state.timesLivenessCheckFailed]);
   useTimeout(timeoutDurationMs, onTimeout, state.requestState === 'PASSED', state.requestState === 'IN_PROGRESS');
-  verbiage.guidanceRemoveEyeCoveringsText || (verbiage.guidanceRemoveEyeCoveringsText = t('Please remove your eye coverings (sunglasses, eye patch, etc.)...'));
-  verbiage.guidanceRemoveHeadCoveringsText || (verbiage.guidanceRemoveHeadCoveringsText = t('Please remove your head coverings (hat, scarf, etc.)...'));
-  verbiage.guidanceRemoveMaskText || (verbiage.guidanceRemoveMaskText = t('Please remove your mask...'));
+  var verbiage = useTranslations(rawVerbiage, {
+    guidanceRemoveEyeCoveringsText: 'Please remove your eye coverings (sunglasses, eye patch, etc.)...',
+    guidanceRemoveHeadCoveringsText: 'Please remove your head coverings (hat, scarf, etc.)...',
+    guidanceRemoveMaskText: 'Please remove your mask...'
+  });
   var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText : undefined;
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(SelfieCapture, {
     onSelfieCaptured: onSelfieCaptured,
     onExit: onExit,
     timeoutDurationMs: timeoutDurationMs,
     guidanceMessage: guidanceMessage,
+    guidanceSatisfied: guidanceMessage ? false : undefined,
     colors: colors,
     verbiage: verbiage,
     debugMode: debugMode
@@ -10570,28 +10697,29 @@ var SelfieCaptureLoadingOverlay = function SelfieCaptureLoadingOverlay(_a) {
     _c = _a.colors,
     colors = _c === void 0 ? {} : _c,
     _d = _a.verbiage,
-    verbiage = _d === void 0 ? {} : _d;
-  var t = reactI18next.useTranslation().t;
+    rawVerbiage = _d === void 0 ? {} : _d;
   var _e = React.useContext(CameraStateContext),
     cameraReady = _e.cameraReady,
     cameraAccessDenied = _e.cameraAccessDenied;
   var modelsReady = React.useContext(HighPerformanceSelfieGuidanceModelsContext).ready;
+  assets.instructionImageUrl || (assets.instructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png"));
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: 'Use your device camera to capture your face',
+    removeEyeCoveringsText: 'Remove Sunglasses & Hat',
+    avoidExcessiveBacklightingText: 'Avoid Excessive Backlighting',
+    continueText: 'Continue',
+    cameraInitializingText: 'Camera initializing...',
+    modelsWarmingUpText: 'Models warming up...'
+  });
   var _f = React.useState(false),
     dismissed = _f[0],
     setDismissed = _f[1];
   if (dismissed) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
-  assets.instructionImageUrl || (assets.instructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png"));
-  verbiage.headingText || (verbiage.headingText = t('Use your device camera to capture your face'));
-  verbiage.removeEyeCoveringsText || (verbiage.removeEyeCoveringsText = t('Remove Sunglasses & Hat'));
-  verbiage.avoidExcessiveBacklightingText || (verbiage.avoidExcessiveBacklightingText = t('Avoid Excessive Backlighting'));
-  verbiage.continueText || (verbiage.continueText = t('Continue'));
-  verbiage.cameraInitializingText || (verbiage.cameraInitializingText = t('Camera initializing...'));
-  verbiage.modelsWarmingUpText || (verbiage.modelsWarmingUpText = t('Models warming up...'));
   if (cameraAccessDenied) {
     return /*#__PURE__*/React__default['default'].createElement(CameraAccessDeniedOverlay, {
       assets: assets.cameraAccessDenied,
       colors: colors.cameraAccessDenied,
-      verbiage: verbiage.cameraAccessDenied
+      verbiage: rawVerbiage.cameraAccessDenied
     });
   }
   return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -10641,14 +10769,15 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
     _d = _a.colors,
     colors = _d === void 0 ? {} : _d,
     _e = _a.verbiage,
-    verbiage = _e === void 0 ? {} : _e;
-  var t = reactI18next.useTranslation().t;
+    rawVerbiage = _e === void 0 ? {} : _e;
   colors.retryBtn || (colors.retryBtn = {});
   (_b = colors.retryBtn).backgroundColor || (_b.backgroundColor = '#ea8557');
   (_c = colors.retryBtn).textColor || (_c.textColor = 'white');
-  verbiage.headingText || (verbiage.headingText = t('Face liveness has been verified!'));
-  verbiage.retryBtnText || (verbiage.retryBtnText = t('Retry'));
-  verbiage.doneBtnText || (verbiage.doneBtnText = t('Done'));
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: 'Face liveness has been verified!',
+    retryBtnText: 'Retry',
+    doneBtnText: 'Done'
+  });
   return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("h3", {
     style: {
       marginBottom: 24
@@ -10681,8 +10810,7 @@ var FaceLivenessFailure = function FaceLivenessFailure(_a) {
     _h = _a.colors,
     colors = _h === void 0 ? {} : _h,
     _j = _a.verbiage,
-    verbiage = _j === void 0 ? {} : _j;
-  var t = reactI18next.useTranslation().t;
+    rawVerbiage = _j === void 0 ? {} : _j;
   assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/manual_capture.png"));
   colors.retryBtn || (colors.retryBtn = {});
   (_b = colors.retryBtn).backgroundColor || (_b.backgroundColor = '#ea8557');
@@ -10690,9 +10818,11 @@ var FaceLivenessFailure = function FaceLivenessFailure(_a) {
   colors.exitBtn || (colors.exitBtn = {});
   (_d = colors.exitBtn).backgroundColor || (_d.backgroundColor = '#666');
   (_e = colors.exitBtn).textColor || (_e.textColor = 'white');
-  verbiage.headingText || (verbiage.headingText = t('Live face not detected, please try again'));
-  verbiage.retryBtnText || (verbiage.retryBtnText = t('Retry'));
-  verbiage.exitBtnText || (verbiage.exitBtnText = t('Exit'));
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: 'Live face not detected, please try again',
+    retryBtnText: 'Retry',
+    exitBtnText: 'Exit'
+  });
   return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("h3", {
     style: {
       marginBottom: 24
@@ -11376,14 +11506,15 @@ function truncate(str, max_chars) {
 var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
   var document = _a.document,
     onComplete = _a.onComplete,
-    headingText = _a.headingText,
-    nextBtnText = _a.nextBtnText;
-  var t = reactI18next.useTranslation().t;
-  var _b = React.useState(null),
-    file = _b[0],
-    setFile = _b[1];
-  headingText = headingText || t('Additional document capture');
-  nextBtnText = nextBtnText || t('Next');
+    _b = _a.verbiage,
+    rawVerbiage = _b === void 0 ? {} : _b;
+  var _c = React.useState(null),
+    file = _c[0],
+    setFile = _c[1];
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: 'Additional document capture',
+    nextBtnText: 'Next'
+  });
   return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, {
     style: {
       textAlign: 'left'
@@ -11392,7 +11523,7 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
     style: {
       margin: '0 0 8px'
     }
-  }, headingText, ": ", document.name), document.description && /*#__PURE__*/React__default['default'].createElement("p", {
+  }, verbiage.headingText, ": ", document.name), document.description && /*#__PURE__*/React__default['default'].createElement("p", {
     style: {
       margin: '8px 0'
     }
@@ -11435,7 +11566,7 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
       };
       fileReader.readAsDataURL(file);
     }
-  }, nextBtnText))));
+  }, verbiage.nextBtnText))));
 };
 
 var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_a) {
@@ -11480,9 +11611,8 @@ var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_
   if (isComplete) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "Thanks, your documents have been received.");
   return /*#__PURE__*/React__default['default'].createElement(AdditionalDocumentCapture, {
     key: documentIndex,
-    headingText: verbiage.headingText,
-    nextBtnText: verbiage.nextBtnText,
     document: currentDocument,
+    verbiage: verbiage,
     onComplete: function onComplete(data) {
       setUploadedDocuments(function (f) {
         return tslib.__spreadArray(tslib.__spreadArray([], f, true), [data], false);
@@ -11526,16 +11656,17 @@ var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4;
 var SignatureCapture = function SignatureCapture(_a) {
   var onAccept = _a.onAccept,
     _b = _a.verbiage,
-    verbiage = _b === void 0 ? {} : _b;
-  var t = reactI18next.useTranslation().t;
+    rawVerbiage = _b === void 0 ? {} : _b;
   var _c = useResizeObserver__default['default'](),
     ref = _c.ref,
     width = _c.width,
     height = _c.height;
   var signaturePad = React.useRef(null);
-  verbiage.headingText = verbiage.headingText || t('Please sign the box below');
-  verbiage.acceptBtnText = verbiage.acceptBtnText || t('Accept');
-  verbiage.clearBtnText = verbiage.clearBtnText || t('Clear');
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: 'Please sign the box below',
+    acceptBtnText: 'Accept',
+    clearBtnText: 'Clear'
+  });
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, null, /*#__PURE__*/React__default['default'].createElement(SignaturePaperBacking, null, /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, {
     "$top": "5vh"
   }, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, null, verbiage.headingText)), /*#__PURE__*/React__default['default'].createElement(SignatureCanvasContainer, null, /*#__PURE__*/React__default['default'].createElement(SignaturePad, {
@@ -11614,10 +11745,9 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     _d = _a.colors,
     colors = _d === void 0 ? {} : _d,
     _e = _a.verbiage,
-    verbiage = _e === void 0 ? {} : _e,
+    rawVerbiage = _e === void 0 ? {} : _e,
     _f = _a.debugMode,
     debugMode = _f === void 0 ? false : _f;
-  var t = reactI18next.useTranslation().t;
   var _g = React.useContext(CameraStateContext),
     cameraRef = _g.cameraRef,
     videoRef = _g.videoRef;
@@ -11648,9 +11778,11 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     setSignatureVideoData = _o[1];
   colors.guidanceMessageBackgroundColor || (colors.guidanceMessageBackgroundColor = '#ccc');
   colors.guidanceMessageTextColor || (colors.guidanceMessageTextColor = 'black');
-  verbiage.guidanceMessageText || (verbiage.guidanceMessageText = t('Please sign the box below'));
-  verbiage.acceptBtnText || (verbiage.acceptBtnText = t('Accept'));
-  verbiage.clearBtnText || (verbiage.clearBtnText = t('Clear'));
+  var verbiage = useTranslations(rawVerbiage, {
+    guidanceMessageText: 'Please sign the box below',
+    acceptBtnText: 'Accept',
+    clearBtnText: 'Clear'
+  });
   var outputCanvas = React.useRef(null);
   React.useEffect(function () {
     setTimeout(function () {
@@ -11819,14 +11951,15 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
     _d = _a.colors,
     colors = _d === void 0 ? {} : _d,
     _e = _a.verbiage,
-    verbiage = _e === void 0 ? {} : _e;
-  var t = reactI18next.useTranslation().t;
+    rawVerbiage = _e === void 0 ? {} : _e;
   colors.retryBtn || (colors.retryBtn = {});
   (_b = colors.retryBtn).backgroundColor || (_b.backgroundColor = '#ea8557');
   (_c = colors.retryBtn).textColor || (_c.textColor = 'white');
-  verbiage.headingText || (verbiage.headingText = t('Video signature has been successfully captured!'));
-  verbiage.retryBtnText || (verbiage.retryBtnText = t('Retry'));
-  verbiage.doneBtnText || (verbiage.doneBtnText = t('Done'));
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: 'Video signature has been successfully captured!',
+    retryBtnText: 'Retry',
+    doneBtnText: 'Done'
+  });
   return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("h1", null, verbiage.headingText), /*#__PURE__*/React__default['default'].createElement(OverlayImageWrapper, null, /*#__PURE__*/React__default['default'].createElement(StyledVideo, {
     src: videoUrl,
     poster: videoUrl + '#t=0.1',
@@ -12153,78 +12286,6 @@ var CompositeWizardComponent = function CompositeWizardComponent(_a) {
   }
 };
 
-var enTranslation = {};
-
-var esTranslation = {
-  'Use your device camera to capture your ID': 'Para capturar la identificación hay que utilizar la cámara del dispositivo.',
-  'Use your iPhone as a webcam': 'Usar el iPhone como cámara web',
-  'Models warming up...': 'Cargando modelos...',
-  'Camera initializing...': 'Inicializando la cámara...',
-  'Camera access blocked': 'Acceso bloqueado a la cámara',
-  'Location access blocked': 'Acceso bloqueado a la localización',
-  Continue: 'Continuar',
-  'Your camera permission is disabled': 'El permiso de la cámara está desactivado',
-  'This application requires access to your camera to continue. Please accept the permission once prompted by the browser. If the browser does not prompt for camera permissions, you must go to settings and provide camera access to the current browser.': 'Esta aplicación requiere el acceso a la cámara para continuar. Hay que aceptar el permiso una vez que se muestre la ventana en el explorador. Si no aparece la ventana para otorgar permisos, entonces hay que dirigirse a Configuración y otorgar el permiso a la cámara en el explorador actual.',
-  'Your location permission is disabled': 'El permiso de la localización está desactivado',
-  'This application requires access to your location to continue. Please accept the permission once prompted by the browser. If the browser does not prompt for location permissions, you must go to settings and provide location access to the current browser.': 'Esta aplicación requiere el acceso a la localización para continuar. Hay que aceptar el permiso una vez que se muestre la ventana en el explorador. Si no aparece la ventana para otorgar permisos, entonces hay que dirigirse a Configuración y otorgar el permiso a la localización en el explorador actual.',
-  Retry: 'Reintentar',
-  'Scan the front of ID': 'Escanear el frente de la ID',
-  'Scan the back of ID': 'Escanear el reverso de la ID',
-  'Scan the ID page of passport': 'Escanear la página de datos del pasaporte',
-  'ID Card Front': 'Frente de la ID',
-  'ID Card Back': 'Reverso de la ID',
-  Passport: 'Pasaporte',
-  'Capturing...': 'Capturando...',
-  'Capture failed!': 'Falló la captura',
-  'Please flip your ID card...': 'Por favor voltea la identificación...',
-  'ID Capture Successful': 'Captura Exitosa de ID',
-  'Verify the entire ID was captured clearly with no glare.': 'Hay que verificar que toda la ID se vea completa y sin reflejos.',
-  Submit: 'Enviar',
-  'Submitting...': 'Enviando...',
-  'Use your device camera to capture your face': 'Hay que utilizar la cámara del dispositivo para capturar el rostro',
-  'Remove Sunglasses & Hat': 'Hay que quitarse lentes y/o la gorra',
-  'Avoid Excessive Backlighting': 'Hay que evitar demasiada luz en el fondo',
-  'Hold still for a few seconds...': 'Hay que permanecer quieto por unos segundos...',
-  'Look straight into the camera...': 'Hay que mirar directamente a la cámara...',
-  'Move back...': 'Hay que hacerse hacia atrás..',
-  'Move forward...': 'Hay que hacerse hacia adelante...',
-  'Move to the center...': 'Hay que moverse hacia el centro...',
-  'Please remove your eye coverings (sunglasses, eye patch, etc.)...': 'Hay que quitarse lo que cubre los ojos (lentes, parche, etc.)...',
-  'Please remove your head coverings (hat, scarf, etc.)...': 'Hay que quitarse lo que cubre la cabeza (gorra, mascada, etc.)...',
-  'Please remove your mask...': 'Hay que quitarse el cubrebocas...',
-  'Live face not detected, please try again': 'Rostro vivo no detectado. Por favor hay que intentar de nuevo.',
-  Exit: 'Salir',
-  'Face liveness has been verified!': 'Se ha verificado la Prueba de Vida en rostro!',
-  Done: 'Terminar',
-  'Customer has been identified!': '¡Se ha identificado al cliente!',
-  'Customer not found': 'Cliente no encontrado',
-  'Additional document capture': 'Captura de otro documento',
-  Next: 'Siguiente',
-  'Please sign the box below': 'Por favor, hay que firmar en el recuadro de abajo',
-  Accept: 'Aceptar',
-  Clear: 'Borrar',
-  'Video signature has been successfully captured!': 'La video firma ha sido exitosa.'
-};
-
-var resources = {
-  en: {
-    translation: enTranslation
-  },
-  es: {
-    translation: esTranslation
-  }
-};
-var useLanguage = function useLanguage(lang) {
-  var i18n = reactI18next.useTranslation().i18n;
-  React.useEffect(function () {
-    if (lang !== 'auto') {
-      i18n.changeLanguage(lang);
-    } else {
-      i18n.changeLanguage();
-    }
-  }, [i18n, lang]);
-};
-
 var IdValidation = function IdValidation(_a) {
   var _b = _a.lang,
     lang = _b === void 0 ? 'auto' : _b,
@@ -12885,15 +12946,16 @@ var CustomerVerificationSuccess = function CustomerVerificationSuccess(_a) {
     _d = _a.colors,
     colors = _d === void 0 ? {} : _d,
     _e = _a.verbiage,
-    verbiage = _e === void 0 ? {} : _e;
-  var t = reactI18next.useTranslation().t;
+    rawVerbiage = _e === void 0 ? {} : _e;
   imageUrl || (imageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png"));
   colors.retryBtn || (colors.retryBtn = {});
   (_b = colors.retryBtn).backgroundColor || (_b.backgroundColor = '#ea8557');
   (_c = colors.retryBtn).textColor || (_c.textColor = 'white');
-  verbiage.headingText || (verbiage.headingText = t('Customer has been verified!'));
-  verbiage.retryBtnText || (verbiage.retryBtnText = t('Retry'));
-  verbiage.doneBtnText || (verbiage.doneBtnText = t('Done'));
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: 'Customer has been verified!',
+    retryBtnText: 'Retry',
+    doneBtnText: 'Done'
+  });
   return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("h3", {
     style: {
       marginBottom: 24
@@ -12934,8 +12996,7 @@ var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
     _h = _a.colors,
     colors = _h === void 0 ? {} : _h,
     _j = _a.verbiage,
-    verbiage = _j === void 0 ? {} : _j;
-  var t = reactI18next.useTranslation().t;
+    rawVerbiage = _j === void 0 ? {} : _j;
   assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/manual_capture.png"));
   colors.retryBtn || (colors.retryBtn = {});
   (_b = colors.retryBtn).backgroundColor || (_b.backgroundColor = '#ea8557');
@@ -12943,9 +13004,11 @@ var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
   colors.exitBtn || (colors.exitBtn = {});
   (_d = colors.exitBtn).backgroundColor || (_d.backgroundColor = '#666');
   (_e = colors.exitBtn).textColor || (_e.textColor = 'white');
-  verbiage.headingText || (verbiage.headingText = t('Customer not verified'));
-  verbiage.retryBtnText || (verbiage.retryBtnText = t('Retry'));
-  verbiage.exitBtnText || (verbiage.exitBtnText = t('Exit'));
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: 'Customer not verified',
+    retryBtnText: 'Retry',
+    exitBtnText: 'Exit'
+  });
   return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("h3", {
     style: {
       marginBottom: 24
@@ -13335,15 +13398,16 @@ var CustomerIdentificationSuccess = function CustomerIdentificationSuccess(_a) {
     _d = _a.colors,
     colors = _d === void 0 ? {} : _d,
     _e = _a.verbiage,
-    verbiage = _e === void 0 ? {} : _e;
-  var t = reactI18next.useTranslation().t;
+    rawVerbiage = _e === void 0 ? {} : _e;
   imageUrl || (imageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png"));
   colors.retryBtn || (colors.retryBtn = {});
   (_b = colors.retryBtn).backgroundColor || (_b.backgroundColor = '#ea8557');
   (_c = colors.retryBtn).textColor || (_c.textColor = 'white');
-  verbiage.headingText || (verbiage.headingText = t('Customer has been identified!'));
-  verbiage.retryBtnText || (verbiage.retryBtnText = t('Retry'));
-  verbiage.doneBtnText || (verbiage.doneBtnText = t('Done'));
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: 'Customer has been identified!',
+    retryBtnText: 'Retry',
+    doneBtnText: 'Done'
+  });
   return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("h3", {
     style: {
       marginBottom: 24
@@ -13384,8 +13448,7 @@ var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
     _h = _a.colors,
     colors = _h === void 0 ? {} : _h,
     _j = _a.verbiage,
-    verbiage = _j === void 0 ? {} : _j;
-  var t = reactI18next.useTranslation().t;
+    rawVerbiage = _j === void 0 ? {} : _j;
   assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/manual_capture.png"));
   colors.retryBtn || (colors.retryBtn = {});
   (_b = colors.retryBtn).backgroundColor || (_b.backgroundColor = '#ea8557');
@@ -13393,9 +13456,11 @@ var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
   colors.exitBtn || (colors.exitBtn = {});
   (_d = colors.exitBtn).backgroundColor || (_d.backgroundColor = '#666');
   (_e = colors.exitBtn).textColor || (_e.textColor = 'white');
-  verbiage.headingText || (verbiage.headingText = t('Customer not found'));
-  verbiage.retryBtnText || (verbiage.retryBtnText = t('Retry'));
-  verbiage.exitBtnText || (verbiage.exitBtnText = t('Exit'));
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: 'Customer not found',
+    retryBtnText: 'Retry',
+    exitBtnText: 'Exit'
+  });
   return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("h3", {
     style: {
       marginBottom: 24