idmission-web-sdk 2.1.44 → 2.1.46

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 +245 -248
  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 +245 -248
  9. package/dist/sdk2.esm.js.map +1 -1
  10. package/dist/sdk2.umd.development.js +245 -248
  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.44';
237
+ var webSdkVersion = '2.1.46';
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) {
@@ -5948,7 +5949,9 @@ var IdCaptureModelsContext = /*#__PURE__*/React.createContext({
5948
5949
  },
5949
5950
  detectionTime: 0,
5950
5951
  focusPredictionTime: 0,
5951
- bestFrameDetails: null,
5952
+ bestFrameDetails: {
5953
+ current: null
5954
+ },
5952
5955
  getBestFrame: function getBestFrame() {
5953
5956
  return null;
5954
5957
  },
@@ -5984,15 +5987,13 @@ function IdCaptureModelsProviderInner(_a) {
5984
5987
  focusPredictionTime = _c.focusPredictionTime,
5985
5988
  focusModelError = _c.focusModelError;
5986
5989
  var onPredictionHandler = React.useRef();
5987
- var _d = React.useState(null),
5988
- bestFrameDetails = _d[0],
5989
- setBestFrameDetails = _d[1];
5990
+ var bestFrameDetails = React.useRef(null);
5990
5991
  var bestPredictionCanvas = React.useRef(null);
5991
5992
  var bestFocusScore = React.useRef(0);
5992
5993
  var stopDetection = React.useRef(0);
5993
- var _e = React.useState('none'),
5994
- requiredDocumentType = _e[0],
5995
- setRequiredDocumentType = _e[1];
5994
+ var _d = React.useState('none'),
5995
+ requiredDocumentType = _d[0],
5996
+ setRequiredDocumentType = _d[1];
5996
5997
  var thresholds = React.useMemo(function () {
5997
5998
  return _assign(_assign({}, documentDetectionThresholds), {
5998
5999
  focus: focusThresholds
@@ -6029,12 +6030,12 @@ function IdCaptureModelsProviderInner(_a) {
6029
6030
  if (bestFocusScore.current <= focusScore && stopDetectionAtStart === stopDetection.current) {
6030
6031
  bestFocusScore.current = focusScore;
6031
6032
  drawToCanvas(bestPredictionCanvas.current, lastPredictionCanvas.current);
6032
- setBestFrameDetails({
6033
+ bestFrameDetails.current = {
6033
6034
  boundingBox: (_e = prediction.bestDocument) === null || _e === void 0 ? void 0 : _e.box,
6034
6035
  documentType: prediction.detectedDocumentType,
6035
6036
  detectionScore: prediction.detectionScore,
6036
6037
  focusScore: focusScore
6037
- });
6038
+ };
6038
6039
  }
6039
6040
  }
6040
6041
  (_f = onPredictionHandler.current) === null || _f === void 0 ? void 0 : _f.call(onPredictionHandler, _assign(_assign({}, prediction), {
@@ -6055,21 +6056,21 @@ function IdCaptureModelsProviderInner(_a) {
6055
6056
  onPredictionHandler.current = handler;
6056
6057
  }, []);
6057
6058
  var getBestFrame = React.useCallback(function () {
6058
- if (!bestFrameDetails || !bestPredictionCanvas.current) return null;
6059
- return _assign(_assign({}, bestFrameDetails), {
6059
+ if (!bestFrameDetails.current || !bestPredictionCanvas.current) return null;
6060
+ return _assign(_assign({}, bestFrameDetails.current), {
6060
6061
  canvas: bestPredictionCanvas.current
6061
6062
  });
6062
- }, [bestFrameDetails]);
6063
- var _f = React.useState(0),
6064
- canvasKey = _f[0],
6065
- setCanvasKey = _f[1];
6063
+ }, []);
6064
+ var _e = React.useState(0),
6065
+ canvasKey = _e[0],
6066
+ setCanvasKey = _e[1];
6066
6067
  var resetBestFrame = React.useCallback(function () {
6067
6068
  stopDetection.current += 1;
6068
6069
  setCanvasKey(function (n) {
6069
6070
  return n + 1;
6070
6071
  });
6071
6072
  clearDocumentDetectionLastPredictionCanvas();
6072
- setBestFrameDetails(null);
6073
+ bestFrameDetails.current = null;
6073
6074
  bestFocusScore.current = 0;
6074
6075
  }, [clearDocumentDetectionLastPredictionCanvas]);
6075
6076
  React.useEffect(function () {
@@ -6093,7 +6094,7 @@ function IdCaptureModelsProviderInner(_a) {
6093
6094
  requiredDocumentType: requiredDocumentType,
6094
6095
  setRequiredDocumentType: setRequiredDocumentType
6095
6096
  };
6096
- }, [bestFrameDetails, detectionTime, documentDetectionModelDownloadProgress, documentDetectionModelReady, focusModelDownloadProgress, focusModelReady, focusPredictionTime, getBestFrame, modelError, onPredictionMade, requiredDocumentType, resetBestFrame, setThresholds, startDocumentDetection, stopDocumentDetection, thresholds]);
6097
+ }, [detectionTime, documentDetectionModelDownloadProgress, documentDetectionModelReady, focusModelDownloadProgress, focusModelReady, focusPredictionTime, getBestFrame, modelError, onPredictionMade, requiredDocumentType, resetBestFrame, setThresholds, startDocumentDetection, stopDocumentDetection, thresholds]);
6097
6098
  return /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsContext.Provider, {
6098
6099
  value: value
6099
6100
  }, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
@@ -7854,7 +7855,7 @@ var StyledOverlayImageContainer$2 = styled__default.default(OverlayImageContaine
7854
7855
  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
7856
  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
7857
  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) {
7858
+ 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
7859
  var _a, _b, _c, _d;
7859
7860
  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
7861
  }, function (props) {
@@ -7888,7 +7889,7 @@ var ContinueButton$1 = styled__default.default(LoaderButton)(templateObject_18 |
7888
7889
  var _a, _b, _c, _d, _e, _f;
7889
7890
  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
7891
  });
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;
7892
+ 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
7893
 
7893
7894
  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
7895
  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 +8155,8 @@ var CapturedImageWrapper = styled__default.default.div(templateObject_7$6 || (te
8154
8155
  var _a, _b, _c;
8155
8156
  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
8157
  });
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;
8158
+ 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"])));
8159
+ 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
8160
 
8160
8161
  function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
8161
8162
  var _this = this;
@@ -8241,9 +8242,10 @@ function IdCardBorder(_a) {
8241
8242
  borderRadius = _o === void 0 ? 25 : _o,
8242
8243
  _p = _a.borderColor,
8243
8244
  borderColor = _p === void 0 ? 'white' : _p,
8245
+ aspectRatio = _a.aspectRatio,
8244
8246
  _q = _a.progress,
8245
8247
  progress = _q === void 0 ? 0 : _q,
8246
- props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor", "progress"]);
8248
+ props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor", "aspectRatio", "progress"]);
8247
8249
  var _r = useResizeObserver__default.default(),
8248
8250
  ref = _r.ref,
8249
8251
  _s = _r.width,
@@ -8265,7 +8267,10 @@ function IdCardBorder(_a) {
8265
8267
  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
8268
  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
8269
  return /*#__PURE__*/React__namespace.default.createElement(IdCardBorderContainer, _assign({}, props), /*#__PURE__*/React__namespace.default.createElement("div", {
8268
- ref: ref
8270
+ ref: ref,
8271
+ style: {
8272
+ aspectRatio: aspectRatio
8273
+ }
8269
8274
  }, children), status === 'ready' && !wavesDisabled && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(IdCardBorderSvg, {
8270
8275
  width: width,
8271
8276
  height: height,
@@ -8756,9 +8761,9 @@ var GuideCenterBorder = styled__default.default.div(templateObject_7$5 || (templ
8756
8761
  }, function (props) {
8757
8762
  return props.$padding ? "padding: ".concat(props.$padding, "px;") : '';
8758
8763
  });
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"])));
8764
+ 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
8765
  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;
8766
+ 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
8767
 
8763
8768
  var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
8764
8769
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
@@ -10601,51 +10606,57 @@ var HeadGuideSvg = /*#__PURE__*/React.forwardRef(function (_a, ref) {
10601
10606
  }))));
10602
10607
  });
10603
10608
  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"])));
10609
+ 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
10610
  function HeadGuide(_a) {
10606
10611
  var _b;
10607
10612
  var _c = _a.status,
10608
10613
  status = _c === void 0 ? 'ready' : _c,
10609
10614
  props = __rest(_a, ["status"]);
10610
10615
  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
- }));
10616
+ var _d = useResizeObserver__default.default(),
10617
+ parentRef = _d.ref,
10618
+ parentHeight = _d.height;
10619
+ var _e = React.useState(),
10620
+ contentAspectRatio = _e[0],
10621
+ setContentAspectRatio = _e[1];
10622
+ React.useEffect(function () {
10623
+ if (!ref.current) return;
10624
+ var bbox = ref.current.getBBox();
10625
+ setContentAspectRatio((bbox.x + bbox.width + bbox.x) / (bbox.y + bbox.height + bbox.y));
10623
10626
  }, []);
10627
+ var scaledWidth = React.useMemo(function () {
10628
+ return contentAspectRatio && parentHeight && parentHeight / contentAspectRatio;
10629
+ }, [contentAspectRatio, parentHeight]);
10624
10630
  return /*#__PURE__*/React__namespace.default.createElement(PulsingHeadGuideContainer, {
10625
10631
  ref: parentRef
10626
- }, status === 'ready' && refBox && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
10632
+ }, status === 'ready' && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
10627
10633
  className: "pulse",
10628
10634
  borderOpacity: 0.25,
10629
10635
  borderColor: "#287ec6",
10630
- style: refBox
10636
+ width: scaledWidth,
10637
+ height: parentHeight
10631
10638
  })), /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
10632
10639
  className: "pulse",
10633
10640
  borderOpacity: 0.25,
10634
10641
  borderColor: "#287ec6",
10635
- style: refBox
10642
+ width: scaledWidth,
10643
+ height: parentHeight
10636
10644
  })), /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
