@swan-io/shared-business 1.0.0

package/HISTORY.md

@@ -0,0 +1,3 @@
+# 1.0.0
+
+Initial release!

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Swan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @swan-io/shared-business

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@swan-io/shared-business",
+  "version": "1.0.0",
+  "engines": {
+    "node": ">=14.0.0",
+    "yarn": "^1.20.0"
+  },
+  "files": [
+    "LICENSE",
+    "src/**/*.js",
+    "src/**/*.d.ts",
+    "README.md",
+    "HISTORY.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not op_mini all",
+    "not dead",
+    "not ie <= 11",
+    "safari >= 12"
+  ],
+  "dependencies": {
+    "@formatjs/intl": "2.6.7",
+    "@swan-io/boxed": "0.12.1",
+    "@swan-io/lake": "1.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native-web": "0.18.12",
+    "react-ux-form": "1.3.0",
+    "ts-pattern": "4.2.1"
+  },
+  "devDependencies": {
+    "@testing-library/react": "13.4.0",
+    "@testing-library/user-event": "14.4.3",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
+    "@types/react-native": "0.70.11",
+    "@types/uuid": "9.0.1",
+    "jsdom": "21.1.0",
+    "vitest": "0.29.2"
+  }
+}

package/src/components/CountryPicker.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { CountryCCA2, CountryCCA3 } from "../constants/countries";
+export type CountryItem<T extends CountryCCA3> = {
+    cca3: T;
+    cca2?: CountryCCA2;
+    name: string;
+};
+type Props<T extends CountryCCA3> = {
+    onValueChange: (country: T) => void;
+    value: T | undefined;
+    items: CountryItem<T>[];
+    error?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    nativeID?: string;
+    disabled?: boolean;
+    hideErrors?: boolean;
+};
+export declare function CountryPicker<T extends CountryCCA3>({ onValueChange, value, items, readOnly, nativeID, error, placeholder, disabled, hideErrors, }: Props<T>): JSX.Element;
+export {};

package/src/components/CountryPicker.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flag } from "@swan-io/lake/src/components/Flag";
+import { LakeSelect } from "@swan-io/lake/src/components/LakeSelect";
+import { useMemo } from "react";
+export function CountryPicker({ onValueChange, value, items, readOnly, nativeID, error, placeholder, disabled, hideErrors, }) {
+    const countries = useMemo(() => {
+        const hasIntl = "Intl" in window && "DisplayNames" in window.Intl;
+        const countryResolver = hasIntl && Intl.DisplayNames.supportedLocalesOf(["en"]).length
+            ? new Intl.DisplayNames(["en"], { type: "region" })
+            : undefined;
+        const seen = new Set();
+        return items
+            .filter(item => {
+            const hasBeenSeen = seen.has(item.cca3);
+            seen.add(item.cca3);
+            return !hasBeenSeen;
+        })
+            .map(country => ({
+            name: countryResolver?.of(country.cca2 ?? "") ?? country.name,
+            icon: _jsx(Flag, { width: 14, icon: country.cca3 }),
+            value: country.cca3,
+        }))
+            .sort((a, b) => a.name.localeCompare(b.name));
+    }, [items]);
+    return (_jsx(LakeSelect, { readOnly: readOnly, nativeID: nativeID, error: error, items: countries, placeholder: placeholder, value: value, onValueChange: onValueChange, disabled: disabled, hideErrors: hideErrors }));
+}

package/src/components/SkipToContent.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const CONTENT_ID = "content";
+export declare const SkipToContent: () => JSX.Element | null;

package/src/components/SkipToContent.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LakeButton } from "@swan-io/lake/src/components/LakeButton";
+import { animations } from "@swan-io/lake/src/constants/design";
+import { useCallback, useEffect, useState } from "react";
+import { StyleSheet } from "react-native";
+import { t } from "../utils/i18n";
+const styles = StyleSheet.create({
+    button: {
+        position: "absolute",
+        top: -100,
+        left: 10,
+        zIndex: 1000,
+    },
+    focused: {
+        top: 10,
+        ...animations.fadeAndSlideInFromTop.enter,
+    },
+});
+export const CONTENT_ID = "content";
+export const SkipToContent = () => {
+    const [contentElement, setContentElement] = useState(null);
+    useEffect(() => {
+        const element = document.querySelector(`#${CONTENT_ID}`);
+        setContentElement(element);
+    }, []);
+    const onPress = useCallback(() => {
+        if (contentElement != null) {
+            contentElement.focus();
+        }
+    }, [contentElement]);
+    if (contentElement == null) {
+        return null;
+    }
+    return (_jsx(LakeButton, { style: ({ focused }) => [styles.button, focused && styles.focused], onPress: onPress, color: "current", children: t("common.skipToContent") }));
+};

