idmission-web-sdk 2.3.33 → 2.3.35

package/dist/sdk2.umd.development.js

@@ -211,7 +211,7 @@
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  var webSdkVersion = '2.3.33';
+  var webSdkVersion = '2.3.35';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -482,7 +482,7 @@
   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;
@@ -521,7 +521,7 @@
   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;
 
   function _extends() {
     return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -16720,7 +16720,7 @@
     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) {
@@ -16750,7 +16750,7 @@
     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"])));
@@ -17001,8 +17001,8 @@
   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;
@@ -17100,12 +17100,13 @@
     var progressBarColor = (_k = (_j = (_h = theme.idCapture) === null || _h === void 0 ? void 0 : _h.guideBox) === null || _j === void 0 ? void 0 : _j.progressBarColor) !== null && _k !== void 0 ? _k : borderColor;
     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.createElement(IdCardBorderContainer, _assign({}, props), /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(IdCardBorderContainer, _assign({}, props, {
+      style: _assign(_assign({}, props.style), {
+        aspectRatio: aspectRatio
+      })
+    }), /*#__PURE__*/React.createElement(IdCardBorderInner, {
       ref: ref,
       style: {
-        maxHeight: '100%',
-        maxWidth: '100%',
-        display: 'flex',
         aspectRatio: aspectRatio
       }
     }, children), status === 'ready' && !wavesDisabled && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IdCardBorderSvg, {
@@ -17205,16 +17206,17 @@
       className: isProgressBar ? "idmSdkProgressBorder ".concat(progressPaused ? 'idmSdkProgressPaused' : '') : ''
     }));
   }
-  var IdCardBorderContainer = styled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  max-width: 100%;\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  & > .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: {
@@ -17404,19 +17406,12 @@
     wrapperAspectRatio: 0,
     imageAspectRatio: 0,
     wrapperRef: null,
-    setDimensions: function setDimensions() {
-      return null;
-    },
-    onImageLoaded: function onImageLoaded() {
+    setImageAspectRatio: function setImageAspectRatio() {
       return null;
     }
   });
   function GuideOrientationContextProvider(_a) {
     var children = _a.children;
-    var setDimensions = React.useState({
-      width: 1,
-      height: 1
-    })[1];
     var _b = React.useState(1),
       imageAspectRatio = _b[0],
       setImageAspectRatio = _b[1];
@@ -17429,10 +17424,6 @@
     var wrapperAspectRatio = React.useMemo(function () {
       return wrapperWidth / wrapperHeight;
     }, [wrapperHeight, wrapperWidth]);
-    var onImageLoaded = React.useCallback(function (e) {
-      var img = e.target;
-      setImageAspectRatio(img.naturalWidth / img.naturalHeight);
-    }, []);
     var orientation = 'landscape'; //width > height ? 'landscape' : 'portrait'
     var value = React.useMemo(function () {
       return {
@@ -17441,11 +17432,10 @@
         wrapperHeight: wrapperHeight,
         wrapperAspectRatio: wrapperAspectRatio,
         imageAspectRatio: imageAspectRatio,
-        setDimensions: setDimensions,
-        wrapperRef: wrapperRef,
-        onImageLoaded: onImageLoaded
+        setImageAspectRatio: setImageAspectRatio,
+        wrapperRef: wrapperRef
       };
-    }, [imageAspectRatio, onImageLoaded, setDimensions, wrapperAspectRatio, wrapperHeight, wrapperRef, wrapperWidth]);
+    }, [imageAspectRatio, wrapperAspectRatio, wrapperHeight, wrapperRef, wrapperWidth]);
     return /*#__PURE__*/React.createElement(GuideOrientationContext.Provider, {
       value: value
     }, children);
@@ -17473,7 +17463,7 @@
       portraitGuidesOnMobile = _g === void 0 ? true : _g,
       _h = _a.classNames,
       classNames = _h === void 0 ? {} : _h;
-    var onImageLoaded = useGuideOrientationContext().onImageLoaded;
+    var imageAspectRatio = useGuideOrientationContext().imageAspectRatio;
     var orientation = getOrientation(portraitGuidesOnMobile);
     var _j = React.useState(1),
       transitionTime = _j[0],
@@ -17510,12 +17500,12 @@
       borderRadius: borderRadius,
       "$transforms": frontTransforms.join(' '),
       "$transitionTime": transitionTime,
+      aspectRatio: imageAspectRatio,
       "$isVisible": true
     }, /*#__PURE__*/React.createElement(IdCardGuideImage, {
       alt: "",
       src: images[orientation].SHOW_ID_FRONT.url,
       className: classNames.frontImage,
-      onLoad: onImageLoaded,
       width: width,
       height: height
     })), /*#__PURE__*/React.createElement(FlipImageContainer, {
@@ -17526,6 +17516,7 @@
       borderRadius: borderRadius,
       "$transforms": backTransforms.join(' '),
       "$transitionTime": transitionTime,
+      aspectRatio: imageAspectRatio,
       "$isVisible": true
     }, /*#__PURE__*/React.createElement(IdCardGuideImage, {
       alt: "",
@@ -17537,66 +17528,49 @@
   };
 
   var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-    var _u = _a.classNames,
-      classNames = _u === void 0 ? {} : _u,
-      _v = _a.images,
-      userSuppliedImages = _v === void 0 ? defaultIdCaptureGuideImages : _v,
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _s = _a.classNames,
+      classNames = _s === void 0 ? {} : _s,
+      _t = _a.images,
+      userSuppliedImages = _t === void 0 ? defaultIdCaptureGuideImages : _t,
       userSuppliedPadding = _a.padding,
       userSuppliedImagePadding = _a.imagePadding,
-      _w = _a.imageVisible,
-      imageVisible = _w === void 0 ? true : _w,
+      _u = _a.imageVisible,
+      imageVisible = _u === void 0 ? true : _u,
       borderWidth = _a.borderWidth,
       borderColor = _a.borderColor,
-      _x = _a.idCardBorderWidth,
-      idCardBorderWidth = _x === void 0 ? '2.5%' : _x,
-      _y = _a.idCardBorderColor,
-      idCardBorderColor = _y === void 0 ? 'white' : _y,
+      _v = _a.idCardBorderWidth,
+      idCardBorderWidth = _v === void 0 ? '2.5%' : _v,
+      _w = _a.idCardBorderColor,
+      idCardBorderColor = _w === void 0 ? 'white' : _w,
       maskColor = _a.maskColor,
-      _z = _a.isMirrored,
-      isMirrored = _z === void 0 ? false : _z,
-      _0 = _a.isBackToFront,
-      isBackToFront = _0 === void 0 ? false : _0,
-      _1 = _a.portraitGuidesOnMobile,
-      portraitGuidesOnMobile = _1 === void 0 ? true : _1,
-      _2 = _a.instruction,
-      instruction = _2 === void 0 ? '' : _2,
-      _3 = _a.requestedAction,
-      requestedAction = _3 === void 0 ? 'SHOW_ID_FRONT' : _3,
-      _4 = _a.progress,
-      progress = _4 === void 0 ? 0 : _4,
-      _5 = _a.status,
-      status = _5 === void 0 ? 'ready' : _5,
+      _x = _a.isMirrored,
+      isMirrored = _x === void 0 ? false : _x,
+      _y = _a.isBackToFront,
+      isBackToFront = _y === void 0 ? false : _y,
+      _z = _a.portraitGuidesOnMobile,
+      portraitGuidesOnMobile = _z === void 0 ? true : _z,
+      _0 = _a.instruction,
+      instruction = _0 === void 0 ? '' : _0,
+      _1 = _a.requestedAction,
+      requestedAction = _1 === void 0 ? 'SHOW_ID_FRONT' : _1,
+      _2 = _a.progress,
+      progress = _2 === void 0 ? 0 : _2,
+      _3 = _a.status,
+      status = _3 === void 0 ? 'ready' : _3,
       onClick = _a.onClick;
-    var _6 = useGuideOrientationContext(),
-      wrapperRef = _6.wrapperRef,
-      wrapperWidth = _6.wrapperWidth,
-      wrapperHeight = _6.wrapperHeight,
-      imageAspectRatio = _6.imageAspectRatio,
-      wrapperAspectRatio = _6.wrapperAspectRatio,
-      guideOrientationOnImageLoaded = _6.onImageLoaded,
-      setDimensions = _6.setDimensions;
-    var containerRef = React.useRef(null);
-    var _7 = React.useState({
-        width: 0,
-        height: 0
-      }),
-      imageDimensions = _7[0],
-      setImageDimensions = _7[1];
-    var _8 = React.useState({
-        width: 0,
-        height: 0
-      }),
-      containerDimensions = _8[0],
-      setContainerDimensions = _8[1];
+    var _4 = useGuideOrientationContext(),
+      wrapperRef = _4.wrapperRef,
+      wrapperWidth = _4.wrapperWidth,
+      imageAspectRatio = _4.imageAspectRatio,
+      wrapperAspectRatio = _4.wrapperAspectRatio,
+      setImageAspectRatio = _4.setImageAspectRatio;
+    var _5 = useResizeObserver(),
+      innerRef = _5.ref,
+      innerWidth = _5.width,
+      innerHeight = _5.height;
     var theme = styled.useTheme();
     if (borderWidth === undefined) borderWidth = (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 4;
-    React.useEffect(function () {
-      setDimensions({
-        width: wrapperWidth,
-        height: wrapperHeight
-      });
-    }, [setDimensions, wrapperHeight, wrapperWidth]);
     var padding = userSuppliedPadding !== null && userSuppliedPadding !== void 0 ? userSuppliedPadding : isMobile() ? (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.mobilePadding) !== null && _g !== void 0 ? _g : 0 : (_k = (_j = (_h = theme.idCapture) === null || _h === void 0 ? void 0 : _h.guideBox) === null || _j === void 0 ? void 0 : _j.desktopPadding) !== null && _k !== void 0 ? _k : 50;
     var paddingAndBorderPx = padding * 2 + (borderWidth !== null && borderWidth !== void 0 ? borderWidth : 0) * 2;
     var images = useImagesWithBackToFront(userSuppliedImages, isBackToFront);
@@ -17604,28 +17578,18 @@
     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;
-    var onImageLoaded = React.useCallback(function (e) {
-      guideOrientationOnImageLoaded(e);
-      setImageDimensions({
-        width: (currentImage === null || currentImage === void 0 ? void 0 : currentImage.width) || imageDimensions.width,
-        height: (currentImage === null || currentImage === void 0 ? void 0 : currentImage.height) || imageDimensions.height
-      });
-    }, [guideOrientationOnImageLoaded, currentImage, imageDimensions.height, imageDimensions.width]);
     React.useEffect(function () {
-      if (containerRef.current && containerRef.current.clientWidth && containerRef.current.clientHeight) {
-        setContainerDimensions({
-          width: containerRef.current.clientWidth,
-          height: containerRef.current.clientHeight
-        });
-        dispatchIdCaptureAction({
-          type: 'guideImageLoaded',
-          payload: {
-            width: imageDimensions.width,
-            height: imageDimensions.height
-          }
-        });
-      }
-    }, [setDimensions, setContainerDimensions, imageDimensions.height, imageDimensions.width]);
+      setImageAspectRatio(currentImage.width / currentImage.height);
+    }, [currentImage.height, currentImage.width, setImageAspectRatio]);
+    function onImageLoaded() {
+      dispatchIdCaptureAction({
+        type: 'guideImageLoaded',
+        payload: {
+          width: currentImage.width,
+          height: currentImage.height
+        }
+      });
+    }
     return /*#__PURE__*/React.createElement(StyledPageContainer, {
       ref: wrapperRef,
       onClick: onClick,
@@ -17655,10 +17619,10 @@
       className: classNames.centerRegionBorder
     }, /*#__PURE__*/React.createElement(GuideCenterInner, {
       "$isLandscape": orientation === 'landscape',
-      ref: containerRef,
+      ref: innerRef,
       className: classNames.centerRegionInner,
       style: {
-        aspectRatio: imageDimensions.width && imageDimensions.height ? imageDimensions.width / imageDimensions.height : 1
+        aspectRatio: imageAspectRatio
       }
     }, /*#__PURE__*/React.createElement(IdCardGuideImageContainer, {
       status: status,
@@ -17666,7 +17630,7 @@
       borderWidth: idCardBorderWidth,
       borderColor: idCardBorderColor,
       "$isVisible": requestedAction !== 'FLIP_ID',
-      aspectRatio: imageDimensions.width && imageDimensions.height ? imageDimensions.width / imageDimensions.height : 1
+      aspectRatio: imageAspectRatio
     }, /*#__PURE__*/React.createElement(IdCardGuideImage, {
       alt: "",
       src: currentImage.url,
@@ -17674,8 +17638,8 @@
       className: classNames.image,
       "$isInvisible": !imageVisible,
       "$isMirrored": isMirrored,
-      width: containerDimensions.width ? containerDimensions.width : imageDimensions.width,
-      height: containerDimensions.height ? containerDimensions.height : imageDimensions.height
+      width: innerWidth || currentImage.width,
+      height: innerHeight || currentImage.height
     })), requestedAction === 'FLIP_ID' && ( /*#__PURE__*/React.createElement(FlipIdPrompt, {
       images: images,
       borderWidth: idCardBorderWidth,
@@ -17683,8 +17647,8 @@
       portraitGuidesOnMobile: portraitGuidesOnMobile,
       isMirrored: isMirrored,
       classNames: classNames.flipIdPrompt,
-      width: (_s = currentImage === null || currentImage === void 0 ? void 0 : currentImage.width) !== null && _s !== void 0 ? _s : imageDimensions.width,
-      height: (_t = currentImage === null || currentImage === void 0 ? void 0 : currentImage.width) !== null && _t !== void 0 ? _t : imageDimensions.height
+      width: innerWidth,
+      height: innerHeight
     }))))), /*#__PURE__*/React.createElement(Spacer, {
       "$maskColor": maskColor,
       "$minWidth": padding,
@@ -17724,14 +17688,14 @@
   }, function (props) {
     return props.$isMirrored ? 'transform: scaleX(-1);' : '';
   });
-  var GuideCenterBorder = styled.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) {
+  var GuideCenterBorder = styled.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  max-width: 100%;\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  max-width: 100%;\n  position: relative;\n  ", "\n"])), function (props) {
     var _a, _b;
     return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
   }, function (props) {
     return props.$padding ? "padding: ".concat(props.$padding, "px;") : '';
   });
   var GuideText = styled.span(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"], ["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"])));
-  var GuideCenterInner = styled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n  position: relative;\n  margin: auto;\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  display: flex;\n"], ["\n  position: relative;\n  margin: auto;\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  display: flex;\n"])), function (props) {
+  var GuideCenterInner = styled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n  position: relative;\n  margin: auto;\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  position: relative;\n  margin: auto;\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (props) {
     return props.$isLandscape ? 'height: 100%;' : 'width: 90%;';
   });
   var templateObject_1$y, templateObject_2$s, templateObject_3$j, templateObject_4$d, templateObject_5$9, templateObject_6$6, templateObject_7$4, templateObject_8$2, templateObject_9$2;