idmission-web-sdk 2.1.71 → 2.1.73

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

@@ -34,7 +34,6 @@ export type IdCaptureVerbiage = {
     guidanceTooBlurryText?: CustomerSuppliedVerbiage;
     guidanceNotCenteredText?: CustomerSuppliedVerbiage;
     guidanceTooCloseText?: CustomerSuppliedVerbiage;
-    guidanceNotStableText?: CustomerSuppliedVerbiage;
     guidanceNotDetectedText?: CustomerSuppliedVerbiage;
     guidanceIdCardNotAllowedText?: CustomerSuppliedVerbiage;
     guidancePassportNotAllowedText?: CustomerSuppliedVerbiage;

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

@@ -25,7 +25,6 @@ export type IdCaptureState = {
     detectionThresholdMet: boolean;
     documentInBounds: boolean;
     documentTooClose: boolean;
-    documentIsStable: boolean;
     flipRequired: boolean;
     backDetectedFirst: boolean;
     idCardDetectedButNotAllowed: boolean;

package/dist/lib/locales/es/translation.d.ts

@@ -23,7 +23,6 @@ declare const _default: {
     'Document not detected': string;
     'Document is not centered': string;
     'Document too close, please back up': string;
-    'Please hold your ID document steady': string;
     'Document out of focus \u2013 try improving the lighting': string;
     'ID card front detected - please flip your ID card': string;
     'ID card back detected - please flip your ID card': string;

package/dist/lib/locales/index.d.ts

@@ -31,7 +31,6 @@ export declare const resources: {
             'Document not detected': string;
             'Document is not centered': string;
             'Document too close, please back up': string;
-            'Please hold your ID document steady': string;
             'Document out of focus \u2013 try improving the lighting': string;
             'ID card front detected - please flip your ID card': string;
             'ID card back detected - please flip your ID card': string;

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

@@ -28,7 +28,6 @@ export type DocumentDetectionThresholds = {
     idCardFront?: number;
     idCardBack?: number;
     passport?: number;
-    stability?: number;
 };
 export declare function loadDocumentDetector(modelAssetPath?: string, scoreThreshold?: number): Promise<ObjectDetector>;
 export declare function useLoadDocumentDetector({ modelPath, modelLoadTimeoutMs, scoreThreshold, onModelError, }: {
@@ -58,7 +57,6 @@ export type DocumentDetectionPrediction = {
     bestDocument: DetectedObject | undefined;
     documentInBounds: boolean;
     documentTooClose: boolean;
-    documentIsStable: boolean;
     frameWidth: number;
     frameHeight: number;
     allZero: boolean;
@@ -70,9 +68,6 @@ export type ObjectDetectorPrediction = ObjectDetectorResult & {
     frameHeight: number;
 };
 export declare function makeDocumentDetectorPrediction(detector: ObjectDetector, frame: HTMLCanvasElement): Promise<ObjectDetectorPrediction | null>;
-export declare let lastDetectionAt: number;
-export declare let lastDetectionTime: number;
-export declare function setLastDetectionAt(time: number): void;
 export type DocumentDetectionBoundaries = {
     top: number;
     bottom: number;

package/dist/sdk2.cjs.development.js

@@ -234,7 +234,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.1.71';
+var webSdkVersion = '2.1.73';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -5439,8 +5439,7 @@ var defaultDocumentDetectionModelLoadTimeoutMs = 45000;
 var defaultDocumentDetectionThresholds = {
   idCardFront: 0.6,
   idCardBack: 0.6,
-  passport: 0.4,
-  stability: 0.7
+  passport: 0.4
 };
 var documentTypeDisplayNames = {
   idCardFront: 'ID card front',
@@ -5582,13 +5581,6 @@ function makeDocumentDetectorPrediction(detector, frame) {
     });
   });
 }
-var lastNBoxes = [];
-var lastDetectionAt = 0;
-var lastDetectionTime = 0;
-function setLastDetectionAt(time) {
-  lastDetectionTime = time - lastDetectionAt;
-  lastDetectionAt = time;
-}
 var defaultDocumentDetectionBoundaries = {
   top: 20,
   bottom: 20,
@@ -5596,7 +5588,7 @@ var defaultDocumentDetectionBoundaries = {
   right: 20
 };
 function processDocumentDetectorPrediction(prediction, thresholds, boundaries) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   if (boundaries === void 0) {
     boundaries = defaultDocumentDetectionBoundaries;
   }
@@ -5652,11 +5644,11 @@ function processDocumentDetectorPrediction(prediction, thresholds, boundaries) {
     var boundaryLeft = (_j = boundaries.left) !== null && _j !== void 0 ? _j : 20;
     var boundaryRight = (_k = boundaries.right) !== null && _k !== void 0 ? _k : 20;
     var boundaryBottom = (_l = boundaries.bottom) !== null && _l !== void 0 ? _l : 20;
-    var _o = bestDocument.box,
-      xMin = _o.xMin,
-      yMin = _o.yMin,
-      width = _o.width,
-      height = _o.height;
+    var _m = bestDocument.box,
+      xMin = _m.xMin,
+      yMin = _m.yMin,
+      width = _m.width,
+      height = _m.height;
     documentInBounds = yMin > boundaryTop &&
     // Is it valid top edge of ID detected?
     yMin + height + boundaryBottom < frameHeight && (
@@ -5665,23 +5657,12 @@ function processDocumentDetectorPrediction(prediction, thresholds, boundaries) {
     // If either the left side visible or if not, right edge of ID should be more than 80% of width.
     xMin + width + boundaryRight < frameWidth; // Valid right edge if it's less than video width.
   }
-  var documentIsStable = false;
   var documentTooClose = false;
   if (bestDocument) {
-    var _p = [bestDocument.box.width / frameWidth, bestDocument.box.height / frameHeight],
-      docWidth = _p[0],
-      docHeight = _p[1];
+    var _o = [bestDocument.box.width / frameWidth, bestDocument.box.height / frameHeight],
+      docWidth = _o[0],
+      docHeight = _o[1];
     documentTooClose = docWidth > 0.85 || docHeight > 0.85;
-    if (detectionThresholdMet) {
-      var threshold_1 = (_m = thresholds.stability) !== null && _m !== void 0 ? _m : defaultDocumentDetectionThresholds.stability;
-      var framesNeeded = Math.min(1000 / lastDetectionTime, 12);
-      lastNBoxes = __spreadArray([bestDocument.box], lastNBoxes, true).slice(0, framesNeeded);
-      documentIsStable = lastNBoxes.length >= framesNeeded && !createPairs(lastNBoxes).some(function (_a) {
-        var a = _a[0],
-          b = _a[1];
-        return calculateIoU(a, b) < threshold_1;
-      });
-    }
   }
   return {
     detectedObjects: detectedObjects,
@@ -5698,7 +5679,6 @@ function processDocumentDetectorPrediction(prediction, thresholds, boundaries) {
     bestDocument: bestDocument,
     documentInBounds: documentInBounds,
     documentTooClose: documentTooClose,
-    documentIsStable: documentIsStable,
     frameWidth: frameWidth,
     frameHeight: frameHeight,
     allZero: allZero
@@ -5718,27 +5698,6 @@ function applyNonMaxSuppression(detectedObjects) {
     return !!obj;
   });
 }
-function createPairs(arr) {
-  var pairs = [];
-  for (var i = 0; i < arr.length - 1; i++) {
-    pairs.push([arr[i], arr[i + 1]]);
-  }
-  return pairs;
-}
-function calculateIoU(boxA, boxB) {
-  var xA = Math.max(boxA.xMin, boxB.xMin);
-  var yA = Math.max(boxA.yMin, boxB.yMin);
-  var xB = Math.min(boxA.xMax, boxB.xMax);
-  var yB = Math.min(boxA.yMax, boxB.yMax);
-  var intersectWidth = Math.max(0, xB - xA);
-  var intersectHeight = Math.max(0, yB - yA);
-  var intersectionArea = intersectWidth * intersectHeight;
-  var boxAArea = (boxA.xMax - boxA.xMin) * (boxA.yMax - boxA.yMin);
-  var boxBArea = (boxB.xMax - boxB.xMin) * (boxB.yMax - boxB.yMin);
-  var unionArea = boxAArea + boxBArea - intersectionArea;
-  if (unionArea === 0) return 0;
-  return intersectionArea / unionArea;
-}
 
 function useFrameLoop(fn, _a) {
   var _b = _a.throttleMs,
@@ -5756,20 +5715,16 @@ function useFrameLoop(fn, _a) {
     var currentLoopId = loopId.current;
     function renderPrediction() {
       return __awaiter(this, void 0, void 0, function () {
-        var start, took, amountToThrottle;
         return __generator(this, function (_a) {
           switch (_a.label) {
             case 0:
               if (currentLoopId !== loopId.current) return [2 /*return*/];
-              start = new Date().getTime();
               return [4 /*yield*/, fn(frameId.current)];
             case 1:
               _a.sent();
-              took = new Date().getTime() - start;
-              amountToThrottle = Math.max((throttleMs !== null && throttleMs !== void 0 ? throttleMs : 0) - took, 0);
               timer = setTimeout(function () {
                 frameId.current = requestAnimationFrame(renderPrediction);
-              }, amountToThrottle);
+              }, throttleMs !== null && throttleMs !== void 0 ? throttleMs : 0);
               return [2 /*return*/];
           }
         });
@@ -5835,27 +5790,29 @@ function DocumentDetectionModelProvider(_a) {
   var _b = _a.autoStart,
     autoStart = _b === void 0 ? true : _b,
     children = _a.children,
-    _c = _a.throttleMs,
-    throttleMs = _c === void 0 ? 16 : _c,
-    _d = _a.documentDetectionModelPath,
-    documentDetectionModelPath = _d === void 0 ? defaultDocumentDetectorModelPath : _d,
-    _e = _a.documentDetectionModelScoreThreshold,
-    documentDetectionModelScoreThreshold = _e === void 0 ? defaultDocumentDetectionScoreThreshold : _e,
-    _f = _a.documentDetectionModelLoadTimeoutMs,
-    documentDetectionModelLoadTimeoutMs = _f === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _f,
+    throttleMs = _a.throttleMs,
+    _c = _a.documentDetectionModelPath,
+    documentDetectionModelPath = _c === void 0 ? defaultDocumentDetectorModelPath : _c,
+    _d = _a.documentDetectionModelScoreThreshold,
+    documentDetectionModelScoreThreshold = _d === void 0 ? defaultDocumentDetectionScoreThreshold : _d,
+    _e = _a.documentDetectionModelLoadTimeoutMs,
+    documentDetectionModelLoadTimeoutMs = _e === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _e,
     onDocumentDetectionModelError = _a.onDocumentDetectionModelError;
-  var _g = React.useContext(CameraStateContext),
-    videoRef = _g.videoRef,
-    videoLoaded = _g.videoLoaded,
-    cameraReady = _g.cameraReady;
+  var _f = React.useContext(CameraStateContext),
+    videoRef = _f.videoRef,
+    videoLoaded = _f.videoLoaded,
+    cameraReady = _f.cameraReady;
   var lastPredictionCanvas = React.useRef(null);
   var onPredictionHandler = React.useRef();
-  var _h = React.useState({}),
-    documentDetectionThresholds = _h[0],
-    setDocumentDetectionThresholds = _h[1];
-  var _j = React.useState(defaultDocumentDetectionBoundaries),
-    documentDetectionBoundaries = _j[0],
-    setDocumentDetectionBoundaries = _j[1];
+  var _g = React.useState({}),
+    documentDetectionThresholds = _g[0],
+    setDocumentDetectionThresholds = _g[1];
+  var _h = React.useState(defaultDocumentDetectionBoundaries),
+    documentDetectionBoundaries = _h[0],
+    setDocumentDetectionBoundaries = _h[1];
+  var _j = React.useState(0),
+    detectionTime = _j[0],
+    setDetectionTime = _j[1];
   var _k = React.useState(0),
     timesAllZero = _k[0],
     setTimesAllZero = _k[1];
@@ -5897,7 +5854,7 @@ function DocumentDetectionModelProvider(_a) {
               if (!prediction) return [3 /*break*/, 3];
               processedPrediction = processDocumentDetectorPrediction(prediction, documentDetectionThresholds, documentDetectionBoundaries);
               processedPrediction.frameId = frameId;
-              setLastDetectionAt(new Date().getTime());
+              setDetectionTime(prediction.time);
               debug(processedPrediction);
               if (processedPrediction.allZero) setTimesAllZero(function (n) {
                 return n + 1;
@@ -5940,7 +5897,7 @@ function DocumentDetectionModelProvider(_a) {
       documentDetectionModelError: modelError,
       documentDetectionModelDownloadProgress: modelDownloadProgress,
       onDocumentDetected: onDocumentDetected,
-      detectionTime: lastDetectionTime,
+      detectionTime: detectionTime,
       documentDetectionThresholds: documentDetectionThresholds,
       setDocumentDetectionThresholds: setDocumentDetectionThresholds,
       documentDetectionBoundaries: documentDetectionBoundaries,
@@ -5948,7 +5905,7 @@ function DocumentDetectionModelProvider(_a) {
       documentDetectionLastPredictionCanvas: lastPredictionCanvas,
       clearDocumentDetectionLastPredictionCanvas: clearDocumentDetectionLastPredictionCanvas
     };
-  }, [start, stop, ready, modelError, modelDownloadProgress, onDocumentDetected, documentDetectionThresholds, documentDetectionBoundaries, clearDocumentDetectionLastPredictionCanvas]);
+  }, [start, stop, ready, modelError, modelDownloadProgress, onDocumentDetected, detectionTime, documentDetectionThresholds, documentDetectionBoundaries, clearDocumentDetectionLastPredictionCanvas]);
   return /*#__PURE__*/React__namespace.createElement(DocumentDetectionModelContext.Provider, {
     value: value
   }, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
@@ -6286,7 +6243,6 @@ var initialState$4 = {
   detectionThresholdMet: false,
   documentInBounds: false,
   documentTooClose: false,
-  documentIsStable: false,
   flipRequired: false,
   backDetectedFirst: false,
   idCardDetectedButNotAllowed: false,
@@ -6405,7 +6361,6 @@ var _reducer = function reducer(state, action) {
         bestDocument = _d.bestDocument,
         documentInBounds = _d.documentInBounds,
         documentTooClose = _d.documentTooClose,
-        documentIsStable = _d.documentIsStable,
         focusScore = _d.focusScore,
         focusThresholdMet = _d.focusThresholdMet,
         frameWidth = _d.frameWidth,
@@ -6427,7 +6382,7 @@ var _reducer = function reducer(state, action) {
       if (state.captureState === 'capturing' && (flipRequired || backDetectedFirst)) {
         wrongDocumentTypePredictions += 1;
       }
-      var isGoodFrame = detectionThresholdMet && documentInBounds && !documentTooClose && !flipRequired && !backDetectedFirst && focusThresholdMet && documentIsStable;
+      var isGoodFrame = detectionThresholdMet && documentInBounds && !documentTooClose && !flipRequired && !backDetectedFirst && focusThresholdMet;
       var goodFramesCount = state.goodFramesCount;
       if (isGoodFrame) {
         goodFramesCount += 1;
@@ -6462,7 +6417,6 @@ var _reducer = function reducer(state, action) {
         detectionThresholdMet: detectionThresholdMet,
         documentInBounds: documentInBounds,
         documentTooClose: documentTooClose,
-        documentIsStable: documentIsStable,
         flipRequired: flipRequired,
         backDetectedFirst: backDetectedFirst,
         idCardDetectedButNotAllowed: idCardDetectedButNotAllowed,
@@ -6882,7 +6836,6 @@ var esTranslation = {
   'Document not detected': 'No se ha detectado el documento',
   'Document is not centered': 'Documento no centrado',
   'Document too close, please back up': 'Documento muy cerca, favor de alejarse',
-  'Please hold your ID document steady': 'Por favor, mantenga firme su documento de identidad',
   'Document out of focus – try improving the lighting': 'Documento no enfocado - hay que tratar de mejorar la iluminación',
   'ID card front detected - please flip your ID card': 'Anverso de ID detectado, por favor voltea tu identificación',
   'ID card back detected - please flip your ID card': 'Reverso de ID detectado, por favor voltea tu identificación',
@@ -7204,8 +7157,7 @@ var IdCapture = function IdCapture(_a) {
     guidanceTooCloseText: 'Document too close, please back up',
     guidanceNotDetectedText: 'Document not detected',
     guidanceIdCardNotAllowedText: 'ID card detected, please scan a passport instead',
-    guidancePassportNotAllowedText: 'Passport detected, please scan an ID card instead',
-    guidanceNotStableText: 'Please hold your ID document steady'
+    guidancePassportNotAllowedText: 'Passport detected, please scan an ID card instead'
   });
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
@@ -7216,7 +7168,7 @@ var IdCapture = function IdCapture(_a) {
   });
   var satisfied = state.isGoodFrame;
   if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
-  guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceSatisfiedText : !state.detectionThresholdMet ? verbiage.guidanceNotDetectedText : state.backDetectedFirst ? verbiage.guidanceBackDetectedFirstText : state.flipRequired ? verbiage.guidancePleaseFlipText : state.idCardDetectedButNotAllowed ? verbiage.guidanceIdCardNotAllowedText : state.passportDetectedButNotAllowed ? verbiage.guidancePassportNotAllowedText : !state.documentInBounds ? verbiage.guidanceNotCenteredText : state.documentTooClose ? verbiage.guidanceTooCloseText : !state.focusThresholdMet ? verbiage.guidanceTooBlurryText : !state.documentIsStable ? verbiage.guidanceNotStableText : '');
+  guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceSatisfiedText : !state.detectionThresholdMet ? verbiage.guidanceNotDetectedText : state.backDetectedFirst ? verbiage.guidanceBackDetectedFirstText : state.flipRequired ? verbiage.guidancePleaseFlipText : state.idCardDetectedButNotAllowed ? verbiage.guidanceIdCardNotAllowedText : state.passportDetectedButNotAllowed ? verbiage.guidancePassportNotAllowedText : !state.documentInBounds ? verbiage.guidanceNotCenteredText : state.documentTooClose ? verbiage.guidanceTooCloseText : !state.focusThresholdMet ? verbiage.guidanceTooBlurryText : '');
   return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
     ref: ref,
     className: "flex ".concat((_h = classNames.container) !== null && _h !== void 0 ? _h : '')
@@ -7241,7 +7193,7 @@ var IdCapture = function IdCapture(_a) {
       scaling: debugScalingDetails,
       flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
     });
-  }))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.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__namespace.default.createElement("br", null), modelsReady ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__namespace.default.createElement("br", null), state.documentIsStable ? '✅' : '❌', " Document Is Stable", /*#__PURE__*/React__namespace.default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u274C Models not ready")))));
+  }))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.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__namespace.default.createElement("br", null), modelsReady ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__namespace.default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u274C Models not ready")))));
 };
 var timeSince = function timeSince(t) {
   if (!t) return 0;
@@ -8014,7 +7966,7 @@ var ProgressBarBackground$1 = styled__default.default.div(templateObject_13$1 ||
   var _a, _b, _c, _d;
   return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarBackgroundOpacity) !== null && _d !== void 0 ? _d : 0.75;
 });
-var ProgressBar$1 = styled__default.default.span(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  display: block;\n  width: ", "%;\n  height: 100%;\n"], ["\n  display: block;\n  width: ", "%;\n  height: 100%;\n"])), function (props) {
+var ProgressBar$1 = styled__default.default.span(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  display: block;\n  width: ", "%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n"], ["\n  display: block;\n  width: ", "%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n"])), function (props) {
   return props.$progress;
 });
 var ProgressIndicator$1 = styled__default.default.span(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n  display: block;\n  height: 100%;\n  background: ", ";\n  animation: progressBar 3s ease-in-out;\n  animation-fill-mode: both;\n\n  @keyframes progressBar {\n    0% {\n      width: 0;\n    }\n    100% {\n      width: 100%;\n    }\n  }\n"], ["\n  display: block;\n  height: 100%;\n  background: ", ";\n  animation: progressBar 3s ease-in-out;\n  animation-fill-mode: both;\n\n  @keyframes progressBar {\n    0% {\n      width: 0;\n    }\n    100% {\n      width: 100%;\n    }\n  }\n"])), function (props) {
@@ -12375,7 +12327,7 @@ var ProgressBarBackground = styled__default.default.div(templateObject_10 || (te
   var _a, _b, _c, _d;
   return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarBackgroundOpacity) !== null && _d !== void 0 ? _d : 0.75;
 });
-var ProgressBar = styled__default.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: block;\n  width: ", "%;\n  height: 100%;\n"], ["\n  display: block;\n  width: ", "%;\n  height: 100%;\n"])), function (props) {
+var ProgressBar = styled__default.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: block;\n  width: ", "%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n"], ["\n  display: block;\n  width: ", "%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n"])), function (props) {
   return props.$progress;
 });
 var ProgressIndicator = styled__default.default.span(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: block;\n  height: 100%;\n  background: ", ";\n  animation: progressBar 3s ease-in-out;\n  animation-fill-mode: both;\n\n  @keyframes progressBar {\n    0% {\n      width: 0;\n    }\n    100% {\n      width: 100%;\n    }\n  }\n"], ["\n  display: block;\n  height: 100%;\n  background: ", ";\n  animation: progressBar 3s ease-in-out;\n  animation-fill-mode: both;\n\n  @keyframes progressBar {\n    0% {\n      width: 0;\n    }\n    100% {\n      width: 100%;\n    }\n  }\n"])), function (props) {