10637
10645
  className: "pulse",
10638
10646
  borderOpacity: 0.25,
10639
10647
  borderColor: "#287ec6",
10640
- style: refBox
10648
+ width: scaledWidth,
10649
+ height: parentHeight
10641
10650
  })))), /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
10642
10651
  ref: ref,
10643
10652
  borderOpacity: 1,
10644
10653
  className: "pulseOrigin ".concat((_b = props.className) !== null && _b !== void 0 ? _b : ''),
10645
- status: status
10654
+ status: status,
10655
+ width: scaledWidth,
10656
+ height: parentHeight
10646
10657
  })));
10647
10658
  }
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"])));
10659
+ 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
10660
  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
10661
  return props.$verticalAlign === 'bottom' ? 'flex-end' : 'center';
10651
10662
  });
@@ -10675,11 +10686,11 @@ function SelfieCaptureAnimatedMask(_a) {
10675
10686
  borderWidth: borderWidth,
10676
10687
  borderColor: statusBorderColor,
10677
10688
  status: status
10678
- }, props)), /*#__PURE__*/React__namespace.default.createElement(RelativeSvg, _assign({}, props, {
10689
+ }, props)), status === 'processing' && ( /*#__PURE__*/React__namespace.default.createElement(AbsoluteSvg, _assign({}, props, {
10679
10690
  viewBox: "271 92 297 406",
10680
10691
  fill: "none",
10681
10692
  xmlns: "http://www.w3.org/2000/svg"
10682
- }), status === 'processing' && ( /*#__PURE__*/React__namespace.default.createElement("g", {
10693
+ }), /*#__PURE__*/React__namespace.default.createElement("g", {
10683
10694
  clipPath: "url(#clip0_428_1188)"
10684
10695
  }, 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
10696
  d: "M298.5 182.5L419 164.5L540 182",
@@ -10838,13 +10849,13 @@ function SelfieCaptureAnimatedMask(_a) {
10838
10849
  cy: "409",
10839
10850
  r: "7",
10840
10851
  fill: "white"
10841
- }))))), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
10852
+ })))), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
10842
10853
  id: "clip0_428_1188"
