@digigov/form 2.0.0-daaf7bdf → 2.0.0-eaf330f5

package/inputs/FileInput/index.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { ButtonProps } from '@digigov/ui/form/Button';
+import { FileUploadContainerProps, FileUploadProps } from '@digigov/ui/form/FileUpload';
 export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
     extra?: {
         className?: string;
@@ -8,6 +10,16 @@ export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
         limit: {
             maxSize?: number;
         };
+        containerProps?: FileUploadContainerProps;
+        uploadButtonProps?: FileUploadProps;
+        noResetButton?: boolean;
+        resetButtonProps?: ButtonProps;
+        locales?: {
+            file?: string;
+            chooseFile?: string;
+            changeFile?: string;
+            resetFile?: string;
+        };
     };
 }
 export declare const FileInput: React.FC<any>;

package/inputs/FileInput/index.js

@@ -1,44 +1,65 @@
-import React, { useState } from "react";
-import FileUpload from "@digigov/react-core/FileUpload";
-import FileUploadContainer from "@digigov/react-core/FileUploadContainer";
-import CoreHint from "@digigov/react-core/Hint";
-import Button from "@digigov/ui/form/Button";
+import React, { useEffect, useState } from "react";
+import { Button } from "@digigov/ui/form/Button";
+import {
+  FileUpload,
+  FileUploadContainer
+} from "@digigov/ui/form/FileUpload";
 import { useTranslation } from "@digigov/ui/i18n";
-import Paragraph from "@digigov/ui/typography/Paragraph";
-const FileInput = React.forwardRef(function FileInput2({ name, extra = {}, disabled, reset, onChange, ...props }, ref) {
+import { Hint } from "@digigov/ui/typography/Hint";
+import { Paragraph } from "@digigov/ui/typography/Paragraph";
+const FileInput = React.forwardRef(function FileInput2({ name, disabled, resetField, extra, onChange, value, ...props }, ref) {
+  delete props.Field;
   const { t } = useTranslation();
-  const [files, setFiles] = useState([]);
-  const handleChange = (e) => {
-    const target = e.target;
-    const selectedFiles = Array.from(
-      target.files
-    ).map(({ name: name2 }) => name2);
-    setFiles(selectedFiles);
-    onChange(e);
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FileUploadContainer, { hasFiles: files && files.length > 0 }, files?.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Paragraph, null, /* @__PURE__ */ React.createElement("b", null, t("upload.file"), ":"), " ", `${files.join(", ")}`)) : /* @__PURE__ */ React.createElement(CoreHint, null, t("upload.no_file")), /* @__PURE__ */ React.createElement(
-    FileUpload,
+  const [files, setFiles] = useState(
+    Object.values(value || {})?.map?.(({ name: name2 }) => name2) || []
+  );
+  useEffect(() => {
+    setFiles(Object.values(value || {})?.map?.(({ name: name2 }) => name2));
+  }, [value]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    FileUploadContainer,
     {
-      ref,
-      hasFiles: !!files?.length,
-      name,
-      disabled,
-      onChange: handleChange,
-      ...{ ...props, required: void 0 }
+      variant: extra?.containerProps?.variant || "default",
+      hasFiles: files && files.length > 0
     },
-    files?.length ? t("upload.change_file") : t("upload.choose_file")
-  ), files !== void 0 && files.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "link",
-      onClick: (event) => {
-        event.preventDefault();
-        reset({ [name]: "" });
-        setFiles(void 0);
-      }
-    },
-    t("upload.reset_file")
-  ))));
+    files?.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Paragraph, null, /* @__PURE__ */ React.createElement("b", null, t("upload.file"), ":"), " ", `${files.join(", ")}`)) : /* @__PURE__ */ React.createElement(Hint, null, /* @__PURE__ */ React.createElement("b", null, t("upload.file"), ": "), t("upload.no_file")),
+    /* @__PURE__ */ React.createElement(
+      FileUpload,
+      {
+        ref,
+        hasFiles: !!files?.length,
+        name,
+        variant: extra?.uploadButtonProps?.variant,
+        disabled,
+        id: name,
+        value: value?.filename,
+        onChange: (event) => {
+          if (event?.target?.files && event?.target?.files.length > 0) {
+            onChange(event.target.files);
+          }
+        },
+        ...{
+          ...props,
+          required: void 0,
+          error: void 0
+        }
+      },
+      files?.length ? t("upload.change_file") : t("upload.choose_file")
+    ),
+    files !== void 0 && files?.length > 0 && !extra?.noResetButton && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: extra?.resetButtonProps?.variant || "link",
+        onClick: (event) => {
+          event.preventDefault();
+          resetField(name);
+          setFiles(void 0);
+        },
+        color: extra?.resetButtonProps?.color || "secondary"
+      },
+      t("upload.reset_file")
+    ))
+  ));
 });
 var FileInput_default = FileInput;
 export {

package/inputs/FileInput/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/FileInput/index.tsx"],
-  "sourcesContent": ["import React, { useState } from 'react';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport FileUpload from '@digigov/react-core/FileUpload';\nimport FileUploadContainer from '@digigov/react-core/FileUploadContainer';\nimport CoreHint from '@digigov/react-core/Hint';\nimport Button from '@digigov/ui/form/Button';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport Paragraph from '@digigov/ui/typography/Paragraph';\nexport interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    className?: string;\n    multiple?: boolean;\n    accept?: string;\n    limit: {\n      maxSize?: number;\n    };\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const FileInput: React.FC<any> = React.forwardRef(function FileInput(\n  { name, extra = {}, disabled, reset, onChange, ...props },\n  ref: any\n) {\n  const { t } = useTranslation();\n  const [files, setFiles] = useState<Array<string> | undefined>([]);\n  const handleChange = (e) => {\n    const target = e.target as HTMLInputElement;\n    const selectedFiles = Array.from(\n      target.files as ArrayLike<{ name: string }>\n    ).map(({ name }) => name);\n    setFiles(selectedFiles);\n    // proceed calling the onChange provided\n    // by react-hook-form\n    onChange(e);\n  };\n  return (\n    <>\n      <FileUploadContainer hasFiles={files && files.length > 0}>\n        {files?.length ? (\n          <>\n            <Paragraph>\n              <b>{t('upload.file')}:</b> {`${files.join(', ')}`}\n            </Paragraph>\n          </>\n        ) : (\n          <CoreHint>{t('upload.no_file')}</CoreHint>\n        )}\n        <FileUpload\n          ref={ref}\n          hasFiles={!!files?.length}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          {...{ ...props, required: undefined }}\n        >\n          {files?.length ? t('upload.change_file') : t('upload.choose_file')}\n        </FileUpload>\n        {files !== undefined && files.length > 0 && (\n          <>\n            <Button\n              variant=\"link\"\n              onClick={(event) => {\n                event.preventDefault();\n                reset({ [name]: '' });\n                setFiles(undefined);\n              }}\n            >\n              {t('upload.reset_file')}\n            </Button>\n          </>\n        )}\n      </FileUploadContainer>\n    </>\n  );\n});\n\nexport default FileInput;\n"],
-  "mappings": "AAAA,OAAO,SAAS,gBAAgB;AAEhC,OAAO,gBAAgB;AACvB,OAAO,yBAAyB;AAChC,OAAO,cAAc;AACrB,OAAO,YAAY;AACnB,SAAS,sBAAsB;AAC/B,OAAO,eAAe;AAaf,MAAM,YAA2B,MAAM,WAAW,SAASA,WAChE,EAAE,MAAM,QAAQ,CAAC,GAAG,UAAU,OAAO,UAAU,GAAG,MAAM,GACxD,KACA;AACA,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAoC,CAAC,CAAC;AAChE,QAAM,eAAe,CAAC,MAAM;AAC1B,UAAM,SAAS,EAAE;AACjB,UAAM,gBAAgB,MAAM;AAAA,MAC1B,OAAO;AAAA,IACT,EAAE,IAAI,CAAC,EAAE,MAAAC,MAAK,MAAMA,KAAI;AACxB,aAAS,aAAa;AAGtB,aAAS,CAAC;AAAA,EACZ;AACA,SACE,0DACE,oCAAC,uBAAoB,UAAU,SAAS,MAAM,SAAS,KACpD,OAAO,SACN,0DACE,oCAAC,iBACC,oCAAC,WAAG,EAAE,aAAa,GAAE,GAAC,GAAI,KAAE,GAAG,MAAM,KAAK,IAAI,CAAC,EACjD,CACF,IAEA,oCAAC,gBAAU,EAAE,gBAAgB,CAAE,GAEjC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,CAAC,CAAC,OAAO;AAAA,MACnB;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACT,GAAG,EAAE,GAAG,OAAO,UAAU,OAAU;AAAA;AAAA,IAEnC,OAAO,SAAS,EAAE,oBAAoB,IAAI,EAAE,oBAAoB;AAAA,EACnE,GACC,UAAU,UAAa,MAAM,SAAS,KACrC,0DACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,CAAC,UAAU;AAClB,cAAM,eAAe;AACrB,cAAM,EAAE,CAAC,IAAI,GAAG,GAAG,CAAC;AACpB,iBAAS,MAAS;AAAA,MACpB;AAAA;AAAA,IAEC,EAAE,mBAAmB;AAAA,EACxB,CACF,CAEJ,CACF;AAEJ,CAAC;AAED,IAAO,oBAAQ;",
+  "sourcesContent": ["import React, { useEffect, useState } from 'react';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { Button, ButtonProps } from '@digigov/ui/form/Button';\nimport {\n  FileUpload,\n  FileUploadContainer,\n  FileUploadContainerProps,\n  FileUploadProps,\n} from '@digigov/ui/form/FileUpload';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport { Hint } from '@digigov/ui/typography/Hint';\nimport { Paragraph } from '@digigov/ui/typography/Paragraph';\nexport interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    className?: string;\n    multiple?: boolean;\n    accept?: string;\n    limit: {\n      maxSize?: number;\n    };\n    containerProps?: FileUploadContainerProps;\n    uploadButtonProps?: FileUploadProps;\n    noResetButton?: boolean;\n    resetButtonProps?: ButtonProps;\n    locales?: {\n      file?: string;\n      chooseFile?: string;\n      changeFile?: string;\n      resetFile?: string;\n    };\n  };\n}\n\nexport const FileInput: React.FC<any> = React.forwardRef(function FileInput(\n  { name, disabled, resetField, extra, onChange, value, ...props },\n  ref: any\n) {\n  delete props.Field;\n  const { t } = useTranslation();\n\n  const [files, setFiles] = useState<string[] | undefined>(\n    Object.values(value || {})?.map?.(({ name }) => name) || []\n  );\n  useEffect(() => {\n    setFiles(Object.values(value || {})?.map?.(({ name }) => name));\n  }, [value]);\n\n  return (\n    <>\n      <FileUploadContainer\n        variant={extra?.containerProps?.variant || 'default'}\n        hasFiles={files && files.length > 0}\n      >\n        {files?.length ? (\n          <>\n            <Paragraph>\n              <b>{t('upload.file')}:</b> {`${files.join(', ')}`}\n            </Paragraph>\n          </>\n        ) : (\n          <Hint>\n            <b>\n              {t('upload.file')}\n              {': '}\n            </b>\n            {t('upload.no_file')}\n          </Hint>\n        )}\n        <FileUpload\n          ref={ref}\n          hasFiles={!!files?.length}\n          name={name}\n          variant={extra?.uploadButtonProps?.variant}\n          disabled={disabled}\n          id={name}\n          value={value?.filename}\n          onChange={(event) => {\n            if (event?.target?.files && event?.target?.files.length > 0) {\n              onChange(event.target.files);\n            }\n          }}\n          {...{\n            ...props,\n            required: undefined,\n            error: undefined,\n          }}\n        >\n          {files?.length ? t('upload.change_file') : t('upload.choose_file')}\n        </FileUpload>\n        {files !== undefined && files?.length > 0 && !extra?.noResetButton && (\n          <>\n            <Button\n              variant={extra?.resetButtonProps?.variant || 'link'}\n              onClick={(event) => {\n                event.preventDefault();\n                resetField(name);\n                setFiles(undefined);\n              }}\n              color={extra?.resetButtonProps?.color || 'secondary'}\n            >\n              {t('upload.reset_file')}\n            </Button>\n          </>\n        )}\n      </FileUploadContainer>\n    </>\n  );\n});\n\nexport default FileInput;\n"],
+  "mappings": "AAAA,OAAO,SAAS,WAAW,gBAAgB;AAE3C,SAAS,cAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAsBnB,MAAM,YAA2B,MAAM,WAAW,SAASA,WAChE,EAAE,MAAM,UAAU,YAAY,OAAO,UAAU,OAAO,GAAG,MAAM,GAC/D,KACA;AACA,SAAO,MAAM;AACb,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,QAAM,CAAC,OAAO,QAAQ,IAAI;AAAA,IACxB,OAAO,OAAO,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,MAAAC,MAAK,MAAMA,KAAI,KAAK,CAAC;AAAA,EAC5D;AACA,YAAU,MAAM;AACd,aAAS,OAAO,OAAO,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,MAAAA,MAAK,MAAMA,KAAI,CAAC;AAAA,EAChE,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,0DACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,OAAO,gBAAgB,WAAW;AAAA,MAC3C,UAAU,SAAS,MAAM,SAAS;AAAA;AAAA,IAEjC,OAAO,SACN,0DACE,oCAAC,iBACC,oCAAC,WAAG,EAAE,aAAa,GAAE,GAAC,GAAI,KAAE,GAAG,MAAM,KAAK,IAAI,CAAC,EACjD,CACF,IAEA,oCAAC,YACC,oCAAC,WACE,EAAE,aAAa,GACf,IACH,GACC,EAAE,gBAAgB,CACrB;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU,CAAC,CAAC,OAAO;AAAA,QACnB;AAAA,QACA,SAAS,OAAO,mBAAmB;AAAA,QACnC;AAAA,QACA,IAAI;AAAA,QACJ,OAAO,OAAO;AAAA,QACd,UAAU,CAAC,UAAU;AACnB,cAAI,OAAO,QAAQ,SAAS,OAAO,QAAQ,MAAM,SAAS,GAAG;AAC3D,qBAAS,MAAM,OAAO,KAAK;AAAA,UAC7B;AAAA,QACF;AAAA,QACC,GAAG;AAAA,UACF,GAAG;AAAA,UACH,UAAU;AAAA,UACV,OAAO;AAAA,QACT;AAAA;AAAA,MAEC,OAAO,SAAS,EAAE,oBAAoB,IAAI,EAAE,oBAAoB;AAAA,IACnE;AAAA,IACC,UAAU,UAAa,OAAO,SAAS,KAAK,CAAC,OAAO,iBACnD,0DACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,OAAO,kBAAkB,WAAW;AAAA,QAC7C,SAAS,CAAC,UAAU;AAClB,gBAAM,eAAe;AACrB,qBAAW,IAAI;AACf,mBAAS,MAAS;AAAA,QACpB;AAAA,QACA,OAAO,OAAO,kBAAkB,SAAS;AAAA;AAAA,MAExC,EAAE,mBAAmB;AAAA,IACxB,CACF;AAAA,EAEJ,CACF;AAEJ,CAAC;AAED,IAAO,oBAAQ;",
   "names": ["FileInput", "name"]
 }

