idmission-web-sdk 2.1.37 → 2.1.39

package/dist/sdk2.umd.development.js

@@ -215,7 +215,7 @@
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  var webSdkVersion = '2.1.37';
+  var webSdkVersion = '2.1.39';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -372,7 +372,7 @@
     });
   }
 
-  var PageContainerDiv = styled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"], ["\n  ", "\n\n  ", "\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"])), function (props) {
+  var PageContainerDiv = styled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"], ["\n  ", "\n\n  ", "\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"])), function (props) {
     var _a;
     return props.theme.isFullscreen === false ? "" : "\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: var(--app-width);\n    height: calc(\n      var(--app-height) - ".concat((_a = props.$heightOffset) !== null && _a !== void 0 ? _a : 0, "px\n    );\n    overflow-x: hidden;\n    overflow-y: auto;\n  ");
   }, function (props) {
@@ -412,22 +412,22 @@
     }, dimensionsCalculated && children);
   });
   PageContainer.displayName = 'PageContainer';
-  var templateObject_1$J;
+  var templateObject_1$H;
 
-  var OverlayContainer = styled(PageContainer)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  background: ", ";\n  ", "\n  z-index: 10000;\n"], ["\n  background: ", ";\n  ", "\n  z-index: 10000;\n"])), function (props) {
+  var OverlayContainer = styled(PageContainer)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  background: ", ";\n  ", "\n  z-index: 10000;\n"], ["\n  background: ", ";\n  ", "\n  z-index: 10000;\n"])), function (props) {
     return props.theme.background ? "".concat(props.theme.background) : "white";
   }, function (props) {
     return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
   });
-  var OverlayInner$2 = styled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  max-height: var(--app-height);\n  height: 100%;\n  ", "\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  max-height: var(--app-height);\n  height: 100%;\n  ", "\n"])), function (props) {
+  var OverlayInner$2 = styled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  max-height: var(--app-height);\n  height: 100%;\n  ", "\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  max-height: var(--app-height);\n  height: 100%;\n  ", "\n"])), function (props) {
     var _a;
     return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
   }, function (props) {
     return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
   });
-  var OverlayImageContainer = styled.div(templateObject_3$p || (templateObject_3$p = __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  & > svg {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img,\n  & > svg {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"])));
-  var OverlayImageRow = styled.div(templateObject_4$i || (templateObject_4$i = __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$I, templateObject_2$v, templateObject_3$p, templateObject_4$i;
+  var OverlayImageContainer = styled.div(templateObject_3$m || (templateObject_3$m = __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  & > svg {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img,\n  & > svg {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"])));
+  var OverlayImageRow = styled.div(templateObject_4$h || (templateObject_4$h = __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$G, templateObject_2$s, templateObject_3$m, templateObject_4$h;
 
   function _extends() {
     return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -794,11 +794,11 @@
       className: "ladda-label"
     }, children));
   };
-  var StyledButton = styled.button(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  ", "\n\n  /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n  @keyframes ladda-spinner-line-fade {\n    0%,\n    100% {\n      opacity: 0.22;\n    }\n    1% {\n      opacity: 1;\n    }\n  }\n\n  position: relative;\n\n  .ladda-spinner {\n    position: absolute;\n    z-index: 2;\n    display: inline-block;\n    width: 32px;\n    top: 50%;\n    margin-top: 0;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .ladda-label {\n    position: relative;\n    z-index: 3;\n  }\n  .ladda-progress {\n    position: absolute;\n    width: 0;\n    height: 100%;\n    left: 0;\n    top: 0;\n    background: rgba(0, 0, 0, 0.2);\n    display: none;\n    transition: 0.1s linear all !important;\n  }\n  &[data-loading] .ladda-progress {\n    display: block;\n  }\n\n  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n  .ladda-spinner,\n  .ladda-label {\n    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n  }\n  &[data-style='zoom-in'],\n  &[data-style='zoom-in'] .ladda-spinner,\n  &[data-style='zoom-in'] .ladda-label,\n  &[data-style='zoom-out'],\n  &[data-style='zoom-out'] .ladda-spinner,\n  &[data-style='zoom-out'] .ladda-label {\n    transition: 0.3s ease all !important;\n  }\n  &[data-style='expand-right'] .ladda-spinner {\n    right: -6px;\n  }\n  &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n    right: -12px;\n  }\n  &[data-style='expand-right'][data-loading] {\n    padding-right: 56px;\n  }\n  &[data-style='expand-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-right'][data-loading][data-size='s'],\n  &[data-style='expand-right'][data-loading][data-size='xs'] {\n    padding-right: 40px;\n  }\n  &[data-style='expand-left'] .ladda-spinner {\n    left: 26px;\n  }\n  &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n    left: 4px;\n  }\n  &[data-style='expand-left'][data-loading] {\n    padding-left: 56px;\n  }\n  &[data-style='expand-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-left'][data-loading][data-size='s'],\n  &[data-style='expand-left'][data-loading][data-size='xs'] {\n    padding-left: 40px;\n  }\n  &[data-style='expand-up'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-up'] .ladda-spinner {\n    top: -32px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-up'][data-loading] {\n    padding-top: 54px;\n  }\n  &[data-style='expand-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    top: 26px;\n    margin-top: 0;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'],\n  &[data-style='expand-up'][data-loading][data-size='xs'] {\n    padding-top: 32px;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n  &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n    top: 4px;\n  }\n  &[data-style='expand-down'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-down'] .ladda-spinner {\n    top: 62px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n    top: 40px;\n  }\n  &[data-style='expand-down'][data-loading] {\n    padding-bottom: 54px;\n  }\n  &[data-style='expand-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-down'][data-loading][data-size='s'],\n  &[data-style='expand-down'][data-loading][data-size='xs'] {\n    padding-bottom: 32px;\n  }\n  &[data-style='slide-left'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-left'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-left'] .ladda-spinner {\n    left: 100%;\n    margin-left: 0;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-label {\n    opacity: 0;\n    left: -100%;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-right'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-right'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-right'] .ladda-spinner {\n    right: 100%;\n    margin-left: 0;\n    left: 16px;\n  }\n  [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n    right: auto;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-label {\n    opacity: 0;\n    left: 100%;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-up'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-up'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-up'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: 1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-label {\n    opacity: 0;\n    top: -1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='slide-down'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-down'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-down'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: -2em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-label {\n    opacity: 0;\n    top: 1em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='zoom-out'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-out'] .ladda-spinner {\n    left: 50%;\n    margin-left: 32px;\n    transform: scale(2.5);\n  }\n  &[data-style='zoom-out'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='zoom-in'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-in'] .ladda-spinner {\n    left: 50%;\n    margin-left: -16px;\n    transform: scale(0.2);\n  }\n  &[data-style='zoom-in'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(2.2);\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='contract'] {\n    overflow: hidden;\n    width: 100px;\n  }\n  &[data-style='contract'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n  }\n  &[data-style='contract'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='contract-overlay'] {\n    overflow: hidden;\n    width: 100px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n  }\n  &[data-style='contract-overlay'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  [dir='rtl'] .ladda-spinner > div {\n    left: 25% !important;\n  }\n"], ["\n  ", "\n\n  /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n  @keyframes ladda-spinner-line-fade {\n    0%,\n    100% {\n      opacity: 0.22;\n    }\n    1% {\n      opacity: 1;\n    }\n  }\n\n  position: relative;\n\n  .ladda-spinner {\n    position: absolute;\n    z-index: 2;\n    display: inline-block;\n    width: 32px;\n    top: 50%;\n    margin-top: 0;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .ladda-label {\n    position: relative;\n    z-index: 3;\n  }\n  .ladda-progress {\n    position: absolute;\n    width: 0;\n    height: 100%;\n    left: 0;\n    top: 0;\n    background: rgba(0, 0, 0, 0.2);\n    display: none;\n    transition: 0.1s linear all !important;\n  }\n  &[data-loading] .ladda-progress {\n    display: block;\n  }\n\n  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n  .ladda-spinner,\n  .ladda-label {\n    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n  }\n  &[data-style='zoom-in'],\n  &[data-style='zoom-in'] .ladda-spinner,\n  &[data-style='zoom-in'] .ladda-label,\n  &[data-style='zoom-out'],\n  &[data-style='zoom-out'] .ladda-spinner,\n  &[data-style='zoom-out'] .ladda-label {\n    transition: 0.3s ease all !important;\n  }\n  &[data-style='expand-right'] .ladda-spinner {\n    right: -6px;\n  }\n  &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n    right: -12px;\n  }\n  &[data-style='expand-right'][data-loading] {\n    padding-right: 56px;\n  }\n  &[data-style='expand-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-right'][data-loading][data-size='s'],\n  &[data-style='expand-right'][data-loading][data-size='xs'] {\n    padding-right: 40px;\n  }\n  &[data-style='expand-left'] .ladda-spinner {\n    left: 26px;\n  }\n  &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n    left: 4px;\n  }\n  &[data-style='expand-left'][data-loading] {\n    padding-left: 56px;\n  }\n  &[data-style='expand-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-left'][data-loading][data-size='s'],\n  &[data-style='expand-left'][data-loading][data-size='xs'] {\n    padding-left: 40px;\n  }\n  &[data-style='expand-up'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-up'] .ladda-spinner {\n    top: -32px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-up'][data-loading] {\n    padding-top: 54px;\n  }\n  &[data-style='expand-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    top: 26px;\n    margin-top: 0;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'],\n  &[data-style='expand-up'][data-loading][data-size='xs'] {\n    padding-top: 32px;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n  &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n    top: 4px;\n  }\n  &[data-style='expand-down'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-down'] .ladda-spinner {\n    top: 62px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n    top: 40px;\n  }\n  &[data-style='expand-down'][data-loading] {\n    padding-bottom: 54px;\n  }\n  &[data-style='expand-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-down'][data-loading][data-size='s'],\n  &[data-style='expand-down'][data-loading][data-size='xs'] {\n    padding-bottom: 32px;\n  }\n  &[data-style='slide-left'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-left'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-left'] .ladda-spinner {\n    left: 100%;\n    margin-left: 0;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-label {\n    opacity: 0;\n    left: -100%;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-right'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-right'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-right'] .ladda-spinner {\n    right: 100%;\n    margin-left: 0;\n    left: 16px;\n  }\n  [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n    right: auto;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-label {\n    opacity: 0;\n    left: 100%;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-up'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-up'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-up'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: 1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-label {\n    opacity: 0;\n    top: -1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='slide-down'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-down'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-down'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: -2em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-label {\n    opacity: 0;\n    top: 1em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='zoom-out'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-out'] .ladda-spinner {\n    left: 50%;\n    margin-left: 32px;\n    transform: scale(2.5);\n  }\n  &[data-style='zoom-out'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='zoom-in'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-in'] .ladda-spinner {\n    left: 50%;\n    margin-left: -16px;\n    transform: scale(0.2);\n  }\n  &[data-style='zoom-in'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(2.2);\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='contract'] {\n    overflow: hidden;\n    width: 100px;\n  }\n  &[data-style='contract'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n  }\n  &[data-style='contract'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='contract-overlay'] {\n    overflow: hidden;\n    width: 100px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n  }\n  &[data-style='contract-overlay'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  [dir='rtl'] .ladda-spinner > div {\n    left: 25% !important;\n  }\n"])), function (props) {
+  var StyledButton = styled.button(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  ", "\n\n  /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n  @keyframes ladda-spinner-line-fade {\n    0%,\n    100% {\n      opacity: 0.22;\n    }\n    1% {\n      opacity: 1;\n    }\n  }\n\n  position: relative;\n\n  .ladda-spinner {\n    position: absolute;\n    z-index: 2;\n    display: inline-block;\n    width: 32px;\n    top: 50%;\n    margin-top: 0;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .ladda-label {\n    position: relative;\n    z-index: 3;\n  }\n  .ladda-progress {\n    position: absolute;\n    width: 0;\n    height: 100%;\n    left: 0;\n    top: 0;\n    background: rgba(0, 0, 0, 0.2);\n    display: none;\n    transition: 0.1s linear all !important;\n  }\n  &[data-loading] .ladda-progress {\n    display: block;\n  }\n\n  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n  .ladda-spinner,\n  .ladda-label {\n    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n  }\n  &[data-style='zoom-in'],\n  &[data-style='zoom-in'] .ladda-spinner,\n  &[data-style='zoom-in'] .ladda-label,\n  &[data-style='zoom-out'],\n  &[data-style='zoom-out'] .ladda-spinner,\n  &[data-style='zoom-out'] .ladda-label {\n    transition: 0.3s ease all !important;\n  }\n  &[data-style='expand-right'] .ladda-spinner {\n    right: -6px;\n  }\n  &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n    right: -12px;\n  }\n  &[data-style='expand-right'][data-loading] {\n    padding-right: 56px;\n  }\n  &[data-style='expand-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-right'][data-loading][data-size='s'],\n  &[data-style='expand-right'][data-loading][data-size='xs'] {\n    padding-right: 40px;\n  }\n  &[data-style='expand-left'] .ladda-spinner {\n    left: 26px;\n  }\n  &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n    left: 4px;\n  }\n  &[data-style='expand-left'][data-loading] {\n    padding-left: 56px;\n  }\n  &[data-style='expand-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-left'][data-loading][data-size='s'],\n  &[data-style='expand-left'][data-loading][data-size='xs'] {\n    padding-left: 40px;\n  }\n  &[data-style='expand-up'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-up'] .ladda-spinner {\n    top: -32px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-up'][data-loading] {\n    padding-top: 54px;\n  }\n  &[data-style='expand-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    top: 26px;\n    margin-top: 0;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'],\n  &[data-style='expand-up'][data-loading][data-size='xs'] {\n    padding-top: 32px;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n  &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n    top: 4px;\n  }\n  &[data-style='expand-down'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-down'] .ladda-spinner {\n    top: 62px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n    top: 40px;\n  }\n  &[data-style='expand-down'][data-loading] {\n    padding-bottom: 54px;\n  }\n  &[data-style='expand-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-down'][data-loading][data-size='s'],\n  &[data-style='expand-down'][data-loading][data-size='xs'] {\n    padding-bottom: 32px;\n  }\n  &[data-style='slide-left'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-left'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-left'] .ladda-spinner {\n    left: 100%;\n    margin-left: 0;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-label {\n    opacity: 0;\n    left: -100%;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-right'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-right'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-right'] .ladda-spinner {\n    right: 100%;\n    margin-left: 0;\n    left: 16px;\n  }\n  [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n    right: auto;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-label {\n    opacity: 0;\n    left: 100%;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-up'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-up'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-up'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: 1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-label {\n    opacity: 0;\n    top: -1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='slide-down'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-down'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-down'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: -2em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-label {\n    opacity: 0;\n    top: 1em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='zoom-out'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-out'] .ladda-spinner {\n    left: 50%;\n    margin-left: 32px;\n    transform: scale(2.5);\n  }\n  &[data-style='zoom-out'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='zoom-in'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-in'] .ladda-spinner {\n    left: 50%;\n    margin-left: -16px;\n    transform: scale(0.2);\n  }\n  &[data-style='zoom-in'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(2.2);\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='contract'] {\n    overflow: hidden;\n    width: 100px;\n  }\n  &[data-style='contract'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n  }\n  &[data-style='contract'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='contract-overlay'] {\n    overflow: hidden;\n    width: 100px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n  }\n  &[data-style='contract-overlay'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  [dir='rtl'] .ladda-spinner > div {\n    left: 25% !important;\n  }\n"], ["\n  ", "\n\n  /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n  @keyframes ladda-spinner-line-fade {\n    0%,\n    100% {\n      opacity: 0.22;\n    }\n    1% {\n      opacity: 1;\n    }\n  }\n\n  position: relative;\n\n  .ladda-spinner {\n    position: absolute;\n    z-index: 2;\n    display: inline-block;\n    width: 32px;\n    top: 50%;\n    margin-top: 0;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .ladda-label {\n    position: relative;\n    z-index: 3;\n  }\n  .ladda-progress {\n    position: absolute;\n    width: 0;\n    height: 100%;\n    left: 0;\n    top: 0;\n    background: rgba(0, 0, 0, 0.2);\n    display: none;\n    transition: 0.1s linear all !important;\n  }\n  &[data-loading] .ladda-progress {\n    display: block;\n  }\n\n  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n  .ladda-spinner,\n  .ladda-label {\n    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n  }\n  &[data-style='zoom-in'],\n  &[data-style='zoom-in'] .ladda-spinner,\n  &[data-style='zoom-in'] .ladda-label,\n  &[data-style='zoom-out'],\n  &[data-style='zoom-out'] .ladda-spinner,\n  &[data-style='zoom-out'] .ladda-label {\n    transition: 0.3s ease all !important;\n  }\n  &[data-style='expand-right'] .ladda-spinner {\n    right: -6px;\n  }\n  &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n    right: -12px;\n  }\n  &[data-style='expand-right'][data-loading] {\n    padding-right: 56px;\n  }\n  &[data-style='expand-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-right'][data-loading][data-size='s'],\n  &[data-style='expand-right'][data-loading][data-size='xs'] {\n    padding-right: 40px;\n  }\n  &[data-style='expand-left'] .ladda-spinner {\n    left: 26px;\n  }\n  &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n    left: 4px;\n  }\n  &[data-style='expand-left'][data-loading] {\n    padding-left: 56px;\n  }\n  &[data-style='expand-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-left'][data-loading][data-size='s'],\n  &[data-style='expand-left'][data-loading][data-size='xs'] {\n    padding-left: 40px;\n  }\n  &[data-style='expand-up'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-up'] .ladda-spinner {\n    top: -32px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-up'][data-loading] {\n    padding-top: 54px;\n  }\n  &[data-style='expand-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    top: 26px;\n    margin-top: 0;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'],\n  &[data-style='expand-up'][data-loading][data-size='xs'] {\n    padding-top: 32px;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n  &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n    top: 4px;\n  }\n  &[data-style='expand-down'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-down'] .ladda-spinner {\n    top: 62px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n    top: 40px;\n  }\n  &[data-style='expand-down'][data-loading] {\n    padding-bottom: 54px;\n  }\n  &[data-style='expand-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-down'][data-loading][data-size='s'],\n  &[data-style='expand-down'][data-loading][data-size='xs'] {\n    padding-bottom: 32px;\n  }\n  &[data-style='slide-left'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-left'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-left'] .ladda-spinner {\n    left: 100%;\n    margin-left: 0;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-label {\n    opacity: 0;\n    left: -100%;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-right'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-right'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-right'] .ladda-spinner {\n    right: 100%;\n    margin-left: 0;\n    left: 16px;\n  }\n  [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n    right: auto;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-label {\n    opacity: 0;\n    left: 100%;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-up'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-up'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-up'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: 1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-label {\n    opacity: 0;\n    top: -1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='slide-down'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-down'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-down'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: -2em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-label {\n    opacity: 0;\n    top: 1em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='zoom-out'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-out'] .ladda-spinner {\n    left: 50%;\n    margin-left: 32px;\n    transform: scale(2.5);\n  }\n  &[data-style='zoom-out'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='zoom-in'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-in'] .ladda-spinner {\n    left: 50%;\n    margin-left: -16px;\n    transform: scale(0.2);\n  }\n  &[data-style='zoom-in'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(2.2);\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='contract'] {\n    overflow: hidden;\n    width: 100px;\n  }\n  &[data-style='contract'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n  }\n  &[data-style='contract'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='contract-overlay'] {\n    overflow: hidden;\n    width: 100px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n  }\n  &[data-style='contract-overlay'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  [dir='rtl'] .ladda-spinner > div {\n    left: 25% !important;\n  }\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     return ((_a = props.theme.buttons) === null || _a === void 0 ? void 0 : _a.style) === 'bootstrap' && "\n    border-radius: 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: color 0.15s ease-in-out, background-color 0.15s ease-in-out,\n    //  border-color 0.15s ease-in-out, 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: ".concat((_f = (_b = props.$textColor) !== null && _b !== void 0 ? _b : (_e = (_c = props.theme.buttons) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'primary']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : '#fff', ";\n    --bs-btn-bg: ").concat((_l = (_g = props.$backgroundColor) !== null && _g !== void 0 ? _g : (_k = (_h = props.theme.buttons) === null || _h === void 0 ? void 0 : _h[(_j = props.$variant) !== null && _j !== void 0 ? _j : 'primary']) === null || _k === void 0 ? void 0 : _k.backgroundColor) !== null && _l !== void 0 ? _l : '#0d6efd', ";\n    --bs-btn-border-color: var(--bs-btn-bg);\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: ").concat((_q = (_m = props.$disabledTextColor) !== null && _m !== void 0 ? _m : (_p = (_o = props.theme.buttons) === null || _o === void 0 ? void 0 : _o.loading) === null || _p === void 0 ? void 0 : _p.textColor) !== null && _q !== void 0 ? _q : '#fff', ";\n    --bs-btn-disabled-bg: ").concat((_u = (_r = props.$disabledBackgroundColor) !== null && _r !== void 0 ? _r : (_t = (_s = props.theme.buttons) === null || _s === void 0 ? void 0 : _s.loading) === null || _t === void 0 ? void 0 : _t.backgroundColor) !== null && _u !== void 0 ? _u : 'gray', ";\n    --bs-btn-disabled-border-color: ").concat((_v = props.$disabledBackgroundColor) !== null && _v !== void 0 ? _v : '#0d6efd', ";\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  ");
   });
-  var templateObject_1$H;
+  var templateObject_1$F;
 
   var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
     var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -1045,7 +1045,7 @@
     }, retryText)))));
   };
 
-  var Spinner$1 = styled.div(templateObject_1$G || (templateObject_1$G = __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$1 = styled.div(templateObject_1$E || (templateObject_1$E = __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) {
@@ -1070,7 +1070,7 @@
     var $color = _a.$color;
     return $color !== null && $color !== void 0 ? $color : '#888';
   });
-  var templateObject_1$G;
+  var templateObject_1$E;
 
   exports.defaultAuthUrl = 'https://portal-api.idmission.com';
   var allowedAuthUrls = ['https://portal-api.idmission.com', 'https://portal-api-uat.idmission.com', 'https://portal-api-demo.idmission.com', 'https://portal-api-dev.idmission.com', 'http://localhost:10000'];
@@ -2310,7 +2310,7 @@
     return [frameWidth, frameHeight];
   }
 
-  var InvisibleCanvas = styled.canvas(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+  var InvisibleCanvas = styled.canvas(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
   function drawToCanvas(canvas, frame, width, height) {
     if (!canvas) return;
     var ctx = canvas.getContext('2d');
@@ -2330,7 +2330,7 @@
     var _a;
     (_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas === null || canvas === void 0 ? void 0 : canvas.width, canvas === null || canvas === void 0 ? void 0 : canvas.height);
   }
-  var templateObject_1$F;
+  var templateObject_1$D;
 
   function listAvailableCameras(facingMode_1) {
     return __awaiter(this, arguments, void 0, function (facingMode, requestMicAccess) {
@@ -8449,18 +8449,18 @@
     rawCanvas.width = frame.width;
     rawCanvas.height = frame.height;
     rawCtx.putImageData(frame, 0, 0);
+    var _a = face.box,
+      xMin = _a.xMin,
+      width = _a.width;
+    var frameHeight = frame.height;
+    var xPadding = frameHeight * 0.6 - width;
+    var xPos = Math.max(0, xMin - xPadding / 2);
     if (frame.height > frame.width) {
       cropCanvas.width = frame.width;
       cropCanvas.height = frame.height;
       cropCtx.drawImage(rawCanvas, 0, 0, cropCanvas.width, cropCanvas.height);
     } else {
-      var _a = face.box,
-        xMin = _a.xMin,
-        width = _a.width;
-      var desiredWidth = frame.height * 0.6;
-      var faceCenterX = xMin + width / 2;
-      var xPos = Math.max(0, faceCenterX - desiredWidth / 2);
-      cropCanvas.width = desiredWidth;
+      cropCanvas.width = width + xPadding;
       cropCanvas.height = frame.height;
       cropCtx.drawImage(rawCanvas, xPos, 0, cropCanvas.width, cropCanvas.height, 0, 0, cropCanvas.width, cropCanvas.height);
     }
@@ -8659,6 +8659,10 @@
     passport: {
       desktop: 0,
       mobile: 0.3
+    },
+    singlePage: {
+      desktop: 0,
+      mobile: 0.3
     }
   };
   var models = {};
@@ -11320,18 +11324,20 @@
     });
   }
 
-  var defaultDocumentDetectorModelPath = "https://websdk-cdn-dev.idmission.com/assets/models/docdetectmp20240825/model_fp16.tflite";
+  var defaultDocumentDetectorModelPath = "https://websdk-cdn-dev.idmission.com/assets/models/docdetectmp20240830/model_fp16.tflite";
   var defaultDocumentDetectionScoreThreshold = 0.1;
   var defaultDocumentDetectionModelLoadTimeoutMs = 45000;
   var defaultDocumentDetectionThresholds = {
     idCardFront: 0.6,
     idCardBack: 0.6,
-    passport: 0.4
+    passport: 0.4,
+    singlePage: 0.6
   };
   var documentTypeDisplayNames = {
     idCardFront: 'ID card front',
     idCardBack: 'ID card back',
     passport: 'Passport',
+    singlePage: 'Single page ID document',
     none: 'None'
   };
   var detectors = {};
@@ -11467,7 +11473,7 @@
     });
   }
   function processDocumentDetectorPrediction(prediction, thresholds) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var detections = prediction.detections,
       frameWidth = prediction.frameWidth,
       frameHeight = prediction.frameHeight,
@@ -11496,19 +11502,26 @@
     var bestPassportPage = detectedObjects.find(function (obj) {
       return obj.label === 'Passport page';
     });
+    var bestSinglePage = detectedObjects.find(function (obj) {
+      return obj.label === 'Single page';
+    });
     var idCardFrontDetectionScore = (_a = bestIdCardFront === null || bestIdCardFront === void 0 ? void 0 : bestIdCardFront.score) !== null && _a !== void 0 ? _a : 0;
     var idCardBackDetectionScore = (_b = bestIdCardBack === null || bestIdCardBack === void 0 ? void 0 : bestIdCardBack.score) !== null && _b !== void 0 ? _b : 0;
     var passportDetectionScore = (_c = bestPassportPage === null || bestPassportPage === void 0 ? void 0 : bestPassportPage.score) !== null && _c !== void 0 ? _c : 0;
-    var idCardFrontDetectionThresholdMet = idCardFrontDetectionScore >= ((_d = thresholds.idCardFront) !== null && _d !== void 0 ? _d : 0);
-    var idCardBackDetectionThresholdMet = idCardBackDetectionScore >= ((_e = thresholds.idCardBack) !== null && _e !== void 0 ? _e : 0);
-    var passportDetectionThresholdMet = passportDetectionScore >= ((_f = thresholds.passport) !== null && _f !== void 0 ? _f : 0);
-    var bestDocument = passportDetectionThresholdMet ? bestPassportPage : idCardBackDetectionThresholdMet ? bestIdCardBack : bestIdCardFront;
-    var detectionThreshold = passportDetectionThresholdMet ? thresholds.passport : idCardBackDetectionThresholdMet ? thresholds.idCardBack : thresholds.idCardFront;
-    var detectionScore = (_g = bestDocument === null || bestDocument === void 0 ? void 0 : bestDocument.score) !== null && _g !== void 0 ? _g : 0;
+    var singlePageDetectionScore = (_d = bestSinglePage === null || bestSinglePage === void 0 ? void 0 : bestSinglePage.score) !== null && _d !== void 0 ? _d : 0;
+    var idCardFrontDetectionThresholdMet = idCardFrontDetectionScore >= ((_e = thresholds.idCardFront) !== null && _e !== void 0 ? _e : 0);
+    var idCardBackDetectionThresholdMet = idCardBackDetectionScore >= ((_f = thresholds.idCardBack) !== null && _f !== void 0 ? _f : 0);
+    var passportDetectionThresholdMet = passportDetectionScore >= ((_g = thresholds.passport) !== null && _g !== void 0 ? _g : 0);
+    var singlePageDetectionThresholdMet = singlePageDetectionScore >= ((_h = thresholds.singlePage) !== null && _h !== void 0 ? _h : 0);
+    var bestDocument = passportDetectionThresholdMet ? bestPassportPage : singlePageDetectionThresholdMet ? bestSinglePage : idCardBackDetectionThresholdMet ? bestIdCardBack : bestIdCardFront;
+    var detectionThreshold = passportDetectionThresholdMet ? thresholds.passport : singlePageDetectionThresholdMet ? thresholds.singlePage : idCardBackDetectionThresholdMet ? thresholds.idCardBack : thresholds.idCardFront;
+    var detectionScore = (_j = bestDocument === null || bestDocument === void 0 ? void 0 : bestDocument.score) !== null && _j !== void 0 ? _j : 0;
     var detectionThresholdMet = detectionScore >= (detectionThreshold !== null && detectionThreshold !== void 0 ? detectionThreshold : 0);
     var detectedDocumentType = 'none';
     if (passportDetectionThresholdMet) {
       detectedDocumentType = 'passport';
+    } else if (singlePageDetectionThresholdMet) {
+      detectedDocumentType = 'singlePage';
     } else if (idCardBackDetectionThresholdMet) {
       detectedDocumentType = 'idCardBack';
     } else if (detectionThresholdMet) {
@@ -11517,11 +11530,11 @@
     var documentInBounds = false;
     if (bestDocument) {
       var boundaryPx = 20;
-      var _h = bestDocument.box,
-        boundaryX = _h.xMin,
-        boundaryY = _h.yMin,
-        boundaryWidth = _h.width,
-        boundaryHeight = _h.height;
+      var _k = bestDocument.box,
+        boundaryX = _k.xMin,
+        boundaryY = _k.yMin,
+        boundaryWidth = _k.width,
+        boundaryHeight = _k.height;
       documentInBounds = boundaryY > boundaryPx &&
       // Is it valid top edge of ID detected?
       boundaryY + boundaryHeight + boundaryPx < frameHeight && (
@@ -11532,9 +11545,9 @@
     }
     var documentTooClose = false;
     if (bestDocument) {
-      var _j = [bestDocument.box.width / frameWidth, bestDocument.box.height / frameHeight],
-        docWidth = _j[0],
-        docHeight = _j[1];
+      var _l = [bestDocument.box.width / frameWidth, bestDocument.box.height / frameHeight],
+        docWidth = _l[0],
+        docHeight = _l[1];
       documentTooClose = docWidth > 0.85 || docHeight > 0.85;
     }
     return {
@@ -11549,6 +11562,8 @@
       idCardBackDetectionThresholdMet: idCardBackDetectionThresholdMet,
       passportDetectionScore: passportDetectionScore,
       passportDetectionThresholdMet: passportDetectionThresholdMet,
+      singlePageDetectionScore: singlePageDetectionScore,
+      singlePageDetectionThresholdMet: singlePageDetectionThresholdMet,
       bestDocument: bestDocument,
       documentInBounds: documentInBounds,
       documentTooClose: documentTooClose,
@@ -11963,20 +11978,24 @@
       var _this = this;
       onDocumentDetected(function (prediction) {
         return __awaiter(_this, void 0, void 0, function () {
-          var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, isRequiredDocumentType, focusPrediction, focusThresholdSet, focusThreshold;
+          var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, detectedDocumentType, isRequiredDocumentType, focusPrediction, focusThresholdSet, focusThreshold;
           var _a, _b, _c, _d, _e, _f;
           return __generator(this, function (_g) {
             if (!lastPredictionCanvas.current) return [2 /*return*/];
             stopDetectionAtStart = stopDetection.current;
             focusPredictionTime = 0, focusScore = 0, focusThresholdMet = false;
-            isRequiredDocumentType = requiredDocumentType === 'none' || prediction.detectedDocumentType === requiredDocumentType || ((_a = requiredDocumentType.includes) === null || _a === void 0 ? void 0 : _a.call(requiredDocumentType, prediction.detectedDocumentType));
-            if (isRequiredDocumentType && prediction.detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.documentInBounds && !prediction.documentTooClose) {
+            detectedDocumentType = prediction.detectedDocumentType;
+            if (detectedDocumentType === 'singlePage') {
+              detectedDocumentType = 'passport';
+            }
+            isRequiredDocumentType = requiredDocumentType === 'none' || detectedDocumentType === requiredDocumentType || ((_a = requiredDocumentType.includes) === null || _a === void 0 ? void 0 : _a.call(requiredDocumentType, detectedDocumentType));
+            if (isRequiredDocumentType && detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.documentInBounds && !prediction.documentTooClose) {
               focusPrediction = makeFocusPrediction(lastPredictionCanvas.current, (_b = prediction.bestDocument) === null || _b === void 0 ? void 0 : _b.box);
               if (focusPrediction) {
                 focusScore = focusPrediction.score;
                 focusPredictionTime = focusPrediction.predictionTime;
               }
-              focusThresholdSet = (_c = thresholds.focus) === null || _c === void 0 ? void 0 : _c[prediction.detectedDocumentType];
+              focusThresholdSet = (_c = thresholds.focus) === null || _c === void 0 ? void 0 : _c[detectedDocumentType];
               focusThreshold = (_d = onMobile ? focusThresholdSet === null || focusThresholdSet === void 0 ? void 0 : focusThresholdSet.mobile : focusThresholdSet === null || focusThresholdSet === void 0 ? void 0 : focusThresholdSet.desktop) !== null && _d !== void 0 ? _d : 0;
               focusThresholdMet = focusScore >= focusThreshold;
               if (bestFocusScore.current <= focusScore && stopDetectionAtStart === stopDetection.current) {
@@ -11984,7 +12003,7 @@
                 drawToCanvas(bestPredictionCanvas.current, lastPredictionCanvas.current);
                 setBestFrameDetails({
                   boundingBox: (_e = prediction.bestDocument) === null || _e === void 0 ? void 0 : _e.box,
-                  documentType: prediction.detectedDocumentType,
+                  documentType: detectedDocumentType,
                   detectionScore: prediction.detectionScore,
                   focusScore: focusScore
                 });
@@ -12195,6 +12214,8 @@
     idCardBackDetectionThresholdMet: false,
     passportDetectionScore: 0,
     passportDetectionThresholdMet: false,
+    singlePageDetectionScore: 0,
+    singlePageDetectionThresholdMet: false,
     focusScore: 0,
     focusThresholdMet: false,
     isGoodFrame: false,
@@ -12295,6 +12316,8 @@
           idCardBackDetectionThresholdMet = _d.idCardBackDetectionThresholdMet,
           passportDetectionScore = _d.passportDetectionScore,
           passportDetectionThresholdMet = _d.passportDetectionThresholdMet,
+          singlePageDetectionScore = _d.singlePageDetectionScore,
+          singlePageDetectionThresholdMet = _d.singlePageDetectionThresholdMet,
           bestDocument = _d.bestDocument,
           documentInBounds = _d.documentInBounds,
           documentTooClose = _d.documentTooClose,
@@ -12332,10 +12355,10 @@
           }
         }
         if (state.captureRequirement === 'idCardOrPassport') {
-          if (detectedDocumentType === 'passport' && state.requestedDocumentType !== 'passport') {
+          if ((detectedDocumentType === 'passport' || detectedDocumentType === 'singlePage') && state.requestedDocumentType !== 'passport') {
             requestedDocumentType = 'passport';
           }
-          if (requestedDocumentType === 'passport' && passportDetectionScore < 0.3) {
+          if (requestedDocumentType === 'passport' && !passportDetectionThresholdMet && !singlePageDetectionThresholdMet) {
             requestedDocumentType = 'idCardFront' in state.capturedDocuments ? 'idCardBack' : 'idCardFront';
           }
         }
@@ -12362,6 +12385,8 @@
           idCardBackDetectionThresholdMet: idCardBackDetectionThresholdMet,
           passportDetectionScore: passportDetectionScore,
           passportDetectionThresholdMet: passportDetectionThresholdMet,
+          singlePageDetectionScore: singlePageDetectionScore,
+          singlePageDetectionThresholdMet: singlePageDetectionThresholdMet,
           focusScore: focusScore,
           focusThresholdMet: focusThresholdMet,
           isGoodFrame: isGoodFrame,
@@ -12534,12 +12559,12 @@
     if (!portalLocation) return element;
     return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
   }
-  var DebugStatsPaneDiv = styled.span(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  margin-right: 20px;\n  padding: 8px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 10002;\n"], ["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  margin-right: 20px;\n  padding: 8px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 10002;\n"])));
-  var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$u || (templateObject_2$u = __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 DebugStatsPaneDiv = styled.span(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  margin-right: 20px;\n  padding: 8px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 10002;\n"], ["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  margin-right: 20px;\n  padding: 8px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 10002;\n"])));
+  var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$r || (templateObject_2$r = __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);' : '';
   });
-  var ObjectDetectionDebugBox = styled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"], ["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"])), function (_a) {
+  var ObjectDetectionDebugBox = styled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"], ["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"])), function (_a) {
     var $color = _a.$color;
     return $color !== null && $color !== void 0 ? $color : 'green';
   }, function (_a) {
@@ -12549,7 +12574,7 @@
     var $flipX = _a.$flipX;
     return $flipX ? 'transform: scaleX(-1);' : '';
   });
-  var FaceDetectionKeypointMarker = styled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border: 2px solid ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"], ["\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border: 2px solid ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"])), function (_a) {
+  var FaceDetectionKeypointMarker = styled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border: 2px solid ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"], ["\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border: 2px solid ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"])), function (_a) {
     var $color = _a.$color;
     return $color !== null && $color !== void 0 ? $color : 'red';
   }, function (_a) {
@@ -12740,7 +12765,7 @@
       }
     });
   }
-  var templateObject_1$E, templateObject_2$u, templateObject_3$o, templateObject_4$h;
+  var templateObject_1$C, templateObject_2$r, templateObject_3$l, templateObject_4$g;
 
   var enTranslation = {};
 
@@ -12776,6 +12801,7 @@
     'ID card front detected, hold still...': 'Anverso de ID detectado, no mover...',
     'ID card back detected, hold still...': 'Reverso de ID detectado, no mover...',
     'Passport detected, hold still...': 'Pasaporte detectado, no mover...',
+    'Single page ID document detected, hold still...': 'Documento de una sola página detectada, por favor permanece quieto...',
     'Capturing...': 'Capturando...',
     'Capture failed!': 'Falló la captura',
     'Please flip your ID card...': 'Por favor voltea la identificación...',
@@ -12800,8 +12826,6 @@
     Exit: 'Salir',
     'Face liveness has been verified!': 'Se ha verificado la Prueba de Vida en rostro!',
     Done: 'Terminar',
-    'Could not verify your face.': 'No se pudo verificar tu rostro.',
-    'An error occurred while verifying your face.': 'Se ha producido un error al verificar tu rostro.',
     'Customer has been identified!': '¡Se ha identificado al cliente!',
     'Customer not found': 'Cliente no encontrado',
     'Additional document capture': 'Captura de otro documento',
@@ -15702,7 +15726,7 @@
     }, [fallbacks, i18n.language, t, verbiage]);
   }
 
-  var GuidanceMessageContainerDiv = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
+  var GuidanceMessageContainerDiv = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  ", "\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';
   }, function (_a) {
@@ -15715,14 +15739,14 @@
     if (!portalLocation) return element;
     return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
   };
-  var GuidanceMessage = styled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n  z-index: 10001;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n  z-index: 10001;\n"])), function (props) {
+  var GuidanceMessage = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n  z-index: 10001;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n  z-index: 10001;\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f;
     return (_f = (_a = props.$background) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.backgroundColor) !== null && _f !== void 0 ? _f : '#ccc';
   }, function (props) {
     var _a, _b, _c, _d, _e, _f;
     return (_f = (_a = props.$textColor) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : 'black';
   });
-  var templateObject_1$D, templateObject_2$t;
+  var templateObject_1$B, templateObject_2$q;
 
   var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
 
@@ -15757,18 +15781,18 @@
       }
     }, verbiage.buttonText))));
   }
-  var Container$1 = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100dvw;\n  background: ", ";\n  color: ", ";\n  display: flex;\n  z-index: 100001;\n"], ["\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100dvw;\n  background: ", ";\n  color: ", ";\n  display: flex;\n  z-index: 100001;\n"])), function (props) {
+  var Container$1 = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100dvw;\n  background: ", ";\n  color: ", ";\n  display: flex;\n  z-index: 100001;\n"], ["\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100dvw;\n  background: ", ";\n  color: ", ";\n  display: flex;\n  z-index: 100001;\n"])), function (props) {
     var _a, _b, _c;
     return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.backgroundColor) !== null && _c !== void 0 ? _c : '#eed202';
   }, function (props) {
     var _a, _b, _c;
     return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.textColor) !== null && _c !== void 0 ? _c : 'black';
   });
