react-survey-builder 1.0.43 → 1.0.45

package/lib/survey-elements/index.js

@@ -5,18 +5,18 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.TextInput = exports.TextArea = exports.Tags = exports.Signature = exports.Rating = exports.Range = exports.RadioButtons = exports.PhoneNumber = exports.Paragraph = exports.NumberInput = exports.LineBreak = exports.Label = exports.Image = exports.HyperLink = exports.Header = exports.FileUpload = exports.EmailInput = exports.Dropdown = exports.Download = exports.DatePicker = exports.ContentBody = exports.Checkboxes = exports.Checkbox = exports.Camera = void 0;
+exports["default"] = exports.TextInput = exports.TextArea = exports.Tags = exports.Signature = exports.Rating = exports.Range = exports.RadioButtons = exports.PhoneNumber2 = exports.PhoneNumber = exports.Paragraph = exports.NumberInput = exports.LineBreak = exports.Label = exports.Image = exports.HyperLink = exports.Header = exports.FileUpload = exports.EmailInput = exports.Dropdown = exports.Download = exports.DatePicker = exports.CustomPhoneInput = exports.CustomDateInput = exports.ContentBody = exports.Checkboxes = exports.Checkbox = exports.Camera = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _isomorphicFetch = _interopRequireDefault(require("isomorphic-fetch"));
 var _fileSaver = require("file-saver");
 var _react = _interopRequireDefault(require("react"));
@@ -27,7 +27,6 @@ var _componentHeader = _interopRequireDefault(require("./component-header"));
 var _componentLabel = _interopRequireDefault(require("./component-label"));
 var _myxss = _interopRequireWildcard(require("./myxss"));
 var _fa = require("react-icons/fa");
-var _reactBootstrap = require("react-bootstrap");
 var _reactImask = require("react-imask");
 var _reactBootstrapTypeahead = require("react-bootstrap-typeahead");
 var _componentErrorMessage = _interopRequireDefault(require("./component-error-message"));
@@ -36,19 +35,34 @@ var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _ri = require("react-icons/ri");
 var _io = require("react-icons/io5");
 var _functions = require("../functions");
-var _excluded = ["onChange"],
-  _excluded2 = ["onChange", "formatMask"]; // eslint-disable-next-line max-classes-per-file
+var _esm = require("react-bootstrap/esm");
+var _validators = require("../utils/validators");
+var _reactHookForm = require("react-hook-form");
+var _excluded = ["name", "onChange", "value", "style", "item"],
+  _excluded2 = ["name", "onChange", "value", "style", "item"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var CustomPhoneInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var onChange = _ref.onChange,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  console.log('otherProps', otherProps);
-  var component = /*#__PURE__*/_react["default"].createElement(_reactImask.IMaskInput, (0, _extends2["default"])({}, otherProps, {
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } // eslint-disable-next-line max-classes-per-file
+var CustomPhoneInput = exports.CustomPhoneInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    onBlur = _ref.onBlur,
+    autoComplete = _ref.autoComplete,
+    required = _ref.required,
+    disabled = _ref.disabled;
+  return /*#__PURE__*/_react["default"].createElement(_reactImask.IMaskInput, {
+    required: required !== null && required !== void 0 ? required : false,
+    disabled: disabled !== null && disabled !== void 0 ? disabled : false,
+    id: id,
+    name: name,
+    autoComplete: autoComplete,
+    onBlur: onBlur,
+    className: className,
     mask: '{+1} (#00) 000-0000',
     lazy: false,
     overwrite: true,
@@ -68,23 +82,31 @@ var CustomPhoneInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     // `unmaskedValue` if `unmask=true`,
     // `typedValue` if `unmask='typed'`
     function onAccept(value, mask) {
-      onChange(value);
+      if (onChange !== undefined) {
+        onChange(value);
+      }
     }
-  }));
-  console.log(component);
-  try {
-    return component;
-  } catch (err) {
-    console.log(err);
-    return null;
-  }
+  });
 });
-var CustomDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
-  var onChange = _ref2.onChange,
+var CustomDateInput = exports.CustomDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
+  var id = _ref2.id,
+    name = _ref2.name,
+    onChange = _ref2.onChange,
+    className = _ref2.className,
+    onBlur = _ref2.onBlur,
+    autoComplete = _ref2.autoComplete,
     _ref2$formatMask = _ref2.formatMask,
     formatMask = _ref2$formatMask === void 0 ? 'MM/DD/YYYY' : _ref2$formatMask,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-  return /*#__PURE__*/_react["default"].createElement(_reactImask.IMaskInput, (0, _extends2["default"])({}, otherProps, {
+    required = _ref2.required,
+    disabled = _ref2.disabled;
+  return /*#__PURE__*/_react["default"].createElement(_reactImask.IMaskInput, {
+    required: required !== null && required !== void 0 ? required : false,
+    disabled: disabled !== null && disabled !== void 0 ? disabled : false,
+    id: id,
+    name: name,
+    autoComplete: autoComplete,
+    onBlur: onBlur,
+    className: className,
     mask: Date,
     lazy: false,
     overwrite: true,
@@ -144,7 +166,7 @@ var CustomDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2,
         onChange(value);
       }
     }
-  }));
+  });
 });
 var SurveyElements = {};
 var Header = exports.Header = /*#__PURE__*/function (_React$Component) {
@@ -321,7 +343,9 @@ var TextInput = exports.TextInput = /*#__PURE__*/function (_React$Component6) {
       };
       props.value = this.props.value;
       props.isInvalid = this.props.isInvalid;
-      props.onBlur = this.props.onBlur;
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
       props.autoComplete = "new-password";
       if (this.props.item.disabled) {
         props.disabled = 'disabled';
@@ -341,7 +365,7 @@ var TextInput = exports.TextInput = /*#__PURE__*/function (_React$Component6) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
           className: "form-group mb-3"
         }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
           htmlFor: props.name
@@ -350,19 +374,19 @@ var TextInput = exports.TextInput = /*#__PURE__*/function (_React$Component6) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
-      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
         id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "text"
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      })), /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
         id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "text"
-      }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: props.name
@@ -393,7 +417,9 @@ var EmailInput = exports.EmailInput = /*#__PURE__*/function (_React$Component7)
       };
       props.value = this.props.value;
       props.isInvalid = this.props.isInvalid;
-      props.onBlur = this.props.onBlur;
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
       props.autoComplete = "new-password";
       if (this.props.item.disabled) {
         props.disabled = 'disabled';
@@ -413,7 +439,7 @@ var EmailInput = exports.EmailInput = /*#__PURE__*/function (_React$Component7)
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
           className: "form-group mb-3"
         }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
           htmlFor: props.name
@@ -422,19 +448,19 @@ var EmailInput = exports.EmailInput = /*#__PURE__*/function (_React$Component7)
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
-      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
         id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "text"
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      })), /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
         id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "text"
-      }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: props.name
@@ -443,32 +469,47 @@ var EmailInput = exports.EmailInput = /*#__PURE__*/function (_React$Component7)
   }]);
   return EmailInput;
 }(_react["default"].Component);