package/inputs/ImageInput/index.js

@@ -1,16 +1,15 @@
 import React, { useState, useCallback } from "react";
-import FileUpload from "@digigov/react-core/FileUpload";
-import FileUploadContainer from "@digigov/react-core/FileUploadContainer";
-import CoreHint from "@digigov/react-core/Hint";
-import Button, { ButtonGroup } from "@digigov/ui/form/Button";
+import { Button, ButtonGroup } from "@digigov/ui/form/Button";
+import { FileUpload, FileUploadContainer } from "@digigov/ui/form/FileUpload";
 import { useTranslation } from "@digigov/ui/i18n";
-import Paragraph from "@digigov/ui/typography/Paragraph";
-import { Base } from "@digigov/react-core/Base";
+import { Hint } from "@digigov/ui/typography/Hint";
+import { Paragraph } from "@digigov/ui/typography/Paragraph";
+import { Base } from "@digigov/ui/utils/Base";
 const Image = React.memo(function Image2({ src }) {
   return /* @__PURE__ */ React.createElement(Base, { as: "img", src, className: "ds-image--ratio" });
 });
 const ImageInput = React.forwardRef(
-  function ImageInput2({ name, extra = {}, disabled, onChange, reset, ...props }, ref) {
+  function ImageInput2({ name, disabled, onChange, reset, ...props }, ref) {
     const { t } = useTranslation();
     const [selectedImage, setSelectedImage] = useState(null);
     const [imageUrl, setImageUrl] = useState(null);
@@ -36,16 +35,22 @@ const ImageInput = React.forwardRef(
       },
       [selectedImage]
     );
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FileUploadContainer, null, selectedImage !== null ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Paragraph, null, /* @__PURE__ */ React.createElement(Base, { as: "b" }, t("upload.image"), ":"), " ", `${selectedImage?.name}`)) : /* @__PURE__ */ React.createElement(CoreHint, { className: "ds-dashed--border" }, t("upload.no_image")), /* @__PURE__ */ React.createElement(React.Fragment, null, selectedImage !== null && /* @__PURE__ */ React.createElement(Image, { src: imageUrl }), /* @__PURE__ */ React.createElement(ButtonGroup, { marginTop: 2 }, selectedImage !== null && /* @__PURE__ */ React.createElement(Button, { variant: "link", onClick: handleDeleteImage }, t("upload.reset_file")), /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FileUploadContainer, null, selectedImage !== null ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Paragraph, null, /* @__PURE__ */ React.createElement(Base, { as: "b" }, t("upload.image"), ":"), " ", `${selectedImage?.name}`)) : /* @__PURE__ */ React.createElement(Hint, { className: "ds-dashed--border" }, t("upload.no_image")), /* @__PURE__ */ React.createElement(React.Fragment, null, selectedImage !== null && /* @__PURE__ */ React.createElement(Image, { src: imageUrl }), /* @__PURE__ */ React.createElement(ButtonGroup, { marginTop: 2 }, selectedImage !== null && /* @__PURE__ */ React.createElement(Button, { variant: "link", onClick: handleDeleteImage }, t("upload.reset_file")), /* @__PURE__ */ React.createElement(
       FileUpload,
       {
         ref,
         hasFiles: selectedImage !== null,
         name,
+        id: name,
         disabled,
         accept: "image/*",
         onChange: handleImageChange,
-        ...{ ...props, required: void 0, type: "file" }
+        ...{
+          ...props,
+          required: void 0,
+          Field: void 0,
+          type: "file"
+        }
       },
       t("upload.choose_image")
     )))));

