@persona/design-system 0.1.8 → 0.2.0

package/dist/TableBox-CiuXCXyv.cjs

@@ -1,1370 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_mixins_focus = require("./mixins/focus.cjs");
-require("./variables/effect.cjs");
-require("./variables/transitions.cjs");
-const require_mixins_text = require("./mixins/text.cjs");
-const require_Stack = require("./Stack-UeifHn3c.cjs");
-const require_Tooltip = require("./Tooltip-olP3rdUO.cjs");
-const require_lib_reorderItems = require("./lib/reorderItems.cjs");
-const require_lib_useScrollOverflow = require("./lib/useScrollOverflow.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_useFormGroup = require("./useFormGroup-Bmnzgq0S.cjs");
-const require_Table = require("./Table-DxLvJYWK.cjs");
-const require_Combobox = require("./Combobox-COXvmxlM.cjs");
-const require_Popover = require("./Popover-BzgMAhsX.cjs");
-const require_FormControl = require("./FormControl-MkBXuUF6.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 = require("react");
-let _persona_icons = require("@persona/icons");
-let _persona_icons_12px = require("@persona/icons/12px");
-let lodash_fp_uniqueId_js = require("lodash/fp/uniqueId.js");
-lodash_fp_uniqueId_js = require_chunk.__toESM(lodash_fp_uniqueId_js);
-let _dnd_kit_core = require("@dnd-kit/core");
-let _dnd_kit_sortable = require("@dnd-kit/sortable");
-//#region components/TableBox/tableBoxKeyboardNavigation.ts
-const INLINE_EDITOR_SELECTOR = "[data-tablebox-inline-edit-trigger], input[role=\"combobox\"]";
-const findInlineEditor = (cell) => cell?.querySelector(INLINE_EDITOR_SELECTOR) ?? null;
-const isCaretAtNavigationBoundary = (input, direction) => {
-	const { selectionStart, selectionEnd, value } = input;
-	if (selectionStart == null || selectionEnd == null || selectionStart !== selectionEnd) return false;
-	return direction === "left" ? selectionStart === 0 : selectionEnd === value.length;
-};
-const focusAdjacentInlineEditor = (target, direction) => {
-	const currentCell = target.closest("td");
-	const currentRow = currentCell?.closest("tr");
-	if (!(currentCell instanceof HTMLTableCellElement) || currentRow == null) return false;
-	if (direction === "up" || direction === "down") {
-		const adjacentRow = direction === "up" ? currentRow.previousElementSibling : currentRow.nextElementSibling;
-		if (!(adjacentRow instanceof HTMLTableRowElement)) return false;
-		const adjacentEditor = findInlineEditor(adjacentRow.cells.item(currentCell.cellIndex));
-		adjacentEditor?.focus();
-		return adjacentEditor != null;
-	}
-	let adjacentCell = direction === "left" ? currentCell.previousElementSibling : currentCell.nextElementSibling;
-	while (adjacentCell instanceof HTMLTableCellElement) {
-		const adjacentEditor = findInlineEditor(adjacentCell);
-		if (adjacentEditor != null) {
-			adjacentEditor.focus();
-			return true;
-		}
-		adjacentCell = direction === "left" ? adjacentCell.previousElementSibling : adjacentCell.nextElementSibling;
-	}
-	return false;
-};
-//#endregion
-//#region components/TableBox/InlineCombobox.tsx
-const StyledCombobox = (0, styled_components.default)(require_Combobox.Combobox)`
-  border: none;
-  background-color: transparent;
-
-  /* Suppress the focus outline — it extends outside the input and is clipped
-     by the scroll container. Use && for specificity. */
-  && input,
-  && input:focus-visible:not(:disabled) {
-    outline: none;
-  }
-
-  ${({ $hideText }) => $hideText && `
-    input {
-      color: transparent;
-      caret-color: transparent;
-    }
-    input::placeholder {
-      color: transparent;
-    }
-  `}
-`;
-const ChildrenOverlay = styled_components.default.div`
-  position: absolute;
-  left: ${({ $hasLeadingError }) => $hasLeadingError ? _persona_design_tokens.Spacing[1] : _persona_design_tokens.Spacing[2]};
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 1;
-  pointer-events: none;
-
-  // ${_persona_design_tokens.Spacing[5]} matches the sm ComboboxInput padding-right, keeping the text clear of the caret.
-  ${({ $truncate }) => $truncate && `
-    right: ${_persona_design_tokens.Spacing[5]};
-  `}
-`;
-const ComboboxWrapper = styled_components.default.div`
-  position: relative;
-  width: 100%;
-`;
-const InlineCombobox = ({ itemId, value, columnKey, inlineEditConfig, children, rowRef, hasLeadingError }) => {
-	const [isOpen, setIsOpen] = (0, react.useState)(false);
-	const context = (0, react.useContext)(TableBoxContext);
-	const setColumnWidthsLocked = context?.setColumnWidthsLocked;
-	const currentColumn = context?.columns?.find((c) => c.key === columnKey);
-	const placeholder = inlineEditConfig?.placeholder || currentColumn?.title || "";
-	const portalContainerRef = (inlineEditConfig?.fullWidthComboboxDropdown || false) && rowRef ? rowRef : void 0;
-	const showOverlay = !isOpen && !!children;
-	const handleOpenChange = (0, react.useCallback)((open) => {
-		setIsOpen(open);
-		setColumnWidthsLocked?.(open);
-	}, [setColumnWidthsLocked]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ComboboxWrapper, {
-		onKeyDownCapture: (event) => {
-			if (isOpen || event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
-			const direction = event.key === "ArrowLeft" ? "left" : "right";
-			if (!(event.target instanceof HTMLInputElement) || !isCaretAtNavigationBoundary(event.target, direction)) return;
-			if (focusAdjacentInlineEditor(event.currentTarget, direction)) {
-				event.preventDefault();
-				event.stopPropagation();
-			}
-		},
-		children: [showOverlay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChildrenOverlay, {
-			$hasLeadingError: hasLeadingError,
-			$truncate: inlineEditConfig?.truncateDisplay,
-			children
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCombobox, {
-			$hideText: showOverlay,
-			value,
-			options: inlineEditConfig?.options || [],
-			onChange: (newValue) => {
-				if (inlineEditConfig?.onChange && newValue !== value && typeof newValue === "string") inlineEditConfig.onChange(itemId, newValue);
-			},
-			onOpenChange: handleOpenChange,
-			placeholder,
-			size: "sm",
-			portal: inlineEditConfig?.useComboboxPortal || false,
-			portalContainerRef
-		})]
-	});
-};
-//#endregion
-//#region components/TableBox/TableBoxRowContext.ts
-const TableBoxRowContext = (0, react.createContext)(null);
-//#endregion
-//#region components/TableBox/InlineInput.tsx
-const sharedInputStyles = styled_components.css`
-  font: inherit;
-  color: inherit;
-  outline: none;
-  border: none;
-  padding: 0;
-  pointer-events: auto;
-  width: 100%;
-  background: transparent;
-  line-height: ${_persona_design_tokens.Typography.TextSmall.lineHeight};
-`;
-const InlineEditInput = styled_components.default.input`
-  ${sharedInputStyles}
-`;
-const InlineEditTextarea = styled_components.default.textarea`
-  ${sharedInputStyles}
-  resize: none;
-  overflow-y: auto;
-  min-height: ${_persona_design_tokens.Typography.TextSmall.lineHeight};
-  scrollbar-width: none;
-`;
-const InlineEditDisplay = styled_components.default.div`
-  cursor: text;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  min-height: ${_persona_design_tokens.Typography.TextSmall.lineHeight};
-  line-height: ${_persona_design_tokens.Typography.TextSmall.lineHeight};
-
-  ${({ $multiline }) => $multiline ? styled_components.css`
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: pre-wrap;
-          word-break: break-word;
-        ` : styled_components.css`
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        `}
-`;
-const InlineInput = ({ itemId, value, columnKey, inlineEditConfig, onEditingEnd, children }) => {
-	const { columns, newRowId, setColumnWidthsLocked, scheduleCreateNewRowAfterCommit } = (0, react.useContext)(TableBoxContext) ?? {};
-	const rowContext = (0, react.useContext)(TableBoxRowContext);
-	const [isInlineEditing, setIsInlineEditing] = (0, react.useState)(itemId === newRowId && columnKey === columns?.[0]?.key);
-	const [editValue, setEditValue] = (0, react.useState)(value);
-	const inputRef = (0, react.useRef)(null);
-	const textareaRef = (0, react.useRef)(null);
-	const cancelledRef = (0, react.useRef)(false);
-	const isMultiline = inlineEditConfig?.multiline === true;
-	(0, react.useEffect)(() => {
-		return () => {
-			cancelledRef.current = false;
-		};
-	}, []);
-	(0, react.useLayoutEffect)(() => {
-		if (isInlineEditing && isMultiline && textareaRef.current) {
-			const textarea = textareaRef.current;
-			textarea.style.height = "auto";
-			textarea.style.height = `${textarea.scrollHeight}px`;
-		}
-	}, [
-		isInlineEditing,
-		editValue,
-		isMultiline
-	]);
-	(0, react.useEffect)(() => {
-		if (isInlineEditing && isMultiline && textareaRef.current) {
-			const length = textareaRef.current.value.length;
-			textareaRef.current.setSelectionRange(length, length);
-		}
-	}, [isInlineEditing, isMultiline]);
-	const placeholder = (0, react.useMemo)(() => {
-		const column = columns?.find((c) => c.key === columnKey);
-		return column?.inlineEditConfig?.placeholder || column?.title || "";
-	}, [columns, columnKey]);
-	const notifyEditingEnd = () => {
-		onEditingEnd?.();
-		rowContext?.onEditingEnd();
-		setColumnWidthsLocked?.(false);
-	};
-	const handleInlineEditKeyDown = (e) => {
-		const isFirstCell = columnKey === columns?.[0]?.key;
-		if ((e.key === "Delete" || e.key === "Backspace") && isFirstCell && editValue === "" && rowContext?.areOtherCellsBlank && rowContext.onDelete) {
-			e.preventDefault();
-			e.stopPropagation();
-			cancelledRef.current = true;
-			setColumnWidthsLocked?.(false);
-			if (!(focusAdjacentInlineEditor(e.currentTarget, "down") || focusAdjacentInlineEditor(e.currentTarget, "up"))) e.currentTarget.closest("table")?.focus();
-			rowContext.onDelete();
-		} else if (!isMultiline && (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight")) {
-			const direction = e.key === "ArrowUp" ? "up" : e.key === "ArrowDown" ? "down" : e.key === "ArrowLeft" ? "left" : "right";
-			if ((direction === "up" || direction === "down" || e.currentTarget instanceof HTMLInputElement && isCaretAtNavigationBoundary(e.currentTarget, direction)) && focusAdjacentInlineEditor(e.currentTarget, direction)) {
-				e.preventDefault();
-				e.stopPropagation();
-			}
-		} else if (e.key === "Enter") if (isMultiline) {
-			if (e.ctrlKey || e.metaKey) {
-				e.preventDefault();
-				e.stopPropagation();
-				handleInlineEditConfirm();
-				notifyEditingEnd();
-				setIsInlineEditing(false);
-			}
-		} else {
-			e.preventDefault();
-			e.stopPropagation();
-			handleInlineEditConfirm();
-			notifyEditingEnd();
-			setIsInlineEditing(false);
-			const isLastCell = columnKey === columns?.at(-1)?.key;
-			const currentRow = e.currentTarget.closest("tr");
-			const isLastRow = currentRow != null && currentRow.nextElementSibling == null;
-			if (isLastCell && isLastRow) scheduleCreateNewRowAfterCommit?.();
-		}
-		else if (e.key === "Tab") handleInlineEditConfirm();
-		else if (e.key === "Escape") {
-			e.preventDefault();
-			e.stopPropagation();
-			handleInlineEditCancel();
-		}
-	};
-	const handleInlineEditConfirm = () => {
-		if (inlineEditConfig?.onChange && editValue !== value) inlineEditConfig.onChange(itemId, editValue);
-	};
-	const handleInlineEditCancel = () => {
-		cancelledRef.current = true;
-		setEditValue(value);
-		notifyEditingEnd();
-		setIsInlineEditing(false);
-	};
-	const handleInlineEditBlur = () => {
-		if (!cancelledRef.current) handleInlineEditConfirm();
-		cancelledRef.current = false;
-		setIsInlineEditing(false);
-		setColumnWidthsLocked?.(false);
-	};
-	return isInlineEditing ? isMultiline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineEditTextarea, {
-		ref: textareaRef,
-		value: editValue,
-		onChange: (e) => setEditValue(e.target.value),
-		onBlur: handleInlineEditBlur,
-		onKeyDown: handleInlineEditKeyDown,
-		placeholder,
-		autoFocus: true,
-		rows: 1
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineEditInput, {
-		ref: inputRef,
-		value: editValue,
-		onChange: (e) => setEditValue(e.target.value),
-		onBlur: handleInlineEditBlur,
-		onKeyDown: handleInlineEditKeyDown,
-		placeholder,
-		autoFocus: true
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineEditDisplay, {
-		tabIndex: 0,
-		"data-tablebox-inline-edit-trigger": true,
-		$multiline: isMultiline,
-		onFocus: () => {
-			setEditValue(value);
-			setColumnWidthsLocked?.(true);
-			setIsInlineEditing(true);
-		},
-		children: children || value
-	});
-};
-//#endregion
-//#region components/TableBox/TableBoxRowActions.tsx
-const IconButtonWidth = 16;
-const BackgroundFadeWidth = 12;
-const RowActionsContainerWithFadeWidth = BackgroundFadeWidth + (parseInt(_persona_design_tokens.Spacing[1]) + IconButtonWidth + parseInt(_persona_design_tokens.Spacing[2]));
-/**
-* Container for row-level actions (`actions` menu and/or delete `X`). Used
-* in two layouts:
-*
-* - **Dedicated trailing column** (`$inDedicatedColumn=true`, the default
-*   for horizontal-scroll mode): laid out in normal flow inside
-*   `PinnedActionsCell`.
-* - **Overlaid in last data cell** (`$inDedicatedColumn=false`,
-*   `disableHorizontalScroll` mode): absolutely positioned on top of the
-*   last cell's content with a fade gradient so it overlaps text on hover.
-*
-* Other variant props:
-* - `$hasCombobox` — last data column is an inline combobox; we use auto
-*   width so the caret↔first-action gap matches the action↔delete gap, and
-*   we drop the gradient so there's no fade running over the caret.
-* - `$hasDelete` — fade the container in only on hover, mirroring the
-*   legacy "show delete on hover" behavior.
-*/
-const RowActionsContainer = styled_components.default.div`
-  width: ${({ $hasCombobox }) => $hasCombobox ? "auto" : `${RowActionsContainerWithFadeWidth}px`};
-  position: ${({ $hasCombobox, $inDedicatedColumn }) => $hasCombobox || $inDedicatedColumn ? "static" : "absolute"};
-  right: ${_persona_design_tokens.Spacing[2]};
-  top: 0;
-  height: 100%;
-  display: flex;
-  gap: ${_persona_design_tokens.Spacing[1]};
-  align-items: center;
-  justify-content: end;
-  transition: opacity ${"200ms"} ease-out;
-  background: linear-gradient(
-    to right,
-    transparent,
-    ${_persona_design_tokens.Color.BackgroundPrimary} ${BackgroundFadeWidth}px
-  );
-
-  /* Combobox cells render actions inline next to the caret. The padding-left
-     keeps the caret↔first-action gap visually balanced with the gap between
-     the actions themselves. */
-  ${({ $hasCombobox }) => $hasCombobox && styled_components.css`
-      background: none;
-      padding-right: ${_persona_design_tokens.Spacing[2]};
-      padding-left: ${_persona_design_tokens.Spacing[1]};
-    `}
-
-  /* PinnedActionsCell is transparent (so scrolling content can pass under it);
-     owning the right gutter here keeps the container's opaque gradient flush
-     to the cell's right edge. */
-  ${({ $inDedicatedColumn, $hasCombobox }) => $inDedicatedColumn && !$hasCombobox && styled_components.css`
-      padding-right: ${_persona_design_tokens.Spacing[2]};
-    `}
-
-  /* Hide on hover only when delete is present (matches legacy behavior). */
-  ${({ $hasDelete }) => $hasDelete && styled_components.css`
-      opacity: 0;
-    `}
-
-  /* Make room for both buttons; combobox cells use auto width so they can sit
-     inline next to the caret. */
-  ${({ $hasActions, $hasDelete, $hasCombobox }) => $hasActions && $hasDelete && !$hasCombobox && styled_components.css`
-      width: ${RowActionsContainerWithFadeWidth + parseInt(_persona_design_tokens.Spacing[1]) + IconButtonWidth}px;
-    `}
-`;
-/**
-* Renders the actions menu and/or delete icon button inside a
-* `RowActionsContainer`. Used both as an absolute overlay inside the
-* last data cell (fixed-layout mode) and as static content inside the
-* dedicated sticky trailing column (horizontal scroll mode).
-*/
-const RowActions = ({ actions, onDelete, inDedicatedColumn, inCombobox }) => {
-	const hasActions = !!actions?.length;
-	if (!hasActions && !onDelete) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RowActionsContainer, {
-		$hasActions: hasActions,
-		$hasDelete: !!onDelete,
-		$hasCombobox: inCombobox,
-		$inDedicatedColumn: inDedicatedColumn,
-		onClick: (e) => e.stopPropagation(),
-		children: [hasActions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
-			portal: true,
-			trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
-				"aria-label": "Actions",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.MoreIcon, {})
-			}),
-			children: actions?.map(({ label, onClick, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
-				...rest,
-				onClick,
-				size: "sm",
-				children: label
-			}, label))
-		}), onDelete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
-			"aria-label": "Delete",
-			onClick: onDelete,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.XIcon, {})
-		})]
-	});
-};
-//#endregion
-//#region components/TableBox/useDelayedInlineEditError.ts
-const ERROR_DELAY_MS = 500;
-const isEditableTarget = (target) => target instanceof HTMLElement && (target.matches("input, textarea") || target.isContentEditable);
-const useDelayedInlineEditError = (errorText) => {
-	const errorTimerRef = (0, react.useRef)(null);
-	const lastEditingEndAtRef = (0, react.useRef)(null);
-	const isEditingRef = (0, react.useRef)(false);
-	const errorTextRef = (0, react.useRef)(errorText);
-	errorTextRef.current = errorText;
-	const [isErrorVisible, setIsErrorVisible] = (0, react.useState)(Boolean(errorText));
-	const clearErrorTimer = (0, react.useCallback)(() => {
-		if (errorTimerRef.current != null) {
-			clearTimeout(errorTimerRef.current);
-			errorTimerRef.current = null;
-		}
-	}, []);
-	const scheduleError = (0, react.useCallback)((delay = ERROR_DELAY_MS) => {
-		clearErrorTimer();
-		if (!errorTextRef.current) return;
-		errorTimerRef.current = setTimeout(() => {
-			if (errorTextRef.current && !isEditingRef.current) setIsErrorVisible(true);
-			errorTimerRef.current = null;
-		}, delay);
-	}, [clearErrorTimer]);
-	(0, react.useEffect)(() => {
-		if (!errorText) {
-			clearErrorTimer();
-			setIsErrorVisible(false);
-			return;
-		}
-		if (isEditingRef.current) {
-			setIsErrorVisible(false);
-			return;
-		}
-		if (lastEditingEndAtRef.current == null) {
-			clearErrorTimer();
-			setIsErrorVisible(true);
-		} else if (!isErrorVisible) {
-			const elapsed = Date.now() - lastEditingEndAtRef.current;
-			scheduleError(Math.max(0, ERROR_DELAY_MS - elapsed));
-		}
-	}, [
-		clearErrorTimer,
-		errorText,
-		isErrorVisible,
-		scheduleError
-	]);
-	(0, react.useEffect)(() => clearErrorTimer, [clearErrorTimer]);
-	const onFocus = (0, react.useCallback)((event) => {
-		if (!isEditableTarget(event.target)) return;
-		isEditingRef.current = true;
-		lastEditingEndAtRef.current = null;
-		clearErrorTimer();
-		setIsErrorVisible(false);
-	}, [clearErrorTimer]);
-	const onEditingEnd = (0, react.useCallback)(() => {
-		if (!isEditingRef.current) return;
-		isEditingRef.current = false;
-		lastEditingEndAtRef.current = Date.now();
-		scheduleError();
-	}, [scheduleError]);
-	return {
-		isErrorVisible,
-		onBlur: (0, react.useCallback)((event) => {
-			if (!isEditableTarget(event.target)) return;
-			onEditingEnd();
-		}, [onEditingEnd]),
-		onEditingEnd,
-		onFocus
-	};
-};
-//#endregion
-//#region components/TableBox/TableBoxCell.tsx
-const CELL_VERTICAL_PADDING = _persona_design_tokens.Spacing[1];
-const CELL_HEIGHT = `calc(${_persona_design_tokens.Typography.TextSmall.lineHeight} + (${CELL_VERTICAL_PADDING} * 2))`;
-const StyledCell = (0, styled_components.default)(require_Table.TableCell)`
-  ${require_mixins_text.paragraphMixins.sm};
-  // height acts as min-height for table cells
-  height: ${CELL_HEIGHT};
-  padding: ${({ $noPadding }) => $noPadding ? _persona_design_tokens.Spacing[0] : `${CELL_VERTICAL_PADDING} ${_persona_design_tokens.Spacing[2]}`};
-  border-bottom: 1px solid ${_persona_design_tokens.Color.BorderHairline};
-  position: relative;
-`;
-const StyledCellContent = styled_components.default.div`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-grow: 1;
-  min-width: 0;
-`;
-const CellErrorContainer = styled_components.default.span`
-  display: inline-block;
-  line-height: ${_persona_design_tokens.Typography.TextSmall.lineHeight};
-  margin-right: ${({ $inset }) => $inset ? _persona_design_tokens.Spacing[0] : _persona_design_tokens.Spacing[1]};
-  padding-left: ${({ $inset }) => $inset ? _persona_design_tokens.Spacing[2] : _persona_design_tokens.Spacing[0]};
-  position: relative;
-  /* Optically center the 12px alert glyph against the text's visual bounds. */
-  top: 1px;
-`;
-const TableBoxCell = ({ children, itemId = "", value = "", columnKey, errorText, isLastCell = false, actions, onDelete, inlineEditConfigOverride, rowErrorText, onBlur, onFocus, ...props }) => {
-	const context = (0, react.useContext)(TableBoxContext);
-	const rowContext = (0, react.useContext)(TableBoxRowContext);
-	const { isErrorVisible, onBlur: handleDelayedErrorBlur, onEditingEnd: handleDelayedErrorEditingEnd, onFocus: handleDelayedErrorFocus } = useDelayedInlineEditError(errorText);
-	if (context == null) throw new Error("TableBox context is not set");
-	const columnConfig = context.columns.find((c) => c.key === columnKey)?.inlineEditConfig;
-	let inlineEditConfig = context.disabled || columnConfig == null ? void 0 : inlineEditConfigOverride ? {
-		...columnConfig,
-		...inlineEditConfigOverride
-	} : columnConfig;
-	if (inlineEditConfig?.type === "combobox" && (context.hasHorizontalOverflow || inlineEditConfig?.fullWidthComboboxDropdown)) inlineEditConfig = {
-		...inlineEditConfig,
-		useComboboxPortal: true
-	};
-	const handleDelete = () => {
-		if (onDelete && itemId) onDelete(itemId);
-	};
-	const handleFocus = (event) => {
-		handleDelayedErrorFocus(event);
-		onFocus?.(event);
-	};
-	const handleBlur = (event) => {
-		handleDelayedErrorBlur(event);
-		onBlur?.(event);
-	};
-	const visibleErrorText = isErrorVisible && errorText ? errorText : rowErrorText;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCell, {
-		...props,
-		$noPadding: inlineEditConfig?.type === "combobox",
-		tabIndex: -1,
-		onBlur: handleBlur,
-		onFocus: handleFocus,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
-			align: "center",
-			spacing: _persona_design_tokens.Spacing[0],
-			children: [
-				visibleErrorText != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellErrorContainer, {
-					$inset: inlineEditConfig?.type === "combobox",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
-						"aria-label": `Error: ${visibleErrorText}`,
-						iconTrigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.CircleAlertIcon, {
-							color: _persona_design_tokens.Color.BorderIconDanger,
-							size: "12"
-						}),
-						side: "top",
-						size: "sm",
-						children: visibleErrorText
-					})
-				}),
-				inlineEditConfig ? inlineEditConfig.type === "combobox" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineCombobox, {
-					itemId,
-					value,
-					columnKey,
-					inlineEditConfig,
-					rowRef: rowContext?.rowRef,
-					hasLeadingError: visibleErrorText != null,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCellContent, { children })
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineInput, {
-					itemId,
-					value,
-					columnKey,
-					inlineEditConfig,
-					onEditingEnd: handleDelayedErrorEditingEnd,
-					children
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCellContent, { children }),
-				isLastCell && !context.disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowActions, {
-					actions,
-					onDelete: onDelete ? handleDelete : void 0,
-					inCombobox: inlineEditConfig?.type === "combobox"
-				})
-			]
-		})
-	});
-};
-//#endregion
-//#region components/TableBox/TableBoxRow.tsx
-const StyledRow = (0, styled_components.default)(require_Table.TableRow)`
-  cursor: ${({ $isSelectable }) => $isSelectable ? "pointer" : "default"};
-  position: relative;
-  /* Give every row a solid background so sticky first-column cells (which
-     inherit the row's background) remain opaque during horizontal scroll. */
-  background-color: ${_persona_design_tokens.Color.BackgroundPrimary};
-
-  /* Dim the dragged row in place. A floating clone rendered by @dnd-kit's
-     DragOverlay provides the fully-opaque representation that follows the
-     pointer. */
-  ${({ $isDragging }) => $isDragging && styled_components.css`
-      opacity: 0.5;
-    `}
-
-  /* 2px brand-colored drop indicator applied to each cell via inset
-     box-shadow so the line spans the full row width without affecting
-     layout. box-shadow on <td> renders reliably across modern browsers,
-     unlike pseudo-elements on <tr>. */
-  ${({ $dropIndicatorPosition, theme }) => $dropIndicatorPosition === "top" && styled_components.css`
-      td {
-        box-shadow: inset 0 2px 0 ${theme.color.text.brand};
-      }
-    `}
-
-  ${({ $dropIndicatorPosition, theme }) => $dropIndicatorPosition === "bottom" && styled_components.css`
-      td {
-        box-shadow: inset 0 -2px 0 ${theme.color.text.brand};
-      }
-    `}
-
-  ${require_Combobox.CaretButton} {
-    opacity: 0;
-    transition: opacity ${"200ms"} ease-out;
-
-    /* Allow button to shrink to caret SVG height and width, and adjust alignment to remain vertically centered */
-    width: auto;
-    height: auto;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  &:last-child {
-    td {
-      border-bottom: none;
-      &:first-child {
-        border-bottom-left-radius: ${_persona_design_tokens.BorderRadius.Md};
-      }
-      &:last-child {
-        border-bottom-right-radius: ${_persona_design_tokens.BorderRadius.Md};
-      }
-    }
-  }
-
-  &[aria-selected='true'] {
-    background: ${({ theme }) => theme.color.background.highlight};
-    color: ${({ theme }) => theme.color.text.brand};
-  }
-
-  &:hover:not([aria-selected='true']) {
-    cursor: ${({ $isSelectable }) => $isSelectable ? "pointer" : "default"};
-    color: ${({ theme }) => theme.color.text.primary};
-    background: ${_persona_design_tokens.Color.BackgroundSecondary};
-
-    ${RowActionsContainer} {
-      opacity: 1;
-      background: linear-gradient(to right, transparent, ${_persona_design_tokens.Color.BackgroundSecondary} 12px);
-    }
-
-    ${require_Combobox.CaretButton} {
-      opacity: 1;
-    }
-  }
-
-  &:has(input:focus),
-  &:has(textarea:focus),
-  &:has(input[role='combobox'][aria-expanded='true']),
-  &:has(input:focus):hover,
-  &:has(textarea:focus):hover,
-  &:has(input[role='combobox'][aria-expanded='true']):hover,
-  &:has(button:focus),
-  &:has(button:focus):hover {
-    color: ${({ theme }) => theme.color.text.brand};
-    background-color: ${({ theme }) => theme.color.background.highlight};
-
-    ${RowActionsContainer} {
-      opacity: 1;
-      background: linear-gradient(
-        to right,
-        transparent,
-        ${({ theme }) => theme.color.background.highlight} ${parseInt(_persona_design_tokens.Spacing[3])}px
-      );
-    }
-
-    ${require_Combobox.CaretButton} {
-      opacity: 1;
-    }
-  }
-
-  /* In fixed-layout mode the actions overlay lives inside the furthest-right
-     column's cell, so revealing the delete (X) on focus would park it on top
-     of the text being edited. While that column's inline input holds focus,
-     keep it hidden; hovering the row still brings it back. */
-  &:not(:hover):has(
-      td:last-child :is(input:not([role='combobox']), textarea):focus
-    ) {
-    ${RowActionsContainer} {
-      opacity: 0;
-    }
-  }
-`;
-const DragHandleCell = (0, styled_components.default)(require_Table.TableCell)`
-  width: 24px;
-  padding: ${_persona_design_tokens.Spacing[0]} ${_persona_design_tokens.Spacing[1]};
-  border-bottom: 1px solid ${_persona_design_tokens.Color.BorderHairline};
-  vertical-align: middle;
-  text-align: center;
-`;
-const DragHandleButton = styled_components.default.button.attrs({ type: "button" })`
-  background: none;
-  border: none;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: grab;
-  touch-action: none;
-  color: ${_persona_design_tokens.Color.TextSecondary};
-  ${require_mixins_focus.focusOutline}
-
-  &:hover {
-    color: ${_persona_design_tokens.Color.TextPrimary};
-  }
-
-  &:active {
-    cursor: grabbing;
-  }
-`;
-const DropdownPopoverHeading = styled_components.default.div`
-  ${_persona_design_tokens.Typography.TextSmallBold};
-  border-bottom: 1px solid ${_persona_design_tokens.Color.BorderHairline};
-  padding: ${_persona_design_tokens.Spacing[2]} ${_persona_design_tokens.Spacing[3]} ${_persona_design_tokens.Spacing[1]};
-`;
-const DropdownPopoverContent = (0, styled_components.default)(require_Stack.Stack)`
-  min-width: var(--radix-popover-trigger-width);
-  padding: ${_persona_design_tokens.Spacing[3]};
-
-  ${require_FormControl.Container} {
-    min-width: 0;
-  }
-`;
-const DropdownPopoverFooter = styled_components.default.div`
-  border-top: 1px solid ${_persona_design_tokens.Color.BorderHairline};
-  padding: ${_persona_design_tokens.Spacing[1]};
-`;
-/**
-* Computes the drop-indicator position for a sortable row. Direction mirrors
-* `HoverCardPropertiesEditTable` / `ListBox`: dragging from above places the
-* line on the hovered row's bottom edge, dragging from below places it on the
-* top edge. The dragged row itself never shows an indicator.
-*
-* `closestCenter` has a "dead zone" while the pointer is still over the
-* dragged row's own slot (`overIndex === activeIndex`). We use the drag
-* direction to show the indicator on the immediate neighbor so the
-* "immediately before/after original" positions still get feedback.
-*/
-const getDropIndicatorPosition = ({ isDragging, index, activeIndex, overIndex, draggedDirection }) => {
-	if (isDragging || activeIndex === -1) return;
-	if (overIndex === index && overIndex !== activeIndex) return activeIndex < index ? "bottom" : "top";
-	if (overIndex === activeIndex) {
-		if (draggedDirection === "up" && index === activeIndex - 1) return "bottom";
-		if (draggedDirection === "down" && index === activeIndex + 1) return "top";
-	}
-};
-/**
-* Inner row component used when drag-and-drop is enabled on the parent
-* TableBox. Subscribes to the surrounding SortableContext via useSortable and
-* renders a leading drag-handle cell.
-*/
-const SortableTableBoxRowContent = ({ id, isSelected, isSelectable, onClick, rowRef, draggedDirection, children, ...props }) => {
-	const { attributes, listeners, setNodeRef, isDragging, activeIndex, overIndex, index } = (0, _dnd_kit_sortable.useSortable)({ id: String(id) });
-	const setRefs = (element) => {
-		rowRef.current = element;
-		setNodeRef(element);
-	};
-	const dropIndicatorPosition = getDropIndicatorPosition({
-		isDragging,
-		index,
-		activeIndex,
-		overIndex,
-		draggedDirection
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledRow, {
-		...props,
-		ref: setRefs,
-		id: String(id),
-		onClick,
-		disableHoverBackground: true,
-		"aria-selected": isSelected,
-		$isSelectable: isSelectable,
-		$isDragging: isDragging,
-		$dropIndicatorPosition: dropIndicatorPosition,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragHandleCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragHandleButton, {
-			"aria-label": "Drag to reorder",
-			...attributes,
-			...listeners,
-			onClick: (e) => e.stopPropagation(),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.DragIcon, {})
-		}) }), children]
-	});
-};
-const TableBoxRow = ({ children, actions, onDelete, errorText, id, dropdownFormFields, dropdownContent, dropdownHeadingText, dropdownFooter, onBlur, onFocus, ...props }) => {
-	const context = (0, react.useContext)(TableBoxContext);
-	const isSelected = context?.selectedKey === id;
-	const isSelectable = context?.selectionMode === "single";
-	const isReorderable = context?.isReorderable ?? false;
-	const rowRegistry = context?.rowRegistry ?? null;
-	const draggedDirection = context?.draggedDirection ?? null;
-	const hasActionsColumn = context?.hasActionsColumn ?? false;
-	const isDisabled = context?.disabled ?? false;
-	const rowRef = (0, react.useRef)(null);
-	const { isErrorVisible, onBlur: handleDelayedErrorBlur, onEditingEnd: handleDelayedErrorEditingEnd, onFocus: handleDelayedErrorFocus } = useDelayedInlineEditError(errorText);
-	const effectiveActions = isDisabled ? void 0 : actions;
-	const effectiveOnDelete = isDisabled ? void 0 : onDelete;
-	const areOtherCellsBlank = react.Children.toArray(children).filter((child) => (0, react.isValidElement)(child)).slice(1).every((cell) => cell.props.value === "");
-	const handleFocus = (event) => {
-		handleDelayedErrorFocus(event);
-		onFocus?.(event);
-	};
-	const handleBlur = (event) => {
-		handleDelayedErrorBlur(event);
-		onBlur?.(event);
-	};
-	const handleClick = () => {
-		if (context?.onRowClick && id && isSelectable) context.onRowClick(id);
-	};
-	const handleDelete = (0, react.useCallback)(() => {
-		if (effectiveOnDelete && id != null) effectiveOnDelete(id);
-	}, [effectiveOnDelete, id]);
-	const rowContextValue = (0, react.useMemo)(() => ({
-		rowRef,
-		onDelete: effectiveOnDelete && id != null ? handleDelete : void 0,
-		onEditingEnd: handleDelayedErrorEditingEnd,
-		areOtherCellsBlank
-	}), [
-		areOtherCellsBlank,
-		effectiveOnDelete,
-		handleDelayedErrorEditingEnd,
-		handleDelete,
-		id
-	]);
-	const lastColumnIsCombobox = context?.columns?.at(-1)?.inlineEditConfig?.type === "combobox";
-	const trailingActionsCell = (0, react.useMemo)(() => hasActionsColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinnedActionsCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowActions, {
-		actions: effectiveActions,
-		onDelete: effectiveOnDelete ? handleDelete : void 0,
-		inDedicatedColumn: true,
-		inCombobox: lastColumnIsCombobox
-	}) }) : null, [
-		hasActionsColumn,
-		effectiveActions,
-		effectiveOnDelete,
-		handleDelete,
-		lastColumnIsCombobox
-	]);
-	const renderedChildren = (0, react.useMemo)(() => {
-		if (hasActionsColumn && !isErrorVisible) return children;
-		const childrenArray = react.Children.toArray(children);
-		const firstChildIndex = isErrorVisible ? childrenArray.findIndex(react.isValidElement) : -1;
-		const lastChildIndex = childrenArray.length - 1;
-		return childrenArray.map((child, index) => {
-			if (!(0, react.isValidElement)(child)) return child;
-			const isFirstCell = index === firstChildIndex;
-			const isLastCell = !hasActionsColumn && index === lastChildIndex;
-			if (!isFirstCell && !isLastCell) return child;
-			return (0, react.cloneElement)(child, {
-				...isFirstCell && { rowErrorText: errorText },
-				...isLastCell && {
-					isLastCell: true,
-					actions: effectiveActions,
-					onDelete: effectiveOnDelete
-				},
-				...isLastCell && id != null && { itemId: String(id) }
-			});
-		});
-	}, [
-		hasActionsColumn,
-		children,
-		effectiveActions,
-		effectiveOnDelete,
-		errorText,
-		id,
-		isErrorVisible
-	]);
-	const rowChildrenWithContext = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableBoxRowContext.Provider, {
-		value: rowContextValue,
-		children: [renderedChildren, trailingActionsCell]
-	}), [
-		renderedChildren,
-		trailingActionsCell,
-		rowContextValue
-	]);
-	(0, react.useEffect)(() => {
-		if (!rowRegistry || id == null) return;
-		const key = String(id);
-		const registry = rowRegistry.current;
-		registry.set(key, rowChildrenWithContext);
-		return () => {
-			registry.delete(key);
-		};
-	}, [
-		id,
-		rowChildrenWithContext,
-		rowRegistry
-	]);
-	const shouldRenderDropdown = dropdownFormFields || dropdownContent;
-	const rowContent = isReorderable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableTableBoxRowContent, {
-		...props,
-		id,
-		isSelected,
-		isSelectable,
-		onClick: handleClick,
-		onBlur: handleBlur,
-		onFocus: handleFocus,
-		rowRef,
-		draggedDirection,
-		children: rowChildrenWithContext
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledRow, {
-		...props,
-		ref: rowRef,
-		id,
-		onClick: handleClick,
-		onBlur: handleBlur,
-		onFocus: handleFocus,
-		disableHoverBackground: true,
-		"aria-selected": isSelected,
-		$isSelectable: isSelectable,
-		children: rowChildrenWithContext
-	});
-	if (shouldRenderDropdown) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover_default, {
-		trigger: rowContent,
-		open: isSelected,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Popover.Popover_default.Card, {
-			id: context?.rowDropdownId,
-			noPadding: true,
-			style: { zIndex: require_lib_zindex.Z_INDICES.modalDropdown },
-			children: [
-				dropdownHeadingText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownPopoverHeading, { children: dropdownHeadingText }),
-				dropdownFormFields && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownPopoverContent, {
-					spacing: _persona_design_tokens.Spacing[2],
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useFormGroup.FormGroupContext.Provider, {
-						value: {
-							configField: true,
-							labelTooltipZIndex: require_lib_zindex.Z_INDICES.modalDropdownTooltip
-						},
-						children: dropdownFormFields
-					})
-				}),
-				dropdownContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownPopoverContent, {
-					spacing: _persona_design_tokens.Spacing[3],
-					children: dropdownContent
-				}),
-				dropdownFooter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownPopoverFooter, { children: dropdownFooter })
-			]
-		})
-	});
-	return rowContent;
-};
-const OverlayTable = styled_components.default.table`
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: separate;
-  border-spacing: 0;
-  border: 1px solid ${_persona_design_tokens.Color.BorderDivider};
-  border-radius: ${_persona_design_tokens.BorderRadius.Md};
-  background: ${_persona_design_tokens.Color.BackgroundPrimary};
-  box-shadow: ${"0px 2px 10px 0px rgba(0, 0, 0, 0.04), 0px 5px 20px 0px rgba(0, 0, 0, 0.06), 0px 10px 40px 0px rgba(0, 0, 0, 0.08)"};
-`;
-/**
-* Visual clone of a `TableBoxRow` used inside `@dnd-kit`'s `DragOverlay`.
-* Renders a minimal table wrapper with a static drag-handle cell followed by
-* the original row's cells, so the portaled overlay looks identical to the
-* dragged row while it follows the pointer.
-*
-* `cellWidths` is the measured width (in px) of each `<td>` in the source
-* row at drag start, in source order (drag handle cell first, then content
-* cells). Applied via a `<colgroup>` with `table-layout: fixed` so the
-* overlay's columns align 1:1 with the source table instead of re-flowing
-* to the single row's content.
-*/
-const TableBoxRowOverlay = ({ children, cellWidths }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(OverlayTable, {
-	"aria-hidden": "true",
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("colgroup", { children: cellWidths.map((width, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { style: { width: `${width}px` } }, i)) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledRow, {
-		disableHoverBackground: true,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragHandleCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragHandleButton, {
-			tabIndex: -1,
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.DragIcon, {})
-		}) }), children]
-	}) })]
-});
-//#endregion
-//#region components/TableBox/useColumnWidthLock.ts
-/**
-* Captures the live `<th>` widths of a table the moment inline editing starts
-* and clears them when editing ends.
-*
-* Consumers render a `<colgroup>` from `lockedColWidths` and switch the table
-* to `table-layout: fixed` for the duration of the edit so the input swap
-* doesn't reflow the columns.
-*/
-const useColumnWidthLock = (tableRef, { enabled = true } = {}) => {
-	const [lockedColWidths, setLockedColWidths] = (0, react.useState)(null);
-	return {
-		lockedColWidths,
-		setColumnWidthsLocked: (0, react.useCallback)((isLocked) => {
-			if (!enabled) return;
-			if (!isLocked) {
-				setLockedColWidths(null);
-				return;
-			}
-			const ths = Array.from(tableRef.current?.querySelectorAll(":scope > thead > tr > th") ?? []);
-			if (ths.length > 0) setLockedColWidths(ths.map((th) => th.getBoundingClientRect().width));
-		}, [tableRef, enabled])
-	};
-};
-//#endregion
-//#region components/TableBox/useTableBoxDragAndDrop.ts
-const DRAG_DIRECTION_THRESHOLD = 4;
-/**
-* Bundles the `@dnd-kit` wiring TableBox needs to support row reordering:
-* sensors, lifecycle handlers, the dragged row's overlay content, and the
-* pointer direction used by rows to position drop indicators in dnd-kit's
-* "dead zone" (overIndex === activeIndex).
-*
-* Also forces a `grabbing` cursor on `<body>` while a row is active so the
-* cursor persists when the pointer leaves the drag handle.
-*/
-const useTableBoxDragAndDrop = ({ tableRef, reorderConfig }) => {
-	const sensors = (0, _dnd_kit_core.useSensors)((0, _dnd_kit_core.useSensor)(_dnd_kit_core.PointerSensor), (0, _dnd_kit_core.useSensor)(_dnd_kit_core.KeyboardSensor, { coordinateGetter: _dnd_kit_sortable.sortableKeyboardCoordinates }));
-	const rowRegistry = (0, react.useRef)(/* @__PURE__ */ new Map());
-	const [activeId, setActiveId] = (0, react.useState)(null);
-	const [draggedDirection, setDraggedDirection] = (0, react.useState)(null);
-	const [overlayCellWidths, setOverlayCellWidths] = (0, react.useState)(null);
-	(0, react.useEffect)(() => {
-		if (activeId == null) return;
-		const previous = document.body.style.cursor;
-		document.body.style.cursor = "grabbing";
-		return () => {
-			document.body.style.cursor = previous;
-		};
-	}, [activeId]);
-	const sortableIds = (0, react.useMemo)(() => {
-		if (!reorderConfig) return [];
-		return reorderConfig.items.map((item) => String(item[reorderConfig.itemKeyPath]));
-	}, [reorderConfig]);
-	const handleDragStart = (0, react.useCallback)((event) => {
-		const id = String(event.active.id);
-		setActiveId(id);
-		setDraggedDirection(null);
-		const rowElement = tableRef.current?.querySelector(`tr[id="${CSS.escape(id)}"]`);
-		if (rowElement) setOverlayCellWidths(Array.from(rowElement.children).filter((child) => child.tagName === "TD").map((td) => td.getBoundingClientRect().width));
-		else setOverlayCellWidths(null);
-	}, [tableRef]);
-	const handleDragMove = (0, react.useCallback)((event) => {
-		const { y } = event.delta;
-		const next = y < -DRAG_DIRECTION_THRESHOLD ? "up" : y > DRAG_DIRECTION_THRESHOLD ? "down" : null;
-		setDraggedDirection((prev) => prev === next ? prev : next);
-	}, []);
-	const resetDragState = (0, react.useCallback)(() => {
-		setActiveId(null);
-		setDraggedDirection(null);
-		setOverlayCellWidths(null);
-	}, []);
-	return {
-		activeId,
-		overlayCellWidths,
-		draggedDirection,
-		sortableIds,
-		rowRegistry,
-		dndContextProps: {
-			sensors,
-			collisionDetection: _dnd_kit_core.closestCenter,
-			onDragStart: handleDragStart,
-			onDragMove: handleDragMove,
-			onDragEnd: (0, react.useCallback)((event) => {
-				resetDragState();
-				if (!reorderConfig) return;
-				const { active, over } = event;
-				if (!over || active.id === over.id) return;
-				const { items, itemKeyPath, onReorder } = reorderConfig;
-				const fromIndex = require_lib_reorderItems.findIndexByKey(items, itemKeyPath, String(active.id));
-				const toIndex = require_lib_reorderItems.findIndexByKey(items, itemKeyPath, String(over.id));
-				if (fromIndex === -1 || toIndex === -1) return;
-				onReorder(require_lib_reorderItems.moveItemByIndex(items, fromIndex, toIndex));
-			}, [reorderConfig, resetDragState]),
-			onDragCancel: resetDragState
-		}
-	};
-};
-//#endregion
-//#region components/TableBox/TableBox.tsx
-const TableBoxContext = (0, react.createContext)(null);
-const DRAG_HANDLE_CELL_WIDTH = 24;
-const RIGHT_FADE_WIDTH = 48;
-const HEADER_HEIGHT_PX = parseInt(_persona_design_tokens.Spacing[1], 10) * 2 + parseInt(_persona_design_tokens.Typography.TextSmall.lineHeight, 10) + 1;
-const TableScrollContainer = styled_components.default.div`
-  border: 1px solid ${_persona_design_tokens.Color.BorderDivider};
-  border-radius: ${_persona_design_tokens.BorderRadius.Md};
-  overflow-x: ${({ $fixedLayout, $hasHorizontalOverflow }) => $fixedLayout ? "visible" : $hasHorizontalOverflow ? "auto" : "visible"};
-  overscroll-behavior-x: none;
-`;
-const ScrollAffordanceWrapper = styled_components.default.div`
-  position: relative;
-`;
-const RightFadeOverlay = styled_components.default.div`
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  bottom: 1px;
-  width: ${RIGHT_FADE_WIDTH}px;
-  /* Sits above the sticky first column (z-index 2) but below the pinned
-     row actions (z-index 4) so action buttons stay legible. */
-  z-index: 3;
-  pointer-events: none;
-  background:
-    linear-gradient(to right, transparent, ${_persona_design_tokens.Color.BackgroundSecondary}) top left / 100%
-      ${Math.max(0, HEADER_HEIGHT_PX - 1)}px no-repeat,
-    linear-gradient(to right, transparent, ${_persona_design_tokens.Color.BackgroundPrimary}) bottom left / 100%
-      calc(100% - ${HEADER_HEIGHT_PX}px) no-repeat;
-  border-top-right-radius: ${_persona_design_tokens.BorderRadius.Md};
-  border-bottom-right-radius: ${_persona_design_tokens.BorderRadius.Md};
-  opacity: ${({ $visible }) => $visible ? 1 : 0};
-  transition: opacity ${"200ms"} ease-out;
-`;
-const stickyContentColumn = (isReorderable) => styled_components.css`
-  && thead th:first-child,
-  && tbody td:first-child {
-    position: sticky;
-    left: 0;
-    z-index: 2;
-  }
-
-  && tbody td:first-child {
-    background-color: inherit;
-  }
-
-  ${isReorderable && styled_components.css`
-    && thead th:nth-child(2),
-    && tbody td:nth-child(2) {
-      position: sticky;
-      left: ${DRAG_HANDLE_CELL_WIDTH}px;
-      z-index: 2;
-    }
-
-    && tbody td:nth-child(2) {
-      background-color: inherit;
-    }
-  `}
-`;
-const StyledTable = (0, styled_components.default)(require_Table.Table)`
-  caret-color: ${_persona_design_tokens.Color.BorderFocus};
-
-  &::selection {
-    background: ${_persona_design_tokens.Color.BackgroundLabelPurple};
-  }
-
-  ${({ $fixedLayout, $isReorderable }) => $fixedLayout ? styled_components.css`
-          /* Legacy: truncate long cell content to container width. */
-          table-layout: fixed;
-        ` : stickyContentColumn($isReorderable)}
-
-  /* Lock column widths while inline editing to prevent layout reflow. */
-  ${({ $fixedLayout, $lockedWidth }) => !$fixedLayout && $lockedWidth != null && styled_components.css`
-      table-layout: fixed;
-      width: ${$lockedWidth}px;
-    `}
-
-  /* Subtle right border on the sticky column when content extends off-screen
-     — inset shadow keeps it layout-neutral. */
-  ${({ $hasHorizontalOverflow, $isReorderable, $fixedLayout }) => $hasHorizontalOverflow && !$fixedLayout && styled_components.css`
-      ${$isReorderable ? `&& thead th:nth-child(2), && tbody td:nth-child(2)` : `&& thead th:first-child, && tbody td:first-child`} {
-        box-shadow: inset -1px 0 0 ${_persona_design_tokens.Color.BorderDivider};
-      }
-    `}
-
-  /* When the header is hidden, round the first body row's outer corners so
-     they line up with the surrounding container's rounded border. */
-  ${({ $hideHeader }) => $hideHeader && styled_components.css`
-      && tbody tr:first-child td:first-child {
-        border-top-left-radius: ${_persona_design_tokens.BorderRadius.Md};
-      }
-      && tbody tr:first-child td:last-child {
-        border-top-right-radius: ${_persona_design_tokens.BorderRadius.Md};
-      }
-    `}
-`;
-const StyledTableHeaderCell = (0, styled_components.default)(require_Table.TableHeaderCell)`
-  padding: ${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[2]};
-  border-bottom: 1px solid ${_persona_design_tokens.Color.BorderDivider};
-  ${require_mixins_text.paragraphMixins.sm};
-
-  /* Border radius for corner cells */
-  &:first-child {
-    border-radius: ${_persona_design_tokens.BorderRadius.Md} 0 0 0;
-  }
-
-  &:last-child {
-    border-radius: 0 ${_persona_design_tokens.BorderRadius.Md} 0 0;
-  }
-`;
-const DragHandleHeaderCell = (0, styled_components.default)(StyledTableHeaderCell)`
-  width: 24px;
-  padding: ${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[0]};
-`;
-const PinnedActionsCell = (0, styled_components.default)(require_Table.TableCell)`
-  position: sticky;
-  right: 0;
-  z-index: 4;
-  background: transparent;
-  border-bottom: 1px solid ${_persona_design_tokens.Color.BorderHairline};
-  padding: 0;
-  width: ${RowActionsContainerWithFadeWidth}px;
-  height: 1px; /* dummy height lets the child use height: 100% */
-`;
-const EmptyStateCell = (0, styled_components.default)(require_Table.TableCell)`
-  ${require_mixins_text.paragraphMixins.sm};
-  padding: ${_persona_design_tokens.Spacing[2]};
-  color: ${_persona_design_tokens.Color.TextSecondary};
-  border-bottom: none;
-`;
-const EmptyStateButton = styled_components.default.button`
-  ${require_mixins_text.paragraphMixins.sm};
-  padding: 0;
-  color: inherit;
-  background: none;
-  border: none;
-  cursor: pointer;
-  ${require_mixins_focus.focusOutline}
-`;
-const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, columns, onSelectionChange, selectionMode = "none", newRowId, onCreateNewRow: onCreateNewRowProp, disabled = false, reorderConfig, disableHorizontalScroll: disableHorizontalScrollProp = false, hideHeader = false, "aria-label": ariaLabel, ...props }) => {
-	const tableRef = (0, react.useRef)(null);
-	const scrollContainerRef = (0, react.useRef)(null);
-	const tableBoxId = (0, react.useMemo)(() => (0, lodash_fp_uniqueId_js.default)("tablebox-"), []);
-	const rowDropdownId = `${tableBoxId}-row-dropdown`;
-	const hasInlineEditableColumn = columns.some((c) => c.inlineEditConfig != null);
-	const disableHorizontalScroll = disableHorizontalScrollProp || hasInlineEditableColumn;
-	const { hasHorizontalOverflow, hasMoreScrollRight } = require_lib_useScrollOverflow.useScrollOverflow(scrollContainerRef, { enabled: !disableHorizontalScroll });
-	const { lockedColWidths, setColumnWidthsLocked } = useColumnWidthLock(tableRef, { enabled: !disableHorizontalScroll });
-	const [internalSelectedKey, setInternalSelectedKey] = (0, react.useState)(defaultSelectedKey ?? null);
-	const [shouldCreateNewRowAfterCommit, setShouldCreateNewRowAfterCommit] = (0, react.useState)(false);
-	const currentSelectedKey = selectedKey ?? internalSelectedKey;
-	const scheduleCreateNewRowAfterCommit = () => {
-		setShouldCreateNewRowAfterCommit(true);
-	};
-	const handleRowClick = (0, react.useCallback)((rowId) => {
-		if (selectionMode === "none") return;
-		if (!onSelectionChange) setInternalSelectedKey(rowId);
-		else onSelectionChange(rowId);
-	}, [onSelectionChange, selectionMode]);
-	const handleOutsideClick = (0, react.useCallback)((event) => {
-		if (!document.querySelector(`[id="${rowDropdownId}"][data-state="open"]`)) return;
-		const target = event.target;
-		const isOutsideTableBox = tableRef.current && !tableRef.current.contains(target);
-		const isOnRowDropdownContent = target.closest(`[id="${rowDropdownId}"]`);
-		if (isOutsideTableBox && !isOnRowDropdownContent && currentSelectedKey != null) if (!onSelectionChange) setInternalSelectedKey(null);
-		else onSelectionChange(null);
-	}, [
-		currentSelectedKey,
-		onSelectionChange,
-		rowDropdownId
-	]);
-	(0, react.useEffect)(() => {
-		document.addEventListener("mousedown", handleOutsideClick);
-		return () => {
-			document.removeEventListener("mousedown", handleOutsideClick);
-		};
-	}, [handleOutsideClick]);
-	(0, react.useEffect)(() => {
-		if (!shouldCreateNewRowAfterCommit) return;
-		setShouldCreateNewRowAfterCommit(false);
-		onCreateNewRowProp?.();
-	}, [onCreateNewRowProp, shouldCreateNewRowAfterCommit]);
-	const { activeId, overlayCellWidths, draggedDirection, sortableIds, rowRegistry, dndContextProps } = useTableBoxDragAndDrop({
-		tableRef,
-		reorderConfig: disabled ? void 0 : reorderConfig
-	});
-	const isReorderable = !disabled && reorderConfig != null;
-	const hasActionsColumn = !disableHorizontalScroll;
-	const contextValue = {
-		disabled,
-		newRowId,
-		columns,
-		selectedKey: currentSelectedKey,
-		selectionMode,
-		onRowClick: handleRowClick,
-		tableBoxId,
-		rowDropdownId,
-		isReorderable,
-		rowRegistry: isReorderable ? rowRegistry : null,
-		draggedDirection,
-		hasActionsColumn,
-		hasHorizontalOverflow,
-		setColumnWidthsLocked,
-		scheduleCreateNewRowAfterCommit: onCreateNewRowProp ? scheduleCreateNewRowAfterCommit : void 0
-	};
-	const isEmpty = Array.isArray(children) ? children.length === 0 : children == null;
-	const totalColumnCount = columns.length + (isReorderable ? 1 : 0) + (hasActionsColumn ? 1 : 0);
-	const activeRowContent = activeId ? rowRegistry.current.get(activeId) ?? null : null;
-	const tableContent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ScrollAffordanceWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableScrollContainer, {
-		ref: scrollContainerRef,
-		$fixedLayout: disableHorizontalScroll,
-		$hasHorizontalOverflow: hasHorizontalOverflow,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTable, {
-			ref: tableRef,
-			size: "md",
-			"aria-label": ariaLabel,
-			tabIndex: -1,
-			$isReorderable: isReorderable,
-			$hasHorizontalOverflow: hasHorizontalOverflow,
-			$fixedLayout: disableHorizontalScroll,
-			$hideHeader: hideHeader,
-			$lockedWidth: lockedColWidths != null ? lockedColWidths.reduce((sum, w) => sum + w, 0) : void 0,
-			...props,
-			children: [
-				lockedColWidths && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("colgroup", { children: lockedColWidths.map((w, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { style: { width: `${w}px` } }, i)) }),
-				!hideHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableHead, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Table.TableRow, { children: [
-					isReorderable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragHandleHeaderCell, { "aria-hidden": "true" }),
-					columns.map((column) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableHeaderCell, { children: column.title }, column.key)),
-					hasActionsColumn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableHeaderCell, {
-						"aria-hidden": "true",
-						style: { padding: 0 }
-					})
-				] }) }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableBody, { children: isEmpty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableRow, {
-					disableHoverBackground: true,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyStateCell, {
-						colSpan: totalColumnCount,
-						children: onCreateNewRowProp && !disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyStateButton, {
-							type: "button",
-							onClick: onCreateNewRowProp,
-							children: emptyText || "No data available."
-						}) : emptyText || "No data available."
-					})
-				}) : children })
-			]
-		})
-	}), !disableHorizontalScroll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RightFadeOverlay, {
-		"aria-hidden": "true",
-		$visible: hasMoreScrollRight
-	})] });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBoxContext.Provider, {
-		value: contextValue,
-		children: isReorderable ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_dnd_kit_core.DndContext, {
-			...dndContextProps,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_sortable.SortableContext, {
-				items: sortableIds,
-				strategy: _dnd_kit_sortable.verticalListSortingStrategy,
-				children: tableContent
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_core.DragOverlay, { children: activeRowContent && overlayCellWidths && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBoxRowOverlay, {
-				cellWidths: overlayCellWidths,
-				children: activeRowContent
-			}) })]
-		}) : tableContent
-	});
-};
-TableBox.Row = TableBoxRow;
-TableBox.Cell = TableBoxCell;
-//#endregion
-Object.defineProperty(exports, "TableBox", {
-	enumerable: true,
-	get: function() {
-		return TableBox;
-	}
-});
-Object.defineProperty(exports, "TableBoxContext", {
-	enumerable: true,
-	get: function() {
-		return TableBoxContext;
-	}
-});
-
-//# sourceMappingURL=TableBox-CiuXCXyv.cjs.map