react-survey-builder 1.0.45 → 1.0.46

package/lib/survey-elements/index.js

@@ -5,12 +5,12 @@ 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.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;
+exports["default"] = exports.TextInput2 = exports.TextInput = exports.TextArea2 = exports.TextArea = exports.Tags = exports.Signature = exports.Rating = exports.Range = exports.RadioButtons = exports.PhoneNumber2 = exports.PhoneNumber = exports.Paragraph = exports.NumberInput2 = exports.NumberInput = exports.LineBreak = exports.Label = exports.Image = exports.HyperLink = exports.Header = exports.FileUpload = exports.EmailInput2 = 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -39,7 +39,11 @@ 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"];
+  _excluded2 = ["name", "onChange", "value", "style", "item"],
+  _excluded3 = ["name", "onChange", "value", "style", "item"],
+  _excluded4 = ["name", "onChange", "value", "style", "item"],
+  _excluded5 = ["name", "onChange", "value", "style", "item"],
+  _excluded6 = ["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; }
@@ -321,252 +325,7 @@ var LineBreak = exports.LineBreak = /*#__PURE__*/function (_React$Component5) {
   }]);
   return LineBreak;
 }(_react["default"].Component);
-var TextInput = exports.TextInput = /*#__PURE__*/function (_React$Component6) {
-  (0, _inherits2["default"])(TextInput, _React$Component6);
-  var _super6 = _createSuper(TextInput);
-  function TextInput(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, TextInput);
-    _this = _super6.call(this, props);
-    _this.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this;
-  }
-  (0, _createClass2["default"])(TextInput, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var props = {};
-      props.name = this.props.name;
-      props.placeholder = this.props.item.placeholder;
-      props.onChange = function (event) {
-        _this2.props.onChange(event.target.value);
-      };
-      props.value = this.props.value;
-      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';
-      }
-      if (this.props.item.mutable) {
-        props.ref = this.inputField;
-      }
-      var labelLocation = 'ABOVE';
-      if (this.props.item.labelLocation) {
-        labelLocation = this.props.item.labelLocation;
-      }
-      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(_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, props.value)));
-      }
-      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(_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"])({
-        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(_esm.Form.Control, (0, _extends2["default"])({
-        id: props.name + '-' + (0, _functions.generateUUID)(),
-        type: "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
-      })));
-    }
-  }]);
-  return TextInput;
-}(_react["default"].Component);
-var EmailInput = exports.EmailInput = /*#__PURE__*/function (_React$Component7) {
-  (0, _inherits2["default"])(EmailInput, _React$Component7);
-  var _super7 = _createSuper(EmailInput);
-  function EmailInput(props) {
-    var _this3;
-    (0, _classCallCheck2["default"])(this, EmailInput);
-    _this3 = _super7.call(this, props);
-    _this3.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this3;
-  }
-  (0, _createClass2["default"])(EmailInput, [{
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-      var props = {};
-      props.name = this.props.name;
-      props.placeholder = this.props.item.placeholder;
-      props.onChange = function (event) {
-        _this4.props.onChange(event.target.value);
-      };
-      props.value = this.props.value;
-      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';
-      }
-      if (this.props.item.mutable) {
-        props.ref = this.inputField;
-      }
-      var labelLocation = 'ABOVE';
-      if (this.props.item.labelLocation) {
-        labelLocation = this.props.item.labelLocation;
-      }
-      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(_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)));
-      }
-      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(_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"])({
-        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(_esm.Form.Control, (0, _extends2["default"])({
-        id: props.name + '-' + (0, _functions.generateUUID)(),
-        type: "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
-      })));
-    }
-  }]);
-  return EmailInput;
-}(_react["default"].Component);
-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, PhoneNumber2);
-    _this5 = _super8.call(this, props);
-    _this5.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this5;
-  }
-  (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;
-      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) {
-        if (_this6.props.onChange) {
-          _this6.props.onChange(val);
-        }
-      };
-      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 = true;
-      }
-      if (this.props.item.mutable) {
-        props.ref = this.inputField;
-      }
-      var labelLocation = 'ABOVE';
-      if (this.props.item.labelLocation) {
-        labelLocation = this.props.item.labelLocation;
-      }
-      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(_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((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(_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"])({
-        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(_esm.Form.Control, (0, _extends2["default"])({
-        id: props.name + '-' + (0, _functions.generateUUID)()
-      }, props, {
-        as: CustomPhoneInput
-      }))), 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 PhoneNumber2;
-}(_react["default"].Component);
-var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref3) {
+var TextInput = exports.TextInput = function TextInput(_ref3) {
   var _item$required, _item$disabled, _item$required2;
   var name = _ref3.name,
     onChange = _ref3.onChange,
@@ -600,11 +359,7 @@ var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref3) {
   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';
-    }
-  };
+  var fieldRules = {};
   if ((_item$required2 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required2 !== void 0 ? _item$required2 : false) {
     fieldRules.required = 'Required Field';
   }
@@ -635,8 +390,7 @@ var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref3) {
       name: name,
       ref: ref,
       isInvalid: invalid,
-      id: name + '-' + (0, _functions.generateUUID)(),
-      as: CustomDateInput
+      id: name + '-' + (0, _functions.generateUUID)()
     }, inputProps));
   };
   if (value !== undefined) {
@@ -670,8 +424,7 @@ var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref3) {
       value: value,
       name: name,
       ref: inputField,
-      id: name + '-2-' + (0, _functions.generateUUID)(),
-      as: CustomDateInput
+      id: name + '-2-' + (0, _functions.generateUUID)()
     }, inputProps)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
       item: item,
       className: item === null || item === void 0 ? void 0 : item.labelClassName,
@@ -684,8 +437,7 @@ var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref3) {
       value: value,
       name: name,
       ref: inputField,
-      id: name + '-2-' + (0, _functions.generateUUID)(),
-      as: CustomPhoneInput
+      id: name + '-2-' + (0, _functions.generateUUID)()
     }, 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"], {
@@ -704,8 +456,6 @@ var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref3) {
       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
@@ -731,28 +481,100 @@ var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref3) {
     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 TextInput2 = exports.TextInput2 = /*#__PURE__*/function (_React$Component6) {
+  (0, _inherits2["default"])(TextInput2, _React$Component6);
+  var _super6 = _createSuper(TextInput2);
+  function TextInput2(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, TextInput2);
+    _this = _super6.call(this, props);
+    _this.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+  (0, _createClass2["default"])(TextInput2, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var props = {};
+      props.name = this.props.name;
+      props.placeholder = this.props.item.placeholder;
+      props.onChange = function (event) {
+        _this2.props.onChange(event.target.value);
+      };
+      props.value = this.props.value;
+      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';
+      }
+      if (this.props.item.mutable) {
+        props.ref = this.inputField;
+      }
+      var labelLocation = 'ABOVE';
+      if (this.props.item.labelLocation) {
+        labelLocation = this.props.item.labelLocation;
+      }
+      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(_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, props.value)));
+      }
+      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(_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"])({
+        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(_esm.Form.Control, (0, _extends2["default"])({
+        id: props.name + '-' + (0, _functions.generateUUID)(),
+        type: "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
+      })));
+    }
+  }]);
+  return TextInput2;
+}(_react["default"].Component);
+var EmailInput = exports.EmailInput = function EmailInput(_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'
+    autoComplete: 'new-password' // hack to prevent auto-complete for form fields
   };
   if (item !== null && item !== void 0 && item.label) {
     inputProps.label = item === null || item === void 0 ? void 0 : item.label;
@@ -766,8 +588,12 @@ var DatePicker = exports.DatePicker = function DatePicker(_ref5) {
     inputProps.ref = inputField;
   }
   var fieldRules = {
+    minLength: {
+      value: 4,
+      message: "".concat(item === null || item === void 0 ? void 0 : item.label, " must be at least 4 characters long")
+    },
     validate: function validate(value) {
-      return (0, _validators.validateDate)(value) || 'Please enter a valid Date in the format MM/DD/YYYY';
+      return (0, _validators.validateEmail)(value) || "".concat(item === null || item === void 0 ? void 0 : item.label, " field requires valid email address");
     }
   };
   if ((_item$required5 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required5 !== void 0 ? _item$required5 : false) {
@@ -800,8 +626,7 @@ var DatePicker = exports.DatePicker = function DatePicker(_ref5) {
       name: name,
       ref: ref,
       isInvalid: invalid,
-      id: name + '-' + (0, _functions.generateUUID)(),
-      as: CustomDateInput
+      id: name + '-' + (0, _functions.generateUUID)()
     }, inputProps));
   };
   if (value !== undefined) {
@@ -835,8 +660,7 @@ var DatePicker = exports.DatePicker = function DatePicker(_ref5) {
       value: value,
       name: name,
       ref: inputField,
-      id: name + '-2-' + (0, _functions.generateUUID)(),
-      as: CustomDateInput
+      id: name + '-2-' + (0, _functions.generateUUID)()
     }, inputProps)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
       item: item,
       className: item === null || item === void 0 ? void 0 : item.labelClassName,
