@luscii-healthtech/web-ui 1.0.0 → 2.2.0

package/dist/web-ui.esm.js

@@ -18,6 +18,8 @@ import { Editor } from 'react-draft-wysiwyg';
 import draftToHtml from 'draftjs-to-html';
 import htmlToDraft from 'html-to-draftjs';
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import { Controller, useForm } from 'react-hook-form';
+import { ErrorMessage } from '@hookform/error-message';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -994,6 +996,7 @@ var Checkbox = function Checkbox(_ref) {
   }, [indeterminate]);
 
   var handleChange = function handleChange(event) {
+    event.stopPropagation();
     setIndeterminate(false);
 
     if (onChange) {
@@ -1853,7 +1856,7 @@ var CrossIcon = function CrossIcon(props) {
 var css_248z$c = ".input::-ms-clear {\n  display: none;\n}";
 styleInject(css_248z$c);
 
-var _excluded$6 = ["withSuffix", "withPrefix", "className", "clearable", "type", "isDisabled", "icon", "setRef", "name", "value", "onChange"];
+var _excluded$6 = ["withSuffix", "withPrefix", "className", "clearable", "type", "isDisabled", "icon", "name", "value", "onChange", "isError"];
 // Don't know why yet but it can be fixed later.
 
 var INPUT_TYPES = {
@@ -1862,8 +1865,7 @@ var INPUT_TYPES = {
   PASSWORD: "password",
   TEXT: "text"
 };
-
-var Input = function Input(_ref) {
+var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$withSuffix = _ref.withSuffix,
       withSuffix = _ref$withSuffix === void 0 ? "" : _ref$withSuffix,
       _ref$withPrefix = _ref.withPrefix,
@@ -1876,10 +1878,11 @@ var Input = function Input(_ref) {
       _ref$isDisabled = _ref.isDisabled,
       isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
       icon = _ref.icon,
-      setRef = _ref.setRef,
       name = _ref.name,
-      value = _ref.value,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? "" : _ref$value,
       onChange = _ref.onChange,
+      isError = _ref.isError,
       otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
   var hasNoExtraContent = withPrefix === "" && withSuffix === "";
@@ -1888,7 +1891,6 @@ var Input = function Input(_ref) {
       innerValue = _useState[0],
       setInnerValue = _useState[1];
 
-  var inputRef = useRef(null);
   useEffect(function () {
     setInnerValue(value);
   }, [value]);
@@ -1930,13 +1932,13 @@ var Input = function Input(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-row"
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: classNames("h-11", {
+    className: classNames("h-11 border-t border-b border-solid border-input-border", {
       hidden: hasNoExtraContent,
       "order-1": withPrefix !== "",
       "order-2": withSuffix !== "",
       "rounded-l border-l": withPrefix !== "",
       "rounded-r border-r": withSuffix !== ""
-    }, "border-t border-b border-solid border-input-border", "flex flex-col items-center p-3", "text-sm", "text-slate-500", "bg-main-background")
+    }, "flex flex-col items-center p-3", "text-sm", "text-slate-500", "bg-main-background")
   }, withSuffix || withPrefix), icon && /*#__PURE__*/React__default.createElement("div", {
     className: "absolute top-1/2 left-4",
     style: {
@@ -1949,10 +1951,7 @@ var Input = function Input(_ref) {
     name: name,
     value: innerValue,
     onChange: handleChangeEvent,
-    ref: function ref(element) {
-      inputRef.current = element;
-      element && (setRef == null ? void 0 : setRef(element));
-    },
+    ref: ref,
     size: otherProps.maxLength,
     type: type,
     disabled: isDisabled,
@@ -1962,10 +1961,14 @@ var Input = function Input(_ref) {
     }, {
       "text-slate-400 bg-slate-50": isDisabled,
       "text-slate-700": !isDisabled,
-      "border-input-border": !isDisabled,
+      "border-input-border": !isDisabled && !isError,
       "hover:border-input-border-dark": !isDisabled,
+      "border-red-700": isError,
+      "focus:outline-negative": isError,
+      "focus:border-blue-800": !isError,
+      "focus:outline-primary": !isError,
       "bg-white": !isDisabled
-    }, "h-11", "p-2", "border", "text-sm", "placeholder-slate-500", "border-solid", "focus:outline-primary", "transition-colors", "duration-300", "focus:border-blue-800", {
+    }, "h-11", "p-2", "border", "text-sm", "placeholder-slate-500", "border-solid", "transition-colors", "duration-300", {
       "z-10": withSuffix !== "" || withPrefix !== "",
       rounded: hasNoExtraContent,
       "rounded-l": withSuffix !== "",
@@ -1985,7 +1988,7 @@ var Input = function Input(_ref) {
     }),
     onClick: clearField
   }))));
-};
+});
 
 var Line = function Line(_ref) {
   var left = _ref.left,
@@ -2329,6 +2332,10 @@ function generateCustomStyles(hasError, isIE11) {
     }
   };
 }
+/**
+ * @deprecated: use SelectV2 instead
+ */
+
 
 var CustomSelect = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var className = props.className,
@@ -2819,7 +2826,9 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     setChecked(isChecked || false);
   }, [isChecked]);
 
