@pareto-engineering/design-system 4.0.0 → 4.1.0

package/dist/cjs/a/ToggleSwitch/ToggleSwitch.js

@@ -28,7 +28,8 @@ const ToggleSwitch = _ref => {
     style,
     handleOnChange,
     checked,
-    size
+    size,
+    inputId
     // ...otherProps
   } = _ref;
   return /*#__PURE__*/React.createElement("button", {
@@ -42,11 +43,11 @@ const ToggleSwitch = _ref => {
     // {...otherProps}
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
-    id: "switch",
+    id: inputId,
     checked: checked,
     onChange: handleOnChange
   }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: "switch"
+    htmlFor: inputId
   }));
 };
 ToggleSwitch.propTypes = {
@@ -73,9 +74,13 @@ ToggleSwitch.propTypes = {
   /**
    * The size of this element
    */
-  size: _propTypes.default.string
+  size: _propTypes.default.string,
+  /**
+   * The ID of the elelment to be toggled
+   */
+  inputId: _propTypes.default.string
 };
 ToggleSwitch.defaultProps = {
-  // someProp:false,
+  inputId: 'switch'
 };
 var _default = exports.default = ToggleSwitch;

package/dist/cjs/f/FormInput/FormInput.js

@@ -37,6 +37,13 @@ const FormInput = _ref => {
       disabled: disabled
     }, otherProps));
   }
+  if (type === 'multiple') {
+    return /*#__PURE__*/React.createElement(_fields.ChoicesInput, _extends({
+      className: newClassName,
+      disabled: disabled,
+      multiple: true
+    }, otherProps));
+  }
   if (type === 'choices') {
     return /*#__PURE__*/React.createElement(_fields.ChoicesInput, _extends({
       className: newClassName,

package/dist/cjs/f/fields/EditorInput/EditorInput.js

@@ -70,11 +70,15 @@ const EditorInput = _ref2 => {
     showDebugger,
     stopPropagationKeys,
     setEditorState
+    // handleOnChange,
     // ...otherProps
   } = _ref2;
-  const formik = (0, _formik.useFormikContext)();
+  const {
+    values,
+    setFieldValue
+  } = (0, _formik.useFormikContext)();
   const setInitialValue = () => {
-    const value = formik.values[name];
+    const value = values[name];
     try {
       JSON.parse(value);
       return value;
@@ -109,10 +113,7 @@ const EditorInput = _ref2 => {
     }
   };
   const onChange = state => {
-    formik.setValues({
-      ...formik.values,
-      [name]: JSON.stringify(state)
-    });
+    setFieldValue(name, JSON.stringify(state));
   };
   const initialConfig = {
     nameSpace: name,
@@ -149,7 +150,8 @@ const EditorInput = _ref2 => {
   }, label), !disabled && /*#__PURE__*/React.createElement(_common2.ToolbarPlugin, null), /*#__PURE__*/React.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
     contentEditable: /*#__PURE__*/React.createElement(_LexicalContentEditable.ContentEditable, {
       className: "content-editable",
-      id: name
+      id: name,
+      name: name
     }),
     ErrorBoundary: _LexicalErrorBoundary.default
   }), /*#__PURE__*/React.createElement(_LexicalListPlugin.ListPlugin, null), /*#__PURE__*/React.createElement(_LexicalCheckListPlugin.CheckListPlugin, null), /*#__PURE__*/React.createElement(_LexicalOnChangePlugin.OnChangePlugin, {

package/dist/cjs/f/fields/SelectInput/SelectInput.js

@@ -13,8 +13,7 @@ var _common = require("./common");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && {}.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; }
-/* @pareto-engineering/generator-front 1.0.12 */
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* @pareto-engineering/generator-front 1.0.12 */
 // Local Definitions
 
 const baseClassName = _exports.default.base;
@@ -42,8 +41,8 @@ const SelectInput = _ref => {
     autoComplete,
     placeholder,
     getTagColor,
-    multiple
-    // ...otherProps
+    multiple,
+    ...otherProps
   } = _ref;
   const inputProps = {
     name,
@@ -66,7 +65,7 @@ const SelectInput = _ref => {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
-  }, /*#__PURE__*/React.createElement(Input, inputProps));
+  }, /*#__PURE__*/React.createElement(Input, _extends({}, inputProps, otherProps)));
 };
 SelectInput.propTypes = {
   /**

package/dist/cjs/f/fields/SelectInput/common/Single/Single.js

@@ -39,8 +39,8 @@ const Single = _ref => {
     description,
     disabled,
     isLoading,
-    autoComplete
-    // ...otherProps
+    autoComplete,
+    ...otherProps
   } = _ref;
   const [field,, helpers] = (0, _formik.useField)({
     name,
@@ -72,7 +72,7 @@ const Single = _ref => {
     id: name,
     disabled: disabled,
     autoComplete: autoComplete
-  }), options.map(option => {
+  }, otherProps), options.map(option => {
     // i.e if option is a string like "blah", return { value: "blah", label: "blah" }
     const newOption = typeof option === 'string' ? {
       value: option,

package/dist/cjs/g/FormBuilder/FormBuilder.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+require("./styles.scss");
+var _common = require("./common");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && {}.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; }
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'form-builder';
+
+/**
+ * This is the component description.
+ */
+const FormBuilder = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    mode,
+    formData,
+    formBuilderId,
+    onBuilderFormSave,
+    onRendererFormSave
+    // ...otherProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+    // {...otherProps}
+  }, mode === 'build' && /*#__PURE__*/React.createElement(_common.Builder, {
+    formBuilderId: formBuilderId,
+    onSave: onBuilderFormSave
+  }), mode === 'render' && /*#__PURE__*/React.createElement(_common.Renderer, {
+    formData: formData,
+    onSave: onRendererFormSave
+  }));
+};
+FormBuilder.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * The mode of the form builder to determine whether to render a form or build a form
+   */
+  mode: _propTypes.default.oneOf(['build', 'render']),
+  /**
+   * This is the ID of the form element in the <Builder /> component
+   */
+  formBuilderId: _propTypes.default.string.isRequired
+};
+FormBuilder.defaultProps = {
+  mode: 'build'
+};
+FormBuilder.Builder = _common.Builder;
+FormBuilder.Renderer = _common.Renderer;
+var _default = exports.default = FormBuilder;