10843
10854
  }, /*#__PURE__*/React__namespace.default.createElement("rect", {
10844
10855
  width: "840",
10845
10856
  height: "740",
10846
10857
  fill: "white"
10847
- })))));
10858
+ }))))));
10848
10859
  }
10849
10860
  function SelfieCaptureAnimatedMaskWithStatus(_a) {
10850
10861
  var _b = _a.status,
@@ -10875,41 +10886,8 @@ function SelfieCaptureAnimatedMaskWithStatus(_a) {
10875
10886
  }
10876
10887
  var templateObject_1$k, templateObject_2$h, templateObject_3$f;
10877
10888
 
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"])));
10889
+ 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"])));
10890
+ 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
10891
  var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
10914
10892
  var _b = _a.classNames,
10915
10893
  classNames = _b === void 0 ? {} : _b,
@@ -10923,13 +10901,13 @@ var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
10923
10901
  borderOpacity = _f === void 0 ? 0.8 : _f;
10924
10902
  return /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideContainer, {
10925
10903
  className: classNames.container
10926
- }, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask$2, {
10904
+ }, /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideInner, null, /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureAnimatedMaskWithStatus, {
10927
10905
  status: status,
10928
10906
  borderColor: borderColor,
10929
10907
  borderWidth: borderWidth,
10930
10908
  borderOpacity: borderOpacity,
10931
10909
  verticalAlign: "center"
10932
- }));
10910
+ })));
10933
10911
  };
