idmission-web-sdk 1.0.19 → 1.0.21

package/dist/sdk2.cjs.development.js

@@ -50,7 +50,7 @@ var tf__namespace = /*#__PURE__*/_interopNamespace(tf);
 var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.19';
+var webSdkVersion = '1.0.21';
 
 function getPlatform() {
   return window.platform;
@@ -226,7 +226,7 @@ function contentDispositionFromDataUrl(url) {
   return (_b = (_a = url.match(/^(data:.*;base64),/)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : '';
 }
 
-var PageContainerDiv = styled__default['default'].div(templateObject_1$b || (templateObject_1$b = tslib.__makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family:\n    Inter,\n    -apple-system,\n    BlinkMacSystemFont,\n    Segoe UI,\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    Fira Sans,\n    Droid Sans,\n    Helvetica Neue,\n    sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family:\n    Inter,\n    -apple-system,\n    BlinkMacSystemFont,\n    Segoe UI,\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    Fira Sans,\n    Droid Sans,\n    Helvetica Neue,\n    sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"])), function (_a) {
+var PageContainerDiv = styled__default['default'].div(templateObject_1$c || (templateObject_1$c = tslib.__makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family:\n    Inter,\n    -apple-system,\n    BlinkMacSystemFont,\n    Segoe UI,\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    Fira Sans,\n    Droid Sans,\n    Helvetica Neue,\n    sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family:\n    Inter,\n    -apple-system,\n    BlinkMacSystemFont,\n    Segoe UI,\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    Fira Sans,\n    Droid Sans,\n    Helvetica Neue,\n    sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"])), function (_a) {
   var $heightOffset = _a.$heightOffset;
   return $heightOffset !== null && $heightOffset !== void 0 ? $heightOffset : 0;
 });
@@ -263,13 +263,13 @@ var PageContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, dimensionsCalculated && children);
 });
 PageContainer.displayName = 'PageContainer';
-var templateObject_1$b;
+var templateObject_1$c;
 
-var OverlayContainer = styled__default['default'](PageContainer)(templateObject_1$a || (templateObject_1$a = tslib.__makeTemplateObject(["\n  background: white;\n  z-index: 10000;\n"], ["\n  background: white;\n  z-index: 10000;\n"])));
+var OverlayContainer = styled__default['default'](PageContainer)(templateObject_1$b || (templateObject_1$b = tslib.__makeTemplateObject(["\n  background: white;\n  z-index: 10000;\n"], ["\n  background: white;\n  z-index: 10000;\n"])));
 var OverlayInner = styled__default['default'].div(templateObject_2$4 || (templateObject_2$4 = tslib.__makeTemplateObject(["\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  padding: 25px;\n  max-height: var(--app-height);\n  height: 100%;\n  box-sizing: border-box;\n"], ["\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  padding: 25px;\n  max-height: var(--app-height);\n  height: 100%;\n  box-sizing: border-box;\n"])));
 var OverlayImageWrapper = styled__default['default'].div(templateObject_3$3 || (templateObject_3$3 = tslib.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img {\n    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 OverlayImageMultiContainer = styled__default['default'].div(templateObject_4$2 || (templateObject_4$2 = tslib.__makeTemplateObject(["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100vh - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"], ["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100vh - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"])));
-var templateObject_1$a, templateObject_2$4, templateObject_3$3, templateObject_4$2;
+var templateObject_1$b, templateObject_2$4, templateObject_3$3, templateObject_4$2;
 
 var LoaderButton = function LoaderButton(_a) {
   var children = _a.children,
@@ -320,7 +320,7 @@ var LoaderButton = function LoaderButton(_a) {
     className: "ladda-label"
   }, children));
 };
-var StyledButton = styled__default['default'].button(templateObject_1$9 || (templateObject_1$9 = tslib.__makeTemplateObject(["\n  border-radius: 0;\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  text-transform: none;\n  -webkit-appearance: button;\n\n  &:not(:disabled),\n  &[type='button']:not(:disabled),\n  &[type='reset']:not(:disabled),\n  &[type='submit']:not(:disabled) {\n    cursor: pointer;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: 0;\n  }\n\n  --bs-btn-padding-x: 0.75rem;\n  --bs-btn-padding-y: 0.375rem;\n  --bs-btn-font-family: ;\n  --bs-btn-font-size: 1rem;\n  --bs-btn-font-weight: 400;\n  --bs-btn-line-height: 1.5;\n  --bs-btn-color: var(--bs-body-color);\n  --bs-btn-bg: transparent;\n  --bs-btn-border-width: var(--bs-border-width);\n  --bs-btn-border-color: transparent;\n  --bs-btn-border-radius: var(--bs-border-radius);\n  --bs-btn-hover-border-color: transparent;\n  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),\n    0 1px 1px rgba(0, 0, 0, 0.075);\n  --bs-btn-disabled-opacity: 0.65;\n  --bs-btn-focus-box-shadow: 0 0 0 0.25rem\n    rgba(var(--bs-btn-focus-shadow-rgb), 0.5);\n  display: inline-block;\n  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);\n  font-family: var(--bs-btn-font-family);\n  font-size: var(--bs-btn-font-size);\n  font-weight: var(--bs-btn-font-weight);\n  line-height: var(--bs-btn-line-height);\n  color: var(--bs-btn-color);\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);\n  border-radius: var(--bs-btn-border-radius);\n  background-color: var(--bs-btn-bg);\n  transition:\n    color 0.15s ease-in-out,\n    background-color 0.15s ease-in-out,\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:hover {\n    filter: brightness(1.15);\n  }\n\n  &:focus-visible {\n    color: var(--bs-btn-hover-color);\n    background-color: var(--bs-btn-hover-bg);\n    border-color: var(--bs-btn-hover-border-color);\n    outline: 0;\n    box-shadow: var(--bs-btn-focus-box-shadow);\n  }\n\n  &:disabled,\n  &.disabled,\n  fieldset:disabled & {\n    color: var(--bs-btn-disabled-color);\n    pointer-events: none;\n    background-color: var(--bs-btn-disabled-bg);\n    border-color: var(--bs-btn-disabled-border-color);\n    opacity: var(--bs-btn-disabled-opacity);\n  }\n\n  --bs-btn-color: ", ";\n  --bs-btn-bg: ", ";\n  --bs-btn-border-color: ", ";\n  --bs-btn-focus-shadow-rgb: 49, 132, 253;\n  --bs-btn-active-color: #fff;\n  --bs-btn-active-bg: #0a58ca;\n  --bs-btn-active-border-color: #0a53be;\n  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n  --bs-btn-disabled-color: ", ";\n  --bs-btn-disabled-bg: ", ";\n  --bs-btn-disabled-border-color: ", ";\n\n  --bs-btn-padding-y: 14px;\n  --bs-btn-padding-x: 1rem;\n  --bs-btn-font-size: 18px;\n  --bs-btn-border-radius: 4px;\n"], ["\n  border-radius: 0;\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  text-transform: none;\n  -webkit-appearance: button;\n\n  &:not(:disabled),\n  &[type='button']:not(:disabled),\n  &[type='reset']:not(:disabled),\n  &[type='submit']:not(:disabled) {\n    cursor: pointer;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: 0;\n  }\n\n  --bs-btn-padding-x: 0.75rem;\n  --bs-btn-padding-y: 0.375rem;\n  --bs-btn-font-family: ;\n  --bs-btn-font-size: 1rem;\n  --bs-btn-font-weight: 400;\n  --bs-btn-line-height: 1.5;\n  --bs-btn-color: var(--bs-body-color);\n  --bs-btn-bg: transparent;\n  --bs-btn-border-width: var(--bs-border-width);\n  --bs-btn-border-color: transparent;\n  --bs-btn-border-radius: var(--bs-border-radius);\n  --bs-btn-hover-border-color: transparent;\n  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),\n    0 1px 1px rgba(0, 0, 0, 0.075);\n  --bs-btn-disabled-opacity: 0.65;\n  --bs-btn-focus-box-shadow: 0 0 0 0.25rem\n    rgba(var(--bs-btn-focus-shadow-rgb), 0.5);\n  display: inline-block;\n  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);\n  font-family: var(--bs-btn-font-family);\n  font-size: var(--bs-btn-font-size);\n  font-weight: var(--bs-btn-font-weight);\n  line-height: var(--bs-btn-line-height);\n  color: var(--bs-btn-color);\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);\n  border-radius: var(--bs-btn-border-radius);\n  background-color: var(--bs-btn-bg);\n  transition:\n    color 0.15s ease-in-out,\n    background-color 0.15s ease-in-out,\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:hover {\n    filter: brightness(1.15);\n  }\n\n  &:focus-visible {\n    color: var(--bs-btn-hover-color);\n    background-color: var(--bs-btn-hover-bg);\n    border-color: var(--bs-btn-hover-border-color);\n    outline: 0;\n    box-shadow: var(--bs-btn-focus-box-shadow);\n  }\n\n  &:disabled,\n  &.disabled,\n  fieldset:disabled & {\n    color: var(--bs-btn-disabled-color);\n    pointer-events: none;\n    background-color: var(--bs-btn-disabled-bg);\n    border-color: var(--bs-btn-disabled-border-color);\n    opacity: var(--bs-btn-disabled-opacity);\n  }\n\n  --bs-btn-color: ", ";\n  --bs-btn-bg: ", ";\n  --bs-btn-border-color: ", ";\n  --bs-btn-focus-shadow-rgb: 49, 132, 253;\n  --bs-btn-active-color: #fff;\n  --bs-btn-active-bg: #0a58ca;\n  --bs-btn-active-border-color: #0a53be;\n  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n  --bs-btn-disabled-color: ", ";\n  --bs-btn-disabled-bg: ", ";\n  --bs-btn-disabled-border-color: ", ";\n\n  --bs-btn-padding-y: 14px;\n  --bs-btn-padding-x: 1rem;\n  --bs-btn-font-size: 18px;\n  --bs-btn-border-radius: 4px;\n"])), function (_a) {
+var StyledButton = styled__default['default'].button(templateObject_1$a || (templateObject_1$a = tslib.__makeTemplateObject(["\n  border-radius: 0;\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  text-transform: none;\n  -webkit-appearance: button;\n\n  &:not(:disabled),\n  &[type='button']:not(:disabled),\n  &[type='reset']:not(:disabled),\n  &[type='submit']:not(:disabled) {\n    cursor: pointer;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: 0;\n  }\n\n  --bs-btn-padding-x: 0.75rem;\n  --bs-btn-padding-y: 0.375rem;\n  --bs-btn-font-family: ;\n  --bs-btn-font-size: 1rem;\n  --bs-btn-font-weight: 400;\n  --bs-btn-line-height: 1.5;\n  --bs-btn-color: var(--bs-body-color);\n  --bs-btn-bg: transparent;\n  --bs-btn-border-width: var(--bs-border-width);\n  --bs-btn-border-color: transparent;\n  --bs-btn-border-radius: var(--bs-border-radius);\n  --bs-btn-hover-border-color: transparent;\n  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),\n    0 1px 1px rgba(0, 0, 0, 0.075);\n  --bs-btn-disabled-opacity: 0.65;\n  --bs-btn-focus-box-shadow: 0 0 0 0.25rem\n    rgba(var(--bs-btn-focus-shadow-rgb), 0.5);\n  display: inline-block;\n  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);\n  font-family: var(--bs-btn-font-family);\n  font-size: var(--bs-btn-font-size);\n  font-weight: var(--bs-btn-font-weight);\n  line-height: var(--bs-btn-line-height);\n  color: var(--bs-btn-color);\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);\n  border-radius: var(--bs-btn-border-radius);\n  background-color: var(--bs-btn-bg);\n  transition:\n    color 0.15s ease-in-out,\n    background-color 0.15s ease-in-out,\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:hover {\n    filter: brightness(1.15);\n  }\n\n  &:focus-visible {\n    color: var(--bs-btn-hover-color);\n    background-color: var(--bs-btn-hover-bg);\n    border-color: var(--bs-btn-hover-border-color);\n    outline: 0;\n    box-shadow: var(--bs-btn-focus-box-shadow);\n  }\n\n  &:disabled,\n  &.disabled,\n  fieldset:disabled & {\n    color: var(--bs-btn-disabled-color);\n    pointer-events: none;\n    background-color: var(--bs-btn-disabled-bg);\n    border-color: var(--bs-btn-disabled-border-color);\n    opacity: var(--bs-btn-disabled-opacity);\n  }\n\n  --bs-btn-color: ", ";\n  --bs-btn-bg: ", ";\n  --bs-btn-border-color: ", ";\n  --bs-btn-focus-shadow-rgb: 49, 132, 253;\n  --bs-btn-active-color: #fff;\n  --bs-btn-active-bg: #0a58ca;\n  --bs-btn-active-border-color: #0a53be;\n  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n  --bs-btn-disabled-color: ", ";\n  --bs-btn-disabled-bg: ", ";\n  --bs-btn-disabled-border-color: ", ";\n\n  --bs-btn-padding-y: 14px;\n  --bs-btn-padding-x: 1rem;\n  --bs-btn-font-size: 18px;\n  --bs-btn-border-radius: 4px;\n"], ["\n  border-radius: 0;\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  text-transform: none;\n  -webkit-appearance: button;\n\n  &:not(:disabled),\n  &[type='button']:not(:disabled),\n  &[type='reset']:not(:disabled),\n  &[type='submit']:not(:disabled) {\n    cursor: pointer;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: 0;\n  }\n\n  --bs-btn-padding-x: 0.75rem;\n  --bs-btn-padding-y: 0.375rem;\n  --bs-btn-font-family: ;\n  --bs-btn-font-size: 1rem;\n  --bs-btn-font-weight: 400;\n  --bs-btn-line-height: 1.5;\n  --bs-btn-color: var(--bs-body-color);\n  --bs-btn-bg: transparent;\n  --bs-btn-border-width: var(--bs-border-width);\n  --bs-btn-border-color: transparent;\n  --bs-btn-border-radius: var(--bs-border-radius);\n  --bs-btn-hover-border-color: transparent;\n  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),\n    0 1px 1px rgba(0, 0, 0, 0.075);\n  --bs-btn-disabled-opacity: 0.65;\n  --bs-btn-focus-box-shadow: 0 0 0 0.25rem\n    rgba(var(--bs-btn-focus-shadow-rgb), 0.5);\n  display: inline-block;\n  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);\n  font-family: var(--bs-btn-font-family);\n  font-size: var(--bs-btn-font-size);\n  font-weight: var(--bs-btn-font-weight);\n  line-height: var(--bs-btn-line-height);\n  color: var(--bs-btn-color);\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);\n  border-radius: var(--bs-btn-border-radius);\n  background-color: var(--bs-btn-bg);\n  transition:\n    color 0.15s ease-in-out,\n    background-color 0.15s ease-in-out,\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:hover {\n    filter: brightness(1.15);\n  }\n\n  &:focus-visible {\n    color: var(--bs-btn-hover-color);\n    background-color: var(--bs-btn-hover-bg);\n    border-color: var(--bs-btn-hover-border-color);\n    outline: 0;\n    box-shadow: var(--bs-btn-focus-box-shadow);\n  }\n\n  &:disabled,\n  &.disabled,\n  fieldset:disabled & {\n    color: var(--bs-btn-disabled-color);\n    pointer-events: none;\n    background-color: var(--bs-btn-disabled-bg);\n    border-color: var(--bs-btn-disabled-border-color);\n    opacity: var(--bs-btn-disabled-opacity);\n  }\n\n  --bs-btn-color: ", ";\n  --bs-btn-bg: ", ";\n  --bs-btn-border-color: ", ";\n  --bs-btn-focus-shadow-rgb: 49, 132, 253;\n  --bs-btn-active-color: #fff;\n  --bs-btn-active-bg: #0a58ca;\n  --bs-btn-active-border-color: #0a53be;\n  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n  --bs-btn-disabled-color: ", ";\n  --bs-btn-disabled-bg: ", ";\n  --bs-btn-disabled-border-color: ", ";\n\n  --bs-btn-padding-y: 14px;\n  --bs-btn-padding-x: 1rem;\n  --bs-btn-font-size: 18px;\n  --bs-btn-border-radius: 4px;\n"])), function (_a) {
   var $textColor = _a.$textColor;
   return $textColor !== null && $textColor !== void 0 ? $textColor : '#fff';
 }, function (_a) {
@@ -339,7 +339,7 @@ var StyledButton = styled__default['default'].button(templateObject_1$9 || (temp
   var $disabledBackgroundColor = _a.$disabledBackgroundColor;
   return $disabledBackgroundColor !== null && $disabledBackgroundColor !== void 0 ? $disabledBackgroundColor : '#0d6efd';
 });
-var templateObject_1$9;
+var templateObject_1$a;
 
 var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
   var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -8300,7 +8300,7 @@ function getFrameDimensions(frame) {
   return [frameWidth, frameHeight];
 }
 
-var InvisibleCanvas = styled__default['default'].canvas(templateObject_1$8 || (templateObject_1$8 = tslib.__makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+var InvisibleCanvas = styled__default['default'].canvas(templateObject_1$9 || (templateObject_1$9 = tslib.__makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
 function drawToCanvas(canvas, frame, width, height) {
   if (!canvas) return;
   var ctx = canvas.getContext('2d');
@@ -8322,7 +8322,7 @@ function clearCanvas(canvas) {
   if (!ctx) return;
   ctx.clearRect(0, 0, canvas.width, canvas.height);
 }
-var templateObject_1$8;
+var templateObject_1$9;
 
 function cropToShoulders(rawCanvas, cropCanvas, frame, face) {
   if (!rawCanvas || !cropCanvas) return '';
@@ -8846,7 +8846,7 @@ function disposeTfBackend() {
   }
 }
 
-var DebugStatsPane = styled__default['default'].span(templateObject_1$7 || (templateObject_1$7 = tslib.__makeTemplateObject(["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n"], ["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n"])));
+var DebugStatsPane = styled__default['default'].span(templateObject_1$8 || (templateObject_1$8 = tslib.__makeTemplateObject(["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n"], ["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n"])));
 var ObjectDetectionDebugOverlay = styled__default['default'].div(templateObject_2$3 || (templateObject_2$3 = tslib.__makeTemplateObject(["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"], ["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), function (_a) {
   var $flipX = _a.$flipX;
   return $flipX ? 'transform: scaleX(-1);' : '';
@@ -9017,12 +9017,12 @@ function SelfieCaptureFaceKeypoint(_a) {
     }
   });
 }
-var templateObject_1$7, templateObject_2$3, templateObject_3$2, templateObject_4$1;
+var templateObject_1$8, templateObject_2$3, templateObject_3$2, templateObject_4$1;
 
-var ExitCaptureButton = styled__default['default'].button(templateObject_1$6 || (templateObject_1$6 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n\n  &:hover {\n    background: #ddd;\n  }\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n\n  &:hover {\n    background: #ddd;\n  }\n"])));
-var templateObject_1$6;
+var ExitCaptureButton = styled__default['default'].button(templateObject_1$7 || (templateObject_1$7 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n\n  &:hover {\n    background: #ddd;\n  }\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n\n  &:hover {\n    background: #ddd;\n  }\n"])));
+var templateObject_1$7;
 
-var Spinner = styled__default['default'].div(templateObject_1$5 || (templateObject_1$5 = tslib.__makeTemplateObject(["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (_a) {
+var Spinner = styled__default['default'].div(templateObject_1$6 || (templateObject_1$6 = tslib.__makeTemplateObject(["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (_a) {
   var $size = _a.$size;
   return $size !== null && $size !== void 0 ? $size : 80;
 }, function (_a) {
@@ -9047,7 +9047,7 @@ var Spinner = styled__default['default'].div(templateObject_1$5 || (templateObje
   var $color = _a.$color;
   return $color !== null && $color !== void 0 ? $color : '#888';
 });
-var templateObject_1$5;
+var templateObject_1$6;
 
 var IdCaptureImagePreview = function IdCaptureImagePreview(_a) {
   var text = _a.text,
@@ -9074,10 +9074,10 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
     alt: ""
   })));
 };
-var ImagePreviewWrapper = styled__default['default'].div(templateObject_1$4 || (templateObject_1$4 = tslib.__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 ImagePreviewWrapper = styled__default['default'].div(templateObject_1$5 || (templateObject_1$5 = tslib.__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_2$2 || (templateObject_2$2 = tslib.__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_3$1 || (templateObject_3$1 = tslib.__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$4, templateObject_2$2, templateObject_3$1;
+var templateObject_1$5, templateObject_2$2, templateObject_3$1;
 
 var enTranslation = {};
 
@@ -9188,7 +9188,7 @@ function useTranslations(verbiage, fallbacks) {
   }, [fallbacks, i18n.language, t, verbiage]);
 }
 
-var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$3 || (templateObject_1$3 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
+var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$4 || (templateObject_1$4 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
   var $top = _a.$top;
   return $top !== null && $top !== void 0 ? $top : '10vh';
 });
@@ -9199,7 +9199,7 @@ var GuidanceMessage = styled__default['default'].div(templateObject_2$1 || (temp
   var $textColor = _a.$textColor;
   return $textColor !== null && $textColor !== void 0 ? $textColor : 'black';
 });
-var templateObject_1$3, templateObject_2$1;
+var templateObject_1$4, templateObject_2$1;
 
 var initialState$5 = {
   videoWidth: 0,
@@ -10120,10 +10120,10 @@ var CameraVideoTag = function CameraVideoTag() {
     "$isRearFacing": (_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing
   });
 };
-var FullscreenVideoTag = styled__default['default'].video(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
+var FullscreenVideoTag = styled__default['default'].video(templateObject_1$3 || (templateObject_1$3 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
   return props.$isRearFacing ? '' : 'scaleX(-1)';
 });
-var templateObject_1$2;
+var templateObject_1$3;
 
 function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
   var _this = this;
@@ -12011,11 +12011,11 @@ function signatureDataToIdmissionFormat(signatureCanvas) {
   return signatureData;
 }
 
-var SignatureCanvasContainer = styled__default['default'].div(templateObject_1$1 || (templateObject_1$1 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"], ["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"])));
+var SignatureCanvasContainer = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"], ["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"])));
 var SignaturePad = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  position: relative;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 16px;\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"], ["\n  position: relative;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 16px;\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"])));
 var SignatureButtonsContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  flex-grow: 0;\n  padding-top: 12px;\n  display: flex;\n  z-index: 1000;\n  position: relative;\n"], ["\n  flex-grow: 0;\n  padding-top: 12px;\n  display: flex;\n  z-index: 1000;\n  position: relative;\n"])));
 var SignaturePaperBacking = styled__default['default'].div(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: #e5e5f7;\n  opacity: 0.8;\n  background-image: radial-gradient(#444cf7 0.5px, transparent 0.5px),\n    radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);\n  background-size: 20px 20px;\n  background-position: 0 0, 10px 10px;\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: #e5e5f7;\n  opacity: 0.8;\n  background-image: radial-gradient(#444cf7 0.5px, transparent 0.5px),\n    radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);\n  background-size: 20px 20px;\n  background-position: 0 0, 10px 10px;\n"])));
-var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1$2, templateObject_2, templateObject_3, templateObject_4;
 
 var SignatureCapture = function SignatureCapture(_a) {
   var onAccept = _a.onAccept,
@@ -12324,7 +12324,7 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
     retryBtnText: 'Retry',
     doneBtnText: 'Done'
   });
-  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("h1", null, verbiage.headingText), /*#__PURE__*/React__default['default'].createElement(OverlayImageWrapper, null, /*#__PURE__*/React__default['default'].createElement(StyledVideo, {
+  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("h1", null, verbiage.headingText), /*#__PURE__*/React__default['default'].createElement(OverlayImageWrapper, null, /*#__PURE__*/React__default['default'].createElement(StyledVideo$1, {
     src: videoUrl,
     poster: videoUrl + '#t=0.1',
     controls: true,
@@ -12343,8 +12343,8 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
     finished: true
   }, verbiage.doneBtnText))));
 };
-var StyledVideo = styled__default['default'].video(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 100%;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 100%;\n"])));
-var templateObject_1;
+var StyledVideo$1 = styled__default['default'].video(templateObject_1$1 || (templateObject_1$1 = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 100%;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 100%;\n"])));
+var templateObject_1$1;
 
 var VideoSignatureWizard = function VideoSignatureWizard(_a) {
   var onComplete = _a.onComplete,
@@ -14090,13 +14090,179 @@ var SignatureKYC = function SignatureKYC(_a) {
   })));
 };
 
+var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
+  var _b;
+  var _c = _a.style,
+    style = _c === void 0 ? {} : _c,
+    _d = _a.assets,
+    assets = _d === void 0 ? {} : _d,
+    _e = _a.verbiage,
+    verbiage = _e === void 0 ? {} : _e;
+  var _f = useResizeObserver__default['default'](),
+    ref = _f.ref,
+    _g = _f.width,
+    width = _g === void 0 ? 1 : _g,
+    _h = _f.height,
+    height = _h === void 0 ? 1 : _h;
+  var cameraRef = React.useContext(CameraStateContext).cameraRef;
+  assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
+  assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
+  var instructionText = useVerbiage(verbiage.instructionText, 'Please flip your ID card...');
+  var padding = 0;
+  var borderWidth = 4;
+  var borderColor = 'white';
+  var isMirrored = !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing);
+  var imageStyle = {
+    height: height - padding * 2 - borderWidth * 2
+  };
+  imageStyle = {
+    width: width - padding * 2 - borderWidth * 2
+  };
+  var _j = React.useState(1),
+    transitionTime = _j[0],
+    setTransitionTime = _j[1];
+  var _k = React.useState(0),
+    rotationAngle = _k[0],
+    setRotationAngle = _k[1];
+  var frontTransforms = ["rotateY(".concat(rotationAngle, "deg)")];
+  if (isMirrored) frontTransforms.push('scaleX(-1)');
+  var backTransforms = ["rotateY(".concat(180 - rotationAngle, "deg)")];
+  if (isMirrored) backTransforms.push('scaleX(-1)');
+  React.useEffect(function () {
+    var doFlip = function doFlip() {
+      setTransitionTime(1);
+      setRotationAngle(180);
+      setTimeout(function () {
+        setTransitionTime(0);
+        setRotationAngle(0);
+      }, 1500);
+    };
+    setTimeout(doFlip, 250);
+    var interval = setInterval(doFlip, 2500);
+    return function () {
+      clearInterval(interval);
+    };
+  }, []);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    ref: ref,
+    style: tslib.__assign(tslib.__assign({}, style), {
+      position: 'relative'
+    })
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      display: 'flex',
+      flexFlow: 'column nowrap',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      flexGrow: 1,
+      textAlign: 'center',
+      color: 'white',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'end'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    style: {
+      alignContent: 'center',
+      marginTop: 12,
+      marginBottom: 12
+    }
+  }, instructionText)), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      position: 'relative',
+      display: 'flex',
+      flexFlow: 'row nowrap',
+      alignItems: 'center',
+      justifyItems: 'center',
+      maxWidth: "calc(100%)",
+      maxHeight: "calc(100% - ".concat(padding * 2, "px - ").concat(borderWidth * 2, "px)")
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      minWidth: padding,
+      flexGrow: 1
+    }
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      maxWidth: "calc(100% - ".concat(padding * 2, "px - ").concat(borderWidth * 2, "px)"),
+      maxHeight: height - padding * 2 - borderWidth * 2
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      position: 'relative',
+      border: "".concat(borderWidth, "px solid ").concat(borderColor)
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("img", {
+    src: assets.frontImageUrl,
+    alt: "",
+    style: tslib.__assign({
+      backfaceVisibility: 'hidden',
+      transition: "transform ".concat(transitionTime, "s"),
+      transform: frontTransforms.join(' '),
+      transformStyle: 'preserve-3d',
+      position: 'relative',
+      top: 0,
+      left: 0,
+      display: 'block'
+    }, imageStyle)
+  }), /*#__PURE__*/React__default['default'].createElement("img", {
+    src: assets.backImageUrl,
+    alt: "",
+    style: tslib.__assign({
+      backfaceVisibility: 'hidden',
+      transition: "transform ".concat(transitionTime, "s"),
+      transform: backTransforms.join(' '),
+      transformStyle: 'preserve-3d',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      display: 'block'
+    }, imageStyle)
+  }))), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      minWidth: padding,
+      flexGrow: 1
+    }
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      flexGrow: 1,
+      textAlign: 'center',
+      color: 'white',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'end'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    style: {
+      alignContent: 'center',
+      marginTop: 12,
+      marginBottom: 12,
+      opacity: 0
+    }
+  }, instructionText))));
+};
+
 var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
-  var _b = _a.borderWidth,
+  var instructionText = _a.instructionText,
+    _b = _a.borderWidth,
     borderWidth = _b === void 0 ? 3 : _b,
     _c = _a.borderColor,
     borderColor = _c === void 0 ? 'white' : _c,
     _d = _a.guideImageUrl,
-    guideImageUrl = _d === void 0 ? "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg") : _d;
+    guideImageUrl = _d === void 0 ? "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg") : _d,
+    _e = _a.flipping,
+    flipping = _e === void 0 ? false : _e;
+  var idGuideWidth = window.innerWidth > window.innerHeight ? '30%' : '75%';
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       position: 'absolute',
@@ -14116,43 +14282,113 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
       height: '100%',
       margin: '4% auto auto'
     }
-  }), /*#__PURE__*/React__default['default'].createElement("img", {
-    src: guideImageUrl,
+  }), flipping ? /*#__PURE__*/React__default['default'].createElement(IdVideoCaptureFlipIdPrompt, {
     style: {
-      width: '30%',
+      width: idGuideWidth,
       margin: '2% auto 2%'
     }
-  })));
+  }) : /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      width: idGuideWidth,
+      margin: '2% auto 2%',
+      display: 'flex',
+      flexFlow: 'column nowrap'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      flexGrow: 1,
+      textAlign: 'center',
+      color: 'white',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'end'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    style: {
+      alignContent: 'center',
+      marginTop: 12,
+      marginBottom: 12
+    }
+  }, instructionText)), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      border: "4px solid ".concat(borderColor)
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("img", {
+    src: guideImageUrl,
+    alt: "",
+    style: {
+      width: '100%'
+    }
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      flexGrow: 1,
+      textAlign: 'center',
+      color: 'white',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'end'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    style: {
+      alignContent: 'center',
+      marginTop: 12,
+      marginBottom: 12,
+      opacity: 0
+    }
+  }, instructionText)))));
 };
 
 var IdVideoCapture = function IdVideoCapture(_a) {
   var _b, _c, _d, _e, _f, _g;
-  var onFaceNotDetected = _a.onFaceNotDetected,
-    _h = _a.debugMode,
-    debugMode = _h === void 0 ? false : _h;
-  var _j = useResizeObserver__default['default'](),
-    ref = _j.ref,
-    _k = _j.width,
-    width = _k === void 0 ? 1 : _k,
-    _l = _j.height,
-    height = _l === void 0 ? 1 : _l;
-  var _m = React.useContext(CameraStateContext),
-    cameraRef = _m.cameraRef,
-    videoRef = _m.videoRef,
-    videoLoaded = _m.videoLoaded,
-    cameraReady = _m.cameraReady;
-  var _o = React.useState([]),
-    detectedObjects = _o[0],
-    setDetectedObjects = _o[1];
-  var _p = React.useState([]),
-    faces = _p[0],
-    setFaces = _p[1];
-  var _q = React.useContext(IdCaptureModelsContext),
-    idModelsReady = _q.ready,
-    idModelsWorking = _q.working,
-    makeIdPrediction = _q.makePrediction,
-    onIdPredictionMade = _q.onPredictionMade;
+  var onComplete = _a.onComplete,
+    onFaceNotDetected = _a.onFaceNotDetected,
+    _h = _a.idDetectionThreshold,
+    idDetectionThreshold = _h === void 0 ? 0.6 : _h,
+    _j = _a.idFocusThreshold,
+    idFocusThreshold = _j === void 0 ? 0.25 : _j,
+    _k = _a.goodFramesThreshold,
+    goodFramesThreshold = _k === void 0 ? 3 : _k,
+    _l = _a.verbiage,
+    rawVerbiage = _l === void 0 ? {} : _l,
+    _m = _a.debugMode,
+    debugMode = _m === void 0 ? false : _m;
+  var _o = useResizeObserver__default['default'](),
+    ref = _o.ref,
+    _p = _o.width,
+    width = _p === void 0 ? 1 : _p,
+    _q = _o.height,
+    height = _q === void 0 ? 1 : _q;
+  var _r = React.useContext(CameraStateContext),
+    cameraRef = _r.cameraRef,
+    videoRef = _r.videoRef,
+    videoLoaded = _r.videoLoaded,
+    cameraReady = _r.cameraReady;
+  var _s = React.useState([]),
+    detectedObjects = _s[0],
+    setDetectedObjects = _s[1];
+  var _t = React.useState([]),
+    faces = _t[0],
+    setFaces = _t[1];
+  var _u = React.useContext(IdCaptureModelsContext),
+    idModelsReady = _u.ready,
+    idModelsWorking = _u.working,
+    makeIdPrediction = _u.makePrediction,
+    onIdPredictionMade = _u.onPredictionMade,
+    setThresholds = _u.setThresholds;
   var onSelfiePredictionMade = React.useContext(HighPerformanceSelfieGuidanceModelsContext).onPredictionMade;
+  var _v = useVideoRecorder(cameraRef.current),
+    isRecording = _v.isRecording,
+    startRecording = _v.startRecording,
+    stopRecording = _v.stopRecording,
+    videoUrl = _v.videoUrl;
+  React.useEffect(function () {
+    if (!isRecording && !videoUrl) startRecording();
+    if (videoUrl) onComplete === null || onComplete === void 0 ? void 0 : onComplete(videoUrl);
+  }, [isRecording, onComplete, startRecording, videoUrl]);
   var animationFrame = React.useRef(0);
   var shouldCaptureFrames = React.useRef(false);
   React.useEffect(function () {
@@ -14175,14 +14411,51 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       cancelAnimationFrame(animationFrame.current);
     };
   }, [cameraReady, idModelsReady, idModelsWorking, makeIdPrediction, videoLoaded, videoRef]);
+  React.useEffect(function () {
+    setThresholds({
+      document: idDetectionThreshold,
+      passport: 1,
+      focus: idFocusThreshold
+    });
+  }, [idDetectionThreshold, idFocusThreshold, setThresholds]);
+  var _w = React.useState(DocumentType.ID_CARD_FRONT),
+    requestedDocumentType = _w[0],
+    setRequestedDocumentType = _w[1];
+  var _x = React.useState(false),
+    flippingIdCard = _x[0],
+    setFlippingIdCard = _x[1];
+  var _y = React.useState(0),
+    goodFramesCount = _y[0],
+    setGoodFramesCount = _y[1];
+  var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
   React.useEffect(function () {
     onIdPredictionMade(function (prediction) {
       setDetectedObjects(prediction.detectedObjects);
+      if (prediction.detectionThresholdMet && prediction.focusThresholdMet) {
+        setGoodFramesCount(function (n) {
+          return n + 1;
+        });
+      } else {
+        setGoodFramesCount(0);
+      }
     });
-  }, [onIdPredictionMade]);
-  var _r = React.useState(0),
-    numFramesWithoutFaces = _r[0],
-    setNumFramesWithoutFaces = _r[1];
+  }, [idDetectionThreshold, onIdPredictionMade]);
+  React.useEffect(function () {
+    if (goodFramesThresholdMet) {
+      if (requestedDocumentType == DocumentType.ID_CARD_FRONT) {
+        setFlippingIdCard(true);
+        setTimeout(function () {
+          setFlippingIdCard(false);
+          setRequestedDocumentType(DocumentType.ID_CARD_BACK);
+        }, 3500);
+      } else {
+        stopRecording();
+      }
+    }
+  }, [goodFramesThresholdMet, onComplete, requestedDocumentType, stopRecording]);
+  var _z = React.useState(0),
+    numFramesWithoutFaces = _z[0],
+    setNumFramesWithoutFaces = _z[1];
   React.useEffect(function () {
     onSelfiePredictionMade(function (faces) {
       setFaces(faces);
@@ -14196,6 +14469,10 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       onFaceNotDetected === null || onFaceNotDetected === void 0 ? void 0 : onFaceNotDetected();
     }
   }, [numFramesWithoutFaces, onFaceNotDetected]);
+  var verbiage = useTranslations(rawVerbiage, {
+    idFrontInstructionText: 'Display the front of your ID card...',
+    idBackInstructionText: 'Display the back of your ID card...'
+  });
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
     pageWidth: width,
@@ -14206,7 +14483,12 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     ref: ref,
     className: "flex"
-  }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), /*#__PURE__*/React__default['default'].createElement(IdVideoCaptureGuides, null), debugMode && detectedObjects.length > 0 && /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlay, {
+  }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), /*#__PURE__*/React__default['default'].createElement(IdVideoCaptureGuides, {
+    instructionText: requestedDocumentType === DocumentType.ID_CARD_FRONT ? verbiage.idFrontInstructionText : verbiage.idBackInstructionText,
+    guideImageUrl: "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-").concat(requestedDocumentType === DocumentType.ID_CARD_FRONT ? 'Front' : 'Back', "-SVG-Landscape-2.svg"),
+    borderColor: goodFramesCount > 0 ? 'green' : 'white',
+    flipping: flippingIdCard
+  }), debugMode && detectedObjects.length > 0 && /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlay, {
     "$flipX": !((_f = cameraRef.current) === null || _f === void 0 ? void 0 : _f.isRearFacing)
   }, detectedObjects.map(function (obj, i) {
     var _a;
@@ -14227,9 +14509,48 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       scaling: debugScalingDetails,
       flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
     });
-  })));
+  })), debugMode && /*#__PURE__*/React__default['default'].createElement(DebugStatsPane, null, cameraRef.current ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")") : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold));
 };
 
+var IdVideoCaptureSuccess = function IdVideoCaptureSuccess(_a) {
+  var _b, _c;
+  var videoUrl = _a.videoUrl,
+    onDoneClick = _a.onDoneClick,
+    onRetryClick = _a.onRetryClick,
+    _d = _a.colors,
+    colors = _d === void 0 ? {} : _d,
+    _e = _a.verbiage,
+    rawVerbiage = _e === void 0 ? {} : _e;
+  colors.retryBtn || (colors.retryBtn = {});
+  (_b = colors.retryBtn).backgroundColor || (_b.backgroundColor = '#ea8557');
+  (_c = colors.retryBtn).textColor || (_c.textColor = 'white');
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: 'Video ID has been successfully captured!',
+    retryBtnText: 'Retry',
+    doneBtnText: 'Done'
+  });
+  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("h1", null, verbiage.headingText), /*#__PURE__*/React__default['default'].createElement(OverlayImageWrapper, null, /*#__PURE__*/React__default['default'].createElement(StyledVideo, {
+    src: videoUrl,
+    poster: videoUrl + '#t=0.1',
+    controls: true,
+    preload: "metadata",
+    autoPlay: true
+  })), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
+    onClick: onRetryClick,
+    colors: colors.retryBtn,
+    finished: true
+  }, verbiage.retryBtnText), /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
+    onClick: onDoneClick,
+    colors: colors.doneBtn,
+    style: {
+      marginLeft: 15
+    },
+    finished: true
+  }, verbiage.doneBtnText))));
+};
+var StyledVideo = styled__default['default'].video(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 100%;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 100%;\n"])));
+var templateObject_1;
+
 var VideoIdWizard = function VideoIdWizard(_a) {
   var _b = _a.idCaptureProps,
     idCaptureProps = _b === void 0 ? {} : _b,
@@ -14248,6 +14569,9 @@ var VideoIdWizard = function VideoIdWizard(_a) {
   var _h = React.useState('CAPTURING_ID'),
     captureState = _h[0],
     setCaptureState = _h[1];
+  var _j = React.useState(null),
+    videoUrl = _j[0],
+    setVideoUrl = _j[1];
   var operationStartedAt = React.useRef();
   var captureStartedAt = React.useRef();
   var captureEndedAt = React.useRef();
@@ -14293,6 +14617,10 @@ var VideoIdWizard = function VideoIdWizard(_a) {
       });
     });
   }, [logCaptureMetadata, selfieImage, setSelfieImage]);
+  var onVideoCaptureComplete = React.useCallback(function (videoUrl) {
+    setVideoUrl(videoUrl);
+    setCaptureState('SUCCESS');
+  }, []);
   var onVideoCaptureFaceNotDetected = React.useCallback(function () {
     setCaptureState('CHECKING_LIVENESS');
   }, []);
@@ -14338,9 +14666,14 @@ var VideoIdWizard = function VideoIdWizard(_a) {
           focusModelUrl: (_h = (_g = idCaptureProps.assets) === null || _g === void 0 ? void 0 : _g.focusModelUrl) !== null && _h !== void 0 ? _h : '',
           logPredictions: debugMode
         }, /*#__PURE__*/React__default['default'].createElement(HighPerformanceSelfieGuidanceModelsProvider, null, /*#__PURE__*/React__default['default'].createElement(IdVideoCapture, {
+          onComplete: onVideoCaptureComplete,
           onFaceNotDetected: onVideoCaptureFaceNotDetected,
           debugMode: debugMode
         }))));
+      case 'SUCCESS':
+        return /*#__PURE__*/React__default['default'].createElement(IdVideoCaptureSuccess, {
+          videoUrl: videoUrl !== null && videoUrl !== void 0 ? videoUrl : ''
+        });
       default:
         return null;
     }