idmission-web-sdk 2.1.45 → 2.1.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/components/id_capture/IdCaptureModelsProvider.d.ts +2 -2
  2. package/dist/components/video_id/IdVideoCaptureFlipIdPrompt.d.ts +1 -0
  3. package/dist/components/video_id/IdVideoCaptureGuidesCommon.d.ts +3 -1
  4. package/dist/sdk2.cjs.development.js +256 -255
  5. package/dist/sdk2.cjs.development.js.map +1 -1
  6. package/dist/sdk2.cjs.production.js +1 -1
  7. package/dist/sdk2.cjs.production.js.map +1 -1
  8. package/dist/sdk2.esm.js +256 -255
  9. package/dist/sdk2.esm.js.map +1 -1
  10. package/dist/sdk2.umd.development.js +256 -255
  11. package/dist/sdk2.umd.development.js.map +1 -1
  12. package/dist/sdk2.umd.production.js +1 -1
  13. package/dist/sdk2.umd.production.js.map +1 -1
  14. package/dist/version.d.ts +1 -1
  15. package/package.json +1 -1
package/dist/sdk2.cjs.development.js CHANGED
@@ -234,7 +234,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
234
234
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
235
235
  };
236
236
 
237
- var webSdkVersion = '2.1.45';
237
+ var webSdkVersion = '2.1.47';
238
238
 
239
239
  function getPlatform() {
240
240
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -2678,8 +2678,9 @@ function waitForVideoReady(videoRef, checkEveryMs) {
2678
2678
  checkEveryMs = 100;
2679
2679
  }
2680
2680
  return new Promise(function (resolve) {
2681
- var _a, _b;
2681
+ var _a, _b, _c;
2682
2682
  if (((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) !== null && _b !== void 0 ? _b : 0) >= 2) return resolve();
2683
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.load();
2683
2684
  var interval = setInterval(function () {
2684
2685
  var _a, _b;
2685
2686
  if (((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) !== null && _b !== void 0 ? _b : 0) >= 2) {
@@ -2778,8 +2779,10 @@ function useLoadFocusModel(_a) {
2778
2779
  return [4 /*yield*/, waitForVideoReady(videoRef)];
2779
2780
  case 1:
2780
2781
  _a.sent();
2781
- loadedModel.classifyForVideo(videoRef.current, performance.now());
2782
- setReady(true);
2782
+ setTimeout(function () {
2783
+ loadedModel.classifyForVideo(videoRef.current, performance.now());
2784
+ setReady(true);
2785
+ }, 500);
2783
2786
  return [2 /*return*/];
2784
2787
  }
2785
2788
  });
@@ -5462,8 +5465,10 @@ function useLoadDocumentDetector(_a) {
5462
5465
  return [4 /*yield*/, waitForVideoReady(videoRef)];
5463
5466
  case 1:
5464
5467
  _a.sent();
5465
- model.detectForVideo(videoRef.current, performance.now());
5466
- setReady(true);
5468
+ setTimeout(function () {
5469
+ model.detectForVideo(videoRef.current, performance.now());
5470
+ setReady(true);
5471
+ }, 500);
5467
5472
  return [2 /*return*/];
5468
5473
  }
5469
5474
  });
@@ -5948,7 +5953,9 @@ var IdCaptureModelsContext = /*#__PURE__*/React.createContext({
5948
5953
  },
5949
5954
  detectionTime: 0,
5950
5955
  focusPredictionTime: 0,
5951
- bestFrameDetails: null,
5956
+ bestFrameDetails: {
5957
+ current: null
5958
+ },
5952
5959
  getBestFrame: function getBestFrame() {
5953
5960
  return null;
5954
5961
  },
@@ -5984,15 +5991,13 @@ function IdCaptureModelsProviderInner(_a) {
5984
5991
  focusPredictionTime = _c.focusPredictionTime,
5985
5992
  focusModelError = _c.focusModelError;
5986
5993
  var onPredictionHandler = React.useRef();
5987
- var _d = React.useState(null),
5988
- bestFrameDetails = _d[0],
5989
- setBestFrameDetails = _d[1];
5994
+ var bestFrameDetails = React.useRef(null);
5990
5995
  var bestPredictionCanvas = React.useRef(null);
5991
5996
  var bestFocusScore = React.useRef(0);
5992
5997
  var stopDetection = React.useRef(0);
5993
- var _e = React.useState('none'),
5994
- requiredDocumentType = _e[0],
5995
- setRequiredDocumentType = _e[1];
5998
+ var _d = React.useState('none'),
5999
+ requiredDocumentType = _d[0],
6000
+ setRequiredDocumentType = _d[1];
5996
6001
  var thresholds = React.useMemo(function () {
5997
6002
  return _assign(_assign({}, documentDetectionThresholds), {
5998
6003
  focus: focusThresholds
@@ -6029,12 +6034,12 @@ function IdCaptureModelsProviderInner(_a) {
6029
6034
  if (bestFocusScore.current <= focusScore && stopDetectionAtStart === stopDetection.current) {
6030
6035
  bestFocusScore.current = focusScore;
6031
6036
  drawToCanvas(bestPredictionCanvas.current, lastPredictionCanvas.current);
6032
- setBestFrameDetails({
6037
+ bestFrameDetails.current = {
6033
6038
  boundingBox: (_e = prediction.bestDocument) === null || _e === void 0 ? void 0 : _e.box,
6034
6039
  documentType: prediction.detectedDocumentType,
6035
6040
  detectionScore: prediction.detectionScore,
6036
6041
  focusScore: focusScore
6037
- });
6042
+ };
6038
6043
  }
6039
6044
  }
6040
6045
  (_f = onPredictionHandler.current) === null || _f === void 0 ? void 0 : _f.call(onPredictionHandler, _assign(_assign({}, prediction), {
@@ -6055,21 +6060,21 @@ function IdCaptureModelsProviderInner(_a) {
6055
6060
  onPredictionHandler.current = handler;
6056
6061
  }, []);
6057
6062
  var getBestFrame = React.useCallback(function () {
6058
- if (!bestFrameDetails || !bestPredictionCanvas.current) return null;
6059
- return _assign(_assign({}, bestFrameDetails), {
6063
+ if (!bestFrameDetails.current || !bestPredictionCanvas.current) return null;
6064
+ return _assign(_assign({}, bestFrameDetails.current), {
6060
6065
  canvas: bestPredictionCanvas.current
6061
6066
  });
6062
- }, [bestFrameDetails]);
6063
- var _f = React.useState(0),
6064
- canvasKey = _f[0],
6065
- setCanvasKey = _f[1];
6067
+ }, []);
6068
+ var _e = React.useState(0),
6069
+ canvasKey = _e[0],
6070
+ setCanvasKey = _e[1];
6066
6071
  var resetBestFrame = React.useCallback(function () {
6067
6072
  stopDetection.current += 1;
6068
6073
  setCanvasKey(function (n) {
6069
6074
  return n + 1;
6070
6075
  });
6071
6076
  clearDocumentDetectionLastPredictionCanvas();
6072
- setBestFrameDetails(null);
6077
+ bestFrameDetails.current = null;
6073
6078
  bestFocusScore.current = 0;
6074
6079
  }, [clearDocumentDetectionLastPredictionCanvas]);
6075
6080
  React.useEffect(function () {
@@ -6093,7 +6098,7 @@ function IdCaptureModelsProviderInner(_a) {
6093
6098
  requiredDocumentType: requiredDocumentType,
6094
6099
  setRequiredDocumentType: setRequiredDocumentType
6095
6100
  };
6096
- }, [bestFrameDetails, detectionTime, documentDetectionModelDownloadProgress, documentDetectionModelReady, focusModelDownloadProgress, focusModelReady, focusPredictionTime, getBestFrame, modelError, onPredictionMade, requiredDocumentType, resetBestFrame, setThresholds, startDocumentDetection, stopDocumentDetection, thresholds]);
6101
+ }, [detectionTime, documentDetectionModelDownloadProgress, documentDetectionModelReady, focusModelDownloadProgress, focusModelReady, focusPredictionTime, getBestFrame, modelError, onPredictionMade, requiredDocumentType, resetBestFrame, setThresholds, startDocumentDetection, stopDocumentDetection, thresholds]);
6097
6102
  return /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsContext.Provider, {
6098
6103
  value: value
6099
6104
  }, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
@@ -7854,7 +7859,7 @@ var StyledOverlayImageContainer$2 = styled__default.default(OverlayImageContaine
7854
7859
  var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n position: fixed;\n bottom: 120px;\n width: 100dvw;\n display: flex;\n"], ["\n position: fixed;\n bottom: 120px;\n width: 100dvw;\n display: flex;\n"])));
7855
7860
  var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
7856
7861
  var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
7857
- var StyledButtonsRow$a = styled__default.default(ButtonsRow$1)(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"])), function (props) {
7862
+ var StyledButtonsRow$a = styled__default.default(ButtonsRow$1)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"])), function (props) {
7858
7863
  var _a, _b, _c, _d;
7859
7864
  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.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
7860
7865
  }, function (props) {
@@ -7888,7 +7893,7 @@ var ContinueButton$1 = styled__default.default(LoaderButton)(templateObject_18 |
7888
7893
  var _a, _b, _c, _d, _e, _f;
7889
7894
  return ((_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.continueBtnBorder) ? "border: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.continueBtnBorder, ";") : '';
7890
7895
  });
7891
- var templateObject_1$x, templateObject_2$r, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$4, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
7896
+ var templateObject_1$x, templateObject_2$r, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
7892
7897
 
7893
7898
  var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n margin-top: 15px;\n margin-bottom: 15px;\n"], ["\n margin-top: 15px;\n margin-bottom: 15px;\n"])));
7894
7899
  var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
@@ -8154,8 +8159,8 @@ var CapturedImageWrapper = styled__default.default.div(templateObject_7$6 || (te
8154
8159
  var _a, _b, _c;
8155
8160
  return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.success) === null || _b === void 0 ? void 0 : _b.imageBorderColor) !== null && _c !== void 0 ? _c : 'var(--idm-color-primary-400)';
8156
8161
  });
8157
- var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n width: 100%;\n border-radius: 4px;\n"], ["\n width: 100%;\n border-radius: 4px;\n"])));
8158
- var templateObject_1$v, templateObject_2$p, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$6, templateObject_8$3;
8162
+ var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n width: 100%;\n border-radius: 4px;\n"], ["\n width: 100%;\n border-radius: 4px;\n"])));
8163
+ var templateObject_1$v, templateObject_2$p, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$6, templateObject_8$2;
8159
8164
 
8160
8165
  function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
8161
8166
  var _this = this;
@@ -8241,9 +8246,10 @@ function IdCardBorder(_a) {
8241
8246
  borderRadius = _o === void 0 ? 25 : _o,
8242
8247
  _p = _a.borderColor,
8243
8248
  borderColor = _p === void 0 ? 'white' : _p,
8249
+ aspectRatio = _a.aspectRatio,
8244
8250
  _q = _a.progress,
8245
8251
  progress = _q === void 0 ? 0 : _q,
8246
- props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor", "progress"]);
8252
+ props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor", "aspectRatio", "progress"]);
8247
8253
  var _r = useResizeObserver__default.default(),
8248
8254
  ref = _r.ref,
8249
8255
  _s = _r.width,
@@ -8265,7 +8271,10 @@ function IdCardBorder(_a) {
8265
8271
  var wavesColor = (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.wavesColor) !== null && _g !== void 0 ? _g : '#287ec6';
8266
8272
  var progressBarColor = (_k = (_j = (_h = theme.idCapture) === null || _h === void 0 ? void 0 : _h.guideBox) === null || _j === void 0 ? void 0 : _j.progressBarColor) !== null && _k !== void 0 ? _k : '#287ec6';
8267
8273
  return /*#__PURE__*/React__namespace.default.createElement(IdCardBorderContainer, _assign({}, props), /*#__PURE__*/React__namespace.default.createElement("div", {
8268
- ref: ref
8274
+ ref: ref,
8275
+ style: {
8276
+ aspectRatio: aspectRatio
8277
+ }
8269
8278
  }, children), status === 'ready' && !wavesDisabled && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(IdCardBorderSvg, {
8270
8279
  width: width,
8271
8280
  height: height,
@@ -8756,9 +8765,9 @@ var GuideCenterBorder = styled__default.default.div(templateObject_7$5 || (templ
8756
8765
  }, function (props) {
8757
8766
  return props.$padding ? "padding: ".concat(props.$padding, "px;") : '';
8758
8767
  });
8759
- var GuideText = styled__default.default.span(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"], ["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"])));
8768
+ var GuideText = styled__default.default.span(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"], ["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"])));
8760
8769
  var GuideCenterInner = styled__default.default.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n position: relative;\n margin: auto;\n"], ["\n position: relative;\n margin: auto;\n"])));
8761
- var templateObject_1$s, templateObject_2$n, templateObject_3$j, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9$1;
8770
+ var templateObject_1$s, templateObject_2$n, templateObject_3$j, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$1, templateObject_9$1;
8762
8771
 
8763
8772
  var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
8764
8773
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
@@ -10241,7 +10250,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
10241
10250
  colors: colors,
10242
10251
  verbiage: idCaptureVerbiage,
10243
10252
  isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments
10244
- }), !((_d = (_c = theme.idCapture) === null || _c === void 0 ? void 0 : _c.capturePreview) === null || _d === void 0 ? void 0 : _d.disabled) && state.captureState === 'requestingFlip' && !separateIdCardCaptureSequence && state.imageUrl && ( /*#__PURE__*/React__namespace.default.createElement(IdCaptureImagePreview, {
10253
+ }), debugMode && !((_d = (_c = theme.idCapture) === null || _c === void 0 ? void 0 : _c.capturePreview) === null || _d === void 0 ? void 0 : _d.disabled) && state.captureState === 'requestingFlip' && !separateIdCardCaptureSequence && state.imageUrl && ( /*#__PURE__*/React__namespace.default.createElement(IdCaptureImagePreview, {
10245
10254
  classNames: (_e = classNames.capture) === null || _e === void 0 ? void 0 : _e.imagePreview,
10246
10255
  text: (_f = idCaptureVerbiages === null || idCaptureVerbiages === void 0 ? void 0 : idCaptureVerbiages.idCardFront) === null || _f === void 0 ? void 0 : _f.processingIdCardText,
10247
10256
  imageUrl: state.imageUrl
@@ -10601,51 +10610,57 @@ var HeadGuideSvg = /*#__PURE__*/React.forwardRef(function (_a, ref) {
10601
10610
  }))));
10602
10611
  });
10603
10612
  HeadGuideSvg.displayName = 'HeadGuideSvg';
10604
- var PulsingHeadGuideContainer = styled__default.default.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: flex;\n position: absolute;\n left: 0;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n\n & > .pulse {\n position: absolute;\n animation: glow-grow 2s ease-out infinite;\n\n &:nth-child(2) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(3) {\n animation-delay: 1.33s;\n }\n }\n\n & > .pulseOrigin {\n position: relative;\n }\n\n @keyframes glow-grow {\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n"], ["\n display: flex;\n position: absolute;\n left: 0;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n\n & > .pulse {\n position: absolute;\n animation: glow-grow 2s ease-out infinite;\n\n &:nth-child(2) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(3) {\n animation-delay: 1.33s;\n }\n }\n\n & > .pulseOrigin {\n position: relative;\n }\n\n @keyframes glow-grow {\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n"])));
10613
+ var PulsingHeadGuideContainer = styled__default.default.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: flex;\n position: relative;\n height: 100%;\n max-height: 100%;\n\n & > .pulse {\n position: absolute;\n animation: glow-grow 2s ease-out infinite;\n\n &:nth-child(2) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(3) {\n animation-delay: 1.33s;\n }\n }\n\n & > .pulseOrigin {\n position: relative;\n }\n\n @keyframes glow-grow {\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n"], ["\n display: flex;\n position: relative;\n height: 100%;\n max-height: 100%;\n\n & > .pulse {\n position: absolute;\n animation: glow-grow 2s ease-out infinite;\n\n &:nth-child(2) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(3) {\n animation-delay: 1.33s;\n }\n }\n\n & > .pulseOrigin {\n position: relative;\n }\n\n @keyframes glow-grow {\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n"])));
10605
10614
  function HeadGuide(_a) {
10606
10615
  var _b;
10607
10616
  var _c = _a.status,
10608
10617
  status = _c === void 0 ? 'ready' : _c,
10609
10618
  props = __rest(_a, ["status"]);
10610
10619
  var ref = React.useRef(null);
10611
- var parentRef = React.useRef(null);
10612
- var _d = React.useState(undefined),
10613
- refBox = _d[0],
10614
- setRefBox = _d[1];
10615
- React.useLayoutEffect(function () {
10616
- if (!ref.current || !parentRef.current) return;
10617
- var box = ref.current.getBoundingClientRect();
10618
- var parentBox = parentRef.current.getBoundingClientRect();
10619
- setRefBox(_assign(_assign({}, box), {
10620
- top: box.top - parentBox.top,
10621
- left: box.left - parentBox.left
10622
- }));
10620
+ var _d = useResizeObserver__default.default(),
10621
+ parentRef = _d.ref,
10622
+ parentHeight = _d.height;
10623
+ var _e = React.useState(),
10624
+ contentAspectRatio = _e[0],
10625
+ setContentAspectRatio = _e[1];
10626
+ React.useEffect(function () {
10627
+ if (!ref.current) return;
10628
+ var bbox = ref.current.getBBox();
10629
+ setContentAspectRatio((bbox.x + bbox.width + bbox.x) / (bbox.y + bbox.height + bbox.y));
10623
10630
  }, []);
10631
+ var scaledWidth = React.useMemo(function () {
10632
+ return contentAspectRatio && parentHeight && parentHeight / contentAspectRatio;
10633
+ }, [contentAspectRatio, parentHeight]);
10624
10634
  return /*#__PURE__*/React__namespace.default.createElement(PulsingHeadGuideContainer, {
10625
10635
  ref: parentRef
10626
- }, status === 'ready' && refBox && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
10636
+ }, status === 'ready' && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
10627
10637
  className: "pulse",
10628
10638
  borderOpacity: 0.25,
10629
10639
  borderColor: "#287ec6",
10630
- style: refBox
10640
+ width: scaledWidth,
10641
+ height: parentHeight
10631
10642
  })), /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
10632
10643
  className: "pulse",
10633
10644
  borderOpacity: 0.25,
10634
10645
  borderColor: "#287ec6",
10635
- style: refBox
10646
+ width: scaledWidth,
10647
+ height: parentHeight
10636
10648
  })), /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
10637
10649
  className: "pulse",
10638
10650
  borderOpacity: 0.25,
10639
10651
  borderColor: "#287ec6",
10640
- style: refBox
10652
+ width: scaledWidth,
10653
+ height: parentHeight
10641
10654
  })))), /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
10642
10655
  ref: ref,
10643
10656
  borderOpacity: 1,
10644
10657
  className: "pulseOrigin ".concat((_b = props.className) !== null && _b !== void 0 ? _b : ''),
10645
- status: status
10658
+ status: status,
10659
+ width: scaledWidth,
10660
+ height: parentHeight
10646
10661
  })));
10647
10662
  }
10648
- var RelativeSvg = styled__default.default.svg(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
10663
+ var AbsoluteSvg = styled__default.default.svg(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n"])));
10649
10664
  var RelativeSvgContainer = styled__default.default.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n position: relative;\n height: 100%;\n display: flex;\n align-items: ", ";\n"], ["\n position: relative;\n height: 100%;\n display: flex;\n align-items: ", ";\n"])), function (props) {
10650
10665
  return props.$verticalAlign === 'bottom' ? 'flex-end' : 'center';
10651
10666
  });
@@ -10675,11 +10690,11 @@ function SelfieCaptureAnimatedMask(_a) {
10675
10690
  borderWidth: borderWidth,
10676
10691
  borderColor: statusBorderColor,
10677
10692
  status: status
10678
- }, props)), /*#__PURE__*/React__namespace.default.createElement(RelativeSvg, _assign({}, props, {
10693
+ }, props)), status === 'processing' && ( /*#__PURE__*/React__namespace.default.createElement(AbsoluteSvg, _assign({}, props, {
10679
10694
  viewBox: "271 92 297 406",
10680
10695
  fill: "none",
10681
10696
  xmlns: "http://www.w3.org/2000/svg"
10682
- }), status === 'processing' && ( /*#__PURE__*/React__namespace.default.createElement("g", {
10697
+ }), /*#__PURE__*/React__namespace.default.createElement("g", {
10683
10698
  clipPath: "url(#clip0_428_1188)"
10684
10699
  }, frame > 1 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, frame > 2 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, frame > 3 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, frame > 4 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
10685
10700
  d: "M298.5 182.5L419 164.5L540 182",
@@ -10838,13 +10853,13 @@ function SelfieCaptureAnimatedMask(_a) {
10838
10853
  cy: "409",
10839
10854
  r: "7",
10840
10855
  fill: "white"
10841
- }))))), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
10856
+ })))), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
10842
10857
  id: "clip0_428_1188"