package/src/components/SupportChat.d.ts

@@ -0,0 +1,26 @@
+import { ReactElement } from "react";
+declare const keys: {
+    "end-user": string;
+    partner: string;
+};
+export type AdditionalInfo = {
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+    phoneNumber?: string;
+    userId?: string;
+    onboardingId?: string;
+    membershipId?: string;
+    environment?: string;
+    projectName?: string;
+};
+type Props = {
+    accentColor?: string;
+    children: (props: {
+        onPressShow: () => void;
+    }) => ReactElement;
+    type: keyof typeof keys;
+    additionalInfo: AdditionalInfo;
+};
+export declare const SupportChat: ({ children, accentColor, type, additionalInfo }: Props) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export {};

package/src/components/SupportChat.js

@@ -0,0 +1,87 @@
+import { Array, Deferred, Dict, Option } from "@swan-io/boxed";
+import { useCallback, useEffect } from "react";
+const keys = {
+    "end-user": "275d1c72-3760-4303-a7f0-806f5266a251",
+    partner: "7a1d4c9f-9d4f-493d-8458-1e34f4a6b5ef",
+};
+const zendeskFieldMapping = {
+    phoneNumber: 5607378510109,
+    userId: 5140675351581,
+    email: "email",
+    onboardingId: 5138993599517,
+    membershipId: 5140686247581,
+    environment: 5139163414173,
+};
+const [zendeskApi, setZendeskApi] = Deferred.make();
+export const SupportChat = ({ children, accentColor, type, additionalInfo }) => {
+    useEffect(() => {
+        const script = document.createElement("script");
+        script.id = "ze-snippet";
+        script.src = `https://static.zdassets.com/ekr/snippet.js?key=${keys[type]}`;
+        document.body.append(script);
+        script.addEventListener("load", () => {
+            const intervalId = setInterval(() => {
+                if (typeof zE != "undefined") {
+                    setZendeskApi(zE);
+                    clearInterval(intervalId);
+                }
+            });
+        });
+        return () => {
+            script.remove();
+        };
+    }, [type]);
+    useEffect(() => {
+        // @ts-expect-error
+        window.zESettings = {
+            color: { theme: accentColor ?? "#26232f" },
+        };
+    }, [accentColor]);
+    useEffect(() => {
+        const { firstName, lastName, email, projectName, ...fieldInfos } = additionalInfo;
+        const values = Dict.entries({ ...fieldInfos, email });
+        zendeskApi.onResolve(() => {
+            try {
+                zE("webWidget", "updateSettings", {
+                    color: { theme: accentColor ?? "#26232f" },
+                    webWidget: {
+                        contactForm: {
+                            fields: Array.keepMap(values, ([key, value]) => value != null
+                                ? Option.Some({
+                                    id: zendeskFieldMapping[key],
+                                    prefill: {
+                                        "*": key === "environment" ? (value === "Live" ? "live" : "sandbox") : value,
+                                    },
+                                })
+                                : Option.None()),
+                        },
+                    },
+                });
+                zE("webWidget", "hide");
+                zE("webWidget:on", "close", () => {
+                    zE("webWidget", "hide");
+                });
+                if (firstName != null && lastName != null && email != null) {
+                    zE("webWidget", "identify", {
+                        name: `${firstName} ${lastName}`,
+                        email,
+                        ...(projectName != null ? { organization: projectName } : null),
+                    });
+                }
+            }
+            catch (err) {
+                // nothing
+            }
+        });
+    }, [accentColor, additionalInfo]);
+    const onPressShow = useCallback(() => {
+        try {
+            zE("webWidget", "show");
+            zE("webWidget", "open");
+        }
+        catch (err) {
+            // nothing
+        }
+    }, []);
+    return children({ onPressShow });
+};