-var PhoneNumber = exports.PhoneNumber = /*#__PURE__*/function (_React$Component8) {
-  (0, _inherits2["default"])(PhoneNumber, _React$Component8);
-  var _super8 = _createSuper(PhoneNumber);
-  function PhoneNumber(props) {
+var PhoneNumber2 = exports.PhoneNumber2 = /*#__PURE__*/function (_React$Component8) {
+  (0, _inherits2["default"])(PhoneNumber2, _React$Component8);
+  var _super8 = _createSuper(PhoneNumber2);
+  function PhoneNumber2(props) {
     var _this5;
-    (0, _classCallCheck2["default"])(this, PhoneNumber);
+    (0, _classCallCheck2["default"])(this, PhoneNumber2);
     _this5 = _super8.call(this, props);
     _this5.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this5;
   }
-  (0, _createClass2["default"])(PhoneNumber, [{
+  (0, _createClass2["default"])(PhoneNumber2, [{
     key: "render",
     value: function render() {
       var _this6 = this;
       var props = {};
+      console.log(this.props);
+      console.log(this.props.item);
       props.name = this.props.name;
-      props.placeholder = this.props.item.placeholder;
+      if (this.props.item.placeholder) {
+        props.placeholder = this.props.item.placeholder;
+      }
+      if (this.props.item.readOnly) {
+        props.readOnly = this.props.item.readOnly;
+      }
       props.onChange = function (val) {
-        _this6.props.onChange(val);
+        if (_this6.props.onChange) {
+          _this6.props.onChange(val);
+        }
       };
-      props.value = this.props.value;
-      props.isInvalid = this.props.isInvalid;
-      props.onBlur = this.props.onBlur;
+      if (this.props.value) {
+        props.value = this.props.value;
+      }
+      if (this.props.isInvalid) {
+        props.isInvalid = this.props.isInvalid;
+      }
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
       props.autoComplete = "new-password";
       if (this.props.item.disabled) {
-        props.disabled = 'disabled';
+        props.disabled = true;
       }
       if (this.props.item.mutable) {
         props.ref = this.inputField;
@@ -485,159 +526,401 @@ var PhoneNumber = exports.PhoneNumber = /*#__PURE__*/function (_React$Component8
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
           className: "form-group mb-3"
         }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
           htmlFor: props.name
         })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.value)));
       }
-      Object.keys(props).forEach(function (key) {
-        if (props[key] === undefined) {
-          delete props[key];
-        }
-      });
+
+      // Object.keys(props).forEach((key) => {
+      // 	if (props[key] === undefined) {
+      // 		delete props[key];
+      // 	}
+      // });
+
+      console.log('props', props);
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
-      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name + '-' + (0, _functions.generateUUID)(),
-        type: "text"
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, props, {
         as: CustomPhoneInput
       })), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name + '-' + (0, _functions.generateUUID)(),
-        type: "text"
+      })), /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, props, {
         as: CustomPhoneInput
-      }))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: props.name
       })));
     }
   }]);
-  return PhoneNumber;
+  return PhoneNumber2;
 }(_react["default"].Component);
