idmission-web-sdk 2.3.34 → 2.3.36

package/dist/sdk2.esm.js

@@ -204,7 +204,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.3.34';
+var webSdkVersion = '2.3.36';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -475,7 +475,7 @@ var OverlayInner$2 = styled.div(templateObject_2$D || (templateObject_2$D = __ma
 var OverlayImageContainer = styled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\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  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.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100% - 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(100% - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"])));
 var GrayOverlayContainer = styled(OverlayContainer)(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  background: #f7f6fb;\n"], ["\n  background: #f7f6fb;\n"])));
-var ButtonsColumn = styled.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 ButtonsColumn = styled.div(templateObject_6$a || (templateObject_6$a = __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(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(WideButton)(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  color: ", ";\n  background: ", ";\n  border: 1px solid\n    ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  background: ", ";\n  border: 1px solid\n    ", ";\n  box-sizing: border-box;\n"])), function (props) {
   var _a, _b;
@@ -514,7 +514,7 @@ var LoadingOverlayLoadingListItem = styled.li(templateObject_19 || (templateObje
 var LoadingOverlayProgressContainer = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
 var LoadingOverlayCustomLoadingGraphic = styled.img(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n"], ["\n  transform-style: preserve-3d;\n"])));
 var LoadingOverlayContinueButtonContainer = styled.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var templateObject_1$M, templateObject_2$D, templateObject_3$r, templateObject_4$l, templateObject_5$e, templateObject_6$9, templateObject_7$6, templateObject_8$4, templateObject_9$3, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
+var templateObject_1$M, templateObject_2$D, templateObject_3$r, templateObject_4$l, templateObject_5$e, templateObject_6$a, templateObject_7$6, templateObject_8$4, templateObject_9$3, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
 
 var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
   var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -7582,7 +7582,7 @@ var ButtonsRow$1 = styled(LoadingOverlayButtonsRow)(templateObject_5$c || (templ
   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.progressBarFontSize) ? "font-size: ".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.progressBarFontSize, ";") : '';
 });
-var ProgressBarBackground$1 = styled(LoadingOverlayProgressBarBackground)(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  background: ", ";\n  opacity: ", ";\n"], ["\n  background: ", ";\n  opacity: ", ";\n"])), function (props) {
+var ProgressBarBackground$1 = styled(LoadingOverlayProgressBarBackground)(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  background: ", ";\n  opacity: ", ";\n"], ["\n  background: ", ";\n  opacity: ", ";\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.progressBarBackgroundColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
 }, function (props) {
@@ -7612,7 +7612,7 @@ var ContinueButton$1 = styled(LoaderButton)(templateObject_8$3 || (templateObjec
   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.continueBtnDisabledBorder) !== null && _d !== void 0 ? _d : 'none';
 });
-var templateObject_1$E, templateObject_2$x, templateObject_3$m, templateObject_4$g, templateObject_5$c, templateObject_6$8, templateObject_7$5, templateObject_8$3;
+var templateObject_1$E, templateObject_2$x, templateObject_3$m, templateObject_4$g, templateObject_5$c, templateObject_6$9, templateObject_7$5, templateObject_8$3;
 
 var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"], ["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"])));
 var ContinuityCameraCheckbox = styled.input(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
@@ -7863,8 +7863,8 @@ var ImagesContainer = styled(OverlayImageContainer)(templateObject_2$u || (templ
 var ImageRow = styled(OverlayImageRow)(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  max-width: 100%;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n"], ["\n  max-width: 100%;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n"])));
 var ImageCol$1 = styled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  width: 450px;\n  max-width: 100%;\n  max-height: none !important;\n"], ["\n  width: 450px;\n  max-width: 100%;\n  max-height: none !important;\n"])));
 var StyledImage = styled(CapturedDocumentImg)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 12px;\n"], ["\n  width: 100%;\n  border-radius: 12px;\n"])));
-var DebugPre = styled.pre(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  display: block;\n  text-align: left;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: auto;\n"], ["\n  display: block;\n  text-align: left;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: auto;\n"])));
-var templateObject_1$B, templateObject_2$u, templateObject_3$l, templateObject_4$f, templateObject_5$b, templateObject_6$7;
+var DebugPre = styled.pre(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  display: block;\n  text-align: left;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: auto;\n"], ["\n  display: block;\n  text-align: left;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: auto;\n"])));
+var templateObject_1$B, templateObject_2$u, templateObject_3$l, templateObject_4$f, templateObject_5$b, templateObject_6$8;
 
 function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
   var _this = this;
@@ -7963,15 +7963,12 @@ function IdCardBorder(_a) {
   var progressBarIndicatorColor = (_o = (_m = (_l = theme.idCapture) === null || _l === void 0 ? void 0 : _l.guideBox) === null || _m === void 0 ? void 0 : _m.progressBarIndicatorColor) !== null && _o !== void 0 ? _o : '#287ec6';
   var progressBarWidth = (_r = (_q = (_p = theme.idCapture) === null || _p === void 0 ? void 0 : _p.guideBox) === null || _q === void 0 ? void 0 : _q.progressBarWidth) !== null && _r !== void 0 ? _r : borderWidth;
   return /*#__PURE__*/React__default.createElement(IdCardBorderContainer, _assign({}, props, {
-    style: {
+    style: _assign(_assign({}, props.style), {
       aspectRatio: aspectRatio
-    }
-  }), /*#__PURE__*/React__default.createElement("div", {
+    })
+  }), /*#__PURE__*/React__default.createElement(IdCardBorderInner, {
     ref: ref,
     style: {
-      maxHeight: '100%',
-      maxWidth: '100%',
-      display: 'flex',
       aspectRatio: aspectRatio
     }
   }, children), status === 'ready' && !wavesDisabled && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IdCardBorderSvg, {
@@ -8034,6 +8031,7 @@ function IdCardBorderSvg(_a) {
     totalLength = _f[0],
     setTotalLength = _f[1];
   var resolvedProgress = progress * totalLength;
+  var scaledBorderRadius = borderRadius * (typeof props.height === 'number' ? props.height / 500 : 1);
   var rectRef = function rectRef(r) {
     try {
       if (isProgressBar && r) setTotalLength(r.getTotalLength());
@@ -8052,16 +8050,16 @@ function IdCardBorderSvg(_a) {
     y: "0",
     width: props.width || '100%',
     height: props.height || '100%',
-    rx: borderRadius,
-    ry: borderRadius
+    rx: scaledBorderRadius,
+    ry: scaledBorderRadius
   }))), /*#__PURE__*/React__default.createElement(IdCardBorderRect, {
     ref: rectRef,
     x: "0",
     y: "0",
     width: props.width || '100%',
     height: props.height || '100%',
-    rx: borderRadius,
-    ry: borderRadius,
+    rx: scaledBorderRadius,
+    ry: scaledBorderRadius,
     clipPath: "url(#round-corner)",
     stroke: borderColor,
     strokeWidth: borderWidth,
@@ -8071,16 +8069,17 @@ function IdCardBorderSvg(_a) {
     className: isProgressBar ? "idmSdkProgressBorder ".concat(progressPaused ? 'idmSdkProgressPaused' : '') : ''
   }));
 }
-var IdCardBorderContainer = styled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  max-width: 100%;\n  max-height: 100%;\n\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n"], ["\n  max-width: 100%;\n  max-height: 100%;\n\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n"])), wavesAnimation);
-var SvgOverlay = styled.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"])));
-var IdCardBorderRect = styled.rect(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  &.idmSdkProgressBorder {\n    animation: ", " ", "\n      ", ";\n  }\n\n  &.idmSdkProgressPaused {\n    animation-play-state: paused;\n  }\n"], ["\n  &.idmSdkProgressBorder {\n    animation: ", " ", "\n      ", ";\n  }\n\n  &.idmSdkProgressPaused {\n    animation-play-state: paused;\n  }\n"])), progressBorderAnimation, function (props) {
+var IdCardBorderContainer = styled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n"], ["\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n"])), wavesAnimation);
+var IdCardBorderInner = styled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  max-height: 100%;\n  max-width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  max-height: 100%;\n  max-width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var SvgOverlay = styled.svg(templateObject_5$a || (templateObject_5$a = __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"])));
+var IdCardBorderRect = styled.rect(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  &.idmSdkProgressBorder {\n    animation: ", " ", "\n      ", ";\n  }\n\n  &.idmSdkProgressPaused {\n    animation-play-state: paused;\n  }\n"], ["\n  &.idmSdkProgressBorder {\n    animation: ", " ", "\n      ", ";\n  }\n\n  &.idmSdkProgressPaused {\n    animation-play-state: paused;\n  }\n"])), progressBorderAnimation, function (props) {
   var _a;
   return (_a = props.$speed) !== null && _a !== void 0 ? _a : '3s';
 }, function (props) {
   var _a;
   return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
 });
-var templateObject_1$A, templateObject_2$t, templateObject_3$k, templateObject_4$e, templateObject_5$a;
+var templateObject_1$A, templateObject_2$t, templateObject_3$k, templateObject_4$e, templateObject_5$a, templateObject_6$7;
 
 var defaultIdCaptureGuideImages = {
   portrait: {
@@ -8263,6 +8262,53 @@ var FlipImageContainer = styled(IdCardGuideImageContainer)(templateObject_1$z ||
 });
 var templateObject_1$z;
 
+var GuideOrientationContext = /*#__PURE__*/createContext({
+  orientation: 'landscape',
+  wrapperWidth: 1,
+  wrapperHeight: 1,
+  wrapperAspectRatio: 0,
+  imageAspectRatio: 0,
+  wrapperRef: null,
+  setImageAspectRatio: function setImageAspectRatio() {
+    return null;
+  }
+});
+function GuideOrientationContextProvider(_a) {
+  var children = _a.children;
+  var _b = useState(1),
+    imageAspectRatio = _b[0],
+    setImageAspectRatio = _b[1];
+  var _c = useResizeObserver(),
+    wrapperRef = _c.ref,
+    _d = _c.width,
+    wrapperWidth = _d === void 0 ? 1 : _d,
+    _e = _c.height,
+    wrapperHeight = _e === void 0 ? 1 : _e;
+  var wrapperAspectRatio = useMemo(function () {
+    return wrapperWidth / wrapperHeight;
+  }, [wrapperHeight, wrapperWidth]);
+  var orientation = 'landscape'; //width > height ? 'landscape' : 'portrait'
+  var value = useMemo(function () {
+    return {
+      orientation: orientation,
+      wrapperWidth: wrapperWidth,
+      wrapperHeight: wrapperHeight,
+      wrapperAspectRatio: wrapperAspectRatio,
+      imageAspectRatio: imageAspectRatio,
+      setImageAspectRatio: setImageAspectRatio,
+      wrapperRef: wrapperRef
+    };
+  }, [imageAspectRatio, wrapperAspectRatio, wrapperHeight, wrapperRef, wrapperWidth]);
+  return /*#__PURE__*/React__default.createElement(GuideOrientationContext.Provider, {
+    value: value
+  }, children);
+}
+function useGuideOrientationContext() {
+  var ctx = useContext(GuideOrientationContext);
+  if (!ctx) throw new Error('useGuideOrientationContext cannot be used without GuideOrientationContextProvider');
+  return ctx;
+}
+
 var FlipIdPrompt = function FlipIdPrompt(_a) {
   var _b = _a.images,
     images = _b === void 0 ? defaultIdCaptureGuideImages : _b,
@@ -8280,6 +8326,7 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
     portraitGuidesOnMobile = _g === void 0 ? true : _g,
     _h = _a.classNames,
     classNames = _h === void 0 ? {} : _h;
+  var imageAspectRatio = useGuideOrientationContext().imageAspectRatio;
   var orientation = getOrientation(portraitGuidesOnMobile);
   var _j = useState(1),
     transitionTime = _j[0],
@@ -8316,6 +8363,7 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
     borderRadius: borderRadius,
     "$transforms": frontTransforms.join(' '),
     "$transitionTime": transitionTime,
+    aspectRatio: imageAspectRatio,
     "$isVisible": true
   }, /*#__PURE__*/React__default.createElement(IdCardGuideImage, {
     alt: "",
@@ -8331,6 +8379,7 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
     borderRadius: borderRadius,
     "$transforms": backTransforms.join(' '),
     "$transitionTime": transitionTime,
+    aspectRatio: imageAspectRatio,
     "$isVisible": true
   }, /*#__PURE__*/React__default.createElement(IdCardGuideImage, {
     alt: "",
@@ -8341,53 +8390,6 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
   })));
 };
 
-var GuideOrientationContext = /*#__PURE__*/createContext({
-  orientation: 'landscape',
-  wrapperWidth: 1,
-  wrapperHeight: 1,
-  wrapperAspectRatio: 0,
-  imageAspectRatio: 0,
-  wrapperRef: null,
-  setImageAspectRatio: function setImageAspectRatio() {
-    return null;
-  }
-});
-function GuideOrientationContextProvider(_a) {
-  var children = _a.children;
-  var _b = useState(1),
-    imageAspectRatio = _b[0],
-    setImageAspectRatio = _b[1];
-  var _c = useResizeObserver(),
-    wrapperRef = _c.ref,
-    _d = _c.width,
-    wrapperWidth = _d === void 0 ? 1 : _d,
-    _e = _c.height,
-    wrapperHeight = _e === void 0 ? 1 : _e;
-  var wrapperAspectRatio = useMemo(function () {
-    return wrapperWidth / wrapperHeight;
-  }, [wrapperHeight, wrapperWidth]);
-  var orientation = 'landscape'; //width > height ? 'landscape' : 'portrait'
-  var value = useMemo(function () {
-    return {
-      orientation: orientation,
-      wrapperWidth: wrapperWidth,
-      wrapperHeight: wrapperHeight,
-      wrapperAspectRatio: wrapperAspectRatio,
-      imageAspectRatio: imageAspectRatio,
-      setImageAspectRatio: setImageAspectRatio,
-      wrapperRef: wrapperRef
-    };
-  }, [imageAspectRatio, wrapperAspectRatio, wrapperHeight, wrapperRef, wrapperWidth]);
-  return /*#__PURE__*/React__default.createElement(GuideOrientationContext.Provider, {
-    value: value
-  }, children);
-}
-function useGuideOrientationContext() {
-  var ctx = useContext(GuideOrientationContext);
-  if (!ctx) throw new Error('useGuideOrientationContext cannot be used without GuideOrientationContextProvider');
-  return ctx;
-}
-
 var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
   var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
   var _s = _a.classNames,
@@ -8439,8 +8441,10 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
   var currentImage = images[orientation][requestedAction === 'FLIP_ID' ? 'SHOW_ID_FRONT' : requestedAction];
   var imagePadding = userSuppliedImagePadding !== null && userSuppliedImagePadding !== void 0 ? userSuppliedImagePadding : isMobile() ? (_o = (_m = (_l = theme.idCapture) === null || _l === void 0 ? void 0 : _l.guideBox) === null || _m === void 0 ? void 0 : _m.mobileImagePadding) !== null && _o !== void 0 ? _o : 0 : (_r = (_q = (_p = theme.idCapture) === null || _p === void 0 ? void 0 : _p.guideBox) === null || _q === void 0 ? void 0 : _q.imagePadding) !== null && _r !== void 0 ? _r : 50;
   var centerRegionMinWidth = imageAspectRatio >= wrapperAspectRatio ? wrapperWidth - paddingAndBorderPx : undefined;
-  function onImageLoaded() {
+  useEffect(function () {
     setImageAspectRatio(currentImage.width / currentImage.height);
+  }, [currentImage.height, currentImage.width, setImageAspectRatio]);
+  function onImageLoaded() {
     dispatchIdCaptureAction({
       type: 'guideImageLoaded',
       payload: {
@@ -8506,8 +8510,8 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
     portraitGuidesOnMobile: portraitGuidesOnMobile,
     isMirrored: isMirrored,
     classNames: classNames.flipIdPrompt,
-    width: currentImage.width,
-    height: currentImage.height
+    width: innerWidth,
+    height: innerHeight
   }))))), /*#__PURE__*/React__default.createElement(Spacer, {
     "$maskColor": maskColor,
     "$minWidth": padding,