@@ -849,8 +673,7 @@ var DatePicker = exports.DatePicker = function DatePicker(_ref5) {
       value: value,
       name: name,
       ref: inputField,
-      id: name + '-2-' + (0, _functions.generateUUID)(),
-      as: CustomDateInput
+      id: name + '-2-' + (0, _functions.generateUUID)()
     }, 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"], {
@@ -869,8 +692,6 @@ var DatePicker = exports.DatePicker = function DatePicker(_ref5) {
       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
@@ -896,25 +717,25 @@ var DatePicker = exports.DatePicker = function DatePicker(_ref5) {
     name: name
   })));
 };
-var NumberInput = exports.NumberInput = /*#__PURE__*/function (_React$Component9) {
-  (0, _inherits2["default"])(NumberInput, _React$Component9);
-  var _super9 = _createSuper(NumberInput);
-  function NumberInput(props) {
-    var _this7;
-    (0, _classCallCheck2["default"])(this, NumberInput);
-    _this7 = _super9.call(this, props);
-    _this7.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this7;
+var EmailInput2 = exports.EmailInput2 = /*#__PURE__*/function (_React$Component7) {
+  (0, _inherits2["default"])(EmailInput2, _React$Component7);
+  var _super7 = _createSuper(EmailInput2);
+  function EmailInput2(props) {
+    var _this3;
+    (0, _classCallCheck2["default"])(this, EmailInput2);
+    _this3 = _super7.call(this, props);
+    _this3.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this3;
   }
-  (0, _createClass2["default"])(NumberInput, [{
+  (0, _createClass2["default"])(EmailInput2, [{
     key: "render",
     value: function render() {
-      var _this8 = this;
+      var _this4 = this;
       var props = {};
       props.name = this.props.name;
       props.placeholder = this.props.item.placeholder;
       props.onChange = function (event) {
-        _this8.props.onChange(event.target.value);
+        _this4.props.onChange(event.target.value);
       };
       props.value = this.props.value;
       props.isInvalid = this.props.isInvalid;
@@ -928,9 +749,6 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/function (_React$Component9
       if (this.props.item.mutable) {
         props.ref = this.inputField;
       }
-      props.min = this.props.item.minValue;
-      props.max = this.props.item.maxValue;
-      props.step = this.props.item.step;
       var labelLocation = 'ABOVE';
       if (this.props.item.labelLocation) {
         labelLocation = this.props.item.labelLocation;
@@ -956,14 +774,14 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/function (_React$Component9
         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"])({
         id: props.name + '-' + (0, _functions.generateUUID)(),
-        type: "number"
+        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(_esm.Form.Control, (0, _extends2["default"])({
         id: props.name + '-' + (0, _functions.generateUUID)(),
-        type: "number"
+        type: "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"], {
@@ -971,19 +789,834 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/function (_React$Component9
       })));
     }
   }]);
-  return NumberInput;
+  return EmailInput2;
+}(_react["default"].Component);
+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, PhoneNumber2);
+    _this5 = _super8.call(this, props);
+    _this5.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this5;
+  }
+  (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;
+      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) {
+        if (_this6.props.onChange) {
+          _this6.props.onChange(val);
+        }
+      };
+      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 = true;
+      }
+      if (this.props.item.mutable) {
+        props.ref = this.inputField;
+      }
+      var labelLocation = 'ABOVE';
+      if (this.props.item.labelLocation) {
+        labelLocation = this.props.item.labelLocation;
+      }
+      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(_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((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(_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"])({
+        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(_esm.Form.Control, (0, _extends2["default"])({
+        id: props.name + '-' + (0, _functions.generateUUID)()
+      }, props, {
+        as: CustomPhoneInput
+      }))), 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 PhoneNumber2;
 }(_react["default"].Component);
-var TextArea = exports.TextArea = /*#__PURE__*/function (_React$Component10) {
-  (0, _inherits2["default"])(TextArea, _React$Component10);
-  var _super10 = _createSuper(TextArea);
-  function TextArea(props) {
+var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref7) {
+  var _item$required7, _item$disabled5, _item$required8;
+  var name = _ref7.name,
+    onChange = _ref7.onChange,
+    value = _ref7.value,
+    style = _ref7.style,
+    item = _ref7.item,
+    props = (0, _objectWithoutProperties2["default"])(_ref7, _excluded3);
+  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$required7 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required7 !== void 0 ? _item$required7 : false,
+    disabled: (_item$disabled5 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled5 !== void 0 ? _item$disabled5 : 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.validatePhone)(value) || "".concat(item === null || item === void 0 ? void 0 : item.label, " field requires a valid phone number");
+    }
+  };
+  if ((_item$required8 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required8 !== void 0 ? _item$required8 : false) {
+    fieldRules.required = 'Required Field';
+  }
+  var controllerProps = {
+    name: name,
+    rules: fieldRules
+  };
+  controllerProps.render = function (_ref8) {
+    var _ref8$field = _ref8.field,
+      _onChange3 = _ref8$field.onChange,
+      onBlur = _ref8$field.onBlur,
+      value = _ref8$field.value,
+      name = _ref8$field.name,
+      ref = _ref8$field.ref,
+      _ref8$fieldState = _ref8.fieldState,
+      invalid = _ref8$fieldState.invalid,
+      isTouched = _ref8$fieldState.isTouched,
+      isDirty = _ref8$fieldState.isDirty,
+      error = _ref8$fieldState.error,
+      formState = _ref8.formState;
+    return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
+      onBlur: onBlur,
+      onChange: function onChange(e) {
+        _onChange3(e);
+        onChangeHandler(e);
+      },
+      value: value,
+      name: name,
+      ref: ref,
+      isInvalid: invalid,
+      id: name + '-' + (0, _functions.generateUUID)(),
+      as: CustomPhoneInput
+    }, inputProps));
+  };
+  if (value !== undefined) {
+    controllerProps.defaultValue = value;
+  }
+  if ((item === null || item === void 0 ? void 0 : item.disabled) !== undefined) {
+    var _item$disabled6;
+    controllerProps.disabled = (_item$disabled6 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled6 !== void 0 ? _item$disabled6 : false;
+  }
+  if ((item === null || item === void 0 ? void 0 : item.required) !== undefined) {
+    var _item$required9;
+    controllerProps.required = (_item$required9 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required9 !== void 0 ? _item$required9 : 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: CustomPhoneInput
+    }, 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 : '')));
+  }
+  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(_ref9) {
+  var _item$required10, _item$disabled7, _item$required11;
+  var name = _ref9.name,
+    onChange = _ref9.onChange,
+    value = _ref9.value,
+    style = _ref9.style,
+    item = _ref9.item,
+    props = (0, _objectWithoutProperties2["default"])(_ref9, _excluded4);
+  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$required10 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required10 !== void 0 ? _item$required10 : false,
+    disabled: (_item$disabled7 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled7 !== void 0 ? _item$disabled7 : 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$required11 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required11 !== void 0 ? _item$required11 : false) {
+    fieldRules.required = 'Required Field';
+  }
+  var controllerProps = {
+    name: name,
+    rules: fieldRules
+  };
+  controllerProps.render = function (_ref10) {
+    var _ref10$field = _ref10.field,
+      _onChange4 = _ref10$field.onChange,
+      onBlur = _ref10$field.onBlur,
+      value = _ref10$field.value,
+      name = _ref10$field.name,
+      ref = _ref10$field.ref,
+      _ref10$fieldState = _ref10.fieldState,
+      invalid = _ref10$fieldState.invalid,
+      isTouched = _ref10$fieldState.isTouched,
+      isDirty = _ref10$fieldState.isDirty,
+      error = _ref10$fieldState.error,
+      formState = _ref10.formState;
+    return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
+      onBlur: onBlur,
+      onChange: function onChange(e) {
+        _onChange4(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$disabled8;
+    controllerProps.disabled = (_item$disabled8 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled8 !== void 0 ? _item$disabled8 : false;
+  }
+  if ((item === null || item === void 0 ? void 0 : item.required) !== undefined) {
+    var _item$required12;
+    controllerProps.required = (_item$required12 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required12 !== void 0 ? _item$required12 : 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 : '')));
+  }
+  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 = function NumberInput(_ref11) {
+  var _item$required13, _item$disabled9, _item$required14;
+  var name = _ref11.name,
+    onChange = _ref11.onChange,
+    value = _ref11.value,
+    style = _ref11.style,
+    item = _ref11.item,
+    props = (0, _objectWithoutProperties2["default"])(_ref11, _excluded5);
+  var methods = (0, _reactHookForm.useFormContext)();
+  var inputField = _react["default"].useRef(null);
+  var onChangeHandler = function onChangeHandler(value) {
+    if (onChange !== undefined) {
+      onChange(value);
+    }
+  };
+  var inputProps = {
+    type: 'number',
+    required: (_item$required13 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required13 !== void 0 ? _item$required13 : false,
+    disabled: (_item$disabled9 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled9 !== void 0 ? _item$disabled9 : 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 = {};
+  if ((_item$required14 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required14 !== void 0 ? _item$required14 : false) {
+    fieldRules.required = 'Required Field';
+  }
+  var controllerProps = {
+    name: name,
+    rules: fieldRules
+  };
+  controllerProps.render = function (_ref12) {
+    var _ref12$field = _ref12.field,
+      _onChange5 = _ref12$field.onChange,
+      onBlur = _ref12$field.onBlur,
+      value = _ref12$field.value,
+      name = _ref12$field.name,
+      ref = _ref12$field.ref,
+      _ref12$fieldState = _ref12.fieldState,
+      invalid = _ref12$fieldState.invalid,
+      isTouched = _ref12$fieldState.isTouched,
+      isDirty = _ref12$fieldState.isDirty,
+      error = _ref12$fieldState.error,
+      formState = _ref12.formState;
+    return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
+      onBlur: onBlur,
+      onChange: function onChange(e) {
+        _onChange5(e);
+        onChangeHandler(e);
+      },
+      value: value,
+      name: name,
+      ref: ref,
+      isInvalid: invalid,
+      id: name + '-' + (0, _functions.generateUUID)()
+    }, inputProps));
+  };
+  if (value !== undefined) {
+    controllerProps.defaultValue = value;
+  }
+  if ((item === null || item === void 0 ? void 0 : item.disabled) !== undefined) {
+    var _item$disabled10;
+    controllerProps.disabled = (_item$disabled10 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled10 !== void 0 ? _item$disabled10 : false;
+  }
+  if ((item === null || item === void 0 ? void 0 : item.required) !== undefined) {
+    var _item$required15;
+    controllerProps.required = (_item$required15 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required15 !== void 0 ? _item$required15 : 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)()
+    }, 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)()
+    }, 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 : '')));
+  }
+  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 NumberInput2 = exports.NumberInput2 = /*#__PURE__*/function (_React$Component9) {
+  (0, _inherits2["default"])(NumberInput2, _React$Component9);
+  var _super9 = _createSuper(NumberInput2);
+  function NumberInput2(props) {
+    var _this7;
+    (0, _classCallCheck2["default"])(this, NumberInput2);
+    _this7 = _super9.call(this, props);
+    _this7.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this7;
+  }
+  (0, _createClass2["default"])(NumberInput2, [{
+    key: "render",
+    value: function render() {
+      var _this8 = this;
+      var props = {};
+      props.name = this.props.name;
+      props.placeholder = this.props.item.placeholder;
+      props.onChange = function (event) {
+        _this8.props.onChange(event.target.value);
+      };
+      props.value = this.props.value;
+      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';
+      }
+      if (this.props.item.mutable) {
+        props.ref = this.inputField;
+      }
+      props.min = this.props.item.minValue;
+      props.max = this.props.item.maxValue;
+      props.step = this.props.item.step;
+      var labelLocation = 'ABOVE';
+      if (this.props.item.labelLocation) {
+        labelLocation = this.props.item.labelLocation;
+      }
+      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(_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)));
+      }
+      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(_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"])({
+        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(_esm.Form.Control, (0, _extends2["default"])({
+        id: props.name + '-' + (0, _functions.generateUUID)(),
+        type: "number"
+      }, 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
+      })));
+    }
+  }]);
+  return NumberInput2;
+}(_react["default"].Component);
+var TextArea = exports.TextArea = function TextArea(_ref13) {
+  var _item$required16, _item$disabled11, _item$required17;
+  var name = _ref13.name,
+    onChange = _ref13.onChange,
+    value = _ref13.value,
+    style = _ref13.style,
+    item = _ref13.item,
+    props = (0, _objectWithoutProperties2["default"])(_ref13, _excluded6);
+  var methods = (0, _reactHookForm.useFormContext)();
+  var inputField = _react["default"].useRef(null);
+  var onChangeHandler = function onChangeHandler(value) {
+    if (onChange !== undefined) {
+      onChange(value);
+    }
+  };
+  var inputProps = {
+    type: 'number',
+    required: (_item$required16 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required16 !== void 0 ? _item$required16 : false,
+    disabled: (_item$disabled11 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled11 !== void 0 ? _item$disabled11 : 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 = {};
+  if ((_item$required17 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required17 !== void 0 ? _item$required17 : false) {
+    fieldRules.required = 'Required Field';
+  }
+  var controllerProps = {
+    name: name,
+    rules: fieldRules
+  };
+  controllerProps.render = function (_ref14) {
+    var _ref14$field = _ref14.field,
+      _onChange6 = _ref14$field.onChange,
+      onBlur = _ref14$field.onBlur,
+      value = _ref14$field.value,
+      name = _ref14$field.name,
+      ref = _ref14$field.ref,
+      _ref14$fieldState = _ref14.fieldState,
+      invalid = _ref14$fieldState.invalid,
+      isTouched = _ref14$fieldState.isTouched,
+      isDirty = _ref14$fieldState.isDirty,
+      error = _ref14$fieldState.error,
+      formState = _ref14.formState;
+    return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
+      onBlur: onBlur,
+      onChange: function onChange(e) {
+        _onChange6(e);
+        onChangeHandler(e);
+      },
+      value: value,
+      name: name,
+      ref: ref,
+      isInvalid: invalid,
+      id: name + '-' + (0, _functions.generateUUID)(),
+      as: "textarea"
+    }, inputProps));
+  };
+  if (value !== undefined) {
+    controllerProps.defaultValue = value;
+  }
+  if ((item === null || item === void 0 ? void 0 : item.disabled) !== undefined) {
+    var _item$disabled12;
+    controllerProps.disabled = (_item$disabled12 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled12 !== void 0 ? _item$disabled12 : false;
+  }
+  if ((item === null || item === void 0 ? void 0 : item.required) !== undefined) {
+    var _item$required18;
+    controllerProps.required = (_item$required18 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required18 !== void 0 ? _item$required18 : 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: "textarea"
+    }, 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: "textarea"
+    }, 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 : '')));
+  }
+  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 TextArea2 = exports.TextArea2 = /*#__PURE__*/function (_React$Component10) {
+  (0, _inherits2["default"])(TextArea2, _React$Component10);
+  var _super10 = _createSuper(TextArea2);
+  function TextArea2(props) {
     var _this9;
-    (0, _classCallCheck2["default"])(this, TextArea);
+    (0, _classCallCheck2["default"])(this, TextArea2);
     _this9 = _super10.call(this, props);
     _this9.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this9;
   }
-  (0, _createClass2["default"])(TextArea, [{
+  (0, _createClass2["default"])(TextArea2, [{
     key: "render",
     value: function render() {
       var _this10 = this;
@@ -1045,7 +1678,7 @@ var TextArea = exports.TextArea = /*#__PURE__*/function (_React$Component10) {
       })));
     }
   }]);
-  return TextArea;
+  return TextArea2;
 }(_react["default"].Component);
 var Dropdown = exports.Dropdown = /*#__PURE__*/function (_React$Component11) {
   (0, _inherits2["default"])(Dropdown, _React$Component11);
@@ -1761,8 +2394,8 @@ var Rating = exports.Rating = /*#__PURE__*/function (_React$Component18) {
       if (this.props.item.disabled) {
         props.disabled = true;
       }
-      props.onRatingClick = function (event, _ref8) {
-        var rating = _ref8.rating;
+      props.onRatingClick = function (event, _ref16) {
+        var rating = _ref16.rating;
         _this24.props.onChange(rating);
       };
       if (this.props.item.mutable) {
@@ -1888,9 +2521,9 @@ var Camera = exports.Camera = /*#__PURE__*/function (_React$Component21) {
   }
   (0, _createClass2["default"])(Camera, [{
     key: "getImageSizeProps",
-    value: function getImageSizeProps(_ref9) {
-      var width = _ref9.width,
-        height = _ref9.height;
+    value: function getImageSizeProps(_ref17) {
+      var width = _ref17.width,
+        height = _ref17.height;
       var imgProps = {
         width: '100%'
       };
@@ -2010,7 +2643,7 @@ var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component22)
       }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this26), "saveFile", /*#__PURE__*/function () {
-      var _ref10 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(e) {
+      var _ref18 = (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) {
@@ -2051,7 +2684,7 @@ var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component22)
         }, _callee2);
       }));
       return function (_x) {
-        return _ref10.apply(this, arguments);
+        return _ref18.apply(this, arguments);
       };
     }());
     _this26.inputField = /*#__PURE__*/_react["default"].createRef();