idmission-web-sdk 2.1.59 → 2.1.60

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.
@@ -234,7 +234,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
234
234
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
235
235
  };
236
236
 
237
- var webSdkVersion = '2.1.59';
237
+ var webSdkVersion = '2.1.60';
238
238
 
239
239
  function getPlatform() {
240
240
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -391,7 +391,7 @@ function videoDataUrlToB64(url) {
391
391
  });
392
392
  }
393
393
 
394
- var PageContainerDiv = styled__default.default.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n\n ", "\n\n &.flex {\n display: flex;\n }\n\n &.padded {\n box-sizing: border-box;\n padding: 16px 24px;\n }\n"], ["\n ", "\n\n ", "\n\n &.flex {\n display: flex;\n }\n\n &.padded {\n box-sizing: border-box;\n padding: 16px 24px;\n }\n"])), function (props) {
394
+ var PageContainerDiv = styled__default.default.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n ", "\n\n ", "\n\n &.flex {\n display: flex;\n }\n\n &.padded {\n box-sizing: border-box;\n padding: 16px 24px;\n }\n"], ["\n ", "\n\n ", "\n\n &.flex {\n display: flex;\n }\n\n &.padded {\n box-sizing: border-box;\n padding: 16px 24px;\n }\n"])), function (props) {
395
395
  var _a;
396
396
  return props.theme.isFullscreen === false ? "" : "\n position: fixed;\n top: 0;\n left: 0;\n width: var(--app-width);\n height: calc(\n var(--app-height) - ".concat((_a = props.$heightOffset) !== null && _a !== void 0 ? _a : 0, "px\n );\n overflow-x: hidden;\n overflow-y: auto;\n ");
397
397
  }, function (props) {
@@ -431,22 +431,7 @@ var PageContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
431
431
  }, dimensionsCalculated && children);
432
432
  });
433
433
  PageContainer.displayName = 'PageContainer';
434
- var templateObject_1$I;
435
-
436
- var OverlayContainer = styled__default.default(PageContainer)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n background: ", ";\n ", "\n z-index: 10000;\n"], ["\n background: ", ";\n ", "\n z-index: 10000;\n"])), function (props) {
437
- return props.theme.background ? "".concat(props.theme.background) : "white";
438
- }, function (props) {
439
- return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
440
- });
441
- var OverlayInner$2 = styled__default.default.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n max-height: var(--app-height);\n height: 100%;\n ", "\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n max-height: var(--app-height);\n height: 100%;\n ", "\n"])), function (props) {
442
- var _a;
443
- return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
444
- }, function (props) {
445
- return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
446
- });
447
- var OverlayImageContainer = styled__default.default.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n max-width: var(--app-width);\n max-height: var(--app-height);\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"], ["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n max-width: var(--app-width);\n max-height: var(--app-height);\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"])));
448
- var OverlayImageRow = styled__default.default.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100vh - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"], ["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100vh - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"])));
449
- var templateObject_1$H, templateObject_2$w, templateObject_3$q, templateObject_4$k;
434
+ var templateObject_1$J;
450
435
 
451
436
  var LoaderButton = function LoaderButton(_a) {
452
437
  var children = _a.children,
@@ -505,11 +490,30 @@ var LoaderButton = function LoaderButton(_a) {
505
490
  className: "ladda-label"
506
491
  }, children));
507
492
  };
508
- var StyledButton = styled__default.default.button(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"], ["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"])), function (props) {
493
+ var StyledButton = styled__default.default.button(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"], ["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"])), function (props) {
509
494
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
510
495
  return ((_a = props.theme.buttons) === null || _a === void 0 ? void 0 : _a.style) === 'bootstrap' && "\n border-radius: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n text-transform: none;\n -webkit-appearance: button;\n \n &:not(:disabled),\n &[type='button']:not(:disabled),\n &[type='reset']:not(:disabled),\n &[type='submit']:not(:disabled) {\n cursor: pointer;\n }\n \n &:focus:not(:focus-visible) {\n outline: 0;\n }\n \n --bs-btn-padding-x: 0.75rem;\n --bs-btn-padding-y: 0.375rem;\n --bs-btn-font-family: ;\n --bs-btn-font-size: 1rem;\n --bs-btn-font-weight: 400;\n --bs-btn-line-height: 1.5;\n --bs-btn-color: var(--bs-body-color);\n --bs-btn-bg: transparent;\n --bs-btn-border-width: var(--bs-border-width);\n --bs-btn-border-color: transparent;\n --bs-btn-border-radius: var(--bs-border-radius);\n --bs-btn-hover-border-color: transparent;\n --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),\n 0 1px 1px rgba(0, 0, 0, 0.075);\n --bs-btn-disabled-opacity: 0.65;\n --bs-btn-focus-box-shadow: 0 0 0 0.25rem\n rgba(var(--bs-btn-focus-shadow-rgb), 0.5);\n display: inline-block;\n padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);\n font-family: var(--bs-btn-font-family);\n font-size: var(--bs-btn-font-size);\n font-weight: var(--bs-btn-font-weight);\n line-height: var(--bs-btn-line-height);\n color: var(--bs-btn-color);\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);\n border-radius: var(--bs-btn-border-radius);\n background-color: var(--bs-btn-bg);\n //transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,\n // border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n \n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n \n &:hover {\n filter: brightness(1.15);\n }\n \n &:focus-visible {\n color: var(--bs-btn-hover-color);\n background-color: var(--bs-btn-hover-bg);\n border-color: var(--bs-btn-hover-border-color);\n outline: 0;\n box-shadow: var(--bs-btn-focus-box-shadow);\n }\n \n &:disabled,\n &.disabled,\n fieldset:disabled & {\n color: var(--bs-btn-disabled-color);\n pointer-events: none;\n background-color: var(--bs-btn-disabled-bg);\n border-color: var(--bs-btn-disabled-border-color);\n opacity: var(--bs-btn-disabled-opacity);\n }\n \n --bs-btn-color: ".concat((_f = (_b = props.$textColor) !== null && _b !== void 0 ? _b : (_e = (_c = props.theme.buttons) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'primary']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : '#fff', ";\n --bs-btn-bg: ").concat((_l = (_g = props.$backgroundColor) !== null && _g !== void 0 ? _g : (_k = (_h = props.theme.buttons) === null || _h === void 0 ? void 0 : _h[(_j = props.$variant) !== null && _j !== void 0 ? _j : 'primary']) === null || _k === void 0 ? void 0 : _k.backgroundColor) !== null && _l !== void 0 ? _l : '#0d6efd', ";\n --bs-btn-border-color: var(--bs-btn-bg);\n --bs-btn-focus-shadow-rgb: 49, 132, 253;\n --bs-btn-active-color: #fff;\n --bs-btn-active-bg: #0a58ca;\n --bs-btn-active-border-color: #0a53be;\n --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --bs-btn-disabled-color: ").concat((_q = (_m = props.$disabledTextColor) !== null && _m !== void 0 ? _m : (_p = (_o = props.theme.buttons) === null || _o === void 0 ? void 0 : _o.loading) === null || _p === void 0 ? void 0 : _p.textColor) !== null && _q !== void 0 ? _q : '#fff', ";\n --bs-btn-disabled-bg: ").concat((_u = (_r = props.$disabledBackgroundColor) !== null && _r !== void 0 ? _r : (_t = (_s = props.theme.buttons) === null || _s === void 0 ? void 0 : _s.loading) === null || _t === void 0 ? void 0 : _t.backgroundColor) !== null && _u !== void 0 ? _u : 'gray', ";\n --bs-btn-disabled-border-color: ").concat((_v = props.$disabledBackgroundColor) !== null && _v !== void 0 ? _v : '#0d6efd', ";\n \n --bs-btn-padding-y: 14px;\n --bs-btn-padding-x: 1rem;\n --bs-btn-font-size: 18px;\n --bs-btn-border-radius: 4px;\n ");
511
496
  });
512
- var templateObject_1$G;
497
+ var templateObject_1$I;
498
+
499
+ var OverlayContainer = styled__default.default(PageContainer)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n background: ", ";\n ", "\n z-index: 10000;\n"], ["\n background: ", ";\n ", "\n z-index: 10000;\n"])), function (props) {
500
+ return props.theme.background ? "".concat(props.theme.background) : "white";
501
+ }, function (props) {
502
+ return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
503
+ });
504
+ var OverlayInner$2 = styled__default.default.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n max-width: 100dvw;\n max-height: 100dvh;\n width: 100%;\n height: 100%;\n ", "\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n max-width: 100dvw;\n max-height: 100dvh;\n width: 100%;\n height: 100%;\n ", "\n"])), function (props) {
505
+ var _a;
506
+ return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
507
+ }, function (props) {
508
+ return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
509
+ });
510
+ var OverlayImageContainer = styled__default.default.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n max-width: 100dvw;\n max-height: 100dvh;\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"], ["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n max-width: 100dvw;\n max-height: 100dvh;\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"])));
511
+ var OverlayImageRow = styled__default.default.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100vh - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"], ["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100vh - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"])));
512
+ var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n background: #f7f6fb;\n"], ["\n background: #f7f6fb;\n"])));
513
+ var ButtonsColumn = styled__default.default.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"])));
514
+ var WideButton = styled__default.default(LoaderButton)(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n width: 100%;\n border-radius: 30px;\n"], ["\n width: 100%;\n border-radius: 30px;\n"])));
515
+ var WideBorderButton = styled__default.default(WideButton)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n color: black;\n background: white;\n border: 1px solid var(--idm-color-secondary-500);\n box-sizing: border-box;\n"], ["\n color: black;\n background: white;\n border: 1px solid var(--idm-color-secondary-500);\n box-sizing: border-box;\n"])));
516
+ var templateObject_1$H, templateObject_2$y, templateObject_3$p, templateObject_4$j, templateObject_5$c, templateObject_6$9, templateObject_7$6, templateObject_8$3;
513
517
 
514
518
  var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
515
519
  var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -756,7 +760,7 @@ var SessionValidationErrorOverlay = function SessionValidationErrorOverlay(_a) {
756
760
  }, retryText)))));
