idmission-web-sdk 2.1.37 → 2.1.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/common/LoaderButton.d.ts +1 -1
- package/dist/components/face_liveness/FaceCaptureGuideOverlay.d.ts +2 -6
- package/dist/components/face_liveness/FaceLivenessCapture.d.ts +2 -8
- package/dist/components/face_liveness/FaceLivenessFailure.d.ts +1 -2
- package/dist/components/face_liveness/FaceLivenessWizard.d.ts +2 -6
- package/dist/components/id_capture/IdCaptureStateProvider.d.ts +2 -0
- package/dist/components/selfie_capture/SelfieCapture.d.ts +3 -8
- package/dist/components/selfie_capture/SelfieCaptureLoadingGraphic.d.ts +1 -14
- package/dist/components/selfie_capture/SelfieGuidanceModelsProvider.d.ts +2 -2
- package/dist/components/video_id/IdVideoCaptureFlipIdPrompt.d.ts +5 -10
- package/dist/components/video_id/IdVideoCaptureGuides.d.ts +3 -11
- package/dist/lib/locales/es/translation.d.ts +1 -2
- package/dist/lib/locales/index.d.ts +1 -2
- package/dist/lib/models/DocumentDetection.d.ts +7 -3
- package/dist/lib/models/Focus.d.ts +4 -0
- package/dist/sdk2.cjs.development.js +924 -1439
- package/dist/sdk2.cjs.development.js.map +1 -1
- package/dist/sdk2.cjs.production.js +1 -1
- package/dist/sdk2.cjs.production.js.map +1 -1
- package/dist/sdk2.esm.js +924 -1439
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +924 -1439
- package/dist/sdk2.umd.development.js.map +1 -1
- package/dist/sdk2.umd.production.js +1 -1
- package/dist/sdk2.umd.production.js.map +1 -1
- package/dist/themes/index.d.ts +0 -5
- package/dist/version.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/video_id/IdVideoCaptureGuidesCommon.d.ts +0 -20
package/dist/sdk2.esm.js
CHANGED
|
@@ -204,7 +204,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
204
204
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
205
205
|
};
|
|
206
206
|
|
|
207
|
-
var webSdkVersion = '2.1.
|
|
207
|
+
var webSdkVersion = '2.1.39';
|
|
208
208
|
|
|
209
209
|
function getPlatform() {
|
|
210
210
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
@@ -361,7 +361,7 @@ function videoDataUrlToB64(url) {
|
|
|
361
361
|
});
|
|
362
362
|
}
|
|
363
363
|
|
|
364
|
-
var PageContainerDiv = styled.div(templateObject_1$
|
|
364
|
+
var PageContainerDiv = styled.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) {
|
|
365
365
|
var _a;
|
|
366
366
|
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 ");
|
|
367
367
|
}, function (props) {
|
|
@@ -401,22 +401,22 @@ var PageContainer = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
401
401
|
}, dimensionsCalculated && children);
|
|
402
402
|
});
|
|
403
403
|
PageContainer.displayName = 'PageContainer';
|
|
404
|
-
var templateObject_1$
|
|
404
|
+
var templateObject_1$H;
|
|
405
405
|
|
|
406
|
-
var OverlayContainer = styled(PageContainer)(templateObject_1$
|
|
406
|
+
var OverlayContainer = styled(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) {
|
|
407
407
|
return props.theme.background ? "".concat(props.theme.background) : "white";
|
|
408
408
|
}, function (props) {
|
|
409
409
|
return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
|
|
410
410
|
});
|
|
411
|
-
var OverlayInner$2 = styled.div(templateObject_2$
|
|
411
|
+
var OverlayInner$2 = styled.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) {
|
|
412
412
|
var _a;
|
|
413
413
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
414
414
|
}, function (props) {
|
|
415
415
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
416
416
|
});
|
|
417
|
-
var OverlayImageContainer = styled.div(templateObject_3$
|
|
418
|
-
var OverlayImageRow = styled.div(templateObject_4$
|
|
419
|
-
var templateObject_1$
|
|
417
|
+
var OverlayImageContainer = styled.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"])));
|
|
418
|
+
var OverlayImageRow = styled.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"])));
|
|
419
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$m, templateObject_4$h;
|
|
420
420
|
|
|
421
421
|
var LoaderButton = function LoaderButton(_a) {
|
|
422
422
|
var children = _a.children,
|
|
@@ -475,11 +475,11 @@ var LoaderButton = function LoaderButton(_a) {
|
|
|
475
475
|
className: "ladda-label"
|
|
476
476
|
}, children));
|
|
477
477
|
};
|
|
478
|
-
var StyledButton = styled.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) {
|
|
478
|
+
var StyledButton = styled.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) {
|
|
479
479
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
480
480
|
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 ");
|
|
481
481
|
});
|
|
482
|
-
var templateObject_1$
|
|
482
|
+
var templateObject_1$F;
|
|
483
483
|
|
|
484
484
|
var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
|
|
485
485
|
var accessBlockedImageUrl = _a.accessBlockedImageUrl;
|
|
@@ -726,7 +726,7 @@ var SessionValidationErrorOverlay = function SessionValidationErrorOverlay(_a) {
|
|
|
726
726
|
}, retryText)))));
|
|
727
727
|
};
|
|
728
728
|
|
|
729
|
-
var Spinner = styled.div(templateObject_1$
|
|
729
|
+
var Spinner = styled.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) {
|
|
730
730
|
var $size = _a.$size;
|
|
731
731
|
return $size !== null && $size !== void 0 ? $size : 80;
|
|
732
732
|
}, function (_a) {
|
|
@@ -751,7 +751,7 @@ var Spinner = styled.div(templateObject_1$G || (templateObject_1$G = __makeTempl
|
|
|
751
751
|
var $color = _a.$color;
|
|
752
752
|
return $color !== null && $color !== void 0 ? $color : '#888';
|
|
753
753
|
});
|
|
754
|
-
var templateObject_1$
|
|
754
|
+
var templateObject_1$E;
|
|
755
755
|
|
|
756
756
|
var defaultAuthUrl = 'https://portal-api.idmission.com';
|
|
757
757
|
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'];
|
|
@@ -1814,7 +1814,7 @@ function getFrameDimensions(frame) {
|
|
|
1814
1814
|
return [frameWidth, frameHeight];
|
|
1815
1815
|
}
|
|
1816
1816
|
|
|
1817
|
-
var InvisibleCanvas = styled.canvas(templateObject_1$
|
|
1817
|
+
var InvisibleCanvas = styled.canvas(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
1818
1818
|
function drawToCanvas(canvas, frame, width, height) {
|
|
1819
1819
|
if (!canvas) return;
|
|
1820
1820
|
var ctx = canvas.getContext('2d');
|
|
@@ -1834,7 +1834,7 @@ function clearCanvas(canvas) {
|
|
|
1834
1834
|
var _a;
|
|
1835
1835
|
(_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);
|
|
1836
1836
|
}
|
|
1837
|
-
var templateObject_1$
|
|
1837
|
+
var templateObject_1$D;
|
|
1838
1838
|
|
|
1839
1839
|
function listAvailableCameras(facingMode_1) {
|
|
1840
1840
|
return __awaiter(this, arguments, void 0, function (facingMode, requestMicAccess) {
|
|
@@ -2456,18 +2456,18 @@ function cropToShoulders(rawCanvas, cropCanvas, resizeCanvas, frame, face, quali
|
|
|
2456
2456
|
rawCanvas.width = frame.width;
|
|
2457
2457
|
rawCanvas.height = frame.height;
|
|
2458
2458
|
rawCtx.putImageData(frame, 0, 0);
|
|
2459
|
+
var _a = face.box,
|
|
2460
|
+
xMin = _a.xMin,
|
|
2461
|
+
width = _a.width;
|
|
2462
|
+
var frameHeight = frame.height;
|
|
2463
|
+
var xPadding = frameHeight * 0.6 - width;
|
|
2464
|
+
var xPos = Math.max(0, xMin - xPadding / 2);
|
|
2459
2465
|
if (frame.height > frame.width) {
|
|
2460
2466
|
cropCanvas.width = frame.width;
|
|
2461
2467
|
cropCanvas.height = frame.height;
|
|
2462
2468
|
cropCtx.drawImage(rawCanvas, 0, 0, cropCanvas.width, cropCanvas.height);
|
|
2463
2469
|
} else {
|
|
2464
|
-
|
|
2465
|
-
xMin = _a.xMin,
|
|
2466
|
-
width = _a.width;
|
|
2467
|
-
var desiredWidth = frame.height * 0.6;
|
|
2468
|
-
var faceCenterX = xMin + width / 2;
|
|
2469
|
-
var xPos = Math.max(0, faceCenterX - desiredWidth / 2);
|
|
2470
|
-
cropCanvas.width = desiredWidth;
|
|
2470
|
+
cropCanvas.width = width + xPadding;
|
|
2471
2471
|
cropCanvas.height = frame.height;
|
|
2472
2472
|
cropCtx.drawImage(rawCanvas, xPos, 0, cropCanvas.width, cropCanvas.height, 0, 0, cropCanvas.width, cropCanvas.height);
|
|
2473
2473
|
}
|
|
@@ -2666,6 +2666,10 @@ var defaultFocusThresholds = {
|
|
|
2666
2666
|
passport: {
|
|
2667
2667
|
desktop: 0,
|
|
2668
2668
|
mobile: 0.3
|
|
2669
|
+
},
|
|
2670
|
+
singlePage: {
|
|
2671
|
+
desktop: 0,
|
|
2672
|
+
mobile: 0.3
|
|
2669
2673
|
}
|
|
2670
2674
|
};
|
|
2671
2675
|
var models = {};
|
|
@@ -5329,18 +5333,20 @@ function sumUpProgressForDependencies(dependencies) {
|
|
|
5329
5333
|
});
|
|
5330
5334
|
}
|
|
5331
5335
|
|
|
5332
|
-
var defaultDocumentDetectorModelPath = "https://websdk-cdn-dev.idmission.com/assets/models/
|
|
5336
|
+
var defaultDocumentDetectorModelPath = "https://websdk-cdn-dev.idmission.com/assets/models/docdetectmp20240830/model_fp16.tflite";
|
|
5333
5337
|
var defaultDocumentDetectionScoreThreshold = 0.1;
|
|
5334
5338
|
var defaultDocumentDetectionModelLoadTimeoutMs = 45000;
|
|
5335
5339
|
var defaultDocumentDetectionThresholds = {
|
|
5336
5340
|
idCardFront: 0.6,
|
|
5337
5341
|
idCardBack: 0.6,
|
|
5338
|
-
passport: 0.4
|
|
5342
|
+
passport: 0.4,
|
|
5343
|
+
singlePage: 0.6
|
|
5339
5344
|
};
|
|
5340
5345
|
var documentTypeDisplayNames = {
|
|
5341
5346
|
idCardFront: 'ID card front',
|
|
5342
5347
|
idCardBack: 'ID card back',
|
|
5343
5348
|
passport: 'Passport',
|
|
5349
|
+
singlePage: 'Single page ID document',
|
|
5344
5350
|
none: 'None'
|
|
5345
5351
|
};
|
|
5346
5352
|
var detectors = {};
|
|
@@ -5476,7 +5482,7 @@ function makeDocumentDetectorPrediction(detector, frame) {
|
|
|
5476
5482
|
});
|
|
5477
5483
|
}
|
|
5478
5484
|
function processDocumentDetectorPrediction(prediction, thresholds) {
|
|
5479
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
5485
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
5480
5486
|
var detections = prediction.detections,
|
|
5481
5487
|
frameWidth = prediction.frameWidth,
|
|
5482
5488
|
frameHeight = prediction.frameHeight,
|
|
@@ -5505,19 +5511,26 @@ function processDocumentDetectorPrediction(prediction, thresholds) {
|
|
|
5505
5511
|
var bestPassportPage = detectedObjects.find(function (obj) {
|
|
5506
5512
|
return obj.label === 'Passport page';
|
|
5507
5513
|
});
|
|
5514
|
+
var bestSinglePage = detectedObjects.find(function (obj) {
|
|
5515
|
+
return obj.label === 'Single page';
|
|
5516
|
+
});
|
|
5508
5517
|
var idCardFrontDetectionScore = (_a = bestIdCardFront === null || bestIdCardFront === void 0 ? void 0 : bestIdCardFront.score) !== null && _a !== void 0 ? _a : 0;
|
|
5509
5518
|
var idCardBackDetectionScore = (_b = bestIdCardBack === null || bestIdCardBack === void 0 ? void 0 : bestIdCardBack.score) !== null && _b !== void 0 ? _b : 0;
|
|
5510
5519
|
var passportDetectionScore = (_c = bestPassportPage === null || bestPassportPage === void 0 ? void 0 : bestPassportPage.score) !== null && _c !== void 0 ? _c : 0;
|
|
5511
|
-
var
|
|
5512
|
-
var
|
|
5513
|
-
var
|
|
5514
|
-
var
|
|
5515
|
-
var
|
|
5516
|
-
var
|
|
5520
|
+
var singlePageDetectionScore = (_d = bestSinglePage === null || bestSinglePage === void 0 ? void 0 : bestSinglePage.score) !== null && _d !== void 0 ? _d : 0;
|
|
5521
|
+
var idCardFrontDetectionThresholdMet = idCardFrontDetectionScore >= ((_e = thresholds.idCardFront) !== null && _e !== void 0 ? _e : 0);
|
|
5522
|
+
var idCardBackDetectionThresholdMet = idCardBackDetectionScore >= ((_f = thresholds.idCardBack) !== null && _f !== void 0 ? _f : 0);
|
|
5523
|
+
var passportDetectionThresholdMet = passportDetectionScore >= ((_g = thresholds.passport) !== null && _g !== void 0 ? _g : 0);
|
|
5524
|
+
var singlePageDetectionThresholdMet = singlePageDetectionScore >= ((_h = thresholds.singlePage) !== null && _h !== void 0 ? _h : 0);
|
|
5525
|
+
var bestDocument = passportDetectionThresholdMet ? bestPassportPage : singlePageDetectionThresholdMet ? bestSinglePage : idCardBackDetectionThresholdMet ? bestIdCardBack : bestIdCardFront;
|
|
5526
|
+
var detectionThreshold = passportDetectionThresholdMet ? thresholds.passport : singlePageDetectionThresholdMet ? thresholds.singlePage : idCardBackDetectionThresholdMet ? thresholds.idCardBack : thresholds.idCardFront;
|
|
5527
|
+
var detectionScore = (_j = bestDocument === null || bestDocument === void 0 ? void 0 : bestDocument.score) !== null && _j !== void 0 ? _j : 0;
|
|
5517
5528
|
var detectionThresholdMet = detectionScore >= (detectionThreshold !== null && detectionThreshold !== void 0 ? detectionThreshold : 0);
|
|
5518
5529
|
var detectedDocumentType = 'none';
|
|
5519
5530
|
if (passportDetectionThresholdMet) {
|
|
5520
5531
|
detectedDocumentType = 'passport';
|
|
5532
|
+
} else if (singlePageDetectionThresholdMet) {
|
|
5533
|
+
detectedDocumentType = 'singlePage';
|
|
5521
5534
|
} else if (idCardBackDetectionThresholdMet) {
|
|
5522
5535
|
detectedDocumentType = 'idCardBack';
|
|
5523
5536
|
} else if (detectionThresholdMet) {
|
|
@@ -5526,11 +5539,11 @@ function processDocumentDetectorPrediction(prediction, thresholds) {
|
|
|
5526
5539
|
var documentInBounds = false;
|
|
5527
5540
|
if (bestDocument) {
|
|
5528
5541
|
var boundaryPx = 20;
|
|
5529
|
-
var
|
|
5530
|
-
boundaryX =
|
|
5531
|
-
boundaryY =
|
|
5532
|
-
boundaryWidth =
|
|
5533
|
-
boundaryHeight =
|
|
5542
|
+
var _k = bestDocument.box,
|
|
5543
|
+
boundaryX = _k.xMin,
|
|
5544
|
+
boundaryY = _k.yMin,
|
|
5545
|
+
boundaryWidth = _k.width,
|
|
5546
|
+
boundaryHeight = _k.height;
|
|
5534
5547
|
documentInBounds = boundaryY > boundaryPx &&
|
|
5535
5548
|
// Is it valid top edge of ID detected?
|
|
5536
5549
|
boundaryY + boundaryHeight + boundaryPx < frameHeight && (
|
|
@@ -5541,9 +5554,9 @@ function processDocumentDetectorPrediction(prediction, thresholds) {
|
|
|
5541
5554
|
}
|
|
5542
5555
|
var documentTooClose = false;
|
|
5543
5556
|
if (bestDocument) {
|
|
5544
|
-
var
|
|
5545
|
-
docWidth =
|
|
5546
|
-
docHeight =
|
|
5557
|
+
var _l = [bestDocument.box.width / frameWidth, bestDocument.box.height / frameHeight],
|
|
5558
|
+
docWidth = _l[0],
|
|
5559
|
+
docHeight = _l[1];
|
|
5547
5560
|
documentTooClose = docWidth > 0.85 || docHeight > 0.85;
|
|
5548
5561
|
}
|
|
5549
5562
|
return {
|
|
@@ -5558,6 +5571,8 @@ function processDocumentDetectorPrediction(prediction, thresholds) {
|
|
|
5558
5571
|
idCardBackDetectionThresholdMet: idCardBackDetectionThresholdMet,
|
|
5559
5572
|
passportDetectionScore: passportDetectionScore,
|
|
5560
5573
|
passportDetectionThresholdMet: passportDetectionThresholdMet,
|
|
5574
|
+
singlePageDetectionScore: singlePageDetectionScore,
|
|
5575
|
+
singlePageDetectionThresholdMet: singlePageDetectionThresholdMet,
|
|
5561
5576
|
bestDocument: bestDocument,
|
|
5562
5577
|
documentInBounds: documentInBounds,
|
|
5563
5578
|
documentTooClose: documentTooClose,
|
|
@@ -5972,20 +5987,24 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
5972
5987
|
var _this = this;
|
|
5973
5988
|
onDocumentDetected(function (prediction) {
|
|
5974
5989
|
return __awaiter(_this, void 0, void 0, function () {
|
|
5975
|
-
var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, isRequiredDocumentType, focusPrediction, focusThresholdSet, focusThreshold;
|
|
5990
|
+
var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, detectedDocumentType, isRequiredDocumentType, focusPrediction, focusThresholdSet, focusThreshold;
|
|
5976
5991
|
var _a, _b, _c, _d, _e, _f;
|
|
5977
5992
|
return __generator(this, function (_g) {
|
|
5978
5993
|
if (!lastPredictionCanvas.current) return [2 /*return*/];
|
|
5979
5994
|
stopDetectionAtStart = stopDetection.current;
|
|
5980
5995
|
focusPredictionTime = 0, focusScore = 0, focusThresholdMet = false;
|
|
5981
|
-
|
|
5982
|
-
if (
|
|
5996
|
+
detectedDocumentType = prediction.detectedDocumentType;
|
|
5997
|
+
if (detectedDocumentType === 'singlePage') {
|
|
5998
|
+
detectedDocumentType = 'passport';
|
|
5999
|
+
}
|
|
6000
|
+
isRequiredDocumentType = requiredDocumentType === 'none' || detectedDocumentType === requiredDocumentType || ((_a = requiredDocumentType.includes) === null || _a === void 0 ? void 0 : _a.call(requiredDocumentType, detectedDocumentType));
|
|
6001
|
+
if (isRequiredDocumentType && detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.documentInBounds && !prediction.documentTooClose) {
|
|
5983
6002
|
focusPrediction = makeFocusPrediction(lastPredictionCanvas.current, (_b = prediction.bestDocument) === null || _b === void 0 ? void 0 : _b.box);
|
|
5984
6003
|
if (focusPrediction) {
|
|
5985
6004
|
focusScore = focusPrediction.score;
|
|
5986
6005
|
focusPredictionTime = focusPrediction.predictionTime;
|
|
5987
6006
|
}
|
|
5988
|
-
focusThresholdSet = (_c = thresholds.focus) === null || _c === void 0 ? void 0 : _c[
|
|
6007
|
+
focusThresholdSet = (_c = thresholds.focus) === null || _c === void 0 ? void 0 : _c[detectedDocumentType];
|
|
5989
6008
|
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;
|
|
5990
6009
|
focusThresholdMet = focusScore >= focusThreshold;
|
|
5991
6010
|
if (bestFocusScore.current <= focusScore && stopDetectionAtStart === stopDetection.current) {
|
|
@@ -5993,7 +6012,7 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
5993
6012
|
drawToCanvas(bestPredictionCanvas.current, lastPredictionCanvas.current);
|
|
5994
6013
|
setBestFrameDetails({
|
|
5995
6014
|
boundingBox: (_e = prediction.bestDocument) === null || _e === void 0 ? void 0 : _e.box,
|
|
5996
|
-
documentType:
|
|
6015
|
+
documentType: detectedDocumentType,
|
|
5997
6016
|
detectionScore: prediction.detectionScore,
|
|
5998
6017
|
focusScore: focusScore
|
|
5999
6018
|
});
|
|
@@ -6121,6 +6140,8 @@ var initialState$4 = {
|
|
|
6121
6140
|
idCardBackDetectionThresholdMet: false,
|
|
6122
6141
|
passportDetectionScore: 0,
|
|
6123
6142
|
passportDetectionThresholdMet: false,
|
|
6143
|
+
singlePageDetectionScore: 0,
|
|
6144
|
+
singlePageDetectionThresholdMet: false,
|
|
6124
6145
|
focusScore: 0,
|
|
6125
6146
|
focusThresholdMet: false,
|
|
6126
6147
|
isGoodFrame: false,
|
|
@@ -6221,6 +6242,8 @@ var _reducer = function reducer(state, action) {
|
|
|
6221
6242
|
idCardBackDetectionThresholdMet = _d.idCardBackDetectionThresholdMet,
|
|
6222
6243
|
passportDetectionScore = _d.passportDetectionScore,
|
|
6223
6244
|
passportDetectionThresholdMet = _d.passportDetectionThresholdMet,
|
|
6245
|
+
singlePageDetectionScore = _d.singlePageDetectionScore,
|
|
6246
|
+
singlePageDetectionThresholdMet = _d.singlePageDetectionThresholdMet,
|
|
6224
6247
|
bestDocument = _d.bestDocument,
|
|
6225
6248
|
documentInBounds = _d.documentInBounds,
|
|
6226
6249
|
documentTooClose = _d.documentTooClose,
|
|
@@ -6258,10 +6281,10 @@ var _reducer = function reducer(state, action) {
|
|
|
6258
6281
|
}
|
|
6259
6282
|
}
|
|
6260
6283
|
if (state.captureRequirement === 'idCardOrPassport') {
|
|
6261
|
-
if (detectedDocumentType === 'passport' && state.requestedDocumentType !== 'passport') {
|
|
6284
|
+
if ((detectedDocumentType === 'passport' || detectedDocumentType === 'singlePage') && state.requestedDocumentType !== 'passport') {
|
|
6262
6285
|
requestedDocumentType = 'passport';
|
|
6263
6286
|
}
|
|
6264
|
-
if (requestedDocumentType === 'passport' &&
|
|
6287
|
+
if (requestedDocumentType === 'passport' && !passportDetectionThresholdMet && !singlePageDetectionThresholdMet) {
|
|
6265
6288
|
requestedDocumentType = 'idCardFront' in state.capturedDocuments ? 'idCardBack' : 'idCardFront';
|
|
6266
6289
|
}
|
|
6267
6290
|
}
|
|
@@ -6288,6 +6311,8 @@ var _reducer = function reducer(state, action) {
|
|
|
6288
6311
|
idCardBackDetectionThresholdMet: idCardBackDetectionThresholdMet,
|
|
6289
6312
|
passportDetectionScore: passportDetectionScore,
|
|
6290
6313
|
passportDetectionThresholdMet: passportDetectionThresholdMet,
|
|
6314
|
+
singlePageDetectionScore: singlePageDetectionScore,
|
|
6315
|
+
singlePageDetectionThresholdMet: singlePageDetectionThresholdMet,
|
|
6291
6316
|
focusScore: focusScore,
|
|
6292
6317
|
focusThresholdMet: focusThresholdMet,
|
|
6293
6318
|
isGoodFrame: isGoodFrame,
|
|
@@ -6460,12 +6485,12 @@ function DebugStatsPane(_a) {
|
|
|
6460
6485
|
if (!portalLocation) return element;
|
|
6461
6486
|
return /*#__PURE__*/createPortal(element, portalLocation);
|
|
6462
6487
|
}
|
|
6463
|
-
var DebugStatsPaneDiv = styled.span(templateObject_1$
|
|
6464
|
-
var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$
|
|
6488
|
+
var DebugStatsPaneDiv = styled.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"])));
|
|
6489
|
+
var ObjectDetectionDebugOverlayDiv = styled.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) {
|
|
6465
6490
|
var $flipX = _a.$flipX;
|
|
6466
6491
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
6467
6492
|
});
|
|
6468
|
-
var ObjectDetectionDebugBox = styled.div(templateObject_3$
|
|
6493
|
+
var ObjectDetectionDebugBox = styled.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) {
|
|
6469
6494
|
var $color = _a.$color;
|
|
6470
6495
|
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
6471
6496
|
}, function (_a) {
|
|
@@ -6475,7 +6500,7 @@ var ObjectDetectionDebugBox = styled.div(templateObject_3$o || (templateObject_3
|
|
|
6475
6500
|
var $flipX = _a.$flipX;
|
|
6476
6501
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
6477
6502
|
});
|
|
6478
|
-
var FaceDetectionKeypointMarker = styled.div(templateObject_4$
|
|
6503
|
+
var FaceDetectionKeypointMarker = styled.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) {
|
|
6479
6504
|
var $color = _a.$color;
|
|
6480
6505
|
return $color !== null && $color !== void 0 ? $color : 'red';
|
|
6481
6506
|
}, function (_a) {
|
|
@@ -6666,7 +6691,7 @@ function SelfieCaptureFaceKeypoint(_a) {
|
|
|
6666
6691
|
}
|
|
6667
6692
|
});
|
|
6668
6693
|
}
|
|
6669
|
-
var templateObject_1$
|
|
6694
|
+
var templateObject_1$C, templateObject_2$r, templateObject_3$l, templateObject_4$g;
|
|
6670
6695
|
|
|
6671
6696
|
var enTranslation = {};
|
|
6672
6697
|
|
|
@@ -6702,6 +6727,7 @@ var esTranslation = {
|
|
|
6702
6727
|
'ID card front detected, hold still...': 'Anverso de ID detectado, no mover...',
|
|
6703
6728
|
'ID card back detected, hold still...': 'Reverso de ID detectado, no mover...',
|
|
6704
6729
|
'Passport detected, hold still...': 'Pasaporte detectado, no mover...',
|
|
6730
|
+
'Single page ID document detected, hold still...': 'Documento de una sola página detectada, por favor permanece quieto...',
|
|
6705
6731
|
'Capturing...': 'Capturando...',
|
|
6706
6732
|
'Capture failed!': 'Falló la captura',
|
|
6707
6733
|
'Please flip your ID card...': 'Por favor voltea la identificación...',
|
|
@@ -6726,8 +6752,6 @@ var esTranslation = {
|
|
|
6726
6752
|
Exit: 'Salir',
|
|
6727
6753
|
'Face liveness has been verified!': 'Se ha verificado la Prueba de Vida en rostro!',
|
|
6728
6754
|
Done: 'Terminar',
|
|
6729
|
-
'Could not verify your face.': 'No se pudo verificar tu rostro.',
|
|
6730
|
-
'An error occurred while verifying your face.': 'Se ha producido un error al verificar tu rostro.',
|
|
6731
6755
|
'Customer has been identified!': '¡Se ha identificado al cliente!',
|
|
6732
6756
|
'Customer not found': 'Cliente no encontrado',
|
|
6733
6757
|
'Additional document capture': 'Captura de otro documento',
|
|
@@ -6838,7 +6862,7 @@ function useTranslations(verbiage, fallbacks) {
|
|
|
6838
6862
|
}, [fallbacks, i18n.language, t, verbiage]);
|
|
6839
6863
|
}
|
|
6840
6864
|
|
|
6841
|
-
var GuidanceMessageContainerDiv = styled.div(templateObject_1$
|
|
6865
|
+
var GuidanceMessageContainerDiv = styled.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) {
|
|
6842
6866
|
var $top = _a.$top;
|
|
6843
6867
|
return $top !== null && $top !== void 0 ? $top : '10vh';
|
|
6844
6868
|
}, function (_a) {
|
|
@@ -6851,14 +6875,14 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
|
|
|
6851
6875
|
if (!portalLocation) return element;
|
|
6852
6876
|
return /*#__PURE__*/createPortal(element, portalLocation);
|
|
6853
6877
|
};
|
|
6854
|
-
var GuidanceMessage = styled.div(templateObject_2$
|
|
6878
|
+
var GuidanceMessage = styled.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) {
|
|
6855
6879
|
var _a, _b, _c, _d, _e, _f;
|
|
6856
6880
|
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';
|
|
6857
6881
|
}, function (props) {
|
|
6858
6882
|
var _a, _b, _c, _d, _e, _f;
|
|
6859
6883
|
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';
|
|
6860
6884
|
});
|
|
6861
|
-
var templateObject_1$
|
|
6885
|
+
var templateObject_1$B, templateObject_2$q;
|
|
6862
6886
|
|
|
6863
6887
|
var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
|
|
6864
6888
|
|
|
@@ -6893,18 +6917,18 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
|
6893
6917
|
}
|
|
6894
6918
|
}, verbiage.buttonText))));
|
|
6895
6919
|
}
|
|
6896
|
-
var Container$1 = styled.div(templateObject_1$
|
|
6920
|
+
var Container$1 = styled.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) {
|
|
6897
6921
|
var _a, _b, _c;
|
|
6898
6922
|
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';
|
|
6899
6923
|
}, function (props) {
|
|
6900
6924
|
var _a, _b, _c;
|
|
6901
6925
|
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';
|
|
6902
6926
|
});
|
|
6903
|
-
var InnerContainer = styled.div(templateObject_2$
|
|
6904
|
-
var Message = styled.span(templateObject_3$
|
|
6905
|
-
var ButtonContainer = styled.div(templateObject_4$
|
|
6906
|
-
var Button = styled(LoaderButton)(templateObject_5$
|
|
6907
|
-
var templateObject_1$
|
|
6927
|
+
var InnerContainer = styled.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"])));
|
|
6928
|
+
var Message = styled.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"])));
|
|
6929
|
+
var ButtonContainer = styled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n margin-left: auto;\n"], ["\n display: flex;\n margin-left: auto;\n"])));
|
|
6930
|
+
var Button = styled(LoaderButton)(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n white-space: nowrap;\n margin: auto;\n"], ["\n white-space: nowrap;\n margin: auto;\n"])));
|
|
6931
|
+
var templateObject_1$A, templateObject_2$p, templateObject_3$k, templateObject_4$f, templateObject_5$9;
|
|
6908
6932
|
|
|
6909
6933
|
var IdCapture = function IdCapture(_a) {
|
|
6910
6934
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
@@ -7054,7 +7078,7 @@ var IdCapture = function IdCapture(_a) {
|
|
|
7054
7078
|
scaling: debugScalingDetails,
|
|
7055
7079
|
flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
|
|
7056
7080
|
});
|
|
7057
|
-
}))), debugMode && ( /*#__PURE__*/React__default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__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__default.createElement("br", null), modelsReady ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React__default.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u274C Models not ready")))));
|
|
7081
|
+
}))), debugMode && ( /*#__PURE__*/React__default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__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__default.createElement("br", null), modelsReady ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React__default.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.singlePageDetectionThresholdMet ? '✅' : '❌', " Single Page Score: ", state.singlePageDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u274C Models not ready")))));
|
|
7058
7082
|
};
|
|
7059
7083
|
var timeSince = function timeSince(t) {
|
|
7060
7084
|
if (!t) return 0;
|
|
@@ -7100,13 +7124,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
7100
7124
|
finished: true
|
|
7101
7125
|
}, verbiage.retryBtnText)));
|
|
7102
7126
|
};
|
|
7103
|
-
var StyledOverlayInner$3 = styled(OverlayInner$2)(templateObject_1$
|
|
7104
|
-
var StyledOverlayImageContainer$3 = styled(OverlayImageContainer)(templateObject_2$
|
|
7105
|
-
var Description$4 = styled.p(templateObject_3$
|
|
7106
|
-
var RetryButton$1 = styled(LoaderButton)(templateObject_4$
|
|
7107
|
-
var templateObject_1$
|
|
7127
|
+
var StyledOverlayInner$3 = styled(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"])));
|
|
7128
|
+
var StyledOverlayImageContainer$3 = styled(OverlayImageContainer)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
7129
|
+
var Description$4 = styled.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"])));
|
|
7130
|
+
var RetryButton$1 = styled(LoaderButton)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
7131
|
+
var templateObject_1$z, templateObject_2$o, templateObject_3$j, templateObject_4$e;
|
|
7108
7132
|
|
|
7109
|
-
var ExitCaptureStyledButton = styled.button(templateObject_1$
|
|
7133
|
+
var ExitCaptureStyledButton = styled.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"])));
|
|
7110
7134
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
7111
7135
|
var onClick = _a.onClick,
|
|
7112
7136
|
className = _a.className;
|
|
@@ -7150,10 +7174,10 @@ var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
|
7150
7174
|
y2: "19.75"
|
|
7151
7175
|
}))));
|
|
7152
7176
|
};
|
|
7153
|
-
var templateObject_1$
|
|
7177
|
+
var templateObject_1$y;
|
|
7154
7178
|
|
|
7155
|
-
var ButtonsRow
|
|
7156
|
-
var templateObject_1$
|
|
7179
|
+
var ButtonsRow = styled.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"])));
|
|
7180
|
+
var templateObject_1$x;
|
|
7157
7181
|
|
|
7158
7182
|
function IdCaptureLoadingGraphic(props) {
|
|
7159
7183
|
var isMobile = window.innerHeight > window.innerWidth;
|
|
@@ -7788,25 +7812,25 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
|
|
|
7788
7812
|
}
|
|
7789
7813
|
}, verbiage.continueText))))));
|
|
7790
7814
|
};
|
|
7791
|
-
var OverlayInner$1 = styled.div(templateObject_1$
|
|
7815
|
+
var OverlayInner$1 = styled.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) {
|
|
7792
7816
|
var _a, _b, _c, _d;
|
|
7793
7817
|
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';
|
|
7794
7818
|
}, function (props) {
|
|
7795
7819
|
var _a, _b, _c, _d;
|
|
7796
7820
|
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';
|
|
7797
7821
|
});
|
|
7798
|
-
var OverlayHeader$1 = styled.div(templateObject_2$
|
|
7822
|
+
var OverlayHeader$1 = styled.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) {
|
|
7799
7823
|
var _a;
|
|
7800
7824
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
7801
7825
|
}, function (props) {
|
|
7802
7826
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
7803
7827
|
});
|
|
7804
|
-
var StyledGuidanceMessage$2 = styled(GuidanceMessage)(templateObject_3$
|
|
7805
|
-
var StyledOverlayImageContainer$2 = styled(OverlayImageContainer)(templateObject_4$
|
|
7806
|
-
var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_5$
|
|
7807
|
-
var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_6$
|
|
7808
|
-
var ContinuityCameraCheckbox$1 = styled.input(templateObject_7$
|
|
7809
|
-
var StyledButtonsRow$a = styled(ButtonsRow
|
|
7828
|
+
var StyledGuidanceMessage$2 = styled(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"])));
|
|
7829
|
+
var StyledOverlayImageContainer$2 = styled(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"])));
|
|
7830
|
+
var ContinuityCameraCheckboxContainer$1 = styled.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"])));
|
|
7831
|
+
var ContinuityCameraCheckboxInner = styled(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"])));
|
|
7832
|
+
var ContinuityCameraCheckbox$1 = styled.input(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7833
|
+
var StyledButtonsRow$a = styled(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) {
|
|
7810
7834
|
var _a, _b, _c, _d;
|
|
7811
7835
|
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';
|
|
7812
7836
|
}, function (props) {
|
|
@@ -7840,10 +7864,10 @@ var ContinueButton$1 = styled(LoaderButton)(templateObject_18 || (templateObject
|
|
|
7840
7864
|
var _a, _b, _c, _d, _e, _f;
|
|
7841
7865
|
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, ";") : '';
|
|
7842
7866
|
});
|
|
7843
|
-
var templateObject_1$
|
|
7867
|
+
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;
|
|
7844
7868
|
|
|
7845
|
-
var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$
|
|
7846
|
-
var ContinuityCameraCheckbox = styled.input(templateObject_2$
|
|
7869
|
+
var ContinuityCameraCheckboxContainer = styled.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"])));
|
|
7870
|
+
var ContinuityCameraCheckbox = styled.input(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7847
7871
|
var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
7848
7872
|
var _b, _c, _d, _e;
|
|
7849
7873
|
var onDismissed = _a.onDismissed,
|
|
@@ -7954,7 +7978,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
|
7954
7978
|
}
|
|
7955
7979
|
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
|
|
7956
7980
|
};
|
|
7957
|
-
var templateObject_1$
|
|
7981
|
+
var templateObject_1$v, templateObject_2$m;
|
|
7958
7982
|
|
|
7959
7983
|
var components$1 = {
|
|
7960
7984
|
"default": IdCaptureLoadingOverlayDefault,
|
|
@@ -8011,7 +8035,7 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
|
|
|
8011
8035
|
});
|
|
8012
8036
|
};
|
|
8013
8037
|
|
|
8014
|
-
var OverlayInstruction = styled.p(templateObject_1$
|
|
8038
|
+
var OverlayInstruction = styled.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"])));
|
|
8015
8039
|
var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
8016
8040
|
var capturedDocuments = _a.capturedDocuments,
|
|
8017
8041
|
onSubmitClick = _a.onSubmitClick,
|
|
@@ -8046,7 +8070,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8046
8070
|
className: classNames.imageContainer
|
|
8047
8071
|
}, /*#__PURE__*/React__default.createElement(ImageRow, {
|
|
8048
8072
|
className: classNames.imageRow
|
|
8049
|
-
}, /*#__PURE__*/React__default.createElement(Heading$
|
|
8073
|
+
}, /*#__PURE__*/React__default.createElement(Heading$9, {
|
|
8050
8074
|
className: classNames.heading
|
|
8051
8075
|
}, verbiage.headingText), idCardFront && ( /*#__PURE__*/React__default.createElement(ImageCol$1, {
|
|
8052
8076
|
className: classNames.imageCol
|
|
@@ -8080,7 +8104,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8080
8104
|
alt: verbiage.passportText
|
|
8081
8105
|
})), debugMode && ( /*#__PURE__*/React__default.createElement("pre", null, "Detection Score: ".concat(passport.detectionScore, "\nFocus Score: ").concat(passport.focusScore, "\nBounding Box: ").concat(JSON.stringify(passport.boundingBox)))))))), /*#__PURE__*/React__default.createElement(OverlayInstruction, {
|
|
8082
8106
|
className: classNames.instruction
|
|
8083
|
-
}, verbiage.instructionText), /*#__PURE__*/React__default.createElement(ButtonsRow
|
|
8107
|
+
}, verbiage.instructionText), /*#__PURE__*/React__default.createElement(ButtonsRow, {
|
|
8084
8108
|
className: classNames.buttonsRow
|
|
8085
8109
|
}, /*#__PURE__*/React__default.createElement(LoaderButton, {
|
|
8086
8110
|
className: classNames.retryBtn,
|
|
@@ -8097,17 +8121,17 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8097
8121
|
finished: true
|
|
8098
8122
|
}, submissionStatus === SubmissionStatus.SUBMITTING ? verbiage.submittingText : verbiage.submitText))));
|
|
8099
8123
|
};
|
|
8100
|
-
var Heading$
|
|
8101
|
-
var ImagesContainer = styled(OverlayImageContainer)(templateObject_3$
|
|
8102
|
-
var ImageRow = styled(OverlayImageRow)(templateObject_4$
|
|
8103
|
-
var ImageCol$1 = styled.div(templateObject_5$
|
|
8104
|
-
var ImageHeading = styled.h3(templateObject_6$
|
|
8105
|
-
var CapturedImageWrapper = styled.div(templateObject_7$
|
|
8124
|
+
var Heading$9 = styled.h1(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n margin-bottom: 12px;\n"], ["\n margin-bottom: 12px;\n"])));
|
|
8125
|
+
var ImagesContainer = styled(OverlayImageContainer)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n overflow-y: auto;\n"], ["\n overflow-y: auto;\n"])));
|
|
8126
|
+
var ImageRow = styled(OverlayImageRow)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n flex-direction: column;\n"], ["\n flex-direction: column;\n"])));
|
|
8127
|
+
var ImageCol$1 = styled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n max-height: none !important;\n"], ["\n max-height: none !important;\n"])));
|
|
8128
|
+
var ImageHeading = styled.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"])));
|
|
8129
|
+
var CapturedImageWrapper = styled.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) {
|
|
8106
8130
|
var _a, _b, _c;
|
|
8107
8131
|
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)';
|
|
8108
8132
|
});
|
|
8109
8133
|
var StyledImage = styled(CapturedDocumentImg)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n width: 100%;\n border-radius: 4px;\n"], ["\n width: 100%;\n border-radius: 4px;\n"])));
|
|
8110
|
-
var templateObject_1$
|
|
8134
|
+
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;
|
|
8111
8135
|
|
|
8112
8136
|
var CameraVideoTag = function CameraVideoTag(_a) {
|
|
8113
8137
|
var _b;
|
|
@@ -8146,10 +8170,10 @@ var CameraVideoTag = function CameraVideoTag(_a) {
|
|
|
8146
8170
|
"$isRearFacing": (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing
|
|
8147
8171
|
});
|
|
8148
8172
|
};
|
|
8149
|
-
var FullscreenVideoTag = styled.video(templateObject_1$
|
|
8173
|
+
var FullscreenVideoTag = styled.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) {
|
|
8150
8174
|
return props.$isRearFacing ? '' : 'scaleX(-1)';
|
|
8151
8175
|
});
|
|
8152
|
-
var templateObject_1$
|
|
8176
|
+
var templateObject_1$t;
|
|
8153
8177
|
|
|
8154
8178
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
8155
8179
|
var _this = this;
|
|
@@ -8184,10 +8208,10 @@ function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallb
|
|
|
8184
8208
|
return !skipSuccessScreen || skipSuccessScreenResolvedFalse;
|
|
8185
8209
|
}
|
|
8186
8210
|
|
|
8187
|
-
var CameraFeedWrapper = styled.div(templateObject_1$
|
|
8211
|
+
var CameraFeedWrapper = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8188
8212
|
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;") : "";
|
|
8189
8213
|
});
|
|
8190
|
-
var templateObject_1$
|
|
8214
|
+
var templateObject_1$s;
|
|
8191
8215
|
|
|
8192
8216
|
function setCanvasDimensions(canvas, width, height) {
|
|
8193
8217
|
var _a;
|
|
@@ -8221,10 +8245,10 @@ var GuideOrientationContext = /*#__PURE__*/createContext({
|
|
|
8221
8245
|
}
|
|
8222
8246
|
});
|
|
8223
8247
|
|
|
8224
|
-
var StyledPageContainer = styled(PageContainerDiv)(templateObject_1$
|
|
8225
|
-
var GuidesContainer = styled.div(templateObject_2$
|
|
8226
|
-
var GuideCenterRow = styled.div(templateObject_3$
|
|
8227
|
-
var GuideRegion = styled.div(templateObject_4$
|
|
8248
|
+
var StyledPageContainer = styled(PageContainerDiv)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n z-index: 1000;\n"], ["\n z-index: 1000;\n"])));
|
|
8249
|
+
var GuidesContainer = styled.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"])));
|
|
8250
|
+
var GuideCenterRow = styled.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"])));
|
|
8251
|
+
var GuideRegion = styled.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) {
|
|
8228
8252
|
var _a, _b, _c, _d, _e;
|
|
8229
8253
|
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)';
|
|
8230
8254
|
}, function (props) {
|
|
@@ -8235,13 +8259,13 @@ var GuideRegion = styled.div(templateObject_4$c || (templateObject_4$c = __makeT
|
|
|
8235
8259
|
}, function (props) {
|
|
8236
8260
|
return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
|
|
8237
8261
|
});
|
|
8238
|
-
var Spacer = styled(GuideRegion)(templateObject_5$
|
|
8239
|
-
var GuideCenterRegion = styled.div(templateObject_6$
|
|
8262
|
+
var Spacer = styled(GuideRegion)(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n display: block;\n width: auto;\n"], ["\n display: block;\n width: auto;\n"])));
|
|
8263
|
+
var GuideCenterRegion = styled.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) {
|
|
8240
8264
|
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
8241
8265
|
}, function (props) {
|
|
8242
8266
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
8243
8267
|
});
|
|
8244
|
-
var GuideCenterBorder = styled.div(templateObject_7$
|
|
8268
|
+
var GuideCenterBorder = styled.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) {
|
|
8245
8269
|
var _a, _b;
|
|
8246
8270
|
return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
|
|
8247
8271
|
});
|
|
@@ -8369,9 +8393,9 @@ var regionClsx$1 = function regionClsx(classNames, which) {
|
|
|
8369
8393
|
return v;
|
|
8370
8394
|
}).join(' ');
|
|
8371
8395
|
};
|
|
8372
|
-
var templateObject_1$
|
|
8396
|
+
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;
|
|
8373
8397
|
|
|
8374
|
-
var FlippingImage = styled(GuideImage)(templateObject_1$
|
|
8398
|
+
var FlippingImage = styled(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) {
|
|
8375
8399
|
return props.$transitionTime;
|
|
8376
8400
|
}, function (props) {
|
|
8377
8401
|
return props.$transforms;
|
|
@@ -8516,7 +8540,7 @@ var regionClsx = function regionClsx(classNames, which) {
|
|
|
8516
8540
|
return v;
|
|
8517
8541
|
}).join(' ');
|
|
8518
8542
|
};
|
|
8519
|
-
var templateObject_1$
|
|
8543
|
+
var templateObject_1$q;
|
|
8520
8544
|
|
|
8521
8545
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
8522
8546
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -8652,11 +8676,11 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
8652
8676
|
imageVisible: imageVisible
|
|
8653
8677
|
})));
|
|
8654
8678
|
};
|
|
8655
|
-
var CanvasWrapper$1 = styled.div(templateObject_1$
|
|
8679
|
+
var CanvasWrapper$1 = styled.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) {
|
|
8656
8680
|
return props.$maskColor;
|
|
8657
8681
|
});
|
|
8658
|
-
var Canvas$1 = styled.canvas(templateObject_2$
|
|
8659
|
-
var templateObject_1$
|
|
8682
|
+
var Canvas$1 = styled.canvas(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
8683
|
+
var templateObject_1$p, templateObject_2$j;
|
|
8660
8684
|
|
|
8661
8685
|
function IdCaptureGuides(_a) {
|
|
8662
8686
|
var _b, _c;
|
|
@@ -8801,11 +8825,11 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
|
|
|
8801
8825
|
onError: onError
|
|
8802
8826
|
})));
|
|
8803
8827
|
};
|
|
8804
|
-
var StyledSpinner = styled(Spinner)(templateObject_1$
|
|
8805
|
-
var ImagePreviewWrapper = styled.div(templateObject_2$
|
|
8806
|
-
var ImagePreviewText = styled.div(templateObject_3$
|
|
8807
|
-
var ImagePreviewImageWrapper = styled.div(templateObject_4$
|
|
8808
|
-
var templateObject_1$
|
|
8828
|
+
var StyledSpinner = styled(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"])));
|
|
8829
|
+
var ImagePreviewWrapper = styled.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"])));
|
|
8830
|
+
var ImagePreviewText = styled.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"])));
|
|
8831
|
+
var ImagePreviewImageWrapper = styled.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"])));
|
|
8832
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$f, templateObject_4$a;
|
|
8809
8833
|
|
|
8810
8834
|
var documentCaptureInitialState = {
|
|
8811
8835
|
documents: [],
|
|
@@ -9161,11 +9185,11 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
|
|
|
9161
9185
|
ref: canvasRef
|
|
9162
9186
|
}));
|
|
9163
9187
|
};
|
|
9164
|
-
var CanvasWrapper = styled.div(templateObject_1$
|
|
9188
|
+
var CanvasWrapper = styled.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) {
|
|
9165
9189
|
return props.$maskColor;
|
|
9166
9190
|
});
|
|
9167
|
-
var Canvas = styled.canvas(templateObject_2$
|
|
9168
|
-
var templateObject_1$
|
|
9191
|
+
var Canvas = styled.canvas(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
9192
|
+
var templateObject_1$n, templateObject_2$h;
|
|
9169
9193
|
|
|
9170
9194
|
var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
9171
9195
|
var _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -9269,7 +9293,7 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
9269
9293
|
}, /*#__PURE__*/React__default.createElement(HeadingRow, {
|
|
9270
9294
|
"$maskColor": maskColor,
|
|
9271
9295
|
className: classNames.headingRow
|
|
9272
|
-
}, /*#__PURE__*/React__default.createElement(Heading$
|
|
9296
|
+
}, /*#__PURE__*/React__default.createElement(Heading$8, {
|
|
9273
9297
|
className: classNames.heading
|
|
9274
9298
|
}, verbiage.headingText)), /*#__PURE__*/React__default.createElement(DocumentCaptureGuideOverlay, {
|
|
9275
9299
|
aspectRatio: aspectRatio,
|
|
@@ -9315,21 +9339,21 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
9315
9339
|
disabled: !cameraReady || capturing
|
|
9316
9340
|
}, !cameraReady ? verbiage.loadingBtnText : capturing ? verbiage.capturingBtnText : verbiage.captureBtnText))))));
|
|
9317
9341
|
};
|
|
9318
|
-
var CaptureContainer = styled.div(templateObject_1$
|
|
9319
|
-
var HeadingRow = styled.div(templateObject_2$
|
|
9342
|
+
var CaptureContainer = styled.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"])));
|
|
9343
|
+
var HeadingRow = styled.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) {
|
|
9320
9344
|
return props.$maskColor;
|
|
9321
9345
|
});
|
|
9322
|
-
var Heading$
|
|
9323
|
-
var FooterRow = styled.div(templateObject_4$
|
|
9346
|
+
var Heading$8 = styled.h1(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n font-size: 22px;\n"], ["\n font-size: 22px;\n"])));
|
|
9347
|
+
var FooterRow = styled.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) {
|
|
9324
9348
|
return props.$maskColor;
|
|
9325
9349
|
});
|
|
9326
|
-
var Instructions = styled.div(templateObject_5$
|
|
9350
|
+
var Instructions = styled.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) {
|
|
9327
9351
|
var _a, _b, _c;
|
|
9328
9352
|
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';
|
|
9329
9353
|
});
|
|
9330
|
-
var StyledButtonsRow$9 = styled(ButtonsRow
|
|
9331
|
-
var PreviewImage = styled.img(templateObject_7$
|
|
9332
|
-
var templateObject_1$
|
|
9354
|
+
var StyledButtonsRow$9 = styled(ButtonsRow)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n padding-top: 20px;\n"], ["\n padding-top: 20px;\n"])));
|
|
9355
|
+
var PreviewImage = styled.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"])));
|
|
9356
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$e, templateObject_4$9, templateObject_5$5, templateObject_6$4, templateObject_7$2;
|
|
9333
9357
|
|
|
9334
9358
|
var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
|
|
9335
9359
|
var onSuccess = _a.onSuccess,
|
|
@@ -9549,7 +9573,7 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
9549
9573
|
className: classNames.container
|
|
9550
9574
|
}, /*#__PURE__*/React__default.createElement(StyledOverlayInner$2, {
|
|
9551
9575
|
className: classNames.inner
|
|
9552
|
-
}, !silentFallback && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Heading$
|
|
9576
|
+
}, !silentFallback && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Heading$7, {
|
|
9553
9577
|
className: classNames.heading
|
|
9554
9578
|
}, verbiage.headingText), /*#__PURE__*/React__default.createElement(Description$3, {
|
|
9555
9579
|
className: classNames.description
|
|
@@ -9598,13 +9622,13 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
9598
9622
|
}
|
|
9599
9623
|
}, verbiage.doneBtnText))))));
|
|
9600
9624
|
};
|
|
9601
|
-
var StyledOverlayInner$2 = styled(OverlayInner$2)(templateObject_1$
|
|
9602
|
-
var Heading$
|
|
9603
|
-
var Description$3 = styled.p(templateObject_3$
|
|
9604
|
-
var Instruction = styled.p(templateObject_4$
|
|
9605
|
-
var ImageCol = styled.div(templateObject_5$
|
|
9606
|
-
var StyledButtonsRow$8 = styled(ButtonsRow
|
|
9607
|
-
var templateObject_1$
|
|
9625
|
+
var StyledOverlayInner$2 = styled(OverlayInner$2)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
9626
|
+
var Heading$7 = styled.h3(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
9627
|
+
var Description$3 = styled.p(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
9628
|
+
var Instruction = styled.p(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
9629
|
+
var ImageCol = styled.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"])));
|
|
9630
|
+
var StyledButtonsRow$8 = styled(ButtonsRow)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
9631
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$d, templateObject_4$8, templateObject_5$4, templateObject_6$3;
|
|
9608
9632
|
|
|
9609
9633
|
var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
9610
9634
|
var _b, _c, _d, _e, _f, _g;
|
|
@@ -9965,776 +9989,144 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
9965
9989
|
})));
|
|
9966
9990
|
};
|
|
9967
9991
|
|
|
9968
|
-
|
|
9969
|
-
|
|
9970
|
-
|
|
9971
|
-
|
|
9972
|
-
|
|
9973
|
-
|
|
9974
|
-
|
|
9975
|
-
|
|
9976
|
-
|
|
9977
|
-
|
|
9978
|
-
|
|
9979
|
-
|
|
9980
|
-
|
|
9981
|
-
|
|
9992
|
+
var FaceCaptureGuideContainer = styled.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"])));
|
|
9993
|
+
var FaceCaptureGuideOval = styled.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) {
|
|
9994
|
+
return props.$borderWidth;
|
|
9995
|
+
}, function (props) {
|
|
9996
|
+
var _a, _b, _c, _d;
|
|
9997
|
+
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';
|
|
9998
|
+
});
|
|
9999
|
+
var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
|
|
10000
|
+
var _b = _a.classNames,
|
|
10001
|
+
classNames = _b === void 0 ? {} : _b,
|
|
10002
|
+
_c = _a.variant,
|
|
10003
|
+
variant = _c === void 0 ? 'unsatisfied' : _c,
|
|
10004
|
+
_d = _a.borderWidth,
|
|
10005
|
+
borderWidth = _d === void 0 ? 3 : _d,
|
|
10006
|
+
borderColor = _a.borderColor;
|
|
10007
|
+
return /*#__PURE__*/React__default.createElement(FaceCaptureGuideContainer, {
|
|
10008
|
+
className: classNames.container
|
|
10009
|
+
}, /*#__PURE__*/React__default.createElement(FaceCaptureGuideOval, {
|
|
10010
|
+
className: classNames.oval,
|
|
10011
|
+
"$variant": variant,
|
|
10012
|
+
"$borderWidth": borderWidth,
|
|
10013
|
+
"$borderColor": borderColor
|
|
10014
|
+
}));
|
|
10015
|
+
};
|
|
10016
|
+
var templateObject_1$k, templateObject_2$e;
|
|
10017
|
+
|
|
10018
|
+
var SelfieGuidanceModelsContext = /*#__PURE__*/createContext({
|
|
10019
|
+
start: function start() {
|
|
10020
|
+
return null;
|
|
10021
|
+
},
|
|
10022
|
+
stop: function stop() {
|
|
10023
|
+
return null;
|
|
10024
|
+
},
|
|
10025
|
+
onPredictionMade: function onPredictionMade() {
|
|
10026
|
+
return null;
|
|
10027
|
+
},
|
|
10028
|
+
canvasRef: {
|
|
10029
|
+
current: null
|
|
10030
|
+
},
|
|
10031
|
+
ready: false,
|
|
10032
|
+
error: null,
|
|
10033
|
+
modelDownloadProgress: 0
|
|
10034
|
+
});
|
|
10035
|
+
function SelfieGuidanceModelsProvider(_a) {
|
|
10036
|
+
var _this = this;
|
|
10037
|
+
var _b = _a.autoStart,
|
|
10038
|
+
autoStart = _b === void 0 ? true : _b,
|
|
10039
|
+
children = _a.children,
|
|
10040
|
+
throttleMs = _a.throttleMs,
|
|
10041
|
+
onModelError = _a.onModelError,
|
|
10042
|
+
_c = _a.modelLoadTimeoutMs,
|
|
10043
|
+
modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c;
|
|
10044
|
+
var _d = useContext(CameraStateContext),
|
|
10045
|
+
videoRef = _d.videoRef,
|
|
10046
|
+
videoLoaded = _d.videoLoaded,
|
|
10047
|
+
cameraReady = _d.cameraReady;
|
|
10048
|
+
var canvasRef = useRef(null);
|
|
10049
|
+
var onPredictionHandler = useRef();
|
|
10050
|
+
var _e = useLoadFaceDetector({
|
|
10051
|
+
onModelError: onModelError,
|
|
10052
|
+
modelLoadTimeoutMs: modelLoadTimeoutMs
|
|
10053
|
+
}),
|
|
10054
|
+
detector = _e.detector,
|
|
10055
|
+
ready = _e.ready,
|
|
10056
|
+
modelDownloadProgress = _e.modelDownloadProgress,
|
|
10057
|
+
modelError = _e.modelError;
|
|
10058
|
+
var _f = useFrameLoop(useCallback(function () {
|
|
10059
|
+
return __awaiter(_this, void 0, void 0, function () {
|
|
10060
|
+
var vw, vh, ctx, faces;
|
|
10061
|
+
var _a;
|
|
10062
|
+
return __generator(this, function (_b) {
|
|
10063
|
+
if (!videoLoaded || !cameraReady || !ready || modelError || !videoRef.current || !detector.current || !canvasRef.current) return [2 /*return*/];
|
|
10064
|
+
vw = videoRef.current.videoWidth;
|
|
10065
|
+
vh = videoRef.current.videoHeight;
|
|
10066
|
+
ctx = canvasRef.current.getContext('2d');
|
|
10067
|
+
canvasRef.current.width = vw;
|
|
10068
|
+
canvasRef.current.height = vh;
|
|
10069
|
+
if (ctx && videoRef.current.readyState === 4) {
|
|
10070
|
+
ctx.translate(vw, 0);
|
|
10071
|
+
ctx.scale(-1, 1);
|
|
10072
|
+
ctx.drawImage(videoRef.current, 0, 0, vw, vh);
|
|
10073
|
+
// Detectors can throw errors, for example when using custom URLs that
|
|
10074
|
+
// contain a model that doesn't provide the expected output.
|
|
10075
|
+
try {
|
|
10076
|
+
faces = makeFaceDetectorPrediction(detector.current, canvasRef.current).faces;
|
|
10077
|
+
(_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, faces);
|
|
10078
|
+
} catch (e) {
|
|
10079
|
+
error('caught face detection error', e);
|
|
10080
|
+
}
|
|
10081
|
+
}
|
|
10082
|
+
return [2 /*return*/];
|
|
10083
|
+
});
|
|
9982
10084
|
});
|
|
9983
|
-
},
|
|
10085
|
+
}, [cameraReady, detector, modelError, ready, videoLoaded, videoRef]), {
|
|
10086
|
+
throttleMs: throttleMs,
|
|
10087
|
+
autoStart: autoStart
|
|
10088
|
+
}),
|
|
10089
|
+
start = _f.start,
|
|
10090
|
+
stop = _f.stop;
|
|
10091
|
+
var onPredictionMade = useCallback(function (handler) {
|
|
10092
|
+
onPredictionHandler.current = handler;
|
|
10093
|
+
}, []);
|
|
10094
|
+
var value = useMemo(function () {
|
|
10095
|
+
return {
|
|
10096
|
+
start: start,
|
|
10097
|
+
stop: stop,
|
|
10098
|
+
ready: ready,
|
|
10099
|
+
canvasRef: canvasRef,
|
|
10100
|
+
onPredictionMade: onPredictionMade,
|
|
10101
|
+
error: modelError,
|
|
10102
|
+
modelDownloadProgress: modelDownloadProgress
|
|
10103
|
+
};
|
|
10104
|
+
}, [modelError, modelDownloadProgress, onPredictionMade, ready, start, stop]);
|
|
10105
|
+
return /*#__PURE__*/React.createElement(SelfieGuidanceModelsContext.Provider, {
|
|
10106
|
+
value: value
|
|
10107
|
+
}, /*#__PURE__*/React.createElement(InvisibleCanvas, {
|
|
10108
|
+
ref: canvasRef
|
|
10109
|
+
}), children);
|
|
10110
|
+
}
|
|
10111
|
+
|
|
10112
|
+
var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger, shouldStart) {
|
|
10113
|
+
if (shouldStart === void 0) {
|
|
10114
|
+
shouldStart = true;
|
|
10115
|
+
}
|
|
10116
|
+
var _a = useState(false),
|
|
10117
|
+
timedOut = _a[0],
|
|
10118
|
+
setTimedOut = _a[1];
|
|
10119
|
+
var _b = useState(),
|
|
10120
|
+
timeoutStartedAt = _b[0],
|
|
10121
|
+
setTimeoutStartedAt = _b[1];
|
|
10122
|
+
useEffect(function () {
|
|
10123
|
+
if (!durationMs || !shouldStart) return;
|
|
10124
|
+
setTimeoutStartedAt(new Date());
|
|
10125
|
+
var timer = setTimeout(function () {
|
|
10126
|
+
setTimedOut(true);
|
|
10127
|
+
}, durationMs);
|
|
9984
10128
|
return function () {
|
|
9985
|
-
|
|
9986
|
-
};
|
|
9987
|
-
}, []);
|
|
9988
|
-
var theme = useTheme();
|
|
9989
|
-
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)';
|
|
9990
|
-
return /*#__PURE__*/React__default.createElement("svg", {
|
|
9991
|
-
width: width,
|
|
9992
|
-
height: height,
|
|
9993
|
-
className: className,
|
|
9994
|
-
viewBox: "0 0 840 740",
|
|
9995
|
-
fill: "none",
|
|
9996
|
-
preserveAspectRatio: "xMidYMax slice",
|
|
9997
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
9998
|
-
}, /*#__PURE__*/React__default.createElement("g", {
|
|
9999
|
-
clipPath: "url(#clip0_428_1188)"
|
|
10000
|
-
}, /*#__PURE__*/React__default.createElement("mask", {
|
|
10001
|
-
id: "mask0_428_1188",
|
|
10002
|
-
style: {
|
|
10003
|
-
maskType: 'alpha'
|
|
10004
|
-
},
|
|
10005
|
-
maskUnits: "userSpaceOnUse",
|
|
10006
|
-
x: "0",
|
|
10007
|
-
y: "0",
|
|
10008
|
-
width: "840",
|
|
10009
|
-
height: "740"
|
|
10010
|
-
}, /*#__PURE__*/React__default.createElement("rect", {
|
|
10011
|
-
width: "840",
|
|
10012
|
-
height: "740",
|
|
10013
|
-
fill: "#D9D9D9"
|
|
10014
|
-
})), /*#__PURE__*/React__default.createElement("g", {
|
|
10015
|
-
mask: "url(#mask0_428_1188)"
|
|
10016
|
-
}, /*#__PURE__*/React__default.createElement("path", {
|
|
10017
|
-
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",
|
|
10018
|
-
fill: "#D2D4DA"
|
|
10019
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10020
|
-
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",
|
|
10021
|
-
fill: "#F7A69C"
|
|
10022
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10023
|
-
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",
|
|
10024
|
-
fill: "#F7A69C"
|
|
10025
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10026
|
-
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",
|
|
10027
|
-
fill: "#DC968D"
|
|
10028
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10029
|
-
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",
|
|
10030
|
-
fill: "#F7A69C"
|
|
10031
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10032
|
-
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",
|
|
10033
|
-
fill: "#FEAEA5"
|
|
10034
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10035
|
-
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",
|
|
10036
|
-
fill: "#F7A69C"
|
|
10037
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10038
|
-
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",
|
|
10039
|
-
fill: "#6E7174"
|
|
10040
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10041
|
-
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",
|
|
10042
|
-
fill: "#555A5E"
|
|
10043
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10044
|
-
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",
|
|
10045
|
-
fill: "#525252"
|
|
10046
|
-
})), frame >= 8 ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("path", {
|
|
10047
|
-
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",
|
|
10048
|
-
stroke: satisfiedColor,
|
|
10049
|
-
strokeWidth: "5"
|
|
10050
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10051
|
-
cx: "518.5",
|
|
10052
|
-
cy: "438.5",
|
|
10053
|
-
r: "25.5",
|
|
10054
|
-
fill: satisfiedColor
|
|
10055
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10056
|
-
d: "M504 440.5L512 448L531 427",
|
|
10057
|
-
stroke: "white",
|
|
10058
|
-
strokeWidth: "5",
|
|
10059
|
-
strokeLinecap: "round",
|
|
10060
|
-
strokeLinejoin: "round"
|
|
10061
|
-
}))) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, frame > 2 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, frame > 3 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, frame > 4 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, frame > 5 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("path", {
|
|
10062
|
-
d: "M298.5 182.5L419 164.5L540 182",
|
|
10063
|
-
stroke: "white",
|
|
10064
|
-
strokeWidth: "2",
|
|
10065
|
-
strokeLinecap: "round",
|
|
10066
|
-
strokeLinejoin: "round"
|
|
10067
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10068
|
-
cx: "419",
|
|
10069
|
-
cy: "165",
|
|
10070
|
-
r: "7",
|
|
10071
|
-
fill: "white"
|
|
10072
|
-
}))), /*#__PURE__*/React__default.createElement("path", {
|
|
10073
|
-
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",
|
|
10074
|
-
stroke: "white",
|
|
10075
|
-
strokeOpacity: frame > 7 ? 0.8 : frame > 5 ? 0.3 : 0.1,
|
|
10076
|
-
strokeWidth: "5"
|
|
10077
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10078
|
-
d: "M299.939 262.805L419 478.5L538.5 261.5",
|
|
10079
|
-
stroke: "white",
|
|
10080
|
-
strokeWidth: "2",
|
|
10081
|
-
strokeLinecap: "round",
|
|
10082
|
-
strokeLinejoin: "round"
|
|
10083
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10084
|
-
d: "M298.5 182.5L418.871 230.054L540 182",
|
|
10085
|
-
stroke: "white",
|
|
10086
|
-
strokeWidth: "2",
|
|
10087
|
-
strokeLinecap: "round",
|
|
10088
|
-
strokeLinejoin: "round"
|
|
10089
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10090
|
-
d: "M298.5 182.5L299.939 262.805",
|
|
10091
|
-
stroke: "white",
|
|
10092
|
-
strokeWidth: "2",
|
|
10093
|
-
strokeLinecap: "round",
|
|
10094
|
-
strokeLinejoin: "round"
|
|
10095
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10096
|
-
d: "M540.001 182L538.501 261.5",
|
|
10097
|
-
stroke: "white",
|
|
10098
|
-
strokeWidth: "2",
|
|
10099
|
-
strokeLinecap: "round",
|
|
10100
|
-
strokeLinejoin: "round"
|
|
10101
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10102
|
-
cx: "299.914",
|
|
10103
|
-
cy: "182",
|
|
10104
|
-
r: "7",
|
|
10105
|
-
fill: "white"
|
|
10106
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10107
|
-
cx: "540",
|
|
10108
|
-
cy: "182",
|
|
10109
|
-
r: "7",
|
|
10110
|
-
fill: "white"
|
|
10111
|
-
}))), /*#__PURE__*/React__default.createElement("path", {
|
|
10112
|
-
d: "M418.828 230L419 342.5",
|
|
10113
|
-
stroke: "white",
|
|
10114
|
-
strokeWidth: "2",
|
|
10115
|
-
strokeLinecap: "round",
|
|
10116
|
-
strokeLinejoin: "round",
|
|
10117
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10118
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10119
|
-
d: "M300 263.001L419 342.501",
|
|
10120
|
-
stroke: "white",
|
|
10121
|
-
strokeWidth: "2",
|
|
10122
|
-
strokeLinecap: "round",
|
|
10123
|
-
strokeLinejoin: "round",
|
|
10124
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10125
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10126
|
-
d: "M538.5 261.5L419 342.5",
|
|
10127
|
-
stroke: "white",
|
|
10128
|
-
strokeWidth: "2",
|
|
10129
|
-
strokeLinecap: "round",
|
|
10130
|
-
strokeLinejoin: "round",
|
|
10131
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10132
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10133
|
-
d: "M301.5 409L419 342.5",
|
|
10134
|
-
stroke: "white",
|
|
10135
|
-
strokeWidth: "2",
|
|
10136
|
-
strokeLinecap: "round",
|
|
10137
|
-
strokeLinejoin: "round",
|
|
10138
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10139
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10140
|
-
d: "M536.5 410L419 342.5",
|
|
10141
|
-
stroke: "white",
|
|
10142
|
-
strokeWidth: "2",
|
|
10143
|
-
strokeLinecap: "round",
|
|
10144
|
-
strokeLinejoin: "round",
|
|
10145
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10146
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10147
|
-
d: "M300 263L419 230",
|
|
10148
|
-
stroke: "white",
|
|
10149
|
-
strokeWidth: "2",
|
|
10150
|
-
strokeLinecap: "round",
|
|
10151
|
-
strokeLinejoin: "round",
|
|
10152
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10153
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10154
|
-
d: "M538.5 261.5L419 230",
|
|
10155
|
-
stroke: "white",
|
|
10156
|
-
strokeWidth: "2",
|
|
10157
|
-
strokeLinecap: "round",
|
|
10158
|
-
strokeLinejoin: "round",
|
|
10159
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10160
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10161
|
-
cx: "419",
|
|
10162
|
-
cy: "229.971",
|
|
10163
|
-
r: "7",
|
|
10164
|
-
fill: "white"
|
|
10165
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10166
|
-
cx: "419",
|
|
10167
|
-
cy: "342.4",
|
|
10168
|
-
r: "7",
|
|
10169
|
-
fill: "white"
|
|
10170
|
-
}))), /*#__PURE__*/React__default.createElement("path", {
|
|
10171
|
-
d: "M538.5 261.5L536.5 410",
|
|
10172
|
-
stroke: "white",
|
|
10173
|
-
strokeWidth: "2",
|
|
10174
|
-
strokeLinecap: "round",
|
|
10175
|
-
strokeLinejoin: "round",
|
|
10176
|
-
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
10177
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10178
|
-
d: "M419 478.5L536.5 410",
|
|
10179
|
-
stroke: "white",
|
|
10180
|
-
strokeWidth: "2",
|
|
10181
|
-
strokeLinecap: "round",
|
|
10182
|
-
strokeLinejoin: "round",
|
|
10183
|
-
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
10184
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10185
|
-
cx: "537",
|
|
10186
|
-
cy: "263",
|
|
10187
|
-
r: "7",
|
|
10188
|
-
fill: "white"
|
|
10189
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10190
|
-
cx: "537",
|
|
10191
|
-
cy: "409",
|
|
10192
|
-
r: "7",
|
|
10193
|
-
fill: "white"
|
|
10194
|
-
}))), frame > 1 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("path", {
|
|
10195
|
-
d: "M301.501 409L300.001 263",
|
|
10196
|
-
stroke: "white",
|
|
10197
|
-
strokeWidth: "2",
|
|
10198
|
-
strokeLinecap: "round",
|
|
10199
|
-
strokeLinejoin: "round",
|
|
10200
|
-
strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
|
|
10201
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10202
|
-
d: "M301.501 409L419.001 478.5",
|
|
10203
|
-
stroke: "white",
|
|
10204
|
-
strokeWidth: "2",
|
|
10205
|
-
strokeLinecap: "round",
|
|
10206
|
-
strokeLinejoin: "round",
|
|
10207
|
-
strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
|
|
10208
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10209
|
-
cx: "419",
|
|
10210
|
-
cy: "477.576",
|
|
10211
|
-
r: "7",
|
|
10212
|
-
fill: "white"
|
|
10213
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10214
|
-
cx: "301.914",
|
|
10215
|
-
cy: "263",
|
|
10216
|
-
r: "7",
|
|
10217
|
-
fill: "white"
|
|
10218
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10219
|
-
cx: "301.444",
|
|
10220
|
-
cy: "409",
|
|
10221
|
-
r: "7",
|
|
10222
|
-
fill: "white"
|
|
10223
|
-
})))))), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
|
|
10224
|
-
id: "clip0_428_1188"
|
|
10225
|
-
}, /*#__PURE__*/React__default.createElement("rect", {
|
|
10226
|
-
width: "840",
|
|
10227
|
-
height: "740",
|
|
10228
|
-
fill: "white"
|
|
10229
|
-
}))));
|
|
10230
|
-
}
|
|
10231
|
-
var HeadGuideSvg = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
10232
|
-
var _b = _a.borderColor,
|
|
10233
|
-
borderColor = _b === void 0 ? 'white' : _b,
|
|
10234
|
-
_c = _a.borderOpacity,
|
|
10235
|
-
borderOpacity = _c === void 0 ? 0.8 : _c,
|
|
10236
|
-
_d = _a.borderWidth,
|
|
10237
|
-
borderWidth = _d === void 0 ? 5 : _d,
|
|
10238
|
-
_e = _a.status,
|
|
10239
|
-
status = _e === void 0 ? 'ready' : _e,
|
|
10240
|
-
props = __rest(_a, ["borderColor", "borderOpacity", "borderWidth", "status"]);
|
|
10241
|
-
return /*#__PURE__*/React__default.createElement("svg", _assign({}, props, {
|
|
10242
|
-
ref: ref,
|
|
10243
|
-
viewBox: "271 92 297 406",
|
|
10244
|
-
fill: "none",
|
|
10245
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
10246
|
-
}), /*#__PURE__*/React__default.createElement("g", {
|
|
10247
|
-
clipPath: "url(#clip0_428_1188)"
|
|
10248
|
-
}, /*#__PURE__*/React__default.createElement("path", {
|
|
10249
|
-
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",
|
|
10250
|
-
stroke: borderColor,
|
|
10251
|
-
strokeOpacity: borderOpacity,
|
|
10252
|
-
strokeWidth: borderWidth
|
|
10253
|
-
}), status === 'success' && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("circle", {
|
|
10254
|
-
cx: "518.5",
|
|
10255
|
-
cy: "438.5",
|
|
10256
|
-
r: "25.5",
|
|
10257
|
-
fill: borderColor
|
|
10258
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10259
|
-
d: "M504 440.5L512 448L531 427",
|
|
10260
|
-
stroke: "white",
|
|
10261
|
-
strokeWidth: "5",
|
|
10262
|
-
strokeLinecap: "round",
|
|
10263
|
-
strokeLinejoin: "round"
|
|
10264
|
-
}))), status === 'failure' && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("circle", {
|
|
10265
|
-
cx: "518.5",
|
|
10266
|
-
cy: "438.5",
|
|
10267
|
-
r: "25.5",
|
|
10268
|
-
fill: borderColor
|
|
10269
|
-
}), /*#__PURE__*/React__default.createElement("image", {
|
|
10270
|
-
href: "https://websdk-cdn-dev.idmission.com/assets/x.svg",
|
|
10271
|
-
x: "507",
|
|
10272
|
-
y: "427",
|
|
10273
|
-
width: "24",
|
|
10274
|
-
height: "24"
|
|
10275
|
-
})))), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
|
|
10276
|
-
id: "clip0_428_1188"
|
|
10277
|
-
}, /*#__PURE__*/React__default.createElement("rect", {
|
|
10278
|
-
width: "840",
|
|
10279
|
-
height: "740",
|
|
10280
|
-
fill: "white"
|
|
10281
|
-
}))));
|
|
10282
|
-
});
|
|
10283
|
-
HeadGuideSvg.displayName = 'HeadGuideSvg';
|
|
10284
|
-
var PulsingHeadGuideContainer = styled.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"])));
|
|
10285
|
-
function HeadGuide(_a) {
|
|
10286
|
-
var _b;
|
|
10287
|
-
var _c = _a.status,
|
|
10288
|
-
status = _c === void 0 ? 'ready' : _c,
|
|
10289
|
-
props = __rest(_a, ["status"]);
|
|
10290
|
-
var ref = useRef(null);
|
|
10291
|
-
var parentRef = useRef(null);
|
|
10292
|
-
var _d = useState(undefined),
|
|
10293
|
-
refBox = _d[0],
|
|
10294
|
-
setRefBox = _d[1];
|
|
10295
|
-
useLayoutEffect(function () {
|
|
10296
|
-
if (!ref.current || !parentRef.current) return;
|
|
10297
|
-
var box = ref.current.getBoundingClientRect();
|
|
10298
|
-
var parentBox = parentRef.current.getBoundingClientRect();
|
|
10299
|
-
setRefBox(_assign(_assign({}, box), {
|
|
10300
|
-
top: box.top - parentBox.top,
|
|
10301
|
-
left: box.left - parentBox.left
|
|
10302
|
-
}));
|
|
10303
|
-
}, []);
|
|
10304
|
-
return /*#__PURE__*/React__default.createElement(PulsingHeadGuideContainer, {
|
|
10305
|
-
ref: parentRef
|
|
10306
|
-
}, status === 'ready' && refBox && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10307
|
-
className: "pulse",
|
|
10308
|
-
borderOpacity: 0.25,
|
|
10309
|
-
borderColor: "#287ec6",
|
|
10310
|
-
style: refBox
|
|
10311
|
-
})), /*#__PURE__*/React__default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10312
|
-
className: "pulse",
|
|
10313
|
-
borderOpacity: 0.25,
|
|
10314
|
-
borderColor: "#287ec6",
|
|
10315
|
-
style: refBox
|
|
10316
|
-
})), /*#__PURE__*/React__default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10317
|
-
className: "pulse",
|
|
10318
|
-
borderOpacity: 0.25,
|
|
10319
|
-
borderColor: "#287ec6",
|
|
10320
|
-
style: refBox
|
|
10321
|
-
})))), /*#__PURE__*/React__default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10322
|
-
ref: ref,
|
|
10323
|
-
borderOpacity: 1,
|
|
10324
|
-
className: "pulseOrigin ".concat((_b = props.className) !== null && _b !== void 0 ? _b : ''),
|
|
10325
|
-
status: status
|
|
10326
|
-
})));
|
|
10327
|
-
}
|
|
10328
|
-
var RelativeSvg = styled.svg(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
10329
|
-
var RelativeSvgContainer = styled.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) {
|
|
10330
|
-
return props.$verticalAlign;
|
|
10331
|
-
});
|
|
10332
|
-
function SelfieCaptureAnimatedMask(_a) {
|
|
10333
|
-
var _b, _c, _d, _e, _f, _g, _h;
|
|
10334
|
-
var _j = _a.frame,
|
|
10335
|
-
frame = _j === void 0 ? 0 : _j,
|
|
10336
|
-
_k = _a.borderWidth,
|
|
10337
|
-
borderWidth = _k === void 0 ? 5 : _k,
|
|
10338
|
-
_l = _a.borderColor,
|
|
10339
|
-
borderColor = _l === void 0 ? 'white' : _l,
|
|
10340
|
-
_m = _a.borderOpacity,
|
|
10341
|
-
borderOpacity = _m === void 0 ? 0.8 : _m,
|
|
10342
|
-
_o = _a.verticalAlign,
|
|
10343
|
-
verticalAlign = _o === void 0 ? 'center' : _o,
|
|
10344
|
-
_p = _a.status,
|
|
10345
|
-
status = _p === void 0 ? 'ready' : _p,
|
|
10346
|
-
props = __rest(_a, ["frame", "borderWidth", "borderColor", "borderOpacity", "verticalAlign", "status"]);
|
|
10347
|
-
var ref = useRef(null);
|
|
10348
|
-
var theme = useTheme();
|
|
10349
|
-
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)';
|
|
10350
|
-
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)';
|
|
10351
|
-
var statusBorderColor = status === 'failure' ? negativeColor : status === 'success' ? satisfiedColor : borderColor;
|
|
10352
|
-
return /*#__PURE__*/React__default.createElement(RelativeSvgContainer, {
|
|
10353
|
-
"$verticalAlign": verticalAlign
|
|
10354
|
-
}, /*#__PURE__*/React__default.createElement(HeadGuide, _assign({
|
|
10355
|
-
ref: ref,
|
|
10356
|
-
borderOpacity: borderOpacity,
|
|
10357
|
-
borderWidth: borderWidth,
|
|
10358
|
-
borderColor: statusBorderColor,
|
|
10359
|
-
status: status
|
|
10360
|
-
}, props)), /*#__PURE__*/React__default.createElement(RelativeSvg, _assign({}, props, {
|
|
10361
|
-
viewBox: "271 92 297 406",
|
|
10362
|
-
fill: "none",
|
|
10363
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
10364
|
-
style: _assign(_assign({}, props.style), (_h = ref.current) === null || _h === void 0 ? void 0 : _h.getBoundingClientRect())
|
|
10365
|
-
}), status === 'processing' && ( /*#__PURE__*/React__default.createElement("g", {
|
|
10366
|
-
clipPath: "url(#clip0_428_1188)"
|
|
10367
|
-
}, frame > 1 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, frame > 2 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, frame > 3 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, frame > 4 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("path", {
|
|
10368
|
-
d: "M298.5 182.5L419 164.5L540 182",
|
|
10369
|
-
stroke: "white",
|
|
10370
|
-
strokeWidth: "2",
|
|
10371
|
-
strokeLinecap: "round",
|
|
10372
|
-
strokeLinejoin: "round"
|
|
10373
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10374
|
-
cx: "419",
|
|
10375
|
-
cy: "165",
|
|
10376
|
-
r: "7",
|
|
10377
|
-
fill: "white"
|
|
10378
|
-
}))), /*#__PURE__*/React__default.createElement("path", {
|
|
10379
|
-
d: "M299.939 262.805L419 478.5L538.5 261.5",
|
|
10380
|
-
stroke: "white",
|
|
10381
|
-
strokeWidth: "2",
|
|
10382
|
-
strokeLinecap: "round",
|
|
10383
|
-
strokeLinejoin: "round"
|
|
10384
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10385
|
-
d: "M298.5 182.5L418.871 230.054L540 182",
|
|
10386
|
-
stroke: "white",
|
|
10387
|
-
strokeWidth: "2",
|
|
10388
|
-
strokeLinecap: "round",
|
|
10389
|
-
strokeLinejoin: "round"
|
|
10390
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10391
|
-
d: "M298.5 182.5L299.939 262.805",
|
|
10392
|
-
stroke: "white",
|
|
10393
|
-
strokeWidth: "2",
|
|
10394
|
-
strokeLinecap: "round",
|
|
10395
|
-
strokeLinejoin: "round"
|
|
10396
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10397
|
-
d: "M540.001 182L538.501 261.5",
|
|
10398
|
-
stroke: "white",
|
|
10399
|
-
strokeWidth: "2",
|
|
10400
|
-
strokeLinecap: "round",
|
|
10401
|
-
strokeLinejoin: "round"
|
|
10402
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10403
|
-
cx: "299.914",
|
|
10404
|
-
cy: "182",
|
|
10405
|
-
r: "7",
|
|
10406
|
-
fill: "white"
|
|
10407
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10408
|
-
cx: "540",
|
|
10409
|
-
cy: "182",
|
|
10410
|
-
r: "7",
|
|
10411
|
-
fill: "white"
|
|
10412
|
-
}))), /*#__PURE__*/React__default.createElement("path", {
|
|
10413
|
-
d: "M418.828 230L419 342.5",
|
|
10414
|
-
stroke: "white",
|
|
10415
|
-
strokeWidth: "2",
|
|
10416
|
-
strokeLinecap: "round",
|
|
10417
|
-
strokeLinejoin: "round",
|
|
10418
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10419
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10420
|
-
d: "M300 263.001L419 342.501",
|
|
10421
|
-
stroke: "white",
|
|
10422
|
-
strokeWidth: "2",
|
|
10423
|
-
strokeLinecap: "round",
|
|
10424
|
-
strokeLinejoin: "round",
|
|
10425
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10426
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10427
|
-
d: "M538.5 261.5L419 342.5",
|
|
10428
|
-
stroke: "white",
|
|
10429
|
-
strokeWidth: "2",
|
|
10430
|
-
strokeLinecap: "round",
|
|
10431
|
-
strokeLinejoin: "round",
|
|
10432
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10433
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10434
|
-
d: "M301.5 409L419 342.5",
|
|
10435
|
-
stroke: "white",
|
|
10436
|
-
strokeWidth: "2",
|
|
10437
|
-
strokeLinecap: "round",
|
|
10438
|
-
strokeLinejoin: "round",
|
|
10439
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10440
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10441
|
-
d: "M536.5 410L419 342.5",
|
|
10442
|
-
stroke: "white",
|
|
10443
|
-
strokeWidth: "2",
|
|
10444
|
-
strokeLinecap: "round",
|
|
10445
|
-
strokeLinejoin: "round",
|
|
10446
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10447
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10448
|
-
d: "M300 263L419 230",
|
|
10449
|
-
stroke: "white",
|
|
10450
|
-
strokeWidth: "2",
|
|
10451
|
-
strokeLinecap: "round",
|
|
10452
|
-
strokeLinejoin: "round",
|
|
10453
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10454
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10455
|
-
d: "M538.5 261.5L419 230",
|
|
10456
|
-
stroke: "white",
|
|
10457
|
-
strokeWidth: "2",
|
|
10458
|
-
strokeLinecap: "round",
|
|
10459
|
-
strokeLinejoin: "round",
|
|
10460
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10461
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10462
|
-
cx: "419",
|
|
10463
|
-
cy: "229.971",
|
|
10464
|
-
r: "7",
|
|
10465
|
-
fill: "white"
|
|
10466
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10467
|
-
cx: "419",
|
|
10468
|
-
cy: "342.4",
|
|
10469
|
-
r: "7",
|
|
10470
|
-
fill: "white"
|
|
10471
|
-
}))), /*#__PURE__*/React__default.createElement("path", {
|
|
10472
|
-
d: "M538.5 261.5L536.5 410",
|
|
10473
|
-
stroke: "white",
|
|
10474
|
-
strokeWidth: "2",
|
|
10475
|
-
strokeLinecap: "round",
|
|
10476
|
-
strokeLinejoin: "round",
|
|
10477
|
-
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
10478
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10479
|
-
d: "M419 478.5L536.5 410",
|
|
10480
|
-
stroke: "white",
|
|
10481
|
-
strokeWidth: "2",
|
|
10482
|
-
strokeLinecap: "round",
|
|
10483
|
-
strokeLinejoin: "round",
|
|
10484
|
-
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
10485
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10486
|
-
cx: "537",
|
|
10487
|
-
cy: "263",
|
|
10488
|
-
r: "7",
|
|
10489
|
-
fill: "white"
|
|
10490
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10491
|
-
cx: "537",
|
|
10492
|
-
cy: "409",
|
|
10493
|
-
r: "7",
|
|
10494
|
-
fill: "white"
|
|
10495
|
-
}))), frame > 0 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("path", {
|
|
10496
|
-
d: "M301.501 409L300.001 263",
|
|
10497
|
-
stroke: "white",
|
|
10498
|
-
strokeWidth: "2",
|
|
10499
|
-
strokeLinecap: "round",
|
|
10500
|
-
strokeLinejoin: "round",
|
|
10501
|
-
strokeOpacity: frame > 1 && frame < 6 ? 0.3 : 1
|
|
10502
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
10503
|
-
d: "M301.501 409L419.001 478.5",
|
|
10504
|
-
stroke: "white",
|
|
10505
|
-
strokeWidth: "2",
|
|
10506
|
-
strokeLinecap: "round",
|
|
10507
|
-
strokeLinejoin: "round",
|
|
10508
|
-
strokeOpacity: frame > 1 && frame < 6 ? 0.3 : 1
|
|
10509
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10510
|
-
cx: "419",
|
|
10511
|
-
cy: "477.576",
|
|
10512
|
-
r: "7",
|
|
10513
|
-
fill: "white"
|
|
10514
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10515
|
-
cx: "301.914",
|
|
10516
|
-
cy: "263",
|
|
10517
|
-
r: "7",
|
|
10518
|
-
fill: "white"
|
|
10519
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
10520
|
-
cx: "301.444",
|
|
10521
|
-
cy: "409",
|
|
10522
|
-
r: "7",
|
|
10523
|
-
fill: "white"
|
|
10524
|
-
}))))), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
|
|
10525
|
-
id: "clip0_428_1188"
|
|
10526
|
-
}, /*#__PURE__*/React__default.createElement("rect", {
|
|
10527
|
-
width: "840",
|
|
10528
|
-
height: "740",
|
|
10529
|
-
fill: "white"
|
|
10530
|
-
})))));
|
|
10531
|
-
}
|
|
10532
|
-
function SelfieCaptureAnimatedMaskWithStatus(_a) {
|
|
10533
|
-
var _b = _a.status,
|
|
10534
|
-
status = _b === void 0 ? 'ready' : _b,
|
|
10535
|
-
props = __rest(_a, ["status"]);
|
|
10536
|
-
var _c = useState(1),
|
|
10537
|
-
frame = _c[0],
|
|
10538
|
-
setFrame = _c[1];
|
|
10539
|
-
useEffect(function () {
|
|
10540
|
-
if (status !== 'processing') {
|
|
10541
|
-
setFrame(0);
|
|
10542
|
-
return;
|
|
10543
|
-
}
|
|
10544
|
-
setFrame(1);
|
|
10545
|
-
var interval = setInterval(function () {
|
|
10546
|
-
setFrame(function (n) {
|
|
10547
|
-
return (n + 1) % 6;
|
|
10548
|
-
});
|
|
10549
|
-
}, 250);
|
|
10550
|
-
return function () {
|
|
10551
|
-
clearInterval(interval);
|
|
10552
|
-
};
|
|
10553
|
-
}, [status]);
|
|
10554
|
-
return /*#__PURE__*/React__default.createElement(SelfieCaptureAnimatedMask, _assign({}, props, {
|
|
10555
|
-
frame: frame,
|
|
10556
|
-
status: status
|
|
10557
|
-
}));
|
|
10558
|
-
}
|
|
10559
|
-
var templateObject_1$m, templateObject_2$h, templateObject_3$f;
|
|
10560
|
-
|
|
10561
|
-
var FaceCaptureGuideContainer = styled.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"
|
|
10562
|
-
// const FaceCaptureGuideOval = styled.div<{
|
|
10563
|
-
// $variant: FaceCaptureGuideOverlayVariant
|
|
10564
|
-
// $borderWidth: number
|
|
10565
|
-
// $borderColor?: string
|
|
10566
|
-
// }>`
|
|
10567
|
-
// border-width: ${(props) => props.$borderWidth}px;
|
|
10568
|
-
// border-color: ${(props) =>
|
|
10569
|
-
// props.$borderColor ??
|
|
10570
|
-
// props.theme.selfieCapture?.guides?.[`${props.$variant}Color`] ??
|
|
10571
|
-
// 'white'};
|
|
10572
|
-
// border-style: solid;
|
|
10573
|
-
// border-radius: 50%;
|
|
10574
|
-
// aspect-ratio: 1 / 1.618;
|
|
10575
|
-
// height: 50%;
|
|
10576
|
-
// margin: auto;
|
|
10577
|
-
// `
|
|
10578
|
-
])));
|
|
10579
|
-
// const FaceCaptureGuideOval = styled.div<{
|
|
10580
|
-
// $variant: FaceCaptureGuideOverlayVariant
|
|
10581
|
-
// $borderWidth: number
|
|
10582
|
-
// $borderColor?: string
|
|
10583
|
-
// }>`
|
|
10584
|
-
// border-width: ${(props) => props.$borderWidth}px;
|
|
10585
|
-
// border-color: ${(props) =>
|
|
10586
|
-
// props.$borderColor ??
|
|
10587
|
-
// props.theme.selfieCapture?.guides?.[`${props.$variant}Color`] ??
|
|
10588
|
-
// 'white'};
|
|
10589
|
-
// border-style: solid;
|
|
10590
|
-
// border-radius: 50%;
|
|
10591
|
-
// aspect-ratio: 1 / 1.618;
|
|
10592
|
-
// height: 50%;
|
|
10593
|
-
// margin: auto;
|
|
10594
|
-
// `
|
|
10595
|
-
var StyledSelfieCaptureAnimatedMask$1 = styled(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"])));
|
|
10596
|
-
var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
|
|
10597
|
-
var _b = _a.classNames,
|
|
10598
|
-
classNames = _b === void 0 ? {} : _b,
|
|
10599
|
-
_c = _a.status,
|
|
10600
|
-
status = _c === void 0 ? 'ready' : _c,
|
|
10601
|
-
_d = _a.borderWidth,
|
|
10602
|
-
borderWidth = _d === void 0 ? 5 : _d,
|
|
10603
|
-
_e = _a.borderColor,
|
|
10604
|
-
borderColor = _e === void 0 ? 'white' : _e,
|
|
10605
|
-
_f = _a.borderOpacity,
|
|
10606
|
-
borderOpacity = _f === void 0 ? 0.8 : _f;
|
|
10607
|
-
return /*#__PURE__*/React__default.createElement(FaceCaptureGuideContainer, {
|
|
10608
|
-
className: classNames.container
|
|
10609
|
-
}, /*#__PURE__*/React__default.createElement(StyledSelfieCaptureAnimatedMask$1, {
|
|
10610
|
-
status: status,
|
|
10611
|
-
borderColor: borderColor,
|
|
10612
|
-
borderWidth: borderWidth,
|
|
10613
|
-
borderOpacity: borderOpacity,
|
|
10614
|
-
verticalAlign: "center"
|
|
10615
|
-
}));
|
|
10616
|
-
};
|
|
10617
|
-
var templateObject_1$l, templateObject_2$g;
|
|
10618
|
-
|
|
10619
|
-
var SelfieGuidanceModelsContext = /*#__PURE__*/createContext({
|
|
10620
|
-
start: function start() {
|
|
10621
|
-
return null;
|
|
10622
|
-
},
|
|
10623
|
-
stop: function stop() {
|
|
10624
|
-
return null;
|
|
10625
|
-
},
|
|
10626
|
-
onPredictionMade: function onPredictionMade() {
|
|
10627
|
-
return null;
|
|
10628
|
-
},
|
|
10629
|
-
canvasRef: {
|
|
10630
|
-
current: null
|
|
10631
|
-
},
|
|
10632
|
-
ready: false,
|
|
10633
|
-
error: null,
|
|
10634
|
-
modelDownloadProgress: 0
|
|
10635
|
-
});
|
|
10636
|
-
function SelfieGuidanceModelsProvider(_a) {
|
|
10637
|
-
var _this = this;
|
|
10638
|
-
var _b = _a.autoStart,
|
|
10639
|
-
autoStart = _b === void 0 ? true : _b,
|
|
10640
|
-
children = _a.children,
|
|
10641
|
-
throttleMs = _a.throttleMs,
|
|
10642
|
-
onModelError = _a.onModelError,
|
|
10643
|
-
_c = _a.modelLoadTimeoutMs,
|
|
10644
|
-
modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c;
|
|
10645
|
-
var _d = useContext(CameraStateContext),
|
|
10646
|
-
videoRef = _d.videoRef,
|
|
10647
|
-
videoLoaded = _d.videoLoaded,
|
|
10648
|
-
cameraReady = _d.cameraReady;
|
|
10649
|
-
var canvasRef = useRef(null);
|
|
10650
|
-
var onPredictionHandler = useRef();
|
|
10651
|
-
var _e = useLoadFaceDetector({
|
|
10652
|
-
onModelError: onModelError,
|
|
10653
|
-
modelLoadTimeoutMs: modelLoadTimeoutMs
|
|
10654
|
-
}),
|
|
10655
|
-
detector = _e.detector,
|
|
10656
|
-
ready = _e.ready,
|
|
10657
|
-
modelDownloadProgress = _e.modelDownloadProgress,
|
|
10658
|
-
modelError = _e.modelError;
|
|
10659
|
-
var _f = useFrameLoop(useCallback(function () {
|
|
10660
|
-
return __awaiter(_this, void 0, void 0, function () {
|
|
10661
|
-
var vw, vh, ctx, faces, e_1;
|
|
10662
|
-
var _a;
|
|
10663
|
-
return __generator(this, function (_b) {
|
|
10664
|
-
switch (_b.label) {
|
|
10665
|
-
case 0:
|
|
10666
|
-
if (!videoLoaded || !cameraReady || !ready || modelError || !videoRef.current || !detector.current || !canvasRef.current) return [2 /*return*/];
|
|
10667
|
-
vw = videoRef.current.videoWidth;
|
|
10668
|
-
vh = videoRef.current.videoHeight;
|
|
10669
|
-
ctx = canvasRef.current.getContext('2d');
|
|
10670
|
-
canvasRef.current.width = vw;
|
|
10671
|
-
canvasRef.current.height = vh;
|
|
10672
|
-
if (!(ctx && videoRef.current.readyState === 4)) return [3 /*break*/, 4];
|
|
10673
|
-
ctx.translate(vw, 0);
|
|
10674
|
-
ctx.scale(-1, 1);
|
|
10675
|
-
ctx.drawImage(videoRef.current, 0, 0, vw, vh);
|
|
10676
|
-
_b.label = 1;
|
|
10677
|
-
case 1:
|
|
10678
|
-
_b.trys.push([1, 3,, 4]);
|
|
10679
|
-
faces = makeFaceDetectorPrediction(detector.current, canvasRef.current).faces;
|
|
10680
|
-
return [4 /*yield*/, (_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, faces)];
|
|
10681
|
-
case 2:
|
|
10682
|
-
_b.sent();
|
|
10683
|
-
return [3 /*break*/, 4];
|
|
10684
|
-
case 3:
|
|
10685
|
-
e_1 = _b.sent();
|
|
10686
|
-
error('caught face detection error', e_1);
|
|
10687
|
-
return [3 /*break*/, 4];
|
|
10688
|
-
case 4:
|
|
10689
|
-
return [2 /*return*/];
|
|
10690
|
-
}
|
|
10691
|
-
});
|
|
10692
|
-
});
|
|
10693
|
-
}, [cameraReady, detector, modelError, ready, videoLoaded, videoRef]), {
|
|
10694
|
-
throttleMs: throttleMs,
|
|
10695
|
-
autoStart: autoStart
|
|
10696
|
-
}),
|
|
10697
|
-
start = _f.start,
|
|
10698
|
-
stop = _f.stop;
|
|
10699
|
-
var onPredictionMade = useCallback(function (handler) {
|
|
10700
|
-
onPredictionHandler.current = handler;
|
|
10701
|
-
}, []);
|
|
10702
|
-
var value = useMemo(function () {
|
|
10703
|
-
return {
|
|
10704
|
-
start: start,
|
|
10705
|
-
stop: stop,
|
|
10706
|
-
ready: ready,
|
|
10707
|
-
canvasRef: canvasRef,
|
|
10708
|
-
onPredictionMade: onPredictionMade,
|
|
10709
|
-
error: modelError,
|
|
10710
|
-
modelDownloadProgress: modelDownloadProgress
|
|
10711
|
-
};
|
|
10712
|
-
}, [modelError, modelDownloadProgress, onPredictionMade, ready, start, stop]);
|
|
10713
|
-
return /*#__PURE__*/React.createElement(SelfieGuidanceModelsContext.Provider, {
|
|
10714
|
-
value: value
|
|
10715
|
-
}, /*#__PURE__*/React.createElement(InvisibleCanvas, {
|
|
10716
|
-
ref: canvasRef
|
|
10717
|
-
}), children);
|
|
10718
|
-
}
|
|
10719
|
-
|
|
10720
|
-
var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger, shouldStart) {
|
|
10721
|
-
if (shouldStart === void 0) {
|
|
10722
|
-
shouldStart = true;
|
|
10723
|
-
}
|
|
10724
|
-
var _a = useState(false),
|
|
10725
|
-
timedOut = _a[0],
|
|
10726
|
-
setTimedOut = _a[1];
|
|
10727
|
-
var _b = useState(),
|
|
10728
|
-
timeoutStartedAt = _b[0],
|
|
10729
|
-
setTimeoutStartedAt = _b[1];
|
|
10730
|
-
useEffect(function () {
|
|
10731
|
-
if (!durationMs || !shouldStart) return;
|
|
10732
|
-
setTimeoutStartedAt(new Date());
|
|
10733
|
-
var timer = setTimeout(function () {
|
|
10734
|
-
setTimedOut(true);
|
|
10735
|
-
}, durationMs);
|
|
10736
|
-
return function () {
|
|
10737
|
-
if (timer) clearTimeout(timer);
|
|
10129
|
+
if (timer) clearTimeout(timer);
|
|
10738
10130
|
};
|
|
10739
10131
|
}, [durationMs, shouldStart]);
|
|
10740
10132
|
useEffect(function () {
|
|
@@ -10861,11 +10253,11 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
|
|
|
10861
10253
|
className: classNames.container
|
|
10862
10254
|
}, /*#__PURE__*/React__default.createElement(StyledOverlayInner$1, {
|
|
10863
10255
|
className: classNames.inner
|
|
10864
|
-
}, silentFallback ? invalidSelfie && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Heading$
|
|
10256
|
+
}, silentFallback ? invalidSelfie && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Heading$6, {
|
|
10865
10257
|
className: classNames.heading
|
|
10866
10258
|
}, verbiage.livenessFailedText), /*#__PURE__*/React__default.createElement(Description$2, {
|
|
10867
10259
|
className: classNames.description
|
|
10868
|
-
}, verbiage.livenessFailedReasonText || verbiage.descriptionText))) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Heading$
|
|
10260
|
+
}, verbiage.livenessFailedReasonText || verbiage.descriptionText))) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Heading$6, {
|
|
10869
10261
|
className: classNames.heading
|
|
10870
10262
|
}, invalidSelfie ? verbiage.livenessFailedText : verbiage.headingText), /*#__PURE__*/React__default.createElement(Description$2, {
|
|
10871
10263
|
className: classNames.description
|
|
@@ -10910,21 +10302,18 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
|
|
|
10910
10302
|
}
|
|
10911
10303
|
}, !image ? invalidSelfie ? verbiage.retryButtonText : verbiage.captureBtnText : loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText)))));
|
|
10912
10304
|
};
|
|
10913
|
-
var StyledOverlayInner$1 = styled(OverlayInner$2)(templateObject_1$
|
|
10914
|
-
var Heading$
|
|
10915
|
-
var Description$2 = styled.p(templateObject_3$
|
|
10916
|
-
var ImageContainer$5 = styled(OverlayImageContainer)(templateObject_4$
|
|
10917
|
-
var StyledButtonsRow$7 = styled(ButtonsRow
|
|
10918
|
-
var templateObject_1$
|
|
10305
|
+
var StyledOverlayInner$1 = styled(OverlayInner$2)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
10306
|
+
var Heading$6 = styled.h3(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
10307
|
+
var Description$2 = styled.p(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
10308
|
+
var ImageContainer$5 = styled(OverlayImageContainer)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
10309
|
+
var StyledButtonsRow$7 = styled(ButtonsRow)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
10310
|
+
var templateObject_1$j, templateObject_2$d, templateObject_3$c, templateObject_4$7, templateObject_5$3;
|
|
10919
10311
|
|
|
10920
10312
|
var initialState$3 = {
|
|
10921
10313
|
videoWidth: 0,
|
|
10922
10314
|
videoHeight: 0,
|
|
10923
|
-
requireVerticalFaceCentering: true,
|
|
10924
|
-
busy: false,
|
|
10925
10315
|
frame: null,
|
|
10926
10316
|
faces: [],
|
|
10927
|
-
faceNotDetected: false,
|
|
10928
10317
|
faceNotCentered: false,
|
|
10929
10318
|
faceLookingAway: false,
|
|
10930
10319
|
faceTooClose: false,
|
|
@@ -10938,11 +10327,9 @@ var reducer$3 = function reducer(state, action) {
|
|
|
10938
10327
|
return _assign(_assign({}, state), action.payload);
|
|
10939
10328
|
case 'facesDetected':
|
|
10940
10329
|
{
|
|
10941
|
-
if (state.busy) return state;
|
|
10942
10330
|
var faces = action.payload.faces;
|
|
10943
10331
|
var face = faces[0];
|
|
10944
|
-
var
|
|
10945
|
-
var faceNotCentered = state.requireVerticalFaceCentering,
|
|
10332
|
+
var faceNotCentered = true,
|
|
10946
10333
|
faceLookingAway = false,
|
|
10947
10334
|
faceTooClose = false,
|
|
10948
10335
|
faceTooFar = false,
|
|
@@ -10960,10 +10347,8 @@ var reducer$3 = function reducer(state, action) {
|
|
|
10960
10347
|
var fTH = face.box.height * 0.2;
|
|
10961
10348
|
var nose = face.keypoints[2]; //.find((k) => k.name === 'noseTip')
|
|
10962
10349
|
if (nose) {
|
|
10350
|
+
faceNotCentered = Math.abs(vCX - fCX) > vTX || Math.abs(vCY + 50 - fCY) > vTY;
|
|
10963
10351
|
faceLookingAway = Math.abs(fCX - nose.x) > fTW || Math.abs(fCY - nose.y) > fTH;
|
|
10964
|
-
var faceNotCenteredHorizontally = Math.abs(vCX - fCX) > vTX;
|
|
10965
|
-
var faceNotCenteredVertically = Math.abs(vCY + 50 - fCY) > vTY;
|
|
10966
|
-
faceNotCentered = faceNotCenteredHorizontally || state.requireVerticalFaceCentering && faceNotCenteredVertically;
|
|
10967
10352
|
}
|
|
10968
10353
|
var isMobile = state.videoWidth < state.videoHeight;
|
|
10969
10354
|
var tooCloseMultiple = isMobile ? 2 : 4.5;
|
|
@@ -10971,7 +10356,7 @@ var reducer$3 = function reducer(state, action) {
|
|
|
10971
10356
|
faceTooClose = face.box.width > state.videoWidth / tooCloseMultiple;
|
|
10972
10357
|
faceTooFar = face.box.width < state.videoWidth / tooFarMultiple;
|
|
10973
10358
|
}
|
|
10974
|
-
var faceReady = !
|
|
10359
|
+
var faceReady = !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
|
|
10975
10360
|
if (!faceReady) {
|
|
10976
10361
|
faceReadyAt = null;
|
|
10977
10362
|
} else if (!state.faceReady) {
|
|
@@ -10979,31 +10364,20 @@ var reducer$3 = function reducer(state, action) {
|
|
|
10979
10364
|
}
|
|
10980
10365
|
return _assign(_assign({}, state), {
|
|
10981
10366
|
faces: faces,
|
|
10982
|
-
faceNotDetected: faceNotDetected,
|
|
10983
10367
|
faceNotCentered: faceNotCentered,
|
|
10984
10368
|
faceLookingAway: faceLookingAway,
|
|
10985
10369
|
faceTooClose: faceTooClose,
|
|
10986
10370
|
faceTooFar: faceTooFar,
|
|
10987
10371
|
faceReady: faceReady,
|
|
10988
|
-
faceReadyAt: faceReadyAt
|
|
10989
|
-
busy: faceReady
|
|
10372
|
+
faceReadyAt: faceReadyAt
|
|
10990
10373
|
});
|
|
10991
10374
|
}
|
|
10992
|
-
case 'captureStarted':
|
|
10993
|
-
return _assign(_assign({}, state), {
|
|
10994
|
-
busy: true
|
|
10995
|
-
});
|
|
10996
|
-
case 'captureCompleted':
|
|
10997
|
-
return _assign(_assign({}, state), {
|
|
10998
|
-
busy: false
|
|
10999
|
-
});
|
|
11000
10375
|
}
|
|
11001
10376
|
};
|
|
11002
10377
|
var SelfieCapture = function SelfieCapture(_a) {
|
|
11003
10378
|
var _b;
|
|
11004
10379
|
var onGuidanceSatisfied = _a.onGuidanceSatisfied,
|
|
11005
10380
|
onGuidanceNotSatisfied = _a.onGuidanceNotSatisfied,
|
|
11006
|
-
onSelfieCaptureStarted = _a.onSelfieCaptureStarted,
|
|
11007
10381
|
onSelfieCaptured = _a.onSelfieCaptured,
|
|
11008
10382
|
onTimeout = _a.onTimeout,
|
|
11009
10383
|
onExit = _a.onExit,
|
|
@@ -11011,91 +10385,80 @@ var SelfieCapture = function SelfieCapture(_a) {
|
|
|
11011
10385
|
timeoutDurationMs = _c === void 0 ? 15000 : _c,
|
|
11012
10386
|
guidanceMessage = _a.guidanceMessage,
|
|
11013
10387
|
guidanceSatisfied = _a.guidanceSatisfied,
|
|
11014
|
-
|
|
11015
|
-
|
|
11016
|
-
|
|
11017
|
-
|
|
11018
|
-
|
|
11019
|
-
|
|
11020
|
-
|
|
11021
|
-
|
|
11022
|
-
|
|
11023
|
-
|
|
11024
|
-
|
|
11025
|
-
|
|
11026
|
-
|
|
11027
|
-
|
|
11028
|
-
|
|
11029
|
-
|
|
11030
|
-
|
|
11031
|
-
_m = _k.height,
|
|
11032
|
-
height = _m === void 0 ? 1 : _m;
|
|
11033
|
-
var _o = useReducer(reducer$3, initialState$3),
|
|
11034
|
-
state = _o[0],
|
|
11035
|
-
dispatch = _o[1];
|
|
10388
|
+
_d = _a.classNames,
|
|
10389
|
+
classNames = _d === void 0 ? {} : _d,
|
|
10390
|
+
_e = _a.colors,
|
|
10391
|
+
colors = _e === void 0 ? {} : _e,
|
|
10392
|
+
_f = _a.verbiage,
|
|
10393
|
+
rawVerbiage = _f === void 0 ? {} : _f,
|
|
10394
|
+
_g = _a.debugMode,
|
|
10395
|
+
debugMode = _g === void 0 ? false : _g;
|
|
10396
|
+
var _h = useResizeObserver(),
|
|
10397
|
+
ref = _h.ref,
|
|
10398
|
+
_j = _h.width,
|
|
10399
|
+
width = _j === void 0 ? 1 : _j,
|
|
10400
|
+
_k = _h.height,
|
|
10401
|
+
height = _k === void 0 ? 1 : _k;
|
|
10402
|
+
var _l = useReducer(reducer$3, initialState$3),
|
|
10403
|
+
state = _l[0],
|
|
10404
|
+
dispatch = _l[1];
|
|
11036
10405
|
var lastPredictionCanvas = useRef(null);
|
|
11037
|
-
var
|
|
11038
|
-
cameraRef =
|
|
11039
|
-
cameraReady =
|
|
11040
|
-
videoRef =
|
|
11041
|
-
var
|
|
11042
|
-
onPredictionMade =
|
|
11043
|
-
|
|
11044
|
-
guidanceError = _q.error;
|
|
10406
|
+
var _m = useContext(CameraStateContext),
|
|
10407
|
+
cameraRef = _m.cameraRef,
|
|
10408
|
+
cameraReady = _m.cameraReady,
|
|
10409
|
+
videoRef = _m.videoRef;
|
|
10410
|
+
var _o = useContext(SelfieGuidanceModelsContext),
|
|
10411
|
+
onPredictionMade = _o.onPredictionMade,
|
|
10412
|
+
guidanceError = _o.error;
|
|
11045
10413
|
useEffect(function () {
|
|
11046
10414
|
if (cameraReady && videoRef.current && videoRef.current.videoWidth !== 0) {
|
|
11047
10415
|
dispatch({
|
|
11048
10416
|
type: 'configure',
|
|
11049
10417
|
payload: {
|
|
11050
10418
|
videoWidth: videoRef.current.videoWidth,
|
|
11051
|
-
videoHeight: videoRef.current.videoHeight
|
|
11052
|
-
requireVerticalFaceCentering: requireVerticalFaceCentering
|
|
10419
|
+
videoHeight: videoRef.current.videoHeight
|
|
11053
10420
|
}
|
|
11054
10421
|
});
|
|
11055
10422
|
}
|
|
11056
|
-
}, [cameraReady,
|
|
11057
|
-
onPredictionMade(useThrottledCallback(
|
|
11058
|
-
|
|
11059
|
-
|
|
11060
|
-
|
|
11061
|
-
|
|
11062
|
-
type: 'facesDetected',
|
|
11063
|
-
payload: {
|
|
11064
|
-
faces: prediction
|
|
11065
|
-
}
|
|
11066
|
-
});
|
|
10423
|
+
}, [cameraReady, videoRef]);
|
|
10424
|
+
onPredictionMade(useThrottledCallback(function (prediction) {
|
|
10425
|
+
dispatch({
|
|
10426
|
+
type: 'facesDetected',
|
|
10427
|
+
payload: {
|
|
10428
|
+
faces: prediction
|
|
11067
10429
|
}
|
|
11068
|
-
resolve();
|
|
11069
10430
|
});
|
|
11070
|
-
},
|
|
10431
|
+
}, 16));
|
|
10432
|
+
var _p = useState(false),
|
|
10433
|
+
captureReady = _p[0],
|
|
10434
|
+
setCaptureReady = _p[1];
|
|
11071
10435
|
useEffect(function () {
|
|
11072
|
-
|
|
10436
|
+
var timer;
|
|
10437
|
+
if (state.faceReady) {
|
|
10438
|
+
onGuidanceSatisfied === null || onGuidanceSatisfied === void 0 ? void 0 : onGuidanceSatisfied();
|
|
10439
|
+
timer = setTimeout(function () {
|
|
10440
|
+
setCaptureReady(true);
|
|
10441
|
+
}, 1000);
|
|
10442
|
+
} else {
|
|
10443
|
+
onGuidanceNotSatisfied === null || onGuidanceNotSatisfied === void 0 ? void 0 : onGuidanceNotSatisfied();
|
|
10444
|
+
}
|
|
10445
|
+
return function () {
|
|
10446
|
+
if (timer) clearTimeout(timer);
|
|
10447
|
+
};
|
|
11073
10448
|
}, [onGuidanceNotSatisfied, onGuidanceSatisfied, state.faceReady]);
|
|
11074
10449
|
useEffect(function () {
|
|
11075
|
-
if (
|
|
11076
|
-
|
|
11077
|
-
|
|
11078
|
-
type: 'captureStarted'
|
|
11079
|
-
});
|
|
11080
|
-
onSelfieCaptureStarted === null || onSelfieCaptureStarted === void 0 ? void 0 : onSelfieCaptureStarted();
|
|
11081
|
-
var frame = lastPredictionCanvas.current;
|
|
11082
|
-
if (!frame) return;
|
|
11083
|
-
var ctx = frame.getContext('2d');
|
|
10450
|
+
if (captureReady && videoRef.current && lastPredictionCanvas.current && state.faces.length > 0) {
|
|
10451
|
+
drawToCanvas(lastPredictionCanvas.current, videoRef.current);
|
|
10452
|
+
var ctx = lastPredictionCanvas.current.getContext('2d');
|
|
11084
10453
|
if (!ctx) return;
|
|
11085
|
-
var imageData = ctx.getImageData(0, 0,
|
|
10454
|
+
var imageData = ctx.getImageData(0, 0, videoRef.current.videoWidth, videoRef.current.videoHeight);
|
|
11086
10455
|
onSelfieCaptured === null || onSelfieCaptured === void 0 ? void 0 : onSelfieCaptured(imageData, state.faces[0]);
|
|
11087
|
-
clearCanvas(
|
|
11088
|
-
|
|
11089
|
-
|
|
11090
|
-
|
|
11091
|
-
|
|
11092
|
-
|
|
11093
|
-
if (timer) clearTimeout(timer);
|
|
11094
|
-
};
|
|
11095
|
-
}, [onSelfieCaptureStarted, onSelfieCaptured, state.faceReady, state.faces]);
|
|
11096
|
-
var _r = useTimeout(timeoutDurationMs, onTimeout),
|
|
11097
|
-
timedOut = _r.timedOut,
|
|
11098
|
-
timeoutStartedAt = _r.timeoutStartedAt;
|
|
10456
|
+
clearCanvas(lastPredictionCanvas.current);
|
|
10457
|
+
}
|
|
10458
|
+
}, [captureReady, onSelfieCaptured, state.faces, videoRef]);
|
|
10459
|
+
var _q = useTimeout(timeoutDurationMs, onTimeout),
|
|
10460
|
+
timedOut = _q.timedOut,
|
|
10461
|
+
timeoutStartedAt = _q.timeoutStartedAt;
|
|
11099
10462
|
var debugScalingDetails = useDebugScalingDetails({
|
|
11100
10463
|
enabled: debugMode,
|
|
11101
10464
|
pageWidth: width,
|
|
@@ -11110,26 +10473,24 @@ var SelfieCapture = function SelfieCapture(_a) {
|
|
|
11110
10473
|
guidanceLookStraightText: 'Look straight into the camera...',
|
|
11111
10474
|
guidanceMoveBackText: 'Move back...',
|
|
11112
10475
|
guidanceMoveForwardText: 'Move forward...',
|
|
11113
|
-
guidanceMoveToCenterText: 'Move to the center...'
|
|
11114
|
-
guidanceNoFaceDetectedText: 'Waiting for face to be detected...'
|
|
10476
|
+
guidanceMoveToCenterText: 'Move to the center...'
|
|
11115
10477
|
});
|
|
11116
10478
|
var satisfied = state.faceReady;
|
|
11117
10479
|
if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
|
|
11118
|
-
guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText :
|
|
10480
|
+
guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : '');
|
|
11119
10481
|
if (guidanceError) {
|
|
11120
10482
|
return /*#__PURE__*/React__default.createElement(SelfieCaptureFallback, {
|
|
11121
10483
|
classNames: classNames.fallback
|
|
11122
10484
|
});
|
|
11123
10485
|
}
|
|
11124
|
-
var GuidesComponent = guidesComponent !== null && guidesComponent !== void 0 ? guidesComponent : FaceCaptureGuideOverlay;
|
|
11125
10486
|
return /*#__PURE__*/React__default.createElement(PageContainer, {
|
|
11126
10487
|
ref: ref,
|
|
11127
10488
|
className: "flex ".concat((_b = classNames.container) !== null && _b !== void 0 ? _b : '')
|
|
11128
10489
|
}, /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
|
|
11129
10490
|
ref: lastPredictionCanvas
|
|
11130
|
-
}), /*#__PURE__*/React__default.createElement(
|
|
10491
|
+
}), /*#__PURE__*/React__default.createElement(FaceCaptureGuideOverlay, {
|
|
11131
10492
|
classNames: classNames.guides,
|
|
11132
|
-
|
|
10493
|
+
variant: satisfied ? 'satisfied' : 'unsatisfied'
|
|
11133
10494
|
}), guidanceMessage !== '' && ( /*#__PURE__*/React__default.createElement(GuidanceMessageContainer, {
|
|
11134
10495
|
className: classNames.guidanceMessageContainer
|
|
11135
10496
|
}, /*#__PURE__*/React__default.createElement(GuidanceMessage, {
|
|
@@ -11161,26 +10522,15 @@ var initialState$2 = {
|
|
|
11161
10522
|
phoneDetected: false,
|
|
11162
10523
|
timesLivenessCheckFailed: 0
|
|
11163
10524
|
};
|
|
10525
|
+
/** 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.
|
|
10526
|
+
* There may also be some crossing of wires in how error/failed are used.
|
|
10527
|
+
*/
|
|
11164
10528
|
var reducer$2 = function reducer(state, action) {
|
|
11165
10529
|
var _a, _b;
|
|
11166
10530
|
switch (action.type) {
|
|
11167
|
-
case 'resetLivenessCheck':
|
|
11168
|
-
return _assign(_assign({}, initialState$2), {
|
|
11169
|
-
timesLivenessCheckFailed: state.timesLivenessCheckFailed
|
|
11170
|
-
});
|
|
11171
|
-
case 'guidanceUnsatisfied':
|
|
11172
|
-
return _assign({}, state);
|
|
11173
|
-
case 'guidanceSatisfied':
|
|
11174
|
-
return _assign(_assign({}, state), {
|
|
11175
|
-
requestState: 'GUIDANCE_SATISFIED'
|
|
11176
|
-
});
|
|
11177
|
-
case 'selfieCaptureStarted':
|
|
11178
|
-
return _assign(_assign({}, state), {
|
|
11179
|
-
requestState: 'CAPTURE_STARTED'
|
|
11180
|
-
});
|
|
11181
10531
|
case 'livenessReady':
|
|
11182
10532
|
{
|
|
11183
|
-
var allowedStates = ['
|
|
10533
|
+
var allowedStates = ['CAPTURING', 'FAILED', 'ERROR'];
|
|
11184
10534
|
if (allowedStates.includes(state.requestState)) {
|
|
11185
10535
|
return _assign(_assign({}, state), {
|
|
11186
10536
|
requestState: 'CAPTURED',
|
|
@@ -11245,45 +10595,36 @@ var reducer$2 = function reducer(state, action) {
|
|
|
11245
10595
|
}
|
|
11246
10596
|
};
|
|
11247
10597
|
var FaceLivenessCapture = function FaceLivenessCapture(_a) {
|
|
11248
|
-
var _b, _c, _d
|
|
10598
|
+
var _b, _c, _d;
|
|
11249
10599
|
var onCapture = _a.onCapture,
|
|
11250
10600
|
onSuccess = _a.onSuccess,
|
|
11251
10601
|
onTimeout = _a.onTimeout,
|
|
11252
10602
|
onExit = _a.onExit,
|
|
11253
|
-
|
|
11254
|
-
timeoutDurationMs =
|
|
11255
|
-
|
|
11256
|
-
silentFallback =
|
|
11257
|
-
|
|
11258
|
-
|
|
11259
|
-
_h = _a.
|
|
11260
|
-
|
|
11261
|
-
_j = _a.
|
|
11262
|
-
|
|
11263
|
-
_k = _a.colors,
|
|
11264
|
-
colors = _k === void 0 ? {} : _k,
|
|
11265
|
-
_l = _a.verbiage,
|
|
11266
|
-
rawVerbiage = _l === void 0 ? {} : _l,
|
|
10603
|
+
_e = _a.timeoutDurationMs,
|
|
10604
|
+
timeoutDurationMs = _e === void 0 ? 15000 : _e,
|
|
10605
|
+
_f = _a.silentFallback,
|
|
10606
|
+
silentFallback = _f === void 0 ? false : _f,
|
|
10607
|
+
_g = _a.classNames,
|
|
10608
|
+
classNames = _g === void 0 ? {} : _g,
|
|
10609
|
+
_h = _a.colors,
|
|
10610
|
+
colors = _h === void 0 ? {} : _h,
|
|
10611
|
+
_j = _a.verbiage,
|
|
10612
|
+
rawVerbiage = _j === void 0 ? {} : _j,
|
|
11267
10613
|
debugMode = _a.debugMode;
|
|
11268
|
-
var
|
|
11269
|
-
checkLiveness =
|
|
11270
|
-
submissionError =
|
|
10614
|
+
var _k = useContext(SubmissionContext),
|
|
10615
|
+
checkLiveness = _k.checkLiveness,
|
|
10616
|
+
submissionError = _k.submissionError;
|
|
11271
10617
|
var modelError = useContext(SelfieGuidanceModelsContext).error;
|
|
11272
|
-
var
|
|
11273
|
-
state =
|
|
11274
|
-
dispatch =
|
|
11275
|
-
var
|
|
11276
|
-
imageUrl =
|
|
11277
|
-
setImageUrl =
|
|
10618
|
+
var _l = useReducer(reducer$2, initialState$2),
|
|
10619
|
+
state = _l[0],
|
|
10620
|
+
dispatch = _l[1];
|
|
10621
|
+
var _m = useState(null),
|
|
10622
|
+
imageUrl = _m[0],
|
|
10623
|
+
setImageUrl = _m[1];
|
|
11278
10624
|
var rawCanvas = useRef(null);
|
|
11279
10625
|
var cropCanvas = useRef(null);
|
|
11280
10626
|
var resizeCanvas = useRef(null);
|
|
11281
10627
|
var theme = useTheme();
|
|
11282
|
-
var onSelfieCaptureStarted = useCallback(function () {
|
|
11283
|
-
dispatch({
|
|
11284
|
-
type: 'selfieCaptureStarted'
|
|
11285
|
-
});
|
|
11286
|
-
}, []);
|
|
11287
10628
|
var onSelfieCaptured = useCallback(function (frame, face) {
|
|
11288
10629
|
onCapture === null || onCapture === void 0 ? void 0 : onCapture();
|
|
11289
10630
|
dispatch({
|
|
@@ -11393,53 +10734,24 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
|
|
|
11393
10734
|
});
|
|
11394
10735
|
});
|
|
11395
10736
|
}, [checkLiveness, onTimeout]);
|
|
11396
|
-
useEffect(function () {
|
|
11397
|
-
if (state.requestState === 'FAILED' || state.requestState === 'ERROR') {
|
|
11398
|
-
setTimeout(function () {
|
|
11399
|
-
dispatch({
|
|
11400
|
-
type: 'resetLivenessCheck'
|
|
11401
|
-
});
|
|
11402
|
-
}, 1000);
|
|
11403
|
-
}
|
|
11404
|
-
}, [state.requestState]);
|
|
11405
10737
|
useEffect(function callSuccessIfAvailable() {
|
|
11406
10738
|
if (isPassed && state.imageUrl) onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(state.imageUrl);
|
|
11407
10739
|
}, [onSuccess, state.imageUrl, isPassed]);
|
|
11408
10740
|
useEffect(function timeoutOnTooManyLivenessCheckFailures() {
|
|
11409
10741
|
if (modelError) return;
|
|
11410
10742
|
var allowedFailures = 2;
|
|
11411
|
-
if (state.timesLivenessCheckFailed
|
|
10743
|
+
if (state.timesLivenessCheckFailed >= allowedFailures) {
|
|
11412
10744
|
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
|
|
11413
10745
|
}
|
|
11414
10746
|
}, [modelError, onTimeout, state.timesLivenessCheckFailed]);
|
|
11415
10747
|
useTimeout(timeoutDurationMs, onTimeout, state.requestState === 'PASSED' || !!modelError, state.requestState === 'IN_PROGRESS');
|
|
11416
10748
|
var verbiage = useTranslations(rawVerbiage, {
|
|
11417
|
-
guidanceLivenessCheckFailedText: 'Could not verify your face.',
|
|
11418
|
-
guidanceLivenessCheckErrorText: 'An error occurred while verifying your face.',
|
|
11419
10749
|
guidanceRemoveEyeCoveringsText: 'Please remove your eye coverings (sunglasses, eye patch, etc.)...',
|
|
11420
10750
|
guidanceRemoveHeadCoveringsText: 'Please remove your head coverings (hat, scarf, etc.)...',
|
|
11421
10751
|
guidanceRemoveMaskText: 'Please remove your mask...',
|
|
11422
10752
|
progressPreviewText: 'Processing...'
|
|
11423
10753
|
});
|
|
11424
|
-
var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText :
|
|
11425
|
-
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);
|
|
11426
|
-
var guidesByRequestState = useCallback(function (props) {
|
|
11427
|
-
var GuidesComponent = guidesComponent !== null && guidesComponent !== void 0 ? guidesComponent : FaceCaptureGuideOverlay;
|
|
11428
|
-
var status = ['IN_PROGRESS', 'CAPTURE_STARTED', 'GUIDANCE_SATISFIED', 'CAPTURED'].includes(state.requestState) ? 'processing' : ['FAILED', 'ERROR'].includes(state.requestState) ? 'failure' : 'ready';
|
|
11429
|
-
return /*#__PURE__*/React__default.createElement(GuidesComponent, _assign({}, props, {
|
|
11430
|
-
status: status
|
|
11431
|
-
}));
|
|
11432
|
-
}, [guidesComponent, state.requestState]);
|
|
11433
|
-
var onGuidanceSatisfied = useCallback(function () {
|
|
11434
|
-
dispatch({
|
|
11435
|
-
type: 'guidanceSatisfied'
|
|
11436
|
-
});
|
|
11437
|
-
}, []);
|
|
11438
|
-
var onGuidanceNotSatisfied = useCallback(function () {
|
|
11439
|
-
dispatch({
|
|
11440
|
-
type: 'guidanceUnsatisfied'
|
|
11441
|
-
});
|
|
11442
|
-
}, []);
|
|
10754
|
+
var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText : undefined;
|
|
11443
10755
|
if (modelError) {
|
|
11444
10756
|
return /*#__PURE__*/React__default.createElement(SelfieCaptureFallback, {
|
|
11445
10757
|
key: state.timesLivenessCheckFailed,
|
|
@@ -11456,25 +10768,19 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
|
|
|
11456
10768
|
}), /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
|
|
11457
10769
|
ref: resizeCanvas
|
|
11458
10770
|
}), /*#__PURE__*/React__default.createElement(SelfieCapture, {
|
|
11459
|
-
shouldCapture: state.requestState === 'CAPTURING',
|
|
11460
|
-
onSelfieCaptureStarted: onSelfieCaptureStarted,
|
|
11461
10771
|
onSelfieCaptured: onSelfieCaptured,
|
|
11462
10772
|
onExit: onExit,
|
|
11463
10773
|
timeoutDurationMs: timeoutDurationMs,
|
|
11464
10774
|
guidanceMessage: guidanceMessage,
|
|
11465
10775
|
guidanceSatisfied: guidanceMessage ? false : undefined,
|
|
11466
|
-
onGuidanceSatisfied: onGuidanceSatisfied,
|
|
11467
|
-
onGuidanceNotSatisfied: onGuidanceNotSatisfied,
|
|
11468
|
-
guidesComponent: guidesByRequestState,
|
|
11469
|
-
requireVerticalFaceCentering: requireVerticalFaceCentering,
|
|
11470
10776
|
classNames: classNames,
|
|
11471
10777
|
colors: colors,
|
|
11472
10778
|
verbiage: verbiage,
|
|
11473
10779
|
debugMode: debugMode
|
|
11474
|
-
}), !
|
|
10780
|
+
}), !((_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.capturePreview) === null || _c === void 0 ? void 0 : _c.disabled) && imageUrl && ( /*#__PURE__*/React__default.createElement(SelfieProgressPreview, {
|
|
11475
10781
|
classNames: classNames.imagePreview,
|
|
11476
10782
|
imageUrl: imageUrl,
|
|
11477
|
-
text: (
|
|
10783
|
+
text: (_d = verbiage.progressPreviewText) !== null && _d !== void 0 ? _d : ''
|
|
11478
10784
|
})));
|
|
11479
10785
|
};
|
|
11480
10786
|
|
|
@@ -11497,7 +10803,7 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
|
11497
10803
|
className: classNames.container
|
|
11498
10804
|
}, /*#__PURE__*/React__default.createElement(OverlayInner$2, {
|
|
11499
10805
|
className: classNames.inner
|
|
11500
|
-
}, /*#__PURE__*/React__default.createElement(Heading$
|
|
10806
|
+
}, /*#__PURE__*/React__default.createElement(Heading$5, {
|
|
11501
10807
|
className: classNames.heading
|
|
11502
10808
|
}, verbiage.headingText), /*#__PURE__*/React__default.createElement(OverlayImageContainer, {
|
|
11503
10809
|
className: classNames.imageContainer
|
|
@@ -11505,7 +10811,7 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
|
11505
10811
|
alt: verbiage.headingText,
|
|
11506
10812
|
src: imageUrl,
|
|
11507
10813
|
className: classNames.image
|
|
11508
|
-
})), /*#__PURE__*/React__default.createElement(ButtonsRow
|
|
10814
|
+
})), /*#__PURE__*/React__default.createElement(ButtonsRow, {
|
|
11509
10815
|
className: classNames.buttonsRow
|
|
11510
10816
|
}, /*#__PURE__*/React__default.createElement(LoaderButton, {
|
|
11511
10817
|
variant: "warning",
|
|
@@ -11521,8 +10827,8 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
|
11521
10827
|
finished: true
|
|
11522
10828
|
}, verbiage.doneBtnText))));
|
|
11523
10829
|
};
|
|
11524
|
-
var Heading$
|
|
11525
|
-
var templateObject_1$
|
|
10830
|
+
var Heading$5 = styled.h3(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
10831
|
+
var templateObject_1$i;
|
|
11526
10832
|
|
|
11527
10833
|
var FaceLivenessFailure = function FaceLivenessFailure(_a) {
|
|
11528
10834
|
var _b = _a.canRetry,
|
|
@@ -11537,48 +10843,42 @@ var FaceLivenessFailure = function FaceLivenessFailure(_a) {
|
|
|
11537
10843
|
colors = _e === void 0 ? {} : _e,
|
|
11538
10844
|
_f = _a.verbiage,
|
|
11539
10845
|
rawVerbiage = _f === void 0 ? {} : _f;
|
|
11540
|
-
assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/
|
|
10846
|
+
assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/manual_capture.png"));
|
|
11541
10847
|
var verbiage = useTranslations(rawVerbiage, {
|
|
11542
10848
|
headingText: 'Live face not detected, please try again',
|
|
11543
10849
|
retryBtnText: 'Retry',
|
|
11544
10850
|
exitBtnText: 'Exit'
|
|
11545
10851
|
});
|
|
11546
|
-
return /*#__PURE__*/React__default.createElement(
|
|
10852
|
+
return /*#__PURE__*/React__default.createElement(OverlayContainer, {
|
|
11547
10853
|
className: classNames.container
|
|
11548
10854
|
}, /*#__PURE__*/React__default.createElement(OverlayInner$2, {
|
|
11549
10855
|
className: classNames.inner
|
|
11550
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10856
|
+
}, /*#__PURE__*/React__default.createElement("h3", {
|
|
10857
|
+
className: classNames.heading
|
|
10858
|
+
}, verbiage.headingText), /*#__PURE__*/React__default.createElement(ImageContainer$4, {
|
|
11551
10859
|
className: classNames.imageContainer
|
|
11552
10860
|
}, /*#__PURE__*/React__default.createElement("img", {
|
|
11553
10861
|
alt: verbiage.headingText,
|
|
11554
10862
|
src: assets.imageUrl,
|
|
11555
10863
|
className: classNames.image
|
|
11556
|
-
})), /*#__PURE__*/React__default.createElement(
|
|
11557
|
-
className: classNames.heading
|
|
11558
|
-
}, verbiage.headingText), /*#__PURE__*/React__default.createElement(ButtonsRow, {
|
|
10864
|
+
})), /*#__PURE__*/React__default.createElement(ButtonsRow, {
|
|
11559
10865
|
className: classNames.buttonsRow
|
|
11560
|
-
}, canRetry && ( /*#__PURE__*/React__default.createElement(
|
|
11561
|
-
variant: "
|
|
10866
|
+
}, canRetry && ( /*#__PURE__*/React__default.createElement(LoaderButton, {
|
|
10867
|
+
variant: "warning",
|
|
11562
10868
|
className: classNames.retryBtn,
|
|
11563
10869
|
onClick: onRetryClick,
|
|
11564
10870
|
colors: colors.retryBtn,
|
|
11565
10871
|
finished: true
|
|
11566
|
-
}, verbiage.retryBtnText)), /*#__PURE__*/React__default.createElement(
|
|
10872
|
+
}, verbiage.retryBtnText)), /*#__PURE__*/React__default.createElement(LoaderButton, {
|
|
11567
10873
|
variant: "secondary",
|
|
11568
10874
|
className: classNames.exitBtn,
|
|
11569
10875
|
onClick: onExitClick,
|
|
11570
10876
|
colors: colors.exitBtn,
|
|
11571
10877
|
finished: true
|
|
11572
|
-
}, verbiage.exitBtnText))))
|
|
10878
|
+
}, verbiage.exitBtnText))));
|
|
11573
10879
|
};
|
|
11574
|
-
var ImageContainer$4 = styled(OverlayImageContainer)(templateObject_1$
|
|
11575
|
-
var
|
|
11576
|
-
var GrayOverlayContainer = styled(OverlayContainer)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n background: #f7f6fb;\n"], ["\n background: #f7f6fb;\n"])));
|
|
11577
|
-
var Card = styled.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"])));
|
|
11578
|
-
var WideButton = styled(LoaderButton)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n width: 100%;\n border-radius: 30px;\n"], ["\n width: 100%;\n border-radius: 30px;\n"])));
|
|
11579
|
-
var ButtonsRow = styled.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"])));
|
|
11580
|
-
var WideBorderButton = styled(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"])));
|
|
11581
|
-
var templateObject_1$i, templateObject_2$e, templateObject_3$d, templateObject_4$7, templateObject_5$3, templateObject_6$3, templateObject_7$2;
|
|
10880
|
+
var ImageContainer$4 = styled(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"])));
|
|
10881
|
+
var templateObject_1$h;
|
|
11582
10882
|
|
|
11583
10883
|
var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
|
|
11584
10884
|
var _b;
|
|
@@ -11619,11 +10919,11 @@ var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
|
|
|
11619
10919
|
finished: true
|
|
11620
10920
|
}, verbiage.retryBtnText)));
|
|
11621
10921
|
};
|
|
11622
|
-
var StyledOverlayInner = styled(OverlayInner$2)(templateObject_1$
|
|
11623
|
-
var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_2$
|
|
11624
|
-
var Description$1 = styled.p(templateObject_3$
|
|
10922
|
+
var StyledOverlayInner = styled(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"])));
|
|
10923
|
+
var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
10924
|
+
var Description$1 = styled.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"])));
|
|
11625
10925
|
var RetryButton = styled(LoaderButton)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
11626
|
-
var templateObject_1$
|
|
10926
|
+
var templateObject_1$g, templateObject_2$c, templateObject_3$b, templateObject_4$6;
|
|
11627
10927
|
|
|
11628
10928
|
var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLegacy(_a) {
|
|
11629
10929
|
var onDismissed = _a.onDismissed,
|
|
@@ -11702,9 +11002,273 @@ var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLega
|
|
|
11702
11002
|
}
|
|
11703
11003
|
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
|
|
11704
11004
|
};
|
|
11705
|
-
var StyledGuidanceMessage$1 = styled(GuidanceMessage)(templateObject_1$
|
|
11706
|
-
var StyledButtonsRow$6 = styled(ButtonsRow
|
|
11707
|
-
var templateObject_1$
|
|
11005
|
+
var StyledGuidanceMessage$1 = styled(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"])));
|
|
11006
|
+
var StyledButtonsRow$6 = styled(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"])));
|
|
11007
|
+
var templateObject_1$f, templateObject_2$b;
|
|
11008
|
+
|
|
11009
|
+
function SelfieCaptureLoadingGraphic(_a) {
|
|
11010
|
+
var _b, _c, _d;
|
|
11011
|
+
var _e = _a.width,
|
|
11012
|
+
width = _e === void 0 ? 840 : _e,
|
|
11013
|
+
_f = _a.height,
|
|
11014
|
+
height = _f === void 0 ? 740 : _f,
|
|
11015
|
+
className = _a.className;
|
|
11016
|
+
var _g = useState(1),
|
|
11017
|
+
frame = _g[0],
|
|
11018
|
+
setFrame = _g[1];
|
|
11019
|
+
useEffect(function () {
|
|
11020
|
+
var i = setInterval(function () {
|
|
11021
|
+
setFrame(function (n) {
|
|
11022
|
+
return (n + 1) % 10;
|
|
11023
|
+
});
|
|
11024
|
+
}, 750);
|
|
11025
|
+
return function () {
|
|
11026
|
+
clearInterval(i);
|
|
11027
|
+
};
|
|
11028
|
+
}, []);
|
|
11029
|
+
var theme = useTheme();
|
|
11030
|
+
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)';
|
|
11031
|
+
return /*#__PURE__*/React__default.createElement("svg", {
|
|
11032
|
+
width: width,
|
|
11033
|
+
height: height,
|
|
11034
|
+
className: className,
|
|
11035
|
+
viewBox: "0 0 840 740",
|
|
11036
|
+
fill: "none",
|
|
11037
|
+
preserveAspectRatio: "xMidYMax slice",
|
|
11038
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
11039
|
+
}, /*#__PURE__*/React__default.createElement("g", {
|
|
11040
|
+
clipPath: "url(#clip0_428_1188)"
|
|
11041
|
+
}, /*#__PURE__*/React__default.createElement("mask", {
|
|
11042
|
+
id: "mask0_428_1188",
|
|
11043
|
+
style: {
|
|
11044
|
+
maskType: 'alpha'
|
|
11045
|
+
},
|
|
11046
|
+
maskUnits: "userSpaceOnUse",
|
|
11047
|
+
x: "0",
|
|
11048
|
+
y: "0",
|
|
11049
|
+
width: "840",
|
|
11050
|
+
height: "740"
|
|
11051
|
+
}, /*#__PURE__*/React__default.createElement("rect", {
|
|
11052
|
+
width: "840",
|
|
11053
|
+
height: "740",
|
|
11054
|
+
fill: "#D9D9D9"
|
|
11055
|
+
})), /*#__PURE__*/React__default.createElement("g", {
|
|
11056
|
+
mask: "url(#mask0_428_1188)"
|
|
11057
|
+
}, /*#__PURE__*/React__default.createElement("path", {
|
|
11058
|
+
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",
|
|
11059
|
+
fill: "#D2D4DA"
|
|
11060
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11061
|
+
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",
|
|
11062
|
+
fill: "#F7A69C"
|
|
11063
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11064
|
+
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",
|
|
11065
|
+
fill: "#F7A69C"
|
|
11066
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11067
|
+
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",
|
|
11068
|
+
fill: "#DC968D"
|
|
11069
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11070
|
+
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",
|
|
11071
|
+
fill: "#F7A69C"
|
|
11072
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11073
|
+
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",
|
|
11074
|
+
fill: "#FEAEA5"
|
|
11075
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11076
|
+
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",
|
|
11077
|
+
fill: "#F7A69C"
|
|
11078
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11079
|
+
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",
|
|
11080
|
+
fill: "#6E7174"
|
|
11081
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11082
|
+
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",
|
|
11083
|
+
fill: "#555A5E"
|
|
11084
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11085
|
+
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",
|
|
11086
|
+
fill: "#525252"
|
|
11087
|
+
})), frame >= 8 ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("path", {
|
|
11088
|
+
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",
|
|
11089
|
+
stroke: accentColor,
|
|
11090
|
+
strokeWidth: "5"
|
|
11091
|
+
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
11092
|
+
cx: "518.5",
|
|
11093
|
+
cy: "438.5",
|
|
11094
|
+
r: "25.5",
|
|
11095
|
+
fill: accentColor
|
|
11096
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11097
|
+
d: "M504 440.5L512 448L531 427",
|
|
11098
|
+
stroke: "white",
|
|
11099
|
+
strokeWidth: "5",
|
|
11100
|
+
strokeLinecap: "round",
|
|
11101
|
+
strokeLinejoin: "round"
|
|
11102
|
+
}))) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, frame > 2 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, frame > 3 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, frame > 4 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, frame > 5 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("path", {
|
|
11103
|
+
d: "M298.5 182.5L419 164.5L540 182",
|
|
11104
|
+
stroke: "white",
|
|
11105
|
+
strokeWidth: "2",
|
|
11106
|
+
strokeLinecap: "round",
|
|
11107
|
+
strokeLinejoin: "round"
|
|
11108
|
+
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
11109
|
+
cx: "419",
|
|
11110
|
+
cy: "165",
|
|
11111
|
+
r: "7",
|
|
11112
|
+
fill: "white"
|
|
11113
|
+
}))), /*#__PURE__*/React__default.createElement("path", {
|
|
11114
|
+
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",
|
|
11115
|
+
stroke: "white",
|
|
11116
|
+
strokeOpacity: frame > 7 ? 0.8 : frame > 5 ? 0.3 : 0.1,
|
|
11117
|
+
strokeWidth: "5"
|
|
11118
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11119
|
+
d: "M299.939 262.805L419 478.5L538.5 261.5",
|
|
11120
|
+
stroke: "white",
|
|
11121
|
+
strokeWidth: "2",
|
|
11122
|
+
strokeLinecap: "round",
|
|
11123
|
+
strokeLinejoin: "round"
|
|
11124
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11125
|
+
d: "M298.5 182.5L418.871 230.054L540 182",
|
|
11126
|
+
stroke: "white",
|
|
11127
|
+
strokeWidth: "2",
|
|
11128
|
+
strokeLinecap: "round",
|
|
11129
|
+
strokeLinejoin: "round"
|
|
11130
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11131
|
+
d: "M298.5 182.5L299.939 262.805",
|
|
11132
|
+
stroke: "white",
|
|
11133
|
+
strokeWidth: "2",
|
|
11134
|
+
strokeLinecap: "round",
|
|
11135
|
+
strokeLinejoin: "round"
|
|
11136
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11137
|
+
d: "M540.001 182L538.501 261.5",
|
|
11138
|
+
stroke: "white",
|
|
11139
|
+
strokeWidth: "2",
|
|
11140
|
+
strokeLinecap: "round",
|
|
11141
|
+
strokeLinejoin: "round"
|
|
11142
|
+
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
11143
|
+
cx: "299.914",
|
|
11144
|
+
cy: "182",
|
|
11145
|
+
r: "7",
|
|
11146
|
+
fill: "white"
|
|
11147
|
+
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
11148
|
+
cx: "540",
|
|
11149
|
+
cy: "182",
|
|
11150
|
+
r: "7",
|
|
11151
|
+
fill: "white"
|
|
11152
|
+
}))), /*#__PURE__*/React__default.createElement("path", {
|
|
11153
|
+
d: "M418.828 230L419 342.5",
|
|
11154
|
+
stroke: "white",
|
|
11155
|
+
strokeWidth: "2",
|
|
11156
|
+
strokeLinecap: "round",
|
|
11157
|
+
strokeLinejoin: "round",
|
|
11158
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11159
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11160
|
+
d: "M300 263.001L419 342.501",
|
|
11161
|
+
stroke: "white",
|
|
11162
|
+
strokeWidth: "2",
|
|
11163
|
+
strokeLinecap: "round",
|
|
11164
|
+
strokeLinejoin: "round",
|
|
11165
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11166
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11167
|
+
d: "M538.5 261.5L419 342.5",
|
|
11168
|
+
stroke: "white",
|
|
11169
|
+
strokeWidth: "2",
|
|
11170
|
+
strokeLinecap: "round",
|
|
11171
|
+
strokeLinejoin: "round",
|
|
11172
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11173
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11174
|
+
d: "M301.5 409L419 342.5",
|
|
11175
|
+
stroke: "white",
|
|
11176
|
+
strokeWidth: "2",
|
|
11177
|
+
strokeLinecap: "round",
|
|
11178
|
+
strokeLinejoin: "round",
|
|
11179
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11180
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11181
|
+
d: "M536.5 410L419 342.5",
|
|
11182
|
+
stroke: "white",
|
|
11183
|
+
strokeWidth: "2",
|
|
11184
|
+
strokeLinecap: "round",
|
|
11185
|
+
strokeLinejoin: "round",
|
|
11186
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11187
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11188
|
+
d: "M300 263L419 230",
|
|
11189
|
+
stroke: "white",
|
|
11190
|
+
strokeWidth: "2",
|
|
11191
|
+
strokeLinecap: "round",
|
|
11192
|
+
strokeLinejoin: "round",
|
|
11193
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11194
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11195
|
+
d: "M538.5 261.5L419 230",
|
|
11196
|
+
stroke: "white",
|
|
11197
|
+
strokeWidth: "2",
|
|
11198
|
+
strokeLinecap: "round",
|
|
11199
|
+
strokeLinejoin: "round",
|
|
11200
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11201
|
+
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
11202
|
+
cx: "419",
|
|
11203
|
+
cy: "229.971",
|
|
11204
|
+
r: "7",
|
|
11205
|
+
fill: "white"
|
|
11206
|
+
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
11207
|
+
cx: "419",
|
|
11208
|
+
cy: "342.4",
|
|
11209
|
+
r: "7",
|
|
11210
|
+
fill: "white"
|
|
11211
|
+
}))), /*#__PURE__*/React__default.createElement("path", {
|
|
11212
|
+
d: "M538.5 261.5L536.5 410",
|
|
11213
|
+
stroke: "white",
|
|
11214
|
+
strokeWidth: "2",
|
|
11215
|
+
strokeLinecap: "round",
|
|
11216
|
+
strokeLinejoin: "round",
|
|
11217
|
+
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
11218
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11219
|
+
d: "M419 478.5L536.5 410",
|
|
11220
|
+
stroke: "white",
|
|
11221
|
+
strokeWidth: "2",
|
|
11222
|
+
strokeLinecap: "round",
|
|
11223
|
+
strokeLinejoin: "round",
|
|
11224
|
+
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
11225
|
+
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
11226
|
+
cx: "537",
|
|
11227
|
+
cy: "263",
|
|
11228
|
+
r: "7",
|
|
11229
|
+
fill: "white"
|
|
11230
|
+
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
11231
|
+
cx: "537",
|
|
11232
|
+
cy: "409",
|
|
11233
|
+
r: "7",
|
|
11234
|
+
fill: "white"
|
|
11235
|
+
}))), frame > 1 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("path", {
|
|
11236
|
+
d: "M301.501 409L300.001 263",
|
|
11237
|
+
stroke: "white",
|
|
11238
|
+
strokeWidth: "2",
|
|
11239
|
+
strokeLinecap: "round",
|
|
11240
|
+
strokeLinejoin: "round",
|
|
11241
|
+
strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
|
|
11242
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11243
|
+
d: "M301.501 409L419.001 478.5",
|
|
11244
|
+
stroke: "white",
|
|
11245
|
+
strokeWidth: "2",
|
|
11246
|
+
strokeLinecap: "round",
|
|
11247
|
+
strokeLinejoin: "round",
|
|
11248
|
+
strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
|
|
11249
|
+
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
11250
|
+
cx: "419",
|
|
11251
|
+
cy: "477.576",
|
|
11252
|
+
r: "7",
|
|
11253
|
+
fill: "white"
|
|
11254
|
+
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
11255
|
+
cx: "301.914",
|
|
11256
|
+
cy: "263",
|
|
11257
|
+
r: "7",
|
|
11258
|
+
fill: "white"
|
|
11259
|
+
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
11260
|
+
cx: "301.444",
|
|
11261
|
+
cy: "409",
|
|
11262
|
+
r: "7",
|
|
11263
|
+
fill: "white"
|
|
11264
|
+
})))))), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
|
|
11265
|
+
id: "clip0_428_1188"
|
|
11266
|
+
}, /*#__PURE__*/React__default.createElement("rect", {
|
|
11267
|
+
width: "840",
|
|
11268
|
+
height: "740",
|
|
11269
|
+
fill: "white"
|
|
11270
|
+
}))));
|
|
11271
|
+
}
|
|
11708
11272
|
|
|
11709
11273
|
var legacyInstructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png");
|
|
11710
11274
|
var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDefault(_a) {
|
|
@@ -11818,21 +11382,21 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
|
|
|
11818
11382
|
}
|
|
11819
11383
|
}, verbiage.continueText))))));
|
|
11820
11384
|
};
|
|
11821
|
-
var OverlayInner = styled.div(templateObject_1$
|
|
11385
|
+
var OverlayInner = styled.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) {
|
|
11822
11386
|
var _a, _b, _c, _d;
|
|
11823
11387
|
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';
|
|
11824
11388
|
}, function (props) {
|
|
11825
11389
|
var _a, _b, _c, _d;
|
|
11826
11390
|
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';
|
|
11827
11391
|
});
|
|
11828
|
-
var OverlayHeader = styled.div(templateObject_2$
|
|
11392
|
+
var OverlayHeader = styled.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) {
|
|
11829
11393
|
var _a;
|
|
11830
11394
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
11831
11395
|
}, function (props) {
|
|
11832
11396
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
11833
11397
|
});
|
|
11834
|
-
var StyledGuidanceMessage = styled(GuidanceMessage)(templateObject_3$
|
|
11835
|
-
var StyledButtonsRow$5 = styled(ButtonsRow
|
|
11398
|
+
var StyledGuidanceMessage = styled(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"])));
|
|
11399
|
+
var StyledButtonsRow$5 = styled(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) {
|
|
11836
11400
|
var _a, _b, _c, _d;
|
|
11837
11401
|
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';
|
|
11838
11402
|
}, function (props) {
|
|
@@ -11867,7 +11431,7 @@ var ContinueButton = styled(LoaderButton)(templateObject_15 || (templateObject_1
|
|
|
11867
11431
|
var _a, _b, _c, _d, _e, _f;
|
|
11868
11432
|
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, ";") : '';
|
|
11869
11433
|
});
|
|
11870
|
-
var templateObject_1$
|
|
11434
|
+
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;
|
|
11871
11435
|
|
|
11872
11436
|
var components = {
|
|
11873
11437
|
"default": SelfieCaptureLoadingOverlayDefault,
|
|
@@ -11904,44 +11468,40 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
11904
11468
|
releaseCameraAccessOnExit = _k === void 0 ? true : _k,
|
|
11905
11469
|
_l = _a.silentFallback,
|
|
11906
11470
|
silentFallback = _l === void 0 ? false : _l,
|
|
11907
|
-
|
|
11908
|
-
|
|
11909
|
-
|
|
11910
|
-
|
|
11911
|
-
|
|
11912
|
-
|
|
11913
|
-
|
|
11914
|
-
|
|
11915
|
-
|
|
11916
|
-
|
|
11917
|
-
|
|
11918
|
-
|
|
11919
|
-
|
|
11920
|
-
|
|
11921
|
-
|
|
11922
|
-
|
|
11923
|
-
|
|
11924
|
-
|
|
11925
|
-
|
|
11926
|
-
var _u =
|
|
11927
|
-
|
|
11928
|
-
|
|
11929
|
-
|
|
11930
|
-
|
|
11931
|
-
|
|
11932
|
-
|
|
11933
|
-
|
|
11934
|
-
|
|
11935
|
-
setRetryCount = _w[1];
|
|
11936
|
-
var _x = useState('LOADING'),
|
|
11937
|
-
captureState = _x[0],
|
|
11938
|
-
setCaptureState = _x[1];
|
|
11471
|
+
_m = _a.assets,
|
|
11472
|
+
assets = _m === void 0 ? {} : _m,
|
|
11473
|
+
_o = _a.classNames,
|
|
11474
|
+
classNames = _o === void 0 ? {} : _o,
|
|
11475
|
+
_p = _a.colors,
|
|
11476
|
+
colors = _p === void 0 ? {} : _p,
|
|
11477
|
+
_q = _a.verbiage,
|
|
11478
|
+
verbiage = _q === void 0 ? {} : _q,
|
|
11479
|
+
_r = _a.debugMode,
|
|
11480
|
+
debugMode = _r === void 0 ? false : _r;
|
|
11481
|
+
var _s = useContext(SubmissionContext),
|
|
11482
|
+
submissionResponse = _s.submissionResponse,
|
|
11483
|
+
livenessCheckRequest = _s.livenessCheckRequest,
|
|
11484
|
+
setSelfieImage = _s.setSelfieImage,
|
|
11485
|
+
logSelfieCaptureAttempt = _s.logSelfieCaptureAttempt;
|
|
11486
|
+
var _t = useContext(CameraStateContext),
|
|
11487
|
+
cameraAccessDenied = _t.cameraAccessDenied,
|
|
11488
|
+
requestCameraAccess = _t.requestCameraAccess,
|
|
11489
|
+
releaseCameraAccess = _t.releaseCameraAccess;
|
|
11490
|
+
var _u = useState(''),
|
|
11491
|
+
faceCropImageUrl = _u[0],
|
|
11492
|
+
setFaceCropImageUrl = _u[1];
|
|
11493
|
+
var _v = useState(0),
|
|
11494
|
+
retryCount = _v[0],
|
|
11495
|
+
setRetryCount = _v[1];
|
|
11496
|
+
var _w = useState('LOADING'),
|
|
11497
|
+
captureState = _w[0],
|
|
11498
|
+
setCaptureState = _w[1];
|
|
11939
11499
|
var captureStartedAt = useRef();
|
|
11940
11500
|
var captureEndedAt = useRef();
|
|
11941
11501
|
var operationStartedAt = useRef();
|
|
11942
|
-
var
|
|
11943
|
-
start =
|
|
11944
|
-
stop =
|
|
11502
|
+
var _x = useContext(SelfieGuidanceModelsContext),
|
|
11503
|
+
start = _x.start,
|
|
11504
|
+
stop = _x.stop;
|
|
11945
11505
|
useEffect(function () {
|
|
11946
11506
|
operationStartedAt.current = new Date();
|
|
11947
11507
|
}, []);
|
|
@@ -11989,9 +11549,9 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
11989
11549
|
setCaptureState('FAILED');
|
|
11990
11550
|
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout(submissionResponse, livenessCheckRequest);
|
|
11991
11551
|
}, [onTimeout, livenessCheckRequest, submissionResponse]);
|
|
11992
|
-
var
|
|
11993
|
-
attempt =
|
|
11994
|
-
setAttempt =
|
|
11552
|
+
var _y = useState(0),
|
|
11553
|
+
attempt = _y[0],
|
|
11554
|
+
setAttempt = _y[1];
|
|
11995
11555
|
var onExitCallback = useCallback(function () {
|
|
11996
11556
|
setAttempt(function (n) {
|
|
11997
11557
|
return n + 1;
|
|
@@ -12044,9 +11604,6 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
12044
11604
|
onExit: onExitCallback,
|
|
12045
11605
|
timeoutDurationMs: timeoutDurationMs,
|
|
12046
11606
|
silentFallback: silentFallback,
|
|
12047
|
-
guidesComponent: guidesComponent,
|
|
12048
|
-
disableCapturePreview: disableCapturePreview,
|
|
12049
|
-
requireVerticalFaceCentering: requireVerticalFaceCentering,
|
|
12050
11607
|
classNames: classNames.capture,
|
|
12051
11608
|
colors: colors,
|
|
12052
11609
|
verbiage: verbiage,
|
|
@@ -12245,11 +11802,11 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
|
|
|
12245
11802
|
}
|
|
12246
11803
|
}, verbiage.captureBtnText)))));
|
|
12247
11804
|
};
|
|
12248
|
-
var Inner = styled(OverlayInner$2)(templateObject_1$
|
|
12249
|
-
var Heading$4 = styled.h3(templateObject_2$
|
|
12250
|
-
var Description = styled.p(templateObject_3$
|
|
12251
|
-
var StyledButtonsRow$4 = styled(ButtonsRow
|
|
12252
|
-
var templateObject_1$
|
|
11805
|
+
var Inner = styled(OverlayInner$2)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
11806
|
+
var Heading$4 = styled.h3(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
11807
|
+
var Description = styled.p(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
11808
|
+
var StyledButtonsRow$4 = styled(ButtonsRow)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
11809
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$9, templateObject_4$4;
|
|
12253
11810
|
|
|
12254
11811
|
var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_a) {
|
|
12255
11812
|
var documents = _a.documents,
|
|
@@ -12393,7 +11950,7 @@ function convertSVGtoImg(svgData_1) {
|
|
|
12393
11950
|
});
|
|
12394
11951
|
}
|
|
12395
11952
|
|
|
12396
|
-
var SignaturePaperBacking = styled.div(templateObject_1$
|
|
11953
|
+
var SignaturePaperBacking = styled.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) {
|
|
12397
11954
|
var _a, _b;
|
|
12398
11955
|
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, ";") : "";
|
|
12399
11956
|
}, function (props) {
|
|
@@ -12403,8 +11960,8 @@ var SignaturePaperBacking = styled.div(templateObject_1$d || (templateObject_1$d
|
|
|
12403
11960
|
var _a, _b;
|
|
12404
11961
|
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, ";") : "";
|
|
12405
11962
|
});
|
|
12406
|
-
var SignatureCanvasContainer = styled.div(templateObject_2$
|
|
12407
|
-
var SignaturePad = styled.div(templateObject_3$
|
|
11963
|
+
var SignatureCanvasContainer = styled.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"])));
|
|
11964
|
+
var SignaturePad = styled.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) {
|
|
12408
11965
|
var _a, _b, _c;
|
|
12409
11966
|
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)';
|
|
12410
11967
|
}, function (props) {
|
|
@@ -12414,8 +11971,8 @@ var SignaturePad = styled.div(templateObject_3$9 || (templateObject_3$9 = __make
|
|
|
12414
11971
|
var _a, _b, _c;
|
|
12415
11972
|
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';
|
|
12416
11973
|
});
|
|
12417
|
-
var SignatureButtonsContainer = styled(ButtonsRow
|
|
12418
|
-
var templateObject_1$
|
|
11974
|
+
var SignatureButtonsContainer = styled(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"])));
|
|
11975
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$8, templateObject_4$3;
|
|
12419
11976
|
|
|
12420
11977
|
var SignatureCapture = function SignatureCapture(_a) {
|
|
12421
11978
|
var _b;
|
|
@@ -12486,8 +12043,8 @@ var SignatureCapture = function SignatureCapture(_a) {
|
|
|
12486
12043
|
finished: true
|
|
12487
12044
|
}, verbiage.acceptBtnText)))));
|
|
12488
12045
|
};
|
|
12489
|
-
var AcceptBtn$1 = styled(LoaderButton)(templateObject_1$
|
|
12490
|
-
var templateObject_1$
|
|
12046
|
+
var AcceptBtn$1 = styled(LoaderButton)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
|
|
12047
|
+
var templateObject_1$b;
|
|
12491
12048
|
|
|
12492
12049
|
var useVideoRecorder = function useVideoRecorder(camera, audioStream, mergeAVStreams) {
|
|
12493
12050
|
if (mergeAVStreams === void 0) {
|
|
@@ -12844,8 +12401,8 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
|
|
|
12844
12401
|
ref: outputCanvas
|
|
12845
12402
|
}));
|
|
12846
12403
|
};
|
|
12847
|
-
var AcceptBtn = styled(LoaderButton)(templateObject_1$
|
|
12848
|
-
var templateObject_1$
|
|
12404
|
+
var AcceptBtn = styled(LoaderButton)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
|
|
12405
|
+
var templateObject_1$a;
|
|
12849
12406
|
|
|
12850
12407
|
var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
12851
12408
|
var videoUrl = _a.videoUrl,
|
|
@@ -12884,7 +12441,7 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
|
12884
12441
|
style: {
|
|
12885
12442
|
display: 'none'
|
|
12886
12443
|
}
|
|
12887
|
-
})), /*#__PURE__*/React__default.createElement(ButtonsRow
|
|
12444
|
+
})), /*#__PURE__*/React__default.createElement(ButtonsRow, {
|
|
12888
12445
|
className: classNames.buttonsRow
|
|
12889
12446
|
}, /*#__PURE__*/React__default.createElement(LoaderButton, {
|
|
12890
12447
|
variant: "warning",
|
|
@@ -12900,8 +12457,8 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
|
12900
12457
|
finished: true
|
|
12901
12458
|
}, verbiage.doneBtnText))));
|
|
12902
12459
|
};
|
|
12903
|
-
var StyledVideo$1 = styled.video(templateObject_1$
|
|
12904
|
-
var templateObject_1$
|
|
12460
|
+
var StyledVideo$1 = styled.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"])));
|
|
12461
|
+
var templateObject_1$9;
|
|
12905
12462
|
|
|
12906
12463
|
var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
12907
12464
|
var _b;
|
|
@@ -13080,91 +12637,18 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
|
13080
12637
|
}));
|
|
13081
12638
|
};
|
|
13082
12639
|
|
|
13083
|
-
var IdCardGuideImageContainer = styled(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) {
|
|
13084
|
-
return props.$isVisible ? '' : 'opacity: 0;';
|
|
13085
|
-
});
|
|
13086
|
-
var IdCardGuideImage = styled.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) {
|
|
13087
|
-
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
13088
|
-
});
|
|
13089
|
-
function IdCardBorder(_a) {
|
|
13090
|
-
var children = _a.children,
|
|
13091
|
-
_b = _a.status,
|
|
13092
|
-
status = _b === void 0 ? 'ready' : _b,
|
|
13093
|
-
_c = _a.borderWidth,
|
|
13094
|
-
borderWidth = _c === void 0 ? 20 : _c,
|
|
13095
|
-
_d = _a.borderRadius,
|
|
13096
|
-
borderRadius = _d === void 0 ? 25 : _d,
|
|
13097
|
-
_e = _a.borderColor,
|
|
13098
|
-
borderColor = _e === void 0 ? 'white' : _e,
|
|
13099
|
-
props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor"]);
|
|
13100
|
-
var dashArray = 12;
|
|
13101
|
-
var _f = useState(0),
|
|
13102
|
-
dashOffset = _f[0],
|
|
13103
|
-
setDashOffset = _f[1];
|
|
13104
|
-
useEffect(function () {
|
|
13105
|
-
if (status !== 'capturing') {
|
|
13106
|
-
setDashOffset(0);
|
|
13107
|
-
return;
|
|
13108
|
-
}
|
|
13109
|
-
var interval = setInterval(function () {
|
|
13110
|
-
setDashOffset(function (n) {
|
|
13111
|
-
return (n - 1) % (dashArray * 2);
|
|
13112
|
-
});
|
|
13113
|
-
}, 10);
|
|
13114
|
-
return function () {
|
|
13115
|
-
clearInterval(interval);
|
|
13116
|
-
};
|
|
13117
|
-
}, [status]);
|
|
13118
|
-
var _g = useState('0'),
|
|
13119
|
-
width = _g[0],
|
|
13120
|
-
setWidth = _g[1];
|
|
13121
|
-
useLayoutEffect(function () {
|
|
13122
|
-
setTimeout(function () {
|
|
13123
|
-
setWidth('100%');
|
|
13124
|
-
}, 0);
|
|
13125
|
-
}, []);
|
|
13126
|
-
return /*#__PURE__*/React__default.createElement("div", _assign({}, props), children, /*#__PURE__*/React__default.createElement(SvgOverlay, {
|
|
13127
|
-
width: width,
|
|
13128
|
-
height: "100%",
|
|
13129
|
-
fill: "none",
|
|
13130
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
13131
|
-
}, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
|
|
13132
|
-
id: "round-corner"
|
|
13133
|
-
}, /*#__PURE__*/React__default.createElement("rect", {
|
|
13134
|
-
x: "0",
|
|
13135
|
-
y: "0",
|
|
13136
|
-
width: "100%",
|
|
13137
|
-
height: "100%",
|
|
13138
|
-
rx: borderRadius,
|
|
13139
|
-
ry: borderRadius
|
|
13140
|
-
}))), /*#__PURE__*/React__default.createElement("rect", {
|
|
13141
|
-
x: "0",
|
|
13142
|
-
y: "0",
|
|
13143
|
-
width: "100%",
|
|
13144
|
-
height: "100%",
|
|
13145
|
-
rx: borderRadius,
|
|
13146
|
-
ry: borderRadius,
|
|
13147
|
-
stroke: borderColor,
|
|
13148
|
-
strokeWidth: borderWidth,
|
|
13149
|
-
clipPath: "url(#round-corner)",
|
|
13150
|
-
strokeDasharray: status === 'disabled' ? '0' : dashArray,
|
|
13151
|
-
strokeDashoffset: dashOffset
|
|
13152
|
-
})));
|
|
13153
|
-
}
|
|
13154
|
-
var SvgOverlay = styled.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"])));
|
|
13155
|
-
var templateObject_1$9, templateObject_2$8, templateObject_3$8;
|
|
13156
|
-
|
|
13157
12640
|
var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
13158
12641
|
var _b;
|
|
13159
|
-
var
|
|
13160
|
-
|
|
13161
|
-
|
|
13162
|
-
|
|
13163
|
-
borderWidth =
|
|
13164
|
-
|
|
12642
|
+
var className = _a.className,
|
|
12643
|
+
imageWidth = _a.imageWidth,
|
|
12644
|
+
imageHeight = _a.imageHeight,
|
|
12645
|
+
_c = _a.borderWidth,
|
|
12646
|
+
borderWidth = _c === void 0 ? 4 : _c,
|
|
12647
|
+
_d = _a.assets,
|
|
12648
|
+
assets = _d === void 0 ? {} : _d;
|
|
13165
12649
|
var cameraRef = useContext(CameraStateContext).cameraRef;
|
|
13166
|
-
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-
|
|
13167
|
-
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-
|
|
12650
|
+
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
|
|
12651
|
+
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
|
|
13168
12652
|
var isMirrored = !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing);
|
|
13169
12653
|
var _e = useState(1),
|
|
13170
12654
|
transitionTime = _e[0],
|
|
@@ -13193,36 +12677,39 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
|
13193
12677
|
clearTimeout(timeout);
|
|
13194
12678
|
};
|
|
13195
12679
|
}, []);
|
|
13196
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(
|
|
13197
|
-
|
|
13198
|
-
|
|
13199
|
-
|
|
13200
|
-
borderColor: borderColor,
|
|
12680
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FlipImage, {
|
|
12681
|
+
src: assets.frontImageUrl,
|
|
12682
|
+
alt: "",
|
|
12683
|
+
className: className,
|
|
13201
12684
|
"$transforms": frontTransforms.join(' '),
|
|
13202
12685
|
"$transitionTime": transitionTime,
|
|
13203
|
-
"$
|
|
13204
|
-
|
|
13205
|
-
|
|
13206
|
-
|
|
13207
|
-
|
|
13208
|
-
|
|
13209
|
-
className:
|
|
13210
|
-
status: "disabled",
|
|
13211
|
-
borderWidth: borderWidth,
|
|
13212
|
-
borderColor: borderColor,
|
|
12686
|
+
"$borderWidth": borderWidth,
|
|
12687
|
+
"$imageWidth": imageWidth,
|
|
12688
|
+
"$imageHeight": imageHeight
|
|
12689
|
+
}), /*#__PURE__*/React__default.createElement(FlipImage, {
|
|
12690
|
+
src: assets.backImageUrl,
|
|
12691
|
+
alt: "",
|
|
12692
|
+
className: className,
|
|
13213
12693
|
"$transforms": backTransforms.join(' '),
|
|
13214
12694
|
"$transitionTime": transitionTime,
|
|
13215
|
-
"$
|
|
13216
|
-
|
|
13217
|
-
|
|
13218
|
-
|
|
13219
|
-
|
|
13220
|
-
})));
|
|
12695
|
+
"$borderWidth": borderWidth,
|
|
12696
|
+
"$imageWidth": imageWidth,
|
|
12697
|
+
"$imageHeight": imageHeight,
|
|
12698
|
+
"$isBack": true
|
|
12699
|
+
}));
|
|
13221
12700
|
};
|
|
13222
|
-
var
|
|
12701
|
+
var FlipImage = styled.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) {
|
|
13223
12702
|
return props.$transitionTime;
|
|
13224
12703
|
}, function (props) {
|
|
13225
12704
|
return props.$transforms;
|
|
12705
|
+
}, function (props) {
|
|
12706
|
+
return props.$isBack ? 'absolute' : 'relative';
|
|
12707
|
+
}, function (props) {
|
|
12708
|
+
return -props.$borderWidth / 2;
|
|
12709
|
+
}, function (props) {
|
|
12710
|
+
return props.$imageWidth;
|
|
12711
|
+
}, function (props) {
|
|
12712
|
+
return props.$imageHeight + props.$borderWidth;
|
|
13226
12713
|
});
|
|
13227
12714
|
var templateObject_1$8;
|
|
13228
12715
|
|
|
@@ -13232,84 +12719,98 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
|
|
|
13232
12719
|
requestedAction = _y === void 0 ? 'SHOW_ID_FRONT' : _y,
|
|
13233
12720
|
_z = _a.satisfied,
|
|
13234
12721
|
satisfied = _z === void 0 ? false : _z,
|
|
13235
|
-
_0 = _a.faceGuideStatus,
|
|
13236
|
-
faceGuideStatus = _0 === void 0 ? 'success' : _0,
|
|
13237
12722
|
faceGuideBorderWidth = _a.faceGuideBorderWidth,
|
|
13238
12723
|
faceGuideBorderColor = _a.faceGuideBorderColor,
|
|
13239
|
-
_1 = _a.idCardGuideStatus,
|
|
13240
|
-
idCardGuideStatus = _1 === void 0 ? 'ready' : _1,
|
|
13241
12724
|
idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
|
|
13242
12725
|
idCardGuideBorderColor = _a.idCardGuideBorderColor,
|
|
13243
|
-
|
|
13244
|
-
assets =
|
|
13245
|
-
|
|
13246
|
-
classNames =
|
|
13247
|
-
|
|
13248
|
-
rawVerbiage =
|
|
12726
|
+
_0 = _a.assets,
|
|
12727
|
+
assets = _0 === void 0 ? {} : _0,
|
|
12728
|
+
_1 = _a.classNames,
|
|
12729
|
+
classNames = _1 === void 0 ? {} : _1,
|
|
12730
|
+
_2 = _a.verbiage,
|
|
12731
|
+
rawVerbiage = _2 === void 0 ? {} : _2;
|
|
13249
12732
|
var cameraRef = useContext(CameraStateContext).cameraRef;
|
|
13250
12733
|
var imageRef = useRef(null);
|
|
13251
|
-
|
|
13252
|
-
|
|
12734
|
+
var _3 = useState(0),
|
|
12735
|
+
imageWidth = _3[0],
|
|
12736
|
+
setImageWidth = _3[1];
|
|
12737
|
+
var _4 = useState(0),
|
|
12738
|
+
imageHeight = _4[0],
|
|
12739
|
+
setImageHeight = _4[1];
|
|
12740
|
+
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
|
|
12741
|
+
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
|
|
13253
12742
|
var verbiage = useTranslations(rawVerbiage, {
|
|
13254
12743
|
idFrontInstructionText: 'Display the front of your ID card...',
|
|
13255
12744
|
idBackInstructionText: 'Display the back of your ID card...',
|
|
13256
|
-
flipIdInstructionText: 'Please flip your ID card...'
|
|
13257
|
-
verifyLivenessInstructionText: 'Performing facial recognition, please hold still...'
|
|
12745
|
+
flipIdInstructionText: 'Please flip your ID card...'
|
|
13258
12746
|
});
|
|
13259
|
-
var instructionText = requestedAction === '
|
|
12747
|
+
var instructionText = requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : requestedAction === 'FLIP_ID' ? verbiage.flipIdInstructionText : verbiage.idBackInstructionText;
|
|
13260
12748
|
var theme = useTheme();
|
|
13261
|
-
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 :
|
|
13262
|
-
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 : '
|
|
13263
|
-
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 :
|
|
13264
|
-
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 : '
|
|
12749
|
+
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;
|
|
12750
|
+
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';
|
|
12751
|
+
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;
|
|
12752
|
+
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';
|
|
12753
|
+
var captureImageSize = function captureImageSize() {
|
|
12754
|
+
var _a, _b, _c, _d;
|
|
12755
|
+
if (!imageWidth) setImageWidth((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0);
|
|
12756
|
+
if (!imageHeight) setImageHeight((_d = (_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0);
|
|
12757
|
+
};
|
|
13265
12758
|
return /*#__PURE__*/React__default.createElement(Container, {
|
|
13266
12759
|
className: classNames.container
|
|
13267
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
13268
|
-
className: classNames.faceGuideContainer
|
|
13269
|
-
}, /*#__PURE__*/React__default.createElement(StyledSelfieCaptureAnimatedMask, {
|
|
12760
|
+
}, /*#__PURE__*/React__default.createElement(FaceGuide, {
|
|
13270
12761
|
className: classNames.faceGuide,
|
|
13271
|
-
|
|
13272
|
-
|
|
13273
|
-
|
|
13274
|
-
})), /*#__PURE__*/React__default.createElement(IdCardGuideContainer, {
|
|
12762
|
+
"$borderWidth": faceGuideBorderWidth,
|
|
12763
|
+
"$borderColor": faceGuideBorderColor
|
|
12764
|
+
}), /*#__PURE__*/React__default.createElement(IdCardGuideContainer, {
|
|
13275
12765
|
className: classNames.idCardGuideContainer
|
|
13276
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
13277
|
-
className: classNames.idCardGuideInner
|
|
13278
|
-
}, /*#__PURE__*/React__default.createElement(IdCardGuideImageContainer, {
|
|
13279
|
-
className: classNames.idCardGuideImageContainer,
|
|
13280
|
-
status: requestedAction === 'VERIFY_LIVENESS' ? 'disabled' : idCardGuideStatus,
|
|
13281
|
-
borderWidth: idCardGuideBorderWidth,
|
|
13282
|
-
borderColor: idCardGuideBorderColor,
|
|
13283
|
-
"$isVisible": requestedAction !== 'FLIP_ID'
|
|
13284
|
-
}, /*#__PURE__*/React__default.createElement(IdCardGuideImage, {
|
|
13285
|
-
alt: "",
|
|
13286
|
-
ref: imageRef,
|
|
13287
|
-
className: classNames.idCardGuideImage,
|
|
13288
|
-
"$isMirrored": !((_t = cameraRef.current) === null || _t === void 0 ? void 0 : _t.isRearFacing),
|
|
13289
|
-
src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl
|
|
13290
|
-
})), requestedAction === 'FLIP_ID' && ( /*#__PURE__*/React__default.createElement(IdVideoCaptureFlipIdPrompt, {
|
|
13291
|
-
assets: assets,
|
|
13292
|
-
classNames: classNames.flipIdPrompt,
|
|
13293
|
-
borderWidth: idCardGuideBorderWidth,
|
|
13294
|
-
borderColor: idCardGuideBorderColor
|
|
13295
|
-
}))), /*#__PURE__*/React__default.createElement(IdCardGuideInstructionsContainer, {
|
|
12766
|
+
}, /*#__PURE__*/React__default.createElement(IdCardGuideInstructionsContainer, {
|
|
13296
12767
|
className: classNames.idCardGuideInstructionsContainer
|
|
13297
12768
|
}, /*#__PURE__*/React__default.createElement(IdCardGuideInstructions, {
|
|
13298
12769
|
className: classNames.idCardGuideInstructions,
|
|
13299
|
-
"$textColor": (
|
|
13300
|
-
"$background": (
|
|
13301
|
-
}, instructionText))
|
|
12770
|
+
"$textColor": (_u = (_t = theme.idVideoCapture) === null || _t === void 0 ? void 0 : _t.idCardGuides) === null || _u === void 0 ? void 0 : _u.instructionsTextColor,
|
|
12771
|
+
"$background": (_w = (_v = theme.idVideoCapture) === null || _v === void 0 ? void 0 : _v.idCardGuides) === null || _w === void 0 ? void 0 : _w.instructionsBackgroundColor
|
|
12772
|
+
}, instructionText)), /*#__PURE__*/React__default.createElement(IdCardGuideImageContainer, {
|
|
12773
|
+
"$borderWidth": idCardGuideBorderWidth,
|
|
12774
|
+
"$borderColor": idCardGuideBorderColor,
|
|
12775
|
+
className: classNames.idCardGuideImageContainer
|
|
12776
|
+
}, requestedAction === 'FLIP_ID' ? ( /*#__PURE__*/React__default.createElement(IdVideoCaptureFlipIdPrompt, {
|
|
12777
|
+
assets: assets,
|
|
12778
|
+
imageWidth: imageWidth,
|
|
12779
|
+
imageHeight: imageHeight,
|
|
12780
|
+
borderWidth: idCardGuideBorderWidth,
|
|
12781
|
+
className: classNames.flipIdPromptImage
|
|
12782
|
+
})) : ( /*#__PURE__*/React__default.createElement(IdCardGuideImage, {
|
|
12783
|
+
ref: imageRef,
|
|
12784
|
+
src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl,
|
|
12785
|
+
alt: "",
|
|
12786
|
+
className: classNames.idCardGuideImage,
|
|
12787
|
+
"$isMirrored": !((_x = cameraRef.current) === null || _x === void 0 ? void 0 : _x.isRearFacing),
|
|
12788
|
+
onLoad: captureImageSize,
|
|
12789
|
+
onResize: captureImageSize
|
|
12790
|
+
})))));
|
|
13302
12791
|
};
|
|
13303
|
-
var Container = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n
|
|
12792
|
+
var Container = styled.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) {
|
|
13304
12793
|
var _a;
|
|
13305
12794
|
return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
|
|
13306
12795
|
});
|
|
13307
|
-
var
|
|
13308
|
-
var
|
|
13309
|
-
|
|
13310
|
-
|
|
13311
|
-
var
|
|
13312
|
-
|
|
12796
|
+
var FaceGuide = styled.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) {
|
|
12797
|
+
var _a;
|
|
12798
|
+
return (_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 0;
|
|
12799
|
+
}, function (props) {
|
|
12800
|
+
var _a;
|
|
12801
|
+
return (_a = props.$borderColor) !== null && _a !== void 0 ? _a : 'white';
|
|
12802
|
+
});
|
|
12803
|
+
var IdCardGuideContainer = styled.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"])));
|
|
12804
|
+
var IdCardGuideInstructionsContainer = styled.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"])));
|
|
12805
|
+
var IdCardGuideInstructions = styled(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"])));
|
|
12806
|
+
var IdCardGuideImageContainer = styled.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) {
|
|
12807
|
+
return props.$borderWidth;
|
|
12808
|
+
}, function (props) {
|
|
12809
|
+
return props.$borderColor;
|
|
12810
|
+
});
|
|
12811
|
+
var IdCardGuideImage = styled.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) {
|
|
12812
|
+
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
12813
|
+
});
|
|
13313
12814
|
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7;
|
|
13314
12815
|
|
|
13315
12816
|
var ReadTextPrompt = function ReadTextPrompt(_a) {
|
|
@@ -13400,7 +12901,7 @@ var ReadTextPromptText = styled.div(templateObject_3$6 || (templateObject_3$6 =
|
|
|
13400
12901
|
var _a, _b, _c, _d, _e, _f;
|
|
13401
12902
|
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, ";") : "";
|
|
13402
12903
|
});
|
|
13403
|
-
var ReadTextPromptButtonsRow = styled(ButtonsRow
|
|
12904
|
+
var ReadTextPromptButtonsRow = styled(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"])));
|
|
13404
12905
|
var ReadTextPromptTimeRemaining = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 20px;\n\n ", ";\n ", ";\n ", ";\n"], ["\n padding: 20px;\n\n ", ";\n ", ";\n ", ";\n"])), function (props) {
|
|
13405
12906
|
var _a, _b, _c, _d, _e, _f;
|
|
13406
12907
|
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, ";") : "";
|
|
@@ -13417,8 +12918,8 @@ var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4
|
|
|
13417
12918
|
var edgeBoundary = 0.05;
|
|
13418
12919
|
var defaultVideoIdCaptureThresholds = {
|
|
13419
12920
|
detection: {
|
|
13420
|
-
idCardFront: 0.
|
|
13421
|
-
idCardBack: 0.
|
|
12921
|
+
idCardFront: 0.6,
|
|
12922
|
+
idCardBack: 0.6,
|
|
13422
12923
|
passport: 1
|
|
13423
12924
|
},
|
|
13424
12925
|
focus: {
|
|
@@ -13755,10 +13256,12 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13755
13256
|
var theme = useTheme();
|
|
13756
13257
|
var _30 = useTranslations(rawVerbiage, {
|
|
13757
13258
|
faceNotCenteredText: 'Please move your face to the center...',
|
|
13259
|
+
searchingForIdCardText: 'Searching for ID card...',
|
|
13758
13260
|
captureBtnText: 'Capture'
|
|
13759
13261
|
}),
|
|
13760
13262
|
captureBtnText = _30.captureBtnText,
|
|
13761
|
-
faceNotCenteredText = _30.faceNotCenteredText
|
|
13263
|
+
faceNotCenteredText = _30.faceNotCenteredText,
|
|
13264
|
+
searchingForIdCardText = _30.searchingForIdCardText;
|
|
13762
13265
|
var debugScalingDetails = useDebugScalingDetails({
|
|
13763
13266
|
enabled: debugMode,
|
|
13764
13267
|
pageWidth: width,
|
|
@@ -13767,9 +13270,8 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13767
13270
|
videoHeight: (_k = (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.videoHeight) !== null && _k !== void 0 ? _k : 0
|
|
13768
13271
|
});
|
|
13769
13272
|
var capturingId = ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction);
|
|
13770
|
-
|
|
13771
|
-
|
|
13772
|
-
var guidanceText = !faceCentered ? faceNotCenteredText : undefined;
|
|
13273
|
+
var searchingForIdCard = idCaptureModelsEnabled && capturingId && !goodFramesThresholdMet;
|
|
13274
|
+
var guidanceText = !faceCentered ? faceNotCenteredText : searchingForIdCard ? searchingForIdCardText : undefined;
|
|
13773
13275
|
return /*#__PURE__*/React__default.createElement(PageContainer, {
|
|
13774
13276
|
ref: ref,
|
|
13775
13277
|
className: "flex ".concat((_l = classNames.container) !== null && _l !== void 0 ? _l : '')
|
|
@@ -13789,7 +13291,6 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13789
13291
|
verbiage: rawVerbiage.guides,
|
|
13790
13292
|
requestedAction: requestedAction,
|
|
13791
13293
|
satisfied: satisfied,
|
|
13792
|
-
idCardGuideStatus: countdownStartedAt ? 'capturing' : 'ready',
|
|
13793
13294
|
faceGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor,
|
|
13794
13295
|
idCardGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
|
|
13795
13296
|
}), debugMode && capturingId && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ObjectDetectionDebugOverlayDiv, {
|
|
@@ -13937,7 +13438,7 @@ var IdVideoCaptureSuccess = function IdVideoCaptureSuccess(_a) {
|
|
|
13937
13438
|
})) : ( /*#__PURE__*/React__default.createElement("img", {
|
|
13938
13439
|
src: idBackImageUrl,
|
|
13939
13440
|
alt: "ID Back Image"
|
|
13940
|
-
}))), /*#__PURE__*/React__default.createElement(ButtonsRow
|
|
13441
|
+
}))), /*#__PURE__*/React__default.createElement(ButtonsRow, {
|
|
13941
13442
|
className: classNames.buttonsRow
|
|
13942
13443
|
}, /*#__PURE__*/React__default.createElement(LoaderButton, {
|
|
13943
13444
|
variant: "warning",
|
|
@@ -13959,7 +13460,7 @@ var AssetSelectorOption = styled.div(templateObject_3$4 || (templateObject_3$4 =
|
|
|
13959
13460
|
var templateObject_1$4, templateObject_2$4, templateObject_3$4;
|
|
13960
13461
|
|
|
13961
13462
|
var VideoIdWizard = function VideoIdWizard(_a) {
|
|
13962
|
-
var _b, _c, _d, _e, _f
|
|
13463
|
+
var _b, _c, _d, _e, _f;
|
|
13963
13464
|
var onComplete = _a.onComplete,
|
|
13964
13465
|
onExitCapture = _a.onExitCapture,
|
|
13965
13466
|
onExitAfterFailure = _a.onExitAfterFailure,
|
|
@@ -13967,66 +13468,66 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
13967
13468
|
onIdCaptureModelError = _a.onIdCaptureModelError,
|
|
13968
13469
|
onCameraAccessDenied = _a.onCameraAccessDenied,
|
|
13969
13470
|
onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
|
|
13970
|
-
|
|
13971
|
-
idCaptureProps =
|
|
13972
|
-
|
|
13973
|
-
faceLivenessProps =
|
|
13974
|
-
|
|
13975
|
-
idCaptureModelsEnabled =
|
|
13976
|
-
|
|
13977
|
-
videoIdCaptureThresholds =
|
|
13471
|
+
_g = _a.idCaptureProps,
|
|
13472
|
+
idCaptureProps = _g === void 0 ? {} : _g,
|
|
13473
|
+
_h = _a.faceLivenessProps,
|
|
13474
|
+
faceLivenessProps = _h === void 0 ? {} : _h,
|
|
13475
|
+
_j = _a.idCaptureModelsEnabled,
|
|
13476
|
+
idCaptureModelsEnabled = _j === void 0 ? true : _j,
|
|
13477
|
+
_k = _a.videoIdCaptureThresholds,
|
|
13478
|
+
videoIdCaptureThresholds = _k === void 0 ? defaultVideoIdCaptureThresholds : _k,
|
|
13978
13479
|
readTextPrompt = _a.readTextPrompt,
|
|
13979
13480
|
readTextTimeoutDurationMs = _a.readTextTimeoutDurationMs,
|
|
13980
13481
|
readTextMinReadingMs = _a.readTextMinReadingMs,
|
|
13981
|
-
|
|
13982
|
-
skipIdCapture =
|
|
13983
|
-
|
|
13984
|
-
skipShowIdCardBack =
|
|
13985
|
-
|
|
13986
|
-
skipSuccessScreen =
|
|
13987
|
-
|
|
13988
|
-
idCaptureLoadingOverlayMode =
|
|
13989
|
-
|
|
13990
|
-
idCaptureGuideType =
|
|
13991
|
-
|
|
13992
|
-
idCapturePortraitGuidesOnMobile =
|
|
13993
|
-
|
|
13994
|
-
idCaptureRotateLoadingOverlayImageWhenPortrait =
|
|
13995
|
-
|
|
13996
|
-
idCaptureModelLoadTimeoutMs =
|
|
13997
|
-
|
|
13998
|
-
faceLivenessLoadingOverlayMode =
|
|
13999
|
-
|
|
14000
|
-
disableFaceDetectionWhileAudioCapture =
|
|
14001
|
-
|
|
14002
|
-
disableFaceDetectionWhileAudioCaptureMsDelay =
|
|
14003
|
-
|
|
14004
|
-
silentFallback =
|
|
14005
|
-
|
|
14006
|
-
mergeAVStreams =
|
|
14007
|
-
|
|
14008
|
-
assets =
|
|
14009
|
-
|
|
14010
|
-
classNames =
|
|
14011
|
-
|
|
14012
|
-
colors =
|
|
14013
|
-
|
|
14014
|
-
verbiage =
|
|
14015
|
-
|
|
14016
|
-
debugMode =
|
|
14017
|
-
var
|
|
14018
|
-
submissionStatus =
|
|
14019
|
-
idCaptureVideoUrl =
|
|
14020
|
-
idCaptureVideoAudioUrl =
|
|
14021
|
-
idCaptureVideoIdFrontImage =
|
|
14022
|
-
idCaptureVideoIdBackImage =
|
|
14023
|
-
setIdCaptureVideoUrl =
|
|
14024
|
-
setIdCaptureVideoIdFrontImage =
|
|
14025
|
-
setIdCaptureVideoIdBackImage =
|
|
14026
|
-
setIdCaptureVideoAudioUrl =
|
|
14027
|
-
var
|
|
14028
|
-
captureState =
|
|
14029
|
-
setCaptureState =
|
|
13482
|
+
_l = _a.skipIdCapture,
|
|
13483
|
+
skipIdCapture = _l === void 0 ? false : _l,
|
|
13484
|
+
_m = _a.skipShowIdCardBack,
|
|
13485
|
+
skipShowIdCardBack = _m === void 0 ? false : _m,
|
|
13486
|
+
_o = _a.skipSuccessScreen,
|
|
13487
|
+
skipSuccessScreen = _o === void 0 ? false : _o,
|
|
13488
|
+
_p = _a.idCaptureLoadingOverlayMode,
|
|
13489
|
+
idCaptureLoadingOverlayMode = _p === void 0 ? 'default' : _p,
|
|
13490
|
+
_q = _a.idCaptureGuideType,
|
|
13491
|
+
idCaptureGuideType = _q === void 0 ? 'fit' : _q,
|
|
13492
|
+
_r = _a.idCapturePortraitGuidesOnMobile,
|
|
13493
|
+
idCapturePortraitGuidesOnMobile = _r === void 0 ? true : _r,
|
|
13494
|
+
_s = _a.idCaptureRotateLoadingOverlayImageWhenPortrait,
|
|
13495
|
+
idCaptureRotateLoadingOverlayImageWhenPortrait = _s === void 0 ? true : _s,
|
|
13496
|
+
_t = _a.idCaptureModelLoadTimeoutMs,
|
|
13497
|
+
idCaptureModelLoadTimeoutMs = _t === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _t,
|
|
13498
|
+
_u = _a.faceLivenessLoadingOverlayMode,
|
|
13499
|
+
faceLivenessLoadingOverlayMode = _u === void 0 ? 'default' : _u,
|
|
13500
|
+
_v = _a.disableFaceDetectionWhileAudioCapture,
|
|
13501
|
+
disableFaceDetectionWhileAudioCapture = _v === void 0 ? true : _v,
|
|
13502
|
+
_w = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
|
|
13503
|
+
disableFaceDetectionWhileAudioCaptureMsDelay = _w === void 0 ? 2000 : _w,
|
|
13504
|
+
_x = _a.silentFallback,
|
|
13505
|
+
silentFallback = _x === void 0 ? false : _x,
|
|
13506
|
+
_y = _a.mergeAVStreams,
|
|
13507
|
+
mergeAVStreams = _y === void 0 ? false : _y,
|
|
13508
|
+
_z = _a.assets,
|
|
13509
|
+
assets = _z === void 0 ? {} : _z,
|
|
13510
|
+
_0 = _a.classNames,
|
|
13511
|
+
classNames = _0 === void 0 ? {} : _0,
|
|
13512
|
+
_1 = _a.colors,
|
|
13513
|
+
colors = _1 === void 0 ? {} : _1,
|
|
13514
|
+
_2 = _a.verbiage,
|
|
13515
|
+
verbiage = _2 === void 0 ? {} : _2,
|
|
13516
|
+
_3 = _a.debugMode,
|
|
13517
|
+
debugMode = _3 === void 0 ? false : _3;
|
|
13518
|
+
var _4 = useContext(SubmissionContext),
|
|
13519
|
+
submissionStatus = _4.submissionStatus,
|
|
13520
|
+
idCaptureVideoUrl = _4.idCaptureVideoUrl,
|
|
13521
|
+
idCaptureVideoAudioUrl = _4.idCaptureVideoAudioUrl,
|
|
13522
|
+
idCaptureVideoIdFrontImage = _4.idCaptureVideoIdFrontImage,
|
|
13523
|
+
idCaptureVideoIdBackImage = _4.idCaptureVideoIdBackImage,
|
|
13524
|
+
setIdCaptureVideoUrl = _4.setIdCaptureVideoUrl,
|
|
13525
|
+
setIdCaptureVideoIdFrontImage = _4.setIdCaptureVideoIdFrontImage,
|
|
13526
|
+
setIdCaptureVideoIdBackImage = _4.setIdCaptureVideoIdBackImage,
|
|
13527
|
+
setIdCaptureVideoAudioUrl = _4.setIdCaptureVideoAudioUrl;
|
|
13528
|
+
var _5 = useState('CAPTURING_ID'),
|
|
13529
|
+
captureState = _5[0],
|
|
13530
|
+
setCaptureState = _5[1];
|
|
14030
13531
|
useEffect(function () {
|
|
14031
13532
|
if (skipIdCapture && captureState === 'CAPTURING_ID') setCaptureState('CHECKING_LIVENESS');
|
|
14032
13533
|
}, [captureState, skipIdCapture]);
|
|
@@ -14057,9 +13558,9 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14057
13558
|
var onVideoCaptureFaceNotDetected = useCallback(function () {
|
|
14058
13559
|
setCaptureState('CHECKING_LIVENESS');
|
|
14059
13560
|
}, []);
|
|
14060
|
-
var
|
|
14061
|
-
attempt =
|
|
14062
|
-
setAttempt =
|
|
13561
|
+
var _6 = useState(0),
|
|
13562
|
+
attempt = _6[0],
|
|
13563
|
+
setAttempt = _6[1];
|
|
14063
13564
|
var userSuppliedExitAfterFailure = onExitAfterFailure !== null && onExitAfterFailure !== void 0 ? onExitAfterFailure : faceLivenessProps.onExitAfterFailure;
|
|
14064
13565
|
var onFaceCaptureExitAfterFailure = useCallback(function (resp, req) {
|
|
14065
13566
|
userSuppliedExitAfterFailure === null || userSuppliedExitAfterFailure === void 0 ? void 0 : userSuppliedExitAfterFailure(resp, req);
|
|
@@ -14090,19 +13591,6 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14090
13591
|
});
|
|
14091
13592
|
onExitCapture === null || onExitCapture === void 0 ? void 0 : onExitCapture();
|
|
14092
13593
|
}, [onExitCapture]);
|
|
14093
|
-
var faceLivenessGuides = useCallback(function (_a) {
|
|
14094
|
-
var _b, _c, _d, _e, _f;
|
|
14095
|
-
var status = _a.status;
|
|
14096
|
-
return /*#__PURE__*/React__default.createElement(IdVideoCaptureGuides, {
|
|
14097
|
-
assets: (_b = assets.idVideoCapture) === null || _b === void 0 ? void 0 : _b.guides,
|
|
14098
|
-
classNames: (_c = classNames.idVideoCapture) === null || _c === void 0 ? void 0 : _c.guides,
|
|
14099
|
-
verbiage: (_d = verbiage.idVideoCapture) === null || _d === void 0 ? void 0 : _d.guides,
|
|
14100
|
-
requestedAction: "VERIFY_LIVENESS",
|
|
14101
|
-
faceGuideStatus: status,
|
|
14102
|
-
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,
|
|
14103
|
-
idCardGuideStatus: "disabled"
|
|
14104
|
-
});
|
|
14105
|
-
}, [(_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]);
|
|
14106
13594
|
if (submissionStatus === SubmissionStatus.SUBMITTING) {
|
|
14107
13595
|
return /*#__PURE__*/React__default.createElement(PageContainer, {
|
|
14108
13596
|
className: "flex"
|
|
@@ -14120,8 +13608,8 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14120
13608
|
debugMode: debugMode
|
|
14121
13609
|
}, /*#__PURE__*/React__default.createElement(IdCaptureModelsProvider, {
|
|
14122
13610
|
autoStart: false,
|
|
14123
|
-
documentDetectionModelUrl: (
|
|
14124
|
-
focusModelUrl: (
|
|
13611
|
+
documentDetectionModelUrl: (_c = (_b = idCaptureProps.assets) === null || _b === void 0 ? void 0 : _b.documentDetectionModelUrl) !== null && _c !== void 0 ? _c : '',
|
|
13612
|
+
focusModelUrl: (_e = (_d = idCaptureProps.assets) === null || _d === void 0 ? void 0 : _d.focusModelUrl) !== null && _e !== void 0 ? _e : '',
|
|
14125
13613
|
onModelError: onIdCaptureModelError,
|
|
14126
13614
|
modelLoadTimeoutMs: idCaptureModelLoadTimeoutMs
|
|
14127
13615
|
}, /*#__PURE__*/React__default.createElement(SelfieGuidanceModelsProvider, {
|
|
@@ -14129,7 +13617,7 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14129
13617
|
onModelError: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.onModelError,
|
|
14130
13618
|
modelLoadTimeoutMs: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.modelLoadTimeoutMs
|
|
14131
13619
|
}, /*#__PURE__*/React__default.createElement(PageContainer, {
|
|
14132
|
-
className: "flex ".concat((
|
|
13620
|
+
className: "flex ".concat((_f = classNames.container) !== null && _f !== void 0 ? _f : '')
|
|
14133
13621
|
}, ['CHECKING_LIVENESS', 'CAPTURING_VIDEO'].includes(captureState) && /*#__PURE__*/React__default.createElement(CameraVideoTag, {
|
|
14134
13622
|
className: classNames.cameraFeed
|
|
14135
13623
|
}), function () {
|
|
@@ -14167,9 +13655,6 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14167
13655
|
skipSuccessScreen: true,
|
|
14168
13656
|
renderCameraFeed: false,
|
|
14169
13657
|
releaseCameraAccessOnExit: false,
|
|
14170
|
-
disableCapturePreview: !debugMode,
|
|
14171
|
-
requireVerticalFaceCentering: false,
|
|
14172
|
-
guidesComponent: faceLivenessGuides,
|
|
14173
13658
|
assets: assets.faceLiveness,
|
|
14174
13659
|
classNames: classNames.faceLiveness,
|
|
14175
13660
|
colors: colors.faceLiveness,
|
|
@@ -15657,8 +15142,8 @@ var CustomerVerificationSuccess = function CustomerVerificationSuccess(_a) {
|
|
|
15657
15142
|
}, verbiage.doneBtnText))));
|
|
15658
15143
|
};
|
|
15659
15144
|
var Heading$3 = styled.h3(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
15660
|
-
var ImageContainer$3 = styled(ButtonsRow
|
|
15661
|
-
var StyledButtonsRow$3 = styled(ButtonsRow
|
|
15145
|
+
var ImageContainer$3 = styled(ButtonsRow)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
15146
|
+
var StyledButtonsRow$3 = styled(ButtonsRow)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
15662
15147
|
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
15663
15148
|
|
|
15664
15149
|
var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
|
|
@@ -15709,8 +15194,8 @@ var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
|
|
|
15709
15194
|
}, verbiage.exitBtnText))));
|
|
15710
15195
|
};
|
|
15711
15196
|
var Heading$2 = styled.h3(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
15712
|
-
var ImageContainer$2 = styled(ButtonsRow
|
|
15713
|
-
var StyledButtonsRow$2 = styled(ButtonsRow
|
|
15197
|
+
var ImageContainer$2 = styled(ButtonsRow)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
15198
|
+
var StyledButtonsRow$2 = styled(ButtonsRow)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
15714
15199
|
var templateObject_1$2, templateObject_2$2, templateObject_3$2;
|
|
15715
15200
|
|
|
15716
15201
|
var ALLOWED_RETRIES$2 = 2;
|
|
@@ -16215,8 +15700,8 @@ var CustomerIdentificationSuccess = function CustomerIdentificationSuccess(_a) {
|
|
|
16215
15700
|
}, verbiage.doneBtnText))));
|
|
16216
15701
|
};
|
|
16217
15702
|
var Heading$1 = styled.h3(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
16218
|
-
var ImageContainer$1 = styled(ButtonsRow
|
|
16219
|
-
var StyledButtonsRow$1 = styled(ButtonsRow
|
|
15703
|
+
var ImageContainer$1 = styled(ButtonsRow)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
15704
|
+
var StyledButtonsRow$1 = styled(ButtonsRow)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
16220
15705
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1;
|
|
16221
15706
|
|
|
16222
15707
|
var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
|
|
@@ -16267,8 +15752,8 @@ var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
|
|
|
16267
15752
|
}, verbiage.exitBtnText))));
|
|
16268
15753
|
};
|
|
16269
15754
|
var Heading = styled.h3(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
16270
|
-
var ImageContainer = styled(ButtonsRow
|
|
16271
|
-
var StyledButtonsRow = styled(ButtonsRow
|
|
15755
|
+
var ImageContainer = styled(ButtonsRow)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
15756
|
+
var StyledButtonsRow = styled(ButtonsRow)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
16272
15757
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
16273
15758
|
|
|
16274
15759
|
var ALLOWED_RETRIES = 2;
|