idmission-web-sdk 2.1.41 → 2.1.42

package/dist/components/id_capture/FlipIdPrompt.d.ts

@@ -16,9 +16,11 @@ export type FlipIdPromptVerbiage = {
     instructionText?: CustomerSuppliedVerbiage;
 };
 export type FlipIdPromptProps = {
+    width?: number;
+    height?: number;
     padding?: number;
     imagePadding?: number;
-    borderWidth?: number;
+    borderWidth?: number | string;
     borderColor?: string;
     borderRadius?: number;
     isMirrored?: boolean;
@@ -27,4 +29,4 @@ export type FlipIdPromptProps = {
     classNames?: FlipIdPromptClassNames;
     verbiage?: FlipIdPromptVerbiage;
 };
-export declare const FlipIdPrompt: ({ borderWidth, borderColor, borderRadius, isMirrored, portraitGuidesOnMobile, assets, classNames, }: FlipIdPromptProps) => ReactElement;
+export declare const FlipIdPrompt: ({ width, height, borderWidth, borderColor, borderRadius, isMirrored, portraitGuidesOnMobile, assets, classNames, }: FlipIdPromptProps) => ReactElement;

package/dist/components/id_capture/IdCaptureGuideOverlay.d.ts

@@ -36,7 +36,7 @@ export type IdCaptureGuideOverlayProps = {
     imageVisible?: boolean;
     borderWidth?: number;
     borderColor?: string;
-    idCardBorderWidth?: number;
+    idCardBorderWidth?: number | string;
     idCardBorderColor?: string;
     maskColor?: string;
     isMirrored?: boolean;

package/dist/components/id_capture/ScalingCameraFeed.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function ScalingCameraFeed(): React.JSX.Element | null;

package/dist/components/video_id/IdVideoCaptureFlipIdPrompt.d.ts

@@ -20,7 +20,7 @@ export type IdVideoCaptureFlipIdPromptProps = {
 export declare const IdVideoCaptureFlipIdPrompt: ({ assets, classNames, borderWidth, borderColor, borderRadius, imageStyle, }: IdVideoCaptureFlipIdPromptProps) => ReactElement;
 export declare const FlipImageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<React.HTMLAttributes<HTMLDivElement> & {
     status?: import("./IdVideoCaptureGuidesCommon").IdCardGuideStatus;
-    borderWidth?: number;
+    borderWidth?: number | string;
     borderRadius?: number;
     borderColor?: string;
     progress?: number;

package/dist/components/video_id/IdVideoCaptureGuidesCommon.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare const IdCardGuideImageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.HTMLAttributes<HTMLDivElement> & {
     status?: IdCardGuideStatus;
-    borderWidth?: number;
+    borderWidth?: number | string;
     borderRadius?: number;
     borderColor?: string;
     progress?: number;
@@ -15,7 +15,7 @@ export declare const IdCardGuideImage: import("styled-components/dist/types").IS
 export type IdCardGuideStatus = 'disabled' | 'ready' | 'capturing';
 declare function IdCardBorder({ children, status, borderWidth, borderRadius, borderColor, progress, ...props }: React.HTMLAttributes<HTMLDivElement> & {
     status?: IdCardGuideStatus;
-    borderWidth?: number;
+    borderWidth?: number | string;
     borderRadius?: number;
     borderColor?: string;
     progress?: number;

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.41';
+var webSdkVersion = '2.1.42';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -8147,48 +8147,6 @@ var CapturedImageWrapper = styled__default.default.div(templateObject_7$5 || (te
 var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 4px;\n"], ["\n  width: 100%;\n  border-radius: 4px;\n"])));
 var templateObject_1$v, templateObject_2$o, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$7, templateObject_7$5, templateObject_8$3;
 
-var CameraVideoTag = function CameraVideoTag(_a) {
-  var _b;
-  var className = _a.className;
-  var _c = React.useContext(CameraStateContext),
-    videoRef = _c.videoRef,
-    setVideoLoaded = _c.setVideoLoaded,
-    onVideoUnmounted = _c.onVideoUnmounted,
-    cameraRef = _c.cameraRef;
-  React.useEffect(function notifyCameraProviderOfUnmount() {
-    var videoElement = videoRef.current;
-    if (!videoElement) return;
-    return function () {
-      onVideoUnmounted(videoElement);
-    };
-  }, [onVideoUnmounted, videoRef]);
-  React.useEffect(function setVideoLoadedToFalseOnMount() {
-    setVideoLoaded(false);
-  }, [setVideoLoaded]);
-  React.useEffect(function attachCameraStreamToVideoTagWhenReady() {
-    var _a;
-    if (videoRef.current && ((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.stream)) {
-      videoRef.current.srcObject = cameraRef.current.stream;
-    }
-  }, [cameraRef, videoRef]);
-  var onLoadedData = React.useCallback(function () {
-    setVideoLoaded(true);
-  }, [setVideoLoaded]);
-  return /*#__PURE__*/React__namespace.default.createElement(FullscreenVideoTag, {
-    className: className,
-    autoPlay: true,
-    playsInline: true,
-    muted: true,
-    ref: videoRef,
-    onLoadedData: onLoadedData,
-    "$isRearFacing": (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing
-  });
-};
-var FullscreenVideoTag = styled__default.default.video(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n  z-index: -2;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n  z-index: -2;\n"])), function (props) {
-  return props.$isRearFacing ? '' : 'scaleX(-1)';
-});
-var templateObject_1$u;
-
 function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
   var _this = this;
   var _a = React.useState(false),
@@ -8222,11 +8180,6 @@ function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallb
   return !skipSuccessScreen || skipSuccessScreenResolvedFalse;
 }
 
-var CameraFeedWrapper = styled__default.default.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-  return props.$mode === 'snapToGuides' ? "display: flex;\n         position: absolute;\n         left: ".concat(props.$x, "px;\n         top: ").concat(props.$y, "px;\n         width: ").concat(props.$w, "px;\n         height: ").concat(props.$h, "px;") : "";
-});
-var templateObject_1$t;
-
 function setCanvasDimensions(canvas, width, height) {
   var _a;
   var devicePixelRatio = 1;
@@ -8259,7 +8212,7 @@ var GuideOrientationContext = /*#__PURE__*/React.createContext({
   }
 });
 
-var IdCardGuideImageContainer = styled__default.default(IdCardBorder)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n"], ["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n"])), function (props) {
+var IdCardGuideImageContainer = styled__default.default(IdCardBorder)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n"], ["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n"])), function (props) {
   return props.$isVisible ? '' : 'opacity: 0;';
 });
 var IdCardGuideImage = styled__default.default.img(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (props) {
@@ -8406,7 +8359,7 @@ var IdCardBorderRect = styled__default.default.rect(templateObject_5$8 || (templ
   var _a;
   return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
 });
-var templateObject_1$s, templateObject_2$n, templateObject_3$j, templateObject_4$d, templateObject_5$8;
+var templateObject_1$u, templateObject_2$n, templateObject_3$j, templateObject_4$d, templateObject_5$8;
 
 var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
   var _b;
@@ -8479,23 +8432,21 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
     style: imageStyle
   })));
 };
-var FlipImageContainer = styled__default.default(IdCardGuideImageContainer)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  backface-visibility: hidden;\n  transition: transform ", "s;\n  transform: ", ";\n  transform-style: preserve-3d;\n  position: absolute;\n  display: block;\n  top: 0;\n  width: 100%;\n  max-height: 100%;\n"], ["\n  backface-visibility: hidden;\n  transition: transform ", "s;\n  transform: ", ";\n  transform-style: preserve-3d;\n  position: absolute;\n  display: block;\n  top: 0;\n  width: 100%;\n  max-height: 100%;\n"])), function (props) {
+var FlipImageContainer = styled__default.default(IdCardGuideImageContainer)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  backface-visibility: hidden;\n  transition: transform ", "s;\n  transform: ", ";\n  transform-style: preserve-3d;\n  position: absolute;\n  display: block;\n  top: 0;\n  width: 100%;\n  max-height: 100%;\n"], ["\n  backface-visibility: hidden;\n  transition: transform ", "s;\n  transform: ", ";\n  transform-style: preserve-3d;\n  position: absolute;\n  display: block;\n  top: 0;\n  width: 100%;\n  max-height: 100%;\n"])), function (props) {
   return props.$transitionTime;
 }, function (props) {
   return props.$transforms;
 });