757
761
  };
758
762
 
759
- var Spinner = styled__default.default.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: inline-block;\n width: ", "px;\n height: ", "px;\n margin: auto;\n\n &:after {\n content: ' ';\n display: block;\n width: ", "px;\n height: ", "px;\n margin: 8px;\n border-radius: 50%;\n border: ", "px solid\n ", ";\n border-color: ", " transparent\n ", " transparent;\n animation: lds-dual-ring 1.2s linear infinite;\n box-sizing: content-box;\n }\n\n @keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"], ["\n display: inline-block;\n width: ", "px;\n height: ", "px;\n margin: auto;\n\n &:after {\n content: ' ';\n display: block;\n width: ", "px;\n height: ", "px;\n margin: 8px;\n border-radius: 50%;\n border: ", "px solid\n ", ";\n border-color: ", " transparent\n ", " transparent;\n animation: lds-dual-ring 1.2s linear infinite;\n box-sizing: content-box;\n }\n\n @keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"])), function (_a) {
763
+ var Spinner = styled__default.default.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n display: inline-block;\n width: ", "px;\n height: ", "px;\n margin: auto;\n\n &:after {\n content: ' ';\n display: block;\n width: ", "px;\n height: ", "px;\n margin: 8px;\n border-radius: 50%;\n border: ", "px solid\n ", ";\n border-color: ", " transparent\n ", " transparent;\n animation: lds-dual-ring 1.2s linear infinite;\n box-sizing: content-box;\n }\n\n @keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"], ["\n display: inline-block;\n width: ", "px;\n height: ", "px;\n margin: auto;\n\n &:after {\n content: ' ';\n display: block;\n width: ", "px;\n height: ", "px;\n margin: 8px;\n border-radius: 50%;\n border: ", "px solid\n ", ";\n border-color: ", " transparent\n ", " transparent;\n animation: lds-dual-ring 1.2s linear infinite;\n box-sizing: content-box;\n }\n\n @keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"])), function (_a) {
760
764
  var $size = _a.$size;
761
765
  return $size !== null && $size !== void 0 ? $size : 80;
762
766
  }, function (_a) {
@@ -781,7 +785,7 @@ var Spinner = styled__default.default.div(templateObject_1$F || (templateObject_
781
785
  var $color = _a.$color;
782
786
  return $color !== null && $color !== void 0 ? $color : '#888';
783
787
  });
784
- var templateObject_1$F;
788
+ var templateObject_1$G;
785
789
 
786
790
  exports.defaultAuthUrl = 'https://portal-api.idmission.com';
787
791
  var allowedAuthUrls = ['https://portal-api.idmission.com', 'https://portal-api-uat.idmission.com', 'https://portal-api-demo.idmission.com', 'https://portal-api-dev.idmission.com', 'http://localhost:10000'];
@@ -1906,7 +1910,7 @@ function getFrameDimensions(frame) {
1906
1910
  return [frameWidth, frameHeight];
1907
1911
  }
1908
1912
 
1909
- var InvisibleCanvas = styled__default.default.canvas(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
1913
+ var InvisibleCanvas = styled__default.default.canvas(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
1910
1914
  function drawToCanvas(canvas, frame, width, height) {
1911
1915
  if (!canvas) return;
1912
1916
  var ctx = canvas.getContext('2d');
@@ -1926,7 +1930,7 @@ function clearCanvas(canvas) {
1926
1930
  var _a;
1927
1931
  (_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);
1928
1932
  }
1929
- var templateObject_1$E;
1933
+ var templateObject_1$F;
1930
1934
 
1931
1935
  function listAvailableCameras(facingMode_1) {
1932
1936
  return __awaiter(this, arguments, void 0, function (facingMode, requestMicAccess) {
@@ -6568,12 +6572,12 @@ function DebugStatsPane(_a) {
6568
6572
  if (!portalLocation) return element;
6569
6573
  return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
6570
6574
  }
6571
- var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$D || (templateObject_1$D = __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"])));
6572
- var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n position: absolute;\n z-index: 1001;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n ", "\n"], ["\n position: absolute;\n z-index: 1001;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n ", "\n"])), function (_a) {
6575
+ var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$E || (templateObject_1$E = __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"])));
6576
+ var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n position: absolute;\n z-index: 1001;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n ", "\n"], ["\n position: absolute;\n z-index: 1001;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n ", "\n"])), function (_a) {
6573
6577
  var $flipX = _a.$flipX;
6574
6578
  return $flipX ? 'transform: scaleX(-1);' : '';
6575
6579
  });
6576
- var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n"], ["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n"])), function (_a) {
6580
+ var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n"], ["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n"])), function (_a) {
6577
6581
  var $color = _a.$color;
6578
6582
  return $color !== null && $color !== void 0 ? $color : 'green';
6579
6583
  }, function (_a) {
@@ -6583,7 +6587,7 @@ var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$p ||
6583
6587
  var $flipX = _a.$flipX;
6584
6588
  return $flipX ? 'transform: scaleX(-1);' : '';
6585
6589
  });
6586
- var FaceDetectionKeypointMarker = styled__default.default.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n"], ["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n"])), function (_a) {
6590
+ var FaceDetectionKeypointMarker = styled__default.default.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n"], ["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n"])), function (_a) {
6587
6591
  var $color = _a.$color;
6588
6592
  return $color !== null && $color !== void 0 ? $color : 'red';
6589
6593
  }, function (_a) {
@@ -6774,7 +6778,7 @@ function SelfieCaptureFaceKeypoint(_a) {
6774
6778
  }
6775
6779
  });
6776
6780
  }
6777
- var templateObject_1$D, templateObject_2$v, templateObject_3$p, templateObject_4$j;
6781
+ var templateObject_1$E, templateObject_2$x, templateObject_3$o, templateObject_4$i;
6778
6782
 
6779
6783
  var enTranslation = {};
6780
6784
 
@@ -6948,7 +6952,7 @@ function useTranslations(verbiage, fallbacks) {
6948
6952
  }, [fallbacks, i18n.language, t, verbiage]);
6949
6953
  }
6950
6954
 
6951
- var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$C || (templateObject_1$C = __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) {
6955
+ var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$D || (templateObject_1$D = __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) {
6952
6956
  var $top = _a.$top;
6953
6957
  return $top !== null && $top !== void 0 ? $top : '10vh';
6954
6958
  }, function (_a) {
@@ -6961,14 +6965,14 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
6961
6965
  if (!portalLocation) return element;
6962
6966
  return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
6963
6967
  };
6964
- var GuidanceMessage = styled__default.default.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n padding: 10px 12px 8px;\n border-radius: 8px;\n z-index: 10001;\n"], ["\n margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n padding: 10px 12px 8px;\n border-radius: 8px;\n z-index: 10001;\n"])), function (props) {
6968
+ var GuidanceMessage = styled__default.default.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n padding: 10px 12px 8px;\n border-radius: 8px;\n z-index: 10001;\n"], ["\n margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n padding: 10px 12px 8px;\n border-radius: 8px;\n z-index: 10001;\n"])), function (props) {
6965
6969
  var _a, _b, _c, _d, _e, _f;
6966
6970
  return (_f = (_a = props.$background) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.backgroundColor) !== null && _f !== void 0 ? _f : '#ccc';
6967
6971
  }, function (props) {
6968
6972
  var _a, _b, _c, _d, _e, _f;
6969
6973
  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';
6970
6974
  });
6971
- var templateObject_1$C, templateObject_2$u;
6975
+ var templateObject_1$D, templateObject_2$w;
6972
6976
 
6973
6977
  function OverrideWrongDocumentTypeGuidanceDialog(_a) {
6974
6978
  var _b = _a.classNames,
@@ -7001,18 +7005,18 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
7001
7005
  }
7002
7006
  }, verbiage.buttonText))));
7003
7007
  }
7004
- var Container$2 = styled__default.default.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100dvw;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"], ["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100dvw;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"])), function (props) {
7008
+ var Container$2 = styled__default.default.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100dvw;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"], ["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100dvw;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"])), function (props) {
7005
7009
  var _a, _b, _c;
7006
7010
  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';
7007
7011
  }, function (props) {
7008
7012
  var _a, _b, _c;
7009
7013
  return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.textColor) !== null && _c !== void 0 ? _c : 'black';
7010
7014
  });
