@webiny/admin-ui 6.0.0-alpha.4 → 6.0.0-rc.0

package/MultiAutoComplete/primitives/useMultiAutoComplete.d.ts

@@ -1,4 +1,4 @@
-import type { MultiAutoCompletePrimitiveProps } from "./MultiAutoCompletePrimitive";
+import type { MultiAutoCompletePrimitiveProps } from "./MultiAutoCompletePrimitive.js";
 export declare const useMultiAutoComplete: (props: MultiAutoCompletePrimitiveProps) => {
     vm: {
         inputVm: {
@@ -7,11 +7,11 @@ export declare const useMultiAutoComplete: (props: MultiAutoCompletePrimitivePro
             displayResetAction: boolean;
         };
         selectedOptionsVm: {
-            options: import("../../Command").CommandOptionFormatted[];
+            options: import("../../Command/index.js").CommandOptionFormatted[];
             empty: boolean;
         };
         optionsListVm: {
-            options: import("../../Command").CommandOptionFormatted[];
+            options: import("../../Command/index.js").CommandOptionFormatted[];
             emptyMessage: any;
             loadingMessage: any;
             open: boolean;
@@ -22,24 +22,11 @@ export declare const useMultiAutoComplete: (props: MultiAutoCompletePrimitivePro
         };
     } | {
         temporaryOptionVm: {
-            option?: import("../../Command").CommandOptionFormatted | undefined;
-        };
-        inputVm: {
-            placeholder: string;
-            value: string;
-            displayResetAction: boolean;
-        };
-        selectedOptionsVm: {
-            options: import("../../Command").CommandOptionFormatted[];
-            empty: boolean;
-        };
-        optionsListVm: {
-            options: import("../../Command").CommandOptionFormatted[];
-            emptyMessage: any;
-            loadingMessage: any;
-            open: boolean;
-            empty: boolean;
+            option?: import("../../Command/index.js").CommandOptionFormatted;
         };
+        inputVm: import("./presenters/MultiAutoCompleteInputPresenter.js").IMultiAutoCompleteInputPresenter["vm"];
+        selectedOptionsVm: import("./presenters/MultiAutoCompleteSelectedOptionsPresenter.js").IMultiAutoCompleteSelectedOptionsPresenter["vm"];
+        optionsListVm: import("./presenters/MultiAutoCompleteListOptionsPresenter.js").IMultiAutoCompleteListOptionsPresenter["vm"];
     };
     setSelectedOption: ((value: string) => void) | ((value: string) => void);
     removeSelectedOption: ((value: string) => void) | ((value: string) => void);

package/MultiAutoComplete/primitives/useMultiAutoComplete.js

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { autorun } from "mobx";
-import { MultiAutoCompleteInputPresenter, MultiAutoCompleteListOptionsPresenter, MultiAutoCompleteListOptionsPresenterWithUniqueValues, MultiAutoCompletePresenter, MultiAutoCompletePresenterWithFreeInput, MultiAutoCompleteSelectedOptionPresenter } from "./presenters";
-import { MultiAutoCompleteTemporaryOptionPresenter } from "./presenters/MultiAutoCompleteTemporaryOptionPresenter";
+import { MultiAutoCompleteInputPresenter, MultiAutoCompleteListOptionsPresenter, MultiAutoCompleteListOptionsPresenterWithUniqueValues, MultiAutoCompletePresenter, MultiAutoCompletePresenterWithFreeInput, MultiAutoCompleteSelectedOptionPresenter } from "./presenters/index.js";
+import { MultiAutoCompleteTemporaryOptionPresenter } from "./presenters/MultiAutoCompleteTemporaryOptionPresenter.js";
 export const useMultiAutoComplete = props => {
   const params = useMemo(() => ({
     displayResetAction: props.displayResetAction,

package/MultiAutoComplete/primitives/useMultiAutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useState","autorun","MultiAutoCompleteInputPresenter","MultiAutoCompleteListOptionsPresenter","MultiAutoCompleteListOptionsPresenterWithUniqueValues","MultiAutoCompletePresenter","MultiAutoCompletePresenterWithFreeInput","MultiAutoCompleteSelectedOptionPresenter","MultiAutoCompleteTemporaryOptionPresenter","useMultiAutoComplete","props","params","displayResetAction","emptyMessage","loadingMessage","initialMessage","onOpenChange","onValueSearch","onValuesChange","onValuesReset","options","placeholder","values","presenter","optionsListPresenter","optionsListWithUniqueValues","inputPresenter","selectedOptionsPresenter","uniqueValues","allowFreeInput","temporaryOptionsPresenter","withFreeInputPresenter","init","vm","setVm","setSelectedOption","removeSelectedOption","searchOption","resetSelectedOptions","setListOpenState","createOption"],"sources":["useMultiAutoComplete.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { MultiAutoCompletePrimitiveProps } from \"./MultiAutoCompletePrimitive\";\nimport type { MultiAutoCompletePresenterParams } from \"./presenters\";\nimport {\n    MultiAutoCompleteInputPresenter,\n    MultiAutoCompleteListOptionsPresenter,\n    MultiAutoCompleteListOptionsPresenterWithUniqueValues,\n    MultiAutoCompletePresenter,\n    MultiAutoCompletePresenterWithFreeInput,\n    MultiAutoCompleteSelectedOptionPresenter\n} from \"./presenters\";\nimport { MultiAutoCompleteTemporaryOptionPresenter } from \"~/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter\";\n\nexport const useMultiAutoComplete = (props: MultiAutoCompletePrimitiveProps) => {\n    const params: MultiAutoCompletePresenterParams = useMemo(\n        () => ({\n            displayResetAction: props.displayResetAction,\n            emptyMessage: props.emptyMessage,\n            loadingMessage: props.loadingMessage,\n            initialMessage: props.initialMessage,\n            onOpenChange: props.onOpenChange,\n            onValueSearch: props.onValueSearch,\n            onValuesChange: props.onValuesChange,\n            onValuesReset: props.onValuesReset,\n            options: props.options,\n            placeholder: props.placeholder,\n            values: props.values\n        }),\n        [\n            props.displayResetAction,\n            props.emptyMessage,\n            props.loadingMessage,\n            props.initialMessage,\n            props.onOpenChange,\n            props.onValueSearch,\n            props.onValuesChange,\n            props.onValuesReset,\n            props.options,\n            props.placeholder,\n            props.values\n        ]\n    );\n\n    const presenter = useMemo(() => {\n        const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();\n        const optionsListWithUniqueValues =\n            new MultiAutoCompleteListOptionsPresenterWithUniqueValues(optionsListPresenter);\n\n        const inputPresenter = new MultiAutoCompleteInputPresenter();\n        const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();\n\n        let presenter = new MultiAutoCompletePresenter(\n            inputPresenter,\n            selectedOptionsPresenter,\n            optionsListPresenter\n        );\n\n        if (props?.uniqueValues) {\n            presenter = new MultiAutoCompletePresenter(\n                inputPresenter,\n                selectedOptionsPresenter,\n                optionsListWithUniqueValues\n            );\n        }\n\n        if (props?.allowFreeInput) {\n            const temporaryOptionsPresenter = new MultiAutoCompleteTemporaryOptionPresenter();\n            const withFreeInputPresenter = new MultiAutoCompletePresenterWithFreeInput(\n                temporaryOptionsPresenter,\n                presenter\n            );\n            withFreeInputPresenter.init(params);\n            return withFreeInputPresenter;\n        } else {\n            presenter.init(params);\n            return presenter;\n        }\n    }, [props.allowFreeInput, props.uniqueValues]);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params, presenter]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm,\n        setSelectedOption: presenter.setSelectedOption,\n        removeSelectedOption: presenter.removeSelectedOption,\n        searchOption: presenter.searchOption,\n        resetSelectedOptions: presenter.resetSelectedOptions,\n        setListOpenState: presenter.setListOpenState,\n        createOption: presenter.createOption\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useEffect","useMemo","useState","autorun","MultiAutoCompleteInputPresenter","MultiAutoCompleteListOptionsPresenter","MultiAutoCompleteListOptionsPresenterWithUniqueValues","MultiAutoCompletePresenter","MultiAutoCompletePresenterWithFreeInput","MultiAutoCompleteSelectedOptionPresenter","MultiAutoCompleteTemporaryOptionPresenter","useMultiAutoComplete","props","params","displayResetAction","emptyMessage","loadingMessage","initialMessage","onOpenChange","onValueSearch","onValuesChange","onValuesReset","options","placeholder","values","presenter","optionsListPresenter","optionsListWithUniqueValues","inputPresenter","selectedOptionsPresenter","uniqueValues","allowFreeInput","temporaryOptionsPresenter","withFreeInputPresenter","init","vm","setVm","setSelectedOption","removeSelectedOption","searchOption","resetSelectedOptions","setListOpenState","createOption"],"sources":["useMultiAutoComplete.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { MultiAutoCompletePrimitiveProps } from \"./MultiAutoCompletePrimitive.js\";\nimport type { MultiAutoCompletePresenterParams } from \"./presenters/index.js\";\nimport {\n    MultiAutoCompleteInputPresenter,\n    MultiAutoCompleteListOptionsPresenter,\n    MultiAutoCompleteListOptionsPresenterWithUniqueValues,\n    MultiAutoCompletePresenter,\n    MultiAutoCompletePresenterWithFreeInput,\n    MultiAutoCompleteSelectedOptionPresenter\n} from \"./presenters/index.js\";\nimport { MultiAutoCompleteTemporaryOptionPresenter } from \"~/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter.js\";\n\nexport const useMultiAutoComplete = (props: MultiAutoCompletePrimitiveProps) => {\n    const params: MultiAutoCompletePresenterParams = useMemo(\n        () => ({\n            displayResetAction: props.displayResetAction,\n            emptyMessage: props.emptyMessage,\n            loadingMessage: props.loadingMessage,\n            initialMessage: props.initialMessage,\n            onOpenChange: props.onOpenChange,\n            onValueSearch: props.onValueSearch,\n            onValuesChange: props.onValuesChange,\n            onValuesReset: props.onValuesReset,\n            options: props.options,\n            placeholder: props.placeholder,\n            values: props.values\n        }),\n        [\n            props.displayResetAction,\n            props.emptyMessage,\n            props.loadingMessage,\n            props.initialMessage,\n            props.onOpenChange,\n            props.onValueSearch,\n            props.onValuesChange,\n            props.onValuesReset,\n            props.options,\n            props.placeholder,\n            props.values\n        ]\n    );\n\n    const presenter = useMemo(() => {\n        const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();\n        const optionsListWithUniqueValues =\n            new MultiAutoCompleteListOptionsPresenterWithUniqueValues(optionsListPresenter);\n\n        const inputPresenter = new MultiAutoCompleteInputPresenter();\n        const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();\n\n        let presenter = new MultiAutoCompletePresenter(\n            inputPresenter,\n            selectedOptionsPresenter,\n            optionsListPresenter\n        );\n\n        if (props?.uniqueValues) {\n            presenter = new MultiAutoCompletePresenter(\n                inputPresenter,\n                selectedOptionsPresenter,\n                optionsListWithUniqueValues\n            );\n        }\n\n        if (props?.allowFreeInput) {\n            const temporaryOptionsPresenter = new MultiAutoCompleteTemporaryOptionPresenter();\n            const withFreeInputPresenter = new MultiAutoCompletePresenterWithFreeInput(\n                temporaryOptionsPresenter,\n                presenter\n            );\n            withFreeInputPresenter.init(params);\n            return withFreeInputPresenter;\n        } else {\n            presenter.init(params);\n            return presenter;\n        }\n    }, [props.allowFreeInput, props.uniqueValues]);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params, presenter]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm,\n        setSelectedOption: presenter.setSelectedOption,\n        removeSelectedOption: presenter.removeSelectedOption,\n        searchOption: presenter.searchOption,\n        resetSelectedOptions: presenter.resetSelectedOptions,\n        setListOpenState: presenter.setListOpenState,\n        createOption: presenter.createOption\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/MultiFilePicker/MultiFilePicker.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { type MultiFilePickerPrimitiveProps } from "./primitives";
-import { type FormComponentProps } from "../FormComponent";
+import { type MultiFilePickerPrimitiveProps } from "./primitives/index.js";
+import { type FormComponentProps } from "../FormComponent/index.js";
 type MultiFilePickerProps = MultiFilePickerPrimitiveProps & FormComponentProps;
 declare const MultiFilePicker: (({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element) & {
     original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element;
@@ -15,66 +15,66 @@ declare const MultiFilePicker: (({ label, description, note, required, disabled,
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element) & {
         original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
     Preview: {
-        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element) & {
-            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element;
+        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
+            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element;
+            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element) & {
-            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element;
+        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element;
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        TextOnly: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element) & {
-            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element;
+        TextOnly: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/primitives/components/index.js").TextOnlyPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/primitives/components/index.js").TextOnlyPreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element;
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/primitives/components/index.js").TextOnlyPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/primitives/components/index.js").TextOnlyPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/primitives/components/index.js").TextOnlyPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/primitives/components/index.js").TextOnlyPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;

package/MultiFilePicker/MultiFilePicker.js

@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo } from "react";
-import { makeDecoratable, withStaticProps } from "../utils";
-import { MultiFilePickerPrimitive } from "./primitives";
-import { FormComponentErrorMessage, FormComponentNote } from "../FormComponent";
-import { FilePickerDescription, FilePickerLabel, ImagePreview, RichItemPreview, TextOnlyPreview } from "../FilePicker/primitives/components";
+import { makeDecoratable, withStaticProps } from "../utils.js";
+import { MultiFilePickerPrimitive } from "./primitives/index.js";
+import { FormComponentErrorMessage, FormComponentNote } from "../FormComponent/index.js";
+import { FilePickerDescription, FilePickerLabel, ImagePreview, RichItemPreview, TextOnlyPreview } from "../FilePicker/primitives/components/index.js";
 const BaseMultiFilePicker = ({
   label,
   description,
@@ -30,7 +30,7 @@ const BaseMultiFilePicker = ({
     originalOnBlur && originalOnBlur(e);
   }, [validate, originalOnBlur]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full"
+    className: "w-full"
   }, type !== "area" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilePickerLabel, {
     label: label,
     required: required,

package/MultiFilePicker/MultiFilePicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","makeDecoratable","withStaticProps","MultiFilePickerPrimitive","FormComponentErrorMessage","FormComponentNote","FilePickerDescription","FilePickerLabel","ImagePreview","RichItemPreview","TextOnlyPreview","BaseMultiFilePicker","label","description","note","required","disabled","validation","validate","onBlur","originalOnBlur","type","props","isValid","validationIsValid","message","validationMessage","invalid","e","persist","createElement","className","Fragment","Object","assign","text","DecoratableMultiFilePicker","MultiFilePicker","Preview","Image","RichItem","TextOnly"],"sources":["MultiFilePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport { MultiFilePickerPrimitive, type MultiFilePickerPrimitiveProps } from \"./primitives\";\nimport {\n    FormComponentErrorMessage,\n    FormComponentNote,\n    type FormComponentProps\n} from \"~/FormComponent\";\nimport {\n    FilePickerDescription,\n    FilePickerLabel,\n    ImagePreview,\n    RichItemPreview,\n    TextOnlyPreview\n} from \"~/FilePicker/primitives/components\";\n\ntype MultiFilePickerProps = MultiFilePickerPrimitiveProps & FormComponentProps;\n\nconst BaseMultiFilePicker = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    validate,\n    onBlur: originalOnBlur,\n    type = \"area\",\n    ...props\n}: MultiFilePickerProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    const onBlur = useCallback(\n        async (e: React.FocusEvent<HTMLInputElement>) => {\n            if (validate) {\n                // Since we are accessing event in an async operation, we need to persist it.\n                // See https://reactjs.org/docs/events.html#event-pooling.\n                e.persist();\n                await validate();\n            }\n            originalOnBlur && originalOnBlur(e);\n        },\n        [validate, originalOnBlur]\n    );\n\n    return (\n        <div className={\"wby-w-full\"}>\n            {type !== \"area\" && (\n                <>\n                    <FilePickerLabel\n                        label={label}\n                        required={required}\n                        disabled={disabled}\n                        invalid={invalid}\n                    />\n                    <FilePickerDescription description={description} disabled={disabled} />\n                </>\n            )}\n            <MultiFilePickerPrimitive\n                {...props}\n                label={label}\n                description={description}\n                disabled={disabled}\n                invalid={invalid}\n                onBlur={onBlur}\n                type={type}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst DecoratableMultiFilePicker = makeDecoratable(\"MultiFilePicker\", BaseMultiFilePicker);\n\nconst MultiFilePicker = withStaticProps(DecoratableMultiFilePicker, {\n    Preview: {\n        Image: ImagePreview,\n        RichItem: RichItemPreview,\n        TextOnly: TextOnlyPreview\n    }\n});\nexport { MultiFilePicker, type MultiFilePickerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,eAAe,EAAEC,eAAe;AACzC,SAASC,wBAAwB;AACjC,SACIC,yBAAyB,EACzBC,iBAAiB;AAGrB,SACIC,qBAAqB,EACrBC,eAAe,EACfC,YAAY,EACZC,eAAe,EACfC,eAAe;AAKnB,MAAMC,mBAAmB,GAAGA,CAAC;EACzBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,MAAM,EAAEC,cAAc;EACtBC,IAAI,GAAG,MAAM;EACb,GAAGC;AACe,CAAC,KAAK;EACxB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGT,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMU,OAAO,GAAG3B,OAAO,CAAC,MAAMwB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,MAAML,MAAM,GAAGpB,WAAW,CACtB,MAAO6B,CAAqC,IAAK;IAC7C,IAAIV,QAAQ,EAAE;MACV;MACA;MACAU,CAAC,CAACC,OAAO,CAAC,CAAC;MACX,MAAMX,QAAQ,CAAC,CAAC;IACpB;IACAE,cAAc,IAAIA,cAAc,CAACQ,CAAC,CAAC;EACvC,CAAC,EACD,CAACV,QAAQ,EAAEE,cAAc,CAC7B,CAAC;EAED,oBACItB,KAAA,CAAAgC,aAAA;IAAKC,SAAS,EAAE;EAAa,GACxBV,IAAI,KAAK,MAAM,iBACZvB,KAAA,CAAAgC,aAAA,CAAAhC,KAAA,CAAAkC,QAAA,qBACIlC,KAAA,CAAAgC,aAAA,CAACvB,eAAe;IACZK,KAAK,EAAEA,KAAM;IACbG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACF7B,KAAA,CAAAgC,aAAA,CAACxB,qBAAqB;IAACO,WAAW,EAAEA,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACxE,CACL,eACDlB,KAAA,CAAAgC,aAAA,CAAC3B,wBAAwB,EAAA8B,MAAA,CAAAC,MAAA,KACjBZ,KAAK;IACTV,KAAK,EAAEA,KAAM;IACbC,WAAW,EAAEA,WAAY;IACzBG,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA,OAAQ;IACjBR,MAAM,EAAEA,MAAO;IACfE,IAAI,EAAEA;EAAK,EACd,CAAC,eACFvB,KAAA,CAAAgC,aAAA,CAAC1B,yBAAyB;IACtB+B,IAAI,EAAET,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBX,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFlB,KAAA,CAAAgC,aAAA,CAACzB,iBAAiB;IAAC8B,IAAI,EAAErB,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMoB,0BAA0B,GAAGnC,eAAe,CAAC,iBAAiB,EAAEU,mBAAmB,CAAC;AAE1F,MAAM0B,eAAe,GAAGnC,eAAe,CAACkC,0BAA0B,EAAE;EAChEE,OAAO,EAAE;IACLC,KAAK,EAAE/B,YAAY;IACnBgC,QAAQ,EAAE/B,eAAe;IACzBgC,QAAQ,EAAE/B;EACd;AACJ,CAAC,CAAC;AACF,SAAS2B,eAAe","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useMemo","makeDecoratable","withStaticProps","MultiFilePickerPrimitive","FormComponentErrorMessage","FormComponentNote","FilePickerDescription","FilePickerLabel","ImagePreview","RichItemPreview","TextOnlyPreview","BaseMultiFilePicker","label","description","note","required","disabled","validation","validate","onBlur","originalOnBlur","type","props","isValid","validationIsValid","message","validationMessage","invalid","e","persist","createElement","className","Fragment","Object","assign","text","DecoratableMultiFilePicker","MultiFilePicker","Preview","Image","RichItem","TextOnly"],"sources":["MultiFilePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport {\n    MultiFilePickerPrimitive,\n    type MultiFilePickerPrimitiveProps\n} from \"./primitives/index.js\";\nimport {\n    FormComponentErrorMessage,\n    FormComponentNote,\n    type FormComponentProps\n} from \"~/FormComponent/index.js\";\nimport {\n    FilePickerDescription,\n    FilePickerLabel,\n    ImagePreview,\n    RichItemPreview,\n    TextOnlyPreview\n} from \"~/FilePicker/primitives/components/index.js\";\n\ntype MultiFilePickerProps = MultiFilePickerPrimitiveProps & FormComponentProps;\n\nconst BaseMultiFilePicker = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    validate,\n    onBlur: originalOnBlur,\n    type = \"area\",\n    ...props\n}: MultiFilePickerProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    const onBlur = useCallback(\n        async (e: React.FocusEvent<HTMLInputElement>) => {\n            if (validate) {\n                // Since we are accessing event in an async operation, we need to persist it.\n                // See https://reactjs.org/docs/events.html#event-pooling.\n                e.persist();\n                await validate();\n            }\n            originalOnBlur && originalOnBlur(e);\n        },\n        [validate, originalOnBlur]\n    );\n\n    return (\n        <div className={\"w-full\"}>\n            {type !== \"area\" && (\n                <>\n                    <FilePickerLabel\n                        label={label}\n                        required={required}\n                        disabled={disabled}\n                        invalid={invalid}\n                    />\n                    <FilePickerDescription description={description} disabled={disabled} />\n                </>\n            )}\n            <MultiFilePickerPrimitive\n                {...props}\n                label={label}\n                description={description}\n                disabled={disabled}\n                invalid={invalid}\n                onBlur={onBlur}\n                type={type}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst DecoratableMultiFilePicker = makeDecoratable(\"MultiFilePicker\", BaseMultiFilePicker);\n\nconst MultiFilePicker = withStaticProps(DecoratableMultiFilePicker, {\n    Preview: {\n        Image: ImagePreview,\n        RichItem: RichItemPreview,\n        TextOnly: TextOnlyPreview\n    }\n});\nexport { MultiFilePicker, type MultiFilePickerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,eAAe,EAAEC,eAAe;AACzC,SACIC,wBAAwB;AAG5B,SACIC,yBAAyB,EACzBC,iBAAiB;AAGrB,SACIC,qBAAqB,EACrBC,eAAe,EACfC,YAAY,EACZC,eAAe,EACfC,eAAe;AAKnB,MAAMC,mBAAmB,GAAGA,CAAC;EACzBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,MAAM,EAAEC,cAAc;EACtBC,IAAI,GAAG,MAAM;EACb,GAAGC;AACe,CAAC,KAAK;EACxB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGT,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMU,OAAO,GAAG3B,OAAO,CAAC,MAAMwB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,MAAML,MAAM,GAAGpB,WAAW,CACtB,MAAO6B,CAAqC,IAAK;IAC7C,IAAIV,QAAQ,EAAE;MACV;MACA;MACAU,CAAC,CAACC,OAAO,CAAC,CAAC;MACX,MAAMX,QAAQ,CAAC,CAAC;IACpB;IACAE,cAAc,IAAIA,cAAc,CAACQ,CAAC,CAAC;EACvC,CAAC,EACD,CAACV,QAAQ,EAAEE,cAAc,CAC7B,CAAC;EAED,oBACItB,KAAA,CAAAgC,aAAA;IAAKC,SAAS,EAAE;EAAS,GACpBV,IAAI,KAAK,MAAM,iBACZvB,KAAA,CAAAgC,aAAA,CAAAhC,KAAA,CAAAkC,QAAA,qBACIlC,KAAA,CAAAgC,aAAA,CAACvB,eAAe;IACZK,KAAK,EAAEA,KAAM;IACbG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACF7B,KAAA,CAAAgC,aAAA,CAACxB,qBAAqB;IAACO,WAAW,EAAEA,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACxE,CACL,eACDlB,KAAA,CAAAgC,aAAA,CAAC3B,wBAAwB,EAAA8B,MAAA,CAAAC,MAAA,KACjBZ,KAAK;IACTV,KAAK,EAAEA,KAAM;IACbC,WAAW,EAAEA,WAAY;IACzBG,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA,OAAQ;IACjBR,MAAM,EAAEA,MAAO;IACfE,IAAI,EAAEA;EAAK,EACd,CAAC,eACFvB,KAAA,CAAAgC,aAAA,CAAC1B,yBAAyB;IACtB+B,IAAI,EAAET,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBX,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFlB,KAAA,CAAAgC,aAAA,CAACzB,iBAAiB;IAAC8B,IAAI,EAAErB,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMoB,0BAA0B,GAAGnC,eAAe,CAAC,iBAAiB,EAAEU,mBAAmB,CAAC;AAE1F,MAAM0B,eAAe,GAAGnC,eAAe,CAACkC,0BAA0B,EAAE;EAChEE,OAAO,EAAE;IACLC,KAAK,EAAE/B,YAAY;IACnBgC,QAAQ,EAAE/B,eAAe;IACzBgC,QAAQ,EAAE/B;EACd;AACJ,CAAC,CAAC;AACF,SAAS2B,eAAe","ignoreList":[]}

package/MultiFilePicker/MultiFilePicker.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as MultiFilePickerStories from './MultiFilePicker.stories';
 

package/MultiFilePicker/MultiFilePicker.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { MultiFilePicker } from "./";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { MultiFilePicker } from "../MultiFilePicker/index.js";
 declare const meta: Meta<typeof MultiFilePicker>;
 export default meta;
 type Story = StoryObj<typeof MultiFilePicker>;

package/MultiFilePicker/MultiFilePicker.stories.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { MultiFilePicker } from "./";
-import { Providers } from "../Providers";
+import { MultiFilePicker } from "./index.js";
+import { AdminUiProvider } from "../AdminUiProvider/index.js";
 const getRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
 const createFileList = (size = 10) => {
   return Array.from({
@@ -41,7 +41,7 @@ const meta = {
   },
   render: args => {
     const [selectedFiles, setSelectedFiles] = useState([]);
-    return /*#__PURE__*/React.createElement(Providers, null, /*#__PURE__*/React.createElement(MultiFilePicker, Object.assign({}, args, {
+    return /*#__PURE__*/React.createElement(AdminUiProvider, null, /*#__PURE__*/React.createElement(MultiFilePicker, Object.assign({}, args, {
       values: selectedFiles,
       onSelectItem: () => setSelectedFiles(createFileList()),
       onReplaceItem: (_, index) => setSelectedFiles(prevState => {
@@ -297,7 +297,7 @@ export const Documentation = {
         });
       }
     }, [args.required, selectedFiles]);
-    return /*#__PURE__*/React.createElement(Providers, null, /*#__PURE__*/React.createElement(MultiFilePicker, Object.assign({}, args, {
+    return /*#__PURE__*/React.createElement(AdminUiProvider, null, /*#__PURE__*/React.createElement(MultiFilePicker, Object.assign({}, args, {
       values: selectedFiles,
       onSelectItem: handleSelect,
       onReplaceItem: handleReplace,
@@ -355,28 +355,23 @@ export const Documentation = {
       control: "object"
     },
     validation: {
-      description: "Validation state and message. Please refer to the example code for details on usage.",
-      control: "none"
+      description: "Validation state and message. Please refer to the example code for details on usage."
     },
     onSelectItem: {
       description: "Callback when user selects files - Please refer to the example code for details on usage.",
-      action: "onSelectItem",
-      control: "none"
+      action: "onSelectItem"
     },
     onReplaceItem: {
       description: "Callback when user replaces a file - Please refer to the example code for details on usage.",
-      action: "onReplaceItem",
-      control: "none"
+      action: "onReplaceItem"
     },
     onEditItem: {
       description: "Callback when user edits a file - Please refer to the example code for details on usage.",
-      action: "onEditItem",
-      control: "none"
+      action: "onEditItem"
     },
     onRemoveItem: {
       description: "Callback when user removes a file - Please refer to the example code for details on usage.",
-      action: "onRemoveItem",
-      control: "none"
+      action: "onRemoveItem"
     }
   }
 };

package/MultiFilePicker/MultiFilePicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","MultiFilePicker","Providers","getRandomNumber","min","max","Math","floor","random","createFileList","size","Array","from","length","_","index","width","height","fileSize","name","mimeType","url","meta","title","component","argTypes","onSelectItem","action","onEditItem","onRemoveItem","disabled","control","defaultValue","parameters","layout","render","args","selectedFiles","setSelectedFiles","createElement","Object","assign","values","onReplaceItem","prevState","slice","item","filter","value","i","alert","Default","AreaType","type","AreaWithLabel","label","AreaWithLabelRequired","required","AreaWithDescription","description","AreaWithNotes","note","AreaWithErrors","validation","isValid","message","AreaDisabled","AreaWithValidateFunction","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","isArray","formattedValues","map","split","pop","handleSelect","handleReplace","handleEdit","file","console","log","handleRemove","options"],"sources":["MultiFilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { type FileItemDto, MultiFilePicker } from \"~/MultiFilePicker\";\nimport { Providers } from \"~/Providers\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst createFileList = (size: number = 10): FileItemDto[] => {\n    return Array.from({ length: size }, (_, index) => {\n        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n        return {\n            name: `file-${index + 1}.jpg`,\n            mimeType: \"image/jpeg\",\n            size: fileSize,\n            url: `https://picsum.photos/${width}/${height}`\n        };\n    });\n};\n\nconst meta: Meta<typeof MultiFilePicker> = {\n    title: \"Components/Form/Multi FilePicker\",\n    component: MultiFilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        return (\n            <Providers>\n                <MultiFilePicker\n                    {...args}\n                    values={selectedFiles}\n                    onSelectItem={() => setSelectedFiles(createFileList())}\n                    onReplaceItem={(_, index) =>\n                        setSelectedFiles(prevState => {\n                            if (!prevState) {\n                                return [];\n                            }\n\n                            return [\n                                ...prevState.slice(0, index),\n                                ...createFileList(1),\n                                ...prevState.slice(index + 1)\n                            ];\n                        })\n                    }\n                    onRemoveItem={item =>\n                        setSelectedFiles(prevState =>\n                            prevState?.filter(value => value.name !== item?.name)\n                        )\n                    }\n                    onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}\n                />\n            </Providers>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiFilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.values changes\n        useEffect(() => {\n            if (!args.values) {\n                setSelectedFiles([]);\n            } else if (Array.isArray(args.values)) {\n                // Convert any string values to FileItemDto format\n                const formattedValues = args.values.map(value => {\n                    if (typeof value === \"string\") {\n                        return {\n                            name: value.split(\"/\").pop() || \"file\",\n                            mimeType: \"image/jpeg\", // Default mime type\n                            size: 0,\n                            url: value\n                        };\n                    }\n                    return value as FileItemDto;\n                });\n                setSelectedFiles(formattedValues);\n            }\n        }, [args.values]);\n\n        const handleSelect = () => {\n            setSelectedFiles(createFileList(3));\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleReplace = (_: any, index: number) => {\n            setSelectedFiles(prevState => {\n                if (!prevState) {\n                    return [];\n                }\n\n                return [\n                    ...prevState.slice(0, index),\n                    ...createFileList(1),\n                    ...prevState.slice(index + 1)\n                ];\n            });\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any, index: number) => {\n            if (file) {\n                console.log(\"Editing file:\", file, \"at index:\", index);\n                alert(`Editing File: ${file.name} at position ${index}`);\n            }\n        };\n\n        const handleRemove = (file: any, index: number) => {\n            setSelectedFiles(prevState => prevState?.filter((_, i) => i !== index));\n\n            if (args.required && (!selectedFiles || selectedFiles.length <= 1)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!selectedFiles || selectedFiles.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFiles]);\n\n        return (\n            <Providers>\n                <MultiFilePicker\n                    {...args}\n                    values={selectedFiles}\n                    onSelectItem={handleSelect}\n                    onReplaceItem={handleReplace}\n                    onRemoveItem={handleRemove}\n                    onEditItem={handleEdit}\n                    validation={validation}\n                />\n            </Providers>\n        );\n    },\n    args: {\n        label: \"Upload Images\",\n        required: true,\n        disabled: false,\n        description: \"Select files to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB per file\",\n        type: \"area\",\n        values: [],\n        validation: undefined,\n        onSelectItem: undefined,\n        onReplaceItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\",\n            defaultValue: \"Upload Images\"\n        },\n        type: {\n            description: \"The type of file picker to display\",\n            control: \"select\",\n            options: [\"area\", \"compact\"],\n            defaultValue: \"area\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the field when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        values: {\n            description: \"Array of selected files\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Validation state and message. Please refer to the example code for details on usage.\",\n            control: \"none\"\n        },\n        onSelectItem: {\n            description:\n                \"Callback when user selects files - Please refer to the example code for details on usage.\",\n            action: \"onSelectItem\",\n            control: \"none\"\n        },\n        onReplaceItem: {\n            description:\n                \"Callback when user replaces a file - Please refer to the example code for details on usage.\",\n            action: \"onReplaceItem\",\n            control: \"none\"\n        },\n        onEditItem: {\n            description:\n                \"Callback when user edits a file - Please refer to the example code for details on usage.\",\n            action: \"onEditItem\",\n            control: \"none\"\n        },\n        onRemoveItem: {\n            description:\n                \"Callback when user removes a file - Please refer to the example code for details on usage.\",\n            action: \"onRemoveItem\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","useEffect","MultiFilePicker","AdminUiProvider","getRandomNumber","min","max","Math","floor","random","createFileList","size","Array","from","length","_","index","width","height","fileSize","name","mimeType","url","meta","title","component","argTypes","onSelectItem","action","onEditItem","onRemoveItem","disabled","control","defaultValue","parameters","layout","render","args","selectedFiles","setSelectedFiles","createElement","Object","assign","values","onReplaceItem","prevState","slice","item","filter","value","i","alert","Default","AreaType","type","AreaWithLabel","label","AreaWithLabelRequired","required","AreaWithDescription","description","AreaWithNotes","note","AreaWithErrors","validation","isValid","message","AreaDisabled","AreaWithValidateFunction","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","isArray","formattedValues","map","split","pop","handleSelect","handleReplace","handleEdit","file","console","log","handleRemove","options"],"sources":["MultiFilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { type FileItemDto, MultiFilePicker } from \"~/MultiFilePicker/index.js\";\nimport { AdminUiProvider } from \"~/AdminUiProvider/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst createFileList = (size: number = 10): FileItemDto[] => {\n    return Array.from({ length: size }, (_, index) => {\n        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n        return {\n            name: `file-${index + 1}.jpg`,\n            mimeType: \"image/jpeg\",\n            size: fileSize,\n            url: `https://picsum.photos/${width}/${height}`\n        };\n    });\n};\n\nconst meta: Meta<typeof MultiFilePicker> = {\n    title: \"Components/Form/Multi FilePicker\",\n    component: MultiFilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        return (\n            <AdminUiProvider>\n                <MultiFilePicker\n                    {...args}\n                    values={selectedFiles}\n                    onSelectItem={() => setSelectedFiles(createFileList())}\n                    onReplaceItem={(_, index) =>\n                        setSelectedFiles(prevState => {\n                            if (!prevState) {\n                                return [];\n                            }\n\n                            return [\n                                ...prevState.slice(0, index),\n                                ...createFileList(1),\n                                ...prevState.slice(index + 1)\n                            ];\n                        })\n                    }\n                    onRemoveItem={item =>\n                        setSelectedFiles(prevState =>\n                            prevState?.filter(value => value.name !== item?.name)\n                        )\n                    }\n                    onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}\n                />\n            </AdminUiProvider>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiFilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.values changes\n        useEffect(() => {\n            if (!args.values) {\n                setSelectedFiles([]);\n            } else if (Array.isArray(args.values)) {\n                // Convert any string values to FileItemDto format\n                const formattedValues = args.values.map(value => {\n                    if (typeof value === \"string\") {\n                        return {\n                            name: value.split(\"/\").pop() || \"file\",\n                            mimeType: \"image/jpeg\", // Default mime type\n                            size: 0,\n                            url: value\n                        };\n                    }\n                    return value as FileItemDto;\n                });\n                setSelectedFiles(formattedValues);\n            }\n        }, [args.values]);\n\n        const handleSelect = () => {\n            setSelectedFiles(createFileList(3));\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleReplace = (_: any, index: number) => {\n            setSelectedFiles(prevState => {\n                if (!prevState) {\n                    return [];\n                }\n\n                return [\n                    ...prevState.slice(0, index),\n                    ...createFileList(1),\n                    ...prevState.slice(index + 1)\n                ];\n            });\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any, index: number) => {\n            if (file) {\n                console.log(\"Editing file:\", file, \"at index:\", index);\n                alert(`Editing File: ${file.name} at position ${index}`);\n            }\n        };\n\n        const handleRemove = (file: any, index: number) => {\n            setSelectedFiles(prevState => prevState?.filter((_, i) => i !== index));\n\n            if (args.required && (!selectedFiles || selectedFiles.length <= 1)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!selectedFiles || selectedFiles.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFiles]);\n\n        return (\n            <AdminUiProvider>\n                <MultiFilePicker\n                    {...args}\n                    values={selectedFiles}\n                    onSelectItem={handleSelect}\n                    onReplaceItem={handleReplace}\n                    onRemoveItem={handleRemove}\n                    onEditItem={handleEdit}\n                    validation={validation}\n                />\n            </AdminUiProvider>\n        );\n    },\n    args: {\n        label: \"Upload Images\",\n        required: true,\n        disabled: false,\n        description: \"Select files to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB per file\",\n        type: \"area\",\n        values: [],\n        validation: undefined,\n        onSelectItem: undefined,\n        onReplaceItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\",\n            defaultValue: \"Upload Images\"\n        },\n        type: {\n            description: \"The type of file picker to display\",\n            control: \"select\",\n            options: [\"area\", \"compact\"],\n            defaultValue: \"area\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the field when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        values: {\n            description: \"Array of selected files\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description:\n                \"Callback when user selects files - Please refer to the example code for details on usage.\",\n            action: \"onSelectItem\"\n        },\n        onReplaceItem: {\n            description:\n                \"Callback when user replaces a file - Please refer to the example code for details on usage.\",\n            action: \"onReplaceItem\"\n        },\n        onEditItem: {\n            description:\n                \"Callback when user edits a file - Please refer to the example code for details on usage.\",\n            action: \"onEditItem\"\n        },\n        onRemoveItem: {\n            description:\n                \"Callback when user removes a file - Please refer to the example code for details on usage.\",\n            action: \"onRemoveItem\"\n        }\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAElD,SAA2BC,eAAe;AAC1C,SAASC,eAAe;AAExB,MAAMC,eAAe,GAAGA,CAACC,GAAW,EAAEC,GAAW,KAC7CC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,CAAC,CAAC,IAAIH,GAAG,GAAGD,GAAG,GAAG,CAAC,CAAC,CAAC,GAAGA,GAAG;AAErD,MAAMK,cAAc,GAAGA,CAACC,IAAY,GAAG,EAAE,KAAoB;EACzD,OAAOC,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEH;EAAK,CAAC,EAAE,CAACI,CAAC,EAAEC,KAAK,KAAK;IAC9C,MAAMC,KAAK,GAAGb,eAAe,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;IAC1C,MAAMc,MAAM,GAAGd,eAAe,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;IAC3C,MAAMe,QAAQ,GAAGf,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;;IAEnD,OAAO;MACHgB,IAAI,EAAE,QAAQJ,KAAK,GAAG,CAAC,MAAM;MAC7BK,QAAQ,EAAE,YAAY;MACtBV,IAAI,EAAEQ,QAAQ;MACdG,GAAG,EAAE,yBAAyBL,KAAK,IAAIC,MAAM;IACjD,CAAC;EACL,CAAC,CAAC;AACN,CAAC;AAED,MAAMK,IAAkC,GAAG;EACvCC,KAAK,EAAE,kCAAkC;EACzCC,SAAS,EAAEvB,eAAe;EAC1BwB,QAAQ,EAAE;IACNC,YAAY,EAAE;MAAEC,MAAM,EAAE;IAAe,CAAC;IACxCC,UAAU,EAAE;MAAED,MAAM,EAAE;IAAa,CAAC;IACpCE,YAAY,EAAE;MAAEF,MAAM,EAAE;IAAe,CAAC;IACxCG,QAAQ,EAAE;MACNC,OAAO,EAAE,SAAS;MAClBC,YAAY,EAAE;IAClB;EACJ,CAAC;EACDC,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ,CAAC;EACDC,MAAM,EAAEC,IAAI,IAAI;IACZ,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGvC,QAAQ,CAAgB,EAAE,CAAC;IACrE,oBACID,KAAA,CAAAyC,aAAA,CAACrC,eAAe,qBACZJ,KAAA,CAAAyC,aAAA,CAACtC,eAAe,EAAAuC,MAAA,CAAAC,MAAA,KACRL,IAAI;MACRM,MAAM,EAAEL,aAAc;MACtBX,YAAY,EAAEA,CAAA,KAAMY,gBAAgB,CAAC7B,cAAc,CAAC,CAAC,CAAE;MACvDkC,aAAa,EAAEA,CAAC7B,CAAC,EAAEC,KAAK,KACpBuB,gBAAgB,CAACM,SAAS,IAAI;QAC1B,IAAI,CAACA,SAAS,EAAE;UACZ,OAAO,EAAE;QACb;QAEA,OAAO,CACH,GAAGA,SAAS,CAACC,KAAK,CAAC,CAAC,EAAE9B,KAAK,CAAC,EAC5B,GAAGN,cAAc,CAAC,CAAC,CAAC,EACpB,GAAGmC,SAAS,CAACC,KAAK,CAAC9B,KAAK,GAAG,CAAC,CAAC,CAChC;MACL,CAAC,CACJ;MACDc,YAAY,EAAEiB,IAAI,IACdR,gBAAgB,CAACM,SAAS,IACtBA,SAAS,EAAEG,MAAM,CAACC,KAAK,IAAIA,KAAK,CAAC7B,IAAI,KAAK2B,IAAI,EAAE3B,IAAI,CACxD,CACH;MACDS,UAAU,EAAEA,CAACkB,IAAI,EAAEG,CAAC,KAAKC,KAAK,CAAC,WAAWJ,IAAI,EAAE3B,IAAI,gBAAgB8B,CAAC,EAAE;IAAE,EAC5E,CACY,CAAC;EAE1B;AACJ,CAAC;AAED,eAAe3B,IAAI;AAGnB,OAAO,MAAM6B,OAAc,GAAG,CAAC,CAAC;AAEhC,OAAO,MAAMC,QAAe,GAAG;EAC3BhB,IAAI,EAAE;IACF,GAAGe,OAAO,CAACf,IAAI;IACfiB,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMC,aAAoB,GAAG;EAChClB,IAAI,EAAE;IACF,GAAGgB,QAAQ,CAAChB,IAAI;IAChBmB,KAAK,EAAE;EACX;AACJ,CAAC;AAED,OAAO,MAAMC,qBAA4B,GAAG;EACxCpB,IAAI,EAAE;IACF,GAAGgB,QAAQ,CAAChB,IAAI;IAChBmB,KAAK,EAAE,iBAAiB;IACxBE,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMC,mBAA0B,GAAG;EACtCtB,IAAI,EAAE;IACF,GAAGgB,QAAQ,CAAChB,IAAI;IAChBuB,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMC,aAAoB,GAAG;EAChCxB,IAAI,EAAE;IACF,GAAGgB,QAAQ,CAAChB,IAAI;IAChByB,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMC,cAAqB,GAAG;EACjC1B,IAAI,EAAE;IACF,GAAGgB,QAAQ,CAAChB,IAAI;IAChB2B,UAAU,EAAE;MACRC,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC;AAED,OAAO,MAAMC,YAAmB,GAAG;EAC/B9B,IAAI,EAAE;IACF,GAAGgB,QAAQ,CAAChB,IAAI;IAChBmB,KAAK,EAAE,iBAAiB;IACxBzB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMqC,wBAA+B,GAAG;EAC3C/B,IAAI,EAAE;IACF,GAAGgB,QAAQ,CAAChB;EAChB,CAAC;EACDD,MAAM,EAAEC,IAAI,IAAI;IACZ,MAAM,CAAC2B,UAAU,EAAEK,aAAa,CAAC,GAAGrE,QAAQ,CAAM;MAAEiE,OAAO,EAAE,IAAI;MAAEC,OAAO,EAAEI;IAAU,CAAC,CAAC;IAExF,MAAMC,QAAQ,GAAG,MAAAA,CAAA,KAAY;MACzBF,aAAa,CAAC;QAAEJ,OAAO,EAAE,KAAK;QAAEC,OAAO,EAAE;MAA4B,CAAC,CAAC;IAC3E,CAAC;IAED,oBAAOnE,KAAA,CAAAyC,aAAA,CAACtC,eAAe,EAAAuC,MAAA,CAAAC,MAAA,KAAKL,IAAI;MAAEkC,QAAQ,EAAEA,QAAS;MAACP,UAAU,EAAEA;IAAW,EAAE,CAAC;EACpF;AACJ,CAAC;AAED,OAAO,MAAMQ,eAAsB,GAAG;EAClCnC,IAAI,EAAE;IACF,GAAGgB,QAAQ,CAAChB,IAAI;IAChBmB,KAAK,EAAE,iBAAiB;IACxBE,QAAQ,EAAE,IAAI;IACdE,WAAW,EAAE,+DAA+D;IAC5EE,IAAI,EAAE,qEAAqE;IAC3EE,UAAU,EAAE;MACRC,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC;AAED,OAAO,MAAMO,OAAc,GAAG;EAC1BpC,IAAI,EAAE;IACF,GAAGe,OAAO,CAACf,IAAI;IACfiB,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMoB,gBAAuB,GAAG;EACnCrC,IAAI,EAAE;IACF,GAAGoC,OAAO,CAACpC,IAAI;IACfmB,KAAK,EAAE;EACX;AACJ,CAAC;AAED,OAAO,MAAMmB,wBAA+B,GAAG;EAC3CtC,IAAI,EAAE;IACF,GAAGoC,OAAO,CAACpC,IAAI;IACfmB,KAAK,EAAE,iBAAiB;IACxBE,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMkB,sBAA6B,GAAG;EACzCvC,IAAI,EAAE;IACF,GAAGoC,OAAO,CAACpC,IAAI;IACfuB,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMiB,gBAAuB,GAAG;EACnCxC,IAAI,EAAE;IACF,GAAGoC,OAAO,CAACpC,IAAI;IACfyB,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMgB,iBAAwB,GAAG;EACpCzC,IAAI,EAAE;IACF,GAAGoC,OAAO,CAACpC,IAAI;IACf2B,UAAU,EAAE;MACRC,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC;AAED,OAAO,MAAMa,eAAsB,GAAG;EAClC1C,IAAI,EAAE;IACF,GAAGoC,OAAO,CAACpC,IAAI;IACfmB,KAAK,EAAE,iBAAiB;IACxBzB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMiD,2BAAkC,GAAG;EAC9C3C,IAAI,EAAE;IACF,GAAGoC,OAAO,CAACpC;EACf,CAAC;EACDD,MAAM,EAAEC,IAAI,IAAI;IACZ,MAAM,CAAC2B,UAAU,EAAEK,aAAa,CAAC,GAAGrE,QAAQ,CAAM;MAAEiE,OAAO,EAAE,IAAI;MAAEC,OAAO,EAAEI;IAAU,CAAC,CAAC;IAExF,MAAMC,QAAQ,GAAG,MAAAA,CAAA,KAAY;MACzBF,aAAa,CAAC;QAAEJ,OAAO,EAAE,KAAK;QAAEC,OAAO,EAAE;MAA4B,CAAC,CAAC;IAC3E,CAAC;IAED,oBAAOnE,KAAA,CAAAyC,aAAA,CAACtC,eAAe,EAAAuC,MAAA,CAAAC,MAAA,KAAKL,IAAI;MAAEkC,QAAQ,EAAEA,QAAS;MAACP,UAAU,EAAEA;IAAW,EAAE,CAAC;EACpF;AACJ,CAAC;AAED,OAAO,MAAMiB,kBAAyB,GAAG;EACrC5C,IAAI,EAAE;IACF,GAAGoC,OAAO,CAACpC,IAAI;IACfmB,KAAK,EAAE,iBAAiB;IACxBE,QAAQ,EAAE,IAAI;IACdE,WAAW,EAAE,+DAA+D;IAC5EE,IAAI,EAAE,qEAAqE;IAC3EE,UAAU,EAAE;MACRC,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC;AAED,OAAO,MAAMgB,aAAoB,GAAG;EAChC9C,MAAM,EAAEC,IAAI,IAAI;IACZ,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGvC,QAAQ,CAAgB,EAAE,CAAC;IACrE,MAAM,CAACgE,UAAU,EAAEK,aAAa,CAAC,GAAGrE,QAAQ,CAAC;MAAEiE,OAAO,EAAE,IAAI;MAAEC,OAAO,EAAE;IAAG,CAAC,CAAC;;IAE5E;IACAjE,SAAS,CAAC,MAAM;MACZ,IAAI,CAACoC,IAAI,CAACM,MAAM,EAAE;QACdJ,gBAAgB,CAAC,EAAE,CAAC;MACxB,CAAC,MAAM,IAAI3B,KAAK,CAACuE,OAAO,CAAC9C,IAAI,CAACM,MAAM,CAAC,EAAE;QACnC;QACA,MAAMyC,eAAe,GAAG/C,IAAI,CAACM,MAAM,CAAC0C,GAAG,CAACpC,KAAK,IAAI;UAC7C,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;YAC3B,OAAO;cACH7B,IAAI,EAAE6B,KAAK,CAACqC,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAC,CAAC,IAAI,MAAM;cACtClE,QAAQ,EAAE,YAAY;cAAE;cACxBV,IAAI,EAAE,CAAC;cACPW,GAAG,EAAE2B;YACT,CAAC;UACL;UACA,OAAOA,KAAK;QAChB,CAAC,CAAC;QACFV,gBAAgB,CAAC6C,eAAe,CAAC;MACrC;IACJ,CAAC,EAAE,CAAC/C,IAAI,CAACM,MAAM,CAAC,CAAC;IAEjB,MAAM6C,YAAY,GAAGA,CAAA,KAAM;MACvBjD,gBAAgB,CAAC7B,cAAc,CAAC,CAAC,CAAC,CAAC;MACnC2D,aAAa,CAAC;QAAEJ,OAAO,EAAE,IAAI;QAAEC,OAAO,EAAE;MAAG,CAAC,CAAC;IACjD,CAAC;IAED,MAAMuB,aAAa,GAAGA,CAAC1E,CAAM,EAAEC,KAAa,KAAK;MAC7CuB,gBAAgB,CAACM,SAAS,IAAI;QAC1B,IAAI,CAACA,SAAS,EAAE;UACZ,OAAO,EAAE;QACb;QAEA,OAAO,CACH,GAAGA,SAAS,CAACC,KAAK,CAAC,CAAC,EAAE9B,KAAK,CAAC,EAC5B,GAAGN,cAAc,CAAC,CAAC,CAAC,EACpB,GAAGmC,SAAS,CAACC,KAAK,CAAC9B,KAAK,GAAG,CAAC,CAAC,CAChC;MACL,CAAC,CAAC;MACFqD,aAAa,CAAC;QAAEJ,OAAO,EAAE,IAAI;QAAEC,OAAO,EAAE;MAAG,CAAC,CAAC;IACjD,CAAC;IAED,MAAMwB,UAAU,GAAGA,CAACC,IAAS,EAAE3E,KAAa,KAAK;MAC7C,IAAI2E,IAAI,EAAE;QACNC,OAAO,CAACC,GAAG,CAAC,eAAe,EAAEF,IAAI,EAAE,WAAW,EAAE3E,KAAK,CAAC;QACtDmC,KAAK,CAAC,iBAAiBwC,IAAI,CAACvE,IAAI,gBAAgBJ,KAAK,EAAE,CAAC;MAC5D;IACJ,CAAC;IAED,MAAM8E,YAAY,GAAGA,CAACH,IAAS,EAAE3E,KAAa,KAAK;MAC/CuB,gBAAgB,CAACM,SAAS,IAAIA,SAAS,EAAEG,MAAM,CAAC,CAACjC,CAAC,EAAEmC,CAAC,KAAKA,CAAC,KAAKlC,KAAK,CAAC,CAAC;MAEvE,IAAIqB,IAAI,CAACqB,QAAQ,KAAK,CAACpB,aAAa,IAAIA,aAAa,CAACxB,MAAM,IAAI,CAAC,CAAC,EAAE;QAChEuD,aAAa,CAAC;UAAEJ,OAAO,EAAE,KAAK;UAAEC,OAAO,EAAE;QAAkC,CAAC,CAAC;MACjF;IACJ,CAAC;;IAED;IACAjE,SAAS,CAAC,MAAM;MACZ,IAAIoC,IAAI,CAACqB,QAAQ,KAAK,CAACpB,aAAa,IAAIA,aAAa,CAACxB,MAAM,KAAK,CAAC,CAAC,EAAE;QACjEuD,aAAa,CAAC;UAAEJ,OAAO,EAAE,KAAK;UAAEC,OAAO,EAAE;QAAkC,CAAC,CAAC;MACjF,CAAC,MAAM;QACHG,aAAa,CAAC;UAAEJ,OAAO,EAAE,IAAI;UAAEC,OAAO,EAAE;QAAG,CAAC,CAAC;MACjD;IACJ,CAAC,EAAE,CAAC7B,IAAI,CAACqB,QAAQ,EAAEpB,aAAa,CAAC,CAAC;IAElC,oBACIvC,KAAA,CAAAyC,aAAA,CAACrC,eAAe,qBACZJ,KAAA,CAAAyC,aAAA,CAACtC,eAAe,EAAAuC,MAAA,CAAAC,MAAA,KACRL,IAAI;MACRM,MAAM,EAAEL,aAAc;MACtBX,YAAY,EAAE6D,YAAa;MAC3B5C,aAAa,EAAE6C,aAAc;MAC7B3D,YAAY,EAAEgE,YAAa;MAC3BjE,UAAU,EAAE6D,UAAW;MACvB1B,UAAU,EAAEA;IAAW,EAC1B,CACY,CAAC;EAE1B,CAAC;EACD3B,IAAI,EAAE;IACFmB,KAAK,EAAE,eAAe;IACtBE,QAAQ,EAAE,IAAI;IACd3B,QAAQ,EAAE,KAAK;IACf6B,WAAW,EAAE,wCAAwC;IACrDE,IAAI,EAAE,yCAAyC;IAC/CR,IAAI,EAAE,MAAM;IACZX,MAAM,EAAE,EAAE;IACVqB,UAAU,EAAEM,SAAS;IACrB3C,YAAY,EAAE2C,SAAS;IACvB1B,aAAa,EAAE0B,SAAS;IACxBzC,UAAU,EAAEyC,SAAS;IACrBxC,YAAY,EAAEwC;EAClB,CAAC;EACD5C,QAAQ,EAAE;IACN8B,KAAK,EAAE;MACHI,WAAW,EAAE,gCAAgC;MAC7C5B,OAAO,EAAE,MAAM;MACfC,YAAY,EAAE;IAClB,CAAC;IACDqB,IAAI,EAAE;MACFM,WAAW,EAAE,oCAAoC;MACjD5B,OAAO,EAAE,QAAQ;MACjB+D,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC;MAC5B9D,YAAY,EAAE;IAClB,CAAC;IACDyB,QAAQ,EAAE;MACNE,WAAW,EAAE,2CAA2C;MACxD5B,OAAO,EAAE,SAAS;MAClBC,YAAY,EAAE;IAClB,CAAC;IACDF,QAAQ,EAAE;MACN6B,WAAW,EAAE,qCAAqC;MAClD5B,OAAO,EAAE,SAAS;MAClBC,YAAY,EAAE;IAClB,CAAC;IACD2B,WAAW,EAAE;MACTA,WAAW,EAAE,6CAA6C;MAC1D5B,OAAO,EAAE;IACb,CAAC;IACD8B,IAAI,EAAE;MACFF,WAAW,EAAE,sCAAsC;MACnD5B,OAAO,EAAE;IACb,CAAC;IACDW,MAAM,EAAE;MACJiB,WAAW,EAAE,yBAAyB;MACtC5B,OAAO,EAAE;IACb,CAAC;IACDgC,UAAU,EAAE;MACRJ,WAAW,EACP;IACR,CAAC;IACDjC,YAAY,EAAE;MACViC,WAAW,EACP,2FAA2F;MAC/FhC,MAAM,EAAE;IACZ,CAAC;IACDgB,aAAa,EAAE;MACXgB,WAAW,EACP,6FAA6F;MACjGhC,MAAM,EAAE;IACZ,CAAC;IACDC,UAAU,EAAE;MACR+B,WAAW,EACP,0FAA0F;MAC9FhC,MAAM,EAAE;IACZ,CAAC;IACDE,YAAY,EAAE;MACV8B,WAAW,EACP,4FAA4F;MAChGhC,MAAM,EAAE;IACZ;EACJ;AACJ,CAAC","ignoreList":[]}

package/MultiFilePicker/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./MultiFilePicker";
-export * from "./primitives";
+export * from "./MultiFilePicker.js";
+export * from "./primitives/index.js";

package/MultiFilePicker/index.js

@@ -1,4 +1,4 @@
-export * from "./MultiFilePicker";
-export * from "./primitives";
+export * from "./MultiFilePicker.js";
+export * from "./primitives/index.js";
 
 //# sourceMappingURL=index.js.map

package/MultiFilePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./MultiFilePicker\";\nexport * from \"./primitives\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./MultiFilePicker.js\";\nexport * from \"./primitives/index.js\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/MultiFilePicker/primitives/MultiFilePickerPrimitive.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type FileItemDto, type FileItemFormatted, type FilePickerPrimitiveProps } from "../../FilePicker";
+import { type FileItemDto, type FileItemFormatted, type FilePickerPrimitiveProps } from "../../FilePicker/index.js";
 interface MultiFilePickerPrimitiveProps extends Omit<FilePickerPrimitiveProps, "value" | "onEditItem" | "onRemoveItem"> {
     /**
      * The list of file items or file paths.
@@ -35,75 +35,67 @@ declare const MultiFilePickerPrimitive: (({ className, buttonPlaceholder, contai
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element) & {
         original: ({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element;
-        originalName: string; /**
-         * The list of file items or file paths.
-         */
+        originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
     Preview: {
-        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element) & {
-            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element;
+        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element) & {
+            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element;
+            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element;
-                originalName: string; /**
-                 * The list of file items or file paths.
-                 */
+            createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element;
+                originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element) & {
-            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element;
+        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element;
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element;
-                originalName: string; /**
-                 * The list of file items or file paths.
-                 */
+            createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element;
+                originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        TextOnly: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element) & {
-            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element;
+        TextOnly: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/index.js").TextOnlyPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/index.js").TextOnlyPreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element;
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/index.js").TextOnlyPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/index.js").TextOnlyPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element;
-                originalName: string; /**
-                 * The list of file items or file paths.
-                 */
+            createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/index.js").TextOnlyPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/index.js").TextOnlyPreviewProps) => React.JSX.Element;
+                originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };