idmission-web-sdk 0.0.20 → 0.0.21

package/dist/components/signature_capture/SignatureCapture.d.ts

@@ -15,4 +15,4 @@ export type SignatureCaptureProps = {
     background?: string;
     verbiage?: SignatureCaptureVerbiage;
 };
-export declare const SignatureCapture: ({ onAccept, background, verbiage, }: SignatureCaptureProps) => React.ReactElement;
+export declare const SignatureCapture: ({ onAccept, verbiage, }: SignatureCaptureProps) => React.ReactElement;

package/dist/sdk2.cjs.development.js

@@ -191,7 +191,7 @@ function contentDispositionFromDataUrl(url) {
   return (_b = (_a = url.match(/^(data:.*;base64),/)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : '';
 }
 
-var PageContainerDiv = styled__default['default'].div(templateObject_1$6 || (templateObject_1$6 = tslib.__makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,\n    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,\n    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"])), function (_a) {
+var PageContainerDiv = styled__default['default'].div(templateObject_1$7 || (templateObject_1$7 = tslib.__makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,\n    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,\n    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"])), function (_a) {
   var $heightOffset = _a.$heightOffset;
   return $heightOffset !== null && $heightOffset !== void 0 ? $heightOffset : 0;
 });
@@ -223,13 +223,13 @@ var PageContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, children);
 });
 PageContainer.displayName = 'PageContainer';
-var templateObject_1$6;
+var templateObject_1$7;
 
-var OverlayContainer = styled__default['default'](PageContainer)(templateObject_1$5 || (templateObject_1$5 = tslib.__makeTemplateObject(["\n  background: white;\n  z-index: 10000;\n"], ["\n  background: white;\n  z-index: 10000;\n"])));
-var OverlayInner = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = tslib.__makeTemplateObject(["\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  padding: 25px;\n  max-height: var(--app-height);\n  height: 100%;\n  box-sizing: border-box;\n"], ["\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  padding: 25px;\n  max-height: var(--app-height);\n  height: 100%;\n  box-sizing: border-box;\n"])));
-var OverlayImageWrapper = styled__default['default'].div(templateObject_3$1 || (templateObject_3$1 = tslib.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"])));
-var OverlayImageMultiContainer = styled__default['default'].div(templateObject_4$1 || (templateObject_4$1 = tslib.__makeTemplateObject(["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100vh - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"], ["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100vh - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"])));
-var templateObject_1$5, templateObject_2$1, templateObject_3$1, templateObject_4$1;
+var OverlayContainer = styled__default['default'](PageContainer)(templateObject_1$6 || (templateObject_1$6 = tslib.__makeTemplateObject(["\n  background: white;\n  z-index: 10000;\n"], ["\n  background: white;\n  z-index: 10000;\n"])));
+var OverlayInner = styled__default['default'].div(templateObject_2$3 || (templateObject_2$3 = tslib.__makeTemplateObject(["\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  padding: 25px;\n  max-height: var(--app-height);\n  height: 100%;\n  box-sizing: border-box;\n"], ["\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  padding: 25px;\n  max-height: var(--app-height);\n  height: 100%;\n  box-sizing: border-box;\n"])));
+var OverlayImageWrapper = styled__default['default'].div(templateObject_3$2 || (templateObject_3$2 = tslib.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"])));
+var OverlayImageMultiContainer = styled__default['default'].div(templateObject_4$2 || (templateObject_4$2 = tslib.__makeTemplateObject(["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100vh - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"], ["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100vh - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"])));
+var templateObject_1$6, templateObject_2$3, templateObject_3$2, templateObject_4$2;
 
 var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
   var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -8082,15 +8082,15 @@ function disposeTfBackend() {
     console.error('failed to dispose backend', e);
   }
 }
-var InvisibleCanvas = styled__default['default'].canvas(templateObject_1$4 || (templateObject_1$4 = tslib.__makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
-var templateObject_1$4;
+var InvisibleCanvas = styled__default['default'].canvas(templateObject_1$5 || (templateObject_1$5 = tslib.__makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+var templateObject_1$5;
 
-var DebugStatsPane = styled__default['default'].span(templateObject_1$3 || (templateObject_1$3 = tslib.__makeTemplateObject(["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n"], ["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n"])));
-var ObjectDetectionDebugOverlay = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"], ["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), function (_a) {
+var DebugStatsPane = styled__default['default'].span(templateObject_1$4 || (templateObject_1$4 = tslib.__makeTemplateObject(["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n"], ["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n"])));
+var ObjectDetectionDebugOverlay = styled__default['default'].div(templateObject_2$2 || (templateObject_2$2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"], ["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), function (_a) {
   var $flipX = _a.$flipX;
   return $flipX ? 'transform: scaleX(-1);' : '';
 });
-var ObjectDetectionDebugBox = styled__default['default'].div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  font: 10px monospace;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"], ["\n  font: 10px monospace;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"])), function (_a) {
+var ObjectDetectionDebugBox = styled__default['default'].div(templateObject_3$1 || (templateObject_3$1 = tslib.__makeTemplateObject(["\n  font: 10px monospace;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"], ["\n  font: 10px monospace;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"])), function (_a) {
   var $top = _a.$top;
   return $top;
 }, function (_a) {
@@ -8112,7 +8112,7 @@ var ObjectDetectionDebugBox = styled__default['default'].div(templateObject_3 ||
   var $flipX = _a.$flipX;
   return $flipX ? 'transform: scaleX(-1);' : '';
 });
-var FaceDetectionKeypointMarker = styled__default['default'].div(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: ", "px solid\n    ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"], ["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: ", "px solid\n    ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"])), function (_a) {
+var FaceDetectionKeypointMarker = styled__default['default'].div(templateObject_4$1 || (templateObject_4$1 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: ", "px solid\n    ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"], ["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: ", "px solid\n    ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"])), function (_a) {
   var $top = _a.$top,
     $height = _a.$height;
   return $top - $height / 2;
@@ -8276,7 +8276,7 @@ function SelfieCaptureFaceKeypoint(_a) {
     "$color": color
   });
 }
-var templateObject_1$3, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4$1;
 
 var initialState$5 = {
   videoWidth: 0,
@@ -9252,10 +9252,10 @@ var CameraVideoTag = function CameraVideoTag() {
     "$isRearFacing": (_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing
   });
 };
-var FullscreenVideoTag = styled__default['default'].video(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
+var FullscreenVideoTag = styled__default['default'].video(templateObject_1$3 || (templateObject_1$3 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
   return props.$isRearFacing ? '' : 'scaleX(-1)';
 });
-var templateObject_1$2;
+var templateObject_1$3;
 
 var CaptureState;
 (function (CaptureState) {
@@ -9922,11 +9922,6 @@ var reducer$3 = function reducer(state, action) {
           var isMobile = state.videoWidth < state.videoHeight;
           var tooCloseMultiple = isMobile ? 2 : 4.5;
           var tooFarMultiple = isMobile ? 6 : 7;
-          console.log({
-            faceBoxWidth: face.box.width,
-            videoWidth: state.videoWidth,
-            tooCloseMultiple: tooCloseMultiple
-          });
           faceTooClose = face.box.width > state.videoWidth / tooCloseMultiple;
           faceTooFar = face.box.width < state.videoWidth / tooFarMultiple;
         }
@@ -11185,8 +11180,8 @@ function truncate(str, max_chars) {
   return truncated;
 }
 
-var Spinner = styled__default['default'].div(templateObject_1$1 || (templateObject_1$1 = tslib.__makeTemplateObject(["\n  display: inline-block;\n  width: 80px;\n  height: 80px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: 64px;\n    height: 64px;\n    margin: 8px;\n    border-radius: 50%;\n    border: 6px solid #888;\n    border-color: #888 transparent #888 transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: inline-block;\n  width: 80px;\n  height: 80px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: 64px;\n    height: 64px;\n    margin: 8px;\n    border-radius: 50%;\n    border: 6px solid #888;\n    border-color: #888 transparent #888 transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
-var templateObject_1$1;
+var Spinner = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  display: inline-block;\n  width: 80px;\n  height: 80px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: 64px;\n    height: 64px;\n    margin: 8px;\n    border-radius: 50%;\n    border: 6px solid #888;\n    border-color: #888 transparent #888 transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: inline-block;\n  width: 80px;\n  height: 80px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: 64px;\n    height: 64px;\n    margin: 8px;\n    border-radius: 50%;\n    border: 6px solid #888;\n    border-color: #888 transparent #888 transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
+var templateObject_1$2;
 
 var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
   var document = _a.document,
@@ -11332,55 +11327,43 @@ function signatureDataToIdmissionFormat(signatureCanvas) {
   return signatureData;
 }
 
+var SignatureCanvasContainer = styled__default['default'].div(templateObject_1$1 || (templateObject_1$1 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"], ["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"])));
+var SignaturePad = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = tslib.__makeTemplateObject(["\n  position: relative;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 16px;\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"], ["\n  position: relative;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 16px;\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"])));
+var SignatureButtonsContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  flex-grow: 0;\n  padding-top: 12px;\n  display: flex;\n  z-index: 1000;\n  position: relative;\n"], ["\n  flex-grow: 0;\n  padding-top: 12px;\n  display: flex;\n  z-index: 1000;\n  position: relative;\n"])));
+var SignaturePaperBacking = styled__default['default'].div(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: #e5e5f7;\n  opacity: 0.8;\n  background-image: radial-gradient(#444cf7 0.5px, transparent 0.5px),\n    radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);\n  background-size: 20px 20px;\n  background-position: 0 0, 10px 10px;\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: #e5e5f7;\n  opacity: 0.8;\n  background-image: radial-gradient(#444cf7 0.5px, transparent 0.5px),\n    radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);\n  background-size: 20px 20px;\n  background-position: 0 0, 10px 10px;\n"])));
+var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4;
+
+var GuidanceMessageContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = 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 $top = _a.$top;
+  return $top !== null && $top !== void 0 ? $top : '10vh';
+});
+var GuidanceMessage = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: #ccc;\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: #ccc;\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"])));
+var templateObject_1, templateObject_2;
+
 var SignatureCapture = function SignatureCapture(_a) {
   var onAccept = _a.onAccept,
-    _b = _a.background,
-    background = _b === void 0 ? 'white' : _b,
-    _c = _a.verbiage,
-    verbiage = _c === void 0 ? {} : _c;
+    _b = _a.verbiage,
+    verbiage = _b === void 0 ? {} : _b;
   var t = reactI18next.useTranslation().t;
-  var _d = useResizeObserver__default['default'](),
-    ref = _d.ref,
-    width = _d.width,
-    height = _d.height;
+  var _c = useResizeObserver__default['default'](),
+    ref = _c.ref,
+    width = _c.width,
+    height = _c.height;
   var signaturePad = React.useRef(null);
   verbiage.headingText = verbiage.headingText || t('Please sign the box below');
   verbiage.acceptBtnText = verbiage.acceptBtnText || t('Accept');
   verbiage.clearBtnText = verbiage.clearBtnText || t('Clear');
-  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, {
-    style: {
-      background: background
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    style: {
-      flexGrow: 0,
-      paddingBottom: 12
-    }
-  }, /*#__PURE__*/React__default['default'].createElement("h3", {
-    style: {
-      margin: 0
-    }
-  }, verbiage.headingText)), /*#__PURE__*/React__default['default'].createElement("div", {
-    ref: ref,
-    style: {
-      position: 'relative',
-      border: '3px solid #888',
-      flexGrow: 1,
-      zIndex: '100'
-    }
+  return /*#__PURE__*/React__default['default'].createElement(PageContainer, null, /*#__PURE__*/React__default['default'].createElement(SignaturePaperBacking, null, /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, {
+    "$top": "5vh"
+  }, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, null, verbiage.headingText)), /*#__PURE__*/React__default['default'].createElement(SignatureCanvasContainer, null, /*#__PURE__*/React__default['default'].createElement(SignaturePad, {
+    ref: ref
   }, /*#__PURE__*/React__default['default'].createElement(SignatureCanvas__default['default'], {
     ref: signaturePad,
     canvasProps: {
       width: width,
-      height: (height !== null && height !== void 0 ? height : 500) - 4
-    }
-  })), /*#__PURE__*/React__default['default'].createElement("div", {
-    style: {
-      flexGrow: 0,
-      paddingTop: 12,
-      display: 'flex'
+      height: height
     }
-  }, /*#__PURE__*/React__default['default'].createElement("button", {
+  })), /*#__PURE__*/React__default['default'].createElement(SignatureButtonsContainer, null, /*#__PURE__*/React__default['default'].createElement("button", {
     onClick: function onClick(e) {
       var _a;
       e.preventDefault();
@@ -11396,7 +11379,7 @@ var SignatureCapture = function SignatureCapture(_a) {
       var signatureData = signatureDataToIdmissionFormat(signaturePad.current);
       onAccept === null || onAccept === void 0 ? void 0 : onAccept(signatureData, signaturePad.current.toDataURL());
     }
-  }, verbiage.acceptBtnText))));
+  }, verbiage.acceptBtnText)))));
 };
 
 var useVideoRecorder = function useVideoRecorder(camera) {
@@ -11440,7 +11423,6 @@ var useVideoRecorder = function useVideoRecorder(camera) {
   };
 };
 
-var SignatureCanvasContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"], ["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"])));
 var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   var _b, _c;
   var onComplete = _a.onComplete,
@@ -11583,47 +11565,17 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   var guidanceMessage = t('Please sign the box below');
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     className: "flex"
-  }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), guidanceMessage !== '' && /*#__PURE__*/React__default['default'].createElement("div", {
-    style: {
-      position: 'absolute',
-      top: 'calc(5vh)',
-      fontWeight: 'bold',
-      width: '100%',
-      display: 'flex'
-    }
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    style: {
-      marginLeft: 'auto',
-      marginRight: 'auto',
-      background: '#ccc',
-      padding: '10px 12px 8px',
-      borderRadius: 8
-    }
-  }, guidanceMessage)), /*#__PURE__*/React__default['default'].createElement(SignatureCanvasContainer, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    ref: ref,
-    style: {
-      position: 'relative',
-      background: 'rgba(255,255,255,0.5)',
-      borderRadius: 16,
-      flexGrow: 1,
-      zIndex: '100',
-      height: '100%'
-    }
+  }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), guidanceMessage !== '' && /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, {
+    "$top": "5vh"
+  }, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, null, guidanceMessage)), /*#__PURE__*/React__default['default'].createElement(SignatureCanvasContainer, null, /*#__PURE__*/React__default['default'].createElement(SignaturePad, {
+    ref: ref
   }, /*#__PURE__*/React__default['default'].createElement(SignatureCanvas__default['default'], {
     ref: signaturePad,
     canvasProps: {
       width: width,
       height: height
     }
-  })), /*#__PURE__*/React__default['default'].createElement("div", {
-    style: {
-      flexGrow: 0,
-      paddingTop: 12,
-      display: 'flex',
-      zIndex: 1000,
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React__default['default'].createElement("button", {
+  })), /*#__PURE__*/React__default['default'].createElement(SignatureButtonsContainer, null, /*#__PURE__*/React__default['default'].createElement("button", {
     onClick: function onClick(e) {
       var _a;
       e.preventDefault();
@@ -11655,7 +11607,6 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     }
   })));
 };
-var templateObject_1;
 
 var SignatureKYCLoadingOverlay = function SignatureKYCLoadingOverlay(_a) {
   var headingText = _a.headingText,