10843
10858
  }, /*#__PURE__*/React__namespace.default.createElement("rect", {
10844
10859
  width: "840",
10845
10860
  height: "740",
10846
10861
  fill: "white"
10847
- })))));
10862
+ }))))));
10848
10863
  }
10849
10864
  function SelfieCaptureAnimatedMaskWithStatus(_a) {
10850
10865
  var _b = _a.status,
@@ -10875,41 +10890,8 @@ function SelfieCaptureAnimatedMaskWithStatus(_a) {
10875
10890
  }
10876
10891
  var templateObject_1$k, templateObject_2$h, templateObject_3$f;
10877
10892
 
10878
- var FaceCaptureGuideContainer = styled__default.default.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n box-sizing: border-box;\n"], ["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n box-sizing: border-box;\n"
10879
- // const FaceCaptureGuideOval = styled.div<{
10880
- // $variant: FaceCaptureGuideOverlayVariant
10881
- // $borderWidth: number
10882
- // $borderColor?: string
10883
- // }>`
10884
- // border-width: ${(props) => props.$borderWidth}px;
10885
- // border-color: ${(props) =>
10886
- // props.$borderColor ??
10887
- // props.theme.selfieCapture?.guides?.[`${props.$variant}Color`] ??
10888
- // 'white'};
10889
- // border-style: solid;
10890
- // border-radius: 50%;
10891
- // aspect-ratio: 1 / 1.618;
10892
- // height: 50%;
10893
- // margin: auto;
10894
- // `
10895
- ])));
10896
- // const FaceCaptureGuideOval = styled.div<{
10897
- // $variant: FaceCaptureGuideOverlayVariant
10898
- // $borderWidth: number
10899
- // $borderColor?: string
10900
- // }>`
10901
- // border-width: ${(props) => props.$borderWidth}px;
10902
- // border-color: ${(props) =>
10903
- // props.$borderColor ??
10904
- // props.theme.selfieCapture?.guides?.[`${props.$variant}Color`] ??
10905
- // 'white'};
10906
- // border-style: solid;
10907
- // border-radius: 50%;
10908
- // aspect-ratio: 1 / 1.618;
10909
- // height: 50%;
10910
- // margin: auto;
10911
- // `
10912
- var StyledSelfieCaptureAnimatedMask$2 = styled__default.default(SelfieCaptureAnimatedMaskWithStatus)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n max-width: 100%;\n max-height: 100%;\n height: 60%;\n"], ["\n max-width: 100%;\n max-height: 100%;\n height: 60%;\n"])));
10893
+ var FaceCaptureGuideContainer = styled__default.default.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n box-sizing: border-box;\n"], ["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n box-sizing: border-box;\n"])));
10894
+ var FaceCaptureGuideInner = styled__default.default.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n position: relative;\n height: 60%;\n"], ["\n position: relative;\n height: 60%;\n"])));
10913
10895
  var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
