idmission-web-sdk 1.0.154 → 1.0.155

package/dist/components/common/GuidanceMessage.d.ts

@@ -1,9 +1,16 @@
-/// <reference types="react" />
+import React, { ReactNode } from 'react';
 export type GuidanceMessageVariant = 'default' | 'positive' | 'negative';
-export declare const GuidanceMessageContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const GuidanceMessageContainerDiv: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $top?: string | undefined;
+    $bottom?: string | undefined;
 }>>;
-export declare const GuidanceMessage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const GuidanceMessageContainer: (props: {
+    $top?: string;
+    $bottom?: string;
+    className?: string;
+    children?: ReactNode;
+}) => React.ReactPortal;
+export declare const GuidanceMessage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $background?: string | undefined;
     $textColor?: string | undefined;
     $variant?: GuidanceMessageVariant | undefined;

package/dist/sdk2.cjs.development.js

@@ -12,6 +12,7 @@ var tf = require('@tensorflow/tfjs');
 var useDebounce = require('use-debounce');
 var LanguageDetector = require('i18next-browser-languagedetector');
 var i18n = require('i18next');
+var reactDom = require('react-dom');
 var tasksVision = require('@mediapipe/tasks-vision');
 var SignatureCanvas = require('react-signature-canvas');
 
@@ -47,7 +48,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.154';
+var webSdkVersion = '1.0.155';
 
 function getPlatform() {
   if (typeof window === 'undefined') return;
@@ -9680,10 +9681,16 @@ function useTranslations(verbiage, fallbacks) {
   }, [fallbacks, i18n.language, t, verbiage]);
 }
 
-var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$v || (templateObject_1$v = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
+var GuidanceMessageContainerDiv = styled__default['default'].div(templateObject_1$v || (templateObject_1$v = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
   var $top = _a.$top;
   return $top !== null && $top !== void 0 ? $top : '10vh';
+}, function (_a) {
+  var $bottom = _a.$bottom;
+  return $bottom ? "bottom: ".concat($bottom, ";") : "";
 });
+var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
+  return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainerDiv, tslib.__assign({}, props)), document.getElementById('idmission-above-guides-content'));
+};
 var GuidanceMessage = styled__default['default'].div(templateObject_2$k || (templateObject_2$k = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n  z-index: 10001;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n  z-index: 10001;\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 : '#ccc';
@@ -9979,7 +9986,8 @@ var IdCapture = function IdCapture(_a) {
     ref: ref,
     className: "flex ".concat((_j = classNames.container) !== null && _j !== void 0 ? _j : '')
   }, guidanceMessage !== '' && ( /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, {
-    "$top": "82.5vh",
+    "$top": "",
+    "$bottom": "12.5dvh",
     className: classNames.guidanceMessageContainer
   }, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, {
     "$variant": satisfied ? 'positive' : 'default',
@@ -10538,7 +10546,7 @@ var GuideOrientationContext = /*#__PURE__*/React.createContext({
 var StyledPageContainer = styled__default['default'](PageContainer)(templateObject_1$m || (templateObject_1$m = tslib.__makeTemplateObject(["\n  z-index: 1000;\n"], ["\n  z-index: 1000;\n"])));
 var GuidesContainer = styled__default['default'].div(templateObject_2$f || (templateObject_2$f = tslib.__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__default['default'].div(templateObject_3$a || (templateObject_3$a = tslib.__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"], ["\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"])));
-var GuideRegion = styled__default['default'].div(templateObject_4$6 || (templateObject_4$6 = tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\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  height: 100%;\n  flex-grow: 1;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"])), function (props) {
+var GuideRegion = styled__default['default'].div(templateObject_4$6 || (templateObject_4$6 = tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\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  height: 100%;\n  flex-grow: 1;\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) {
@@ -10557,7 +10565,7 @@ var GuideCenterBorder = styled__default['default'].div(templateObject_6$2 || (te
   return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
 });
 var GuideText = styled__default['default'].span(templateObject_7$1 || (templateObject_7$1 = tslib.__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 GuideImage = styled__default['default'].img(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n  display: block;\n  padding: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n"], ["\n  display: block;\n  padding: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), function (props) {
+var GuideImage = styled__default['default'].img(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n  position: relative;\n  z-index: 1;\n  display: block;\n  padding: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n"], ["\n  position: relative;\n  z-index: 1;\n  display: block;\n  padding: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), function (props) {
   return props.$padding;
 }, function (props) {
   return props.$width ? "width: ".concat(props.$width, "px;\n         max-width: ").concat(props.$width, "px;") : "max-width: none;";
@@ -11497,7 +11505,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     classNames: (_g = classNames.capture) === null || _g === void 0 ? void 0 : _g.imagePreview,
     text: (_h = idCaptureVerbiages === null || idCaptureVerbiages === void 0 ? void 0 : idCaptureVerbiages.idCardFront) === null || _h === void 0 ? void 0 : _h.processingIdCardText,
     imageUrl: imageUrl
-  })), /*#__PURE__*/React__default['default'].createElement(ExitCaptureButton, {
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "idmission-above-guides-content"
+  }), /*#__PURE__*/React__default['default'].createElement(ExitCaptureButton, {
     onClick: onExit,
     className: (_j = classNames.capture) === null || _j === void 0 ? void 0 : _j.exitCaptureBtn
   }), !overlayDismissed && ( /*#__PURE__*/React__default['default'].createElement(IdCaptureLoadingOverlay, {