-  var handleItemClick = function handleItemClick() {
+  var handleItemClick = function handleItemClick(event) {
+    event.stopPropagation();
+
     if (onChange) {
       onChange({
         id: id,
@@ -2831,6 +2840,7 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
   };
 
   var handleCheckboxClick = function handleCheckboxClick(event) {
+    event.stopPropagation();
     var targetId = event.target.id;
     var newCheckedValue = event.target.checked;
 
@@ -2928,7 +2938,9 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
     }
   }, [items]);
 
-  var handleGroupClick = function handleGroupClick() {
+  var handleGroupClick = function handleGroupClick(event) {
+    event.stopPropagation();
+
     if ((groupCheckboxState === CheckboxState.CHECKED || groupCheckboxState === CheckboxState.INDETERMINATE) && onChange) {
       //if checked or indeterminate >> make all items unchecked
       items.forEach(function (item) {
@@ -2948,7 +2960,11 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
     }
   };
 
-  var handleGroupCollapse = function handleGroupCollapse() {
+  var handleGroupCollapse = function handleGroupCollapse(event) {
+    if (event) {
+      event.stopPropagation();
+    }
+
     setCollapsed(!collapsed);
   };
 
@@ -3801,6 +3817,10 @@ var PreviewPhone = function PreviewPhone(_ref) {
 var css_248z$j = ".cweb-radio {\n  outline: none;\n}\n\n.cweb-radio .cweb-radio-input {\n  -webkit-appearance: none;\n  height: 1px;\n  opacity: 0;\n  width: 1px;\n}\n\n.cweb-radio .cweb-radio-label-text {\n  margin-left: 8px;\n  -ms-user-select: none;\n  user-select: none;\n  text-align: left;\n}\n\n.cweb-radio .cweb-radio-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0;\n}\n\n.cweb-radio .cweb-radio-icon-container {\n  width: 16px;\n  height: 16px;\n  position: relative;\n  border: 1px solid #cccccc;\n  border-radius: 50%;\n  transition: background-color 0.3s ease-in-out;\n}\n\n.cweb-radio .cweb-radio-icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: block;\n}\n\n.cweb-radio.is-focused .cweb-radio-icon-container {\n  border-color: #0074dd;\n}\n\n.cweb-radio.is-checked .cweb-radio-icon {\n  width: 5px;\n  height: 5px;\n  background-color: #ffffff;\n  border-radius: 50%;\n}\n";
 styleInject(css_248z$j);
 
+/**
+ * @deprecated: use RadioV2 instead
+ */
+
 var Radio = /*#__PURE__*/function (_PureComponent) {
   _inheritsLoose(Radio, _PureComponent);
 
@@ -3901,6 +3921,9 @@ var css_248z$k = ".cweb-radio-group {\n  display: flex;\n  justify-content: flex
 styleInject(css_248z$k);
 
 var _excluded$b = ["className", "radioClassName", "name", "selectedOption", "isVertical", "radioOptions", "onChange", "error", "isDisabled"];
+/**
+ * @deprecated: use RadioV2 instead
+ */
 
 function RadioGroup(_ref) {
   var className = _ref.className,
@@ -4765,14 +4788,493 @@ var SearchIcon = function SearchIcon(props) {
   }));
 };
 
-var SearchInput = function SearchInput(props) {
+var SearchInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, props, {
     icon: SearchIcon,
     type: "text",
-    clearable: true
+    clearable: true,
+    ref: ref
   }));
+});
+
+/**
+ * Decorator for any input component. Adds a label and additional information to be shown.
+ *
+ * Includes the default error handling from react-hook-form.
+ */
+
+function FormFieldDecorator(_ref) {
+  var name = _ref.name,
+      children = _ref.children,
+      label = _ref.label,
+      fieldRequired = _ref.fieldRequired,
+      info = _ref.info,
+      fieldErrors = _ref.fieldErrors,
+      decoratorClassname = _ref.decoratorClassname;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames(decoratorClassname)
+  }, label && /*#__PURE__*/React__default.createElement("label", {
+    className: "cweb-form-field-label block mb-1",
+    htmlFor: name,
+    "data-is-required": fieldRequired
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    className: "cweb-form-field-label-text",
+    inline: true,
+    text: label
+  })), /*#__PURE__*/React__default.createElement("fieldset", {
+    className: "cweb-form-fieldset"
+  }, children), info && /*#__PURE__*/React__default.createElement(Text, {
+    className: "mt-1 cweb-form-info-text",
+    type: "sm",
+    color: "slate-500",
+    text: info
+  }), /*#__PURE__*/React__default.createElement(ErrorMessage, {
+    errors: fieldErrors,
+    name: name,
+    render: function render(_ref2) {
+      var messages = _ref2.messages;
+      return messages && Object.entries(messages).map(function (_ref3) {
+        var key = _ref3[0],
+            message = _ref3[1];
+        return /*#__PURE__*/React__default.createElement(Text, {
+          key: key,
+          className: "mt-1",
+          text: message,
+          color: "red"
+        });
+      });
+    }
+  }));
+}
+
+var hasError = function hasError(name, errors) {
+  return !!(name && errors && name in errors);
+};
+var isRequired = function isRequired(options) {
+  return !!(options && "required" in options);
 };
 