package/src/components/SupportingDocument.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { CountryCCA3 } from "../constants/countries";
+export type Document = {
+    id: string;
+    name?: string;
+    downloadUrl?: string;
+    purpose: SupportingDocumentPurpose;
+};
+export type TypeOfRepresentation = "LegalRepresentative" | "PowerOfAttorney";
+export type SupportingDocumentPurpose = "AssociationRegistration" | "CompanyRegistration" | "ProofOfIdentity" | "Other" | "SignedStatus";
+type SupportingDocumentPurposeEnum = "AssociationRegistration" | "Banking" | "CompanyRegistration" | "Other" | "PowerOfAttorney" | "ProofOfCompanyAddress" | "ProofOfCompanyIncome" | "ProofOfIdentity" | "ProofOfIndividualAddress" | "ProofOfIndividualIncome" | "ProofOfOriginOfFunds" | "SignedStatus" | "UBODeclaration";
+type Props = {
+    getAwsUrl: (file: File, purpose: SupportingDocumentPurpose) => Promise<{
+        upload: {
+            url: string;
+            fields: {
+                key: string;
+                value: string;
+            }[];
+        };
+        id: string;
+    }>;
+    documents: Document[];
+    requiredDocumentTypes: SupportingDocumentPurposeEnum[];
+    onChange?: (documents: Document[]) => void;
+    country?: CountryCCA3;
+    typeOfRepresentation?: TypeOfRepresentation;
+};
+export type SupportingDocumentRef = {
+    submit: (callback: (value: boolean) => void) => void;
+};
+export declare const SupportingDocument: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<SupportingDocumentRef>>;
+export {};