-  var InnerContainer = styled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 16px 24px;\n  margin: auto 0;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 16px 24px;\n  margin: auto 0;\n  width: 100%;\n"])));
-  var Message = styled.span(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  display: block;\n  margin: auto 12px auto 0;\n"], ["\n  display: block;\n  margin: auto 12px auto 0;\n"])));
-  var ButtonContainer = styled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  display: flex;\n  margin-left: auto;\n"], ["\n  display: flex;\n  margin-left: auto;\n"])));
-  var Button = styled(LoaderButton)(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  white-space: nowrap;\n  margin: auto;\n"], ["\n  white-space: nowrap;\n  margin: auto;\n"])));
-  var templateObject_1$C, templateObject_2$s, templateObject_3$n, templateObject_4$g, templateObject_5$a;
+  var InnerContainer = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 16px 24px;\n  margin: auto 0;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 16px 24px;\n  margin: auto 0;\n  width: 100%;\n"])));
+  var Message = styled.span(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  display: block;\n  margin: auto 12px auto 0;\n"], ["\n  display: block;\n  margin: auto 12px auto 0;\n"])));
+  var ButtonContainer = styled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  display: flex;\n  margin-left: auto;\n"], ["\n  display: flex;\n  margin-left: auto;\n"])));
+  var Button = styled(LoaderButton)(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  white-space: nowrap;\n  margin: auto;\n"], ["\n  white-space: nowrap;\n  margin: auto;\n"])));
+  var templateObject_1$A, templateObject_2$p, templateObject_3$k, templateObject_4$f, templateObject_5$9;
 
   var IdCapture = function IdCapture(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j;
@@ -15918,7 +15942,7 @@
         scaling: debugScalingDetails,
         flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
       });
-    }))), debugMode && ( /*#__PURE__*/React.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React.createElement("br", null), modelsReady ? ( /*#__PURE__*/React.createElement(React.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u274C Models not ready")))));
+    }))), debugMode && ( /*#__PURE__*/React.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React.createElement("br", null), modelsReady ? ( /*#__PURE__*/React.createElement(React.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.singlePageDetectionThresholdMet ? '✅' : '❌', " Single Page Score: ", state.singlePageDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u274C Models not ready")))));
   };
   var timeSince = function timeSince(t) {
     if (!t) return 0;
@@ -15964,13 +15988,13 @@
       finished: true
     }, verbiage.retryBtnText)));
   };
-  var StyledOverlayInner$3 = styled(OverlayInner$2)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"], ["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"])));
-  var StyledOverlayImageContainer$3 = styled(OverlayImageContainer)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
-  var Description$4 = styled.p(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"], ["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"])));
-  var RetryButton$1 = styled(LoaderButton)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  width: 200px;\n  margin: 0 auto;\n"], ["\n  width: 200px;\n  margin: 0 auto;\n"])));
-  var templateObject_1$B, templateObject_2$r, templateObject_3$m, templateObject_4$f;
+  var StyledOverlayInner$3 = styled(OverlayInner$2)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"], ["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"])));
+  var StyledOverlayImageContainer$3 = styled(OverlayImageContainer)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
+  var Description$4 = styled.p(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"], ["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"])));
+  var RetryButton$1 = styled(LoaderButton)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  width: 200px;\n  margin: 0 auto;\n"], ["\n  width: 200px;\n  margin: 0 auto;\n"])));
+  var templateObject_1$z, templateObject_2$o, templateObject_3$j, templateObject_4$e;
 
-  var ExitCaptureStyledButton = styled.button(templateObject_1$A || (templateObject_1$A = __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  padding: 8px;\n  box-sizing: border-box;\n  display: flex;\n\n  &:hover {\n    background: #ddd;\n  }\n\n  & > svg {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\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  padding: 8px;\n  box-sizing: border-box;\n  display: flex;\n\n  &:hover {\n    background: #ddd;\n  }\n\n  & > svg {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n"])));
+  var ExitCaptureStyledButton = styled.button(templateObject_1$y || (templateObject_1$y = __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  padding: 8px;\n  box-sizing: border-box;\n  display: flex;\n\n  &:hover {\n    background: #ddd;\n  }\n\n  & > svg {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\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  padding: 8px;\n  box-sizing: border-box;\n  display: flex;\n\n  &:hover {\n    background: #ddd;\n  }\n\n  & > svg {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n"])));
   var ExitCaptureButton = function ExitCaptureButton(_a) {
     var onClick = _a.onClick,
       className = _a.className;
@@ -16014,10 +16038,10 @@
       y2: "19.75"
     }))));
   };
-  var templateObject_1$A;
+  var templateObject_1$y;
 
-  var ButtonsRow$1 = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  display: flex;\n  gap: 0 15px;\n  justify-content: center;\n"], ["\n  display: flex;\n  gap: 0 15px;\n  justify-content: center;\n"])));
-  var templateObject_1$z;
+  var ButtonsRow = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  display: flex;\n  gap: 0 15px;\n  justify-content: center;\n"], ["\n  display: flex;\n  gap: 0 15px;\n  justify-content: center;\n"])));
+  var templateObject_1$x;
 
   function IdCaptureLoadingGraphic(props) {
     var isMobile = window.innerHeight > window.innerWidth;
@@ -16652,25 +16676,25 @@
       }
     }, verbiage.continueText))))));
   };
-  var OverlayInner$1 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n"], ["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n"])), function (props) {
+  var OverlayInner$1 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n"], ["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n"])), function (props) {
     var _a, _b, _c, _d;
     return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : '#ecedf3';
   }, function (props) {
     var _a, _b, _c, _d;
     return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.textColor) !== null && _d !== void 0 ? _d : 'black';
   });
-  var OverlayHeader$1 = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"])), function (props) {
+  var OverlayHeader$1 = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"])), function (props) {
     var _a;
     return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
   }, function (props) {
     return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
   });
-  var StyledGuidanceMessage$2 = styled(GuidanceMessage)(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
-  var StyledOverlayImageContainer$2 = styled(OverlayImageContainer)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  padding: 0 0 100px;\n\n  & > svg {\n    height: 100%;\n  }\n"], ["\n  padding: 0 0 100px;\n\n  & > svg {\n    height: 100%;\n  }\n"])));
-  var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  position: fixed;\n  bottom: 120px;\n  width: 100dvw;\n  display: flex;\n"], ["\n  position: fixed;\n  bottom: 120px;\n  width: 100dvw;\n  display: flex;\n"])));
-  var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  padding: 12px 18px;\n  margin: 0 auto;\n  font-size: 14px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n  padding: 12px 18px;\n  margin: 0 auto;\n  font-size: 14px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
-  var ContinuityCameraCheckbox$1 = styled.input(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
-  var StyledButtonsRow$a = styled(ButtonsRow$1)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  height: 100px;\n  color: ", ";\n  ", "\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100dvw;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  height: 100px;\n  color: ", ";\n  ", "\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100dvw;\n  box-sizing: border-box;\n"])), function (props) {
+  var StyledGuidanceMessage$2 = styled(GuidanceMessage)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
+  var StyledOverlayImageContainer$2 = styled(OverlayImageContainer)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  padding: 0 0 100px;\n\n  & > svg {\n    height: 100%;\n  }\n"], ["\n  padding: 0 0 100px;\n\n  & > svg {\n    height: 100%;\n  }\n"])));
+  var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  position: fixed;\n  bottom: 120px;\n  width: 100dvw;\n  display: flex;\n"], ["\n  position: fixed;\n  bottom: 120px;\n  width: 100dvw;\n  display: flex;\n"])));
+  var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  padding: 12px 18px;\n  margin: 0 auto;\n  font-size: 14px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n  padding: 12px 18px;\n  margin: 0 auto;\n  font-size: 14px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
+  var ContinuityCameraCheckbox$1 = styled.input(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
+  var StyledButtonsRow$a = styled(ButtonsRow)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  height: 100px;\n  color: ", ";\n  ", "\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100dvw;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  height: 100px;\n  color: ", ";\n  ", "\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100dvw;\n  box-sizing: border-box;\n"])), function (props) {
     var _a, _b, _c, _d;
     return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
   }, function (props) {
@@ -16704,10 +16728,10 @@
     var _a, _b, _c, _d, _e, _f;
     return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnBorder) ? "border: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.continueBtnBorder, ";") : '';
   });