10914
10896
  var _b = _a.classNames,
10915
10897
  classNames = _b === void 0 ? {} : _b,
@@ -10923,13 +10905,13 @@ var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
10923
10905
  borderOpacity = _f === void 0 ? 0.8 : _f;
10924
10906
  return /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideContainer, {
10925
10907
  className: classNames.container
10926
- }, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask$2, {
10908
+ }, /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideInner, null, /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureAnimatedMaskWithStatus, {
10927
10909
  status: status,
10928
10910
  borderColor: borderColor,
10929
10911
  borderWidth: borderWidth,
10930
10912
  borderOpacity: borderOpacity,
10931
10913
  verticalAlign: "center"
10932
- }));
10914
+ })));
10933
10915
  };
10934
10916
  var templateObject_1$j, templateObject_2$g;
10935
10917
 
@@ -11788,7 +11770,7 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
11788
11770
  colors: colors,
11789
11771
  verbiage: verbiage,
11790
11772
  debugMode: debugMode
11791
- }), !disableCapturePreview && imageUrl && ( /*#__PURE__*/React__namespace.default.createElement(SelfieProgressPreview, {
11773
+ }), debugMode && !disableCapturePreview && imageUrl && ( /*#__PURE__*/React__namespace.default.createElement(SelfieProgressPreview, {
11792
11774
  classNames: classNames.imagePreview,
11793
11775
  imageUrl: imageUrl,
11794
11776
  text: (_e = verbiage.progressPreviewText) !== null && _e !== void 0 ? _e : ''
@@ -12159,7 +12141,7 @@ var StyledButtonsRow$5 = styled__default.default(ButtonsRow$1)(templateObject_4$
12159
12141
  var StyledOverlayImageContainer = styled__default.default(OverlayImageContainer)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n padding: 0;\n\n & > svg {\n height: 100%;\n }\n"], ["\n padding: 0;\n\n & > svg {\n height: 100%;\n }\n"])));
12160
12142
  var LoadingListContainer = styled__default.default.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n display: flex;\n position: relative;\n z-index: 2;\n"], ["\n display: flex;\n position: relative;\n z-index: 2;\n"])));
12161
12143
  var LoadingList = styled__default.default.ul(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n display: block;\n margin: auto;\n list-style: none;\n padding: 0;\n"], ["\n display: block;\n margin: auto;\n list-style: none;\n padding: 0;\n"])));
12162
- var LoadingListItem = styled__default.default.li(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 2px 1.25rem 2px 0;\n line-height: 1rem;\n\n &::before {\n content: '';\n display: inline-block;\n height: 1rem;\n min-width: 1rem;\n vertical-align: middle;\n background-size: cover;\n background-repeat: no-repeat;\n margin: auto 0.5rem auto 0;\n }\n\n &.done::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzg1KSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyNEMxOC42Mjc0IDI0IDI0IDE4LjYyNzQgMjQgMTJDMjQgNS4zNzI1OCAxOC42Mjc0IDAgMTIgMEM1LjM3MjU4IDAgMCA1LjM3MjU4IDAgMTJDMCAxOC42Mjc0IDUuMzcyNTggMjQgMTIgMjRaTTE5LjU2NDMgOC4yNzg1MkMxOS45NTQ5IDcuODg3OTkgMTkuOTU0OSA3LjI1NDgzIDE5LjU2NDMgNi44NjQzQzE5LjE3MzggNi40NzM3OCAxOC41NDA2IDYuNDczNzggMTguMTUwMSA2Ljg2NDNMOS40Mjg2NiAxNS41ODU4TDUuODUwMDUgMTIuMDA3MkM1LjQ1OTUzIDExLjYxNjYgNC44MjYzNiAxMS42MTY2IDQuNDM1ODQgMTIuMDA3MkM0LjA0NTMxIDEyLjM5NzcgNC4wNDUzMSAxMy4wMzA5IDQuNDM1ODQgMTMuNDIxNEw4LjcyMTU1IDE3LjcwNzFDOS4xMTIwOCAxOC4wOTc2IDkuNzQ1MjQgMTguMDk3NiAxMC4xMzU4IDE3LjcwNzFMMTkuNTY0MyA4LjI3ODUyWiIgZmlsbD0id2hpdGUiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF80OV8zODUiPjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=');\n }\n\n &.running::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzcwKSI+PG1hc2sgaWQ9InBhdGgtMS1pbnNpZGUtMV80OV8zNzAiIGZpbGw9IndoaXRlIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNTE0NzIgMjAuNDg1NUM4LjIwMTAxIDI1LjE3MTggMTUuNzk5IDI1LjE3MTggMjAuNDg1MyAyMC40ODU1QzI1LjE3MTYgMTUuNzk5MiAyNS4xNzE2IDguMjAxMTkgMjAuNDg1MyAzLjUxNDlDMTUuNzk5IC0xLjE3MTM5IDguMjAxMDEgLTEuMTcxMzkgMy41MTQ3MiAzLjUxNDlDLTEuMTcxNTcgOC4yMDExOSAtMS4xNzE1NyAxNS43OTkyIDMuNTE0NzIgMjAuNDg1NVoiLz48L21hc2s+PHBhdGggZD0iTTYuMzk4MTQgMTEuNDU5QzUuODQ1ODYgMTEuNDU5IDUuMzk4MTQgMTEuOTA2NyA1LjM5ODE0IDEyLjQ1OUM1LjM5ODE0IDEzLjAxMTIgNS44NDU4NiAxMy40NTkgNi4zOTgxNCAxMy40NTlWMTEuNDU5Wk0xNy42MDE5IDEzLjQ1OUMxOC4xNTQxIDEzLjQ1OSAxOC42MDE5IDEzLjAxMTIgMTguNjAxOSAxMi40NTlDMTguNjAxOSAxMS45MDY3IDE4LjE1NDEgMTEuNDU5IDE3LjYwMTkgMTEuNDU5VjEzLjQ1OVpNNi4zOTgxNCAxMy40NTlIMTcuNjAxOVYxMS40NTlINi4zOTgxNFYxMy40NTlaTTMuNTE0NzIgMjAuNDg1NUw0LjkyODkzIDE5LjA3MTNMNC45Mjg5MyAxOS4wNzEzTDMuNTE0NzIgMjAuNDg1NVpNMjAuNDg1MyAzLjUxNDlMMTkuMDcxMSA0LjkyOTEyTDE5LjA3MTEgNC45MjkxMkwyMC40ODUzIDMuNTE0OVpNMy41MTQ3MiAzLjUxNDlMNC45Mjg5MyA0LjkyOTEyTDQuOTI4OTMgNC45MjkxMkwzLjUxNDcyIDMuNTE0OVpNMTkuMDcxMSAxOS4wNzEzQzE1LjE2NTggMjIuOTc2NSA4LjgzNDE3IDIyLjk3NjUgNC45Mjg5MyAxOS4wNzEzTDIuMTAwNTEgMjEuODk5N0M3LjU2Nzg0IDI3LjM2NyAxNi40MzIyIDI3LjM2NyAyMS44OTk1IDIxLjg5OTdMMTkuMDcxMSAxOS4wNzEzWk0xOS4wNzExIDQuOTI5MTJDMjIuOTc2MyA4LjgzNDM2IDIyLjk3NjMgMTUuMTY2IDE5LjA3MTEgMTkuMDcxM0wyMS44OTk1IDIxLjg5OTdDMjcuMzY2OCAxNi40MzIzIDI3LjM2NjggNy41NjgwMyAyMS44OTk1IDIuMTAwNjlMMTkuMDcxMSA0LjkyOTEyWk00LjkyODkzIDQuOTI5MTJDOC44MzQxNyAxLjAyMzg3IDE1LjE2NTggMS4wMjM4NyAxOS4wNzExIDQuOTI5MTJMMjEuODk5NSAyLjEwMDY5QzE2LjQzMjIgLTMuMzY2NjUgNy41Njc4NCAtMy4zNjY2NSAyLjEwMDUxIDIuMTAwNjlMNC45Mjg5MyA0LjkyOTEyWk00LjkyODkzIDE5LjA3MTNDMS4wMjM2OSAxNS4xNjYgMS4wMjM2OSA4LjgzNDM2IDQuOTI4OTMgNC45MjkxMkwyLjEwMDUxIDIuMTAwNjlDLTMuMzY2ODMgNy41NjgwMyAtMy4zNjY4MyAxNi40MzIzIDIuMTAwNTEgMjEuODk5N0w0LjkyODkzIDE5LjA3MTNaIiBmaWxsPSJ3aGl0ZSIgbWFzaz0idXJsKCNwYXRoLTEtaW5zaWRlLTFfNDlfMzcwKSIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzQ5XzM3MCI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==');\n }\n"], ["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 2px 1.25rem 2px 0;\n line-height: 1rem;\n\n &::before {\n content: '';\n display: inline-block;\n height: 1rem;\n min-width: 1rem;\n vertical-align: middle;\n background-size: cover;\n background-repeat: no-repeat;\n margin: auto 0.5rem auto 0;\n }\n\n &.done::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzg1KSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyNEMxOC42Mjc0IDI0IDI0IDE4LjYyNzQgMjQgMTJDMjQgNS4zNzI1OCAxOC42Mjc0IDAgMTIgMEM1LjM3MjU4IDAgMCA1LjM3MjU4IDAgMTJDMCAxOC42Mjc0IDUuMzcyNTggMjQgMTIgMjRaTTE5LjU2NDMgOC4yNzg1MkMxOS45NTQ5IDcuODg3OTkgMTkuOTU0OSA3LjI1NDgzIDE5LjU2NDMgNi44NjQzQzE5LjE3MzggNi40NzM3OCAxOC41NDA2IDYuNDczNzggMTguMTUwMSA2Ljg2NDNMOS40Mjg2NiAxNS41ODU4TDUuODUwMDUgMTIuMDA3MkM1LjQ1OTUzIDExLjYxNjYgNC44MjYzNiAxMS42MTY2IDQuNDM1ODQgMTIuMDA3MkM0LjA0NTMxIDEyLjM5NzcgNC4wNDUzMSAxMy4wMzA5IDQuNDM1ODQgMTMuNDIxNEw4LjcyMTU1IDE3LjcwNzFDOS4xMTIwOCAxOC4wOTc2IDkuNzQ1MjQgMTguMDk3NiAxMC4xMzU4IDE3LjcwNzFMMTkuNTY0MyA4LjI3ODUyWiIgZmlsbD0id2hpdGUiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF80OV8zODUiPjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=');\n }\n\n &.running::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzcwKSI+PG1hc2sgaWQ9InBhdGgtMS1pbnNpZGUtMV80OV8zNzAiIGZpbGw9IndoaXRlIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNTE0NzIgMjAuNDg1NUM4LjIwMTAxIDI1LjE3MTggMTUuNzk5IDI1LjE3MTggMjAuNDg1MyAyMC40ODU1QzI1LjE3MTYgMTUuNzk5MiAyNS4xNzE2IDguMjAxMTkgMjAuNDg1MyAzLjUxNDlDMTUuNzk5IC0xLjE3MTM5IDguMjAxMDEgLTEuMTcxMzkgMy41MTQ3MiAzLjUxNDlDLTEuMTcxNTcgOC4yMDExOSAtMS4xNzE1NyAxNS43OTkyIDMuNTE0NzIgMjAuNDg1NVoiLz48L21hc2s+PHBhdGggZD0iTTYuMzk4MTQgMTEuNDU5QzUuODQ1ODYgMTEuNDU5IDUuMzk4MTQgMTEuOTA2NyA1LjM5ODE0IDEyLjQ1OUM1LjM5ODE0IDEzLjAxMTIgNS44NDU4NiAxMy40NTkgNi4zOTgxNCAxMy40NTlWMTEuNDU5Wk0xNy42MDE5IDEzLjQ1OUMxOC4xNTQxIDEzLjQ1OSAxOC42MDE5IDEzLjAxMTIgMTguNjAxOSAxMi40NTlDMTguNjAxOSAxMS45MDY3IDE4LjE1NDEgMTEuNDU5IDE3LjYwMTkgMTEuNDU5VjEzLjQ1OVpNNi4zOTgxNCAxMy40NTlIMTcuNjAxOVYxMS40NTlINi4zOTgxNFYxMy40NTlaTTMuNTE0NzIgMjAuNDg1NUw0LjkyODkzIDE5LjA3MTNMNC45Mjg5MyAxOS4wNzEzTDMuNTE0NzIgMjAuNDg1NVpNMjAuNDg1MyAzLjUxNDlMMTkuMDcxMSA0LjkyOTEyTDE5LjA3MTEgNC45MjkxMkwyMC40ODUzIDMuNTE0OVpNMy41MTQ3MiAzLjUxNDlMNC45Mjg5MyA0LjkyOTEyTDQuOTI4OTMgNC45MjkxMkwzLjUxNDcyIDMuNTE0OVpNMTkuMDcxMSAxOS4wNzEzQzE1LjE2NTggMjIuOTc2NSA4LjgzNDE3IDIyLjk3NjUgNC45Mjg5MyAxOS4wNzEzTDIuMTAwNTEgMjEuODk5N0M3LjU2Nzg0IDI3LjM2NyAxNi40MzIyIDI3LjM2NyAyMS44OTk1IDIxLjg5OTdMMTkuMDcxMSAxOS4wNzEzWk0xOS4wNzExIDQuOTI5MTJDMjIuOTc2MyA4LjgzNDM2IDIyLjk3NjMgMTUuMTY2IDE5LjA3MTEgMTkuMDcxM0wyMS44OTk1IDIxLjg5OTdDMjcuMzY2OCAxNi40MzIzIDI3LjM2NjggNy41NjgwMyAyMS44OTk1IDIuMTAwNjlMMTkuMDcxMSA0LjkyOTEyWk00LjkyODkzIDQuOTI5MTJDOC44MzQxNyAxLjAyMzg3IDE1LjE2NTggMS4wMjM4NyAxOS4wNzExIDQuOTI5MTJMMjEuODk5NSAyLjEwMDY5QzE2LjQzMjIgLTMuMzY2NjUgNy41Njc4NCAtMy4zNjY2NSAyLjEwMDUxIDIuMTAwNjlMNC45Mjg5MyA0LjkyOTEyWk00LjkyODkzIDE5LjA3MTNDMS4wMjM2OSAxNS4xNjYgMS4wMjM2OSA4LjgzNDM2IDQuOTI4OTMgNC45MjkxMkwyLjEwMDUxIDIuMTAwNjlDLTMuMzY2ODMgNy41NjgwMyAtMy4zNjY4MyAxNi40MzIzIDIuMTAwNTEgMjEuODk5N0w0LjkyODkzIDE5LjA3MTNaIiBmaWxsPSJ3aGl0ZSIgbWFzaz0idXJsKCNwYXRoLTEtaW5zaWRlLTFfNDlfMzcwKSIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzQ5XzM3MCI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==');\n }\n"])));
12144
+ var LoadingListItem = styled__default.default.li(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 2px 1.25rem 2px 0;\n line-height: 1rem;\n\n &::before {\n content: '';\n display: inline-block;\n height: 1rem;\n min-width: 1rem;\n vertical-align: middle;\n background-size: cover;\n background-repeat: no-repeat;\n margin: auto 0.5rem auto 0;\n }\n\n &.done::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzg1KSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyNEMxOC42Mjc0IDI0IDI0IDE4LjYyNzQgMjQgMTJDMjQgNS4zNzI1OCAxOC42Mjc0IDAgMTIgMEM1LjM3MjU4IDAgMCA1LjM3MjU4IDAgMTJDMCAxOC42Mjc0IDUuMzcyNTggMjQgMTIgMjRaTTE5LjU2NDMgOC4yNzg1MkMxOS45NTQ5IDcuODg3OTkgMTkuOTU0OSA3LjI1NDgzIDE5LjU2NDMgNi44NjQzQzE5LjE3MzggNi40NzM3OCAxOC41NDA2IDYuNDczNzggMTguMTUwMSA2Ljg2NDNMOS40Mjg2NiAxNS41ODU4TDUuODUwMDUgMTIuMDA3MkM1LjQ1OTUzIDExLjYxNjYgNC44MjYzNiAxMS42MTY2IDQuNDM1ODQgMTIuMDA3MkM0LjA0NTMxIDEyLjM5NzcgNC4wNDUzMSAxMy4wMzA5IDQuNDM1ODQgMTMuNDIxNEw4LjcyMTU1IDE3LjcwNzFDOS4xMTIwOCAxOC4wOTc2IDkuNzQ1MjQgMTguMDk3NiAxMC4xMzU4IDE3LjcwNzFMMTkuNTY0MyA4LjI3ODUyWiIgZmlsbD0id2hpdGUiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF80OV8zODUiPjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=');\n }\n\n &.running::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzcwKSI+PG1hc2sgaWQ9InBhdGgtMS1pbnNpZGUtMV80OV8zNzAiIGZpbGw9IndoaXRlIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNTE0NzIgMjAuNDg1NUM4LjIwMTAxIDI1LjE3MTggMTUuNzk5IDI1LjE3MTggMjAuNDg1MyAyMC40ODU1QzI1LjE3MTYgMTUuNzk5MiAyNS4xNzE2IDguMjAxMTkgMjAuNDg1MyAzLjUxNDlDMTUuNzk5IC0xLjE3MTM5IDguMjAxMDEgLTEuMTcxMzkgMy41MTQ3MiAzLjUxNDlDLTEuMTcxNTcgOC4yMDExOSAtMS4xNzE1NyAxNS43OTkyIDMuNTE0NzIgMjAuNDg1NVoiLz48L21hc2s+PHBhdGggZD0iTTYuMzk4MTQgMTEuNDU5QzUuODQ1ODYgMTEuNDU5IDUuMzk4MTQgMTEuOTA2NyA1LjM5ODE0IDEyLjQ1OUM1LjM5ODE0IDEzLjAxMTIgNS44NDU4NiAxMy40NTkgNi4zOTgxNCAxMy40NTlWMTEuNDU5Wk0xNy42MDE5IDEzLjQ1OUMxOC4xNTQxIDEzLjQ1OSAxOC42MDE5IDEzLjAxMTIgMTguNjAxOSAxMi40NTlDMTguNjAxOSAxMS45MDY3IDE4LjE1NDEgMTEuNDU5IDE3LjYwMTkgMTEuNDU5VjEzLjQ1OVpNNi4zOTgxNCAxMy40NTlIMTcuNjAxOVYxMS40NTlINi4zOTgxNFYxMy40NTlaTTMuNTE0NzIgMjAuNDg1NUw0LjkyODkzIDE5LjA3MTNMNC45Mjg5MyAxOS4wNzEzTDMuNTE0NzIgMjAuNDg1NVpNMjAuNDg1MyAzLjUxNDlMMTkuMDcxMSA0LjkyOTEyTDE5LjA3MTEgNC45MjkxMkwyMC40ODUzIDMuNTE0OVpNMy41MTQ3MiAzLjUxNDlMNC45Mjg5MyA0LjkyOTEyTDQuOTI4OTMgNC45MjkxMkwzLjUxNDcyIDMuNTE0OVpNMTkuMDcxMSAxOS4wNzEzQzE1LjE2NTggMjIuOTc2NSA4LjgzNDE3IDIyLjk3NjUgNC45Mjg5MyAxOS4wNzEzTDIuMTAwNTEgMjEuODk5N0M3LjU2Nzg0IDI3LjM2NyAxNi40MzIyIDI3LjM2NyAyMS44OTk1IDIxLjg5OTdMMTkuMDcxMSAxOS4wNzEzWk0xOS4wNzExIDQuOTI5MTJDMjIuOTc2MyA4LjgzNDM2IDIyLjk3NjMgMTUuMTY2IDE5LjA3MTEgMTkuMDcxM0wyMS44OTk1IDIxLjg5OTdDMjcuMzY2OCAxNi40MzIzIDI3LjM2NjggNy41NjgwMyAyMS44OTk1IDIuMTAwNjlMMTkuMDcxMSA0LjkyOTEyWk00LjkyODkzIDQuOTI5MTJDOC44MzQxNyAxLjAyMzg3IDE1LjE2NTggMS4wMjM4NyAxOS4wNzExIDQuOTI5MTJMMjEuODk5NSAyLjEwMDY5QzE2LjQzMjIgLTMuMzY2NjUgNy41Njc4NCAtMy4zNjY2NSAyLjEwMDUxIDIuMTAwNjlMNC45Mjg5MyA0LjkyOTEyWk00LjkyODkzIDE5LjA3MTNDMS4wMjM2OSAxNS4xNjYgMS4wMjM2OSA4LjgzNDM2IDQuOTI4OTMgNC45MjkxMkwyLjEwMDUxIDIuMTAwNjlDLTMuMzY2ODMgNy41NjgwMyAtMy4zNjY4MyAxNi40MzIzIDIuMTAwNTEgMjEuODk5N0w0LjkyODkzIDE5LjA3MTNaIiBmaWxsPSJ3aGl0ZSIgbWFzaz0idXJsKCNwYXRoLTEtaW5zaWRlLTFfNDlfMzcwKSIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzQ5XzM3MCI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==');\n }\n"], ["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 2px 1.25rem 2px 0;\n line-height: 1rem;\n\n &::before {\n content: '';\n display: inline-block;\n height: 1rem;\n min-width: 1rem;\n vertical-align: middle;\n background-size: cover;\n background-repeat: no-repeat;\n margin: auto 0.5rem auto 0;\n }\n\n &.done::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzg1KSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyNEMxOC42Mjc0IDI0IDI0IDE4LjYyNzQgMjQgMTJDMjQgNS4zNzI1OCAxOC42Mjc0IDAgMTIgMEM1LjM3MjU4IDAgMCA1LjM3MjU4IDAgMTJDMCAxOC42Mjc0IDUuMzcyNTggMjQgMTIgMjRaTTE5LjU2NDMgOC4yNzg1MkMxOS45NTQ5IDcuODg3OTkgMTkuOTU0OSA3LjI1NDgzIDE5LjU2NDMgNi44NjQzQzE5LjE3MzggNi40NzM3OCAxOC41NDA2IDYuNDczNzggMTguMTUwMSA2Ljg2NDNMOS40Mjg2NiAxNS41ODU4TDUuODUwMDUgMTIuMDA3MkM1LjQ1OTUzIDExLjYxNjYgNC44MjYzNiAxMS42MTY2IDQuNDM1ODQgMTIuMDA3MkM0LjA0NTMxIDEyLjM5NzcgNC4wNDUzMSAxMy4wMzA5IDQuNDM1ODQgMTMuNDIxNEw4LjcyMTU1IDE3LjcwNzFDOS4xMTIwOCAxOC4wOTc2IDkuNzQ1MjQgMTguMDk3NiAxMC4xMzU4IDE3LjcwNzFMMTkuNTY0MyA4LjI3ODUyWiIgZmlsbD0id2hpdGUiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF80OV8zODUiPjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=');\n }\n\n &.running::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzcwKSI+PG1hc2sgaWQ9InBhdGgtMS1pbnNpZGUtMV80OV8zNzAiIGZpbGw9IndoaXRlIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNTE0NzIgMjAuNDg1NUM4LjIwMTAxIDI1LjE3MTggMTUuNzk5IDI1LjE3MTggMjAuNDg1MyAyMC40ODU1QzI1LjE3MTYgMTUuNzk5MiAyNS4xNzE2IDguMjAxMTkgMjAuNDg1MyAzLjUxNDlDMTUuNzk5IC0xLjE3MTM5IDguMjAxMDEgLTEuMTcxMzkgMy41MTQ3MiAzLjUxNDlDLTEuMTcxNTcgOC4yMDExOSAtMS4xNzE1NyAxNS43OTkyIDMuNTE0NzIgMjAuNDg1NVoiLz48L21hc2s+PHBhdGggZD0iTTYuMzk4MTQgMTEuNDU5QzUuODQ1ODYgMTEuNDU5IDUuMzk4MTQgMTEuOTA2NyA1LjM5ODE0IDEyLjQ1OUM1LjM5ODE0IDEzLjAxMTIgNS44NDU4NiAxMy40NTkgNi4zOTgxNCAxMy40NTlWMTEuNDU5Wk0xNy42MDE5IDEzLjQ1OUMxOC4xNTQxIDEzLjQ1OSAxOC42MDE5IDEzLjAxMTIgMTguNjAxOSAxMi40NTlDMTguNjAxOSAxMS45MDY3IDE4LjE1NDEgMTEuNDU5IDE3LjYwMTkgMTEuNDU5VjEzLjQ1OVpNNi4zOTgxNCAxMy40NTlIMTcuNjAxOVYxMS40NTlINi4zOTgxNFYxMy40NTlaTTMuNTE0NzIgMjAuNDg1NUw0LjkyODkzIDE5LjA3MTNMNC45Mjg5MyAxOS4wNzEzTDMuNTE0NzIgMjAuNDg1NVpNMjAuNDg1MyAzLjUxNDlMMTkuMDcxMSA0LjkyOTEyTDE5LjA3MTEgNC45MjkxMkwyMC40ODUzIDMuNTE0OVpNMy41MTQ3MiAzLjUxNDlMNC45Mjg5MyA0LjkyOTEyTDQuOTI4OTMgNC45MjkxMkwzLjUxNDcyIDMuNTE0OVpNMTkuMDcxMSAxOS4wNzEzQzE1LjE2NTggMjIuOTc2NSA4LjgzNDE3IDIyLjk3NjUgNC45Mjg5MyAxOS4wNzEzTDIuMTAwNTEgMjEuODk5N0M3LjU2Nzg0IDI3LjM2NyAxNi40MzIyIDI3LjM2NyAyMS44OTk1IDIxLjg5OTdMMTkuMDcxMSAxOS4wNzEzWk0xOS4wNzExIDQuOTI5MTJDMjIuOTc2MyA4LjgzNDM2IDIyLjk3NjMgMTUuMTY2IDE5LjA3MTEgMTkuMDcxM0wyMS44OTk1IDIxLjg5OTdDMjcuMzY2OCAxNi40MzIzIDI3LjM2NjggNy41NjgwMyAyMS44OTk1IDIuMTAwNjlMMTkuMDcxMSA0LjkyOTEyWk00LjkyODkzIDQuOTI5MTJDOC44MzQxNyAxLjAyMzg3IDE1LjE2NTggMS4wMjM4NyAxOS4wNzExIDQuOTI5MTJMMjEuODk5NSAyLjEwMDY5QzE2LjQzMjIgLTMuMzY2NjUgNy41Njc4NCAtMy4zNjY2NSAyLjEwMDUxIDIuMTAwNjlMNC45Mjg5MyA0LjkyOTEyWk00LjkyODkzIDE5LjA3MTNDMS4wMjM2OSAxNS4xNjYgMS4wMjM2OSA4LjgzNDM2IDQuOTI4OTMgNC45MjkxMkwyLjEwMDUxIDIuMTAwNjlDLTMuMzY2ODMgNy41NjgwMyAtMy4zNjY4MyAxNi40MzIzIDIuMTAwNTEgMjEuODk5N0w0LjkyODkzIDE5LjA3MTNaIiBmaWxsPSJ3aGl0ZSIgbWFzaz0idXJsKCNwYXRoLTEtaW5zaWRlLTFfNDlfMzcwKSIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzQ5XzM3MCI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==');\n }\n"])));
12163
12145
  var ProgressContainer = styled__default.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
