@webiny/admin-ui 6.4.8 → 6.4.9-beta.0

package/FilePicker/FilePicker.stories.d.ts

@@ -22,4 +22,10 @@ export declare const CompactWithErrors: Story;
 export declare const CompactDisabled: Story;
 export declare const CompactWithValidateFunction: Story;
 export declare const CompactFullExample: Story;
+/**
+ * Reproduces the Website Builder style sidebar at its 206px value column: the preview stacks,
+ * the file name truncates in the middle so the extension and version suffix survive, and the
+ * actions spell themselves out instead of costing a fixed block of the row.
+ */
+export declare const CompactWithLongFileNameInNarrowContainer: Story;
 export declare const Documentation: Story;

package/FilePicker/FilePicker.stories.js

@@ -210,6 +210,29 @@ const CompactFullExample = {
         }
     }
 };
+const CompactWithLongFileNameInNarrowContainer = {
+    args: {
+        ...Compact.args
+    },
+    render: (args)=>{
+        const [selectedFile, setSelectedFile] = useState({
+            name: "tide-cc-statuses-2026-08-21-final-v2.png",
+            mimeType: "image/png",
+            size: 674161,
+            url: "https://picsum.photos/1200/800"
+        });
+        return /*#__PURE__*/ react.createElement("div", {
+            style: {
+                width: 206
+            }
+        }, /*#__PURE__*/ react.createElement(FilePicker, {
+            ...args,
+            value: selectedFile,
+            onSelectItem: ()=>setSelectedFile(getFile()),
+            onRemoveItem: ()=>setSelectedFile(null)
+        }));
+    }
+};
 const Documentation = {
     render: (args)=>{
         const [selectedFile, setSelectedFile] = useState(args.value);
@@ -324,6 +347,6 @@ const Documentation = {
     }
 };
 export default FilePicker_stories;
-export { AreaDisabled, AreaFullExample, AreaType, AreaWithDescription, AreaWithErrors, AreaWithLabel, AreaWithLabelRequired, AreaWithNotes, AreaWithValidateFunction, Compact, CompactDisabled, CompactFullExample, CompactWithDescription, CompactWithErrors, CompactWithLabel, CompactWithLabelRequired, CompactWithNotes, CompactWithValidateFunction, Default, Documentation };
+export { AreaDisabled, AreaFullExample, AreaType, AreaWithDescription, AreaWithErrors, AreaWithLabel, AreaWithLabelRequired, AreaWithNotes, AreaWithValidateFunction, Compact, CompactDisabled, CompactFullExample, CompactWithDescription, CompactWithErrors, CompactWithLabel, CompactWithLabelRequired, CompactWithLongFileNameInNarrowContainer, CompactWithNotes, CompactWithValidateFunction, Default, Documentation };
 
 //# sourceMappingURL=FilePicker.stories.js.map

package/FilePicker/FilePicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/FilePicker.stories.js","sources":["../../src/FilePicker/FilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { type FileItemDto, FilePicker } from \"~/FilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\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: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePicker> = {\n    title: \"Components/Form/FilePicker\",\n    component: FilePicker,\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 [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePicker>;\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 <FilePicker {...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 <FilePicker {...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 [selectedFile, setSelectedFile] = useState(args.value);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setSelectedFile(args.value);\n        }, [args.value]);\n\n        const handleSelect = () => {\n            setSelectedFile(getFile());\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any) => {\n            if (file) {\n                console.log(\"Editing file:\", file);\n                alert(`Editing File: ${file.name}`);\n            }\n        };\n\n        const handleRemove = () => {\n            setSelectedFile(null);\n\n            if (args.required) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !selectedFile) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFile]);\n\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={handleSelect}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Image\",\n        required: true,\n        disabled: false,\n        description: \"Select a file to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB\",\n        type: \"area\",\n        value: null,\n        validation: undefined,\n        onSelectItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the file picker when set to true\",\n            control: \"boolean\"\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        type: {\n            description: \"The visual style of the file picker\",\n            control: \"radio\",\n            options: [\"area\", \"compact\"]\n        },\n        value: {\n            description: \"The currently selected file\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description: \"Function called when a file is selected\"\n        },\n        onEditItem: {\n            description: \"Function called when a file is edited\"\n        },\n        onRemoveItem: {\n            description: \"Function called when a file is removed\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePicker","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","useEffect","handleSelect","handleEdit","file","console","handleRemove"],"mappings":"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"}
+{"version":3,"file":"FilePicker/FilePicker.stories.js","sources":["../../src/FilePicker/FilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { type FileItemDto, FilePicker } from \"~/FilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\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: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePicker> = {\n    title: \"Components/Form/FilePicker\",\n    component: FilePicker,\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 [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePicker>;\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 <FilePicker {...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 <FilePicker {...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\n/**\n * Reproduces the Website Builder style sidebar at its 206px value column: the preview stacks,\n * the file name truncates in the middle so the extension and version suffix survive, and the\n * actions spell themselves out instead of costing a fixed block of the row.\n */\nexport const CompactWithLongFileNameInNarrowContainer: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState<FileItemDto | null>({\n            name: \"tide-cc-statuses-2026-08-21-final-v2.png\",\n            mimeType: \"image/png\",\n            size: 674161,\n            url: \"https://picsum.photos/1200/800\"\n        });\n\n        return (\n            <div style={{ width: 206 }}>\n                <FilePicker\n                    {...args}\n                    value={selectedFile}\n                    onSelectItem={() => setSelectedFile(getFile())}\n                    onRemoveItem={() => setSelectedFile(null)}\n                />\n            </div>\n        );\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setSelectedFile(args.value);\n        }, [args.value]);\n\n        const handleSelect = () => {\n            setSelectedFile(getFile());\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any) => {\n            if (file) {\n                console.log(\"Editing file:\", file);\n                alert(`Editing File: ${file.name}`);\n            }\n        };\n\n        const handleRemove = () => {\n            setSelectedFile(null);\n\n            if (args.required) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !selectedFile) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFile]);\n\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={handleSelect}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Image\",\n        required: true,\n        disabled: false,\n        description: \"Select a file to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB\",\n        type: \"area\",\n        value: null,\n        validation: undefined,\n        onSelectItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the file picker when set to true\",\n            control: \"boolean\"\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        type: {\n            description: \"The visual style of the file picker\",\n            control: \"radio\",\n            options: [\"area\", \"compact\"]\n        },\n        value: {\n            description: \"The currently selected file\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description: \"Function called when a file is selected\"\n        },\n        onEditItem: {\n            description: \"Function called when a file is edited\"\n        },\n        onRemoveItem: {\n            description: \"Function called when a file is removed\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePicker","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","CompactWithLongFileNameInNarrowContainer","Documentation","useEffect","handleSelect","handleEdit","file","console","handleRemove"],"mappings":"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"}

package/FilePicker/primitives/components/previews/ItemActions.js

@@ -11,7 +11,7 @@ const ItemActions = ({ disabled, onRemoveItem, onEditItem, onReplaceItem, small,
     return /*#__PURE__*/ react.createElement("div", {
         ...props,
         className: cn("flex justify-center items-center gap-xs", className)
-    }, small && onReplaceItem && /*#__PURE__*/ react.createElement(IconButton, {
+    }, onReplaceItem && /*#__PURE__*/ react.createElement(IconButton, {
         icon: /*#__PURE__*/ react.createElement(Icon, {
             icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
             label: "Replace",

package/FilePicker/primitives/components/previews/ItemActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/ItemActions.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ReplaceIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface ItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    onReplaceItem?: () => void;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemActions = ({\n    disabled,\n    onRemoveItem,\n    onEditItem,\n    onReplaceItem,\n    small,\n    className,\n    ...props\n}: ItemActionsProps) => {\n    const iconSize = small ? \"default\" : \"lg\";\n    const buttonSize = small ? \"xs\" : \"sm\";\n\n    return (\n        <div {...props} className={cn(\"flex justify-center items-center gap-xs\", className)}>\n            {small && onReplaceItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<ReplaceIcon />}\n                            label={\"Replace\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onReplaceItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onEditItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<EditIcon />}\n                            label={\"Edit\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onEditItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onRemoveItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<TrashIcon />}\n                            label={\"Remove\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onRemoveItem}\n                    disabled={disabled}\n                />\n            )}\n        </div>\n    );\n};\n\nexport { ItemActions, type ItemActionsProps };\n"],"names":["ItemActions","disabled","onRemoveItem","onEditItem","onReplaceItem","small","className","props","iconSize","buttonSize","cn","IconButton","Icon","ReplaceIcon","EditIcon","TrashIcon"],"mappings":";;;;;;;AAgBA,MAAMA,cAAc,CAAC,EACjBC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,aAAa,EACbC,KAAK,EACLC,SAAS,EACT,GAAGC,OACY;IACf,MAAMC,WAAWH,QAAQ,YAAY;IACrC,MAAMI,aAAaJ,QAAQ,OAAO;IAElC,OAAO,WAAP,GACI,oBAAC;QAAK,GAAGE,KAAK;QAAE,WAAWG,GAAG,2CAA2CJ;OACpED,SAASD,iBAAiB,WAAjBA,GACN,oBAACO,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACC,gBAAWA;YAClB,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAMJ;QACN,UAAUD;QACV,SAASJ;QACT,UAAUH;QAIjBE,cAAc,WAAdA,GACG,oBAACQ,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACE,yBAAQA;YACf,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAML;QACN,UAAUD;QACV,SAASL;QACT,UAAUF;QAIjBC,gBAAgB,WAAhBA,GACG,oBAACS,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACG,2BAASA;YAChB,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAMN;QACN,UAAUD;QACV,SAASN;QACT,UAAUD;;AAK9B"}
+{"version":3,"file":"FilePicker/primitives/components/previews/ItemActions.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ReplaceIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface ItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    onReplaceItem?: () => void;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemActions = ({\n    disabled,\n    onRemoveItem,\n    onEditItem,\n    onReplaceItem,\n    small,\n    className,\n    ...props\n}: ItemActionsProps) => {\n    const iconSize = small ? \"default\" : \"lg\";\n    const buttonSize = small ? \"xs\" : \"sm\";\n\n    return (\n        <div {...props} className={cn(\"flex justify-center items-center gap-xs\", className)}>\n            {/* Replace is the action a populated picker mainly exists for, and it was only ever\n                shown in the `small` layout - elsewhere it hid behind clicking the thumbnail. */}\n            {onReplaceItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<ReplaceIcon />}\n                            label={\"Replace\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onReplaceItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onEditItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<EditIcon />}\n                            label={\"Edit\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onEditItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onRemoveItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<TrashIcon />}\n                            label={\"Remove\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onRemoveItem}\n                    disabled={disabled}\n                />\n            )}\n        </div>\n    );\n};\n\nexport { ItemActions, type ItemActionsProps };\n"],"names":["ItemActions","disabled","onRemoveItem","onEditItem","onReplaceItem","small","className","props","iconSize","buttonSize","cn","IconButton","Icon","ReplaceIcon","EditIcon","TrashIcon"],"mappings":";;;;;;;AAgBA,MAAMA,cAAc,CAAC,EACjBC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,aAAa,EACbC,KAAK,EACLC,SAAS,EACT,GAAGC,OACY;IACf,MAAMC,WAAWH,QAAQ,YAAY;IACrC,MAAMI,aAAaJ,QAAQ,OAAO;IAElC,OAAO,WAAP,GACI,oBAAC;QAAK,GAAGE,KAAK;QAAE,WAAWG,GAAG,2CAA2CJ;OAGpEF,iBAAiB,WAAjBA,GACG,oBAACO,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACC,gBAAWA;YAClB,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAMJ;QACN,UAAUD;QACV,SAASJ;QACT,UAAUH;QAIjBE,cAAc,WAAdA,GACG,oBAACQ,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACE,yBAAQA;YACf,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAML;QACN,UAAUD;QACV,SAASL;QACT,UAAUF;QAIjBC,gBAAgB,WAAhBA,GACG,oBAACS,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACG,2BAASA;YAChB,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAMN;QACN,UAAUD;QACV,SAASN;QACT,UAAUD;;AAK9B"}

package/FilePicker/primitives/components/previews/ItemDescription.js

@@ -7,7 +7,7 @@ const ItemDescription = ({ className, disabled, item, small, ...props })=>{
         unitSeparator: " "
     });
     return /*#__PURE__*/ react.createElement("div", {
-        className: cn("flex flex-col gap-xxs overflow-hidden flex-1 min-w-0", className),
+        className: cn("flex flex-col gap-xxs overflow-hidden min-w-0", className),
         ...props
     }, /*#__PURE__*/ react.createElement(Text, {
         size: "sm",

package/FilePicker/primitives/components/previews/ItemDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/ItemDescription.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\ninterface ItemDescriptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    item: FileItemFormatted;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemDescription = ({ className, disabled, item, small, ...props }: ItemDescriptionProps) => {\n    const formattedSize = item.size && bytes.format(item.size, { unitSeparator: \" \" });\n\n    return (\n        <div\n            className={cn(\"flex flex-col gap-xxs overflow-hidden flex-1 min-w-0\", className)}\n            {...props}\n        >\n            <Text\n                size=\"sm\"\n                as=\"div\"\n                className={cn(\n                    \"truncate overflow-hidden whitespace-nowrap w-full\",\n                    disabled ? \"text-neutral-disabled\" : \"text-neutral-primary\"\n                )}\n            >\n                {item.name}\n            </Text>\n            {!small && (formattedSize || item.mimeType) && (\n                <Text\n                    size=\"sm\"\n                    className={cn(\n                        \"truncate overflow-hidden whitespace-nowrap w-full\",\n                        disabled ? \"text-neutral-disabled\" : \"text-neutral-muted\"\n                    )}\n                >\n                    {[formattedSize, item.mimeType].filter(Boolean).join(\" - \")}\n                </Text>\n            )}\n        </div>\n    );\n};\n\nexport { ItemDescription, type ItemDescriptionProps };\n"],"names":["ItemDescription","className","disabled","item","small","props","formattedSize","bytes","cn","Text","Boolean"],"mappings":";;;;AAYA,MAAMA,kBAAkB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,OAA6B;IACzF,MAAMC,gBAAgBH,KAAK,IAAI,IAAII,MAAM,MAAM,CAACJ,KAAK,IAAI,EAAE;QAAE,eAAe;IAAI;IAEhF,OAAO,WAAP,GACI,oBAAC;QACG,WAAWK,GAAG,wDAAwDP;QACrE,GAAGI,KAAK;qBAET,oBAACI,MAAIA;QACD,MAAK;QACL,IAAG;QACH,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxCC,KAAK,IAAI,GAEb,CAACC,SAAUE,CAAAA,iBAAiBH,KAAK,QAAO,mBACrC,oBAACM,MAAIA;QACD,MAAK;QACL,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxC;QAACI;QAAeH,KAAK,QAAQ;KAAC,CAAC,MAAM,CAACO,SAAS,IAAI,CAAC;AAKzE"}
+{"version":3,"file":"FilePicker/primitives/components/previews/ItemDescription.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\ninterface ItemDescriptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    item: FileItemFormatted;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemDescription = ({ className, disabled, item, small, ...props }: ItemDescriptionProps) => {\n    const formattedSize = item.size && bytes.format(item.size, { unitSeparator: \" \" });\n\n    return (\n        <div className={cn(\"flex flex-col gap-xxs overflow-hidden min-w-0\", className)} {...props}>\n            <Text\n                size=\"sm\"\n                as=\"div\"\n                className={cn(\n                    \"truncate overflow-hidden whitespace-nowrap w-full\",\n                    disabled ? \"text-neutral-disabled\" : \"text-neutral-primary\"\n                )}\n            >\n                {item.name}\n            </Text>\n            {!small && (formattedSize || item.mimeType) && (\n                <Text\n                    size=\"sm\"\n                    className={cn(\n                        \"truncate overflow-hidden whitespace-nowrap w-full\",\n                        disabled ? \"text-neutral-disabled\" : \"text-neutral-muted\"\n                    )}\n                >\n                    {[formattedSize, item.mimeType].filter(Boolean).join(\" - \")}\n                </Text>\n            )}\n        </div>\n    );\n};\n\nexport { ItemDescription, type ItemDescriptionProps };\n"],"names":["ItemDescription","className","disabled","item","small","props","formattedSize","bytes","cn","Text","Boolean"],"mappings":";;;;AAYA,MAAMA,kBAAkB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,OAA6B;IACzF,MAAMC,gBAAgBH,KAAK,IAAI,IAAII,MAAM,MAAM,CAACJ,KAAK,IAAI,EAAE;QAAE,eAAe;IAAI;IAEhF,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWK,GAAG,iDAAiDP;QAAa,GAAGI,KAAK;qBACrF,oBAACI,MAAIA;QACD,MAAK;QACL,IAAG;QACH,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxCC,KAAK,IAAI,GAEb,CAACC,SAAUE,CAAAA,iBAAiBH,KAAK,QAAO,mBACrC,oBAACM,MAAIA;QACD,MAAK;QACL,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxC;QAACI;QAAeH,KAAK,QAAQ;KAAC,CAAC,MAAM,CAACO,SAAS,IAAI,CAAC;AAKzE"}

package/FilePicker/primitives/components/previews/RichItemPreview/FileType.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { FileItemFormatted } from "../../../../../FilePicker/index.js";
+type FileTypeProps = Pick<FileItemFormatted, "mimeType" | "name">;
+/**
+ * The stand-in for a file that cannot be shown as a picture: an icon of its format, falling back
+ * to a generic one for anything unrecognised.
+ */
+declare const FileType: ({ mimeType, name }: FileTypeProps) => React.JSX.Element;
+export { FileType, type FileTypeProps };

package/FilePicker/primitives/components/previews/RichItemPreview/FileType.js

@@ -0,0 +1,45 @@
+import react from "react";
+import csv from "../assets/csv.js";
+import doc from "../assets/doc.js";
+import docx from "../assets/docx.js";
+import file from "../assets/file.js";
+import pdf from "../assets/pdf.js";
+import ppt from "../assets/ppt.js";
+import pptx from "../assets/pptx.js";
+import txt from "../assets/txt.js";
+import xls from "../assets/xls.js";
+import xlsx from "../assets/xlsx.js";
+const FileType = ({ mimeType = "", name })=>{
+    const getMimeTypeSrc = (mimeType)=>{
+        switch(mimeType){
+            case "text/csv":
+                return csv;
+            case "application/msword":
+                return doc;
+            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+                return docx;
+            case "application/pdf":
+                return pdf;
+            case "application/vnd.ms-powerpoint":
+                return ppt;
+            case "application/vnd.openxmlformats-officedocument.presentationml.presentation":
+                return pptx;
+            case "text/plain":
+                return txt;
+            case "application/vnd.ms-excel":
+                return xls;
+            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+                return xlsx;
+            default:
+                return file;
+        }
+    };
+    return /*#__PURE__*/ react.createElement("img", {
+        src: getMimeTypeSrc(mimeType),
+        alt: name,
+        className: "size-full object-contain p-sm-extra"
+    });
+};
+export { FileType };
+
+//# sourceMappingURL=FileType.js.map

package/FilePicker/primitives/components/previews/RichItemPreview/FileType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/FileType.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/FileType.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\nimport csvThumb from \"../assets/csv.svg\";\nimport docThumb from \"../assets/doc.svg\";\nimport docxThumb from \"../assets/docx.svg\";\nimport fileThumb from \"../assets/file.svg\";\nimport pdfThumb from \"../assets/pdf.svg\";\nimport pptThumb from \"../assets/ppt.svg\";\nimport pptxThumb from \"../assets/pptx.svg\";\nimport txtThumb from \"../assets/txt.svg\";\nimport xlsThumb from \"../assets/xls.svg\";\nimport xlsxThumb from \"../assets/xlsx.svg\";\n\ntype FileTypeProps = Pick<FileItemFormatted, \"mimeType\" | \"name\">;\n\n/**\n * The stand-in for a file that cannot be shown as a picture: an icon of its format, falling back\n * to a generic one for anything unrecognised.\n */\nconst FileType = ({ mimeType = \"\", name }: FileTypeProps) => {\n    const getMimeTypeSrc = (mimeType: string) => {\n        switch (mimeType) {\n            case \"text/csv\": // .csv\n                return csvThumb;\n            case \"application/msword\": // .doc\n                return docThumb;\n            case \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\": // .docx\n                return docxThumb;\n            case \"application/pdf\": // .pdf\n                return pdfThumb;\n            case \"application/vnd.ms-powerpoint\": // .ppt\n                return pptThumb;\n            case \"application/vnd.openxmlformats-officedocument.presentationml.presentation\": // .pptx\n                return pptxThumb;\n            case \"text/plain\": // .txt\n                return txtThumb;\n            case \"application/vnd.ms-excel\": // .xls\n                return xlsThumb;\n            case \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\": // .xlsx\n                return xlsxThumb;\n            default:\n                return fileThumb;\n        }\n    };\n\n    return (\n        <img\n            src={getMimeTypeSrc(mimeType)}\n            alt={name}\n            className=\"size-full object-contain p-sm-extra\"\n        />\n    );\n};\n\nexport { FileType, type FileTypeProps };\n"],"names":["FileType","mimeType","name","getMimeTypeSrc","csvThumb","docThumb","docxThumb","pdfThumb","pptThumb","pptxThumb","txtThumb","xlsThumb","xlsxThumb","fileThumb"],"mappings":";;;;;;;;;;;AAoBA,MAAMA,WAAW,CAAC,EAAEC,WAAW,EAAE,EAAEC,IAAI,EAAiB;IACpD,MAAMC,iBAAiB,CAACF;QACpB,OAAQA;YACJ,KAAK;gBACD,OAAOG;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX;gBACI,OAAOC;QACf;IACJ;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,KAAKV,eAAeF;QACpB,KAAKC;QACL,WAAU;;AAGtB"}

package/FilePicker/primitives/components/previews/RichItemPreview/Placeholder.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { FileItemFormatted } from "../../../../../FilePicker/index.js";
+type PlaceholderProps = Pick<FileItemFormatted, "name">;
+/**
+ * Shown when the caller asks for a placeholder rather than the file's own preview.
+ */
+declare const Placeholder: ({ name }: PlaceholderProps) => React.JSX.Element;
+export { Placeholder, type PlaceholderProps };

package/FilePicker/primitives/components/previews/RichItemPreview/Placeholder.js

@@ -0,0 +1,14 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/image.svg";
+import { Icon } from "../../../../../Icon/index.js";
+const Placeholder = ({ name })=>/*#__PURE__*/ react.createElement("div", {
+        className: "size-full flex justify-center items-center bg-transparent"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: name,
+        size: "lg",
+        color: "neutral-light"
+    }));
+export { Placeholder };
+
+//# sourceMappingURL=Placeholder.js.map

package/FilePicker/primitives/components/previews/RichItemPreview/Placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/Placeholder.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/Placeholder.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as PlaceholderIcon } from \"@webiny/icons/image.svg\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\ntype PlaceholderProps = Pick<FileItemFormatted, \"name\">;\n\n/**\n * Shown when the caller asks for a placeholder rather than the file's own preview.\n */\nconst Placeholder = ({ name }: PlaceholderProps) => {\n    return (\n        <div className={\"size-full flex justify-center items-center bg-transparent\"}>\n            <Icon icon={<PlaceholderIcon />} label={name} size={\"lg\"} color={\"neutral-light\"} />\n        </div>\n    );\n};\n\nexport { Placeholder, type PlaceholderProps };\n"],"names":["Placeholder","name","Icon","PlaceholderIcon"],"mappings":";;;AAUA,MAAMA,cAAc,CAAC,EAAEC,IAAI,EAAoB,GACpC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,MAAIA;QAAC,oBAAM,oBAACC,gBAAeA;QAAK,OAAOF;QAAM,MAAM;QAAM,OAAO"}

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js

@@ -1,36 +1,76 @@
 import react from "react";
+import bytes from "bytes";
 import { cn, makeDecoratable } from "../../../../../utils.js";
+import { Text } from "../../../../../Text/index.js";
 import { RichItemThumbnail } from "./RichItemThumbnail.js";
+import { ThumbnailActions } from "./ThumbnailActions.js";
 import { ItemDescription } from "../ItemDescription.js";
 import { ItemActions } from "../ItemActions.js";
+import { TruncatedFileName } from "../TruncatedFileName.js";
 import { previewVariants } from "../variants.js";
-const DecoratableRichItemPreview = ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props })=>/*#__PURE__*/ react.createElement("div", {
+const DecoratableRichItemPreview = ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props })=>{
+    const actions = {
+        onRemoveItem,
+        onReplaceItem,
+        onEditItem,
+        disabled
+    };
+    const formattedSize = value.size ? bytes.format(value.size, {
+        unitSeparator: " ",
+        decimalPlaces: 0
+    }) : "";
+    const details = [
+        value.mimeType,
+        formattedSize
+    ].filter(Boolean).join(" - ");
+    return /*#__PURE__*/ react.createElement("div", {
         "data-testid": "image-preview",
-        className: cn("w-full rounded-md", previewVariants({
+        className: cn("@container w-full rounded-md", previewVariants({
             variant,
             disabled
         }), className),
         ...props
     }, /*#__PURE__*/ react.createElement("div", {
         "data-role": "select-image",
-        className: "flex items-center justify-between gap-sm-extra min-w-0"
+        className: "@min-[280px]:hidden"
     }, /*#__PURE__*/ react.createElement("div", {
-        className: "flex items-center justify-between flex-1 cursor-pointer gap-sm-extra self-stretch min-w-0",
+        className: "flex flex-col gap-xs p-xs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "group relative cursor-pointer",
+        onClick: onReplaceItem
+    }, /*#__PURE__*/ react.createElement(RichItemThumbnail, {
+        ...value,
+        variant: "banner",
+        disabled: disabled,
+        preview: preview
+    }), /*#__PURE__*/ react.createElement(ThumbnailActions, actions)), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-xxs min-w-0 px-xxs pb-xxs"
+    }, /*#__PURE__*/ react.createElement(TruncatedFileName, {
+        name: value.name,
+        className: disabled ? "text-neutral-disabled" : "text-neutral-primary"
+    }), details ? /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: cn("truncate", disabled ? "text-neutral-disabled" : "text-neutral-muted")
+    }, details) : null))), /*#__PURE__*/ react.createElement("div", {
+        "data-role": "select-image",
+        className: "hidden @min-[280px]:flex items-center gap-sm-extra min-w-0"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "shrink-0 cursor-pointer",
         onClick: onReplaceItem
     }, /*#__PURE__*/ react.createElement(RichItemThumbnail, {
         ...value,
         disabled: disabled,
         preview: preview
-    }), /*#__PURE__*/ react.createElement(ItemDescription, {
+    })), /*#__PURE__*/ react.createElement(ItemDescription, {
         item: value,
-        disabled: disabled
-    })), /*#__PURE__*/ react.createElement(ItemActions, {
-        onRemoveItem: onRemoveItem,
-        onReplaceItem: onReplaceItem,
-        onEditItem: onEditItem,
         disabled: disabled,
-        className: "pr-sm-extra"
+        onClick: onReplaceItem,
+        className: "grow basis-0 cursor-pointer"
+    }), /*#__PURE__*/ react.createElement(ItemActions, {
+        ...actions,
+        className: "ml-auto pr-sm-extra"
     })));