10934
10912
  var templateObject_1$j, templateObject_2$g;
10935
10913
 
@@ -12159,7 +12137,7 @@ var StyledButtonsRow$5 = styled__default.default(ButtonsRow$1)(templateObject_4$
12159
12137
  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
12138
  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
12139
  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"])));
12140
+ 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
12141
  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
12142
  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
12143
  var _a, _b, _c, _d;
@@ -12184,7 +12162,7 @@ var ContinueButton = styled__default.default(LoaderButton)(templateObject_15 ||
12184
12162
  var _a, _b, _c, _d, _e, _f;
12185
12163
  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
12164
  });
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;
12165
+ 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
12166
 
12189
12167
  var components = {
12190
12168
  "default": SelfieCaptureLoadingOverlayDefault,
@@ -12346,6 +12324,15 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
12346
12324
  setCaptureState('LOADING');
12347
12325
  }
12348
12326
  }, [cameraAccessDenied]);
12327
+ var onLoadingOverlayDismissed = React.useCallback(function () {
12328
+ setCaptureState('CAPTURING');
12329
+ }, []);
12330
+ var onFailureExitClick = React.useCallback(function () {
12331
+ releaseCameraAccessOnExit && releaseCameraAccess();
12332
+ setTimeout(function () {
12333
+ onExitAfterFailure === null || onExitAfterFailure === void 0 ? void 0 : onExitAfterFailure(submissionResponse, livenessCheckRequest);
12334
+ }, 0);
12335
+ }, [livenessCheckRequest, onExitAfterFailure, releaseCameraAccess, releaseCameraAccessOnExit, submissionResponse]);
12349
12336
  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
12350
12337
  className: "flex ".concat((_c = (_b = classNames.capture) === null || _b === void 0 ? void 0 : _b.container) !== null && _c !== void 0 ? _c : '')
12351
12338
  }, renderCameraFeed && ( /*#__PURE__*/React__namespace.default.createElement(CameraVideoTag, {
@@ -12389,12 +12376,7 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
12389
12376
  verbiage: verbiage.failure,
12390
12377
  canRetry: maxRetries > -1 && retryCount < maxRetries,
12391
12378
  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
- }
12379
+ onExitClick: onFailureExitClick
12398
12380
  });
12399
12381
  default:
12400
12382
  return null;
@@ -12407,9 +12389,7 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
12407
12389
  colors: colors.loadingOverlay,
12408
12390
  verbiage: verbiage.loadingOverlay,
12409
12391
  onUserCancel: onUserCancel,
12410
- onDismissed: function onDismissed() {
12411
- setCaptureState('CAPTURING');
12412
- }
12392
+ onDismissed: onLoadingOverlayDismissed
12413
12393
  }));
12414
12394
  };
12415
12395
 
@@ -13170,7 +13150,7 @@ function VideoSignatureGuides(_a) {
13170
13150
  className: classNames.inner
13171
13151
  }, /*#__PURE__*/React__namespace.default.createElement(FaceGuideContainer$1, {
13172
13152
  className: classNames.faceGuideContainer
13173
- }, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask$1, {
13153
+ }, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask, {
13174
13154
  className: classNames.faceGuide,
13175
13155
  status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
13176
13156
  borderWidth: faceGuideBorderWidth,
@@ -13209,8 +13189,8 @@ var Container$1 = styled__default.default.div(templateObject_1$9 || (templateObj
13209
13189
  });
13210
13190
  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
13191
  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"])));
13213
- var SignaturePadContainer = styled__default.default.div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n position: relative;\n height: 50%;\n aspect-ratio: 2;\n"], ["\n position: relative;\n height: 50%;\n aspect-ratio: 2;\n"])));
13192
+ 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"])));
13193
+ 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
13194
  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
13195
  return props.$disabled ? 'opacity: 0.5; pointer-events: none;' : '';
13216
13196
  });
@@ -13529,29 +13509,29 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
13529
13509
  };
13530
13510
 
13531
13511
  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,
13512
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
13513
+ var _y = _a.requestedAction,
13514
+ requestedAction = _y === void 0 ? 'SHOW_ID_FRONT' : _y,
13515
+ _z = _a.satisfied,
13516
+ satisfied = _z === void 0 ? false : _z,
13517
+ _0 = _a.faceGuideStatus,
13518
+ faceGuideStatus = _0 === void 0 ? 'success' : _0,
13539
13519
  faceGuideBorderWidth = _a.faceGuideBorderWidth,
