idmission-web-sdk 1.0.310 → 1.0.311

package/dist/sdk2.esm.js

@@ -14,7 +14,7 @@ import i18n from 'i18next';
 import { createPortal } from 'react-dom';
 import SignatureCanvas from 'react-signature-canvas';
 
-var webSdkVersion = '1.0.310';
+var webSdkVersion = '1.0.311';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -15706,29 +15706,29 @@ var FlipImage = styled.img(templateObject_1$8 || (templateObject_1$8 = __makeTem
 var templateObject_1$8;
 
 var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-  var _u = _a.requestedAction,
-    requestedAction = _u === void 0 ? 'SHOW_ID_FRONT' : _u,
-    _v = _a.satisfied,
-    satisfied = _v === void 0 ? false : _v,
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+  var _y = _a.requestedAction,
+    requestedAction = _y === void 0 ? 'SHOW_ID_FRONT' : _y,
+    _z = _a.satisfied,
+    satisfied = _z === void 0 ? false : _z,
     faceGuideBorderWidth = _a.faceGuideBorderWidth,
     faceGuideBorderColor = _a.faceGuideBorderColor,
     idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
     idCardGuideBorderColor = _a.idCardGuideBorderColor,
-    _w = _a.assets,
-    assets = _w === void 0 ? {} : _w,
-    _x = _a.classNames,
-    classNames = _x === void 0 ? {} : _x,
-    _y = _a.verbiage,
-    rawVerbiage = _y === void 0 ? {} : _y;
+    _0 = _a.assets,
+    assets = _0 === void 0 ? {} : _0,
+    _1 = _a.classNames,
+    classNames = _1 === void 0 ? {} : _1,
+    _2 = _a.verbiage,
+    rawVerbiage = _2 === void 0 ? {} : _2;
   var cameraRef = useContext(CameraStateContext).cameraRef;
   var imageRef = useRef(null);
-  var _z = useState(0),
-    imageWidth = _z[0],
-    setImageWidth = _z[1];
-  var _0 = useState(0),
-    imageHeight = _0[0],
-    setImageHeight = _0[1];
+  var _3 = useState(0),
+    imageWidth = _3[0],
+    setImageWidth = _3[1];
+  var _4 = useState(0),
+    imageHeight = _4[0],
+    setImageHeight = _4[1];
   assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
   assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
   var verbiage = useTranslations(rawVerbiage, {
@@ -15737,12 +15737,16 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
     flipIdInstructionText: 'Please flip your ID card...'
   });
   var instructionText = requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : requestedAction === 'FLIP_ID' ? verbiage.flipIdInstructionText : verbiage.idBackInstructionText;
-  var idGuideWidth = typeof window !== 'undefined' && window.innerWidth > window.innerHeight ? '30%' : '75%';
   var theme = useTheme();
   if (faceGuideBorderWidth === undefined) faceGuideBorderWidth = (_d = (_c = (_b = theme.idVideoCapture) === null || _b === void 0 ? void 0 : _b.faceGuides) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 4;
   if (faceGuideBorderColor === undefined) faceGuideBorderColor = (_j = satisfied ? (_f = (_e = theme.idVideoCapture) === null || _e === void 0 ? void 0 : _e.faceGuides) === null || _f === void 0 ? void 0 : _f.satisfiedColor : (_h = (_g = theme.idVideoCapture) === null || _g === void 0 ? void 0 : _g.faceGuides) === null || _h === void 0 ? void 0 : _h.unsatisfiedColor) !== null && _j !== void 0 ? _j : 'white';
   if (idCardGuideBorderWidth === undefined) idCardGuideBorderWidth = (_m = (_l = (_k = theme.idVideoCapture) === null || _k === void 0 ? void 0 : _k.idCardGuides) === null || _l === void 0 ? void 0 : _l.borderWidth) !== null && _m !== void 0 ? _m : 4;
   if (idCardGuideBorderColor === undefined) idCardGuideBorderColor = (_s = satisfied ? (_p = (_o = theme.idVideoCapture) === null || _o === void 0 ? void 0 : _o.idCardGuides) === null || _p === void 0 ? void 0 : _p.satisfiedColor : (_r = (_q = theme.idVideoCapture) === null || _q === void 0 ? void 0 : _q.idCardGuides) === null || _r === void 0 ? void 0 : _r.unsatisfiedColor) !== null && _s !== void 0 ? _s : 'white';
+  var captureImageSize = function captureImageSize() {
+    var _a, _b, _c, _d;
+    if (!imageWidth) setImageWidth((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0);
+    if (!imageHeight) setImageHeight((_d = (_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0);
+  };
   return /*#__PURE__*/React__default.createElement(Container, {
     className: classNames.container
   }, /*#__PURE__*/React__default.createElement(FaceGuide, {
@@ -15750,12 +15754,13 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
     "$borderWidth": faceGuideBorderWidth,
     "$borderColor": faceGuideBorderColor
   }), /*#__PURE__*/React__default.createElement(IdCardGuideContainer, {
-    "$width": idGuideWidth,
     className: classNames.idCardGuideContainer
   }, /*#__PURE__*/React__default.createElement(IdCardGuideInstructionsContainer, {
     className: classNames.idCardGuideInstructionsContainer
   }, /*#__PURE__*/React__default.createElement(IdCardGuideInstructions, {
-    className: classNames.idCardGuideInstructions
+    className: classNames.idCardGuideInstructions,
+    "$textColor": (_u = (_t = theme.idVideoCapture) === null || _t === void 0 ? void 0 : _t.idCardGuides) === null || _u === void 0 ? void 0 : _u.instructionsTextColor,
+    "$background": (_w = (_v = theme.idVideoCapture) === null || _v === void 0 ? void 0 : _v.idCardGuides) === null || _w === void 0 ? void 0 : _w.instructionsBackgroundColor
   }, instructionText)), /*#__PURE__*/React__default.createElement(IdCardGuideImageContainer, {
     "$borderWidth": idCardGuideBorderWidth,
     "$borderColor": idCardGuideBorderColor,
@@ -15771,30 +15776,25 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
     src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl,
     alt: "",
     className: classNames.idCardGuideImage,
-    "$isMirrored": !((_t = cameraRef.current) === null || _t === void 0 ? void 0 : _t.isRearFacing),
-    onLoad: function onLoad() {
-      var _a, _b, _c, _d;
-      if (!imageWidth) setImageWidth((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0);
-      if (!imageHeight) setImageHeight((_d = (_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0);
-    }
+    "$isMirrored": !((_x = cameraRef.current) === null || _x === void 0 ? void 0 : _x.isRearFacing),
+    onLoad: captureImageSize,
+    onResize: captureImageSize
   })))));
 };
 var Container = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 1000;\n  width: 100dvw;\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  font-family: ", ";\n"], ["\n  position: fixed;\n  z-index: 1000;\n  width: 100dvw;\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  font-family: ", ";\n"])), function (props) {
   var _a;
   return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
 });
-var FaceGuide = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  border-width: ", "px;\n  border-color: ", ";\n  border-style: solid;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1.618;\n  height: 100%;\n  min-height: 33dvh;\n  margin: 4% auto auto;\n"], ["\n  border-width: ", "px;\n  border-color: ", ";\n  border-style: solid;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1.618;\n  height: 100%;\n  min-height: 33dvh;\n  margin: 4% auto auto;\n"])), function (props) {
+var FaceGuide = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  border-width: ", "px;\n  border-color: ", ";\n  border-style: solid;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1.618;\n  height: 50%;\n  min-height: 33dvh;\n  margin: 4% auto auto;\n"], ["\n  border-width: ", "px;\n  border-color: ", ";\n  border-style: solid;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1.618;\n  height: 50%;\n  min-height: 33dvh;\n  margin: 4% auto auto;\n"])), function (props) {
   var _a;
   return (_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 0;
 }, function (props) {
   var _a;
   return (_a = props.$borderColor) !== null && _a !== void 0 ? _a : 'white';
 });
-var IdCardGuideContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  width: ", ";\n  display: flex;\n  flex-flow: column nowrap;\n  margin: 2% auto;\n"], ["\n  width: ", ";\n  display: flex;\n  flex-flow: column nowrap;\n  margin: 2% auto;\n"])), function (props) {
-  return props.$width;
-});
-var IdCardGuideInstructionsContainer = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  width: 100%;\n  flex-grow: 1;\n  text-align: center;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n"], ["\n  width: 100%;\n  flex-grow: 1;\n  text-align: center;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n"])));
-var IdCardGuideInstructions = styled.span(templateObject_5$1 || (templateObject_5$1 = __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 IdCardGuideContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  height: 50%;\n  display: flex;\n  flex-flow: column nowrap;\n  margin: 2% auto;\n"], ["\n  height: 50%;\n  display: flex;\n  flex-flow: column nowrap;\n  margin: 2% auto;\n"])));
+var IdCardGuideInstructionsContainer = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  width: 100%;\n  text-align: center;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n"], ["\n  width: 100%;\n  text-align: center;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n"])));
+var IdCardGuideInstructions = styled(GuidanceMessage)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n  padding: 8px 12px;\n  font-weight: bold;\n"], ["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n  padding: 8px 12px;\n  font-weight: bold;\n"])));
 var IdCardGuideImageContainer = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  position: relative;\n  border: ", "px solid\n    ", ";\n"], ["\n  position: relative;\n  border: ", "px solid\n    ", ";\n"])), function (props) {
   return props.$borderWidth;
 }, function (props) {