+};
 const RichItemPreview = makeDecoratable("RichItemPreview", DecoratableRichItemPreview);
 export { RichItemPreview };
 

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { RichItemThumbnail } from \"./RichItemThumbnail.js\";\nimport { ItemDescription } from \"../ItemDescription.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\n\ntype RichItemPreviewProps = FilePreviewDefaultProps & {\n    preview?: \"thumbnail\" | \"file-type\" | \"placeholder\";\n};\n\nconst DecoratableRichItemPreview = ({\n    className,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem,\n    value,\n    variant,\n    preview,\n    ...props\n}: RichItemPreviewProps) => {\n    return (\n        <div\n            data-testid=\"image-preview\"\n            className={cn(\"w-full rounded-md\", previewVariants({ variant, disabled }), className)}\n            {...props}\n        >\n            <div\n                data-role=\"select-image\"\n                className=\"flex items-center justify-between gap-sm-extra min-w-0\"\n            >\n                <div\n                    className=\"flex items-center justify-between flex-1 cursor-pointer gap-sm-extra self-stretch min-w-0\"\n                    onClick={onReplaceItem}\n                >\n                    <RichItemThumbnail {...value} disabled={disabled} preview={preview} />\n                    <ItemDescription item={value} disabled={disabled} />\n                </div>\n\n                <ItemActions\n                    onRemoveItem={onRemoveItem}\n                    onReplaceItem={onReplaceItem}\n                    onEditItem={onEditItem}\n                    disabled={disabled}\n                    className={\"pr-sm-extra\"}\n                />\n            </div>\n        </div>\n    );\n};\n\nconst RichItemPreview = makeDecoratable(\"RichItemPreview\", DecoratableRichItemPreview);\n\nexport { RichItemPreview, type RichItemPreviewProps };\n"],"names":["DecoratableRichItemPreview","className","disabled","onRemoveItem","onReplaceItem","onEditItem","value","variant","preview","props","cn","previewVariants","RichItemThumbnail","ItemDescription","ItemActions","RichItemPreview","makeDecoratable"],"mappings":";;;;;;AAYA,MAAMA,6BAA6B,CAAC,EAChCC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,OAAO,EACP,GAAGC,OACgB,GACZ,WAAP,GACI,oBAAC;QACG,eAAY;QACZ,WAAWC,GAAG,qBAAqBC,gBAAgB;YAAEJ;YAASL;QAAS,IAAID;QAC1E,GAAGQ,KAAK;qBAET,oBAAC;QACG,aAAU;QACV,WAAU;qBAEV,oBAAC;QACG,WAAU;QACV,SAASL;qBAET,oBAACQ,mBAAiBA;QAAE,GAAGN,KAAK;QAAE,UAAUJ;QAAU,SAASM;sBAC3D,oBAACK,iBAAeA;QAAC,MAAMP;QAAO,UAAUJ;uBAG5C,oBAACY,aAAWA;QACR,cAAcX;QACd,eAAeC;QACf,YAAYC;QACZ,UAAUH;QACV,WAAW;;AAO/B,MAAMa,kBAAkBC,gBAAgB,mBAAmBhB"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { RichItemThumbnail } from \"./RichItemThumbnail.js\";\nimport { ThumbnailActions } from \"./ThumbnailActions.js\";\nimport { ItemDescription } from \"../ItemDescription.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\nimport { TruncatedFileName } from \"../TruncatedFileName.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\n\ntype RichItemPreviewProps = FilePreviewDefaultProps & {\n    preview?: \"thumbnail\" | \"file-type\" | \"placeholder\";\n};\n\nconst DecoratableRichItemPreview = ({\n    className,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem,\n    value,\n    variant,\n    preview,\n    ...props\n}: RichItemPreviewProps) => {\n    const actions = { onRemoveItem, onReplaceItem, onEditItem, disabled };\n\n    // Type and size share a line of their own beneath the name, so the name gets the full width\n    // and the two secondary facts read as one group rather than crowding it.\n    const formattedSize = value.size\n        ? bytes.format(value.size, { unitSeparator: \" \", decimalPlaces: 0 })\n        : \"\";\n    const details = [value.mimeType, formattedSize].filter(Boolean).join(\" - \");\n\n    return (\n        <div\n            data-testid=\"image-preview\"\n            className={cn(\n                \"@container w-full rounded-md\",\n                previewVariants({ variant, disabled }),\n                className\n            )}\n            {...props}\n        >\n            {/* Two layouts, chosen by the preview's own width rather than the viewport's, because\n                the same component renders in a ~200px sidebar and in a wide form field. Below\n                280px a side-by-side row cannot give the file name a readable share of the width,\n                so the thumbnail goes full width with the name and details beneath it, and the\n                actions move onto the thumbnail rather than costing a row of their own. */}\n            <div data-role=\"select-image\" className={\"@min-[280px]:hidden\"}>\n                <div className={\"flex flex-col gap-xs p-xs\"}>\n                    <div className={\"group relative cursor-pointer\"} onClick={onReplaceItem}>\n                        <RichItemThumbnail\n                            {...value}\n                            variant={\"banner\"}\n                            disabled={disabled}\n                            preview={preview}\n                        />\n                        <ThumbnailActions {...actions} />\n                    </div>\n\n                    <div className={\"flex flex-col gap-xxs min-w-0 px-xxs pb-xxs\"}>\n                        <TruncatedFileName\n                            name={value.name}\n                            className={disabled ? \"text-neutral-disabled\" : \"text-neutral-primary\"}\n                        />\n                        {details ? (\n                            <Text\n                                size=\"sm\"\n                                className={cn(\n                                    \"truncate\",\n                                    disabled ? \"text-neutral-disabled\" : \"text-neutral-muted\"\n                                )}\n                            >\n                                {details}\n                            </Text>\n                        ) : null}\n                    </div>\n                </div>\n            </div>\n\n            <div\n                data-role=\"select-image\"\n                className={\"hidden @min-[280px]:flex items-center gap-sm-extra min-w-0\"}\n            >\n                <div className={\"shrink-0 cursor-pointer\"} onClick={onReplaceItem}>\n                    <RichItemThumbnail {...value} disabled={disabled} preview={preview} />\n                </div>\n\n                <ItemDescription\n                    item={value}\n                    disabled={disabled}\n                    onClick={onReplaceItem}\n                    className={\"grow basis-0 cursor-pointer\"}\n                />\n\n                <ItemActions {...actions} className={\"ml-auto pr-sm-extra\"} />\n            </div>\n        </div>\n    );\n};\n\nconst RichItemPreview = makeDecoratable(\"RichItemPreview\", DecoratableRichItemPreview);\n\nexport { RichItemPreview, type RichItemPreviewProps };\n"],"names":["DecoratableRichItemPreview","className","disabled","onRemoveItem","onReplaceItem","onEditItem","value","variant","preview","props","actions","formattedSize","bytes","details","Boolean","cn","previewVariants","RichItemThumbnail","ThumbnailActions","TruncatedFileName","Text","ItemDescription","ItemActions","RichItemPreview","makeDecoratable"],"mappings":";;;;;;;;;;AAgBA,MAAMA,6BAA6B,CAAC,EAChCC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,OAAO,EACP,GAAGC,OACgB;IACnB,MAAMC,UAAU;QAAEP;QAAcC;QAAeC;QAAYH;IAAS;IAIpE,MAAMS,gBAAgBL,MAAM,IAAI,GAC1BM,MAAM,MAAM,CAACN,MAAM,IAAI,EAAE;QAAE,eAAe;QAAK,eAAe;IAAE,KAChE;IACN,MAAMO,UAAU;QAACP,MAAM,QAAQ;QAAEK;KAAc,CAAC,MAAM,CAACG,SAAS,IAAI,CAAC;IAErE,OAAO,WAAP,GACI,oBAAC;QACG,eAAY;QACZ,WAAWC,GACP,gCACAC,gBAAgB;YAAET;YAASL;QAAS,IACpCD;QAEH,GAAGQ,KAAK;qBAOT,oBAAC;QAAI,aAAU;QAAe,WAAW;qBACrC,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;QAAiC,SAASL;qBACtD,oBAACa,mBAAiBA;QACb,GAAGX,KAAK;QACT,SAAS;QACT,UAAUJ;QACV,SAASM;sBAEb,oBAACU,kBAAqBR,WAAAA,WAAAA,GAG1B,oBAAC;QAAI,WAAW;qBACZ,oBAACS,mBAAiBA;QACd,MAAMb,MAAM,IAAI;QAChB,WAAWJ,WAAW,0BAA0B;QAEnDW,UAAU,WAAVA,GACG,oBAACO,MAAIA;QACD,MAAK;QACL,WAAWL,GACP,YACAb,WAAW,0BAA0B;OAGxCW,WAEL,uBAKhB,oBAAC;QACG,aAAU;QACV,WAAW;qBAEX,oBAAC;QAAI,WAAW;QAA2B,SAAST;qBAChD,oBAACa,mBAAiBA;QAAE,GAAGX,KAAK;QAAE,UAAUJ;QAAU,SAASM;uBAG/D,oBAACa,iBAAeA;QACZ,MAAMf;QACN,UAAUJ;QACV,SAASE;QACT,WAAW;sBAGf,oBAACkB,aAAWA;QAAE,GAAGZ,OAAO;QAAE,WAAW;;AAIrD;AAEA,MAAMa,kBAAkBC,gBAAgB,mBAAmBxB"}

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.d.ts