package/dist/cjs/g/FormBuilder/common/Builder/Builder.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _formik = require("formik");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _f = require("../../../../f");
+var _common = require("./common");
+require("./styles.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && {}.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; }
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'builder';
+const reorderInputs = values => {
+  const valuesCopy = JSON.parse(JSON.stringify(values));
+  valuesCopy.sections.forEach(section => {
+    const orderMap = new Map();
+    section.orderedInputDragIds.forEach((id, index) => orderMap.set(id, index));
+    section.inputs.sort((a, b) => orderMap.get(a.name) - orderMap.get(b.name));
+  });
+  return valuesCopy;
+};
+
+/**
+ */
+const Builder = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    onSave,
+    formBuilderId
+    // ...otherProps
+  } = _ref;
+  const handleSubmit = values => {
+    const reOrderedValues = reorderInputs(values);
+    onSave(reOrderedValues);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "h3"
+  }, "Form Builder"), /*#__PURE__*/React.createElement(_formik.Formik, {
+    initialValues: {
+      sections: [{
+        title: '',
+        description: '',
+        key: 'section-0',
+        inputs: [],
+        orderedInputDragIds: [],
+        navigation: {
+          nextSection: 'next'
+        }
+      }]
+    },
+    onSubmit: handleSubmit
+  }, _ref2 => {
+    let {
+      values
+    } = _ref2;
+    const availableSections = values.sections.map((section, idx) => ({
+      value: idx,
+      label: `Go to ${section.title || `Untitled Section ${idx + 1}`}`
+    }));
+    return /*#__PURE__*/React.createElement(_formik.Form, {
+      id: formBuilderId
+    }, /*#__PURE__*/React.createElement(_formik.FieldArray, {
+      name: "sections"
+    }, _ref3 => {
+      let {
+        push
+      } = _ref3;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, values.sections.map((section, index) => /*#__PURE__*/React.createElement(_common.Section, {
+        key: section.key,
+        index: index
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "section-footer"
+      }, /*#__PURE__*/React.createElement("button", {
+        className: "add-section-cta",
+        type: "button",
+        onClick: () => {
+          const currentIndex = values.sections.length;
+          return push({
+            title: '',
+            description: '',
+            key: `section-${currentIndex}`,
+            inputs: [{
+              type: 'text',
+              options: [],
+              required: true,
+              description: '',
+              name: `section_${values.sections.length}_input_0`,
+              label: ''
+            }],
+            orderedInputDragIds: [],
+            navigation: {
+              nextSection: 'next'
+            }
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "icon-container"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "icon"
+      }, "+")), /*#__PURE__*/React.createElement("span", {
+        className: "text x-paragraph c-x"
+      }, "Add Section")), /*#__PURE__*/React.createElement("div", {
+        className: "section-navigation"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "x-paragraph c-x"
+      }, "After Section", ' ', values.sections.length), /*#__PURE__*/React.createElement(_f.SelectInput, {
+        name: `sections.${values.sections.length - 1}.navigation.nextSection`,
+        options: [{
+          label: 'Select section',
+          value: '',
+          disabled: true
+        }, {
+          label: 'Continue to next section',
+          value: 'next'
+        }, ...availableSections, {
+          label: 'Submit form',
+          value: 'submit'
+        }]
+      }))));
+    }));
+  }));
+};
+Builder.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string)
+};
+Builder.defaultProps = {
+  // someProp:false
+};
+var _default = exports.default = Builder;

