react-survey-builder 1.0.16 → 1.0.18

package/lib/survey-elements/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,19 +20,23 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _isomorphicFetch = _interopRequireDefault(require("isomorphic-fetch"));
 var _fileSaver = require("file-saver");
 var _react = _interopRequireDefault(require("react"));
-var _reactSelect = _interopRequireDefault(require("react-select"));
 var _reactSignatureCanvas = _interopRequireDefault(require("react-signature-canvas"));
 var _reactBootstrapRangeSlider = _interopRequireDefault(require("react-bootstrap-range-slider"));
 var _starRating = _interopRequireDefault(require("./star-rating"));
 var _componentHeader = _interopRequireDefault(require("./component-header"));
 var _componentLabel = _interopRequireDefault(require("./component-label"));
-var _myxss = _interopRequireDefault(require("./myxss"));
+var _myxss = _interopRequireWildcard(require("./myxss"));
 var _fa = require("react-icons/fa");
 var _reactBootstrap = require("react-bootstrap");
 var _reactImask = require("react-imask");
 var _reactBootstrapTypeahead = require("react-bootstrap-typeahead");
+var _componentErrorMessage = _interopRequireDefault(require("./component-error-message"));
+var _ipUtils = require("../utils/ipUtils");
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _excluded = ["onChange"],
   _excluded2 = ["onChange", "formatMask"]; // eslint-disable-next-line max-classes-per-file
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
@@ -139,16 +144,15 @@ var Header = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(Header, [{
     key: "render",
     value: function render() {
-      // const headerClasses = `dynamic-input ${this.props.data.element}-input`;
       var classNames = 'static';
-      if (this.props.data.bold) {
+      if (this.props.item.bold) {
         classNames += ' bold';
       }
-      if (this.props.data.italic) {
+      if (this.props.item.italic) {
         classNames += ' italic';
       }
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -157,32 +161,60 @@ var Header = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("h3", {
         className: classNames,
         dangerouslySetInnerHTML: {
-          __html: _myxss["default"].process(this.props.data.content)
+          __html: _myxss["default"].process(this.props.item.content)
         }
       }));
     }
   }]);
   return Header;
 }(_react["default"].Component);
-var Paragraph = /*#__PURE__*/function (_React$Component2) {
-  (0, _inherits2["default"])(Paragraph, _React$Component2);
-  var _super2 = _createSuper(Paragraph);
+var ContentBody = /*#__PURE__*/function (_React$Component2) {
+  (0, _inherits2["default"])(ContentBody, _React$Component2);
+  var _super2 = _createSuper(ContentBody);
+  function ContentBody() {
+    (0, _classCallCheck2["default"])(this, ContentBody);
+    return _super2.apply(this, arguments);
+  }
+  (0, _createClass2["default"])(ContentBody, [{
+    key: "render",
+    value: function render() {
+      var classNames = 'static';
+      var baseClasses = 'SortableItem rfb-item';
+      if (this.props.item.pageBreakBefore) {
+        baseClasses += ' alwaysbreak';
+      }
+      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("div", {
+        className: classNames,
+        dangerouslySetInnerHTML: {
+          __html: _myxss.myContentXSS.process(this.props.item.content)
+        }
+      }));
+    }
+  }]);
+  return ContentBody;
+}(_react["default"].Component);
+var Paragraph = /*#__PURE__*/function (_React$Component3) {
+  (0, _inherits2["default"])(Paragraph, _React$Component3);
+  var _super3 = _createSuper(Paragraph);
   function Paragraph() {
     (0, _classCallCheck2["default"])(this, Paragraph);
-    return _super2.apply(this, arguments);
+    return _super3.apply(this, arguments);
   }
   (0, _createClass2["default"])(Paragraph, [{
     key: "render",
     value: function render() {
       var classNames = 'static';
-      if (this.props.data.bold) {
+      if (this.props.item.bold) {
         classNames += ' bold';
       }
-      if (this.props.data.italic) {
+      if (this.props.item.italic) {
         classNames += ' italic';
       }
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -191,32 +223,32 @@ var Paragraph = /*#__PURE__*/function (_React$Component2) {
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("p", {
         className: classNames,
         dangerouslySetInnerHTML: {
-          __html: _myxss["default"].process(this.props.data.content)
+          __html: _myxss["default"].process(this.props.item.content)
         }
       }));
     }
   }]);
   return Paragraph;
 }(_react["default"].Component);
-var Label = /*#__PURE__*/function (_React$Component3) {
-  (0, _inherits2["default"])(Label, _React$Component3);
-  var _super3 = _createSuper(Label);
+var Label = /*#__PURE__*/function (_React$Component4) {
+  (0, _inherits2["default"])(Label, _React$Component4);
+  var _super4 = _createSuper(Label);
   function Label() {
     (0, _classCallCheck2["default"])(this, Label);
-    return _super3.apply(this, arguments);
+    return _super4.apply(this, arguments);
   }
   (0, _createClass2["default"])(Label, [{
     key: "render",
     value: function render() {
       var classNames = 'static';
-      if (this.props.data.bold) {
+      if (this.props.item.bold) {
         classNames += ' bold';
       }
-      if (this.props.data.italic) {
+      if (this.props.item.italic) {
         classNames += ' italic';
       }
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -225,25 +257,25 @@ var Label = /*#__PURE__*/function (_React$Component3) {
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("label", {
         className: "".concat(classNames, " form-label"),
         dangerouslySetInnerHTML: {
-          __html: _myxss["default"].process(this.props.data.content)
+          __html: _myxss["default"].process(this.props.item.content)
         }
       }));
     }
   }]);
   return Label;
 }(_react["default"].Component);
-var LineBreak = /*#__PURE__*/function (_React$Component4) {
-  (0, _inherits2["default"])(LineBreak, _React$Component4);
-  var _super4 = _createSuper(LineBreak);
+var LineBreak = /*#__PURE__*/function (_React$Component5) {
+  (0, _inherits2["default"])(LineBreak, _React$Component5);
+  var _super5 = _createSuper(LineBreak);
   function LineBreak() {
     (0, _classCallCheck2["default"])(this, LineBreak);
-    return _super4.apply(this, arguments);
+    return _super5.apply(this, arguments);
   }
   (0, _createClass2["default"])(LineBreak, [{
     key: "render",
     value: function render() {
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -254,413 +286,426 @@ var LineBreak = /*#__PURE__*/function (_React$Component4) {
   }]);
   return LineBreak;
 }(_react["default"].Component);
-var TextInput = /*#__PURE__*/function (_React$Component5) {
-  (0, _inherits2["default"])(TextInput, _React$Component5);
-  var _super5 = _createSuper(TextInput);
+var 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 = _super5.call(this, props);
+    _this = _super6.call(this, props);
     _this.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
   (0, _createClass2["default"])(TextInput, [{
     key: "render",
     value: function render() {
-      var _this$props$data$plac,
-        _this2 = this;
+      var _this2 = this;
       var props = {};
-      props.type = 'text';
-      props.name = this.props.data.fieldName;
-      props.placeholder = (_this$props$data$plac = this.props.data.placeholder) !== null && _this$props$data$plac !== void 0 ? _this$props$data$plac : _myxss["default"].process(this.props.data.label);
-      if (this.props.mutable) {
-        props.defaultValue = this.props.defaultValue;
-        props.ref = this.inputField;
-      }
-      if (this.props.onChange) {
-        props.onChange = function (e) {
-          _this2.props.onChange(e.target.value);
-        };
-      }
-      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;
-      }
-      if (this.props.readOnly) {
+      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;
+      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.data.labelLocation) {
-        labelLocation = this.props.data.labelLocation;
+      if (this.props.item.labelLocation) {
+        labelLocation = this.props.item.labelLocation;
       }
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
+      if (this.props.item.print === true) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+          className: "form-group mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+          htmlFor: props.name
+        })), /*#__PURE__*/_react["default"].createElement("div", null, 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(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
       }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name
+        id: props.name,
+        type: "text"
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name
-      }, props))), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        id: props.name,
+        type: "text"
+      }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
-      }, this.props.data.help) : null));
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: props.name
+      })));
     }
   }]);
   return TextInput;
 }(_react["default"].Component);
