@chayns-components/gallery 5.0.0-beta.249 → 5.0.0-beta.254

package/lib/components/Gallery.d.ts

@@ -13,6 +13,10 @@ export type GalleryProps = {
      *  Whether images and videos can be edited
      */
     isEditMode?: boolean;
+    /**
+     * The minimum width of a file in the edit mode
+     */
+    fileMinWidth?: number;
     /**
      *  Images and videos which should be displayed
      */
@@ -20,7 +24,7 @@ export type GalleryProps = {
     /**
      *  Function to be executed when files are added and uploaded
      */
-    onAdd?: (files: FileItem) => void;
+    onAdd?: (file: FileItem) => void;
     /**
      *  Function to be executed when a file is removed
      */

package/lib/components/Gallery.js

@@ -25,7 +25,8 @@ const Gallery = _ref => {
     files,
     onAdd,
     onRemove,
-    personId
+    personId,
+    fileMinWidth = 100
   } = _ref;
   const [fileItems, setFileItems] = (0, _react.useState)([]);
 
@@ -139,7 +140,8 @@ const Gallery = _ref => {
           id: (0, _uuid.v4)(),
           uploadedFile: file.uploadedFile,
           file: file.file,
-          state: file.uploadedFile ? 'uploaded' : 'none'
+          state: file.uploadedFile ? 'uploaded' : 'none',
+          previewUrl: file.uploadedFile ? file.uploadedFile.url : undefined
         });
       });
       setFileItems(prevState => [...prevState, ...newFileItems]);
@@ -254,13 +256,14 @@ const Gallery = _ref => {
     }));
   }, [fileItems, isEditMode, handleAddFiles, openFiles, handleDeleteFile]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Gallery.StyledGallery, null, isEditMode ? /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryEditModeWrapper, {
+    fileMinWidth: fileMinWidth,
     onDragOver: e => e.preventDefault(),
     onDrop: e => void handleDrop(e)
   }, galleryContent) : /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryItemWrapper, {
     ratio: ratio,
     columns: columns,
     uploadedFileLength: fileItems.length
-  }, galleryContent)), [isEditMode, galleryContent, ratio, columns, fileItems.length, handleDrop]);
+  }, galleryContent)), [isEditMode, fileMinWidth, galleryContent, ratio, columns, fileItems.length, handleDrop]);
 };
 Gallery.displayName = 'Gallery';
 var _default = Gallery;

