@povio/ui 3.4.0-rc.2 → 3.4.0-rc.22

package/dist/useTableColumnConfig-_XJr8Cor.js

@@ -0,0 +1,1638 @@
+import { t as createLucideIcon } from "./createLucideIcon-CskCrR9z.js";
+import { t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+import { t as ChevronDown } from "./chevron-down-Ciz9yP9R.js";
+import { t as ChevronUp } from "./chevron-up-CHRnDSA3.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { t as Checkbox } from "./Checkbox-DyEipBjR.js";
+import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+import { t as Typography } from "./Typography-AcUd9df8.js";
+import { t as Loader } from "./Loader-C6YkWZOO.js";
+import { InlineIconButton } from "./components/inline-icon-button.js";
+import "./i18n-C2TBJvnh.js";
+import { t as useIntersectionObserver } from "./useIntersectionObserver-DYfHnGGU.js";
+import { t as IntlUtils } from "./intl.utils-zwAFoZ0U.js";
+import { t as DateUtils } from "./date.utils-B8_QF9y6.js";
+import { f as ZodISODateTime, i as ZodEnum, l as ZodString, n as ZodBoolean, o as ZodNumber, s as ZodObject, t as ZodArray } from "./schemas-BkfyFvBp.js";
+import { t as StringUtils } from "./string.utils-BPgv6QwA.js";
+import { t as ZodUtils } from "./zod.utils-Nz_Tbo_v.js";
+import { t as Modal } from "./Modal-CkSO1C1n.js";
+import { Pagination } from "./components/pagination.js";
+import { t as logger } from "./logger-BPhG2izn.js";
+import { t as useTranslationMemo } from "./useTranslationMemo-CrZbeyBv.js";
+import { t as UIRouter } from "./router.context-DSE1y7gW.js";
+import { t as RoutingUtils } from "./routing.utils-UTQonIhB.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { createPaginatedRowModel, createSortedRowModel, flexRender, stockFeatures, tableFeatures, useTable } from "@tanstack/react-table";
+import i18next from "i18next";
+/**
+* @license lucide-react v1.28.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const GripVertical = createLucideIcon("grip-vertical", [
+	["circle", {
+		cx: "9",
+		cy: "12",
+		r: "1",
+		key: "1vctgf"
+	}],
+	["circle", {
+		cx: "9",
+		cy: "5",
+		r: "1",
+		key: "hp0tcf"
+	}],
+	["circle", {
+		cx: "9",
+		cy: "19",
+		r: "1",
+		key: "fkjjf6"
+	}],
+	["circle", {
+		cx: "15",
+		cy: "12",
+		r: "1",
+		key: "1tmaij"
+	}],
+	["circle", {
+		cx: "15",
+		cy: "5",
+		r: "1",
+		key: "19l28e"
+	}],
+	["circle", {
+		cx: "15",
+		cy: "19",
+		r: "1",
+		key: "f4zoj3"
+	}]
+]);
+//#endregion
+//#region src/components/table/table.cva.ts
+const tableRowDefinition = UIOverrides.defineConfig({
+	base: [
+		"h-9 max-h-12",
+		"hover:bg-elevation-fill-default-2",
+		"disabled:opacity-50",
+		"selected:bg-elevation-fill-default-2",
+		"hover:selected:bg-interactive-subtle-secondary-hover",
+		"data-clickable:cursor-pointer",
+		"focus-within:bg-elevation-fill-default-2"
+	],
+	config: { variants: { alternatingBackground: {
+		even: "even:bg-elevation-fill-inverted-4/5",
+		odd: "odd:bg-elevation-fill-inverted-4/5"
+	} } }
+});
+const theadDefinition = UIOverrides.defineConfig({ base: ["group/table-head sticky top-0 z-sticky data-is-sticky:shadow-2"] });
+const tableHeadRowDefinition = UIOverrides.defineConfig({ base: ["h-8 w-full"] });
+const tableHeadDataDefinition = UIOverrides.defineConfig({
+	base: ["border-b border-b-elevation-outline-default-1 border-solid px-table-header-cell-container-side-default py-table-header-cell-container-height-default text-left", "group-data-[is-sticky=true]/table-head:bg-elevation-fill-default-1"],
+	config: {
+		variants: { hasRightBorder: {
+			true: "border-l border-l-elevation-outline-default-1 border-solid",
+			false: ""
+		} },
+		defaultVariants: { hasRightBorder: true }
+	}
+});
+const tableDataDefinition = UIOverrides.defineConfig({
+	base: [
+		"relative h-0-5 overflow-hidden text-ellipsis whitespace-nowrap border-t border-t-transparent px-2",
+		"border-b border-b-elevation-outline-default-1",
+		"has-[*>[data-hovered]:not([data-disabled])]:hover:border-b-input-outlined-outline-hover",
+		"has-[*>[data-invalid]]:border-b-input-outlined-outline-error!",
+		"has-[*>[data-focused]]:border-b-input-outlined-outline-active"
+	],
+	config: {
+		variants: { hasRightBorder: {
+			true: "border-l border-l-elevation-outline-default-1",
+			false: ""
+		} },
+		defaultVariants: { hasRightBorder: true }
+	}
+});
+const tableHeaderTextDefinition = UIOverrides.defineConfig({ base: ["overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-text-default-1"] });
+const tableCellTextDefinition = UIOverrides.defineConfig({ base: ["block overflow-hidden text-ellipsis text-text-default-2"] });
+//#endregion
+//#region src/components/table/CellText.tsx
+const CellText = (props) => {
+	const uiConfig = UIConfig.useConfig();
+	const { variant = uiConfig.tableCellText.variant, size = uiConfig.tableCellText.size, children, style, className } = props;
+	const cellTextCva = UIOverrides.useCva("table.cellTextCva", tableCellTextDefinition);
+	return /* @__PURE__ */ jsx(Typography, {
+		className: cellTextCva({ className }),
+		as: "span",
+		variant,
+		size,
+		style,
+		"data-rac": true,
+		children
+	});
+};
+//#endregion
+//#region src/components/table/HeaderText.tsx
+const HeaderText = (props) => {
+	const uiConfig = UIConfig.useConfig();
+	const { variant = uiConfig.tableHeaderText.variant, size = uiConfig.tableHeaderText.size, children, style, className } = props;
+	const headerTextCva = UIOverrides.useCva("table.headerTextCva", tableHeaderTextDefinition);
+	return /* @__PURE__ */ jsx(Typography, {
+		className: headerTextCva({ className }),
+		as: "span",
+		variant,
+		size,
+		style,
+		children
+	});
+};
+//#endregion
+//#region src/hooks/useTableNav.ts
+const Selectors = {
+	Cell: "[role=\"cell\"],[role=\"gridcell\"],[role=\"columnheader\"],[role=\"rowheader\"],td,th",
+	Row: "[role=\"row\"],tr",
+	RowGroup: "[role=\"rowgroup\"],thead,tbody,tfoot",
+	/** Selector from here: https://github.com/Shopify/polaris/blob/main/polaris-react/src/utilities/focus.ts#L10 */
+	Focusable: "a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not([aria-disabled=\"true\"]):not([tabindex=\"-1\"]):not(:disabled),*[tabindex]"
+};
+var DataGridNav = class {
+	constructor(config = {}) {
+		this.keys = [];
+		this.activeCell = null;
+		this.debugLog = (functionName, message) => {
+			if (this.debug) logger.info(`[${functionName}]: ${message}`);
+		};
+		const { selectors = {}, pageUpDown, debug = false } = config;
+		this.selectors = {
+			...Selectors,
+			...selectors
+		};
+		this.pageUpDown = pageUpDown;
+		this.keys = [];
+		this.debug = debug;
+		this.disabled = false;
+	}
+	/**
+	* Disables the keyboard listener in cases
+	* that elements inside the grid need to use
+	* arrows keys etc., like select dropdowns
+	*/
+	disable() {
+		this.disabled = true;
+	}
+	/**
+	* Enables the keyboard listeners
+	*/
+	enable() {
+		this.disabled = false;
+	}
+	isFocusable(el) {
+		return el instanceof HTMLElement || el instanceof SVGElement;
+	}
+	getActiveCell() {
+		return this.activeCell;
+	}
+	/** Used as a keyboard listener for key up */
+	tableKeyUp() {
+		this.keys = [];
+	}
+	/** Used as a keyboard listener for key down */
+	tableKeyDown(e) {
+		if (this.disabled) return;
+		/**
+		* Avoid page scrolling etc.
+		* Enable default behavior for:
+		* Tab, Shift + Tab
+		* TODO: Actually it will be better to just prevent
+		* in ArrowKeys and PageKeys maybe?
+		* Or should the consumer stop propagation?!
+		* Cannot work with preventDefault as it will
+		* first capture the event from an input in cell for example
+		*/
+		if ("ArrowDown" === e.key || "ArrowUp" === e.key || "ArrowLeft" === e.key || "ArrowRight" === e.key) e.preventDefault();
+		/**
+		* Add key to the stack if it's
+		* not the same with the last (long press)
+		*/
+		if (this.keys.length === 0 || this.keys[this.keys.length - 1] !== e.key) this.keys.push(e.key);
+		/**
+		* Need to check if we are inside a grid cell
+		* or not to enable/disable Grid Navigation
+		*/
+		if (!(e.target instanceof Element)) return;
+		const cell = e.target.parentElement?.closest(`${this.selectors.Cell},${this.selectors.Row}`);
+		if (!cell) return;
+		if (cell.matches(this.selectors.Cell)) this.cellNavigation(e);
+		else this.gridNavigation(e);
+	}
+	/**
+	* Handles the navigation inside a cell
+	*/
+	cellNavigation(e) {
+		if (!(e.target instanceof Element)) return;
+		/**
+		* Keys: Escape
+		* Restore grid navigation
+		*/
+		if (e.key === "Escape") {
+			const cell = e.target.closest(this.selectors.Cell);
+			if (cell && this.isFocusable(cell)) {
+				cell.focus();
+				return;
+			}
+		}
+		/**
+		* Keys: ArrowRight, ArrowDown
+		* Move to the next focusable cell, or the first one
+		*
+		* Arrow Down disabled:
+		* https://github.com/w3c/aria-practices/issues/2739#issuecomment-1613538972
+		*/
+		if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+			const cell = e.target.closest(this.selectors.Cell);
+			if (!cell) return;
+			const focusableWidgets = [...cell.querySelectorAll(this.selectors.Focusable)];
+			const widgetIdx = focusableWidgets.findIndex((el) => el === e.target);
+			const widgetToFocus = focusableWidgets[widgetIdx === focusableWidgets.length - 1 ? 0 : widgetIdx + 1];
+			if (this.isFocusable(widgetToFocus)) widgetToFocus.focus();
+			return;
+		}
+		/**
+		* Keys: ArrowLeft, ArrowUp
+		* Move to the previous focusable cell, or the last one
+		*
+		* Arrow Up disabled:
+		* https://github.com/w3c/aria-practices/issues/2739#issuecomment-1613538972
+		*/
+		if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+			const cell = e.target.closest(this.selectors.Cell);
+			if (!cell) return;
+			const focusableWidgets = [...cell.querySelectorAll(this.selectors.Focusable)];
+			const widgetIdx = focusableWidgets.findIndex((el) => el === e.target);
+			const widgetToFocus = focusableWidgets[widgetIdx === 0 ? focusableWidgets.length - 1 : widgetIdx - 1];
+			if (this.isFocusable(widgetToFocus)) widgetToFocus.focus();
+		}
+	}
+	/**
+	* Handles the navigation outside a cell
+	* on the grid level
+	*/
+	gridNavigation(e) {
+		const { target } = e;
+		if (!(e.target instanceof Element)) return;
+		if (!(target instanceof Element)) return;
+		if (this.keys.length === 1) {
+			/**
+			* Keys: Enter
+			* Should move focus inside the cell to the first focusable element:
+			* https://www.w3.org/WAI/ARIA/apg/patterns/grid/#gridNav_inside
+			*/
+			if (/^[a-zA-Z0-9]$/.test(e.key)) {
+				const cell = e.target.querySelector(this.selectors.Focusable);
+				if (cell && this.isFocusable(cell) && cell instanceof HTMLInputElement) {
+					cell.focus();
+					cell.value = `${cell.value}${e.key}`;
+					e.preventDefault();
+				}
+				return;
+			}
+			if (e.key === "Backspace") {
+				const cell = e.target.querySelector(this.selectors.Focusable);
+				if (cell && this.isFocusable(cell) && cell instanceof HTMLInputElement) {
+					const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+					if (nativeInputValueSetter) {
+						nativeInputValueSetter.call(cell, "");
+						const ev = new Event("input", { bubbles: true });
+						cell.dispatchEvent(ev);
+					}
+				}
+				return;
+			}
+			if (e.key === "Enter") {
+				const cell = e.target.querySelector(this.selectors.Focusable);
+				if (cell && this.isFocusable(cell)) {
+					if (cell.getAttribute("data-type") === "select-trigger") {
+						cell.click();
+						return;
+					}
+					cell.focus();
+					e.preventDefault();
+				}
+				return;
+			}
+			/**
+			* Keys: ArrowLeft, ArrowRight
+			* Should move focus to the next/previous cell
+			*/
+			if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+				const direction = e.key === "ArrowLeft" ? "prev" : "next";
+				const cell = e.target.closest(this.selectors.Cell);
+				let nextCell = null;
+				if (direction === "next" && cell?.nextElementSibling instanceof HTMLElement) nextCell = cell.nextElementSibling;
+				if (direction === "prev" && cell?.previousElementSibling instanceof HTMLElement) nextCell = cell.previousElementSibling;
+				if (nextCell && this.isFocusable(nextCell)) {
+					nextCell.focus();
+					e.preventDefault();
+				}
+			}
+			/**
+			* Keys: Up,Down
+			* Should move focus to the same column of the next/previous row
+			*/
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+				this.verticalCellNavigation(e);
+				return;
+			}
+			/**
+			* Keys: PageUp, PageDown
+			* Should move focus to the first/last row
+			* or a predefined number of rows if user provides a value
+			*/
+			if (e.key === "PageUp" || e.key === "PageDown") {
+				this.pageCellNavigation(e);
+				return;
+			}
+			/**
+			* Keys: Home, End
+			* Should move focus to the first/last cell of the current row
+			*/
+			if (e.key === "Home" || e.key === "End") {
+				const rowChildren = [...e.target.closest(this.selectors.Row)?.children || []];
+				if (e.key === "End") rowChildren.reverse();
+				this.focusOnFirstCell(rowChildren);
+			}
+		} else {
+			/**
+			* Keys: Control + Home, Control + End
+			* Should move focus to the first/last cell of the first/last row
+			*/
+			const [firstKey, secondKey] = this.keys;
+			if (firstKey === "Control" && (secondKey === "Home" || secondKey === "End")) {
+				const siblings = e.target.closest(this.selectors.Row).parentElement?.children;
+				if (!siblings) return;
+				const rowChildren = [...(secondKey === "Home" ? siblings[0] : siblings[siblings.length - 1])?.children || []];
+				if (secondKey === "End") rowChildren.reverse();
+				this.focusOnFirstCell(rowChildren);
+			}
+		}
+	}
+	pageCellNavigation(e) {
+		if (!(e.target instanceof Element)) return;
+		const row = e.target.closest(this.selectors.Row);
+		const cell = e.target.closest(this.selectors.Cell);
+		if (row && cell) {
+			const position = this.getColumnIndex(cell);
+			if (position === void 0) return;
+			const direction = e.key === "PageUp" ? "prev" : "next";
+			const siblings = row.parentElement?.children;
+			if (!siblings) return;
+			let destinationRow;
+			if (this.pageUpDown) {
+				const methodClbk = direction === "prev" ? "previousSibling" : "nextSibling";
+				let sibling = row[methodClbk];
+				if (sibling === null) return;
+				let lastVisitedSibling = sibling;
+				for (let i = 0; i < this.pageUpDown - 1 && sibling; i++) {
+					sibling = sibling[methodClbk];
+					if (sibling) lastVisitedSibling = sibling;
+				}
+				destinationRow = sibling || lastVisitedSibling;
+			} else destinationRow = direction === "prev" ? siblings[0] : siblings[siblings.length - 1];
+			if (!destinationRow || !(destinationRow instanceof Element)) return;
+			const child = destinationRow.children[position];
+			if (child && this.isFocusable(child)) child.focus();
+		}
+	}
+	verticalCellNavigation(e) {
+		if (!(e.target instanceof Element)) return;
+		const row = e.target.closest(this.selectors.Row);
+		const cell = e.target.closest(this.selectors.Cell);
+		if (row && cell) {
+			const cellPosition = this.getColumnIndex(cell);
+			const rowPosition = this.getRowIndex(row);
+			if (cellPosition === void 0 || rowPosition === void 0) return;
+			const direction = e.key === "ArrowUp" ? "prev" : "next";
+			/** Find previous rowgroup and focus on the proper cell */
+			if (rowPosition === 0 && direction === "prev") {
+				const currentRowGroup = row.parentElement?.closest(this.selectors.RowGroup);
+				const siblingRowGroups = [...currentRowGroup?.parentElement?.children || []];
+				const currentRowGroupIdx = siblingRowGroups.findIndex((el) => el === currentRowGroup);
+				if (currentRowGroupIdx !== 0) {
+					const rows = [...siblingRowGroups[currentRowGroupIdx - 1].querySelectorAll(this.selectors.Row)];
+					const child = rows[rows.length - 1].children[cellPosition];
+					if (child && this.isFocusable(child)) child.focus();
+					return;
+				}
+			}
+			/** Find next rowgroup and focus on the proper cell */
+			if (rowPosition === [...row.parentElement?.querySelectorAll(this.selectors.Row) || []].length - 1 && direction === "next") {
+				const currentRowGroup = row.parentElement?.closest(this.selectors.RowGroup);
+				const siblingRowGroups = [...currentRowGroup?.parentElement?.children || []];
+				const currentRowGroupIdx = siblingRowGroups.findIndex((el) => el === currentRowGroup);
+				if (currentRowGroupIdx !== siblingRowGroups.length - 1) {
+					const child = [...siblingRowGroups[currentRowGroupIdx + 1].querySelectorAll(this.selectors.Row)][0].children[cellPosition];
+					if (child && this.isFocusable(child)) child.focus();
+					return;
+				}
+				return;
+			}
+			/** Navigation in the same rowgroup */
+			const destinationRow = this.findUntil(direction, row, this.selectors.Row);
+			if (!destinationRow) return;
+			const child = destinationRow.children[cellPosition];
+			if (child && this.isFocusable(child)) child.focus();
+		}
+	}
+	/**
+	* Sending a row `Element` and then the first cell will be focused.
+	*
+	* If you want to focus the last cell then the row children can be passed in
+	* reversed order
+	*/
+	focusOnFirstCell(el) {
+		for (let i = 0; i < el.length; i++) {
+			const child = el[i];
+			if (this.isFocusable(child)) {
+				child.focus();
+				return;
+			}
+		}
+	}
+	/**
+	* Get the column index of a `cell` based on the first `row` parent.
+	* `cellIndex` could be used, but it's not supported in HTML tables.
+	*/
+	getColumnIndex(cell) {
+		let position = 0;
+		const siblings = cell?.parentNode?.children;
+		if (!siblings) return;
+		while (cell !== siblings[position] && siblings[position] !== void 0) position++;
+		if (siblings[position] === void 0) return;
+		return position;
+	}
+	/**
+	* Get the row index of a `row` based
+	* on its sibling rows
+	*/
+	getRowIndex(row) {
+		let position = 0;
+		const siblings = row?.parentNode?.children;
+		if (!siblings) return;
+		while (row !== siblings[position] && siblings[position] !== void 0) position++;
+		if (siblings[position] === void 0) return;
+		return position;
+	}
+	/**
+	* Equivalent to prevUntil/nextUntil in jQuery
+	* https://api.jquery.com/prevUntil/
+	*/
+	findUntil(direction, el, matchSelector, exitSelector) {
+		let element = el;
+		const method = direction === "next" ? "nextSibling" : "previousSibling";
+		while (element[method]) {
+			const sibling = element[method];
+			if (!sibling) return null;
+			if (exitSelector && sibling instanceof Element && sibling.matches(exitSelector)) return null;
+			if (sibling instanceof Element && sibling.matches(matchSelector)) return sibling;
+			element = sibling;
+		}
+		return null;
+	}
+};
+function useTableNav(options) {
+	const nav = new DataGridNav(options);
+	return {
+		listeners: {
+			onKeyDown: (e) => nav.tableKeyDown(e),
+			onKeyUp: () => nav.tableKeyUp()
+		},
+		tableNav: nav
+	};
+}
+//#endregion
+//#region src/components/table/Table.tsx
+const tableFeaturesConfig = tableFeatures({
+	...stockFeatures,
+	sortedRowModel: createSortedRowModel(),
+	paginatedRowModel: createPaginatedRowModel()
+});
+const CustomCellContext = (context) => {
+	return {
+		...context,
+		original: context.row.original,
+		data: context.row.original,
+		value: context.getValue()
+	};
+};
+const renderCell = (Comp, props) => {
+	const rendered = flexRender(Comp, props);
+	return typeof rendered === "string" ? /* @__PURE__ */ jsx(CellText, { children: rendered }) : rendered;
+};
+const RowDragHandleCell = ({ rowId }) => {
+	const { attributes, listeners } = useSortable({ id: rowId });
+	return /* @__PURE__ */ jsx(InlineIconButton, {
+		...attributes,
+		...listeners,
+		className: "cursor-move p-1",
+		label: "Drag handle",
+		icon: GripVertical
+	});
+};
+const AutoDragHandleCell = ({ row }) => /* @__PURE__ */ jsx(RowDragHandleCell, { rowId: row.id });
+const DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCva, tableDataCva, hasOnClick, ...props }) => {
+	const { transform, transition, setNodeRef, isDragging } = useSortable({ id: row.id });
+	const style = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+		opacity: isDragging ? .8 : 1,
+		zIndex: isDragging ? 1 : 0,
+		position: "relative"
+	};
+	return /* @__PURE__ */ jsx("tr", {
+		ref: setNodeRef,
+		style,
+		"data-clickable": hasOnClick || row.getCanSelect() || void 0,
+		"data-selected": row.getIsSelected() || void 0,
+		className: clsx(tableRowCva(props)),
+		onClick: () => {
+			if (onRowClick) {
+				onRowClick(row.original);
+				return;
+			}
+			if (row.getCanSelect()) row.toggleSelected();
+		},
+		onDoubleClick: () => onDoubleClick?.(row.original),
+		children: row.getVisibleCells().map((cell, cellIndex) => {
+			const columnMeta = cell.column.columnDef.meta ?? {};
+			return /* @__PURE__ */ jsx("td", {
+				tabIndex: -1,
+				className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta.cellClass, columnMeta.width),
+				children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+			}, cell.id);
+		})
+	});
+};
+const Table$1 = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange, ...props }) => {
+	const tableRowCva = UIOverrides.useCva("table.rowCva", tableRowDefinition);
+	const theadCva = UIOverrides.useCva("table.theadCva", theadDefinition);
+	const tableHeadRowCva = UIOverrides.useCva("table.headRowCva", tableHeadRowDefinition);
+	const tableHeadDataCva = UIOverrides.useCva("table.headDataCva", tableHeadDataDefinition);
+	const tableDataCva = UIOverrides.useCva("table.dataCva", tableDataDefinition);
+	const ref = useRef(null);
+	const { listeners } = useTableNav();
+	const data = useMemo(() => items ?? [], [items]);
+	const [internalSelectedRows, setInternalSelectedRows] = useState({});
+	const { rowSelection, handleRowSelectionChange } = useMemo(() => {
+		const hasExternalRowSelection = defaultSelectedRows !== void 0 && onRowSelectionChange !== void 0;
+		return {
+			rowSelection: hasExternalRowSelection ? defaultSelectedRows : internalSelectedRows,
+			handleRowSelectionChange: hasExternalRowSelection ? onRowSelectionChange : setInternalSelectedRows
+		};
+	}, [
+		defaultSelectedRows,
+		onRowSelectionChange,
+		internalSelectedRows
+	]);
+	const baseColumns = useMemo(() => typeof columns === "function" ? columns(i18next.t) : columns, [columns]);
+	const tableColumns = useMemo(() => {
+		if (enableDragDrop && getRowId) return [{
+			id: "drag-handle",
+			header: "",
+			meta: { width: "w-12" },
+			cell: AutoDragHandleCell,
+			enableSorting: false
+		}, ...baseColumns];
+		return baseColumns;
+	}, [
+		baseColumns,
+		enableDragDrop,
+		getRowId
+	]);
+	const [isSticky, setIsSticky] = useState(false);
+	const onIntersectionChange = useCallback((entry) => {
+		setIsSticky(entry.intersectionRatio < 1);
+	}, []);
+	const { ref: stickyRef } = useIntersectionObserver({ onIntersectionChange });
+	const table = useTable({
+		features: tableFeaturesConfig,
+		data,
+		columns: tableColumns,
+		state: {
+			sorting,
+			columnOrder,
+			columnVisibility,
+			rowSelection
+		},
+		rowCount: items.length,
+		manualPagination: true,
+		onColumnOrderChange: setColumnOrder,
+		onColumnVisibilityChange: setColumnVisibility,
+		onSortingChange: setSorting,
+		onRowSelectionChange: handleRowSelectionChange,
+		manualSorting: true,
+		autoResetPageIndex: false,
+		autoResetExpanded: false,
+		defaultColumn: { sortDescFirst: true },
+		enableRowSelection,
+		enableMultiRowSelection,
+		getRowId: getRowId ? (row) => String(getRowId(row)) : void 0
+	});
+	const dataIds = useMemo(() => {
+		if (!enableDragDrop || !getRowId) return [];
+		return data.map((item) => getRowId(item));
+	}, [
+		data,
+		enableDragDrop,
+		getRowId
+	]);
+	const handleDragEnd = useCallback((event) => {
+		const { active, over } = event;
+		if (!active || !over || active.id === over.id) return;
+		if (getRowId && (onReorder || onDragEnd)) {
+			if (onReorder) {
+				const oldIndex = items.findIndex((item_0) => getRowId(item_0) === active.id);
+				const newIndex = items.findIndex((item_1) => getRowId(item_1) === over.id);
+				if (oldIndex !== -1 && newIndex !== -1) onReorder(arrayMove(items, oldIndex, newIndex));
+			}
+			onDragEnd?.(event);
+		}
+	}, [
+		onDragEnd,
+		onReorder,
+		items,
+		getRowId
+	]);
+	const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+	const selectedRows = table.getSelectedRowModel().rows;
+	const columnCount = table.getHeaderGroups()[0].headers.length;
+	const isAnyRowSelected = selectedRows.length > 0 && !!ActionHeader;
+	const hasOnClick = !!onRowClick || !!onDoubleClick;
+	const tableElement = /* @__PURE__ */ jsxs("table", {
+		className: clsx("w-full", className),
+		...listeners,
+		children: [/* @__PURE__ */ jsxs("thead", {
+			className: clsx(theadCva({})),
+			"data-is-sticky": isSticky || void 0,
+			children: [/* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", {
+				ref: stickyRef,
+				className: "-mt-px block"
+			}) }), table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", {
+				className: clsx(tableHeadRowCva({})),
+				children: headerGroup.headers.filter((header) => {
+					if (isAnyRowSelected && header.index > 0) return false;
+					return header.column.getIsVisible();
+				}).map((header_0, index) => {
+					const columnMeta = header_0.column.columnDef.meta ?? {};
+					return /* @__PURE__ */ jsx("th", {
+						colSpan: isAnyRowSelected ? columnCount : header_0.colSpan,
+						tabIndex: -1,
+						className: clsx(tableHeadDataCva({ hasRightBorder: index > 0 && showCellBorder }), columnMeta.headerClass, columnMeta.width),
+						children: isAnyRowSelected ? /* @__PURE__ */ jsx(ActionHeader, { table }) : /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-label": "Sort column",
+							className: clsx("flex select-none items-center gap-1 text-text-default-1", header_0.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default", columnMeta.sortClass),
+							onClick: header_0.column.getToggleSortingHandler(),
+							children: [typeof header_0.column.columnDef.header === "function" ? flexRender(header_0.column.columnDef.header, header_0.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header_0.column.columnDef.header }), {
+								asc: /* @__PURE__ */ jsx(ChevronUp, {
+									width: 18,
+									height: 18
+								}),
+								desc: /* @__PURE__ */ jsx(ChevronDown, {
+									width: 18,
+									height: 18
+								})
+							}[header_0.column.getIsSorted()] ?? null]
+						})
+					}, header_0.id);
+				})
+			}, headerGroup.id))]
+		}), /* @__PURE__ */ jsx("tbody", {
+			ref,
+			className: "relative",
+			children: enableDragDrop ? /* @__PURE__ */ jsx(SortableContext, {
+				items: dataIds,
+				strategy: verticalListSortingStrategy,
+				children: table.getRowModel().rows.map((row_0) => /* @__PURE__ */ jsx(DraggableRow, {
+					row: row_0,
+					showCellBorder,
+					onRowClick,
+					onDoubleClick,
+					tableRowCva,
+					tableHeadDataCva,
+					tableDataCva,
+					hasOnClick,
+					...props
+				}, row_0.id))
+			}) : table.getRowModel().rows.map((row_1) => {
+				return /* @__PURE__ */ jsx("tr", {
+					className: clsx(tableRowCva({ ...props })),
+					onClick: () => {
+						if (onRowClick) {
+							onRowClick(row_1.original);
+							return;
+						}
+						if (row_1.getCanSelect()) row_1.toggleSelected();
+					},
+					onDoubleClick: () => onDoubleClick?.(row_1.original),
+					"data-clickable": hasOnClick || row_1.getCanSelect() || void 0,
+					"data-selected": row_1.getIsSelected() || void 0,
+					children: row_1.getVisibleCells().map((cell, cellIndex) => {
+						const columnMeta_0 = cell.column.columnDef.meta ?? {};
+						return /* @__PURE__ */ jsx("td", {
+							tabIndex: -1,
+							className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta_0.cellClass, columnMeta_0.width),
+							children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+						}, cell.id);
+					})
+				}, row_1.id);
+			})
+		})]
+	});
+	if (enableDragDrop) return /* @__PURE__ */ jsx(DndContext, {
+		collisionDetection: closestCenter,
+		modifiers: [restrictToVerticalAxis],
+		onDragEnd: handleDragEnd,
+		sensors,
+		children: tableElement
+	});
+	return tableElement;
+};
+//#endregion
+//#region src/components/table/ColumnConfig.tsx
+const VisibilityCell = (t0) => {
+	const $ = c(7);
+	const { original, onToggle } = t0;
+	let t1;
+	if ($[0] !== onToggle || $[1] !== original.id) {
+		t1 = () => onToggle(original.id);
+		$[0] = onToggle;
+		$[1] = original.id;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = original.label;
+	let t3;
+	if ($[3] !== original.visible || $[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Checkbox, {
+			isSelected: original.visible,
+			onChange: t1,
+			hideLabel: true,
+			children: t2
+		});
+		$[3] = original.visible;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+};
+const getColumns = (t, handleToggleVisibility) => [{
+	id: "name",
+	header: t(($) => $.ui.table.column, { ns: "ui" }),
+	meta: { width: "flex-1" },
+	accessorKey: "label"
+}, {
+	id: "visible",
+	header: t(($) => $.ui.table.show, { ns: "ui" }),
+	meta: { width: "w-20" },
+	cell: ({ original }) => /* @__PURE__ */ jsx(VisibilityCell, {
+		original,
+		onToggle: handleToggleVisibility
+	})
+}];
+function ColumnConfigModal(t0) {
+	const $ = c(27);
+	const { isOpen, onClose, configColumns, visibleColumns, onVisibilityChange, onOrderChange } = t0;
+	const { t } = useTranslation("ui");
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[0] = t1;
+	} else t1 = $[0];
+	const [data, setData] = useState(t1);
+	let t2;
+	let t3;
+	if ($[1] !== configColumns || $[2] !== visibleColumns) {
+		t2 = () => {
+			setData(configColumns.map((column) => {
+				const columnId = column.id ?? column.accessorKey;
+				return {
+					id: columnId,
+					label: column.header,
+					visible: visibleColumns?.[columnId] ?? true
+				};
+			}));
+		};
+		t3 = [configColumns, visibleColumns];
+		$[1] = configColumns;
+		$[2] = visibleColumns;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		t2 = $[3];
+		t3 = $[4];
+	}
+	useEffect(t2, t3);
+	let t4;
+	if ($[5] !== onVisibilityChange || $[6] !== visibleColumns) {
+		t4 = (columnId_0) => {
+			const newVisible = {
+				...visibleColumns,
+				[columnId_0]: !visibleColumns[columnId_0]
+			};
+			onVisibilityChange(newVisible);
+		};
+		$[5] = onVisibilityChange;
+		$[6] = visibleColumns;
+		$[7] = t4;
+	} else t4 = $[7];
+	const handleToggleVisibility = t4;
+	let t5;
+	if ($[8] !== handleToggleVisibility) {
+		t5 = (translateFn) => getColumns(translateFn, handleToggleVisibility);
+		$[8] = handleToggleVisibility;
+		$[9] = t5;
+	} else t5 = $[9];
+	const columns = useTranslationMemo(t5);
+	let t6;
+	if ($[10] !== onOrderChange) {
+		t6 = (reorderedItems) => {
+			setData(reorderedItems);
+			onOrderChange(reorderedItems.map(_temp$2));
+		};
+		$[10] = onOrderChange;
+		$[11] = t6;
+	} else t6 = $[11];
+	const handleReorder = t6;
+	if (!isOpen) return null;
+	let t7;
+	if ($[12] !== t) {
+		t7 = t(_temp2$2);
+		$[12] = t;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Typography, {
+			as: "h2",
+			variant: "prominent-1",
+			size: "title-5",
+			children: t7
+		});
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== columns || $[17] !== data || $[18] !== handleReorder) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			className: "max-h-96 overflow-y-auto",
+			children: /* @__PURE__ */ jsx(Table$1, {
+				items: data,
+				columns,
+				showCellBorder: true,
+				className: "w-full",
+				enableDragDrop: true,
+				getRowId: _temp3,
+				onReorder: handleReorder
+			})
+		});
+		$[16] = columns;
+		$[17] = data;
+		$[18] = handleReorder;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t8 || $[21] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 p-4",
+			children: [t8, t9]
+		});
+		$[20] = t8;
+		$[21] = t9;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== isOpen || $[24] !== onClose || $[25] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Modal, {
+			isOpen,
+			onClose,
+			showCloseIcon: true,
+			children: t10
+		});
+		$[23] = isOpen;
+		$[24] = onClose;
+		$[25] = t10;
+		$[26] = t11;
+	} else t11 = $[26];
+	return t11;
+}
+function _temp3(row) {
+	return row.id;
+}
+function _temp2$2($) {
+	return $.ui.table.configureColumns;
+}
+function _temp$2(item) {
+	return item.id;
+}
+//#endregion
+//#region src/components/table/InfiniteTable.tsx
+const InfiniteTable = (t0) => {
+	const $ = c(20);
+	let fetchNextPage;
+	let hasNextPage;
+	let rest;
+	let t1;
+	if ($[0] !== t0) {
+		({hasNextPage, isFetchingNextPage: t1, fetchNextPage, ...rest} = t0);
+		$[0] = t0;
+		$[1] = fetchNextPage;
+		$[2] = hasNextPage;
+		$[3] = rest;
+		$[4] = t1;
+	} else {
+		fetchNextPage = $[1];
+		hasNextPage = $[2];
+		rest = $[3];
+		t1 = $[4];
+	}
+	const isFetchingNextPage = t1 === void 0 ? false : t1;
+	let t2;
+	if ($[5] !== fetchNextPage || $[6] !== hasNextPage || $[7] !== isFetchingNextPage) {
+		t2 = () => {
+			if (!isFetchingNextPage && hasNextPage) fetchNextPage();
+		};
+		$[5] = fetchNextPage;
+		$[6] = hasNextPage;
+		$[7] = isFetchingNextPage;
+		$[8] = t2;
+	} else t2 = $[8];
+	const handleLoadMore = t2;
+	let t3;
+	if ($[9] !== handleLoadMore) {
+		t3 = {
+			onIntersection: handleLoadMore,
+			rootMargin: "100px"
+		};
+		$[9] = handleLoadMore;
+		$[10] = t3;
+	} else t3 = $[10];
+	const { ref } = useIntersectionObserver(t3);
+	let t4;
+	if ($[11] !== rest) {
+		t4 = /* @__PURE__ */ jsx(Table$1, { ...rest });
+		$[11] = rest;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== hasNextPage || $[14] !== isFetchingNextPage || $[15] !== ref) {
+		t5 = (hasNextPage || isFetchingNextPage) && /* @__PURE__ */ jsx("div", {
+			ref,
+			className: "flex justify-center py-4",
+			children: /* @__PURE__ */ jsx(Loader, {})
+		});
+		$[13] = hasNextPage;
+		$[14] = isFetchingNextPage;
+		$[15] = ref;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== t4 || $[18] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col",
+			children: [t4, t5]
+		});
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	return t6;
+};
+//#endregion
+//#region src/components/table/PaginatedTable.tsx
+const PaginatedTable = (t0) => {
+	const $ = c(24);
+	let items;
+	let pagination;
+	let rest;
+	let setPagination;
+	let totalItems;
+	if ($[0] !== t0) {
+		({pagination, setPagination, items, totalItems, ...rest} = t0);
+		$[0] = t0;
+		$[1] = items;
+		$[2] = pagination;
+		$[3] = rest;
+		$[4] = setPagination;
+		$[5] = totalItems;
+	} else {
+		items = $[1];
+		pagination = $[2];
+		rest = $[3];
+		setPagination = $[4];
+		totalItems = $[5];
+	}
+	let t1;
+	if ($[6] !== items) {
+		t1 = items ?? [];
+		$[6] = items;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== rest || $[9] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Table$1, {
+			...rest,
+			items: t1
+		});
+		$[8] = rest;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
+	const t3 = totalItems ?? 0;
+	let t4;
+	let t5;
+	if ($[11] !== pagination || $[12] !== setPagination) {
+		t4 = (page) => setPagination({
+			...pagination,
+			pageIndex: page
+		});
+		t5 = (pageSize) => setPagination({
+			...pagination,
+			pageSize,
+			pageIndex: 1
+		});
+		$[11] = pagination;
+		$[12] = setPagination;
+		$[13] = t4;
+		$[14] = t5;
+	} else {
+		t4 = $[13];
+		t5 = $[14];
+	}
+	let t6;
+	if ($[15] !== pagination.pageIndex || $[16] !== pagination.pageSize || $[17] !== t3 || $[18] !== t4 || $[19] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Pagination, {
+			page: pagination.pageIndex,
+			pageSize: pagination.pageSize,
+			totalItems: t3,
+			onPageChange: t4,
+			onPageSizeChange: t5
+		});
+		$[15] = pagination.pageIndex;
+		$[16] = pagination.pageSize;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== t2 || $[22] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [t2, t6]
+		});
+		$[21] = t2;
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
+	return t7;
+};
+//#endregion
+//#region src/helpers/dynamicColumns.ts
+const DEFAULT_NAMESPACE = "dynamicColumns";
+const FORMAT_MAP = {
+	datetime: (value) => DateUtils.formatDate(new Date(value)),
+	dateRange: (value) => {
+		return `${DateUtils.formatDate(new Date(value.start))} - ${DateUtils.formatDate(new Date(value.end))}`;
+	},
+	enum: (value) => StringUtils.capitalize(value),
+	number: (value) => IntlUtils.getNumberFormatter(i18next.language).format(value),
+	string: (value) => String(value),
+	boolean: (value) => {
+		const key = `${DEFAULT_NAMESPACE}.${value ? "yes" : "no"}`;
+		if (i18next.exists(key)) return String(i18next.t(key));
+		return value ? "Yes" : "No";
+	}
+};
+const ZOD_TYPE_FORMAT_MAP = [
+	[ZodEnum, FORMAT_MAP.enum],
+	[ZodNumber, FORMAT_MAP.number],
+	[ZodString, FORMAT_MAP.string],
+	[ZodBoolean, FORMAT_MAP.boolean],
+	[ZodISODateTime, FORMAT_MAP.datetime]
+];
+const configValueToColumnDef = (value) => {
+	if (typeof value === "function" || typeof value === "string") return { cell: value };
+	if (typeof value === "boolean" || value === void 0) return {};
+	return value;
+};
+const convertEntriesToColumnDefs = (entries) => {
+	return entries.map(([key, value]) => [key, configValueToColumnDef(value)]);
+};
+const customConfigValueToColumnDef = (value) => {
+	if (typeof value === "string") return {
+		accessorKey: value,
+		cell: value
+	};
+	if (typeof value === "function") return { cell: value };
+	return value;
+};
+const convertCustomEntriesToColumnDefs = (entries) => {
+	return entries.map(([key, value]) => [key, customConfigValueToColumnDef(value)]);
+};
+const excludeEntries = (entries) => {
+	return entries.filter(([, value]) => value !== false && value !== void 0);
+};
+const sortColumns = (columns, orderKeys) => {
+	if (!orderKeys) return columns;
+	const wildcardIndex = orderKeys.indexOf("*");
+	if (wildcardIndex === -1) return columns.sort((columnA, columnB) => {
+		const idA = columnA.id;
+		const idB = columnB.id;
+		const orderMap = new Map(orderKeys.map((key, index) => [String(key), index]));
+		const orderA = orderMap.get(String(idA));
+		const orderB = orderMap.get(String(idB));
+		if (orderA !== void 0 && orderB !== void 0) return orderA - orderB;
+		if (orderA !== void 0 && orderB === void 0) return -1;
+		if (orderA === void 0 && orderB !== void 0) return 1;
+		return 0;
+	});
+	const beforeWildcard = orderKeys.slice(0, wildcardIndex);
+	const afterWildcard = orderKeys.slice(wildcardIndex + 1);
+	const beforeMap = new Map(beforeWildcard.map((key, index) => [String(key), index]));
+	const afterMap = new Map(afterWildcard.map((key, index) => [String(key), index]));
+	const before = [];
+	const middle = [];
+	const after = [];
+	columns.forEach((column) => {
+		const id = String(column.id);
+		if (beforeMap.has(id)) before.push(column);
+		else if (afterMap.has(id)) after.push(column);
+		else middle.push(column);
+	});
+	before.sort((a, b) => beforeMap.get(String(a.id)) - beforeMap.get(String(b.id)));
+	after.sort((a, b) => afterMap.get(String(a.id)) - afterMap.get(String(b.id)));
+	return [
+		...before,
+		...middle,
+		...after
+	];
+};
+const formatValueByType = (value, schemaType) => {
+	if (value === null || value === void 0) return null;
+	if (ZodUtils.isDateRange(schemaType)) return FORMAT_MAP.dateRange(value);
+	const unwrappedType = ZodUtils.unwrapZodType(schemaType);
+	if (unwrappedType instanceof ZodArray) {
+		if (!Array.isArray(value)) return null;
+		const elementType = unwrappedType.element;
+		return value.map((element) => formatValueByType(element, elementType)).join(", ");
+	}
+	const formatFunction = ZOD_TYPE_FORMAT_MAP.find(([zodType]) => unwrappedType instanceof zodType)?.[1];
+	if (formatFunction) return formatFunction(value);
+	return String(value);
+};
+const getNestedValue = (obj, path) => {
+	return path.split(".").reduce((current, key) => {
+		return current && typeof current === "object" ? current[key] : void 0;
+	}, obj);
+};
+const getKeyType = (schema, key) => {
+	const pathParts = key.split(".");
+	let currentType = schema.shape[pathParts[0]];
+	for (let i = 1; i < pathParts.length; i++) if (currentType instanceof ZodObject) currentType = currentType.shape[pathParts[i]];
+	else {
+		currentType = schema.shape[key];
+		break;
+	}
+	return currentType;
+};
+const getCellFunction = (schema, schemaKey, columnDef, options) => {
+	const { cell } = columnDef;
+	if (typeof cell === "function") return cell;
+	return ({ data }) => {
+		const key = typeof cell === "string" ? cell : schemaKey;
+		const value = getNestedValue(data, key);
+		const keyType = getKeyType(schema, key);
+		let finalValue = !options.disableFormatting?.includes(key) ? formatValueByType(value, keyType) : value;
+		if (options.emptyValue && !finalValue) finalValue = options.emptyValue;
+		if (options.globalWrapper) return options.globalWrapper(finalValue);
+		return finalValue;
+	};
+};
+const normalizeSortable = (sortable) => {
+	if (!sortable) return;
+	if (Array.isArray(sortable)) return sortable;
+	if (sortable instanceof ZodEnum) return Object.values(sortable.enum);
+};
+const getDefaultColumnHeader = (key, options) => {
+	const localeKey = `${options.namespace ?? DEFAULT_NAMESPACE}.${key}`;
+	if (i18next.exists(localeKey)) return String(i18next.t(localeKey));
+	return StringUtils.capitalize(key);
+};
+const overridePresetColumnsHeaders = (presetColumns, options) => {
+	const namespace = options.namespace ?? DEFAULT_NAMESPACE;
+	return presetColumns.map((columnDef) => {
+		const localeKey = `${namespace}.${columnDef.id}`;
+		const header = i18next.exists(localeKey) ? i18next.t(localeKey) : columnDef.header;
+		return {
+			...columnDef,
+			header: typeof header === "string" ? header : columnDef.header
+		};
+	});
+};
+const populateColumnDef = (schema, key, columnDef, options, sortableKeys) => {
+	const id = columnDef.id ?? key;
+	const enableSorting = columnDef.enableSorting ?? sortableKeys?.includes(id) ?? false;
+	const header = columnDef.header ?? getDefaultColumnHeader(key, options);
+	const cell = getCellFunction(schema, key, columnDef, options);
+	return {
+		...columnDef,
+		id,
+		accessorKey: key,
+		meta: {
+			width: "flex-1",
+			...options.globalMeta,
+			...columnDef.meta
+		},
+		header,
+		enableSorting,
+		cell
+	};
+};
+const populateCustomColumnDef = (schema, key, columnDef, options, sortableKeys) => {
+	const id = columnDef.id ?? key;
+	const accessorKey = columnDef.accessorKey ?? id;
+	const enableSorting = columnDef.enableSorting ?? sortableKeys?.includes(id) ?? false;
+	const header = columnDef.header ?? getDefaultColumnHeader(key, options);
+	const cell = getCellFunction(schema, key, columnDef, options);
+	return {
+		...columnDef,
+		id,
+		accessorKey,
+		meta: {
+			width: "flex-1",
+			...options.globalMeta,
+			...columnDef.meta
+		},
+		header,
+		enableSorting,
+		cell
+	};
+};
+const addMissingSchemaFields = (schema, existingColumns, options, sortableKeys) => {
+	const schemaFields = getAllSchemaKeys(schema);
+	const definedFields = new Set(existingColumns.map((col) => col.id));
+	const additionalColumns = schemaFields.filter((field) => !definedFields.has(field)).map((field) => {
+		return populateColumnDef(schema, field, {}, options, sortableKeys);
+	});
+	return [...existingColumns, ...additionalColumns];
+};
+const removeOverriddenPresetColumns = (presetColumns, options) => {
+	if (presetColumns.length === 0) return presetColumns;
+	const usedColumnsIds = Object.entries(options.columns ?? {}).map(([key, value]) => {
+		return value.id ?? key;
+	});
+	const usedCustomColumnsIds = Object.entries(options.customColumns ?? {}).map(([key, value]) => {
+		return value.id ?? key;
+	});
+	const usedIds = /* @__PURE__ */ new Set([...usedColumnsIds, ...usedCustomColumnsIds]);
+	return presetColumns.filter((column) => {
+		if (!column.id) return true;
+		return !usedIds.has(column.id);
+	});
+};
+const getAllSchemaKeys = (schema) => {
+	const keys = [];
+	const { shape } = schema;
+	const traverse = (obj, prefix = "") => {
+		Object.entries(obj).forEach(([key, value]) => {
+			const currentPath = prefix ? `${prefix}.${key}` : key;
+			keys.push(currentPath);
+			if (value instanceof ZodObject) traverse(value.shape, currentPath);
+		});
+	};
+	traverse(shape);
+	return keys;
+};
+const validateCustomColumnKeys = (schema, customColumnKeys) => {
+	const schemaKeys = getAllSchemaKeys(schema);
+	const invalidCustomColumnKeys = customColumnKeys.filter((key) => schemaKeys.includes(key));
+	if (invalidCustomColumnKeys.length > 0) throw new Error(`Invalid custom column keys: [${invalidCustomColumnKeys.join(", ")}]. Custom column keys cannot be part of the schema. Define these columns in the "columns" property instead.`);
+};
+const validateOptionKeyArray = (usedKeys, optionKeys, optionName) => {
+	if (!optionKeys) return;
+	const extraUnusedKeys = optionKeys.filter((key) => !usedKeys.has(key));
+	if (extraUnusedKeys.length > 0) throw new Error(`Found unnecessary keys in "${optionName}": [${extraUnusedKeys.join(", ")}].\n\nAll available options are: [${Array.from(usedKeys).join(", ")}].`);
+};
+const validateParams = (schema, presetColumns, options) => {
+	const { columns, customColumns, sortable, order, disableFormatting, includeAll } = options;
+	const columnKeys = Object.keys(columns ?? {});
+	const customColumnKeys = customColumns ? Object.keys(customColumns) : [];
+	const usedKeys = /* @__PURE__ */ new Set([...columnKeys, ...customColumnKeys]);
+	const presetKeys = presetColumns.map((column) => column.id).filter((id) => id !== void 0);
+	const schemaKeys = includeAll ? getAllSchemaKeys(schema) : [];
+	const allKeys = /* @__PURE__ */ new Set([
+		...presetKeys,
+		...usedKeys,
+		...schemaKeys,
+		"*"
+	]);
+	if (customColumns) validateCustomColumnKeys(schema, customColumnKeys);
+	if (Array.isArray(sortable)) validateOptionKeyArray(usedKeys, sortable, "sortable");
+	validateOptionKeyArray(allKeys, order, "order");
+	validateOptionKeyArray(usedKeys, disableFormatting, "disableFormatting");
+};
+const dynamicColumns = ({ schema, preset = [], options }) => {
+	validateParams(schema, preset, options);
+	const sortableKeys = normalizeSortable(options.sortable);
+	let entries = Object.entries(options.columns ?? {});
+	entries = excludeEntries(entries);
+	entries = convertEntriesToColumnDefs(entries);
+	const columns = entries.map(([key, value]) => {
+		return populateColumnDef(schema, key, value, options, sortableKeys);
+	});
+	let customEntries = Object.entries(options.customColumns ?? {});
+	customEntries = convertCustomEntriesToColumnDefs(customEntries);
+	const customColumns = customEntries.map(([key, value]) => {
+		return populateCustomColumnDef(schema, key, value, options, sortableKeys);
+	});
+	let presetColumns = removeOverriddenPresetColumns(preset, options);
+	if (options.overridePresetLocales) presetColumns = overridePresetColumnsHeaders(presetColumns, options);
+	const mergedColumns = [
+		...presetColumns,
+		...columns,
+		...customColumns
+	];
+	const allColumns = options.includeAll ? addMissingSchemaFields(schema, mergedColumns, options, sortableKeys) : mergedColumns;
+	return sortColumns(allColumns, options.order);
+};
+//#endregion
+//#region src/hooks/usePagination.ts
+const DEFAULT_STATE = {
+	pageIndex: 1,
+	pageSize: 20
+};
+function usePagination(defaultPagination) {
+	const $ = c(12);
+	const { replace, searchParams } = UIRouter.useUIRouter();
+	let t0;
+	if ($[0] !== defaultPagination || $[1] !== searchParams) {
+		t0 = defaultPagination ?? {
+			pageIndex: searchParams.has("page") ? Number.parseInt(searchParams.get("page") ?? "", 10) : DEFAULT_STATE.pageIndex,
+			pageSize: searchParams.has("size") ? Number.parseInt(searchParams.get("size") ?? "", 10) : DEFAULT_STATE.pageSize
+		};
+		$[0] = defaultPagination;
+		$[1] = searchParams;
+		$[2] = t0;
+	} else t0 = $[2];
+	const [pagination, setPagination] = useState(t0);
+	let t1;
+	if ($[3] !== pagination.pageIndex || $[4] !== pagination.pageSize || $[5] !== replace || $[6] !== searchParams) {
+		t1 = () => {
+			const params = new URLSearchParams(searchParams);
+			params.delete("size");
+			params.delete("page");
+			if (pagination.pageSize !== DEFAULT_STATE.pageSize) params.set("size", pagination.pageSize.toString());
+			if (pagination.pageIndex !== DEFAULT_STATE.pageIndex) params.set("page", pagination.pageIndex.toString());
+			if (params.toString() === searchParams.toString()) return;
+			replace(".", RoutingUtils.toRouterSearch(params));
+		};
+		$[3] = pagination.pageIndex;
+		$[4] = pagination.pageSize;
+		$[5] = replace;
+		$[6] = searchParams;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== pagination) {
+		t2 = [pagination];
+		$[8] = pagination;
+		$[9] = t2;
+	} else t2 = $[9];
+	useEffect(t1, t2);
+	let t3;
+	if ($[10] !== pagination) {
+		t3 = {
+			pagination,
+			setPagination,
+			pageIndex: pagination.pageIndex,
+			pageSize: pagination.pageSize
+		};
+		$[10] = pagination;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+//#endregion
+//#region src/hooks/useSorting.ts
+function useSorting(defaultSorting, t0) {
+	const $ = c(16);
+	const prefix = t0 === void 0 ? "" : t0;
+	const { replace, searchParams } = UIRouter.useUIRouter();
+	let t1;
+	if ($[0] !== defaultSorting || $[1] !== prefix || $[2] !== searchParams) {
+		t1 = defaultSorting ?? searchParams.get(`order${prefix && `-${prefix}`}`)?.split(",").map(_temp$1) ?? [];
+		$[0] = defaultSorting;
+		$[1] = prefix;
+		$[2] = searchParams;
+		$[3] = t1;
+	} else t1 = $[3];
+	const [sorting, setSorting] = useState(t1);
+	let t2;
+	if ($[4] !== sorting) {
+		t2 = sorting.map(_temp2$1).join(",");
+		$[4] = sorting;
+		$[5] = t2;
+	} else t2 = $[5];
+	const order = t2;
+	let t3;
+	if ($[6] !== order || $[7] !== prefix || $[8] !== replace || $[9] !== searchParams) {
+		t3 = () => {
+			const params = new URLSearchParams(searchParams);
+			const orderKey = prefix ? `order-${prefix}` : "order";
+			params.delete(orderKey);
+			if (order) params.set(orderKey, order);
+			if (params.toString() === searchParams.toString()) return;
+			replace(".", RoutingUtils.toRouterSearch(params));
+		};
+		$[6] = order;
+		$[7] = prefix;
+		$[8] = replace;
+		$[9] = searchParams;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== order) {
+		t4 = [order];
+		$[11] = order;
+		$[12] = t4;
+	} else t4 = $[12];
+	useEffect(t3, t4);
+	let t5;
+	if ($[13] !== order || $[14] !== sorting) {
+		t5 = {
+			sorting,
+			setSorting,
+			order
+		};
+		$[13] = order;
+		$[14] = sorting;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+function _temp2$1(field) {
+	return `${field.desc ? "-" : "+"}${field.id}`;
+}
+function _temp$1(item) {
+	if (item.startsWith("-")) return {
+		id: item.slice(1),
+		desc: true
+	};
+	if (item.startsWith("+")) return {
+		id: item.slice(1),
+		desc: false
+	};
+	return {
+		id: item,
+		desc: false
+	};
+}
+//#endregion
+//#region src/hooks/useTableColumnConfig.ts
+function sortByKeyOrder(data, orderedKeys = []) {
+	return [...data].sort((a, b) => {
+		return orderedKeys.findIndex((key) => key === (a.id ?? a.accessorKey)) - orderedKeys.findIndex((key) => key === (b.id ?? b.accessorKey));
+	});
+}
+function useTableColumnConfig(defaultColumns, t0) {
+	const $ = c(31);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const options = t1;
+	let t2;
+	if ($[2] !== defaultColumns) {
+		t2 = () => defaultColumns.reduce(_temp, {});
+		$[2] = defaultColumns;
+		$[3] = t2;
+	} else t2 = $[3];
+	const [internalVisibleColumns, setInternalVisibleColumns] = useState(t2);
+	let t3;
+	if ($[4] !== defaultColumns) {
+		t3 = () => defaultColumns.map(_temp2);
+		$[4] = defaultColumns;
+		$[5] = t3;
+	} else t3 = $[5];
+	const [internalColumnOrder, setInternalColumnOrder] = useState(t3);
+	let t4;
+	let t5;
+	if ($[6] !== options.visibleColumns) {
+		t4 = () => {
+			if (options.visibleColumns) setInternalVisibleColumns(options.visibleColumns);
+		};
+		t5 = [options.visibleColumns];
+		$[6] = options.visibleColumns;
+		$[7] = t4;
+		$[8] = t5;
+	} else {
+		t4 = $[7];
+		t5 = $[8];
+	}
+	useEffect(t4, t5);
+	let t6;
+	let t7;
+	if ($[9] !== options.columnOrder) {
+		t6 = () => {
+			if (options.columnOrder) setInternalColumnOrder(options.columnOrder);
+		};
+		t7 = [options.columnOrder];
+		$[9] = options.columnOrder;
+		$[10] = t6;
+		$[11] = t7;
+	} else {
+		t6 = $[10];
+		t7 = $[11];
+	}
+	useEffect(t6, t7);
+	let t8;
+	if ($[12] !== options) {
+		t8 = (value) => {
+			setInternalVisibleColumns(value);
+			options?.onVisibilityChange?.(value);
+		};
+		$[12] = options;
+		$[13] = t8;
+	} else t8 = $[13];
+	const handleVisibilityChange = t8;
+	let t9;
+	if ($[14] !== options) {
+		t9 = (value_0) => {
+			setInternalColumnOrder(value_0);
+			options?.onOrderChange?.(value_0);
+		};
+		$[14] = options;
+		$[15] = t9;
+	} else t9 = $[15];
+	const handleOrderChange = t9;
+	let t10;
+	if ($[16] !== defaultColumns || $[17] !== internalColumnOrder) {
+		t10 = sortByKeyOrder(defaultColumns, internalColumnOrder);
+		$[16] = defaultColumns;
+		$[17] = internalColumnOrder;
+		$[18] = t10;
+	} else t10 = $[18];
+	const configColumns = t10;
+	let t11;
+	if ($[19] !== configColumns || $[20] !== internalVisibleColumns) {
+		let t12;
+		if ($[22] !== internalVisibleColumns) {
+			t12 = (col_1) => internalVisibleColumns?.[col_1.id ?? col_1.accessorKey] ?? true;
+			$[22] = internalVisibleColumns;
+			$[23] = t12;
+		} else t12 = $[23];
+		t11 = configColumns.filter(t12);
+		$[19] = configColumns;
+		$[20] = internalVisibleColumns;
+		$[21] = t11;
+	} else t11 = $[21];
+	const columns = t11;
+	let t12;
+	if ($[24] !== columns || $[25] !== configColumns || $[26] !== handleOrderChange || $[27] !== handleVisibilityChange || $[28] !== internalColumnOrder || $[29] !== internalVisibleColumns) {
+		t12 = {
+			configColumns,
+			columns,
+			visibleColumns: internalVisibleColumns,
+			columnOrder: internalColumnOrder,
+			onVisibilityChange: handleVisibilityChange,
+			onOrderChange: handleOrderChange
+		};
+		$[24] = columns;
+		$[25] = configColumns;
+		$[26] = handleOrderChange;
+		$[27] = handleVisibilityChange;
+		$[28] = internalColumnOrder;
+		$[29] = internalVisibleColumns;
+		$[30] = t12;
+	} else t12 = $[30];
+	return t12;
+}
+function _temp2(col_0) {
+	return col_0.id ?? col_0.accessorKey;
+}
+function _temp(acc, col) {
+	const key = col.id ?? col.accessorKey;
+	acc[key] = true;
+	return acc;
+}
+//#endregion
+export { tableRowDefinition as _, PaginatedTable as a, Table$1 as c, CellText as d, tableCellTextDefinition as f, tableHeaderTextDefinition as g, tableHeadRowDefinition as h, dynamicColumns as i, useTableNav as l, tableHeadDataDefinition as m, useSorting as n, InfiniteTable as o, tableDataDefinition as p, usePagination as r, ColumnConfigModal as s, useTableColumnConfig as t, HeaderText as u };