13540
13520
  faceGuideBorderColor = _a.faceGuideBorderColor,
13541
- _3 = _a.idCardGuideStatus,
13542
- idCardGuideStatus = _3 === void 0 ? 'ready' : _3,
13521
+ _1 = _a.idCardGuideStatus,
13522
+ idCardGuideStatus = _1 === void 0 ? 'ready' : _1,
13543
13523
  idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
13544
13524
  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;
13525
+ _2 = _a.idCardCaptureProgress,
13526
+ idCardCaptureProgress = _2 === void 0 ? 0 : _2,
13527
+ _3 = _a.assets,
13528
+ assets = _3 === void 0 ? {} : _3,
13529
+ _4 = _a.classNames,
13530
+ classNames = _4 === void 0 ? {} : _4,
13531
+ _5 = _a.verbiage,
13532
+ rawVerbiage = _5 === void 0 ? {} : _5;
13553
13533
  var cameraRef = React.useContext(CameraStateContext).cameraRef;
13554
- var imageRef = React.useRef(null);
13534
+ // const imageRef = useRef<HTMLImageElement | null>(null)
13555
13535
  assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-Borderless.svg"));
13556
13536
  assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-Borderless.svg"));
13557
13537
  var verbiage = useTranslations(rawVerbiage, {
@@ -13566,25 +13546,42 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
13566
13546
  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
13547
  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
13548
  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;
13549
+ var _6 = useResizeObserver__default.default(),
13550
+ idCardGuideRef = _6.ref,
13551
+ _7 = _6.width,
13552
+ idCardGuideWidth = _7 === void 0 ? 0 : _7,
13553
+ _8 = _6.height,
13554
+ idCardGuideHeight = _8 === void 0 ? 0 : _8;
13555
+ var _9 = React.useState(undefined),
13556
+ aspectRatio = _9[0],
13557
+ setAspectRatio = _9[1];
13558
+ // const imageRef = (img: HTMLImageElement) => {
13559
+ // if (!img) return
13560
+ // if (typeof aspectRatio === 'number' && aspectRatio > 0) return
13561
+ // setAspectRatio(
13562
+ // (img.naturalHeight ?? 0) > 0
13563
+ // ? img.naturalWidth / img.naturalHeight
13564
+ // : undefined,
13565
+ // )
13566
+ // }
13567
+ function onImageLoaded(e) {
13568
+ var _a;
13569
+ var img = e.currentTarget;
13570
+ setAspectRatio(((_a = img.naturalHeight) !== null && _a !== void 0 ? _a : 0) > 0 ? img.naturalWidth / img.naturalHeight : undefined);
13571
+ }
13575
13572
  var idCardImageStyle = React.useMemo(function () {
13576
13573
  return {
13577
13574
  maxWidth: idCardGuideWidth > 0 ? idCardGuideWidth : undefined,
13578
13575
  maxHeight: idCardGuideHeight,
13579
- height: '100%'
13576
+ height: '100%',
13577
+ aspectRatio: aspectRatio
13580
13578
  };
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;
13579
+ }, [idCardGuideWidth, idCardGuideHeight, aspectRatio]);
13583
13580
  return /*#__PURE__*/React__namespace.default.createElement(Container, {
13584
13581
  className: classNames.container
13585
13582
  }, /*#__PURE__*/React__namespace.default.createElement(Inner, null, /*#__PURE__*/React__namespace.default.createElement(FaceGuideContainer, {
13586
13583
  className: classNames.faceGuideContainer
13587
- }, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask, {
13584
+ }, /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureAnimatedMaskWithStatus, {
13588
13585
  className: classNames.faceGuide,
13589
13586
  status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
13590
13587
  borderWidth: faceGuideBorderWidth,
@@ -13603,15 +13600,16 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
13603
13600
  status: requestedAction === 'VERIFY_LIVENESS' ? 'disabled' : idCardGuideStatus,
13604
13601
  borderWidth: idCardGuideBorderWidth,
13605
13602
  borderColor: idCardGuideBorderColor,
13603
+ aspectRatio: aspectRatio,
13606
13604
  "$isVisible": requestedAction !== 'FLIP_ID',
13607
13605
  progress: requestedAction === 'VERIFY_LIVENESS' ? 0 : idCardCaptureProgress
13608
13606
  }, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
13609
13607
  alt: "",
13610
- ref: imageRef,
13611
13608
  className: classNames.idCardGuideImage,
13612
- "$isMirrored": !((_v = cameraRef.current) === null || _v === void 0 ? void 0 : _v.isRearFacing),
13609
+ "$isMirrored": !((_t = cameraRef.current) === null || _t === void 0 ? void 0 : _t.isRearFacing),
13613
13610
  style: idCardImageStyle,
13614
- src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl
13611
+ src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl,
13612
+ onLoad: onImageLoaded
13615
13613
  })), requestedAction === 'FLIP_ID' && ( /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureFlipIdPrompt, {
13616
13614
  assets: assets,
13617
13615
  classNames: classNames.flipIdPrompt,
@@ -13622,8 +13620,8 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
13622
13620
  className: classNames.idCardGuideInstructionsContainer
13623
13621
  }, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInstructions, {
13624
13622
  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
13623
+ "$textColor": (_v = (_u = theme.idVideoCapture) === null || _u === void 0 ? void 0 : _u.idCardGuides) === null || _v === void 0 ? void 0 : _v.instructionsTextColor,
13624
+ "$background": (_x = (_w = theme.idVideoCapture) === null || _w === void 0 ? void 0 : _w.idCardGuides) === null || _x === void 0 ? void 0 : _x.instructionsBackgroundColor
13627
13625
  }, instructionText)))));
