idmission-web-sdk 2.1.37 → 2.1.39
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.
- package/dist/components/common/LoaderButton.d.ts +1 -1
- package/dist/components/face_liveness/FaceCaptureGuideOverlay.d.ts +2 -6
- package/dist/components/face_liveness/FaceLivenessCapture.d.ts +2 -8
- package/dist/components/face_liveness/FaceLivenessFailure.d.ts +1 -2
- package/dist/components/face_liveness/FaceLivenessWizard.d.ts +2 -6
- package/dist/components/id_capture/IdCaptureStateProvider.d.ts +2 -0
- package/dist/components/selfie_capture/SelfieCapture.d.ts +3 -8
- package/dist/components/selfie_capture/SelfieCaptureLoadingGraphic.d.ts +1 -14
- package/dist/components/selfie_capture/SelfieGuidanceModelsProvider.d.ts +2 -2
- package/dist/components/video_id/IdVideoCaptureFlipIdPrompt.d.ts +5 -10
- package/dist/components/video_id/IdVideoCaptureGuides.d.ts +3 -11
- package/dist/lib/locales/es/translation.d.ts +1 -2
- package/dist/lib/locales/index.d.ts +1 -2
- package/dist/lib/models/DocumentDetection.d.ts +7 -3
- package/dist/lib/models/Focus.d.ts +4 -0
- package/dist/sdk2.cjs.development.js +924 -1439
- package/dist/sdk2.cjs.development.js.map +1 -1
- package/dist/sdk2.cjs.production.js +1 -1
- package/dist/sdk2.cjs.production.js.map +1 -1
- package/dist/sdk2.esm.js +924 -1439
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +924 -1439
- package/dist/sdk2.umd.development.js.map +1 -1
- package/dist/sdk2.umd.production.js +1 -1
- package/dist/sdk2.umd.production.js.map +1 -1
- package/dist/themes/index.d.ts +0 -5
- package/dist/version.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/video_id/IdVideoCaptureGuidesCommon.d.ts +0 -20
|
@@ -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.
|
|
237
|
+
var webSdkVersion = '2.1.39';
|
|
238
238
|
|
|
239
239
|
function getPlatform() {
|
|
240
240
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
@@ -391,7 +391,7 @@ function videoDataUrlToB64(url) {
|
|
|
391
391
|
});
|
|
392
392
|
}
|
|
393
393
|
|
|
394
|
-
var PageContainerDiv = styled__default.default.div(templateObject_1$
|
|
394
|
+
var PageContainerDiv = styled__default.default.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n\n ", "\n\n &.flex {\n display: flex;\n }\n\n &.padded {\n box-sizing: border-box;\n padding: 16px 24px;\n }\n"], ["\n ", "\n\n ", "\n\n &.flex {\n display: flex;\n }\n\n &.padded {\n box-sizing: border-box;\n padding: 16px 24px;\n }\n"])), function (props) {
|
|
395
395
|
var _a;
|
|
396
396
|
return props.theme.isFullscreen === false ? "" : "\n position: fixed;\n top: 0;\n left: 0;\n width: var(--app-width);\n height: calc(\n var(--app-height) - ".concat((_a = props.$heightOffset) !== null && _a !== void 0 ? _a : 0, "px\n );\n overflow-x: hidden;\n overflow-y: auto;\n ");
|
|
397
397
|
}, function (props) {
|
|
@@ -431,22 +431,22 @@ var PageContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
431
431
|
}, dimensionsCalculated && children);
|
|
432
432
|
});
|
|
433
433
|
PageContainer.displayName = 'PageContainer';
|
|
434
|
-
var templateObject_1$
|
|
434
|
+
var templateObject_1$H;
|
|
435
435
|
|
|
436
|
-
var OverlayContainer = styled__default.default(PageContainer)(templateObject_1$
|
|
436
|
+
var OverlayContainer = styled__default.default(PageContainer)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n background: ", ";\n ", "\n z-index: 10000;\n"], ["\n background: ", ";\n ", "\n z-index: 10000;\n"])), function (props) {
|
|
437
437
|
return props.theme.background ? "".concat(props.theme.background) : "white";
|
|
438
438
|
}, function (props) {
|
|
439
439
|
return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
|
|
440
440
|
});
|
|
441
|
-
var OverlayInner$2 = styled__default.default.div(templateObject_2$
|
|
441
|
+
var OverlayInner$2 = styled__default.default.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n max-height: var(--app-height);\n height: 100%;\n ", "\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n max-height: var(--app-height);\n height: 100%;\n ", "\n"])), function (props) {
|
|
442
442
|
var _a;
|
|
443
443
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
444
444
|
}, function (props) {
|
|
445
445
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
446
446
|
});
|
|
447
|
-
var OverlayImageContainer = styled__default.default.div(templateObject_3$
|
|
448
|
-
var OverlayImageRow = styled__default.default.div(templateObject_4$
|
|
449
|
-
var templateObject_1$
|
|
447
|
+
var OverlayImageContainer = styled__default.default.div(templateObject_3$m || (templateObject_3$m = __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"])));
|
|
448
|
+
var OverlayImageRow = styled__default.default.div(templateObject_4$h || (templateObject_4$h = __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"])));
|
|
449
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$m, templateObject_4$h;
|
|
450
450
|
|
|
451
451
|
var LoaderButton = function LoaderButton(_a) {
|
|
452
452
|
var children = _a.children,
|
|
@@ -505,11 +505,11 @@ var LoaderButton = function LoaderButton(_a) {
|
|
|
505
505
|
className: "ladda-label"
|
|
506
506
|
}, children));
|
|
507
507
|
};
|
|
508
|
-
var StyledButton = styled__default.default.button(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"], ["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"])), function (props) {
|
|
508
|
+
var StyledButton = styled__default.default.button(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"], ["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"])), function (props) {
|
|
509
509
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
510
510
|
return ((_a = props.theme.buttons) === null || _a === void 0 ? void 0 : _a.style) === 'bootstrap' && "\n border-radius: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n text-transform: none;\n -webkit-appearance: button;\n \n &:not(:disabled),\n &[type='button']:not(:disabled),\n &[type='reset']:not(:disabled),\n &[type='submit']:not(:disabled) {\n cursor: pointer;\n }\n \n &:focus:not(:focus-visible) {\n outline: 0;\n }\n \n --bs-btn-padding-x: 0.75rem;\n --bs-btn-padding-y: 0.375rem;\n --bs-btn-font-family: ;\n --bs-btn-font-size: 1rem;\n --bs-btn-font-weight: 400;\n --bs-btn-line-height: 1.5;\n --bs-btn-color: var(--bs-body-color);\n --bs-btn-bg: transparent;\n --bs-btn-border-width: var(--bs-border-width);\n --bs-btn-border-color: transparent;\n --bs-btn-border-radius: var(--bs-border-radius);\n --bs-btn-hover-border-color: transparent;\n --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),\n 0 1px 1px rgba(0, 0, 0, 0.075);\n --bs-btn-disabled-opacity: 0.65;\n --bs-btn-focus-box-shadow: 0 0 0 0.25rem\n rgba(var(--bs-btn-focus-shadow-rgb), 0.5);\n display: inline-block;\n padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);\n font-family: var(--bs-btn-font-family);\n font-size: var(--bs-btn-font-size);\n font-weight: var(--bs-btn-font-weight);\n line-height: var(--bs-btn-line-height);\n color: var(--bs-btn-color);\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);\n border-radius: var(--bs-btn-border-radius);\n background-color: var(--bs-btn-bg);\n //transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,\n // border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n \n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n \n &:hover {\n filter: brightness(1.15);\n }\n \n &:focus-visible {\n color: var(--bs-btn-hover-color);\n background-color: var(--bs-btn-hover-bg);\n border-color: var(--bs-btn-hover-border-color);\n outline: 0;\n box-shadow: var(--bs-btn-focus-box-shadow);\n }\n \n &:disabled,\n &.disabled,\n fieldset:disabled & {\n color: var(--bs-btn-disabled-color);\n pointer-events: none;\n background-color: var(--bs-btn-disabled-bg);\n border-color: var(--bs-btn-disabled-border-color);\n opacity: var(--bs-btn-disabled-opacity);\n }\n \n --bs-btn-color: ".concat((_f = (_b = props.$textColor) !== null && _b !== void 0 ? _b : (_e = (_c = props.theme.buttons) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'primary']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : '#fff', ";\n --bs-btn-bg: ").concat((_l = (_g = props.$backgroundColor) !== null && _g !== void 0 ? _g : (_k = (_h = props.theme.buttons) === null || _h === void 0 ? void 0 : _h[(_j = props.$variant) !== null && _j !== void 0 ? _j : 'primary']) === null || _k === void 0 ? void 0 : _k.backgroundColor) !== null && _l !== void 0 ? _l : '#0d6efd', ";\n --bs-btn-border-color: var(--bs-btn-bg);\n --bs-btn-focus-shadow-rgb: 49, 132, 253;\n --bs-btn-active-color: #fff;\n --bs-btn-active-bg: #0a58ca;\n --bs-btn-active-border-color: #0a53be;\n --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --bs-btn-disabled-color: ").concat((_q = (_m = props.$disabledTextColor) !== null && _m !== void 0 ? _m : (_p = (_o = props.theme.buttons) === null || _o === void 0 ? void 0 : _o.loading) === null || _p === void 0 ? void 0 : _p.textColor) !== null && _q !== void 0 ? _q : '#fff', ";\n --bs-btn-disabled-bg: ").concat((_u = (_r = props.$disabledBackgroundColor) !== null && _r !== void 0 ? _r : (_t = (_s = props.theme.buttons) === null || _s === void 0 ? void 0 : _s.loading) === null || _t === void 0 ? void 0 : _t.backgroundColor) !== null && _u !== void 0 ? _u : 'gray', ";\n --bs-btn-disabled-border-color: ").concat((_v = props.$disabledBackgroundColor) !== null && _v !== void 0 ? _v : '#0d6efd', ";\n \n --bs-btn-padding-y: 14px;\n --bs-btn-padding-x: 1rem;\n --bs-btn-font-size: 18px;\n --bs-btn-border-radius: 4px;\n ");
|
|
511
511
|
});
|
|
512
|
-
var templateObject_1$
|
|
512
|
+
var templateObject_1$F;
|
|
513
513
|
|
|
514
514
|
var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
|
|
515
515
|
var accessBlockedImageUrl = _a.accessBlockedImageUrl;
|
|
@@ -756,7 +756,7 @@ var SessionValidationErrorOverlay = function SessionValidationErrorOverlay(_a) {
|
|
|
756
756
|
}, retryText)))));
|
|
757
757
|
};
|
|
758
758
|
|
|
759
|
-
var Spinner = styled__default.default.div(templateObject_1$
|
|
759
|
+
var Spinner = styled__default.default.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: inline-block;\n width: ", "px;\n height: ", "px;\n margin: auto;\n\n &:after {\n content: ' ';\n display: block;\n width: ", "px;\n height: ", "px;\n margin: 8px;\n border-radius: 50%;\n border: ", "px solid\n ", ";\n border-color: ", " transparent\n ", " transparent;\n animation: lds-dual-ring 1.2s linear infinite;\n box-sizing: content-box;\n }\n\n @keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"], ["\n display: inline-block;\n width: ", "px;\n height: ", "px;\n margin: auto;\n\n &:after {\n content: ' ';\n display: block;\n width: ", "px;\n height: ", "px;\n margin: 8px;\n border-radius: 50%;\n border: ", "px solid\n ", ";\n border-color: ", " transparent\n ", " transparent;\n animation: lds-dual-ring 1.2s linear infinite;\n box-sizing: content-box;\n }\n\n @keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"])), function (_a) {
|
|
760
760
|
var $size = _a.$size;
|
|
761
761
|
return $size !== null && $size !== void 0 ? $size : 80;
|
|
762
762
|
}, function (_a) {
|
|
@@ -781,7 +781,7 @@ var Spinner = styled__default.default.div(templateObject_1$G || (templateObject_
|
|
|
781
781
|
var $color = _a.$color;
|
|
782
782
|
return $color !== null && $color !== void 0 ? $color : '#888';
|
|
783
783
|
});
|
|
784
|
-
var templateObject_1$
|
|
784
|
+
var templateObject_1$E;
|
|
785
785
|
|
|
786
786
|
exports.defaultAuthUrl = 'https://portal-api.idmission.com';
|
|
787
787
|
var allowedAuthUrls = ['https://portal-api.idmission.com', 'https://portal-api-uat.idmission.com', 'https://portal-api-demo.idmission.com', 'https://portal-api-dev.idmission.com', 'http://localhost:10000'];
|
|
@@ -1844,7 +1844,7 @@ function getFrameDimensions(frame) {
|
|
|
1844
1844
|
return [frameWidth, frameHeight];
|
|
1845
1845
|
}
|
|
1846
1846
|
|
|
1847
|
-
var InvisibleCanvas = styled__default.default.canvas(templateObject_1$
|
|
1847
|
+
var InvisibleCanvas = styled__default.default.canvas(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
1848
1848
|
function drawToCanvas(canvas, frame, width, height) {
|
|
1849
1849
|
if (!canvas) return;
|
|
1850
1850
|
var ctx = canvas.getContext('2d');
|
|
@@ -1864,7 +1864,7 @@ function clearCanvas(canvas) {
|
|
|
1864
1864
|
var _a;
|
|
1865
1865
|
(_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas === null || canvas === void 0 ? void 0 : canvas.width, canvas === null || canvas === void 0 ? void 0 : canvas.height);
|
|
1866
1866
|
}
|
|
1867
|
-
var templateObject_1$
|
|
1867
|
+
var templateObject_1$D;
|
|
1868
1868
|
|
|
1869
1869
|
function listAvailableCameras(facingMode_1) {
|
|
1870
1870
|
return __awaiter(this, arguments, void 0, function (facingMode, requestMicAccess) {
|
|
@@ -2486,18 +2486,18 @@ function cropToShoulders(rawCanvas, cropCanvas, resizeCanvas, frame, face, quali
|
|
|
2486
2486
|
rawCanvas.width = frame.width;
|
|
2487
2487
|
rawCanvas.height = frame.height;
|
|
2488
2488
|
rawCtx.putImageData(frame, 0, 0);
|
|
2489
|
+
var _a = face.box,
|
|
2490
|
+
xMin = _a.xMin,
|
|
2491
|
+
width = _a.width;
|
|
2492
|
+
var frameHeight = frame.height;
|
|
2493
|
+
var xPadding = frameHeight * 0.6 - width;
|
|
2494
|
+
var xPos = Math.max(0, xMin - xPadding / 2);
|
|
2489
2495
|
if (frame.height > frame.width) {
|
|
2490
2496
|
cropCanvas.width = frame.width;
|
|
2491
2497
|
cropCanvas.height = frame.height;
|
|
2492
2498
|
cropCtx.drawImage(rawCanvas, 0, 0, cropCanvas.width, cropCanvas.height);
|
|
2493
2499
|
} else {
|
|
2494
|
-
|
|
2495
|
-
xMin = _a.xMin,
|
|
2496
|
-
width = _a.width;
|
|
2497
|
-
var desiredWidth = frame.height * 0.6;
|
|
2498
|
-
var faceCenterX = xMin + width / 2;
|
|
2499
|
-
var xPos = Math.max(0, faceCenterX - desiredWidth / 2);
|
|
2500
|
-
cropCanvas.width = desiredWidth;
|
|
2500
|
+
cropCanvas.width = width + xPadding;
|
|
2501
2501
|
cropCanvas.height = frame.height;
|
|
2502
2502
|
cropCtx.drawImage(rawCanvas, xPos, 0, cropCanvas.width, cropCanvas.height, 0, 0, cropCanvas.width, cropCanvas.height);
|
|
2503
2503
|
}
|
|
@@ -2696,6 +2696,10 @@ var defaultFocusThresholds = {
|
|
|
2696
2696
|
passport: {
|
|
2697
2697
|
desktop: 0,
|
|
2698
2698
|
mobile: 0.3
|
|
2699
|
+
},
|
|
2700
|
+
singlePage: {
|
|
2701
|
+
desktop: 0,
|
|
2702
|
+
mobile: 0.3
|
|
2699
2703
|
}
|
|
2700
2704
|
};
|
|
2701
2705
|
var models = {};
|
|
@@ -5359,18 +5363,20 @@ function sumUpProgressForDependencies(dependencies) {
|
|
|
5359
5363
|
});
|
|
5360
5364
|
}
|
|
5361
5365
|
|
|
5362
|
-
var defaultDocumentDetectorModelPath = "https://websdk-cdn-dev.idmission.com/assets/models/
|
|
5366
|
+
var defaultDocumentDetectorModelPath = "https://websdk-cdn-dev.idmission.com/assets/models/docdetectmp20240830/model_fp16.tflite";
|
|
5363
5367
|
var defaultDocumentDetectionScoreThreshold = 0.1;
|
|
5364
5368
|
var defaultDocumentDetectionModelLoadTimeoutMs = 45000;
|
|
5365
5369
|
var defaultDocumentDetectionThresholds = {
|
|
5366
5370
|
idCardFront: 0.6,
|
|
5367
5371
|
idCardBack: 0.6,
|
|
5368
|
-
passport: 0.4
|
|
5372
|
+
passport: 0.4,
|
|
5373
|
+
singlePage: 0.6
|
|
5369
5374
|
};
|
|
5370
5375
|
var documentTypeDisplayNames = {
|
|
5371
5376
|
idCardFront: 'ID card front',
|
|
5372
5377
|
idCardBack: 'ID card back',
|
|
5373
5378
|
passport: 'Passport',
|
|
5379
|
+
singlePage: 'Single page ID document',
|
|
5374
5380
|
none: 'None'
|
|
5375
5381
|
};
|
|
5376
5382
|
var detectors = {};
|
|
@@ -5506,7 +5512,7 @@ function makeDocumentDetectorPrediction(detector, frame) {
|
|
|
5506
5512
|
});
|
|
5507
5513
|
}
|
|
5508
5514
|
function processDocumentDetectorPrediction(prediction, thresholds) {
|
|
5509
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
5515
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
5510
5516
|
var detections = prediction.detections,
|
|
5511
5517
|
frameWidth = prediction.frameWidth,
|
|
5512
5518
|
frameHeight = prediction.frameHeight,
|
|
@@ -5535,19 +5541,26 @@ function processDocumentDetectorPrediction(prediction, thresholds) {
|
|
|
5535
5541
|
var bestPassportPage = detectedObjects.find(function (obj) {
|
|
5536
5542
|
return obj.label === 'Passport page';
|
|
5537
5543
|
});
|
|
5544
|
+
var bestSinglePage = detectedObjects.find(function (obj) {
|
|
5545
|
+
return obj.label === 'Single page';
|
|
5546
|
+
});
|
|
5538
5547
|
var idCardFrontDetectionScore = (_a = bestIdCardFront === null || bestIdCardFront === void 0 ? void 0 : bestIdCardFront.score) !== null && _a !== void 0 ? _a : 0;
|
|
5539
5548
|
var idCardBackDetectionScore = (_b = bestIdCardBack === null || bestIdCardBack === void 0 ? void 0 : bestIdCardBack.score) !== null && _b !== void 0 ? _b : 0;
|
|
5540
5549
|
var passportDetectionScore = (_c = bestPassportPage === null || bestPassportPage === void 0 ? void 0 : bestPassportPage.score) !== null && _c !== void 0 ? _c : 0;
|
|
5541
|
-
var
|
|
5542
|
-
var
|
|
5543
|
-
var
|
|
5544
|
-
var
|
|
5545
|
-
var
|
|
5546
|
-
var
|
|
5550
|
+
var singlePageDetectionScore = (_d = bestSinglePage === null || bestSinglePage === void 0 ? void 0 : bestSinglePage.score) !== null && _d !== void 0 ? _d : 0;
|
|
5551
|
+
var idCardFrontDetectionThresholdMet = idCardFrontDetectionScore >= ((_e = thresholds.idCardFront) !== null && _e !== void 0 ? _e : 0);
|
|
5552
|
+
var idCardBackDetectionThresholdMet = idCardBackDetectionScore >= ((_f = thresholds.idCardBack) !== null && _f !== void 0 ? _f : 0);
|
|
5553
|
+
var passportDetectionThresholdMet = passportDetectionScore >= ((_g = thresholds.passport) !== null && _g !== void 0 ? _g : 0);
|
|
5554
|
+
var singlePageDetectionThresholdMet = singlePageDetectionScore >= ((_h = thresholds.singlePage) !== null && _h !== void 0 ? _h : 0);
|
|
5555
|
+
var bestDocument = passportDetectionThresholdMet ? bestPassportPage : singlePageDetectionThresholdMet ? bestSinglePage : idCardBackDetectionThresholdMet ? bestIdCardBack : bestIdCardFront;
|
|
5556
|
+
var detectionThreshold = passportDetectionThresholdMet ? thresholds.passport : singlePageDetectionThresholdMet ? thresholds.singlePage : idCardBackDetectionThresholdMet ? thresholds.idCardBack : thresholds.idCardFront;
|
|
5557
|
+
var detectionScore = (_j = bestDocument === null || bestDocument === void 0 ? void 0 : bestDocument.score) !== null && _j !== void 0 ? _j : 0;
|
|
5547
5558
|
var detectionThresholdMet = detectionScore >= (detectionThreshold !== null && detectionThreshold !== void 0 ? detectionThreshold : 0);
|
|
5548
5559
|
var detectedDocumentType = 'none';
|
|
5549
5560
|
if (passportDetectionThresholdMet) {
|
|
5550
5561
|
detectedDocumentType = 'passport';
|
|
5562
|
+
} else if (singlePageDetectionThresholdMet) {
|
|
5563
|
+
detectedDocumentType = 'singlePage';
|
|
5551
5564
|
} else if (idCardBackDetectionThresholdMet) {
|
|
5552
5565
|
detectedDocumentType = 'idCardBack';
|
|
5553
5566
|
} else if (detectionThresholdMet) {
|
|
@@ -5556,11 +5569,11 @@ function processDocumentDetectorPrediction(prediction, thresholds) {
|
|
|
5556
5569
|
var documentInBounds = false;
|
|
5557
5570
|
if (bestDocument) {
|
|
5558
5571
|
var boundaryPx = 20;
|
|
5559
|
-
var
|
|
5560
|
-
boundaryX =
|
|
5561
|
-
boundaryY =
|
|
5562
|
-
boundaryWidth =
|
|
5563
|
-
boundaryHeight =
|
|
5572
|
+
var _k = bestDocument.box,
|
|
5573
|
+
boundaryX = _k.xMin,
|
|
5574
|
+
boundaryY = _k.yMin,
|
|
5575
|
+
boundaryWidth = _k.width,
|
|
5576
|
+
boundaryHeight = _k.height;
|
|
5564
5577
|
documentInBounds = boundaryY > boundaryPx &&
|
|
5565
5578
|
// Is it valid top edge of ID detected?
|
|
5566
5579
|
boundaryY + boundaryHeight + boundaryPx < frameHeight && (
|
|
@@ -5571,9 +5584,9 @@ function processDocumentDetectorPrediction(prediction, thresholds) {
|
|
|
5571
5584
|
}
|
|
5572
5585
|
var documentTooClose = false;
|
|
5573
5586
|
if (bestDocument) {
|
|
5574
|
-
var
|
|
5575
|
-
docWidth =
|
|
5576
|
-
docHeight =
|
|
5587
|
+
var _l = [bestDocument.box.width / frameWidth, bestDocument.box.height / frameHeight],
|
|
5588
|
+
docWidth = _l[0],
|
|
5589
|
+
docHeight = _l[1];
|
|
5577
5590
|
documentTooClose = docWidth > 0.85 || docHeight > 0.85;
|
|
5578
5591
|
}
|
|
5579
5592
|
return {
|
|
@@ -5588,6 +5601,8 @@ function processDocumentDetectorPrediction(prediction, thresholds) {
|
|
|
5588
5601
|
idCardBackDetectionThresholdMet: idCardBackDetectionThresholdMet,
|
|
5589
5602
|
passportDetectionScore: passportDetectionScore,
|
|
5590
5603
|
passportDetectionThresholdMet: passportDetectionThresholdMet,
|
|
5604
|
+
singlePageDetectionScore: singlePageDetectionScore,
|
|
5605
|
+
singlePageDetectionThresholdMet: singlePageDetectionThresholdMet,
|
|
5591
5606
|
bestDocument: bestDocument,
|
|
5592
5607
|
documentInBounds: documentInBounds,
|
|
5593
5608
|
documentTooClose: documentTooClose,
|
|
@@ -6002,20 +6017,24 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6002
6017
|
var _this = this;
|
|
6003
6018
|
onDocumentDetected(function (prediction) {
|
|
6004
6019
|
return __awaiter(_this, void 0, void 0, function () {
|
|
6005
|
-
var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, isRequiredDocumentType, focusPrediction, focusThresholdSet, focusThreshold;
|
|
6020
|
+
var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, detectedDocumentType, isRequiredDocumentType, focusPrediction, focusThresholdSet, focusThreshold;
|
|
6006
6021
|
var _a, _b, _c, _d, _e, _f;
|
|
6007
6022
|
return __generator(this, function (_g) {
|
|
6008
6023
|
if (!lastPredictionCanvas.current) return [2 /*return*/];
|
|
6009
6024
|
stopDetectionAtStart = stopDetection.current;
|
|
6010
6025
|
focusPredictionTime = 0, focusScore = 0, focusThresholdMet = false;
|
|
6011
|
-
|
|
6012
|
-
if (
|
|
6026
|
+
detectedDocumentType = prediction.detectedDocumentType;
|
|
6027
|
+
if (detectedDocumentType === 'singlePage') {
|
|
6028
|
+
detectedDocumentType = 'passport';
|
|
6029
|
+
}
|
|
6030
|
+
isRequiredDocumentType = requiredDocumentType === 'none' || detectedDocumentType === requiredDocumentType || ((_a = requiredDocumentType.includes) === null || _a === void 0 ? void 0 : _a.call(requiredDocumentType, detectedDocumentType));
|
|
6031
|
+
if (isRequiredDocumentType && detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.documentInBounds && !prediction.documentTooClose) {
|
|
6013
6032
|
focusPrediction = makeFocusPrediction(lastPredictionCanvas.current, (_b = prediction.bestDocument) === null || _b === void 0 ? void 0 : _b.box);
|
|
6014
6033
|
if (focusPrediction) {
|
|
6015
6034
|
focusScore = focusPrediction.score;
|
|
6016
6035
|
focusPredictionTime = focusPrediction.predictionTime;
|
|
6017
6036
|
}
|
|
6018
|
-
focusThresholdSet = (_c = thresholds.focus) === null || _c === void 0 ? void 0 : _c[
|
|
6037
|
+
focusThresholdSet = (_c = thresholds.focus) === null || _c === void 0 ? void 0 : _c[detectedDocumentType];
|
|
6019
6038
|
focusThreshold = (_d = onMobile ? focusThresholdSet === null || focusThresholdSet === void 0 ? void 0 : focusThresholdSet.mobile : focusThresholdSet === null || focusThresholdSet === void 0 ? void 0 : focusThresholdSet.desktop) !== null && _d !== void 0 ? _d : 0;
|
|
6020
6039
|
focusThresholdMet = focusScore >= focusThreshold;
|
|
6021
6040
|
if (bestFocusScore.current <= focusScore && stopDetectionAtStart === stopDetection.current) {
|
|
@@ -6023,7 +6042,7 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6023
6042
|
drawToCanvas(bestPredictionCanvas.current, lastPredictionCanvas.current);
|
|
6024
6043
|
setBestFrameDetails({
|
|
6025
6044
|
boundingBox: (_e = prediction.bestDocument) === null || _e === void 0 ? void 0 : _e.box,
|
|
6026
|
-
documentType:
|
|
6045
|
+
documentType: detectedDocumentType,
|
|
6027
6046
|
detectionScore: prediction.detectionScore,
|
|
6028
6047
|
focusScore: focusScore
|
|
6029
6048
|
});
|
|
@@ -6151,6 +6170,8 @@ var initialState$4 = {
|
|
|
6151
6170
|
idCardBackDetectionThresholdMet: false,
|
|
6152
6171
|
passportDetectionScore: 0,
|
|
6153
6172
|
passportDetectionThresholdMet: false,
|
|
6173
|
+
singlePageDetectionScore: 0,
|
|
6174
|
+
singlePageDetectionThresholdMet: false,
|
|
6154
6175
|
focusScore: 0,
|
|
6155
6176
|
focusThresholdMet: false,
|
|
6156
6177
|
isGoodFrame: false,
|
|
@@ -6251,6 +6272,8 @@ var _reducer = function reducer(state, action) {
|
|
|
6251
6272
|
idCardBackDetectionThresholdMet = _d.idCardBackDetectionThresholdMet,
|
|
6252
6273
|
passportDetectionScore = _d.passportDetectionScore,
|
|
6253
6274
|
passportDetectionThresholdMet = _d.passportDetectionThresholdMet,
|
|
6275
|
+
singlePageDetectionScore = _d.singlePageDetectionScore,
|
|
6276
|
+
singlePageDetectionThresholdMet = _d.singlePageDetectionThresholdMet,
|
|
6254
6277
|
bestDocument = _d.bestDocument,
|
|
6255
6278
|
documentInBounds = _d.documentInBounds,
|
|
6256
6279
|
documentTooClose = _d.documentTooClose,
|
|
@@ -6288,10 +6311,10 @@ var _reducer = function reducer(state, action) {
|
|
|
6288
6311
|
}
|
|
6289
6312
|
}
|
|
6290
6313
|
if (state.captureRequirement === 'idCardOrPassport') {
|
|
6291
|
-
if (detectedDocumentType === 'passport' && state.requestedDocumentType !== 'passport') {
|
|
6314
|
+
if ((detectedDocumentType === 'passport' || detectedDocumentType === 'singlePage') && state.requestedDocumentType !== 'passport') {
|
|
6292
6315
|
requestedDocumentType = 'passport';
|
|
6293
6316
|
}
|
|
6294
|
-
if (requestedDocumentType === 'passport' &&
|
|
6317
|
+
if (requestedDocumentType === 'passport' && !passportDetectionThresholdMet && !singlePageDetectionThresholdMet) {
|
|
6295
6318
|
requestedDocumentType = 'idCardFront' in state.capturedDocuments ? 'idCardBack' : 'idCardFront';
|
|
6296
6319
|
}
|
|
6297
6320
|
}
|
|
@@ -6318,6 +6341,8 @@ var _reducer = function reducer(state, action) {
|
|
|
6318
6341
|
idCardBackDetectionThresholdMet: idCardBackDetectionThresholdMet,
|
|
6319
6342
|
passportDetectionScore: passportDetectionScore,
|
|
6320
6343
|
passportDetectionThresholdMet: passportDetectionThresholdMet,
|
|
6344
|
+
singlePageDetectionScore: singlePageDetectionScore,
|
|
6345
|
+
singlePageDetectionThresholdMet: singlePageDetectionThresholdMet,
|
|
6321
6346
|
focusScore: focusScore,
|
|
6322
6347
|
focusThresholdMet: focusThresholdMet,
|
|
6323
6348
|
isGoodFrame: isGoodFrame,
|
|
@@ -6490,12 +6515,12 @@ function DebugStatsPane(_a) {
|
|
|
6490
6515
|
if (!portalLocation) return element;
|
|
6491
6516
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
6492
6517
|
}
|
|
6493
|
-
var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$
|
|
6494
|
-
var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$
|
|
6518
|
+
var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n margin-right: 20px;\n padding: 8px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 10002;\n"], ["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n margin-right: 20px;\n padding: 8px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 10002;\n"])));
|
|
6519
|
+
var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n position: absolute;\n z-index: 1001;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n ", "\n"], ["\n position: absolute;\n z-index: 1001;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n ", "\n"])), function (_a) {
|
|
6495
6520
|
var $flipX = _a.$flipX;
|
|
6496
6521
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
6497
6522
|
});
|
|
6498
|
-
var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$
|
|
6523
|
+
var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$l || (templateObject_3$l = __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) {
|
|
6499
6524
|
var $color = _a.$color;
|
|
6500
6525
|
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
6501
6526
|
}, function (_a) {
|
|
@@ -6505,7 +6530,7 @@ var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$o ||
|
|
|
6505
6530
|
var $flipX = _a.$flipX;
|
|
6506
6531
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
6507
6532
|
});
|
|
6508
|
-
var FaceDetectionKeypointMarker = styled__default.default.div(templateObject_4$
|
|
6533
|
+
var FaceDetectionKeypointMarker = styled__default.default.div(templateObject_4$g || (templateObject_4$g = __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) {
|
|
6509
6534
|
var $color = _a.$color;
|
|
6510
6535
|
return $color !== null && $color !== void 0 ? $color : 'red';
|
|
6511
6536
|
}, function (_a) {
|
|
@@ -6696,7 +6721,7 @@ function SelfieCaptureFaceKeypoint(_a) {
|
|
|
6696
6721
|
}
|
|
6697
6722
|
});
|
|
6698
6723
|
}
|
|
6699
|
-
var templateObject_1$
|
|
6724
|
+
var templateObject_1$C, templateObject_2$r, templateObject_3$l, templateObject_4$g;
|
|
6700
6725
|
|
|
6701
6726
|
var enTranslation = {};
|
|
6702
6727
|
|
|
@@ -6732,6 +6757,7 @@ var esTranslation = {
|
|
|
6732
6757
|
'ID card front detected, hold still...': 'Anverso de ID detectado, no mover...',
|
|
6733
6758
|
'ID card back detected, hold still...': 'Reverso de ID detectado, no mover...',
|
|
6734
6759
|
'Passport detected, hold still...': 'Pasaporte detectado, no mover...',
|
|
6760
|
+
'Single page ID document detected, hold still...': 'Documento de una sola página detectada, por favor permanece quieto...',
|
|
6735
6761
|
'Capturing...': 'Capturando...',
|
|
6736
6762
|
'Capture failed!': 'Falló la captura',
|
|
6737
6763
|
'Please flip your ID card...': 'Por favor voltea la identificación...',
|
|
@@ -6756,8 +6782,6 @@ var esTranslation = {
|
|
|
6756
6782
|
Exit: 'Salir',
|
|
6757
6783
|
'Face liveness has been verified!': 'Se ha verificado la Prueba de Vida en rostro!',
|
|
6758
6784
|
Done: 'Terminar',
|
|
6759
|
-
'Could not verify your face.': 'No se pudo verificar tu rostro.',
|
|
6760
|
-
'An error occurred while verifying your face.': 'Se ha producido un error al verificar tu rostro.',
|
|
6761
6785
|
'Customer has been identified!': '¡Se ha identificado al cliente!',
|
|
6762
6786
|
'Customer not found': 'Cliente no encontrado',
|
|
6763
6787
|
'Additional document capture': 'Captura de otro documento',
|
|
@@ -6868,7 +6892,7 @@ function useTranslations(verbiage, fallbacks) {
|
|
|
6868
6892
|
}, [fallbacks, i18n.language, t, verbiage]);
|
|
6869
6893
|
}
|
|
6870
6894
|
|
|
6871
|
-
var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$
|
|
6895
|
+
var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n position: absolute;\n top: calc(", ");\n ", "\n font-weight: bold;\n width: 100%;\n display: flex;\n"], ["\n position: absolute;\n top: calc(", ");\n ", "\n font-weight: bold;\n width: 100%;\n display: flex;\n"])), function (_a) {
|
|
6872
6896
|
var $top = _a.$top;
|
|
6873
6897
|
return $top !== null && $top !== void 0 ? $top : '10vh';
|
|
6874
6898
|
}, function (_a) {
|
|
@@ -6881,14 +6905,14 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
|
|
|
6881
6905
|
if (!portalLocation) return element;
|
|
6882
6906
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
6883
6907
|
};
|
|
6884
|
-
var GuidanceMessage = styled__default.default.div(templateObject_2$
|
|
6908
|
+
var GuidanceMessage = styled__default.default.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n padding: 10px 12px 8px;\n border-radius: 8px;\n z-index: 10001;\n"], ["\n margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n padding: 10px 12px 8px;\n border-radius: 8px;\n z-index: 10001;\n"])), function (props) {
|
|
6885
6909
|
var _a, _b, _c, _d, _e, _f;
|
|
6886
6910
|
return (_f = (_a = props.$background) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.backgroundColor) !== null && _f !== void 0 ? _f : '#ccc';
|
|
6887
6911
|
}, function (props) {
|
|
6888
6912
|
var _a, _b, _c, _d, _e, _f;
|
|
6889
6913
|
return (_f = (_a = props.$textColor) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : 'black';
|
|
6890
6914
|
});
|
|
6891
|
-
var templateObject_1$
|
|
6915
|
+
var templateObject_1$B, templateObject_2$q;
|
|
6892
6916
|
|
|
6893
6917
|
var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
|
|
6894
6918
|
|
|
@@ -6923,18 +6947,18 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
|
6923
6947
|
}
|
|
6924
6948
|
}, verbiage.buttonText))));
|
|
6925
6949
|
}
|
|
6926
|
-
var Container$1 = styled__default.default.div(templateObject_1$
|
|
6950
|
+
var Container$1 = styled__default.default.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100dvw;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"], ["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100dvw;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"])), function (props) {
|
|
6927
6951
|
var _a, _b, _c;
|
|
6928
6952
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.backgroundColor) !== null && _c !== void 0 ? _c : '#eed202';
|
|
6929
6953
|
}, function (props) {
|
|
6930
6954
|
var _a, _b, _c;
|
|
6931
6955
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.textColor) !== null && _c !== void 0 ? _c : 'black';
|
|
6932
6956
|
});
|
|
6933
|
-
var InnerContainer = styled__default.default.div(templateObject_2$
|
|
6934
|
-
var Message = styled__default.default.span(templateObject_3$
|
|
6935
|
-
var ButtonContainer = styled__default.default.div(templateObject_4$
|
|
6936
|
-
var Button = styled__default.default(LoaderButton)(templateObject_5$
|
|
6937
|
-
var templateObject_1$
|
|
6957
|
+
var InnerContainer = styled__default.default.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"])));
|
|
6958
|
+
var Message = styled__default.default.span(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: block;\n margin: auto 12px auto 0;\n"], ["\n display: block;\n margin: auto 12px auto 0;\n"])));
|
|
6959
|
+
var ButtonContainer = styled__default.default.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n margin-left: auto;\n"], ["\n display: flex;\n margin-left: auto;\n"])));
|
|
6960
|
+
var Button = styled__default.default(LoaderButton)(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n white-space: nowrap;\n margin: auto;\n"], ["\n white-space: nowrap;\n margin: auto;\n"])));
|
|
6961
|
+
var templateObject_1$A, templateObject_2$p, templateObject_3$k, templateObject_4$f, templateObject_5$9;
|
|
6938
6962
|
|
|
6939
6963
|
var IdCapture = function IdCapture(_a) {
|
|
6940
6964
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
@@ -7084,7 +7108,7 @@ var IdCapture = function IdCapture(_a) {
|
|
|
7084
7108
|
scaling: debugScalingDetails,
|
|
7085
7109
|
flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
|
|
7086
7110
|
});
|
|
7087
|
-
}))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React__namespace.default.createElement("br", null), modelsReady ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__namespace.default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u274C Models not ready")))));
|
|
7111
|
+
}))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React__namespace.default.createElement("br", null), modelsReady ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.singlePageDetectionThresholdMet ? '✅' : '❌', " Single Page Score: ", state.singlePageDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__namespace.default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u274C Models not ready")))));
|
|
7088
7112
|
};
|
|
7089
7113
|
var timeSince = function timeSince(t) {
|
|
7090
7114
|
if (!t) return 0;
|
|
@@ -7130,13 +7154,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
7130
7154
|
finished: true
|
|
7131
7155
|
}, verbiage.retryBtnText)));
|
|
7132
7156
|
};
|
|
7133
|
-
var StyledOverlayInner$3 = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
7134
|
-
var StyledOverlayImageContainer$3 = styled__default.default(OverlayImageContainer)(templateObject_2$
|
|
7135
|
-
var Description$4 = styled__default.default.p(templateObject_3$
|
|
7136
|
-
var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$
|
|
7137
|
-
var templateObject_1$
|
|
7157
|
+
var StyledOverlayInner$3 = styled__default.default(OverlayInner$2)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
|
|
7158
|
+
var StyledOverlayImageContainer$3 = styled__default.default(OverlayImageContainer)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
7159
|
+
var Description$4 = styled__default.default.p(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
|
|
7160
|
+
var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
7161
|
+
var templateObject_1$z, templateObject_2$o, templateObject_3$j, templateObject_4$e;
|
|
7138
7162
|
|
|
7139
|
-
var ExitCaptureStyledButton = styled__default.default.button(templateObject_1$
|
|
7163
|
+
var ExitCaptureStyledButton = styled__default.default.button(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
7140
7164
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
7141
7165
|
var onClick = _a.onClick,
|
|
7142
7166
|
className = _a.className;
|
|
@@ -7180,10 +7204,10 @@ var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
|
7180
7204
|
y2: "19.75"
|
|
7181
7205
|
}))));
|
|
7182
7206
|
};
|
|
7183
|
-
var templateObject_1$
|
|
7207
|
+
var templateObject_1$y;
|
|
7184
7208
|
|
|
7185
|
-
var ButtonsRow
|
|
7186
|
-
var templateObject_1$
|
|
7209
|
+
var ButtonsRow = styled__default.default.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n"], ["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n"])));
|
|
7210
|
+
var templateObject_1$x;
|
|
7187
7211
|
|
|
7188
7212
|
function IdCaptureLoadingGraphic(props) {
|
|
7189
7213
|
var isMobile = window.innerHeight > window.innerWidth;
|
|
@@ -7818,25 +7842,25 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
|
|
|
7818
7842
|
}
|
|
7819
7843
|
}, verbiage.continueText))))));
|
|
7820
7844
|
};
|
|
7821
|
-
var OverlayInner$1 = styled__default.default.div(templateObject_1$
|
|
7845
|
+
var OverlayInner$1 = styled__default.default.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"], ["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"])), function (props) {
|
|
7822
7846
|
var _a, _b, _c, _d;
|
|
7823
7847
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : '#ecedf3';
|
|
7824
7848
|
}, function (props) {
|
|
7825
7849
|
var _a, _b, _c, _d;
|
|
7826
7850
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.textColor) !== null && _d !== void 0 ? _d : 'black';
|
|
7827
7851
|
});
|
|
7828
|
-
var OverlayHeader$1 = styled__default.default.div(templateObject_2$
|
|
7852
|
+
var OverlayHeader$1 = styled__default.default.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"])), function (props) {
|
|
7829
7853
|
var _a;
|
|
7830
7854
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
7831
7855
|
}, function (props) {
|
|
7832
7856
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
7833
7857
|
});
|
|
7834
|
-
var StyledGuidanceMessage$2 = styled__default.default(GuidanceMessage)(templateObject_3$
|
|
7835
|
-
var StyledOverlayImageContainer$2 = styled__default.default(OverlayImageContainer)(templateObject_4$
|
|
7836
|
-
var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_5$
|
|
7837
|
-
var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_6$
|
|
7838
|
-
var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_7$
|
|
7839
|
-
var StyledButtonsRow$a = styled__default.default(ButtonsRow
|
|
7858
|
+
var StyledGuidanceMessage$2 = styled__default.default(GuidanceMessage)(templateObject_3$i || (templateObject_3$i = __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"])));
|
|
7859
|
+
var StyledOverlayImageContainer$2 = styled__default.default(OverlayImageContainer)(templateObject_4$d || (templateObject_4$d = __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"])));
|
|
7860
|
+
var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
7861
|
+
var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_6$7 || (templateObject_6$7 = __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"])));
|
|
7862
|
+
var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7863
|
+
var StyledButtonsRow$a = styled__default.default(ButtonsRow)(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) {
|
|
7840
7864
|
var _a, _b, _c, _d;
|
|
7841
7865
|
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';
|
|
7842
7866
|
}, function (props) {
|
|
@@ -7870,10 +7894,10 @@ var ContinueButton$1 = styled__default.default(LoaderButton)(templateObject_18 |
|
|
|
7870
7894
|
var _a, _b, _c, _d, _e, _f;
|
|
7871
7895
|
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, ";") : '';
|
|
7872
7896
|
});
|
|
7873
|
-
var templateObject_1$
|
|
7897
|
+
var templateObject_1$w, templateObject_2$n, templateObject_3$i, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$5, 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;
|
|
7874
7898
|
|
|
7875
|
-
var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$
|
|
7876
|
-
var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$
|
|
7899
|
+
var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n margin-top: 15px;\n margin-bottom: 15px;\n"], ["\n margin-top: 15px;\n margin-bottom: 15px;\n"])));
|
|
7900
|
+
var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7877
7901
|
var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
7878
7902
|
var _b, _c, _d, _e;
|
|
7879
7903
|
var onDismissed = _a.onDismissed,
|
|
@@ -7984,7 +8008,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
|
7984
8008
|
}
|
|
7985
8009
|
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
|
|
7986
8010
|
};
|
|
7987
|
-
var templateObject_1$
|
|
8011
|
+
var templateObject_1$v, templateObject_2$m;
|
|
7988
8012
|
|
|
7989
8013
|
var components$1 = {
|
|
7990
8014
|
"default": IdCaptureLoadingOverlayDefault,
|
|
@@ -8041,7 +8065,7 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
|
|
|
8041
8065
|
});
|
|
8042
8066
|
};
|
|
8043
8067
|
|
|
8044
|
-
var OverlayInstruction = styled__default.default.p(templateObject_1$
|
|
8068
|
+
var OverlayInstruction = styled__default.default.p(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n font-size: 18px;\n margin: 30px 0;\n"], ["\n font-size: 18px;\n margin: 30px 0;\n"])));
|
|
8045
8069
|
var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
8046
8070
|
var capturedDocuments = _a.capturedDocuments,
|
|
8047
8071
|
onSubmitClick = _a.onSubmitClick,
|
|
@@ -8076,7 +8100,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8076
8100
|
className: classNames.imageContainer
|
|
8077
8101
|
}, /*#__PURE__*/React__namespace.default.createElement(ImageRow, {
|
|
8078
8102
|
className: classNames.imageRow
|
|
8079
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
8103
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Heading$9, {
|
|
8080
8104
|
className: classNames.heading
|
|
8081
8105
|
}, verbiage.headingText), idCardFront && ( /*#__PURE__*/React__namespace.default.createElement(ImageCol$1, {
|
|
8082
8106
|
className: classNames.imageCol
|
|
@@ -8110,7 +8134,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8110
8134
|
alt: verbiage.passportText
|
|
8111
8135
|
})), debugMode && ( /*#__PURE__*/React__namespace.default.createElement("pre", null, "Detection Score: ".concat(passport.detectionScore, "\nFocus Score: ").concat(passport.focusScore, "\nBounding Box: ").concat(JSON.stringify(passport.boundingBox)))))))), /*#__PURE__*/React__namespace.default.createElement(OverlayInstruction, {
|
|
8112
8136
|
className: classNames.instruction
|
|
8113
|
-
}, verbiage.instructionText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow
|
|
8137
|
+
}, verbiage.instructionText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
8114
8138
|
className: classNames.buttonsRow
|
|
8115
8139
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
8116
8140
|
className: classNames.retryBtn,
|
|
@@ -8127,17 +8151,17 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8127
8151
|
finished: true
|
|
8128
8152
|
}, submissionStatus === SubmissionStatus.SUBMITTING ? verbiage.submittingText : verbiage.submitText))));
|
|
8129
8153
|
};
|
|
8130
|
-
var Heading$
|
|
8131
|
-
var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_3$
|
|
8132
|
-
var ImageRow = styled__default.default(OverlayImageRow)(templateObject_4$
|
|
8133
|
-
var ImageCol$1 = styled__default.default.div(templateObject_5$
|
|
8134
|
-
var ImageHeading = styled__default.default.h3(templateObject_6$
|
|
8135
|
-
var CapturedImageWrapper = styled__default.default.div(templateObject_7$
|
|
8154
|
+
var Heading$9 = styled__default.default.h1(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n margin-bottom: 12px;\n"], ["\n margin-bottom: 12px;\n"])));
|
|
8155
|
+
var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n overflow-y: auto;\n"], ["\n overflow-y: auto;\n"])));
|
|
8156
|
+
var ImageRow = styled__default.default(OverlayImageRow)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n flex-direction: column;\n"], ["\n flex-direction: column;\n"])));
|
|
8157
|
+
var ImageCol$1 = styled__default.default.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n max-height: none !important;\n"], ["\n max-height: none !important;\n"])));
|
|
8158
|
+
var ImageHeading = styled__default.default.h3(templateObject_6$6 || (templateObject_6$6 = __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"])));
|
|
8159
|
+
var CapturedImageWrapper = styled__default.default.div(templateObject_7$4 || (templateObject_7$4 = __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) {
|
|
8136
8160
|
var _a, _b, _c;
|
|
8137
8161
|
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)';
|
|
8138
8162
|
});
|
|
8139
8163
|
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"])));
|
|
8140
|
-
var templateObject_1$
|
|
8164
|
+
var templateObject_1$u, templateObject_2$l, templateObject_3$h, templateObject_4$c, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$2;
|
|
8141
8165
|
|
|
8142
8166
|
var CameraVideoTag = function CameraVideoTag(_a) {
|
|
8143
8167
|
var _b;
|
|
@@ -8176,10 +8200,10 @@ var CameraVideoTag = function CameraVideoTag(_a) {
|
|
|
8176
8200
|
"$isRearFacing": (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing
|
|
8177
8201
|
});
|
|
8178
8202
|
};
|
|
8179
|
-
var FullscreenVideoTag = styled__default.default.video(templateObject_1$
|
|
8203
|
+
var FullscreenVideoTag = styled__default.default.video(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n transform: ", ";\n min-width: 100%;\n min-height: 100%;\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: 100%;\n object-fit: cover;\n background: black;\n z-index: -2;\n"], ["\n transform: ", ";\n min-width: 100%;\n min-height: 100%;\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: 100%;\n object-fit: cover;\n background: black;\n z-index: -2;\n"])), function (props) {
|
|
8180
8204
|
return props.$isRearFacing ? '' : 'scaleX(-1)';
|
|
8181
8205
|
});
|
|
8182
|
-
var templateObject_1$
|
|
8206
|
+
var templateObject_1$t;
|
|
8183
8207
|
|
|
8184
8208
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
8185
8209
|
var _this = this;
|
|
@@ -8214,10 +8238,10 @@ function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallb
|
|
|
8214
8238
|
return !skipSuccessScreen || skipSuccessScreenResolvedFalse;
|
|
8215
8239
|
}
|
|
8216
8240
|
|
|
8217
|
-
var CameraFeedWrapper = styled__default.default.div(templateObject_1$
|
|
8241
|
+
var CameraFeedWrapper = styled__default.default.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8218
8242
|
return props.$mode === 'snapToGuides' ? "display: flex;\n position: absolute;\n left: ".concat(props.$x, "px;\n top: ").concat(props.$y, "px;\n width: ").concat(props.$w, "px;\n height: ").concat(props.$h, "px;") : "";
|
|
8219
8243
|
});
|
|
8220
|
-
var templateObject_1$
|
|
8244
|
+
var templateObject_1$s;
|
|
8221
8245
|
|
|
8222
8246
|
function setCanvasDimensions(canvas, width, height) {
|
|
8223
8247
|
var _a;
|
|
@@ -8251,10 +8275,10 @@ var GuideOrientationContext = /*#__PURE__*/React.createContext({
|
|
|
8251
8275
|
}
|
|
8252
8276
|
});
|
|
8253
8277
|
|
|
8254
|
-
var StyledPageContainer = styled__default.default(PageContainerDiv)(templateObject_1$
|
|
8255
|
-
var GuidesContainer = styled__default.default.div(templateObject_2$
|
|
8256
|
-
var GuideCenterRow = styled__default.default.div(templateObject_3$
|
|
8257
|
-
var GuideRegion = styled__default.default.div(templateObject_4$
|
|
8278
|
+
var StyledPageContainer = styled__default.default(PageContainerDiv)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n z-index: 1000;\n"], ["\n z-index: 1000;\n"])));
|
|
8279
|
+
var GuidesContainer = styled__default.default.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n width: 100dvw;\n height: 100dvh;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n width: 100dvw;\n height: 100dvh;\n"])));
|
|
8280
|
+
var GuideCenterRow = styled__default.default.div(templateObject_3$g || (templateObject_3$g = __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 min-height: 0;\n flex: 1;\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 min-height: 0;\n flex: 1;\n"])));
|
|
8281
|
+
var GuideRegion = styled__default.default.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\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 position: relative;\n z-index: 1000;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"])), function (props) {
|
|
8258
8282
|
var _a, _b, _c, _d, _e;
|
|
8259
8283
|
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)';
|
|
8260
8284
|
}, function (props) {
|
|
@@ -8265,13 +8289,13 @@ var GuideRegion = styled__default.default.div(templateObject_4$c || (templateObj
|
|
|
8265
8289
|
}, function (props) {
|
|
8266
8290
|
return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
|
|
8267
8291
|
});
|
|
8268
|
-
var Spacer = styled__default.default(GuideRegion)(templateObject_5$
|
|
8269
|
-
var GuideCenterRegion = styled__default.default.div(templateObject_6$
|
|
8292
|
+
var Spacer = styled__default.default(GuideRegion)(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n display: block;\n width: auto;\n"], ["\n display: block;\n width: auto;\n"])));
|
|
8293
|
+
var GuideCenterRegion = styled__default.default.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n ", "\n ", "\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"], ["\n ", "\n ", "\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"])), function (props) {
|
|
8270
8294
|
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
8271
8295
|
}, function (props) {
|
|
8272
8296
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
8273
8297
|
});
|
|
8274
|
-
var GuideCenterBorder = styled__default.default.div(templateObject_7$
|
|
8298
|
+
var GuideCenterBorder = styled__default.default.div(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n box-sizing: border-box;\n border: ", ";\n display: flex;\n flex: 1;\n justify-content: center;\n max-height: 100%;\n min-height: 0;\n position: relative;\n"], ["\n box-sizing: border-box;\n border: ", ";\n display: flex;\n flex: 1;\n justify-content: center;\n max-height: 100%;\n min-height: 0;\n position: relative;\n"])), function (props) {
|
|
8275
8299
|
var _a, _b;
|
|
8276
8300
|
return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
|
|
8277
8301
|
});
|
|
@@ -8399,9 +8423,9 @@ var regionClsx$1 = function regionClsx(classNames, which) {
|
|
|
8399
8423
|
return v;
|
|
8400
8424
|
}).join(' ');
|
|
8401
8425
|
};
|
|
8402
|
-
var templateObject_1$
|
|
8426
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$g, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$1, templateObject_9$1;
|
|
8403
8427
|
|
|
8404
|
-
var FlippingImage = styled__default.default(GuideImage)(templateObject_1$
|
|
8428
|
+
var FlippingImage = styled__default.default(GuideImage)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n backface-visibility: hidden;\n transform-style: preserve-3d;\n position: absolute;\n height: 100%;\n top: 0;\n left: 50%;\n transition: transform ", "s;\n transform: translateX(-50%) ", ";\n"], ["\n backface-visibility: hidden;\n transform-style: preserve-3d;\n position: absolute;\n height: 100%;\n top: 0;\n left: 50%;\n transition: transform ", "s;\n transform: translateX(-50%) ", ";\n"])), function (props) {
|
|
8405
8429
|
return props.$transitionTime;
|
|
8406
8430
|
}, function (props) {
|
|
8407
8431
|
return props.$transforms;
|
|
@@ -8546,7 +8570,7 @@ var regionClsx = function regionClsx(classNames, which) {
|
|
|
8546
8570
|
return v;
|
|
8547
8571
|
}).join(' ');
|
|
8548
8572
|
};
|
|
8549
|
-
var templateObject_1$
|
|
8573
|
+
var templateObject_1$q;
|
|
8550
8574
|
|
|
8551
8575
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
8552
8576
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -8682,11 +8706,11 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
8682
8706
|
imageVisible: imageVisible
|
|
8683
8707
|
})));
|
|
8684
8708
|
};
|
|
8685
|
-
var CanvasWrapper$1 = styled__default.default.div(templateObject_1$
|
|
8709
|
+
var CanvasWrapper$1 = styled__default.default.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n z-index: -1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n z-index: -1;\n"])), function (props) {
|
|
8686
8710
|
return props.$maskColor;
|
|
8687
8711
|
});
|
|
8688
|
-
var Canvas$1 = styled__default.default.canvas(templateObject_2$
|
|
8689
|
-
var templateObject_1$
|
|
8712
|
+
var Canvas$1 = styled__default.default.canvas(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
8713
|
+
var templateObject_1$p, templateObject_2$j;
|
|
8690
8714
|
|
|
8691
8715
|
function IdCaptureGuides(_a) {
|
|
8692
8716
|
var _b, _c;
|
|
@@ -8831,11 +8855,11 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
|
|
|
8831
8855
|
onError: onError
|
|
8832
8856
|
})));
|
|
8833
8857
|
};
|
|
8834
|
-
var StyledSpinner = styled__default.default(Spinner)(templateObject_1$
|
|
8835
|
-
var ImagePreviewWrapper = styled__default.default.div(templateObject_2$
|
|
8836
|
-
var ImagePreviewText = styled__default.default.div(templateObject_3$
|
|
8837
|
-
var ImagePreviewImageWrapper = styled__default.default.div(templateObject_4$
|
|
8838
|
-
var templateObject_1$
|
|
8858
|
+
var StyledSpinner = styled__default.default(Spinner)(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
8859
|
+
var ImagePreviewWrapper = styled__default.default.div(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
8860
|
+
var ImagePreviewText = styled__default.default.div(templateObject_3$f || (templateObject_3$f = __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"])));
|
|
8861
|
+
var ImagePreviewImageWrapper = styled__default.default.div(templateObject_4$a || (templateObject_4$a = __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"])));
|
|
8862
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$f, templateObject_4$a;
|
|
8839
8863
|
|
|
8840
8864
|
var documentCaptureInitialState = {
|
|
8841
8865
|
documents: [],
|
|
@@ -9191,11 +9215,11 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
|
|
|
9191
9215
|
ref: canvasRef
|
|
9192
9216
|
}));
|
|
9193
9217
|
};
|
|
9194
|
-
var CanvasWrapper = styled__default.default.div(templateObject_1$
|
|
9218
|
+
var CanvasWrapper = styled__default.default.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n"], ["\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
|
|
9195
9219
|
return props.$maskColor;
|
|
9196
9220
|
});
|
|
9197
|
-
var Canvas = styled__default.default.canvas(templateObject_2$
|
|
9198
|
-
var templateObject_1$
|
|
9221
|
+
var Canvas = styled__default.default.canvas(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
9222
|
+
var templateObject_1$n, templateObject_2$h;
|
|
9199
9223
|
|
|
9200
9224
|
var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
9201
9225
|
var _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -9299,7 +9323,7 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
9299
9323
|
}, /*#__PURE__*/React__namespace.default.createElement(HeadingRow, {
|
|
9300
9324
|
"$maskColor": maskColor,
|
|
9301
9325
|
className: classNames.headingRow
|
|
9302
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
9326
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Heading$8, {
|
|
9303
9327
|
className: classNames.heading
|
|
9304
9328
|
}, verbiage.headingText)), /*#__PURE__*/React__namespace.default.createElement(DocumentCaptureGuideOverlay, {
|
|
9305
9329
|
aspectRatio: aspectRatio,
|
|
@@ -9345,21 +9369,21 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
9345
9369
|
disabled: !cameraReady || capturing
|
|
9346
9370
|
}, !cameraReady ? verbiage.loadingBtnText : capturing ? verbiage.capturingBtnText : verbiage.captureBtnText))))));
|
|
9347
9371
|
};
|
|
9348
|
-
var CaptureContainer = styled__default.default.div(templateObject_1$
|
|
9349
|
-
var HeadingRow = styled__default.default.div(templateObject_2$
|
|
9372
|
+
var CaptureContainer = styled__default.default.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: var(--app-height);\n"], ["\n display: flex;\n flex-direction: column;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: var(--app-height);\n"])));
|
|
9373
|
+
var HeadingRow = styled__default.default.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n background: ", ";\n text-align: center;\n color: white;\n"], ["\n background: ", ";\n text-align: center;\n color: white;\n"])), function (props) {
|
|
9350
9374
|
return props.$maskColor;
|
|
9351
9375
|
});
|
|
9352
|
-
var Heading$
|
|
9353
|
-
var FooterRow = styled__default.default.div(templateObject_4$
|
|
9376
|
+
var Heading$8 = styled__default.default.h1(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n font-size: 22px;\n"], ["\n font-size: 22px;\n"])));
|
|
9377
|
+
var FooterRow = styled__default.default.div(templateObject_4$9 || (templateObject_4$9 = __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) {
|
|
9354
9378
|
return props.$maskColor;
|
|
9355
9379
|
});
|
|
9356
|
-
var Instructions = styled__default.default.div(templateObject_5$
|
|
9380
|
+
var Instructions = styled__default.default.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n max-height: ", ";\n overflow-y: auto;\n"], ["\n max-height: ", ";\n overflow-y: auto;\n"])), function (props) {
|
|
9357
9381
|
var _a, _b, _c;
|
|
9358
9382
|
return (_c = (_b = (_a = props.theme.documentCapture) === null || _a === void 0 ? void 0 : _a.instructions) === null || _b === void 0 ? void 0 : _b.maxHeight) !== null && _c !== void 0 ? _c : '8rem';
|
|
9359
9383
|
});
|
|
9360
|
-
var StyledButtonsRow$9 = styled__default.default(ButtonsRow
|
|
9361
|
-
var PreviewImage = styled__default.default.img(templateObject_7$
|
|
9362
|
-
var templateObject_1$
|
|
9384
|
+
var StyledButtonsRow$9 = styled__default.default(ButtonsRow)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n padding-top: 20px;\n"], ["\n padding-top: 20px;\n"])));
|
|
9385
|
+
var PreviewImage = styled__default.default.img(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"])));
|
|
9386
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$e, templateObject_4$9, templateObject_5$5, templateObject_6$4, templateObject_7$2;
|
|
9363
9387
|
|
|
9364
9388
|
var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
|
|
9365
9389
|
var onSuccess = _a.onSuccess,
|
|
@@ -9579,7 +9603,7 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
9579
9603
|
className: classNames.container
|
|
9580
9604
|
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayInner$2, {
|
|
9581
9605
|
className: classNames.inner
|
|
9582
|
-
}, !silentFallback && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
9606
|
+
}, !silentFallback && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$7, {
|
|
9583
9607
|
className: classNames.heading
|
|
9584
9608
|
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(Description$3, {
|
|
9585
9609
|
className: classNames.description
|
|
@@ -9628,13 +9652,13 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
9628
9652
|
}
|
|
9629
9653
|
}, verbiage.doneBtnText))))));
|
|
9630
9654
|
};
|
|
9631
|
-
var StyledOverlayInner$2 = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
9632
|
-
var Heading$
|
|
9633
|
-
var Description$3 = styled__default.default.p(templateObject_3$
|
|
9634
|
-
var Instruction = styled__default.default.p(templateObject_4$
|
|
9635
|
-
var ImageCol = styled__default.default.div(templateObject_5$
|
|
9636
|
-
var StyledButtonsRow$8 = styled__default.default(ButtonsRow
|
|
9637
|
-
var templateObject_1$
|
|
9655
|
+
var StyledOverlayInner$2 = styled__default.default(OverlayInner$2)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
9656
|
+
var Heading$7 = styled__default.default.h3(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
9657
|
+
var Description$3 = styled__default.default.p(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
9658
|
+
var Instruction = styled__default.default.p(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
9659
|
+
var ImageCol = styled__default.default.div(templateObject_5$4 || (templateObject_5$4 = __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"])));
|
|
9660
|
+
var StyledButtonsRow$8 = styled__default.default(ButtonsRow)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
9661
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$d, templateObject_4$8, templateObject_5$4, templateObject_6$3;
|
|
9638
9662
|
|
|
9639
9663
|
var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
9640
9664
|
var _b, _c, _d, _e, _f, _g;
|
|
@@ -9995,776 +10019,144 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
9995
10019
|
})));
|
|
9996
10020
|
};
|
|
9997
10021
|
|
|
9998
|
-
|
|
9999
|
-
|
|
10000
|
-
|
|
10001
|
-
|
|
10002
|
-
|
|
10003
|
-
|
|
10004
|
-
|
|
10005
|
-
|
|
10006
|
-
|
|
10007
|
-
|
|
10008
|
-
|
|
10009
|
-
|
|
10010
|
-
|
|
10011
|
-
|
|
10022
|
+
var FaceCaptureGuideContainer = styled__default.default.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n position: absolute;\n z-index: 1000;\n width: 100%;\n height: 100%;\n display: flex;\n"], ["\n position: absolute;\n z-index: 1000;\n width: 100%;\n height: 100%;\n display: flex;\n"])));
|
|
10023
|
+
var FaceCaptureGuideOval = styled__default.default.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n border-width: ", "px;\n border-color: ", ";\n border-style: solid;\n border-radius: 50%;\n aspect-ratio: 1 / 1.618;\n height: 50%;\n margin: auto;\n"], ["\n border-width: ", "px;\n border-color: ", ";\n border-style: solid;\n border-radius: 50%;\n aspect-ratio: 1 / 1.618;\n height: 50%;\n margin: auto;\n"])), function (props) {
|
|
10024
|
+
return props.$borderWidth;
|
|
10025
|
+
}, function (props) {
|
|
10026
|
+
var _a, _b, _c, _d;
|
|
10027
|
+
return (_d = (_a = props.$borderColor) !== null && _a !== void 0 ? _a : (_c = (_b = props.theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.guides) === null || _c === void 0 ? void 0 : _c["".concat(props.$variant, "Color")]) !== null && _d !== void 0 ? _d : 'white';
|
|
10028
|
+
});
|
|
10029
|
+
var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
|
|
10030
|
+
var _b = _a.classNames,
|
|
10031
|
+
classNames = _b === void 0 ? {} : _b,
|
|
10032
|
+
_c = _a.variant,
|
|
10033
|
+
variant = _c === void 0 ? 'unsatisfied' : _c,
|
|
10034
|
+
_d = _a.borderWidth,
|
|
10035
|
+
borderWidth = _d === void 0 ? 3 : _d,
|
|
10036
|
+
borderColor = _a.borderColor;
|
|
10037
|
+
return /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideContainer, {
|
|
10038
|
+
className: classNames.container
|
|
10039
|
+
}, /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideOval, {
|
|
10040
|
+
className: classNames.oval,
|
|
10041
|
+
"$variant": variant,
|
|
10042
|
+
"$borderWidth": borderWidth,
|
|
10043
|
+
"$borderColor": borderColor
|
|
10044
|
+
}));
|
|
10045
|
+
};
|
|
10046
|
+
var templateObject_1$k, templateObject_2$e;
|
|
10047
|
+
|
|
10048
|
+
var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
|
|
10049
|
+
start: function start() {
|
|
10050
|
+
return null;
|
|
10051
|
+
},
|
|
10052
|
+
stop: function stop() {
|
|
10053
|
+
return null;
|
|
10054
|
+
},
|
|
10055
|
+
onPredictionMade: function onPredictionMade() {
|
|
10056
|
+
return null;
|
|
10057
|
+
},
|
|
10058
|
+
canvasRef: {
|
|
10059
|
+
current: null
|
|
10060
|
+
},
|
|
10061
|
+
ready: false,
|
|
10062
|
+
error: null,
|
|
10063
|
+
modelDownloadProgress: 0
|
|
10064
|
+
});
|
|
10065
|
+
function SelfieGuidanceModelsProvider(_a) {
|
|
10066
|
+
var _this = this;
|
|
10067
|
+
var _b = _a.autoStart,
|
|
10068
|
+
autoStart = _b === void 0 ? true : _b,
|
|
10069
|
+
children = _a.children,
|
|
10070
|
+
throttleMs = _a.throttleMs,
|
|
10071
|
+
onModelError = _a.onModelError,
|
|
10072
|
+
_c = _a.modelLoadTimeoutMs,
|
|
10073
|
+
modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c;
|
|
10074
|
+
var _d = React.useContext(CameraStateContext),
|
|
10075
|
+
videoRef = _d.videoRef,
|
|
10076
|
+
videoLoaded = _d.videoLoaded,
|
|
10077
|
+
cameraReady = _d.cameraReady;
|
|
10078
|
+
var canvasRef = React.useRef(null);
|
|
10079
|
+
var onPredictionHandler = React.useRef();
|
|
10080
|
+
var _e = useLoadFaceDetector({
|
|
10081
|
+
onModelError: onModelError,
|
|
10082
|
+
modelLoadTimeoutMs: modelLoadTimeoutMs
|
|
10083
|
+
}),
|
|
10084
|
+
detector = _e.detector,
|
|
10085
|
+
ready = _e.ready,
|
|
10086
|
+
modelDownloadProgress = _e.modelDownloadProgress,
|
|
10087
|
+
modelError = _e.modelError;
|
|
10088
|
+
var _f = useFrameLoop(React.useCallback(function () {
|
|
10089
|
+
return __awaiter(_this, void 0, void 0, function () {
|
|
10090
|
+
var vw, vh, ctx, faces;
|
|
10091
|
+
var _a;
|
|
10092
|
+
return __generator(this, function (_b) {
|
|
10093
|
+
if (!videoLoaded || !cameraReady || !ready || modelError || !videoRef.current || !detector.current || !canvasRef.current) return [2 /*return*/];
|
|
10094
|
+
vw = videoRef.current.videoWidth;
|
|
10095
|
+
vh = videoRef.current.videoHeight;
|
|
10096
|
+
ctx = canvasRef.current.getContext('2d');
|
|
10097
|
+
canvasRef.current.width = vw;
|
|
10098
|
+
canvasRef.current.height = vh;
|
|
10099
|
+
if (ctx && videoRef.current.readyState === 4) {
|
|
10100
|
+
ctx.translate(vw, 0);
|
|
10101
|
+
ctx.scale(-1, 1);
|
|
10102
|
+
ctx.drawImage(videoRef.current, 0, 0, vw, vh);
|
|
10103
|
+
// Detectors can throw errors, for example when using custom URLs that
|
|
10104
|
+
// contain a model that doesn't provide the expected output.
|
|
10105
|
+
try {
|
|
10106
|
+
faces = makeFaceDetectorPrediction(detector.current, canvasRef.current).faces;
|
|
10107
|
+
(_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, faces);
|
|
10108
|
+
} catch (e) {
|
|
10109
|
+
error('caught face detection error', e);
|
|
10110
|
+
}
|
|
10111
|
+
}
|
|
10112
|
+
return [2 /*return*/];
|
|
10113
|
+
});
|
|
10012
10114
|
});
|
|
10013
|
-
},
|
|
10115
|
+
}, [cameraReady, detector, modelError, ready, videoLoaded, videoRef]), {
|
|
10116
|
+
throttleMs: throttleMs,
|
|
10117
|
+
autoStart: autoStart
|
|
10118
|
+
}),
|
|
10119
|
+
start = _f.start,
|
|
10120
|
+
stop = _f.stop;
|
|
10121
|
+
var onPredictionMade = React.useCallback(function (handler) {
|
|
10122
|
+
onPredictionHandler.current = handler;
|
|
10123
|
+
}, []);
|
|
10124
|
+
var value = React.useMemo(function () {
|
|
10125
|
+
return {
|
|
10126
|
+
start: start,
|
|
10127
|
+
stop: stop,
|
|
10128
|
+
ready: ready,
|
|
10129
|
+
canvasRef: canvasRef,
|
|
10130
|
+
onPredictionMade: onPredictionMade,
|
|
10131
|
+
error: modelError,
|
|
10132
|
+
modelDownloadProgress: modelDownloadProgress
|
|
10133
|
+
};
|
|
10134
|
+
}, [modelError, modelDownloadProgress, onPredictionMade, ready, start, stop]);
|
|
10135
|
+
return /*#__PURE__*/React__namespace.createElement(SelfieGuidanceModelsContext.Provider, {
|
|
10136
|
+
value: value
|
|
10137
|
+
}, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
|
|
10138
|
+
ref: canvasRef
|
|
10139
|
+
}), children);
|
|
10140
|
+
}
|
|
10141
|
+
|
|
10142
|
+
var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger, shouldStart) {
|
|
10143
|
+
if (shouldStart === void 0) {
|
|
10144
|
+
shouldStart = true;
|
|
10145
|
+
}
|
|
10146
|
+
var _a = React.useState(false),
|
|
10147
|
+
timedOut = _a[0],
|
|
10148
|
+
setTimedOut = _a[1];
|
|
10149
|
+
var _b = React.useState(),
|
|
10150
|
+
timeoutStartedAt = _b[0],
|
|
10151
|
+
setTimeoutStartedAt = _b[1];
|
|
10152
|
+
React.useEffect(function () {
|
|
10153
|
+
if (!durationMs || !shouldStart) return;
|
|
10154
|
+
setTimeoutStartedAt(new Date());
|
|
10155
|
+
var timer = setTimeout(function () {
|
|
10156
|
+
setTimedOut(true);
|
|
10157
|
+
}, durationMs);
|
|
10014
10158
|
return function () {
|
|
10015
|
-
|
|
10016
|
-
};
|
|
10017
|
-
}, []);
|
|
10018
|
-
var theme = styled.useTheme();
|
|
10019
|
-
var satisfiedColor = (_d = (_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.guides) === null || _c === void 0 ? void 0 : _c.satisfiedColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
|
|
10020
|
-
return /*#__PURE__*/React__namespace.default.createElement("svg", {
|
|
10021
|
-
width: width,
|
|
10022
|
-
height: height,
|
|
10023
|
-
className: className,
|
|
10024
|
-
viewBox: "0 0 840 740",
|
|
10025
|
-
fill: "none",
|
|
10026
|
-
preserveAspectRatio: "xMidYMax slice",
|
|
10027
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
10028
|
-
}, /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
10029
|
-
clipPath: "url(#clip0_428_1188)"
|
|
10030
|
-
}, /*#__PURE__*/React__namespace.default.createElement("mask", {
|
|
10031
|
-
id: "mask0_428_1188",
|
|
10032
|
-
style: {
|
|
10033
|
-
maskType: 'alpha'
|
|
10034
|
-
},
|
|
10035
|
-
maskUnits: "userSpaceOnUse",
|
|
10036
|
-
x: "0",
|
|
10037
|
-
y: "0",
|
|
10038
|
-
width: "840",
|
|
10039
|
-
height: "740"
|
|
10040
|
-
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
10041
|
-
width: "840",
|
|
10042
|
-
height: "740",
|
|
10043
|
-
fill: "#D9D9D9"
|
|
10044
|
-
})), /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
10045
|
-
mask: "url(#mask0_428_1188)"
|
|
10046
|
-
}, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10047
|
-
d: "M503.781 449.497C491.561 503.154 458.442 541.609 419.561 541.609C380.68 541.609 347.492 503.015 335.272 449.358L344.645 412.916L347.492 402.019H491.561L502.253 443.667L503.225 447.415L503.781 449.497Z",
|
|
10048
|
-
fill: "#D2D4DA"
|
|
10049
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10050
|
-
d: "M574.88 244.97C647.073 163.885 598.921 362.155 558.945 338.928C488.709 298.211 574.88 244.97 574.88 244.97Z",
|
|
10051
|
-
fill: "#F7A69C"
|
|
10052
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10053
|
-
d: "M816.983 742.838C779.698 781.432 736.86 814.612 689.786 841.127C617.161 882.012 534.399 906.862 446.153 911.027C437.335 911.513 428.448 911.721 419.491 911.721C374.986 911.721 331.731 906.446 290.281 896.519C232.514 882.706 178.358 859.8 129.271 829.397C89.9033 805.033 53.9382 775.948 22 742.838L31.512 705.355C45.8842 649.061 90.2505 605.33 146.837 591.795L153.085 590.337L222.447 573.747L241.401 569.235C249.386 567.292 257.023 564.585 264.244 561.114C270.285 558.199 276.047 554.797 281.463 550.91C287.295 546.745 292.78 542.025 297.71 536.819C310.971 522.867 320.761 505.653 325.76 486.286L333.119 457.688L335.064 449.983L335.202 449.358L344.645 412.916L347.422 402.019H491.491L502.253 443.667L503.225 447.415L503.78 449.497V449.983L505.863 457.757L513.223 486.286C520.097 512.802 535.996 535.5 557.589 550.91C569.393 559.448 582.932 565.765 597.581 569.235L615.078 573.4L692.146 591.795C748.732 605.33 793.099 649.061 807.471 705.355L816.983 742.838Z",
|
|
10054
|
-
fill: "#F7A69C"
|
|
10055
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10056
|
-
d: "M503.781 449.497C491.561 503.154 458.442 541.609 419.561 541.609C380.68 541.609 347.492 503.015 335.272 449.358L344.645 412.916L347.492 402.019H491.561L502.253 443.667L503.225 447.415L503.781 449.497Z",
|
|
10057
|
-
fill: "#DC968D"
|
|
10058
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10059
|
-
d: "M264.123 244.97C191.93 163.885 240.082 362.155 280.058 338.928C350.294 298.211 264.123 244.97 264.123 244.97Z",
|
|
10060
|
-
fill: "#F7A69C"
|
|
10061
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10062
|
-
d: "M586.473 187.324C586.473 193.432 586.126 199.402 585.432 205.371C584.876 210.785 582.446 233.9 578.141 263.331C575.781 279.713 572.726 297.969 569.115 316.294C569.115 316.502 569.115 316.78 568.976 316.988C560.159 361.621 547.731 406.045 531.484 422.219C513.154 440.544 498.435 457.203 481.632 469.211C464.83 481.289 446.014 488.786 419.631 488.786C393.247 488.786 374.431 481.289 357.629 469.211C340.896 457.203 326.107 440.544 307.778 422.219C291.531 405.976 279.103 361.482 270.216 316.918C270.216 316.918 270.216 316.71 270.216 316.641C269.105 310.879 268.063 305.118 267.022 299.426C266.605 297.066 266.189 294.706 265.772 292.346C264.036 282.351 262.509 272.563 261.12 263.401C256.121 229.596 253.691 204.122 253.691 204.122C253.136 198.638 252.858 193.016 252.858 187.324C252.858 185.866 252.858 184.408 252.858 182.951C253.205 169.832 255.01 157.06 258.274 144.843C258.412 144.287 258.551 143.732 258.69 143.177C277.228 75.4294 337.425 24.8271 410.049 20.8011C413.243 20.5928 416.368 20.5234 419.631 20.5234C465.733 20.5234 507.461 39.1956 537.663 69.3904C563.769 95.4205 581.266 130.127 585.501 168.79C586.195 174.899 586.542 181.077 586.542 187.324H586.473Z",
|
|
10063
|
-
fill: "#FEAEA5"
|
|
10064
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10065
|
-
d: "M445.867 337.327C445.867 348.849 434.133 358.151 419.622 358.151C405.111 358.151 393.447 348.849 393.447 337.327C393.447 335.939 393.586 334.55 394.002 333.301C396.293 342.88 406.916 350.099 419.622 350.099C432.328 350.099 443.02 342.88 445.312 333.301C445.728 334.62 445.867 335.939 445.867 337.327Z",
|
|
10066
|
-
fill: "#F7A69C"
|
|
10067
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10068
|
-
d: "M817.053 743.187C716.586 847.238 575.642 912 419.561 912C263.481 912 122.467 847.238 22.0698 743.118L31.5818 705.704C45.954 649.34 90.3203 605.61 146.906 592.074L222.655 574.027L241.471 569.515C249.942 567.502 258.135 564.517 265.772 560.699C304.237 601.653 358.879 627.267 419.561 627.267C480.244 627.267 534.886 601.653 573.351 560.699C580.988 564.448 589.111 567.502 597.651 569.515L614.106 573.471L692.216 592.074C748.802 605.61 793.168 649.34 807.471 705.704L817.053 743.187Z",
|
|
10069
|
-
fill: "#6E7174"
|
|
10070
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10071
|
-
d: "M614.106 573.471C597.165 594.018 534.886 659.058 419.561 663.639C286.671 668.984 226.266 579.441 222.655 574.027L241.471 569.515C249.942 567.502 258.134 564.517 265.772 560.699C304.236 601.653 358.879 627.267 419.561 627.267C480.244 627.267 534.886 601.653 573.35 560.699C580.988 564.448 589.111 567.502 597.651 569.515L614.106 573.471Z",
|
|
10072
|
-
fill: "#555A5E"
|
|
10073
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10074
|
-
d: "M249.898 196.144C249.898 249.777 270.317 315.623 270.317 315.623C270.317 315.623 266.862 205.572 314.892 164.108C347.514 135.946 374.019 167.565 417.115 167.565C456.137 167.565 492.558 136.481 525.436 164.108C578.852 208.994 568.738 315.623 568.738 315.623C568.738 315.623 589.157 250.557 589.157 196.144C589.157 76.4319 542.638 20 417.115 20C302.8 20 249.898 75.8365 249.898 196.144Z",
|
|
10075
|
-
fill: "#525252"
|
|
10076
|
-
})), frame >= 8 ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10077
|
-
d: "M565.5 295C565.5 350.583 549.016 400.803 522.488 437.067C495.958 473.332 459.517 495.5 419.5 495.5C379.483 495.5 343.042 473.332 316.512 437.067C289.984 400.803 273.5 350.583 273.5 295C273.5 239.417 289.984 189.197 316.512 152.933C343.042 116.668 379.483 94.5 419.5 94.5C459.517 94.5 495.958 116.668 522.488 152.933C549.016 189.197 565.5 239.417 565.5 295Z",
|
|
10078
|
-
stroke: satisfiedColor,
|
|
10079
|
-
strokeWidth: "5"
|
|
10080
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10081
|
-
cx: "518.5",
|
|
10082
|
-
cy: "438.5",
|
|
10083
|
-
r: "25.5",
|
|
10084
|
-
fill: satisfiedColor
|
|
10085
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10086
|
-
d: "M504 440.5L512 448L531 427",
|
|
10087
|
-
stroke: "white",
|
|
10088
|
-
strokeWidth: "5",
|
|
10089
|
-
strokeLinecap: "round",
|
|
10090
|
-
strokeLinejoin: "round"
|
|
10091
|
-
}))) : ( /*#__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, frame > 5 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10092
|
-
d: "M298.5 182.5L419 164.5L540 182",
|
|
10093
|
-
stroke: "white",
|
|
10094
|
-
strokeWidth: "2",
|
|
10095
|
-
strokeLinecap: "round",
|
|
10096
|
-
strokeLinejoin: "round"
|
|
10097
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10098
|
-
cx: "419",
|
|
10099
|
-
cy: "165",
|
|
10100
|
-
r: "7",
|
|
10101
|
-
fill: "white"
|
|
10102
|
-
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10103
|
-
d: "M565.5 295C565.5 350.583 549.016 400.803 522.488 437.067C495.958 473.332 459.517 495.5 419.5 495.5C379.483 495.5 343.042 473.332 316.512 437.067C289.984 400.803 273.5 350.583 273.5 295C273.5 239.417 289.984 189.197 316.512 152.933C343.042 116.668 379.483 94.5 419.5 94.5C459.517 94.5 495.958 116.668 522.488 152.933C549.016 189.197 565.5 239.417 565.5 295Z",
|
|
10104
|
-
stroke: "white",
|
|
10105
|
-
strokeOpacity: frame > 7 ? 0.8 : frame > 5 ? 0.3 : 0.1,
|
|
10106
|
-
strokeWidth: "5"
|
|
10107
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10108
|
-
d: "M299.939 262.805L419 478.5L538.5 261.5",
|
|
10109
|
-
stroke: "white",
|
|
10110
|
-
strokeWidth: "2",
|
|
10111
|
-
strokeLinecap: "round",
|
|
10112
|
-
strokeLinejoin: "round"
|
|
10113
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10114
|
-
d: "M298.5 182.5L418.871 230.054L540 182",
|
|
10115
|
-
stroke: "white",
|
|
10116
|
-
strokeWidth: "2",
|
|
10117
|
-
strokeLinecap: "round",
|
|
10118
|
-
strokeLinejoin: "round"
|
|
10119
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10120
|
-
d: "M298.5 182.5L299.939 262.805",
|
|
10121
|
-
stroke: "white",
|
|
10122
|
-
strokeWidth: "2",
|
|
10123
|
-
strokeLinecap: "round",
|
|
10124
|
-
strokeLinejoin: "round"
|
|
10125
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10126
|
-
d: "M540.001 182L538.501 261.5",
|
|
10127
|
-
stroke: "white",
|
|
10128
|
-
strokeWidth: "2",
|
|
10129
|
-
strokeLinecap: "round",
|
|
10130
|
-
strokeLinejoin: "round"
|
|
10131
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10132
|
-
cx: "299.914",
|
|
10133
|
-
cy: "182",
|
|
10134
|
-
r: "7",
|
|
10135
|
-
fill: "white"
|
|
10136
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10137
|
-
cx: "540",
|
|
10138
|
-
cy: "182",
|
|
10139
|
-
r: "7",
|
|
10140
|
-
fill: "white"
|
|
10141
|
-
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10142
|
-
d: "M418.828 230L419 342.5",
|
|
10143
|
-
stroke: "white",
|
|
10144
|
-
strokeWidth: "2",
|
|
10145
|
-
strokeLinecap: "round",
|
|
10146
|
-
strokeLinejoin: "round",
|
|
10147
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10148
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10149
|
-
d: "M300 263.001L419 342.501",
|
|
10150
|
-
stroke: "white",
|
|
10151
|
-
strokeWidth: "2",
|
|
10152
|
-
strokeLinecap: "round",
|
|
10153
|
-
strokeLinejoin: "round",
|
|
10154
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10155
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10156
|
-
d: "M538.5 261.5L419 342.5",
|
|
10157
|
-
stroke: "white",
|
|
10158
|
-
strokeWidth: "2",
|
|
10159
|
-
strokeLinecap: "round",
|
|
10160
|
-
strokeLinejoin: "round",
|
|
10161
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10162
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10163
|
-
d: "M301.5 409L419 342.5",
|
|
10164
|
-
stroke: "white",
|
|
10165
|
-
strokeWidth: "2",
|
|
10166
|
-
strokeLinecap: "round",
|
|
10167
|
-
strokeLinejoin: "round",
|
|
10168
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10169
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10170
|
-
d: "M536.5 410L419 342.5",
|
|
10171
|
-
stroke: "white",
|
|
10172
|
-
strokeWidth: "2",
|
|
10173
|
-
strokeLinecap: "round",
|
|
10174
|
-
strokeLinejoin: "round",
|
|
10175
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10176
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10177
|
-
d: "M300 263L419 230",
|
|
10178
|
-
stroke: "white",
|
|
10179
|
-
strokeWidth: "2",
|
|
10180
|
-
strokeLinecap: "round",
|
|
10181
|
-
strokeLinejoin: "round",
|
|
10182
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10183
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10184
|
-
d: "M538.5 261.5L419 230",
|
|
10185
|
-
stroke: "white",
|
|
10186
|
-
strokeWidth: "2",
|
|
10187
|
-
strokeLinecap: "round",
|
|
10188
|
-
strokeLinejoin: "round",
|
|
10189
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10190
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10191
|
-
cx: "419",
|
|
10192
|
-
cy: "229.971",
|
|
10193
|
-
r: "7",
|
|
10194
|
-
fill: "white"
|
|
10195
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10196
|
-
cx: "419",
|
|
10197
|
-
cy: "342.4",
|
|
10198
|
-
r: "7",
|
|
10199
|
-
fill: "white"
|
|
10200
|
-
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10201
|
-
d: "M538.5 261.5L536.5 410",
|
|
10202
|
-
stroke: "white",
|
|
10203
|
-
strokeWidth: "2",
|
|
10204
|
-
strokeLinecap: "round",
|
|
10205
|
-
strokeLinejoin: "round",
|
|
10206
|
-
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
10207
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10208
|
-
d: "M419 478.5L536.5 410",
|
|
10209
|
-
stroke: "white",
|
|
10210
|
-
strokeWidth: "2",
|
|
10211
|
-
strokeLinecap: "round",
|
|
10212
|
-
strokeLinejoin: "round",
|
|
10213
|
-
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
10214
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10215
|
-
cx: "537",
|
|
10216
|
-
cy: "263",
|
|
10217
|
-
r: "7",
|
|
10218
|
-
fill: "white"
|
|
10219
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10220
|
-
cx: "537",
|
|
10221
|
-
cy: "409",
|
|
10222
|
-
r: "7",
|
|
10223
|
-
fill: "white"
|
|
10224
|
-
}))), frame > 1 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10225
|
-
d: "M301.501 409L300.001 263",
|
|
10226
|
-
stroke: "white",
|
|
10227
|
-
strokeWidth: "2",
|
|
10228
|
-
strokeLinecap: "round",
|
|
10229
|
-
strokeLinejoin: "round",
|
|
10230
|
-
strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
|
|
10231
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10232
|
-
d: "M301.501 409L419.001 478.5",
|
|
10233
|
-
stroke: "white",
|
|
10234
|
-
strokeWidth: "2",
|
|
10235
|
-
strokeLinecap: "round",
|
|
10236
|
-
strokeLinejoin: "round",
|
|
10237
|
-
strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
|
|
10238
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10239
|
-
cx: "419",
|
|
10240
|
-
cy: "477.576",
|
|
10241
|
-
r: "7",
|
|
10242
|
-
fill: "white"
|
|
10243
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10244
|
-
cx: "301.914",
|
|
10245
|
-
cy: "263",
|
|
10246
|
-
r: "7",
|
|
10247
|
-
fill: "white"
|
|
10248
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10249
|
-
cx: "301.444",
|
|
10250
|
-
cy: "409",
|
|
10251
|
-
r: "7",
|
|
10252
|
-
fill: "white"
|
|
10253
|
-
})))))), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
|
|
10254
|
-
id: "clip0_428_1188"
|
|
10255
|
-
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
10256
|
-
width: "840",
|
|
10257
|
-
height: "740",
|
|
10258
|
-
fill: "white"
|
|
10259
|
-
}))));
|
|
10260
|
-
}
|
|
10261
|
-
var HeadGuideSvg = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
10262
|
-
var _b = _a.borderColor,
|
|
10263
|
-
borderColor = _b === void 0 ? 'white' : _b,
|
|
10264
|
-
_c = _a.borderOpacity,
|
|
10265
|
-
borderOpacity = _c === void 0 ? 0.8 : _c,
|
|
10266
|
-
_d = _a.borderWidth,
|
|
10267
|
-
borderWidth = _d === void 0 ? 5 : _d,
|
|
10268
|
-
_e = _a.status,
|
|
10269
|
-
status = _e === void 0 ? 'ready' : _e,
|
|
10270
|
-
props = __rest(_a, ["borderColor", "borderOpacity", "borderWidth", "status"]);
|
|
10271
|
-
return /*#__PURE__*/React__namespace.default.createElement("svg", _assign({}, props, {
|
|
10272
|
-
ref: ref,
|
|
10273
|
-
viewBox: "271 92 297 406",
|
|
10274
|
-
fill: "none",
|
|
10275
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
10276
|
-
}), /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
10277
|
-
clipPath: "url(#clip0_428_1188)"
|
|
10278
|
-
}, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10279
|
-
d: "M565.5 295C565.5 350.583 549.016 400.803 522.488 437.067C495.958 473.332 459.517 495.5 419.5 495.5C379.483 495.5 343.042 473.332 316.512 437.067C289.984 400.803 273.5 350.583 273.5 295C273.5 239.417 289.984 189.197 316.512 152.933C343.042 116.668 379.483 94.5 419.5 94.5C459.517 94.5 495.958 116.668 522.488 152.933C549.016 189.197 565.5 239.417 565.5 295Z",
|
|
10280
|
-
stroke: borderColor,
|
|
10281
|
-
strokeOpacity: borderOpacity,
|
|
10282
|
-
strokeWidth: borderWidth
|
|
10283
|
-
}), status === 'success' && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10284
|
-
cx: "518.5",
|
|
10285
|
-
cy: "438.5",
|
|
10286
|
-
r: "25.5",
|
|
10287
|
-
fill: borderColor
|
|
10288
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10289
|
-
d: "M504 440.5L512 448L531 427",
|
|
10290
|
-
stroke: "white",
|
|
10291
|
-
strokeWidth: "5",
|
|
10292
|
-
strokeLinecap: "round",
|
|
10293
|
-
strokeLinejoin: "round"
|
|
10294
|
-
}))), status === 'failure' && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10295
|
-
cx: "518.5",
|
|
10296
|
-
cy: "438.5",
|
|
10297
|
-
r: "25.5",
|
|
10298
|
-
fill: borderColor
|
|
10299
|
-
}), /*#__PURE__*/React__namespace.default.createElement("image", {
|
|
10300
|
-
href: "https://websdk-cdn-dev.idmission.com/assets/x.svg",
|
|
10301
|
-
x: "507",
|
|
10302
|
-
y: "427",
|
|
10303
|
-
width: "24",
|
|
10304
|
-
height: "24"
|
|
10305
|
-
})))), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
|
|
10306
|
-
id: "clip0_428_1188"
|
|
10307
|
-
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
10308
|
-
width: "840",
|
|
10309
|
-
height: "740",
|
|
10310
|
-
fill: "white"
|
|
10311
|
-
}))));
|
|
10312
|
-
});
|
|
10313
|
-
HeadGuideSvg.displayName = 'HeadGuideSvg';
|
|
10314
|
-
var PulsingHeadGuideContainer = styled__default.default.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
10315
|
-
function HeadGuide(_a) {
|
|
10316
|
-
var _b;
|
|
10317
|
-
var _c = _a.status,
|
|
10318
|
-
status = _c === void 0 ? 'ready' : _c,
|
|
10319
|
-
props = __rest(_a, ["status"]);
|
|
10320
|
-
var ref = React.useRef(null);
|
|
10321
|
-
var parentRef = React.useRef(null);
|
|
10322
|
-
var _d = React.useState(undefined),
|
|
10323
|
-
refBox = _d[0],
|
|
10324
|
-
setRefBox = _d[1];
|
|
10325
|
-
React.useLayoutEffect(function () {
|
|
10326
|
-
if (!ref.current || !parentRef.current) return;
|
|
10327
|
-
var box = ref.current.getBoundingClientRect();
|
|
10328
|
-
var parentBox = parentRef.current.getBoundingClientRect();
|
|
10329
|
-
setRefBox(_assign(_assign({}, box), {
|
|
10330
|
-
top: box.top - parentBox.top,
|
|
10331
|
-
left: box.left - parentBox.left
|
|
10332
|
-
}));
|
|
10333
|
-
}, []);
|
|
10334
|
-
return /*#__PURE__*/React__namespace.default.createElement(PulsingHeadGuideContainer, {
|
|
10335
|
-
ref: parentRef
|
|
10336
|
-
}, status === 'ready' && refBox && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10337
|
-
className: "pulse",
|
|
10338
|
-
borderOpacity: 0.25,
|
|
10339
|
-
borderColor: "#287ec6",
|
|
10340
|
-
style: refBox
|
|
10341
|
-
})), /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10342
|
-
className: "pulse",
|
|
10343
|
-
borderOpacity: 0.25,
|
|
10344
|
-
borderColor: "#287ec6",
|
|
10345
|
-
style: refBox
|
|
10346
|
-
})), /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10347
|
-
className: "pulse",
|
|
10348
|
-
borderOpacity: 0.25,
|
|
10349
|
-
borderColor: "#287ec6",
|
|
10350
|
-
style: refBox
|
|
10351
|
-
})))), /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10352
|
-
ref: ref,
|
|
10353
|
-
borderOpacity: 1,
|
|
10354
|
-
className: "pulseOrigin ".concat((_b = props.className) !== null && _b !== void 0 ? _b : ''),
|
|
10355
|
-
status: status
|
|
10356
|
-
})));
|
|
10357
|
-
}
|
|
10358
|
-
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"])));
|
|
10359
|
-
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) {
|
|
10360
|
-
return props.$verticalAlign;
|
|
10361
|
-
});
|
|
10362
|
-
function SelfieCaptureAnimatedMask(_a) {
|
|
10363
|
-
var _b, _c, _d, _e, _f, _g, _h;
|
|
10364
|
-
var _j = _a.frame,
|
|
10365
|
-
frame = _j === void 0 ? 0 : _j,
|
|
10366
|
-
_k = _a.borderWidth,
|
|
10367
|
-
borderWidth = _k === void 0 ? 5 : _k,
|
|
10368
|
-
_l = _a.borderColor,
|
|
10369
|
-
borderColor = _l === void 0 ? 'white' : _l,
|
|
10370
|
-
_m = _a.borderOpacity,
|
|
10371
|
-
borderOpacity = _m === void 0 ? 0.8 : _m,
|
|
10372
|
-
_o = _a.verticalAlign,
|
|
10373
|
-
verticalAlign = _o === void 0 ? 'center' : _o,
|
|
10374
|
-
_p = _a.status,
|
|
10375
|
-
status = _p === void 0 ? 'ready' : _p,
|
|
10376
|
-
props = __rest(_a, ["frame", "borderWidth", "borderColor", "borderOpacity", "verticalAlign", "status"]);
|
|
10377
|
-
var ref = React.useRef(null);
|
|
10378
|
-
var theme = styled.useTheme();
|
|
10379
|
-
var satisfiedColor = (_d = (_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.guides) === null || _c === void 0 ? void 0 : _c.satisfiedColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
|
|
10380
|
-
var negativeColor = (_g = (_f = (_e = theme.selfieCapture) === null || _e === void 0 ? void 0 : _e.guides) === null || _f === void 0 ? void 0 : _f.failureColor) !== null && _g !== void 0 ? _g : 'var(--idm-color-negative-600)';
|
|
10381
|
-
var statusBorderColor = status === 'failure' ? negativeColor : status === 'success' ? satisfiedColor : borderColor;
|
|
10382
|
-
return /*#__PURE__*/React__namespace.default.createElement(RelativeSvgContainer, {
|
|
10383
|
-
"$verticalAlign": verticalAlign
|
|
10384
|
-
}, /*#__PURE__*/React__namespace.default.createElement(HeadGuide, _assign({
|
|
10385
|
-
ref: ref,
|
|
10386
|
-
borderOpacity: borderOpacity,
|
|
10387
|
-
borderWidth: borderWidth,
|
|
10388
|
-
borderColor: statusBorderColor,
|
|
10389
|
-
status: status
|
|
10390
|
-
}, props)), /*#__PURE__*/React__namespace.default.createElement(RelativeSvg, _assign({}, props, {
|
|
10391
|
-
viewBox: "271 92 297 406",
|
|
10392
|
-
fill: "none",
|
|
10393
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
10394
|
-
style: _assign(_assign({}, props.style), (_h = ref.current) === null || _h === void 0 ? void 0 : _h.getBoundingClientRect())
|
|
10395
|
-
}), status === 'processing' && ( /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
10396
|
-
clipPath: "url(#clip0_428_1188)"
|
|
10397
|
-
}, 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", {
|
|
10398
|
-
d: "M298.5 182.5L419 164.5L540 182",
|
|
10399
|
-
stroke: "white",
|
|
10400
|
-
strokeWidth: "2",
|
|
10401
|
-
strokeLinecap: "round",
|
|
10402
|
-
strokeLinejoin: "round"
|
|
10403
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10404
|
-
cx: "419",
|
|
10405
|
-
cy: "165",
|
|
10406
|
-
r: "7",
|
|
10407
|
-
fill: "white"
|
|
10408
|
-
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10409
|
-
d: "M299.939 262.805L419 478.5L538.5 261.5",
|
|
10410
|
-
stroke: "white",
|
|
10411
|
-
strokeWidth: "2",
|
|
10412
|
-
strokeLinecap: "round",
|
|
10413
|
-
strokeLinejoin: "round"
|
|
10414
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10415
|
-
d: "M298.5 182.5L418.871 230.054L540 182",
|
|
10416
|
-
stroke: "white",
|
|
10417
|
-
strokeWidth: "2",
|
|
10418
|
-
strokeLinecap: "round",
|
|
10419
|
-
strokeLinejoin: "round"
|
|
10420
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10421
|
-
d: "M298.5 182.5L299.939 262.805",
|
|
10422
|
-
stroke: "white",
|
|
10423
|
-
strokeWidth: "2",
|
|
10424
|
-
strokeLinecap: "round",
|
|
10425
|
-
strokeLinejoin: "round"
|
|
10426
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10427
|
-
d: "M540.001 182L538.501 261.5",
|
|
10428
|
-
stroke: "white",
|
|
10429
|
-
strokeWidth: "2",
|
|
10430
|
-
strokeLinecap: "round",
|
|
10431
|
-
strokeLinejoin: "round"
|
|
10432
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10433
|
-
cx: "299.914",
|
|
10434
|
-
cy: "182",
|
|
10435
|
-
r: "7",
|
|
10436
|
-
fill: "white"
|
|
10437
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10438
|
-
cx: "540",
|
|
10439
|
-
cy: "182",
|
|
10440
|
-
r: "7",
|
|
10441
|
-
fill: "white"
|
|
10442
|
-
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10443
|
-
d: "M418.828 230L419 342.5",
|
|
10444
|
-
stroke: "white",
|
|
10445
|
-
strokeWidth: "2",
|
|
10446
|
-
strokeLinecap: "round",
|
|
10447
|
-
strokeLinejoin: "round",
|
|
10448
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10449
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10450
|
-
d: "M300 263.001L419 342.501",
|
|
10451
|
-
stroke: "white",
|
|
10452
|
-
strokeWidth: "2",
|
|
10453
|
-
strokeLinecap: "round",
|
|
10454
|
-
strokeLinejoin: "round",
|
|
10455
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10456
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10457
|
-
d: "M538.5 261.5L419 342.5",
|
|
10458
|
-
stroke: "white",
|
|
10459
|
-
strokeWidth: "2",
|
|
10460
|
-
strokeLinecap: "round",
|
|
10461
|
-
strokeLinejoin: "round",
|
|
10462
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10463
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10464
|
-
d: "M301.5 409L419 342.5",
|
|
10465
|
-
stroke: "white",
|
|
10466
|
-
strokeWidth: "2",
|
|
10467
|
-
strokeLinecap: "round",
|
|
10468
|
-
strokeLinejoin: "round",
|
|
10469
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10470
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10471
|
-
d: "M536.5 410L419 342.5",
|
|
10472
|
-
stroke: "white",
|
|
10473
|
-
strokeWidth: "2",
|
|
10474
|
-
strokeLinecap: "round",
|
|
10475
|
-
strokeLinejoin: "round",
|
|
10476
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10477
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10478
|
-
d: "M300 263L419 230",
|
|
10479
|
-
stroke: "white",
|
|
10480
|
-
strokeWidth: "2",
|
|
10481
|
-
strokeLinecap: "round",
|
|
10482
|
-
strokeLinejoin: "round",
|
|
10483
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10484
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10485
|
-
d: "M538.5 261.5L419 230",
|
|
10486
|
-
stroke: "white",
|
|
10487
|
-
strokeWidth: "2",
|
|
10488
|
-
strokeLinecap: "round",
|
|
10489
|
-
strokeLinejoin: "round",
|
|
10490
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10491
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10492
|
-
cx: "419",
|
|
10493
|
-
cy: "229.971",
|
|
10494
|
-
r: "7",
|
|
10495
|
-
fill: "white"
|
|
10496
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10497
|
-
cx: "419",
|
|
10498
|
-
cy: "342.4",
|
|
10499
|
-
r: "7",
|
|
10500
|
-
fill: "white"
|
|
10501
|
-
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10502
|
-
d: "M538.5 261.5L536.5 410",
|
|
10503
|
-
stroke: "white",
|
|
10504
|
-
strokeWidth: "2",
|
|
10505
|
-
strokeLinecap: "round",
|
|
10506
|
-
strokeLinejoin: "round",
|
|
10507
|
-
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
10508
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10509
|
-
d: "M419 478.5L536.5 410",
|
|
10510
|
-
stroke: "white",
|
|
10511
|
-
strokeWidth: "2",
|
|
10512
|
-
strokeLinecap: "round",
|
|
10513
|
-
strokeLinejoin: "round",
|
|
10514
|
-
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
10515
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10516
|
-
cx: "537",
|
|
10517
|
-
cy: "263",
|
|
10518
|
-
r: "7",
|
|
10519
|
-
fill: "white"
|
|
10520
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10521
|
-
cx: "537",
|
|
10522
|
-
cy: "409",
|
|
10523
|
-
r: "7",
|
|
10524
|
-
fill: "white"
|
|
10525
|
-
}))), frame > 0 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10526
|
-
d: "M301.501 409L300.001 263",
|
|
10527
|
-
stroke: "white",
|
|
10528
|
-
strokeWidth: "2",
|
|
10529
|
-
strokeLinecap: "round",
|
|
10530
|
-
strokeLinejoin: "round",
|
|
10531
|
-
strokeOpacity: frame > 1 && frame < 6 ? 0.3 : 1
|
|
10532
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10533
|
-
d: "M301.501 409L419.001 478.5",
|
|
10534
|
-
stroke: "white",
|
|
10535
|
-
strokeWidth: "2",
|
|
10536
|
-
strokeLinecap: "round",
|
|
10537
|
-
strokeLinejoin: "round",
|
|
10538
|
-
strokeOpacity: frame > 1 && frame < 6 ? 0.3 : 1
|
|
10539
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10540
|
-
cx: "419",
|
|
10541
|
-
cy: "477.576",
|
|
10542
|
-
r: "7",
|
|
10543
|
-
fill: "white"
|
|
10544
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10545
|
-
cx: "301.914",
|
|
10546
|
-
cy: "263",
|
|
10547
|
-
r: "7",
|
|
10548
|
-
fill: "white"
|
|
10549
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10550
|
-
cx: "301.444",
|
|
10551
|
-
cy: "409",
|
|
10552
|
-
r: "7",
|
|
10553
|
-
fill: "white"
|
|
10554
|
-
}))))), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
|
|
10555
|
-
id: "clip0_428_1188"
|
|
10556
|
-
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
10557
|
-
width: "840",
|
|
10558
|
-
height: "740",
|
|
10559
|
-
fill: "white"
|
|
10560
|
-
})))));
|
|
10561
|
-
}
|
|
10562
|
-
function SelfieCaptureAnimatedMaskWithStatus(_a) {
|
|
10563
|
-
var _b = _a.status,
|
|
10564
|
-
status = _b === void 0 ? 'ready' : _b,
|
|
10565
|
-
props = __rest(_a, ["status"]);
|
|
10566
|
-
var _c = React.useState(1),
|
|
10567
|
-
frame = _c[0],
|
|
10568
|
-
setFrame = _c[1];
|
|
10569
|
-
React.useEffect(function () {
|
|
10570
|
-
if (status !== 'processing') {
|
|
10571
|
-
setFrame(0);
|
|
10572
|
-
return;
|
|
10573
|
-
}
|
|
10574
|
-
setFrame(1);
|
|
10575
|
-
var interval = setInterval(function () {
|
|
10576
|
-
setFrame(function (n) {
|
|
10577
|
-
return (n + 1) % 6;
|
|
10578
|
-
});
|
|
10579
|
-
}, 250);
|
|
10580
|
-
return function () {
|
|
10581
|
-
clearInterval(interval);
|
|
10582
|
-
};
|
|
10583
|
-
}, [status]);
|
|
10584
|
-
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureAnimatedMask, _assign({}, props, {
|
|
10585
|
-
frame: frame,
|
|
10586
|
-
status: status
|
|
10587
|
-
}));
|
|
10588
|
-
}
|
|
10589
|
-
var templateObject_1$m, templateObject_2$h, templateObject_3$f;
|
|
10590
|
-
|
|
10591
|
-
var FaceCaptureGuideContainer = styled__default.default.div(templateObject_1$l || (templateObject_1$l = __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"
|
|
10592
|
-
// const FaceCaptureGuideOval = styled.div<{
|
|
10593
|
-
// $variant: FaceCaptureGuideOverlayVariant
|
|
10594
|
-
// $borderWidth: number
|
|
10595
|
-
// $borderColor?: string
|
|
10596
|
-
// }>`
|
|
10597
|
-
// border-width: ${(props) => props.$borderWidth}px;
|
|
10598
|
-
// border-color: ${(props) =>
|
|
10599
|
-
// props.$borderColor ??
|
|
10600
|
-
// props.theme.selfieCapture?.guides?.[`${props.$variant}Color`] ??
|
|
10601
|
-
// 'white'};
|
|
10602
|
-
// border-style: solid;
|
|
10603
|
-
// border-radius: 50%;
|
|
10604
|
-
// aspect-ratio: 1 / 1.618;
|
|
10605
|
-
// height: 50%;
|
|
10606
|
-
// margin: auto;
|
|
10607
|
-
// `
|
|
10608
|
-
])));
|
|
10609
|
-
// const FaceCaptureGuideOval = styled.div<{
|
|
10610
|
-
// $variant: FaceCaptureGuideOverlayVariant
|
|
10611
|
-
// $borderWidth: number
|
|
10612
|
-
// $borderColor?: string
|
|
10613
|
-
// }>`
|
|
10614
|
-
// border-width: ${(props) => props.$borderWidth}px;
|
|
10615
|
-
// border-color: ${(props) =>
|
|
10616
|
-
// props.$borderColor ??
|
|
10617
|
-
// props.theme.selfieCapture?.guides?.[`${props.$variant}Color`] ??
|
|
10618
|
-
// 'white'};
|
|
10619
|
-
// border-style: solid;
|
|
10620
|
-
// border-radius: 50%;
|
|
10621
|
-
// aspect-ratio: 1 / 1.618;
|
|
10622
|
-
// height: 50%;
|
|
10623
|
-
// margin: auto;
|
|
10624
|
-
// `
|
|
10625
|
-
var StyledSelfieCaptureAnimatedMask$1 = 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"])));
|
|
10626
|
-
var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
|
|
10627
|
-
var _b = _a.classNames,
|
|
10628
|
-
classNames = _b === void 0 ? {} : _b,
|
|
10629
|
-
_c = _a.status,
|
|
10630
|
-
status = _c === void 0 ? 'ready' : _c,
|
|
10631
|
-
_d = _a.borderWidth,
|
|
10632
|
-
borderWidth = _d === void 0 ? 5 : _d,
|
|
10633
|
-
_e = _a.borderColor,
|
|
10634
|
-
borderColor = _e === void 0 ? 'white' : _e,
|
|
10635
|
-
_f = _a.borderOpacity,
|
|
10636
|
-
borderOpacity = _f === void 0 ? 0.8 : _f;
|
|
10637
|
-
return /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideContainer, {
|
|
10638
|
-
className: classNames.container
|
|
10639
|
-
}, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask$1, {
|
|
10640
|
-
status: status,
|
|
10641
|
-
borderColor: borderColor,
|
|
10642
|
-
borderWidth: borderWidth,
|
|
10643
|
-
borderOpacity: borderOpacity,
|
|
10644
|
-
verticalAlign: "center"
|
|
10645
|
-
}));
|
|
10646
|
-
};
|
|
10647
|
-
var templateObject_1$l, templateObject_2$g;
|
|
10648
|
-
|
|
10649
|
-
var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
|
|
10650
|
-
start: function start() {
|
|
10651
|
-
return null;
|
|
10652
|
-
},
|
|
10653
|
-
stop: function stop() {
|
|
10654
|
-
return null;
|
|
10655
|
-
},
|
|
10656
|
-
onPredictionMade: function onPredictionMade() {
|
|
10657
|
-
return null;
|
|
10658
|
-
},
|
|
10659
|
-
canvasRef: {
|
|
10660
|
-
current: null
|
|
10661
|
-
},
|
|
10662
|
-
ready: false,
|
|
10663
|
-
error: null,
|
|
10664
|
-
modelDownloadProgress: 0
|
|
10665
|
-
});
|
|
10666
|
-
function SelfieGuidanceModelsProvider(_a) {
|
|
10667
|
-
var _this = this;
|
|
10668
|
-
var _b = _a.autoStart,
|
|
10669
|
-
autoStart = _b === void 0 ? true : _b,
|
|
10670
|
-
children = _a.children,
|
|
10671
|
-
throttleMs = _a.throttleMs,
|
|
10672
|
-
onModelError = _a.onModelError,
|
|
10673
|
-
_c = _a.modelLoadTimeoutMs,
|
|
10674
|
-
modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c;
|
|
10675
|
-
var _d = React.useContext(CameraStateContext),
|
|
10676
|
-
videoRef = _d.videoRef,
|
|
10677
|
-
videoLoaded = _d.videoLoaded,
|
|
10678
|
-
cameraReady = _d.cameraReady;
|
|
10679
|
-
var canvasRef = React.useRef(null);
|
|
10680
|
-
var onPredictionHandler = React.useRef();
|
|
10681
|
-
var _e = useLoadFaceDetector({
|
|
10682
|
-
onModelError: onModelError,
|
|
10683
|
-
modelLoadTimeoutMs: modelLoadTimeoutMs
|
|
10684
|
-
}),
|
|
10685
|
-
detector = _e.detector,
|
|
10686
|
-
ready = _e.ready,
|
|
10687
|
-
modelDownloadProgress = _e.modelDownloadProgress,
|
|
10688
|
-
modelError = _e.modelError;
|
|
10689
|
-
var _f = useFrameLoop(React.useCallback(function () {
|
|
10690
|
-
return __awaiter(_this, void 0, void 0, function () {
|
|
10691
|
-
var vw, vh, ctx, faces, e_1;
|
|
10692
|
-
var _a;
|
|
10693
|
-
return __generator(this, function (_b) {
|
|
10694
|
-
switch (_b.label) {
|
|
10695
|
-
case 0:
|
|
10696
|
-
if (!videoLoaded || !cameraReady || !ready || modelError || !videoRef.current || !detector.current || !canvasRef.current) return [2 /*return*/];
|
|
10697
|
-
vw = videoRef.current.videoWidth;
|
|
10698
|
-
vh = videoRef.current.videoHeight;
|
|
10699
|
-
ctx = canvasRef.current.getContext('2d');
|
|
10700
|
-
canvasRef.current.width = vw;
|
|
10701
|
-
canvasRef.current.height = vh;
|
|
10702
|
-
if (!(ctx && videoRef.current.readyState === 4)) return [3 /*break*/, 4];
|
|
10703
|
-
ctx.translate(vw, 0);
|
|
10704
|
-
ctx.scale(-1, 1);
|
|
10705
|
-
ctx.drawImage(videoRef.current, 0, 0, vw, vh);
|
|
10706
|
-
_b.label = 1;
|
|
10707
|
-
case 1:
|
|
10708
|
-
_b.trys.push([1, 3,, 4]);
|
|
10709
|
-
faces = makeFaceDetectorPrediction(detector.current, canvasRef.current).faces;
|
|
10710
|
-
return [4 /*yield*/, (_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, faces)];
|
|
10711
|
-
case 2:
|
|
10712
|
-
_b.sent();
|
|
10713
|
-
return [3 /*break*/, 4];
|
|
10714
|
-
case 3:
|
|
10715
|
-
e_1 = _b.sent();
|
|
10716
|
-
error('caught face detection error', e_1);
|
|
10717
|
-
return [3 /*break*/, 4];
|
|
10718
|
-
case 4:
|
|
10719
|
-
return [2 /*return*/];
|
|
10720
|
-
}
|
|
10721
|
-
});
|
|
10722
|
-
});
|
|
10723
|
-
}, [cameraReady, detector, modelError, ready, videoLoaded, videoRef]), {
|
|
10724
|
-
throttleMs: throttleMs,
|
|
10725
|
-
autoStart: autoStart
|
|
10726
|
-
}),
|
|
10727
|
-
start = _f.start,
|
|
10728
|
-
stop = _f.stop;
|
|
10729
|
-
var onPredictionMade = React.useCallback(function (handler) {
|
|
10730
|
-
onPredictionHandler.current = handler;
|
|
10731
|
-
}, []);
|
|
10732
|
-
var value = React.useMemo(function () {
|
|
10733
|
-
return {
|
|
10734
|
-
start: start,
|
|
10735
|
-
stop: stop,
|
|
10736
|
-
ready: ready,
|
|
10737
|
-
canvasRef: canvasRef,
|
|
10738
|
-
onPredictionMade: onPredictionMade,
|
|
10739
|
-
error: modelError,
|
|
10740
|
-
modelDownloadProgress: modelDownloadProgress
|
|
10741
|
-
};
|
|
10742
|
-
}, [modelError, modelDownloadProgress, onPredictionMade, ready, start, stop]);
|
|
10743
|
-
return /*#__PURE__*/React__namespace.createElement(SelfieGuidanceModelsContext.Provider, {
|
|
10744
|
-
value: value
|
|
10745
|
-
}, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
|
|
10746
|
-
ref: canvasRef
|
|
10747
|
-
}), children);
|
|
10748
|
-
}
|
|
10749
|
-
|
|
10750
|
-
var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger, shouldStart) {
|
|
10751
|
-
if (shouldStart === void 0) {
|
|
10752
|
-
shouldStart = true;
|
|
10753
|
-
}
|
|
10754
|
-
var _a = React.useState(false),
|
|
10755
|
-
timedOut = _a[0],
|
|
10756
|
-
setTimedOut = _a[1];
|
|
10757
|
-
var _b = React.useState(),
|
|
10758
|
-
timeoutStartedAt = _b[0],
|
|
10759
|
-
setTimeoutStartedAt = _b[1];
|
|
10760
|
-
React.useEffect(function () {
|
|
10761
|
-
if (!durationMs || !shouldStart) return;
|
|
10762
|
-
setTimeoutStartedAt(new Date());
|
|
10763
|
-
var timer = setTimeout(function () {
|
|
10764
|
-
setTimedOut(true);
|
|
10765
|
-
}, durationMs);
|
|
10766
|
-
return function () {
|
|
10767
|
-
if (timer) clearTimeout(timer);
|
|
10159
|
+
if (timer) clearTimeout(timer);
|
|
10768
10160
|
};
|
|
10769
10161
|
}, [durationMs, shouldStart]);
|
|
10770
10162
|
React.useEffect(function () {
|
|
@@ -10891,11 +10283,11 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
|
|
|
10891
10283
|
className: classNames.container
|
|
10892
10284
|
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayInner$1, {
|
|
10893
10285
|
className: classNames.inner
|
|
10894
|
-
}, silentFallback ? invalidSelfie && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
10286
|
+
}, silentFallback ? invalidSelfie && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$6, {
|
|
10895
10287
|
className: classNames.heading
|
|
10896
10288
|
}, verbiage.livenessFailedText), /*#__PURE__*/React__namespace.default.createElement(Description$2, {
|
|
10897
10289
|
className: classNames.description
|
|
10898
|
-
}, verbiage.livenessFailedReasonText || verbiage.descriptionText))) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
10290
|
+
}, verbiage.livenessFailedReasonText || verbiage.descriptionText))) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$6, {
|
|
10899
10291
|
className: classNames.heading
|
|
10900
10292
|
}, invalidSelfie ? verbiage.livenessFailedText : verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(Description$2, {
|
|
10901
10293
|
className: classNames.description
|
|
@@ -10940,21 +10332,18 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
|
|
|
10940
10332
|
}
|
|
10941
10333
|
}, !image ? invalidSelfie ? verbiage.retryButtonText : verbiage.captureBtnText : loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText)))));
|
|
10942
10334
|
};
|
|
10943
|
-
var StyledOverlayInner$1 = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
10944
|
-
var Heading$
|
|
10945
|
-
var Description$2 = styled__default.default.p(templateObject_3$
|
|
10946
|
-
var ImageContainer$5 = styled__default.default(OverlayImageContainer)(templateObject_4$
|
|
10947
|
-
var StyledButtonsRow$7 = styled__default.default(ButtonsRow
|
|
10948
|
-
var templateObject_1$
|
|
10335
|
+
var StyledOverlayInner$1 = styled__default.default(OverlayInner$2)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
10336
|
+
var Heading$6 = styled__default.default.h3(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
10337
|
+
var Description$2 = styled__default.default.p(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
10338
|
+
var ImageContainer$5 = styled__default.default(OverlayImageContainer)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
10339
|
+
var StyledButtonsRow$7 = styled__default.default(ButtonsRow)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
10340
|
+
var templateObject_1$j, templateObject_2$d, templateObject_3$c, templateObject_4$7, templateObject_5$3;
|
|
10949
10341
|
|
|
10950
10342
|
var initialState$3 = {
|
|
10951
10343
|
videoWidth: 0,
|
|
10952
10344
|
videoHeight: 0,
|
|
10953
|
-
requireVerticalFaceCentering: true,
|
|
10954
|
-
busy: false,
|
|
10955
10345
|
frame: null,
|
|
10956
10346
|
faces: [],
|
|
10957
|
-
faceNotDetected: false,
|
|
10958
10347
|
faceNotCentered: false,
|
|
10959
10348
|
faceLookingAway: false,
|
|
10960
10349
|
faceTooClose: false,
|
|
@@ -10968,11 +10357,9 @@ var reducer$3 = function reducer(state, action) {
|
|
|
10968
10357
|
return _assign(_assign({}, state), action.payload);
|
|
10969
10358
|
case 'facesDetected':
|
|
10970
10359
|
{
|
|
10971
|
-
if (state.busy) return state;
|
|
10972
10360
|
var faces = action.payload.faces;
|
|
10973
10361
|
var face = faces[0];
|
|
10974
|
-
var
|
|
10975
|
-
var faceNotCentered = state.requireVerticalFaceCentering,
|
|
10362
|
+
var faceNotCentered = true,
|
|
10976
10363
|
faceLookingAway = false,
|
|
10977
10364
|
faceTooClose = false,
|
|
10978
10365
|
faceTooFar = false,
|
|
@@ -10990,10 +10377,8 @@ var reducer$3 = function reducer(state, action) {
|
|
|
10990
10377
|
var fTH = face.box.height * 0.2;
|
|
10991
10378
|
var nose = face.keypoints[2]; //.find((k) => k.name === 'noseTip')
|
|
10992
10379
|
if (nose) {
|
|
10380
|
+
faceNotCentered = Math.abs(vCX - fCX) > vTX || Math.abs(vCY + 50 - fCY) > vTY;
|
|
10993
10381
|
faceLookingAway = Math.abs(fCX - nose.x) > fTW || Math.abs(fCY - nose.y) > fTH;
|
|
10994
|
-
var faceNotCenteredHorizontally = Math.abs(vCX - fCX) > vTX;
|
|
10995
|
-
var faceNotCenteredVertically = Math.abs(vCY + 50 - fCY) > vTY;
|
|
10996
|
-
faceNotCentered = faceNotCenteredHorizontally || state.requireVerticalFaceCentering && faceNotCenteredVertically;
|
|
10997
10382
|
}
|
|
10998
10383
|
var isMobile = state.videoWidth < state.videoHeight;
|
|
10999
10384
|
var tooCloseMultiple = isMobile ? 2 : 4.5;
|
|
@@ -11001,7 +10386,7 @@ var reducer$3 = function reducer(state, action) {
|
|
|
11001
10386
|
faceTooClose = face.box.width > state.videoWidth / tooCloseMultiple;
|
|
11002
10387
|
faceTooFar = face.box.width < state.videoWidth / tooFarMultiple;
|
|
11003
10388
|
}
|
|
11004
|
-
var faceReady = !
|
|
10389
|
+
var faceReady = !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
|
|
11005
10390
|
if (!faceReady) {
|
|
11006
10391
|
faceReadyAt = null;
|
|
11007
10392
|
} else if (!state.faceReady) {
|
|
@@ -11009,31 +10394,20 @@ var reducer$3 = function reducer(state, action) {
|
|
|
11009
10394
|
}
|
|
11010
10395
|
return _assign(_assign({}, state), {
|
|
11011
10396
|
faces: faces,
|
|
11012
|
-
faceNotDetected: faceNotDetected,
|
|
11013
10397
|
faceNotCentered: faceNotCentered,
|
|
11014
10398
|
faceLookingAway: faceLookingAway,
|
|
11015
10399
|
faceTooClose: faceTooClose,
|
|
11016
10400
|
faceTooFar: faceTooFar,
|
|
11017
10401
|
faceReady: faceReady,
|
|
11018
|
-
faceReadyAt: faceReadyAt
|
|
11019
|
-
busy: faceReady
|
|
10402
|
+
faceReadyAt: faceReadyAt
|
|
11020
10403
|
});
|
|
11021
10404
|
}
|
|
11022
|
-
case 'captureStarted':
|
|
11023
|
-
return _assign(_assign({}, state), {
|
|
11024
|
-
busy: true
|
|
11025
|
-
});
|
|
11026
|
-
case 'captureCompleted':
|
|
11027
|
-
return _assign(_assign({}, state), {
|
|
11028
|
-
busy: false
|
|
11029
|
-
});
|
|
11030
10405
|
}
|
|
11031
10406
|
};
|
|
11032
10407
|
var SelfieCapture = function SelfieCapture(_a) {
|
|
11033
10408
|
var _b;
|
|
11034
10409
|
var onGuidanceSatisfied = _a.onGuidanceSatisfied,
|
|
11035
10410
|
onGuidanceNotSatisfied = _a.onGuidanceNotSatisfied,
|
|
11036
|
-
onSelfieCaptureStarted = _a.onSelfieCaptureStarted,
|
|
11037
10411
|
onSelfieCaptured = _a.onSelfieCaptured,
|
|
11038
10412
|
onTimeout = _a.onTimeout,
|
|
11039
10413
|
onExit = _a.onExit,
|
|
@@ -11041,91 +10415,80 @@ var SelfieCapture = function SelfieCapture(_a) {
|
|
|
11041
10415
|
timeoutDurationMs = _c === void 0 ? 15000 : _c,
|
|
11042
10416
|
guidanceMessage = _a.guidanceMessage,
|
|
11043
10417
|
guidanceSatisfied = _a.guidanceSatisfied,
|
|
11044
|
-
|
|
11045
|
-
|
|
11046
|
-
|
|
11047
|
-
|
|
11048
|
-
|
|
11049
|
-
|
|
11050
|
-
|
|
11051
|
-
|
|
11052
|
-
|
|
11053
|
-
|
|
11054
|
-
|
|
11055
|
-
|
|
11056
|
-
|
|
11057
|
-
|
|
11058
|
-
|
|
11059
|
-
|
|
11060
|
-
|
|
11061
|
-
_m = _k.height,
|
|
11062
|
-
height = _m === void 0 ? 1 : _m;
|
|
11063
|
-
var _o = React.useReducer(reducer$3, initialState$3),
|
|
11064
|
-
state = _o[0],
|
|
11065
|
-
dispatch = _o[1];
|
|
10418
|
+
_d = _a.classNames,
|
|
10419
|
+
classNames = _d === void 0 ? {} : _d,
|
|
10420
|
+
_e = _a.colors,
|
|
10421
|
+
colors = _e === void 0 ? {} : _e,
|
|
10422
|
+
_f = _a.verbiage,
|
|
10423
|
+
rawVerbiage = _f === void 0 ? {} : _f,
|
|
10424
|
+
_g = _a.debugMode,
|
|
10425
|
+
debugMode = _g === void 0 ? false : _g;
|
|
10426
|
+
var _h = useResizeObserver__default.default(),
|
|
10427
|
+
ref = _h.ref,
|
|
10428
|
+
_j = _h.width,
|
|
10429
|
+
width = _j === void 0 ? 1 : _j,
|
|
10430
|
+
_k = _h.height,
|
|
10431
|
+
height = _k === void 0 ? 1 : _k;
|
|
10432
|
+
var _l = React.useReducer(reducer$3, initialState$3),
|
|
10433
|
+
state = _l[0],
|
|
10434
|
+
dispatch = _l[1];
|
|
11066
10435
|
var lastPredictionCanvas = React.useRef(null);
|
|
11067
|
-
var
|
|
11068
|
-
cameraRef =
|
|
11069
|
-
cameraReady =
|
|
11070
|
-
videoRef =
|
|
11071
|
-
var
|
|
11072
|
-
onPredictionMade =
|
|
11073
|
-
|
|
11074
|
-
guidanceError = _q.error;
|
|
10436
|
+
var _m = React.useContext(CameraStateContext),
|
|
10437
|
+
cameraRef = _m.cameraRef,
|
|
10438
|
+
cameraReady = _m.cameraReady,
|
|
10439
|
+
videoRef = _m.videoRef;
|
|
10440
|
+
var _o = React.useContext(SelfieGuidanceModelsContext),
|
|
10441
|
+
onPredictionMade = _o.onPredictionMade,
|
|
10442
|
+
guidanceError = _o.error;
|
|
11075
10443
|
React.useEffect(function () {
|
|
11076
10444
|
if (cameraReady && videoRef.current && videoRef.current.videoWidth !== 0) {
|
|
11077
10445
|
dispatch({
|
|
11078
10446
|
type: 'configure',
|
|
11079
10447
|
payload: {
|
|
11080
10448
|
videoWidth: videoRef.current.videoWidth,
|
|
11081
|
-
videoHeight: videoRef.current.videoHeight
|
|
11082
|
-
requireVerticalFaceCentering: requireVerticalFaceCentering
|
|
10449
|
+
videoHeight: videoRef.current.videoHeight
|
|
11083
10450
|
}
|
|
11084
10451
|
});
|
|
11085
10452
|
}
|
|
11086
|
-
}, [cameraReady,
|
|
11087
|
-
onPredictionMade(useDebounce.useThrottledCallback(
|
|
11088
|
-
|
|
11089
|
-
|
|
11090
|
-
|
|
11091
|
-
|
|
11092
|
-
type: 'facesDetected',
|
|
11093
|
-
payload: {
|
|
11094
|
-
faces: prediction
|
|
11095
|
-
}
|
|
11096
|
-
});
|
|
10453
|
+
}, [cameraReady, videoRef]);
|
|
10454
|
+
onPredictionMade(useDebounce.useThrottledCallback(function (prediction) {
|
|
10455
|
+
dispatch({
|
|
10456
|
+
type: 'facesDetected',
|
|
10457
|
+
payload: {
|
|
10458
|
+
faces: prediction
|
|
11097
10459
|
}
|
|
11098
|
-
resolve();
|
|
11099
10460
|
});
|
|
11100
|
-
},
|
|
10461
|
+
}, 16));
|
|
10462
|
+
var _p = React.useState(false),
|
|
10463
|
+
captureReady = _p[0],
|
|
10464
|
+
setCaptureReady = _p[1];
|
|
11101
10465
|
React.useEffect(function () {
|
|
11102
|
-
|
|
10466
|
+
var timer;
|
|
10467
|
+
if (state.faceReady) {
|
|
10468
|
+
onGuidanceSatisfied === null || onGuidanceSatisfied === void 0 ? void 0 : onGuidanceSatisfied();
|
|
10469
|
+
timer = setTimeout(function () {
|
|
10470
|
+
setCaptureReady(true);
|
|
10471
|
+
}, 1000);
|
|
10472
|
+
} else {
|
|
10473
|
+
onGuidanceNotSatisfied === null || onGuidanceNotSatisfied === void 0 ? void 0 : onGuidanceNotSatisfied();
|
|
10474
|
+
}
|
|
10475
|
+
return function () {
|
|
10476
|
+
if (timer) clearTimeout(timer);
|
|
10477
|
+
};
|
|
11103
10478
|
}, [onGuidanceNotSatisfied, onGuidanceSatisfied, state.faceReady]);
|
|
11104
10479
|
React.useEffect(function () {
|
|
11105
|
-
if (
|
|
11106
|
-
|
|
11107
|
-
|
|
11108
|
-
type: 'captureStarted'
|
|
11109
|
-
});
|
|
11110
|
-
onSelfieCaptureStarted === null || onSelfieCaptureStarted === void 0 ? void 0 : onSelfieCaptureStarted();
|
|
11111
|
-
var frame = lastPredictionCanvas.current;
|
|
11112
|
-
if (!frame) return;
|
|
11113
|
-
var ctx = frame.getContext('2d');
|
|
10480
|
+
if (captureReady && videoRef.current && lastPredictionCanvas.current && state.faces.length > 0) {
|
|
10481
|
+
drawToCanvas(lastPredictionCanvas.current, videoRef.current);
|
|
10482
|
+
var ctx = lastPredictionCanvas.current.getContext('2d');
|
|
11114
10483
|
if (!ctx) return;
|
|
11115
|
-
var imageData = ctx.getImageData(0, 0,
|
|
10484
|
+
var imageData = ctx.getImageData(0, 0, videoRef.current.videoWidth, videoRef.current.videoHeight);
|
|
11116
10485
|
onSelfieCaptured === null || onSelfieCaptured === void 0 ? void 0 : onSelfieCaptured(imageData, state.faces[0]);
|
|
11117
|
-
clearCanvas(
|
|
11118
|
-
|
|
11119
|
-
|
|
11120
|
-
|
|
11121
|
-
|
|
11122
|
-
|
|
11123
|
-
if (timer) clearTimeout(timer);
|
|
11124
|
-
};
|
|
11125
|
-
}, [onSelfieCaptureStarted, onSelfieCaptured, state.faceReady, state.faces]);
|
|
11126
|
-
var _r = useTimeout(timeoutDurationMs, onTimeout),
|
|
11127
|
-
timedOut = _r.timedOut,
|
|
11128
|
-
timeoutStartedAt = _r.timeoutStartedAt;
|
|
10486
|
+
clearCanvas(lastPredictionCanvas.current);
|
|
10487
|
+
}
|
|
10488
|
+
}, [captureReady, onSelfieCaptured, state.faces, videoRef]);
|
|
10489
|
+
var _q = useTimeout(timeoutDurationMs, onTimeout),
|
|
10490
|
+
timedOut = _q.timedOut,
|
|
10491
|
+
timeoutStartedAt = _q.timeoutStartedAt;
|
|
11129
10492
|
var debugScalingDetails = useDebugScalingDetails({
|
|
11130
10493
|
enabled: debugMode,
|
|
11131
10494
|
pageWidth: width,
|
|
@@ -11140,26 +10503,24 @@ var SelfieCapture = function SelfieCapture(_a) {
|
|
|
11140
10503
|
guidanceLookStraightText: 'Look straight into the camera...',
|
|
11141
10504
|
guidanceMoveBackText: 'Move back...',
|
|
11142
10505
|
guidanceMoveForwardText: 'Move forward...',
|
|
11143
|
-
guidanceMoveToCenterText: 'Move to the center...'
|
|
11144
|
-
guidanceNoFaceDetectedText: 'Waiting for face to be detected...'
|
|
10506
|
+
guidanceMoveToCenterText: 'Move to the center...'
|
|
11145
10507
|
});
|
|
11146
10508
|
var satisfied = state.faceReady;
|
|
11147
10509
|
if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
|
|
11148
|
-
guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText :
|
|
10510
|
+
guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : '');
|
|
11149
10511
|
if (guidanceError) {
|
|
11150
10512
|
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFallback, {
|
|
11151
10513
|
classNames: classNames.fallback
|
|
11152
10514
|
});
|
|
11153
10515
|
}
|
|
11154
|
-
var GuidesComponent = guidesComponent !== null && guidesComponent !== void 0 ? guidesComponent : FaceCaptureGuideOverlay;
|
|
11155
10516
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
11156
10517
|
ref: ref,
|
|
11157
10518
|
className: "flex ".concat((_b = classNames.container) !== null && _b !== void 0 ? _b : '')
|
|
11158
10519
|
}, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
11159
10520
|
ref: lastPredictionCanvas
|
|
11160
|
-
}), /*#__PURE__*/React__namespace.default.createElement(
|
|
10521
|
+
}), /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideOverlay, {
|
|
11161
10522
|
classNames: classNames.guides,
|
|
11162
|
-
|
|
10523
|
+
variant: satisfied ? 'satisfied' : 'unsatisfied'
|
|
11163
10524
|
}), guidanceMessage !== '' && ( /*#__PURE__*/React__namespace.default.createElement(GuidanceMessageContainer, {
|
|
11164
10525
|
className: classNames.guidanceMessageContainer
|
|
11165
10526
|
}, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
|
|
@@ -11191,26 +10552,15 @@ var initialState$2 = {
|
|
|
11191
10552
|
phoneDetected: false,
|
|
11192
10553
|
timesLivenessCheckFailed: 0
|
|
11193
10554
|
};
|
|
10555
|
+
/** todo: JN - this feels like it should be hoisted up to the wizard because these states of failed and error dovetail into those in the wizard.
|
|
10556
|
+
* There may also be some crossing of wires in how error/failed are used.
|
|
10557
|
+
*/
|
|
11194
10558
|
var reducer$2 = function reducer(state, action) {
|
|
11195
10559
|
var _a, _b;
|
|
11196
10560
|
switch (action.type) {
|
|
11197
|
-
case 'resetLivenessCheck':
|
|
11198
|
-
return _assign(_assign({}, initialState$2), {
|
|
11199
|
-
timesLivenessCheckFailed: state.timesLivenessCheckFailed
|
|
11200
|
-
});
|
|
11201
|
-
case 'guidanceUnsatisfied':
|
|
11202
|
-
return _assign({}, state);
|
|
11203
|
-
case 'guidanceSatisfied':
|
|
11204
|
-
return _assign(_assign({}, state), {
|
|
11205
|
-
requestState: 'GUIDANCE_SATISFIED'
|
|
11206
|
-
});
|
|
11207
|
-
case 'selfieCaptureStarted':
|
|
11208
|
-
return _assign(_assign({}, state), {
|
|
11209
|
-
requestState: 'CAPTURE_STARTED'
|
|
11210
|
-
});
|
|
11211
10561
|
case 'livenessReady':
|
|
11212
10562
|
{
|
|
11213
|
-
var allowedStates = ['
|
|
10563
|
+
var allowedStates = ['CAPTURING', 'FAILED', 'ERROR'];
|
|
11214
10564
|
if (allowedStates.includes(state.requestState)) {
|
|
11215
10565
|
return _assign(_assign({}, state), {
|
|
11216
10566
|
requestState: 'CAPTURED',
|
|
@@ -11275,45 +10625,36 @@ var reducer$2 = function reducer(state, action) {
|
|
|
11275
10625
|
}
|
|
11276
10626
|
};
|
|
11277
10627
|
var FaceLivenessCapture = function FaceLivenessCapture(_a) {
|
|
11278
|
-
var _b, _c, _d
|
|
10628
|
+
var _b, _c, _d;
|
|
11279
10629
|
var onCapture = _a.onCapture,
|
|
11280
10630
|
onSuccess = _a.onSuccess,
|
|
11281
10631
|
onTimeout = _a.onTimeout,
|
|
11282
10632
|
onExit = _a.onExit,
|
|
11283
|
-
|
|
11284
|
-
timeoutDurationMs =
|
|
11285
|
-
|
|
11286
|
-
silentFallback =
|
|
11287
|
-
|
|
11288
|
-
|
|
11289
|
-
_h = _a.
|
|
11290
|
-
|
|
11291
|
-
_j = _a.
|
|
11292
|
-
|
|
11293
|
-
_k = _a.colors,
|
|
11294
|
-
colors = _k === void 0 ? {} : _k,
|
|
11295
|
-
_l = _a.verbiage,
|
|
11296
|
-
rawVerbiage = _l === void 0 ? {} : _l,
|
|
10633
|
+
_e = _a.timeoutDurationMs,
|
|
10634
|
+
timeoutDurationMs = _e === void 0 ? 15000 : _e,
|
|
10635
|
+
_f = _a.silentFallback,
|
|
10636
|
+
silentFallback = _f === void 0 ? false : _f,
|
|
10637
|
+
_g = _a.classNames,
|
|
10638
|
+
classNames = _g === void 0 ? {} : _g,
|
|
10639
|
+
_h = _a.colors,
|
|
10640
|
+
colors = _h === void 0 ? {} : _h,
|
|
10641
|
+
_j = _a.verbiage,
|
|
10642
|
+
rawVerbiage = _j === void 0 ? {} : _j,
|
|
11297
10643
|
debugMode = _a.debugMode;
|
|
11298
|
-
var
|
|
11299
|
-
checkLiveness =
|
|
11300
|
-
submissionError =
|
|
10644
|
+
var _k = React.useContext(SubmissionContext),
|
|
10645
|
+
checkLiveness = _k.checkLiveness,
|
|
10646
|
+
submissionError = _k.submissionError;
|
|
11301
10647
|
var modelError = React.useContext(SelfieGuidanceModelsContext).error;
|
|
11302
|
-
var
|
|
11303
|
-
state =
|
|
11304
|
-
dispatch =
|
|
11305
|
-
var
|
|
11306
|
-
imageUrl =
|
|
11307
|
-
setImageUrl =
|
|
10648
|
+
var _l = React.useReducer(reducer$2, initialState$2),
|
|
10649
|
+
state = _l[0],
|
|
10650
|
+
dispatch = _l[1];
|
|
10651
|
+
var _m = React.useState(null),
|
|
10652
|
+
imageUrl = _m[0],
|
|
10653
|
+
setImageUrl = _m[1];
|
|
11308
10654
|
var rawCanvas = React.useRef(null);
|
|
11309
10655
|
var cropCanvas = React.useRef(null);
|
|
11310
10656
|
var resizeCanvas = React.useRef(null);
|
|
11311
10657
|
var theme = styled.useTheme();
|
|
11312
|
-
var onSelfieCaptureStarted = React.useCallback(function () {
|
|
11313
|
-
dispatch({
|
|
11314
|
-
type: 'selfieCaptureStarted'
|
|
11315
|
-
});
|
|
11316
|
-
}, []);
|
|
11317
10658
|
var onSelfieCaptured = React.useCallback(function (frame, face) {
|
|
11318
10659
|
onCapture === null || onCapture === void 0 ? void 0 : onCapture();
|
|
11319
10660
|
dispatch({
|
|
@@ -11423,53 +10764,24 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
|
|
|
11423
10764
|
});
|
|
11424
10765
|
});
|
|
11425
10766
|
}, [checkLiveness, onTimeout]);
|
|
11426
|
-
React.useEffect(function () {
|
|
11427
|
-
if (state.requestState === 'FAILED' || state.requestState === 'ERROR') {
|
|
11428
|
-
setTimeout(function () {
|
|
11429
|
-
dispatch({
|
|
11430
|
-
type: 'resetLivenessCheck'
|
|
11431
|
-
});
|
|
11432
|
-
}, 1000);
|
|
11433
|
-
}
|
|
11434
|
-
}, [state.requestState]);
|
|
11435
10767
|
React.useEffect(function callSuccessIfAvailable() {
|
|
11436
10768
|
if (isPassed && state.imageUrl) onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(state.imageUrl);
|
|
11437
10769
|
}, [onSuccess, state.imageUrl, isPassed]);
|
|
11438
10770
|
React.useEffect(function timeoutOnTooManyLivenessCheckFailures() {
|
|
11439
10771
|
if (modelError) return;
|
|
11440
10772
|
var allowedFailures = 2;
|
|
11441
|
-
if (state.timesLivenessCheckFailed
|
|
10773
|
+
if (state.timesLivenessCheckFailed >= allowedFailures) {
|
|
11442
10774
|
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
|
|
11443
10775
|
}
|
|
11444
10776
|
}, [modelError, onTimeout, state.timesLivenessCheckFailed]);
|
|
11445
10777
|
useTimeout(timeoutDurationMs, onTimeout, state.requestState === 'PASSED' || !!modelError, state.requestState === 'IN_PROGRESS');
|
|
11446
10778
|
var verbiage = useTranslations(rawVerbiage, {
|
|
11447
|
-
guidanceLivenessCheckFailedText: 'Could not verify your face.',
|
|
11448
|
-
guidanceLivenessCheckErrorText: 'An error occurred while verifying your face.',
|
|
11449
10779
|
guidanceRemoveEyeCoveringsText: 'Please remove your eye coverings (sunglasses, eye patch, etc.)...',
|
|
11450
10780
|
guidanceRemoveHeadCoveringsText: 'Please remove your head coverings (hat, scarf, etc.)...',
|
|
11451
10781
|
guidanceRemoveMaskText: 'Please remove your mask...',
|
|
11452
10782
|
progressPreviewText: 'Processing...'
|
|
11453
10783
|
});
|
|
11454
|
-
var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText :
|
|
11455
|
-
disableCapturePreview || (disableCapturePreview = (_d = (_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.capturePreview) === null || _c === void 0 ? void 0 : _c.disabled) !== null && _d !== void 0 ? _d : false);
|
|
11456
|
-
var guidesByRequestState = React.useCallback(function (props) {
|
|
11457
|
-
var GuidesComponent = guidesComponent !== null && guidesComponent !== void 0 ? guidesComponent : FaceCaptureGuideOverlay;
|
|
11458
|
-
var status = ['IN_PROGRESS', 'CAPTURE_STARTED', 'GUIDANCE_SATISFIED', 'CAPTURED'].includes(state.requestState) ? 'processing' : ['FAILED', 'ERROR'].includes(state.requestState) ? 'failure' : 'ready';
|
|
11459
|
-
return /*#__PURE__*/React__namespace.default.createElement(GuidesComponent, _assign({}, props, {
|
|
11460
|
-
status: status
|
|
11461
|
-
}));
|
|
11462
|
-
}, [guidesComponent, state.requestState]);
|
|
11463
|
-
var onGuidanceSatisfied = React.useCallback(function () {
|
|
11464
|
-
dispatch({
|
|
11465
|
-
type: 'guidanceSatisfied'
|
|
11466
|
-
});
|
|
11467
|
-
}, []);
|
|
11468
|
-
var onGuidanceNotSatisfied = React.useCallback(function () {
|
|
11469
|
-
dispatch({
|
|
11470
|
-
type: 'guidanceUnsatisfied'
|
|
11471
|
-
});
|
|
11472
|
-
}, []);
|
|
10784
|
+
var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText : undefined;
|
|
11473
10785
|
if (modelError) {
|
|
11474
10786
|
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFallback, {
|
|
11475
10787
|
key: state.timesLivenessCheckFailed,
|
|
@@ -11486,25 +10798,19 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
|
|
|
11486
10798
|
}), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
11487
10799
|
ref: resizeCanvas
|
|
11488
10800
|
}), /*#__PURE__*/React__namespace.default.createElement(SelfieCapture, {
|
|
11489
|
-
shouldCapture: state.requestState === 'CAPTURING',
|
|
11490
|
-
onSelfieCaptureStarted: onSelfieCaptureStarted,
|
|
11491
10801
|
onSelfieCaptured: onSelfieCaptured,
|
|
11492
10802
|
onExit: onExit,
|
|
11493
10803
|
timeoutDurationMs: timeoutDurationMs,
|
|
11494
10804
|
guidanceMessage: guidanceMessage,
|
|
11495
10805
|
guidanceSatisfied: guidanceMessage ? false : undefined,
|
|
11496
|
-
onGuidanceSatisfied: onGuidanceSatisfied,
|
|
11497
|
-
onGuidanceNotSatisfied: onGuidanceNotSatisfied,
|
|
11498
|
-
guidesComponent: guidesByRequestState,
|
|
11499
|
-
requireVerticalFaceCentering: requireVerticalFaceCentering,
|
|
11500
10806
|
classNames: classNames,
|
|
11501
10807
|
colors: colors,
|
|
11502
10808
|
verbiage: verbiage,
|
|
11503
10809
|
debugMode: debugMode
|
|
11504
|
-
}), !
|
|
10810
|
+
}), !((_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.capturePreview) === null || _c === void 0 ? void 0 : _c.disabled) && imageUrl && ( /*#__PURE__*/React__namespace.default.createElement(SelfieProgressPreview, {
|
|
11505
10811
|
classNames: classNames.imagePreview,
|
|
11506
10812
|
imageUrl: imageUrl,
|
|
11507
|
-
text: (
|
|
10813
|
+
text: (_d = verbiage.progressPreviewText) !== null && _d !== void 0 ? _d : ''
|
|
11508
10814
|
})));
|
|
11509
10815
|
};
|
|
11510
10816
|
|
|
@@ -11527,7 +10833,7 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
|
11527
10833
|
className: classNames.container
|
|
11528
10834
|
}, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
|
|
11529
10835
|
className: classNames.inner
|
|
11530
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
10836
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Heading$5, {
|
|
11531
10837
|
className: classNames.heading
|
|
11532
10838
|
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(OverlayImageContainer, {
|
|
11533
10839
|
className: classNames.imageContainer
|
|
@@ -11535,7 +10841,7 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
|
11535
10841
|
alt: verbiage.headingText,
|
|
11536
10842
|
src: imageUrl,
|
|
11537
10843
|
className: classNames.image
|
|
11538
|
-
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow
|
|
10844
|
+
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
11539
10845
|
className: classNames.buttonsRow
|
|
11540
10846
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
11541
10847
|
variant: "warning",
|
|
@@ -11551,8 +10857,8 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
|
11551
10857
|
finished: true
|
|
11552
10858
|
}, verbiage.doneBtnText))));
|
|
11553
10859
|
};
|
|
11554
|
-
var Heading$
|
|
11555
|
-
var templateObject_1$
|
|
10860
|
+
var Heading$5 = styled__default.default.h3(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
10861
|
+
var templateObject_1$i;
|
|
11556
10862
|
|
|
11557
10863
|
var FaceLivenessFailure = function FaceLivenessFailure(_a) {
|
|
11558
10864
|
var _b = _a.canRetry,
|
|
@@ -11567,48 +10873,42 @@ var FaceLivenessFailure = function FaceLivenessFailure(_a) {
|
|
|
11567
10873
|
colors = _e === void 0 ? {} : _e,
|
|
11568
10874
|
_f = _a.verbiage,
|
|
11569
10875
|
rawVerbiage = _f === void 0 ? {} : _f;
|
|
11570
|
-
assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/
|
|
10876
|
+
assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/manual_capture.png"));
|
|
11571
10877
|
var verbiage = useTranslations(rawVerbiage, {
|
|
11572
10878
|
headingText: 'Live face not detected, please try again',
|
|
11573
10879
|
retryBtnText: 'Retry',
|
|
11574
10880
|
exitBtnText: 'Exit'
|
|
11575
10881
|
});
|
|
11576
|
-
return /*#__PURE__*/React__namespace.default.createElement(
|
|
10882
|
+
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
11577
10883
|
className: classNames.container
|
|
11578
10884
|
}, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
|
|
11579
10885
|
className: classNames.inner
|
|
11580
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
10886
|
+
}, /*#__PURE__*/React__namespace.default.createElement("h3", {
|
|
10887
|
+
className: classNames.heading
|
|
10888
|
+
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ImageContainer$4, {
|
|
11581
10889
|
className: classNames.imageContainer
|
|
11582
10890
|
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
11583
10891
|
alt: verbiage.headingText,
|
|
11584
10892
|
src: assets.imageUrl,
|
|
11585
10893
|
className: classNames.image
|
|
11586
|
-
})), /*#__PURE__*/React__namespace.default.createElement(
|
|
11587
|
-
className: classNames.heading
|
|
11588
|
-
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
10894
|
+
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
11589
10895
|
className: classNames.buttonsRow
|
|
11590
|
-
}, canRetry && ( /*#__PURE__*/React__namespace.default.createElement(
|
|
11591
|
-
variant: "
|
|
10896
|
+
}, canRetry && ( /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10897
|
+
variant: "warning",
|
|
11592
10898
|
className: classNames.retryBtn,
|
|
11593
10899
|
onClick: onRetryClick,
|
|
11594
10900
|
colors: colors.retryBtn,
|
|
11595
10901
|
finished: true
|
|
11596
|
-
}, verbiage.retryBtnText)), /*#__PURE__*/React__namespace.default.createElement(
|
|
10902
|
+
}, verbiage.retryBtnText)), /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
11597
10903
|
variant: "secondary",
|
|
11598
10904
|
className: classNames.exitBtn,
|
|
11599
10905
|
onClick: onExitClick,
|
|
11600
10906
|
colors: colors.exitBtn,
|
|
11601
10907
|
finished: true
|
|
11602
|
-
}, verbiage.exitBtnText))))
|
|
10908
|
+
}, verbiage.exitBtnText))));
|
|
11603
10909
|
};
|
|
11604
|
-
var ImageContainer$4 = styled__default.default(OverlayImageContainer)(templateObject_1$
|
|
11605
|
-
var
|
|
11606
|
-
var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n background: #f7f6fb;\n"], ["\n background: #f7f6fb;\n"])));
|
|
11607
|
-
var Card = styled__default.default.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n padding: 24px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n margin: auto;\n max-width: 500px;\n"], ["\n background: white;\n border-radius: 8px;\n padding: 24px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n margin: auto;\n max-width: 500px;\n"])));
|
|
11608
|
-
var WideButton = styled__default.default(LoaderButton)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n width: 100%;\n border-radius: 30px;\n"], ["\n width: 100%;\n border-radius: 30px;\n"])));
|
|
11609
|
-
var ButtonsRow = styled__default.default.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"])));
|
|
11610
|
-
var WideBorderButton = styled__default.default(WideButton)(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n color: black;\n background: white;\n border: 1px solid var(--idm-color-secondary-500);\n box-sizing: border-box;\n"], ["\n color: black;\n background: white;\n border: 1px solid var(--idm-color-secondary-500);\n box-sizing: border-box;\n"])));
|
|
11611
|
-
var templateObject_1$i, templateObject_2$e, templateObject_3$d, templateObject_4$7, templateObject_5$3, templateObject_6$3, templateObject_7$2;
|
|
10910
|
+
var ImageContainer$4 = styled__default.default(OverlayImageContainer)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n margin: 0 24px;\n"], ["\n max-height: calc(100vh - 185px);\n margin: 0 24px;\n"])));
|
|
10911
|
+
var templateObject_1$h;
|
|
11612
10912
|
|
|
11613
10913
|
var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
|
|
11614
10914
|
var _b;
|
|
@@ -11649,11 +10949,11 @@ var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
|
|
|
11649
10949
|
finished: true
|
|
11650
10950
|
}, verbiage.retryBtnText)));
|
|
11651
10951
|
};
|
|
11652
|
-
var StyledOverlayInner = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
11653
|
-
var StyledOverlayImageContainer$1 = styled__default.default(OverlayImageContainer)(templateObject_2$
|
|
11654
|
-
var Description$1 = styled__default.default.p(templateObject_3$
|
|
10952
|
+
var StyledOverlayInner = styled__default.default(OverlayInner$2)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
|
|
10953
|
+
var StyledOverlayImageContainer$1 = styled__default.default(OverlayImageContainer)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
10954
|
+
var Description$1 = styled__default.default.p(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
|
|
11655
10955
|
var RetryButton = styled__default.default(LoaderButton)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
11656
|
-
var templateObject_1$
|
|
10956
|
+
var templateObject_1$g, templateObject_2$c, templateObject_3$b, templateObject_4$6;
|
|
11657
10957
|
|
|
11658
10958
|
var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLegacy(_a) {
|
|
11659
10959
|
var onDismissed = _a.onDismissed,
|
|
@@ -11732,9 +11032,273 @@ var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLega
|
|
|
11732
11032
|
}
|
|
11733
11033
|
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
|
|
11734
11034
|
};
|
|
11735
|
-
var StyledGuidanceMessage$1 = styled__default.default(GuidanceMessage)(templateObject_1$
|
|
11736
|
-
var StyledButtonsRow$6 = styled__default.default(ButtonsRow
|
|
11737
|
-
var templateObject_1$
|
|
11035
|
+
var StyledGuidanceMessage$1 = styled__default.default(GuidanceMessage)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n padding: 12px 24px;\n font-weight: normal;\n line-height: 1.5;\n margin-bottom: -30px;\n"], ["\n padding: 12px 24px;\n font-weight: normal;\n line-height: 1.5;\n margin-bottom: -30px;\n"])));
|
|
11036
|
+
var StyledButtonsRow$6 = styled__default.default(ButtonsRow)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n flex-direction: column;\n padding-top: 25px;\n"], ["\n flex-direction: column;\n padding-top: 25px;\n"])));
|
|
11037
|
+
var templateObject_1$f, templateObject_2$b;
|
|
11038
|
+
|
|
11039
|
+
function SelfieCaptureLoadingGraphic(_a) {
|
|
11040
|
+
var _b, _c, _d;
|
|
11041
|
+
var _e = _a.width,
|
|
11042
|
+
width = _e === void 0 ? 840 : _e,
|
|
11043
|
+
_f = _a.height,
|
|
11044
|
+
height = _f === void 0 ? 740 : _f,
|
|
11045
|
+
className = _a.className;
|
|
11046
|
+
var _g = React.useState(1),
|
|
11047
|
+
frame = _g[0],
|
|
11048
|
+
setFrame = _g[1];
|
|
11049
|
+
React.useEffect(function () {
|
|
11050
|
+
var i = setInterval(function () {
|
|
11051
|
+
setFrame(function (n) {
|
|
11052
|
+
return (n + 1) % 10;
|
|
11053
|
+
});
|
|
11054
|
+
}, 750);
|
|
11055
|
+
return function () {
|
|
11056
|
+
clearInterval(i);
|
|
11057
|
+
};
|
|
11058
|
+
}, []);
|
|
11059
|
+
var theme = styled.useTheme();
|
|
11060
|
+
var accentColor = (_d = (_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.loadingGraphicAccentColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
|
|
11061
|
+
return /*#__PURE__*/React__namespace.default.createElement("svg", {
|
|
11062
|
+
width: width,
|
|
11063
|
+
height: height,
|
|
11064
|
+
className: className,
|
|
11065
|
+
viewBox: "0 0 840 740",
|
|
11066
|
+
fill: "none",
|
|
11067
|
+
preserveAspectRatio: "xMidYMax slice",
|
|
11068
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
11069
|
+
}, /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
11070
|
+
clipPath: "url(#clip0_428_1188)"
|
|
11071
|
+
}, /*#__PURE__*/React__namespace.default.createElement("mask", {
|
|
11072
|
+
id: "mask0_428_1188",
|
|
11073
|
+
style: {
|
|
11074
|
+
maskType: 'alpha'
|
|
11075
|
+
},
|
|
11076
|
+
maskUnits: "userSpaceOnUse",
|
|
11077
|
+
x: "0",
|
|
11078
|
+
y: "0",
|
|
11079
|
+
width: "840",
|
|
11080
|
+
height: "740"
|
|
11081
|
+
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
11082
|
+
width: "840",
|
|
11083
|
+
height: "740",
|
|
11084
|
+
fill: "#D9D9D9"
|
|
11085
|
+
})), /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
11086
|
+
mask: "url(#mask0_428_1188)"
|
|
11087
|
+
}, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11088
|
+
d: "M503.781 449.497C491.561 503.154 458.442 541.609 419.561 541.609C380.68 541.609 347.492 503.015 335.272 449.358L344.645 412.916L347.492 402.019H491.561L502.253 443.667L503.225 447.415L503.781 449.497Z",
|
|
11089
|
+
fill: "#D2D4DA"
|
|
11090
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11091
|
+
d: "M574.88 244.97C647.073 163.885 598.921 362.155 558.945 338.928C488.709 298.211 574.88 244.97 574.88 244.97Z",
|
|
11092
|
+
fill: "#F7A69C"
|
|
11093
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11094
|
+
d: "M816.983 742.838C779.698 781.432 736.86 814.612 689.786 841.127C617.161 882.012 534.399 906.862 446.153 911.027C437.335 911.513 428.448 911.721 419.491 911.721C374.986 911.721 331.731 906.446 290.281 896.519C232.514 882.706 178.358 859.8 129.271 829.397C89.9033 805.033 53.9382 775.948 22 742.838L31.512 705.355C45.8842 649.061 90.2505 605.33 146.837 591.795L153.085 590.337L222.447 573.747L241.401 569.235C249.386 567.292 257.023 564.585 264.244 561.114C270.285 558.199 276.047 554.797 281.463 550.91C287.295 546.745 292.78 542.025 297.71 536.819C310.971 522.867 320.761 505.653 325.76 486.286L333.119 457.688L335.064 449.983L335.202 449.358L344.645 412.916L347.422 402.019H491.491L502.253 443.667L503.225 447.415L503.78 449.497V449.983L505.863 457.757L513.223 486.286C520.097 512.802 535.996 535.5 557.589 550.91C569.393 559.448 582.932 565.765 597.581 569.235L615.078 573.4L692.146 591.795C748.732 605.33 793.099 649.061 807.471 705.355L816.983 742.838Z",
|
|
11095
|
+
fill: "#F7A69C"
|
|
11096
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11097
|
+
d: "M503.781 449.497C491.561 503.154 458.442 541.609 419.561 541.609C380.68 541.609 347.492 503.015 335.272 449.358L344.645 412.916L347.492 402.019H491.561L502.253 443.667L503.225 447.415L503.781 449.497Z",
|
|
11098
|
+
fill: "#DC968D"
|
|
11099
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11100
|
+
d: "M264.123 244.97C191.93 163.885 240.082 362.155 280.058 338.928C350.294 298.211 264.123 244.97 264.123 244.97Z",
|
|
11101
|
+
fill: "#F7A69C"
|
|
11102
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11103
|
+
d: "M586.473 187.324C586.473 193.432 586.126 199.402 585.432 205.371C584.876 210.785 582.446 233.9 578.141 263.331C575.781 279.713 572.726 297.969 569.115 316.294C569.115 316.502 569.115 316.78 568.976 316.988C560.159 361.621 547.731 406.045 531.484 422.219C513.154 440.544 498.435 457.203 481.632 469.211C464.83 481.289 446.014 488.786 419.631 488.786C393.247 488.786 374.431 481.289 357.629 469.211C340.896 457.203 326.107 440.544 307.778 422.219C291.531 405.976 279.103 361.482 270.216 316.918C270.216 316.918 270.216 316.71 270.216 316.641C269.105 310.879 268.063 305.118 267.022 299.426C266.605 297.066 266.189 294.706 265.772 292.346C264.036 282.351 262.509 272.563 261.12 263.401C256.121 229.596 253.691 204.122 253.691 204.122C253.136 198.638 252.858 193.016 252.858 187.324C252.858 185.866 252.858 184.408 252.858 182.951C253.205 169.832 255.01 157.06 258.274 144.843C258.412 144.287 258.551 143.732 258.69 143.177C277.228 75.4294 337.425 24.8271 410.049 20.8011C413.243 20.5928 416.368 20.5234 419.631 20.5234C465.733 20.5234 507.461 39.1956 537.663 69.3904C563.769 95.4205 581.266 130.127 585.501 168.79C586.195 174.899 586.542 181.077 586.542 187.324H586.473Z",
|
|
11104
|
+
fill: "#FEAEA5"
|
|
11105
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11106
|
+
d: "M445.867 337.327C445.867 348.849 434.133 358.151 419.622 358.151C405.111 358.151 393.447 348.849 393.447 337.327C393.447 335.939 393.586 334.55 394.002 333.301C396.293 342.88 406.916 350.099 419.622 350.099C432.328 350.099 443.02 342.88 445.312 333.301C445.728 334.62 445.867 335.939 445.867 337.327Z",
|
|
11107
|
+
fill: "#F7A69C"
|
|
11108
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11109
|
+
d: "M817.053 743.187C716.586 847.238 575.642 912 419.561 912C263.481 912 122.467 847.238 22.0698 743.118L31.5818 705.704C45.954 649.34 90.3203 605.61 146.906 592.074L222.655 574.027L241.471 569.515C249.942 567.502 258.135 564.517 265.772 560.699C304.237 601.653 358.879 627.267 419.561 627.267C480.244 627.267 534.886 601.653 573.351 560.699C580.988 564.448 589.111 567.502 597.651 569.515L614.106 573.471L692.216 592.074C748.802 605.61 793.168 649.34 807.471 705.704L817.053 743.187Z",
|
|
11110
|
+
fill: "#6E7174"
|
|
11111
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11112
|
+
d: "M614.106 573.471C597.165 594.018 534.886 659.058 419.561 663.639C286.671 668.984 226.266 579.441 222.655 574.027L241.471 569.515C249.942 567.502 258.134 564.517 265.772 560.699C304.236 601.653 358.879 627.267 419.561 627.267C480.244 627.267 534.886 601.653 573.35 560.699C580.988 564.448 589.111 567.502 597.651 569.515L614.106 573.471Z",
|
|
11113
|
+
fill: "#555A5E"
|
|
11114
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11115
|
+
d: "M249.898 196.144C249.898 249.777 270.317 315.623 270.317 315.623C270.317 315.623 266.862 205.572 314.892 164.108C347.514 135.946 374.019 167.565 417.115 167.565C456.137 167.565 492.558 136.481 525.436 164.108C578.852 208.994 568.738 315.623 568.738 315.623C568.738 315.623 589.157 250.557 589.157 196.144C589.157 76.4319 542.638 20 417.115 20C302.8 20 249.898 75.8365 249.898 196.144Z",
|
|
11116
|
+
fill: "#525252"
|
|
11117
|
+
})), frame >= 8 ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11118
|
+
d: "M565.5 295C565.5 350.583 549.016 400.803 522.488 437.067C495.958 473.332 459.517 495.5 419.5 495.5C379.483 495.5 343.042 473.332 316.512 437.067C289.984 400.803 273.5 350.583 273.5 295C273.5 239.417 289.984 189.197 316.512 152.933C343.042 116.668 379.483 94.5 419.5 94.5C459.517 94.5 495.958 116.668 522.488 152.933C549.016 189.197 565.5 239.417 565.5 295Z",
|
|
11119
|
+
stroke: accentColor,
|
|
11120
|
+
strokeWidth: "5"
|
|
11121
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11122
|
+
cx: "518.5",
|
|
11123
|
+
cy: "438.5",
|
|
11124
|
+
r: "25.5",
|
|
11125
|
+
fill: accentColor
|
|
11126
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11127
|
+
d: "M504 440.5L512 448L531 427",
|
|
11128
|
+
stroke: "white",
|
|
11129
|
+
strokeWidth: "5",
|
|
11130
|
+
strokeLinecap: "round",
|
|
11131
|
+
strokeLinejoin: "round"
|
|
11132
|
+
}))) : ( /*#__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, frame > 5 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11133
|
+
d: "M298.5 182.5L419 164.5L540 182",
|
|
11134
|
+
stroke: "white",
|
|
11135
|
+
strokeWidth: "2",
|
|
11136
|
+
strokeLinecap: "round",
|
|
11137
|
+
strokeLinejoin: "round"
|
|
11138
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11139
|
+
cx: "419",
|
|
11140
|
+
cy: "165",
|
|
11141
|
+
r: "7",
|
|
11142
|
+
fill: "white"
|
|
11143
|
+
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11144
|
+
d: "M565.5 295C565.5 350.583 549.016 400.803 522.488 437.067C495.958 473.332 459.517 495.5 419.5 495.5C379.483 495.5 343.042 473.332 316.512 437.067C289.984 400.803 273.5 350.583 273.5 295C273.5 239.417 289.984 189.197 316.512 152.933C343.042 116.668 379.483 94.5 419.5 94.5C459.517 94.5 495.958 116.668 522.488 152.933C549.016 189.197 565.5 239.417 565.5 295Z",
|
|
11145
|
+
stroke: "white",
|
|
11146
|
+
strokeOpacity: frame > 7 ? 0.8 : frame > 5 ? 0.3 : 0.1,
|
|
11147
|
+
strokeWidth: "5"
|
|
11148
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11149
|
+
d: "M299.939 262.805L419 478.5L538.5 261.5",
|
|
11150
|
+
stroke: "white",
|
|
11151
|
+
strokeWidth: "2",
|
|
11152
|
+
strokeLinecap: "round",
|
|
11153
|
+
strokeLinejoin: "round"
|
|
11154
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11155
|
+
d: "M298.5 182.5L418.871 230.054L540 182",
|
|
11156
|
+
stroke: "white",
|
|
11157
|
+
strokeWidth: "2",
|
|
11158
|
+
strokeLinecap: "round",
|
|
11159
|
+
strokeLinejoin: "round"
|
|
11160
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11161
|
+
d: "M298.5 182.5L299.939 262.805",
|
|
11162
|
+
stroke: "white",
|
|
11163
|
+
strokeWidth: "2",
|
|
11164
|
+
strokeLinecap: "round",
|
|
11165
|
+
strokeLinejoin: "round"
|
|
11166
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11167
|
+
d: "M540.001 182L538.501 261.5",
|
|
11168
|
+
stroke: "white",
|
|
11169
|
+
strokeWidth: "2",
|
|
11170
|
+
strokeLinecap: "round",
|
|
11171
|
+
strokeLinejoin: "round"
|
|
11172
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11173
|
+
cx: "299.914",
|
|
11174
|
+
cy: "182",
|
|
11175
|
+
r: "7",
|
|
11176
|
+
fill: "white"
|
|
11177
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11178
|
+
cx: "540",
|
|
11179
|
+
cy: "182",
|
|
11180
|
+
r: "7",
|
|
11181
|
+
fill: "white"
|
|
11182
|
+
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11183
|
+
d: "M418.828 230L419 342.5",
|
|
11184
|
+
stroke: "white",
|
|
11185
|
+
strokeWidth: "2",
|
|
11186
|
+
strokeLinecap: "round",
|
|
11187
|
+
strokeLinejoin: "round",
|
|
11188
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11189
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11190
|
+
d: "M300 263.001L419 342.501",
|
|
11191
|
+
stroke: "white",
|
|
11192
|
+
strokeWidth: "2",
|
|
11193
|
+
strokeLinecap: "round",
|
|
11194
|
+
strokeLinejoin: "round",
|
|
11195
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11196
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11197
|
+
d: "M538.5 261.5L419 342.5",
|
|
11198
|
+
stroke: "white",
|
|
11199
|
+
strokeWidth: "2",
|
|
11200
|
+
strokeLinecap: "round",
|
|
11201
|
+
strokeLinejoin: "round",
|
|
11202
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11203
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11204
|
+
d: "M301.5 409L419 342.5",
|
|
11205
|
+
stroke: "white",
|
|
11206
|
+
strokeWidth: "2",
|
|
11207
|
+
strokeLinecap: "round",
|
|
11208
|
+
strokeLinejoin: "round",
|
|
11209
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11210
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11211
|
+
d: "M536.5 410L419 342.5",
|
|
11212
|
+
stroke: "white",
|
|
11213
|
+
strokeWidth: "2",
|
|
11214
|
+
strokeLinecap: "round",
|
|
11215
|
+
strokeLinejoin: "round",
|
|
11216
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11217
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11218
|
+
d: "M300 263L419 230",
|
|
11219
|
+
stroke: "white",
|
|
11220
|
+
strokeWidth: "2",
|
|
11221
|
+
strokeLinecap: "round",
|
|
11222
|
+
strokeLinejoin: "round",
|
|
11223
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11224
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11225
|
+
d: "M538.5 261.5L419 230",
|
|
11226
|
+
stroke: "white",
|
|
11227
|
+
strokeWidth: "2",
|
|
11228
|
+
strokeLinecap: "round",
|
|
11229
|
+
strokeLinejoin: "round",
|
|
11230
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11231
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11232
|
+
cx: "419",
|
|
11233
|
+
cy: "229.971",
|
|
11234
|
+
r: "7",
|
|
11235
|
+
fill: "white"
|
|
11236
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11237
|
+
cx: "419",
|
|
11238
|
+
cy: "342.4",
|
|
11239
|
+
r: "7",
|
|
11240
|
+
fill: "white"
|
|
11241
|
+
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11242
|
+
d: "M538.5 261.5L536.5 410",
|
|
11243
|
+
stroke: "white",
|
|
11244
|
+
strokeWidth: "2",
|
|
11245
|
+
strokeLinecap: "round",
|
|
11246
|
+
strokeLinejoin: "round",
|
|
11247
|
+
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
11248
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11249
|
+
d: "M419 478.5L536.5 410",
|
|
11250
|
+
stroke: "white",
|
|
11251
|
+
strokeWidth: "2",
|
|
11252
|
+
strokeLinecap: "round",
|
|
11253
|
+
strokeLinejoin: "round",
|
|
11254
|
+
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
11255
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11256
|
+
cx: "537",
|
|
11257
|
+
cy: "263",
|
|
11258
|
+
r: "7",
|
|
11259
|
+
fill: "white"
|
|
11260
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11261
|
+
cx: "537",
|
|
11262
|
+
cy: "409",
|
|
11263
|
+
r: "7",
|
|
11264
|
+
fill: "white"
|
|
11265
|
+
}))), frame > 1 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11266
|
+
d: "M301.501 409L300.001 263",
|
|
11267
|
+
stroke: "white",
|
|
11268
|
+
strokeWidth: "2",
|
|
11269
|
+
strokeLinecap: "round",
|
|
11270
|
+
strokeLinejoin: "round",
|
|
11271
|
+
strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
|
|
11272
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11273
|
+
d: "M301.501 409L419.001 478.5",
|
|
11274
|
+
stroke: "white",
|
|
11275
|
+
strokeWidth: "2",
|
|
11276
|
+
strokeLinecap: "round",
|
|
11277
|
+
strokeLinejoin: "round",
|
|
11278
|
+
strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
|
|
11279
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11280
|
+
cx: "419",
|
|
11281
|
+
cy: "477.576",
|
|
11282
|
+
r: "7",
|
|
11283
|
+
fill: "white"
|
|
11284
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11285
|
+
cx: "301.914",
|
|
11286
|
+
cy: "263",
|
|
11287
|
+
r: "7",
|
|
11288
|
+
fill: "white"
|
|
11289
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11290
|
+
cx: "301.444",
|
|
11291
|
+
cy: "409",
|
|
11292
|
+
r: "7",
|
|
11293
|
+
fill: "white"
|
|
11294
|
+
})))))), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
|
|
11295
|
+
id: "clip0_428_1188"
|
|
11296
|
+
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
11297
|
+
width: "840",
|
|
11298
|
+
height: "740",
|
|
11299
|
+
fill: "white"
|
|
11300
|
+
}))));
|
|
11301
|
+
}
|
|
11738
11302
|
|
|
11739
11303
|
var legacyInstructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png");
|
|
11740
11304
|
var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDefault(_a) {
|
|
@@ -11848,21 +11412,21 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
|
|
|
11848
11412
|
}
|
|
11849
11413
|
}, verbiage.continueText))))));
|
|
11850
11414
|
};
|
|
11851
|
-
var OverlayInner = styled__default.default.div(templateObject_1$
|
|
11415
|
+
var OverlayInner = styled__default.default.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"], ["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"])), function (props) {
|
|
11852
11416
|
var _a, _b, _c, _d;
|
|
11853
11417
|
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.backgroundColor) !== null && _d !== void 0 ? _d : '#ecedf3';
|
|
11854
11418
|
}, function (props) {
|
|
11855
11419
|
var _a, _b, _c, _d;
|
|
11856
11420
|
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.textColor) !== null && _d !== void 0 ? _d : 'black';
|
|
11857
11421
|
});
|
|
11858
|
-
var OverlayHeader = styled__default.default.div(templateObject_2$
|
|
11422
|
+
var OverlayHeader = styled__default.default.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"])), function (props) {
|
|
11859
11423
|
var _a;
|
|
11860
11424
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
11861
11425
|
}, function (props) {
|
|
11862
11426
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
11863
11427
|
});
|
|
11864
|
-
var StyledGuidanceMessage = styled__default.default(GuidanceMessage)(templateObject_3$
|
|
11865
|
-
var StyledButtonsRow$5 = styled__default.default(ButtonsRow
|
|
11428
|
+
var StyledGuidanceMessage = styled__default.default(GuidanceMessage)(templateObject_3$a || (templateObject_3$a = __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"])));
|
|
11429
|
+
var StyledButtonsRow$5 = styled__default.default(ButtonsRow)(templateObject_4$5 || (templateObject_4$5 = __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) {
|
|
11866
11430
|
var _a, _b, _c, _d;
|
|
11867
11431
|
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';
|
|
11868
11432
|
}, function (props) {
|
|
@@ -11897,7 +11461,7 @@ var ContinueButton = styled__default.default(LoaderButton)(templateObject_15 ||
|
|
|
11897
11461
|
var _a, _b, _c, _d, _e, _f;
|
|
11898
11462
|
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, ";") : '';
|
|
11899
11463
|
});
|
|
11900
|
-
var templateObject_1$
|
|
11464
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$a, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
|
|
11901
11465
|
|
|
11902
11466
|
var components = {
|
|
11903
11467
|
"default": SelfieCaptureLoadingOverlayDefault,
|
|
@@ -11934,44 +11498,40 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
11934
11498
|
releaseCameraAccessOnExit = _k === void 0 ? true : _k,
|
|
11935
11499
|
_l = _a.silentFallback,
|
|
11936
11500
|
silentFallback = _l === void 0 ? false : _l,
|
|
11937
|
-
|
|
11938
|
-
|
|
11939
|
-
|
|
11940
|
-
|
|
11941
|
-
|
|
11942
|
-
|
|
11943
|
-
|
|
11944
|
-
|
|
11945
|
-
|
|
11946
|
-
|
|
11947
|
-
|
|
11948
|
-
|
|
11949
|
-
|
|
11950
|
-
|
|
11951
|
-
|
|
11952
|
-
|
|
11953
|
-
|
|
11954
|
-
|
|
11955
|
-
|
|
11956
|
-
var _u = React.
|
|
11957
|
-
|
|
11958
|
-
|
|
11959
|
-
|
|
11960
|
-
|
|
11961
|
-
|
|
11962
|
-
|
|
11963
|
-
|
|
11964
|
-
|
|
11965
|
-
setRetryCount = _w[1];
|
|
11966
|
-
var _x = React.useState('LOADING'),
|
|
11967
|
-
captureState = _x[0],
|
|
11968
|
-
setCaptureState = _x[1];
|
|
11501
|
+
_m = _a.assets,
|
|
11502
|
+
assets = _m === void 0 ? {} : _m,
|
|
11503
|
+
_o = _a.classNames,
|
|
11504
|
+
classNames = _o === void 0 ? {} : _o,
|
|
11505
|
+
_p = _a.colors,
|
|
11506
|
+
colors = _p === void 0 ? {} : _p,
|
|
11507
|
+
_q = _a.verbiage,
|
|
11508
|
+
verbiage = _q === void 0 ? {} : _q,
|
|
11509
|
+
_r = _a.debugMode,
|
|
11510
|
+
debugMode = _r === void 0 ? false : _r;
|
|
11511
|
+
var _s = React.useContext(SubmissionContext),
|
|
11512
|
+
submissionResponse = _s.submissionResponse,
|
|
11513
|
+
livenessCheckRequest = _s.livenessCheckRequest,
|
|
11514
|
+
setSelfieImage = _s.setSelfieImage,
|
|
11515
|
+
logSelfieCaptureAttempt = _s.logSelfieCaptureAttempt;
|
|
11516
|
+
var _t = React.useContext(CameraStateContext),
|
|
11517
|
+
cameraAccessDenied = _t.cameraAccessDenied,
|
|
11518
|
+
requestCameraAccess = _t.requestCameraAccess,
|
|
11519
|
+
releaseCameraAccess = _t.releaseCameraAccess;
|
|
11520
|
+
var _u = React.useState(''),
|
|
11521
|
+
faceCropImageUrl = _u[0],
|
|
11522
|
+
setFaceCropImageUrl = _u[1];
|
|
11523
|
+
var _v = React.useState(0),
|
|
11524
|
+
retryCount = _v[0],
|
|
11525
|
+
setRetryCount = _v[1];
|
|
11526
|
+
var _w = React.useState('LOADING'),
|
|
11527
|
+
captureState = _w[0],
|
|
11528
|
+
setCaptureState = _w[1];
|
|
11969
11529
|
var captureStartedAt = React.useRef();
|
|
11970
11530
|
var captureEndedAt = React.useRef();
|
|
11971
11531
|
var operationStartedAt = React.useRef();
|
|
11972
|
-
var
|
|
11973
|
-
start =
|
|
11974
|
-
stop =
|
|
11532
|
+
var _x = React.useContext(SelfieGuidanceModelsContext),
|
|
11533
|
+
start = _x.start,
|
|
11534
|
+
stop = _x.stop;
|
|
11975
11535
|
React.useEffect(function () {
|
|
11976
11536
|
operationStartedAt.current = new Date();
|
|
11977
11537
|
}, []);
|
|
@@ -12019,9 +11579,9 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
12019
11579
|
setCaptureState('FAILED');
|
|
12020
11580
|
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout(submissionResponse, livenessCheckRequest);
|
|
12021
11581
|
}, [onTimeout, livenessCheckRequest, submissionResponse]);
|
|
12022
|
-
var
|
|
12023
|
-
attempt =
|
|
12024
|
-
setAttempt =
|
|
11582
|
+
var _y = React.useState(0),
|
|
11583
|
+
attempt = _y[0],
|
|
11584
|
+
setAttempt = _y[1];
|
|
12025
11585
|
var onExitCallback = React.useCallback(function () {
|
|
12026
11586
|
setAttempt(function (n) {
|
|
12027
11587
|
return n + 1;
|
|
@@ -12074,9 +11634,6 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
12074
11634
|
onExit: onExitCallback,
|
|
12075
11635
|
timeoutDurationMs: timeoutDurationMs,
|
|
12076
11636
|
silentFallback: silentFallback,
|
|
12077
|
-
guidesComponent: guidesComponent,
|
|
12078
|
-
disableCapturePreview: disableCapturePreview,
|
|
12079
|
-
requireVerticalFaceCentering: requireVerticalFaceCentering,
|
|
12080
11637
|
classNames: classNames.capture,
|
|
12081
11638
|
colors: colors,
|
|
12082
11639
|
verbiage: verbiage,
|
|
@@ -12275,11 +11832,11 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
|
|
|
12275
11832
|
}
|
|
12276
11833
|
}, verbiage.captureBtnText)))));
|
|
12277
11834
|
};
|
|
12278
|
-
var Inner = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
12279
|
-
var Heading$4 = styled__default.default.h3(templateObject_2$
|
|
12280
|
-
var Description = styled__default.default.p(templateObject_3$
|
|
12281
|
-
var StyledButtonsRow$4 = styled__default.default(ButtonsRow
|
|
12282
|
-
var templateObject_1$
|
|
11835
|
+
var Inner = styled__default.default(OverlayInner$2)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
11836
|
+
var Heading$4 = styled__default.default.h3(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
11837
|
+
var Description = styled__default.default.p(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
11838
|
+
var StyledButtonsRow$4 = styled__default.default(ButtonsRow)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
11839
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$9, templateObject_4$4;
|
|
12283
11840
|
|
|
12284
11841
|
var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_a) {
|
|
12285
11842
|
var documents = _a.documents,
|
|
@@ -12423,7 +11980,7 @@ function convertSVGtoImg(svgData_1) {
|
|
|
12423
11980
|
});
|
|
12424
11981
|
}
|
|
12425
11982
|
|
|
12426
|
-
var SignaturePaperBacking = styled__default.default.div(templateObject_1$
|
|
11983
|
+
var SignaturePaperBacking = styled__default.default.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n ", "\n ", "\n"], ["\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n ", "\n ", "\n"])), function (props) {
|
|
12427
11984
|
var _a, _b;
|
|
12428
11985
|
return ((_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.background) ? "background: ".concat((_b = props.theme.signatureCapture) === null || _b === void 0 ? void 0 : _b.background, ";") : "";
|
|
12429
11986
|
}, function (props) {
|
|
@@ -12433,8 +11990,8 @@ var SignaturePaperBacking = styled__default.default.div(templateObject_1$d || (t
|
|
|
12433
11990
|
var _a, _b;
|
|
12434
11991
|
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, ";") : "";
|
|
12435
11992
|
});
|
|
12436
|
-
var SignatureCanvasContainer = styled__default.default.div(templateObject_2$
|
|
12437
|
-
var SignaturePad = styled__default.default.div(templateObject_3$
|
|
11993
|
+
var SignatureCanvasContainer = styled__default.default.div(templateObject_2$8 || (templateObject_2$8 = __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"])));
|
|
11994
|
+
var SignaturePad = styled__default.default.div(templateObject_3$8 || (templateObject_3$8 = __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) {
|
|
12438
11995
|
var _a, _b, _c;
|
|
12439
11996
|
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)';
|
|
12440
11997
|
}, function (props) {
|
|
@@ -12444,8 +12001,8 @@ var SignaturePad = styled__default.default.div(templateObject_3$9 || (templateOb
|
|
|
12444
12001
|
var _a, _b, _c;
|
|
12445
12002
|
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';
|
|
12446
12003
|
});
|
|
12447
|
-
var SignatureButtonsContainer = styled__default.default(ButtonsRow
|
|
12448
|
-
var templateObject_1$
|
|
12004
|
+
var SignatureButtonsContainer = styled__default.default(ButtonsRow)(templateObject_4$3 || (templateObject_4$3 = __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"])));
|
|
12005
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$8, templateObject_4$3;
|
|
12449
12006
|
|
|
12450
12007
|
var SignatureCapture = function SignatureCapture(_a) {
|
|
12451
12008
|
var _b;
|
|
@@ -12516,8 +12073,8 @@ var SignatureCapture = function SignatureCapture(_a) {
|
|
|
12516
12073
|
finished: true
|
|
12517
12074
|
}, verbiage.acceptBtnText)))));
|
|
12518
12075
|
};
|
|
12519
|
-
var AcceptBtn$1 = styled__default.default(LoaderButton)(templateObject_1$
|
|
12520
|
-
var templateObject_1$
|
|
12076
|
+
var AcceptBtn$1 = styled__default.default(LoaderButton)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
|
|
12077
|
+
var templateObject_1$b;
|
|
12521
12078
|
|
|
12522
12079
|
var useVideoRecorder = function useVideoRecorder(camera, audioStream, mergeAVStreams) {
|
|
12523
12080
|
if (mergeAVStreams === void 0) {
|
|
@@ -12874,8 +12431,8 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
|
|
|
12874
12431
|
ref: outputCanvas
|
|
12875
12432
|
}));
|
|
12876
12433
|
};
|
|
12877
|
-
var AcceptBtn = styled__default.default(LoaderButton)(templateObject_1$
|
|
12878
|
-
var templateObject_1$
|
|
12434
|
+
var AcceptBtn = styled__default.default(LoaderButton)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
|
|
12435
|
+
var templateObject_1$a;
|
|
12879
12436
|
|
|
12880
12437
|
var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
12881
12438
|
var videoUrl = _a.videoUrl,
|
|
@@ -12914,7 +12471,7 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
|
12914
12471
|
style: {
|
|
12915
12472
|
display: 'none'
|
|
12916
12473
|
}
|
|
12917
|
-
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow
|
|
12474
|
+
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
12918
12475
|
className: classNames.buttonsRow
|
|
12919
12476
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
12920
12477
|
variant: "warning",
|
|
@@ -12930,8 +12487,8 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
|
12930
12487
|
finished: true
|
|
12931
12488
|
}, verbiage.doneBtnText))));
|
|
12932
12489
|
};
|
|
12933
|
-
var StyledVideo$1 = styled__default.default.video(templateObject_1$
|
|
12934
|
-
var templateObject_1$
|
|
12490
|
+
var StyledVideo$1 = styled__default.default.video(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n margin-left: auto;\n margin-right: auto;\n max-width: 100%;\n"], ["\n margin-left: auto;\n margin-right: auto;\n max-width: 100%;\n"])));
|
|
12491
|
+
var templateObject_1$9;
|
|
12935
12492
|
|
|
12936
12493
|
var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
12937
12494
|
var _b;
|
|
@@ -13110,91 +12667,18 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
|
13110
12667
|
}));
|
|
13111
12668
|
};
|
|
13112
12669
|
|
|
13113
|
-
var IdCardGuideImageContainer = styled__default.default(IdCardBorder)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n position: relative;\n aspect-ratio: 3.375 / 2.125;\n ", "\n box-sizing: border-box;\n"], ["\n position: relative;\n aspect-ratio: 3.375 / 2.125;\n ", "\n box-sizing: border-box;\n"])), function (props) {
|
|
13114
|
-
return props.$isVisible ? '' : 'opacity: 0;';
|
|
13115
|
-
});
|
|
13116
|
-
var IdCardGuideImage = styled__default.default.img(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n width: 100%;\n max-height: 100%;\n ", "\n"], ["\n width: 100%;\n max-height: 100%;\n ", "\n"])), function (props) {
|
|
13117
|
-
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
13118
|
-
});
|
|
13119
|
-
function IdCardBorder(_a) {
|
|
13120
|
-
var children = _a.children,
|
|
13121
|
-
_b = _a.status,
|
|
13122
|
-
status = _b === void 0 ? 'ready' : _b,
|
|
13123
|
-
_c = _a.borderWidth,
|
|
13124
|
-
borderWidth = _c === void 0 ? 20 : _c,
|
|
13125
|
-
_d = _a.borderRadius,
|
|
13126
|
-
borderRadius = _d === void 0 ? 25 : _d,
|
|
13127
|
-
_e = _a.borderColor,
|
|
13128
|
-
borderColor = _e === void 0 ? 'white' : _e,
|
|
13129
|
-
props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor"]);
|
|
13130
|
-
var dashArray = 12;
|
|
13131
|
-
var _f = React.useState(0),
|
|
13132
|
-
dashOffset = _f[0],
|
|
13133
|
-
setDashOffset = _f[1];
|
|
13134
|
-
React.useEffect(function () {
|
|
13135
|
-
if (status !== 'capturing') {
|
|
13136
|
-
setDashOffset(0);
|
|
13137
|
-
return;
|
|
13138
|
-
}
|
|
13139
|
-
var interval = setInterval(function () {
|
|
13140
|
-
setDashOffset(function (n) {
|
|
13141
|
-
return (n - 1) % (dashArray * 2);
|
|
13142
|
-
});
|
|
13143
|
-
}, 10);
|
|
13144
|
-
return function () {
|
|
13145
|
-
clearInterval(interval);
|
|
13146
|
-
};
|
|
13147
|
-
}, [status]);
|
|
13148
|
-
var _g = React.useState('0'),
|
|
13149
|
-
width = _g[0],
|
|
13150
|
-
setWidth = _g[1];
|
|
13151
|
-
React.useLayoutEffect(function () {
|
|
13152
|
-
setTimeout(function () {
|
|
13153
|
-
setWidth('100%');
|
|
13154
|
-
}, 0);
|
|
13155
|
-
}, []);
|
|
13156
|
-
return /*#__PURE__*/React__namespace.default.createElement("div", _assign({}, props), children, /*#__PURE__*/React__namespace.default.createElement(SvgOverlay, {
|
|
13157
|
-
width: width,
|
|
13158
|
-
height: "100%",
|
|
13159
|
-
fill: "none",
|
|
13160
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
13161
|
-
}, /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
|
|
13162
|
-
id: "round-corner"
|
|
13163
|
-
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
13164
|
-
x: "0",
|
|
13165
|
-
y: "0",
|
|
13166
|
-
width: "100%",
|
|
13167
|
-
height: "100%",
|
|
13168
|
-
rx: borderRadius,
|
|
13169
|
-
ry: borderRadius
|
|
13170
|
-
}))), /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
13171
|
-
x: "0",
|
|
13172
|
-
y: "0",
|
|
13173
|
-
width: "100%",
|
|
13174
|
-
height: "100%",
|
|
13175
|
-
rx: borderRadius,
|
|
13176
|
-
ry: borderRadius,
|
|
13177
|
-
stroke: borderColor,
|
|
13178
|
-
strokeWidth: borderWidth,
|
|
13179
|
-
clipPath: "url(#round-corner)",
|
|
13180
|
-
strokeDasharray: status === 'disabled' ? '0' : dashArray,
|
|
13181
|
-
strokeDashoffset: dashOffset
|
|
13182
|
-
})));
|
|
13183
|
-
}
|
|
13184
|
-
var SvgOverlay = styled__default.default.svg(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"])));
|
|
13185
|
-
var templateObject_1$9, templateObject_2$8, templateObject_3$8;
|
|
13186
|
-
|
|
13187
12670
|
var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
13188
12671
|
var _b;
|
|
13189
|
-
var
|
|
13190
|
-
|
|
13191
|
-
|
|
13192
|
-
|
|
13193
|
-
borderWidth =
|
|
13194
|
-
|
|
12672
|
+
var className = _a.className,
|
|
12673
|
+
imageWidth = _a.imageWidth,
|
|
12674
|
+
imageHeight = _a.imageHeight,
|
|
12675
|
+
_c = _a.borderWidth,
|
|
12676
|
+
borderWidth = _c === void 0 ? 4 : _c,
|
|
12677
|
+
_d = _a.assets,
|
|
12678
|
+
assets = _d === void 0 ? {} : _d;
|
|
13195
12679
|
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
13196
|
-
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-
|
|
13197
|
-
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-
|
|
12680
|
+
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
|
|
12681
|
+
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
|
|
13198
12682
|
var isMirrored = !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing);
|
|
13199
12683
|
var _e = React.useState(1),
|
|
13200
12684
|
transitionTime = _e[0],
|
|
@@ -13223,36 +12707,39 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
|
13223
12707
|
clearTimeout(timeout);
|
|
13224
12708
|
};
|
|
13225
12709
|
}, []);
|
|
13226
|
-
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(
|
|
13227
|
-
|
|
13228
|
-
|
|
13229
|
-
|
|
13230
|
-
borderColor: borderColor,
|
|
12710
|
+
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(FlipImage, {
|
|
12711
|
+
src: assets.frontImageUrl,
|
|
12712
|
+
alt: "",
|
|
12713
|
+
className: className,
|
|
13231
12714
|
"$transforms": frontTransforms.join(' '),
|
|
13232
12715
|
"$transitionTime": transitionTime,
|
|
13233
|
-
"$
|
|
13234
|
-
|
|
13235
|
-
|
|
13236
|
-
|
|
13237
|
-
|
|
13238
|
-
|
|
13239
|
-
className:
|
|
13240
|
-
status: "disabled",
|
|
13241
|
-
borderWidth: borderWidth,
|
|
13242
|
-
borderColor: borderColor,
|
|
12716
|
+
"$borderWidth": borderWidth,
|
|
12717
|
+
"$imageWidth": imageWidth,
|
|
12718
|
+
"$imageHeight": imageHeight
|
|
12719
|
+
}), /*#__PURE__*/React__namespace.default.createElement(FlipImage, {
|
|
12720
|
+
src: assets.backImageUrl,
|
|
12721
|
+
alt: "",
|
|
12722
|
+
className: className,
|
|
13243
12723
|
"$transforms": backTransforms.join(' '),
|
|
13244
12724
|
"$transitionTime": transitionTime,
|
|
13245
|
-
"$
|
|
13246
|
-
|
|
13247
|
-
|
|
13248
|
-
|
|
13249
|
-
|
|
13250
|
-
})));
|
|
12725
|
+
"$borderWidth": borderWidth,
|
|
12726
|
+
"$imageWidth": imageWidth,
|
|
12727
|
+
"$imageHeight": imageHeight,
|
|
12728
|
+
"$isBack": true
|
|
12729
|
+
}));
|
|
13251
12730
|
};
|
|
13252
|
-
var
|
|
12731
|
+
var FlipImage = styled__default.default.img(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: ", ";\n display: block;\n top: ", "px;\n width: ", "px;\n height: ", "px;\n"], ["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: ", ";\n display: block;\n top: ", "px;\n width: ", "px;\n height: ", "px;\n"])), function (props) {
|
|
13253
12732
|
return props.$transitionTime;
|
|
13254
12733
|
}, function (props) {
|
|
13255
12734
|
return props.$transforms;
|
|
12735
|
+
}, function (props) {
|
|
12736
|
+
return props.$isBack ? 'absolute' : 'relative';
|
|
12737
|
+
}, function (props) {
|
|
12738
|
+
return -props.$borderWidth / 2;
|
|
12739
|
+
}, function (props) {
|
|
12740
|
+
return props.$imageWidth;
|
|
12741
|
+
}, function (props) {
|
|
12742
|
+
return props.$imageHeight + props.$borderWidth;
|
|
13256
12743
|
});
|
|
13257
12744
|
var templateObject_1$8;
|
|
13258
12745
|
|
|
@@ -13262,84 +12749,98 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
|
|
|
13262
12749
|
requestedAction = _y === void 0 ? 'SHOW_ID_FRONT' : _y,
|
|
13263
12750
|
_z = _a.satisfied,
|
|
13264
12751
|
satisfied = _z === void 0 ? false : _z,
|
|
13265
|
-
_0 = _a.faceGuideStatus,
|
|
13266
|
-
faceGuideStatus = _0 === void 0 ? 'success' : _0,
|
|
13267
12752
|
faceGuideBorderWidth = _a.faceGuideBorderWidth,
|
|
13268
12753
|
faceGuideBorderColor = _a.faceGuideBorderColor,
|
|
13269
|
-
_1 = _a.idCardGuideStatus,
|
|
13270
|
-
idCardGuideStatus = _1 === void 0 ? 'ready' : _1,
|
|
13271
12754
|
idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
|
|
13272
12755
|
idCardGuideBorderColor = _a.idCardGuideBorderColor,
|
|
13273
|
-
|
|
13274
|
-
assets =
|
|
13275
|
-
|
|
13276
|
-
classNames =
|
|
13277
|
-
|
|
13278
|
-
rawVerbiage =
|
|
12756
|
+
_0 = _a.assets,
|
|
12757
|
+
assets = _0 === void 0 ? {} : _0,
|
|
12758
|
+
_1 = _a.classNames,
|
|
12759
|
+
classNames = _1 === void 0 ? {} : _1,
|
|
12760
|
+
_2 = _a.verbiage,
|
|
12761
|
+
rawVerbiage = _2 === void 0 ? {} : _2;
|
|
13279
12762
|
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
13280
12763
|
var imageRef = React.useRef(null);
|
|
13281
|
-
|
|
13282
|
-
|
|
12764
|
+
var _3 = React.useState(0),
|
|
12765
|
+
imageWidth = _3[0],
|
|
12766
|
+
setImageWidth = _3[1];
|
|
12767
|
+
var _4 = React.useState(0),
|
|
12768
|
+
imageHeight = _4[0],
|
|
12769
|
+
setImageHeight = _4[1];
|
|
12770
|
+
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
|
|
12771
|
+
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
|
|
13283
12772
|
var verbiage = useTranslations(rawVerbiage, {
|
|
13284
12773
|
idFrontInstructionText: 'Display the front of your ID card...',
|
|
13285
12774
|
idBackInstructionText: 'Display the back of your ID card...',
|
|
13286
|
-
flipIdInstructionText: 'Please flip your ID card...'
|
|
13287
|
-
verifyLivenessInstructionText: 'Performing facial recognition, please hold still...'
|
|
12775
|
+
flipIdInstructionText: 'Please flip your ID card...'
|
|
13288
12776
|
});
|
|
13289
|
-
var instructionText = requestedAction === '
|
|
12777
|
+
var instructionText = requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : requestedAction === 'FLIP_ID' ? verbiage.flipIdInstructionText : verbiage.idBackInstructionText;
|
|
13290
12778
|
var theme = styled.useTheme();
|
|
13291
|
-
if (faceGuideBorderWidth === undefined) faceGuideBorderWidth = (_d = (_c = (_b = theme.idVideoCapture) === null || _b === void 0 ? void 0 : _b.faceGuides) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d :
|
|
13292
|
-
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 : '
|
|
13293
|
-
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 :
|
|
13294
|
-
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 : '
|
|
12779
|
+
if (faceGuideBorderWidth === undefined) faceGuideBorderWidth = (_d = (_c = (_b = theme.idVideoCapture) === null || _b === void 0 ? void 0 : _b.faceGuides) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 4;
|
|
12780
|
+
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 : 'white';
|
|
12781
|
+
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 : 4;
|
|
12782
|
+
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 : 'white';
|
|
12783
|
+
var captureImageSize = function captureImageSize() {
|
|
12784
|
+
var _a, _b, _c, _d;
|
|
12785
|
+
if (!imageWidth) setImageWidth((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0);
|
|
12786
|
+
if (!imageHeight) setImageHeight((_d = (_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0);
|
|
12787
|
+
};
|
|
13295
12788
|
return /*#__PURE__*/React__namespace.default.createElement(Container, {
|
|
13296
12789
|
className: classNames.container
|
|
13297
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
13298
|
-
className: classNames.faceGuideContainer
|
|
13299
|
-
}, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask, {
|
|
12790
|
+
}, /*#__PURE__*/React__namespace.default.createElement(FaceGuide, {
|
|
13300
12791
|
className: classNames.faceGuide,
|
|
13301
|
-
|
|
13302
|
-
|
|
13303
|
-
|
|
13304
|
-
})), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideContainer, {
|
|
12792
|
+
"$borderWidth": faceGuideBorderWidth,
|
|
12793
|
+
"$borderColor": faceGuideBorderColor
|
|
12794
|
+
}), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideContainer, {
|
|
13305
12795
|
className: classNames.idCardGuideContainer
|
|
13306
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
13307
|
-
className: classNames.idCardGuideInner
|
|
13308
|
-
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImageContainer, {
|
|
13309
|
-
className: classNames.idCardGuideImageContainer,
|
|
13310
|
-
status: requestedAction === 'VERIFY_LIVENESS' ? 'disabled' : idCardGuideStatus,
|
|
13311
|
-
borderWidth: idCardGuideBorderWidth,
|
|
13312
|
-
borderColor: idCardGuideBorderColor,
|
|
13313
|
-
"$isVisible": requestedAction !== 'FLIP_ID'
|
|
13314
|
-
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
13315
|
-
alt: "",
|
|
13316
|
-
ref: imageRef,
|
|
13317
|
-
className: classNames.idCardGuideImage,
|
|
13318
|
-
"$isMirrored": !((_t = cameraRef.current) === null || _t === void 0 ? void 0 : _t.isRearFacing),
|
|
13319
|
-
src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl
|
|
13320
|
-
})), requestedAction === 'FLIP_ID' && ( /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureFlipIdPrompt, {
|
|
13321
|
-
assets: assets,
|
|
13322
|
-
classNames: classNames.flipIdPrompt,
|
|
13323
|
-
borderWidth: idCardGuideBorderWidth,
|
|
13324
|
-
borderColor: idCardGuideBorderColor
|
|
13325
|
-
}))), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInstructionsContainer, {
|
|
12796
|
+
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInstructionsContainer, {
|
|
13326
12797
|
className: classNames.idCardGuideInstructionsContainer
|
|
13327
12798
|
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInstructions, {
|
|
13328
12799
|
className: classNames.idCardGuideInstructions,
|
|
13329
|
-
"$textColor": (
|
|
13330
|
-
"$background": (
|
|
13331
|
-
}, instructionText))
|
|
12800
|
+
"$textColor": (_u = (_t = theme.idVideoCapture) === null || _t === void 0 ? void 0 : _t.idCardGuides) === null || _u === void 0 ? void 0 : _u.instructionsTextColor,
|
|
12801
|
+
"$background": (_w = (_v = theme.idVideoCapture) === null || _v === void 0 ? void 0 : _v.idCardGuides) === null || _w === void 0 ? void 0 : _w.instructionsBackgroundColor
|
|
12802
|
+
}, instructionText)), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImageContainer, {
|
|
12803
|
+
"$borderWidth": idCardGuideBorderWidth,
|
|
12804
|
+
"$borderColor": idCardGuideBorderColor,
|
|
12805
|
+
className: classNames.idCardGuideImageContainer
|
|
12806
|
+
}, requestedAction === 'FLIP_ID' ? ( /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureFlipIdPrompt, {
|
|
12807
|
+
assets: assets,
|
|
12808
|
+
imageWidth: imageWidth,
|
|
12809
|
+
imageHeight: imageHeight,
|
|
12810
|
+
borderWidth: idCardGuideBorderWidth,
|
|
12811
|
+
className: classNames.flipIdPromptImage
|
|
12812
|
+
})) : ( /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
12813
|
+
ref: imageRef,
|
|
12814
|
+
src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl,
|
|
12815
|
+
alt: "",
|
|
12816
|
+
className: classNames.idCardGuideImage,
|
|
12817
|
+
"$isMirrored": !((_x = cameraRef.current) === null || _x === void 0 ? void 0 : _x.isRearFacing),
|
|
12818
|
+
onLoad: captureImageSize,
|
|
12819
|
+
onResize: captureImageSize
|
|
12820
|
+
})))));
|
|
13332
12821
|
};
|
|
13333
|
-
var Container = styled__default.default.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n
|
|
12822
|
+
var Container = styled__default.default.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n font-family: ", ";\n"], ["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n font-family: ", ";\n"])), function (props) {
|
|
13334
12823
|
var _a;
|
|
13335
12824
|
return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
|
|
13336
12825
|
});
|
|
13337
|
-
var
|
|
13338
|
-
var
|
|
13339
|
-
|
|
13340
|
-
|
|
13341
|
-
var
|
|
13342
|
-
|
|
12826
|
+
var FaceGuide = styled__default.default.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n border-width: ", "px;\n border-color: ", ";\n border-style: solid;\n border-radius: 50%;\n aspect-ratio: 1 / 1.618;\n height: 50%;\n min-height: 33dvh;\n margin: 4% auto auto;\n"], ["\n border-width: ", "px;\n border-color: ", ";\n border-style: solid;\n border-radius: 50%;\n aspect-ratio: 1 / 1.618;\n height: 50%;\n min-height: 33dvh;\n margin: 4% auto auto;\n"])), function (props) {
|
|
12827
|
+
var _a;
|
|
12828
|
+
return (_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 0;
|
|
12829
|
+
}, function (props) {
|
|
12830
|
+
var _a;
|
|
12831
|
+
return (_a = props.$borderColor) !== null && _a !== void 0 ? _a : 'white';
|
|
12832
|
+
});
|
|
12833
|
+
var IdCardGuideContainer = styled__default.default.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n height: 50%;\n padding: 0 40px;\n display: flex;\n flex-flow: column nowrap;\n margin: 2% auto;\n"], ["\n height: 50%;\n padding: 0 40px;\n display: flex;\n flex-flow: column nowrap;\n margin: 2% auto;\n"])));
|
|
12834
|
+
var IdCardGuideInstructionsContainer = styled__default.default.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n width: 100%;\n text-align: center;\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: end;\n"], ["\n width: 100%;\n text-align: center;\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: end;\n"])));
|
|
12835
|
+
var IdCardGuideInstructions = styled__default.default(GuidanceMessage)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n padding: 8px 12px;\n font-weight: bold;\n"], ["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n padding: 8px 12px;\n font-weight: bold;\n"])));
|
|
12836
|
+
var IdCardGuideImageContainer = styled__default.default.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n position: relative;\n border: ", "px solid\n ", ";\n"], ["\n position: relative;\n border: ", "px solid\n ", ";\n"])), function (props) {
|
|
12837
|
+
return props.$borderWidth;
|
|
12838
|
+
}, function (props) {
|
|
12839
|
+
return props.$borderColor;
|
|
12840
|
+
});
|
|
12841
|
+
var IdCardGuideImage = styled__default.default.img(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 100%;\n max-height: 100%;\n ", "\n"], ["\n width: 100%;\n max-height: 100%;\n ", "\n"])), function (props) {
|
|
12842
|
+
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
12843
|
+
});
|
|
13343
12844
|
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7;
|
|
13344
12845
|
|
|
13345
12846
|
var ReadTextPrompt = function ReadTextPrompt(_a) {
|
|
@@ -13430,7 +12931,7 @@ var ReadTextPromptText = styled__default.default.div(templateObject_3$6 || (temp
|
|
|
13430
12931
|
var _a, _b, _c, _d, _e, _f;
|
|
13431
12932
|
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, ";") : "";
|
|
13432
12933
|
});
|
|
13433
|
-
var ReadTextPromptButtonsRow = styled__default.default(ButtonsRow
|
|
12934
|
+
var ReadTextPromptButtonsRow = styled__default.default(ButtonsRow)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n margin: 32px auto auto;\n gap: 20px;\n"], ["\n margin: 32px auto auto;\n gap: 20px;\n"])));
|
|
13434
12935
|
var ReadTextPromptTimeRemaining = styled__default.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 20px;\n\n ", ";\n ", ";\n ", ";\n"], ["\n padding: 20px;\n\n ", ";\n ", ";\n ", ";\n"])), function (props) {
|
|
13435
12936
|
var _a, _b, _c, _d, _e, _f;
|
|
13436
12937
|
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, ";") : "";
|
|
@@ -13447,8 +12948,8 @@ var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4
|
|
|
13447
12948
|
var edgeBoundary = 0.05;
|
|
13448
12949
|
var defaultVideoIdCaptureThresholds = {
|
|
13449
12950
|
detection: {
|
|
13450
|
-
idCardFront: 0.
|
|
13451
|
-
idCardBack: 0.
|
|
12951
|
+
idCardFront: 0.6,
|
|
12952
|
+
idCardBack: 0.6,
|
|
13452
12953
|
passport: 1
|
|
13453
12954
|
},
|
|
13454
12955
|
focus: {
|
|
@@ -13785,10 +13286,12 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13785
13286
|
var theme = styled.useTheme();
|
|
13786
13287
|
var _30 = useTranslations(rawVerbiage, {
|
|
13787
13288
|
faceNotCenteredText: 'Please move your face to the center...',
|
|
13289
|
+
searchingForIdCardText: 'Searching for ID card...',
|
|
13788
13290
|
captureBtnText: 'Capture'
|
|
13789
13291
|
}),
|
|
13790
13292
|
captureBtnText = _30.captureBtnText,
|
|
13791
|
-
faceNotCenteredText = _30.faceNotCenteredText
|
|
13293
|
+
faceNotCenteredText = _30.faceNotCenteredText,
|
|
13294
|
+
searchingForIdCardText = _30.searchingForIdCardText;
|
|
13792
13295
|
var debugScalingDetails = useDebugScalingDetails({
|
|
13793
13296
|
enabled: debugMode,
|
|
13794
13297
|
pageWidth: width,
|
|
@@ -13797,9 +13300,8 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13797
13300
|
videoHeight: (_k = (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.videoHeight) !== null && _k !== void 0 ? _k : 0
|
|
13798
13301
|
});
|
|
13799
13302
|
var capturingId = ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction);
|
|
13800
|
-
|
|
13801
|
-
|
|
13802
|
-
var guidanceText = !faceCentered ? faceNotCenteredText : undefined;
|
|
13303
|
+
var searchingForIdCard = idCaptureModelsEnabled && capturingId && !goodFramesThresholdMet;
|
|
13304
|
+
var guidanceText = !faceCentered ? faceNotCenteredText : searchingForIdCard ? searchingForIdCardText : undefined;
|
|
13803
13305
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
13804
13306
|
ref: ref,
|
|
13805
13307
|
className: "flex ".concat((_l = classNames.container) !== null && _l !== void 0 ? _l : '')
|
|
@@ -13819,7 +13321,6 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13819
13321
|
verbiage: rawVerbiage.guides,
|
|
13820
13322
|
requestedAction: requestedAction,
|
|
13821
13323
|
satisfied: satisfied,
|
|
13822
|
-
idCardGuideStatus: countdownStartedAt ? 'capturing' : 'ready',
|
|
13823
13324
|
faceGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor,
|
|
13824
13325
|
idCardGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
|
|
13825
13326
|
}), debugMode && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(ObjectDetectionDebugOverlayDiv, {
|
|
@@ -13967,7 +13468,7 @@ var IdVideoCaptureSuccess = function IdVideoCaptureSuccess(_a) {
|
|
|
13967
13468
|
})) : ( /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
13968
13469
|
src: idBackImageUrl,
|
|
13969
13470
|
alt: "ID Back Image"
|
|
13970
|
-
}))), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow
|
|
13471
|
+
}))), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
13971
13472
|
className: classNames.buttonsRow
|
|
13972
13473
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
13973
13474
|
variant: "warning",
|
|
@@ -13989,7 +13490,7 @@ var AssetSelectorOption = styled__default.default.div(templateObject_3$4 || (tem
|
|
|
13989
13490
|
var templateObject_1$4, templateObject_2$4, templateObject_3$4;
|
|
13990
13491
|
|
|
13991
13492
|
var VideoIdWizard = function VideoIdWizard(_a) {
|
|
13992
|
-
var _b, _c, _d, _e, _f
|
|
13493
|
+
var _b, _c, _d, _e, _f;
|
|
13993
13494
|
var onComplete = _a.onComplete,
|
|
13994
13495
|
onExitCapture = _a.onExitCapture,
|
|
13995
13496
|
onExitAfterFailure = _a.onExitAfterFailure,
|
|
@@ -13997,66 +13498,66 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
13997
13498
|
onIdCaptureModelError = _a.onIdCaptureModelError,
|
|
13998
13499
|
onCameraAccessDenied = _a.onCameraAccessDenied,
|
|
13999
13500
|
onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
|
|
14000
|
-
|
|
14001
|
-
idCaptureProps =
|
|
14002
|
-
|
|
14003
|
-
faceLivenessProps =
|
|
14004
|
-
|
|
14005
|
-
idCaptureModelsEnabled =
|
|
14006
|
-
|
|
14007
|
-
videoIdCaptureThresholds =
|
|
13501
|
+
_g = _a.idCaptureProps,
|
|
13502
|
+
idCaptureProps = _g === void 0 ? {} : _g,
|
|
13503
|
+
_h = _a.faceLivenessProps,
|
|
13504
|
+
faceLivenessProps = _h === void 0 ? {} : _h,
|
|
13505
|
+
_j = _a.idCaptureModelsEnabled,
|
|
13506
|
+
idCaptureModelsEnabled = _j === void 0 ? true : _j,
|
|
13507
|
+
_k = _a.videoIdCaptureThresholds,
|
|
13508
|
+
videoIdCaptureThresholds = _k === void 0 ? defaultVideoIdCaptureThresholds : _k,
|
|
14008
13509
|
readTextPrompt = _a.readTextPrompt,
|
|
14009
13510
|
readTextTimeoutDurationMs = _a.readTextTimeoutDurationMs,
|
|
14010
13511
|
readTextMinReadingMs = _a.readTextMinReadingMs,
|
|
14011
|
-
|
|
14012
|
-
skipIdCapture =
|
|
14013
|
-
|
|
14014
|
-
skipShowIdCardBack =
|
|
14015
|
-
|
|
14016
|
-
skipSuccessScreen =
|
|
14017
|
-
|
|
14018
|
-
idCaptureLoadingOverlayMode =
|
|
14019
|
-
|
|
14020
|
-
idCaptureGuideType =
|
|
14021
|
-
|
|
14022
|
-
idCapturePortraitGuidesOnMobile =
|
|
14023
|
-
|
|
14024
|
-
idCaptureRotateLoadingOverlayImageWhenPortrait =
|
|
14025
|
-
|
|
14026
|
-
idCaptureModelLoadTimeoutMs =
|
|
14027
|
-
|
|
14028
|
-
faceLivenessLoadingOverlayMode =
|
|
14029
|
-
|
|
14030
|
-
disableFaceDetectionWhileAudioCapture =
|
|
14031
|
-
|
|
14032
|
-
disableFaceDetectionWhileAudioCaptureMsDelay =
|
|
14033
|
-
|
|
14034
|
-
silentFallback =
|
|
14035
|
-
|
|
14036
|
-
mergeAVStreams =
|
|
14037
|
-
|
|
14038
|
-
assets =
|
|
14039
|
-
|
|
14040
|
-
classNames =
|
|
14041
|
-
|
|
14042
|
-
colors =
|
|
14043
|
-
|
|
14044
|
-
verbiage =
|
|
14045
|
-
|
|
14046
|
-
debugMode =
|
|
14047
|
-
var
|
|
14048
|
-
submissionStatus =
|
|
14049
|
-
idCaptureVideoUrl =
|
|
14050
|
-
idCaptureVideoAudioUrl =
|
|
14051
|
-
idCaptureVideoIdFrontImage =
|
|
14052
|
-
idCaptureVideoIdBackImage =
|
|
14053
|
-
setIdCaptureVideoUrl =
|
|
14054
|
-
setIdCaptureVideoIdFrontImage =
|
|
14055
|
-
setIdCaptureVideoIdBackImage =
|
|
14056
|
-
setIdCaptureVideoAudioUrl =
|
|
14057
|
-
var
|
|
14058
|
-
captureState =
|
|
14059
|
-
setCaptureState =
|
|
13512
|
+
_l = _a.skipIdCapture,
|
|
13513
|
+
skipIdCapture = _l === void 0 ? false : _l,
|
|
13514
|
+
_m = _a.skipShowIdCardBack,
|
|
13515
|
+
skipShowIdCardBack = _m === void 0 ? false : _m,
|
|
13516
|
+
_o = _a.skipSuccessScreen,
|
|
13517
|
+
skipSuccessScreen = _o === void 0 ? false : _o,
|
|
13518
|
+
_p = _a.idCaptureLoadingOverlayMode,
|
|
13519
|
+
idCaptureLoadingOverlayMode = _p === void 0 ? 'default' : _p,
|
|
13520
|
+
_q = _a.idCaptureGuideType,
|
|
13521
|
+
idCaptureGuideType = _q === void 0 ? 'fit' : _q,
|
|
13522
|
+
_r = _a.idCapturePortraitGuidesOnMobile,
|
|
13523
|
+
idCapturePortraitGuidesOnMobile = _r === void 0 ? true : _r,
|
|
13524
|
+
_s = _a.idCaptureRotateLoadingOverlayImageWhenPortrait,
|
|
13525
|
+
idCaptureRotateLoadingOverlayImageWhenPortrait = _s === void 0 ? true : _s,
|
|
13526
|
+
_t = _a.idCaptureModelLoadTimeoutMs,
|
|
13527
|
+
idCaptureModelLoadTimeoutMs = _t === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _t,
|
|
13528
|
+
_u = _a.faceLivenessLoadingOverlayMode,
|
|
13529
|
+
faceLivenessLoadingOverlayMode = _u === void 0 ? 'default' : _u,
|
|
13530
|
+
_v = _a.disableFaceDetectionWhileAudioCapture,
|
|
13531
|
+
disableFaceDetectionWhileAudioCapture = _v === void 0 ? true : _v,
|
|
13532
|
+
_w = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
|
|
13533
|
+
disableFaceDetectionWhileAudioCaptureMsDelay = _w === void 0 ? 2000 : _w,
|
|
13534
|
+
_x = _a.silentFallback,
|
|
13535
|
+
silentFallback = _x === void 0 ? false : _x,
|
|
13536
|
+
_y = _a.mergeAVStreams,
|
|
13537
|
+
mergeAVStreams = _y === void 0 ? false : _y,
|
|
13538
|
+
_z = _a.assets,
|
|
13539
|
+
assets = _z === void 0 ? {} : _z,
|
|
13540
|
+
_0 = _a.classNames,
|
|
13541
|
+
classNames = _0 === void 0 ? {} : _0,
|
|
13542
|
+
_1 = _a.colors,
|
|
13543
|
+
colors = _1 === void 0 ? {} : _1,
|
|
13544
|
+
_2 = _a.verbiage,
|
|
13545
|
+
verbiage = _2 === void 0 ? {} : _2,
|
|
13546
|
+
_3 = _a.debugMode,
|
|
13547
|
+
debugMode = _3 === void 0 ? false : _3;
|
|
13548
|
+
var _4 = React.useContext(SubmissionContext),
|
|
13549
|
+
submissionStatus = _4.submissionStatus,
|
|
13550
|
+
idCaptureVideoUrl = _4.idCaptureVideoUrl,
|
|
13551
|
+
idCaptureVideoAudioUrl = _4.idCaptureVideoAudioUrl,
|
|
13552
|
+
idCaptureVideoIdFrontImage = _4.idCaptureVideoIdFrontImage,
|
|
13553
|
+
idCaptureVideoIdBackImage = _4.idCaptureVideoIdBackImage,
|
|
13554
|
+
setIdCaptureVideoUrl = _4.setIdCaptureVideoUrl,
|
|
13555
|
+
setIdCaptureVideoIdFrontImage = _4.setIdCaptureVideoIdFrontImage,
|
|
13556
|
+
setIdCaptureVideoIdBackImage = _4.setIdCaptureVideoIdBackImage,
|
|
13557
|
+
setIdCaptureVideoAudioUrl = _4.setIdCaptureVideoAudioUrl;
|
|
13558
|
+
var _5 = React.useState('CAPTURING_ID'),
|
|
13559
|
+
captureState = _5[0],
|
|
13560
|
+
setCaptureState = _5[1];
|
|
14060
13561
|
React.useEffect(function () {
|
|
14061
13562
|
if (skipIdCapture && captureState === 'CAPTURING_ID') setCaptureState('CHECKING_LIVENESS');
|
|
14062
13563
|
}, [captureState, skipIdCapture]);
|
|
@@ -14087,9 +13588,9 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14087
13588
|
var onVideoCaptureFaceNotDetected = React.useCallback(function () {
|
|
14088
13589
|
setCaptureState('CHECKING_LIVENESS');
|
|
14089
13590
|
}, []);
|
|
14090
|
-
var
|
|
14091
|
-
attempt =
|
|
14092
|
-
setAttempt =
|
|
13591
|
+
var _6 = React.useState(0),
|
|
13592
|
+
attempt = _6[0],
|
|
13593
|
+
setAttempt = _6[1];
|
|
14093
13594
|
var userSuppliedExitAfterFailure = onExitAfterFailure !== null && onExitAfterFailure !== void 0 ? onExitAfterFailure : faceLivenessProps.onExitAfterFailure;
|
|
14094
13595
|
var onFaceCaptureExitAfterFailure = React.useCallback(function (resp, req) {
|
|
14095
13596
|
userSuppliedExitAfterFailure === null || userSuppliedExitAfterFailure === void 0 ? void 0 : userSuppliedExitAfterFailure(resp, req);
|
|
@@ -14120,19 +13621,6 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14120
13621
|
});
|
|
14121
13622
|
onExitCapture === null || onExitCapture === void 0 ? void 0 : onExitCapture();
|
|
14122
13623
|
}, [onExitCapture]);
|
|
14123
|
-
var faceLivenessGuides = React.useCallback(function (_a) {
|
|
14124
|
-
var _b, _c, _d, _e, _f;
|
|
14125
|
-
var status = _a.status;
|
|
14126
|
-
return /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureGuides, {
|
|
14127
|
-
assets: (_b = assets.idVideoCapture) === null || _b === void 0 ? void 0 : _b.guides,
|
|
14128
|
-
classNames: (_c = classNames.idVideoCapture) === null || _c === void 0 ? void 0 : _c.guides,
|
|
14129
|
-
verbiage: (_d = verbiage.idVideoCapture) === null || _d === void 0 ? void 0 : _d.guides,
|
|
14130
|
-
requestedAction: "VERIFY_LIVENESS",
|
|
14131
|
-
faceGuideStatus: status,
|
|
14132
|
-
faceGuideBorderColor: status === 'success' ? (_e = colors.idVideoCapture) === null || _e === void 0 ? void 0 : _e.guidesSatisfiedColor : (_f = colors.idVideoCapture) === null || _f === void 0 ? void 0 : _f.guidesUnsatisfiedColor,
|
|
14133
|
-
idCardGuideStatus: "disabled"
|
|
14134
|
-
});
|
|
14135
|
-
}, [(_b = assets.idVideoCapture) === null || _b === void 0 ? void 0 : _b.guides, (_c = classNames.idVideoCapture) === null || _c === void 0 ? void 0 : _c.guides, (_d = colors.idVideoCapture) === null || _d === void 0 ? void 0 : _d.guidesSatisfiedColor, (_e = colors.idVideoCapture) === null || _e === void 0 ? void 0 : _e.guidesUnsatisfiedColor, (_f = verbiage.idVideoCapture) === null || _f === void 0 ? void 0 : _f.guides]);
|
|
14136
13624
|
if (submissionStatus === SubmissionStatus.SUBMITTING) {
|
|
14137
13625
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
14138
13626
|
className: "flex"
|
|
@@ -14150,8 +13638,8 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14150
13638
|
debugMode: debugMode
|
|
14151
13639
|
}, /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsProvider, {
|
|
14152
13640
|
autoStart: false,
|
|
14153
|
-
documentDetectionModelUrl: (
|
|
14154
|
-
focusModelUrl: (
|
|
13641
|
+
documentDetectionModelUrl: (_c = (_b = idCaptureProps.assets) === null || _b === void 0 ? void 0 : _b.documentDetectionModelUrl) !== null && _c !== void 0 ? _c : '',
|
|
13642
|
+
focusModelUrl: (_e = (_d = idCaptureProps.assets) === null || _d === void 0 ? void 0 : _d.focusModelUrl) !== null && _e !== void 0 ? _e : '',
|
|
14155
13643
|
onModelError: onIdCaptureModelError,
|
|
14156
13644
|
modelLoadTimeoutMs: idCaptureModelLoadTimeoutMs
|
|
14157
13645
|
}, /*#__PURE__*/React__namespace.default.createElement(SelfieGuidanceModelsProvider, {
|
|
@@ -14159,7 +13647,7 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14159
13647
|
onModelError: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.onModelError,
|
|
14160
13648
|
modelLoadTimeoutMs: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.modelLoadTimeoutMs
|
|
14161
13649
|
}, /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
14162
|
-
className: "flex ".concat((
|
|
13650
|
+
className: "flex ".concat((_f = classNames.container) !== null && _f !== void 0 ? _f : '')
|
|
14163
13651
|
}, ['CHECKING_LIVENESS', 'CAPTURING_VIDEO'].includes(captureState) && /*#__PURE__*/React__namespace.default.createElement(CameraVideoTag, {
|
|
14164
13652
|
className: classNames.cameraFeed
|
|
14165
13653
|
}), function () {
|
|
@@ -14197,9 +13685,6 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14197
13685
|
skipSuccessScreen: true,
|
|
14198
13686
|
renderCameraFeed: false,
|
|
14199
13687
|
releaseCameraAccessOnExit: false,
|
|
14200
|
-
disableCapturePreview: !debugMode,
|
|
14201
|
-
requireVerticalFaceCentering: false,
|
|
14202
|
-
guidesComponent: faceLivenessGuides,
|
|
14203
13688
|
assets: assets.faceLiveness,
|
|
14204
13689
|
classNames: classNames.faceLiveness,
|
|
14205
13690
|
colors: colors.faceLiveness,
|
|
@@ -15687,8 +15172,8 @@ var CustomerVerificationSuccess = function CustomerVerificationSuccess(_a) {
|
|
|
15687
15172
|
}, verbiage.doneBtnText))));
|
|
15688
15173
|
};
|
|
15689
15174
|
var Heading$3 = styled__default.default.h3(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
15690
|
-
var ImageContainer$3 = styled__default.default(ButtonsRow
|
|
15691
|
-
var StyledButtonsRow$3 = styled__default.default(ButtonsRow
|
|
15175
|
+
var ImageContainer$3 = styled__default.default(ButtonsRow)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
15176
|
+
var StyledButtonsRow$3 = styled__default.default(ButtonsRow)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
15692
15177
|
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
15693
15178
|
|
|
15694
15179
|
var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
|
|
@@ -15739,8 +15224,8 @@ var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
|
|
|
15739
15224
|
}, verbiage.exitBtnText))));
|
|
15740
15225
|
};
|
|
15741
15226
|
var Heading$2 = styled__default.default.h3(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
15742
|
-
var ImageContainer$2 = styled__default.default(ButtonsRow
|
|
15743
|
-
var StyledButtonsRow$2 = styled__default.default(ButtonsRow
|
|
15227
|
+
var ImageContainer$2 = styled__default.default(ButtonsRow)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
15228
|
+
var StyledButtonsRow$2 = styled__default.default(ButtonsRow)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
15744
15229
|
var templateObject_1$2, templateObject_2$2, templateObject_3$2;
|
|
15745
15230
|
|
|
15746
15231
|
var ALLOWED_RETRIES$2 = 2;
|
|
@@ -16245,8 +15730,8 @@ var CustomerIdentificationSuccess = function CustomerIdentificationSuccess(_a) {
|
|
|
16245
15730
|
}, verbiage.doneBtnText))));
|
|
16246
15731
|
};
|
|
16247
15732
|
var Heading$1 = styled__default.default.h3(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
16248
|
-
var ImageContainer$1 = styled__default.default(ButtonsRow
|
|
16249
|
-
var StyledButtonsRow$1 = styled__default.default(ButtonsRow
|
|
15733
|
+
var ImageContainer$1 = styled__default.default(ButtonsRow)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
15734
|
+
var StyledButtonsRow$1 = styled__default.default(ButtonsRow)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
16250
15735
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1;
|
|
16251
15736
|
|
|
16252
15737
|
var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
|
|
@@ -16297,8 +15782,8 @@ var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
|
|
|
16297
15782
|
}, verbiage.exitBtnText))));
|
|
16298
15783
|
};
|
|
16299
15784
|
var Heading = styled__default.default.h3(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
16300
|
-
var ImageContainer = styled__default.default(ButtonsRow
|
|
16301
|
-
var StyledButtonsRow = styled__default.default(ButtonsRow
|
|
15785
|
+
var ImageContainer = styled__default.default(ButtonsRow)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
15786
|
+
var StyledButtonsRow = styled__default.default(ButtonsRow)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
16302
15787
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
16303
15788
|
|
|
16304
15789
|
var ALLOWED_RETRIES = 2;
|