idmission-web-sdk 2.3.3 → 2.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/components/common/debug.d.ts +1 -3
  2. package/dist/components/common/debug.d.ts.map +1 -1
  3. package/dist/components/common/signature.d.ts.map +1 -1
  4. package/dist/components/customer_flows/SignatureKYC.d.ts +2 -0
  5. package/dist/components/customer_flows/SignatureKYC.d.ts.map +1 -1
  6. package/dist/components/face_liveness/FaceLivenessWizard.d.ts +2 -1
  7. package/dist/components/face_liveness/FaceLivenessWizard.d.ts.map +1 -1
  8. package/dist/components/id_capture/IdCapture.d.ts.map +1 -1
  9. package/dist/components/selfie_capture/SelfieCapture.d.ts.map +1 -1
  10. package/dist/components/selfie_capture/SelfieGuidanceModelsProvider.d.ts.map +1 -1
  11. package/dist/components/video_id/IdVideoCapture.d.ts.map +1 -1
  12. package/dist/components/video_signature_capture/VideoSignatureCapture.d.ts +2 -1
  13. package/dist/components/video_signature_capture/VideoSignatureCapture.d.ts.map +1 -1
  14. package/dist/components/video_signature_capture/VideoSignatureGuides.d.ts +4 -1
  15. package/dist/components/video_signature_capture/VideoSignatureGuides.d.ts.map +1 -1
  16. package/dist/components/video_signature_capture/VideoSignatureWizard.d.ts +2 -1
  17. package/dist/components/video_signature_capture/VideoSignatureWizard.d.ts.map +1 -1
  18. package/dist/lib/camera/cameraStore.d.ts +2 -0
  19. package/dist/lib/camera/cameraStore.d.ts.map +1 -1
  20. package/dist/sdk2.cjs.development.js +456 -374
  21. package/dist/sdk2.cjs.development.js.map +1 -1
  22. package/dist/sdk2.cjs.production.js +1 -1
  23. package/dist/sdk2.cjs.production.js.map +1 -1
  24. package/dist/sdk2.esm.js +456 -374
  25. package/dist/sdk2.esm.js.map +1 -1
  26. package/dist/sdk2.umd.development.js +456 -374
  27. package/dist/sdk2.umd.development.js.map +1 -1
  28. package/dist/sdk2.umd.production.js +1 -1
  29. package/dist/sdk2.umd.production.js.map +1 -1
  30. package/dist/themes/index.d.ts +3 -0
  31. package/dist/themes/index.d.ts.map +1 -1
  32. package/dist/version.d.ts +1 -1
  33. package/package.json +3 -3
@@ -211,7 +211,7 @@
211
211
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
212
212
  };
213
213
 
214
- var webSdkVersion = '2.3.3';
214
+ var webSdkVersion = '2.3.5';
215
215
 
216
216
  function getPlatform() {
217
217
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -431,18 +431,18 @@
431
431
  className: "ladda-label"
432
432
  }, children));
433
433
  };
434
- var StyledButton = styled.button(templateObject_1$P || (templateObject_1$P = __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\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\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) {
434
+ var StyledButton = styled.button(templateObject_1$Q || (templateObject_1$Q = __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\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\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) {
435
435
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
436
436
  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 ");
437
437
  });
438
- var templateObject_1$P;
438
+ var templateObject_1$Q;
439
439
 
440
- var ButtonsRow$2 = styled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n text-align: left;\n"], ["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n text-align: left;\n"])));
441
- var templateObject_1$O;
440
+ var ButtonsRow$2 = styled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n text-align: left;\n"], ["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n text-align: left;\n"])));
441
+ var templateObject_1$P;
442
442
 
443
- var GuidanceMessageContainerDiv = styled.div(templateObject_1$N || (templateObject_1$N = __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) {
443
+ var GuidanceMessageContainerDiv = styled.div(templateObject_1$O || (templateObject_1$O = __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) {
444
444
  var $top = _a.$top;
445
- return $top !== null && $top !== void 0 ? $top : '10vh';
445
+ return $top !== null && $top !== void 0 ? $top : '10%';
446
446
  }, function (_a) {
447
447
  var $bottom = _a.$bottom;
448
448
  return $bottom ? "bottom: ".concat($bottom, ";") : "";
@@ -460,15 +460,15 @@
460
460
  var _a, _b, _c, _d, _e, _f;
461
461
  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';
462
462
  });
463
- var templateObject_1$N, templateObject_2$F;
463
+ var templateObject_1$O, templateObject_2$F;
464
464
 
465
- var wavesAnimation = styled.keyframes(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n 0% {\n opacity: 0;\n transform: scale3d(1, 1, 1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale3d(2, 2, 1);\n opacity: 0;\n }\n"], ["\n 0% {\n opacity: 0;\n transform: scale3d(1, 1, 1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale3d(2, 2, 1);\n opacity: 0;\n }\n"])));
465
+ var wavesAnimation = styled.keyframes(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n 0% {\n opacity: 0;\n transform: scale3d(1, 1, 1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale3d(2, 2, 1);\n opacity: 0;\n }\n"], ["\n 0% {\n opacity: 0;\n transform: scale3d(1, 1, 1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale3d(2, 2, 1);\n opacity: 0;\n }\n"])));
466
466
  var progressBarAnimation = styled.keyframes(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n 0% {\n width: 0;\n }\n 100% {\n width: 100%;\n }\n"], ["\n 0% {\n width: 0;\n }\n 100% {\n width: 100%;\n }\n"])));
467
467
  var dualRingSpinnerAnimation = styled.keyframes(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"], ["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
468
468
  var progressBorderAnimation = styled.keyframes(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n to {\n stroke-dashoffset: 0;\n }\n"], ["\n to {\n stroke-dashoffset: 0;\n }\n"])));
469
- var templateObject_1$M, templateObject_2$E, templateObject_3$s, templateObject_4$m;
469
+ var templateObject_1$N, templateObject_2$E, templateObject_3$s, templateObject_4$m;
470
470
 
471
- var OverlayContainer = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: column;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n background: ", ";\n ", "\n\n z-index: 10000;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: column;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n background: ", ";\n ", "\n\n z-index: 10000;\n"])), function (props) {
471
+ var OverlayContainer = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: column;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n background: ", ";\n ", "\n\n z-index: 10000;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: column;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n background: ", ";\n ", "\n\n z-index: 10000;\n"])), function (props) {
472
472
  return props.theme.background ? "".concat(props.theme.background) : "white";
473
473
  }, function (props) {
474
474
  return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
@@ -513,7 +513,7 @@
513
513
  var LoadingOverlayLoadingList = styled.ul(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n display: block;\n margin: auto;\n list-style: none;\n padding: 0;\n"], ["\n display: block;\n margin: auto;\n list-style: none;\n padding: 0;\n"])));
514
514
  var LoadingOverlayLoadingListItem = styled.li(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 2px 1.25rem 2px 0;\n line-height: 1rem;\n"], ["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 2px 1.25rem 2px 0;\n line-height: 1rem;\n"])));
515
515
  var LoadingOverlayProgressContainer = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
516
- var templateObject_1$L, templateObject_2$D, templateObject_3$r, templateObject_4$l, templateObject_5$e, templateObject_6$a, templateObject_7$7, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
516
+ var templateObject_1$M, templateObject_2$D, templateObject_3$r, templateObject_4$l, templateObject_5$e, templateObject_6$a, templateObject_7$7, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
517
517
 
518
518
  function _extends() {
519
519
  return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -8040,7 +8040,7 @@
8040
8040
  return [frameWidth, frameHeight];
8041
8041
  }
8042
8042
 
8043
- var InvisibleCanvas = styled.canvas(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
8043
+ var InvisibleCanvas = styled.canvas(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
8044
8044
  function drawToCanvas(canvas, frame, width, height) {
8045
8045
  if (!canvas) return;
8046
8046
  var ctx = canvas.getContext('2d');
@@ -8060,7 +8060,7 @@
8060
8060
  var _a;
8061
8061
  (_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);
8062
8062
  }
8063
- var templateObject_1$K;
8063
+ var templateObject_1$L;
8064
8064
 
8065
8065
  function cropToShoulders(rawCanvas, cropCanvas, resizeCanvas, frame, face, quality, maxHeight) {
8066
8066
  if (quality === void 0) {
@@ -13461,6 +13461,8 @@
13461
13461
  videoLoaded: false,
13462
13462
  videoStream: null,
13463
13463
  videoDevice: null,
13464
+ videoWidth: 0,
13465
+ videoHeight: 0,
13464
13466
  isRearFacing: false,
13465
13467
  camera: null,
13466
13468
  cameraReady: false,
@@ -13793,25 +13795,26 @@
13793
13795
  };
13794
13796
  var CameraStoreContext = /*#__PURE__*/React.createContext(undefined);
13795
13797
  function CameraStoreProvider(_a) {
13798
+ var _b;
13796
13799
  var children = _a.children,
13797
- _b = _a.requestAccessAutomatically,
13798
- requestAccessAutomatically = _b === void 0 ? true : _b,
13799
- _c = _a.preferIphoneContinuityCamera,
13800
- preferIphoneContinuityCamera = _c === void 0 ? true : _c,
13801
- _d = _a.preferFrontFacingCamera,
13802
- preferFrontFacingCamera = _d === void 0 ? false : _d,
13803
- _e = _a.maxVideoWidth,
13804
- maxVideoWidth = _e === void 0 ? 1920 : _e,
13800
+ _c = _a.requestAccessAutomatically,
13801
+ requestAccessAutomatically = _c === void 0 ? true : _c,
13802
+ _d = _a.preferIphoneContinuityCamera,
13803
+ preferIphoneContinuityCamera = _d === void 0 ? true : _d,
13804
+ _e = _a.preferFrontFacingCamera,
13805
+ preferFrontFacingCamera = _e === void 0 ? false : _e,
13806
+ _f = _a.maxVideoWidth,
13807
+ maxVideoWidth = _f === void 0 ? 1920 : _f,
13805
13808
  maxFps = _a.maxFps,
13806
13809
  onCameraAccessDenied = _a.onCameraAccessDenied,
13807
13810
  onCameraTamperingDetected = _a.onCameraTamperingDetected,
13808
13811
  onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
13809
- _f = _a.requireMicrophoneAccess,
13810
- requireMicrophoneAccess = _f === void 0 ? false : _f,
13811
- _g = _a.classNames,
13812
- classNames = _g === void 0 ? {} : _g,
13813
- _h = _a.verbiage,
13814
- verbiage = _h === void 0 ? {} : _h;
13812
+ _g = _a.requireMicrophoneAccess,
13813
+ requireMicrophoneAccess = _g === void 0 ? false : _g,
13814
+ _h = _a.classNames,
13815
+ classNames = _h === void 0 ? {} : _h,
13816
+ _j = _a.verbiage,
13817
+ verbiage = _j === void 0 ? {} : _j;
13815
13818
  var videoRef = React.useRef(null);
13816
13819
  var store = React.useRef();
13817
13820
  store.current || (store.current = createCameraStore({
@@ -13825,6 +13828,16 @@
13825
13828
  onMicrophoneAccessDenied: onMicrophoneAccessDenied,
13826
13829
  requireMicrophoneAccess: requireMicrophoneAccess
13827
13830
  }));
13831
+ var _k = (_b = videoRef.current) !== null && _b !== void 0 ? _b : {},
13832
+ videoWidth = _k.videoWidth,
13833
+ videoHeight = _k.videoHeight;
13834
+ React.useEffect(function () {
13835
+ var _a;
13836
+ (_a = store.current) === null || _a === void 0 ? void 0 : _a.setState({
13837
+ videoWidth: videoWidth,
13838
+ videoHeight: videoHeight
13839
+ });
13840
+ }, [videoWidth, videoHeight]);
13828
13841
  React.useEffect(function () {
13829
13842
  var _a, _b, _c;
13830
13843
  var state = (_a = store.current) === null || _a === void 0 ? void 0 : _a.getState();
@@ -13890,14 +13903,14 @@
13890
13903
  className: classNames.message
13891
13904
  }, messageText)));
13892
13905
  }
13893
- var StyledOverlayInner$4 = styled(OverlayInner$2)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
13906
+ var StyledOverlayInner$4 = styled(OverlayInner$2)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
13894
13907
  var StyledOverlayHeading = styled.h3(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
13895
13908
  function useCameraStore(selector) {
13896
13909
  var store = React.useContext(CameraStoreContext);
13897
13910
  if (!store) throw new Error('useCameraStore cannot be used without Provider');
13898
13911
  return useStore(store, selector);
13899
13912
  }
13900
- var templateObject_1$J, templateObject_2$C;
13913
+ var templateObject_1$K, templateObject_2$C;
13901
13914
 
13902
13915
  var DocumentDetectionModelContext = /*#__PURE__*/React.createContext({
13903
13916
  startDocumentDetection: function startDocumentDetection() {
@@ -15225,8 +15238,8 @@
15225
15238
  if (!portalLocation) return element;
15226
15239
  return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
15227
15240
  }
15228
- var DebugStatsPaneDiv = styled.span(templateObject_1$I || (templateObject_1$I = __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"])));
15229
- var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n position: absolute;\n z-index: 1001;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n ", "\n transform-style: preserve-3d;\n"], ["\n position: absolute;\n z-index: 1001;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n ", "\n transform-style: preserve-3d;\n"])), function (_a) {
15241
+ var DebugStatsPaneDiv = styled.span(templateObject_1$J || (templateObject_1$J = __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 pointer-events: none;\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 pointer-events: none;\n"])));
15242
+ var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n position: absolute;\n z-index: 1001;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n pointer-events: none;\n ", "\n transform-style: preserve-3d;\n"], ["\n position: absolute;\n z-index: 1001;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n pointer-events: none;\n ", "\n transform-style: preserve-3d;\n"])), function (_a) {
15230
15243
  var $flipX = _a.$flipX;
15231
15244
  return $flipX ? 'transform: scaleX(-1);' : '';
15232
15245
  });
@@ -15254,9 +15267,15 @@
15254
15267
  var _b = _a.enabled,
15255
15268
  enabled = _b === void 0 ? true : _b,
15256
15269
  pageWidth = _a.pageWidth,
15257
- pageHeight = _a.pageHeight,
15258
- videoWidth = _a.videoWidth,
15259
- videoHeight = _a.videoHeight;
15270
+ pageHeight = _a.pageHeight;
15271
+ var _c = useCameraStore(useShallow(function (state) {
15272
+ return {
15273
+ videoWidth: state.videoWidth,
15274
+ videoHeight: state.videoHeight
15275
+ };
15276
+ })),
15277
+ videoWidth = _c.videoWidth,
15278
+ videoHeight = _c.videoHeight;
15260
15279
  return React.useMemo(function () {
15261
15280
  var horizontal = false,
15262
15281
  scaledWidth = 0,
@@ -15431,7 +15450,7 @@
15431
15450
  }
15432
15451
  });
15433
15452
  }
15434
- var templateObject_1$I, templateObject_2$B, templateObject_3$q, templateObject_4$k;
15453
+ var templateObject_1$J, templateObject_2$B, templateObject_3$q, templateObject_4$k;
15435
15454
 
15436
15455
  function OverrideWrongDocumentTypeGuidanceDialog(_a) {
15437
15456
  var _b = _a.classNames,
@@ -15446,7 +15465,7 @@
15446
15465
  buttonText: 'OK'
15447
15466
  });
15448
15467
  if (!allowOverrideWrongDocumentTypeGuidance) return null;
15449
- return /*#__PURE__*/React.createElement(Container$6, {
15468
+ return /*#__PURE__*/React.createElement(Container$7, {
15450
15469
  className: classNames.container
15451
15470
  }, /*#__PURE__*/React.createElement(InnerContainer, {
15452
15471
  className: classNames.inner
@@ -15464,7 +15483,7 @@
15464
15483
  }
15465
15484
  }, verbiage.buttonText))));
15466
15485
  }
15467
- var Container$6 = styled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"], ["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"])), function (props) {
15486
+ var Container$7 = styled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"], ["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"])), function (props) {
15468
15487
  var _a, _b, _c;
15469
15488
  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';
15470
15489
  }, function (props) {
@@ -15475,7 +15494,7 @@
15475
15494
  var Message = styled.span(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: block;\n margin: auto 12px auto 0;\n"], ["\n display: block;\n margin: auto 12px auto 0;\n"])));
15476
15495
  var ButtonContainer = styled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n display: flex;\n margin-left: auto;\n"], ["\n display: flex;\n margin-left: auto;\n"])));
15477
15496
  var Button$1 = styled(LoaderButton)(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n white-space: nowrap;\n margin: auto;\n"], ["\n white-space: nowrap;\n margin: auto;\n"])));
15478
- var templateObject_1$H, templateObject_2$A, templateObject_3$p, templateObject_4$j, templateObject_5$d;
15497
+ var templateObject_1$I, templateObject_2$A, templateObject_3$p, templateObject_4$j, templateObject_5$d;
15479
15498
 
15480
15499
  // This is a simplified version of https://github.com/ZeeCoder/use-resize-observer.
15481
15500
  // We have removed all options and made it compliant with React Compiler/React 19.
@@ -15714,9 +15733,7 @@
15714
15733
  var debugScalingDetails = useDebugScalingDetails({
15715
15734
  enabled: debugMode,
15716
15735
  pageWidth: state.guideRectWidth,
15717
- pageHeight: state.guideRectHeight,
15718
- videoWidth: state.videoWidth,
15719
- videoHeight: state.videoHeight
15736
+ pageHeight: state.guideRectHeight
15720
15737
  });
15721
15738
  var satisfied = state.isGoodFrame;
15722
15739
  if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
@@ -15807,13 +15824,13 @@
15807
15824
  finished: true
15808
15825
  }, verbiage.retryBtnText)));
15809
15826
  };
15810
- var StyledOverlayInner$3 = 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"])));
15827
+ var StyledOverlayInner$3 = styled(OverlayInner$2)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
15811
15828
  var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
15812
15829
  var Description$4 = styled.p(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
15813
15830
  var RetryButton$1 = styled(LoaderButton)(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
15814
- var templateObject_1$G, templateObject_2$z, templateObject_3$o, templateObject_4$i;
15831
+ var templateObject_1$H, templateObject_2$z, templateObject_3$o, templateObject_4$i;
15815
15832
 
15816
- var ExitCaptureStyledButton = styled.button(templateObject_1$F || (templateObject_1$F = __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"])));
15833
+ var ExitCaptureStyledButton = styled.button(templateObject_1$G || (templateObject_1$G = __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"])));
15817
15834
  var ExitCaptureButton = function ExitCaptureButton(_a) {
15818
15835
  var onClick = _a.onClick,
15819
15836
  className = _a.className;
@@ -15857,7 +15874,7 @@
15857
15874
  y2: "19.75"
15858
15875
  }))));
15859
15876
  };
15860
- var templateObject_1$F;
15877
+ var templateObject_1$G;
15861
15878
 
15862
15879
  function IdCaptureLoadingGraphic(props) {
15863
15880
  var isMobile = window.innerHeight > window.innerWidth;
@@ -16332,7 +16349,7 @@
16332
16349
  fill: "white"
16333
16350
  }))));
16334
16351
  }
16335
- var LoadingGraphicWrapper = styled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n width: 100%;\n height: 100%;\n"])));
16352
+ var LoadingGraphicWrapper = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n width: 100%;\n height: 100%;\n"])));
16336
16353
  var LoadingGraphicSvg = styled.svg(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n margin: auto;\n transform: scale(\n ", "\n );\n transform-style: preserve-3d;\n transition:\n transform 0.2s linear,\n border-width 0.2s linear;\n border: ", "px solid\n ", ";\n max-height: 80%;\n max-width: 80%;\n"], ["\n margin: auto;\n transform: scale(\n ", "\n );\n transform-style: preserve-3d;\n transition:\n transform 0.2s linear,\n border-width 0.2s linear;\n border: ", "px solid\n ", ";\n max-height: 80%;\n max-width: 80%;\n"])), function (props) {
16337
16354
  return props.$frame > 1 ? 1 : props.$frame === 1 ? 1.25 : 0.75;
16338
16355
  }, function (props) {
@@ -16346,7 +16363,7 @@
16346
16363
  var LoadingGraphicPhoneGroup = styled.g(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"], ["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"])), function (props) {
16347
16364
  return props.$offScreen ? '40px' : '0';
16348
16365
  });
16349
- var templateObject_1$E, templateObject_2$y, templateObject_3$n, templateObject_4$h;
16366
+ var templateObject_1$F, templateObject_2$y, templateObject_3$n, templateObject_4$h;
16350
16367
 
16351
16368
  function LoadingListItemIndicator(_a) {
16352
16369
  var _b = _a.state,
@@ -16546,7 +16563,7 @@
16546
16563
  }
16547
16564
  }, ready ? verbiage.continueText : verbiage.pleaseWaitText))))));
16548
16565
  };
16549
- var OverlayInner$1 = styled(LoadingOverlayInner)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n"], ["\n background: ", ";\n color: ", ";\n"])), function (props) {
16566
+ var OverlayInner$1 = styled(LoadingOverlayInner)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n"], ["\n background: ", ";\n color: ", ";\n"])), function (props) {
16550
16567
  var _a, _b, _c, _d;
16551
16568
  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';
16552
16569
  }, function (props) {
@@ -16592,9 +16609,9 @@
16592
16609
  var _a, _b, _c, _d;
16593
16610
  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.continueBtnDisabledBorder) !== null && _d !== void 0 ? _d : 'none';