@@ -4,6 +4,11 @@ import type { RichItemPreviewProps } from "../../../../../FilePicker/primitives/
 type RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & FileItemFormatted & {
     preview?: RichItemPreviewProps["preview"];
     disabled?: boolean;
+    /**
+     * `tile` is the fixed square that sits beside the file details; `banner` spans the full
+     * width of a stacked layout, where the panel is too narrow to afford a column for it.
+     */
+    variant?: "tile" | "banner";
 };
-declare const RichItemThumbnail: ({ url, name, className, mimeType, preview, disabled }: RichItemThumbnailProps) => React.JSX.Element;
+declare const RichItemThumbnail: ({ url, name, className, mimeType, preview, disabled, variant }: RichItemThumbnailProps) => React.JSX.Element;
 export { RichItemThumbnail, type RichItemThumbnailProps };

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js

@@ -1,70 +1,16 @@
 import react from "react";
-import { ReactComponent } from "@webiny/icons/image.svg";
-import { Icon } from "../../../../../Icon/index.js";
 import { cn } from "../../../../../utils.js";
-import csv from "../assets/csv.js";
-import doc from "../assets/doc.js";
-import docx from "../assets/docx.js";
-import file from "../assets/file.js";
-import pdf from "../assets/pdf.js";
-import ppt from "../assets/ppt.js";
-import pptx from "../assets/pptx.js";
-import txt from "../assets/txt.js";
-import xls from "../assets/xls.js";
-import xlsx from "../assets/xlsx.js";
-const Thumbnail = ({ url, name })=>/*#__PURE__*/ react.createElement("div", {
-        className: "size-full bg-neutral-muted"
-    }, /*#__PURE__*/ react.createElement("img", {
-        src: url,
-        alt: name,
-        className: "size-full object-cover"
-    }));
-const FileType = ({ mimeType = "", name })=>{
-    const getMimeTypeSrc = (mimeType)=>{
-        switch(mimeType){
-            case "text/csv":
-                return csv;
-            case "application/msword":
-                return doc;
-            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
-                return docx;
-            case "application/pdf":
-                return pdf;
-            case "application/vnd.ms-powerpoint":
-                return ppt;
-            case "application/vnd.openxmlformats-officedocument.presentationml.presentation":
-                return pptx;
-            case "text/plain":
-                return txt;
-            case "application/vnd.ms-excel":
-                return xls;
-            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
-                return xlsx;
-            default:
-                return file;
-        }
-    };
-    return /*#__PURE__*/ react.createElement("img", {
-        src: getMimeTypeSrc(mimeType),
-        alt: name,
-        className: "size-full p-sm-extra"
-    });
-};
-const Placeholder = ({ name })=>/*#__PURE__*/ react.createElement("div", {
-        className: "size-full flex justify-center items-center bg-transparent"
-    }, /*#__PURE__*/ react.createElement(Icon, {
-        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-        label: name,
-        size: "lg",
-        color: "neutral-light"
-    }));
-const RichItemThumbnail = ({ url, name, className, mimeType, preview, disabled })=>{
+import { FileType } from "./FileType.js";
+import { Placeholder } from "./Placeholder.js";
+import { Thumbnail } from "./Thumbnail.js";
+const RichItemThumbnail = ({ url, name, className, mimeType, preview, disabled, variant = "tile" })=>{
     const isImage = mimeType?.startsWith("image/");
     return /*#__PURE__*/ react.createElement("div", {
-        className: cn("size-[56px] m-xs rounded-sm overflow-hidden relative", disabled && "[&_img]:filter [&_img]:grayscale [&_img]:opacity-50", className)
+        className: cn("rounded-sm overflow-hidden relative", "banner" === variant ? "w-full h-[96px]" : "size-[56px] m-xs", disabled && "[&_img]:filter [&_img]:grayscale [&_img]:opacity-50", className)
     }, "thumbnail" === preview || isImage ? /*#__PURE__*/ react.createElement(Thumbnail, {
         url: url,
-        name: name
+        name: name,
+        fit: "banner" === variant ? "contain" : "cover"
     }) : "placeholder" === preview ? /*#__PURE__*/ react.createElement(Placeholder, {
         name: name
     }) : /*#__PURE__*/ react.createElement(FileType, {

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as PlaceholderIcon } from \"@webiny/icons/image.svg\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { RichItemPreviewProps } from \"~/FilePicker/primitives/components/index.js\";\n\nimport csvThumb from \"../assets/csv.svg\";\nimport docThumb from \"../assets/doc.svg\";\nimport docxThumb from \"../assets/docx.svg\";\nimport fileThumb from \"../assets/file.svg\";\nimport pdfThumb from \"../assets/pdf.svg\";\nimport pptThumb from \"../assets/ppt.svg\";\nimport pptxThumb from \"../assets/pptx.svg\";\nimport txtThumb from \"../assets/txt.svg\";\nimport xlsThumb from \"../assets/xls.svg\";\nimport xlsxThumb from \"../assets/xlsx.svg\";\n\ntype RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> &\n    FileItemFormatted & {\n        preview?: RichItemPreviewProps[\"preview\"];\n        disabled?: boolean;\n    };\n\ntype ThumbnailProps = Pick<FileItemFormatted, \"url\" | \"name\">;\n\nconst Thumbnail = ({ url, name }: ThumbnailProps) => {\n    return (\n        <div className={\"size-full bg-neutral-muted\"}>\n            <img src={url} alt={name} className=\"size-full object-cover\" />\n        </div>\n    );\n};\n\ntype FileTypeProps = Pick<FileItemFormatted, \"mimeType\" | \"name\">;\n\nconst FileType = ({ mimeType = \"\", name }: FileTypeProps) => {\n    const getMimeTypeSrc = (mimeType: string) => {\n        switch (mimeType) {\n            case \"text/csv\": // .csv\n                return csvThumb;\n            case \"application/msword\": // .doc\n                return docThumb;\n            case \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\": // .docx\n                return docxThumb;\n            case \"application/pdf\": // .pdf\n                return pdfThumb;\n            case \"application/vnd.ms-powerpoint\": // .ppt\n                return pptThumb;\n            case \"application/vnd.openxmlformats-officedocument.presentationml.presentation\": // .pptx\n                return pptxThumb;\n            case \"text/plain\": // .txt\n                return txtThumb;\n            case \"application/vnd.ms-excel\": // .xls\n                return xlsThumb;\n            case \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\": // .xlsx\n                return xlsxThumb;\n            default:\n                return fileThumb;\n        }\n    };\n\n    return <img src={getMimeTypeSrc(mimeType)} alt={name} className=\"size-full p-sm-extra\" />;\n};\n\ntype PlaceholderProps = Pick<FileItemFormatted, \"name\">;\n\nconst Placeholder = ({ name }: PlaceholderProps) => {\n    return (\n        <div className={\"size-full flex justify-center items-center bg-transparent\"}>\n            <Icon icon={<PlaceholderIcon />} label={name} size={\"lg\"} color={\"neutral-light\"} />\n        </div>\n    );\n};\n\nconst RichItemThumbnail = ({\n    url,\n    name,\n    className,\n    mimeType,\n    preview,\n    disabled\n}: RichItemThumbnailProps) => {\n    const isImage = mimeType?.startsWith(\"image/\");\n\n    return (\n        <div\n            className={cn(\n                \"size-[56px] m-xs rounded-sm overflow-hidden relative\",\n                disabled && \"[&_img]:filter [&_img]:grayscale [&_img]:opacity-50\",\n                className\n            )}\n        >\n            {preview === \"thumbnail\" || isImage ? (\n                <Thumbnail url={url} name={name} />\n            ) : preview === \"placeholder\" ? (\n                <Placeholder name={name} />\n            ) : (\n                <FileType mimeType={mimeType} name={name} />\n            )}\n        </div>\n    );\n};\n\nexport { RichItemThumbnail, type RichItemThumbnailProps };\n"],"names":["Thumbnail","url","name","FileType","mimeType","getMimeTypeSrc","csvThumb","docThumb","docxThumb","pdfThumb","pptThumb","pptxThumb","txtThumb","xlsThumb","xlsxThumb","fileThumb","Placeholder","Icon","PlaceholderIcon","RichItemThumbnail","className","preview","disabled","isImage","cn"],"mappings":";;;;;;;;;;;;;;AA0BA,MAAMA,YAAY,CAAC,EAAEC,GAAG,EAAEC,IAAI,EAAkB,GACrC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,KAAKD;QAAK,KAAKC;QAAM,WAAU;;AAOhD,MAAMC,WAAW,CAAC,EAAEC,WAAW,EAAE,EAAEF,IAAI,EAAiB;IACpD,MAAMG,iBAAiB,CAACD;QACpB,OAAQA;YACJ,KAAK;gBACD,OAAOE;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX;gBACI,OAAOC;QACf;IACJ;IAEA,OAAO,WAAP,GAAO,oBAAC;QAAI,KAAKV,eAAeD;QAAW,KAAKF;QAAM,WAAU;;AACpE;AAIA,MAAMc,cAAc,CAAC,EAAEd,IAAI,EAAoB,GACpC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACe,MAAIA;QAAC,oBAAM,oBAACC,gBAAeA;QAAK,OAAOhB;QAAM,MAAM;QAAM,OAAO;;AAK7E,MAAMiB,oBAAoB,CAAC,EACvBlB,GAAG,EACHC,IAAI,EACJkB,SAAS,EACThB,QAAQ,EACRiB,OAAO,EACPC,QAAQ,EACa;IACrB,MAAMC,UAAUnB,UAAU,WAAW;IAErC,OAAO,WAAP,GACI,oBAAC;QACG,WAAWoB,GACP,wDACAF,YAAY,uDACZF;OAGHC,AAAY,gBAAZA,WAA2BE,UAAU,WAAVA,GACxB,oBAACvB,WAASA;QAAC,KAAKC;QAAK,MAAMC;SAC3BmB,AAAY,kBAAZA,UAA4B,WAAhB,GACZ,oBAACL,aAAWA;QAAC,MAAMd;uBAEnB,oBAACC,UAAQA;QAAC,UAAUC;QAAU,MAAMF;;AAIpD"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { RichItemPreviewProps } from \"~/FilePicker/primitives/components/index.js\";\nimport { FileType } from \"./FileType.js\";\nimport { Placeholder } from \"./Placeholder.js\";\nimport { Thumbnail } from \"./Thumbnail.js\";\n\ntype RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> &\n    FileItemFormatted & {\n        preview?: RichItemPreviewProps[\"preview\"];\n        disabled?: boolean;\n        /**\n         * `tile` is the fixed square that sits beside the file details; `banner` spans the full\n         * width of a stacked layout, where the panel is too narrow to afford a column for it.\n         */\n        variant?: \"tile\" | \"banner\";\n    };\n\nconst RichItemThumbnail = ({\n    url,\n    name,\n    className,\n    mimeType,\n    preview,\n    disabled,\n    variant = \"tile\"\n}: RichItemThumbnailProps) => {\n    const isImage = mimeType?.startsWith(\"image/\");\n\n    return (\n        <div\n            className={cn(\n                \"rounded-sm overflow-hidden relative\",\n                variant === \"banner\" ? \"w-full h-[96px]\" : \"size-[56px] m-xs\",\n                disabled && \"[&_img]:filter [&_img]:grayscale [&_img]:opacity-50\",\n                className\n            )}\n        >\n            {preview === \"thumbnail\" || isImage ? (\n                <Thumbnail url={url} name={name} fit={variant === \"banner\" ? \"contain\" : \"cover\"} />\n            ) : preview === \"placeholder\" ? (\n                <Placeholder name={name} />\n            ) : (\n                <FileType mimeType={mimeType} name={name} />\n            )}\n        </div>\n    );\n};\n\nexport { RichItemThumbnail, type RichItemThumbnailProps };\n"],"names":["RichItemThumbnail","url","name","className","mimeType","preview","disabled","variant","isImage","cn","Thumbnail","Placeholder","FileType"],"mappings":";;;;;AAmBA,MAAMA,oBAAoB,CAAC,EACvBC,GAAG,EACHC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,UAAU,MAAM,EACK;IACrB,MAAMC,UAAUJ,UAAU,WAAW;IAErC,OAAO,WAAP,GACI,oBAAC;QACG,WAAWK,GACP,uCACAF,AAAY,aAAZA,UAAuB,oBAAoB,oBAC3CD,YAAY,uDACZH;OAGHE,AAAY,gBAAZA,WAA2BG,UAAU,WAAVA,GACxB,oBAACE,WAASA;QAAC,KAAKT;QAAK,MAAMC;QAAM,KAAKK,AAAY,aAAZA,UAAuB,YAAY;SACzEF,AAAY,kBAAZA,UAA4B,WAAhB,GACZ,oBAACM,aAAWA;QAAC,MAAMT;uBAEnB,oBAACU,UAAQA;QAAC,UAAUR;QAAU,MAAMF;;AAIpD"}

package/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { FileItemFormatted } from "../../../../../FilePicker/index.js";
+type ThumbnailProps = Pick<FileItemFormatted, "url" | "name"> & {
+    fit: "cover" | "contain";
+};
+/**
+ * The file's own image. `cover` fills its box and crops what does not fit, which suits the small
+ * square tile; `contain` shows the whole picture, which suits the banner.
+ */
+declare const Thumbnail: ({ url, name, fit }: ThumbnailProps) => React.JSX.Element;
+export { Thumbnail, type ThumbnailProps };

package/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.js

@@ -0,0 +1,20 @@
+import react from "react";
+const Thumbnail = ({ url, name, fit })=>{
+    if ("contain" === fit) return /*#__PURE__*/ react.createElement("div", {
+        className: "size-full p-xs bg-neutral-muted flex items-center justify-center"
+    }, /*#__PURE__*/ react.createElement("img", {
+        src: url,
+        alt: name,
+        className: "max-h-full max-w-full rounded-xs"
+    }));
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "size-full bg-neutral-muted"
+    }, /*#__PURE__*/ react.createElement("img", {
+        src: url,
+        alt: name,
+        className: "size-full object-cover"
+    }));
+};
+export { Thumbnail };
+
+//# sourceMappingURL=Thumbnail.js.map

package/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\ntype ThumbnailProps = Pick<FileItemFormatted, \"url\" | \"name\"> & {\n    fit: \"cover\" | \"contain\";\n};\n\n/**\n * The file's own image. `cover` fills its box and crops what does not fit, which suits the small\n * square tile; `contain` shows the whole picture, which suits the banner.\n */\nconst Thumbnail = ({ url, name, fit }: ThumbnailProps) => {\n    if (fit === \"contain\") {\n        return (\n            <div className={\"size-full p-xs bg-neutral-muted flex items-center justify-center\"}>\n                {/*\n                    Capping the element with max-width/max-height, rather than stretching it and\n                    letting `object-contain` letterbox the picture inside it, keeps the element box\n                    and the visible picture the same rectangle. That is what lets the corners round\n                    at all: `border-radius` clips the element, so on a letterboxed image it would\n                    trim empty space and leave the picture square.\n                */}\n                <img src={url} alt={name} className={\"max-h-full max-w-full rounded-xs\"} />\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"size-full bg-neutral-muted\"}>\n            <img src={url} alt={name} className={\"size-full object-cover\"} />\n        </div>\n    );\n};\n\nexport { Thumbnail, type ThumbnailProps };\n"],"names":["Thumbnail","url","name","fit"],"mappings":";AAWA,MAAMA,YAAY,CAAC,EAAEC,GAAG,EAAEC,IAAI,EAAEC,GAAG,EAAkB;IACjD,IAAIA,AAAQ,cAARA,KACA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBAQZ,oBAAC;QAAI,KAAKF;QAAK,KAAKC;QAAM,WAAW;;IAKjD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,KAAKD;QAAK,KAAKC;QAAM,WAAW;;AAGjD"}

package/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface ThumbnailActionsProps {
+    onRemoveItem?: () => void;
+    onEditItem?: () => void;
+    onReplaceItem?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * The file's actions laid over its thumbnail and revealed on hover, mirroring the File Manager's
+ * grid so a file offers the same affordances wherever it is shown. Requires `group` and
+ * `relative` on the element wrapping the thumbnail.
+ */
+declare const ThumbnailActions: ({ className, disabled, onEditItem, onRemoveItem, onReplaceItem }: ThumbnailActionsProps) => React.JSX.Element;
+export { ThumbnailActions, type ThumbnailActionsProps };

package/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.js

@@ -0,0 +1,46 @@
+import react, { useCallback } from "react";
+import { ReactComponent } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as edit_svg_ReactComponent } from "@webiny/icons/edit.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
+import { IconButton } from "../../../../../Button/index.js";
+import { Tooltip } from "../../../../../Tooltip/index.js";
+import { cn } from "../../../../../utils.js";
+const Action = ({ icon, label, onAction, disabled })=>{
+    const onClick = useCallback((event)=>{
+        event.stopPropagation();
+        onAction();
+    }, [
+        onAction
+    ]);
+    return /*#__PURE__*/ react.createElement(Tooltip, {
+        content: label,
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "tertiary",
+            size: "sm",
+            icon: icon,
+            onClick: onClick,
+            disabled: disabled
+        })
+    });
+};
+const ThumbnailActions = ({ className, disabled, onEditItem, onRemoveItem, onReplaceItem })=>/*#__PURE__*/ react.createElement("div", {
+        className: cn("invisible group-hover:visible", "flex items-center gap-xxs", "absolute top-xs-plus right-xs-plus", className)
+    }, onReplaceItem && /*#__PURE__*/ react.createElement(Action, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: "Replace",
+        onAction: onReplaceItem,
+        disabled: disabled
+    }), onEditItem && /*#__PURE__*/ react.createElement(Action, {
+        icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null),
+        label: "Edit",
+        onAction: onEditItem,
+        disabled: disabled
+    }), onRemoveItem && /*#__PURE__*/ react.createElement(Action, {
+        icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+        label: "Remove",
+        onAction: onRemoveItem,
+        disabled: disabled
+    }));
+export { ThumbnailActions };
+
+//# sourceMappingURL=ThumbnailActions.js.map

