pixelize-design-library 2.3.7 → 2.3.8

package/dist/Components/Table/components/TableGroupRow.js

@@ -1,27 +1,15 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableGroupRow = void 0;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 /** Monday-style colored, collapsible group header row. */
-var TableGroupRow = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var label = _a.label, value = _a.value, count = _a.count, color = _a.color, collapsed = _a.collapsed, colSpan = _a.colSpan, onToggle = _a.onToggle, onAddItem = _a.onAddItem;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Tr, null,
-        react_1.default.createElement(react_2.Td, { colSpan: colSpan, p: 0, border: "none" },
-            react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: "inset 4px 0 0 ".concat(color.solid), borderBottom: "0.063rem solid ".concat((_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.border) === null || _c === void 0 ? void 0 : _c[500]) },
-                react_1.default.createElement(react_2.IconButton, { "aria-label": collapsed ? "Expand group" : "Collapse group", size: "xs", variant: "ghost", color: color.text, onClick: onToggle, icon: collapsed ? react_1.default.createElement(lucide_react_1.ChevronRight, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 }) }),
-                react_1.default.createElement(react_2.Text, { fontSize: "0.8125rem", fontWeight: 700, color: color.text, isTruncated: true, maxW: "20rem" }, label),
-                react_1.default.createElement(react_2.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, color: color.text, bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50], borderRadius: "full", px: "0.5rem", py: "0.0625rem" }, count),
-                onAddItem && (react_1.default.createElement(react_2.Flex, { as: "button", type: "button", align: "center", gap: 1, ml: "auto", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 500, color: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.text) === null || _g === void 0 ? void 0 : _g[500], _hover: { bg: "whiteAlpha.500", color: color.text }, onClick: function () { return onAddItem(value); } },
-                    react_1.default.createElement(lucide_react_1.Plus, { size: 14 }),
-                    " Add item"))))));
+const TableGroupRow = ({ label, value, count, color, collapsed, colSpan, onToggle, onAddItem, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: colSpan, p: 0, border: "none", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: `inset 4px 0 0 ${color.solid}`, borderBottom: `0.063rem solid ${(_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.border) === null || _b === void 0 ? void 0 : _b[500]}`, children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": collapsed ? "Expand group" : "Collapse group", size: "xs", variant: "ghost", color: color.text, onClick: onToggle, icon: collapsed ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.8125rem", fontWeight: 700, color: color.text, isTruncated: true, maxW: "20rem", children: label }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, color: color.text, bg: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.background) === null || _d === void 0 ? void 0 : _d[50], borderRadius: "full", px: "0.5rem", py: "0.0625rem", children: count }), onAddItem && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 1, ml: "auto", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 500, color: (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500], _hover: { bg: "whiteAlpha.500", color: color.text }, onClick: () => onAddItem(value), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14 }), " Add item"] }))] }) }) }));
 };
 exports.TableGroupRow = TableGroupRow;
 exports.default = exports.TableGroupRow;

package/dist/Components/Table/components/TableHeader.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { TableHeaderPageProps } from "../TableProps";
-declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }: TableHeaderPageProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }: TableHeaderPageProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;
+//# sourceMappingURL=TableHeader.d.ts.map

package/dist/Components/Table/components/TableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,EAGL,oBAAoB,EACrB,MAAM,eAAe,CAAC;iTAyBpB,oBAAoB;AA+GvB,wBAAiC"}

package/dist/Components/Table/components/TableHeader.js

@@ -1,66 +1,22 @@
 "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 = require("@chakra-ui/react");
-var react_2 = __importStar(require("react"));
-var table_1 = require("../../../Utils/table");
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var TableFilters_1 = __importDefault(require("../filters/TableFilters"));
-var lucide_react_1 = require("lucide-react");
-var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
-var TableHeader = function (_a) {
-    var columns = _a.columns, isCheckbox = _a.isCheckbox, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, isSelecting = _a.isSelecting;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _b = (0, react_2.useState)(null), openFilterId = _b[0], setOpenFilterId = _b[1];
-    var RenderCheckbox = (0, react_2.useCallback)(function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = require("react");
+const table_1 = require("../../../Utils/table");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const TableFilters_1 = __importDefault(require("../filters/TableFilters"));
+const lucide_react_1 = require("lucide-react");
+const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const [openFilterId, setOpenFilterId] = (0, react_2.useState)(null);
+    const RenderCheckbox = (0, react_2.useCallback)(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]) }, isSelecting ? (react_2.default.createElement(react_1.Spinner, { size: "sm", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[500] })) : (react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" }))));
+        return ((0, jsx_runtime_1.jsx)(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, children: isSelecting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[500] })) : ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }));
     }, [
         checked,
         freezedTextColor,
@@ -70,78 +26,68 @@ var TableHeader = function (_a) {
         noBorders,
         theme.colors,
     ]);