13628
13626
  };
13629
13627
  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 +13630,11 @@ var Container = styled__default.default.div(templateObject_1$7 || (templateObjec
13632
13630
  });
13633
13631
  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
13632
  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;
13633
+ 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"])));
13634
+ 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"])));
13635
+ var IdCardGuideInstructionsContainer = styled__default.default.div(templateObject_6$1 || (templateObject_6$1 = __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"])));
13636
+ 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"])));
13637
+ var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7;
13641
13638
 
13642
13639
  var ReadTextPrompt = function ReadTextPrompt(_a) {
13643
13640
  var text = _a.text,
@@ -13768,98 +13765,98 @@ var defaultVideoIdCaptureThresholds = {
13768
13765
  }
13769
13766
  };
13770
13767
  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;
13768
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
13772
13769
  var onComplete = _a.onComplete,
13773
13770
  onIdFrontImageCaptured = _a.onIdFrontImageCaptured,
13774
13771
  onIdBackImageCaptured = _a.onIdBackImageCaptured,
13775
13772
  onFaceNotDetected = _a.onFaceNotDetected,
13776
13773
  onRecordingFailed = _a.onRecordingFailed,
13777
13774
  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,
13775
+ _y = _a.idCaptureModelsEnabled,
13776
+ idCaptureModelsEnabled = _y === void 0 ? true : _y,
13777
+ _z = _a.idCardFrontDelay,
13778
+ idCardFrontDelay = _z === void 0 ? 1000 : _z,
13779
+ _0 = _a.videoIdCaptureThresholds,
13780
+ videoIdCaptureThresholds = _0 === void 0 ? defaultVideoIdCaptureThresholds : _0,
13781
+ _1 = _a.skipShowIdCardBack,
13782
+ skipShowIdCardBack = _1 === void 0 ? false : _1,
13783
+ _2 = _a.captureCountdownSeconds,
13784
+ captureCountdownSeconds = _2 === void 0 ? 3 : _2,
13788
13785
  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;
13786
+ _3 = _a.readTextTimeoutDurationMs,
13787
+ readTextTimeoutDurationMs = _3 === void 0 ? 15000 : _3,
13788
+ _4 = _a.readTextMinReadingMs,
13789
+ readTextMinReadingMs = _4 === void 0 ? 10000 : _4,
13790
+ _5 = _a.disableFaceDetectionWhileAudioCapture,
13791
+ disableFaceDetectionWhileAudioCapture = _5 === void 0 ? false : _5,
13792
+ _6 = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
13793
+ disableFaceDetectionWhileAudioCaptureMsDelay = _6 === void 0 ? 2000 : _6,
13794
+ _7 = _a.mergeAVStreams,
13795
+ mergeAVStreams = _7 === void 0 ? false : _7,
13796
+ _8 = _a.assets,
13797
+ assets = _8 === void 0 ? {} : _8,
13798
+ _9 = _a.classNames,
13799
+ classNames = _9 === void 0 ? {} : _9,
13800
+ _10 = _a.colors,
13801
+ colors = _10 === void 0 ? {} : _10,
13802
+ _11 = _a.verbiage,
13803
+ rawVerbiage = _11 === void 0 ? {} : _11,
13804
+ _12 = _a.debugMode,
13805
+ debugMode = _12 === void 0 ? false : _12;
13806
+ var _13 = useResizeObserver__default.default(),
13807
+ ref = _13.ref,
13808
+ _14 = _13.width,
13809
+ width = _14 === void 0 ? 1 : _14,
13810
+ _15 = _13.height,
13811
+ height = _15 === void 0 ? 1 : _15;
13812
+ var _16 = React.useContext(CameraStateContext),
13813
+ cameraRef = _16.cameraRef,
13814
+ videoRef = _16.videoRef,
13815
+ videoLoaded = _16.videoLoaded,
13816
+ cameraReady = _16.cameraReady,
13817
+ microphoneReady = _16.microphoneReady,
13818
+ audioStream = _16.audioStream,
13819
+ setVideoLoaded = _16.setVideoLoaded;
13820
+ var _17 = React.useState([]),
13821
+ detectedObjects = _17[0],
13822
+ setDetectedObjects = _17[1];
13823
+ var _18 = React.useState([]),
13824
+ faces = _18[0],
13825
+ setFaces = _18[1];
13826
+ var _19 = React.useContext(IdCaptureModelsContext),
13827
+ idModelsReady = _19.ready,
13828
+ startIdModels = _19.start,
13829
+ stopIdModels = _19.stop,
13830
+ onIdPredictionMade = _19.onPredictionMade,
13831
+ setThresholds = _19.setThresholds,
13832
+ bestFrameDetails = _19.bestFrameDetails,
13833
+ resetBestFrame = _19.resetBestFrame,
13834
+ idModelError = _19.modelError;
13835
+ var _20 = React.useState(null),
13836
+ videoStartsAt = _20[0],
13837
+ setVideoStartsAt = _20[1];
13838
+ var _21 = React.useContext(SubmissionContext),
13839
+ setIdCaptureVideoAudioStartsAt = _21.setIdCaptureVideoAudioStartsAt,
13840
+ setExpectedAudioText = _21.setExpectedAudioText;
13841
+ var _22 = React.useContext(SelfieGuidanceModelsContext),
13842
+ startSelfieGuidance = _22.start,
13843
+ stopSelfieGuidance = _22.stop,
13844
+ onSelfiePredictionMade = _22.onPredictionMade,
13845
+ selfieModelError = _22.error;
13846
+ var _23 = useVideoRecorder(cameraRef.current, audioStream, mergeAVStreams),
13847
+ isRecordingVideo = _23.isRecordingVideo,
13848
+ startRecordingVideo = _23.startRecordingVideo,
13849
+ startRecordingAudio = _23.startRecordingAudio,
13850
+ stopRecordingVideo = _23.stopRecordingVideo,
13851
+ stopRecordingAudio = _23.stopRecordingAudio,
13852
+ videoRecordingUnintentionallyStopped = _23.videoRecordingUnintentionallyStopped,
13853
+ audioRecordingUnintentionallyStopped = _23.audioRecordingUnintentionallyStopped,
13854
+ videoUrl = _23.videoUrl,
13855
+ audioUrl = _23.audioUrl;
13859
13856
  var countdownTimeoutRef = React.useRef(undefined);
13860
- var _22 = React.useState(-1),
13861
- countdownRemaining = _22[0],
13862
- setCountdownRemaining = _22[1];
13857
+ var _24 = React.useState(-1),
13858
+ countdownRemaining = _24[0],
13859
+ setCountdownRemaining = _24[1];
13863
13860
  React.useEffect(function () {
13864
13861
  if (!isRecordingVideo && !videoUrl) {
13865
13862
  startRecordingVideo();
@@ -13879,9 +13876,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
13879
13876
  onRecordingFailed === null || onRecordingFailed === void 0 ? void 0 : onRecordingFailed();
13880
13877
  }
13881
13878
  }, [audioRecordingUnintentionallyStopped, onRecordingFailed, videoRecordingUnintentionallyStopped]);
13882
- var _23 = React.useState('SHOW_ID_FRONT'),
13883
- requestedAction = _23[0],
13884
- setRequestedAction = _23[1];
13879
+ var _25 = React.useState('SHOW_ID_FRONT'),
13880
+ requestedAction = _25[0],
13881
+ setRequestedAction = _25[1];
13885
13882
  var shouldRunIdModels = idCaptureModelsEnabled && videoLoaded && cameraReady && idModelsReady && !idModelError && requestedAction !== 'READ_TEXT' && (!readTextPrompt || microphoneReady);
13886
13883
  React.useEffect(function startModelsWhenCapturing() {
13887
13884
  if (!shouldRunIdModels) return;
@@ -13893,15 +13890,15 @@ var IdVideoCapture = function IdVideoCapture(_a) {
13893
13890
  React.useEffect(function () {
13894
13891
  setThresholds(videoIdCaptureThresholds);
13895
13892
  }, [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
13893
  var _26 = React.useState(0),
13903
- goodFramesCount = _26[0],
13904
- setGoodFramesCount = _26[1];
13894
+ currentDetectionScore = _26[0],
13895
+ setCurrentDetectionScore = _26[1];
13896
+ var _27 = React.useState(0),
13897
+ currentFocusScore = _27[0],
13898
+ setCurrentFocusScore = _27[1];
13899
+ var _28 = React.useState(0),
13900
+ goodFramesCount = _28[0],
13901
+ setGoodFramesCount = _28[1];
13905
13902
  var goodFramesThreshold = requestedAction === 'SHOW_ID_FRONT' ? videoIdCaptureThresholds.goodFrames.idCardFront : videoIdCaptureThresholds.goodFrames.idCardBack;
13906
13903
  var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
13907
13904
  React.useEffect(function () {
@@ -13920,9 +13917,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
13920
13917
  } : 0);
13921
13918
  });
13922
13919
  }, [idCaptureModelsEnabled, onIdPredictionMade, idModelError, requestedAction]);
13923
- var _27 = React.useState(null),
13924
- idFrontCaptureStartedAt = _27[0],
13925
- setFirstGoodFrameTime = _27[1];
13920
+ var _29 = React.useState(null),
13921
+ idFrontCaptureStartedAt = _29[0],
13922
+ setFirstGoodFrameTime = _29[1];
13926
13923
  React.useEffect(function () {
13927
13924
  if (goodFramesCount === 1) setFirstGoodFrameTime(new Date().getTime());
13928
13925
  }, [goodFramesCount]);
@@ -13943,9 +13940,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
13943
13940
  var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
13944
13941
  var faceBox = (_f = faces === null || faces === void 0 ? void 0 : faces[0]) === null || _f === void 0 ? void 0 : _f.box;
13945
13942
  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];
13943
+ var _30 = React.useState(),
13944
+ countdownStartedAt = _30[0],
13945
+ setCountdownStartedAt = _30[1];
13949
13946
  var photoCanvas = React.useRef(null);
13950
13947
  var frameLock = React.useRef(false);
13951
13948
  var captureFrame = React.useCallback(function () {
@@ -14068,9 +14065,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
14068
14065
  stopSelfieGuidance();
14069
14066
  };
14070
14067
  }, [startSelfieGuidance, stopSelfieGuidance]);
14071
- var _29 = React.useState(0),
14072
- numFramesWithoutFaces = _29[0],
14073
- setNumFramesWithoutFaces = _29[1];
14068
+ var _31 = React.useState(0),
14069
+ numFramesWithoutFaces = _31[0],
14070
+ setNumFramesWithoutFaces = _31[1];
14074
14071
  onSelfiePredictionMade(useDebounce.useThrottledCallback(React.useCallback(function (faces) {
14075
14072
  if (selfieModelError) return;
14076
14073
  setFaces(faces);
@@ -14085,12 +14082,12 @@ var IdVideoCapture = function IdVideoCapture(_a) {
14085
14082
  }
14086
14083
  }, [disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, numFramesWithoutFaces, onFaceNotDetected, timeoutStartedAt]);
14087
14084
  var theme = styled.useTheme();
14088
- var _30 = useTranslations(rawVerbiage, {
14085
+ var _32 = useTranslations(rawVerbiage, {
14089
14086
  faceNotCenteredText: 'Please move your face to the center...',
14090
14087
  captureBtnText: 'Capture'
14091
14088
  }),
14092
- captureBtnText = _30.captureBtnText,
14093
- faceNotCenteredText = _30.faceNotCenteredText;
14089
+ captureBtnText = _32.captureBtnText,
14090
+ faceNotCenteredText = _32.faceNotCenteredText;
14094
14091
  var debugScalingDetails = useDebugScalingDetails({
14095
14092
  enabled: debugMode,
14096
14093
  pageWidth: width,
@@ -14148,7 +14145,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
14148
14145
  className: classNames.guidanceMessage,
14149
14146
  "$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
14147
  "$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, {
14148
+ }, 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
14149
  className: classNames.countdownContainer
14153
14150
  }, /*#__PURE__*/React__namespace.default.createElement(Countdown, {
14154
14151
  className: classNames.countdown