@persona/design-system 0.1.8 → 0.2.0

package/dist/components/DataTable/index.cjs

@@ -1,1434 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_chunk = require("../../chunk-CKQMccvm.cjs");
-const require_lib_pseudoClass = require("../../lib/pseudoClass.cjs");
-require("../../variables/effect.cjs");
-require("../../variables/transitions.cjs");
-const require_Stack = require("../../Stack-UeifHn3c.cjs");
-const require_Text = require("../../Text-G9QmYf0P.cjs");
-const require_Tooltip = require("../../Tooltip-olP3rdUO.cjs");
-const require_lib_zindex = require("../../lib/zindex.cjs");
-const require_IconButton = require("../../IconButton-nlgjJQCS.cjs");
-const require_DropdownMenu = require("../../DropdownMenu-DnlQqTjs.cjs");
-const require_Table = require("../../Table-DxLvJYWK.cjs");
-const require_Sticker = require("../../Sticker-CIoseh9f.cjs");
-const require_Checkbox = require("../../Checkbox-CmCujC1W.cjs");
-const require_Pagination = require("../../Pagination-2Yo1vRJZ.cjs");
-const require_HoverCopyableField = require("../../HoverCopyableField-CRkM7o4B.cjs");
-const require_Pii = require("../../Pii-DHTb3ewO.cjs");
-const require_TableControls = require("../../TableControls-BtXK7Ils.cjs");
-require("./types.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-styled_components = require_chunk.__toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
-let react_router_dom = require("react-router-dom");
-let react = require("react");
-let _persona_icons = require("@persona/icons");
-let _persona_icons_12px = require("@persona/icons/12px");
-let lodash = require("lodash");
-let _tanstack_react_table = require("@tanstack/react-table");
-let luxon = require("luxon");
-let lodash_fp_startCase_js = require("lodash/fp/startCase.js");
-lodash_fp_startCase_js = require_chunk.__toESM(lodash_fp_startCase_js);
-//#region components/DataTable/constants.ts
-function getColumnWidths(compact) {
-	return {
-		EXPAND_COLUMN_WIDTH: compact ? 32 : 36,
-		SELECT_COLUMN_WIDTH: compact ? 32 : 40,
-		ACTION_COLUMN_WIDTH: compact ? 32 : 40,
-		NEST_SPACING: compact ? 24 : 32
-	};
-}
-//#endregion
-//#region components/DataTable/FloatingActionBar.tsx
-const Bar = styled_components.default.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: ${({ theme }) => theme.color.background.primary};
-  width: 100%;
-  padding: ${_persona_design_tokens.Spacing[2]};
-  border-radius: ${_persona_design_tokens.BorderRadius.Md};
-  box-shadow: ${"0px 8px 14px 0px rgba(0, 0, 0, 0.06), 0px 3px 24px 0px rgba(0, 0, 0, 0.06)"};
-  gap: ${_persona_design_tokens.Spacing[8]};
-  min-width: 380px;
-`;
-const FloatingActionBar = ({ selectedCount, onClearSelection, extraContent, actions }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Bar, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
-		align: "center",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
-			size: "sm",
-			onClick: onClearSelection,
-			"aria-label": "Clear selection",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.XIcon, {})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Text.Paragraph, {
-			color: "primary",
-			children: [selectedCount, " selected"]
-		})]
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
-		align: "center",
-		spacing: _persona_design_tokens.Spacing[2],
-		children: [extraContent, actions.map((action, index) => {
-			const key = "label" in action ? action.label : `action-${index}`;
-			if ("popover" in action) {
-				let trigger = null;
-				if ("icon" in action && "aria-label" in action) trigger = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
-					size: "sm",
-					"aria-label": action["aria-label"],
-					children: action.icon
-				}, key);
-				else trigger = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
-					variant: action.variant || "basic",
-					size: "sm",
-					children: "label" in action ? action.label : ""
-				}, key);
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
-					trigger,
-					align: "center",
-					children: (action.popover?.options ?? []).map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
-						id: option.value,
-						onClick: () => action.popover.onOptionSelect(option.value),
-						children: option.label
-					}, option.value))
-				});
-			} else if ("icon" in action && "aria-label" in action) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
-				size: "sm",
-				"aria-label": action["aria-label"],
-				onClick: action.onClick,
-				children: action.icon
-			}, key);
-			else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
-				onClick: action.onClick,
-				variant: action.variant || "basic",
-				size: "sm",
-				children: "label" in action ? action.label : ""
-			}, key);
-		})]
-	})] });
-};
-//#endregion
-//#region components/DataTable/helpers.tsx
-const renderAsCheckbox = ({ rowId, isChecked, onChange, onValueChange, columnHeader, disabled, indeterminate }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.Checkbox, {
-		checked: isChecked,
-		onChange: (e) => {
-			onChange?.(e);
-			onValueChange?.(rowId, e.target.checked);
-		},
-		containerProps: { onClick: (e) => {
-			e.stopPropagation();
-		} },
-		"aria-label": columnHeader ? `${columnHeader} for row ${rowId}` : `Select row ${rowId}`,
-		indeterminate,
-		disabled
-	});
-};
-const renderAsCheckboxHeader = ({ header, isChecked, isIndeterminate, onChange, onValueChange }) => {
-	const checkbox = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.Checkbox, {
-		checked: isChecked,
-		indeterminate: isIndeterminate,
-		onChange: (e) => {
-			onChange?.(e);
-			onValueChange?.(e.target.checked);
-		},
-		containerProps: { onClick: (e) => {
-			e.stopPropagation();
-		} },
-		"aria-label": header ? `Select all ${header}` : "Select all"
-	});
-	if (header) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
-		spacing: _persona_design_tokens.Spacing[3],
-		align: "center",
-		children: [checkbox, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: header })]
-	});
-	return checkbox;
-};
-const DATE_FORMAT = "DD";
-const DATETIME_FORMAT = "MMM d, yyyy h:mm a";
-const renderAsString = (value) => {
-	if (value == null) return "";
-	return typeof value === "string" ? value : typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
-};
-const renderAsDate = (value, config) => {
-	if (value == null || typeof value !== "string") return "";
-	const date = luxon.DateTime.fromISO(value);
-	return date.isValid ? date.toFormat(config?.format ?? DATE_FORMAT) : "";
-};
-const renderAsDatetime = (value, config) => {
-	if (value == null || typeof value !== "string") return "";
-	const date = luxon.DateTime.fromISO(value);
-	return date.isValid ? date.toFormat(config?.format ?? DATETIME_FORMAT) : "";
-};
-const renderAsURL = (value) => {
-	if (value == null || typeof value !== "string" || value.length === 0) return "";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-		href: value,
-		target: "_blank",
-		rel: "noopener noreferrer",
-		children: value
-	});
-};
-const renderAsNumber = (value) => {
-	if (value == null) return "";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.TabularNumber, { children: value });
-};
-const createSticker = (item, config, key) => {
-	const displayLabel = config?.labels?.[item] ?? item;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Sticker.Sticker, {
-		variant: config?.colors?.[item] ?? config?.defaultColor,
-		children: displayLabel
-	}, key);
-};
-const renderAsSticker = (value, config) => {
-	if (value == null) return "";
-	if (Array.isArray(value)) {
-		if (value.length === 0) return "";
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			style: {
-				display: "flex",
-				flexWrap: "wrap",
-				gap: "4px",
-				alignItems: "center"
-			},
-			children: value.map((item, index) => typeof item === "string" ? createSticker(item, config, `${item}-${index}`) : null)
-		});
-	}
-	if (typeof value !== "string") return "";
-	return createSticker(value, config);
-};
-/** Inline monospace text — private DataTable primitive, avoids the dashboard Typography dep. */
-const MonoText = styled_components.default.span`
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-  font-size: 0.875em;
-`;
-const WrappingText = styled_components.default.span`
-  display: inline-block;
-  max-width: 100%;
-  word-break: break-word;
-  overflow-wrap: break-word;
-`;
-const EmptyImageContainer = styled_components.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: ${_persona_design_tokens.BorderRadius.Md};
-  background-color: ${({ theme }) => theme.color.background.secondary};
-  width: ${({ $width }) => $width ?? "200px"};
-  height: ${({ $height }) => $height ?? "144px"};
-  svg {
-    color: ${({ theme }) => theme.color.border.disabled};
-  }
-`;
-const LightweightImg = styled_components.default.img`
-  object-fit: ${({ $fit }) => $fit ?? "cover"};
-  display: block;
-`;
-const renderAsCopyableString = (value, config) => {
-	const valueAsString = renderAsString(value);
-	const content = config?.mono ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonoText, { children: valueAsString }) : valueAsString;
-	if (!valueAsString) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, { children: config?.emptyText ?? "" });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WrappingText, { children: config?.copyable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_HoverCopyableField.HoverCopyableField_default, {
-		copyValue: valueAsString,
-		children: content
-	}) : content });
-};
-const renderAsPii = (row, config) => {
-	if (!config || !row) return "";
-	const { isRedacted, piiValue, emptyText } = config;
-	const piiValueString = piiValue(row);
-	if (piiValueString == null || piiValueString.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, { children: emptyText }), config.subComponent?.(row)] });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Pii.Pii_default, {
-		isRedacted: isRedacted(row),
-		children: piiValueString
-	}), config.subComponent?.(row)] });
-};
-const renderAsLightweightImage = (value, config) => {
-	if (value == null || value === "" || Array.isArray(value) && value.length === 0) return config?.fallback ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: config.fallback }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyImageContainer, {
-		$width: config?.width,
-		$height: config?.height,
-		"aria-label": config?.alt ?? "image",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ImageIcon, {
-			size: 24,
-			"aria-label": "No image"
-		})
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LightweightImg, {
-		src: typeof value === "string" ? value : "",
-		alt: config?.alt ?? "image",
-		width: config?.width ?? "200px",
-		height: config?.height ?? "144px",
-		$fit: config?.fit
-	});
-};
-/**
-* Default PDS cell renderer. Handles all generic format types built into the design system.
-* Hosts should supply their own `renderFormat` prop to DataTable for format types that require
-* application-specific components (e.g. tags, files, PII masking, status indicators).
-*/
-const renderAsPDSFormat = (value, format, row) => {
-	switch (format?.type) {
-		case "date": return renderAsDate(value, format.config);
-		case "datetime": return renderAsDatetime(value, format.config);
-		case "sticker": return renderAsSticker(value, format.config);
-		case "url": return renderAsURL(value);
-		case "number": return renderAsNumber(value);
-		case "image": return renderAsLightweightImage(value, format.config);
-		case "checkbox": return "";
-		case "id": return renderAsCopyableString(value, {
-			copyable: true,
-			mono: true,
-			...format.config
-		});
-		case "pii": return renderAsPii(row, format.config);
-		default: return renderAsCopyableString(value, format?.config);
-	}
-};
-//#endregion
-//#region components/DataTable/Inserter.tsx
-const InserterTableCell = (0, styled_components.default)(require_Table.TableCell)`
-  padding: 0 !important;
-  ${({ $nestSpacing }) => $nestSpacing ? `padding-left: ${$nestSpacing}px !important` : ""};
-  height: 0;
-  position: relative;
-  border: 0;
-  z-index: ${require_lib_zindex.Z_INDICES.withShadow};
-`;
-const AddRowLine = styled_components.default.div`
-  position: absolute;
-  top: -1px;
-  background-color: ${({ theme }) => theme.color.primary.brand};
-  width: ${({ $nestSpacing }) => $nestSpacing ? `calc(100% - ${$nestSpacing}px)` : "100%"};
-  transition-duration: ${"200ms"};
-  transition-property: opacity;
-  transition-timing-function: ease-in;
-`;
-const StyledPlusButton = styled_components.default.button`
-  position: absolute;
-  top: -7px;
-  left: calc(50% - 8px);
-  border-radius: 50%;
-  height: 14px;
-  width: 14px;
-  background-color: ${({ theme }) => theme.color.primary.brand};
-  cursor: pointer;
-  z-index: ${require_lib_zindex.Z_INDICES.withShadow};
-  // TODO: Add a focus style
-
-  opacity: 0;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  &:hover ~ ${AddRowLine} {
-    opacity: 1;
-    height: 2px;
-  }
-`;
-const StyledTableRow = (0, styled_components.default)(require_Table.TableRow)`
-  &${require_lib_pseudoClass.isFocused} {
-    box-shadow: none;
-  }
-  cursor: pointer;
-  &:hover > ${AddRowLine}, &:focus > ${AddRowLine} {
-    opacity: 1;
-    height: 2px;
-  }
-
-  &:hover > ${StyledPlusButton}, &:focus > ${StyledPlusButton} {
-    opacity: 1;
-  }
-`;
-const HoverArea = styled_components.default.div`
-  position: absolute;
-  height: 12px;
-  top: -6px;
-  width: ${({ $nestSpacing }) => $nestSpacing ? `calc(100% - ${$nestSpacing}px)` : "100%"};
-  z-index: ${require_lib_zindex.Z_INDICES.withShadow};
-  &:hover ~ ${AddRowLine} {
-    opacity: 1;
-    height: 2px;
-  }
-
-  &:hover ~ ${StyledPlusButton} {
-    opacity: 1;
-  }
-`;
-const StyledPlusIcon = (0, styled_components.default)(_persona_icons_12px.PlusIcon)`
-  position: absolute;
-  top: 1px;
-  left: 1px;
-`;
-const Inserter = ({ priorRowLabel, colSpan, nestSpacing = 0, label, onAddRow }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableRow, {
-		onKeyDown: (evt) => {
-			if (evt.key === " " || evt.key === "Enter") {
-				evt.preventDefault();
-				evt.stopPropagation();
-				onAddRow();
-			}
-		},
-		tabIndex: 0,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InserterTableCell, {
-			colSpan,
-			$nestSpacing: nestSpacing,
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HoverArea, {
-					$nestSpacing: nestSpacing,
-					role: "presentation",
-					"aria-label": label || `Insert a row after ${priorRowLabel}`,
-					onClick: onAddRow
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPlusButton, {
-					id: `${(0, lodash.kebabCase)(priorRowLabel)}-inserter`,
-					"aria-label": label || `Insert a row after ${priorRowLabel}`,
-					onClick: onAddRow,
-					type: "button",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPlusIcon, { color: _persona_design_tokens.Color.BackgroundButtonInverse })
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddRowLine, {
-					$nestSpacing: nestSpacing,
-					onClick: onAddRow
-				})
-			]
-		})
-	});
-};
-//#endregion
-//#region components/DataTable/useTableColumns.tsx
-const ExpandButton = styled_components.default.button`
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  margin: 0;
-`;
-const ExpandColumnDisabledChevron = (0, styled_components.default)(_persona_icons.ChevronRightIcon)`
-  color: ${({ theme }) => theme.color.text.disabled};
-`;
-/** Shared wrapper so disabled chevrons and expand buttons share the same horizontal alignment. */
-const ExpandColumnPlaceholder = styled_components.default.span`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-`;
-function useTableColumns({ columns, data, compact, sort, clientSearch, clientFiltering, expandColumnVisibility = "auto", showControls, enableRowSelection = false, enableSubRowSelection = true, rowActions, getRowId, expandedRows, toggleRowExpansion, canRowExpand, checkboxColumnStates, handleCheckboxCellChange, handleSelectAllCheckboxCell, getSelfAndNestedRowIds, handleRowSelectionWithShift, renderFormat }) {
-	const { EXPAND_COLUMN_WIDTH, SELECT_COLUMN_WIDTH, ACTION_COLUMN_WIDTH } = getColumnWidths(compact);
-	const rowActionsRef = (0, react.useRef)(rowActions);
-	rowActionsRef.current = rowActions;
-	const renderActionCell = (0, react.useCallback)((props) => {
-		const currentRowActions = rowActionsRef.current;
-		const actions = typeof currentRowActions === "function" ? currentRowActions(props.row.original) : currentRowActions;
-		if (!actions || actions.length === 0) return null;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
-			trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
-				id: `data-table__row-actions-button--${props.row.id}`,
-				variant: "text",
-				width: "icon",
-				size: "sm",
-				onClick: (e) => {
-					e.preventDefault();
-					e.stopPropagation();
-				},
-				"aria-label": `View actions for row ${props.row.index + 1}`,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.MoreIcon, {})
-			}),
-			portal: true,
-			children: actions.map(({ label, onClick, ...menuItemProps }, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
-				id: `data-table__row-actions--${props.row.id}-${i}`,
-				onClick: (e) => {
-					e.preventDefault();
-					e.stopPropagation();
-					onClick(props.row.id);
-				},
-				...menuItemProps,
-				children: label
-			}, label.toLowerCase().replace(/ /g, "-")))
-		});
-	}, []);
-	const hasRowActions = rowActions != null;
-	return (0, react.useMemo)(() => {
-		const columnHelper = (0, _tanstack_react_table.createColumnHelper)();
-		const tableColumns = columns.map((column) => {
-			if (typeof column === "object") {
-				const columnHelperOptions = {
-					header: column.header,
-					id: column.id || column.accessor,
-					sortUndefined: -1,
-					meta: {
-						align: column.align,
-						minWidth: column.minWidth,
-						width: column.width,
-						headerTooltip: column.headerTooltip
-					},
-					minSize: column.minWidth
-				};
-				if (column.renderCell != null) {
-					const renderCell = column.renderCell;
-					columnHelperOptions.cell = (props) => renderCell({
-						cellValue: props.getValue(),
-						row: props.row.original
-					});
-					columnHelperOptions.enableSorting = sort != null && (column.enableSorting ?? false);
-				} else if (column.format?.type === "checkbox") {
-					const columnId = column.id || column.accessor;
-					columnHelperOptions.header = (headerProps) => {
-						const columnState = checkboxColumnStates[columnId] || /* @__PURE__ */ new Set();
-						const allRowIds = data.flatMap((row, index) => getSelfAndNestedRowIds(row, [index]));
-						const isChecked = allRowIds.length > 0 && allRowIds.every((id) => columnState.has(id));
-						const isIndeterminate = !isChecked && allRowIds.some((id) => columnState.has(id));
-						if (typeof column.header === "function") return column.header(headerProps);
-						return renderAsCheckboxHeader({
-							header: column.header,
-							isChecked,
-							isIndeterminate,
-							onValueChange: (checked) => handleSelectAllCheckboxCell(columnId, checked)
-						});
-					};
-					columnHelperOptions.cell = (props) => {
-						const rowId = getRowId ? getRowId(props.row.original) : props.row.id;
-						return renderAsCheckbox({
-							rowId,
-							isChecked: (checkboxColumnStates[columnId] || /* @__PURE__ */ new Set()).has(rowId),
-							onValueChange: (rowId, checked) => handleCheckboxCellChange(columnId, rowId, checked),
-							columnHeader: typeof column.header === "string" ? column.header : void 0
-						});
-					};
-					columnHelperOptions.enableSorting = false;
-				} else {
-					columnHelperOptions.cell = (props) => renderFormat(props?.getValue(), column.format, props.row.original);
-					columnHelperOptions.enableSorting = sort != null && column.enableSorting;
-				}
-				columnHelperOptions.enableGlobalFilter = clientSearch && (column.searchable ?? true);
-				columnHelperOptions.enablePinning = column.pinned ?? false;
-				if (clientFiltering && column.filter) {
-					const filterConfig = column.filter;
-					if (filterConfig.enabled !== false) {
-						columnHelperOptions.enableColumnFilter = true;
-						if (filterConfig.filterFn) columnHelperOptions.filterFn = filterConfig.filterFn;
-					}
-				}
-				return columnHelper.accessor(column.accessor, columnHelperOptions);
-			}
-			return columnHelper.accessor(column, {
-				header: (0, lodash_fp_startCase_js.default)(column),
-				enableGlobalFilter: Boolean(clientSearch),
-				enableSorting: sort != null
-			});
-		});
-		if (showControls && enableRowSelection) tableColumns.unshift(columnHelper.display({
-			id: "select-col",
-			enablePinning: true,
-			enableResizing: false,
-			size: SELECT_COLUMN_WIDTH,
-			meta: { width: SELECT_COLUMN_WIDTH },
-			header: ({ table }) => renderAsCheckboxHeader({
-				isChecked: table.getIsAllRowsSelected(),
-				isIndeterminate: table.getIsSomeRowsSelected(),
-				onChange: table.getToggleAllRowsSelectedHandler()
-			}),
-			cell: ({ row, table }) => renderAsCheckbox({
-				rowId: row.id,
-				isChecked: row.getIsSelected(),
-				onChange: (e) => handleRowSelectionWithShift(row, table, e.target.checked, e.nativeEvent instanceof MouseEvent && e.nativeEvent.shiftKey),
-				indeterminate: enableSubRowSelection && row.getIsSomeSelected(),
-				disabled: !row.getCanSelect()
-			})
-		}));
-		if (expandColumnVisibility === "always" || data.some(canRowExpand)) tableColumns.unshift(columnHelper.display({
-			id: "expand-col",
-			enablePinning: true,
-			enableResizing: false,
-			size: EXPAND_COLUMN_WIDTH,
-			meta: { width: EXPAND_COLUMN_WIDTH },
-			header: "",
-			cell: ({ row }) => {
-				const rowData = row.original;
-				if (!canRowExpand(rowData)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandColumnPlaceholder, {
-					"aria-hidden": true,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandColumnDisabledChevron, {})
-				});
-				const rowId = getRowId ? getRowId(rowData) : row.id;
-				const isExpanded = expandedRows.has(rowId);
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandColumnPlaceholder, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandButton, {
-					type: "button",
-					id: `datatable-expand-${rowId}`,
-					onClick: (e) => {
-						e.stopPropagation();
-						toggleRowExpansion(rowId);
-					},
-					onKeyDown: (e) => {
-						if (e.key === "Enter" || e.key === " ") {
-							e.preventDefault();
-							e.stopPropagation();
-							toggleRowExpansion(rowId);
-						}
-					},
-					"aria-label": isExpanded ? `Hide details for row ${rowId}` : `View details for row ${rowId}`,
-					"aria-expanded": isExpanded,
-					children: isExpanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ChevronDownIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ChevronRightIcon, {})
-				}) });
-			}
-		}));
-		if (hasRowActions) {
-			const emptyHeader = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
-			tableColumns.push(columnHelper.display({
-				id: "action-col",
-				enableResizing: false,
-				size: ACTION_COLUMN_WIDTH,
-				meta: { width: ACTION_COLUMN_WIDTH },
-				header: emptyHeader,
-				cell: renderActionCell
-			}));
-		}
-		return [tableColumns, columns.map((column) => {
-			const key = typeof column === "object" ? column.accessor : column;
-			return {
-				key,
-				label: typeof column === "object" ? typeof column.header === "string" ? column.header : key : (0, lodash_fp_startCase_js.default)(column)
-			};
-		})];
-	}, [
-		columns,
-		enableRowSelection,
-		hasRowActions,
-		renderActionCell,
-		showControls,
-		sort,
-		clientSearch,
-		clientFiltering,
-		data,
-		canRowExpand,
-		expandColumnVisibility,
-		expandedRows,
-		toggleRowExpansion,
-		getRowId,
-		checkboxColumnStates,
-		handleCheckboxCellChange,
-		handleSelectAllCheckboxCell,
-		handleRowSelectionWithShift,
-		renderFormat
-	]);
-}
-//#endregion
-//#region components/DataTable/DataTable.tsx
-const TableEmptyState = styled_components.default.td`
-  vertical-align: middle;
-  text-align: center;
-  width: 100%;
-  height: 176px;
-`;
-const StyledTableLayout = (0, styled_components.default)(require_Table.TableLayout)`
-  ${({ $onAddRow }) => $onAddRow && styled_components.css`
-      padding-bottom: ${_persona_design_tokens.Spacing[3]};
-    `}
-`;
-const TableContainer = styled_components.default.div`
-  position: relative;
-
-  ${({ $stickyHeader }) => $stickyHeader && styled_components.css`
-      flex-grow: 1;
-      overflow: auto;
-      display: flex;
-      flex-direction: column;
-    `}
-`;
-const DataTableControls = (0, styled_components.default)(require_TableControls.TableControls)``;
-const DataTableContainer = styled_components.default.div`
-  ${({ $stickyHeader }) => $stickyHeader && styled_components.css`
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    `}
-`;
-const StyledTableActionTD = (0, styled_components.default)(require_Table.TableActionTD)`
-  ${({ $nestSpacing }) => styled_components.css`
-    ${$nestSpacing && styled_components.css`
-      position: relative;
-      left: ${$nestSpacing}px;
-    `}
-  `}
-`;
-const StyledTableTD = (0, styled_components.default)(require_Table.TableTD)`
-  // Move the cell to the right by the amount of the nest spacing, and
-  // add same amount of padding to the right to not overlap with the next cell
-  ${({ $nestSpacing, $isFeatureCol }) => styled_components.css`
-    ${$nestSpacing && styled_components.css`
-      position: relative;
-      left: ${$nestSpacing}px;
-    `}
-    ${!$isFeatureCol && styled_components.css`
-      padding-right: ${$nestSpacing}px;
-    `}
-  `}
-`;
-const DetailsTD = (0, styled_components.default)(require_Table.TableTD)`
-  padding: 0;
-  border-top: none;
-  border-left: none;
-  border-right: none;
-`;
-const StickyDetailsTD = (0, styled_components.default)(require_Table.StickyTD)`
-  padding: 0;
-  border-top: none;
-  border-left: none;
-  border-right: none;
-`;
-const StickyTDWithGapCoverage = (0, styled_components.default)(require_Table.StickyTD)`
-  ${({ $gapCoverage, theme }) => $gapCoverage && styled_components.css`
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: ${-$gapCoverage}px;
-        width: ${$gapCoverage}px;
-        height: calc(100% + 1px); // +1px to cover the bottom border
-        background-color: ${theme.color.background.primary};
-      }
-    `}
-`;
-const FloatingActionBarContainer = styled_components.default.div`
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-`;
-const isServerPagination = (pagination) => {
-	return typeof pagination === "object" && !("clientPagination" in pagination);
-};
-const isClientPagination = (pagination) => {
-	return typeof pagination === "object" && "clientPagination" in pagination;
-};
-const isServerSorting = (sort) => {
-	return typeof sort === "object";
-};
-const isRowWithDetails = (row) => {
-	return row != null && typeof row === "object" && "_details" in row && row._details != null;
-};
-const isRowWithSubrows = (row) => {
-	return row != null && typeof row === "object" && "subrows" in row && row.subrows != null;
-};
-const isRowWithSubrowsToAlwaysShowIds = (row) => {
-	return row != null && typeof row === "object" && "subrowsToAlwaysShowIds" in row && row.subrowsToAlwaysShowIds != null;
-};
-const isRowWithTourTarget = (row) => {
-	return row != null && typeof row === "object" && "dataTourTarget" in row && typeof row.dataTourTarget === "string";
-};
-const DISPLAYED_ROW_IDS_SEPARATOR = "";
-/**
-* The DataTable component is the core of Persona's table experiences.
-*
-* This component implements `@tanstack/react-table` and exposes a simplified, easy to use API.
-*
-* Planned functionality
-* - Column visibility, reordering
-* - Row selection
-* - Cell types (e.g. links, buttons, Stickers)
-*
-* Client-side support
-* - ✅ Sorting
-* - ✅ Search (enable with clientSearch prop)
-* - ✅ Pagination
-* - ✅ Filtering (requires explicit filter configuration in TableControls)
-*
-* Server-side support
-* - ✅ Sorting
-* - ✅ Filtering
-* - ✅ Pagination
-*
-* @example
-* // Basic usage with client-side search
-* <DataTable
-*   data={data}
-*   columns={columns}
-*   showControls={true}
-*   clientSearch={{ placeholder: "Search accounts..." }}
-* />
-*
-* @example
-* // Column-level search control
-* const columns = [
-*   { accessor: 'id', header: 'ID', searchable: false },
-*   { accessor: 'name', header: 'Name' }, // searchable by default
-*   { accessor: 'email', header: 'Email' },
-* ];
-*/
-/** Maps a column filter-type string to the corresponding TanStack filterFn name. */
-const getFilterFnName = (filterType) => {
-	switch (filterType) {
-		case "select": return "equals";
-		case "multiselect":
-		case "multiselect-alt":
-		case "multiselect-legacy": return "arrIncludesSome";
-		case "input": return "includesString";
-		default: return "equals";
-	}
-};
-const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "auto", showControls, controls, emptyState, isLoading, pagination, sort, sortDescFirst, enableSortingRemoval, showColumnProperties = false, onUpdateColumnProperties, enableRowSelection = false, enableSubRowSelection = true, getRowId, getRowLabel, getRowSelectable, getLinkToRow, rowLinkPrefix, rowLinkComponent, compact, disableRowHover, title, clientSearch = false, searchTerm: controlledSearchTerm, onSearchTermChange, manualFiltering, expandedRowIds: controlledExpandedRowIds, onExpandedRowsChange, clientFiltering = false, columnFilters: controlledColumnFilters, hasExternalActiveFilters = false, onColumnFiltersChange, renderFormat, rowActions, bulkActions, getAvailableBulkActions, onRowSelectionChange, onAddRow, stickyHeader = false, canAddAfterRow, onRowClick, activeRowId, onDisplayedRowIdsChange, pinnedColumnLeftOffset = 0, floatingBarContent }) => {
-	const DEFAULT_SEARCH_PLACEHOLDER = "Search...";
-	const { NEST_SPACING, EXPAND_COLUMN_WIDTH } = getColumnWidths(compact);
-	const [columnVisibility, setColumnVisibility] = (0, react.useState)(() => {
-		const visibility = {};
-		columns.forEach((column) => {
-			const columnId = typeof column === "object" ? column.id ?? column.accessor : column;
-			visibility[columnId] = typeof column === "object" ? column.visibility ?? true : true;
-		});
-		return visibility;
-	});
-	const [columnOrder, setColumnOrder] = (0, react.useState)([]);
-	const [rowSelection, setRowSelection] = (0, react.useState)({});
-	const lastSelectedRowIdRef = (0, react.useRef)(null);
-	const isSearchControlled = controlledSearchTerm != null;
-	const [internalSearchTerm, setInternalSearchTerm] = (0, react.useState)(typeof clientSearch === "object" ? clientSearch.initialValue || "" : "");
-	const globalFilter = isSearchControlled ? controlledSearchTerm : internalSearchTerm;
-	const setGlobalFilter = (0, react.useCallback)((value) => {
-		if (isSearchControlled) onSearchTermChange?.(value);
-		else setInternalSearchTerm(value);
-	}, [isSearchControlled, onSearchTermChange]);
-	const isColumnFiltersControlled = controlledColumnFilters != null;
-	const [internalColumnFilters, setInternalColumnFilters] = (0, react.useState)([]);
-	const columnFilters = isColumnFiltersControlled ? controlledColumnFilters : internalColumnFilters;
-	const setColumnFilters = (0, react.useCallback)((updater) => {
-		const next = typeof updater === "function" ? updater(columnFilters) : updater;
-		if (!isColumnFiltersControlled) setInternalColumnFilters(next);
-		onColumnFiltersChange?.(next);
-	}, [
-		columnFilters,
-		isColumnFiltersControlled,
-		onColumnFiltersChange
-	]);
-	const isExpansionControlled = controlledExpandedRowIds != null;
-	const [internalExpandedRows, setInternalExpandedRows] = (0, react.useState)(/* @__PURE__ */ new Set());
-	const expandedRows = isExpansionControlled ? controlledExpandedRowIds : internalExpandedRows;
-	const setExpandedRows = (0, react.useCallback)((updater) => {
-		if (isExpansionControlled) {
-			const newValue = updater(expandedRows);
-			onExpandedRowsChange?.(newValue);
-		} else setInternalExpandedRows(updater);
-	}, [
-		expandedRows,
-		isExpansionControlled,
-		onExpandedRowsChange
-	]);
-	const [checkboxColumnStates, setCheckboxColumnStates] = (0, react.useState)({});
-	const orderMap = columnOrder.reduce((acc, columnId, index) => {
-		acc[columnId] = index;
-		return acc;
-	}, {});
-	/**
-	* If basic client pagination is enabled, create a configuration object for client pagination.
-	*/
-	if (pagination === true) pagination = {
-		clientPagination: true,
-		pageSize: 10
-	};
-	const canRowExpand = (0, react.useCallback)((rowData) => {
-		if (isRowWithSubrows(rowData)) return rowData.subrows.length > 0;
-		if (isRowWithDetails(rowData)) return Boolean(rowData._details);
-		return detailComponent != null;
-	}, [detailComponent]);
-	const initialColumnPinning = (0, react.useMemo)(() => {
-		const pinnedColumns = [];
-		if (columns.some((column) => typeof column === "object" && column.pinned)) {
-			if (expandColumnVisibility === "always" || data.some(canRowExpand)) pinnedColumns.push("expand-col");
-			if (showControls && enableRowSelection) pinnedColumns.push("select-col");
-			columns.forEach((column) => {
-				if (typeof column === "object" && column.pinned) pinnedColumns.push(column.accessor);
-			});
-		}
-		return { left: pinnedColumns };
-	}, [
-		columns,
-		data,
-		canRowExpand,
-		expandColumnVisibility,
-		showControls,
-		enableRowSelection
-	]);
-	const toggleRowExpansion = (0, react.useCallback)((rowId) => {
-		setExpandedRows((prev) => {
-			const newSet = new Set(prev);
-			if (newSet.has(rowId)) newSet.delete(rowId);
-			else newSet.add(rowId);
-			return newSet;
-		});
-	}, [setExpandedRows]);
-	const dispatchCheckboxCellOnUpdate = (0, react.useCallback)((columnId, columnState) => {
-		const column = columns.find((col) => typeof col === "object" && col.accessor === columnId && col.format?.type === "checkbox");
-		if (column && typeof column === "object" && column.format?.type === "checkbox") column.format.onUpdate(Array.from(columnState));
-	}, [columns]);
-	const handleCheckboxCellChange = (0, react.useCallback)((columnId, rowId, checked) => {
-		setCheckboxColumnStates((prev) => {
-			const newStates = { ...prev };
-			if (!newStates[columnId]) newStates[columnId] = /* @__PURE__ */ new Set();
-			const columnState = new Set(newStates[columnId]);
-			if (checked) columnState.add(rowId);
-			else columnState.delete(rowId);
-			newStates[columnId] = columnState;
-			dispatchCheckboxCellOnUpdate(columnId, columnState);
-			return newStates;
-		});
-	}, [dispatchCheckboxCellOnUpdate]);
-	const getSelfAndNestedRowIds = (0, react.useCallback)((row, indexPath) => {
-		const rowId = getRowId ? getRowId(row) : indexPath.join(".");
-		if (isRowWithSubrows(row)) return [rowId, ...(row.subrows ?? []).map((subrow, subrowIndex) => getSelfAndNestedRowIds(subrow, [...indexPath, subrowIndex])).flat()];
-		return [rowId];
-	}, [getRowId]);
-	const handleSelectAllCheckboxCell = (0, react.useCallback)((columnId, checked) => {
-		setCheckboxColumnStates((prev) => {
-			const newStates = { ...prev };
-			let columnState;
-			if (checked) {
-				const allRowIds = data.flatMap((row, index) => getSelfAndNestedRowIds(row, [index]));
-				columnState = new Set(allRowIds);
-			} else columnState = /* @__PURE__ */ new Set();
-			newStates[columnId] = columnState;
-			dispatchCheckboxCellOnUpdate(columnId, columnState);
-			return newStates;
-		});
-	}, [
-		data,
-		getRowId,
-		dispatchCheckboxCellOnUpdate
-	]);
-	const tableOptions = (0, react.useMemo)(() => {
-		const options = {};
-		if (isClientPagination(pagination)) {
-			options.getPaginationRowModel = (0, _tanstack_react_table.getPaginationRowModel)();
-			options.initialState = { pagination: { pageSize: pagination.pageSize } };
-		} else if (isServerPagination(pagination)) {
-			const currentPage = pagination.paginationParams?.["current-page"] || 1;
-			const pageSize = pagination.pageSize || 10;
-			options.manualPagination = true;
-			options.onPaginationChange = (updaterOrValue) => {
-				const oldPageSize = pageSize;
-				const oldPageIndex = currentPage - 1;
-				if (typeof updaterOrValue === "function") {
-					const newPaginationState = updaterOrValue({
-						pageSize,
-						pageIndex: currentPage - 1
-					});
-					if (newPaginationState.pageSize !== oldPageSize) pagination.handlePageSizeClick(newPaginationState.pageSize);
-					if (newPaginationState.pageIndex !== oldPageIndex) pagination.handlePageLinkClick(newPaginationState.pageIndex + 1);
-				}
-			};
-			options.state = { pagination: {
-				pageSize,
-				pageIndex: currentPage - 1
-			} };
-			options.rowCount = pagination?.paginationParams?.["total-count"];
-			options.pageCount = pagination?.paginationParams?.["total-pages"];
-		}
-		if (sort === true) {
-			options.getSortedRowModel = (0, _tanstack_react_table.getSortedRowModel)();
-			options.enableSorting = true;
-		} else if (isServerSorting(sort)) {
-			options.manualSorting = true;
-			options.enableSorting = true;
-			options.onSortingChange = (updaterOrValue) => {
-				if (typeof updaterOrValue === "function") {
-					const newSortingState = updaterOrValue(sort.state);
-					sort.handleSortClick(newSortingState);
-				}
-			};
-			options.state = {
-				...options.state ? options.state : {},
-				sorting: sort.state
-			};
-		} else options.enableSorting = false;
-		if (showControls && enableRowSelection) {
-			options.enableRowSelection = getRowSelectable ? (row) => getRowSelectable(row.original) : true;
-			options.onRowSelectionChange = setRowSelection;
-		}
-		if (!enableSubRowSelection) options.enableSubRowSelection = false;
-		if (clientSearch) {
-			if (manualFiltering) options.manualFiltering = true;
-			else {
-				options.getFilteredRowModel = (0, _tanstack_react_table.getFilteredRowModel)();
-				options.globalFilterFn = "includesString";
-			}
-			options.onGlobalFilterChange = setGlobalFilter;
-		}
-		if (clientFiltering) {
-			options.getFilteredRowModel = (0, _tanstack_react_table.getFilteredRowModel)();
-			options.onColumnFiltersChange = setColumnFilters;
-		}
-		const columnOptionsVisibility = {};
-		columns.forEach((column) => {
-			const columnId = typeof column === "object" ? column.id || column.accessor : column;
-			if (typeof column === "object" && "visibility" in column && column.visibility != null) columnOptionsVisibility[columnId] = column.visibility;
-			else columnOptionsVisibility[columnId] = columnVisibility[columnId] ?? true;
-		});
-		options.state = {
-			...options.state,
-			columnVisibility: columnOptionsVisibility
-		};
-		const expandedState = {};
-		for (const rowId of expandedRows) expandedState[rowId] = true;
-		options.state = {
-			...options.state,
-			columnOrder,
-			rowSelection,
-			columnPinning: initialColumnPinning,
-			expanded: expandedState,
-			...clientSearch && { globalFilter },
-			...clientFiltering && { columnFilters }
-		};
-		options.onColumnVisibilityChange = setColumnVisibility;
-		options.onColumnOrderChange = setColumnOrder;
-		options.enableSortingRemoval = enableSortingRemoval;
-		options.sortDescFirst = sortDescFirst;
-		options.enableColumnPinning = initialColumnPinning.left && initialColumnPinning.left.length > 0;
-		return options;
-	}, [
-		pagination,
-		columnVisibility,
-		columnOrder,
-		enableRowSelection,
-		enableSubRowSelection,
-		rowSelection,
-		showControls,
-		sort,
-		enableSortingRemoval,
-		sortDescFirst,
-		clientSearch,
-		globalFilter,
-		clientFiltering,
-		columnFilters,
-		columns,
-		initialColumnPinning,
-		expandedRows
-	]);
-	const handleRowSelectionWithShift = (0, react.useCallback)((clickedRow, table, checked, isShiftKey) => {
-		const displayedRows = table.getRowModel().rows;
-		const currentIndex = displayedRows.findIndex((r) => r.id === clickedRow.id);
-		const lastSelectedRowId = lastSelectedRowIdRef.current;
-		const lastIndex = lastSelectedRowId != null ? displayedRows.findIndex((r) => r.id === lastSelectedRowId) : -1;
-		if (isShiftKey && lastIndex !== -1 && currentIndex !== -1) {
-			const startIndex = Math.min(lastIndex, currentIndex);
-			const endIndex = Math.max(lastIndex, currentIndex);
-			displayedRows.slice(startIndex, endIndex + 1).forEach((rangeRow) => {
-				if (rangeRow.getCanSelect()) rangeRow.toggleSelected(checked);
-			});
-		} else clickedRow.toggleSelected(checked);
-		lastSelectedRowIdRef.current = clickedRow.id;
-	}, []);
-	const [tableColumns, columnOptions] = useTableColumns({
-		columns: (0, react.useMemo)(() => {
-			if (!clientFiltering) return columns;
-			return columns.map((column) => {
-				if (typeof column === "object" && column.filter != null && typeof column.filter === "object" && "type" in column.filter && typeof column.filter.type === "string") {
-					const filterType = column.filter.type;
-					return {
-						...column,
-						filter: {
-							...column.filter,
-							filterFn: getFilterFnName(filterType)
-						}
-					};
-				}
-				return column;
-			});
-		}, [columns, clientFiltering]),
-		data,
-		compact,
-		sort,
-		clientSearch,
-		clientFiltering,
-		expandColumnVisibility,
-		showControls,
-		enableRowSelection,
-		enableSubRowSelection,
-		rowActions,
-		getRowId,
-		expandedRows,
-		toggleRowExpansion,
-		canRowExpand,
-		checkboxColumnStates,
-		handleCheckboxCellChange,
-		handleSelectAllCheckboxCell,
-		getSelfAndNestedRowIds,
-		handleRowSelectionWithShift,
-		renderFormat: renderFormat ?? renderAsPDSFormat
-	});
-	const expandRowsCustom = (0, react.useCallback)((rowModel) => {
-		const expandedRows = [];
-		const handleRow = (row) => {
-			expandedRows.push(row);
-			if (row.subRows?.length && row.getIsExpanded()) row.subRows.forEach(handleRow);
-			else if (isRowWithSubrowsToAlwaysShowIds(row.original)) row.subRows.filter((subrow) => row.original.subrowsToAlwaysShowIds.includes(subrow.id)).forEach(handleRow);
-		};
-		rowModel.rows.forEach(handleRow);
-		return {
-			rows: expandedRows,
-			flatRows: rowModel.flatRows,
-			rowsById: rowModel.rowsById
-		};
-	}, []);
-	function getExpandedRowModelCustom() {
-		return (table) => (0, _tanstack_react_table.memo)(() => [
-			table.getState().expanded,
-			table.getPreExpandedRowModel(),
-			table.options.paginateExpandedRows
-		], (expanded, rowModel, paginateExpandedRows) => {
-			if (!rowModel.rows.length || expanded !== true && !Object.keys(expanded ?? {}).length) return expandRowsCustom(rowModel);
-			if (!paginateExpandedRows) return rowModel;
-			return expandRowsCustom(rowModel);
-		}, (0, _tanstack_react_table.getMemoOptions)(table.options, "debugTable", "getExpandedRowModel"));
-	}
-	const table = (0, _tanstack_react_table.useReactTable)({
-		data,
-		columns: tableColumns,
-		getSubRows: (row) => isRowWithSubrows(row) ? row.subrows : [],
-		getCoreRowModel: (0, _tanstack_react_table.getCoreRowModel)(),
-		getExpandedRowModel: getExpandedRowModelCustom(),
-		getRowId,
-		...tableOptions
-	});
-	const tableHeaderGroup = table.getHeaderGroups()[0];
-	const unprocessedRows = table.getCoreRowModel().rows;
-	const rows = table.getRowModel().rows;
-	const displayedRowIdsKey = rows.map((row) => row.id).join(DISPLAYED_ROW_IDS_SEPARATOR);
-	(0, react.useEffect)(() => {
-		onDisplayedRowIdsChange?.(displayedRowIdsKey ? displayedRowIdsKey.split(DISPLAYED_ROW_IDS_SEPARATOR) : []);
-	}, [displayedRowIdsKey, onDisplayedRowIdsChange]);
-	(0, react.useEffect)(() => {
-		const states = {};
-		const checkboxColumns = columns.filter((column) => typeof column === "object" && column.format?.type === "checkbox");
-		for (const column of checkboxColumns) {
-			const columnId = column.id || column.accessor;
-			const checkedRowIds = /* @__PURE__ */ new Set();
-			const getSelfAndNestedRows = (row) => [row, ...row.subRows.map(getSelfAndNestedRows).flat()];
-			const rootAndNestedRows = unprocessedRows.flatMap(getSelfAndNestedRows);
-			for (const row of rootAndNestedRows) {
-				const rowId = row.id;
-				if (row.original[column.accessor]) checkedRowIds.add(rowId);
-			}
-			states[columnId] = checkedRowIds;
-		}
-		setCheckboxColumnStates(states);
-	}, [unprocessedRows, columns]);
-	const generatedSearchProps = clientSearch ? {
-		value: globalFilter,
-		handleInput: setGlobalFilter,
-		placeholder: typeof clientSearch === "object" ? clientSearch.placeholder || DEFAULT_SEARCH_PLACEHOLDER : DEFAULT_SEARCH_PLACEHOLDER,
-		...typeof clientSearch === "object" && clientSearch
-	} : void 0;
-	const getCommonPinningStyles = (0, react.useCallback)((column) => {
-		const isPinned = column.getIsPinned();
-		const isLastPinned = isPinned === "left" && column.getIsLastColumn("left");
-		return {
-			left: isPinned === "left" ? `${column.getStart("left") + pinnedColumnLeftOffset}px` : void 0,
-			position: isPinned ? "sticky" : "relative",
-			hasRightBorder: isLastPinned
-		};
-	}, [pinnedColumnLeftOffset]);
-	/**
-	* Check if the column is a table feature column.
-	* Feature columns are special columns set by the table to
-	* allow a user to perform an action.
-	*/
-	const isFeatureCol = (columnId) => {
-		return [
-			"select-col",
-			"expand-col",
-			"action-col"
-		].includes(columnId);
-	};
-	const selectedRows = table.getFilteredSelectedRowModel().flatRows;
-	(0, react.useEffect)(() => {
-		onRowSelectionChange?.(selectedRows.map((row) => row.original));
-	}, [selectedRows, onRowSelectionChange]);
-	const actions = (0, react.useMemo)(() => {
-		return (getAvailableBulkActions ? getAvailableBulkActions(selectedRows.map((row) => row.original)) : bulkActions || controls?.bulkActions)?.map((action) => {
-			const clearSelection = () => table.setRowSelection({});
-			const baseAction = {
-				...action,
-				onClick: async () => {
-					await action.onClick(selectedRows.map((row) => row.id), clearSelection);
-				}
-			};
-			if ("popover" in action && action.popover) {
-				const popoverConfig = action.popover;
-				return {
-					...baseAction,
-					popover: {
-						options: popoverConfig.options,
-						onOptionSelect: async (option) => {
-							await popoverConfig.onOptionSelect(option, selectedRows.map((row) => row.id));
-							table.setRowSelection({});
-						}
-					}
-				};
-			}
-			return baseAction;
-		});
-	}, [
-		bulkActions,
-		getAvailableBulkActions,
-		selectedRows,
-		table,
-		controls?.bulkActions
-	]);
-	const shouldShowFloatingActionBar = compact && actions && actions.length > 0 && selectedRows.length > 0;
-	const hasGlobalFilter = clientSearch && globalFilter && globalFilter.trim().length > 0;
-	const hasFilters = columnFilters.length > 0;
-	const hasActiveFilters = hasGlobalFilter || hasFilters || hasExternalActiveFilters;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DataTableContainer, {
-		$stickyHeader: stickyHeader,
-		children: [
-			showControls && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableControls, {
-				compact,
-				title,
-				propertiesButton: showColumnProperties && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TableControls.TableViewConfigurationDropdown, {
-					disabled: false,
-					columnConfiguration: table.getVisibleFlatColumns().filter((column) => !isFeatureCol(column.columnDef.id ?? "")).map((column) => ({
-						key: column.id,
-						label: column.columnDef.header?.toString() || column.id
-					})).sort((a, b) => {
-						return (orderMap[a.key] || 0) - (orderMap[b.key] || 0);
-					}),
-					attributeOptions: columnOptions,
-					updateColumnConfiguration: (newConfiguration) => {
-						table.getAllColumns().map((column) => {
-							column.toggleVisibility(!!newConfiguration.find((c) => c.key === column.id));
-						});
-						setColumnOrder(newConfiguration.map((c) => c.key));
-						if (onUpdateColumnProperties) onUpdateColumnProperties(newConfiguration);
-					},
-					size: compact ? "sm" : void 0,
-					variant: compact ? "text" : "basic"
-				}),
-				selectedRows: table.getFilteredSelectedRowModel().flatRows.map((row) => row.id),
-				onClearSelection: () => table.setRowSelection({}),
-				searchProps: generatedSearchProps,
-				...controls,
-				bulkActions: actions
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableContainer, {
-				$stickyHeader: stickyHeader,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableLayout, {
-					$onAddRow: !!onAddRow,
-					stickyHeader,
-					headerTR: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: tableHeaderGroup.headers.map((header) => {
-						const pinningStyles = getCommonPinningStyles(header.column);
-						const isPinned = pinningStyles.position === "sticky";
-						const width = header.column.columnDef.meta?.width ? `${header.column.columnDef.meta?.width}px` : void 0;
-						const minWidth = header.column.columnDef.meta?.minWidth ? `${header.column.columnDef.meta?.minWidth}px` : width ?? `${header.column.getSize()}px`;
-						const thProps = {
-							id: header.id,
-							sortable: isFeatureCol(header.id) ? false : header.column.getCanSort(),
-							onClick: isFeatureCol(header.id) ? void 0 : header.column.getToggleSortingHandler(),
-							sortDirection: isFeatureCol(header.id) ? void 0 : header.column.getIsSorted(),
-							colSpan: header.colSpan,
-							align: header.column.columnDef.meta?.align,
-							width: header.column.columnDef.meta?.width ? `${header.column.columnDef.meta?.width}px` : void 0,
-							size: compact ? "sm" : "md",
-							style: { minWidth }
-						};
-						if (isPinned) return /* @__PURE__ */ (0, react.createElement)(require_Table.StickyTH, {
-							...thProps,
-							key: header.id,
-							left: pinningStyles.left ? parseInt(pinningStyles.left) : 0,
-							hasRightBorder: pinningStyles.hasRightBorder
-						}, (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()));
-						return /* @__PURE__ */ (0, react.createElement)(require_Table.TableTH, {
-							...thProps,
-							key: header.id
-						}, header.column.columnDef.meta?.headerTooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.TextUnderlineTooltip, {
-							side: "top",
-							tooltip: header.column.columnDef.meta.headerTooltip,
-							zIndex: require_lib_zindex.Z_INDICES.topNavTooltip,
-							children: (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
-						}) : (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()));
-					}) }),
-					nullState: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: "No results found." }),
-					isLoading,
-					size: compact ? "sm" : void 0,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableBody, { children: columns.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableTR, {
-						disableHoverBackground: true,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEmptyState, {
-							colSpan: 1,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
-								size: "lg",
-								weight: "bold",
-								color: "primary",
-								children: "No columns configured"
-							})
-						})
-					}) : rows.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableTR, {
-						disableHoverBackground: true,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableEmptyState, {
-							colSpan: tableHeaderGroup.headers.length,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
-								size: "lg",
-								weight: "bold",
-								color: "primary",
-								children: emptyState?.title || (hasActiveFilters ? "No results found. Try changing your filters." : "No results found.")
-							}), emptyState?.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
-								size: "md",
-								color: "secondary",
-								children: emptyState.description
-							})]
-						})
-					}) : rows.map((row) => {
-						const rowData = row.original;
-						const rowId = getRowId ? getRowId(rowData) : row.id;
-						const rowLabel = getRowLabel?.(rowData);
-						const isExpanded = expandedRows.has(rowId);
-						const canExpand = canRowExpand(rowData);
-						const dynamicNestSpacing = showControls && enableRowSelection ? NEST_SPACING + 8 : NEST_SPACING;
-						let leftMostNonSpecialColumnFound = false;
-						const rowElements = row.getVisibleCells().map((cell) => {
-							const pinningStyles = getCommonPinningStyles(cell.column);
-							const isPinned = pinningStyles.position === "sticky";
-							if (cell.column.id === "action-col") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableActionTD, {
-								style: { textAlign: cell.column.columnDef.meta?.align },
-								$nestSpacing: row.depth * dynamicNestSpacing,
-								children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
-							}, cell.id);
-							if (isPinned) {
-								const leftBumpFromNesting = !leftMostNonSpecialColumnFound ? row.depth * dynamicNestSpacing : 0;
-								const width = cell.column.columnDef.meta?.width ? `${cell.column.columnDef.meta?.width}px` : void 0;
-								const minWidth = cell.column.columnDef.meta?.minWidth ? `${cell.column.columnDef.meta?.minWidth}px` : width ?? `${cell.column.getSize()}px`;
-								const stickyTableCell = cell.column.id === "expand-col" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StickyTDWithGapCoverage, {
-									left: (pinningStyles.left ? parseInt(pinningStyles.left) : 0) + leftBumpFromNesting,
-									style: {
-										minWidth,
-										textAlign: cell.column.columnDef.meta?.align
-									},
-									hasRightBorder: pinningStyles.hasRightBorder,
-									$gapCoverage: leftBumpFromNesting,
-									children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
-								}, cell.id) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.StickyTD, {
-									left: (pinningStyles.left ? parseInt(pinningStyles.left) : 0) + leftBumpFromNesting,
-									style: {
-										minWidth,
-										textAlign: cell.column.columnDef.meta?.align
-									},
-									hasRightBorder: pinningStyles.hasRightBorder,
-									children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
-								}, cell.id);
-								if (!leftMostNonSpecialColumnFound && !isFeatureCol(cell.column.id)) leftMostNonSpecialColumnFound = true;
-								return stickyTableCell;
-							}
-							const tableCell = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableTD, {
-								style: { textAlign: cell.column.columnDef.meta?.align },
-								width: isFeatureCol(cell.column.id) ? "1%" : void 0,
-								$nestSpacing: leftMostNonSpecialColumnFound ? void 0 : row.depth * dynamicNestSpacing,
-								$isFeatureCol: isFeatureCol(cell.column.id),
-								children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
-							}, cell.id);
-							if (!leftMostNonSpecialColumnFound && !isFeatureCol(cell.column.id)) leftMostNonSpecialColumnFound = true;
-							return tableCell;
-						});
-						const isRowActive = rowId === activeRowId;
-						const handleRowClick = onRowClick != null ? () => {
-							onRowClick(rowId);
-						} : canExpand ? () => {
-							toggleRowExpansion(rowId);
-						} : void 0;
-						const rowProps = {
-							key: rowId,
-							"aria-label": rowLabel,
-							onClick: handleRowClick,
-							$isActive: isRowActive,
-							disableHoverBackground: disableRowHover,
-							css: { cursor: handleRowClick ? "pointer" : void 0 },
-							...isRowWithTourTarget(row.original) && { "data-tour-target": row.original.dataTourTarget }
-						};
-						const RowLinkComponent = rowLinkComponent ?? react_router_dom.Link;
-						const elements = [getLinkToRow || rowLinkPrefix ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableTR, {
-							...rowProps,
-							as: RowLinkComponent,
-							to: getLinkToRow ? getLinkToRow(row.original) : `${rowLinkPrefix}/${rowId}`,
-							children: rowElements
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableTR, {
-							...rowProps,
-							children: rowElements
-						})];
-						if (canExpand && isExpanded) {
-							let detailContent = null;
-							if (isRowWithDetails(rowData) && rowData._details) if (typeof rowData._details === "function") detailContent = rowData._details(rowData);
-							else detailContent = rowData._details;
-							else if (detailComponent) detailContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(detailComponent, { rowData });
-							if (detailContent) {
-								const detailCells = initialColumnPinning?.left?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.StickyTD, {
-									colSpan: 1,
-									left: pinnedColumnLeftOffset
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StickyDetailsTD, {
-									colSpan: tableHeaderGroup.headers.length - 1,
-									left: EXPAND_COLUMN_WIDTH + pinnedColumnLeftOffset,
-									children: detailContent
-								})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableTD, { colSpan: 1 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetailsTD, {
-									colSpan: tableHeaderGroup.headers.length - 1,
-									children: detailContent
-								})] });
-								elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableTR, {
-									disableHoverBackground: true,
-									children: detailCells
-								}, `${row.id}-details`));
-							}
-						}
-						if (onAddRow && (!canAddAfterRow || canAddAfterRow?.(rowData, row.getIsExpanded() && isRowWithSubrows(rowData)))) elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Inserter, {
-							priorRowLabel: `Row ${rowId}`,
-							colSpan: tableHeaderGroup.headers.length,
-							onAddRow: () => onAddRow(rowId, row.getIsExpanded() && isRowWithSubrows(rowData)),
-							nestSpacing: row.depth * dynamicNestSpacing
-						}, `${rowId}-inserter`));
-						return elements;
-					}) })
-				}), shouldShowFloatingActionBar && actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingActionBarContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingActionBar, {
-					selectedCount: selectedRows.length,
-					onClearSelection: () => table.setRowSelection({}),
-					actions,
-					extraContent: floatingBarContent
-				}) })]
-			}),
-			pagination && data.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Pagination.Pagination_default, {
-				pageSize: table.getState().pagination.pageSize,
-				pageSizeOptions: typeof pagination === "object" ? pagination.pageSizeOptions : void 0,
-				showPageSizeSelector: isServerPagination(pagination) ? pagination.showPageSizeSelector : void 0,
-				paginationParams: {
-					"current-page": table.getState().pagination.pageIndex + 1,
-					"total-count": table.getRowCount(),
-					"total-pages": table.getPageCount()
-				},
-				handlePageLinkClick: (pageNumber) => table.setPageIndex(pageNumber - 1),
-				handlePageSizeClick: table.setPageSize,
-				onPageChange: isServerPagination(pagination) ? pagination.onPageChange : void 0
-			})
-		]
-	});
-};
-//#endregion
-exports.DataTable = DataTable;
-exports.DataTableContainer = DataTableContainer;
-exports.DataTableControls = DataTableControls;
-exports.FloatingActionBar = FloatingActionBar;
-exports.FloatingActionBarContainer = FloatingActionBarContainer;
-exports.Inserter = Inserter;
-exports.default = DataTable;
-exports.getColumnWidths = getColumnWidths;
-exports.renderAsCheckbox = renderAsCheckbox;
-exports.renderAsCheckboxHeader = renderAsCheckboxHeader;
-exports.renderAsCopyableString = renderAsCopyableString;
-exports.renderAsDate = renderAsDate;
-exports.renderAsDatetime = renderAsDatetime;
-exports.renderAsLightweightImage = renderAsLightweightImage;
-exports.renderAsNumber = renderAsNumber;
-exports.renderAsPDSFormat = renderAsPDSFormat;
-exports.renderAsPii = renderAsPii;
-exports.renderAsSticker = renderAsSticker;
-exports.renderAsString = renderAsString;
-exports.renderAsURL = renderAsURL;
-exports.useTableColumns = useTableColumns;
-
-//# sourceMappingURL=index.cjs.map