+var _excluded$h = ["name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
+/**
+ * Input field that can be used in any react-hook-form context.
+ */
+
+var FormInputInner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var name = _ref.name,
+      fieldErrors = _ref.fieldErrors,
+      fieldRequired = _ref.fieldRequired,
+      label = _ref.label,
+      info = _ref.info,
+      decoratorClassname = _ref.decoratorClassname,
+      fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+
+  return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
+    name: name,
+    fieldErrors: fieldErrors,
+    fieldRequired: fieldRequired,
+    label: label,
+    info: info,
+    decoratorClassname: decoratorClassname
+  }, /*#__PURE__*/React__default.createElement(Input, Object.assign({}, fieldProps, {
+    isError: hasError(name, fieldErrors),
+    ref: ref,
+    name: name
+  })));
+});
+var FormInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(FormInputInner, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+
+var css_248z$r = ".radio-form-field-label input[type=\"radio\"]:checked + .radio-circle {\n  --bg-opacity: 1;\n  background-color: #0074DD;\n  background-color: rgba(0, 116, 221, var(--bg-opacity));\n}\n\n.radio-form-field-label[data-has-error=\"true\"] .radio-circle {\n  --border-opacity: 1;\n  border-color: #c53030;\n  border-color: rgba(197, 48, 48, var(--border-opacity));\n  outline: 4px solid rgba(255, 98, 102, 0.3);\n  outline-offset: 0;\n}\n\n.radio-form-field-label\n  input[type=\"radio\"]:checked\n  + .radio-circle\n  .radio-inner-circle {\n  --bg-opacity: 1;\n  background-color: #fff;\n  background-color: rgba(255, 255, 255, var(--bg-opacity));\n}\n";
+styleInject(css_248z$r);
+
+var _excluded$i = ["text", "info", "isError", "innerRef", "className"];
+
+function RadioInner(_ref) {
+  var text = _ref.text,
+      info = _ref.info,
+      isError = _ref.isError,
+      innerRef = _ref.innerRef,
+      className = _ref.className,
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+
+  var value = otherProps.value,
+      disabled = otherProps.disabled;
+  var nameHtmlFor = "field-" + value;
+  return /*#__PURE__*/React__default.createElement("label", {
+    className: "radio-form-field-label leading-tight",
+    htmlFor: nameHtmlFor,
+    "data-has-error": isError,
+    "data-test-id": nameHtmlFor
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-row items-center "
+  }, /*#__PURE__*/React__default.createElement("input", Object.assign({}, otherProps, {
+    className: classNames("appearance-none", className),
+    ref: innerRef,
+    type: "radio",
+    id: nameHtmlFor,
+    disabled: disabled
+  })), /*#__PURE__*/React__default.createElement("span", {
+    className: classNames("flex flex-col items-center justify-center w-4 h-4 transition-colors duration-300 ease-in-out border radio-circle rounded-xl border-slate-300")
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "block transition-colors duration-300 ease-in-out radio-inner-circle w-1.5 h-1.5 rounded-xl"
+  })), text && /*#__PURE__*/React__default.createElement("div", {
+    className: "ml-2"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    inline: true,
+    text: text,
+    type: "base",
+    color: disabled ? "slate-500" : undefined
+  }))), info && /*#__PURE__*/React__default.createElement(Text, {
+    inline: true,
+    className: "ml-6",
+    text: info,
+    type: "sm",
+    color: disabled ? "slate-200" : "slate-500"
+  }));
+}
+/**
+ * TODO: The CSS styling is all messed up, including isError
+ * Warning: don't use this prop before this is resolved
+ * Issue to track: https://github.com/Luscii/web-ui/issues/57
+ * TODO: remove this comment once this is resolved
+ */
+
+
+var RadioV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(RadioInner, Object.assign({}, props, {
+    innerRef: ref
+  }));
+});
+
+var _excluded$j = ["innerRef", "options"];
+
+function RadioGroupInner(_ref) {
+  var innerRef = _ref.innerRef,
+      options = _ref.options,
+      registerProps = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames("flex flex-col space-y-2")
+  }, options.map(function (option) {
+    return /*#__PURE__*/React__default.createElement(RadioV2, Object.assign({
+      key: option.value
+    }, option, registerProps, {
+      ref: innerRef
+    }));
+  }));
+}
+
+var RadioGroupV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(RadioGroupInner, Object.assign({}, props, {
+    innerRef: ref
+  }));
+});
+
+var _excluded$k = ["innerRef", "name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
+/**
+ * Input field that can be used in any react-hook-form context.
+ */
+
+function FormRadioGroupInner(_ref) {
+  var innerRef = _ref.innerRef,
+      name = _ref.name,
+      fieldErrors = _ref.fieldErrors,
+      fieldRequired = _ref.fieldRequired,
+      label = _ref.label,
+      info = _ref.info,
+      decoratorClassname = _ref.decoratorClassname,
+      fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+
+  return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
+    name: name,
+    fieldErrors: fieldErrors,
+    fieldRequired: fieldRequired,
+    label: label,
+    info: info,
+    decoratorClassname: decoratorClassname
+  }, /*#__PURE__*/React__default.createElement(RadioGroupV2, Object.assign({}, fieldProps, {
+    isError: hasError(name, fieldErrors),
+    ref: innerRef,
+    name: name
+  })));
+}
+
+var FormRadioGroup = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(FormRadioGroupInner, Object.assign({}, props, {
+    innerRef: ref
+  }));
+});
+
+var _excluded$l = ["isError", "styles", "options", "onChange", "value", "isMulti", "className"];
+
+function generateCustomStyles$1(hasError, isIE11) {
+  return {
+    option: function option(baseStyles, state) {
+      return _extends({}, baseStyles, {
+        fontWeight: state.isSelected ? "bold" : "normal",
+        fontSize: "14px",
+        backgroundColor: "none",
+        color: "inherit",
+        position: "relative",
+        padding: "0.75rem",
+        opacity: state.isDisabled ? "0.5" : 1,
+        "&:after": {
+          visibility: state.isSelected ? "visible" : "hidden"
+        },
+        transition: "background-color 0.3s ease-in-out",
+        "&:hover": {
+          // tailwind blue-50
+          backgroundColor: state.isSelected ? "transparent" : "#F2FAFD"
+        },
+        pointerEvents: state.isDisabled ? "none" : "auto"
+      });
+    },
+    container: function container(baseStyles) {
+      return _extends({}, baseStyles, {
+        flexGrow: isIE11 ? 0.5 : "initial"
+      });
+    },
+    control: function control(baseStyles, state) {
+      var defaultBorderColor = state.isFocused ? "#045baa" : "#D1D5DB";
+      var validatedBorderColor = hasError ? "#c53030" : defaultBorderColor;
+      var defaultOutline = hasError ? "rgba(255, 98, 102, 0.3)" : "rgba(0, 159, 227, 0.3)";
+      var validatedOutline = "4px solid " + (state.isFocused ? defaultOutline : "transparent");
+      return _extends({}, baseStyles, {
+        fontSize: "14px",
+        transition: "border 0.3s ease-in-out",
+        height: isIE11 ? "50px" : "2.75rem",
+        // primary outline
+        outline: validatedOutline,
+        borderColor: validatedBorderColor,
+        borderWidth: "1px !important",
+        borderStyle: "solid",
+        borderRadius: "4px",
+        boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.05)",
+        "&:hover": {
+          borderColor: "#9CA3AF",
+          // selector for the chevron
+          "> [class*=\"IndicatorsContainer\"]": {
+            opacity: 1
+          }
+        }
+      });
+    },
+    // The placeholder has the following css prop: grid-area: 1/1/2/3;
+    // And grid-area doesn't work on IE11, so we need to style it slightly different.
+    placeholder: function placeholder(baseStyles) {
+      return _extends({}, baseStyles, {
+        fontWeight: 100,
+        color: "#6B7280",
+        paddingTop: isIE11 ? "1.2rem" : undefined
+      });
+    },
+    singleValue: function singleValue(baseStyles) {
+      return _extends({}, baseStyles, {
+        paddingTop: isIE11 ? "1.2rem" : undefined,
+        fontSize: "14px"
+      });
+    },
+    indicatorSeparator: function indicatorSeparator() {
+      return {
+        display: "none"
+      };
+    },
+    menu: function menu(baseStyles) {
+      return _extends({}, baseStyles, {
+        zIndex: 20
+      });
+    }
+  };
+}
+/**
+ * A wrapper around react-select to style it according to our design specification.
+ *
+ * In addition, the value is taken out of the option, instead of returning the complete option.
+ *
+ * Care when using grouped options: the value of the options overspanning all groups need to be unique!
+ * For instance, if you have an option with value "chocolate" in both the groups "flavor" and "dip", then you get unforeseen errors.
+ * This is a problem within react-select itself, not our wrapper.
+ *
+ * Care when using defaultValue: this still requires the complete Option (instead of the value of the Option).
+ * So far there wasn't a use-case for this.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
+  var _ref$isError = _ref.isError,
+      isError = _ref$isError === void 0 ? false : _ref$isError,
+      styles = _ref.styles,
+      options = _ref.options,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      isMulti = _ref.isMulti,
+      className = _ref.className,
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+
+  var isIE11 = "MSInputMethodContext" in window && "documentMode" in document;
+  var customStyles = generateCustomStyles$1(isError, isIE11);
+  var mergedStyles = mergeStyles(customStyles, styles); // the options can be either a list of options or a grouped list of options
+  // this is a typechecker to verify it is the case.
+
+  var isOptionsGrouped = !options ? false : options.reduce(function (acc, o) {
+    return acc || "options" in o && !("values" in o);
+  }, false); // we subsequently flatmap to ensure it's always a list of options
+
+  var flatmappedOptions = !options ? [] : isOptionsGrouped ? options.flatMap(function (g) {
+    return g.options;
+  }) : options; // based on: https://stackoverflow.com/a/70022957
+
+  var onChangeWrapped = !onChange ? undefined : isMulti ? function (val, a) {
+    return onChange(val.map(function (v) {
+      return v.value;
+    }), a);
+  } : function (val, a) {
+    return onChange(val == null ? void 0 : val.value, a);
+  }; // TODO: how can we report the error if a value was given that is not within the options?
+
+  var valueWrapped = !value || !options ? value : isMulti ? flatmappedOptions.filter(function (o) {
+    return value.includes(o.value);
+  }) : flatmappedOptions.find(function (o) {
+    return o.value === value;
+  });
+  return /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({}, otherProps, {
+    ref: innerRef,
+    styles: mergedStyles,
+    options: options,
+    onChange: onChangeWrapped,
+    value: valueWrapped,
+    isMulti: isMulti,
+    className: classNames("customized-select", className)
+  }));
+});
+
+var _excluded$m = ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
+
+var FormSelect = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
+  var control = _ref.control,
+      name = _ref.name,
+      rules = _ref.rules,
+      fieldErrors = _ref.fieldErrors,
+      fieldRequired = _ref.fieldRequired,
+      label = _ref.label,
+      info = _ref.info,
+      decoratorClassname = _ref.decoratorClassname,
+      selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+
+  return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
+    name: name,
+    fieldErrors: fieldErrors,
+    fieldRequired: fieldRequired,
+    label: label,
+    info: info,
+    decoratorClassname: decoratorClassname
+  }, /*#__PURE__*/React__default.createElement(Controller, {
+    name: name,
+    control: control,
+    rules: rules,
+    render: function render(_ref2) {
+      var field = _ref2.field;
+      return /*#__PURE__*/React__default.createElement(Select, Object.assign({}, selectProps, field, {
+        isError: hasError(name, fieldErrors),
+        ref: innerRef
+      }));
+    }
+  }));
+});
+
+var _excluded$n = ["type", "name", "options", "fieldProps"];
+/**
+ * Create a straight forward Form.
+ *
+ * TODO: wrap this in some Page component to style the div and buttons
+ * WARNING: don't use this component before some styling errors are resolved.
+ */
+
+function Form(_ref) {
+  var fields = _ref.fields,
+      onValid = _ref.onValid,
+      onError = _ref.onError,
+      defaultValues = _ref.defaultValues;
+
+  var _useForm = useForm({
+    criteriaMode: "all",
+    defaultValues: defaultValues
+  }),
+      register = _useForm.register,
+      handleSubmit = _useForm.handleSubmit,
+      control = _useForm.control,
+      errors = _useForm.formState.errors;
+
+  var fieldMapper = function fieldMapper(_ref2) {
+    var type = _ref2.type,
+        name = _ref2.name,
+        options = _ref2.options,
+        _ref2$fieldProps = _ref2.fieldProps,
+        fieldProps = _ref2$fieldProps === void 0 ? {} : _ref2$fieldProps,
+        decoratorProps = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
+
+    switch (type) {
+      case "text":
+      case "number":
+      case "email":
+      case "password":
+        return /*#__PURE__*/React__default.createElement(FormInput, Object.assign({
+          key: name
+        }, decoratorProps, {
+          fieldRequired: isRequired(options),
+          fieldErrors: errors
+        }, fieldProps, register(name, options), {
+          type: type || "text"
+        }));
+
+      case "select":
+        return /*#__PURE__*/React__default.createElement(FormSelect, Object.assign({
+          key: name
+        }, decoratorProps, {
+          fieldRequired: isRequired(options),
+          fieldErrors: errors
+        }, fieldProps, {
+          control: control,
+          rules: options,
+          name: name
+        }));
+
+      case "radioGroup":
+        return /*#__PURE__*/React__default.createElement(FormRadioGroup, Object.assign({
+          key: name
+        }, decoratorProps, {
+          fieldRequired: isRequired(options),
+          fieldErrors: errors
+        }, fieldProps, register(name, options)));
+
+      default:
+        return undefined;
+    }
+  };
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "space-y-4"
+  }, fields.map(function (props) {
+    if (props.type === "row") {
+      var rowFields = props.fields,
+          key = props.key;
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "flex flex-row",
+        key: key
+      }, rowFields.map(fieldMapper));
+    }
+
+    return fieldMapper(props);
+  }), /*#__PURE__*/React__default.createElement(PrimaryButton, {
+    onClick: handleSubmit(onValid, onError),
+    text: "submit"
+  }));
+}
+
 var AlertsIcon = function AlertsIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", {
     className: props.className,