12164
12146
  var ProgressBarBackground = styled__default.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: ", ";\n opacity: ", ";\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: ", ";\n opacity: ", ";\n"])), function (props) {
12165
12147
  var _a, _b, _c, _d;
@@ -12184,7 +12166,7 @@ var ContinueButton = styled__default.default(LoaderButton)(templateObject_15 ||
12184
12166
  var _a, _b, _c, _d, _e, _f;
12185
12167
  return ((_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.continueBtnBorder) ? "border: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.selfieCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.continueBtnBorder, ";") : '';
12186
12168
  });
12187
- var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$6, templateObject_5$3, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
12169
+ var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$6, templateObject_5$3, templateObject_6$3, templateObject_7$2, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
12188
12170
 
12189
12171
  var components = {
12190
12172
  "default": SelfieCaptureLoadingOverlayDefault,
@@ -12346,6 +12328,15 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
12346
12328
  setCaptureState('LOADING');
12347
12329
  }
12348
12330
  }, [cameraAccessDenied]);
12331
+ var onLoadingOverlayDismissed = React.useCallback(function () {
12332
+ setCaptureState('CAPTURING');
12333
+ }, []);
12334
+ var onFailureExitClick = React.useCallback(function () {
12335
+ releaseCameraAccessOnExit && releaseCameraAccess();
12336
+ setTimeout(function () {
12337
+ onExitAfterFailure === null || onExitAfterFailure === void 0 ? void 0 : onExitAfterFailure(submissionResponse, livenessCheckRequest);
12338
+ }, 0);
12339
+ }, [livenessCheckRequest, onExitAfterFailure, releaseCameraAccess, releaseCameraAccessOnExit, submissionResponse]);
12349
12340
  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
