@webiny/admin-ui 6.2.0 → 6.3.0-beta.0

package/MultiAutoComplete/primitives/presenters/MultiAutoCompleteSelectedOptionsPresenter.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeAutoObservable","CommandOptionFormatter","ListCache","MultiAutoCompleteSelectedOptionPresenter","options","constructor","init","params","length","option","getItem","o","value","addItems","clear","vm","getItems","map","format","empty","hasItems","addOption","removeOption","removeItems","resetOptions"],"sources":["MultiAutoCompleteSelectedOptionsPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { CommandOptionFormatted } from \"~/Command/domain/CommandOptionFormatted.js\";\nimport { CommandOptionFormatter } from \"~/Command/domain/CommandOptionFormatter.js\";\nimport type { CommandOption } from \"~/Command/domain/CommandOption.js\";\nimport { ListCache } from \"../../domains/index.js\";\n\ninterface MultiAutoCompleteSelectedOptionsParams {\n    options?: CommandOption[];\n}\n\ninterface IMultiAutoCompleteSelectedOptionsPresenter {\n    vm: {\n        options: CommandOptionFormatted[];\n        empty: boolean;\n    };\n    init: (params: MultiAutoCompleteSelectedOptionsParams) => void;\n    addOption: (option: CommandOption) => void;\n    removeOption: (value: string) => void;\n    resetOptions: () => void;\n}\n\nclass MultiAutoCompleteSelectedOptionPresenter\n    implements IMultiAutoCompleteSelectedOptionsPresenter\n{\n    private options = new ListCache<CommandOption>();\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    init(params: MultiAutoCompleteSelectedOptionsParams) {\n        if (params.options?.length) {\n            for (const option of params.options) {\n                if (!this.options.getItem(o => o.value === option.value)) {\n                    this.options.addItems([option]);\n                }\n            }\n        } else {\n            // If no options are provided, clear the existing options\n            this.options.clear();\n        }\n    }\n\n    get vm() {\n        return {\n            options: this.options.getItems().map(option => CommandOptionFormatter.format(option)),\n            empty: !this.options.hasItems()\n        };\n    }\n\n    public addOption = (option: CommandOption) => {\n        this.options.addItems([option]);\n    };\n\n    public removeOption = (value: string) => {\n        this.options.removeItems(option => option.value === value);\n    };\n\n    public resetOptions = () => {\n        this.options.clear();\n    };\n}\n\nexport {\n    MultiAutoCompleteSelectedOptionPresenter,\n    type IMultiAutoCompleteSelectedOptionsPresenter,\n    type MultiAutoCompleteSelectedOptionsParams\n};\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAEzC,SAASC,sBAAsB;AAE/B,SAASC,SAAS;AAiBlB,MAAMC,wCAAwC,CAE9C;EACYC,OAAO,GAAG,IAAIF,SAAS,CAAgB,CAAC;EAEhDG,WAAWA,CAAA,EAAG;IACVL,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEAM,IAAIA,CAACC,MAA8C,EAAE;IACjD,IAAIA,MAAM,CAACH,OAAO,EAAEI,MAAM,EAAE;MACxB,KAAK,MAAMC,MAAM,IAAIF,MAAM,CAACH,OAAO,EAAE;QACjC,IAAI,CAAC,IAAI,CAACA,OAAO,CAACM,OAAO,CAACC,CAAC,IAAIA,CAAC,CAACC,KAAK,KAAKH,MAAM,CAACG,KAAK,CAAC,EAAE;UACtD,IAAI,CAACR,OAAO,CAACS,QAAQ,CAAC,CAACJ,MAAM,CAAC,CAAC;QACnC;MACJ;IACJ,CAAC,MAAM;MACH;MACA,IAAI,CAACL,OAAO,CAACU,KAAK,CAAC,CAAC;IACxB;EACJ;EAEA,IAAIC,EAAEA,CAAA,EAAG;IACL,OAAO;MACHX,OAAO,EAAE,IAAI,CAACA,OAAO,CAACY,QAAQ,CAAC,CAAC,CAACC,GAAG,CAACR,MAAM,IAAIR,sBAAsB,CAACiB,MAAM,CAACT,MAAM,CAAC,CAAC;MACrFU,KAAK,EAAE,CAAC,IAAI,CAACf,OAAO,CAACgB,QAAQ,CAAC;IAClC,CAAC;EACL;EAEOC,SAAS,GAAIZ,MAAqB,IAAK;IAC1C,IAAI,CAACL,OAAO,CAACS,QAAQ,CAAC,CAACJ,MAAM,CAAC,CAAC;EACnC,CAAC;EAEMa,YAAY,GAAIV,KAAa,IAAK;IACrC,IAAI,CAACR,OAAO,CAACmB,WAAW,CAACd,MAAM,IAAIA,MAAM,CAACG,KAAK,KAAKA,KAAK,CAAC;EAC9D,CAAC;EAEMY,YAAY,GAAGA,CAAA,KAAM;IACxB,IAAI,CAACpB,OAAO,CAACU,KAAK,CAAC,CAAC;EACxB,CAAC;AACL;AAEA,SACIX,wCAAwC","ignoreList":[]}
+{"version":3,"names":["makeAutoObservable","CommandOptionFormatter","ListCache","MultiAutoCompleteSelectedOptionPresenter","options","constructor","init","params","length","option","getItem","o","value","addItems","clear","vm","getItems","map","format","empty","hasItems","addOption","removeOption","removeItems","resetOptions"],"sources":["MultiAutoCompleteSelectedOptionsPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { CommandOptionFormatted } from \"~/Command/domain/CommandOptionFormatted.js\";\nimport { CommandOptionFormatter } from \"~/Command/domain/CommandOptionFormatter.js\";\nimport type { CommandOption } from \"~/Command/domain/CommandOption.js\";\nimport { ListCache } from \"../../domains/index.js\";\n\ninterface MultiAutoCompleteSelectedOptionsParams {\n    options?: CommandOption[];\n}\n\ninterface IMultiAutoCompleteSelectedOptionsPresenter {\n    vm: {\n        options: CommandOptionFormatted[];\n        empty: boolean;\n    };\n    init: (params: MultiAutoCompleteSelectedOptionsParams) => void;\n    addOption: (option: CommandOption) => void;\n    removeOption: (value: string) => void;\n    resetOptions: () => void;\n}\n\nclass MultiAutoCompleteSelectedOptionPresenter implements IMultiAutoCompleteSelectedOptionsPresenter {\n    private options = new ListCache<CommandOption>();\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    init(params: MultiAutoCompleteSelectedOptionsParams) {\n        if (params.options?.length) {\n            for (const option of params.options) {\n                if (!this.options.getItem(o => o.value === option.value)) {\n                    this.options.addItems([option]);\n                }\n            }\n        } else {\n            // If no options are provided, clear the existing options\n            this.options.clear();\n        }\n    }\n\n    get vm() {\n        return {\n            options: this.options.getItems().map(option => CommandOptionFormatter.format(option)),\n            empty: !this.options.hasItems()\n        };\n    }\n\n    public addOption = (option: CommandOption) => {\n        this.options.addItems([option]);\n    };\n\n    public removeOption = (value: string) => {\n        this.options.removeItems(option => option.value === value);\n    };\n\n    public resetOptions = () => {\n        this.options.clear();\n    };\n}\n\nexport {\n    MultiAutoCompleteSelectedOptionPresenter,\n    type IMultiAutoCompleteSelectedOptionsPresenter,\n    type MultiAutoCompleteSelectedOptionsParams\n};\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAEzC,SAASC,sBAAsB;AAE/B,SAASC,SAAS;AAiBlB,MAAMC,wCAAwC,CAAuD;EACzFC,OAAO,GAAG,IAAIF,SAAS,CAAgB,CAAC;EAEhDG,WAAWA,CAAA,EAAG;IACVL,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEAM,IAAIA,CAACC,MAA8C,EAAE;IACjD,IAAIA,MAAM,CAACH,OAAO,EAAEI,MAAM,EAAE;MACxB,KAAK,MAAMC,MAAM,IAAIF,MAAM,CAACH,OAAO,EAAE;QACjC,IAAI,CAAC,IAAI,CAACA,OAAO,CAACM,OAAO,CAACC,CAAC,IAAIA,CAAC,CAACC,KAAK,KAAKH,MAAM,CAACG,KAAK,CAAC,EAAE;UACtD,IAAI,CAACR,OAAO,CAACS,QAAQ,CAAC,CAACJ,MAAM,CAAC,CAAC;QACnC;MACJ;IACJ,CAAC,MAAM;MACH;MACA,IAAI,CAACL,OAAO,CAACU,KAAK,CAAC,CAAC;IACxB;EACJ;EAEA,IAAIC,EAAEA,CAAA,EAAG;IACL,OAAO;MACHX,OAAO,EAAE,IAAI,CAACA,OAAO,CAACY,QAAQ,CAAC,CAAC,CAACC,GAAG,CAACR,MAAM,IAAIR,sBAAsB,CAACiB,MAAM,CAACT,MAAM,CAAC,CAAC;MACrFU,KAAK,EAAE,CAAC,IAAI,CAACf,OAAO,CAACgB,QAAQ,CAAC;IAClC,CAAC;EACL;EAEOC,SAAS,GAAIZ,MAAqB,IAAK;IAC1C,IAAI,CAACL,OAAO,CAACS,QAAQ,CAAC,CAACJ,MAAM,CAAC,CAAC;EACnC,CAAC;EAEMa,YAAY,GAAIV,KAAa,IAAK;IACrC,IAAI,CAACR,OAAO,CAACmB,WAAW,CAACd,MAAM,IAAIA,MAAM,CAACG,KAAK,KAAKA,KAAK,CAAC;EAC9D,CAAC;EAEMY,YAAY,GAAGA,CAAA,KAAM;IACxB,IAAI,CAACpB,OAAO,CAACU,KAAK,CAAC,CAAC;EACxB,CAAC;AACL;AAEA,SACIX,wCAAwC","ignoreList":[]}

package/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeAutoObservable","CommandOption","CommandOptionFormatter","MultiAutoCompleteTemporaryOptionPresenter","option","undefined","constructor","init","vm","format","setOption","value","createFromString","resetOption"],"sources":["MultiAutoCompleteTemporaryOptionPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport { CommandOption } from \"~/Command/domain/CommandOption.js\";\nimport type { CommandOptionFormatted } from \"~/Command/domain/CommandOptionFormatted.js\";\nimport { CommandOptionFormatter } from \"~/Command/domain/CommandOptionFormatter.js\";\n\nexport interface IMultiAutoCompleteTemporaryOptionPresenter {\n    vm: {\n        option?: CommandOptionFormatted;\n    };\n    init: () => void;\n    setOption: (value: string) => void;\n    resetOption: () => void;\n}\n\nexport class MultiAutoCompleteTemporaryOptionPresenter\n    implements IMultiAutoCompleteTemporaryOptionPresenter\n{\n    private option?: CommandOption = undefined;\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    init() {\n        return;\n    }\n\n    get vm() {\n        return {\n            option: this.option ? CommandOptionFormatter.format(this.option) : undefined\n        };\n    }\n\n    public setOption = (value: string) => {\n        this.option = CommandOption.createFromString(value);\n    };\n\n    public resetOption = () => {\n        this.option = undefined;\n    };\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AACzC,SAASC,aAAa;AAEtB,SAASC,sBAAsB;AAW/B,OAAO,MAAMC,yCAAyC,CAEtD;EACYC,MAAM,GAAmBC,SAAS;EAE1CC,WAAWA,CAAA,EAAG;IACVN,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEAO,IAAIA,CAAA,EAAG;IACH;EACJ;EAEA,IAAIC,EAAEA,CAAA,EAAG;IACL,OAAO;MACHJ,MAAM,EAAE,IAAI,CAACA,MAAM,GAAGF,sBAAsB,CAACO,MAAM,CAAC,IAAI,CAACL,MAAM,CAAC,GAAGC;IACvE,CAAC;EACL;EAEOK,SAAS,GAAIC,KAAa,IAAK;IAClC,IAAI,CAACP,MAAM,GAAGH,aAAa,CAACW,gBAAgB,CAACD,KAAK,CAAC;EACvD,CAAC;EAEME,WAAW,GAAGA,CAAA,KAAM;IACvB,IAAI,CAACT,MAAM,GAAGC,SAAS;EAC3B,CAAC;AACL","ignoreList":[]}
+{"version":3,"names":["makeAutoObservable","CommandOption","CommandOptionFormatter","MultiAutoCompleteTemporaryOptionPresenter","option","undefined","constructor","init","vm","format","setOption","value","createFromString","resetOption"],"sources":["MultiAutoCompleteTemporaryOptionPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport { CommandOption } from \"~/Command/domain/CommandOption.js\";\nimport type { CommandOptionFormatted } from \"~/Command/domain/CommandOptionFormatted.js\";\nimport { CommandOptionFormatter } from \"~/Command/domain/CommandOptionFormatter.js\";\n\nexport interface IMultiAutoCompleteTemporaryOptionPresenter {\n    vm: {\n        option?: CommandOptionFormatted;\n    };\n    init: () => void;\n    setOption: (value: string) => void;\n    resetOption: () => void;\n}\n\nexport class MultiAutoCompleteTemporaryOptionPresenter implements IMultiAutoCompleteTemporaryOptionPresenter {\n    private option?: CommandOption = undefined;\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    init() {\n        return;\n    }\n\n    get vm() {\n        return {\n            option: this.option ? CommandOptionFormatter.format(this.option) : undefined\n        };\n    }\n\n    public setOption = (value: string) => {\n        this.option = CommandOption.createFromString(value);\n    };\n\n    public resetOption = () => {\n        this.option = undefined;\n    };\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AACzC,SAASC,aAAa;AAEtB,SAASC,sBAAsB;AAW/B,OAAO,MAAMC,yCAAyC,CAAuD;EACjGC,MAAM,GAAmBC,SAAS;EAE1CC,WAAWA,CAAA,EAAG;IACVN,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEAO,IAAIA,CAAA,EAAG;IACH;EACJ;EAEA,IAAIC,EAAEA,CAAA,EAAG;IACL,OAAO;MACHJ,MAAM,EAAE,IAAI,CAACA,MAAM,GAAGF,sBAAsB,CAACO,MAAM,CAAC,IAAI,CAACL,MAAM,CAAC,GAAGC;IACvE,CAAC;EACL;EAEOK,SAAS,GAAIC,KAAa,IAAK;IAClC,IAAI,CAACP,MAAM,GAAGH,aAAa,CAACW,gBAAgB,CAACD,KAAK,CAAC;EACvD,CAAC;EAEME,WAAW,GAAGA,CAAA,KAAM;IACvB,IAAI,CAACT,MAAM,GAAGC,SAAS;EAC3B,CAAC;AACL","ignoreList":[]}

package/MultiFilePicker/MultiFilePicker.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as MultiFilePickerStories from './MultiFilePicker.stories';
+import * as MultiFilePickerStories from "./MultiFilePicker.stories";
 
 <Meta of={MultiFilePickerStories} />
 
@@ -13,8 +13,8 @@ The Multi File Picker component allows users to select, preview, and manage mult
 The MultiFilePicker component is typically used with [Webiny's File Manager](https://www.webiny.com/enterprise-serverless-cms/file-manager) to provide a complete file selection experience.
 
 > ⚠️ **Note**: The MultiFilePicker component is designed to work seamlessly with [Webiny's File Manager](https://www.webiny.com/enterprise-serverless-cms/file-manager).
-In the Storybook example below, we've used random images from Picsum for demonstration purposes.
-However, if you use this example code in a real Webiny project, the MultiFilePicker will integrate with the actual File Manager as expected.
+> In the Storybook example below, we've used random images from Picsum for demonstration purposes.
+> However, if you use this example code in a real Webiny project, the MultiFilePicker will integrate with the actual File Manager as expected.
 
 <Canvas of={MultiFilePickerStories.Documentation} source={ { code: `
 import React, { useState } from "react";
@@ -23,8 +23,8 @@ import { FileManager } from "@webiny/app-admin/components";
 import type { FileManagerFileItem } from "@webiny/app-admin/base/ui/FileManager";
 
 const MultiFilePickerExample = () => {
-    const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
         const formatFile = (file: FileManagerFileItem): FileItemDto => {
             const metaItems = file.meta || [];
@@ -90,22 +90,23 @@ const MultiFilePickerExample = () => {
             />
         </div>
     );
+
 };
 
     export default MultiFilePickerExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/MultiFilePicker/MultiFilePicker.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/MultiFilePicker/MultiFilePicker.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={MultiFilePickerStories.Documentation} />
@@ -117,73 +118,76 @@ import { FileManager } from "@webiny/app-admin/components";
 import type { FileManagerFileItem } from "@webiny/app-admin/base/ui/FileManager";
 
 const MultiFilePickerExample = () => {
-    const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+  const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
 
-    const formatFile = (file: FileManagerFileItem): FileItemDto => {
-        const metaItems = file.meta || [];
+  const formatFile = (file: FileManagerFileItem): FileItemDto => {
+    const metaItems = file.meta || [];
 
-        const getValue = (key: string) =>
-            metaItems.find((item: { key: string }) => item.key === key)?.value;
+    const getValue = (key: string) =>
+      metaItems.find((item: { key: string }) => item.key === key)?.value;
 
-        return {
-            id: file.id,
-            name: getValue("name") || "",
-            size: getValue("size") || 0,
-            mimeType: getValue("type") || "",
-            url: file.src || ""
-        };
+    return {
+      id: file.id,
+      name: getValue("name") || "",
+      size: getValue("size") || 0,
+      mimeType: getValue("type") || "",
+      url: file.src || ""
     };
-
-    return (
-        <div>
-            <FileManager
-                accept={["image/*", "application/pdf"]}
-                multiple={true}
-                render={({ showFileManager }) => (
-                    <MultiFilePicker
-                        label="Upload Images"
-                        description="Select files to upload (JPG, PNG, PDF)"
-                        note="Note: Maximum file size is 5MB per file"
-                        type="area"
-                        required={true}
-                        values={selectedFiles}
-                        validation={validation}
-                        onSelectItem={() => {
-                            showFileManager(files => {
-                                if (files && Array.isArray(files) && files.length > 0) {
-                                    const formatted = files.map(formatFile);
-                                    setSelectedFiles(prev => [...prev, ...formatted]);
-                                    setValidation({ isValid: true, message: "" });
-                                }
-                            });
-                        }}
-                        onReplaceItem={(_, index) => {
-                            // For replacing, we'll use the first file from the selection
-                            showFileManager(files => {
-                                if (files && Array.isArray(files) && files.length > 0) {
-                                    const updated = [...selectedFiles];
-                                    updated[index] = formatFile(files[0]);
-                                    setSelectedFiles(updated);
-                                }
-                            });
-                        }}
-                        onRemoveItem={(_, index) => {
-                            const updated = [...selectedFiles];
-                            updated.splice(index, 1);
-                            if (updated.length === 0) {
-                                setValidation({ isValid: false, message: "Please select at least one file" });
-                            }
-                            setSelectedFiles(updated);
-                        }}
-                        onEditItem={(file, index) => {
-                            alert(`Editing: ${file?.name} at index ${index}`);
-                        }}
-                    />
-                )}
-            />
-        </div>
-    );
+  };
+
+  return (
+    <div>
+      <FileManager
+        accept={["image/*", "application/pdf"]}
+        multiple={true}
+        render={({ showFileManager }) => (
+          <MultiFilePicker
+            label="Upload Images"
+            description="Select files to upload (JPG, PNG, PDF)"
+            note="Note: Maximum file size is 5MB per file"
+            type="area"
+            required={true}
+            values={selectedFiles}
+            validation={validation}
+            onSelectItem={() => {
+              showFileManager(files => {
+                if (files && Array.isArray(files) && files.length > 0) {
+                  const formatted = files.map(formatFile);
+                  setSelectedFiles(prev => [...prev, ...formatted]);
+                  setValidation({ isValid: true, message: "" });
+                }
+              });
+            }}
+            onReplaceItem={(_, index) => {
+              // For replacing, we'll use the first file from the selection
+              showFileManager(files => {
+                if (files && Array.isArray(files) && files.length > 0) {
+                  const updated = [...selectedFiles];
+                  updated[index] = formatFile(files[0]);
+                  setSelectedFiles(updated);
+                }
+              });
+            }}
+            onRemoveItem={(_, index) => {
+              const updated = [...selectedFiles];
+              updated.splice(index, 1);
+              if (updated.length === 0) {
+                setValidation({
+                  isValid: false,
+                  message: "Please select at least one file"
+                });
+              }
+              setSelectedFiles(updated);
+            }}
+            onEditItem={(file, index) => {
+              alert(`Editing: ${file?.name} at index ${index}`);
+            }}
+          />
+        )}
+      />
+    </div>
+  );
 };
 
 export default MultiFilePickerExample;

package/MultiFilePicker/primitives/MultiFilePickerPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FilePickerDescription","FilePickerLabel","filePickerVariants","FilePreview","ImagePreview","RichItemPreview","TextOnlyPreview","Trigger","cn","makeDecoratable","withStaticProps","Button","inputVariants","useMultiFilePicker","BaseMultiFilePickerPrimitive","className","buttonPlaceholder","containerStyle","description","disabled","invalid","label","onEditItem","onRemoveItem","onReplaceItem","onSelectItem","placeholder","renderFilePreview","renderTrigger","type","values","variant","vm","createElement","style","text","onClick","size","hasFiles","files","map","file","i","key","undefined","value","DecoratableMultiFilePickerPrimitive","MultiFilePickerPrimitive","Preview","Image","RichItem","TextOnly"],"sources":["MultiFilePickerPrimitive.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    type FileItemDto,\n    type FileItemFormatted,\n    FilePickerDescription,\n    FilePickerLabel,\n    type FilePickerPrimitiveProps,\n    filePickerVariants,\n    FilePreview,\n    ImagePreview,\n    RichItemPreview,\n    TextOnlyPreview,\n    Trigger\n} from \"~/FilePicker/index.js\";\nimport { cn, makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { useMultiFilePicker } from \"~/MultiFilePicker/primitives/useMultiFilePicker.js\";\n\ninterface MultiFilePickerPrimitiveProps\n    extends Omit<FilePickerPrimitiveProps, \"value\" | \"onEditItem\" | \"onRemoveItem\"> {\n    /**\n     * The list of file items or file paths.\n     */\n    values?: FileItemDto[] | string[] | null;\n    /**\n     * Placeholder text for the button that allows users to select a file.\n     */\n    buttonPlaceholder?: string;\n    /**\n     * Callback function to replace an item.\n     */\n    onReplaceItem: (item: FileItemFormatted | null, index: number) => void;\n    /**\n     * Optional callback function to edit an item.\n     */\n    onEditItem?: (item: FileItemFormatted | null, index: number) => void;\n    /**\n     * Optional callback function to remove an item.\n     */\n    onRemoveItem?: (item: FileItemFormatted | null, index: number) => void;\n}\n\nconst BaseMultiFilePickerPrimitive = ({\n    className,\n    buttonPlaceholder,\n    containerStyle,\n    description,\n    disabled,\n    invalid,\n    label,\n    onEditItem,\n    onRemoveItem,\n    onReplaceItem,\n    onSelectItem,\n    placeholder,\n    renderFilePreview,\n    renderTrigger,\n    type = \"area\",\n    values = [],\n    variant\n}: MultiFilePickerPrimitiveProps) => {\n    const { vm } = useMultiFilePicker({ values });\n\n    return (\n        <div\n            data-disabled={disabled}\n            className={cn(\n                inputVariants({ variant, invalid }),\n                filePickerVariants({ type, variant }),\n                \"max-h-[280px]\",\n                className\n            )}\n            style={containerStyle}\n        >\n            {type === \"area\" && (label || description) && (\n                <div className={\"w-full flex justify-between\"}>\n                    <div className={\"w-full\"}>\n                        {label && (\n                            <div className={\"mb-xs\"}>\n                                {typeof label === \"string\" ? (\n                                    <FilePickerLabel\n                                        label={label}\n                                        className={\"m-0\"}\n                                        disabled={disabled}\n                                    />\n                                ) : (\n                                    label\n                                )}\n                            </div>\n                        )}\n                        {description && (\n                            <FilePickerDescription\n                                description={description}\n                                disabled={disabled}\n                                className={\"m-0\"}\n                            />\n                        )}\n                    </div>\n                    <Button\n                        text={buttonPlaceholder ?? \"Select a file\"}\n                        variant={\"ghost\"}\n                        onClick={onSelectItem}\n                        size={\"sm\"}\n                        disabled={disabled}\n                    />\n                </div>\n            )}\n            {vm.hasFiles ? (\n                <div className=\"w-full overflow-y-scroll flex flex-col gap-xs\">\n                    {vm.files.map((file, i) => (\n                        <FilePreview\n                            key={`file-preview-${i}`}\n                            disabled={disabled}\n                            onEditItem={onEditItem ? () => onEditItem(file, i) : undefined}\n                            onRemoveItem={onRemoveItem ? () => onRemoveItem(file, i) : undefined}\n                            onReplaceItem={onReplaceItem ? () => onReplaceItem(file, i) : undefined}\n                            renderFilePreview={renderFilePreview}\n                            type={type}\n                            value={file}\n                        />\n                    ))}\n                </div>\n            ) : (\n                <Trigger\n                    disabled={disabled}\n                    onSelectItem={onSelectItem}\n                    renderTrigger={renderTrigger}\n                    text={placeholder}\n                    type={type}\n                    variant={variant}\n                />\n            )}\n        </div>\n    );\n};\n\nconst DecoratableMultiFilePickerPrimitive = makeDecoratable(\n    \"MultiFilePickerPrimitive\",\n    BaseMultiFilePickerPrimitive\n);\n\nconst MultiFilePickerPrimitive = withStaticProps(DecoratableMultiFilePickerPrimitive, {\n    Preview: {\n        Image: ImagePreview,\n        RichItem: RichItemPreview,\n        TextOnly: TextOnlyPreview\n    }\n});\n\nexport {\n    MultiFilePickerPrimitive,\n    type FileItemFormatted,\n    type FileItemDto,\n    type MultiFilePickerPrimitiveProps\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","FilePickerDescription","FilePickerLabel","filePickerVariants","FilePreview","ImagePreview","RichItemPreview","TextOnlyPreview","Trigger","cn","makeDecoratable","withStaticProps","Button","inputVariants","useMultiFilePicker","BaseMultiFilePickerPrimitive","className","buttonPlaceholder","containerStyle","description","disabled","invalid","label","onEditItem","onRemoveItem","onReplaceItem","onSelectItem","placeholder","renderFilePreview","renderTrigger","type","values","variant","vm","createElement","style","text","onClick","size","hasFiles","files","map","file","i","key","undefined","value","DecoratableMultiFilePickerPrimitive","MultiFilePickerPrimitive","Preview","Image","RichItem","TextOnly"],"sources":["MultiFilePickerPrimitive.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    type FileItemDto,\n    type FileItemFormatted,\n    FilePickerDescription,\n    FilePickerLabel,\n    type FilePickerPrimitiveProps,\n    filePickerVariants,\n    FilePreview,\n    ImagePreview,\n    RichItemPreview,\n    TextOnlyPreview,\n    Trigger\n} from \"~/FilePicker/index.js\";\nimport { cn, makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { useMultiFilePicker } from \"~/MultiFilePicker/primitives/useMultiFilePicker.js\";\n\ninterface MultiFilePickerPrimitiveProps extends Omit<\n    FilePickerPrimitiveProps,\n    \"value\" | \"onEditItem\" | \"onRemoveItem\"\n> {\n    /**\n     * The list of file items or file paths.\n     */\n    values?: FileItemDto[] | string[] | null;\n    /**\n     * Placeholder text for the button that allows users to select a file.\n     */\n    buttonPlaceholder?: string;\n    /**\n     * Callback function to replace an item.\n     */\n    onReplaceItem: (item: FileItemFormatted | null, index: number) => void;\n    /**\n     * Optional callback function to edit an item.\n     */\n    onEditItem?: (item: FileItemFormatted | null, index: number) => void;\n    /**\n     * Optional callback function to remove an item.\n     */\n    onRemoveItem?: (item: FileItemFormatted | null, index: number) => void;\n}\n\nconst BaseMultiFilePickerPrimitive = ({\n    className,\n    buttonPlaceholder,\n    containerStyle,\n    description,\n    disabled,\n    invalid,\n    label,\n    onEditItem,\n    onRemoveItem,\n    onReplaceItem,\n    onSelectItem,\n    placeholder,\n    renderFilePreview,\n    renderTrigger,\n    type = \"area\",\n    values = [],\n    variant\n}: MultiFilePickerPrimitiveProps) => {\n    const { vm } = useMultiFilePicker({ values });\n\n    return (\n        <div\n            data-disabled={disabled}\n            className={cn(\n                inputVariants({ variant, invalid }),\n                filePickerVariants({ type, variant }),\n                \"max-h-[280px]\",\n                className\n            )}\n            style={containerStyle}\n        >\n            {type === \"area\" && (label || description) && (\n                <div className={\"w-full flex justify-between\"}>\n                    <div className={\"w-full\"}>\n                        {label && (\n                            <div className={\"mb-xs\"}>\n                                {typeof label === \"string\" ? (\n                                    <FilePickerLabel\n                                        label={label}\n                                        className={\"m-0\"}\n                                        disabled={disabled}\n                                    />\n                                ) : (\n                                    label\n                                )}\n                            </div>\n                        )}\n                        {description && (\n                            <FilePickerDescription\n                                description={description}\n                                disabled={disabled}\n                                className={\"m-0\"}\n                            />\n                        )}\n                    </div>\n                    <Button\n                        text={buttonPlaceholder ?? \"Select a file\"}\n                        variant={\"ghost\"}\n                        onClick={onSelectItem}\n                        size={\"sm\"}\n                        disabled={disabled}\n                    />\n                </div>\n            )}\n            {vm.hasFiles ? (\n                <div className=\"w-full overflow-y-scroll flex flex-col gap-xs\">\n                    {vm.files.map((file, i) => (\n                        <FilePreview\n                            key={`file-preview-${i}`}\n                            disabled={disabled}\n                            onEditItem={onEditItem ? () => onEditItem(file, i) : undefined}\n                            onRemoveItem={onRemoveItem ? () => onRemoveItem(file, i) : undefined}\n                            onReplaceItem={onReplaceItem ? () => onReplaceItem(file, i) : undefined}\n                            renderFilePreview={renderFilePreview}\n                            type={type}\n                            value={file}\n                        />\n                    ))}\n                </div>\n            ) : (\n                <Trigger\n                    disabled={disabled}\n                    onSelectItem={onSelectItem}\n                    renderTrigger={renderTrigger}\n                    text={placeholder}\n                    type={type}\n                    variant={variant}\n                />\n            )}\n        </div>\n    );\n};\n\nconst DecoratableMultiFilePickerPrimitive = makeDecoratable(\n    \"MultiFilePickerPrimitive\",\n    BaseMultiFilePickerPrimitive\n);\n\nconst MultiFilePickerPrimitive = withStaticProps(DecoratableMultiFilePickerPrimitive, {\n    Preview: {\n        Image: ImagePreview,\n        RichItem: RichItemPreview,\n        TextOnly: TextOnlyPreview\n    }\n});\n\nexport {\n    MultiFilePickerPrimitive,\n    type FileItemFormatted,\n    type FileItemDto,\n    type MultiFilePickerPrimitiveProps\n};\n"],"mappings":"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","ignoreList":[]}

package/Popover/Popover.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as PopoverStories from './Popover.stories';
+import * as PopoverStories from "./Popover.stories";
 
 <Meta of={PopoverStories} />
 
@@ -15,41 +15,40 @@ import React from "react";
 import { Popover } from "@webiny/admin-ui";
 
 const PopoverExample = () => {
-    return (
-        <div className="bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]">
-            <Popover
-                trigger={<p>Popover trigger</p>}
-                content={
-                    <div className={"w-[260px]"}>
-                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi
-                        lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor
-                        tempus.
-                    </div>
-                }
-                align="center"
-                side="bottom"
-                variant="subtle"
-                arrow={false}
-                close={false}
-            />
-        </div>
-    );
-};
+return (
+
+<div className="bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]">
+  <Popover
+    trigger={<p>Popover trigger</p>}
+    content={
+      <div className={"w-[260px]"}>
+        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi lectus leo,
+        dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.
+      </div>
+    }
+    align="center"
+    side="bottom"
+    variant="subtle"
+    arrow={false}
+    close={false}
+  />
+</div>
+); };
 
 export default PopoverExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Popover/Popover.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Popover/Popover.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={PopoverStories.Documentation} />
@@ -59,25 +58,24 @@ import React from "react";
 import { Popover } from "@webiny/admin-ui";
 
 const PopoverExample = () => {
-    return (
-        <div className="bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]">
-            <Popover
-                trigger={<p>Popover trigger</p>}
-                content={
-                    <div className={"w-[260px]"}>
-                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi
-                        lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor
-                        tempus.
-                    </div>
-                }
-                align="center"
-                side="bottom"
-                variant="subtle"
-                arrow={false}
-                close={false}
-            />
-        </div>
-    );
+  return (
+    <div className="bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]">
+      <Popover
+        trigger={<p>Popover trigger</p>}
+        content={
+          <div className={"w-[260px]"}>
+            <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi lectus
+            leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.
+          </div>
+        }
+        align="center"
+        side="bottom"
+        variant="subtle"
+        arrow={false}
+        close={false}
+      />
+    </div>
+  );
 };
 
 export default PopoverExample;
@@ -94,22 +92,21 @@ import React from "react";
 import { Popover } from "@webiny/admin-ui";
 
 const AccentVariantExample = () => {
-    return (
-        <div className="bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]">
-            <Popover
-                trigger={<p>Popover trigger</p>}
-                content={
-                    <div className={"w-[260px]"}>
-                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi
-                        lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor
-                        tempus.
-                    </div>
-                }
-                variant="accent"
-            />
-        </div>
-    );
-};
+return (
+
+<div className="bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]">
+  <Popover
+    trigger={<p>Popover trigger</p>}
+    content={
+      <div className={"w-[260px]"}>
+        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi lectus leo,
+        dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.
+      </div>
+    }
+    variant="accent"
+  />
+</div>
+); };
 
 export default AccentVariantExample;
 ` } } />
@@ -123,23 +120,22 @@ import React from "react";
 import { Popover } from "@webiny/admin-ui";
 
 const WithArrowAccentExample = () => {
-    return (
-        <div className="bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]">
-            <Popover
-                trigger={<p>Popover trigger</p>}
-                content={
-                    <div className={"w-[260px]"}>
-                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi
-                        lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor
-                        tempus.
-                    </div>
-                }
-                variant="accent"
-                arrow={true}
-            />
-        </div>
-    );
-};
+return (
+
+<div className="bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]">
+  <Popover
+    trigger={<p>Popover trigger</p>}
+    content={
+      <div className={"w-[260px]"}>
+        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi lectus leo,
+        dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.
+      </div>
+    }
+    variant="accent"
+    arrow={true}
+  />
+</div>
+); };
 
 export default WithArrowAccentExample;
 ` } } />
@@ -153,22 +149,21 @@ import React from "react";
 import { Popover } from "@webiny/admin-ui";
 
 const SubtleVariantExample = () => {
-    return (
-        <div className="flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]">
-            <Popover
-                trigger={<p>Popover trigger</p>}
-                content={
-                    <div className={"w-[260px]"}>
-                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi
-                        lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor
-                        tempus.
-                    </div>
-                }
-                variant="subtle"
-            />
-        </div>
-    );
-};
+return (
+
+<div className="flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]">
+  <Popover
+    trigger={<p>Popover trigger</p>}
+    content={
+      <div className={"w-[260px]"}>
+        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi lectus leo,
+        dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.
+      </div>
+    }
+    variant="subtle"
+  />
+</div>
+); };
 
 export default SubtleVariantExample;
 ` } } />