package/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as ReplaceIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface ActionProps {\n    icon: React.JSX.Element;\n    label: string;\n    onAction: () => void;\n    disabled?: boolean;\n}\n\nconst Action = ({ icon, label, onAction, disabled }: ActionProps) => {\n    const onClick = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            // The thumbnail behind these opens the file manager when clicked, so without this a\n            // click on Remove would replace the file as well as remove it.\n            event.stopPropagation();\n            onAction();\n        },\n        [onAction]\n    );\n\n    return (\n        <Tooltip\n            content={label}\n            trigger={\n                <IconButton\n                    variant={\"tertiary\"}\n                    size={\"sm\"}\n                    icon={icon}\n                    onClick={onClick}\n                    disabled={disabled}\n                />\n            }\n        />\n    );\n};\n\ninterface ThumbnailActionsProps {\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    onReplaceItem?: () => void;\n    disabled?: boolean;\n    className?: string;\n}\n\n/**\n * The file's actions laid over its thumbnail and revealed on hover, mirroring the File Manager's\n * grid so a file offers the same affordances wherever it is shown. Requires `group` and\n * `relative` on the element wrapping the thumbnail.\n */\nconst ThumbnailActions = ({\n    className,\n    disabled,\n    onEditItem,\n    onRemoveItem,\n    onReplaceItem\n}: ThumbnailActionsProps) => {\n    return (\n        <div\n            className={cn(\n                \"invisible group-hover:visible\",\n                \"flex items-center gap-xxs\",\n                \"absolute top-xs-plus right-xs-plus\",\n                className\n            )}\n        >\n            {onReplaceItem && (\n                <Action\n                    icon={<ReplaceIcon />}\n                    label={\"Replace\"}\n                    onAction={onReplaceItem}\n                    disabled={disabled}\n                />\n            )}\n            {onEditItem && (\n                <Action\n                    icon={<EditIcon />}\n                    label={\"Edit\"}\n                    onAction={onEditItem}\n                    disabled={disabled}\n                />\n            )}\n            {onRemoveItem && (\n                <Action\n                    icon={<TrashIcon />}\n                    label={\"Remove\"}\n                    onAction={onRemoveItem}\n                    disabled={disabled}\n                />\n            )}\n        </div>\n    );\n};\n\nexport { ThumbnailActions, type ThumbnailActionsProps };\n"],"names":["Action","icon","label","onAction","disabled","onClick","useCallback","event","Tooltip","IconButton","ThumbnailActions","className","onEditItem","onRemoveItem","onReplaceItem","cn","ReplaceIcon","EditIcon","TrashIcon"],"mappings":";;;;;;;AAeA,MAAMA,SAAS,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAe;IAC5D,MAAMC,UAAUC,YACZ,CAACC;QAGGA,MAAM,eAAe;QACrBJ;IACJ,GACA;QAACA;KAAS;IAGd,OAAO,WAAP,GACI,oBAACK,SAAOA;QACJ,SAASN;QACT,uBACI,oBAACO,YAAUA;YACP,SAAS;YACT,MAAM;YACN,MAAMR;YACN,SAASI;YACT,UAAUD;;;AAK9B;AAeA,MAAMM,mBAAmB,CAAC,EACtBC,SAAS,EACTP,QAAQ,EACRQ,UAAU,EACVC,YAAY,EACZC,aAAa,EACO,GACb,WAAP,GACI,oBAAC;QACG,WAAWC,GACP,iCACA,6BACA,sCACAJ;OAGHG,iBAAiB,WAAjBA,GACG,oBAACd,QAAMA;QACH,oBAAM,oBAACgB,gBAAWA;QAClB,OAAO;QACP,UAAUF;QACV,UAAUV;QAGjBQ,cAAc,WAAdA,GACG,oBAACZ,QAAMA;QACH,oBAAM,oBAACiB,yBAAQA;QACf,OAAO;QACP,UAAUL;QACV,UAAUR;QAGjBS,gBAAgB,WAAhBA,GACG,oBAACb,QAAMA;QACH,oBAAM,oBAACkB,2BAASA;QAChB,OAAO;QACP,UAAUL;QACV,UAAUT"}

package/FilePicker/primitives/components/previews/TruncatedFileName.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface TruncatedFileNameProps {
+    name: string;
+    className?: string;
+}
+/**
+ * A file name that truncates in the middle, keeping the extension (and a little of the stem)
+ * visible: "tide-cc-statuses-v2.png" becomes "tide-cc-statu…-v2.png".
+ */
+declare const TruncatedFileName: ({ name, className }: TruncatedFileNameProps) => React.JSX.Element;
+export { TruncatedFileName, type TruncatedFileNameProps };

package/FilePicker/primitives/components/previews/TruncatedFileName.js

@@ -0,0 +1,20 @@
+import react from "react";
+import { Text } from "../../../../Text/index.js";
+import { cn } from "../../../../utils.js";
+import { splitFileName } from "./fileName.js";
+const TruncatedFileName = ({ name, className })=>{
+    const { head, tail } = splitFileName(name);
+    return /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: cn("flex min-w-0", className),
+        title: name
+    }, /*#__PURE__*/ react.createElement("span", {
+        className: "truncate"
+    }, head), tail ? /*#__PURE__*/ react.createElement("span", {
+        className: "shrink-0 whitespace-pre"
+    }, tail) : null);
+};
+export { TruncatedFileName };
+
+//# sourceMappingURL=TruncatedFileName.js.map

package/FilePicker/primitives/components/previews/TruncatedFileName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker/primitives/components/previews/TruncatedFileName.js","sources":["../../../../../src/FilePicker/primitives/components/previews/TruncatedFileName.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn } from \"~/utils.js\";\nimport { splitFileName } from \"./fileName.js\";\n\ninterface TruncatedFileNameProps {\n    name: string;\n    className?: string;\n}\n\n/**\n * A file name that truncates in the middle, keeping the extension (and a little of the stem)\n * visible: \"tide-cc-statuses-v2.png\" becomes \"tide-cc-statu…-v2.png\".\n */\nconst TruncatedFileName = ({ name, className }: TruncatedFileNameProps) => {\n    const { head, tail } = splitFileName(name);\n\n    return (\n        <Text size=\"sm\" as=\"div\" className={cn(\"flex min-w-0\", className)} title={name}>\n            <span className={\"truncate\"}>{head}</span>\n            {tail ? <span className={\"shrink-0 whitespace-pre\"}>{tail}</span> : null}\n        </Text>\n    );\n};\n\nexport { TruncatedFileName, type TruncatedFileNameProps };\n"],"names":["TruncatedFileName","name","className","head","tail","splitFileName","Text","cn"],"mappings":";;;;AAcA,MAAMA,oBAAoB,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAA0B;IAClE,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC,cAAcJ;IAErC,OAAO,WAAP,GACI,oBAACK,MAAIA;QAAC,MAAK;QAAK,IAAG;QAAM,WAAWC,GAAG,gBAAgBL;QAAY,OAAOD;qBACtE,oBAAC;QAAK,WAAW;OAAaE,OAC7BC,OAAO,WAAPA,GAAO,oBAAC;QAAK,WAAW;OAA4BA,QAAe;AAGhF"}

package/FilePicker/primitives/components/previews/fileName.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Splits a file name into the part that may be truncated and the part that must stay visible.
+ *
+ * CSS can only cut the tail of a string, which is the least useful end of a file name - it hides
+ * the extension and any "-v2"/"-final" suffix, the two things that tell near-identical uploads
+ * apart. Rendering the head in a truncating element and pinning the tail after it moves the
+ * ellipsis into the middle without measuring anything.
+ */
+export declare const splitFileName: (name: string) => {
+    head: string;
+    tail: string;
+};

package/FilePicker/primitives/components/previews/fileName.js

@@ -0,0 +1,26 @@
+const TAIL_STEM_CHARS = 3;
+const splitFileName = (name)=>{
+    const dot = name.lastIndexOf(".");
+    if (dot <= 0) return {
+        head: name,
+        tail: ""
+    };
+    const cut = dot - Math.min(TAIL_STEM_CHARS, dot);
+    if (cut <= 0) return {
+        head: name,
+        tail: ""
+    };
+    const head = name.slice(0, cut);
+    const tail = name.slice(cut);
+    if (head.length <= tail.length) return {
+        head: name,
+        tail: ""
+    };
+    return {
+        head,
+        tail
+    };
+};
+export { splitFileName };
+
+//# sourceMappingURL=fileName.js.map

package/FilePicker/primitives/components/previews/fileName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker/primitives/components/previews/fileName.js","sources":["../../../../../src/FilePicker/primitives/components/previews/fileName.ts"],"sourcesContent":["/**\n * How many characters of the stem to keep alongside the extension when a file name is too long\n * to fit. Enough to preserve a version or ordinal suffix - \"…-v2.png\" rather than \"….png\".\n */\nconst TAIL_STEM_CHARS = 3;\n\n/**\n * Splits a file name into the part that may be truncated and the part that must stay visible.\n *\n * CSS can only cut the tail of a string, which is the least useful end of a file name - it hides\n * the extension and any \"-v2\"/\"-final\" suffix, the two things that tell near-identical uploads\n * apart. Rendering the head in a truncating element and pinning the tail after it moves the\n * ellipsis into the middle without measuring anything.\n */\nexport const splitFileName = (name: string) => {\n    const dot = name.lastIndexOf(\".\");\n\n    // No extension, or a dotfile like \".gitignore\" - there is no meaningful tail to pin.\n    if (dot <= 0) {\n        return { head: name, tail: \"\" };\n    }\n\n    const cut = dot - Math.min(TAIL_STEM_CHARS, dot);\n\n    // The whole name is extension-and-a-bit; pinning all of it would defeat the truncation.\n    if (cut <= 0) {\n        return { head: name, tail: \"\" };\n    }\n\n    const head = name.slice(0, cut);\n    const tail = name.slice(cut);\n\n    // On a short name the pinned tail can end up longer than the part left to truncate\n    // (\"photo.jpeg\" would pin \"oto.jpeg\"), which reads as nonsense. Such names rarely overflow\n    // anyway, so fall back to ordinary end truncation.\n    if (head.length <= tail.length) {\n        return { head: name, tail: \"\" };\n    }\n\n    return { head, tail };\n};\n"],"names":["TAIL_STEM_CHARS","splitFileName","name","dot","cut","Math","head","tail"],"mappings":"AAIA,MAAMA,kBAAkB;AAUjB,MAAMC,gBAAgB,CAACC;IAC1B,MAAMC,MAAMD,KAAK,WAAW,CAAC;IAG7B,IAAIC,OAAO,GACP,OAAO;QAAE,MAAMD;QAAM,MAAM;IAAG;IAGlC,MAAME,MAAMD,MAAME,KAAK,GAAG,CAACL,iBAAiBG;IAG5C,IAAIC,OAAO,GACP,OAAO;QAAE,MAAMF;QAAM,MAAM;IAAG;IAGlC,MAAMI,OAAOJ,KAAK,KAAK,CAAC,GAAGE;IAC3B,MAAMG,OAAOL,KAAK,KAAK,CAACE;IAKxB,IAAIE,KAAK,MAAM,IAAIC,KAAK,MAAM,EAC1B,OAAO;QAAE,MAAML;QAAM,MAAM;IAAG;IAGlC,OAAO;QAAEI;QAAMC;IAAK;AACxB"}

