idmission-web-sdk 2.2.87 → 2.2.89

package/dist/sdk2.esm.js

@@ -203,7 +203,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.2.87';
+var webSdkVersion = '2.2.89';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -6966,8 +6966,8 @@ var StyledButtonsRow$a = styled(ButtonsRow)(templateObject_8$3 || (templateObjec
 });
 var LoadingListContainer$1 = styled.div(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  z-index: 2;\n"], ["\n  display: flex;\n  position: relative;\n  z-index: 2;\n"])));
 var LoadingList$1 = styled.ul(templateObject_10$2 || (templateObject_10$2 = __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 LoadingListItem$1 = styled.li(templateObject_11$1 || (templateObject_11$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 ProgressContainer$1 = styled.div(templateObject_12$1 || (templateObject_12$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 LoadingListItem$1 = styled.li(templateObject_11$2 || (templateObject_11$2 = __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 ProgressContainer$1 = styled.div(templateObject_12$2 || (templateObject_12$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 ProgressBarBackground$1 = styled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: ", ";\n  opacity: ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\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)';
@@ -6991,7 +6991,7 @@ var ContinueButton$1 = styled(LoaderButton)(templateObject_18 || (templateObject
   var _a, _b, _c, _d, _e, _f;
   return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnBorder) ? "border: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.continueBtnBorder, ";") : '';
 });
-var templateObject_1$z, templateObject_2$u, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$9, templateObject_7$6, templateObject_8$3, templateObject_9$3, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
+var templateObject_1$z, templateObject_2$u, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$9, templateObject_7$6, templateObject_8$3, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
 
 var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$y || (templateObject_1$y = __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$t || (templateObject_2$t = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
@@ -7298,29 +7298,29 @@ var IdCardGuideImage = styled.img(templateObject_2$q || (templateObject_2$q = __
   return props.$isInvisible ? 'opacity: 0;' : '';
 });
 function IdCardBorder(_a) {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
   var children = _a.children,
-    _p = _a.status,
-    status = _p === void 0 ? 'ready' : _p,
-    _q = _a.borderWidth,
-    borderWidth = _q === void 0 ? 20 : _q,
-    _r = _a.borderRadius,
-    borderRadius = _r === void 0 ? 25 : _r,
-    _s = _a.borderColor,
-    borderColor = _s === void 0 ? 'white' : _s,
+    _s = _a.status,
+    status = _s === void 0 ? 'ready' : _s,
+    _t = _a.borderWidth,
+    borderWidth = _t === void 0 ? 20 : _t,
+    _u = _a.borderRadius,
+    borderRadius = _u === void 0 ? 25 : _u,
+    _v = _a.borderColor,
+    borderColor = _v === void 0 ? 'white' : _v,
     aspectRatio = _a.aspectRatio,
-    _t = _a.progress,
-    progress = _t === void 0 ? 0 : _t,
+    _w = _a.progress,
+    progress = _w === void 0 ? 0 : _w,
     props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor", "aspectRatio", "progress"]);
-  var _u = useResizeObserver(),
-    ref = _u.ref,
-    _v = _u.width,
-    width = _v === void 0 ? 0 : _v,
-    _w = _u.height,
-    height = _w === void 0 ? 0 : _w;
-  var _x = useState(0),
-    progressResets = _x[0],
-    setProgressResets = _x[1];
+  var _x = useResizeObserver(),
+    ref = _x.ref,
+    _y = _x.width,
+    width = _y === void 0 ? 0 : _y,
+    _z = _x.height,
+    height = _z === void 0 ? 0 : _z;
+  var _0 = useState(0),
+    progressResets = _0[0],
+    setProgressResets = _0[1];
   useEffect(function () {
     if (progress === 0 && status === 'capturing') {
       setProgressResets(function (n) {
@@ -7332,7 +7332,8 @@ function IdCardBorder(_a) {
   var wavesDisabled = (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.wavesDisabled) !== null && _d !== void 0 ? _d : false;
   var wavesColor = (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.wavesColor) !== null && _g !== void 0 ? _g : '#287ec6';
   var progressBarColor = (_k = (_j = (_h = theme.idCapture) === null || _h === void 0 ? void 0 : _h.guideBox) === null || _j === void 0 ? void 0 : _j.progressBarColor) !== null && _k !== void 0 ? _k : '#287ec6';
-  var progressBarWidth = (_o = (_m = (_l = theme.idCapture) === null || _l === void 0 ? void 0 : _l.guideBox) === null || _m === void 0 ? void 0 : _m.progressBarWidth) !== null && _o !== void 0 ? _o : borderWidth;
+  var progressBarIndicatorColor = (_o = (_m = (_l = theme.idCapture) === null || _l === void 0 ? void 0 : _l.guideBox) === null || _m === void 0 ? void 0 : _m.progressBarIndicatorColor) !== null && _o !== void 0 ? _o : borderColor;
+  var progressBarWidth = (_r = (_q = (_p = theme.idCapture) === null || _p === void 0 ? void 0 : _p.guideBox) === null || _q === void 0 ? void 0 : _q.progressBarWidth) !== null && _r !== void 0 ? _r : borderWidth;
   return /*#__PURE__*/React__default.createElement(IdCardBorderContainer, _assign({}, props), /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     style: {
@@ -7366,7 +7367,7 @@ function IdCardBorder(_a) {
     width: width,
     height: height,
     borderRadius: borderRadius,
-    borderColor: borderColor,
+    borderColor: progressBarIndicatorColor,
     borderWidth: progressBarWidth,
     className: "idmSdkWavesOrigin"
   }), (status === 'capturing' || progress > 0) && ( /*#__PURE__*/React__default.createElement(IdCardBorderSvg, {
@@ -7375,7 +7376,7 @@ function IdCardBorder(_a) {
     height: height,
     borderRadius: borderRadius,
     borderColor: progressBarColor,
-    borderWidth: borderWidth,
+    borderWidth: progressBarWidth,
     isProgressBar: true,
     progress: progress,
     progressPaused: progress > 0 && status !== 'capturing'
@@ -9192,12 +9193,8 @@ function IdCaptureOrUploadScreen(_a) {
         payload: 'passport'
       });
     }
-  }, verbiage.passportText, /*#__PURE__*/React__default.createElement(ArrowIcon, null))), /*#__PURE__*/React__default.createElement(ScreenPanel, {
-    className: classNames.selectIdCardTypePanel,
-    style: {
-      background: 'white',
-      padding: '80px 0'
-    }
+  }, verbiage.passportText, /*#__PURE__*/React__default.createElement(ArrowIcon, null))), /*#__PURE__*/React__default.createElement(SelectIdCardScreenPanel, {
+    className: classNames.selectIdCardTypePanel
   }, /*#__PURE__*/React__default.createElement(IdDocumentIcon, {
     className: classNames.selectIdCardTypeIcon
   }), /*#__PURE__*/React__default.createElement(Button, {
@@ -9214,7 +9211,7 @@ function IdCaptureOrUploadScreen(_a) {
     onClick: function onClick() {
       return setSelectIdTypeModalOpen(false);
     }
-  }, "\xD7"))));
+  }, /*#__PURE__*/React__default.createElement(XIcon, null)))));
 }
 function PassportUploadScreen(_a) {
   var _b = _a.classNames,
@@ -9403,17 +9400,39 @@ var ScreenContainer = styled.div(templateObject_1$l || (templateObject_1$l = __m
   return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
 });
 var ScreenPanel = styled.div(templateObject_2$j || (templateObject_2$j = __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 ScreenPanelHeading = styled.h3(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  margin: 0 0 30px;\n"], ["\n  margin: 0 0 30px;\n"])));
-var ScreenActionsBar = styled.div(templateObject_4$9 || (templateObject_4$9 = __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_5$5 || (templateObject_5$5 = __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_6$4 || (templateObject_6$4 = __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 Button = styled(WideBorderButton)(templateObject_7$3 || (templateObject_7$3 = __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_8$1 || (templateObject_8$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_9$1 || (templateObject_9$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: hidden;\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"], ["\n  width: 100%;\n  max-width: 500px;\n  height: 100%;\n  max-height: 600px;\n  background: white;\n  border-radius: 25px;\n  overflow: hidden;\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"])), function (props) {
+var SelectIdCardScreenPanel = styled(ScreenPanel)(templateObject_3$f || (templateObject_3$f = __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$9 || (templateObject_4$9 = __makeTemplateObject(["\n  margin: 0 0 30px;\n"], ["\n  margin: 0 0 30px;\n"])));
+var ScreenActionsBar = styled.div(templateObject_5$5 || (templateObject_5$5 = __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$4 || (templateObject_6$4 = __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$3 || (templateObject_7$3 = __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 Button = styled(WideBorderButton)(templateObject_8$1 || (templateObject_8$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_9$1 || (templateObject_9$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_10$1 || (templateObject_10$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_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  width: 50px;\n  height: 50px;\n  background: black;\n  color: whitesmoke;\n  border-radius: 50%;\n  font-size: 30px;\n  border: none;\n  cursor: pointer;\n  margin-top: 20px;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n  transition: background 0.3s ease;\n\n  &:hover {\n    background: #222;\n    color: white;\n  }\n"], ["\n  width: 50px;\n  height: 50px;\n  background: black;\n  color: whitesmoke;\n  border-radius: 50%;\n  font-size: 30px;\n  border: none;\n  cursor: pointer;\n  margin-top: 20px;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n  transition: background 0.3s ease;\n\n  &:hover {\n    background: #222;\n    color: white;\n  }\n"])));
+var ModalCloseButton = styled.button(templateObject_11$1 || (templateObject_11$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__default.createElement("svg", _assign({
+    width: "25",
+    height: "25",
+    viewBox: "0 0 25 25",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M2.08435 23.0832L22.4206 2.42073",
+    stroke: "white",
+    strokeWidth: "3",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M1.91724 2.08386L22.5797 22.4201",
+    stroke: "white",
+    strokeWidth: "3",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+}
 function CameraIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", _assign({
     width: "91",
@@ -9494,7 +9513,7 @@ function UploadIcon(props) {
   }));
 }
 function ArrowIcon(props) {
-  return /*#__PURE__*/React__default.createElement("svg", _assign({
+  return /*#__PURE__*/React__default.createElement(InlineSvg, _assign({
     width: "18",
     height: "12",
     viewBox: "0 0 18 12",
@@ -9643,6 +9662,7 @@ function IdDocumentIcon(props) {
     strokeWidth: "3"
   }));
 }
+var InlineSvg = styled.svg(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  display: inline;\n"], ["\n  display: inline;\n"])));
 function humanFileSize(bytes, si, dp) {
   if (si === void 0) {
     si = false;
@@ -9663,7 +9683,7 @@ function humanFileSize(bytes, si, dp) {
   } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
   return bytes.toFixed(dp) + ' ' + units[u];
 }
-var templateObject_1$l, templateObject_2$j, templateObject_3$f, templateObject_4$9, templateObject_5$5, templateObject_6$4, templateObject_7$3, templateObject_8$1, templateObject_9$1, templateObject_10$1;
+var templateObject_1$l, templateObject_2$j, templateObject_3$f, templateObject_4$9, templateObject_5$5, templateObject_6$4, templateObject_7$3, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1;
 
 var IdCaptureWizard = function IdCaptureWizard(_a) {
   var _b, _c, _d, _e, _f, _g;
@@ -11878,7 +11898,7 @@ var LoadingListItem = styled.li(templateObject_8 || (templateObject_8 = __makeTe
 var ProgressContainer = styled.div(templateObject_9 || (templateObject_9 = __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 ProgressBarBackground = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: ", ";\n  opacity: ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\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)';
+  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.progressBarColor) !== 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;
@@ -14692,6 +14712,7 @@ var defaultTheme = {
       wavesDisabled: false,
       wavesColor: '#287ec6',
       progressBarColor: '#287ec6',
+      progressBarIndicatorColor: 'white',
       progressBarWidth: '2.5%'
     }
   },