package/src/components/SupportingDocument.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box } from "@swan-io/lake/src/components/Box";
+import { Form } from "@swan-io/lake/src/components/Form";
+import { LakeButton, LakeButtonGroup } from "@swan-io/lake/src/components/LakeButton";
+import { LakeLabel } from "@swan-io/lake/src/components/LakeLabel";
+import { LakeModal } from "@swan-io/lake/src/components/LakeModal";
+import { LakeRadio } from "@swan-io/lake/src/components/LakeRadio";
+import { LakeText } from "@swan-io/lake/src/components/LakeText";
+import { LakeTooltip } from "@swan-io/lake/src/components/LakeTooltip";
+import { Pressable } from "@swan-io/lake/src/components/Pressable";
+import { Space } from "@swan-io/lake/src/components/Space";
+import { isNotNullish, isNullish } from "@swan-io/lake/src/utils/nullish";
+import { UploadArea } from "@swan-io/shared-business/src/components/UploadArea";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
+import { StyleSheet } from "react-native";
+import { useForm } from "react-ux-form";
+import { MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE } from "../constants/uploads";
+import { t } from "../utils/i18n";
+const ACCEPTED_FORMATS = ["application/pdf", "image/png", "image/jpeg"];
+const NO_ID_YET = "NO_ID_YET";
+const validateNotEmpty = value => {
+    if (value.length === 0) {
+        return t("error.requiredField");
+    }
+};
+const styles = StyleSheet.create({
+    button: {
+        opacity: 1,
+    },
+    buttonWithDefaultCursor: {
+        opacity: 1,
+        cursor: "default",
+    },
+});
+const Help = ({ text, width, onPress, }) => {
+    return (_jsx(LakeTooltip, { content: t(text), width: width, togglableOnFocus: true, placement: "top", children: _jsx(LakeButton, { mode: "tertiary", color: "gray", icon: "question-circle-regular", onPress: onPress, disabled: onPress == null, style: [styles.button, onPress == null && styles.buttonWithDefaultCursor], accessibilityLabel: t("supportingDoc.whatIsThis") }) }));
+};
+export const SupportingDocument = forwardRef(({ documents, getAwsUrl, onChange, requiredDocumentTypes, country, typeOfRepresentation }, externalRef) => {
+    const initialValues = useMemo(() => documents.reduce((acc, doc) => {
+        return {
+            ...acc,
+            [doc.purpose]: [
+                ...(acc[doc.purpose] ?? []),
+                {
+                    id: doc.id,
+                    name: doc.name,
+                    fileUrl: doc.downloadUrl,
+                    finished: true,
+                },
+            ],
+        };
+    }, {}), [documents]);
+    const [showPowerOfAttorneyModal, setShowPowerOfAttorneyModal] = useState(false);
+    const [isOther, setIsOther] = useState(isNotNullish(initialValues["Other"]) || isNotNullish(initialValues["ProofOfIdentity"]));
+    const { Field, setFieldValue, getFieldState, listenFields, submitForm } = useForm({
+        CompanyRegistration: {
+            initialValue: initialValues["CompanyRegistration"] ?? [],
+            validate: validateNotEmpty,
+        },
+        AssociationRegistration: {
+            initialValue: initialValues["AssociationRegistration"] ?? [],
+            validate: validateNotEmpty,
+        },
+        SignedStatus: {
+            initialValue: initialValues["SignedStatus"] ?? [],
+            validate: validateNotEmpty,
+        },
+        ProofOfIdentity: {
+            initialValue: initialValues["ProofOfIdentity"] ?? [],
+            validate: validateNotEmpty,
+        },
+        Other: {
+            initialValue: initialValues["Other"] ?? [],
+            validate: validateNotEmpty,
+        },
+    });
+    useImperativeHandle(externalRef, () => {
+        return {
+            submit: (callback) => {
+                submitForm(() => callback(true), () => callback(false));
+            },
+        };
+    });
+    useEffect(() => {
+        const removeListener = listenFields([
+            "CompanyRegistration",
+            "AssociationRegistration",
+            "SignedStatus",
+            "Other",
+            "ProofOfIdentity",
+        ], state => {
+            let documents = [];
+            Object.entries(state).forEach(([key, { value: values }]) => {
+                documents = [
+                    ...documents,
+                    ...(values ?? []).map(v => ({
+                        id: v.id,
+                        name: v.name,
+                        downloadUrl: v.fileUrl,
+                        purpose: key,
+                    })),
+                ];
+            });
+            onChange?.(documents);
+        });
+        return () => removeListener();
+    }, [listenFields, onChange]);
+    const handleUpload = (files, fieldName) => {
+        const file = files[0];
+        if (isNullish(file)) {
+            return;
+        }
+        getAwsUrl(file, fieldName)
+            .then(({ upload: { url, fields }, id }) => {
+            const xhr = new XMLHttpRequest();
+            xhr.open("POST", url, true);
+            const state = getFieldState(fieldName).value;
+            setFieldValue(fieldName, state.map(doc => doc.id === NO_ID_YET
+                ? {
+                    progress: 0,
+                    name: file.name,
+                    finished: false,
+                    id,
+                }
+                : doc));
+            xhr.upload.onprogress = event => {
+                const progress = (event.loaded / event.total) * 100;
+                const state = getFieldState(fieldName).value;
+                setFieldValue(fieldName, state.map(uploadState => uploadState.id === id ? { ...uploadState, progress } : uploadState));
+            };
+            xhr.onload = () => {
+                const state = getFieldState(fieldName).value;
+                if (xhr.status !== 200 && xhr.status !== 204) {
+                    setFieldValue(fieldName, state.filter(uploadState => (uploadState.id === id ? false : true)));
+                    return;
+                }
+                setFieldValue(fieldName, state.map(uploadState => uploadState.id === id
+                    ? { ...uploadState, progress: undefined, finished: true }
+                    : uploadState));
+            };
+            const formData = new FormData();
+            fields.forEach(({ key, value }) => {
+                formData.append(key, value);
+            });
+            formData.append("file", file);
+            xhr.send(formData);
+        })
+            .catch(console.error);
+    };
+    return (_jsxs(Form, { children: [typeOfRepresentation == null && (_jsx(LakeLabel, { label: t("supportingDoc.whoAreYou"), render: () => (_jsxs(LakeButtonGroup, { children: [_jsx(Pressable, { onPress: () => setIsOther(false), children: _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeRadio, { value: !isOther, color: "current" }), _jsx(Space, { width: 12 }), _jsx(LakeText, { children: t("supportingDoc.legalRepresentative") })] }) }), _jsx(Space, { width: 24 }), _jsx(Pressable, { onPress: () => setIsOther(true), children: _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeRadio, { value: isOther, color: "current" }), _jsx(Space, { width: 12 }), _jsx(LakeText, { children: t("supportingDoc.other") })] }) })] })) })), requiredDocumentTypes.some(t => t === "CompanyRegistration") && (_jsxs(_Fragment, { children: [_jsx(LakeLabel, { label: t("supportingDoc.companyRegistration"), help: _jsx(Help, { text: "supportingDoc.companyRegistration.description" }), render: () => (_jsx(Field, { name: "CompanyRegistration", children: ({ value, onChange, error }) => (_jsx(UploadArea, { layout: "horizontal", error: error, onDropAccepted: files => {
+                                    onChange([...value, { id: NO_ID_YET }]);
+                                    handleUpload(files, "CompanyRegistration");
+                                }, documents: value, accept: ACCEPTED_FORMATS, icon: "document-regular", description: t("supportingDoc.documentTypes"), maxSize: MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE })) })) }), _jsx(Space, { height: 24 })] })), requiredDocumentTypes.some(t => t === "AssociationRegistration") && (_jsxs(_Fragment, { children: [_jsx(LakeLabel, { label: t("supportingDoc.associationRegistration"), help: _jsx(Help, { text: "supportingDoc.associationRegistration.description" }), render: () => (_jsx(Field, { name: "AssociationRegistration", children: ({ value, onChange, error }) => (_jsx(UploadArea, { layout: "horizontal", onDropAccepted: files => {
+                                    onChange([...value, { id: NO_ID_YET }]);
+                                    handleUpload(files, "AssociationRegistration");
+                                }, error: error, documents: value, accept: ACCEPTED_FORMATS, icon: "document-regular", description: t("supportingDoc.documentTypes"), maxSize: MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE })) })) }), _jsx(Space, { height: 24 })] })), requiredDocumentTypes.some(t => t === "SignedStatus") && (_jsxs(_Fragment, { children: [_jsx(LakeLabel, { label: t("supportingDoc.signedStatus"), help: _jsx(Help, { text: "supportingDoc.signedStatus.description" }), render: () => (_jsx(Field, { name: "SignedStatus", children: ({ value, onChange, error }) => (_jsx(UploadArea, { layout: "horizontal", onDropAccepted: files => {
+                                    onChange([...value, { id: NO_ID_YET }]);
+                                    handleUpload(files, "SignedStatus");
+                                }, error: error, documents: value, accept: ACCEPTED_FORMATS, icon: "document-regular", description: t("supportingDoc.documentTypes"), maxSize: MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE })) })) }), _jsx(Space, { height: 24 })] })), requiredDocumentTypes.length === 0 && !isOther ? (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(LakeText, { children: t("supportingDoc.noRequiredDocuments") }), _jsx(Space, { height: 24 })] })) : null, typeOfRepresentation === "LegalRepresentative" || isOther ? (_jsxs(_Fragment, { children: [_jsx(LakeLabel, { label: t("supportingDoc.proofOfIdentity"), help: _jsx(Help, { width: 600, text: "supportingDoc.proofOfIdentity.description" }), render: () => (_jsx(Field, { name: "ProofOfIdentity", children: ({ value, onChange, error }) => (_jsx(UploadArea, { layout: "horizontal", onDropAccepted: files => {
+                                    onChange([...value, { id: NO_ID_YET }]);
+                                    handleUpload(files, "ProofOfIdentity");
+                                }, error: error, documents: value, accept: ACCEPTED_FORMATS, icon: "document-regular", description: t("supportingDoc.documentTypes"), maxSize: MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE })) })) }), _jsx(Space, { height: 24 }), _jsx(LakeLabel, { label: t("supportingDoc.powerAttornySigned"), help: _jsx(Help, { text: "supportingDoc.powerAttornySigned.description", onPress: () => setShowPowerOfAttorneyModal(true) }), render: () => (_jsx(Field, { name: "Other", children: ({ value, onChange, error }) => (_jsx(UploadArea, { layout: "horizontal", onDropAccepted: files => {
+                                    onChange([...value, { id: NO_ID_YET }]);
+                                    handleUpload(files, "Other");
+                                }, error: error, documents: value, accept: ACCEPTED_FORMATS, icon: "document-regular", description: t("supportingDoc.documentTypes"), maxSize: MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE })) })) }), _jsxs(LakeModal, { visible: showPowerOfAttorneyModal, title: t("supportingDoc.powerAttorney"), icon: "document-regular", onPressClose: () => setShowPowerOfAttorneyModal(false), children: [_jsx(LakeText, { children: t("supportingDoc.powerAttornySigned.description") }), _jsx(Space, { height: 16 }), _jsx(LakeButtonGroup, { paddingBottom: 0, children: _jsx(LakeButton, { grow: true, color: "current", onPress: () => window.open(`/power-of-attorney-template/${country === "FRA" ? "fr" : "en"}.pdf`), children: t("supportingDoc.downloadTemplate") }) })] })] })) : null] }));
+});

package/src/components/UploadArea.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { IconName } from "@swan-io/lake/src/components/Icon";
+import { DropzoneOptions } from "react-dropzone";
+export type UploadFileStatus = {
+    id: string;
+    name?: string;
+    fileUrl?: string;
+    progress?: number;
+    finished?: boolean;
+};
+type Props = {
+    icon: IconName;
+    documents?: UploadFileStatus[];
+    onRemoveFile?: (fileId: string) => void;
+    accept: string[];
+    value?: File | Element;
+    disabled?: boolean;
+    onDropAccepted?: DropzoneOptions["onDropAccepted"];
+    onDropRejected?: DropzoneOptions["onDropRejected"];
+    layout?: "vertical" | "horizontal";
+    description?: string;
+    error?: string;
+    maxSize?: number;
+};
+export declare const UploadArea: ({ icon, accept, value, documents, disabled, onRemoveFile, onDropAccepted, onDropRejected, layout, description, error, maxSize, }: Props) => JSX.Element;
+export {};