react-survey-builder 1.0.17 → 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
 });
@@ -24,7 +25,7 @@ var _reactBootstrapRangeSlider = _interopRequireDefault(require("react-bootstrap
 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");
@@ -34,6 +35,8 @@ 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); }; }
@@ -165,12 +168,40 @@ var Header = /*#__PURE__*/function (_React$Component) {
   }]);
   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",
@@ -199,12 +230,12 @@ var Paragraph = /*#__PURE__*/function (_React$Component2) {
   }]);
   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",
@@ -233,12 +264,12 @@ var Label = /*#__PURE__*/function (_React$Component3) {
   }]);
   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",
@@ -255,13 +286,13 @@ 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;
   }
@@ -327,13 +358,13 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
   }]);
   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;
   }
@@ -366,7 +397,6 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
         baseClasses += ' alwaysbreak';
       }
       if (this.props.item.print === true) {
-        var _this$props$value;
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
@@ -374,7 +404,7 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
           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 = this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : this.props.defaultValue)));
+        })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.value)));
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
@@ -400,13 +430,13 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
   }]);
   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;
   }
@@ -439,7 +469,6 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
         baseClasses += ' alwaysbreak';
       }
       if (this.props.item.print === true) {
-        var _this$props$value2;
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
@@ -447,7 +476,7 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
           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$value2 = this.props.value) !== null && _this$props$value2 !== void 0 ? _this$props$value2 : this.props.defaultValue)));
+        })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.value)));
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
@@ -477,13 +506,13 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
   }]);
   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;
   }
@@ -517,7 +546,6 @@ var DatePicker = /*#__PURE__*/function (_React$Component8) {
         baseClasses += ' alwaysbreak';
       }
       if (this.props.item.print === true) {
-        var _this$props$value3;
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
@@ -525,7 +553,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component8) {
           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$value3 = this.props.value) !== null && _this$props$value3 !== void 0 ? _this$props$value3 : this.props.defaultValue)));
+        })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.value)));
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
@@ -555,13 +583,13 @@ var DatePicker = /*#__PURE__*/function (_React$Component8) {
   }]);
   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;
   }
@@ -597,7 +625,6 @@ var NumberInput = /*#__PURE__*/function (_React$Component9) {
         baseClasses += ' alwaysbreak';
       }
       if (this.props.item.print === true) {
-        var _this$props$value4;
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
@@ -605,7 +632,7 @@ var NumberInput = /*#__PURE__*/function (_React$Component9) {
           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$value4 = this.props.value) !== null && _this$props$value4 !== void 0 ? _this$props$value4 : this.props.defaultValue)));
+        })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.value)));
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
@@ -631,13 +658,13 @@ var NumberInput = /*#__PURE__*/function (_React$Component9) {
   }]);
   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;
   }
@@ -670,7 +697,6 @@ var TextArea = /*#__PURE__*/function (_React$Component10) {
         baseClasses += ' alwaysbreak';
       }
       if (this.props.item.print === true) {
-        var _this$props$value5;
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
           className: baseClasses
@@ -678,7 +704,7 @@ var TextArea = /*#__PURE__*/function (_React$Component10) {
           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$value5 = this.props.value) !== null && _this$props$value5 !== void 0 ? _this$props$value5 : this.props.defaultValue)));
+        })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.value)));
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
@@ -704,13 +730,13 @@ var TextArea = /*#__PURE__*/function (_React$Component10) {
   }]);
   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;
   }