12350
12341
  className: "flex ".concat((_c = (_b = classNames.capture) === null || _b === void 0 ? void 0 : _b.container) !== null && _c !== void 0 ? _c : '')
12351
12342
  }, renderCameraFeed && ( /*#__PURE__*/React__namespace.default.createElement(CameraVideoTag, {
@@ -12389,12 +12380,7 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
12389
12380
  verbiage: verbiage.failure,
12390
12381
  canRetry: maxRetries > -1 && retryCount < maxRetries,
12391
12382
  onRetryClick: onRetryCallback,
12392
- onExitClick: function onExitClick() {
12393
- releaseCameraAccessOnExit && releaseCameraAccess();
12394
- setTimeout(function () {
12395
- onExitAfterFailure === null || onExitAfterFailure === void 0 ? void 0 : onExitAfterFailure(submissionResponse, livenessCheckRequest);
12396
- }, 0);
12397
- }
12383
+ onExitClick: onFailureExitClick
12398
12384
  });
12399
12385
  default:
12400
12386
  return null;
@@ -12407,9 +12393,7 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
12407
12393
  colors: colors.loadingOverlay,
12408
12394
  verbiage: verbiage.loadingOverlay,
12409
12395
  onUserCancel: onUserCancel,
12410
- onDismissed: function onDismissed() {
12411
- setCaptureState('CAPTURING');
12412
- }
12396
+ onDismissed: onLoadingOverlayDismissed
12413
12397
  }));
12414
12398
  };
12415
12399
 
