react-survey-builder 1.0.40 → 1.0.42

package/lib/survey-elements/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.TextInput = exports.TextArea = exports.Tags = exports.Signature = exports.Rating = exports.Range = exports.RadioButtons = exports.PhoneNumber = exports.Paragraph = exports.NumberInput = exports.LineBreak = exports.Label = exports.Image = exports.HyperLink = exports.Header = exports.FileUpload = exports.EmailInput = exports.Dropdown = exports.Download = exports.DatePicker = exports.ContentBody = exports.Checkboxes = exports.Checkbox = exports.Camera = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -34,8 +34,8 @@ var _componentErrorMessage = _interopRequireDefault(require("./component-error-m
 var _ipUtils = require("../utils/ipUtils");
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _ri = require("react-icons/ri");
-var _UUID = _interopRequireDefault(require("../UUID"));
 var _io = require("react-icons/io5");
+var _functions = require("../functions");
 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); }
@@ -81,13 +81,6 @@ var CustomDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2,
     _ref2$formatMask = _ref2.formatMask,
     formatMask = _ref2$formatMask === void 0 ? 'MM/DD/YYYY' : _ref2$formatMask,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-  console.log('otherProps', otherProps);
-  Object.keys(otherProps).forEach(function (key) {
-    if (otherProps[key] === undefined) {
-      delete otherProps[key];
-    }
-  });
-  console.log('otherProps', otherProps);
   return /*#__PURE__*/_react["default"].createElement(_reactImask.IMaskInput, (0, _extends2["default"])({}, otherProps, {
     mask: Date,
     lazy: false,
@@ -151,7 +144,7 @@ var CustomDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2,
   }));
 });
 var SurveyElements = {};
-var Header = /*#__PURE__*/function (_React$Component) {
+var Header = exports.Header = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Header, _React$Component);
   var _super = _createSuper(Header);
   function Header() {
@@ -185,7 +178,7 @@ var Header = /*#__PURE__*/function (_React$Component) {
   }]);
   return Header;
 }(_react["default"].Component);
-var ContentBody = /*#__PURE__*/function (_React$Component2) {
+var ContentBody = exports.ContentBody = /*#__PURE__*/function (_React$Component2) {
   (0, _inherits2["default"])(ContentBody, _React$Component2);
   var _super2 = _createSuper(ContentBody);
   function ContentBody() {
@@ -213,7 +206,7 @@ var ContentBody = /*#__PURE__*/function (_React$Component2) {
   }]);
   return ContentBody;
 }(_react["default"].Component);
-var Paragraph = /*#__PURE__*/function (_React$Component3) {
+var Paragraph = exports.Paragraph = /*#__PURE__*/function (_React$Component3) {
   (0, _inherits2["default"])(Paragraph, _React$Component3);
   var _super3 = _createSuper(Paragraph);
   function Paragraph() {
@@ -247,7 +240,7 @@ var Paragraph = /*#__PURE__*/function (_React$Component3) {
   }]);
   return Paragraph;
 }(_react["default"].Component);
-var Label = /*#__PURE__*/function (_React$Component4) {
+var Label = exports.Label = /*#__PURE__*/function (_React$Component4) {
   (0, _inherits2["default"])(Label, _React$Component4);
   var _super4 = _createSuper(Label);
   function Label() {
@@ -281,7 +274,7 @@ var Label = /*#__PURE__*/function (_React$Component4) {
   }]);
   return Label;
 }(_react["default"].Component);
-var LineBreak = /*#__PURE__*/function (_React$Component5) {
+var LineBreak = exports.LineBreak = /*#__PURE__*/function (_React$Component5) {
   (0, _inherits2["default"])(LineBreak, _React$Component5);
   var _super5 = _createSuper(LineBreak);
   function LineBreak() {
@@ -303,7 +296,7 @@ var LineBreak = /*#__PURE__*/function (_React$Component5) {
   }]);
   return LineBreak;
 }(_react["default"].Component);
-var TextInput = /*#__PURE__*/function (_React$Component6) {
+var TextInput = exports.TextInput = /*#__PURE__*/function (_React$Component6) {
   (0, _inherits2["default"])(TextInput, _React$Component6);
   var _super6 = _createSuper(TextInput);
   function TextInput(props) {
@@ -357,14 +350,14 @@ var TextInput = /*#__PURE__*/function (_React$Component6) {
       }, /*#__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 + '-' + (0, _functions.generateUUID)(),
         type: "text"
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name,
+        id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "text"
       }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
@@ -375,7 +368,7 @@ var TextInput = /*#__PURE__*/function (_React$Component6) {
   }]);
   return TextInput;
 }(_react["default"].Component);
