idmission-web-sdk 2.2.87 → 2.2.89

package/dist/sdk2.umd.development.js

@@ -211,7 +211,7 @@
     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
@@ -15966,8 +15966,8 @@
   });
   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)';
@@ -15991,7 +15991,7 @@
     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;
 
   function _createForOfIteratorHelperLoose(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (t) return (t = t.call(r)).next.bind(t); if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var o = 0; return function () { return o >= r.length ? { done: !0 } : { done: !1, value: r[o++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
   function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -16372,29 +16372,29 @@
     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 = React.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 = React.useState(0),
+      progressResets = _0[0],
+      setProgressResets = _0[1];
     React.useEffect(function () {
       if (progress === 0 && status === 'capturing') {
         setProgressResets(function (n) {
@@ -16406,7 +16406,8 @@
     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.createElement(IdCardBorderContainer, _assign({}, props), /*#__PURE__*/React.createElement("div", {
       ref: ref,
       style: {
@@ -16440,7 +16441,7 @@
       width: width,
       height: height,
       borderRadius: borderRadius,
-      borderColor: borderColor,
+      borderColor: progressBarIndicatorColor,
       borderWidth: progressBarWidth,
       className: "idmSdkWavesOrigin"
     }), (status === 'capturing' || progress > 0) && ( /*#__PURE__*/React.createElement(IdCardBorderSvg, {
@@ -16449,7 +16450,7 @@
       height: height,
       borderRadius: borderRadius,
       borderColor: progressBarColor,
-      borderWidth: borderWidth,
+      borderWidth: progressBarWidth,
       isProgressBar: true,
       progress: progress,
       progressPaused: progress > 0 && status !== 'capturing'
@@ -18266,12 +18267,8 @@
           payload: 'passport'
         });
       }
-    }, verbiage.passportText, /*#__PURE__*/React.createElement(ArrowIcon, null))), /*#__PURE__*/React.createElement(ScreenPanel, {
-      className: classNames.selectIdCardTypePanel,
-      style: {
-        background: 'white',
-        padding: '80px 0'
-      }
+    }, verbiage.passportText, /*#__PURE__*/React.createElement(ArrowIcon, null))), /*#__PURE__*/React.createElement(SelectIdCardScreenPanel, {
+      className: classNames.selectIdCardTypePanel
     }, /*#__PURE__*/React.createElement(IdDocumentIcon, {
       className: classNames.selectIdCardTypeIcon
     }), /*#__PURE__*/React.createElement(Button, {
@@ -18288,7 +18285,7 @@
       onClick: function onClick() {
         return setSelectIdTypeModalOpen(false);
       }
-    }, "\xD7"))));
+    }, /*#__PURE__*/React.createElement(XIcon, null)))));
   }
   function PassportUploadScreen(_a) {
     var _b = _a.classNames,
@@ -18477,17 +18474,39 @@
     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.createElement("svg", _assign({
+      width: "25",
+      height: "25",
+      viewBox: "0 0 25 25",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), /*#__PURE__*/React.createElement("path", {
+      d: "M2.08435 23.0832L22.4206 2.42073",
+      stroke: "white",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M1.91724 2.08386L22.5797 22.4201",
+      stroke: "white",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }));
+  }
   function CameraIcon(props) {
     return /*#__PURE__*/React.createElement("svg", _assign({
       width: "91",
@@ -18568,7 +18587,7 @@
     }));
   }
   function ArrowIcon(props) {
-    return /*#__PURE__*/React.createElement("svg", _assign({
+    return /*#__PURE__*/React.createElement(InlineSvg, _assign({
       width: "18",
       height: "12",
       viewBox: "0 0 18 12",
@@ -18717,6 +18736,7 @@
       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;
@@ -18737,7 +18757,7 @@
     } 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;
@@ -20952,7 +20972,7 @@
   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;
@@ -24534,6 +24554,7 @@
         wavesDisabled: false,
         wavesColor: '#287ec6',
         progressBarColor: '#287ec6',
+        progressBarIndicatorColor: 'white',
         progressBarWidth: '2.5%'
       }
     },