16594
16611
  });
16595
- var templateObject_1$D, templateObject_2$x, templateObject_3$m, templateObject_4$g, templateObject_5$c, templateObject_6$9, templateObject_7$6, templateObject_8$3, templateObject_9$2, templateObject_10$1;
16612
+ var templateObject_1$E, templateObject_2$x, templateObject_3$m, templateObject_4$g, templateObject_5$c, templateObject_6$9, templateObject_7$6, templateObject_8$3, templateObject_9$2, templateObject_10$1;
16596
16613
 
16597
- var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n margin-top: 15px;\n margin-bottom: 15px;\n"], ["\n margin-top: 15px;\n margin-bottom: 15px;\n"])));
16614
+ var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n margin-top: 15px;\n margin-bottom: 15px;\n"], ["\n margin-top: 15px;\n margin-bottom: 15px;\n"])));
16598
16615
  var ContinuityCameraCheckbox = styled.input(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
16599
16616
  var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
16600
16617
  var _b, _c, _d, _e;
@@ -16716,7 +16733,7 @@
16716
16733
  }
16717
16734
  }, ready ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
16718
16735
  };
16719
- var templateObject_1$C, templateObject_2$w;
16736
+ var templateObject_1$D, templateObject_2$w;
16720
16737
 
16721
16738
  var components$1 = {
16722
16739
  "default": IdCaptureLoadingOverlayDefault,
@@ -16774,9 +16791,9 @@
16774
16791
  });
16775
16792
  };
16776
16793
 
16777
- var Card = styled.div(templateObject_1$B || (templateObject_1$B = __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: min(500px, 100% - 48px);\n max-height: 100%;\n overflow: auto;\n box-sizing: border-box;\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: min(500px, 100% - 48px);\n max-height: 100%;\n overflow: auto;\n box-sizing: border-box;\n"])));
16794
+ var Card = styled.div(templateObject_1$C || (templateObject_1$C = __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: min(500px, 100% - 48px);\n max-height: 100%;\n overflow: auto;\n box-sizing: border-box;\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: min(500px, 100% - 48px);\n max-height: 100%;\n overflow: auto;\n box-sizing: border-box;\n"])));
16778
16795
  var FlexCard = styled(Card)(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
16779
- var templateObject_1$B, templateObject_2$v;
16796
+ var templateObject_1$C, templateObject_2$v;
16780
16797
 
16781
16798
  var imageDisplayOrder = ['idCardFront', 'idCardBack', 'passport', 'singlePage', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage'];
16782
16799
  var IdCaptureSuccess = function IdCaptureSuccess(_a) {
@@ -16838,13 +16855,13 @@
16838
16855
  finished: true
16839
16856
  }, verbiage.retryText)))));
16840
16857
  };
16841
- var Heading$a = styled.h1(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n font-size: 1.5rem;\n margin-top: 0;\n margin-bottom: 1.5rem;\n"], ["\n font-size: 1.5rem;\n margin-top: 0;\n margin-bottom: 1.5rem;\n"])));
16858
+ var Heading$a = styled.h1(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n font-size: 1.5rem;\n margin-top: 0;\n margin-bottom: 1.5rem;\n"], ["\n font-size: 1.5rem;\n margin-top: 0;\n margin-bottom: 1.5rem;\n"])));
16842
16859
  var ImagesContainer = styled(OverlayImageContainer)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n flex-grow: 1;\n overflow-y: auto;\n padding-bottom: 0;\n max-width: 100%;\n"], ["\n flex-grow: 1;\n overflow-y: auto;\n padding-bottom: 0;\n max-width: 100%;\n"])));
16843
16860
  var ImageRow = styled(OverlayImageRow)(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n max-width: 100%;\n flex-direction: column;\n position: relative;\n width: 100%;\n"], ["\n max-width: 100%;\n flex-direction: column;\n position: relative;\n width: 100%;\n"])));
16844
16861
  var ImageCol$1 = styled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n width: 450px;\n max-width: 100%;\n max-height: none !important;\n"], ["\n width: 450px;\n max-width: 100%;\n max-height: none !important;\n"])));
16845
16862
  var StyledImage = styled(CapturedDocumentImg)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n width: 100%;\n border-radius: 12px;\n"], ["\n width: 100%;\n border-radius: 12px;\n"])));
16846
16863
  var DebugPre = styled.pre(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: block;\n text-align: left;\n width: 100%;\n max-width: 100%;\n overflow-x: auto;\n"], ["\n display: block;\n text-align: left;\n width: 100%;\n max-width: 100%;\n overflow-x: auto;\n"])));
16847
- var templateObject_1$A, templateObject_2$u, templateObject_3$l, templateObject_4$f, templateObject_5$b, templateObject_6$8;
16864
+ var templateObject_1$B, templateObject_2$u, templateObject_3$l, templateObject_4$f, templateObject_5$b, templateObject_6$8;
16848
16865
 
16849
16866
  function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
16850
16867
  var _this = this;
@@ -16896,7 +16913,7 @@
16896
16913
  canvas.style.height = '0';
16897
16914
  }
16898
16915
 
16899
- var IdCardGuideImageContainer = styled(IdCardBorder)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n position: relative;\n ", "\n box-sizing: border-box;\n"], ["\n position: relative;\n ", "\n box-sizing: border-box;\n"])), function (props) {
16916
+ var IdCardGuideImageContainer = styled(IdCardBorder)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n position: relative;\n ", "\n box-sizing: border-box;\n"], ["\n position: relative;\n ", "\n box-sizing: border-box;\n"])), function (props) {
16900
16917
  return props.$isVisible ? '' : 'opacity: 0;';
16901
16918
  });
16902
16919
  var IdCardGuideImage = styled.img(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n transform-style: preserve-3d;\n ", "\n ", "\n"], ["\n transform-style: preserve-3d;\n ", "\n ", "\n"])), function (props) {
@@ -17052,7 +17069,7 @@
17052
17069
  var _a;
17053
17070
  return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
17054
17071
  });
17055
- var templateObject_1$z, templateObject_2$t, templateObject_3$k, templateObject_4$e, templateObject_5$a;
17072
+ var templateObject_1$A, templateObject_2$t, templateObject_3$k, templateObject_4$e, templateObject_5$a;
17056
17073
 
17057
17074
  var defaultIdCaptureGuideImages = {
17058
17075
  portrait: {
@@ -17228,12 +17245,12 @@
17228
17245
  style: imageStyle
17229
17246
  })));
17230
17247
  };
17231
- var FlipImageContainer = styled(IdCardGuideImageContainer)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: absolute;\n display: block;\n top: 0;\n width: 100%;\n max-height: 100%;\n"], ["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: absolute;\n display: block;\n top: 0;\n width: 100%;\n max-height: 100%;\n"])), function (props) {
17248
+ var FlipImageContainer = styled(IdCardGuideImageContainer)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: absolute;\n display: block;\n top: 0;\n width: 100%;\n max-height: 100%;\n"], ["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: absolute;\n display: block;\n top: 0;\n width: 100%;\n max-height: 100%;\n"])), function (props) {
17232
17249
  return props.$transitionTime;
17233
17250
  }, function (props) {
17234
17251
  return props.$transforms;
17235
17252
  });
17236
- var templateObject_1$y;
17253
+ var templateObject_1$z;
17237
17254
 
17238
17255
  var GuideOrientationContext = /*#__PURE__*/React.createContext({
17239
17256
  orientation: 'landscape',
@@ -17520,7 +17537,7 @@
17520
17537
  return v;
17521
17538
  }).join(' ');
17522
17539
  };
17523
- var StyledPageContainer = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1000;\n overflow: hidden;\n"], ["\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1000;\n overflow: hidden;\n"])));
17540
+ var StyledPageContainer = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1000;\n overflow: hidden;\n"], ["\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1000;\n overflow: hidden;\n"])));
17524
17541
  var GuidesContainer = styled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n height: 100%;\n"])));
17525
17542
  var GuideCenterRow = styled.div(templateObject_3$j || (templateObject_3$j = __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"])));
17526
17543
  var GuideRegion = styled.div(templateObject_4$d || (templateObject_4$d = __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) {
@@ -17548,7 +17565,7 @@
17548
17565
  });
17549
17566
  var GuideText = styled.span(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"], ["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"])));
17550
17567
  var GuideCenterInner = styled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n position: relative;\n margin: auto;\n"], ["\n position: relative;\n margin: auto;\n"])));
17551
- var templateObject_1$x, templateObject_2$s, templateObject_3$j, templateObject_4$d, templateObject_5$9, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9$1;
17568
+ var templateObject_1$y, templateObject_2$s, templateObject_3$j, templateObject_4$d, templateObject_5$9, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9$1;
17552
17569
 
17553
17570
  var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
17554
17571
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
@@ -17689,11 +17706,11 @@
17689
17706
  progress: progress
17690
17707
  }));
17691
17708
  };
17692
- var CanvasWrapper$1 = styled.div(templateObject_1$w || (templateObject_1$w = __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) {
17709
+ var CanvasWrapper$1 = styled.div(templateObject_1$x || (templateObject_1$x = __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) {
17693
17710
  return props.$maskColor;
17694
17711
  });
17695
17712
  var Canvas$1 = styled.canvas(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
17696
- var templateObject_1$w, templateObject_2$r;
17713
+ var templateObject_1$x, templateObject_2$r;
17697
17714
 
17698
17715
  function IdCaptureGuides(_a) {
17699
17716
  var _b = _a.guideType,
@@ -17749,7 +17766,7 @@
17749
17766
  })));
17750
17767
  }
17751
17768
 
17752
- var Spinner$1 = styled.div(templateObject_1$v || (templateObject_1$v = __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: ", " 1.2s linear infinite;\n box-sizing: content-box;\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: ", " 1.2s linear infinite;\n box-sizing: content-box;\n }\n"])), function (_a) {
17769
+ var Spinner$1 = styled.div(templateObject_1$w || (templateObject_1$w = __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: ", " 1.2s linear infinite;\n box-sizing: content-box;\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: ", " 1.2s linear infinite;\n box-sizing: content-box;\n }\n"])), function (_a) {
17753
17770
  var $size = _a.$size;
17754
17771
  return $size !== null && $size !== void 0 ? $size : 80;
17755
17772
  }, function (_a) {
@@ -17778,7 +17795,7 @@
17778
17795
  function SpinnerPage() {
17779
17796
  return /*#__PURE__*/React.createElement(SpinnerPageContainer, null, /*#__PURE__*/React.createElement(Spinner$1, null));
17780
17797
  }
17781
- var templateObject_1$v, templateObject_2$q;
17798
+ var templateObject_1$w, templateObject_2$q;
17782
17799
 
17783
17800
  var IdCaptureImagePreview = function IdCaptureImagePreview(_a) {
17784
17801
  var _b = _a.classNames,
@@ -17865,11 +17882,11 @@
17865
17882
  onError: onError
17866
17883
  })));
17867
17884
  };
17868
- var StyledSpinner = styled(Spinner$1)(templateObject_1$u || (templateObject_1$u = __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"])));
17885
+ var StyledSpinner = styled(Spinner$1)(templateObject_1$v || (templateObject_1$v = __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"])));
17869
17886
  var ImagePreviewWrapper = styled.div(templateObject_2$p || (templateObject_2$p = __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"])));
17870
17887
  var ImagePreviewText = styled.div(templateObject_3$i || (templateObject_3$i = __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"])));
17871
17888
  var ImagePreviewImageWrapper = styled.div(templateObject_4$c || (templateObject_4$c = __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"])));
17872
- var templateObject_1$u, templateObject_2$p, templateObject_3$i, templateObject_4$c;
17889
+ var templateObject_1$v, templateObject_2$p, templateObject_3$i, templateObject_4$c;
17873
17890
 
17874
17891
  var documentCaptureInitialState = {
17875
17892
  documents: [],
@@ -18217,16 +18234,16 @@
18217
18234
  ref: canvasRef
18218
18235
  }));
18219
18236
  };
18220
- var CanvasWrapper = styled.div(templateObject_1$t || (templateObject_1$t = __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) {
18237
+ var CanvasWrapper = styled.div(templateObject_1$u || (templateObject_1$u = __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) {
18221
18238
  return props.$maskColor;
18222
18239
  });
18223
18240
  var Canvas = styled.canvas(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
18224
- var templateObject_1$t, templateObject_2$o;
18241
+ var templateObject_1$u, templateObject_2$o;
18225
18242
 
18226
- var CameraFeedWrapper = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
18243
+ var CameraFeedWrapper = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
18227
18244
  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;") : "";
18228
18245
  });
18229
- var templateObject_1$s;
18246
+ var templateObject_1$t;
18230
18247
 
18231
18248
  var CameraVideoTag = function CameraVideoTag(props) {
18232
18249
  var _a = useCameraStore(useShallow(function (store) {
@@ -18257,10 +18274,10 @@
18257
18274
  "$isRearFacing": isRearFacing
18258
18275
  }, props));
18259
18276
  };
18260
- var FullscreenVideoTag = styled.video(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n transform: ", ";\n transform-style: preserve-3d;\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 transform-style: preserve-3d;\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) {
18277
+ var FullscreenVideoTag = styled.video(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n transform: ", ";\n transform-style: preserve-3d;\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 transform-style: preserve-3d;\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) {
18261
18278
  return props.$isRearFacing ? '' : 'scaleX(-1)';
18262
18279
  });
18263
- var templateObject_1$r;
18280
+ var templateObject_1$s;
18264
18281
 
18265
18282
  var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
18266
18283
  var _b, _c, _d, _e;
@@ -18408,7 +18425,7 @@
18408
18425
  disabled: !cameraReady || capturing
18409
18426
  }, !cameraReady ? verbiage.loadingBtnText : capturing ? verbiage.capturingBtnText : verbiage.captureBtnText))))));
18410
18427
  };
18411
- var CaptureContainer = styled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
18428
+ var CaptureContainer = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
18412
18429
  var HeadingRow = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n background: ", ";\n text-align: center;\n color: white;\n"], ["\n background: ", ";\n text-align: center;\n color: white;\n"])), function (props) {
18413
18430
  return props.$maskColor;
18414
18431
  });
@@ -18422,7 +18439,7 @@
18422
18439
  });
18423
18440
  var StyledButtonsRow$8 = styled(ButtonsRow$2)(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n padding-top: 20px;\n"], ["\n padding-top: 20px;\n"])));
18424
18441
  var PreviewImage = styled.img(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"])));
18425
- var templateObject_1$q, templateObject_2$n, templateObject_3$h, templateObject_4$b, templateObject_5$8, templateObject_6$6, templateObject_7$4;
18442
+ var templateObject_1$r, templateObject_2$n, templateObject_3$h, templateObject_4$b, templateObject_5$8, templateObject_6$6, templateObject_7$4;
18426
18443
 
18427
18444
  var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
18428
18445
  var onSuccess = _a.onSuccess,
@@ -18693,13 +18710,13 @@
18693
18710
  }
18694
18711
  }, verbiage.doneBtnText))))));
18695
18712
  };
18696
- var StyledOverlayInner$2 = styled(OverlayInner$2)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
18713
+ var StyledOverlayInner$2 = styled(OverlayInner$2)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
18697
18714
  var Heading$8 = styled.h3(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
18698
18715
  var Description$3 = styled.p(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
18699
18716
  var Instruction = styled.p(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
18700
18717
  var ImageCol = styled.div(templateObject_5$7 || (templateObject_5$7 = __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"])));
18701
18718
  var StyledButtonsRow$7 = styled(ButtonsRow$2)(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
18702
- var templateObject_1$p, templateObject_2$m, templateObject_3$g, templateObject_4$a, templateObject_5$7, templateObject_6$5;
18719
+ var templateObject_1$q, templateObject_2$m, templateObject_3$g, templateObject_4$a, templateObject_5$7, templateObject_6$5;
18703
18720
 
18704
18721
  function ScalingCameraFeed() {
18705
18722
  var _a = useIdCaptureStore(),
@@ -19051,7 +19068,7 @@
19051
19068
  }
19052
19069
  }, file ? "".concat(file.name, " (").concat(humanFileSize(file.size), ")") : filePickerLoading ? loadingText : children));
19053
19070
  }
19054
- var ScreenContainer = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n position: relative;\n font-family: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n position: relative;\n font-family: ", ";\n"])), function (props) {
19071
+ var ScreenContainer = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n position: relative;\n font-family: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n position: relative;\n font-family: ", ";\n"])), function (props) {
19055
19072
  var _a;
19056
19073
  return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
19057
19074
  });
@@ -19340,7 +19357,7 @@
19340
19357
  } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
19341
19358
  return bytes.toFixed(dp) + ' ' + units[u];
19342
19359
  }
19343
- var templateObject_1$o, templateObject_2$l, templateObject_3$f, templateObject_4$9, templateObject_5$6, templateObject_6$4, templateObject_7$3, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
19360
+ var templateObject_1$p, templateObject_2$l, templateObject_3$f, templateObject_4$9, templateObject_5$6, templateObject_6$4, templateObject_7$3, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
19344
19361
 
19345
19362
  var IdCaptureWizard = function IdCaptureWizard(_a) {
19346
19363
  var _b, _c, _d, _e, _f;
@@ -20033,7 +20050,7 @@
20033
20050
  }))));
20034
20051
  });
20035
20052
  HeadGuideSvg.displayName = 'HeadGuideSvg';
20036
- var PulsingHeadGuideContainer = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n position: relative;\n height: 100%;\n max-height: 100%;\n\n & > .idmSdkWaves {\n position: absolute;\n animation: ", " 2s ease-out infinite;\n transform-style: preserve-3d;\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 & > .idmSdkWavesOrigin {\n position: relative;\n }\n"], ["\n display: flex;\n position: relative;\n height: 100%;\n max-height: 100%;\n\n & > .idmSdkWaves {\n position: absolute;\n animation: ", " 2s ease-out infinite;\n transform-style: preserve-3d;\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 & > .idmSdkWavesOrigin {\n position: relative;\n }\n"])), wavesAnimation);
20053
+ var PulsingHeadGuideContainer = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n position: relative;\n height: 100%;\n max-height: 100%;\n\n & > .idmSdkWaves {\n position: absolute;\n animation: ", " 2s ease-out infinite;\n transform-style: preserve-3d;\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 & > .idmSdkWavesOrigin {\n position: relative;\n }\n"], ["\n display: flex;\n position: relative;\n height: 100%;\n max-height: 100%;\n\n & > .idmSdkWaves {\n position: absolute;\n animation: ", " 2s ease-out infinite;\n transform-style: preserve-3d;\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 & > .idmSdkWavesOrigin {\n position: relative;\n }\n"])), wavesAnimation);
20037
20054
  function HeadGuide(_a) {
20038
20055
  var _b;
20039
20056
  var _c = _a.status,
@@ -20311,9 +20328,9 @@
20311
20328
  status: status
20312
20329
  }));
20313
20330
  }
20314
- var templateObject_1$n, templateObject_2$k, templateObject_3$e;
20331
+ var templateObject_1$o, templateObject_2$k, templateObject_3$e;
20315
20332
 
20316
- var FaceCaptureGuideContainer = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n position: absolute;\n z-index: 1000;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\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: absolute;\n z-index: 1000;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n box-sizing: border-box;\n"])));
20333
+ var FaceCaptureGuideContainer = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n position: absolute;\n z-index: 1000;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\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: absolute;\n z-index: 1000;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n box-sizing: border-box;\n"])));
20317
20334
  var FaceCaptureGuideInner = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n position: relative;\n height: 60%;\n"], ["\n position: relative;\n height: 60%;\n"])));
20318
20335
  var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
20319
20336
  var _b = _a.classNames,
@@ -20336,7 +20353,7 @@
20336
20353
  verticalAlign: "center"
20337
20354
  })));
20338
20355
  };
20339
- var templateObject_1$m, templateObject_2$j;
20356
+ var templateObject_1$n, templateObject_2$j;
20340
20357
 
20341
20358
  var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
20342
20359
  start: function start() {
@@ -20414,8 +20431,10 @@
20414
20431
  requireVerticalFaceCentering: requireVerticalFaceCentering
20415
20432
  });
20416
20433
  setLastFaceDetectionAt(new Date().getTime());
20434
+ // setLastPrediction(processed)
20417
20435
  return [4 /*yield*/, (_b = onPredictionHandler.current) === null || _b === void 0 ? void 0 : _b.call(onPredictionHandler, processed)];
20418
20436
  case 2:
20437
+ // setLastPrediction(processed)
20419
20438
  _c.sent();
20420
20439
  return [3 /*break*/, 4];
20421
20440
  case 3:
@@ -20446,7 +20465,7 @@
20446
20465
  error: modelError,
20447
20466
  modelDownloadProgress: modelDownloadProgress
20448
20467
  };
20449
- }, [modelError, modelDownloadProgress, onPredictionMade, ready, start, stop]);
20468
+ }, [start, stop, ready, onPredictionMade, modelError, modelDownloadProgress]);
20450
20469
  return /*#__PURE__*/React__namespace.createElement(SelfieGuidanceModelsContext.Provider, {
20451
20470
  value: value
20452
20471
  }, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
@@ -20656,12 +20675,12 @@
20656
20675
  }
20657
20676
  }, !image ? invalidSelfie ? verbiage.retryButtonText : verbiage.captureBtnText : loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText)))));
20658
20677
  };