package/dist/cjs/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.js

@@ -0,0 +1,229 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _formik = require("formik");
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _f = require("../../../../../../f");
+var _a = require("../../../../../../a");
+var _utils = require("../../../../../../utils");
+require("./styles.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && {}.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; }
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'input-builder';
+
+/**
+ * This is the component description.
+ */
+const InputBuilder = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    sectionIndex,
+    inputIndex,
+    onDelete,
+    // onCopy,
+    preferredPopoverOrder
+    // ...otherProps
+  } = _ref;
+  const {
+    values,
+    setFieldValue
+  } = (0, _formik.useFormikContext)();
+  const input = values.sections[sectionIndex].inputs[inputIndex];
+  const handleToggleRequired = () => {
+    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input.required);
+  };
+  const toggleSwitchStyles = {
+    ...(!input?.required ? {
+      '--slider-background-color': 'var(--disabled)'
+    } : {})
+  };
+  const parentRef = (0, _react.useRef)(null);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  (0, _utils.useOutsideClick)(parentRef, () => setIsOpen(false));
+  const [hasDescription, setHasDescription] = (0, _react.useState)(false);
+  const handleToggleConditionalNavigation = () => {
+    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.conditionalNavigation`, !input.conditionalNavigation);
+  };
+  const availableSections = values.sections.map((section, idx) => ({
+    value: idx,
+    label: `Go to ${section.title || `Untitled Section ${idx + 1}`}`
+  }));
+  const shouldRenderOptions = input?.type === 'select' || input?.type === 'multiple' || input?.type === 'choices';
+  const handleSelectOptionBlur = (e, optionIndex) => {
+    const {
+      value
+    } = e.target;
+    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.label`, value);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "drag-icon"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ai-icon"
+  }, "H")), /*#__PURE__*/React.createElement("div", {
+    className: "input-options-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "controls-container"
+  }, /*#__PURE__*/React.createElement(_f.SelectInput, {
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.type`,
+    options: [{
+      value: '',
+      label: 'Select an option',
+      disabled: true
+    }, {
+      value: 'text',
+      label: 'Basic input'
+    }, {
+      value: 'textarea',
+      label: 'Long paragraph'
+    }, {
+      value: 'select',
+      label: 'Dropdown select'
+    }, {
+      value: 'editor',
+      label: 'Editor input'
+    }, {
+      value: 'multiple',
+      label: 'Checkboxes'
+    }, {
+      value: 'choices',
+      label: 'Radio buttons'
+    }]
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "controls"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => onDelete(inputIndex)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon x-ui-icons c-x"
+  }, "D")), /*#__PURE__*/React.createElement("div", {
+    className: "is-required"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "s0"
+  }, "Required"), /*#__PURE__*/React.createElement(_a.ToggleSwitch, {
+    handleOnChange: handleToggleRequired,
+    checked: input?.required,
+    style: toggleSwitchStyles,
+    inputId: `sections_${sectionIndex}_inputs.${inputIndex}_toggle`
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "actions",
+    ref: parentRef
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => setIsOpen(!isOpen)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon x-ui-icons c-x"
+  }, "!")), /*#__PURE__*/React.createElement(_a.Popover, {
+    isOpen: isOpen,
+    parentRef: parentRef,
+    preferredPrimaryOrder: preferredPopoverOrder
+  }, /*#__PURE__*/React.createElement("p", null, "Show"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
+    className: `option ${hasDescription ? 'with-check-mark' : ''}`
+  }, hasDescription && /*#__PURE__*/React.createElement("span", {
+    className: "x-ui-icons c-x icon"
+  }, "I"), /*#__PURE__*/React.createElement("button", {
+    onClick: () => setHasDescription(!hasDescription),
+    type: "button"
+  }, "Description")), /*#__PURE__*/React.createElement("li", {
+    className: `option ${input?.conditionalNavigation ? 'with-check-mark' : ''}`
+  }, input?.conditionalNavigation && /*#__PURE__*/React.createElement("span", {
+    className: "x-ui-icons c-x icon"
+  }, "I"), /*#__PURE__*/React.createElement("button", {
+    onClick: handleToggleConditionalNavigation,
+    type: "button"
+  }, "Go to section based on answer"))))))), /*#__PURE__*/React.createElement("div", {
+    className: "input-name-description"
+  }, /*#__PURE__*/React.createElement(_f.TextInput, {
+    label: "Input name",
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.label`,
+    placeholder: "Question"
+  }), hasDescription && /*#__PURE__*/React.createElement(_f.TextInput, {
+    label: "Description(optional)",
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.description`,
+    placeholder: "Describe details for the question"
+  })), shouldRenderOptions && /*#__PURE__*/React.createElement(_formik.FieldArray, {
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.options`
+  }, _ref2 => {
+    let {
+      push,
+      remove
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "input-options"
+    }, /*#__PURE__*/React.createElement("p", null, "Options"), input?.options.map((option, optionIndex) => /*#__PURE__*/React.createElement("div", {
+      key: option.key,
+      className: "option-container"
+    }, input.type !== 'select' && /*#__PURE__*/React.createElement("div", {
+      className: `input-icon-sample ${input.type}`
+    }), /*#__PURE__*/React.createElement(_f.TextInput, {
+      name: `sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.value`,
+      placeholder: `Option ${optionIndex + 1}`,
+      onBlur: e => handleSelectOptionBlur(e, optionIndex)
+    }), input?.conditionalNavigation && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_f.SelectInput, {
+      options: [{
+        label: 'Select section',
+        value: '',
+        disabled: true
+      }, ...availableSections],
+      name: `sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.nextSection`
+    })), /*#__PURE__*/React.createElement("button", {
+      className: "icon",
+      type: "button",
+      onClick: () => remove(optionIndex)
+    }, "Y"))), /*#__PURE__*/React.createElement("button", {
+      className: "add-option-cta",
+      type: "button",
+      onClick: () => push({
+        key: `sections-${sectionIndex}-inputs-${inputIndex}-options-${input.options.length - 1}`,
+        value: '',
+        label: '',
+        nextSection: ''
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "icon-container"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "icon"
+    }, "+")), /*#__PURE__*/React.createElement("span", {
+      className: "text x-paragraph c-x"
+    }, "Add Option")));
+  })));
+};
+InputBuilder.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * The preferred primary order of the popover
+   */
+  preferredPopoverOrder: _propTypes.default.arrayOf(_propTypes.default.string)
+};
+InputBuilder.defaultProps = {
+  preferredPopoverOrder: ['right', 'bottom', 'left', 'top']
+};
+var _default = exports.default = InputBuilder;

package/dist/cjs/g/FormBuilder/common/Builder/common/InputBuilder/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "InputBuilder", {
+  enumerable: true,
+  get: function () {
+    return _InputBuilder.default;
+  }
+});
+var _InputBuilder = _interopRequireDefault(require("./InputBuilder"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }