@chayns-components/core 5.0.0-beta.98 → 5.0.0-beta.982

package/lib/esm/components/file-input/FileInput.js

@@ -0,0 +1,251 @@
+import { createDialog, DialogType } from 'chayns-api';
+import { AnimatePresence } from 'framer-motion';
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';
+import { selectFiles } from '../../utils/fileDialog';
+import Icon from '../icon/Icon';
+import List from '../list/List';
+import FileListItem from './file-list/FileListItem';
+import { StyledFileInput, StyledFileInputContainer, StyledFileInputText, StyledFileInputWrapper, StyledMotionFileInputList, StyledUploadedFilesList } from './FileInput.styles';
+const FileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    fileSelectionIcons = ['fa fa-upload'],
+    imageSelectIcons = ['ts-image'],
+    fileTypes,
+    onMaxFilesReached,
+    maxFiles,
+    onRemove,
+    files,
+    isDisabled,
+    maxFileSizeInMB,
+    onAdd,
+    fileSelectionPlaceholder = 'Dateien hochladen',
+    imageSelectPlaceholder
+  } = _ref;
+  const [internalFiles, setInternalFiles] = useState([]);
+  const [internalImages, setInternalImages] = useState([]);
+  const handleInputClear = () => {
+    setInternalFiles([]);
+    setInternalImages([]);
+  };
+  useImperativeHandle(ref, () => ({
+    clear: handleInputClear
+  }), []);
+  const handleAddImages = useCallback(images => {
+    const newImages = [];
+    images.forEach(image => {
+      if (!filterDuplicateFileUrls({
+        files: internalImages,
+        newFile: image
+      })) {
+        newImages.push(image);
+      }
+    });
+    let tmp = newImages;
+    if (maxFiles) {
+      tmp = newImages.slice(0, maxFiles - (internalFiles.length + internalImages.length + (files?.length ?? 0)));
+    }
+    if (tmp.length > 0 && typeof onAdd === 'function') {
+      onAdd(tmp);
+    }
+    setInternalImages(prevState => [...prevState, ...tmp]);
+  }, [files?.length, internalFiles.length, internalImages, maxFiles, onAdd]);
+  const handleAddFiles = useCallback(newFiles => {
+    const newFileItems = [];
+    newFiles.forEach(file => {
+      if (fileTypes && !isValidFileType({
+        file,
+        types: fileTypes
+      })) {
+        return;
+      }
+      if (file && !filterDuplicateFile({
+        files: internalFiles,
+        newFile: file
+      })) {
+        newFileItems.push(file);
+      }
+    });
+    let tmp = newFileItems;
+    if (maxFiles) {
+      tmp = newFileItems.slice(0, maxFiles - (internalFiles.length + internalImages.length + (files?.length ?? 0)));
+    }
+    if (tmp.length > 0 && typeof onAdd === 'function') {
+      onAdd(tmp);
+    }
+    setInternalFiles(prevState => [...prevState, ...tmp]);
+  }, [fileTypes, files?.length, internalFiles, internalImages.length, maxFiles, onAdd]);
+  const handleDeleteFile = useCallback(fileName => {
+    let fileToDelete;
+    const filteredFiles = internalFiles.filter(file => {
+      const {
+        name
+      } = file;
+      if (name === fileName) {
+        fileToDelete = file;
+      }
+      return name !== fileName;
+    });
+    setInternalFiles(filteredFiles);
+    if (!fileToDelete) {
+      const filteredImages = internalImages.filter(image => {
+        if (image === fileName) {
+          fileToDelete = image;
+        }
+        return image !== fileName;
+      });
+      setInternalImages(filteredImages);
+    }
+    if (!fileToDelete) {
+      files?.forEach(file => {
+        if (file.url === fileName || file.name === fileName) {
+          fileToDelete = file;
+        }
+      });
+    }
+    if (!fileToDelete || typeof onRemove !== 'function') {
+      return;
+    }
+    onRemove(fileToDelete);
+  }, [files, internalFiles, internalImages, onRemove]);
+  const internalIsDisabled = useMemo(() => {
+    if (isDisabled) {
+      return true;
+    }
+    if (maxFiles) {
+      if (internalFiles.length + internalImages.length >= maxFiles) {
+        if (typeof onMaxFilesReached === 'function') {
+          onMaxFilesReached();
+        }
+        return true;
+      }
+    }
+    return false;
+  }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);
+  const handleImageSelectionClick = useCallback(async () => {
+    if (internalIsDisabled) {
+      return;
+    }
+    const {
+      buttonType,
+      result
+    } = await createDialog({
+      dialogInput: {
+        upload: true,
+        buttons: [{
+          text: 'hello',
+          buttonType: 1
+        }, {
+          text: 'can',
+          buttonType: -1
+        }],
+        initialView: 'pixabay'
+      },
+      type: DialogType.MODULE,
+      system: {
+        url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',
+        scope: 'dialog_image_editor',
+        module: './ImageEditorEntry'
+      },
+      buttons: []
+    }).open();
+    if (buttonType === 1 && result?.url) {
+      handleAddImages([result.url]);
+    }
+  }, [handleAddImages, internalIsDisabled]);
+  const handleFileSelectionClick = useCallback(async () => {
+    if (internalIsDisabled) {
+      return;
+    }
+    const newFiles = await selectFiles({
+      multiple: true,
+      type: fileTypes,
+      maxFileSizeInMB
+    });
+    handleAddFiles(newFiles);
+  }, [fileTypes, handleAddFiles, internalIsDisabled, maxFileSizeInMB]);
+  const handleDrop = useCallback(e => {
+    e.preventDefault();
+    const draggedFiles = Array.from(e.dataTransfer.files);
+    handleAddFiles(draggedFiles);
+  }, [handleAddFiles]);
+  const content = useMemo(() => {
+    const combinedFiles = [...internalImages, ...internalFiles];
+    const items = combinedFiles.map(file => /*#__PURE__*/React.createElement(StyledMotionFileInputList, {
+      animate: {
+        height: 'auto',
+        opacity: 1
+      },
+      exit: {
+        height: 0,
+        opacity: 0
+      },
+      key: typeof file === 'string' ? file : file.name,
+      transition: {
+        duration: 0.25,
+        type: 'tween'
+      }
+    }, /*#__PURE__*/React.createElement(FileListItem, {
+      fileType: typeof file !== 'string' ? file.type : undefined,
+      fileName: typeof file !== 'string' ? file.name : undefined,
+      fileSize: typeof file !== 'string' ? file.size : undefined,
+      url: typeof file === 'string' ? file : undefined,
+      onRemove: handleDeleteFile
+    })));
+    return items;
+  }, [handleDeleteFile, internalFiles, internalImages]);
+  const uploadedFiles = useMemo(() => {
+    const items = [];
+    const cutFiles = maxFiles ? files?.splice(0, maxFiles) : files;
+    cutFiles?.forEach(_ref2 => {
+      let {
+        url,
+        id,
+        name
+      } = _ref2;
+      items.push(/*#__PURE__*/React.createElement(StyledMotionFileInputList, {
+        animate: {
+          height: 'auto',
+          opacity: 1
+        },
+        exit: {
+          height: 0,
+          opacity: 0
+        },
+        key: id,
+        transition: {
+          duration: 0.25,
+          type: 'tween'
+        }
+      }, /*#__PURE__*/React.createElement(FileListItem, {
+        url: url,
+        onRemove: handleDeleteFile,
+        fileName: name
+      })));
+    });
+    return items;
+  }, [files, handleDeleteFile, maxFiles]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileInput, null, /*#__PURE__*/React.createElement(StyledFileInputWrapper, {
+    $isDisabled: internalIsDisabled
+  }, /*#__PURE__*/React.createElement(StyledFileInputContainer, {
+    onClick: () => void handleFileSelectionClick(),
+    onDragOver: e => e.preventDefault(),
+    onDrop: e => void handleDrop(e)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: fileSelectionIcons
+  }), /*#__PURE__*/React.createElement(StyledFileInputText, null, fileSelectionPlaceholder)), imageSelectPlaceholder && /*#__PURE__*/React.createElement(StyledFileInputContainer, {
+    $isImageSelection: true,
+    onClick: () => void handleImageSelectionClick()
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: imageSelectIcons
+  }), /*#__PURE__*/React.createElement(StyledFileInputText, null, imageSelectPlaceholder))), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, content)), uploadedFiles.length > 0 && /*#__PURE__*/React.createElement(StyledUploadedFilesList, {
+    $shouldShowBorder: content.length > 0
+  }, /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, uploadedFiles)))), [internalIsDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, content, uploadedFiles, handleFileSelectionClick, handleDrop, handleImageSelectionClick]);
+});
+FileInput.displayName = 'FileInput';
+export default FileInput;
+//# sourceMappingURL=FileInput.js.map

