@alveole/components 2.0.0-alpha → 2.0.0-alpha.1

package/dist/ui/FormControl/FileInput.stories.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Box } from '../../core/Box';
 import { FileInput } from './FileInput';
 import { useStyles } from './FileInput.styles';
 import { FormControl } from './FormControl';
@@ -8,16 +7,59 @@ export default {
     title: 'FileInput',
     tags: ['ui'],
     experimental: false,
-    description: 'Sélection de fichier avec validation MIME, nue : on la place dans un FormControl pour son libellé, son aide et sa validation.',
+    description: "Sélection de fichiers avec validation MIME et liste des fichiers choisis. Sur natif, propose galerie, appareil photo ou document. Nue : on la place dans un FormControl pour son libellé, son aide et sa validation. Pour déposer des fichiers sur tout un formulaire (web), l'envelopper dans une [FileDropZone](/components/FileDropZone).",
     component: FileInput,
     styleFn: useStyles,
 };
 export const Default = () => {
     const [file, setFile] = useState(null);
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { label: "Document", children: _jsx(FileInput, { value: file, onChange: setFile }) }), _jsx(FormControl, { label: "Image uniquement", children: _jsx(FileInput, { type: "image/*", value: file, onChange: setFile }) }), _jsx(FormControl, { label: "Avec erreur", error: "Ce champ est requis", children: _jsx(FileInput, { value: null, onChange: () => { } }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(FileInput, { value: null, onChange: () => { }, disabled: true }) })] }));
+    return (_jsx(FormControl, { label: "Document", children: _jsx(FileInput, { value: file, onChange: setFile }) }));
 };
 export const Multiple = () => {
     const [files, setFiles] = useState(null);
     return (_jsx(FormControl, { label: "Documents", children: _jsx(FileInput, { value: files, onChange: setFiles, multiple: true }) }));
 };
+export const ImagesSeulement = () => {
+    const [files, setFiles] = useState(null);
+    return (_jsx(FormControl, { label: "Photos", hint: "Formats accept\u00E9s : JPG, PNG", children: _jsx(FileInput, { type: "image/*", value: files, onChange: setFiles, multiple: true }) }));
+};
+export const AvecFichiersEnregistres = () => {
+    const [files, setFiles] = useState([
+        {
+            id: '1',
+            persisted: true,
+            uri: 'https://picsum.photos/id/10/200',
+            name: 'photo-chantier.jpg',
+            mimeType: 'image/jpeg',
+            lastModified: 0,
+        },
+        {
+            id: '2',
+            persisted: true,
+            uri: 'https://example.com/devis.pdf',
+            name: 'devis.pdf',
+            mimeType: 'application/pdf',
+            lastModified: 0,
+        },
+    ]);
+    return (_jsx(FormControl, { label: "Pi\u00E8ces jointes", hint: "Un fichier enregistr\u00E9 retir\u00E9 reste dans la valeur, marqu\u00E9 removed.", children: _jsx(FileInput, { value: files, onChange: setFiles, multiple: true }) }));
+};
+export const LibellesPersonnalises = () => {
+    const [file, setFile] = useState(null);
+    return (_jsx(FormControl, { label: "Attachment", children: _jsx(FileInput, { value: file, onChange: setFile, labels: { addFile: 'Add a file', gallery: 'Gallery', camera: 'Camera', document: 'Document', cancel: 'Cancel' } }) }));
+};
+export const Desactive = () => (_jsx(FormControl, { label: "Document", disabled: true, children: _jsx(FileInput, { value: {
+            uri: 'https://example.com/contrat.pdf',
+            name: 'contrat.pdf',
+            mimeType: 'application/pdf',
+            lastModified: 0,
+        }, onChange: () => { }, disabled: true }) }));
+export const NonRetirable = () => (_jsx(FormControl, { label: "Justificatif", children: _jsx(FileInput, { value: {
+            id: '3',
+            persisted: true,
+            uri: 'https://example.com/justificatif.pdf',
+            name: 'justificatif.pdf',
+            mimeType: 'application/pdf',
+            lastModified: 0,
+        }, onChange: () => { }, removable: false }) }));
 export * as Sources from './FileInput.stories.sources';

package/dist/ui/FormControl/FileInput.stories.sources.d.ts

@@ -1,8 +1,18 @@
 export declare const Default: () => string;
 export declare const Multiple: () => string;