-  var templateObject_1$y, templateObject_2$q, templateObject_3$l, templateObject_4$e, templateObject_5$9, templateObject_6$8, templateObject_7$6, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
+  var templateObject_1$w, templateObject_2$n, templateObject_3$i, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
 
-  var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"], ["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"])));
-  var ContinuityCameraCheckbox = styled.input(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
+  var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"], ["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"])));
+  var ContinuityCameraCheckbox = styled.input(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
   var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
     var _b, _c, _d, _e;
     var onDismissed = _a.onDismissed,
@@ -16818,7 +16842,7 @@
       }
     }, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
   };
-  var templateObject_1$x, templateObject_2$p;
+  var templateObject_1$v, templateObject_2$m;
 
   var components$1 = {
     "default": IdCaptureLoadingOverlayDefault,
@@ -16875,7 +16899,7 @@
     });
   };
 
-  var OverlayInstruction = styled.p(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  font-size: 18px;\n  margin: 30px 0;\n"], ["\n  font-size: 18px;\n  margin: 30px 0;\n"])));
+  var OverlayInstruction = styled.p(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  font-size: 18px;\n  margin: 30px 0;\n"], ["\n  font-size: 18px;\n  margin: 30px 0;\n"])));
   var IdCaptureSuccess = function IdCaptureSuccess(_a) {
     var capturedDocuments = _a.capturedDocuments,
       onSubmitClick = _a.onSubmitClick,
@@ -16910,7 +16934,7 @@
       className: classNames.imageContainer
     }, /*#__PURE__*/React.createElement(ImageRow, {
       className: classNames.imageRow
-    }, /*#__PURE__*/React.createElement(Heading$a, {
+    }, /*#__PURE__*/React.createElement(Heading$9, {
       className: classNames.heading
     }, verbiage.headingText), idCardFront && ( /*#__PURE__*/React.createElement(ImageCol$1, {
       className: classNames.imageCol
@@ -16944,7 +16968,7 @@
       alt: verbiage.passportText
     })), debugMode && ( /*#__PURE__*/React.createElement("pre", null, "Detection Score: ".concat(passport.detectionScore, "\nFocus Score: ").concat(passport.focusScore, "\nBounding Box: ").concat(JSON.stringify(passport.boundingBox)))))))), /*#__PURE__*/React.createElement(OverlayInstruction, {
       className: classNames.instruction
-    }, verbiage.instructionText), /*#__PURE__*/React.createElement(ButtonsRow$1, {
+    }, verbiage.instructionText), /*#__PURE__*/React.createElement(ButtonsRow, {
       className: classNames.buttonsRow
     }, /*#__PURE__*/React.createElement(LoaderButton, {
       className: classNames.retryBtn,
@@ -16961,17 +16985,17 @@
       finished: true
     }, submissionStatus === SubmissionStatus.SUBMITTING ? verbiage.submittingText : verbiage.submitText))));
   };
-  var Heading$a = styled.h1(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  margin-bottom: 12px;\n"], ["\n  margin-bottom: 12px;\n"])));
-  var ImagesContainer = styled(OverlayImageContainer)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  overflow-y: auto;\n"], ["\n  overflow-y: auto;\n"])));
-  var ImageRow = styled(OverlayImageRow)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  flex-direction: column;\n"], ["\n  flex-direction: column;\n"])));
-  var ImageCol$1 = styled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  max-height: none !important;\n"], ["\n  max-height: none !important;\n"])));
-  var ImageHeading = styled.h3(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  text-align: left;\n  margin-top: 24px;\n  margin-bottom: 8px;\n  font-size: 16px;\n  font-weight: normal;\n"], ["\n  text-align: left;\n  margin-top: 24px;\n  margin-bottom: 8px;\n  font-size: 16px;\n  font-weight: normal;\n"])));
-  var CapturedImageWrapper = styled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  border-radius: 6px;\n  padding: 4px;\n  background: white;\n  display: flex;\n"], ["\n  border: 1px solid\n    ", ";\n  border-radius: 6px;\n  padding: 4px;\n  background: white;\n  display: flex;\n"])), function (props) {
+  var Heading$9 = styled.h1(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  margin-bottom: 12px;\n"], ["\n  margin-bottom: 12px;\n"])));
+  var ImagesContainer = styled(OverlayImageContainer)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  overflow-y: auto;\n"], ["\n  overflow-y: auto;\n"])));
+  var ImageRow = styled(OverlayImageRow)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  flex-direction: column;\n"], ["\n  flex-direction: column;\n"])));
+  var ImageCol$1 = styled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  max-height: none !important;\n"], ["\n  max-height: none !important;\n"])));
+  var ImageHeading = styled.h3(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  text-align: left;\n  margin-top: 24px;\n  margin-bottom: 8px;\n  font-size: 16px;\n  font-weight: normal;\n"], ["\n  text-align: left;\n  margin-top: 24px;\n  margin-bottom: 8px;\n  font-size: 16px;\n  font-weight: normal;\n"])));
+  var CapturedImageWrapper = styled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  border-radius: 6px;\n  padding: 4px;\n  background: white;\n  display: flex;\n"], ["\n  border: 1px solid\n    ", ";\n  border-radius: 6px;\n  padding: 4px;\n  background: white;\n  display: flex;\n"])), function (props) {
     var _a, _b, _c;
     return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.success) === null || _b === void 0 ? void 0 : _b.imageBorderColor) !== null && _c !== void 0 ? _c : 'var(--idm-color-primary-400)';
   });
   var StyledImage = styled(CapturedDocumentImg)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 4px;\n"], ["\n  width: 100%;\n  border-radius: 4px;\n"])));
-  var templateObject_1$w, templateObject_2$o, templateObject_3$k, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$2;
+  var templateObject_1$u, templateObject_2$l, templateObject_3$h, templateObject_4$c, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$2;
 
   var CameraVideoTag = function CameraVideoTag(_a) {
     var _b;
@@ -17010,10 +17034,10 @@
       "$isRearFacing": (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing
     });
   };
-  var FullscreenVideoTag = styled.video(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n  z-index: -2;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n  z-index: -2;\n"])), function (props) {
+  var FullscreenVideoTag = styled.video(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n  z-index: -2;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n  z-index: -2;\n"])), function (props) {
     return props.$isRearFacing ? '' : 'scaleX(-1)';
   });
-  var templateObject_1$v;
+  var templateObject_1$t;
 
   function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
     var _this = this;
@@ -17048,10 +17072,10 @@
     return !skipSuccessScreen || skipSuccessScreenResolvedFalse;
   }
 
-  var CameraFeedWrapper = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+  var CameraFeedWrapper = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return props.$mode === 'snapToGuides' ? "display: flex;\n         position: absolute;\n         left: ".concat(props.$x, "px;\n         top: ").concat(props.$y, "px;\n         width: ").concat(props.$w, "px;\n         height: ").concat(props.$h, "px;") : "";
   });
-  var templateObject_1$u;
+  var templateObject_1$s;
 
   function setCanvasDimensions(canvas, width, height) {
     var _a;
@@ -17085,10 +17109,10 @@
     }
   });
 
-  var StyledPageContainer = styled(PageContainerDiv)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  z-index: 1000;\n"], ["\n  z-index: 1000;\n"])));
-  var GuidesContainer = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100dvw;\n  height: 100dvh;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100dvw;\n  height: 100dvh;\n"])));
-  var GuideCenterRow = styled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n  min-height: 0;\n  flex: 1;\n"], ["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n  min-height: 0;\n  flex: 1;\n"])));
-  var GuideRegion = styled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  position: relative;\n  z-index: 1000;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  position: relative;\n  z-index: 1000;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"])), function (props) {
+  var StyledPageContainer = styled(PageContainerDiv)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  z-index: 1000;\n"], ["\n  z-index: 1000;\n"])));
+  var GuidesContainer = styled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100dvw;\n  height: 100dvh;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100dvw;\n  height: 100dvh;\n"])));
+  var GuideCenterRow = styled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n  min-height: 0;\n  flex: 1;\n"], ["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n  min-height: 0;\n  flex: 1;\n"])));
+  var GuideRegion = styled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  position: relative;\n  z-index: 1000;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  position: relative;\n  z-index: 1000;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e;
     return (_e = (_a = props.$maskColor) !== null && _a !== void 0 ? _a : (_d = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.idCapture) === null || _c === void 0 ? void 0 : _c.guideOverlay) === null || _d === void 0 ? void 0 : _d.backgroundColor) !== null && _e !== void 0 ? _e : 'rgba(0, 0, 0, 0.5)';
   }, function (props) {
@@ -17099,13 +17123,13 @@
   }, function (props) {
     return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
   });
-  var Spacer = styled(GuideRegion)(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  display: block;\n  width: auto;\n"], ["\n  display: block;\n  width: auto;\n"])));
-  var GuideCenterRegion = styled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  ", "\n  ", "\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  max-height: 100%;\n  height: 100%;\n"], ["\n  ", "\n  ", "\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  max-height: 100%;\n  height: 100%;\n"])), function (props) {
+  var Spacer = styled(GuideRegion)(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  display: block;\n  width: auto;\n"], ["\n  display: block;\n  width: auto;\n"])));
+  var GuideCenterRegion = styled.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  ", "\n  ", "\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  max-height: 100%;\n  height: 100%;\n"], ["\n  ", "\n  ", "\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  max-height: 100%;\n  height: 100%;\n"])), function (props) {
     return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
   }, function (props) {
     return props.$isMirrored ? 'transform: scaleX(-1);' : '';
   });
-  var GuideCenterBorder = styled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  max-height: 100%;\n  min-height: 0;\n  position: relative;\n"], ["\n  box-sizing: border-box;\n  border: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  max-height: 100%;\n  min-height: 0;\n  position: relative;\n"])), function (props) {
+  var GuideCenterBorder = styled.div(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  max-height: 100%;\n  min-height: 0;\n  position: relative;\n"], ["\n  box-sizing: border-box;\n  border: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  max-height: 100%;\n  min-height: 0;\n  position: relative;\n"])), function (props) {
     var _a, _b;
     return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
   });
@@ -17233,9 +17257,9 @@
       return v;
     }).join(' ');
   };
-  var templateObject_1$t, templateObject_2$n, templateObject_3$j, templateObject_4$c, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9$1;
+  var templateObject_1$r, templateObject_2$k, templateObject_3$g, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$1, templateObject_9$1;
 
-  var FlippingImage = styled(GuideImage)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  backface-visibility: hidden;\n  transform-style: preserve-3d;\n  position: absolute;\n  height: 100%;\n  top: 0;\n  left: 50%;\n  transition: transform ", "s;\n  transform: translateX(-50%) ", ";\n"], ["\n  backface-visibility: hidden;\n  transform-style: preserve-3d;\n  position: absolute;\n  height: 100%;\n  top: 0;\n  left: 50%;\n  transition: transform ", "s;\n  transform: translateX(-50%) ", ";\n"])), function (props) {
+  var FlippingImage = styled(GuideImage)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  backface-visibility: hidden;\n  transform-style: preserve-3d;\n  position: absolute;\n  height: 100%;\n  top: 0;\n  left: 50%;\n  transition: transform ", "s;\n  transform: translateX(-50%) ", ";\n"], ["\n  backface-visibility: hidden;\n  transform-style: preserve-3d;\n  position: absolute;\n  height: 100%;\n  top: 0;\n  left: 50%;\n  transition: transform ", "s;\n  transform: translateX(-50%) ", ";\n"])), function (props) {
     return props.$transitionTime;
   }, function (props) {
     return props.$transforms;
@@ -17380,7 +17404,7 @@
       return v;
     }).join(' ');
   };
-  var templateObject_1$s;
+  var templateObject_1$q;
 
   var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
@@ -17516,11 +17540,11 @@
       imageVisible: imageVisible
     })));
   };
-  var CanvasWrapper$1 = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n  z-index: -1;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n  z-index: -1;\n"])), function (props) {
+  var CanvasWrapper$1 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n  z-index: -1;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n  z-index: -1;\n"])), function (props) {
     return props.$maskColor;
   });
-  var Canvas$1 = styled.canvas(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-  var templateObject_1$r, templateObject_2$m;
+  var Canvas$1 = styled.canvas(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
+  var templateObject_1$p, templateObject_2$j;
 
   function IdCaptureGuides(_a) {
     var _b, _c;
@@ -17665,11 +17689,11 @@
       onError: onError
     })));
   };
-  var StyledSpinner = styled(Spinner$1)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"], ["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"])));
-  var ImagePreviewWrapper = styled.div(templateObject_2$l || (templateObject_2$l = __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.div(templateObject_3$i || (templateObject_3$i = __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.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"], ["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"])));
-  var templateObject_1$q, templateObject_2$l, templateObject_3$i, templateObject_4$b;
+  var StyledSpinner = styled(Spinner$1)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"], ["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"])));
+  var ImagePreviewWrapper = styled.div(templateObject_2$i || (templateObject_2$i = __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.div(templateObject_3$f || (templateObject_3$f = __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.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"], ["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"])));
+  var templateObject_1$o, templateObject_2$i, templateObject_3$f, templateObject_4$a;
 
   var documentCaptureInitialState = {
     documents: [],
@@ -18025,11 +18049,11 @@
       ref: canvasRef
     }));
   };
-  var CanvasWrapper = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n"], ["\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
+  var CanvasWrapper = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n"], ["\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
     return props.$maskColor;
   });
-  var Canvas = styled.canvas(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-  var templateObject_1$p, templateObject_2$k;
+  var Canvas = styled.canvas(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
+  var templateObject_1$n, templateObject_2$h;
 
   var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
     var _b, _c, _d, _e, _f, _g, _h;
@@ -18133,7 +18157,7 @@
     }, /*#__PURE__*/React.createElement(HeadingRow, {
       "$maskColor": maskColor,
       className: classNames.headingRow
-    }, /*#__PURE__*/React.createElement(Heading$9, {
+    }, /*#__PURE__*/React.createElement(Heading$8, {
       className: classNames.heading
     }, verbiage.headingText)), /*#__PURE__*/React.createElement(DocumentCaptureGuideOverlay, {
       aspectRatio: aspectRatio,
@@ -18179,21 +18203,21 @@
       disabled: !cameraReady || capturing
     }, !cameraReady ? verbiage.loadingBtnText : capturing ? verbiage.capturingBtnText : verbiage.captureBtnText))))));
   };
-  var CaptureContainer = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--app-height);\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--app-height);\n"])));
-  var HeadingRow = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  background: ", ";\n  text-align: center;\n  color: white;\n"], ["\n  background: ", ";\n  text-align: center;\n  color: white;\n"])), function (props) {
+  var CaptureContainer = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--app-height);\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--app-height);\n"])));
+  var HeadingRow = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  background: ", ";\n  text-align: center;\n  color: white;\n"], ["\n  background: ", ";\n  text-align: center;\n  color: white;\n"])), function (props) {
     return props.$maskColor;
   });
-  var Heading$9 = styled.h1(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  font-size: 22px;\n"], ["\n  font-size: 22px;\n"])));
-  var FooterRow = styled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 0 20px 20px;\n  height: auto;\n  color: white;\n"], ["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 0 20px 20px;\n  height: auto;\n  color: white;\n"])), function (props) {
+  var Heading$8 = styled.h1(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  font-size: 22px;\n"], ["\n  font-size: 22px;\n"])));
+  var FooterRow = styled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 0 20px 20px;\n  height: auto;\n  color: white;\n"], ["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 0 20px 20px;\n  height: auto;\n  color: white;\n"])), function (props) {
     return props.$maskColor;
   });
-  var Instructions = styled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  max-height: ", ";\n  overflow-y: auto;\n"], ["\n  max-height: ", ";\n  overflow-y: auto;\n"])), function (props) {
+  var Instructions = styled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  max-height: ", ";\n  overflow-y: auto;\n"], ["\n  max-height: ", ";\n  overflow-y: auto;\n"])), function (props) {
     var _a, _b, _c;
     return (_c = (_b = (_a = props.theme.documentCapture) === null || _a === void 0 ? void 0 : _a.instructions) === null || _b === void 0 ? void 0 : _b.maxHeight) !== null && _c !== void 0 ? _c : '8rem';
   });
-  var StyledButtonsRow$9 = styled(ButtonsRow$1)(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  padding-top: 20px;\n"], ["\n  padding-top: 20px;\n"])));
-  var PreviewImage = styled.img(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"])));
-  var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$3;
+  var StyledButtonsRow$9 = styled(ButtonsRow)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  padding-top: 20px;\n"], ["\n  padding-top: 20px;\n"])));
+  var PreviewImage = styled.img(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"])));
+  var templateObject_1$m, templateObject_2$g, templateObject_3$e, templateObject_4$9, templateObject_5$5, templateObject_6$4, templateObject_7$2;
 
   var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
     var onSuccess = _a.onSuccess,
@@ -18413,7 +18437,7 @@
       className: classNames.container
     }, /*#__PURE__*/React.createElement(StyledOverlayInner$2, {
       className: classNames.inner
-    }, !silentFallback && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading$8, {
+    }, !silentFallback && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading$7, {
       className: classNames.heading
     }, verbiage.headingText), /*#__PURE__*/React.createElement(Description$3, {
       className: classNames.description
@@ -18462,13 +18486,13 @@
       }
     }, verbiage.doneBtnText))))));
   };