-var DatePicker = exports.DatePicker = /*#__PURE__*/function (_React$Component9) {
-  (0, _inherits2["default"])(DatePicker, _React$Component9);
-  var _super9 = _createSuper(DatePicker);
-  function DatePicker(props) {
-    var _this7;
-    (0, _classCallCheck2["default"])(this, DatePicker);
-    _this7 = _super9.call(this, props);
-    _this7.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this7;
+var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref3) {
+  var _item$required, _item$disabled, _item$required2;
+  var name = _ref3.name,
+    onChange = _ref3.onChange,
+    value = _ref3.value,
+    style = _ref3.style,
+    item = _ref3.item,
+    props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded);
+  var methods = (0, _reactHookForm.useFormContext)();
+  var inputField = _react["default"].useRef(null);
+  var onChangeHandler = function onChangeHandler(value) {
+    if (onChange !== undefined) {
+      onChange(value);
+    }
+  };
+  var inputProps = {
+    type: 'text',
+    required: (_item$required = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required !== void 0 ? _item$required : false,
+    disabled: (_item$disabled = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled !== void 0 ? _item$disabled : false,
+    autoComplete: 'new-password',
+    // hack to prevent auto-complete for form fields
+    formatMask: (item === null || item === void 0 ? void 0 : item.formatMask) || 'MM/DD/YYYY'
+  };
+  if (item !== null && item !== void 0 && item.label) {
+    inputProps.label = item === null || item === void 0 ? void 0 : item.label;
   }
-  (0, _createClass2["default"])(DatePicker, [{
-    key: "render",
-    value: function render() {
-      var _this8 = this;
-      var props = {};
-      props.name = this.props.name;
-      props.placeholder = this.props.item.placeholder || this.props.item.formatMask || 'MM/DD/YYYY';
-      props.onChange = function (val) {
-        if (_this8.props.onChange !== undefined) {
-          _this8.props.onChange(val);
-        }
-      };
-      props.value = this.props.value;
-      props.isInvalid = this.props.isInvalid;
-      props.onBlur = this.props.onBlur;
-      props.autoComplete = "new-password";
-      if (this.props.item.disabled) {
-        props.disabled = true;
-      }
-      if (this.props.item.mutable) {
-        props.ref = this.inputField;
-      }
-      props.formatMask = this.props.item.formatMask || 'MM/DD/YYYY';
-      var labelLocation = 'ABOVE';
-      if (this.props.item.labelLocation) {
-        labelLocation = this.props.item.labelLocation;
-        props.label = props.placeholder;
-      }
-      var baseClasses = 'SortableItem rfb-item';
-      if (this.props.item.pageBreakBefore) {
-        baseClasses += ' alwaysbreak';
-      }
-      if (this.props.item.print === true) {
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          style: _objectSpread({}, this.props.style),
-          className: baseClasses
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
-          className: "form-group mb-3"
-        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-          htmlFor: props.name
-        })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.value)));
-      }
-      console.log('this.props', this.props);
-      console.log('props', props);
-      Object.keys(props).forEach(function (key) {
-        if (props[key] === undefined) {
-          delete props[key];
-        }
-      });
-      if (this.props) {
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          style: _objectSpread({}, this.props.style),
-          className: baseClasses
-        }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
-          className: "form-group mb-3"
-        }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-          id: props.name + '-' + (0, _functions.generateUUID)(),
-          type: "text"
-        }, props, {
-          as: CustomDateInput
-        })), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-          htmlFor: props.name
-        }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-          htmlFor: props.name
-        })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-          id: props.name + '-' + (0, _functions.generateUUID)(),
-          type: "text"
-        }, props, {
-          as: CustomDateInput
-        }))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
-          muted: true
-        }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
-          name: props.name
-        })));
-      } else {
-        return null;
-      }
+  if (item !== null && item !== void 0 && item.placeholder) {
+    inputProps.placeholder = item === null || item === void 0 ? void 0 : item.placeholder;
+  } else if (item !== null && item !== void 0 && item.label) {
+    inputProps.placeholder = item === null || item === void 0 ? void 0 : item.label;
+  }
+  if (item !== null && item !== void 0 && item.mutable) {
+    inputProps.ref = inputField;
+  }
+  var fieldRules = {
+    validate: function validate(value) {
+      return (0, _validators.validateDate)(value) || 'Please enter a valid Date in the format MM/DD/YYYY';
     }
-  }]);
-  return DatePicker;
-}(_react["default"].Component);
-var NumberInput = exports.NumberInput = /*#__PURE__*/function (_React$Component10) {
-  (0, _inherits2["default"])(NumberInput, _React$Component10);
-  var _super10 = _createSuper(NumberInput);
+  };
+  if ((_item$required2 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required2 !== void 0 ? _item$required2 : false) {
+    fieldRules.required = 'Required Field';
+  }
+  var controllerProps = {
+    name: name,
+    rules: fieldRules
+  };
+  controllerProps.render = function (_ref4) {
+    var _ref4$field = _ref4.field,
+      _onChange = _ref4$field.onChange,
+      onBlur = _ref4$field.onBlur,
+      value = _ref4$field.value,
+      name = _ref4$field.name,
+      ref = _ref4$field.ref,
+      _ref4$fieldState = _ref4.fieldState,
+      invalid = _ref4$fieldState.invalid,
+      isTouched = _ref4$fieldState.isTouched,
+      isDirty = _ref4$fieldState.isDirty,
+      error = _ref4$fieldState.error,
+      formState = _ref4.formState;
+    return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
+      onBlur: onBlur,
+      onChange: function onChange(e) {
+        _onChange(e);
+        onChangeHandler(e);
+      },
+      value: value,
+      name: name,
+      ref: ref,
+      isInvalid: invalid,
+      id: name + '-' + (0, _functions.generateUUID)(),
+      as: CustomDateInput
+    }, inputProps));
+  };
+  if (value !== undefined) {
+    controllerProps.defaultValue = value;
+  }
+  if ((item === null || item === void 0 ? void 0 : item.disabled) !== undefined) {
+    var _item$disabled2;
+    controllerProps.disabled = (_item$disabled2 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled2 !== void 0 ? _item$disabled2 : false;
+  }
+  if ((item === null || item === void 0 ? void 0 : item.required) !== undefined) {
+    var _item$required3;
+    controllerProps.required = (_item$required3 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required3 !== void 0 ? _item$required3 : false;
+  }
+  var labelLocation = 'ABOVE';
+  if (item !== null && item !== void 0 && item.labelLocation) {
+    labelLocation = item === null || item === void 0 ? void 0 : item.labelLocation;
+  }
+  var baseClasses = 'SortableItem rfb-item';
+  if (item !== null && item !== void 0 && item.pageBreakBefore) {
+    baseClasses += ' alwaysbreak';
+  }
+  if (!methods) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: _objectSpread({}, style),
+      className: baseClasses
+    }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], (0, _extends2["default"])({
+      item: item
+    }, props)), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
+      className: "form-group mb-3"
+    }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
+      value: value,
+      name: name,
+      ref: inputField,
+      id: name + '-2-' + (0, _functions.generateUUID)(),
+      as: CustomDateInput
+    }, inputProps)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
+      item: item,
+      className: item === null || item === void 0 ? void 0 : item.labelClassName,
+      htmlFor: name
+    })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
+      item: item,
+      className: item === null || item === void 0 ? void 0 : item.labelClassName,
+      htmlFor: name
+    }), /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
+      value: value,
+      name: name,
+      ref: inputField,
+      id: name + '-2-' + (0, _functions.generateUUID)(),
+      as: CustomPhoneInput
+    }, inputProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
+      muted: true
+    }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+      name: name
+    })));
+  }
+  if ((item === null || item === void 0 ? void 0 : item.print) === true) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: _objectSpread({}, style),
+      className: baseClasses
+    }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
+      className: "form-group mb-3"
+    }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
+      item: item,
+      className: item === null || item === void 0 ? void 0 : item.labelClassName,
+      htmlFor: name
+    }), /*#__PURE__*/_react["default"].createElement("div", null, value !== null && value !== void 0 ? value : '')));
+  }
+  console.log('props', props);
+  console.log('inputProps', inputProps);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread({}, style),
+    className: baseClasses
+  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], (0, _extends2["default"])({
+    item: item
+  }, props)), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
+    className: "form-group mb-3"
+  }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, (0, _extends2["default"])({
+    control: methods.control
+  }, controllerProps)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
+    item: item,
+    className: item === null || item === void 0 ? void 0 : item.labelClassName,
+    htmlFor: name
+  })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
+    item: item,
+    className: item === null || item === void 0 ? void 0 : item.labelClassName,
+    htmlFor: name
+  }), /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, (0, _extends2["default"])({
+    control: methods.control
+  }, controllerProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
+    muted: true
+  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+    name: name
+  })));
+};
+var DatePicker = exports.DatePicker = function DatePicker(_ref5) {
+  var _item$required4, _item$disabled3, _item$required5;
+  var name = _ref5.name,
+    onChange = _ref5.onChange,
+    value = _ref5.value,
+    style = _ref5.style,
+    item = _ref5.item,
+    props = (0, _objectWithoutProperties2["default"])(_ref5, _excluded2);
+  var methods = (0, _reactHookForm.useFormContext)();
+  var inputField = _react["default"].useRef(null);
+  var onChangeHandler = function onChangeHandler(value) {
+    if (onChange !== undefined) {
+      onChange(value);
+    }
+  };
+  var inputProps = {
+    type: 'text',
+    required: (_item$required4 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required4 !== void 0 ? _item$required4 : false,
+    disabled: (_item$disabled3 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled3 !== void 0 ? _item$disabled3 : false,
+    autoComplete: 'new-password',
+    // hack to prevent auto-complete for form fields
+    formatMask: (item === null || item === void 0 ? void 0 : item.formatMask) || 'MM/DD/YYYY'
+  };
+  if (item !== null && item !== void 0 && item.label) {
+    inputProps.label = item === null || item === void 0 ? void 0 : item.label;
+  }
+  if (item !== null && item !== void 0 && item.placeholder) {
+    inputProps.placeholder = item === null || item === void 0 ? void 0 : item.placeholder;
+  } else if (item !== null && item !== void 0 && item.label) {
+    inputProps.placeholder = item === null || item === void 0 ? void 0 : item.label;
+  }
+  if (item !== null && item !== void 0 && item.mutable) {
+    inputProps.ref = inputField;
+  }
+  var fieldRules = {
+    validate: function validate(value) {
+      return (0, _validators.validateDate)(value) || 'Please enter a valid Date in the format MM/DD/YYYY';
+    }
+  };
+  if ((_item$required5 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required5 !== void 0 ? _item$required5 : false) {
+    fieldRules.required = 'Required Field';
+  }
+  var controllerProps = {
+    name: name,
+    rules: fieldRules
+  };
+  controllerProps.render = function (_ref6) {
+    var _ref6$field = _ref6.field,
+      _onChange2 = _ref6$field.onChange,
+      onBlur = _ref6$field.onBlur,
+      value = _ref6$field.value,
+      name = _ref6$field.name,
+      ref = _ref6$field.ref,
+      _ref6$fieldState = _ref6.fieldState,
+      invalid = _ref6$fieldState.invalid,
+      isTouched = _ref6$fieldState.isTouched,
+      isDirty = _ref6$fieldState.isDirty,
+      error = _ref6$fieldState.error,
+      formState = _ref6.formState;
+    return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
+      onBlur: onBlur,
+      onChange: function onChange(e) {
+        _onChange2(e);
+        onChangeHandler(e);
+      },
+      value: value,
+      name: name,
+      ref: ref,
+      isInvalid: invalid,
+      id: name + '-' + (0, _functions.generateUUID)(),
+      as: CustomDateInput
+    }, inputProps));
+  };
+  if (value !== undefined) {
+    controllerProps.defaultValue = value;
+  }
+  if ((item === null || item === void 0 ? void 0 : item.disabled) !== undefined) {
+    var _item$disabled4;
+    controllerProps.disabled = (_item$disabled4 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled4 !== void 0 ? _item$disabled4 : false;
+  }
+  if ((item === null || item === void 0 ? void 0 : item.required) !== undefined) {
+    var _item$required6;
+    controllerProps.required = (_item$required6 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required6 !== void 0 ? _item$required6 : false;
+  }
+  var labelLocation = 'ABOVE';
+  if (item !== null && item !== void 0 && item.labelLocation) {
+    labelLocation = item === null || item === void 0 ? void 0 : item.labelLocation;
+  }
+  var baseClasses = 'SortableItem rfb-item';
+  if (item !== null && item !== void 0 && item.pageBreakBefore) {
+    baseClasses += ' alwaysbreak';
+  }
+  if (!methods) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: _objectSpread({}, style),
+      className: baseClasses
+    }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], (0, _extends2["default"])({
+      item: item
+    }, props)), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
+      className: "form-group mb-3"
+    }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
+      value: value,
+      name: name,
+      ref: inputField,
+      id: name + '-2-' + (0, _functions.generateUUID)(),
+      as: CustomDateInput
+    }, inputProps)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
+      item: item,
+      className: item === null || item === void 0 ? void 0 : item.labelClassName,
+      htmlFor: name
+    })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
+      item: item,
+      className: item === null || item === void 0 ? void 0 : item.labelClassName,
+      htmlFor: name
+    }), /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
+      value: value,
+      name: name,
+      ref: inputField,
+      id: name + '-2-' + (0, _functions.generateUUID)(),
+      as: CustomDateInput
+    }, inputProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
+      muted: true
+    }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+      name: name
+    })));
+  }
+  if ((item === null || item === void 0 ? void 0 : item.print) === true) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: _objectSpread({}, style),
+      className: baseClasses
+    }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
+      className: "form-group mb-3"
+    }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
+      item: item,
+      className: item === null || item === void 0 ? void 0 : item.labelClassName,
+      htmlFor: name
+    }), /*#__PURE__*/_react["default"].createElement("div", null, value !== null && value !== void 0 ? value : '')));
+  }
+  console.log('props', props);
+  console.log('inputProps', inputProps);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread({}, style),
+    className: baseClasses
+  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], (0, _extends2["default"])({
+    item: item
+  }, props)), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
+    className: "form-group mb-3"
+  }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, (0, _extends2["default"])({
+    control: methods.control
+  }, controllerProps)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
+    item: item,
+    className: item === null || item === void 0 ? void 0 : item.labelClassName,
+    htmlFor: name
+  })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
+    item: item,
+    className: item === null || item === void 0 ? void 0 : item.labelClassName,
+    htmlFor: name
+  }), /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, (0, _extends2["default"])({
+    control: methods.control
+  }, controllerProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
+    muted: true
+  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+    name: name
+  })));
+};
+var NumberInput = exports.NumberInput = /*#__PURE__*/function (_React$Component9) {
+  (0, _inherits2["default"])(NumberInput, _React$Component9);
+  var _super9 = _createSuper(NumberInput);
   function NumberInput(props) {
-    var _this9;
+    var _this7;
     (0, _classCallCheck2["default"])(this, NumberInput);
-    _this9 = _super10.call(this, props);
-    _this9.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this9;
+    _this7 = _super9.call(this, props);
+    _this7.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this7;
   }
   (0, _createClass2["default"])(NumberInput, [{
     key: "render",
     value: function render() {
-      var _this10 = this;
+      var _this8 = this;
       var props = {};
       props.name = this.props.name;
       props.placeholder = this.props.item.placeholder;
       props.onChange = function (event) {
-        _this10.props.onChange(event.target.value);
+        _this8.props.onChange(event.target.value);
       };
       props.value = this.props.value;
       props.isInvalid = this.props.isInvalid;
-      props.onBlur = this.props.onBlur;
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
       props.autoComplete = "new-password";
       if (this.props.item.disabled) {
         props.disabled = 'disabled';
@@ -660,7 +943,7 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/function (_React$Component1
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
           className: "form-group mb-3"
         }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
           htmlFor: props.name
@@ -669,19 +952,19 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/function (_React$Component1
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
-      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
         id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "number"
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      })), /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
         id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "number"
-      }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: props.name
@@ -690,29 +973,31 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/function (_React$Component1
   }]);
   return NumberInput;
 }(_react["default"].Component);
