@macive/ui 0.0.12 → 0.0.14

package/dist/src/components/Upload/components/Modal/UploadModalContainer.js

@@ -7,9 +7,9 @@ exports.NetworkStatus = exports.UploadModalContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const device_type_1 = require("../../../../utilities/device-type");
-const utils_1 = require("../../../../utils");
 const Box_1 = require("../../../Box");
 const Button_1 = require("../../../Button");
+const Grid_1 = require("../../../Grid");
 const LegacyCard_1 = require("../../../LegacyCard");
 const Modal_1 = require("../../../Modal");
 const V1_1 = require("../../../Pagination/V1");
@@ -21,13 +21,16 @@ const FileUploadInput_1 = __importDefault(require("../UploaderInput/FileUploadIn
 const UploadProvider_1 = require("../UploadProvider");
 const UploadServiceProvider_1 = require("../UploadServiceProvider");
 const UploadFilterSection_1 = __importDefault(require("./UploadFilterSection"));
+const UploadModalContainer_classnames_1 = __importDefault(require("./UploadModalContainer.classnames"));
 const UploadModalFileItem_1 = __importDefault(require("./UploadModalFileItem"));
 const UploadModalContainer = ({ open, close, audience = 'MERCHANT', title, arrangeType = 'grid', }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b;
     const { setFilesState, uploaderProps, selectedAttachments, updateSelectedAttachments } = (0, UploadProvider_1.useUpload)();
     const modelUploadType = constants_1.UPLOAD_TYPE[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.uploadType];
     const { uploadConfig } = (0, UploadServiceProvider_1.useUploadService)();
     const { isMobile } = (0, device_type_1.useDeviceType)();
+    const chatWindowRef = (0, react_1.useRef)(null);
+    const [showSelectedPanel, setShowSelectedPanel] = (0, react_1.useState)(false);
     const { data, loading, refetch, error, fetchMore, variables, networkStatus } = uploadConfig.getUploads({
         variables: {
             sortBy: 'NEWEST',
@@ -38,95 +41,78 @@ const UploadModalContainer = ({ open, close, audience = 'MERCHANT', title, arran
         fetchPolicy: 'cache-and-network',
         notifyOnNetworkStatusChange: true,
     });
-    const updateUploadsList = async (_newAttachments) => {
-        refetch({ sortBy: 'NEWEST' });
+    const errorMessage = error ? error.message : null;
+    // const uploadsData = data?.uploads?.data || []
+    const paginatorInfo = (_a = data === null || data === void 0 ? void 0 : data.uploads) === null || _a === void 0 ? void 0 : _a.paginatorInfo;
+    const selectedFiles = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey] || [];
+    // Use useMemo to initialize `uploadsData` and ensure uniqueness by `id`
+    const uniqueUploadsData = (0, react_1.useMemo)(() => {
+        var _a;
+        const uploadsData = ((_a = data === null || data === void 0 ? void 0 : data.uploads) === null || _a === void 0 ? void 0 : _a.data) || [];
+        return [...new Map(uploadsData.map((item) => [item.id, item])).values()];
+    }, [(_b = data === null || data === void 0 ? void 0 : data.uploads) === null || _b === void 0 ? void 0 : _b.data]);
+    const updateUploadsList = (0, react_1.useCallback)(async () => {
+        await refetch({ sortBy: 'NEWEST' });
         setFilesState([]);
-    };
-    const chatWindowRef = (0, react_1.useRef)();
-    /**Scroll to the bottom of the chat window when messages change */
-    function scrollToView() {
-        //@ts-expect-error scrollIntoView
-        (chatWindowRef === null || chatWindowRef === void 0 ? void 0 : chatWindowRef.current) && chatWindowRef.current.scrollIntoView({ behavior: 'smooth' });
-    }
-    const [showSelectedPanel, setShowSelectedPanel] = (0, react_1.useState)(false);
-    const errorMessage = error ? error === null || error === void 0 ? void 0 : error.message : null;
-    const handleLoadMore = async () => {
-        var _a, _b, _c, _d;
-        if (!((_b = (_a = data === null || data === void 0 ? void 0 : data.uploads) === null || _a === void 0 ? void 0 : _a.paginatorInfo) === null || _b === void 0 ? void 0 : _b.hasMorePages)) {
+    }, [refetch, setFilesState]);
+    const handleLoadMore = (0, react_1.useCallback)(async () => {
+        if (!(paginatorInfo === null || paginatorInfo === void 0 ? void 0 : paginatorInfo.hasMorePages))
             return;
-        }
-        // Get the current page number from the response data
-        const currentPage = (_d = (_c = data === null || data === void 0 ? void 0 : data.uploads) === null || _c === void 0 ? void 0 : _c.paginatorInfo) === null || _d === void 0 ? void 0 : _d.currentPage;
-        // Fetch the next page
-        const nextPage = currentPage + 1;
-        // Fetch the new data for the next page using fetchMore
+        const nextPage = paginatorInfo.currentPage + 1;
         await fetchMore({
             variables: {
                 ...variables,
                 page: nextPage,
             },
-            //@ts-expect-error any
+            //@ts-expect-error error
             updateQuery: (prev, { fetchMoreResult }) => {
                 var _a, _b, _c;
                 if (!fetchMoreResult)
                     return prev;
-                //@ts-expect-error GetCollectionsQuery
-                const updatedData = {
+                return {
                     uploads: {
                         data: [...(((_a = prev === null || prev === void 0 ? void 0 : prev.uploads) === null || _a === void 0 ? void 0 : _a.data) || []), ...(((_b = fetchMoreResult === null || fetchMoreResult === void 0 ? void 0 : fetchMoreResult.uploads) === null || _b === void 0 ? void 0 : _b.data) || [])],
                         paginatorInfo: (_c = fetchMoreResult === null || fetchMoreResult === void 0 ? void 0 : fetchMoreResult.uploads) === null || _c === void 0 ? void 0 : _c.paginatorInfo,
                     },
                 };
-                return updatedData;
             },
         });
+    }, [fetchMore, paginatorInfo, variables]);
+    const scrollToView = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = chatWindowRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+    }, []);
+    const handleFileClick = (0, react_1.useCallback)((file) => {
+        updateSelectedAttachments([file], uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey, uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments);
+    }, [updateSelectedAttachments, uploaderProps]);
+    const renderFileItems = (files, isSelectedPanel = false) => {
+        return files.map((file, idx) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (file === null || file === void 0 ? void 0 : file.src) && ((0, jsx_runtime_1.jsx)(UploadModalFileItem_1.default, { allowedFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, arrangeType: isSelectedPanel ? 'grid' : arrangeType, maxAttachments: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments, selectedAttachments: selectedFiles, file: file, onClick: () => handleFileClick(file) })) }, idx)));
+    };
+    const renderContent = () => {
+        if (showSelectedPanel) {
+            return selectedFiles.length ? ((0, jsx_runtime_1.jsx)(Grid_1.Grid, { columns: { xs: 2, sm: 2, md: 4, lg: 5, xl: 5 }, children: renderFileItems(selectedFiles, true) })) : ((0, jsx_runtime_1.jsx)(Box_1.Box, { padding: '8', children: (0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', children: (0, jsx_runtime_1.jsx)(LegacyCard_1.LegacyCard.Section, { children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', gap: { xs: '8' }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "You haven't selected any files." }), (0, jsx_runtime_1.jsx)(Button_1.Button, { primary: true, onClick: () => setShowSelectedPanel(false), children: "Select" })] }) }) }) }));
+        }
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Grid_1.Grid, { columns: !uniqueUploadsData.length
+                    ? { xs: 3, sm: 3, md: 4, lg: 4, xl: 4 }
+                    : { xs: 3, sm: 3, md: 4, lg: 4, xl: 4 }, children: [(0, jsx_runtime_1.jsx)(FileUploadInput_1.default, { refetch: updateUploadsList, updateUploadsList: updateUploadsList, acceptFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, headerOptions: { uploadType: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.uploadType, modelUploadKey: undefined } }), !!uniqueUploadsData.length && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderFileItems(uniqueUploadsData) })] }) }));
     };
