idmission-web-sdk 2.3.32 → 2.3.34

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.32';
+var webSdkVersion = '2.3.34';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -7916,12 +7916,10 @@ function resetCanvasDimensions(canvas) {
   canvas.style.height = '0';
 }
 
-var IdCardGuideImageContainer = styled(IdCardBorder)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n  aspect-ratio: ", ";\n  display: flex;\n"], ["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n  aspect-ratio: ", ";\n  display: flex;\n"])), function (props) {
+var IdCardGuideImageContainer = styled(IdCardBorder)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n"], ["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n"])), function (props) {
   return props.$isVisible ? '' : 'opacity: 0;';
-}, function (props) {
-  return props.$aspectRatio;
 });
-var IdCardGuideImage = styled.img(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  transform-style: preserve-3d;\n  ", "\n  ", "\n  max-width: 100%;\n  max-height: 100%;\n"], ["\n  transform-style: preserve-3d;\n  ", "\n  ", "\n  max-width: 100%;\n  max-height: 100%;\n"])), function (props) {
+var IdCardGuideImage = styled.img(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  max-height: 100%;\n  transform-style: preserve-3d;\n  ", "\n  ", "\n"], ["\n  max-height: 100%;\n  transform-style: preserve-3d;\n  ", "\n  ", "\n"])), function (props) {
   return props.$isMirrored ? 'transform: scaleX(-1);' : '';
 }, function (props) {
   return props.$isInvisible ? 'opacity: 0;' : '';
@@ -7937,19 +7935,20 @@ function IdCardBorder(_a) {
     borderRadius = _u === void 0 ? 25 : _u,
     _v = _a.borderColor,
     borderColor = _v === void 0 ? 'white' : _v,
-    aspectRatio = _a.aspectRatio,
-    _w = _a.progress,
-    progress = _w === void 0 ? 0 : _w,
+    _w = _a.aspectRatio,
+    aspectRatio = _w === void 0 ? 1 : _w,
+    _x = _a.progress,
+    progress = _x === void 0 ? 0 : _x,
     props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor", "aspectRatio", "progress"]);
-  var _x = useResizeObserver(),
-    ref = _x.ref,
-    _y = _x.width,
-    width = _y === void 0 ? 0 : _y,
-    _z = _x.height,
-    height = _z === void 0 ? 0 : _z;
-  var _0 = useState(0),
-    progressResets = _0[0],
-    setProgressResets = _0[1];
+  var _y = useResizeObserver(),
+    ref = _y.ref,
+    _z = _y.width,
+    width = _z === void 0 ? 0 : _z,
+    _0 = _y.height,
+    height = _0 === void 0 ? 0 : _0;
+  var _1 = useState(0),
+    progressResets = _1[0],
+    setProgressResets = _1[1];
   useEffect(function () {
     if (progress === 0 && status === 'capturing') {
       setProgressResets(function (n) {
@@ -7963,11 +7962,17 @@ function IdCardBorder(_a) {
   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__default.createElement(IdCardBorderContainer, _assign({}, props), /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement(IdCardBorderContainer, _assign({}, props, {
+    style: {
+      aspectRatio: aspectRatio
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     style: {
-      aspectRatio: aspectRatio,
-      flex: 1
+      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, {
     width: width,
@@ -8066,7 +8071,7 @@ function IdCardBorderSvg(_a) {
     className: isProgressBar ? "idmSdkProgressBorder ".concat(progressPaused ? 'idmSdkProgressPaused' : '') : ''
   }));
 }
-var IdCardBorderContainer = styled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\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  & > .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 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 _a;
@@ -8258,65 +8263,6 @@ 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,
-  setDimensions: function setDimensions() {
-    return null;
-  },
-  onImageLoaded: function onImageLoaded() {
-    return null;
-  }
-});
-function GuideOrientationContextProvider(_a) {
-  var children = _a.children;
-  var setDimensions = useState({
-    width: 1,
-    height: 1
-  })[1];
-  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 onImageLoaded = useCallback(function (e) {
-    var img = e.target;
-    setImageAspectRatio(img.naturalWidth / img.naturalHeight);
-  }, []);
-  var orientation = 'landscape'; //width > height ? 'landscape' : 'portrait'
-  var value = useMemo(function () {
-    return {
-      orientation: orientation,
-      wrapperWidth: wrapperWidth,
-      wrapperHeight: wrapperHeight,
-      wrapperAspectRatio: wrapperAspectRatio,
-      imageAspectRatio: imageAspectRatio,
-      setDimensions: setDimensions,
-      wrapperRef: wrapperRef,
-      onImageLoaded: onImageLoaded
-    };
-  }, [imageAspectRatio, onImageLoaded, setDimensions, 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,
@@ -8334,7 +8280,6 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
     portraitGuidesOnMobile = _g === void 0 ? true : _g,
     _h = _a.classNames,
     classNames = _h === void 0 ? {} : _h;
-  var onImageLoaded = useGuideOrientationContext().onImageLoaded;
   var orientation = getOrientation(portraitGuidesOnMobile);
   var _j = useState(1),
     transitionTime = _j[0],
@@ -8376,7 +8321,6 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
     alt: "",
     src: images[orientation].SHOW_ID_FRONT.url,
     className: classNames.frontImage,
-    onLoad: onImageLoaded,
     width: width,
     height: height
   })), /*#__PURE__*/React__default.createElement(FlipImageContainer, {
@@ -8397,86 +8341,114 @@ 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;
-  var _p = _a.classNames,
-    classNames = _p === void 0 ? {} : _p,
-    _q = _a.images,
-    userSuppliedImages = _q === void 0 ? defaultIdCaptureGuideImages : _q,
+  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,
-    _r = _a.imageVisible,
-    imageVisible = _r === void 0 ? true : _r,
+    _u = _a.imageVisible,
+    imageVisible = _u === void 0 ? true : _u,
     borderWidth = _a.borderWidth,
     borderColor = _a.borderColor,
-    _s = _a.idCardBorderWidth,
-    idCardBorderWidth = _s === void 0 ? '2.5%' : _s,
-    _t = _a.idCardBorderColor,
-    idCardBorderColor = _t === void 0 ? 'white' : _t,
+    _v = _a.idCardBorderWidth,
+    idCardBorderWidth = _v === void 0 ? '2.5%' : _v,
+    _w = _a.idCardBorderColor,
+    idCardBorderColor = _w === void 0 ? 'white' : _w,
     maskColor = _a.maskColor,
-    _u = _a.isMirrored,
-    isMirrored = _u === void 0 ? false : _u,
-    _v = _a.isBackToFront,
-    isBackToFront = _v === void 0 ? false : _v,
-    _w = _a.portraitGuidesOnMobile,
-    portraitGuidesOnMobile = _w === void 0 ? true : _w,
-    _x = _a.instruction,
-    instruction = _x === void 0 ? '' : _x,
-    _y = _a.requestedAction,
-    requestedAction = _y === void 0 ? 'SHOW_ID_FRONT' : _y,
-    _z = _a.progress,
-    progress = _z === void 0 ? 0 : _z,
-    _0 = _a.status,
-    status = _0 === void 0 ? 'ready' : _0,
+    _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 _1 = useGuideOrientationContext(),
-    wrapperRef = _1.wrapperRef,
-    wrapperWidth = _1.wrapperWidth,
-    wrapperHeight = _1.wrapperHeight,
-    imageAspectRatio = _1.imageAspectRatio,
-    wrapperAspectRatio = _1.wrapperAspectRatio,
-    guideOrientationOnImageLoaded = _1.onImageLoaded,
-    setDimensions = _1.setDimensions;
-  var state = useIdCaptureStore();
+  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 = 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;
-  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);
-  var imagesByUrl = useGuideImagesByUrl(images);
   var orientation = getOrientation(portraitGuidesOnMobile);
   var currentImage = images[orientation][requestedAction === 'FLIP_ID' ? 'SHOW_ID_FRONT' : requestedAction];
-  var imagePadding = (_o = userSuppliedImagePadding !== null && userSuppliedImagePadding !== void 0 ? userSuppliedImagePadding : (_m = (_l = theme.idCapture) === null || _l === void 0 ? void 0 : _l.guideBox) === null || _m === void 0 ? void 0 : _m.imagePadding) !== null && _o !== void 0 ? _o : '0 50px';
-  if (typeof imagePadding === 'number') {
-    imagePadding = "".concat(imagePadding, "px");
-  }
-  var paddingForMath = imagePadding.replace(/[^0-9\s]/g, '').split(' ').map(Number);
-  var paddingForMathMax = Math.max.apply(Math, paddingForMath);
-  var imageWidth = state.guideRectWidth - paddingForMathMax * 2;
-  var imageHeight = state.guideRectHeight - paddingForMathMax * 2;
+  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 cardAspectRatio = imageAspectRatio > 1 ? '1.6' : '0.625';
-  var onImageLoaded = useCallback(function (e) {
-    var _a, _b;
-    guideOrientationOnImageLoaded(e);
-    var img = e.currentTarget;
-    var imageByUrl = imagesByUrl[img.src];
-    var width = (_a = imageByUrl === null || imageByUrl === void 0 ? void 0 : imageByUrl.width) !== null && _a !== void 0 ? _a : img.naturalWidth;
-    var height = (_b = imageByUrl === null || imageByUrl === void 0 ? void 0 : imageByUrl.height) !== null && _b !== void 0 ? _b : img.naturalHeight;
+  function onImageLoaded() {
+    setImageAspectRatio(currentImage.width / currentImage.height);
     dispatchIdCaptureAction({
       type: 'guideImageLoaded',
       payload: {
-        width: width,
-        height: height
+        width: currentImage.width,
+        height: currentImage.height
       }
     });
-  }, [guideOrientationOnImageLoaded, imagesByUrl]);
+  }
   return /*#__PURE__*/React__default.createElement(StyledPageContainer, {
     ref: wrapperRef,
     onClick: onClick,
@@ -8505,14 +8477,19 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
     "$padding": imagePadding,
     className: classNames.centerRegionBorder
   }, /*#__PURE__*/React__default.createElement(GuideCenterInner, {
-    className: classNames.centerRegionInner
+    "$isLandscape": orientation === 'landscape',
+    ref: innerRef,
+    className: classNames.centerRegionInner,
+    style: {
+      aspectRatio: imageAspectRatio
+    }
   }, /*#__PURE__*/React__default.createElement(IdCardGuideImageContainer, {
     status: status,
     progress: progress,
     borderWidth: idCardBorderWidth,
     borderColor: idCardBorderColor,
     "$isVisible": requestedAction !== 'FLIP_ID',
-    "$aspectRatio": cardAspectRatio
+    aspectRatio: imageAspectRatio
   }, /*#__PURE__*/React__default.createElement(IdCardGuideImage, {
     alt: "",
     src: currentImage.url,
@@ -8520,8 +8497,8 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
     className: classNames.image,
     "$isInvisible": !imageVisible,
     "$isMirrored": isMirrored,
-    width: imageWidth,
-    height: imageHeight
+    width: innerWidth || currentImage.width,
+    height: innerHeight || currentImage.height
   })), requestedAction === 'FLIP_ID' && ( /*#__PURE__*/React__default.createElement(FlipIdPrompt, {
     images: images,
     borderWidth: idCardBorderWidth,
@@ -8529,8 +8506,8 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
     portraitGuidesOnMobile: portraitGuidesOnMobile,
     isMirrored: isMirrored,
     classNames: classNames.flipIdPrompt,
-    width: imageWidth,
-    height: imageHeight
+    width: currentImage.width,
+    height: currentImage.height
   }))))), /*#__PURE__*/React__default.createElement(Spacer, {
     "$maskColor": maskColor,
     "$minWidth": padding,
@@ -8570,14 +8547,16 @@ var GuideCenterRegion = styled.div(templateObject_6$6 || (templateObject_6$6 = _
 }, 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, ";") : '';
+  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  position: relative;\n  margin: auto;\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  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;
 
 var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
@@ -15710,7 +15689,8 @@ var defaultTheme = {
       borderWidth: 4,
       desktopPadding: 50,
       mobilePadding: 0,
-      imagePadding: '0 50px',
+      imagePadding: 50,
+      mobileImagePadding: 0,
       wavesDisabled: false,
       wavesColor: '#287ec6',
       progressBarColor: 'white',