-  var StyledOverlayInner$2 = styled(OverlayInner$2)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-  var Heading$8 = styled.h3(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var Description$3 = styled.p(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var Instruction = styled.p(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
-  var ImageCol = styled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  flex-basis: 0;\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  flex-basis: 0;\n"])));
-  var StyledButtonsRow$8 = styled(ButtonsRow$1)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-  var templateObject_1$n, templateObject_2$i, templateObject_3$g, templateObject_4$9, templateObject_5$5, templateObject_6$4;
+  var StyledOverlayInner$2 = styled(OverlayInner$2)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
+  var Heading$7 = styled.h3(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var Description$3 = styled.p(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var Instruction = styled.p(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
+  var ImageCol = styled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  flex-basis: 0;\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  flex-basis: 0;\n"])));
+  var StyledButtonsRow$8 = styled(ButtonsRow)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+  var templateObject_1$l, templateObject_2$f, templateObject_3$d, templateObject_4$8, templateObject_5$4, templateObject_6$3;
 
   var IdCaptureWizard = function IdCaptureWizard(_a) {
     var _b, _c, _d, _e, _f, _g;
@@ -18829,776 +18853,144 @@
     })));
   };
 
-  function SelfieCaptureLoadingGraphic(_a) {
-    var _b, _c, _d;
-    var _e = _a.width,
-      width = _e === void 0 ? 840 : _e,
-      _f = _a.height,
-      height = _f === void 0 ? 740 : _f,
-      className = _a.className;
-    var _g = React.useState(1),
-      frame = _g[0],
-      setFrame = _g[1];
-    React.useEffect(function () {
-      var i = setInterval(function () {
-        setFrame(function (n) {
-          return (n + 1) % 10;
+  var FaceCaptureGuideContainer = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1000;\n  width: 100%;\n  height: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  z-index: 1000;\n  width: 100%;\n  height: 100%;\n  display: flex;\n"])));
+  var FaceCaptureGuideOval = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  border-width: ", "px;\n  border-color: ", ";\n  border-style: solid;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1.618;\n  height: 50%;\n  margin: auto;\n"], ["\n  border-width: ", "px;\n  border-color: ", ";\n  border-style: solid;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1.618;\n  height: 50%;\n  margin: auto;\n"])), function (props) {
+    return props.$borderWidth;
+  }, function (props) {
+    var _a, _b, _c, _d;
+    return (_d = (_a = props.$borderColor) !== null && _a !== void 0 ? _a : (_c = (_b = props.theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.guides) === null || _c === void 0 ? void 0 : _c["".concat(props.$variant, "Color")]) !== null && _d !== void 0 ? _d : 'white';
+  });
+  var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
+    var _b = _a.classNames,
+      classNames = _b === void 0 ? {} : _b,
+      _c = _a.variant,
+      variant = _c === void 0 ? 'unsatisfied' : _c,
+      _d = _a.borderWidth,
+      borderWidth = _d === void 0 ? 3 : _d,
+      borderColor = _a.borderColor;
+    return /*#__PURE__*/React.createElement(FaceCaptureGuideContainer, {
+      className: classNames.container
+    }, /*#__PURE__*/React.createElement(FaceCaptureGuideOval, {
+      className: classNames.oval,
+      "$variant": variant,
+      "$borderWidth": borderWidth,
+      "$borderColor": borderColor
+    }));
+  };
+  var templateObject_1$k, templateObject_2$e;
+
+  var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
+    start: function start() {
+      return null;
+    },
+    stop: function stop() {
+      return null;
+    },
+    onPredictionMade: function onPredictionMade() {
+      return null;
+    },
+    canvasRef: {
+      current: null
+    },
+    ready: false,
+    error: null,
+    modelDownloadProgress: 0
+  });
+  function SelfieGuidanceModelsProvider(_a) {
+    var _this = this;
+    var _b = _a.autoStart,
+      autoStart = _b === void 0 ? true : _b,
+      children = _a.children,
+      throttleMs = _a.throttleMs,
+      onModelError = _a.onModelError,
+      _c = _a.modelLoadTimeoutMs,
+      modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c;
+    var _d = React.useContext(CameraStateContext),
+      videoRef = _d.videoRef,
+      videoLoaded = _d.videoLoaded,
+      cameraReady = _d.cameraReady;
+    var canvasRef = React.useRef(null);
+    var onPredictionHandler = React.useRef();
+    var _e = useLoadFaceDetector({
+        onModelError: onModelError,
+        modelLoadTimeoutMs: modelLoadTimeoutMs
+      }),
+      detector = _e.detector,
+      ready = _e.ready,
+      modelDownloadProgress = _e.modelDownloadProgress,
+      modelError = _e.modelError;
+    var _f = useFrameLoop(React.useCallback(function () {
+        return __awaiter(_this, void 0, void 0, function () {
+          var vw, vh, ctx, faces;
+          var _a;
+          return __generator(this, function (_b) {
+            if (!videoLoaded || !cameraReady || !ready || modelError || !videoRef.current || !detector.current || !canvasRef.current) return [2 /*return*/];
+            vw = videoRef.current.videoWidth;
+            vh = videoRef.current.videoHeight;
+            ctx = canvasRef.current.getContext('2d');
+            canvasRef.current.width = vw;
+            canvasRef.current.height = vh;
+            if (ctx && videoRef.current.readyState === 4) {
+              ctx.translate(vw, 0);
+              ctx.scale(-1, 1);
+              ctx.drawImage(videoRef.current, 0, 0, vw, vh);
+              // Detectors can throw errors, for example when using custom URLs that
+              // contain a model that doesn't provide the expected output.
+              try {
+                faces = makeFaceDetectorPrediction(detector.current, canvasRef.current).faces;
+                (_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, faces);
+              } catch (e) {
+                error('caught face detection error', e);
+              }
+            }
+            return [2 /*return*/];
+          });
         });
-      }, 750);
+      }, [cameraReady, detector, modelError, ready, videoLoaded, videoRef]), {
+        throttleMs: throttleMs,
+        autoStart: autoStart
+      }),
+      start = _f.start,
+      stop = _f.stop;
+    var onPredictionMade = React.useCallback(function (handler) {
+      onPredictionHandler.current = handler;
+    }, []);
+    var value = React.useMemo(function () {
+      return {
+        start: start,
+        stop: stop,
+        ready: ready,
+        canvasRef: canvasRef,
+        onPredictionMade: onPredictionMade,
+        error: modelError,
+        modelDownloadProgress: modelDownloadProgress
+      };
+    }, [modelError, modelDownloadProgress, onPredictionMade, ready, start, stop]);
+    return /*#__PURE__*/React__namespace.createElement(SelfieGuidanceModelsContext.Provider, {
+      value: value
+    }, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
+      ref: canvasRef
+    }), children);
+  }
+
+  var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger, shouldStart) {
+    if (shouldStart === void 0) {
+      shouldStart = true;
+    }
+    var _a = React.useState(false),
+      timedOut = _a[0],
+      setTimedOut = _a[1];
+    var _b = React.useState(),
+      timeoutStartedAt = _b[0],
+      setTimeoutStartedAt = _b[1];
+    React.useEffect(function () {
+      if (!durationMs || !shouldStart) return;
+      setTimeoutStartedAt(new Date());
+      var timer = setTimeout(function () {
+        setTimedOut(true);
+      }, durationMs);
       return function () {
-        clearInterval(i);
-      };
-    }, []);
-    var theme = styled.useTheme();
-    var satisfiedColor = (_d = (_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.guides) === null || _c === void 0 ? void 0 : _c.satisfiedColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
-    return /*#__PURE__*/React.createElement("svg", {
-      width: width,
-      height: height,
-      className: className,
-      viewBox: "0 0 840 740",
-      fill: "none",
-      preserveAspectRatio: "xMidYMax slice",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("g", {
-      clipPath: "url(#clip0_428_1188)"
-    }, /*#__PURE__*/React.createElement("mask", {
-      id: "mask0_428_1188",
-      style: {
-        maskType: 'alpha'
-      },
-      maskUnits: "userSpaceOnUse",
-      x: "0",
-      y: "0",
-      width: "840",
-      height: "740"
-    }, /*#__PURE__*/React.createElement("rect", {
-      width: "840",
-      height: "740",
-      fill: "#D9D9D9"
-    })), /*#__PURE__*/React.createElement("g", {
-      mask: "url(#mask0_428_1188)"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M503.781 449.497C491.561 503.154 458.442 541.609 419.561 541.609C380.68 541.609 347.492 503.015 335.272 449.358L344.645 412.916L347.492 402.019H491.561L502.253 443.667L503.225 447.415L503.781 449.497Z",
-      fill: "#D2D4DA"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M574.88 244.97C647.073 163.885 598.921 362.155 558.945 338.928C488.709 298.211 574.88 244.97 574.88 244.97Z",
-      fill: "#F7A69C"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M816.983 742.838C779.698 781.432 736.86 814.612 689.786 841.127C617.161 882.012 534.399 906.862 446.153 911.027C437.335 911.513 428.448 911.721 419.491 911.721C374.986 911.721 331.731 906.446 290.281 896.519C232.514 882.706 178.358 859.8 129.271 829.397C89.9033 805.033 53.9382 775.948 22 742.838L31.512 705.355C45.8842 649.061 90.2505 605.33 146.837 591.795L153.085 590.337L222.447 573.747L241.401 569.235C249.386 567.292 257.023 564.585 264.244 561.114C270.285 558.199 276.047 554.797 281.463 550.91C287.295 546.745 292.78 542.025 297.71 536.819C310.971 522.867 320.761 505.653 325.76 486.286L333.119 457.688L335.064 449.983L335.202 449.358L344.645 412.916L347.422 402.019H491.491L502.253 443.667L503.225 447.415L503.78 449.497V449.983L505.863 457.757L513.223 486.286C520.097 512.802 535.996 535.5 557.589 550.91C569.393 559.448 582.932 565.765 597.581 569.235L615.078 573.4L692.146 591.795C748.732 605.33 793.099 649.061 807.471 705.355L816.983 742.838Z",
-      fill: "#F7A69C"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M503.781 449.497C491.561 503.154 458.442 541.609 419.561 541.609C380.68 541.609 347.492 503.015 335.272 449.358L344.645 412.916L347.492 402.019H491.561L502.253 443.667L503.225 447.415L503.781 449.497Z",
-      fill: "#DC968D"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M264.123 244.97C191.93 163.885 240.082 362.155 280.058 338.928C350.294 298.211 264.123 244.97 264.123 244.97Z",
-      fill: "#F7A69C"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M586.473 187.324C586.473 193.432 586.126 199.402 585.432 205.371C584.876 210.785 582.446 233.9 578.141 263.331C575.781 279.713 572.726 297.969 569.115 316.294C569.115 316.502 569.115 316.78 568.976 316.988C560.159 361.621 547.731 406.045 531.484 422.219C513.154 440.544 498.435 457.203 481.632 469.211C464.83 481.289 446.014 488.786 419.631 488.786C393.247 488.786 374.431 481.289 357.629 469.211C340.896 457.203 326.107 440.544 307.778 422.219C291.531 405.976 279.103 361.482 270.216 316.918C270.216 316.918 270.216 316.71 270.216 316.641C269.105 310.879 268.063 305.118 267.022 299.426C266.605 297.066 266.189 294.706 265.772 292.346C264.036 282.351 262.509 272.563 261.12 263.401C256.121 229.596 253.691 204.122 253.691 204.122C253.136 198.638 252.858 193.016 252.858 187.324C252.858 185.866 252.858 184.408 252.858 182.951C253.205 169.832 255.01 157.06 258.274 144.843C258.412 144.287 258.551 143.732 258.69 143.177C277.228 75.4294 337.425 24.8271 410.049 20.8011C413.243 20.5928 416.368 20.5234 419.631 20.5234C465.733 20.5234 507.461 39.1956 537.663 69.3904C563.769 95.4205 581.266 130.127 585.501 168.79C586.195 174.899 586.542 181.077 586.542 187.324H586.473Z",
-      fill: "#FEAEA5"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M445.867 337.327C445.867 348.849 434.133 358.151 419.622 358.151C405.111 358.151 393.447 348.849 393.447 337.327C393.447 335.939 393.586 334.55 394.002 333.301C396.293 342.88 406.916 350.099 419.622 350.099C432.328 350.099 443.02 342.88 445.312 333.301C445.728 334.62 445.867 335.939 445.867 337.327Z",
-      fill: "#F7A69C"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M817.053 743.187C716.586 847.238 575.642 912 419.561 912C263.481 912 122.467 847.238 22.0698 743.118L31.5818 705.704C45.954 649.34 90.3203 605.61 146.906 592.074L222.655 574.027L241.471 569.515C249.942 567.502 258.135 564.517 265.772 560.699C304.237 601.653 358.879 627.267 419.561 627.267C480.244 627.267 534.886 601.653 573.351 560.699C580.988 564.448 589.111 567.502 597.651 569.515L614.106 573.471L692.216 592.074C748.802 605.61 793.168 649.34 807.471 705.704L817.053 743.187Z",
-      fill: "#6E7174"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M614.106 573.471C597.165 594.018 534.886 659.058 419.561 663.639C286.671 668.984 226.266 579.441 222.655 574.027L241.471 569.515C249.942 567.502 258.134 564.517 265.772 560.699C304.236 601.653 358.879 627.267 419.561 627.267C480.244 627.267 534.886 601.653 573.35 560.699C580.988 564.448 589.111 567.502 597.651 569.515L614.106 573.471Z",
-      fill: "#555A5E"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M249.898 196.144C249.898 249.777 270.317 315.623 270.317 315.623C270.317 315.623 266.862 205.572 314.892 164.108C347.514 135.946 374.019 167.565 417.115 167.565C456.137 167.565 492.558 136.481 525.436 164.108C578.852 208.994 568.738 315.623 568.738 315.623C568.738 315.623 589.157 250.557 589.157 196.144C589.157 76.4319 542.638 20 417.115 20C302.8 20 249.898 75.8365 249.898 196.144Z",
-      fill: "#525252"
-    })), frame >= 8 ? ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
-      d: "M565.5 295C565.5 350.583 549.016 400.803 522.488 437.067C495.958 473.332 459.517 495.5 419.5 495.5C379.483 495.5 343.042 473.332 316.512 437.067C289.984 400.803 273.5 350.583 273.5 295C273.5 239.417 289.984 189.197 316.512 152.933C343.042 116.668 379.483 94.5 419.5 94.5C459.517 94.5 495.958 116.668 522.488 152.933C549.016 189.197 565.5 239.417 565.5 295Z",
-      stroke: satisfiedColor,
-      strokeWidth: "5"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "518.5",
-      cy: "438.5",
-      r: "25.5",
-      fill: satisfiedColor
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M504 440.5L512 448L531 427",
-      stroke: "white",
-      strokeWidth: "5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }))) : ( /*#__PURE__*/React.createElement(React.Fragment, null, frame > 2 && ( /*#__PURE__*/React.createElement(React.Fragment, null, frame > 3 && ( /*#__PURE__*/React.createElement(React.Fragment, null, frame > 4 && ( /*#__PURE__*/React.createElement(React.Fragment, null, frame > 5 && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
-      d: "M298.5 182.5L419 164.5L540 182",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "419",
-      cy: "165",
-      r: "7",
-      fill: "white"
-    }))), /*#__PURE__*/React.createElement("path", {
-      d: "M565.5 295C565.5 350.583 549.016 400.803 522.488 437.067C495.958 473.332 459.517 495.5 419.5 495.5C379.483 495.5 343.042 473.332 316.512 437.067C289.984 400.803 273.5 350.583 273.5 295C273.5 239.417 289.984 189.197 316.512 152.933C343.042 116.668 379.483 94.5 419.5 94.5C459.517 94.5 495.958 116.668 522.488 152.933C549.016 189.197 565.5 239.417 565.5 295Z",
-      stroke: "white",
-      strokeOpacity: frame > 7 ? 0.8 : frame > 5 ? 0.3 : 0.1,
-      strokeWidth: "5"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M299.939 262.805L419 478.5L538.5 261.5",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M298.5 182.5L418.871 230.054L540 182",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M298.5 182.5L299.939 262.805",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M540.001 182L538.501 261.5",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "299.914",
-      cy: "182",
-      r: "7",
-      fill: "white"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "540",
-      cy: "182",
-      r: "7",
-      fill: "white"
-    }))), /*#__PURE__*/React.createElement("path", {
-      d: "M418.828 230L419 342.5",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M300 263.001L419 342.501",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M538.5 261.5L419 342.5",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M301.5 409L419 342.5",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M536.5 410L419 342.5",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M300 263L419 230",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M538.5 261.5L419 230",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "419",
-      cy: "229.971",
-      r: "7",
-      fill: "white"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "419",
-      cy: "342.4",
-      r: "7",
-      fill: "white"
-    }))), /*#__PURE__*/React.createElement("path", {
-      d: "M538.5 261.5L536.5 410",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M419 478.5L536.5 410",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "537",
-      cy: "263",
-      r: "7",
-      fill: "white"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "537",
-      cy: "409",
-      r: "7",
-      fill: "white"
-    }))), frame > 1 && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
-      d: "M301.501 409L300.001 263",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M301.501 409L419.001 478.5",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "419",
-      cy: "477.576",
-      r: "7",
-      fill: "white"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "301.914",
-      cy: "263",
-      r: "7",
-      fill: "white"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "301.444",
-      cy: "409",
-      r: "7",
-      fill: "white"
-    })))))), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-      id: "clip0_428_1188"
-    }, /*#__PURE__*/React.createElement("rect", {
-      width: "840",
-      height: "740",
-      fill: "white"
-    }))));
-  }
-  var HeadGuideSvg = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-    var _b = _a.borderColor,
-      borderColor = _b === void 0 ? 'white' : _b,
-      _c = _a.borderOpacity,
-      borderOpacity = _c === void 0 ? 0.8 : _c,
-      _d = _a.borderWidth,
-      borderWidth = _d === void 0 ? 5 : _d,
-      _e = _a.status,
-      status = _e === void 0 ? 'ready' : _e,
-      props = __rest(_a, ["borderColor", "borderOpacity", "borderWidth", "status"]);
-    return /*#__PURE__*/React.createElement("svg", _assign({}, props, {
-      ref: ref,
-      viewBox: "271 92 297 406",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }), /*#__PURE__*/React.createElement("g", {
-      clipPath: "url(#clip0_428_1188)"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M565.5 295C565.5 350.583 549.016 400.803 522.488 437.067C495.958 473.332 459.517 495.5 419.5 495.5C379.483 495.5 343.042 473.332 316.512 437.067C289.984 400.803 273.5 350.583 273.5 295C273.5 239.417 289.984 189.197 316.512 152.933C343.042 116.668 379.483 94.5 419.5 94.5C459.517 94.5 495.958 116.668 522.488 152.933C549.016 189.197 565.5 239.417 565.5 295Z",
-      stroke: borderColor,
-      strokeOpacity: borderOpacity,
-      strokeWidth: borderWidth
-    }), status === 'success' && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", {
-      cx: "518.5",
-      cy: "438.5",
-      r: "25.5",
-      fill: borderColor
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M504 440.5L512 448L531 427",
-      stroke: "white",
-      strokeWidth: "5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }))), status === 'failure' && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", {
-      cx: "518.5",
-      cy: "438.5",
-      r: "25.5",
-      fill: borderColor
-    }), /*#__PURE__*/React.createElement("image", {
-      href: "https://websdk-cdn-dev.idmission.com/assets/x.svg",
-      x: "507",
-      y: "427",
-      width: "24",
-      height: "24"
-    })))), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-      id: "clip0_428_1188"
-    }, /*#__PURE__*/React.createElement("rect", {
-      width: "840",
-      height: "740",
-      fill: "white"
-    }))));
-  });
-  HeadGuideSvg.displayName = 'HeadGuideSvg';
-  var PulsingHeadGuideContainer = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  left: 0;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n\n  & > .pulse {\n    position: absolute;\n    animation: glow-grow 2s ease-out infinite;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n\n  & > .pulseOrigin {\n    position: relative;\n  }\n\n  @keyframes glow-grow {\n    0% {\n      opacity: 0;\n      transform: scale(1);\n    }\n    80% {\n      opacity: 1;\n    }\n    100% {\n      transform: scale(2);\n      opacity: 0;\n    }\n  }\n"], ["\n  display: flex;\n  position: absolute;\n  left: 0;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n\n  & > .pulse {\n    position: absolute;\n    animation: glow-grow 2s ease-out infinite;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n\n  & > .pulseOrigin {\n    position: relative;\n  }\n\n  @keyframes glow-grow {\n    0% {\n      opacity: 0;\n      transform: scale(1);\n    }\n    80% {\n      opacity: 1;\n    }\n    100% {\n      transform: scale(2);\n      opacity: 0;\n    }\n  }\n"])));
-  function HeadGuide(_a) {
-    var _b;
-    var _c = _a.status,
-      status = _c === void 0 ? 'ready' : _c,
-      props = __rest(_a, ["status"]);
-    var ref = React.useRef(null);
-    var parentRef = React.useRef(null);
-    var _d = React.useState(undefined),
-      refBox = _d[0],
-      setRefBox = _d[1];
-    React.useLayoutEffect(function () {
-      if (!ref.current || !parentRef.current) return;
-      var box = ref.current.getBoundingClientRect();
-      var parentBox = parentRef.current.getBoundingClientRect();
-      setRefBox(_assign(_assign({}, box), {
-        top: box.top - parentBox.top,
-        left: box.left - parentBox.left
-      }));
-    }, []);
-    return /*#__PURE__*/React.createElement(PulsingHeadGuideContainer, {
-      ref: parentRef
-    }, status === 'ready' && refBox && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeadGuideSvg, _assign({}, props, {
-      className: "pulse",
-      borderOpacity: 0.25,
-      borderColor: "#287ec6",
-      style: refBox
-    })), /*#__PURE__*/React.createElement(HeadGuideSvg, _assign({}, props, {
-      className: "pulse",
-      borderOpacity: 0.25,
-      borderColor: "#287ec6",
-      style: refBox
-    })), /*#__PURE__*/React.createElement(HeadGuideSvg, _assign({}, props, {
-      className: "pulse",
-      borderOpacity: 0.25,
-      borderColor: "#287ec6",
-      style: refBox
-    })))), /*#__PURE__*/React.createElement(HeadGuideSvg, _assign({}, props, {
-      ref: ref,
-      borderOpacity: 1,
-      className: "pulseOrigin ".concat((_b = props.className) !== null && _b !== void 0 ? _b : ''),
-      status: status
-    })));
-  }
-  var RelativeSvg = styled.svg(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
-  var RelativeSvgContainer = styled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: ", ";\n"], ["\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: ", ";\n"])), function (props) {
-    return props.$verticalAlign;
-  });
-  function SelfieCaptureAnimatedMask(_a) {
-    var _b, _c, _d, _e, _f, _g, _h;
-    var _j = _a.frame,
-      frame = _j === void 0 ? 0 : _j,
-      _k = _a.borderWidth,
-      borderWidth = _k === void 0 ? 5 : _k,
-      _l = _a.borderColor,
-      borderColor = _l === void 0 ? 'white' : _l,
-      _m = _a.borderOpacity,
-      borderOpacity = _m === void 0 ? 0.8 : _m,
-      _o = _a.verticalAlign,
-      verticalAlign = _o === void 0 ? 'center' : _o,
-      _p = _a.status,
-      status = _p === void 0 ? 'ready' : _p,
-      props = __rest(_a, ["frame", "borderWidth", "borderColor", "borderOpacity", "verticalAlign", "status"]);
-    var ref = React.useRef(null);
-    var theme = styled.useTheme();
-    var satisfiedColor = (_d = (_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.guides) === null || _c === void 0 ? void 0 : _c.satisfiedColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
-    var negativeColor = (_g = (_f = (_e = theme.selfieCapture) === null || _e === void 0 ? void 0 : _e.guides) === null || _f === void 0 ? void 0 : _f.failureColor) !== null && _g !== void 0 ? _g : 'var(--idm-color-negative-600)';
-    var statusBorderColor = status === 'failure' ? negativeColor : status === 'success' ? satisfiedColor : borderColor;
-    return /*#__PURE__*/React.createElement(RelativeSvgContainer, {
-      "$verticalAlign": verticalAlign
-    }, /*#__PURE__*/React.createElement(HeadGuide, _assign({
-      ref: ref,
-      borderOpacity: borderOpacity,
-      borderWidth: borderWidth,
-      borderColor: statusBorderColor,
-      status: status
-    }, props)), /*#__PURE__*/React.createElement(RelativeSvg, _assign({}, props, {
-      viewBox: "271 92 297 406",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      style: _assign(_assign({}, props.style), (_h = ref.current) === null || _h === void 0 ? void 0 : _h.getBoundingClientRect())
-    }), status === 'processing' && ( /*#__PURE__*/React.createElement("g", {
-      clipPath: "url(#clip0_428_1188)"
-    }, frame > 1 && ( /*#__PURE__*/React.createElement(React.Fragment, null, frame > 2 && ( /*#__PURE__*/React.createElement(React.Fragment, null, frame > 3 && ( /*#__PURE__*/React.createElement(React.Fragment, null, frame > 4 && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
-      d: "M298.5 182.5L419 164.5L540 182",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "419",
-      cy: "165",
-      r: "7",
-      fill: "white"
-    }))), /*#__PURE__*/React.createElement("path", {
-      d: "M299.939 262.805L419 478.5L538.5 261.5",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M298.5 182.5L418.871 230.054L540 182",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M298.5 182.5L299.939 262.805",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M540.001 182L538.501 261.5",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "299.914",
-      cy: "182",
-      r: "7",
-      fill: "white"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "540",
-      cy: "182",
-      r: "7",
-      fill: "white"
-    }))), /*#__PURE__*/React.createElement("path", {
-      d: "M418.828 230L419 342.5",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M300 263.001L419 342.501",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M538.5 261.5L419 342.5",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M301.5 409L419 342.5",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M536.5 410L419 342.5",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M300 263L419 230",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M538.5 261.5L419 230",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "419",
-      cy: "229.971",
-      r: "7",
-      fill: "white"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "419",
-      cy: "342.4",
-      r: "7",
-      fill: "white"
-    }))), /*#__PURE__*/React.createElement("path", {
-      d: "M538.5 261.5L536.5 410",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M419 478.5L536.5 410",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "537",
-      cy: "263",
-      r: "7",
-      fill: "white"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "537",
-      cy: "409",
-      r: "7",
-      fill: "white"
-    }))), frame > 0 && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
-      d: "M301.501 409L300.001 263",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 1 && frame < 6 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M301.501 409L419.001 478.5",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: frame > 1 && frame < 6 ? 0.3 : 1
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "419",
-      cy: "477.576",
-      r: "7",
-      fill: "white"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "301.914",
-      cy: "263",
-      r: "7",
-      fill: "white"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "301.444",
-      cy: "409",
-      r: "7",
-      fill: "white"
-    }))))), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-      id: "clip0_428_1188"
-    }, /*#__PURE__*/React.createElement("rect", {
-      width: "840",
-      height: "740",
-      fill: "white"
-    })))));
-  }
-  function SelfieCaptureAnimatedMaskWithStatus(_a) {
-    var _b = _a.status,
-      status = _b === void 0 ? 'ready' : _b,
-      props = __rest(_a, ["status"]);
-    var _c = React.useState(1),
-      frame = _c[0],
-      setFrame = _c[1];
-    React.useEffect(function () {
-      if (status !== 'processing') {
-        setFrame(0);
-        return;
-      }
-      setFrame(1);
-      var interval = setInterval(function () {
-        setFrame(function (n) {
-          return (n + 1) % 6;
-        });
-      }, 250);
-      return function () {
-        clearInterval(interval);
-      };
-    }, [status]);
-    return /*#__PURE__*/React.createElement(SelfieCaptureAnimatedMask, _assign({}, props, {
-      frame: frame,
-      status: status
-    }));
-  }
-  var templateObject_1$m, templateObject_2$h, templateObject_3$f;
-
-  var FaceCaptureGuideContainer = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  position: fixed;\n  z-index: 1000;\n  width: 100dvw;\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  box-sizing: border-box;\n"], ["\n  position: fixed;\n  z-index: 1000;\n  width: 100dvw;\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  box-sizing: border-box;\n"
-  // const FaceCaptureGuideOval = styled.div<{
-  //   $variant: FaceCaptureGuideOverlayVariant
-  //   $borderWidth: number
-  //   $borderColor?: string
-  // }>`
-  //   border-width: ${(props) => props.$borderWidth}px;
-  //   border-color: ${(props) =>
-  //     props.$borderColor ??
-  //     props.theme.selfieCapture?.guides?.[`${props.$variant}Color`] ??
-  //     'white'};
-  //   border-style: solid;
-  //   border-radius: 50%;
-  //   aspect-ratio: 1 / 1.618;
-  //   height: 50%;
-  //   margin: auto;
-  // `
-  ])));
-  // const FaceCaptureGuideOval = styled.div<{
-  //   $variant: FaceCaptureGuideOverlayVariant
-  //   $borderWidth: number
-  //   $borderColor?: string
-  // }>`
-  //   border-width: ${(props) => props.$borderWidth}px;
-  //   border-color: ${(props) =>
-  //     props.$borderColor ??
-  //     props.theme.selfieCapture?.guides?.[`${props.$variant}Color`] ??
-  //     'white'};
-  //   border-style: solid;
-  //   border-radius: 50%;
-  //   aspect-ratio: 1 / 1.618;
-  //   height: 50%;
-  //   margin: auto;
-  // `
-  var StyledSelfieCaptureAnimatedMask$1 = styled(SelfieCaptureAnimatedMaskWithStatus)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  max-width: 100%;\n  max-height: 100%;\n  height: 60%;\n"], ["\n  max-width: 100%;\n  max-height: 100%;\n  height: 60%;\n"])));
-  var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
-    var _b = _a.classNames,
-      classNames = _b === void 0 ? {} : _b,
-      _c = _a.status,
-      status = _c === void 0 ? 'ready' : _c,
-      _d = _a.borderWidth,
-      borderWidth = _d === void 0 ? 5 : _d,
-      _e = _a.borderColor,
-      borderColor = _e === void 0 ? 'white' : _e,
-      _f = _a.borderOpacity,
-      borderOpacity = _f === void 0 ? 0.8 : _f;
-    return /*#__PURE__*/React.createElement(FaceCaptureGuideContainer, {
-      className: classNames.container
-    }, /*#__PURE__*/React.createElement(StyledSelfieCaptureAnimatedMask$1, {
-      status: status,
-      borderColor: borderColor,
-      borderWidth: borderWidth,
-      borderOpacity: borderOpacity,
-      verticalAlign: "center"
-    }));
-  };
-  var templateObject_1$l, templateObject_2$g;
-
-  var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
-    start: function start() {
-      return null;
-    },
-    stop: function stop() {
-      return null;
-    },
-    onPredictionMade: function onPredictionMade() {
-      return null;
-    },
-    canvasRef: {
-      current: null
-    },
-    ready: false,
-    error: null,
-    modelDownloadProgress: 0
-  });
-  function SelfieGuidanceModelsProvider(_a) {
-    var _this = this;
-    var _b = _a.autoStart,
-      autoStart = _b === void 0 ? true : _b,
-      children = _a.children,
-      throttleMs = _a.throttleMs,
-      onModelError = _a.onModelError,
-      _c = _a.modelLoadTimeoutMs,
-      modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c;
-    var _d = React.useContext(CameraStateContext),
-      videoRef = _d.videoRef,
-      videoLoaded = _d.videoLoaded,
-      cameraReady = _d.cameraReady;
-    var canvasRef = React.useRef(null);
-    var onPredictionHandler = React.useRef();
-    var _e = useLoadFaceDetector({
-        onModelError: onModelError,
-        modelLoadTimeoutMs: modelLoadTimeoutMs
-      }),
-      detector = _e.detector,
-      ready = _e.ready,
-      modelDownloadProgress = _e.modelDownloadProgress,
-      modelError = _e.modelError;
-    var _f = useFrameLoop(React.useCallback(function () {
-        return __awaiter(_this, void 0, void 0, function () {
-          var vw, vh, ctx, faces, e_1;
-          var _a;
-          return __generator(this, function (_b) {
-            switch (_b.label) {
-              case 0:
-                if (!videoLoaded || !cameraReady || !ready || modelError || !videoRef.current || !detector.current || !canvasRef.current) return [2 /*return*/];
-                vw = videoRef.current.videoWidth;
-                vh = videoRef.current.videoHeight;
-                ctx = canvasRef.current.getContext('2d');
-                canvasRef.current.width = vw;
-                canvasRef.current.height = vh;
-                if (!(ctx && videoRef.current.readyState === 4)) return [3 /*break*/, 4];
-                ctx.translate(vw, 0);
-                ctx.scale(-1, 1);
-                ctx.drawImage(videoRef.current, 0, 0, vw, vh);
-                _b.label = 1;
-              case 1:
-                _b.trys.push([1, 3,, 4]);
-                faces = makeFaceDetectorPrediction(detector.current, canvasRef.current).faces;
-                return [4 /*yield*/, (_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, faces)];
-              case 2:
-                _b.sent();
-                return [3 /*break*/, 4];
-              case 3:
-                e_1 = _b.sent();
-                error('caught face detection error', e_1);
-                return [3 /*break*/, 4];
-              case 4:
-                return [2 /*return*/];
-            }
-          });
-        });
-      }, [cameraReady, detector, modelError, ready, videoLoaded, videoRef]), {
-        throttleMs: throttleMs,
-        autoStart: autoStart
-      }),
-      start = _f.start,
-      stop = _f.stop;
-    var onPredictionMade = React.useCallback(function (handler) {
-      onPredictionHandler.current = handler;
-    }, []);
-    var value = React.useMemo(function () {
-      return {
-        start: start,
-        stop: stop,
-        ready: ready,
-        canvasRef: canvasRef,
-        onPredictionMade: onPredictionMade,
-        error: modelError,
-        modelDownloadProgress: modelDownloadProgress
-      };
-    }, [modelError, modelDownloadProgress, onPredictionMade, ready, start, stop]);
-    return /*#__PURE__*/React__namespace.createElement(SelfieGuidanceModelsContext.Provider, {
-      value: value
-    }, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
-      ref: canvasRef
-    }), children);
-  }
-
-  var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger, shouldStart) {
-    if (shouldStart === void 0) {
-      shouldStart = true;
-    }
-    var _a = React.useState(false),
-      timedOut = _a[0],
-      setTimedOut = _a[1];
-    var _b = React.useState(),
-      timeoutStartedAt = _b[0],
-      setTimeoutStartedAt = _b[1];
-    React.useEffect(function () {
-      if (!durationMs || !shouldStart) return;
-      setTimeoutStartedAt(new Date());
-      var timer = setTimeout(function () {
-        setTimedOut(true);
-      }, durationMs);
-      return function () {
-        if (timer) clearTimeout(timer);
+        if (timer) clearTimeout(timer);
       };
     }, [durationMs, shouldStart]);
     React.useEffect(function () {
@@ -19725,11 +19117,11 @@
       className: classNames.container
     }, /*#__PURE__*/React.createElement(StyledOverlayInner$1, {
       className: classNames.inner
-    }, silentFallback ? invalidSelfie && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading$7, {
+    }, silentFallback ? invalidSelfie && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading$6, {
       className: classNames.heading
     }, verbiage.livenessFailedText), /*#__PURE__*/React.createElement(Description$2, {
       className: classNames.description
-    }, verbiage.livenessFailedReasonText || verbiage.descriptionText))) : ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading$7, {
+    }, verbiage.livenessFailedReasonText || verbiage.descriptionText))) : ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading$6, {
       className: classNames.heading
     }, invalidSelfie ? verbiage.livenessFailedText : verbiage.headingText), /*#__PURE__*/React.createElement(Description$2, {
       className: classNames.description
@@ -19774,21 +19166,18 @@
       }
     }, !image ? invalidSelfie ? verbiage.retryButtonText : verbiage.captureBtnText : loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText)))));
   };