-var templateObject_1$r;
+var templateObject_1$t;
 
 var FlipIdPrompt = function FlipIdPrompt(_a) {
-  // const { width = 1, height = 1 } = useResizeObserver<HTMLDivElement>()
-  // const { cameraRef } = useContext(CameraStateContext)
   // const theme = useTheme()
   var
     // padding: userSuppliedPadding,
     // imagePadding: userSuppliedImagePadding,
+    width = _a.width,
+    height = _a.height,
     _b = _a.borderWidth,
-    // padding: userSuppliedPadding,
-    // imagePadding: userSuppliedImagePadding,
     borderWidth = _b === void 0 ? 20 : _b,
     _c = _a.borderColor,
     borderColor = _c === void 0 ? 'white' : _c,
@@ -8521,14 +8472,8 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
   //   (userSuppliedPadding ?? isMobile())
   //     ? (theme.idCapture?.guideBox?.mobilePadding ?? 0)
   //     : (theme.idCapture?.guideBox?.desktopPadding ?? 50)
-  // if (borderWidth === undefined)
-  //   borderWidth = theme.idCapture?.guideBox?.borderWidth ?? 4
-  // const isMirrored = !cameraRef.current?.isRearFacing
   var onImageLoaded = React.useContext(GuideOrientationContext).onImageLoaded;
   var orientation = portraitGuidesOnMobile && window.innerWidth < window.innerHeight ? 'portrait' : 'landscape';
-  // useEffect(() => {
-  //   setDimensions({ width, height })
-  // }, [height, setDimensions, width])
   // const imagePadding =
   //   userSuppliedImagePadding ?? theme.idCapture?.guideBox?.imagePadding ?? 0
   var _j = React.useState(1),
@@ -8572,12 +8517,9 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
     alt: "",
     className: classNames.frontImage,
     // $padding={imagePadding}
-    // $transitionTime={transitionTime}
-    // $transforms={frontTransforms.join(' ')}
-    // $width={imageWidth}
-    // $height={imageHeight}
-    // $visible
-    onLoad: onImageLoaded
+    onLoad: onImageLoaded,
+    width: width,
+    height: height
   })), /*#__PURE__*/React__namespace.default.createElement(FlipImageContainer, {
     status: "disabled",
     className: classNames.backImageContainer,
@@ -8590,16 +8532,12 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
   }, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
     src: orientation === 'portrait' ? assets.idCardBackPortraitImageUrl : assets.idCardBackLandscapeImageUrl,
     alt: "",
-    className: classNames.backImage
+    className: classNames.backImage,
+    // $padding={imagePadding}
+    width: width,
+    height: height
   })));
 };