package/inputs/ImageInput/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/ImageInput/index.tsx"],
-  "sourcesContent": ["import React, { useState, useCallback } from 'react';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport FileUpload from '@digigov/react-core/FileUpload';\nimport FileUploadContainer from '@digigov/react-core/FileUploadContainer';\nimport CoreHint from '@digigov/react-core/Hint';\nimport Button, { ButtonGroup } from '@digigov/ui/form/Button';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport Paragraph from '@digigov/ui/typography/Paragraph';\nimport { Base } from '@digigov/react-core/Base';\nexport interface ImageProps {\n  src?: any;\n}\n\nexport interface Limit {\n  maxSize?: number;\n  maxWidth?: number;\n  maxHeight?: number;\n  minWidth?: number;\n  minHeight?: number;\n}\n\nexport const Image: React.FC<ImageProps> = React.memo(function Image({ src }) {\n  return <Base as='img' src={src} className=\"ds-image--ratio\" />;\n});\nexport interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    className?: string;\n    multiple?: boolean;\n    accept?: string;\n    limit?: Limit;\n  };\n  reset: (values?: any) => void;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const ImageInput: React.FC<ImageInputProps> = React.forwardRef(\n  function ImageInput(\n    { name, extra = {}, disabled, onChange, reset, ...props },\n    ref: any\n  ) {\n    const { t } = useTranslation();\n    const [selectedImage, setSelectedImage] = useState<File | null>(null);\n    const [imageUrl, setImageUrl] = useState<string | null>(null);\n    const handleImageChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        const target = e.target as HTMLInputElement;\n        const selectedFile = target.files?.[0];\n\n        if (selectedFile) {\n          setSelectedImage(selectedFile);\n          setImageUrl(URL.createObjectURL(selectedFile));\n        }\n        onChange(e);\n      },\n      [selectedImage]\n    );\n\n    const handleDeleteImage = useCallback(\n      (event) => {\n        event.preventDefault();\n        reset({ [name]: '' });\n        setSelectedImage(null);\n        setImageUrl('');\n      },\n      [selectedImage]\n    );\n\n    return (\n      <>\n        <FileUploadContainer>\n          {selectedImage !== null ? (\n            <>\n              <Paragraph>\n                <Base as='b'>{t('upload.image')}:</Base> {`${selectedImage?.name}`}\n              </Paragraph>\n            </>\n          ) : (\n            <CoreHint className=\"ds-dashed--border\">\n              {t('upload.no_image')}\n            </CoreHint>\n          )}\n          <>\n            {selectedImage !== null && <Image src={imageUrl} />}\n            <ButtonGroup marginTop={2}>\n              {selectedImage !== null && (\n                <Button variant=\"link\" onClick={handleDeleteImage}>\n                  {t('upload.reset_file')}\n                </Button>\n              )}\n              <FileUpload\n                ref={ref}\n                hasFiles={selectedImage !== null}\n                name={name}\n                disabled={disabled}\n                accept=\"image/*\"\n                onChange={handleImageChange}\n                {...{ ...props, required: undefined, type: 'file' }}\n              >\n                {t('upload.choose_image')}\n              </FileUpload>\n            </ButtonGroup>\n          </>\n        </FileUploadContainer>\n      </>\n    );\n  }\n);\n\nexport default ImageInput;\n"],
-  "mappings": "AAAA,OAAO,SAAS,UAAU,mBAAmB;AAE7C,OAAO,gBAAgB;AACvB,OAAO,yBAAyB;AAChC,OAAO,cAAc;AACrB,OAAO,UAAU,mBAAmB;AACpC,SAAS,sBAAsB;AAC/B,OAAO,eAAe;AACtB,SAAS,YAAY;AAad,MAAM,QAA8B,MAAM,KAAK,SAASA,OAAM,EAAE,IAAI,GAAG;AAC5E,SAAO,oCAAC,QAAK,IAAG,OAAM,KAAU,WAAU,mBAAkB;AAC9D,CAAC;AAYM,MAAM,aAAwC,MAAM;AAAA,EACzD,SAASC,YACP,EAAE,MAAM,QAAQ,CAAC,GAAG,UAAU,UAAU,OAAO,GAAG,MAAM,GACxD,KACA;AACA,UAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAsB,IAAI;AACpE,UAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AAC5D,UAAM,oBAAoB;AAAA,MACxB,CAAC,MAA2C;AAC1C,UAAE,eAAe;AACjB,cAAM,SAAS,EAAE;AACjB,cAAM,eAAe,OAAO,QAAQ,CAAC;AAErC,YAAI,cAAc;AAChB,2BAAiB,YAAY;AAC7B,sBAAY,IAAI,gBAAgB,YAAY,CAAC;AAAA,QAC/C;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,aAAa;AAAA,IAChB;AAEA,UAAM,oBAAoB;AAAA,MACxB,CAAC,UAAU;AACT,cAAM,eAAe;AACrB,cAAM,EAAE,CAAC,IAAI,GAAG,GAAG,CAAC;AACpB,yBAAiB,IAAI;AACrB,oBAAY,EAAE;AAAA,MAChB;AAAA,MACA,CAAC,aAAa;AAAA,IAChB;AAEA,WACE,0DACE,oCAAC,2BACE,kBAAkB,OACjB,0DACE,oCAAC,iBACC,oCAAC,QAAK,IAAG,OAAK,EAAE,cAAc,GAAE,GAAC,GAAO,KAAE,GAAG,eAAe,IAAI,EAClE,CACF,IAEA,oCAAC,YAAS,WAAU,uBACjB,EAAE,iBAAiB,CACtB,GAEF,0DACG,kBAAkB,QAAQ,oCAAC,SAAM,KAAK,UAAU,GACjD,oCAAC,eAAY,WAAW,KACrB,kBAAkB,QACjB,oCAAC,UAAO,SAAQ,QAAO,SAAS,qBAC7B,EAAE,mBAAmB,CACxB,GAEF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU,kBAAkB;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,QAAO;AAAA,QACP,UAAU;AAAA,QACT,GAAG,EAAE,GAAG,OAAO,UAAU,QAAW,MAAM,OAAO;AAAA;AAAA,MAEjD,EAAE,qBAAqB;AAAA,IAC1B,CACF,CACF,CACF,CACF;AAAA,EAEJ;AACF;AAEA,IAAO,qBAAQ;",
+  "sourcesContent": ["import React, { useState, useCallback } from 'react';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { Button, ButtonGroup } from '@digigov/ui/form/Button';\nimport { FileUpload, FileUploadContainer } from '@digigov/ui/form/FileUpload';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport { Hint } from '@digigov/ui/typography/Hint';\nimport { Paragraph } from '@digigov/ui/typography/Paragraph';\nimport { Base } from '@digigov/ui/utils/Base';\nexport interface ImageProps {\n  src?: any;\n}\n\nexport interface Limit {\n  maxSize?: number;\n  maxWidth?: number;\n  maxHeight?: number;\n  minWidth?: number;\n  minHeight?: number;\n}\n\nexport const Image: React.FC<ImageProps> = React.memo(function Image({ src }) {\n  return <Base as=\"img\" src={src} className=\"ds-image--ratio\" />;\n});\nexport interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    className?: string;\n    multiple?: boolean;\n    accept?: string;\n    limit?: Limit;\n  };\n  reset: (values?: any) => void;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const ImageInput: React.FC<ImageInputProps> = React.forwardRef(\n  function ImageInput({ name, disabled, onChange, reset, ...props }, ref: any) {\n    const { t } = useTranslation();\n    const [selectedImage, setSelectedImage] = useState<File | null>(null);\n    const [imageUrl, setImageUrl] = useState<string | null>(null);\n    const handleImageChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        const target = e.target as HTMLInputElement;\n        const selectedFile = target.files?.[0];\n\n        if (selectedFile) {\n          setSelectedImage(selectedFile);\n          setImageUrl(URL.createObjectURL(selectedFile));\n        }\n        onChange(e);\n      },\n      [selectedImage]\n    );\n\n    const handleDeleteImage = useCallback(\n      (event) => {\n        event.preventDefault();\n        reset({ [name]: '' });\n        setSelectedImage(null);\n        setImageUrl('');\n      },\n      [selectedImage]\n    );\n\n    return (\n      <>\n        <FileUploadContainer>\n          {selectedImage !== null ? (\n            <>\n              <Paragraph>\n                <Base as=\"b\">{t('upload.image')}:</Base>{' '}\n                {`${selectedImage?.name}`}\n              </Paragraph>\n            </>\n          ) : (\n            <Hint className=\"ds-dashed--border\">{t('upload.no_image')}</Hint>\n          )}\n          <>\n            {selectedImage !== null && <Image src={imageUrl} />}\n            <ButtonGroup marginTop={2}>\n              {selectedImage !== null && (\n                <Button variant=\"link\" onClick={handleDeleteImage}>\n                  {t('upload.reset_file')}\n                </Button>\n              )}\n              <FileUpload\n                ref={ref}\n                hasFiles={selectedImage !== null}\n                name={name}\n                id={name}\n                disabled={disabled}\n                accept=\"image/*\"\n                onChange={handleImageChange}\n                {...{\n                  ...props,\n                  required: undefined,\n                  Field: undefined,\n                  type: 'file',\n                }}\n              >\n                {t('upload.choose_image')}\n              </FileUpload>\n            </ButtonGroup>\n          </>\n        </FileUploadContainer>\n      </>\n    );\n  }\n);\n\nexport default ImageInput;\n"],
+  "mappings": "AAAA,OAAO,SAAS,UAAU,mBAAmB;AAE7C,SAAS,QAAQ,mBAAmB;AACpC,SAAS,YAAY,2BAA2B;AAChD,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAad,MAAM,QAA8B,MAAM,KAAK,SAASA,OAAM,EAAE,IAAI,GAAG;AAC5E,SAAO,oCAAC,QAAK,IAAG,OAAM,KAAU,WAAU,mBAAkB;AAC9D,CAAC;AAYM,MAAM,aAAwC,MAAM;AAAA,EACzD,SAASC,YAAW,EAAE,MAAM,UAAU,UAAU,OAAO,GAAG,MAAM,GAAG,KAAU;AAC3E,UAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAsB,IAAI;AACpE,UAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AAC5D,UAAM,oBAAoB;AAAA,MACxB,CAAC,MAA2C;AAC1C,UAAE,eAAe;AACjB,cAAM,SAAS,EAAE;AACjB,cAAM,eAAe,OAAO,QAAQ,CAAC;AAErC,YAAI,cAAc;AAChB,2BAAiB,YAAY;AAC7B,sBAAY,IAAI,gBAAgB,YAAY,CAAC;AAAA,QAC/C;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,aAAa;AAAA,IAChB;AAEA,UAAM,oBAAoB;AAAA,MACxB,CAAC,UAAU;AACT,cAAM,eAAe;AACrB,cAAM,EAAE,CAAC,IAAI,GAAG,GAAG,CAAC;AACpB,yBAAiB,IAAI;AACrB,oBAAY,EAAE;AAAA,MAChB;AAAA,MACA,CAAC,aAAa;AAAA,IAChB;AAEA,WACE,0DACE,oCAAC,2BACE,kBAAkB,OACjB,0DACE,oCAAC,iBACC,oCAAC,QAAK,IAAG,OAAK,EAAE,cAAc,GAAE,GAAC,GAAQ,KACxC,GAAG,eAAe,IAAI,EACzB,CACF,IAEA,oCAAC,QAAK,WAAU,uBAAqB,EAAE,iBAAiB,CAAE,GAE5D,0DACG,kBAAkB,QAAQ,oCAAC,SAAM,KAAK,UAAU,GACjD,oCAAC,eAAY,WAAW,KACrB,kBAAkB,QACjB,oCAAC,UAAO,SAAQ,QAAO,SAAS,qBAC7B,EAAE,mBAAmB,CACxB,GAEF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU,kBAAkB;AAAA,QAC5B;AAAA,QACA,IAAI;AAAA,QACJ;AAAA,QACA,QAAO;AAAA,QACP,UAAU;AAAA,QACT,GAAG;AAAA,UACF,GAAG;AAAA,UACH,UAAU;AAAA,UACV,OAAO;AAAA,UACP,MAAM;AAAA,QACR;AAAA;AAAA,MAEC,EAAE,qBAAqB;AAAA,IAC1B,CACF,CACF,CACF,CACF;AAAA,EAEJ;AACF;AAEA,IAAO,qBAAQ;",
   "names": ["Image", "ImageInput"]
 }