-var TextArea = exports.TextArea = /*#__PURE__*/function (_React$Component11) {
-  (0, _inherits2["default"])(TextArea, _React$Component11);
-  var _super11 = _createSuper(TextArea);
+var TextArea = exports.TextArea = /*#__PURE__*/function (_React$Component10) {
+  (0, _inherits2["default"])(TextArea, _React$Component10);
+  var _super10 = _createSuper(TextArea);
   function TextArea(props) {
-    var _this11;
+    var _this9;
     (0, _classCallCheck2["default"])(this, TextArea);
-    _this11 = _super11.call(this, props);
-    _this11.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this11;
+    _this9 = _super10.call(this, props);
+    _this9.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this9;
   }
   (0, _createClass2["default"])(TextArea, [{
     key: "render",
     value: function render() {
-      var _this12 = this;
+      var _this10 = this;
       var props = {};
       props.name = this.props.name;
       props.placeholder = this.props.item.placeholder;
       props.onChange = function (event) {
-        _this12.props.onChange(event.target.value);
+        _this10.props.onChange(event.target.value);
       };
       props.value = this.props.value;
       props.isInvalid = this.props.isInvalid;
-      props.onBlur = this.props.onBlur;
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
       props.autoComplete = "new-password";
       if (this.props.item.disabled) {
         props.disabled = 'disabled';
@@ -732,7 +1017,7 @@ var TextArea = exports.TextArea = /*#__PURE__*/function (_React$Component11) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
           className: "form-group mb-3"
         }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
           htmlFor: props.name
@@ -741,19 +1026,19 @@ var TextArea = exports.TextArea = /*#__PURE__*/function (_React$Component11) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
-      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
         as: "textarea",
         id: props.name + '-' + (0, _functions.generateUUID)()
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      })), /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
         as: "textarea",
         id: props.name + '-' + (0, _functions.generateUUID)()
-      }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: props.name
@@ -762,29 +1047,31 @@ var TextArea = exports.TextArea = /*#__PURE__*/function (_React$Component11) {
   }]);
   return TextArea;
 }(_react["default"].Component);
-var Dropdown = exports.Dropdown = /*#__PURE__*/function (_React$Component12) {
-  (0, _inherits2["default"])(Dropdown, _React$Component12);
-  var _super12 = _createSuper(Dropdown);
+var Dropdown = exports.Dropdown = /*#__PURE__*/function (_React$Component11) {
+  (0, _inherits2["default"])(Dropdown, _React$Component11);
+  var _super11 = _createSuper(Dropdown);
   function Dropdown(props) {
-    var _this13;
+    var _this11;
     (0, _classCallCheck2["default"])(this, Dropdown);
-    _this13 = _super12.call(this, props);
-    _this13.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this13;
+    _this11 = _super11.call(this, props);
+    _this11.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this11;
   }
   (0, _createClass2["default"])(Dropdown, [{
     key: "render",
     value: function render() {
-      var _this14 = this;
+      var _this12 = this;
       var props = {};
       props.name = this.props.name;
       props.placeholder = this.props.item.placeholder || 'Select One';
       props.onChange = function (event) {
-        _this14.props.onChange(event.target.value);
+        _this12.props.onChange(event.target.value);
       };
       props.value = this.props.value;
       props.isInvalid = this.props.isInvalid;
-      props.onBlur = this.props.onBlur;
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
       props.autoComplete = "new-password";
       if (this.props.item.disabled) {
         props.disabled = 'disabled';
@@ -805,20 +1092,20 @@ var Dropdown = exports.Dropdown = /*#__PURE__*/function (_React$Component12) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
           className: "form-group mb-3"
         }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
           htmlFor: props.name
         })), /*#__PURE__*/_react["default"].createElement("div", null, (_this$props$item$opti = this.props.item.options.find(function (option) {
-          return option.value === _this14.props.value;
+          return option.value === _this12.props.value;
         })) === null || _this$props$item$opti === void 0 ? void 0 : _this$props$item$opti.text)));
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
-      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_esm.Form.Select, (0, _extends2["default"])({
         id: props.name + '-' + (0, _functions.generateUUID)()
       }, props), props.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
         value: ""
@@ -832,7 +1119,7 @@ var Dropdown = exports.Dropdown = /*#__PURE__*/function (_React$Component12) {
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, (0, _extends2["default"])({
+      })), /*#__PURE__*/_react["default"].createElement(_esm.Form.Select, (0, _extends2["default"])({
         id: props.name + '-' + (0, _functions.generateUUID)()
       }, props), props.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
         value: ""
@@ -842,7 +1129,7 @@ var Dropdown = exports.Dropdown = /*#__PURE__*/function (_React$Component12) {
           value: option.value,
           key: thisKey
         }, option.text);
-      }))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: props.name
@@ -851,60 +1138,60 @@ var Dropdown = exports.Dropdown = /*#__PURE__*/function (_React$Component12) {
   }]);
   return Dropdown;
 }(_react["default"].Component);