-// const regionClsx = (
-//   classNames: FlipIdPromptClassNames,
-//   which: 'Top' | 'Left' | 'Right' | 'Bottom',
-// ): string =>
-//   [classNames.dimmingRegion, classNames[`dimmingRegion${which}`]]
-//     .filter((v) => v)
-//     .join(' ')
 
 var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
   var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
@@ -8702,10 +8640,9 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
   (_r = assets.flipIdPrompt).idCardBackPortraitImageUrl || (_r.idCardBackPortraitImageUrl = images.portrait.SHOW_ID_BACK);
   (_s = assets.flipIdPrompt).idCardBackLandscapeImageUrl || (_s.idCardBackLandscapeImageUrl = images.landscape.SHOW_ID_BACK);
   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;
-  var imageWidth = undefined;
-  if (imageAspectRatio >= wrapperAspectRatio) {
-    imageWidth = wrapperWidth - paddingAndBorderPx;
-  }
+  var imageWidth = state.guideRectWidth - imagePadding * 2;
+  var imageHeight = state.guideRectHeight - imagePadding * 2;
+  var centerRegionMinWidth = imageAspectRatio >= wrapperAspectRatio ? wrapperWidth - paddingAndBorderPx : undefined;
   return /*#__PURE__*/React__namespace.default.createElement(StyledPageContainer, {
     ref: wrapperRef,
     onClick: onClick,
@@ -8725,7 +8662,7 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
     "$minWidth": padding,
     className: regionClsx(classNames, 'Left')
   }), /*#__PURE__*/React__namespace.default.createElement(GuideCenterRegion, {
-    "$minWidth": imageWidth,
+    "$minWidth": centerRegionMinWidth,
     "$isMirrored": isMirrored,
     className: classNames.centerRegion
   }, /*#__PURE__*/React__namespace.default.createElement(GuideCenterBorder, {
@@ -8748,15 +8685,17 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
     className: classNames.image,
     "$isInvisible": !imageVisible,
     "$isMirrored": isMirrored,
-    width: state.guideRectWidth - imagePadding * 2,
-    height: state.guideRectHeight - imagePadding * 2
+    width: imageWidth,
+    height: imageHeight
   })), requestedAction === 'FLIP_ID' && ( /*#__PURE__*/React__namespace.default.createElement(FlipIdPrompt, {
     borderWidth: idCardBorderWidth,
     borderColor: idCardBorderColor,
     portraitGuidesOnMobile: portraitGuidesOnMobile,
     isMirrored: isMirrored,
     assets: assets.flipIdPrompt,
-    classNames: classNames.flipIdPrompt
+    classNames: classNames.flipIdPrompt,
+    width: imageWidth,
+    height: imageHeight
   }))))), /*#__PURE__*/React__namespace.default.createElement(Spacer, {
     "$maskColor": maskColor,
     "$minWidth": padding,
@@ -8776,7 +8715,7 @@ var regionClsx = function regionClsx(classNames, which) {
     return v;
   }).join(' ');
 };