20659
- var StyledOverlayInner$1 = styled(OverlayInner$2)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
20678
+ var StyledOverlayInner$1 = styled(OverlayInner$2)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
20660
20679
  var Heading$7 = styled.h3(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
20661
20680
  var Description$2 = styled.p(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
20662
20681
  var ImageContainer$6 = styled(OverlayImageContainer)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
20663
20682
  var StyledButtonsRow$6 = styled(ButtonsRow$2)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
20664
- var templateObject_1$l, templateObject_2$i, templateObject_3$d, templateObject_4$8, templateObject_5$5;
20683
+ var templateObject_1$m, templateObject_2$i, templateObject_3$d, templateObject_4$8, templateObject_5$5;
20665
20684
 
20666
20685
  var initialState$3 = {
20667
20686
  busy: false,
@@ -20689,7 +20708,7 @@
20689
20708
  }
20690
20709
  };
20691
20710
  var SelfieCapture = function SelfieCapture(_a) {
20692
- var _b, _c, _d, _e, _f;
20711
+ var _b;
20693
20712
  var onGuidanceSatisfied = _a.onGuidanceSatisfied,
20694
20713
  onGuidanceNotSatisfied = _a.onGuidanceNotSatisfied,
20695
20714
  onFaceDetected = _a.onFaceDetected,
@@ -20697,46 +20716,40 @@
20697
20716
  onSelfieCaptured = _a.onSelfieCaptured,
20698
20717
  onTimeout = _a.onTimeout,
20699
20718
  onExit = _a.onExit,
20700
- _g = _a.timeoutDurationMs,
20701
- timeoutDurationMs = _g === void 0 ? 15000 : _g,
20719
+ _c = _a.timeoutDurationMs,
20720
+ timeoutDurationMs = _c === void 0 ? 15000 : _c,
20702
20721
  guidanceMessage = _a.guidanceMessage,
20703
20722
  guidanceSatisfied = _a.guidanceSatisfied,
20704
20723
  guidesComponent = _a.guidesComponent,
20705
- _h = _a.shouldCapture,
20706
- shouldCapture = _h === void 0 ? true : _h,
20707
- _j = _a.classNames,
20708
- classNames = _j === void 0 ? {} : _j,
20709
- _k = _a.colors,
20710
- colors = _k === void 0 ? {} : _k,
20711
- _l = _a.verbiage,
20712
- rawVerbiage = _l === void 0 ? {} : _l,
20713
- _m = _a.debugMode,
20714
- debugMode = _m === void 0 ? false : _m;
20715
- var _o = useResizeObserver(),
20716
- ref = _o.ref,
20717
- _p = _o.width,
20718
- width = _p === void 0 ? 1 : _p,
20719
- _q = _o.height,
20720
- height = _q === void 0 ? 1 : _q;
20721
- var _r = React.useReducer(reducer$3, initialState$3),
20722
- _s = _r[0],
20723
- busy = _s.busy,
20724
- prediction = _s.prediction,
20725
- dispatch = _r[1];
20724
+ _d = _a.shouldCapture,
20725
+ shouldCapture = _d === void 0 ? true : _d,
20726
+ _e = _a.classNames,
20727
+ classNames = _e === void 0 ? {} : _e,
20728
+ _f = _a.colors,
20729
+ colors = _f === void 0 ? {} : _f,
20730
+ _g = _a.verbiage,
20731
+ rawVerbiage = _g === void 0 ? {} : _g,
20732
+ _h = _a.debugMode,
20733
+ debugMode = _h === void 0 ? false : _h;
20734
+ var _j = useResizeObserver(),
20735
+ ref = _j.ref,
20736
+ _k = _j.width,
20737
+ width = _k === void 0 ? 1 : _k,
20738
+ _l = _j.height,
20739
+ height = _l === void 0 ? 1 : _l;
20740
+ var _m = React.useReducer(reducer$3, initialState$3),
20741
+ _o = _m[0],
20742
+ busy = _o.busy,
20743
+ prediction = _o.prediction,
20744
+ dispatch = _m[1];
20726
20745
  var lastPredictionCanvas = React.useRef(null);
20727
- var _t = useCameraStore(useShallow(function (state) {
20728
- return {
20729
- camera: state.camera,
20730
- cameraReady: state.cameraReady,
20731
- videoRef: state.videoRef
20732
- };
20733
- })),
20734
- camera = _t.camera,
20735
- videoRef = _t.videoRef;
20736
- var _u = React.useContext(SelfieGuidanceModelsContext),
20737
- onPredictionMade = _u.onPredictionMade,
20738
- canvasRef = _u.canvasRef,
20739
- guidanceError = _u.error;
20746
+ var camera = useCameraStore(useShallow(function (state) {
20747
+ return state.camera;
20748
+ }));
20749
+ var _p = React.useContext(SelfieGuidanceModelsContext),
20750
+ onPredictionMade = _p.onPredictionMade,
20751
+ canvasRef = _p.canvasRef,
20752
+ guidanceError = _p.error;
20740
20753
  onPredictionMade(f(React.useCallback(function (prediction) {
20741
20754
  return __awaiter(void 0, void 0, void 0, function () {
20742
20755
  return __generator(this, function (_a) {
@@ -20781,15 +20794,13 @@
20781
20794
  if (timer) clearTimeout(timer);
20782
20795
  };
20783
20796
  }, [onSelfieCaptureStarted, onSelfieCaptured, prediction]);
20784
- var _v = useTimeout(timeoutDurationMs, onTimeout),
20785
- timedOut = _v.timedOut,
20786
- timeoutStartedAt = _v.timeoutStartedAt;
20797
+ var _q = useTimeout(timeoutDurationMs, onTimeout),
20798
+ timedOut = _q.timedOut,
20799
+ timeoutStartedAt = _q.timeoutStartedAt;
20787
20800
  var debugScalingDetails = useDebugScalingDetails({
20788
20801
  enabled: debugMode,
20789
20802
  pageWidth: width,
20790
- pageHeight: height,
20791
- videoWidth: (_c = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) !== null && _c !== void 0 ? _c : 0,
20792
- videoHeight: (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0
20803
+ pageHeight: height
20793
20804
  });
20794
20805
  colors.guidesUnsatisfiedColor || (colors.guidesUnsatisfiedColor = 'white');
20795
20806
  colors.guidesSatisfiedColor || (colors.guidesSatisfiedColor = 'green');
@@ -20802,7 +20813,7 @@
20802
20813
  guidanceNoFaceDetectedText: 'Waiting for face to be detected...',
20803
20814
  guidanceNotStableText: 'Please hold still...'
20804
20815
  });
20805
- var satisfied = (_f = prediction === null || prediction === void 0 ? void 0 : prediction.faceReady) !== null && _f !== void 0 ? _f : false;
20816
+ var satisfied = (_b = prediction === null || prediction === void 0 ? void 0 : prediction.faceReady) !== null && _b !== void 0 ? _b : false;
20806
20817
  if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
20807
20818
  guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : (prediction === null || prediction === void 0 ? void 0 : prediction.faceLookingAway) ? verbiage.guidanceLookStraightText : (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) ? verbiage.guidanceMoveBackText : (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? verbiage.guidanceMoveForwardText : (prediction === null || prediction === void 0 ? void 0 : prediction.faceNotCentered) ? verbiage.guidanceMoveToCenterText : (prediction === null || prediction === void 0 ? void 0 : prediction.faceNotDetected) ? verbiage.guidanceNoFaceDetectedText : !(prediction === null || prediction === void 0 ? void 0 : prediction.faceIsStable) ? verbiage.guidanceNotStableText : '');
20808
20819
  if (guidanceError) {
@@ -20811,7 +20822,7 @@
20811
20822
  });
20812
20823
  }
20813
20824
  var GuidesComponent = guidesComponent !== null && guidesComponent !== void 0 ? guidesComponent : FaceCaptureGuideOverlay;
20814
- return /*#__PURE__*/React.createElement(Container$5, {
20825
+ return /*#__PURE__*/React.createElement(Container$6, {
20815
20826
  ref: ref,
20816
20827
  className: classNames.container
20817
20828
  }, /*#__PURE__*/React.createElement(InvisibleCanvas, {
@@ -20833,8 +20844,8 @@
20833
20844
  className: classNames.exitCaptureBtn
20834
20845
  }));
20835
20846
  };
20836
- var Container$5 = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
20837
- var templateObject_1$k;
20847
+ var Container$6 = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
20848
+ var templateObject_1$l;
20838
20849
 
20839
20850
  var initialState$2 = {
20840
20851
  frame: null,
@@ -20960,7 +20971,7 @@
20960
20971
  var _m = React.useContext(SubmissionContext),
20961
20972
  checkLiveness = _m.checkLiveness,
20962
20973
  submissionError = _m.submissionError;
20963
- var modelError = React.useContext(SelfieGuidanceModelsContext).error;
20974
+ var modelError = useSelfieGuidanceModelsContext().error;
20964
20975
  var _o = React.useReducer(reducer$2, initialState$2),
20965
20976
  state = _o[0],
20966
20977
  dispatch = _o[1];
@@ -21222,9 +21233,9 @@
21222
21233
  finished: true
21223
21234
  }, verbiage.retryBtnText)))));
21224
21235
  };
21225
- var ImageContainer$5 = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n position: relative;\n flex-grow: 1;\n margin-bottom: 25px;\n max-width: 100%;\n max-height: 100%;\n overflow-y: auto;\n border-radius: 12px;\n\n & > img,\n & > svg {\n width: 100%;\n max-width: 100%;\n margin: 0 auto;\n display: block;\n border-radius: 12px;\n }\n"], ["\n position: relative;\n flex-grow: 1;\n margin-bottom: 25px;\n max-width: 100%;\n max-height: 100%;\n overflow-y: auto;\n border-radius: 12px;\n\n & > img,\n & > svg {\n width: 100%;\n max-width: 100%;\n margin: 0 auto;\n display: block;\n border-radius: 12px;\n }\n"])));
21236
+ var ImageContainer$5 = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n position: relative;\n flex-grow: 1;\n margin-bottom: 25px;\n max-width: 100%;\n max-height: 100%;\n overflow-y: auto;\n border-radius: 12px;\n\n & > img,\n & > svg {\n width: 100%;\n max-width: 100%;\n margin: 0 auto;\n display: block;\n border-radius: 12px;\n }\n"], ["\n position: relative;\n flex-grow: 1;\n margin-bottom: 25px;\n max-width: 100%;\n max-height: 100%;\n overflow-y: auto;\n border-radius: 12px;\n\n & > img,\n & > svg {\n width: 100%;\n max-width: 100%;\n margin: 0 auto;\n display: block;\n border-radius: 12px;\n }\n"])));
21226
21237
  var Heading$6 = styled.h3(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n font-size: 1.2rem;\n margin: 0;\n"], ["\n font-size: 1.2rem;\n margin: 0;\n"])));
21227
- var templateObject_1$j, templateObject_2$h;
21238
+ var templateObject_1$k, templateObject_2$h;
21228
21239
 
21229
21240
  var FaceLivenessFailure = function FaceLivenessFailure(_a) {
21230
21241
  var _b = _a.canRetry,
@@ -21273,9 +21284,9 @@
21273
21284
  finished: true
21274
21285
  }, verbiage.exitBtnText)))));
21275
21286
  };
21276
- var ImageContainer$4 = styled(OverlayImageContainer)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
21287
+ var ImageContainer$4 = styled(OverlayImageContainer)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
21277
21288
  var Heading$5 = styled.h3(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin-bottom: 36px;\n"], ["\n margin-bottom: 36px;\n"])));
21278
- var templateObject_1$i, templateObject_2$g;
21289
+ var templateObject_1$j, templateObject_2$g;
21279
21290
 
21280
21291
  var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
21281
21292
  var _b;
@@ -21318,11 +21329,11 @@
21318
21329
  finished: true
21319
21330
  }, verbiage.retryBtnText)));
21320
21331
  };
21321
- var StyledOverlayInner = styled(OverlayInner$2)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
21332
+ var StyledOverlayInner = styled(OverlayInner$2)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
21322
21333
  var StyledOverlayImageContainer = styled(OverlayImageContainer)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
21323
21334
  var Description$1 = styled.p(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
21324
21335
  var RetryButton = styled(LoaderButton)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
21325
- var templateObject_1$h, templateObject_2$f, templateObject_3$c, templateObject_4$7;
21336
+ var templateObject_1$i, templateObject_2$f, templateObject_3$c, templateObject_4$7;
21326
21337
 
21327
21338
  var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLegacy(_a) {
21328
21339
  var onDismissed = _a.onDismissed,
@@ -21414,9 +21425,9 @@
21414
21425
  }
21415
21426
  }, ready ? verbiage.continueText : allModelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
21416
21427
  };
21417
- var StyledGuidanceMessage = styled(GuidanceMessage)(templateObject_1$g || (templateObject_1$g = __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"])));
21428
+ var StyledGuidanceMessage = styled(GuidanceMessage)(templateObject_1$h || (templateObject_1$h = __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"])));
21418
21429
  var StyledButtonsRow$5 = styled(ButtonsRow$2)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n flex-direction: column;\n padding-top: 25px;\n"], ["\n flex-direction: column;\n padding-top: 25px;\n"])));
21419
- var templateObject_1$g, templateObject_2$e;
21430
+ var templateObject_1$h, templateObject_2$e;
21420
21431
 
21421
21432
  var legacyInstructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png");
21422
21433
  var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDefault(_a) {
@@ -21556,7 +21567,7 @@
21556
21567
  }
21557
21568
  }, ready ? verbiage.continueText : verbiage.pleaseWaitText))))));
21558
21569
  };
21559
- var OverlayInner = styled(LoadingOverlayInner)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n"], ["\n background: ", ";\n color: ", ";\n"])), function (props) {
21570
+ var OverlayInner = styled(LoadingOverlayInner)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n"], ["\n background: ", ";\n color: ", ";\n"])), function (props) {
21560
21571
  var _a, _b, _c, _d;
21561
21572
  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';
21562
21573
  }, function (props) {
@@ -21602,7 +21613,7 @@
21602
21613
  var _a, _b, _c, _d;
21603
21614
  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.continueBtnBorder) !== null && _d !== void 0 ? _d : 'none';
21604
21615
  });
21605
- var templateObject_1$f, templateObject_2$d, templateObject_3$b, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$2;
21616
+ var templateObject_1$g, templateObject_2$d, templateObject_3$b, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$2;
21606
21617
 