package/lib/components/Gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["_core","require","_react","_interopRequireWildcard","_uuid","_file","_AddFile","_interopRequireDefault","_GalleryItem","_Gallery","_chaynsApi","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Gallery","_ref","accessToken","allowDragAndDrop","isEditMode","files","onAdd","onRemove","personId","fileItems","setFileItems","useState","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","handleUploadFileCallback","useCallback","UploadedFile","uploadedFile","state","useEffect","filesToGeneratePreview","filter","filesToUpload","forEach","type","includes","generateVideoThumbnail","callback","generatePreviewUrl","uploadFile","fileToUpload","handleAddFiles","filesToAdd","newFileItems","filterDuplicateFile","newFile","push","uuidv4","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","item","items","_item$uploadedFile$ur","_item$uploadedFile","_item$file","url","replace","mediaType","MediaType","VIDEO","IMAGE","openMedia","ratio","useMemo","_fileItems$0$uploaded","_fileItems$","length","Math","max","columns","combinedFilesLength","galleryContent","createElement","fileItem","onClick","shortedFiles","slice","index","remainingItemsLength","undefined","StyledGallery","StyledGalleryEditModeWrapper","onDragOver","onDrop","StyledGalleryItemWrapper","uploadedFileLength","displayName","_default","exports"],"sources":["../../src/components/Gallery.tsx"],"sourcesContent":["import { uploadFile } from '@chayns-components/core';\nimport type { FileItem, Image, Video } from '@chayns-components/core/lib/types/file'; // TODO: Check why absolute import is needed\nimport React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../utils/file';\nimport AddFile from './add-file/AddFile';\nimport GalleryItem from './gallery-item/GalleryItem';\nimport {\n    StyledGallery,\n    StyledGalleryEditModeWrapper,\n    StyledGalleryItemWrapper,\n} from './Gallery.styles';\nimport { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\n\nexport type GalleryProps = {\n    /**\n     * AccessToken of the user\n     */\n    accessToken: string;\n    /**\n     * Whether drag and drop is allowed or not\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     *  Whether images and videos can be edited\n     */\n    isEditMode?: boolean;\n    /**\n     *  Images and videos which should be displayed\n     */\n    files?: FileItem[];\n    /**\n     *  Function to be executed when files are added and uploaded\n     */\n    onAdd?: (files: FileItem) => void;\n    /**\n     *  Function to be executed when a file is removed\n     */\n    onRemove?: (file: FileItem) => void;\n    /**\n     * PersonId of the user\n     */\n    personId: string;\n};\n\nconst Gallery: FC<GalleryProps> = ({\n    accessToken,\n    allowDragAndDrop = false,\n    isEditMode = false,\n    files,\n    onAdd,\n    onRemove,\n    personId,\n}) => {\n    const [fileItems, setFileItems] = useState<FileItem[]>([]);\n\n    /**\n     * This function adds a previewUrl to fileItems\n     */\n    const handlePreviewUrlCallback = (previewUrl: string, file: FileItem) => {\n        setFileItems((prevState) =>\n            prevState.map((prevFile) => {\n                if (prevFile.id === file.id) {\n                    return { ...prevFile, previewUrl };\n                }\n                return prevFile;\n            })\n        );\n    };\n\n    /**\n     * This function adds uploaded files to fileItems\n     */\n    const handleUploadFileCallback = useCallback(\n        (file: FileItem, UploadedFile: Video | Image) => {\n            setFileItems((prevState) =>\n                prevState.map((prevFile) => {\n                    if (prevFile.id === file.id) {\n                        if (typeof onAdd === 'function') {\n                            onAdd({\n                                ...prevFile,\n                                uploadedFile: UploadedFile,\n                                state: 'uploaded',\n                            });\n                        }\n\n                        return {\n                            ...prevFile,\n                            uploadedFile: UploadedFile,\n                            state: 'uploaded',\n                        };\n                    }\n                    return prevFile;\n                })\n            );\n        },\n        [onAdd]\n    );\n\n    /**\n     * Prepares files for previewUrl and upload\n     */\n    useEffect(() => {\n        const filesToGeneratePreview = fileItems.filter(\n            (file) => file.file && !file.previewUrl && (file.state === 'none' || !file.state)\n        );\n\n        const filesToUpload = fileItems.filter(\n            (file) => !file.uploadedFile && file.state !== 'uploading'\n        );\n\n        filesToGeneratePreview.forEach((file) => {\n            if (!file.file) {\n                return;\n            }\n\n            if (file.file.type.includes('video/')) {\n                generateVideoThumbnail({\n                    file: file.file,\n                    callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n                });\n\n                return;\n            }\n\n            generatePreviewUrl({\n                file: file.file,\n                callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n            });\n        });\n\n        filesToUpload.forEach((file) => {\n            setFileItems((prevState) =>\n                prevState.map((prevFile) => {\n                    if (prevFile.id === file.id) {\n                        return { ...prevFile, state: 'uploading' };\n                    }\n                    return prevFile;\n                })\n            );\n\n            void uploadFile({\n                fileToUpload: file,\n                personId,\n                accessToken,\n                callback: (UploadedFile) => handleUploadFileCallback(file, UploadedFile),\n            });\n        });\n    }, [accessToken, fileItems, handleUploadFileCallback, personId]);\n\n    /**\n     * This function formats and adds files to fileItems\n     */\n    const handleAddFiles = useCallback(\n        (filesToAdd: File[]) => {\n            const newFileItems: FileItem[] = [];\n\n            filesToAdd.forEach((file) => {\n                if (file && !filterDuplicateFile({ files: fileItems, newFile: file })) {\n                    newFileItems.push({\n                        id: uuidv4(),\n                        file,\n                        state: 'none',\n                    });\n                }\n            });\n\n            setFileItems((prevState) => [...prevState, ...newFileItems]);\n        },\n        [fileItems]\n    );\n\n    /**\n     * This function adds external files to fileItems\n     */\n    useEffect(() => {\n        if (files) {\n            const newFileItems: FileItem[] = [];\n\n            files.forEach((file) => {\n                newFileItems.push({\n                    id: uuidv4(),\n                    uploadedFile: file.uploadedFile,\n                    file: file.file,\n                    state: file.uploadedFile ? 'uploaded' : 'none',\n                });\n            });\n\n            setFileItems((prevState) => [...prevState, ...newFileItems]);\n        }\n    }, [files]);\n\n    /**\n     * This function deletes a selected file from the file list\n     */\n    const handleDeleteFile = useCallback(\n        (id?: string) => {\n            let fileToDelete: FileItem | undefined;\n\n            const filteredFiles = fileItems.filter((file) => {\n                const fileId = file.id;\n\n                if (fileId === id) {\n                    fileToDelete = file;\n                }\n\n                return fileId !== id;\n            });\n\n            setFileItems(filteredFiles);\n\n            if (!fileToDelete || typeof onRemove !== 'function') {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [fileItems, onRemove]\n    );\n\n    /**\n     * This function handles the drag and drop\n     */\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            if (!allowDragAndDrop) {\n                return;\n            }\n\n            e.preventDefault();\n            const draggedFiles = Array.from(e.dataTransfer.files);\n\n            handleAddFiles(draggedFiles);\n        },\n        [allowDragAndDrop, handleAddFiles]\n    );\n\n    /**\n     * Opens the files in a slideShow\n     */\n    const openFiles = useCallback(\n        (file: FileItem) => {\n            const startIndex = fileItems.findIndex((item) => item.id === file.id);\n\n            const items: OpenMediaItem[] = fileItems.map((item) => ({\n                url: item.uploadedFile?.url.replace('_0.mp4', '.mp4') ?? '',\n                mediaType: item.file?.type.includes('video/') ? MediaType.VIDEO : MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex });\n        },\n        [fileItems]\n    );\n\n    /**\n     * Returns the ratio of the single file\n     */\n    const ratio = useMemo(() => {\n        switch (fileItems.length) {\n            case 0:\n                return 0;\n            case 1:\n                return Math.max(fileItems[0]?.uploadedFile?.ratio ?? 1, 1);\n            case 2:\n                return 2;\n            case 3:\n                return 3;\n            default:\n                return 1;\n        }\n    }, [fileItems]);\n\n    /**\n     * Returns the number of columns\n     */\n    const columns = useMemo(() => {\n        const combinedFilesLength = fileItems.length;\n\n        if (combinedFilesLength <= 1) {\n            return '';\n        }\n\n        return `repeat(${combinedFilesLength === 3 ? 3 : 2}, 1fr)`;\n    }, [fileItems.length]);\n\n    const galleryContent = useMemo(() => {\n        const combinedFilesLength = fileItems.length;\n\n        if (isEditMode) {\n            const items = fileItems.map((file) => (\n                <GalleryItem\n                    key={file.id}\n                    fileItem={file}\n                    isEditMode\n                    onClick={openFiles}\n                    handleDeleteFile={handleDeleteFile}\n                />\n            ));\n\n            items.push(<AddFile key=\"add_file\" onAdd={handleAddFiles} />);\n\n            return items;\n        }\n\n        const shortedFiles = fileItems.slice(0, 4);\n\n        return shortedFiles.map((file, index) => (\n            <GalleryItem\n                key={file.id}\n                fileItem={file}\n                isEditMode={false}\n                handleDeleteFile={handleDeleteFile}\n                onClick={openFiles}\n                remainingItemsLength={\n                    combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined\n                }\n            />\n        ));\n    }, [fileItems, isEditMode, handleAddFiles, openFiles, handleDeleteFile]);\n\n    return useMemo(\n        () => (\n            <StyledGallery>\n                {isEditMode ? (\n                    <StyledGalleryEditModeWrapper\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={(e) => void handleDrop(e)}\n                    >\n                        {galleryContent}\n                    </StyledGalleryEditModeWrapper>\n                ) : (\n                    <StyledGalleryItemWrapper\n                        ratio={ratio}\n                        columns={columns}\n                        uploadedFileLength={fileItems.length}\n                    >\n                        {galleryContent}\n                    </StyledGalleryItemWrapper>\n                )}\n            </StyledGallery>\n        ),\n        [isEditMode, galleryContent, ratio, columns, fileItems.length, handleDrop]\n    );\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"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"}
+{"version":3,"file":"Gallery.js","names":["_core","require","_react","_interopRequireWildcard","_uuid","_file","_AddFile","_interopRequireDefault","_GalleryItem","_Gallery","_chaynsApi","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Gallery","_ref","accessToken","allowDragAndDrop","isEditMode","files","onAdd","onRemove","personId","fileMinWidth","fileItems","setFileItems","useState","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","handleUploadFileCallback","useCallback","UploadedFile","uploadedFile","state","useEffect","filesToGeneratePreview","filter","filesToUpload","forEach","type","includes","generateVideoThumbnail","callback","generatePreviewUrl","uploadFile","fileToUpload","handleAddFiles","filesToAdd","newFileItems","filterDuplicateFile","newFile","push","uuidv4","url","undefined","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","item","items","_item$uploadedFile$ur","_item$uploadedFile","_item$file","replace","mediaType","MediaType","VIDEO","IMAGE","openMedia","ratio","useMemo","_fileItems$0$uploaded","_fileItems$","length","Math","max","columns","combinedFilesLength","galleryContent","createElement","fileItem","onClick","shortedFiles","slice","index","remainingItemsLength","StyledGallery","StyledGalleryEditModeWrapper","onDragOver","onDrop","StyledGalleryItemWrapper","uploadedFileLength","displayName","_default","exports"],"sources":["../../src/components/Gallery.tsx"],"sourcesContent":["import { uploadFile } from '@chayns-components/core';\nimport type { FileItem, Image, Video } from '@chayns-components/core/lib/types/file'; // TODO: Check why absolute import is needed\nimport React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../utils/file';\nimport AddFile from './add-file/AddFile';\nimport GalleryItem from './gallery-item/GalleryItem';\nimport {\n    StyledGallery,\n    StyledGalleryEditModeWrapper,\n    StyledGalleryItemWrapper,\n} from './Gallery.styles';\nimport { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\n\nexport type GalleryProps = {\n    /**\n     * AccessToken of the user\n     */\n    accessToken: string;\n    /**\n     * Whether drag and drop is allowed or not\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     *  Whether images and videos can be edited\n     */\n    isEditMode?: boolean;\n    /**\n     * The minimum width of a file in the edit mode\n     */\n    fileMinWidth?: number;\n    /**\n     *  Images and videos which should be displayed\n     */\n    files?: FileItem[];\n    /**\n     *  Function to be executed when files are added and uploaded\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     *  Function to be executed when a file is removed\n     */\n    onRemove?: (file: FileItem) => void;\n    /**\n     * PersonId of the user\n     */\n    personId: string;\n};\n\nconst Gallery: FC<GalleryProps> = ({\n    accessToken,\n    allowDragAndDrop = false,\n    isEditMode = false,\n    files,\n    onAdd,\n    onRemove,\n    personId,\n    fileMinWidth = 100,\n}) => {\n    const [fileItems, setFileItems] = useState<FileItem[]>([]);\n\n    /**\n     * This function adds a previewUrl to fileItems\n     */\n    const handlePreviewUrlCallback = (previewUrl: string, file: FileItem) => {\n        setFileItems((prevState) =>\n            prevState.map((prevFile) => {\n                if (prevFile.id === file.id) {\n                    return { ...prevFile, previewUrl };\n                }\n                return prevFile;\n            })\n        );\n    };\n\n    /**\n     * This function adds uploaded files to fileItems\n     */\n    const handleUploadFileCallback = useCallback(\n        (file: FileItem, UploadedFile: Video | Image) => {\n            setFileItems((prevState) =>\n                prevState.map((prevFile) => {\n                    if (prevFile.id === file.id) {\n                        if (typeof onAdd === 'function') {\n                            onAdd({\n                                ...prevFile,\n                                uploadedFile: UploadedFile,\n                                state: 'uploaded',\n                            });\n                        }\n\n                        return {\n                            ...prevFile,\n                            uploadedFile: UploadedFile,\n                            state: 'uploaded',\n                        };\n                    }\n                    return prevFile;\n                })\n            );\n        },\n        [onAdd]\n    );\n\n    /**\n     * Prepares files for previewUrl and upload\n     */\n    useEffect(() => {\n        const filesToGeneratePreview = fileItems.filter(\n            (file) => file.file && !file.previewUrl && (file.state === 'none' || !file.state)\n        );\n\n        const filesToUpload = fileItems.filter(\n            (file) => !file.uploadedFile && file.state !== 'uploading'\n        );\n\n        filesToGeneratePreview.forEach((file) => {\n            if (!file.file) {\n                return;\n            }\n\n            if (file.file.type.includes('video/')) {\n                generateVideoThumbnail({\n                    file: file.file,\n                    callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n                });\n\n                return;\n            }\n\n            generatePreviewUrl({\n                file: file.file,\n                callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n            });\n        });\n\n        filesToUpload.forEach((file) => {\n            setFileItems((prevState) =>\n                prevState.map((prevFile) => {\n                    if (prevFile.id === file.id) {\n                        return { ...prevFile, state: 'uploading' };\n                    }\n                    return prevFile;\n                })\n            );\n\n            void uploadFile({\n                fileToUpload: file,\n                personId,\n                accessToken,\n                callback: (UploadedFile) => handleUploadFileCallback(file, UploadedFile),\n            });\n        });\n    }, [accessToken, fileItems, handleUploadFileCallback, personId]);\n\n    /**\n     * This function formats and adds files to fileItems\n     */\n    const handleAddFiles = useCallback(\n        (filesToAdd: File[]) => {\n            const newFileItems: FileItem[] = [];\n\n            filesToAdd.forEach((file) => {\n                if (file && !filterDuplicateFile({ files: fileItems, newFile: file })) {\n                    newFileItems.push({\n                        id: uuidv4(),\n                        file,\n                        state: 'none',\n                    });\n                }\n            });\n\n            setFileItems((prevState) => [...prevState, ...newFileItems]);\n        },\n        [fileItems]\n    );\n\n    /**\n     * This function adds external files to fileItems\n     */\n    useEffect(() => {\n        if (files) {\n            const newFileItems: FileItem[] = [];\n\n            files.forEach((file) => {\n                newFileItems.push({\n                    id: uuidv4(),\n                    uploadedFile: file.uploadedFile,\n                    file: file.file,\n                    state: file.uploadedFile ? 'uploaded' : 'none',\n                    previewUrl: file.uploadedFile ? file.uploadedFile.url : undefined,\n                });\n            });\n\n            setFileItems((prevState) => [...prevState, ...newFileItems]);\n        }\n    }, [files]);\n\n    /**\n     * This function deletes a selected file from the file list\n     */\n    const handleDeleteFile = useCallback(\n        (id?: string) => {\n            let fileToDelete: FileItem | undefined;\n\n            const filteredFiles = fileItems.filter((file) => {\n                const fileId = file.id;\n\n                if (fileId === id) {\n                    fileToDelete = file;\n                }\n\n                return fileId !== id;\n            });\n\n            setFileItems(filteredFiles);\n\n            if (!fileToDelete || typeof onRemove !== 'function') {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [fileItems, onRemove]\n    );\n\n    /**\n     * This function handles the drag and drop\n     */\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            if (!allowDragAndDrop) {\n                return;\n            }\n\n            e.preventDefault();\n            const draggedFiles = Array.from(e.dataTransfer.files);\n\n            handleAddFiles(draggedFiles);\n        },\n        [allowDragAndDrop, handleAddFiles]\n    );\n\n    /**\n     * Opens the files in a slideShow\n     */\n    const openFiles = useCallback(\n        (file: FileItem) => {\n            const startIndex = fileItems.findIndex((item) => item.id === file.id);\n\n            const items: OpenMediaItem[] = fileItems.map((item) => ({\n                url: item.uploadedFile?.url.replace('_0.mp4', '.mp4') ?? '',\n                mediaType: item.file?.type.includes('video/') ? MediaType.VIDEO : MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex });\n        },\n        [fileItems]\n    );\n\n    /**\n     * Returns the ratio of the single file\n     */\n    const ratio = useMemo(() => {\n        switch (fileItems.length) {\n            case 0:\n                return 0;\n            case 1:\n                return Math.max(fileItems[0]?.uploadedFile?.ratio ?? 1, 1);\n            case 2:\n                return 2;\n            case 3:\n                return 3;\n            default:\n                return 1;\n        }\n    }, [fileItems]);\n\n    /**\n     * Returns the number of columns\n     */\n    const columns = useMemo(() => {\n        const combinedFilesLength = fileItems.length;\n\n        if (combinedFilesLength <= 1) {\n            return '';\n        }\n\n        return `repeat(${combinedFilesLength === 3 ? 3 : 2}, 1fr)`;\n    }, [fileItems.length]);\n\n    const galleryContent = useMemo(() => {\n        const combinedFilesLength = fileItems.length;\n\n        if (isEditMode) {\n            const items = fileItems.map((file) => (\n                <GalleryItem\n                    key={file.id}\n                    fileItem={file}\n                    isEditMode\n                    onClick={openFiles}\n                    handleDeleteFile={handleDeleteFile}\n                />\n            ));\n\n            items.push(<AddFile key=\"add_file\" onAdd={handleAddFiles} />);\n\n            return items;\n        }\n\n        const shortedFiles = fileItems.slice(0, 4);\n\n        return shortedFiles.map((file, index) => (\n            <GalleryItem\n                key={file.id}\n                fileItem={file}\n                isEditMode={false}\n                handleDeleteFile={handleDeleteFile}\n                onClick={openFiles}\n                remainingItemsLength={\n                    combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined\n                }\n            />\n        ));\n    }, [fileItems, isEditMode, handleAddFiles, openFiles, handleDeleteFile]);\n\n    return useMemo(\n        () => (\n            <StyledGallery>\n                {isEditMode ? (\n                    <StyledGalleryEditModeWrapper\n                        fileMinWidth={fileMinWidth}\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={(e) => void handleDrop(e)}\n                    >\n                        {galleryContent}\n                    </StyledGalleryEditModeWrapper>\n                ) : (\n                    <StyledGalleryItemWrapper\n                        ratio={ratio}\n                        columns={columns}\n                        uploadedFileLength={fileItems.length}\n                    >\n                        {galleryContent}\n                    </StyledGalleryItemWrapper>\n                )}\n            </StyledGallery>\n        ),\n        [isEditMode, fileMinWidth, galleryContent, ratio, columns, fileItems.length, handleDrop]\n    );\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"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"}

package/lib/components/Gallery.styles.d.ts

@@ -4,4 +4,6 @@ export declare const StyledGalleryItemWrapper: import("styled-components").Style
     uploadedFileLength: number;
     ratio: number;
 }, never>;
-export declare const StyledGalleryEditModeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledGalleryEditModeWrapper: import("styled-components").StyledComponent<"div", any, {
+    fileMinWidth: number;
+}, never>;

package/lib/components/Gallery.styles.js

@@ -29,16 +29,14 @@ const StyledGalleryItemWrapper = _styledComponents.default.div`
 `;
 exports.StyledGalleryItemWrapper = StyledGalleryItemWrapper;
 const StyledGalleryEditModeWrapper = _styledComponents.default.div`
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    row-gap: 10px;
-    column-gap: 10px;
-    padding: 15px;
-
-    & > * {
-        flex-basis: calc(25% - 7.5px);
-    }
+    display: grid;
+    grid-template-columns: ${_ref2 => {
+  let {
+    fileMinWidth
+  } = _ref2;
+  return `repeat(auto-fill, minmax(${fileMinWidth}px, 1fr))`;
+}};
+    gap: 6px;
 `;
 exports.StyledGalleryEditModeWrapper = StyledGalleryEditModeWrapper;
 //# sourceMappingURL=Gallery.styles.js.map

package/lib/components/Gallery.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledGallery","styled","div","exports","StyledGalleryItemWrapper","_ref","columns","uploadedFileLength","ratio","css","StyledGalleryEditModeWrapper"],"sources":["../../src/components/Gallery.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nexport const StyledGallery = styled.div``;\n\nexport const StyledGalleryItemWrapper = styled.div<{\n    columns: string;\n    uploadedFileLength: number;\n    ratio: number;\n}>`\n    ${({ columns, uploadedFileLength, ratio }) =>\n        uploadedFileLength > 1\n            ? css`\n                  display: grid;\n                  grid-template-columns: ${columns};\n                  row-gap: 5px;\n                  column-gap: 5px;\n                  aspect-ratio: ${ratio};\n              `\n            : css`\n                  aspect-ratio: ${ratio};\n              `}\n`;\n\nexport const StyledGalleryEditModeWrapper = styled.div`\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    row-gap: 10px;\n    column-gap: 10px;\n    padding: 15px;\n\n    & > * {\n        flex-basis: calc(25% - 7.5px);\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAEzC,MAAMW,aAAa,GAAGC,yBAAM,CAACC,GAAI,EAAC;AAACC,OAAA,CAAAH,aAAA,GAAAA,aAAA;AAEnC,MAAMI,wBAAwB,GAAGH,yBAAM,CAACC,GAI5C;AACH,MAAMG,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC,kBAAkB;IAAEC;EAAM,CAAC,GAAAH,IAAA;EAAA,OACrCE,kBAAkB,GAAG,CAAC,GAChB,IAAAE,qBAAG,CAAC;AAClB;AACA,2CAA2CH,OAAQ;AACnD;AACA;AACA,kCAAkCE,KAAM;AACxC,eAAe,GACD,IAAAC,qBAAG,CAAC;AAClB,kCAAkCD,KAAM;AACxC,eAAe;AAAA,CAAC;AAChB,CAAC;AAACL,OAAA,CAAAC,wBAAA,GAAAA,wBAAA;AAEK,MAAMM,4BAA4B,GAAGT,yBAAM,CAACC,GAAI;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAO,4BAAA,GAAAA,4BAAA"}
+{"version":3,"file":"Gallery.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledGallery","styled","div","exports","StyledGalleryItemWrapper","_ref","columns","uploadedFileLength","ratio","css","StyledGalleryEditModeWrapper","_ref2","fileMinWidth"],"sources":["../../src/components/Gallery.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nexport const StyledGallery = styled.div``;\n\nexport const StyledGalleryItemWrapper = styled.div<{\n    columns: string;\n    uploadedFileLength: number;\n    ratio: number;\n}>`\n    ${({ columns, uploadedFileLength, ratio }) =>\n        uploadedFileLength > 1\n            ? css`\n                  display: grid;\n                  grid-template-columns: ${columns};\n                  row-gap: 5px;\n                  column-gap: 5px;\n                  aspect-ratio: ${ratio};\n              `\n            : css`\n                  aspect-ratio: ${ratio};\n              `}\n`;\n\nexport const StyledGalleryEditModeWrapper = styled.div<{\n    fileMinWidth: number;\n}>`\n    display: grid;\n    grid-template-columns: ${({ fileMinWidth }) =>\n        `repeat(auto-fill, minmax(${fileMinWidth}px, 1fr))`};\n    gap: 6px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAEzC,MAAMW,aAAa,GAAGC,yBAAM,CAACC,GAAI,EAAC;AAACC,OAAA,CAAAH,aAAA,GAAAA,aAAA;AAEnC,MAAMI,wBAAwB,GAAGH,yBAAM,CAACC,GAI5C;AACH,MAAMG,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC,kBAAkB;IAAEC;EAAM,CAAC,GAAAH,IAAA;EAAA,OACrCE,kBAAkB,GAAG,CAAC,GAChB,IAAAE,qBAAG,CAAC;AAClB;AACA,2CAA2CH,OAAQ;AACnD;AACA;AACA,kCAAkCE,KAAM;AACxC,eAAe,GACD,IAAAC,qBAAG,CAAC;AAClB,kCAAkCD,KAAM;AACxC,eAAe;AAAA,CAAC;AAChB,CAAC;AAACL,OAAA,CAAAC,wBAAA,GAAAA,wBAAA;AAEK,MAAMM,4BAA4B,GAAGT,yBAAM,CAACC,GAEhD;AACH;AACA,6BAA6BS,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACrC,4BAA2BC,YAAa,WAAU;AAAA,CAAC;AAC5D;AACA,CAAC;AAACT,OAAA,CAAAO,4BAAA,GAAAA,4BAAA"}

package/lib/components/gallery-item/media-item/MediaItem.styles.js

@@ -10,17 +10,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const StyledMotionMediaItem = (0, _styledComponents.default)(_framerMotion.motion.div)`
     display: flex;
     width: 100%;
+    height: 100%;
 `;
 exports.StyledMotionMediaItem = StyledMotionMediaItem;
 const StyledMediaItemVideoWrapper = _styledComponents.default.div`
     display: flex;
     width: 100%;
+    height: 100%;
     aspect-ratio: 1;
 `;
 exports.StyledMediaItemVideoWrapper = StyledMediaItemVideoWrapper;
 const StyledMediaItemImageWrapper = _styledComponents.default.div`
     display: flex;
     width: 100%;
+    height: 100%;
     aspect-ratio: 1;
 `;
 exports.StyledMediaItemImageWrapper = StyledMediaItemImageWrapper;
@@ -40,6 +43,7 @@ const StyledMediaItemImage = _styledComponents.default.img`
         inset;
     z-index: 1;
     width: 100%;
+    height: 100%;
     object-fit: cover;
 `;
 exports.StyledMediaItemImage = StyledMediaItemImage;

package/lib/components/gallery-item/media-item/MediaItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledMotionMediaItem","styled","motion","div","exports","StyledMediaItemVideoWrapper","StyledMediaItemImageWrapper","StyledMediaItemImage","img","_ref","theme","_ref2","StyledMediaItemVideo","video","_ref3","_ref4","StyledMediaItemPlayIcon"],"sources":["../../../../src/components/gallery-item/media-item/MediaItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)`\n    display: flex;\n    width: 100%;\n`;\n\nexport const StyledMediaItemVideoWrapper = styled.div`\n    display: flex;\n    width: 100%;\n    aspect-ratio: 1;\n`;\n\nexport const StyledMediaItemImageWrapper = styled.div`\n    display: flex;\n    width: 100%;\n    aspect-ratio: 1;\n`;\n\ntype StyledMediaItemVideoProps = WithTheme<unknown>;\n\ntype StyledMediaItemImageProps = WithTheme<unknown>;\n\nexport const StyledMediaItemImage = styled.img<StyledMediaItemImageProps>`\n    background-color: ${({ theme }: StyledMediaItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemImageProps) => theme['009-rgb']}, 0.08)\n        inset;\n    z-index: 1;\n    width: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaItemVideo = styled.video<StyledMediaItemVideoProps>`\n    background-color: ${({ theme }: StyledMediaItemVideoProps) => theme['101']};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemVideoProps) => theme['009-rgb']}, 0.08)\n        inset;\n    width: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaItemPlayIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,qBAAqB,GAAG,IAAAC,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAE;AACxD;AACA;AACA,CAAC;AAACC,OAAA,CAAAJ,qBAAA,GAAAA,qBAAA;AAEK,MAAMK,2BAA2B,GAAGJ,yBAAM,CAACE,GAAI;AACtD;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAC,2BAAA,GAAAA,2BAAA;AAEK,MAAMC,2BAA2B,GAAGL,yBAAM,CAACE,GAAI;AACtD;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAE,2BAAA,GAAAA,2BAAA;AAMK,MAAMC,oBAAoB,GAAGN,yBAAM,CAACO,GAA+B;AAC1E,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAiC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC/E,iCAAiCC,KAAA;EAAA,IAAC;IAAED;EAAiC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5F;AACA;AACA;AACA;AACA,CAAC;AAACN,OAAA,CAAAG,oBAAA,GAAAA,oBAAA;AAEK,MAAMK,oBAAoB,GAAGX,yBAAM,CAACY,KAAiC;AAC5E,wBAAwBC,KAAA;EAAA,IAAC;IAAEJ;EAAiC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC/E,iCAAiCK,KAAA;EAAA,IAAC;IAAEL;EAAiC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5F;AACA;AACA;AACA,CAAC;AAACN,OAAA,CAAAQ,oBAAA,GAAAA,oBAAA;AAEK,MAAMI,uBAAuB,GAAGf,yBAAM,CAACE,GAAI;AAClD;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAY,uBAAA,GAAAA,uBAAA"}
+{"version":3,"file":"MediaItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledMotionMediaItem","styled","motion","div","exports","StyledMediaItemVideoWrapper","StyledMediaItemImageWrapper","StyledMediaItemImage","img","_ref","theme","_ref2","StyledMediaItemVideo","video","_ref3","_ref4","StyledMediaItemPlayIcon"],"sources":["../../../../src/components/gallery-item/media-item/MediaItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)`\n    display: flex;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const StyledMediaItemVideoWrapper = styled.div`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: 1;\n`;\n\nexport const StyledMediaItemImageWrapper = styled.div`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: 1;\n`;\n\ntype StyledMediaItemVideoProps = WithTheme<unknown>;\n\ntype StyledMediaItemImageProps = WithTheme<unknown>;\n\nexport const StyledMediaItemImage = styled.img<StyledMediaItemImageProps>`\n    background-color: ${({ theme }: StyledMediaItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemImageProps) => theme['009-rgb']}, 0.08)\n        inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaItemVideo = styled.video<StyledMediaItemVideoProps>`\n    background-color: ${({ theme }: StyledMediaItemVideoProps) => theme['101']};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemVideoProps) => theme['009-rgb']}, 0.08)\n        inset;\n    width: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaItemPlayIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,qBAAqB,GAAG,IAAAC,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAE;AACxD;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAJ,qBAAA,GAAAA,qBAAA;AAEK,MAAMK,2BAA2B,GAAGJ,yBAAM,CAACE,GAAI;AACtD;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAC,2BAAA,GAAAA,2BAAA;AAEK,MAAMC,2BAA2B,GAAGL,yBAAM,CAACE,GAAI;AACtD;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAE,2BAAA,GAAAA,2BAAA;AAMK,MAAMC,oBAAoB,GAAGN,yBAAM,CAACO,GAA+B;AAC1E,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAiC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC/E,iCAAiCC,KAAA;EAAA,IAAC;IAAED;EAAiC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5F;AACA;AACA;AACA;AACA;AACA,CAAC;AAACN,OAAA,CAAAG,oBAAA,GAAAA,oBAAA;AAEK,MAAMK,oBAAoB,GAAGX,yBAAM,CAACY,KAAiC;AAC5E,wBAAwBC,KAAA;EAAA,IAAC;IAAEJ;EAAiC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC/E,iCAAiCK,KAAA;EAAA,IAAC;IAAEL;EAAiC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5F;AACA;AACA;AACA,CAAC;AAACN,OAAA,CAAAQ,oBAAA,GAAAA,oBAAA;AAEK,MAAMI,uBAAuB,GAAGf,yBAAM,CAACE,GAAI;AAClD;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAY,uBAAA,GAAAA,uBAAA"}

