idmission-web-sdk 0.0.44 → 0.0.45

package/dist/sdk2.cjs.development.js

@@ -195,7 +195,7 @@ function contentDispositionFromDataUrl(url) {
   return (_b = (_a = url.match(/^(data:.*;base64),/)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : '';
 }
 
-var PageContainerDiv = styled__default['default'].div(templateObject_1$9 || (templateObject_1$9 = tslib.__makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family:\n    Inter,\n    -apple-system,\n    BlinkMacSystemFont,\n    Segoe UI,\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    Fira Sans,\n    Droid Sans,\n    Helvetica Neue,\n    sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family:\n    Inter,\n    -apple-system,\n    BlinkMacSystemFont,\n    Segoe UI,\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    Fira Sans,\n    Droid Sans,\n    Helvetica Neue,\n    sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"])), function (_a) {
+var PageContainerDiv = styled__default['default'].div(templateObject_1$a || (templateObject_1$a = tslib.__makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family:\n    Inter,\n    -apple-system,\n    BlinkMacSystemFont,\n    Segoe UI,\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    Fira Sans,\n    Droid Sans,\n    Helvetica Neue,\n    sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family:\n    Inter,\n    -apple-system,\n    BlinkMacSystemFont,\n    Segoe UI,\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    Fira Sans,\n    Droid Sans,\n    Helvetica Neue,\n    sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"])), function (_a) {
   var $heightOffset = _a.$heightOffset;
   return $heightOffset !== null && $heightOffset !== void 0 ? $heightOffset : 0;
 });
@@ -232,13 +232,13 @@ var PageContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, dimensionsCalculated && children);
 });
 PageContainer.displayName = 'PageContainer';
-var templateObject_1$9;
+var templateObject_1$a;
 
-var OverlayContainer = styled__default['default'](PageContainer)(templateObject_1$8 || (templateObject_1$8 = tslib.__makeTemplateObject(["\n  background: white;\n  z-index: 10000;\n"], ["\n  background: white;\n  z-index: 10000;\n"])));
-var OverlayInner = styled__default['default'].div(templateObject_2$3 || (templateObject_2$3 = tslib.__makeTemplateObject(["\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  padding: 25px;\n  max-height: var(--app-height);\n  height: 100%;\n  box-sizing: border-box;\n"], ["\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  padding: 25px;\n  max-height: var(--app-height);\n  height: 100%;\n  box-sizing: border-box;\n"])));
-var OverlayImageWrapper = styled__default['default'].div(templateObject_3$2 || (templateObject_3$2 = tslib.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"])));
+var OverlayContainer = styled__default['default'](PageContainer)(templateObject_1$9 || (templateObject_1$9 = tslib.__makeTemplateObject(["\n  background: white;\n  z-index: 10000;\n"], ["\n  background: white;\n  z-index: 10000;\n"])));
+var OverlayInner = styled__default['default'].div(templateObject_2$4 || (templateObject_2$4 = tslib.__makeTemplateObject(["\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  padding: 25px;\n  max-height: var(--app-height);\n  height: 100%;\n  box-sizing: border-box;\n"], ["\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  padding: 25px;\n  max-height: var(--app-height);\n  height: 100%;\n  box-sizing: border-box;\n"])));
+var OverlayImageWrapper = styled__default['default'].div(templateObject_3$3 || (templateObject_3$3 = tslib.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"])));
 var OverlayImageMultiContainer = styled__default['default'].div(templateObject_4$2 || (templateObject_4$2 = tslib.__makeTemplateObject(["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100vh - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"], ["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100vh - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"])));
-var templateObject_1$8, templateObject_2$3, templateObject_3$2, templateObject_4$2;
+var templateObject_1$9, templateObject_2$4, templateObject_3$3, templateObject_4$2;
 
 var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
   var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -8137,27 +8137,15 @@ function disposeTfBackend() {
     console.error('failed to dispose backend', e);
   }
 }
-var InvisibleCanvas = styled__default['default'].canvas(templateObject_1$7 || (templateObject_1$7 = tslib.__makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
-var templateObject_1$7;
+var InvisibleCanvas = styled__default['default'].canvas(templateObject_1$8 || (templateObject_1$8 = tslib.__makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+var templateObject_1$8;
 
-var DebugStatsPane = styled__default['default'].span(templateObject_1$6 || (templateObject_1$6 = tslib.__makeTemplateObject(["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n"], ["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n"])));
-var ObjectDetectionDebugOverlay = styled__default['default'].div(templateObject_2$2 || (templateObject_2$2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"], ["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), function (_a) {
+var DebugStatsPane = styled__default['default'].span(templateObject_1$7 || (templateObject_1$7 = tslib.__makeTemplateObject(["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n"], ["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n"])));
+var ObjectDetectionDebugOverlay = styled__default['default'].div(templateObject_2$3 || (templateObject_2$3 = tslib.__makeTemplateObject(["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"], ["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), function (_a) {
   var $flipX = _a.$flipX;
   return $flipX ? 'transform: scaleX(-1);' : '';
 });
-var ObjectDetectionDebugBox = styled__default['default'].div(templateObject_3$1 || (templateObject_3$1 = tslib.__makeTemplateObject(["\n  font: 10px monospace;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"], ["\n  font: 10px monospace;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"])), function (_a) {
-  var $top = _a.$top;
-  return $top;
-}, function (_a) {
-  var $left = _a.$left;
-  return $left;
-}, function (_a) {
-  var $width = _a.$width;
-  return $width;
-}, function (_a) {
-  var $height = _a.$height;
-  return $height;
-}, function (_a) {
+var ObjectDetectionDebugBox = styled__default['default'].div(templateObject_3$2 || (templateObject_3$2 = tslib.__makeTemplateObject(["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"], ["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"])), function (_a) {
   var $color = _a.$color;
   return $color !== null && $color !== void 0 ? $color : 'green';
 }, function (_a) {
@@ -8167,24 +8155,7 @@ var ObjectDetectionDebugBox = styled__default['default'].div(templateObject_3$1
   var $flipX = _a.$flipX;
   return $flipX ? 'transform: scaleX(-1);' : '';
 });
-var FaceDetectionKeypointMarker = styled__default['default'].div(templateObject_4$1 || (templateObject_4$1 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: ", "px solid\n    ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"], ["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: ", "px solid\n    ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"])), function (_a) {
-  var $top = _a.$top,
-    $height = _a.$height;
-  return $top - $height / 2;
-}, function (_a) {
-  var $left = _a.$left,
-    $width = _a.$width;
-  return $left - $width / 2;
-}, function (_a) {
-  var $width = _a.$width;
-  return $width;
-}, function (_a) {
-  var $height = _a.$height;
-  return $height;
-}, function (_a) {
-  var $width = _a.$width;
-  return $width / 2;
-}, function (_a) {
+var FaceDetectionKeypointMarker = styled__default['default'].div(templateObject_4$1 || (templateObject_4$1 = tslib.__makeTemplateObject(["\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border: 2px solid ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"], ["\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border: 2px solid ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"])), function (_a) {
   var $color = _a.$color;
   return $color !== null && $color !== void 0 ? $color : 'red';
 }, function (_a) {
@@ -8246,11 +8217,13 @@ function IdCaptureDetectedObjectDebugBox(_a) {
   var width = obj.bbox[2] * (horizontal ? scaledWidth : pageWidth);
   var height = obj.bbox[3] * (horizontal ? pageHeight : scaledHeight);
   return /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugBox, {
-    "$top": top,
-    "$left": left,
-    "$width": width,
-    "$height": height,
-    "$flipX": flipX
+    "$flipX": flipX,
+    style: {
+      top: top,
+      left: left,
+      width: width,
+      height: height
+    }
   }, obj.label, " (", obj.score.toFixed(3), ")");
 }
 function SelfieCaptureFaceDebugBox(_a) {
@@ -8284,12 +8257,14 @@ function SelfieCaptureFaceDebugBox(_a) {
     height = face.box.height / videoHeight * scaledHeight;
   }
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugBox, {
-    "$top": top,
-    "$left": left,
-    "$width": width,
-    "$height": height,
     "$flipX": flipX,
-    "$color": color
+    "$color": color,
+    style: {
+      top: top,
+      left: left,
+      width: width,
+      height: height
+    }
   }), face.keypoints.map(function (point, ii) {
     return /*#__PURE__*/React__default['default'].createElement(SelfieCaptureFaceKeypoint, {
       key: ii,
@@ -8322,19 +8297,21 @@ function SelfieCaptureFaceKeypoint(_a) {
     left = point.x / videoWidth * pageWidth;
     top = point.y / videoHeight * scaledHeight - yOffset;
   }
+  top -= 2;
+  left -= 2;
   return /*#__PURE__*/React__default['default'].createElement(FaceDetectionKeypointMarker, {
-    "$top": top,
-    "$left": left,
-    "$width": 4,
-    "$height": 4,
     "$flipX": flipX,
-    "$color": color
+    "$color": color,
+    style: {
+      top: top,
+      left: left
+    }
   });
 }
-var templateObject_1$6, templateObject_2$2, templateObject_3$1, templateObject_4$1;
+var templateObject_1$7, templateObject_2$3, templateObject_3$2, templateObject_4$1;
 
-var ExitCaptureButton = styled__default['default'].button(templateObject_1$5 || (templateObject_1$5 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n\n  &:hover {\n    background: #ddd;\n  }\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n\n  &:hover {\n    background: #ddd;\n  }\n"])));
-var templateObject_1$5;
+var ExitCaptureButton = styled__default['default'].button(templateObject_1$6 || (templateObject_1$6 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n\n  &:hover {\n    background: #ddd;\n  }\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n\n  &:hover {\n    background: #ddd;\n  }\n"])));
+var templateObject_1$6;
 
 var initialState$5 = {
   videoWidth: 0,
@@ -9302,10 +9279,10 @@ var CameraVideoTag = function CameraVideoTag() {
     "$isRearFacing": (_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing
   });
 };
-var FullscreenVideoTag = styled__default['default'].video(templateObject_1$4 || (templateObject_1$4 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
+var FullscreenVideoTag = styled__default['default'].video(templateObject_1$5 || (templateObject_1$5 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
   return props.$isRearFacing ? '' : 'scaleX(-1)';
 });
-var templateObject_1$4;
+var templateObject_1$5;
 
 var CaptureState;
 (function (CaptureState) {
@@ -9944,18 +9921,18 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
   }, children);
 };
 
-var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$3 || (templateObject_1$3 = 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$4 || (templateObject_1$4 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
   var $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 GuidanceMessage = styled__default['default'].div(templateObject_2$2 || (templateObject_2$2 = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"])), function (_a) {
   var $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$3, templateObject_2$1;
+var templateObject_1$4, templateObject_2$2;
 
 var initialState$3 = {
   videoWidth: 0,
@@ -10178,8 +10155,8 @@ var SelfieCapture = function SelfieCapture(_a) {
   colors.guidesSatisfiedColor || (colors.guidesSatisfiedColor = 'green');
   colors.guidanceMessagesUnsatisfiedBackgroundColor || (colors.guidanceMessagesUnsatisfiedBackgroundColor = 'red');
   colors.guidanceMessagesSatisfiedBackgroundColor || (colors.guidanceMessagesSatisfiedBackgroundColor = 'green');
-  colors.guidanceMessagesUnsatisfiedTextColor || (colors.guidanceMessagesUnsatisfiedTextColor = 'black');
-  colors.guidanceMessagesSatisfiedTextColor || (colors.guidanceMessagesSatisfiedTextColor = 'black');
+  colors.guidanceMessagesUnsatisfiedTextColor || (colors.guidanceMessagesUnsatisfiedTextColor = 'white');
+  colors.guidanceMessagesSatisfiedTextColor || (colors.guidanceMessagesSatisfiedTextColor = 'white');
   if (!guidanceMessage) {
     verbiage.guidanceHoldStillText || (verbiage.guidanceHoldStillText = t('Hold still for a few seconds...'));
     verbiage.guidanceLookStraightText || (verbiage.guidanceLookStraightText = t('Look straight into the camera...'));
@@ -10212,6 +10189,33 @@ var SelfieCapture = function SelfieCapture(_a) {
   }, "\xD7"));
 };
 
+var Spinner = styled__default['default'].div(templateObject_1$3 || (templateObject_1$3 = tslib.__makeTemplateObject(["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n  }\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  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (_a) {
+  var $size = _a.$size;
+  return $size !== null && $size !== void 0 ? $size : 80;
+}, function (_a) {
+  var $size = _a.$size;
+  return $size !== null && $size !== void 0 ? $size : 80;
+}, function (_a) {
+  var $size = _a.$size;
+  return ($size !== null && $size !== void 0 ? $size : 80) - 16;
+}, function (_a) {
+  var $size = _a.$size;
+  return ($size !== null && $size !== void 0 ? $size : 80) - 16;
+}, function (_a) {
+  var $thickness = _a.$thickness;
+  return $thickness !== null && $thickness !== void 0 ? $thickness : 6;
+}, function (_a) {
+  var $color = _a.$color;
+  return $color !== null && $color !== void 0 ? $color : '#888';
+}, function (_a) {
+  var $color = _a.$color;
+  return $color !== null && $color !== void 0 ? $color : '#888';
+}, function (_a) {
+  var $color = _a.$color;
+  return $color !== null && $color !== void 0 ? $color : '#888';
+});
+var templateObject_1$3;
+
 var initialState$2 = {
   frame: null,
   face: null,
@@ -10310,6 +10314,9 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
   var _e = React.useReducer(reducer$2, initialState$2),
     state = _e[0],
     dispatch = _e[1];
+  var _f = React.useState(null),
+    imageUrl = _f[0],
+    setImageUrl = _f[1];
   var onSelfieCaptured = React.useCallback(function (frame, face) {
     onCapture === null || onCapture === void 0 ? void 0 : onCapture();
     dispatch({
@@ -10331,14 +10338,15 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     });
     (function () {
       return tslib.__awaiter(void 0, void 0, void 0, function () {
-        var imageUrl, response, _a, e_1;
+        var imageUrl_1, response, _a, e_1;
         return tslib.__generator(this, function (_b) {
           switch (_b.label) {
             case 0:
               _b.trys.push([0, 3,, 4]);
-              imageUrl = cropToShoulders(frame, face);
+              imageUrl_1 = cropToShoulders(frame, face);
+              setImageUrl(imageUrl_1);
               _a = checkLiveness;
-              return [4, dataUrlToBase64(imageUrl)];
+              return [4, dataUrlToBase64(imageUrl_1)];
             case 1:
               return [4, _a.apply(void 0, [_b.sent()])];
             case 2:
@@ -10348,7 +10356,7 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
                 payload: {
                   frame: frame,
                   face: face,
-                  imageUrl: imageUrl,
+                  imageUrl: imageUrl_1,
                   response: response
                 }
               });
@@ -10377,21 +10385,68 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
       onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
     }
   }, [onTimeout, state.timesLivenessCheckFailed]);
+  var _g = React.useState(false),
+    timedOut = _g[0],
+    setTimedOut = _g[1];
+  React.useEffect(function () {
+    if (!timeoutDurationMs) return;
+    var timer = setTimeout(function () {
+      setTimedOut(true);
+    }, timeoutDurationMs);
+    return function () {
+      if (timer) clearTimeout(timer);
+    };
+  }, [timeoutDurationMs]);
+  React.useEffect(function () {
+    if (!timedOut || state.requestState === 'PASSED') return;
+    if (state.requestState !== 'IN_PROGRESS') {
+      onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
+      return;
+    }
+    var t = setTimeout(function () {
+      onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
+    }, 10000);
+    return function () {
+      clearTimeout(t);
+    };
+  }, [onTimeout, state.requestState, timedOut]);
   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, {
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(SelfieCapture, {
     onSelfieCaptured: onSelfieCaptured,
-    onTimeout: onTimeout,
     onExit: onExit,
     timeoutDurationMs: timeoutDurationMs,
     guidanceMessage: guidanceMessage,
     colors: colors,
     verbiage: verbiage,
     debugMode: debugMode
-  });
+  }), imageUrl && /*#__PURE__*/React__default['default'].createElement(SelfieProgressPreview, {
+    imageUrl: imageUrl
+  }));
 };
+var SelfieProgressPreview = function SelfieProgressPreview(_a) {
+  var imageUrl = _a.imageUrl;
+  return /*#__PURE__*/React__default['default'].createElement(SelfieProgressPreviewWrapper, null, /*#__PURE__*/React__default['default'].createElement(SelfieProgressText, null, /*#__PURE__*/React__default['default'].createElement(Spinner, {
+    "$size": 24,
+    "$color": "white",
+    "$thickness": 3,
+    style: {
+      position: 'relative',
+      top: 4,
+      left: -3,
+      margin: '0 3px 0 -12px'
+    }
+  }), "Processing..."), /*#__PURE__*/React__default['default'].createElement(SelfiePreviewImageWrapper, null, /*#__PURE__*/React__default['default'].createElement("img", {
+    src: imageUrl,
+    alt: ""
+  })));
+};
+var SelfieProgressPreviewWrapper = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"], ["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"])));
+var SelfieProgressText = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = tslib.__makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"], ["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"])));
+var SelfiePreviewImageWrapper = styled__default['default'].div(templateObject_3$1 || (templateObject_3$1 = tslib.__makeTemplateObject(["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"], ["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"])));
+var templateObject_1$2, templateObject_2$1, templateObject_3$1;
 
 var SelfieCaptureLoadingOverlay = function SelfieCaptureLoadingOverlay(_a) {
   var headingText = _a.headingText,
@@ -11222,9 +11277,6 @@ 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 AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
   var document = _a.document,
     onComplete = _a.onComplete,