@digigov/form 2.0.0-a402a664 → 2.0.0-a64dc016

package/src/inputs/ImageInput/doc.mdx

@@ -12,12 +12,12 @@ Input element of type `image` defines an image as a submit button, i.e. submit b
 
 ### Default
 
-<code src="@digigov/form/inputs/ImageInput/__stories__/Default.tsx" />
+<code src="@digigov/form/src/inputs/ImageInput/__stories__/Default.tsx" />
 
 ### Display with max size
 
-<code src="@digigov/form/inputs/ImageInput/__stories__/MaxSize.tsx" />
+<code src="@digigov/form/src/inputs/ImageInput/__stories__/MaxSize.tsx" />
 
 ### Display with min and max image dimensions
 
-<code src="@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension.tsx" />
+<code src="@digigov/form/src/inputs/ImageInput/__stories__/WithInvalidImageDimension.tsx" />

package/src/inputs/ImageInput/index.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import type { UseFormReturn } from 'react-hook-form';
+import type { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { omit } from '@digigov/form/utils';
 import { Button, ButtonGroup } from '@digigov/ui/form/Button';
 import { FileUpload, FileUploadContainer } from '@digigov/ui/form/FileUpload';
 import { useTranslation } from '@digigov/ui/i18n';
@@ -50,7 +51,7 @@ export interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
 
 export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
   function ImageInput(
-    { name, disabled, onChange, resetField, defaultValue, value, ...props },
+    { name, disabled, onChange, defaultValue, value, resetField, ...props },
     ref: any
   ) {
     const imageRef = useRef(ref?.current);
@@ -87,7 +88,7 @@ export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
         setSelectedImage(null);
         setImageUrl(null);
       },
-      [selectedImage]
+      [resetField, name]
     );
 
     useEffect(() => {
@@ -134,9 +135,8 @@ export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
               accept="image/*"
               onChange={handleImageChange}
               {...{
-                ...(props as any),
+                ...omit(props, ['Field', 'reset', 'error']),
                 required: undefined,
-                Field: undefined,
                 type: 'file',
               }}
             >

package/src/inputs/Input/Input.stories.js

@@ -18,5 +18,6 @@ export { AFM } from '@digigov/form/inputs/Input/__stories__/AFM';
 export { AMKA } from '@digigov/form/inputs/Input/__stories__/AMKA';
 export { IBAN } from '@digigov/form/inputs/Input/__stories__/IBAN';
 export { Email } from '@digigov/form/inputs/Input/__stories__/Email';
+export { Rate } from '@digigov/form/inputs/Input/__stories__/Rate';
 export { PostalCode } from '@digigov/form/inputs/Input/__stories__/PostalCode';
 export { TextWithLimit } from '@digigov/form/inputs/Input/__stories__/TextWithLimit';

package/src/inputs/Input/__stories__/Rate.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+export const Rate = (_: any) => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <Field
+      key="rate"
+      name="rate"
+      type="rate"
+      label={{
+        primary: 'Συμπληρώστε το ποσοστό παραχώρησης',
+      }}
+      min={0}
+      max={100}
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default Rate;

package/src/inputs/Input/doc.mdx

@@ -11,46 +11,46 @@ a wide variety of types of input data and control widgets are available, dependi
 
 ### String
 
-<code src="@digigov/form/inputs/Input/__stories__/String.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/String.tsx" />
 
 ### Boolean
 
-<code src="@digigov/form/inputs/Input/__stories__/Boolean.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/Boolean.tsx" />
 
 ### AFM
 
-<code src="@digigov/form/inputs/Input/__stories__/AFM.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/AFM.tsx" />
 
 
 ### IBAN
 
-<code src="@digigov/form/inputs/Input/__stories__/IBAN.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/IBAN.tsx" />
 
 
 ### Integer
 
-<code src="@digigov/form/inputs/Input/__stories__/Integer.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/Integer.tsx" />
 
 
 ### Landline number
 
-<code src="@digigov/form/inputs/Input/__stories__/LandlineNumber.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/LandlineNumber.tsx" />
 
 
 ### Mobile phone 
 
-<code src="@digigov/form/inputs/Input/__stories__/MobilePhone.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/MobilePhone.tsx" />
 
 
 ### Phone number
 
-<code src="@digigov/form/inputs/Input/__stories__/PhoneNumber.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/PhoneNumber.tsx" />
 
 
 ### Postal code 
 
-<code src="@digigov/form/inputs/Input/__stories__/PostalCode.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/PostalCode.tsx" />
 
 ### Text with character limit 
 
-<code src="@digigov/form/inputs/Input/__stories__/TextWithLimit.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/TextWithLimit.tsx" />

package/src/inputs/Input/index.test.tsx

@@ -11,6 +11,7 @@ import { LandlineNumber } from '@digigov/form/inputs/Input/__stories__/LandlineN
 import { MobilePhone } from '@digigov/form/inputs/Input/__stories__/MobilePhone';
 import { PhoneNumber } from '@digigov/form/inputs/Input/__stories__/PhoneNumber';
 import { PostalCode } from '@digigov/form/inputs/Input/__stories__/PostalCode';
+import { Rate } from '@digigov/form/inputs/Input/__stories__/Rate';
 import { String } from '@digigov/form/inputs/Input/__stories__/String';
 import { StringWithTrimValidation } from '@digigov/form/inputs/Input/__stories__/StringWithTrimValidation';
 import { TextWithLimit } from '@digigov/form/inputs/Input/__stories__/TextWithLimit';
@@ -49,6 +50,9 @@ test('renders the All Input variants', async ({ mount, page }) => {
     <TestVariant title="PostalCode">
       <PostalCode />
     </TestVariant>
+    <TestVariant title="Rate">
+      <Rate />
+    </TestVariant>
     <TestVariant title="String">
       <String />
     </TestVariant>

package/src/inputs/Input/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import type { UseFormReturn } from 'react-hook-form';
 import { useWatch } from 'react-hook-form';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import type { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { omit } from '@digigov/form/utils';
 import { TextArea } from '@digigov/ui/form/TextArea';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { useTranslation } from '@digigov/ui/i18n';
@@ -10,6 +12,7 @@ const TYPES_MAP = {
   string: 'text',
   password: 'password',
   int: 'text',
+  rate: 'number',
   text: 'text',
   date: 'date',
 };
@@ -28,11 +31,11 @@ export interface InputProps
     };
   };
   Field?: UncontrolledFieldProps['Field'];
+  resetField: UseFormReturn['resetField'];
 }
 
 export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
   function WrappedInput({ name, control, type, extra, ...props }, ref: never) {
-    delete props['Field'];
     // eslint-disable-next-line prefer-const
     let { multiline = false, rows, limit } = extra || {};
     const { className } = extra || {};
@@ -65,6 +68,8 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
       return remainingText;
     };
 
+    const transformedProps = omit(props, ['Field', 'resetField']);
+
     if (multiline === true) {
       return (
         <>
@@ -72,10 +77,10 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
             name={name}
             className={className}
             rows={rows}
-            ref={ref}
+            ref={ref as React.RefObject<HTMLTextAreaElement>}
             id={name}
             {...{
-              ...props,
+              ...transformedProps,
               reset: undefined,
               required: undefined,
               type: fieldType,
@@ -84,10 +89,10 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
           {limit?.max && (
             <Hint display={'flex'}>
               {t('form.info.text.you_have')}
-              <Hint fontWeight="bold">
+              <strong>
                 &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}
                 &nbsp;
-              </Hint>
+              </strong>
               {constructRemainingText(currentValue, limit)}
             </Hint>
           )}
@@ -101,9 +106,11 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
           type={fieldType}
           data-type={type}
           className={className}
-          ref={ref}
+          ref={ref as React.RefObject<HTMLInputElement>}
           {...{
-            ...props,
+            ...transformedProps,
+            min: undefined,
+            max: undefined,
             reset: undefined,
             required: undefined,
           }}

package/src/inputs/Label/doc.mdx

@@ -11,4 +11,4 @@ The Label component is used to display descriptive text for form sections or fie
 
 ### Default
 
-<code src="@digigov/form/inputs/Label/__stories__/Default.tsx" />
+<code src="@digigov/form/src/inputs/Label/__stories__/Default.tsx" />

package/src/inputs/Label/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FieldLabelProps } from '@digigov/form/types';
+import type { FieldLabelProps } from '@digigov/form/types';
 import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 import { Hint } from '@digigov/ui/typography/Hint';

package/src/inputs/OtpInput/doc.mdx

@@ -13,4 +13,4 @@ on a computer system or other digital device.
 
 ### Default
 
-<code src="@digigov/form/inputs/OtpInput/__stories__/Default.tsx" />
+<code src="@digigov/form/src/inputs/OtpInput/__stories__/Default.tsx" />

package/src/inputs/OtpInput/index.tsx

@@ -120,40 +120,49 @@ export function useOtp(onChange, maxLength) {
   };
 }
 
-const SingleCharacterInputPart = ({ ...props }) => {
-  return <SingleCharacterInput {...props} />;
-};
+const SingleCharacterInputPart = React.forwardRef<
+  HTMLInputElement,
+  Record<string, any>
+>(({ ...props }, ref) => {
+  return <SingleCharacterInput {...props} ref={ref} />;
+});
+SingleCharacterInputPart.displayName = 'SingleCharacterInputPart';
 
-export const OtpInput = ({ name, maxLength = 6, ...props }) => {
-  const otp = useOtp(props.onChange, maxLength);
-  return (
-    <SingleCharacterInputs>
-      {otp.otpValues.map((digit, idx) => (
-        <SingleCharacterInputPart
-          name={`${name}-${idx}`}
-          id={`${name}-${idx}`}
-          type="text"
-          key={idx}
-          autoComplete="one-time-code"
-          pattern="\d{1}"
-          maxLength={maxLength}
-          value={digit}
-          disabled={props.disabled}
-          aria-required={props['aria-required']}
-          onChange={(e) => otp.handleOtpChange(e, idx)}
-          onInput={(e) => {
-            if (e.target.value === digit) {
-              otp.handleOtpChange(e, idx);
-            }
-          }}
-          onKeyDown={(e) => otp.handleKeyDown(e, idx)}
-          onFocus={otp.handleFocus}
-          onPaste={otp.handlePaste}
-          error={!digit ? props.error : false}
-        />
-      ))}
-    </SingleCharacterInputs>
-  );
-};
+export const OtpInput = React.forwardRef<HTMLInputElement, Record<string, any>>(
+  ({ name, maxLength = 6, ...props }, ref) => {
+    const otp = useOtp(props.onChange, maxLength);
+    return (
+      <SingleCharacterInputs>
+        {otp.otpValues.map((digit, idx) => (
+          <SingleCharacterInputPart
+            ref={idx === 0 ? ref : null}
+            name={`${name}-${idx}`}
+            id={`${name}-${idx}`}
+            type="text"
+            key={idx}
+            autoComplete="one-time-code"
+            pattern="\d{1}"
+            maxLength={maxLength}
+            value={digit}
+            disabled={props.disabled}
+            aria-required={props['aria-required']}
+            onChange={(e) => otp.handleOtpChange(e, idx)}
+            onInput={(e) => {
+              if (e.target.value === digit) {
+                otp.handleOtpChange(e, idx);
+              }
+            }}
+            onKeyDown={(e) => otp.handleKeyDown(e, idx)}
+            onFocus={otp.handleFocus}
+            onPaste={otp.handlePaste}
+            error={!digit ? props.error : false}
+          />
+        ))}
+      </SingleCharacterInputs>
+    );
+  }
+);
+
+OtpInput.displayName = 'OtpInput';
 
 export default OtpInput;

package/src/inputs/Radio/doc.mdx

@@ -10,14 +10,14 @@ Radios are used to let a user select one option of a limited number of choices.
 
 ### Default
 
-<code src="@digigov/form/inputs/Radio/__stories__/Default.tsx" />
+<code src="@digigov/form/src/inputs/Radio/__stories__/Default.tsx" />
 
 
 ### Conditional
 
-<code src="@digigov/form/inputs/Radio/__stories__/Conditional.tsx" />
+<code src="@digigov/form/src/inputs/Radio/__stories__/Conditional.tsx" />
 
 
 ### With divider
 
-<code src="@digigov/form/inputs/Radio/__stories__/WithDivider.tsx" />
+<code src="@digigov/form/src/inputs/Radio/__stories__/WithDivider.tsx" />

package/src/inputs/Radio/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import type { UseFormReturn } from 'react-hook-form';
 import { useWatch } from 'react-hook-form';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import type { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import type { FieldOptionProps } from '@digigov/form/inputs/Label';
+import { omit } from '@digigov/form/utils';
 import {
   RadioContainer,
   RadioItem,
@@ -19,6 +21,7 @@ export interface RadioButtonsGroupProps
     dense?: boolean;
   };
   fieldComponent?: React.FC<Omit<UncontrolledFieldProps, 'register'>>;
+  resetField: UseFormReturn['resetField'];
 }
 
 export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
@@ -51,7 +54,7 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
               disabled={disabled || optionDisabled}
               {...option}
               {...{
-                ...props,
+                ...omit(props, ['resetField']),
                 reset: undefined,
                 required: undefined,
                 error: undefined,
@@ -78,32 +81,40 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
     </RadioContainer>
   );
 };
-export const ControlledRadioButtonsGroup: React.FC<
+export const ControlledRadioButtonsGroup = React.forwardRef<
+  HTMLInputElement,
   RadioButtonsGroupProps & { onChange: (e: any) => void; value: any }
-> = ({
-  name,
-  extra: { options, className },
-  disabled,
-  onChange,
-  value,
-  Field,
-  ...props
-}) => {
+>(function ControlledRadioButtonsGroup(
+  {
+    name,
+    extra: { options, className },
+    disabled,
+    onChange,
+    value,
+    Field,
+    ...props
+  },
+  ref
+) {
   const currentValue: string | undefined = value;
   const { t } = useTranslation();
   return (
     <RadioContainer className={className} id={name}>
       {options.map(
-        ({
-          label,
-          value: v,
-          show,
-          disabled: optionDisabled,
-          selected,
-          ...option
-        }) => (
+        (
+          {
+            label,
+            value: v,
+            show,
+            disabled: optionDisabled,
+            selected,
+            ...option
+          },
+          index
+        ) => (
           <React.Fragment key={`${name}.${v}`}>
             <RadioItem
+              ref={index === 0 ? ref : undefined}
               onChange={(e) => {
                 console.log(e);
                 onChange(e);
@@ -139,6 +150,6 @@ export const ControlledRadioButtonsGroup: React.FC<
       )}
     </RadioContainer>
   );
-};
+});
 
 export default RadioButtonsGroup;

package/src/inputs/Select/doc.mdx

@@ -10,4 +10,4 @@ The select element represents a control that provides a menu of options.
 
 ### Default
 
-<code src="@digigov/form/inputs/Select/__stories__/Default.tsx" />
+<code src="@digigov/form/src/inputs/Select/__stories__/Default.tsx" />

package/src/inputs/Select/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import type { UseFormReturn } from 'react-hook-form';
+import type { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import type { FieldOptionProps } from '@digigov/form/inputs/Label';
+import { omit } from '@digigov/form/utils';
 import {
   SelectContainer,
   SelectOption,
@@ -13,6 +15,7 @@ export interface SelectProps
     options: FieldOptionProps[];
   };
   Field?: UncontrolledFieldProps['Field'];
+  resetField: UseFormReturn['resetField'];
 }
 
 export const Select: React.ExoticComponent<SelectProps> = React.forwardRef(
@@ -20,7 +23,6 @@ export const Select: React.ExoticComponent<SelectProps> = React.forwardRef(
     { name, extra: { options, className }, disabled, ...props },
     ref: never
   ) {
-    delete props.Field;
     return (
       <SelectContainer
         className={className}
@@ -29,7 +31,7 @@ export const Select: React.ExoticComponent<SelectProps> = React.forwardRef(
         id={name}
         disabled={disabled}
         {...{
-          ...props,
+          ...omit(props, ['Field', 'resetField']),
           reset: undefined,
           error: undefined,
           required: undefined,

package/src/{Field/utils/index.ts → inputs/registry.ts}

@@ -1,4 +1,4 @@
-import { FieldComponentRegistry } from '@digigov/form/Field/types';
+import { type FieldComponentItem } from '@digigov/form/Field/types';
 import AutoCompleteInput from '@digigov/form/inputs/AutoCompleteInput';
 import Checkboxes from '@digigov/form/inputs/Checkboxes';
 import DateInput from '@digigov/form/inputs/DateInput';
@@ -10,6 +10,8 @@ import OtpInput from '@digigov/form/inputs/OtpInput';
 import Radio, { ControlledRadioButtonsGroup } from '@digigov/form/inputs/Radio';
 import Select from '@digigov/form/inputs/Select';
 
+export type FieldComponentRegistry = Record<string, FieldComponentItem>;
+
 export const FIELD_COMPONENTS: FieldComponentRegistry = {
   text: {
     component: Input,

package/{lazy/index.js → src/lazy.ts}

@@ -9,10 +9,7 @@ export default {
   'FieldBase': lazy(() => import('@digigov/form/Field/FieldBase').then((module) => ({ default: module['FieldBase'] }))),
   'FieldBaseContainer': lazy(() => import('@digigov/form/Field/FieldBaseContainer').then((module) => ({ default: module['FieldBaseContainer'] }))),
   'FieldConditional': lazy(() => import('@digigov/form/Field/FieldConditional').then((module) => ({ default: module['FieldConditional'] }))),
-  'FormDialog': lazy(() => import('@digigov/form/FieldArray/FormDialog').then((module) => ({ default: module['FormDialog'] }))),
-  'ArrayItemModal': lazy(() => import('@digigov/form/FieldArray/FormDialog').then((module) => ({ default: module['ArrayItemModal'] }))),
-  'ArrayItemHeader': lazy(() => import('@digigov/form/FieldArray/FormDialog').then((module) => ({ default: module['ArrayItemHeader'] }))),
-  'ArrayItemDisplay': lazy(() => import('@digigov/form/FieldArray/FormDialog').then((module) => ({ default: module['ArrayItemDisplay'] }))),
+  'BaseFieldArray': lazy(() => import('@digigov/form/FieldArray/BaseFieldArray').then((module) => ({ default: module['BaseFieldArray'] }))),
   'FieldArray': lazy(() => import('@digigov/form/FieldArray').then((module) => ({ default: module['FieldArray'] }))),
   'FieldObject': lazy(() => import('@digigov/form/FieldObject').then((module) => ({ default: module['FieldObject'] }))),
   'FieldsetWithContext': lazy(() => import('@digigov/form/Fieldset/FieldsetWithContext').then((module) => ({ default: module['FieldsetWithContext'] }))),
@@ -45,34 +42,15 @@ export default {
   'Input': lazy(() => import('@digigov/form/inputs/Input').then((module) => ({ default: module['Input'] }))),
   'Radio': lazy(() => import('@digigov/form/inputs').then((module) => ({ default: module['Radio'] }))),
   'Select': lazy(() => import('@digigov/form/inputs/Select').then((module) => ({ default: module['Select'] }))),
-  'INPUTS_FIELDS': lazy(() => import('@digigov/form/inputs/inputsScenarios').then((module) => ({ default: module['INPUTS_FIELDS'] }))),
-  'FIELD_COMPONENTS': lazy(() => import('@digigov/form/Field/utils').then((module) => ({ default: module['FIELD_COMPONENTS'] }))),
-  'ALTERNATIVE_COMPONENTS': lazy(() => import('@digigov/form/Field/utils').then((module) => ({ default: module['ALTERNATIVE_COMPONENTS'] }))),
-  'CONTROLLED_FIELD_COMPONENTS': lazy(() => import('@digigov/form/Field/utils').then((module) => ({ default: module['CONTROLLED_FIELD_COMPONENTS'] }))),
+  'ArrayEditModal': lazy(() => import('@digigov/form/FieldArray/FormDialog/ArrayEditModal').then((module) => ({ default: module['ArrayEditModal'] }))),
+  'FormDialog': lazy(() => import('@digigov/form/FieldArray/FormDialog').then((module) => ({ default: module['FormDialog'] }))),
   'AutoCompleteInput': lazy(() => import('@digigov/form/inputs/AutoCompleteInput').then((module) => ({ default: module['AutoCompleteInput'] }))),
   'DateTimeInput': lazy(() => import('@digigov/form/inputs/DateTimeInput').then((module) => ({ default: module['DateTimeInput'] }))),
   'Image': lazy(() => import('@digigov/form/inputs/ImageInput').then((module) => ({ default: module['Image'] }))),
-  'RE_DIGIT': lazy(() => import('@digigov/form/inputs/OtpInput').then((module) => ({ default: module['RE_DIGIT'] }))),
-  'REMOVE_SPACES': lazy(() => import('@digigov/form/inputs/OtpInput').then((module) => ({ default: module['REMOVE_SPACES'] }))),
   'RadioButtonsGroup': lazy(() => import('@digigov/form/inputs/Radio').then((module) => ({ default: module['RadioButtonsGroup'] }))),
   'ControlledRadioButtonsGroup': lazy(() => import('@digigov/form/inputs/Radio').then((module) => ({ default: module['ControlledRadioButtonsGroup'] }))),
-  'AFM_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['AFM_VALIDATOR'] }))),
-  'AMKA_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['AMKA_VALIDATOR'] }))),
-  'LATER_THAN_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['LATER_THAN_VALIDATOR'] }))),
-  'EARLIER_THAN_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['EARLIER_THAN_VALIDATOR'] }))),
-  'DATE_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['DATE_VALIDATOR'] }))),
-  'LATER_THAN_DATETIME_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['LATER_THAN_DATETIME_VALIDATOR'] }))),
-  'EARLIER_THAN_DATETIME_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['EARLIER_THAN_DATETIME_VALIDATOR'] }))),
-  'DATETIME_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['DATETIME_VALIDATOR'] }))),
-  'FILE_MAX_SIZE_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['FILE_MAX_SIZE_VALIDATOR'] }))),
-  'IBAN_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['IBAN_VALIDATOR'] }))),
-  'IMAGE_DIMENSION_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['IMAGE_DIMENSION_VALIDATOR'] }))),
-  'OTP_VALIDATOR': lazy(() => import('@digigov/form/validators/utils/otp').then((module) => ({ default: module['OTP_VALIDATOR'] }))),
-  'MOBILE_PHONE_VALIDATOR': lazy(() => import('@digigov/form/validators/utils/phone').then((module) => ({ default: module['MOBILE_PHONE_VALIDATOR'] }))),
-  'PHONE_NUMBER_VALIDATOR': lazy(() => import('@digigov/form/validators/utils/phone').then((module) => ({ default: module['PHONE_NUMBER_VALIDATOR'] }))),
-  'POSTALCODE_VALIDATOR': lazy(() => import('@digigov/form/validators/utils/postal_code').then((module) => ({ default: module['POSTALCODE_VALIDATOR'] }))),
-  'UUID4_VALIDATOR': lazy(() => import('@digigov/form/validators/utils/uuid4').then((module) => ({ default: module['UUID4_VALIDATOR'] }))),
-  'TEXT_LIMIT_VALIDATOR': lazy(() => import('@digigov/form/validators/utils/text_limit').then((module) => ({ default: module['TEXT_LIMIT_VALIDATOR'] }))),
-  'INT_VALIDATOR': lazy(() => import('@digigov/form/validators/utils/int').then((module) => ({ default: module['INT_VALIDATOR'] }))),
-  'NUMBER_VALIDATOR': lazy(() => import('@digigov/form/validators/utils/number').then((module) => ({ default: module['NUMBER_VALIDATOR'] })))
+  'ArrayContainerDisplay': lazy(() => import('@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayContainerDisplay').then((module) => ({ default: module['ArrayContainerDisplay'] }))),
+  'ArrayItemDisplay': lazy(() => import('@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayItemDisplay').then((module) => ({ default: module['ArrayItemDisplay'] }))),
+  'ArrayItemHeader': lazy(() => import('@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayItemHeader').then((module) => ({ default: module['ArrayItemHeader'] }))),
+  'ArrayDisplay': lazy(() => import('@digigov/form/FieldArray/FormDialog/ArrayDisplay').then((module) => ({ default: module['ArrayDisplay'] })))
 };