@luscii-healthtech/web-ui 2.0.0 → 2.3.0

package/dist/web-ui.cjs.development.js

@@ -26,6 +26,8 @@ var reactDraftWysiwyg = require('react-draft-wysiwyg');
 var draftToHtml = _interopDefault(require('draftjs-to-html'));
 var htmlToDraft = _interopDefault(require('html-to-draftjs'));
 require('react-draft-wysiwyg/dist/react-draft-wysiwyg.css');
+var reactHookForm = require('react-hook-form');
+var errorMessage = require('@hookform/error-message');
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -1862,7 +1864,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 = {
@@ -1871,8 +1873,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,
@@ -1885,10 +1886,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 === "";
@@ -1897,7 +1899,6 @@ var Input = function Input(_ref) {
       innerValue = _useState[0],
       setInnerValue = _useState[1];
 
-  var inputRef = React.useRef(null);
   React.useEffect(function () {
     setInnerValue(value);
   }, [value]);
@@ -1939,13 +1940,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: {
@@ -1958,10 +1959,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,
@@ -1971,10 +1969,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 !== "",
@@ -1994,7 +1996,7 @@ var Input = function Input(_ref) {
     }),
     onClick: clearField
   }))));
-};
+});
 
 var Line = function Line(_ref) {
   var left = _ref.left,
@@ -2338,6 +2340,10 @@ function generateCustomStyles(hasError, isIE11) {
     }
   };
 }
+/**
+ * @deprecated: use SelectV2 instead
+ */
+
 
 var CustomSelect = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var className = props.className,
@@ -2720,6 +2726,69 @@ var ListItem = function ListItem(_ref) {
   }), accessories);
 };
 