@@ -182,23 +177,22 @@ import React from "react";
 import { Popover } from "@webiny/admin-ui";
 
 const WithArrowSubtleExample = () => {
-    return (
-        <div className="flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]">
-            <Popover
-                trigger={<p>Popover trigger</p>}
-                content={
-                    <div className={"w-[260px]"}>
-                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi
-                        lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor
-                        tempus.
-                    </div>
-                }
-                variant="subtle"
-                arrow={true}
-            />
-        </div>
-    );
-};
+return (
+
+<div className="flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]">
+  <Popover
+    trigger={<p>Popover trigger</p>}
+    content={
+      <div className={"w-[260px]"}>
+        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi lectus leo,
+        dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.
+      </div>
+    }
+    variant="subtle"
+    arrow={true}
+  />
+</div>
+); };
 
 export default WithArrowSubtleExample;
 ` } } />

package/Popover/primitives/components/PopoverArrow.d.ts

@@ -3,7 +3,7 @@ import { Popover as PopoverPrimitive } from "radix-ui";
 import { type VariantProps } from "../../../utils.js";
 declare const popoverArrowVariants: (props?: ({
     variant?: "accent" | "subtle" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type PopoverArrowProps = PopoverPrimitive.PopoverArrowProps & VariantProps<typeof popoverArrowVariants>;
 declare const PopoverArrow: ({ variant, className, ...props }: PopoverArrowProps) => React.JSX.Element;
 export { PopoverArrow, type PopoverArrowProps };

package/Popover/primitives/components/PopoverContent.d.ts

@@ -4,7 +4,7 @@ import { type VariantProps } from "../../../utils.js";
 declare const popoverContentVariants: (props?: ({
     variant?: "accent" | "subtle" | null | undefined;
     arrow?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type PopoverContentProps = PopoverPrimitive.PopoverContentProps & VariantProps<typeof popoverContentVariants>;
 declare const PopoverContent: ({ className, variant, arrow, align, sideOffset, collisionPadding, ...props }: PopoverContentProps) => React.JSX.Element;
 export { PopoverContent, type PopoverContentProps };