-    var RenderConent = (0, react_2.useCallback)(function () {
+    const RenderConent = (0, react_2.useCallback)(() => {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1 }));
+        return ((0, jsx_runtime_1.jsx)(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
     }, [noBorders, theme.colors]);
-    var RenderView = (0, react_2.useCallback)(function () {
+    const RenderView = (0, react_2.useCallback)(() => {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1 }));
+        return ((0, jsx_runtime_1.jsx)(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
     }, [noBorders, theme.colors, isActionFreeze]);
-    return (react_2.default.createElement(react_1.Tr, { pr: 0 },
-        isContent && react_2.default.createElement(RenderConent, null),
-        isCheckbox && react_2.default.createElement(RenderCheckbox, null),
-        columns.map(function (header, index) {
-            if (header === null || header === void 0 ? void 0 : header.isHidden)
-                return null;
-            return (react_2.default.createElement(ColumnHeader, { header: header, index: index, key: header.label, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, freezedBgColor: freezedBgColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }));
-        }),
-        isLink && react_2.default.createElement(RenderView, null)));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { pr: 0, children: [isContent && (0, jsx_runtime_1.jsx)(RenderConent, {}), isCheckbox && (0, jsx_runtime_1.jsx)(RenderCheckbox, {}), columns.map((header, index) => {
+                if (header === null || header === void 0 ? void 0 : header.isHidden)
+                    return null;
+                return ((0, jsx_runtime_1.jsx)(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, freezedBgColor: freezedBgColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, header.label));
+            }), isLink && (0, jsx_runtime_1.jsx)(RenderView, {})] }));
 };
 exports.default = (0, react_2.memo)(TableHeader);
-var SortingIcon = (0, react_2.memo)(function (_a) {
-    var _b;
-    var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_2.default.createElement(react_1.Box, { display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, onClick: handleSortClick, transition: "color 0.2s ease-in-out", color: theme.colors.gray[600], _hover: { color: (_b = theme.colors.secondary) === null || _b === void 0 ? void 0 : _b[500] } },
-        sortState === "none" && react_2.default.createElement(lucide_react_1.ChevronsUpDown, { size: 14 }),
-        sortState === "asc" && react_2.default.createElement(lucide_react_1.ChevronUp, { size: 14 }),
-        sortState === "desc" && react_2.default.createElement(lucide_react_1.ChevronDown, { size: 14 })));
+const SortingIcon = (0, react_2.memo)(({ sortState, handleSortClick, }) => {
+    var _a;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, onClick: handleSortClick, transition: "color 0.2s ease-in-out", color: theme.colors.gray[600], _hover: { color: (_a = theme.colors.secondary) === null || _a === void 0 ? void 0 : _a[500] }, children: [sortState === "none" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { size: 14 }), sortState === "asc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), sortState === "desc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 })] }));
 });
-var ColumnHeader = (0, react_2.memo)(function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-    var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort, openFilterId = _a.openFilterId, setOpenFilterId = _a.setOpenFilterId;
-    var _v = (0, react_2.useState)(false), isHovered = _v[0], setIsHovered = _v[1];
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var isFrozen = header.isFreeze;
-    var leftOffset = isFrozen
+const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    const [isHovered, setIsHovered] = (0, react_2.useState)(false);
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const isFrozen = header.isFreeze;
+    const leftOffset = isFrozen
         ? (0, table_1.calculateLeftOffset)(columnWidths, index) + (isCheckbox ? 50 : 0)
         : undefined;
-    var isSorting = header.isSort
-        ? columnsSort.find(function (o) { return o.column === header.id; })
+    const isSorting = header.isSort
+        ? columnsSort.find((o) => o.column === header.id)
         : undefined;
-    var activeSorts = columnsSort.filter(function (o) { return o.direction !== "none"; });
-    var sortPriority = activeSorts.length > 1 && isSorting && isSorting.direction !== "none"
-        ? activeSorts.findIndex(function (o) { return o.column === header.id; }) + 1
+    const activeSorts = columnsSort.filter((o) => o.direction !== "none");
+    const sortPriority = activeSorts.length > 1 && isSorting && isSorting.direction !== "none"
+        ? activeSorts.findIndex((o) => o.column === header.id) + 1
         : 0;
-    var ariaSort = (isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc"
+    const ariaSort = (isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc"
         ? "ascending"
         : (isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc"
             ? "descending"
             : undefined;
     // const TextColor = isFrozen ? freezedTextColor : headerTextColor;
-    var handleMouseDown = function (e) {
-        var parentBox = e.target
+    const handleMouseDown = (e) => {
+        const parentBox = e.target
             .parentElement;
-        var th = parentBox.parentElement;
-        var startX = e.pageX;
-        var startWidth = th.offsetWidth;
-        var onMouseMove = function (moveEvent) {
-            var newWidth = startWidth + (moveEvent.pageX - startX);
-            th.style.width = "".concat(newWidth, "px");
+        const th = parentBox.parentElement;
+        const startX = e.pageX;
+        const startWidth = th.offsetWidth;
+        const onMouseMove = (moveEvent) => {
+            const newWidth = startWidth + (moveEvent.pageX - startX);
+            th.style.width = `${newWidth}px`;
         };
-        var onMouseUp = function () {
+        const onMouseUp = () => {
             document.removeEventListener("mousemove", onMouseMove);
             document.removeEventListener("mouseup", onMouseUp);
         };
         document.addEventListener("mousemove", onMouseMove);
         document.addEventListener("mouseup", onMouseUp);
     };
-    var Sorting = (0, react_2.useCallback)(function (_a) {
-        var _b;
-        var isSorting = _a.isSorting, header = _a.header;
-        return (react_2.default.createElement(SortingIcon, { sortState: (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none", handleSortClick: function () {
-                var direction = "asc";
+    const Sorting = (0, react_2.useCallback)(({ isSorting, header }) => {
+        var _a;
+        return ((0, jsx_runtime_1.jsx)(SortingIcon, { sortState: (_a = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _a !== void 0 ? _a : "none", handleSortClick: () => {
+                let direction = "asc";
                 if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
                     direction = "desc";
                 }
@@ -151,22 +97,13 @@ var ColumnHeader = (0, react_2.memo)(function (_a) {
                 handleSort(header.id, direction);
             } }));
     }, [handleSort]);
-    var isFiltersEnabled = (isHovered && header.isSort) ||
+    const isFiltersEnabled = (isHovered && header.isSort) ||
         ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none");
-    return (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_e = (_d = (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.table) === null || _c === void 0 ? void 0 : _c.hover) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.secondary) === null || _g === void 0 ? void 0 : _g[50], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_h = theme.colors) === null || _h === void 0 ? void 0 : _h.border[500]), borderRight: noBorders ? "none" : "0.063rem solid ".concat((_l = (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.boxborder) === null || _k === void 0 ? void 0 : _k[300]) !== null && _l !== void 0 ? _l : (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray[200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), height: 45, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        react_2.default.createElement(react_1.Box, { display: "flex", color: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.secondary) === null || _p === void 0 ? void 0 : _p[500], lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative" },
-            react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden" }, header.label),
-            react_2.default.createElement(react_1.Box, { display: "inline-flex", alignItems: "center" },
-                isFiltersEnabled && (react_2.default.createElement(Sorting, { isSorting: isSorting, header: header })),
-                sortPriority > 0 && (react_2.default.createElement(react_1.Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: (_s = (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.primary) === null || _r === void 0 ? void 0 : _r.opacity) === null || _s === void 0 ? void 0 : _s[16], color: (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.primary) === null || _u === void 0 ? void 0 : _u[600] }, sortPriority)),
-                react_2.default.createElement(TableFilters_1.default, { header: header, setColumnsSearch: function (searchVal) {
-                        return setColumnsSearch(function (prev) {
-                            var _a;
-                            return (__assign(__assign({}, prev), (_a = {}, _a[header.id] = searchVal, _a)));
-                        });
-                    }, columnsSearch: columnsSearch[header.id] || "", onClose: function () {
-                        setIsHovered(false);
-                        setOpenFilterId(null);
-                    }, isOpen: openFilterId === header.id, onOpen: function () { return setOpenFilterId(header.id); } })),
-            react_2.default.createElement("div", { className: "resize-handle", onMouseDown: handleMouseDown }))));
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.border[500]}`, borderRight: noBorders ? "none" : `0.063rem solid ${(_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.boxborder) === null || _j === void 0 ? void 0 : _j[300]) !== null && _k !== void 0 ? _k : (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray[200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: 45, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", color: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.secondary) === null || _o === void 0 ? void 0 : _o[500], lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", children: [isFiltersEnabled && ((0, jsx_runtime_1.jsx)(Sorting, { isSorting: isSorting, header: header })), sortPriority > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: (_r = (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.primary) === null || _q === void 0 ? void 0 : _q.opacity) === null || _r === void 0 ? void 0 : _r[16], color: (_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.primary) === null || _t === void 0 ? void 0 : _t[600], children: sortPriority })), (0, jsx_runtime_1.jsx)(TableFilters_1.default, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
+                                ...prev,
+                                [header.id]: searchVal,
+                            })), columnsSearch: columnsSearch[header.id] || "", onClose: () => {
+                                setIsHovered(false);
+                                setOpenFilterId(null);
+                            }, isOpen: openFilterId === header.id, onOpen: () => setOpenFilterId(header.id) })] }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle", onMouseDown: handleMouseDown })] }) }, index + 1));
 });

package/dist/Components/Table/components/TableLoading.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-declare const TableLoading: () => React.JSX.Element;
+declare const TableLoading: () => import("react/jsx-runtime").JSX.Element;
 export default TableLoading;
 export declare const TableBodyLoading: ({ noOfColumns, borderColor, rowsCount, rowHeight, }: {
     noOfColumns: number;
     borderColor: string;
     rowsCount?: number;
     rowHeight?: number;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TableLoading.d.ts.map

package/dist/Components/Table/components/TableLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableLoading.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableLoading.tsx"],"names":[],"mappings":"AAYA,QAAA,MAAM,YAAY,+CAyCjB,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,eAAO,MAAM,gBAAgB,GAAI,qDAK9B;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAuBA,CAAC"}

package/dist/Components/Table/components/TableLoading.js

@@ -1,41 +1,15 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableBodyLoading = void 0;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var TableLoading = function () {
-    return (react_1.default.createElement(react_2.Box, { overflowX: "auto", p: 4 },
-        react_1.default.createElement(react_2.Table, { variant: "simple", width: "full" },
-            react_1.default.createElement(react_2.Thead, null,
-                react_1.default.createElement(react_2.Tr, null,
-                    react_1.default.createElement(react_2.Th, { p: 2 },
-                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })),
-                    react_1.default.createElement(react_2.Th, { p: 2 },
-                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })),
-                    react_1.default.createElement(react_2.Th, { p: 2 },
-                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })),
-                    react_1.default.createElement(react_2.Th, { p: 2 },
-                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })))),
-            react_1.default.createElement(react_2.Tbody, null, Array.from({ length: 5 }).map(function (_, rowIndex) { return (react_1.default.createElement(react_2.Tr, { key: rowIndex },
-                react_1.default.createElement(react_2.Td, { p: 2 },
-                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })),
-                react_1.default.createElement(react_2.Td, { p: 2 },
-                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })),
-                react_1.default.createElement(react_2.Td, { p: 2 },
-                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })),
-                react_1.default.createElement(react_2.Td, { p: 2 },
-                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })))); })))));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const TableLoading = () => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { overflowX: "auto", p: 4, children: (0, jsx_runtime_1.jsxs)(react_1.Table, { variant: "simple", width: "full", children: [(0, jsx_runtime_1.jsx)(react_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_1.Tr, { children: [(0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) })] }) }), (0, jsx_runtime_1.jsx)(react_1.Tbody, { children: Array.from({ length: 5 }).map((_, rowIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Tr, { children: [(0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) })] }, rowIndex))) })] }) }));
 };
 exports.default = TableLoading;