-    return ((0, jsx_runtime_1.jsx)(Modal_1.Modal, { large: true, fullScreen: true, onScrolledToBottom: () => { var _a, _b; return ((_b = (_a = data === null || data === void 0 ? void 0 : data.uploads) === null || _a === void 0 ? void 0 : _a.paginatorInfo) === null || _b === void 0 ? void 0 : _b.hasMorePages) ? handleLoadMore() : undefined; }, title: title, open: open, onClose: close, secondaryActions: [
+    return ((0, jsx_runtime_1.jsx)(Modal_1.Modal, { large: true, fullScreen: true, onScrolledToBottom: (paginatorInfo === null || paginatorInfo === void 0 ? void 0 : paginatorInfo.hasMorePages) ? handleLoadMore : undefined, title: title, open: open, onClose: close, secondaryActions: [
             {
-                content: 'cancel',
+                content: 'Cancel',
                 onAction: close,
             },
         ], primaryAction: {
-            content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Done", ((_a = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _a === void 0 ? void 0 : _a.length) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["(", (_b = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _b === void 0 ? void 0 : _b.length, ")"] })) : null] })),
+            content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Done", selectedFiles.length ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["(", selectedFiles.length, ")"] }) : null] })),
             onAction: () => {
                 var _a;
                 (_a = uploaderProps.onSubmit) === null || _a === void 0 ? void 0 : _a.call(uploaderProps);
                 close();
             },
-            disabled: !((_c = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _c === void 0 ? void 0 : _c.length) && !uploaderProps.onSubmit,
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                // display: 'flex',
-                height: isMobile ? '80vh' : '70vh',
-                // position: 'relative',
-            }, children: (0, jsx_runtime_1.jsx)(Modal_1.Modal.Section, { children: (0, jsx_runtime_1.jsxs)("div", { className: 'hidable-parent hidable-parent-display  relative w-full  overflow-x-hidden  ', children: [(0, jsx_runtime_1.jsx)("div", { className: '  flex w-full flex-col', children: (0, jsx_runtime_1.jsx)("div", { className: 'z-[999] flex w-full items-center  justify-between space-x-4', children: (0, jsx_runtime_1.jsx)(UploadFilterSection_1.default, { refetch: refetch, openSelectedPanel: showSelectedPanel
-                                        ? () => setShowSelectedPanel(false)
-                                        : () => setShowSelectedPanel(true) }) }) }), (0, jsx_runtime_1.jsx)("div", { id: 'scrollHere', ref: chatWindowRef }), loading && (networkStatus === NetworkStatus.refetch || NetworkStatus.loading) && ((0, jsx_runtime_1.jsxs)("div", { className: 'relative my-1 h-10 bg-blue-400', children: [(0, jsx_runtime_1.jsx)("div", { className: 'absolute top-2 left-1/2  font-semibold', children: "Getting your files ready" }), (0, jsx_runtime_1.jsx)("div", { className: 'animate-loading absolute h-full w-full bg-gradient-to-r from-transparent via-white to-transparent' }), (0, jsx_runtime_1.jsx)("div", { className: 'absolute top-0 left-0 h-full w-4 animate-bounce bg-white opacity-75' }), (0, jsx_runtime_1.jsx)("div", { className: 'absolute top-0 right-0 h-full w-4 animate-bounce bg-white opacity-75' })] })), loading && (networkStatus === NetworkStatus.refetch || NetworkStatus.loading) && ((0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {})), !showSelectedPanel ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(arrangeType == 'list'
-                                ? 'flex flex-col'
-                                : 'mt-4  grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-5'), children: [(0, jsx_runtime_1.jsx)(FileUploadInput_1.default, { refetch: () => refetch({
-                                        sortBy: 'NEWEST',
-                                    }), updateUploadsList: updateUploadsList, acceptFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, headerOptions: {
-                                        uploadType: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.uploadType,
-                                        modelUploadKey: undefined,
-                                    } }), ((_e = (_d = data === null || data === void 0 ? void 0 : data.uploads) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.length) ? ((_g = (_f = data === null || data === void 0 ? void 0 : data.uploads) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.map((file, idx) => {
-                                    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (file === null || file === void 0 ? void 0 : file.src) && ((0, jsx_runtime_1.jsx)(UploadModalFileItem_1.default, { allowedFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, arrangeType: arrangeType, maxAttachments: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments, selectedAttachments: selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey], file: file, onClick: () => {
-                                                updateSelectedAttachments([file], uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey, uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments);
-                                            } })) }, idx));
-                                })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(loading ? 'hidden' : 'flex', 'dtext-2xl items-center justify-center py-6  font-semibold'), children: errorMessage ? errorMessage : ' No files found' }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [((_h = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _h === void 0 ? void 0 : _h.length) ? ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(arrangeType == 'list'
-                                        ? 'flex flex-col'
-                                        : 'mt-4 grid grid-cols-4 gap-2 md:grid-cols-4'), children: selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey].map((file, idx) => {
-                                        return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (file === null || file === void 0 ? void 0 : file.src) && ((0, jsx_runtime_1.jsx)(UploadModalFileItem_1.default, { allowedFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, arrangeType: 'grid', maxAttachments: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments, selectedAttachments: selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey], file: file, onClick: () => {
-                                                    updateSelectedAttachments([file], uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey, uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments);
-                                                } })) }, idx));
-                                    }) })) : ((0, jsx_runtime_1.jsx)(Box_1.Box, { padding: '8', children: (0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', children: (0, jsx_runtime_1.jsx)(LegacyCard_1.LegacyCard.Section, { children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', gap: {
-                                                    xs: '8',
-                                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "You haven't selected any files. " }), (0, jsx_runtime_1.jsx)(Button_1.Button, { primary: true, onClick: () => setShowSelectedPanel(false), children: "Select" })] }) }) }) })), ' '] })), loading && networkStatus === NetworkStatus.fetchMore && ((0, jsx_runtime_1.jsx)(Box_1.Box, { padding: '8', children: (0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {}) }) })), !showSelectedPanel &&
-                            ((_j = data === null || data === void 0 ? void 0 : data.uploads) === null || _j === void 0 ? void 0 : _j.paginatorInfo) &&
-                            (!loading || networkStatus === NetworkStatus.fetchMore) ? ((0, jsx_runtime_1.jsx)(V1_1.PaginationV1, { onChange: (page) => {
-                                refetch({
-                                    page: page,
-                                });
-                                scrollToView();
-                            }, activePage: (_k = data === null || data === void 0 ? void 0 : data.uploads) === null || _k === void 0 ? void 0 : _k.paginatorInfo.currentPage, itemsCountPerPage: (_l = data === null || data === void 0 ? void 0 : data.uploads) === null || _l === void 0 ? void 0 : _l.paginatorInfo.perPage, totalItemsCount: (_m = data === null || data === void 0 ? void 0 : data.uploads) === null || _m === void 0 ? void 0 : _m.paginatorInfo.total, hideNavigation: true, pageRangeDisplayed: 4, hideTotalPages: false })) : ((0, jsx_runtime_1.jsx)("div", {}))] }) }) }) }));
+            disabled: !selectedFiles.length && !uploaderProps.onSubmit,
+        }, children: (0, jsx_runtime_1.jsx)("div", { className: UploadModalContainer_classnames_1.default['modal-container'], children: (0, jsx_runtime_1.jsx)(Modal_1.Modal.Section, { children: (0, jsx_runtime_1.jsxs)("div", { className: UploadModalContainer_classnames_1.default['hidable-parent'], children: [(0, jsx_runtime_1.jsx)(UploadFilterSection_1.default, { refetch: refetch, openSelectedPanel: () => setShowSelectedPanel(!showSelectedPanel) }), (0, jsx_runtime_1.jsx)("div", { id: 'scrollHere', ref: chatWindowRef }), loading && (networkStatus === NetworkStatus.refetch || NetworkStatus.loading) && ((0, jsx_runtime_1.jsxs)("div", { className: UploadModalContainer_classnames_1.default['loading-indicator'], children: [(0, jsx_runtime_1.jsx)("div", { className: UploadModalContainer_classnames_1.default['loading-indicator-text'], children: "Getting your files ready" }), (0, jsx_runtime_1.jsx)("div", { className: UploadModalContainer_classnames_1.default['loading-indicator-bar'] })] })), loading && (networkStatus === NetworkStatus.refetch || NetworkStatus.loading) && ((0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {})), (0, jsx_runtime_1.jsxs)(Box_1.Box, { paddingBlockStart: '4', children: [renderContent(), loading && networkStatus === NetworkStatus.fetchMore && ((0, jsx_runtime_1.jsx)(Box_1.Box, { padding: '8', children: (0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {}) }) })), !showSelectedPanel && paginatorInfo && !loading && ((0, jsx_runtime_1.jsx)(V1_1.PaginationV1, { onChange: (page) => {
+                                        refetch({ page });
+                                        scrollToView();
+                                    }, activePage: paginatorInfo.currentPage, itemsCountPerPage: paginatorInfo.perPage, totalItemsCount: paginatorInfo.total, hideNavigation: true, pageRangeDisplayed: 4, hideTotalPages: false }))] })] }) }) }) }));
 };
 exports.UploadModalContainer = UploadModalContainer;
 var NetworkStatus;