+var css_248z$g = ".list-skeleton .skeleton-box {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  overflow: hidden;\n  background-color: #cbd5e1;\n  border-radius: 3px;\n}\n\n.list-skeleton .skeleton-box::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n\n.list-skeleton .skeleton-box.is-circle {\n  border-radius: 50%;\n}\n\n.list-skeleton .skeleton-box.is-button {\n  background-color: #e2e8f0;\n  border-radius: 9999px;\n}\n\n.list-skeleton .skeleton-box.is-button::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(221, 221, 221, 0) 0, rgba(221, 221, 221, 0.2) 20%, rgba(221, 221, 221, 0.5) 60%, rgba(221, 221, 221, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n";
+styleInject(css_248z$g);
+
+var ListItemSkeleton = function ListItemSkeleton() {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-row items-center p-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "skeleton-box is-circle mr-2",
+    style: {
+      width: 32 + "px",
+      height: 32 + "px"
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "skeleton-box mb-1",
+    style: {
+      width: 160 + "px",
+      height: 14 + "px"
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "skeleton-box",
+    style: {
+      width: 110 + "px",
+      height: 14 + "px"
+    }
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "skeleton-box is-button ml-auto rounded-full",
+    style: {
+      width: 24 + "px",
+      height: 24 + "px"
+    }
+  }));
+};
+
+var ListSkeleton = function ListSkeleton(_ref) {
+  var items = _ref.items;
+  var skeletonItems = Array.from({
+    length: items || 5
+  }, function (_, i) {
+    return /*#__PURE__*/React__default.createElement(ListItemSkeleton, {
+      key: i
+    });
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col divide-y divide-slate-200 bg-white border-slate-50 border rounded-lg shadow list-skeleton"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-row items-center px-4 py-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "skeleton-box",
+    style: {
+      width: 160 + "px",
+      height: 14 + "px"
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "skeleton-box is-button ml-auto",
+    style: {
+      width: 110 + "px",
+      height: 44 + "px"
+    }
+  })), skeletonItems);
+};
+
 var List = function List(_ref) {
   var title = _ref.title,
       headerButton = _ref.headerButton,
@@ -2727,7 +2796,8 @@ var List = function List(_ref) {
       items = _ref.items,
       onAssetLoadError = _ref.onAssetLoadError,
       onDragEnd = _ref.onDragEnd,
-      emptyStateMessage = _ref.emptyStateMessage;
+      emptyStateMessage = _ref.emptyStateMessage,
+      isLoading = _ref.isLoading;
   var listRef = React.useRef(null);
   var dragulaRef = React.useRef(null);
   var hasHeader = !!(title || headerButton);
@@ -2777,6 +2847,13 @@ var List = function List(_ref) {
   };
 
   var roundTop = !hasHeader || hasHeader && headerTransparent;
+
+  if (isLoading) {
+    return /*#__PURE__*/React__default.createElement(ListSkeleton, {
+      items: items.length
+    });
+  }
+
   return /*#__PURE__*/React__default.createElement("div", {
     "data-test-id": "list-component"
   }, (title || headerButton) && /*#__PURE__*/React__default.createElement("div", {
@@ -3081,8 +3158,8 @@ function handleImplicitSelect(implicitSelected, event, list, property) {
   return newList;
 }
 
-var css_248z$g = ".cweb-multiselect {\n  display: flex;\n}\n\n.cweb-multiselect .cweb-multiselect-checkbox {\n  margin-bottom: 0px;\n  margin-top: 0.5rem;\n  width: 100%;\n  text-transform: capitalize;\n}\n\n.cweb-multiselect .cweb-switch-wrapper {\n  display: flex;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-multiselect-switch {\n  width: 50px;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-multiselect-switch .cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n  background-color: #6abfa5;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-switch-title {\n  width: 100px;\n  color: #737373;\n  font-size: 16px;\n  line-height: 1.8em;\n}\n";
-styleInject(css_248z$g);
+var css_248z$h = ".cweb-multiselect {\n  display: flex;\n}\n\n.cweb-multiselect .cweb-multiselect-checkbox {\n  margin-bottom: 0px;\n  margin-top: 0.5rem;\n  width: 100%;\n  text-transform: capitalize;\n}\n\n.cweb-multiselect .cweb-switch-wrapper {\n  display: flex;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-multiselect-switch {\n  width: 50px;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-multiselect-switch .cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n  background-color: #6abfa5;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-switch-title {\n  width: 100px;\n  color: #737373;\n  font-size: 16px;\n  line-height: 1.8em;\n}\n";
+styleInject(css_248z$h);
 
 function MultiSelect(_ref) {
   var checkboxList = _ref.checkboxList,
@@ -3428,8 +3505,8 @@ NotificationBanner.defaultProps = {
   onButtonClick: undefined
 };
 
-var css_248z$h = ".cweb-page {\n  width: 100%;\n  max-width: 1140px;\n  margin: 32px auto 0 auto;\n}\n\n.cweb-page .cweb-page-breadcrumbs {\n  margin-bottom: 16px;\n}\n\n.cweb-page .page-spinner {\n  margin-left: 8px;\n  margin-bottom: 4px;\n}\n\n.cweb-page .page-spinner img {\n  width: 21px;\n}\n\n.cweb-page .cweb-page-header {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  flex-grow: 0;\n}\n\n.cweb-page .cweb-page-header .cweb-page-title {\n  display: inline;\n}\n\n.cweb-page .cweb-page-header.accessory-right {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.cweb-page .cweb-page-header.accessory-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n@media screen and (max-width: 426px) {\n  .cweb-page .cweb-page-header.accessory-bottom {\n    max-width: 75vw;\n  }\n\n  .cweb-page .cweb-page-header.accessory-bottom img {\n    max-width: 10vw;\n  }\n\n  .cweb-page .cweb-page-header.accessory-bottom button p {\n    font-size: 4vw;\n  }\n}\n\n.cweb-page .cweb-page-header.accessory-bottom .cweb-page-title {\n  margin-bottom: 8px;\n  display: inline;\n}\n";
-styleInject(css_248z$h);
+var css_248z$i = ".cweb-page {\n  width: 100%;\n  max-width: 1140px;\n  margin: 32px auto 0 auto;\n}\n\n.cweb-page .cweb-page-breadcrumbs {\n  margin-bottom: 16px;\n}\n\n.cweb-page .page-spinner {\n  margin-left: 8px;\n  margin-bottom: 4px;\n}\n\n.cweb-page .page-spinner img {\n  width: 21px;\n}\n\n.cweb-page .cweb-page-header {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  flex-grow: 0;\n}\n\n.cweb-page .cweb-page-header .cweb-page-title {\n  display: inline;\n}\n\n.cweb-page .cweb-page-header.accessory-right {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.cweb-page .cweb-page-header.accessory-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n@media screen and (max-width: 426px) {\n  .cweb-page .cweb-page-header.accessory-bottom {\n    max-width: 75vw;\n  }\n\n  .cweb-page .cweb-page-header.accessory-bottom img {\n    max-width: 10vw;\n  }\n\n  .cweb-page .cweb-page-header.accessory-bottom button p {\n    font-size: 4vw;\n  }\n}\n\n.cweb-page .cweb-page-header.accessory-bottom .cweb-page-title {\n  margin-bottom: 8px;\n  display: inline;\n}\n";
+styleInject(css_248z$i);
 
 /**
  * Renders page's content, if `isLoading` is false otherwise shows loading indicator.
@@ -3609,8 +3686,8 @@ var Steps = function Steps(_ref) {
   }, renderedSteps);
 };
 
-var css_248z$i = ".cweb-crud-page {\n  width: 100%;\n  margin: 36px auto 0;\n}\n\n.cweb-crud-page-form-container {\n  background-color: #fff;\n  border-radius: 8px;\n  padding: 24px;\n  margin-top: 16px;\n}\n\n.cweb-crud-page-button-line {\n  border-top: 1px solid #eeeeee;\n  padding-top: 16px;\n  margin-top: 16px;\n}\n\n.cweb-crud-page-loading-container {\n  height: 90vh;\n  /* puting this in 100vh causes an overflow bug */\n  overflow-y: hidden;\n  position: relative;\n}\n\n.cweb-crud-page-loading-container .crud-page-loader {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n";
-styleInject(css_248z$i);
+var css_248z$j = ".cweb-crud-page {\n  width: 100%;\n  margin: 36px auto 0;\n}\n\n.cweb-crud-page-form-container {\n  background-color: #fff;\n  border-radius: 8px;\n  padding: 24px;\n  margin-top: 16px;\n}\n\n.cweb-crud-page-button-line {\n  border-top: 1px solid #eeeeee;\n  padding-top: 16px;\n  margin-top: 16px;\n}\n\n.cweb-crud-page-loading-container {\n  height: 90vh;\n  /* puting this in 100vh causes an overflow bug */\n  overflow-y: hidden;\n  position: relative;\n}\n\n.cweb-crud-page-loading-container .crud-page-loader {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n";
+styleInject(css_248z$j);
 
 function CRUDPage(_ref) {
   var _ref$dataTestId = _ref.dataTestId,
@@ -3816,8 +3893,12 @@ var PreviewPhone = function PreviewPhone(_ref) {
   }))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
 
-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);
+var css_248z$k = ".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$k);
+
+/**
+ * @deprecated: use RadioV2 instead
+ */
 
 var Radio = /*#__PURE__*/function (_PureComponent) {
   _inheritsLoose(Radio, _PureComponent);
@@ -3915,10 +3996,13 @@ Radio.propTypes = {
   onChange: PropTypes.func
 };
 
-var css_248z$k = ".cweb-radio-group {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: center;\n}\n\n.cweb-radio-group > .cweb-radio {\n  flex: 0 0 auto;\n  margin-right: 8px;\n}\n\n.cweb-radio-group .cweb-form-field {\n  margin-bottom: 12px;\n}\n\n.cweb-radio-group .cweb-form-info-text {\n  margin-left: 1.5rem;\n}\n\n.cweb-radio-group.vertical {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.cweb-radio-group.vertical .cweb-form-field:not(:last-child) {\n  margin-bottom: 8px;\n}\n\n.cweb-radio-group.vertical > .cweb-radio {\n  flex: 0 0 auto;\n  margin-bottom: 8px;\n}\n\n.cweb-radio-group.hasError > .cweb-radio .cweb-radio-icon-container {\n  border: 1px solid #ff6266 !important;\n}\n";
-styleInject(css_248z$k);
+var css_248z$l = ".cweb-radio-group {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: center;\n}\n\n.cweb-radio-group > .cweb-radio {\n  flex: 0 0 auto;\n  margin-right: 8px;\n}\n\n.cweb-radio-group .cweb-form-field {\n  margin-bottom: 12px;\n}\n\n.cweb-radio-group .cweb-form-info-text {\n  margin-left: 1.5rem;\n}\n\n.cweb-radio-group.vertical {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.cweb-radio-group.vertical .cweb-form-field:not(:last-child) {\n  margin-bottom: 8px;\n}\n\n.cweb-radio-group.vertical > .cweb-radio {\n  flex: 0 0 auto;\n  margin-bottom: 8px;\n}\n\n.cweb-radio-group.hasError > .cweb-radio .cweb-radio-icon-container {\n  border: 1px solid #ff6266 !important;\n}\n";
+styleInject(css_248z$l);
 
 var _excluded$b = ["className", "radioClassName", "name", "selectedOption", "isVertical", "radioOptions", "onChange", "error", "isDisabled"];
+/**
+ * @deprecated: use RadioV2 instead
+ */
 
 function RadioGroup(_ref) {
   var className = _ref.className,
@@ -3973,8 +4057,8 @@ RadioGroup.propTypes = {
   onChange: PropTypes.func
 };
 
-var css_248z$l = ".cweb-section .cweb-button:last-of-type {\n  margin-right: 24px;\n}\n\n.cweb-section .cweb-button:not(:last-of-type) {\n  margin-right: 8px;\n}\n\n.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {\n  margin-left: auto;\n  width: 32px;\n  height: 32px;\n}\n\n.cweb-section .cweb-button.add-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%2222%22 fill%3D%22white%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M22 32C23.1046 32 24 31.1046 24 30L24 24H30C31.1046 24 32 23.1046 32 22C32 20.8954 31.1046 20 30 20H24L24 14C24 12.8954 23.1046 12 22 12C20.8954 12 20 12.8954 20 14L20 20H14C12.8954 20 12 20.8954 12 22C12 23.1046 12.8954 24 14 24H20L20 30C20 31.1046 20.8954 32 22 32Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%230A78B2%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M21 12C19.8954 12 19 12.8954 19 14V19L14 19C12.8954 19 12 19.8954 12 21V23C12 24.1046 12.8954 25 14 25H19V30C19 31.1046 19.8954 32 21 32H23C24.1046 32 25 31.1046 25 30V25H30C31.1046 25 32 24.1046 32 23V21C32 19.8954 31.1046 19 30 19L25 19V14C25 12.8954 24.1046 12 23 12H21Z%22 fill%3D%22%23007BBB%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23007BBB%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%230A78B2%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FF6266%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FF6266%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FC494E%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FC494E%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section > .cweb-section-header {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid #eeeeee;\n  width: 100%;\n  padding: 18px 24px;\n}\n\n.cweb-section > .cweb-section-footer {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  border-top: 1px solid #eeeeee;\n  width: 100%;\n  padding: 1rem 24px 1rem 24px;\n}\n\n.cweb-section > .cweb-section-footer img {\n  width: 32px;\n  height: 32px;\n}\n";
-styleInject(css_248z$l);
+var css_248z$m = ".cweb-section .cweb-button:last-of-type {\n  margin-right: 24px;\n}\n\n.cweb-section .cweb-button:not(:last-of-type) {\n  margin-right: 8px;\n}\n\n.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {\n  margin-left: auto;\n  width: 32px;\n  height: 32px;\n}\n\n.cweb-section .cweb-button.add-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%2222%22 fill%3D%22white%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M22 32C23.1046 32 24 31.1046 24 30L24 24H30C31.1046 24 32 23.1046 32 22C32 20.8954 31.1046 20 30 20H24L24 14C24 12.8954 23.1046 12 22 12C20.8954 12 20 12.8954 20 14L20 20H14C12.8954 20 12 20.8954 12 22C12 23.1046 12.8954 24 14 24H20L20 30C20 31.1046 20.8954 32 22 32Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%230A78B2%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M21 12C19.8954 12 19 12.8954 19 14V19L14 19C12.8954 19 12 19.8954 12 21V23C12 24.1046 12.8954 25 14 25H19V30C19 31.1046 19.8954 32 21 32H23C24.1046 32 25 31.1046 25 30V25H30C31.1046 25 32 24.1046 32 23V21C32 19.8954 31.1046 19 30 19L25 19V14C25 12.8954 24.1046 12 23 12H21Z%22 fill%3D%22%23007BBB%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23007BBB%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%230A78B2%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FF6266%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FF6266%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FC494E%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FC494E%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section > .cweb-section-header {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid #eeeeee;\n  width: 100%;\n  padding: 18px 24px;\n}\n\n.cweb-section > .cweb-section-footer {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  border-top: 1px solid #eeeeee;\n  width: 100%;\n  padding: 1rem 24px 1rem 24px;\n}\n\n.cweb-section > .cweb-section-footer img {\n  width: 32px;\n  height: 32px;\n}\n";
+styleInject(css_248z$m);
 
 var _excluded$c = ["title", "buttons", "footer", "children", "className", "isLoading", "loadingIndicatorProps"];
 function Section(_ref) {
@@ -4014,8 +4098,8 @@ function Section(_ref) {
   }, footer));
 }
 
-var css_248z$m = ".cweb-list-item {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px 0 16px 0;\n  border-bottom: 1px solid #eeeeee;\n}\n\n.cweb-list-item:last-child {\n  border-bottom: none;\n}\n\n.cweb-list-item.cweb-list-item-clickable {\n  cursor: pointer;\n}\n\n.cweb-list-item.cweb-list-item-clickable:hover {\n  background-color: #f2fafd;\n}\n";
-styleInject(css_248z$m);
+var css_248z$n = ".cweb-list-item {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px 0 16px 0;\n  border-bottom: 1px solid #eeeeee;\n}\n\n.cweb-list-item:last-child {\n  border-bottom: none;\n}\n\n.cweb-list-item.cweb-list-item-clickable {\n  cursor: pointer;\n}\n\n.cweb-list-item.cweb-list-item-clickable:hover {\n  background-color: #f2fafd;\n}\n";
+styleInject(css_248z$n);
 
 var _excluded$d = ["children", "className", "onClick"];
 var SectionItem = function SectionItem(props) {
@@ -4163,8 +4247,8 @@ var SettingsMenuButton = function SettingsMenuButton(props) {
   })));
 };
 
-var css_248z$n = ".cweb-switcher-item {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link {\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon {\n  display: flex;\n  align-items: center;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default,\n      .cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n  width: 20px;\n  height: 20px;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n  display: none;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-text {\n  color: #737373;\n  transition: color 0.4s ease;\n  padding-bottom: 0;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon + .cweb-switcher-item-link-text {\n  margin-left: 8px;\n  padding: 0;\n}\n\n.cweb-switcher-item.is-selected, .cweb-switcher-item:hover, .cweb-switcher-item:active {\n  border-color: #0074dd;\n  z-index: 1;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default {\n  display: none;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n  display: inherit;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-text {\n  color: #0074dd;\n}\n\n.cweb-switcher-item.is-disabled {\n  pointer-events: none;\n}\n";
-styleInject(css_248z$n);
+var css_248z$o = ".cweb-switcher-item {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link {\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon {\n  display: flex;\n  align-items: center;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default,\n      .cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n  width: 20px;\n  height: 20px;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n  display: none;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-text {\n  color: #737373;\n  transition: color 0.4s ease;\n  padding-bottom: 0;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon + .cweb-switcher-item-link-text {\n  margin-left: 8px;\n  padding: 0;\n}\n\n.cweb-switcher-item.is-selected, .cweb-switcher-item:hover, .cweb-switcher-item:active {\n  border-color: #0074dd;\n  z-index: 1;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default {\n  display: none;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n  display: inherit;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-text {\n  color: #0074dd;\n}\n\n.cweb-switcher-item.is-disabled {\n  pointer-events: none;\n}\n";
+styleInject(css_248z$o);
 
 SwitcherItem.propTypes = {
   name: PropTypes.string,
@@ -4497,8 +4581,8 @@ var TagGroup = function TagGroup(_ref) {
   }));
 };
 
