@digigov/form 2.0.0-2445d5cb → 2.0.0-298cfc51

package/inputs/ImageInput/__stories__/MaxSize.d.ts

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

package/inputs/ImageInput/__stories__/MaxSize.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/inputs/ImageInput/__stories__/MaxSize.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field, Fieldset } from '@digigov/form';\nimport { FieldSpec } from '@digigov/form/types';\nimport { Button } from '@digigov/ui/form/Button';\nconst FIELDS: FieldSpec[] = [\n  {\n    key: 'image',\n    type: 'image',\n    required: true,\n    label: {\n      primary: '\u0391\u03BD\u03AD\u03B2\u03B1\u03C3\u03BC\u03B1 \u03C6\u03C9\u03C4\u03BF\u03B3\u03C1\u03B1\u03C6\u03AF\u03B1\u03C2',\n      secondary: '\u039C\u03AD\u03B3\u03B9\u03C3\u03C4\u03BF \u03BC\u03AD\u03B3\u03B5\u03B8\u03BF\u03C2 \u03C6\u03C9\u03C4\u03BF\u03B3\u03C1\u03B1\u03C6\u03AF\u03B1\u03C2: 10KB.',\n    },\n    extra: {\n      limit: {\n        maxSize: 1000,\n      },\n    }\n  },\n];\n\nexport const MaxSize = () => (\n  <FormBuilder\n    fields={FIELDS}\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n  >\n    <Fieldset>\n      {FIELDS.map((field) => (\n        <Field key={field.key} name={field.key}  />\n      ))}\n    </Fieldset>\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\nexport default MaxSize;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,OAAO,gBAAgB;AAE7C,SAAS,cAAc;AACvB,MAAM,SAAsB;AAAA,EAC1B;AAAA,IACE,KAAK;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,IACA,OAAO;AAAA,MACL,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,UAAU,MACrB;AAAA,EAAC;AAAA;AAAA,IACC,QAAQ;AAAA,IACR,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA;AAAA,EAEA,oCAAC,gBACE,OAAO,IAAI,CAAC,UACX,oCAAC,SAAM,KAAK,MAAM,KAAK,MAAM,MAAM,KAAM,CAC1C,CACH;AAAA,EACA,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAEF,IAAO,kBAAQ;",
+  "names": []
+}

package/inputs/ImageInput/__stories__/WithInvalidImageDimension/index.js

