@feathery/react 2.10.2 → 2.10.4

package/dist/cjs/fthry_index._AeFB4t8.js

@@ -0,0 +1,1451 @@
+'use strict';
+
+var index = require('./fthry_index.CsZ4a-ul.js');
+var React = require('react');
+var index$1 = require('./fthry_index.CD1A6RNb.js');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+
+/*
+ * Implementation of canvas trimming is taken from:
+ * https://github.com/agilgur5/trim-canvas/blob/master/src/index.js
+ *
+ * Implementation of drawing a signature from a data URL is taken from:
+ * https://github.com/szimek/signature_pad/blob/356e97d1c9fc27b8d5930544b50feadc754dd8ba/src/signature_pad.ts#L128C10-L128C21
+ *
+ */
+function trimCanvas$1(canvas) {
+    var context = canvas.getContext('2d');
+    if (!context) {
+        throw new Error('Could not get 2d context from canvas');
+    }
+    var imgWidth = canvas.width;
+    var imgHeight = canvas.height;
+    var imgData = context.getImageData(0, 0, imgWidth, imgHeight).data;
+    // get the corners of the relevant content (everything that's not white)
+    var cropTop = scanY(true, imgWidth, imgHeight, imgData);
+    var cropBottom = scanY(false, imgWidth, imgHeight, imgData);
+    var cropLeft = scanX(true, imgWidth, imgHeight, imgData);
+    var cropRight = scanX(false, imgWidth, imgHeight, imgData);
+    // if the image is already trimmed, return the original canvas
+    if (cropTop === null ||
+        cropBottom === null ||
+        cropLeft === null ||
+        cropRight === null) {
+        return canvas;
+    }
+    // + 1 is needed because this is a difference, there are n + 1 pixels in
+    // between the two numbers inclusive
+    var cropXDiff = cropRight - cropLeft + 1;
+    var cropYDiff = cropBottom - cropTop + 1;
+    // get the relevant data from the calculated coordinates
+    var trimmedData = context.getImageData(cropLeft, cropTop, cropXDiff, cropYDiff);
+    // set the trimmed width and height
+    canvas.width = cropXDiff;
+    canvas.height = cropYDiff;
+    // clear the canvas
+    context.clearRect(0, 0, cropXDiff, cropYDiff);
+    // place the trimmed data into the cleared canvas to create
+    // a new, trimmed canvas
+    context.putImageData(trimmedData, 0, 0);
+    return canvas; // for chaining
+}
+// returns the RGBA values of an x, y coord of imgData
+function getRGBA(x, y, imgWidth, imgData) {
+    return {
+        red: imgData[(imgWidth * y + x) * 4],
+        green: imgData[(imgWidth * y + x) * 4 + 1],
+        blue: imgData[(imgWidth * y + x) * 4 + 2],
+        alpha: imgData[(imgWidth * y + x) * 4 + 3]
+    };
+}
+function getAlpha(x, y, imgWidth, imgData) {
+    return getRGBA(x, y, imgWidth, imgData).alpha;
+}
+// finds the first y coord in imgData that is not white
+function scanY(fromTop, imgWidth, imgHeight, imgData) {
+    var offset = fromTop ? 1 : -1;
+    var firstCol = fromTop ? 0 : imgHeight - 1;
+    // loop through each row
+    for (var y = firstCol; fromTop ? y < imgHeight : y > -1; y += offset) {
+        // loop through each column
+        for (var x = 0; x < imgWidth; x++) {
+            // if not white, return col
+            if (getAlpha(x, y, imgWidth, imgData)) {
+                return y;
+            }
+        }
+    }
+    // the whole image is white already
+    return null;
+}
+// finds the first x coord in imgData that is not white
+function scanX(fromLeft, imgWidth, imgHeight, imgData) {
+    var offset = fromLeft ? 1 : -1;
+    var firstRow = fromLeft ? 0 : imgWidth - 1;
+    // loop through each column
+    for (var x = firstRow; fromLeft ? x < imgWidth : x > -1; x += offset) {
+        // loop through each row
+        for (var y = 0; y < imgHeight; y++) {
+            // if not white, return row
+            if (getAlpha(x, y, imgWidth, imgData)) {
+                return x;
+            }
+        }
+    }
+    // the whole image is white already
+    return null;
+}
+function fromDataURL(canvas, dataUrl, options) {
+    if (options === void 0) { options = {}; }
+    return new Promise(function (resolve, reject) {
+        var context = canvas.getContext('2d');
+        var image = new Image();
+        var ratio = options.ratio || index.devicePixelRatio();
+        var width = options.width || canvas.width / ratio;
+        var height = options.height || canvas.height / ratio;
+        var xOffset = options.xOffset || 0;
+        var yOffset = options.yOffset || 0;
+        image.onload = function () {
+            context === null || context === void 0 ? void 0 : context.drawImage(image, xOffset, yOffset, width, height);
+            resolve();
+        };
+        image.onerror = function (error) {
+            reject(error);
+        };
+        image.crossOrigin = 'anonymous';
+        image.src = dataUrl;
+    });
+}
+var generateSignatureImage = function (text, fontFamily, fontSize) {
+    if (fontFamily === void 0) { fontFamily = 'La Belle Aurore'; }
+    if (fontSize === void 0) { fontSize = '1.5em'; }
+    var canvas = index.featheryDoc().createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    if (!ctx) {
+        return;
+    }
+    var scaleFactor = 4;
+    canvas.width = 560 * scaleFactor;
+    canvas.height = 100 * scaleFactor;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.scale(scaleFactor, scaleFactor);
+    ctx.font = "".concat(fontSize, " ").concat(fontFamily);
+    ctx.fillStyle = '#000';
+    ctx.textBaseline = 'middle';
+    var textMetrics = ctx.measureText(text);
+    var textWidth = textMetrics.width;
+    var textHeight = parseInt(fontSize) * 1.5;
+    ctx.scale(1 / scaleFactor, 1 / scaleFactor);
+    var padding = 20 * scaleFactor;
+    canvas.width = textWidth * scaleFactor + padding * 2;
+    canvas.height = textHeight * scaleFactor + padding * 2;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.scale(scaleFactor, scaleFactor);
+    ctx.font = "".concat(fontSize, " ").concat(fontFamily);
+    ctx.fillStyle = '#000';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(text, padding / scaleFactor, canvas.height / 2 / scaleFactor);
+    return canvas;
+};
+function cloneCanvas(oldCanvas) {
+    var newCanvas = index.featheryDoc().createElement('canvas');
+    var context = newCanvas.getContext('2d');
+    newCanvas.width = oldCanvas.width;
+    newCanvas.height = oldCanvas.height;
+    if (context) {
+        context.drawImage(oldCanvas, 0, 0);
+    }
+    return newCanvas;
+}
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+function _createClass(e, r, t) {
+  return Object.defineProperty(e, "prototype", {
+    writable: false
+  }), e;
+}
+
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
+
+function _inherits(t, e) {
+  if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
+  t.prototype = Object.create(e && e.prototype, {
+    constructor: {
+      value: t,
+      writable: true,
+      configurable: true
+    }
+  }), Object.defineProperty(t, "prototype", {
+    writable: false
+  }), e && _setPrototypeOf(t, e);
+}
+
+function _getPrototypeOf(t) {
+  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
+    return t.__proto__ || Object.getPrototypeOf(t);
+  }, _getPrototypeOf(t);
+}
+
+function _isNativeReflectConstruct() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function _isNativeReflectConstruct() {
+    return !!t;
+  })();
+}
+
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+
+function _possibleConstructorReturn(t, e) {
+  if (e && ("object" == _typeof(e) || "function" == typeof e)) return e;
+  if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
+  return _assertThisInitialized(t);
+}
+
+function _createSuper(t) {
+  var r = _isNativeReflectConstruct();
+  return function () {
+    var e,
+      o = _getPrototypeOf(t);
+    if (r) {
+      var s = _getPrototypeOf(this).constructor;
+      e = Reflect.construct(o, arguments, s);
+    } else e = o.apply(this, arguments);
+    return _possibleConstructorReturn(this, e);
+  };
+}
+
+/*!
+ * Signature Pad v2.3.2
+ * https://github.com/szimek/signature_pad
+ *
+ * Copyright 2017 Szymon Nowak
+ * Released under the MIT license
+ *
+ * The main idea and some parts of the code (e.g. drawing variable width Bézier curve) are taken from:
+ * http://corner.squareup.com/2012/07/smoother-signatures.html
+ *
+ * Implementation of interpolation using cubic Bézier curves is taken from:
+ * http://benknowscode.wordpress.com/2012/09/14/path-interpolation-using-cubic-bezier-and-control-point-estimation-in-javascript
+ *
+ * Algorithm for approximated length of a Bézier curve is taken from:
+ * http://www.lemoda.net/maths/bezier-length/index.html
+ *
+ */
+
+function Point(x, y, time) {
+  this.x = x;
+  this.y = y;
+  this.time = time || new Date().getTime();
+}
+
+Point.prototype.velocityFrom = function (start) {
+  return this.time !== start.time ? this.distanceTo(start) / (this.time - start.time) : 1;
+};
+
+Point.prototype.distanceTo = function (start) {
+  return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
+};
+
+Point.prototype.equals = function (other) {
+  return this.x === other.x && this.y === other.y && this.time === other.time;
+};
+
+function Bezier(startPoint, control1, control2, endPoint) {
+  this.startPoint = startPoint;
+  this.control1 = control1;
+  this.control2 = control2;
+  this.endPoint = endPoint;
+}
+
+// Returns approximated length.
+Bezier.prototype.length = function () {
+  var steps = 10;
+  var length = 0;
+  var px = void 0;
+  var py = void 0;
+
+  for (var i = 0; i <= steps; i += 1) {
+    var t = i / steps;
+    var cx = this._point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x);
+    var cy = this._point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
+    if (i > 0) {
+      var xdiff = cx - px;
+      var ydiff = cy - py;
+      length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+    }
+    px = cx;
+    py = cy;
+  }
+
+  return length;
+};
+
+/* eslint-disable no-multi-spaces, space-in-parens */
+Bezier.prototype._point = function (t, start, c1, c2, end) {
+  return start * (1.0 - t) * (1.0 - t) * (1.0 - t) + 3.0 * c1 * (1.0 - t) * (1.0 - t) * t + 3.0 * c2 * (1.0 - t) * t * t + end * t * t * t;
+};
+
+/* eslint-disable */
+
+// http://stackoverflow.com/a/27078401/815507
+function throttle(func, wait, options) {
+  var context, args, result;
+  var timeout = null;
+  var previous = 0;
+  if (!options) options = {};
+  var later = function later() {
+    previous = options.leading === false ? 0 : Date.now();
+    timeout = null;
+    result = func.apply(context, args);
+    if (!timeout) context = args = null;
+  };
+  return function () {
+    var now = Date.now();
+    if (!previous && options.leading === false) previous = now;
+    var remaining = wait - (now - previous);
+    context = this;
+    args = arguments;
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = now;
+      result = func.apply(context, args);
+      if (!timeout) context = args = null;
+    } else if (!timeout && options.trailing !== false) {
+      timeout = setTimeout(later, remaining);
+    }
+    return result;
+  };
+}
+
+function SignaturePad(canvas, options) {
+  var self = this;
+  var opts = options || {};
+
+  this.velocityFilterWeight = opts.velocityFilterWeight || 0.7;
+  this.minWidth = opts.minWidth || 0.5;
+  this.maxWidth = opts.maxWidth || 2.5;
+  this.throttle = 'throttle' in opts ? opts.throttle : 16; // in miliseconds
+  this.minDistance = 'minDistance' in opts ? opts.minDistance : 5;
+
+  if (this.throttle) {
+    this._strokeMoveUpdate = throttle(SignaturePad.prototype._strokeUpdate, this.throttle);
+  } else {
+    this._strokeMoveUpdate = SignaturePad.prototype._strokeUpdate;
+  }
+
+  this.dotSize = opts.dotSize || function () {
+    return (this.minWidth + this.maxWidth) / 2;
+  };
+  this.penColor = opts.penColor || 'black';
+  this.backgroundColor = opts.backgroundColor || 'rgba(0,0,0,0)';
+  this.onBegin = opts.onBegin;
+  this.onEnd = opts.onEnd;
+
+  this._canvas = canvas;
+  this._ctx = canvas.getContext('2d');
+  this.clear();
+
+  // We need add these inline so they are available to unbind while still having
+  // access to 'self' we could use _.bind but it's not worth adding a dependency.
+  this._handleMouseDown = function (event) {
+    if (event.which === 1) {
+      self._mouseButtonDown = true;
+      self._strokeBegin(event);
+    }
+  };
+
+  this._handleMouseMove = function (event) {
+    if (self._mouseButtonDown) {
+      self._strokeMoveUpdate(event);
+    }
+  };
+
+  this._handleMouseUp = function (event) {
+    if (event.which === 1 && self._mouseButtonDown) {
+      self._mouseButtonDown = false;
+      self._strokeEnd(event);
+    }
+  };
+
+  this._handleTouchStart = function (event) {
+    if (event.targetTouches.length === 1) {
+      var touch = event.changedTouches[0];
+      self._strokeBegin(touch);
+    }
+  };
+
+  this._handleTouchMove = function (event) {
+    // Prevent scrolling.
+    event.preventDefault();
+
+    var touch = event.targetTouches[0];
+    self._strokeMoveUpdate(touch);
+  };
+
+  this._handleTouchEnd = function (event) {
+    var wasCanvasTouched = event.target === self._canvas;
+    if (wasCanvasTouched) {
+      event.preventDefault();
+      self._strokeEnd(event);
+    }
+  };
+
+  // Enable mouse and touch event handlers
+  this.on();
+}
+
+// Public methods
+SignaturePad.prototype.clear = function () {
+  var ctx = this._ctx;
+  var canvas = this._canvas;
+
+  ctx.fillStyle = this.backgroundColor;
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  this._data = [];
+  this._reset();
+  this._isEmpty = true;
+};
+
+SignaturePad.prototype.fromDataURL = function (dataUrl) {
+  var _this = this;
+
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  var image = new Image();
+  var ratio = options.ratio || window.devicePixelRatio || 1;
+  var width = options.width || this._canvas.width / ratio;
+  var height = options.height || this._canvas.height / ratio;
+
+  this._reset();
+  image.src = dataUrl;
+  image.onload = function () {
+    _this._ctx.drawImage(image, 0, 0, width, height);
+  };
+  this._isEmpty = false;
+};
+
+SignaturePad.prototype.toDataURL = function (type) {
+  var _canvas;
+
+  switch (type) {
+    case 'image/svg+xml':
+      return this._toSVG();
+    default:
+      for (var _len = arguments.length, options = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        options[_key - 1] = arguments[_key];
+      }
+
+      return (_canvas = this._canvas).toDataURL.apply(_canvas, [type].concat(options));
+  }
+};
+
+SignaturePad.prototype.on = function () {
+  this._handleMouseEvents();
+  this._handleTouchEvents();
+};
+
+SignaturePad.prototype.off = function () {
+  this._canvas.removeEventListener('mousedown', this._handleMouseDown);
+  this._canvas.removeEventListener('mousemove', this._handleMouseMove);
+  document.removeEventListener('mouseup', this._handleMouseUp);
+
+  this._canvas.removeEventListener('touchstart', this._handleTouchStart);
+  this._canvas.removeEventListener('touchmove', this._handleTouchMove);
+  this._canvas.removeEventListener('touchend', this._handleTouchEnd);
+};
+
+SignaturePad.prototype.isEmpty = function () {
+  return this._isEmpty;
+};
+
+// Private methods
+SignaturePad.prototype._strokeBegin = function (event) {
+  this._data.push([]);
+  this._reset();
+  this._strokeUpdate(event);
+
+  if (typeof this.onBegin === 'function') {
+    this.onBegin(event);
+  }
+};
+
+SignaturePad.prototype._strokeUpdate = function (event) {
+  var x = event.clientX;
+  var y = event.clientY;
+
+  var point = this._createPoint(x, y);
+  var lastPointGroup = this._data[this._data.length - 1];
+  var lastPoint = lastPointGroup && lastPointGroup[lastPointGroup.length - 1];
+  var isLastPointTooClose = lastPoint && point.distanceTo(lastPoint) < this.minDistance;
+
+  // Skip this point if it's too close to the previous one
+  if (!(lastPoint && isLastPointTooClose)) {
+    var _addPoint = this._addPoint(point),
+        curve = _addPoint.curve,
+        widths = _addPoint.widths;
+
+    if (curve && widths) {
+      this._drawCurve(curve, widths.start, widths.end);
+    }
+
+    this._data[this._data.length - 1].push({
+      x: point.x,
+      y: point.y,
+      time: point.time,
+      color: this.penColor
+    });
+  }
+};
+
+SignaturePad.prototype._strokeEnd = function (event) {
+  var canDrawCurve = this.points.length > 2;
+  var point = this.points[0]; // Point instance
+
+  if (!canDrawCurve && point) {
+    this._drawDot(point);
+  }
+
+  if (point) {
+    var lastPointGroup = this._data[this._data.length - 1];
+    var lastPoint = lastPointGroup[lastPointGroup.length - 1]; // plain object
+
+    // When drawing a dot, there's only one point in a group, so without this check
+    // such group would end up with exactly the same 2 points.
+    if (!point.equals(lastPoint)) {
+      lastPointGroup.push({
+        x: point.x,
+        y: point.y,
+        time: point.time,
+        color: this.penColor
+      });
+    }
+  }
+
+  if (typeof this.onEnd === 'function') {
+    this.onEnd(event);
+  }
+};
+
+SignaturePad.prototype._handleMouseEvents = function () {
+  this._mouseButtonDown = false;
+
+  this._canvas.addEventListener('mousedown', this._handleMouseDown);
+  this._canvas.addEventListener('mousemove', this._handleMouseMove);
+  document.addEventListener('mouseup', this._handleMouseUp);
+};
+
+SignaturePad.prototype._handleTouchEvents = function () {
+  // Pass touch events to canvas element on mobile IE11 and Edge.
+  this._canvas.style.msTouchAction = 'none';
+  this._canvas.style.touchAction = 'none';
+
+  this._canvas.addEventListener('touchstart', this._handleTouchStart);
+  this._canvas.addEventListener('touchmove', this._handleTouchMove);
+  this._canvas.addEventListener('touchend', this._handleTouchEnd);
+};
+
+SignaturePad.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) {
+  var rect = this._canvas.getBoundingClientRect();
+
+  return new Point(x - rect.left, y - rect.top, time || new Date().getTime());
+};
+
+SignaturePad.prototype._addPoint = function (point) {
+  var points = this.points;
+  var tmp = void 0;
+
+  points.push(point);
+
+  if (points.length > 2) {
+    // To reduce the initial lag make it work with 3 points
+    // by copying the first point to the beginning.
+    if (points.length === 3) points.unshift(points[0]);
+
+    tmp = this._calculateCurveControlPoints(points[0], points[1], points[2]);
+    var c2 = tmp.c2;
+    tmp = this._calculateCurveControlPoints(points[1], points[2], points[3]);
+    var c3 = tmp.c1;
+    var curve = new Bezier(points[1], c2, c3, points[2]);
+    var widths = this._calculateCurveWidths(curve);
+
+    // Remove the first element from the list,
+    // so that we always have no more than 4 points in points array.
+    points.shift();
+
+    return { curve: curve, widths: widths };
+  }
+
+  return {};
+};
+
+SignaturePad.prototype._calculateCurveControlPoints = function (s1, s2, s3) {
+  var dx1 = s1.x - s2.x;
+  var dy1 = s1.y - s2.y;
+  var dx2 = s2.x - s3.x;
+  var dy2 = s2.y - s3.y;
+
+  var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
+  var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
+
+  var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+  var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+
+  var dxm = m1.x - m2.x;
+  var dym = m1.y - m2.y;
+
+  var k = l2 / (l1 + l2);
+  var cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
+
+  var tx = s2.x - cm.x;
+  var ty = s2.y - cm.y;
+
+  return {
+    c1: new Point(m1.x + tx, m1.y + ty),
+    c2: new Point(m2.x + tx, m2.y + ty)
+  };
+};
+
+SignaturePad.prototype._calculateCurveWidths = function (curve) {
+  var startPoint = curve.startPoint;
+  var endPoint = curve.endPoint;
+  var widths = { start: null, end: null };
+
+  var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) + (1 - this.velocityFilterWeight) * this._lastVelocity;
+
+  var newWidth = this._strokeWidth(velocity);
+
+  widths.start = this._lastWidth;
+  widths.end = newWidth;
+
+  this._lastVelocity = velocity;
+  this._lastWidth = newWidth;
+
+  return widths;
+};
+
+SignaturePad.prototype._strokeWidth = function (velocity) {
+  return Math.max(this.maxWidth / (velocity + 1), this.minWidth);
+};
+
+SignaturePad.prototype._drawPoint = function (x, y, size) {
+  var ctx = this._ctx;
+
+  ctx.moveTo(x, y);
+  ctx.arc(x, y, size, 0, 2 * Math.PI, false);
+  this._isEmpty = false;
+};
+
+SignaturePad.prototype._drawCurve = function (curve, startWidth, endWidth) {
+  var ctx = this._ctx;
+  var widthDelta = endWidth - startWidth;
+  var drawSteps = Math.floor(curve.length());
+
+  ctx.beginPath();
+
+  for (var i = 0; i < drawSteps; i += 1) {
+    // Calculate the Bezier (x, y) coordinate for this step.
+    var t = i / drawSteps;
+    var tt = t * t;
+    var ttt = tt * t;
+    var u = 1 - t;
+    var uu = u * u;
+    var uuu = uu * u;
+
+    var x = uuu * curve.startPoint.x;
+    x += 3 * uu * t * curve.control1.x;
+    x += 3 * u * tt * curve.control2.x;
+    x += ttt * curve.endPoint.x;
+
+    var y = uuu * curve.startPoint.y;
+    y += 3 * uu * t * curve.control1.y;
+    y += 3 * u * tt * curve.control2.y;
+    y += ttt * curve.endPoint.y;
+
+    var width = startWidth + ttt * widthDelta;
+    this._drawPoint(x, y, width);
+  }
+
+  ctx.closePath();
+  ctx.fill();
+};
+
+SignaturePad.prototype._drawDot = function (point) {
+  var ctx = this._ctx;
+  var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
+
+  ctx.beginPath();
+  this._drawPoint(point.x, point.y, width);
+  ctx.closePath();
+  ctx.fill();
+};
+
+SignaturePad.prototype._fromData = function (pointGroups, drawCurve, drawDot) {
+  for (var i = 0; i < pointGroups.length; i += 1) {
+    var group = pointGroups[i];
+
+    if (group.length > 1) {
+      for (var j = 0; j < group.length; j += 1) {
+        var rawPoint = group[j];
+        var point = new Point(rawPoint.x, rawPoint.y, rawPoint.time);
+        var color = rawPoint.color;
+
+        if (j === 0) {
+          // First point in a group. Nothing to draw yet.
+
+          // All points in the group have the same color, so it's enough to set
+          // penColor just at the beginning.
+          this.penColor = color;
+          this._reset();
+
+          this._addPoint(point);
+        } else if (j !== group.length - 1) {
+          // Middle point in a group.
+          var _addPoint2 = this._addPoint(point),
+              curve = _addPoint2.curve,
+              widths = _addPoint2.widths;
+
+          if (curve && widths) {
+            drawCurve(curve, widths, color);
+          }
+        } else ;
+      }
+    } else {
+      this._reset();
+      var _rawPoint = group[0];
+      drawDot(_rawPoint);
+    }
+  }
+};
+
+SignaturePad.prototype._toSVG = function () {
+  var _this2 = this;
+
+  var pointGroups = this._data;
+  var canvas = this._canvas;
+  var ratio = Math.max(window.devicePixelRatio || 1, 1);
+  var minX = 0;
+  var minY = 0;
+  var maxX = canvas.width / ratio;
+  var maxY = canvas.height / ratio;
+  var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+
+  svg.setAttributeNS(null, 'width', canvas.width);
+  svg.setAttributeNS(null, 'height', canvas.height);
+
+  this._fromData(pointGroups, function (curve, widths, color) {
+    var path = document.createElement('path');
+
+    // Need to check curve for NaN values, these pop up when drawing
+    // lines on the canvas that are not continuous. E.g. Sharp corners
+    // or stopping mid-stroke and than continuing without lifting mouse.
+    if (!isNaN(curve.control1.x) && !isNaN(curve.control1.y) && !isNaN(curve.control2.x) && !isNaN(curve.control2.y)) {
+      var attr = 'M ' + curve.startPoint.x.toFixed(3) + ',' + curve.startPoint.y.toFixed(3) + ' ' + ('C ' + curve.control1.x.toFixed(3) + ',' + curve.control1.y.toFixed(3) + ' ') + (curve.control2.x.toFixed(3) + ',' + curve.control2.y.toFixed(3) + ' ') + (curve.endPoint.x.toFixed(3) + ',' + curve.endPoint.y.toFixed(3));
+
+      path.setAttribute('d', attr);
+      path.setAttribute('stroke-width', (widths.end * 2.25).toFixed(3));
+      path.setAttribute('stroke', color);
+      path.setAttribute('fill', 'none');
+      path.setAttribute('stroke-linecap', 'round');
+
+      svg.appendChild(path);
+    }
+  }, function (rawPoint) {
+    var circle = document.createElement('circle');
+    var dotSize = typeof _this2.dotSize === 'function' ? _this2.dotSize() : _this2.dotSize;
+    circle.setAttribute('r', dotSize);
+    circle.setAttribute('cx', rawPoint.x);
+    circle.setAttribute('cy', rawPoint.y);
+    circle.setAttribute('fill', rawPoint.color);
+
+    svg.appendChild(circle);
+  });
+
+  var prefix = 'data:image/svg+xml;base64,';
+  var header = '<svg' + ' xmlns="http://www.w3.org/2000/svg"' + ' xmlns:xlink="http://www.w3.org/1999/xlink"' + (' viewBox="' + minX + ' ' + minY + ' ' + maxX + ' ' + maxY + '"') + (' width="' + maxX + '"') + (' height="' + maxY + '"') + '>';
+  var body = svg.innerHTML;
+
+  // IE hack for missing innerHTML property on SVGElement
+  if (body === undefined) {
+    var dummy = document.createElement('dummy');
+    var nodes = svg.childNodes;
+    dummy.innerHTML = '';
+
+    for (var i = 0; i < nodes.length; i += 1) {
+      dummy.appendChild(nodes[i].cloneNode(true));
+    }
+
+    body = dummy.innerHTML;
+  }
+
+  var footer = '</svg>';
+  var data = header + body + footer;
+
+  return prefix + btoa(data);
+};
+
+SignaturePad.prototype.fromData = function (pointGroups) {
+  var _this3 = this;
+
+  this.clear();
+
+  this._fromData(pointGroups, function (curve, widths) {
+    return _this3._drawCurve(curve, widths.start, widths.end);
+  }, function (rawPoint) {
+    return _this3._drawDot(rawPoint);
+  });
+
+  this._data = pointGroups;
+};
+
+SignaturePad.prototype.toData = function () {
+  return this._data;
+};
+
+var build$1 = {exports: {}};
+
+var build = build$1.exports;
+
+var hasRequiredBuild;
+
+function requireBuild () {
+	if (hasRequiredBuild) return build$1.exports;
+	hasRequiredBuild = 1;
+	(function (module, exports$1) {
+		!function(e,t){module.exports=t();}(build,function(){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:false};return e[n].call(o.exports,o,o.exports,t),o.loaded=true,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t){function r(e){var t=e.getContext("2d"),r=e.width,n=e.height,o=t.getImageData(0,0,r,n).data,f=a(true,r,n,o),i=a(false,r,n,o),c=u(true,r,n,o),d=u(false,r,n,o),p=d-c+1,l=i-f+1,s=t.getImageData(c,f,p,l);return e.width=p,e.height=l,t.clearRect(0,0,p,l),t.putImageData(s,0,0),e}function n(e,t,r,n){return {red:n[4*(r*t+e)],green:n[4*(r*t+e)+1],blue:n[4*(r*t+e)+2],alpha:n[4*(r*t+e)+3]}}function o(e,t,r,o){return n(e,t,r,o).alpha}function a(e,t,r,n){for(var a=e?1:-1,u=e?0:r-1,f=u;e?f<r:f>-1;f+=a)for(var i=0;i<t;i++)if(o(i,f,t,n))return f;return null}function u(e,t,r,n){for(var a=e?1:-1,u=e?0:t-1,f=u;e?f<t:f>-1;f+=a)for(var i=0;i<r;i++)if(o(f,i,t,n))return f;return null}Object.defineProperty(t,"__esModule",{value:true}),t.default=r;}])}); 
+	} (build$1));
+	return build$1.exports;
+}
+
+var buildExports = requireBuild();
+var trimCanvas = /*@__PURE__*/index.getDefaultExportFromCjs(buildExports);
+
+var _excluded = ["canvasProps", "clearOnResize"];
+var SignatureCanvas$1 = /*#__PURE__*/function (_Component) {
+  _inherits(SignatureCanvas, _Component);
+  var _super = _createSuper(SignatureCanvas);
+  function SignatureCanvas() {
+    var _this;
+    _classCallCheck(this, SignatureCanvas);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.staticThis = _this.constructor;
+    _this._sigPad = null;
+    _this._canvas = null;
+    _this.setRef = function (ref) {
+      _this._canvas = ref;
+      // if component is unmounted, set internal references to null
+      if (_this._canvas === null) {
+        _this._sigPad = null;
+      }
+    };
+    _this._excludeOurProps = function () {
+      var _this$props = _this.props;
+        _this$props.canvasProps;
+        _this$props.clearOnResize;
+        var sigPadProps = _objectWithoutProperties(_this$props, _excluded);
+      return sigPadProps;
+    };
+    _this.componentDidMount = function () {
+      var canvas = _this.getCanvas();
+      _this._sigPad = new SignaturePad(canvas, _this._excludeOurProps());
+      _this._resizeCanvas();
+      _this.on();
+    };
+    _this.componentWillUnmount = function () {
+      _this.off();
+    };
+    _this.componentDidUpdate = function () {
+      Object.assign(_this._sigPad, _this._excludeOurProps());
+    };
+    _this.getCanvas = function () {
+      if (_this._canvas === null) {
+        throw _this.staticThis.refNullError;
+      }
+      return _this._canvas;
+    };
+    _this.getTrimmedCanvas = function () {
+      // copy the canvas
+      var canvas = _this.getCanvas();
+      var copy = document.createElement('canvas');
+      copy.width = canvas.width;
+      copy.height = canvas.height;
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      copy.getContext('2d').drawImage(canvas, 0, 0);
+      // then trim it
+      return trimCanvas(copy);
+    };
+    _this.getSignaturePad = function () {
+      if (_this._sigPad === null) {
+        throw _this.staticThis.refNullError;
+      }
+      return _this._sigPad;
+    };
+    _this._checkClearOnResize = function () {
+      if (!_this.props.clearOnResize) {
+        // eslint-disable-line @typescript-eslint/strict-boolean-expressions -- this is backward compatible with the previous behavior, where null was treated as falsey
+        return;
+      }
+      _this._resizeCanvas();
+    };
+    _this._resizeCanvas = function () {
+      var _this$props$canvasPro, _window$devicePixelRa;
+      var canvasProps = (_this$props$canvasPro = _this.props.canvasProps) !== null && _this$props$canvasPro !== void 0 ? _this$props$canvasPro : {};
+      var width = canvasProps.width,
+        height = canvasProps.height;
+      // don't resize if the canvas has fixed width and height
+      if (typeof width !== 'undefined' && typeof height !== 'undefined') {
+        return;
+      }
+      var canvas = _this.getCanvas();
+      /* When zoomed out to less than 100%, for some very strange reason,
+        some browsers report devicePixelRatio as less than 1
+        and only part of the canvas is cleared then. */
+      var ratio = Math.max((_window$devicePixelRa = window.devicePixelRatio) !== null && _window$devicePixelRa !== void 0 ? _window$devicePixelRa : 1, 1);
+      if (typeof width === 'undefined') {
+        canvas.width = canvas.offsetWidth * ratio;
+      }
+      if (typeof height === 'undefined') {
+        canvas.height = canvas.offsetHeight * ratio;
+      }
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      canvas.getContext('2d').scale(ratio, ratio);
+      _this.clear();
+    };
+    _this.render = function () {
+      var canvasProps = _this.props.canvasProps;
+      return /*#__PURE__*/React.createElement("canvas", _extends({
+        ref: _this.setRef
+      }, canvasProps));
+    };
+    _this.on = function () {
+      window.addEventListener('resize', _this._checkClearOnResize);
+      return _this.getSignaturePad().on();
+    };
+    _this.off = function () {
+      window.removeEventListener('resize', _this._checkClearOnResize);
+      return _this.getSignaturePad().off();
+    };
+    _this.clear = function () {
+      return _this.getSignaturePad().clear();
+    };
+    _this.isEmpty = function () {
+      return _this.getSignaturePad().isEmpty();
+    };
+    _this.fromDataURL = function (dataURL, options) {
+      return _this.getSignaturePad().fromDataURL(dataURL, options);
+    };
+    _this.toDataURL = function (type, encoderOptions) {
+      return _this.getSignaturePad().toDataURL(type, encoderOptions);
+    };
+    _this.fromData = function (pointGroups) {
+      return _this.getSignaturePad().fromData(pointGroups);
+    };
+    _this.toData = function () {
+      return _this.getSignaturePad().toData();
+    };
+    return _this;
+  } // shortcut reference (https://stackoverflow.com/a/29244254/3431180)
+  // propagate prop updates to SignaturePad
+  // return the canvas ref for operations like toDataURL
+  // return a trimmed copy of the canvas
+  // return the internal SignaturePad reference
+  // all wrapper functions below render
+  //
+  return _createClass(SignatureCanvas);
+}(React.Component);
+SignatureCanvas$1.propTypes = {
+  // signature_pad's props
+  velocityFilterWeight: index$1.PropTypes.number,
+  minWidth: index$1.PropTypes.number,
+  maxWidth: index$1.PropTypes.number,
+  minDistance: index$1.PropTypes.number,
+  dotSize: index$1.PropTypes.oneOfType([index$1.PropTypes.number, index$1.PropTypes.func]),
+  penColor: index$1.PropTypes.string,
+  throttle: index$1.PropTypes.number,
+  onEnd: index$1.PropTypes.func,
+  onBegin: index$1.PropTypes.func,
+  // props specific to the React wrapper
+  canvasProps: index$1.PropTypes.object,
+  clearOnResize: index$1.PropTypes.bool
+};
+SignatureCanvas$1.defaultProps = {
+  clearOnResize: true
+};
+SignatureCanvas$1.refNullError = new Error('react-signature-canvas is currently ' + 'mounting or unmounting: React refs are null during this phase.');
+
+var SignatureCanvas = React.forwardRef(function (props, ref) {
+    var fieldKey = props.fieldKey, repeatIndex = props.repeatIndex, responsiveStyles = props.responsiveStyles, _a = props.defaultValue, defaultValue = _a === void 0 ? null : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.showClear, showClear = _c === void 0 ? true : _c, _d = props.onClear, onClear = _d === void 0 ? function () { } : _d, _e = props.onEnd, onEnd = _e === void 0 ? function () { } : _e, t = props.translation;
+    var _f = index.__read(React.useState(defaultValue !== null), 2), isClearVisible = _f[0], setIsClearVisible = _f[1];
+    var signatureRef = React.useRef(undefined);
+    var signatureCanvasStyles = responsiveStyles.getTarget('field', true);
+    React.useImperativeHandle(ref, function () { return ({
+        clear: function () {
+            var _a;
+            (_a = signatureRef.current) === null || _a === void 0 ? void 0 : _a.clear();
+        },
+        isEmpty: function () {
+            var _a;
+            return (_a = signatureRef.current) === null || _a === void 0 ? void 0 : _a.isEmpty();
+        },
+        getTrimmedCanvas: function () {
+            var _a;
+            return (_a = signatureRef.current) === null || _a === void 0 ? void 0 : _a.getTrimmedCanvas();
+        },
+        getCanvas: function () {
+            var _a;
+            return (_a = signatureRef.current) === null || _a === void 0 ? void 0 : _a.getCanvas();
+        },
+        fromDataURL: function (dataURL, options) {
+            var _a;
+            return (_a = signatureRef.current) === null || _a === void 0 ? void 0 : _a.fromDataURL(dataURL, options);
+        }
+    }); });
+    React.useEffect(function () {
+        function setSignatureCanvas() {
+            var _a;
+            return index.__awaiter(this, void 0, void 0, function () {
+                var sig, signatureFile, base64, _b, img;
+                return index.__generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            sig = (_a = signatureRef.current) === null || _a === void 0 ? void 0 : _a.getCanvas();
+                            if (sig && defaultValue === null) {
+                                sig.getContext('2d').clearRect(0, 0, sig.width, sig.height);
+                                return [2 /*return*/];
+                            }
+                            return [4 /*yield*/, defaultValue];
+                        case 1:
+                            signatureFile = _c.sent();
+                            if (!signatureFile) return [3 /*break*/, 3];
+                            return [4 /*yield*/, index.toBase64(signatureFile)];
+                        case 2:
+                            _b = _c.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            _b = '';
+                            _c.label = 4;
+                        case 4:
+                            base64 = _b;
+                            img = new Image();
+                            img.onload = function () {
+                                if (!sig)
+                                    return;
+                                var hRatio = sig.offsetWidth / img.width;
+                                var vRatio = sig.offsetHeight / img.height;
+                                var ratio = Math.min(hRatio, vRatio, 1.5);
+                                var imgWidth = img.width * ratio;
+                                var imgHeight = img.height * ratio;
+                                // position signature in bottom left corner
+                                var xOffset = 0;
+                                var yOffset = sig.offsetHeight - imgHeight;
+                                // Preserve aspect ratio when loading signature
+                                // TODO: fix offsets. for some reason they're not being respected and
+                                //  are treated as 0, 0
+                                sig.getContext('2d').clearRect(0, 0, sig.width, sig.height);
+                                // custom implementation of fromDataURL to support xOffset and yOffset
+                                // since they are not supported by signature-pad v2.3.2
+                                // previously: signatureRef.current.fromDataURL(base64, options);
+                                fromDataURL(sig, base64, {
+                                    width: imgWidth,
+                                    height: imgHeight,
+                                    xOffset: xOffset,
+                                    yOffset: yOffset
+                                });
+                            };
+                            img.src = base64;
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        }
+        setSignatureCanvas();
+    }, [defaultValue]);
+    return (index.jsxs(index.Fragment, { children: [showClear && isClearVisible && (index.jsx("div", index.__assign({ css: index.__assign(index.__assign({ background: '#ffffff', position: 'absolute', bottom: '5px', right: '5px', borderRadius: '6px', display: 'flex', cursor: 'pointer', color: 'rgb(173, 173, 173)', fontSize: '14px', transition: '0.15s ease-in-out all' }, (disabled ? responsiveStyles.getTarget('disabled') : {})), { '&:hover': { color: 'black' } }), onClick: function () {
+                    signatureRef.current.clear();
+                    onClear();
+                    setIsClearVisible(false);
+                } }, { children: t.clear }))), index.jsx(SignatureCanvas$1, { penColor: 'black', dotSize: 4, minWidth: 1.5, maxWidth: 3, clearOnResize: false, canvasProps: {
+                    id: fieldKey + repeatIndex,
+                    style: index.__assign(index.__assign({}, signatureCanvasStyles), { width: '100%', height: '100%', boxSizing: 'border-box', paddingLeft: '5px' })
+                }, ref: signatureRef, onEnd: function () {
+                    onEnd();
+                    setIsClearVisible(!signatureRef.current.isEmpty());
+                } })] }));
+});
+
+var SIGNER_NAME_KEY = 'feathery-signer-name';
+function SignatureModal(props) {
+    var _a, _b;
+    var _c = props.show, show = _c === void 0 ? false : _c, _d = props.setShow, setShow = _d === void 0 ? function () { } : _d, fieldKey = props.fieldKey, repeatIndex = props.repeatIndex, defaultValue = props.defaultValue, responsiveStyles = props.responsiveStyles, _e = props.onClear, onClear = _e === void 0 ? function () { } : _e, _f = props.onEnd, onEnd = _f === void 0 ? function () { } : _f, _g = props.signMethods, signMethods = _g === void 0 ? '' : _g, t = props.translation;
+    var typeOnly = signMethods === 'type';
+    var drawOnly = signMethods === 'draw';
+    var _h = index.__read(React.useState(drawOnly), 2), drawSignature = _h[0], setDrawSignature = _h[1];
+    var _j = index.__read(React.useState(''), 2), fullName = _j[0], setFullName = _j[1];
+    var _k = index.__read(React.useState(false), 2), isLoading = _k[0], setLoading = _k[1];
+    var _l = index.__read(React.useState(), 2), signatureFile = _l[0], setSignatureFile = _l[1];
+    var _m = index.__read(React.useState(''), 2), signatureImgData = _m[0], setSignatureImgData = _m[1];
+    var fullNameRef = React.useRef(fullName);
+    var signatureCanvasRef = React.useRef(null);
+    var getSignerNameFromSessionStorage = function () {
+        var signerName = sessionStorage.getItem(SIGNER_NAME_KEY);
+        return signerName || '';
+    };
+    React.useEffect(function () {
+        if (show) {
+            var storedName = getSignerNameFromSessionStorage();
+            setFullName(storedName);
+        }
+    }, [show]);
+    React.useEffect(function () {
+        fullNameRef.current = fullName;
+        if (fullName !== '') {
+            setLoading(true);
+            debounceGenerateSignature();
+        }
+        else {
+            setSignatureImgData('');
+            setSignatureFile(undefined);
+            setLoading(false);
+        }
+    }, [fullName]);
+    var getFullName = function () { return fullNameRef.current; };
+    var resetState = function () {
+        setSignatureFile(undefined);
+        setSignatureImgData('');
+        setFullName('');
+        if (!drawOnly) {
+            setDrawSignature(false);
+        }
+    };
+    var generateDrawnSignature = function () {
+        try {
+            var canvas = cloneCanvas(signatureCanvasRef.current.getCanvas());
+            if (!canvas) {
+                throw new Error('Could not find signature canvas');
+            }
+            var trimmedCanvas = trimCanvas$1(canvas);
+            var imgData = trimmedCanvas.toDataURL('image/png', 1.0);
+            var imgFile = index.dataURLToFile(imgData, "".concat(fieldKey, ".png"));
+            setSignatureImgData(imgData);
+            setSignatureFile(imgFile);
+        }
+        catch (error) {
+            console.error('Error generating signature:', error);
+        }
+    };
+    var generateTextSignature = function () {
+        var _fullName = getFullName();
+        if (!_fullName) {
+            setSignatureImgData('');
+            setSignatureFile(undefined);
+            setLoading(false);
+            return;
+        }
+        try {
+            var canvas = generateSignatureImage(_fullName);
+            if (!canvas) {
+                throw new Error('Could not find signature canvas');
+            }
+            var trimmedCanvas = trimCanvas$1(canvas);
+            var imgData = trimmedCanvas.toDataURL('image/png', 1.0);
+            var imgFile = index.dataURLToFile(imgData, "".concat(fieldKey, ".png"));
+            setSignatureImgData(imgData);
+            setSignatureFile(imgFile);
+            setLoading(false);
+        }
+        catch (error) {
+            console.error('Error generating signature:', error);
+            setLoading(false);
+        }
+    };
+    var debounceGenerateSignature = React.useCallback(index.debounce(generateTextSignature, 1000), []);
+    var handleCancel = function () {
+        setShow(false);
+        resetState();
+    };
+    var handleSubmit = function () {
+        if (signatureFile) {
+            onEnd(signatureFile);
+            sessionStorage.setItem(SIGNER_NAME_KEY, fullName);
+            setShow(false);
+            resetState();
+        }
+    };
+    if (!show) {
+        return null;
+    }
+    return (index.jsxs("div", index.__assign({ css: {
+            position: 'fixed',
+            display: 'flex',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: '100vh',
+            background: 'rgba(0, 0, 0, 0.2)',
+            zIndex: index.MODAL_Z_INDEX,
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '16px',
+            fontFamily: (_b = (_a = responsiveStyles === null || responsiveStyles === void 0 ? void 0 : responsiveStyles.getTarget('fc')) === null || _a === void 0 ? void 0 : _a.fontFamily) !== null && _b !== void 0 ? _b : 'sans-serif'
+        } }, { children: [index.jsx("div", { onClick: function () { return handleCancel(); }, css: {
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%'
+                } }), index.jsxs("div", index.__assign({ className: 'feathery-modal', css: {
+                    position: 'relative',
+                    backgroundColor: '#fff',
+                    borderRadius: '14px',
+                    width: '100%',
+                    maxWidth: '600px'
+                } }, { children: [index.jsxs("div", index.__assign({ css: {
+                            position: 'relative',
+                            display: 'flex',
+                            padding: '20px',
+                            borderBottom: '1px solid #e9e9e9'
+                        } }, { children: [index.jsx("h3", index.__assign({ css: { padding: 0, margin: 0, flex: '1' } }, { children: t.title })), index.jsx(index.CloseIcon, { onClick: function () { return handleCancel(); }, css: { '&:hover': { cursor: 'pointer' } } })] })), index.jsxs("div", index.__assign({ css: {
+                            position: 'relative',
+                            padding: '20px 20px 30px 20px',
+                            '& h3': {
+                                fontSize: '1em',
+                                margin: 0,
+                                padding: 0
+                            }
+                        } }, { children: [!drawSignature && !drawOnly && (index.jsxs(index.Fragment, { children: [index.jsxs("div", index.__assign({ css: {
+                                            display: 'flex',
+                                            gap: '15px',
+                                            flexDirection: 'column',
+                                            paddingBottom: '30px'
+                                        } }, { children: [index.jsx("h3", { children: t.type_option }), index.jsx("input", { defaultValue: getSignerNameFromSessionStorage(), onChange: function (e) {
+                                                    var val = e.target.value.trim();
+                                                    setFullName(val);
+                                                }, placeholder: t.type_placeholder, css: {
+                                                    padding: '8px 10px',
+                                                    borderRadius: '4px',
+                                                    border: '1px solid #e9e9e9',
+                                                    '&:focus,&:focus-visible': {
+                                                        border: '1px solid #5e5e5e',
+                                                        outline: 'none'
+                                                    }
+                                                } }), index.jsxs("div", index.__assign({ css: {
+                                                    position: 'relative',
+                                                    width: '100%',
+                                                    height: '100px',
+                                                    backgroundColor: '#f6f6f6',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    fontSize: '2em',
+                                                    fontFamily: 'La Belle Aurore'
+                                                } }, { children: [isLoading && (index.jsx("div", index.__assign({ css: {
+                                                            position: 'absolute',
+                                                            top: 0,
+                                                            left: 0,
+                                                            width: '100%',
+                                                            height: '100%',
+                                                            backgroundColor: '#f6f6f6',
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            justifyContent: 'center',
+                                                            fontFamily: 'sans-serif',
+                                                            fontSize: '.9rem',
+                                                            borderRadius: '4px'
+                                                        } }, { children: t.type_loading }))), !signatureImgData ? (t.type_example) : (index.jsx("img", { src: signatureImgData, alt: 'Signature', css: { maxHeight: '100%', maxWidth: '100%' } }))] }))] })), !typeOnly && (index.jsxs(index.Fragment, { children: [index.jsx("div", index.__assign({ css: {
+                                                    height: '1px',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    borderBottom: '1px solid #e9e9e9'
+                                                } }, { children: index.jsx("div", index.__assign({ css: {
+                                                        backgroundColor: '#fff',
+                                                        padding: '10px',
+                                                        color: '#5e5e5e'
+                                                    } }, { children: t.or_label })) })), index.jsx("div", index.__assign({ css: {
+                                                    paddingTop: '30px'
+                                                } }, { children: index.jsxs("div", index.__assign({ onClick: function () { return setDrawSignature(true); }, css: {
+                                                        padding: '20px',
+                                                        borderRadius: '4px',
+                                                        border: '1px solid #e9e9e9',
+                                                        '& h3': {
+                                                            padding: 0,
+                                                            margin: 0,
+                                                            marginBottom: '10px'
+                                                        },
+                                                        '& p': {
+                                                            margin: 0,
+                                                            padding: 0
+                                                        },
+                                                        '&:hover': {
+                                                            border: '1px solid #5e5e5e',
+                                                            cursor: 'pointer'
+                                                        }
+                                                    } }, { children: [index.jsx("h3", { children: t.draw_option }), index.jsx("p", { children: t.draw_subtitle })] })) }))] }))] })), drawSignature && (index.jsxs("div", index.__assign({ css: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: '15px'
+                                } }, { children: [index.jsx("p", index.__assign({ css: {
+                                            margin: 0,
+                                            padding: 0
+                                        } }, { children: t.draw_instructions })), index.jsx("div", index.__assign({ css: { position: 'relative', width: '100%', height: '200px' } }, { children: index.jsx(SignatureCanvas, { ref: signatureCanvasRef, fieldKey: fieldKey, repeatIndex: repeatIndex, responsiveStyles: responsiveStyles, onClear: onClear, onEnd: generateDrawnSignature, showClear: false, translation: t }) }))] })))] })), index.jsxs("div", index.__assign({ css: {
+                            position: 'relative',
+                            display: 'flex',
+                            padding: '20px 20px',
+                            borderTop: '1px solid #e9e9e9',
+                            justifyContent: 'space-between',
+                            '& button': {
+                                padding: '12px 0px',
+                                width: '120px',
+                                borderRadius: '4px',
+                                outline: 'none',
+                                border: 'none',
+                                fontSize: '1rem',
+                                transition: 'background-color ease-in-out 0.1s',
+                                '&:hover': {
+                                    cursor: 'pointer'
+                                }
+                            }
+                        } }, { children: [drawOnly || !drawSignature ? (index.jsx("button", index.__assign({ onClick: function () { return handleCancel(); }, css: { '&:hover': { backgroundColor: '#e1e1e1' } } }, { children: t.cancel }))) : (index.jsx("button", index.__assign({ onClick: function (e) {
+                                    e.preventDefault();
+                                    setDrawSignature(false);
+                                    setSignatureFile(undefined);
+                                }, css: { '&:hover': { backgroundColor: '#e1e1e1' } } }, { children: t.back }))), index.jsxs("div", { children: [defaultValue && (index.jsx("button", index.__assign({ onClick: function (e) {
+                                            e.preventDefault();
+                                            onClear();
+                                        }, css: {
+                                            marginRight: '10px',
+                                            '&:hover': { backgroundColor: '#e1e1e1' }
+                                        } }, { children: t.clear }))), index.jsx("button", index.__assign({ onClick: function () {
+                                            if (!isLoading)
+                                                handleSubmit();
+                                        }, disabled: isLoading || !signatureFile, css: {
+                                            backgroundColor: '#535353',
+                                            color: '#fff',
+                                            '&:hover': {
+                                                backgroundColor: '#3a3a3a'
+                                            },
+                                            '&:disabled': {
+                                                '&:hover': {
+                                                    cursor: 'not-allowed'
+                                                }
+                                            }
+                                        } }, { children: t.confirm }))] })] }))] }))] })));
+}
+
+var defaultTranslations = {
+    label: 'Sign here',
+    title: 'Add your signature',
+    type_option: 'Type your signature',
+    type_placeholder: 'Your full name',
+    type_example: 'Full Name',
+    type_loading: 'Generating signature',
+    or_label: 'or',
+    draw_option: 'Draw your signature',
+    draw_subtitle: 'Draw your signature here using your mouse or trackpad',
+    draw_instructions: 'Draw your signature in the box below',
+    confirm: 'Sign',
+    cancel: 'Cancel',
+    back: 'Back',
+    clear: 'Clear'
+};
+
+function SignatureField(_a) {
+    var _b, _c, _d, _e;
+    var element = _a.element, fieldLabel = _a.fieldLabel, responsiveStyles = _a.responsiveStyles, _f = _a.defaultValue, defaultValue = _f === void 0 ? null : _f, editMode = _a.editMode, repeatIndex = _a.repeatIndex, _g = _a.elementProps, elementProps = _g === void 0 ? {} : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.onEnd, onEnd = _j === void 0 ? function () { } : _j, _k = _a.onClear, onClear = _k === void 0 ? function () { } : _k, _l = _a.ReactPortal, ReactPortal = _l === void 0 ? null : _l, // This is allowing the ability to pass a portal for the modal
+    children = _a.children;
+    var _m = index.__read(React.useState(false), 2), showSignatureModal = _m[0], setShowSignatureModal = _m[1];
+    var Portal = ReactPortal !== null && ReactPortal !== void 0 ? ReactPortal : (function (_a) {
+        var children = _a.children;
+        return index.jsx(index.Fragment, { children: children });
+    });
+    var servar = (_b = element.servar) !== null && _b !== void 0 ? _b : {};
+    var fieldKey = (_c = servar.key) !== null && _c !== void 0 ? _c : element.key;
+    var t = index.__assign(index.__assign({}, defaultTranslations), element.properties.translate);
+    React.useEffect(function () {
+        if (!global.webfontloaderPromise)
+            global.webfontloaderPromise = Promise.resolve().then(function () { return require(
+            /* webpackChunkName: "webfontloader" */ './fthry_webfontloader.HWAoLTyT.js'); }).then(function (n) { return n.webfontloader; });
+        global.webfontloaderPromise.then(function (WebFont) {
+            WebFont.load({ google: { families: ['La Belle Aurore'] } });
+        });
+    }, []);
+    return (index.jsxs(index.Fragment, { children: [index.jsx(Portal, { children: index.jsx(SignatureModal, { show: showSignatureModal, setShow: setShowSignatureModal, defaultValue: defaultValue, fieldKey: fieldKey, repeatIndex: repeatIndex, responsiveStyles: responsiveStyles, onClear: onClear, onEnd: onEnd, signMethods: (_e = (_d = servar.metadata) === null || _d === void 0 ? void 0 : _d.sign_methods) !== null && _e !== void 0 ? _e : '', translation: t }) }), index.jsxs("div", index.__assign({ css: index.__assign(index.__assign({ maxWidth: '100%', width: '100%', height: '100%' }, responsiveStyles.getTarget('fc')), { position: 'relative', pointerEvents: editMode || disabled ? 'none' : 'auto' }) }, elementProps, { children: [children, fieldLabel, index.jsxs("div", index.__assign({ css: index.__assign({ position: 'relative' }, responsiveStyles.getTarget('sub-fc')) }, { children: [index.jsxs(React.Suspense, index.__assign({ fallback: index.jsx("div", { css: index.__assign(index.__assign({}, responsiveStyles.getTarget('field', true)), { width: '100%', height: '100%', boxSizing: 'border-box', paddingLeft: '5px' }) }) }, { children: [index.jsx("div", index.__assign({ onClick: function () {
+                                            if (!disabled)
+                                                setShowSignatureModal(true);
+                                        }, css: index.__assign(index.__assign({ position: 'absolute', display: 'flex', top: 0, left: 0, width: '100%', height: '100%', zIndex: index.FORM_Z_INDEX, alignItems: 'center', justifyContent: 'center' }, (disabled ? { backgroundColor: 'rgb(229, 229, 229)' } : {})), { '&:hover': {
+                                                cursor: 'pointer'
+                                            } }) }, { children: !defaultValue && !disabled && t.label })), index.jsx(SignatureCanvas, { fieldKey: fieldKey, repeatIndex: repeatIndex, responsiveStyles: responsiveStyles, defaultValue: defaultValue, disabled: disabled, showClear: false, translation: t })] })), index.jsx(index.ErrorInput, { id: servar.key, "aria-label": element.properties.aria_label })] }))] }))] }));
+}
+
+exports.default = SignatureField;