idmission-web-sdk 0.0.38 → 0.0.39

package/dist/sdk2.umd.development.js

@@ -12139,43 +12139,45 @@
         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(),
-        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(),
+        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 = 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();
       }, []);
@@ -12204,9 +12206,9 @@
       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() {
@@ -12381,9 +12383,11 @@
           }
         });
       }
-      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"
@@ -12394,7 +12398,7 @@
         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) {
@@ -12989,25 +12993,27 @@
         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 = useTranslation().t;
       var operationStartedAt = React.useRef();
       React.useEffect(function () {
@@ -13099,9 +13105,9 @@
           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) {
@@ -13116,16 +13122,16 @@
           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,
@@ -13196,6 +13202,7 @@
               processingScreen: flipIdPrompt,
               processingDelay: 3500,
               assets: idCardFrontAssets,
+              colors: colors,
               verbiage: idCardFrontVerbiage,
               debugMode: debugMode
             });
@@ -13215,6 +13222,7 @@
               onCapture: onCapture,
               onExit: onExit,
               assets: idCardBackAssets,
+              colors: colors,
               verbiage: idCardBackVerbiage,
               debugMode: debugMode
             });
@@ -13234,6 +13242,7 @@
               onCapture: onCapture,
               onExit: onExit,
               assets: passportAssets,
+              colors: colors,
               verbiage: passportVerbiage,
               debugMode: debugMode
             });
@@ -13544,6 +13553,19 @@
       }, children);
     };
 
+    var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = __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 = __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,
@@ -13647,24 +13669,26 @@
         _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 = useTranslation().t;
-      var _g = useResizeObserver(),
-        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(),
+        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) {
@@ -13687,9 +13711,9 @@
           });
         });
       }, [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) {
@@ -13733,12 +13757,12 @@
           });
         })();
       }, [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());
@@ -13759,36 +13783,24 @@
         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) {
@@ -13893,14 +13905,16 @@
         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 = 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({
@@ -13968,9 +13982,9 @@
           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,
@@ -13978,6 +13992,7 @@
         onExit: onExit,
         timeoutDurationMs: timeoutDurationMs,
         guidanceMessage: guidanceMessage,
+        colors: colors,
         verbiage: verbiage,
         debugMode: debugMode
       });
@@ -14169,26 +14184,28 @@
         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();
@@ -14234,9 +14251,9 @@
         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;
@@ -14253,6 +14270,7 @@
               onTimeout: onTimeoutCallback,
               onExit: onExitCallback,
               timeoutDurationMs: timeoutDurationMs,
+              colors: colors,
               verbiage: verbiage,
               debugMode: debugMode
             });
@@ -14780,8 +14798,8 @@
       return truncated;
     }
 
-    var Spinner = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = __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 = __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,
@@ -15547,18 +15565,11 @@
       return signatureData;
     }
 
