pixelize-design-library 2.4.1 → 2.4.2-beta.1

package/dist/Components/FileUpload/FileUpload.js

@@ -39,17 +39,17 @@ const react_2 = require("@chakra-ui/react");
 const react_dropzone_1 = require("react-dropzone");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const constants_1 = require("./constants");
 const Modal_1 = __importStar(require("../Modal/Modal"));
 const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = 5, maxFiles = undefined, progress = {}, }) => {
-    var _a, _b, _c, _d;
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { colors, radii } = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
     const [previewUrl, setPreviewUrl] = react_1.default.useState(null);
     const [previewTitle, setPreviewTitle] = react_1.default.useState(null);
     const [errors, setErrors] = react_1.default.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 bg = colors.gray[50];
+    const border = colors.boxborder[500];
     const mappedAccept = acceptTypes.reduce((acc, ext) => {
         const mime = constants_1.mimeMap[ext];
         if (mime) {
@@ -88,27 +88,21 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
             setErrors(messages);
         },
     });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)("input", { ...getInputProps() }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Upload, boxSize: 6 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "medium", children: "Drag and drop files here" }), (0, jsx_runtime_1.jsxs)(react_2.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 ", (0, constants_1.toMB)(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }), errors.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: errors.map((err, idx) => {
-                            var _a;
-                            return ((0, jsx_runtime_1.jsx)(react_2.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 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 2, children: uploadedFiles.map((file, index) => {
-                                    var _a, _b, _c, _d, _e, _f, _g;
-                                    return ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)("img", { src: URL.createObjectURL(file), alt: file.name, style: {
-                                                                            width: "100%",
-                                                                            height: "100%",
-                                                                            objectFit: "cover",
-                                                                            borderRadius: "0.25rem",
-                                                                        } }), (0, jsx_runtime_1.jsx)(react_2.Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[100] }) })] })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (_e = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _e === void 0 ? void 0 : _e[500], boxSize: 8 })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500], children: [(0, constants_1.toMB)(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && ((0, jsx_runtime_1.jsx)(react_2.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 && ((0, jsx_runtime_1.jsx)(react_2.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));
-                                }) })] }))] }), (0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { ...getRootProps(), border: "2px dashed", borderColor: border, borderRadius: "md", p: 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: colors.gray[100] }, position: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...getInputProps() }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Upload, boxSize: 6 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "medium", children: "Drag and drop files here" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", (0, constants_1.toMB)(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }), errors.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: errors.map((err, idx) => ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 2, children: uploadedFiles.map((file, index) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_2.ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
+                                                                ".hover-icon": {
+                                                                    opacity: 1,
+                                                                    bg: colors.secondary.opacity[16],
+                                                                },
+                                                            }, onClick: () => {
+                                                                setPreviewUrl(URL.createObjectURL(file));
+                                                                setPreviewTitle(file.name);
+                                                                onOpen();
+                                                            }, children: [(0, jsx_runtime_1.jsx)("img", { src: URL.createObjectURL(file), alt: file.name, style: {
+                                                                        width: "100%",
+                                                                        height: "100%",
+                                                                        objectFit: "cover",
+                                                                        borderRadius: radii.base,
+                                                                    } }), (0, jsx_runtime_1.jsx)(react_2.Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { color: colors.background[100] }) })] })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (0, accentText_1.accentTextOnCanvas)(colors.blue, colors.background[50]), boxSize: 8 })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: [(0, constants_1.toMB)(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && ((0, jsx_runtime_1.jsx)(react_2.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: "md" }))] }, index))) })] }))] }), (0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: () => {
                     onClose();
                     setPreviewUrl(null);
                     setPreviewTitle(null);

package/dist/Components/FileUpload/FileUploadProps.d.ts

@@ -9,4 +9,3 @@ export type FileUploaderProps = {
     maxFiles?: number;
     progress?: Record<string, number>;
 };
-//# sourceMappingURL=FileUploadProps.d.ts.map

package/dist/Components/FileUpload/constants.d.ts

@@ -1,4 +1,3 @@
 import { MimeMap } from "./FileUploadProps";
 export declare const mimeMap: MimeMap;
 export declare const toMB: (size: number) => string;
-//# sourceMappingURL=constants.d.ts.map

package/dist/Components/FileUploader/FileUploader.d.ts

@@ -2,4 +2,3 @@ import React from "react";
 import { FileUploaderProps } from "./FileUploaderProps";
 declare const FileUploader: React.FC<FileUploaderProps>;
 export default FileUploader;
-//# sourceMappingURL=FileUploader.d.ts.map

package/dist/Components/FileUploader/FileUploader.js

@@ -8,10 +8,9 @@ const Toaster_1 = require("../Toaster/Toaster");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptTypes = ["jpeg", "jpg", "png"], }) => {
-    var _a, _b;
     const { showToast } = (0, Toaster_1.useToaster)();
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const accentColor = (0, accentText_1.accentTextOnCanvas)(colors.blue, (_b = (_a = colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff");
+    const accentColor = (0, accentText_1.accentTextOnCanvas)(colors.blue, colors.backgroundColor.main);
     const [uploadedFiles, setUploadedFiles] = (0, react_1.useState)([]);
     const [, setIsDragOver] = (0, react_1.useState)(false);
     // const [error, setError] = useState<string | null>(null);
@@ -72,9 +71,9 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
     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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "500px", mx: "auto", p: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: "gray.600", mb: 4, children: ["Files Uploaded:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: "medium", color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: "medium", children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { border: "1px dashed", borderColor: "gray.300", borderRadius: "md", p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "500px", mx: "auto", p: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: colors.textMuted, mb: 4, children: ["Files Uploaded:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: "medium", color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: "medium", children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { border: "1px dashed", borderColor: colors.boxborder[500], borderRadius: "md", p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
                                 var _a;
-                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: "gray.200", borderRadius: "md", pl: 1, bg: "gray.50", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "28px", borderRadius: "sm", bg: "gray.200", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: "gray.600", children: (_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })), (0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "0", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: "gray.600", children: ["(", formatFileSize(file.size), ")"] })] })] }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 1, children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Remove", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Remove", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
-                            }) }) })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), (0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontWeight: "medium", fontSize: "md", children: ["Drag and drop the files here, or", (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: "gray.500", children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
+                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: colors.boxborder[500], borderRadius: "md", pl: 1, bg: colors.backgroundColor.secondary, children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "28px", borderRadius: "sm", bg: colors.gray[200], display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: colors.textMuted, children: (_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })), (0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "0", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: ["(", formatFileSize(file.size), ")"] })] })] }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 1, children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Remove", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Remove", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
+                            }) }) })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), (0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontWeight: "medium", fontSize: "md", children: ["Drag and drop the files here, or", (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
 };
 exports.default = FileUploader;

package/dist/Components/FileUploader/FileUploaderProps.d.ts

@@ -11,4 +11,3 @@ export type FileUploaderProps = {
     acceptTypes?: string[];
     onFilesChange?: (files: UploadedFile[]) => void;
 };
-//# sourceMappingURL=FileUploaderProps.d.ts.map

package/dist/Components/FilterSidebar/FilterSidebar.d.ts

@@ -41,4 +41,3 @@ export type FilterSidebarProps = {
 };
 declare const FilterSidebar: React.FC<FilterSidebarProps>;
 export default FilterSidebar;
-//# sourceMappingURL=FilterSidebar.d.ts.map

package/dist/Components/FilterSidebar/FilterSidebar.js

@@ -18,11 +18,10 @@ const FilterSidebar = ({ sidebarOptions, selected, onChange, maxVisible = 10, wi
 panelPadding = 3, clearAllButton = true, onClearAllHandler,
 // sliderMode = "native",
  }) => {
-    var _a, _b;
     const theme = (0, useCustomTheme_1.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 = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff");
+    const isDark = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main);
     const hoverBg = (0, react_1.useMemo)(() => (0, filterHoverStyle_1.getFilterHoverBg)(theme.colors, isDark), [theme.colors, isDark]);
     const [openPrice, setOpenPrice] = (0, react_1.useState)({});
     // Determine if the component is controlled (prop provided) or uncontrolled (internal state)
@@ -84,34 +83,32 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
             return next;
         });
     };
-    const items = sidebarOptions.map((section) => {
-        var _a, _b;
-        return ({
-            header: ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", align: "center", w: "full", py: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: section.label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_2.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;
-                    })() ? ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "red", variant: "solid", fontSize: "xs", cursor: "pointer", onClick: (e) => {
-                            e.stopPropagation();
-                            clearFilter(section.id);
-                        }, borderRadius: "full", px: 2, children: "Clear" })) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { size: 10 })] })),
-            content: ((0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", px: 3, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+    const items = sidebarOptions.map((section) => ({
+        header: ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", align: "center", w: "full", py: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: section.label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "bold", fontSize: "md", color: theme.colors.text[500], 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;
+                })() ? ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "red", variant: "solid", fontSize: "xs", cursor: "pointer", onClick: (e) => {
+                        e.stopPropagation();
+                        clearFilter(section.id);
+                    }, borderRadius: "full", px: 2, children: "Clear" })) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { size: 10 })] })),
+        content: ((0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, py: 0, children: section.range ? ((() => {
+                var _a, _b;
+                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 = theme.colors.red[300];
+                const secondaryColor = theme.colors.red[600];
+                const primaryGlowColor = theme.colors.primary.opacity[32];
+                const thumbShadow = theme.shadows.md;
+                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", px: 3, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                       .custom-range-slider::-webkit-slider-thumb {
                         pointer-events: auto;
                         width: 24px;
@@ -126,138 +123,137 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                         border: none;
                         cursor: pointer;
                       }
-                    ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: "gray.200", borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.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}` }), (0, jsx_runtime_1.jsx)(react_2.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 }), (0, jsx_runtime_1.jsx)(react_2.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 }), (0, jsx_runtime_1.jsxs)(react_2.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}` : ""] }), (0, jsx_runtime_1.jsxs)(react_2.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) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.gray[300] }, `tick-${p}`))), (0, jsx_runtime_1.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,
-                                        } }), (0, jsx_runtime_1.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,
-                                        } })] }), (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [(0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.gray[800], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: (0, accentText_1.onFilled)(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.gray[800], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.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;
+                    ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: theme.colors.gray[200], borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.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}` }), (0, jsx_runtime_1.jsx)(react_2.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 }), (0, jsx_runtime_1.jsx)(react_2.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 }), (0, jsx_runtime_1.jsxs)(react_2.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: "md", fontSize: "10px", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMin, range.unit ? ` ${range.unit}` : ""] }), (0, jsx_runtime_1.jsxs)(react_2.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: "md", fontSize: "10px", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMax, range.unit ? ` ${range.unit}` : ""] }), [0, 25, 50, 75, 100].map((p) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.gray[300] }, `tick-${p}`))), (0, jsx_runtime_1.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,
+                                    } }), (0, jsx_runtime_1.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,
+                                    } })] }), (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [(0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMax === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: (0, accentText_1.onFilled)(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `max-${v}`))) }) }) })] })] })] }));
-                })()) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [section.id === "rating" ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, w: "full", children: [4, 3, 2, 1].map((r) => ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_2.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 = (0, accentText_1.accentTextOnCanvas)(theme.colors.orange, isRowSelected ? theme.colors.red[50] : theme.colors.background[50]);
-                                                return Array.from({ length: 5 }, (_, i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`)));
-                                            })() }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[700], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && ((0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, w: "full", textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.gray[500], children: "No Data Found" }) }));
-                            }
-                            return ((section.type === "radio") || section.radio) ? ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, w: "full", children: filteredOptions.map((opt) => ((0, jsx_runtime_1.jsx)(react_2.Radio, { value: opt.id, size: "sm", colorScheme: "red", children: (0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "full", _hover: { bg: hoverBg, borderRadius: "md" }, p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { 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" }), (0, jsx_runtime_1.jsx)(react_2.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" && ((0, jsx_runtime_1.jsx)(react_2.Badge, { fontSize: "xs", colorScheme: "gray", borderRadius: "full", px: 2, children: opt.count }))] }, opt.id));
-                            }));
-                        })(), (section.options && section.options.length > maxVisible) && ((0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100], children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.gray[800], children: "Filters" }), activeCount > 0 && clearAllButton && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), (0, jsx_runtime_1.jsx)(Accordion_1.default, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
+                                                            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: (0, accentText_1.onFilled)(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMax === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: (0, accentText_1.onFilled)(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `max-${v}`))) }) }) })] })] })] }));
+            })()) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [section.id === "rating" ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, w: "full", children: [4, 3, 2, 1].map((r) => ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_2.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 = (0, accentText_1.accentTextOnCanvas)(theme.colors.orange, isRowSelected ? theme.colors.red[50] : theme.colors.background[50]);
+                                            return Array.from({ length: 5 }, (_, i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`)));
+                                        })() }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && ((0, jsx_runtime_1.jsx)(react_2.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: theme.colors.boxborder[800], _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 ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, w: "full", textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.gray[500], children: "No Data Found" }) }));
+                        }
+                        return ((section.type === "radio") || section.radio) ? ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, w: "full", children: filteredOptions.map((opt) => ((0, jsx_runtime_1.jsx)(react_2.Radio, { value: opt.id, size: "sm", colorScheme: "red", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[500], children: opt.label }) }, opt.id))) }) })) : (filteredOptions.map((opt) => {
+                            const selectedForSection = internalSelected[section.id];
+                            const selectedIds = Array.isArray(selectedForSection)
+                                ? selectedForSection
+                                : [];
+                            return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "full", _hover: { bg: hoverBg, borderRadius: "md" }, p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { 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" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[500], cursor: "pointer", onClick: () => {
+                                                    const isChecked = selectedIds.includes(opt.id);
+                                                    toggleOption(section.id, opt.id, !isChecked);
+                                                }, children: opt.label })] }), typeof opt.count === "number" && ((0, jsx_runtime_1.jsx)(react_2.Badge, { fontSize: "xs", colorScheme: "gray", borderRadius: "full", px: 2, children: opt.count }))] }, opt.id));
+                        }));
+                    })(), (section.options && section.options.length > maxVisible) && ((0, jsx_runtime_1.jsx)(react_2.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: theme.radii.lg,
+                    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: theme.radii.lg,
+                    overflow: "visible",
+                },
+        },
+    }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100], children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.text[500], children: "Filters" }), activeCount > 0 && clearAllButton && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), (0, jsx_runtime_1.jsx)(Accordion_1.default, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
 };
 exports.default = FilterSidebar;

package/dist/Components/FilterSidebar/filterHoverStyle.d.ts

@@ -9,4 +9,3 @@ import type { PaletteProps } from "../../Theme/tokens/types";
  * here, unlike the Table row hover fix.
  */
 export declare const getFilterHoverBg: (colors: PaletteProps, isDark: boolean) => string;
-//# sourceMappingURL=filterHoverStyle.d.ts.map

package/dist/Components/Form/FormWrapper.d.ts

@@ -5,4 +5,3 @@ declare const FormWrapper: ({ icon, text, children, }: {
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export default FormWrapper;
-//# sourceMappingURL=FormWrapper.d.ts.map