-var Signature = exports.Signature = /*#__PURE__*/function (_React$Component13) {
-  (0, _inherits2["default"])(Signature, _React$Component13);
-  var _super13 = _createSuper(Signature);
+var Signature = exports.Signature = /*#__PURE__*/function (_React$Component12) {
+  (0, _inherits2["default"])(Signature, _React$Component12);
+  var _super12 = _createSuper(Signature);
   function Signature(props) {
-    var _this15;
+    var _this13;
     (0, _classCallCheck2["default"])(this, Signature);
-    _this15 = _super13.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this15), "clear", function () {
-      var $canvas_sig = _this15.canvas.current;
-      if (_this15.props.value) {
-        var $input_sig = _this15.inputField.current;
-        var signature = _objectSpread(_objectSpread({}, _this15.props.value), {}, {
+    _this13 = _super12.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this13), "clear", function () {
+      var $canvas_sig = _this13.canvas.current;
+      if (_this13.props.value) {
+        var $input_sig = _this13.inputField.current;
+        var signature = _objectSpread(_objectSpread({}, _this13.props.value), {}, {
           signature: ''
         });
         $input_sig.value = signature;
-        if (_this15.props.methods) {
-          _this15.props.methods.setValue(_this15.props.name, signature);
+        if (_this13.props.methods) {
+          _this13.props.methods.setValue(_this13.props.name, signature);
         }
-        _this15.setState({
+        _this13.setState({
           value: signature
         });
       } else if ($canvas_sig) {
         $canvas_sig.clear();
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this15), "_getSignatureImg", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this13), "_getSignatureImg", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
       var $canvas_sig, base64, isEmpty, $input_sig, value, ipAddress, date, signature;
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            $canvas_sig = _this15.canvas.current;
+            $canvas_sig = _this13.canvas.current;
             if (!$canvas_sig) {
               _context.next = 14;
               break;
             }
             base64 = $canvas_sig.getTrimmedCanvas().toDataURL("image/png");
             isEmpty = $canvas_sig.isEmpty();
-            $input_sig = _this15.inputField.current;
+            $input_sig = _this13.inputField.current;
             value = isEmpty ? '' : base64;
             _context.next = 8;
             return (0, _ipUtils.getIPAddress)();
           case 8:
             ipAddress = _context.sent;
             date = (0, _momentTimezone["default"])().toISOString();
-            signature = _objectSpread(_objectSpread({}, _this15.props.value), {}, {
+            signature = _objectSpread(_objectSpread({}, _this13.props.value), {}, {
               signature: value,
               ipAddress: ipAddress,
               date: date
             });
             $input_sig.value = signature;
-            if (_this15.props.methods) {
-              _this15.props.methods.setValue(_this15.props.name, signature);
+            if (_this13.props.methods) {
+              _this13.props.methods.setValue(_this13.props.name, signature);
             }
-            _this15.setState({
+            _this13.setState({
               value: signature
             });
           case 14:
@@ -913,25 +1200,25 @@ var Signature = exports.Signature = /*#__PURE__*/function (_React$Component13) {
         }
       }, _callee);
     })));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this15), "onChangeName", function (event) {
-      var $input_sig = _this15.inputField.current;
-      var signature = _objectSpread(_objectSpread({}, _this15.props.value), {}, {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this13), "onChangeName", function (event) {
+      var $input_sig = _this13.inputField.current;
+      var signature = _objectSpread(_objectSpread({}, _this13.props.value), {}, {
         name: event.target.value
       });
       $input_sig.value = signature;
-      if (_this15.props.methods) {
-        _this15.props.methods.setValue(_this15.props.name, signature);
+      if (_this13.props.methods) {
+        _this13.props.methods.setValue(_this13.props.name, signature);
       }
-      _this15.setState({
+      _this13.setState({
         value: signature
       });
     });
-    _this15.state = {
+    _this13.state = {
       value: props.value
     };
-    _this15.inputField = /*#__PURE__*/_react["default"].createRef();
-    _this15.canvas = /*#__PURE__*/_react["default"].createRef();
-    return _this15;
+    _this13.inputField = /*#__PURE__*/_react["default"].createRef();
+    _this13.canvas = /*#__PURE__*/_react["default"].createRef();
+    return _this13;
   }
   (0, _createClass2["default"])(Signature, [{
     key: "render",
@@ -942,7 +1229,7 @@ var Signature = exports.Signature = /*#__PURE__*/function (_React$Component13) {
         _this$props$value7,
         _this$props$value8,
         _this$props$value9,
-        _this16 = this,
+        _this14 = this,
         _this$props$value$nam,
         _this$props$value10;
       var canClear = !!this.state.value;
@@ -976,11 +1263,11 @@ var Signature = exports.Signature = /*#__PURE__*/function (_React$Component13) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
           className: "form-group mb-3"
         }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
           htmlFor: this.props.name
-        })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image, {
+        })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_esm.Image, {
           src: sourceDataURL
         }), /*#__PURE__*/_react["default"].createElement("hr", {
           style: {
@@ -991,11 +1278,11 @@ var Signature = exports.Signature = /*#__PURE__*/function (_React$Component13) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: this.props.name
-      })), this.props.readOnly === true ? !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image, {
+      })), this.props.readOnly === true ? !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_esm.Image, {
         src: sourceDataURL
       }), /*#__PURE__*/_react["default"].createElement("hr", {
         style: {
@@ -1007,27 +1294,27 @@ var Signature = exports.Signature = /*#__PURE__*/function (_React$Component13) {
         className: "m-signature-pad--body"
       }, /*#__PURE__*/_react["default"].createElement(_reactSignatureCanvas["default"], (0, _extends2["default"])({}, padProps, {
         onEnd: function onEnd(e) {
-          _this16._getSignatureImg();
+          _this14._getSignatureImg();
         }
       }))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "m-signature-pad--footer clearfix"
-      }, canClear && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+      }, canClear && /*#__PURE__*/_react["default"].createElement(_esm.Button, {
         variant: "default",
         size: "sm",
         className: "clear-signature float-end",
         onClick: this.clear,
         title: "Clear Signature"
-      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " clear"))), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, "Please print your full legal name and today's date."), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Container, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " clear"))), /*#__PURE__*/_react["default"].createElement(_esm.Form.Label, null, "Please print your full legal name and today's date."), /*#__PURE__*/_react["default"].createElement(_esm.Container, null, /*#__PURE__*/_react["default"].createElement(_esm.Row, null, /*#__PURE__*/_react["default"].createElement(_esm.Col, {
         sm: 6
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+      }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, {
         value: (_this$props$value$nam = (_this$props$value10 = this.props.value) === null || _this$props$value10 === void 0 ? void 0 : _this$props$value10.name) !== null && _this$props$value$nam !== void 0 ? _this$props$value$nam : '',
         type: "text",
         required: true,
         placeholder: "Full Legal Name",
         onChange: this.onChangeName
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+      })), /*#__PURE__*/_react["default"].createElement(_esm.Col, {
         sm: 6
-      }, "Today's Date: ", (0, _momentTimezone["default"])().format('MM/DD/YYYY'))))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }, "Today's Date: ", (0, _momentTimezone["default"])().format('MM/DD/YYYY'))))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: this.props.name
@@ -1040,15 +1327,15 @@ var Signature = exports.Signature = /*#__PURE__*/function (_React$Component13) {
   }]);
   return Signature;
 }(_react["default"].Component);