package/dist/src/components/Upload/components/Modal/UploadModalFileItem.classnames.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const UploadModalFileItemClassnames = {
+    "upload-modal-file-item": "UploadModalFileItem-upload-modal-file-item",
+    "file-item-container": "UploadModalFileItem-file-item-container",
+    "fileActionsCard": "UploadModalFileItem-fileActionsCard",
+    "file-actions": "UploadModalFileItem-file-actions",
+    "action-button": "UploadModalFileItem-action-button",
+    "file-checkbox": "UploadModalFileItem-file-checkbox",
+    "checkbox": "UploadModalFileItem-checkbox",
+    "disabled": "UploadModalFileItem-disabled",
+    "checked-overlay": "UploadModalFileItem-checked-overlay",
+    "visible": "UploadModalFileItem-visible"
+};
+exports.default = UploadModalFileItemClassnames;

package/dist/src/components/Upload/components/Modal/UploadModalFileItem.js

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Box_1 = require("../../../Box");
+const Button_1 = require("../../../Button");
 const Checkbox_1 = require("../../../Checkbox");
 const HorizontalStack_1 = require("../../../HorizontalStack");
 const Icon_1 = require("../../../Icon");
@@ -10,78 +14,31 @@ const Icons_1 = require("../../../Icons");
 const Text_1 = require("../../../Text");
 const utils_1 = require("../../utils");
 const FileViewer_1 = require("../FileViewer");