-  var StyledOverlayInner$1 = styled(OverlayInner$2)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-  var Heading$7 = styled.h3(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var Description$2 = styled.p(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var ImageContainer$5 = styled(OverlayImageContainer)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-  var StyledButtonsRow$7 = styled(ButtonsRow$1)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-  var templateObject_1$k, templateObject_2$f, templateObject_3$e, templateObject_4$8, templateObject_5$4;
+  var StyledOverlayInner$1 = styled(OverlayInner$2)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
+  var Heading$6 = styled.h3(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var Description$2 = styled.p(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var ImageContainer$5 = styled(OverlayImageContainer)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+  var StyledButtonsRow$7 = styled(ButtonsRow)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+  var templateObject_1$j, templateObject_2$d, templateObject_3$c, templateObject_4$7, templateObject_5$3;
 
   var initialState$3 = {
     videoWidth: 0,
     videoHeight: 0,
-    requireVerticalFaceCentering: true,
-    busy: false,
     frame: null,
     faces: [],
-    faceNotDetected: false,
     faceNotCentered: false,
     faceLookingAway: false,
     faceTooClose: false,
@@ -19802,11 +19191,9 @@
         return _assign(_assign({}, state), action.payload);
       case 'facesDetected':
         {
-          if (state.busy) return state;
           var faces = action.payload.faces;
           var face = faces[0];
-          var faceNotDetected = faces.length === 0;
-          var faceNotCentered = state.requireVerticalFaceCentering,
+          var faceNotCentered = true,
             faceLookingAway = false,
             faceTooClose = false,
             faceTooFar = false,
@@ -19824,10 +19211,8 @@
             var fTH = face.box.height * 0.2;
             var nose = face.keypoints[2]; //.find((k) => k.name === 'noseTip')
             if (nose) {
+              faceNotCentered = Math.abs(vCX - fCX) > vTX || Math.abs(vCY + 50 - fCY) > vTY;
               faceLookingAway = Math.abs(fCX - nose.x) > fTW || Math.abs(fCY - nose.y) > fTH;
-              var faceNotCenteredHorizontally = Math.abs(vCX - fCX) > vTX;
-              var faceNotCenteredVertically = Math.abs(vCY + 50 - fCY) > vTY;
-              faceNotCentered = faceNotCenteredHorizontally || state.requireVerticalFaceCentering && faceNotCenteredVertically;
             }
             var isMobile = state.videoWidth < state.videoHeight;
             var tooCloseMultiple = isMobile ? 2 : 4.5;
@@ -19835,7 +19220,7 @@
             faceTooClose = face.box.width > state.videoWidth / tooCloseMultiple;
             faceTooFar = face.box.width < state.videoWidth / tooFarMultiple;
           }
-          var faceReady = !faceNotDetected && !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
+          var faceReady = !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
           if (!faceReady) {
             faceReadyAt = null;
           } else if (!state.faceReady) {
@@ -19843,31 +19228,20 @@
           }
           return _assign(_assign({}, state), {
             faces: faces,
-            faceNotDetected: faceNotDetected,
             faceNotCentered: faceNotCentered,
             faceLookingAway: faceLookingAway,
             faceTooClose: faceTooClose,
             faceTooFar: faceTooFar,
             faceReady: faceReady,
-            faceReadyAt: faceReadyAt,
-            busy: faceReady
+            faceReadyAt: faceReadyAt
           });
         }
-      case 'captureStarted':
-        return _assign(_assign({}, state), {
-          busy: true
-        });
-      case 'captureCompleted':
-        return _assign(_assign({}, state), {
-          busy: false
-        });
     }
   };
   var SelfieCapture = function SelfieCapture(_a) {
     var _b;
     var onGuidanceSatisfied = _a.onGuidanceSatisfied,
       onGuidanceNotSatisfied = _a.onGuidanceNotSatisfied,
-      onSelfieCaptureStarted = _a.onSelfieCaptureStarted,
       onSelfieCaptured = _a.onSelfieCaptured,
       onTimeout = _a.onTimeout,
       onExit = _a.onExit,
@@ -19875,91 +19249,80 @@
       timeoutDurationMs = _c === void 0 ? 15000 : _c,
       guidanceMessage = _a.guidanceMessage,
       guidanceSatisfied = _a.guidanceSatisfied,
-      guidesComponent = _a.guidesComponent,
-      _d = _a.requireVerticalFaceCentering,
-      requireVerticalFaceCentering = _d === void 0 ? true : _d,
-      _e = _a.shouldCapture,
-      shouldCapture = _e === void 0 ? true : _e,
-      _f = _a.classNames,
-      classNames = _f === void 0 ? {} : _f,
-      _g = _a.colors,
-      colors = _g === void 0 ? {} : _g,
-      _h = _a.verbiage,
-      rawVerbiage = _h === void 0 ? {} : _h,
-      _j = _a.debugMode,
-      debugMode = _j === void 0 ? false : _j;
-    var _k = useResizeObserver(),
-      ref = _k.ref,
-      _l = _k.width,
-      width = _l === void 0 ? 1 : _l,
-      _m = _k.height,
-      height = _m === void 0 ? 1 : _m;
-    var _o = React.useReducer(reducer$3, initialState$3),
-      state = _o[0],
-      dispatch = _o[1];
+      _d = _a.classNames,
+      classNames = _d === void 0 ? {} : _d,
+      _e = _a.colors,
+      colors = _e === void 0 ? {} : _e,
+      _f = _a.verbiage,
+      rawVerbiage = _f === void 0 ? {} : _f,
+      _g = _a.debugMode,
+      debugMode = _g === void 0 ? false : _g;
+    var _h = useResizeObserver(),
+      ref = _h.ref,
+      _j = _h.width,
+      width = _j === void 0 ? 1 : _j,
+      _k = _h.height,
+      height = _k === void 0 ? 1 : _k;
+    var _l = React.useReducer(reducer$3, initialState$3),
+      state = _l[0],
+      dispatch = _l[1];
     var lastPredictionCanvas = React.useRef(null);
-    var _p = React.useContext(CameraStateContext),
-      cameraRef = _p.cameraRef,
-      cameraReady = _p.cameraReady,
-      videoRef = _p.videoRef;
-    var _q = React.useContext(SelfieGuidanceModelsContext),
-      onPredictionMade = _q.onPredictionMade,
-      canvasRef = _q.canvasRef,
-      guidanceError = _q.error;
+    var _m = React.useContext(CameraStateContext),
+      cameraRef = _m.cameraRef,
+      cameraReady = _m.cameraReady,
+      videoRef = _m.videoRef;
+    var _o = React.useContext(SelfieGuidanceModelsContext),
+      onPredictionMade = _o.onPredictionMade,
+      guidanceError = _o.error;
     React.useEffect(function () {
       if (cameraReady && videoRef.current && videoRef.current.videoWidth !== 0) {
         dispatch({
           type: 'configure',
           payload: {
             videoWidth: videoRef.current.videoWidth,
-            videoHeight: videoRef.current.videoHeight,
-            requireVerticalFaceCentering: requireVerticalFaceCentering
+            videoHeight: videoRef.current.videoHeight
           }
         });
       }
-    }, [cameraReady, requireVerticalFaceCentering, videoRef]);
-    onPredictionMade(f(React.useCallback(function (prediction) {
-      return new Promise(function (resolve) {
-        if (shouldCapture && !state.busy) {
-          drawToCanvas(lastPredictionCanvas.current, canvasRef.current);
-          dispatch({
-            type: 'facesDetected',
-            payload: {
-              faces: prediction
-            }
-          });
+    }, [cameraReady, videoRef]);
+    onPredictionMade(f(function (prediction) {
+      dispatch({
+        type: 'facesDetected',
+        payload: {
+          faces: prediction
         }
-        resolve();
       });
-    }, [canvasRef, shouldCapture, state.busy]), 16));
+    }, 16));
+    var _p = React.useState(false),
+      captureReady = _p[0],
+      setCaptureReady = _p[1];
     React.useEffect(function () {
-      state.faceReady ? onGuidanceSatisfied === null || onGuidanceSatisfied === void 0 ? void 0 : onGuidanceSatisfied() : onGuidanceNotSatisfied === null || onGuidanceNotSatisfied === void 0 ? void 0 : onGuidanceNotSatisfied();
+      var timer;
+      if (state.faceReady) {
+        onGuidanceSatisfied === null || onGuidanceSatisfied === void 0 ? void 0 : onGuidanceSatisfied();
+        timer = setTimeout(function () {
+          setCaptureReady(true);
+        }, 1000);
+      } else {
+        onGuidanceNotSatisfied === null || onGuidanceNotSatisfied === void 0 ? void 0 : onGuidanceNotSatisfied();
+      }
+      return function () {
+        if (timer) clearTimeout(timer);
+      };
     }, [onGuidanceNotSatisfied, onGuidanceSatisfied, state.faceReady]);
     React.useEffect(function () {
-      if (!state.faceReady) return;
-      var timer = setTimeout(function () {
-        dispatch({
-          type: 'captureStarted'
-        });
-        onSelfieCaptureStarted === null || onSelfieCaptureStarted === void 0 ? void 0 : onSelfieCaptureStarted();
-        var frame = lastPredictionCanvas.current;
-        if (!frame) return;
-        var ctx = frame.getContext('2d');
+      if (captureReady && videoRef.current && lastPredictionCanvas.current && state.faces.length > 0) {
+        drawToCanvas(lastPredictionCanvas.current, videoRef.current);
+        var ctx = lastPredictionCanvas.current.getContext('2d');
         if (!ctx) return;
-        var imageData = ctx.getImageData(0, 0, frame.width, frame.height);
+        var imageData = ctx.getImageData(0, 0, videoRef.current.videoWidth, videoRef.current.videoHeight);
         onSelfieCaptured === null || onSelfieCaptured === void 0 ? void 0 : onSelfieCaptured(imageData, state.faces[0]);
-        clearCanvas(frame);
-        dispatch({
-          type: 'captureCompleted'
-        });
-      }, 100);
-      return function () {
-        if (timer) clearTimeout(timer);
-      };
-    }, [onSelfieCaptureStarted, onSelfieCaptured, state.faceReady, state.faces]);
-    var _r = useTimeout(timeoutDurationMs, onTimeout),
-      timedOut = _r.timedOut,
-      timeoutStartedAt = _r.timeoutStartedAt;
+        clearCanvas(lastPredictionCanvas.current);
+      }
+    }, [captureReady, onSelfieCaptured, state.faces, videoRef]);
+    var _q = useTimeout(timeoutDurationMs, onTimeout),
+      timedOut = _q.timedOut,
+      timeoutStartedAt = _q.timeoutStartedAt;
     var debugScalingDetails = useDebugScalingDetails({
       enabled: debugMode,
       pageWidth: width,
@@ -19974,26 +19337,24 @@
       guidanceLookStraightText: 'Look straight into the camera...',
       guidanceMoveBackText: 'Move back...',
       guidanceMoveForwardText: 'Move forward...',
-      guidanceMoveToCenterText: 'Move to the center...',
-      guidanceNoFaceDetectedText: 'Waiting for face to be detected...'
+      guidanceMoveToCenterText: 'Move to the center...'
     });
     var satisfied = state.faceReady;
     if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
-    guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : state.faceNotDetected ? verbiage.guidanceNoFaceDetectedText : '');
+    guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : '');
     if (guidanceError) {
       return /*#__PURE__*/React.createElement(SelfieCaptureFallback, {
         classNames: classNames.fallback
       });
     }
-    var GuidesComponent = guidesComponent !== null && guidesComponent !== void 0 ? guidesComponent : FaceCaptureGuideOverlay;
     return /*#__PURE__*/React.createElement(PageContainer, {
       ref: ref,
       className: "flex ".concat((_b = classNames.container) !== null && _b !== void 0 ? _b : '')
     }, /*#__PURE__*/React.createElement(InvisibleCanvas, {
       ref: lastPredictionCanvas
-    }), /*#__PURE__*/React.createElement(GuidesComponent, {
+    }), /*#__PURE__*/React.createElement(FaceCaptureGuideOverlay, {
       classNames: classNames.guides,
-      status: satisfied ? 'processing' : 'ready'
+      variant: satisfied ? 'satisfied' : 'unsatisfied'
     }), guidanceMessage !== '' && ( /*#__PURE__*/React.createElement(GuidanceMessageContainer, {
       className: classNames.guidanceMessageContainer
     }, /*#__PURE__*/React.createElement(GuidanceMessage, {
@@ -20025,26 +19386,15 @@
     phoneDetected: false,
     timesLivenessCheckFailed: 0
   };
+  /** todo: JN - this feels like it should be hoisted up to the wizard because these states of failed and error dovetail into those in the wizard.
+   *    There may also be some crossing of wires in how error/failed are used.
+   */
   var reducer$2 = function reducer(state, action) {
     var _a, _b;
     switch (action.type) {
-      case 'resetLivenessCheck':
-        return _assign(_assign({}, initialState$2), {
-          timesLivenessCheckFailed: state.timesLivenessCheckFailed
-        });
-      case 'guidanceUnsatisfied':
-        return _assign({}, state);
-      case 'guidanceSatisfied':
-        return _assign(_assign({}, state), {
-          requestState: 'GUIDANCE_SATISFIED'
-        });
-      case 'selfieCaptureStarted':
-        return _assign(_assign({}, state), {
-          requestState: 'CAPTURE_STARTED'
-        });
       case 'livenessReady':
         {
-          var allowedStates = ['CAPTURE_STARTED'];
+          var allowedStates = ['CAPTURING', 'FAILED', 'ERROR'];
           if (allowedStates.includes(state.requestState)) {
             return _assign(_assign({}, state), {
               requestState: 'CAPTURED',
@@ -20109,45 +19459,36 @@
     }
   };
   var FaceLivenessCapture = function FaceLivenessCapture(_a) {
-    var _b, _c, _d, _e;
+    var _b, _c, _d;
     var onCapture = _a.onCapture,
       onSuccess = _a.onSuccess,
       onTimeout = _a.onTimeout,
       onExit = _a.onExit,
-      _f = _a.timeoutDurationMs,
-      timeoutDurationMs = _f === void 0 ? 15000 : _f,
-      _g = _a.silentFallback,
-      silentFallback = _g === void 0 ? false : _g,
-      guidesComponent = _a.guidesComponent,
-      disableCapturePreview = _a.disableCapturePreview,
-      _h = _a.requireVerticalFaceCentering,
-      requireVerticalFaceCentering = _h === void 0 ? true : _h,
-      _j = _a.classNames,
-      classNames = _j === void 0 ? {} : _j,
-      _k = _a.colors,
-      colors = _k === void 0 ? {} : _k,
-      _l = _a.verbiage,
-      rawVerbiage = _l === void 0 ? {} : _l,
+      _e = _a.timeoutDurationMs,
+      timeoutDurationMs = _e === void 0 ? 15000 : _e,
+      _f = _a.silentFallback,
+      silentFallback = _f === void 0 ? false : _f,
+      _g = _a.classNames,
+      classNames = _g === void 0 ? {} : _g,
+      _h = _a.colors,
+      colors = _h === void 0 ? {} : _h,
+      _j = _a.verbiage,
+      rawVerbiage = _j === void 0 ? {} : _j,
       debugMode = _a.debugMode;
-    var _m = React.useContext(SubmissionContext),
-      checkLiveness = _m.checkLiveness,
-      submissionError = _m.submissionError;
+    var _k = React.useContext(SubmissionContext),
+      checkLiveness = _k.checkLiveness,
+      submissionError = _k.submissionError;
     var modelError = React.useContext(SelfieGuidanceModelsContext).error;
-    var _o = React.useReducer(reducer$2, initialState$2),
-      state = _o[0],
-      dispatch = _o[1];
-    var _p = React.useState(null),
-      imageUrl = _p[0],
-      setImageUrl = _p[1];
+    var _l = React.useReducer(reducer$2, initialState$2),
+      state = _l[0],
+      dispatch = _l[1];
+    var _m = React.useState(null),
+      imageUrl = _m[0],
+      setImageUrl = _m[1];
     var rawCanvas = React.useRef(null);
     var cropCanvas = React.useRef(null);
     var resizeCanvas = React.useRef(null);
     var theme = styled.useTheme();
-    var onSelfieCaptureStarted = React.useCallback(function () {
-      dispatch({
-        type: 'selfieCaptureStarted'
-      });
-    }, []);
     var onSelfieCaptured = React.useCallback(function (frame, face) {
       onCapture === null || onCapture === void 0 ? void 0 : onCapture();
       dispatch({
@@ -20257,53 +19598,24 @@
         });
       });
     }, [checkLiveness, onTimeout]);
-    React.useEffect(function () {
-      if (state.requestState === 'FAILED' || state.requestState === 'ERROR') {
-        setTimeout(function () {
-          dispatch({
-            type: 'resetLivenessCheck'
-          });
-        }, 1000);
-      }
-    }, [state.requestState]);
     React.useEffect(function callSuccessIfAvailable() {
       if (isPassed && state.imageUrl) onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(state.imageUrl);
     }, [onSuccess, state.imageUrl, isPassed]);
     React.useEffect(function timeoutOnTooManyLivenessCheckFailures() {
       if (modelError) return;
       var allowedFailures = 2;
-      if (state.timesLivenessCheckFailed > allowedFailures) {
+      if (state.timesLivenessCheckFailed >= allowedFailures) {
         onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
       }
     }, [modelError, onTimeout, state.timesLivenessCheckFailed]);
     useTimeout(timeoutDurationMs, onTimeout, state.requestState === 'PASSED' || !!modelError, state.requestState === 'IN_PROGRESS');
     var verbiage = useTranslations(rawVerbiage, {
-      guidanceLivenessCheckFailedText: 'Could not verify your face.',
-      guidanceLivenessCheckErrorText: 'An error occurred while verifying your face.',
       guidanceRemoveEyeCoveringsText: 'Please remove your eye coverings (sunglasses, eye patch, etc.)...',
       guidanceRemoveHeadCoveringsText: 'Please remove your head coverings (hat, scarf, etc.)...',
       guidanceRemoveMaskText: 'Please remove your mask...',
       progressPreviewText: 'Processing...'
     });
-    var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText : state.requestState === 'FAILED' ? verbiage.guidanceLivenessCheckFailedText : state.requestState === 'ERROR' ? verbiage.guidanceLivenessCheckErrorText : undefined;
-    disableCapturePreview || (disableCapturePreview = (_d = (_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.capturePreview) === null || _c === void 0 ? void 0 : _c.disabled) !== null && _d !== void 0 ? _d : false);
-    var guidesByRequestState = React.useCallback(function (props) {
-      var GuidesComponent = guidesComponent !== null && guidesComponent !== void 0 ? guidesComponent : FaceCaptureGuideOverlay;
-      var status = ['IN_PROGRESS', 'CAPTURE_STARTED', 'GUIDANCE_SATISFIED', 'CAPTURED'].includes(state.requestState) ? 'processing' : ['FAILED', 'ERROR'].includes(state.requestState) ? 'failure' : 'ready';
-      return /*#__PURE__*/React.createElement(GuidesComponent, _assign({}, props, {
-        status: status
-      }));
-    }, [guidesComponent, state.requestState]);
-    var onGuidanceSatisfied = React.useCallback(function () {
-      dispatch({
-        type: 'guidanceSatisfied'
-      });
-    }, []);
-    var onGuidanceNotSatisfied = React.useCallback(function () {
-      dispatch({
-        type: 'guidanceUnsatisfied'
-      });
-    }, []);
+    var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText : undefined;
     if (modelError) {
       return /*#__PURE__*/React.createElement(SelfieCaptureFallback, {
         key: state.timesLivenessCheckFailed,
@@ -20320,25 +19632,19 @@
     }), /*#__PURE__*/React.createElement(InvisibleCanvas, {
       ref: resizeCanvas
     }), /*#__PURE__*/React.createElement(SelfieCapture, {
-      shouldCapture: state.requestState === 'CAPTURING',
-      onSelfieCaptureStarted: onSelfieCaptureStarted,
       onSelfieCaptured: onSelfieCaptured,
       onExit: onExit,
       timeoutDurationMs: timeoutDurationMs,
       guidanceMessage: guidanceMessage,
       guidanceSatisfied: guidanceMessage ? false : undefined,
-      onGuidanceSatisfied: onGuidanceSatisfied,
-      onGuidanceNotSatisfied: onGuidanceNotSatisfied,
-      guidesComponent: guidesByRequestState,
-      requireVerticalFaceCentering: requireVerticalFaceCentering,
       classNames: classNames,
       colors: colors,
       verbiage: verbiage,
       debugMode: debugMode
-    }), !disableCapturePreview && imageUrl && ( /*#__PURE__*/React.createElement(SelfieProgressPreview, {
+    }), !((_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.capturePreview) === null || _c === void 0 ? void 0 : _c.disabled) && imageUrl && ( /*#__PURE__*/React.createElement(SelfieProgressPreview, {
       classNames: classNames.imagePreview,
       imageUrl: imageUrl,
-      text: (_e = verbiage.progressPreviewText) !== null && _e !== void 0 ? _e : ''
+      text: (_d = verbiage.progressPreviewText) !== null && _d !== void 0 ? _d : ''
     })));
   };
 
@@ -20361,7 +19667,7 @@
       className: classNames.container
     }, /*#__PURE__*/React.createElement(OverlayInner$2, {
       className: classNames.inner
-    }, /*#__PURE__*/React.createElement(Heading$6, {
+    }, /*#__PURE__*/React.createElement(Heading$5, {
       className: classNames.heading
     }, verbiage.headingText), /*#__PURE__*/React.createElement(OverlayImageContainer, {
       className: classNames.imageContainer
@@ -20369,7 +19675,7 @@
       alt: verbiage.headingText,
       src: imageUrl,
       className: classNames.image
-    })), /*#__PURE__*/React.createElement(ButtonsRow$1, {
+    })), /*#__PURE__*/React.createElement(ButtonsRow, {
       className: classNames.buttonsRow
     }, /*#__PURE__*/React.createElement(LoaderButton, {
       variant: "warning",
@@ -20385,8 +19691,8 @@
       finished: true
     }, verbiage.doneBtnText))));
   };
-  var Heading$6 = styled.h3(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  margin-bottom: 24px;\n"], ["\n  margin-bottom: 24px;\n"])));
-  var templateObject_1$j;
+  var Heading$5 = styled.h3(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  margin-bottom: 24px;\n"], ["\n  margin-bottom: 24px;\n"])));
+  var templateObject_1$i;
 
   var FaceLivenessFailure = function FaceLivenessFailure(_a) {
     var _b = _a.canRetry,
@@ -20401,48 +19707,42 @@
       colors = _e === void 0 ? {} : _e,
       _f = _a.verbiage,
       rawVerbiage = _f === void 0 ? {} : _f;
-    assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/Face_Not_Detected.svg"));
+    assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/manual_capture.png"));
     var verbiage = useTranslations(rawVerbiage, {
       headingText: 'Live face not detected, please try again',
       retryBtnText: 'Retry',
       exitBtnText: 'Exit'
     });
-    return /*#__PURE__*/React.createElement(GrayOverlayContainer, {
+    return /*#__PURE__*/React.createElement(OverlayContainer, {
       className: classNames.container
     }, /*#__PURE__*/React.createElement(OverlayInner$2, {
       className: classNames.inner
-    }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(ImageContainer$4, {
+    }, /*#__PURE__*/React.createElement("h3", {
+      className: classNames.heading
+    }, verbiage.headingText), /*#__PURE__*/React.createElement(ImageContainer$4, {
       className: classNames.imageContainer
     }, /*#__PURE__*/React.createElement("img", {
       alt: verbiage.headingText,
       src: assets.imageUrl,
       className: classNames.image
-    })), /*#__PURE__*/React.createElement(Heading$5, {
-      className: classNames.heading
-    }, verbiage.headingText), /*#__PURE__*/React.createElement(ButtonsRow, {
+    })), /*#__PURE__*/React.createElement(ButtonsRow, {
       className: classNames.buttonsRow
-    }, canRetry && ( /*#__PURE__*/React.createElement(WideButton, {
-      variant: "secondary",
+    }, canRetry && ( /*#__PURE__*/React.createElement(LoaderButton, {
+      variant: "warning",
       className: classNames.retryBtn,
       onClick: onRetryClick,
       colors: colors.retryBtn,
       finished: true
-    }, verbiage.retryBtnText)), /*#__PURE__*/React.createElement(WideBorderButton, {
+    }, verbiage.retryBtnText)), /*#__PURE__*/React.createElement(LoaderButton, {
       variant: "secondary",
       className: classNames.exitBtn,
       onClick: onExitClick,
       colors: colors.exitBtn,
       finished: true
-    }, verbiage.exitBtnText)))));
+    }, verbiage.exitBtnText))));
   };
-  var ImageContainer$4 = styled(OverlayImageContainer)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  max-height: calc(100vh - 185px);\n"], ["\n  max-height: calc(100vh - 185px);\n"])));
-  var Heading$5 = styled.h3(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  margin-bottom: 36px;\n"], ["\n  margin-bottom: 36px;\n"])));
-  var GrayOverlayContainer = styled(OverlayContainer)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  background: #f7f6fb;\n"], ["\n  background: #f7f6fb;\n"])));
-  var Card = styled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  background: white;\n  border-radius: 8px;\n  padding: 24px;\n  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n  margin: auto;\n  max-width: 500px;\n"], ["\n  background: white;\n  border-radius: 8px;\n  padding: 24px;\n  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n  margin: auto;\n  max-width: 500px;\n"])));
-  var WideButton = styled(LoaderButton)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 30px;\n"], ["\n  width: 100%;\n  border-radius: 30px;\n"])));
-  var ButtonsRow = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 15px 0;\n  justify-content: center;\n  margin-top: 24px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 15px 0;\n  justify-content: center;\n  margin-top: 24px;\n"])));
-  var WideBorderButton = styled(WideButton)(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  color: black;\n  background: white;\n  border: 1px solid var(--idm-color-secondary-500);\n  box-sizing: border-box;\n"], ["\n  color: black;\n  background: white;\n  border: 1px solid var(--idm-color-secondary-500);\n  box-sizing: border-box;\n"])));
-  var templateObject_1$i, templateObject_2$e, templateObject_3$d, templateObject_4$7, templateObject_5$3, templateObject_6$3, templateObject_7$2;
+  var ImageContainer$4 = styled(OverlayImageContainer)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  max-height: calc(100vh - 185px);\n  margin: 0 24px;\n"], ["\n  max-height: calc(100vh - 185px);\n  margin: 0 24px;\n"])));
+  var templateObject_1$h;
 
   var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
     var _b;
@@ -20483,11 +19783,11 @@
       finished: true
     }, verbiage.retryBtnText)));
   };