package/lib/esm/components/file-input/FileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useImperativeHandle","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","isValidFileType","selectFiles","Icon","List","FileListItem","StyledFileInput","StyledFileInputContainer","StyledFileInputText","StyledFileInputWrapper","StyledMotionFileInputList","StyledUploadedFilesList","FileInput","_ref","ref","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","internalFiles","setInternalFiles","internalImages","setInternalImages","handleInputClear","clear","handleAddImages","images","newImages","forEach","image","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","types","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","filteredImages","url","internalIsDisabled","handleImageSelectionClick","buttonType","result","dialogInput","upload","buttons","text","initialView","type","MODULE","system","scope","module","open","handleFileSelectionClick","multiple","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","content","combinedFiles","items","map","createElement","animate","height","opacity","exit","key","transition","duration","fileType","undefined","fileSize","size","uploadedFiles","cutFiles","splice","_ref2","id","$isDisabled","onClick","onDragOver","onDrop","icons","$isImageSelection","initial","$shouldShowBorder","displayName"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    DragEvent,\n    forwardRef,\n    ReactElement,\n    useCallback,\n    useImperativeHandle,\n    useMemo,\n    useState,\n} from 'react';\nimport type { FileInputFileItem, ImageDialogResult } from '../../types/fileInput';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport List from '../list/List';\nimport FileListItem from './file-list/FileListItem';\nimport {\n    StyledFileInput,\n    StyledFileInputContainer,\n    StyledFileInputText,\n    StyledFileInputWrapper,\n    StyledMotionFileInputList,\n    StyledUploadedFilesList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n    /**\n     * Already uploaded files to display.\n     */\n    files?: FileInputFileItem[];\n    /**\n     * An array of icons that should be displayed inside the FileInput\n     */\n    fileSelectionIcons?: string[];\n    /**\n     * The text that should be displayed inside the FileInput.\n     */\n    fileSelectionPlaceholder?: string;\n    /**\n     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n     */\n    fileTypes?: string;\n    /**\n     * The icon of the image selection.\n     */\n    imageSelectIcons?: string[];\n    /**\n     * If set, pictures can be select via Pixabay.\n     */\n    imageSelectPlaceholder?: string;\n    /**\n     * Whether the FileInput is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The maximum amount of Files that can be uploaded.\n     */\n    maxFiles?: number;\n    /**\n     * The maximum size of a file in MB.\n     */\n    maxFileSizeInMB?: number;\n    /**\n     * A function to be executed when files are added.\n     */\n    onAdd?: (files: File[] | string[]) => void;\n    /**\n     * Function to be executed when the maximum amount of Files are reached.\n     */\n    onMaxFilesReached?: () => void;\n    /**\n     * A function to be executed when a file is removed.\n     */\n    onRemove?: (file: File | FileInputFileItem | string) => void;\n};\n\ntype DialogInput = {\n    upload: boolean;\n    buttons: {\n        text: string;\n        buttonType: number;\n    }[];\n    initialView: string;\n};\n\nexport type FileInputRef = {\n    clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n    (\n        {\n            fileSelectionIcons = ['fa fa-upload'],\n            imageSelectIcons = ['ts-image'],\n            fileTypes,\n            onMaxFilesReached,\n            maxFiles,\n            onRemove,\n            files,\n            isDisabled,\n            maxFileSizeInMB,\n            onAdd,\n            fileSelectionPlaceholder = 'Dateien hochladen',\n            imageSelectPlaceholder,\n        },\n        ref,\n    ) => {\n        const [internalFiles, setInternalFiles] = useState<File[]>([]);\n        const [internalImages, setInternalImages] = useState<string[]>([]);\n\n        const handleInputClear = () => {\n            setInternalFiles([]);\n            setInternalImages([]);\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: handleInputClear,\n            }),\n            [],\n        );\n\n        const handleAddImages = useCallback(\n            (images: string[]) => {\n                const newImages: string[] = [];\n\n                images.forEach((image) => {\n                    if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n                        newImages.push(image);\n                    }\n                });\n\n                let tmp = newImages;\n\n                if (maxFiles) {\n                    tmp = newImages.slice(\n                        0,\n                        maxFiles -\n                            (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n                    );\n                }\n\n                if (tmp.length > 0 && typeof onAdd === 'function') {\n                    onAdd(tmp);\n                }\n\n                setInternalImages((prevState) => [...prevState, ...tmp]);\n            },\n            [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n        );\n\n        const handleAddFiles = useCallback(\n            (newFiles: File[]) => {\n                const newFileItems: File[] = [];\n\n                newFiles.forEach((file) => {\n                    if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                        return;\n                    }\n\n                    if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n                        newFileItems.push(file);\n                    }\n                });\n\n                let tmp = newFileItems;\n\n                if (maxFiles) {\n                    tmp = newFileItems.slice(\n                        0,\n                        maxFiles -\n                            (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n                    );\n                }\n\n                if (tmp.length > 0 && typeof onAdd === 'function') {\n                    onAdd(tmp);\n                }\n\n                setInternalFiles((prevState) => [...prevState, ...tmp]);\n            },\n            [fileTypes, files?.length, internalFiles, internalImages.length, maxFiles, onAdd],\n        );\n\n        const handleDeleteFile = useCallback(\n            (fileName?: string) => {\n                let fileToDelete: File | FileInputFileItem | string | undefined;\n\n                const filteredFiles = internalFiles.filter((file) => {\n                    const { name } = file;\n\n                    if (name === fileName) {\n                        fileToDelete = file;\n                    }\n\n                    return name !== fileName;\n                });\n\n                setInternalFiles(filteredFiles);\n\n                if (!fileToDelete) {\n                    const filteredImages = internalImages.filter((image) => {\n                        if (image === fileName) {\n                            fileToDelete = image;\n                        }\n\n                        return image !== fileName;\n                    });\n\n                    setInternalImages(filteredImages);\n                }\n\n                if (!fileToDelete) {\n                    files?.forEach((file) => {\n                        if (file.url === fileName || file.name === fileName) {\n                            fileToDelete = file;\n                        }\n                    });\n                }\n\n                if (!fileToDelete || typeof onRemove !== 'function') {\n                    return;\n                }\n\n                onRemove(fileToDelete);\n            },\n            [files, internalFiles, internalImages, onRemove],\n        );\n\n        const internalIsDisabled = useMemo(() => {\n            if (isDisabled) {\n                return true;\n            }\n\n            if (maxFiles) {\n                if (internalFiles.length + internalImages.length >= maxFiles) {\n                    if (typeof onMaxFilesReached === 'function') {\n                        onMaxFilesReached();\n                    }\n\n                    return true;\n                }\n            }\n\n            return false;\n        }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);\n\n        const handleImageSelectionClick = useCallback(async () => {\n            if (internalIsDisabled) {\n                return;\n            }\n\n            const { buttonType, result } = (await createDialog<DialogInput>({\n                dialogInput: {\n                    upload: true,\n                    buttons: [\n                        { text: 'hello', buttonType: 1 },\n                        { text: 'can', buttonType: -1 },\n                    ],\n                    initialView: 'pixabay',\n                },\n                type: DialogType.MODULE,\n                system: {\n                    url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                    scope: 'dialog_image_editor',\n                    module: './ImageEditorEntry',\n                },\n                buttons: [],\n            }).open()) as ImageDialogResult;\n\n            if (buttonType === 1 && result?.url) {\n                handleAddImages([result.url]);\n            }\n        }, [handleAddImages, internalIsDisabled]);\n\n        const handleFileSelectionClick = useCallback(async () => {\n            if (internalIsDisabled) {\n                return;\n            }\n\n            const newFiles = await selectFiles({\n                multiple: true,\n                type: fileTypes,\n                maxFileSizeInMB,\n            });\n\n            handleAddFiles(newFiles);\n        }, [fileTypes, handleAddFiles, internalIsDisabled, maxFileSizeInMB]);\n\n        const handleDrop = useCallback(\n            (e: DragEvent<HTMLDivElement>) => {\n                e.preventDefault();\n                const draggedFiles = Array.from(e.dataTransfer.files);\n\n                handleAddFiles(draggedFiles);\n            },\n            [handleAddFiles],\n        );\n\n        const content = useMemo(() => {\n            const combinedFiles = [...internalImages, ...internalFiles];\n\n            const items: ReactElement[] = combinedFiles.map((file) => (\n                <StyledMotionFileInputList\n                    animate={{ height: 'auto', opacity: 1 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    key={typeof file === 'string' ? file : file.name}\n                    transition={{ duration: 0.25, type: 'tween' }}\n                >\n                    <FileListItem\n                        fileType={typeof file !== 'string' ? file.type : undefined}\n                        fileName={typeof file !== 'string' ? file.name : undefined}\n                        fileSize={typeof file !== 'string' ? file.size : undefined}\n                        url={typeof file === 'string' ? file : undefined}\n                        onRemove={handleDeleteFile}\n                    />\n                </StyledMotionFileInputList>\n            ));\n\n            return items;\n        }, [handleDeleteFile, internalFiles, internalImages]);\n\n        const uploadedFiles = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            const cutFiles = maxFiles ? files?.splice(0, maxFiles) : files;\n\n            cutFiles?.forEach(({ url, id, name }) => {\n                items.push(\n                    <StyledMotionFileInputList\n                        animate={{ height: 'auto', opacity: 1 }}\n                        exit={{ height: 0, opacity: 0 }}\n                        key={id}\n                        transition={{ duration: 0.25, type: 'tween' }}\n                    >\n                        <FileListItem url={url} onRemove={handleDeleteFile} fileName={name} />\n                    </StyledMotionFileInputList>,\n                );\n            });\n\n            return items;\n        }, [files, handleDeleteFile, maxFiles]);\n\n        return useMemo(\n            () => (\n                <StyledFileInput>\n                    <StyledFileInputWrapper $isDisabled={internalIsDisabled}>\n                        <StyledFileInputContainer\n                            onClick={() => void handleFileSelectionClick()}\n                            onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n                            onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n                        >\n                            <Icon icons={fileSelectionIcons} />\n                            <StyledFileInputText>{fileSelectionPlaceholder}</StyledFileInputText>\n                        </StyledFileInputContainer>\n                        {imageSelectPlaceholder && (\n                            <StyledFileInputContainer\n                                $isImageSelection\n                                onClick={() => void handleImageSelectionClick()}\n                            >\n                                <Icon icons={imageSelectIcons} />\n                                <StyledFileInputText>{imageSelectPlaceholder}</StyledFileInputText>\n                            </StyledFileInputContainer>\n                        )}\n                    </StyledFileInputWrapper>\n                    <List>\n                        <AnimatePresence initial={false}>{content}</AnimatePresence>\n                    </List>\n                    {uploadedFiles.length > 0 && (\n                        <StyledUploadedFilesList $shouldShowBorder={content.length > 0}>\n                            <List>\n                                <AnimatePresence initial={false}>{uploadedFiles}</AnimatePresence>\n                            </List>\n                        </StyledUploadedFilesList>\n                    )}\n                </StyledFileInput>\n            ),\n            [\n                internalIsDisabled,\n                fileSelectionIcons,\n                fileSelectionPlaceholder,\n                imageSelectPlaceholder,\n                imageSelectIcons,\n                content,\n                uploadedFiles,\n                handleFileSelectionClick,\n                handleDrop,\n                handleImageSelectionClick,\n            ],\n        );\n    },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/file-input/FileInput.styles.js