7011
- var InnerContainer = styled__default.default.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"])));
7012
- var Message = styled__default.default.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: block;\n margin: auto 12px auto 0;\n"], ["\n display: block;\n margin: auto 12px auto 0;\n"])));
7013
- var ButtonContainer = styled__default.default.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n margin-left: auto;\n"], ["\n display: flex;\n margin-left: auto;\n"])));
7014
- var Button = styled__default.default(LoaderButton)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n white-space: nowrap;\n margin: auto;\n"], ["\n white-space: nowrap;\n margin: auto;\n"])));
7015
- var templateObject_1$B, templateObject_2$t, templateObject_3$o, templateObject_4$i, templateObject_5$c;
7015
+ var InnerContainer = styled__default.default.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"])));
7016
+ var Message = styled__default.default.span(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: block;\n margin: auto 12px auto 0;\n"], ["\n display: block;\n margin: auto 12px auto 0;\n"])));
7017
+ var ButtonContainer = styled__default.default.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: flex;\n margin-left: auto;\n"], ["\n display: flex;\n margin-left: auto;\n"])));
7018
+ var Button = styled__default.default(LoaderButton)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n white-space: nowrap;\n margin: auto;\n"], ["\n white-space: nowrap;\n margin: auto;\n"])));
7019
+ var templateObject_1$C, templateObject_2$v, templateObject_3$n, templateObject_4$h, templateObject_5$b;
7016
7020
 
7017
7021
  var IdCapture = function IdCapture(_a) {
7018
7022
  var _b, _c, _d, _e, _f, _g, _h, _j;
@@ -7206,13 +7210,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
7206
7210
  finished: true
7207
7211
  }, verbiage.retryBtnText)));
7208
7212
  };
7209
- var StyledOverlayInner$3 = styled__default.default(OverlayInner$2)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
7210
- var StyledOverlayImageContainer$3 = styled__default.default(OverlayImageContainer)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
7211
- var Description$4 = styled__default.default.p(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
7212
- var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
7213
- var templateObject_1$A, templateObject_2$s, templateObject_3$n, templateObject_4$h;
7213
+ var StyledOverlayInner$3 = styled__default.default(OverlayInner$2)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
7214
+ var StyledOverlayImageContainer$3 = styled__default.default(OverlayImageContainer)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
7215
+ var Description$4 = styled__default.default.p(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
7216
+ var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
7217
+ var templateObject_1$B, templateObject_2$u, templateObject_3$m, templateObject_4$g;
7214
7218
 
7215
- var ExitCaptureStyledButton = styled__default.default.button(templateObject_1$z || (templateObject_1$z = __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"])));
7219
+ var ExitCaptureStyledButton = styled__default.default.button(templateObject_1$A || (templateObject_1$A = __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"])));
7216
7220
  var ExitCaptureButton = function ExitCaptureButton(_a) {
7217
7221
  var onClick = _a.onClick,
7218
7222
  className = _a.className;
@@ -7256,10 +7260,10 @@ var ExitCaptureButton = function ExitCaptureButton(_a) {
7256
7260
  y2: "19.75"
7257
7261
  }))));
7258
7262
  };
7259
- var templateObject_1$z;
7263
+ var templateObject_1$A;
7260
7264
 
7261
- var ButtonsRow$1 = styled__default.default.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n"], ["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n"])));
7262
- var templateObject_1$y;
7265
+ var ButtonsRow = styled__default.default.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n"], ["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n"])));
7266
+ var templateObject_1$z;
7263
7267
 
7264
7268
  function IdCaptureLoadingGraphic(props) {
7265
7269
  var isMobile = window.innerHeight > window.innerWidth;
@@ -7897,25 +7901,25 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
7897
7901
  }
7898
7902
  }, verbiage.continueText))))));
7899
7903
  };
7900
- var OverlayInner$1 = styled__default.default.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"], ["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"])), function (props) {
7904
+ var OverlayInner$1 = styled__default.default.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"], ["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"])), function (props) {
7901
7905
  var _a, _b, _c, _d;
7902
7906
  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';
7903
7907
  }, function (props) {
7904
7908
  var _a, _b, _c, _d;
7905
7909
  return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.textColor) !== null && _d !== void 0 ? _d : 'black';
7906
7910
  });
7907
- var OverlayHeader$1 = styled__default.default.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"])), function (props) {
7911
+ var OverlayHeader$1 = styled__default.default.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"])), function (props) {
7908
7912
  var _a;
7909
7913
  return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
7910
7914
  }, function (props) {
7911
7915
  return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
7912
7916
  });
7913
- var StyledGuidanceMessage$2 = styled__default.default(GuidanceMessage)(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
7914
- var StyledOverlayImageContainer$2 = styled__default.default(OverlayImageContainer)(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n padding: 0 0 100px;\n\n & > svg {\n height: 100%;\n }\n"], ["\n padding: 0 0 100px;\n\n & > svg {\n height: 100%;\n }\n"])));
7915
- var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n position: fixed;\n bottom: 120px;\n width: 100dvw;\n display: flex;\n"], ["\n position: fixed;\n bottom: 120px;\n width: 100dvw;\n display: flex;\n"])));
7916
- var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
7917
- var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
7918
- var StyledButtonsRow$a = styled__default.default(ButtonsRow$1)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"])), function (props) {
7917
+ var StyledGuidanceMessage$2 = styled__default.default(GuidanceMessage)(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
7918
+ var StyledOverlayImageContainer$2 = styled__default.default(OverlayImageContainer)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n padding: 0 0 100px;\n\n & > svg {\n height: 100%;\n }\n"], ["\n padding: 0 0 100px;\n\n & > svg {\n height: 100%;\n }\n"])));
7919
+ var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n position: fixed;\n bottom: 120px;\n width: 100dvw;\n display: flex;\n"], ["\n position: fixed;\n bottom: 120px;\n width: 100dvw;\n display: flex;\n"])));
7920
+ var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
7921
+ var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
7922
+ var StyledButtonsRow$a = styled__default.default(ButtonsRow)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"])), function (props) {
7919
7923
  var _a, _b, _c, _d;
7920
7924
  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.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
7921
7925
  }, function (props) {
@@ -7949,10 +7953,10 @@ var ContinueButton$1 = styled__default.default(LoaderButton)(templateObject_18 |
7949
7953
  var _a, _b, _c, _d, _e, _f;
7950
7954
  return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnBorder) ? "border: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.continueBtnBorder, ";") : '';
7951
7955
  });
7952
- var templateObject_1$x, templateObject_2$r, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
7956
+ var templateObject_1$y, templateObject_2$t, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
7953
7957
 
7954
- var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n margin-top: 15px;\n margin-bottom: 15px;\n"], ["\n margin-top: 15px;\n margin-bottom: 15px;\n"])));
7955
- var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
7958
+ var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n margin-top: 15px;\n margin-bottom: 15px;\n"], ["\n margin-top: 15px;\n margin-bottom: 15px;\n"])));
7959
+ var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
7956
7960
  var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
7957
7961
  var _b, _c, _d, _e;
7958
7962
  var onDismissed = _a.onDismissed,
@@ -8063,7 +8067,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
8063
8067
  }
8064
8068
  }, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
8065
8069
  };
8066
- var templateObject_1$w, templateObject_2$q;
8070
+ var templateObject_1$x, templateObject_2$s;
8067
8071
 
