@nwon/react-mui-hook-form 3.1.6 → 3.1.7

package/dist/packageExports.js

@@ -0,0 +1,1834 @@
+import { CheckBoxOutlineBlank, CheckBox } from '@mui/icons-material';
+import { FormHelperText, Checkbox, FormControl, Autocomplete, TextField, FormControlLabel, Box, InputLabel, OutlinedInput, FormLabel, RadioGroup, Radio, Select, MenuItem, Typography, Stack, Tooltip, ListSubheader, Slider, Switch, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { useFormControl } from '@mui/material/FormControl';
+import { filterNoUndefinedNoNull, uppercaseFirstLetter, assertTruthy, objectHasKey, rethrow } from '@nvon/baseline';
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import { useFormContext, useWatch, Controller, useForm, useFieldArray, FormProvider } from 'react-hook-form';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { identity } from 'lodash-es';
+import { t } from 'i18next';
+import { DatePicker, DateTimePicker, TimePicker } from '@mui/x-date-pickers';
+import dayjs from 'dayjs';
+import { NumericFormat } from 'react-number-format';
+import { LoadingButton as LoadingButton$1 } from '@mui/lab';
+
+const formContextNull = "FormContext is null. This should not happen. You may need to use the HookFormProvider instead of the FormProvider exported by react-hook-form";
+
+const FormFieldErrorDisplay = ({
+  error,
+  formHelperTextProps
+}) => {
+  if (Array.isArray(error)) {
+    return /*#__PURE__*/jsx(FormHelperText, {
+      ...formHelperTextProps,
+      error: true,
+      children: error.map(e => e.message).filter(filterNoUndefinedNoNull).join(", ")
+    });
+  }
+  if (error?.message) {
+    return /*#__PURE__*/jsx(FormHelperText, {
+      ...formHelperTextProps,
+      error: true,
+      children: error?.message
+    });
+  }
+  return null;
+};
+
+/**
+ * Wrapper around react-hook-form's useFormContext.
+ *
+ * Should behave like the original function, only exposing a "fieldName"
+ *  function on top which is used to validate field names.
+ */
+const useHookFormContext = () => {
+  const form = useFormContext();
+  return {
+    ...form,
+    fieldName: identity
+  };
+};
+
+/**
+ * Get the field errors for a (possibly nested) field name.
+ *
+ * Checking `formState.errors[fieldName]` only works if fieldName is not a path
+ *  (e.g. Does not include dots).
+ *
+ * Did not find a built-in way to do this … there might be one though.
+ *
+ * Supports both dot notation (e.g., "response.receipts.0.field") and
+ * bracket notation (e.g., "response.receipts[0].field") for array fields.
+ */
+const getFormErrorForNestedKeys = (errors, fieldName) => {
+  // Parse the field name to handle both dot notation and bracket notation
+  // e.g., "response.receipts.0.field" or "response.receipts[0].field"
+  const keys = [];
+  let currentKey = "";
+  let i = 0;
+  while (i < fieldName.length) {
+    const char = fieldName[i];
+    if (char === "[") {
+      // Save the current key if any
+      if (currentKey) {
+        keys.push(currentKey);
+        currentKey = "";
+      }
+      // Find the closing bracket
+      i++; // Skip the opening bracket
+      let bracketContent = "";
+      while (i < fieldName.length && fieldName[i] !== "]") {
+        bracketContent += fieldName[i];
+        i++;
+      }
+      // Parse the bracket content as a number if possible, otherwise as string
+      const numIndex = Number(bracketContent);
+      keys.push(isNaN(numIndex) ? bracketContent : numIndex);
+      i++; // Skip the closing bracket
+    } else if (char === ".") {
+      // Save the current key if any
+      if (currentKey) {
+        keys.push(currentKey);
+        currentKey = "";
+      }
+      i++; // Skip the dot
+    } else {
+      currentKey += char;
+      i++;
+    }
+  }
+  // Don't forget the last key
+  if (currentKey) {
+    keys.push(currentKey);
+  }
+  //
+  // To my best knowledge, this works as expected.
+  //
+  // It recursively walks the error object by the given keys
+  //  until the lowest level is reached, or undefined returned.
+  //
+  // Handles both object properties and array indices.
+  //
+  // Typescript is just not very happy with the dynamic nature of this,
+  //  hence the errors.
+  //
+  /* eslint-disable @typescript-eslint/ban-ts-comment,@typescript-eslint/no-unsafe-return */
+  // @ts-expect-error
+  return keys.reduce((errorObj, pathKey) => {
+    if (errorObj === undefined || errorObj === null) {
+      return undefined;
+    }
+    // Handle array access
+    if (typeof pathKey === "number") {
+      return Array.isArray(errorObj) ? errorObj[pathKey] :
+      // @ts-expect-error
+      errorObj?.[pathKey];
+    }
+    // Handle object property access
+    // @ts-expect-error
+    return errorObj?.[pathKey];
+  }, errors);
+  /* eslint-enable */
+};
+
+/**
+ * Returns the error for a given field name.
+ *
+ * @throws Error when FormContext is null.
+ */
+const useFormFieldError = fieldName => {
+  const form = useHookFormContext();
+  if (!form) {
+    throw Error(formContextNull);
+  }
+  const {
+    formState
+  } = form;
+  const errors = getFormErrorForNestedKeys(formState.errors, fieldName);
+  return errors;
+};
+
+const FormFieldError = ({
+  fieldName,
+  formHelperTextProps
+}) => {
+  const error = useFormFieldError(fieldName);
+  return /*#__PURE__*/jsx(FormFieldErrorDisplay, {
+    error: error,
+    formHelperTextProps: formHelperTextProps
+  });
+};
+
+/**
+ * Returns whether or not a field has an error.
+ *
+ * @throws Error when FormContext is null.
+ */
+const useFormFieldHasError = fieldName => !!useFormFieldError(fieldName);
+
+/**
+ * Return a function which turns our TranslatedString into a plain string.
+ *
+ * @throws Error if no t was provided but a translated string.
+ */
+const useTranslateString = () => {
+  if (!t) {
+    throw Error("If you pass in a translated validate function you need to provide a t");
+  }
+  return useCallback(input => {
+    return typeof input === "string" ? input : input(t);
+  }, []);
+};
+
+/**
+ * Merge a form field with defaults.
+ */
+const useMergedFormField = (
+/**
+ * Form fields, typically those passed into a component.
+ *
+ */
+formField, t,
+/**
+ * Additional defaults. Duplicate values will be overridden by the formField.
+ */
+formFieldDefaults) => {
+  const translate = useTranslateString();
+  const merged = useMemo(() => {
+    const builtInDefaults = {
+      label: uppercaseFirstLetter(formField.name),
+      required: false,
+      requiredErrorMessage: "Please fill in required information",
+      validate: undefined
+    };
+    return {
+      ...builtInDefaults,
+      ...formFieldDefaults,
+      ...formField
+    };
+  }, [formField, formFieldDefaults]);
+  const withPlainStrings = useMemo(() => {
+    // Translating the validate function is a bit tricky,
+    //  since it can be an object in both cases.
+    const validate = (() => {
+      if (typeof merged.validate === "object" && typeof merged.validate.translated === "function") {
+        if (!t) {
+          throw Error("If you pass in a translated validate function you need to provide a t");
+        }
+        return merged.validate.translated(t);
+      }
+      return merged.validate;
+    })(); // This should be fine. Not sure why TS is complaining.
+    return {
+      ...merged,
+      label: translate(merged.label, t),
+      requiredErrorMessage: translate(merged.requiredErrorMessage, t),
+      validate
+    };
+  }, [merged, t, translate]);
+  return withPlainStrings;
+};
+
+/**
+ * An effect that unregisters a field from the form when the component unmounts.
+ *
+ * @throws Error when FormContext is null.
+ */
+const useEffectFieldUnregisterOnUnmount = ({
+  name,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const form = useHookFormContext();
+  /**
+   * Default options for unregistering the field.
+   *
+   * Needed to wrap this in a state in order to prevent infinite rerenders.
+   */
+  const [options] = useState(unregisterOptions);
+  if (!form) {
+    throw Error(formContextNull);
+  }
+  const {
+    unregister
+  } = form;
+  useEffect(() => {
+    return () => {
+      if (isUnregisteringOnUnmount) {
+        unregister(name, options);
+      }
+    };
+  }, [isUnregisteringOnUnmount, name, unregister, options]);
+};
+
+var GroupLabelSorting;
+(function (GroupLabelSorting) {
+  GroupLabelSorting["Alphabetical"] = "alphabetical";
+  GroupLabelSorting["GroupMemberCountAsc"] = "groupMemberCountAsc";
+})(GroupLabelSorting || (GroupLabelSorting = {}));
+/**
+ * Sorts option in the desired order.
+ */
+const useSortedOptionsWithGroup$1 = (selectableOptions, sorting = GroupLabelSorting.Alphabetical) => {
+  return useMemo(() => {
+    if (sorting === GroupLabelSorting.GroupMemberCountAsc) {
+      const groupCounts = selectableOptions.reduce((acc, option) => {
+        if (option.group) {
+          acc[option.group] = (acc[option.group] || 0) + 1;
+        }
+        return acc;
+      }, {});
+      return selectableOptions.sort((a, b) => {
+        if (a.group == undefined && !!b.group) {
+          return -1;
+        }
+        if (a.group && b.group) {
+          const groupA = groupCounts[a.group];
+          const groupB = groupCounts[b.group];
+          if (groupA && groupB && groupA < groupB) {
+            return -1;
+          } else if (groupCounts[a.group] === groupCounts[b.group]) {
+            if (b.label > a.label) {
+              return -1;
+            }
+            return 1;
+          }
+          return 1;
+        }
+        if (b.label > a.label) {
+          return -1;
+        }
+        return 1;
+      });
+    }
+    return selectableOptions.sort((a, b) => {
+      if (a.group == undefined && !!b.group) {
+        return -1;
+      }
+      if (a.group && b.group && a.group < b.group) {
+        return -1;
+      }
+      if (a.group == b.group && b.label > a.label) {
+        return 1;
+      }
+      return 0;
+    });
+  }, [selectableOptions, sorting]);
+};
+
+const icon = /*#__PURE__*/jsx(CheckBoxOutlineBlank, {
+  fontSize: "small"
+});
+const checkedIcon = /*#__PURE__*/jsx(CheckBox, {
+  fontSize: "small"
+});
+const defaultNonMultiselectValue = "";
+/**
+ * Renders a MUI autocomplete input that is embedded in a react hook form context.
+ *
+ * @throws Error when FormContext is null.
+ */
+const InputAutocomplete = ({
+  formField,
+  selectableOptions,
+  noOptions,
+  autoCompleteProps,
+  checkboxesForMultiselect: renderCheckboxes,
+  groupSorting,
+  inputTextFieldProps,
+  zIndex,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const form = useHookFormContext();
+  if (!form) {
+    throw Error(formContextNull);
+  }
+  const {
+    register,
+    control,
+    setValue
+  } = form;
+  const hasError = useFormFieldHasError(formField.name);
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField, formField.t);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  const multiSelect = !!autoCompleteProps?.multiple;
+  const value = useWatch({
+    name,
+    control,
+    exact: true
+  });
+  const {
+    value: valueToUse,
+    hasValue
+  } = useMemo(() => {
+    if (value) {
+      return {
+        value,
+        hasValue: true
+      };
+    }
+    return {
+      value: multiSelect ? [] : defaultNonMultiselectValue,
+      hasValue: false
+    };
+  }, [multiSelect, value]);
+  const adjustedSelectableOptions = useMemo(() => {
+    if (hasValue || multiSelect) {
+      return selectableOptions;
+    }
+    return [...selectableOptions, {
+      value: defaultNonMultiselectValue,
+      label: ""
+    }];
+  }, [hasValue, multiSelect, selectableOptions]);
+  const sortedOptions = useSortedOptionsWithGroup$1(adjustedSelectableOptions, groupSorting);
+  assertTruthy(["string", "number", "object"].includes(typeof valueToUse), `Value (Field: ${name}, value: ${valueToUse?.toString() || "undefined"}) for select input has unexpected type`);
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || autoCompleteProps?.disabled;
+  const props = register(name, {
+    required: isRequired ? requiredErrorMessage : false,
+    validate,
+    disabled: isDisabled
+  });
+  const currentValue = useMemo(() => {
+    return multiSelect ? adjustedSelectableOptions.filter(o => {
+      if (Array.isArray(valueToUse)) {
+        return valueToUse.includes(o.value);
+      }
+      return adjustedSelectableOptions.find(option => option.value === valueToUse);
+    }) : adjustedSelectableOptions.find(option => option.value === valueToUse);
+  }, [multiSelect, adjustedSelectableOptions, valueToUse]);
+  const renderOption = useMemo(() => {
+    if (autoCompleteProps?.renderOption) {
+      return autoCompleteProps.renderOption;
+    }
+    return multiSelect && renderCheckboxes ? (liProps, option) => {
+      return /*#__PURE__*/jsxs("li", {
+        ...liProps,
+        children: [/*#__PURE__*/jsx(Checkbox, {
+          icon: icon,
+          checkedIcon: checkedIcon,
+          sx: {
+            mr: 2
+          },
+          checked: Array.isArray(currentValue) ? !!currentValue.find(item => item.value === option.value) : false
+        }), option.label]
+      });
+    } : undefined;
+  }, [autoCompleteProps?.renderOption, currentValue, multiSelect, renderCheckboxes]);
+  const mergedAutoCompleteProps = useMemo(() => {
+    if (zIndex === undefined) {
+      return autoCompleteProps;
+    }
+    return {
+      ...autoCompleteProps,
+      slotProps: {
+        ...autoCompleteProps?.slotProps,
+        popper: {
+          ...autoCompleteProps?.slotProps?.popper,
+          sx: {
+            ...(typeof autoCompleteProps?.slotProps?.popper === "object" && autoCompleteProps?.slotProps?.popper !== null && "sx" in autoCompleteProps.slotProps.popper ? autoCompleteProps.slotProps.popper.sx : {}),
+            zIndex
+          }
+        }
+      }
+    };
+  }, [autoCompleteProps, zIndex]);
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: hasError,
+    required: isRequired,
+    disabled: isDisabled,
+    children: [/*#__PURE__*/jsx(Autocomplete, {
+      options: sortedOptions,
+      value: currentValue,
+      ...props,
+      required: isRequired,
+      label: label,
+      renderOption: renderOption,
+      multiple: multiSelect,
+      getOptionLabel: o => {
+        if (objectHasKey(o, "label")) {
+          return o.label;
+        }
+        return "";
+      },
+      onChange: (e, selectedOption) => {
+        if (Array.isArray(selectedOption)) {
+          setValue(name, selectedOption.map(o => o.value), {
+            shouldDirty: true,
+            shouldValidate: true,
+            shouldTouch: true
+          });
+        } else if (selectedOption) {
+          setValue(name, selectedOption.value, {
+            shouldDirty: true,
+            shouldValidate: true,
+            shouldTouch: true
+          });
+        } else {
+          setValue(name, undefined, {
+            shouldDirty: true,
+            shouldValidate: false,
+            shouldTouch: true
+          });
+        }
+      },
+      noOptionsText: noOptions,
+      filterOptions: (options, {
+        inputValue
+      }) => {
+        return options.filter(o => {
+          // Filter out the default empty option
+          if (o.value === defaultNonMultiselectValue) {
+            return false;
+          }
+          // If no input, show all non-default options
+          if (!inputValue) {
+            return true;
+          }
+          // Filter based on input text (case-insensitive)
+          return o.label.toLowerCase().includes(inputValue.toLowerCase());
+        });
+      },
+      renderInput: params => {
+        return /*#__PURE__*/jsx(TextField, {
+          ...params,
+          label: label,
+          variant: "outlined",
+          ...inputTextFieldProps,
+          required: isRequired,
+          disabled: isDisabled,
+          error: hasError
+        });
+      },
+      groupBy: option => option.group || "Choose"
+      // need to parse this as any in order to get no typing errors
+      // for multiselect
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ,
+      ...mergedAutoCompleteProps
+    }), /*#__PURE__*/jsx(FormFieldError, {
+      fieldName: formField.name
+    })]
+  });
+};
+
+const InputCheckbox = ({
+  formField,
+  jsxLabel,
+  checkboxProps,
+  formControlLabelProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const {
+    control,
+    setValue
+  } = useHookFormContext();
+  const hasError = useFormFieldHasError(formField.name);
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  const id = `hook-form-input-checkbox-${name}`;
+  const disabled = muiFormControl?.disabled || checkboxProps?.disabled;
+  const isRequired = required || muiFormControl?.required;
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: hasError,
+    disabled: disabled,
+    required: required,
+    children: [/*#__PURE__*/jsx(FormControlLabel, {
+      required: jsxLabel ? false : isRequired // If jsxLabel is set, we don't want to show the asterisk.
+      ,
+      disabled: disabled,
+      label: jsxLabel ?? label,
+      sx: {
+        color: t => hasError ? t.palette.error.main : undefined
+      },
+      control: /*#__PURE__*/jsx(Controller, {
+        name: name,
+        control: control,
+        rules: {
+          required: isRequired ? requiredErrorMessage : false,
+          validate
+        },
+        render: ({
+          field: {
+            value
+          }
+        }) => {
+          return /*#__PURE__*/jsx(Checkbox, {
+            checked: !!value,
+            "aria-labelledby": id,
+            onChange: (e, val) => {
+              setValue(name, val, {
+                shouldValidate: true,
+                shouldDirty: true,
+                shouldTouch: true
+              });
+            },
+            ...checkboxProps,
+            disabled: disabled
+          });
+        }
+      }),
+      ...formControlLabelProps
+    }), /*#__PURE__*/jsx(FormFieldError, {
+      fieldName: formField.name
+    })]
+  });
+};
+
+const InputDatePicker = ({
+  formField,
+  datePickerProps,
+  zIndex,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const {
+    control
+  } = useHookFormContext();
+  const hasError = useFormFieldHasError(formField.name);
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage
+  } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  const [date, setDate] = useState(dayjs());
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || datePickerProps?.disabled;
+  return /*#__PURE__*/jsx(Box, {
+    children: /*#__PURE__*/jsxs(FormControl, {
+      error: hasError,
+      required: isRequired,
+      disabled: isDisabled,
+      children: [/*#__PURE__*/jsx(Controller, {
+        name: name,
+        defaultValue: date,
+        control: control,
+        rules: {
+          required: isRequired ? requiredErrorMessage : false
+        },
+        render: ({
+          field: {
+            onChange,
+            ...restField
+          }
+        }) => /*#__PURE__*/jsx(DatePicker, {
+          label: label,
+          onChange: event => {
+            onChange(event);
+            if (event) {
+              setDate(event);
+            }
+          },
+          disabled: isDisabled,
+          slotProps: {
+            textField: {
+              required: isRequired,
+              disabled: isDisabled,
+              error: hasError
+            },
+            ...(zIndex !== undefined ? {
+              popper: {
+                sx: {
+                  zIndex
+                }
+              }
+            } : {}),
+            ...datePickerProps?.slotProps
+          },
+          ...restField,
+          ...datePickerProps
+        })
+      }), /*#__PURE__*/jsx(FormFieldError, {
+        fieldName: formField.name
+      })]
+    })
+  });
+};
+
+const InputDateTimePicker = ({
+  formField,
+  dateTimePickerProps,
+  zIndex,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const {
+    control
+  } = useHookFormContext();
+  const hasError = useFormFieldHasError(formField.name);
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage
+  } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  const [date, setDate] = useState(dayjs());
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || dateTimePickerProps?.disabled;
+  return /*#__PURE__*/jsx(Box, {
+    children: /*#__PURE__*/jsxs(FormControl, {
+      error: hasError,
+      required: isRequired,
+      disabled: isDisabled,
+      children: [/*#__PURE__*/jsx(Controller, {
+        name: name,
+        defaultValue: date,
+        control: control,
+        rules: {
+          required: isRequired ? requiredErrorMessage : false
+        },
+        render: ({
+          field: {
+            onChange,
+            ...restField
+          }
+        }) => /*#__PURE__*/jsx(DateTimePicker, {
+          label: label,
+          ampm: dateTimePickerProps?.ampm ? dateTimePickerProps.ampm : false,
+          onChange: event => {
+            onChange(event);
+            if (event) {
+              setDate(event);
+            }
+          },
+          disabled: isDisabled,
+          required: isRequired,
+          slotProps: {
+            textField: {
+              required: isRequired,
+              disabled: isDisabled,
+              error: hasError
+            },
+            ...(zIndex !== undefined ? {
+              popper: {
+                sx: {
+                  zIndex
+                }
+              }
+            } : {}),
+            ...dateTimePickerProps?.slotProps
+          },
+          ...restField,
+          ...dateTimePickerProps
+        })
+      }), /*#__PURE__*/jsx(FormFieldError, {
+        fieldName: formField.name
+      })]
+    })
+  });
+};
+
+const InputNumber = ({
+  formField,
+  textFieldProps,
+  numericFormatProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const form = useHookFormContext();
+  const {
+    control
+  } = form;
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField, formField.t);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  if (!form) {
+    throw Error(formContextNull);
+  }
+  const hasError = useFormFieldHasError(formField.name);
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || textFieldProps?.disabled;
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: hasError,
+    required: required,
+    disabled: isDisabled,
+    children: [/*#__PURE__*/jsx(Controller, {
+      name: name,
+      control: control,
+      rules: {
+        required: isRequired ? requiredErrorMessage : false,
+        validate
+      },
+      render: props => {
+        const {
+          ref,
+          ...rest
+        } = props.field;
+        return (
+          /*#__PURE__*/
+          // @ts-expect-error TextFieldProps is not compatible with NumberFormatBaseProps
+          jsx(NumericFormat, {
+            ...rest,
+            customInput: TextField,
+            onValueChange: target => {
+              rest.onChange(target.value);
+            },
+            label: label,
+            onChange: undefined,
+            onBlur: props.field.onBlur,
+            error: !!props.fieldState.error,
+            ...textFieldProps,
+            ...numericFormatProps,
+            disabled: isDisabled,
+            required: isRequired
+          })
+        );
+      }
+    }), /*#__PURE__*/jsx(FormFieldError, {
+      fieldName: formField.name
+    })]
+  });
+};
+
+const InputOutlinedInput = ({
+  formField,
+  outlinedInputProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const form = useHookFormContext();
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField, formField.t);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  if (!form) {
+    throw Error(formContextNull);
+  }
+  const {
+    control
+  } = form;
+  const hasError = useFormFieldHasError(formField.name);
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || outlinedInputProps?.disabled;
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: hasError,
+    required: required,
+    disabled: muiFormControl?.disabled,
+    children: [/*#__PURE__*/jsx(InputLabel, {
+      required: isRequired,
+      disabled: isDisabled,
+      children: label
+    }), /*#__PURE__*/jsx(Controller, {
+      name: name,
+      control: control,
+      rules: {
+        required: isRequired ? requiredErrorMessage : false,
+        validate
+      },
+      render: ({
+        field: {
+          value,
+          onBlur,
+          onChange
+        }
+      }) => {
+        return /*#__PURE__*/jsx(OutlinedInput, {
+          value: value,
+          onChange: onChange,
+          onBlur: onBlur,
+          label: label,
+          ...outlinedInputProps,
+          required: isRequired,
+          disabled: isDisabled
+        });
+      }
+    }), /*#__PURE__*/jsx(FormFieldError, {
+      fieldName: formField.name
+    })]
+  });
+};
+
+const InputRadio = ({
+  formField,
+  selectableOptions,
+  formControlLabelProps,
+  radioGroupProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const {
+    control
+  } = useHookFormContext();
+  const hasError = useFormFieldHasError(formField.name);
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  const id = `hook-form-input-radio-${name}`;
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || formControlLabelProps?.disabled;
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: hasError,
+    disabled: muiFormControl?.disabled,
+    children: [/*#__PURE__*/jsx(FormLabel, {
+      id: id,
+      required: isRequired,
+      disabled: isDisabled,
+      error: hasError,
+      sx: {
+        color: t => hasError ? t.palette.error.main : undefined
+      },
+      children: label
+    }), /*#__PURE__*/jsx(Controller, {
+      name: name,
+      control: control,
+      rules: {
+        required: isRequired ? requiredErrorMessage : false,
+        validate
+      },
+      render: ({
+        field: {
+          onChange,
+          value,
+          onBlur
+        }
+      }) => {
+        return /*#__PURE__*/jsx(RadioGroup, {
+          value: value,
+          "aria-labelledby": id,
+          onChange: onChange,
+          onBlur: onBlur,
+          ...radioGroupProps,
+          children: selectableOptions?.map(option => {
+            return /*#__PURE__*/jsx(FormControlLabel, {
+              value: option.value,
+              control: /*#__PURE__*/jsx(Radio, {}),
+              label: option.label,
+              ...formControlLabelProps,
+              disabled: isDisabled
+            }, typeof option.value === "boolean" ? option.value.toString() : option.value);
+          })
+        });
+      }
+    }), /*#__PURE__*/jsx(FormFieldError, {
+      fieldName: formField.name
+    })]
+  });
+};
+
+/**
+ * Sorts the options by group and value.
+ */
+const useSortedOptionsWithGroup = selectableOptions => {
+  return useMemo(() => selectableOptions.sort((a, b) => {
+    if (a.group == undefined && !!b.group) {
+      return -1;
+    }
+    if (a.group && b.group && a.group < b.group) {
+      return -1;
+    }
+    if (a.group == b.group && b.value > a.value) {
+      return 1;
+    }
+    return 0;
+  }), [selectableOptions]);
+};
+
+const InputSelect = ({
+  formField,
+  selectableOptions,
+  optionsTitle,
+  selectComponentProps,
+  tooltipHolder,
+  zIndex,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const form = useHookFormContext();
+  if (!form) {
+    throw Error(formContextNull);
+  }
+  const {
+    control
+  } = form;
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField, formField.t);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  const defaultValue = useMemo(() => selectComponentProps?.multiple ? [] : "", [selectComponentProps?.multiple]);
+  const id = `input-select-${name}`;
+  const adjustedOptions = useMemo(() => selectComponentProps?.multiple || Array.isArray(defaultValue) ? selectableOptions : [...selectableOptions, {
+    value: defaultValue,
+    label: ""
+  }], [defaultValue, selectComponentProps?.multiple, selectableOptions]);
+  const sortedOptions = useSortedOptionsWithGroup(adjustedOptions);
+  const hasErrors = useFormFieldHasError(formField.name);
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || selectComponentProps?.disabled;
+  const selectPropsWithZIndex = useMemo(() => {
+    if (zIndex === undefined) {
+      return selectComponentProps;
+    }
+    return {
+      ...selectComponentProps,
+      MenuProps: {
+        ...selectComponentProps?.MenuProps,
+        sx: {
+          ...(typeof selectComponentProps?.MenuProps?.sx === "object" ? selectComponentProps.MenuProps.sx : {}),
+          zIndex
+        }
+      }
+    };
+  }, [selectComponentProps, zIndex]);
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: hasErrors,
+    required: isRequired,
+    disabled: isDisabled,
+    children: [/*#__PURE__*/jsx(InputLabel, {
+      id: id,
+      required: isRequired,
+      disabled: isDisabled,
+      error: hasErrors,
+      children: label
+    }), /*#__PURE__*/jsx(Controller, {
+      name: name,
+      control: control,
+      rules: {
+        required: isRequired ? requiredErrorMessage : false,
+        validate
+      },
+      render: ({
+        field: {
+          onChange,
+          onBlur,
+          value
+        },
+        fieldState: {
+          error
+        }
+      }) => {
+        const valueToUse = value || defaultValue;
+        return /*#__PURE__*/jsxs(Select, {
+          labelId: id,
+          ...selectPropsWithZIndex,
+          label: label,
+          value: valueToUse,
+          error: !!error,
+          onChange: onChange,
+          onBlur: onBlur,
+          disabled: isDisabled,
+          required: isRequired,
+          children: [optionsTitle && /*#__PURE__*/jsx(MenuItem, {
+            value: defaultValue,
+            disabled: true,
+            children: /*#__PURE__*/jsx("em", {
+              children: optionsTitle
+            })
+          }), sortedOptions?.filter(o => o.value !== "").map((option, index) => {
+            const optionBefore = sortedOptions[index - 1];
+            const showGroup = (optionBefore || index == 0) && option.group && optionBefore?.group !== option.group;
+            const disabledText = typeof option.disabled === "string" ? option.disabled : undefined;
+            const isDisabledToUse = !!disabledText || !!option.disabled || isDisabled;
+            const menuItem = /*#__PURE__*/jsx(MenuItem, {
+              value: typeof option.value === "boolean" ? option.value.toString() : option.value,
+              disabled: isDisabledToUse,
+              title: typeof option.disabled === "string" ? option.disabled : undefined,
+              selected: typeof option.value === "boolean" ? option.value.toString() === value : value === option.value,
+              children: /*#__PURE__*/jsx(Typography, {
+                dangerouslySetInnerHTML: {
+                  __html: option.label
+                }
+              })
+            }, option.label);
+            const wrappedMenuItem = disabledText ? /*#__PURE__*/jsxs(Box, {
+              sx: {
+                position: "relative"
+              },
+              children: [menuItem, /*#__PURE__*/jsx(Stack, {
+                direction: "column",
+                justifyContent: "center",
+                spacing: 1,
+                sx: {
+                  position: "absolute",
+                  right: th => th.spacing(0.5),
+                  top: 0,
+                  bottom: 0
+                },
+                children: tooltipHolder ? /*#__PURE__*/jsx(Tooltip, {
+                  title: disabledText,
+                  children: tooltipHolder
+                }) : null
+              })]
+            }) : menuItem;
+            return showGroup ? [/*#__PURE__*/jsx(ListSubheader, {
+              children: option.group
+            }, option.group), wrappedMenuItem] : wrappedMenuItem;
+          })]
+        });
+      }
+    }), /*#__PURE__*/jsx(FormFieldError, {
+      fieldName: formField.name
+    })]
+  });
+};
+
+const InputSelectFromEnum = props => {
+  const {
+    enumData,
+    formField
+  } = props;
+  const translateFunction = formField.t;
+  const options = useMemo(() => {
+    return Object.entries(enumData.enumToUse).map(([key, value]) => {
+      const label = enumData.labelsForEnum[key];
+      assertTruthy(label, "Could not find a label for value: " + value + " in Field " + formField.name);
+      if (typeof label === "string") {
+        return {
+          label,
+          value
+        };
+      }
+      assertTruthy(translateFunction, `If you want to use translated labels for field (name: ${formField.name}) you need to provide a translate function in the HookFormProvider.`);
+      return {
+        label: label(translateFunction),
+        value
+      };
+    }).filter(option => {
+      if (props.limitOptions) {
+        return props.limitOptions.includes(option.value);
+      }
+      return true;
+    });
+  }, [enumData.enumToUse, enumData.labelsForEnum, formField.name, translateFunction, props.limitOptions]);
+  return props.autocomplete ? /*#__PURE__*/jsx(InputAutocomplete, {
+    noOptions: props.autocomplete.noOptionText,
+    ...props,
+    selectableOptions: options,
+    formField: formField
+  }) : /*#__PURE__*/jsx(InputSelect, {
+    ...props,
+    selectableOptions: options,
+    formField: formField
+  });
+};
+
+const InputSlider = ({
+  formField,
+  sliderProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const form = useHookFormContext();
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField, formField.t);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  if (!form) {
+    throw Error(formContextNull);
+  }
+  const {
+    control
+  } = form;
+  const hasError = useFormFieldHasError(formField.name);
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || sliderProps?.disabled;
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: hasError,
+    required: isRequired,
+    disabled: isDisabled,
+    children: [/*#__PURE__*/jsx(Controller, {
+      name: name,
+      control: control,
+      defaultValue: 0,
+      rules: {
+        required: isRequired ? requiredErrorMessage : false,
+        validate
+      },
+      render: ({
+        field: {
+          onChange,
+          value,
+          onBlur
+        }
+      }) => {
+        return /*#__PURE__*/jsx(Slider, {
+          value: value || 0,
+          onChange: onChange,
+          onBlur: onBlur,
+          required: isRequired,
+          label: label,
+          component: sliderProps?.component || "span",
+          max: typeof sliderProps?.max === "number" ? sliderProps.max : undefined,
+          min: typeof sliderProps?.min === "number" ? sliderProps.min : undefined,
+          ...sliderProps,
+          disabled: isDisabled
+        });
+      }
+    }), /*#__PURE__*/jsx(FormFieldError, {
+      fieldName: name
+    })]
+  });
+};
+
+const InputSwitch = ({
+  formField,
+  switchProps,
+  formControlLabelProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const {
+    control,
+    setValue
+  } = useHookFormContext();
+  const hasError = useFormFieldHasError(formField.name);
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || switchProps?.disabled;
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: hasError,
+    disabled: isDisabled,
+    required: isRequired,
+    children: [/*#__PURE__*/jsx(FormControlLabel, {
+      label: label,
+      disabled: isDisabled,
+      required: isRequired,
+      sx: {
+        color: t => hasError ? t.palette.error.main : undefined
+      },
+      control: /*#__PURE__*/jsx(Controller, {
+        name: name,
+        control: control,
+        rules: {
+          required: isRequired ? requiredErrorMessage : false,
+          validate
+        },
+        render: ({
+          field: {
+            value
+          }
+        }) => {
+          return /*#__PURE__*/jsx(Switch, {
+            checked: !!value,
+            onChange: (e, val) => {
+              setValue(name, val, {
+                shouldValidate: true,
+                shouldDirty: true,
+                shouldTouch: true
+              });
+            },
+            ...switchProps
+          });
+        }
+      }),
+      ...formControlLabelProps
+    }), /*#__PURE__*/jsx(FormFieldError, {
+      fieldName: formField.name
+    })]
+  });
+};
+
+const InputTextField = ({
+  formField,
+  textFieldProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const form = useHookFormContext();
+  const {
+    control
+  } = form;
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField, formField.t);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  if (!form) {
+    throw Error(formContextNull);
+  }
+  const hasError = useFormFieldHasError(formField.name);
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || textFieldProps?.disabled;
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: hasError,
+    required: isRequired,
+    disabled: isDisabled,
+    children: [/*#__PURE__*/jsx(Controller, {
+      name: name,
+      control: control,
+      rules: {
+        required: isRequired ? requiredErrorMessage : false,
+        validate
+      },
+      render: ({
+        field: {
+          onChange,
+          value
+        },
+        fieldState: {
+          error
+        }
+      }) => {
+        return /*#__PURE__*/jsx(TextField, {
+          error: !!error,
+          onChange: onChange,
+          value: value,
+          label: label,
+          ...textFieldProps,
+          required: isRequired,
+          disabled: isDisabled
+        });
+      }
+    }), /*#__PURE__*/jsx(FormFieldError, {
+      fieldName: formField.name
+    })]
+  });
+};
+
+const InputTimePicker = ({
+  formField,
+  timePickerProps,
+  zIndex,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const {
+    control
+  } = useHookFormContext();
+  const hasError = useFormFieldHasError(formField.name);
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage
+  } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  const [date, setDate] = useState(dayjs());
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || timePickerProps?.disabled;
+  return /*#__PURE__*/jsx(Box, {
+    children: /*#__PURE__*/jsxs(FormControl, {
+      error: hasError,
+      required: isRequired,
+      disabled: isDisabled,
+      children: [/*#__PURE__*/jsx(Controller, {
+        name: name,
+        defaultValue: date,
+        control: control,
+        rules: {
+          required: isRequired ? requiredErrorMessage : false
+        },
+        render: ({
+          field: {
+            onChange,
+            ...restField
+          }
+        }) => /*#__PURE__*/jsx(TimePicker, {
+          label: label,
+          onChange: event => {
+            onChange(event);
+            if (event) {
+              setDate(event);
+            }
+          },
+          disabled: isDisabled,
+          required: isRequired,
+          slotProps: {
+            textField: {
+              required: isRequired,
+              disabled: isDisabled,
+              error: hasError
+            },
+            ...(zIndex !== undefined ? {
+              popper: {
+                sx: {
+                  zIndex
+                }
+              }
+            } : {}),
+            ...timePickerProps?.slotProps
+          },
+          ...restField,
+          ...timePickerProps
+        })
+      }), /*#__PURE__*/jsx(FormFieldError, {
+        fieldName: formField.name
+      })]
+    })
+  });
+};
+
+const InputToggleButton = ({
+  formField,
+  toggleButtonProps,
+  formControlLabelProps,
+  children,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const {
+    register,
+    control,
+    setValue
+  } = useHookFormContext();
+  const hasError = useFormFieldHasError(formField.name);
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  const id = `hook-form-input-toggle-button-${name}`;
+  const valueToUse = !!useWatch({
+    name: name,
+    control: control,
+    exact: true
+  });
+  assertTruthy(typeof valueToUse === "boolean", `Value (Field: ${name}, value: ${valueToUse?.toString() || "undefined"}) for a InputToggleButton should be undefined or boolean`);
+  const onClick = useCallback(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  e => {
+    setValue(name, !valueToUse, {
+      shouldValidate: true,
+      shouldDirty: true,
+      shouldTouch: true
+    });
+  }, [name, setValue, valueToUse]);
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || toggleButtonProps?.disabled;
+  const registered = register(name, {
+    required: isRequired ? requiredErrorMessage : false,
+    validate,
+    disabled: muiFormControl?.disabled
+  });
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: hasError,
+    disabled: isDisabled,
+    required: isRequired,
+    children: [/*#__PURE__*/jsx(FormControlLabel, {
+      required: isRequired,
+      label: label,
+      labelPlacement: "top",
+      disabled: isDisabled,
+      control: /*#__PURE__*/jsx(ToggleButton, {
+        value: valueToUse,
+        selected: valueToUse,
+        "aria-labelledby": id,
+        onClick: onClick,
+        ...registered,
+        ...toggleButtonProps,
+        children: children
+      }),
+      sx: {
+        alignItems: "flex-start",
+        ml: 0,
+        color: t => hasError ? t.palette.error.main : undefined,
+        ...formControlLabelProps?.sx
+      },
+      ...formControlLabelProps
+    }), /*#__PURE__*/jsx(FormFieldError, {
+      fieldName: formField.name
+    })]
+  });
+};
+
+const InputToggleButtonGroup = ({
+  formField,
+  toggleButtonGroupProps,
+  stackProps,
+  typographyProps,
+  buttons,
+  enforceValueSelected = false,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const {
+    register,
+    setValue,
+    control
+  } = useHookFormContext();
+  const hasError = useFormFieldHasError(formField.name);
+  const muiFormControl = useFormControl();
+  const {
+    label: labelText,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  const changeEv = useCallback((_, value) => {
+    const onSetValue = () => setValue(name, value, {
+      shouldValidate: true,
+      shouldDirty: true,
+      shouldTouch: true
+    });
+    if (enforceValueSelected) {
+      if (toggleButtonGroupProps?.exclusive === true && value !== null) {
+        onSetValue();
+      } else if (toggleButtonGroupProps?.exclusive === false || toggleButtonGroupProps?.exclusive === undefined && value?.length) {
+        onSetValue();
+      }
+    } else {
+      onSetValue();
+    }
+  }, [enforceValueSelected, name, setValue, toggleButtonGroupProps?.exclusive]);
+  const id = `hook-form-input-toggle-button-group-${name}`;
+  const registered = register(name, {
+    required: required ? requiredErrorMessage : false,
+    validate,
+    disabled: muiFormControl?.disabled
+  });
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const valueFromForm = useWatch({
+    name: name,
+    control: control,
+    exact: true
+  });
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || toggleButtonGroupProps?.disabled;
+  const toggleButtonGroup = /*#__PURE__*/jsx(ToggleButtonGroup, {
+    ...registered,
+    ...toggleButtonGroupProps,
+    onChange: changeEv
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    ,
+    value: valueFromForm,
+    children: buttons.map((button, i) => /*#__PURE__*/jsx(ToggleButton
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      value: button.value,
+      "aria-labelledby": id,
+      ...button.toggleButtonProps,
+      disabled: isDisabled,
+      children: button.icon
+    }, `${button.value.toString()}-${i}`))
+  });
+  const label = /*#__PURE__*/jsx(Typography, {
+    component: "span",
+    ...typographyProps,
+    sx: {
+      color: t => {
+        if (hasError) {
+          return t.palette.error.main;
+        }
+        return isDisabled ? t.palette.text.disabled : undefined;
+      }
+    },
+    children: labelText
+  });
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: hasError,
+    disabled: isDisabled,
+    required: isRequired,
+    children: [formField.label ? /*#__PURE__*/jsxs(Stack, {
+      ...stackProps,
+      children: [isRequired ? /*#__PURE__*/jsxs(Stack, {
+        id: id,
+        component: "label",
+        sx: {
+          display: "block"
+        },
+        children: [label, /*#__PURE__*/jsxs(Box, {
+          component: "span",
+          "aria-hidden": true,
+          sx: {
+            color: hasError ? t => t.palette.error.main : undefined
+          },
+          children: ["\u2009", "*"]
+        })]
+      }) : label, toggleButtonGroup]
+    }) : toggleButtonGroup, /*#__PURE__*/jsx(FormFieldError, {
+      fieldName: formField.name
+    })]
+  });
+};
+
+/**
+ * Turn an async submitHandler into a synchronous one.
+ *
+ * Reasoning:
+ * - we're often talking to the API during form submission. The onSubmit handler will be returning a Promise in this case.
+ * - the `form` element, per definition, always expects a synchronous function.
+ * - creating on inline function in every form is a bit clumsy, and does not look clean.
+ *
+ * Then/catch cases should be properly handled by the submit handler itself,
+ *  the catch supplied here is only a last safety net against an "unhandled promise rejection" error.
+ */
+const syncSubmit = asyncSubmitHandler => {
+  return e => {
+    asyncSubmitHandler(e).catch(rethrow);
+  };
+};
+
+/**
+ * Wrapper around react-hook-form's useForm.
+ *
+ * Should behave like the original function, only exposing a "fieldName"
+ *  function on top which is used to validate field names.
+ */
+const useHookForm = props => {
+  const form = useForm(props);
+  return {
+    ...form,
+    fieldName: identity
+  };
+};
+const useHookFormFieldArray = useFieldArray;
+
+/**
+ * Reexport of FormProvider.
+ *
+ * This became necessary as context is not available when the FormProvider is initialized outside of the package. Most likely this is some kind of instance mismatch.
+ */
+const HookFormProvider = FormProvider;
+
+const InputEmail = props => {
+  const merged = useMergedFormField(props.formField, props.formField.t, formDefaults);
+  const commonProps = useMemo(() => ({
+    textFieldProps: {
+      type: "email",
+      autoComplete: "email",
+      ...props.textFieldProps
+    },
+    formField: merged
+  }), [merged, props.textFieldProps]);
+  return props.isUnregisteringOnUnmount ? /*#__PURE__*/jsx(InputTextField, {
+    ...commonProps,
+    isUnregisteringOnUnmount: props.isUnregisteringOnUnmount,
+    unregisterOptions: props.unregisterOptions
+  }) : /*#__PURE__*/jsx(InputTextField, {
+    ...commonProps,
+    isUnregisteringOnUnmount: props.isUnregisteringOnUnmount
+  });
+};
+const formDefaults = {
+  required: true,
+  validate: emailInput => {
+    if (emailInput && emailInput.match(/.@./)) {
+      return true;
+    }
+    return "E-Mail address invalid";
+  }
+};
+
+const InputPasswordSet = ({
+  passwordField,
+  passwordValidationField,
+  doNotMatchError,
+  passwordValidationTextFieldProps,
+  passwordTextFieldProps
+}) => {
+  const {
+    watch
+  } = useHookFormContext();
+  const passwordFieldMerged = useMergedFormField(passwordField, passwordField.t, {
+    required: true
+  });
+  const validationFieldMerged = useMergedFormField(passwordValidationField, passwordValidationField.t, {
+    required: true
+  });
+  const validatePasswordMatch = useCallback(value => {
+    const passwordValue = watch(passwordFieldMerged.name);
+    return value === passwordValue || doNotMatchError;
+  }, [doNotMatchError, passwordFieldMerged.name, watch]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(InputTextField, {
+      formField: passwordFieldMerged,
+      textFieldProps: {
+        type: "password",
+        autoComplete: "new-password",
+        ...passwordTextFieldProps
+      }
+    }), /*#__PURE__*/jsx(InputTextField, {
+      formField: {
+        ...validationFieldMerged,
+        validate: validatePasswordMatch,
+        t: passwordValidationField.t
+      },
+      textFieldProps: {
+        type: "password",
+        autoComplete: "new-password",
+        ...passwordValidationTextFieldProps
+      }
+    })]
+  });
+};
+
+var LoadingButtonState;
+(function (LoadingButtonState) {
+  LoadingButtonState["Idle"] = "idle";
+  LoadingButtonState["Loading"] = "loading";
+  LoadingButtonState["Success"] = "success";
+})(LoadingButtonState || (LoadingButtonState = {}));
+
+const LoadingButton = ({
+  buttonText,
+  buttonTextSuccess,
+  loadingButtonProps,
+  loadingButtonPropsPropsSuccess,
+  buttonState,
+  successIcon
+}) => {
+  const isSuccess = buttonState === LoadingButtonState.Success;
+  const propsToSpread = isSuccess ? loadingButtonPropsPropsSuccess : loadingButtonProps;
+  return /*#__PURE__*/jsx(LoadingButton$1, {
+    loading: buttonState === LoadingButtonState.Loading,
+    disabled: buttonState !== LoadingButtonState.Idle,
+    ...propsToSpread,
+    children: buttonState === LoadingButtonState.Success ? /*#__PURE__*/jsxs(Fragment, {
+      children: [successIcon ? successIcon : null, buttonTextSuccess ? buttonTextSuccess : buttonText]
+    }) : buttonText
+  });
+};
+
+/**
+ * Get loading button state from react-query mutation status.
+ */
+const loadingButtonStateFromReactQueryMutationStatus = mutationStatus => {
+  const mapStatus = {
+    idle: LoadingButtonState.Idle,
+    error: LoadingButtonState.Idle,
+    success: LoadingButtonState.Success,
+    loading: LoadingButtonState.Loading
+  };
+  return mapStatus[mutationStatus];
+};
+/**
+ * Get loading button state from a react-hook-form context.
+ */
+const useLoadingButtonStateFromFormContext = () => {
+  const formContext = useHookFormContext();
+  return loadingButtonStateFromFormState(formContext.formState);
+};
+/**
+ * Get loading button state from a react-hook-form state.
+ */
+const loadingButtonStateFromFormState = (
+// we are not interested in the value types FormState holds
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+formState) => {
+  if (formState.isSubmitting) {
+    return LoadingButtonState.Loading;
+  }
+  if (formState.isDirty) {
+    return LoadingButtonState.Idle;
+  }
+  if (formState.isSubmitSuccessful) {
+    return LoadingButtonState.Success;
+  }
+  return LoadingButtonState.Idle;
+};
+
+export { FormFieldError, FormFieldErrorDisplay, HookFormProvider, InputAutocomplete, InputCheckbox, InputDatePicker, InputDateTimePicker, InputEmail, InputNumber, InputOutlinedInput, InputPasswordSet, InputRadio, InputSelect, InputSelectFromEnum, InputSlider, InputSwitch, InputOutlinedInput as InputText, InputTextField, InputTimePicker, InputToggleButton, InputToggleButtonGroup, LoadingButton, LoadingButtonState, getFormErrorForNestedKeys, loadingButtonStateFromFormState, loadingButtonStateFromReactQueryMutationStatus, syncSubmit, useFormFieldError, useFormFieldHasError, useHookForm, useHookFormContext, useHookFormFieldArray, useLoadingButtonStateFromFormContext, useMergedFormField, useSortedOptionsWithGroup, useTranslateString };
+//# sourceMappingURL=packageExports.js.map