package/inputs/Input/Input.stories.d.ts

@@ -5,12 +5,14 @@ declare namespace _default {
 }
 export default _default;
 export { String } from "@digigov/form/inputs/Input/__stories__/String";
+export { StringWithTrimValidation } from "@digigov/form/inputs/Input/__stories__/StringWithTrimValidation";
 export { Integer } from "@digigov/form/inputs/Input/__stories__/Integer";
 export { Boolean } from "@digigov/form/inputs/Input/__stories__/Boolean";
 export { PhoneNumber } from "@digigov/form/inputs/Input/__stories__/PhoneNumber";
 export { LandlineNumber } from "@digigov/form/inputs/Input/__stories__/LandlineNumber";
 export { MobilePhone } from "@digigov/form/inputs/Input/__stories__/MobilePhone";
 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 { PostalCode } from "@digigov/form/inputs/Input/__stories__/PostalCode";
 export { TextWithLimit } from "@digigov/form/inputs/Input/__stories__/TextWithLimit";

package/inputs/Input/__stories__/AMKA.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const AMKA: () => React.JSX.Element;
+export default AMKA;

package/inputs/Input/__stories__/StringWithTrimValidation.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const StringWithTrimValidation: () => React.JSX.Element;
+export default StringWithTrimValidation;

package/inputs/Input/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
+export interface InputProps extends Omit<UncontrolledFieldProps, 'extra' | 'Field'> {
     extra?: {
         fullWidth?: boolean;
         multiline?: boolean;
@@ -11,6 +11,7 @@ export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
             max?: number;
         };
     };
+    Field?: UncontrolledFieldProps['Field'];
 }
 export declare const Input: React.ExoticComponent<InputProps>;
 export default Input;

package/inputs/Input/index.js

@@ -1,17 +1,19 @@
 import React from "react";
 import { useWatch } from "react-hook-form";
-import { Hint } from "@digigov/react-core/Hint";
-import { TextArea } from "@digigov/react-core/TextArea";
-import { TextInput } from "@digigov/react-core/TextInput";
+import { TextArea } from "@digigov/ui/form/TextArea";
+import { TextInput } from "@digigov/ui/form/TextInput";
 import { useTranslation } from "@digigov/ui/i18n";