-var StyledPageContainer = styled__default.default(PageContainerDiv)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  z-index: 1000;\n  overflow-y: hidden;\n"], ["\n  z-index: 1000;\n  overflow-y: hidden;\n"])));
+var StyledPageContainer = styled__default.default(PageContainerDiv)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  z-index: 1000;\n  overflow-y: hidden;\n"], ["\n  z-index: 1000;\n  overflow-y: hidden;\n"])));
 var GuidesContainer = styled__default.default.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100dvw;\n  height: 100dvh;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100dvw;\n  height: 100dvh;\n"])));
 var GuideCenterRow = styled__default.default.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n  min-height: 0;\n  flex: 1;\n"], ["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n  min-height: 0;\n  flex: 1;\n"])));
 var GuideRegion = styled__default.default.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  position: relative;\n  z-index: 1000;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  position: relative;\n  z-index: 1000;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"])), function (props) {
@@ -8804,7 +8743,7 @@ var GuideCenterBorder = styled__default.default.div(templateObject_7$4 || (templ
 });
 var GuideText = styled__default.default.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__default.default.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  position: relative;\n  margin: auto;\n"], ["\n  position: relative;\n  margin: auto;\n"])));
-var templateObject_1$q, templateObject_2$m, templateObject_3$i, templateObject_4$c, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$2, templateObject_9$1;
+var templateObject_1$s, templateObject_2$m, templateObject_3$i, templateObject_4$c, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$2, templateObject_9$1;
 
 var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
   var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
@@ -8947,11 +8886,11 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
     progress: progress
   }));
 };
-var CanvasWrapper$1 = styled__default.default.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n  z-index: -1;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n  z-index: -1;\n"])), function (props) {
+var CanvasWrapper$1 = styled__default.default.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n  z-index: -1;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n  z-index: -1;\n"])), function (props) {
   return props.$maskColor;
 });
 var Canvas$1 = styled__default.default.canvas(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-var templateObject_1$p, templateObject_2$l;
+var templateObject_1$r, templateObject_2$l;
 
 function IdCaptureGuides(_a) {
   var _b, _c;
@@ -9093,11 +9032,53 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
     onError: onError
   })));
 };
-var StyledSpinner = styled__default.default(Spinner)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"], ["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"])));
+var StyledSpinner = styled__default.default(Spinner)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"], ["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"])));
 var ImagePreviewWrapper = styled__default.default.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"], ["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"])));
 var ImagePreviewText = styled__default.default.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"], ["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"])));
 var ImagePreviewImageWrapper = styled__default.default.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"], ["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"])));