21607
21618
  var components = {
21608
21619
  "default": SelfieCaptureLoadingOverlayDefault,
@@ -21661,37 +21672,39 @@
21661
21672
  _r = _a.verbiage,
21662
21673
  verbiage = _r === void 0 ? {} : _r,
21663
21674
  _s = _a.debugMode,
21664
- debugMode = _s === void 0 ? false : _s;
21665
- var _t = React.useContext(SubmissionContext),
21666
- submissionResponse = _t.submissionResponse,
21667
- livenessCheckRequest = _t.livenessCheckRequest,
21668
- setSelfieImage = _t.setSelfieImage,
21669
- logSelfieCaptureAttempt = _t.logSelfieCaptureAttempt;
21670
- var _u = useCameraStore(useShallow(function (state) {
21675
+ debugMode = _s === void 0 ? false : _s,
21676
+ _t = _a.showLoadingOverlay,
21677
+ showLoadingOverlay = _t === void 0 ? true : _t;
21678
+ var _u = React.useContext(SubmissionContext),
21679
+ submissionResponse = _u.submissionResponse,
21680
+ livenessCheckRequest = _u.livenessCheckRequest,
21681
+ setSelfieImage = _u.setSelfieImage,
21682
+ logSelfieCaptureAttempt = _u.logSelfieCaptureAttempt;
21683
+ var _v = useCameraStore(useShallow(function (state) {
21671
21684
  return {
21672
21685
  cameraAccessDenied: state.cameraAccessDenied,
21673
21686
  requestCameraAccess: state.requestCameraAccess,
21674
21687
  releaseCameraAccess: state.releaseCameraAccess
21675
21688
  };
21676
21689
  })),
21677
- cameraAccessDenied = _u.cameraAccessDenied,
21678
- requestCameraAccess = _u.requestCameraAccess,
21679
- releaseCameraAccess = _u.releaseCameraAccess;
21680
- var _v = React.useState(''),
21681
- faceCropImageUrl = _v[0],
21682
- setFaceCropImageUrl = _v[1];
21683
- var _w = React.useState(0),
21684
- retryCount = _w[0],
21685
- setRetryCount = _w[1];
21686
- var _x = React.useState('LOADING'),
21687
- captureState = _x[0],
21688
- setCaptureState = _x[1];
21690
+ cameraAccessDenied = _v.cameraAccessDenied,
21691
+ requestCameraAccess = _v.requestCameraAccess,
21692
+ releaseCameraAccess = _v.releaseCameraAccess;
21693
+ var _w = React.useState(''),
21694
+ faceCropImageUrl = _w[0],
21695
+ setFaceCropImageUrl = _w[1];
21696
+ var _x = React.useState(0),
21697
+ retryCount = _x[0],
21698
+ setRetryCount = _x[1];
21699
+ var _y = React.useState(showLoadingOverlay ? 'LOADING' : 'CAPTURING'),
21700
+ captureState = _y[0],
21701
+ setCaptureState = _y[1];
21689
21702
  var captureStartedAt = React.useRef();
21690
21703
  var operationStartedAt = React.useRef();
21691
21704
  var livenessScore = React.useRef();
21692
- var _y = React.useContext(SelfieGuidanceModelsContext),
21693
- start = _y.start,
21694
- stop = _y.stop;
21705
+ var _z = React.useContext(SelfieGuidanceModelsContext),
21706
+ start = _z.start,
21707
+ stop = _z.stop;
21695
21708
  React.useEffect(function () {
21696
21709
  if (precapturedDocuments === null || precapturedDocuments === void 0 ? void 0 : precapturedDocuments.selfie) {
21697
21710
  setSelfieImage(precapturedDocuments.selfie.imageData);
@@ -21701,7 +21714,7 @@
21701
21714
  if (captureState !== 'CAPTURING') return;
21702
21715
  operationStartedAt.current = new Date();
21703
21716
  captureStartedAt.current = undefined;
21704
- start();
21717
+ setTimeout(start, 1);
21705
21718
  return stop;
21706
21719
  }, [captureState, precapturedDocuments === null || precapturedDocuments === void 0 ? void 0 : precapturedDocuments.selfie, setSelfieImage, start, stop]);
21707
21720
  var onCapture = React.useCallback(function () {
@@ -21775,9 +21788,9 @@
21775
21788
  }
21776
21789
  onDenied === null || onDenied === void 0 ? void 0 : onDenied(submissionResponse, livenessCheckRequest);
21777
21790
  }, [allowLivenessFailure, onDenied, submissionResponse, livenessCheckRequest]);
21778
- var _z = React.useState(0),
21779
- attempt = _z[0],
21780
- setAttempt = _z[1];
21791
+ var _0 = React.useState(0),
21792
+ attempt = _0[0],
21793
+ setAttempt = _0[1];
21781
21794
  var onExitCallback = React.useCallback(function () {
21782
21795
  setAttempt(function (n) {
21783
21796
  return n + 1;
@@ -21876,7 +21889,7 @@
21876
21889
  default:
21877
21890
  return null;
21878
21891
  }
21879
- }(), /*#__PURE__*/React.createElement(SelfieCaptureLoadingOverlay, {
21892
+ }(), showLoadingOverlay && ( /*#__PURE__*/React.createElement(SelfieCaptureLoadingOverlay, {
21880
21893
  key: attempt,
21881
21894
  mode: loadingOverlayMode,
21882
21895
  customOverlayContent: customOverlayContent,
@@ -21887,7 +21900,7 @@
21887
21900
  onUserCancel: onUserCancel,
21888
21901
  onDismissed: onLoadingOverlayDismissedCallback,
21889
21902
  waitForIdCaptureModels: waitForIdCaptureModels
21890
- }));
21903
+ })));
21891
21904
  };
21892
21905
 
21893
21906
  var SubmissionSuccess = function SubmissionSuccess() {
@@ -21910,7 +21923,7 @@
21910
21923
  }
21911
21924
  return JSON.stringify(body, null, 2);
21912
21925
  }, [submissionRequest, truncateImages]);
21913
- return /*#__PURE__*/React.createElement(Container$4, null, /*#__PURE__*/React.createElement("h3", null, "Submission completed!"), /*#__PURE__*/React.createElement(LoaderButton, {
21926
+ return /*#__PURE__*/React.createElement(Container$5, null, /*#__PURE__*/React.createElement("h3", null, "Submission completed!"), /*#__PURE__*/React.createElement(LoaderButton, {
21914
21927
  onClick: function onClick() {
21915
21928
  return setShowRequestBody(!showRequestBody);
21916
21929
  }
@@ -21923,13 +21936,13 @@
21923
21936
  }
21924
21937
  }, truncateImages ? 'Display full images' : 'Truncate images'), /*#__PURE__*/React.createElement("h5", null, "Request Body"), /*#__PURE__*/React.createElement("pre", null, requestBodyDisplay))), /*#__PURE__*/React.createElement("h5", null, "Response Body"), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(submissionResponse, null, 2)));
21925
21938
  };
21926
- var Container$4 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n padding: 16px;\n overflow: auto;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n"], ["\n padding: 16px;\n overflow: auto;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n"])));
21939
+ var Container$5 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n padding: 16px;\n overflow: auto;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n"], ["\n padding: 16px;\n overflow: auto;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n"])));
21927
21940
  function truncate(str, max_chars) {
21928
21941
  var truncated = str.split('').splice(0, max_chars).join('');
21929
21942
  if (truncated.length < str.length) truncated += '...';
21930
21943
  return truncated;
21931
21944
  }
21932
- var templateObject_1$e;
21945
+ var templateObject_1$f;
21933
21946
 
21934
21947
  var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
21935
21948
  var document = _a.document,
@@ -22005,11 +22018,11 @@
22005
22018
  }
22006
22019
  }, verbiage.captureBtnText)))));
22007
22020
  };
22008
- var Inner$2 = styled(OverlayInner$2)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
22021
+ var Inner$2 = styled(OverlayInner$2)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
22009
22022
  var Heading$4 = styled.h3(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
22010
22023
  var Description = styled.p(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
22011
22024
  var StyledButtonsRow$4 = styled(ButtonsRow$2)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
22012
- var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$5;
22025
+ var templateObject_1$e, templateObject_2$c, templateObject_3$a, templateObject_4$5;
22013
22026
 
22014
22027
  var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_a) {
22015
22028
  var documents = _a.documents,
@@ -22927,7 +22940,7 @@
22927
22940
  });
22928
22941
  }
22929
22942
 
22930
- 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) {
22943
+ var SignaturePaperBacking = styled.div(templateObject_1$d || (templateObject_1$d = __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) {
22931
22944
  var _a, _b;
22932
22945
  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, ";") : "";
22933
22946
  }, function (props) {
@@ -22938,7 +22951,7 @@
22938
22951
  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, ";") : "";
22939
22952
  });
22940
22953
  var SignatureCanvasContainer$1 = styled.div(templateObject_2$b || (templateObject_2$b = __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"])));
22941
- var SignaturePad = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n position: relative;\n background: ", ";\n border: ", ";\n border-radius: ", ";\n flex-grow: 1;\n z-index: 100;\n height: 100%;\n\n &.empty {\n background: ", ";\n border: ", ";\n }\n"], ["\n position: relative;\n background: ", ";\n border: ", ";\n border-radius: ", ";\n flex-grow: 1;\n z-index: 100;\n height: 100%;\n\n &.empty {\n background: ", ";\n border: ", ";\n }\n"])), function (props) {
22954
+ var SignaturePad = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n position: relative;\n background: ", ";\n border: ", ";\n border-radius: ", ";\n flex-grow: 1;\n z-index: 100;\n height: 100%;\n\n &.empty {\n background: ", ";\n border: ", ";\n color: ", ";\n }\n\n &.head-tracking-unsatisfied {\n background: ", ";\n border: ", ";\n color: ", ";\n }\n"], ["\n position: relative;\n background: ", ";\n border: ", ";\n border-radius: ", ";\n flex-grow: 1;\n z-index: 100;\n height: 100%;\n\n &.empty {\n background: ", ";\n border: ", ";\n color: ", ";\n }\n\n &.head-tracking-unsatisfied {\n background: ", ";\n border: ", ";\n color: ", ";\n }\n"])), function (props) {
22942
22955
  var _a, _b, _c;
22943
22956
  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)';
22944
22957
  }, function (props) {
@@ -22953,9 +22966,21 @@
22953
22966
  }, function (props) {
22954
22967
  var _a, _b, _c;
22955
22968
  return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.emptyBorder) !== null && _c !== void 0 ? _c : "1px solid #dedede";
22969
+ }, function (props) {
22970
+ var _a, _b, _c;
22971
+ return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.emptyTextColor) !== null && _c !== void 0 ? _c : 'black';
22972
+ }, function (props) {
22973
+ var _a, _b, _c;
22974
+ return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.headTrackingUnsatisfiedBackground) !== null && _c !== void 0 ? _c : 'rgba(255, 255, 255, 0.5)';
22975
+ }, function (props) {
22976
+ var _a, _b, _c;
22977
+ return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.headTrackingUnsatisfiedBorder) !== null && _c !== void 0 ? _c : "1px solid #dedede";
22978
+ }, function (props) {
22979
+ var _a, _b, _c;
22980
+ return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.headTrackingUnsatisfiedTextColor) !== null && _c !== void 0 ? _c : 'black';
22956
22981
  });
22957
22982
  var SignatureButtonsContainer = styled(ButtonsRow$2)(templateObject_4$4 || (templateObject_4$4 = __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"])));
22958
- var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$4;
22983
+ var templateObject_1$d, templateObject_2$b, templateObject_3$9, templateObject_4$4;
22959
22984
 
22960
22985
  var SignatureCapture = function SignatureCapture(_a) {
22961
22986
  var onAccept = _a.onAccept,
@@ -22990,7 +23015,7 @@
22990
23015
  });
22991
23016
  });
22992
23017
  }
22993
- return /*#__PURE__*/React.createElement(Container$3, {
23018
+ return /*#__PURE__*/React.createElement(Container$4, {
22994
23019
  className: classNames.container
22995
23020
  }, /*#__PURE__*/React.createElement(SignaturePaperBacking, {
22996
23021
  className: classNames.inner
@@ -23028,9 +23053,9 @@
23028
23053
  finished: true
23029
23054
  }, verbiage.acceptBtnText)))));
23030
23055
  };
23031
- var Container$3 = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n position: relative;\n"], ["\n width: 100%;\n height: 100%;\n position: relative;\n"])));
23056
+ var Container$4 = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n position: relative;\n"], ["\n width: 100%;\n height: 100%;\n position: relative;\n"])));
23032
23057
  var AcceptBtn$1 = styled(LoaderButton)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
23033
- var templateObject_1$b, templateObject_2$a;
23058
+ var templateObject_1$c, templateObject_2$a;
23034
23059
 
23035
23060
  var useVideoRecorder = function useVideoRecorder(camera, audioStream, mergeAVStreams) {
23036
23061
  if (mergeAVStreams === void 0) {
@@ -23412,23 +23437,26 @@
23412
23437
  _d = _a.minSignaturePadPoints,
23413
23438
  minSignaturePadPoints = _d === void 0 ? DEFAULT_MIN_SIGNATURE_PAD_POINTS : _d,
23414
23439
  signaturePadEmptyContent = _a.signaturePadEmptyContent,
23415
- _e = _a.classNames,
23416
- classNames = _e === void 0 ? {} : _e,
23417
- _f = _a.verbiage,
23418
- rawVerbiage = _f === void 0 ? {} : _f;
23419
- var _g = useResizeObserver(),
23420
- ref = _g.ref,
23421
- width = _g.width,
23422
- height = _g.height;
23423
- var _h = useVideoSignatureContext(),
23424
- signaturePad = _h.signaturePad,
23425
- onAcceptClicked = _h.onAcceptClicked;
23426
- var _j = React.useState(true),
23427
- signaturePadEmpty = _j[0],
23428
- setSignaturePadEmpty = _j[1];
23429
- var _k = React.useState(false),
23430
- signatureValid = _k[0],
23431
- setSignatureValid = _k[1];
23440
+ headTrackingUnsatisfiedContent = _a.headTrackingUnsatisfiedContent,
23441
+ _e = _a.headTrackingSatisfied,
23442
+ headTrackingSatisfied = _e === void 0 ? true : _e,
23443
+ _f = _a.classNames,
23444
+ classNames = _f === void 0 ? {} : _f,
23445
+ _g = _a.verbiage,
23446
+ rawVerbiage = _g === void 0 ? {} : _g;
23447
+ var _h = useResizeObserver(),
23448
+ ref = _h.ref,
23449
+ width = _h.width,
23450
+ height = _h.height;
23451
+ var _j = useVideoSignatureContext(),
23452
+ signaturePad = _j.signaturePad,
23453
+ onAcceptClicked = _j.onAcceptClicked;
23454
+ var _k = React.useState(true),
23455
+ signaturePadEmpty = _k[0],
23456
+ setSignaturePadEmpty = _k[1];
23457
+ var _l = React.useState(false),
23458
+ signatureValid = _l[0],
23459
+ setSignatureValid = _l[1];
23432
23460
  var verbiage = useTranslations(rawVerbiage, {
23433
23461
  clearSignatureBtnText: 'Clear',
23434
23462
  acceptSignatureBtnText: 'Accept'
@@ -23442,10 +23470,11 @@
23442
23470
  }, [classNames.signatureCanvas, height, width]);
23443
23471
  var isSigning = requestedAction === 'CAPTURE_SIGNATURE';
23444
23472
  var canClear = isSigning && !signaturePadEmpty;
23445
- var canSubmit = isSigning && signatureValid;
23473
+ var canSubmit = isSigning && signatureValid && headTrackingSatisfied;
23446
23474
  var displayEmptyState = requestedAction === 'CAPTURE_SIGNATURE' && signaturePadEmpty;
23447
23475
  var EmptyContent = signaturePadEmptyContent;
23448
- return /*#__PURE__*/React.createElement(Container$2, {
23476
+ var HeadTrackingUnsatisfiedContent = headTrackingUnsatisfiedContent;
23477
+ return /*#__PURE__*/React.createElement(Container$3, {
23449
23478
  className: classNames.container
23450
23479
  }, /*#__PURE__*/React.createElement(Inner$1, {
23451
23480
  className: classNames.inner
@@ -23461,10 +23490,11 @@
23461
23490
  className: classNames.signaturePadContainer
23462
23491
  }, /*#__PURE__*/React.createElement(SignatureCanvasContainer, {
23463
23492
  className: classNames.signatureCanvasContainer,
23464
- "$disabled": requestedAction === 'VERIFY_LIVENESS'
23493
+ "$disabled": requestedAction === 'VERIFY_LIVENESS',
23494
+ "$headTrackingUnsatisfied": !headTrackingSatisfied
23465
23495
  }, /*#__PURE__*/React.createElement(SignaturePad, {
23466
23496
  ref: ref,
23467
- className: clsx(classNames.signatureCanvasInner, displayEmptyState && 'empty')
23497
+ className: clsx(classNames.signatureCanvasInner, displayEmptyState && 'empty', !headTrackingSatisfied && 'head-tracking-unsatisfied')
23468
23498
  }, /*#__PURE__*/React.createElement(SignatureCanvas, {
23469
23499
  ref: signaturePad,
23470
23500
  canvasProps: canvasProps,
@@ -23479,7 +23509,9 @@
23479
23509
  });
23480
23510
  setSignatureValid(points.length >= minSignaturePadPoints);
23481
23511
  }
23482
- }), displayEmptyState && EmptyContent && ( /*#__PURE__*/React.createElement(EmptyContentContainer, {
23512
+ }), !headTrackingSatisfied && HeadTrackingUnsatisfiedContent ? ( /*#__PURE__*/React.createElement(SignaturePadContentContainer, {
23513
+ className: classNames.headTrackingUnsatisfiedContent
23514
+ }, typeof HeadTrackingUnsatisfiedContent === 'string' ? HeadTrackingUnsatisfiedContent : ( /*#__PURE__*/React.createElement(HeadTrackingUnsatisfiedContent, null)))) : displayEmptyState && EmptyContent && ( /*#__PURE__*/React.createElement(SignaturePadContentContainer, {
23483
23515
  className: classNames.emptyContentContainer
23484
23516
  }, typeof EmptyContent === 'string' ? EmptyContent : ( /*#__PURE__*/React.createElement(EmptyContent, null))))), /*#__PURE__*/React.createElement(SignatureButtonsContainer, {
23485
23517
  className: classNames.signatureButtonsRow
@@ -23503,7 +23535,7 @@
23503
23535
  finished: true
23504
23536
  }, verbiage.acceptSignatureBtnText))))));