@@ -0,0 +1,63 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledFileInput = styled.div``;
+export const StyledFileInputWrapper = styled.div`
+    display: flex;
+
+    cursor: ${_ref => {
+  let {
+    $isDisabled
+  } = _ref;
+  return $isDisabled ? 'default' : 'pointer';
+}};
+    opacity: ${_ref2 => {
+  let {
+    $isDisabled
+  } = _ref2;
+  return $isDisabled ? 0.5 : 1;
+}};
+`;
+export const StyledUploadedFilesList = styled.div`
+    ${_ref3 => {
+  let {
+    $shouldShowBorder,
+    theme
+  } = _ref3;
+  return $shouldShowBorder && css`
+            border-top: 1px solid ${theme.headline};
+        `;
+}}
+`;
+export const StyledFileInputContainer = styled.div`
+    border: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.text;
+}} 1px dotted;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    padding: 15px;
+    justify-content: center;
+    width: 100%;
+
+    ${_ref5 => {
+  let {
+    $isImageSelection
+  } = _ref5;
+  return $isImageSelection && css`
+            border-left: none;
+        `;
+}}
+`;
+export const StyledFileInputText = styled.p`
+    color: ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.text;
+}};
+`;
+export const StyledMotionFileInputList = styled(motion.div)``;
+//# sourceMappingURL=FileInput.styles.js.map

package/lib/esm/components/file-input/FileInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.styles.js","names":["motion","styled","css","StyledFileInput","div","StyledFileInputWrapper","_ref","$isDisabled","_ref2","StyledUploadedFilesList","_ref3","$shouldShowBorder","theme","headline","StyledFileInputContainer","_ref4","text","_ref5","$isImageSelection","StyledFileInputText","p","_ref6","StyledMotionFileInputList"],"sources":["../../../../src/components/file-input/FileInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledFileInput = styled.div``;\n\ntype StyledFileInputWrapperProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledFileInputWrapper = styled.div<StyledFileInputWrapperProps>`\n    display: flex;\n\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledFileInputContainerProps = WithTheme<{\n    $isImageSelection?: boolean;\n}>;\n\ntype StyledUploadedFilesListProps = WithTheme<{ $shouldShowBorder: boolean }>;\n\nexport const StyledUploadedFilesList = styled.div<StyledUploadedFilesListProps>`\n    ${({ $shouldShowBorder, theme }: StyledUploadedFilesListProps) =>\n        $shouldShowBorder &&\n        css`\n            border-top: 1px solid ${theme.headline};\n        `}\n`;\n\nexport const StyledFileInputContainer = styled.div<StyledFileInputContainerProps>`\n    border: ${({ theme }: StyledFileInputContainerProps) => theme.text} 1px dotted;\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    padding: 15px;\n    justify-content: center;\n    width: 100%;\n\n    ${({ $isImageSelection }) =>\n        $isImageSelection &&\n        css`\n            border-left: none;\n        `}\n`;\n\ntype StyledFileInputTextProps = WithTheme<unknown>;\n\nexport const StyledFileInputText = styled.p<StyledFileInputTextProps>`\n    color: ${({ theme }: StyledFileInputTextProps) => theme.text};\n`;\n\nexport const StyledMotionFileInputList = styled(motion.div)<FramerMotionBugFix>``;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,GAAG,EAAE;AAM3C,OAAO,MAAMC,sBAAsB,GAAGJ,MAAM,CAACG,GAAgC;AAC7E;AACA;AACA,cAAcE,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACxE,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAY,CAAC,GAAAC,KAAA;EAAA,OAAMD,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D,CAAC;AAQD,OAAO,MAAME,uBAAuB,GAAGR,MAAM,CAACG,GAAiC;AAC/E,MAAMM,KAAA;EAAA,IAAC;IAAEC,iBAAiB;IAAEC;EAAoC,CAAC,GAAAF,KAAA;EAAA,OACzDC,iBAAiB,IACjBT,GAAG;AACX,oCAAoCU,KAAK,CAACC,QAAQ;AAClD,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAMC,wBAAwB,GAAGb,MAAM,CAACG,GAAkC;AACjF,cAAcW,KAAA;EAAA,IAAC;IAAEH;EAAqC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,IAAI;AAAA;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAkB,CAAC,GAAAD,KAAA;EAAA,OACpBC,iBAAiB,IACjBhB,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAID,OAAO,MAAMiB,mBAAmB,GAAGlB,MAAM,CAACmB,CAA2B;AACrE,aAAaC,KAAA;EAAA,IAAC;IAAET;EAAgC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAACI,IAAI;AAAA;AAChE,CAAC;AAED,OAAO,MAAMM,yBAAyB,GAAGrB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAqB,EAAE","ignoreList":[]}

package/lib/esm/components/file-input/file-list/FileListItem.js

@@ -0,0 +1,28 @@
+import React, { useMemo } from 'react';
+import { getHumanSize, getIconByMimeType } from '../../../utils/file';
+import Icon from '../../icon/Icon';
+import ListItem from '../../list/list-item/ListItem';
+import { StyledFileListItem } from './FileListItem.styles';
+const FileListItem = _ref => {
+  let {
+    fileName,
+    fileSize,
+    fileType,
+    onRemove,
+    url
+  } = _ref;
+  const humanFileSize = useMemo(() => fileSize && getHumanSize(fileSize), [fileSize]);
+  const icon = useMemo(() => getIconByMimeType(fileType), [fileType]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileListItem, null, /*#__PURE__*/React.createElement(ListItem, {
+    title: fileName ?? url,
+    subtitle: humanFileSize,
+    icons: url ? ['fa fa-file-image'] : [icon],
+    rightElements: /*#__PURE__*/React.createElement(Icon, {
+      icons: ['ts-wrong'],
+      onClick: () => onRemove(fileName ?? url ?? '')
+    })
+  })), [fileName, humanFileSize, icon, onRemove, url]);
+};
+FileListItem.displayName = 'FileList';
+export default FileListItem;
+//# sourceMappingURL=FileListItem.js.map

package/lib/esm/components/file-input/file-list/FileListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileListItem.js","names":["React","useMemo","getHumanSize","getIconByMimeType","Icon","ListItem","StyledFileListItem","FileListItem","_ref","fileName","fileSize","fileType","onRemove","url","humanFileSize","icon","createElement","title","subtitle","icons","rightElements","onClick","displayName"],"sources":["../../../../../src/components/file-input/file-list/FileListItem.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ListItem from '../../list/list-item/ListItem';\nimport { StyledFileListItem } from './FileListItem.styles';\n\nexport type FileListItemProps = {\n    fileName?: string;\n    fileSize?: number;\n    fileType?: string;\n    url?: string;\n    onRemove: (name: string) => void;\n};\n\nconst FileListItem: FC<FileListItemProps> = ({ fileName, fileSize, fileType, onRemove, url }) => {\n    const humanFileSize = useMemo(() => fileSize && getHumanSize(fileSize), [fileSize]);\n\n    const icon = useMemo(() => getIconByMimeType(fileType), [fileType]);\n\n    return useMemo(\n        () => (\n            <StyledFileListItem>\n                <ListItem\n                    title={fileName ?? url}\n                    subtitle={humanFileSize}\n                    icons={url ? ['fa fa-file-image'] : [icon]}\n                    rightElements={\n                        <Icon\n                            icons={['ts-wrong']}\n                            onClick={() => onRemove(fileName ?? url ?? '')}\n                        />\n                    }\n                />\n            </StyledFileListItem>\n        ),\n        [fileName, humanFileSize, icon, onRemove, url],\n    );\n};\n\nFileListItem.displayName = 'FileList';\n\nexport default FileListItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,SAASC,YAAY,EAAEC,iBAAiB,QAAQ,qBAAqB;AACrE,OAAOC,IAAI,MAAM,iBAAiB;AAClC,OAAOC,QAAQ,MAAM,+BAA+B;AACpD,SAASC,kBAAkB,QAAQ,uBAAuB;AAU1D,MAAMC,YAAmC,GAAGC,IAAA,IAAqD;EAAA,IAApD;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC;EAAI,CAAC,GAAAL,IAAA;EACxF,MAAMM,aAAa,GAAGb,OAAO,CAAC,MAAMS,QAAQ,IAAIR,YAAY,CAACQ,QAAQ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEnF,MAAMK,IAAI,GAAGd,OAAO,CAAC,MAAME,iBAAiB,CAACQ,QAAQ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEnE,OAAOV,OAAO,CACV,mBACID,KAAA,CAAAgB,aAAA,CAACV,kBAAkB,qBACfN,KAAA,CAAAgB,aAAA,CAACX,QAAQ;IACLY,KAAK,EAAER,QAAQ,IAAII,GAAI;IACvBK,QAAQ,EAAEJ,aAAc;IACxBK,KAAK,EAAEN,GAAG,GAAG,CAAC,kBAAkB,CAAC,GAAG,CAACE,IAAI,CAAE;IAC3CK,aAAa,eACTpB,KAAA,CAAAgB,aAAA,CAACZ,IAAI;MACDe,KAAK,EAAE,CAAC,UAAU,CAAE;MACpBE,OAAO,EAAEA,CAAA,KAAMT,QAAQ,CAACH,QAAQ,IAAII,GAAG,IAAI,EAAE;IAAE,CAClD;EACJ,CACJ,CACe,CACvB,EACD,CAACJ,QAAQ,EAAEK,aAAa,EAAEC,IAAI,EAAEH,QAAQ,EAAEC,GAAG,CACjD,CAAC;AACL,CAAC;AAEDN,YAAY,CAACe,WAAW,GAAG,UAAU;AAErC,eAAef,YAAY","ignoreList":[]}

package/lib/esm/components/file-input/file-list/FileListItem.styles.js

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+export const StyledFileListItem = styled.div``;
+//# sourceMappingURL=FileListItem.styles.js.map

package/lib/esm/components/file-input/file-list/FileListItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileListItem.styles.js","names":["styled","StyledFileListItem","div"],"sources":["../../../../../src/components/file-input/file-list/FileListItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFileListItem = styled.div``;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAAG,EAAE","ignoreList":[]}

package/lib/esm/components/filter-buttons/FilterButtons.js

@@ -0,0 +1,88 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { FilterButtonItemShape, FilterButtonSize } from '../../types/filterButtons';
+import FilterButton from './filter-button/FilterButton';
+import { StyledFilterButton } from './FilterButtons.styles';
+const FilterButtons = _ref => {
+  let {
+    allCount,
+    selectedItemIds,
+    onSelect,
+    items,
+    shouldCalcCountForAll = false,
+    size = FilterButtonSize.Normal
+  } = _ref;
+  const [selectedIds, setSelectedIds] = useState(['all']);
+
+  /**
+   * This function set the selectedItemKey
+   */
+  useEffect(() => {
+    if (selectedItemIds) {
+      setSelectedIds(selectedItemIds);
+    }
+  }, [selectedItemIds]);
+
+  /**
+   * Function to update the selected items
+   */
+  const handleSelect = useCallback(id => {
+    let newIds;
+    if (id === 'all') {
+      newIds = selectedIds.includes('all') ? ['all'] : [];
+    } else {
+      newIds = selectedIds.includes(id) ? selectedIds.filter(filteredId => filteredId !== id) : [...selectedIds.filter(filteredId => filteredId !== 'all'), id];
+    }
+    if (newIds.length === 0) {
+      newIds = ['all'];
+    }
+    setSelectedIds(newIds);
+    if (typeof onSelect === 'function') {
+      onSelect(newIds.filter(selectedId => selectedId !== 'all'));
+    }
+  }, [onSelect, selectedIds]);
+  const reactItems = useMemo(() => {
+    if (items.length === 0) {
+      return null;
+    }
+    let allButtonCount = allCount;
+    if (typeof allButtonCount !== 'number' && shouldCalcCountForAll) {
+      allButtonCount = items.reduce((acc, item) => acc + (item.count || 0), 0);
+    }
+    const array = [/*#__PURE__*/React.createElement(FilterButton, {
+      count: allButtonCount,
+      id: "all",
+      key: "all",
+      onSelect: handleSelect,
+      isSelected: selectedIds.includes('all') || Array.isArray(selectedIds) && selectedIds.length === 0,
+      shape: FilterButtonItemShape.Rectangular,
+      size: size,
+      text: "Alle"
+    })];
+    items.forEach(_ref2 => {
+      let {
+        icons,
+        text,
+        color,
+        count,
+        id
+      } = _ref2;
+      array.push(/*#__PURE__*/React.createElement(FilterButton, {
+        color: color,
+        icons: icons,
+        id: id,
+        key: id,
+        count: count,
+        onSelect: handleSelect,
+        isSelected: selectedIds.includes(id),
+        shape: FilterButtonItemShape.Round,
+        size: size,
+        text: text
+      }));
+    });
+    return array;
+  }, [allCount, handleSelect, items, selectedIds, shouldCalcCountForAll, size]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledFilterButton, null, reactItems), [reactItems]);
+};
+FilterButtons.displayName = 'FilterButtons';
+export default FilterButtons;
+//# sourceMappingURL=FilterButtons.js.map

package/lib/esm/components/filter-buttons/FilterButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtons.js","names":["React","useCallback","useEffect","useMemo","useState","FilterButtonItemShape","FilterButtonSize","FilterButton","StyledFilterButton","FilterButtons","_ref","allCount","selectedItemIds","onSelect","items","shouldCalcCountForAll","size","Normal","selectedIds","setSelectedIds","handleSelect","id","newIds","includes","filter","filteredId","length","selectedId","reactItems","allButtonCount","reduce","acc","item","count","array","createElement","key","isSelected","Array","isArray","shape","Rectangular","text","forEach","_ref2","icons","color","push","Round","displayName"],"sources":["../../../../src/components/filter-buttons/FilterButtons.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n    FilterButtonItemShape,\n    FilterButtonSize,\n    IFilterButtonItem,\n} from '../../types/filterButtons';\nimport FilterButton from './filter-button/FilterButton';\nimport { StyledFilterButton } from './FilterButtons.styles';\n\nexport type FilterButtonsProps = {\n    /**\n     * The number that should be displayed as count in the \"all\" button.\n     */\n    allCount?: number;\n    /**\n     * The items that should be displayed.\n     */\n    items: IFilterButtonItem[];\n    /**\n     * A function that should be executed when an item is selected.\n     */\n    onSelect?: (keys: string[]) => void;\n    /**\n     * The keys of items that should be selected.\n     */\n    selectedItemIds?: string[];\n    /**\n     * If true, the count of all items will be shown in the \"all\" button.\n     */\n    shouldCalcCountForAll?: boolean;\n    /**\n     * The size auf the filter buttons. Use the FilterButtonSize enum.\n     */\n    size?: FilterButtonSize;\n};\n\nconst FilterButtons: FC<FilterButtonsProps> = ({\n    allCount,\n    selectedItemIds,\n    onSelect,\n    items,\n    shouldCalcCountForAll = false,\n    size = FilterButtonSize.Normal,\n}) => {\n    const [selectedIds, setSelectedIds] = useState<string[]>(['all']);\n\n    /**\n     * This function set the selectedItemKey\n     */\n    useEffect(() => {\n        if (selectedItemIds) {\n            setSelectedIds(selectedItemIds);\n        }\n    }, [selectedItemIds]);\n\n    /**\n     * Function to update the selected items\n     */\n    const handleSelect = useCallback(\n        (id: string) => {\n            let newIds: string[];\n\n            if (id === 'all') {\n                newIds = selectedIds.includes('all') ? ['all'] : [];\n            } else {\n                newIds = selectedIds.includes(id)\n                    ? selectedIds.filter((filteredId) => filteredId !== id)\n                    : [...selectedIds.filter((filteredId) => filteredId !== 'all'), id];\n            }\n\n            if (newIds.length === 0) {\n                newIds = ['all'];\n            }\n\n            setSelectedIds(newIds);\n\n            if (typeof onSelect === 'function') {\n                onSelect(newIds.filter((selectedId) => selectedId !== 'all'));\n            }\n        },\n        [onSelect, selectedIds],\n    );\n\n    const reactItems = useMemo(() => {\n        if (items.length === 0) {\n            return null;\n        }\n\n        let allButtonCount = allCount;\n\n        if (typeof allButtonCount !== 'number' && shouldCalcCountForAll) {\n            allButtonCount = items.reduce((acc, item) => acc + (item.count || 0), 0);\n        }\n\n        const array: ReactElement[] = [\n            <FilterButton\n                count={allButtonCount}\n                id=\"all\"\n                key=\"all\"\n                onSelect={handleSelect}\n                isSelected={\n                    selectedIds.includes('all') ||\n                    (Array.isArray(selectedIds) && selectedIds.length === 0)\n                }\n                shape={FilterButtonItemShape.Rectangular}\n                size={size}\n                text=\"Alle\"\n            />,\n        ];\n\n        items.forEach(({ icons, text, color, count, id }) => {\n            array.push(\n                <FilterButton\n                    color={color}\n                    icons={icons}\n                    id={id}\n                    key={id}\n                    count={count}\n                    onSelect={handleSelect}\n                    isSelected={selectedIds.includes(id)}\n                    shape={FilterButtonItemShape.Round}\n                    size={size}\n                    text={text}\n                />,\n            );\n        });\n\n        return array;\n    }, [allCount, handleSelect, items, selectedIds, shouldCalcCountForAll, size]);\n\n    return useMemo(() => <StyledFilterButton>{reactItems}</StyledFilterButton>, [reactItems]);\n};\n\nFilterButtons.displayName = 'FilterButtons';\n\nexport default FilterButtons;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/filter-buttons/FilterButtons.styles.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+export const StyledFilterButton = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+`;
+//# sourceMappingURL=FilterButtons.styles.js.map

