pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

package/dist/esm/Components/FilePreview/FilePreview.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Flex, IconButton, Image, Modal, ModalBody, ModalCloseButton, ModalContent, ModalOverlay, Text, useDisclosure, } from "@chakra-ui/react";
+import { motion } from "framer-motion";
+import { Download, Eye, FileQuestion, Minus, Plus, RotateCw, } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import ToolTip from "../ToolTip/ToolTip";
+const MotionContent = motion(ModalContent);
+const inferKind = (url, fileName) => {
+    const src = (fileName || url).split("?")[0].toLowerCase();
+    if (/\.(png|jpe?g|gif|webp|svg|bmp|avif)$/.test(src))
+        return "image";
+    if (/\.pdf$/.test(src))
+        return "pdf";
+    if (/\.(mp4|webm|ogg|mov)$/.test(src))
+        return "video";
+    return "other";
+};
+const downloadFile = async (fileUrl, fileName) => {
+    try {
+        const res = await fetch(fileUrl);
+        const blob = await res.blob();
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = fileName || "file";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+    }
+    catch {
+        window.open(fileUrl, "_blank", "noopener,noreferrer");
+    }
+};
+export const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownload = false, size = "xl", }) => {
+    var _a, _b, _c, _d, _e;
+    const theme = useCustomTheme();
+    const [zoom, setZoom] = useState(1);
+    const [rotation, setRotation] = useState(0);
+    const kind = fileType || inferKind(fileUrl, fileName);
+    const reset = () => {
+        setZoom(1);
+        setRotation(0);
+    };
+    const handleClose = () => {
+        reset();
+        onClose();
+    };
+    const renderBody = () => {
+        var _a, _b, _c, _d;
+        if (kind === "image") {
+            return (_jsx(Flex, { justify: "center", align: "center", minH: "200px", overflow: "hidden", children: _jsx(Image, { src: fileUrl, alt: fileName || "preview", maxW: "100%", transform: `scale(${zoom}) rotate(${rotation}deg)`, transition: "transform 0.2s ease", objectFit: "contain" }) }));
+        }
+        if (kind === "pdf") {
+            return (_jsx(Box, { as: "embed", src: fileUrl, type: "application/pdf", width: "100%", height: "70vh", borderRadius: "8px" }));
+        }
+        if (kind === "video") {
+            return (_jsx(Box, { as: "video", src: fileUrl, controls: true, width: "100%", borderRadius: "8px" }));
+        }
+        return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [_jsx(FileQuestion, { size: 48, color: (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[400]) !== null && _b !== void 0 ? _b : "#A0AEC0" }), _jsx(Text, { color: (_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[600]) !== null && _d !== void 0 ? _d : "#4A5568", fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && (_jsxs(Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "8px", bg: theme.colors.primary[500], color: theme.colors.white, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [_jsx(Download, { size: 16 }), " Download file"] }))] }));
+    };
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [_jsx(ModalOverlay, { bg: "blackAlpha.600", backdropFilter: "blur(4px)" }), _jsxs(MotionContent
+            // Chakra's default Modal drives its bg off `--modal-bg`, which flips to
+            // `colors.gray.700` under `_dark` — a light grey in our derived dark palettes.
+            , { 
+                // Chakra's default Modal drives its bg off `--modal-bg`, which flips to
+                // `colors.gray.700` under `_dark` — a light grey in our derived dark palettes.
+                bg: theme.colors.background[50], borderRadius: "16px", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "#EDF2F7", children: [_jsx(ToolTip, { label: fileName || "File", placement: "bottom", children: _jsx(Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), _jsxs(Flex, { align: "center", gap: 1, children: [kind === "image" && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Zoom out", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: _jsx(Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), _jsx(ToolTip, { label: "Zoom in", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: _jsx(Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), _jsx(ToolTip, { label: "Rotate", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: _jsx(RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && (_jsx(ToolTip, { label: "Download", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: (_e = (_d = (_c = theme.colors.semantic) === null || _c === void 0 ? void 0 : _c.success) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "#16A34A", icon: _jsx(Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), _jsx(ModalCloseButton, { position: "static" })] })] }), _jsx(ModalBody, { p: 5, children: renderBody() })] })] }));
+};
+/** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
+export const FilePreviewTrigger = ({ fileUrl, fileName, fileType, thumbWidth = "100px", thumbHeight = "60px", hideDownload = false, }) => {
+    var _a, _b;
+    const theme = useCustomTheme();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const kind = fileType || inferKind(fileUrl, fileName);
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", role: "group", maxW: thumbWidth, minW: "40px", minH: thumbHeight, borderRadius: "8px", overflow: "hidden", cursor: "pointer", onClick: onOpen, children: [kind === "image" ? (_jsx(Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "8px" })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: thumbHeight, bg: (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "#EDF2F7", borderRadius: "8px", children: _jsx(Eye, { size: 18 }) })), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", bg: "blackAlpha.500", color: "white", opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: _jsx(Eye, { size: 18 }) })] }), _jsx(FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
+};
+export default FilePreview;

package/dist/esm/Components/FilePreview/FilePreviewProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/FileUpload/FileUpload.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import { Box, Text, VStack, Icon, List, ListItem, ListIcon, CloseButton, HStack, Progress, useDisclosure, Image, } from "@chakra-ui/react";
+import { useDropzone } from "react-dropzone";
+import { Upload, FileText, Eye } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { mimeMap, toMB } from "./constants";
+import Modal, { ModalBody, ModalHeader } from "../Modal/Modal";
+const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = 5, maxFiles = undefined, progress = {}, }) => {
+    var _a, _b, _c, _d;
+    const { colors } = useCustomTheme();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const [previewUrl, setPreviewUrl] = React.useState(null);
+    const [previewTitle, setPreviewTitle] = React.useState(null);
+    const [errors, setErrors] = React.useState([]);
+    const bg = (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[50];
+    const border = (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[300];
+    const mappedAccept = acceptTypes.reduce((acc, ext) => {
+        const mime = mimeMap[ext];
+        if (mime) {
+            acc[mime] = []; // File dropzone format
+        }
+        return acc;
+    }, {});
+    const onDrop = useCallback((acceptedFiles) => {
+        setErrors([]);
+        const totalFiles = uploadedFiles.length + acceptedFiles.length;
+        if (maxFiles && totalFiles > maxFiles) {
+            setErrors([
+                `Maximum ${maxFiles} files allowed. You already uploaded ${uploadedFiles.length}.`,
+            ]);
+            return;
+        }
+        onFilesUploaded(acceptedFiles);
+    }, [onFilesUploaded, uploadedFiles, maxFiles]);
+    const { getRootProps, getInputProps } = useDropzone({
+        onDrop,
+        accept: mappedAccept,
+        maxSize: maxSizeKB * 1024,
+        maxFiles,
+        onDropRejected: (rejectedFiles) => {
+            const messages = rejectedFiles.flatMap((rejected) => rejected.errors.map((err) => {
+                if (err.code === "file-too-large") {
+                    return `File "${rejected.file.name}" is too large. Max size is ${toMB(maxSizeKB)}.`;
+                }
+                else if (err.code === "file-invalid-type") {
+                    return `File "${rejected.file.name}" is not an accepted file type.`;
+                }
+                else {
+                    return `File "${rejected.file.name}" was rejected: ${err.message}`;
+                }
+            }));
+            setErrors(messages);
+        },
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsxs(Box, { ...getRootProps(), border: "2px dashed", borderColor: border, borderRadius: "md", p: 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100] }, position: "relative", children: [_jsx("input", { ...getInputProps() }), _jsxs(VStack, { spacing: 2, children: [_jsx(Icon, { as: Upload, boxSize: 6 }), _jsx(Text, { fontWeight: "medium", children: "Drag and drop files here" }), _jsxs(Text, { fontSize: "sm", color: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[500], children: [acceptTypes.join(", "), " up to ", toMB(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }), errors.length > 0 && (_jsx(Box, { children: errors.map((err, idx) => {
+                            var _a;
+                            return (_jsx(Text, { fontSize: "sm", color: (_a = colors === null || colors === void 0 ? void 0 : colors.red) === null || _a === void 0 ? void 0 : _a[600], children: err }, idx));
+                        }) })), uploadedFiles.length > 0 && (_jsxs(Box, { children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), _jsx(List, { spacing: 2, children: uploadedFiles.map((file, index) => {
+                                    var _a, _b, _c, _d, _e, _f, _g;
+                                    return (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [_jsxs(ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? (_jsxs(Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
+                                                                    ".hover-icon": {
+                                                                        opacity: 1,
+                                                                        bg: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _b === void 0 ? void 0 : _b.opacity) === null || _c === void 0 ? void 0 : _c[16],
+                                                                    },
+                                                                }, onClick: () => {
+                                                                    setPreviewUrl(URL.createObjectURL(file));
+                                                                    setPreviewTitle(file.name);
+                                                                    onOpen();
+                                                                }, children: [_jsx("img", { src: URL.createObjectURL(file), alt: file.name, style: {
+                                                                            width: "100%",
+                                                                            height: "100%",
+                                                                            objectFit: "cover",
+                                                                            borderRadius: "0.25rem",
+                                                                        } }), _jsx(Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: _jsx(Eye, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[100] }) })] })) : (_jsx(ListIcon, { as: FileText, color: (_e = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _e === void 0 ? void 0 : _e[500], boxSize: 8 })), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontSize: "sm", noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500], children: [toMB(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && (_jsx(CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[600] }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && (_jsx(Progress, { value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: 5 }))] }, index));
+                                }) })] }))] }), _jsxs(Modal, { isOpen: isOpen, onClose: () => {
+                    onClose();
+                    setPreviewUrl(null);
+                    setPreviewTitle(null);
+                }, size: "xl", isCentered: true, children: [_jsx(ModalHeader, { children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 16, textTransform: "uppercase", children: previewTitle }) }), _jsx(ModalBody, { children: previewUrl && (_jsx(Image, { src: previewUrl, alt: "Preview", w: "100%", h: "auto", objectFit: "contain" })) })] })] }));
+};
+export default FileUpload;

package/dist/esm/Components/FileUpload/FileUploadProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/FileUpload/constants.js

@@ -0,0 +1,24 @@
+export const mimeMap = {
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.png': 'image/png',
+    '.gif': 'image/gif',
+    '.webp': 'image/webp',
+    '.svg': 'image/svg+xml',
+    '.pdf': 'application/pdf',
+    '.doc': 'application/msword',
+    '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    '.xls': 'application/vnd.ms-excel',
+    '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    '.ppt': 'application/vnd.ms-powerpoint',
+    '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    '.txt': 'text/plain',
+    '.mp4': 'video/mp4',
+    '.mov': 'video/quicktime',
+    '.mp3': 'audio/mpeg',
+    '.wav': 'audio/wav',
+    '.zip': 'application/zip',
+    '.rar': 'application/vnd.rar',
+    '.7z': 'application/x-7z-compressed',
+};
+export const toMB = (size) => `${(size / 1024).toFixed(2)} MB`;

package/dist/esm/Components/FileUploader/FileUploader.js

@@ -0,0 +1,78 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { Box, Text, Grid, Flex, HStack, Image, IconButton, Tooltip, } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import { useToaster } from "../Toaster/Toaster";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText";
+const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptTypes = ["jpeg", "jpg", "png"], }) => {
+    var _a, _b;
+    const { showToast } = useToaster();
+    const { colors } = useCustomTheme();
+    const accentColor = accentTextOnCanvas(colors.blue, (_b = (_a = colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff");
+    const [uploadedFiles, setUploadedFiles] = useState([]);
+    const [, setIsDragOver] = useState(false);
+    // const [error, setError] = useState<string | null>(null);
+    const fileInputRef = useRef(null);
+    const totalSize = uploadedFiles.reduce((acc, f) => acc + f.size, 0);
+    const maxTotalBytes = maxTotalSize * 1024 * 1024;
+    const formatFileSize = (bytes) => {
+        if (bytes === 0)
+            return "0 KB";
+        const k = 1024;
+        const sizes = ["Bytes", "KB", "MB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;
+    };
+    const handleFiles = (files) => {
+        // setError(null);
+        const newFiles = Array.from(files).map((file) => ({
+            id: Math.random().toString(36).substring(2),
+            name: file.name,
+            size: file.size,
+            previewUrl: file.type.startsWith("image/") ? URL.createObjectURL(file) : "",
+        }));
+        const combinedFiles = [...uploadedFiles, ...newFiles].slice(0, maxFiles);
+        const totalSizeBytes = combinedFiles.reduce((acc, f) => acc + f.size, 0);
+        if (totalSizeBytes > maxTotalBytes) {
+            showToast({
+                title: `Total file size exceeds ${maxTotalSize} MB limit.`,
+                duration: 3000,
+                status: "error",
+            });
+            return;
+        }
+        setUploadedFiles(combinedFiles);
+        onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(combinedFiles);
+    };
+    const handleFileInput = (e) => {
+        if (e.target.files) {
+            handleFiles(e.target.files);
+            e.target.value = ""; // fix: reopen file dialog for same files
+        }
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        setIsDragOver(false);
+        if (e.dataTransfer.files)
+            handleFiles(e.dataTransfer.files);
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        setIsDragOver(true);
+    };
+    const handleDragLeave = () => setIsDragOver(false);
+    const removeFile = (id) => {
+        const filtered = uploadedFiles.filter((f) => f.id !== id);
+        setUploadedFiles(filtered);
+        onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(filtered);
+    };
+    const handleBrowseClick = () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
+    // ✅ Convert ["png","pdf","zip"] → ".png,.pdf,.zip" for input accept
+    const acceptString = acceptTypes.map((ext) => `.${ext}`).join(",");
+    return (_jsxs(Box, { maxW: "500px", mx: "auto", p: 6, children: [_jsxs(Text, { fontSize: "sm", color: "gray.600", mb: 4, children: ["Files Uploaded:", " ", _jsxs(Text, { as: "span", fontWeight: "medium", color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", _jsxs(Text, { as: "span", fontWeight: "medium", children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), _jsxs(Box, { border: "1px dashed", borderColor: "gray.300", borderRadius: "md", p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && (_jsx(Box, { children: _jsx(Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
+                                var _a, _b, _c, _d, _e, _f, _g;
+                                return (_jsxs(Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: "gray.200", borderRadius: "md", pl: 1, bg: colors.backgroundColor.secondary, children: [_jsxs(HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? (_jsx(Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : (_jsx(Box, { boxSize: "28px", borderRadius: "sm", bg: (_b = (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : "#e5e7eb", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: (_d = (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[600]) !== null && _d !== void 0 ? _d : "#4A5568", children: (_e = file.name.split(".").pop()) === null || _e === void 0 ? void 0 : _e.toUpperCase() })), _jsxs(Box, { minW: "0", children: [_jsx(Text, { fontSize: "sm", fontWeight: "medium", noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : "#4A5568", children: ["(", formatFileSize(file.size), ")"] })] })] }), _jsx(HStack, { spacing: 1, children: _jsx(Tooltip, { label: "Remove", children: _jsx(IconButton, { "aria-label": "Remove", icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
+                            }) }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), _jsxs(Box, { p: uploadedFiles.length ? 0 : 5, mb: 2, textAlign: uploadedFiles.length ? "left" : "center", pt: uploadedFiles.length ? 5 : 5, transition: "all 0.2s", onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, cursor: "pointer", onClick: handleBrowseClick, children: [_jsx(Box, { children: _jsxs(Text, { fontWeight: "medium", fontSize: "md", children: ["Drag and drop the files here, or", _jsx(Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), _jsxs(Text, { fontSize: "xs", color: "gray.500", children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
+};
+export default FileUploader;

package/dist/esm/Components/FileUploader/FileUploaderProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/FilterSidebar/FilterSidebar.js

@@ -0,0 +1,258 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Box, Flex, Text, VStack, HStack, Badge, Input, Radio, RadioGroup, Button, SimpleGrid, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal } from "@chakra-ui/react";
+import { Star, X, Check, ChevronDownIcon } from "lucide-react";
+import Accordion from "../Accordion/Accordion";
+import CheckBox from "../Checkbox/Checkbox";
+import ToolTip from "../ToolTip/ToolTip";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { accentTextOnCanvas, onFilled, isDarkCanvas } from "../../Theme/tokens/builders/accentText";
+import { getFilterHoverBg } from "./filterHoverStyle";
+const FilterSidebar = ({ sidebarOptions, selected, onChange, maxVisible = 10, width = 280, variant = "minimal", containerPadding, containerHeight, 
+// headerPadding = 2,
+panelPadding = 3, clearAllButton = true, onClearAllHandler,
+// sliderMode = "native",
+ }) => {
+    var _a, _b;
+    const theme = useCustomTheme();
+    // `gray[50]` (this file's hover fill throughout) is a pale light-mode tint that collapses to
+    // ~1.08:1 against the dark-mode canvas — see `filterHoverStyle.ts` for the fix + numbers.
+    const isDark = isDarkCanvas((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff");
+    const hoverBg = useMemo(() => getFilterHoverBg(theme.colors, isDark), [theme.colors, isDark]);
+    const [openPrice, setOpenPrice] = useState({});
+    // Determine if the component is controlled (prop provided) or uncontrolled (internal state)
+    const isControlled = selected !== undefined;
+    // Local state for uncontrolled mode
+    const [localSelected, setLocalSelected] = useState(() => ({ ...(selected || {}) }));
+    // Derived state: use prop if controlled, otherwise local state
+    const internalSelected = (selected !== undefined ? selected : localSelected);
+    // Wrapper for state updates to handle both modes
+    const setInternalSelected = (updater) => {
+        const next = typeof updater === 'function' ? (updater)(internalSelected) : updater;
+        // In the existing code, the updater function often handles calling onChange.
+        // However, for safety in uncontrolled mode, we update local state.
+        if (!isControlled) {
+            setLocalSelected(next);
+        }
+    };
+    const [expanded, setExpanded] = useState(() => {
+        const initial = {};
+        sidebarOptions.forEach((s) => (initial[s.id] = !!s.initiallyExpanded));
+        return initial;
+    });
+    const [searchTerms, setSearchTerms] = useState({});
+    const activeCount = useMemo(() => {
+        return Object.values(internalSelected).reduce((acc, v) => acc + (Array.isArray(v) ? v.length : 0), 0);
+    }, [internalSelected]);
+    const toggleOption = (sectionId, optionId, checked) => {
+        setInternalSelected((prev) => {
+            const raw = prev[sectionId];
+            const current = new Set(Array.isArray(raw) ? raw : []);
+            if (checked)
+                current.add(optionId);
+            else
+                current.delete(optionId);
+            const next = { ...prev, [sectionId]: Array.from(current) };
+            onChange === null || onChange === void 0 ? void 0 : onChange(next);
+            return next;
+        });
+    };
+    const clearFilter = (sectionId, optionId) => {
+        setInternalSelected((prev) => {
+            const next = { ...prev };
+            if (optionId) {
+                const list = (next[sectionId] || []);
+                next[sectionId] = list.filter((id) => id !== optionId);
+            }
+            else {
+                delete next[sectionId];
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(next);
+            return next;
+        });
+    };
+    const clearAll = () => {
+        onClearAllHandler === null || onClearAllHandler === void 0 ? void 0 : onClearAllHandler();
+        setInternalSelected(() => {
+            const next = {};
+            onChange === null || onChange === void 0 ? void 0 : onChange(next);
+            return next;
+        });
+    };
+    const items = sidebarOptions.map((section) => {
+        var _a, _b;
+        return ({
+            header: (_jsxs(Flex, { justify: "space-between", align: "center", w: "full", py: 1, children: [_jsx(ToolTip, { label: section.label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Text, { fontWeight: "bold", fontSize: "md", color: theme.colors.gray[700], textAlign: "left", isTruncated: true, flex: "1", minW: 0, children: section.label }) }), (() => {
+                        const sel = internalSelected[section.id];
+                        const hasValue = Array.isArray(sel) ? sel.length > 0 : !!sel;
+                        return hasValue;
+                    })() ? (_jsx(Badge, { colorScheme: "red", variant: "solid", fontSize: "xs", cursor: "pointer", onClick: (e) => {
+                            e.stopPropagation();
+                            clearFilter(section.id);
+                        }, borderRadius: "full", px: 2, children: "Clear" })) : _jsx(ChevronDownIcon, { size: 10 })] })),
+            content: (_jsx(VStack, { align: "start", spacing: 1, py: 0, children: section.range ? ((() => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+                    const range = section.range;
+                    const step = range.step || 1;
+                    const rangeVal = internalSelected[section.id];
+                    const rangeArr = Array.isArray(rangeVal) ? rangeVal : [];
+                    const currentMin = (_a = rangeArr[0]) !== null && _a !== void 0 ? _a : range.min;
+                    const currentMax = (_b = rangeArr[1]) !== null && _b !== void 0 ? _b : range.max;
+                    const values = range.values || Array.from({ length: Math.floor((range.max - range.min) / (step || 1)) + 1 }, (_, i) => range.min + i * (step || 1));
+                    // Calculate percentages
+                    const minPercent = ((currentMin - range.min) / (range.max - range.min)) * 100;
+                    const maxPercent = ((currentMax - range.min) / (range.max - range.min)) * 100;
+                    const primaryColor = (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.red) === null || _d === void 0 ? void 0 : _d[300];
+                    const secondaryColor = (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.red) === null || _f === void 0 ? void 0 : _f[600];
+                    const primaryGlowColor = (_o = (_k = (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h.opacity) === null || _j === void 0 ? void 0 : _j[32]) !== null && _k !== void 0 ? _k : (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.primary) === null || _m === void 0 ? void 0 : _m[500]) !== null && _o !== void 0 ? _o : theme.colors.gray[500];
+                    const thumbShadow = theme.shadows.md;
+                    return (_jsxs(Box, { w: "full", px: 3, children: [_jsx("style", { children: `
+                      .custom-range-slider::-webkit-slider-thumb {
+                        pointer-events: auto;
+                        width: 24px;
+                        height: 24px;
+                        -webkit-appearance: none;
+                        cursor: pointer;
+                      }
+                      .custom-range-slider::-moz-range-thumb {
+                        pointer-events: auto;
+                        width: 24px;
+                        height: 24px;
+                        border: none;
+                        cursor: pointer;
+                      }
+                    ` }), _jsxs(Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [_jsx(Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: theme.colors.gray[200], borderRadius: "full" }), _jsx(Box, { position: "absolute", left: `${minPercent}%`, width: `${maxPercent - minPercent}%`, height: "6px", style: { background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})` }, borderRadius: "full", boxShadow: `0 0 8px ${primaryGlowColor}` }), _jsx(Box, { position: "absolute", left: `${minPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: primaryColor, boxShadow: thumbShadow, zIndex: 2 }), _jsx(Box, { position: "absolute", left: `${maxPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: secondaryColor, boxShadow: thumbShadow, zIndex: 2 }), _jsxs(Box, { position: "absolute", left: `${minPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "6px", fontSize: "10px", color: theme.colors.gray[700], boxShadow: "sm", zIndex: 3, children: [currentMin, range.unit ? ` ${range.unit}` : ""] }), _jsxs(Box, { position: "absolute", left: `${maxPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "6px", fontSize: "10px", color: theme.colors.gray[700], boxShadow: "sm", zIndex: 3, children: [currentMax, range.unit ? ` ${range.unit}` : ""] }), [0, 25, 50, 75, 100].map((p) => (_jsx(Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.gray[300] }, `tick-${p}`))), _jsx("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: (e) => {
+                                            const min = Math.min(Number(e.target.value), currentMax - (step || 1));
+                                            const nextVal = [min, currentMax];
+                                            setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
+                                        }, style: {
+                                            position: 'absolute',
+                                            width: '100%',
+                                            height: '100%',
+                                            opacity: 0,
+                                            appearance: 'none',
+                                            pointerEvents: 'none', // Allow clicks to pass through track
+                                            zIndex: 3,
+                                            margin: 0,
+                                        } }), _jsx("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMax, className: "custom-range-slider", onChange: (e) => {
+                                            const max = Math.max(Number(e.target.value), currentMin + (step || 1));
+                                            const nextVal = [currentMin, max];
+                                            setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
+                                        }, style: {
+                                            position: 'absolute',
+                                            width: '100%',
+                                            height: '100%',
+                                            opacity: 0,
+                                            appearance: 'none',
+                                            pointerEvents: 'none', // Allow clicks to pass through track
+                                            zIndex: 3,
+                                            margin: 0,
+                                        } })] }), _jsxs(SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [_jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.gray[50], borderColor: theme.colors.gray[300], cursor: "pointer", onClick: () => setOpenPrice({ id: section.id, target: "min" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "12px", color: theme.colors.gray[800], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.red[50] : theme.colors.background[50], borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.red[400] : "transparent", _hover: { bg: hoverBg }, onClick: () => {
+                                                                    const min = v;
+                                                                    const max = currentMax;
+                                                                    const nextVal = [Math.min(min, max), Math.max(min, max)];
+                                                                    setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
+                                                                    setOpenPrice({});
+                                                                }, children: [_jsxs(Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? (_jsx(Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: onFilled(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), _jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.gray[50], borderColor: theme.colors.gray[300], cursor: "pointer", onClick: () => setOpenPrice({ id: section.id, target: "max" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "12px", color: theme.colors.gray[800], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(PopoverContent, { width: "6rem", p: 0, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMax === v ? theme.colors.red[50] : theme.colors.background[50], borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.red[400] : "transparent", _hover: { bg: hoverBg }, onClick: () => {
+                                                                const max = v;
+                                                                const min = currentMin;
+                                                                const nextVal = [Math.min(min, max), Math.max(min, max)];
+                                                                setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
+                                                                setOpenPrice({});
+                                                            }, children: [_jsxs(Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMax === v ? (_jsx(Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: onFilled(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `max-${v}`))) }) }) })] })] })] }));
+                })()) : (_jsxs(_Fragment, { children: [section.id === "rating" ? (_jsx(VStack, { align: "start", spacing: 1, w: "full", children: [4, 3, 2, 1].map((r) => (_jsx(Flex, { align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", bg: String(internalSelected[section.id] || "") === String(r) ? theme.colors.red[50] : "transparent", border: String(internalSelected[section.id] || "") === String(r) ? `1px solid ${theme.colors.red[200]}` : "none", _hover: { bg: hoverBg }, onClick: () => {
+                                    setInternalSelected((prev) => {
+                                        const next = { ...prev, [section.id]: String(r) };
+                                        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+                                        return next;
+                                    });
+                                }, children: _jsxs(HStack, { spacing: 2, align: "center", children: [_jsx(HStack, { spacing: 1, children: (() => {
+                                                // orange[500] on background[50] ~2.2:1, fails the 3:1 icon bar — walk the scale like
+                                                // Notification's clock icon. Canvas mirrors this row's own bg ternary (red[50] when selected).
+                                                const isRowSelected = String(internalSelected[section.id] || "") === String(r);
+                                                const starColor = accentTextOnCanvas(theme.colors.orange, isRowSelected ? theme.colors.red[50] : theme.colors.background[50]);
+                                                return Array.from({ length: 5 }, (_, i) => (_jsx(Box, { children: _jsx(Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`)));
+                                            })() }), _jsx(Text, { fontSize: "sm", color: theme.colors.gray[700], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && (_jsx(Input, { size: "xs", h: "26px", fontSize: "xs", placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.gray[50], border: "1px solid", 
+                            // boxborder[800], not raw gray[200]: WCAG 1.4.11 needs >=3.0 for a control
+                            // boundary against any named surface up to `muted` (lightest); gray[200] fails
+                            // there in dark mode.
+                            borderColor: (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[800]) !== null && _b !== void 0 ? _b : theme.colors.gray[200], _focus: { borderColor: theme.colors.red[400], boxShadow: "none" }, value: searchTerms[section.id] || "", onChange: (e) => {
+                                const v = e.target.value;
+                                setSearchTerms((prev) => ({ ...prev, [section.id]: v }));
+                                if (v)
+                                    setExpanded((prev) => ({ ...prev, [section.id]: true }));
+                            } })), section.id !== "rating" && (() => {
+                            const filteredOptions = (expanded[section.id] ? (section.options || []) : (section.options || []).slice(0, maxVisible))
+                                .filter((opt) => !section.searchable || !(searchTerms[section.id]) || opt.label.toLowerCase().includes((searchTerms[section.id] || "").toLowerCase()));
+                            if (filteredOptions.length === 0 && searchTerms[section.id]) {
+                                return (_jsx(Box, { p: 2, w: "full", textAlign: "center", children: _jsx(Text, { fontSize: "xs", color: theme.colors.gray[500], children: "No Data Found" }) }));
+                            }
+                            return ((section.type === "radio") || section.radio) ? (_jsx(RadioGroup, { w: "full", value: internalSelected[section.id] || "", onChange: (val) => {
+                                    setInternalSelected((prev) => {
+                                        const next = { ...prev, [section.id]: val };
+                                        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+                                        return next;
+                                    });
+                                }, children: _jsx(VStack, { align: "start", spacing: 1, w: "full", children: filteredOptions.map((opt) => (_jsx(Radio, { value: opt.id, size: "sm", colorScheme: "red", children: _jsx(Text, { fontSize: "xs", color: theme.colors.gray[700], children: opt.label }) }, opt.id))) }) })) : (filteredOptions.map((opt) => {
+                                const selectedForSection = internalSelected[section.id];
+                                const selectedIds = Array.isArray(selectedForSection)
+                                    ? selectedForSection
+                                    : [];
+                                return (_jsxs(Flex, { align: "center", justify: "space-between", w: "full", _hover: { bg: hoverBg, borderRadius: "md" }, p: 0, children: [_jsxs(Flex, { align: "center", gap: 1, children: [_jsx(CheckBox, { isChecked: selectedIds.includes(opt.id), onChange: (e) => {
+                                                        toggleOption(section.id, opt.id, e.target.checked);
+                                                    }, size: "sm", iconSize: "0.5rem", sx: {
+                                                        '.chakra-checkbox__control': {
+                                                            width: '12px',
+                                                            height: '12px',
+                                                        },
+                                                        marginLeft: "2px",
+                                                    }, color: "red" }), _jsx(Text, { fontSize: "xs", color: theme.colors.gray[700], cursor: "pointer", onClick: () => {
+                                                        const isChecked = selectedIds.includes(opt.id);
+                                                        toggleOption(section.id, opt.id, !isChecked);
+                                                    }, children: opt.label })] }), typeof opt.count === "number" && (_jsx(Badge, { fontSize: "xs", colorScheme: "gray", borderRadius: "full", px: 2, children: opt.count }))] }, opt.id));
+                            }));
+                        })(), (section.options && section.options.length > maxVisible) && (_jsx(Text, { fontSize: "sm", fontWeight: "medium", color: theme.colors.blue[600], cursor: "pointer", _hover: { textDecoration: "underline" }, onClick: () => setExpanded((prev) => ({ ...prev, [section.id]: !prev[section.id] })), children: expanded[section.id] ? "Show less" : `+ ${(section.options.length - maxVisible)} more` }))] })) })),
+            itemProps: {
+                borderTop: "none",
+                borderBottom: `1px solid ${theme.colors.gray[100]}`,
+                _last: { borderBottom: "none" }
+            },
+            buttonProps: {
+                _hover: { bg: hoverBg }
+            },
+            panelProps: {},
+            customStyles: {
+                buttonStyle: variant === "minimal"
+                    ? {
+                        justifyContent: "space-between",
+                        padding: 0,
+                        background: "transparent",
+                    }
+                    : {
+                        justifyContent: "space-between",
+                        padding: 0,
+                        background: theme.colors.gray[50],
+                        borderRadius: 8,
+                        border: `1px solid ${theme.colors.gray[200]}`,
+                        marginBottom: 6,
+                    },
+                // Reasserts the same hover fill via the `sx` path (belt-and-suspenders alongside
+                // `buttonProps._hover` above) so the header hover doesn't depend on a single merge path.
+                hoverbuttonStyle: { background: hoverBg },
+                panelStyle: variant === "minimal"
+                    ? {
+                        padding: "10px 0 12px 0",
+                        overflow: "visible",
+                    }
+                    : {
+                        padding: panelPadding,
+                        background: theme.colors.background[50],
+                        borderRadius: 8,
+                        overflow: "visible",
+                    },
+            },
+        });
+    });
+    return (_jsxs(Box, { w: width, bg: variant === "minimal" ? theme.colors.background[50] : theme.colors.gray[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? `1px solid ${theme.colors.gray[200]}` : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible", children: [_jsxs(Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100], children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.gray[800], children: "Filters" }), activeCount > 0 && clearAllButton && (_jsx(_Fragment, { children: _jsx(Button, { size: "xs", variant: "outline", leftIcon: _jsx(X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), _jsx(Accordion, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
+};
+export default FilterSidebar;

package/dist/esm/Components/FilterSidebar/filterHoverStyle.js

@@ -0,0 +1,10 @@
+/**
+ * FilterSidebar's hover fill for option rows, popover list items, and the accordion trigger.
+ * `gray[50]` (a pale near-white tint in light mode) sits within ~1 lightness point of the
+ * dark-mode canvas once the whole scale flips (~1.08:1 contrast) — invisible, the QA-reported
+ * "checkbox hover invisible" bug. `gray[300]` clears the resting canvas (~2.3:1, a clear visible
+ * cue) while staying dark enough that the existing `gray[700]`/`gray[800]` row text (tuned for a
+ * near-black canvas) still reads at/above AA (~4.9:1+) on top of it — no text-color flip needed
+ * here, unlike the Table row hover fix.
+ */
+export const getFilterHoverBg = (colors, isDark) => isDark ? colors.gray[300] : colors.gray[50];

package/dist/esm/Components/Form/FormWrapper.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Icon } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+const FormWrapper = ({ icon, text, children, }) => {
+    var _a, _b, _c, _d, _e;
+    const { colors } = useCustomTheme();
+    return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && _jsx(Icon, { as: icon, size: "1rem", color: (_a = colors === null || colors === void 0 ? void 0 : colors.header) === null || _a === void 0 ? void 0 : _a[500] }), text && (_jsx(Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: (_b = colors === null || colors === void 0 ? void 0 : colors.header) === null || _b === void 0 ? void 0 : _b[500], children: text }))] }), _jsx(Box, { borderRadius: "0.25rem", bg: (_c = colors === null || colors === void 0 ? void 0 : colors.background) === null || _c === void 0 ? void 0 : _c[50], border: `0.075rem solid ${(_d = colors === null || colors === void 0 ? void 0 : colors.border) === null || _d === void 0 ? void 0 : _d[500]}`, boxShadow: `0 0.063rem 0.125rem 0 ${(_e = colors === null || colors === void 0 ? void 0 : colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary}`, p: "1.5rem", children: children })] }));
+};
+export default FormWrapper;