@evolve.ui/core-components 1.0.0

package/Table-M-rANdMt.mjs

@@ -0,0 +1,495 @@
+import { ArrowUp, CaretLeft, CaretRight } from "./Icons.mjs";
+import { BodyPrimary, BodySecondary, H3 } from "./Typography/Text.mjs";
+import { IconButton } from "./IconButton.mjs";
+import { t as Checkbox } from "./ChoiceListItem-BqZ3bIj9.mjs";
+import { t as Loading } from "./Loading-BenQpF_w.mjs";
+import { i as usePagination, r as PaginationProvider, t as AdvancedPagination } from "./Pagination-DIpGKMLz.mjs";
+import { t as Select } from "./Select-BkZu8OLs.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { createContext, createElement, useCallback, useContext, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Provider, atom, useAtomValue, useSetAtom } from "jotai";
+const tableStaticsContext = createContext({
+	actionable: false,
+	backgroundColor: void 0,
+	hideDividers: false,
+	pageSizeOptions: [],
+	showColumnDividers: false,
+	stickyFirstColumn: false
+});
+atom(void 0);
+//#endregion
+//#region src/Table/components/TableShadow/TableShadow.tsx
+const showLeftStickyShadowAtom = atom(false);
+const leftStickyShadowWidthAtom = atom(0);
+/**
+* This component adds the left hand shadow to the table element for the sticky first column.
+*/
+const TableShadow = () => {
+	const { actionable, stickyFirstColumn } = useContext(tableStaticsContext);
+	const width = useAtomValue(leftStickyShadowWidthAtom);
+	const showLeftStickyShadow = useAtomValue(showLeftStickyShadowAtom);
+	return /* @__PURE__ */ jsx("div", {
+		className: "pointer-events-none absolute inset-0 overflow-hidden",
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("pointer-events-none absolute bottom-0 left-0 top-0 opacity-100 shadow-04 transition-opacity duration-300", { "opacity-0": !stickyFirstColumn || !showLeftStickyShadow }),
+			style: { width: `${actionable ? width + 48 : width}px` }
+		})
+	});
+};
+const observeFirstColumnWidth = (setLeftShadowWidth) => (ref) => {
+	if (ref) {
+		new ResizeObserver((entries) => {
+			const width = entries[0].contentRect.width;
+			setLeftShadowWidth(width);
+		}).observe(ref);
+		setLeftShadowWidth(ref.getBoundingClientRect().width);
+	}
+};
+//#endregion
+//#region src/Table/components/TableHeader/TableHeader.tsx
+function TableHeader({ actionableCheckbox, backgroundColor, columns, currentSort, defaultSortDirection, onSortChange, showTopScrollHint, sortable, stickyHeader }) {
+	const { actionable, showColumnDividers, stickyFirstColumn } = useContext(tableStaticsContext);
+	const setLeftShadowWidth = useSetAtom(leftStickyShadowWidthAtom);
+	const tableBackgroundColor = backgroundColor === "transparent" && stickyHeader ? "primary" : "transparent";
+	return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+		className: cn("relative border-b border-border-primary", {
+			"bg-background-primary": tableBackgroundColor === "primary",
+			"bg-transparent": tableBackgroundColor === "transparent",
+			"shadow-01": stickyHeader && showTopScrollHint,
+			"sticky top-0 z-[5]": stickyHeader
+		}),
+		style: { transition: stickyHeader ? "0.25s" : void 0 },
+		children: [actionable && /* @__PURE__ */ jsx("th", {
+			className: cn("hui-text-label-strong bg-background-primary p-0 transition-colors duration-200", {
+				"bg-background-primary": tableBackgroundColor === "primary",
+				"bg-transparent": tableBackgroundColor === "transparent",
+				"border-r border-border-secondary last:border-r-0": showColumnDividers
+			}),
+			scope: "col",
+			style: stickyFirstColumn ? {
+				left: 0,
+				paddingLeft: "14px",
+				position: "sticky",
+				zIndex: 1
+			} : {},
+			children: actionableCheckbox
+		}, "actionable"), columns.map((column, i) => {
+			const newDirection = currentSort && currentSort[0] === column.key ? currentSort[1] === "ascending" ? "descending" : "ascending" : defaultSortDirection;
+			let ariaSort = void 0;
+			if (currentSort && currentSort[0] === column.key) ariaSort = currentSort[1];
+			else if (column.sortable) ariaSort = "none";
+			const isStickyFirstColumn = stickyFirstColumn && i === 0;
+			return /* @__PURE__ */ jsx("th", {
+				"aria-sort": ariaSort,
+				className: cn("hui-text-label-strong relative p-0 transition-colors duration-200", {
+					"active:bg-background-pressed": sortable && column.sortable,
+					"bg-background-primary": tableBackgroundColor === "primary",
+					"bg-transparent": tableBackgroundColor === "transparent",
+					"border-r border-border-secondary last:border-r-0": showColumnDividers,
+					"group cursor-pointer": sortable && column.sortable,
+					"hover:bg-background-hover": sortable && column.sortable,
+					"sticky z-[1] shadow-02": isStickyFirstColumn
+				}),
+				onClick: sortable && column.sortable && onSortChange ? () => onSortChange(column.key, newDirection) : void 0,
+				ref: i === 0 ? observeFirstColumnWidth(setLeftShadowWidth) : void 0,
+				scope: "col",
+				style: isStickyFirstColumn ? {
+					left: actionable ? "48px" : "0",
+					transform: "translateX(-1px)"
+				} : {},
+				children: /* @__PURE__ */ jsxs("span", {
+					className: cn("flex items-center gap-xs whitespace-nowrap px-sm", {
+						"justify-end": column.align === "right",
+						"justify-start": column.align !== "right"
+					}),
+					children: [column.header ?? null, sortable && column.sortable && /* @__PURE__ */ jsx(ArrowUp, {
+						className: cn("transition-all duration-200", {
+							"group-hover:rotate-0": ariaSort === "descending",
+							"group-hover:rotate-180": ariaSort === "ascending",
+							"group-hover:visible group-hover:opacity-100": ariaSort === "none",
+							"invisible opacity-0": ariaSort === "none",
+							"visible opacity-100": ariaSort === "ascending",
+							"visible rotate-180 opacity-100": ariaSort === "descending"
+						}),
+						size: "sm"
+					})]
+				})
+			}, i);
+		})]
+	}) });
+}
+//#endregion
+//#region src/Table/components/TablePagination/components/ItemCountDisplay/ItemCountDisplay.tsx
+const ItemCountDisplay = () => {
+	const { itemCount, page, pageSize } = usePagination();
+	if (pageSize === "all") return /* @__PURE__ */ jsxs(BodyPrimary, { children: [itemCount, " Items"] });
+	return /* @__PURE__ */ jsx(BodyPrimary, { children: `${(page - 1) * pageSize + 1} - ${Math.min(page * pageSize, itemCount)} of ${itemCount} Items` });
+};
+//#endregion
+//#region src/Table/components/TablePagination/components/ItemCountSelect/ItemCountSelect.tsx
+const ItemCountSelect = () => {
+	const { pageSize, setPageSize } = usePagination();
+	const { pageSizeOptions } = useContext(tableStaticsContext);
+	return /* @__PURE__ */ jsx(Select, {
+		autoComplete: "off",
+		className: "w-[232px]",
+		defaultValue: pageSize,
+		isInsideLabel: true,
+		labelText: "Items per page:",
+		onChange: (event) => setPageSize(event?.value),
+		options: useMemo(() => {
+			return pageSizeOptions.map((option) => {
+				return {
+					label: option.toString(),
+					value: option
+				};
+			});
+		}, [pageSizeOptions]),
+		small: true,
+		usePortalMenu: true,
+		value: {
+			label: pageSize,
+			value: pageSize.toString()
+		}
+	});
+};
+//#endregion
+//#region src/Table/components/TablePagination/components/TablePaginator/components/PageSelect/PageSelect.tsx
+const PageSelect = () => {
+	const { goToPage, page, pageCount } = usePagination();
+	const options = useMemo(() => new Array(pageCount).fill(0).map((_, i) => ({
+		label: `${i + 1}`,
+		value: i + 1
+	})), [pageCount]);
+	return /* @__PURE__ */ jsx(Select, {
+		autoComplete: "off",
+		className: "pl-sm",
+		defaultValue: pageCount,
+		isInsideLabel: true,
+		labelText: "Page",
+		onChange: (event) => goToPage(event?.value),
+		options,
+		small: true,
+		usePortalMenu: true,
+		value: options[page - 1]
+	});
+};
+//#endregion
+//#region src/Table/components/TablePagination/components/TablePaginator/TablePaginator.tsx
+const Pagination = () => {
+	const { goToPage, page, pageCount } = usePagination();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center",
+		children: [
+			/* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Previous Page",
+				disabled: page === 1,
+				icon: CaretLeft,
+				onClick: () => {
+					if (page !== 1) goToPage(page - 1);
+				},
+				size: "sm"
+			}),
+			/* @__PURE__ */ jsx(PageSelect, {}),
+			" ",
+			/* @__PURE__ */ jsxs(BodyPrimary, {
+				className: "whitespace-nowrap pl-xs pr-sm",
+				children: [
+					"of ",
+					pageCount,
+					" pages"
+				]
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Next Page",
+				disabled: page === pageCount,
+				icon: CaretRight,
+				onClick: () => {
+					if (page !== pageCount) goToPage(page + 1);
+				},
+				size: "sm"
+			})
+		]
+	});
+};
+//#endregion
+//#region src/Table/components/TablePagination/TablePagination.tsx
+const TableControls = () => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between pt-4",
+		"data-hui-id": "TableControls",
+		children: [
+			/* @__PURE__ */ jsx(ItemCountSelect, {}),
+			/* @__PURE__ */ jsx(ItemCountDisplay, {}),
+			/* @__PURE__ */ jsx(Pagination, {})
+		]
+	});
+};
+TableControls.displayName = "TableControls";
+//#endregion
+//#region src/Table/components/TableRow/components/TableRowCell/TableRowCell.tsx
+const TableRowCell = ({ backgroundColor, column, columnIndex, item }) => {
+	const { actionable, showColumnDividers, stickyFirstColumn } = useContext(tableStaticsContext);
+	const value = item[column.key];
+	return /* @__PURE__ */ jsx("td", {
+		className: cn("whitespace-nowrap px-sm py-0", {
+			"bg-background-disabled": backgroundColor === "disabled",
+			"bg-background-primary": backgroundColor === "primary",
+			"bg-background-secondary": backgroundColor === "secondary",
+			"bg-background-subdued": backgroundColor === "subdued",
+			"bg-transparent": backgroundColor === "transparent",
+			"border-r border-border-secondary last:border-r-0": showColumnDividers,
+			"group-hover:bg-surface-200 group-active:bg-surface-300": !item.disabled,
+			relative: stickyFirstColumn && columnIndex === 0,
+			"sticky left-0 z-[2]": stickyFirstColumn && columnIndex === 0 && !actionable,
+			"sticky left-xl z-[2]": stickyFirstColumn && columnIndex === 0 && actionable,
+			"sticky-column": stickyFirstColumn && columnIndex === 0,
+			"text-left": !column.align || column.align === "left",
+			"text-right": column.align === "right"
+		}),
+		children: Boolean(column.renderItem) ? column.renderItem?.(item, column) : /* @__PURE__ */ jsx(BodySecondary, {
+			color: Boolean(item.disabled) ? "disabled" : "primary",
+			children: value
+		})
+	});
+};
+//#endregion
+//#region src/Table/components/TableRow/TableRows.tsx
+const TableRows = ({ backgroundColor = "primary", columns, data, selectedRows, zebraStripes }) => {
+	const { actionable, hideDividers, onSelectedRowsChange, showColumnDividers, stickyFirstColumn } = useContext(tableStaticsContext);
+	const onRowClick = useCallback((event) => {
+		if (actionable) event.currentTarget.querySelector("input[type=\"checkbox\"]")?.click();
+	}, [actionable]);
+	return /* @__PURE__ */ jsx("tbody", { children: useMemo(() => {
+		return data.map((item) => {
+			const renderedColumns = columns.map((column, columnIndex) => /* @__PURE__ */ jsx(TableRowCell, {
+				backgroundColor,
+				column,
+				columnIndex,
+				item
+			}, `table-row-cell-${columnIndex}`));
+			const isOdd = data.indexOf(item) % 2 !== 0;
+			const shouldShowZebraStripe = zebraStripes && isOdd;
+			const isSelectedNotDisabled = selectedRows && selectedRows.has(item.key) && !item.disabled;
+			return /* @__PURE__ */ jsxs("tr", {
+				className: cn("group relative cursor-default bg-background-primary", {
+					"bg-background-disabled": backgroundColor === "disabled",
+					"bg-background-primary": backgroundColor === "primary" && !zebraStripes,
+					"bg-background-secondary": backgroundColor === "secondary",
+					"bg-background-subdued": backgroundColor === "subdued",
+					"bg-transparent": backgroundColor === "transparent"
+				}, {
+					"[&>td]:bg-background-disabled": backgroundColor === "disabled" && shouldShowZebraStripe,
+					"[&>td]:bg-background-inverse/[0.03]": backgroundColor === "transparent" && shouldShowZebraStripe,
+					"[&>td]:bg-background-secondary": backgroundColor === "secondary" && shouldShowZebraStripe,
+					"[&>td]:bg-background-subdued": (backgroundColor === "primary" || backgroundColor === "subdued") && shouldShowZebraStripe
+				}, {
+					"!bg-background-secondary [&>td]:bg-background-secondary": isSelectedNotDisabled,
+					"border-b border-border-secondary": !hideDividers,
+					"cursor-pointer": actionable && !item.disabled
+				}),
+				"data-disabled": item.disabled ? "true" : void 0,
+				onClick: onRowClick,
+				children: [actionable && /* @__PURE__ */ jsx("td", {
+					className: cn("bg-background-primary p-0", {
+						"border-r border-border-secondary last:border-r-0": showColumnDividers,
+						"group-hover:!bg-surface-200 group-active:!bg-surface-300": !item.disabled,
+						"sticky left-0 z-[3]": stickyFirstColumn,
+						"sticky-column": stickyFirstColumn
+					}, { "bg-background-secondary": stickyFirstColumn && selectedRows && selectedRows.has(item.key) && !item.disabled }),
+					onClick: (e) => e.stopPropagation(),
+					children: /* @__PURE__ */ jsx(Checkbox.Option, {
+						checked: selectedRows ? selectedRows.has(item.key) : false,
+						className: cn("flex h-full w-xl items-center justify-center", { "group-hover:[&>svg]:!bg-surface-200 group-active:[&>svg]:!border-border-hover": !item.disabled }),
+						disabled: Boolean(item.disabled),
+						onChange: () => {
+							onSelectedRowsChange?.(item.key);
+						}
+					})
+				}, "actionable"), renderedColumns]
+			}, item.key);
+		});
+	}, [
+		actionable,
+		backgroundColor,
+		columns,
+		data,
+		hideDividers,
+		onRowClick,
+		onSelectedRowsChange,
+		selectedRows,
+		showColumnDividers,
+		stickyFirstColumn,
+		zebraStripes
+	]) });
+};
+//#endregion
+//#region src/Table/Table.tsx
+/**
+* Helper function to get background color classes based on TableBackgroundStyle
+*/
+const getBackgroundColorClasses = (backgroundColor, isZebraStripe = false) => {
+	if (!backgroundColor) return "bg-background-primary";
+	switch (backgroundColor) {
+		case "secondary": return "bg-background-secondary";
+		case "subdued": return "bg-background-subdued";
+		case "disabled": return "bg-background-disabled";
+		case "transparent": return "bg-transparent";
+		case "primary":
+			if (isZebraStripe) return "bg-background-subdued";
+			return "bg-background-primary";
+		default: return "bg-background-primary";
+	}
+};
+const Table = ({ actionable = false, backgroundColor, hideDividers = false, isAdvancedPagination, onSelectedRowsChange, pageSizeOptions = [
+	25,
+	50,
+	100
+], showColumnDividers = false, stickyFirstColumn = false, stickyHeader = false, ...props }) => {
+	const hasNoData = Boolean(props.loading) || !Boolean(props.data.length);
+	const contextValue = useMemo(() => ({
+		actionable,
+		backgroundColor,
+		hideDividers,
+		onSelectedRowsChange,
+		pageSizeOptions,
+		showColumnDividers,
+		stickyFirstColumn: stickyFirstColumn && !hasNoData
+	}), [
+		actionable,
+		backgroundColor,
+		hideDividers,
+		onSelectedRowsChange,
+		pageSizeOptions,
+		showColumnDividers,
+		stickyFirstColumn,
+		hasNoData
+	]);
+	return /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsx(tableStaticsContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(InnerTable, {
+			backgroundColor,
+			"data-hui-id": "Table",
+			hasNoData,
+			hideDividers,
+			isAdvancedPagination,
+			stickyFirstColumn,
+			stickyHeader,
+			...props
+		})
+	}) });
+};
+Table.displayName = "Table";
+const InnerTable = ({ actionableCheckbox, backgroundColor, className, columns, currentSort, data, defaultSortDirection = "descending", emptyStateHeaderText = "Empty state heading message...", emptyStateSupportingText = "Supporting message to provide further guidance on how to remedy empty state.", fillHorizontal = false, hasNoData, hideBorder = false, hideDividers = false, isAdvancedPagination, loading = false, onSortChange, pagination, rowDensity = "md", selectedRows, sortable = false, stickyFirstColumn = false, stickyHeader = false, zebraStripes = false }) => {
+	const [showRightScrollHint, setShowRightScrollHint] = useState(false);
+	const [showLeftScrollHint, setShowLeftScrollHint] = useState(false);
+	const [showTopScrollHint, setShowTopScrollHint] = useState(false);
+	const setShowLeftShadow = useSetAtom(showLeftStickyShadowAtom);
+	const handleScroll = useCallback((ref) => {
+		setShowLeftShadow(stickyFirstColumn && ref.scrollLeft > 20);
+		setShowLeftScrollHint(!stickyFirstColumn && ref.scrollLeft > 50);
+		setShowRightScrollHint(ref.scrollLeft + ref.clientWidth < ref.scrollWidth - 50);
+		setShowTopScrollHint(ref.scrollTop !== 0);
+	}, [setShowLeftShadow, stickyFirstColumn]);
+	let rowHeight = 0;
+	switch (rowDensity) {
+		case "sm":
+			rowHeight = 28;
+			break;
+		case "md":
+			rowHeight = 36;
+			break;
+		case "lg":
+			rowHeight = 48;
+			break;
+		default:
+			rowHeight = 36;
+			break;
+	}
+	const containerClasses = cn("relative max-w-full", {
+		"w-full": fillHorizontal,
+		"w-min": !fillHorizontal
+	}, className, "table-container");
+	const relativeContainerClasses = cn("relative", {
+		"border border-border-secondary": !hideBorder,
+		"border-b-0": !hideDividers && !hasNoData && !hideBorder,
+		"h-auto": !stickyHeader,
+		"h-full": stickyHeader,
+		"w-full": fillHorizontal
+	}, getBackgroundColorClasses(backgroundColor));
+	const tableScrollClasses = cn("w-full", {
+		"h-auto": !stickyHeader,
+		"h-full": stickyHeader,
+		"min-h-[220px]": loading || data.length === 0,
+		"overflow-x-auto": !hasNoData,
+		"overflow-x-hidden": hasNoData,
+		"overflow-y-auto": stickyHeader,
+		"overflow-y-visible": !stickyHeader
+	}, getBackgroundColorClasses(backgroundColor));
+	const tableClasses = cn("border-collapse", { "w-full": fillHorizontal }, getBackgroundColorClasses(backgroundColor), "[&_td]:h-[var(--row-height)] [&_th]:h-[var(--row-height)]", {
+		"[&_th]:bg-background-disabled": backgroundColor === "disabled",
+		"[&_th]:bg-background-primary": backgroundColor === "primary" || !backgroundColor,
+		"[&_th]:bg-background-secondary": backgroundColor === "secondary",
+		"[&_th]:bg-background-subdued": backgroundColor === "subdued",
+		"[&_th]:bg-transparent": backgroundColor === "transparent"
+	}, "[&::before]:pointer-events-none [&::before]:absolute [&::before]:z-[1] [&::before]:content-[\"\"]", "[&::before]:bottom-0 [&::before]:left-0 [&::before]:top-0 [&::before]:w-[48px]", "[&::before]:opacity-0 [&::before]:transition-opacity [&::before]:duration-200", "[&::before]:shadow-[8px_0px_8px_0px_rgba(0,0,0,0.1)_inset]", { "[&::before]:opacity-100": showLeftScrollHint && !hasNoData }, "[&::after]:pointer-events-none [&::after]:absolute [&::after]:z-[1] [&::after]:content-[\"\"]", "[&::after]:bottom-0 [&::after]:right-0 [&::after]:top-0 [&::after]:w-[48px]", "[&::after]:opacity-0 [&::after]:transition-opacity [&::after]:duration-200", "[&::after]:shadow-[-8px_0px_8px_0px_rgba(0,0,0,0.1)_inset]", { "[&::after]:opacity-100": showRightScrollHint && !hasNoData });
+	const emptyStateContainerClasses = cn("absolute flex w-full flex-col items-center justify-center py-2xl text-center");
+	return /* @__PURE__ */ jsxs("div", {
+		className: containerClasses,
+		style: { "--row-height": `${rowHeight}px` },
+		children: [/* @__PURE__ */ jsx("div", {
+			className: relativeContainerClasses,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: tableScrollClasses,
+				ref: (ref) => {
+					if (!ref) return;
+					ref.addEventListener("scroll", () => {
+						handleScroll(ref);
+					});
+					handleScroll(ref);
+				},
+				children: [
+					/* @__PURE__ */ jsxs("table", {
+						className: tableClasses,
+						children: [/* @__PURE__ */ jsx(TableHeader, {
+							actionableCheckbox,
+							backgroundColor,
+							columns,
+							currentSort,
+							data,
+							defaultSortDirection,
+							onSortChange,
+							showTopScrollHint,
+							sortable,
+							stickyHeader
+						}), !loading && Boolean(data.length) && /* @__PURE__ */ jsx(TableRows, {
+							backgroundColor,
+							columns,
+							data,
+							selectedRows,
+							zebraStripes
+						})]
+					}),
+					!hasNoData && /* @__PURE__ */ jsx(TableShadow, {}),
+					!loading && !Boolean(data.length) && /* @__PURE__ */ jsxs("div", {
+						className: emptyStateContainerClasses,
+						children: [/* @__PURE__ */ jsx(H3, { children: emptyStateHeaderText }), /* @__PURE__ */ jsx(BodySecondary, { children: emptyStateSupportingText })]
+					}),
+					loading && /* @__PURE__ */ jsx("div", {
+						className: emptyStateContainerClasses,
+						children: /* @__PURE__ */ jsx(Loading, { size: 32 })
+					})
+				]
+			})
+		}), pagination && !hasNoData && /* @__PURE__ */ createElement(PaginationProvider, {
+			...pagination,
+			key: pagination.key,
+			path: ""
+		}, isAdvancedPagination ? /* @__PURE__ */ jsx(AdvancedPagination, { className: "px-0 py-sm" }) : /* @__PURE__ */ jsx(TableControls, {}))]
+	});
+};
+//#endregion
+export { Table as t };
+
+//# sourceMappingURL=Table-M-rANdMt.mjs.map