-    var SignatureCanvasContainer = styled__default['default'].div(templateObject_1$1 || (templateObject_1$1 = __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 = __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 = __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 = __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 = __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 = __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 = __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 = __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,
@@ -16259,20 +16270,22 @@
         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 {
@@ -16284,10 +16297,11 @@
           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: {
@@ -16362,6 +16376,7 @@
         onDenied = _a.onDenied,
         onExitAfterFailure = _a.onExitAfterFailure,
         assets = _a.assets,
+        colors = _a.colors,
         verbiage = _a.verbiage,
         _e = _a.geolocationEnabled,
         geolocationEnabled = _e === void 0 ? true : _e,
@@ -16378,10 +16393,11 @@
           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,
@@ -16431,10 +16447,12 @@
         _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,
@@ -16457,6 +16475,7 @@
       var idCaptureProps = React.useMemo(function () {
         return {
           assets: idCaptureAssets,
+          colors: idCaptureColors,
           verbiage: idCaptureVerbiage,
           autoCaptureEnabled: idAutoCaptureEnabled,
           idCardAutoCaptureScoreThreshold: idCardAutoCaptureScoreThreshold,
@@ -16466,17 +16485,18 @@
           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: {
@@ -16564,10 +16584,12 @@
         _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,
@@ -16590,6 +16612,7 @@
       var idCaptureProps = React.useMemo(function () {
         return {
           assets: idCaptureAssets,
+          colors: idCaptureColors,
           verbiage: idCaptureVerbiage,
           autoCaptureEnabled: idAutoCaptureEnabled,
           idCardAutoCaptureScoreThreshold: idCardAutoCaptureScoreThreshold,
@@ -16599,16 +16622,17 @@
           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: {
@@ -16741,20 +16765,22 @@
         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',
@@ -16827,6 +16853,7 @@
         onTimeout: onCaptureGuidanceTimeout,
         onExit: onExit,
         timeoutDurationMs: captureGuidanceTimeoutDurationMs,
+        colors: colors,
         verbiage: verbiage,
         debugMode: debugMode
       });
@@ -16937,17 +16964,19 @@
         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 __awaiter(void 0, void 0, void 0, function () {
           return __generator(this, function (_a) {
@@ -16979,9 +17008,9 @@
           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;
@@ -16997,6 +17026,7 @@
               onCaptureGuidanceTimeout: onCaptureGuidanceTimeoutCallback,
               onExit: onExitCallback,
               captureGuidanceTimeoutDurationMs: captureGuidanceTimeoutDurationMs,
+              colors: colors,
               verbiage: verbiage,
               debugMode: debugMode
             });
@@ -17055,6 +17085,7 @@
         _d = _a.timeoutDurationMs,
         timeoutDurationMs = _d === void 0 ? 15000 : _d,
         assets = _a.assets,
+        colors = _a.colors,
         verbiage = _a.verbiage,
         onBeforeSubmit = _a.onBeforeSubmit,
         onComplete = _a.onComplete,
@@ -17090,6 +17121,7 @@
         onExitAfterFailure: onExitAfterFailure,
         captureGuidanceTimeoutDurationMs: timeoutDurationMs,
         assets: assets,
+        colors: colors,
         verbiage: verbiage,
         debugMode: debugMode
       }))));
@@ -17168,18 +17200,20 @@
         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',
@@ -17254,6 +17288,7 @@
         onTimeout: onCaptureGuidanceTimeout,
         onExit: onExit,
         timeoutDurationMs: captureGuidanceTimeoutDurationMs,
+        colors: colors,
         verbiage: verbiage,
         debugMode: debugMode
       });
@@ -17364,17 +17399,19 @@
         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 __awaiter(void 0, void 0, void 0, function () {
           return __generator(this, function (_a) {
@@ -17406,9 +17443,9 @@
           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;
@@ -17424,6 +17461,7 @@
               onCaptureGuidanceTimeout: onCaptureGuidanceTimeoutCallback,
               onExit: onExitCallback,
               captureGuidanceTimeoutDurationMs: captureGuidanceTimeoutDurationMs,
+              colors: colors,
               verbiage: verbiage,
               debugMode: debugMode
             });
@@ -17488,6 +17526,7 @@
         onCaptureGuidanceTimeout = _a.onCaptureGuidanceTimeout,
         onExitAfterFailure = _a.onExitAfterFailure,
         assets = _a.assets,
+        colors = _a.colors,
         verbiage = _a.verbiage,
         geolocationEnabled = _a.geolocationEnabled,
         _e = _a.geolocationRequired,
@@ -17517,6 +17556,7 @@
         onCaptureGuidanceTimeout: onCaptureGuidanceTimeout,
         captureGuidanceTimeoutDurationMs: timeoutDurationMs,
         assets: assets,
+        colors: colors,
         verbiage: verbiage,
         debugMode: debugMode
       }))));
@@ -17574,6 +17614,7 @@
         _d = _a.timeoutDurationMs,
         timeoutDurationMs = _d === void 0 ? 15000 : _d,
         assets = _a.assets,
+        colors = _a.colors,
         verbiage = _a.verbiage,
         onBeforeSubmit = _a.onBeforeSubmit,
         onComplete = _a.onComplete,
@@ -17598,10 +17639,11 @@
           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: {