8068
8072
  var components$1 = {
8069
8073
  "default": IdCaptureLoadingOverlayDefault,
@@ -8090,37 +8094,41 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
8090
8094
  setCropped = _c[1];
8091
8095
  var bbox = image.boundingBox;
8092
8096
  var imgRef = React.useRef(null);
8093
- function onLoaded() {
8097
+ var onLoaded = React.useCallback(function () {
8094
8098
  if (!bbox || cropped) return;
8095
8099
  setCropped(true);
8096
8100
  setTimeout(function () {
8097
8101
  setUrl(cropToDetectedObjectBox(imgRef.current, bbox).toDataURL('image/jpeg', 0.95));
8098
8102
  }, 100);
8099
- }
8103
+ }, [bbox, cropped]);
8104
+ var onDoubleClick = React.useCallback(function () {
8105
+ fetch(image.imageData).then(function (resp) {
8106
+ return resp.blob();
8107
+ }).then(function (blob) {
8108
+ var _a;
8109
+ var url = URL.createObjectURL(new Blob([blob]));
8110
+ var link = document.createElement('a');
8111
+ link.href = url;
8112
+ link.setAttribute('download', "".concat(image.documentType, ".jpg"));
8113
+ document.body.appendChild(link);
8114
+ link.click();
8115
+ (_a = link.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(link);
8116
+ });
8117
+ }, [image.documentType, image.imageData]);
8100
8118
  return /*#__PURE__*/React__namespace.default.createElement("img", {
8101
8119
  ref: imgRef,
8102
8120
  alt: alt,
8103
8121
  className: className,
8104
8122
  src: url,
8105
8123
  onLoad: onLoaded,
8106
- onClick: function onClick() {
8107
- fetch(image.imageData).then(function (resp) {
8108
- return resp.blob();
8109
- }).then(function (blob) {
8110
- var _a;
8111
- var url = URL.createObjectURL(new Blob([blob]));
8112
- var link = document.createElement('a');
8113
- link.href = url;
8114
- link.setAttribute('download', "".concat(image.documentType, ".jpg"));
8115
- document.body.appendChild(link);
8116
- link.click();
8117
- (_a = link.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(link);
8118
- });
8119
- }
8124
+ onDoubleClick: onDoubleClick
8120
8125
  });
8121
8126
  };
8122
8127
 
8123
- var OverlayInstruction = styled__default.default.p(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n font-size: 18px;\n margin: 30px 0;\n"], ["\n font-size: 18px;\n margin: 30px 0;\n"])));
8128
+ var Card = styled__default.default.div(templateObject_1$w || (templateObject_1$w = __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, 100dvw - 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, 100dvw - 48px);\n max-height: 100%;\n overflow: auto;\n box-sizing: border-box;\n"])));
8129
+ var FlexCard = styled__default.default(Card)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
8130
+ var templateObject_1$w, templateObject_2$r;
8131
+
8124
8132
  var IdCaptureSuccess = function IdCaptureSuccess(_a) {
8125
8133
  var capturedDocuments = _a.capturedDocuments,
8126
8134
  onSubmitClick = _a.onSubmitClick,
@@ -8147,76 +8155,60 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
8147
8155
  submittingText: 'Submitting...',
8148
8156
  submitText: 'Done'
8149
8157
  });
8150
- return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
8158
+ return /*#__PURE__*/React__namespace.default.createElement(GrayOverlayContainer, {
8151
8159
  className: classNames.container
8152
8160
  }, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
8153
8161
  className: classNames.inner
8154
- }, /*#__PURE__*/React__namespace.default.createElement(ImagesContainer, {
8162
+ }, /*#__PURE__*/React__namespace.default.createElement(FlexCard, {
8163
+ className: classNames.card
8164
+ }, /*#__PURE__*/React__namespace.default.createElement(Heading$a, {
8165
+ className: classNames.heading
8166
+ }, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ImagesContainer, {
8155
8167
  className: classNames.imageContainer
8156
8168
  }, /*#__PURE__*/React__namespace.default.createElement(ImageRow, {
8157
8169
  className: classNames.imageRow
8158
- }, /*#__PURE__*/React__namespace.default.createElement(Heading$a, {
8159
- className: classNames.heading
8160
- }, verbiage.headingText), idCardFront && ( /*#__PURE__*/React__namespace.default.createElement(ImageCol$1, {
8170
+ }, idCardFront && ( /*#__PURE__*/React__namespace.default.createElement(ImageCol$1, {
8161
8171
  className: classNames.imageCol
8162
- }, /*#__PURE__*/React__namespace.default.createElement(ImageHeading, {
8163
- className: classNames.imageHeading
8164
- }, verbiage.idCardFrontText), /*#__PURE__*/React__namespace.default.createElement(CapturedImageWrapper, {
8165
- className: classNames.imageWrapper
8166
8172
  }, /*#__PURE__*/React__namespace.default.createElement(StyledImage, {
8167
8173
  image: idCardFront,
8168
8174
  className: classNames.image,
8169
8175
  alt: verbiage.idCardFrontText
8170
- })), debugMode && ( /*#__PURE__*/React__namespace.default.createElement("pre", null, "Detection Score: ".concat(idCardFront.detectionScore, "\nFocus Score: ").concat(idCardFront.focusScore, "\nBounding Box: ").concat(JSON.stringify(idCardFront.boundingBox)))))), idCardBack && ( /*#__PURE__*/React__namespace.default.createElement(ImageCol$1, {
8176
+ }), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugPre, null, "Detection Score: ".concat(idCardFront.detectionScore, "\nFocus Score: ").concat(idCardFront.focusScore, "\nBounding Box: ").concat(JSON.stringify(idCardFront.boundingBox)))))), idCardBack && ( /*#__PURE__*/React__namespace.default.createElement(ImageCol$1, {
8171
8177
  className: classNames.imageCol
8172
- }, /*#__PURE__*/React__namespace.default.createElement(ImageHeading, {
8173
- className: classNames.imageHeading
8174
- }, verbiage.idCardBackText), /*#__PURE__*/React__namespace.default.createElement(CapturedImageWrapper, {
8175
- className: classNames.imageWrapper
8176
8178
  }, /*#__PURE__*/React__namespace.default.createElement(StyledImage, {
8177
8179
  image: idCardBack,
8178
8180
  className: classNames.image,
8179
8181
  alt: verbiage.idCardBackText
8180
- })), debugMode && ( /*#__PURE__*/React__namespace.default.createElement("pre", null, "Detection Score: ".concat(idCardBack.detectionScore, "\nFocus Score: ").concat(idCardBack.focusScore, "\nBounding Box: ").concat(JSON.stringify(idCardBack.boundingBox)))))), passport && ( /*#__PURE__*/React__namespace.default.createElement(ImageCol$1, {
8182
+ }), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugPre, null, "Detection Score: ".concat(idCardBack.detectionScore, "\nFocus Score: ").concat(idCardBack.focusScore, "\nBounding Box: ").concat(JSON.stringify(idCardBack.boundingBox)))))), passport && ( /*#__PURE__*/React__namespace.default.createElement(ImageCol$1, {
8181
8183
  className: classNames.imageCol
8182
- }, /*#__PURE__*/React__namespace.default.createElement(ImageHeading, {
8183
- className: classNames.imageHeading
8184
- }, verbiage.passportText), /*#__PURE__*/React__namespace.default.createElement(CapturedImageWrapper, {
8185
- className: classNames.imageWrapper
8186
8184
  }, /*#__PURE__*/React__namespace.default.createElement(StyledImage, {
8187
8185
  image: passport,
8188
8186
  className: classNames.image,
8189
8187
  alt: verbiage.passportText
8190
- })), debugMode && ( /*#__PURE__*/React__namespace.default.createElement("pre", null, "Detection Score: ".concat(passport.detectionScore, "\nFocus Score: ").concat(passport.focusScore, "\nBounding Box: ").concat(JSON.stringify(passport.boundingBox)))))))), /*#__PURE__*/React__namespace.default.createElement(OverlayInstruction, {
8191
- className: classNames.instruction
8192
- }, verbiage.instructionText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow$1, {
8188
+ }), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugPre, null, "Detection Score: ".concat(passport.detectionScore, "\nFocus Score: ").concat(passport.focusScore, "\nBounding Box: ").concat(JSON.stringify(passport.boundingBox)))))))), /*#__PURE__*/React__namespace.default.createElement(ButtonsColumn, {
8193
8189
  className: classNames.buttonsRow
8194
- }, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
8195
- className: classNames.retryBtn,
8196
- variant: "warning",
8197
- onClick: onRetryClick,
8198
- colors: colors.retryBtn,
8199
- finished: true
8200
- }, verbiage.retryText), /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
8190
+ }, /*#__PURE__*/React__namespace.default.createElement(WideButton, {
8201
8191
  className: classNames.submitBtn,
8202
8192
  variant: "positive",
8203
8193
  onClick: onSubmitClick,
8204
8194
  disabled: submissionStatus === SubmissionStatus.SUBMITTING,
8205
8195
  colors: colors.doneBtn,
8206
8196
  finished: true
8207
- }, submissionStatus === SubmissionStatus.SUBMITTING ? verbiage.submittingText : verbiage.submitText))));
8197
+ }, submissionStatus === SubmissionStatus.SUBMITTING ? verbiage.submittingText : verbiage.submitText), /*#__PURE__*/React__namespace.default.createElement(WideBorderButton, {
8198
+ className: classNames.retryBtn,
8199
+ variant: "warning",
8200
+ onClick: onRetryClick,
8201
+ colors: colors.retryBtn,
8202
+ finished: true
8203
+ }, verbiage.retryText)))));
8208
8204
  };
8209
- var Heading$a = styled__default.default.h1(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n margin-bottom: 12px;\n"], ["\n margin-bottom: 12px;\n"])));
8210
- var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n overflow-y: auto;\n"], ["\n overflow-y: auto;\n"])));
8211
- var ImageRow = styled__default.default(OverlayImageRow)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n flex-direction: column;\n"], ["\n flex-direction: column;\n"])));
8212
- var ImageCol$1 = styled__default.default.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n max-height: none !important;\n"], ["\n max-height: none !important;\n"])));
8213
- var ImageHeading = styled__default.default.h3(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n text-align: left;\n margin-top: 24px;\n margin-bottom: 8px;\n font-size: 16px;\n font-weight: normal;\n"], ["\n text-align: left;\n margin-top: 24px;\n margin-bottom: 8px;\n font-size: 16px;\n font-weight: normal;\n"])));
8214
- var CapturedImageWrapper = styled__default.default.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n border-radius: 6px;\n padding: 4px;\n background: white;\n display: flex;\n"], ["\n border: 1px solid\n ", ";\n border-radius: 6px;\n padding: 4px;\n background: white;\n display: flex;\n"])), function (props) {
8215
- var _a, _b, _c;
8216
- return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.success) === null || _b === void 0 ? void 0 : _b.imageBorderColor) !== null && _c !== void 0 ? _c : 'var(--idm-color-primary-400)';
8217
- });
8218
- var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n width: 100%;\n border-radius: 4px;\n"], ["\n width: 100%;\n border-radius: 4px;\n"])));
8219
- var templateObject_1$v, templateObject_2$p, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$6, templateObject_8$2;
8205
+ var Heading$a = styled__default.default.h1(templateObject_1$v || (templateObject_1$v = __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"])));
8206
+ var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_2$q || (templateObject_2$q = __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"])));
8207
+ var ImageRow = styled__default.default(OverlayImageRow)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n max-width: 100%;\n flex-direction: column;\n display: grid;\n grid-gap: 12px;\n //grid-template-columns: 1fr 1fr;\n"], ["\n max-width: 100%;\n flex-direction: column;\n display: grid;\n grid-gap: 12px;\n //grid-template-columns: 1fr 1fr;\n"])));
8208
+ var ImageCol$1 = styled__default.default.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n width: 100%;\n max-height: none !important;\n"], ["\n width: 100%;\n max-height: none !important;\n"])));
8209
+ var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n width: 100%;\n border-radius: 12px;\n"], ["\n width: 100%;\n border-radius: 12px;\n"])));
8210
+ var DebugPre = styled__default.default.pre(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n text-align: left;\n max-width: min(480px, 100dvw - 100px);\n overflow-x: auto;\n"], ["\n text-align: left;\n max-width: min(480px, 100dvw - 100px);\n overflow-x: auto;\n"])));
8211
+ var templateObject_1$v, templateObject_2$q, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$7;
8220
8212
 
8221
8213
  function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
8222
8214
  var _this = this;
@@ -8271,7 +8263,7 @@ function resetCanvasDimensions(canvas) {
8271
8263
  var IdCardGuideImageContainer = styled__default.default(IdCardBorder)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n position: relative;\n ", "\n box-sizing: border-box;\n"], ["\n position: relative;\n ", "\n box-sizing: border-box;\n"])), function (props) {
8272
8264
  return props.$isVisible ? '' : 'opacity: 0;';
8273
8265
  });
8274
- var IdCardGuideImage = styled__default.default.img(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), function (props) {
8266
+ var IdCardGuideImage = styled__default.default.img(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), function (props) {
8275
8267
  return props.$isMirrored ? 'transform: scaleX(-1);' : '';
8276
8268
  }, function (props) {
8277
8269
  return props.$isInvisible ? 'opacity: 0;' : '';
@@ -8381,9 +8373,13 @@ function IdCardBorderSvg(_a) {
8381
8373
  setResolvedProgress = _g[1];
8382
8374
  React.useLayoutEffect(function () {
8383
8375
  var _a, _b;
8384
- var totalLength = (_b = (_a = rectRef.current) === null || _a === void 0 ? void 0 : _a.getTotalLength()) !== null && _b !== void 0 ? _b : 0;
8385
- setTotalLength(totalLength);
8386
- setResolvedProgress(progress * totalLength);
8376
+ try {
8377
+ var totalLength_1 = (_b = (_a = rectRef.current) === null || _a === void 0 ? void 0 : _a.getTotalLength()) !== null && _b !== void 0 ? _b : 0;
8378
+ setTotalLength(totalLength_1);
8379
+ setResolvedProgress(progress * totalLength_1);
8380
+ } catch (e) {
8381
+ warn('failed to measure SVG length', e);
8382
+ }
8387
8383
  }, [progress]);
8388
8384
  return /*#__PURE__*/React__namespace.default.createElement(SvgOverlay, _assign({
8389
8385
  height: "100%",
@@ -8415,16 +8411,16 @@ function IdCardBorderSvg(_a) {
8415
8411
  className: isProgressBar ? "progress ".concat(progressPaused ? 'paused' : '') : ''
8416
8412
  }));
8417
8413
  }
8418
- var IdCardBorderContainer = styled__default.default.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n & > .pulse {\n position: absolute;\n animation: glow-grow 2s ease-out infinite;\n\n &:nth-child(2) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(3) {\n animation-delay: 1.33s;\n }\n }\n\n @keyframes glow-grow {\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n"], ["\n & > .pulse {\n position: absolute;\n animation: glow-grow 2s ease-out infinite;\n\n &:nth-child(2) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(3) {\n animation-delay: 1.33s;\n }\n }\n\n @keyframes glow-grow {\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n"])));
8419
- var SvgOverlay = styled__default.default.svg(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"])));
8420
- var IdCardBorderRect = styled__default.default.rect(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n &.progress {\n width: 100%;\n height: 100%;\n animation: dash ", "\n ", ";\n }\n\n &.paused {\n animation-play-state: paused;\n }\n\n @keyframes dash {\n to {\n stroke-dashoffset: 0;\n }\n }\n"], ["\n &.progress {\n width: 100%;\n height: 100%;\n animation: dash ", "\n ", ";\n }\n\n &.paused {\n animation-play-state: paused;\n }\n\n @keyframes dash {\n to {\n stroke-dashoffset: 0;\n }\n }\n"])), function (props) {
8414
+ var IdCardBorderContainer = styled__default.default.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n & > .pulse {\n position: absolute;\n animation: glow-grow 2s ease-out infinite;\n\n &:nth-child(2) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(3) {\n animation-delay: 1.33s;\n }\n }\n\n @keyframes glow-grow {\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n"], ["\n & > .pulse {\n position: absolute;\n animation: glow-grow 2s ease-out infinite;\n\n &:nth-child(2) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(3) {\n animation-delay: 1.33s;\n }\n }\n\n @keyframes glow-grow {\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n"])));
8415
+ var SvgOverlay = styled__default.default.svg(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"])));
8416
+ var IdCardBorderRect = styled__default.default.rect(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n &.progress {\n width: 100%;\n height: 100%;\n animation: dash ", "\n ", ";\n }\n\n &.paused {\n animation-play-state: paused;\n }\n\n @keyframes dash {\n to {\n stroke-dashoffset: 0;\n }\n }\n"], ["\n &.progress {\n width: 100%;\n height: 100%;\n animation: dash ", "\n ", ";\n }\n\n &.paused {\n animation-play-state: paused;\n }\n\n @keyframes dash {\n to {\n stroke-dashoffset: 0;\n }\n }\n"])), function (props) {
8421
8417
  var _a;
8422
8418
  return (_a = props.$speed) !== null && _a !== void 0 ? _a : '3s';
8423
8419
  }, function (props) {
8424
8420
  var _a;
8425
8421
  return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
8426
8422
  });
8427
- var templateObject_1$u, templateObject_2$o, templateObject_3$k, templateObject_4$e, templateObject_5$9;
8423
+ var templateObject_1$u, templateObject_2$p, templateObject_3$j, templateObject_4$d, templateObject_5$8;
8428
8424
 
8429
8425
  var defaultIdCaptureGuideImages = {
8430
8426
  portrait: {
@@ -8894,9 +8890,9 @@ var regionClsx = function regionClsx(classNames, which) {
8894
8890
  }).join(' ');
8895
8891
  };
8896
8892
  var StyledPageContainer = styled__default.default(PageContainerDiv)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n z-index: 1000;\n overflow-y: hidden;\n"], ["\n z-index: 1000;\n overflow-y: hidden;\n"])));
8897
- var GuidesContainer = styled__default.default.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n width: 100dvw;\n height: 100dvh;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n width: 100dvw;\n height: 100dvh;\n"])));
8898
- var GuideCenterRow = styled__default.default.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"])));
8899
- var GuideRegion = styled__default.default.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) {
8893
+ var GuidesContainer = styled__default.default.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n width: 100dvw;\n height: 100dvh;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n width: 100dvw;\n height: 100dvh;\n"])));
8894
+ var GuideCenterRow = styled__default.default.div(templateObject_3$i || (templateObject_3$i = __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"])));
8895
+ var GuideRegion = styled__default.default.div(templateObject_4$c || (templateObject_4$c = __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) {
8900
8896
  var _a, _b, _c, _d, _e;
8901
8897
  return (_e = (_a = props.$maskColor) !== null && _a !== void 0 ? _a : (_d = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.idCapture) === null || _c === void 0 ? void 0 : _c.guideOverlay) === null || _d === void 0 ? void 0 : _d.backgroundColor) !== null && _e !== void 0 ? _e : 'rgba(0, 0, 0, 0.5)';
8902
8898
  }, function (props) {
@@ -8907,13 +8903,13 @@ var GuideRegion = styled__default.default.div(templateObject_4$d || (templateObj
8907
8903
  }, function (props) {
8908
8904
  return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
8909
8905
  });
8910
- var Spacer = styled__default.default(GuideRegion)(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n display: block;\n width: auto;\n"], ["\n display: block;\n width: auto;\n"])));
8911
- var GuideCenterRegion = styled__default.default.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n ", "\n ", "\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"], ["\n ", "\n ", "\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"])), function (props) {
8906
+ var Spacer = styled__default.default(GuideRegion)(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n display: block;\n width: auto;\n"], ["\n display: block;\n width: auto;\n"])));
8907
+ var GuideCenterRegion = styled__default.default.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n ", "\n ", "\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"], ["\n ", "\n ", "\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"])), function (props) {
8912
8908
  return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
8913
8909
  }, function (props) {
8914
8910
  return props.$isMirrored ? 'transform: scaleX(-1);' : '';
8915
8911
  });
8916
- var GuideCenterBorder = styled__default.default.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n box-sizing: border-box;\n border: ", ";\n display: flex;\n flex: 1;\n justify-content: center;\n max-height: 100%;\n min-height: 0;\n position: relative;\n ", "\n"], ["\n box-sizing: border-box;\n border: ", ";\n display: flex;\n flex: 1;\n justify-content: center;\n max-height: 100%;\n min-height: 0;\n position: relative;\n ", "\n"])), function (props) {
8912
+ var GuideCenterBorder = styled__default.default.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n box-sizing: border-box;\n border: ", ";\n display: flex;\n flex: 1;\n justify-content: center;\n max-height: 100%;\n min-height: 0;\n position: relative;\n ", "\n"], ["\n box-sizing: border-box;\n border: ", ";\n display: flex;\n flex: 1;\n justify-content: center;\n max-height: 100%;\n min-height: 0;\n position: relative;\n ", "\n"])), function (props) {
8917
8913
  var _a, _b;
8918
8914
  return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
8919
8915
  }, function (props) {
@@ -8921,7 +8917,7 @@ var GuideCenterBorder = styled__default.default.div(templateObject_7$5 || (templ
8921
8917
  });
8922
8918
  var GuideText = styled__default.default.span(templateObject_8$1 || (templateObject_8$1 = __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"])));
8923
8919
  var GuideCenterInner = styled__default.default.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n position: relative;\n margin: auto;\n"], ["\n position: relative;\n margin: auto;\n"])));
8924
- var templateObject_1$s, templateObject_2$n, templateObject_3$j, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$1, templateObject_9$1;
8920
+ var templateObject_1$s, templateObject_2$o, templateObject_3$i, templateObject_4$c, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9$1;
8925
8921
 
8926
8922
  var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
8927
8923
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
@@ -9067,8 +9063,8 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
9067
9063
  var CanvasWrapper$1 = styled__default.default.div(templateObject_1$r || (templateObject_1$r = __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) {
9068
9064
  return props.$maskColor;
9069
9065
  });
9070
- var Canvas$1 = styled__default.default.canvas(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
9071
- var templateObject_1$r, templateObject_2$m;
9066
+ var Canvas$1 = styled__default.default.canvas(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
9067
+ var templateObject_1$r, templateObject_2$n;
9072
9068
 
9073
9069
  function IdCaptureGuides(_a) {
9074
9070
  var _b, _c;
@@ -9209,10 +9205,10 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
9209
9205
  })));
9210
9206
  };
9211
9207
  var StyledSpinner = styled__default.default(Spinner)(templateObject_1$q || (templateObject_1$q = __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"])));
9212
- var ImagePreviewWrapper = styled__default.default.div(templateObject_2$l || (templateObject_2$l = __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"])));
9213
- var ImagePreviewText = styled__default.default.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"])));
9214
- var ImagePreviewImageWrapper = styled__default.default.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"])));
9215
- var templateObject_1$q, templateObject_2$l, templateObject_3$i, templateObject_4$c;
9208
+ var ImagePreviewWrapper = styled__default.default.div(templateObject_2$m || (templateObject_2$m = __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"])));
9209
+ var ImagePreviewText = styled__default.default.div(templateObject_3$h || (templateObject_3$h = __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"])));
9210
+ var ImagePreviewImageWrapper = styled__default.default.div(templateObject_4$b || (templateObject_4$b = __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"])));
9211
+ var templateObject_1$q, templateObject_2$m, templateObject_3$h, templateObject_4$b;
9216
9212
 
9217
9213
  var CameraVideoTag = function CameraVideoTag(_a) {
9218
9214
  var _b;
@@ -9613,8 +9609,8 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
9613
9609
  var CanvasWrapper = styled__default.default.div(templateObject_1$o || (templateObject_1$o = __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) {
9614
9610
  return props.$maskColor;
9615
9611
  });
9616
- var Canvas = styled__default.default.canvas(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
9617
- var templateObject_1$o, templateObject_2$k;
9612
+ var Canvas = styled__default.default.canvas(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
9613
+ var templateObject_1$o, templateObject_2$l;
9618
9614
 
9619
9615
  var CameraFeedWrapper = styled__default.default.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
9620
9616
  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;") : "";
@@ -9770,20 +9766,20 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
9770
9766
  }, !cameraReady ? verbiage.loadingBtnText : capturing ? verbiage.capturingBtnText : verbiage.captureBtnText))))));
9771
9767
  };
9772
9768
  var CaptureContainer = styled__default.default.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: var(--app-height);\n"], ["\n display: flex;\n flex-direction: column;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: var(--app-height);\n"])));
9773
- var HeadingRow = styled__default.default.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n background: ", ";\n text-align: center;\n color: white;\n"], ["\n background: ", ";\n text-align: center;\n color: white;\n"])), function (props) {
9769
+ var HeadingRow = styled__default.default.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n background: ", ";\n text-align: center;\n color: white;\n"], ["\n background: ", ";\n text-align: center;\n color: white;\n"])), function (props) {
9774
9770
  return props.$maskColor;
9775
9771
  });
9776
- var Heading$9 = styled__default.default.h1(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n font-size: 22px;\n"], ["\n font-size: 22px;\n"])));
9777
- var FooterRow = styled__default.default.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n background: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0 20px 20px;\n height: auto;\n color: white;\n"], ["\n background: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0 20px 20px;\n height: auto;\n color: white;\n"])), function (props) {
9772
+ var Heading$9 = styled__default.default.h1(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n font-size: 22px;\n"], ["\n font-size: 22px;\n"])));
9773
+ var FooterRow = styled__default.default.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n background: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0 20px 20px;\n height: auto;\n color: white;\n"], ["\n background: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0 20px 20px;\n height: auto;\n color: white;\n"])), function (props) {
9778
9774
  return props.$maskColor;
9779
9775
  });
9780
- var Instructions = styled__default.default.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n max-height: ", ";\n overflow-y: auto;\n"], ["\n max-height: ", ";\n overflow-y: auto;\n"])), function (props) {
9776
+ var Instructions = styled__default.default.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n max-height: ", ";\n overflow-y: auto;\n"], ["\n max-height: ", ";\n overflow-y: auto;\n"])), function (props) {
9781
9777
  var _a, _b, _c;
9782
9778
  return (_c = (_b = (_a = props.theme.documentCapture) === null || _a === void 0 ? void 0 : _a.instructions) === null || _b === void 0 ? void 0 : _b.maxHeight) !== null && _c !== void 0 ? _c : '8rem';
9783
9779
  });
9784
- var StyledButtonsRow$9 = styled__default.default(ButtonsRow$1)(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n padding-top: 20px;\n"], ["\n padding-top: 20px;\n"])));
9785
- var PreviewImage = styled__default.default.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"])));
9786
- var templateObject_1$m, templateObject_2$j, templateObject_3$h, templateObject_4$b, templateObject_5$7, templateObject_6$6, templateObject_7$4;
9780
+ var StyledButtonsRow$9 = styled__default.default(ButtonsRow)(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n padding-top: 20px;\n"], ["\n padding-top: 20px;\n"])));
9781
+ var PreviewImage = styled__default.default.img(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"])));
9782
+ var templateObject_1$m, templateObject_2$k, templateObject_3$g, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$3;
9787
9783
 
9788
9784
  var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
9789
9785
  var onSuccess = _a.onSuccess,
@@ -10053,12 +10049,12 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
10053
10049
  }, verbiage.doneBtnText))))));
10054
10050
  };
10055
10051
  var StyledOverlayInner$2 = styled__default.default(OverlayInner$2)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
10056
- var Heading$8 = styled__default.default.h3(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
10057
- var Description$3 = styled__default.default.p(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
10058
- var Instruction = styled__default.default.p(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
10059
- var ImageCol = styled__default.default.div(templateObject_5$6 || (templateObject_5$6 = __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"])));
10060
- var StyledButtonsRow$8 = styled__default.default(ButtonsRow$1)(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
10061
- var templateObject_1$l, templateObject_2$i, templateObject_3$g, templateObject_4$a, templateObject_5$6, templateObject_6$5;
10052
+ var Heading$8 = styled__default.default.h3(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
10053
+ var Description$3 = styled__default.default.p(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
10054
+ var Instruction = styled__default.default.p(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
10055
+ var ImageCol = styled__default.default.div(templateObject_5$5 || (templateObject_5$5 = __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"])));
10056
+ var StyledButtonsRow$8 = styled__default.default(ButtonsRow)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
10057
+ var templateObject_1$l, templateObject_2$j, templateObject_3$f, templateObject_4$9, templateObject_5$5, templateObject_6$4;
10062
10058
 
10063
10059
  function ScalingCameraFeed() {
10064
10060
  var _a = React.useContext(IdCaptureStateContext),
@@ -10794,8 +10790,8 @@ function HeadGuide(_a) {
10794
10790
  height: parentHeight
10795
10791
  })));
10796
10792
  }
10797
- var AbsoluteSvg = styled__default.default.svg(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n"])));
10798
- var RelativeSvgContainer = styled__default.default.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n position: relative;\n height: 100%;\n display: flex;\n align-items: ", ";\n"], ["\n position: relative;\n height: 100%;\n display: flex;\n align-items: ", ";\n"])), function (props) {
10793
+ var AbsoluteSvg = styled__default.default.svg(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n"])));
10794
+ var RelativeSvgContainer = styled__default.default.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n position: relative;\n height: 100%;\n display: flex;\n align-items: ", ";\n"], ["\n position: relative;\n height: 100%;\n display: flex;\n align-items: ", ";\n"])), function (props) {
10799
10795
  return props.$verticalAlign === 'bottom' ? 'flex-end' : 'center';
10800
10796
  });
10801
10797
  function SelfieCaptureAnimatedMask(_a) {
@@ -11022,10 +11018,10 @@ function SelfieCaptureAnimatedMaskWithStatus(_a) {
11022
11018
  status: status
11023
11019
  }));
11024
11020
  }
11025
- var templateObject_1$k, templateObject_2$h, templateObject_3$f;
11021
+ var templateObject_1$k, templateObject_2$i, templateObject_3$e;
11026
11022
 
11027
11023
  var FaceCaptureGuideContainer = styled__default.default.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n box-sizing: border-box;\n"], ["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n box-sizing: border-box;\n"])));
11028
- var FaceCaptureGuideInner = styled__default.default.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n position: relative;\n height: 60%;\n"], ["\n position: relative;\n height: 60%;\n"])));
11024
+ var FaceCaptureGuideInner = styled__default.default.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n position: relative;\n height: 60%;\n"], ["\n position: relative;\n height: 60%;\n"])));
11029
11025
  var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
11030
11026
  var _b = _a.classNames,
11031
11027
  classNames = _b === void 0 ? {} : _b,
@@ -11047,7 +11043,7 @@ var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
11047
11043
  verticalAlign: "center"
11048
11044
  })));
11049
11045
  };
11050
- var templateObject_1$j, templateObject_2$g;
11046
+ var templateObject_1$j, templateObject_2$h;
11051
11047
 
11052
11048
  var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
11053
11049
  start: function start() {
@@ -11302,7 +11298,7 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
11302
11298
  className: classNames.heading
11303
11299
  }, invalidSelfie ? verbiage.livenessFailedText : verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(Description$2, {
11304
11300
  className: classNames.description
11305
- }, verbiage.livenessFailedReasonText || verbiage.descriptionText))), image && image !== 'LOADING' && ( /*#__PURE__*/React__namespace.default.createElement(ImageContainer$5, {
11301
+ }, verbiage.livenessFailedReasonText || verbiage.descriptionText))), image && image !== 'LOADING' && ( /*#__PURE__*/React__namespace.default.createElement(ImageContainer$6, {
11306
11302
  className: classNames.imageContainer
11307
11303
  }, /*#__PURE__*/React__namespace.default.createElement("img", {
11308
11304
  src: image,
@@ -11344,11 +11340,11 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
11344
11340
  }, !image ? invalidSelfie ? verbiage.retryButtonText : verbiage.captureBtnText : loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText)))));
11345
11341
  };
11346
11342
  var StyledOverlayInner$1 = styled__default.default(OverlayInner$2)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
11347
- var Heading$7 = styled__default.default.h3(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
11348
- var Description$2 = styled__default.default.p(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
11349
- var ImageContainer$5 = styled__default.default(OverlayImageContainer)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
11350
- var StyledButtonsRow$7 = styled__default.default(ButtonsRow$1)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
11351
- var templateObject_1$i, templateObject_2$f, templateObject_3$e, templateObject_4$9, templateObject_5$5;
11343
+ var Heading$7 = styled__default.default.h3(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
11344
+ var Description$2 = styled__default.default.p(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
11345
+ var ImageContainer$6 = styled__default.default(OverlayImageContainer)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
11346
+ var StyledButtonsRow$7 = styled__default.default(ButtonsRow)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
11347
+ var templateObject_1$i, templateObject_2$g, templateObject_3$d, templateObject_4$8, templateObject_5$4;
11352
11348
 
11353
11349
  var initialState$3 = {
11354
11350
  videoWidth: 0,
@@ -11926,36 +11922,47 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
11926
11922
  retryBtnText: 'Retry',
11927
11923
  doneBtnText: 'Done'
11928
11924
  });
11929
- return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
11925
+ var imageContainerRef = React.useRef(null);
11926
+ var onImageLoaded = React.useCallback(function (e) {
11927
+ var _a;
11928
+ if (!imageContainerRef.current) return;
11929
+ var containerHeight = imageContainerRef.current.getBoundingClientRect().height;
11930
+ var imageHeight = e.currentTarget.getBoundingClientRect().height;
11931
+ (_a = imageContainerRef.current) === null || _a === void 0 ? void 0 : _a.scroll(0, (imageHeight - containerHeight) / 2);
11932
+ }, []);
11933
+ return /*#__PURE__*/React__namespace.default.createElement(GrayOverlayContainer, {
11930
11934
  className: classNames.container
11931
11935
  }, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
11932
11936
  className: classNames.inner
11933
- }, /*#__PURE__*/React__namespace.default.createElement(Heading$6, {
11934
- className: classNames.heading
11935
- }, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(OverlayImageContainer, {
11936
- className: classNames.imageContainer
11937
+ }, /*#__PURE__*/React__namespace.default.createElement(FlexCard, null, /*#__PURE__*/React__namespace.default.createElement(ImageContainer$5, {
11938
+ className: classNames.imageContainer,
11939
+ ref: imageContainerRef
11937
11940
  }, /*#__PURE__*/React__namespace.default.createElement("img", {
11938
11941
  alt: verbiage.headingText,
11939
11942
  src: imageUrl,
11940
- className: classNames.image
11941
- })), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow$1, {
11943
+ className: classNames.image,
11944
+ onLoad: onImageLoaded
11945
+ })), /*#__PURE__*/React__namespace.default.createElement(Heading$6, {
11946
+ className: classNames.heading
11947
+ }, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ButtonsColumn, {
11942
11948
  className: classNames.buttonsRow
11943
- }, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
11944
- variant: "warning",
11945
- onClick: onRetryClick,
11946
- colors: colors.retryBtn,
11947
- className: classNames.retryBtn,
11948
- finished: true
11949
- }, verbiage.retryBtnText), /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
11949
+ }, /*#__PURE__*/React__namespace.default.createElement(WideButton, {
11950
11950
  variant: "positive",
11951
11951
  onClick: onDoneClick,
11952
11952
  colors: colors.doneBtn,
11953
11953
  className: classNames.doneBtn,
11954
11954
  finished: true
11955
- }, verbiage.doneBtnText))));
11955
+ }, verbiage.doneBtnText), /*#__PURE__*/React__namespace.default.createElement(WideBorderButton, {
11956
+ variant: "secondary",
11957
+ onClick: onRetryClick,
11958
+ colors: colors.retryBtn,
11959
+ className: classNames.retryBtn,
11960
+ finished: true
11961
+ }, verbiage.retryBtnText)))));
11956
11962
  };