@@ -752,8 +778,7 @@ var Dropdown = /*#__PURE__*/function (_React$Component11) {
         }, /*#__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) {
-          var _this14$props$value;
-          return selectedOption.value === ((_this14$props$value = _this14.props.value) !== null && _this14$props$value !== void 0 ? _this14$props$value : _this14.props.defaultValue);
+          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", {
@@ -794,13 +819,13 @@ var Dropdown = /*#__PURE__*/function (_React$Component11) {
   }]);
   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 () {
       var $canvas_sig = _this15.canvas.current;
       if (_this15.props.value) {
@@ -881,13 +906,13 @@ var Signature = /*#__PURE__*/function (_React$Component12) {
     value: function render() {
       var _this$state$value,
         _this$state$value2,
-        _this$props$value11,
-        _this$props$value12,
-        _this$props$value13,
-        _this$props$value14,
+        _this$props$value6,
+        _this$props$value7,
+        _this$props$value8,
+        _this$props$value9,
         _this16 = this,
         _this$props$value$nam,
-        _this$props$value15;
+        _this$props$value10;
       var canClear = !!this.state.value;
       var props = {};
       props.name = this.props.name;
@@ -899,10 +924,9 @@ var Signature = /*#__PURE__*/function (_React$Component12) {
       var padProps = {};
       // umd requires canvasProps={{ width: 400, height: 150 }}
       if (this.props.item.mutable) {
-        var _this$props$value6;
-        padProps.defaultValue = (_this$props$value6 = this.props.value) === null || _this$props$value6 === void 0 ? void 0 : _this$props$value6.signature;
+        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;
-        padProps.willReadFrequently = true;
         canClear = !this.props.item.readOnly;
       }
       var baseClasses = 'SortableItem rfb-item';
@@ -916,7 +940,7 @@ var Signature = /*#__PURE__*/function (_React$Component12) {
       }
       padProps.canvasProps = {};
       if (this.props.item.print === true && !!sourceDataURL) {
-        var _this$props$value7, _this$props$value8, _this$props$value9, _this$props$value10;
+        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
@@ -930,7 +954,7 @@ var Signature = /*#__PURE__*/function (_React$Component12) {
           style: {
             borderStyle: 'dashed'
           }
-        }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Electronic Signature"), " at ", (_this$props$value7 = this.props.value) !== null && _this$props$value7 !== void 0 && _this$props$value7.date ? (0, _momentTimezone["default"])((_this$props$value8 = this.props.value) === null || _this$props$value8 === void 0 ? void 0 : _this$props$value8.date).format('dddd  MMMM D, YYYY hh:mm A') : (0, _momentTimezone["default"])().format('dddd  MMMM D, YYYY hh:mm A'), " by ", (_this$props$value9 = this.props.value) === null || _this$props$value9 === void 0 ? void 0 : _this$props$value9.name, " via IP Address ", (_this$props$value10 = this.props.value) === null || _this$props$value10 === void 0 ? void 0 : _this$props$value10.ipAddress), /*#__PURE__*/_react["default"].createElement("hr", null))));
+        }), /*#__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),
@@ -945,7 +969,7 @@ var Signature = /*#__PURE__*/function (_React$Component12) {
         style: {
           borderStyle: 'dashed'
         }
-      }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Electronic Signature"), " at ", (_this$props$value11 = this.props.value) !== null && _this$props$value11 !== void 0 && _this$props$value11.date ? (0, _momentTimezone["default"])((_this$props$value12 = this.props.value) === null || _this$props$value12 === void 0 ? void 0 : _this$props$value12.date).format('dddd  MMMM D, YYYY hh:mm A') : (0, _momentTimezone["default"])().format('dddd  MMMM D, YYYY hh:mm A'), " by ", (_this$props$value13 = this.props.value) === null || _this$props$value13 === void 0 ? void 0 : _this$props$value13.name, " via IP Address ", (_this$props$value14 = this.props.value) === null || _this$props$value14 === void 0 ? void 0 : _this$props$value14.ipAddress), /*#__PURE__*/_react["default"].createElement("hr", null)) : null : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      }), /*#__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"
@@ -964,7 +988,7 @@ var Signature = /*#__PURE__*/function (_React$Component12) {
       }, /*#__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$value15 = this.props.value) === null || _this$props$value15 === void 0 ? void 0 : _this$props$value15.name) !== null && _this$props$value$nam !== void 0 ? _this$props$value$nam : '',
+        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",
@@ -984,13 +1008,13 @@ var Signature = /*#__PURE__*/function (_React$Component12) {
   }]);
   return Signature;
 }(_react["default"].Component);
-var Tags = /*#__PURE__*/function (_React$Component13) {
-  (0, _inherits2["default"])(Tags, _React$Component13);
-  var _super13 = _createSuper(Tags);
+var Tags = /*#__PURE__*/function (_React$Component14) {
+  (0, _inherits2["default"])(Tags, _React$Component14);
+  var _super14 = _createSuper(Tags);
   function Tags(props) {
     var _this17;
     (0, _classCallCheck2["default"])(this, Tags);
-    _this17 = _super13.call(this, props);
+    _this17 = _super14.call(this, props);
     _this17.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this17;
   }
@@ -1085,13 +1109,13 @@ var Tags = /*#__PURE__*/function (_React$Component13) {
   }]);
   return Tags;
 }(_react["default"].Component);