@@ -5544,5 +6046,5 @@ var SearchCancelIcon = function SearchCancelIcon(props) {
   }));
 };
 
-export { ACKNOWLEDGEMENT_TYPE_OPTIONS, Acknowledgement, AddIcon, AlertsIcon, Avatar, Badge, BellIcon, Breadcrumbs, CRUDPage, Carousel, CenteredHero, ChartIcon, ChatBoxIcon, CheckIcon, Checkbox, CheckboxList, ChevronDoubleIcon, ConfirmationDialog, CrossIcon, Datepicker as DatePicker, DeleteIcon, DownArrowIcon, DragIcon, Dropdown, EditIcon, EmptyListMessage, EmptyStateDashboardIcon, ErrorBlock, ExclamationMarkIcon, EyeIcon, GearIcon, GroupIcon, HamburgerIcon, HeartIcon, INPUT_TYPES, InfoBlock, InfoField, Input, LeftArrowIcon, LightBulbIcon, Line, List, LoadingIndicator, LockIcon, Menu, MessagesIcon, MultiSelect, NavLayout, NavMenu, NotesIcon, NotificationBanner, Page, PageHeader, PaginationMenu, PinIcon, PreviewPhone, PrimaryButton, PrintIcon, Radio, RadioGroup, RightArrowIcon, SearchCancelIcon, SearchIcon, SearchInput, SecondaryButton, Section, SectionItem, SectionItemWithContent, SettingsMenuButton, SmallCircleIcon, SmallDiamondIcon, SmallSquareIcon, SpaceRocketIcon, Spinner, StarIcon, Steps, Switcher, TabLinks, Tabbar, Table, Tag, TagGroup, TertiaryButton, Text, Textarea as TextArea, TextEditor, TextEditorV2, TextLink, Timeline, Title, ViewItem };
+export { ACKNOWLEDGEMENT_TYPE_OPTIONS, Acknowledgement, AddIcon, AlertsIcon, Avatar, Badge, BellIcon, Breadcrumbs, CRUDPage, Carousel, CenteredHero, ChartIcon, ChatBoxIcon, CheckIcon, Checkbox, CheckboxList, ChevronDoubleIcon, ConfirmationDialog, CrossIcon, Datepicker as DatePicker, DeleteIcon, DownArrowIcon, DragIcon, Dropdown, EditIcon, EmptyListMessage, EmptyStateDashboardIcon, ErrorBlock, ExclamationMarkIcon, EyeIcon, Form, GearIcon, GroupIcon, HamburgerIcon, HeartIcon, INPUT_TYPES, InfoBlock, InfoField, Input, LeftArrowIcon, LightBulbIcon, Line, List, LoadingIndicator, LockIcon, Menu, MessagesIcon, MultiSelect, NavLayout, NavMenu, NotesIcon, NotificationBanner, Page, PageHeader, PaginationMenu, PinIcon, PreviewPhone, PrimaryButton, PrintIcon, Radio, RadioGroup, RightArrowIcon, SearchCancelIcon, SearchIcon, SearchInput, SecondaryButton, Section, SectionItem, SectionItemWithContent, SettingsMenuButton, SmallCircleIcon, SmallDiamondIcon, SmallSquareIcon, SpaceRocketIcon, Spinner, StarIcon, Steps, Switcher, TabLinks, Tabbar, Table, Tag, TagGroup, TertiaryButton, Text, Textarea as TextArea, TextEditor, TextEditorV2, TextLink, Timeline, Title, ViewItem };
 //# sourceMappingURL=web-ui.esm.js.map