idmission-web-sdk 1.0.142 → 1.0.144

package/dist/components/id_capture/IdCapture.d.ts

@@ -53,11 +53,10 @@ export type IdCaptureProps = {
     onPrediction?: (prediction: IdCapturePrediction) => void;
     onBarcodeScanned?: (result: PDF417DetectionResult) => void;
     onCapture?: (frame: string, width: number, height: number, metadata: CaptureAttemptMetadata) => void;
-    onExit?: () => void;
     assets?: IdCaptureAssets;
     classNames?: IdCaptureClassNames;
     colors?: IdCaptureColors;
     verbiage?: IdCaptureVerbiage;
     debugMode?: boolean;
 };
-export declare const IdCapture: ({ requiredDocumentType, autoCaptureEnabled, autoCaptureScoreThreshold, autoCaptureGoodFramesRequired, autoCaptureBarcodeRequired, mrzDetectionScoreThreshold, passportPageDetectionThreshold, pdf417DetectionThreshold, focusScoreThreshold, barcodeScanningEnabled, maxBarcodeScanAttempts, guidanceMessage, guidanceSatisfied, onPrediction, onBarcodeScanned, onCapture, onExit, assets, classNames, colors, verbiage: rawVerbiage, debugMode, }: IdCaptureProps) => React.ReactElement;
+export declare const IdCapture: ({ requiredDocumentType, autoCaptureEnabled, autoCaptureScoreThreshold, autoCaptureGoodFramesRequired, autoCaptureBarcodeRequired, mrzDetectionScoreThreshold, passportPageDetectionThreshold, pdf417DetectionThreshold, focusScoreThreshold, barcodeScanningEnabled, maxBarcodeScanAttempts, guidanceMessage, guidanceSatisfied, onPrediction, onBarcodeScanned, onCapture, assets, classNames, colors, verbiage: rawVerbiage, debugMode, }: IdCaptureProps) => React.ReactElement;

package/dist/components/id_capture/IdCaptureModelsProvider.d.ts

@@ -34,11 +34,6 @@ export type IdCaptureThresholds = {
         mobile?: number;
     };
 };
-export declare const PREDICTION_POSITIONS: {
-    boxes: number;
-    scores: number;
-    labels: number;
-};
 export type BestFrame = {
     canvas: HTMLCanvasElement;
     boundingBox?: number[];

package/dist/lib/models/DocumentDetection.d.ts

@@ -1,7 +1,14 @@
 import * as tf from '@tensorflow/tfjs';
 export type DocumentType = 'none' | 'idCard' | 'passport';
-export declare let documentDetectionModel: tf.GraphModel | null;
-export declare function loadDocumentDetectionModel(url: string): Promise<tf.GraphModel>;
+export interface DocumentDetectionModel extends tf.GraphModel {
+    outputPositions: {
+        boxes: number;
+        scores: number;
+        labels: number;
+    };
+}
+export declare let documentDetectionModel: DocumentDetectionModel | null;
+export declare function loadDocumentDetectionModel(url: string): Promise<DocumentDetectionModel>;
 export declare function unloadDocumentDetectionModel(): void;
 export type RawEdgeDetectionResult = tf.Tensor<tf.Rank>[];
 export declare function makeDocumentDetectionPredictions(model: tf.GraphModel, image: ImageBitmap | ImageData | HTMLImageElement): Promise<[RawEdgeDetectionResult, () => void]>;

package/dist/sdk2.cjs.development.js

@@ -47,7 +47,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.142';
+var webSdkVersion = '1.0.144';
 
 function getPlatform() {
   if (typeof window === 'undefined') return;
@@ -1903,7 +1903,7 @@ var CameraProvider = function CameraProvider(_a) {
 var documentDetectionModel;
 function loadDocumentDetectionModel(url) {
   return tslib.__awaiter(this, void 0, void 0, function () {
-    var zeroes, tfInt32, tf4d_, tf4d, _a, _b;
+    var zeroes, tfInt32, tf4d_, tf4d, _a, _b, outputKeys;
     return tslib.__generator(this, function (_c) {
       switch (_c.label) {
         case 0:
@@ -1928,6 +1928,14 @@ function loadDocumentDetectionModel(url) {
           tf4d.dispose();
           tf4d_.dispose();
           tf__namespace.dispose(zeroes);
+          outputKeys = documentDetectionModel.outputs.map(function (o) {
+            return o.name;
+          });
+          documentDetectionModel.outputPositions = {
+            boxes: outputKeys.indexOf('Identity_1'),
+            scores: outputKeys.indexOf('Identity_4'),
+            labels: outputKeys.indexOf('Identity_2')
+          };
           return [2 /*return*/, documentDetectionModel];
       }
     });
@@ -8646,12 +8654,6 @@ function cropToBoundingBox(frame, bbox, canvas) {
   return canvas;
 }
 
-// export const PREDICTION_POSITIONS = { boxes: 1, scores: 4, labels: 2 } // for docdetectuint8
-var PREDICTION_POSITIONS = {
-  boxes: 0,
-  scores: 7,
-  labels: 4
-}; // for documentdetectionquantized
 var IdCaptureModelsContext = /*#__PURE__*/React.createContext({
   ready: false,
   working: {
@@ -8679,7 +8681,7 @@ var IdCaptureModelsContext = /*#__PURE__*/React.createContext({
   bestFrameDetectionScore: 0,
   bestFrameFocusScore: 0
 });
-var defaultDocumentDetectionModelUrl = "".concat(DEFAULT_CDN_URL, "/models/documentdetection448/model.json");
+var defaultDocumentDetectionModelUrl = "".concat(DEFAULT_CDN_URL, "/models/docdetect20240125/model.json");
 var defaultFocusModelUrl = "".concat(DEFAULT_CDN_URL, "/models/focus/model.json");
 var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
   var children = _a.children,
@@ -9014,13 +9016,13 @@ function makeDocumentDetectionPredictions(image, logPredictions) {
               return r.arraySync();
             }));
           }
-          return [4 /*yield*/, predictions[PREDICTION_POSITIONS.boxes].array()];
+          return [4 /*yield*/, predictions[documentDetectionModel.outputPositions.boxes].array()];
         case 4:
           boxes = _e.sent()[0];
-          return [4 /*yield*/, predictions[PREDICTION_POSITIONS.scores].array()];
+          return [4 /*yield*/, predictions[documentDetectionModel.outputPositions.scores].array()];
         case 5:
           scores = _e.sent()[0];
-          return [4 /*yield*/, predictions[PREDICTION_POSITIONS.labels].array()];
+          return [4 /*yield*/, predictions[documentDetectionModel.outputPositions.labels].array()];
         case 6:
           labels = _e.sent()[0];
           labels = labels.map(function (l) {
@@ -9549,53 +9551,7 @@ function SelfieCaptureFaceKeypoint(_a) {
 }
 var templateObject_1$w, templateObject_2$l, templateObject_3$e, templateObject_4$a;
 
-var ExitCaptureStyledButton = styled__default['default'].button(templateObject_1$v || (templateObject_1$v = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n  padding: 8px;\n  box-sizing: border-box;\n  display: flex;\n\n  &:hover {\n    background: #ddd;\n  }\n\n  & > svg {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n  padding: 8px;\n  box-sizing: border-box;\n  display: flex;\n\n  &:hover {\n    background: #ddd;\n  }\n\n  & > svg {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n"])));
-var ExitCaptureButton = function ExitCaptureButton(_a) {
-  var onClick = _a.onClick,
-    className = _a.className;
-  return /*#__PURE__*/React__default['default'].createElement(ExitCaptureStyledButton, {
-    onClick: onClick,
-    className: className
-  }, /*#__PURE__*/React__default['default'].createElement("svg", {
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    x: "0px",
-    y: "0px",
-    viewBox: "19.3 19.3 25.499999999999996 25.499999999999996",
-    enableBackground: "new 0 0 64 64",
-    width: 16,
-    height: 16
-  }, /*#__PURE__*/React__default['default'].createElement("g", {
-    id: "close-outline-bot_x5F_s1g1_x5F_s2g2_x5F_s3g1_x5F_s4g1"
-  }, /*#__PURE__*/React__default['default'].createElement("line", {
-    fill: "none",
-    stroke: "#000000",
-    strokeWidth: "1",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeMiterlimit: "10",
-    x1: "19.75",
-    y1: "44.25",
-    x2: "44.25",
-    y2: "19.75"
-  })), /*#__PURE__*/React__default['default'].createElement("g", {
-    id: "close-outline-top_x5F_s1g1_x5F_s2g2_x5F_s3g1_x5F_s4g1"
-  }, /*#__PURE__*/React__default['default'].createElement("line", {
-    fill: "none",
-    stroke: "#000000",
-    strokeWidth: "1",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeMiterlimit: "10",
-    x1: "44.25",
-    y1: "44.25",
-    x2: "19.75",
-    y2: "19.75"
-  }))));
-};
-var templateObject_1$v;
-
-var Spinner = styled__default['default'].div(templateObject_1$u || (templateObject_1$u = tslib.__makeTemplateObject(["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (_a) {
+var Spinner = styled__default['default'].div(templateObject_1$v || (templateObject_1$v = tslib.__makeTemplateObject(["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (_a) {
   var $size = _a.$size;
   return $size !== null && $size !== void 0 ? $size : 80;
 }, function (_a) {
@@ -9620,7 +9576,7 @@ var Spinner = styled__default['default'].div(templateObject_1$u || (templateObje
   var $color = _a.$color;
   return $color !== null && $color !== void 0 ? $color : '#888';
 });
-var templateObject_1$u;
+var templateObject_1$v;
 
 var IdCaptureImagePreview = function IdCaptureImagePreview(_a) {
   var _b = _a.classNames,
@@ -9661,11 +9617,11 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
     className: classNames.image
   })));
 };
-var StyledSpinner = styled__default['default'](Spinner)(templateObject_1$t || (templateObject_1$t = tslib.__makeTemplateObject(["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"], ["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"])));
+var StyledSpinner = styled__default['default'](Spinner)(templateObject_1$u || (templateObject_1$u = tslib.__makeTemplateObject(["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"], ["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"])));
 var ImagePreviewWrapper = styled__default['default'].div(templateObject_2$k || (templateObject_2$k = tslib.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"], ["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"])));
 var ImagePreviewText = styled__default['default'].div(templateObject_3$d || (templateObject_3$d = tslib.__makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"], ["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"])));
 var ImagePreviewImageWrapper = styled__default['default'].div(templateObject_4$9 || (templateObject_4$9 = tslib.__makeTemplateObject(["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"], ["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"])));
-var templateObject_1$t, templateObject_2$k, templateObject_3$d, templateObject_4$9;
+var templateObject_1$u, templateObject_2$k, templateObject_3$d, templateObject_4$9;
 
 var enTranslation = {};
 
@@ -9790,7 +9746,7 @@ function useTranslations(verbiage, fallbacks) {
   }, [fallbacks, i18n.language, t, verbiage]);
 }
 
-var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$s || (templateObject_1$s = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
+var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$t || (templateObject_1$t = 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';
 });
@@ -9801,7 +9757,7 @@ var GuidanceMessage = styled__default['default'].div(templateObject_2$j || (temp
   var _a, _b, _c, _d, _e, _f;
   return (_f = (_a = props.$textColor) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : 'black';
 });
-var templateObject_1$s, templateObject_2$j;
+var templateObject_1$t, templateObject_2$j;
 
 var IdCapture = function IdCapture(_a) {
   var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
@@ -9831,7 +9787,6 @@ var IdCapture = function IdCapture(_a) {
     onPrediction = _a.onPrediction,
     onBarcodeScanned = _a.onBarcodeScanned,
     onCapture = _a.onCapture,
-    onExit = _a.onExit,
     _y = _a.assets,
     assets = _y === void 0 ? {} : _y,
     _z = _a.classNames,
@@ -10113,10 +10068,7 @@ var IdCapture = function IdCapture(_a) {
       scaling: debugScalingDetails,
       flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
     });
-  }))), debugMode && ( /*#__PURE__*/React__default['default'].createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React__default['default'].createElement("br", null), modelsReady ? ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, state.documentDetectionThresholdMet ? '✅' : '❌', " Document Score: ", state.documentDetectionScore, " (", state.documentType, ")", /*#__PURE__*/React__default['default'].createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__default['default'].createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore, /*#__PURE__*/React__default['default'].createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold, barcodeScanningEnabled && state.autoCaptureBarcodeRequired ? ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("br", null), state.barcodeResult ? '✅' : '❌', " Barcode Scanned (", supportsNativeBarcodeScanning() ? 'Native' : 'ZXing', ",", ' ', state.barcodeScanFailedAttempts, "/", state.maxBarcodeScanAttempts, " failed attempts)")) : null)) : ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u274C Models not ready")))), /*#__PURE__*/React__default['default'].createElement(ExitCaptureButton, {
-    onClick: onExit,
-    className: classNames.exitCaptureBtn
-  }));
+  }))), debugMode && ( /*#__PURE__*/React__default['default'].createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React__default['default'].createElement("br", null), modelsReady ? ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, state.documentDetectionThresholdMet ? '✅' : '❌', " Document Score: ", state.documentDetectionScore, " (", state.documentType, ")", /*#__PURE__*/React__default['default'].createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__default['default'].createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore, /*#__PURE__*/React__default['default'].createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold, barcodeScanningEnabled && state.autoCaptureBarcodeRequired ? ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("br", null), state.barcodeResult ? '✅' : '❌', " Barcode Scanned (", supportsNativeBarcodeScanning() ? 'Native' : 'ZXing', ",", ' ', state.barcodeScanFailedAttempts, "/", state.maxBarcodeScanAttempts, " failed attempts)")) : null)) : ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u274C Models not ready")))));
 };
 var timeSince = function timeSince(t) {
   if (!t) return 0;
@@ -10162,11 +10114,57 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
     finished: true
   }, verbiage.retryBtnText)));
 };
-var StyledOverlayInner$2 = styled__default['default'](OverlayInner)(templateObject_1$r || (templateObject_1$r = tslib.__makeTemplateObject(["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"], ["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"])));
+var StyledOverlayInner$2 = styled__default['default'](OverlayInner)(templateObject_1$s || (templateObject_1$s = tslib.__makeTemplateObject(["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"], ["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"])));
 var StyledOverlayImageContainer = styled__default['default'](OverlayImageContainer)(templateObject_2$i || (templateObject_2$i = tslib.__makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
 var Description$3 = styled__default['default'].p(templateObject_3$c || (templateObject_3$c = tslib.__makeTemplateObject(["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"], ["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"])));
 var RetryButton = styled__default['default'](LoaderButton)(templateObject_4$8 || (templateObject_4$8 = tslib.__makeTemplateObject(["\n  width: 200px;\n  margin: 0 auto;\n"], ["\n  width: 200px;\n  margin: 0 auto;\n"])));
-var templateObject_1$r, templateObject_2$i, templateObject_3$c, templateObject_4$8;
+var templateObject_1$s, templateObject_2$i, templateObject_3$c, templateObject_4$8;
+
+var ExitCaptureStyledButton = styled__default['default'].button(templateObject_1$r || (templateObject_1$r = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n  padding: 8px;\n  box-sizing: border-box;\n  display: flex;\n\n  &:hover {\n    background: #ddd;\n  }\n\n  & > svg {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n  padding: 8px;\n  box-sizing: border-box;\n  display: flex;\n\n  &:hover {\n    background: #ddd;\n  }\n\n  & > svg {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n"])));
+var ExitCaptureButton = function ExitCaptureButton(_a) {
+  var onClick = _a.onClick,
+    className = _a.className;
+  return /*#__PURE__*/React__default['default'].createElement(ExitCaptureStyledButton, {
+    onClick: onClick,
+    className: className
+  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    x: "0px",
+    y: "0px",
+    viewBox: "19.3 19.3 25.499999999999996 25.499999999999996",
+    enableBackground: "new 0 0 64 64",
+    width: 16,
+    height: 16
+  }, /*#__PURE__*/React__default['default'].createElement("g", {
+    id: "close-outline-bot_x5F_s1g1_x5F_s2g2_x5F_s3g1_x5F_s4g1"
+  }, /*#__PURE__*/React__default['default'].createElement("line", {
+    fill: "none",
+    stroke: "#000000",
+    strokeWidth: "1",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeMiterlimit: "10",
+    x1: "19.75",
+    y1: "44.25",
+    x2: "44.25",
+    y2: "19.75"
+  })), /*#__PURE__*/React__default['default'].createElement("g", {
+    id: "close-outline-top_x5F_s1g1_x5F_s2g2_x5F_s3g1_x5F_s4g1"
+  }, /*#__PURE__*/React__default['default'].createElement("line", {
+    fill: "none",
+    stroke: "#000000",
+    strokeWidth: "1",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeMiterlimit: "10",
+    x1: "44.25",
+    y1: "44.25",
+    x2: "19.75",
+    y2: "19.75"
+  }))));
+};
+var templateObject_1$r;
 
 var ContinuityCameraCheckboxContainer = styled__default['default'].div(templateObject_1$q || (templateObject_1$q = tslib.__makeTemplateObject(["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"], ["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"])));
 var ContinuityCameraCheckbox = styled__default['default'].input(templateObject_2$h || (templateObject_2$h = tslib.__makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
@@ -10423,7 +10421,7 @@ var CameraVideoTag = function CameraVideoTag(_a) {
     "$isRearFacing": (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing
   });
 };
-var FullscreenVideoTag = styled__default['default'].video(templateObject_1$n || (templateObject_1$n = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n"])), function (props) {
+var FullscreenVideoTag = styled__default['default'].video(templateObject_1$n || (templateObject_1$n = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n  z-index: -2;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n  z-index: -2;\n"])), function (props) {
   return props.$isRearFacing ? '' : 'scaleX(-1)';
 });
 var templateObject_1$n;
@@ -10942,7 +10940,7 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
     aspectRatio = guideImageWidth / guideImageHeight;
   }
   if (maskColor === undefined) {
-    maskColor = (_o = (_m = (_l = theme.idCapture) === null || _l === void 0 ? void 0 : _l.guideOverlay) === null || _m === void 0 ? void 0 : _m.backgroundColor) !== null && _o !== void 0 ? _o : '#888';
+    maskColor = (_o = (_m = (_l = theme.idCapture) === null || _l === void 0 ? void 0 : _l.guideOverlay) === null || _m === void 0 ? void 0 : _m.backgroundColor) !== null && _o !== void 0 ? _o : '#708090';
   }
   React.useEffect(function () {
     var canvas = canvasRef.current;
@@ -11034,7 +11032,7 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
     classNames: classNames
   })));
 };
-var CanvasWrapper$1 = styled__default['default'].div(templateObject_1$i || (templateObject_1$i = tslib.__makeTemplateObject(["\n  position: relative;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n"], ["\n  position: relative;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
+var CanvasWrapper$1 = styled__default['default'].div(templateObject_1$i || (templateObject_1$i = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n  z-index: -1;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n  z-index: -1;\n"])), function (props) {
   return props.$maskColor;
 });
 var Canvas$1 = styled__default['default'].canvas(templateObject_2$c || (templateObject_2$c = tslib.__makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
@@ -11204,63 +11202,63 @@ var reducer$4 = function reducer(state, action) {
   }
 };
 var IdCaptureWizard = function IdCaptureWizard(_a) {
-  var _b, _c, _d;
-  var _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+  var _b, _c, _d, _e;
+  var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
   var onSuccess = _a.onSuccess,
     onExitCapture = _a.onExitCapture,
     onUserCancel = _a.onUserCancel,
     precapturedDocuments = _a.precapturedDocuments,
-    _q = _a.captureRequirement,
-    captureRequirement = _q === void 0 ? 'idCardOrPassport' : _q,
-    _r = _a.autoCaptureEnabled,
-    autoCaptureEnabled = _r === void 0 ? true : _r,
-    _s = _a.autoCaptureGoodFramesRequired,
-    autoCaptureGoodFramesRequired = _s === void 0 ? 3 : _s,
-    _t = _a.autoCaptureBarcodeRequired,
-    autoCaptureBarcodeRequired = _t === void 0 ? 'mobile' : _t,
-    _u = _a.barcodeScanningEnabled,
-    barcodeScanningEnabled = _u === void 0 ? false : _u,
-    _v = _a.idCardAutoCaptureScoreThreshold,
-    idCardAutoCaptureScoreThreshold = _v === void 0 ? 0.8 : _v,
-    _w = _a.passportAutoCaptureScoreThreshold,
-    passportAutoCaptureScoreThreshold = _w === void 0 ? 0.75 : _w,
-    _x = _a.mrzDetectionScoreThreshold,
-    mrzDetectionScoreThreshold = _x === void 0 ? 0.25 : _x,
-    _y = _a.idCardFocusScoreThreshold,
-    idCardFocusScoreThreshold = _y === void 0 ? 0.3 : _y,
-    _z = _a.passportFocusScoreThreshold,
-    passportFocusScoreThreshold = _z === void 0 ? 0.3 : _z,
-    _0 = _a.skipSuccessScreen,
-    skipSuccessScreen = _0 === void 0 ? false : _0,
+    _r = _a.captureRequirement,
+    captureRequirement = _r === void 0 ? 'idCardOrPassport' : _r,
+    _s = _a.autoCaptureEnabled,
+    autoCaptureEnabled = _s === void 0 ? true : _s,
+    _t = _a.autoCaptureGoodFramesRequired,
+    autoCaptureGoodFramesRequired = _t === void 0 ? 3 : _t,
+    _u = _a.autoCaptureBarcodeRequired,
+    autoCaptureBarcodeRequired = _u === void 0 ? 'mobile' : _u,
+    _v = _a.barcodeScanningEnabled,
+    barcodeScanningEnabled = _v === void 0 ? false : _v,
+    _w = _a.idCardAutoCaptureScoreThreshold,
+    idCardAutoCaptureScoreThreshold = _w === void 0 ? 0.8 : _w,
+    _x = _a.passportAutoCaptureScoreThreshold,
+    passportAutoCaptureScoreThreshold = _x === void 0 ? 0.75 : _x,
+    _y = _a.mrzDetectionScoreThreshold,
+    mrzDetectionScoreThreshold = _y === void 0 ? 0.25 : _y,
+    _z = _a.idCardFocusScoreThreshold,
+    idCardFocusScoreThreshold = _z === void 0 ? 0.3 : _z,
+    _0 = _a.passportFocusScoreThreshold,
+    passportFocusScoreThreshold = _0 === void 0 ? 0.3 : _0,
+    _1 = _a.skipSuccessScreen,
+    skipSuccessScreen = _1 === void 0 ? false : _1,
     instructions = _a.instructions,
-    _1 = _a.releaseCameraAccessOnExit,
-    releaseCameraAccessOnExit = _1 === void 0 ? true : _1,
-    _2 = _a.guideType,
-    guideType = _2 === void 0 ? 'fit' : _2,
-    _3 = _a.assets,
-    assets = _3 === void 0 ? {} : _3,
-    _4 = _a.classNames,
-    classNames = _4 === void 0 ? {} : _4,
-    _5 = _a.colors,
-    colors = _5 === void 0 ? {} : _5,
-    _6 = _a.verbiage,
-    verbiage = _6 === void 0 ? {} : _6,
-    _7 = _a.debugMode,
-    debugMode = _7 === void 0 ? false : _7;
-  var _8 = React.useReducer(reducer$4, initialState$4),
-    state = _8[0],
-    dispatch = _8[1];
+    _2 = _a.releaseCameraAccessOnExit,
+    releaseCameraAccessOnExit = _2 === void 0 ? true : _2,
+    _3 = _a.guideType,
+    guideType = _3 === void 0 ? 'fit' : _3,
+    _4 = _a.assets,
+    assets = _4 === void 0 ? {} : _4,
+    _5 = _a.classNames,
+    classNames = _5 === void 0 ? {} : _5,
+    _6 = _a.colors,
+    colors = _6 === void 0 ? {} : _6,
+    _7 = _a.verbiage,
+    verbiage = _7 === void 0 ? {} : _7,
+    _8 = _a.debugMode,
+    debugMode = _8 === void 0 ? false : _8;
+  var _9 = React.useReducer(reducer$4, initialState$4),
+    state = _9[0],
+    dispatch = _9[1];
   var releaseCameraAccess = React.useContext(CameraStateContext).releaseCameraAccess;
-  var _9 = React.useState(false),
-    overlayDismissed = _9[0],
-    setOverlayDismissed = _9[1];
-  var _10 = React.useContext(SubmissionContext),
-    submissionStatus = _10.submissionStatus,
-    setIdFrontImage = _10.setIdFrontImage,
-    setIdBackImage = _10.setIdBackImage,
-    setPassportImage = _10.setPassportImage,
-    logIdFrontCaptureAttempt = _10.logIdFrontCaptureAttempt,
-    logIdBackCaptureAttempt = _10.logIdBackCaptureAttempt;
+  var _10 = React.useState(false),
+    overlayDismissed = _10[0],
+    setOverlayDismissed = _10[1];
+  var _11 = React.useContext(SubmissionContext),
+    submissionStatus = _11.submissionStatus,
+    setIdFrontImage = _11.setIdFrontImage,
+    setIdBackImage = _11.setIdBackImage,
+    setPassportImage = _11.setPassportImage,
+    logIdFrontCaptureAttempt = _11.logIdFrontCaptureAttempt,
+    logIdBackCaptureAttempt = _11.logIdBackCaptureAttempt;
   var modelsError = React.useContext(IdCaptureModelsContext).error;
   var operationStartedAt = React.useRef();
   React.useEffect(function () {
@@ -11333,9 +11331,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
       type: 'reset'
     });
   }, []);
-  var _11 = React.useState(0),
-    attempt = _11[0],
-    setAttempt = _11[1];
+  var _12 = React.useState(0),
+    attempt = _12[0],
+    setAttempt = _12[1];
   var onExit = React.useCallback(function () {
     setOverlayDismissed(false);
     setAttempt(function (n) {
@@ -11352,19 +11350,19 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     }
   }, [releaseCameraAccess, releaseCameraAccessOnExit, submissionStatus]);
   assets.idCardFront || (assets.idCardFront = {});
-  (_e = assets.idCardFront).portraitGuidesImageUrl || (_e.portraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Portrait-2.svg"));
-  (_f = assets.idCardFront).landscapeGuidesImageUrl || (_f.landscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
+  (_f = assets.idCardFront).portraitGuidesImageUrl || (_f.portraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Portrait-2.svg"));
+  (_g = assets.idCardFront).landscapeGuidesImageUrl || (_g.landscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
   assets.idCardBack || (assets.idCardBack = {});
-  (_g = assets.idCardBack).portraitGuidesImageUrl || (_g.portraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Portrait-2.svg"));
-  (_h = assets.idCardBack).landscapeGuidesImageUrl || (_h.landscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
+  (_h = assets.idCardBack).portraitGuidesImageUrl || (_h.portraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Portrait-2.svg"));
+  (_j = assets.idCardBack).landscapeGuidesImageUrl || (_j.landscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
   assets.passport || (assets.passport = {});
-  (_j = assets.passport).portraitGuidesImageUrl || (_j.portraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-Passport-Front-SVG-Portrait-2.svg"));
-  (_k = assets.passport).landscapeGuidesImageUrl || (_k.landscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-Passport-Front-SVG-Landscape-2.svg"));
+  (_k = assets.passport).portraitGuidesImageUrl || (_k.portraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-Passport-Front-SVG-Portrait-2.svg"));
+  (_l = assets.passport).landscapeGuidesImageUrl || (_l.landscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-Passport-Front-SVG-Landscape-2.svg"));
   assets.flipIdPrompt || (assets.flipIdPrompt = {});
-  (_l = assets.flipIdPrompt).frontPortraitGuidesImageUrl || (_l.frontPortraitGuidesImageUrl = assets.idCardFront.portraitGuidesImageUrl);
-  (_m = assets.flipIdPrompt).frontLandscapeGuidesImageUrl || (_m.frontLandscapeGuidesImageUrl = assets.idCardFront.landscapeGuidesImageUrl);
-  (_o = assets.flipIdPrompt).backPortraitGuidesImageUrl || (_o.backPortraitGuidesImageUrl = assets.idCardBack.portraitGuidesImageUrl);
-  (_p = assets.flipIdPrompt).backLandscapeGuidesImageUrl || (_p.backLandscapeGuidesImageUrl = assets.idCardBack.landscapeGuidesImageUrl);
+  (_m = assets.flipIdPrompt).frontPortraitGuidesImageUrl || (_m.frontPortraitGuidesImageUrl = assets.idCardFront.portraitGuidesImageUrl);
+  (_o = assets.flipIdPrompt).frontLandscapeGuidesImageUrl || (_o.frontLandscapeGuidesImageUrl = assets.idCardFront.landscapeGuidesImageUrl);
+  (_p = assets.flipIdPrompt).backPortraitGuidesImageUrl || (_p.backPortraitGuidesImageUrl = assets.idCardBack.portraitGuidesImageUrl);
+  (_q = assets.flipIdPrompt).backLandscapeGuidesImageUrl || (_q.backLandscapeGuidesImageUrl = assets.idCardBack.landscapeGuidesImageUrl);
   var idCaptureVerbiages = {
     idCardFront: useTranslations(verbiage.idCardFront, {
       instructionText: 'Scan the front of ID',
@@ -11377,11 +11375,11 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
       instructionText: 'Scan the ID page of passport'
     })
   };
-  var _12 = useIdCaptureState()[0],
-    guideRectX = _12.guideRectX,
-    guideRectY = _12.guideRectY,
-    guideRectWidth = _12.guideRectWidth,
-    guideRectHeight = _12.guideRectHeight;
+  var _13 = useIdCaptureState()[0],
+    guideRectX = _13.guideRectX,
+    guideRectY = _13.guideRectY,
+    guideRectWidth = _13.guideRectWidth,
+    guideRectHeight = _13.guideRectHeight;
   var idCaptureAssets = assets[state.requestedDocumentType];
   var idCaptureVerbiage = idCaptureVerbiages[state.requestedDocumentType];
   React.useEffect(function () {
@@ -11436,7 +11434,6 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
           focusScoreThreshold: idCardFocusScoreThreshold,
           onPrediction: onPrediction,
           onCapture: onCapture,
-          onExit: onExit,
           assets: idCaptureAssets,
           classNames: classNames === null || classNames === void 0 ? void 0 : classNames.capture,
           colors: colors,
@@ -11457,7 +11454,6 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
           onPrediction: onPrediction,
           onBarcodeScanned: onBarcodeScanned,
           onCapture: onCapture,
-          onExit: onExit,
           assets: idCaptureAssets,
           classNames: classNames === null || classNames === void 0 ? void 0 : classNames.capture,
           colors: colors,
@@ -11478,7 +11474,6 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
           onPrediction: onPrediction,
           onBarcodeScanned: onBarcodeScanned,
           onCapture: onCapture,
-          onExit: onExit,
           assets: idCaptureAssets,
           classNames: classNames === null || classNames === void 0 ? void 0 : classNames.capture,
           colors: colors,
@@ -11497,6 +11492,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     assets: idCaptureAssets,
     colors: colors,
     verbiage: idCaptureVerbiage
+  }), /*#__PURE__*/React__default['default'].createElement(ExitCaptureButton, {
+    onClick: onExit,
+    className: (_e = classNames.capture) === null || _e === void 0 ? void 0 : _e.exitCaptureBtn
   }), !overlayDismissed && ( /*#__PURE__*/React__default['default'].createElement(IdCaptureLoadingOverlay, {
     key: attempt,
     instructions: instructions,
@@ -14688,7 +14686,7 @@ var defaultTheme = {
   },
   idCapture: {
     guideOverlay: {
-      backgroundColor: 'rgba(0,0,0,0.5)',
+      backgroundColor: '#708090',
       textColor: 'white'
     },
     guideBox: {