23505
23537
  }
23506
- var Container$2 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n max-height: 100%;\n position: absolute;\n z-index: 1000;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n font-family: ", ";\n box-sizing: border-box;\n overflow: hidden;\n padding: 40px;\n"], ["\n display: flex;\n max-height: 100%;\n position: absolute;\n z-index: 1000;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n font-family: ", ";\n box-sizing: border-box;\n overflow: hidden;\n padding: 40px;\n"])), function (props) {
23538
+ var Container$3 = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n max-height: 100%;\n position: absolute;\n z-index: 1000;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n font-family: ", ";\n box-sizing: border-box;\n overflow: hidden;\n padding: 40px;\n"], ["\n display: flex;\n max-height: 100%;\n position: absolute;\n z-index: 1000;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n font-family: ", ";\n box-sizing: border-box;\n overflow: hidden;\n padding: 40px;\n"])), function (props) {
23507
23539
  var _a;
23508
23540
  return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
23509
23541
  });
@@ -23511,15 +23543,17 @@
23511
23543
  var FaceGuideContainer$1 = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n position: relative;\n height: 50%;\n"], ["\n position: relative;\n height: 50%;\n"])));
23512
23544
  var StyledSelfieCaptureAnimatedMask = styled(SelfieCaptureAnimatedMaskWithStatus)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n max-width: 100%;\n height: 100%;\n"], ["\n max-width: 100%;\n height: 100%;\n"])));
23513
23545
  var SignaturePadContainer = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n position: relative;\n max-width: 100%;\n height: 50%;\n aspect-ratio: 2;\n"], ["\n position: relative;\n max-width: 100%;\n height: 50%;\n aspect-ratio: 2;\n"])));
23514
- var SignatureCanvasContainer = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: calc(100% - 67px);\n ", "\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: calc(100% - 67px);\n ", "\n"])), function (props) {
23546
+ var SignatureCanvasContainer = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: calc(100% - 67px);\n ", "\n ", "\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: calc(100% - 67px);\n ", "\n ", "\n"])), function (props) {
23515
23547
  return props.$disabled ? 'opacity: 0.5; pointer-events: none;' : '';
23548
+ }, function (props) {
23549
+ return props.$headTrackingUnsatisfied ? 'pointer-events: none;' : '';
23516
23550
  });
23517
23551
  var AcceptBtn = styled(LoaderButton)(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
23518
- var EmptyContentContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n pointer-events: none;\n color: ", ";\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n pointer-events: none;\n color: ", ";\n"])), function (props) {
23552
+ var SignaturePadContentContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n pointer-events: none;\n color: ", ";\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n pointer-events: none;\n color: ", ";\n"])), function (props) {
23519
23553
  var _a, _b, _c;
23520
23554
  return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.emptyTextColor) !== null && _c !== void 0 ? _c : 'black';
23521
23555
  });
23522
- var templateObject_1$a, templateObject_2$9, templateObject_3$8, templateObject_4$3, templateObject_5$3, templateObject_6$2, templateObject_7$1, templateObject_8;
23556
+ var templateObject_1$b, templateObject_2$9, templateObject_3$8, templateObject_4$3, templateObject_5$3, templateObject_6$2, templateObject_7$1, templateObject_8;
23523
23557
 
23524
23558
  var DEFAULT_MIN_SIGNATURE_PAD_POINTS = 10;
23525
23559
  var VideoSignatureCapture = function VideoSignatureCapture(_a) {
@@ -23532,6 +23566,7 @@
23532
23566
  _c = _a.minSignaturePadPoints,
23533
23567
  minSignaturePadPoints = _c === void 0 ? DEFAULT_MIN_SIGNATURE_PAD_POINTS : _c,
23534
23568
  signaturePadEmptyContent = _a.signaturePadEmptyContent,
23569
+ headTrackingUnsatisfiedContent = _a.headTrackingUnsatisfiedContent,
23535
23570
  _d = _a.classNames,
23536
23571
  classNames = _d === void 0 ? {} : _d,
23537
23572
  _e = _a.colors,
@@ -23540,22 +23575,36 @@
23540
23575
  rawVerbiage = _f === void 0 ? {} : _f,
23541
23576
  _g = _a.debugMode,
23542
23577
  debugMode = _g === void 0 ? false : _g;
23543
- var camera = useCameraStore(function (state) {
23544
- return state.camera;
23545
- });
23546
- var onPredictionMade = React.useContext(SelfieGuidanceModelsContext).onPredictionMade;
23547
- var _h = useVideoSignatureContext(),
23548
- signatureData = _h.signatureData,
23549
- signatureDataUrl = _h.signatureDataUrl,
23550
- signatureVideoData = _h.signatureVideoData,
23551
- startRecording = _h.startRecording,
23552
- stopRecording = _h.stopRecording,
23553
- clearRecordedData = _h.clearRecordedData,
23554
- isRecording = _h.isRecording;
23578
+ var _h = useCameraStore(useShallow(function (state) {
23579
+ return {
23580
+ camera: state.camera,
23581
+ videoWidth: state.videoWidth,
23582
+ videoHeight: state.videoHeight
23583
+ };
23584
+ })),
23585
+ camera = _h.camera,
23586
+ videoWidth = _h.videoWidth,
23587
+ videoHeight = _h.videoHeight;
23588
+ var _j = useSelfieGuidanceModelsContext(),
23589
+ onPredictionMade = _j.onPredictionMade,
23590
+ start = _j.start,
23591
+ stop = _j.stop;
23592
+ var _k = useVideoSignatureContext(),
23593
+ signatureData = _k.signatureData,
23594
+ signatureDataUrl = _k.signatureDataUrl,
23595
+ signatureVideoData = _k.signatureVideoData,
23596
+ startRecording = _k.startRecording,
23597
+ stopRecording = _k.stopRecording,
23598
+ clearRecordedData = _k.clearRecordedData,
23599
+ isRecording = _k.isRecording;
23555
23600
  React.useEffect(function () {
23556
23601
  startRecording();
23557
23602
  return stopRecording;
23558
23603
  }, [startRecording, stopRecording]);
23604
+ React.useEffect(function () {
23605
+ setTimeout(start, 1);
23606
+ return stop;
23607
+ }, [start, stop]);
23559
23608
  colors.guidanceMessageBackgroundColor || (colors.guidanceMessageBackgroundColor = '#ccc');
23560
23609
  colors.guidanceMessageTextColor || (colors.guidanceMessageTextColor = 'black');
23561
23610
  var verbiage = useTranslations(rawVerbiage, {
@@ -23566,27 +23615,47 @@
23566
23615
  onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(signatureVideoData, signatureData, signatureDataUrl);
23567
23616
  }
23568
23617
  }, [onVideoCaptured, signatureData, signatureDataUrl, signatureVideoData]);
23569
- var _j = React.useState(0),
23570
- numFramesWithoutFaces = _j[0],
23571
- setNumFramesWithoutFaces = _j[1];
23572
- React.useEffect(function () {
23573
- onPredictionMade(function (_a) {
23574
- var face = _a.face;
23575
- setNumFramesWithoutFaces(face ? 0 : function (n) {
23576
- return n + 1;
23577
- });
23618
+ var _l = React.useState(true),
23619
+ headTrackingSatisfied = _l[0],
23620
+ setHeadTrackingSatisfied = _l[1];
23621
+ var _m = React.useState(null),
23622
+ lastFace = _m[0],
23623
+ setLastFace = _m[1];
23624
+ var _o = React.useState(0),
23625
+ numFramesWithoutFaces = _o[0],
23626
+ setNumFramesWithoutFaces = _o[1];
23627
+ onPredictionMade(f(function (_a) {
23628
+ var face = _a.face;
23629
+ if (!camera) return;
23630
+ var nearBoundary = (face === null || face === void 0 ? void 0 : face.box.xMin) < videoWidth * 0.2 || (face === null || face === void 0 ? void 0 : face.box.xMax) > videoWidth * 0.8 || (face === null || face === void 0 ? void 0 : face.box.yMin) < videoHeight * 0.1 || (face === null || face === void 0 ? void 0 : face.box.yMax) > videoHeight * 0.9;
23631
+ setLastFace(face);
23632
+ setHeadTrackingSatisfied(!!face && !nearBoundary);
23633
+ setNumFramesWithoutFaces(face ? 0 : function (n) {
23634
+ return n + 1;
23578
23635
  });
23579
- }, [onPredictionMade]);
23636
+ }, 16));
23637
+ var _p = useResizeObserver(),
23638
+ ref = _p.ref,
23639
+ _q = _p.width,
23640
+ width = _q === void 0 ? 1 : _q,
23641
+ _r = _p.height,
23642
+ height = _r === void 0 ? 1 : _r;
23643
+ var debugScalingDetails = useDebugScalingDetails({
23644
+ enabled: debugMode,
23645
+ pageWidth: width,
23646
+ pageHeight: height
23647
+ });
23580
23648
  React.useEffect(function () {
23581
23649
  if (numFramesWithoutFaces >= 2) {
23582
23650
  onFaceNotDetected === null || onFaceNotDetected === void 0 ? void 0 : onFaceNotDetected();
23583
23651
  }
23584
23652
  }, [numFramesWithoutFaces, onFaceNotDetected]);
23585
23653
  var GuidesComponent = guidesComponent !== null && guidesComponent !== void 0 ? guidesComponent : VideoSignatureGuides;
23586
- return /*#__PURE__*/React.createElement("div", {
23654
+ return /*#__PURE__*/React.createElement(Container$2, {
23655
+ ref: ref,
23587
23656
  className: classNames.container
23588
23657
  }, verbiage.guidanceMessageText && ( /*#__PURE__*/React.createElement(GuidanceMessageContainer, {
23589
- "$top": "10vh",
23658
+ "$top": "10%",
23590
23659
  className: classNames.guidanceMessageContainer
23591
23660
  }, /*#__PURE__*/React.createElement(GuidanceMessage, {
23592
23661
  className: classNames.guidanceMessage,
@@ -23594,17 +23663,26 @@
23594
23663
  "$textColor": colors.guidanceMessageTextColor
23595
23664
  }, verbiage.guidanceMessageText))), /*#__PURE__*/React.createElement(GuidesComponent, {
23596
23665
  status: "success",
23666
+ key: "video-signature-guides-".concat(headTrackingSatisfied ? 'satisfied' : 'unsatisfied'),
23597
23667
  classNames: classNames.videoSignatureGuidesClassNames,
23598
23668
  minSignaturePadPoints: minSignaturePadPoints,
23599
23669
  signaturePadEmptyContent: signaturePadEmptyContent,
23670
+ headTrackingUnsatisfiedContent: headTrackingUnsatisfiedContent,
23671
+ headTrackingSatisfied: headTrackingSatisfied,
23600
23672
  onClearSignaturePadClicked: restartVideoOnSignaturePadCleared ? function () {
23601
23673
  return setTimeout(clearRecordedData, 100);
23602
23674
  } : undefined
23603
- }), debugMode && ( /*#__PURE__*/React.createElement(DebugStatsPane, null, "Video: ", camera === null || camera === void 0 ? void 0 : camera.width, "x", camera === null || camera === void 0 ? void 0 : camera.height, /*#__PURE__*/React.createElement("br", null), "Recording: ", isRecording ? 'true' : 'false')), /*#__PURE__*/React.createElement(ExitCaptureButton, {
23675
+ }), debugMode && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ObjectDetectionDebugOverlayDiv, null, lastFace && ( /*#__PURE__*/React.createElement(SelfieCaptureFaceDebugBox, {
23676
+ face: lastFace,
23677
+ scaling: debugScalingDetails,
23678
+ color: headTrackingSatisfied ? 'green' : 'red'
23679
+ }))), /*#__PURE__*/React.createElement(DebugStatsPane, null, "Video: ", camera === null || camera === void 0 ? void 0 : camera.width, "x", camera === null || camera === void 0 ? void 0 : camera.height, /*#__PURE__*/React.createElement("br", null), "Recording: ", isRecording ? 'true' : 'false'))), /*#__PURE__*/React.createElement(ExitCaptureButton, {
23604
23680
  onClick: onExit,
23605
23681
  className: classNames.exitCaptureBtn
23606
23682
  }));
23607
23683
  };
23684
+ var Container$2 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
23685
+ var templateObject_1$a;
23608
23686
 
23609
23687
  var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
23610
23688
  var imageUrl = _a.imageUrl,
@@ -23679,6 +23757,7 @@
23679
23757
  _e = _a.minSignaturePadPoints,
