idmission-web-sdk 2.1.57 → 2.1.58

package/dist/components/common/Card.d.ts

@@ -1 +1,4 @@
 export declare const Card: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FlexCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;

package/dist/sdk2.cjs.development.js

@@ -234,7 +234,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.1.57';
+var webSdkVersion = '2.1.58';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -501,19 +501,19 @@ var OverlayContainer = styled__default.default(PageContainer)(templateObject_1$H
 }, function (props) {
   return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
 });
-var OverlayInner$2 = styled__default.default.div(templateObject_2$x || (templateObject_2$x = __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) {
+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) {
   var _a;
   return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
 }, function (props) {
   return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
 });
-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: 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"])));
+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"])));
 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"])));
 var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  background: #f7f6fb;\n"], ["\n  background: #f7f6fb;\n"])));
 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"])));
-var WideButton = styled__default.default(LoaderButton)(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 30px;\n"], ["\n  width: 100%;\n  border-radius: 30px;\n"])));
+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"])));
 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"])));
-var templateObject_1$H, templateObject_2$x, templateObject_3$p, templateObject_4$j, templateObject_5$c, templateObject_6$9, templateObject_7$7, templateObject_8$3;
+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;
 
 var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
   var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -6573,7 +6573,7 @@ function DebugStatsPane(_a) {
   return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
 }
 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"])));
-var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$w || (templateObject_2$w = __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) {
+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) {
   var $flipX = _a.$flipX;
   return $flipX ? 'transform: scaleX(-1);' : '';
 });
@@ -6778,7 +6778,7 @@ function SelfieCaptureFaceKeypoint(_a) {
     }
   });
 }
-var templateObject_1$E, templateObject_2$w, templateObject_3$o, templateObject_4$i;
+var templateObject_1$E, templateObject_2$x, templateObject_3$o, templateObject_4$i;
 
 var enTranslation = {};
 
@@ -6965,14 +6965,14 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
   if (!portalLocation) return element;
   return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
 };
-var GuidanceMessage = styled__default.default.div(templateObject_2$v || (templateObject_2$v = __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) {
+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) {
   var _a, _b, _c, _d, _e, _f;
   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';
 }, function (props) {
   var _a, _b, _c, _d, _e, _f;
   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';
 });
-var templateObject_1$D, templateObject_2$v;
+var templateObject_1$D, templateObject_2$w;
 
 function OverrideWrongDocumentTypeGuidanceDialog(_a) {
   var _b = _a.classNames,
@@ -7012,11 +7012,11 @@ var Container$2 = styled__default.default.div(templateObject_1$C || (templateObj
   var _a, _b, _c;
   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';
 });
-var InnerContainer = styled__default.default.div(templateObject_2$u || (templateObject_2$u = __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"])));
+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"])));
 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"])));
 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"])));
 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"])));
-var templateObject_1$C, templateObject_2$u, templateObject_3$n, templateObject_4$h, templateObject_5$b;
+var templateObject_1$C, templateObject_2$v, templateObject_3$n, templateObject_4$h, templateObject_5$b;
 
 var IdCapture = function IdCapture(_a) {
   var _b, _c, _d, _e, _f, _g, _h, _j;
@@ -7211,10 +7211,10 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
   }, verbiage.retryBtnText)));
 };
 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"])));
-var StyledOverlayImageContainer$3 = styled__default.default(OverlayImageContainer)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
+var StyledOverlayImageContainer$3 = styled__default.default(OverlayImageContainer)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
 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"])));
 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"])));
-var templateObject_1$B, templateObject_2$t, templateObject_3$m, templateObject_4$g;
+var templateObject_1$B, templateObject_2$u, templateObject_3$m, templateObject_4$g;
 
 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"])));
 var ExitCaptureButton = function ExitCaptureButton(_a) {
@@ -7908,7 +7908,7 @@ var OverlayInner$1 = styled__default.default.div(templateObject_1$y || (template
   var _a, _b, _c, _d;
   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';
 });
-var OverlayHeader$1 = styled__default.default.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\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) {
+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) {
   var _a;
   return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
 }, function (props) {
@@ -7918,7 +7918,7 @@ var StyledGuidanceMessage$2 = styled__default.default(GuidanceMessage)(templateO
 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"])));
 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"])));
 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"])));
-var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
+var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
 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) {
   var _a, _b, _c, _d;
   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';
@@ -7953,10 +7953,10 @@ var ContinueButton$1 = styled__default.default(LoaderButton)(templateObject_18 |
   var _a, _b, _c, _d, _e, _f;
   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, ";") : '';
 });
-var templateObject_1$y, templateObject_2$s, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$6, 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;
+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;
 
 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"])));
-var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
+var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
 var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
   var _b, _c, _d, _e;
   var onDismissed = _a.onDismissed,
@@ -8067,7 +8067,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
     }
   }, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
 };
-var templateObject_1$x, templateObject_2$r;
+var templateObject_1$x, templateObject_2$s;
 
 var components$1 = {
   "default": IdCaptureLoadingOverlayDefault,
@@ -8125,8 +8125,9 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
   });
 };
 
-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: 500px;\n  max-height: 100%;\n  overflow: auto;\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  max-height: 100%;\n  overflow: auto;\n"])));
-var templateObject_1$w;
+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"])));
+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"])));
+var templateObject_1$w, templateObject_2$r;
 
 var IdCaptureSuccess = function IdCaptureSuccess(_a) {
   var capturedDocuments = _a.capturedDocuments,
@@ -8201,14 +8202,13 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
     finished: true
   }, verbiage.retryText)))));
 };
-var FlexCard = styled__default.default(Card)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var Heading$a = styled__default.default.h1(templateObject_2$q || (templateObject_2$q = __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"])));
-var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_3$k || (templateObject_3$k = __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"])));
-var ImageRow = styled__default.default(OverlayImageRow)(templateObject_4$e || (templateObject_4$e = __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"])));
-var ImageCol$1 = styled__default.default.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  width: 100%;\n  max-height: none !important;\n"], ["\n  width: 100%;\n  max-height: none !important;\n"])));
-var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 12px;\n"], ["\n  width: 100%;\n  border-radius: 12px;\n"])));
-var DebugPre = styled__default.default.pre(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  text-align: left;\n  max-width: 480px;\n  overflow-x: auto;\n"], ["\n  text-align: left;\n  max-width: 480px;\n  overflow-x: auto;\n"])));
-var templateObject_1$v, templateObject_2$q, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$7, templateObject_7$5;
+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"])));
+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"])));
+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"])));
+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"])));
+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"])));
+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"])));
+var templateObject_1$v, templateObject_2$q, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$7;
 
 function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
   var _this = this;
@@ -11918,16 +11918,26 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
     retryBtnText: 'Retry',
     doneBtnText: 'Done'
   });
+  var imageContainerRef = React.useRef(null);
+  var onImageLoaded = React.useCallback(function (e) {
+    var _a;
+    if (!imageContainerRef.current) return;
+    var containerHeight = imageContainerRef.current.getBoundingClientRect().height;
+    var imageHeight = e.currentTarget.getBoundingClientRect().height;
+    (_a = imageContainerRef.current) === null || _a === void 0 ? void 0 : _a.scroll(0, (imageHeight - containerHeight) / 2);
+  }, []);
   return /*#__PURE__*/React__namespace.default.createElement(GrayOverlayContainer, {
     className: classNames.container
   }, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
     className: classNames.inner
-  }, /*#__PURE__*/React__namespace.default.createElement(Card, null, /*#__PURE__*/React__namespace.default.createElement(ImageContainer$5, {
-    className: classNames.imageContainer
+  }, /*#__PURE__*/React__namespace.default.createElement(FlexCard, null, /*#__PURE__*/React__namespace.default.createElement(ImageContainer$5, {
+    className: classNames.imageContainer,
+    ref: imageContainerRef
   }, /*#__PURE__*/React__namespace.default.createElement("img", {
     alt: verbiage.headingText,
     src: imageUrl,
-    className: classNames.image
+    className: classNames.image,
+    onLoad: onImageLoaded
   })), /*#__PURE__*/React__namespace.default.createElement(Heading$6, {
     className: classNames.heading
   }, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ButtonsColumn, {
@@ -11946,8 +11956,8 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
     finished: true
   }, verbiage.retryBtnText)))));
 };
-var ImageContainer$5 = styled__default.default(OverlayImageContainer)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  //max-height: calc(100vh - 185px);\n  border-radius: 8px;\n"], ["\n  //max-height: calc(100vh - 185px);\n  border-radius: 8px;\n"])));
-var Heading$6 = styled__default.default.h3(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  margin-bottom: 36px;\n"], ["\n  margin-bottom: 36px;\n"])));
+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"])));
+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"])));
 var templateObject_1$h, templateObject_2$f;
 
 var FaceLivenessFailure = function FaceLivenessFailure(_a) {