-var Checkboxes = /*#__PURE__*/function (_React$Component14) {
-  (0, _inherits2["default"])(Checkboxes, _React$Component14);
-  var _super14 = _createSuper(Checkboxes);
+var Checkboxes = /*#__PURE__*/function (_React$Component15) {
+  (0, _inherits2["default"])(Checkboxes, _React$Component15);
+  var _super15 = _createSuper(Checkboxes);
   function Checkboxes(props) {
     var _this19;
     (0, _classCallCheck2["default"])(this, Checkboxes);
-    _this19 = _super14.call(this, props);
+    _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) {
@@ -1170,13 +1194,13 @@ var Checkboxes = /*#__PURE__*/function (_React$Component14) {
   }]);
   return Checkboxes;
 }(_react["default"].Component);
-var Checkbox = /*#__PURE__*/function (_React$Component15) {
-  (0, _inherits2["default"])(Checkbox, _React$Component15);
-  var _super15 = _createSuper(Checkbox);
+var Checkbox = /*#__PURE__*/function (_React$Component16) {
+  (0, _inherits2["default"])(Checkbox, _React$Component16);
+  var _super16 = _createSuper(Checkbox);
   function Checkbox(props) {
     var _this21;
     (0, _classCallCheck2["default"])(this, Checkbox);
-    _this21 = _super15.call(this, props);
+    _this21 = _super16.call(this, props);
     _this21.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this21;
   }
@@ -1214,7 +1238,11 @@ var Checkbox = /*#__PURE__*/function (_React$Component15) {
           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 === true ? 'Yes' : 'No')));
+        })), /*#__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),
@@ -1240,13 +1268,13 @@ var Checkbox = /*#__PURE__*/function (_React$Component15) {
   }]);
   return Checkbox;
 }(_react["default"].Component);
-var RadioButtons = /*#__PURE__*/function (_React$Component16) {
-  (0, _inherits2["default"])(RadioButtons, _React$Component16);
-  var _super16 = _createSuper(RadioButtons);
+var RadioButtons = /*#__PURE__*/function (_React$Component17) {
+  (0, _inherits2["default"])(RadioButtons, _React$Component17);
+  var _super17 = _createSuper(RadioButtons);
   function RadioButtons(props) {
     var _this23;
     (0, _classCallCheck2["default"])(this, RadioButtons);
-    _this23 = _super16.call(this, props);
+    _this23 = _super17.call(this, props);
     _this23.options = {};
     return _this23;
   }
@@ -1311,12 +1339,12 @@ var RadioButtons = /*#__PURE__*/function (_React$Component16) {
   }]);
   return RadioButtons;
 }(_react["default"].Component);