23680
23758
  minSignaturePadPoints = _e === void 0 ? DEFAULT_MIN_SIGNATURE_PAD_POINTS : _e,
23681
23759
  signaturePadEmptyContent = _a.signaturePadEmptyContent,
23760
+ headTrackingUnsatisfiedContent = _a.headTrackingUnsatisfiedContent,
23682
23761
  _f = _a.allowSignatureAfterLivenessCheckFailure,
23683
23762
  allowSignatureAfterLivenessCheckFailure = _f === void 0 ? false : _f,
23684
23763
  _g = _a.restartVideoOnSignaturePadCleared,
@@ -23711,7 +23790,7 @@
23711
23790
  var operationStartedAt = React.useRef();
23712
23791
  var captureStartedAt = React.useRef();
23713
23792
  var captureEndedAt = React.useRef();
23714
- var _q = React.useContext(SelfieGuidanceModelsContext),
23793
+ var _q = useSelfieGuidanceModelsContext(),
23715
23794
  start = _q.start,
23716
23795
  stop = _q.stop;
23717
23796
  React.useEffect(function () {
@@ -23726,9 +23805,9 @@
23726
23805
  if (!shouldRun) return;
23727
23806
  start();
23728
23807
  return function () {
23729
- stop();
23808
+ return stop();
23730
23809
  };
23731
- }, [shouldRun, start, stop]);
23810
+ }, [start, stop, shouldRun]);
23732
23811
  var logCaptureMetadata = React.useCallback(function () {
23733
23812
  var _a, _b, _c;
23734
23813
  logSelfieCaptureAttempt({
@@ -23759,12 +23838,16 @@
23759
23838
  setCaptureState('SUCCESS');
23760
23839
  onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(videoData, signatureData, signatureImageData);
23761
23840
  }, [onVideoCaptured, setSignatureData, setSignatureVideoUrl]);
23841
+ var _s = React.useState(true),
23842
+ showLoadingOverlay = _s[0],
23843
+ setShowLoadingOverlay = _s[1];
23762
23844
  var onSignatureCaptureFacesNotDetected = React.useCallback(function () {
23845
+ setShowLoadingOverlay(false);
23763
23846
  setCaptureState('CHECKING_LIVENESS');
23764
23847
  }, []);
23765
- var _s = React.useState(0),
23766
- attempt = _s[0],
23767
- setAttempt = _s[1];
23848
+ var _t = React.useState(0),
23849
+ attempt = _t[0],
23850
+ setAttempt = _t[1];
23768
23851
  var onRetry = React.useCallback(function () {
23769
23852
  onRetryClicked === null || onRetryClicked === void 0 ? void 0 : onRetryClicked();
23770
23853
  setAttempt(function (n) {
@@ -23823,7 +23906,8 @@
23823
23906
  colors: colors.faceLiveness,
23824
23907
  verbiage: verbiage.faceLiveness,
23825
23908
  debugMode: debugMode,
23826
- renderCameraFeed: false
23909
+ renderCameraFeed: false,
23910
+ showLoadingOverlay: showLoadingOverlay
23827
23911
  }));
23828
23912
  case 'CAPTURING_SIGNATURE':
23829
23913
  return /*#__PURE__*/React.createElement(VideoSignatureCapture, {
@@ -23832,6 +23916,7 @@
23832
23916
  onExit: onExitCapture,
23833
23917
  minSignaturePadPoints: minSignaturePadPoints,
23834
23918
  signaturePadEmptyContent: signaturePadEmptyContent,
23919
+ headTrackingUnsatisfiedContent: headTrackingUnsatisfiedContent,
23835
23920
  restartVideoOnSignaturePadCleared: restartVideoOnSignaturePadCleared,
23836
23921
  guidesComponent: guidesComponent,
23837
23922
  classNames: classNames,
@@ -23856,20 +23941,17 @@
23856
23941
  };
23857
23942
  function VideoSignatureWizardGuides(_a) {
23858
23943
  var status = _a.status,
23859
- classNames = _a.classNames,
23860
23944
  _b = _a.restartVideoOnSignaturePadCleared,
23861
23945
  restartVideoOnSignaturePadCleared = _b === void 0 ? true : _b,
23862
- signaturePadEmptyContent = _a.signaturePadEmptyContent;
23946
+ props = __rest(_a, ["status", "restartVideoOnSignaturePadCleared"]);
23863
23947
  var clearRecordedData = useVideoSignatureContext().clearRecordedData;
23864
- return /*#__PURE__*/React.createElement(VideoSignatureGuides, {
23865
- classNames: classNames,
23948
+ return /*#__PURE__*/React.createElement(VideoSignatureGuides, _assign({}, props, {
23866
23949
  faceGuideStatus: status,
23867
- signaturePadEmptyContent: signaturePadEmptyContent,
23868
23950
  requestedAction: status === 'success' ? 'CAPTURE_SIGNATURE' : 'VERIFY_LIVENESS',
23869
23951
  onClearSignaturePadClicked: restartVideoOnSignaturePadCleared ? function () {
23870
23952
  return setTimeout(clearRecordedData, 100);
23871
23953
  } : undefined
23872
- });
23954
+ }));
23873
23955
  }
23874
23956
  var VideoSignatureWizardWithProviders = function VideoSignatureWizardWithProviders(props) {
23875
23957
  var _a, _b;
@@ -24169,103 +24251,103 @@
24169
24251
  flipShortcutThreshold: 0.7
24170
24252
  };
24171
24253
  var IdVideoCapture = function IdVideoCapture(_a) {
24172
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
24254
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
24173
24255
  var onComplete = _a.onComplete,
24174
24256
  onIdFrontImageCaptured = _a.onIdFrontImageCaptured,
24175
24257
  onIdBackImageCaptured = _a.onIdBackImageCaptured,
24176
24258
  onFaceNotDetected = _a.onFaceNotDetected,
24177
24259
  onRecordingFailed = _a.onRecordingFailed,
24178
24260
  onExitCapture = _a.onExitCapture,
24179
- _v = _a.idCaptureModelsEnabled,
24180
- idCaptureModelsEnabled = _v === void 0 ? true : _v,
24181
- _w = _a.idDocumentType,
24182
- idDocumentType = _w === void 0 ? 'idCard' : _w,
24183
- _x = _a.idCaptureGuideImages,
24184
- idCaptureGuideImages = _x === void 0 ? defaultIdCaptureGuideImages : _x,
24185
- _y = _a.idCardFrontDelay,
24186
- idCardFrontDelay = _y === void 0 ? 1000 : _y,
24187
- _z = _a.videoIdCaptureThresholds,
24188
- videoIdCaptureThresholds = _z === void 0 ? defaultVideoIdCaptureThresholds : _z,
24189
- _0 = _a.skipShowIdCardBack,
24190
- skipShowIdCardBack = _0 === void 0 ? false : _0,
24191
- _1 = _a.captureCountdownSeconds,
24192
- captureCountdownSeconds = _1 === void 0 ? 3 : _1,
24261
+ _r = _a.idCaptureModelsEnabled,
24262
+ idCaptureModelsEnabled = _r === void 0 ? true : _r,
24263
+ _s = _a.idDocumentType,
24264
+ idDocumentType = _s === void 0 ? 'idCard' : _s,
24265
+ _t = _a.idCaptureGuideImages,
24266
+ idCaptureGuideImages = _t === void 0 ? defaultIdCaptureGuideImages : _t,
24267
+ _u = _a.idCardFrontDelay,
24268
+ idCardFrontDelay = _u === void 0 ? 1000 : _u,
24269
+ _v = _a.videoIdCaptureThresholds,
24270
+ videoIdCaptureThresholds = _v === void 0 ? defaultVideoIdCaptureThresholds : _v,
24271
+ _w = _a.skipShowIdCardBack,
24272
+ skipShowIdCardBack = _w === void 0 ? false : _w,
24273
+ _x = _a.captureCountdownSeconds,
24274
+ captureCountdownSeconds = _x === void 0 ? 3 : _x,
24193
24275
  readTextPrompt = _a.readTextPrompt,
24194
- _2 = _a.readTextTimeoutDurationMs,
24195
- readTextTimeoutDurationMs = _2 === void 0 ? 15000 : _2,
24196
- _3 = _a.readTextMinReadingMs,
24197
- readTextMinReadingMs = _3 === void 0 ? 10000 : _3,
24198
- _4 = _a.disableFaceDetectionWhileAudioCapture,
24199
- disableFaceDetectionWhileAudioCapture = _4 === void 0 ? false : _4,
24200
- _5 = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
24201
- disableFaceDetectionWhileAudioCaptureMsDelay = _5 === void 0 ? 2000 : _5,
24202
- _6 = _a.mergeAVStreams,
24203
- mergeAVStreams = _6 === void 0 ? false : _6,
24204
- _7 = _a.classNames,
24205
- classNames = _7 === void 0 ? {} : _7,
24206
- _8 = _a.colors,
24207
- colors = _8 === void 0 ? {} : _8,
24208
- _9 = _a.verbiage,
24209
- rawVerbiage = _9 === void 0 ? {} : _9,
24210
- _10 = _a.debugMode,
24211
- debugMode = _10 === void 0 ? false : _10;
24212
- var _11 = useResizeObserver(),
24213
- ref = _11.ref,
24214
- _12 = _11.width,
24215
- width = _12 === void 0 ? 1 : _12,
24216
- _13 = _11.height,
24217
- height = _13 === void 0 ? 1 : _13;
24218
- var _14 = useCameraStore(),
24219
- camera = _14.camera,
24220
- videoRef = _14.videoRef,
24221
- videoLoaded = _14.videoLoaded,
24222
- cameraReady = _14.cameraReady,
24223
- microphoneReady = _14.microphoneReady,
24224
- audioStream = _14.audioStream,
24225
- isRearFacing = _14.isRearFacing,
24226
- releaseCameraAccess = _14.releaseCameraAccess;
24227
- var _15 = React.useState([]),
24228
- detectedObjects = _15[0],
24229
- setDetectedObjects = _15[1];
24230
- var _16 = React.useState(null),
24231
- face = _16[0],
24232
- setFace = _16[1];
24233
- var _17 = React.useContext(IdCaptureModelsContext),
24234
- idModelsReady = _17.ready,
24235
- startIdModels = _17.start,
24236
- stopIdModels = _17.stop,
24237
- onIdPredictionMade = _17.onPredictionMade,
24238
- setThresholds = _17.setThresholds,
24239
- setRequiredDocumentType = _17.setRequiredDocumentType,
24240
- setDocumentDetectionBoundaries = _17.setDocumentDetectionBoundaries,
24241
- bestFrameDetails = _17.bestFrameDetails,
24242
- resetBestFrame = _17.resetBestFrame,
24243
- idModelError = _17.modelError;
24244
- var _18 = React.useState(null),
24245
- videoStartsAt = _18[0],
24246
- setVideoStartsAt = _18[1];
24247
- var _19 = React.useContext(SubmissionContext),
24248
- setIdCaptureVideoAudioStartsAt = _19.setIdCaptureVideoAudioStartsAt,
24249
- setExpectedAudioText = _19.setExpectedAudioText;
24250
- var _20 = React.useContext(SelfieGuidanceModelsContext),
24251
- startSelfieGuidance = _20.start,
24252
- stopSelfieGuidance = _20.stop,
24253
- onSelfiePredictionMade = _20.onPredictionMade,
24254
- selfieModelError = _20.error;
24255
- var _21 = useVideoRecorder(camera, audioStream, mergeAVStreams),
24256
- isRecordingVideo = _21.isRecordingVideo,
24257
- startRecordingVideo = _21.startRecordingVideo,
24258
- startRecordingAudio = _21.startRecordingAudio,
24259
- stopRecordingVideo = _21.stopRecordingVideo,
24260
- stopRecordingAudio = _21.stopRecordingAudio,
24261
- videoRecordingUnintentionallyStopped = _21.videoRecordingUnintentionallyStopped,
24262
- audioRecordingUnintentionallyStopped = _21.audioRecordingUnintentionallyStopped,
24263
- videoUrl = _21.videoUrl,
24264
- audioUrl = _21.audioUrl;
24276
+ _y = _a.readTextTimeoutDurationMs,
24277
+ readTextTimeoutDurationMs = _y === void 0 ? 15000 : _y,
24278
+ _z = _a.readTextMinReadingMs,
24279
+ readTextMinReadingMs = _z === void 0 ? 10000 : _z,
24280
+ _0 = _a.disableFaceDetectionWhileAudioCapture,
24281
+ disableFaceDetectionWhileAudioCapture = _0 === void 0 ? false : _0,
24282
+ _1 = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
24283
+ disableFaceDetectionWhileAudioCaptureMsDelay = _1 === void 0 ? 2000 : _1,
24284
+ _2 = _a.mergeAVStreams,
24285
+ mergeAVStreams = _2 === void 0 ? false : _2,
24286
+ _3 = _a.classNames,
24287
+ classNames = _3 === void 0 ? {} : _3,
24288
+ _4 = _a.colors,
24289
+ colors = _4 === void 0 ? {} : _4,
24290
+ _5 = _a.verbiage,
24291
+ rawVerbiage = _5 === void 0 ? {} : _5,
24292
+ _6 = _a.debugMode,
24293
+ debugMode = _6 === void 0 ? false : _6;
24294
+ var _7 = useResizeObserver(),
24295
+ ref = _7.ref,
24296
+ _8 = _7.width,
24297
+ width = _8 === void 0 ? 1 : _8,
24298
+ _9 = _7.height,
24299
+ height = _9 === void 0 ? 1 : _9;
24300
+ var _10 = useCameraStore(),
24301
+ camera = _10.camera,
24302
+ videoRef = _10.videoRef,
24303
+ videoLoaded = _10.videoLoaded,
24304
+ cameraReady = _10.cameraReady,
24305
+ microphoneReady = _10.microphoneReady,
24306
+ audioStream = _10.audioStream,
24307
+ isRearFacing = _10.isRearFacing,
24308
+ releaseCameraAccess = _10.releaseCameraAccess;
24309
+ var _11 = React.useState([]),
24310
+ detectedObjects = _11[0],
24311
+ setDetectedObjects = _11[1];
24312
+ var _12 = React.useState(null),
24313
+ face = _12[0],
24314
+ setFace = _12[1];
24315
+ var _13 = React.useContext(IdCaptureModelsContext),
24316
+ idModelsReady = _13.ready,
24317
+ startIdModels = _13.start,
24318
+ stopIdModels = _13.stop,
24319
+ onIdPredictionMade = _13.onPredictionMade,
24320
+ setThresholds = _13.setThresholds,
24321
+ setRequiredDocumentType = _13.setRequiredDocumentType,
24322
+ setDocumentDetectionBoundaries = _13.setDocumentDetectionBoundaries,
24323
+ bestFrameDetails = _13.bestFrameDetails,
24324
+ resetBestFrame = _13.resetBestFrame,
24325
+ idModelError = _13.modelError;
24326
+ var _14 = React.useState(null),
24327
+ videoStartsAt = _14[0],
24328
+ setVideoStartsAt = _14[1];
24329
+ var _15 = React.useContext(SubmissionContext),
24330
+ setIdCaptureVideoAudioStartsAt = _15.setIdCaptureVideoAudioStartsAt,
24331
+ setExpectedAudioText = _15.setExpectedAudioText;
24332
+ var _16 = React.useContext(SelfieGuidanceModelsContext),
24333
+ startSelfieGuidance = _16.start,
24334
+ stopSelfieGuidance = _16.stop,
24335
+ onSelfiePredictionMade = _16.onPredictionMade,
24336
+ selfieModelError = _16.error;
24337
+ var _17 = useVideoRecorder(camera, audioStream, mergeAVStreams),
24338
+ isRecordingVideo = _17.isRecordingVideo,
24339
+ startRecordingVideo = _17.startRecordingVideo,
24340
+ startRecordingAudio = _17.startRecordingAudio,
24341
+ stopRecordingVideo = _17.stopRecordingVideo,
24342
+ stopRecordingAudio = _17.stopRecordingAudio,
24343
+ videoRecordingUnintentionallyStopped = _17.videoRecordingUnintentionallyStopped,
24344
+ audioRecordingUnintentionallyStopped = _17.audioRecordingUnintentionallyStopped,
24345
+ videoUrl = _17.videoUrl,
24346
+ audioUrl = _17.audioUrl;
24265
24347
  var countdownTimeoutRef = React.useRef(undefined);
24266
- var _22 = React.useState(-1),
24267
- countdownRemaining = _22[0],
24268
- setCountdownRemaining = _22[1];
24348
+ var _18 = React.useState(-1),
24349
+ countdownRemaining = _18[0],
24350
+ setCountdownRemaining = _18[1];
24269
24351
  React.useEffect(function () {
24270
24352
  if (!isRecordingVideo && !videoUrl) {
24271
24353
  startRecordingVideo();
@@ -24285,9 +24367,9 @@
24285
24367
  onRecordingFailed === null || onRecordingFailed === void 0 ? void 0 : onRecordingFailed();
24286
24368
  }
24287
24369
  }, [audioRecordingUnintentionallyStopped, microphoneReady, onRecordingFailed, readTextPrompt, videoRecordingUnintentionallyStopped]);
24288
- var _23 = React.useState(idDocumentType === 'idCard' ? 'SHOW_ID_FRONT' : 'SHOW_PASSPORT'),
24289
- requestedAction = _23[0],
24290
- setRequestedAction = _23[1];
24370
+ var _19 = React.useState(idDocumentType === 'idCard' ? 'SHOW_ID_FRONT' : 'SHOW_PASSPORT'),
24371
+ requestedAction = _19[0],
24372
+ setRequestedAction = _19[1];
24291
24373
  var shouldRunIdModels = idCaptureModelsEnabled && videoLoaded && cameraReady && idModelsReady && !idModelError && requestedAction !== 'READ_TEXT' && (!readTextPrompt || microphoneReady);
24292
24374
  React.useEffect(function startModelsWhenCapturing() {
24293
24375
  if (!shouldRunIdModels) return;
@@ -24326,23 +24408,23 @@
24326
24408
  bottom: 0
24327
24409
  });
24328
24410
  }, [setDocumentDetectionBoundaries]);
24329
- var _24 = React.useState(0),
24330
- currentDetectionScore = _24[0],
24331
- setCurrentDetectionScore = _24[1];
24332
- var _25 = React.useState('none'),
24333
- currentDetectedDocumentType = _25[0],
24334
- setCurrentDetectedDocumentType = _25[1];
24335
- var _26 = React.useState(0),
24336
- currentFocusScore = _26[0],
24337
- setCurrentFocusScore = _26[1];
24338
- var _27 = React.useState(0),
24339
- goodFramesCount = _27[0],
24340
- setGoodFramesCount = _27[1];
24411
+ var _20 = React.useState(0),
24412
+ currentDetectionScore = _20[0],
24413
+ setCurrentDetectionScore = _20[1];
24414
+ var _21 = React.useState('none'),
24415
+ currentDetectedDocumentType = _21[0],
24416
+ setCurrentDetectedDocumentType = _21[1];
24417
+ var _22 = React.useState(0),
24418
+ currentFocusScore = _22[0],
24419
+ setCurrentFocusScore = _22[1];
24420
+ var _23 = React.useState(0),
24421
+ goodFramesCount = _23[0],
24422
+ setGoodFramesCount = _23[1];
24341
24423
  var goodFramesThreshold = requestedAction === 'SHOW_PASSPORT' ? adjustedThresholds.goodFrames.passport : requestedAction === 'SHOW_ID_FRONT' ? adjustedThresholds.goodFrames.idCardFront : adjustedThresholds.goodFrames.idCardBack;
24342
24424
  var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
24343
- var _28 = React.useState(false),
24344
- isSinglePage = _28[0],
24345
- setIsSinglePage = _28[1];
24425
+ var _24 = React.useState(false),
24426
+ isSinglePage = _24[0],
24427
+ setIsSinglePage = _24[1];
24346
24428
  React.useEffect(function () {
24347
24429
  if (!idCaptureModelsEnabled || idModelError) return;
24348
24430
  onIdPredictionMade(function (prediction) {
@@ -24362,9 +24444,9 @@
24362
24444
  } : 0);
24363
24445
  });
24364
24446
  }, [idCaptureModelsEnabled, onIdPredictionMade, idModelError, requestedAction, adjustedThresholds.flipShortcutThreshold]);
24365
- var _29 = React.useState(null),
24366
- idFrontCaptureStartedAt = _29[0],
24367
- setFirstGoodFrameTime = _29[1];
24447
+ var _25 = React.useState(null),
24448
+ idFrontCaptureStartedAt = _25[0],
24449
+ setFirstGoodFrameTime = _25[1];
24368
24450
  React.useEffect(function () {
24369
24451
  if (goodFramesCount === 1) setFirstGoodFrameTime(new Date().getTime());
24370
24452
  }, [goodFramesCount]);
@@ -24385,9 +24467,9 @@
24385
24467
  var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
24386
24468
  var faceBox = face === null || face === void 0 ? void 0 : face.box;
24387
24469
  var faceCentered = !faceBox || !frameWidth || faceBox.xMin > frameWidth * edgeBoundary && faceBox.yMin > frameHeight * edgeBoundary && faceBox.xMax < frameWidth * (1 - edgeBoundary) && faceBox.yMax < frameHeight * (1 - edgeBoundary);
24388
- var _30 = React.useState(),
24389
- countdownStartedAt = _30[0],
24390
- setCountdownStartedAt = _30[1];
24470
+ var _26 = React.useState(),
24471
+ countdownStartedAt = _26[0],
24472
+ setCountdownStartedAt = _26[1];
24391
24473
  var photoCanvas = React.useRef(null);
24392
24474
  var frameLock = React.useRef(false);
24393
24475
  var captureFrame = React.useCallback(function () {
@@ -24497,9 +24579,9 @@
24497
24579
  stopSelfieGuidance();
24498
24580
  };
24499
24581
  }, [startSelfieGuidance, stopSelfieGuidance]);