-var css_248z$o = ".cweb-textarea {\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  outline: none;\n  background-color: #ffffff;\n  resize: none;\n}\n\n.cweb-textarea.has-icon {\n  background-size: 24px;\n  background-position: 10px 10px;\n  background-repeat: no-repeat;\n  padding-left: 44px;\n}\n\n.cweb-textarea.resizable {\n  resize: both;\n}\n\n.cweb-textarea.resizable-x {\n  resize: horizontal;\n}\n\n.cweb-textarea.resizable-y {\n  resize: vertical;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n  color: #737373;\n}\n\n.cweb-textarea::placeholder {\n  color: #737373;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n  color: #64748b !important;\n}\n\n.cweb-textarea::-ms-input-placeholder {\n  color: #64748b;\n}\n\n.cweb-textarea:focus {\n  border-color: #0074dd;\n}\n\n.cweb-textarea:disabled {\n  cursor: not-allowed;\n}\n\n.cweb-textarea.has-error {\n  border: 1px solid #ff6266;\n  color: #ff6266;\n}\n";
-styleInject(css_248z$o);
+var css_248z$p = ".cweb-textarea {\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  outline: none;\n  background-color: #ffffff;\n  resize: none;\n}\n\n.cweb-textarea.has-icon {\n  background-size: 24px;\n  background-position: 10px 10px;\n  background-repeat: no-repeat;\n  padding-left: 44px;\n}\n\n.cweb-textarea.resizable {\n  resize: both;\n}\n\n.cweb-textarea.resizable-x {\n  resize: horizontal;\n}\n\n.cweb-textarea.resizable-y {\n  resize: vertical;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n  color: #737373;\n}\n\n.cweb-textarea::placeholder {\n  color: #737373;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n  color: #64748b !important;\n}\n\n.cweb-textarea::-ms-input-placeholder {\n  color: #64748b;\n}\n\n.cweb-textarea:focus {\n  border-color: #0074dd;\n}\n\n.cweb-textarea:disabled {\n  cursor: not-allowed;\n}\n\n.cweb-textarea.has-error {\n  border: 1px solid #ff6266;\n  color: #ff6266;\n}\n";
+styleInject(css_248z$p);
 
 var _excluded$f = ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter"];
 var RESIZE_TYPES = {
@@ -4585,8 +4669,8 @@ function Textarea(props) {
   }));
 }
 