-var EmailInput = /*#__PURE__*/function (_React$Component6) {
-  (0, _inherits2["default"])(EmailInput, _React$Component6);
-  var _super6 = _createSuper(EmailInput);
+var 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 = _super6.call(this, props);
+    _this3 = _super7.call(this, props);
     _this3.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this3;
   }
   (0, _createClass2["default"])(EmailInput, [{
     key: "render",
     value: function render() {
-      var _this$props$data$plac2,
-        _this4 = this;
+      var _this4 = this;
       var props = {};
-      props.type = 'text';
-      props.name = this.props.data.fieldName;
-      props.placeholder = (_this$props$data$plac2 = this.props.data.placeholder) !== null && _this$props$data$plac2 !== void 0 ? _this$props$data$plac2 : _myxss["default"].process(this.props.data.label);
-      if (this.props.mutable) {
-        props.defaultValue = this.props.defaultValue;
-        props.ref = this.inputField;
-      }
-      if (this.props.onChange) {
-        props.onChange = function (e) {
-          _this4.props.onChange(e.target.value);
-        };
-      }
-      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;
-      }
-      if (this.props.readOnly) {
+      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;
+      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.data.labelLocation) {
-        labelLocation = this.props.data.labelLocation;
+      if (this.props.item.labelLocation) {
+        labelLocation = this.props.item.labelLocation;
       }
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
+      if (this.props.item.print === true) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+          className: "form-group mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+          htmlFor: props.name
+        })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.value)));
+      }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
       }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name
+        id: props.name,
+        type: "text"
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name
-      }, props))), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        id: props.name,
+        type: "text"
+      }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
-      }, this.props.data.help) : null));
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: props.name
+      })));
     }
   }]);
   return EmailInput;
 }(_react["default"].Component);
-var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
-  (0, _inherits2["default"])(PhoneNumber, _React$Component7);
-  var _super7 = _createSuper(PhoneNumber);
+var PhoneNumber = /*#__PURE__*/function (_React$Component8) {
+  (0, _inherits2["default"])(PhoneNumber, _React$Component8);
+  var _super8 = _createSuper(PhoneNumber);
   function PhoneNumber(props) {
     var _this5;
     (0, _classCallCheck2["default"])(this, PhoneNumber);
-    _this5 = _super7.call(this, props);
+    _this5 = _super8.call(this, props);
     _this5.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this5;
   }
   (0, _createClass2["default"])(PhoneNumber, [{
     key: "render",
     value: function render() {
-      var _this$props$data$plac3,
-        _this6 = this;
+      var _this6 = this;
       var props = {};
-      props.type = 'text';
-      props.name = this.props.data.fieldName;
-      props.placeholder = (_this$props$data$plac3 = this.props.data.placeholder) !== null && _this$props$data$plac3 !== void 0 ? _this$props$data$plac3 : _myxss["default"].process(this.props.data.label);
-      if (this.props.mutable) {
-        props.defaultValue = this.props.defaultValue;
-        props.ref = this.inputField;
-      }
-      if (this.props.onChange) {
-        props.onChange = function (e) {
-          _this6.props.onChange(e);
-        };
-      }
-      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;
-      }
-      if (this.props.readOnly) {
+      props.name = this.props.name;
+      props.placeholder = this.props.item.placeholder;
+      props.onChange = function (val) {
+        _this6.props.onChange(val);
+      };
+      props.value = this.props.value;
+      props.isInvalid = this.props.isInvalid;
+      props.onBlur = this.props.onBlur;
+      props.autoComplete = "new-password";
+      if (this.props.item.disabled) {
         props.disabled = 'disabled';
       }
-      props.autoComplete = "new-password";
+      if (this.props.item.mutable) {
+        props.ref = this.inputField;
+      }
       var labelLocation = 'ABOVE';
-      if (this.props.data.labelLocation) {
-        labelLocation = this.props.data.labelLocation;
+      if (this.props.item.labelLocation) {
+        labelLocation = this.props.item.labelLocation;
       }
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
+      if (this.props.item.print === true) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+          className: "form-group mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+          htmlFor: props.name
+        })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.value)));
+      }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
       }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name
+        id: props.name,
+        type: "text"
       }, props, {
         as: CustomPhoneInput
       })), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-        name: props.name,
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-        name: props.name,
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name
+        id: props.name,
+        type: "text"
       }, props, {
         as: CustomPhoneInput
-      }))), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
-      }, this.props.data.help) : null));
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: props.name
+      })));
     }
   }]);
   return PhoneNumber;
 }(_react["default"].Component);
-var DatePicker = /*#__PURE__*/function (_React$Component8) {
-  (0, _inherits2["default"])(DatePicker, _React$Component8);
-  var _super8 = _createSuper(DatePicker);
+var DatePicker = /*#__PURE__*/function (_React$Component9) {
+  (0, _inherits2["default"])(DatePicker, _React$Component9);
+  var _super9 = _createSuper(DatePicker);
   function DatePicker(props) {
     var _this7;
     (0, _classCallCheck2["default"])(this, DatePicker);
-    _this7 = _super8.call(this, props);
+    _this7 = _super9.call(this, props);
     _this7.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this7;
   }
   (0, _createClass2["default"])(DatePicker, [{
     key: "render",
     value: function render() {
-      var _this$props$data$plac4,
-        _this8 = this;
+      var _this8 = this;
       var props = {};
-      props.type = 'text';
-      props.name = this.props.data.fieldName;
-      props.placeholder = (_this$props$data$plac4 = this.props.data.placeholder) !== null && _this$props$data$plac4 !== void 0 ? _this$props$data$plac4 : _myxss["default"].process(this.props.data.label);
-      if (this.props.mutable) {
-        props.defaultValue = this.props.defaultValue;
-        props.ref = this.inputField;
-      }
-      props.formatMask = this.props.data.formatMask || 'MM/DD/YYYY';
-      if (this.props.onChange) {
-        props.onChange = function (e) {
-          _this8.props.onChange(e);
-        };
-      }
-      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;
-      }
-      if (this.props.readOnly) {
+      props.name = this.props.name;
+      props.placeholder = this.props.item.placeholder;
+      props.onChange = function (val) {
+        _this8.props.onChange(val);
+      };
+      props.value = this.props.value;
+      props.isInvalid = this.props.isInvalid;
+      props.onBlur = this.props.onBlur;
+      props.autoComplete = "new-password";
+      if (this.props.item.disabled) {
         props.disabled = 'disabled';
       }
-      props.autoComplete = "new-password";
+      if (this.props.item.mutable) {
+        props.ref = this.inputField;
+      }
+      props.formatMask = this.props.item.formatMask || 'MM/DD/YYYY';
       var labelLocation = 'ABOVE';
-      if (this.props.data.labelLocation) {
-        labelLocation = this.props.data.labelLocation;
+      if (this.props.item.labelLocation) {
+        labelLocation = this.props.item.labelLocation;
       }
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
+      if (this.props.item.print === true) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+          className: "form-group mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+          htmlFor: props.name
+        })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.value)));
+      }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
       }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name
+        id: props.name,
+        type: "text"
       }, props, {
         as: CustomDateInput
       })), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-        name: props.name,
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-        name: props.name,
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name
+        id: props.name,
+        type: "text"
       }, props, {
         as: CustomDateInput
-      }))), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
-      }, this.props.data.help) : null));
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: props.name
+      })));
     }
   }]);
   return DatePicker;
 }(_react["default"].Component);
-var NumberInput = /*#__PURE__*/function (_React$Component9) {
-  (0, _inherits2["default"])(NumberInput, _React$Component9);
-  var _super9 = _createSuper(NumberInput);
+var NumberInput = /*#__PURE__*/function (_React$Component10) {
+  (0, _inherits2["default"])(NumberInput, _React$Component10);
+  var _super10 = _createSuper(NumberInput);
   function NumberInput(props) {
     var _this9;
     (0, _classCallCheck2["default"])(this, NumberInput);
-    _this9 = _super9.call(this, props);
+    _this9 = _super10.call(this, props);
     _this9.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this9;
   }
   (0, _createClass2["default"])(NumberInput, [{
     key: "render",
     value: function render() {
-      var _this$props$data$plac5,
-        _this10 = this;
+      var _this10 = this;
       var props = {};
-      props.type = 'number';
-      props.name = this.props.data.fieldName;
-      props.placeholder = (_this$props$data$plac5 = this.props.data.placeholder) !== null && _this$props$data$plac5 !== void 0 ? _this$props$data$plac5 : _myxss["default"].process(this.props.data.label);
-      if (this.props.mutable) {
-        props.defaultValue = this.props.defaultValue;
-        props.ref = this.inputField;
-      }
-      if (this.props.onChange) {
-        props.onChange = function (e) {
-          _this10.props.onChange(e.target.value);
-        };
-      }
-      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;
-      }
-      if (this.props.readOnly) {
+      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;
+      props.onBlur = this.props.onBlur;
+      props.autoComplete = "new-password";
+      if (this.props.item.disabled) {
         props.disabled = 'disabled';
       }
-      props.min = this.props.data.minValue;
-      props.max = this.props.data.maxValue;
-      props.step = this.props.data.step;
+      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.data.labelLocation) {
-        labelLocation = this.props.data.labelLocation;
+      if (this.props.item.labelLocation) {
+        labelLocation = this.props.item.labelLocation;
       }
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
+      if (this.props.item.print === true) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+          className: "form-group mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+          htmlFor: props.name
+        })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.value)));
+      }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
       }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name
+        id: props.name,
+        type: "number"
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-        name: props.name,
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-        name: props.name,
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name
-      }, props))), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        id: props.name,
+        type: "number"
+      }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
-      }, this.props.data.help) : null));
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: props.name
+      })));
     }
   }]);
   return NumberInput;
 }(_react["default"].Component);
-var TextArea = /*#__PURE__*/function (_React$Component10) {
-  (0, _inherits2["default"])(TextArea, _React$Component10);
-  var _super10 = _createSuper(TextArea);
+var TextArea = /*#__PURE__*/function (_React$Component11) {
+  (0, _inherits2["default"])(TextArea, _React$Component11);
+  var _super11 = _createSuper(TextArea);
   function TextArea(props) {
     var _this11;
     (0, _classCallCheck2["default"])(this, TextArea);
-    _this11 = _super10.call(this, props);
+    _this11 = _super11.call(this, props);
     _this11.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this11;
   }
   (0, _createClass2["default"])(TextArea, [{
     key: "render",
     value: function render() {
-      var _this$props$data$plac6,
-        _this12 = this;
+      var _this12 = this;
       var props = {};
-      props.name = this.props.data.fieldName;
-      props.placeholder = (_this$props$data$plac6 = this.props.data.placeholder) !== null && _this$props$data$plac6 !== void 0 ? _this$props$data$plac6 : _myxss["default"].process(this.props.data.label);
-      if (this.props.mutable) {
-        props.defaultValue = this.props.defaultValue;
-        props.ref = this.inputField;
-      }
-      if (this.props.onChange) {
-        props.onChange = function (e) {
-          _this12.props.onChange(e.target.value);
-        };
-      }
-      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;
-      }
-      if (this.props.readOnly) {
+      props.name = this.props.name;
+      props.placeholder = this.props.item.placeholder;
+      props.onChange = function (event) {
+        _this12.props.onChange(event.target.value);
+      };
+      props.value = this.props.value;
+      props.isInvalid = this.props.isInvalid;
+      props.onBlur = this.props.onBlur;
+      props.autoComplete = "new-password";
+      if (this.props.item.disabled) {
         props.disabled = 'disabled';
       }
+      if (this.props.item.mutable) {
+        props.ref = this.inputField;
+      }
       var labelLocation = 'ABOVE';
-      if (this.props.data.labelLocation) {
-        labelLocation = this.props.data.labelLocation;
+      if (this.props.item.labelLocation) {
+        labelLocation = this.props.item.labelLocation;
       }
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
+      if (this.props.item.print === true) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+          className: "form-group mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+          htmlFor: props.name
+        })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.value)));
+      }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
@@ -670,28 +715,28 @@ var TextArea = /*#__PURE__*/function (_React$Component10) {
         as: "textarea",
         id: props.name
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-        name: props.name,
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-        name: props.name,
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         as: "textarea",
         id: props.name
-      }, props))), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
-      }, this.props.data.help) : null));
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: props.name
+      })));
     }
   }]);
   return TextArea;
 }(_react["default"].Component);
-var Dropdown = /*#__PURE__*/function (_React$Component11) {
-  (0, _inherits2["default"])(Dropdown, _React$Component11);
-  var _super11 = _createSuper(Dropdown);
+var Dropdown = /*#__PURE__*/function (_React$Component12) {
+  (0, _inherits2["default"])(Dropdown, _React$Component12);
+  var _super12 = _createSuper(Dropdown);
   function Dropdown(props) {
     var _this13;
     (0, _classCallCheck2["default"])(this, Dropdown);
-    _this13 = _super11.call(this, props);
+    _this13 = _super12.call(this, props);
     _this13.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this13;
   }
@@ -700,37 +745,42 @@ var Dropdown = /*#__PURE__*/function (_React$Component11) {
     value: function render() {
       var _this14 = this;
       var props = {};
-      props.name = this.props.data.fieldName;
-      props.placeholder = this.props.data.placeholder || 'Select One';
-      if (this.props.mutable) {
-        props.defaultValue = this.props.defaultValue;
-        props.ref = this.inputField;
-      }
-      if (this.props.onChange) {
-        props.onChange = function (e) {
-          _this14.props.onChange(e.target.value);
-        };
-      }
-      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;
-      }
-      if (this.props.readOnly) {
+      props.name = this.props.name;
+      props.placeholder = this.props.item.placeholder || 'Select One';
+      props.onChange = function (event) {
+        _this14.props.onChange(event.target.value);
+      };
+      props.value = this.props.value;
+      props.isInvalid = this.props.isInvalid;
+      props.onBlur = this.props.onBlur;
+      props.autoComplete = "new-password";
+      if (this.props.item.disabled) {
         props.disabled = 'disabled';
       }
+      if (this.props.item.mutable) {
+        props.ref = this.inputField;
+      }
       var labelLocation = 'ABOVE';
-      if (this.props.data.labelLocation) {
-        labelLocation = this.props.data.labelLocation;
+      if (this.props.item.labelLocation) {
+        labelLocation = this.props.item.labelLocation;
       }
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      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(_reactBootstrap.Form.Group, {
+          className: "form-group mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+          htmlFor: props.name
+        })), /*#__PURE__*/_react["default"].createElement("div", null, (_this$props$item$opti = this.props.item.options.filter(function (selectedOption) {
+          return selectedOption.value === _this14.props.value;
+        })) === null || _this$props$item$opti === void 0 ? void 0 : _this$props$item$opti.label)));
+      }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
@@ -740,73 +790,112 @@ var Dropdown = /*#__PURE__*/function (_React$Component11) {
         id: props.name
       }, props), props.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
         value: ""
-      }, props.placeholder) : null, this.props.data.options.map(function (option) {
+      }, 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, {
-        name: props.name,
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-        name: props.name,
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, (0, _extends2["default"])({
         id: props.name
       }, props), props.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
         value: ""
-      }, props.placeholder) : null, this.props.data.options.map(function (option) {
+      }, 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.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
-      }, this.props.data.help) : null));
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: props.name
+      })));
     }
   }]);
   return Dropdown;
 }(_react["default"].Component);
-var Signature = /*#__PURE__*/function (_React$Component12) {
-  (0, _inherits2["default"])(Signature, _React$Component12);
-  var _super12 = _createSuper(Signature);
+var Signature = /*#__PURE__*/function (_React$Component13) {
+  (0, _inherits2["default"])(Signature, _React$Component13);
+  var _super13 = _createSuper(Signature);
   function Signature(props) {
     var _this15;
     (0, _classCallCheck2["default"])(this, Signature);
-    _this15 = _super12.call(this, props);
+    _this15 = _super13.call(this, props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this15), "clear", function () {
-      if (_this15.state.defaultValue) {
+      var $canvas_sig = _this15.canvas.current;
+      if (_this15.props.value) {
+        var $input_sig = _this15.inputField.current;
+        var signature = _objectSpread(_objectSpread({}, _this15.props.value), {}, {
+          signature: ''
+        });
+        $input_sig.value = signature;
+        if (_this15.props.methods) {
+          _this15.props.methods.setValue(_this15.props.name, signature);
+        }
         _this15.setState({
-          defaultValue: ''
+          value: signature
         });
-      } else if (_this15.canvas.current) {
-        _this15.canvas.current.clear();
+      } else if ($canvas_sig) {
+        $canvas_sig.clear();
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this15), "_getSignatureImg", function () {
-      var $canvas_sig = _this15.canvas.current;
-      if ($canvas_sig) {
-        var base64 = $canvas_sig.toDataURL().replace('data:image/png;base64,', '');
-        var isEmpty = $canvas_sig.isEmpty();
-        var $input_sig = _this15.inputField.current;
-        var name = _this15.props.data.fieldName;
-        if (isEmpty) {
-          $input_sig.value = '';
-          if (_this15.props.methods) {
-            _this15.props.methods.setValue(name, '');
-          }
-        } else {
-          $input_sig.value = base64;
-          if (_this15.props.methods) {
-            _this15.props.methods.setValue(name, base64);
-          }
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this15), "_getSignatureImg", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var $canvas_sig, base64, isEmpty, $input_sig, value, ipAddress, date, signature;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            $canvas_sig = _this15.canvas.current;
+            if (!$canvas_sig) {
+              _context.next = 14;
+              break;
+            }
+            base64 = $canvas_sig.getTrimmedCanvas().toDataURL("image/png");
+            isEmpty = $canvas_sig.isEmpty();
+            $input_sig = _this15.inputField.current;
+            value = isEmpty ? '' : base64;
+            _context.next = 8;
+            return (0, _ipUtils.getIPAddress)();
+          case 8:
+            ipAddress = _context.sent;
+            date = (0, _momentTimezone["default"])().toISOString();
+            signature = _objectSpread(_objectSpread({}, _this15.props.value), {}, {
+              signature: value,
+              ipAddress: ipAddress,
+              date: date
+            });
+            $input_sig.value = signature;
+            if (_this15.props.methods) {
+              _this15.props.methods.setValue(_this15.props.name, signature);
+            }
+            _this15.setState({
+              value: signature
+            });
+          case 14:
+          case "end":
+            return _context.stop();
         }
+      }, _callee);
+    })));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this15), "onChangeName", function (event) {
+      var $input_sig = _this15.inputField.current;
+      var signature = _objectSpread(_objectSpread({}, _this15.props.value), {}, {
+        name: event.target.value
+      });
+      $input_sig.value = signature;
+      if (_this15.props.methods) {
+        _this15.props.methods.setValue(_this15.props.name, signature);
       }
+      _this15.setState({
+        value: signature
+      });
     });
     _this15.state = {
-      defaultValue: props.defaultValue
+      value: props.value
     };
     _this15.inputField = /*#__PURE__*/_react["default"].createRef();
     _this15.canvas = /*#__PURE__*/_react["default"].createRef();
@@ -815,48 +904,72 @@ var Signature = /*#__PURE__*/function (_React$Component12) {
   (0, _createClass2["default"])(Signature, [{
     key: "render",
     value: function render() {
-      var _this16 = this;
-      var defaultValue = this.state.defaultValue;
-      var canClear = !!defaultValue;
+      var _this$state$value,
+        _this$state$value2,
+        _this$props$value6,
+        _this$props$value7,
+        _this$props$value8,
+        _this$props$value9,
+        _this16 = this,
+        _this$props$value$nam,
+        _this$props$value10;
+      var canClear = !!this.state.value;
       var props = {};
-      props.type = 'hidden';
-      props.name = this.props.data.fieldName;
-      if (this.props.onChange) {
-        props.onChange = function (e) {
-          _this16.props.onChange(e.target.value);
-        };
-      }
-      if (this.props.value) {
-        props.value = this.props.value;
-      }
-      if (this.props.mutable) {
-        props.defaultValue = defaultValue;
+      props.name = this.props.name;
+      // props.onChange = (event) => { console.log('onChangeSignature', event.target.value); this.props.onChange(event.target.value); };
+      props.value = this.props.value;
+      if (this.props.item.mutable) {
         props.ref = this.inputField;
       }
       var padProps = {};
       // umd requires canvasProps={{ width: 400, height: 150 }}
-      if (this.props.mutable) {
-        padProps.defaultValue = defaultValue;
+      if (this.props.item.mutable) {
+        var _this$props$value;
+        padProps.defaultValue = (_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.signature;
         padProps.ref = this.canvas;
-        canClear = !this.props.readOnly;
+        canClear = !this.props.item.readOnly;
       }
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
       var sourceDataURL;
-      if (defaultValue && defaultValue.length > 0) {
-        sourceDataURL = "data:image/png;base64,".concat(defaultValue);
+      if ((_this$state$value = this.state.value) !== null && _this$state$value !== void 0 && _this$state$value.signature && ((_this$state$value2 = this.state.value) === null || _this$state$value2 === void 0 ? void 0 : _this$state$value2.signature.length) > 0) {
+        var _this$state$value3;
+        sourceDataURL = (_this$state$value3 = this.state.value) === null || _this$state$value3 === void 0 ? void 0 : _this$state$value3.signature;
       }
       padProps.canvasProps = {};
+      if (this.props.item.print === true && !!sourceDataURL) {
+        var _this$props$value2, _this$props$value3, _this$props$value4, _this$props$value5;
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+          className: "form-group mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+          htmlFor: this.props.name
+        })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image, {
+          src: sourceDataURL
+        }), /*#__PURE__*/_react["default"].createElement("hr", {
+          style: {
+            borderStyle: 'dashed'
+          }
+        }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Electronic Signature"), " at ", (_this$props$value2 = this.props.value) !== null && _this$props$value2 !== void 0 && _this$props$value2.date ? (0, _momentTimezone["default"])((_this$props$value3 = this.props.value) === null || _this$props$value3 === void 0 ? void 0 : _this$props$value3.date).format('dddd  MMMM D, YYYY hh:mm A') : (0, _momentTimezone["default"])().format('dddd  MMMM D, YYYY hh:mm A'), " by ", (_this$props$value4 = this.props.value) === null || _this$props$value4 === void 0 ? void 0 : _this$props$value4.name, " via IP Address ", (_this$props$value5 = this.props.value) === null || _this$props$value5 === void 0 ? void 0 : _this$props$value5.ipAddress), /*#__PURE__*/_react["default"].createElement("hr", null))));
+      }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.readOnly === true || !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("img", {
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        htmlFor: this.props.name
+      })), this.props.readOnly === true ? !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image, {
         src: sourceDataURL
-      }) : /*#__PURE__*/_react["default"].createElement("div", {
+      }), /*#__PURE__*/_react["default"].createElement("hr", {
+        style: {
+          borderStyle: 'dashed'
+        }
+      }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Electronic Signature"), " at ", (_this$props$value6 = this.props.value) !== null && _this$props$value6 !== void 0 && _this$props$value6.date ? (0, _momentTimezone["default"])((_this$props$value7 = this.props.value) === null || _this$props$value7 === void 0 ? void 0 : _this$props$value7.date).format('dddd  MMMM D, YYYY hh:mm A') : (0, _momentTimezone["default"])().format('dddd  MMMM D, YYYY hh:mm A'), " by ", (_this$props$value8 = this.props.value) === null || _this$props$value8 === void 0 ? void 0 : _this$props$value8.name, " via IP Address ", (_this$props$value9 = this.props.value) === null || _this$props$value9 === void 0 ? void 0 : _this$props$value9.ipAddress), /*#__PURE__*/_react["default"].createElement("hr", null)) : null : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "m-signature-pad"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "m-signature-pad--body"
@@ -872,168 +985,45 @@ var Signature = /*#__PURE__*/function (_React$Component12) {
         className: "clear-signature float-end",
         onClick: this.clear,
         title: "Clear Signature"
-      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " clear"))), this.props.methods ? /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, this.props.methods.register(props.name), props)) : /*#__PURE__*/_react["default"].createElement("input", props)));
-    }
-  }]);
-  return Signature;
-}(_react["default"].Component);
-var Tags2 = /*#__PURE__*/function (_React$Component13) {
-  (0, _inherits2["default"])(Tags2, _React$Component13);
-  var _super13 = _createSuper(Tags2);
-  function Tags2(props) {
-    var _this17;
-    (0, _classCallCheck2["default"])(this, Tags2);
-    _this17 = _super13.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this17), "handleChange", function (e) {
-      _this17.setState({
-        value: e.map(function (i) {
-          return i.value;
-        }).join(',') || null
-      });
-      if (_this17.props.onChange) {
-        _this17.props.onChange(e ? e.map(function (i) {
-          return i.value;
-        }).join(',') : null);
-      }
-    });
-    _this17.inputField = /*#__PURE__*/_react["default"].createRef();
-    var defaultValue = props.defaultValue,
-      data = props.data;
-    if (props.value) {
-      _this17.state = {
-        value: props.value
-      };
-    } else {
-      _this17.state = {
-        value: defaultValue
-      };
-    }
-    return _this17;
-  }
-  (0, _createClass2["default"])(Tags2, [{
-    key: "getDefaultValue",
-    value: function getDefaultValue(defaultValue, options) {
-      if (defaultValue) {
-        if (typeof defaultValue === 'string') {
-          var vals = defaultValue.split(',').map(function (x) {
-            return x.trim();
-          });
-          return options.filter(function (x) {
-            return vals.indexOf(x.value) > -1;
-          });
-        }
-        return options.filter(function (x) {
-          return defaultValue.indexOf(x.value) > -1;
-        });
-      }
-      return [];
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var options = this.props.data.options.map(function (option) {
-        option.label = option.text;
-        return option;
-      });
-      var props = {};
-      props.isMulti = true;
-      props.name = this.props.data.fieldName;
-      props.onChange = this.handleChange;
-
-      //if (this.props.isInvalid) { props.isInvalid = this.props.isInvalid; }
-      //if (this.props.onBlur) { props.onBlur = this.props.onBlur; }
-
-      props.options = options;
-      if (!this.props.mutable) {
-        props.value = options[0].text;
-      } // to show a sample of what tags looks like
-      if (this.props.mutable) {
-        props.isDisabled = this.props.readOnly;
-        props.value = this.getDefaultValue(this.state.value, options);
-        props.ref = this.inputField;
-      }
-      var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
-        baseClasses += ' alwaysbreak';
-      }
-      var labelLocation = 'ABOVE';
-      if (this.props.data.labelLocation) {
-        labelLocation = this.props.data.labelLocation;
-      }
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        style: _objectSpread({}, this.props.style),
-        className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
-        className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-        name: props.name,
-        htmlFor: props.name
-      })), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], (0, _extends2["default"])({
-        id: props.name
-      }, props)), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " clear"))), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, "Please print your full legal name and today's date."), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Container, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        sm: 6
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+        value: (_this$props$value$nam = (_this$props$value10 = this.props.value) === null || _this$props$value10 === void 0 ? void 0 : _this$props$value10.name) !== null && _this$props$value$nam !== void 0 ? _this$props$value$nam : '',
+        type: "text",
+        required: true,
+        placeholder: "Full Legal Name",
+        onChange: this.onChangeName
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        sm: 6
+      }, "Today's Date: ", (0, _momentTimezone["default"])().format('MM/DD/YYYY'))))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
-      }, this.props.data.help) : null));
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: this.props.name
+      }), this.props.methods ? /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, this.props.methods.register(this.props.name), props, {
+        type: "hidden"
+      })) : /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, props, {
+        type: "hidden"
+      }))));
     }
   }]);
-  return Tags2;
+  return Signature;
 }(_react["default"].Component);
 var Tags = /*#__PURE__*/function (_React$Component14) {
   (0, _inherits2["default"])(Tags, _React$Component14);
   var _super14 = _createSuper(Tags);
   function Tags(props) {
-    var _this18;
+    var _this17;
     (0, _classCallCheck2["default"])(this, Tags);
-    _this18 = _super14.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this18), "handleChange", function (selected) {
-      if (selected !== undefined && selected !== null && selected.length > 0) {
-        _this18.setState({
-          value: selected.map(function (i) {
-            return i.id;
-          }).join(',')
-        });
-        if (_this18.props.onChange) {
-          _this18.props.onChange(selected.map(function (i) {
-            return i.id;
-          }).join(','));
-        }
-      } else {
-        _this18.setState({
-          value: []
-        });
-        if (_this18.props.onChange) {
-          _this18.props.onChange([]);
-        }
-      }
-    });
-    _this18.inputField = /*#__PURE__*/_react["default"].createRef();
-    var defaultValue = props.defaultValue,
-      data = props.data;
-    if (props.value) {
-      _this18.state = {
-        value: props.value
-      };
-    } else {
-      _this18.state = {
-        value: defaultValue
-      };
-    }
-    return _this18;
+    _this17 = _super14.call(this, props);
+    _this17.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this17;
   }
   (0, _createClass2["default"])(Tags, [{
     key: "getDefaultValue",
-    value: function getDefaultValue(defaultValue, options) {
-      console.log(defaultValue);
-      if (defaultValue) {
-        if (typeof defaultValue === 'string') {
-          var vals = defaultValue.split(',').map(function (x) {
-            return x.trim();
-          });
-          return options.filter(function (x) {
-            return vals.indexOf(x.value) > -1;
-          });
-        }
-        return options.filter(function (x) {
-          return defaultValue.indexOf(x.value) > -1;
+    value: function getDefaultValue(val, options) {
+      if (val) {
+        return options.filter(function (option) {
+          return val.indexOf(option.value) > -1;
         });
       }
       return [];
@@ -1041,36 +1031,55 @@ var Tags = /*#__PURE__*/function (_React$Component14) {
   }, {
     key: "render",
     value: function render() {
-      var options = this.props.data.options.map(function (option) {
-        option.label = option.text;
-        option.id = option.value;
-        return option;
+      var _this18 = this;
+      var options = this.props.item.options.map(function (option) {
+        return {
+          value: option.value,
+          label: option.text,
+          key: option.value
+        };
       });
       var props = {};
-      props.multiple = true;
-      props.name = this.props.data.fieldName;
-      props.onChange = this.handleChange;
-      props.placeholder = this.props.data.placeholder || 'Select...';
-      props.required = this.props.data.required;
-      if (this.props.isInvalid) {
-        props.isInvalid = this.props.isInvalid;
-      }
-      if (this.props.onBlur) {
-        props.onBlur = this.props.onBlur;
+      props.name = this.props.name;
+      props.placeholder = this.props.item.placeholder || 'Select...';
+      props.onChange = function (val) {
+        _this18.props.onChange(val !== undefined && val !== null && val.length > 0 ? val.map(function (i) {
+          return i.value;
+        }) : []);
+      };
+      props.isInvalid = this.props.isInvalid;
+      props.onBlur = this.props.onBlur;
+      props.autoComplete = "new-password";
+      if (this.props.item.disabled) {
+        props.disabled = 'disabled';
       }
-      props.options = options;
-      if (this.props.mutable) {
-        props.disabled = this.props.readOnly;
-        props.selected = this.getDefaultValue(this.state.value, options);
+      if (this.props.item.mutable) {
         props.ref = this.inputField;
       }
+      props.multiple = true;
+      props.selected = this.getDefaultValue(this.props.value, options);
+      props.options = options;
+      // props.required = this.props.item.required;
+
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
       var labelLocation = 'ABOVE';
-      if (this.props.data.labelLocation) {
-        labelLocation = this.props.data.labelLocation;
+      if (this.props.item.labelLocation) {
+        labelLocation = this.props.item.labelLocation;
+      }
+      if (this.props.item.print === true) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+          className: "form-group mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+          htmlFor: props.name
+        })), /*#__PURE__*/_react["default"].createElement("div", null, props.selected.map(function (selectedOption) {
+          return selectedOption.label;
+        }).join(', '))));
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
@@ -1083,19 +1092,19 @@ var Tags = /*#__PURE__*/function (_React$Component14) {
         },
         id: props.name
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-        name: props.name,
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-        name: props.name,
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrapTypeahead.Typeahead, (0, _extends2["default"])({
         labelKey: function labelKey(option) {
           return option.label;
         },
         id: props.name
-      }, props))), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
-      }, this.props.data.help) : null));
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: props.name
+      })));
     }
   }]);
   return Tags;
@@ -1108,18 +1117,18 @@ var Checkboxes = /*#__PURE__*/function (_React$Component15) {
     (0, _classCallCheck2["default"])(this, Checkboxes);
     _this19 = _super15.call(this, props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this19), "onCheckboxChange", function (checkboxValue, event) {
+      var checkedValues = _this19.props.value;
       if (_this19.props.onChange) {
         if (event.target.checked) {
-          _this19.props.onChange(_this19.checkedValues.concat(checkboxValue));
+          _this19.props.onChange(checkedValues.concat(checkboxValue));
         } else {
-          _this19.props.onChange(_this19.checkedValues.filter(function (v) {
+          _this19.props.onChange(checkedValues.filter(function (v) {
             return v !== checkboxValue;
           }));
         }
       }
     });
     _this19.options = {};
-    _this19.checkedValues = [];
     return _this19;
   }
   (0, _createClass2["default"])(Checkboxes, [{
@@ -1128,41 +1137,47 @@ var Checkboxes = /*#__PURE__*/function (_React$Component15) {
       var _this20 = this;
       var self = this;
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
-      if (this.props.value) {
-        this.checkedValues = this.props.value;
+      if (this.props.item.print === true) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+          className: "form-group mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+          htmlFor: props.name
+        })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.item.options.filter(function (option) {
+          return _this20.props.value.includes(option.value);
+        }).map(function (option) {
+          return option.label;
+        }).join(', '))));
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.data.options.map(function (option) {
-        var thisKey = "preview_".concat(option.key);
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        htmlFor: this.props.name
+      })), this.props.item.options.map(function (option) {
+        var _self$props$item$inli;
         var props = {};
         props.name = "option_".concat(option.key);
-        if (self.props.data.inline) {
-          props.inline = true;
-        }
         props.value = option.value;
-        if (self.props.mutable) {
-          props.defaultChecked = self.props.defaultValue !== undefined && self.props.defaultValue.indexOf(option.key) > -1;
-        }
-        if (self.props.readOnly) {
+        props.checked = self.props.value ? self.props.value.indexOf(option.value) > -1 : false;
+        props.inline = (_self$props$item$inli = self.props.item.inline) !== null && _self$props$item$inli !== void 0 ? _self$props$item$inli : false;
+        if (self.props.item.disabled) {
           props.disabled = 'disabled';
         }
-        if (self.props.value) {
-          props.checked = _this20.props.value.indexOf(option.value) > -1;
-        }
         return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, (0, _extends2["default"])({
           label: option.text,
           type: "checkbox",
-          key: thisKey,
-          id: "fid_".concat(thisKey),
+          key: "preview_".concat(option.key),
+          id: "fid_preview_".concat(option.key),
           ref: function ref(c) {
-            if (c && self.props.mutable) {
+            if (c && self.props.item.mutable) {
               self.options["child_ref_".concat(option.key)] = c;
             }
           },
@@ -1170,6 +1185,10 @@ var Checkboxes = /*#__PURE__*/function (_React$Component15) {
             self.onCheckboxChange(option.value, e);
           }
         }, props));
+      }), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: this.props.name
       })));
     }
   }]);