@@ -7,7 +7,8 @@ const FIELDS = [
     type: "image",
     required: true,
     label: {
-      primary: "\u0391\u03BD\u03AD\u03B2\u03B1\u03C3\u03BC\u03B1 \u03C6\u03C9\u03C4\u03BF\u03B3\u03C1\u03B1\u03C6\u03AF\u03B1\u03C2"
+      primary: "\u0391\u03BD\u03AD\u03B2\u03B1\u03C3\u03BC\u03B1 \u03C6\u03C9\u03C4\u03BF\u03B3\u03C1\u03B1\u03C6\u03AF\u03B1\u03C2",
+      secondary: "\u039F\u03B9 \u03B5\u03C0\u03B9\u03C4\u03C1\u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B5\u03C2 \u03B4\u03B9\u03B1\u03C3\u03C4\u03AC\u03C3\u03B5\u03B9\u03C2 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B3\u03B9\u03B1 \u03C4\u03BF \u03CD\u03C8\u03BF\u03C2 \u03B1\u03C0\u03CC 100 \u03BC\u03AD\u03C7\u03C1\u03B9 400 \u03BA\u03B1\u03B9 \u03B3\u03B9\u03B1 \u03C4\u03BF \u03C0\u03BB\u03AC\u03C4\u03BF\u03C2 \u03B1\u03C0\u03CC 100 \u03BC\u03AD\u03C7\u03C1\u03B9 400."
     },
     extra: {
       limit: {

package/inputs/ImageInput/__stories__/WithInvalidImageDimension.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/inputs/ImageInput/__stories__/WithInvalidImageDimension.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field, Fieldset } from '@digigov/form';\nimport { FieldSpec } from '@digigov/form/types';\nimport { Button } from '@digigov/ui/form/Button';\nconst FIELDS: FieldSpec[] = [\n  {\n    key: 'image',\n    type: 'image',\n    required: true,\n    label: {\n      primary: '\u0391\u03BD\u03AD\u03B2\u03B1\u03C3\u03BC\u03B1 \u03C6\u03C9\u03C4\u03BF\u03B3\u03C1\u03B1\u03C6\u03AF\u03B1\u03C2',\n    },\n    extra: {\n      limit: {\n        maxHeight: 400,\n        maxWidth: 400,\n        minHeight: 100,\n        minWidth: 100,\n      },\n    },\n  },\n];\n\nexport const WithInvalidImageDimension = () => (\n  <FormBuilder\n    fields={FIELDS}\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n  >\n    <Fieldset>\n      {FIELDS.map((field) => (\n        <Field key={field.key} name={field.key} />\n      ))}\n    </Fieldset>\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\nexport default WithInvalidImageDimension;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,OAAO,gBAAgB;AAE7C,SAAS,cAAc;AACvB,MAAM,SAAsB;AAAA,EAC1B;AAAA,IACE,KAAK;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,OAAO;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,4BAA4B,MACvC;AAAA,EAAC;AAAA;AAAA,IACC,QAAQ;AAAA,IACR,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA;AAAA,EAEA,oCAAC,gBACE,OAAO,IAAI,CAAC,UACX,oCAAC,SAAM,KAAK,MAAM,KAAK,MAAM,MAAM,KAAK,CACzC,CACH;AAAA,EACA,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAEF,IAAO,oCAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field, Fieldset } from '@digigov/form';\nimport { FieldSpec } from '@digigov/form/types';\nimport { Button } from '@digigov/ui/form/Button';\nconst FIELDS: FieldSpec[] = [\n  {\n    key: 'image',\n    type: 'image',\n    required: true,\n    label: {\n      primary: '\u0391\u03BD\u03AD\u03B2\u03B1\u03C3\u03BC\u03B1 \u03C6\u03C9\u03C4\u03BF\u03B3\u03C1\u03B1\u03C6\u03AF\u03B1\u03C2',\n      secondary:\n        '\u039F\u03B9 \u03B5\u03C0\u03B9\u03C4\u03C1\u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B5\u03C2 \u03B4\u03B9\u03B1\u03C3\u03C4\u03AC\u03C3\u03B5\u03B9\u03C2 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B3\u03B9\u03B1 \u03C4\u03BF \u03CD\u03C8\u03BF\u03C2 \u03B1\u03C0\u03CC 100 \u03BC\u03AD\u03C7\u03C1\u03B9 400 \u03BA\u03B1\u03B9 \u03B3\u03B9\u03B1 \u03C4\u03BF \u03C0\u03BB\u03AC\u03C4\u03BF\u03C2 \u03B1\u03C0\u03CC 100 \u03BC\u03AD\u03C7\u03C1\u03B9 400.',\n    },\n    extra: {\n      limit: {\n        maxHeight: 400,\n        maxWidth: 400,\n        minHeight: 100,\n        minWidth: 100,\n      },\n    },\n  },\n];\n\nexport const WithInvalidImageDimension = () => (\n  <FormBuilder\n    fields={FIELDS}\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n  >\n    <Fieldset>\n      {FIELDS.map((field) => (\n        <Field key={field.key} name={field.key} />\n      ))}\n    </Fieldset>\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\nexport default WithInvalidImageDimension;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,OAAO,gBAAgB;AAE7C,SAAS,cAAc;AACvB,MAAM,SAAsB;AAAA,EAC1B;AAAA,IACE,KAAK;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,MACL,SAAS;AAAA,MACT,WACE;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,OAAO;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,4BAA4B,MACvC;AAAA,EAAC;AAAA;AAAA,IACC,QAAQ;AAAA,IACR,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA;AAAA,EAEA,oCAAC,gBACE,OAAO,IAAI,CAAC,UACX,oCAAC,SAAM,KAAK,MAAM,KAAK,MAAM,MAAM,KAAK,CACzC,CACH;AAAA,EACA,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAEF,IAAO,oCAAQ;",
   "names": []
 }

package/inputs/ImageInput/index.js

@@ -1,12 +1,12 @@
 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 { 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("img", { src, className: "ds-image--ratio" });
+  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) {
@@ -35,7 +35,7 @@ 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("b", null, 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,

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';\n\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 <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                <b>{t('upload.image')}:</b> {`${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;AAcf,MAAM,QAA8B,MAAM,KAAK,SAASA,OAAM,EAAE,IAAI,GAAG;AAC5E,SAAO,oCAAC,SAAI,KAAU,WAAU,mBAAkB;AACpD,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,WAAG,EAAE,cAAc,GAAE,GAAC,GAAI,KAAE,GAAG,eAAe,IAAI,EACrD,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(\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>{' '}\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                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,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,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,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;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;",
   "names": ["Image", "ImageInput"]
 }

package/inputs/Input/__stories__/LandlineNumber/index.js

@@ -14,6 +14,7 @@ const LandlineNumber = () => /* @__PURE__ */ React.createElement(
       key: "phone-number",
       name: "phone-number",
       type: "phone_number",
+      autoComplete: "tel",
       label: {
         primary: "\u03A3\u03C4\u03B1\u03B8\u03B5\u03C1\u03CC \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"
       },

package/inputs/Input/__stories__/LandlineNumber.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/inputs/Input/__stories__/LandlineNumber.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field } from '@digigov/form';\nimport { Button } from '@digigov/ui/form/Button';\n\nexport const LandlineNumber = () => (\n  <FormBuilder\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n  >\n    <Field\n      key=\"phone-number\"\n      name=\"phone-number\"\n      type=\"phone_number\"\n      label={{\n        primary: '\u03A3\u03C4\u03B1\u03B8\u03B5\u03C1\u03CC \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF',\n      }}\n      extra={{\n        countries: ['gr'],\n        phoneType:'landline',\n      }}\n      required\n    />\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\nexport default LandlineNumber;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,aAAa;AACnC,SAAS,cAAc;AAEhB,MAAM,iBAAiB,MAC5B;AAAA,EAAC;AAAA;AAAA,IACC,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA;AAAA,EAEA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,WAAW,CAAC,IAAI;AAAA,QAChB,WAAU;AAAA,MACZ;AAAA,MACA,UAAQ;AAAA;AAAA,EACV;AAAA,EACA,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAEF,IAAO,yBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field } from '@digigov/form';\nimport { Button } from '@digigov/ui/form/Button';\n\nexport const LandlineNumber = () => (\n  <FormBuilder\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n  >\n    <Field\n      key=\"phone-number\"\n      name=\"phone-number\"\n      type=\"phone_number\"\n      autoComplete='tel'\n      label={{\n        primary: '\u03A3\u03C4\u03B1\u03B8\u03B5\u03C1\u03CC \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF',\n      }}\n      extra={{\n        countries: ['gr'],\n        phoneType: 'landline',\n      }}\n      required\n    />\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\nexport default LandlineNumber;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,aAAa;AACnC,SAAS,cAAc;AAEhB,MAAM,iBAAiB,MAC5B;AAAA,EAAC;AAAA;AAAA,IACC,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA;AAAA,EAEA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,cAAa;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,WAAW,CAAC,IAAI;AAAA,QAChB,WAAW;AAAA,MACb;AAAA,MACA,UAAQ;AAAA;AAAA,EACV;AAAA,EACA,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAEF,IAAO,yBAAQ;",
   "names": []
 }

package/inputs/Input/__stories__/MobilePhone/index.js

@@ -14,6 +14,7 @@ const MobilePhone = () => /* @__PURE__ */ React.createElement(
       key: "mobile-phone",
       name: "mobile-phone",
       type: "mobile_phone",
+      autoComplete: "tel",
       label: {
         primary: "\u039A\u03B9\u03BD\u03B7\u03C4\u03CC \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"
       },

package/inputs/Input/__stories__/MobilePhone.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/inputs/Input/__stories__/MobilePhone.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field } from '@digigov/form';\nimport { Button } from '@digigov/ui/form/Button';\n\nexport const MobilePhone = () => (\n  <FormBuilder\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n  >\n    <Field\n      key=\"mobile-phone\"\n      name=\"mobile-phone\"\n      type=\"mobile_phone\"\n      label={{\n        primary: '\u039A\u03B9\u03BD\u03B7\u03C4\u03CC \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF',\n      }}\n      extra={{\n        countries: ['gr'],\n        phoneType: 'mobile',\n      }}\n      required\n    />\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\nexport default MobilePhone;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,aAAa;AACnC,SAAS,cAAc;AAEhB,MAAM,cAAc,MACzB;AAAA,EAAC;AAAA;AAAA,IACC,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA;AAAA,EAEA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,WAAW,CAAC,IAAI;AAAA,QAChB,WAAW;AAAA,MACb;AAAA,MACA,UAAQ;AAAA;AAAA,EACV;AAAA,EACA,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAEF,IAAO,sBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field } from '@digigov/form';\nimport { Button } from '@digigov/ui/form/Button';\n\nexport const MobilePhone = () => (\n  <FormBuilder\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n  >\n    <Field\n      key=\"mobile-phone\"\n      name=\"mobile-phone\"\n      type=\"mobile_phone\"\n      autoComplete='tel'\n      label={{\n        primary: '\u039A\u03B9\u03BD\u03B7\u03C4\u03CC \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF',\n      }}\n      extra={{\n        countries: ['gr'],\n        phoneType: 'mobile',\n      }}\n      required\n    />\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\nexport default MobilePhone;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,aAAa;AACnC,SAAS,cAAc;AAEhB,MAAM,cAAc,MACzB;AAAA,EAAC;AAAA;AAAA,IACC,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA;AAAA,EAEA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,cAAa;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,WAAW,CAAC,IAAI;AAAA,QAChB,WAAW;AAAA,MACb;AAAA,MACA,UAAQ;AAAA;AAAA,EACV;AAAA,EACA,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAEF,IAAO,sBAAQ;",
   "names": []
 }

package/inputs/Input/__stories__/PhoneNumber/index.js

@@ -14,6 +14,7 @@ const PhoneNumber = () => /* @__PURE__ */ React.createElement(
       key: "phone-number",
       name: "phone-number",
       type: "phone_number",
+      autoComplete: "tel",
       label: {
         primary: "T\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"
       },

package/inputs/Input/__stories__/PhoneNumber.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/inputs/Input/__stories__/PhoneNumber.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field } from '@digigov/form';\nimport { Button } from '@digigov/ui/form/Button';\n\nexport const PhoneNumber = () => (\n  <FormBuilder\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n  >\n    <Field\n      key=\"phone-number\"\n      name=\"phone-number\"\n      type=\"phone_number\"\n      label={{\n        primary: 'T\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF',\n      }}\n      extra={{\n        countries: ['gr'],\n      }}\n      required\n    />\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\nexport default PhoneNumber;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,aAAa;AACnC,SAAS,cAAc;AAEhB,MAAM,cAAc,MACzB;AAAA,EAAC;AAAA;AAAA,IACC,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA;AAAA,EAEA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,WAAW,CAAC,IAAI;AAAA,MAClB;AAAA,MACA,UAAQ;AAAA;AAAA,EACV;AAAA,EACA,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAEF,IAAO,sBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field } from '@digigov/form';\nimport { Button } from '@digigov/ui/form/Button';\n\nexport const PhoneNumber = () => (\n  <FormBuilder\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n  >\n    <Field\n      key=\"phone-number\"\n      name=\"phone-number\"\n      type=\"phone_number\"\n      autoComplete='tel'\n      label={{\n        primary: 'T\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF',\n      }}\n      extra={{\n        countries: ['gr'],\n      }}\n      required\n    />\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\nexport default PhoneNumber;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,aAAa;AACnC,SAAS,cAAc;AAEhB,MAAM,cAAc,MACzB;AAAA,EAAC;AAAA;AAAA,IACC,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA;AAAA,EAEA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,cAAa;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,WAAW,CAAC,IAAI;AAAA,MAClB;AAAA,MACA,UAAQ;AAAA;AAAA,EACV;AAAA,EACA,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAEF,IAAO,sBAAQ;",
   "names": []
 }

package/inputs/Input/__stories__/PostalCode/index.js

@@ -14,6 +14,7 @@ const PostalCode = () => /* @__PURE__ */ React.createElement(
       key: "postal-code",
       name: "postal-code",
       type: "postal_code",
+      autoComplete: "postal-code",
       label: {
         primary: "\u03A4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B9\u03BA\u03CC\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2"
       },

package/inputs/Input/__stories__/PostalCode.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/inputs/Input/__stories__/PostalCode.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field } from '@digigov/form';\nimport { Button } from '@digigov/ui/form/Button';\n\nexport const PostalCode = () => (\n  <FormBuilder\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n  >\n    <Field\n      key=\"postal-code\"\n      name=\"postal-code\"\n      type=\"postal_code\"\n      label={{\n        primary: '\u03A4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B9\u03BA\u03CC\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2',\n      }}\n      required\n      extra={{ countries: ['GR'] }}\n    />\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\nexport default PostalCode;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,aAAa;AACnC,SAAS,cAAc;AAEhB,MAAM,aAAa,MACxB;AAAA,EAAC;AAAA;AAAA,IACC,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA;AAAA,EAEA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,UAAQ;AAAA,MACR,OAAO,EAAE,WAAW,CAAC,IAAI,EAAE;AAAA;AAAA,EAC7B;AAAA,EACA,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAEF,IAAO,qBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field } from '@digigov/form';\nimport { Button } from '@digigov/ui/form/Button';\n\nexport const PostalCode = () => (\n  <FormBuilder\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n  >\n    <Field\n      key=\"postal-code\"\n      name=\"postal-code\"\n      type=\"postal_code\"\n      autoComplete='postal-code'\n      label={{\n        primary: '\u03A4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B9\u03BA\u03CC\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2',\n      }}\n      required\n      extra={{ countries: ['GR'] }}\n    />\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\nexport default PostalCode;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,aAAa;AACnC,SAAS,cAAc;AAEhB,MAAM,aAAa,MACxB;AAAA,EAAC;AAAA;AAAA,IACC,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA;AAAA,EAEA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,cAAa;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,UAAQ;AAAA,MACR,OAAO,EAAE,WAAW,CAAC,IAAI,EAAE;AAAA;AAAA,EAC7B;AAAA,EACA,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAEF,IAAO,qBAAQ;",
   "names": []
 }

package/inputs/Input/index.js

@@ -1,9 +1,9 @@
 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",
   int: "text",
@@ -11,7 +11,7 @@ const TYPES_MAP = {
   date: "date"
 };
 const Input = React.forwardRef(
-  function WrappedInput({ name, control, type, extra, ...props }, ref) {
+  function WrappedInput({ name, control, type, extra, Field, ...props }, ref) {
     let { multiline = false, rows, limit } = extra || {};
     const { className } = extra || {};
     multiline = multiline === true || type === "text";
@@ -19,6 +19,18 @@ const Input = React.forwardRef(
     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,
@@ -34,13 +46,14 @@ const Input = React.forwardRef(
             type: fieldType
           }
         }
-      ), limit?.max && /* @__PURE__ */ React.createElement(Hint, null, currentValue === void 0 || currentValue?.length >= 0 && currentValue?.length <= limit?.max ? /* @__PURE__ */ React.createElement("span", null, t("form.info.text.you_have"), " ", /* @__PURE__ */ React.createElement("b", null, !currentValue ? limit.max : limit?.max - currentValue?.length), " ", currentValue && limit?.max - currentValue?.length === 1 ? `${t("form.info.text.character")}` : `${t("form.info.text.characters")}`, " ", t("form.info.text.remaining"), ".") : /* @__PURE__ */ React.createElement("span", { style: { color: "#b60202" } }, t("form.info.text.you_have"), " ", /* @__PURE__ */ React.createElement("b", null, currentValue && currentValue?.length - limit?.max), " ", currentValue?.length - limit?.max === 1 ? `${t("form.info.text.character")}` : `${t("form.info.text.characters")}`, " ", t("form.info.text.too_many"), ".")));
+      ), 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,
           type: fieldType,
+          "data-type": type,
           className,
           ref,
           ...{ ...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';\n\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    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>\n              {currentValue === undefined ||\n              (currentValue?.length >= 0 &&\n                currentValue?.length <= limit?.max) ? (\n                <span>\n                  {t('form.info.text.you_have')}{' '}\n                  <b>\n                    {!currentValue\n                      ? limit.max\n                      : limit?.max - currentValue?.length}\n                  </b>{' '}\n                  {currentValue && limit?.max - currentValue?.length === 1\n                    ? `${t('form.info.text.character')}`\n                    : `${t('form.info.text.characters')}`}{' '}\n                  {t('form.info.text.remaining')}.\n                </span>\n              ) : (\n                <span style={{ color: '#b60202' }}>\n                  {t('form.info.text.you_have')}{' '}\n                  <b>{currentValue && currentValue?.length - limit?.max}</b>{' '}\n                  {currentValue?.length - limit?.max === 1\n                    ? `${t('form.info.text.character')}`\n                    : `${t('form.info.text.characters')}`}{' '}\n                  {t('form.info.text.too_many')}.\n                </span>\n              )}\n            </Hint>\n          )}\n        </>\n      );\n    } else {\n      return (\n        <TextInput\n          name={name}\n          type={fieldType}\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,OAAO,cAAc;AACrB,OAAO,eAAe;AACtB,SAAS,sBAAsB;AAE/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;AAC5D,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,YACE,iBAAiB,UACjB,cAAc,UAAU,KACvB,cAAc,UAAU,OAAO,MAC/B,oCAAC,cACE,EAAE,yBAAyB,GAAG,KAC/B,oCAAC,WACE,CAAC,eACE,MAAM,MACN,OAAO,MAAM,cAAc,MACjC,GAAK,KACJ,gBAAgB,OAAO,MAAM,cAAc,WAAW,IACnD,GAAG,EAAE,0BAA0B,CAAC,KAChC,GAAG,EAAE,2BAA2B,CAAC,IAAI,KACxC,EAAE,0BAA0B,GAAE,GACjC,IAEA,oCAAC,UAAK,OAAO,EAAE,OAAO,UAAU,KAC7B,EAAE,yBAAyB,GAAG,KAC/B,oCAAC,WAAG,gBAAgB,cAAc,SAAS,OAAO,GAAI,GAAK,KAC1D,cAAc,SAAS,OAAO,QAAQ,IACnC,GAAG,EAAE,0BAA0B,CAAC,KAChC,GAAG,EAAE,2BAA2B,CAAC,IAAI,KACxC,EAAE,yBAAyB,GAAE,GAChC,CAEJ,CAEJ;AAAA,IAEJ,OAAO;AACL,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UACC,GAAG,EAAE,GAAG,OAAO,OAAO,QAAW,UAAU,OAAU;AAAA;AAAA,MACxD;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,IAAO,gBAAQ;",
-  "names": []
+  "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  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, Field, ...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 =\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            {...{\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          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,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AAErB,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,OAAO,GAAG,MAAM,GAAG,KAAY;AAEjF,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,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,MAE/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;",
+  "names": ["currentValue", "limit"]
 }

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}\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\nexport default Label;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AAsBd,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/Radio/__stories__/Conditional.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/inputs/Radio/__stories__/Conditional.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field, FieldSpec } from '@digigov/form';\nimport { Button } from '@digigov/ui/form/Button';\n\nconst fields: FieldSpec[] = [\n  {\n    key: 'landline',\n    type: 'phone_number',\n    label: {\n      secondary: '\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03BD\u03BF\u03CD\u03BC\u03B5\u03C1\u03BF \u03C4\u03BF\u03C5 \u03C3\u03C4\u03B1\u03B8\u03B5\u03C1\u03BF\u03CD \u03C3\u03B1\u03C2 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5.',\n    },\n    enabled: false,\n    condition: {\n      auth_form: {\n        is: 'via_mobile_phone',\n        then: {\n          enabled: true,\n          required: true,\n        },\n      },\n    },\n  },\n  {\n    key: 'mobile_phone',\n    type: 'mobile_phone',\n    label: {\n      secondary: '\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03BD\u03BF\u03CD\u03BC\u03B5\u03C1\u03BF \u03C4\u03BF\u03C5 \u03BA\u03B9\u03BD\u03B7\u03C4\u03BF\u03CD \u03C3\u03B1\u03C2 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5.',\n    },\n    enabled: false,\n    condition: {\n      auth_form: {\n        is: 'via_mobile_phone',\n        then: {\n          enabled: true,\n          required: true,\n        },\n      },\n    },\n  },\n  {\n    key: 'email',\n    type: 'email',\n    label: {\n      secondary: '\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B4\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7 \u03C4\u03BF\u03C5 \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03BF\u03CD \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF\u03C5.',\n    },\n    enabled: false,\n    condition: {\n      auth_form: {\n        is: 'via_email',\n        then: {\n          enabled: true,\n          required: true,\n        },\n      },\n    },\n  },\n  {\n    key: 'auth_form',\n    type: 'choice:single',\n    required: true,\n    label: {\n      primary: '\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AD\u03B8\u03BF\u03B4\u03BF \u03C0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7\u03C2',\n      secondary:\n        '\u0393\u03B9\u03B1 \u03C4\u03B7\u03BD \u03BF\u03BB\u03BF\u03BA\u03BB\u03AE\u03C1\u03C9\u03C3\u03B7 \u03C4\u03B7\u03C2 \u03B4\u03AE\u03BB\u03C9\u03C3\u03B7\u03C2 \u03C3\u03B1\u03C2, \u03B8\u03B1 \u03C7\u03C1\u03B5\u03B9\u03B1\u03C3\u03C4\u03B5\u03AF \u03B5\u03C0\u03B9\u03C0\u03BB\u03AD\u03BF\u03BD \u03C0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7. \u0398\u03B1 \u03C3\u03B1\u03C2 \u03C3\u03C4\u03B5\u03AF\u03BB\u03BF\u03C5\u03BC\u03B5 \u03AD\u03BD\u03B1 \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03BC\u03B9\u03B1\u03C2 \u03C7\u03C1\u03AE\u03C3\u03B7\u03C2 \u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03BF \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03AE \u03C3\u03B1\u03C2 \u03B4\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7.',\n    },\n    extra: {\n      options: [\n        {\n          key: 'via_mobile_phone',\n          label: { primary: 'M\u03AD\u03C3\u03C9 \u03BA\u03B9\u03BD\u03B7\u03C4\u03BF\u03CD \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5' },\n          value: 'via_mobile_phone',\n          show: ['mobile_phone', 'landline'],\n        },\n        {\n          key: 'via_email',\n          label: {\n            primary: '\u039C\u03AD\u03C3\u03C9 \u03B4\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2 \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03BF\u03CD \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF\u03C5 (e-mail)',\n          },\n          value: 'via_email',\n          show: ['email'],\n        },\n      ],\n    },\n  },\n];\n\nexport const Conditional = () => (\n  <FormBuilder\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n    fields={fields}\n  >\n    <Field key=\"auth_form\" name=\"auth_form\" />\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\n\nexport default Conditional;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,aAAwB;AAC9C,SAAS,cAAc;AAEvB,MAAM,SAAsB;AAAA,EAC1B;AAAA,IACE,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,MACT,WAAW;AAAA,QACT,IAAI;AAAA,QACJ,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,UAAU;AAAA,QACZ;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,MACT,WAAW;AAAA,QACT,IAAI;AAAA,QACJ,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,UAAU;AAAA,QACZ;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,MACT,WAAW;AAAA,QACT,IAAI;AAAA,QACJ,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,UAAU;AAAA,QACZ;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,MACL,SAAS;AAAA,MACT,WACE;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,QACP;AAAA,UACE,KAAK;AAAA,UACL,OAAO,EAAE,SAAS,wHAAyB;AAAA,UAC3C,OAAO;AAAA,UACP,MAAM,CAAC,gBAAgB,UAAU;AAAA,QACnC;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,OAAO;AAAA,YACL,SAAS;AAAA,UACX;AAAA,UACA,OAAO;AAAA,UACP,MAAM,CAAC,OAAO;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,cAAc,MACzB;AAAA,EAAC;AAAA;AAAA,IACC,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA,IACA;AAAA;AAAA,EAEA,oCAAC,SAAM,KAAI,aAAY,MAAK,aAAY;AAAA,EACxC,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAGF,IAAO,sBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field } from '@digigov/form';\nimport { FieldSpec } from '@digigov/form/types';\nimport { Button } from '@digigov/ui/form/Button';\n\nconst fields: FieldSpec[] = [\n  {\n    key: 'landline',\n    type: 'phone_number',\n    label: {\n      secondary: '\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03BD\u03BF\u03CD\u03BC\u03B5\u03C1\u03BF \u03C4\u03BF\u03C5 \u03C3\u03C4\u03B1\u03B8\u03B5\u03C1\u03BF\u03CD \u03C3\u03B1\u03C2 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5.',\n    },\n    enabled: false,\n    condition: {\n      auth_form: {\n        is: 'via_mobile_phone',\n        then: {\n          enabled: true,\n          required: true,\n        },\n      },\n    },\n  },\n  {\n    key: 'mobile_phone',\n    type: 'mobile_phone',\n    label: {\n      secondary: '\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03BD\u03BF\u03CD\u03BC\u03B5\u03C1\u03BF \u03C4\u03BF\u03C5 \u03BA\u03B9\u03BD\u03B7\u03C4\u03BF\u03CD \u03C3\u03B1\u03C2 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5.',\n    },\n    enabled: false,\n    condition: {\n      auth_form: {\n        is: 'via_mobile_phone',\n        then: {\n          enabled: true,\n          required: true,\n        },\n      },\n    },\n  },\n  {\n    key: 'email',\n    type: 'email',\n    label: {\n      secondary: '\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B4\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7 \u03C4\u03BF\u03C5 \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03BF\u03CD \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF\u03C5.',\n    },\n    enabled: false,\n    condition: {\n      auth_form: {\n        is: 'via_email',\n        then: {\n          enabled: true,\n          required: true,\n        },\n      },\n    },\n  },\n  {\n    key: 'auth_form',\n    type: 'choice:single',\n    required: true,\n    label: {\n      primary: '\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AD\u03B8\u03BF\u03B4\u03BF \u03C0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7\u03C2',\n      secondary:\n        '\u0393\u03B9\u03B1 \u03C4\u03B7\u03BD \u03BF\u03BB\u03BF\u03BA\u03BB\u03AE\u03C1\u03C9\u03C3\u03B7 \u03C4\u03B7\u03C2 \u03B4\u03AE\u03BB\u03C9\u03C3\u03B7\u03C2 \u03C3\u03B1\u03C2, \u03B8\u03B1 \u03C7\u03C1\u03B5\u03B9\u03B1\u03C3\u03C4\u03B5\u03AF \u03B5\u03C0\u03B9\u03C0\u03BB\u03AD\u03BF\u03BD \u03C0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7. \u0398\u03B1 \u03C3\u03B1\u03C2 \u03C3\u03C4\u03B5\u03AF\u03BB\u03BF\u03C5\u03BC\u03B5 \u03AD\u03BD\u03B1 \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03BC\u03B9\u03B1\u03C2 \u03C7\u03C1\u03AE\u03C3\u03B7\u03C2 \u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03BF \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03AE \u03C3\u03B1\u03C2 \u03B4\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7.',\n    },\n    extra: {\n      options: [\n        {\n          key: 'via_mobile_phone',\n          label: { primary: 'M\u03AD\u03C3\u03C9 \u03BA\u03B9\u03BD\u03B7\u03C4\u03BF\u03CD \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5' },\n          value: 'via_mobile_phone',\n          show: ['mobile_phone', 'landline'],\n        },\n        {\n          key: 'via_email',\n          label: {\n            primary: '\u039C\u03AD\u03C3\u03C9 \u03B4\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2 \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03BF\u03CD \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF\u03C5 (e-mail)',\n          },\n          value: 'via_email',\n          show: ['email'],\n        },\n      ],\n    },\n  },\n];\n\nexport const Conditional = () => (\n  <FormBuilder\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n    fields={fields}\n  >\n    <Field key=\"auth_form\" name=\"auth_form\" />\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\n\nexport default Conditional;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,aAAa;AAEnC,SAAS,cAAc;AAEvB,MAAM,SAAsB;AAAA,EAC1B;AAAA,IACE,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,MACT,WAAW;AAAA,QACT,IAAI;AAAA,QACJ,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,UAAU;AAAA,QACZ;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,MACT,WAAW;AAAA,QACT,IAAI;AAAA,QACJ,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,UAAU;AAAA,QACZ;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,MACT,WAAW;AAAA,QACT,IAAI;AAAA,QACJ,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,UAAU;AAAA,QACZ;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,MACL,SAAS;AAAA,MACT,WACE;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,QACP;AAAA,UACE,KAAK;AAAA,UACL,OAAO,EAAE,SAAS,wHAAyB;AAAA,UAC3C,OAAO;AAAA,UACP,MAAM,CAAC,gBAAgB,UAAU;AAAA,QACnC;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,OAAO;AAAA,YACL,SAAS;AAAA,UACX;AAAA,UACA,OAAO;AAAA,UACP,MAAM,CAAC,OAAO;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,cAAc,MACzB;AAAA,EAAC;AAAA;AAAA,IACC,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA,IACA;AAAA;AAAA,EAEA,oCAAC,SAAM,KAAI,aAAY,MAAK,aAAY;AAAA,EACxC,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAGF,IAAO,sBAAQ;",
   "names": []
 }

package/inputs/Radio/index.d.ts

@@ -10,4 +10,8 @@ export interface RadioButtonsGroupProps extends Omit<UncontrolledFieldProps, 'ex
     fieldComponent?: React.FC<Omit<UncontrolledFieldProps, 'register'>>;
 }
 export declare const RadioButtonsGroup: React.FC<RadioButtonsGroupProps>;