-var Tags = exports.Tags = /*#__PURE__*/function (_React$Component14) {
-  (0, _inherits2["default"])(Tags, _React$Component14);
-  var _super14 = _createSuper(Tags);
+var Tags = exports.Tags = /*#__PURE__*/function (_React$Component13) {
+  (0, _inherits2["default"])(Tags, _React$Component13);
+  var _super13 = _createSuper(Tags);
   function Tags(props) {
-    var _this17;
+    var _this15;
     (0, _classCallCheck2["default"])(this, Tags);
-    _this17 = _super14.call(this, props);
-    _this17.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this17;
+    _this15 = _super13.call(this, props);
+    _this15.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this15;
   }
   (0, _createClass2["default"])(Tags, [{
     key: "getDefaultValue",
@@ -1063,7 +1350,7 @@ var Tags = exports.Tags = /*#__PURE__*/function (_React$Component14) {
   }, {
     key: "render",
     value: function render() {
-      var _this18 = this;
+      var _this16 = this;
       var options = this.props.item.options.map(function (option) {
         return {
           value: option.value,
@@ -1075,12 +1362,14 @@ var Tags = exports.Tags = /*#__PURE__*/function (_React$Component14) {
       props.name = this.props.name;
       props.placeholder = this.props.item.placeholder || 'Select...';
       props.onChange = function (val) {
-        _this18.props.onChange(val !== undefined && val !== null && val.length > 0 ? val.map(function (i) {
+        _this16.props.onChange(val !== undefined && val !== null && val.length > 0 ? val.map(function (i) {
           return i.value;
         }) : []);
       };
       props.isInvalid = this.props.isInvalid;
-      props.onBlur = this.props.onBlur;
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
       props.autoComplete = "new-password";
       if (this.props.item.disabled) {
         props.disabled = 'disabled';
@@ -1105,12 +1394,12 @@ var Tags = exports.Tags = /*#__PURE__*/function (_React$Component14) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
           className: "form-group mb-3"
         }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
           htmlFor: props.name
         })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.item.options.filter(function (option) {
-          return _this18.props.value.includes(option.value);
+          return _this16.props.value.includes(option.value);
         }).map(function (option) {
           return option.text;
         }).join(', '))));
@@ -1118,9 +1407,9 @@ var Tags = exports.Tags = /*#__PURE__*/function (_React$Component14) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
-      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrapTypeahead.Typeahead, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrapTypeahead.Typeahead, (0, _extends2["default"])({
         labelKey: function labelKey(option) {
           return option.label;
         },
@@ -1134,7 +1423,7 @@ var Tags = exports.Tags = /*#__PURE__*/function (_React$Component14) {
           return option.label;
         },
         id: props.name + '-' + (0, _functions.generateUUID)()
-      }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: props.name
@@ -1143,32 +1432,32 @@ var Tags = exports.Tags = /*#__PURE__*/function (_React$Component14) {
   }]);
   return Tags;
 }(_react["default"].Component);
-var Checkboxes = exports.Checkboxes = /*#__PURE__*/function (_React$Component15) {
-  (0, _inherits2["default"])(Checkboxes, _React$Component15);
-  var _super15 = _createSuper(Checkboxes);
+var Checkboxes = exports.Checkboxes = /*#__PURE__*/function (_React$Component14) {
+  (0, _inherits2["default"])(Checkboxes, _React$Component14);
+  var _super14 = _createSuper(Checkboxes);
   function Checkboxes(props) {
-    var _this19;
+    var _this17;
     (0, _classCallCheck2["default"])(this, Checkboxes);
-    _this19 = _super15.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this19), "onCheckboxChange", function (checkboxValue, event) {
-      var checkedValues = _this19.props.value;
-      if (_this19.props.onChange) {
+    _this17 = _super14.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this17), "onCheckboxChange", function (checkboxValue, event) {
+      var checkedValues = _this17.props.value;
+      if (_this17.props.onChange) {
         if (event.target.checked) {
-          _this19.props.onChange(checkedValues.concat(checkboxValue));
+          _this17.props.onChange(checkedValues.concat(checkboxValue));
         } else {
-          _this19.props.onChange(checkedValues.filter(function (v) {
+          _this17.props.onChange(checkedValues.filter(function (v) {
             return v !== checkboxValue;
           }));
         }
       }
     });
-    _this19.options = {};
-    return _this19;
+    _this17.options = {};
+    return _this17;
   }
   (0, _createClass2["default"])(Checkboxes, [{
     key: "render",
     value: function render() {
-      var _this20 = this;
+      var _this18 = this;
       var self = this;
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.item.pageBreakBefore) {
@@ -1178,12 +1467,12 @@ var Checkboxes = exports.Checkboxes = /*#__PURE__*/function (_React$Component15)
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
           className: "form-group mb-3"
         }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
           htmlFor: this.props.name
         })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.item.options.filter(function (option) {
-          return _this20.props.value.includes(option.value);
+          return _this18.props.value.includes(option.value);
         }).map(function (option) {
           return option.text;
         }).join(', '))));
@@ -1191,12 +1480,12 @@ var Checkboxes = exports.Checkboxes = /*#__PURE__*/function (_React$Component15)
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: this.props.name
       })), this.props.item.options.map(function (option) {
-        var _this20$props$checkbo;
+        var _this18$props$checkbo;
         var props = {};
         props.name = "option_".concat(option.key);
         props.value = option.value;
@@ -1205,9 +1494,9 @@ var Checkboxes = exports.Checkboxes = /*#__PURE__*/function (_React$Component15)
         if (self.props.item.disabled) {
           props.disabled = 'disabled';
         }
-        return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.ToggleButton, (0, _extends2["default"])({
+        return /*#__PURE__*/_react["default"].createElement(_esm.ToggleButton, (0, _extends2["default"])({
           type: "checkbox",
-          variant: (_this20$props$checkbo = _this20.props.checkboxButtonClassName) !== null && _this20$props$checkbo !== void 0 ? _this20$props$checkbo : "outline-light",
+          variant: (_this18$props$checkbo = _this18.props.checkboxButtonClassName) !== null && _this18$props$checkbo !== void 0 ? _this18$props$checkbo : "outline-light",
           className: "btn-survey-builder-checkbox",
           key: "preview_".concat(option.key),
           id: self.props.name + '-' + (0, _functions.generateUUID)(),
@@ -1230,7 +1519,7 @@ var Checkboxes = exports.Checkboxes = /*#__PURE__*/function (_React$Component15)
         }), /*#__PURE__*/_react["default"].createElement("div", {
           className: "text-start"
         }, option.text)));
-      }), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: this.props.name
@@ -1239,20 +1528,20 @@ var Checkboxes = exports.Checkboxes = /*#__PURE__*/function (_React$Component15)
   }]);
   return Checkboxes;
 }(_react["default"].Component);
-var Checkbox = exports.Checkbox = /*#__PURE__*/function (_React$Component16) {
-  (0, _inherits2["default"])(Checkbox, _React$Component16);
-  var _super16 = _createSuper(Checkbox);
+var Checkbox = exports.Checkbox = /*#__PURE__*/function (_React$Component15) {
+  (0, _inherits2["default"])(Checkbox, _React$Component15);
+  var _super15 = _createSuper(Checkbox);
   function Checkbox(props) {
-    var _this21;
+    var _this19;
     (0, _classCallCheck2["default"])(this, Checkbox);
-    _this21 = _super16.call(this, props);
-    _this21.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this21;
+    _this19 = _super15.call(this, props);
+    _this19.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this19;
   }
   (0, _createClass2["default"])(Checkbox, [{
     key: "render",
     value: function render() {
-      var _this22 = this,
+      var _this20 = this,
         _this$props$checkboxB;
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.item.pageBreakBefore) {
@@ -1262,12 +1551,14 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/function (_React$Component16) {
       // eslint-disable-next-line no-undef
       props.name = this.props.name;
       props.onChange = function (event) {
-        if (_this22.props.onChange) {
-          _this22.props.onChange(event.target.checked);
+        if (_this20.props.onChange) {
+          _this20.props.onChange(event.target.checked);
         }
       };
       //props.isInvalid = this.props.isInvalid;
-      props.onBlur = this.props.onBlur;
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
       props.autoComplete = "new-password";
       if (this.props.item.disabled) {
         props.disabled = 'disabled';
@@ -1282,7 +1573,7 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/function (_React$Component16) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
           className: "form-group mb-3"
         }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
           htmlFor: props.name
@@ -1295,11 +1586,11 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/function (_React$Component16) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({
         className: "form-label"
-      }, this.props)), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.ToggleButton, (0, _extends2["default"])({
+      }, this.props)), /*#__PURE__*/_react["default"].createElement(_esm.ToggleButton, (0, _extends2["default"])({
         type: "checkbox",
         variant: (_this$props$checkboxB = this.props.checkboxButtonClassName) !== null && _this$props$checkboxB !== void 0 ? _this$props$checkboxB : "outline-light",
         className: "btn-survey-builder-checkbox",
@@ -1319,7 +1610,7 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/function (_React$Component16) {
         dangerouslySetInnerHTML: {
           __html: this.props.item.boxLabel
         }
-      })))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      })))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: props.name
@@ -1328,20 +1619,20 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/function (_React$Component16) {
   }]);
   return Checkbox;
 }(_react["default"].Component);
-var RadioButtons = exports.RadioButtons = /*#__PURE__*/function (_React$Component17) {
-  (0, _inherits2["default"])(RadioButtons, _React$Component17);
-  var _super17 = _createSuper(RadioButtons);
+var RadioButtons = exports.RadioButtons = /*#__PURE__*/function (_React$Component16) {
+  (0, _inherits2["default"])(RadioButtons, _React$Component16);
+  var _super16 = _createSuper(RadioButtons);
   function RadioButtons(props) {
-    var _this23;
+    var _this21;
     (0, _classCallCheck2["default"])(this, RadioButtons);
-    _this23 = _super17.call(this, props);
-    _this23.options = {};
-    return _this23;
+    _this21 = _super16.call(this, props);
+    _this21.options = {};
+    return _this21;
   }
   (0, _createClass2["default"])(RadioButtons, [{
     key: "render",
     value: function render() {
-      var _this24 = this;
+      var _this22 = this;
       var self = this;
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.item.pageBreakBefore) {
@@ -1351,12 +1642,12 @@ var RadioButtons = exports.RadioButtons = /*#__PURE__*/function (_React$Componen
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
           className: "form-group mb-3"
         }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
           htmlFor: this.props.name
         })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.item.options.filter(function (option) {
-          return _this24.props.value === option.value;
+          return _this22.props.value === option.value;
         }).map(function (option) {
           return option.text;
         }).join(', '))));
@@ -1365,12 +1656,12 @@ var RadioButtons = exports.RadioButtons = /*#__PURE__*/function (_React$Componen
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, self.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], self.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], self.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], self.props), self.props.item.options.map(function (option) {
         var _self$props$checkboxB, _self$props, _self$props2, _self$props3, _self$props5, _self$props6;
         console.log('option', option);
-        return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.ToggleButton, {
+        return /*#__PURE__*/_react["default"].createElement(_esm.ToggleButton, {
           label: option.text,
           type: "radio",
           variant: (_self$props$checkboxB = self.props.checkboxButtonClassName) !== null && _self$props$checkboxB !== void 0 ? _self$props$checkboxB : "outline-light",
@@ -1408,7 +1699,7 @@ var RadioButtons = exports.RadioButtons = /*#__PURE__*/function (_React$Componen
             __html: option.text
           }
         }))));