@@ -1188,38 +1207,42 @@ var Checkbox = /*#__PURE__*/function (_React$Component16) {
   (0, _createClass2["default"])(Checkbox, [{
     key: "render",
     value: function render() {
-      var _this22 = this;
+      var _this22 = this,
+        _this$props$item$inli;
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
       var props = {};
       // eslint-disable-next-line no-undef
-      props.name = this.props.data.fieldName;
-      props.type = 'checkbox';
-      props.defaultChecked = this.props.data.defaultChecked;
-      if (this.props.mutable) {
-        props.ref = this.inputField;
-      }
-      if (this.props.onChange) {
-        props.onChange = function (e) {
-          _this22.props.onChange(e.target.checked);
-        };
-      }
-      if (this.props.value) {
-        props.checked = this.props.value;
-      }
-      if (this.props.isInvalid) {
-        props.isInvalid = this.props.isInvalid;
-      }
-      if (this.props.onBlur) {
-        props.onBlur = this.props.onBlur;
-      }
-      if (this.props.readOnly) {
+      props.name = this.props.name;
+      props.onChange = function (event) {
+        _this22.props.onChange(event.target.checked);
+      };
+      props.isInvalid = this.props.isInvalid;
+      props.onBlur = this.props.onBlur;
+      props.autoComplete = "new-password";
+      if (this.props.item.disabled) {
         props.disabled = 'disabled';
       }
-      if (this.props.data.inline) {
-        props.inline = true;
+      if (this.props.item.mutable) {
+        props.ref = this.inputField;
+      }
+      props.checked = this.props.value;
+      props.inline = (_this$props$item$inli = this.props.item.inline) !== null && _this$props$item$inli !== void 0 ? _this$props$item$inli : false;
+      if (this.props.item.print === true) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+          className: "form-group mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+          htmlFor: props.name
+        })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+          dangerouslySetInnerHTML: {
+            __html: this.props.item.boxLabel
+          }
+        }), ": ", this.props.value === true ? 'Yes' : 'No')));
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
@@ -1231,12 +1254,16 @@ var Checkbox = /*#__PURE__*/function (_React$Component16) {
       }, this.props)), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, (0, _extends2["default"])({
         label: /*#__PURE__*/_react["default"].createElement("span", {
           dangerouslySetInnerHTML: {
-            __html: this.props.data.boxLabel
+            __html: this.props.item.boxLabel
           }
         }),
         type: "checkbox",
-        id: this.props.data.fieldName
-      }, props))));
+        id: props.name
+      }, props)), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: props.name
+      })));
     }
   }]);
   return Checkbox;
@@ -1254,49 +1281,59 @@ var RadioButtons = /*#__PURE__*/function (_React$Component17) {
   (0, _createClass2["default"])(RadioButtons, [{
     key: "render",
     value: function render() {
+      var _this24 = this;
       var self = this;
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
+      if (this.props.item.print === true) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+          className: "form-group mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+          htmlFor: props.name
+        })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.item.options.filter(function (option) {
+          return _this24.props.value === option.value;
+        }).map(function (option) {
+          return option.label;
+        }).join(', '))));
+      }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.data.options.map(function (option) {
-        var thisKey = "preview_".concat(option.key);
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.item.options.map(function (option) {
+        var _self$props$item$inli2;
         var props = {};
-        props.name = self.props.data.fieldName;
+        props.name = self.props.name;
         props.value = option.value;
-        if (self.props.mutable) {
-          props.defaultChecked = self.props.defaultValue !== undefined && self.props.defaultValue.indexOf(option.value) > -1;
-        }
-        if (self.props.onChange) {
-          props.onChange = function (e) {
-            self.props.onChange(e.target.value);
-          };
-        }
-        if (self.props.value) {
-          props.checked = self.props.value === option.value;
-        }
-        if (self.props.readOnly) {
+        props.checked = self.props.value === option.value;
+        props.onChange = function (event) {
+          self.props.onChange(event.target.value);
+        };
+        if (self.props.item.disabled) {
           props.disabled = 'disabled';
         }
-        if (self.props.data.inline) {
-          props.inline = true;
-        }
+        props.inline = (_self$props$item$inli2 = self.props.item.inline) !== null && _self$props$item$inli2 !== void 0 ? _self$props$item$inli2 : false;
         return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, (0, _extends2["default"])({
           label: option.text,
           type: "radio",
-          key: thisKey,
-          id: "fid_".concat(thisKey),
+          key: "preview_".concat(option.key),
+          id: "fid_preview_".concat(option.key),
           ref: function ref(c) {
-            if (c && self.props.mutable) {
+            if (c && self.props.item.mutable) {
               self.options["child_ref_".concat(option.key)] = c;
             }
           }
         }, props));
+      }), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: this.props.name
       })));
     }
   }]);
@@ -1312,21 +1349,21 @@ var Image = /*#__PURE__*/function (_React$Component18) {
   (0, _createClass2["default"])(Image, [{
     key: "render",
     value: function render() {
-      var style = this.props.data.center ? {
+      var style = this.props.item.center ? {
         textAlign: 'center'
       } : null;
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread(_objectSpread({}, this.props.style), style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), this.props.data.src && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image, {
-        src: this.props.data.src,
-        width: this.props.data.width,
-        height: this.props.data.height
-      }), !this.props.data.src && /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), this.props.item.src && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image, {
+        src: this.props.item.src,
+        width: this.props.item.width,
+        height: this.props.item.height
+      }), !this.props.item.src && /*#__PURE__*/_react["default"].createElement("div", {
         className: "no-image"
       }, "No Image"));
     }
@@ -1337,47 +1374,58 @@ var Rating = /*#__PURE__*/function (_React$Component19) {
   (0, _inherits2["default"])(Rating, _React$Component19);
   var _super19 = _createSuper(Rating);
   function Rating(props) {
-    var _this24;
+    var _this25;
     (0, _classCallCheck2["default"])(this, Rating);
-    _this24 = _super19.call(this, props);
-    _this24.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this24;
+    _this25 = _super19.call(this, props);
+    _this25.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this25;
   }
   (0, _createClass2["default"])(Rating, [{
     key: "render",
     value: function render() {
-      var _this25 = this;
+      var _this26 = this;
       var props = {};
-      props.name = this.props.data.fieldName;
+      props.name = this.props.name;
       props.ratingAmount = 5;
-      if (this.props.mutable) {
-        props.rating = this.props.defaultValue !== undefined ? parseFloat(this.props.defaultValue, 10) : 0;
+      props.rating = this.props.value !== undefined && this.props.value !== null && this.props.value !== '' ? parseFloat(this.props.value, 10) : 0;
+      props.disabled = this.props.item.readOnly;
+      if (this.props.item.disabled) {
+        props.disabled = true;
+      }
+      props.onRatingClick = function (event, _ref4) {
+        var rating = _ref4.rating;
+        _this26.props.onChange(rating);
+      };
+      if (this.props.item.mutable) {
         props.editing = true;
-        props.disabled = this.props.readOnly;
         props.ref = this.inputField;
       }
-      if (this.props.onChange) {
-        props.onRatingClick = function (e, _ref3) {
-          var rating = _ref3.rating;
-          _this25.props.onChange(rating);
-        };
-      }
-      if (this.props.value) {
-        props.rating = this.props.value;
-      }
-      if (this.props.readOnly) {
-        props.disabled = true;
-      }
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
+      if (this.props.item.print === true) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+          className: "form-group mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+          htmlFor: props.name
+        })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.value)));
+      }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_starRating["default"], props)));
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        htmlFor: props.name
+      })), /*#__PURE__*/_react["default"].createElement(_starRating["default"], props), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: props.name
+      })));
     }
   }]);
   return Rating;