+export declare const ControlledRadioButtonsGroup: React.FC<RadioButtonsGroupProps & {
+    onChange: (e: any) => void;
+    value: any;
+}>;
 export default RadioButtonsGroup;

package/inputs/Radio/index.js

@@ -1,22 +1,25 @@
 import React from "react";
 import { useWatch } from "react-hook-form";
-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,
   register,
   extra: { options, className },
   disabled,
-  fieldComponent: Field,
+  Field,
   ...props
 }) => {
   const currentValue = useWatch({ control, name });
   const { t } = useTranslation();
-  return /* @__PURE__ */ React.createElement(RadioContainer, { className, defaultValue: currentValue, id: name }, options.map(
+  return /* @__PURE__ */ React.createElement(RadioContainer, { className, id: name }, options.map(
     ({
       label,
       value: v,
@@ -24,7 +27,7 @@ const RadioButtonsGroup = ({
       disabled: optionDisabled,
       selected,
       ...option
-    }) => /* @__PURE__ */ React.createElement("div", { key: `${name}.${v}` }, /* @__PURE__ */ React.createElement(
+    }) => /* @__PURE__ */ React.createElement(Base, { as: "div", key: `${name}.${v}` }, /* @__PURE__ */ React.createElement(
       RadioItem,
       {
         ...register(name),
@@ -41,13 +44,59 @@ const RadioButtonsGroup = ({
           type: "radio"
         }
       },
-      label && label.primary && t(label.primary) || v,
+      label && label.primary && /* @__PURE__ */ React.createElement(Base, { as: "span" }, t(label.primary) || v),
       label && label.secondary && /* @__PURE__ */ React.createElement(Hint, null, t(label.secondary))
     ), selected && selected(), currentValue === v && show && Field && /* @__PURE__ */ React.createElement(RadioConditional, null, show.map((fieldName) => /* @__PURE__ */ React.createElement(Field, { name: fieldName, key: fieldName }))))
   ));
 };
+const ControlledRadioButtonsGroup = ({
+  name,
+  extra: { options, className },
+  disabled,
+  onChange,
+  value,
+  Field,
+  ...props
+}) => {
+  const currentValue = value;
+  const { t } = useTranslation();
+  return /* @__PURE__ */ React.createElement(RadioContainer, { className, id: name }, options.map(
+    ({
+      label,
+      value: v,
+      show,
+      disabled: optionDisabled,
+      selected,
+      ...option
+    }) => /* @__PURE__ */ React.createElement(React.Fragment, { key: `${name}.${v}` }, /* @__PURE__ */ React.createElement(
+      RadioItem,
+      {
+        onChange: (e) => {
+          console.log(e);
+          onChange(e);
+        },
+        id: `${name}.${v}`,
+        value: v,
+        checked: currentValue === v,
+        disabled: disabled || optionDisabled,
+        ...option,
+        ...{
+          ...props,
+          reset: void 0,
+          required: void 0,
+          error: void 0,
+          "aria-describedby": void 0,
+          type: "radio"
+        }
+      },
+      label && label.primary && t(label.primary) || v,
+      label && label.secondary && /* @__PURE__ */ React.createElement(Hint, null, t(label.secondary))
+    ), selected && selected(), currentValue === v && show && /* @__PURE__ */ React.createElement(RadioConditional, null, show.map((fieldName) => /* @__PURE__ */ React.createElement(Field, { name: fieldName, key: fieldName }))))
+  ));
+};
 var Radio_default = RadioButtonsGroup;
 export {
+  ControlledRadioButtonsGroup,
   RadioButtonsGroup,
   Radio_default as default
 };

package/inputs/Radio/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/Radio/index.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { useWatch } from 'react-hook-form';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { FieldOptionProps } from '@digigov/form/inputs/Label';\nimport Hint from '@digigov/react-core/Hint';\nimport { RadioConditional } from '@digigov/react-core/RadioConditional';\nimport RadioContainer from '@digigov/react-core/RadioContainer';\nimport RadioItem from '@digigov/react-core/RadioItem';\nimport { useTranslation } from '@digigov/ui/i18n';\n\nexport interface RadioButtonsGroupProps\n  extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra: {\n    className?: string;\n    options: Array<FieldOptionProps>;\n    dense?: boolean;\n  };\n  fieldComponent?: React.FC<Omit<UncontrolledFieldProps, 'register'>>;\n}\n\nexport const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({\n  name,\n  control,\n  register,\n  extra: { options, className },\n  disabled,\n  fieldComponent: Field,\n  ...props\n}) => {\n  const currentValue: string | undefined = useWatch({ control, name });\n  const { t } = useTranslation();\n  return (\n    <RadioContainer className={className} defaultValue={currentValue} id={name}>\n      {options.map(\n        ({\n          label,\n          value: v,\n          show,\n          disabled: optionDisabled,\n          selected,\n          ...option\n        }) => (\n          <div key={`${name}.${v}`}>\n            <RadioItem\n              {...register(name)}\n              id={`${name}.${v}`}\n              value={v}\n              disabled={disabled || optionDisabled}\n              {...option}\n              {...{\n                ...props,\n                reset: undefined,\n                required: undefined,\n                error: undefined,\n                'aria-describedby': undefined,\n                type: 'radio',\n              }}\n            >\n              {(label && label.primary && t(label.primary)) || v}\n              {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}\n            </RadioItem>\n            {selected && selected()}\n            {currentValue === v && show && Field && (\n              <RadioConditional>\n                {show.map((fieldName) => (\n                  <Field name={fieldName} key={fieldName} />\n                ))}\n              </RadioConditional>\n            )}\n          </div>\n        )\n      )}\n    </RadioContainer>\n  );\n};\n\nexport default RadioButtonsGroup;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,gBAAgB;AAGzB,OAAO,UAAU;AACjB,SAAS,wBAAwB;AACjC,OAAO,oBAAoB;AAC3B,OAAO,eAAe;AACtB,SAAS,sBAAsB;AAYxB,MAAM,oBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,EAAE,SAAS,UAAU;AAAA,EAC5B;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,MAAM;AACJ,QAAM,eAAmC,SAAS,EAAE,SAAS,KAAK,CAAC;AACnE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,SACE,oCAAC,kBAAe,WAAsB,cAAc,cAAc,IAAI,QACnE,QAAQ;AAAA,IACP,CAAC;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,GAAG;AAAA,IACL,MACE,oCAAC,SAAI,KAAK,GAAG,IAAI,IAAI,CAAC,MACpB;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,SAAS,IAAI;AAAA,QACjB,IAAI,GAAG,IAAI,IAAI,CAAC;AAAA,QAChB,OAAO;AAAA,QACP,UAAU,YAAY;AAAA,QACrB,GAAG;AAAA,QACH,GAAG;AAAA,UACF,GAAG;AAAA,UACH,OAAO;AAAA,UACP,UAAU;AAAA,UACV,OAAO;AAAA,UACP,oBAAoB;AAAA,UACpB,MAAM;AAAA,QACR;AAAA;AAAA,MAEE,SAAS,MAAM,WAAW,EAAE,MAAM,OAAO,KAAM;AAAA,MAChD,SAAS,MAAM,aAAa,oCAAC,YAAM,EAAE,MAAM,SAAS,CAAE;AAAA,IACzD,GACC,YAAY,SAAS,GACrB,iBAAiB,KAAK,QAAQ,SAC7B,oCAAC,wBACE,KAAK,IAAI,CAAC,cACT,oCAAC,SAAM,MAAM,WAAW,KAAK,WAAW,CACzC,CACH,CAEJ;AAAA,EAEJ,CACF;AAEJ;AAEA,IAAO,gBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { useWatch } from 'react-hook-form';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { FieldOptionProps } from '@digigov/form/inputs/Label';\nimport {\n  RadioContainer,\n  RadioItem,\n  RadioConditional,\n} from '@digigov/ui/form/RadioContainer';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport { Hint } from '@digigov/ui/typography/Hint';\nimport { Base } from '@digigov/ui/utils/Base';\n\nexport interface RadioButtonsGroupProps\n  extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra: {\n    className?: string;\n    options: Array<FieldOptionProps>;\n    dense?: boolean;\n  };\n  fieldComponent?: React.FC<Omit<UncontrolledFieldProps, 'register'>>;\n}\n\nexport const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({\n  name,\n  control,\n  register,\n  extra: { options, className },\n  disabled,\n  Field,\n  ...props\n}) => {\n  const currentValue: string | undefined = useWatch({ control, name });\n  const { t } = useTranslation();\n  return (\n    <RadioContainer className={className} id={name}>\n      {options.map(\n        ({\n          label,\n          value: v,\n          show,\n          disabled: optionDisabled,\n          selected,\n          ...option\n        }) => (\n          <Base as=\"div\" key={`${name}.${v}`}>\n            <RadioItem\n              {...register(name)}\n              id={`${name}.${v}`}\n              value={v}\n              disabled={disabled || optionDisabled}\n              {...option}\n              {...{\n                ...props,\n                reset: undefined,\n                required: undefined,\n                error: undefined,\n                'aria-describedby': undefined,\n                type: 'radio',\n              }}\n            >\n              {label && label.primary && (\n                <Base as=\"span\">{t(label.primary) || v}</Base>\n              )}\n              {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}\n            </RadioItem>\n            {selected && selected()}\n            {currentValue === v && show && Field && (\n              <RadioConditional>\n                {show.map((fieldName) => (\n                  <Field name={fieldName} key={fieldName} />\n                ))}\n              </RadioConditional>\n            )}\n          </Base>\n        )\n      )}\n    </RadioContainer>\n  );\n};\nexport const ControlledRadioButtonsGroup: React.FC<\n  RadioButtonsGroupProps & { onChange: (e: any) => void; value: any }\n> = ({\n  name,\n  extra: { options, className },\n  disabled,\n  onChange,\n  value,\n  Field,\n  ...props\n}) => {\n  const currentValue: string | undefined = value;\n  const { t } = useTranslation();\n  return (\n    <RadioContainer className={className} id={name}>\n      {options.map(\n        ({\n          label,\n          value: v,\n          show,\n          disabled: optionDisabled,\n          selected,\n          ...option\n        }) => (\n          <React.Fragment key={`${name}.${v}`}>\n            <RadioItem\n              onChange={(e) => {\n                console.log(e);\n                onChange(e);\n              }}\n              id={`${name}.${v}`}\n              value={v}\n              checked={currentValue === v}\n              disabled={disabled || optionDisabled}\n              {...option}\n              {...{\n                ...props,\n                reset: undefined,\n                required: undefined,\n                error: undefined,\n                'aria-describedby': undefined,\n                type: 'radio',\n              }}\n            >\n              {(label && label.primary && t(label.primary)) || v}\n              {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}\n            </RadioItem>\n            {selected && selected()}\n            {currentValue === v && show && (\n              <RadioConditional>\n                {show.map((fieldName) => (\n                  <Field name={fieldName} key={fieldName} />\n                ))}\n              </RadioConditional>\n            )}\n          </React.Fragment>\n        )\n      )}\n    </RadioContainer>\n  );\n};\n\nexport default RadioButtonsGroup;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,gBAAgB;AAGzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,YAAY;AAYd,MAAM,oBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,EAAE,SAAS,UAAU;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,eAAmC,SAAS,EAAE,SAAS,KAAK,CAAC;AACnE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,SACE,oCAAC,kBAAe,WAAsB,IAAI,QACvC,QAAQ;AAAA,IACP,CAAC;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,GAAG;AAAA,IACL,MACE,oCAAC,QAAK,IAAG,OAAM,KAAK,GAAG,IAAI,IAAI,CAAC,MAC9B;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,SAAS,IAAI;AAAA,QACjB,IAAI,GAAG,IAAI,IAAI,CAAC;AAAA,QAChB,OAAO;AAAA,QACP,UAAU,YAAY;AAAA,QACrB,GAAG;AAAA,QACH,GAAG;AAAA,UACF,GAAG;AAAA,UACH,OAAO;AAAA,UACP,UAAU;AAAA,UACV,OAAO;AAAA,UACP,oBAAoB;AAAA,UACpB,MAAM;AAAA,QACR;AAAA;AAAA,MAEC,SAAS,MAAM,WACd,oCAAC,QAAK,IAAG,UAAQ,EAAE,MAAM,OAAO,KAAK,CAAE;AAAA,MAExC,SAAS,MAAM,aAAa,oCAAC,YAAM,EAAE,MAAM,SAAS,CAAE;AAAA,IACzD,GACC,YAAY,SAAS,GACrB,iBAAiB,KAAK,QAAQ,SAC7B,oCAAC,wBACE,KAAK,IAAI,CAAC,cACT,oCAAC,SAAM,MAAM,WAAW,KAAK,WAAW,CACzC,CACH,CAEJ;AAAA,EAEJ,CACF;AAEJ;AACO,MAAM,8BAET,CAAC;AAAA,EACH;AAAA,EACA,OAAO,EAAE,SAAS,UAAU;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,eAAmC;AACzC,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,SACE,oCAAC,kBAAe,WAAsB,IAAI,QACvC,QAAQ;AAAA,IACP,CAAC;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,GAAG;AAAA,IACL,MACE,oCAAC,MAAM,UAAN,EAAe,KAAK,GAAG,IAAI,IAAI,CAAC,MAC/B;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,CAAC,MAAM;AACf,kBAAQ,IAAI,CAAC;AACb,mBAAS,CAAC;AAAA,QACZ;AAAA,QACA,IAAI,GAAG,IAAI,IAAI,CAAC;AAAA,QAChB,OAAO;AAAA,QACP,SAAS,iBAAiB;AAAA,QAC1B,UAAU,YAAY;AAAA,QACrB,GAAG;AAAA,QACH,GAAG;AAAA,UACF,GAAG;AAAA,UACH,OAAO;AAAA,UACP,UAAU;AAAA,UACV,OAAO;AAAA,UACP,oBAAoB;AAAA,UACpB,MAAM;AAAA,QACR;AAAA;AAAA,MAEE,SAAS,MAAM,WAAW,EAAE,MAAM,OAAO,KAAM;AAAA,MAChD,SAAS,MAAM,aAAa,oCAAC,YAAM,EAAE,MAAM,SAAS,CAAE;AAAA,IACzD,GACC,YAAY,SAAS,GACrB,iBAAiB,KAAK,QACrB,oCAAC,wBACE,KAAK,IAAI,CAAC,cACT,oCAAC,SAAM,MAAM,WAAW,KAAK,WAAW,CACzC,CACH,CAEJ;AAAA,EAEJ,CACF;AAEJ;AAEA,IAAO,gBAAQ;",
   "names": []
 }

package/inputs/Select/index.js

@@ -1,6 +1,5 @@
 import React from "react";
-import SelectContainer from "@digigov/react-core/SelectContainer";
-import SelectOption from "@digigov/react-core/SelectOption";
+import { SelectContainer, SelectOption } from "@digigov/ui/form/SelectContainer";
 const Select = React.forwardRef(
   function WrappedSelect({ name, extra: { options, className }, disabled, ...props }, ref) {
     return /* @__PURE__ */ React.createElement(

package/inputs/Select/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/Select/index.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { FieldOptionProps } from '@digigov/form/inputs/Label';\nimport SelectContainer from '@digigov/react-core/SelectContainer';\nimport SelectOption from '@digigov/react-core/SelectOption';\n\nexport interface SelectProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra: {\n    className?: string;\n    options: Array<FieldOptionProps>;\n  };\n}\n\nexport const Select: React.ExoticComponent<SelectProps> = React.forwardRef(\n  function WrappedSelect(\n    { name, extra: { options, className }, disabled, ...props },\n    ref: never\n  ) {\n    return (\n      <SelectContainer\n        className={className}\n        ref={ref}\n        name={name}\n        disabled={disabled}\n        {...{ ...props, reset: undefined, required: undefined }}\n      >\n        {options.map(({ value, label }) => (\n          <SelectOption key={value} value={value}>\n            {label && label.primary ? label.primary : value}\n          </SelectOption>\n        ))}\n      </SelectContainer>\n    );\n  }\n);\n\nexport default Select;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAGlB,OAAO,qBAAqB;AAC5B,OAAO,kBAAkB;AASlB,MAAM,SAA6C,MAAM;AAAA,EAC9D,SAAS,cACP,EAAE,MAAM,OAAO,EAAE,SAAS,UAAU,GAAG,UAAU,GAAG,MAAM,GAC1D,KACA;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG,EAAE,GAAG,OAAO,OAAO,QAAW,UAAU,OAAU;AAAA;AAAA,MAErD,QAAQ,IAAI,CAAC,EAAE,OAAO,MAAM,MAC3B,oCAAC,gBAAa,KAAK,OAAO,SACvB,SAAS,MAAM,UAAU,MAAM,UAAU,KAC5C,CACD;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAO,iBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { FieldOptionProps } from '@digigov/form/inputs/Label';\nimport { SelectContainer, SelectOption } from '@digigov/ui/form/SelectContainer';\n\nexport interface SelectProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra: {\n    className?: string;\n    options: Array<FieldOptionProps>;\n  };\n}\n\nexport const Select: React.ExoticComponent<SelectProps> = React.forwardRef(\n  function WrappedSelect(\n    { name, extra: { options, className }, disabled, ...props },\n    ref: never\n  ) {\n    return (\n      <SelectContainer\n        className={className}\n        ref={ref}\n        name={name}\n        disabled={disabled}\n        {...{ ...props, reset: undefined, required: undefined }}\n      >\n        {options.map(({ value, label }) => (\n          <SelectOption key={value} value={value}>\n            {label && label.primary ? label.primary : value}\n          </SelectOption>\n        ))}\n      </SelectContainer>\n    );\n  }\n);\n\nexport default Select;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAGlB,SAAS,iBAAiB,oBAAoB;AASvC,MAAM,SAA6C,MAAM;AAAA,EAC9D,SAAS,cACP,EAAE,MAAM,OAAO,EAAE,SAAS,UAAU,GAAG,UAAU,GAAG,MAAM,GAC1D,KACA;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG,EAAE,GAAG,OAAO,OAAO,QAAW,UAAU,OAAU;AAAA;AAAA,MAErD,QAAQ,IAAI,CAAC,EAAE,OAAO,MAAM,MAC3B,oCAAC,gBAAa,KAAK,OAAO,SACvB,SAAS,MAAM,UAAU,MAAM,UAAU,KAC5C,CACD;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAO,iBAAQ;",
   "names": []
 }

package/inputs/inputsScenarios/index.js

@@ -47,7 +47,6 @@ const INPUTS_FIELDS = [
     label: { primary: "\u03A0\u03CE\u03C2 \u03B1\u03B9\u03C3\u03B8\u03AC\u03BD\u03B5\u03C3\u03C4\u03B5 \u03B1\u03C5\u03C4\u03AE \u03C4\u03B7 \u03C3\u03C4\u03B9\u03B3\u03BC\u03AE;" },
     extra: {
       component: "AutoComplete",
-      multiple: true,
       options: [
         {
           label: { primary: "\u0388\u03C7\u03C9 \u03C3\u03C5\u03BD\u03AC\u03C7\u03B9" },