-      }), self.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }), self.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, self.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: self.props.name
@@ -1417,12 +1708,12 @@ var RadioButtons = exports.RadioButtons = /*#__PURE__*/function (_React$Componen
   }]);
   return RadioButtons;
 }(_react["default"].Component);
-var Image = exports.Image = /*#__PURE__*/function (_React$Component18) {
-  (0, _inherits2["default"])(Image, _React$Component18);
-  var _super18 = _createSuper(Image);
+var Image = exports.Image = /*#__PURE__*/function (_React$Component17) {
+  (0, _inherits2["default"])(Image, _React$Component17);
+  var _super17 = _createSuper(Image);
   function Image() {
     (0, _classCallCheck2["default"])(this, Image);
-    return _super18.apply(this, arguments);
+    return _super17.apply(this, arguments);
   }
   (0, _createClass2["default"])(Image, [{
     key: "render",
@@ -1437,7 +1728,7 @@ var Image = exports.Image = /*#__PURE__*/function (_React$Component18) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread(_objectSpread({}, this.props.style), style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), this.props.item.src && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), this.props.item.src && /*#__PURE__*/_react["default"].createElement(_esm.Image, {
         src: this.props.item.src,
         width: this.props.item.width,
         height: this.props.item.height
@@ -1448,20 +1739,20 @@ var Image = exports.Image = /*#__PURE__*/function (_React$Component18) {
   }]);
   return Image;
 }(_react["default"].Component);
-var Rating = exports.Rating = /*#__PURE__*/function (_React$Component19) {
-  (0, _inherits2["default"])(Rating, _React$Component19);
-  var _super19 = _createSuper(Rating);
+var Rating = exports.Rating = /*#__PURE__*/function (_React$Component18) {
+  (0, _inherits2["default"])(Rating, _React$Component18);
+  var _super18 = _createSuper(Rating);
   function Rating(props) {
-    var _this25;
+    var _this23;
     (0, _classCallCheck2["default"])(this, Rating);
-    _this25 = _super19.call(this, props);
-    _this25.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this25;
+    _this23 = _super18.call(this, props);
+    _this23.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this23;
   }
   (0, _createClass2["default"])(Rating, [{
     key: "render",
     value: function render() {
-      var _this26 = this;
+      var _this24 = this;
       var props = {};
       props.name = this.props.name;
       props.ratingAmount = 5;
@@ -1470,9 +1761,9 @@ var Rating = exports.Rating = /*#__PURE__*/function (_React$Component19) {
       if (this.props.item.disabled) {
         props.disabled = true;
       }
-      props.onRatingClick = function (event, _ref4) {
-        var rating = _ref4.rating;
-        _this26.props.onChange(rating);
+      props.onRatingClick = function (event, _ref8) {
+        var rating = _ref8.rating;
+        _this24.props.onChange(rating);
       };
       if (this.props.item.mutable) {
         props.editing = true;
@@ -1486,7 +1777,7 @@ var Rating = exports.Rating = /*#__PURE__*/function (_React$Component19) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
           className: "form-group mb-3"
         }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
           htmlFor: props.name
@@ -1495,11 +1786,11 @@ var Rating = exports.Rating = /*#__PURE__*/function (_React$Component19) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
-      })), /*#__PURE__*/_react["default"].createElement(_starRating["default"], props), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      })), /*#__PURE__*/_react["default"].createElement(_starRating["default"], props), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: props.name
@@ -1508,12 +1799,12 @@ var Rating = exports.Rating = /*#__PURE__*/function (_React$Component19) {
   }]);
   return Rating;
 }(_react["default"].Component);
-var HyperLink = exports.HyperLink = /*#__PURE__*/function (_React$Component20) {
-  (0, _inherits2["default"])(HyperLink, _React$Component20);
-  var _super20 = _createSuper(HyperLink);
+var HyperLink = exports.HyperLink = /*#__PURE__*/function (_React$Component19) {
+  (0, _inherits2["default"])(HyperLink, _React$Component19);
+  var _super19 = _createSuper(HyperLink);
   function HyperLink() {
     (0, _classCallCheck2["default"])(this, HyperLink);
-    return _super20.apply(this, arguments);
+    return _super19.apply(this, arguments);
   }
   (0, _createClass2["default"])(HyperLink, [{
     key: "render",
@@ -1525,9 +1816,9 @@ var HyperLink = exports.HyperLink = /*#__PURE__*/function (_React$Component20) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, /*#__PURE__*/_react["default"].createElement("a", {
+      }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Label, null, /*#__PURE__*/_react["default"].createElement("a", {
         target: "_blank",
         href: this.props.item.href,
         dangerouslySetInnerHTML: {
@@ -1538,12 +1829,12 @@ var HyperLink = exports.HyperLink = /*#__PURE__*/function (_React$Component20) {
   }]);
   return HyperLink;
 }(_react["default"].Component);
-var Download = exports.Download = /*#__PURE__*/function (_React$Component21) {
-  (0, _inherits2["default"])(Download, _React$Component21);
-  var _super21 = _createSuper(Download);
+var Download = exports.Download = /*#__PURE__*/function (_React$Component20) {
+  (0, _inherits2["default"])(Download, _React$Component20);
+  var _super20 = _createSuper(Download);
   function Download() {
     (0, _classCallCheck2["default"])(this, Download);
-    return _super21.apply(this, arguments);
+    return _super20.apply(this, arguments);
   }
   (0, _createClass2["default"])(Download, [{
     key: "render",
@@ -1555,7 +1846,7 @@ var Download = exports.Download = /*#__PURE__*/function (_React$Component21) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement("a", {
         href: "".concat(this.props.downloadPath, "?id=").concat(this.props.item.filePath)
@@ -1564,42 +1855,42 @@ var Download = exports.Download = /*#__PURE__*/function (_React$Component21) {
   }]);
   return Download;
 }(_react["default"].Component);
-var Camera = exports.Camera = /*#__PURE__*/function (_React$Component22) {
-  (0, _inherits2["default"])(Camera, _React$Component22);
-  var _super22 = _createSuper(Camera);
+var Camera = exports.Camera = /*#__PURE__*/function (_React$Component21) {
+  (0, _inherits2["default"])(Camera, _React$Component21);
+  var _super21 = _createSuper(Camera);
   function Camera(props) {
-    var _this27;
+    var _this25;
     (0, _classCallCheck2["default"])(this, Camera);
-    _this27 = _super22.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this27), "handleChange", function (event) {
+    _this25 = _super21.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this25), "handleChange", function (event) {
       if (event.target.files && event.target.files.length > 0) {
-        _this27.setState({
+        _this25.setState({
           img: event.target.files[0]
         });
-        if (_this27.props.onChange) {
-          _this27.props.onChange(event.target.files[0]);
+        if (_this25.props.onChange) {
+          _this25.props.onChange(event.target.files[0]);
         }
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this27), "clearImage", function () {
-      _this27.setState({
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this25), "clearImage", function () {
+      _this25.setState({
         img: null
       });
-      if (_this27.props.onChange) {
-        _this27.props.onChange(null);
+      if (_this25.props.onChange) {
+        _this25.props.onChange(null);
       }
     });
-    _this27.inputField = /*#__PURE__*/_react["default"].createRef();
-    _this27.state = {
+    _this25.inputField = /*#__PURE__*/_react["default"].createRef();
+    _this25.state = {
       img: props.value
     };
-    return _this27;
+    return _this25;
   }
   (0, _createClass2["default"])(Camera, [{
     key: "getImageSizeProps",
-    value: function getImageSizeProps(_ref5) {
-      var width = _ref5.width,
-        height = _ref5.height;
+    value: function getImageSizeProps(_ref9) {
+      var width = _ref9.width,
+        height = _ref9.height;
       var imgProps = {
         width: '100%'
       };
@@ -1629,7 +1920,9 @@ var Camera = exports.Camera = /*#__PURE__*/function (_React$Component22) {
         event.target.value = null;
       };
       props.isInvalid = this.props.isInvalid;
-      props.onBlur = this.props.onBlur;
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
       if (this.props.item.disabled) {
         props.disabled = 'disabled';
       }
@@ -1652,37 +1945,37 @@ var Camera = exports.Camera = /*#__PURE__*/function (_React$Component22) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.item.readOnly === true && this.props.value && this.props.value.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image, (0, _extends2["default"])({
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.item.readOnly === true && this.props.value && this.props.value.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_esm.Image, (0, _extends2["default"])({
         style: imageStyle,
         src: sourceDataURL
       }, this.getImageSizeProps(this.props.item)))) : /*#__PURE__*/_react["default"].createElement("div", {
         className: "image-upload-container"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: fileInputStyle
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
         type: "file",
         accept: "image/*",
         capture: "camera",
         className: "image-upload"
       }, props)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "image-upload-control"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+      }, /*#__PURE__*/_react["default"].createElement(_esm.Button, {
         variant: "light"
       }, /*#__PURE__*/_react["default"].createElement(_fa.FaCamera, null), " Upload Photo"), /*#__PURE__*/_react["default"].createElement("span", null, "Select an image from your computer or device."))), this.props.value && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "clearfix"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image
+      }, /*#__PURE__*/_react["default"].createElement(_esm.Image
       // onLoad={() => URL.revokeObjectURL(this.state.previewImg)}
       , {
         src: URL.createObjectURL(this.props.value),
         height: "100",
         className: "image-upload-preview"
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+      })), /*#__PURE__*/_react["default"].createElement(_esm.Button, {
         variant: "default",
         size: "sm",
         onClick: this.clearImage
-      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " Clear Photo"))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " Clear Photo"))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: this.props.name
@@ -1691,39 +1984,39 @@ var Camera = exports.Camera = /*#__PURE__*/function (_React$Component22) {
   }]);
   return Camera;
 }(_react["default"].Component);
-var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component23) {
-  (0, _inherits2["default"])(FileUpload, _React$Component23);
-  var _super23 = _createSuper(FileUpload);
+var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component22) {
+  (0, _inherits2["default"])(FileUpload, _React$Component22);
+  var _super22 = _createSuper(FileUpload);
   function FileUpload(props) {
-    var _this28;
+    var _this26;
     (0, _classCallCheck2["default"])(this, FileUpload);
-    _this28 = _super23.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this28), "handleChange", function (event) {
+    _this26 = _super22.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this26), "handleChange", function (event) {
       if (event.target.files && event.target.files.length > 0) {
-        _this28.setState({
+        _this26.setState({
           fileUpload: event.target.files[0]
         });
-        if (_this28.props.onChange) {
-          _this28.props.onChange(event.target.files[0]);
+        if (_this26.props.onChange) {
+          _this26.props.onChange(event.target.files[0]);
         }
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this28), "clearFileUpload", function () {
-      _this28.setState({
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this26), "clearFileUpload", function () {
+      _this26.setState({
         fileUpload: null
       });
-      if (_this28.props.onChange) {
-        _this28.props.onChange(null);
+      if (_this26.props.onChange) {
+        _this26.props.onChange(null);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this28), "saveFile", /*#__PURE__*/function () {
-      var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(e) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this26), "saveFile", /*#__PURE__*/function () {
+      var _ref10 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(e) {
         var sourceUrl, response, dispositionHeader, resBlob, blob, fileName, _fileName;
         return _regenerator["default"].wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               e.preventDefault();
-              sourceUrl = _this28.props.value;
+              sourceUrl = _this26.props.value;
               _context2.next = 4;
               return (0, _isomorphicFetch["default"])(sourceUrl, {
                 method: 'GET',
@@ -1742,7 +2035,7 @@ var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component23)
               resBlob = _context2.sent;
               // eslint-disable-next-line no-undef
               blob = new Blob([resBlob], {
-                type: _this28.props.item.fileType || response.headers.get('Content-Type')
+                type: _this26.props.item.fileType || response.headers.get('Content-Type')
               });
               if (dispositionHeader && dispositionHeader.indexOf(';filename=') > -1) {
                 fileName = dispositionHeader.split(';filename=')[1];
@@ -1758,14 +2051,14 @@ var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component23)
         }, _callee2);
       }));
       return function (_x) {
-        return _ref6.apply(this, arguments);
+        return _ref10.apply(this, arguments);
       };
     }());
-    _this28.inputField = /*#__PURE__*/_react["default"].createRef();
-    _this28.state = {
+    _this26.inputField = /*#__PURE__*/_react["default"].createRef();
+    _this26.state = {
       fileUpload: props.value
     };
-    return _this28;
+    return _this26;
   }
   (0, _createClass2["default"])(FileUpload, [{
     key: "render",
@@ -1781,7 +2074,9 @@ var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component23)
         event.target.value = null;
       };
       props.isInvalid = this.props.isInvalid;
-      props.onBlur = this.props.onBlur;
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
       if (this.props.item.disabled) {
         props.disabled = 'disabled';
       }
@@ -1795,22 +2090,22 @@ var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component23)
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.item.readOnly === true && this.props.value && this.props.value.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.item.readOnly === true && this.props.value && this.props.value.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_esm.Button, {
         variant: "default",
         onClick: this.saveFile
       }, /*#__PURE__*/_react["default"].createElement(_fa.FaDownload, null), " Download File")) : /*#__PURE__*/_react["default"].createElement("div", {
         className: "image-upload-container"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: fileInputStyle
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
         type: "file",
         accept: this.props.item.fileType || '*',
         className: "image-upload"
       }, props)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "image-upload-control"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+      }, /*#__PURE__*/_react["default"].createElement(_esm.Button, {
         variant: "light"
       }, /*#__PURE__*/_react["default"].createElement(_fa.FaFile, null), " Upload File"), /*#__PURE__*/_react["default"].createElement("span", null, "Select a file from your computer or device."))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "clearfix"
@@ -1826,12 +2121,12 @@ var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component23)
           display: 'inline-block',
           marginLeft: '5px'
         }
-      }, this.state.fileUpload.size.length > 6 ? "Size:  ".concat(Math.ceil(this.state.fileUpload.size / (1024 * 1024)), " mb") : "Size:  ".concat(Math.ceil(this.state.fileUpload.size / 1024), " kb")))), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+      }, this.state.fileUpload.size.length > 6 ? "Size:  ".concat(Math.ceil(this.state.fileUpload.size / (1024 * 1024)), " mb") : "Size:  ".concat(Math.ceil(this.state.fileUpload.size / 1024), " kb")))), /*#__PURE__*/_react["default"].createElement(_esm.Button, {
         variant: "default",
         size: "sm",
         className: "btn-file-upload-clear",
         onClick: this.clearFileUpload
-      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " Clear File"))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " Clear File"))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: this.props.name
@@ -1840,26 +2135,26 @@ var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component23)
   }]);
   return FileUpload;
 }(_react["default"].Component);
