erp-pro-ui 0.1.1 → 0.1.2

package/dist/chunks/{data-table-BRcGhJDf.cjs → data-table-9HELVsYR.cjs}

@@ -1,16 +1,25 @@
 const require_chunk = require("./chunk-B_GkZjkl.cjs");
-const require_checkbox = require("./checkbox-DQmZwRTt.cjs");
-const require_combobox = require("./combobox-mAvOcg-E.cjs");
-const require_multi_select_combobox = require("./multi-select-combobox-DiMwJxj_.cjs");
-const require_input = require("./input-CoRHoZkB.cjs");
-const require_select = require("./select-BwelAQc1.cjs");
-const require_switch = require("./switch-y8oWcyLp.cjs");
-const require_date_picker = require("./date-picker-DooielHi.cjs");
+const require_icons = require("./icons-BxIzP2jd.cjs");
+const require_button = require("./button-CZL6kFzT.cjs");
+const require_checkbox = require("./checkbox-yHuSw-hV.cjs");
+const require_chip = require("./chip-DcBji__g.cjs");
+const require_combobox = require("./combobox-BXu3s0dt.cjs");
+const require_multi_select_combobox = require("./multi-select-combobox-UW0X15W7.cjs");
+const require_input = require("./input-D9qZNqXV.cjs");
+const require_select = require("./select-WC_kPqUP.cjs");
+const require_switch = require("./switch-C5otDb4c.cjs");
+const require_date_picker = require("./date-picker-W9om1j7A.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _tanstack_react_table = require("@tanstack/react-table");
 //#region src/components/data-display/data-table/DataTable.tsx
+function renderDefaultCellValue(value) {
+	if (value === void 0 || value === null || value === "") return "-";
+	if (typeof value === "boolean") return value ? "Yes" : "No";
+	if (Array.isArray(value)) return value.length > 0 ? value.join(", ") : "-";
+	return value;
+}
 var FilterDropdown = ({ isOpen, onClose, children }) => {
 	if (!isOpen) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -18,14 +27,15 @@ var FilterDropdown = ({ isOpen, onClose, children }) => {
 		onClick: onClose,
 		"aria-hidden": "true"
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "absolute top-full right-0 mt-2 bg-white dark:bg-neutral-800 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700 z-50 min-w-64",
+		className: "absolute top-full right-0 z-50 mt-2 min-w-64 overflow-hidden rounded-[4px] border border-white/45 bg-neutral-50 shadow-[0_18px_40px_rgba(15,23,42,0.18)] ring-1 ring-inset ring-white/35 backdrop-blur-2xl dark:border-white/10 dark:bg-neutral-800/50 dark:shadow-[0_22px_48px_rgba(0,0,0,0.42)] dark:ring-white/6",
 		children
 	})] });
 };
-var FilterButton = ({ icon, label, onClick, hasActive }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+var FilterButton = ({ icon, label, onClick, hasActive }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 	onClick,
 	title: label,
-	className: `p-2 rounded-lg transition-colors ${hasActive ? "bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400" : "text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700"}`,
+	"aria-label": label,
+	className: `h-10 min-w-10 px-0 py-0 shadow-none ${hasActive ? "border-accent/20 bg-accent-subtle text-accent hover:bg-accent-subtle hover:opacity-100" : "border-transparent bg-transparent text-neutral-600 hover:bg-neutral-100 hover:text-neutral-700 hover:opacity-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200"}`,
 	children: icon
 });
 var ColumnToggle = ({ columns, onToggle, onShowAll, onHideAll }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -40,28 +50,26 @@ var ColumnToggle = ({ columns, onToggle, onShowAll, onHideAll }) => /* @__PURE__
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "space-y-2 max-h-64 overflow-y-auto",
-			children: columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				className: "flex items-center gap-2 cursor-pointer px-2 py-1 hover:bg-neutral-50 dark:hover:bg-neutral-700 rounded",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					type: "checkbox",
+			children: columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "rounded-[8px] px-2 py-1 hover:bg-neutral-100 dark:hover:bg-neutral-700",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.Checkbox, {
 					checked: col.visible !== false,
 					onChange: () => onToggle(col.id),
-					className: "w-4 h-4 rounded cursor-pointer accent-primary-500"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-sm text-neutral-700 dark:text-neutral-300",
-					children: col.label
-				})]
+					label: col.label
+				})
 			}, col.id))
 		}),
 		(onShowAll || onHideAll) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex gap-2 pt-2 border-t border-neutral-200 dark:border-neutral-700",
-			children: [onShowAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			className: "flex gap-2 border-t border-neutral-200 pt-2 dark:border-neutral-700",
+			children: [onShowAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 				onClick: onShowAll,
-				className: "flex-1 text-xs font-semibold text-primary-500 hover:text-primary-600 py-1",
+				size: "small",
+				className: "flex-1 border-none bg-transparent px-1 py-1 text-xs font-semibold text-accent shadow-none hover:bg-transparent hover:text-accent-hover hover:opacity-100",
 				children: "SHOW ALL"
-			}), onHideAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			}), onHideAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 				onClick: onHideAll,
-				className: "flex-1 text-xs font-semibold text-neutral-500 hover:text-neutral-600 py-1",
+				size: "small",
+				className: "flex-1 border-none bg-transparent px-1 py-1 text-xs font-semibold text-neutral-500 shadow-none hover:bg-transparent hover:text-neutral-600 hover:opacity-100 dark:text-neutral-300 dark:hover:text-white",
 				children: "HIDE ALL"
 			})]
 		})
@@ -89,36 +97,41 @@ var FilterProfile = ({ isOpen, onClose, onSaveProfile }) => {
 					children: "Add new profile"
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-					className: "block text-sm font-medium text-primary-500 mb-2",
+					className: "mb-2 block text-sm font-medium text-accent",
 					children: "Enter filter profile name:"
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
 					type: "text",
 					value: profileName,
 					onChange: (e) => setProfileName(e.target.value),
 					placeholder: "Enter value",
-					className: "w-full px-4 py-3 border-2 border-primary-500 rounded-lg bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white placeholder:text-neutral-400 dark:placeholder:text-neutral-500 mb-6 focus:outline-none focus:ring-2 focus:ring-primary-300",
-					onKeyPress: (e) => e.key === "Enter" && handleSave()
+					className: "",
+					onKeyDown: (e) => e.key === "Enter" && handleSave()
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex gap-4",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					className: "flex justify-end gap-3 mt-6",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 						onClick: onClose,
-						className: "flex-1 px-4 py-3 rounded-lg border-2 border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-200 font-semibold hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors flex items-center justify-center gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "🗑️" }), "CANCEL"]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: "min-w-28",
+						size: "medium",
+						children: "Cancel"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 						onClick: handleSave,
 						disabled: !profileName.trim(),
-						className: "flex-1 px-4 py-3 rounded-lg bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 font-semibold hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
-						children: "SAVE"
+						className: "min-w-28",
+						size: "medium",
+						primary: true,
+						children: "Save"
 					})]
 				})
 			]
 		})
 	});
 };
-var ICON_BUTTON_CLASS_NAME = "p-2 rounded-lg text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors";
+var ICON_BUTTON_CLASS_NAME = "inline-flex items-center justify-center rounded-lg text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600 dark:hover:bg-neutral-700";
 var DISABLED_ICON_BUTTON_CLASS_NAME = `${ICON_BUTTON_CLASS_NAME} disabled:opacity-40 disabled:cursor-not-allowed`;
+var TABLE_CONTROL_ICON_CLASS_NAME = "h-[18px] w-[18px] shrink-0";
+var TABLE_COMPLEX_ICON_CLASS_NAME = "h-5 w-5 shrink-0";
 var isFilterValueEmpty = (value) => {
 	if (value === void 0 || value === null) return true;
 	if (typeof value === "string") return value === "";
@@ -279,22 +292,9 @@ function useAsyncFilterOptions(externalFilterOptions, filterSelectorOpen) {
 function LoadingFilterField({ label }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "h-10 flex items-center justify-center bg-neutral-100 dark:bg-neutral-800 rounded-md px-3",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.LoaderIcon, {
 			className: "w-4 h-4 animate-spin text-neutral-400",
-			fill: "none",
-			viewBox: "0 0 24 24",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-				className: "opacity-25",
-				cx: "12",
-				cy: "12",
-				r: "10",
-				stroke: "currentColor",
-				strokeWidth: "4"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				className: "opacity-75",
-				fill: "currentColor",
-				d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-			})]
+			"aria-hidden": "true"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "ml-2 text-sm text-neutral-500",
 			children: label
@@ -340,7 +340,7 @@ function NumberRangeFilter({ value, onChange }) {
 }
 function FilterFieldControl({ filter, value, isActive, onChange }) {
 	if (filter.isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingFilterField, { label: filter.label });
-	const activeClassName = isActive ? "border-primary-500" : "";
+	const activeClassName = isActive ? "border-accent" : "";
 	switch (filter.type) {
 		case "text": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
 			value: getStringFilterValue(value),
@@ -382,39 +382,32 @@ function FilterFieldControl({ filter, value, isActive, onChange }) {
 			onChange: (values) => onChange(values),
 			placeholder: filter.placeholder || filter.label,
 			options: toSelectOptions(filter.options),
-			className: isActive ? "border-primary-500 border-2" : ""
+			className: isActive ? "border-accent border-2" : ""
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_combobox.Combobox, {
 			value: getStringFilterValue(value),
 			onChange: (nextValue) => onChange(nextValue),
 			placeholder: filter.placeholder || filter.label,
 			options: toSelectOptions(filter.options),
-			className: isActive ? "border-primary-500 border-2" : ""
+			className: isActive ? "border-accent border-2" : ""
 		});
 	}
 }
 function ToolbarIconButton({ title, onClick, disabled, children }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 		onClick,
 		disabled,
 		title,
-		className: disabled ? DISABLED_ICON_BUTTON_CLASS_NAME : ICON_BUTTON_CLASS_NAME,
+		"aria-label": title,
+		className: disabled ? `${DISABLED_ICON_BUTTON_CLASS_NAME} h-10 w-10 shrink-0 border-transparent bg-transparent px-0 py-0 text-base shadow-none hover:bg-transparent hover:opacity-100` : `${ICON_BUTTON_CLASS_NAME} h-10 w-10 shrink-0 border-transparent bg-transparent px-0 py-0 text-base shadow-none hover:opacity-100`,
 		children
 	});
 }
 function SearchField({ value, onChange, placeholder }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "relative w-[300px]",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-			className: "pointer-events-none absolute left-4 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-neutral-400",
-			fill: "none",
-			stroke: "currentColor",
-			viewBox: "0 0 24 24",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				strokeWidth: 2,
-				d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-			})
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.SearchIcon, {
+			className: `pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-neutral-400 ${TABLE_CONTROL_ICON_CLASS_NAME}`,
+			"aria-hidden": "true"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
 			type: "text",
 			value,
@@ -427,33 +420,32 @@ function SearchField({ value, onChange, placeholder }) {
 function RowActionsCell({ rowIndex, row, isOpen, onToggle, onClose, onRowAction }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("td", {
 		className: "px-2 py-3 text-right relative",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 			onClick: () => onToggle(rowIndex),
-			className: "p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-600 text-neutral-500",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-				className: "w-5 h-5",
-				fill: "currentColor",
-				viewBox: "0 0 24 24",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" })
+			"aria-label": "Open row actions",
+			className: "h-8 w-8 border-none bg-transparent px-0 py-0 text-neutral-500 shadow-none hover:bg-neutral-100 hover:text-neutral-700 hover:opacity-100 dark:hover:bg-neutral-600 dark:hover:text-neutral-200",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.EllipsisVerticalIcon, {
+				className: TABLE_CONTROL_ICON_CLASS_NAME,
+				"aria-hidden": "true"
 			})
 		}), isOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "fixed inset-0 z-40",
 			onClick: onClose
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "absolute right-0 top-full mt-1 bg-white dark:bg-neutral-800 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700 z-50 min-w-32 py-1",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 				onClick: () => {
 					onRowAction?.("edit", row);
 					onClose();
 				},
-				className: "w-full text-left px-4 py-2 text-sm hover:bg-neutral-50 dark:hover:bg-neutral-700",
+				className: "w-full justify-start rounded-none border-none bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 shadow-none hover:bg-neutral-50 hover:text-neutral-900 hover:opacity-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white",
 				children: "Edit"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 				onClick: () => {
 					onRowAction?.("delete", row);
 					onClose();
 				},
-				className: "w-full text-left px-4 py-2 text-sm text-error hover:bg-neutral-50 dark:hover:bg-neutral-700",
+				className: "w-full justify-start rounded-none border-none bg-transparent px-4 py-2 text-sm font-normal text-error shadow-none hover:bg-neutral-50 hover:text-error hover:opacity-100 dark:hover:bg-neutral-700",
 				children: "Delete"
 			})]
 		})] }) : null]
@@ -479,59 +471,49 @@ function DataTablePagination({ table, totalCount, filteredCount }) {
 				]
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-2",
+			className: "flex flex-wrap items-center justify-end gap-2",
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-					value: pageSize,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-sm text-neutral-600 dark:text-neutral-400",
+					children: "Rows"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.Select, {
+					value: String(pageSize),
 					onChange: (event) => table.setPageSize(Number(event.target.value)),
-					className: "px-2 py-1 text-sm border border-neutral-200 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300",
-					children: [
+					"aria-label": "Rows per page",
+					containerClassName: "w-24 min-w-24 shrink-0",
+					triggerClassName: "px-3 font-medium text-neutral-900 dark:text-white",
+					options: [
 						10,
 						20,
 						30,
 						50,
 						100
-					].map((size) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
-						value: size,
-						children: [size, " / page"]
-					}, size))
+					].map((size) => ({
+						value: String(size),
+						label: String(size)
+					}))
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
 					title: "First page",
 					onClick: () => table.setPageIndex(0),
 					disabled: !table.getCanPreviousPage(),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-						className: "w-4 h-4",
-						fill: "none",
-						stroke: "currentColor",
-						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 2,
-							d: "M11 19l-7-7 7-7m8 14l-7-7 7-7"
-						})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ChevronsLeftIcon, {
+						className: TABLE_CONTROL_ICON_CLASS_NAME,
+						"aria-hidden": "true"
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
 					title: "Previous page",
 					onClick: () => table.previousPage(),
 					disabled: !table.getCanPreviousPage(),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-						className: "w-4 h-4",
-						fill: "none",
-						stroke: "currentColor",
-						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 2,
-							d: "M15 19l-7-7 7-7"
-						})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ChevronLeftIcon, {
+						className: TABLE_CONTROL_ICON_CLASS_NAME,
+						"aria-hidden": "true"
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "px-3 py-1 text-sm text-neutral-700 dark:text-neutral-300",
+					className: "inline-flex h-10 shrink-0 items-center rounded-lg px-3 text-sm font-medium text-neutral-700 dark:text-neutral-300",
 					children: [
 						"Page ",
 						pageIndex + 1,
@@ -543,34 +525,18 @@ function DataTablePagination({ table, totalCount, filteredCount }) {
 					title: "Next page",
 					onClick: () => table.nextPage(),
 					disabled: !table.getCanNextPage(),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-						className: "w-4 h-4",
-						fill: "none",
-						stroke: "currentColor",
-						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 2,
-							d: "M9 5l7 7-7 7"
-						})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ChevronRightIcon, {
+						className: TABLE_CONTROL_ICON_CLASS_NAME,
+						"aria-hidden": "true"
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
 					title: "Last page",
 					onClick: () => table.setPageIndex(table.getPageCount() - 1),
 					disabled: !table.getCanNextPage(),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-						className: "w-4 h-4",
-						fill: "none",
-						stroke: "currentColor",
-						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 2,
-							d: "M13 5l7 7-7 7M5 5l7 7-7 7"
-						})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ChevronsRightIcon, {
+						className: TABLE_CONTROL_ICON_CLASS_NAME,
+						"aria-hidden": "true"
 					})
 				})
 			]
@@ -582,37 +548,36 @@ function FilterSelectorMenu({ filterOptions, visibleFilters, onToggleFilter, onS
 		className: "p-2 min-w-48 space-y-1",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "text-xs font-semibold text-neutral-500 px-2 pb-2",
+				className: "px-2 pb-2 text-xs font-semibold text-neutral-500 dark:text-neutral-300",
 				children: "Show filters"
 			}),
-			filterOptions.map((filter) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				className: "flex items-center gap-2 px-2 py-1.5 rounded-lg cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-700",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					type: "checkbox",
+			filterOptions.map((filter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-w-36",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.Checkbox, {
 					checked: visibleFilters.includes(filter.id),
 					onChange: (event) => onToggleFilter(filter.id, event.target.checked),
-					className: "w-4 h-4 rounded cursor-pointer accent-primary-500"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-sm text-neutral-700 dark:text-neutral-300",
-					children: filter.label
-				})]
+					label: filter.label
+				})
 			}, filter.id)),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex gap-2 pt-2 border-t border-neutral-200 dark:border-neutral-700",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				className: "flex gap-2 border-t border-neutral-200 pt-2 dark:border-neutral-700",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 					onClick: onShowAll,
-					className: "flex-1 text-xs font-semibold text-primary-500 hover:text-primary-600 py-1",
+					size: "small",
+					className: "flex-1 border-none bg-transparent px-1 py-1 text-xs font-semibold text-accent shadow-none hover:bg-transparent hover:text-accent-hover hover:opacity-100",
 					children: "SHOW ALL"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 					onClick: onHideAll,
-					className: "flex-1 text-xs font-semibold text-neutral-500 hover:text-neutral-600 py-1",
+					size: "small",
+					className: "flex-1 border-none bg-transparent px-1 py-1 text-xs font-semibold text-neutral-500 shadow-none hover:bg-transparent hover:text-neutral-600 hover:opacity-100 dark:text-neutral-300 dark:hover:text-white",
 					children: "HIDE ALL"
 				})]
 			})
 		]
 	});
 }
-function DataTableToolbar({ searchQuery, onSearchChange, searchPlaceholder, bulkDeleteEnabled, bulkSelectionActive, selectedCount, bulkActionsContent, bulkActionCard, onToggleBulkSelection, onBulkDeleteSelected, onExport, columnMenuOpen, onToggleColumnMenu, onCloseColumnMenu, columns, onColumnToggle }) {
+function DataTableToolbar({ searchQuery, onSearchChange, searchPlaceholder, bulkDeleteEnabled, bulkSelectionActive, selectedCount, bulkActionsContent, bulkActionCard, onToggleBulkSelection, onBulkDeleteSelected, onExport, columnMenuOpen, onToggleColumnMenu, onCloseColumnMenu, columns, onColumnToggle, onShowAllColumns, onHideAllColumns }) {
+	const hasSelectedRows = selectedCount > 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "border-b border-neutral-200 px-4 py-3 dark:border-neutral-700",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -620,31 +585,9 @@ function DataTableToolbar({ searchQuery, onSearchChange, searchPlaceholder, bulk
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex min-w-0 flex-1 flex-wrap items-center gap-2",
 				children: [bulkDeleteEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterButton, {
-					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-						fill: "none",
-						stroke: "currentColor",
-						className: "h-6.5 w-6.5",
-						viewBox: "0 0 24 24",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								strokeWidth: 1.75,
-								d: "M4.25 10V18.85A1.25 1.25 0 005.5 20.1H14"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								strokeWidth: 1.75,
-								d: "M7 5.75h10A1.25 1.25 0 0118.25 7v10A1.25 1.25 0 0117 18.25H7A1.25 1.25 0 015.75 17V7A1.25 1.25 0 017 5.75z"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								strokeWidth: 1.75,
-								d: "m9.25 12 2.25 2.25 4.25-4.5"
-							})
-						]
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.SelectionIcon, {
+						className: TABLE_COMPLEX_ICON_CLASS_NAME,
+						"aria-hidden": "true"
 					}),
 					label: bulkSelectionActive ? "Disable bulk selection" : "Enable bulk selection",
 					onClick: onToggleBulkSelection,
@@ -659,34 +602,18 @@ function DataTableToolbar({ searchQuery, onSearchChange, searchPlaceholder, bulk
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
 					onClick: onExport,
 					title: "Refresh",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-						className: "w-5 h-5",
-						fill: "none",
-						stroke: "currentColor",
-						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 2,
-							d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-						})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.RefreshIcon, {
+						className: TABLE_CONTROL_ICON_CLASS_NAME,
+						"aria-hidden": "true"
 					})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "relative",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
 						onClick: onToggleColumnMenu,
 						title: "Column settings",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-							className: "w-5 h-5",
-							fill: "none",
-							stroke: "currentColor",
-							viewBox: "0 0 24 24",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								strokeWidth: 2,
-								d: "M4 6h16M7 12h10m-7 6h4"
-							})
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.SettingsIcon, {
+							className: TABLE_COMPLEX_ICON_CLASS_NAME,
+							"aria-hidden": "true"
 						})
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterDropdown, {
 						isOpen: columnMenuOpen,
@@ -695,17 +622,22 @@ function DataTableToolbar({ searchQuery, onSearchChange, searchPlaceholder, bulk
 							columns,
 							onToggle: (columnId) => {
 								onColumnToggle?.(columnId);
-							}
+							},
+							onShowAll: onShowAllColumns,
+							onHideAll: onHideAllColumns
 						})
 					})]
 				})]
 			})]
-		}), bulkSelectionActive && selectedCount > 0 ? bulkActionCard ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mt-3 flex flex-col gap-3 rounded-xl border border-neutral-200/80 bg-white/90 px-4 py-3 shadow-sm backdrop-blur-xl dark:border-white/10 dark:bg-neutral-900/70 dark:shadow-black/20 lg:flex-row lg:items-center lg:justify-between",
+		}), bulkSelectionActive && hasSelectedRows ? bulkActionCard ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mt-2 flex flex-col gap-2 rounded-[4px] border border-neutral-200 bg-neutral-50 px-3 py-2 shadow-sm dark:border-neutral-700 dark:bg-neutral-800/50 dark:shadow-black/25 lg:flex-row lg:items-center lg:justify-between",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex min-w-0 flex-wrap items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "inline-flex items-center rounded-full border border-primary-200 bg-primary-100/80 px-2.5 py-1 text-xs font-semibold uppercase tracking-wide text-primary-700 dark:border-primary-400/20 dark:bg-primary-500/15 dark:text-primary-200",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chip.Chip, {
+					variant: "soft",
+					color: "primary",
+					size: "sm",
+					className: "uppercase tracking-wide",
 					children: "Bulk actions"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 					className: "text-sm font-medium text-neutral-900 dark:text-white",
@@ -719,21 +651,14 @@ function DataTableToolbar({ searchQuery, onSearchChange, searchPlaceholder, bulk
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-wrap items-center gap-2",
-				children: [bulkActionsContent, bulkDeleteEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
+				children: [bulkActionsContent, bulkDeleteEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.Button, {
 					onClick: onBulkDeleteSelected,
-					className: "inline-flex items-center gap-2 rounded-lg border border-primary-400/30 bg-primary px-3 py-2 text-sm font-medium text-primary-foreground shadow-lg shadow-primary-500/20 transition-colors hover:bg-primary-600",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					primary: true,
+					size: "small",
+					className: "border-accent/20 px-3 py-2 text-sm text-on-accent shadow-lg shadow-accent/20 hover:bg-accent-hover hover:opacity-100",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.TrashIcon, {
 						className: "h-4 w-4",
-						fill: "none",
-						stroke: "currentColor",
-						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 2,
-							d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3m-7 0h8"
-						})
+						"aria-hidden": "true"
 					}), "Delete selected"]
 				}) : null]
 			})]
@@ -752,22 +677,9 @@ function LoadingTableState({ colSpan }) {
 		colSpan,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-col items-center gap-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-				className: "w-8 h-8 animate-spin text-primary-500",
-				fill: "none",
-				viewBox: "0 0 24 24",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-					className: "opacity-25",
-					cx: "12",
-					cy: "12",
-					r: "10",
-					stroke: "currentColor",
-					strokeWidth: "4"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					className: "opacity-75",
-					fill: "currentColor",
-					d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-				})]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.LoaderIcon, {
+				className: "w-8 h-8 animate-spin text-accent",
+				"aria-hidden": "true"
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Loading data..." })]
 		})
 	});
@@ -840,6 +752,11 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 	const [selectedRowIds, setSelectedRowIds] = react.default.useState({});
 	const [rowMenuOpen, setRowMenuOpen] = react.default.useState(null);
 	const [searchQuery, setSearchQuery] = react.default.useState("");
+	const [columnVisibility, setColumnVisibility] = react.default.useState(() => Object.fromEntries(columns.map((column) => [column.id, column.visible !== false])));
+	const columnsVisibilitySignature = react.default.useMemo(() => columns.map((column) => `${column.id}:${column.visible !== false}`).join("|"), [columns]);
+	react.default.useEffect(() => {
+		setColumnVisibility(Object.fromEntries(columns.map((column) => [column.id, column.visible !== false])));
+	}, [columns, columnsVisibilitySignature]);
 	const asyncFilterOptions = useAsyncFilterOptions(externalFilterOptions, filterSelectorOpen);
 	const filterOptions = react.default.useMemo(() => {
 		return resolveFilterOptions(columns, data, externalFilterOptions, asyncFilterOptions);
@@ -849,7 +766,11 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 		externalFilterOptions,
 		asyncFilterOptions
 	]);
-	const visibleColumns = react.default.useMemo(() => columns.filter((column) => column.visible !== false), [columns]);
+	const resolvedColumns = react.default.useMemo(() => columns.map((column) => ({
+		...column,
+		visible: columnVisibility[column.id] ?? column.visible !== false
+	})), [columnVisibility, columns]);
+	const visibleColumns = react.default.useMemo(() => resolvedColumns.filter((column) => column.visible !== false), [resolvedColumns]);
 	const manualPagination = usesManualPagination(totalCount, onPaginationChange);
 	const pageCount = totalCount === void 0 ? void 0 : Math.ceil(totalCount / pagination.pageSize);
 	const filteredData = react.default.useMemo(() => {
@@ -865,7 +786,16 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 		id: col.id,
 		accessorKey: col.id,
 		header: col.label,
-		cell: (info) => info.getValue() || "-"
+		cell: (info) => {
+			const value = info.getValue();
+			if (col.renderCell) return col.renderCell({
+				value,
+				row: info.row.original,
+				rowIndex: info.row.index,
+				columnId: col.id
+			});
+			return renderDefaultCellValue(value);
+		}
 	})), [visibleColumns]);
 	const updatePagination = react.default.useCallback((updater) => {
 		setPagination((previous) => {
@@ -961,6 +891,19 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 	const handleToggleColumnMenu = react.default.useCallback(() => {
 		setColumnMenuOpen((previous) => !previous);
 	}, []);
+	const handleToggleColumnVisibility = react.default.useCallback((columnId) => {
+		setColumnVisibility((previous) => ({
+			...previous,
+			[columnId]: !(previous[columnId] ?? true)
+		}));
+		onColumnToggle?.(columnId);
+	}, [onColumnToggle]);
+	const handleShowAllColumns = react.default.useCallback(() => {
+		setColumnVisibility(Object.fromEntries(columns.map((column) => [column.id, true])));
+	}, [columns]);
+	const handleHideAllColumns = react.default.useCallback(() => {
+		setColumnVisibility(Object.fromEntries(columns.map((column) => [column.id, false])));
+	}, [columns]);
 	const handleToggleBulkSelection = react.default.useCallback(() => {
 		setBulkSelectionActive((previous) => {
 			if (previous) setSelectedRowIds({});
@@ -1024,13 +967,13 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 		className: "space-y-0",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center justify-between gap-4 py-4 px-4 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-lg mb-4",
+				className: "mb-4 flex items-center justify-between gap-4 rounded-[8px] border border-neutral-200 bg-neutral-50 px-4 py-4 dark:border-neutral-700 dark:bg-neutral-800/50",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "flex items-center gap-3 flex-wrap",
 					children: filterOptions.filter((filter) => visibleFilters.includes(filter.id)).map((filter, index) => {
 						const isActive = isFilterActive(activeFilters[filter.id]);
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: `min-w-[200px] ${index > 0 ? "pl-3 border-l border-neutral-200 dark:border-neutral-600" : ""}`,
+							className: `min-w-[200px] ${index > 0 ? "border-l border-neutral-200 pl-3 dark:border-neutral-600" : ""}`,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterFieldControl, {
 								filter,
 								value: activeFilters[filter.id],
@@ -1047,17 +990,9 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
 								onClick: handleToggleFilterSelector,
 								title: "Add filter",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-									className: "w-5 h-5",
-									fill: "none",
-									stroke: "currentColor",
-									strokeWidth: 2,
-									viewBox: "0 0 24 24",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										d: "M3 4h18l-7 8v6l-4 2v-8L3 4z"
-									})
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.FilterIcon, {
+									className: TABLE_COMPLEX_ICON_CLASS_NAME,
+									"aria-hidden": "true"
 								})
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterDropdown, {
 								isOpen: filterSelectorOpen,
@@ -1075,21 +1010,9 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 							onClick: handleResetFilters,
 							disabled: !hasActiveFilters,
 							title: "Clear filters",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-								className: "w-5 h-5",
-								fill: "none",
-								stroke: "currentColor",
-								strokeWidth: 2,
-								viewBox: "0 0 24 24",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									d: "M3 4h18l-7 8v6l-4 2v-8L3 4z"
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									d: "M17 17l4 4m0-4l-4 4"
-								})]
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.FilterXIcon, {
+								className: TABLE_COMPLEX_ICON_CLASS_NAME,
+								"aria-hidden": "true"
 							})
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1097,38 +1020,18 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
 								onClick: handleToggleProfileMenu,
 								title: "Filter profiles",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-									className: "w-5 h-5",
-									fill: "none",
-									stroke: "currentColor",
-									strokeWidth: 2,
-									viewBox: "0 0 24 24",
-									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-											cx: "9",
-											cy: "7",
-											r: "3"
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-											strokeLinecap: "round",
-											strokeLinejoin: "round",
-											d: "M3 21v-2a4 4 0 014-4h4"
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-											strokeLinecap: "round",
-											strokeLinejoin: "round",
-											d: "M15 12h6l-3 3.5v2.5l-1.5 1v-3.5L15 12z"
-										})
-									]
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.FilterProfileIcon, {
+									className: TABLE_COMPLEX_ICON_CLASS_NAME,
+									"aria-hidden": "true"
 								})
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterDropdown, {
 								isOpen: profileMenuOpen,
 								onClose: () => setProfileMenuOpen(false),
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: "p-2 min-w-48",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 										onClick: handleOpenProfile,
-										className: "w-full text-left px-4 py-3 text-primary-500 font-medium hover:bg-neutral-50 dark:hover:bg-neutral-700 rounded-lg border-2 border-dashed border-primary-300",
+										className: "w-full justify-start border-2 border-dashed border-accent/40 bg-transparent px-4 py-3 text-left text-sm font-medium text-accent shadow-none hover:bg-accent-subtle hover:opacity-100",
 										children: "Save new filter profile"
 									})
 								})
@@ -1138,7 +1041,7 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "bg-white dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden",
+				className: "bg-background-secondary rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableToolbar, {
 						searchQuery,
@@ -1155,8 +1058,10 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 						columnMenuOpen,
 						onToggleColumnMenu: handleToggleColumnMenu,
 						onCloseColumnMenu: () => setColumnMenuOpen(false),
-						columns,
-						onColumnToggle
+						columns: resolvedColumns,
+						onColumnToggle: handleToggleColumnVisibility,
+						onShowAllColumns: handleShowAllColumns,
+						onHideAllColumns: handleHideAllColumns
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "overflow-auto",
@@ -1164,12 +1069,12 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
 							className: "w-full min-w-[600px]",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
-								className: "sticky top-0 bg-white dark:bg-neutral-800 z-10",
+								className: "sticky top-0 z-10 bg-background-secondary",
 								children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
 									className: "border-b border-neutral-200 dark:border-neutral-700",
 									children: [
 										bulkSelectionActive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-											className: "w-12 px-4 py-3 bg-white dark:bg-neutral-800",
+											className: "w-12 px-4 py-3 bg-background-secondary",
 											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.Checkbox, {
 												"aria-label": "Select all visible rows",
 												checked: allVisibleRowsSelected,
@@ -1177,10 +1082,10 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 											})
 										}) : null,
 										headerGroup.headers.map((header) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-											className: "px-4 py-3 text-left text-sm font-semibold text-neutral-900 dark:text-white whitespace-nowrap bg-white dark:bg-neutral-800",
+											className: "bg-background-secondary px-4 py-3 text-left text-sm font-semibold text-neutral-900 dark:text-white whitespace-nowrap",
 											children: header.isPlaceholder ? null : (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
 										}, header.id)),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { className: "w-12 bg-white dark:bg-neutral-800" })
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { className: "w-12 bg-background-secondary" })
 									]
 								}, headerGroup.id))
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableRows, {
@@ -1246,4 +1151,4 @@ Object.defineProperty(exports, "FilterProfile", {
 	}
 });
 
-//# sourceMappingURL=data-table-BRcGhJDf.cjs.map
+//# sourceMappingURL=data-table-9HELVsYR.cjs.map