-/**
-A component that displays a list of selected files in a modal.
-*/
+const UploadModalFileItem_classnames_1 = __importDefault(require("./UploadModalFileItem.classnames")); // Import the SCSS file
 const UploadModalFileItem = ({ selectedAttachments = [], file, onClick, allowedFileTypes, maxAttachments, }) => {
-    const isId = selectedAttachments.findIndex((att) => (att === null || att === void 0 ? void 0 : att.id) == file.id);
-    const checked = isId > -1;
-    // let disabled = selectedAttachments.length >= maxAttachments && !checked
-    let disabled = false;
-    const checkedNumber = isId + 1;
-    let unAcceptedType;
-    if (!(0, utils_1.checkIfFileIsAccepted)(file, allowedFileTypes)) {
-        disabled = true;
-        unAcceptedType = true;
-    }
     const [icon, setIcon] = (0, react_1.useState)((0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCopyLink }));
+    const isSelected = selectedAttachments.findIndex((att) => att.id === file.id) > -1;
+    const checkedNumber = isSelected
+        ? selectedAttachments.findIndex((att) => att.id === file.id) + 1
+        : null;
+    const unAcceptedType = !(0, utils_1.checkIfFileIsAccepted)(file, allowedFileTypes);
+    // const disabled = unAcceptedType || (selectedAttachments.length >= maxAttachments && !isSelected)
+    const disabled = unAcceptedType;
     const handleCopyClick = async (url) => {
         try {
             setIcon((0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCheckCircle }));
             if (typeof window !== 'undefined') {
                 await navigator.clipboard.writeText(url);
-                // Reset the icon to FiCopy after 20 seconds
-                setTimeout(() => {
-                    setIcon((0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCopyLink }));
-                }, 20000);
+                setTimeout(() => setIcon((0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCopyLink })), 20000);
             }
         }
-        catch (error) {
+        catch {
             setIcon((0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaError }));
         }
     };
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { borderRadius: '1', borderColor: 'border', borderWidth: '1', children: (0, jsx_runtime_1.jsxs)("div", { 
-            // className='h-24 w-32'
-            style: {
-                position: 'relative',
-                display: 'flex',
-                alignItems: 'center',
-                // width: 'max-content',
-            }, onClick: !disabled ? onClick : undefined, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                        position: 'absolute',
-                        top: 4,
-                        zIndex: 512,
-                        left: 2,
-                        right: 2,
-                        cursor: disabled ? 'not-allowed' : 'pointer',
-                        paddingTop: '4px',
-                    }, children: (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '1', align: 'space-between', blockAlign: 'center', children: [(0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '1', align: 'space-between', blockAlign: 'center', children: [(0, jsx_runtime_1.jsx)("button", { onClick: (event) => {
-                                            event.stopPropagation(); // Prevent click event from propagating to the parent div
-                                            handleCopyClick(file.url);
-                                        }, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { background: 'bg-input', padding: '1', borderRadius: '2', children: icon }) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                            cursor: 'pointer',
-                                        }, onClick: (event) => {
-                                            event.stopPropagation();
-                                            typeof window !== 'undefined' && window.open(file.url, '_blank');
-                                        }, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { background: 'bg-input', padding: '1', borderRadius: '2', children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaEyes }) }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                    position: 'relative',
-                                    cursor: disabled ? 'not-allowed' : 'pointer',
-                                }, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { background: 'bg-input', borderRadius: '2', padding: '4', children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                            position: 'absolute',
-                                            left: '6%',
-                                            top: '10%',
-                                            cursor: disabled ? 'not-allowed' : 'pointer',
-                                        }, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { label: 'checkbox', labelHidden: true, checked: checked, readOnly: true, disabled: disabled }) }) }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                        height: '100%',
-                        width: '100%',
-                        flexShrink: 0,
-                        overflow: 'hidden',
-                    }, children: (0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { file: file, disabled: disabled, unAcceptedType: unAcceptedType }) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                        position: 'absolute',
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                        opacity: checked ? 100 : 0,
-                    }, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { background: 'bg-success', padding: '2', borderRadiusStartEnd: '1', borderRadiusEndEnd: '1', children: (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { align: 'space-between', blockAlign: 'center', children: [(0, jsx_runtime_1.jsxs)(Text_1.Text, { children: [checked && `${checkedNumber}/${maxAttachments}`, " "] }), (0, jsx_runtime_1.jsx)("div", { children: checked && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCheckCircle }) })] }) }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { borderRadius: '3', borderWidth: '1', borderBlockEndWidth: '5', borderColor: 'border', children: (0, jsx_runtime_1.jsx)("div", { className: UploadModalFileItem_classnames_1.default['upload-modal-file-item'], children: (0, jsx_runtime_1.jsxs)("div", { className: UploadModalFileItem_classnames_1.default['file-item-container'], onClick: !disabled ? onClick : undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: UploadModalFileItem_classnames_1.default.fileActionsCard, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { borderRadius: '2', padding: '1', children: (0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { gap: '1', align: 'space-between', blockAlign: 'center', children: (0, jsx_runtime_1.jsxs)("div", { className: UploadModalFileItem_classnames_1.default['file-actions'], children: [(0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '1', blockAlign: 'center', wrap: false, children: [(0, jsx_runtime_1.jsx)(ActionButton, { onClick: () => handleCopyClick(file.url), icon: icon }), (0, jsx_runtime_1.jsx)(ActionButton, { onClick: () => window.open(file.url, '_blank'), icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaEyes }) })] }), (0, jsx_runtime_1.jsx)(FileCheckbox, { checked: isSelected, disabled: disabled })] }) }) }) }), (0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { file: file, disabled: disabled, unAcceptedType: unAcceptedType }), (0, jsx_runtime_1.jsx)(CheckedOverlay, { checked: isSelected, checkedNumber: checkedNumber, maxAttachments: maxAttachments })] }) }) }));
 };
+const ActionButton = ({ onClick, icon }) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, size: 'slim', monochrome: true, icon: icon, onClick: onClick }));
+const FileCheckbox = ({ checked, disabled }) => ((0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { label: 'checkbox', labelHidden: true, checked: checked, readOnly: true, disabled: disabled }));
+const CheckedOverlay = ({ checked, checkedNumber, maxAttachments }) => ((0, jsx_runtime_1.jsx)("div", { className: `${UploadModalFileItem_classnames_1.default['checked-overlay']} ${checked ? UploadModalFileItem_classnames_1.default['visible'] : ''}`, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { background: 'bg-success', padding: '2', borderRadiusStartEnd: '1', borderRadiusEndEnd: '1', children: (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { align: 'space-between', blockAlign: 'center', children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: checked && `${checkedNumber}/${maxAttachments}` }), checked && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCheckCircle })] }) }) }));
 exports.default = UploadModalFileItem;

package/dist/src/components/Upload/components/Thumbnail/Thumbanail.js

@@ -1,68 +1,40 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClassicThumbnail = void 0;
+exports.DefaultThumbnail = exports.ClassicThumbnail = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("../../../../utils");
-const constants_1 = require("../../constants");
+const Stack_1 = require("../../../Stack");
+const Text_1 = require("../../../Text");
+const Thumbnail_classnames_1 = __importDefault(require("./Thumbnail.classnames"));
 /**
  * A component that displays a thumbnail image for a selected file.
  */
