@digigov/form 2.0.0-a402a664 → 2.0.0-aa380ec7

package/inputs/DateTimeInput/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/DateTimeInput/index.tsx"],
-  "sourcesContent": ["import React, { useMemo, useState } from 'react';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { useFormContext } from '@digigov/form/FormContext';\nimport {\n  DateInputContainer,\n  DateInputItem,\n} from '@digigov/ui/form/DateInputContainer';\nimport { useTranslation } from '@digigov/ui/i18n';\ndayjs.extend(customParseFormat);\n\nexport interface DateTimeInputProps\n  extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    max?: string;\n    min?: string;\n  };\n}\n\nfunction useDateTime(name, value, form) {\n  const [year, month, day, hours, minutes] = useMemo(() => {\n    if (!value || value.length === 0) {\n      update('');\n      return ['', '', '', '', ''];\n    }\n    const [datePart, timePart] = value.split(' ');\n    const [day, month, year] = datePart.split('/');\n    const [hours, minutes] = timePart ? timePart.split(':') : ['', ''];\n    return [year, month, day, hours, minutes];\n  }, [value]);\n\n  function update(value) {\n    form.setValue(name, value, { shouldValidate: false });\n  }\n\n  function set(year, month, day, hours, minutes) {\n    const datePart = `${day || ''}/${month || ''}/${year || ''}`;\n    const timePart = hours || minutes ? `${hours || ''}:${minutes || ''}` : '';\n    const value = timePart ? `${datePart} ${timePart}` : datePart;\n\n    if (!year && !month && !day && !hours && !minutes) {\n      update('');\n    } else {\n      update(value);\n    }\n  }\n\n  function setYear(evt) {\n    const val = evt.target.value;\n    set(val, month, day, hours, minutes);\n  }\n\n  function setMonth(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, val, day, hours, minutes);\n  }\n\n  function setDay(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, month, val, hours, minutes);\n  }\n\n  function setHours(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, month, day, val, minutes);\n  }\n\n  function setMinutes(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, month, day, hours, val);\n  }\n\n  function trigger() {\n    if (form.formState.isSubmitted) {\n      form.trigger(name);\n    }\n  }\n\n  return {\n    day,\n    month,\n    year,\n    hours,\n    minutes,\n    setYear,\n    setMonth,\n    setDay,\n    setHours,\n    setMinutes,\n    trigger,\n  };\n}\n\nconst VALID_FORMATS = ['DD/MM/YYYY HH:mm', 'DD/MM/YYYY'];\n\nconst makeDateTime = (val) => {\n  const date = dayjs(val, VALID_FORMATS, true);\n  if (date.isValid()) {\n    return date.format('DD/MM/YYYY HH:mm');\n  }\n  return '';\n};\n\nconst DateTimePart = ({ label, ...props }) => {\n  return <DateInputItem {...props}>{label}</DateInputItem>;\n};\n\nexport const DateTimeInput = ({ name, ...props }) => {\n  const { t } = useTranslation();\n  const [initial] = useState(props.value);\n  const value = useMemo(() => {\n    if (initial === props.value) {\n      return makeDateTime(props.value);\n    }\n    return props.value;\n  }, [props.value, initial]);\n\n  const form = useFormContext();\n  const datetime = useDateTime(\n    name,\n    value || makeDateTime(props.defaultValue),\n    form\n  );\n\n  return (\n    <DateInputContainer>\n      <DateTimePart\n        label={t('form.label.day')}\n        onChange={datetime.setDay}\n        onBlur={datetime.trigger}\n        value={datetime.day}\n        width={2}\n        name={`${name}-day`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!datetime.day ? props.error : false}\n        id={`${name}-day`}\n      />\n      <DateTimePart\n        label={t('form.label.month')}\n        onChange={datetime.setMonth}\n        onBlur={datetime.trigger}\n        value={datetime.month}\n        width={2}\n        name={`${name}-month`}\n        id={`${name}-month`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!datetime.month ? props.error : false}\n      />\n      <DateTimePart\n        label={t('form.label.year')}\n        onChange={datetime.setYear}\n        onBlur={datetime.trigger}\n        value={datetime.year}\n        width={4}\n        name={`${name}-year`}\n        id={`${name}-year`}\n        maxLength=\"4\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!datetime.year ? props.error : false}\n      />\n      <DateTimePart\n        label={t('form.label.hours')}\n        onChange={datetime.setHours}\n        onBlur={datetime.trigger}\n        value={datetime.hours}\n        width={2}\n        name={`${name}-hours`}\n        id={`${name}-hours`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!datetime.hours ? props.error : false}\n      />\n      <DateTimePart\n        label={t('form.label.minutes')}\n        onChange={datetime.setMinutes}\n        onBlur={datetime.trigger}\n        value={datetime.minutes}\n        width={2}\n        name={`${name}-minutes`}\n        id={`${name}-minutes`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!datetime.minutes ? props.error : false}\n      />\n    </DateInputContainer>\n  );\n};\n\nexport default DateTimeInput;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useMemo, useEffect } from 'react';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport type { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { useFormContext } from '@digigov/form/FormContext';\nimport {\n  DateInputContainer,\n  DateInputItem,\n} from '@digigov/ui/form/DateInputContainer';\nimport { useTranslation } from '@digigov/ui/i18n';\ndayjs.extend(customParseFormat);\n\nexport interface DateTimeInputProps\n  extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    max?: string;\n    min?: string;\n  };\n}\n\nfunction useDateTime(name, value, form) {\n  const [year, month, day, hours, minutes] = useMemo(() => {\n    if (!value || value.length === 0) {\n      return ['', '', '', '', ''];\n    }\n    const [datePart, timePart] = value.split(' ');\n    const [day, month, year] = datePart.split('/');\n    const [hours, minutes] = timePart ? timePart.split(':') : ['', ''];\n    return [year, month, day, hours, minutes];\n  }, [value]);\n\n  function update(value) {\n    form.setValue(name, value, { shouldValidate: false });\n  }\n\n  function set(year, month, day, hours, minutes) {\n    const datePart = `${day || ''}/${month || ''}/${year || ''}`;\n    const timePart = hours || minutes ? `${hours || ''}:${minutes || ''}` : '';\n    const value = timePart ? `${datePart} ${timePart}` : datePart;\n\n    if (!year && !month && !day && !hours && !minutes) {\n      update('');\n    } else {\n      update(value);\n    }\n  }\n\n  function setYear(evt) {\n    const val = evt.target.value;\n    set(val, month, day, hours, minutes);\n  }\n\n  function setMonth(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, val, day, hours, minutes);\n  }\n\n  function setDay(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, month, val, hours, minutes);\n  }\n\n  function setHours(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, month, day, val, minutes);\n  }\n\n  function setMinutes(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, month, day, hours, val);\n  }\n\n  function trigger() {\n    if (form.formState.isSubmitted) {\n      form.trigger(name);\n    }\n  }\n\n  return {\n    day,\n    month,\n    year,\n    hours,\n    minutes,\n    setYear,\n    setMonth,\n    setDay,\n    setHours,\n    setMinutes,\n    trigger,\n  };\n}\n\nconst VALID_FORMATS = ['DD/MM/YYYY HH:mm', 'DD/MM/YYYY'];\n\nconst makeDateTime = (val) => {\n  const date = dayjs(val, VALID_FORMATS, true);\n  if (date.isValid()) {\n    return date.format('DD/MM/YYYY HH:mm');\n  }\n  return '';\n};\n\nconst DateTimePart = React.forwardRef<HTMLInputElement, Record<string, any>>(\n  ({ label, ...props }, ref) => {\n    return (\n      <DateInputItem {...props} ref={ref}>\n        {label}\n      </DateInputItem>\n    );\n  }\n);\nDateTimePart.displayName = 'DateTimePart';\n\nexport const DateTimeInput = React.forwardRef<\n  HTMLInputElement,\n  Record<string, any>\n>(({ name, ...props }, ref) => {\n  const { t } = useTranslation();\n  const form = useFormContext();\n\n  useEffect(() => {\n    const initialValue = form.getValues(name);\n    // checks if the initial value is undefined and if the default value is valid  date\n    if (initialValue === undefined && props.defaultValue) {\n      form.setValue(name, makeDateTime(props.defaultValue), {\n        shouldValidate: false,\n      });\n    } else {\n      // checks if the initial value is a valid date\n      form.setValue(name, makeDateTime(initialValue), {\n        shouldValidate: false,\n      });\n    }\n  }, []);\n\n  const value = form.getValues(name);\n  const dateTime = useDateTime(name, value, form);\n\n  return (\n    <DateInputContainer>\n      <DateTimePart\n        ref={ref}\n        label={t('form.label.day')}\n        onChange={dateTime.setDay}\n        onBlur={(e) => {\n          if (dateTime.day && dateTime.day.length === 1) {\n            dateTime.setDay(e, true);\n          }\n          dateTime.trigger();\n        }}\n        value={dateTime.day}\n        width={2}\n        name={`${name}-day`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!dateTime.day ? props.error : false}\n        id={`${name}-day`}\n      />\n      <DateTimePart\n        label={t('form.label.month')}\n        onChange={dateTime.setMonth}\n        onBlur={(e) => {\n          if (dateTime.month && dateTime.month.length === 1) {\n            dateTime.setMonth(e, true);\n          }\n          dateTime.trigger();\n        }}\n        value={dateTime.month}\n        width={2}\n        name={`${name}-month`}\n        id={`${name}-month`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!dateTime.month ? props.error : false}\n      />\n      <DateTimePart\n        label={t('form.label.year')}\n        onChange={dateTime.setYear}\n        onBlur={dateTime.trigger}\n        value={dateTime.year}\n        width={4}\n        name={`${name}-year`}\n        id={`${name}-year`}\n        maxLength=\"4\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!dateTime.year ? props.error : false}\n      />\n      <DateTimePart\n        label={t('form.label.hours')}\n        onChange={dateTime.setHours}\n        onBlur={(e) => {\n          if (dateTime.hours && dateTime.hours.length === 1) {\n            dateTime.setHours(e, true);\n          }\n          dateTime.trigger();\n        }}\n        value={dateTime.hours}\n        width={2}\n        name={`${name}-hours`}\n        id={`${name}-hours`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!dateTime.hours ? props.error : false}\n      />\n      <DateTimePart\n        label={t('form.label.minutes')}\n        onChange={dateTime.setMinutes}\n        onBlur={(e) => {\n          if (dateTime.minutes && dateTime.minutes.length === 1) {\n            dateTime.setMinutes(e, true);\n          }\n          dateTime.trigger();\n        }}\n        value={dateTime.minutes}\n        width={2}\n        name={`${name}-minutes`}\n        id={`${name}-minutes`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!dateTime.minutes ? props.error : false}\n      />\n    </DateInputContainer>\n  );\n});\n\nDateTimeInput.displayName = 'DateTimeInput';\n\nexport default DateTimeInput;\n"],
+  "mappings": "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",
   "names": ["day", "month", "year", "hours", "minutes", "value"]
 }

