@nwon/react-mui-hook-form 3.0.4 → 3.1.0

package/dist/packageExports.js

@@ -1,1761 +0,0 @@
-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,
-  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]);
-  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
-          });
-        }
-      },
-      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
-      ,
-      ...autoCompleteProps
-    }), /*#__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,
-  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
-            }
-          },
-          ...restField,
-          ...datePickerProps
-        })
-      }), /*#__PURE__*/jsx(FormFieldError, {
-        fieldName: formField.name
-      })]
-    })
-  });
-};
-
-const InputDateTimePicker = ({
-  formField,
-  dateTimePickerProps,
-  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
-            }
-          },
-          ...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,
-  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;
-  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,
-          ...selectComponentProps,
-          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 /*#__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,
-  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
-            }
-          },
-          ...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