-var templateObject_1$o, templateObject_2$k, templateObject_3$h, templateObject_4$b;
+var templateObject_1$q, templateObject_2$k, templateObject_3$h, templateObject_4$b;
+
+var CameraVideoTag = function CameraVideoTag(_a) {
+  var _b;
+  var className = _a.className;
+  var _c = React.useContext(CameraStateContext),
+    videoRef = _c.videoRef,
+    setVideoLoaded = _c.setVideoLoaded,
+    onVideoUnmounted = _c.onVideoUnmounted,
+    cameraRef = _c.cameraRef;
+  React.useEffect(function notifyCameraProviderOfUnmount() {
+    var videoElement = videoRef.current;
+    if (!videoElement) return;
+    return function () {
+      onVideoUnmounted(videoElement);
+    };
+  }, [onVideoUnmounted, videoRef]);
+  React.useEffect(function setVideoLoadedToFalseOnMount() {
+    setVideoLoaded(false);
+  }, [setVideoLoaded]);
+  React.useEffect(function attachCameraStreamToVideoTagWhenReady() {
+    var _a;
+    if (videoRef.current && ((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.stream)) {
+      videoRef.current.srcObject = cameraRef.current.stream;
+    }
+  }, [cameraRef, videoRef]);
+  var onLoadedData = React.useCallback(function () {
+    setVideoLoaded(true);
+  }, [setVideoLoaded]);
+  return /*#__PURE__*/React__namespace.default.createElement(FullscreenVideoTag, {
+    className: className,
+    autoPlay: true,
+    playsInline: true,
+    muted: true,
+    ref: videoRef,
+    onLoadedData: onLoadedData,
+    "$isRearFacing": (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing
+  });
+};
+var FullscreenVideoTag = styled__default.default.video(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n  z-index: -2;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n  z-index: -2;\n"])), function (props) {
+  return props.$isRearFacing ? '' : 'scaleX(-1)';
+});
+var templateObject_1$p;
 
 var documentCaptureInitialState = {
   documents: [],
@@ -9453,11 +9434,16 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
     ref: canvasRef
   }));
 };
-var CanvasWrapper = styled__default.default.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n"], ["\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
+var CanvasWrapper = styled__default.default.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n"], ["\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
   return props.$maskColor;
 });
 var Canvas = styled__default.default.canvas(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-var templateObject_1$n, templateObject_2$j;
+var templateObject_1$o, templateObject_2$j;
+
+var CameraFeedWrapper = styled__default.default.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+  return props.$mode === 'snapToGuides' ? "display: flex;\n         position: absolute;\n         left: ".concat(props.$x, "px;\n         top: ").concat(props.$y, "px;\n         width: ").concat(props.$w, "px;\n         height: ").concat(props.$h, "px;") : "";
+});
+var templateObject_1$n;
 
 var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
   var _b, _c, _d, _e, _f, _g, _h;
@@ -9898,6 +9884,23 @@ var ImageCol = styled__default.default.div(templateObject_5$5 || (templateObject
 var StyledButtonsRow$8 = styled__default.default(ButtonsRow$1)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
 var templateObject_1$l, templateObject_2$h, templateObject_3$f, templateObject_4$9, templateObject_5$5, templateObject_6$4;
 
+function ScalingCameraFeed() {
+  var _a = React.useContext(IdCaptureStateContext),
+    captureState = _a.captureState,
+    guideRectX = _a.guideRectX,
+    guideRectY = _a.guideRectY,
+    guideRectWidth = _a.guideRectWidth,
+    guideRectHeight = _a.guideRectHeight;
+  if (captureState === 'complete') return null;
+  return /*#__PURE__*/React__namespace.default.createElement(CameraFeedWrapper, {
+    "$x": guideRectX,
+    "$y": guideRectY,
+    "$w": guideRectWidth,
+    "$h": guideRectHeight,
+    "$mode": 'snapToGuides'
+  }, /*#__PURE__*/React__namespace.default.createElement(CameraVideoTag, null));
+}
+
 var IdCaptureWizard = function IdCaptureWizard(_a) {
   var _b, _c, _d, _e, _f, _g;
   var _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
@@ -10121,12 +10124,6 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     })
   };
   var theme = styled.useTheme();
-  var _25 = useIdCaptureState()[0],
-    guideRectX = _25.guideRectX,
-    guideRectY = _25.guideRectY,
-    guideRectWidth = _25.guideRectWidth,
-    guideRectHeight = _25.guideRectHeight,
-    imageUrl = _25.imageUrl;
   var idCaptureAssets = assets[state.requestedDocumentType];
   var idCaptureVerbiage = idCaptureVerbiages[state.requestedDocumentType];
   React.useEffect(function () {
@@ -10180,9 +10177,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
       });
     });
   }, [dispatch]);
-  var _26 = React.useState(false),
-    progressStarted = _26[0],
-    setProgressStarted = _26[1];
+  var _25 = React.useState(false),
+    progressStarted = _25[0],
+    setProgressStarted = _25[1];
   React.useEffect(function () {
     if (state.captureState === 'capturing') {
       setProgressStarted(false);
@@ -10205,17 +10202,10 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     });
   }
   var requestedAction = state.captureState === 'requestingFlip' ? 'FLIP_ID' : state.requestedDocumentType === 'idCardBack' ? 'SHOW_ID_BACK' : state.requestedDocumentType === 'passport' ? 'SHOW_PASSPORT' : 'SHOW_ID_FRONT';
+  var guidesStatus = !overlayDismissed ? 'disabled' : state.isGoodFrame ? 'capturing' : 'ready';
   return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
     className: "flex ".concat((_b = classNames === null || classNames === void 0 ? void 0 : classNames.container) !== null && _b !== void 0 ? _b : '')
-  }, state.captureState !== 'complete' && ( /*#__PURE__*/React__namespace.default.createElement(CameraFeedWrapper, {
-    "$x": guideRectX,
-    "$y": guideRectY,
-    "$w": guideRectWidth,
-    "$h": guideRectHeight,
-    "$mode": guideType === 'fit' ? 'snapToGuides' : 'fullscreen'
-  }, /*#__PURE__*/React__namespace.default.createElement(CameraVideoTag, {
-    className: classNames === null || classNames === void 0 ? void 0 : classNames.cameraFeed
-  }))), overlayDismissed && state.captureState === 'capturing' && ( /*#__PURE__*/React__namespace.default.createElement(IdCapture, {
+  }, /*#__PURE__*/React__namespace.default.createElement(ScalingCameraFeed, null), overlayDismissed && state.captureState === 'capturing' && ( /*#__PURE__*/React__namespace.default.createElement(IdCapture, {
     requiredDocumentType: state.requestedDocumentType,
     thresholds: thresholds,
     onCapture: onCapture,
@@ -10227,7 +10217,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
   })), /*#__PURE__*/React__namespace.default.createElement(IdCaptureGuides, {
     key: "guides".concat(attempt),
     guideType: guideType,
-    status: state.isGoodFrame ? 'capturing' : 'ready',
+    status: guidesStatus,
     progress: progressStarted && state.captureState === 'capturing' ? 1 : 0,
     portraitGuidesOnMobile: portraitGuidesOnMobile,
     requestedAction: requestedAction,
@@ -10236,10 +10226,10 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     colors: colors,
     verbiage: idCaptureVerbiage,
     isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments
-  }), !((_d = (_c = theme.idCapture) === null || _c === void 0 ? void 0 : _c.capturePreview) === null || _d === void 0 ? void 0 : _d.disabled) && state.captureState === 'requestingFlip' && !separateIdCardCaptureSequence && imageUrl && ( /*#__PURE__*/React__namespace.default.createElement(IdCaptureImagePreview, {
+  }), !((_d = (_c = theme.idCapture) === null || _c === void 0 ? void 0 : _c.capturePreview) === null || _d === void 0 ? void 0 : _d.disabled) && state.captureState === 'requestingFlip' && !separateIdCardCaptureSequence && state.imageUrl && ( /*#__PURE__*/React__namespace.default.createElement(IdCaptureImagePreview, {
     classNames: (_e = classNames.capture) === null || _e === void 0 ? void 0 : _e.imagePreview,
     text: (_f = idCaptureVerbiages === null || idCaptureVerbiages === void 0 ? void 0 : idCaptureVerbiages.idCardFront) === null || _f === void 0 ? void 0 : _f.processingIdCardText,
-    imageUrl: imageUrl
+    imageUrl: state.imageUrl
   })), state.captureState !== 'complete' && ( /*#__PURE__*/React__namespace.default.createElement("div", {
     id: "idmission-above-guides-content"
   })), /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {