idmission-web-sdk 2.3.151 → 2.3.152

package/dist/sdk2.umd.development.js

@@ -211,7 +211,7 @@
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  var webSdkVersion = '2.3.151';
+  var webSdkVersion = '2.3.152';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -474,38 +474,38 @@
     if (!portalLocation) return element;
     return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
   };
-  var GuidanceMessage = styled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\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  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\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"])), function (props) {
+  var GuidanceMessage = styled.div(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\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  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\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"])), 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 : 'white';
   }, 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$P, templateObject_2$J;
+  var templateObject_1$P, templateObject_2$K;
 
   var wavesAnimation = styled.keyframes(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n    0% {\n        opacity: 0;\n        transform: scale3d(1, 1, 1);\n    }\n    80% {\n        opacity: 1;\n    }\n    100% {\n        transform: scale3d(2, 2, 1);\n        opacity: 0;\n    }\n"], ["\n    0% {\n        opacity: 0;\n        transform: scale3d(1, 1, 1);\n    }\n    80% {\n        opacity: 1;\n    }\n    100% {\n        transform: scale3d(2, 2, 1);\n        opacity: 0;\n    }\n"])));
-  var progressBarAnimation = styled.keyframes(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"], ["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"])));
-  var dualRingSpinnerAnimation = styled.keyframes(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"], ["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"])));
-  var progressBorderAnimation = styled.keyframes(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n    to {\n        stroke-dashoffset: 0;\n    }\n"], ["\n    to {\n        stroke-dashoffset: 0;\n    }\n"])));
-  var templateObject_1$O, templateObject_2$I, templateObject_3$u, templateObject_4$o;
+  var progressBarAnimation = styled.keyframes(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"], ["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"])));
+  var dualRingSpinnerAnimation = styled.keyframes(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"], ["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"])));
+  var progressBorderAnimation = styled.keyframes(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n    to {\n        stroke-dashoffset: 0;\n    }\n"], ["\n    to {\n        stroke-dashoffset: 0;\n    }\n"])));
+  var templateObject_1$O, templateObject_2$J, templateObject_3$v, templateObject_4$p;
 
   var OverlayContainer = styled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  background: ", ";\n  ", "\n\n  z-index: 10000;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  background: ", ";\n  ", "\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$H || (templateObject_2$H = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n  ", "\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n  ", "\n"])), function (props) {
+  var OverlayInner$2 = styled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n  ", "\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\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$t || (templateObject_3$t = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\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  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$n || (templateObject_4$n = __makeTemplateObject(["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100% - 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(100% - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"])));
-  var GrayOverlayContainer = styled(OverlayContainer)(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n  background: #f7f6fb;\n"], ["\n  background: #f7f6fb;\n"])));
-  var ButtonsColumn = styled.div(templateObject_6$9 || (templateObject_6$9 = __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 WideButton = styled(LoaderButton)(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 30px;\n"], ["\n  width: 100%;\n  border-radius: 30px;\n"])));
-  var WideBorderButton = styled(WideButton)(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  color: ", ";\n  background: ", ";\n  border: 1px solid\n    ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  background: ", ";\n  border: 1px solid\n    ", ";\n  box-sizing: border-box;\n"])), function (props) {
+  var OverlayImageContainer = styled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\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  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$o || (templateObject_4$o = __makeTemplateObject(["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100% - 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(100% - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"])));
+  var GrayOverlayContainer = styled(OverlayContainer)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n  background: #f7f6fb;\n"], ["\n  background: #f7f6fb;\n"])));
+  var ButtonsColumn = styled.div(templateObject_6$a || (templateObject_6$a = __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 WideButton = styled(LoaderButton)(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 30px;\n"], ["\n  width: 100%;\n  border-radius: 30px;\n"])));
+  var WideBorderButton = styled(WideButton)(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  color: ", ";\n  background: ", ";\n  border: 1px solid\n    ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  background: ", ";\n  border: 1px solid\n    ", ";\n  box-sizing: border-box;\n"])), function (props) {
     var _a, _b;
     return (_b = (_a = props.colors) === null || _a === void 0 ? void 0 : _a.textColor) !== null && _b !== void 0 ? _b : 'black';
   }, function (props) {
@@ -515,34 +515,34 @@
     var _a, _b;
     return (_b = (_a = props.colors) === null || _a === void 0 ? void 0 : _a.borderColor) !== null && _b !== void 0 ? _b : 'var(--idm-color-secondary-500)';
   });
-  var LoadingOverlayInner = styled(OverlayInner$2)(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n"], ["\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n"])));
-  var LoadingOverlayHeader = styled.div(templateObject_10$1 || (templateObject_10$1 = __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 LoadingOverlayInner = styled(OverlayInner$2)(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n"], ["\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n"])));
+  var LoadingOverlayHeader = styled.div(templateObject_10$2 || (templateObject_10$2 = __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 LoadingOverlayGuidanceMessage = styled(GuidanceMessage)(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n"], ["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n"])));
-  var LoadingOverlayImageContainer = styled(OverlayImageContainer)(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  padding: 0;\n  max-height: 100%;\n  pointer-events: none;\n"], ["\n  padding: 0;\n  max-height: 100%;\n  pointer-events: none;\n"])));
+  var LoadingOverlayGuidanceMessage = styled(GuidanceMessage)(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n"], ["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n"])));
+  var LoadingOverlayImageContainer = styled(OverlayImageContainer)(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n  padding: 0;\n  max-height: 100%;\n  pointer-events: none;\n"], ["\n  padding: 0;\n  max-height: 100%;\n  pointer-events: none;\n"])));
   var LoadingOverlayProgressBarBackground = styled.div.attrs({
     className: 'loading-overlay-progress-bar-background'
-  })(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
+  })(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
   var LoadingOverlayProgressBar = styled.span.attrs({
     className: 'loading-overlay-progress-bar'
-  })(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: block;\n  width: ", "%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  position: absolute;\n"], ["\n  display: block;\n  width: ", "%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  position: absolute;\n"])), function (props) {
+  })(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  display: block;\n  width: ", "%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  position: absolute;\n"], ["\n  display: block;\n  width: ", "%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  position: absolute;\n"])), function (props) {
     return props.$progress;
   });
   var LoadingOverlayProgressIndicator = styled.span.attrs({
     className: 'loading-overlay-progress-indicator'
-  })(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  height: 100%;\n  animation: ", " 3s ease-in-out;\n  animation-fill-mode: both;\n"], ["\n  display: block;\n  height: 100%;\n  animation: ", " 3s ease-in-out;\n  animation-fill-mode: both;\n"])), progressBarAnimation);
-  var LoadingOverlayButtonsRow = styled(ButtonsRow$2)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  min-height: 100px;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  min-height: 100px;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n"])));
-  var LoadingOverlayLoadingListContainer = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  z-index: 2;\n"], ["\n  display: flex;\n  position: relative;\n  z-index: 2;\n"])));
-  var LoadingOverlayLoadingList = styled.ul(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: block;\n  margin: auto;\n  list-style: none;\n  padding: 0;\n"], ["\n  display: block;\n  margin: auto;\n  list-style: none;\n  padding: 0;\n"])));
-  var LoadingOverlayLoadingListItem = styled.li(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 1.25rem 2px 0;\n  line-height: 1rem;\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 1.25rem 2px 0;\n  line-height: 1rem;\n"])));
-  var LoadingOverlayProgressContainer = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
-  var LoadingOverlayCustomLoadingGraphic = styled.img(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n"], ["\n  transform-style: preserve-3d;\n"])));
-  var LoadingOverlayContinueButtonContainer = styled.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-  var templateObject_1$N, templateObject_2$H, templateObject_3$t, templateObject_4$n, templateObject_5$f, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
+  })(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n  display: block;\n  height: 100%;\n  animation: ", " 3s ease-in-out;\n  animation-fill-mode: both;\n"], ["\n  display: block;\n  height: 100%;\n  animation: ", " 3s ease-in-out;\n  animation-fill-mode: both;\n"])), progressBarAnimation);
+  var LoadingOverlayButtonsRow = styled(ButtonsRow$2)(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  min-height: 100px;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  min-height: 100px;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n"])));
+  var LoadingOverlayLoadingListContainer = styled.div(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  z-index: 2;\n"], ["\n  display: flex;\n  position: relative;\n  z-index: 2;\n"])));
+  var LoadingOverlayLoadingList = styled.ul(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n  display: block;\n  margin: auto;\n  list-style: none;\n  padding: 0;\n"], ["\n  display: block;\n  margin: auto;\n  list-style: none;\n  padding: 0;\n"])));
+  var LoadingOverlayLoadingListItem = styled.li(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 1.25rem 2px 0;\n  line-height: 1rem;\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 1.25rem 2px 0;\n  line-height: 1rem;\n"])));
+  var LoadingOverlayProgressContainer = styled.div(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
+  var LoadingOverlayCustomLoadingGraphic = styled.img(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n"], ["\n  transform-style: preserve-3d;\n"])));
+  var LoadingOverlayContinueButtonContainer = styled.div(templateObject_22$1 || (templateObject_22$1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+  var templateObject_1$N, templateObject_2$I, templateObject_3$u, templateObject_4$o, templateObject_5$g, templateObject_6$a, templateObject_7$6, templateObject_8$5, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1;
 
   function _extends() {
     return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -9176,7 +9176,7 @@
   }
 
   var InvisibleCanvasContainer = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n  user-select: none;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n  user-select: none;\n"])));
-  var InvisibleCanvas = styled.canvas(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+  var InvisibleCanvas = styled.canvas(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
   function drawToCanvas(canvas, frame, width, height) {
     if (!canvas) return;
     var ctx = canvas.getContext('2d');
@@ -9196,7 +9196,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$M, templateObject_2$G;
+  var templateObject_1$M, templateObject_2$H;
 
   function useFrameLoop(fn, options) {
     if (options === void 0) {
@@ -13854,13 +13854,13 @@
     }, messageText)));
   }
   var StyledOverlayInner$4 = styled(OverlayInner$2)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-  var StyledOverlayHeading = styled.h3(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var StyledOverlayHeading = styled.h3(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
   function useCameraStore(selector) {
     var store = React.useContext(CameraStoreContext);
     if (!store) throw new Error('useCameraStore cannot be used without Provider');
     return useStore(store, selector);
   }
-  var templateObject_1$L, templateObject_2$F;
+  var templateObject_1$L, templateObject_2$G;
 
   var DocumentDetectionModelContext = /*#__PURE__*/React.createContext({
     startDocumentDetection: function startDocumentDetection() {
@@ -15961,11 +15961,11 @@
     return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
   }
   var DebugStatsPaneDiv = styled.span(templateObject_1$K || (templateObject_1$K = __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  pointer-events: none;\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  pointer-events: none;\n"])));
-  var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1001;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  pointer-events: none;\n  ", "\n  transform-style: preserve-3d;\n"], ["\n  position: absolute;\n  z-index: 1001;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  pointer-events: none;\n  ", "\n  transform-style: preserve-3d;\n"])), function (_a) {
+  var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1001;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  pointer-events: none;\n  ", "\n  transform-style: preserve-3d;\n"], ["\n  position: absolute;\n  z-index: 1001;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  pointer-events: none;\n  ", "\n  transform-style: preserve-3d;\n"])), function (_a) {
     var $flipX = _a.$flipX;
     return $flipX ? 'transform: scaleX(-1);' : '';
   });
-  var ObjectDetectionDebugBox = styled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n  transform-style: preserve-3d;\n"], ["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n  transform-style: preserve-3d;\n"])), function (_a) {
+  var ObjectDetectionDebugBox = styled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n  transform-style: preserve-3d;\n"], ["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n  transform-style: preserve-3d;\n"])), function (_a) {
     var $color = _a.$color;
     return $color !== null && $color !== void 0 ? $color : 'green';
   }, function (_a) {
@@ -15975,7 +15975,7 @@
     var $flipX = _a.$flipX;
     return $flipX ? 'transform: scaleX(-1);' : '';
   });
-  var FaceDetectionKeypointMarker = styled.div(templateObject_4$m || (templateObject_4$m = __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  transform-style: preserve-3d;\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  transform-style: preserve-3d;\n"])), function (_a) {
+  var FaceDetectionKeypointMarker = styled.div(templateObject_4$n || (templateObject_4$n = __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  transform-style: preserve-3d;\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  transform-style: preserve-3d;\n"])), function (_a) {
     var $color = _a.$color;
     return $color !== null && $color !== void 0 ? $color : 'red';
   }, function (_a) {
@@ -16172,7 +16172,7 @@
       }
     });
   }
-  var templateObject_1$K, templateObject_2$E, templateObject_3$s, templateObject_4$m;
+  var templateObject_1$K, templateObject_2$F, templateObject_3$t, templateObject_4$n;
 
   function OverrideWrongDocumentTypeGuidanceDialog(_a) {
     var _b = _a.classNames,
@@ -16212,11 +16212,11 @@
     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$D || (templateObject_2$D = __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$r || (templateObject_3$r = __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$l || (templateObject_4$l = __makeTemplateObject(["\n  display: flex;\n  margin-left: auto;\n"], ["\n  display: flex;\n  margin-left: auto;\n"])));
-  var Button$1 = styled(LoaderButton)(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  white-space: nowrap;\n  margin: auto;\n"], ["\n  white-space: nowrap;\n  margin: auto;\n"])));
-  var templateObject_1$J, templateObject_2$D, templateObject_3$r, templateObject_4$l, templateObject_5$e;
+  var InnerContainer = styled.div(templateObject_2$E || (templateObject_2$E = __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$s || (templateObject_3$s = __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$m || (templateObject_4$m = __makeTemplateObject(["\n  display: flex;\n  margin-left: auto;\n"], ["\n  display: flex;\n  margin-left: auto;\n"])));
+  var Button$1 = styled(LoaderButton)(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n  white-space: nowrap;\n  margin: auto;\n"], ["\n  white-space: nowrap;\n  margin: auto;\n"])));
+  var templateObject_1$J, templateObject_2$E, templateObject_3$s, templateObject_4$m, templateObject_5$f;
 
   // This is a simplified version of https://github.com/ZeeCoder/use-resize-observer.
   // We have removed all options and made it compliant with React Compiler/React 19.
@@ -16559,10 +16559,10 @@
     }, verbiage.retryBtnText)));
   };
   var StyledOverlayInner$3 = styled(OverlayInner$2)(templateObject_1$I || (templateObject_1$I = __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$4 = styled.p(templateObject_3$q || (templateObject_3$q = __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$k || (templateObject_4$k = __makeTemplateObject(["\n  width: 200px;\n  margin: 0 auto;\n"], ["\n  width: 200px;\n  margin: 0 auto;\n"])));
-  var templateObject_1$I, templateObject_2$C, templateObject_3$q, templateObject_4$k;
+  var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
+  var Description$4 = styled.p(templateObject_3$r || (templateObject_3$r = __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$l || (templateObject_4$l = __makeTemplateObject(["\n  width: 200px;\n  margin: 0 auto;\n"], ["\n  width: 200px;\n  margin: 0 auto;\n"])));
+  var templateObject_1$I, templateObject_2$D, templateObject_3$r, templateObject_4$l;
 
   var ExitCaptureStyledButton = styled.button(templateObject_1$H || (templateObject_1$H = __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: 10002;\n  border: none;\n  border-radius: 4px;\n  background: var(--idm-color-secondary-200);\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: 10002;\n  border: none;\n  border-radius: 4px;\n  background: var(--idm-color-secondary-200);\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) {
@@ -17084,20 +17084,20 @@
     }))));
   }
   var LoadingGraphicWrapper = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: flex;\n  width: 100%;\n  height: 100%;\n"])));
-  var LoadingGraphicSvg = styled.svg(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  margin: auto;\n  transform: scale(\n    ", "\n  );\n  transform-style: preserve-3d;\n  transition:\n    transform 0.2s linear,\n    border-width 0.2s linear;\n  border: ", "px solid\n    ", ";\n  max-height: 80%;\n  max-width: 80%;\n"], ["\n  margin: auto;\n  transform: scale(\n    ", "\n  );\n  transform-style: preserve-3d;\n  transition:\n    transform 0.2s linear,\n    border-width 0.2s linear;\n  border: ", "px solid\n    ", ";\n  max-height: 80%;\n  max-width: 80%;\n"])), function (props) {
+  var LoadingGraphicSvg = styled.svg(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n  margin: auto;\n  transform: scale(\n    ", "\n  );\n  transform-style: preserve-3d;\n  transition:\n    transform 0.2s linear,\n    border-width 0.2s linear;\n  border: ", "px solid\n    ", ";\n  max-height: 80%;\n  max-width: 80%;\n"], ["\n  margin: auto;\n  transform: scale(\n    ", "\n  );\n  transform-style: preserve-3d;\n  transition:\n    transform 0.2s linear,\n    border-width 0.2s linear;\n  border: ", "px solid\n    ", ";\n  max-height: 80%;\n  max-width: 80%;\n"])), function (props) {
     return props.$frame > 1 ? 1 : props.$frame === 1 ? 1.25 : 0.75;
   }, function (props) {
     return props.$frame >= 5 ? 10 : 0;
   }, function (props) {
     return props.$borderColor;
   });
-  var LoadingGraphicCardGroup = styled.g(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  transform: translate(", ", 0);\n  transform-style: preserve-3d;\n  transition: transform 0.3s linear;\n"], ["\n  transform: translate(", ", 0);\n  transform-style: preserve-3d;\n  transition: transform 0.3s linear;\n"])), function (props) {
+  var LoadingGraphicCardGroup = styled.g(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  transform: translate(", ", 0);\n  transform-style: preserve-3d;\n  transition: transform 0.3s linear;\n"], ["\n  transform: translate(", ", 0);\n  transform-style: preserve-3d;\n  transition: transform 0.3s linear;\n"])), function (props) {
     return props.$offScreen ? '-500px' : '0';
   });
-  var LoadingGraphicPhoneGroup = styled.g(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  transform: translate(", ", 0);\n  transform-style: preserve-3d;\n  transition: transform 0.3s linear;\n"], ["\n  transform: translate(", ", 0);\n  transform-style: preserve-3d;\n  transition: transform 0.3s linear;\n"])), function (props) {
+  var LoadingGraphicPhoneGroup = styled.g(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n  transform: translate(", ", 0);\n  transform-style: preserve-3d;\n  transition: transform 0.3s linear;\n"], ["\n  transform: translate(", ", 0);\n  transform-style: preserve-3d;\n  transition: transform 0.3s linear;\n"])), function (props) {
     return props.$offScreen ? '40px' : '0';
   });
-  var templateObject_1$G, templateObject_2$B, templateObject_3$p, templateObject_4$j;
+  var templateObject_1$G, templateObject_2$C, templateObject_3$q, templateObject_4$k;
 
   function LoadingListItemIndicator(_a) {
     var _b = _a.state,
@@ -17373,28 +17373,28 @@
     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 ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  position: absolute;\n  bottom: 120px;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  bottom: 120px;\n  width: 100%;\n  display: flex;\n"])));
-  var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n  align-items: center;\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  display: flex;\n  gap: 8px;\n  align-items: center;\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_4$i || (templateObject_4$i = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-  var ButtonsRow$1 = styled(LoadingOverlayButtonsRow)(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  color: ", ";\n  ", "\n"], ["\n  color: ", ";\n  ", "\n"])), function (props) {
+  var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  position: absolute;\n  bottom: 120px;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  bottom: 120px;\n  width: 100%;\n  display: flex;\n"])));
+  var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n  align-items: center;\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  display: flex;\n  gap: 8px;\n  align-items: center;\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_4$j || (templateObject_4$j = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+  var ButtonsRow$1 = styled(LoadingOverlayButtonsRow)(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  color: ", ";\n  ", "\n"], ["\n  color: ", ";\n  ", "\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.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
   }, function (props) {
     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.progressBarFontSize) ? "font-size: ".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.progressBarFontSize, ";") : '';
   });
-  var ProgressBarBackground$1 = styled(LoadingOverlayProgressBarBackground)(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  background: ", ";\n  opacity: ", ";\n"], ["\n  background: ", ";\n  opacity: ", ";\n"])), function (props) {
+  var ProgressBarBackground$1 = styled(LoadingOverlayProgressBarBackground)(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  background: ", ";\n  opacity: ", ";\n"], ["\n  background: ", ";\n  opacity: ", ";\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.progressBarBackgroundColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
   }, 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.progressBarBackgroundOpacity) !== null && _d !== void 0 ? _d : 0.75;
   });
-  var ProgressIndicator$1 = styled(LoadingOverlayProgressIndicator)(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (props) {
+  var ProgressIndicator$1 = styled(LoadingOverlayProgressIndicator)(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\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.progressBarIndicatorColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-primary-500)';
   });
-  var ContinueButton$1 = styled(LoaderButton)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n  \n  &:focus-visible {\n    ", "\n    box-shadow: none;\n  }\n\n  &.disabled {\n    background: ", ";\n    color: ", ";\n    border: ", ";\n  }\n"], ["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n  \n  &:focus-visible {\n    ", "\n    box-shadow: none;\n  }\n\n  &.disabled {\n    background: ", ";\n    color: ", ";\n    border: ", ";\n  }\n"])), function (props) {
+  var ContinueButton$1 = styled(LoaderButton)(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n  \n  &:focus-visible {\n    ", "\n    box-shadow: none;\n  }\n\n  &.disabled {\n    background: ", ";\n    color: ", ";\n    border: ", ";\n  }\n"], ["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n  \n  &:focus-visible {\n    ", "\n    box-shadow: none;\n  }\n\n  &.disabled {\n    background: ", ";\n    color: ", ";\n    border: ", ";\n  }\n"])), function (props) {
     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.progressBarFontSize) ? "font-size: ".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.progressBarFontSize, ";") : '';
   }, function (props) {
@@ -17413,10 +17413,10 @@
     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.continueBtnDisabledBorder) !== null && _d !== void 0 ? _d : 'none';
   });
-  var templateObject_1$F, templateObject_2$A, templateObject_3$o, templateObject_4$i, templateObject_5$d, templateObject_6$8, templateObject_7$4, templateObject_8$3;
+  var templateObject_1$F, templateObject_2$B, templateObject_3$p, templateObject_4$j, templateObject_5$e, templateObject_6$9, templateObject_7$5, templateObject_8$4;
 
   var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$E || (templateObject_1$E = __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$z || (templateObject_2$z = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
+  var ContinuityCameraCheckbox = styled.input(templateObject_2$A || (templateObject_2$A = __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,
@@ -17537,7 +17537,7 @@
       }
     }, ready ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
   };
-  var templateObject_1$E, templateObject_2$z;
+  var templateObject_1$E, templateObject_2$A;
 
   var components$1 = {
     "default": IdCaptureLoadingOverlayDefault,
@@ -17596,8 +17596,8 @@
   };
 
   var Card = styled.div(templateObject_1$D || (templateObject_1$D = __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: min(500px, 100% - 48px);\n  max-height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\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: min(500px, 100% - 48px);\n  max-height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n"])));
-  var FlexCard = styled(Card)(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-  var templateObject_1$D, templateObject_2$y;
+  var FlexCard = styled(Card)(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+  var templateObject_1$D, templateObject_2$z;
 
   var imageDisplayOrder = ['idCardFront', 'idCardBack', 'idBarcodeImage', 'passport', 'singlePage', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage'];
   var IdCaptureSuccess = function IdCaptureSuccess(_a) {
@@ -17660,12 +17660,12 @@
     }, verbiage.retryText)))));
   };
   var Heading$a = styled.h1(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  font-size: 1.5rem;\n  margin-top: 0;\n  margin-bottom: 1.5rem;\n"], ["\n  font-size: 1.5rem;\n  margin-top: 0;\n  margin-bottom: 1.5rem;\n"])));
-  var ImagesContainer = styled(OverlayImageContainer)(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  flex-grow: 1;\n  overflow-y: auto;\n  padding-bottom: 0;\n  max-width: 100%;\n"], ["\n  flex-grow: 1;\n  overflow-y: auto;\n  padding-bottom: 0;\n  max-width: 100%;\n"])));
-  var ImageRow = styled(OverlayImageRow)(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  max-width: 100%;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n"], ["\n  max-width: 100%;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n"])));
-  var ImageCol$1 = styled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  width: 450px;\n  max-width: 100%;\n  max-height: none !important;\n"], ["\n  width: 450px;\n  max-width: 100%;\n  max-height: none !important;\n"])));
-  var StyledImage = styled(CapturedDocumentImg)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 12px;\n"], ["\n  width: 100%;\n  border-radius: 12px;\n"])));
-  var DebugPre = styled.pre(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  display: block;\n  text-align: left;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: auto;\n"], ["\n  display: block;\n  text-align: left;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: auto;\n"])));
-  var templateObject_1$C, templateObject_2$x, templateObject_3$n, templateObject_4$h, templateObject_5$c, templateObject_6$7;
+  var ImagesContainer = styled(OverlayImageContainer)(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  flex-grow: 1;\n  overflow-y: auto;\n  padding-bottom: 0;\n  max-width: 100%;\n"], ["\n  flex-grow: 1;\n  overflow-y: auto;\n  padding-bottom: 0;\n  max-width: 100%;\n"])));
+  var ImageRow = styled(OverlayImageRow)(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  max-width: 100%;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n"], ["\n  max-width: 100%;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n"])));
+  var ImageCol$1 = styled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  width: 450px;\n  max-width: 100%;\n  max-height: none !important;\n"], ["\n  width: 450px;\n  max-width: 100%;\n  max-height: none !important;\n"])));
+  var StyledImage = styled(CapturedDocumentImg)(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 12px;\n"], ["\n  width: 100%;\n  border-radius: 12px;\n"])));
+  var DebugPre = styled.pre(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  display: block;\n  text-align: left;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: auto;\n"], ["\n  display: block;\n  text-align: left;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: auto;\n"])));
+  var templateObject_1$C, templateObject_2$y, templateObject_3$o, templateObject_4$i, templateObject_5$d, templateObject_6$8;
 
   function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
     var _this = this;
@@ -17722,7 +17722,7 @@
   }, function (props) {
     return props.$isMobile ? props.$isLandscape ? 'height: 100%;' : 'width: 80%;' : props.$isLandscape ? 'height: 70%;' : 'width: 82%;';
   });
-  var IdCardGuideImage = styled.img(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  max-height: 100%;\n  transform-style: preserve-3d;\n  ", "\n  ", "\n"], ["\n  max-height: 100%;\n  transform-style: preserve-3d;\n  ", "\n  ", "\n"])), function (props) {
+  var IdCardGuideImage = styled.img(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  max-height: 100%;\n  transform-style: preserve-3d;\n  ", "\n  ", "\n"], ["\n  max-height: 100%;\n  transform-style: preserve-3d;\n  ", "\n  ", "\n"])), function (props) {
     return props.$isMirrored ? 'transform: scaleX(-1);' : '';
   }, function (props) {
     return props.$isInvisible ? 'opacity: 0;' : '';
@@ -17872,17 +17872,17 @@
       className: isProgressBar ? "idmSdkProgressBorder ".concat(progressPaused ? 'idmSdkProgressPaused' : '') : ''
     }));
   }
-  var IdCardBorderContainer = styled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  position: relative;\n  margin: auto;\n\n  & .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(3) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(4) {\n      animation-delay: 1.33s;\n    }\n  }\n"], ["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  position: relative;\n  margin: auto;\n\n  & .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(3) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(4) {\n      animation-delay: 1.33s;\n    }\n  }\n"])), wavesAnimation);
-  var IdCardBorderInner = styled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  max-height: 100%;\n  max-width: 100%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n"], ["\n  max-height: 100%;\n  max-width: 100%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n"])));
-  var SvgOverlay = styled.svg(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n"])));
-  var IdCardBorderRect = styled.rect(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  &.idmSdkProgressBorder {\n    animation: ", " ", "\n      ", ";\n  }\n\n  &.idmSdkProgressPaused {\n    animation-play-state: paused;\n  }\n"], ["\n  &.idmSdkProgressBorder {\n    animation: ", " ", "\n      ", ";\n  }\n\n  &.idmSdkProgressPaused {\n    animation-play-state: paused;\n  }\n"])), progressBorderAnimation, function (props) {
+  var IdCardBorderContainer = styled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  position: relative;\n  margin: auto;\n\n  & .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(3) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(4) {\n      animation-delay: 1.33s;\n    }\n  }\n"], ["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  position: relative;\n  margin: auto;\n\n  & .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(3) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(4) {\n      animation-delay: 1.33s;\n    }\n  }\n"])), wavesAnimation);
+  var IdCardBorderInner = styled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  max-height: 100%;\n  max-width: 100%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n"], ["\n  max-height: 100%;\n  max-width: 100%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n"])));
+  var SvgOverlay = styled.svg(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n"])));
+  var IdCardBorderRect = styled.rect(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  &.idmSdkProgressBorder {\n    animation: ", " ", "\n      ", ";\n  }\n\n  &.idmSdkProgressPaused {\n    animation-play-state: paused;\n  }\n"], ["\n  &.idmSdkProgressBorder {\n    animation: ", " ", "\n      ", ";\n  }\n\n  &.idmSdkProgressPaused {\n    animation-play-state: paused;\n  }\n"])), progressBorderAnimation, function (props) {
     var _a;
     return (_a = props.$speed) !== null && _a !== void 0 ? _a : '3s';
   }, function (props) {
     var _a;
     return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
   });
-  var templateObject_1$B, templateObject_2$w, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$6;
+  var templateObject_1$B, templateObject_2$x, templateObject_3$n, templateObject_4$h, templateObject_5$c, templateObject_6$7;
 
   var defaultIdCaptureGuideImages = {
     portrait: {
@@ -18074,12 +18074,12 @@
   var Wrapper$1 = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), function (props) {
     return props.$isLandscape ? 'height: 100%;' : 'height: 100%;';
   });
-  var FlipImageContainer = styled(IdCardGuideImageContainer)(templateObject_2$v || (templateObject_2$v = __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  height: 100%; // todo: branch between desktop and mobile\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  height: 100%; // todo: branch between desktop and mobile\n"])), function (props) {
+  var FlipImageContainer = styled(IdCardGuideImageContainer)(templateObject_2$w || (templateObject_2$w = __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  height: 100%; // todo: branch between desktop and mobile\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  height: 100%; // todo: branch between desktop and mobile\n"])), function (props) {
     return props.$transitionTime;
   }, function (props) {
     return props.$transforms;
   });
-  var templateObject_1$A, templateObject_2$v;
+  var templateObject_1$A, templateObject_2$w;
 
   var GuideOrientationContext = /*#__PURE__*/React.createContext({
     orientation: 'landscape',
@@ -18368,9 +18368,9 @@
     }).join(' ');
   };
   var StyledPageContainer = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1000;\n  overflow: hidden;\n"], ["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1000;\n  overflow: hidden;\n"])));
-  var GuidesContainer = styled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: 100%;\n"])));
-  var GuideCenterRow = styled.div(templateObject_3$l || (templateObject_3$l = __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$f || (templateObject_4$f = __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 GuidesContainer = styled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: 100%;\n"])));
+  var GuideCenterRow = styled.div(templateObject_3$m || (templateObject_3$m = __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$g || (templateObject_4$g = __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) {
@@ -18381,23 +18381,23 @@
   }, function (props) {
     return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
   });
-  var Spacer = styled(GuideRegion)(templateObject_5$a || (templateObject_5$a = __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  transform-style: preserve-3d;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  max-height: 100%;\n  height: 100%;\n"], ["\n  ", "\n  ", "\n  transform-style: preserve-3d;\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$b || (templateObject_5$b = __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  transform-style: preserve-3d;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  max-height: 100%;\n  height: 100%;\n"], ["\n  ", "\n  ", "\n  transform-style: preserve-3d;\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$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  max-width: 100%;\n  position: relative;\n  ", "\n"], ["\n  box-sizing: border-box;\n  border: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  max-height: 100%;\n  min-height: 0;\n  max-width: 100%;\n  position: relative;\n  ", "\n"])), function (props) {
+  var GuideCenterBorder = styled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  max-height: 100%;\n  min-height: 0;\n  max-width: 100%;\n  position: relative;\n  ", "\n"], ["\n  box-sizing: border-box;\n  border: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  max-height: 100%;\n  min-height: 0;\n  max-width: 100%;\n  position: relative;\n  ", "\n"])), function (props) {
     var _a, _b;
     return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
   }, function (props) {
     return props.$padding ? "padding: ".concat(props.$padding, "px;") : '';
   });
-  var GuideText = styled.span(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"], ["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"])));
-  var GuideCenterInner = styled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  position: relative;\n  top: 0;\n  margin: auto;\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  position: relative;\n  top: 0;\n  margin: auto;\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (props) {
+  var GuideText = styled.span(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"], ["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"])));
+  var GuideCenterInner = styled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n  position: relative;\n  top: 0;\n  margin: auto;\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  position: relative;\n  top: 0;\n  margin: auto;\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (props) {
     return props.$isLandscape ? 'height: 100%;' : 'width: 90%;';
   });
-  var templateObject_1$y, templateObject_2$u, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$5, templateObject_7$3, templateObject_8$2, templateObject_9$1;
+  var templateObject_1$y, templateObject_2$v, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$6, templateObject_7$4, templateObject_8$3, templateObject_9$2;
 
   var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
@@ -18541,8 +18541,8 @@
   var CanvasWrapper$1 = styled.div(templateObject_1$x || (templateObject_1$x = __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$t || (templateObject_2$t = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-  var templateObject_1$x, templateObject_2$t;
+  var Canvas$1 = styled.canvas(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
+  var templateObject_1$x, templateObject_2$u;
 
   function IdCaptureGuides(_a) {
     var _b = _a.guideType,
@@ -18623,11 +18623,11 @@
     var $color = _a.$color;
     return $color !== null && $color !== void 0 ? $color : '#888';
   }, dualRingSpinnerAnimation);
-  var SpinnerPageContainer = styled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n"])));
+  var SpinnerPageContainer = styled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n"])));
   function SpinnerPage() {
     return /*#__PURE__*/React.createElement(SpinnerPageContainer, null, /*#__PURE__*/React.createElement(Spinner$1, null));
   }
-  var templateObject_1$w, templateObject_2$s;
+  var templateObject_1$w, templateObject_2$t;
 
   var IdCaptureImagePreview = function IdCaptureImagePreview(_a) {
     var _b = _a.classNames,
@@ -18715,10 +18715,10 @@
     })));
   };
   var StyledSpinner = styled(Spinner$1)(templateObject_1$v || (templateObject_1$v = __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$r || (templateObject_2$r = __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$k || (templateObject_3$k = __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$e || (templateObject_4$e = __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$v, templateObject_2$r, templateObject_3$k, templateObject_4$e;
+  var ImagePreviewWrapper = styled.div(templateObject_2$s || (templateObject_2$s = __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$l || (templateObject_3$l = __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$f || (templateObject_4$f = __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$v, templateObject_2$s, templateObject_3$l, templateObject_4$f;
 
   var documentCaptureInitialState = {
     documents: [],
@@ -19067,8 +19067,8 @@
   var CanvasWrapper = styled.div(templateObject_1$u || (templateObject_1$u = __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$q || (templateObject_2$q = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-  var templateObject_1$u, templateObject_2$q;
+  var Canvas = styled.canvas(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
+  var templateObject_1$u, templateObject_2$r;
 
   var CameraFeedWrapper = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return props.$mode === 'snapToGuides' ? "display: flex;\n         position: absolute;\n         left: ".concat(props.$x, "px;\n         top: ").concat(props.$y, "px;\n         width: ").concat(props.$w, "px;\n         height: ").concat(props.$h, "px;") : "";
@@ -19254,20 +19254,20 @@
     }, !cameraReady ? verbiage.loadingBtnText : capturing ? verbiage.capturingBtnText : verbiage.captureBtnText))))));
   };
   var CaptureContainer = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
-  var HeadingRow = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  background: ", ";\n  text-align: center;\n  color: white;\n"], ["\n  background: ", ";\n  text-align: center;\n  color: white;\n"])), function (props) {
+  var HeadingRow = styled.div(templateObject_2$q || (templateObject_2$q = __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$j || (templateObject_3$j = __makeTemplateObject(["\n  font-size: 22px;\n"], ["\n  font-size: 22px;\n"])));
-  var FooterRow = styled.div(templateObject_4$d || (templateObject_4$d = __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$9 = styled.h1(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  font-size: 22px;\n"], ["\n  font-size: 22px;\n"])));
+  var FooterRow = styled.div(templateObject_4$e || (templateObject_4$e = __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$9 || (templateObject_5$9 = __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$a || (templateObject_5$a = __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$8 = styled(ButtonsRow$2)(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$r, templateObject_2$p, templateObject_3$j, templateObject_4$d, templateObject_5$9, templateObject_6$4, templateObject_7$2;
+  var StyledButtonsRow$8 = styled(ButtonsRow$2)(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$r, templateObject_2$q, templateObject_3$k, templateObject_4$e, templateObject_5$a, templateObject_6$5, templateObject_7$3;
 
   var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
     var onSuccess = _a.onSuccess,
@@ -19539,12 +19539,12 @@
     }, verbiage.doneBtnText))))));
   };
   var StyledOverlayInner$2 = styled(OverlayInner$2)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-  var Heading$8 = styled.h3(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var Description$3 = styled.p(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var Instruction = styled.p(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
-  var ImageCol = styled.div(templateObject_5$8 || (templateObject_5$8 = __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$7 = styled(ButtonsRow$2)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-  var templateObject_1$q, templateObject_2$o, templateObject_3$i, templateObject_4$c, templateObject_5$8, templateObject_6$3;
+  var Heading$8 = styled.h3(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var Description$3 = styled.p(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var Instruction = styled.p(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
+  var ImageCol = styled.div(templateObject_5$9 || (templateObject_5$9 = __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$7 = styled(ButtonsRow$2)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+  var templateObject_1$q, templateObject_2$p, templateObject_3$j, templateObject_4$d, templateObject_5$9, templateObject_6$4;
 
   function ScalingCameraFeed() {
     var _a = useIdCaptureStore(),
@@ -19900,20 +19900,20 @@
     var _a;
     return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
   });
-  var ScreenPanel = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  flex-grow: 1;\n  background: #f7f6fb;\n  box-sizing: border-box;\n  padding: 40px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  flex-grow: 1;\n  background: #f7f6fb;\n  box-sizing: border-box;\n  padding: 40px;\n"])));
-  var SelectIdCardScreenPanel = styled(ScreenPanel)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  background: white;\n  padding: 80px 0;\n\n  @media (max-height: 1000px) {\n    padding: 40px 0;\n  }\n"], ["\n  background: white;\n  padding: 80px 0;\n\n  @media (max-height: 1000px) {\n    padding: 40px 0;\n  }\n"])));
-  var ScreenPanelHeading = styled.h3(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  margin: 0 0 30px;\n"], ["\n  margin: 0 0 30px;\n"])));
-  var ScreenActionsBar = styled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: end;\n  gap: 20px;\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n  border-top: 1px solid #ccc;\n\n  @media (max-width: 600px) {\n    justify-content: center;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: end;\n  gap: 20px;\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n  border-top: 1px solid #ccc;\n\n  @media (max-width: 600px) {\n    justify-content: center;\n  }\n"])));
-  var DashedSeparator = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  width: 100%;\n  height: 0;\n  border-top: 2px solid #606060;\n  border-top-style: dashed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 0;\n  border-top: 2px solid #606060;\n  border-top-style: dashed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-  var OrWrapper = styled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  color: #323232;\n  font-weight: bold;\n  background: white;\n  border-radius: 50%;\n  top: -2px;\n  position: relative;\n  width: 60px;\n  height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  color: #323232;\n  font-weight: bold;\n  background: white;\n  border-radius: 50%;\n  top: -2px;\n  position: relative;\n  width: 60px;\n  height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-  var UploadIdBackHelpText = styled.p(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  color: #323232;\n  font-style: italic;\n  margin: 30px 0 0;\n"], ["\n  color: #323232;\n  font-style: italic;\n  margin: 30px 0 0;\n"])));
-  var Button = styled(WideBorderButton)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: auto;\n  font-weight: 500;\n  padding-left: 40px;\n  padding-right: 40px;\n  transition: background-color 0.3s ease;\n  background-color: #ffffff;\n  white-space: nowrap;\n\n  &:disabled,\n  &.disabled {\n    background-color: #f1f1f1 !important;\n    border-color: #dbdbdb !important;\n    color: #323232 !important;\n  }\n\n  &:hover {\n    filter: none;\n    background-color: #fafafa !important;\n  }\n"], ["\n  width: auto;\n  font-weight: 500;\n  padding-left: 40px;\n  padding-right: 40px;\n  transition: background-color 0.3s ease;\n  background-color: #ffffff;\n  white-space: nowrap;\n\n  &:disabled,\n  &.disabled {\n    background-color: #f1f1f1 !important;\n    border-color: #dbdbdb !important;\n    color: #323232 !important;\n  }\n\n  &:hover {\n    filter: none;\n    background-color: #fafafa !important;\n  }\n"])));
-  var Modal = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 10000;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 10000;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])));
-  var Dialog = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: 100%;\n  max-width: 500px;\n  height: 100%;\n  max-height: 600px;\n  background: white;\n  border-radius: 25px;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n  font-family: ", ";\n  //margin: 25px;\n"], ["\n  width: 100%;\n  max-width: 500px;\n  height: 100%;\n  max-height: 600px;\n  background: white;\n  border-radius: 25px;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n  font-family: ", ";\n  //margin: 25px;\n"])), function (props) {
+  var ScreenPanel = styled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  flex-grow: 1;\n  background: #f7f6fb;\n  box-sizing: border-box;\n  padding: 40px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  flex-grow: 1;\n  background: #f7f6fb;\n  box-sizing: border-box;\n  padding: 40px;\n"])));
+  var SelectIdCardScreenPanel = styled(ScreenPanel)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  background: white;\n  padding: 80px 0;\n\n  @media (max-height: 1000px) {\n    padding: 40px 0;\n  }\n"], ["\n  background: white;\n  padding: 80px 0;\n\n  @media (max-height: 1000px) {\n    padding: 40px 0;\n  }\n"])));
+  var ScreenPanelHeading = styled.h3(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  margin: 0 0 30px;\n"], ["\n  margin: 0 0 30px;\n"])));
+  var ScreenActionsBar = styled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: end;\n  gap: 20px;\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n  border-top: 1px solid #ccc;\n\n  @media (max-width: 600px) {\n    justify-content: center;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: end;\n  gap: 20px;\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n  border-top: 1px solid #ccc;\n\n  @media (max-width: 600px) {\n    justify-content: center;\n  }\n"])));
+  var DashedSeparator = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  width: 100%;\n  height: 0;\n  border-top: 2px solid #606060;\n  border-top-style: dashed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 0;\n  border-top: 2px solid #606060;\n  border-top-style: dashed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+  var OrWrapper = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  color: #323232;\n  font-weight: bold;\n  background: white;\n  border-radius: 50%;\n  top: -2px;\n  position: relative;\n  width: 60px;\n  height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  color: #323232;\n  font-weight: bold;\n  background: white;\n  border-radius: 50%;\n  top: -2px;\n  position: relative;\n  width: 60px;\n  height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+  var UploadIdBackHelpText = styled.p(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  color: #323232;\n  font-style: italic;\n  margin: 30px 0 0;\n"], ["\n  color: #323232;\n  font-style: italic;\n  margin: 30px 0 0;\n"])));
+  var Button = styled(WideBorderButton)(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  width: auto;\n  font-weight: 500;\n  padding-left: 40px;\n  padding-right: 40px;\n  transition: background-color 0.3s ease;\n  background-color: #ffffff;\n  white-space: nowrap;\n\n  &:disabled,\n  &.disabled {\n    background-color: #f1f1f1 !important;\n    border-color: #dbdbdb !important;\n    color: #323232 !important;\n  }\n\n  &:hover {\n    filter: none;\n    background-color: #fafafa !important;\n  }\n"], ["\n  width: auto;\n  font-weight: 500;\n  padding-left: 40px;\n  padding-right: 40px;\n  transition: background-color 0.3s ease;\n  background-color: #ffffff;\n  white-space: nowrap;\n\n  &:disabled,\n  &.disabled {\n    background-color: #f1f1f1 !important;\n    border-color: #dbdbdb !important;\n    color: #323232 !important;\n  }\n\n  &:hover {\n    filter: none;\n    background-color: #fafafa !important;\n  }\n"])));
+  var Modal = styled.div(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 10000;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 10000;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])));
+  var Dialog = styled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n  width: 100%;\n  max-width: 500px;\n  height: 100%;\n  max-height: 600px;\n  background: white;\n  border-radius: 25px;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n  font-family: ", ";\n  //margin: 25px;\n"], ["\n  width: 100%;\n  max-width: 500px;\n  height: 100%;\n  max-height: 600px;\n  background: white;\n  border-radius: 25px;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n  font-family: ", ";\n  //margin: 25px;\n"])), function (props) {
     var _a;
     return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
   });
-  var ModalCloseButton = styled.button(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  width: 60px;\n  height: 60px;\n  background: black;\n  color: whitesmoke;\n  border-radius: 50%;\n  font-size: 32px;\n  border: none;\n  cursor: pointer;\n  margin: 20px 0;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n  transition: background 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 0;\n\n  &:hover {\n    background: #222;\n    color: white;\n  }\n"], ["\n  width: 60px;\n  height: 60px;\n  background: black;\n  color: whitesmoke;\n  border-radius: 50%;\n  font-size: 32px;\n  border: none;\n  cursor: pointer;\n  margin: 20px 0;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n  transition: background 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 0;\n\n  &:hover {\n    background: #222;\n    color: white;\n  }\n"])));
+  var ModalCloseButton = styled.button(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  width: 60px;\n  height: 60px;\n  background: black;\n  color: whitesmoke;\n  border-radius: 50%;\n  font-size: 32px;\n  border: none;\n  cursor: pointer;\n  margin: 20px 0;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n  transition: background 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 0;\n\n  &:hover {\n    background: #222;\n    color: white;\n  }\n"], ["\n  width: 60px;\n  height: 60px;\n  background: black;\n  color: whitesmoke;\n  border-radius: 50%;\n  font-size: 32px;\n  border: none;\n  cursor: pointer;\n  margin: 20px 0;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n  transition: background 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 0;\n\n  &:hover {\n    background: #222;\n    color: white;\n  }\n"])));
   function XIcon(props) {
     return /*#__PURE__*/React.createElement("svg", _assign({
       width: "25",
@@ -20164,7 +20164,7 @@
       strokeWidth: "3"
     }));
   }
-  var InlineSvg = styled.svg(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: inline;\n"], ["\n  display: inline;\n"])));
+  var InlineSvg = styled.svg(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  display: inline;\n"], ["\n  display: inline;\n"])));
   function humanFileSize(bytes, si, dp) {
     if (si === void 0) {
       si = false;
@@ -20185,7 +20185,7 @@
     } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
     return bytes.toFixed(dp) + ' ' + units[u];
   }
-  var templateObject_1$p, templateObject_2$n, templateObject_3$h, templateObject_4$b, templateObject_5$7, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+  var templateObject_1$p, templateObject_2$o, templateObject_3$i, templateObject_4$c, templateObject_5$8, templateObject_6$3, templateObject_7$2, templateObject_8$2, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1;
 
   var lastDocumentDetectedAtDefaults = {
     idCardFront: null,
@@ -21003,8 +21003,8 @@
       height: parentHeight
     })));
   }
-  var AbsoluteSvg = styled.svg(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n"])));
-  var RelativeSvgContainer = styled.div(templateObject_3$g || (templateObject_3$g = __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) {
+  var AbsoluteSvg = styled.svg(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n"])));
+  var RelativeSvgContainer = styled.div(templateObject_3$h || (templateObject_3$h = __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 === 'bottom' ? 'flex-end' : 'center';
   });
   function SelfieCaptureAnimatedMask(_a) {
@@ -21231,10 +21231,10 @@
       status: status
     }));
   }
-  var templateObject_1$o, templateObject_2$m, templateObject_3$g;
+  var templateObject_1$o, templateObject_2$n, templateObject_3$h;
 
   var FaceCaptureGuideContainer = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\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: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  box-sizing: border-box;\n"])));
-  var FaceCaptureGuideInner = styled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  position: relative;\n  height: 60%;\n"], ["\n  position: relative;\n  height: 60%;\n"])));
+  var FaceCaptureGuideInner = styled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  position: relative;\n  height: 60%;\n"], ["\n  position: relative;\n  height: 60%;\n"])));
   var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
     var _b = _a.classNames,
       classNames = _b === void 0 ? {} : _b,
@@ -21256,7 +21256,7 @@
       verticalAlign: "center"
     })));
   };
-  var templateObject_1$n, templateObject_2$l;
+  var templateObject_1$n, templateObject_2$m;
 
   var defaultSelfieCaptureModelLoadTimeoutMs = 45000;
   var detector = null;
@@ -22042,11 +22042,11 @@
     }, !image ? invalidSelfie ? verbiage.retryButtonText : verbiage.captureBtnText : loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText)))));
   };
   var StyledOverlayInner$1 = styled(OverlayInner$2)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-  var Heading$7 = styled.h3(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var Description$2 = styled.p(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var ImageContainer$6 = styled(OverlayImageContainer)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-  var StyledButtonsRow$6 = styled(ButtonsRow$2)(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-  var templateObject_1$m, templateObject_2$k, templateObject_3$f, templateObject_4$a, templateObject_5$6;
+  var Heading$7 = styled.h3(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var Description$2 = styled.p(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var ImageContainer$6 = styled(OverlayImageContainer)(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+  var StyledButtonsRow$6 = styled(ButtonsRow$2)(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+  var templateObject_1$m, templateObject_2$l, templateObject_3$g, templateObject_4$b, templateObject_5$7;
 
   var initialState$4 = {
     busy: false,
@@ -22239,9 +22239,9 @@
     }));
   };
   var Container$6 = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
-  var CaptureButtonContainer$1 = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  display: flex;\n  z-index: 100000;\n  box-sizing: border-box;\n  padding: 0 12px 12px;\n"], ["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  display: flex;\n  z-index: 100000;\n  box-sizing: border-box;\n  padding: 0 12px 12px;\n"])));
-  var CaptureButton$1 = styled(LoaderButton)(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  margin: 0 auto;\n  width: 100%;\n  border-radius: 30px;\n"], ["\n  margin: 0 auto;\n  width: 100%;\n  border-radius: 30px;\n"])));
-  var templateObject_1$l, templateObject_2$j, templateObject_3$e;
+  var CaptureButtonContainer$1 = styled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  display: flex;\n  z-index: 100000;\n  box-sizing: border-box;\n  padding: 0 12px 12px;\n"], ["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  display: flex;\n  z-index: 100000;\n  box-sizing: border-box;\n  padding: 0 12px 12px;\n"])));
+  var CaptureButton$1 = styled(LoaderButton)(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  margin: 0 auto;\n  width: 100%;\n  border-radius: 30px;\n"], ["\n  margin: 0 auto;\n  width: 100%;\n  border-radius: 30px;\n"])));
+  var templateObject_1$l, templateObject_2$k, templateObject_3$f;
 
   var initialState$3 = {
     requestState: 'CAPTURING',
@@ -22628,8 +22628,8 @@
     }, verbiage.retryBtnText)))));
   };
   var ImageContainer$5 = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  position: relative;\n  flex-grow: 1;\n  margin-bottom: 25px;\n  max-width: 100%;\n  max-height: 100%;\n  overflow-y: auto;\n  border-radius: 12px;\n\n  & > img,\n  & > svg {\n    width: 100%;\n    max-width: 100%;\n    margin: 0 auto;\n    display: block;\n    border-radius: 12px;\n  }\n"], ["\n  position: relative;\n  flex-grow: 1;\n  margin-bottom: 25px;\n  max-width: 100%;\n  max-height: 100%;\n  overflow-y: auto;\n  border-radius: 12px;\n\n  & > img,\n  & > svg {\n    width: 100%;\n    max-width: 100%;\n    margin: 0 auto;\n    display: block;\n    border-radius: 12px;\n  }\n"])));
-  var Heading$6 = styled.h3(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  font-size: 1.2rem;\n  margin: 0;\n"], ["\n  font-size: 1.2rem;\n  margin: 0;\n"])));
-  var templateObject_1$k, templateObject_2$i;
+  var Heading$6 = styled.h3(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  font-size: 1.2rem;\n  margin: 0;\n"], ["\n  font-size: 1.2rem;\n  margin: 0;\n"])));
+  var templateObject_1$k, templateObject_2$j;
 
   var FaceLivenessFailure = function FaceLivenessFailure(_a) {
     var _b = _a.canRetry,
@@ -22679,8 +22679,8 @@
     }, verbiage.exitBtnText)))));
   };
   var ImageContainer$4 = styled(OverlayImageContainer)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  max-height: calc(100vh - 185px);\n"], ["\n  max-height: calc(100vh - 185px);\n"])));
-  var Heading$5 = styled.h3(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  margin-bottom: 36px;\n"], ["\n  margin-bottom: 36px;\n"])));
-  var templateObject_1$j, templateObject_2$h;
+  var Heading$5 = styled.h3(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  margin-bottom: 36px;\n"], ["\n  margin-bottom: 36px;\n"])));
+  var templateObject_1$j, templateObject_2$i;
 
   var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
     var _b;
@@ -22724,10 +22724,10 @@
     }, verbiage.retryBtnText)));
   };
   var StyledOverlayInner = styled(OverlayInner$2)(templateObject_1$i || (templateObject_1$i = __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 = styled(OverlayImageContainer)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
-  var Description$1 = styled.p(templateObject_3$d || (templateObject_3$d = __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$9 || (templateObject_4$9 = __makeTemplateObject(["\n  width: 200px;\n  margin: 0 auto;\n"], ["\n  width: 200px;\n  margin: 0 auto;\n"])));
-  var templateObject_1$i, templateObject_2$g, templateObject_3$d, templateObject_4$9;
+  var StyledOverlayImageContainer = styled(OverlayImageContainer)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
+  var Description$1 = styled.p(templateObject_3$e || (templateObject_3$e = __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$a || (templateObject_4$a = __makeTemplateObject(["\n  width: 200px;\n  margin: 0 auto;\n"], ["\n  width: 200px;\n  margin: 0 auto;\n"])));
+  var templateObject_1$i, templateObject_2$h, templateObject_3$e, templateObject_4$a;
 
   var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLegacy(_a) {
     var onDismissed = _a.onDismissed,
@@ -22820,8 +22820,8 @@
     }, ready ? verbiage.continueText : allModelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
   };
   var StyledGuidanceMessage = styled(GuidanceMessage)(templateObject_1$h || (templateObject_1$h = __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$5 = styled(ButtonsRow$2)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  flex-direction: column;\n  padding-top: 25px;\n"], ["\n  flex-direction: column;\n  padding-top: 25px;\n"])));
-  var templateObject_1$h, templateObject_2$f;
+  var StyledButtonsRow$5 = styled(ButtonsRow$2)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  flex-direction: column;\n  padding-top: 25px;\n"], ["\n  flex-direction: column;\n  padding-top: 25px;\n"])));
+  var templateObject_1$h, templateObject_2$g;
 
   var legacyInstructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png");
   var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDefault(_a) {
@@ -22996,25 +22996,25 @@
     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 ButtonsRow = styled(LoadingOverlayButtonsRow)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  color: ", ";\n  ", "\n"], ["\n  color: ", ";\n  ", "\n"])), function (props) {
+  var ButtonsRow = styled(LoadingOverlayButtonsRow)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  color: ", ";\n  ", "\n"], ["\n  color: ", ";\n  ", "\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) {
     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.progressBarFontSize) ? "font-size: ".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.progressBarFontSize, ";") : '';
   });
-  var ProgressBarBackground = styled(LoadingOverlayProgressBarBackground)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  background: ", ";\n  opacity: ", ";\n"], ["\n  background: ", ";\n  opacity: ", ";\n"])), function (props) {
+  var ProgressBarBackground = styled(LoadingOverlayProgressBarBackground)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  background: ", ";\n  opacity: ", ";\n"], ["\n  background: ", ";\n  opacity: ", ";\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.progressBarBackgroundColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
   }, 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.progressBarBackgroundOpacity) !== null && _d !== void 0 ? _d : 0.75;
   });
-  var ProgressIndicator = styled(LoadingOverlayProgressIndicator)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (props) {
+  var ProgressIndicator = styled(LoadingOverlayProgressIndicator)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\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.progressBarIndicatorColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
   });
-  var ContinueButton = styled(LoaderButton)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n    \n  &:focus-visible {\n    ", "\n    box-shadow: none;\n  }\n\n  &.disabled {\n    background: ", ";\n    color: ", ";\n    border: ", ";\n    box-shadow: none;\n  }\n"], ["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n    \n  &:focus-visible {\n    ", "\n    box-shadow: none;\n  }\n\n  &.disabled {\n    background: ", ";\n    color: ", ";\n    border: ", ";\n    box-shadow: none;\n  }\n"])), function (props) {
+  var ContinueButton = styled(LoaderButton)(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n    \n  &:focus-visible {\n    ", "\n    box-shadow: none;\n  }\n\n  &.disabled {\n    background: ", ";\n    color: ", ";\n    border: ", ";\n    box-shadow: none;\n  }\n"], ["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n    \n  &:focus-visible {\n    ", "\n    box-shadow: none;\n  }\n\n  &.disabled {\n    background: ", ";\n    color: ", ";\n    border: ", ";\n    box-shadow: none;\n  }\n"])), function (props) {
     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.progressBarFontSize) ? "font-size: ".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.progressBarFontSize, ";") : '';
   }, function (props) {
@@ -23033,7 +23033,7 @@
     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.continueBtnBorder) !== null && _d !== void 0 ? _d : 'none';
   });
-  var templateObject_1$g, templateObject_2$e, templateObject_3$c, templateObject_4$8, templateObject_5$5;
+  var templateObject_1$g, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$6;
 
   var components = {
     "default": SelfieCaptureLoadingOverlayDefault,
@@ -23355,18 +23355,63 @@
     }, /*#__PURE__*/React.createElement(FaceLivenessWizard, _assign({}, faceLivenessProps))));
   }
 
+  var quickFactConfig = [{
+    key: 'uniqueRequestId',
+    label: 'Unique Request ID'
+  }, {
+    key: 'verificationResult',
+    label: 'Overall Decision'
+  }, {
+    key: 'verificationResultCode',
+    label: 'Result Code'
+  }, {
+    key: 'verificationResultId',
+    label: 'Result ID'
+  }, {
+    key: 'realScore',
+    label: 'Real Score'
+  }, {
+    key: 'estimatedAge',
+    label: 'Estimated Age'
+  }];
+  var isRecord = function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+  };
+  var isDisplayablePrimitive = function isDisplayablePrimitive(value) {
+    return ['string', 'number', 'boolean'].includes(typeof value);
+  };
+  var formatValue = function formatValue(value) {
+    if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+    return "".concat(value);
+  };
+  var formatDecisionName = function formatDecisionName(rawKey) {
+    return rawKey.replace(/^Decision_/, '').replace(/_/g, ' ');
+  };
+  var isDecisionDetail = function isDecisionDetail(value) {
+    return isRecord(value) && (value.DecisionResult !== undefined || value.DecisionStateCode !== undefined);
+  };
   var SubmissionSuccess = function SubmissionSuccess() {
-    var _a = React.useContext(SubmissionContext),
-      submissionRequest = _a.submissionRequest,
-      submissionResponse = _a.submissionResponse;
-    var _b = React.useState(false),
-      showRequestBody = _b[0],
-      setShowRequestBody = _b[1];
-    var _c = React.useState(true),
-      truncateImages = _c[0],
-      setTruncateImages = _c[1];
+    var _a;
+    var _b = React.useContext(SubmissionContext),
+      submissionRequest = _b.submissionRequest,
+      submissionResponse = _b.submissionResponse;
+    var _c = React.useState(false),
+      showRequestBody = _c[0],
+      setShowRequestBody = _c[1];
+    var _d = React.useState(false),
+      showResponseBody = _d[0],
+      setShowResponseBody = _d[1];
+    var _e = React.useState(true),
+      truncateImages = _e[0],
+      setTruncateImages = _e[1];
+    var status = submissionResponse === null || submissionResponse === void 0 ? void 0 : submissionResponse.status;
+    var resultData = React.useMemo(function () {
+      var _a;
+      return (_a = submissionResponse === null || submissionResponse === void 0 ? void 0 : submissionResponse.resultData) !== null && _a !== void 0 ? _a : {};
+    }, [submissionResponse]);
     var requestBodyDisplay = React.useMemo(function () {
       var _a, _b, _c, _d, _e, _f;
+      if (!submissionRequest) return 'No request payload captured.';
       var body = JSON.parse(JSON.stringify(submissionRequest));
       if (truncateImages) {
         if ((_b = (_a = body === null || body === void 0 ? void 0 : body.customerData) === null || _a === void 0 ? void 0 : _a.idData) === null || _b === void 0 ? void 0 : _b.idImageFront) body.customerData.idData.idImageFront = truncate(body.customerData.idData.idImageFront, 200);
@@ -23375,26 +23420,128 @@
       }
       return JSON.stringify(body, null, 2);
     }, [submissionRequest, truncateImages]);
-    return /*#__PURE__*/React.createElement(Container$5, null, /*#__PURE__*/React.createElement("h3", null, "Submission completed!"), /*#__PURE__*/React.createElement(LoaderButton, {
+    var responseBodyDisplay = React.useMemo(function () {
+      if (!submissionResponse) return 'No response payload yet.';
+      return JSON.stringify(submissionResponse, null, 2);
+    }, [submissionResponse]);
+    var quickFacts = React.useMemo(function () {
+      return quickFactConfig.map(function (field) {
+        var value = resultData[field.key];
+        if (!isDisplayablePrimitive(value)) return null;
+        return {
+          label: field.label,
+          value: formatValue(value),
+          key: field.key
+        };
+      }).filter(Boolean);
+    }, [resultData]);
+    var consumedKeys = React.useMemo(function () {
+      return new Set(__spreadArray(['verificationResultDetails'], quickFactConfig.map(function (item) {
+        return item.key;
+      }), true));
+    }, []);
+    var additionalDetails = React.useMemo(function () {
+      return Object.entries(resultData).filter(function (_a) {
+        var key = _a[0],
+          value = _a[1];
+        if (consumedKeys.has(key)) return false;
+        if (!isDisplayablePrimitive(value)) return false;
+        return true;
+      }).map(function (_a) {
+        var key = _a[0],
+          value = _a[1];
+        return {
+          label: formatDecisionName(key),
+          value: formatValue(value)
+        };
+      }).sort(function (a, b) {
+        return a.label.localeCompare(b.label);
+      });
+    }, [consumedKeys, resultData]);
+    var decisionDetails = React.useMemo(function () {
+      var rawDetails = resultData.verificationResultDetails;
+      if (!isRecord(rawDetails)) return [];
+      return Object.entries(rawDetails).map(function (_a) {
+        var _b, _c;
+        var key = _a[0],
+          value = _a[1];
+        if (!isDecisionDetail(value)) return null;
+        return {
+          name: formatDecisionName(key),
+          result: (_b = value.DecisionResult) !== null && _b !== void 0 ? _b : '—',
+          code: (_c = value.DecisionStateCode) !== null && _c !== void 0 ? _c : '—'
+        };
+      }).filter(Boolean);
+    }, [resultData]);
+    return /*#__PURE__*/React.createElement(Container$5, null, /*#__PURE__*/React.createElement(Hero, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Title, null, "Submission completed!"), /*#__PURE__*/React.createElement(Subtitle, null, (_a = status === null || status === void 0 ? void 0 : status.statusMessage) !== null && _a !== void 0 ? _a : 'Review the summary below.')), (status === null || status === void 0 ? void 0 : status.statusCode) && ( /*#__PURE__*/React.createElement(StatusBadge, {
+      "data-variant": status.statusCode === '000' ? 'success' : 'error'
+    }, "Status ", status.statusCode))), quickFacts.length > 0 && ( /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(SectionTitle, null, "At-a-glance overview"), /*#__PURE__*/React.createElement(SummaryGrid, null, quickFacts.map(function (fact) {
+      return /*#__PURE__*/React.createElement(SummaryCard, {
+        key: fact.key
+      }, /*#__PURE__*/React.createElement(SummaryLabel, null, fact.label), /*#__PURE__*/React.createElement(SummaryValue, null, fact.value));
+    })))), decisionDetails.length > 0 && ( /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Decision breakdown"), /*#__PURE__*/React.createElement(SectionDescription, null, "High-level verdicts returned by the verification service."), /*#__PURE__*/React.createElement(DecisionList, null, decisionDetails.map(function (detail) {
+      return /*#__PURE__*/React.createElement(DecisionCard, {
+        key: detail.name
+      }, /*#__PURE__*/React.createElement(DecisionName, null, detail.name), /*#__PURE__*/React.createElement(DecisionValues, null, /*#__PURE__*/React.createElement(DecisionResult, {
+        "data-variant": detail.result === 'OK' ? 'success' : 'warning'
+      }, detail.result), /*#__PURE__*/React.createElement(DecisionCode, null, "Code ", detail.code)));
+    })))), additionalDetails.length > 0 && ( /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Additional details"), /*#__PURE__*/React.createElement(DetailGrid, null, additionalDetails.map(function (detail) {
+      return /*#__PURE__*/React.createElement(DetailItem, {
+        key: detail.label
+      }, /*#__PURE__*/React.createElement(SummaryLabel, null, detail.label), /*#__PURE__*/React.createElement(SummaryValue, null, detail.value));
+    })))), /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Raw payloads"), /*#__PURE__*/React.createElement(SectionDescription, null, "Need to dig deeper? Expand the payloads below to inspect the full JSON."), /*#__PURE__*/React.createElement(JsonControls, null, /*#__PURE__*/React.createElement(LoaderButton, {
       onClick: function onClick() {
-        return setShowRequestBody(!showRequestBody);
+        return setShowRequestBody(function (prev) {
+          return !prev;
+        });
       }
-    }, showRequestBody ? 'Hide' : 'Show', " request body"), showRequestBody && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoaderButton, {
+    }, showRequestBody ? 'Hide request JSON' : 'Show request JSON'), /*#__PURE__*/React.createElement(LoaderButton, {
+      onClick: function onClick() {
+        return setShowResponseBody(function (prev) {
+          return !prev;
+        });
+      }
+    }, showResponseBody ? 'Hide response JSON' : 'Show response JSON')), showRequestBody && ( /*#__PURE__*/React.createElement(JsonBlock, null, /*#__PURE__*/React.createElement(JsonBlockHeader, null, /*#__PURE__*/React.createElement(JsonBlockTitle, null, "Request Body"), /*#__PURE__*/React.createElement(LoaderButton, {
       style: {
-        marginLeft: 8
+        marginLeft: 'auto'
       },
       onClick: function onClick() {
-        return setTruncateImages(!truncateImages);
+        return setTruncateImages(function (prev) {
+          return !prev;
+        });
       }
-    }, truncateImages ? 'Display full images' : 'Truncate images'), /*#__PURE__*/React.createElement("h5", null, "Request Body"), /*#__PURE__*/React.createElement("pre", null, requestBodyDisplay))), /*#__PURE__*/React.createElement("h5", null, "Response Body"), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(submissionResponse, null, 2)));
+    }, truncateImages ? 'Display full images' : 'Truncate images')), /*#__PURE__*/React.createElement("pre", null, requestBodyDisplay))), showResponseBody && ( /*#__PURE__*/React.createElement(JsonBlock, null, /*#__PURE__*/React.createElement(JsonBlockHeader, null, /*#__PURE__*/React.createElement(JsonBlockTitle, null, "Response Body")), /*#__PURE__*/React.createElement("pre", null, responseBodyDisplay)))));
   };
-  var Container$5 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  padding: 16px;\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n"], ["\n  padding: 16px;\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n"])));
-  function truncate(str, max_chars) {
-    var truncated = str.split('').splice(0, max_chars).join('');
+  var Container$5 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  padding: 24px;\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  background: #f6f7fb;\n"], ["\n  padding: 24px;\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  background: #f6f7fb;\n"])));
+  var Hero = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n  margin-bottom: 24px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n  margin-bottom: 24px;\n"])));
+  var Title = styled.h3(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  margin: 0;\n  font-size: 24px;\n"], ["\n  margin: 0;\n  font-size: 24px;\n"])));
+  var Subtitle = styled.p(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  margin: 4px 0 0;\n  color: #4c4f5f;\n"], ["\n  margin: 4px 0 0;\n  color: #4c4f5f;\n"])));
+  var StatusBadge = styled.span(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 16px;\n  border-radius: 999px;\n  font-weight: 600;\n  background: #dde2f9;\n  color: #1d1f26;\n\n  &[data-variant='success'] {\n    background: #ddf6e5;\n    color: #116149;\n  }\n\n  &[data-variant='error'] {\n    background: #ffe3e3;\n    color: #a11a1a;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 16px;\n  border-radius: 999px;\n  font-weight: 600;\n  background: #dde2f9;\n  color: #1d1f26;\n\n  &[data-variant='success'] {\n    background: #ddf6e5;\n    color: #116149;\n  }\n\n  &[data-variant='error'] {\n    background: #ffe3e3;\n    color: #a11a1a;\n  }\n"])));
+  var Section = styled.section(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  margin-bottom: 32px;\n"], ["\n  margin-bottom: 32px;\n"])));
+  var SectionTitle = styled.h5(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  margin: 0 0 8px;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  font-size: 12px;\n  color: #6f7487;\n"], ["\n  margin: 0 0 8px;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  font-size: 12px;\n  color: #6f7487;\n"])));
+  var SectionDescription = styled.p(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  margin: 0 0 16px;\n  color: #4c4f5f;\n"], ["\n  margin: 0 0 16px;\n  color: #4c4f5f;\n"])));
+  var SummaryGrid = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 16px;\n"], ["\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 16px;\n"])));
+  var SummaryCard = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background: #fff;\n  border-radius: 12px;\n  padding: 16px;\n  box-shadow: 0 4px 24px rgba(16, 24, 64, 0.08);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"], ["\n  background: #fff;\n  border-radius: 12px;\n  padding: 16px;\n  box-shadow: 0 4px 24px rgba(16, 24, 64, 0.08);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
+  var SummaryLabel = styled.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: #8a8fa7;\n"], ["\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: #8a8fa7;\n"])));
+  var SummaryValue = styled.span(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  font-size: 18px;\n  font-weight: 600;\n  color: #1d1f26;\n  word-break: break-word;\n"], ["\n  font-size: 18px;\n  font-weight: 600;\n  color: #1d1f26;\n  word-break: break-word;\n"])));
+  var DecisionList = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 16px;\n"], ["\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 16px;\n"])));
+  var DecisionCard = styled(SummaryCard)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n"])));
+  var DecisionName = styled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  font-weight: 600;\n  color: #1d1f26;\n  text-transform: capitalize;\n"], ["\n  font-weight: 600;\n  color: #1d1f26;\n  text-transform: capitalize;\n"])));
+  var DecisionValues = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  text-align: right;\n"], ["\n  display: flex;\n  flex-direction: column;\n  text-align: right;\n"])));
+  var DecisionResult = styled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  font-weight: 600;\n  color: #1d1f26;\n\n  &[data-variant='success'] {\n    color: #116149;\n  }\n\n  &[data-variant='warning'] {\n    color: #b86e00;\n  }\n"], ["\n  font-weight: 600;\n  color: #1d1f26;\n\n  &[data-variant='success'] {\n    color: #116149;\n  }\n\n  &[data-variant='warning'] {\n    color: #b86e00;\n  }\n"])));
+  var DecisionCode = styled.span(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  font-size: 12px;\n  color: #6f7487;\n"], ["\n  font-size: 12px;\n  color: #6f7487;\n"])));
+  var DetailGrid = styled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 16px;\n"], ["\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 16px;\n"])));
+  var DetailItem = styled(SummaryCard)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  min-height: 110px;\n"], ["\n  min-height: 110px;\n"])));
+  var JsonControls = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-bottom: 16px;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-bottom: 16px;\n"])));
+  var JsonBlock = styled.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  background: #0f172a;\n  color: #e2e8f0;\n  border-radius: 12px;\n  padding: 16px;\n  margin-bottom: 16px;\n  box-shadow: 0 8px 30px rgba(3, 7, 18, 0.4);\n\n  pre {\n    margin: 0;\n    max-height: 300px;\n    overflow: auto;\n    font-size: 12px;\n    line-height: 1.4;\n  }\n"], ["\n  background: #0f172a;\n  color: #e2e8f0;\n  border-radius: 12px;\n  padding: 16px;\n  margin-bottom: 16px;\n  box-shadow: 0 8px 30px rgba(3, 7, 18, 0.4);\n\n  pre {\n    margin: 0;\n    max-height: 300px;\n    overflow: auto;\n    font-size: 12px;\n    line-height: 1.4;\n  }\n"])));
+  var JsonBlockHeader = styled.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 12px;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-bottom: 12px;\n"])));
+  var JsonBlockTitle = styled.h6(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #fff;\n"], ["\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #fff;\n"])));
+  function truncate(str, maxChars) {
+    var truncated = str.split('').splice(0, maxChars).join('');
     if (truncated.length < str.length) truncated += '...';
     return truncated;
   }
-  var templateObject_1$f;
+  var templateObject_1$f, templateObject_2$e, templateObject_3$c, templateObject_4$8, templateObject_5$5, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24;
 
   var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
     var document = _a.document,