24500
- var _31 = React.useState(0),
24501
- numFramesWithoutFaces = _31[0],
24502
- setNumFramesWithoutFaces = _31[1];
24582
+ var _27 = React.useState(0),
24583
+ numFramesWithoutFaces = _27[0],
24584
+ setNumFramesWithoutFaces = _27[1];
24503
24585
  onSelfiePredictionMade(f(React.useCallback(function (_a) {
24504
24586
  var face = _a.face;
24505
24587
  if (selfieModelError) return;
@@ -24515,18 +24597,16 @@
24515
24597
  }
24516
24598
  }, [disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, numFramesWithoutFaces, onFaceNotDetected, timeoutStartedAt]);
24517
24599
  var theme = styled.useTheme();
24518
- var _32 = useTranslations(rawVerbiage, {
24600
+ var _28 = useTranslations(rawVerbiage, {
24519
24601
  faceNotCenteredText: 'Please move your face to the center...',
24520
24602
  captureBtnText: 'Capture'
24521
24603
  }),
24522
- captureBtnText = _32.captureBtnText,
24523
- faceNotCenteredText = _32.faceNotCenteredText;
24604
+ captureBtnText = _28.captureBtnText,
24605
+ faceNotCenteredText = _28.faceNotCenteredText;
24524
24606
  var debugScalingDetails = useDebugScalingDetails({
24525
24607
  enabled: debugMode,
24526
24608
  pageWidth: width,
24527
- pageHeight: height,
24528
- videoWidth: (_g = (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.videoWidth) !== null && _g !== void 0 ? _g : 0,
24529
- videoHeight: (_j = (_h = videoRef.current) === null || _h === void 0 ? void 0 : _h.videoHeight) !== null && _j !== void 0 ? _j : 0
24609
+ pageHeight: height
24530
24610
  });
24531
24611
  var capturingId = ['SHOW_ID_FRONT', 'SHOW_ID_BACK', 'SHOW_PASSPORT'].includes(requestedAction);
24532
24612
  var guidanceText = !faceCentered ? faceNotCenteredText : undefined;
@@ -24571,9 +24651,9 @@
24571
24651
  className: classNames.guidanceMessageContainer
24572
24652
  }, /*#__PURE__*/React.createElement(GuidanceMessage, {
24573
24653
  className: classNames.guidanceMessage,
24574
- "$background": (_m = (_l = (_k = theme.guidanceMessages) === null || _k === void 0 ? void 0 : _k.negative) === null || _l === void 0 ? void 0 : _l.backgroundColor) !== null && _m !== void 0 ? _m : 'red',
24575
- "$textColor": (_q = (_p = (_o = theme.guidanceMessages) === null || _o === void 0 ? void 0 : _o.negative) === null || _p === void 0 ? void 0 : _p.textColor) !== null && _q !== void 0 ? _q : 'white'
24576
- }, guidanceText))), debugMode && ( /*#__PURE__*/React.createElement(DebugStatsPane, null, camera ? ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.createElement("br", null), isRecordingVideo ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React.createElement("br", null), "Document Type: ", currentDetectedDocumentType, /*#__PURE__*/React.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React.createElement("br", null), "Best Frame Detection Score:", ' ', (_s = (_r = bestFrameDetails.current) === null || _r === void 0 ? void 0 : _r.detectionScore) !== null && _s !== void 0 ? _s : 0, /*#__PURE__*/React.createElement("br", null), "Best Frame Focus Score: ", (_u = (_t = bestFrameDetails.current) === null || _t === void 0 ? void 0 : _t.focusScore) !== null && _u !== void 0 ? _u : 0)), countdownRemaining > 0 && capturingId && ( /*#__PURE__*/React.createElement(CountdownContainer, {
24654
+ "$background": (_h = (_g = (_f = theme.guidanceMessages) === null || _f === void 0 ? void 0 : _f.negative) === null || _g === void 0 ? void 0 : _g.backgroundColor) !== null && _h !== void 0 ? _h : 'red',
24655
+ "$textColor": (_l = (_k = (_j = theme.guidanceMessages) === null || _j === void 0 ? void 0 : _j.negative) === null || _k === void 0 ? void 0 : _k.textColor) !== null && _l !== void 0 ? _l : 'white'
24656
+ }, guidanceText))), debugMode && ( /*#__PURE__*/React.createElement(DebugStatsPane, null, camera ? ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.createElement("br", null), isRecordingVideo ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React.createElement("br", null), "Document Type: ", currentDetectedDocumentType, /*#__PURE__*/React.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React.createElement("br", null), "Best Frame Detection Score:", ' ', (_o = (_m = bestFrameDetails.current) === null || _m === void 0 ? void 0 : _m.detectionScore) !== null && _o !== void 0 ? _o : 0, /*#__PURE__*/React.createElement("br", null), "Best Frame Focus Score: ", (_q = (_p = bestFrameDetails.current) === null || _p === void 0 ? void 0 : _p.focusScore) !== null && _q !== void 0 ? _q : 0)), countdownRemaining > 0 && capturingId && ( /*#__PURE__*/React.createElement(CountdownContainer, {
24577
24657
  className: classNames.countdownContainer
24578
24658
  }, /*#__PURE__*/React.createElement(Countdown, {
24579
24659
  className: classNames.countdown
@@ -27560,6 +27640,7 @@
27560
27640
  _f = _a.minSignaturePadPoints,
27561
27641
  minSignaturePadPoints = _f === void 0 ? DEFAULT_MIN_SIGNATURE_PAD_POINTS : _f,
27562
27642
  signaturePadEmptyContent = _a.signaturePadEmptyContent,
27643
+ headTrackingUnsatisfiedContent = _a.headTrackingUnsatisfiedContent,
27563
27644
  _g = _a.modelLoadTimeoutMs,
27564
27645
  modelLoadTimeoutMs = _g === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _g,
27565
27646
  _h = _a.allowSignatureAfterLivenessCheckFailure,
@@ -27621,6 +27702,7 @@
27621
27702
  captureAudio: captureAudio,
27622
27703
  minSignaturePadPoints: minSignaturePadPoints,
27623
27704
  signaturePadEmptyContent: signaturePadEmptyContent,
27705
+ headTrackingUnsatisfiedContent: headTrackingUnsatisfiedContent,
27624
27706
  modelLoadTimeoutMs: modelLoadTimeoutMs,
27625
27707
  faceLivenessProps: faceLivenessProps,
27626
27708
  allowSignatureAfterLivenessCheckFailure: allowSignatureAfterLivenessCheckFailure,
@@ -27632,7 +27714,7 @@
27632
27714
  onModelError: onModelError,
27633
27715
  onUserCancel: onUserCancel
27634
27716
  };
27635
- }, [customOverlayContent, onLoadingOverlayDismissed, loadingOverlayMode, skipSuccessScreen, captureAudio, minSignaturePadPoints, signaturePadEmptyContent, modelLoadTimeoutMs, faceLivenessProps, allowSignatureAfterLivenessCheckFailure, restartVideoOnSignaturePadCleared, classNames, colors, debugMode, verbiage, onModelError, onUserCancel])
27717
+ }, [customOverlayContent, onLoadingOverlayDismissed, loadingOverlayMode, skipSuccessScreen, captureAudio, minSignaturePadPoints, signaturePadEmptyContent, headTrackingUnsatisfiedContent, modelLoadTimeoutMs, faceLivenessProps, allowSignatureAfterLivenessCheckFailure, restartVideoOnSignaturePadCleared, classNames, colors, debugMode, verbiage, onModelError, onUserCancel])
27636
27718
  })))));
27637
27719
  };
27638
27720