@@ -1393,7 +1441,7 @@ var HyperLink = /*#__PURE__*/function (_React$Component20) {
     key: "render",
     value: function render() {
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -1403,9 +1451,9 @@ var HyperLink = /*#__PURE__*/function (_React$Component20) {
         className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, /*#__PURE__*/_react["default"].createElement("a", {
         target: "_blank",
-        href: this.props.data.href,
+        href: this.props.item.href,
         dangerouslySetInnerHTML: {
-          __html: _myxss["default"].process(this.props.data.content)
+          __html: _myxss["default"].process(this.props.item.content)
         }
       }))));
     }
@@ -1423,7 +1471,7 @@ var Download = /*#__PURE__*/function (_React$Component21) {
     key: "render",
     value: function render() {
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -1432,8 +1480,8 @@ var Download = /*#__PURE__*/function (_React$Component21) {
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement("a", {
-        href: "".concat(this.props.downloadPath, "?id=").concat(this.props.data.filePath)
-      }, this.props.data.content)));
+        href: "".concat(this.props.downloadPath, "?id=").concat(this.props.item.filePath)
+      }, this.props.item.content)));
     }
   }]);
   return Download;
@@ -1442,42 +1490,38 @@ var Camera = /*#__PURE__*/function (_React$Component22) {
   (0, _inherits2["default"])(Camera, _React$Component22);
   var _super22 = _createSuper(Camera);
   function Camera(props) {
-    var _this26;
+    var _this27;
     (0, _classCallCheck2["default"])(this, Camera);
-    _this26 = _super22.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this26), "displayImage", function (e) {
-      var self = (0, _assertThisInitialized2["default"])(_this26);
-      var target = e.target;
-      if (target.files && target.files.length) {
-        self.setState({
-          img: target.files[0],
-          previewImg: URL.createObjectURL(target.files[0])
+    _this27 = _super22.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this27), "handleChange", function (event) {
+      if (event.target.files && event.target.files.length > 0) {
+        _this27.setState({
+          img: event.target.files[0]
         });
-        if (_this26.props.onChange) {
-          _this26.props.onChange(target.files[0]);
+        if (_this27.props.onChange) {
+          _this27.props.onChange(event.target.files[0]);
         }
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this26), "clearImage", function (e) {
-      _this26.setState({
-        img: null,
-        previewImg: null
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this27), "clearImage", function () {
+      _this27.setState({
+        img: null
       });
-      if (_this26.props.onChange) {
-        _this26.props.onChange(null);
+      if (_this27.props.onChange) {
+        _this27.props.onChange(null);
       }
     });
-    _this26.state = {
-      img: null,
-      previewImg: null
+    _this27.inputField = /*#__PURE__*/_react["default"].createRef();
+    _this27.state = {
+      img: props.value
     };
-    return _this26;
+    return _this27;
   }
   (0, _createClass2["default"])(Camera, [{
     key: "getImageSizeProps",
-    value: function getImageSizeProps(_ref4) {
-      var width = _ref4.width,
-        height = _ref4.height;
+    value: function getImageSizeProps(_ref5) {
+      var width = _ref5.width,
+        height = _ref5.height;
       var imgProps = {
         width: '100%'
       };
@@ -1492,66 +1536,79 @@ var Camera = /*#__PURE__*/function (_React$Component22) {
   }, {
     key: "render",
     value: function render() {
-      var _this27 = this;
       var imageStyle = {
         objectFit: 'scale-down',
-        objectPosition: this.props.data.center ? 'center' : 'left'
+        objectPosition: this.props.item.center ? 'center' : 'left'
       };
-      var baseClasses = 'SortableItem rfb-item';
-      var name = this.props.data.fieldName;
       var fileInputStyle = this.state.img ? {
         display: 'none'
       } : null;
-      if (this.props.data.pageBreakBefore) {
+      var props = {};
+      props.name = this.props.name;
+      props.placeholder = this.props.item.placeholder || 'Select an image from your computer or device.';
+      props.onChange = this.handleChange;
+      props.onClick = function (event) {
+        event.target.value = null;
+      };
+      props.isInvalid = this.props.isInvalid;
+      props.onBlur = this.props.onBlur;
+      if (this.props.item.disabled) {
+        props.disabled = 'disabled';
+      }
+      if (this.props.item.mutable) {
+        props.ref = this.inputField;
+      }
+      var baseClasses = 'SortableItem rfb-item';
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
       var sourceDataURL;
-      if (this.props.readOnly === true && this.props.defaultValue && this.props.defaultValue.length > 0) {
-        if (this.props.defaultValue.indexOf(name > -1)) {
-          sourceDataURL = this.props.defaultValue;
+      if (this.props.item.readOnly === true && this.props.value && this.props.value.length > 0) {
+        console.log(this.props.value);
+        if (this.props.value.indexOf(this.props.name > -1)) {
+          sourceDataURL = this.props.value;
         } else {
-          sourceDataURL = "data:image/png;base64,".concat(this.props.defaultValue);
+          sourceDataURL = "data:image/png;base64,".concat(this.props.value);
         }
       }
-      if (this.props.value) {
-        sourceDataURL = 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(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.readOnly === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image, (0, _extends2["default"])({
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.item.readOnly === true && this.props.value && this.props.value.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image, (0, _extends2["default"])({
         style: imageStyle,
         src: sourceDataURL
-      }, this.getImageSizeProps(this.props.data)))) : /*#__PURE__*/_react["default"].createElement("div", {
+      }, this.getImageSizeProps(this.props.item)))) : /*#__PURE__*/_react["default"].createElement("div", {
         className: "image-upload-container"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: fileInputStyle
-      }, /*#__PURE__*/_react["default"].createElement("input", {
-        name: name,
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         type: "file",
         accept: "image/*",
         capture: "camera",
-        className: "image-upload",
-        onChange: this.displayImage
-      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "image-upload"
+      }, props)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "image-upload-control"
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
         variant: "light"
-      }, /*#__PURE__*/_react["default"].createElement(_fa.FaCamera, null), " Upload Photo"), /*#__PURE__*/_react["default"].createElement("p", null, "Select an image from your computer or device."))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image, {
-        onLoad: function onLoad() {
-          return URL.revokeObjectURL(_this27.state.previewImg);
-        },
-        src: this.state.previewImg,
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaCamera, null), " Upload Photo"), /*#__PURE__*/_react["default"].createElement("span", null, "Select an image from your computer or device."))), this.props.value && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "clearfix"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image
+      // onLoad={() => URL.revokeObjectURL(this.state.previewImg)}
+      , {
+        src: URL.createObjectURL(this.props.value),
         height: "100",
         className: "image-upload-preview"
-      }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
         variant: "default",
         size: "sm",
-        className: "btn-image-clear",
         onClick: this.clearImage
-      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " Clear Photo")))));
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " Clear Photo"))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: this.props.name
+      })));
     }
   }]);
   return Camera;
@@ -1563,17 +1620,13 @@ var FileUpload = /*#__PURE__*/function (_React$Component23) {
     var _this28;
     (0, _classCallCheck2["default"])(this, FileUpload);
     _this28 = _super23.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this28), "displayFileUpload", function (e) {
-      var self = (0, _assertThisInitialized2["default"])(_this28);
-      var target = e.target;
-      var file;
-      if (target.files && target.files.length > 0) {
-        file = target.files[0];
-        self.setState({
-          fileUpload: file
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this28), "handleChange", function (event) {
+      if (event.target.files && event.target.files.length > 0) {
+        _this28.setState({
+          fileUpload: event.target.files[0]
         });
         if (_this28.props.onChange) {
-          _this28.props.onChange(file);
+          _this28.props.onChange(event.target.files[0]);
         }
       }
     });
@@ -1586,14 +1639,14 @@ var FileUpload = /*#__PURE__*/function (_React$Component23) {
       }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this28), "saveFile", /*#__PURE__*/function () {
-      var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
+      var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(e) {
         var sourceUrl, response, dispositionHeader, resBlob, blob, fileName, _fileName;
-        return _regenerator["default"].wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
               e.preventDefault();
-              sourceUrl = _this28.props.defaultValue;
-              _context.next = 4;
+              sourceUrl = _this28.props.value;
+              _context2.next = 4;
               return (0, _isomorphicFetch["default"])(sourceUrl, {
                 method: 'GET',
                 headers: {
@@ -1603,15 +1656,15 @@ var FileUpload = /*#__PURE__*/function (_React$Component23) {
                 responseType: 'blob'
               });
             case 4:
-              response = _context.sent;
+              response = _context2.sent;
               dispositionHeader = response.headers.get('Content-Disposition');
-              _context.next = 8;
+              _context2.next = 8;
               return response.blob();
             case 8:
-              resBlob = _context.sent;
+              resBlob = _context2.sent;
               // eslint-disable-next-line no-undef
               blob = new Blob([resBlob], {
-                type: _this28.props.data.fileType || response.headers.get('Content-Type')
+                type: _this28.props.item.fileType || response.headers.get('Content-Type')
               });
               if (dispositionHeader && dispositionHeader.indexOf(';filename=') > -1) {
                 fileName = dispositionHeader.split(';filename=')[1];
@@ -1622,28 +1675,43 @@ var FileUpload = /*#__PURE__*/function (_React$Component23) {
               }
             case 11:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee);
+        }, _callee2);
       }));
       return function (_x) {
-        return _ref5.apply(this, arguments);
+        return _ref6.apply(this, arguments);
       };
     }());