-var TableBodyLoading = function (_a) {
-    var noOfColumns = _a.noOfColumns, borderColor = _a.borderColor, _b = _a.rowsCount, rowsCount = _b === void 0 ? 4 : _b, _c = _a.rowHeight, rowHeight = _c === void 0 ? 45 : _c;
-    return (react_1.default.createElement(react_1.default.Fragment, null, Array.from({ length: rowsCount }).map(function (_, index) {
-        return (react_1.default.createElement(react_2.Tr, { key: index },
-            react_1.default.createElement(react_2.Td, { colSpan: noOfColumns, textAlign: "center", border: "1px solid ".concat(borderColor), px: 2, pt: 2, pb: 0, height: "".concat(rowHeight, "px"), boxSizing: "border-box" },
-                react_1.default.createElement(react_2.Skeleton, { height: "15px", variant: "shine" }))));
-    })));
+const TableBodyLoading = ({ noOfColumns, borderColor, rowsCount = 4, rowHeight = 45, }) => {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: rowsCount }).map((_, index) => {
+            return ((0, jsx_runtime_1.jsx)(react_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: noOfColumns, textAlign: "center", border: `1px solid ${borderColor}`, px: 2, pt: 2, pb: 0, height: `${rowHeight}px`, boxSizing: "border-box", children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "15px", variant: "shine" }) }) }, index));
+        }) }));
 };
 exports.TableBodyLoading = TableBodyLoading;