package/inputs/FileInput/index.d.ts

@@ -1,7 +1,8 @@
 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';
+import type { UseFormReturn } from 'react-hook-form';
+import type { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import type { ButtonProps } from '@digigov/ui/form/Button';
+import type { FileUploadContainerProps, FileUploadProps } from '@digigov/ui/form/FileUpload';
 export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
     extra?: {
         className?: string;
@@ -21,6 +22,9 @@ export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
             resetFile?: string;
         };
     };
+    reset: (values?: FileList) => void;
+    resetField: UseFormReturn['resetField'];
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const FileInput: React.FC<any>;
+export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
 export default FileInput;

package/inputs/FileInput/index.js

@@ -1,61 +1,76 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useWatch } from "react-hook-form";
 import { Button } from "@digigov/ui/form/Button";
-import {
-  FileUpload,
-  FileUploadContainer
-} from "@digigov/ui/form/FileUpload";
+import { FileUpload, FileUploadContainer } from "@digigov/ui/form/FileUpload";
 import { useTranslation } from "@digigov/ui/i18n";
 import { Hint } from "@digigov/ui/typography/Hint";
 import { Paragraph } from "@digigov/ui/typography/Paragraph";
-const FileInput = React.forwardRef(function FileInput2({ name, disabled, resetField, extra, control, onChange, ...props }, ref) {
-  delete props.Field;
-  delete props.reset;
+const FileInput = React.forwardRef(function FileInput2({
+  name,
+  disabled,
+  resetField,
+  extra,
+  control,
+  onChange,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Field,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  reset,
+  ...props
+}, ref) {
   const { t } = useTranslation();
   const value = useWatch({ control, name });
-  const [files, setFiles] = useState(
-    Object.values(value || {})?.map?.(({ name: name2 }) => name2) || []
+  const [filenames, setFilenames] = useState(
+    Object.values(value || {}).map(({ name: name2 }) => name2) || []
   );
   useEffect(() => {
-    setFiles(Object.values(value || {})?.map?.(({ name: name2 }) => name2));
+    setFilenames(Object.values(value || {}).map(({ name: name2 }) => name2));
   }, [value]);
+  const handleChange = useCallback(
+    (event) => {
+      event.preventDefault();
+      const target = event.target;
+      if (target.files && target.files.length > 0) {
+        setFilenames(Object.values(target.files).map(({ name: name2 }) => name2));
+      }
+      onChange(event);
+    },
+    [onChange]
+  );
+  const handleReset = useCallback(
+    (event) => {
+      event.preventDefault();
+      resetField(name);
+      setFilenames(void 0);
+    },
+    [name, resetField]
+  );
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     FileUploadContainer,
     {
       variant: extra?.containerProps?.variant || "default",
-      hasFiles: files && files.length > 0
+      hasFiles: filenames && filenames.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(Hint, null, /* @__PURE__ */ React.createElement("b", null, t("upload.file"), ": "), t("upload.no_file")),
+    filenames?.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Paragraph, null, /* @__PURE__ */ React.createElement("b", null, t("upload.file"), ":"), " ", `${filenames.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,
+        hasFiles: !!filenames?.length,
         name,
         variant: extra?.uploadButtonProps?.variant,
         disabled,
         id: name,
-        onChange: (event) => {
-          event.preventDefault();
-          const target = event?.target;
-          if (target?.files && target?.files.length > 0) {
-            setFiles(Object.values(target?.files)?.map?.(({ name: name2 }) => name2));
-          }
-          onChange(event);
-        },
+        onChange: handleChange,
         ...{ ...props, required: void 0 }
       },
-      files?.length ? t("upload.change_file") : t("upload.choose_file")
+      filenames?.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(
+    filenames !== void 0 && filenames?.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);
-        },
+        onClick: handleReset,
         color: extra?.resetButtonProps?.color || "secondary"
       },
       t("upload.reset_file")

package/inputs/FileInput/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/FileInput/index.tsx"],
-  "sourcesContent": ["import React, { useEffect, useState } from 'react';\nimport { useWatch } from 'react-hook-form';\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';\n\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, control, onChange, ...props },\n  ref: any\n) {\n  delete props.Field;\n  delete props.reset;\n  const { t } = useTranslation();\n  const value: any = useWatch({ control, name });\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          onChange={(event) => {\n            event.preventDefault();\n            const target = event?.target as HTMLInputElement;\n            if (target?.files && target?.files.length > 0) {\n              setFiles(Object.values(target?.files)?.map?.(({ name }) => name));\n            }\n            onChange(event);\n          }}\n          {...{ ...props, required: undefined }}\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;AAC3C,SAAS,gBAAgB;AAEzB,SAAS,cAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAuBnB,MAAM,YAA2B,MAAM,WAAW,SAASA,WAChE,EAAE,MAAM,UAAU,YAAY,OAAO,SAAS,UAAU,GAAG,MAAM,GACjE,KACA;AACA,SAAO,MAAM;AACb,SAAO,MAAM;AACb,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,QAAa,SAAS,EAAE,SAAS,KAAK,CAAC;AAE7C,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,UAAU,CAAC,UAAU;AACnB,gBAAM,eAAe;AACrB,gBAAM,SAAS,OAAO;AACtB,cAAI,QAAQ,SAAS,QAAQ,MAAM,SAAS,GAAG;AAC7C,qBAAS,OAAO,OAAO,QAAQ,KAAK,GAAG,MAAM,CAAC,EAAE,MAAAA,MAAK,MAAMA,KAAI,CAAC;AAAA,UAClE;AACA,mBAAS,KAAK;AAAA,QAChB;AAAA,QACC,GAAG,EAAE,GAAG,OAAO,UAAU,OAAU;AAAA;AAAA,MAEnC,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;",
+  "sourcesContent": ["import type { ComponentRef } from 'react';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport type { UseFormReturn } from 'react-hook-form';\nimport { useWatch } from 'react-hook-form';\nimport type { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport type { ButtonProps } from '@digigov/ui/form/Button';\nimport { Button } from '@digigov/ui/form/Button';\nimport type {\n  FileUploadContainerProps,\n  FileUploadProps,\n} from '@digigov/ui/form/FileUpload';\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';\n\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  reset: (values?: FileList) => void;\n  resetField: UseFormReturn['resetField'];\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const FileInput = React.forwardRef<\n  ComponentRef<typeof FileUpload>,\n  FileInputProps\n>(function FileInput(\n  {\n    name,\n    disabled,\n    resetField,\n    extra,\n    control,\n    onChange,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    Field,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    reset,\n    ...props\n  },\n  ref\n) {\n  const { t } = useTranslation();\n  const value: FileList = useWatch({ control, name });\n\n  const [filenames, setFilenames] = useState<string[] | undefined>(\n    Object.values(value || {}).map(({ name }) => name) || []\n  );\n\n  useEffect(() => {\n    setFilenames(Object.values(value || {}).map(({ name }) => name));\n  }, [value]);\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      event.preventDefault();\n      const target = event.target;\n      if (target.files && target.files.length > 0) {\n        setFilenames(Object.values(target.files).map(({ name }) => name));\n      }\n      onChange(event);\n    },\n    [onChange]\n  );\n\n  const handleReset = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      resetField(name);\n      setFilenames(undefined);\n    },\n    [name, resetField]\n  );\n\n  return (\n    <>\n      <FileUploadContainer\n        variant={extra?.containerProps?.variant || 'default'}\n        hasFiles={filenames && filenames.length > 0}\n      >\n        {filenames?.length ? (\n          <>\n            <Paragraph>\n              <b>{t('upload.file')}:</b> {`${filenames.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={!!filenames?.length}\n          name={name}\n          variant={extra?.uploadButtonProps?.variant}\n          disabled={disabled}\n          id={name}\n          onChange={handleChange}\n          {...{ ...props, required: undefined }}\n        >\n          {filenames?.length\n            ? t('upload.change_file')\n            : t('upload.choose_file')}\n        </FileUpload>\n        {filenames !== undefined &&\n          filenames?.length > 0 &&\n          !extra?.noResetButton && (\n            <>\n              <Button\n                variant={extra?.resetButtonProps?.variant || 'link'}\n                onClick={handleReset}\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": "AACA,OAAO,SAAS,aAAa,WAAW,gBAAgB;AAExD,SAAS,gBAAgB;AAGzB,SAAS,cAAc;AAKvB,SAAS,YAAY,2BAA2B;AAChD,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,iBAAiB;AA0BnB,MAAM,YAAY,MAAM,WAG7B,SAASA,WACT;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,QAAkB,SAAS,EAAE,SAAS,KAAK,CAAC;AAElD,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAChC,OAAO,OAAO,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAAC,MAAK,MAAMA,KAAI,KAAK,CAAC;AAAA,EACzD;AAEA,YAAU,MAAM;AACd,iBAAa,OAAO,OAAO,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAAA,MAAK,MAAMA,KAAI,CAAC;AAAA,EACjE,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,eAAe;AAAA,IACnB,CAAC,UAA+C;AAC9C,YAAM,eAAe;AACrB,YAAM,SAAS,MAAM;AACrB,UAAI,OAAO,SAAS,OAAO,MAAM,SAAS,GAAG;AAC3C,qBAAa,OAAO,OAAO,OAAO,KAAK,EAAE,IAAI,CAAC,EAAE,MAAAA,MAAK,MAAMA,KAAI,CAAC;AAAA,MAClE;AACA,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,UAA+C;AAC9C,YAAM,eAAe;AACrB,iBAAW,IAAI;AACf,mBAAa,MAAS;AAAA,IACxB;AAAA,IACA,CAAC,MAAM,UAAU;AAAA,EACnB;AAEA,SACE,0DACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,OAAO,gBAAgB,WAAW;AAAA,MAC3C,UAAU,aAAa,UAAU,SAAS;AAAA;AAAA,IAEzC,WAAW,SACV,0DACE,oCAAC,iBACC,oCAAC,WAAG,EAAE,aAAa,GAAE,GAAC,GAAI,KAAE,GAAG,UAAU,KAAK,IAAI,CAAC,EACrD,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,WAAW;AAAA,QACvB;AAAA,QACA,SAAS,OAAO,mBAAmB;AAAA,QACnC;AAAA,QACA,IAAI;AAAA,QACJ,UAAU;AAAA,QACT,GAAG,EAAE,GAAG,OAAO,UAAU,OAAU;AAAA;AAAA,MAEnC,WAAW,SACR,EAAE,oBAAoB,IACtB,EAAE,oBAAoB;AAAA,IAC5B;AAAA,IACC,cAAc,UACb,WAAW,SAAS,KACpB,CAAC,OAAO,iBACN,0DACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,OAAO,kBAAkB,WAAW;AAAA,QAC7C,SAAS;AAAA,QACT,OAAO,OAAO,kBAAkB,SAAS;AAAA;AAAA,MAExC,EAAE,mBAAmB;AAAA,IACxB,CACF;AAAA,EAEN,CACF;AAEJ,CAAC;AAED,IAAO,oBAAQ;",
   "names": ["FileInput", "name"]
 }

package/inputs/ImageInput/index.d.ts

@@ -1,6 +1,6 @@
 import React 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';
 export interface ImageProps {
     src: string;
 }

package/inputs/ImageInput/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/ImageInput/index.tsx"],
-  "sourcesContent": ["import React, { useRef, useState, useEffect, useCallback } from 'react';\nimport { UseFormReturn } from 'react-hook-form';\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: string;\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});\n\ninterface ImageInputDefaultValue {\n  filename: string;\n  src: string;\n}\n\nconst blobToFileList = (blob: Blob, fileName: string): FileList => {\n  const file = new File([blob], fileName, { type: 'image/jpeg' });\n  const dataTransfer = new DataTransfer();\n  dataTransfer.items.add(file);\n  return dataTransfer.files;\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  resetField: UseFormReturn['resetField'];\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  defaultValue?: ImageInputDefaultValue | null;\n  value: any;\n}\n\nexport const ImageInput: React.FC<ImageInputProps> = React.forwardRef(\n  function ImageInput(\n    { name, disabled, onChange, resetField, defaultValue, value, ...props },\n    ref: any\n  ) {\n    const imageRef = useRef(ref?.current);\n    const { t } = useTranslation();\n    const currentValue: ImageInputDefaultValue | null =\n      defaultValue || value || null;\n    const [selectedImage, setSelectedImage] = useState<\n      File | ImageInputDefaultValue | null\n    >(currentValue);\n    const [imageUrl, setImageUrl] = useState<string | null>(\n      currentValue?.src || null\n    );\n\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        if (selectedFile) {\n          setSelectedImage(selectedFile);\n          setImageUrl(URL.createObjectURL(selectedFile));\n        }\n        onChange(\n          target.files as unknown as React.ChangeEvent<HTMLInputElement>\n        );\n      },\n      [selectedImage]\n    );\n\n    const handleDeleteImage = useCallback(\n      (event) => {\n        event.preventDefault();\n        resetField(name);\n        setSelectedImage(null);\n        setImageUrl(null);\n      },\n      [selectedImage]\n    );\n\n    useEffect(() => {\n      // This is to fill the input with the default value (image)\n      if (defaultValue?.src && imageRef.current) {\n        fetch(defaultValue?.src)\n          .then((response) => response.blob())\n          .then((blob) => {\n            const fileList = blobToFileList(blob, defaultValue.filename);\n            imageRef.current.files = fileList;\n            const fileChangeEvent = new Event('change', { bubbles: true });\n            imageRef.current.dispatchEvent(fileChangeEvent);\n            return;\n          })\n          .catch((error) => console.error('Error fetching image:', error));\n      }\n    }, [defaultValue, imageRef]);\n\n    return (\n      <FileUploadContainer>\n        {selectedImage !== null ? (\n          <>\n            <Paragraph>\n              <Base as=\"b\">{t('upload.image')}:</Base>{' '}\n              <em>\n                {`${(selectedImage as File)?.name || (selectedImage as ImageInputDefaultValue)?.filename}`}\n              </em>\n            </Paragraph>\n          </>\n        ) : (\n          <Hint className=\"ds-dashed--border\">{t('upload.no_image')}</Hint>\n        )}\n        {imageUrl !== null && selectedImage !== null && (\n          <Image src={imageUrl} />\n        )}\n        {!disabled && (\n          <ButtonGroup marginTop={2}>\n            <FileUpload\n              ref={imageRef}\n              hasFiles={selectedImage !== null}\n              name={name}\n              id={name}\n              disabled={disabled}\n              accept=\"image/*\"\n              onChange={handleImageChange}\n              {...{\n                ...(props as any),\n                required: undefined,\n                Field: undefined,\n                type: 'file',\n              }}\n            >\n              {selectedImage\n                ? t('upload.change_image')\n                : t('upload.choose_image')}\n            </FileUpload>\n            {selectedImage !== null && (\n              <Button\n                color=\"warning\"\n                variant=\"link\"\n                onClick={handleDeleteImage}\n              >\n                {t('upload.reset_file')}\n              </Button>\n            )}\n          </ButtonGroup>\n        )}\n      </FileUploadContainer>\n    );\n  }\n);\n\nexport default ImageInput;\n"],
+  "sourcesContent": ["import React, { useRef, useState, useEffect, useCallback } from 'react';\nimport type { UseFormReturn } from 'react-hook-form';\nimport type { 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: string;\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});\n\ninterface ImageInputDefaultValue {\n  filename: string;\n  src: string;\n}\n\nconst blobToFileList = (blob: Blob, fileName: string): FileList => {\n  const file = new File([blob], fileName, { type: 'image/jpeg' });\n  const dataTransfer = new DataTransfer();\n  dataTransfer.items.add(file);\n  return dataTransfer.files;\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  resetField: UseFormReturn['resetField'];\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  defaultValue?: ImageInputDefaultValue | null;\n  value: any;\n}\n\nexport const ImageInput: React.FC<ImageInputProps> = React.forwardRef(\n  function ImageInput(\n    { name, disabled, onChange, resetField, defaultValue, value, ...props },\n    ref: any\n  ) {\n    const imageRef = useRef(ref?.current);\n    const { t } = useTranslation();\n    const currentValue: ImageInputDefaultValue | null =\n      defaultValue || value || null;\n    const [selectedImage, setSelectedImage] = useState<\n      File | ImageInputDefaultValue | null\n    >(currentValue);\n    const [imageUrl, setImageUrl] = useState<string | null>(\n      currentValue?.src || null\n    );\n\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        if (selectedFile) {\n          setSelectedImage(selectedFile);\n          setImageUrl(URL.createObjectURL(selectedFile));\n        }\n        onChange(\n          target.files as unknown as React.ChangeEvent<HTMLInputElement>\n        );\n      },\n      [selectedImage]\n    );\n\n    const handleDeleteImage = useCallback(\n      (event) => {\n        event.preventDefault();\n        resetField(name);\n        setSelectedImage(null);\n        setImageUrl(null);\n      },\n      [selectedImage]\n    );\n\n    useEffect(() => {\n      // This is to fill the input with the default value (image)\n      if (defaultValue?.src && imageRef.current) {\n        fetch(defaultValue?.src)\n          .then((response) => response.blob())\n          .then((blob) => {\n            const fileList = blobToFileList(blob, defaultValue.filename);\n            imageRef.current.files = fileList;\n            const fileChangeEvent = new Event('change', { bubbles: true });\n            imageRef.current.dispatchEvent(fileChangeEvent);\n            return;\n          })\n          .catch((error) => console.error('Error fetching image:', error));\n      }\n    }, [defaultValue, imageRef]);\n\n    return (\n      <FileUploadContainer>\n        {selectedImage !== null ? (\n          <>\n            <Paragraph>\n              <Base as=\"b\">{t('upload.image')}:</Base>{' '}\n              <em>\n                {`${(selectedImage as File)?.name || (selectedImage as ImageInputDefaultValue)?.filename}`}\n              </em>\n            </Paragraph>\n          </>\n        ) : (\n          <Hint className=\"ds-dashed--border\">{t('upload.no_image')}</Hint>\n        )}\n        {imageUrl !== null && selectedImage !== null && (\n          <Image src={imageUrl} />\n        )}\n        {!disabled && (\n          <ButtonGroup marginTop={2}>\n            <FileUpload\n              ref={imageRef}\n              hasFiles={selectedImage !== null}\n              name={name}\n              id={name}\n              disabled={disabled}\n              accept=\"image/*\"\n              onChange={handleImageChange}\n              {...{\n                ...(props as any),\n                required: undefined,\n                Field: undefined,\n                type: 'file',\n              }}\n            >\n              {selectedImage\n                ? t('upload.change_image')\n                : t('upload.choose_image')}\n            </FileUpload>\n            {selectedImage !== null && (\n              <Button\n                color=\"warning\"\n                variant=\"link\"\n                onClick={handleDeleteImage}\n              >\n                {t('upload.reset_file')}\n              </Button>\n            )}\n          </ButtonGroup>\n        )}\n      </FileUploadContainer>\n    );\n  }\n);\n\nexport default ImageInput;\n"],
   "mappings": "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",
   "names": ["Image", "ImageInput"]
 }

package/inputs/Input/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import type { UncontrolledFieldProps } from '@digigov/form/Field/types';
 export interface InputProps extends Omit<UncontrolledFieldProps, 'extra' | 'Field'> {
     extra?: {
         fullWidth?: boolean;
@@ -13,5 +13,5 @@ export interface InputProps extends Omit<UncontrolledFieldProps, 'extra' | 'Fiel
     };
     Field?: UncontrolledFieldProps['Field'];
 }
-export declare const Input: React.ExoticComponent<InputProps>;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 export default Input;

package/inputs/Input/index.js

@@ -11,65 +11,63 @@ const TYPES_MAP = {
   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";
-    rows = rows || (multiline ? 4 : 1);
-    const fieldType = TYPES_MAP[type || "text"] || "text";
-    const { t } = useTranslation();
-    const currentValue = useWatch({ control, name });
-    const getRemainingChars = (currentValue2, limit2) => {
-      if (currentValue2) {
-        return limit2?.max - currentValue2.length;
-      }
-      return limit2?.max;
-    };
-    const constructRemainingText = (currentValue2, limit2) => {
-      const remainingChars = getRemainingChars(currentValue2, limit2);
-      let remainingText = Math.abs(remainingChars) === 1 ? t("form.info.text.character") : t("form.info.text.characters");
-      remainingText += remainingChars > 0 ? ` ${t("form.info.text.remaining")}.` : ` ${t("form.info.text.too_many")}.`;
-      return remainingText;
-    };
-    if (multiline === true) {
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        TextArea,
-        {
-          name,
-          className,
-          rows,
-          ref,
-          id: name,
-          ...{
-            ...props,
-            reset: void 0,
-            required: void 0,
-            type: fieldType
-          }
+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";
+  rows = rows || (multiline ? 4 : 1);
+  const fieldType = TYPES_MAP[type || "text"] || "text";
+  const { t } = useTranslation();
+  const currentValue = useWatch({ control, name });
+  const getRemainingChars = (currentValue2, limit2) => {
+    if (currentValue2) {
+      return limit2?.max - currentValue2.length;
+    }
+    return limit2?.max;
+  };
+  const constructRemainingText = (currentValue2, limit2) => {
+    const remainingChars = getRemainingChars(currentValue2, limit2);
+    let remainingText = Math.abs(remainingChars) === 1 ? t("form.info.text.character") : t("form.info.text.characters");
+    remainingText += remainingChars > 0 ? ` ${t("form.info.text.remaining")}.` : ` ${t("form.info.text.too_many")}.`;
+    return remainingText;
+  };
+  if (multiline === true) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      TextArea,
+      {
+        name,
+        className,
+        rows,
+        ref,
+        id: name,
+        ...{
+          ...props,
+          reset: void 0,
+          required: void 0,
+          type: fieldType
         }
-      ), limit?.max && /* @__PURE__ */ React.createElement(Hint, { display: "flex" }, t("form.info.text.you_have"), /* @__PURE__ */ React.createElement(Hint, { fontWeight: "bold" }, "\xA0", `${Math.abs(getRemainingChars(currentValue, limit))}`, "\xA0"), constructRemainingText(currentValue, limit)));
-    } else {
-      return /* @__PURE__ */ React.createElement(
-        TextInput,
-        {
-          name,
-          id: name,
-          type: fieldType,
-          "data-type": type,
-          className,
-          ref,
-          ...{
-            ...props,
-            reset: void 0,
-            required: void 0
-          }
+      }
+    ), limit?.max && /* @__PURE__ */ React.createElement(Hint, { display: "flex" }, t("form.info.text.you_have"), /* @__PURE__ */ React.createElement(Hint, { fontWeight: "bold" }, "\xA0", `${Math.abs(getRemainingChars(currentValue, limit))}`, "\xA0"), constructRemainingText(currentValue, limit)));
+  } else {
+    return /* @__PURE__ */ React.createElement(
+      TextInput,
+      {
+        name,
+        id: name,
+        type: fieldType,
+        "data-type": type,
+        className,
+        ref,
+        ...{
+          ...props,
+          reset: void 0,
+          required: void 0
         }
-      );
-    }
+      }
+    );
   }
-);
+});
 var Input_default = Input;
 export {
   Input,

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 { 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;",
+  "sourcesContent": ["import React from 'react';\nimport { useWatch } from 'react-hook-form';\nimport type { 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.forwardRef<\n  HTMLInputElement | HTMLTextAreaElement,\n  InputProps\n>(function WrappedInput({ name, control, type, extra, ...props }, ref) {\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 as React.RefObject<HTMLTextAreaElement>}\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 as React.RefObject<HTMLInputElement>}\n        {...{\n          ...props,\n          reset: undefined,\n          required: undefined,\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,QAAQ,MAAM,WAGzB,SAAS,aAAa,EAAE,MAAM,SAAS,MAAM,OAAO,GAAG,MAAM,GAAG,KAAK;AACrE,SAAO,MAAM,OAAO;AAEpB,MAAI,EAAE,YAAY,OAAO,MAAM,MAAM,IAAI,SAAS,CAAC;AACnD,QAAM,EAAE,UAAU,IAAI,SAAS,CAAC;AAEhC,cAAY,cAAc,QAAQ,SAAS;AAE3C,SAAO,SAAS,YAAY,IAAI;AAEhC,QAAM,YAAY,UAAU,QAAQ,MAAM,KAAK;AAC/C,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,eAA4B,SAAS,EAAE,SAAS,KAAK,CAAC;AAE5D,QAAM,oBAAoB,CAACA,eAAcC,WAAU;AACjD,QAAID,eAAc;AAChB,aAAOC,QAAO,MAAMD,cAAa;AAAA,IACnC;AACA,WAAOC,QAAO;AAAA,EAChB;AAEA,QAAM,yBAAyB,CAACD,eAAcC,WAAU;AACtD,UAAM,iBAAiB,kBAAkBD,eAAcC,MAAK;AAC5D,QAAI,gBACF,KAAK,IAAI,cAAc,MAAM,IACzB,EAAE,0BAA0B,IAC5B,EAAE,2BAA2B;AACnC,qBACE,iBAAiB,IACb,IAAI,EAAE,0BAA0B,CAAC,MACjC,IAAI,EAAE,yBAAyB,CAAC;AACtC,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,MAAM;AACtB,WACE,0DACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,IAAI;AAAA,QACH,GAAG;AAAA,UACF,GAAG;AAAA,UACH,OAAO;AAAA,UACP,UAAU;AAAA,UACV,MAAM;AAAA,QACR;AAAA;AAAA,IACF,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,EAEJ,OAAO;AACL,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,aAAW;AAAA,QACX;AAAA,QACA;AAAA,QACC,GAAG;AAAA,UACF,GAAG;AAAA,UACH,OAAO;AAAA,UACP,UAAU;AAAA,QACZ;AAAA;AAAA,IACF;AAAA,EAEJ;AACF,CAAC;AAED,IAAO,gBAAQ;",
   "names": ["currentValue", "limit"]
 }

package/inputs/Label/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FieldLabelProps } from '@digigov/form/types';
+import type { FieldLabelProps } from '@digigov/form/types';
 export interface FieldOptionProps {
     label?: FieldLabelProps;
     value: string;

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 { 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"],
+  "sourcesContent": ["import React from 'react';\nimport type { 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.d.ts

@@ -8,9 +8,5 @@ export declare function useOtp(onChange: any, maxLength: any): {
     handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
     handlePaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
 };
-export declare const OtpInput: ({ name, maxLength, ...props }: {
-    [x: string]: any;
-    name: any;
-    maxLength?: number | undefined;
-}) => React.JSX.Element;
+export declare const OtpInput: React.ForwardRefExoticComponent<Omit<Record<string, any>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default OtpInput;

package/inputs/OtpInput/index.js

@@ -105,37 +105,42 @@ function useOtp(onChange, maxLength) {
     handlePaste
   };
 }
-const SingleCharacterInputPart = ({ ...props }) => {
-  return /* @__PURE__ */ React.createElement(SingleCharacterInput, { ...props });
-};
-const OtpInput = ({ name, maxLength = 6, ...props }) => {
-  const otp = useOtp(props.onChange, maxLength);
-  return /* @__PURE__ */ React.createElement(SingleCharacterInputs, null, otp.otpValues.map((digit, idx) => /* @__PURE__ */ React.createElement(
-    SingleCharacterInputPart,
-    {
-      name: `${name}-${idx}`,
-      id: `${name}-${idx}`,
-      type: "text",
-      key: idx,
-      autoComplete: "one-time-code",
-      pattern: "\\d{1}",
-      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
-    }
-  )));
-};
+const SingleCharacterInputPart = React.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ React.createElement(SingleCharacterInput, { ...props, ref });
+});
+SingleCharacterInputPart.displayName = "SingleCharacterInputPart";
+const OtpInput = React.forwardRef(
+  ({ name, maxLength = 6, ...props }, ref) => {
+    const otp = useOtp(props.onChange, maxLength);
+    return /* @__PURE__ */ React.createElement(SingleCharacterInputs, null, otp.otpValues.map((digit, idx) => /* @__PURE__ */ React.createElement(
+      SingleCharacterInputPart,
+      {
+        ref: idx === 0 ? ref : null,
+        name: `${name}-${idx}`,
+        id: `${name}-${idx}`,
+        type: "text",
+        key: idx,
+        autoComplete: "one-time-code",
+        pattern: "\\d{1}",
+        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
+      }
+    )));
+  }
+);
+OtpInput.displayName = "OtpInput";
 var OtpInput_default = OtpInput;
 export {
   OtpInput,