-  var StyledOverlayInner = styled(OverlayInner$2)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"], ["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"])));
-  var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
-  var Description$1 = styled.p(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"], ["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"])));
+  var StyledOverlayInner = styled(OverlayInner$2)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"], ["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"])));
+  var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
+  var Description$1 = styled.p(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"], ["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"])));
   var RetryButton = styled(LoaderButton)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  width: 200px;\n  margin: 0 auto;\n"], ["\n  width: 200px;\n  margin: 0 auto;\n"])));
-  var templateObject_1$h, templateObject_2$d, templateObject_3$c, templateObject_4$6;
+  var templateObject_1$g, templateObject_2$c, templateObject_3$b, templateObject_4$6;
 
   var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLegacy(_a) {
     var onDismissed = _a.onDismissed,
@@ -20566,9 +19866,273 @@
       }
     }, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
   };
-  var StyledGuidanceMessage$1 = styled(GuidanceMessage)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  padding: 12px 24px;\n  font-weight: normal;\n  line-height: 1.5;\n  margin-bottom: -30px;\n"], ["\n  padding: 12px 24px;\n  font-weight: normal;\n  line-height: 1.5;\n  margin-bottom: -30px;\n"])));
-  var StyledButtonsRow$6 = styled(ButtonsRow$1)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  flex-direction: column;\n  padding-top: 25px;\n"], ["\n  flex-direction: column;\n  padding-top: 25px;\n"])));
-  var templateObject_1$g, templateObject_2$c;
+  var StyledGuidanceMessage$1 = styled(GuidanceMessage)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  padding: 12px 24px;\n  font-weight: normal;\n  line-height: 1.5;\n  margin-bottom: -30px;\n"], ["\n  padding: 12px 24px;\n  font-weight: normal;\n  line-height: 1.5;\n  margin-bottom: -30px;\n"])));
+  var StyledButtonsRow$6 = styled(ButtonsRow)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  flex-direction: column;\n  padding-top: 25px;\n"], ["\n  flex-direction: column;\n  padding-top: 25px;\n"])));
+  var templateObject_1$f, templateObject_2$b;
+
+  function SelfieCaptureLoadingGraphic(_a) {
+    var _b, _c, _d;
+    var _e = _a.width,
+      width = _e === void 0 ? 840 : _e,
+      _f = _a.height,
+      height = _f === void 0 ? 740 : _f,
+      className = _a.className;
+    var _g = React.useState(1),
+      frame = _g[0],
+      setFrame = _g[1];
+    React.useEffect(function () {
+      var i = setInterval(function () {
+        setFrame(function (n) {
+          return (n + 1) % 10;
+        });
+      }, 750);
+      return function () {
+        clearInterval(i);
+      };
+    }, []);
+    var theme = styled.useTheme();
+    var accentColor = (_d = (_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.loadingGraphicAccentColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
+    return /*#__PURE__*/React.createElement("svg", {
+      width: width,
+      height: height,
+      className: className,
+      viewBox: "0 0 840 740",
+      fill: "none",
+      preserveAspectRatio: "xMidYMax slice",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("g", {
+      clipPath: "url(#clip0_428_1188)"
+    }, /*#__PURE__*/React.createElement("mask", {
+      id: "mask0_428_1188",
+      style: {
+        maskType: 'alpha'
+      },
+      maskUnits: "userSpaceOnUse",
+      x: "0",
+      y: "0",
+      width: "840",
+      height: "740"
+    }, /*#__PURE__*/React.createElement("rect", {
+      width: "840",
+      height: "740",
+      fill: "#D9D9D9"
+    })), /*#__PURE__*/React.createElement("g", {
+      mask: "url(#mask0_428_1188)"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M503.781 449.497C491.561 503.154 458.442 541.609 419.561 541.609C380.68 541.609 347.492 503.015 335.272 449.358L344.645 412.916L347.492 402.019H491.561L502.253 443.667L503.225 447.415L503.781 449.497Z",
+      fill: "#D2D4DA"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M574.88 244.97C647.073 163.885 598.921 362.155 558.945 338.928C488.709 298.211 574.88 244.97 574.88 244.97Z",
+      fill: "#F7A69C"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M816.983 742.838C779.698 781.432 736.86 814.612 689.786 841.127C617.161 882.012 534.399 906.862 446.153 911.027C437.335 911.513 428.448 911.721 419.491 911.721C374.986 911.721 331.731 906.446 290.281 896.519C232.514 882.706 178.358 859.8 129.271 829.397C89.9033 805.033 53.9382 775.948 22 742.838L31.512 705.355C45.8842 649.061 90.2505 605.33 146.837 591.795L153.085 590.337L222.447 573.747L241.401 569.235C249.386 567.292 257.023 564.585 264.244 561.114C270.285 558.199 276.047 554.797 281.463 550.91C287.295 546.745 292.78 542.025 297.71 536.819C310.971 522.867 320.761 505.653 325.76 486.286L333.119 457.688L335.064 449.983L335.202 449.358L344.645 412.916L347.422 402.019H491.491L502.253 443.667L503.225 447.415L503.78 449.497V449.983L505.863 457.757L513.223 486.286C520.097 512.802 535.996 535.5 557.589 550.91C569.393 559.448 582.932 565.765 597.581 569.235L615.078 573.4L692.146 591.795C748.732 605.33 793.099 649.061 807.471 705.355L816.983 742.838Z",
+      fill: "#F7A69C"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M503.781 449.497C491.561 503.154 458.442 541.609 419.561 541.609C380.68 541.609 347.492 503.015 335.272 449.358L344.645 412.916L347.492 402.019H491.561L502.253 443.667L503.225 447.415L503.781 449.497Z",
+      fill: "#DC968D"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M264.123 244.97C191.93 163.885 240.082 362.155 280.058 338.928C350.294 298.211 264.123 244.97 264.123 244.97Z",
+      fill: "#F7A69C"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M586.473 187.324C586.473 193.432 586.126 199.402 585.432 205.371C584.876 210.785 582.446 233.9 578.141 263.331C575.781 279.713 572.726 297.969 569.115 316.294C569.115 316.502 569.115 316.78 568.976 316.988C560.159 361.621 547.731 406.045 531.484 422.219C513.154 440.544 498.435 457.203 481.632 469.211C464.83 481.289 446.014 488.786 419.631 488.786C393.247 488.786 374.431 481.289 357.629 469.211C340.896 457.203 326.107 440.544 307.778 422.219C291.531 405.976 279.103 361.482 270.216 316.918C270.216 316.918 270.216 316.71 270.216 316.641C269.105 310.879 268.063 305.118 267.022 299.426C266.605 297.066 266.189 294.706 265.772 292.346C264.036 282.351 262.509 272.563 261.12 263.401C256.121 229.596 253.691 204.122 253.691 204.122C253.136 198.638 252.858 193.016 252.858 187.324C252.858 185.866 252.858 184.408 252.858 182.951C253.205 169.832 255.01 157.06 258.274 144.843C258.412 144.287 258.551 143.732 258.69 143.177C277.228 75.4294 337.425 24.8271 410.049 20.8011C413.243 20.5928 416.368 20.5234 419.631 20.5234C465.733 20.5234 507.461 39.1956 537.663 69.3904C563.769 95.4205 581.266 130.127 585.501 168.79C586.195 174.899 586.542 181.077 586.542 187.324H586.473Z",
+      fill: "#FEAEA5"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M445.867 337.327C445.867 348.849 434.133 358.151 419.622 358.151C405.111 358.151 393.447 348.849 393.447 337.327C393.447 335.939 393.586 334.55 394.002 333.301C396.293 342.88 406.916 350.099 419.622 350.099C432.328 350.099 443.02 342.88 445.312 333.301C445.728 334.62 445.867 335.939 445.867 337.327Z",
+      fill: "#F7A69C"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M817.053 743.187C716.586 847.238 575.642 912 419.561 912C263.481 912 122.467 847.238 22.0698 743.118L31.5818 705.704C45.954 649.34 90.3203 605.61 146.906 592.074L222.655 574.027L241.471 569.515C249.942 567.502 258.135 564.517 265.772 560.699C304.237 601.653 358.879 627.267 419.561 627.267C480.244 627.267 534.886 601.653 573.351 560.699C580.988 564.448 589.111 567.502 597.651 569.515L614.106 573.471L692.216 592.074C748.802 605.61 793.168 649.34 807.471 705.704L817.053 743.187Z",
+      fill: "#6E7174"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M614.106 573.471C597.165 594.018 534.886 659.058 419.561 663.639C286.671 668.984 226.266 579.441 222.655 574.027L241.471 569.515C249.942 567.502 258.134 564.517 265.772 560.699C304.236 601.653 358.879 627.267 419.561 627.267C480.244 627.267 534.886 601.653 573.35 560.699C580.988 564.448 589.111 567.502 597.651 569.515L614.106 573.471Z",
+      fill: "#555A5E"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M249.898 196.144C249.898 249.777 270.317 315.623 270.317 315.623C270.317 315.623 266.862 205.572 314.892 164.108C347.514 135.946 374.019 167.565 417.115 167.565C456.137 167.565 492.558 136.481 525.436 164.108C578.852 208.994 568.738 315.623 568.738 315.623C568.738 315.623 589.157 250.557 589.157 196.144C589.157 76.4319 542.638 20 417.115 20C302.8 20 249.898 75.8365 249.898 196.144Z",
+      fill: "#525252"
+    })), frame >= 8 ? ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
+      d: "M565.5 295C565.5 350.583 549.016 400.803 522.488 437.067C495.958 473.332 459.517 495.5 419.5 495.5C379.483 495.5 343.042 473.332 316.512 437.067C289.984 400.803 273.5 350.583 273.5 295C273.5 239.417 289.984 189.197 316.512 152.933C343.042 116.668 379.483 94.5 419.5 94.5C459.517 94.5 495.958 116.668 522.488 152.933C549.016 189.197 565.5 239.417 565.5 295Z",
+      stroke: accentColor,
+      strokeWidth: "5"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "518.5",
+      cy: "438.5",
+      r: "25.5",
+      fill: accentColor
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M504 440.5L512 448L531 427",
+      stroke: "white",
+      strokeWidth: "5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }))) : ( /*#__PURE__*/React.createElement(React.Fragment, null, frame > 2 && ( /*#__PURE__*/React.createElement(React.Fragment, null, frame > 3 && ( /*#__PURE__*/React.createElement(React.Fragment, null, frame > 4 && ( /*#__PURE__*/React.createElement(React.Fragment, null, frame > 5 && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
+      d: "M298.5 182.5L419 164.5L540 182",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "419",
+      cy: "165",
+      r: "7",
+      fill: "white"
+    }))), /*#__PURE__*/React.createElement("path", {
+      d: "M565.5 295C565.5 350.583 549.016 400.803 522.488 437.067C495.958 473.332 459.517 495.5 419.5 495.5C379.483 495.5 343.042 473.332 316.512 437.067C289.984 400.803 273.5 350.583 273.5 295C273.5 239.417 289.984 189.197 316.512 152.933C343.042 116.668 379.483 94.5 419.5 94.5C459.517 94.5 495.958 116.668 522.488 152.933C549.016 189.197 565.5 239.417 565.5 295Z",
+      stroke: "white",
+      strokeOpacity: frame > 7 ? 0.8 : frame > 5 ? 0.3 : 0.1,
+      strokeWidth: "5"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M299.939 262.805L419 478.5L538.5 261.5",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M298.5 182.5L418.871 230.054L540 182",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M298.5 182.5L299.939 262.805",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M540.001 182L538.501 261.5",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "299.914",
+      cy: "182",
+      r: "7",
+      fill: "white"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "540",
+      cy: "182",
+      r: "7",
+      fill: "white"
+    }))), /*#__PURE__*/React.createElement("path", {
+      d: "M418.828 230L419 342.5",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M300 263.001L419 342.501",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M538.5 261.5L419 342.5",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M301.5 409L419 342.5",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M536.5 410L419 342.5",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M300 263L419 230",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M538.5 261.5L419 230",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "419",
+      cy: "229.971",
+      r: "7",
+      fill: "white"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "419",
+      cy: "342.4",
+      r: "7",
+      fill: "white"
+    }))), /*#__PURE__*/React.createElement("path", {
+      d: "M538.5 261.5L536.5 410",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M419 478.5L536.5 410",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "537",
+      cy: "263",
+      r: "7",
+      fill: "white"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "537",
+      cy: "409",
+      r: "7",
+      fill: "white"
+    }))), frame > 1 && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
+      d: "M301.501 409L300.001 263",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M301.501 409L419.001 478.5",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "419",
+      cy: "477.576",
+      r: "7",
+      fill: "white"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "301.914",
+      cy: "263",
+      r: "7",
+      fill: "white"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "301.444",
+      cy: "409",
+      r: "7",
+      fill: "white"
+    })))))), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+      id: "clip0_428_1188"
+    }, /*#__PURE__*/React.createElement("rect", {
+      width: "840",
+      height: "740",
+      fill: "white"
+    }))));
+  }
 
   var legacyInstructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png");
   var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDefault(_a) {
@@ -20682,21 +20246,21 @@
       }
     }, verbiage.continueText))))));
   };
-  var OverlayInner = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n"], ["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n"])), function (props) {
+  var OverlayInner = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n"], ["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n"])), function (props) {
     var _a, _b, _c, _d;
     return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : '#ecedf3';
   }, function (props) {
     var _a, _b, _c, _d;
     return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.textColor) !== null && _d !== void 0 ? _d : 'black';
   });
-  var OverlayHeader = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"])), function (props) {
+  var OverlayHeader = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"])), function (props) {
     var _a;
     return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
   }, function (props) {
     return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
   });
-  var StyledGuidanceMessage = styled(GuidanceMessage)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
-  var StyledButtonsRow$5 = styled(ButtonsRow$1)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  height: 100px;\n  color: ", ";\n  ", "\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100dvw;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  height: 100px;\n  color: ", ";\n  ", "\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100dvw;\n  box-sizing: border-box;\n"])), function (props) {
+  var StyledGuidanceMessage = styled(GuidanceMessage)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
+  var StyledButtonsRow$5 = styled(ButtonsRow)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  height: 100px;\n  color: ", ";\n  ", "\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100dvw;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  height: 100px;\n  color: ", ";\n  ", "\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100dvw;\n  box-sizing: border-box;\n"])), function (props) {
     var _a, _b, _c, _d;
     return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
   }, function (props) {
@@ -20731,7 +20295,7 @@
     var _a, _b, _c, _d, _e, _f;
     return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnBorder) ? "border: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.selfieCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.continueBtnBorder, ";") : '';
   });
-  var templateObject_1$f, templateObject_2$b, templateObject_3$b, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+  var templateObject_1$e, templateObject_2$a, templateObject_3$a, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
 
   var components = {
     "default": SelfieCaptureLoadingOverlayDefault,
@@ -20768,44 +20332,40 @@
       releaseCameraAccessOnExit = _k === void 0 ? true : _k,
       _l = _a.silentFallback,
       silentFallback = _l === void 0 ? false : _l,
-      guidesComponent = _a.guidesComponent,
-      disableCapturePreview = _a.disableCapturePreview,
-      _m = _a.requireVerticalFaceCentering,
-      requireVerticalFaceCentering = _m === void 0 ? true : _m,
-      _o = _a.assets,
-      assets = _o === void 0 ? {} : _o,
-      _p = _a.classNames,
-      classNames = _p === void 0 ? {} : _p,
-      _q = _a.colors,
-      colors = _q === void 0 ? {} : _q,
-      _r = _a.verbiage,
-      verbiage = _r === void 0 ? {} : _r,
-      _s = _a.debugMode,
-      debugMode = _s === void 0 ? false : _s;
-    var _t = React.useContext(SubmissionContext),
-      submissionResponse = _t.submissionResponse,
-      livenessCheckRequest = _t.livenessCheckRequest,
-      setSelfieImage = _t.setSelfieImage,
-      logSelfieCaptureAttempt = _t.logSelfieCaptureAttempt;
-    var _u = React.useContext(CameraStateContext),
-      cameraAccessDenied = _u.cameraAccessDenied,
-      requestCameraAccess = _u.requestCameraAccess,
-      releaseCameraAccess = _u.releaseCameraAccess;
-    var _v = React.useState(''),
-      faceCropImageUrl = _v[0],
-      setFaceCropImageUrl = _v[1];
-    var _w = React.useState(0),
-      retryCount = _w[0],
-      setRetryCount = _w[1];
-    var _x = React.useState('LOADING'),
-      captureState = _x[0],
-      setCaptureState = _x[1];
+      _m = _a.assets,
+      assets = _m === void 0 ? {} : _m,
+      _o = _a.classNames,
+      classNames = _o === void 0 ? {} : _o,
+      _p = _a.colors,
+      colors = _p === void 0 ? {} : _p,
+      _q = _a.verbiage,
+      verbiage = _q === void 0 ? {} : _q,
+      _r = _a.debugMode,
+      debugMode = _r === void 0 ? false : _r;
+    var _s = React.useContext(SubmissionContext),
+      submissionResponse = _s.submissionResponse,
+      livenessCheckRequest = _s.livenessCheckRequest,
+      setSelfieImage = _s.setSelfieImage,
+      logSelfieCaptureAttempt = _s.logSelfieCaptureAttempt;
+    var _t = React.useContext(CameraStateContext),
+      cameraAccessDenied = _t.cameraAccessDenied,
+      requestCameraAccess = _t.requestCameraAccess,
+      releaseCameraAccess = _t.releaseCameraAccess;
+    var _u = React.useState(''),
+      faceCropImageUrl = _u[0],
+      setFaceCropImageUrl = _u[1];
+    var _v = React.useState(0),
+      retryCount = _v[0],
+      setRetryCount = _v[1];
+    var _w = React.useState('LOADING'),
+      captureState = _w[0],
+      setCaptureState = _w[1];
     var captureStartedAt = React.useRef();
     var captureEndedAt = React.useRef();
     var operationStartedAt = React.useRef();
-    var _y = React.useContext(SelfieGuidanceModelsContext),
-      start = _y.start,
-      stop = _y.stop;
+    var _x = React.useContext(SelfieGuidanceModelsContext),
+      start = _x.start,
+      stop = _x.stop;
     React.useEffect(function () {
       operationStartedAt.current = new Date();
     }, []);
@@ -20853,9 +20413,9 @@
       setCaptureState('FAILED');
       onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout(submissionResponse, livenessCheckRequest);
     }, [onTimeout, livenessCheckRequest, submissionResponse]);
-    var _z = React.useState(0),
-      attempt = _z[0],
-      setAttempt = _z[1];
+    var _y = React.useState(0),
+      attempt = _y[0],
+      setAttempt = _y[1];
     var onExitCallback = React.useCallback(function () {
       setAttempt(function (n) {
         return n + 1;
@@ -20908,9 +20468,6 @@
             onExit: onExitCallback,
             timeoutDurationMs: timeoutDurationMs,
             silentFallback: silentFallback,
-            guidesComponent: guidesComponent,
-            disableCapturePreview: disableCapturePreview,
-            requireVerticalFaceCentering: requireVerticalFaceCentering,
             classNames: classNames.capture,
             colors: colors,
             verbiage: verbiage,
@@ -21109,11 +20666,11 @@
       }
     }, verbiage.captureBtnText)))));
   };
-  var Inner = styled(OverlayInner$2)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-  var Heading$4 = styled.h3(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var Description = styled.p(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var StyledButtonsRow$4 = styled(ButtonsRow$1)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-  var templateObject_1$e, templateObject_2$a, templateObject_3$a, templateObject_4$4;
+  var Inner = styled(OverlayInner$2)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
+  var Heading$4 = styled.h3(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var Description = styled.p(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var StyledButtonsRow$4 = styled(ButtonsRow)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+  var templateObject_1$d, templateObject_2$9, templateObject_3$9, templateObject_4$4;
 
   var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_a) {
     var documents = _a.documents,
@@ -22025,7 +21582,7 @@
     });
   }
 
-  var SignaturePaperBacking = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  ", "\n  ", "\n  ", "\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  ", "\n  ", "\n  ", "\n"])), function (props) {
+  var SignaturePaperBacking = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  ", "\n  ", "\n  ", "\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  ", "\n  ", "\n  ", "\n"])), function (props) {
     var _a, _b;
     return ((_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.background) ? "background: ".concat((_b = props.theme.signatureCapture) === null || _b === void 0 ? void 0 : _b.background, ";") : "";
   }, function (props) {
@@ -22035,8 +21592,8 @@
     var _a, _b;
     return ((_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.backgroundPosition) ? "background-position: ".concat((_b = props.theme.signatureCapture) === null || _b === void 0 ? void 0 : _b.backgroundPosition, ";") : "";
   });
-  var SignatureCanvasContainer = styled.div(templateObject_2$9 || (templateObject_2$9 = __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.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"], ["\n  position: relative;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"])), function (props) {
+  var SignatureCanvasContainer = styled.div(templateObject_2$8 || (templateObject_2$8 = __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.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"], ["\n  position: relative;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"])), function (props) {
     var _a, _b, _c;
     return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.background) !== null && _c !== void 0 ? _c : 'rgba(255, 255, 255, 0.5)';
   }, function (props) {
@@ -22046,8 +21603,8 @@
     var _a, _b, _c;
     return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.borderRadius) !== null && _c !== void 0 ? _c : '16px';
   });
-  var SignatureButtonsContainer = styled(ButtonsRow$1)(templateObject_4$3 || (templateObject_4$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 templateObject_1$d, templateObject_2$9, templateObject_3$9, templateObject_4$3;
+  var SignatureButtonsContainer = styled(ButtonsRow)(templateObject_4$3 || (templateObject_4$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 templateObject_1$c, templateObject_2$8, templateObject_3$8, templateObject_4$3;
 
   var SignatureCapture = function SignatureCapture(_a) {
     var _b;
@@ -22118,8 +21675,8 @@
       finished: true
     }, verbiage.acceptBtnText)))));
   };
-  var AcceptBtn$1 = styled(LoaderButton)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
-  var templateObject_1$c;
+  var AcceptBtn$1 = styled(LoaderButton)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
+  var templateObject_1$b;
 
   var useVideoRecorder = function useVideoRecorder(camera, audioStream, mergeAVStreams) {
     if (mergeAVStreams === void 0) {
@@ -22476,8 +22033,8 @@
       ref: outputCanvas
     }));
   };
-  var AcceptBtn = styled(LoaderButton)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
-  var templateObject_1$b;
+  var AcceptBtn = styled(LoaderButton)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
+  var templateObject_1$a;
 
   var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
     var videoUrl = _a.videoUrl,
@@ -22516,7 +22073,7 @@
       style: {
         display: 'none'
       }
-    })), /*#__PURE__*/React.createElement(ButtonsRow$1, {
+    })), /*#__PURE__*/React.createElement(ButtonsRow, {
       className: classNames.buttonsRow
     }, /*#__PURE__*/React.createElement(LoaderButton, {
       variant: "warning",
@@ -22532,8 +22089,8 @@
       finished: true
     }, verbiage.doneBtnText))));
   };
-  var StyledVideo$1 = styled.video(templateObject_1$a || (templateObject_1$a = __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$a;
+  var StyledVideo$1 = styled.video(templateObject_1$9 || (templateObject_1$9 = __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$9;
 
   var VideoSignatureWizard = function VideoSignatureWizard(_a) {
     var _b;
@@ -22712,91 +22269,18 @@
     }));
   };
 
-  var IdCardGuideImageContainer = styled(IdCardBorder)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  position: relative;\n  aspect-ratio: 3.375 / 2.125;\n  ", "\n  box-sizing: border-box;\n"], ["\n  position: relative;\n  aspect-ratio: 3.375 / 2.125;\n  ", "\n  box-sizing: border-box;\n"])), function (props) {
-    return props.$isVisible ? '' : 'opacity: 0;';
-  });
-  var IdCardGuideImage = styled.img(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  width: 100%;\n  max-height: 100%;\n  ", "\n"], ["\n  width: 100%;\n  max-height: 100%;\n  ", "\n"])), function (props) {
-    return props.$isMirrored ? 'transform: scaleX(-1);' : '';
-  });
-  function IdCardBorder(_a) {
-    var children = _a.children,
-      _b = _a.status,
-      status = _b === void 0 ? 'ready' : _b,
-      _c = _a.borderWidth,
-      borderWidth = _c === void 0 ? 20 : _c,
-      _d = _a.borderRadius,
-      borderRadius = _d === void 0 ? 25 : _d,
-      _e = _a.borderColor,
-      borderColor = _e === void 0 ? 'white' : _e,
-      props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor"]);
-    var dashArray = 12;
-    var _f = React.useState(0),
-      dashOffset = _f[0],
-      setDashOffset = _f[1];
-    React.useEffect(function () {
-      if (status !== 'capturing') {
-        setDashOffset(0);
-        return;
-      }
-      var interval = setInterval(function () {
-        setDashOffset(function (n) {
-          return (n - 1) % (dashArray * 2);
-        });
-      }, 10);
-      return function () {
-        clearInterval(interval);
-      };
-    }, [status]);
-    var _g = React.useState('0'),
-      width = _g[0],
-      setWidth = _g[1];
-    React.useLayoutEffect(function () {
-      setTimeout(function () {
-        setWidth('100%');
-      }, 0);
-    }, []);
-    return /*#__PURE__*/React.createElement("div", _assign({}, props), children, /*#__PURE__*/React.createElement(SvgOverlay, {
-      width: width,
-      height: "100%",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-      id: "round-corner"
-    }, /*#__PURE__*/React.createElement("rect", {
-      x: "0",
-      y: "0",
-      width: "100%",
-      height: "100%",
-      rx: borderRadius,
-      ry: borderRadius
-    }))), /*#__PURE__*/React.createElement("rect", {
-      x: "0",
-      y: "0",
-      width: "100%",
-      height: "100%",
-      rx: borderRadius,
-      ry: borderRadius,
-      stroke: borderColor,
-      strokeWidth: borderWidth,
-      clipPath: "url(#round-corner)",
-      strokeDasharray: status === 'disabled' ? '0' : dashArray,
-      strokeDashoffset: dashOffset
-    })));
-  }
-  var SvgOverlay = styled.svg(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n"])));
-  var templateObject_1$9, templateObject_2$8, templateObject_3$8;
-
   var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
     var _b;
-    var _c = _a.assets,
-      assets = _c === void 0 ? {} : _c,
-      _d = _a.classNames,
-      classNames = _d === void 0 ? {} : _d,
-      borderWidth = _a.borderWidth,
-      borderColor = _a.borderColor;
+    var className = _a.className,
+      imageWidth = _a.imageWidth,
+      imageHeight = _a.imageHeight,
+      _c = _a.borderWidth,
+      borderWidth = _c === void 0 ? 4 : _c,
+      _d = _a.assets,
+      assets = _d === void 0 ? {} : _d;
     var cameraRef = React.useContext(CameraStateContext).cameraRef;
-    assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-Borderless.svg"));
-    assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-Borderless.svg"));
+    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 isMirrored = !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing);
     var _e = React.useState(1),
       transitionTime = _e[0],
@@ -22825,36 +22309,39 @@
         clearTimeout(timeout);
       };
     }, []);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FlipImageContainer, {
-      className: classNames.frontImageContainer,
-      status: "disabled",
-      borderWidth: borderWidth,
-      borderColor: borderColor,
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FlipImage, {
+      src: assets.frontImageUrl,
+      alt: "",
+      className: className,
       "$transforms": frontTransforms.join(' '),
       "$transitionTime": transitionTime,
-      "$isVisible": true
-    }, /*#__PURE__*/React.createElement(IdCardGuideImage, {
-      src: assets.frontImageUrl,
-      className: classNames.frontImage,
-      alt: ""
-    })), /*#__PURE__*/React.createElement(FlipImageContainer, {
-      className: classNames.backImageContainer,
-      status: "disabled",
-      borderWidth: borderWidth,
-      borderColor: borderColor,
+      "$borderWidth": borderWidth,
+      "$imageWidth": imageWidth,
+      "$imageHeight": imageHeight
+    }), /*#__PURE__*/React.createElement(FlipImage, {
+      src: assets.backImageUrl,
+      alt: "",
+      className: className,
       "$transforms": backTransforms.join(' '),
       "$transitionTime": transitionTime,
-      "$isVisible": true
-    }, /*#__PURE__*/React.createElement(IdCardGuideImage, {
-      src: assets.backImageUrl,
-      className: classNames.backImage,
-      alt: ""
-    })));
+      "$borderWidth": borderWidth,
+      "$imageWidth": imageWidth,
+      "$imageHeight": imageHeight,
+      "$isBack": true
+    }));
   };
-  var FlipImageContainer = styled(IdCardGuideImageContainer)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  backface-visibility: hidden;\n  transition: transform ", "s;\n  transform: ", ";\n  transform-style: preserve-3d;\n  position: absolute;\n  display: block;\n  top: 0;\n  width: 100%;\n  max-height: 100%;\n"], ["\n  backface-visibility: hidden;\n  transition: transform ", "s;\n  transform: ", ";\n  transform-style: preserve-3d;\n  position: absolute;\n  display: block;\n  top: 0;\n  width: 100%;\n  max-height: 100%;\n"])), function (props) {
+  var FlipImage = styled.img(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  backface-visibility: hidden;\n  transition: transform ", "s;\n  transform: ", ";\n  transform-style: preserve-3d;\n  position: ", ";\n  display: block;\n  top: ", "px;\n  width: ", "px;\n  height: ", "px;\n"], ["\n  backface-visibility: hidden;\n  transition: transform ", "s;\n  transform: ", ";\n  transform-style: preserve-3d;\n  position: ", ";\n  display: block;\n  top: ", "px;\n  width: ", "px;\n  height: ", "px;\n"])), function (props) {
     return props.$transitionTime;
   }, function (props) {
     return props.$transforms;
+  }, function (props) {
+    return props.$isBack ? 'absolute' : 'relative';
+  }, function (props) {
+    return -props.$borderWidth / 2;
+  }, function (props) {
+    return props.$imageWidth;
+  }, function (props) {
+    return props.$imageHeight + props.$borderWidth;
   });
   var templateObject_1$8;
 
@@ -22864,84 +22351,98 @@
       requestedAction = _y === void 0 ? 'SHOW_ID_FRONT' : _y,
       _z = _a.satisfied,
       satisfied = _z === void 0 ? false : _z,
-      _0 = _a.faceGuideStatus,
-      faceGuideStatus = _0 === void 0 ? 'success' : _0,
       faceGuideBorderWidth = _a.faceGuideBorderWidth,
       faceGuideBorderColor = _a.faceGuideBorderColor,
-      _1 = _a.idCardGuideStatus,
-      idCardGuideStatus = _1 === void 0 ? 'ready' : _1,
       idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
       idCardGuideBorderColor = _a.idCardGuideBorderColor,
-      _2 = _a.assets,
-      assets = _2 === void 0 ? {} : _2,
-      _3 = _a.classNames,
-      classNames = _3 === void 0 ? {} : _3,
-      _4 = _a.verbiage,
-      rawVerbiage = _4 === void 0 ? {} : _4;
+      _0 = _a.assets,
+      assets = _0 === void 0 ? {} : _0,
+      _1 = _a.classNames,
+      classNames = _1 === void 0 ? {} : _1,
+      _2 = _a.verbiage,
+      rawVerbiage = _2 === void 0 ? {} : _2;
     var cameraRef = React.useContext(CameraStateContext).cameraRef;
     var imageRef = React.useRef(null);
-    assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-Borderless.svg"));
-    assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-Borderless.svg"));
+    var _3 = React.useState(0),
+      imageWidth = _3[0],
+      setImageWidth = _3[1];
+    var _4 = React.useState(0),
+      imageHeight = _4[0],
+      setImageHeight = _4[1];
+    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 verbiage = useTranslations(rawVerbiage, {
       idFrontInstructionText: 'Display the front of your ID card...',
       idBackInstructionText: 'Display the back of your ID card...',
-      flipIdInstructionText: 'Please flip your ID card...',
-      verifyLivenessInstructionText: 'Performing facial recognition, please hold still...'
+      flipIdInstructionText: 'Please flip your ID card...'
     });
-    var instructionText = requestedAction === 'VERIFY_LIVENESS' ? verbiage.verifyLivenessInstructionText : requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : requestedAction === 'FLIP_ID' ? verbiage.flipIdInstructionText : verbiage.idBackInstructionText;
+    var instructionText = requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : requestedAction === 'FLIP_ID' ? verbiage.flipIdInstructionText : verbiage.idBackInstructionText;
     var theme = styled.useTheme();
-    if (faceGuideBorderWidth === undefined) faceGuideBorderWidth = (_d = (_c = (_b = theme.idVideoCapture) === null || _b === void 0 ? void 0 : _b.faceGuides) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 5;
-    if (faceGuideBorderColor === undefined) faceGuideBorderColor = (_j = satisfied ? (_f = (_e = theme.idVideoCapture) === null || _e === void 0 ? void 0 : _e.faceGuides) === null || _f === void 0 ? void 0 : _f.satisfiedColor : (_h = (_g = theme.idVideoCapture) === null || _g === void 0 ? void 0 : _g.faceGuides) === null || _h === void 0 ? void 0 : _h.unsatisfiedColor) !== null && _j !== void 0 ? _j : '#D6DCE7';
-    if (idCardGuideBorderWidth === undefined) idCardGuideBorderWidth = (_m = (_l = (_k = theme.idVideoCapture) === null || _k === void 0 ? void 0 : _k.idCardGuides) === null || _l === void 0 ? void 0 : _l.borderWidth) !== null && _m !== void 0 ? _m : 20;
-    if (idCardGuideBorderColor === undefined) idCardGuideBorderColor = (_s = satisfied ? (_p = (_o = theme.idVideoCapture) === null || _o === void 0 ? void 0 : _o.idCardGuides) === null || _p === void 0 ? void 0 : _p.satisfiedColor : (_r = (_q = theme.idVideoCapture) === null || _q === void 0 ? void 0 : _q.idCardGuides) === null || _r === void 0 ? void 0 : _r.unsatisfiedColor) !== null && _s !== void 0 ? _s : '#D6DCE7';
+    if (faceGuideBorderWidth === undefined) faceGuideBorderWidth = (_d = (_c = (_b = theme.idVideoCapture) === null || _b === void 0 ? void 0 : _b.faceGuides) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 4;
+    if (faceGuideBorderColor === undefined) faceGuideBorderColor = (_j = satisfied ? (_f = (_e = theme.idVideoCapture) === null || _e === void 0 ? void 0 : _e.faceGuides) === null || _f === void 0 ? void 0 : _f.satisfiedColor : (_h = (_g = theme.idVideoCapture) === null || _g === void 0 ? void 0 : _g.faceGuides) === null || _h === void 0 ? void 0 : _h.unsatisfiedColor) !== null && _j !== void 0 ? _j : 'white';
+    if (idCardGuideBorderWidth === undefined) idCardGuideBorderWidth = (_m = (_l = (_k = theme.idVideoCapture) === null || _k === void 0 ? void 0 : _k.idCardGuides) === null || _l === void 0 ? void 0 : _l.borderWidth) !== null && _m !== void 0 ? _m : 4;
+    if (idCardGuideBorderColor === undefined) idCardGuideBorderColor = (_s = satisfied ? (_p = (_o = theme.idVideoCapture) === null || _o === void 0 ? void 0 : _o.idCardGuides) === null || _p === void 0 ? void 0 : _p.satisfiedColor : (_r = (_q = theme.idVideoCapture) === null || _q === void 0 ? void 0 : _q.idCardGuides) === null || _r === void 0 ? void 0 : _r.unsatisfiedColor) !== null && _s !== void 0 ? _s : 'white';
+    var captureImageSize = function captureImageSize() {
+      var _a, _b, _c, _d;
+      if (!imageWidth) setImageWidth((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0);
+      if (!imageHeight) setImageHeight((_d = (_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0);
+    };
     return /*#__PURE__*/React.createElement(Container, {
       className: classNames.container
-    }, /*#__PURE__*/React.createElement(FaceGuideContainer, {
-      className: classNames.faceGuideContainer
-    }, /*#__PURE__*/React.createElement(StyledSelfieCaptureAnimatedMask, {
+    }, /*#__PURE__*/React.createElement(FaceGuide, {
       className: classNames.faceGuide,
-      status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
-      borderWidth: faceGuideBorderWidth,
-      borderColor: faceGuideBorderColor
-    })), /*#__PURE__*/React.createElement(IdCardGuideContainer, {
+      "$borderWidth": faceGuideBorderWidth,
+      "$borderColor": faceGuideBorderColor
+    }), /*#__PURE__*/React.createElement(IdCardGuideContainer, {
       className: classNames.idCardGuideContainer
-    }, /*#__PURE__*/React.createElement(IdCardGuideInner, {
-      className: classNames.idCardGuideInner
-    }, /*#__PURE__*/React.createElement(IdCardGuideImageContainer, {
-      className: classNames.idCardGuideImageContainer,
-      status: requestedAction === 'VERIFY_LIVENESS' ? 'disabled' : idCardGuideStatus,
-      borderWidth: idCardGuideBorderWidth,
-      borderColor: idCardGuideBorderColor,
-      "$isVisible": requestedAction !== 'FLIP_ID'
-    }, /*#__PURE__*/React.createElement(IdCardGuideImage, {
-      alt: "",
-      ref: imageRef,
-      className: classNames.idCardGuideImage,
-      "$isMirrored": !((_t = cameraRef.current) === null || _t === void 0 ? void 0 : _t.isRearFacing),
-      src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl
-    })), requestedAction === 'FLIP_ID' && ( /*#__PURE__*/React.createElement(IdVideoCaptureFlipIdPrompt, {
-      assets: assets,
-      classNames: classNames.flipIdPrompt,
-      borderWidth: idCardGuideBorderWidth,
-      borderColor: idCardGuideBorderColor
-    }))), /*#__PURE__*/React.createElement(IdCardGuideInstructionsContainer, {
+    }, /*#__PURE__*/React.createElement(IdCardGuideInstructionsContainer, {
       className: classNames.idCardGuideInstructionsContainer
     }, /*#__PURE__*/React.createElement(IdCardGuideInstructions, {
       className: classNames.idCardGuideInstructions,
-      "$textColor": (_v = (_u = theme.idVideoCapture) === null || _u === void 0 ? void 0 : _u.idCardGuides) === null || _v === void 0 ? void 0 : _v.instructionsTextColor,
-      "$background": (_x = (_w = theme.idVideoCapture) === null || _w === void 0 ? void 0 : _w.idCardGuides) === null || _x === void 0 ? void 0 : _x.instructionsBackgroundColor
-    }, instructionText))));
+      "$textColor": (_u = (_t = theme.idVideoCapture) === null || _t === void 0 ? void 0 : _t.idCardGuides) === null || _u === void 0 ? void 0 : _u.instructionsTextColor,
+      "$background": (_w = (_v = theme.idVideoCapture) === null || _v === void 0 ? void 0 : _v.idCardGuides) === null || _w === void 0 ? void 0 : _w.instructionsBackgroundColor
+    }, instructionText)), /*#__PURE__*/React.createElement(IdCardGuideImageContainer, {
+      "$borderWidth": idCardGuideBorderWidth,
+      "$borderColor": idCardGuideBorderColor,
+      className: classNames.idCardGuideImageContainer
+    }, requestedAction === 'FLIP_ID' ? ( /*#__PURE__*/React.createElement(IdVideoCaptureFlipIdPrompt, {
+      assets: assets,
+      imageWidth: imageWidth,
+      imageHeight: imageHeight,
+      borderWidth: idCardGuideBorderWidth,
+      className: classNames.flipIdPromptImage
+    })) : ( /*#__PURE__*/React.createElement(IdCardGuideImage, {
+      ref: imageRef,
+      src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl,
+      alt: "",
+      className: classNames.idCardGuideImage,
+      "$isMirrored": !((_x = cameraRef.current) === null || _x === void 0 ? void 0 : _x.isRearFacing),
+      onLoad: captureImageSize,
+      onResize: captureImageSize
+    })))));
   };
-  var Container = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  display: flex;\n  max-height: 100%;\n  flex-direction: column;\n  align-items: center;\n  position: absolute;\n  z-index: 1000;\n  width: 100dvw;\n  height: 100dvh;\n  padding: 40px;\n  font-family: ", ";\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  max-height: 100%;\n  flex-direction: column;\n  align-items: center;\n  position: absolute;\n  z-index: 1000;\n  width: 100dvw;\n  height: 100dvh;\n  padding: 40px;\n  font-family: ", ";\n  box-sizing: border-box;\n"])), function (props) {
+  var Container = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 1000;\n  width: 100dvw;\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  font-family: ", ";\n"], ["\n  position: fixed;\n  z-index: 1000;\n  width: 100dvw;\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  font-family: ", ";\n"])), function (props) {
     var _a;
     return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
   });