+export declare const ImagesSeulement: () => string;
+export declare const AvecFichiersEnregistres: () => string;
+export declare const LibellesPersonnalises: () => string;
+export declare const Desactive: () => string;
+export declare const NonRetirable: () => string;
 export declare const storySources: {
     readonly Default: () => string;
     readonly Multiple: () => string;
+    readonly ImagesSeulement: () => string;
+    readonly AvecFichiersEnregistres: () => string;
+    readonly LibellesPersonnalises: () => string;
+    readonly Desactive: () => string;
+    readonly NonRetirable: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=FileInput.stories.sources.d.ts.map

package/dist/ui/FormControl/FileInput.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuuB,CAAC;AAE5vB,eAAO,MAAM,QAAQ,cAAwP,CAAC;AAE9Q,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"FileInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAyO,CAAC;AAE9P,eAAO,MAAM,QAAQ,cAAwP,CAAC;AAE9Q,eAAO,MAAM,eAAe,cAAkT,CAAC;AAE/U,eAAO,MAAM,uBAAuB,cAAotB,CAAC;AAEzvB,eAAO,MAAM,qBAAqB,cAA4Y,CAAC;AAE/a,eAAO,MAAM,SAAS,cAA0V,CAAC;AAEjX,eAAO,MAAM,YAAY,cAAuZ,CAAC;AAEjb,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/FormControl/FileInput.stories.sources.js

@@ -1,8 +1,18 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/FormControl/FileInput.stories.tsx
-export const Default = () => "export const Default = () => {\n  const [file, setFile] = useState<FileInputValue>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Document\">\n        <FileInput value={file} onChange={setFile} />\n      </FormControl>\n      <FormControl label=\"Image uniquement\">\n        <FileInput type=\"image/*\" value={file} onChange={setFile} />\n      </FormControl>\n      <FormControl label=\"Avec erreur\" error=\"Ce champ est requis\">\n        <FileInput value={null} onChange={() => {}} />\n      </FormControl>\n      <FormControl label=\"Désactivé\" disabled>\n        <FileInput value={null} onChange={() => {}} disabled />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Default = () => "export const Default = () => {\n  const [file, setFile] = useState<FileInputValue>(null);\n  return (\n    <FormControl label=\"Document\">\n      <FileInput value={file} onChange={setFile} />\n    </FormControl>\n  );\n};";
 export const Multiple = () => "export const Multiple = () => {\n  const [files, setFiles] = useState<FileInputValue>(null);\n  return (\n    <FormControl label=\"Documents\">\n      <FileInput value={files} onChange={setFiles} multiple />\n    </FormControl>\n  );\n};";
+export const ImagesSeulement = () => "export const ImagesSeulement = () => {\n  const [files, setFiles] = useState<FileInputValue>(null);\n  return (\n    <FormControl label=\"Photos\" hint=\"Formats acceptés : JPG, PNG\">\n      <FileInput type=\"image/*\" value={files} onChange={setFiles} multiple />\n    </FormControl>\n  );\n};";
+export const AvecFichiersEnregistres = () => "export const AvecFichiersEnregistres = () => {\n  const [files, setFiles] = useState<FileInputValue>([\n    {\n      id: '1',\n      persisted: true,\n      uri: 'https://picsum.photos/id/10/200',\n      name: 'photo-chantier.jpg',\n      mimeType: 'image/jpeg',\n      lastModified: 0,\n    },\n    {\n      id: '2',\n      persisted: true,\n      uri: 'https://example.com/devis.pdf',\n      name: 'devis.pdf',\n      mimeType: 'application/pdf',\n      lastModified: 0,\n    },\n  ]);\n  return (\n    <FormControl label=\"Pièces jointes\" hint=\"Un fichier enregistré retiré reste dans la valeur, marqué removed.\">\n      <FileInput value={files} onChange={setFiles} multiple />\n    </FormControl>\n  );\n};";
+export const LibellesPersonnalises = () => "export const LibellesPersonnalises = () => {\n  const [file, setFile] = useState<FileInputValue>(null);\n  return (\n    <FormControl label=\"Attachment\">\n      <FileInput\n        value={file}\n        onChange={setFile}\n        labels={{ addFile: 'Add a file', gallery: 'Gallery', camera: 'Camera', document: 'Document', cancel: 'Cancel' }}\n      />\n    </FormControl>\n  );\n};";
+export const Desactive = () => "export const Desactive = () => (\n  <FormControl label=\"Document\" disabled>\n    <FileInput\n      value={{\n        uri: 'https://example.com/contrat.pdf',\n        name: 'contrat.pdf',\n        mimeType: 'application/pdf',\n        lastModified: 0,\n      }}\n      onChange={() => {}}\n      disabled\n    />\n  </FormControl>\n);";
+export const NonRetirable = () => "export const NonRetirable = () => (\n  <FormControl label=\"Justificatif\">\n    <FileInput\n      value={{\n        id: '3',\n        persisted: true,\n        uri: 'https://example.com/justificatif.pdf',\n        name: 'justificatif.pdf',\n        mimeType: 'application/pdf',\n        lastModified: 0,\n      }}\n      onChange={() => {}}\n      removable={false}\n    />\n  </FormControl>\n);";
 export const storySources = {
     Default,
     Multiple,
+    ImagesSeulement,
+    AvecFichiersEnregistres,
+    LibellesPersonnalises,
+    Desactive,
+    NonRetirable,
 };

package/dist/ui/FormControl/FileInput.styles.d.ts

@@ -1,45 +1,8 @@
 export declare const useStyles: () => {
-    fileInputContainer: {
+    container: {
         display: "flex";
-        flexDirection: "row";
+        flexDirection: "column";
         gap: string | number;
-        alignItems: "center";
-    };
-    fileInputButton: {
-        borderWidth: number;
-        borderColor: string;
-        backgroundColor: string;
-        transition: "background-color 0.1s ease-in-out";
-        display: "flex";
-        alignItems: "center";
-        justifyContent: "center";
-        paddingLeft: string | number;
-        paddingRight: string | number;
-        paddingTop: string | number;
-        paddingBottom: string | number;
-    };
-    fileInputButtonHovered: {
-        backgroundColor: string;
-    };
-    fileInputButtonDisabled: {
-        cursor: "not-allowed";
-        backgroundColor: string;
-    };
-    inputFileText: {
-        color: string;
-        fontSize: 12;
-        lineHeight: 20;
-        letterSpacing: 0;
-        fontFamily: string;
-        fontWeight?: import("react-native").TextStyle["fontWeight"];
-    };
-    placeholderText: {
-        color: string;
-        fontSize: 12;
-        lineHeight: 20;
-        letterSpacing: 0;
-        fontFamily: string;
-        fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
 };
 //# sourceMappingURL=FileInput.styles.d.ts.map

package/dist/ui/FormControl/FileInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.styles.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCnB,CAAC"}
+{"version":3,"file":"FileInput.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.styles.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;CAMnB,CAAC"}

package/dist/ui/FormControl/FileInput.styles.js

@@ -1,37 +1,8 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing }) => ({
-    fileInputContainer: {
+export const useStyles = makeStyles(({ spacing }) => ({
+    container: {
         display: 'flex',
-        flexDirection: 'row',
+        flexDirection: 'column',
         gap: spacing('1W'),
-        alignItems: 'center',
-    },
-    fileInputButton: {
-        borderWidth: 1,
-        borderColor: color.border['default-grey'],
-        backgroundColor: color.background['alt-grey'],
-        transition: 'background-color 0.1s ease-in-out',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingLeft: spacing('1W'),
-        paddingRight: spacing('1W'),
-        paddingTop: spacing('1,5V'),
-        paddingBottom: spacing('1,5V'),
-    },
-    fileInputButtonHovered: {
-        backgroundColor: color.background['contrast-grey'],
-    },
-    fileInputButtonDisabled: {
-        cursor: 'not-allowed',
-        backgroundColor: color.background['disabled-grey'],
-    },
-    inputFileText: {
-        ...text['Corps de texte'].XS.Regular,
-        color: color.text['default-grey'],
-    },
-    placeholderText: {
-        ...text['Corps de texte'].XS.Regular,
-        color: color.text['default-grey'],
     },
 }));

package/dist/ui/FormControl/FileInputListe.d.ts

@@ -0,0 +1,11 @@
+import { FileInputFile, FileInputLabels } from './fichiersDuChamp';
+type FileInputListeProps = {
+    fichiers: FileInputFile[];
+    labels: FileInputLabels;
+    retirable: boolean;
+    onRetirer: (fichier: FileInputFile) => void;
+};
+/** Les fichiers montres par le champ : apercu ou icone, ouverture au clic, bouton de retrait. */
+export declare const FileInputListe: ({ fichiers, labels, retirable, onRetirer }: FileInputListeProps) => import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=FileInputListe.d.ts.map

package/dist/ui/FormControl/FileInputListe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInputListe.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInputListe.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAYnE,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,MAAM,EAAE,eAAe,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,iGAAiG;AACjG,eAAO,MAAM,cAAc,GAAI,4CAA4C,mBAAmB,uCA6B7F,CAAC"}

package/dist/ui/FormControl/FileInputListe.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Linking } from 'react-native';
+import { Box } from '../../core/Box';
+import { ButtonIcon } from '../Button';
+import { ListItem } from '../ListItem';
+const estUneImage = (fichier) => fichier.mimeType?.startsWith('image/') || /\.(jpe?g|png|gif|webp|bmp|svg)$/i.test(fichier.name ?? '');
+const iconeDe = (fichier) => {
+    if (fichier.persisted)
+        return 'FileCheckCorner';
+    if (fichier.mimeType?.includes('pdf') || fichier.name?.endsWith('.pdf'))
+        return 'FileText';
+    if (estUneImage(fichier))
+        return 'FileImage';
+    return 'File';
+};
+/** Les fichiers montres par le champ : apercu ou icone, ouverture au clic, bouton de retrait. */
+export const FileInputListe = ({ fichiers, labels, retirable, onRetirer }) => {
+    if (fichiers.length === 0)
+        return null;
+    return (_jsx(Box, { tag: "file-input-list", children: fichiers.map((fichier, index) => {
+            const nom = fichier.name ?? labels.unnamed;
+            return (_jsx(ListItem, { title: nom, preview_url: estUneImage(fichier) ? fichier.uri : undefined, IconProps: { name: iconeDe(fichier) }, showSeparateur: index !== 0, onPress: () => Linking.openURL(fichier.uri).catch(() => { }), trailing: () => (_jsx(ButtonIcon, { accessibilityLabel: `${labels.remove} ${nom}`, disabled: !retirable, variant: "tertiary", icon: "CircleX", onPress: () => onRetirer(fichier) })) }, fichier.id ?? fichier.uri));
+        }) }));
+};

package/dist/ui/FormControl/fichierCorrespondAuType.d.ts

@@ -2,6 +2,7 @@
  * Vrai si le fichier (reconnu a son type MIME, avec repli sur l'extension du nom pour le CSV)
  * fait partie des types autorises. Sans type exige, tout fichier passe. Un seul type peut etre
  * fourni sous forme de chaine plutot que de tableau. Semantique stricte : `image/…`, pdf propre.
+ * Les types MIME du selecteur (`image/*`, `application/pdf`) sont aussi reconnus.
  */
 export declare const fichierCorrespondAuType: (mimeType: string, fileName: string | undefined, types: string | readonly string[] | undefined) => boolean;
 //# sourceMappingURL=fichierCorrespondAuType.d.ts.map

package/dist/ui/FormControl/fichierCorrespondAuType.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fichierCorrespondAuType.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/fichierCorrespondAuType.ts"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,GAClC,UAAU,MAAM,EAChB,UAAU,MAAM,GAAG,SAAS,EAC5B,OAAO,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,KAC5C,OAQF,CAAC"}
+{"version":3,"file":"fichierCorrespondAuType.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/fichierCorrespondAuType.ts"],"names":[],"mappings":"AAWA;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAClC,UAAU,MAAM,EAChB,UAAU,MAAM,GAAG,SAAS,EAC5B,OAAO,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,KAC5C,OASF,CAAC"}

package/dist/ui/FormControl/fichierCorrespondAuType.js

@@ -1,10 +1,13 @@
 const estUneImage = (mimeType) => mimeType.startsWith('image/');
 const estUnPdf = (mimeType) => mimeType === 'application/pdf' || mimeType.endsWith('/pdf');
+// Un type MIME exact (`image/png`) ou generique (`image/*`, `*/*`), comme ceux du selecteur.
+const correspondAuMime = (mimeType, type) => type === mimeType || type === '*/*' || (type.endsWith('/*') && mimeType.startsWith(type.slice(0, -1)));
 const estUnCsv = (mimeType, fileName) => mimeType === 'text/csv' || mimeType === 'application/csv' || (fileName?.endsWith('.csv') ?? false);
 /**
  * Vrai si le fichier (reconnu a son type MIME, avec repli sur l'extension du nom pour le CSV)
  * fait partie des types autorises. Sans type exige, tout fichier passe. Un seul type peut etre
  * fourni sous forme de chaine plutot que de tableau. Semantique stricte : `image/…`, pdf propre.
+ * Les types MIME du selecteur (`image/*`, `application/pdf`) sont aussi reconnus.
  */
 export const fichierCorrespondAuType = (mimeType, fileName, types) => {
     const liste = typeof types === 'string' ? [types] : types;
@@ -12,5 +15,6 @@ export const fichierCorrespondAuType = (mimeType, fileName, types) => {
         return true;
     return ((liste.includes('image') && estUneImage(mimeType)) ||
         (liste.includes('pdf') && estUnPdf(mimeType)) ||
-        (liste.includes('csv') && estUnCsv(mimeType, fileName)));
+        (liste.includes('csv') && estUnCsv(mimeType, fileName)) ||
+        liste.some(type => correspondAuMime(mimeType, type)));
 };

package/dist/ui/FormControl/fichiersDuChamp.d.ts

@@ -0,0 +1,43 @@
+import * as DocumentPicker from 'expo-document-picker';
+/**
+ * Un fichier du champ. `persisted` signale un fichier enregistré (deja cote serveur, reconnu a
+ * son `id`) ; `removed` marque un fichier enregistre que l'utilisateur a retire.
+ */
+export type FileInputFile = DocumentPicker.DocumentPickerAsset & {
+    id?: string;
+    persisted?: boolean;
+    removed?: boolean;
+};
+export type FileInputValue = FileInputFile | FileInputFile[] | null;
+export type FileInputLabels = {
+    addFile: string;
+    selectFile: string;
+    gallery: string;
+    camera: string;
+    document: string;
+    cancel: string;
+    chooseImageTitle: string;
+    chooseDocumentTitle: string;
+    chooseImageMessage: string;
+    permissionRequired: string;
+    cameraPermissionMessage: string;
+    galleryPermissionMessage: string;
+    unnamed: string;
+    remove: string;
+};
+export declare const libellesParDefaut: FileInputLabels;
+type TypesAcceptes = DocumentPicker.DocumentPickerOptions['type'];
+export type Source = 'document' | 'gallery' | 'camera';
+export declare const fichiersVisibles: (value: FileInputValue) => FileInputFile[];
+export declare const ajoute: (value: FileInputValue, nouveaux: FileInputFile[], multiple: boolean) => FileInputValue;
+export declare const retire: (value: FileInputValue, cible: FileInputFile) => FileInputValue;
+export declare const imagesSeulement: (type: TypesAcceptes) => boolean;
+/** Les sources que la feuille d'actions propose sur natif, dans l'ordre. Sur grand ecran, le document passe en tete. */
+export declare const sourcesProposees: (type: TypesAcceptes, grandEcran: boolean) => Source[];
+/** Sur grand ecran, l'option qui ouvre l'explorateur de fichiers s'annonce comme telle. */
+export declare const libelleDeLaSource: (source: Source, labels: FileInputLabels, { type, grandEcran }: {
+    type: TypesAcceptes;
+    grandEcran: boolean;
+}) => string;
+export {};
+//# sourceMappingURL=fichiersDuChamp.d.ts.map

package/dist/ui/FormControl/fichiersDuChamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fichiersDuChamp.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/fichiersDuChamp.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,sBAAsB,CAAC;AAEvD;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,mBAAmB,GAAG;IAC/D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,aAAa,EAAE,GAAG,IAAI,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,uBAAuB,EAAE,MAAM,CAAC;IAChC,wBAAwB,EAAE,MAAM,CAAC;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,eAe/B,CAAC;AAEF,KAAK,aAAa,GAAG,cAAc,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;AAElE,MAAM,MAAM,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAKvD,eAAO,MAAM,gBAAgB,GAAI,OAAO,cAAc,oBAAuD,CAAC;AAG9G,eAAO,MAAM,MAAM,GAAI,OAAO,cAAc,EAAE,UAAU,aAAa,EAAE,EAAE,UAAU,OAAO,KAAG,cAG5F,CAAC;AAOF,eAAO,MAAM,MAAM,GAAI,OAAO,cAAc,EAAE,OAAO,aAAa,KAAG,cAUpE,CAAC;AAMF,eAAO,MAAM,eAAe,GAAI,MAAM,aAAa,YAGlD,CAAC;AAOF,wHAAwH;AACxH,eAAO,MAAM,gBAAgB,GAAI,MAAM,aAAa,EAAE,YAAY,OAAO,KAAG,MAAM,EAIjF,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,MAAM,EACd,QAAQ,eAAe,EACvB,sBAAsB;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,WAKnE,CAAC"}

package/dist/ui/FormControl/fichiersDuChamp.js

@@ -0,0 +1,63 @@
+export const libellesParDefaut = {
+    addFile: 'Ajouter un fichier',
+    selectFile: 'Sélectionner un fichier',
+    gallery: 'Galerie',
+    camera: 'Appareil photo',
+    document: 'Document',
+    cancel: 'Annuler',
+    chooseImageTitle: 'Choisir une image',
+    chooseDocumentTitle: 'Choisir un fichier',
+    chooseImageMessage: 'Prendre une photo ou en choisir une dans la galerie.',
+    permissionRequired: 'Autorisation requise',
+    cameraPermissionMessage: "Autorisez l'accès à l'appareil photo dans les réglages pour prendre une photo.",
+    galleryPermissionMessage: "Autorisez l'accès à la galerie dans les réglages pour choisir une image.",
+    unnamed: 'Fichier sans nom',
+    remove: 'Retirer',
+};
+const listeDe = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
+export const fichiersVisibles = (value) => listeDe(value).filter(fichier => !fichier.removed);
+// Le champ multiple accumule ; le champ simple ne recoit un fichier que s'il n'en montre aucun.
+export const ajoute = (value, nouveaux, multiple) => {
+    if (!multiple)
+        return nouveaux[0] ?? value;
+    return [...listeDe(value), ...nouveaux];
+};
+const memeFichier = (a, b) => a.id != null && b.id != null ? a.id === b.id : a.uri === b.uri;
+// Un fichier enregistre reste dans la valeur, marque `removed`, pour que l'appelant sache quoi
+// supprimer cote serveur ; un fichier ajoute disparait simplement.
+export const retire = (value, cible) => {
+    const retirer = (fichier) => {
+        if (!memeFichier(fichier, cible))
+            return [fichier];
+        return fichier.persisted ? [{ ...fichier, removed: true }] : [];
+    };
+    if (!Array.isArray(value))
+        return value == null ? null : (retirer(value)[0] ?? null);
+    const suivants = value.flatMap(retirer);
+    return suivants.length === 0 ? null : suivants;
+};
+const typesDe = (type) => (type == null ? [] : Array.isArray(type) ? type : [type]);
+const estUnTypeImage = (t) => t === 'image' || t.startsWith('image/');
+export const imagesSeulement = (type) => {
+    const types = typesDe(type);
+    return types.length > 0 && types.every(estUnTypeImage);
+};
+const accepteLesImages = (type) => {
+    const types = typesDe(type);
+    return types.length === 0 || types.some(t => t === '*/*' || estUnTypeImage(t));
+};
+/** Les sources que la feuille d'actions propose sur natif, dans l'ordre. Sur grand ecran, le document passe en tete. */
+export const sourcesProposees = (type, grandEcran) => {
+    const images = accepteLesImages(type) ? ['gallery', 'camera'] : [];
+    if (imagesSeulement(type))
+        return images;
+    return grandEcran ? ['document', ...images] : [...images, 'document'];
+};
+/** Sur grand ecran, l'option qui ouvre l'explorateur de fichiers s'annonce comme telle. */
+export const libelleDeLaSource = (source, labels, { type, grandEcran }) => {
+    if (source === 'document')
+        return grandEcran ? labels.selectFile : labels.document;
+    if (source === 'gallery')
+        return grandEcran && imagesSeulement(type) ? labels.selectFile : labels.gallery;
+    return labels.camera;
+};

package/dist/ui/FormControl/useChoixDeFichier.d.ts

@@ -0,0 +1,15 @@
+import type { FileInputProps } from './FileInput';
+import { FileInputLabels } from './fichiersDuChamp';
+type Options = Pick<FileInputProps, 'value' | 'onChange' | 'type' | 'disabled' | 'onPickStart'> & {
+    multiple: boolean;
+    cameraQuality: number;
+    labels: FileInputLabels;
+};
+/**
+ * Tout ce que le bouton du champ declenche : le selecteur de documents sur le web ; sur natif, une
+ * feuille d'actions galerie / appareil photo / document, avec les demandes d'autorisation. Les
+ * fichiers recus passent le controle de type, puis s'ajoutent a la valeur.
+ */
+export declare const useChoixDeFichier: (options: Options) => () => Promise<void>;
+export {};
+//# sourceMappingURL=useChoixDeFichier.d.ts.map

package/dist/ui/FormControl/useChoixDeFichier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChoixDeFichier.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/useChoixDeFichier.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAGL,eAAe,EAKhB,MAAM,mBAAmB,CAAC;AAmC3B,KAAK,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG;IAChG,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,eAAe,CAAC;CACzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,SAAS,OAAO,wBAuDjD,CAAC"}

package/dist/ui/FormControl/useChoixDeFichier.js

@@ -0,0 +1,87 @@
+import { useTheme } from '@alveole/theme';
+import * as DocumentPicker from 'expo-document-picker';
+import * as ImagePicker from 'expo-image-picker';
+import React from 'react';
+import { Platform } from 'react-native';
+import { Alert } from '../../core/Alert';
+import { ajoute, imagesSeulement, libelleDeLaSource, sourcesProposees, } from './fichiersDuChamp';
+import { valideLeType } from './valideLeType';
+const enFichier = (asset) => ({
+    uri: asset.uri,
+    name: asset.fileName ?? 'image.jpg',
+    size: asset.fileSize ?? 0,
+    mimeType: asset.mimeType ?? 'image/jpeg',
+    lastModified: Date.now(),
+});
+/** Demande l'autorisation, puis ouvre la galerie ou l'appareil photo. Rend les fichiers choisis, ou aucun. */
+const prendreUneImage = async (source, { labels, cameraQuality, multiple }) => {
+    const camera = source === 'camera';
+    const demande = camera ? ImagePicker.requestCameraPermissionsAsync : ImagePicker.requestMediaLibraryPermissionsAsync;
+    const { status } = await demande();
+    if (status !== 'granted') {
+        const message = camera ? labels.cameraPermissionMessage : labels.galleryPermissionMessage;
+        Alert.alert({ title: labels.permissionRequired, message });
+        return [];
+    }
+    const result = camera
+        ? await ImagePicker.launchCameraAsync({ mediaTypes: ['images'], quality: cameraQuality })
+        : await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: ['images'],
+            quality: 1,
+            allowsMultipleSelection: multiple,
+        });
+    return result.canceled ? [] : result.assets.map(enFichier);
+};
+/**
+ * Tout ce que le bouton du champ declenche : le selecteur de documents sur le web ; sur natif, une
+ * feuille d'actions galerie / appareil photo / document, avec les demandes d'autorisation. Les
+ * fichiers recus passent le controle de type, puis s'ajoutent a la valeur.
+ */
+export const useChoixDeFichier = (options) => {
+    const { value, onChange, type, disabled, onPickStart, multiple, cameraQuality, labels } = options;
+    const { isVariant } = useTheme();
+    const grandEcran = isVariant('desktop');
+    const isPickingRef = React.useRef(false);
+    const recevoir = React.useCallback((nouveaux) => {
+        if (nouveaux.length === 0)
+            return;
+        const transmettre = () => onChange(ajoute(value, nouveaux, multiple));
+        valideLeType({ type, onChange: transmettre })(multiple ? nouveaux : nouveaux[0]);
+    }, [onChange, value, multiple, type]);
+    const choisirUnDocument = React.useCallback(async () => {
+        const result = await DocumentPicker.getDocumentAsync({ copyToCacheDirectory: true, multiple, type });
+        recevoir(result.assets ?? []);
+    }, [multiple, type, recevoir]);
+    const choisirUneImage = React.useCallback(async (source) => recevoir(await prendreUneImage(source, { labels, cameraQuality, multiple })), [labels, cameraQuality, multiple, recevoir]);
+    const ouvrirLaFeuille = React.useCallback(() => {
+        const lancer = (source) => (source === 'document' ? choisirUnDocument() : choisirUneImage(source));
+        const images = imagesSeulement(type);
+        Alert.alert({
+            title: images ? labels.chooseImageTitle : labels.chooseDocumentTitle,
+            message: images ? labels.chooseImageMessage : undefined,
+            buttons: [
+                ...sourcesProposees(type, grandEcran).map(source => ({
+                    text: libelleDeLaSource(source, labels, { type, grandEcran }),
+                    onPress: () => lancer(source),
+                })),
+                { text: labels.cancel, style: 'cancel' },
+            ],
+        });
+    }, [type, labels, grandEcran, choisirUnDocument, choisirUneImage]);
+    return React.useCallback(async () => {
+        if (isPickingRef.current)
+            return;
+        onPickStart?.();
+        if (disabled)
+            return;
+        if (Platform.OS !== 'web')
+            return ouvrirLaFeuille();
+        isPickingRef.current = true;
+        try {
+            await choisirUnDocument();
+        }
+        finally {
+            isPickingRef.current = false;
+        }
+    }, [onPickStart, disabled, ouvrirLaFeuille, choisirUnDocument]);
+};

package/dist/ui/FormControl/valideLeType.d.ts

@@ -4,7 +4,7 @@ import type { FileInputProps } from './FileInput';
  * et prevenir l'utilisateur sinon. Un fichier dont le type MIME est inconnu passe : c'est au
  * selecteur, qui filtre deja, d'avoir eu le dernier mot.
  *
- * Les trois champs de fichier (l'ancien FileField, DragAndDropFile natif et web) faisaient ce filtrage
+ * Les trois champs de fichier (l'ancien FileField, l'ancien DragAndDropFile natif et web) faisaient ce filtrage
  * chacun dans son coin, et avaient deja diverge : FileField reconnaissait les types avec ses
  * propres comparaisons de chaines, plus laches que celles des deux autres, et ne verifiait que
  * le premier fichier d'une selection multiple. Un meme fichier pouvait donc etre accepte ici et

package/dist/ui/FormControl/valideLeType.js

@@ -11,7 +11,7 @@ const refuser = (plusieurs) => Alert.alert({
  * et prevenir l'utilisateur sinon. Un fichier dont le type MIME est inconnu passe : c'est au
  * selecteur, qui filtre deja, d'avoir eu le dernier mot.
  *
- * Les trois champs de fichier (l'ancien FileField, DragAndDropFile natif et web) faisaient ce filtrage
+ * Les trois champs de fichier (l'ancien FileField, l'ancien DragAndDropFile natif et web) faisaient ce filtrage
  * chacun dans son coin, et avaient deja diverge : FileField reconnaissait les types avec ses
  * propres comparaisons de chaines, plus laches que celles des deux autres, et ne verifiait que
  * le premier fichier d'une selection multiple. Un meme fichier pouvait donc etre accepte ici et

package/dist/ui/RadioGroup/RadioGroup.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TamaguiElement, RadioGroupProps as TamaguiRadioGroupProps } from 'tamagui';
-import { FormControlCaptionProps, FormControlHintProps, FormControlLabelProps } from '../FormControl';
+import { FormControlCaptionProps } from '../FormControl/FormControlCaption';
+import { FormControlHintProps } from '../FormControl/FormControlHint';
+import { FormControlLabelProps } from '../FormControl/FormControlLabel';
 export type RadioGroupElement = TamaguiElement;
 export type RadioGroupProps = Omit<TamaguiRadioGroupProps, 'value' | 'onValueChange' | 'direction'> & FormControlCaptionProps & FormControlLabelProps & FormControlHintProps & {
     label?: string;

package/dist/ui/RadioGroup/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAmC,eAAe,IAAI,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAErH,OAAO,EAEL,uBAAuB,EAEvB,oBAAoB,EAEpB,qBAAqB,EACtB,MAAM,gBAAgB,CAAC;AAIxB,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,eAAe,GAAG,WAAW,CAAC,GACjG,uBAAuB,GACvB,qBAAqB,GACrB,oBAAoB,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,sBAAsB,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAC9B,CAAC;AAEJ,eAAO,MAAM,UAAU;YANX,MAAM;YACN,sBAAsB,CAAC,OAAO,CAAC;eAC5B,sBAAsB,CAAC,eAAe,CAAC;cACxC,SAAS,GAAG,MAAM;wCAiD9B,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAmC,eAAe,IAAI,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAIrH,OAAO,EAAsB,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAChG,OAAO,EAAmB,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACvF,OAAO,EAAoB,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAI1F,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,eAAe,GAAG,WAAW,CAAC,GACjG,uBAAuB,GACvB,qBAAqB,GACrB,oBAAoB,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,sBAAsB,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAC9B,CAAC;AAEJ,eAAO,MAAM,UAAU;YANX,MAAM;YACN,sBAAsB,CAAC,OAAO,CAAC;eAC5B,sBAAsB,CAAC,eAAe,CAAC;cACxC,SAAS,GAAG,MAAM;wCAiD9B,CAAC"}

package/dist/ui/RadioGroup/RadioGroup.js

@@ -2,7 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { RadioGroup as TamaguiRadioGroup } from 'tamagui';
 import { Box } from '../../core/Box';
-import { FormControlCaption, FormControlHint, FormControlLabel, } from '../FormControl';
+// Imports directs, pas par l'index : FormControl contient FileInput, qui rend des ListItem, qui
+// rendent des RadioGroup. Passer par l'index refermerait le cycle.
+import { FormControlCaption } from '../FormControl/FormControlCaption';
+import { FormControlHint } from '../FormControl/FormControlHint';
+import { FormControlLabel } from '../FormControl/FormControlLabel';
 import { useStyles } from './RadioGroup.styles';
 import { RadioGroupContext } from './RadioGroupContext';
 export const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {

package/dist/ui/index.d.ts

@@ -12,9 +12,9 @@ export * from './DataTable';
 export * from './DateInput';
 export * from './Divider';
 export * from './DocumentViewer';
-export * from './DragAndDropFile';
 export * from './DurationInput';
 export * from './EmptyState';
+export * from './FileDropZone';
 export * from './FilterDate';
 export * from './FormControl';
 export * from './Header';

package/dist/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}

package/dist/ui/index.js

@@ -12,9 +12,9 @@ export * from './DataTable';
 export * from './DateInput';
 export * from './Divider';
 export * from './DocumentViewer';
-export * from './DragAndDropFile';
 export * from './DurationInput';
 export * from './EmptyState';
+export * from './FileDropZone';
 export * from './FilterDate';
 export * from './FormControl';
 export * from './Header';