@@ -13170,7 +13154,7 @@ function VideoSignatureGuides(_a) {
13170
13154
  className: classNames.inner
13171
13155
  }, /*#__PURE__*/React__namespace.default.createElement(FaceGuideContainer$1, {
13172
13156
  className: classNames.faceGuideContainer
13173
- }, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask$1, {
13157
+ }, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask, {
13174
13158
  className: classNames.faceGuide,
13175
13159
  status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
13176
13160
  borderWidth: faceGuideBorderWidth,
@@ -13209,7 +13193,7 @@ var Container$1 = styled__default.default.div(templateObject_1$9 || (templateObj
13209
13193
  });
13210
13194
  var Inner$1 = styled__default.default.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height: 1280px;\n display: flex;\n margin: auto;\n align-items: center;\n flex-direction: column;\n"], ["\n width: 100%;\n height: 100%;\n max-height: 1280px;\n display: flex;\n margin: auto;\n align-items: center;\n flex-direction: column;\n"])));
13211
13195
  var FaceGuideContainer$1 = styled__default.default.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n position: relative;\n height: 50%;\n"], ["\n position: relative;\n height: 50%;\n"])));
13212
- var StyledSelfieCaptureAnimatedMask$1 = styled__default.default(SelfieCaptureAnimatedMaskWithStatus)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n max-width: 100%;\n height: 100%;\n"], ["\n max-width: 100%;\n height: 100%;\n"])));
13196
+ var StyledSelfieCaptureAnimatedMask = styled__default.default(SelfieCaptureAnimatedMaskWithStatus)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n max-width: 100%;\n height: 100%;\n"], ["\n max-width: 100%;\n height: 100%;\n"])));
13213
13197
  var SignaturePadContainer = styled__default.default.div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n position: relative;\n max-width: 100%;\n height: 50%;\n aspect-ratio: 2;\n"], ["\n position: relative;\n max-width: 100%;\n height: 50%;\n aspect-ratio: 2;\n"])));
13214
13198
  var SignatureCanvasContainer = styled__default.default.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: calc(100% - 67px);\n ", "\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: calc(100% - 67px);\n ", "\n"])), function (props) {
13215
13199
  return props.$disabled ? 'opacity: 0.5; pointer-events: none;' : '';
@@ -13529,29 +13513,29 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
13529
13513
  };
13530
13514
 
13531
13515
  var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
13532
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
13533
- var _0 = _a.requestedAction,
13534
- requestedAction = _0 === void 0 ? 'SHOW_ID_FRONT' : _0,
13535
- _1 = _a.satisfied,
13536
- satisfied = _1 === void 0 ? false : _1,
13537
- _2 = _a.faceGuideStatus,
13538
- faceGuideStatus = _2 === void 0 ? 'success' : _2,
13516
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
13517
+ var _y = _a.requestedAction,
13518
+ requestedAction = _y === void 0 ? 'SHOW_ID_FRONT' : _y,
13519
+ _z = _a.satisfied,
13520
+ satisfied = _z === void 0 ? false : _z,
13521
+ _0 = _a.faceGuideStatus,
13522
+ faceGuideStatus = _0 === void 0 ? 'success' : _0,
13539
13523
  faceGuideBorderWidth = _a.faceGuideBorderWidth,
13540
13524
  faceGuideBorderColor = _a.faceGuideBorderColor,
13541
- _3 = _a.idCardGuideStatus,
13542
- idCardGuideStatus = _3 === void 0 ? 'ready' : _3,
13525
+ _1 = _a.idCardGuideStatus,
13526
+ idCardGuideStatus = _1 === void 0 ? 'ready' : _1,
13543
13527
  idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
13544
13528
  idCardGuideBorderColor = _a.idCardGuideBorderColor,
13545
- _4 = _a.idCardCaptureProgress,
13546
- idCardCaptureProgress = _4 === void 0 ? 0 : _4,
13547
- _5 = _a.assets,
13548
- assets = _5 === void 0 ? {} : _5,
13549
- _6 = _a.classNames,
13550
- classNames = _6 === void 0 ? {} : _6,
13551
- _7 = _a.verbiage,
13552
- rawVerbiage = _7 === void 0 ? {} : _7;
13529
+ _2 = _a.idCardCaptureProgress,
13530
+ idCardCaptureProgress = _2 === void 0 ? 0 : _2,
13531
+ _3 = _a.assets,
13532
+ assets = _3 === void 0 ? {} : _3,
13533
+ _4 = _a.classNames,
13534
+ classNames = _4 === void 0 ? {} : _4,
13535
+ _5 = _a.verbiage,
13536
+ rawVerbiage = _5 === void 0 ? {} : _5;
13553
13537
  var cameraRef = React.useContext(CameraStateContext).cameraRef;
13554
- var imageRef = React.useRef(null);
13538
+ // const imageRef = useRef<HTMLImageElement | null>(null)
13555
13539
  assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-Borderless.svg"));
13556
13540
  assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-Borderless.svg"));
13557
13541
  var verbiage = useTranslations(rawVerbiage, {
@@ -13566,25 +13550,42 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
13566
13550
  if (faceGuideBorderColor === undefined) faceGuideBorderColor = (_j = satisfied ? (_f = (_e = theme.idVideoCapture) === null || _e === void 0 ? void 0 : _e.faceGuides) === null || _f === void 0 ? void 0 : _f.satisfiedColor : (_h = (_g = theme.idVideoCapture) === null || _g === void 0 ? void 0 : _g.faceGuides) === null || _h === void 0 ? void 0 : _h.unsatisfiedColor) !== null && _j !== void 0 ? _j : '#D6DCE7';
13567
13551
  if (idCardGuideBorderWidth === undefined) idCardGuideBorderWidth = (_m = (_l = (_k = theme.idVideoCapture) === null || _k === void 0 ? void 0 : _k.idCardGuides) === null || _l === void 0 ? void 0 : _l.borderWidth) !== null && _m !== void 0 ? _m : 20;
13568
13552
  if (idCardGuideBorderColor === undefined) idCardGuideBorderColor = (_s = satisfied ? (_p = (_o = theme.idVideoCapture) === null || _o === void 0 ? void 0 : _o.idCardGuides) === null || _p === void 0 ? void 0 : _p.satisfiedColor : (_r = (_q = theme.idVideoCapture) === null || _q === void 0 ? void 0 : _q.idCardGuides) === null || _r === void 0 ? void 0 : _r.unsatisfiedColor) !== null && _s !== void 0 ? _s : '#D6DCE7';
13569
- var _8 = useResizeObserver__default.default(),
13570
- idCardGuideRef = _8.ref,
13571
- _9 = _8.width,
13572
- idCardGuideWidth = _9 === void 0 ? 0 : _9,
13573
- _10 = _8.height,
13574
- idCardGuideHeight = _10 === void 0 ? 0 : _10;
13553
+ var _6 = useResizeObserver__default.default(),
13554
+ idCardGuideRef = _6.ref,
13555
+ _7 = _6.width,
13556
+ idCardGuideWidth = _7 === void 0 ? 0 : _7,
13557
+ _8 = _6.height,
13558
+ idCardGuideHeight = _8 === void 0 ? 0 : _8;
13559
+ var _9 = React.useState(undefined),
13560
+ aspectRatio = _9[0],
13561
+ setAspectRatio = _9[1];
13562
+ // const imageRef = (img: HTMLImageElement) => {
13563
+ // if (!img) return
13564
+ // if (typeof aspectRatio === 'number' && aspectRatio > 0) return
13565
+ // setAspectRatio(
13566
+ // (img.naturalHeight ?? 0) > 0
13567
+ // ? img.naturalWidth / img.naturalHeight
13568
+ // : undefined,
13569
+ // )
13570
+ // }
13571
+ function onImageLoaded(e) {
13572
+ var _a;
13573
+ var img = e.currentTarget;
13574
+ setAspectRatio(((_a = img.naturalHeight) !== null && _a !== void 0 ? _a : 0) > 0 ? img.naturalWidth / img.naturalHeight : undefined);
13575
+ }
13575
13576
  var idCardImageStyle = React.useMemo(function () {
13576
13577
  return {
13577
13578
  maxWidth: idCardGuideWidth > 0 ? idCardGuideWidth : undefined,
13578
13579
  maxHeight: idCardGuideHeight,
13579
- height: '100%'
13580
+ height: '100%',
13581
+ aspectRatio: aspectRatio
13580
13582
  };
13581
- }, [idCardGuideWidth, idCardGuideHeight]);
13582
- var aspectRatio = ((_u = (_t = imageRef.current) === null || _t === void 0 ? void 0 : _t.naturalHeight) !== null && _u !== void 0 ? _u : 0) > 0 ? imageRef.current.naturalWidth / imageRef.current.naturalHeight : undefined;
13583
+ }, [idCardGuideWidth, idCardGuideHeight, aspectRatio]);
13583
13584
  return /*#__PURE__*/React__namespace.default.createElement(Container, {
13584
13585
  className: classNames.container
13585
13586
  }, /*#__PURE__*/React__namespace.default.createElement(Inner, null, /*#__PURE__*/React__namespace.default.createElement(FaceGuideContainer, {
13586
13587
  className: classNames.faceGuideContainer
13587
- }, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask, {
13588
+ }, /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureAnimatedMaskWithStatus, {
13588
13589
  className: classNames.faceGuide,
13589
13590
  status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
13590
13591
  borderWidth: faceGuideBorderWidth,
@@ -13603,15 +13604,16 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
13603
13604
  status: requestedAction === 'VERIFY_LIVENESS' ? 'disabled' : idCardGuideStatus,
13604
13605
  borderWidth: idCardGuideBorderWidth,
13605
13606
  borderColor: idCardGuideBorderColor,
13607
+ aspectRatio: aspectRatio,
13606
13608
  "$isVisible": requestedAction !== 'FLIP_ID',
13607
13609
  progress: requestedAction === 'VERIFY_LIVENESS' ? 0 : idCardCaptureProgress
13608
13610
  }, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
13609
13611
  alt: "",
13610
- ref: imageRef,
13611
13612
  className: classNames.idCardGuideImage,
13612
- "$isMirrored": !((_v = cameraRef.current) === null || _v === void 0 ? void 0 : _v.isRearFacing),
13613
+ "$isMirrored": !((_t = cameraRef.current) === null || _t === void 0 ? void 0 : _t.isRearFacing),
13613
13614
  style: idCardImageStyle,
13614
- src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl
13615
+ src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl,
13616
+ onLoad: onImageLoaded
13615
13617
  })), requestedAction === 'FLIP_ID' && ( /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureFlipIdPrompt, {
13616
13618
  assets: assets,
13617
13619
  classNames: classNames.flipIdPrompt,
@@ -13622,8 +13624,8 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
13622
13624
  className: classNames.idCardGuideInstructionsContainer
13623
13625
  }, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInstructions, {
13624
13626
  className: classNames.idCardGuideInstructions,
13625
- "$textColor": (_x = (_w = theme.idVideoCapture) === null || _w === void 0 ? void 0 : _w.idCardGuides) === null || _x === void 0 ? void 0 : _x.instructionsTextColor,
13626
- "$background": (_z = (_y = theme.idVideoCapture) === null || _y === void 0 ? void 0 : _y.idCardGuides) === null || _z === void 0 ? void 0 : _z.instructionsBackgroundColor
13627
+ "$textColor": (_v = (_u = theme.idVideoCapture) === null || _u === void 0 ? void 0 : _u.idCardGuides) === null || _v === void 0 ? void 0 : _v.instructionsTextColor,
13628
+ "$background": (_x = (_w = theme.idVideoCapture) === null || _w === void 0 ? void 0 : _w.idCardGuides) === null || _x === void 0 ? void 0 : _x.instructionsBackgroundColor
13627
13629
  }, instructionText)))));
13628
13630
  };
13629
13631
  var Container = styled__default.default.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n max-height: 100%;\n position: absolute;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n font-family: ", ";\n box-sizing: border-box;\n overflow: hidden;\n padding: 40px;\n"], ["\n display: flex;\n max-height: 100%;\n position: absolute;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n font-family: ", ";\n box-sizing: border-box;\n overflow: hidden;\n padding: 40px;\n"])), function (props) {
@@ -13632,12 +13634,11 @@ var Container = styled__default.default.div(templateObject_1$7 || (templateObjec
13632
13634
  });
13633
13635
  var Inner = styled__default.default.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height: 1280px;\n display: flex;\n margin: auto;\n align-items: center;\n flex-direction: column;\n"], ["\n width: 100%;\n height: 100%;\n max-height: 1280px;\n display: flex;\n margin: auto;\n align-items: center;\n flex-direction: column;\n"])));
13634
13636
  var FaceGuideContainer = styled__default.default.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: relative;\n height: 70%;\n"], ["\n position: relative;\n height: 70%;\n"])));