+    _this28.inputField = /*#__PURE__*/_react["default"].createRef();
     _this28.state = {
-      fileUpload: null
+      fileUpload: props.value
     };
     return _this28;
   }
   (0, _createClass2["default"])(FileUpload, [{
     key: "render",
     value: function render() {
-      var baseClasses = 'SortableItem rfb-item';
-      var name = this.props.data.fieldName;
       var fileInputStyle = this.state.fileUpload ? {
         display: 'none'
       } : null;
-      if (this.props.data.pageBreakBefore) {
+      var props = {};
+      props.name = this.props.name;
+      props.placeholder = this.props.item.placeholder || 'Select a file from your computer or device.';
+      props.onChange = this.handleChange;
+      props.onClick = function (event) {
+        event.target.value = null;
+      };
+      props.isInvalid = this.props.isInvalid;
+      props.onBlur = this.props.onBlur;
+      if (this.props.item.disabled) {
+        props.disabled = 'disabled';
+      }
+      if (this.props.item.mutable) {
+        props.ref = this.inputField;
+      }
+      var baseClasses = 'SortableItem rfb-item';
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -1651,24 +1719,24 @@ var FileUpload = /*#__PURE__*/function (_React$Component23) {
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.readOnly === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.item.readOnly === true && this.props.value && this.props.value.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
         variant: "default",
         onClick: this.saveFile
       }, /*#__PURE__*/_react["default"].createElement(_fa.FaDownload, null), " Download File")) : /*#__PURE__*/_react["default"].createElement("div", {
         className: "image-upload-container"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: fileInputStyle
-      }, /*#__PURE__*/_react["default"].createElement("input", {
-        name: name,
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         type: "file",
-        accept: this.props.data.fileType || '*',
-        className: "image-upload",
-        onChange: this.displayFileUpload
-      }), /*#__PURE__*/_react["default"].createElement("div", {
+        accept: this.props.item.fileType || '*',
+        className: "image-upload"
+      }, props)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "image-upload-control"
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
         variant: "light"
-      }, /*#__PURE__*/_react["default"].createElement(_fa.FaFile, null), " Upload File"), /*#__PURE__*/_react["default"].createElement("p", null, "Select a file from your computer or device."))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaFile, null), " Upload File"), /*#__PURE__*/_react["default"].createElement("span", null, "Select a file from your computer or device."))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "clearfix"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "file-upload-preview"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
@@ -1680,12 +1748,16 @@ var FileUpload = /*#__PURE__*/function (_React$Component23) {
           display: 'inline-block',
           marginLeft: '5px'
         }
-      }, this.state.fileUpload.size.length > 6 ? "Size:  ".concat(Math.ceil(this.state.fileUpload.size / (1024 * 1024)), " mb") : "Size:  ".concat(Math.ceil(this.state.fileUpload.size / 1024), " kb"))), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+      }, this.state.fileUpload.size.length > 6 ? "Size:  ".concat(Math.ceil(this.state.fileUpload.size / (1024 * 1024)), " mb") : "Size:  ".concat(Math.ceil(this.state.fileUpload.size / 1024), " kb")))), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
         variant: "default",
         size: "sm",
         className: "btn-file-upload-clear",
         onClick: this.clearFileUpload
-      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " Clear File")))));
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " Clear File"))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: this.props.name
+      })));
     }
   }]);
   return FileUpload;
@@ -1697,36 +1769,31 @@ var Range = /*#__PURE__*/function (_React$Component24) {
     var _this29;
     (0, _classCallCheck2["default"])(this, Range);
     _this29 = _super24.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this29), "changeValue", function (e) {
-      var target = e.target;
-      _this29.setState({
-        value: target.value
-      });
-      if (_this29.props.onChange) {
-        _this29.props.onChange(target.value);
-      }
-    });
     _this29.inputField = /*#__PURE__*/_react["default"].createRef();
-    _this29.state = {
-      value: props.defaultValue !== undefined ? parseInt(props.defaultValue, 10) : parseInt(props.data.defaultValue, 10)
-    };
     return _this29;
   }
   (0, _createClass2["default"])(Range, [{
     key: "render",
     value: function render() {
+      var _this30 = this;
       var props = {};
-      var name = this.props.data.fieldName;
-      props.type = 'range';
-      props.list = "tickmarks_".concat(name);
-      props.min = this.props.data.minValue;
-      props.max = this.props.data.maxValue;
-      props.step = this.props.data.step;
-      props.value = this.state.value;
-      props.onChange = this.changeValue;
-      if (this.props.mutable) {
+      var name = this.props.name;
+      props.name = this.props.name;
+      props.value = this.props.value;
+      props.onChange = function (event) {
+        _this30.props.onChange(event.target.value);
+      };
+      if (this.props.item.disabled) {
+        props.disabled = true;
+      }
+      if (this.props.item.mutable) {
         props.ref = this.inputField;
       }
+      props.type = 'range';
+      props.list = "tickmarks_".concat(name);
+      props.min = this.props.item.minValue;
+      props.max = this.props.item.maxValue;
+      props.step = this.props.item.step;
       var datalist = [];
       for (var i = parseInt(props.min, 10); i <= parseInt(props.max, 10); i += parseInt(props.step, 10)) {
         datalist.push(i);
@@ -1737,59 +1804,69 @@ var Range = /*#__PURE__*/function (_React$Component24) {
           key: "".concat(props.list, "_").concat(idx)
         }, d);
       });
-      var visible_marks = datalist.map(function (d, idx) {
-        var option_props = {};
+      var visibleMarks = datalist.map(function (d, idx) {
+        var optionProps = {};
         var w = oneBig;
         if (idx === 0 || idx === datalist.length - 1) {
           w = oneBig / 2;
         }
-        option_props.key = "".concat(props.list, "_label_").concat(idx);
-        option_props.style = {
+        optionProps.key = "".concat(props.list, "_label_").concat(idx);
+        optionProps.style = {
           width: "".concat(w, "%")
         };
         if (idx === datalist.length - 1) {
-          option_props.style = {
+          optionProps.style = {
             width: "".concat(w, "%"),
             textAlign: 'right'
           };
         }
-        return /*#__PURE__*/_react["default"].createElement("label", option_props, d);
+        return /*#__PURE__*/_react["default"].createElement("label", optionProps, d);
       });
-      if (this.props.readOnly) {
-        props.disabled = 'disabled';
-      }
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
+      if (this.props.item.print === true) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+          className: "form-group mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+          htmlFor: 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(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        htmlFor: name
+      })), /*#__PURE__*/_react["default"].createElement("div", {
         className: "range"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "clearfix"
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: "float-start"
-      }, this.props.data.minLabel), /*#__PURE__*/_react["default"].createElement("span", {
+      }, this.props.item.minLabel), /*#__PURE__*/_react["default"].createElement("span", {
         className: "float-end"
-      }, this.props.data.maxLabel)), /*#__PURE__*/_react["default"].createElement(_reactBootstrapRangeSlider["default"], props)), /*#__PURE__*/_react["default"].createElement("div", {
+      }, this.props.item.maxLabel)), /*#__PURE__*/_react["default"].createElement(_reactBootstrapRangeSlider["default"], props)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "visible_marks"
-      }, visible_marks), /*#__PURE__*/_react["default"].createElement("input", {
-        name: name,
-        value: this.state.value,
-        type: "hidden"
-      }), /*#__PURE__*/_react["default"].createElement("datalist", {
+      }, visibleMarks), /*#__PURE__*/_react["default"].createElement("datalist", {
         id: props.list
-      }, _datalist)));
+      }, _datalist), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: name
+      })));
     }
   }]);
   return Range;
 }(_react["default"].Component);
 SurveyElements.Header = Header;
 SurveyElements.Paragraph = Paragraph;
+SurveyElements.ContentBody = ContentBody;
 SurveyElements.Label = Label;
 SurveyElements.LineBreak = LineBreak;
 SurveyElements.TextInput = TextInput;