idmission-web-sdk 1.0.305 → 1.0.307

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 (13) hide show
  1. package/dist/components/video_id/IdVideoCapture.d.ts +2 -1
  2. package/dist/sdk2.cjs.development.js +139 -118
  3. package/dist/sdk2.cjs.development.js.map +1 -1
  4. package/dist/sdk2.cjs.production.js +1 -1
  5. package/dist/sdk2.cjs.production.js.map +1 -1
  6. package/dist/sdk2.esm.js +139 -118
  7. package/dist/sdk2.esm.js.map +1 -1
  8. package/dist/sdk2.umd.development.js +139 -118
  9. package/dist/sdk2.umd.development.js.map +1 -1
  10. package/dist/sdk2.umd.production.js +1 -1
  11. package/dist/sdk2.umd.production.js.map +1 -1
  12. package/dist/version.d.ts +1 -1
  13. package/package.json +1 -1
package/dist/components/video_id/IdVideoCapture.d.ts CHANGED
@@ -38,6 +38,7 @@ export type IdVideoCaptureProps = {
38
38
  goodIdCardFrontFramesThreshold?: number;
39
39
  goodIdCardBackFramesThreshold?: number;
40
40
  skipShowIdCardBack?: boolean | (() => Promise<boolean>);
41
+ captureCountdownSeconds?: number;
41
42
  readTextPrompt?: CustomerSuppliedVerbiage;
42
43
  readTextTimeoutDurationMs?: number;
43
44
  assets?: IdVideoCaptureAssets;
@@ -46,4 +47,4 @@ export type IdVideoCaptureProps = {
46
47
  verbiage?: IdVideoCaptureVerbiage;
47
48
  debugMode?: boolean;
48
49
  };
49
- export declare const IdVideoCapture: ({ onComplete, onIdFrontImageCaptured, onIdBackImageCaptured, onFaceNotDetected, idCaptureModelsEnabled, idCardFrontDelay, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, goodIdCardFrontFramesThreshold, idCardBackDetectionThreshold, idCardBackFocusThreshold, goodIdCardBackFramesThreshold, skipShowIdCardBack, readTextPrompt, readTextTimeoutDurationMs, assets, classNames, colors, verbiage: rawVerbiage, debugMode, }: IdVideoCaptureProps) => ReactElement;
50
+ export declare const IdVideoCapture: ({ onComplete, onIdFrontImageCaptured, onIdBackImageCaptured, onFaceNotDetected, idCaptureModelsEnabled, idCardFrontDelay, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, goodIdCardFrontFramesThreshold, idCardBackDetectionThreshold, idCardBackFocusThreshold, goodIdCardBackFramesThreshold, skipShowIdCardBack, captureCountdownSeconds, readTextPrompt, readTextTimeoutDurationMs, assets, classNames, colors, verbiage: rawVerbiage, debugMode, }: IdVideoCaptureProps) => ReactElement;
package/dist/sdk2.cjs.development.js CHANGED
@@ -50,7 +50,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
50
50
  var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
51
51
  var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
52
52
 
53
- var webSdkVersion = '1.0.305';
53
+ var webSdkVersion = '1.0.307';
54
54
 
55
55
  function getPlatform() {
56
56
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -238,9 +238,9 @@ var OverlayInner$2 = styled__default['default'].div(templateObject_2$q || (templ
238
238
  }, function (props) {
239
239
  return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
240
240
  });
241
- var OverlayImageContainer = styled__default['default'].div(templateObject_3$i || (templateObject_3$i = tslib.__makeTemplateObject(["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n max-width: var(--app-width);\n max-height: var(--app-height);\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"], ["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n max-width: var(--app-width);\n max-height: var(--app-height);\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"])));
242
- var OverlayImageRow = styled__default['default'].div(templateObject_4$d || (templateObject_4$d = tslib.__makeTemplateObject(["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100vh - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"], ["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100vh - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"])));
243
- var templateObject_1$D, templateObject_2$q, templateObject_3$i, templateObject_4$d;
241
+ var OverlayImageContainer = styled__default['default'].div(templateObject_3$j || (templateObject_3$j = tslib.__makeTemplateObject(["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n max-width: var(--app-width);\n max-height: var(--app-height);\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"], ["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n max-width: var(--app-width);\n max-height: var(--app-height);\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"])));
242
+ var OverlayImageRow = styled__default['default'].div(templateObject_4$e || (templateObject_4$e = tslib.__makeTemplateObject(["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100vh - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"], ["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100vh - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"])));
243
+ var templateObject_1$D, templateObject_2$q, templateObject_3$j, templateObject_4$e;
244
244
 
245
245
  var LoaderButton = function LoaderButton(_a) {
246
246
  var children = _a.children,
@@ -10047,7 +10047,7 @@ var ObjectDetectionDebugOverlayDiv = styled__default['default'].div(templateObje
10047
10047
  var $flipX = _a.$flipX;
10048
10048
  return $flipX ? 'transform: scaleX(-1);' : '';
10049
10049
  });
10050
- var ObjectDetectionDebugBox = styled__default['default'].div(templateObject_3$h || (templateObject_3$h = tslib.__makeTemplateObject(["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n"], ["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n"])), function (_a) {
10050
+ var ObjectDetectionDebugBox = styled__default['default'].div(templateObject_3$i || (templateObject_3$i = tslib.__makeTemplateObject(["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n"], ["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n"])), function (_a) {
10051
10051
  var $color = _a.$color;
10052
10052
  return $color !== null && $color !== void 0 ? $color : 'green';
10053
10053
  }, function (_a) {
@@ -10057,7 +10057,7 @@ var ObjectDetectionDebugBox = styled__default['default'].div(templateObject_3$h
10057
10057
  var $flipX = _a.$flipX;
10058
10058
  return $flipX ? 'transform: scaleX(-1);' : '';
10059
10059
  });
10060
- var FaceDetectionKeypointMarker = styled__default['default'].div(templateObject_4$c || (templateObject_4$c = tslib.__makeTemplateObject(["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n"], ["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n"])), function (_a) {
10060
+ var FaceDetectionKeypointMarker = styled__default['default'].div(templateObject_4$d || (templateObject_4$d = tslib.__makeTemplateObject(["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n"], ["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n"])), function (_a) {
10061
10061
  var $color = _a.$color;
10062
10062
  return $color !== null && $color !== void 0 ? $color : 'red';
10063
10063
  }, function (_a) {
@@ -10237,7 +10237,7 @@ function SelfieCaptureFaceKeypoint(_a) {
10237
10237
  }
10238
10238
  });
10239
10239
  }
10240
- var templateObject_1$A, templateObject_2$p, templateObject_3$h, templateObject_4$c;
10240
+ var templateObject_1$A, templateObject_2$p, templateObject_3$i, templateObject_4$d;
10241
10241
 
10242
10242
  var enTranslation = {};
10243
10243
 
@@ -10766,9 +10766,9 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
10766
10766
  };
10767
10767
  var StyledOverlayInner$2 = styled__default['default'](OverlayInner$2)(templateObject_1$y || (templateObject_1$y = tslib.__makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
10768
10768
  var StyledOverlayImageContainer$2 = styled__default['default'](OverlayImageContainer)(templateObject_2$n || (templateObject_2$n = tslib.__makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
10769
- var Description$3 = styled__default['default'].p(templateObject_3$g || (templateObject_3$g = tslib.__makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
10770
- var RetryButton = styled__default['default'](LoaderButton)(templateObject_4$b || (templateObject_4$b = tslib.__makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
10771
- var templateObject_1$y, templateObject_2$n, templateObject_3$g, templateObject_4$b;
10769
+ var Description$3 = styled__default['default'].p(templateObject_3$h || (templateObject_3$h = tslib.__makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
10770
+ var RetryButton = styled__default['default'](LoaderButton)(templateObject_4$c || (templateObject_4$c = tslib.__makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
10771
+ var templateObject_1$y, templateObject_2$n, templateObject_3$h, templateObject_4$c;
10772
10772
 
10773
10773
  var ExitCaptureStyledButton = styled__default['default'].button(templateObject_1$x || (templateObject_1$x = tslib.__makeTemplateObject(["\n position: absolute;\n top: 12px;\n right: 12px;\n font-size: 20px;\n width: 32px;\n height: 32px;\n font-family: monospace;\n z-index: 1002;\n border: none;\n border-radius: 4px;\n background: #ccc;\n cursor: pointer;\n padding: 8px;\n box-sizing: border-box;\n display: flex;\n\n &:hover {\n background: #ddd;\n }\n\n & > svg {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n"], ["\n position: absolute;\n top: 12px;\n right: 12px;\n font-size: 20px;\n width: 32px;\n height: 32px;\n font-family: monospace;\n z-index: 1002;\n border: none;\n border-radius: 4px;\n background: #ccc;\n cursor: pointer;\n padding: 8px;\n box-sizing: border-box;\n display: flex;\n\n &:hover {\n background: #ddd;\n }\n\n & > svg {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n"])));
10774
10774
  var ExitCaptureButton = function ExitCaptureButton(_a) {
@@ -11465,8 +11465,8 @@ var OverlayHeader$1 = styled__default['default'].div(templateObject_2$m || (temp
11465
11465
  }, function (props) {
11466
11466
  return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
11467
11467
  });
11468
- var StyledGuidanceMessage$2 = styled__default['default'](GuidanceMessage)(templateObject_3$f || (templateObject_3$f = tslib.__makeTemplateObject(["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\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: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\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"])));
11469
- var StyledOverlayImageContainer$1 = styled__default['default'](OverlayImageContainer)(templateObject_4$a || (templateObject_4$a = tslib.__makeTemplateObject(["\n padding: 0 0 100px;\n\n & > svg {\n height: 100%;\n }\n"], ["\n padding: 0 0 100px;\n\n & > svg {\n height: 100%;\n }\n"])));
11468
+ var StyledGuidanceMessage$2 = styled__default['default'](GuidanceMessage)(templateObject_3$g || (templateObject_3$g = tslib.__makeTemplateObject(["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\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: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\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"])));
11469
+ var StyledOverlayImageContainer$1 = styled__default['default'](OverlayImageContainer)(templateObject_4$b || (templateObject_4$b = tslib.__makeTemplateObject(["\n padding: 0 0 100px;\n\n & > svg {\n height: 100%;\n }\n"], ["\n padding: 0 0 100px;\n\n & > svg {\n height: 100%;\n }\n"])));
11470
11470
  var ContinuityCameraCheckboxContainer$1 = styled__default['default'].div(templateObject_5$7 || (templateObject_5$7 = tslib.__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"])));
11471
11471
  var ContinuityCameraCheckboxInner = styled__default['default'](GuidanceMessage)(templateObject_6$6 || (templateObject_6$6 = tslib.__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"])));
11472
11472
  var ContinuityCameraCheckbox$1 = styled__default['default'].input(templateObject_7$4 || (templateObject_7$4 = tslib.__makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
@@ -11504,7 +11504,7 @@ var ContinueButton$1 = styled__default['default'](LoaderButton)(templateObject_1
11504
11504
  var _a, _b, _c, _d, _e, _f;
11505
11505
  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, ";") : '';
11506
11506
  });
11507
- var templateObject_1$v, templateObject_2$m, templateObject_3$f, templateObject_4$a, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$3, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
11507
+ var templateObject_1$v, templateObject_2$m, templateObject_3$g, templateObject_4$b, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$3, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
11508
11508
 
11509
11509
  var ContinuityCameraCheckboxContainer = styled__default['default'].div(templateObject_1$u || (templateObject_1$u = tslib.__makeTemplateObject(["\n margin-top: 15px;\n margin-bottom: 15px;\n"], ["\n margin-top: 15px;\n margin-bottom: 15px;\n"])));
11510
11510
  var ContinuityCameraCheckbox = styled__default['default'].input(templateObject_2$l || (templateObject_2$l = tslib.__makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
@@ -11747,8 +11747,8 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
11747
11747
  }, submissionStatus === SubmissionStatus.SUBMITTING ? verbiage.submittingText : verbiage.submitText))));
11748
11748
  };
11749
11749
  var Heading$9 = styled__default['default'].h1(templateObject_2$k || (templateObject_2$k = tslib.__makeTemplateObject(["\n margin-bottom: 12px;\n"], ["\n margin-bottom: 12px;\n"])));
11750
- var ImagesContainer = styled__default['default'](OverlayImageContainer)(templateObject_3$e || (templateObject_3$e = tslib.__makeTemplateObject(["\n overflow-y: auto;\n"], ["\n overflow-y: auto;\n"])));
11751
- var ImageRow = styled__default['default'](OverlayImageRow)(templateObject_4$9 || (templateObject_4$9 = tslib.__makeTemplateObject(["\n flex-direction: column;\n"], ["\n flex-direction: column;\n"])));
11750
+ var ImagesContainer = styled__default['default'](OverlayImageContainer)(templateObject_3$f || (templateObject_3$f = tslib.__makeTemplateObject(["\n overflow-y: auto;\n"], ["\n overflow-y: auto;\n"])));
11751
+ var ImageRow = styled__default['default'](OverlayImageRow)(templateObject_4$a || (templateObject_4$a = tslib.__makeTemplateObject(["\n flex-direction: column;\n"], ["\n flex-direction: column;\n"])));
11752
11752
  var ImageCol$1 = styled__default['default'].div(templateObject_5$6 || (templateObject_5$6 = tslib.__makeTemplateObject(["\n max-height: none !important;\n"], ["\n max-height: none !important;\n"])));
11753
11753
  var ImageHeading = styled__default['default'].h3(templateObject_6$5 || (templateObject_6$5 = tslib.__makeTemplateObject(["\n text-align: left;\n margin-top: 24px;\n margin-bottom: 8px;\n font-size: 16px;\n font-weight: normal;\n"], ["\n text-align: left;\n margin-top: 24px;\n margin-bottom: 8px;\n font-size: 16px;\n font-weight: normal;\n"])));
11754
11754
  var CapturedImageWrapper = styled__default['default'].div(templateObject_7$3 || (templateObject_7$3 = tslib.__makeTemplateObject(["\n border: 1px solid\n ", ";\n border-radius: 6px;\n padding: 4px;\n background: white;\n display: flex;\n"], ["\n border: 1px solid\n ", ";\n border-radius: 6px;\n padding: 4px;\n background: white;\n display: flex;\n"])), function (props) {
@@ -11756,7 +11756,7 @@ var CapturedImageWrapper = styled__default['default'].div(templateObject_7$3 ||
11756
11756
  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)';
11757
11757
  });
11758
11758
  var StyledImage = styled__default['default'](CapturedDocumentImg)(templateObject_8$2 || (templateObject_8$2 = tslib.__makeTemplateObject(["\n width: 100%;\n border-radius: 4px;\n"], ["\n width: 100%;\n border-radius: 4px;\n"])));
11759
- var templateObject_1$t, templateObject_2$k, templateObject_3$e, templateObject_4$9, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$2;
11759
+ var templateObject_1$t, templateObject_2$k, templateObject_3$f, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$2;
11760
11760
 
11761
11761
  var CameraVideoTag = function CameraVideoTag(_a) {
11762
11762
  var _b;
@@ -11864,8 +11864,8 @@ var GuideOrientationContext = /*#__PURE__*/React.createContext({
11864
11864
 
11865
11865
  var StyledPageContainer = styled__default['default'](PageContainer)(templateObject_1$q || (templateObject_1$q = tslib.__makeTemplateObject(["\n z-index: 1000;\n"], ["\n z-index: 1000;\n"])));
11866
11866
  var GuidesContainer = styled__default['default'].div(templateObject_2$j || (templateObject_2$j = tslib.__makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n height: 100%;\n"])));
11867
- var GuideCenterRow = styled__default['default'].div(templateObject_3$d || (templateObject_3$d = tslib.__makeTemplateObject(["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n"], ["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n"])));
11868
- var GuideRegion = styled__default['default'].div(templateObject_4$8 || (templateObject_4$8 = tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n position: relative;\n z-index: 1000;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n position: relative;\n z-index: 1000;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"])), function (props) {
11867
+ var GuideCenterRow = styled__default['default'].div(templateObject_3$e || (templateObject_3$e = tslib.__makeTemplateObject(["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n"], ["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n"])));
11868
+ var GuideRegion = styled__default['default'].div(templateObject_4$9 || (templateObject_4$9 = tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n position: relative;\n z-index: 1000;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n position: relative;\n z-index: 1000;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"])), function (props) {
11869
11869
  var _a, _b, _c, _d, _e;
11870
11870
  return (_e = (_a = props.$maskColor) !== null && _a !== void 0 ? _a : (_d = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.idCapture) === null || _c === void 0 ? void 0 : _c.guideOverlay) === null || _d === void 0 ? void 0 : _d.backgroundColor) !== null && _e !== void 0 ? _e : 'rgba(0, 0, 0, 0.5)';
11871
11871
  }, function (props) {
@@ -12014,7 +12014,7 @@ var regionClsx$1 = function regionClsx(classNames, which) {
12014
12014
  return v;
12015
12015
  }).join(' ');
12016
12016
  };
12017
- var templateObject_1$q, templateObject_2$j, templateObject_3$d, templateObject_4$8, templateObject_5$5, templateObject_6$4, templateObject_7$2, templateObject_8$1;
12017
+ var templateObject_1$q, templateObject_2$j, templateObject_3$e, templateObject_4$9, templateObject_5$5, templateObject_6$4, templateObject_7$2, templateObject_8$1;
12018
12018
 
12019
12019
  var FlippingImage = styled__default['default'](GuideImage$1)(templateObject_1$p || (templateObject_1$p = tslib.__makeTemplateObject(["\n backface-visibility: hidden;\n transform-style: preserve-3d;\n position: relative;\n top: 0;\n left: 0;\n transition: transform ", "s;\n transform: ", ";\n"], ["\n backface-visibility: hidden;\n transform-style: preserve-3d;\n position: relative;\n top: 0;\n left: 0;\n transition: transform ", "s;\n transform: ", ";\n"])), function (props) {
12020
12020
  return props.$transitionTime;
@@ -12472,9 +12472,9 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
12472
12472
  };
12473
12473
  var StyledSpinner = styled__default['default'](Spinner)(templateObject_1$m || (templateObject_1$m = tslib.__makeTemplateObject(["\n position: relative;\n top: 4px;\n left: -3px;\n margin: 0 3px 0 -12px;\n"], ["\n position: relative;\n top: 4px;\n left: -3px;\n margin: 0 3px 0 -12px;\n"])));
12474
12474
  var ImagePreviewWrapper = styled__default['default'].div(templateObject_2$g || (templateObject_2$g = tslib.__makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: column;\n height: 33%;\n bottom: 12px;\n right: 12px;\n"], ["\n position: absolute;\n display: flex;\n flex-direction: column;\n height: 33%;\n bottom: 12px;\n right: 12px;\n"])));
12475
- var ImagePreviewText = styled__default['default'].div(templateObject_3$c || (templateObject_3$c = tslib.__makeTemplateObject(["\n display: block;\n position: absolute;\n top: -32px;\n font:\n 14px -apple-system,\n BlinkMacSystemFont,\n 'Segoe UI',\n Roboto,\n Helvetica,\n Arial,\n sans-serif,\n 'Apple Color Emoji',\n 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n color: white;\n text-align: center;\n margin: 0 auto;\n width: 100%;\n"], ["\n display: block;\n position: absolute;\n top: -32px;\n font:\n 14px -apple-system,\n BlinkMacSystemFont,\n 'Segoe UI',\n Roboto,\n Helvetica,\n Arial,\n sans-serif,\n 'Apple Color Emoji',\n 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n color: white;\n text-align: center;\n margin: 0 auto;\n width: 100%;\n"])));
12476
- var ImagePreviewImageWrapper = styled__default['default'].div(templateObject_4$7 || (templateObject_4$7 = tslib.__makeTemplateObject(["\n position: relative;\n height: calc(100% - 8px);\n padding: 4px;\n border-radius: 4px;\n background: white;\n\n & > img {\n border-radius: 4px;\n width: auto;\n max-height: 100%;\n }\n"], ["\n position: relative;\n height: calc(100% - 8px);\n padding: 4px;\n border-radius: 4px;\n background: white;\n\n & > img {\n border-radius: 4px;\n width: auto;\n max-height: 100%;\n }\n"])));
12477
- var templateObject_1$m, templateObject_2$g, templateObject_3$c, templateObject_4$7;
12475
+ var ImagePreviewText = styled__default['default'].div(templateObject_3$d || (templateObject_3$d = tslib.__makeTemplateObject(["\n display: block;\n position: absolute;\n top: -32px;\n font:\n 14px -apple-system,\n BlinkMacSystemFont,\n 'Segoe UI',\n Roboto,\n Helvetica,\n Arial,\n sans-serif,\n 'Apple Color Emoji',\n 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n color: white;\n text-align: center;\n margin: 0 auto;\n width: 100%;\n"], ["\n display: block;\n position: absolute;\n top: -32px;\n font:\n 14px -apple-system,\n BlinkMacSystemFont,\n 'Segoe UI',\n Roboto,\n Helvetica,\n Arial,\n sans-serif,\n 'Apple Color Emoji',\n 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n color: white;\n text-align: center;\n margin: 0 auto;\n width: 100%;\n"])));
12476
+ var ImagePreviewImageWrapper = styled__default['default'].div(templateObject_4$8 || (templateObject_4$8 = tslib.__makeTemplateObject(["\n position: relative;\n height: calc(100% - 8px);\n padding: 4px;\n border-radius: 4px;\n background: white;\n\n & > img {\n border-radius: 4px;\n width: auto;\n max-height: 100%;\n }\n"], ["\n position: relative;\n height: calc(100% - 8px);\n padding: 4px;\n border-radius: 4px;\n background: white;\n\n & > img {\n border-radius: 4px;\n width: auto;\n max-height: 100%;\n }\n"])));
12477
+ var templateObject_1$m, templateObject_2$g, templateObject_3$d, templateObject_4$8;
12478
12478
 
12479
12479
  var documentCaptureInitialState = {
12480
12480
  documents: [],
@@ -12955,8 +12955,8 @@ var CaptureContainer = styled__default['default'].div(templateObject_1$k || (tem
12955
12955
  var HeadingRow = styled__default['default'].div(templateObject_2$e || (templateObject_2$e = tslib.__makeTemplateObject(["\n background: ", ";\n text-align: center;\n color: white;\n"], ["\n background: ", ";\n text-align: center;\n color: white;\n"])), function (props) {
12956
12956
  return props.$maskColor;
12957
12957
  });
12958
- var Heading$8 = styled__default['default'].h1(templateObject_3$b || (templateObject_3$b = tslib.__makeTemplateObject(["\n font-size: 22px;\n"], ["\n font-size: 22px;\n"])));
12959
- var FooterRow = styled__default['default'].div(templateObject_4$6 || (templateObject_4$6 = tslib.__makeTemplateObject(["\n background: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0 20px 20px;\n height: auto;\n color: white;\n"], ["\n background: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0 20px 20px;\n height: auto;\n color: white;\n"])), function (props) {
12958
+ var Heading$8 = styled__default['default'].h1(templateObject_3$c || (templateObject_3$c = tslib.__makeTemplateObject(["\n font-size: 22px;\n"], ["\n font-size: 22px;\n"])));
12959
+ var FooterRow = styled__default['default'].div(templateObject_4$7 || (templateObject_4$7 = tslib.__makeTemplateObject(["\n background: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0 20px 20px;\n height: auto;\n color: white;\n"], ["\n background: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0 20px 20px;\n height: auto;\n color: white;\n"])), function (props) {
12960
12960
  return props.$maskColor;
12961
12961
  });
12962
12962
  var Instructions = styled__default['default'].div(templateObject_5$4 || (templateObject_5$4 = tslib.__makeTemplateObject(["\n max-height: ", ";\n overflow-y: auto;\n"], ["\n max-height: ", ";\n overflow-y: auto;\n"])), function (props) {
@@ -12965,7 +12965,7 @@ var Instructions = styled__default['default'].div(templateObject_5$4 || (templat
12965
12965
  });
12966
12966
  var StyledButtonsRow$9 = styled__default['default'](ButtonsRow)(templateObject_6$3 || (templateObject_6$3 = tslib.__makeTemplateObject(["\n padding-top: 20px;\n"], ["\n padding-top: 20px;\n"])));
12967
12967
  var PreviewImage = styled__default['default'].img(templateObject_7$1 || (templateObject_7$1 = tslib.__makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"])));
12968
- var templateObject_1$k, templateObject_2$e, templateObject_3$b, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$1;
12968
+ var templateObject_1$k, templateObject_2$e, templateObject_3$c, templateObject_4$7, templateObject_5$4, templateObject_6$3, templateObject_7$1;
12969
12969
 
12970
12970
  var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
12971
12971
  var onSuccess = _a.onSuccess,
@@ -13122,11 +13122,11 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
13122
13122
  };
13123
13123
  var StyledOverlayInner$1 = styled__default['default'](OverlayInner$2)(templateObject_1$j || (templateObject_1$j = tslib.__makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
13124
13124
  var Heading$7 = styled__default['default'].h3(templateObject_2$d || (templateObject_2$d = tslib.__makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
13125
- var Description$2 = styled__default['default'].p(templateObject_3$a || (templateObject_3$a = tslib.__makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
13126
- var Instruction = styled__default['default'].p(templateObject_4$5 || (templateObject_4$5 = tslib.__makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
13125
+ var Description$2 = styled__default['default'].p(templateObject_3$b || (templateObject_3$b = tslib.__makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
13126
+ var Instruction = styled__default['default'].p(templateObject_4$6 || (templateObject_4$6 = tslib.__makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
13127
13127
  var ImageCol = styled__default['default'].div(templateObject_5$3 || (templateObject_5$3 = tslib.__makeTemplateObject(["\n display: flex;\n justify-content: center;\n flex-grow: 1;\n flex-basis: 0;\n"], ["\n display: flex;\n justify-content: center;\n flex-grow: 1;\n flex-basis: 0;\n"])));
13128
13128
  var StyledButtonsRow$8 = styled__default['default'](ButtonsRow)(templateObject_6$2 || (templateObject_6$2 = tslib.__makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
13129
- var templateObject_1$j, templateObject_2$d, templateObject_3$a, templateObject_4$5, templateObject_5$3, templateObject_6$2;
13129
+ var templateObject_1$j, templateObject_2$d, templateObject_3$b, templateObject_4$6, templateObject_5$3, templateObject_6$2;
13130
13130
 
13131
13131
  var IdCaptureWizard = function IdCaptureWizard(_a) {
13132
13132
  var _b, _c, _d, _e, _f, _g;
@@ -13617,10 +13617,10 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
13617
13617
  };
13618
13618
  var StyledOverlayInner = styled__default['default'](OverlayInner$2)(templateObject_1$h || (templateObject_1$h = tslib.__makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
13619
13619
  var Heading$6 = styled__default['default'].h3(templateObject_2$b || (templateObject_2$b = tslib.__makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
13620
- var Description$1 = styled__default['default'].p(templateObject_3$9 || (templateObject_3$9 = tslib.__makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
13621
- var ImageContainer$5 = styled__default['default'](OverlayImageContainer)(templateObject_4$4 || (templateObject_4$4 = tslib.__makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
13620
+ var Description$1 = styled__default['default'].p(templateObject_3$a || (templateObject_3$a = tslib.__makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
13621
+ var ImageContainer$5 = styled__default['default'](OverlayImageContainer)(templateObject_4$5 || (templateObject_4$5 = tslib.__makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
13622
13622
  var StyledButtonsRow$7 = styled__default['default'](ButtonsRow)(templateObject_5$2 || (templateObject_5$2 = tslib.__makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
13623
- var templateObject_1$h, templateObject_2$b, templateObject_3$9, templateObject_4$4, templateObject_5$2;
13623
+ var templateObject_1$h, templateObject_2$b, templateObject_3$a, templateObject_4$5, templateObject_5$2;
13624
13624
 
13625
13625
  var initialState$3 = {
13626
13626
  videoWidth: 0,
@@ -14664,8 +14664,8 @@ var OverlayHeader = styled__default['default'].div(templateObject_2$9 || (templa
14664
14664
  }, function (props) {
14665
14665
  return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
14666
14666
  });
14667
- var StyledGuidanceMessage = styled__default['default'](GuidanceMessage)(templateObject_3$8 || (templateObject_3$8 = tslib.__makeTemplateObject(["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\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: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\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"])));
14668
- var StyledButtonsRow$5 = styled__default['default'](ButtonsRow)(templateObject_4$3 || (templateObject_4$3 = tslib.__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) {
14667
+ var StyledGuidanceMessage = styled__default['default'](GuidanceMessage)(templateObject_3$9 || (templateObject_3$9 = tslib.__makeTemplateObject(["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\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: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\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"])));
14668
+ var StyledButtonsRow$5 = styled__default['default'](ButtonsRow)(templateObject_4$4 || (templateObject_4$4 = tslib.__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) {
14669
14669
  var _a, _b, _c, _d;
14670
14670
  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';
14671
14671
  }, function (props) {
@@ -14700,7 +14700,7 @@ var ContinueButton = styled__default['default'](LoaderButton)(templateObject_15
14700
14700
  var _a, _b, _c, _d, _e, _f;
14701
14701
  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, ";") : '';
14702
14702
  });
14703
- var templateObject_1$d, templateObject_2$9, templateObject_3$8, templateObject_4$3, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
14703
+ var templateObject_1$d, templateObject_2$9, templateObject_3$9, templateObject_4$4, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
14704
14704
 
14705
14705
  var components = {
14706
14706
  "default": SelfieCaptureLoadingOverlayDefault,
@@ -15048,9 +15048,9 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
15048
15048
  };
15049
15049
  var Inner = styled__default['default'](OverlayInner$2)(templateObject_1$c || (templateObject_1$c = tslib.__makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
15050
15050
  var Heading$4 = styled__default['default'].h3(templateObject_2$8 || (templateObject_2$8 = tslib.__makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
15051
- var Description = styled__default['default'].p(templateObject_3$7 || (templateObject_3$7 = tslib.__makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
15052
- var StyledButtonsRow$4 = styled__default['default'](ButtonsRow)(templateObject_4$2 || (templateObject_4$2 = tslib.__makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
15053
- var templateObject_1$c, templateObject_2$8, templateObject_3$7, templateObject_4$2;
15051
+ var Description = styled__default['default'].p(templateObject_3$8 || (templateObject_3$8 = tslib.__makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
15052
+ var StyledButtonsRow$4 = styled__default['default'](ButtonsRow)(templateObject_4$3 || (templateObject_4$3 = tslib.__makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
15053
+ var templateObject_1$c, templateObject_2$8, templateObject_3$8, templateObject_4$3;
15054
15054
 
15055
15055
  var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_a) {
15056
15056
  var documents = _a.documents,
@@ -15144,7 +15144,7 @@ var SignaturePaperBacking = styled__default['default'].div(templateObject_1$b ||
15144
15144
  return ((_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.backgroundPosition) ? "background-position: ".concat((_b = props.theme.signatureCapture) === null || _b === void 0 ? void 0 : _b.backgroundPosition, ";") : "";
15145
15145
  });
15146
15146
  var SignatureCanvasContainer = styled__default['default'].div(templateObject_2$7 || (templateObject_2$7 = tslib.__makeTemplateObject(["\n position: absolute;\n top: 25%;\n left: 15%;\n width: 70%;\n height: 50%;\n\n @media (max-width: 800px) {\n top: 15%;\n left: 2%;\n width: 96%;\n height: 70%;\n }\n"], ["\n position: absolute;\n top: 25%;\n left: 15%;\n width: 70%;\n height: 50%;\n\n @media (max-width: 800px) {\n top: 15%;\n left: 2%;\n width: 96%;\n height: 70%;\n }\n"])));
15147
- var SignaturePad = styled__default['default'].div(templateObject_3$6 || (templateObject_3$6 = tslib.__makeTemplateObject(["\n position: relative;\n background: ", ";\n border: ", ";\n border-radius: ", ";\n flex-grow: 1;\n z-index: 100;\n height: 100%;\n"], ["\n position: relative;\n background: ", ";\n border: ", ";\n border-radius: ", ";\n flex-grow: 1;\n z-index: 100;\n height: 100%;\n"])), function (props) {
15147
+ var SignaturePad = styled__default['default'].div(templateObject_3$7 || (templateObject_3$7 = tslib.__makeTemplateObject(["\n position: relative;\n background: ", ";\n border: ", ";\n border-radius: ", ";\n flex-grow: 1;\n z-index: 100;\n height: 100%;\n"], ["\n position: relative;\n background: ", ";\n border: ", ";\n border-radius: ", ";\n flex-grow: 1;\n z-index: 100;\n height: 100%;\n"])), function (props) {
15148
15148
  var _a, _b, _c;
15149
15149
  return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.background) !== null && _c !== void 0 ? _c : 'rgba(255, 255, 255, 0.5)';
15150
15150
  }, function (props) {
@@ -15154,8 +15154,8 @@ var SignaturePad = styled__default['default'].div(templateObject_3$6 || (templat
15154
15154
  var _a, _b, _c;
15155
15155
  return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.borderRadius) !== null && _c !== void 0 ? _c : '16px';
15156
15156
  });
15157
- var SignatureButtonsContainer = styled__default['default'](ButtonsRow)(templateObject_4$1 || (templateObject_4$1 = tslib.__makeTemplateObject(["\n flex-grow: 0;\n padding-top: 12px;\n display: flex;\n z-index: 1000;\n position: relative;\n"], ["\n flex-grow: 0;\n padding-top: 12px;\n display: flex;\n z-index: 1000;\n position: relative;\n"])));
15158
- var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$1;
15157
+ var SignatureButtonsContainer = styled__default['default'](ButtonsRow)(templateObject_4$2 || (templateObject_4$2 = tslib.__makeTemplateObject(["\n flex-grow: 0;\n padding-top: 12px;\n display: flex;\n z-index: 1000;\n position: relative;\n"], ["\n flex-grow: 0;\n padding-top: 12px;\n display: flex;\n z-index: 1000;\n position: relative;\n"])));
15158
+ var templateObject_1$b, templateObject_2$7, templateObject_3$7, templateObject_4$2;
15159
15159
 
15160
15160
  var SignatureCapture = function SignatureCapture(_a) {
15161
15161
  var _b;
@@ -16020,7 +16020,7 @@ var ReadTextPromptHeading = styled__default['default'].div(templateObject_2$6 ||
16020
16020
  var _a, _b, _c, _d, _e, _f;
16021
16021
  return ((_c = (_b = (_a = props.theme.idVideoCapture) === null || _a === void 0 ? void 0 : _a.readTextPrompt) === null || _b === void 0 ? void 0 : _b.heading) === null || _c === void 0 ? void 0 : _c.borderRadius) ? "border-radius: ".concat((_f = (_e = (_d = props.theme.idVideoCapture) === null || _d === void 0 ? void 0 : _d.readTextPrompt) === null || _e === void 0 ? void 0 : _e.heading) === null || _f === void 0 ? void 0 : _f.borderRadius, ";") : "";
16022
16022
  });
16023
- var ReadTextPromptText = styled__default['default'].div(templateObject_3$5 || (templateObject_3$5 = tslib.__makeTemplateObject(["\n margin: 0 auto;\n text-align: center;\n padding: 50px;\n font-size: 24px;\n max-width: ", ";\n\n ", ";\n ", ";\n ", ";\n"], ["\n margin: 0 auto;\n text-align: center;\n padding: 50px;\n font-size: 24px;\n max-width: ", ";\n\n ", ";\n ", ";\n ", ";\n"])), typeof window !== 'undefined' && window.innerWidth > window.innerHeight ? '40%' : '90%', function (props) {
16023
+ var ReadTextPromptText = styled__default['default'].div(templateObject_3$6 || (templateObject_3$6 = tslib.__makeTemplateObject(["\n margin: 0 auto;\n text-align: center;\n padding: 50px;\n font-size: 24px;\n max-width: ", ";\n\n ", ";\n ", ";\n ", ";\n"], ["\n margin: 0 auto;\n text-align: center;\n padding: 50px;\n font-size: 24px;\n max-width: ", ";\n\n ", ";\n ", ";\n ", ";\n"])), typeof window !== 'undefined' && window.innerWidth > window.innerHeight ? '40%' : '90%', function (props) {
16024
16024
  var _a, _b, _c, _d, _e, _f;
16025
16025
  return ((_c = (_b = (_a = props.theme.idVideoCapture) === null || _a === void 0 ? void 0 : _a.readTextPrompt) === null || _b === void 0 ? void 0 : _b.prompt) === null || _c === void 0 ? void 0 : _c.backgroundColor) ? "background: ".concat((_f = (_e = (_d = props.theme.idVideoCapture) === null || _d === void 0 ? void 0 : _d.readTextPrompt) === null || _e === void 0 ? void 0 : _e.prompt) === null || _f === void 0 ? void 0 : _f.backgroundColor, ";") : "";
16026
16026
  }, function (props) {
@@ -16030,7 +16030,7 @@ var ReadTextPromptText = styled__default['default'].div(templateObject_3$5 || (t
16030
16030
  var _a, _b, _c, _d, _e, _f;
16031
16031
  return ((_c = (_b = (_a = props.theme.idVideoCapture) === null || _a === void 0 ? void 0 : _a.readTextPrompt) === null || _b === void 0 ? void 0 : _b.prompt) === null || _c === void 0 ? void 0 : _c.borderRadius) ? "border-radius: ".concat((_f = (_e = (_d = props.theme.idVideoCapture) === null || _d === void 0 ? void 0 : _d.readTextPrompt) === null || _e === void 0 ? void 0 : _e.prompt) === null || _f === void 0 ? void 0 : _f.borderRadius, ";") : "";
16032
16032
  });
16033
- var ReadTextPromptButtonsRow = styled__default['default'](ButtonsRow)(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n margin: 32px auto auto;\n gap: 20px;\n"], ["\n margin: 32px auto auto;\n gap: 20px;\n"])));
16033
+ var ReadTextPromptButtonsRow = styled__default['default'](ButtonsRow)(templateObject_4$1 || (templateObject_4$1 = tslib.__makeTemplateObject(["\n margin: 32px auto auto;\n gap: 20px;\n"], ["\n margin: 32px auto auto;\n gap: 20px;\n"])));
16034
16034
  var ReadTextPromptTimeRemaining = styled__default['default'].div(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n padding: 20px;\n\n ", ";\n ", ";\n ", ";\n"], ["\n padding: 20px;\n\n ", ";\n ", ";\n ", ";\n"])), function (props) {
16035
16035
  var _a, _b, _c, _d, _e, _f;
16036
16036
  return ((_c = (_b = (_a = props.theme.idVideoCapture) === null || _a === void 0 ? void 0 : _a.readTextPrompt) === null || _b === void 0 ? void 0 : _b.timeRemaining) === null || _c === void 0 ? void 0 : _c.backgroundColor) ? "background: ".concat((_f = (_e = (_d = props.theme.idVideoCapture) === null || _d === void 0 ? void 0 : _d.readTextPrompt) === null || _e === void 0 ? void 0 : _e.timeRemaining) === null || _f === void 0 ? void 0 : _f.backgroundColor, ";") : "";
@@ -16042,7 +16042,7 @@ var ReadTextPromptTimeRemaining = styled__default['default'].div(templateObject_
16042
16042
  return ((_c = (_b = (_a = props.theme.idVideoCapture) === null || _a === void 0 ? void 0 : _a.readTextPrompt) === null || _b === void 0 ? void 0 : _b.timeRemaining) === null || _c === void 0 ? void 0 : _c.borderRadius) ? "border-radius: ".concat((_f = (_e = (_d = props.theme.idVideoCapture) === null || _d === void 0 ? void 0 : _d.readTextPrompt) === null || _e === void 0 ? void 0 : _e.timeRemaining) === null || _f === void 0 ? void 0 : _f.borderRadius, ";") : "";
16043
16043
  });
16044
16044
  var DoneButton = styled__default['default'](LoaderButton)(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n margin: auto 0;\n"], ["\n margin: auto 0;\n"])));
16045
- var templateObject_1$6, templateObject_2$6, templateObject_3$5, templateObject_4, templateObject_5, templateObject_6;
16045
+ var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$1, templateObject_5, templateObject_6;
16046
16046
 
16047
16047
  var edgeBoundary = 0.05;
16048
16048
  var IdVideoCapture = function IdVideoCapture(_a) {
@@ -16069,54 +16069,56 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16069
16069
  goodIdCardBackFramesThreshold = _1 === void 0 ? 1 : _1,
16070
16070
  _2 = _a.skipShowIdCardBack,
16071
16071
  skipShowIdCardBack = _2 === void 0 ? false : _2,
16072
+ _3 = _a.captureCountdownSeconds,
16073
+ captureCountdownSeconds = _3 === void 0 ? 3 : _3,
16072
16074
  readTextPrompt = _a.readTextPrompt,
16073
- _3 = _a.readTextTimeoutDurationMs,
16074
- readTextTimeoutDurationMs = _3 === void 0 ? 15000 : _3,
16075
- _4 = _a.assets,
16076
- assets = _4 === void 0 ? {} : _4,
16077
- _5 = _a.classNames,
16078
- classNames = _5 === void 0 ? {} : _5,
16079
- _6 = _a.colors,
16080
- colors = _6 === void 0 ? {} : _6,
16081
- _7 = _a.verbiage,
16082
- rawVerbiage = _7 === void 0 ? {} : _7,
16083
- _8 = _a.debugMode,
16084
- debugMode = _8 === void 0 ? false : _8;
16085
- var _9 = useResizeObserver__default['default'](),
16086
- ref = _9.ref,
16087
- _10 = _9.width,
16088
- width = _10 === void 0 ? 1 : _10,
16089
- _11 = _9.height,
16090
- height = _11 === void 0 ? 1 : _11;
16091
- var _12 = React.useContext(CameraStateContext),
16092
- cameraRef = _12.cameraRef,
16093
- videoRef = _12.videoRef,
16094
- videoLoaded = _12.videoLoaded,
16095
- setVideoLoaded = _12.setVideoLoaded,
16096
- cameraReady = _12.cameraReady,
16097
- takePhoto = _12.takePhoto;
16098
- var _13 = React.useState([]),
16099
- detectedObjects = _13[0],
16100
- setDetectedObjects = _13[1];
16075
+ _4 = _a.readTextTimeoutDurationMs,
16076
+ readTextTimeoutDurationMs = _4 === void 0 ? 15000 : _4,
16077
+ _5 = _a.assets,
16078
+ assets = _5 === void 0 ? {} : _5,
16079
+ _6 = _a.classNames,
16080
+ classNames = _6 === void 0 ? {} : _6,
16081
+ _7 = _a.colors,
16082
+ colors = _7 === void 0 ? {} : _7,
16083
+ _8 = _a.verbiage,
16084
+ rawVerbiage = _8 === void 0 ? {} : _8,
16085
+ _9 = _a.debugMode,
16086
+ debugMode = _9 === void 0 ? false : _9;
16087
+ var _10 = useResizeObserver__default['default'](),
16088
+ ref = _10.ref,
16089
+ _11 = _10.width,
16090
+ width = _11 === void 0 ? 1 : _11,
16091
+ _12 = _10.height,
16092
+ height = _12 === void 0 ? 1 : _12;
16093
+ var _13 = React.useContext(CameraStateContext),
16094
+ cameraRef = _13.cameraRef,
16095
+ videoRef = _13.videoRef,
16096
+ videoLoaded = _13.videoLoaded,
16097
+ setVideoLoaded = _13.setVideoLoaded,
16098
+ cameraReady = _13.cameraReady,
16099
+ takePhoto = _13.takePhoto;
16101
16100
  var _14 = React.useState([]),
16102
- faces = _14[0],
16103
- setFaces = _14[1];
16104
- var _15 = React.useContext(IdCaptureModelsContext),
16105
- idModelsReady = _15.ready,
16106
- idModelsWorking = _15.working,
16107
- makeIdPrediction = _15.makePrediction,
16108
- onIdPredictionMade = _15.onPredictionMade,
16109
- setThresholds = _15.setThresholds,
16110
- bestFrameDetectionScore = _15.bestFrameDetectionScore,
16111
- bestFrameFocusScore = _15.bestFrameFocusScore,
16112
- resetBestFrame = _15.resetBestFrame,
16113
- modelError = _15.modelError;
16101
+ detectedObjects = _14[0],
16102
+ setDetectedObjects = _14[1];
16103
+ var _15 = React.useState([]),
16104
+ faces = _15[0],
16105
+ setFaces = _15[1];
16106
+ var _16 = React.useContext(IdCaptureModelsContext),
16107
+ idModelsReady = _16.ready,
16108
+ idModelsWorking = _16.working,
16109
+ makeIdPrediction = _16.makePrediction,
16110
+ onIdPredictionMade = _16.onPredictionMade,
16111
+ setThresholds = _16.setThresholds,
16112
+ bestFrameDetectionScore = _16.bestFrameDetectionScore,
16113
+ bestFrameFocusScore = _16.bestFrameFocusScore,
16114
+ resetBestFrame = _16.resetBestFrame,
16115
+ modelError = _16.modelError;
16114
16116
  var onSelfiePredictionMade = React.useContext(HighPerformanceSelfieGuidanceModelsContext).onPredictionMade;
16115
- var _16 = useVideoRecorder(cameraRef.current),
16116
- isRecording = _16.isRecording,
16117
- startRecording = _16.startRecording,
16118
- stopRecording = _16.stopRecording,
16119
- videoUrl = _16.videoUrl;
16117
+ var _17 = useVideoRecorder(cameraRef.current),
16118
+ isRecording = _17.isRecording,
16119
+ startRecording = _17.startRecording,
16120
+ stopRecording = _17.stopRecording,
16121
+ videoUrl = _17.videoUrl;
16120
16122
  React.useEffect(function () {
16121
16123
  if (!isRecording && !videoUrl) startRecording();
16122
16124
  if (videoUrl) {
@@ -16129,9 +16131,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16129
16131
  React.useEffect(function () {
16130
16132
  shouldCaptureFrames.current = videoLoaded && cameraReady && idModelsReady;
16131
16133
  }, [cameraReady, idModelsReady, videoLoaded]);
16132
- var _17 = React.useState('SHOW_ID_FRONT'),
16133
- requestedAction = _17[0],
16134
- setRequestedAction = _17[1];
16134
+ var _18 = React.useState('SHOW_ID_FRONT'),
16135
+ requestedAction = _18[0],
16136
+ setRequestedAction = _18[1];
16135
16137
  React.useEffect(function () {
16136
16138
  if (requestedAction !== 'SHOW_ID_FRONT' && requestedAction !== 'SHOW_ID_BACK') return;
16137
16139
  if (!idCaptureModelsEnabled || !idModelsReady || !cameraReady || !videoLoaded) return;
@@ -16159,15 +16161,15 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16159
16161
  }
16160
16162
  });
16161
16163
  }, [idCardBackDetectionThreshold, idCardBackFocusThreshold, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, requestedAction, setThresholds]);
16162
- var _18 = React.useState(0),
16163
- currentDetectionScore = _18[0],
16164
- setCurrentDetectionScore = _18[1];
16165
16164
  var _19 = React.useState(0),
16166
- currentFocusScore = _19[0],
16167
- setCurrentFocusScore = _19[1];
16165
+ currentDetectionScore = _19[0],
16166
+ setCurrentDetectionScore = _19[1];
16168
16167
  var _20 = React.useState(0),
16169
- goodFramesCount = _20[0],
16170
- setGoodFramesCount = _20[1];
16168
+ currentFocusScore = _20[0],
16169
+ setCurrentFocusScore = _20[1];
16170
+ var _21 = React.useState(0),
16171
+ goodFramesCount = _21[0],
16172
+ setGoodFramesCount = _21[1];
16171
16173
  var goodFramesThreshold = requestedAction === 'SHOW_ID_FRONT' ? goodIdCardFrontFramesThreshold : goodIdCardBackFramesThreshold;
16172
16174
  var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
16173
16175
  React.useEffect(function () {
@@ -16185,9 +16187,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16185
16187
  }
16186
16188
  });
16187
16189
  }, [idCaptureModelsEnabled, idCardFrontDetectionThreshold, onIdPredictionMade]);
16188
- var _21 = React.useState(null),
16189
- idFrontCaptureStartedAt = _21[0],
16190
- setFirstGoodFrameTime = _21[1];
16190
+ var _22 = React.useState(null),
16191
+ idFrontCaptureStartedAt = _22[0],
16192
+ setFirstGoodFrameTime = _22[1];
16191
16193
  React.useEffect(function () {
16192
16194
  if (goodFramesCount === 1) setFirstGoodFrameTime(new Date().getTime());
16193
16195
  }, [goodFramesCount]);
@@ -16203,7 +16205,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16203
16205
  var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
16204
16206
  var faceBox = (_f = faces === null || faces === void 0 ? void 0 : faces[0]) === null || _f === void 0 ? void 0 : _f.box;
16205
16207
  var faceCentered = !faceBox || !frameWidth || faceBox.xMin > frameWidth * edgeBoundary && faceBox.yMin > frameHeight * edgeBoundary && faceBox.xMax < frameWidth * (1 - edgeBoundary) && faceBox.yMax < frameHeight * (1 - edgeBoundary);
16206
- var satisfied = goodFramesThresholdMet && faceCentered && delaySatisfied;
16208
+ var _23 = React.useState(),
16209
+ countdownStartedAt = _23[0],
16210
+ setCountdownStartedAt = _23[1];
16207
16211
  var frameLock = React.useRef(false);
16208
16212
  var captureFrame = React.useCallback(function () {
16209
16213
  return tslib.__awaiter(void 0, void 0, void 0, function () {
@@ -16211,6 +16215,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16211
16215
  return tslib.__generator(this, function (_b) {
16212
16216
  switch (_b.label) {
16213
16217
  case 0:
16218
+ if (frameLock.current) return [2 /*return*/];
16214
16219
  frameLock.current = true;
16215
16220
  return [4 /*yield*/, takePhoto()];
16216
16221
  case 1:
@@ -16271,6 +16276,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16271
16276
  setCurrentDetectionScore(0);
16272
16277
  setCurrentFocusScore(0);
16273
16278
  setGoodFramesCount(0);
16279
+ setCountdownStartedAt(undefined);
16274
16280
  resetBestFrame();
16275
16281
  frameLock.current = false;
16276
16282
  return [7 /*endfinally*/];
@@ -16280,18 +16286,28 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16280
16286
  });
16281
16287
  });
16282
16288
  }, [onIdBackCaptureComplete, onIdBackImageCaptured, onIdFrontImageCaptured, requestedAction, resetBestFrame, skipShowIdCardBack, takePhoto]);
16289
+ var satisfied = goodFramesThresholdMet && faceCentered && delaySatisfied;
16290
+ React.useEffect(function () {
16291
+ if (satisfied && !countdownStartedAt) {
16292
+ setCountdownStartedAt(new Date());
16293
+ }
16294
+ }, [countdownStartedAt, satisfied]);
16283
16295
  React.useEffect(function () {
16284
- if (!satisfied || frameLock.current) return;
16285
- frameLock.current = true;
16286
- captureFrame();
16287
- }, [captureFrame, satisfied]);
16296
+ if (!countdownStartedAt) return;
16297
+ var remainingTime = new Date().getTime() + captureCountdownSeconds * 1000.0 - countdownStartedAt.getTime();
16298
+ console.log('setting timer for', remainingTime);
16299
+ var timeout = setTimeout(captureFrame, remainingTime);
16300
+ return function () {
16301
+ clearTimeout(timeout);
16302
+ };
16303
+ }, [captureCountdownSeconds, captureFrame, countdownStartedAt]);
16288
16304
  var onReadTextTimeout = React.useCallback(function () {
16289
16305
  stopRecording();
16290
16306
  }, [stopRecording]);
16291
16307
  var timeoutStartedAt = useTimeout(readTextTimeoutDurationMs, onReadTextTimeout, requestedAction !== 'READ_TEXT', false, requestedAction === 'READ_TEXT').timeoutStartedAt;
16292
- var _22 = React.useState(0),
16293
- numFramesWithoutFaces = _22[0],
16294
- setNumFramesWithoutFaces = _22[1];
16308
+ var _24 = React.useState(0),
16309
+ numFramesWithoutFaces = _24[0],
16310
+ setNumFramesWithoutFaces = _24[1];
16295
16311
  React.useEffect(function () {
16296
16312
  onSelfiePredictionMade(function (faces) {
16297
16313
  setFaces(faces);
@@ -16306,12 +16322,12 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16306
16322
  }
16307
16323
  }, [numFramesWithoutFaces, onFaceNotDetected]);
16308
16324
  var theme = styled.useTheme();
16309
- var _23 = useTranslations(rawVerbiage, {
16325
+ var _25 = useTranslations(rawVerbiage, {
16310
16326
  faceNotCenteredText: 'Please move your face to the center...',
16311
16327
  captureBtnText: 'Capture'
16312
16328
  }),
16313
- captureBtnText = _23.captureBtnText,
16314
- faceNotCenteredText = _23.faceNotCenteredText;
16329
+ captureBtnText = _25.captureBtnText,
16330
+ faceNotCenteredText = _25.faceNotCenteredText;
16315
16331
  var debugScalingDetails = useDebugScalingDetails({
16316
16332
  enabled: debugMode,
16317
16333
  pageWidth: width,
@@ -16320,6 +16336,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16320
16336
  videoHeight: (_k = (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.videoHeight) !== null && _k !== void 0 ? _k : 0
16321
16337
  });
16322
16338
  var capturingId = ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction);
16339
+ var countdownRemaining = !!countdownStartedAt && Math.max(0, captureCountdownSeconds - Math.floor((new Date().getTime() - countdownStartedAt.getTime()) / 1000.0));
16323
16340
  return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
16324
16341
  ref: ref,
16325
16342
  className: "flex ".concat((_l = classNames.container) !== null && _l !== void 0 ? _l : '')
@@ -16357,16 +16374,20 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16357
16374
  })))))), !faceCentered && ( /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, null, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, {
16358
16375
  "$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',
16359
16376
  "$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'
16360
- }, faceNotCenteredText))), debugMode && ( /*#__PURE__*/React__default['default'].createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), isRecording ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__default['default'].createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__default['default'].createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Best Frame Detection Score: ", bestFrameDetectionScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Best Frame Focus Score: ", bestFrameFocusScore)), (!idCaptureModelsEnabled || modelError) && capturingId && ( /*#__PURE__*/React__default['default'].createElement(CaptureButtonContainer, null, /*#__PURE__*/React__default['default'].createElement(CaptureButton, {
16377
+ }, faceNotCenteredText))), debugMode && ( /*#__PURE__*/React__default['default'].createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), isRecording ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__default['default'].createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__default['default'].createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Best Frame Detection Score: ", bestFrameDetectionScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Best Frame Focus Score: ", bestFrameFocusScore)), countdownRemaining && capturingId && ( /*#__PURE__*/React__default['default'].createElement(CountdownContainer, null, /*#__PURE__*/React__default['default'].createElement(Countdown, null, countdownRemaining))), (!idCaptureModelsEnabled || modelError) && capturingId && ( /*#__PURE__*/React__default['default'].createElement(CaptureButtonContainer, null, /*#__PURE__*/React__default['default'].createElement(CaptureButton, {
16361
16378
  finished: true,
16362
- onClick: captureFrame,
16363
- disabled: frameLock.current,
16379
+ onClick: function onClick() {
16380
+ return setCountdownStartedAt(new Date());
16381
+ },
16382
+ disabled: !!countdownStartedAt || frameLock.current,
16364
16383
  className: classNames.captureBtn
16365
16384
  }, captureBtnText))));
16366
16385
  };
16367
- var CaptureButtonContainer = styled__default['default'].div(templateObject_1$5 || (templateObject_1$5 = tslib.__makeTemplateObject(["\n position: fixed;\n bottom: 0;\n width: 100dvw;\n display: flex;\n z-index: 100000;\n"], ["\n position: fixed;\n bottom: 0;\n width: 100dvw;\n display: flex;\n z-index: 100000;\n"])));
16368
- var CaptureButton = styled__default['default'](LoaderButton)(templateObject_2$5 || (templateObject_2$5 = tslib.__makeTemplateObject(["\n margin: 0 auto 25px;\n"], ["\n margin: 0 auto 25px;\n"])));
16369
- var templateObject_1$5, templateObject_2$5;
16386
+ var CountdownContainer = styled__default['default'].div(templateObject_1$5 || (templateObject_1$5 = tslib.__makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100dvw;\n height: 100dvh;\n z-index: 99999;\n display: flex;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100dvw;\n height: 100dvh;\n z-index: 99999;\n display: flex;\n"])));
16387
+ var Countdown = styled__default['default'].div(templateObject_2$5 || (templateObject_2$5 = tslib.__makeTemplateObject(["\n color: white;\n font-size: 64px;\n font-weight: bold;\n margin: auto;\n"], ["\n color: white;\n font-size: 64px;\n font-weight: bold;\n margin: auto;\n"])));
16388
+ var CaptureButtonContainer = styled__default['default'].div(templateObject_3$5 || (templateObject_3$5 = tslib.__makeTemplateObject(["\n position: fixed;\n bottom: 0;\n width: 100dvw;\n display: flex;\n z-index: 100000;\n"], ["\n position: fixed;\n bottom: 0;\n width: 100dvw;\n display: flex;\n z-index: 100000;\n"])));
16389
+ var CaptureButton = styled__default['default'](LoaderButton)(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n margin: 0 auto 25px;\n"], ["\n margin: 0 auto 25px;\n"])));
16390
+ var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4;
16370
16391
 
16371
16392
  var IdVideoCaptureSuccess = function IdVideoCaptureSuccess(_a) {
16372
16393
  var videoUrl = _a.videoUrl,