-var EmailInput = /*#__PURE__*/function (_React$Component7) {
+var EmailInput = exports.EmailInput = /*#__PURE__*/function (_React$Component7) {
   (0, _inherits2["default"])(EmailInput, _React$Component7);
   var _super7 = _createSuper(EmailInput);
   function EmailInput(props) {
@@ -429,14 +422,14 @@ var EmailInput = /*#__PURE__*/function (_React$Component7) {
       }, /*#__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 + '-' + (0, _functions.generateUUID)(),
         type: "text"
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name,
+        id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "text"
       }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
@@ -447,7 +440,7 @@ var EmailInput = /*#__PURE__*/function (_React$Component7) {
   }]);
   return EmailInput;
 }(_react["default"].Component);
-var PhoneNumber = /*#__PURE__*/function (_React$Component8) {
+var PhoneNumber = exports.PhoneNumber = /*#__PURE__*/function (_React$Component8) {
   (0, _inherits2["default"])(PhoneNumber, _React$Component8);
   var _super8 = _createSuper(PhoneNumber);
   function PhoneNumber(props) {
@@ -501,7 +494,7 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component8) {
       }, /*#__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 + '-' + (0, _functions.generateUUID)(),
         type: "text"
       }, props, {
         as: CustomPhoneInput
@@ -510,7 +503,7 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component8) {
       }))) : /*#__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,
+        id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "text"
       }, props, {
         as: CustomPhoneInput
@@ -523,7 +516,7 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component8) {
   }]);
   return PhoneNumber;
 }(_react["default"].Component);
-var DatePicker = /*#__PURE__*/function (_React$Component9) {
+var DatePicker = exports.DatePicker = /*#__PURE__*/function (_React$Component9) {
   (0, _inherits2["default"])(DatePicker, _React$Component9);
   var _super9 = _createSuper(DatePicker);
   function DatePicker(props) {
@@ -542,7 +535,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component9) {
       props.placeholder = this.props.item.placeholder || this.props.item.formatMask || 'MM/DD/YYYY';
       props.onChange = function (val) {
         if (_this8.props.onChange !== undefined) {
-          _this8.props.onChange(val.target.value);
+          _this8.props.onChange(val);
         }
       };
       props.value = this.props.value;
@@ -589,7 +582,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component9) {
         }, /*#__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 + '-' + (0, _functions.generateUUID)(),
           type: "text"
         }, props, {
           as: CustomDateInput
@@ -598,15 +591,11 @@ var DatePicker = /*#__PURE__*/function (_React$Component9) {
         }))) : /*#__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,
+          id: props.name + '-' + (0, _functions.generateUUID)(),
           type: "text"
-          // 				onBlur={props.onBlur}
-          // onChange={props.onChange}
-          // value={props.value}
-          // name={props.name}
-          // ref={props.ref}
-          // isInvalid={props.isInvalid}
-        }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        }, props, {
+          as: CustomDateInput
+        }))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
           muted: true
         }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
           name: props.name
@@ -618,7 +607,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component9) {
   }]);
   return DatePicker;
 }(_react["default"].Component);
-var NumberInput = /*#__PURE__*/function (_React$Component10) {
+var NumberInput = exports.NumberInput = /*#__PURE__*/function (_React$Component10) {
   (0, _inherits2["default"])(NumberInput, _React$Component10);
   var _super10 = _createSuper(NumberInput);
   function NumberInput(props) {
@@ -675,14 +664,14 @@ var NumberInput = /*#__PURE__*/function (_React$Component10) {
       }, /*#__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 + '-' + (0, _functions.generateUUID)(),
         type: "number"
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name,
+        id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "number"
       }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
@@ -693,7 +682,7 @@ var NumberInput = /*#__PURE__*/function (_React$Component10) {
   }]);
   return NumberInput;
 }(_react["default"].Component);
-var TextArea = /*#__PURE__*/function (_React$Component11) {
+var TextArea = exports.TextArea = /*#__PURE__*/function (_React$Component11) {
   (0, _inherits2["default"])(TextArea, _React$Component11);
   var _super11 = _createSuper(TextArea);
   function TextArea(props) {
@@ -748,14 +737,14 @@ var TextArea = /*#__PURE__*/function (_React$Component11) {
         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"])({
         as: "textarea",
-        id: props.name
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         as: "textarea",
-        id: props.name
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, 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"], {
@@ -765,7 +754,7 @@ var TextArea = /*#__PURE__*/function (_React$Component11) {
   }]);
   return TextArea;
 }(_react["default"].Component);
-var Dropdown = /*#__PURE__*/function (_React$Component12) {
+var Dropdown = exports.Dropdown = /*#__PURE__*/function (_React$Component12) {
   (0, _inherits2["default"])(Dropdown, _React$Component12);
   var _super12 = _createSuper(Dropdown);
   function Dropdown(props) {
@@ -822,7 +811,7 @@ var Dropdown = /*#__PURE__*/function (_React$Component12) {
       }, /*#__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.Select, (0, _extends2["default"])({
-        id: props.name
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, props), props.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
         value: ""
       }, props.placeholder) : null, this.props.item.options.map(function (option) {
@@ -836,7 +825,7 @@ var Dropdown = /*#__PURE__*/function (_React$Component12) {
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, (0, _extends2["default"])({
-        id: props.name
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, props), props.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
         value: ""
       }, props.placeholder) : null, this.props.item.options.map(function (option) {
@@ -854,7 +843,7 @@ var Dropdown = /*#__PURE__*/function (_React$Component12) {
   }]);
   return Dropdown;
 }(_react["default"].Component);
-var Signature = /*#__PURE__*/function (_React$Component13) {
+var Signature = exports.Signature = /*#__PURE__*/function (_React$Component13) {
   (0, _inherits2["default"])(Signature, _React$Component13);
   var _super13 = _createSuper(Signature);
   function Signature(props) {
@@ -1043,7 +1032,7 @@ var Signature = /*#__PURE__*/function (_React$Component13) {
   }]);
   return Signature;
 }(_react["default"].Component);
-var Tags = /*#__PURE__*/function (_React$Component14) {
+var Tags = exports.Tags = /*#__PURE__*/function (_React$Component14) {
   (0, _inherits2["default"])(Tags, _React$Component14);
   var _super14 = _createSuper(Tags);
   function Tags(props) {
@@ -1127,7 +1116,7 @@ var Tags = /*#__PURE__*/function (_React$Component14) {
         labelKey: function labelKey(option) {
           return option.label;
         },
-        id: props.name
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
@@ -1136,7 +1125,7 @@ var Tags = /*#__PURE__*/function (_React$Component14) {
         labelKey: function labelKey(option) {
           return option.label;
         },
-        id: props.name
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, 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"], {
@@ -1146,7 +1135,7 @@ var Tags = /*#__PURE__*/function (_React$Component14) {
   }]);
   return Tags;
 }(_react["default"].Component);
-var Checkboxes = /*#__PURE__*/function (_React$Component15) {
+var Checkboxes = exports.Checkboxes = /*#__PURE__*/function (_React$Component15) {
   (0, _inherits2["default"])(Checkboxes, _React$Component15);
   var _super15 = _createSuper(Checkboxes);
   function Checkboxes(props) {
@@ -1213,7 +1202,7 @@ var Checkboxes = /*#__PURE__*/function (_React$Component15) {
           variant: (_this20$props$checkbo = _this20.props.checkboxButtonClassName) !== null && _this20$props$checkbo !== void 0 ? _this20$props$checkbo : "outline-light",
           className: "btn-survey-builder-checkbox",
           key: "preview_".concat(option.key),
-          id: self.props.name + '-' + _UUID["default"].uuid(),
+          id: self.props.name + '-' + (0, _functions.generateUUID)(),
           inputRef: function inputRef(c) {
             if (c && self.props.item.mutable) {
               self.options["child_ref_".concat(option.key)] = c;
@@ -1242,7 +1231,7 @@ var Checkboxes = /*#__PURE__*/function (_React$Component15) {
   }]);
   return Checkboxes;
 }(_react["default"].Component);
-var Checkbox = /*#__PURE__*/function (_React$Component16) {
+var Checkbox = exports.Checkbox = /*#__PURE__*/function (_React$Component16) {
   (0, _inherits2["default"])(Checkbox, _React$Component16);
   var _super16 = _createSuper(Checkbox);
   function Checkbox(props) {
@@ -1307,7 +1296,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component16) {
         variant: (_this$props$checkboxB = this.props.checkboxButtonClassName) !== null && _this$props$checkboxB !== void 0 ? _this$props$checkboxB : "outline-light",
         className: "btn-survey-builder-checkbox",
         value: props.name,
-        id: props.name + '-' + _UUID["default"].uuid()
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, props), /*#__PURE__*/_react["default"].createElement("div", {
         className: "d-flex align-items-center justify-content-between text-black text-survey-builder-checkbox"
       }, props.checked !== true && /*#__PURE__*/_react["default"].createElement(_ri.RiCheckboxBlankLine, {
@@ -1331,7 +1320,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component16) {
   }]);
   return Checkbox;
 }(_react["default"].Component);
-var RadioButtons = /*#__PURE__*/function (_React$Component17) {
+var RadioButtons = exports.RadioButtons = /*#__PURE__*/function (_React$Component17) {
   (0, _inherits2["default"])(RadioButtons, _React$Component17);
   var _super17 = _createSuper(RadioButtons);
   function RadioButtons(props) {
@@ -1379,7 +1368,7 @@ var RadioButtons = /*#__PURE__*/function (_React$Component17) {
           variant: (_self$props$checkboxB = self.props.checkboxButtonClassName) !== null && _self$props$checkboxB !== void 0 ? _self$props$checkboxB : "outline-light",
           className: "btn-survey-builder-checkbox",
           key: "preview_".concat(option.key),
-          id: self.props.name + '-' + _UUID["default"].uuid(),
+          id: self.props.name + '-' + (0, _functions.generateUUID)(),
           inputRef: function inputRef(c) {
             if (c && self.props.item.mutable) {
               self.options["child_ref_".concat(option.key)] = c;
@@ -1420,7 +1409,7 @@ var RadioButtons = /*#__PURE__*/function (_React$Component17) {
   }]);
   return RadioButtons;
 }(_react["default"].Component);
-var Image = /*#__PURE__*/function (_React$Component18) {
+var Image = exports.Image = /*#__PURE__*/function (_React$Component18) {
   (0, _inherits2["default"])(Image, _React$Component18);
   var _super18 = _createSuper(Image);
   function Image() {
@@ -1451,7 +1440,7 @@ var Image = /*#__PURE__*/function (_React$Component18) {
   }]);
   return Image;
 }(_react["default"].Component);
-var Rating = /*#__PURE__*/function (_React$Component19) {
+var Rating = exports.Rating = /*#__PURE__*/function (_React$Component19) {
   (0, _inherits2["default"])(Rating, _React$Component19);
   var _super19 = _createSuper(Rating);
   function Rating(props) {
@@ -1511,7 +1500,7 @@ var Rating = /*#__PURE__*/function (_React$Component19) {
   }]);
   return Rating;
 }(_react["default"].Component);
-var HyperLink = /*#__PURE__*/function (_React$Component20) {
+var HyperLink = exports.HyperLink = /*#__PURE__*/function (_React$Component20) {
   (0, _inherits2["default"])(HyperLink, _React$Component20);
   var _super20 = _createSuper(HyperLink);
   function HyperLink() {
@@ -1541,7 +1530,7 @@ var HyperLink = /*#__PURE__*/function (_React$Component20) {
   }]);
   return HyperLink;
 }(_react["default"].Component);
-var Download = /*#__PURE__*/function (_React$Component21) {
+var Download = exports.Download = /*#__PURE__*/function (_React$Component21) {
   (0, _inherits2["default"])(Download, _React$Component21);
   var _super21 = _createSuper(Download);
   function Download() {
@@ -1567,7 +1556,7 @@ var Download = /*#__PURE__*/function (_React$Component21) {
   }]);
   return Download;
 }(_react["default"].Component);
-var Camera = /*#__PURE__*/function (_React$Component22) {
+var Camera = exports.Camera = /*#__PURE__*/function (_React$Component22) {
   (0, _inherits2["default"])(Camera, _React$Component22);
   var _super22 = _createSuper(Camera);
   function Camera(props) {
@@ -1694,7 +1683,7 @@ var Camera = /*#__PURE__*/function (_React$Component22) {
   }]);
   return Camera;
 }(_react["default"].Component);
-var FileUpload = /*#__PURE__*/function (_React$Component23) {
+var FileUpload = exports.FileUpload = /*#__PURE__*/function (_React$Component23) {
   (0, _inherits2["default"])(FileUpload, _React$Component23);
   var _super23 = _createSuper(FileUpload);
   function FileUpload(props) {
@@ -1843,7 +1832,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component23) {
   }]);
   return FileUpload;
 }(_react["default"].Component);
-var Range = /*#__PURE__*/function (_React$Component24) {
+var Range = exports.Range = /*#__PURE__*/function (_React$Component24) {
   (0, _inherits2["default"])(Range, _React$Component24);
   var _super24 = _createSuper(Range);
   function Range(props) {