-var css_248z$p = ".ql-editor {\n  resize: vertical;\n  min-height: 10rem;\n}\n\n.ql-snow.ql-toolbar {\n  display: block;\n  background: #f1f5f9;\n  border-top-left-radius: 0.5em;\n  border-top-right-radius: 0.5em;\n  margin-top: 0.5em;\n}\n";
-styleInject(css_248z$p);
+var css_248z$q = ".ql-editor {\n  resize: vertical;\n  min-height: 10rem;\n}\n\n.ql-snow.ql-toolbar {\n  display: block;\n  background: #f1f5f9;\n  border-top-left-radius: 0.5em;\n  border-top-right-radius: 0.5em;\n  margin-top: 0.5em;\n}\n";
+styleInject(css_248z$q);
 
 function TextEditor(_ref) {
   var defaultValue = _ref.defaultValue,
@@ -4640,8 +4724,8 @@ TextEditor.propTypes = {
   onValueChange: PropTypes.func.isRequired
 };
 
-var css_248z$q = ".editor .rdw-editor {\n  overflow-y: auto;\n}\n\n.editor .rdw-editor .rdw-link-modal {\n  width: 20rem;\n  height: 19rem;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-label,\n    .editor .rdw-editor .rdw-link-modal .rdw-link-modal-target-option {\n  font-weight: normal;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-input {\n  margin-bottom: 1rem;\n  font-size: 16px;\n  font-weight: normal;\n  line-height: 21px;\n  color: #2d2d2d;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  outline: none;\n  background-color: #ffffff;\n  padding: 12px;\n  caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn {\n  border-radius: 1.375rem;\n  width: 6.5rem;\n  height: 2.75rem;\n  border: 1px solid #009fe3;\n  background-color: transparent;\n  color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:first-child,\n      .editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:disabled {\n  background: #009fe3;\n  color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-embedded-modal {\n  width: 22rem;\n  height: 15rem;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input,\n    .editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n  font-size: 16px;\n  font-weight: normal;\n  line-height: 21px;\n  color: #2d2d2d;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  outline: none;\n  background-color: #ffffff;\n  padding: 12px;\n  caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input {\n  width: 100%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n  width: 90%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn {\n  border-radius: 1.375rem;\n  width: 6.5rem;\n  height: 2.75rem;\n  border: 1px solid #009fe3;\n  background-color: transparent;\n  color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:first-child,\n      .editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:disabled {\n  background: #009fe3;\n  color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-editor-main {\n  min-height: 14rem;\n  overflow: hidden;\n}\n\n.editor .rdw-editor .rdw-editor-main .DraftEditor-root {\n  margin: 0 12px;\n}\n";
-styleInject(css_248z$q);
+var css_248z$r = ".editor .rdw-editor {\n  overflow-y: auto;\n}\n\n.editor .rdw-editor .rdw-link-modal {\n  width: 20rem;\n  height: 19rem;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-label,\n    .editor .rdw-editor .rdw-link-modal .rdw-link-modal-target-option {\n  font-weight: normal;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-input {\n  margin-bottom: 1rem;\n  font-size: 16px;\n  font-weight: normal;\n  line-height: 21px;\n  color: #2d2d2d;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  outline: none;\n  background-color: #ffffff;\n  padding: 12px;\n  caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn {\n  border-radius: 1.375rem;\n  width: 6.5rem;\n  height: 2.75rem;\n  border: 1px solid #009fe3;\n  background-color: transparent;\n  color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:first-child,\n      .editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:disabled {\n  background: #009fe3;\n  color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-embedded-modal {\n  width: 22rem;\n  height: 15rem;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input,\n    .editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n  font-size: 16px;\n  font-weight: normal;\n  line-height: 21px;\n  color: #2d2d2d;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  outline: none;\n  background-color: #ffffff;\n  padding: 12px;\n  caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input {\n  width: 100%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n  width: 90%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn {\n  border-radius: 1.375rem;\n  width: 6.5rem;\n  height: 2.75rem;\n  border: 1px solid #009fe3;\n  background-color: transparent;\n  color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:first-child,\n      .editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:disabled {\n  background: #009fe3;\n  color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-editor-main {\n  min-height: 14rem;\n  overflow: hidden;\n}\n\n.editor .rdw-editor .rdw-editor-main .DraftEditor-root {\n  margin: 0 12px;\n}\n";
+styleInject(css_248z$r);
 
 var TextEditorV2 = function TextEditorV2(_ref) {
   var defaultValue = _ref.defaultValue,
@@ -4783,13 +4867,492 @@ 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.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$s = ".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$s);
+
+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 = ReactSelect.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__default, 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(reactHookForm.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 = reactHookForm.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", {
@@ -5592,6 +6155,7 @@ exports.EmptyStateDashboardIcon = EmptyStateDashboardIcon;
 exports.ErrorBlock = ErrorBlock;
 exports.ExclamationMarkIcon = ExclamationMarkIcon;
 exports.EyeIcon = EyeIcon;
+exports.Form = Form;
 exports.GearIcon = GearIcon;
 exports.GroupIcon = GroupIcon;
 exports.HamburgerIcon = HamburgerIcon;