idmission-web-sdk 1.0.19 → 1.0.21

package/dist/sdk2.umd.development.js

@@ -3087,7 +3087,7 @@
     }();
     Browser.type = 'languageDetector';
 
-    var webSdkVersion = '1.0.19';
+    var webSdkVersion = '1.0.21';
 
     function getPlatform() {
       return window.platform;
@@ -3263,7 +3263,7 @@
       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 = __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 = __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;
     });
@@ -3300,13 +3300,13 @@
       }, 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 = __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 = __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 = __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 = __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 = __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 __assign = (undefined && undefined.__assign) || function () {
         __assign = Object.assign || function(t) {
@@ -3760,7 +3760,7 @@
         className: "ladda-label"
       }, children));
     };
-    var StyledButton = styled__default['default'].button(templateObject_1$9 || (templateObject_1$9 = __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 = __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) {
@@ -3779,7 +3779,7 @@
       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;
@@ -11927,7 +11927,7 @@
       return [frameWidth, frameHeight];
     }
 
-    var InvisibleCanvas = styled__default['default'].canvas(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+    var InvisibleCanvas = styled__default['default'].canvas(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
     function drawToCanvas(canvas, frame, width, height) {
       if (!canvas) return;
       var ctx = canvas.getContext('2d');
@@ -11949,7 +11949,7 @@
       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 '';
@@ -12473,7 +12473,7 @@
       }
     }
 
-    var DebugStatsPane = styled__default['default'].span(templateObject_1$7 || (templateObject_1$7 = __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 = __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 = __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);' : '';
@@ -12644,12 +12644,12 @@
         }
       });
     }
-    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 = __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 = __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 = __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 = __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) {
@@ -12674,7 +12674,7 @@
       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,
@@ -12701,10 +12701,10 @@
         alt: ""
       })));
     };
-    var ImagePreviewWrapper = styled__default['default'].div(templateObject_1$4 || (templateObject_1$4 = __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 = __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 = __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 = __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 = {};
 
@@ -12815,7 +12815,7 @@
       }, [fallbacks, i18n.language, t, verbiage]);
     }
 
-    var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$3 || (templateObject_1$3 = __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 = __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';
     });
@@ -12826,7 +12826,7 @@
       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,
@@ -13747,10 +13747,10 @@
         "$isRearFacing": (_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing
       });
     };
-    var FullscreenVideoTag = styled__default['default'].video(templateObject_1$2 || (templateObject_1$2 = __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 = __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;
@@ -16260,11 +16260,11 @@
       return signatureData;
     }
 
-    var SignatureCanvasContainer = styled__default['default'].div(templateObject_1$1 || (templateObject_1$1 = __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 = __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 = __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 = __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 = __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,
@@ -16573,7 +16573,7 @@
         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,
@@ -16592,8 +16592,8 @@
         finished: true
       }, verbiage.doneBtnText))));
     };
-    var StyledVideo = styled__default['default'].video(templateObject_1 || (templateObject_1 = __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 = __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,
@@ -18339,13 +18339,179 @@
       })));
     };
 
+    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(),
+        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: __assign$1(__assign$1({}, 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: __assign$1({
+          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: __assign$1({
+          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',
@@ -18365,43 +18531,113 @@
           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(),
-        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(),
+        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 () {
@@ -18424,14 +18660,51 @@
           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);
@@ -18445,6 +18718,10 @@
           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,
@@ -18455,7 +18732,12 @@
       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;
@@ -18476,9 +18758,48 @@
           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 = __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,
@@ -18497,6 +18818,9 @@
       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();
@@ -18542,6 +18866,10 @@
           });
         });
       }, [logCaptureMetadata, selfieImage, setSelfieImage]);
+      var onVideoCaptureComplete = React.useCallback(function (videoUrl) {
+        setVideoUrl(videoUrl);
+        setCaptureState('SUCCESS');
+      }, []);
       var onVideoCaptureFaceNotDetected = React.useCallback(function () {
         setCaptureState('CHECKING_LIVENESS');
       }, []);
@@ -18587,9 +18915,14 @@
               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;
         }