-  var FaceGuideContainer = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n"], ["\n  position: relative;\n  height: 100%;\n"])));
-  var StyledSelfieCaptureAnimatedMask = styled(SelfieCaptureAnimatedMaskWithStatus)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  max-width: 100%;\n  height: 100%;\n  align-items: flex-end;\n"], ["\n  max-width: 100%;\n  height: 100%;\n  align-items: flex-end;\n"])));
-  var IdCardGuideContainer = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  margin: 0 auto;\n  position: relative;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  margin: 0 auto;\n  position: relative;\n"])));
-  var IdCardGuideInner = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n"], ["\n  position: relative;\n  height: 100%;\n"])));
-  var IdCardGuideInstructionsContainer = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  width: calc(100% - 80px);\n  text-align: center;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  padding: 0 40px;\n  position: fixed;\n  bottom: 14px;\n  left: 0;\n  right: 0;\n"], ["\n  width: calc(100% - 80px);\n  text-align: center;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  padding: 0 40px;\n  position: fixed;\n  bottom: 14px;\n  left: 0;\n  right: 0;\n"])));
-  var IdCardGuideInstructions = styled(GuidanceMessage)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-content: center;\n  margin: 12px auto;\n  padding: 8px 12px;\n  font-weight: bold;\n  font-size: 18px;\n"], ["\n  align-content: center;\n  margin: 12px auto;\n  padding: 8px 12px;\n  font-weight: bold;\n  font-size: 18px;\n"])));
+  var FaceGuide = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  border-width: ", "px;\n  border-color: ", ";\n  border-style: solid;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1.618;\n  height: 50%;\n  min-height: 33dvh;\n  margin: 4% auto auto;\n"], ["\n  border-width: ", "px;\n  border-color: ", ";\n  border-style: solid;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1.618;\n  height: 50%;\n  min-height: 33dvh;\n  margin: 4% auto auto;\n"])), function (props) {
+    var _a;
+    return (_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 0;
+  }, function (props) {
+    var _a;
+    return (_a = props.$borderColor) !== null && _a !== void 0 ? _a : 'white';
+  });
+  var IdCardGuideContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  height: 50%;\n  padding: 0 40px;\n  display: flex;\n  flex-flow: column nowrap;\n  margin: 2% auto;\n"], ["\n  height: 50%;\n  padding: 0 40px;\n  display: flex;\n  flex-flow: column nowrap;\n  margin: 2% auto;\n"])));
+  var IdCardGuideInstructionsContainer = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  width: 100%;\n  text-align: center;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n"], ["\n  width: 100%;\n  text-align: center;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n"])));
+  var IdCardGuideInstructions = styled(GuidanceMessage)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n  padding: 8px 12px;\n  font-weight: bold;\n"], ["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n  padding: 8px 12px;\n  font-weight: bold;\n"])));
+  var IdCardGuideImageContainer = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  position: relative;\n  border: ", "px solid\n    ", ";\n"], ["\n  position: relative;\n  border: ", "px solid\n    ", ";\n"])), function (props) {
+    return props.$borderWidth;
+  }, function (props) {
+    return props.$borderColor;
+  });
+  var IdCardGuideImage = styled.img(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  max-height: 100%;\n  ", "\n"], ["\n  width: 100%;\n  max-height: 100%;\n  ", "\n"])), function (props) {
+    return props.$isMirrored ? 'transform: scaleX(-1);' : '';
+  });
   var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7;
 
   var ReadTextPrompt = function ReadTextPrompt(_a) {
@@ -23032,7 +22533,7 @@
     var _a, _b, _c, _d, _e, _f;
     return ((_c = (_b = (_a = props.theme.idVideoCapture) === null || _a === void 0 ? void 0 : _a.readTextPrompt) === null || _b === void 0 ? void 0 : _b.prompt) === null || _c === void 0 ? void 0 : _c.borderRadius) ? "border-radius: ".concat((_f = (_e = (_d = props.theme.idVideoCapture) === null || _d === void 0 ? void 0 : _d.readTextPrompt) === null || _e === void 0 ? void 0 : _e.prompt) === null || _f === void 0 ? void 0 : _f.borderRadius, ";") : "";
   });
-  var ReadTextPromptButtonsRow = styled(ButtonsRow$1)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  margin: 32px auto auto;\n  gap: 20px;\n"], ["\n  margin: 32px auto auto;\n  gap: 20px;\n"])));
+  var ReadTextPromptButtonsRow = styled(ButtonsRow)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  margin: 32px auto auto;\n  gap: 20px;\n"], ["\n  margin: 32px auto auto;\n  gap: 20px;\n"])));
   var ReadTextPromptTimeRemaining = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: 20px;\n\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  padding: 20px;\n\n  ", ";\n  ", ";\n  ", ";\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f;
     return ((_c = (_b = (_a = props.theme.idVideoCapture) === null || _a === void 0 ? void 0 : _a.readTextPrompt) === null || _b === void 0 ? void 0 : _b.timeRemaining) === null || _c === void 0 ? void 0 : _c.backgroundColor) ? "background: ".concat((_f = (_e = (_d = props.theme.idVideoCapture) === null || _d === void 0 ? void 0 : _d.readTextPrompt) === null || _e === void 0 ? void 0 : _e.timeRemaining) === null || _f === void 0 ? void 0 : _f.backgroundColor, ";") : "";
@@ -23049,8 +22550,8 @@
   var edgeBoundary = 0.05;
   var defaultVideoIdCaptureThresholds = {
     detection: {
-      idCardFront: 0.7,
-      idCardBack: 0.7,
+      idCardFront: 0.6,
+      idCardBack: 0.6,
       passport: 1
     },
     focus: {
@@ -23387,10 +22888,12 @@
     var theme = styled.useTheme();
     var _30 = useTranslations(rawVerbiage, {
         faceNotCenteredText: 'Please move your face to the center...',
+        searchingForIdCardText: 'Searching for ID card...',
         captureBtnText: 'Capture'
       }),
       captureBtnText = _30.captureBtnText,
-      faceNotCenteredText = _30.faceNotCenteredText;
+      faceNotCenteredText = _30.faceNotCenteredText,
+      searchingForIdCardText = _30.searchingForIdCardText;
     var debugScalingDetails = useDebugScalingDetails({
       enabled: debugMode,
       pageWidth: width,
@@ -23399,9 +22902,8 @@
       videoHeight: (_k = (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.videoHeight) !== null && _k !== void 0 ? _k : 0
     });
     var capturingId = ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction);
-    // const searchingForIdCard =
-    //   idCaptureModelsEnabled && capturingId && !goodFramesThresholdMet
-    var guidanceText = !faceCentered ? faceNotCenteredText : undefined;
+    var searchingForIdCard = idCaptureModelsEnabled && capturingId && !goodFramesThresholdMet;
+    var guidanceText = !faceCentered ? faceNotCenteredText : searchingForIdCard ? searchingForIdCardText : undefined;
     return /*#__PURE__*/React.createElement(PageContainer, {
       ref: ref,
       className: "flex ".concat((_l = classNames.container) !== null && _l !== void 0 ? _l : '')
@@ -23421,7 +22923,6 @@
       verbiage: rawVerbiage.guides,
       requestedAction: requestedAction,
       satisfied: satisfied,
-      idCardGuideStatus: countdownStartedAt ? 'capturing' : 'ready',
       faceGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor,
       idCardGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
     }), debugMode && capturingId && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ObjectDetectionDebugOverlayDiv, {
@@ -23569,7 +23070,7 @@
     })) : ( /*#__PURE__*/React.createElement("img", {
       src: idBackImageUrl,
       alt: "ID Back Image"
-    }))), /*#__PURE__*/React.createElement(ButtonsRow$1, {
+    }))), /*#__PURE__*/React.createElement(ButtonsRow, {
       className: classNames.buttonsRow
     }, /*#__PURE__*/React.createElement(LoaderButton, {
       variant: "warning",
@@ -23591,7 +23092,7 @@
   var templateObject_1$4, templateObject_2$4, templateObject_3$4;
 
   var VideoIdWizard = function VideoIdWizard(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _b, _c, _d, _e, _f;
     var onComplete = _a.onComplete,
       onExitCapture = _a.onExitCapture,
       onExitAfterFailure = _a.onExitAfterFailure,
@@ -23599,66 +23100,66 @@
       onIdCaptureModelError = _a.onIdCaptureModelError,
       onCameraAccessDenied = _a.onCameraAccessDenied,
       onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
-      _m = _a.idCaptureProps,
-      idCaptureProps = _m === void 0 ? {} : _m,
-      _o = _a.faceLivenessProps,
-      faceLivenessProps = _o === void 0 ? {} : _o,
-      _p = _a.idCaptureModelsEnabled,
-      idCaptureModelsEnabled = _p === void 0 ? true : _p,
-      _q = _a.videoIdCaptureThresholds,
-      videoIdCaptureThresholds = _q === void 0 ? defaultVideoIdCaptureThresholds : _q,
+      _g = _a.idCaptureProps,
+      idCaptureProps = _g === void 0 ? {} : _g,
+      _h = _a.faceLivenessProps,
+      faceLivenessProps = _h === void 0 ? {} : _h,
+      _j = _a.idCaptureModelsEnabled,
+      idCaptureModelsEnabled = _j === void 0 ? true : _j,
+      _k = _a.videoIdCaptureThresholds,
+      videoIdCaptureThresholds = _k === void 0 ? defaultVideoIdCaptureThresholds : _k,
       readTextPrompt = _a.readTextPrompt,
       readTextTimeoutDurationMs = _a.readTextTimeoutDurationMs,
       readTextMinReadingMs = _a.readTextMinReadingMs,
-      _r = _a.skipIdCapture,
-      skipIdCapture = _r === void 0 ? false : _r,
-      _s = _a.skipShowIdCardBack,
-      skipShowIdCardBack = _s === void 0 ? false : _s,
-      _t = _a.skipSuccessScreen,
-      skipSuccessScreen = _t === void 0 ? false : _t,
-      _u = _a.idCaptureLoadingOverlayMode,
-      idCaptureLoadingOverlayMode = _u === void 0 ? 'default' : _u,
-      _v = _a.idCaptureGuideType,
-      idCaptureGuideType = _v === void 0 ? 'fit' : _v,
-      _w = _a.idCapturePortraitGuidesOnMobile,
-      idCapturePortraitGuidesOnMobile = _w === void 0 ? true : _w,
-      _x = _a.idCaptureRotateLoadingOverlayImageWhenPortrait,
-      idCaptureRotateLoadingOverlayImageWhenPortrait = _x === void 0 ? true : _x,
-      _y = _a.idCaptureModelLoadTimeoutMs,
-      idCaptureModelLoadTimeoutMs = _y === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _y,
-      _z = _a.faceLivenessLoadingOverlayMode,
-      faceLivenessLoadingOverlayMode = _z === void 0 ? 'default' : _z,
-      _0 = _a.disableFaceDetectionWhileAudioCapture,
-      disableFaceDetectionWhileAudioCapture = _0 === void 0 ? true : _0,
-      _1 = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
-      disableFaceDetectionWhileAudioCaptureMsDelay = _1 === void 0 ? 2000 : _1,
-      _2 = _a.silentFallback,
-      silentFallback = _2 === void 0 ? false : _2,
-      _3 = _a.mergeAVStreams,
-      mergeAVStreams = _3 === void 0 ? false : _3,
-      _4 = _a.assets,
-      assets = _4 === void 0 ? {} : _4,
-      _5 = _a.classNames,
-      classNames = _5 === void 0 ? {} : _5,
-      _6 = _a.colors,
-      colors = _6 === void 0 ? {} : _6,
-      _7 = _a.verbiage,
-      verbiage = _7 === void 0 ? {} : _7,
-      _8 = _a.debugMode,
-      debugMode = _8 === void 0 ? false : _8;
-    var _9 = React.useContext(SubmissionContext),
-      submissionStatus = _9.submissionStatus,
-      idCaptureVideoUrl = _9.idCaptureVideoUrl,
-      idCaptureVideoAudioUrl = _9.idCaptureVideoAudioUrl,
-      idCaptureVideoIdFrontImage = _9.idCaptureVideoIdFrontImage,
-      idCaptureVideoIdBackImage = _9.idCaptureVideoIdBackImage,
-      setIdCaptureVideoUrl = _9.setIdCaptureVideoUrl,
-      setIdCaptureVideoIdFrontImage = _9.setIdCaptureVideoIdFrontImage,
-      setIdCaptureVideoIdBackImage = _9.setIdCaptureVideoIdBackImage,
-      setIdCaptureVideoAudioUrl = _9.setIdCaptureVideoAudioUrl;
-    var _10 = React.useState('CAPTURING_ID'),
-      captureState = _10[0],
-      setCaptureState = _10[1];
+      _l = _a.skipIdCapture,
+      skipIdCapture = _l === void 0 ? false : _l,
+      _m = _a.skipShowIdCardBack,
+      skipShowIdCardBack = _m === void 0 ? false : _m,
+      _o = _a.skipSuccessScreen,
+      skipSuccessScreen = _o === void 0 ? false : _o,
+      _p = _a.idCaptureLoadingOverlayMode,
+      idCaptureLoadingOverlayMode = _p === void 0 ? 'default' : _p,
+      _q = _a.idCaptureGuideType,
+      idCaptureGuideType = _q === void 0 ? 'fit' : _q,
+      _r = _a.idCapturePortraitGuidesOnMobile,
+      idCapturePortraitGuidesOnMobile = _r === void 0 ? true : _r,
+      _s = _a.idCaptureRotateLoadingOverlayImageWhenPortrait,
+      idCaptureRotateLoadingOverlayImageWhenPortrait = _s === void 0 ? true : _s,
+      _t = _a.idCaptureModelLoadTimeoutMs,
+      idCaptureModelLoadTimeoutMs = _t === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _t,
+      _u = _a.faceLivenessLoadingOverlayMode,
+      faceLivenessLoadingOverlayMode = _u === void 0 ? 'default' : _u,
+      _v = _a.disableFaceDetectionWhileAudioCapture,
+      disableFaceDetectionWhileAudioCapture = _v === void 0 ? true : _v,
+      _w = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
+      disableFaceDetectionWhileAudioCaptureMsDelay = _w === void 0 ? 2000 : _w,
+      _x = _a.silentFallback,
+      silentFallback = _x === void 0 ? false : _x,
+      _y = _a.mergeAVStreams,
+      mergeAVStreams = _y === void 0 ? false : _y,
+      _z = _a.assets,
+      assets = _z === void 0 ? {} : _z,
+      _0 = _a.classNames,
+      classNames = _0 === void 0 ? {} : _0,
+      _1 = _a.colors,
+      colors = _1 === void 0 ? {} : _1,
+      _2 = _a.verbiage,
+      verbiage = _2 === void 0 ? {} : _2,
+      _3 = _a.debugMode,
+      debugMode = _3 === void 0 ? false : _3;
+    var _4 = React.useContext(SubmissionContext),
+      submissionStatus = _4.submissionStatus,
+      idCaptureVideoUrl = _4.idCaptureVideoUrl,
+      idCaptureVideoAudioUrl = _4.idCaptureVideoAudioUrl,
+      idCaptureVideoIdFrontImage = _4.idCaptureVideoIdFrontImage,
+      idCaptureVideoIdBackImage = _4.idCaptureVideoIdBackImage,
+      setIdCaptureVideoUrl = _4.setIdCaptureVideoUrl,
+      setIdCaptureVideoIdFrontImage = _4.setIdCaptureVideoIdFrontImage,
+      setIdCaptureVideoIdBackImage = _4.setIdCaptureVideoIdBackImage,
+      setIdCaptureVideoAudioUrl = _4.setIdCaptureVideoAudioUrl;
+    var _5 = React.useState('CAPTURING_ID'),
+      captureState = _5[0],
+      setCaptureState = _5[1];
     React.useEffect(function () {
       if (skipIdCapture && captureState === 'CAPTURING_ID') setCaptureState('CHECKING_LIVENESS');
     }, [captureState, skipIdCapture]);
@@ -23689,9 +23190,9 @@
     var onVideoCaptureFaceNotDetected = React.useCallback(function () {
       setCaptureState('CHECKING_LIVENESS');
     }, []);
-    var _11 = React.useState(0),
-      attempt = _11[0],
-      setAttempt = _11[1];
+    var _6 = React.useState(0),
+      attempt = _6[0],
+      setAttempt = _6[1];
     var userSuppliedExitAfterFailure = onExitAfterFailure !== null && onExitAfterFailure !== void 0 ? onExitAfterFailure : faceLivenessProps.onExitAfterFailure;
     var onFaceCaptureExitAfterFailure = React.useCallback(function (resp, req) {
       userSuppliedExitAfterFailure === null || userSuppliedExitAfterFailure === void 0 ? void 0 : userSuppliedExitAfterFailure(resp, req);
@@ -23722,19 +23223,6 @@
       });
       onExitCapture === null || onExitCapture === void 0 ? void 0 : onExitCapture();
     }, [onExitCapture]);
-    var faceLivenessGuides = React.useCallback(function (_a) {
-      var _b, _c, _d, _e, _f;
-      var status = _a.status;
-      return /*#__PURE__*/React.createElement(IdVideoCaptureGuides, {
-        assets: (_b = assets.idVideoCapture) === null || _b === void 0 ? void 0 : _b.guides,
-        classNames: (_c = classNames.idVideoCapture) === null || _c === void 0 ? void 0 : _c.guides,
-        verbiage: (_d = verbiage.idVideoCapture) === null || _d === void 0 ? void 0 : _d.guides,
-        requestedAction: "VERIFY_LIVENESS",
-        faceGuideStatus: status,
-        faceGuideBorderColor: status === 'success' ? (_e = colors.idVideoCapture) === null || _e === void 0 ? void 0 : _e.guidesSatisfiedColor : (_f = colors.idVideoCapture) === null || _f === void 0 ? void 0 : _f.guidesUnsatisfiedColor,
-        idCardGuideStatus: "disabled"
-      });
-    }, [(_b = assets.idVideoCapture) === null || _b === void 0 ? void 0 : _b.guides, (_c = classNames.idVideoCapture) === null || _c === void 0 ? void 0 : _c.guides, (_d = colors.idVideoCapture) === null || _d === void 0 ? void 0 : _d.guidesSatisfiedColor, (_e = colors.idVideoCapture) === null || _e === void 0 ? void 0 : _e.guidesUnsatisfiedColor, (_f = verbiage.idVideoCapture) === null || _f === void 0 ? void 0 : _f.guides]);
     if (submissionStatus === SubmissionStatus.SUBMITTING) {
       return /*#__PURE__*/React.createElement(PageContainer, {
         className: "flex"
@@ -23752,8 +23240,8 @@
       debugMode: debugMode
     }, /*#__PURE__*/React.createElement(IdCaptureModelsProvider, {
       autoStart: false,
-      documentDetectionModelUrl: (_h = (_g = idCaptureProps.assets) === null || _g === void 0 ? void 0 : _g.documentDetectionModelUrl) !== null && _h !== void 0 ? _h : '',
-      focusModelUrl: (_k = (_j = idCaptureProps.assets) === null || _j === void 0 ? void 0 : _j.focusModelUrl) !== null && _k !== void 0 ? _k : '',
+      documentDetectionModelUrl: (_c = (_b = idCaptureProps.assets) === null || _b === void 0 ? void 0 : _b.documentDetectionModelUrl) !== null && _c !== void 0 ? _c : '',
+      focusModelUrl: (_e = (_d = idCaptureProps.assets) === null || _d === void 0 ? void 0 : _d.focusModelUrl) !== null && _e !== void 0 ? _e : '',
       onModelError: onIdCaptureModelError,
       modelLoadTimeoutMs: idCaptureModelLoadTimeoutMs
     }, /*#__PURE__*/React.createElement(SelfieGuidanceModelsProvider, {
@@ -23761,7 +23249,7 @@
       onModelError: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.onModelError,
       modelLoadTimeoutMs: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.modelLoadTimeoutMs
     }, /*#__PURE__*/React.createElement(PageContainer, {
-      className: "flex ".concat((_l = classNames.container) !== null && _l !== void 0 ? _l : '')
+      className: "flex ".concat((_f = classNames.container) !== null && _f !== void 0 ? _f : '')
     }, ['CHECKING_LIVENESS', 'CAPTURING_VIDEO'].includes(captureState) && /*#__PURE__*/React.createElement(CameraVideoTag, {
       className: classNames.cameraFeed
     }), function () {
@@ -23799,9 +23287,6 @@
             skipSuccessScreen: true,
             renderCameraFeed: false,
             releaseCameraAccessOnExit: false,
-            disableCapturePreview: !debugMode,
-            requireVerticalFaceCentering: false,
-            guidesComponent: faceLivenessGuides,
             assets: assets.faceLiveness,
             classNames: classNames.faceLiveness,
             colors: colors.faceLiveness,
@@ -25289,8 +24774,8 @@
     }, verbiage.doneBtnText))));
   };
   var Heading$3 = styled.h3(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  margin-bottom: 24px;\n"], ["\n  margin-bottom: 24px;\n"])));
-  var ImageContainer$3 = styled(ButtonsRow$1)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  max-height: calc(100vh - 185px);\n"], ["\n  max-height: calc(100vh - 185px);\n"])));
-  var StyledButtonsRow$3 = styled(ButtonsRow$1)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  margin-top: 24px;\n"], ["\n  margin-top: 24px;\n"])));
+  var ImageContainer$3 = styled(ButtonsRow)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  max-height: calc(100vh - 185px);\n"], ["\n  max-height: calc(100vh - 185px);\n"])));
+  var StyledButtonsRow$3 = styled(ButtonsRow)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  margin-top: 24px;\n"], ["\n  margin-top: 24px;\n"])));
   var templateObject_1$3, templateObject_2$3, templateObject_3$3;
 
   var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
@@ -25341,8 +24826,8 @@
     }, verbiage.exitBtnText))));
   };
   var Heading$2 = styled.h3(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  margin-bottom: 24px;\n"], ["\n  margin-bottom: 24px;\n"])));
-  var ImageContainer$2 = styled(ButtonsRow$1)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  max-height: calc(100vh - 185px);\n"], ["\n  max-height: calc(100vh - 185px);\n"])));
-  var StyledButtonsRow$2 = styled(ButtonsRow$1)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  margin-top: 24px;\n"], ["\n  margin-top: 24px;\n"])));
+  var ImageContainer$2 = styled(ButtonsRow)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  max-height: calc(100vh - 185px);\n"], ["\n  max-height: calc(100vh - 185px);\n"])));
+  var StyledButtonsRow$2 = styled(ButtonsRow)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  margin-top: 24px;\n"], ["\n  margin-top: 24px;\n"])));
   var templateObject_1$2, templateObject_2$2, templateObject_3$2;
 
   var ALLOWED_RETRIES$2 = 2;
@@ -25847,8 +25332,8 @@
     }, verbiage.doneBtnText))));
   };
   var Heading$1 = styled.h3(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n"], ["\n  margin-bottom: 24px;\n"])));
-  var ImageContainer$1 = styled(ButtonsRow$1)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  max-height: calc(100vh - 185px);\n"], ["\n  max-height: calc(100vh - 185px);\n"])));
-  var StyledButtonsRow$1 = styled(ButtonsRow$1)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  margin-top: 24px;\n"], ["\n  margin-top: 24px;\n"])));
+  var ImageContainer$1 = styled(ButtonsRow)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  max-height: calc(100vh - 185px);\n"], ["\n  max-height: calc(100vh - 185px);\n"])));
+  var StyledButtonsRow$1 = styled(ButtonsRow)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  margin-top: 24px;\n"], ["\n  margin-top: 24px;\n"])));
   var templateObject_1$1, templateObject_2$1, templateObject_3$1;
 
   var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
@@ -25899,8 +25384,8 @@
     }, verbiage.exitBtnText))));
   };
   var Heading = styled.h3(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n"], ["\n  margin-bottom: 24px;\n"])));
-  var ImageContainer = styled(ButtonsRow$1)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: calc(100vh - 185px);\n"], ["\n  max-height: calc(100vh - 185px);\n"])));
-  var StyledButtonsRow = styled(ButtonsRow$1)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 24px;\n"], ["\n  margin-top: 24px;\n"])));
+  var ImageContainer = styled(ButtonsRow)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: calc(100vh - 185px);\n"], ["\n  max-height: calc(100vh - 185px);\n"])));
+  var StyledButtonsRow = styled(ButtonsRow)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 24px;\n"], ["\n  margin-top: 24px;\n"])));
   var templateObject_1, templateObject_2, templateObject_3;
 
   var ALLOWED_RETRIES = 2;