13635
- var StyledSelfieCaptureAnimatedMask = styled__default.default(SelfieCaptureAnimatedMaskWithStatus)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n max-width: 100%;\n height: 100%;\n"], ["\n max-width: 100%;\n height: 100%;\n"])));
13636
- var IdCardGuideContainer = styled__default.default.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n margin: 0 auto;\n position: relative;\n max-width: 100%;\n height: 30%;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n margin: 0 auto;\n position: relative;\n max-width: 100%;\n height: 30%;\n"])));
13637
- var IdCardGuideInner = styled__default.default.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n"], ["\n position: relative;\n height: 100%;\n"])));
13638
- var IdCardGuideInstructionsContainer = styled__default.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: calc(100% - 80px);\n text-align: center;\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 0 40px;\n position: fixed;\n bottom: 14px;\n left: 0;\n right: 0;\n"], ["\n width: calc(100% - 80px);\n text-align: center;\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 0 40px;\n position: fixed;\n bottom: 14px;\n left: 0;\n right: 0;\n"])));
13639
- var IdCardGuideInstructions = styled__default.default(GuidanceMessage)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-content: center;\n margin: 12px auto;\n padding: 8px 12px;\n font-weight: bold;\n font-size: 18px;\n"], ["\n align-content: center;\n margin: 12px auto;\n padding: 8px 12px;\n font-weight: bold;\n font-size: 18px;\n"])));
13640
- var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8;
13637
+ var IdCardGuideContainer = styled__default.default.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n margin: 0 auto;\n position: relative;\n max-width: 100%;\n height: 30%;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n margin: 0 auto;\n position: relative;\n max-width: 100%;\n height: 30%;\n"])));
13638
+ var IdCardGuideInner = styled__default.default.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n"], ["\n position: relative;\n height: 100%;\n"])));
13639
+ var IdCardGuideInstructionsContainer = styled__default.default.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n width: 100%;\n text-align: center;\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 0 40px;\n position: fixed;\n bottom: 14px;\n left: 0;\n right: 0;\n box-sizing: border-box;\n"], ["\n width: 100%;\n text-align: center;\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 0 40px;\n position: fixed;\n bottom: 14px;\n left: 0;\n right: 0;\n box-sizing: border-box;\n"])));
13640
+ var IdCardGuideInstructions = styled__default.default(GuidanceMessage)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-content: center;\n margin: 12px auto;\n padding: 8px 12px;\n font-weight: bold;\n font-size: 18px;\n"], ["\n align-content: center;\n margin: 12px auto;\n padding: 8px 12px;\n font-weight: bold;\n font-size: 18px;\n"])));
13641
+ var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7;
13641
13642
 
13642
13643
  var ReadTextPrompt = function ReadTextPrompt(_a) {
13643
13644
  var text = _a.text,
@@ -13768,98 +13769,98 @@ var defaultVideoIdCaptureThresholds = {
13768
13769
  }
13769
13770
  };
13770
13771
  var IdVideoCapture = function IdVideoCapture(_a) {
13771
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
13772
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
13772
13773
  var onComplete = _a.onComplete,
13773
13774
  onIdFrontImageCaptured = _a.onIdFrontImageCaptured,
13774
13775
  onIdBackImageCaptured = _a.onIdBackImageCaptured,
13775
13776
  onFaceNotDetected = _a.onFaceNotDetected,
13776
13777
  onRecordingFailed = _a.onRecordingFailed,
13777
13778
  onExitCapture = _a.onExitCapture,
13778
- _w = _a.idCaptureModelsEnabled,
13779
- idCaptureModelsEnabled = _w === void 0 ? true : _w,
13780
- _x = _a.idCardFrontDelay,
13781
- idCardFrontDelay = _x === void 0 ? 1000 : _x,
13782
- _y = _a.videoIdCaptureThresholds,
13783
- videoIdCaptureThresholds = _y === void 0 ? defaultVideoIdCaptureThresholds : _y,
13784
- _z = _a.skipShowIdCardBack,
13785
- skipShowIdCardBack = _z === void 0 ? false : _z,
13786
- _0 = _a.captureCountdownSeconds,
13787
- captureCountdownSeconds = _0 === void 0 ? 3 : _0,
13779
+ _y = _a.idCaptureModelsEnabled,
13780
+ idCaptureModelsEnabled = _y === void 0 ? true : _y,
13781
+ _z = _a.idCardFrontDelay,
13782
+ idCardFrontDelay = _z === void 0 ? 1000 : _z,
13783
+ _0 = _a.videoIdCaptureThresholds,
13784
+ videoIdCaptureThresholds = _0 === void 0 ? defaultVideoIdCaptureThresholds : _0,
13785
+ _1 = _a.skipShowIdCardBack,
13786
+ skipShowIdCardBack = _1 === void 0 ? false : _1,
13787
+ _2 = _a.captureCountdownSeconds,
13788
+ captureCountdownSeconds = _2 === void 0 ? 3 : _2,
13788
13789
  readTextPrompt = _a.readTextPrompt,
13789
- _1 = _a.readTextTimeoutDurationMs,
13790
- readTextTimeoutDurationMs = _1 === void 0 ? 15000 : _1,
13791
- _2 = _a.readTextMinReadingMs,
13792
- readTextMinReadingMs = _2 === void 0 ? 10000 : _2,
13793
- _3 = _a.disableFaceDetectionWhileAudioCapture,
13794
- disableFaceDetectionWhileAudioCapture = _3 === void 0 ? false : _3,
13795
- _4 = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
13796
- disableFaceDetectionWhileAudioCaptureMsDelay = _4 === void 0 ? 2000 : _4,
13797
- _5 = _a.mergeAVStreams,
13798
- mergeAVStreams = _5 === void 0 ? false : _5,
13799
- _6 = _a.assets,
13800
- assets = _6 === void 0 ? {} : _6,
13801
- _7 = _a.classNames,
13802
- classNames = _7 === void 0 ? {} : _7,
13803
- _8 = _a.colors,
13804
- colors = _8 === void 0 ? {} : _8,
13805
- _9 = _a.verbiage,
13806
- rawVerbiage = _9 === void 0 ? {} : _9,
13807
- _10 = _a.debugMode,
13808
- debugMode = _10 === void 0 ? false : _10;
13809
- var _11 = useResizeObserver__default.default(),
13810
- ref = _11.ref,
13811
- _12 = _11.width,
13812
- width = _12 === void 0 ? 1 : _12,
13813
- _13 = _11.height,
13814
- height = _13 === void 0 ? 1 : _13;
13815
- var _14 = React.useContext(CameraStateContext),
13816
- cameraRef = _14.cameraRef,
13817
- videoRef = _14.videoRef,
13818
- videoLoaded = _14.videoLoaded,
13819
- cameraReady = _14.cameraReady,
13820
- microphoneReady = _14.microphoneReady,
13821
- audioStream = _14.audioStream,
13822
- setVideoLoaded = _14.setVideoLoaded;
13823
- var _15 = React.useState([]),
13824
- detectedObjects = _15[0],
13825
- setDetectedObjects = _15[1];
13826
- var _16 = React.useState([]),
13827
- faces = _16[0],
13828
- setFaces = _16[1];
13829
- var _17 = React.useContext(IdCaptureModelsContext),
13830
- idModelsReady = _17.ready,
13831
- startIdModels = _17.start,
13832
- stopIdModels = _17.stop,
13833
- onIdPredictionMade = _17.onPredictionMade,
13834
- setThresholds = _17.setThresholds,
13835
- bestFrameDetails = _17.bestFrameDetails,
13836
- resetBestFrame = _17.resetBestFrame,
13837
- idModelError = _17.modelError;
13838
- var _18 = React.useState(null),
13839
- videoStartsAt = _18[0],
13840
- setVideoStartsAt = _18[1];
13841
- var _19 = React.useContext(SubmissionContext),
13842
- setIdCaptureVideoAudioStartsAt = _19.setIdCaptureVideoAudioStartsAt,
13843
- setExpectedAudioText = _19.setExpectedAudioText;
13844
- var _20 = React.useContext(SelfieGuidanceModelsContext),
13845
- startSelfieGuidance = _20.start,
13846
- stopSelfieGuidance = _20.stop,
13847
- onSelfiePredictionMade = _20.onPredictionMade,
13848
- selfieModelError = _20.error;
13849
- var _21 = useVideoRecorder(cameraRef.current, audioStream, mergeAVStreams),
13850
- isRecordingVideo = _21.isRecordingVideo,
13851
- startRecordingVideo = _21.startRecordingVideo,
13852
- startRecordingAudio = _21.startRecordingAudio,
13853
- stopRecordingVideo = _21.stopRecordingVideo,
13854
- stopRecordingAudio = _21.stopRecordingAudio,
13855
- videoRecordingUnintentionallyStopped = _21.videoRecordingUnintentionallyStopped,
13856
- audioRecordingUnintentionallyStopped = _21.audioRecordingUnintentionallyStopped,
13857
- videoUrl = _21.videoUrl,
13858
- audioUrl = _21.audioUrl;
13790
+ _3 = _a.readTextTimeoutDurationMs,
13791
+ readTextTimeoutDurationMs = _3 === void 0 ? 15000 : _3,
13792
+ _4 = _a.readTextMinReadingMs,
13793
+ readTextMinReadingMs = _4 === void 0 ? 10000 : _4,
13794
+ _5 = _a.disableFaceDetectionWhileAudioCapture,
13795
+ disableFaceDetectionWhileAudioCapture = _5 === void 0 ? false : _5,
13796
+ _6 = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
13797
+ disableFaceDetectionWhileAudioCaptureMsDelay = _6 === void 0 ? 2000 : _6,
13798
+ _7 = _a.mergeAVStreams,
13799
+ mergeAVStreams = _7 === void 0 ? false : _7,
13800
+ _8 = _a.assets,
13801
+ assets = _8 === void 0 ? {} : _8,
13802
+ _9 = _a.classNames,
13803
+ classNames = _9 === void 0 ? {} : _9,
13804
+ _10 = _a.colors,
13805
+ colors = _10 === void 0 ? {} : _10,
13806
+ _11 = _a.verbiage,
13807
+ rawVerbiage = _11 === void 0 ? {} : _11,
13808
+ _12 = _a.debugMode,
13809
+ debugMode = _12 === void 0 ? false : _12;
13810
+ var _13 = useResizeObserver__default.default(),
13811
+ ref = _13.ref,
13812
+ _14 = _13.width,
13813
+ width = _14 === void 0 ? 1 : _14,
13814
+ _15 = _13.height,
13815
+ height = _15 === void 0 ? 1 : _15;
13816
+ var _16 = React.useContext(CameraStateContext),
13817
+ cameraRef = _16.cameraRef,
13818
+ videoRef = _16.videoRef,
13819
+ videoLoaded = _16.videoLoaded,
13820
+ cameraReady = _16.cameraReady,
13821
+ microphoneReady = _16.microphoneReady,
13822
+ audioStream = _16.audioStream,
13823
+ setVideoLoaded = _16.setVideoLoaded;
13824
+ var _17 = React.useState([]),
13825
+ detectedObjects = _17[0],
13826
+ setDetectedObjects = _17[1];
13827
+ var _18 = React.useState([]),
13828
+ faces = _18[0],
13829
+ setFaces = _18[1];
13830
+ var _19 = React.useContext(IdCaptureModelsContext),
13831
+ idModelsReady = _19.ready,
13832
+ startIdModels = _19.start,
13833
+ stopIdModels = _19.stop,
13834
+ onIdPredictionMade = _19.onPredictionMade,
13835
+ setThresholds = _19.setThresholds,
13836
+ bestFrameDetails = _19.bestFrameDetails,
13837
+ resetBestFrame = _19.resetBestFrame,
13838
+ idModelError = _19.modelError;
13839
+ var _20 = React.useState(null),
13840
+ videoStartsAt = _20[0],
13841
+ setVideoStartsAt = _20[1];
13842
+ var _21 = React.useContext(SubmissionContext),
13843
+ setIdCaptureVideoAudioStartsAt = _21.setIdCaptureVideoAudioStartsAt,
13844
+ setExpectedAudioText = _21.setExpectedAudioText;
13845
+ var _22 = React.useContext(SelfieGuidanceModelsContext),
13846
+ startSelfieGuidance = _22.start,
13847
+ stopSelfieGuidance = _22.stop,
13848
+ onSelfiePredictionMade = _22.onPredictionMade,
13849
+ selfieModelError = _22.error;
13850
+ var _23 = useVideoRecorder(cameraRef.current, audioStream, mergeAVStreams),
13851
+ isRecordingVideo = _23.isRecordingVideo,
13852
+ startRecordingVideo = _23.startRecordingVideo,
13853
+ startRecordingAudio = _23.startRecordingAudio,
13854
+ stopRecordingVideo = _23.stopRecordingVideo,
13855
+ stopRecordingAudio = _23.stopRecordingAudio,
13856
+ videoRecordingUnintentionallyStopped = _23.videoRecordingUnintentionallyStopped,
13857
+ audioRecordingUnintentionallyStopped = _23.audioRecordingUnintentionallyStopped,
13858
+ videoUrl = _23.videoUrl,
13859
+ audioUrl = _23.audioUrl;
13859
13860
  var countdownTimeoutRef = React.useRef(undefined);
13860
- var _22 = React.useState(-1),
13861
- countdownRemaining = _22[0],
13862
- setCountdownRemaining = _22[1];
13861
+ var _24 = React.useState(-1),
13862
+ countdownRemaining = _24[0],
13863
+ setCountdownRemaining = _24[1];
13863
13864
  React.useEffect(function () {
13864
13865
  if (!isRecordingVideo && !videoUrl) {
13865
13866
  startRecordingVideo();
@@ -13879,9 +13880,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
13879
13880
  onRecordingFailed === null || onRecordingFailed === void 0 ? void 0 : onRecordingFailed();
13880
13881
  }
13881
13882
  }, [audioRecordingUnintentionallyStopped, onRecordingFailed, videoRecordingUnintentionallyStopped]);
13882
- var _23 = React.useState('SHOW_ID_FRONT'),
13883
- requestedAction = _23[0],
13884
- setRequestedAction = _23[1];
13883
+ var _25 = React.useState('SHOW_ID_FRONT'),
13884
+ requestedAction = _25[0],
13885
+ setRequestedAction = _25[1];
13885
13886
  var shouldRunIdModels = idCaptureModelsEnabled && videoLoaded && cameraReady && idModelsReady && !idModelError && requestedAction !== 'READ_TEXT' && (!readTextPrompt || microphoneReady);
13886
13887
  React.useEffect(function startModelsWhenCapturing() {
13887
13888
  if (!shouldRunIdModels) return;
@@ -13893,15 +13894,15 @@ var IdVideoCapture = function IdVideoCapture(_a) {
13893
13894
  React.useEffect(function () {
13894
13895
  setThresholds(videoIdCaptureThresholds);
13895
13896
  }, [requestedAction, setThresholds, videoIdCaptureThresholds]);
13896
- var _24 = React.useState(0),
13897
- currentDetectionScore = _24[0],
13898
- setCurrentDetectionScore = _24[1];
13899
- var _25 = React.useState(0),
13900
- currentFocusScore = _25[0],
13901
- setCurrentFocusScore = _25[1];
13902
13897
  var _26 = React.useState(0),
13903
- goodFramesCount = _26[0],
13904
- setGoodFramesCount = _26[1];
13898
+ currentDetectionScore = _26[0],
13899
+ setCurrentDetectionScore = _26[1];
13900
+ var _27 = React.useState(0),
13901
+ currentFocusScore = _27[0],
13902
+ setCurrentFocusScore = _27[1];
13903
+ var _28 = React.useState(0),
13904
+ goodFramesCount = _28[0],
13905
+ setGoodFramesCount = _28[1];
13905
13906
  var goodFramesThreshold = requestedAction === 'SHOW_ID_FRONT' ? videoIdCaptureThresholds.goodFrames.idCardFront : videoIdCaptureThresholds.goodFrames.idCardBack;
13906
13907
  var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
13907
13908
  React.useEffect(function () {
@@ -13920,9 +13921,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
13920
13921
  } : 0);
13921
13922
  });
13922
13923
  }, [idCaptureModelsEnabled, onIdPredictionMade, idModelError, requestedAction]);