package/lib/components/gallery-item/preview-item/PreviewItem.styles.js

@@ -10,11 +10,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const StyledMotionPreviewItem = (0, _styledComponents.default)(_framerMotion.motion.div)`
     display: flex;
     width: 100%;
+    height: 100%;
 `;
 exports.StyledMotionPreviewItem = StyledMotionPreviewItem;
 const StyledPreviewItemImageWrapper = _styledComponents.default.div`
     display: flex;
     width: 100%;
+    height: 100%;
     aspect-ratio: 1;
 `;
 exports.StyledPreviewItemImageWrapper = StyledPreviewItemImageWrapper;
@@ -34,6 +36,7 @@ const StyledPreviewItemImage = _styledComponents.default.img`
 }}, 0.08) inset;
     z-index: 1;
     width: 100%;
+    height: 100%;
     object-fit: cover;
 `;
 exports.StyledPreviewItemImage = StyledPreviewItemImage;

package/lib/components/gallery-item/preview-item/PreviewItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledMotionPreviewItem","styled","motion","div","exports","StyledPreviewItemImageWrapper","StyledPreviewItemImage","img","_ref","theme","_ref2","StyledPreviewItemLoadingIcon"],"sources":["../../../../src/components/gallery-item/preview-item/PreviewItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)`\n    display: flex;\n    width: 100%;\n`;\n\nexport const StyledPreviewItemImageWrapper = styled.div`\n    display: flex;\n    width: 100%;\n    aspect-ratio: 1;\n`;\n\ntype StyledPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledPreviewItemImage = styled.img<StyledPreviewItemImageProps>`\n    background-color: ${({ theme }: StyledPreviewItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledPreviewItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 1;\n    width: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledPreviewItemLoadingIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,uBAAuB,GAAG,IAAAC,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAE;AAC1D;AACA;AACA,CAAC;AAACC,OAAA,CAAAJ,uBAAA,GAAAA,uBAAA;AAEK,MAAMK,6BAA6B,GAAGJ,yBAAM,CAACE,GAAI;AACxD;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAC,6BAAA,GAAAA,6BAAA;AAIK,MAAMC,sBAAsB,GAAGL,yBAAM,CAACM,GAAiC;AAC9E,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAmC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACjF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAmC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAE,sBAAA,GAAAA,sBAAA;AAEK,MAAMK,4BAA4B,GAAGV,yBAAM,CAACE,GAAI;AACvD;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAO,4BAAA,GAAAA,4BAAA"}
+{"version":3,"file":"PreviewItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledMotionPreviewItem","styled","motion","div","exports","StyledPreviewItemImageWrapper","StyledPreviewItemImage","img","_ref","theme","_ref2","StyledPreviewItemLoadingIcon"],"sources":["../../../../src/components/gallery-item/preview-item/PreviewItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)`\n    display: flex;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const StyledPreviewItemImageWrapper = styled.div`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: 1;\n`;\n\ntype StyledPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledPreviewItemImage = styled.img<StyledPreviewItemImageProps>`\n    background-color: ${({ theme }: StyledPreviewItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledPreviewItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledPreviewItemLoadingIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,uBAAuB,GAAG,IAAAC,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAE;AAC1D;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAJ,uBAAA,GAAAA,uBAAA;AAEK,MAAMK,6BAA6B,GAAGJ,yBAAM,CAACE,GAAI;AACxD;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAC,6BAAA,GAAAA,6BAAA;AAIK,MAAMC,sBAAsB,GAAGL,yBAAM,CAACM,GAAiC;AAC9E,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAmC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACjF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAmC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAE,sBAAA,GAAAA,sBAAA;AAEK,MAAMK,4BAA4B,GAAGV,yBAAM,CAACE,GAAI;AACvD;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAO,4BAAA,GAAAA,4BAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/gallery",
-    "version": "5.0.0-beta.249",
+    "version": "5.0.0-beta.254",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -50,7 +50,7 @@
         "typescript": "^4.9.5"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.249",
+        "@chayns-components/core": "^5.0.0-beta.252",
         "@chayns/colors": "^2.0.0",
         "chayns-api": "^1.0.38",
         "clsx": "^1.2.1",
@@ -65,5 +65,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b4a1c3c2662c060c621b91260f2fe3f053259504"
+    "gitHead": "acdabc1258d4918cd4e52952aedeb622d6ca4e34"
 }