idmission-web-sdk 2.1.37 → 2.1.38
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 +0 -2
- package/dist/lib/locales/index.d.ts +0 -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 +923 -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 +923 -1439
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +923 -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.38';
|
|
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',
|
|
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
|
|
|
@@ -6756,8 +6781,6 @@ var esTranslation = {
|
|
|
6756
6781
|
Exit: 'Salir',
|
|
6757
6782
|
'Face liveness has been verified!': 'Se ha verificado la Prueba de Vida en rostro!',
|
|
6758
6783
|
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
6784
|
'Customer has been identified!': '¡Se ha identificado al cliente!',
|
|
6762
6785
|
'Customer not found': 'Cliente no encontrado',
|
|
6763
6786
|
'Additional document capture': 'Captura de otro documento',
|
|
@@ -6868,7 +6891,7 @@ function useTranslations(verbiage, fallbacks) {
|
|
|
6868
6891
|
}, [fallbacks, i18n.language, t, verbiage]);
|
|
6869
6892
|
}
|
|
6870
6893
|
|
|
6871
|
-
var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$
|
|
6894
|
+
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
6895
|
var $top = _a.$top;
|
|
6873
6896
|
return $top !== null && $top !== void 0 ? $top : '10vh';
|
|
6874
6897
|
}, function (_a) {
|
|
@@ -6881,14 +6904,14 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
|
|
|
6881
6904
|
if (!portalLocation) return element;
|
|
6882
6905
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
6883
6906
|
};
|
|
6884
|
-
var GuidanceMessage = styled__default.default.div(templateObject_2$
|
|
6907
|
+
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
6908
|
var _a, _b, _c, _d, _e, _f;
|
|
6886
6909
|
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
6910
|
}, function (props) {
|
|
6888
6911
|
var _a, _b, _c, _d, _e, _f;
|
|
6889
6912
|
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
6913
|
});
|
|
6891
|
-
var templateObject_1$
|
|
6914
|
+
var templateObject_1$B, templateObject_2$q;
|
|
6892
6915
|
|
|
6893
6916
|
var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
|
|
6894
6917
|
|
|
@@ -6923,18 +6946,18 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
|
6923
6946
|
}
|
|
6924
6947
|
}, verbiage.buttonText))));
|
|
6925
6948
|
}
|
|
6926
|
-
var Container$1 = styled__default.default.div(templateObject_1$
|
|
6949
|
+
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
6950
|
var _a, _b, _c;
|
|
6928
6951
|
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
6952
|
}, function (props) {
|
|
6930
6953
|
var _a, _b, _c;
|
|
6931
6954
|
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
6955
|
});
|
|
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$
|
|
6956
|
+
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"])));
|
|
6957
|
+
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"])));
|
|
6958
|
+
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"])));
|
|
6959
|
+
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"])));
|
|
6960
|
+
var templateObject_1$A, templateObject_2$p, templateObject_3$k, templateObject_4$f, templateObject_5$9;
|
|
6938
6961
|
|
|
6939
6962
|
var IdCapture = function IdCapture(_a) {
|
|
6940
6963
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
@@ -7084,7 +7107,7 @@ var IdCapture = function IdCapture(_a) {
|
|
|
7084
7107
|
scaling: debugScalingDetails,
|
|
7085
7108
|
flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
|
|
7086
7109
|
});
|
|
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")))));
|
|
7110
|
+
}))), 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
7111
|
};
|
|
7089
7112
|
var timeSince = function timeSince(t) {
|
|
7090
7113
|
if (!t) return 0;
|
|
@@ -7130,13 +7153,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
7130
7153
|
finished: true
|
|
7131
7154
|
}, verbiage.retryBtnText)));
|
|
7132
7155
|
};
|
|
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$
|
|
7156
|
+
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"])));
|
|
7157
|
+
var StyledOverlayImageContainer$3 = styled__default.default(OverlayImageContainer)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
7158
|
+
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"])));
|
|
7159
|
+
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"])));
|
|
7160
|
+
var templateObject_1$z, templateObject_2$o, templateObject_3$j, templateObject_4$e;
|
|
7138
7161
|
|
|
7139
|
-
var ExitCaptureStyledButton = styled__default.default.button(templateObject_1$
|
|
7162
|
+
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
7163
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
7141
7164
|
var onClick = _a.onClick,
|
|
7142
7165
|
className = _a.className;
|
|
@@ -7180,10 +7203,10 @@ var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
|
7180
7203
|
y2: "19.75"
|
|
7181
7204
|
}))));
|
|
7182
7205
|
};
|
|
7183
|
-
var templateObject_1$
|
|
7206
|
+
var templateObject_1$y;
|
|
7184
7207
|
|
|
7185
|
-
var ButtonsRow
|
|
7186
|
-
var templateObject_1$
|
|
7208
|
+
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"])));
|
|
7209
|
+
var templateObject_1$x;
|
|
7187
7210
|
|
|
7188
7211
|
function IdCaptureLoadingGraphic(props) {
|
|
7189
7212
|
var isMobile = window.innerHeight > window.innerWidth;
|
|
@@ -7818,25 +7841,25 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
|
|
|
7818
7841
|
}
|
|
7819
7842
|
}, verbiage.continueText))))));
|
|
7820
7843
|
};
|
|
7821
|
-
var OverlayInner$1 = styled__default.default.div(templateObject_1$
|
|
7844
|
+
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
7845
|
var _a, _b, _c, _d;
|
|
7823
7846
|
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
7847
|
}, function (props) {
|
|
7825
7848
|
var _a, _b, _c, _d;
|
|
7826
7849
|
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
7850
|
});
|
|
7828
|
-
var OverlayHeader$1 = styled__default.default.div(templateObject_2$
|
|
7851
|
+
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
7852
|
var _a;
|
|
7830
7853
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
7831
7854
|
}, function (props) {
|
|
7832
7855
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
7833
7856
|
});
|
|
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
|
|
7857
|
+
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"])));
|
|
7858
|
+
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"])));
|
|
7859
|
+
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"])));
|
|
7860
|
+
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"])));
|
|
7861
|
+
var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7862
|
+
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
7863
|
var _a, _b, _c, _d;
|
|
7841
7864
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
|
|
7842
7865
|
}, function (props) {
|
|
@@ -7870,10 +7893,10 @@ var ContinueButton$1 = styled__default.default(LoaderButton)(templateObject_18 |
|
|
|
7870
7893
|
var _a, _b, _c, _d, _e, _f;
|
|
7871
7894
|
return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnBorder) ? "border: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.continueBtnBorder, ";") : '';
|
|
7872
7895
|
});
|
|
7873
|
-
var templateObject_1$
|
|
7896
|
+
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
7897
|
|
|
7875
|
-
var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$
|
|
7876
|
-
var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$
|
|
7898
|
+
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"])));
|
|
7899
|
+
var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7877
7900
|
var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
7878
7901
|
var _b, _c, _d, _e;
|
|
7879
7902
|
var onDismissed = _a.onDismissed,
|
|
@@ -7984,7 +8007,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
|
7984
8007
|
}
|
|
7985
8008
|
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
|
|
7986
8009
|
};
|
|
7987
|
-
var templateObject_1$
|
|
8010
|
+
var templateObject_1$v, templateObject_2$m;
|
|
7988
8011
|
|
|
7989
8012
|
var components$1 = {
|
|
7990
8013
|
"default": IdCaptureLoadingOverlayDefault,
|
|
@@ -8041,7 +8064,7 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
|
|
|
8041
8064
|
});
|
|
8042
8065
|
};
|
|
8043
8066
|
|
|
8044
|
-
var OverlayInstruction = styled__default.default.p(templateObject_1$
|
|
8067
|
+
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
8068
|
var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
8046
8069
|
var capturedDocuments = _a.capturedDocuments,
|
|
8047
8070
|
onSubmitClick = _a.onSubmitClick,
|
|
@@ -8076,7 +8099,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8076
8099
|
className: classNames.imageContainer
|
|
8077
8100
|
}, /*#__PURE__*/React__namespace.default.createElement(ImageRow, {
|
|
8078
8101
|
className: classNames.imageRow
|
|
8079
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
8102
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Heading$9, {
|
|
8080
8103
|
className: classNames.heading
|
|
8081
8104
|
}, verbiage.headingText), idCardFront && ( /*#__PURE__*/React__namespace.default.createElement(ImageCol$1, {
|
|
8082
8105
|
className: classNames.imageCol
|
|
@@ -8110,7 +8133,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8110
8133
|
alt: verbiage.passportText
|
|
8111
8134
|
})), 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
8135
|
className: classNames.instruction
|
|
8113
|
-
}, verbiage.instructionText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow
|
|
8136
|
+
}, verbiage.instructionText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
8114
8137
|
className: classNames.buttonsRow
|
|
8115
8138
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
8116
8139
|
className: classNames.retryBtn,
|
|
@@ -8127,17 +8150,17 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8127
8150
|
finished: true
|
|
8128
8151
|
}, submissionStatus === SubmissionStatus.SUBMITTING ? verbiage.submittingText : verbiage.submitText))));
|
|
8129
8152
|
};
|
|
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$
|
|
8153
|
+
var Heading$9 = styled__default.default.h1(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n margin-bottom: 12px;\n"], ["\n margin-bottom: 12px;\n"])));
|
|
8154
|
+
var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n overflow-y: auto;\n"], ["\n overflow-y: auto;\n"])));
|
|
8155
|
+
var ImageRow = styled__default.default(OverlayImageRow)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n flex-direction: column;\n"], ["\n flex-direction: column;\n"])));
|
|
8156
|
+
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"])));
|
|
8157
|
+
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"])));
|
|
8158
|
+
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
8159
|
var _a, _b, _c;
|
|
8137
8160
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.success) === null || _b === void 0 ? void 0 : _b.imageBorderColor) !== null && _c !== void 0 ? _c : 'var(--idm-color-primary-400)';
|
|
8138
8161
|
});
|
|
8139
8162
|
var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n width: 100%;\n border-radius: 4px;\n"], ["\n width: 100%;\n border-radius: 4px;\n"])));
|
|
8140
|
-
var templateObject_1$
|
|
8163
|
+
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
8164
|
|
|
8142
8165
|
var CameraVideoTag = function CameraVideoTag(_a) {
|
|
8143
8166
|
var _b;
|
|
@@ -8176,10 +8199,10 @@ var CameraVideoTag = function CameraVideoTag(_a) {
|
|
|
8176
8199
|
"$isRearFacing": (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing
|
|
8177
8200
|
});
|
|
8178
8201
|
};
|
|
8179
|
-
var FullscreenVideoTag = styled__default.default.video(templateObject_1$
|
|
8202
|
+
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
8203
|
return props.$isRearFacing ? '' : 'scaleX(-1)';
|
|
8181
8204
|
});
|
|
8182
|
-
var templateObject_1$
|
|
8205
|
+
var templateObject_1$t;
|
|
8183
8206
|
|
|
8184
8207
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
8185
8208
|
var _this = this;
|
|
@@ -8214,10 +8237,10 @@ function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallb
|
|
|
8214
8237
|
return !skipSuccessScreen || skipSuccessScreenResolvedFalse;
|
|
8215
8238
|
}
|
|
8216
8239
|
|
|
8217
|
-
var CameraFeedWrapper = styled__default.default.div(templateObject_1$
|
|
8240
|
+
var CameraFeedWrapper = styled__default.default.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8218
8241
|
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
8242
|
});
|
|
8220
|
-
var templateObject_1$
|
|
8243
|
+
var templateObject_1$s;
|
|
8221
8244
|
|
|
8222
8245
|
function setCanvasDimensions(canvas, width, height) {
|
|
8223
8246
|
var _a;
|
|
@@ -8251,10 +8274,10 @@ var GuideOrientationContext = /*#__PURE__*/React.createContext({
|
|
|
8251
8274
|
}
|
|
8252
8275
|
});
|
|
8253
8276
|
|
|
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$
|
|
8277
|
+
var StyledPageContainer = styled__default.default(PageContainerDiv)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n z-index: 1000;\n"], ["\n z-index: 1000;\n"])));
|
|
8278
|
+
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"])));
|
|
8279
|
+
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"])));
|
|
8280
|
+
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
8281
|
var _a, _b, _c, _d, _e;
|
|
8259
8282
|
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
8283
|
}, function (props) {
|
|
@@ -8265,13 +8288,13 @@ var GuideRegion = styled__default.default.div(templateObject_4$c || (templateObj
|
|
|
8265
8288
|
}, function (props) {
|
|
8266
8289
|
return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
|
|
8267
8290
|
});
|
|
8268
|
-
var Spacer = styled__default.default(GuideRegion)(templateObject_5$
|
|
8269
|
-
var GuideCenterRegion = styled__default.default.div(templateObject_6$
|
|
8291
|
+
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"])));
|
|
8292
|
+
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
8293
|
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
8271
8294
|
}, function (props) {
|
|
8272
8295
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
8273
8296
|
});
|
|
8274
|
-
var GuideCenterBorder = styled__default.default.div(templateObject_7$
|
|
8297
|
+
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
8298
|
var _a, _b;
|
|
8276
8299
|
return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
|
|
8277
8300
|
});
|
|
@@ -8399,9 +8422,9 @@ var regionClsx$1 = function regionClsx(classNames, which) {
|
|
|
8399
8422
|
return v;
|
|
8400
8423
|
}).join(' ');
|
|
8401
8424
|
};
|
|
8402
|
-
var templateObject_1$
|
|
8425
|
+
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
8426
|
|
|
8404
|
-
var FlippingImage = styled__default.default(GuideImage)(templateObject_1$
|
|
8427
|
+
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
8428
|
return props.$transitionTime;
|
|
8406
8429
|
}, function (props) {
|
|
8407
8430
|
return props.$transforms;
|
|
@@ -8546,7 +8569,7 @@ var regionClsx = function regionClsx(classNames, which) {
|
|
|
8546
8569
|
return v;
|
|
8547
8570
|
}).join(' ');
|
|
8548
8571
|
};
|
|
8549
|
-
var templateObject_1$
|
|
8572
|
+
var templateObject_1$q;
|
|
8550
8573
|
|
|
8551
8574
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
8552
8575
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -8682,11 +8705,11 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
8682
8705
|
imageVisible: imageVisible
|
|
8683
8706
|
})));
|
|
8684
8707
|
};
|
|
8685
|
-
var CanvasWrapper$1 = styled__default.default.div(templateObject_1$
|
|
8708
|
+
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
8709
|
return props.$maskColor;
|
|
8687
8710
|
});
|
|
8688
|
-
var Canvas$1 = styled__default.default.canvas(templateObject_2$
|
|
8689
|
-
var templateObject_1$
|
|
8711
|
+
var Canvas$1 = styled__default.default.canvas(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
8712
|
+
var templateObject_1$p, templateObject_2$j;
|
|
8690
8713
|
|
|
8691
8714
|
function IdCaptureGuides(_a) {
|
|
8692
8715
|
var _b, _c;
|
|
@@ -8831,11 +8854,11 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
|
|
|
8831
8854
|
onError: onError
|
|
8832
8855
|
})));
|
|
8833
8856
|
};
|
|
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$
|
|
8857
|
+
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"])));
|
|
8858
|
+
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"])));
|
|
8859
|
+
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"])));
|
|
8860
|
+
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"])));
|
|
8861
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$f, templateObject_4$a;
|
|
8839
8862
|
|
|
8840
8863
|
var documentCaptureInitialState = {
|
|
8841
8864
|
documents: [],
|
|
@@ -9191,11 +9214,11 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
|
|
|
9191
9214
|
ref: canvasRef
|
|
9192
9215
|
}));
|
|
9193
9216
|
};
|
|
9194
|
-
var CanvasWrapper = styled__default.default.div(templateObject_1$
|
|
9217
|
+
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
9218
|
return props.$maskColor;
|
|
9196
9219
|
});
|
|
9197
|
-
var Canvas = styled__default.default.canvas(templateObject_2$
|
|
9198
|
-
var templateObject_1$
|
|
9220
|
+
var Canvas = styled__default.default.canvas(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
9221
|
+
var templateObject_1$n, templateObject_2$h;
|
|
9199
9222
|
|
|
9200
9223
|
var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
9201
9224
|
var _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -9299,7 +9322,7 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
9299
9322
|
}, /*#__PURE__*/React__namespace.default.createElement(HeadingRow, {
|
|
9300
9323
|
"$maskColor": maskColor,
|
|
9301
9324
|
className: classNames.headingRow
|
|
9302
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
9325
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Heading$8, {
|
|
9303
9326
|
className: classNames.heading
|
|
9304
9327
|
}, verbiage.headingText)), /*#__PURE__*/React__namespace.default.createElement(DocumentCaptureGuideOverlay, {
|
|
9305
9328
|
aspectRatio: aspectRatio,
|
|
@@ -9345,21 +9368,21 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
9345
9368
|
disabled: !cameraReady || capturing
|
|
9346
9369
|
}, !cameraReady ? verbiage.loadingBtnText : capturing ? verbiage.capturingBtnText : verbiage.captureBtnText))))));
|
|
9347
9370
|
};
|
|
9348
|
-
var CaptureContainer = styled__default.default.div(templateObject_1$
|
|
9349
|
-
var HeadingRow = styled__default.default.div(templateObject_2$
|
|
9371
|
+
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"])));
|
|
9372
|
+
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
9373
|
return props.$maskColor;
|
|
9351
9374
|
});
|
|
9352
|
-
var Heading$
|
|
9353
|
-
var FooterRow = styled__default.default.div(templateObject_4$
|
|
9375
|
+
var Heading$8 = styled__default.default.h1(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n font-size: 22px;\n"], ["\n font-size: 22px;\n"])));
|
|
9376
|
+
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
9377
|
return props.$maskColor;
|
|
9355
9378
|
});
|
|
9356
|
-
var Instructions = styled__default.default.div(templateObject_5$
|
|
9379
|
+
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
9380
|
var _a, _b, _c;
|
|
9358
9381
|
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
9382
|
});
|
|
9360
|
-
var StyledButtonsRow$9 = styled__default.default(ButtonsRow
|
|
9361
|
-
var PreviewImage = styled__default.default.img(templateObject_7$
|
|
9362
|
-
var templateObject_1$
|
|
9383
|
+
var StyledButtonsRow$9 = styled__default.default(ButtonsRow)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n padding-top: 20px;\n"], ["\n padding-top: 20px;\n"])));
|
|
9384
|
+
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"])));
|
|
9385
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$e, templateObject_4$9, templateObject_5$5, templateObject_6$4, templateObject_7$2;
|
|
9363
9386
|
|
|
9364
9387
|
var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
|
|
9365
9388
|
var onSuccess = _a.onSuccess,
|
|
@@ -9579,7 +9602,7 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
9579
9602
|
className: classNames.container
|
|
9580
9603
|
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayInner$2, {
|
|
9581
9604
|
className: classNames.inner
|
|
9582
|
-
}, !silentFallback && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
9605
|
+
}, !silentFallback && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$7, {
|
|
9583
9606
|
className: classNames.heading
|
|
9584
9607
|
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(Description$3, {
|
|
9585
9608
|
className: classNames.description
|
|
@@ -9628,13 +9651,13 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
9628
9651
|
}
|
|
9629
9652
|
}, verbiage.doneBtnText))))));
|
|
9630
9653
|
};
|
|
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$
|
|
9654
|
+
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"])));
|
|
9655
|
+
var Heading$7 = styled__default.default.h3(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
9656
|
+
var Description$3 = styled__default.default.p(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
9657
|
+
var Instruction = styled__default.default.p(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
9658
|
+
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"])));
|
|
9659
|
+
var StyledButtonsRow$8 = styled__default.default(ButtonsRow)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
9660
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$d, templateObject_4$8, templateObject_5$4, templateObject_6$3;
|
|
9638
9661
|
|
|
9639
9662
|
var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
9640
9663
|
var _b, _c, _d, _e, _f, _g;
|
|
@@ -9995,776 +10018,144 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
9995
10018
|
})));
|
|
9996
10019
|
};
|
|
9997
10020
|
|
|
9998
|
-
|
|
9999
|
-
|
|
10000
|
-
|
|
10001
|
-
|
|
10002
|
-
|
|
10003
|
-
|
|
10004
|
-
|
|
10005
|
-
|
|
10006
|
-
|
|
10007
|
-
|
|
10008
|
-
|
|
10009
|
-
|
|
10010
|
-
|
|
10011
|
-
|
|
10021
|
+
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"])));
|
|
10022
|
+
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) {
|
|
10023
|
+
return props.$borderWidth;
|
|
10024
|
+
}, function (props) {
|
|
10025
|
+
var _a, _b, _c, _d;
|
|
10026
|
+
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';
|
|
10027
|
+
});
|
|
10028
|
+
var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
|
|
10029
|
+
var _b = _a.classNames,
|
|
10030
|
+
classNames = _b === void 0 ? {} : _b,
|
|
10031
|
+
_c = _a.variant,
|
|
10032
|
+
variant = _c === void 0 ? 'unsatisfied' : _c,
|
|
10033
|
+
_d = _a.borderWidth,
|
|
10034
|
+
borderWidth = _d === void 0 ? 3 : _d,
|
|
10035
|
+
borderColor = _a.borderColor;
|
|
10036
|
+
return /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideContainer, {
|
|
10037
|
+
className: classNames.container
|
|
10038
|
+
}, /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideOval, {
|
|
10039
|
+
className: classNames.oval,
|
|
10040
|
+
"$variant": variant,
|
|
10041
|
+
"$borderWidth": borderWidth,
|
|
10042
|
+
"$borderColor": borderColor
|
|
10043
|
+
}));
|
|
10044
|
+
};
|
|
10045
|
+
var templateObject_1$k, templateObject_2$e;
|
|
10046
|
+
|
|
10047
|
+
var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
|
|
10048
|
+
start: function start() {
|
|
10049
|
+
return null;
|
|
10050
|
+
},
|
|
10051
|
+
stop: function stop() {
|
|
10052
|
+
return null;
|
|
10053
|
+
},
|
|
10054
|
+
onPredictionMade: function onPredictionMade() {
|
|
10055
|
+
return null;
|
|
10056
|
+
},
|
|
10057
|
+
canvasRef: {
|
|
10058
|
+
current: null
|
|
10059
|
+
},
|
|
10060
|
+
ready: false,
|
|
10061
|
+
error: null,
|
|
10062
|
+
modelDownloadProgress: 0
|
|
10063
|
+
});
|
|
10064
|
+
function SelfieGuidanceModelsProvider(_a) {
|
|
10065
|
+
var _this = this;
|
|
10066
|
+
var _b = _a.autoStart,
|
|
10067
|
+
autoStart = _b === void 0 ? true : _b,
|
|
10068
|
+
children = _a.children,
|
|
10069
|
+
throttleMs = _a.throttleMs,
|
|
10070
|
+
onModelError = _a.onModelError,
|
|
10071
|
+
_c = _a.modelLoadTimeoutMs,
|
|
10072
|
+
modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c;
|
|
10073
|
+
var _d = React.useContext(CameraStateContext),
|
|
10074
|
+
videoRef = _d.videoRef,
|
|
10075
|
+
videoLoaded = _d.videoLoaded,
|
|
10076
|
+
cameraReady = _d.cameraReady;
|
|
10077
|
+
var canvasRef = React.useRef(null);
|
|
10078
|
+
var onPredictionHandler = React.useRef();
|
|
10079
|
+
var _e = useLoadFaceDetector({
|
|
10080
|
+
onModelError: onModelError,
|
|
10081
|
+
modelLoadTimeoutMs: modelLoadTimeoutMs
|
|
10082
|
+
}),
|
|
10083
|
+
detector = _e.detector,
|
|
10084
|
+
ready = _e.ready,
|
|
10085
|
+
modelDownloadProgress = _e.modelDownloadProgress,
|
|
10086
|
+
modelError = _e.modelError;
|
|
10087
|
+
var _f = useFrameLoop(React.useCallback(function () {
|
|
10088
|
+
return __awaiter(_this, void 0, void 0, function () {
|
|
10089
|
+
var vw, vh, ctx, faces;
|
|
10090
|
+
var _a;
|
|
10091
|
+
return __generator(this, function (_b) {
|
|
10092
|
+
if (!videoLoaded || !cameraReady || !ready || modelError || !videoRef.current || !detector.current || !canvasRef.current) return [2 /*return*/];
|
|
10093
|
+
vw = videoRef.current.videoWidth;
|
|
10094
|
+
vh = videoRef.current.videoHeight;
|
|
10095
|
+
ctx = canvasRef.current.getContext('2d');
|
|
10096
|
+
canvasRef.current.width = vw;
|
|
10097
|
+
canvasRef.current.height = vh;
|
|
10098
|
+
if (ctx && videoRef.current.readyState === 4) {
|
|
10099
|
+
ctx.translate(vw, 0);
|
|
10100
|
+
ctx.scale(-1, 1);
|
|
10101
|
+
ctx.drawImage(videoRef.current, 0, 0, vw, vh);
|
|
10102
|
+
// Detectors can throw errors, for example when using custom URLs that
|
|
10103
|
+
// contain a model that doesn't provide the expected output.
|
|
10104
|
+
try {
|
|
10105
|
+
faces = makeFaceDetectorPrediction(detector.current, canvasRef.current).faces;
|
|
10106
|
+
(_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, faces);
|
|
10107
|
+
} catch (e) {
|
|
10108
|
+
error('caught face detection error', e);
|
|
10109
|
+
}
|
|
10110
|
+
}
|
|
10111
|
+
return [2 /*return*/];
|
|
10112
|
+
});
|
|
10012
10113
|
});
|
|
10013
|
-
},
|
|
10114
|
+
}, [cameraReady, detector, modelError, ready, videoLoaded, videoRef]), {
|
|
10115
|
+
throttleMs: throttleMs,
|
|
10116
|
+
autoStart: autoStart
|
|
10117
|
+
}),
|
|
10118
|
+
start = _f.start,
|
|
10119
|
+
stop = _f.stop;
|
|
10120
|
+
var onPredictionMade = React.useCallback(function (handler) {
|
|
10121
|
+
onPredictionHandler.current = handler;
|
|
10122
|
+
}, []);
|
|
10123
|
+
var value = React.useMemo(function () {
|
|
10124
|
+
return {
|
|
10125
|
+
start: start,
|
|
10126
|
+
stop: stop,
|
|
10127
|
+
ready: ready,
|
|
10128
|
+
canvasRef: canvasRef,
|
|
10129
|
+
onPredictionMade: onPredictionMade,
|
|
10130
|
+
error: modelError,
|
|
10131
|
+
modelDownloadProgress: modelDownloadProgress
|
|
10132
|
+
};
|
|
10133
|
+
}, [modelError, modelDownloadProgress, onPredictionMade, ready, start, stop]);
|
|
10134
|
+
return /*#__PURE__*/React__namespace.createElement(SelfieGuidanceModelsContext.Provider, {
|
|
10135
|
+
value: value
|
|
10136
|
+
}, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
|
|
10137
|
+
ref: canvasRef
|
|
10138
|
+
}), children);
|
|
10139
|
+
}
|
|
10140
|
+
|
|
10141
|
+
var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger, shouldStart) {
|
|
10142
|
+
if (shouldStart === void 0) {
|
|
10143
|
+
shouldStart = true;
|
|
10144
|
+
}
|
|
10145
|
+
var _a = React.useState(false),
|
|
10146
|
+
timedOut = _a[0],
|
|
10147
|
+
setTimedOut = _a[1];
|
|
10148
|
+
var _b = React.useState(),
|
|
10149
|
+
timeoutStartedAt = _b[0],
|
|
10150
|
+
setTimeoutStartedAt = _b[1];
|
|
10151
|
+
React.useEffect(function () {
|
|
10152
|
+
if (!durationMs || !shouldStart) return;
|
|
10153
|
+
setTimeoutStartedAt(new Date());
|
|
10154
|
+
var timer = setTimeout(function () {
|
|
10155
|
+
setTimedOut(true);
|
|
10156
|
+
}, durationMs);
|
|
10014
10157
|
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);
|
|
10158
|
+
if (timer) clearTimeout(timer);
|
|
10768
10159
|
};
|
|
10769
10160
|
}, [durationMs, shouldStart]);
|
|
10770
10161
|
React.useEffect(function () {
|
|
@@ -10891,11 +10282,11 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
|
|
|
10891
10282
|
className: classNames.container
|
|
10892
10283
|
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayInner$1, {
|
|
10893
10284
|
className: classNames.inner
|
|
10894
|
-
}, silentFallback ? invalidSelfie && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
10285
|
+
}, silentFallback ? invalidSelfie && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$6, {
|
|
10895
10286
|
className: classNames.heading
|
|
10896
10287
|
}, verbiage.livenessFailedText), /*#__PURE__*/React__namespace.default.createElement(Description$2, {
|
|
10897
10288
|
className: classNames.description
|
|
10898
|
-
}, verbiage.livenessFailedReasonText || verbiage.descriptionText))) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
10289
|
+
}, verbiage.livenessFailedReasonText || verbiage.descriptionText))) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$6, {
|
|
10899
10290
|
className: classNames.heading
|
|
10900
10291
|
}, invalidSelfie ? verbiage.livenessFailedText : verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(Description$2, {
|
|
10901
10292
|
className: classNames.description
|
|
@@ -10940,21 +10331,18 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
|
|
|
10940
10331
|
}
|
|
10941
10332
|
}, !image ? invalidSelfie ? verbiage.retryButtonText : verbiage.captureBtnText : loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText)))));
|
|
10942
10333
|
};
|
|
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$
|
|
10334
|
+
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"])));
|
|
10335
|
+
var Heading$6 = styled__default.default.h3(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
10336
|
+
var Description$2 = styled__default.default.p(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
10337
|
+
var ImageContainer$5 = styled__default.default(OverlayImageContainer)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
10338
|
+
var StyledButtonsRow$7 = styled__default.default(ButtonsRow)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
10339
|
+
var templateObject_1$j, templateObject_2$d, templateObject_3$c, templateObject_4$7, templateObject_5$3;
|
|
10949
10340
|
|
|
10950
10341
|
var initialState$3 = {
|
|
10951
10342
|
videoWidth: 0,
|
|
10952
10343
|
videoHeight: 0,
|
|
10953
|
-
requireVerticalFaceCentering: true,
|
|
10954
|
-
busy: false,
|
|
10955
10344
|
frame: null,
|
|
10956
10345
|
faces: [],
|
|
10957
|
-
faceNotDetected: false,
|
|
10958
10346
|
faceNotCentered: false,
|
|
10959
10347
|
faceLookingAway: false,
|
|
10960
10348
|
faceTooClose: false,
|
|
@@ -10968,11 +10356,9 @@ var reducer$3 = function reducer(state, action) {
|
|
|
10968
10356
|
return _assign(_assign({}, state), action.payload);
|
|
10969
10357
|
case 'facesDetected':
|
|
10970
10358
|
{
|
|
10971
|
-
if (state.busy) return state;
|
|
10972
10359
|
var faces = action.payload.faces;
|
|
10973
10360
|
var face = faces[0];
|
|
10974
|
-
var
|
|
10975
|
-
var faceNotCentered = state.requireVerticalFaceCentering,
|
|
10361
|
+
var faceNotCentered = true,
|
|
10976
10362
|
faceLookingAway = false,
|
|
10977
10363
|
faceTooClose = false,
|
|
10978
10364
|
faceTooFar = false,
|
|
@@ -10990,10 +10376,8 @@ var reducer$3 = function reducer(state, action) {
|
|
|
10990
10376
|
var fTH = face.box.height * 0.2;
|
|
10991
10377
|
var nose = face.keypoints[2]; //.find((k) => k.name === 'noseTip')
|
|
10992
10378
|
if (nose) {
|
|
10379
|
+
faceNotCentered = Math.abs(vCX - fCX) > vTX || Math.abs(vCY + 50 - fCY) > vTY;
|
|
10993
10380
|
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
10381
|
}
|
|
10998
10382
|
var isMobile = state.videoWidth < state.videoHeight;
|
|
10999
10383
|
var tooCloseMultiple = isMobile ? 2 : 4.5;
|
|
@@ -11001,7 +10385,7 @@ var reducer$3 = function reducer(state, action) {
|
|
|
11001
10385
|
faceTooClose = face.box.width > state.videoWidth / tooCloseMultiple;
|
|
11002
10386
|
faceTooFar = face.box.width < state.videoWidth / tooFarMultiple;
|
|
11003
10387
|
}
|
|
11004
|
-
var faceReady = !
|
|
10388
|
+
var faceReady = !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
|
|
11005
10389
|
if (!faceReady) {
|
|
11006
10390
|
faceReadyAt = null;
|
|
11007
10391
|
} else if (!state.faceReady) {
|
|
@@ -11009,31 +10393,20 @@ var reducer$3 = function reducer(state, action) {
|
|
|
11009
10393
|
}
|
|
11010
10394
|
return _assign(_assign({}, state), {
|
|
11011
10395
|
faces: faces,
|
|
11012
|
-
faceNotDetected: faceNotDetected,
|
|
11013
10396
|
faceNotCentered: faceNotCentered,
|
|
11014
10397
|
faceLookingAway: faceLookingAway,
|
|
11015
10398
|
faceTooClose: faceTooClose,
|
|
11016
10399
|
faceTooFar: faceTooFar,
|
|
11017
10400
|
faceReady: faceReady,
|
|
11018
|
-
faceReadyAt: faceReadyAt
|
|
11019
|
-
busy: faceReady
|
|
10401
|
+
faceReadyAt: faceReadyAt
|
|
11020
10402
|
});
|
|
11021
10403
|
}
|
|
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
10404
|
}
|
|
11031
10405
|
};
|
|
11032
10406
|
var SelfieCapture = function SelfieCapture(_a) {
|
|
11033
10407
|
var _b;
|
|
11034
10408
|
var onGuidanceSatisfied = _a.onGuidanceSatisfied,
|
|
11035
10409
|
onGuidanceNotSatisfied = _a.onGuidanceNotSatisfied,
|
|
11036
|
-
onSelfieCaptureStarted = _a.onSelfieCaptureStarted,
|
|
11037
10410
|
onSelfieCaptured = _a.onSelfieCaptured,
|
|
11038
10411
|
onTimeout = _a.onTimeout,
|
|
11039
10412
|
onExit = _a.onExit,
|
|
@@ -11041,91 +10414,80 @@ var SelfieCapture = function SelfieCapture(_a) {
|
|
|
11041
10414
|
timeoutDurationMs = _c === void 0 ? 15000 : _c,
|
|
11042
10415
|
guidanceMessage = _a.guidanceMessage,
|
|
11043
10416
|
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];
|
|
10417
|
+
_d = _a.classNames,
|
|
10418
|
+
classNames = _d === void 0 ? {} : _d,
|
|
10419
|
+
_e = _a.colors,
|
|
10420
|
+
colors = _e === void 0 ? {} : _e,
|
|
10421
|
+
_f = _a.verbiage,
|
|
10422
|
+
rawVerbiage = _f === void 0 ? {} : _f,
|
|
10423
|
+
_g = _a.debugMode,
|
|
10424
|
+
debugMode = _g === void 0 ? false : _g;
|
|
10425
|
+
var _h = useResizeObserver__default.default(),
|
|
10426
|
+
ref = _h.ref,
|
|
10427
|
+
_j = _h.width,
|
|
10428
|
+
width = _j === void 0 ? 1 : _j,
|
|
10429
|
+
_k = _h.height,
|
|
10430
|
+
height = _k === void 0 ? 1 : _k;
|
|
10431
|
+
var _l = React.useReducer(reducer$3, initialState$3),
|
|
10432
|
+
state = _l[0],
|
|
10433
|
+
dispatch = _l[1];
|
|
11066
10434
|
var lastPredictionCanvas = React.useRef(null);
|
|
11067
|
-
var
|
|
11068
|
-
cameraRef =
|
|
11069
|
-
cameraReady =
|
|
11070
|
-
videoRef =
|
|
11071
|
-
var
|
|
11072
|
-
onPredictionMade =
|
|
11073
|
-
|
|
11074
|
-
guidanceError = _q.error;
|
|
10435
|
+
var _m = React.useContext(CameraStateContext),
|
|
10436
|
+
cameraRef = _m.cameraRef,
|
|
10437
|
+
cameraReady = _m.cameraReady,
|
|
10438
|
+
videoRef = _m.videoRef;
|
|
10439
|
+
var _o = React.useContext(SelfieGuidanceModelsContext),
|
|
10440
|
+
onPredictionMade = _o.onPredictionMade,
|
|
10441
|
+
guidanceError = _o.error;
|
|
11075
10442
|
React.useEffect(function () {
|
|
11076
10443
|
if (cameraReady && videoRef.current && videoRef.current.videoWidth !== 0) {
|
|
11077
10444
|
dispatch({
|
|
11078
10445
|
type: 'configure',
|
|
11079
10446
|
payload: {
|
|
11080
10447
|
videoWidth: videoRef.current.videoWidth,
|
|
11081
|
-
videoHeight: videoRef.current.videoHeight
|
|
11082
|
-
requireVerticalFaceCentering: requireVerticalFaceCentering
|
|
10448
|
+
videoHeight: videoRef.current.videoHeight
|
|
11083
10449
|
}
|
|
11084
10450
|
});
|
|
11085
10451
|
}
|
|
11086
|
-
}, [cameraReady,
|
|
11087
|
-
onPredictionMade(useDebounce.useThrottledCallback(
|
|
11088
|
-
|
|
11089
|
-
|
|
11090
|
-
|
|
11091
|
-
|
|
11092
|
-
type: 'facesDetected',
|
|
11093
|
-
payload: {
|
|
11094
|
-
faces: prediction
|
|
11095
|
-
}
|
|
11096
|
-
});
|
|
10452
|
+
}, [cameraReady, videoRef]);
|
|
10453
|
+
onPredictionMade(useDebounce.useThrottledCallback(function (prediction) {
|
|
10454
|
+
dispatch({
|
|
10455
|
+
type: 'facesDetected',
|
|
10456
|
+
payload: {
|
|
10457
|
+
faces: prediction
|
|
11097
10458
|
}
|
|
11098
|
-
resolve();
|
|
11099
10459
|
});
|
|
11100
|
-
},
|
|
10460
|
+
}, 16));
|
|
10461
|
+
var _p = React.useState(false),
|
|
10462
|
+
captureReady = _p[0],
|
|
10463
|
+
setCaptureReady = _p[1];
|
|
11101
10464
|
React.useEffect(function () {
|
|
11102
|
-
|
|
10465
|
+
var timer;
|
|
10466
|
+
if (state.faceReady) {
|
|
10467
|
+
onGuidanceSatisfied === null || onGuidanceSatisfied === void 0 ? void 0 : onGuidanceSatisfied();
|
|
10468
|
+
timer = setTimeout(function () {
|
|
10469
|
+
setCaptureReady(true);
|
|
10470
|
+
}, 1000);
|
|
10471
|
+
} else {
|
|
10472
|
+
onGuidanceNotSatisfied === null || onGuidanceNotSatisfied === void 0 ? void 0 : onGuidanceNotSatisfied();
|
|
10473
|
+
}
|
|
10474
|
+
return function () {
|
|
10475
|
+
if (timer) clearTimeout(timer);
|
|
10476
|
+
};
|
|
11103
10477
|
}, [onGuidanceNotSatisfied, onGuidanceSatisfied, state.faceReady]);
|
|
11104
10478
|
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');
|
|
10479
|
+
if (captureReady && videoRef.current && lastPredictionCanvas.current && state.faces.length > 0) {
|
|
10480
|
+
drawToCanvas(lastPredictionCanvas.current, videoRef.current);
|
|
10481
|
+
var ctx = lastPredictionCanvas.current.getContext('2d');
|
|
11114
10482
|
if (!ctx) return;
|
|
11115
|
-
var imageData = ctx.getImageData(0, 0,
|
|
10483
|
+
var imageData = ctx.getImageData(0, 0, videoRef.current.videoWidth, videoRef.current.videoHeight);
|
|
11116
10484
|
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;
|
|
10485
|
+
clearCanvas(lastPredictionCanvas.current);
|
|
10486
|
+
}
|
|
10487
|
+
}, [captureReady, onSelfieCaptured, state.faces, videoRef]);
|
|
10488
|
+
var _q = useTimeout(timeoutDurationMs, onTimeout),
|
|
10489
|
+
timedOut = _q.timedOut,
|
|
10490
|
+
timeoutStartedAt = _q.timeoutStartedAt;
|
|
11129
10491
|
var debugScalingDetails = useDebugScalingDetails({
|
|
11130
10492
|
enabled: debugMode,
|
|
11131
10493
|
pageWidth: width,
|
|
@@ -11140,26 +10502,24 @@ var SelfieCapture = function SelfieCapture(_a) {
|
|
|
11140
10502
|
guidanceLookStraightText: 'Look straight into the camera...',
|
|
11141
10503
|
guidanceMoveBackText: 'Move back...',
|
|
11142
10504
|
guidanceMoveForwardText: 'Move forward...',
|
|
11143
|
-
guidanceMoveToCenterText: 'Move to the center...'
|
|
11144
|
-
guidanceNoFaceDetectedText: 'Waiting for face to be detected...'
|
|
10505
|
+
guidanceMoveToCenterText: 'Move to the center...'
|
|
11145
10506
|
});
|
|
11146
10507
|
var satisfied = state.faceReady;
|
|
11147
10508
|
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 :
|
|
10509
|
+
guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : '');
|
|
11149
10510
|
if (guidanceError) {
|
|
11150
10511
|
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFallback, {
|
|
11151
10512
|
classNames: classNames.fallback
|
|
11152
10513
|
});
|
|
11153
10514
|
}
|
|
11154
|
-
var GuidesComponent = guidesComponent !== null && guidesComponent !== void 0 ? guidesComponent : FaceCaptureGuideOverlay;
|
|
11155
10515
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
11156
10516
|
ref: ref,
|
|
11157
10517
|
className: "flex ".concat((_b = classNames.container) !== null && _b !== void 0 ? _b : '')
|
|
11158
10518
|
}, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
11159
10519
|
ref: lastPredictionCanvas
|
|
11160
|
-
}), /*#__PURE__*/React__namespace.default.createElement(
|
|
10520
|
+
}), /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideOverlay, {
|
|
11161
10521
|
classNames: classNames.guides,
|
|
11162
|
-
|
|
10522
|
+
variant: satisfied ? 'satisfied' : 'unsatisfied'
|
|
11163
10523
|
}), guidanceMessage !== '' && ( /*#__PURE__*/React__namespace.default.createElement(GuidanceMessageContainer, {
|
|
11164
10524
|
className: classNames.guidanceMessageContainer
|
|
11165
10525
|
}, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
|
|
@@ -11191,26 +10551,15 @@ var initialState$2 = {
|
|
|
11191
10551
|
phoneDetected: false,
|
|
11192
10552
|
timesLivenessCheckFailed: 0
|
|
11193
10553
|
};
|
|
10554
|
+
/** 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.
|
|
10555
|
+
* There may also be some crossing of wires in how error/failed are used.
|
|
10556
|
+
*/
|
|
11194
10557
|
var reducer$2 = function reducer(state, action) {
|
|
11195
10558
|
var _a, _b;
|
|
11196
10559
|
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
10560
|
case 'livenessReady':
|
|
11212
10561
|
{
|
|
11213
|
-
var allowedStates = ['
|
|
10562
|
+
var allowedStates = ['CAPTURING', 'FAILED', 'ERROR'];
|
|
11214
10563
|
if (allowedStates.includes(state.requestState)) {
|
|
11215
10564
|
return _assign(_assign({}, state), {
|
|
11216
10565
|
requestState: 'CAPTURED',
|
|
@@ -11275,45 +10624,36 @@ var reducer$2 = function reducer(state, action) {
|
|
|
11275
10624
|
}
|
|
11276
10625
|
};
|
|
11277
10626
|
var FaceLivenessCapture = function FaceLivenessCapture(_a) {
|
|
11278
|
-
var _b, _c, _d
|
|
10627
|
+
var _b, _c, _d;
|
|
11279
10628
|
var onCapture = _a.onCapture,
|
|
11280
10629
|
onSuccess = _a.onSuccess,
|
|
11281
10630
|
onTimeout = _a.onTimeout,
|
|
11282
10631
|
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,
|
|
10632
|
+
_e = _a.timeoutDurationMs,
|
|
10633
|
+
timeoutDurationMs = _e === void 0 ? 15000 : _e,
|
|
10634
|
+
_f = _a.silentFallback,
|
|
10635
|
+
silentFallback = _f === void 0 ? false : _f,
|
|
10636
|
+
_g = _a.classNames,
|
|
10637
|
+
classNames = _g === void 0 ? {} : _g,
|
|
10638
|
+
_h = _a.colors,
|
|
10639
|
+
colors = _h === void 0 ? {} : _h,
|
|
10640
|
+
_j = _a.verbiage,
|
|
10641
|
+
rawVerbiage = _j === void 0 ? {} : _j,
|
|
11297
10642
|
debugMode = _a.debugMode;
|
|
11298
|
-
var
|
|
11299
|
-
checkLiveness =
|
|
11300
|
-
submissionError =
|
|
10643
|
+
var _k = React.useContext(SubmissionContext),
|
|
10644
|
+
checkLiveness = _k.checkLiveness,
|
|
10645
|
+
submissionError = _k.submissionError;
|
|
11301
10646
|
var modelError = React.useContext(SelfieGuidanceModelsContext).error;
|
|
11302
|
-
var
|
|
11303
|
-
state =
|
|
11304
|
-
dispatch =
|
|
11305
|
-
var
|
|
11306
|
-
imageUrl =
|
|
11307
|
-
setImageUrl =
|
|
10647
|
+
var _l = React.useReducer(reducer$2, initialState$2),
|
|
10648
|
+
state = _l[0],
|
|
10649
|
+
dispatch = _l[1];
|
|
10650
|
+
var _m = React.useState(null),
|
|
10651
|
+
imageUrl = _m[0],
|
|
10652
|
+
setImageUrl = _m[1];
|
|
11308
10653
|
var rawCanvas = React.useRef(null);
|
|
11309
10654
|
var cropCanvas = React.useRef(null);
|
|
11310
10655
|
var resizeCanvas = React.useRef(null);
|
|
11311
10656
|
var theme = styled.useTheme();
|
|
11312
|
-
var onSelfieCaptureStarted = React.useCallback(function () {
|
|
11313
|
-
dispatch({
|
|
11314
|
-
type: 'selfieCaptureStarted'
|
|
11315
|
-
});
|
|
11316
|
-
}, []);
|
|
11317
10657
|
var onSelfieCaptured = React.useCallback(function (frame, face) {
|
|
11318
10658
|
onCapture === null || onCapture === void 0 ? void 0 : onCapture();
|
|
11319
10659
|
dispatch({
|
|
@@ -11423,53 +10763,24 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
|
|
|
11423
10763
|
});
|
|
11424
10764
|
});
|
|
11425
10765
|
}, [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
10766
|
React.useEffect(function callSuccessIfAvailable() {
|
|
11436
10767
|
if (isPassed && state.imageUrl) onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(state.imageUrl);
|
|
11437
10768
|
}, [onSuccess, state.imageUrl, isPassed]);
|
|
11438
10769
|
React.useEffect(function timeoutOnTooManyLivenessCheckFailures() {
|
|
11439
10770
|
if (modelError) return;
|
|
11440
10771
|
var allowedFailures = 2;
|
|
11441
|
-
if (state.timesLivenessCheckFailed
|
|
10772
|
+
if (state.timesLivenessCheckFailed >= allowedFailures) {
|
|
11442
10773
|
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
|
|
11443
10774
|
}
|
|
11444
10775
|
}, [modelError, onTimeout, state.timesLivenessCheckFailed]);
|
|
11445
10776
|
useTimeout(timeoutDurationMs, onTimeout, state.requestState === 'PASSED' || !!modelError, state.requestState === 'IN_PROGRESS');
|
|
11446
10777
|
var verbiage = useTranslations(rawVerbiage, {
|
|
11447
|
-
guidanceLivenessCheckFailedText: 'Could not verify your face.',
|
|
11448
|
-
guidanceLivenessCheckErrorText: 'An error occurred while verifying your face.',
|
|
11449
10778
|
guidanceRemoveEyeCoveringsText: 'Please remove your eye coverings (sunglasses, eye patch, etc.)...',
|
|
11450
10779
|
guidanceRemoveHeadCoveringsText: 'Please remove your head coverings (hat, scarf, etc.)...',
|
|
11451
10780
|
guidanceRemoveMaskText: 'Please remove your mask...',
|
|
11452
10781
|
progressPreviewText: 'Processing...'
|
|
11453
10782
|
});
|
|
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
|
-
}, []);
|
|
10783
|
+
var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText : undefined;
|
|
11473
10784
|
if (modelError) {
|
|
11474
10785
|
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFallback, {
|
|
11475
10786
|
key: state.timesLivenessCheckFailed,
|
|
@@ -11486,25 +10797,19 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
|
|
|
11486
10797
|
}), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
11487
10798
|
ref: resizeCanvas
|
|
11488
10799
|
}), /*#__PURE__*/React__namespace.default.createElement(SelfieCapture, {
|
|
11489
|
-
shouldCapture: state.requestState === 'CAPTURING',
|
|
11490
|
-
onSelfieCaptureStarted: onSelfieCaptureStarted,
|
|
11491
10800
|
onSelfieCaptured: onSelfieCaptured,
|
|
11492
10801
|
onExit: onExit,
|
|
11493
10802
|
timeoutDurationMs: timeoutDurationMs,
|
|
11494
10803
|
guidanceMessage: guidanceMessage,
|
|
11495
10804
|
guidanceSatisfied: guidanceMessage ? false : undefined,
|
|
11496
|
-
onGuidanceSatisfied: onGuidanceSatisfied,
|
|
11497
|
-
onGuidanceNotSatisfied: onGuidanceNotSatisfied,
|
|
11498
|
-
guidesComponent: guidesByRequestState,
|
|
11499
|
-
requireVerticalFaceCentering: requireVerticalFaceCentering,
|
|
11500
10805
|
classNames: classNames,
|
|
11501
10806
|
colors: colors,
|
|
11502
10807
|
verbiage: verbiage,
|
|
11503
10808
|
debugMode: debugMode
|
|
11504
|
-
}), !
|
|
10809
|
+
}), !((_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
10810
|
classNames: classNames.imagePreview,
|
|
11506
10811
|
imageUrl: imageUrl,
|
|
11507
|
-
text: (
|
|
10812
|
+
text: (_d = verbiage.progressPreviewText) !== null && _d !== void 0 ? _d : ''
|
|
11508
10813
|
})));
|
|
11509
10814
|
};
|
|
11510
10815
|
|
|
@@ -11527,7 +10832,7 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
|
11527
10832
|
className: classNames.container
|
|
11528
10833
|
}, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
|
|
11529
10834
|
className: classNames.inner
|
|
11530
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
10835
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Heading$5, {
|
|
11531
10836
|
className: classNames.heading
|
|
11532
10837
|
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(OverlayImageContainer, {
|
|
11533
10838
|
className: classNames.imageContainer
|
|
@@ -11535,7 +10840,7 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
|
11535
10840
|
alt: verbiage.headingText,
|
|
11536
10841
|
src: imageUrl,
|
|
11537
10842
|
className: classNames.image
|
|
11538
|
-
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow
|
|
10843
|
+
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
11539
10844
|
className: classNames.buttonsRow
|
|
11540
10845
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
11541
10846
|
variant: "warning",
|
|
@@ -11551,8 +10856,8 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
|
11551
10856
|
finished: true
|
|
11552
10857
|
}, verbiage.doneBtnText))));
|
|
11553
10858
|
};
|
|
11554
|
-
var Heading$
|
|
11555
|
-
var templateObject_1$
|
|
10859
|
+
var Heading$5 = styled__default.default.h3(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
10860
|
+
var templateObject_1$i;
|
|
11556
10861
|
|
|
11557
10862
|
var FaceLivenessFailure = function FaceLivenessFailure(_a) {
|
|
11558
10863
|
var _b = _a.canRetry,
|
|
@@ -11567,48 +10872,42 @@ var FaceLivenessFailure = function FaceLivenessFailure(_a) {
|
|
|
11567
10872
|
colors = _e === void 0 ? {} : _e,
|
|
11568
10873
|
_f = _a.verbiage,
|
|
11569
10874
|
rawVerbiage = _f === void 0 ? {} : _f;
|
|
11570
|
-
assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/
|
|
10875
|
+
assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/manual_capture.png"));
|
|
11571
10876
|
var verbiage = useTranslations(rawVerbiage, {
|
|
11572
10877
|
headingText: 'Live face not detected, please try again',
|
|
11573
10878
|
retryBtnText: 'Retry',
|
|
11574
10879
|
exitBtnText: 'Exit'
|
|
11575
10880
|
});
|
|
11576
|
-
return /*#__PURE__*/React__namespace.default.createElement(
|
|
10881
|
+
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
11577
10882
|
className: classNames.container
|
|
11578
10883
|
}, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
|
|
11579
10884
|
className: classNames.inner
|
|
11580
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
10885
|
+
}, /*#__PURE__*/React__namespace.default.createElement("h3", {
|
|
10886
|
+
className: classNames.heading
|
|
10887
|
+
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ImageContainer$4, {
|
|
11581
10888
|
className: classNames.imageContainer
|
|
11582
10889
|
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
11583
10890
|
alt: verbiage.headingText,
|
|
11584
10891
|
src: assets.imageUrl,
|
|
11585
10892
|
className: classNames.image
|
|
11586
|
-
})), /*#__PURE__*/React__namespace.default.createElement(
|
|
11587
|
-
className: classNames.heading
|
|
11588
|
-
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
10893
|
+
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
11589
10894
|
className: classNames.buttonsRow
|
|
11590
|
-
}, canRetry && ( /*#__PURE__*/React__namespace.default.createElement(
|
|
11591
|
-
variant: "
|
|
10895
|
+
}, canRetry && ( /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10896
|
+
variant: "warning",
|
|
11592
10897
|
className: classNames.retryBtn,
|
|
11593
10898
|
onClick: onRetryClick,
|
|
11594
10899
|
colors: colors.retryBtn,
|
|
11595
10900
|
finished: true
|
|
11596
|
-
}, verbiage.retryBtnText)), /*#__PURE__*/React__namespace.default.createElement(
|
|
10901
|
+
}, verbiage.retryBtnText)), /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
11597
10902
|
variant: "secondary",
|
|
11598
10903
|
className: classNames.exitBtn,
|
|
11599
10904
|
onClick: onExitClick,
|
|
11600
10905
|
colors: colors.exitBtn,
|
|
11601
10906
|
finished: true
|
|
11602
|
-
}, verbiage.exitBtnText))))
|
|
10907
|
+
}, verbiage.exitBtnText))));
|
|
11603
10908
|
};
|
|
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;
|
|
10909
|
+
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"])));
|
|
10910
|
+
var templateObject_1$h;
|
|
11612
10911
|
|
|
11613
10912
|
var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
|
|
11614
10913
|
var _b;
|
|
@@ -11649,11 +10948,11 @@ var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
|
|
|
11649
10948
|
finished: true
|
|
11650
10949
|
}, verbiage.retryBtnText)));
|
|
11651
10950
|
};
|
|
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$
|
|
10951
|
+
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"])));
|
|
10952
|
+
var StyledOverlayImageContainer$1 = styled__default.default(OverlayImageContainer)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
10953
|
+
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
10954
|
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$
|
|
10955
|
+
var templateObject_1$g, templateObject_2$c, templateObject_3$b, templateObject_4$6;
|
|
11657
10956
|
|
|
11658
10957
|
var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLegacy(_a) {
|
|
11659
10958
|
var onDismissed = _a.onDismissed,
|
|
@@ -11732,9 +11031,273 @@ var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLega
|
|
|
11732
11031
|
}
|
|
11733
11032
|
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
|
|
11734
11033
|
};
|
|
11735
|
-
var StyledGuidanceMessage$1 = styled__default.default(GuidanceMessage)(templateObject_1$
|
|
11736
|
-
var StyledButtonsRow$6 = styled__default.default(ButtonsRow
|
|
11737
|
-
var templateObject_1$
|
|
11034
|
+
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"])));
|
|
11035
|
+
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"])));
|
|
11036
|
+
var templateObject_1$f, templateObject_2$b;
|
|
11037
|
+
|
|
11038
|
+
function SelfieCaptureLoadingGraphic(_a) {
|
|
11039
|
+
var _b, _c, _d;
|
|
11040
|
+
var _e = _a.width,
|
|
11041
|
+
width = _e === void 0 ? 840 : _e,
|
|
11042
|
+
_f = _a.height,
|
|
11043
|
+
height = _f === void 0 ? 740 : _f,
|
|
11044
|
+
className = _a.className;
|
|
11045
|
+
var _g = React.useState(1),
|
|
11046
|
+
frame = _g[0],
|
|
11047
|
+
setFrame = _g[1];
|
|
11048
|
+
React.useEffect(function () {
|
|
11049
|
+
var i = setInterval(function () {
|
|
11050
|
+
setFrame(function (n) {
|
|
11051
|
+
return (n + 1) % 10;
|
|
11052
|
+
});
|
|
11053
|
+
}, 750);
|
|
11054
|
+
return function () {
|
|
11055
|
+
clearInterval(i);
|
|
11056
|
+
};
|
|
11057
|
+
}, []);
|
|
11058
|
+
var theme = styled.useTheme();
|
|
11059
|
+
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)';
|
|
11060
|
+
return /*#__PURE__*/React__namespace.default.createElement("svg", {
|
|
11061
|
+
width: width,
|
|
11062
|
+
height: height,
|
|
11063
|
+
className: className,
|
|
11064
|
+
viewBox: "0 0 840 740",
|
|
11065
|
+
fill: "none",
|
|
11066
|
+
preserveAspectRatio: "xMidYMax slice",
|
|
11067
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
11068
|
+
}, /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
11069
|
+
clipPath: "url(#clip0_428_1188)"
|
|
11070
|
+
}, /*#__PURE__*/React__namespace.default.createElement("mask", {
|
|
11071
|
+
id: "mask0_428_1188",
|
|
11072
|
+
style: {
|
|
11073
|
+
maskType: 'alpha'
|
|
11074
|
+
},
|
|
11075
|
+
maskUnits: "userSpaceOnUse",
|
|
11076
|
+
x: "0",
|
|
11077
|
+
y: "0",
|
|
11078
|
+
width: "840",
|
|
11079
|
+
height: "740"
|
|
11080
|
+
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
11081
|
+
width: "840",
|
|
11082
|
+
height: "740",
|
|
11083
|
+
fill: "#D9D9D9"
|
|
11084
|
+
})), /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
11085
|
+
mask: "url(#mask0_428_1188)"
|
|
11086
|
+
}, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11087
|
+
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",
|
|
11088
|
+
fill: "#D2D4DA"
|
|
11089
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11090
|
+
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",
|
|
11091
|
+
fill: "#F7A69C"
|
|
11092
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11093
|
+
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",
|
|
11094
|
+
fill: "#F7A69C"
|
|
11095
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11096
|
+
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",
|
|
11097
|
+
fill: "#DC968D"
|
|
11098
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11099
|
+
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",
|
|
11100
|
+
fill: "#F7A69C"
|
|
11101
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11102
|
+
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",
|
|
11103
|
+
fill: "#FEAEA5"
|
|
11104
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11105
|
+
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",
|
|
11106
|
+
fill: "#F7A69C"
|
|
11107
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11108
|
+
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",
|
|
11109
|
+
fill: "#6E7174"
|
|
11110
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11111
|
+
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",
|
|
11112
|
+
fill: "#555A5E"
|
|
11113
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11114
|
+
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",
|
|
11115
|
+
fill: "#525252"
|
|
11116
|
+
})), frame >= 8 ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11117
|
+
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",
|
|
11118
|
+
stroke: accentColor,
|
|
11119
|
+
strokeWidth: "5"
|
|
11120
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11121
|
+
cx: "518.5",
|
|
11122
|
+
cy: "438.5",
|
|
11123
|
+
r: "25.5",
|
|
11124
|
+
fill: accentColor
|
|
11125
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11126
|
+
d: "M504 440.5L512 448L531 427",
|
|
11127
|
+
stroke: "white",
|
|
11128
|
+
strokeWidth: "5",
|
|
11129
|
+
strokeLinecap: "round",
|
|
11130
|
+
strokeLinejoin: "round"
|
|
11131
|
+
}))) : ( /*#__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", {
|
|
11132
|
+
d: "M298.5 182.5L419 164.5L540 182",
|
|
11133
|
+
stroke: "white",
|
|
11134
|
+
strokeWidth: "2",
|
|
11135
|
+
strokeLinecap: "round",
|
|
11136
|
+
strokeLinejoin: "round"
|
|
11137
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11138
|
+
cx: "419",
|
|
11139
|
+
cy: "165",
|
|
11140
|
+
r: "7",
|
|
11141
|
+
fill: "white"
|
|
11142
|
+
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11143
|
+
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",
|
|
11144
|
+
stroke: "white",
|
|
11145
|
+
strokeOpacity: frame > 7 ? 0.8 : frame > 5 ? 0.3 : 0.1,
|
|
11146
|
+
strokeWidth: "5"
|
|
11147
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11148
|
+
d: "M299.939 262.805L419 478.5L538.5 261.5",
|
|
11149
|
+
stroke: "white",
|
|
11150
|
+
strokeWidth: "2",
|
|
11151
|
+
strokeLinecap: "round",
|
|
11152
|
+
strokeLinejoin: "round"
|
|
11153
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11154
|
+
d: "M298.5 182.5L418.871 230.054L540 182",
|
|
11155
|
+
stroke: "white",
|
|
11156
|
+
strokeWidth: "2",
|
|
11157
|
+
strokeLinecap: "round",
|
|
11158
|
+
strokeLinejoin: "round"
|
|
11159
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11160
|
+
d: "M298.5 182.5L299.939 262.805",
|
|
11161
|
+
stroke: "white",
|
|
11162
|
+
strokeWidth: "2",
|
|
11163
|
+
strokeLinecap: "round",
|
|
11164
|
+
strokeLinejoin: "round"
|
|
11165
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11166
|
+
d: "M540.001 182L538.501 261.5",
|
|
11167
|
+
stroke: "white",
|
|
11168
|
+
strokeWidth: "2",
|
|
11169
|
+
strokeLinecap: "round",
|
|
11170
|
+
strokeLinejoin: "round"
|
|
11171
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11172
|
+
cx: "299.914",
|
|
11173
|
+
cy: "182",
|
|
11174
|
+
r: "7",
|
|
11175
|
+
fill: "white"
|
|
11176
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11177
|
+
cx: "540",
|
|
11178
|
+
cy: "182",
|
|
11179
|
+
r: "7",
|
|
11180
|
+
fill: "white"
|
|
11181
|
+
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11182
|
+
d: "M418.828 230L419 342.5",
|
|
11183
|
+
stroke: "white",
|
|
11184
|
+
strokeWidth: "2",
|
|
11185
|
+
strokeLinecap: "round",
|
|
11186
|
+
strokeLinejoin: "round",
|
|
11187
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11188
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11189
|
+
d: "M300 263.001L419 342.501",
|
|
11190
|
+
stroke: "white",
|
|
11191
|
+
strokeWidth: "2",
|
|
11192
|
+
strokeLinecap: "round",
|
|
11193
|
+
strokeLinejoin: "round",
|
|
11194
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11195
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11196
|
+
d: "M538.5 261.5L419 342.5",
|
|
11197
|
+
stroke: "white",
|
|
11198
|
+
strokeWidth: "2",
|
|
11199
|
+
strokeLinecap: "round",
|
|
11200
|
+
strokeLinejoin: "round",
|
|
11201
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11202
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11203
|
+
d: "M301.5 409L419 342.5",
|
|
11204
|
+
stroke: "white",
|
|
11205
|
+
strokeWidth: "2",
|
|
11206
|
+
strokeLinecap: "round",
|
|
11207
|
+
strokeLinejoin: "round",
|
|
11208
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11209
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11210
|
+
d: "M536.5 410L419 342.5",
|
|
11211
|
+
stroke: "white",
|
|
11212
|
+
strokeWidth: "2",
|
|
11213
|
+
strokeLinecap: "round",
|
|
11214
|
+
strokeLinejoin: "round",
|
|
11215
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11216
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11217
|
+
d: "M300 263L419 230",
|
|
11218
|
+
stroke: "white",
|
|
11219
|
+
strokeWidth: "2",
|
|
11220
|
+
strokeLinecap: "round",
|
|
11221
|
+
strokeLinejoin: "round",
|
|
11222
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11223
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11224
|
+
d: "M538.5 261.5L419 230",
|
|
11225
|
+
stroke: "white",
|
|
11226
|
+
strokeWidth: "2",
|
|
11227
|
+
strokeLinecap: "round",
|
|
11228
|
+
strokeLinejoin: "round",
|
|
11229
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11230
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11231
|
+
cx: "419",
|
|
11232
|
+
cy: "229.971",
|
|
11233
|
+
r: "7",
|
|
11234
|
+
fill: "white"
|
|
11235
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11236
|
+
cx: "419",
|
|
11237
|
+
cy: "342.4",
|
|
11238
|
+
r: "7",
|
|
11239
|
+
fill: "white"
|
|
11240
|
+
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11241
|
+
d: "M538.5 261.5L536.5 410",
|
|
11242
|
+
stroke: "white",
|
|
11243
|
+
strokeWidth: "2",
|
|
11244
|
+
strokeLinecap: "round",
|
|
11245
|
+
strokeLinejoin: "round",
|
|
11246
|
+
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
11247
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11248
|
+
d: "M419 478.5L536.5 410",
|
|
11249
|
+
stroke: "white",
|
|
11250
|
+
strokeWidth: "2",
|
|
11251
|
+
strokeLinecap: "round",
|
|
11252
|
+
strokeLinejoin: "round",
|
|
11253
|
+
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
11254
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11255
|
+
cx: "537",
|
|
11256
|
+
cy: "263",
|
|
11257
|
+
r: "7",
|
|
11258
|
+
fill: "white"
|
|
11259
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11260
|
+
cx: "537",
|
|
11261
|
+
cy: "409",
|
|
11262
|
+
r: "7",
|
|
11263
|
+
fill: "white"
|
|
11264
|
+
}))), frame > 1 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11265
|
+
d: "M301.501 409L300.001 263",
|
|
11266
|
+
stroke: "white",
|
|
11267
|
+
strokeWidth: "2",
|
|
11268
|
+
strokeLinecap: "round",
|
|
11269
|
+
strokeLinejoin: "round",
|
|
11270
|
+
strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
|
|
11271
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11272
|
+
d: "M301.501 409L419.001 478.5",
|
|
11273
|
+
stroke: "white",
|
|
11274
|
+
strokeWidth: "2",
|
|
11275
|
+
strokeLinecap: "round",
|
|
11276
|
+
strokeLinejoin: "round",
|
|
11277
|
+
strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
|
|
11278
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11279
|
+
cx: "419",
|
|
11280
|
+
cy: "477.576",
|
|
11281
|
+
r: "7",
|
|
11282
|
+
fill: "white"
|
|
11283
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11284
|
+
cx: "301.914",
|
|
11285
|
+
cy: "263",
|
|
11286
|
+
r: "7",
|
|
11287
|
+
fill: "white"
|
|
11288
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11289
|
+
cx: "301.444",
|
|
11290
|
+
cy: "409",
|
|
11291
|
+
r: "7",
|
|
11292
|
+
fill: "white"
|
|
11293
|
+
})))))), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
|
|
11294
|
+
id: "clip0_428_1188"
|
|
11295
|
+
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
11296
|
+
width: "840",
|
|
11297
|
+
height: "740",
|
|
11298
|
+
fill: "white"
|
|
11299
|
+
}))));
|
|
11300
|
+
}
|
|
11738
11301
|
|
|
11739
11302
|
var legacyInstructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png");
|
|
11740
11303
|
var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDefault(_a) {
|
|
@@ -11848,21 +11411,21 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
|
|
|
11848
11411
|
}
|
|
11849
11412
|
}, verbiage.continueText))))));
|
|
11850
11413
|
};
|
|
11851
|
-
var OverlayInner = styled__default.default.div(templateObject_1$
|
|
11414
|
+
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
11415
|
var _a, _b, _c, _d;
|
|
11853
11416
|
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
11417
|
}, function (props) {
|
|
11855
11418
|
var _a, _b, _c, _d;
|
|
11856
11419
|
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
11420
|
});
|
|
11858
|
-
var OverlayHeader = styled__default.default.div(templateObject_2$
|
|
11421
|
+
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
11422
|
var _a;
|
|
11860
11423
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
11861
11424
|
}, function (props) {
|
|
11862
11425
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
11863
11426
|
});
|
|
11864
|
-
var StyledGuidanceMessage = styled__default.default(GuidanceMessage)(templateObject_3$
|
|
11865
|
-
var StyledButtonsRow$5 = styled__default.default(ButtonsRow
|
|
11427
|
+
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"])));
|
|
11428
|
+
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
11429
|
var _a, _b, _c, _d;
|
|
11867
11430
|
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
11431
|
}, function (props) {
|
|
@@ -11897,7 +11460,7 @@ var ContinueButton = styled__default.default(LoaderButton)(templateObject_15 ||
|
|
|
11897
11460
|
var _a, _b, _c, _d, _e, _f;
|
|
11898
11461
|
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
11462
|
});
|
|
11900
|
-
var templateObject_1$
|
|
11463
|
+
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
11464
|
|
|
11902
11465
|
var components = {
|
|
11903
11466
|
"default": SelfieCaptureLoadingOverlayDefault,
|
|
@@ -11934,44 +11497,40 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
11934
11497
|
releaseCameraAccessOnExit = _k === void 0 ? true : _k,
|
|
11935
11498
|
_l = _a.silentFallback,
|
|
11936
11499
|
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];
|
|
11500
|
+
_m = _a.assets,
|
|
11501
|
+
assets = _m === void 0 ? {} : _m,
|
|
11502
|
+
_o = _a.classNames,
|
|
11503
|
+
classNames = _o === void 0 ? {} : _o,
|
|
11504
|
+
_p = _a.colors,
|
|
11505
|
+
colors = _p === void 0 ? {} : _p,
|
|
11506
|
+
_q = _a.verbiage,
|
|
11507
|
+
verbiage = _q === void 0 ? {} : _q,
|
|
11508
|
+
_r = _a.debugMode,
|
|
11509
|
+
debugMode = _r === void 0 ? false : _r;
|
|
11510
|
+
var _s = React.useContext(SubmissionContext),
|
|
11511
|
+
submissionResponse = _s.submissionResponse,
|
|
11512
|
+
livenessCheckRequest = _s.livenessCheckRequest,
|
|
11513
|
+
setSelfieImage = _s.setSelfieImage,
|
|
11514
|
+
logSelfieCaptureAttempt = _s.logSelfieCaptureAttempt;
|
|
11515
|
+
var _t = React.useContext(CameraStateContext),
|
|
11516
|
+
cameraAccessDenied = _t.cameraAccessDenied,
|
|
11517
|
+
requestCameraAccess = _t.requestCameraAccess,
|
|
11518
|
+
releaseCameraAccess = _t.releaseCameraAccess;
|
|
11519
|
+
var _u = React.useState(''),
|
|
11520
|
+
faceCropImageUrl = _u[0],
|
|
11521
|
+
setFaceCropImageUrl = _u[1];
|
|
11522
|
+
var _v = React.useState(0),
|
|
11523
|
+
retryCount = _v[0],
|
|
11524
|
+
setRetryCount = _v[1];
|
|
11525
|
+
var _w = React.useState('LOADING'),
|
|
11526
|
+
captureState = _w[0],
|
|
11527
|
+
setCaptureState = _w[1];
|
|
11969
11528
|
var captureStartedAt = React.useRef();
|
|
11970
11529
|
var captureEndedAt = React.useRef();
|
|
11971
11530
|
var operationStartedAt = React.useRef();
|
|
11972
|
-
var
|
|
11973
|
-
start =
|
|
11974
|
-
stop =
|
|
11531
|
+
var _x = React.useContext(SelfieGuidanceModelsContext),
|
|
11532
|
+
start = _x.start,
|
|
11533
|
+
stop = _x.stop;
|
|
11975
11534
|
React.useEffect(function () {
|
|
11976
11535
|
operationStartedAt.current = new Date();
|
|
11977
11536
|
}, []);
|
|
@@ -12019,9 +11578,9 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
12019
11578
|
setCaptureState('FAILED');
|
|
12020
11579
|
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout(submissionResponse, livenessCheckRequest);
|
|
12021
11580
|
}, [onTimeout, livenessCheckRequest, submissionResponse]);
|
|
12022
|
-
var
|
|
12023
|
-
attempt =
|
|
12024
|
-
setAttempt =
|
|
11581
|
+
var _y = React.useState(0),
|
|
11582
|
+
attempt = _y[0],
|
|
11583
|
+
setAttempt = _y[1];
|
|
12025
11584
|
var onExitCallback = React.useCallback(function () {
|
|
12026
11585
|
setAttempt(function (n) {
|
|
12027
11586
|
return n + 1;
|
|
@@ -12074,9 +11633,6 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
12074
11633
|
onExit: onExitCallback,
|
|
12075
11634
|
timeoutDurationMs: timeoutDurationMs,
|
|
12076
11635
|
silentFallback: silentFallback,
|
|
12077
|
-
guidesComponent: guidesComponent,
|
|
12078
|
-
disableCapturePreview: disableCapturePreview,
|
|
12079
|
-
requireVerticalFaceCentering: requireVerticalFaceCentering,
|
|
12080
11636
|
classNames: classNames.capture,
|
|
12081
11637
|
colors: colors,
|
|
12082
11638
|
verbiage: verbiage,
|
|
@@ -12275,11 +11831,11 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
|
|
|
12275
11831
|
}
|
|
12276
11832
|
}, verbiage.captureBtnText)))));
|
|
12277
11833
|
};
|
|
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$
|
|
11834
|
+
var Inner = styled__default.default(OverlayInner$2)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
11835
|
+
var Heading$4 = styled__default.default.h3(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
11836
|
+
var Description = styled__default.default.p(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
11837
|
+
var StyledButtonsRow$4 = styled__default.default(ButtonsRow)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
11838
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$9, templateObject_4$4;
|
|
12283
11839
|
|
|
12284
11840
|
var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_a) {
|
|
12285
11841
|
var documents = _a.documents,
|
|
@@ -12423,7 +11979,7 @@ function convertSVGtoImg(svgData_1) {
|
|
|
12423
11979
|
});
|
|
12424
11980
|
}
|
|
12425
11981
|
|
|
12426
|
-
var SignaturePaperBacking = styled__default.default.div(templateObject_1$
|
|
11982
|
+
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
11983
|
var _a, _b;
|
|
12428
11984
|
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
11985
|
}, function (props) {
|
|
@@ -12433,8 +11989,8 @@ var SignaturePaperBacking = styled__default.default.div(templateObject_1$d || (t
|
|
|
12433
11989
|
var _a, _b;
|
|
12434
11990
|
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
11991
|
});
|
|
12436
|
-
var SignatureCanvasContainer = styled__default.default.div(templateObject_2$
|
|
12437
|
-
var SignaturePad = styled__default.default.div(templateObject_3$
|
|
11992
|
+
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"])));
|
|
11993
|
+
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
11994
|
var _a, _b, _c;
|
|
12439
11995
|
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
11996
|
}, function (props) {
|
|
@@ -12444,8 +12000,8 @@ var SignaturePad = styled__default.default.div(templateObject_3$9 || (templateOb
|
|
|
12444
12000
|
var _a, _b, _c;
|
|
12445
12001
|
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
12002
|
});
|
|
12447
|
-
var SignatureButtonsContainer = styled__default.default(ButtonsRow
|
|
12448
|
-
var templateObject_1$
|
|
12003
|
+
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"])));
|
|
12004
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$8, templateObject_4$3;
|
|
12449
12005
|
|
|
12450
12006
|
var SignatureCapture = function SignatureCapture(_a) {
|
|
12451
12007
|
var _b;
|
|
@@ -12516,8 +12072,8 @@ var SignatureCapture = function SignatureCapture(_a) {
|
|
|
12516
12072
|
finished: true
|
|
12517
12073
|
}, verbiage.acceptBtnText)))));
|
|
12518
12074
|
};
|
|
12519
|
-
var AcceptBtn$1 = styled__default.default(LoaderButton)(templateObject_1$
|
|
12520
|
-
var templateObject_1$
|
|
12075
|
+
var AcceptBtn$1 = styled__default.default(LoaderButton)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
|
|
12076
|
+
var templateObject_1$b;
|
|
12521
12077
|
|
|
12522
12078
|
var useVideoRecorder = function useVideoRecorder(camera, audioStream, mergeAVStreams) {
|
|
12523
12079
|
if (mergeAVStreams === void 0) {
|
|
@@ -12874,8 +12430,8 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
|
|
|
12874
12430
|
ref: outputCanvas
|
|
12875
12431
|
}));
|
|
12876
12432
|
};
|
|
12877
|
-
var AcceptBtn = styled__default.default(LoaderButton)(templateObject_1$
|
|
12878
|
-
var templateObject_1$
|
|
12433
|
+
var AcceptBtn = styled__default.default(LoaderButton)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
|
|
12434
|
+
var templateObject_1$a;
|
|
12879
12435
|
|
|
12880
12436
|
var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
12881
12437
|
var videoUrl = _a.videoUrl,
|
|
@@ -12914,7 +12470,7 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
|
12914
12470
|
style: {
|
|
12915
12471
|
display: 'none'
|
|
12916
12472
|
}
|
|
12917
|
-
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow
|
|
12473
|
+
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
12918
12474
|
className: classNames.buttonsRow
|
|
12919
12475
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
12920
12476
|
variant: "warning",
|
|
@@ -12930,8 +12486,8 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
|
12930
12486
|
finished: true
|
|
12931
12487
|
}, verbiage.doneBtnText))));
|
|
12932
12488
|
};
|
|
12933
|
-
var StyledVideo$1 = styled__default.default.video(templateObject_1$
|
|
12934
|
-
var templateObject_1$
|
|
12489
|
+
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"])));
|
|
12490
|
+
var templateObject_1$9;
|
|
12935
12491
|
|
|
12936
12492
|
var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
12937
12493
|
var _b;
|
|
@@ -13110,91 +12666,18 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
|
13110
12666
|
}));
|
|
13111
12667
|
};
|
|
13112
12668
|
|
|
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
12669
|
var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
13188
12670
|
var _b;
|
|
13189
|
-
var
|
|
13190
|
-
|
|
13191
|
-
|
|
13192
|
-
|
|
13193
|
-
borderWidth =
|
|
13194
|
-
|
|
12671
|
+
var className = _a.className,
|
|
12672
|
+
imageWidth = _a.imageWidth,
|
|
12673
|
+
imageHeight = _a.imageHeight,
|
|
12674
|
+
_c = _a.borderWidth,
|
|
12675
|
+
borderWidth = _c === void 0 ? 4 : _c,
|
|
12676
|
+
_d = _a.assets,
|
|
12677
|
+
assets = _d === void 0 ? {} : _d;
|
|
13195
12678
|
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-
|
|
12679
|
+
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
|
|
12680
|
+
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
|
|
13198
12681
|
var isMirrored = !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing);
|
|
13199
12682
|
var _e = React.useState(1),
|
|
13200
12683
|
transitionTime = _e[0],
|
|
@@ -13223,36 +12706,39 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
|
13223
12706
|
clearTimeout(timeout);
|
|
13224
12707
|
};
|
|
13225
12708
|
}, []);
|
|
13226
|
-
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(
|
|
13227
|
-
|
|
13228
|
-
|
|
13229
|
-
|
|
13230
|
-
borderColor: borderColor,
|
|
12709
|
+
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(FlipImage, {
|
|
12710
|
+
src: assets.frontImageUrl,
|
|
12711
|
+
alt: "",
|
|
12712
|
+
className: className,
|
|
13231
12713
|
"$transforms": frontTransforms.join(' '),
|
|
13232
12714
|
"$transitionTime": transitionTime,
|
|
13233
|
-
"$
|
|
13234
|
-
|
|
13235
|
-
|
|
13236
|
-
|
|
13237
|
-
|
|
13238
|
-
|
|
13239
|
-
className:
|
|
13240
|
-
status: "disabled",
|
|
13241
|
-
borderWidth: borderWidth,
|
|
13242
|
-
borderColor: borderColor,
|
|
12715
|
+
"$borderWidth": borderWidth,
|
|
12716
|
+
"$imageWidth": imageWidth,
|
|
12717
|
+
"$imageHeight": imageHeight
|
|
12718
|
+
}), /*#__PURE__*/React__namespace.default.createElement(FlipImage, {
|
|
12719
|
+
src: assets.backImageUrl,
|
|
12720
|
+
alt: "",
|
|
12721
|
+
className: className,
|
|
13243
12722
|
"$transforms": backTransforms.join(' '),
|
|
13244
12723
|
"$transitionTime": transitionTime,
|
|
13245
|
-
"$
|
|
13246
|
-
|
|
13247
|
-
|
|
13248
|
-
|
|
13249
|
-
|
|
13250
|
-
})));
|
|
12724
|
+
"$borderWidth": borderWidth,
|
|
12725
|
+
"$imageWidth": imageWidth,
|
|
12726
|
+
"$imageHeight": imageHeight,
|
|
12727
|
+
"$isBack": true
|
|
12728
|
+
}));
|
|
13251
12729
|
};
|
|
13252
|
-
var
|
|
12730
|
+
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
12731
|
return props.$transitionTime;
|
|
13254
12732
|
}, function (props) {
|
|
13255
12733
|
return props.$transforms;
|
|
12734
|
+
}, function (props) {
|
|
12735
|
+
return props.$isBack ? 'absolute' : 'relative';
|
|
12736
|
+
}, function (props) {
|
|
12737
|
+
return -props.$borderWidth / 2;
|
|
12738
|
+
}, function (props) {
|
|
12739
|
+
return props.$imageWidth;
|
|
12740
|
+
}, function (props) {
|
|
12741
|
+
return props.$imageHeight + props.$borderWidth;
|
|
13256
12742
|
});
|
|
13257
12743
|
var templateObject_1$8;
|
|
13258
12744
|
|
|
@@ -13262,84 +12748,98 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
|
|
|
13262
12748
|
requestedAction = _y === void 0 ? 'SHOW_ID_FRONT' : _y,
|
|
13263
12749
|
_z = _a.satisfied,
|
|
13264
12750
|
satisfied = _z === void 0 ? false : _z,
|
|
13265
|
-
_0 = _a.faceGuideStatus,
|
|
13266
|
-
faceGuideStatus = _0 === void 0 ? 'success' : _0,
|
|
13267
12751
|
faceGuideBorderWidth = _a.faceGuideBorderWidth,
|
|
13268
12752
|
faceGuideBorderColor = _a.faceGuideBorderColor,
|
|
13269
|
-
_1 = _a.idCardGuideStatus,
|
|
13270
|
-
idCardGuideStatus = _1 === void 0 ? 'ready' : _1,
|
|
13271
12753
|
idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
|
|
13272
12754
|
idCardGuideBorderColor = _a.idCardGuideBorderColor,
|
|
13273
|
-
|
|
13274
|
-
assets =
|
|
13275
|
-
|
|
13276
|
-
classNames =
|
|
13277
|
-
|
|
13278
|
-
rawVerbiage =
|
|
12755
|
+
_0 = _a.assets,
|
|
12756
|
+
assets = _0 === void 0 ? {} : _0,
|
|
12757
|
+
_1 = _a.classNames,
|
|
12758
|
+
classNames = _1 === void 0 ? {} : _1,
|
|
12759
|
+
_2 = _a.verbiage,
|
|
12760
|
+
rawVerbiage = _2 === void 0 ? {} : _2;
|
|
13279
12761
|
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
13280
12762
|
var imageRef = React.useRef(null);
|
|
13281
|
-
|
|
13282
|
-
|
|
12763
|
+
var _3 = React.useState(0),
|
|
12764
|
+
imageWidth = _3[0],
|
|
12765
|
+
setImageWidth = _3[1];
|
|
12766
|
+
var _4 = React.useState(0),
|
|
12767
|
+
imageHeight = _4[0],
|
|
12768
|
+
setImageHeight = _4[1];
|
|
12769
|
+
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
|
|
12770
|
+
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
|
|
13283
12771
|
var verbiage = useTranslations(rawVerbiage, {
|
|
13284
12772
|
idFrontInstructionText: 'Display the front of your ID card...',
|
|
13285
12773
|
idBackInstructionText: 'Display the back of your ID card...',
|
|
13286
|
-
flipIdInstructionText: 'Please flip your ID card...'
|
|
13287
|
-
verifyLivenessInstructionText: 'Performing facial recognition, please hold still...'
|
|
12774
|
+
flipIdInstructionText: 'Please flip your ID card...'
|
|
13288
12775
|
});
|
|
13289
|
-
var instructionText = requestedAction === '
|
|
12776
|
+
var instructionText = requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : requestedAction === 'FLIP_ID' ? verbiage.flipIdInstructionText : verbiage.idBackInstructionText;
|
|
13290
12777
|
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 : '
|
|
12778
|
+
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;
|
|
12779
|
+
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';
|
|
12780
|
+
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;
|
|
12781
|
+
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';
|
|
12782
|
+
var captureImageSize = function captureImageSize() {
|
|
12783
|
+
var _a, _b, _c, _d;
|
|
12784
|
+
if (!imageWidth) setImageWidth((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0);
|
|
12785
|
+
if (!imageHeight) setImageHeight((_d = (_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0);
|
|
12786
|
+
};
|
|
13295
12787
|
return /*#__PURE__*/React__namespace.default.createElement(Container, {
|
|
13296
12788
|
className: classNames.container
|
|
13297
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
13298
|
-
className: classNames.faceGuideContainer
|
|
13299
|
-
}, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask, {
|
|
12789
|
+
}, /*#__PURE__*/React__namespace.default.createElement(FaceGuide, {
|
|
13300
12790
|
className: classNames.faceGuide,
|
|
13301
|
-
|
|
13302
|
-
|
|
13303
|
-
|
|
13304
|
-
})), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideContainer, {
|
|
12791
|
+
"$borderWidth": faceGuideBorderWidth,
|
|
12792
|
+
"$borderColor": faceGuideBorderColor
|
|
12793
|
+
}), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideContainer, {
|
|
13305
12794
|
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, {
|
|
12795
|
+
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInstructionsContainer, {
|
|
13326
12796
|
className: classNames.idCardGuideInstructionsContainer
|
|
13327
12797
|
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInstructions, {
|
|
13328
12798
|
className: classNames.idCardGuideInstructions,
|
|
13329
|
-
"$textColor": (
|
|
13330
|
-
"$background": (
|
|
13331
|
-
}, instructionText))
|
|
12799
|
+
"$textColor": (_u = (_t = theme.idVideoCapture) === null || _t === void 0 ? void 0 : _t.idCardGuides) === null || _u === void 0 ? void 0 : _u.instructionsTextColor,
|
|
12800
|
+
"$background": (_w = (_v = theme.idVideoCapture) === null || _v === void 0 ? void 0 : _v.idCardGuides) === null || _w === void 0 ? void 0 : _w.instructionsBackgroundColor
|
|
12801
|
+
}, instructionText)), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImageContainer, {
|
|
12802
|
+
"$borderWidth": idCardGuideBorderWidth,
|
|
12803
|
+
"$borderColor": idCardGuideBorderColor,
|
|
12804
|
+
className: classNames.idCardGuideImageContainer
|
|
12805
|
+
}, requestedAction === 'FLIP_ID' ? ( /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureFlipIdPrompt, {
|
|
12806
|
+
assets: assets,
|
|
12807
|
+
imageWidth: imageWidth,
|
|
12808
|
+
imageHeight: imageHeight,
|
|
12809
|
+
borderWidth: idCardGuideBorderWidth,
|
|
12810
|
+
className: classNames.flipIdPromptImage
|
|
12811
|
+
})) : ( /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
12812
|
+
ref: imageRef,
|
|
12813
|
+
src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl,
|
|
12814
|
+
alt: "",
|
|
12815
|
+
className: classNames.idCardGuideImage,
|
|
12816
|
+
"$isMirrored": !((_x = cameraRef.current) === null || _x === void 0 ? void 0 : _x.isRearFacing),
|
|
12817
|
+
onLoad: captureImageSize,
|
|
12818
|
+
onResize: captureImageSize
|
|
12819
|
+
})))));
|
|
13332
12820
|
};
|
|
13333
|
-
var Container = styled__default.default.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n
|
|
12821
|
+
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
12822
|
var _a;
|
|
13335
12823
|
return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
|
|
13336
12824
|
});
|
|
13337
|
-
var
|
|
13338
|
-
var
|
|
13339
|
-
|
|
13340
|
-
|
|
13341
|
-
var
|
|
13342
|
-
|
|
12825
|
+
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) {
|
|
12826
|
+
var _a;
|
|
12827
|
+
return (_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 0;
|
|
12828
|
+
}, function (props) {
|
|
12829
|
+
var _a;
|
|
12830
|
+
return (_a = props.$borderColor) !== null && _a !== void 0 ? _a : 'white';
|
|
12831
|
+
});
|
|
12832
|
+
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"])));
|
|
12833
|
+
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"])));
|
|
12834
|
+
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"])));
|
|
12835
|
+
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) {
|
|
12836
|
+
return props.$borderWidth;
|
|
12837
|
+
}, function (props) {
|
|
12838
|
+
return props.$borderColor;
|
|
12839
|
+
});
|
|
12840
|
+
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) {
|
|
12841
|
+
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
12842
|
+
});
|
|
13343
12843
|
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7;
|
|
13344
12844
|
|
|
13345
12845
|
var ReadTextPrompt = function ReadTextPrompt(_a) {
|
|
@@ -13430,7 +12930,7 @@ var ReadTextPromptText = styled__default.default.div(templateObject_3$6 || (temp
|
|
|
13430
12930
|
var _a, _b, _c, _d, _e, _f;
|
|
13431
12931
|
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
12932
|
});
|
|
13433
|
-
var ReadTextPromptButtonsRow = styled__default.default(ButtonsRow
|
|
12933
|
+
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
12934
|
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
12935
|
var _a, _b, _c, _d, _e, _f;
|
|
13436
12936
|
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 +12947,8 @@ var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4
|
|
|
13447
12947
|
var edgeBoundary = 0.05;
|
|
13448
12948
|
var defaultVideoIdCaptureThresholds = {
|
|
13449
12949
|
detection: {
|
|
13450
|
-
idCardFront: 0.
|
|
13451
|
-
idCardBack: 0.
|
|
12950
|
+
idCardFront: 0.6,
|
|
12951
|
+
idCardBack: 0.6,
|
|
13452
12952
|
passport: 1
|
|
13453
12953
|
},
|
|
13454
12954
|
focus: {
|
|
@@ -13785,10 +13285,12 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13785
13285
|
var theme = styled.useTheme();
|
|
13786
13286
|
var _30 = useTranslations(rawVerbiage, {
|
|
13787
13287
|
faceNotCenteredText: 'Please move your face to the center...',
|
|
13288
|
+
searchingForIdCardText: 'Searching for ID card...',
|
|
13788
13289
|
captureBtnText: 'Capture'
|
|
13789
13290
|
}),
|
|
13790
13291
|
captureBtnText = _30.captureBtnText,
|
|
13791
|
-
faceNotCenteredText = _30.faceNotCenteredText
|
|
13292
|
+
faceNotCenteredText = _30.faceNotCenteredText,
|
|
13293
|
+
searchingForIdCardText = _30.searchingForIdCardText;
|
|
13792
13294
|
var debugScalingDetails = useDebugScalingDetails({
|
|
13793
13295
|
enabled: debugMode,
|
|
13794
13296
|
pageWidth: width,
|
|
@@ -13797,9 +13299,8 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13797
13299
|
videoHeight: (_k = (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.videoHeight) !== null && _k !== void 0 ? _k : 0
|
|
13798
13300
|
});
|
|
13799
13301
|
var capturingId = ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction);
|
|
13800
|
-
|
|
13801
|
-
|
|
13802
|
-
var guidanceText = !faceCentered ? faceNotCenteredText : undefined;
|
|
13302
|
+
var searchingForIdCard = idCaptureModelsEnabled && capturingId && !goodFramesThresholdMet;
|
|
13303
|
+
var guidanceText = !faceCentered ? faceNotCenteredText : searchingForIdCard ? searchingForIdCardText : undefined;
|
|
13803
13304
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
13804
13305
|
ref: ref,
|
|
13805
13306
|
className: "flex ".concat((_l = classNames.container) !== null && _l !== void 0 ? _l : '')
|
|
@@ -13819,7 +13320,6 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13819
13320
|
verbiage: rawVerbiage.guides,
|
|
13820
13321
|
requestedAction: requestedAction,
|
|
13821
13322
|
satisfied: satisfied,
|
|
13822
|
-
idCardGuideStatus: countdownStartedAt ? 'capturing' : 'ready',
|
|
13823
13323
|
faceGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor,
|
|
13824
13324
|
idCardGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
|
|
13825
13325
|
}), debugMode && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(ObjectDetectionDebugOverlayDiv, {
|
|
@@ -13967,7 +13467,7 @@ var IdVideoCaptureSuccess = function IdVideoCaptureSuccess(_a) {
|
|
|
13967
13467
|
})) : ( /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
13968
13468
|
src: idBackImageUrl,
|
|
13969
13469
|
alt: "ID Back Image"
|
|
13970
|
-
}))), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow
|
|
13470
|
+
}))), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
13971
13471
|
className: classNames.buttonsRow
|
|
13972
13472
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
13973
13473
|
variant: "warning",
|
|
@@ -13989,7 +13489,7 @@ var AssetSelectorOption = styled__default.default.div(templateObject_3$4 || (tem
|
|
|
13989
13489
|
var templateObject_1$4, templateObject_2$4, templateObject_3$4;
|
|
13990
13490
|
|
|
13991
13491
|
var VideoIdWizard = function VideoIdWizard(_a) {
|
|
13992
|
-
var _b, _c, _d, _e, _f
|
|
13492
|
+
var _b, _c, _d, _e, _f;
|
|
13993
13493
|
var onComplete = _a.onComplete,
|
|
13994
13494
|
onExitCapture = _a.onExitCapture,
|
|
13995
13495
|
onExitAfterFailure = _a.onExitAfterFailure,
|
|
@@ -13997,66 +13497,66 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
13997
13497
|
onIdCaptureModelError = _a.onIdCaptureModelError,
|
|
13998
13498
|
onCameraAccessDenied = _a.onCameraAccessDenied,
|
|
13999
13499
|
onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
|
|
14000
|
-
|
|
14001
|
-
idCaptureProps =
|
|
14002
|
-
|
|
14003
|
-
faceLivenessProps =
|
|
14004
|
-
|
|
14005
|
-
idCaptureModelsEnabled =
|
|
14006
|
-
|
|
14007
|
-
videoIdCaptureThresholds =
|
|
13500
|
+
_g = _a.idCaptureProps,
|
|
13501
|
+
idCaptureProps = _g === void 0 ? {} : _g,
|
|
13502
|
+
_h = _a.faceLivenessProps,
|
|
13503
|
+
faceLivenessProps = _h === void 0 ? {} : _h,
|
|
13504
|
+
_j = _a.idCaptureModelsEnabled,
|
|
13505
|
+
idCaptureModelsEnabled = _j === void 0 ? true : _j,
|
|
13506
|
+
_k = _a.videoIdCaptureThresholds,
|
|
13507
|
+
videoIdCaptureThresholds = _k === void 0 ? defaultVideoIdCaptureThresholds : _k,
|
|
14008
13508
|
readTextPrompt = _a.readTextPrompt,
|
|
14009
13509
|
readTextTimeoutDurationMs = _a.readTextTimeoutDurationMs,
|
|
14010
13510
|
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 =
|
|
13511
|
+
_l = _a.skipIdCapture,
|
|
13512
|
+
skipIdCapture = _l === void 0 ? false : _l,
|
|
13513
|
+
_m = _a.skipShowIdCardBack,
|
|
13514
|
+
skipShowIdCardBack = _m === void 0 ? false : _m,
|
|
13515
|
+
_o = _a.skipSuccessScreen,
|
|
13516
|
+
skipSuccessScreen = _o === void 0 ? false : _o,
|
|
13517
|
+
_p = _a.idCaptureLoadingOverlayMode,
|
|
13518
|
+
idCaptureLoadingOverlayMode = _p === void 0 ? 'default' : _p,
|
|
13519
|
+
_q = _a.idCaptureGuideType,
|
|
13520
|
+
idCaptureGuideType = _q === void 0 ? 'fit' : _q,
|
|
13521
|
+
_r = _a.idCapturePortraitGuidesOnMobile,
|
|
13522
|
+
idCapturePortraitGuidesOnMobile = _r === void 0 ? true : _r,
|
|
13523
|
+
_s = _a.idCaptureRotateLoadingOverlayImageWhenPortrait,
|
|
13524
|
+
idCaptureRotateLoadingOverlayImageWhenPortrait = _s === void 0 ? true : _s,
|
|
13525
|
+
_t = _a.idCaptureModelLoadTimeoutMs,
|
|
13526
|
+
idCaptureModelLoadTimeoutMs = _t === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _t,
|
|
13527
|
+
_u = _a.faceLivenessLoadingOverlayMode,
|
|
13528
|
+
faceLivenessLoadingOverlayMode = _u === void 0 ? 'default' : _u,
|
|
13529
|
+
_v = _a.disableFaceDetectionWhileAudioCapture,
|
|
13530
|
+
disableFaceDetectionWhileAudioCapture = _v === void 0 ? true : _v,
|
|
13531
|
+
_w = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
|
|
13532
|
+
disableFaceDetectionWhileAudioCaptureMsDelay = _w === void 0 ? 2000 : _w,
|
|
13533
|
+
_x = _a.silentFallback,
|
|
13534
|
+
silentFallback = _x === void 0 ? false : _x,
|
|
13535
|
+
_y = _a.mergeAVStreams,
|
|
13536
|
+
mergeAVStreams = _y === void 0 ? false : _y,
|
|
13537
|
+
_z = _a.assets,
|
|
13538
|
+
assets = _z === void 0 ? {} : _z,
|
|
13539
|
+
_0 = _a.classNames,
|
|
13540
|
+
classNames = _0 === void 0 ? {} : _0,
|
|
13541
|
+
_1 = _a.colors,
|
|
13542
|
+
colors = _1 === void 0 ? {} : _1,
|
|
13543
|
+
_2 = _a.verbiage,
|
|
13544
|
+
verbiage = _2 === void 0 ? {} : _2,
|
|
13545
|
+
_3 = _a.debugMode,
|
|
13546
|
+
debugMode = _3 === void 0 ? false : _3;
|
|
13547
|
+
var _4 = React.useContext(SubmissionContext),
|
|
13548
|
+
submissionStatus = _4.submissionStatus,
|
|
13549
|
+
idCaptureVideoUrl = _4.idCaptureVideoUrl,
|
|
13550
|
+
idCaptureVideoAudioUrl = _4.idCaptureVideoAudioUrl,
|
|
13551
|
+
idCaptureVideoIdFrontImage = _4.idCaptureVideoIdFrontImage,
|
|
13552
|
+
idCaptureVideoIdBackImage = _4.idCaptureVideoIdBackImage,
|
|
13553
|
+
setIdCaptureVideoUrl = _4.setIdCaptureVideoUrl,
|
|
13554
|
+
setIdCaptureVideoIdFrontImage = _4.setIdCaptureVideoIdFrontImage,
|
|
13555
|
+
setIdCaptureVideoIdBackImage = _4.setIdCaptureVideoIdBackImage,
|
|
13556
|
+
setIdCaptureVideoAudioUrl = _4.setIdCaptureVideoAudioUrl;
|
|
13557
|
+
var _5 = React.useState('CAPTURING_ID'),
|
|
13558
|
+
captureState = _5[0],
|
|
13559
|
+
setCaptureState = _5[1];
|
|
14060
13560
|
React.useEffect(function () {
|
|
14061
13561
|
if (skipIdCapture && captureState === 'CAPTURING_ID') setCaptureState('CHECKING_LIVENESS');
|
|
14062
13562
|
}, [captureState, skipIdCapture]);
|
|
@@ -14087,9 +13587,9 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14087
13587
|
var onVideoCaptureFaceNotDetected = React.useCallback(function () {
|
|
14088
13588
|
setCaptureState('CHECKING_LIVENESS');
|
|
14089
13589
|
}, []);
|
|
14090
|
-
var
|
|
14091
|
-
attempt =
|
|
14092
|
-
setAttempt =
|
|
13590
|
+
var _6 = React.useState(0),
|
|
13591
|
+
attempt = _6[0],
|
|
13592
|
+
setAttempt = _6[1];
|
|
14093
13593
|
var userSuppliedExitAfterFailure = onExitAfterFailure !== null && onExitAfterFailure !== void 0 ? onExitAfterFailure : faceLivenessProps.onExitAfterFailure;
|
|
14094
13594
|
var onFaceCaptureExitAfterFailure = React.useCallback(function (resp, req) {
|
|
14095
13595
|
userSuppliedExitAfterFailure === null || userSuppliedExitAfterFailure === void 0 ? void 0 : userSuppliedExitAfterFailure(resp, req);
|
|
@@ -14120,19 +13620,6 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14120
13620
|
});
|
|
14121
13621
|
onExitCapture === null || onExitCapture === void 0 ? void 0 : onExitCapture();
|
|
14122
13622
|
}, [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
13623
|
if (submissionStatus === SubmissionStatus.SUBMITTING) {
|
|
14137
13624
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
14138
13625
|
className: "flex"
|
|
@@ -14150,8 +13637,8 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14150
13637
|
debugMode: debugMode
|
|
14151
13638
|
}, /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsProvider, {
|
|
14152
13639
|
autoStart: false,
|
|
14153
|
-
documentDetectionModelUrl: (
|
|
14154
|
-
focusModelUrl: (
|
|
13640
|
+
documentDetectionModelUrl: (_c = (_b = idCaptureProps.assets) === null || _b === void 0 ? void 0 : _b.documentDetectionModelUrl) !== null && _c !== void 0 ? _c : '',
|
|
13641
|
+
focusModelUrl: (_e = (_d = idCaptureProps.assets) === null || _d === void 0 ? void 0 : _d.focusModelUrl) !== null && _e !== void 0 ? _e : '',
|
|
14155
13642
|
onModelError: onIdCaptureModelError,
|
|
14156
13643
|
modelLoadTimeoutMs: idCaptureModelLoadTimeoutMs
|
|
14157
13644
|
}, /*#__PURE__*/React__namespace.default.createElement(SelfieGuidanceModelsProvider, {
|
|
@@ -14159,7 +13646,7 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14159
13646
|
onModelError: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.onModelError,
|
|
14160
13647
|
modelLoadTimeoutMs: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.modelLoadTimeoutMs
|
|
14161
13648
|
}, /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
14162
|
-
className: "flex ".concat((
|
|
13649
|
+
className: "flex ".concat((_f = classNames.container) !== null && _f !== void 0 ? _f : '')
|
|
14163
13650
|
}, ['CHECKING_LIVENESS', 'CAPTURING_VIDEO'].includes(captureState) && /*#__PURE__*/React__namespace.default.createElement(CameraVideoTag, {
|
|
14164
13651
|
className: classNames.cameraFeed
|
|
14165
13652
|
}), function () {
|
|
@@ -14197,9 +13684,6 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14197
13684
|
skipSuccessScreen: true,
|
|
14198
13685
|
renderCameraFeed: false,
|
|
14199
13686
|
releaseCameraAccessOnExit: false,
|
|
14200
|
-
disableCapturePreview: !debugMode,
|
|
14201
|
-
requireVerticalFaceCentering: false,
|
|
14202
|
-
guidesComponent: faceLivenessGuides,
|
|
14203
13687
|
assets: assets.faceLiveness,
|
|
14204
13688
|
classNames: classNames.faceLiveness,
|
|
14205
13689
|
colors: colors.faceLiveness,
|
|
@@ -15687,8 +15171,8 @@ var CustomerVerificationSuccess = function CustomerVerificationSuccess(_a) {
|
|
|
15687
15171
|
}, verbiage.doneBtnText))));
|
|
15688
15172
|
};
|
|
15689
15173
|
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
|
|
15174
|
+
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"])));
|
|
15175
|
+
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
15176
|
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
15693
15177
|
|
|
15694
15178
|
var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
|
|
@@ -15739,8 +15223,8 @@ var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
|
|
|
15739
15223
|
}, verbiage.exitBtnText))));
|
|
15740
15224
|
};
|
|
15741
15225
|
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
|
|
15226
|
+
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"])));
|
|
15227
|
+
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
15228
|
var templateObject_1$2, templateObject_2$2, templateObject_3$2;
|
|
15745
15229
|
|
|
15746
15230
|
var ALLOWED_RETRIES$2 = 2;
|
|
@@ -16245,8 +15729,8 @@ var CustomerIdentificationSuccess = function CustomerIdentificationSuccess(_a) {
|
|
|
16245
15729
|
}, verbiage.doneBtnText))));
|
|
16246
15730
|
};
|
|
16247
15731
|
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
|
|
15732
|
+
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"])));
|
|
15733
|
+
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
15734
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1;
|
|
16251
15735
|
|
|
16252
15736
|
var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
|
|
@@ -16297,8 +15781,8 @@ var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
|
|
|
16297
15781
|
}, verbiage.exitBtnText))));
|
|
16298
15782
|
};
|
|
16299
15783
|
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
|
|
15784
|
+
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"])));
|
|
15785
|
+
var StyledButtonsRow = styled__default.default(ButtonsRow)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
16302
15786
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
16303
15787
|
|
|
16304
15788
|
var ALLOWED_RETRIES = 2;
|