package/FilePicker/primitives/components/previews/index.d.ts

@@ -2,3 +2,4 @@ export * from "./FilePreview.js";
 export * from "./ImagePreview/index.js";
 export * from "./RichItemPreview/index.js";
 export * from "./TextOnlyPreview/index.js";
+export * from "./TruncatedFileName.js";

package/FilePicker/primitives/components/previews/index.js

@@ -2,3 +2,4 @@ export * from "./FilePreview.js";
 export * from "./ImagePreview/index.js";
 export * from "./RichItemPreview/index.js";
 export * from "./TextOnlyPreview/index.js";
+export * from "./TruncatedFileName.js";

package/Link/Link.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { type VariantProps } from "../utils.js";
 import { LinkComponentProps } from "./LinkComponent.js";
-declare const linkVariants: (props?: ({
+export declare const linkVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "inherit" | null | undefined;
     variant?: "primary" | "secondary" | "primary-negative" | "secondary-negative" | null | undefined;
     underline?: boolean | null | undefined;

package/Link/Link.js

@@ -51,6 +51,6 @@ function LinkBase({ size, variant, underline, className, children, ...rest }) {
     }, children);
 }
 const Link = makeDecoratable("Link", LinkBase);
-export { Link };
+export { Link, linkVariants };
 
 //# sourceMappingURL=Link.js.map

package/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link/Link.js","sources":["../../src/Link/Link.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps, makeDecoratable, cn } from \"~/utils.js\";\nimport { useAdminUi } from \"~/index.js\";\nimport { LinkComponentProps } from \"./LinkComponent.js\";\n\nconst linkVariants = cva(\"font-sans rounded-xs\", {\n    variants: {\n        size: {\n            inherit: \"[font-size:inherit]\",\n            sm: \"text-sm\",\n            md: \"text-md\",\n            lg: \"text-lg\",\n            xl: \"text-xl\"\n        },\n        variant: {\n            primary: [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            secondary: [\n                \"text-neutral-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            \"primary-negative\": [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ],\n            \"secondary-negative\": [\n                \"text-neutral-light\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ]\n        },\n        underline: {\n            true: \"underline hover:no-underline\",\n            false: \"hover:underline\"\n        }\n    },\n    defaultVariants: {\n        size: \"inherit\",\n        variant: \"primary\",\n        underline: false\n    }\n});\n\nexport type LinkProps = LinkComponentProps &\n    VariantProps<typeof linkVariants> & {\n        disabled?: boolean;\n    };\n\nfunction LinkBase({ size, variant, underline, className, children, ...rest }: LinkProps) {\n    const { linkComponent: LinkComponent } = useAdminUi();\n    return (\n        <LinkComponent\n            {...rest}\n            className={cn(linkVariants({ size, variant, underline }), className)}\n        >\n            {children}\n        </LinkComponent>\n    );\n}\n\nexport const Link = makeDecoratable(\"Link\", LinkBase);\n"],"names":["linkVariants","cva","LinkBase","size","variant","underline","className","children","rest","LinkComponent","useAdminUi","cn","Link","makeDecoratable"],"mappings":";;;AAKA,MAAMA,eAAeC,IAAI,wBAAwB;IAC7C,UAAU;QACN,MAAM;YACF,SAAS;YACT,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,SAAS;YACL,SAAS;gBACL;gBACA;aACH;YACD,WAAW;gBACP;gBACA;aACH;YACD,oBAAoB;gBAChB;gBACA;aACH;YACD,sBAAsB;gBAClB;gBACA;aACH;QACL;QACA,WAAW;YACP,MAAM;YACN,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,MAAM;QACN,SAAS;QACT,WAAW;IACf;AACJ;AAOA,SAASC,SAAS,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAiB;IACnF,MAAM,EAAE,eAAeC,aAAa,EAAE,GAAGC;IACzC,OAAO,WAAP,GACI,oBAACD,eAAAA;QACI,GAAGD,IAAI;QACR,WAAWG,GAAGX,aAAa;YAAEG;YAAMC;YAASC;QAAU,IAAIC;OAEzDC;AAGb;AAEO,MAAMK,OAAOC,gBAAgB,QAAQX"}
+{"version":3,"file":"Link/Link.js","sources":["../../src/Link/Link.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps, makeDecoratable, cn } from \"~/utils.js\";\nimport { useAdminUi } from \"~/index.js\";\nimport { LinkComponentProps } from \"./LinkComponent.js\";\n\nexport const linkVariants = cva(\"font-sans rounded-xs\", {\n    variants: {\n        size: {\n            inherit: \"[font-size:inherit]\",\n            sm: \"text-sm\",\n            md: \"text-md\",\n            lg: \"text-lg\",\n            xl: \"text-xl\"\n        },\n        variant: {\n            primary: [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            secondary: [\n                \"text-neutral-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            \"primary-negative\": [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ],\n            \"secondary-negative\": [\n                \"text-neutral-light\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ]\n        },\n        underline: {\n            true: \"underline hover:no-underline\",\n            false: \"hover:underline\"\n        }\n    },\n    defaultVariants: {\n        size: \"inherit\",\n        variant: \"primary\",\n        underline: false\n    }\n});\n\nexport type LinkProps = LinkComponentProps &\n    VariantProps<typeof linkVariants> & {\n        disabled?: boolean;\n    };\n\nfunction LinkBase({ size, variant, underline, className, children, ...rest }: LinkProps) {\n    const { linkComponent: LinkComponent } = useAdminUi();\n    return (\n        <LinkComponent\n            {...rest}\n            className={cn(linkVariants({ size, variant, underline }), className)}\n        >\n            {children}\n        </LinkComponent>\n    );\n}\n\nexport const Link = makeDecoratable(\"Link\", LinkBase);\n"],"names":["linkVariants","cva","LinkBase","size","variant","underline","className","children","rest","LinkComponent","useAdminUi","cn","Link","makeDecoratable"],"mappings":";;;AAKO,MAAMA,eAAeC,IAAI,wBAAwB;IACpD,UAAU;QACN,MAAM;YACF,SAAS;YACT,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,SAAS;YACL,SAAS;gBACL;gBACA;aACH;YACD,WAAW;gBACP;gBACA;aACH;YACD,oBAAoB;gBAChB;gBACA;aACH;YACD,sBAAsB;gBAClB;gBACA;aACH;QACL;QACA,WAAW;YACP,MAAM;YACN,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,MAAM;QACN,SAAS;QACT,WAAW;IACf;AACJ;AAOA,SAASC,SAAS,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAiB;IACnF,MAAM,EAAE,eAAeC,aAAa,EAAE,GAAGC;IACzC,OAAO,WAAP,GACI,oBAACD,eAAAA;QACI,GAAGD,IAAI;QACR,WAAWG,GAAGX,aAAa;YAAEG;YAAMC;YAASC;QAAU,IAAIC;OAEzDC;AAGb;AAEO,MAAMK,OAAOC,gBAAgB,QAAQX"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/admin-ui",
-	"version": "6.4.8",
+	"version": "6.4.9-beta.0",
 	"type": "module",
 	"exports": {
 		".": "./index.js",
@@ -19,9 +19,9 @@
 		"@monaco-editor/react": "4.7.0",
 		"@radix-ui/react-scroll-area": "1.2.14",
 		"@tanstack/react-table": "8.21.3",
-		"@webiny/icons": "6.4.8",
-		"@webiny/react-composition": "6.4.8",
-		"@webiny/utils": "6.4.8",
+		"@webiny/icons": "6.4.9-beta.0",
+		"@webiny/react-composition": "6.4.9-beta.0",
+		"@webiny/utils": "6.4.9-beta.0",
 		"bytes": "3.1.2",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",
@@ -56,8 +56,8 @@
 		"@types/react-color": "3.0.13",
 		"@types/react-custom-scrollbars": "4.0.13",
 		"@types/react-virtualized": "9.22.3",
-		"@webiny/build-tools": "6.4.8",
-		"@webiny/project": "6.4.8",
+		"@webiny/build-tools": "6.4.9-beta.0",
+		"@webiny/project": "6.4.9-beta.0",
 		"chalk": "5.6.2",
 		"oxfmt": "0.58.0",
 		"rimraf": "6.1.3",