@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/dist/web-ui.esm.js

@@ -19,6 +19,7 @@ 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 pick from 'lodash-es/pick';
 import { Controller, useForm } from 'react-hook-form';
 import { ErrorMessage } from '@hookform/error-message';
 
@@ -78,14 +79,21 @@ var FlexContainer = function FlexContainer(props) {
   var children = props.children,
       alignItems = props.alignItems,
       verticallySpaced = props.verticallySpaced,
-      horitontallySpaced = props.horitontallySpaced,
+      horizontallySpaced = props.horizontallySpaced,
       justifyContent = props.justifyContent,
       hasPadding = props.hasPadding,
+      _props$position = props.position,
+      position = _props$position === void 0 ? "" : _props$position,
       type = props.type;
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames("flex w-full", {
       "flex-row": type === "row",
       "flex-col": type === "column",
+      "relative": position === "relative",
+      "absolute": position === "absolute",
+      "static": position === "static",
+      "fixed": position === "fixed",
+      "sticky": position === "sticky",
       "justify-center": justifyContent === "center",
       "justify-start": justifyContent === "start",
       "justify-end": justifyContent === "end",
@@ -93,7 +101,7 @@ var FlexContainer = function FlexContainer(props) {
       "items-start": alignItems === "start",
       "items-center": alignItems === "center",
       "items-end": alignItems === "end",
-      "space-x-4": horitontallySpaced,
+      "space-x-4": horizontallySpaced,
       "space-y-4": verticallySpaced,
       "p-4": hasPadding
     })
@@ -112,7 +120,7 @@ var FlexColumn = function FlexColumn(props) {
       spaced = _props$spaced === void 0 ? true : _props$spaced,
       rest = _objectWithoutPropertiesLoose(props, _excluded);
 
-  return /*#__PURE__*/React__default.createElement(FlexContainer, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(FlexContainer, _extends({}, rest, {
     type: "column",
     verticallySpaced: spaced
   }), children);
@@ -130,9 +138,9 @@ var FlexRow = function FlexRow(props) {
       spaced = _props$spaced === void 0 ? true : _props$spaced,
       rest = _objectWithoutPropertiesLoose(props, _excluded$1);
 
-  return /*#__PURE__*/React__default.createElement(FlexContainer, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(FlexContainer, _extends({}, rest, {
     type: "row",
-    horitontallySpaced: spaced
+    horizontallySpaced: spaced
   }), children);
 };
 
@@ -217,11 +225,11 @@ var Text = function Text(props) {
     }, //can be used to overwrite other classes like the color
     props.className)
   };
-  return props.containsDangerousHtml ? /*#__PURE__*/React__default.createElement("p", Object.assign({}, containerProps, {
+  return props.containsDangerousHtml ? /*#__PURE__*/React__default.createElement("p", _extends({}, containerProps, {
     dangerouslySetInnerHTML: {
       __html: props.text
     }
-  })) : /*#__PURE__*/React__default.createElement("p", Object.assign({}, containerProps), props.text);
+  })) : /*#__PURE__*/React__default.createElement("p", _extends({}, containerProps), props.text);
 };
 Text.defaultProps = {
   type: "base",
@@ -677,7 +685,7 @@ var ButtonV2 = function ButtonV2(_ref) {
     "opacity-50": isDisabled,
     "pointer-events-none": isDisabled || isPending
   }, className);
-  return /*#__PURE__*/React__default.createElement("button", Object.assign({}, otherAttributes, {
+  return /*#__PURE__*/React__default.createElement("button", _extends({}, otherAttributes, {
     className: buttonClassName,
     type: "button",
     onClick: handleClick,
@@ -709,14 +717,14 @@ var ButtonV2 = function ButtonV2(_ref) {
 };
 
 var PrimaryButton = function PrimaryButton(props) {
-  return /*#__PURE__*/React__default.createElement(ButtonV2, Object.assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(ButtonV2, _extends({}, props, {
     className: classNames(["text-white", "bg-blue-800", "border-primary-transparent", "hover:bg-blue-900"], props.className),
     textColor: "white"
   }));
 };
 
 var SecondaryButton = function SecondaryButton(props) {
-  return /*#__PURE__*/React__default.createElement(ButtonV2, Object.assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(ButtonV2, _extends({}, props, {
     className: classNames(["text-blue-800", "bg-white", "border-slate-300", "hover:text-blue-900", "hover:border-slate-400", "focus:border-blue-800"], props.className),
     textColor: "blue-800",
     textHoverColor: "blue-900"
@@ -724,7 +732,7 @@ var SecondaryButton = function SecondaryButton(props) {
 };
 
 var TertiaryButton = function TertiaryButton(props) {
-  return /*#__PURE__*/React__default.createElement(ButtonV2, Object.assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(ButtonV2, _extends({}, props, {
     className: classNames(["text-blue-800", "bg-transparent", "border-transparent", "hover:text-blue-900", "focus:border-blue-800", "shadow-none"], props.className),
     textColor: "blue-800",
     textHoverColor: "blue-900"
@@ -1032,7 +1040,7 @@ function Button(props) {
     hidden: !text,
     "ml-3": hasIcon
   });
-  return /*#__PURE__*/React__default.createElement("button", Object.assign({}, otherAttributes, {
+  return /*#__PURE__*/React__default.createElement("button", _extends({}, otherAttributes, {
     "aria-disabled": isButtonDisabled,
     disabled: isButtonDisabled,
     className: containerClassName,
@@ -1194,7 +1202,8 @@ var CenteredHero = function CenteredHero(_ref) {
   var title = _ref.title,
       text = _ref.text,
       image = _ref.image,
-      buttons = _ref.buttons,
+      _ref$buttons = _ref.buttons,
+      buttons = _ref$buttons === void 0 ? [] : _ref$buttons,
       _ref$background = _ref.background,
       background = _ref$background === void 0 ? "slate-50" : _ref$background;
   return /*#__PURE__*/React__default.createElement("div", {
@@ -1213,7 +1222,7 @@ var CenteredHero = function CenteredHero(_ref) {
   }), (buttons == null ? void 0 : buttons.length) > 0 && /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-row mt-4"
   }, buttons.filter(function (button) {
-    return button.title && button.handleOnClick && button.type;
+    return button.text && button.handleOnClick && button.type;
   }).map(function (button) {
     return /*#__PURE__*/React__default.createElement(Button, {
       className: "mr-4 last:mr-0",
@@ -1436,7 +1445,7 @@ var ModalWithButtons = function ModalWithButtons(props) {
       children = props.children,
       rest = _objectWithoutPropertiesLoose(props, _excluded$4);
 
-  return /*#__PURE__*/React__default.createElement(Modal, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(Modal, _extends({}, rest, {
     withPadding: false
   }), /*#__PURE__*/React__default.createElement("div", {
     className: classNames("cweb-modal-content", {
@@ -2099,7 +2108,7 @@ var InfoField = function InfoField(props) {
 
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames("flex flex-row align-center items-center", props.className)
-  }, props.icon, /*#__PURE__*/React__default.createElement(ContainerElement, Object.assign({
+  }, props.icon, /*#__PURE__*/React__default.createElement(ContainerElement, _extends({
     className: "flex flex-col overflow-hidden ml-3 first:ml-0"
   }, containerProps), /*#__PURE__*/React__default.createElement(Text, {
     text: props.label,
@@ -2197,11 +2206,10 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   };
 
   var isClearIconVisible = clearable && value;
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement(FlexRow, {
+    spaced: false,
     "data-test-id": "input-component-container",
-    className: "relative inline-block"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-row"
+    position: "relative"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: classNames("h-11 border-t border-b border-solid border-input-border", {
       hidden: hasNoExtraContent,
@@ -2217,7 +2225,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   }, /*#__PURE__*/React__default.createElement(icon, {
     className: "w-6 h-6 text-slate-300 "
-  })), /*#__PURE__*/React__default.createElement("input", Object.assign({}, otherProps, {
+  })), /*#__PURE__*/React__default.createElement("input", _extends({}, otherProps, {
     "data-test-id": "input-component",
     name: name,
     value: innerValue,
@@ -2226,7 +2234,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     size: otherProps.maxLength,
     type: type,
     disabled: isDisabled,
-    className: classNames("input", "block", {
+    className: classNames("input", "block", "flex-grow", {
       "pl-12": icon,
       "pr-11": clearable
     }, {
@@ -2258,7 +2266,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       hidden: !isClearIconVisible
     }),
     onClick: clearField
-  }))));
+  })));
 });
 
 var Line = function Line(_ref) {
@@ -2338,7 +2346,7 @@ function LoadingIndicator(_ref) {
   var containerClassName = classNames("cweb-loading", className, {
     "as-modal": asModal
   });
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, restProps, {
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, restProps, {
     className: containerClassName
   }), /*#__PURE__*/React__default.createElement("img", {
     src: asSpinner ? spinnerToRender : img$e,
@@ -2616,7 +2624,7 @@ var CustomSelect = /*#__PURE__*/React__default.forwardRef(function (props, ref)
   var isIE11 = "MSInputMethodContext" in window && "documentMode" in document;
   var customStyles = generateCustomStyles(hasError, isIE11);
   var mergedStyles = mergeStyles(customStyles, styles);
-  return /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(ReactSelect, _extends({}, props, {
     ref: ref,
     className: classNames("customized-select", className),
     styles: mergedStyles
@@ -2755,7 +2763,7 @@ var PaginationMenu = function PaginationMenu(props) {
 var TableFooter = function TableFooter(props) {
   return /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     colSpan: props.colSpan
-  }, /*#__PURE__*/React__default.createElement(PaginationMenu, Object.assign({
+  }, /*#__PURE__*/React__default.createElement(PaginationMenu, _extends({
     className: "p-6"
   }, props.paginationMenuProps)))));
 };
@@ -2784,7 +2792,7 @@ function Table(_ref) {
     setIsPristine(false);
   }, [items, isLoading]);
   var showEmptyView = !isPristine && !isLoading && !(items && items.length > 0);
-  return /*#__PURE__*/React__default.createElement("table", Object.assign({
+  return /*#__PURE__*/React__default.createElement("table", _extends({
     className: classNames("w-full rounded-lg bg-white border-collapse table-auto", className)
   }, otherAttributes), showHeader ? /*#__PURE__*/React__default.createElement(TableHeader, {
     className: "border-b border-slate-100",
@@ -3147,7 +3155,7 @@ var List = function List(_ref) {
   }, /*#__PURE__*/React__default.createElement(headerButton.buttonType, headerButton.buttonProps))), /*#__PURE__*/React__default.createElement("ul", {
     ref: listRef
   }, items.map(function (item) {
-    return /*#__PURE__*/React__default.createElement(ListItem, Object.assign({}, item, {
+    return /*#__PURE__*/React__default.createElement(ListItem, _extends({}, item, {
       roundTop: roundTop,
       key: item.itemId,
       onAssetLoadError: onAssetLoadError,
@@ -3404,7 +3412,7 @@ var SearchIcon = function SearchIcon(props) {
 };
 
 var SearchInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(Input, _extends({}, props, {
     icon: SearchIcon,
     type: "text",
     clearable: true,
@@ -3815,7 +3823,7 @@ var NavMenuContent = function NavMenuContent(_ref) {
         className: "mt-auto"
       });
     } else if (isNavMenuItem(item)) {
-      return /*#__PURE__*/createElement(NavMenuItem, Object.assign({}, item, {
+      return /*#__PURE__*/createElement(NavMenuItem, _extends({}, item, {
         key: item.title
       }));
     } else {
@@ -4519,7 +4527,7 @@ function RadioInner(_ref) {
     "data-test-id": nameHtmlFor
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-row items-center "
-  }, /*#__PURE__*/React__default.createElement("input", Object.assign({}, otherProps, {
+  }, /*#__PURE__*/React__default.createElement("input", _extends({}, otherProps, {
     className: classNames("appearance-none", className),
     ref: innerRef,
     type: "radio",
@@ -4553,22 +4561,24 @@ function RadioInner(_ref) {
 
 
 var RadioV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(RadioInner, Object.assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(RadioInner, _extends({}, props, {
     innerRef: ref
   }));
 });
 
-var _excluded$f = ["innerRef", "options"];
+var _excluded$f = ["innerRef", "options", "defaultValue"];
 
 function RadioGroupInner(_ref) {
   var innerRef = _ref.innerRef,
       options = _ref.options,
+      defaultValue = _ref.defaultValue,
       registerProps = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
   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({
+    return /*#__PURE__*/React__default.createElement(RadioV2, _extends({
+      defaultChecked: option.value === defaultValue,
       key: option.value
     }, option, registerProps, {
       ref: innerRef
@@ -4577,7 +4587,7 @@ function RadioGroupInner(_ref) {
 }
 
 var RadioGroupV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(RadioGroupInner, Object.assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(RadioGroupInner, _extends({}, props, {
     innerRef: ref
   }));
 });
@@ -4597,7 +4607,7 @@ function Section(_ref) {
       loadingIndicatorProps = _ref.loadingIndicatorProps,
       restProps = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, restProps, {
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, restProps, {
     className: classNames("cweb-section", "flex justify-start flex-col items-start", "rounded-lg", "mx-0 my-4", "bg-white", "w-full", className)
   }), (title || buttons) && /*#__PURE__*/React__default.createElement("div", {
     className: "cweb-section-header",
@@ -4608,12 +4618,12 @@ function Section(_ref) {
     text: title,
     className: "mr-3 cweb-section-title",
     type: "sm"
-  }), isLoading && /*#__PURE__*/React__default.createElement(LoadingIndicator, Object.assign({
+  }), isLoading && /*#__PURE__*/React__default.createElement(LoadingIndicator, _extends({
     asSpinner: true
   }, loadingIndicatorProps))), /*#__PURE__*/React__default.createElement("div", {
     className: classNames("cweb-section-header-buttons-container", "flex flex-row space-x-3")
   }, buttons && buttons.length > 0 && buttons.map(function (button) {
-    return /*#__PURE__*/React__default.createElement(Button, Object.assign({}, button, {
+    return /*#__PURE__*/React__default.createElement(Button, _extends({}, button, {
       key: button.key || button.id || button.text
     }));
   }))), /*#__PURE__*/React__default.createElement("div", {
@@ -4636,7 +4646,7 @@ var SectionItem = function SectionItem(props) {
   var classes = classNames("cweb-list-item", className, {
     "cweb-list-item-clickable": !!onClick
   });
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classes,
     onClick: onClick
   }, rest), children);
@@ -4654,7 +4664,7 @@ function SectionItemWithContent(props) {
 
   var mergedClasses = classNames("cweb-section-text-item", className);
   var iconClasses = classNames("w-6 h-6 mr-4", iconClass);
-  return /*#__PURE__*/React__default.createElement(SectionItem, Object.assign({
+  return /*#__PURE__*/React__default.createElement(SectionItem, _extends({
     className: mergedClasses,
     onClick: onClick
   }, rest), icon && /*#__PURE__*/React__default.createElement("img", {
@@ -4799,7 +4809,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
   }) : flatmappedOptions.find(function (o) {
     return o.value === value;
   });
-  return /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({}, otherProps, {
+  return /*#__PURE__*/React__default.createElement(ReactSelect, _extends({}, otherProps, {
     ref: innerRef,
     styles: mergedStyles,
     options: options,
@@ -4889,7 +4899,8 @@ var SettingsMenuButton = function SettingsMenuButton(props) {
       "-right-54": shiftMenuTo === "right",
       "-left-68": shiftMenuTo === "left-md",
       "-right-68": shiftMenuTo === "right-md",
-      "transform -translate-x-1/2 left-1/2": !shiftMenuTo
+      "transform -translate-x-1/2 left-1/2": !shiftMenuTo // centering the menu in the Y axis of the button
+
     }, {
       "opacity-0 pointer-events-none": !showMenu,
       "opacity-100": showMenu
@@ -5108,7 +5119,7 @@ var Tabbar = function Tabbar(_ref) {
       isSelected: innerSelectedIndex === index
     }, tabItemProps);
 
-    return /*#__PURE__*/React__default.createElement(TabbarItem, Object.assign({
+    return /*#__PURE__*/React__default.createElement(TabbarItem, _extends({
       key: (_tabItemProps$dataTes = tabItemProps.dataTestId) != null ? _tabItemProps$dataTes : index
     }, itemProps));
   }));
@@ -5166,7 +5177,7 @@ var PageHeader = function PageHeader(_ref) {
     spinnerColor: "gray"
   })), accessories && /*#__PURE__*/React__default.createElement("div", {
     "data-test-id": "page-header-accessories"
-  }, accessories)), navigation && /*#__PURE__*/React__default.createElement(Tabbar, Object.assign({}, navigation, {
+  }, accessories)), navigation && /*#__PURE__*/React__default.createElement(Tabbar, _extends({}, navigation, {
     withoutPadding: true
   })));
 };
@@ -5242,7 +5253,7 @@ var TagGroup = function TagGroup(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames("flex flex-row flex-wrap", className)
   }, tags.map(function (tag) {
-    return /*#__PURE__*/React__default.createElement(Tag, Object.assign({
+    return /*#__PURE__*/React__default.createElement(Tag, _extends({
       size: tagSize
     }, tag, {
       className: classNames("mr-2 last:mr-0 mb-2")
@@ -5467,8 +5478,8 @@ TimelineStep.defaultProps = {
 
 var Timeline = function Timeline(props) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, props.steps.map(function (step) {
-    return /*#__PURE__*/React__default.createElement(TimelineStep, Object.assign({}, step));
-  })), props.loadMoreButtonProps && /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({
+    return /*#__PURE__*/React__default.createElement(TimelineStep, _extends({}, step));
+  })), props.loadMoreButtonProps && /*#__PURE__*/React__default.createElement(SecondaryButton, _extends({
     className: "mt-6 mx-auto"
   }, props.loadMoreButtonProps)));
 };
@@ -5495,15 +5506,15 @@ function ViewItem(_ref) {
       className: "cweb-view-content-text"
     };
   });
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classNames("vitals-view-item", className)
   }, restProps), /*#__PURE__*/React__default.createElement("div", {
     className: "vitals-view-item-title-line flex justify-start flex-row items-start"
-  }, titlePropsMerged && /*#__PURE__*/React__default.createElement(Text, Object.assign({
+  }, titlePropsMerged && /*#__PURE__*/React__default.createElement(Text, _extends({
     className: classNames(titlePropsMerged.className, "vitals-view-item-title mb-1 mr-2"),
     color: "slate-500"
   }, titlePropsMerged)), titleAccessory), contentPropsMerged && (contentPropsMerged == null ? void 0 : contentPropsMerged.map(function (textProps) {
-    return /*#__PURE__*/React__default.createElement(Text, Object.assign({}, textProps, {
+    return /*#__PURE__*/React__default.createElement(Text, _extends({}, textProps, {
       key: textProps.key || textProps.text
     }));
   })), (!contentPropsMerged || (contentPropsMerged == null ? void 0 : contentPropsMerged.length) === 0) && /*#__PURE__*/React__default.createElement(Text, {
@@ -5513,7 +5524,7 @@ function ViewItem(_ref) {
     className: "flex flex-row cweb-view-buttons",
     key: "cweb-view-buttons"
   }, buttons && buttons.map(function (button) {
-    return /*#__PURE__*/React__default.createElement(Button, Object.assign({}, button, {
+    return /*#__PURE__*/React__default.createElement(Button, _extends({}, button, {
       className: classNames("cweb-view-button ml-3", button.className),
       key: button.key || button.text
     }));
@@ -5598,14 +5609,14 @@ var FormInputInner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     label: label,
     info: info,
     decoratorClassname: decoratorClassname
-  }, /*#__PURE__*/React__default.createElement(Input, Object.assign({}, fieldProps, {
+  }, /*#__PURE__*/React__default.createElement(Input, _extends({}, 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, {
+  return /*#__PURE__*/React__default.createElement(FormInputInner, _extends({}, props, {
     ref: ref
   }));
 });
@@ -5632,7 +5643,7 @@ function FormRadioGroupInner(_ref) {
     label: label,
     info: info,
     decoratorClassname: decoratorClassname
-  }, /*#__PURE__*/React__default.createElement(RadioGroupV2, Object.assign({}, fieldProps, {
+  }, /*#__PURE__*/React__default.createElement(RadioGroupV2, _extends({}, fieldProps, {
     isError: hasError(name, fieldErrors),
     ref: innerRef,
     name: name
@@ -5640,7 +5651,7 @@ function FormRadioGroupInner(_ref) {
 }
 
 var FormRadioGroup = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(FormRadioGroupInner, Object.assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(FormRadioGroupInner, _extends({}, props, {
     innerRef: ref
   }));
 });
@@ -5671,7 +5682,7 @@ var FormSelect = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef
     rules: rules,
     render: function render(_ref2) {
       var field = _ref2.field;
-      return /*#__PURE__*/React__default.createElement(Select, Object.assign({}, selectProps, field, {
+      return /*#__PURE__*/React__default.createElement(Select, _extends({}, selectProps, field, {
         isError: hasError(name, fieldErrors),
         ref: innerRef
       }));
@@ -5679,7 +5690,6 @@ var FormSelect = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef
   }));
 });
 
-var _excluded$p = ["type", "name", "options", "fieldProps"];
 /**
  * Create a straight forward Form, which takes away the 'overhead' of react-hook-form.
  *
@@ -5723,17 +5733,6 @@ function Form(_ref2) {
   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 space-x-4",
-        key: key
-      }, rowFields.map(function (field) {
-        return FormFieldMapper(field, useFormReturn);
-      }));
-    }
-
     return FormFieldMapper(props, useFormReturn);
   }));
 }
@@ -5743,19 +5742,27 @@ function FormFieldMapper(formFieldProps, useFormReturn) {
       name = formFieldProps.name,
       options = formFieldProps.options,
       _formFieldProps$field = formFieldProps.fieldProps,
-      fieldProps = _formFieldProps$field === void 0 ? {} : _formFieldProps$field,
-      decoratorProps = _objectWithoutPropertiesLoose(formFieldProps, _excluded$p);
-
+      fieldProps = _formFieldProps$field === void 0 ? {} : _formFieldProps$field;
+  var decoratorProps = pick(formFieldProps, ["label", "info", "decoratorClassname"]);
   var register = useFormReturn.register,
       control = useFormReturn.control,
       errors = useFormReturn.formState.errors;
 
   switch (type) {
+    case "row":
+      return /*#__PURE__*/React__default.createElement(FlexRow, {
+        key: formFieldProps.key
+      }, formFieldProps.fields.map(function (field) {
+        return FormFieldMapper(_extends({
+          decoratorClassname: "flex-auto"
+        }, field), useFormReturn);
+      }));
+
     case "text":
     case "number":
     case "email":
     case "password":
-      return /*#__PURE__*/React__default.createElement(FormInput, Object.assign({
+      return /*#__PURE__*/React__default.createElement(FormInput, _extends({
         key: name
       }, decoratorProps, {
         fieldRequired: isRequired(options),
@@ -5765,7 +5772,7 @@ function FormFieldMapper(formFieldProps, useFormReturn) {
       }));
 
     case "select":
-      return /*#__PURE__*/React__default.createElement(FormSelect, Object.assign({
+      return /*#__PURE__*/React__default.createElement(FormSelect, _extends({
         key: name
       }, decoratorProps, {
         fieldRequired: isRequired(options),
@@ -5777,7 +5784,7 @@ function FormFieldMapper(formFieldProps, useFormReturn) {
       }));
 
     case "radioGroup":
-      return /*#__PURE__*/React__default.createElement(FormRadioGroup, Object.assign({
+      return /*#__PURE__*/React__default.createElement(FormRadioGroup, _extends({
         key: name
       }, decoratorProps, {
         fieldRequired: isRequired(options),