-var Range = exports.Range = /*#__PURE__*/function (_React$Component24) {
-  (0, _inherits2["default"])(Range, _React$Component24);
-  var _super24 = _createSuper(Range);
+var Range = exports.Range = /*#__PURE__*/function (_React$Component23) {
+  (0, _inherits2["default"])(Range, _React$Component23);
+  var _super23 = _createSuper(Range);
   function Range(props) {
-    var _this29;
+    var _this27;
     (0, _classCallCheck2["default"])(this, Range);
-    _this29 = _super24.call(this, props);
-    _this29.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this29;
+    _this27 = _super23.call(this, props);
+    _this27.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this27;
   }
   (0, _createClass2["default"])(Range, [{
     key: "render",
     value: function render() {
-      var _this30 = this;
+      var _this28 = this;
       var props = {};
       var name = this.props.name;
       props.name = this.props.name;
       props.value = this.props.value;
       props.onChange = function (event) {
-        _this30.props.onChange(event.target.value);
+        _this28.props.onChange(event.target.value);
       };
       if (this.props.item.disabled) {
         props.disabled = true;
@@ -1912,7 +2207,7 @@ var Range = exports.Range = /*#__PURE__*/function (_React$Component24) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
           className: "form-group mb-3"
         }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
           htmlFor: name
@@ -1921,7 +2216,7 @@ var Range = exports.Range = /*#__PURE__*/function (_React$Component24) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: name
@@ -1937,7 +2232,7 @@ var Range = exports.Range = /*#__PURE__*/function (_React$Component24) {
         className: "visible_marks"
       }, visibleMarks), /*#__PURE__*/_react["default"].createElement("datalist", {
         id: props.list
-      }, _datalist), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }, _datalist), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: name