13923
- var _27 = React.useState(null),
13924
- idFrontCaptureStartedAt = _27[0],
13925
- setFirstGoodFrameTime = _27[1];
13924
+ var _29 = React.useState(null),
13925
+ idFrontCaptureStartedAt = _29[0],
13926
+ setFirstGoodFrameTime = _29[1];
13926
13927
  React.useEffect(function () {
13927
13928
  if (goodFramesCount === 1) setFirstGoodFrameTime(new Date().getTime());
13928
13929
  }, [goodFramesCount]);
@@ -13943,9 +13944,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
13943
13944
  var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
13944
13945
  var faceBox = (_f = faces === null || faces === void 0 ? void 0 : faces[0]) === null || _f === void 0 ? void 0 : _f.box;
13945
13946
  var faceCentered = !faceBox || !frameWidth || faceBox.xMin > frameWidth * edgeBoundary && faceBox.yMin > frameHeight * edgeBoundary && faceBox.xMax < frameWidth * (1 - edgeBoundary) && faceBox.yMax < frameHeight * (1 - edgeBoundary);
13946
- var _28 = React.useState(),
13947
- countdownStartedAt = _28[0],
13948
- setCountdownStartedAt = _28[1];
13947
+ var _30 = React.useState(),
13948
+ countdownStartedAt = _30[0],
13949
+ setCountdownStartedAt = _30[1];
13949
13950
  var photoCanvas = React.useRef(null);
13950
13951
  var frameLock = React.useRef(false);
13951
13952
  var captureFrame = React.useCallback(function () {
@@ -14068,9 +14069,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
14068
14069
  stopSelfieGuidance();
14069
14070
  };
14070
14071
  }, [startSelfieGuidance, stopSelfieGuidance]);
14071
- var _29 = React.useState(0),
14072
- numFramesWithoutFaces = _29[0],
14073
- setNumFramesWithoutFaces = _29[1];
14072
+ var _31 = React.useState(0),
14073
+ numFramesWithoutFaces = _31[0],
14074
+ setNumFramesWithoutFaces = _31[1];
14074
14075
  onSelfiePredictionMade(useDebounce.useThrottledCallback(React.useCallback(function (faces) {
14075
14076
  if (selfieModelError) return;
14076
14077
  setFaces(faces);
@@ -14085,12 +14086,12 @@ var IdVideoCapture = function IdVideoCapture(_a) {
14085
14086
  }
14086
14087
  }, [disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, numFramesWithoutFaces, onFaceNotDetected, timeoutStartedAt]);
14087
14088
  var theme = styled.useTheme();
14088
- var _30 = useTranslations(rawVerbiage, {
14089
+ var _32 = useTranslations(rawVerbiage, {
14089
14090
  faceNotCenteredText: 'Please move your face to the center...',
14090
14091
  captureBtnText: 'Capture'
14091
14092
  }),
14092
- captureBtnText = _30.captureBtnText,
14093
- faceNotCenteredText = _30.faceNotCenteredText;
14093
+ captureBtnText = _32.captureBtnText,
14094
+ faceNotCenteredText = _32.faceNotCenteredText;
14094
14095
  var debugScalingDetails = useDebugScalingDetails({
14095
14096
  enabled: debugMode,
14096
14097
  pageWidth: width,
@@ -14148,7 +14149,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
14148
14149
  className: classNames.guidanceMessage,
14149
14150
  "$background": (_q = (_p = (_o = theme.guidanceMessages) === null || _o === void 0 ? void 0 : _o.negative) === null || _p === void 0 ? void 0 : _p.backgroundColor) !== null && _q !== void 0 ? _q : 'red',
14150
14151
  "$textColor": (_t = (_s = (_r = theme.guidanceMessages) === null || _r === void 0 ? void 0 : _r.negative) === null || _s === void 0 ? void 0 : _s.textColor) !== null && _t !== void 0 ? _t : 'white'
14151
- }, guidanceText))), 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), isRecordingVideo ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__namespace.default.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__namespace.default.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__namespace.default.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__namespace.default.createElement("br", null), "Best Frame Detection Score: ", (_u = bestFrameDetails === null || bestFrameDetails === void 0 ? void 0 : bestFrameDetails.detectionScore) !== null && _u !== void 0 ? _u : 0, /*#__PURE__*/React__namespace.default.createElement("br", null), "Best Frame Focus Score: ", (_v = bestFrameDetails === null || bestFrameDetails === void 0 ? void 0 : bestFrameDetails.focusScore) !== null && _v !== void 0 ? _v : 0)), countdownRemaining > 0 && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(CountdownContainer, {
14152
+ }, guidanceText))), 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), isRecordingVideo ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__namespace.default.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__namespace.default.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__namespace.default.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__namespace.default.createElement("br", null), "Best Frame Detection Score:", ' ', (_v = (_u = bestFrameDetails.current) === null || _u === void 0 ? void 0 : _u.detectionScore) !== null && _v !== void 0 ? _v : 0, /*#__PURE__*/React__namespace.default.createElement("br", null), "Best Frame Focus Score: ", (_x = (_w = bestFrameDetails.current) === null || _w === void 0 ? void 0 : _w.focusScore) !== null && _x !== void 0 ? _x : 0)), countdownRemaining > 0 && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(CountdownContainer, {
14152
14153
  className: classNames.countdownContainer
14153
14154
  }, /*#__PURE__*/React__namespace.default.createElement(Countdown, {
14154
14155
  className: classNames.countdown
@@ -15941,7 +15942,7 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
15941
15942
  colors: colors,
15942
15943
  verbiage: verbiage,
15943
15944
  debugMode: debugMode
15944
- }), !((_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.capturePreview) === null || _c === void 0 ? void 0 : _c.disabled) && imageUrl && ( /*#__PURE__*/React__namespace.default.createElement(SelfieProgressPreview, {
15945
+ }), debugMode && !((_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.capturePreview) === null || _c === void 0 ? void 0 : _c.disabled) && imageUrl && ( /*#__PURE__*/React__namespace.default.createElement(SelfieProgressPreview, {
15945
15946
  imageUrl: imageUrl,
15946
15947
  text: progressPreviewText,
15947
15948
  classNames: classNames.imagePreview
@@ -16499,7 +16500,7 @@ var CustomerIdentificationCapture = function CustomerIdentificationCapture(_a) {
16499
16500
  colors: colors,
16500
16501
  verbiage: verbiage,
16501
16502
  debugMode: debugMode
16502
- }), !((_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.capturePreview) === null || _c === void 0 ? void 0 : _c.disabled) && imageUrl && ( /*#__PURE__*/React__namespace.default.createElement(SelfieProgressPreview, {
16503
+ }), debugMode && !((_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.capturePreview) === null || _c === void 0 ? void 0 : _c.disabled) && imageUrl && ( /*#__PURE__*/React__namespace.default.createElement(SelfieProgressPreview, {
16503
16504
  text: progressPreviewText,
16504
16505
  imageUrl: imageUrl,
16505
16506
  classNames: classNames.imagePreview