package/Table-M-rANdMt.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table-M-rANdMt.mjs","names":[],"sources":["../src/Table/sharedState.ts","../src/Table/components/TableShadow/TableShadow.tsx","../src/Table/components/TableHeader/TableHeader.tsx","../src/Table/components/TablePagination/components/ItemCountDisplay/ItemCountDisplay.tsx","../src/Table/components/TablePagination/components/ItemCountSelect/ItemCountSelect.tsx","../src/Table/components/TablePagination/components/TablePaginator/components/PageSelect/PageSelect.tsx","../src/Table/components/TablePagination/components/TablePaginator/TablePaginator.tsx","../src/Table/components/TablePagination/TablePagination.tsx","../src/Table/components/TableRow/components/TableRowCell/TableRowCell.tsx","../src/Table/components/TableRow/TableRows.tsx","../src/Table/Table.tsx"],"sourcesContent":["import { atom } from 'jotai';\nimport { createContext } from 'react';\n\ntype TableStatics = {\n    actionable: boolean;\n    backgroundColor: string | undefined;\n    hideDividers: boolean;\n    onSelectedRowsChange?: (selectedRows: string) => void;\n    pageSizeOptions: number[];\n    showColumnDividers: boolean;\n    stickyFirstColumn: boolean;\n};\n\nexport const emptyTableStatics: TableStatics = {\n    actionable: false,\n    backgroundColor: undefined,\n    hideDividers: false,\n    pageSizeOptions: [],\n    showColumnDividers: false,\n    stickyFirstColumn: false,\n};\n\nexport const tableStaticsContext = createContext<TableStatics>(emptyTableStatics);\n\n/**\n * This should be the manually sorted column key.\n *\n * It is not guaranteed to match the true sorting of the table.\n */\nexport const sortedColumnKey = atom<string | undefined>(undefined);\n","import { cn } from '@evolve.ui/theme-system';\nimport { atom, useAtomValue } from 'jotai';\nimport { useContext } from 'react';\n\nimport { tableStaticsContext } from '../../sharedState';\nimport { actionableWidth } from '../../sharedStyles';\n\nexport const showLeftStickyShadowAtom = atom<boolean>(false);\nexport const leftStickyShadowWidthAtom = atom<number>(0);\n\n/**\n * This component adds the left hand shadow to the table element for the sticky first column.\n */\nexport const TableShadow = () => {\n    const { actionable, stickyFirstColumn } = useContext(tableStaticsContext);\n    const width = useAtomValue(leftStickyShadowWidthAtom);\n    const showLeftStickyShadow = useAtomValue(showLeftStickyShadowAtom);\n\n    return (\n        <div className=\"pointer-events-none absolute inset-0 overflow-hidden\">\n            <div\n                className={cn(\n                    'pointer-events-none absolute bottom-0 left-0 top-0 opacity-100 shadow-04 transition-opacity duration-300',\n                    {\n                        'opacity-0': !stickyFirstColumn || !showLeftStickyShadow,\n                    }\n                )}\n                style={{ width: `${actionable ? width + actionableWidth : width}px` }}\n            />\n        </div>\n    );\n};\n\nexport const observeFirstColumnWidth = (setLeftShadowWidth: (width: number) => void) => (ref: HTMLElement | null) => {\n    if (ref) {\n        // Add a resize observer to the first column to determine the width of the left shadow.\n        const resizeObserver = new ResizeObserver((entries) => {\n            const width = entries[0].contentRect.width;\n            setLeftShadowWidth(width);\n        });\n\n        resizeObserver.observe(ref);\n\n        setLeftShadowWidth(ref.getBoundingClientRect().width);\n    }\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useSetAtom } from 'jotai';\nimport { ReactNode, useContext } from 'react';\n\nimport { ArrowUp } from '../../../Icons';\nimport { tableStaticsContext } from '../../sharedState';\nimport { ColumnType, SortType, StaticData, TableBackgroundStyle } from '../../types';\nimport { leftStickyShadowWidthAtom, observeFirstColumnWidth } from '../TableShadow/TableShadow';\n\ninterface Props<T extends StaticData> {\n    actionableCheckbox: ReactNode;\n    backgroundColor?: TableBackgroundStyle;\n    columns: ColumnType<T>[];\n    currentSort?: [string, SortType];\n    data: T[];\n    defaultSortDirection: SortType;\n    onSortChange?: (columnKey: string, newSort: SortType) => void;\n    showTopScrollHint: boolean;\n    sortable: boolean;\n    stickyHeader: boolean;\n}\n\nexport function TableHeader<T extends StaticData>({\n    actionableCheckbox,\n    backgroundColor,\n    columns,\n    currentSort,\n    defaultSortDirection,\n    onSortChange,\n    showTopScrollHint,\n    sortable,\n    stickyHeader,\n}: Props<T>) {\n    const { actionable, showColumnDividers, stickyFirstColumn } = useContext(tableStaticsContext);\n    const setLeftShadowWidth = useSetAtom(leftStickyShadowWidthAtom);\n\n    const tableBackgroundColor: TableBackgroundStyle =\n        backgroundColor === 'transparent' && stickyHeader ? 'primary' : 'transparent';\n\n    return (\n        <thead>\n            <tr\n                className={cn('relative border-b border-border-primary', {\n                    // BACKGROUND COLOR\n                    'bg-background-primary': tableBackgroundColor === 'primary',\n                    'bg-transparent': tableBackgroundColor === 'transparent',\n                    'shadow-01': stickyHeader && showTopScrollHint,\n                    // STICKY HEADER\n                    'sticky top-0 z-[5]': stickyHeader,\n                })}\n                style={{\n                    transition: stickyHeader ? '0.25s' : undefined,\n                }}\n            >\n                {actionable && (\n                    <th\n                        className={cn(\n                            'hui-text-label-strong bg-background-primary p-0 transition-colors duration-200',\n                            {\n                                'bg-background-primary': tableBackgroundColor === 'primary',\n                                'bg-transparent': tableBackgroundColor === 'transparent',\n                                // COLUMN DIVIDER\n                                'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                            }\n                        )}\n                        key=\"actionable\"\n                        scope=\"col\"\n                        style={\n                            stickyFirstColumn\n                                ? {\n                                      left: 0,\n                                      paddingLeft: '14px',\n                                      position: 'sticky',\n                                      zIndex: 1,\n                                  }\n                                : {}\n                        }\n                    >\n                        {actionableCheckbox}\n                    </th>\n                )}\n                {columns.map((column, i) => {\n                    const newDirection =\n                        currentSort && currentSort[0] === column.key\n                            ? currentSort[1] === 'ascending'\n                                ? 'descending'\n                                : 'ascending'\n                            : defaultSortDirection;\n\n                    let ariaSort: undefined | 'none' | 'ascending' | 'descending' = undefined;\n\n                    if (currentSort && currentSort[0] === column.key) {\n                        ariaSort = currentSort[1];\n                    } else if (column.sortable) {\n                        ariaSort = 'none';\n                    }\n\n                    const isFirstColumn = i === 0;\n                    const isStickyFirstColumn = stickyFirstColumn && isFirstColumn;\n\n                    return (\n                        <th\n                            aria-sort={ariaSort}\n                            className={cn('hui-text-label-strong relative p-0 transition-colors duration-200', {\n                                'active:bg-background-pressed': sortable && column.sortable,\n                                // BACKGROUND COLOR\n                                'bg-background-primary': tableBackgroundColor === 'primary',\n                                'bg-transparent': tableBackgroundColor === 'transparent',\n                                // COLUMN DIVIDER\n                                'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                                // SORTABLE STATES\n                                'group cursor-pointer': sortable && column.sortable,\n                                'hover:bg-background-hover': sortable && column.sortable,\n                                // STICKY FIRST COLUMN\n                                'sticky z-[1] shadow-02': isStickyFirstColumn,\n                            })}\n                            // Using the index as the key is fine here because the columns won't change.\n                            key={i}\n                            onClick={\n                                sortable && column.sortable && onSortChange\n                                    ? () => onSortChange(column.key as string, newDirection)\n                                    : undefined\n                            }\n                            ref={i === 0 ? observeFirstColumnWidth(setLeftShadowWidth) : undefined}\n                            scope=\"col\"\n                            style={\n                                isStickyFirstColumn\n                                    ? {\n                                          left: actionable ? '48px' : '0',\n                                          transform: 'translateX(-1px)',\n                                      }\n                                    : {}\n                            }\n                        >\n                            <span\n                                className={cn('flex items-center gap-xs whitespace-nowrap px-sm', {\n                                    'justify-end': column.align === 'right',\n                                    'justify-start': column.align !== 'right',\n                                })}\n                            >\n                                {column.header ?? null}\n                                {sortable && column.sortable && (\n                                    <ArrowUp\n                                        className={cn('transition-all duration-200', {\n                                            'group-hover:rotate-0': ariaSort === 'descending',\n                                            'group-hover:rotate-180': ariaSort === 'ascending',\n                                            // HOVER STATE - Show on hover for unsorted columns\n                                            'group-hover:visible group-hover:opacity-100': ariaSort === 'none',\n                                            // DEFAULT STATE - Hidden for unsorted columns\n                                            'invisible opacity-0': ariaSort === 'none',\n                                            // ASCENDING STATE - Always visible, rotate on hover\n                                            'visible opacity-100': ariaSort === 'ascending',\n                                            // DESCENDING STATE - Always visible and rotated, rotate back on hover\n                                            'visible rotate-180 opacity-100': ariaSort === 'descending',\n                                        })}\n                                        size=\"sm\"\n                                    />\n                                )}\n                            </span>\n                        </th>\n                    );\n                })}\n            </tr>\n        </thead>\n    );\n}\n","import { usePagination } from '../../../../../Pagination';\nimport { BodyPrimary } from '../../../../../Typography/Text/Text';\n\nexport const ItemCountDisplay = () => {\n    const { itemCount, page, pageSize } = usePagination();\n\n    if (pageSize === 'all') {\n        return <BodyPrimary>{itemCount} Items</BodyPrimary>;\n    }\n\n    return (\n        <BodyPrimary>{`${(page - 1) * pageSize + 1} - ${Math.min(\n            page * pageSize,\n            itemCount\n        )} of ${itemCount} Items`}</BodyPrimary>\n    );\n};\n","import { useContext, useMemo } from 'react';\n\nimport { usePagination } from '../../../../../Pagination';\nimport { OptionType, Select } from '../../../../../Select/Select';\nimport { tableStaticsContext } from '../../../../sharedState';\n\nexport const ItemCountSelect = () => {\n    const { pageSize, setPageSize } = usePagination();\n    const { pageSizeOptions } = useContext(tableStaticsContext);\n\n    const generatedOptions: OptionType[] = useMemo(() => {\n        return pageSizeOptions.map((option) => {\n            return { label: option.toString(), value: option };\n        });\n    }, [pageSizeOptions]);\n\n    return (\n        <Select\n            autoComplete=\"off\"\n            className=\"w-[232px]\"\n            defaultValue={pageSize}\n            isInsideLabel\n            labelText=\"Items per page:\"\n            onChange={(event?: OptionType) => setPageSize(event?.value)}\n            options={generatedOptions}\n            small\n            usePortalMenu\n            value={{ label: pageSize, value: pageSize.toString() }}\n        />\n    );\n};\n","import { useMemo } from 'react';\n\nimport { usePagination } from '../../../../../../../Pagination';\nimport { OptionType, Select } from '../../../../../../../Select/Select';\n\nexport const PageSelect = () => {\n    const { goToPage, page, pageCount } = usePagination();\n\n    const options = useMemo(\n        () =>\n            new Array(pageCount).fill(0).map((_, i) => ({\n                label: `${i + 1}`,\n                value: i + 1,\n            })),\n        [pageCount]\n    );\n\n    return (\n        <Select\n            autoComplete=\"off\"\n            className=\"pl-sm\"\n            defaultValue={pageCount}\n            isInsideLabel\n            labelText=\"Page\"\n            onChange={(event?: OptionType) => goToPage(event?.value)}\n            options={options}\n            small\n            usePortalMenu\n            value={options[page - 1]}\n        />\n    );\n};\n","import { IconButton } from '../../../../../IconButton/IconButton';\nimport { CaretLeft, CaretRight } from '../../../../../Icons';\nimport { usePagination } from '../../../../../Pagination';\nimport { BodyPrimary } from '../../../../../Typography/Text/Text';\nimport { PageSelect } from './components/PageSelect/PageSelect';\n\nexport const Pagination = () => {\n    const { goToPage, page, pageCount } = usePagination();\n\n    return (\n        <div className=\"flex items-center\">\n            <IconButton\n                aria-label=\"Previous Page\"\n                disabled={page === 1}\n                icon={CaretLeft}\n                onClick={() => {\n                    if (page !== 1) {\n                        goToPage(page - 1);\n                    }\n                }}\n                size=\"sm\"\n            />\n            <PageSelect /> <BodyPrimary className=\"whitespace-nowrap pl-xs pr-sm\">of {pageCount} pages</BodyPrimary>\n            <IconButton\n                aria-label=\"Next Page\"\n                disabled={page === pageCount}\n                icon={CaretRight}\n                onClick={() => {\n                    if (page !== pageCount) {\n                        goToPage(page + 1);\n                    }\n                }}\n                size=\"sm\"\n            />\n        </div>\n    );\n};\n","import { ItemCountDisplay } from './components/ItemCountDisplay/ItemCountDisplay';\nimport { ItemCountSelect } from './components/ItemCountSelect/ItemCountSelect';\nimport { Pagination } from './components/TablePaginator/TablePaginator';\n\nexport const TableControls = () => {\n    return (\n        <div\n            className=\"flex items-center justify-between pt-4\"\n            data-hui-id=\"TableControls\"\n        >\n            <ItemCountSelect />\n            <ItemCountDisplay />\n            <Pagination />\n        </div>\n    );\n};\n\nTableControls.displayName = 'TableControls';\n","import { cn } from '@evolve.ui/theme-system';\nimport { useContext } from 'react';\n\nimport { BodySecondary } from '../../../../../Typography/Text/Text';\nimport { tableStaticsContext } from '../../../../sharedState';\nimport { ColumnType, StaticData } from '../../../../types';\n\ninterface Props<T extends StaticData> {\n    backgroundColor: 'primary' | 'secondary' | 'subdued' | 'disabled' | 'transparent';\n    column: ColumnType<T>;\n    columnIndex: number;\n    item: T;\n}\n\nexport const TableRowCell = <T extends StaticData>({ backgroundColor, column, columnIndex, item }: Props<T>) => {\n    const { actionable, showColumnDividers, stickyFirstColumn } = useContext(tableStaticsContext);\n    const value = item[column.key];\n\n    return (\n        <td\n            className={cn('whitespace-nowrap px-sm py-0', {\n                'bg-background-disabled': backgroundColor === 'disabled',\n                'bg-background-primary': backgroundColor === 'primary',\n                'bg-background-secondary': backgroundColor === 'secondary',\n                'bg-background-subdued': backgroundColor === 'subdued',\n                'bg-transparent': backgroundColor === 'transparent',\n                // COLUMN DIVIDER\n                'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                //   HOVER\n                'group-hover:bg-surface-200 group-active:bg-surface-300': !item.disabled,\n                // Add relative positioning for sticky columns to support the background fix\n                relative: stickyFirstColumn && columnIndex === 0,\n                // For non-actionable tables, first column can be at left-0\n                'sticky left-0 z-[2]': stickyFirstColumn && columnIndex === 0 && !actionable,\n                // For actionable tables, first column should be positioned after the checkbox (48px width)\n                'sticky left-xl z-[2]': stickyFirstColumn && columnIndex === 0 && actionable,\n                'sticky-column': stickyFirstColumn && columnIndex === 0,\n                'text-left': !column.align || column.align === 'left',\n                'text-right': column.align === 'right',\n            })}\n        >\n            {Boolean(column.renderItem) ? (\n                column.renderItem?.(item, column)\n            ) : (\n                <BodySecondary color={Boolean(item.disabled) ? 'disabled' : 'primary'}>{value as string}</BodySecondary>\n            )}\n        </td>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { MouseEvent, useCallback, useContext, useMemo } from 'react';\n\nimport { Checkbox } from '../../../ChoiceListItem';\nimport { tableStaticsContext } from '../../sharedState';\nimport { ColumnType, StaticData, TableBackgroundStyle } from '../../types';\nimport { TableRowCell } from './components/TableRowCell/TableRowCell';\n\ninterface Props<T extends StaticData> {\n    backgroundColor?: TableBackgroundStyle;\n    columns: ColumnType<T>[];\n    data: T[];\n    selectedRows?: Set<T['key']>;\n    zebraStripes: boolean;\n}\n\nexport const TableRows = <T extends StaticData>({\n    backgroundColor = 'primary',\n    columns,\n    data,\n    selectedRows,\n    zebraStripes,\n}: Props<T>) => {\n    const { actionable, hideDividers, onSelectedRowsChange, showColumnDividers, stickyFirstColumn } =\n        useContext(tableStaticsContext);\n\n    const onRowClick = useCallback(\n        (event: MouseEvent<HTMLTableRowElement>) => {\n            if (actionable) {\n                const checkbox = event.currentTarget.querySelector('input[type=\"checkbox\"]') as HTMLElement | undefined;\n\n                checkbox?.click();\n            }\n        },\n        [actionable]\n    );\n\n    const formattedData = useMemo(() => {\n        return data.map((item) => {\n            const renderedColumns = columns.map((column, columnIndex) => (\n                <TableRowCell\n                    backgroundColor={backgroundColor}\n                    column={column}\n                    columnIndex={columnIndex}\n                    item={item}\n                    key={`table-row-cell-${columnIndex}`}\n                />\n            ));\n\n            const isOdd = data.indexOf(item) % 2 !== 0;\n            const shouldShowZebraStripe = zebraStripes && isOdd;\n            const isSelectedNotDisabled = selectedRows && selectedRows.has(item.key) && !item.disabled;\n\n            return (\n                <tr\n                    // BASE\n                    className={cn(\n                        'group relative cursor-default bg-background-primary',\n\n                        //  BACKGROUND COLORS\n                        {\n                            'bg-background-disabled': backgroundColor === 'disabled',\n                            'bg-background-primary': backgroundColor === 'primary' && !zebraStripes,\n                            'bg-background-secondary': backgroundColor === 'secondary',\n                            'bg-background-subdued': backgroundColor === 'subdued',\n                            'bg-transparent': backgroundColor === 'transparent',\n                        },\n                        {\n                            '[&>td]:bg-background-disabled': backgroundColor === 'disabled' && shouldShowZebraStripe,\n                            '[&>td]:bg-background-inverse/[0.03]':\n                                backgroundColor === 'transparent' && shouldShowZebraStripe,\n                            '[&>td]:bg-background-secondary': backgroundColor === 'secondary' && shouldShowZebraStripe,\n                            '[&>td]:bg-background-subdued':\n                                (backgroundColor === 'primary' || backgroundColor === 'subdued') &&\n                                shouldShowZebraStripe,\n                        },\n                        {\n                            // HIGHLIGHTED - exclude sticky columns since they handle their own states\n                            '!bg-background-secondary [&>td]:bg-background-secondary': isSelectedNotDisabled,\n\n                            // DIVIDERS\n                            'border-b border-border-secondary': !hideDividers,\n                            // ACTIONABLE\n                            'cursor-pointer': actionable && !item.disabled,\n                        }\n                    )}\n                    data-disabled={item.disabled ? 'true' : undefined}\n                    key={item.key}\n                    onClick={onRowClick}\n                >\n                    {actionable && (\n                        <td\n                            className={cn(\n                                'bg-background-primary p-0',\n                                {\n                                    // COLUMN DIVIDER\n                                    'border-r border-border-secondary last:border-r-0': showColumnDividers,\n                                    // Direct hover/active states for sticky column\n                                    'group-hover:!bg-surface-200 group-active:!bg-surface-300': !item.disabled,\n                                    'sticky left-0 z-[3]': stickyFirstColumn,\n                                    'sticky-column': stickyFirstColumn,\n                                },\n                                {\n                                    // Selected state for sticky column\n                                    'bg-background-secondary':\n                                        stickyFirstColumn &&\n                                        selectedRows &&\n                                        selectedRows.has(item.key) &&\n                                        !item.disabled,\n                                }\n                            )}\n                            key=\"actionable\"\n                            onClick={(e) => e.stopPropagation()}\n                        >\n                            <Checkbox.Option\n                                checked={selectedRows ? selectedRows.has(item.key) : false}\n                                className={cn('flex h-full w-xl items-center justify-center', {\n                                    'group-hover:[&>svg]:!bg-surface-200 group-active:[&>svg]:!border-border-hover':\n                                        !item.disabled,\n                                })}\n                                disabled={Boolean(item.disabled)}\n                                onChange={() => {\n                                    onSelectedRowsChange?.(item.key);\n                                }}\n                            />\n                        </td>\n                    )}\n                    {renderedColumns}\n                </tr>\n            );\n        });\n    }, [\n        actionable,\n        backgroundColor,\n        columns,\n        data,\n        hideDividers,\n        onRowClick,\n        onSelectedRowsChange,\n        selectedRows,\n        showColumnDividers,\n        stickyFirstColumn,\n        zebraStripes,\n    ]);\n\n    return <tbody>{formattedData}</tbody>;\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { Provider, useSetAtom } from 'jotai';\nimport { ComponentProps, ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { Loading } from '../Loading/Loading';\nimport { AdvancedPagination, PaginationProvider } from '../Pagination';\nimport { BodySecondary, H3 } from '../Typography/Text/Text';\nimport { TableHeader } from './components/TableHeader/TableHeader';\nimport { TableControls } from './components/TablePagination/TablePagination';\nimport { TableRows } from './components/TableRow/TableRows';\nimport { showLeftStickyShadowAtom, TableShadow } from './components/TableShadow/TableShadow';\nimport { tableStaticsContext } from './sharedState';\nimport { ColumnType, SortType, StaticData, TableBackgroundStyle, TableRowDensity } from './types';\n\ntype Props<T extends StaticData> = {\n    /**\n     * Adds a checkbox to the left of each row and in the header.\n     * When checked, the row is considered selected.\n     *\n     * @see `onSelectedRowsChange`\n     */\n    actionable?: boolean;\n    /**\n     * This checkbox goes in the top left of your table.\n     *\n     * You can use this to \"select all\" however you'd like.\n     *\n     * Needs `actionable` to be true to show.\n     */\n    actionableCheckbox?: ReactNode;\n    /**\n     * Background color style for the table.\n     * Options: 'primary', 'secondary', 'subdued', 'disabled', or 'transparent'.\n     *\n     * primary - Uses theme.color.background.primary\n     * secondary - Uses theme.color.background.secondary\n     * subdued - Uses theme.color.background.subdued\n     * disabled - Uses theme.color.background.disabled\n     * transparent - Uses transparent background\n     *\n     * @default 'primary'\n     */\n    backgroundColor?: TableBackgroundStyle;\n    className?: string;\n    /**\n     * Specification for the columns of the table.\n     * Includes how to render each item in the column.\n     */\n    columns: ColumnType<T>[];\n    /**\n     * Whether we're currently sorting by anything, and if so, what.\n     *\n     * The first item in the tuple is the column key, and the second is the sort direction.\n     *\n     * @see `onSortChange`\n     */\n    currentSort?: undefined | [string, SortType];\n    /**\n     * The rows of data to be displayed in the table.\n     */\n    data: T[];\n    /**\n     * The default sort direction for columns that are sortable.\n     */\n    defaultSortDirection?: SortType;\n    /**\n     * The text to display when there is no data.\n     */\n    emptyStateHeaderText?: string;\n    /**\n     * The supporting text to display when there is no data.\n     */\n    emptyStateSupportingText?: string;\n    /**\n     * Whether or not to fill the width of the container.\n     *\n     * Gives equal extra space to each column.\n     */\n    fillHorizontal?: boolean;\n    /**\n     * Whether or not to show the border on the main table.\n     */\n    hideBorder?: boolean;\n    /**\n     * Whether or not to hide the dividers between rows.\n     */\n    hideDividers?: boolean;\n    /**\n     * Boolean to use advance pagination component\n     */\n    isAdvancedPagination?: boolean;\n    /**\n     * Whether or not to show a loading indicator.\n     */\n    loading?: boolean;\n    /**\n     * Callback when the selected rows change.\n     *\n     * @param selectedRows the selected rows in the form of a map of row keys to booleans\n     */\n    onSelectedRowsChange?: (selectedRow: T['key']) => void;\n    /**\n     * Callback when the sort status of a column changes.\n     *\n     * @param columnKey The key of the column that was clicked\n     * @param newSort The new sort status of the column\n     * @see `currentSort`\n     */\n    onSortChange?: (columnKey: string, newSort: SortType) => void;\n    /**\n     * The page size options for the pagination component.\n     */\n    pageSizeOptions?: number[];\n    /**\n     * If provided, the table will add a pagination component.\n     *\n     * @see `PaginationProvider`\n     */\n    pagination?: Omit<ComponentProps<typeof PaginationProvider>, 'path' | 'children'> & {\n        /**\n         * The key of the pagination provider.\n         *\n         * This is used to ensure that the pagination provider is only re-rendered when the key changes.\n         * @example key={`${currentPage}-${pageSize}-${itemCount}`}\n         */\n        key?: string;\n    };\n    /**\n     * The height of the rows in the table.\n     * - `sm` = 28px\n     * - `md` = 36px\n     * - `lg` = 48px\n     *\n     * @default md\n     */\n    rowDensity?: TableRowDensity;\n    /**\n     * The rows that are currently selected.\n     *\n     * This is a controlled prop.\n     */\n    selectedRows?: Set<T['key']>;\n    /**\n     * Adds vertical dividers between columns in both header and body cells,\n     * including the actionable checkbox column. Combine with the default row\n     * dividers (`hideDividers={false}`) and outer border (`hideBorder={false}`)\n     * for a fully bordered grid.\n     *\n     * @default false\n     */\n    showColumnDividers?: boolean;\n    /**\n     * Whether or not the columns are sortable.\n     *\n     * @see `onSortChange`\n     * @see `currentSort`\n     */\n    sortable?: boolean;\n    /**\n     * Locks the first column on horizontal scroll.\n     */\n    stickyFirstColumn?: boolean;\n    /**\n     * Make header sticky when table height is set.\n     *\n     * @default false\n     *\n     * .table-container {\n     *   height: calc(100vh - 200px);\n     * }\n     */\n    stickyHeader?: boolean;\n    /**\n     * Adds a zebra stripe to every other row.\n     */\n    zebraStripes?: boolean;\n};\n\n/**\n * Helper function to get background color classes based on TableBackgroundStyle\n */\nconst getBackgroundColorClasses = (backgroundColor?: TableBackgroundStyle, isZebraStripe = false) => {\n    if (!backgroundColor) {\n        return 'bg-background-primary';\n    }\n\n    switch (backgroundColor) {\n        case 'secondary':\n            return 'bg-background-secondary';\n        case 'subdued':\n            return 'bg-background-subdued';\n        case 'disabled':\n            return 'bg-background-disabled';\n        case 'transparent':\n            return 'bg-transparent';\n        case 'primary':\n            if (isZebraStripe) {\n                return 'bg-background-subdued';\n            }\n            return 'bg-background-primary';\n        default:\n            return 'bg-background-primary';\n    }\n};\n\nexport const Table = <T extends StaticData>({\n    actionable = false,\n    backgroundColor,\n    hideDividers = false,\n    isAdvancedPagination,\n    onSelectedRowsChange,\n    pageSizeOptions = [25, 50, 100],\n    showColumnDividers = false,\n    stickyFirstColumn = false,\n    stickyHeader = false,\n    ...props\n}: Props<T>) => {\n    const hasNoData = Boolean(props.loading) || !Boolean(props.data.length);\n\n    // Memoize the context value to prevent unnecessary re-renders\n    const contextValue = useMemo(\n        () => ({\n            actionable,\n            backgroundColor,\n            hideDividers,\n            onSelectedRowsChange,\n            pageSizeOptions,\n            showColumnDividers,\n            stickyFirstColumn: stickyFirstColumn && !hasNoData,\n        }),\n        [\n            actionable,\n            backgroundColor,\n            hideDividers,\n            onSelectedRowsChange,\n            pageSizeOptions,\n            showColumnDividers,\n            stickyFirstColumn,\n            hasNoData,\n        ]\n    );\n\n    // We need a jotai provider to isolate tables from one another.\n    return (\n        <Provider>\n            <tableStaticsContext.Provider value={contextValue}>\n                <InnerTable\n                    backgroundColor={backgroundColor}\n                    data-hui-id=\"Table\"\n                    hasNoData={hasNoData}\n                    hideDividers={hideDividers}\n                    isAdvancedPagination={isAdvancedPagination}\n                    stickyFirstColumn={stickyFirstColumn}\n                    stickyHeader={stickyHeader}\n                    {...props}\n                />\n            </tableStaticsContext.Provider>\n        </Provider>\n    );\n};\n\n// react dev tools display name\nTable.displayName = 'Table';\n\nconst InnerTable = <T extends StaticData>({\n    actionableCheckbox,\n    backgroundColor,\n    className,\n    columns,\n    currentSort,\n    data,\n    defaultSortDirection = 'descending',\n    emptyStateHeaderText = 'Empty state heading message...',\n    emptyStateSupportingText = 'Supporting message to provide further guidance on how to remedy empty state.',\n    fillHorizontal = false,\n    hasNoData,\n    hideBorder = false,\n    hideDividers = false,\n    isAdvancedPagination,\n    loading = false,\n    onSortChange,\n    pagination,\n    rowDensity = 'md',\n    selectedRows,\n    sortable = false,\n    stickyFirstColumn = false,\n    stickyHeader = false,\n    zebraStripes = false,\n}: Props<T> & {\n    hasNoData: boolean;\n}) => {\n    const [showRightScrollHint, setShowRightScrollHint] = useState(false);\n    const [showLeftScrollHint, setShowLeftScrollHint] = useState(false);\n    const [showTopScrollHint, setShowTopScrollHint] = useState(false);\n    const setShowLeftShadow = useSetAtom(showLeftStickyShadowAtom);\n\n    const handleScroll = useCallback(\n        (ref: HTMLDivElement) => {\n            setShowLeftShadow(stickyFirstColumn && ref.scrollLeft > 20);\n            setShowLeftScrollHint(!stickyFirstColumn && ref.scrollLeft > 50);\n            setShowRightScrollHint(ref.scrollLeft + ref.clientWidth < ref.scrollWidth - 50);\n            setShowTopScrollHint(ref.scrollTop !== 0);\n        },\n        [setShowLeftShadow, stickyFirstColumn]\n    );\n\n    let rowHeight = 0;\n    switch (rowDensity) {\n        case 'sm':\n            rowHeight = 28;\n            break;\n        case 'md':\n            rowHeight = 36;\n            break;\n        case 'lg':\n            rowHeight = 48;\n            break;\n        default:\n            rowHeight = 36;\n            break;\n    }\n\n    // Container classes\n    const containerClasses = cn(\n        'relative max-w-full',\n        {\n            'w-full': fillHorizontal,\n            'w-min': !fillHorizontal,\n        },\n        className,\n        'table-container'\n    );\n\n    // RelativeContainer classes\n    const relativeContainerClasses = cn(\n        'relative',\n        {\n            'border border-border-secondary': !hideBorder,\n            'border-b-0': !hideDividers && !hasNoData && !hideBorder,\n            'h-auto': !stickyHeader,\n            'h-full': stickyHeader,\n            'w-full': fillHorizontal,\n        },\n        getBackgroundColorClasses(backgroundColor)\n    );\n\n    // TableScroll classes\n    const tableScrollClasses = cn(\n        'w-full',\n        {\n            'h-auto': !stickyHeader,\n            'h-full': stickyHeader,\n            'min-h-[220px]': loading || data.length === 0,\n            'overflow-x-auto': !hasNoData,\n            'overflow-x-hidden': hasNoData,\n            'overflow-y-auto': stickyHeader,\n            'overflow-y-visible': !stickyHeader,\n        },\n        getBackgroundColorClasses(backgroundColor)\n    );\n\n    // Table classes\n    const tableClasses = cn(\n        'border-collapse',\n        {\n            'w-full': fillHorizontal,\n        },\n        getBackgroundColorClasses(backgroundColor),\n        // Row height styles using CSS custom properties for dynamic values\n        '[&_td]:h-[var(--row-height)] [&_th]:h-[var(--row-height)]',\n        // Background color for th and td elements\n        {\n            '[&_th]:bg-background-disabled': backgroundColor === 'disabled',\n            '[&_th]:bg-background-primary': backgroundColor === 'primary' || !backgroundColor,\n            '[&_th]:bg-background-secondary': backgroundColor === 'secondary',\n            '[&_th]:bg-background-subdued': backgroundColor === 'subdued',\n            '[&_th]:bg-transparent': backgroundColor === 'transparent',\n        },\n        // Scroll hint shadows using pseudo-elements\n        '[&::before]:pointer-events-none [&::before]:absolute [&::before]:z-[1] [&::before]:content-[\"\"]',\n        '[&::before]:bottom-0 [&::before]:left-0 [&::before]:top-0 [&::before]:w-[48px]',\n        '[&::before]:opacity-0 [&::before]:transition-opacity [&::before]:duration-200',\n        '[&::before]:shadow-[8px_0px_8px_0px_rgba(0,0,0,0.1)_inset]',\n        {\n            '[&::before]:opacity-100': showLeftScrollHint && !hasNoData,\n        },\n        '[&::after]:pointer-events-none [&::after]:absolute [&::after]:z-[1] [&::after]:content-[\"\"]',\n        '[&::after]:bottom-0 [&::after]:right-0 [&::after]:top-0 [&::after]:w-[48px]',\n        '[&::after]:opacity-0 [&::after]:transition-opacity [&::after]:duration-200',\n        '[&::after]:shadow-[-8px_0px_8px_0px_rgba(0,0,0,0.1)_inset]',\n        {\n            '[&::after]:opacity-100': showRightScrollHint && !hasNoData,\n        }\n    );\n\n    // Empty state container classes\n    const emptyStateContainerClasses = cn(\n        'absolute flex w-full flex-col items-center justify-center py-2xl text-center'\n    );\n\n    return (\n        <div\n            className={containerClasses}\n            style={{ '--row-height': `${rowHeight}px` } as React.CSSProperties}\n        >\n            <div className={relativeContainerClasses}>\n                <div\n                    className={tableScrollClasses}\n                    ref={(ref: HTMLDivElement | null) => {\n                        if (!ref) {\n                            return;\n                        }\n\n                        // Add a scroll event listener to the table scroll container\n                        // to determine if the right scroll hint should be shown\n                        ref.addEventListener('scroll', () => {\n                            handleScroll(ref);\n                        });\n\n                        handleScroll(ref);\n                    }}\n                >\n                    <table className={tableClasses}>\n                        <TableHeader\n                            actionableCheckbox={actionableCheckbox}\n                            backgroundColor={backgroundColor}\n                            columns={columns}\n                            currentSort={currentSort}\n                            data={data}\n                            defaultSortDirection={defaultSortDirection}\n                            onSortChange={onSortChange}\n                            showTopScrollHint={showTopScrollHint}\n                            sortable={sortable}\n                            stickyHeader={stickyHeader}\n                        />\n\n                        {!loading && Boolean(data.length) && (\n                            <TableRows\n                                backgroundColor={backgroundColor}\n                                columns={columns}\n                                data={data}\n                                selectedRows={selectedRows}\n                                zebraStripes={zebraStripes}\n                            />\n                        )}\n                    </table>\n                    {!hasNoData && <TableShadow />}\n\n                    {!loading && !Boolean(data.length) && (\n                        <div className={emptyStateContainerClasses}>\n                            <H3>{emptyStateHeaderText}</H3>\n                            <BodySecondary>{emptyStateSupportingText}</BodySecondary>\n                        </div>\n                    )}\n\n                    {loading && (\n                        <div className={emptyStateContainerClasses}>\n                            <Loading size={32} />\n                        </div>\n                    )}\n                </div>\n            </div>\n            {pagination && !hasNoData && (\n                <PaginationProvider\n                    {...pagination}\n                    key={pagination.key}\n                    path=\"\"\n                >\n                    {isAdvancedPagination ? <AdvancedPagination className=\"px-0 py-sm\" /> : <TableControls />}\n                </PaginationProvider>\n            )}\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAsBA,MAAa,sBAAsB,cAA4B;CAR3D,YAAY;CACZ,iBAAiB,KAAA;CACjB,cAAc;CACd,iBAAiB,CAAC;CAClB,oBAAoB;CACpB,mBAAmB;AAGwC,CAAiB;AAOjD,KAAyB,KAAA,CAAS;;;ACtBjE,MAAa,2BAA2B,KAAc,KAAK;AAC3D,MAAa,4BAA4B,KAAa,CAAC;;;;AAKvD,MAAa,oBAAoB;CAC7B,MAAM,EAAE,YAAY,sBAAsB,WAAW,mBAAmB;CACxE,MAAM,QAAQ,aAAa,yBAAyB;CACpD,MAAM,uBAAuB,aAAa,wBAAwB;CAElE,OACI,oBAAC,OAAD;EAAK,WAAU;YACX,oBAAC,OAAD;GACI,WAAW,GACP,4GACA,EACI,aAAa,CAAC,qBAAqB,CAAC,qBACxC,CACJ;GACA,OAAO,EAAE,OAAO,GAAG,aAAa,QAAA,KAA0B,MAAM,IAAI;EACvE,CAAA;CACA,CAAA;AAEb;AAEA,MAAa,2BAA2B,wBAAiD,QAA4B;CACjH,IAAI,KAAK;EAOL,IAL2B,gBAAgB,YAAY;GACnD,MAAM,QAAQ,QAAQ,EAAE,CAAC,YAAY;GACrC,mBAAmB,KAAK;EAC5B,CAEa,CAAC,CAAC,QAAQ,GAAG;EAE1B,mBAAmB,IAAI,sBAAsB,CAAC,CAAC,KAAK;CACxD;AACJ;;;ACvBA,SAAgB,YAAkC,EAC9C,oBACA,iBACA,SACA,aACA,sBACA,cACA,mBACA,UACA,gBACS;CACT,MAAM,EAAE,YAAY,oBAAoB,sBAAsB,WAAW,mBAAmB;CAC5F,MAAM,qBAAqB,WAAW,yBAAyB;CAE/D,MAAM,uBACF,oBAAoB,iBAAiB,eAAe,YAAY;CAEpE,OACI,oBAAC,SAAD,EAAA,UACI,qBAAC,MAAD;EACI,WAAW,GAAG,2CAA2C;GAErD,yBAAyB,yBAAyB;GAClD,kBAAkB,yBAAyB;GAC3C,aAAa,gBAAgB;GAE7B,sBAAsB;EAC1B,CAAC;EACD,OAAO,EACH,YAAY,eAAe,UAAU,KAAA,EACzC;YAXJ,CAaK,cACG,oBAAC,MAAD;GACI,WAAW,GACP,kFACA;IACI,yBAAyB,yBAAyB;IAClD,kBAAkB,yBAAyB;IAE3C,oDAAoD;GACxD,CACJ;GAEA,OAAM;GACN,OACI,oBACM;IACI,MAAM;IACN,aAAa;IACb,UAAU;IACV,QAAQ;GACZ,IACA,CAAC;aAGV;EACD,GAdI,YAcJ,GAEP,QAAQ,KAAK,QAAQ,MAAM;GACxB,MAAM,eACF,eAAe,YAAY,OAAO,OAAO,MACnC,YAAY,OAAO,cACf,eACA,cACJ;GAEV,IAAI,WAA4D,KAAA;GAEhE,IAAI,eAAe,YAAY,OAAO,OAAO,KACzC,WAAW,YAAY;QACpB,IAAI,OAAO,UACd,WAAW;GAIf,MAAM,sBAAsB,qBADN,MAAM;GAG5B,OACI,oBAAC,MAAD;IACI,aAAW;IACX,WAAW,GAAG,qEAAqE;KAC/E,gCAAgC,YAAY,OAAO;KAEnD,yBAAyB,yBAAyB;KAClD,kBAAkB,yBAAyB;KAE3C,oDAAoD;KAEpD,wBAAwB,YAAY,OAAO;KAC3C,6BAA6B,YAAY,OAAO;KAEhD,0BAA0B;IAC9B,CAAC;IAGD,SACI,YAAY,OAAO,YAAY,qBACnB,aAAa,OAAO,KAAe,YAAY,IACrD,KAAA;IAEV,KAAK,MAAM,IAAI,wBAAwB,kBAAkB,IAAI,KAAA;IAC7D,OAAM;IACN,OACI,sBACM;KACI,MAAM,aAAa,SAAS;KAC5B,WAAW;IACf,IACA,CAAC;cAGX,qBAAC,QAAD;KACI,WAAW,GAAG,oDAAoD;MAC9D,eAAe,OAAO,UAAU;MAChC,iBAAiB,OAAO,UAAU;KACtC,CAAC;eAJL,CAMK,OAAO,UAAU,MACjB,YAAY,OAAO,YAChB,oBAAC,SAAD;MACI,WAAW,GAAG,+BAA+B;OACzC,wBAAwB,aAAa;OACrC,0BAA0B,aAAa;OAEvC,+CAA+C,aAAa;OAE5D,uBAAuB,aAAa;OAEpC,uBAAuB,aAAa;OAEpC,kCAAkC,aAAa;MACnD,CAAC;MACD,MAAK;KACR,CAAA,CAEH;;GACN,GA1CK,CA0CL;EAEZ,CAAC,CACD;IACD,CAAA;AAEf;;;AClKA,MAAa,yBAAyB;CAClC,MAAM,EAAE,WAAW,MAAM,aAAa,cAAc;CAEpD,IAAI,aAAa,OACb,OAAO,qBAAC,aAAD,EAAA,UAAA,CAAc,WAAU,QAAmB,EAAA,CAAA;CAGtD,OACI,oBAAC,aAAD,EAAA,UAAc,IAAI,OAAO,KAAK,WAAW,EAAE,KAAK,KAAK,IACjD,OAAO,UACP,SACJ,EAAE,MAAM,UAAU,QAAqB,CAAA;AAE/C;;;ACVA,MAAa,wBAAwB;CACjC,MAAM,EAAE,UAAU,gBAAgB,cAAc;CAChD,MAAM,EAAE,oBAAoB,WAAW,mBAAmB;CAQ1D,OACI,oBAAC,QAAD;EACI,cAAa;EACb,WAAU;EACV,cAAc;EACd,eAAA;EACA,WAAU;EACV,WAAW,UAAuB,YAAY,OAAO,KAAK;EAC1D,SAd+B,cAAc;GACjD,OAAO,gBAAgB,KAAK,WAAW;IACnC,OAAO;KAAE,OAAO,OAAO,SAAS;KAAG,OAAO;IAAO;GACrD,CAAC;EACL,GAAG,CAAC,eAAe,CAUa;EACxB,OAAA;EACA,eAAA;EACA,OAAO;GAAE,OAAO;GAAU,OAAO,SAAS,SAAS;EAAE;CACxD,CAAA;AAET;;;ACzBA,MAAa,mBAAmB;CAC5B,MAAM,EAAE,UAAU,MAAM,cAAc,cAAc;CAEpD,MAAM,UAAU,cAER,IAAI,MAAM,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,OAAO;EACxC,OAAO,GAAG,IAAI;EACd,OAAO,IAAI;CACf,EAAE,GACN,CAAC,SAAS,CACd;CAEA,OACI,oBAAC,QAAD;EACI,cAAa;EACb,WAAU;EACV,cAAc;EACd,eAAA;EACA,WAAU;EACV,WAAW,UAAuB,SAAS,OAAO,KAAK;EAC9C;EACT,OAAA;EACA,eAAA;EACA,OAAO,QAAQ,OAAO;CACzB,CAAA;AAET;;;ACzBA,MAAa,mBAAmB;CAC5B,MAAM,EAAE,UAAU,MAAM,cAAc,cAAc;CAEpD,OACI,qBAAC,OAAD;EAAK,WAAU;YAAf;GACI,oBAAC,YAAD;IACI,cAAW;IACX,UAAU,SAAS;IACnB,MAAM;IACN,eAAe;KACX,IAAI,SAAS,GACT,SAAS,OAAO,CAAC;IAEzB;IACA,MAAK;GACR,CAAA;GACD,oBAAC,YAAD,CAAa,CAAA;GAAC;GAAC,qBAAC,aAAD;IAAa,WAAU;cAAvB;KAAuD;KAAI;KAAU;IAAmB;;GACvG,oBAAC,YAAD;IACI,cAAW;IACX,UAAU,SAAS;IACnB,MAAM;IACN,eAAe;KACX,IAAI,SAAS,WACT,SAAS,OAAO,CAAC;IAEzB;IACA,MAAK;GACR,CAAA;EACA;;AAEb;;;AChCA,MAAa,sBAAsB;CAC/B,OACI,qBAAC,OAAD;EACI,WAAU;EACV,eAAY;YAFhB;GAII,oBAAC,iBAAD,CAAkB,CAAA;GAClB,oBAAC,kBAAD,CAAmB,CAAA;GACnB,oBAAC,YAAD,CAAa,CAAA;EACZ;;AAEb;AAEA,cAAc,cAAc;;;ACH5B,MAAa,gBAAsC,EAAE,iBAAiB,QAAQ,aAAa,WAAqB;CAC5G,MAAM,EAAE,YAAY,oBAAoB,sBAAsB,WAAW,mBAAmB;CAC5F,MAAM,QAAQ,KAAK,OAAO;CAE1B,OACI,oBAAC,MAAD;EACI,WAAW,GAAG,gCAAgC;GAC1C,0BAA0B,oBAAoB;GAC9C,yBAAyB,oBAAoB;GAC7C,2BAA2B,oBAAoB;GAC/C,yBAAyB,oBAAoB;GAC7C,kBAAkB,oBAAoB;GAEtC,oDAAoD;GAEpD,0DAA0D,CAAC,KAAK;GAEhE,UAAU,qBAAqB,gBAAgB;GAE/C,uBAAuB,qBAAqB,gBAAgB,KAAK,CAAC;GAElE,wBAAwB,qBAAqB,gBAAgB,KAAK;GAClE,iBAAiB,qBAAqB,gBAAgB;GACtD,aAAa,CAAC,OAAO,SAAS,OAAO,UAAU;GAC/C,cAAc,OAAO,UAAU;EACnC,CAAC;YAEA,QAAQ,OAAO,UAAU,IACtB,OAAO,aAAa,MAAM,MAAM,IAEhC,oBAAC,eAAD;GAAe,OAAO,QAAQ,KAAK,QAAQ,IAAI,aAAa;aAAY;EAA+B,CAAA;CAE3G,CAAA;AAEZ;;;AChCA,MAAa,aAAmC,EAC5C,kBAAkB,WAClB,SACA,MACA,cACA,mBACY;CACZ,MAAM,EAAE,YAAY,cAAc,sBAAsB,oBAAoB,sBACxE,WAAW,mBAAmB;CAElC,MAAM,aAAa,aACd,UAA2C;EACxC,IAAI,YAGA,MAFuB,cAAc,cAAc,0BAE5C,CAAC,EAAE,MAAM;CAExB,GACA,CAAC,UAAU,CACf;CA8GA,OAAO,oBAAC,SAAD,EAAA,UA5Ge,cAAc;EAChC,OAAO,KAAK,KAAK,SAAS;GACtB,MAAM,kBAAkB,QAAQ,KAAK,QAAQ,gBACzC,oBAAC,cAAD;IACqB;IACT;IACK;IACP;GAET,GADQ,kBAAkB,aAC1B,CACJ;GAED,MAAM,QAAQ,KAAK,QAAQ,IAAI,IAAI,MAAM;GACzC,MAAM,wBAAwB,gBAAgB;GAC9C,MAAM,wBAAwB,gBAAgB,aAAa,IAAI,KAAK,GAAG,KAAK,CAAC,KAAK;GAElF,OACI,qBAAC,MAAD;IAEI,WAAW,GACP,uDAGA;KACI,0BAA0B,oBAAoB;KAC9C,yBAAyB,oBAAoB,aAAa,CAAC;KAC3D,2BAA2B,oBAAoB;KAC/C,yBAAyB,oBAAoB;KAC7C,kBAAkB,oBAAoB;IAC1C,GACA;KACI,iCAAiC,oBAAoB,cAAc;KACnE,uCACI,oBAAoB,iBAAiB;KACzC,kCAAkC,oBAAoB,eAAe;KACrE,iCACK,oBAAoB,aAAa,oBAAoB,cACtD;IACR,GACA;KAEI,2DAA2D;KAG3D,oCAAoC,CAAC;KAErC,kBAAkB,cAAc,CAAC,KAAK;IAC1C,CACJ;IACA,iBAAe,KAAK,WAAW,SAAS,KAAA;IAExC,SAAS;cAlCb,CAoCK,cACG,oBAAC,MAAD;KACI,WAAW,GACP,6BACA;MAEI,oDAAoD;MAEpD,4DAA4D,CAAC,KAAK;MAClE,uBAAuB;MACvB,iBAAiB;KACrB,GACA,EAEI,2BACI,qBACA,gBACA,aAAa,IAAI,KAAK,GAAG,KACzB,CAAC,KAAK,SACd,CACJ;KAEA,UAAU,MAAM,EAAE,gBAAgB;eAElC,oBAAC,SAAS,QAAV;MACI,SAAS,eAAe,aAAa,IAAI,KAAK,GAAG,IAAI;MACrD,WAAW,GAAG,gDAAgD,EAC1D,iFACI,CAAC,KAAK,SACd,CAAC;MACD,UAAU,QAAQ,KAAK,QAAQ;MAC/B,gBAAgB;OACZ,uBAAuB,KAAK,GAAG;MACnC;KACH,CAAA;IACD,GAdI,YAcJ,GAEP,eACD;MAzCK,KAAK,GAyCV;EAEZ,CAAC;CACL,GAAG;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACJ,CAE2B,EAAS,CAAA;AACxC;;;;;;ACmCA,MAAM,6BAA6B,iBAAwC,gBAAgB,UAAU;CACjG,IAAI,CAAC,iBACD,OAAO;CAGX,QAAQ,iBAAR;EACI,KAAK,aACD,OAAO;EACX,KAAK,WACD,OAAO;EACX,KAAK,YACD,OAAO;EACX,KAAK,eACD,OAAO;EACX,KAAK;GACD,IAAI,eACA,OAAO;GAEX,OAAO;EACX,SACI,OAAO;CACf;AACJ;AAEA,MAAa,SAA+B,EACxC,aAAa,OACb,iBACA,eAAe,OACf,sBACA,sBACA,kBAAkB;CAAC;CAAI;CAAI;AAAG,GAC9B,qBAAqB,OACrB,oBAAoB,OACpB,eAAe,OACf,GAAG,YACS;CACZ,MAAM,YAAY,QAAQ,MAAM,OAAO,KAAK,CAAC,QAAQ,MAAM,KAAK,MAAM;CAGtE,MAAM,eAAe,eACV;EACH;EACA;EACA;EACA;EACA;EACA;EACA,mBAAmB,qBAAqB,CAAC;CAC7C,IACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACJ,CACJ;CAGA,OACI,oBAAC,UAAD,EAAA,UACI,oBAAC,oBAAoB,UAArB;EAA8B,OAAO;YACjC,oBAAC,YAAD;GACqB;GACjB,eAAY;GACD;GACG;GACQ;GACH;GACL;GACd,GAAI;EACP,CAAA;CACyB,CAAA,EACxB,CAAA;AAElB;AAGA,MAAM,cAAc;AAEpB,MAAM,cAAoC,EACtC,oBACA,iBACA,WACA,SACA,aACA,MACA,uBAAuB,cACvB,uBAAuB,kCACvB,2BAA2B,gFAC3B,iBAAiB,OACjB,WACA,aAAa,OACb,eAAe,OACf,sBACA,UAAU,OACV,cACA,YACA,aAAa,MACb,cACA,WAAW,OACX,oBAAoB,OACpB,eAAe,OACf,eAAe,YAGb;CACF,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,KAAK;CACpE,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,KAAK;CAClE,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,KAAK;CAChE,MAAM,oBAAoB,WAAW,wBAAwB;CAE7D,MAAM,eAAe,aAChB,QAAwB;EACrB,kBAAkB,qBAAqB,IAAI,aAAa,EAAE;EAC1D,sBAAsB,CAAC,qBAAqB,IAAI,aAAa,EAAE;EAC/D,uBAAuB,IAAI,aAAa,IAAI,cAAc,IAAI,cAAc,EAAE;EAC9E,qBAAqB,IAAI,cAAc,CAAC;CAC5C,GACA,CAAC,mBAAmB,iBAAiB,CACzC;CAEA,IAAI,YAAY;CAChB,QAAQ,YAAR;EACI,KAAK;GACD,YAAY;GACZ;EACJ,KAAK;GACD,YAAY;GACZ;EACJ,KAAK;GACD,YAAY;GACZ;EACJ;GACI,YAAY;GACZ;CACR;CAGA,MAAM,mBAAmB,GACrB,uBACA;EACI,UAAU;EACV,SAAS,CAAC;CACd,GACA,WACA,iBACJ;CAGA,MAAM,2BAA2B,GAC7B,YACA;EACI,kCAAkC,CAAC;EACnC,cAAc,CAAC,gBAAgB,CAAC,aAAa,CAAC;EAC9C,UAAU,CAAC;EACX,UAAU;EACV,UAAU;CACd,GACA,0BAA0B,eAAe,CAC7C;CAGA,MAAM,qBAAqB,GACvB,UACA;EACI,UAAU,CAAC;EACX,UAAU;EACV,iBAAiB,WAAW,KAAK,WAAW;EAC5C,mBAAmB,CAAC;EACpB,qBAAqB;EACrB,mBAAmB;EACnB,sBAAsB,CAAC;CAC3B,GACA,0BAA0B,eAAe,CAC7C;CAGA,MAAM,eAAe,GACjB,mBACA,EACI,UAAU,eACd,GACA,0BAA0B,eAAe,GAEzC,6DAEA;EACI,iCAAiC,oBAAoB;EACrD,gCAAgC,oBAAoB,aAAa,CAAC;EAClE,kCAAkC,oBAAoB;EACtD,gCAAgC,oBAAoB;EACpD,yBAAyB,oBAAoB;CACjD,GAEA,qGACA,kFACA,iFACA,8DACA,EACI,2BAA2B,sBAAsB,CAAC,UACtD,GACA,iGACA,+EACA,8EACA,8DACA,EACI,0BAA0B,uBAAuB,CAAC,UACtD,CACJ;CAGA,MAAM,6BAA6B,GAC/B,8EACJ;CAEA,OACI,qBAAC,OAAD;EACI,WAAW;EACX,OAAO,EAAE,gBAAgB,GAAG,UAAU,IAAI;YAF9C,CAII,oBAAC,OAAD;GAAK,WAAW;aACZ,qBAAC,OAAD;IACI,WAAW;IACX,MAAM,QAA+B;KACjC,IAAI,CAAC,KACD;KAKJ,IAAI,iBAAiB,gBAAgB;MACjC,aAAa,GAAG;KACpB,CAAC;KAED,aAAa,GAAG;IACpB;cAdJ;KAgBI,qBAAC,SAAD;MAAO,WAAW;gBAAlB,CACI,oBAAC,aAAD;OACwB;OACH;OACR;OACI;OACP;OACgB;OACR;OACK;OACT;OACI;MACjB,CAAA,GAEA,CAAC,WAAW,QAAQ,KAAK,MAAM,KAC5B,oBAAC,WAAD;OACqB;OACR;OACH;OACQ;OACA;MACjB,CAAA,CAEF;;KACN,CAAC,aAAa,oBAAC,aAAD,CAAc,CAAA;KAE5B,CAAC,WAAW,CAAC,QAAQ,KAAK,MAAM,KAC7B,qBAAC,OAAD;MAAK,WAAW;gBAAhB,CACI,oBAAC,IAAD,EAAA,UAAK,qBAAyB,CAAA,GAC9B,oBAAC,eAAD,EAAA,UAAgB,yBAAwC,CAAA,CACvD;;KAGR,WACG,oBAAC,OAAD;MAAK,WAAW;gBACZ,oBAAC,SAAD,EAAS,MAAM,GAAK,CAAA;KACnB,CAAA;IAER;;EACJ,CAAA,GACJ,cAAc,CAAC,aACZ,8BAAC,oBAAD;GACI,GAAI;GACJ,KAAK,WAAW;GAChB,MAAK;EAGW,GADf,uBAAuB,oBAAC,oBAAD,EAAoB,WAAU,aAAc,CAAA,IAAI,oBAAC,eAAD,CAAgB,CAAA,CACxE,CAEvB;;AAEb"}