-var Image = /*#__PURE__*/function (_React$Component17) {
-  (0, _inherits2["default"])(Image, _React$Component17);
-  var _super17 = _createSuper(Image);
+var Image = /*#__PURE__*/function (_React$Component18) {
+  (0, _inherits2["default"])(Image, _React$Component18);
+  var _super18 = _createSuper(Image);
   function Image() {
     (0, _classCallCheck2["default"])(this, Image);
-    return _super17.apply(this, arguments);
+    return _super18.apply(this, arguments);
   }
   (0, _createClass2["default"])(Image, [{
     key: "render",
@@ -1342,13 +1370,13 @@ var Image = /*#__PURE__*/function (_React$Component17) {
   }]);
   return Image;
 }(_react["default"].Component);
-var Rating = /*#__PURE__*/function (_React$Component18) {
-  (0, _inherits2["default"])(Rating, _React$Component18);
-  var _super18 = _createSuper(Rating);
+var Rating = /*#__PURE__*/function (_React$Component19) {
+  (0, _inherits2["default"])(Rating, _React$Component19);
+  var _super19 = _createSuper(Rating);
   function Rating(props) {
     var _this25;
     (0, _classCallCheck2["default"])(this, Rating);
-    _this25 = _super18.call(this, props);
+    _this25 = _super19.call(this, props);
     _this25.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this25;
   }
@@ -1402,12 +1430,12 @@ var Rating = /*#__PURE__*/function (_React$Component18) {
   }]);
   return Rating;
 }(_react["default"].Component);
-var HyperLink = /*#__PURE__*/function (_React$Component19) {
-  (0, _inherits2["default"])(HyperLink, _React$Component19);
-  var _super19 = _createSuper(HyperLink);
+var HyperLink = /*#__PURE__*/function (_React$Component20) {
+  (0, _inherits2["default"])(HyperLink, _React$Component20);
+  var _super20 = _createSuper(HyperLink);
   function HyperLink() {
     (0, _classCallCheck2["default"])(this, HyperLink);
-    return _super19.apply(this, arguments);
+    return _super20.apply(this, arguments);
   }
   (0, _createClass2["default"])(HyperLink, [{
     key: "render",
@@ -1432,12 +1460,12 @@ var HyperLink = /*#__PURE__*/function (_React$Component19) {
   }]);
   return HyperLink;
 }(_react["default"].Component);
-var Download = /*#__PURE__*/function (_React$Component20) {
-  (0, _inherits2["default"])(Download, _React$Component20);
-  var _super20 = _createSuper(Download);
+var Download = /*#__PURE__*/function (_React$Component21) {
+  (0, _inherits2["default"])(Download, _React$Component21);
+  var _super21 = _createSuper(Download);
   function Download() {
     (0, _classCallCheck2["default"])(this, Download);
-    return _super20.apply(this, arguments);
+    return _super21.apply(this, arguments);
   }
   (0, _createClass2["default"])(Download, [{
     key: "render",
@@ -1458,13 +1486,13 @@ var Download = /*#__PURE__*/function (_React$Component20) {
   }]);
   return Download;
 }(_react["default"].Component);
-var Camera = /*#__PURE__*/function (_React$Component21) {
-  (0, _inherits2["default"])(Camera, _React$Component21);
-  var _super21 = _createSuper(Camera);
+var Camera = /*#__PURE__*/function (_React$Component22) {
+  (0, _inherits2["default"])(Camera, _React$Component22);
+  var _super22 = _createSuper(Camera);
   function Camera(props) {
     var _this27;
     (0, _classCallCheck2["default"])(this, Camera);
-    _this27 = _super21.call(this, props);
+    _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({
@@ -1585,13 +1613,13 @@ var Camera = /*#__PURE__*/function (_React$Component21) {
   }]);
   return Camera;
 }(_react["default"].Component);
-var FileUpload = /*#__PURE__*/function (_React$Component22) {
-  (0, _inherits2["default"])(FileUpload, _React$Component22);
-  var _super22 = _createSuper(FileUpload);
+var FileUpload = /*#__PURE__*/function (_React$Component23) {
+  (0, _inherits2["default"])(FileUpload, _React$Component23);
+  var _super23 = _createSuper(FileUpload);
   function FileUpload(props) {
     var _this28;
     (0, _classCallCheck2["default"])(this, FileUpload);
-    _this28 = _super22.call(this, props);
+    _this28 = _super23.call(this, props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this28), "handleChange", function (event) {
       if (event.target.files && event.target.files.length > 0) {
         _this28.setState({
@@ -1734,13 +1762,13 @@ var FileUpload = /*#__PURE__*/function (_React$Component22) {
   }]);
   return FileUpload;
 }(_react["default"].Component);
-var Range = /*#__PURE__*/function (_React$Component23) {
-  (0, _inherits2["default"])(Range, _React$Component23);
-  var _super23 = _createSuper(Range);
+var Range = /*#__PURE__*/function (_React$Component24) {
+  (0, _inherits2["default"])(Range, _React$Component24);
+  var _super24 = _createSuper(Range);
   function Range(props) {
     var _this29;
     (0, _classCallCheck2["default"])(this, Range);
-    _this29 = _super23.call(this, props);
+    _this29 = _super24.call(this, props);
     _this29.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this29;
   }
@@ -1838,6 +1866,7 @@ var Range = /*#__PURE__*/function (_React$Component23) {
 }(_react["default"].Component);
 SurveyElements.Header = Header;
 SurveyElements.Paragraph = Paragraph;
+SurveyElements.ContentBody = ContentBody;
 SurveyElements.Label = Label;
 SurveyElements.LineBreak = LineBreak;
 SurveyElements.TextInput = TextInput;