idmission-web-sdk 0.0.20 → 0.0.21

package/dist/sdk2.umd.development.js

@@ -3212,7 +3212,7 @@
       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 = __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 = __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;
     });
@@ -3244,13 +3244,13 @@
       }, children);
     });
     PageContainer.displayName = 'PageContainer';
-    var templateObject_1$6;
+    var templateObject_1$7;
 
-    var OverlayContainer = styled__default['default'](PageContainer)(templateObject_1$5 || (templateObject_1$5 = __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 = __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 = __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 = __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 = __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 = __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 = __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 = __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 __assign = (undefined && undefined.__assign) || function () {
         __assign = Object.assign || function(t) {
@@ -11693,15 +11693,15 @@
         console.error('failed to dispose backend', e);
       }
     }
-    var InvisibleCanvas = styled__default['default'].canvas(templateObject_1$4 || (templateObject_1$4 = __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 = __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 = __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 = __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 = __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 = __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 = __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 = __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) {
@@ -11723,7 +11723,7 @@
       var $flipX = _a.$flipX;
       return $flipX ? 'transform: scaleX(-1);' : '';
     });
-    var FaceDetectionKeypointMarker = styled__default['default'].div(templateObject_4 || (templateObject_4 = __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 = __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;
@@ -11887,7 +11887,7 @@
         "$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,
@@ -12863,10 +12863,10 @@
         "$isRearFacing": (_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing
       });
     };
-    var FullscreenVideoTag = styled__default['default'].video(templateObject_1$2 || (templateObject_1$2 = __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 = __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) {
@@ -13535,11 +13535,6 @@
               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;
             }
@@ -14798,8 +14793,8 @@
       return truncated;
     }
 
-    var Spinner = styled__default['default'].div(templateObject_1$1 || (templateObject_1$1 = __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 = __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,
@@ -15025,7 +15020,7 @@
       };
     }
 
-    function SignaturePad(canvas, options) {
+    function SignaturePad$1(canvas, options) {
       var self = this;
       var opts = options || {};
 
@@ -15036,9 +15031,9 @@
       this.minDistance = 'minDistance' in opts ? opts.minDistance : 5;
 
       if (this.throttle) {
-        this._strokeMoveUpdate = throttle(SignaturePad.prototype._strokeUpdate, this.throttle);
+        this._strokeMoveUpdate = throttle(SignaturePad$1.prototype._strokeUpdate, this.throttle);
       } else {
-        this._strokeMoveUpdate = SignaturePad.prototype._strokeUpdate;
+        this._strokeMoveUpdate = SignaturePad$1.prototype._strokeUpdate;
       }
 
       this.dotSize = opts.dotSize || function () {
@@ -15103,7 +15098,7 @@
     }
 
     // Public methods
-    SignaturePad.prototype.clear = function () {
+    SignaturePad$1.prototype.clear = function () {
       var ctx = this._ctx;
       var canvas = this._canvas;
 
@@ -15116,7 +15111,7 @@
       this._isEmpty = true;
     };
 
-    SignaturePad.prototype.fromDataURL = function (dataUrl) {
+    SignaturePad$1.prototype.fromDataURL = function (dataUrl) {
       var _this = this;
 
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -15134,7 +15129,7 @@
       this._isEmpty = false;
     };
 
-    SignaturePad.prototype.toDataURL = function (type) {
+    SignaturePad$1.prototype.toDataURL = function (type) {
       var _canvas;
 
       switch (type) {
@@ -15149,12 +15144,12 @@
       }
     };
 
-    SignaturePad.prototype.on = function () {
+    SignaturePad$1.prototype.on = function () {
       this._handleMouseEvents();
       this._handleTouchEvents();
     };
 
-    SignaturePad.prototype.off = function () {
+    SignaturePad$1.prototype.off = function () {
       this._canvas.removeEventListener('mousedown', this._handleMouseDown);
       this._canvas.removeEventListener('mousemove', this._handleMouseMove);
       document.removeEventListener('mouseup', this._handleMouseUp);
@@ -15164,12 +15159,12 @@
       this._canvas.removeEventListener('touchend', this._handleTouchEnd);
     };
 
-    SignaturePad.prototype.isEmpty = function () {
+    SignaturePad$1.prototype.isEmpty = function () {
       return this._isEmpty;
     };
 
     // Private methods
-    SignaturePad.prototype._strokeBegin = function (event) {
+    SignaturePad$1.prototype._strokeBegin = function (event) {
       this._data.push([]);
       this._reset();
       this._strokeUpdate(event);
@@ -15179,7 +15174,7 @@
       }
     };
 
-    SignaturePad.prototype._strokeUpdate = function (event) {
+    SignaturePad$1.prototype._strokeUpdate = function (event) {
       var x = event.clientX;
       var y = event.clientY;
 
@@ -15207,7 +15202,7 @@
       }
     };
 
-    SignaturePad.prototype._strokeEnd = function (event) {
+    SignaturePad$1.prototype._strokeEnd = function (event) {
       var canDrawCurve = this.points.length > 2;
       var point = this.points[0]; // Point instance
 
@@ -15236,7 +15231,7 @@
       }
     };
 
-    SignaturePad.prototype._handleMouseEvents = function () {
+    SignaturePad$1.prototype._handleMouseEvents = function () {
       this._mouseButtonDown = false;
 
       this._canvas.addEventListener('mousedown', this._handleMouseDown);
@@ -15244,7 +15239,7 @@
       document.addEventListener('mouseup', this._handleMouseUp);
     };
 
-    SignaturePad.prototype._handleTouchEvents = function () {
+    SignaturePad$1.prototype._handleTouchEvents = function () {
       // Pass touch events to canvas element on mobile IE11 and Edge.
       this._canvas.style.msTouchAction = 'none';
       this._canvas.style.touchAction = 'none';
@@ -15254,20 +15249,20 @@
       this._canvas.addEventListener('touchend', this._handleTouchEnd);
     };
 
-    SignaturePad.prototype._reset = function () {
+    SignaturePad$1.prototype._reset = function () {
       this.points = [];
       this._lastVelocity = 0;
       this._lastWidth = (this.minWidth + this.maxWidth) / 2;
       this._ctx.fillStyle = this.penColor;
     };
 
-    SignaturePad.prototype._createPoint = function (x, y, time) {
+    SignaturePad$1.prototype._createPoint = function (x, y, time) {
       var rect = this._canvas.getBoundingClientRect();
 
       return new Point(x - rect.left, y - rect.top, time || new Date().getTime());
     };
 
-    SignaturePad.prototype._addPoint = function (point) {
+    SignaturePad$1.prototype._addPoint = function (point) {
       var points = this.points;
       var tmp = void 0;
 
@@ -15295,7 +15290,7 @@
       return {};
     };
 
-    SignaturePad.prototype._calculateCurveControlPoints = function (s1, s2, s3) {
+    SignaturePad$1.prototype._calculateCurveControlPoints = function (s1, s2, s3) {
       var dx1 = s1.x - s2.x;
       var dy1 = s1.y - s2.y;
       var dx2 = s2.x - s3.x;
@@ -15322,7 +15317,7 @@
       };
     };
 
-    SignaturePad.prototype._calculateCurveWidths = function (curve) {
+    SignaturePad$1.prototype._calculateCurveWidths = function (curve) {
       var startPoint = curve.startPoint;
       var endPoint = curve.endPoint;
       var widths = { start: null, end: null };
@@ -15340,11 +15335,11 @@
       return widths;
     };
 
-    SignaturePad.prototype._strokeWidth = function (velocity) {
+    SignaturePad$1.prototype._strokeWidth = function (velocity) {
       return Math.max(this.maxWidth / (velocity + 1), this.minWidth);
     };
 
-    SignaturePad.prototype._drawPoint = function (x, y, size) {
+    SignaturePad$1.prototype._drawPoint = function (x, y, size) {
       var ctx = this._ctx;
 
       ctx.moveTo(x, y);
@@ -15352,7 +15347,7 @@
       this._isEmpty = false;
     };
 
-    SignaturePad.prototype._drawCurve = function (curve, startWidth, endWidth) {
+    SignaturePad$1.prototype._drawCurve = function (curve, startWidth, endWidth) {
       var ctx = this._ctx;
       var widthDelta = endWidth - startWidth;
       var drawSteps = Math.floor(curve.length());
@@ -15386,7 +15381,7 @@
       ctx.fill();
     };
 
-    SignaturePad.prototype._drawDot = function (point) {
+    SignaturePad$1.prototype._drawDot = function (point) {
       var ctx = this._ctx;
       var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
 
@@ -15396,7 +15391,7 @@
       ctx.fill();
     };
 
-    SignaturePad.prototype._fromData = function (pointGroups, drawCurve, drawDot) {
+    SignaturePad$1.prototype._fromData = function (pointGroups, drawCurve, drawDot) {
       for (var i = 0; i < pointGroups.length; i += 1) {
         var group = pointGroups[i];
 
@@ -15434,7 +15429,7 @@
       }
     };
 
-    SignaturePad.prototype._toSVG = function () {
+    SignaturePad$1.prototype._toSVG = function () {
       var _this2 = this;
 
       var pointGroups = this._data;
@@ -15500,7 +15495,7 @@
       return prefix + btoa(data);
     };
 
-    SignaturePad.prototype.fromData = function (pointGroups) {
+    SignaturePad$1.prototype.fromData = function (pointGroups) {
       var _this3 = this;
 
       this.clear();
@@ -15514,13 +15509,13 @@
       this._data = pointGroups;
     };
 
-    SignaturePad.prototype.toData = function () {
+    SignaturePad$1.prototype.toData = function () {
       return this._data;
     };
 
     var signature_pad = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        'default': SignaturePad
+        'default': SignaturePad$1
     });
 
     var build$1 = createCommonjsModule(function (module, exports) {
@@ -15565,55 +15560,43 @@
       return signatureData;
     }
 
+    var SignatureCanvasContainer = styled__default['default'].div(templateObject_1$1 || (templateObject_1$1 = __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 = __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 = __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 = __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 = __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 = __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 = useTranslation().t;
-      var _d = useResizeObserver(),
-        ref = _d.ref,
-        width = _d.width,
-        height = _d.height;
+      var _c = useResizeObserver(),
+        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, {
         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();
@@ -15629,7 +15612,7 @@
           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) {
@@ -15673,7 +15656,6 @@
       };
     };
 
-    var SignatureCanvasContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = __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,
@@ -15816,47 +15798,17 @@
       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, {
         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();
@@ -15888,7 +15840,6 @@
         }
       })));
     };
-    var templateObject_1;
 
     var SignatureKYCLoadingOverlay = function SignatureKYCLoadingOverlay(_a) {
       var headingText = _a.headingText,