idmission-web-sdk 0.0.37 → 0.0.39

package/dist/sdk2.cjs.development.js

@@ -395,7 +395,7 @@ var SubmissionProvider = function SubmissionProvider(_a) {
   }, []);
   var submit = React.useCallback(function () {
     return tslib.__awaiter(void 0, void 0, void 0, function () {
-      var submissionResponse_1, submissionRequest_1, metadata, platform, onBeforeSubmitResult, e_1, host, endpoint, response, submissionResponse_2, e_2;
+      var submissionResponse_1, submissionRequest_1, metadata, platform, onBeforeSubmitResult, host, endpoint, response, submissionResponse_2, e_1;
       var _a;
       return tslib.__generator(this, function (_b) {
         switch (_b.label) {
@@ -414,7 +414,7 @@ var SubmissionProvider = function SubmissionProvider(_a) {
             setSubmissionStatus(SubmissionStatus.SUBMITTING);
             _b.label = 1;
           case 1:
-            _b.trys.push([1, 8,, 9]);
+            _b.trys.push([1, 6,, 7]);
             submissionRequest_1 = {
               securityData: {
                 userName: '',
@@ -485,7 +485,7 @@ var SubmissionProvider = function SubmissionProvider(_a) {
             }
             if (signatureData) {
               submissionRequest_1.customerData.signatureData = {
-                signatureImage: signatureData.fileContent
+                signatureImage: JSON.stringify(signatureData)
               };
             }
             if (additionalDocuments) {
@@ -515,20 +515,13 @@ var SubmissionProvider = function SubmissionProvider(_a) {
               metadata.GeoLocation = JSON.stringify(geolocationResult);
             }
             submissionRequest_1.additionalData.metadata = JSON.stringify(metadata);
-            if (!onBeforeSubmit) return [3, 5];
-            _b.label = 2;
-          case 2:
-            _b.trys.push([2, 4,, 5]);
+            if (!onBeforeSubmit) return [3, 3];
             return [4, onBeforeSubmit(submissionRequest_1)];
-          case 3:
+          case 2:
             onBeforeSubmitResult = _b.sent();
             if (onBeforeSubmitResult) submissionRequest_1 = onBeforeSubmitResult;
-            return [3, 5];
-          case 4:
-            e_1 = _b.sent();
-            console.error('onBeforeSubmit was rejected with', e_1);
-            return [3, 5];
-          case 5:
+            _b.label = 3;
+          case 3:
             host = url || determineSubmissionHost(environment, token);
             endpoint = determineSubmissionEndpoint(action, !!(idFrontImage || idBackImage || passportImage), !!selfieImage, !!token);
             return [4, fetch(host + endpoint, {
@@ -536,22 +529,22 @@ var SubmissionProvider = function SubmissionProvider(_a) {
               headers: apiHeaders(token),
               body: JSON.stringify(submissionRequest_1)
             })];
-          case 6:
+          case 4:
             response = _b.sent();
             return [4, response.json()];
-          case 7:
+          case 5:
             submissionResponse_2 = _b.sent();
             setSubmissionRequest(submissionRequest_1);
             setSubmissionResponse(submissionResponse_2);
             setSubmissionStatus(SubmissionStatus.SUBMITTED);
             onResponseReceived === null || onResponseReceived === void 0 ? void 0 : onResponseReceived(submissionResponse_2);
             return [2, submissionResponse_2];
-          case 8:
-            e_2 = _b.sent();
+          case 6:
+            e_1 = _b.sent();
             setSubmissionStatus(SubmissionStatus.FAILED);
-            onRequestFailure === null || onRequestFailure === void 0 ? void 0 : onRequestFailure(e_2);
+            onRequestFailure === null || onRequestFailure === void 0 ? void 0 : onRequestFailure(e_1);
             return [2, null];
-          case 9:
+          case 7:
             return [2];
         }
       });
@@ -8535,43 +8528,45 @@ var IdCapture = function IdCapture(_a) {
     processingDelay = _s === void 0 ? 0 : _s,
     _t = _a.assets,
     assets = _t === void 0 ? {} : _t,
-    _u = _a.verbiage,
-    verbiage = _u === void 0 ? {} : _u,
-    _v = _a.debugMode,
-    debugMode = _v === void 0 ? false : _v;
-  var _w = useResizeObserver__default['default'](),
-    ref = _w.ref,
-    _x = _w.width,
-    width = _x === void 0 ? 1 : _x,
-    _y = _w.height,
-    height = _y === void 0 ? 1 : _y;
-  var _z = React.useReducer(reducer$5, initialState$5),
-    state = _z[0],
-    dispatch = _z[1];
-  var _0 = React.useState(''),
-    imageURL = _0[0],
-    setImageURL = _0[1];
-  var _1 = React.useState(false),
-    processingFrame = _1[0],
-    setProcessingFrame = _1[1];
-  var _2 = React.useContext(CameraStateContext),
-    cameraRef = _2.cameraRef,
-    cameraReady = _2.cameraReady,
-    takePhoto = _2.takePhoto,
-    videoRef = _2.videoRef,
-    videoLoaded = _2.videoLoaded;
+    _u = _a.colors,
+    colors = _u === void 0 ? {} : _u,
+    _v = _a.verbiage,
+    verbiage = _v === void 0 ? {} : _v,
+    _w = _a.debugMode,
+    debugMode = _w === void 0 ? false : _w;
+  var _x = useResizeObserver__default['default'](),
+    ref = _x.ref,
+    _y = _x.width,
+    width = _y === void 0 ? 1 : _y,
+    _z = _x.height,
+    height = _z === void 0 ? 1 : _z;
+  var _0 = React.useReducer(reducer$5, initialState$5),
+    state = _0[0],
+    dispatch = _0[1];
+  var _1 = React.useState(''),
+    imageURL = _1[0],
+    setImageURL = _1[1];
+  var _2 = React.useState(false),
+    processingFrame = _2[0],
+    setProcessingFrame = _2[1];
+  var _3 = React.useContext(CameraStateContext),
+    cameraRef = _3.cameraRef,
+    cameraReady = _3.cameraReady,
+    takePhoto = _3.takePhoto,
+    videoRef = _3.videoRef,
+    videoLoaded = _3.videoLoaded;
   var t = reactI18next.useTranslation().t;
   var captureStartedAt = React.useRef();
-  var _3 = React.useContext(IdCaptureModelsContext),
-    modelsReady = _3.ready,
-    modelsWorking = _3.working,
-    setThresholds = _3.setThresholds,
-    makePrediction = _3.makePrediction,
-    onPredictionMade = _3.onPredictionMade,
-    detectionTime = _3.detectionTime,
-    focusPredictionTime = _3.focusPredictionTime,
-    getBestFrame = _3.getBestFrame,
-    resetBestFrame = _3.resetBestFrame;
+  var _4 = React.useContext(IdCaptureModelsContext),
+    modelsReady = _4.ready,
+    modelsWorking = _4.working,
+    setThresholds = _4.setThresholds,
+    makePrediction = _4.makePrediction,
+    onPredictionMade = _4.onPredictionMade,
+    detectionTime = _4.detectionTime,
+    focusPredictionTime = _4.focusPredictionTime,
+    getBestFrame = _4.getBestFrame,
+    resetBestFrame = _4.resetBestFrame;
   React.useEffect(function () {
     captureStartedAt.current = new Date();
   }, []);
@@ -8600,9 +8595,9 @@ var IdCapture = function IdCapture(_a) {
   React.useEffect(function () {
     shouldCaptureFrames.current = videoLoaded && cameraReady && modelsReady && !state.capturing && !state.captured;
   }, [cameraReady, state.captured, state.capturing, modelsReady, videoLoaded]);
-  var _4 = React.useState(null),
-    lastFrame = _4[0],
-    setLastFrame = _4[1];
+  var _5 = React.useState(null),
+    lastFrame = _5[0],
+    setLastFrame = _5[1];
   React.useEffect(function () {
     if (!modelsReady || !cameraReady || !videoLoaded) return;
     animationFrame.current = requestAnimationFrame(function runFrame() {
@@ -8777,9 +8772,11 @@ var IdCapture = function IdCapture(_a) {
       }
     });
   }
-  verbiage.instructionText = verbiage.instructionText || t('Scan the front of ID');
-  verbiage.capturingText = verbiage.capturingText || t('Capturing...');
-  verbiage.captureFailedText = verbiage.captureFailedText || t('Capture failed!');
+  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"
@@ -8790,7 +8787,7 @@ var IdCapture = function IdCapture(_a) {
     portraitGuidesImageUrl: assets.portraitGuidesImageUrl,
     landscapeGuidesImageUrl: assets.landscapeGuidesImageUrl,
     isMirrored: !((_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.isRearFacing),
-    borderColor: state.isGoodFrame ? 'green' : 'white'
+    borderColor: state.isGoodFrame ? colors.guideBoxSatisfiedColor : colors.guideBoxUnsatisfiedColor
   }), debugMode && state.detectedObjects.length > 0 && /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlay, {
     "$flipX": !((_d = cameraRef.current) === null || _d === void 0 ? void 0 : _d.isRearFacing)
   }, state.detectedObjects.map(function (obj, i) {
@@ -9385,25 +9382,27 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     passportFocusScoreThreshold = _k === void 0 ? 0.3 : _k,
     _l = _a.assets,
     assets = _l === void 0 ? {} : _l,
-    _m = _a.verbiage,
-    verbiage = _m === void 0 ? {} : _m,
-    _o = _a.debugMode,
-    debugMode = _o === void 0 ? false : _o;
-  var _p = React.useReducer(reducer$4, initialState$4),
-    state = _p[0],
-    dispatch = _p[1];
+    _m = _a.colors,
+    colors = _m === void 0 ? {} : _m,
+    _o = _a.verbiage,
+    verbiage = _o === void 0 ? {} : _o,
+    _p = _a.debugMode,
+    debugMode = _p === void 0 ? false : _p;
+  var _q = React.useReducer(reducer$4, initialState$4),
+    state = _q[0],
+    dispatch = _q[1];
   var releaseCameraAccess = React.useContext(CameraStateContext).releaseCameraAccess;
-  var _q = React.useState(false),
-    overlayDismissed = _q[0],
-    setOverlayDismissed = _q[1];
-  var _r = React.useContext(SubmissionContext),
-    submissionStatus = _r.submissionStatus,
-    submissionResponse = _r.submissionResponse,
-    setIdFrontImage = _r.setIdFrontImage,
-    setIdBackImage = _r.setIdBackImage,
-    setPassportImage = _r.setPassportImage,
-    logIdFrontCaptureAttempt = _r.logIdFrontCaptureAttempt,
-    logIdBackCaptureAttempt = _r.logIdBackCaptureAttempt;
+  var _r = React.useState(false),
+    overlayDismissed = _r[0],
+    setOverlayDismissed = _r[1];
+  var _s = React.useContext(SubmissionContext),
+    submissionStatus = _s.submissionStatus,
+    submissionResponse = _s.submissionResponse,
+    setIdFrontImage = _s.setIdFrontImage,
+    setIdBackImage = _s.setIdBackImage,
+    setPassportImage = _s.setPassportImage,
+    logIdFrontCaptureAttempt = _s.logIdFrontCaptureAttempt,
+    logIdBackCaptureAttempt = _s.logIdBackCaptureAttempt;
   var t = reactI18next.useTranslation().t;
   var operationStartedAt = React.useRef();
   React.useEffect(function () {
@@ -9495,9 +9494,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
       type: 'reset'
     });
   }, []);
-  var _s = React.useState(0),
-    attempt = _s[0],
-    setAttempt = _s[1];
+  var _t = React.useState(0),
+    attempt = _t[0],
+    setAttempt = _t[1];
   var onExit = React.useCallback(function () {
     setOverlayDismissed(false);
     setAttempt(function (n) {
@@ -9512,16 +9511,16 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
       releaseCameraAccess();
     }
   }, [releaseCameraAccess, submissionStatus]);
-  assets.idCardFrontPortraitGuidesImageUrl = assets.idCardFrontPortraitGuidesImageUrl || "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Portrait-2.svg");
-  assets.idCardFrontLandscapeGuidesImageUrl = assets.idCardFrontLandscapeGuidesImageUrl || "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg");
-  assets.idCardBackPortraitGuidesImageUrl = assets.idCardBackPortraitGuidesImageUrl || "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Portrait-2.svg");
-  assets.idCardBackLandscapeGuidesImageUrl = assets.idCardBackLandscapeGuidesImageUrl || "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg");
-  assets.passportPortraitGuidesImageUrl = assets.passportPortraitGuidesImageUrl || "".concat(DEFAULT_CDN_URL, "/Shieldout-Passport-Front-SVG-Portrait-2.svg");
-  assets.passportLandscapeGuidesImageUrl = assets.passportLandscapeGuidesImageUrl || "".concat(DEFAULT_CDN_URL, "/Shieldout-Passport-Front-SVG-Landscape-2.svg");
-  assets.loadingOverlayInstructionImageUrl = assets.loadingOverlayInstructionImageUrl || "".concat(DEFAULT_CDN_URL, "/WebSDK-Instruction-DL-Capture-3-Portrait.png");
-  verbiage.idCardFrontInstructionText = verbiage.idCardFrontInstructionText || t('Scan the front of ID');
-  verbiage.idCardBackInstructionText = verbiage.idCardBackInstructionText || t('Scan the back of ID');
-  verbiage.passportInstructionText = verbiage.passportInstructionText || t('Scan the ID page of passport');
+  assets.idCardFrontPortraitGuidesImageUrl || (assets.idCardFrontPortraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Portrait-2.svg"));
+  assets.idCardFrontLandscapeGuidesImageUrl || (assets.idCardFrontLandscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
+  assets.idCardBackPortraitGuidesImageUrl || (assets.idCardBackPortraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Portrait-2.svg"));
+  assets.idCardBackLandscapeGuidesImageUrl || (assets.idCardBackLandscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
+  assets.passportPortraitGuidesImageUrl || (assets.passportPortraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-Passport-Front-SVG-Portrait-2.svg"));
+  assets.passportLandscapeGuidesImageUrl || (assets.passportLandscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-Passport-Front-SVG-Landscape-2.svg"));
+  assets.loadingOverlayInstructionImageUrl || (assets.loadingOverlayInstructionImageUrl = "".concat(DEFAULT_CDN_URL, "/WebSDK-Instruction-DL-Capture-3-Portrait.png"));
+  verbiage.idCardFrontInstructionText || (verbiage.idCardFrontInstructionText = t('Scan the front of ID'));
+  verbiage.idCardBackInstructionText || (verbiage.idCardBackInstructionText = t('Scan the back of ID'));
+  verbiage.passportInstructionText || (verbiage.passportInstructionText = t('Scan the ID page of passport'));
   var idCardFrontAssets = React.useMemo(function () {
     return {
       portraitGuidesImageUrl: assets.idCardFrontPortraitGuidesImageUrl,
@@ -9592,6 +9591,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
           processingScreen: flipIdPrompt,
           processingDelay: 3500,
           assets: idCardFrontAssets,
+          colors: colors,
           verbiage: idCardFrontVerbiage,
           debugMode: debugMode
         });
@@ -9611,6 +9611,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
           onCapture: onCapture,
           onExit: onExit,
           assets: idCardBackAssets,
+          colors: colors,
           verbiage: idCardBackVerbiage,
           debugMode: debugMode
         });
@@ -9630,6 +9631,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
           onCapture: onCapture,
           onExit: onExit,
           assets: passportAssets,
+          colors: colors,
           verbiage: passportVerbiage,
           debugMode: debugMode
         });
@@ -9938,6 +9940,19 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
   }, children);
 };
 
+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$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$2, templateObject_2$1;
+
 var initialState$3 = {
   videoWidth: 0,
   videoHeight: 0,
@@ -10041,24 +10056,26 @@ var SelfieCapture = function SelfieCapture(_a) {
     _e = _a.timeoutDurationMs,
     timeoutDurationMs = _e === void 0 ? 15000 : _e,
     guidanceMessage = _a.guidanceMessage,
-    _f = _a.verbiage,
-    verbiage = _f === void 0 ? {} : _f,
+    _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 _g = useResizeObserver__default['default'](),
-    ref = _g.ref,
-    _h = _g.width,
-    width = _h === void 0 ? 1 : _h,
-    _j = _g.height,
-    height = _j === void 0 ? 1 : _j;
-  var _k = React.useReducer(reducer$3, initialState$3),
-    state = _k[0],
-    dispatch = _k[1];
-  var _l = React.useContext(CameraStateContext),
-    cameraRef = _l.cameraRef,
-    cameraReady = _l.cameraReady,
-    takePhoto = _l.takePhoto,
-    videoRef = _l.videoRef;
+  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;
   var onPredictionMade = React.useContext(HighPerformanceSelfieGuidanceModelsContext).onPredictionMade;
   React.useEffect(function () {
     if (cameraReady && videoRef.current && videoRef.current.videoWidth !== 0) {
@@ -10081,9 +10098,9 @@ var SelfieCapture = function SelfieCapture(_a) {
       });
     });
   }, [onPredictionMade]);
-  var _m = React.useState(false),
-    captureReady = _m[0],
-    setCaptureReady = _m[1];
+  var _o = React.useState(false),
+    captureReady = _o[0],
+    setCaptureReady = _o[1];
   React.useEffect(function () {
     var timer;
     if (state.faceReady) {
@@ -10127,12 +10144,12 @@ var SelfieCapture = function SelfieCapture(_a) {
       });
     })();
   }, [captureReady, onSelfieCaptured, state.faces, takePhoto]);
-  var _o = React.useState(),
-    timeoutStartedAt = _o[0],
-    setTimeoutStartedAt = _o[1];
-  var _p = React.useState(false),
-    timedOut = _p[0],
-    setTimedOut = _p[1];
+  var _p = React.useState(),
+    timeoutStartedAt = _p[0],
+    setTimeoutStartedAt = _p[1];
+  var _q = React.useState(false),
+    timedOut = _q[0],
+    setTimedOut = _q[1];
   React.useEffect(function () {
     if (!timeoutDurationMs) return;
     setTimeoutStartedAt(new Date());
@@ -10153,36 +10170,24 @@ var SelfieCapture = function SelfieCapture(_a) {
     videoWidth: state.videoWidth,
     videoHeight: state.videoHeight
   });
+  colors.guidesUnsatisfiedColor || (colors.guidesUnsatisfiedColor = 'white');
+  colors.guidesSatisfiedColor || (colors.guidesSatisfiedColor = 'green');
   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...');
+    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 : '';
   }
   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 ? 'green' : 'white'
-  }), guidanceMessage !== '' && /*#__PURE__*/React__default['default'].createElement("div", {
-    style: {
-      position: 'absolute',
-      top: 'calc(10vh)',
-      fontWeight: 'bold',
-      width: '100%',
-      display: 'flex'
-    }
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    style: {
-      marginLeft: 'auto',
-      marginRight: 'auto',
-      background: state.faceReady ? 'green' : 'red',
-      color: 'white',
-      padding: '10px 12px 8px',
-      borderRadius: 8
-    }
+    borderColor: state.faceReady ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
+  }), guidanceMessage !== '' && /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, null, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, {
+    "$background": state.faceReady ? 'green' : 'red',
+    "$textColor": "white"
   }, 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) {
@@ -10287,14 +10292,16 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     onExit = _a.onExit,
     _b = _a.timeoutDurationMs,
     timeoutDurationMs = _b === void 0 ? 15000 : _b,
-    _c = _a.verbiage,
-    verbiage = _c === void 0 ? {} : _c,
+    _c = _a.colors,
+    colors = _c === void 0 ? {} : _c,
+    _d = _a.verbiage,
+    verbiage = _d === void 0 ? {} : _d,
     debugMode = _a.debugMode;
   var t = reactI18next.useTranslation().t;
   var checkLiveness = React.useContext(SubmissionContext).checkLiveness;
-  var _d = React.useReducer(reducer$2, initialState$2),
-    state = _d[0],
-    dispatch = _d[1];
+  var _e = React.useReducer(reducer$2, initialState$2),
+    state = _e[0],
+    dispatch = _e[1];
   var onSelfieCaptured = React.useCallback(function (frame, face) {
     onCapture === null || onCapture === void 0 ? void 0 : onCapture();
     dispatch({
@@ -10362,9 +10369,9 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
       onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
     }
   }, [onTimeout, state.timesLivenessCheckFailed]);
-  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...');
+  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 guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText : undefined;
   return /*#__PURE__*/React__default['default'].createElement(SelfieCapture, {
     onSelfieCaptured: onSelfieCaptured,
@@ -10372,6 +10379,7 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     onExit: onExit,
     timeoutDurationMs: timeoutDurationMs,
     guidanceMessage: guidanceMessage,
+    colors: colors,
     verbiage: verbiage,
     debugMode: debugMode
   });
@@ -10563,26 +10571,28 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
     timeoutDurationMs = _b === void 0 ? 15000 : _b,
     _c = _a.maxRetries,
     maxRetries = _c === void 0 ? 2 : _c,
-    _d = _a.debugMode,
-    debugMode = _d === void 0 ? false : _d,
-    _e = _a.verbiage,
-    verbiage = _e === void 0 ? {} : _e,
-    _f = _a.assets,
-    assets = _f === void 0 ? {} : _f;
-  var _g = React.useContext(SubmissionContext),
-    submissionResponse = _g.submissionResponse,
-    setSelfieImage = _g.setSelfieImage,
-    logSelfieCaptureAttempt = _g.logSelfieCaptureAttempt;
+    _d = _a.assets,
+    assets = _d === void 0 ? {} : _d,
+    _e = _a.colors,
+    colors = _e === void 0 ? {} : _e,
+    _f = _a.verbiage,
+    verbiage = _f === void 0 ? {} : _f,
+    _g = _a.debugMode,
+    debugMode = _g === void 0 ? false : _g;
+  var _h = React.useContext(SubmissionContext),
+    submissionResponse = _h.submissionResponse,
+    setSelfieImage = _h.setSelfieImage,
+    logSelfieCaptureAttempt = _h.logSelfieCaptureAttempt;
   var releaseCameraAccess = React.useContext(CameraStateContext).releaseCameraAccess;
-  var _h = React.useState(''),
-    faceCropImageUrl = _h[0],
-    setFaceCropImageUrl = _h[1];
-  var _j = React.useState(0),
-    retryCount = _j[0],
-    setRetryCount = _j[1];
-  var _k = React.useState('LOADING'),
-    captureState = _k[0],
-    setCaptureState = _k[1];
+  var _j = React.useState(''),
+    faceCropImageUrl = _j[0],
+    setFaceCropImageUrl = _j[1];
+  var _k = React.useState(0),
+    retryCount = _k[0],
+    setRetryCount = _k[1];
+  var _l = React.useState('LOADING'),
+    captureState = _l[0],
+    setCaptureState = _l[1];
   var captureStartedAt = React.useRef();
   var captureEndedAt = React.useRef();
   var operationStartedAt = React.useRef();
@@ -10628,9 +10638,9 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
     setCaptureState('FAILED');
     onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout(submissionResponse);
   }, [onTimeout, submissionResponse]);
-  var _l = React.useState(0),
-    attempt = _l[0],
-    setAttempt = _l[1];
+  var _m = React.useState(0),
+    attempt = _m[0],
+    setAttempt = _m[1];
   var onExitCallback = React.useCallback(function () {
     setAttempt(function (n) {
       return n + 1;
@@ -10647,6 +10657,7 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
           onTimeout: onTimeoutCallback,
           onExit: onExitCallback,
           timeoutDurationMs: timeoutDurationMs,
+          colors: colors,
           verbiage: verbiage,
           debugMode: debugMode
         });
@@ -11174,8 +11185,8 @@ function truncate(str, max_chars) {
   return truncated;
 }
 
-var Spinner = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  display: inline-block;\n  width: 80px;\n  height: 80px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: 64px;\n    height: 64px;\n    margin: 8px;\n    border-radius: 50%;\n    border: 6px solid #888;\n    border-color: #888 transparent #888 transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\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: 80px;\n  height: 80px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: 64px;\n    height: 64px;\n    margin: 8px;\n    border-radius: 50%;\n    border: 6px solid #888;\n    border-color: #888 transparent #888 transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
-var templateObject_1$2;
+var Spinner = styled__default['default'].div(templateObject_1$1 || (templateObject_1$1 = tslib.__makeTemplateObject(["\n  display: inline-block;\n  width: 80px;\n  height: 80px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: 64px;\n    height: 64px;\n    margin: 8px;\n    border-radius: 50%;\n    border: 6px solid #888;\n    border-color: #888 transparent #888 transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\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: 80px;\n  height: 80px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: 64px;\n    height: 64px;\n    margin: 8px;\n    border-radius: 50%;\n    border: 6px solid #888;\n    border-color: #888 transparent #888 transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
+var templateObject_1$1;
 
 var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
   var document = _a.document,
@@ -11321,18 +11332,11 @@ function signatureDataToIdmissionFormat(signatureCanvas) {
   return signatureData;
 }
 
-var SignatureCanvasContainer = styled__default['default'].div(templateObject_1$1 || (templateObject_1$1 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"], ["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"])));
-var SignaturePad = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = tslib.__makeTemplateObject(["\n  position: relative;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 16px;\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"], ["\n  position: relative;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 16px;\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"])));
+var SignatureCanvasContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"], ["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"])));
+var SignaturePad = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  position: relative;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 16px;\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"], ["\n  position: relative;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 16px;\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"])));
 var SignatureButtonsContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  flex-grow: 0;\n  padding-top: 12px;\n  display: flex;\n  z-index: 1000;\n  position: relative;\n"], ["\n  flex-grow: 0;\n  padding-top: 12px;\n  display: flex;\n  z-index: 1000;\n  position: relative;\n"])));
 var SignaturePaperBacking = styled__default['default'].div(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: #e5e5f7;\n  opacity: 0.8;\n  background-image: radial-gradient(#444cf7 0.5px, transparent 0.5px),\n    radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);\n  background-size: 20px 20px;\n  background-position: 0 0, 10px 10px;\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: #e5e5f7;\n  opacity: 0.8;\n  background-image: radial-gradient(#444cf7 0.5px, transparent 0.5px),\n    radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);\n  background-size: 20px 20px;\n  background-position: 0 0, 10px 10px;\n"])));
-var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4;
-
-var GuidanceMessageContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = 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 || (templateObject_2 = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: #ccc;\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: #ccc;\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"])));
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
 var SignatureCapture = function SignatureCapture(_a) {
   var onAccept = _a.onAccept,
@@ -12033,20 +12037,22 @@ var IdValidation = function IdValidation(_a) {
     onDenied = _a.onDenied,
     _j = _a.assets,
     assets = _j === void 0 ? {} : _j,
-    _k = _a.verbiage,
-    verbiage = _k === void 0 ? {} : _k,
-    _l = _a.captureSignature,
-    captureSignature = _l === void 0 ? false : _l,
-    _m = _a.captureSignatureVideo,
-    captureSignatureVideo = _m === void 0 ? false : _m,
-    _o = _a.captureAdditionalDocuments,
-    captureAdditionalDocuments = _o === void 0 ? [] : _o,
-    _p = _a.geolocationEnabled,
-    geolocationEnabled = _p === void 0 ? true : _p,
-    _q = _a.geolocationRequired,
-    geolocationRequired = _q === void 0 ? false : _q,
-    _r = _a.debugMode,
-    debugMode = _r === void 0 ? false : _r;
+    _k = _a.colors,
+    colors = _k === void 0 ? {} : _k,
+    _l = _a.verbiage,
+    verbiage = _l === void 0 ? {} : _l,
+    _m = _a.captureSignature,
+    captureSignature = _m === void 0 ? false : _m,
+    _o = _a.captureSignatureVideo,
+    captureSignatureVideo = _o === void 0 ? false : _o,
+    _p = _a.captureAdditionalDocuments,
+    captureAdditionalDocuments = _p === void 0 ? [] : _p,
+    _q = _a.geolocationEnabled,
+    geolocationEnabled = _q === void 0 ? true : _q,
+    _r = _a.geolocationRequired,
+    geolocationRequired = _r === void 0 ? false : _r,
+    _s = _a.debugMode,
+    debugMode = _s === void 0 ? false : _s;
   useLanguage(lang);
   var idCaptureProps = React.useMemo(function () {
     return {
@@ -12058,10 +12064,11 @@ var IdValidation = function IdValidation(_a) {
       passportFocusScoreThreshold: passportFocusScoreThreshold,
       barcodeScanningEnabled: false,
       assets: assets,
+      colors: colors,
       verbiage: verbiage,
       debugMode: debugMode
     };
-  }, [assets, debugMode, idAutoCaptureEnabled, idCardAutoCaptureScoreThreshold, idCardFocusScoreThreshold, passportAutoCaptureScoreThreshold, passportFocusScoreThreshold, verbiage]);
+  }, [assets, colors, debugMode, idAutoCaptureEnabled, idCardAutoCaptureScoreThreshold, idCardFocusScoreThreshold, passportAutoCaptureScoreThreshold, passportFocusScoreThreshold, verbiage]);
   var signatureCaptureProps = React.useMemo(function () {
     return {
       verbiage: {
@@ -12136,6 +12143,7 @@ var FaceValidation = function FaceValidation(_a) {
     onDenied = _a.onDenied,
     onExitAfterFailure = _a.onExitAfterFailure,
     assets = _a.assets,
+    colors = _a.colors,
     verbiage = _a.verbiage,
     _e = _a.geolocationEnabled,
     geolocationEnabled = _e === void 0 ? true : _e,
@@ -12152,10 +12160,11 @@ var FaceValidation = function FaceValidation(_a) {
       onTimeout: onDenied,
       onExitAfterFailure: onExitAfterFailure,
       assets: assets,
+      colors: colors,
       verbiage: verbiage,
       debugMode: debugMode
     };
-  }, [assets, debugMode, onApproved, onComplete, onDenied, onExitAfterFailure, timeoutDurationMs, verbiage]);
+  }, [assets, colors, debugMode, onApproved, onComplete, onDenied, onExitAfterFailure, timeoutDurationMs, verbiage]);
   return /*#__PURE__*/React__default['default'].createElement(SubmissionProvider, {
     action: SubmissionAction.NONE,
     environment: submissionEnvironment,
@@ -12205,10 +12214,12 @@ var IdAndFaceValidation = function IdAndFaceValidation(_a) {
     _j = _a.passportFocusScoreThreshold,
     passportFocusScoreThreshold = _j === void 0 ? 0.3 : _j,
     idCaptureAssets = _a.idCaptureAssets,
+    idCaptureColors = _a.idCaptureColors,
     idCaptureVerbiage = _a.idCaptureVerbiage,
     _k = _a.faceLivenessTimeoutDurationMs,
     faceLivenessTimeoutDurationMs = _k === void 0 ? 15000 : _k,
     faceLivenessAssets = _a.faceLivenessAssets,
+    faceLivenessColors = _a.faceLivenessColors,
     faceLivenessVerbiage = _a.faceLivenessVerbiage,
     onBeforeSubmit = _a.onBeforeSubmit,
     onComplete = _a.onComplete,
@@ -12231,6 +12242,7 @@ var IdAndFaceValidation = function IdAndFaceValidation(_a) {
   var idCaptureProps = React.useMemo(function () {
     return {
       assets: idCaptureAssets,
+      colors: idCaptureColors,
       verbiage: idCaptureVerbiage,
       autoCaptureEnabled: idAutoCaptureEnabled,
       idCardAutoCaptureScoreThreshold: idCardAutoCaptureScoreThreshold,
@@ -12240,17 +12252,18 @@ var IdAndFaceValidation = function IdAndFaceValidation(_a) {
       passportFocusScoreThreshold: passportFocusScoreThreshold,
       debugMode: debugMode
     };
-  }, [debugMode, idAutoCaptureEnabled, idCaptureAssets, idCaptureVerbiage, idCardAutoCaptureScoreThreshold, idCardFocusScoreThreshold, mrzDetectionScoreThreshold, passportAutoCaptureScoreThreshold, passportFocusScoreThreshold]);
+  }, [debugMode, idAutoCaptureEnabled, idCaptureAssets, idCaptureColors, idCaptureVerbiage, idCardAutoCaptureScoreThreshold, idCardFocusScoreThreshold, mrzDetectionScoreThreshold, passportAutoCaptureScoreThreshold, passportFocusScoreThreshold]);
   var faceLivenessProps = React.useMemo(function () {
     return {
       timeoutDurationMs: faceLivenessTimeoutDurationMs,
       onTimeout: onDenied,
       onExitAfterFailure: onExitAfterFailure,
       assets: faceLivenessAssets,
+      colors: faceLivenessColors,
       verbiage: faceLivenessVerbiage,
       debugMode: debugMode
     };
-  }, [debugMode, faceLivenessAssets, faceLivenessTimeoutDurationMs, faceLivenessVerbiage, onDenied, onExitAfterFailure]);
+  }, [debugMode, faceLivenessAssets, faceLivenessColors, faceLivenessTimeoutDurationMs, faceLivenessVerbiage, onDenied, onExitAfterFailure]);
   var signatureCaptureProps = React.useMemo(function () {
     return {
       verbiage: {
@@ -12338,10 +12351,12 @@ var CustomerIdAndBiometricsEnrollment = function CustomerIdAndBiometricsEnrollme
     _j = _a.passportFocusScoreThreshold,
     passportFocusScoreThreshold = _j === void 0 ? 0.3 : _j,
     idCaptureAssets = _a.idCaptureAssets,
+    idCaptureColors = _a.idCaptureColors,
     idCaptureVerbiage = _a.idCaptureVerbiage,
     _k = _a.faceLivenessTimeoutDurationMs,
     faceLivenessTimeoutDurationMs = _k === void 0 ? 15000 : _k,
     faceLivenessAssets = _a.faceLivenessAssets,
+    faceLivenessColors = _a.faceLivenessColors,
     faceLivenessVerbiage = _a.faceLivenessVerbiage,
     onBeforeSubmit = _a.onBeforeSubmit,
     onComplete = _a.onComplete,
@@ -12364,6 +12379,7 @@ var CustomerIdAndBiometricsEnrollment = function CustomerIdAndBiometricsEnrollme
   var idCaptureProps = React.useMemo(function () {
     return {
       assets: idCaptureAssets,
+      colors: idCaptureColors,
       verbiage: idCaptureVerbiage,
       autoCaptureEnabled: idAutoCaptureEnabled,
       idCardAutoCaptureScoreThreshold: idCardAutoCaptureScoreThreshold,
@@ -12373,16 +12389,17 @@ var CustomerIdAndBiometricsEnrollment = function CustomerIdAndBiometricsEnrollme
       passportFocusScoreThreshold: passportFocusScoreThreshold,
       debugMode: debugMode
     };
-  }, [debugMode, idAutoCaptureEnabled, idCaptureAssets, idCaptureVerbiage, idCardAutoCaptureScoreThreshold, idCardFocusScoreThreshold, mrzDetectionScoreThreshold, passportAutoCaptureScoreThreshold, passportFocusScoreThreshold]);
+  }, [debugMode, idAutoCaptureEnabled, idCaptureAssets, idCaptureColors, idCaptureVerbiage, idCardAutoCaptureScoreThreshold, idCardFocusScoreThreshold, mrzDetectionScoreThreshold, passportAutoCaptureScoreThreshold, passportFocusScoreThreshold]);
   var faceLivenessProps = React.useMemo(function () {
     return {
       onExitAfterFailure: onExitAfterFailure,
       timeoutDurationMs: faceLivenessTimeoutDurationMs,
       assets: faceLivenessAssets,
+      colors: faceLivenessColors,
       verbiage: faceLivenessVerbiage,
       debugMode: debugMode
     };
-  }, [debugMode, faceLivenessAssets, faceLivenessTimeoutDurationMs, faceLivenessVerbiage, onExitAfterFailure]);
+  }, [debugMode, faceLivenessAssets, faceLivenessColors, faceLivenessTimeoutDurationMs, faceLivenessVerbiage, onExitAfterFailure]);
   var signatureCaptureProps = React.useMemo(function () {
     return {
       verbiage: {
@@ -12515,20 +12532,22 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
     onCaptureGuidanceTimeout = _a.onCaptureGuidanceTimeout,
     onExit = _a.onExit,
     captureGuidanceTimeoutDurationMs = _a.captureGuidanceTimeoutDurationMs,
-    _b = _a.verbiage,
-    verbiage = _b === void 0 ? {} : _b,
-    _c = _a.debugMode,
-    debugMode = _c === void 0 ? false : _c;
-  var _d = React.useReducer(reducer$1, initialState$1),
-    state = _d[0],
-    dispatch = _d[1];
+    _b = _a.colors,
+    colors = _b === void 0 ? {} : _b,
+    _c = _a.verbiage,
+    verbiage = _c === void 0 ? {} : _c,
+    _d = _a.debugMode,
+    debugMode = _d === void 0 ? false : _d;
+  var _e = React.useReducer(reducer$1, initialState$1),
+    state = _e[0],
+    dispatch = _e[1];
   var frame = state.frame,
     face = state.face;
-  var _e = React.useContext(SubmissionContext),
-    submit = _e.submit,
-    submissionResponse = _e.submissionResponse,
-    selfieImage = _e.selfieImage,
-    setSelfieImage = _e.setSelfieImage;
+  var _f = React.useContext(SubmissionContext),
+    submit = _f.submit,
+    submissionResponse = _f.submissionResponse,
+    selfieImage = _f.selfieImage,
+    setSelfieImage = _f.setSelfieImage;
   var onSelfieCaptured = React.useCallback(function (frame, face) {
     dispatch({
       type: 'verificationReady',
@@ -12601,6 +12620,7 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
     onTimeout: onCaptureGuidanceTimeout,
     onExit: onExit,
     timeoutDurationMs: captureGuidanceTimeoutDurationMs,
+    colors: colors,
     verbiage: verbiage,
     debugMode: debugMode
   });
@@ -12711,17 +12731,19 @@ var CustomerVerificationWizard = function CustomerVerificationWizard(_a) {
     captureGuidanceTimeoutDurationMs = _a.captureGuidanceTimeoutDurationMs,
     _b = _a.assets,
     assets = _b === void 0 ? {} : _b,
-    _c = _a.verbiage,
-    verbiage = _c === void 0 ? {} : _c,
-    _d = _a.debugMode,
-    debugMode = _d === void 0 ? false : _d;
-  var _e = React.useContext(SubmissionContext),
-    submissionResponse = _e.submissionResponse,
-    selfieImage = _e.selfieImage;
+    _c = _a.colors,
+    colors = _c === void 0 ? {} : _c,
+    _d = _a.verbiage,
+    verbiage = _d === void 0 ? {} : _d,
+    _e = _a.debugMode,
+    debugMode = _e === void 0 ? false : _e;
+  var _f = React.useContext(SubmissionContext),
+    submissionResponse = _f.submissionResponse,
+    selfieImage = _f.selfieImage;
   var releaseCameraAccess = React.useContext(CameraStateContext).releaseCameraAccess;
-  var _f = React.useState('LOADING'),
-    captureState = _f[0],
-    setCaptureState = _f[1];
+  var _g = React.useState('LOADING'),
+    captureState = _g[0],
+    setCaptureState = _g[1];
   var onCustomerMatchedCallback = React.useCallback(function (response) {
     return tslib.__awaiter(void 0, void 0, void 0, function () {
       return tslib.__generator(this, function (_a) {
@@ -12753,9 +12775,9 @@ var CustomerVerificationWizard = function CustomerVerificationWizard(_a) {
       onCaptureGuidanceTimeout === null || onCaptureGuidanceTimeout === void 0 ? void 0 : onCaptureGuidanceTimeout();
     }, 0);
   }, [onCaptureGuidanceTimeout, releaseCameraAccess]);
-  var _g = React.useState(0),
-    attempt = _g[0],
-    setAttempt = _g[1];
+  var _h = React.useState(0),
+    attempt = _h[0],
+    setAttempt = _h[1];
   var onExitCallback = React.useCallback(function () {
     setAttempt(function (n) {
       return n + 1;
@@ -12771,6 +12793,7 @@ var CustomerVerificationWizard = function CustomerVerificationWizard(_a) {
           onCaptureGuidanceTimeout: onCaptureGuidanceTimeoutCallback,
           onExit: onExitCallback,
           captureGuidanceTimeoutDurationMs: captureGuidanceTimeoutDurationMs,
+          colors: colors,
           verbiage: verbiage,
           debugMode: debugMode
         });
@@ -12829,6 +12852,7 @@ var CustomerVerification = function CustomerVerification(_a) {
     _d = _a.timeoutDurationMs,
     timeoutDurationMs = _d === void 0 ? 15000 : _d,
     assets = _a.assets,
+    colors = _a.colors,
     verbiage = _a.verbiage,
     onBeforeSubmit = _a.onBeforeSubmit,
     onComplete = _a.onComplete,
@@ -12864,6 +12888,7 @@ var CustomerVerification = function CustomerVerification(_a) {
     onExitAfterFailure: onExitAfterFailure,
     captureGuidanceTimeoutDurationMs: timeoutDurationMs,
     assets: assets,
+    colors: colors,
     verbiage: verbiage,
     debugMode: debugMode
   }))));
@@ -12942,18 +12967,20 @@ var CustomerIdentificationCapture = function CustomerIdentificationCapture(_a) {
     onCaptureGuidanceTimeout = _a.onCaptureGuidanceTimeout,
     onExit = _a.onExit,
     captureGuidanceTimeoutDurationMs = _a.captureGuidanceTimeoutDurationMs,
-    _b = _a.verbiage,
-    verbiage = _b === void 0 ? {} : _b,
-    _c = _a.debugMode,
-    debugMode = _c === void 0 ? false : _c;
-  var _d = React.useReducer(reducer, initialState),
-    state = _d[0],
-    dispatch = _d[1];
-  var _e = React.useContext(SubmissionContext),
-    submit = _e.submit,
-    submissionResponse = _e.submissionResponse,
-    selfieImage = _e.selfieImage,
-    setSelfieImage = _e.setSelfieImage;
+    _b = _a.colors,
+    colors = _b === void 0 ? {} : _b,
+    _c = _a.verbiage,
+    verbiage = _c === void 0 ? {} : _c,
+    _d = _a.debugMode,
+    debugMode = _d === void 0 ? false : _d;
+  var _e = React.useReducer(reducer, initialState),
+    state = _e[0],
+    dispatch = _e[1];
+  var _f = React.useContext(SubmissionContext),
+    submit = _f.submit,
+    submissionResponse = _f.submissionResponse,
+    selfieImage = _f.selfieImage,
+    setSelfieImage = _f.setSelfieImage;
   var onSelfieCaptured = React.useCallback(function (frame, face) {
     dispatch({
       type: 'identificationReady',
@@ -13028,6 +13055,7 @@ var CustomerIdentificationCapture = function CustomerIdentificationCapture(_a) {
     onTimeout: onCaptureGuidanceTimeout,
     onExit: onExit,
     timeoutDurationMs: captureGuidanceTimeoutDurationMs,
+    colors: colors,
     verbiage: verbiage,
     debugMode: debugMode
   });
@@ -13138,17 +13166,19 @@ var CustomerIdentificationWizard = function CustomerIdentificationWizard(_a) {
     captureGuidanceTimeoutDurationMs = _a.captureGuidanceTimeoutDurationMs,
     _b = _a.assets,
     assets = _b === void 0 ? {} : _b,
-    _c = _a.verbiage,
-    verbiage = _c === void 0 ? {} : _c,
-    _d = _a.debugMode,
-    debugMode = _d === void 0 ? false : _d;
-  var _e = React.useContext(SubmissionContext),
-    submissionResponse = _e.submissionResponse,
-    selfieImage = _e.selfieImage;
+    _c = _a.colors,
+    colors = _c === void 0 ? {} : _c,
+    _d = _a.verbiage,
+    verbiage = _d === void 0 ? {} : _d,
+    _e = _a.debugMode,
+    debugMode = _e === void 0 ? false : _e;
+  var _f = React.useContext(SubmissionContext),
+    submissionResponse = _f.submissionResponse,
+    selfieImage = _f.selfieImage;
   var releaseCameraAccess = React.useContext(CameraStateContext).releaseCameraAccess;
-  var _f = React.useState('LOADING'),
-    captureState = _f[0],
-    setCaptureState = _f[1];
+  var _g = React.useState('LOADING'),
+    captureState = _g[0],
+    setCaptureState = _g[1];
   var onCustomerMatchedCallback = React.useCallback(function (response) {
     return tslib.__awaiter(void 0, void 0, void 0, function () {
       return tslib.__generator(this, function (_a) {
@@ -13180,9 +13210,9 @@ var CustomerIdentificationWizard = function CustomerIdentificationWizard(_a) {
       onCaptureGuidanceTimeout === null || onCaptureGuidanceTimeout === void 0 ? void 0 : onCaptureGuidanceTimeout();
     }, 0);
   }, [onCaptureGuidanceTimeout, releaseCameraAccess]);
-  var _g = React.useState(0),
-    attempt = _g[0],
-    setAttempt = _g[1];
+  var _h = React.useState(0),
+    attempt = _h[0],
+    setAttempt = _h[1];
   var onExitCallback = React.useCallback(function () {
     setAttempt(function (n) {
       return n + 1;
@@ -13198,6 +13228,7 @@ var CustomerIdentificationWizard = function CustomerIdentificationWizard(_a) {
           onCaptureGuidanceTimeout: onCaptureGuidanceTimeoutCallback,
           onExit: onExitCallback,
           captureGuidanceTimeoutDurationMs: captureGuidanceTimeoutDurationMs,
+          colors: colors,
           verbiage: verbiage,
           debugMode: debugMode
         });
@@ -13262,6 +13293,7 @@ var CustomerIdentification = function CustomerIdentification(_a) {
     onCaptureGuidanceTimeout = _a.onCaptureGuidanceTimeout,
     onExitAfterFailure = _a.onExitAfterFailure,
     assets = _a.assets,
+    colors = _a.colors,
     verbiage = _a.verbiage,
     geolocationEnabled = _a.geolocationEnabled,
     _e = _a.geolocationRequired,
@@ -13291,6 +13323,7 @@ var CustomerIdentification = function CustomerIdentification(_a) {
     onCaptureGuidanceTimeout: onCaptureGuidanceTimeout,
     captureGuidanceTimeoutDurationMs: timeoutDurationMs,
     assets: assets,
+    colors: colors,
     verbiage: verbiage,
     debugMode: debugMode
   }))));
@@ -13348,6 +13381,7 @@ var CustomerBiometricsEnrollment = function CustomerBiometricsEnrollment(_a) {
     _d = _a.timeoutDurationMs,
     timeoutDurationMs = _d === void 0 ? 15000 : _d,
     assets = _a.assets,
+    colors = _a.colors,
     verbiage = _a.verbiage,
     onBeforeSubmit = _a.onBeforeSubmit,
     onComplete = _a.onComplete,
@@ -13372,10 +13406,11 @@ var CustomerBiometricsEnrollment = function CustomerBiometricsEnrollment(_a) {
       onExitAfterFailure: onExitAfterFailure,
       timeoutDurationMs: timeoutDurationMs,
       assets: assets,
+      colors: colors,
       verbiage: verbiage,
       debugMode: debugMode
     };
-  }, [assets, debugMode, onExitAfterFailure, timeoutDurationMs, verbiage]);
+  }, [assets, colors, debugMode, onExitAfterFailure, timeoutDurationMs, verbiage]);
   var signatureCaptureProps = React.useMemo(function () {
     return {
       verbiage: {