pixelize-design-library 2.3.7 → 2.3.8

package/dist/Components/FilterSidebar/FilterSidebar.js

@@ -1,109 +1,65 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
-var Accordion_1 = __importDefault(require("../Accordion/Accordion"));
-var Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var FilterSidebar = function (_a) {
-    var sidebarOptions = _a.sidebarOptions, selected = _a.selected, onChange = _a.onChange, _b = _a.maxVisible, maxVisible = _b === void 0 ? 10 : _b, _c = _a.width, width = _c === void 0 ? 280 : _c, _d = _a.variant, variant = _d === void 0 ? "minimal" : _d, containerPadding = _a.containerPadding, containerHeight = _a.containerHeight, 
-    // headerPadding = 2,
-    _e = _a.panelPadding, 
-    // headerPadding = 2,
-    panelPadding = _e === void 0 ? 3 : _e, _f = _a.clearAllButton, clearAllButton = _f === void 0 ? true : _f, onClearAllHandler = _a.onClearAllHandler;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _g = (0, react_1.useState)({}), openPrice = _g[0], setOpenPrice = _g[1];
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Accordion_1 = __importDefault(require("../Accordion/Accordion"));
+const Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const FilterSidebar = ({ sidebarOptions, selected, onChange, maxVisible = 10, width = 280, variant = "minimal", containerPadding, containerHeight, 
+// headerPadding = 2,
+panelPadding = 3, clearAllButton = true, onClearAllHandler,
+// sliderMode = "native",
+ }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const [openPrice, setOpenPrice] = (0, react_1.useState)({});
     // Determine if the component is controlled (prop provided) or uncontrolled (internal state)
-    var isControlled = selected !== undefined;
+    const isControlled = selected !== undefined;
     // Local state for uncontrolled mode
-    var _h = (0, react_1.useState)(function () { return (__assign({}, (selected || {}))); }), localSelected = _h[0], setLocalSelected = _h[1];
+    const [localSelected, setLocalSelected] = (0, react_1.useState)(() => ({ ...(selected || {}) }));
     // Derived state: use prop if controlled, otherwise local state
-    var internalSelected = (selected !== undefined ? selected : localSelected);
+    const internalSelected = (selected !== undefined ? selected : localSelected);
     // Wrapper for state updates to handle both modes
-    var setInternalSelected = function (updater) {
-        var next = typeof updater === 'function' ? updater(internalSelected) : updater;
+    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);
         }
     };
-    var _j = (0, react_1.useState)(function () {
-        var initial = {};
-        sidebarOptions.forEach(function (s) { return (initial[s.id] = !!s.initiallyExpanded); });
+    const [expanded, setExpanded] = (0, react_1.useState)(() => {
+        const initial = {};
+        sidebarOptions.forEach((s) => (initial[s.id] = !!s.initiallyExpanded));
         return initial;
-    }), expanded = _j[0], setExpanded = _j[1];
-    var _k = (0, react_1.useState)({}), searchTerms = _k[0], setSearchTerms = _k[1];
-    var activeCount = (0, react_1.useMemo)(function () {
-        return Object.values(internalSelected).reduce(function (acc, v) { return acc + (Array.isArray(v) ? v.length : 0); }, 0);
+    });
+    const [searchTerms, setSearchTerms] = (0, react_1.useState)({});
+    const activeCount = (0, react_1.useMemo)(() => {
+        return Object.values(internalSelected).reduce((acc, v) => acc + (Array.isArray(v) ? v.length : 0), 0);
     }, [internalSelected]);
-    var toggleOption = function (sectionId, optionId, checked) {
-        setInternalSelected(function (prev) {
-            var _a;
-            var current = new Set(prev[sectionId] || []);
+    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);
-            var next = __assign(__assign({}, prev), (_a = {}, _a[sectionId] = Array.from(current), _a));
+            const next = { ...prev, [sectionId]: Array.from(current) };
             onChange === null || onChange === void 0 ? void 0 : onChange(next);
             return next;
         });
     };
-    var clearFilter = function (sectionId, optionId) {
-        setInternalSelected(function (prev) {
-            var next = __assign({}, prev);
+    const clearFilter = (sectionId, optionId) => {
+        setInternalSelected((prev) => {
+            const next = { ...prev };
             if (optionId) {
-                var list = (next[sectionId] || []);
-                next[sectionId] = list.filter(function (id) { return id !== optionId; });
+                const list = (next[sectionId] || []);
+                next[sectionId] = list.filter((id) => id !== optionId);
             }
             else {
                 delete next[sectionId];
@@ -112,211 +68,138 @@ var FilterSidebar = function (_a) {
             return next;
         });
     };
-    var clearAll = function () {
+    const clearAll = () => {
         onClearAllHandler === null || onClearAllHandler === void 0 ? void 0 : onClearAllHandler();
-        setInternalSelected(function () {
-            var next = {};
+        setInternalSelected(() => {
+            const next = {};
             onChange === null || onChange === void 0 ? void 0 : onChange(next);
             return next;
         });
     };
-    var items = sidebarOptions.map(function (section) { return ({
-        header: (react_1.default.createElement(react_2.Flex, { justify: "space-between", align: "center", w: "full", py: 1 },
-            react_1.default.createElement(react_2.Tooltip, { label: section.label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
-                react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: theme.colors.gray[700], textAlign: "left", isTruncated: true, flex: "1", minW: 0 }, section.label)),
-            (function () {
-                var sel = internalSelected[section.id];
-                var hasValue = Array.isArray(sel) ? sel.length > 0 : !!sel;
-                return hasValue;
-            })() ? (react_1.default.createElement(react_2.Badge, { colorScheme: "red", variant: "solid", fontSize: "xs", cursor: "pointer", onClick: function (e) {
-                    e.stopPropagation();
-                    clearFilter(section.id);
-                }, borderRadius: "full", px: 2 }, "Clear")) : react_1.default.createElement(lucide_react_1.ChevronDownIcon, { size: 10 }))),
-        content: (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, py: 0 }, section.range ? ((function () {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-            var range = section.range;
-            var step = range.step || 1;
-            var currentMin = (_b = (_a = internalSelected[section.id]) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : range.min;
-            var currentMax = (_d = (_c = internalSelected[section.id]) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : range.max;
-            var values = range.values || Array.from({ length: Math.floor((range.max - range.min) / (step || 1)) + 1 }, function (_, i) { return range.min + i * (step || 1); });
-            // Calculate percentages
-            var minPercent = ((currentMin - range.min) / (range.max - range.min)) * 100;
-            var maxPercent = ((currentMax - range.min) / (range.max - range.min)) * 100;
-            var primaryColor = (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.red) === null || _f === void 0 ? void 0 : _f[300];
-            var secondaryColor = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.red) === null || _h === void 0 ? void 0 : _h[600];
-            var primaryGlowColor = (_q = (_m = (_l = (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.primary) === null || _k === void 0 ? void 0 : _k.opacity) === null || _l === void 0 ? void 0 : _l[32]) !== null && _m !== void 0 ? _m : (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.primary) === null || _p === void 0 ? void 0 : _p[500]) !== null && _q !== void 0 ? _q : theme.colors.gray[500];
-            var thumbShadow = theme.shadows.md;
-            return (react_1.default.createElement(react_2.Box, { w: "full", px: 3 },
-                react_1.default.createElement("style", null, "\n                      .custom-range-slider::-webkit-slider-thumb {\n                        pointer-events: auto;\n                        width: 24px;\n                        height: 24px;\n                        -webkit-appearance: none;\n                        cursor: pointer;\n                      }\n                      .custom-range-slider::-moz-range-thumb {\n                        pointer-events: auto;\n                        width: 24px;\n                        height: 24px;\n                        border: none;\n                        cursor: pointer;\n                      }\n                    "),
-                react_1.default.createElement(react_2.Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center" },
-                    react_1.default.createElement(react_2.Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: "gray.200", borderRadius: "full" }),
-                    react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(minPercent, "%"), width: "".concat(maxPercent - minPercent, "%"), height: "6px", style: { background: "linear-gradient(to right, ".concat(primaryColor, ", ").concat(secondaryColor, ")") }, borderRadius: "full", boxShadow: "0 0 8px ".concat(primaryGlowColor) }),
-                    react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(minPercent, "%"), transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: "white", border: "3px solid", borderColor: primaryColor, boxShadow: thumbShadow, zIndex: 2 }),
-                    react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(maxPercent, "%"), transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: "white", border: "3px solid", borderColor: secondaryColor, boxShadow: thumbShadow, zIndex: 2 }),
-                    react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(minPercent, "%"), top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.white, border: "1px solid ".concat(theme.colors.gray[200]), borderRadius: "6px", fontSize: "10px", color: theme.colors.gray[700], boxShadow: "sm", zIndex: 3 },
-                        currentMin,
-                        range.unit ? " ".concat(range.unit) : ""),
-                    react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(maxPercent, "%"), top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.white, border: "1px solid ".concat(theme.colors.gray[200]), borderRadius: "6px", fontSize: "10px", color: theme.colors.gray[700], boxShadow: "sm", zIndex: 3 },
-                        currentMax,
-                        range.unit ? " ".concat(range.unit) : ""),
-                    [0, 25, 50, 75, 100].map(function (p) { return (react_1.default.createElement(react_2.Box, { key: "tick-".concat(p), position: "absolute", left: "".concat(p, "%"), bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.gray[300] })); }),
-                    react_1.default.createElement("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: function (e) {
-                            var min = Math.min(Number(e.target.value), currentMax - (step || 1));
-                            var nextVal = [min, currentMax];
-                            setInternalSelected(function (prev) {
-                                var _a;
-                                var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = nextVal, _a));
-                                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,
-                        } }),
-                    react_1.default.createElement("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMax, className: "custom-range-slider", onChange: function (e) {
-                            var max = Math.max(Number(e.target.value), currentMin + (step || 1));
-                            var nextVal = [currentMin, max];
-                            setInternalSelected(function (prev) {
-                                var _a;
-                                var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = nextVal, _a));
-                                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,
-                        } })),
-                react_1.default.createElement(react_2.SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full" },
-                    react_1.default.createElement(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: function () { return setOpenPrice({}); }, placement: "bottom-start", closeOnBlur: true },
-                        react_1.default.createElement(react_2.PopoverTrigger, null,
-                            react_1.default.createElement(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: function () { return setOpenPrice({ id: section.id, target: "min" }); }, gap: 2, overflow: "hidden" },
-                                react_1.default.createElement(react_2.Box, { ml: "auto" },
-                                    react_1.default.createElement(react_2.Text, { fontSize: "12px", color: theme.colors.gray[800], whiteSpace: "nowrap" },
-                                        currentMin,
-                                        range.unit ? " ".concat(range.unit) : "")))),
-                        react_1.default.createElement(react_2.Portal, null,
-                            react_1.default.createElement(react_2.PopoverContent, { width: "6rem", p: 0, zIndex: 1600 },
-                                react_1.default.createElement(react_2.PopoverBody, { p: 0 },
-                                    react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto" }, values.map(function (v) { return (react_1.default.createElement(react_2.Flex, { key: "min-".concat(v), px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.red[50] : theme.colors.white, borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.red[400] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () {
-                                            var min = v;
-                                            var max = currentMax;
-                                            var nextVal = [Math.min(min, max), Math.max(min, max)];
-                                            setInternalSelected(function (prev) {
-                                                var _a;
-                                                var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = nextVal, _a));
-                                                onChange === null || onChange === void 0 ? void 0 : onChange(next);
-                                                return next;
-                                            });
-                                            setOpenPrice({});
-                                        } },
-                                        react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800] },
-                                            v,
-                                            range.unit ? " ".concat(range.unit) : ""),
-                                        currentMin === v ? (react_1.default.createElement(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center" },
-                                            react_1.default.createElement(lucide_react_1.Check, { size: 9, color: theme.colors.red[600] }))) : null)); })))))),
-                    react_1.default.createElement(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: function () { return setOpenPrice({}); }, placement: "bottom-start", closeOnBlur: true },
-                        react_1.default.createElement(react_2.PopoverTrigger, null,
-                            react_1.default.createElement(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: function () { return setOpenPrice({ id: section.id, target: "max" }); }, gap: 2, overflow: "hidden" },
-                                react_1.default.createElement(react_2.Box, { ml: "auto" },
-                                    react_1.default.createElement(react_2.Text, { fontSize: "12px", color: theme.colors.gray[800], whiteSpace: "nowrap" },
-                                        currentMax,
-                                        range.unit ? " ".concat(range.unit) : "")))),
-                        react_1.default.createElement(react_2.PopoverContent, { width: "6rem", p: 0 },
-                            react_1.default.createElement(react_2.PopoverBody, { p: 0 },
-                                react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto" }, values.map(function (v) { return (react_1.default.createElement(react_2.Flex, { key: "max-".concat(v), px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMax === v ? theme.colors.red[50] : theme.colors.white, borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.red[400] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () {
-                                        var max = v;
-                                        var min = currentMin;
-                                        var nextVal = [Math.min(min, max), Math.max(min, max)];
-                                        setInternalSelected(function (prev) {
-                                            var _a;
-                                            var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = nextVal, _a));
-                                            onChange === null || onChange === void 0 ? void 0 : onChange(next);
-                                            return next;
-                                        });
-                                        setOpenPrice({});
-                                    } },
-                                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800] },
-                                        v,
-                                        range.unit ? " ".concat(range.unit) : ""),
-                                    currentMax === v ? (react_1.default.createElement(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center" },
-                                        react_1.default.createElement(lucide_react_1.Check, { size: 9, color: theme.colors.red[600] }))) : null)); }))))))));
-        })()) : (react_1.default.createElement(react_1.default.Fragment, null,
-            section.id === "rating" ? (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, w: "full" }, [4, 3, 2, 1].map(function (r) { return (react_1.default.createElement(react_2.Flex, { key: "rating-".concat(r), 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 ".concat(theme.colors.red[200]) : "none", _hover: { bg: theme.colors.gray[50] }, onClick: function () {
-                    setInternalSelected(function (prev) {
-                        var _a;
-                        var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = String(r), _a));
-                        onChange === null || onChange === void 0 ? void 0 : onChange(next);
-                        return next;
-                    });
-                } },
-                react_1.default.createElement(react_2.HStack, { spacing: 2, align: "center" },
-                    react_1.default.createElement(react_2.HStack, { spacing: 1 }, Array.from({ length: 5 }, function (_, i) { return (react_1.default.createElement(react_2.Box, { key: "star-".concat(r, "-").concat(i) },
-                        react_1.default.createElement(lucide_react_1.Star, { size: 16, color: theme.colors.orange[500], fill: i < r ? theme.colors.orange[500] : "none" }))); })),
-                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[700] }, "& Up")))); }))) : null,
-            section.searchable && (react_1.default.createElement(react_2.Input, { size: "xs", h: "26px", fontSize: "xs", placeholder: "Search ".concat(section.label, "..."), borderRadius: "md", bg: theme.colors.gray[50], border: "1px solid", borderColor: theme.colors.gray[200], _focus: { borderColor: theme.colors.red[400], boxShadow: "none" }, value: searchTerms[section.id] || "", onChange: function (e) {
-                    var v = e.target.value;
-                    setSearchTerms(function (prev) {
-                        var _a;
-                        return (__assign(__assign({}, prev), (_a = {}, _a[section.id] = v, _a)));
-                    });
-                    if (v)
-                        setExpanded(function (prev) {
-                            var _a;
-                            return (__assign(__assign({}, prev), (_a = {}, _a[section.id] = true, _a)));
-                        });
-                } })),
-            section.id !== "rating" && (function () {
-                var filteredOptions = (expanded[section.id] ? (section.options || []) : (section.options || []).slice(0, maxVisible))
-                    .filter(function (opt) { return !section.searchable || !(searchTerms[section.id]) || opt.label.toLowerCase().includes((searchTerms[section.id] || "").toLowerCase()); });
-                if (filteredOptions.length === 0 && searchTerms[section.id]) {
-                    return (react_1.default.createElement(react_2.Box, { p: 2, w: "full", textAlign: "center" },
-                        react_1.default.createElement(react_2.Text, { fontSize: "xs", color: theme.colors.gray[500] }, "No Data Found")));
-                }
-                return ((section.type === "radio") || section.radio) ? (react_1.default.createElement(react_2.RadioGroup, { w: "full", value: internalSelected[section.id] || "", onChange: function (val) {
-                        setInternalSelected(function (prev) {
-                            var _a;
-                            var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = val, _a));
-                            onChange === null || onChange === void 0 ? void 0 : onChange(next);
-                            return next;
-                        });
-                    } },
-                    react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, w: "full" }, filteredOptions.map(function (opt) { return (react_1.default.createElement(react_2.Radio, { key: opt.id, value: opt.id, size: "sm", colorScheme: "red" },
-                        react_1.default.createElement(react_2.Text, { fontSize: "xs", color: theme.colors.gray[700] }, opt.label))); })))) : (filteredOptions.map(function (opt) { return (react_1.default.createElement(react_2.Flex, { key: opt.id, align: "center", justify: "space-between", w: "full", _hover: { bg: theme.colors.gray[50], borderRadius: "md" }, p: 0 },
-                    react_1.default.createElement(react_2.Flex, { align: "center", gap: 1 },
-                        react_1.default.createElement(Checkbox_1.default, { isChecked: Array.isArray(internalSelected[section.id]) && (internalSelected[section.id] || []).includes(opt.id), onChange: function (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" }),
-                        react_1.default.createElement(react_2.Text, { fontSize: "xs", color: theme.colors.gray[700], cursor: "pointer", onClick: function () {
-                                var isChecked = Array.isArray(internalSelected[section.id]) && (internalSelected[section.id] || []).includes(opt.id);
-                                toggleOption(section.id, opt.id, !isChecked);
-                            } }, opt.label)),
-                    typeof opt.count === "number" && (react_1.default.createElement(react_2.Badge, { fontSize: "xs", colorScheme: "gray", borderRadius: "full", px: 2 }, opt.count)))); }));
-            })(),
-            (section.options && section.options.length > maxVisible) && (react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "medium", color: theme.colors.blue[600], cursor: "pointer", _hover: { textDecoration: "underline" }, onClick: function () { return setExpanded(function (prev) {
-                    var _a;
-                    return (__assign(__assign({}, prev), (_a = {}, _a[section.id] = !prev[section.id], _a)));
-                }); } }, expanded[section.id] ? "Show less" : "+ ".concat((section.options.length - maxVisible), " more"))))))),
+    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)(react_2.Tooltip, { label: section.label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, 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: `
+                      .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;
+                      }
+                    ` }), (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: "white", 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: "white", 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.white, 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.white, 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, 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.white, borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.red[400] : "transparent", _hover: { bg: theme.colors.gray[50] }, 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: theme.colors.red[600] }) })) : 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, 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.white, borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.red[400] : "transparent", _hover: { bg: theme.colors.gray[50] }, 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: theme.colors.red[600] }) })) : 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: theme.colors.gray[50] }, 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: 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: theme.colors.orange[500], fill: i < r ? theme.colors.orange[500] : "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", borderColor: 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: theme.colors.gray[50], 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 ".concat(theme.colors.gray[100]),
+            borderBottom: `1px solid ${theme.colors.gray[100]}`,
             _last: { borderBottom: "none" }
         },
         buttonProps: {
@@ -335,7 +218,7 @@ var FilterSidebar = function (_a) {
                     padding: 0,
                     background: theme.colors.gray[50],
                     borderRadius: 8,
-                    border: "1px solid ".concat(theme.colors.gray[200]),
+                    border: `1px solid ${theme.colors.gray[200]}`,
                     marginBottom: 6,
                 },
             panelStyle: variant === "minimal"
@@ -350,12 +233,7 @@ var FilterSidebar = function (_a) {
                     overflow: "visible",
                 },
         },
-    }); });
-    return (react_1.default.createElement(react_2.Box, { w: width, bg: variant === "minimal" ? theme.colors.white : 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 ".concat(theme.colors.gray[200]) : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible" },
-        react_1.default.createElement(react_2.Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100] },
-            react_1.default.createElement(react_2.Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.gray[800] }, "Filters"),
-            activeCount > 0 && clearAllButton && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(react_2.Button, { size: "xs", variant: "outline", leftIcon: react_1.default.createElement(lucide_react_1.X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red" }, "Clear All")))),
-        react_1.default.createElement(Accordion_1.default, { allowMultiple: true, defaultIndex: sidebarOptions.map(function (_, i) { return i; }), items: items })));
+    }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, bg: variant === "minimal" ? theme.colors.white : 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 })] }));
 };
 exports.default = FilterSidebar;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormWrapper.d.ts","sourceRoot":"","sources":["../../../src/Components/Form/FormWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAG3C,QAAA,MAAM,WAAW,GAAI,2BAIlB;IACD,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,4CAgCA,CAAC;AAEF,eAAe,WAAW,CAAC"}