react-survey-builder 1.0.47 → 1.0.49

package/lib/survey-elements/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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.Dropdown2 = 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.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;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -38,6 +38,7 @@ var _esm = require("react-bootstrap/esm");
 var _validators = require("../utils/validators");
 var _reactHookForm = require("react-hook-form");
 var _masks = require("../utils/masks");
+var _reactImask = require("react-imask");
 var _excluded = ["name", "onChange", "value", "style", "item"],
   _excluded2 = ["name", "onChange", "value", "style", "item"],
   _excluded3 = ["name", "onChange", "value", "style", "item"],
@@ -358,80 +359,6 @@ var TextInput = exports.TextInput = function TextInput(_ref) {
     name: name
   })));
 };
-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(_ref3) {
   var _item$required4, _item$disabled3, _item$required5;
   var name = _ref3.name,
@@ -594,177 +521,6 @@ var EmailInput = exports.EmailInput = function EmailInput(_ref3) {
     name: name
   })));
 };
-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"])(EmailInput2, [{
-    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 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: _masks.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: _masks.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(_ref5) {
   var _item$required7, _item$disabled5, _item$required8;
   var name = _ref5.name,
@@ -807,13 +563,18 @@ var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref5) {
   if ((_item$required8 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required8 !== void 0 ? _item$required8 : false) {
     fieldRules.required = 'Required Field';
   }
+
+  // if (CustomPhoneInput !== undefined) {
+  // 	inputProps.as = CustomPhoneInput;
+  // }
+
   var controllerProps = {
     name: name,
     rules: fieldRules
   };
   controllerProps.render = function (_ref6) {
     var _ref6$field = _ref6.field,
-      _onChange3 = _ref6$field.onChange,
+      onChange = _ref6$field.onChange,
       onBlur = _ref6$field.onBlur,
       value = _ref6$field.value,
       name = _ref6$field.name,
@@ -824,18 +585,37 @@ var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref5) {
       isDirty = _ref6$fieldState.isDirty,
       error = _ref6$fieldState.error,
       formState = _ref6.formState;
-    return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
+    return /*#__PURE__*/_react["default"].createElement(_reactImask.IMaskInput, (0, _extends2["default"])({
+      className: "form-control",
+      id: name + '-' + (0, _functions.generateUUID)(),
       onBlur: onBlur,
-      onChange: function onChange(e) {
-        _onChange3(e);
-        onChangeHandler(e);
-      },
       value: value,
       name: name,
       ref: ref,
-      isInvalid: invalid,
-      id: name + '-' + (0, _functions.generateUUID)(),
-      as: _masks.CustomPhoneInput
+      mask: '{+1} (#00) 000-0000',
+      lazy: false,
+      overwrite: true,
+      definitions: {
+        '#': /[1-9]/
+      },
+      unmask: true // true|false|'typed'
+      ,
+      inputRef: ref
+      // inputRef={inputRef}  // access to nested input
+      // DO NOT USE onChange TO HANDLE CHANGES!
+      // USE onAccept INSTEAD
+      ,
+      onAccept:
+      // depending on prop above first argument is
+      // `value` if `unmask=false`,
+      // `unmaskedValue` if `unmask=true`,
+      // `typedValue` if `unmask='typed'`
+      function onAccept(value, mask) {
+        if (onChange !== undefined) {
+          onChange(value);
+        }
+        onChangeHandler(value);
+      }
     }, inputProps));
   };
   if (value !== undefined) {
@@ -869,8 +649,7 @@ var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref5) {
       value: value,
       name: name,
       ref: inputField,
-      id: name + '-2-' + (0, _functions.generateUUID)(),
-      as: _masks.CustomPhoneInput
+      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,
@@ -883,8 +662,7 @@ var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref5) {
       value: value,
       name: name,
       ref: inputField,
-      id: name + '-2-' + (0, _functions.generateUUID)(),
-      as: _masks.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"], {
@@ -970,13 +748,19 @@ var DatePicker = exports.DatePicker = function DatePicker(_ref7) {
   if ((_item$required11 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required11 !== void 0 ? _item$required11 : false) {
     fieldRules.required = 'Required Field';
   }
+
+  // if (CustomDateInput !== undefined) {
+  // 	inputProps.as = CustomDateInput;
+  // }
+
   var controllerProps = {
     name: name,
     rules: fieldRules
   };
   controllerProps.render = function (_ref8) {
+    var _inputProps$formatMas;
     var _ref8$field = _ref8.field,
-      _onChange4 = _ref8$field.onChange,
+      onChange = _ref8$field.onChange,
       onBlur = _ref8$field.onBlur,
       value = _ref8$field.value,
       name = _ref8$field.name,
@@ -987,18 +771,73 @@ var DatePicker = exports.DatePicker = function DatePicker(_ref7) {
       isDirty = _ref8$fieldState.isDirty,
       error = _ref8$fieldState.error,
       formState = _ref8.formState;
-    return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
+    return /*#__PURE__*/_react["default"].createElement(_reactImask.IMaskInput, (0, _extends2["default"])({
+      className: "form-control",
+      id: name + '-' + (0, _functions.generateUUID)(),
       onBlur: onBlur,
-      onChange: function onChange(e) {
-        _onChange4(e);
-        onChangeHandler(e);
-      },
       value: value,
       name: name,
       ref: ref,
-      isInvalid: invalid,
-      id: name + '-' + (0, _functions.generateUUID)(),
-      as: _masks.CustomDateInput
+      mask: Date,
+      lazy: false,
+      overwrite: true,
+      pattern: (_inputProps$formatMas = inputProps.formatMask) !== null && _inputProps$formatMas !== void 0 ? _inputProps$formatMas : 'MM/DD/YYYY',
+      format: function format(date) {
+        var day = date.getDate();
+        var month = date.getMonth() + 1;
+        var year = date.getFullYear();
+        if (day < 10) day = "0" + day;
+        if (month < 10) month = "0" + month;
+        return [month, day, year].join('/');
+      },
+      autofix: true
+      // min={new Date(1900, 0, 1)}
+      // max={new Date()}
+      ,
+      blocks: {
+        DD: {
+          mask: IMask.MaskedRange,
+          from: 1,
+          to: 31,
+          maxLength: 2,
+          placeholderChar: 'D'
+        },
+        MM: {
+          mask: IMask.MaskedRange,
+          from: 1,
+          to: 12,
+          maxLength: 2,
+          placeholderChar: 'M'
+        },
+        YYYY: {
+          mask: IMask.MaskedRange,
+          from: 1900,
+          to: new Date().getFullYear() + 5,
+          placeholderChar: 'Y'
+        }
+      },
+      parse: function parse(str) {
+        var monthDayYear = str.split('/');
+        return new Date(monthDayYear[2], monthDayYear[0] - 1, monthDayYear[1]);
+      },
+      unmask: false // true|false|'typed'
+      ,
+      inputRef: ref
+      // inputRef={inputRef}  // access to nested input
+      // DO NOT USE onChange TO HANDLE CHANGES!
+      // USE onAccept INSTEAD
+      ,
+      onAccept:
+      // depending on prop above first argument is
+      // `value` if `unmask=false`,
+      // `unmaskedValue` if `unmask=true`,
+      // `typedValue` if `unmask='typed'`
+      function onAccept(value, mask) {
+        if (onChange !== undefined) {
+          onChange(value);
+        }
+        onChangeHandler(value);
+      }
     }, inputProps));
   };
   if (value !== undefined) {
@@ -1032,8 +871,7 @@ var DatePicker = exports.DatePicker = function DatePicker(_ref7) {
       value: value,
       name: name,
       ref: inputField,
-      id: name + '-2-' + (0, _functions.generateUUID)(),
-      as: _masks.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,
@@ -1046,8 +884,7 @@ var DatePicker = exports.DatePicker = function DatePicker(_ref7) {
       value: value,
       name: name,
       ref: inputField,
-      id: name + '-2-' + (0, _functions.generateUUID)(),
-      as: _masks.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"], {
@@ -1133,7 +970,7 @@ var NumberInput = exports.NumberInput = function NumberInput(_ref9) {
   };
   controllerProps.render = function (_ref10) {
     var _ref10$field = _ref10.field,
-      _onChange5 = _ref10$field.onChange,
+      _onChange3 = _ref10$field.onChange,
       onBlur = _ref10$field.onBlur,
       value = _ref10$field.value,
       name = _ref10$field.name,
@@ -1147,7 +984,7 @@ var NumberInput = exports.NumberInput = function NumberInput(_ref9) {
     return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
       onBlur: onBlur,
       onChange: function onChange(e) {
-        _onChange5(e.target.value);
+        _onChange3(e.target.value);
         onChangeHandler(e.target.value);
       },
       value: value,
@@ -1245,83 +1082,6 @@ var NumberInput = exports.NumberInput = function NumberInput(_ref9) {
     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(_ref11) {
   var _item$required16, _item$disabled11, _item$required17;
   var name = _ref11.name,
@@ -1364,7 +1124,7 @@ var TextArea = exports.TextArea = function TextArea(_ref11) {
   };
   controllerProps.render = function (_ref12) {
     var _ref12$field = _ref12.field,
-      _onChange6 = _ref12$field.onChange,
+      _onChange4 = _ref12$field.onChange,
       onBlur = _ref12$field.onBlur,
       value = _ref12$field.value,
       name = _ref12$field.name,
@@ -1378,7 +1138,7 @@ var TextArea = exports.TextArea = function TextArea(_ref11) {
     return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
       onBlur: onBlur,
       onChange: function onChange(e) {
-        _onChange6(e.target.value);
+        _onChange4(e.target.value);
         onChangeHandler(e.target.value);
       },
       value: value,
@@ -1479,80 +1239,6 @@ var TextArea = exports.TextArea = function TextArea(_ref11) {
     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, TextArea2);
-    _this9 = _super10.call(this, props);
-    _this9.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this9;
-  }
-  (0, _createClass2["default"])(TextArea2, [{
-    key: "render",
-    value: function render() {
-      var _this10 = this;
-      var props = {};
-      props.name = this.props.name;
-      props.placeholder = this.props.item.placeholder;
-      props.onChange = function (event) {
-        _this10.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"])({
-        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(_esm.Form.Control, (0, _extends2["default"])({
-        as: "textarea",
-        id: props.name + '-' + (0, _functions.generateUUID)()
-      }, 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 TextArea2;
-}(_react["default"].Component);
 var Dropdown = exports.Dropdown = function Dropdown(_ref13) {
   var _item$required19, _item$disabled13, _item$required20;
   var name = _ref13.name,
@@ -1595,7 +1281,7 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref13) {
   };
   controllerProps.render = function (_ref14) {
     var _ref14$field = _ref14.field,
-      _onChange7 = _ref14$field.onChange,
+      _onChange5 = _ref14$field.onChange,
       onBlur = _ref14$field.onBlur,
       value = _ref14$field.value,
       name = _ref14$field.name,
@@ -1609,7 +1295,7 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref13) {
     return /*#__PURE__*/_react["default"].createElement(_esm.Form.Select, (0, _extends2["default"])({
       onBlur: onBlur,
       onChange: function onChange(e) {
-        _onChange7(e.target.value);
+        _onChange5(e.target.value);
         onChangeHandler(e.target.value);
       },
       value: value,
@@ -1734,151 +1420,60 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref13) {
     name: name
   })));
 };
-var Dropdown2 = exports.Dropdown2 = /*#__PURE__*/function (_React$Component11) {
-  (0, _inherits2["default"])(Dropdown2, _React$Component11);
-  var _super11 = _createSuper(Dropdown2);
-  function Dropdown2(props) {
-    var _this11;
-    (0, _classCallCheck2["default"])(this, Dropdown2);
-    _this11 = _super11.call(this, props);
-    _this11.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this11;
-  }
-  (0, _createClass2["default"])(Dropdown2, [{
-    key: "render",
-    value: function render() {
-      var _this12 = this;
-      var props = {};
-      props.name = this.props.name;
-      props.placeholder = this.props.item.placeholder || 'Select One';
-      props.onChange = function (event) {
-        _this12.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) {
-        var _this$props$item$opti;
-        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$item$opti = this.props.item.options.find(function (option) {
-          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(_esm.Form.Group, {
-        className: "form-group mb-3"
-      }, 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: ""
-      }, props.placeholder) : null, this.props.item.options.map(function (option) {
-        var thisKey = "preview_".concat(option.key);
-        return /*#__PURE__*/_react["default"].createElement("option", {
-          value: option.value,
-          key: thisKey
-        }, option.text);
-      })), /*#__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.Select, (0, _extends2["default"])({
-        id: props.name + '-' + (0, _functions.generateUUID)()
-      }, props), props.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
-        value: ""
-      }, props.placeholder) : null, this.props.item.options.map(function (option) {
-        var thisKey = "preview_".concat(option.key);
-        return /*#__PURE__*/_react["default"].createElement("option", {
-          value: option.value,
-          key: thisKey
-        }, option.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 Dropdown2;
-}(_react["default"].Component);
-var Signature = exports.Signature = /*#__PURE__*/function (_React$Component12) {
-  (0, _inherits2["default"])(Signature, _React$Component12);
-  var _super12 = _createSuper(Signature);
+var Signature = exports.Signature = /*#__PURE__*/function (_React$Component6) {
+  (0, _inherits2["default"])(Signature, _React$Component6);
+  var _super6 = _createSuper(Signature);
   function Signature(props) {
-    var _this13;
+    var _this;
     (0, _classCallCheck2["default"])(this, Signature);
-    _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), {}, {
+    _this = _super6.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clear", function () {
+      var $canvas_sig = _this.canvas.current;
+      if (_this.props.value) {
+        var $input_sig = _this.inputField.current;
+        var signature = _objectSpread(_objectSpread({}, _this.props.value), {}, {
           signature: ''
         });
         $input_sig.value = signature;
-        if (_this13.props.methods) {
-          _this13.props.methods.setValue(_this13.props.name, signature);
+        if (_this.props.methods) {
+          _this.props.methods.setValue(_this.props.name, signature);
         }
-        _this13.setState({
+        _this.setState({
           value: signature
         });
       } else if ($canvas_sig) {
         $canvas_sig.clear();
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this13), "_getSignatureImg", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_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 = _this13.canvas.current;
+            $canvas_sig = _this.canvas.current;
             if (!$canvas_sig) {
               _context.next = 14;
               break;
             }
             base64 = $canvas_sig.getTrimmedCanvas().toDataURL("image/png");
             isEmpty = $canvas_sig.isEmpty();
-            $input_sig = _this13.inputField.current;
+            $input_sig = _this.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({}, _this13.props.value), {}, {
+            signature = _objectSpread(_objectSpread({}, _this.props.value), {}, {
               signature: value,
               ipAddress: ipAddress,
               date: date
             });
             $input_sig.value = signature;
-            if (_this13.props.methods) {
-              _this13.props.methods.setValue(_this13.props.name, signature);
+            if (_this.props.methods) {
+              _this.props.methods.setValue(_this.props.name, signature);
             }
-            _this13.setState({
+            _this.setState({
               value: signature
             });
           case 14:
@@ -1887,25 +1482,25 @@ var Signature = exports.Signature = /*#__PURE__*/function (_React$Component12) {
         }
       }, _callee);
     })));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this13), "onChangeName", function (event) {
-      var $input_sig = _this13.inputField.current;
-      var signature = _objectSpread(_objectSpread({}, _this13.props.value), {}, {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangeName", function (event) {
+      var $input_sig = _this.inputField.current;
+      var signature = _objectSpread(_objectSpread({}, _this.props.value), {}, {
         name: event.target.value
       });
       $input_sig.value = signature;
-      if (_this13.props.methods) {
-        _this13.props.methods.setValue(_this13.props.name, signature);
+      if (_this.props.methods) {
+        _this.props.methods.setValue(_this.props.name, signature);
       }
-      _this13.setState({
+      _this.setState({
         value: signature
       });
     });
-    _this13.state = {
+    _this.state = {
       value: props.value
     };
-    _this13.inputField = /*#__PURE__*/_react["default"].createRef();
-    _this13.canvas = /*#__PURE__*/_react["default"].createRef();
-    return _this13;
+    _this.inputField = /*#__PURE__*/_react["default"].createRef();
+    _this.canvas = /*#__PURE__*/_react["default"].createRef();
+    return _this;
   }
   (0, _createClass2["default"])(Signature, [{
     key: "render",
@@ -1916,7 +1511,7 @@ var Signature = exports.Signature = /*#__PURE__*/function (_React$Component12) {
         _this$props$value7,
         _this$props$value8,
         _this$props$value9,
-        _this14 = this,
+        _this2 = this,
         _this$props$value$nam,
         _this$props$value10;
       var canClear = !!this.state.value;
@@ -1981,7 +1576,7 @@ var Signature = exports.Signature = /*#__PURE__*/function (_React$Component12) {
         className: "m-signature-pad--body"
       }, /*#__PURE__*/_react["default"].createElement(_reactSignatureCanvas["default"], (0, _extends2["default"])({}, padProps, {
         onEnd: function onEnd(e) {
-          _this14._getSignatureImg();
+          _this2._getSignatureImg();
         }
       }))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "m-signature-pad--footer clearfix"
@@ -2014,15 +1609,15 @@ var Signature = exports.Signature = /*#__PURE__*/function (_React$Component12) {
   }]);
   return Signature;
 }(_react["default"].Component);
-var Tags = exports.Tags = /*#__PURE__*/function (_React$Component13) {
-  (0, _inherits2["default"])(Tags, _React$Component13);
-  var _super13 = _createSuper(Tags);
+var Tags = exports.Tags = /*#__PURE__*/function (_React$Component7) {
+  (0, _inherits2["default"])(Tags, _React$Component7);
+  var _super7 = _createSuper(Tags);
   function Tags(props) {
-    var _this15;
+    var _this3;
     (0, _classCallCheck2["default"])(this, Tags);
-    _this15 = _super13.call(this, props);
-    _this15.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this15;
+    _this3 = _super7.call(this, props);
+    _this3.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this3;
   }
   (0, _createClass2["default"])(Tags, [{
     key: "getDefaultValue",
@@ -2037,7 +1632,7 @@ var Tags = exports.Tags = /*#__PURE__*/function (_React$Component13) {
   }, {
     key: "render",
     value: function render() {
-      var _this16 = this;
+      var _this4 = this;
       var options = this.props.item.options.map(function (option) {
         return {
           value: option.value,
@@ -2049,7 +1644,7 @@ var Tags = exports.Tags = /*#__PURE__*/function (_React$Component13) {
       props.name = this.props.name;
       props.placeholder = this.props.item.placeholder || 'Select...';
       props.onChange = function (val) {
-        _this16.props.onChange(val !== undefined && val !== null && val.length > 0 ? val.map(function (i) {
+        _this4.props.onChange(val !== undefined && val !== null && val.length > 0 ? val.map(function (i) {
           return i.value;
         }) : []);
       };
@@ -2086,7 +1681,7 @@ var Tags = exports.Tags = /*#__PURE__*/function (_React$Component13) {
         }, /*#__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 _this16.props.value.includes(option.value);
+          return _this4.props.value.includes(option.value);
         }).map(function (option) {
           return option.text;
         }).join(', '))));
@@ -2119,32 +1714,32 @@ var Tags = exports.Tags = /*#__PURE__*/function (_React$Component13) {
   }]);
   return Tags;
 }(_react["default"].Component);
-var Checkboxes = exports.Checkboxes = /*#__PURE__*/function (_React$Component14) {
-  (0, _inherits2["default"])(Checkboxes, _React$Component14);
-  var _super14 = _createSuper(Checkboxes);
+var Checkboxes = exports.Checkboxes = /*#__PURE__*/function (_React$Component8) {
+  (0, _inherits2["default"])(Checkboxes, _React$Component8);
+  var _super8 = _createSuper(Checkboxes);
   function Checkboxes(props) {
-    var _this17;
+    var _this5;
     (0, _classCallCheck2["default"])(this, Checkboxes);
-    _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) {
+    _this5 = _super8.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this5), "onCheckboxChange", function (checkboxValue, event) {
+      var checkedValues = _this5.props.value;
+      if (_this5.props.onChange) {
         if (event.target.checked) {
-          _this17.props.onChange(checkedValues.concat(checkboxValue));
+          _this5.props.onChange(checkedValues.concat(checkboxValue));
         } else {
-          _this17.props.onChange(checkedValues.filter(function (v) {
+          _this5.props.onChange(checkedValues.filter(function (v) {
             return v !== checkboxValue;
           }));
         }
       }
     });
-    _this17.options = {};
-    return _this17;
+    _this5.options = {};
+    return _this5;
   }
   (0, _createClass2["default"])(Checkboxes, [{
     key: "render",
     value: function render() {
-      var _this18 = this;
+      var _this6 = this;
       var self = this;
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.item.pageBreakBefore) {
@@ -2159,7 +1754,7 @@ var Checkboxes = exports.Checkboxes = /*#__PURE__*/function (_React$Component14)
         }, /*#__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 _this18.props.value.includes(option.value);
+          return _this6.props.value.includes(option.value);
         }).map(function (option) {
           return option.text;
         }).join(', '))));
@@ -2172,7 +1767,7 @@ var Checkboxes = exports.Checkboxes = /*#__PURE__*/function (_React$Component14)
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: this.props.name
       })), this.props.item.options.map(function (option) {
-        var _this18$props$checkbo;
+        var _this6$props$checkbox;
         var props = {};
         props.name = "option_".concat(option.key);
         props.value = option.value;
@@ -2183,7 +1778,7 @@ var Checkboxes = exports.Checkboxes = /*#__PURE__*/function (_React$Component14)
         }
         return /*#__PURE__*/_react["default"].createElement(_esm.ToggleButton, (0, _extends2["default"])({
           type: "checkbox",
-          variant: (_this18$props$checkbo = _this18.props.checkboxButtonClassName) !== null && _this18$props$checkbo !== void 0 ? _this18$props$checkbo : "outline-light",
+          variant: (_this6$props$checkbox = _this6.props.checkboxButtonClassName) !== null && _this6$props$checkbox !== void 0 ? _this6$props$checkbox : "outline-light",
           className: "btn-survey-builder-checkbox",
           key: "preview_".concat(option.key),
           id: self.props.name + '-' + (0, _functions.generateUUID)(),
@@ -2215,20 +1810,20 @@ var Checkboxes = exports.Checkboxes = /*#__PURE__*/function (_React$Component14)
   }]);
   return Checkboxes;
 }(_react["default"].Component);
-var Checkbox = exports.Checkbox = /*#__PURE__*/function (_React$Component15) {
-  (0, _inherits2["default"])(Checkbox, _React$Component15);
-  var _super15 = _createSuper(Checkbox);
+var Checkbox = exports.Checkbox = /*#__PURE__*/function (_React$Component9) {
+  (0, _inherits2["default"])(Checkbox, _React$Component9);
+  var _super9 = _createSuper(Checkbox);
   function Checkbox(props) {
-    var _this19;
+    var _this7;
     (0, _classCallCheck2["default"])(this, Checkbox);
-    _this19 = _super15.call(this, props);
-    _this19.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this19;
+    _this7 = _super9.call(this, props);
+    _this7.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this7;
   }
   (0, _createClass2["default"])(Checkbox, [{
     key: "render",
     value: function render() {
-      var _this20 = this,
+      var _this8 = this,
         _this$props$checkboxB;
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.item.pageBreakBefore) {
@@ -2238,8 +1833,8 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/function (_React$Component15) {
       // eslint-disable-next-line no-undef
       props.name = this.props.name;
       props.onChange = function (event) {
-        if (_this20.props.onChange) {
-          _this20.props.onChange(event.target.checked);
+        if (_this8.props.onChange) {
+          _this8.props.onChange(event.target.checked);
         }
       };
       //props.isInvalid = this.props.isInvalid;
@@ -2306,20 +1901,20 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/function (_React$Component15) {
   }]);
   return Checkbox;
 }(_react["default"].Component);
-var RadioButtons = exports.RadioButtons = /*#__PURE__*/function (_React$Component16) {
-  (0, _inherits2["default"])(RadioButtons, _React$Component16);
-  var _super16 = _createSuper(RadioButtons);
+var RadioButtons = exports.RadioButtons = /*#__PURE__*/function (_React$Component10) {
+  (0, _inherits2["default"])(RadioButtons, _React$Component10);
+  var _super10 = _createSuper(RadioButtons);
   function RadioButtons(props) {
-    var _this21;
+    var _this9;
     (0, _classCallCheck2["default"])(this, RadioButtons);
-    _this21 = _super16.call(this, props);
-    _this21.options = {};
-    return _this21;
+    _this9 = _super10.call(this, props);
+    _this9.options = {};
+    return _this9;
   }
   (0, _createClass2["default"])(RadioButtons, [{
     key: "render",
     value: function render() {
-      var _this22 = this;
+      var _this10 = this;
       var self = this;
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.item.pageBreakBefore) {
@@ -2334,7 +1929,7 @@ var RadioButtons = exports.RadioButtons = /*#__PURE__*/function (_React$Componen
         }, /*#__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 _this22.props.value === option.value;
+          return _this10.props.value === option.value;
         }).map(function (option) {
           return option.text;
         }).join(', '))));
@@ -2395,12 +1990,12 @@ var RadioButtons = exports.RadioButtons = /*#__PURE__*/function (_React$Componen
   }]);
   return RadioButtons;
 }(_react["default"].Component);
-var Image = exports.Image = /*#__PURE__*/function (_React$Component17) {
-  (0, _inherits2["default"])(Image, _React$Component17);
-  var _super17 = _createSuper(Image);
+var Image = exports.Image = /*#__PURE__*/function (_React$Component11) {
+  (0, _inherits2["default"])(Image, _React$Component11);
+  var _super11 = _createSuper(Image);
   function Image() {
     (0, _classCallCheck2["default"])(this, Image);
-    return _super17.apply(this, arguments);
+    return _super11.apply(this, arguments);
   }
   (0, _createClass2["default"])(Image, [{
     key: "render",
@@ -2426,20 +2021,20 @@ var Image = exports.Image = /*#__PURE__*/function (_React$Component17) {
   }]);
   return Image;
 }(_react["default"].Component);
-var Rating = exports.Rating = /*#__PURE__*/function (_React$Component18) {
-  (0, _inherits2["default"])(Rating, _React$Component18);
-  var _super18 = _createSuper(Rating);
+var Rating = exports.Rating = /*#__PURE__*/function (_React$Component12) {
+  (0, _inherits2["default"])(Rating, _React$Component12);
+  var _super12 = _createSuper(Rating);
   function Rating(props) {
-    var _this23;
+    var _this11;
     (0, _classCallCheck2["default"])(this, Rating);
-    _this23 = _super18.call(this, props);
-    _this23.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this23;
+    _this11 = _super12.call(this, props);
+    _this11.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this11;
   }
   (0, _createClass2["default"])(Rating, [{
     key: "render",
     value: function render() {
-      var _this24 = this;
+      var _this12 = this;
       var props = {};
       props.name = this.props.name;
       props.ratingAmount = 5;
@@ -2450,7 +2045,7 @@ var Rating = exports.Rating = /*#__PURE__*/function (_React$Component18) {
       }
       props.onRatingClick = function (event, _ref16) {
         var rating = _ref16.rating;
-        _this24.props.onChange(rating);
+        _this12.props.onChange(rating);
       };
       if (this.props.item.mutable) {
         props.editing = true;
@@ -2486,12 +2081,12 @@ var Rating = exports.Rating = /*#__PURE__*/function (_React$Component18) {
   }]);
   return Rating;
 }(_react["default"].Component);
-var HyperLink = exports.HyperLink = /*#__PURE__*/function (_React$Component19) {
-  (0, _inherits2["default"])(HyperLink, _React$Component19);
-  var _super19 = _createSuper(HyperLink);
+var HyperLink = exports.HyperLink = /*#__PURE__*/function (_React$Component13) {
+  (0, _inherits2["default"])(HyperLink, _React$Component13);
+  var _super13 = _createSuper(HyperLink);
   function HyperLink() {
     (0, _classCallCheck2["default"])(this, HyperLink);
-    return _super19.apply(this, arguments);
+    return _super13.apply(this, arguments);
   }
   (0, _createClass2["default"])(HyperLink, [{
     key: "render",
@@ -2516,12 +2111,12 @@ var HyperLink = exports.HyperLink = /*#__PURE__*/function (_React$Component19) {
   }]);
   return HyperLink;
 }(_react["default"].Component);
-var Download = exports.Download = /*#__PURE__*/function (_React$Component20) {
-  (0, _inherits2["default"])(Download, _React$Component20);
-  var _super20 = _createSuper(Download);
+var Download = exports.Download = /*#__PURE__*/function (_React$Component14) {
+  (0, _inherits2["default"])(Download, _React$Component14);
+  var _super14 = _createSuper(Download);
   function Download() {
     (0, _classCallCheck2["default"])(this, Download);
-    return _super20.apply(this, arguments);
+    return _super14.apply(this, arguments);
   }
   (0, _createClass2["default"])(Download, [{
     key: "render",
@@ -2542,36 +2137,36 @@ var Download = exports.Download = /*#__PURE__*/function (_React$Component20) {
   }]);
   return Download;
 }(_react["default"].Component);
-var Camera = exports.Camera = /*#__PURE__*/function (_React$Component21) {
-  (0, _inherits2["default"])(Camera, _React$Component21);
-  var _super21 = _createSuper(Camera);
+var Camera = exports.Camera = /*#__PURE__*/function (_React$Component15) {
+  (0, _inherits2["default"])(Camera, _React$Component15);
+  var _super15 = _createSuper(Camera);
   function Camera(props) {
-    var _this25;
+    var _this13;
     (0, _classCallCheck2["default"])(this, Camera);
-    _this25 = _super21.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this25), "handleChange", function (event) {
+    _this13 = _super15.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this13), "handleChange", function (event) {
       if (event.target.files && event.target.files.length > 0) {
-        _this25.setState({
+        _this13.setState({
           img: event.target.files[0]
         });
-        if (_this25.props.onChange) {
-          _this25.props.onChange(event.target.files[0]);
+        if (_this13.props.onChange) {
+          _this13.props.onChange(event.target.files[0]);
         }
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this25), "clearImage", function () {
-      _this25.setState({
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this13), "clearImage", function () {
+      _this13.setState({
         img: null
       });
-      if (_this25.props.onChange) {
-        _this25.props.onChange(null);
+      if (_this13.props.onChange) {
+        _this13.props.onChange(null);
       }
     });
-    _this25.inputField = /*#__PURE__*/_react["default"].createRef();
-    _this25.state = {
+    _this13.inputField = /*#__PURE__*/_react["default"].createRef();
+    _this13.state = {
       img: props.value
     };
-    return _this25;
+    return _this13;
   }
   (0, _createClass2["default"])(Camera, [{
     key: "getImageSizeProps",
@@ -2671,39 +2266,39 @@ var Camera = exports.Camera = /*#__PURE__*/function (_React$Component21) {
   }]);
   return Camera;
 }(_react["default"].Component);
-var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component22) {
-  (0, _inherits2["default"])(FileUpload, _React$Component22);
-  var _super22 = _createSuper(FileUpload);
+var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component16) {
+  (0, _inherits2["default"])(FileUpload, _React$Component16);
+  var _super16 = _createSuper(FileUpload);
   function FileUpload(props) {
-    var _this26;
+    var _this14;
     (0, _classCallCheck2["default"])(this, FileUpload);
-    _this26 = _super22.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this26), "handleChange", function (event) {
+    _this14 = _super16.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this14), "handleChange", function (event) {
       if (event.target.files && event.target.files.length > 0) {
-        _this26.setState({
+        _this14.setState({
           fileUpload: event.target.files[0]
         });
-        if (_this26.props.onChange) {
-          _this26.props.onChange(event.target.files[0]);
+        if (_this14.props.onChange) {
+          _this14.props.onChange(event.target.files[0]);
         }
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this26), "clearFileUpload", function () {
-      _this26.setState({
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this14), "clearFileUpload", function () {
+      _this14.setState({
         fileUpload: null
       });
-      if (_this26.props.onChange) {
-        _this26.props.onChange(null);
+      if (_this14.props.onChange) {
+        _this14.props.onChange(null);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this26), "saveFile", /*#__PURE__*/function () {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this14), "saveFile", /*#__PURE__*/function () {
       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) {
             case 0:
               e.preventDefault();
-              sourceUrl = _this26.props.value;
+              sourceUrl = _this14.props.value;
               _context2.next = 4;
               return (0, _isomorphicFetch["default"])(sourceUrl, {
                 method: 'GET',
@@ -2722,7 +2317,7 @@ var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component22)
               resBlob = _context2.sent;
               // eslint-disable-next-line no-undef
               blob = new Blob([resBlob], {
-                type: _this26.props.item.fileType || response.headers.get('Content-Type')
+                type: _this14.props.item.fileType || response.headers.get('Content-Type')
               });
               if (dispositionHeader && dispositionHeader.indexOf(';filename=') > -1) {
                 fileName = dispositionHeader.split(';filename=')[1];
@@ -2741,11 +2336,11 @@ var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component22)
         return _ref18.apply(this, arguments);
       };
     }());
-    _this26.inputField = /*#__PURE__*/_react["default"].createRef();
-    _this26.state = {
+    _this14.inputField = /*#__PURE__*/_react["default"].createRef();
+    _this14.state = {
       fileUpload: props.value
     };
-    return _this26;
+    return _this14;
   }
   (0, _createClass2["default"])(FileUpload, [{
     key: "render",
@@ -2822,26 +2417,26 @@ var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component22)
   }]);
   return FileUpload;
 }(_react["default"].Component);
-var Range = exports.Range = /*#__PURE__*/function (_React$Component23) {
-  (0, _inherits2["default"])(Range, _React$Component23);
-  var _super23 = _createSuper(Range);
+var Range = exports.Range = /*#__PURE__*/function (_React$Component17) {
+  (0, _inherits2["default"])(Range, _React$Component17);
+  var _super17 = _createSuper(Range);
   function Range(props) {
-    var _this27;
+    var _this15;
     (0, _classCallCheck2["default"])(this, Range);
-    _this27 = _super23.call(this, props);
-    _this27.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this27;
+    _this15 = _super17.call(this, props);
+    _this15.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this15;
   }
   (0, _createClass2["default"])(Range, [{
     key: "render",
     value: function render() {
-      var _this28 = this;
+      var _this16 = this;
       var props = {};
       var name = this.props.name;
       props.name = this.props.name;
       props.value = this.props.value;
       props.onChange = function (event) {
-        _this28.props.onChange(event.target.value);
+        _this16.props.onChange(event.target.value);
       };
       if (this.props.item.disabled) {
         props.disabled = true;