package/lib/esm/components/filter-buttons/FilterButtons.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtons.styles.js","names":["styled","StyledFilterButton","div"],"sources":["../../../../src/components/filter-buttons/FilterButtons.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFilterButton = styled.div`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAAG;AAC5C;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/filter-buttons/filter-button/FilterButton.js

@@ -0,0 +1,38 @@
+import React, { useCallback, useMemo } from 'react';
+import Icon from '../../icon/Icon';
+import { StyledFilterButtonItem, StyledFilterButtonItemBorder, StyledFilterButtonItemLabel, StyledFilterButtonItemLabelCount, StyledFilterButtonItemLabelText, StyledMotionFilterButtonItemBackground } from './FilterButton.styles';
+const FilterButton = _ref => {
+  let {
+    icons,
+    size,
+    shape,
+    text,
+    color,
+    count,
+    isSelected,
+    id,
+    onSelect
+  } = _ref;
+  const handleClick = useCallback(() => {
+    onSelect(id);
+  }, [id, onSelect]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledFilterButtonItem, {
+    $isSelected: isSelected,
+    $size: size,
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(StyledFilterButtonItemLabel, null, icons && /*#__PURE__*/React.createElement(Icon, {
+    icons: icons,
+    size: 15
+  }), /*#__PURE__*/React.createElement(StyledFilterButtonItemLabelText, null, text), typeof count === 'number' && /*#__PURE__*/React.createElement(StyledFilterButtonItemLabelCount, null, count.toLocaleString())), /*#__PURE__*/React.createElement(StyledFilterButtonItemBorder, {
+    $isSelected: isSelected,
+    $shape: shape,
+    $color: color
+  }), /*#__PURE__*/React.createElement(StyledMotionFilterButtonItemBackground, {
+    $isSelected: isSelected,
+    $shape: shape,
+    $color: color
+  })), [color, count, handleClick, icons, isSelected, shape, size, text]);
+};
+FilterButton.displayName = 'FilterButton';
+export default FilterButton;
+//# sourceMappingURL=FilterButton.js.map

package/lib/esm/components/filter-buttons/filter-button/FilterButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButton.js","names":["React","useCallback","useMemo","Icon","StyledFilterButtonItem","StyledFilterButtonItemBorder","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelCount","StyledFilterButtonItemLabelText","StyledMotionFilterButtonItemBackground","FilterButton","_ref","icons","size","shape","text","color","count","isSelected","id","onSelect","handleClick","createElement","$isSelected","$size","onClick","toLocaleString","$shape","$color","displayName"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.tsx"],"sourcesContent":["import React, { CSSProperties, FC, useCallback, useMemo } from 'react';\nimport type { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledFilterButtonItem,\n    StyledFilterButtonItemBorder,\n    StyledFilterButtonItemLabel,\n    StyledFilterButtonItemLabelCount,\n    StyledFilterButtonItemLabelText,\n    StyledMotionFilterButtonItemBackground,\n} from './FilterButton.styles';\n\nexport type FilterButtonProps = {\n    color?: CSSProperties['color'];\n    icons?: string[];\n    isSelected: boolean;\n    shape: FilterButtonItemShape;\n    size: FilterButtonSize;\n    count?: number;\n    text: string;\n    id: string;\n    onSelect: (key: string) => void;\n};\n\nconst FilterButton: FC<FilterButtonProps> = ({\n    icons,\n    size,\n    shape,\n    text,\n    color,\n    count,\n    isSelected,\n    id,\n    onSelect,\n}) => {\n    const handleClick = useCallback(() => {\n        onSelect(id);\n    }, [id, onSelect]);\n\n    return useMemo(\n        () => (\n            <StyledFilterButtonItem $isSelected={isSelected} $size={size} onClick={handleClick}>\n                <StyledFilterButtonItemLabel>\n                    {icons && <Icon icons={icons} size={15} />}\n                    <StyledFilterButtonItemLabelText>{text}</StyledFilterButtonItemLabelText>\n                    {typeof count === 'number' && (\n                        <StyledFilterButtonItemLabelCount>\n                            {count.toLocaleString()}\n                        </StyledFilterButtonItemLabelCount>\n                    )}\n                </StyledFilterButtonItemLabel>\n                <StyledFilterButtonItemBorder\n                    $isSelected={isSelected}\n                    $shape={shape}\n                    $color={color}\n                />\n                <StyledMotionFilterButtonItemBackground\n                    $isSelected={isSelected}\n                    $shape={shape}\n                    $color={color}\n                />\n            </StyledFilterButtonItem>\n        ),\n        [color, count, handleClick, icons, isSelected, shape, size, text],\n    );\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport default FilterButton;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAuBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAEtE,OAAOC,IAAI,MAAM,iBAAiB;AAClC,SACIC,sBAAsB,EACtBC,4BAA4B,EAC5BC,2BAA2B,EAC3BC,gCAAgC,EAChCC,+BAA+B,EAC/BC,sCAAsC,QACnC,uBAAuB;AAc9B,MAAMC,YAAmC,GAAGC,IAAA,IAUtC;EAAA,IAVuC;IACzCC,KAAK;IACLC,IAAI;IACJC,KAAK;IACLC,IAAI;IACJC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,EAAE;IACFC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAMU,WAAW,GAAGpB,WAAW,CAAC,MAAM;IAClCmB,QAAQ,CAACD,EAAE,CAAC;EAChB,CAAC,EAAE,CAACA,EAAE,EAAEC,QAAQ,CAAC,CAAC;EAElB,OAAOlB,OAAO,CACV,mBACIF,KAAA,CAAAsB,aAAA,CAAClB,sBAAsB;IAACmB,WAAW,EAAEL,UAAW;IAACM,KAAK,EAAEX,IAAK;IAACY,OAAO,EAAEJ;EAAY,gBAC/ErB,KAAA,CAAAsB,aAAA,CAAChB,2BAA2B,QACvBM,KAAK,iBAAIZ,KAAA,CAAAsB,aAAA,CAACnB,IAAI;IAACS,KAAK,EAAEA,KAAM;IAACC,IAAI,EAAE;EAAG,CAAE,CAAC,eAC1Cb,KAAA,CAAAsB,aAAA,CAACd,+BAA+B,QAAEO,IAAsC,CAAC,EACxE,OAAOE,KAAK,KAAK,QAAQ,iBACtBjB,KAAA,CAAAsB,aAAA,CAACf,gCAAgC,QAC5BU,KAAK,CAACS,cAAc,CAAC,CACQ,CAEb,CAAC,eAC9B1B,KAAA,CAAAsB,aAAA,CAACjB,4BAA4B;IACzBkB,WAAW,EAAEL,UAAW;IACxBS,MAAM,EAAEb,KAAM;IACdc,MAAM,EAAEZ;EAAM,CACjB,CAAC,eACFhB,KAAA,CAAAsB,aAAA,CAACb,sCAAsC;IACnCc,WAAW,EAAEL,UAAW;IACxBS,MAAM,EAAEb,KAAM;IACdc,MAAM,EAAEZ;EAAM,CACjB,CACmB,CAC3B,EACD,CAACA,KAAK,EAAEC,KAAK,EAAEI,WAAW,EAAET,KAAK,EAAEM,UAAU,EAAEJ,KAAK,EAAED,IAAI,EAAEE,IAAI,CACpE,CAAC;AACL,CAAC;AAEDL,YAAY,CAACmB,WAAW,GAAG,cAAc;AAEzC,eAAenB,YAAY","ignoreList":[]}