+import { Hint } from "@digigov/ui/typography/Hint";
 const TYPES_MAP = {
   string: "text",
+  password: "password",
   int: "text",
   text: "text",
   date: "date"
 };
 const Input = React.forwardRef(
   function WrappedInput({ name, control, type, extra, ...props }, ref) {
+    delete props["Field"];
     let { multiline = false, rows, limit } = extra || {};
     const { className } = extra || {};
     multiline = multiline === true || type === "text";
@@ -39,6 +41,7 @@ const Input = React.forwardRef(
           className,
           rows,
           ref,
+          id: name,
           ...{
             ...props,
             reset: void 0,
@@ -52,11 +55,16 @@ const Input = React.forwardRef(
         TextInput,
         {
           name,
+          id: name,
           type: fieldType,
           "data-type": type,
           className,
           ref,
-          ...{ ...props, reset: void 0, required: void 0 }
+          ...{
+            ...props,
+            reset: void 0,
+            required: void 0
+          }
         }
       );
     }

package/inputs/Input/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/Input/index.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { useWatch } from 'react-hook-form';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { Hint } from '@digigov/react-core/Hint';\nimport { TextArea } from '@digigov/react-core/TextArea';\nimport { TextInput } from '@digigov/react-core/TextInput';\nimport { useTranslation } from '@digigov/ui/i18n';\nconst TYPES_MAP = {\n  string: 'text',\n  int: 'text',\n  text: 'text',\n  date: 'date',\n};\n\nexport interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    fullWidth?: boolean;\n    multiline?: boolean;\n    className?: string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    rows?: any;\n    limit: {\n      min?: number;\n      max?: number;\n    };\n  };\n}\n\nexport const Input: React.ExoticComponent<InputProps> = React.forwardRef(\n  function WrappedInput({ name, control, type, extra, ...props }, ref: never) {\n    // eslint-disable-next-line prefer-const\n    let { multiline = false, rows, limit } = extra || {};\n    const { className } = extra || {};\n    // if enforced to multiline use true. Derive from type otherwise.\n    multiline = multiline === true || type === 'text';\n    // use explicit rows value if set. Derive from multiline otherwise.\n    rows = rows || (multiline ? 4 : 1);\n    // translate dilosi type to HTML Input type\n    const fieldType = TYPES_MAP[type || 'text'] || 'text';\n    const { t } = useTranslation();\n    const currentValue: string | '' = useWatch({ control, name });\n\n    const getRemainingChars = (currentValue, limit) => {\n      if (currentValue) {\n        return limit?.max - currentValue.length\n      }\n      return limit?.max;\n    }\n\n    const constructRemainingText = (currentValue, limit) => {\n      const remainingChars = getRemainingChars(currentValue, limit);\n      let remainingText = Math.abs(remainingChars) === 1 ? t('form.info.text.character') : t('form.info.text.characters');\n      remainingText += remainingChars > 0 ? ` ${t('form.info.text.remaining')}.` : ` ${t('form.info.text.too_many')}.`;\n      return remainingText;\n    }\n\n    if (multiline === true) {\n      return (\n        <>\n          <TextArea\n            name={name}\n            className={className}\n            rows={rows}\n            ref={ref}\n            {...{\n              ...props,\n              reset: undefined,\n              required: undefined,\n              type: fieldType,\n            }}\n          />\n          {limit?.max && (\n            <Hint display={'flex'}>\n              {t('form.info.text.you_have')}\n              <Hint fontWeight='bold'>\n                &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}&nbsp;\n              </Hint>\n              {constructRemainingText(currentValue, limit)}\n            </Hint>\n          )}\n        </>\n      );\n    } else {\n      return (\n        <TextInput\n          name={name}\n          type={fieldType}\n          data-type={type}\n          className={className}\n          ref={ref}\n          {...{ ...props, reset: undefined, required: undefined }}\n        />\n      );\n    }\n  }\n);\n\nexport default Input;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,MAAM,YAAY;AAAA,EAChB,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AACR;AAgBO,MAAM,QAA2C,MAAM;AAAA,EAC5D,SAAS,aAAa,EAAE,MAAM,SAAS,MAAM,OAAO,GAAG,MAAM,GAAG,KAAY;AAE1E,QAAI,EAAE,YAAY,OAAO,MAAM,MAAM,IAAI,SAAS,CAAC;AACnD,UAAM,EAAE,UAAU,IAAI,SAAS,CAAC;AAEhC,gBAAY,cAAc,QAAQ,SAAS;AAE3C,WAAO,SAAS,YAAY,IAAI;AAEhC,UAAM,YAAY,UAAU,QAAQ,MAAM,KAAK;AAC/C,UAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,UAAM,eAA4B,SAAS,EAAE,SAAS,KAAK,CAAC;AAE5D,UAAM,oBAAoB,CAACA,eAAcC,WAAU;AACjD,UAAID,eAAc;AAChB,eAAOC,QAAO,MAAMD,cAAa;AAAA,MACnC;AACA,aAAOC,QAAO;AAAA,IAChB;AAEA,UAAM,yBAAyB,CAACD,eAAcC,WAAU;AACtD,YAAM,iBAAiB,kBAAkBD,eAAcC,MAAK;AAC5D,UAAI,gBAAgB,KAAK,IAAI,cAAc,MAAM,IAAI,EAAE,0BAA0B,IAAI,EAAE,2BAA2B;AAClH,uBAAiB,iBAAiB,IAAI,IAAI,EAAE,0BAA0B,CAAC,MAAM,IAAI,EAAE,yBAAyB,CAAC;AAC7G,aAAO;AAAA,IACT;AAEA,QAAI,cAAc,MAAM;AACtB,aACE,0DACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,YACF,GAAG;AAAA,YACH,OAAO;AAAA,YACP,UAAU;AAAA,YACV,MAAM;AAAA,UACR;AAAA;AAAA,MACF,GACC,OAAO,OACN,oCAAC,QAAK,SAAS,UACZ,EAAE,yBAAyB,GAC5B,oCAAC,QAAK,YAAW,UAAO,QACf,GAAG,KAAK,IAAI,kBAAkB,cAAc,KAAK,CAAC,CAAC,IAAG,MAC/D,GACC,uBAAuB,cAAc,KAAK,CAC7C,CAEJ;AAAA,IAEJ,OAAO;AACL,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAM;AAAA,UACN,aAAW;AAAA,UACX;AAAA,UACA;AAAA,UACC,GAAG,EAAE,GAAG,OAAO,OAAO,QAAW,UAAU,OAAU;AAAA;AAAA,MACxD;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,IAAO,gBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { useWatch } from 'react-hook-form';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { TextArea } from '@digigov/ui/form/TextArea';\nimport { TextInput } from '@digigov/ui/form/TextInput';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport { Hint } from '@digigov/ui/typography/Hint';\n\nconst TYPES_MAP = {\n  string: 'text',\n  password: 'password',\n  int: 'text',\n  text: 'text',\n  date: 'date',\n};\n\nexport interface InputProps\n  extends Omit<UncontrolledFieldProps, 'extra' | 'Field'> {\n  extra?: {\n    fullWidth?: boolean;\n    multiline?: boolean;\n    className?: string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    rows?: any;\n    limit: {\n      min?: number;\n      max?: number;\n    };\n  };\n  Field?: UncontrolledFieldProps['Field'];\n}\n\nexport const Input: React.ExoticComponent<InputProps> = React.forwardRef(\n  function WrappedInput({ name, control, type, extra, ...props }, ref: never) {\n    delete props['Field'];\n    // eslint-disable-next-line prefer-const\n    let { multiline = false, rows, limit } = extra || {};\n    const { className } = extra || {};\n    // if enforced to multiline use true. Derive from type otherwise.\n    multiline = multiline === true || type === 'text';\n    // use explicit rows value if set. Derive from multiline otherwise.\n    rows = rows || (multiline ? 4 : 1);\n    // translate dilosi type to HTML Input type\n    const fieldType = TYPES_MAP[type || 'text'] || 'text';\n    const { t } = useTranslation();\n    const currentValue: string | '' = useWatch({ control, name });\n\n    const getRemainingChars = (currentValue, limit) => {\n      if (currentValue) {\n        return limit?.max - currentValue.length;\n      }\n      return limit?.max;\n    };\n\n    const constructRemainingText = (currentValue, limit) => {\n      const remainingChars = getRemainingChars(currentValue, limit);\n      let remainingText =\n        Math.abs(remainingChars) === 1\n          ? t('form.info.text.character')\n          : t('form.info.text.characters');\n      remainingText +=\n        remainingChars > 0\n          ? ` ${t('form.info.text.remaining')}.`\n          : ` ${t('form.info.text.too_many')}.`;\n      return remainingText;\n    };\n\n    if (multiline === true) {\n      return (\n        <>\n          <TextArea\n            name={name}\n            className={className}\n            rows={rows}\n            ref={ref}\n            id={name}\n            {...{\n              ...props,\n              reset: undefined,\n              required: undefined,\n              type: fieldType,\n            }}\n          />\n          {limit?.max && (\n            <Hint display={'flex'}>\n              {t('form.info.text.you_have')}\n              <Hint fontWeight=\"bold\">\n                &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}\n                &nbsp;\n              </Hint>\n              {constructRemainingText(currentValue, limit)}\n            </Hint>\n          )}\n        </>\n      );\n    } else {\n      return (\n        <TextInput\n          name={name}\n          id={name}\n          type={fieldType}\n          data-type={type}\n          className={className}\n          ref={ref}\n          {...{\n            ...props,\n            reset: undefined,\n            required: undefined,\n          }}\n        />\n      );\n    }\n  }\n);\n\nexport default Input;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,gBAAgB;AAEzB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AAErB,MAAM,YAAY;AAAA,EAChB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AACR;AAkBO,MAAM,QAA2C,MAAM;AAAA,EAC5D,SAAS,aAAa,EAAE,MAAM,SAAS,MAAM,OAAO,GAAG,MAAM,GAAG,KAAY;AAC1E,WAAO,MAAM,OAAO;AAEpB,QAAI,EAAE,YAAY,OAAO,MAAM,MAAM,IAAI,SAAS,CAAC;AACnD,UAAM,EAAE,UAAU,IAAI,SAAS,CAAC;AAEhC,gBAAY,cAAc,QAAQ,SAAS;AAE3C,WAAO,SAAS,YAAY,IAAI;AAEhC,UAAM,YAAY,UAAU,QAAQ,MAAM,KAAK;AAC/C,UAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,UAAM,eAA4B,SAAS,EAAE,SAAS,KAAK,CAAC;AAE5D,UAAM,oBAAoB,CAACA,eAAcC,WAAU;AACjD,UAAID,eAAc;AAChB,eAAOC,QAAO,MAAMD,cAAa;AAAA,MACnC;AACA,aAAOC,QAAO;AAAA,IAChB;AAEA,UAAM,yBAAyB,CAACD,eAAcC,WAAU;AACtD,YAAM,iBAAiB,kBAAkBD,eAAcC,MAAK;AAC5D,UAAI,gBACF,KAAK,IAAI,cAAc,MAAM,IACzB,EAAE,0BAA0B,IAC5B,EAAE,2BAA2B;AACnC,uBACE,iBAAiB,IACb,IAAI,EAAE,0BAA0B,CAAC,MACjC,IAAI,EAAE,yBAAyB,CAAC;AACtC,aAAO;AAAA,IACT;AAEA,QAAI,cAAc,MAAM;AACtB,aACE,0DACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,IAAI;AAAA,UACH,GAAG;AAAA,YACF,GAAG;AAAA,YACH,OAAO;AAAA,YACP,UAAU;AAAA,YACV,MAAM;AAAA,UACR;AAAA;AAAA,MACF,GACC,OAAO,OACN,oCAAC,QAAK,SAAS,UACZ,EAAE,yBAAyB,GAC5B,oCAAC,QAAK,YAAW,UAAO,QACf,GAAG,KAAK,IAAI,kBAAkB,cAAc,KAAK,CAAC,CAAC,IAAG,MAE/D,GACC,uBAAuB,cAAc,KAAK,CAC7C,CAEJ;AAAA,IAEJ,OAAO;AACL,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,IAAI;AAAA,UACJ,MAAM;AAAA,UACN,aAAW;AAAA,UACX;AAAA,UACA;AAAA,UACC,GAAG;AAAA,YACF,GAAG;AAAA,YACH,OAAO;AAAA,YACP,UAAU;AAAA,UACZ;AAAA;AAAA,MACF;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,IAAO,gBAAQ;",
   "names": ["currentValue", "limit"]
 }

package/inputs/Input/inputsInputScenarios.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/Input/inputsInputScenarios.ts"],
-  "sourcesContent": ["import el from '@digigov/form/locales/el';\n\nconst INPUTS_INPUT_FIELDS = [\n  {\n    key: 'location',\n    type: 'string',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF\u03BD \u03C4\u03CC\u03C0\u03BF \u03BA\u03B1\u03C4\u03BF\u03B9\u03BA\u03AF\u03B1\u03C2 \u03C3\u03B1\u03C2',\n    },\n    required: true,\n  },\n  {\n    key: 'text',\n    type: 'text',\n    required: true,\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03B1\u03AF\u03C4\u03B7\u03BC\u03AC \u03C3\u03B1\u03C2',\n    },\n  },\n  {\n    key: 'email',\n    type: 'email',\n    label: {\n      primary: '\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7 \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03BF\u03CD \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF\u03C5 (email)',\n    },\n    required: true,\n  },\n  {\n    key: 'desired-mount',\n    type: 'number',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C0\u03BF\u03C3\u03CC \u03C0\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03B5\u03BD\u03B4\u03B9\u03B1\u03C6\u03AD\u03C1\u03B5\u03B9',\n    },\n    required: true,\n  },\n  {\n    key: 'age',\n    type: 'int',\n    required: true,\n    label: {\n    primary: '\u03A0\u03BF\u03B9\u03AC \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03B7\u03BB\u03B9\u03BA\u03AF\u03B1 \u03C3\u03B1\u03C2;',\n    secondary:\n        '\u039A\u03B1\u03C4\u03B1\u03C7\u03C9\u03C1\u03AF\u03C3\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B7\u03BB\u03B9\u03BA\u03AF\u03B1 \u03C3\u03B1\u03C2',\n    },\n  },\n  {\n    key: 'afm',\n    type: 'afm',\n    required: true,\n    label: { primary: '\u0391\u03A6\u039C' },\n  },\n  {\n    key: 'iban',\n    type: 'iban',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03B1\u03C1\u03B9\u03B8\u03BC\u03CC \u03C4\u03BF\u03C5 \u03C4\u03C1\u03B1\u03C0\u03B5\u03B6\u03B9\u03BA\u03BF\u03CD \u03C3\u03B1\u03C2 \u03BB\u03BF\u03B3\u03B1\u03C1\u03B9\u03B1\u03C3\u03BC\u03BF\u03CD',\n    },\n    required: true,\n  },\n  {\n    key: 'uuid4',\n    type: 'uuid4',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF uuid4',\n    },\n    required: true,\n  },\n  {\n    key: 'mobile-phone',\n    type: 'mobile_phone',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03BA\u03B9\u03BD\u03B7\u03C4\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF',\n    },\n    required: true,\n    extra: {\n    countries: ['gr'],\n      phoneType: 'mobile',\n    }\n  },\n  {\n    key: 'phone-number',\n    type: 'phone_number',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03CC \u03C3\u03B1\u03C2',\n    },\n    required: true,\n    extra: {\n      countries: ['gr'],\n    }\n  },\n  {\n    key: 'phone-number-landline',\n    type: 'phone_number',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C3\u03C4\u03B1\u03B8\u03B5\u03C1\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03CC',\n    },\n    required: true,\n    extra: {\n      countries: ['gr'],\n      phoneType: 'landline',\n    }\n  },\n  {\n    key: 'postal-code',\n    type: 'postal_code',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF\u03BD \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03BA\u03CE\u03B4\u03B9\u03BA\u03B1',\n    },\n    extra:{ countries: ['GR'] },\n    required: true,\n  },\n]\n  \nexport const scenarios = [\n{\n  title: 'success fill for inputs Input',\n  describe: 'inputs Input scenario',\n  fields: INPUTS_INPUT_FIELDS,\n  fill: [\n    {\n      fieldKey: 'text',\n      value: 'aaaaaaa',\n    },\n    {\n        fieldKey: 'age',\n        value: '12',\n    },\n    {\n        fieldKey: 'email',\n        value: 'example@mail.com',\n    },\n    {\n        fieldKey: 'location',\n        value: 'Location1',\n    },\n    {\n        fieldKey: 'postal-code',\n        value: '42100',\n    },\n    {\n        fieldKey: 'afm',\n        value: '094536469',\n    },\n    {\n        fieldKey: 'desired-mount',\n        value: '12.5'\n    },\n    {\n        fieldKey: 'mobile-phone',\n        value: '+306900000000'\n    },\n    {\n        fieldKey: 'phone-number',\n        value: '6900000000'\n    },\n    {\n        fieldKey: 'phone-number-landline',\n        value: '2100000000'\n    },\n    {\n        fieldKey: 'iban',\n        value: 'GR3201122267115323218375195'\n    },\n    {\n        fieldKey: 'uuid4',\n        value: '1e805d00-ea67-478a-ab8b-d13ff8b38fa3',\n    }\n  ],\n  expect: [\n    {\n        type: 'success',\n        fieldKey: 'age',\n        text: el.form.error.required,\n    },\n    {\n      type: 'success',\n      fieldKey: 'text',\n      text: el.form.error.required,\n    },\n    {\n        type: 'success',\n        fieldKey: 'email',\n        text: el.form.error.required,\n    },\n    {\n        type: 'success',\n        fieldKey: 'location',\n        text: el.form.error.required,\n    },\n    {\n        type: 'success',\n        fieldKey: 'postal-code',\n        text: el.form.error.required,\n    },\n    {\n        type: 'success',\n        fieldKey: 'afm',\n        text: el.form.error.required,\n    },\n    {\n        type: 'success',\n        fieldKey: 'desired-mount',\n        text: el.form.error.required,\n    },\n    {\n        type: 'success',\n        fieldKey: 'mobile-phone',\n        text: el.form.error.required,\n    },\n    {\n        type: 'success',\n        fieldKey: 'phone-number',\n        text: el.form.error.required,\n    },\n    {\n        type: 'success',\n        fieldKey: 'phone-number-landline',\n        text: el.form.error.required,\n    },\n    {\n        type: 'success',\n        fieldKey: 'iban',\n        text: el.form.error.required,\n    },\n    {\n        type: 'success',\n        fieldKey: 'uuid4',\n        text: el.form.error.required,\n    },\n  ]\n},\n{\n  title: 'empty fill for inputs Input',\n  describe: 'inputs Input scenario',\n  fields: INPUTS_INPUT_FIELDS,\n  fill: [],\n  expect: [\n  {\n      type: 'error',\n      fieldKey: 'age',\n      text: el.form.error.required,\n  },\n  {\n      type: 'error',\n      fieldKey: 'email',\n      text: el.form.error.required,\n  },\n  {\n      type: 'error',\n      fieldKey: 'location',\n      text: el.form.error.required,\n  },\n  {\n      type: 'error',\n      fieldKey: 'postal-code',\n      text: el.form.error.required,\n  },\n  {\n      type: 'error',\n      fieldKey: 'afm',\n      text: el.form.error.required,\n  },\n  {\n      type: 'error',\n      fieldKey: 'desired-mount',\n      text: el.form.error.required,\n  },\n  {\n      type: 'error',\n      fieldKey: 'mobile-phone',\n      text: el.form.error.required,\n  },\n  {\n      type: 'error',\n      fieldKey: 'phone-number',\n      text: el.form.error.required,\n  },\n  {\n      type: 'error',\n      fieldKey: 'phone-number-landline',\n      text: el.form.error.required,\n  },\n  {\n      type: 'error',\n      fieldKey: 'iban',\n      text: el.form.error.required,\n  },\n  {\n      type: 'error',\n      fieldKey: 'uuid4',\n      text: el.form.error.required,\n  },\n  ]\n},\n{\n  title: 'incorrect types for inputs Input',\n  describe: 'inputs Input scenario',\n  fields: INPUTS_INPUT_FIELDS,\n  fill: [\n  {\n      fieldKey: 'age',\n      value: 'aa',\n  },\n  {\n      fieldKey: 'email',\n      value: '23232',\n  },\n  {\n      fieldKey: 'location',\n      value: '23232',\n  },\n  {\n      fieldKey: 'postal-code',\n      value: 'aaaaa',\n  },\n  {\n      fieldKey: 'afm',\n      value: 'aaaaaaaaa',\n  },\n  {\n      fieldKey: 'desired-mount',\n      value: 'aaa'\n  },\n  {\n      fieldKey: 'mobile-phone',\n      value: '+33690000000'\n  },\n  {\n      fieldKey: 'phone-number',\n      value: '000000000'\n  },\n  {\n      fieldKey: 'phone-number-landline',\n      value: '000000000'\n  },\n  {\n      fieldKey: 'iban',\n      value: 'aaaaaa'\n  },\n  {\n      fieldKey: 'uuid4',\n      value: 'aaaaaa',\n  }\n  ],\n  expect: [\n  {\n      type: 'error',\n      fieldKey: 'age',\n      text: el.form.error.number,\n  },\n  {\n      type: 'error',\n      fieldKey: 'email',\n      text: el.form.error.email,\n  },\n  {\n      type: 'success',\n      fieldKey: 'location',\n      text: el.form.error.string,\n  },\n  {\n      type: 'error',\n      fieldKey: 'postal-code',\n      text: el.form.error.postalCode,\n  },\n  {\n      type: 'error',\n      fieldKey: 'afm',\n      text: el.form.error.afm,\n  },\n  {\n      type: 'error',\n      fieldKey: 'desired-mount',\n      text: el.form.error.number,\n  },\n  {\n      type: 'error',\n      fieldKey: 'mobile-phone',\n      text: el.form.error.mobile_phone,\n  },\n  {\n      type: 'error',\n      fieldKey: 'phone-number',\n      text: el.form.error.phone_number,\n  },\n  {\n      type: 'error',\n      fieldKey: 'phone-number-landline',\n      text: el.form.error.landline,\n  },\n  {\n      type: 'error',\n      fieldKey: 'iban',\n      text: el.form.error.iban,\n  },\n  {\n      type: 'error',\n      fieldKey: 'uuid4',\n      text: el.form.error.uuid4,\n  },\n  ]\n},\n]\n\nexport default scenarios"],
-  "mappings": "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",
+  "sourcesContent": ["import el from '@digigov/form/locales/el';\n\nconst INPUTS_INPUT_FIELDS = [\n  {\n    key: 'location',\n    type: 'string',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF\u03BD \u03C4\u03CC\u03C0\u03BF \u03BA\u03B1\u03C4\u03BF\u03B9\u03BA\u03AF\u03B1\u03C2 \u03C3\u03B1\u03C2',\n    },\n    required: true,\n  },\n  {\n    key: 'text',\n    type: 'text',\n    required: true,\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03B1\u03AF\u03C4\u03B7\u03BC\u03AC \u03C3\u03B1\u03C2',\n    },\n  },\n  {\n    key: 'email',\n    type: 'email',\n    label: {\n      primary: '\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7 \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03BF\u03CD \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF\u03C5 (email)',\n    },\n    required: true,\n  },\n  {\n    key: 'desired-mount',\n    type: 'number',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C0\u03BF\u03C3\u03CC \u03C0\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03B5\u03BD\u03B4\u03B9\u03B1\u03C6\u03AD\u03C1\u03B5\u03B9',\n    },\n    required: true,\n  },\n  {\n    key: 'age',\n    type: 'int',\n    required: true,\n    label: {\n      primary: '\u03A0\u03BF\u03B9\u03AC \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03B7\u03BB\u03B9\u03BA\u03AF\u03B1 \u03C3\u03B1\u03C2;',\n      secondary: '\u039A\u03B1\u03C4\u03B1\u03C7\u03C9\u03C1\u03AF\u03C3\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B7\u03BB\u03B9\u03BA\u03AF\u03B1 \u03C3\u03B1\u03C2',\n    },\n  },\n  {\n    key: 'afm',\n    type: 'afm',\n    required: true,\n    label: { primary: '\u0391\u03A6\u039C' },\n  },\n  {\n    key: 'iban',\n    type: 'iban',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03B1\u03C1\u03B9\u03B8\u03BC\u03CC \u03C4\u03BF\u03C5 \u03C4\u03C1\u03B1\u03C0\u03B5\u03B6\u03B9\u03BA\u03BF\u03CD \u03C3\u03B1\u03C2 \u03BB\u03BF\u03B3\u03B1\u03C1\u03B9\u03B1\u03C3\u03BC\u03BF\u03CD',\n    },\n    required: true,\n  },\n  {\n    key: 'uuid4',\n    type: 'uuid4',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF uuid4',\n    },\n    required: true,\n  },\n  {\n    key: 'mobile-phone',\n    type: 'mobile_phone',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03BA\u03B9\u03BD\u03B7\u03C4\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF',\n    },\n    required: true,\n    extra: {\n      countries: ['gr'],\n      phoneType: 'mobile',\n    },\n  },\n  {\n    key: 'phone-number',\n    type: 'phone_number',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03CC \u03C3\u03B1\u03C2',\n    },\n    required: true,\n    extra: {\n      countries: ['gr'],\n    },\n  },\n  {\n    key: 'phone-number-landline',\n    type: 'phone_number',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C3\u03C4\u03B1\u03B8\u03B5\u03C1\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03CC',\n    },\n    required: true,\n    extra: {\n      countries: ['gr'],\n      phoneType: 'landline',\n    },\n  },\n  {\n    key: 'postal-code',\n    type: 'postal_code',\n    label: {\n      primary: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF\u03BD \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03BA\u03CE\u03B4\u03B9\u03BA\u03B1',\n    },\n    extra: { countries: ['GR'] },\n    required: true,\n  },\n];\n\nexport const scenarios = [\n  {\n    title: 'success fill for inputs Input',\n    describe: 'inputs Input scenario',\n    fields: INPUTS_INPUT_FIELDS,\n    fill: [\n      {\n        fieldKey: 'text',\n        value: 'aaaaaaa',\n      },\n      {\n        fieldKey: 'age',\n        value: '12',\n      },\n      {\n        fieldKey: 'email',\n        value: 'example@mail.com',\n      },\n      {\n        fieldKey: 'location',\n        value: 'Location1',\n      },\n      {\n        fieldKey: 'postal-code',\n        value: '42100',\n      },\n      {\n        fieldKey: 'afm',\n        value: '094536469',\n      },\n      {\n        fieldKey: 'desired-mount',\n        value: '12.5',\n      },\n      {\n        fieldKey: 'mobile-phone',\n        value: '+306900000000',\n      },\n      {\n        fieldKey: 'phone-number',\n        value: '6900000000',\n      },\n      {\n        fieldKey: 'phone-number-landline',\n        value: '2100000000',\n      },\n      {\n        fieldKey: 'iban',\n        value: 'GR3201122267115323218375195',\n      },\n      {\n        fieldKey: 'uuid4',\n        value: '1e805d00-ea67-478a-ab8b-d13ff8b38fa3',\n      },\n    ],\n    expect: [\n      {\n        type: 'success',\n        fieldKey: 'age',\n        text: el.form.error.required,\n      },\n      {\n        type: 'success',\n        fieldKey: 'text',\n        text: el.form.error.required,\n      },\n      {\n        type: 'success',\n        fieldKey: 'email',\n        text: el.form.error.required,\n      },\n      {\n        type: 'success',\n        fieldKey: 'location',\n        text: el.form.error.required,\n      },\n      {\n        type: 'success',\n        fieldKey: 'postal-code',\n        text: el.form.error.required,\n      },\n      {\n        type: 'success',\n        fieldKey: 'afm',\n        text: el.form.error.required,\n      },\n      {\n        type: 'success',\n        fieldKey: 'desired-mount',\n        text: el.form.error.required,\n      },\n      {\n        type: 'success',\n        fieldKey: 'mobile-phone',\n        text: el.form.error.required,\n      },\n      {\n        type: 'success',\n        fieldKey: 'phone-number',\n        text: el.form.error.required,\n      },\n      {\n        type: 'success',\n        fieldKey: 'phone-number-landline',\n        text: el.form.error.required,\n      },\n      {\n        type: 'success',\n        fieldKey: 'iban',\n        text: el.form.error.required,\n      },\n      {\n        type: 'success',\n        fieldKey: 'uuid4',\n        text: el.form.error.required,\n      },\n    ],\n  },\n  {\n    title: 'empty fill for inputs Input',\n    describe: 'inputs Input scenario',\n    fields: INPUTS_INPUT_FIELDS,\n    fill: [],\n    expect: [\n      {\n        type: 'error',\n        fieldKey: 'age',\n        text: el.form.error.required,\n      },\n      {\n        type: 'error',\n        fieldKey: 'email',\n        text: el.form.error.required,\n      },\n      {\n        type: 'error',\n        fieldKey: 'location',\n        text: el.form.error.required,\n      },\n      {\n        type: 'error',\n        fieldKey: 'postal-code',\n        text: el.form.error.required,\n      },\n      {\n        type: 'error',\n        fieldKey: 'afm',\n        text: el.form.error.required,\n      },\n      {\n        type: 'error',\n        fieldKey: 'desired-mount',\n        text: el.form.error.required,\n      },\n      {\n        type: 'error',\n        fieldKey: 'mobile-phone',\n        text: el.form.error.required,\n      },\n      {\n        type: 'error',\n        fieldKey: 'phone-number',\n        text: el.form.error.required,\n      },\n      {\n        type: 'error',\n        fieldKey: 'phone-number-landline',\n        text: el.form.error.required,\n      },\n      {\n        type: 'error',\n        fieldKey: 'iban',\n        text: el.form.error.required,\n      },\n      {\n        type: 'error',\n        fieldKey: 'uuid4',\n        text: el.form.error.required,\n      },\n    ],\n  },\n  {\n    title: 'incorrect types for inputs Input',\n    describe: 'inputs Input scenario',\n    fields: INPUTS_INPUT_FIELDS,\n    fill: [\n      {\n        fieldKey: 'age',\n        value: 'aa',\n      },\n      {\n        fieldKey: 'email',\n        value: '23232',\n      },\n      {\n        fieldKey: 'location',\n        value: '23232',\n      },\n      {\n        fieldKey: 'postal-code',\n        value: 'aaaaa',\n      },\n      {\n        fieldKey: 'afm',\n        value: 'aaaaaaaaa',\n      },\n      {\n        fieldKey: 'desired-mount',\n        value: 'aaa',\n      },\n      {\n        fieldKey: 'mobile-phone',\n        value: '+33690000000',\n      },\n      {\n        fieldKey: 'phone-number',\n        value: '000000000',\n      },\n      {\n        fieldKey: 'phone-number-landline',\n        value: '000000000',\n      },\n      {\n        fieldKey: 'iban',\n        value: 'aaaaaa',\n      },\n      {\n        fieldKey: 'uuid4',\n        value: 'aaaaaa',\n      },\n    ],\n    expect: [\n      {\n        type: 'error',\n        fieldKey: 'age',\n        text: el.form.error.number,\n      },\n      {\n        type: 'error',\n        fieldKey: 'email',\n        text: el.form.error.email,\n      },\n      {\n        type: 'success',\n        fieldKey: 'location',\n        text: el.form.error.string,\n      },\n      {\n        type: 'error',\n        fieldKey: 'postal-code',\n        text: el.form.error.postalCode,\n      },\n      {\n        type: 'error',\n        fieldKey: 'afm',\n        text: el.form.error.afm,\n      },\n      {\n        type: 'error',\n        fieldKey: 'desired-mount',\n        text: el.form.error.number,\n      },\n      {\n        type: 'error',\n        fieldKey: 'mobile-phone',\n        text: el.form.error.mobile_phone,\n      },\n      {\n        type: 'error',\n        fieldKey: 'phone-number',\n        text: el.form.error.phone_number,\n      },\n      {\n        type: 'error',\n        fieldKey: 'phone-number-landline',\n        text: el.form.error.landline,\n      },\n      {\n        type: 'error',\n        fieldKey: 'iban',\n        text: el.form.error.iban,\n      },\n      {\n        type: 'error',\n        fieldKey: 'uuid4',\n        text: el.form.error.uuid4,\n      },\n    ],\n  },\n];\n\nexport default scenarios;\n"],
+  "mappings": "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",
   "names": []
 }

package/inputs/Label/index.d.ts

@@ -11,8 +11,6 @@ export interface FieldOptionProps {
 export interface LabelProps {
     primary?: string;
     secondary?: string;
-}
-export interface LabelProps {
     className?: string;
     value?: string;
     label?: FieldLabelProps;

package/inputs/Label/index.js

@@ -1,7 +1,7 @@
 import React from "react";
-import Hint from "@digigov/react-core/Hint";
-import LabelTitle from "@digigov/react-core/LabelTitle";
+import { LabelTitle } from "@digigov/ui/form/LabelContainer";
 import { useTranslation } from "@digigov/ui/i18n";
+import { Hint } from "@digigov/ui/typography/Hint";
 const Label = ({ className, label, value }) => {
   const { t } = useTranslation();
   if ((!label || label && !label.primary && !label.secondary) && !value) {

package/inputs/Label/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/Label/index.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { FieldLabelProps } from '@digigov/form/types';\nimport Hint from '@digigov/react-core/Hint';\nimport LabelTitle from '@digigov/react-core/LabelTitle';\nimport { useTranslation } from '@digigov/ui/i18n';\n\nexport interface FieldOptionProps {\n  label?: FieldLabelProps;\n  value: string;\n  show?: string[];\n  disabled?: boolean;\n  selected?: () => React.ReactNode;\n  divider?: string;\n}\n\nexport interface LabelProps {\n  primary?: string;\n  secondary?: string;\n}\n\nexport interface LabelProps {\n  className?: string;\n  value?: string;\n  label?: FieldLabelProps;\n}\n\nexport const Label: React.FC<LabelProps> = ({ className, label, value }) => {\n  const { t } = useTranslation();\n  if ((!label || (label && !label.primary && !label.secondary)) && !value) {\n    return null;\n  }\n  return (\n    <>\n      <LabelTitle className={className} size=\"sm\">\n        {(label && label.primary && t(label.primary)) || value}\n      </LabelTitle>\n      {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}\n    </>\n  );\n};\n\n\nexport default Label;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAElB,OAAO,UAAU;AACjB,OAAO,gBAAgB;AACvB,SAAS,sBAAsB;AAsBxB,MAAM,QAA8B,CAAC,EAAE,WAAW,OAAO,MAAM,MAAM;AAC1E,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,OAAK,CAAC,SAAU,SAAS,CAAC,MAAM,WAAW,CAAC,MAAM,cAAe,CAAC,OAAO;AACvE,WAAO;AAAA,EACT;AACA,SACE,0DACE,oCAAC,cAAW,WAAsB,MAAK,QACnC,SAAS,MAAM,WAAW,EAAE,MAAM,OAAO,KAAM,KACnD,GACC,SAAS,MAAM,aAAa,oCAAC,YAAM,EAAE,MAAM,SAAS,CAAE,CACzD;AAEJ;AAGA,IAAO,gBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { FieldLabelProps } from '@digigov/form/types';\nimport { LabelTitle } from '@digigov/ui/form/LabelContainer';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport { Hint } from '@digigov/ui/typography/Hint';\n\nexport interface FieldOptionProps {\n  label?: FieldLabelProps;\n  value: string;\n  show?: string[];\n  disabled?: boolean;\n  selected?: () => React.ReactNode;\n  divider?: string;\n}\n\nexport interface LabelProps {\n  primary?: string;\n  secondary?: string;\n  className?: string;\n  value?: string;\n  label?: FieldLabelProps;\n}\n\nexport const Label: React.FC<LabelProps> = ({ className, label, value }) => {\n  const { t } = useTranslation();\n  if ((!label || (label && !label.primary && !label.secondary)) && !value) {\n    return null;\n  }\n  return (\n    <>\n      <LabelTitle className={className} size=\"sm\">\n        {(label && label.primary && t(label.primary)) || value}\n      </LabelTitle>\n      {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}\n    </>\n  );\n};\n\nexport default Label;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AAmBd,MAAM,QAA8B,CAAC,EAAE,WAAW,OAAO,MAAM,MAAM;AAC1E,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,OAAK,CAAC,SAAU,SAAS,CAAC,MAAM,WAAW,CAAC,MAAM,cAAe,CAAC,OAAO;AACvE,WAAO;AAAA,EACT;AACA,SACE,0DACE,oCAAC,cAAW,WAAsB,MAAK,QACnC,SAAS,MAAM,WAAW,EAAE,MAAM,OAAO,KAAM,KACnD,GACC,SAAS,MAAM,aAAa,oCAAC,YAAM,EAAE,MAAM,SAAS,CAAE,CACzD;AAEJ;AAEA,IAAO,gBAAQ;",
   "names": []
 }

package/inputs/OtpInput/index.js

@@ -114,6 +114,7 @@ const OtpInput = ({ name, maxLength = 6, ...props }) => {
     SingleCharacterInputPart,
     {
       name: `${name}-${idx}`,
+      id: `${name}-${idx}`,
       type: "text",
       key: idx,
       autoComplete: "one-time-code",

package/inputs/OtpInput/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/OtpInput/index.tsx"],
-  "sourcesContent": ["import React, { useState, useCallback } from 'react';\nimport SingleCharacterInputs, {\n  SingleCharacterInput,\n} from '@digigov/ui/form/SingleCharacterInputs';\n\nexport const RE_DIGIT = new RegExp(/^\\d+$/);\nexport const REMOVE_SPACES = new RegExp(/\\s+/g);\n\nexport function useOtp(onChange, maxLength) {\n  const [otpValues, setOtpValues] = useState(Array<string>(maxLength).fill(''));\n  const handleChange = useCallback(\n    (otp: string[]) => {\n      setOtpValues(otp);\n      const otpValue = otp.join('');\n      onChange(otpValue);\n    },\n    [onChange]\n  );\n\n  const setOtp = (item: string, idx) => {\n    const updatedOTPValues = [...otpValues];\n    if (item.length === 1 || item.length === 0) {\n      updatedOTPValues[idx] = item[0] || '';\n      handleChange(updatedOTPValues);\n    } else if (item.length === maxLength) {\n      const valueArray = item.split('').slice(0, maxLength);\n      handleChange(valueArray);\n    }\n  };\n\n  const setSelectionRange = useCallback((target) => {\n    return target.setSelectionRange(0, target.value.length);\n  }, []);\n\n  const focusToNextInput = useCallback((target: HTMLElement) => {\n    const nextElement = target.nextElementSibling as HTMLInputElement | null;\n    if (nextElement) {\n      nextElement.focus();\n    }\n  }, []);\n\n  const focusToPrevInput = useCallback((target: HTMLElement) => {\n    const previousElement = target.previousElementSibling as HTMLInputElement | null;\n    if (previousElement) {\n      previousElement.focus();\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>, idx: number) => {\n      const { key } = e;\n      const target = e.target as HTMLInputElement;\n      let targetValue = target.value;\n      setSelectionRange(target);\n      if (key === 'ArrowRight' || key === 'ArrowDown') {\n        e.preventDefault();\n        return focusToNextInput(target);\n      }\n      if (key === 'ArrowLeft' || key === 'ArrowUp') {\n        e.preventDefault();\n        return focusToPrevInput(target);\n      }\n      if (e.key === 'Backspace' || e.key === 'Delete') {\n        if (targetValue !== '') {\n          targetValue = '';\n        } else {\n          focusToPrevInput(target);\n        }\n        setOtp(targetValue, idx);\n        return e.preventDefault();\n      }\n    },\n    [setOtp, focusToPrevInput, focusToNextInput]\n  );\n\n  const handleFocus = useCallback(\n    (e: React.FocusEvent<HTMLInputElement>) => {\n      const { target } = e;\n      setSelectionRange(target);\n    },\n    [setSelectionRange]\n  );\n  const handleOtpChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, idx: number) => {\n      const target = e.target;\n      const targetValue = target.value;\n      const isTargetValueDigit = RE_DIGIT.test(targetValue);\n      // We want to pass the empty string when the value is deleted\n      // emptry string replaces the deleted value\n      if (isTargetValueDigit || targetValue === '') {\n        setOtp(targetValue, idx);\n        if (target.value.length > 1) {\n          target.blur();\n        }\n        focusToNextInput(target);\n      }\n    },\n    [setOtp, handleKeyDown, handleFocus]\n  );\n\n  const handlePaste = useCallback(\n    (e: React.ClipboardEvent<HTMLInputElement>) => {\n      e.preventDefault();\n      const pastedData = e.clipboardData\n        .getData('text/plain')\n        .replace(REMOVE_SPACES, '');\n      if (pastedData) {\n        setOtp(pastedData, 0);\n      }\n    },\n    []\n  );\n  return {\n    otpValues,\n    handleOtpChange,\n    handleKeyDown,\n    handleFocus,\n    handlePaste,\n  };\n}\n\nconst SingleCharacterInputPart = ({ ...props }) => {\n  return <SingleCharacterInput {...props} />;\n};\n\nexport const OtpInput = ({ name, maxLength = 6, ...props }) => {\n  const otp = useOtp(props.onChange, maxLength);\n  return (\n    <SingleCharacterInputs>\n      {otp.otpValues.map((digit, idx) => (\n        <SingleCharacterInputPart\n          name={`${name}-${idx}`}\n          type=\"text\"\n          key={idx}\n          autoComplete=\"one-time-code\"\n          pattern=\"\\d{1}\"\n          maxLength={maxLength}\n          value={digit}\n          disabled={props.disabled}\n          aria-required={props['aria-required']}\n          onChange={(e) => otp.handleOtpChange(e, idx)}\n          onInput={(e) => {\n            if (e.target.value === digit) {\n              otp.handleOtpChange(e, idx);\n            }\n          }}\n          onKeyDown={(e) => otp.handleKeyDown(e, idx)}\n          onFocus={otp.handleFocus}\n          onPaste={otp.handlePaste}\n          error={!digit ? props.error : false}\n        />\n      ))}\n    </SingleCharacterInputs>\n  );\n};\n\nexport default OtpInput;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState, useCallback } from 'react';\nimport SingleCharacterInputs, {\n  SingleCharacterInput,\n} from '@digigov/ui/form/SingleCharacterInputs';\n\nexport const RE_DIGIT = new RegExp(/^\\d+$/);\nexport const REMOVE_SPACES = new RegExp(/\\s+/g);\n\nexport function useOtp(onChange, maxLength) {\n  const [otpValues, setOtpValues] = useState(Array<string>(maxLength).fill(''));\n  const handleChange = useCallback(\n    (otp: string[]) => {\n      setOtpValues(otp);\n      const otpValue = otp.join('');\n      onChange(otpValue);\n    },\n    [onChange]\n  );\n\n  const setOtp = (item: string, idx) => {\n    const updatedOTPValues = [...otpValues];\n    if (item.length === 1 || item.length === 0) {\n      updatedOTPValues[idx] = item[0] || '';\n      handleChange(updatedOTPValues);\n    } else if (item.length === maxLength) {\n      const valueArray = item.split('').slice(0, maxLength);\n      handleChange(valueArray);\n    }\n  };\n\n  const setSelectionRange = useCallback((target) => {\n    return target.setSelectionRange(0, target.value.length);\n  }, []);\n\n  const focusToNextInput = useCallback((target: HTMLElement) => {\n    const nextElement = target.nextElementSibling as HTMLInputElement | null;\n    if (nextElement) {\n      nextElement.focus();\n    }\n  }, []);\n\n  const focusToPrevInput = useCallback((target: HTMLElement) => {\n    const previousElement =\n      target.previousElementSibling as HTMLInputElement | null;\n    if (previousElement) {\n      previousElement.focus();\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>, idx: number) => {\n      const { key } = e;\n      const target = e.target as HTMLInputElement;\n      let targetValue = target.value;\n      setSelectionRange(target);\n      if (key === 'ArrowRight' || key === 'ArrowDown') {\n        e.preventDefault();\n        return focusToNextInput(target);\n      }\n      if (key === 'ArrowLeft' || key === 'ArrowUp') {\n        e.preventDefault();\n        return focusToPrevInput(target);\n      }\n      if (e.key === 'Backspace' || e.key === 'Delete') {\n        if (targetValue !== '') {\n          targetValue = '';\n        } else {\n          focusToPrevInput(target);\n        }\n        setOtp(targetValue, idx);\n        return e.preventDefault();\n      }\n    },\n    [setOtp, focusToPrevInput, focusToNextInput]\n  );\n\n  const handleFocus = useCallback(\n    (e: React.FocusEvent<HTMLInputElement>) => {\n      const { target } = e;\n      setSelectionRange(target);\n    },\n    [setSelectionRange]\n  );\n  const handleOtpChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, idx: number) => {\n      const target = e.target;\n      const targetValue = target.value;\n      const isTargetValueDigit = RE_DIGIT.test(targetValue);\n      // We want to pass the empty string when the value is deleted\n      // emptry string replaces the deleted value\n      if (isTargetValueDigit || targetValue === '') {\n        setOtp(targetValue, idx);\n        if (target.value.length > 1) {\n          target.blur();\n        }\n        focusToNextInput(target);\n      }\n    },\n    [setOtp, handleKeyDown, handleFocus]\n  );\n\n  const handlePaste = useCallback(\n    (e: React.ClipboardEvent<HTMLInputElement>) => {\n      e.preventDefault();\n      const pastedData = e.clipboardData\n        .getData('text/plain')\n        .replace(REMOVE_SPACES, '');\n      if (pastedData) {\n        setOtp(pastedData, 0);\n      }\n    },\n    []\n  );\n  return {\n    otpValues,\n    handleOtpChange,\n    handleKeyDown,\n    handleFocus,\n    handlePaste,\n  };\n}\n\nconst SingleCharacterInputPart = ({ ...props }) => {\n  return <SingleCharacterInput {...props} />;\n};\n\nexport const OtpInput = ({ name, maxLength = 6, ...props }) => {\n  const otp = useOtp(props.onChange, maxLength);\n  return (\n    <SingleCharacterInputs>\n      {otp.otpValues.map((digit, idx) => (\n        <SingleCharacterInputPart\n          name={`${name}-${idx}`}\n          id={`${name}-${idx}`}\n          type=\"text\"\n          key={idx}\n          autoComplete=\"one-time-code\"\n          pattern=\"\\d{1}\"\n          maxLength={maxLength}\n          value={digit}\n          disabled={props.disabled}\n          aria-required={props['aria-required']}\n          onChange={(e) => otp.handleOtpChange(e, idx)}\n          onInput={(e) => {\n            if (e.target.value === digit) {\n              otp.handleOtpChange(e, idx);\n            }\n          }}\n          onKeyDown={(e) => otp.handleKeyDown(e, idx)}\n          onFocus={otp.handleFocus}\n          onPaste={otp.handlePaste}\n          error={!digit ? props.error : false}\n        />\n      ))}\n    </SingleCharacterInputs>\n  );\n};\n\nexport default OtpInput;\n"],
+  "mappings": "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",
   "names": []
 }

package/inputs/Radio/index.d.ts

@@ -4,7 +4,7 @@ import { FieldOptionProps } from '@digigov/form/inputs/Label';
 export interface RadioButtonsGroupProps extends Omit<UncontrolledFieldProps, 'extra'> {
     extra: {
         className?: string;
-        options: Array<FieldOptionProps>;
+        options: FieldOptionProps[];
         dense?: boolean;
     };
     fieldComponent?: React.FC<Omit<UncontrolledFieldProps, 'register'>>;

package/inputs/Radio/index.js

@@ -1,11 +1,13 @@
 import React from "react";
 import { useWatch } from "react-hook-form";
-import { Base } from "@digigov/react-core/Base";
-import Hint from "@digigov/react-core/Hint";
-import { RadioConditional } from "@digigov/react-core/RadioConditional";
-import RadioContainer from "@digigov/react-core/RadioContainer";
-import RadioItem from "@digigov/react-core/RadioItem";
+import {
+  RadioContainer,
+  RadioItem,
+  RadioConditional
+} from "@digigov/ui/form/RadioContainer";
 import { useTranslation } from "@digigov/ui/i18n";
+import { Hint } from "@digigov/ui/typography/Hint";
+import { Base } from "@digigov/ui/utils/Base";
 const RadioButtonsGroup = ({
   name,
   control,
@@ -83,6 +85,7 @@ const ControlledRadioButtonsGroup = ({
           reset: void 0,
           required: void 0,
           error: void 0,
+          Field: void 0,
           "aria-describedby": void 0,
           type: "radio"
         }