11957
- var Heading$6 = styled__default.default.h3(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
11958
- var templateObject_1$h;
11963
+ var ImageContainer$5 = styled__default.default.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n position: relative;\n flex-grow: 1;\n margin-bottom: 25px;\n max-width: 100dvw;\n max-height: 100dvh;\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: 100dvw;\n max-height: 100dvh;\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"])));
11964
+ var Heading$6 = styled__default.default.h3(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n font-size: 1.2rem;\n margin: 0;\n"], ["\n font-size: 1.2rem;\n margin: 0;\n"])));
11965
+ var templateObject_1$h, templateObject_2$f;
11959
11966
 
11960
11967
  var FaceLivenessFailure = function FaceLivenessFailure(_a) {
11961
11968
  var _b = _a.canRetry,
@@ -11988,7 +11995,7 @@ var FaceLivenessFailure = function FaceLivenessFailure(_a) {
11988
11995
  className: classNames.image
11989
11996
  })), /*#__PURE__*/React__namespace.default.createElement(Heading$5, {
11990
11997
  className: classNames.heading
11991
- }, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
11998
+ }, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ButtonsColumn, {
11992
11999
  className: classNames.buttonsRow
11993
12000
  }, canRetry && ( /*#__PURE__*/React__namespace.default.createElement(WideButton, {
11994
12001
  variant: "secondary",
@@ -12006,12 +12013,7 @@ var FaceLivenessFailure = function FaceLivenessFailure(_a) {
12006
12013
  };
12007
12014
  var ImageContainer$4 = styled__default.default(OverlayImageContainer)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
12008
12015
  var Heading$5 = styled__default.default.h3(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin-bottom: 36px;\n"], ["\n margin-bottom: 36px;\n"])));
12009
- var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n background: #f7f6fb;\n"], ["\n background: #f7f6fb;\n"])));
12010
- var Card = styled__default.default.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n padding: 24px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n margin: auto;\n max-width: 500px;\n"], ["\n background: white;\n border-radius: 8px;\n padding: 24px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n margin: auto;\n max-width: 500px;\n"])));
12011
- var WideButton = styled__default.default(LoaderButton)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n width: 100%;\n border-radius: 30px;\n"], ["\n width: 100%;\n border-radius: 30px;\n"])));
12012
- var ButtonsRow = styled__default.default.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"])));
12013
- var WideBorderButton = styled__default.default(WideButton)(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n color: black;\n background: white;\n border: 1px solid var(--idm-color-secondary-500);\n box-sizing: border-box;\n"], ["\n color: black;\n background: white;\n border: 1px solid var(--idm-color-secondary-500);\n box-sizing: border-box;\n"])));
12014
- var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$8, templateObject_5$4, templateObject_6$4, templateObject_7$3;
12016
+ var templateObject_1$g, templateObject_2$e;
12015
12017
 
12016
12018
  var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
12017
12019
  var _b;
@@ -12136,7 +12138,7 @@ var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLega
12136
12138
  }, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
12137
12139
  };
12138
12140
  var StyledGuidanceMessage$1 = styled__default.default(GuidanceMessage)(templateObject_1$e || (templateObject_1$e = __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"])));
12139
- var StyledButtonsRow$6 = styled__default.default(ButtonsRow$1)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex-direction: column;\n padding-top: 25px;\n"], ["\n flex-direction: column;\n padding-top: 25px;\n"])));
12141
+ var StyledButtonsRow$6 = styled__default.default(ButtonsRow)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex-direction: column;\n padding-top: 25px;\n"], ["\n flex-direction: column;\n padding-top: 25px;\n"])));
12140
12142
  var templateObject_1$e, templateObject_2$c;
12141
12143
 
12142
12144
  var legacyInstructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png");
@@ -12268,7 +12270,7 @@ var OverlayHeader = styled__default.default.div(templateObject_2$b || (templateO
12268
12270
  return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
12269
12271
  });
12270
12272
  var StyledGuidanceMessage = styled__default.default(GuidanceMessage)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
12271
- var StyledButtonsRow$5 = styled__default.default(ButtonsRow$1)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"])), function (props) {
12273
+ var StyledButtonsRow$5 = styled__default.default(ButtonsRow)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"])), function (props) {
12272
12274
  var _a, _b, _c, _d;
12273
12275
  return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
12274
12276
  }, function (props) {
@@ -12654,7 +12656,7 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
12654
12656
  var Inner$2 = styled__default.default(OverlayInner$2)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
12655
12657
  var Heading$4 = styled__default.default.h3(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
12656
12658
  var Description = styled__default.default.p(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
12657
- var StyledButtonsRow$4 = styled__default.default(ButtonsRow$1)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
12659
+ var StyledButtonsRow$4 = styled__default.default(ButtonsRow)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
12658
12660
  var templateObject_1$c, templateObject_2$a, templateObject_3$a, templateObject_4$5;
12659
12661
 
12660
12662
  var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_a) {
@@ -12820,7 +12822,7 @@ var SignaturePad = styled__default.default.div(templateObject_3$9 || (templateOb
12820
12822
  var _a, _b, _c;
12821
12823
  return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.borderRadius) !== null && _c !== void 0 ? _c : '16px';
12822
12824
  });
12823
- var SignatureButtonsContainer = styled__default.default(ButtonsRow$1)(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"])));
12825
+ var SignatureButtonsContainer = styled__default.default(ButtonsRow)(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"])));
12824
12826
  var templateObject_1$b, templateObject_2$9, templateObject_3$9, templateObject_4$4;
12825
12827
 
12826
12828
  var SignatureCapture = function SignatureCapture(_a) {
@@ -13370,7 +13372,6 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
13370
13372
  "$background": colors.guidanceMessageBackgroundColor,
13371
13373
  "$textColor": colors.guidanceMessageTextColor
13372
13374
  }, verbiage.guidanceMessageText))), /*#__PURE__*/React__namespace.default.createElement(GuidesComponent, {
13373
- classNames: classNames.videoSignatureGuidesClassNames,
13374
13375
  status: "success"
13375
13376
  }), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, "Video: ", (_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.width, "x", (_d = cameraRef.current) === null || _d === void 0 ? void 0 : _d.height)), /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {
13376
13377
  onClick: onExit,
@@ -13415,7 +13416,7 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
13415
13416
  style: {
13416
13417
  display: 'none'
13417
13418
  }
13418
- })), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow$1, {
13419
+ })), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
13419
13420
  className: classNames.buttonsRow
13420
13421
  }, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