package/dist/Components/Table/components/TableSearch.d.ts

@@ -4,3 +4,4 @@ interface TableSearchProps {
 }
 declare const TableSearch: React.FC<TableSearchProps>;
 export default TableSearch;
+//# sourceMappingURL=TableSearch.d.ts.map

package/dist/Components/Table/components/TableSearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSearch.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAaxC,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoE3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/Table/components/TableSearch.js

@@ -1,75 +1,36 @@
 "use strict";
-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 useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var table_1 = require("../../../Utils/table");
-var ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
-var TableSearch = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var onSearch = _a.onSearch;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var _g = (0, react_1.useState)(false), showInput = _g[0], setShowInput = _g[1];
-    var _h = (0, react_1.useState)(""), query = _h[0], setQuery = _h[1];
-    var handleSearchClick = function () {
-        setShowInput(function (prev) { return !prev; });
+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 useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const table_1 = require("../../../Utils/table");
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const TableSearch = ({ onSearch }) => {
+    var _a, _b, _c, _d, _e;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [showInput, setShowInput] = (0, react_1.useState)(false);
+    const [query, setQuery] = (0, react_1.useState)("");
+    const handleSearchClick = () => {
+        setShowInput((prev) => !prev);
         if (showInput) {
             setQuery("");
             if (query)
                 onSearch === null || onSearch === void 0 ? void 0 : onSearch(""); // clear search on close
         }
     };
-    var handleDebounce = (0, table_1.useDebounce)(function (value) {
+    const handleDebounce = (0, table_1.useDebounce)((value) => {
         onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
     }, 700);
-    var handleInputChange = function (e) {
-        var value = e.target.value;
+    const handleInputChange = (e) => {
+        const value = e.target.value;
         setQuery(value);
         handleDebounce(value);
     };
-    return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: "2" },
-        !showInput && (react_1.default.createElement(ToolTip_1.default, { label: "Search", placement: "top" },
-            react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 5, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500], onClick: handleSearchClick, _hover: { color: (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[500] } }))),
-        showInput ? (react_1.default.createElement(react_2.InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease" },
-            react_1.default.createElement(react_2.Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: (_d = colors === null || colors === void 0 ? void 0 : colors.border) === null || _d === void 0 ? void 0 : _d[500], _focus: { borderColor: (_e = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _e === void 0 ? void 0 : _e[500] }, autoFocus: true }),
-            react_1.default.createElement(react_2.InputRightElement, { display: "flex", alignItems: "center", height: "2rem" },
-                react_1.default.createElement(react_2.Icon, { as: lucide_react_1.X, color: (_f = colors === null || colors === void 0 ? void 0 : colors.text) === null || _f === void 0 ? void 0 : _f[500], cursor: "pointer", onClick: handleSearchClick })))) : null));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Search", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 5, color: (_a = colors === null || colors === void 0 ? void 0 : colors.text) === null || _a === void 0 ? void 0 : _a[500], onClick: handleSearchClick, _hover: { color: (_b = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _b === void 0 ? void 0 : _b[500] } }) })), showInput ? ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: (_c = colors === null || colors === void 0 ? void 0 : colors.border) === null || _c === void 0 ? void 0 : _c[500], _focus: { borderColor: (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[500] }, autoFocus: true }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.X, color: (_e = colors === null || colors === void 0 ? void 0 : colors.text) === null || _e === void 0 ? void 0 : _e[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
 };
 exports.default = TableSearch;

package/dist/Components/Table/filterTypes.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Column / sidebar filter payloads (dynamic keys, heterogeneous values).
+ */
+export type FilterValues = Record<string, unknown>;
+//# sourceMappingURL=filterTypes.d.ts.map

package/dist/Components/Table/filterTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterTypes.d.ts","sourceRoot":"","sources":["../../../src/Components/Table/filterTypes.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC"}

package/dist/Components/Table/filterTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Table/filters/ActiveFilters.d.ts

@@ -7,3 +7,4 @@ interface ActiveFiltersProps {
 }
 declare const ActiveFilters: React.FC<ActiveFiltersProps>;
 export default ActiveFilters;
+//# sourceMappingURL=ActiveFilters.d.ts.map

package/dist/Components/Table/filters/ActiveFilters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveFilters.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/filters/ActiveFilters.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAIpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGjD,UAAU,kBAAkB;IAC1B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAC9B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAC7C,CAAC;CACH;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoI9C,CAAC;AAEH,eAAe,aAAa,CAAC"}