idmission-web-sdk 1.0.310 → 1.0.311

package/dist/sdk2.umd.development.js

@@ -141,7 +141,7 @@
         return cooked;
     }
 
-    var webSdkVersion = '1.0.310';
+    var webSdkVersion = '1.0.311';
 
     function getPlatform() {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -19602,29 +19602,29 @@
     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 = React.useContext(CameraStateContext).cameraRef;
       var imageRef = React.useRef(null);
-      var _z = React.useState(0),
-        imageWidth = _z[0],
-        setImageWidth = _z[1];
-      var _0 = React.useState(0),
-        imageHeight = _0[0],
-        setImageHeight = _0[1];
+      var _3 = React.useState(0),
+        imageWidth = _3[0],
+        setImageWidth = _3[1];
+      var _4 = React.useState(0),
+        imageHeight = _4[0],
+        setImageHeight = _4[1];
       assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
       assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
       var verbiage = useTranslations(rawVerbiage, {
@@ -19633,12 +19633,16 @@
         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 = styled.useTheme();
       if (faceGuideBorderWidth === undefined) faceGuideBorderWidth = (_d = (_c = (_b = theme.idVideoCapture) === null || _b === void 0 ? void 0 : _b.faceGuides) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 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['default'].createElement(Container, {
         className: classNames.container
       }, /*#__PURE__*/React__default['default'].createElement(FaceGuide, {
@@ -19646,12 +19650,13 @@
         "$borderWidth": faceGuideBorderWidth,
         "$borderColor": faceGuideBorderColor
       }), /*#__PURE__*/React__default['default'].createElement(IdCardGuideContainer, {
-        "$width": idGuideWidth,
         className: classNames.idCardGuideContainer
       }, /*#__PURE__*/React__default['default'].createElement(IdCardGuideInstructionsContainer, {
         className: classNames.idCardGuideInstructionsContainer
       }, /*#__PURE__*/React__default['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['default'].createElement(IdCardGuideImageContainer, {
         "$borderWidth": idCardGuideBorderWidth,
         "$borderColor": idCardGuideBorderColor,
@@ -19667,30 +19672,25 @@
         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__default['default'].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__default['default'].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__default['default'].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__default['default'].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__default['default'].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__default['default'].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__default['default'].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__default['default'].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__default['default'](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__default['default'].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) {