13421
13422
  variant: "warning",
@@ -13564,11 +13565,10 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
13564
13565
  var guidesComponent = React.useCallback(function (_a) {
13565
13566
  var status = _a.status;
13566
13567
  return /*#__PURE__*/React__namespace.default.createElement(VideoSignatureGuides, {
13567
- classNames: classNames === null || classNames === void 0 ? void 0 : classNames.videoSignatureGuidesClassNames,
13568
13568
  faceGuideStatus: status,
13569
13569
  requestedAction: status === 'success' ? 'CAPTURE_SIGNATURE' : 'VERIFY_LIVENESS'
13570
13570
  });
13571
- }, [classNames === null || classNames === void 0 ? void 0 : classNames.videoSignatureGuidesClassNames]);
13571
+ }, []);
13572
13572
  return /*#__PURE__*/React__namespace.default.createElement(VideoSignatureContextProvider, null, /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
13573
13573
  className: "flex ".concat((_b = classNames === null || classNames === void 0 ? void 0 : classNames.container) !== null && _b !== void 0 ? _b : '')
13574
13574
  }, /*#__PURE__*/React__namespace.default.createElement(CameraVideoTag, {
@@ -13832,7 +13832,7 @@ var ReadTextPromptText = styled__default.default.div(templateObject_3$6 || (temp
13832
13832
  var _a, _b, _c, _d, _e, _f;
13833
13833
  return ((_c = (_b = (_a = props.theme.idVideoCapture) === null || _a === void 0 ? void 0 : _a.readTextPrompt) === null || _b === void 0 ? void 0 : _b.prompt) === null || _c === void 0 ? void 0 : _c.borderRadius) ? "border-radius: ".concat((_f = (_e = (_d = props.theme.idVideoCapture) === null || _d === void 0 ? void 0 : _d.readTextPrompt) === null || _e === void 0 ? void 0 : _e.prompt) === null || _f === void 0 ? void 0 : _f.borderRadius, ";") : "";
13834
13834
  });
13835
- var ReadTextPromptButtonsRow = styled__default.default(ButtonsRow$1)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n margin: 32px auto auto;\n gap: 20px;\n"], ["\n margin: 32px auto auto;\n gap: 20px;\n"])));
13835
+ var ReadTextPromptButtonsRow = styled__default.default(ButtonsRow)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n margin: 32px auto auto;\n gap: 20px;\n"], ["\n margin: 32px auto auto;\n gap: 20px;\n"])));
13836
13836
  var ReadTextPromptTimeRemaining = styled__default.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 20px;\n\n ", ";\n ", ";\n ", ";\n"], ["\n padding: 20px;\n\n ", ";\n ", ";\n ", ";\n"])), function (props) {
13837
13837
  var _a, _b, _c, _d, _e, _f;
13838
13838
  return ((_c = (_b = (_a = props.theme.idVideoCapture) === null || _a === void 0 ? void 0 : _a.readTextPrompt) === null || _b === void 0 ? void 0 : _b.timeRemaining) === null || _c === void 0 ? void 0 : _c.backgroundColor) ? "background: ".concat((_f = (_e = (_d = props.theme.idVideoCapture) === null || _d === void 0 ? void 0 : _d.readTextPrompt) === null || _e === void 0 ? void 0 : _e.timeRemaining) === null || _f === void 0 ? void 0 : _f.backgroundColor, ";") : "";
@@ -14375,7 +14375,7 @@ var IdVideoCaptureSuccess = function IdVideoCaptureSuccess(_a) {
14375
14375
  })) : ( /*#__PURE__*/React__namespace.default.createElement("img", {
14376
14376
  src: idBackImageUrl,
14377
14377
  alt: "ID Back Image"
14378
- }))), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow$1, {
14378
+ }))), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
14379
14379
  className: classNames.buttonsRow