-const Thumbnail = (props) => {
+const Thumbnail = ({ thumbnailSize = 'm', thumbnailVariant = 'square', thumbnailClassName, onClick, dragging, hasDragAndDrop, }) => {
     const thumbSizes = {
-        sm: 'h-[68px] w-[68px]',
-        normal: 'h-[133px] w-[115px] sm:w-[133px]',
-        m: 'h-[100px] w-[100px]',
-        lg: 'h-[250px] w-[250px] ',
-        xl: 'h-[250px] w-[350px]',
-        none: '!h-full !w-full',
+        sm: Thumbnail_classnames_1.default.sizeSm,
+        normal: Thumbnail_classnames_1.default.sizeNormal,
+        m: Thumbnail_classnames_1.default.sizeM,
+        lg: Thumbnail_classnames_1.default.sizeLg,
+        xl: Thumbnail_classnames_1.default.sizeXl,
+        none: Thumbnail_classnames_1.default.sizeNone,
     };
     const thumbnailVariantClasses = {
-        rectangle: '!h-full !w-full',
+        rectangle: Thumbnail_classnames_1.default.variantRectangle,
         square: '',
-        circle: '!rounded-full',
+        circle: Thumbnail_classnames_1.default.variantCircle,
     };
-    const { acceptFileTypes = constants_1.FILE_TYPE.IMAGE, thumbnailSize = 'm', thumbnailVariant = 'square', thumbnailClassName, onClick, dragging, hasDragAndDrop, } = props;
-    return ((0, jsx_runtime_1.jsx)("div", { onClick: onClick, className: (0, utils_1.cn)('extraOutline dbg-skin-primary  cursor-pointer rounded ', thumbnailClassName), children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('file_upload bg-skin-primary relative flex w-full items-center justify-center  rounded-md ', ' border-[2px] border-dashed border-gray-600 p-4', thumbSizes[thumbnailSize] || 'h-full', thumbnailVariantClasses[thumbnailVariant], dragging && '!bg-teal-300 '), children: (0, jsx_runtime_1.jsxs)("div", { className: 'justify center flex  flex-col items-center space-y-2 text-center text-2xl', children: [renderThumbnail(acceptFileTypes), hasDragAndDrop && ((0, jsx_runtime_1.jsx)("div", { className: 'text-xs', children: dragging
+    return ((0, jsx_runtime_1.jsx)("div", { onClick: onClick, className: (0, utils_1.cn)(Thumbnail_classnames_1.default.thumbnailContainer, thumbnailClassName), children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(Thumbnail_classnames_1.default.thumbnail, thumbSizes[thumbnailSize] || Thumbnail_classnames_1.default.sizeFull, thumbnailVariantClasses[thumbnailVariant], dragging && Thumbnail_classnames_1.default.dragging), children: (0, jsx_runtime_1.jsxs)("div", { className: Thumbnail_classnames_1.default.content, children: [!hasDragAndDrop && (0, jsx_runtime_1.jsx)(exports.DefaultThumbnail, {}), hasDragAndDrop && ((0, jsx_runtime_1.jsx)(Text_1.Text, { children: dragging
                             ? 'Drop the file here'
                             : 'Drag and drop a file here, or click to select a file' }))] }) }) }));
 };
-const renderThumbnail = (acceptFileTypes) => {
-    if (!Array.isArray(acceptFileTypes)) {
-        return (0, jsx_runtime_1.jsx)(FileIcon, {});
-    }
-    if (acceptFileTypes.every((category) => category == constants_1.FILE_TYPE.IMAGE)) {
-        return (0, jsx_runtime_1.jsx)(FileIcon, {});
-    }
-    if (acceptFileTypes.every((category) => category === constants_1.FILE_TYPE.VIDEO)) {
-        return (0, jsx_runtime_1.jsx)(FileIcon, {});
-    }
-    if (acceptFileTypes.every((category) => category === constants_1.FILE_TYPE.DOCUMENT)) {
-        return (0, jsx_runtime_1.jsx)(FileIcon, {});
-    }
-    if (acceptFileTypes.every((category) => category === constants_1.FILE_TYPE.ZIP)) {
-        return (0, jsx_runtime_1.jsx)(FileIcon, {});
-    }
-    if (acceptFileTypes.every((category) => category === constants_1.FILE_TYPE.PDF)) {
-        return (0, jsx_runtime_1.jsx)(FileIcon, {});
-    }
-    return (0, jsx_runtime_1.jsx)(FileIcon, {});
-};
-/**
- * A component that displays an icon for a file type.
- *
- * @param children - The child elements to be rendered inside the FileIcon component.
- */
-const FileIcon = ({ children }) => {
-    return (0, jsx_runtime_1.jsx)("span", { className: 'text-4xl', children: children });
-};
 exports.default = Thumbnail;
 /**
  * A classic thumbnail component that can be used as a placeholder for file uploads.
- * The component displays a border and text to indicate that a file can be added.
- *
- * @returns A React component that displays a border and text to indicate that a file can be added.
  */
-const ClassicThumbnail = ({ className, onClick, }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { onClick: onClick, className: (0, utils_1.cn)('mt-1 flex h-32 w-full flex-col items-center  justify-center rounded-md border border-dashed p-4 hover:bg-gray-200 dark:hover:bg-gray-600', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex cursor-pointer flex-row items-center space-x-2 text-sm', children: [(0, jsx_runtime_1.jsx)("div", { className: 'rounded bg-blue-200 p-1 text-xs dark:text-gray-700 ', children: "Add Media " }), (0, jsx_runtime_1.jsx)("div", { className: 'text-skin-link underline', children: "Add from URL " })] }), (0, jsx_runtime_1.jsx)("div", { className: 'mt-2 text-xs text-gray-400', children: "Accepts images or videos " })] }));
-};
+const ClassicThumbnail = ({ className, onClick }) => ((0, jsx_runtime_1.jsx)("div", { onClick: onClick, className: (0, utils_1.cn)(Thumbnail_classnames_1.default.classicThumbnail, className), children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { vertical: true, gap: '2', align: 'center', inlineAlign: 'center', children: [(0, jsx_runtime_1.jsx)("div", { className: Thumbnail_classnames_1.default.addMediaContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Thumbnail_classnames_1.default.addMedia, children: "Add Media" }) }), (0, jsx_runtime_1.jsx)("div", { className: Thumbnail_classnames_1.default.addFromUrl, children: "Add from URL" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { color: 'subdued', variant: 'bodyXs', alignment: 'center', children: "accepts images or videos" })] }) }));
 exports.ClassicThumbnail = ClassicThumbnail;
+const DefaultThumbnail = ({ className, onClick }) => ((0, jsx_runtime_1.jsx)("div", { onClick: onClick, className: (0, utils_1.cn)(Thumbnail_classnames_1.default.classicThumbnail, className), style: { marginTop: '10px', marginLeft: '10px' }, children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, { vertical: true, gap: '2', align: 'center', inlineAlign: 'center', children: (0, jsx_runtime_1.jsx)("div", { className: Thumbnail_classnames_1.default.addMediaContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Thumbnail_classnames_1.default.addMedia, children: "Add Media" }) }) }) }));
+exports.DefaultThumbnail = DefaultThumbnail;

package/dist/src/components/Upload/components/Thumbnail/Thumbnail.classnames.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ThumbnailClassnames = {
+    "thumbnailContainer": "Thumbnail-thumbnailContainer",
+    "thumbnail": "Thumbnail-thumbnail",
+    "dragging": "Thumbnail-dragging",
+    "sizeSm": "Thumbnail-sizeSm",
+    "sizeNormal": "Thumbnail-sizeNormal",
+    "sizeM": "Thumbnail-sizeM",
+    "sizeLg": "Thumbnail-sizeLg",
+    "sizeXl": "Thumbnail-sizeXl",
+    "sizeNone": "Thumbnail-sizeNone",
+    "sizeFull": "Thumbnail-sizeFull",
+    "variantRectangle": "Thumbnail-variantRectangle",
+    "variantCircle": "Thumbnail-variantCircle",
+    "content": "Thumbnail-content",
+    "dragAndDropText": "Thumbnail-dragAndDropText",
+    "classicThumbnail": "Thumbnail-classicThumbnail",
+    "addMediaContainer": "Thumbnail-addMediaContainer",
+    "addMedia": "Thumbnail-addMedia",
+    "addFromUrl": "Thumbnail-addFromUrl",
+    "acceptText": "Thumbnail-acceptText"
+};
+exports.default = ThumbnailClassnames;

package/dist/src/components/Upload/components/Upload/UploadContainer.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UploadContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const Grid_1 = require("../../../Grid");
 const HorizontalStack_1 = require("../../../HorizontalStack");
 const Label_1 = require("../../../Label");
 const Text_1 = require("../../../Text");
@@ -79,13 +80,13 @@ const UploadContainer = ({ title, customThumbnail, attachmentKey, initialAttachm
                     removeAttachment: removeSelectedAttachment,
                     openModal: setUploadModalActive,
                     attachmentKey: attachmentKey,
-                }), (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: { xs: '4', md: '8' }, blockAlign: 'center', wrap: false, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { "aria-label": 'uploader grid', children: [((_a = selectedAttachments === null || selectedAttachments === void 0 ? void 0 : selectedAttachments[key]) === null || _a === void 0 ? void 0 : _a.length) && !customAttachmentsList
-                                    ? (_b = selectedAttachments === null || selectedAttachments === void 0 ? void 0 : selectedAttachments[key]) === null || _b === void 0 ? void 0 : _b.map((file, idx) => {
-                                        return ((0, jsx_runtime_1.jsx)(UploaderButtonFileList_1.default, { thumbnailSize: thumbnailSize, file: file, onRemove: () => {
-                                                removeSelectedAttachment(file, key);
-                                            }, openUploadModal: () => toggleUploadModalActive({ key: key }) }, idx));
-                                    })
-                                    : null, !(((_c = selectedAttachments === null || selectedAttachments === void 0 ? void 0 : selectedAttachments[key]) === null || _c === void 0 ? void 0 : _c.length) >= maxAttachments) &&
-                                    (thumbnailType ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: thumbnailType == 'classic' && ((0, jsx_runtime_1.jsx)(Thumbanail_1.ClassicThumbnail, { onClick: () => setUploadModalActive({ key: key }), className: thumbnailClassName })) })) : customThumbnail ? ((0, jsx_runtime_1.jsx)("div", { "aria-label": 'customThumbnail', className: thumbnailClassName, onClick: () => setUploadModalActive({ key: key }), children: customThumbnail })) : ((0, jsx_runtime_1.jsx)(Thumbanail_1.default, { thumbnailClassName: thumbnailClassName, onClick: () => setUploadModalActive({ key: key }), acceptFileTypes: allowedFileTypes, thumbnailSize: thumbnailSize })))] }) }), info && ((0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { gap: { xs: '2', md: '2' }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: 'headingSm', children: label }), (0, jsx_runtime_1.jsx)(Text_1.Text, { color: 'subdued', children: info })] }))] })] }));
+                }), (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: { xs: '4', md: '8' }, blockAlign: 'center', wrap: false, children: [(0, jsx_runtime_1.jsxs)(Grid_1.Grid, { columns: { xs: 3, sm: 3, md: 4, lg: 5, xl: 5 }, children: [((_a = selectedAttachments === null || selectedAttachments === void 0 ? void 0 : selectedAttachments[key]) === null || _a === void 0 ? void 0 : _a.length) && !customAttachmentsList
+                                ? (_b = selectedAttachments === null || selectedAttachments === void 0 ? void 0 : selectedAttachments[key]) === null || _b === void 0 ? void 0 : _b.map((file, idx) => {
+                                    return ((0, jsx_runtime_1.jsx)(UploaderButtonFileList_1.default, { thumbnailSize: thumbnailSize, file: file, onRemove: () => {
+                                            removeSelectedAttachment(file, key);
+                                        }, openUploadModal: () => toggleUploadModalActive({ key: key }) }, idx));
+                                })
+                                : null, !(((_c = selectedAttachments === null || selectedAttachments === void 0 ? void 0 : selectedAttachments[key]) === null || _c === void 0 ? void 0 : _c.length) >= maxAttachments) &&
+                                (thumbnailType ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: thumbnailType == 'classic' && ((0, jsx_runtime_1.jsx)(Thumbanail_1.ClassicThumbnail, { onClick: () => setUploadModalActive({ key: key }), className: thumbnailClassName })) })) : customThumbnail ? ((0, jsx_runtime_1.jsx)("div", { "aria-label": 'customThumbnail', className: thumbnailClassName, onClick: () => setUploadModalActive({ key: key }), children: customThumbnail })) : ((0, jsx_runtime_1.jsx)(Thumbanail_1.default, { thumbnailClassName: thumbnailClassName, onClick: () => setUploadModalActive({ key: key }), acceptFileTypes: allowedFileTypes, thumbnailSize: thumbnailSize })))] }), info && ((0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { gap: { xs: '2', md: '2' }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: 'headingSm', children: label }), (0, jsx_runtime_1.jsx)(Text_1.Text, { color: 'subdued', children: info })] }))] })] }));
 };
 exports.UploadContainer = UploadContainer;

package/dist/src/components/Upload/components/UploaderButton/UploaderButton.classnames.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const UploaderButtonClassnames = {
+    "uploader-button-file-list": "UploaderButton-uploader-button-file-list",
+    "rectangle": "UploaderButton-rectangle",
+    "circle": "UploaderButton-circle",
+    "action-buttons": "UploaderButton-action-buttons",
+    "file-upload": "UploaderButton-file-upload",
+    "thumb-sizes-sm": "UploaderButton-thumb-sizes-sm",
+    "thumb-sizes-normal": "UploaderButton-thumb-sizes-normal",
+    "thumb-sizes-normal-sm": "UploaderButton-thumb-sizes-normal-sm",
+    "thumb-sizes-m": "UploaderButton-thumb-sizes-m",
+    "thumb-sizes-lg": "UploaderButton-thumb-sizes-lg",
+    "thumb-sizes-xl": "UploaderButton-thumb-sizes-xl",
+    "thumb-sizes-none": "UploaderButton-thumb-sizes-none"
+};
+exports.default = UploaderButtonClassnames;

package/dist/src/components/Upload/components/UploaderButton/UploaderButtonFileList.js

@@ -1,12 +1,16 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @next/next/no-img-element */
 const utils_1 = require("../../../../utils");
-const Icon_1 = require("../../../Icon");
+const Button_1 = require("../../../Button");
 const Icons_1 = require("../../../Icons");
 const Image_1 = require("../../../Image");
 const FileViewer_1 = require("../FileViewer");
+const UploaderButton_classnames_1 = __importDefault(require("./UploaderButton.classnames"));
 /**
  * Renders a file list for an uploader button component
  *
@@ -14,28 +18,20 @@ const FileViewer_1 = require("../FileViewer");
  * @returns The rendered component
  */
 const UploaderButtonFileList = ({ file, onRemove, openUploadModal, thumbnailSize = 'normal', thumbnailVariant = 'square', }) => {
-    // let isId = fileIds.findIndex(({ id }) => id == file.id);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const thumbSizes = {
-        // sm: 'h-[250px] w-[250px] ',
-        // normal: 'h-[250px] w-[250px] ',
-        sm: 'h-16 w-[68px]',
-        // normal: 'h-[133px] w-[115px] sm:w-[133px]',
-        // m: 'h-[100px] w-[100px]',
-        // lg: 'h-[250px] w-[250px] ',
-        // xl: 'h-[250px] w-[350px]',
-        // none: 'w-full h-full',
-    };
     const thumbnailVariantClasses = {
-        rectangle: '!h-full !w-full',
+        rectangle: UploaderButton_classnames_1.default.rectangle,
         square: '',
-        circle: '!rounded-full',
+        circle: UploaderButton_classnames_1.default.circle,
+    };
+    const thumbnailSizeClasses = {
+        sm: UploaderButton_classnames_1.default['thumb-sizes-sm'],
+        normal: UploaderButton_classnames_1.default['thumb-sizes-normal'],
+        'normal-sm': UploaderButton_classnames_1.default['thumb-sizes-normal-sm'],
+        m: UploaderButton_classnames_1.default['thumb-sizes-m'],
+        lg: UploaderButton_classnames_1.default['thumb-sizes-lg'],
+        xl: UploaderButton_classnames_1.default['thumb-sizes-xl'],
+        none: UploaderButton_classnames_1.default['thumb-sizes-none'],
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('dw-full dw-full dmax-h-40 dmax-h-64 relative flex w-full cursor-pointer select-none flex-col items-center overflow-hidden rounded border text-center dark:border-gray-500', thumbnailVariantClasses[thumbnailVariant], 
-        //@ts-ignore
-        thumbSizes[thumbnailSize] || 'h-full'), children: [(0, jsx_runtime_1.jsxs)("div", { className: 'absolute top-0 right-0 z-10 flex cursor-pointer flex-col space-y-2 divide-y rounded-bl bg-white  focus:outline-none', children: [thumbnailSize !== 'sm' && ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: 'p-0.5 hover:bg-gray-200', onClick: openUploadModal, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaEdit, color: 'highlight' }) })), (0, jsx_runtime_1.jsx)("button", { type: 'button', className: 'p-0.5 hover:bg-gray-200', onClick: onRemove, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaDelete, color: 'critical' }) })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('file_upload relative flex items-center justify-center rounded-md ', 
-                //   ' border-[2px] border-dashed border-gray-600 p-4',
-                // thumbSizes[thumbnailSize] || 'h-full',
-                'h-full w-full', thumbnailVariantClasses[thumbnailVariant]), onClick: openUploadModal, children: thumbnailSize == 'sm' && (file === null || file === void 0 ? void 0 : file.type) == 'image' ? ((0, jsx_runtime_1.jsx)(Image_1.Image, { source: file === null || file === void 0 ? void 0 : file.src, alt: 'd' })) : ((0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { className: (0, utils_1.cn)(thumbnailVariantClasses[thumbnailVariant]), file: file, disabled: false, unAcceptedType: undefined })) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(UploaderButton_classnames_1.default['uploader-button-file-list'], thumbnailVariantClasses[thumbnailVariant], thumbnailSizeClasses[thumbnailSize] || UploaderButton_classnames_1.default['thumb-sizes-none']), children: [(0, jsx_runtime_1.jsxs)("div", { className: UploaderButton_classnames_1.default['action-buttons'], children: [thumbnailSize !== 'sm' && (0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, icon: Icons_1.MaEdit, onClick: openUploadModal }), (0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, destructive: true, icon: Icons_1.MaDelete, onClick: onRemove })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(UploaderButton_classnames_1.default['file-upload'], thumbnailVariantClasses[thumbnailVariant]), onClick: openUploadModal, children: thumbnailSize === 'sm' && (file === null || file === void 0 ? void 0 : file.type) === 'image' ? ((0, jsx_runtime_1.jsx)(Image_1.Image, { source: file === null || file === void 0 ? void 0 : file.src, alt: 'Thumbnail' })) : ((0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { className: thumbnailVariantClasses[thumbnailVariant], file: file, disabled: false, unAcceptedType: undefined })) })] }));
 };
 exports.default = UploaderButtonFileList;

package/dist/src/components/Upload/components/UploaderInput/FileUploadInput.classnames.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const FileUploadInputClassnames = {
+    "fileUploadInput__container": "FileUploadInput-fileUploadInput__container",
+    "fileUploadInput__dropzone": "FileUploadInput-fileUploadInput__dropzone",
+    "fileUploadInput__dropzone--dragging": "FileUploadInput-fileUploadInput__dropzone--dragging",
+    "fileUploadInput__input": "FileUploadInput-fileUploadInput__input",
+    "pendingUploadFileList__item": "FileUploadInput-pendingUploadFileList__item",
+    "pendingUploadFileList__item--dark": "FileUploadInput-pendingUploadFileList__item--dark",
+    "pendingUploadFileList__deleteButton": "FileUploadInput-pendingUploadFileList__deleteButton",
+    "pendingUploadFileList__preview": "FileUploadInput-pendingUploadFileList__preview",
+    "pendingUploadFileList__preview--dark": "FileUploadInput-pendingUploadFileList__preview--dark",
+    "pendingUploadFileList__fileInfo": "FileUploadInput-pendingUploadFileList__fileInfo",
+    "pendingUploadFileList__fileName": "FileUploadInput-pendingUploadFileList__fileName",
+    "pendingUploadFileList__fileSize": "FileUploadInput-pendingUploadFileList__fileSize",
+    "pendingUploadFileList__progressBar": "FileUploadInput-pendingUploadFileList__progressBar",
+    "pendingUploadFileList__progressBar--dark": "FileUploadInput-pendingUploadFileList__progressBar--dark",
+    "pendingUploadFileList__progress": "FileUploadInput-pendingUploadFileList__progress",
+    "pendingUploadFileList__progress--error": "FileUploadInput-pendingUploadFileList__progress--error",
+    "pendingUploadFileList__progress--complete": "FileUploadInput-pendingUploadFileList__progress--complete",
+    "pendingUploadFileList__progress--loading": "FileUploadInput-pendingUploadFileList__progress--loading"
+};
+exports.default = FileUploadInputClassnames;