14380
14380
  }, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
14381
14381
  variant: "warning",
@@ -16120,8 +16120,8 @@ var CustomerVerificationSuccess = function CustomerVerificationSuccess(_a) {
16120
16120
  }, verbiage.doneBtnText))));
16121
16121
  };
16122
16122
  var Heading$3 = styled__default.default.h3(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
16123
- var ImageContainer$3 = styled__default.default(ButtonsRow$1)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
16124
- var StyledButtonsRow$3 = styled__default.default(ButtonsRow$1)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
16123
+ var ImageContainer$3 = styled__default.default(ButtonsRow)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
16124
+ var StyledButtonsRow$3 = styled__default.default(ButtonsRow)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
16125
16125
  var templateObject_1$3, templateObject_2$3, templateObject_3$3;
16126
16126
 
16127
16127
  var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
@@ -16172,8 +16172,8 @@ var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
16172
16172
  }, verbiage.exitBtnText))));
16173
16173
  };
16174
16174
  var Heading$2 = styled__default.default.h3(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
16175
- var ImageContainer$2 = styled__default.default(ButtonsRow$1)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
16176
- var StyledButtonsRow$2 = styled__default.default(ButtonsRow$1)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
16175
+ var ImageContainer$2 = styled__default.default(ButtonsRow)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
16176
+ var StyledButtonsRow$2 = styled__default.default(ButtonsRow)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
16177
16177
  var templateObject_1$2, templateObject_2$2, templateObject_3$2;
16178
16178
 
16179
16179
  var ALLOWED_RETRIES$2 = 2;
@@ -16678,8 +16678,8 @@ var CustomerIdentificationSuccess = function CustomerIdentificationSuccess(_a) {
16678
16678
  }, verbiage.doneBtnText))));
16679
16679
  };
16680
16680
  var Heading$1 = styled__default.default.h3(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
16681
- var ImageContainer$1 = styled__default.default(ButtonsRow$1)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
16682
- var StyledButtonsRow$1 = styled__default.default(ButtonsRow$1)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
16681
+ var ImageContainer$1 = styled__default.default(ButtonsRow)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
16682
+ var StyledButtonsRow$1 = styled__default.default(ButtonsRow)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
16683
16683
  var templateObject_1$1, templateObject_2$1, templateObject_3$1;
16684
16684
 
16685
16685
  var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
@@ -16730,8 +16730,8 @@ var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
16730
16730
  }, verbiage.exitBtnText))));
16731
16731
  };
16732
16732
  var Heading = styled__default.default.h3(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
16733
- var ImageContainer = styled__default.default(ButtonsRow$1)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
16734
- var StyledButtonsRow = styled__default.default(ButtonsRow$1)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
16733
+ var ImageContainer = styled__default.default(ButtonsRow)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
16734
+ var StyledButtonsRow = styled__default.default(ButtonsRow)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
16735
16735
  var templateObject_1, templateObject_2, templateObject_3;
16736
16736
 
16737
16737
  var ALLOWED_RETRIES = 2;