hs-uix 1.0.0

package/dist/index.mjs

@@ -0,0 +1,2304 @@
+// packages/datatable/src/DataTable.jsx
+import React, { useState, useMemo, useEffect, useCallback, useRef } from "react";
+import Fuse from "fuse.js";
+import {
+  Box,
+  Button,
+  Checkbox,
+  CurrencyInput,
+  DateInput,
+  EmptyState,
+  ErrorState,
+  Flex,
+  Icon,
+  Input,
+  Link,
+  LoadingSpinner,
+  MultiSelect,
+  NumberInput,
+  SearchInput,
+  Select,
+  StepperInput,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  Text,
+  TextArea,
+  TimeInput,
+  Toggle
+} from "@hubspot/ui-extensions";
+var formatDateChip = (dateObj) => {
+  if (!dateObj) return "";
+  const { year, month, date } = dateObj;
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }).format(new Date(year, month, date));
+};
+var dateToTimestamp = (dateObj) => {
+  if (!dateObj) return null;
+  return new Date(dateObj.year, dateObj.month, dateObj.date).getTime();
+};
+var NARROW_EDIT_TYPES = /* @__PURE__ */ new Set(["checkbox", "toggle"]);
+var DATE_PATTERN = /^\d{4}[-/]\d{2}[-/]\d{2}/;
+var BOOL_VALUES = /* @__PURE__ */ new Set(["true", "false", "yes", "no", "0", "1"]);
+var SORT_DIRECTIONS = /* @__PURE__ */ new Set(["ascending", "descending", "none"]);
+var normalizeSortState = (columns, sort) => {
+  const normalized = {};
+  columns.forEach((col) => {
+    if (col.sortable) normalized[col.field] = "none";
+  });
+  if (!sort) return normalized;
+  if (sort.field && SORT_DIRECTIONS.has(sort.direction) && sort.field in normalized) {
+    normalized[sort.field] = sort.direction;
+    return normalized;
+  }
+  Object.keys(normalized).forEach((field) => {
+    const direction = sort[field];
+    if (SORT_DIRECTIONS.has(direction)) normalized[field] = direction;
+  });
+  return normalized;
+};
+var serializeSortState = (sortState) => {
+  const activeField = Object.keys(sortState).find((field) => sortState[field] !== "none");
+  if (!activeField) return null;
+  return { field: activeField, direction: sortState[activeField] };
+};
+var toStableKey = (value) => {
+  try {
+    return JSON.stringify(value);
+  } catch (_error) {
+    return String(value);
+  }
+};
+var computeAutoWidths = (columns, data) => {
+  if (!data || data.length === 0) return {};
+  const sample = data.slice(0, 50);
+  const results = {};
+  columns.forEach((col) => {
+    if (col.width && col.cellWidth) return;
+    const values = sample.map((row) => row[col.field]).filter((v) => v != null);
+    const strings = values.map((v) => String(v));
+    let widthHint = null;
+    let cellWidthHint = null;
+    if (col.editable && col.editType && NARROW_EDIT_TYPES.has(col.editType)) {
+      cellWidthHint = "min";
+    }
+    if (strings.length > 0) {
+      const lengths = strings.map((s) => s.length);
+      const maxLen = Math.max(...lengths);
+      const uniqueCount = new Set(strings).size;
+      if (values.every((v) => typeof v === "boolean") || strings.every((s) => BOOL_VALUES.has(s.toLowerCase()))) {
+        widthHint = widthHint || "min";
+        cellWidthHint = cellWidthHint || "min";
+      } else if (strings.every((s) => DATE_PATTERN.test(s))) {
+        widthHint = widthHint || "min";
+        cellWidthHint = cellWidthHint || "auto";
+      } else if (values.every((v) => typeof v === "number")) {
+        widthHint = widthHint || "auto";
+        cellWidthHint = cellWidthHint || "auto";
+      } else if (uniqueCount <= 5 && maxLen <= 15) {
+        widthHint = widthHint || "min";
+        cellWidthHint = cellWidthHint || "auto";
+      } else {
+        widthHint = widthHint || "auto";
+        cellWidthHint = cellWidthHint || "auto";
+      }
+    }
+    if (col.editable && !NARROW_EDIT_TYPES.has(col.editType) && widthHint === "min") {
+      widthHint = "auto";
+    }
+    results[col.field] = {
+      width: widthHint || "auto",
+      cellWidth: cellWidthHint || "auto"
+    };
+  });
+  return results;
+};
+var getEmptyFilterValue = (filter) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") return [];
+  if (type === "dateRange") return { from: null, to: null };
+  return "";
+};
+var BOOLEAN_SELECT_OPTIONS = [
+  { label: "Yes", value: true },
+  { label: "No", value: false }
+];
+var resolveEditOptions = (col, data) => {
+  if (col.editOptions && col.editOptions.length > 0) return col.editOptions;
+  const sample = data.find((row) => row[col.field] != null);
+  if (sample && typeof sample[col.field] === "boolean") return BOOLEAN_SELECT_OPTIONS;
+  return [];
+};
+var isFilterActive = (filter, value) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") return Array.isArray(value) && value.length > 0;
+  if (type === "dateRange") return value && (value.from || value.to);
+  return !!value;
+};
+var DataTable = ({
+  // Data
+  data,
+  columns,
+  renderRow,
+  // Search
+  searchFields = [],
+  searchPlaceholder = "Search...",
+  fuzzySearch = false,
+  // enable fuzzy matching via Fuse.js
+  fuzzyOptions,
+  // custom Fuse.js options (threshold, distance, etc.)
+  // Filters
+  filters = [],
+  showFilterBadges = true,
+  // show active filter chips/badges
+  showClearFiltersButton = true,
+  // show "Clear all" filters reset button
+  // Pagination
+  pageSize = 10,
+  maxVisiblePageButtons,
+  // max page number buttons to show
+  showButtonLabels = true,
+  // show First/Prev/Next/Last text labels
+  showFirstLastButtons,
+  // show First/Last page buttons (default: auto when pageCount > 5)
+  // Row count
+  showRowCount = true,
+  // show "X records" / "X of Y records" text
+  rowCountBold = false,
+  // bold the row count text
+  rowCountText,
+  // custom formatter: (shownOnPage, totalMatching) => string
+  // Table appearance
+  bordered = true,
+  // show table borders
+  flush = true,
+  // remove bottom margin
+  scrollable = false,
+  // allow horizontal overflow with scrollbar
+  // Sorting
+  defaultSort = {},
+  // Grouping
+  groupBy,
+  // Footer
+  footer,
+  // Empty state
+  emptyTitle,
+  emptyMessage,
+  // -----------------------------------------------------------------------
+  // Server-side mode
+  // -----------------------------------------------------------------------
+  serverSide = false,
+  loading = false,
+  // show loading spinner over the table
+  error,
+  // error message string or boolean — shows ErrorState
+  totalCount,
+  // server total (server-side only)
+  page: externalPage,
+  // controlled page (server-side only)
+  searchValue,
+  // controlled search term (server-side only)
+  filterValues: externalFilterValues,
+  // controlled filter values (server-side only)
+  sort: externalSort,
+  // controlled sort state, e.g. { field: "ascending" }
+  searchDebounce = 0,
+  // ms to debounce onSearchChange callback
+  resetPageOnChange = true,
+  // auto-reset to page 1 on search/filter/sort change
+  onSearchChange,
+  // (searchTerm) => void
+  onFilterChange,
+  // (filterValues) => void
+  onSortChange,
+  // (field, direction) => void
+  onPageChange,
+  // (page) => void
+  onParamsChange,
+  // ({ search, filters, sort, page }) => void
+  // -----------------------------------------------------------------------
+  // Row selection
+  // -----------------------------------------------------------------------
+  selectable = false,
+  rowIdField = "id",
+  // field name used as unique row identifier
+  selectedIds: externalSelectedIds,
+  // controlled selection — array of row IDs
+  onSelectionChange,
+  // (selectedIds[]) => void
+  onSelectAllRequest,
+  // server-side: ({ selectedIds, pageIds, totalCount }) => void
+  selectionActions = [],
+  // [{ label, onClick(selectedIds[]), icon?, variant? }]
+  selectionResetKey,
+  // optional key to force clear uncontrolled selection memory
+  resetSelectionOnQueryChange = true,
+  // clear uncontrolled selection on search/filter/sort changes
+  recordLabel,
+  // { singular: "Contact", plural: "Contacts" } — defaults to Record/Records
+  // -----------------------------------------------------------------------
+  // Row actions
+  // -----------------------------------------------------------------------
+  rowActions,
+  // [{ label, onClick(row), icon?, variant? }] or (row) => actions[]
+  hideRowActionsWhenSelectionActive = false,
+  // hide row action column while selected-row action bar is visible
+  // -----------------------------------------------------------------------
+  // Inline editing
+  // -----------------------------------------------------------------------
+  editMode,
+  // "discrete" (click-to-edit) | "inline" (always show inputs)
+  editingRowId,
+  // controlled — row ID currently in full-row edit mode
+  onRowEdit,
+  // (row, field, newValue) => void
+  onRowEditInput,
+  // optional live-input callback: (row, field, inputValue) => void
+  // -----------------------------------------------------------------------
+  // Auto-width
+  // -----------------------------------------------------------------------
+  autoWidth = true
+  // auto-compute column widths from content analysis
+}) => {
+  const initialSortState = useMemo(() => {
+    return normalizeSortState(columns, defaultSort);
+  }, [columns, defaultSort]);
+  const [internalSearchTerm, setInternalSearchTerm] = useState("");
+  const [internalFilterValues, setInternalFilterValues] = useState(() => {
+    const init = {};
+    filters.forEach((f) => {
+      init[f.name] = getEmptyFilterValue(f);
+    });
+    return init;
+  });
+  const [internalSortState, setInternalSortState] = useState(initialSortState);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [showMoreFilters, setShowMoreFilters] = useState(false);
+  const searchTerm = serverSide && searchValue != null ? searchValue : internalSearchTerm;
+  const filterValues = serverSide && externalFilterValues != null ? externalFilterValues : internalFilterValues;
+  const externalSortState = useMemo(
+    () => normalizeSortState(columns, externalSort),
+    [columns, externalSort]
+  );
+  const sortState = serverSide && externalSort != null ? externalSortState : internalSortState;
+  const activePage = serverSide && externalPage != null ? externalPage : currentPage;
+  useEffect(() => {
+    if (!serverSide) setCurrentPage(1);
+  }, [internalSearchTerm, internalFilterValues, internalSortState, serverSide]);
+  const debounceRef = useRef(null);
+  const fireSearchCallback = useCallback((term) => {
+    if (serverSide && onSearchChange) onSearchChange(term);
+  }, [serverSide, onSearchChange]);
+  const fireParamsChange = useCallback((overrides) => {
+    if (!onParamsChange) return;
+    const nextSortState = overrides.sort != null ? normalizeSortState(columns, overrides.sort) : sortState;
+    onParamsChange({
+      search: overrides.search != null ? overrides.search : searchTerm,
+      filters: overrides.filters != null ? overrides.filters : filterValues,
+      sort: serializeSortState(nextSortState),
+      page: overrides.page != null ? overrides.page : activePage
+    });
+  }, [onParamsChange, columns, searchTerm, filterValues, sortState, activePage]);
+  const resetPage = useCallback(() => {
+    if (resetPageOnChange) {
+      setCurrentPage(1);
+      if (serverSide && onPageChange) onPageChange(1);
+    }
+  }, [resetPageOnChange, serverSide, onPageChange]);
+  const handleSearchChange = useCallback((term) => {
+    setInternalSearchTerm(term);
+    resetPage();
+    if (searchDebounce > 0) {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        fireSearchCallback(term);
+        fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
+      }, searchDebounce);
+    } else {
+      fireSearchCallback(term);
+      fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
+    }
+  }, [searchDebounce, fireSearchCallback, fireParamsChange, resetPage, resetPageOnChange]);
+  useEffect(() => () => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+  }, []);
+  const handleFilterChange = useCallback((name, value) => {
+    const next = { ...filterValues, [name]: value };
+    setInternalFilterValues(next);
+    if (serverSide && onFilterChange) onFilterChange(next);
+    resetPage();
+    fireParamsChange({ filters: next, page: resetPageOnChange ? 1 : void 0 });
+  }, [filterValues, serverSide, onFilterChange, fireParamsChange, resetPage, resetPageOnChange]);
+  const handleSortChange = useCallback((field) => {
+    const current = sortState[field] || "none";
+    const nextDirection = current === "none" ? "ascending" : current === "ascending" ? "descending" : "none";
+    const reset = {};
+    columns.forEach((col) => {
+      if (col.sortable) reset[col.field] = "none";
+    });
+    const next = nextDirection === "none" ? reset : { ...reset, [field]: nextDirection };
+    setInternalSortState(next);
+    if (serverSide && onSortChange) onSortChange(field, nextDirection);
+    resetPage();
+    fireParamsChange({ sort: next, page: resetPageOnChange ? 1 : void 0 });
+  }, [sortState, columns, serverSide, onSortChange, fireParamsChange, resetPage, resetPageOnChange]);
+  const handlePageChange = useCallback((page) => {
+    setCurrentPage(page);
+    if (serverSide && onPageChange) onPageChange(page);
+    fireParamsChange({ page });
+  }, [serverSide, onPageChange, fireParamsChange]);
+  const filteredData = useMemo(() => {
+    if (serverSide) return data;
+    let result = data;
+    filters.forEach((filter) => {
+      const value = filterValues[filter.name];
+      if (!isFilterActive(filter, value)) return;
+      const type = filter.type || "select";
+      if (filter.filterFn) {
+        result = result.filter((row) => filter.filterFn(row, value));
+      } else if (type === "multiselect") {
+        result = result.filter((row) => value.includes(row[filter.name]));
+      } else if (type === "dateRange") {
+        const fromTs = dateToTimestamp(value.from);
+        const toTs = value.to ? dateToTimestamp(value.to) + 864e5 - 1 : null;
+        result = result.filter((row) => {
+          const rowTs = new Date(row[filter.name]).getTime();
+          if (Number.isNaN(rowTs)) return false;
+          if (fromTs && rowTs < fromTs) return false;
+          if (toTs && rowTs > toTs) return false;
+          return true;
+        });
+      } else {
+        result = result.filter((row) => row[filter.name] === value);
+      }
+    });
+    if (searchTerm && searchFields.length > 0) {
+      if (fuzzySearch) {
+        const fuse = new Fuse(result, {
+          keys: searchFields,
+          threshold: 0.4,
+          distance: 100,
+          ignoreLocation: true,
+          ...fuzzyOptions
+        });
+        result = fuse.search(searchTerm).map((r) => r.item);
+      } else {
+        const term = searchTerm.toLowerCase();
+        result = result.filter(
+          (row) => searchFields.some((field) => {
+            const val = row[field];
+            return val && String(val).toLowerCase().includes(term);
+          })
+        );
+      }
+    }
+    return result;
+  }, [data, filterValues, searchTerm, filters, searchFields, serverSide, fuzzySearch, fuzzyOptions]);
+  const sortedData = useMemo(() => {
+    if (serverSide) return filteredData;
+    const activeField = Object.keys(sortState).find((k) => sortState[k] !== "none");
+    if (!activeField) return filteredData;
+    return [...filteredData].sort((a, b) => {
+      const dir = sortState[activeField] === "ascending" ? 1 : -1;
+      const aVal = a[activeField];
+      const bVal = b[activeField];
+      if (aVal == null && bVal == null) return 0;
+      if (aVal == null) return 1;
+      if (bVal == null) return -1;
+      if (aVal < bVal) return -dir;
+      if (aVal > bVal) return dir;
+      return 0;
+    });
+  }, [filteredData, sortState, serverSide]);
+  const groupedData = useMemo(() => {
+    if (!groupBy) return null;
+    const source = serverSide ? data : sortedData;
+    const groups = {};
+    source.forEach((row) => {
+      const key = row[groupBy.field] ?? "--";
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(row);
+    });
+    let groupKeys = Object.keys(groups);
+    if (groupBy.sort) {
+      if (typeof groupBy.sort === "function") {
+        groupKeys.sort(groupBy.sort);
+      } else {
+        const dir = groupBy.sort === "desc" ? -1 : 1;
+        groupKeys.sort((a, b) => a < b ? -dir : a > b ? dir : 0);
+      }
+    }
+    return groupKeys.map((key) => ({
+      key,
+      label: groupBy.label ? groupBy.label(key, groups[key]) : key,
+      rows: groups[key]
+    }));
+  }, [sortedData, data, groupBy, serverSide]);
+  const [expandedGroups, setExpandedGroups] = useState(() => {
+    if (!groupBy) return /* @__PURE__ */ new Set();
+    const defaultExpanded = groupBy.defaultExpanded !== false;
+    if (defaultExpanded && groupedData) {
+      return new Set(groupedData.map((g) => g.key));
+    }
+    return /* @__PURE__ */ new Set();
+  });
+  useEffect(() => {
+    if (!groupedData) return;
+    const defaultExpanded = (groupBy == null ? void 0 : groupBy.defaultExpanded) !== false;
+    if (defaultExpanded) {
+      setExpandedGroups((prev) => {
+        const next = new Set(prev);
+        groupedData.forEach((g) => next.add(g.key));
+        return next;
+      });
+    }
+  }, [groupedData, groupBy]);
+  const toggleGroup = useCallback((key) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  const flatRows = useMemo(() => {
+    if (!groupedData) return (serverSide ? data : sortedData).map((row) => ({ type: "data", row }));
+    const flat = [];
+    groupedData.forEach((group) => {
+      flat.push({ type: "group-header", group });
+      if (expandedGroups.has(group.key)) {
+        group.rows.forEach((row) => flat.push({ type: "data", row }));
+      }
+    });
+    return flat;
+  }, [groupedData, sortedData, data, serverSide, expandedGroups]);
+  const totalItems = serverSide ? totalCount || data.length : flatRows.length;
+  const pageCount = Math.ceil(totalItems / pageSize);
+  let displayRows;
+  if (serverSide) {
+    displayRows = groupBy ? flatRows : data.map((row) => ({ type: "data", row }));
+  } else {
+    displayRows = flatRows.slice(
+      (activePage - 1) * pageSize,
+      activePage * pageSize
+    );
+  }
+  const footerData = serverSide ? data : filteredData;
+  const activeChips = useMemo(() => {
+    const chips = [];
+    filters.forEach((filter) => {
+      const value = filterValues[filter.name];
+      if (!isFilterActive(filter, value)) return;
+      const type = filter.type || "select";
+      const prefix = filter.chipLabel || filter.placeholder || filter.name;
+      if (type === "multiselect") {
+        const labels = value.map((v) => {
+          var _a;
+          return ((_a = filter.options.find((o) => o.value === v)) == null ? void 0 : _a.label) || v;
+        }).join(", ");
+        chips.push({ key: filter.name, label: `${prefix}: ${labels}` });
+      } else if (type === "dateRange") {
+        const parts = [];
+        if (value.from) parts.push(`from ${formatDateChip(value.from)}`);
+        if (value.to) parts.push(`to ${formatDateChip(value.to)}`);
+        chips.push({ key: filter.name, label: `${prefix}: ${parts.join(" ")}` });
+      } else {
+        const option = filter.options.find((o) => o.value === value);
+        chips.push({ key: filter.name, label: `${prefix}: ${(option == null ? void 0 : option.label) || value}` });
+      }
+    });
+    return chips;
+  }, [filterValues, filters]);
+  const handleFilterRemove = useCallback((key) => {
+    if (key === "all") {
+      const cleared = {};
+      filters.forEach((f) => {
+        cleared[f.name] = getEmptyFilterValue(f);
+      });
+      setInternalFilterValues(cleared);
+      if (serverSide && onFilterChange) onFilterChange(cleared);
+      resetPage();
+      fireParamsChange({ filters: cleared, page: resetPageOnChange ? 1 : void 0 });
+    } else {
+      const filter = filters.find((f) => f.name === key);
+      const emptyVal = filter ? getEmptyFilterValue(filter) : "";
+      const next = { ...filterValues, [key]: emptyVal };
+      setInternalFilterValues(next);
+      if (serverSide && onFilterChange) onFilterChange(next);
+      resetPage();
+      fireParamsChange({ filters: next, page: resetPageOnChange ? 1 : void 0 });
+    }
+  }, [filters, filterValues, serverSide, onFilterChange, resetPage, fireParamsChange, resetPageOnChange]);
+  const displayCount = serverSide ? totalCount || data.length : filteredData.length;
+  const totalDataCount = serverSide ? totalCount || data.length : data.length;
+  const shownOnPageCount = displayRows.filter((item) => item.type === "data").length;
+  const pluralLabel = ((recordLabel == null ? void 0 : recordLabel.plural) || "records").toLowerCase();
+  const singularLabel = ((recordLabel == null ? void 0 : recordLabel.singular) || "record").toLowerCase();
+  const countLabel = (n) => n === 1 ? singularLabel : pluralLabel;
+  const resolvedEmptyTitle = emptyTitle || "No results found";
+  const resolvedEmptyMessage = emptyMessage || `No ${pluralLabel} match your search or filter criteria.`;
+  const resolvedLoadingLabel = `Loading ${pluralLabel}...`;
+  const recordCountLabel = rowCountText ? rowCountText(shownOnPageCount, displayCount) : displayCount === totalDataCount ? `${totalDataCount} ${countLabel(totalDataCount)}` : `${displayCount} of ${totalDataCount} ${countLabel(totalDataCount)}`;
+  const [internalSelectedIds, setInternalSelectedIds] = useState(/* @__PURE__ */ new Set());
+  const selectionResetRef = useRef("");
+  useEffect(() => {
+    if (externalSelectedIds != null) {
+      setInternalSelectedIds(new Set(externalSelectedIds));
+    }
+  }, [externalSelectedIds]);
+  const selectionQueryKey = useMemo(() => {
+    if (!resetSelectionOnQueryChange) return "";
+    return toStableKey({
+      search: searchTerm,
+      filters: filterValues,
+      sort: serializeSortState(sortState)
+    });
+  }, [searchTerm, filterValues, sortState, resetSelectionOnQueryChange]);
+  const combinedSelectionResetKey = useMemo(
+    () => `${selectionQueryKey}::${selectionResetKey == null ? "" : toStableKey(selectionResetKey)}`,
+    [selectionQueryKey, selectionResetKey]
+  );
+  useEffect(() => {
+    if (!selectable || externalSelectedIds != null) {
+      selectionResetRef.current = combinedSelectionResetKey;
+      return;
+    }
+    if (selectionResetRef.current && selectionResetRef.current !== combinedSelectionResetKey) {
+      setInternalSelectedIds(/* @__PURE__ */ new Set());
+    }
+    selectionResetRef.current = combinedSelectionResetKey;
+  }, [combinedSelectionResetKey, selectable, externalSelectedIds]);
+  const selectedIds = externalSelectedIds != null ? new Set(externalSelectedIds) : internalSelectedIds;
+  const showRowActionsColumn = !!rowActions && !(hideRowActionsWhenSelectionActive && selectable && selectedIds.size > 0);
+  const applySelection = useCallback((nextSet) => {
+    if (externalSelectedIds == null) {
+      setInternalSelectedIds(nextSet);
+    }
+    if (onSelectionChange) onSelectionChange([...nextSet]);
+  }, [externalSelectedIds, onSelectionChange]);
+  const pageRowIds = useMemo(() => {
+    if (serverSide) {
+      return data.map((row) => row[rowIdField]).filter((id) => id != null);
+    }
+    return displayRows.filter((r) => r.type === "data").map((r) => r.row[rowIdField]).filter((id) => id != null);
+  }, [serverSide, data, displayRows, rowIdField]);
+  const allRowIds = useMemo(
+    () => flatRows.filter((r) => r.type === "data").map((r) => r.row[rowIdField]).filter((id) => id != null),
+    [flatRows, rowIdField]
+  );
+  const handleSelectRow = useCallback((rowId, checked) => {
+    const next = new Set(selectedIds);
+    if (checked) next.add(rowId);
+    else next.delete(rowId);
+    applySelection(next);
+  }, [selectedIds, applySelection]);
+  const handleSelectAll = useCallback((checked) => {
+    const next = new Set(selectedIds);
+    pageRowIds.forEach((id) => {
+      if (checked) next.add(id);
+      else next.delete(id);
+    });
+    applySelection(next);
+  }, [selectedIds, pageRowIds, applySelection]);
+  const allVisibleSelected = useMemo(() => {
+    return pageRowIds.length > 0 && pageRowIds.every((id) => selectedIds.has(id));
+  }, [pageRowIds, selectedIds]);
+  const handleSelectAllRows = useCallback(() => {
+    const idsToAdd = serverSide ? pageRowIds : allRowIds;
+    const next = new Set(selectedIds);
+    idsToAdd.forEach((id) => next.add(id));
+    applySelection(next);
+    if (serverSide && onSelectAllRequest) {
+      onSelectAllRequest({
+        selectedIds: [...next],
+        pageIds: pageRowIds,
+        totalCount: totalCount || data.length
+      });
+    }
+  }, [serverSide, pageRowIds, allRowIds, selectedIds, applySelection, onSelectAllRequest, totalCount, data.length]);
+  const handleDeselectAll = useCallback(() => {
+    applySelection(/* @__PURE__ */ new Set());
+  }, [applySelection]);
+  const [editingCell, setEditingCell] = useState(null);
+  const [editValue, setEditValue] = useState(null);
+  const [editError, setEditError] = useState(null);
+  const startEditing = useCallback((rowId, field, currentValue) => {
+    setEditingCell({ rowId, field });
+    setEditValue(currentValue);
+    setEditError(null);
+  }, []);
+  const commitEdit = useCallback((row, field, value) => {
+    const col = columns.find((c) => c.field === field);
+    if (col == null ? void 0 : col.editValidate) {
+      const result = col.editValidate(value, row);
+      if (result !== true && result !== void 0 && result !== null) {
+        setEditError(typeof result === "string" ? result : "Invalid value");
+        return;
+      }
+    }
+    if (onRowEdit) onRowEdit(row, field, value);
+    setEditingCell(null);
+    setEditValue(null);
+    setEditError(null);
+  }, [onRowEdit, columns]);
+  const renderEditControl = (col, row) => {
+    const type = col.editType || "text";
+    const rowId = row[rowIdField];
+    const fieldName = `edit-${rowId}-${col.field}`;
+    const commit = (val) => commitEdit(row, col.field, val);
+    const exitEdit = () => {
+      if (editError) return;
+      setEditingCell(null);
+      setEditValue(null);
+    };
+    const extra = col.editProps || {};
+    const validate = col.editValidate;
+    const validationProps = validate && editError ? { error: true, validationMessage: editError } : {};
+    const onInputValidate = validate ? (val) => {
+      const result = validate(val, row);
+      if (result !== true && result !== void 0 && result !== null) {
+        setEditError(typeof result === "string" ? result : "Invalid value");
+      } else {
+        setEditError(null);
+      }
+    } : void 0;
+    const handleInput = (val) => {
+      setEditValue(val);
+      if (onInputValidate) onInputValidate(val);
+      if (onRowEditInput) onRowEditInput(row, col.field, val);
+    };
+    const maybeExitDatetimeEdit = () => {
+      if (typeof document === "undefined") return;
+      setTimeout(() => {
+        var _a, _b;
+        const activeName = (_b = (_a = document.activeElement) == null ? void 0 : _a.getAttribute) == null ? void 0 : _b.call(_a, "name");
+        if (activeName !== `${fieldName}-date` && activeName !== `${fieldName}-time`) {
+          exitEdit();
+        }
+      }, 0);
+    };
+    switch (type) {
+      case "textarea":
+        return /* @__PURE__ */ React.createElement(TextArea, { ...extra, name: fieldName, label: "", value: editValue ?? "", onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "number":
+        return /* @__PURE__ */ React.createElement(NumberInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "currency":
+        return /* @__PURE__ */ React.createElement(CurrencyInput, { currencyCode: "USD", ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "stepper":
+        return /* @__PURE__ */ React.createElement(StepperInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "select":
+        return /* @__PURE__ */ React.createElement(Select, { variant: "transparent", ...extra, name: fieldName, label: "", value: editValue, onChange: commit, options: resolveEditOptions(col, data) });
+      case "multiselect":
+        return /* @__PURE__ */ React.createElement(MultiSelect, { ...extra, name: fieldName, label: "", value: editValue || [], onChange: commit, options: resolveEditOptions(col, data) });
+      case "date":
+        return /* @__PURE__ */ React.createElement(DateInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+      case "time":
+        return /* @__PURE__ */ React.createElement(TimeInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+      case "datetime":
+        return /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React.createElement(DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: editValue == null ? void 0 : editValue.date, onChange: (val) => {
+          const next = { ...editValue, date: val };
+          setEditValue(next);
+          if (onRowEdit) onRowEdit(row, col.field, next);
+        }, onBlur: maybeExitDatetimeEdit }), /* @__PURE__ */ React.createElement(TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: editValue == null ? void 0 : editValue.time, onChange: (val) => {
+          const next = { ...editValue, time: val };
+          setEditValue(next);
+          if (onRowEdit) onRowEdit(row, col.field, next);
+        }, onBlur: maybeExitDatetimeEdit }));
+      case "toggle":
+        return /* @__PURE__ */ React.createElement(Toggle, { ...extra, name: fieldName, label: "", checked: !!editValue, onChange: commit });
+      case "checkbox":
+        return /* @__PURE__ */ React.createElement(Checkbox, { ...extra, name: fieldName, checked: !!editValue, onChange: commit });
+      default:
+        return /* @__PURE__ */ React.createElement(Input, { ...extra, name: fieldName, label: "", value: editValue ?? "", onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+    }
+  };
+  const resolvedEditMode = editMode || (columns.some((col) => col.editable) ? "discrete" : null);
+  const useColumnRendering = selectable || !!resolvedEditMode || editingRowId != null || showRowActionsColumn || !renderRow;
+  const autoWidths = useMemo(
+    () => autoWidth ? computeAutoWidths(columns, data) : {},
+    [columns, data, autoWidth]
+  );
+  const defaultWidth = scrollable ? "min" : "auto";
+  const getHeaderWidth = (col) => {
+    var _a;
+    return col.width || ((_a = autoWidths[col.field]) == null ? void 0 : _a.width) || defaultWidth;
+  };
+  const getCellWidth = (col) => {
+    var _a;
+    return col.cellWidth || col.width || ((_a = autoWidths[col.field]) == null ? void 0 : _a.cellWidth) || defaultWidth;
+  };
+  const [inlineErrors, setInlineErrors] = useState({});
+  const renderInlineControl = (col, row) => {
+    const type = col.editType || "text";
+    const rowId = row[rowIdField];
+    const fieldName = `inline-${rowId}-${col.field}`;
+    const cellKey = `${rowId}-${col.field}`;
+    const value = row[col.field];
+    const validate = col.editValidate;
+    const fire = (val) => {
+      if (validate) {
+        const result = validate(val, row);
+        if (result !== true && result !== void 0 && result !== null) {
+          setInlineErrors((prev) => ({ ...prev, [cellKey]: typeof result === "string" ? result : "Invalid value" }));
+          return;
+        }
+        setInlineErrors((prev) => {
+          const next = { ...prev };
+          delete next[cellKey];
+          return next;
+        });
+      }
+      if (onRowEdit) onRowEdit(row, col.field, val);
+    };
+    const extra = col.editProps || {};
+    const cellError = inlineErrors[cellKey];
+    const validationProps = cellError ? { error: true, validationMessage: cellError } : {};
+    const onInputValidate = validate ? (val) => {
+      const result = validate(val, row);
+      if (result !== true && result !== void 0 && result !== null) {
+        setInlineErrors((prev) => ({ ...prev, [cellKey]: typeof result === "string" ? result : "Invalid value" }));
+      } else {
+        setInlineErrors((prev) => {
+          const next = { ...prev };
+          delete next[cellKey];
+          return next;
+        });
+      }
+    } : void 0;
+    const emitInput = (val) => {
+      if (onInputValidate) onInputValidate(val);
+      if (onRowEditInput) onRowEditInput(row, col.field, val);
+    };
+    switch (type) {
+      case "textarea":
+        return /* @__PURE__ */ React.createElement(TextArea, { ...extra, name: fieldName, label: "", value: value ?? "", onChange: fire, ...validationProps, onInput: emitInput });
+      case "number":
+        return /* @__PURE__ */ React.createElement(NumberInput, { ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
+      case "currency":
+        return /* @__PURE__ */ React.createElement(CurrencyInput, { currencyCode: "USD", ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
+      case "stepper":
+        return /* @__PURE__ */ React.createElement(StepperInput, { ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
+      case "select":
+        return /* @__PURE__ */ React.createElement(Select, { ...extra, name: fieldName, label: "", value, onChange: fire, options: resolveEditOptions(col, data) });
+      case "multiselect":
+        return /* @__PURE__ */ React.createElement(MultiSelect, { ...extra, name: fieldName, label: "", value: value || [], onChange: fire, options: resolveEditOptions(col, data) });
+      case "date":
+        return /* @__PURE__ */ React.createElement(DateInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
+      case "time":
+        return /* @__PURE__ */ React.createElement(TimeInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
+      case "datetime":
+        return /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React.createElement(DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: value == null ? void 0 : value.date, onChange: (val) => {
+          fire({ ...value, date: val });
+        } }), /* @__PURE__ */ React.createElement(TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: value == null ? void 0 : value.time, onChange: (val) => {
+          fire({ ...value, time: val });
+        } }));
+      case "toggle":
+        return /* @__PURE__ */ React.createElement(Toggle, { ...extra, name: fieldName, label: "", checked: !!value, onChange: fire });
+      case "checkbox":
+        return /* @__PURE__ */ React.createElement(Checkbox, { ...extra, name: fieldName, checked: !!value, onChange: fire });
+      default:
+        return /* @__PURE__ */ React.createElement(Input, { ...extra, name: fieldName, label: "", value: value ?? "", onChange: fire, ...validationProps, onInput: emitInput });
+    }
+  };
+  const renderCellContent = (row, col) => {
+    const rowId = row[rowIdField];
+    if (resolvedEditMode === "inline" && col.editable) {
+      return renderInlineControl(col, row);
+    }
+    if (editingRowId != null && rowId === editingRowId && col.editable) {
+      return renderInlineControl(col, row);
+    }
+    const isEditing = (editingCell == null ? void 0 : editingCell.rowId) === rowId && (editingCell == null ? void 0 : editingCell.field) === col.field;
+    if (isEditing && col.editable) return renderEditControl(col, row);
+    const rawValue = row[col.field];
+    const rawStr = String(rawValue ?? "");
+    if (col.truncate && rawStr.length > 0) {
+      if (col.truncate === true) {
+        const content2 = col.renderCell ? col.renderCell(rawValue, row) : rawStr;
+        if (col.editable) {
+          return /* @__PURE__ */ React.createElement(Text, { truncate: { tooltipText: rawStr } }, /* @__PURE__ */ React.createElement(Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--"));
+        }
+        return /* @__PURE__ */ React.createElement(Text, { truncate: { tooltipText: rawStr } }, content2);
+      }
+      const maxLen = col.truncate.maxLength || 100;
+      if (rawStr.length > maxLen) {
+        const truncatedStr = rawStr.slice(0, maxLen) + "\u2026";
+        const truncatedContent = col.renderCell ? col.renderCell(truncatedStr, row) : truncatedStr;
+        if (col.editable) {
+          return /* @__PURE__ */ React.createElement(Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, truncatedContent || "--");
+        }
+        return /* @__PURE__ */ React.createElement(Text, { truncate: { tooltipText: rawStr } }, truncatedContent || "--");
+      }
+    }
+    const content = col.renderCell ? col.renderCell(rawValue, row) : rawValue;
+    const isEmpty = content == null || content === "";
+    if (col.editable) {
+      return /* @__PURE__ */ React.createElement(
+        Link,
+        {
+          variant: "dark",
+          onClick: () => startEditing(rowId, col.field, rawValue)
+        },
+        isEmpty ? "--" : content
+      );
+    }
+    return isEmpty ? "--" : content;
+  };
+  const renderFilterControl = (filter) => {
+    const type = filter.type || "select";
+    if (type === "multiselect") {
+      return /* @__PURE__ */ React.createElement(
+        MultiSelect,
+        {
+          key: filter.name,
+          name: `filter-${filter.name}`,
+          label: "",
+          placeholder: filter.placeholder || "All",
+          value: filterValues[filter.name] || [],
+          onChange: (val) => handleFilterChange(filter.name, val),
+          options: filter.options
+        }
+      );
+    }
+    if (type === "dateRange") {
+      const rangeVal = filterValues[filter.name] || { from: null, to: null };
+      return /* @__PURE__ */ React.createElement(Flex, { key: filter.name, direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React.createElement(
+        DateInput,
+        {
+          name: `filter-${filter.name}-from`,
+          label: "",
+          placeholder: "From",
+          format: "medium",
+          value: rangeVal.from,
+          onChange: (val) => handleFilterChange(filter.name, { ...rangeVal, from: val })
+        }
+      ), /* @__PURE__ */ React.createElement(Icon, { name: "dataSync", size: "sm" }), /* @__PURE__ */ React.createElement(
+        DateInput,
+        {
+          size: "sm",
+          name: `filter-${filter.name}-to`,
+          label: "",
+          placeholder: "To",
+          format: "medium",
+          value: rangeVal.to,
+          onChange: (val) => handleFilterChange(filter.name, { ...rangeVal, to: val })
+        }
+      ));
+    }
+    return /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        key: filter.name,
+        name: `filter-${filter.name}`,
+        variant: "transparent",
+        placeholder: filter.placeholder || "All",
+        value: filterValues[filter.name],
+        onChange: (val) => handleFilterChange(filter.name, val),
+        options: [
+          { label: filter.placeholder || "All", value: "" },
+          ...filter.options
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, searchFields.length > 0 && /* @__PURE__ */ React.createElement(
+    SearchInput,
+    {
+      name: "datatable-search",
+      placeholder: searchPlaceholder,
+      value: searchTerm,
+      onChange: handleSearchChange
+    }
+  ), filters.slice(0, 2).map(renderFilterControl), filters.length > 2 && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "transparent",
+      size: "small",
+      onClick: () => setShowMoreFilters((prev) => !prev)
+    },
+    /* @__PURE__ */ React.createElement(Icon, { name: "filter", size: "sm" }),
+    " Filters"
+  )), showMoreFilters && filters.length > 2 && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "end", gap: "sm", wrap: "wrap" }, filters.slice(2).map(renderFilterControl)), activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges && activeChips.map((chip) => /* @__PURE__ */ React.createElement(Tag, { key: chip.key, variant: "default", onDelete: () => handleFilterRemove(chip.key) }, chip.label)), showClearFiltersButton && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "transparent",
+      size: "extra-small",
+      onClick: () => handleFilterRemove("all")
+    },
+    "Clear all"
+  )))), showRowCount && displayCount > 0 && !(selectable && selectedIds.size > 0) && /* @__PURE__ */ React.createElement(Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ React.createElement(Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), selectable && selectedIds.size > 0 && /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ React.createElement(Text, { inline: true, format: { fontWeight: "demibold" } }, selectedIds.size, "\xA0", countLabel(selectedIds.size), "\xA0selected"), /* @__PURE__ */ React.createElement(Button, { variant: "transparent", size: "extra-small", onClick: handleSelectAllRows }, "Select all ", displayCount, " ", countLabel(displayCount)), /* @__PURE__ */ React.createElement(Button, { variant: "transparent", size: "extra-small", onClick: handleDeselectAll }, "Deselect all"), selectionActions.map((action, i) => /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      key: i,
+      variant: action.variant || "transparent",
+      size: "extra-small",
+      onClick: () => action.onClick([...selectedIds])
+    },
+    action.icon && /* @__PURE__ */ React.createElement(Icon, { name: action.icon, size: "sm" }),
+    " ",
+    action.label
+  )))), showRowCount && displayCount > 0 && /* @__PURE__ */ React.createElement(Box, { flex: 1, alignSelf: "center" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ React.createElement(Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), loading ? /* @__PURE__ */ React.createElement(LoadingSpinner, { label: resolvedLoadingLabel, layout: "centered" }) : error ? /* @__PURE__ */ React.createElement(ErrorState, { title: typeof error === "string" ? error : "Something went wrong." }, /* @__PURE__ */ React.createElement(Text, null, typeof error === "string" ? "Please try again." : "An error occurred while loading data.")) : displayRows.length === 0 ? /* @__PURE__ */ React.createElement(Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React.createElement(EmptyState, { title: resolvedEmptyTitle, layout: "vertical" }, /* @__PURE__ */ React.createElement(Text, null, resolvedEmptyMessage))) : /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      bordered,
+      flush,
+      paginated: pageCount > 1,
+      page: activePage,
+      pageCount,
+      onPageChange: handlePageChange,
+      showFirstLastButtons: showFirstLastButtons != null ? showFirstLastButtons : pageCount > 5,
+      showButtonLabels,
+      ...maxVisiblePageButtons != null ? { maxVisiblePageButtons } : {}
+    },
+    /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, selectable && /* @__PURE__ */ React.createElement(TableHeader, { width: "min" }, /* @__PURE__ */ React.createElement(
+      Checkbox,
+      {
+        name: "datatable-select-all",
+        "aria-label": "Select all rows",
+        checked: allVisibleSelected,
+        onChange: handleSelectAll
+      }
+    )), columns.map((col) => {
+      const headerAlign = resolvedEditMode === "inline" && col.editable ? void 0 : col.align;
+      return /* @__PURE__ */ React.createElement(
+        TableHeader,
+        {
+          key: col.field,
+          width: getHeaderWidth(col),
+          align: headerAlign,
+          sortDirection: col.sortable ? sortState[col.field] || "none" : "never",
+          onSortChange: col.sortable ? () => handleSortChange(col.field) : void 0
+        },
+        col.label
+      );
+    }), showRowActionsColumn && /* @__PURE__ */ React.createElement(TableHeader, { width: "min" }))),
+    /* @__PURE__ */ React.createElement(TableBody, null, displayRows.map(
+      (item, idx) => item.type === "group-header" ? /* @__PURE__ */ React.createElement(TableRow, { key: `group-${item.group.key}` }, selectable && /* @__PURE__ */ React.createElement(TableCell, { width: "min" }), columns.map((col, colIdx) => {
+        var _a, _b, _c;
+        return /* @__PURE__ */ React.createElement(TableCell, { key: col.field, width: getCellWidth(col), align: colIdx === 0 ? void 0 : col.align }, colIdx === 0 ? /* @__PURE__ */ React.createElement(
+          Link,
+          {
+            variant: "dark",
+            onClick: () => toggleGroup(item.group.key)
+          },
+          /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React.createElement(Icon, { name: expandedGroups.has(item.group.key) ? "downCarat" : "right" }), /* @__PURE__ */ React.createElement(Text, { format: { fontWeight: "demibold" } }, item.group.label))
+        ) : ((_a = groupBy.aggregations) == null ? void 0 : _a[col.field]) ? groupBy.aggregations[col.field](item.group.rows, item.group.key) : ((_c = (_b = groupBy.groupValues) == null ? void 0 : _b[item.group.key]) == null ? void 0 : _c[col.field]) ?? "");
+      }), showRowActionsColumn && /* @__PURE__ */ React.createElement(TableCell, { width: "min" })) : useColumnRendering ? /* @__PURE__ */ React.createElement(TableRow, { key: item.row[rowIdField] ?? idx }, selectable && /* @__PURE__ */ React.createElement(TableCell, { width: "min" }, /* @__PURE__ */ React.createElement(
+        Checkbox,
+        {
+          name: `select-${item.row[rowIdField]}`,
+          "aria-label": "Select row",
+          checked: selectedIds.has(item.row[rowIdField]),
+          onChange: (checked) => handleSelectRow(item.row[rowIdField], checked)
+        }
+      )), columns.map((col) => {
+        const rowId = item.row[rowIdField];
+        const isDiscreteEditing = resolvedEditMode === "discrete" && (editingCell == null ? void 0 : editingCell.rowId) === rowId && (editingCell == null ? void 0 : editingCell.field) === col.field;
+        const isRowEditing = editingRowId != null && rowId === editingRowId && col.editable;
+        const isShowingInput = isDiscreteEditing || isRowEditing || resolvedEditMode === "inline" && col.editable;
+        const cellAlign = isShowingInput ? void 0 : col.align;
+        return /* @__PURE__ */ React.createElement(TableCell, { key: col.field, width: isDiscreteEditing || isRowEditing ? "auto" : getCellWidth(col), align: cellAlign }, renderCellContent(item.row, col));
+      }), showRowActionsColumn && /* @__PURE__ */ React.createElement(TableCell, { width: "min" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, (() => {
+        const resolvedRowActions = typeof rowActions === "function" ? rowActions(item.row) : rowActions;
+        const actions = Array.isArray(resolvedRowActions) ? resolvedRowActions : [];
+        return actions.map((action, i) => /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            key: i,
+            variant: action.variant || "transparent",
+            size: "extra-small",
+            onClick: () => action.onClick(item.row)
+          },
+          action.icon && /* @__PURE__ */ React.createElement(Icon, { name: action.icon, size: "sm" }),
+          action.label && ` ${action.label}`
+        ));
+      })()))) : renderRow(item.row)
+    )),
+    (footer || columns.some((col) => col.footer)) && /* @__PURE__ */ React.createElement(TableFooter, null, typeof footer === "function" ? footer(footerData) : /* @__PURE__ */ React.createElement(TableRow, null, selectable && /* @__PURE__ */ React.createElement(TableHeader, { width: "min" }), columns.map((col) => {
+      const footerDef = col.footer;
+      const content = typeof footerDef === "function" ? footerDef(footerData) : footerDef || "";
+      return /* @__PURE__ */ React.createElement(TableHeader, { key: col.field, align: col.align }, content);
+    }), showRowActionsColumn && /* @__PURE__ */ React.createElement(TableHeader, { width: "min" })))
+  ));
+};
+
+// packages/form/src/FormBuilder.jsx
+import React2, {
+  useState as useState2,
+  useRef as useRef2,
+  useMemo as useMemo2,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useImperativeHandle,
+  forwardRef
+} from "react";
+import {
+  Accordion,
+  Form,
+  Flex as Flex2,
+  Box as Box2,
+  AutoGrid,
+  Tile,
+  Inline,
+  Text as Text2,
+  Link as Link2,
+  Icon as Icon2,
+  Divider,
+  Button as Button2,
+  LoadingButton,
+  Alert,
+  Tooltip,
+  StepIndicator,
+  Input as Input2,
+  TextArea as TextArea2,
+  Select as Select2,
+  MultiSelect as MultiSelect2,
+  NumberInput as NumberInput2,
+  StepperInput as StepperInput2,
+  CurrencyInput as CurrencyInput2,
+  DateInput as DateInput2,
+  TimeInput as TimeInput2,
+  Toggle as Toggle2,
+  Checkbox as Checkbox2,
+  ToggleGroup
+} from "@hubspot/ui-extensions";
+import {
+  CrmPropertyList,
+  CrmAssociationPropertyList
+} from "@hubspot/ui-extensions/crm";
+var getEmptyValue = (field) => {
+  switch (field.type) {
+    case "toggle":
+    case "checkbox":
+      return false;
+    case "multiselect":
+    case "checkboxGroup":
+      return [];
+    case "number":
+    case "stepper":
+    case "currency":
+      return void 0;
+    case "date":
+    case "time":
+    case "datetime":
+      return void 0;
+    case "display":
+    case "crmPropertyList":
+    case "crmAssociationPropertyList":
+      return void 0;
+    // these field types have no form value
+    case "repeater":
+      return [];
+    default:
+      return "";
+  }
+};
+var isValueEmpty = (value, field) => {
+  if (value === void 0 || value === null) return true;
+  if (typeof value === "string" && value.trim() === "") return true;
+  if (Array.isArray(value) && value.length === 0) return true;
+  if ((field.type === "toggle" || field.type === "checkbox") && value === false) return true;
+  return false;
+};
+var runValidators = (value, field, allValues, fieldTypes) => {
+  if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") return null;
+  const isRequired = resolveRequired(field, allValues);
+  const plugin = fieldTypes && fieldTypes[field.type];
+  const empty = plugin && plugin.isEmpty ? plugin.isEmpty(value) : isValueEmpty(value, field);
+  if (isRequired && empty) {
+    return `${field.label} is required`;
+  }
+  if (empty) return null;
+  if (field.pattern && typeof value === "string") {
+    if (!field.pattern.test(value)) {
+      return field.patternMessage || "Invalid format";
+    }
+  }
+  if (typeof value === "string") {
+    if (field.minLength != null && value.length < field.minLength) {
+      return `Must be at least ${field.minLength} characters`;
+    }
+    if (field.maxLength != null && value.length > field.maxLength) {
+      return `Must be no more than ${field.maxLength} characters`;
+    }
+  }
+  if (typeof value === "number") {
+    if (field.min != null && value < field.min) {
+      return `Must be at least ${field.min}`;
+    }
+    if (field.max != null && value > field.max) {
+      return `Must be no more than ${field.max}`;
+    }
+  }
+  if (field.validate) {
+    const result = field.validate(value, allValues);
+    if (result && typeof result.then === "function") return null;
+    if (result !== true && result) return result;
+  }
+  return null;
+};
+var resolveRequired = (field, allValues) => {
+  if (typeof field.required === "function") return field.required(allValues);
+  return !!field.required;
+};
+var resolveOptions = (field, allValues) => {
+  if (typeof field.options === "function") return field.options(allValues);
+  return field.options || [];
+};
+var useFormPrefill = (properties, mapping) => {
+  return useMemo2(() => {
+    if (!properties) return {};
+    if (!mapping) {
+      const result2 = {};
+      for (const [key, value] of Object.entries(properties)) {
+        if (value !== void 0) result2[key] = value;
+      }
+      return result2;
+    }
+    const result = {};
+    for (const [formField, crmProp] of Object.entries(mapping)) {
+      if (properties[crmProp] !== void 0) {
+        result[formField] = properties[crmProp];
+      }
+    }
+    return result;
+  }, [properties, mapping]);
+};
+var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
+  const {
+    fields,
+    // FormBuilderField[] — field definitions
+    onSubmit,
+    // (values, { reset, rawValues }) => void | Promise
+    transformValues,
+    // (values) => values — reshape before submit
+    onBeforeSubmit,
+    // (values) => boolean | Promise<boolean> — intercept submit
+    onSubmitSuccess,
+    // (result, { reset, values }) => void
+    onSubmitError,
+    // (error, { values }) => void
+    resetOnSuccess = false
+    // auto-reset after successful submit
+  } = props;
+  const {
+    initialValues,
+    // Record<string, unknown> — starting values (uncontrolled)
+    values,
+    // Record<string, unknown> — controlled values
+    onChange,
+    // (values) => void — called on any field change (controlled)
+    onFieldChange
+    // (name, value, allValues) => void — per-field change callback
+  } = props;
+  const {
+    validateOnChange = false,
+    // validate on keystroke (onInput)
+    validateOnBlur = true,
+    // validate on blur
+    validateOnSubmit = true,
+    // validate all before onSubmit
+    onValidationChange
+    // (errors) => void
+  } = props;
+  const {
+    steps,
+    // FormBuilderStep[] — enables multi-step mode
+    step: controlledStep,
+    // number — controlled current step (0-based)
+    onStepChange,
+    // (step) => void
+    showStepIndicator = true,
+    // show StepIndicator component
+    validateStepOnNext = true
+    // validate current step fields before Next
+  } = props;
+  const {
+    submitLabel = "Submit",
+    // submit button text
+    submitVariant = "primary",
+    // submit button variant
+    showCancel = false,
+    // show cancel button
+    cancelLabel = "Cancel",
+    // cancel button text
+    onCancel,
+    // () => void
+    submitPosition = "bottom",
+    // "bottom" | "none"
+    loading: controlledLoading,
+    // controlled loading state
+    disabled = false
+    // disable entire form
+  } = props;
+  const {
+    columns = 1,
+    // number of grid columns (1 = full-width stack)
+    columnWidth,
+    // AutoGrid columnWidth — responsive layout (overrides columns)
+    layout,
+    // explicit row layout array (overrides columns + columnWidth)
+    sections,
+    // FormBuilderSection[] — accordion field grouping
+    gap = "sm",
+    // gap between fields
+    showRequiredIndicator = true,
+    // show * on required fields
+    noFormWrapper = false,
+    // skip HubSpot <Form> wrapper
+    fieldTypes
+    // Record<string, FieldTypePlugin> — custom field type registry
+  } = props;
+  const {
+    error: formError,
+    // string | boolean — form-level error alert
+    success: formSuccess,
+    // string — form-level success alert
+    readOnly: formReadOnly = false,
+    // boolean — lock all fields
+    readOnlyMessage
+    // string — warning alert when readOnly
+  } = props;
+  const {
+    onDirtyChange,
+    // (isDirty: boolean) => void
+    autoSave
+    // { debounce: number, onAutoSave: (values) => void }
+  } = props;
+  const computeInitialValues = () => {
+    const vals = {};
+    for (const field of fields) {
+      if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") continue;
+      const plugin = fieldTypes && fieldTypes[field.type];
+      const emptyValue = plugin && plugin.getEmptyValue ? plugin.getEmptyValue() : getEmptyValue(field);
+      const init = initialValues && initialValues[field.name] !== void 0 ? initialValues[field.name] : field.defaultValue !== void 0 ? field.defaultValue : emptyValue;
+      vals[field.name] = init;
+    }
+    return vals;
+  };
+  const [internalValues, setInternalValues] = useState2(computeInitialValues);
+  const [internalErrors, setInternalErrors] = useState2({});
+  const [internalStep, setInternalStep] = useState2(0);
+  const [internalLoading, setInternalLoading] = useState2(false);
+  const [touchedFields, setTouchedFields] = useState2({});
+  const [validatingFields, setValidatingFields] = useState2({});
+  const asyncValidationRef = useRef2(/* @__PURE__ */ new Map());
+  const debounceTimersRef = useRef2(/* @__PURE__ */ new Map());
+  const initialSnapshot = useRef2(null);
+  if (initialSnapshot.current === null) {
+    initialSnapshot.current = JSON.stringify(computeInitialValues());
+  }
+  const formValues = values != null ? values : internalValues;
+  const currentStep = controlledStep != null ? controlledStep : internalStep;
+  const isLoading = controlledLoading != null ? controlledLoading : internalLoading;
+  const isMultiStep = Array.isArray(steps) && steps.length > 0;
+  useEffect2(() => {
+    return () => {
+      for (const timer of debounceTimersRef.current.values()) clearTimeout(timer);
+    };
+  }, []);
+  const isDirty = useMemo2(() => {
+    return JSON.stringify(formValues) !== initialSnapshot.current;
+  }, [formValues]);
+  const prevDirtyRef = useRef2(false);
+  useEffect2(() => {
+    if (isDirty !== prevDirtyRef.current) {
+      prevDirtyRef.current = isDirty;
+      if (onDirtyChange) onDirtyChange(isDirty);
+    }
+  }, [isDirty, onDirtyChange]);
+  const autoSaveTimerRef = useRef2(null);
+  useEffect2(() => {
+    if (!autoSave || !autoSave.onAutoSave || !isDirty) return;
+    if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
+    autoSaveTimerRef.current = setTimeout(() => {
+      autoSaveTimerRef.current = null;
+      autoSave.onAutoSave(formValues);
+    }, autoSave.debounce || 1e3);
+    return () => {
+      if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
+    };
+  }, [formValues, isDirty, autoSave]);
+  const visibleFields = useMemo2(() => {
+    let filtered = fields.filter((f) => {
+      if (f.visible && !f.visible(formValues)) return false;
+      return true;
+    });
+    if (isMultiStep && steps[currentStep] && steps[currentStep].fields) {
+      const stepFieldNames = new Set(steps[currentStep].fields);
+      filtered = filtered.filter((f) => stepFieldNames.has(f.name));
+    }
+    return filtered;
+  }, [fields, formValues, isMultiStep, steps, currentStep]);
+  const validateField = useCallback2(
+    (name, value) => {
+      const field = fields.find((f) => f.name === name);
+      if (!field) return null;
+      if (field.visible && !field.visible(formValues)) return null;
+      return runValidators(value != null ? value : formValues[name], field, formValues, fieldTypes);
+    },
+    [fields, formValues, fieldTypes]
+  );
+  const validateVisibleFields = useCallback2(
+    (fieldSubset) => {
+      const toValidate = fieldSubset || visibleFields;
+      const errors = {};
+      let hasErrors = false;
+      for (const field of toValidate) {
+        const err = runValidators(formValues[field.name], field, formValues, fieldTypes);
+        if (err) {
+          errors[field.name] = err;
+          hasErrors = true;
+        }
+      }
+      return { errors, hasErrors };
+    },
+    [visibleFields, formValues]
+  );
+  const updateErrors = useCallback2(
+    (newErrors) => {
+      setInternalErrors((prev) => {
+        const merged = { ...prev, ...newErrors };
+        for (const key of Object.keys(merged)) {
+          if (newErrors[key] === null || newErrors[key] === void 0) {
+            delete merged[key];
+          }
+        }
+        if (onValidationChange) onValidationChange(merged);
+        return merged;
+      });
+    },
+    [onValidationChange]
+  );
+  const runAsyncValidation = useCallback2(
+    (name, value) => {
+      const field = fields.find((f) => f.name === name);
+      if (!field || !field.validate) return;
+      const val = value != null ? value : formValues[name];
+      const syncError = runValidators(val, field, formValues, fieldTypes);
+      if (syncError) return;
+      const result = field.validate(val, formValues);
+      if (!result || typeof result.then !== "function") return;
+      const validationPromise = result.then(
+        (asyncResult) => {
+          if (asyncValidationRef.current.get(name) !== validationPromise) return;
+          asyncValidationRef.current.delete(name);
+          setValidatingFields((prev) => {
+            const next = { ...prev };
+            delete next[name];
+            return next;
+          });
+          const err = asyncResult !== true && asyncResult ? asyncResult : null;
+          updateErrors({ [name]: err });
+        },
+        (rejection) => {
+          if (asyncValidationRef.current.get(name) !== validationPromise) return;
+          asyncValidationRef.current.delete(name);
+          setValidatingFields((prev) => {
+            const next = { ...prev };
+            delete next[name];
+            return next;
+          });
+          updateErrors({ [name]: (rejection == null ? void 0 : rejection.message) || "Validation failed" });
+        }
+      );
+      asyncValidationRef.current.set(name, validationPromise);
+      setValidatingFields((prev) => ({ ...prev, [name]: true }));
+    },
+    [fields, formValues, updateErrors]
+  );
+  const triggerAsyncValidation = useCallback2(
+    (name, value) => {
+      const field = fields.find((f) => f.name === name);
+      if (!field || !field.validate) return;
+      const debounceMs = field.validateDebounce;
+      if (debounceMs && debounceMs > 0) {
+        const existing = debounceTimersRef.current.get(name);
+        if (existing) clearTimeout(existing);
+        const timer = setTimeout(() => {
+          debounceTimersRef.current.delete(name);
+          runAsyncValidation(name, value);
+        }, debounceMs);
+        debounceTimersRef.current.set(name, timer);
+      } else {
+        runAsyncValidation(name, value);
+      }
+    },
+    [fields, runAsyncValidation]
+  );
+  const setFieldValueSilent = useCallback2(
+    (name, value) => {
+      if (values != null) {
+        if (onChange) onChange({ ...formValues, [name]: value });
+      } else {
+        setInternalValues((prev) => ({ ...prev, [name]: value }));
+      }
+    },
+    [values, onChange, formValues]
+  );
+  const handleFieldChange = useCallback2(
+    (name, value) => {
+      const newValues = { ...formValues, [name]: value };
+      if (values != null) {
+        if (onChange) onChange(newValues);
+      } else {
+        setInternalValues(newValues);
+      }
+      if (onFieldChange) onFieldChange(name, value, newValues);
+      if (internalErrors[name]) {
+        updateErrors({ [name]: null });
+      }
+      const field = fields.find((f) => f.name === name);
+      if (field && field.onFieldChange) {
+        field.onFieldChange(value, newValues, {
+          setFieldValue: setFieldValueSilent,
+          setFieldError: (fieldName, message) => updateErrors({ [fieldName]: message })
+        });
+      }
+    },
+    [formValues, values, onChange, onFieldChange, internalErrors, updateErrors, fields, setFieldValueSilent]
+  );
+  const inputDebounceRef = useRef2(/* @__PURE__ */ new Map());
+  const handleDebouncedFieldChange = useCallback2(
+    (name, value) => {
+      const field = fields.find((f) => f.name === name);
+      const debounceMs = field && field.debounce;
+      if (debounceMs && debounceMs > 0) {
+        const existing = inputDebounceRef.current.get(name);
+        if (existing) clearTimeout(existing);
+        const timer = setTimeout(() => {
+          inputDebounceRef.current.delete(name);
+          handleFieldChange(name, value);
+        }, debounceMs);
+        inputDebounceRef.current.set(name, timer);
+      } else {
+        handleFieldChange(name, value);
+      }
+    },
+    [fields, handleFieldChange]
+  );
+  const handleFieldInput = useCallback2(
+    (name, value) => {
+      if (validateOnChange) {
+        const err = validateField(name, value);
+        updateErrors({ [name]: err });
+      }
+    },
+    [validateOnChange, validateField, updateErrors]
+  );
+  const handleFieldBlur = useCallback2(
+    (name, value) => {
+      setTouchedFields((prev) => ({ ...prev, [name]: true }));
+      if (validateOnBlur) {
+        const err = validateField(name, value != null ? value : formValues[name]);
+        updateErrors({ [name]: err });
+        if (!err) {
+          triggerAsyncValidation(name, value != null ? value : formValues[name]);
+        }
+      }
+    },
+    [validateOnBlur, validateField, updateErrors, formValues, triggerAsyncValidation]
+  );
+  const handleSubmit = useCallback2(
+    async (e) => {
+      if (e && e.preventDefault) e.preventDefault();
+      if (validateOnSubmit) {
+        const allVisible = fields.filter((f) => !f.visible || f.visible(formValues));
+        const { errors, hasErrors } = validateVisibleFields(allVisible);
+        if (hasErrors) {
+          setInternalErrors(errors);
+          if (onValidationChange) onValidationChange(errors);
+          return;
+        }
+        if (asyncValidationRef.current.size > 0) {
+          await Promise.all(asyncValidationRef.current.values());
+          const currentErrors = { ...internalErrors };
+          const hasAsyncErrors = Object.keys(currentErrors).length > 0;
+          if (hasAsyncErrors) return;
+        }
+      }
+      const reset = () => {
+        const fresh = computeInitialValues();
+        if (values == null) setInternalValues(fresh);
+        setInternalErrors({});
+        setTouchedFields({});
+        initialSnapshot.current = JSON.stringify(fresh);
+      };
+      const rawValues = {};
+      for (const key of Object.keys(formValues)) {
+        const f = fields.find((fd) => fd.name === key);
+        if (f && (f.type === "display" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList")) continue;
+        rawValues[key] = formValues[key];
+      }
+      const submitValues = transformValues ? transformValues(rawValues) : rawValues;
+      if (onBeforeSubmit) {
+        const proceed = await onBeforeSubmit(submitValues);
+        if (proceed === false) return;
+      }
+      if (controlledLoading == null) setInternalLoading(true);
+      try {
+        const result = await onSubmit(submitValues, { reset, rawValues });
+        if (resetOnSuccess) reset();
+        if (onSubmitSuccess) onSubmitSuccess(result, { reset, values: submitValues });
+      } catch (err) {
+        if (onSubmitError) {
+          onSubmitError(err, { values: submitValues });
+        } else {
+          throw err;
+        }
+      } finally {
+        if (controlledLoading == null) setInternalLoading(false);
+      }
+    },
+    [validateOnSubmit, fields, formValues, validateVisibleFields, onValidationChange, onSubmit, values, controlledLoading, internalErrors, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess]
+  );
+  const handleNext = useCallback2(() => {
+    if (!isMultiStep) return;
+    if (validateStepOnNext && steps[currentStep] && steps[currentStep].fields) {
+      const stepFields = fields.filter(
+        (f) => steps[currentStep].fields.includes(f.name) && (!f.visible || f.visible(formValues))
+      );
+      const { errors, hasErrors } = validateVisibleFields(stepFields);
+      if (hasErrors) {
+        setInternalErrors((prev) => ({ ...prev, ...errors }));
+        if (onValidationChange) onValidationChange({ ...internalErrors, ...errors });
+        return;
+      }
+    }
+    if (steps[currentStep] && steps[currentStep].validate) {
+      const result = steps[currentStep].validate(formValues);
+      if (result !== true && result) {
+        setInternalErrors((prev) => ({ ...prev, ...result }));
+        return;
+      }
+    }
+    const nextStep = Math.min(currentStep + 1, steps.length - 1);
+    if (controlledStep != null) {
+      if (onStepChange) onStepChange(nextStep);
+    } else {
+      setInternalStep(nextStep);
+    }
+  }, [isMultiStep, validateStepOnNext, steps, currentStep, fields, formValues, validateVisibleFields, onValidationChange, internalErrors, controlledStep, onStepChange]);
+  const handleBack = useCallback2(() => {
+    if (!isMultiStep) return;
+    const prevStep = Math.max(currentStep - 1, 0);
+    if (controlledStep != null) {
+      if (onStepChange) onStepChange(prevStep);
+    } else {
+      setInternalStep(prevStep);
+    }
+  }, [isMultiStep, currentStep, controlledStep, onStepChange]);
+  const handleGoTo = useCallback2(
+    (stepIndex) => {
+      if (!isMultiStep) return;
+      const clamped = Math.max(0, Math.min(stepIndex, steps.length - 1));
+      if (controlledStep != null) {
+        if (onStepChange) onStepChange(clamped);
+      } else {
+        setInternalStep(clamped);
+      }
+    },
+    [isMultiStep, steps, controlledStep, onStepChange]
+  );
+  useImperativeHandle(ref, () => ({
+    submit: handleSubmit,
+    validate: () => {
+      const allVisible = fields.filter((f) => !f.visible || f.visible(formValues));
+      const { errors, hasErrors } = validateVisibleFields(allVisible);
+      setInternalErrors(errors);
+      return { valid: !hasErrors, errors };
+    },
+    reset: () => {
+      const fresh = computeInitialValues();
+      if (values == null) setInternalValues(fresh);
+      setInternalErrors({});
+      setTouchedFields({});
+      initialSnapshot.current = JSON.stringify(fresh);
+    },
+    getValues: () => formValues,
+    isDirty: () => isDirty,
+    setFieldValue: (name, value) => handleFieldChange(name, value),
+    setFieldError: (name, message) => updateErrors({ [name]: message }),
+    setErrors: (errors) => {
+      setInternalErrors(errors);
+      if (onValidationChange) onValidationChange(errors);
+    }
+  }));
+  const renderField = (field) => {
+    const fieldValue = formValues[field.name];
+    const fieldError = internalErrors[field.name] || null;
+    const hasError = !!fieldError;
+    const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
+    const isReadOnly = field.readOnly || disabled || formReadOnly;
+    const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
+    if (field.type === "display") {
+      if (field.render) {
+        return field.render({ allValues: formValues });
+      }
+      return null;
+    }
+    if (field.type === "crmPropertyList") {
+      return /* @__PURE__ */ React2.createElement(
+        CrmPropertyList,
+        {
+          properties: field.properties,
+          direction: field.direction,
+          ...field.objectId ? { objectId: field.objectId } : {},
+          ...field.objectTypeId ? { objectTypeId: field.objectTypeId } : {},
+          ...field.fieldProps || {}
+        }
+      );
+    }
+    if (field.type === "crmAssociationPropertyList") {
+      return /* @__PURE__ */ React2.createElement(
+        CrmAssociationPropertyList,
+        {
+          objectTypeId: field.objectTypeId,
+          properties: field.properties,
+          ...field.associationLabels ? { associationLabels: field.associationLabels } : {},
+          ...field.filters ? { filters: field.filters } : {},
+          ...field.sort ? { sort: field.sort } : {},
+          ...field.fieldProps || {}
+        }
+      );
+    }
+    if (field.render) {
+      return field.render({
+        value: fieldValue,
+        onChange: fieldOnChange,
+        error: hasError,
+        allValues: formValues
+      });
+    }
+    const plugin = fieldTypes && fieldTypes[field.type];
+    if (plugin && plugin.render) {
+      return plugin.render({
+        value: fieldValue,
+        onChange: fieldOnChange,
+        error: hasError,
+        field,
+        allValues: formValues
+      });
+    }
+    const commonProps = {
+      name: field.name,
+      label: field.label,
+      description: field.description,
+      placeholder: field.placeholder,
+      tooltip: field.tooltip,
+      required: isRequired,
+      readOnly: isReadOnly,
+      error: hasError,
+      validationMessage: fieldError || void 0,
+      ...field.loading || validatingFields[field.name] ? { loading: true } : {},
+      ...field.fieldProps || {}
+    };
+    const options = resolveOptions(field, formValues);
+    switch (field.type) {
+      case "text":
+      case "password":
+        return /* @__PURE__ */ React2.createElement(
+          Input2,
+          {
+            ...commonProps,
+            type: field.type === "password" ? "password" : "text",
+            value: fieldValue || "",
+            onChange: fieldOnChange,
+            onInput: (v) => handleFieldInput(field.name, v),
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+      case "textarea":
+        return /* @__PURE__ */ React2.createElement(
+          TextArea2,
+          {
+            ...commonProps,
+            value: fieldValue || "",
+            rows: field.rows,
+            cols: field.cols,
+            resize: field.resize,
+            maxLength: field.maxLength,
+            onChange: fieldOnChange,
+            onInput: (v) => handleFieldInput(field.name, v),
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+      case "number":
+        return /* @__PURE__ */ React2.createElement(
+          NumberInput2,
+          {
+            ...commonProps,
+            value: fieldValue,
+            min: field.min,
+            max: field.max,
+            precision: field.precision,
+            formatStyle: field.formatStyle,
+            onChange: fieldOnChange,
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+      case "stepper":
+        return /* @__PURE__ */ React2.createElement(
+          StepperInput2,
+          {
+            ...commonProps,
+            value: fieldValue,
+            min: field.min,
+            max: field.max,
+            precision: field.precision,
+            formatStyle: field.formatStyle,
+            stepSize: field.stepSize,
+            minValueReachedTooltip: field.minValueReachedTooltip,
+            maxValueReachedTooltip: field.maxValueReachedTooltip,
+            onChange: fieldOnChange,
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+      case "currency":
+        return /* @__PURE__ */ React2.createElement(
+          CurrencyInput2,
+          {
+            ...commonProps,
+            currency: field.currency || "USD",
+            value: fieldValue,
+            min: field.min,
+            max: field.max,
+            precision: field.precision,
+            onChange: fieldOnChange,
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+      case "date":
+        return /* @__PURE__ */ React2.createElement(
+          DateInput2,
+          {
+            ...commonProps,
+            value: fieldValue,
+            format: field.format,
+            min: field.min,
+            max: field.max,
+            timezone: field.timezone,
+            clearButtonLabel: field.clearButtonLabel,
+            todayButtonLabel: field.todayButtonLabel,
+            minValidationMessage: field.minValidationMessage,
+            maxValidationMessage: field.maxValidationMessage,
+            onChange: fieldOnChange,
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+      case "time":
+        return /* @__PURE__ */ React2.createElement(
+          TimeInput2,
+          {
+            ...commonProps,
+            value: fieldValue,
+            interval: field.interval,
+            min: field.min,
+            max: field.max,
+            timezone: field.timezone,
+            onChange: fieldOnChange,
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+      case "datetime": {
+        const dateVal = fieldValue ? fieldValue.date || fieldValue : void 0;
+        const timeVal = fieldValue ? fieldValue.time || void 0 : void 0;
+        return /* @__PURE__ */ React2.createElement(Flex2, { direction: "row", gap: "sm" }, /* @__PURE__ */ React2.createElement(Box2, { flex: 1 }, /* @__PURE__ */ React2.createElement(
+          DateInput2,
+          {
+            ...commonProps,
+            name: `${field.name}-date`,
+            label: field.label,
+            format: field.format,
+            value: dateVal,
+            min: field.min,
+            max: field.max,
+            timezone: field.timezone,
+            clearButtonLabel: field.clearButtonLabel,
+            todayButtonLabel: field.todayButtonLabel,
+            minValidationMessage: field.minValidationMessage,
+            maxValidationMessage: field.maxValidationMessage,
+            onChange: (v) => {
+              handleFieldChange(field.name, { ...fieldValue, date: v, time: timeVal });
+            }
+          }
+        )), /* @__PURE__ */ React2.createElement(Box2, { flex: 1 }, /* @__PURE__ */ React2.createElement(
+          TimeInput2,
+          {
+            name: `${field.name}-time`,
+            label: "Time",
+            description: field.description,
+            tooltip: field.tooltip,
+            readOnly: isReadOnly,
+            error: hasError,
+            value: timeVal,
+            interval: field.interval,
+            timezone: field.timezone,
+            onChange: (v) => {
+              handleFieldChange(field.name, { ...fieldValue, date: dateVal, time: v });
+            }
+          }
+        )));
+      }
+      case "select":
+        return /* @__PURE__ */ React2.createElement(
+          Select2,
+          {
+            ...commonProps,
+            value: fieldValue,
+            options,
+            variant: field.variant,
+            onChange: fieldOnChange
+          }
+        );
+      case "multiselect":
+        return /* @__PURE__ */ React2.createElement(
+          MultiSelect2,
+          {
+            ...commonProps,
+            value: fieldValue || [],
+            options,
+            onChange: fieldOnChange
+          }
+        );
+      case "toggle":
+        return /* @__PURE__ */ React2.createElement(
+          Toggle2,
+          {
+            name: field.name,
+            label: field.label,
+            checked: !!fieldValue,
+            size: field.size || "md",
+            labelDisplay: field.labelDisplay || "top",
+            textChecked: field.textChecked,
+            textUnchecked: field.textUnchecked,
+            readonly: isReadOnly,
+            onChange: fieldOnChange,
+            ...field.fieldProps || {}
+          }
+        );
+      case "checkbox":
+        return /* @__PURE__ */ React2.createElement(
+          Checkbox2,
+          {
+            name: field.name,
+            checked: !!fieldValue,
+            description: field.description,
+            readOnly: isReadOnly,
+            inline: field.inline,
+            variant: field.variant,
+            onChange: fieldOnChange,
+            ...field.fieldProps || {}
+          },
+          field.label
+        );
+      case "checkboxGroup":
+        return /* @__PURE__ */ React2.createElement(
+          ToggleGroup,
+          {
+            ...commonProps,
+            toggleType: "checkboxList",
+            value: fieldValue || [],
+            options,
+            inline: field.inline,
+            variant: field.variant,
+            onChange: fieldOnChange
+          }
+        );
+      case "radioGroup":
+        return /* @__PURE__ */ React2.createElement(
+          ToggleGroup,
+          {
+            ...commonProps,
+            toggleType: "radioButtonList",
+            value: fieldValue,
+            options,
+            inline: field.inline,
+            variant: field.variant,
+            onChange: fieldOnChange
+          }
+        );
+      case "repeater": {
+        const rows = Array.isArray(fieldValue) ? fieldValue : [];
+        const subFields = field.fields || [];
+        const minRows = field.min || 0;
+        const maxRows = field.max || Infinity;
+        const canAdd = rows.length < maxRows && !isReadOnly;
+        const canRemove = rows.length > minRows && !isReadOnly;
+        const addRow = () => {
+          const emptyRow = {};
+          for (const sf of subFields) {
+            emptyRow[sf.name] = sf.defaultValue !== void 0 ? sf.defaultValue : getEmptyValue(sf);
+          }
+          handleFieldChange(field.name, [...rows, emptyRow]);
+        };
+        const removeRow = (idx) => {
+          handleFieldChange(field.name, rows.filter((_, i) => i !== idx));
+        };
+        const updateRow = (idx, subName, subValue) => {
+          const updated = rows.map(
+            (row, i) => i === idx ? { ...row, [subName]: subValue } : row
+          );
+          handleFieldChange(field.name, updated);
+        };
+        return /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap: "xs" }, field.label && /* @__PURE__ */ React2.createElement(Text2, { format: { fontWeight: "demibold" } }, field.label, isRequired ? " *" : ""), field.description && /* @__PURE__ */ React2.createElement(Text2, { variant: "microcopy" }, field.description), rows.map((row, rowIdx) => /* @__PURE__ */ React2.createElement(Flex2, { key: rowIdx, direction: "row", gap: "xs", align: "end" }, subFields.map((sf) => {
+          const sfValue = row[sf.name];
+          const sfLabel = rowIdx === 0 ? sf.label : void 0;
+          const sfOptions = resolveOptions(sf, formValues);
+          const sfProps = {
+            name: `${field.name}-${rowIdx}-${sf.name}`,
+            label: sfLabel,
+            placeholder: sf.placeholder,
+            readOnly: isReadOnly,
+            ...sf.fieldProps || {}
+          };
+          let sfElement;
+          switch (sf.type) {
+            case "select":
+              sfElement = /* @__PURE__ */ React2.createElement(Select2, { ...sfProps, value: sfValue, options: sfOptions, onChange: (v) => updateRow(rowIdx, sf.name, v) });
+              break;
+            case "number":
+              sfElement = /* @__PURE__ */ React2.createElement(NumberInput2, { ...sfProps, value: sfValue, onChange: (v) => updateRow(rowIdx, sf.name, v) });
+              break;
+            case "checkbox":
+              sfElement = /* @__PURE__ */ React2.createElement(Checkbox2, { ...sfProps, checked: !!sfValue, onChange: (v) => updateRow(rowIdx, sf.name, v) }, sf.label);
+              break;
+            default:
+              sfElement = /* @__PURE__ */ React2.createElement(Input2, { ...sfProps, value: sfValue || "", onChange: (v) => updateRow(rowIdx, sf.name, v) });
+          }
+          return /* @__PURE__ */ React2.createElement(Box2, { key: sf.name, flex: 1 }, sfElement);
+        }), canRemove && /* @__PURE__ */ React2.createElement(
+          Button2,
+          {
+            variant: "secondary",
+            size: "xs",
+            onClick: () => removeRow(rowIdx)
+          },
+          "Remove"
+        ))), canAdd && /* @__PURE__ */ React2.createElement(Button2, { variant: "secondary", size: "sm", onClick: addRow }, "+ Add"), hasError && /* @__PURE__ */ React2.createElement(Text2, { variant: "microcopy" }, fieldError));
+      }
+      default:
+        return /* @__PURE__ */ React2.createElement(
+          Input2,
+          {
+            ...commonProps,
+            value: fieldValue || "",
+            onChange: fieldOnChange,
+            onInput: (v) => handleFieldInput(field.name, v),
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+    }
+  };
+  const getFieldColSpan = (field) => {
+    if (field.colSpan != null) return Math.min(field.colSpan, columns);
+    if (field.width === "full" && columns > 1) return columns;
+    return 1;
+  };
+  const getDependents = (parentField) => visibleFields.filter((f) => f.dependsOn === parentField.name && f.name !== parentField.name);
+  const isDependent = (field) => field.dependsOn && visibleFields.some((f) => f.name === field.dependsOn && f.name !== field.name);
+  const renderDependentGroup = (parentField, dependents) => {
+    const firstWithLabel = dependents.find((f) => f.dependsOnLabel) || dependents[0];
+    const firstWithMessage = dependents.find((f) => f.dependsOnMessage) || dependents[0];
+    const groupLabel = firstWithLabel.dependsOnLabel || "Dependent properties";
+    const rawMessage = firstWithMessage.dependsOnMessage;
+    const tooltipMessage = typeof rawMessage === "function" ? rawMessage(parentField.label) : rawMessage || "";
+    return /* @__PURE__ */ React2.createElement(Tile, { key: `dep-${parentField.name}`, compact: true }, /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap }, /* @__PURE__ */ React2.createElement(Flex2, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React2.createElement(Text2, { format: { fontWeight: "demibold" } }, groupLabel, " ", tooltipMessage && /* @__PURE__ */ React2.createElement(Link2, { inline: true, variant: "dark", overlay: /* @__PURE__ */ React2.createElement(Tooltip, null, tooltipMessage) }, /* @__PURE__ */ React2.createElement(Icon2, { name: "info" })))), dependents.map((dep) => /* @__PURE__ */ React2.createElement(React2.Fragment, { key: dep.name }, renderField(dep)))));
+  };
+  const renderGridLayout = (fieldSubset) => {
+    const fieldList = fieldSubset || visibleFields;
+    const elements = [];
+    let currentRow = [];
+    let currentRowSpan = 0;
+    const flushRow = () => {
+      if (currentRow.length === 0) return;
+      const totalSpan = currentRow.reduce((s, f) => s + getFieldColSpan(f), 0);
+      const remainder = columns - totalSpan;
+      elements.push(
+        /* @__PURE__ */ React2.createElement(Flex2, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ React2.createElement(Box2, { key: f.name, flex: getFieldColSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ React2.createElement(Box2, { flex: remainder }))
+      );
+      currentRow = [];
+      currentRowSpan = 0;
+    };
+    for (const field of fieldList) {
+      if (isDependent(field)) continue;
+      const span = getFieldColSpan(field);
+      if (span >= columns) {
+        flushRow();
+        elements.push(
+          /* @__PURE__ */ React2.createElement(React2.Fragment, { key: field.name }, renderField(field))
+        );
+      } else {
+        if (currentRowSpan + span > columns) flushRow();
+        currentRow.push(field);
+        currentRowSpan += span;
+        if (currentRowSpan >= columns) flushRow();
+      }
+      const dependents = getDependents(field);
+      if (dependents.length > 0) {
+        flushRow();
+        elements.push(renderDependentGroup(field, dependents));
+      }
+    }
+    flushRow();
+    return elements;
+  };
+  const renderExplicitLayout = () => {
+    const elements = [];
+    const renderedNames = /* @__PURE__ */ new Set();
+    for (let rowIdx = 0; rowIdx < layout.length; rowIdx++) {
+      const row = layout[rowIdx];
+      const rowFields = [];
+      for (const entry of row) {
+        const fieldName = typeof entry === "string" ? entry : entry.field;
+        const flexValue = typeof entry === "string" ? 1 : entry.flex || 1;
+        const field = visibleFields.find((f) => f.name === fieldName);
+        if (!field) continue;
+        rowFields.push({ field, flex: flexValue });
+        renderedNames.add(fieldName);
+      }
+      if (rowFields.length === 0) continue;
+      if (rowFields.length === 1) {
+        elements.push(
+          /* @__PURE__ */ React2.createElement(React2.Fragment, { key: rowFields[0].field.name }, renderField(rowFields[0].field))
+        );
+      } else {
+        elements.push(
+          /* @__PURE__ */ React2.createElement(Flex2, { key: `layout-row-${rowIdx}`, direction: "row", gap }, rowFields.map(({ field, flex }) => /* @__PURE__ */ React2.createElement(Box2, { key: field.name, flex }, renderField(field))))
+        );
+      }
+      for (const { field } of rowFields) {
+        const dependents = getDependents(field).filter((d) => !renderedNames.has(d.name));
+        if (dependents.length > 0) {
+          elements.push(renderDependentGroup(field, dependents));
+          for (const dep of dependents) renderedNames.add(dep.name);
+        }
+      }
+    }
+    for (const field of visibleFields) {
+      if (renderedNames.has(field.name)) continue;
+      if (isDependent(field)) continue;
+      elements.push(
+        /* @__PURE__ */ React2.createElement(React2.Fragment, { key: field.name }, renderField(field))
+      );
+      renderedNames.add(field.name);
+      const dependents = getDependents(field).filter((d) => !renderedNames.has(d.name));
+      if (dependents.length > 0) {
+        elements.push(renderDependentGroup(field, dependents));
+        for (const dep of dependents) renderedNames.add(dep.name);
+      }
+    }
+    return elements;
+  };
+  const renderLegacyLayout = (fieldSubset) => {
+    const fieldList = fieldSubset || visibleFields;
+    const rows = [];
+    let i = 0;
+    while (i < fieldList.length) {
+      const field = fieldList[i];
+      if (field.width === "half" && i + 1 < fieldList.length && fieldList[i + 1].width === "half" && !field.dependsOn) {
+        rows.push({ type: "pair", fields: [fieldList[i], fieldList[i + 1]] });
+        i += 2;
+      } else {
+        rows.push({ type: "single", field });
+        i++;
+      }
+    }
+    const elements = [];
+    const processedDeps = /* @__PURE__ */ new Set();
+    for (const row of rows) {
+      if (row.type === "pair") {
+        elements.push(
+          /* @__PURE__ */ React2.createElement(Flex2, { key: `pair-${row.fields[0].name}`, direction: "row", gap: "sm" }, /* @__PURE__ */ React2.createElement(Box2, { flex: 1 }, renderField(row.fields[0])), /* @__PURE__ */ React2.createElement(Box2, { flex: 1 }, renderField(row.fields[1])))
+        );
+      } else {
+        const field = row.field;
+        if (processedDeps.has(field.name)) continue;
+        elements.push(
+          /* @__PURE__ */ React2.createElement(React2.Fragment, { key: field.name }, renderField(field))
+        );
+        const dependents = getDependents(field);
+        if (dependents.length > 0) {
+          for (const dep of dependents) processedDeps.add(dep.name);
+          elements.push(renderDependentGroup(field, dependents));
+        }
+      }
+    }
+    return elements;
+  };
+  const renderAutoGridLayout = (fieldSubset) => {
+    const fieldList = fieldSubset || visibleFields;
+    const elements = [];
+    let batch = [];
+    const flushBatch = () => {
+      if (batch.length === 0) return;
+      elements.push(
+        /* @__PURE__ */ React2.createElement(AutoGrid, { key: `ag-${batch[0].name}`, columnWidth, flexible: true, gap }, batch.map((f) => /* @__PURE__ */ React2.createElement(React2.Fragment, { key: f.name }, renderField(f))))
+      );
+      batch = [];
+    };
+    for (const field of fieldList) {
+      if (isDependent(field)) continue;
+      batch.push(field);
+      const dependents = getDependents(field);
+      if (dependents.length > 0) {
+        flushBatch();
+        elements.push(renderDependentGroup(field, dependents));
+      }
+    }
+    flushBatch();
+    return elements;
+  };
+  const wrapWithGroups = (fieldList, renderFn) => {
+    const hasGroups = fieldList.some((f) => f.group);
+    if (!hasGroups) return renderFn(fieldList);
+    const chunks = [];
+    let currentGroup = void 0;
+    let currentChunk = [];
+    for (const field of fieldList) {
+      const fieldGroup = field.group || void 0;
+      if (fieldGroup !== currentGroup && currentChunk.length > 0) {
+        chunks.push({ group: currentGroup, fields: [...currentChunk] });
+        currentChunk = [];
+      }
+      currentGroup = fieldGroup;
+      currentChunk.push(field);
+    }
+    if (currentChunk.length > 0) {
+      chunks.push({ group: currentGroup, fields: currentChunk });
+    }
+    const elements = [];
+    for (let i = 0; i < chunks.length; i++) {
+      const chunk = chunks[i];
+      if (i > 0) {
+        elements.push(/* @__PURE__ */ React2.createElement(Divider, { key: `group-div-${i}` }));
+      }
+      if (chunk.group) {
+        elements.push(
+          /* @__PURE__ */ React2.createElement(Text2, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, chunk.group)
+        );
+      }
+      const chunkElements = renderFn(chunk.fields);
+      if (Array.isArray(chunkElements)) {
+        elements.push(...chunkElements);
+      } else {
+        elements.push(chunkElements);
+      }
+    }
+    return elements;
+  };
+  const renderFieldSubset = (fieldSubset) => {
+    if (layout && fieldSubset === visibleFields) return renderExplicitLayout();
+    if (columnWidth) return renderAutoGridLayout(fieldSubset);
+    if (columns > 1) return renderGridLayout(fieldSubset);
+    return renderLegacyLayout(fieldSubset);
+  };
+  const renderSections = () => {
+    const hasSections = Array.isArray(sections) && sections.length > 0;
+    if (!hasSections) return null;
+    const sectionFieldNames = /* @__PURE__ */ new Set();
+    for (const sec of sections) {
+      if (sec.fields) for (const name of sec.fields) sectionFieldNames.add(name);
+    }
+    const elements = [];
+    for (const sec of sections) {
+      const sectionFields = sec.fields ? visibleFields.filter((f) => sec.fields.includes(f.name)) : [];
+      if (sectionFields.length === 0) continue;
+      const accordionContent = /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap }, renderFieldSubset(sectionFields));
+      const accordion = /* @__PURE__ */ React2.createElement(
+        Accordion,
+        {
+          key: sec.id,
+          title: sec.label,
+          size: "sm",
+          defaultOpen: sec.defaultOpen !== false
+        },
+        accordionContent
+      );
+      if (sec.info) {
+        elements.push(
+          /* @__PURE__ */ React2.createElement(Flex2, { key: sec.id, direction: "row", align: "start", gap: "flush" }, /* @__PURE__ */ React2.createElement(Box2, { flex: 1 }, accordion), /* @__PURE__ */ React2.createElement(Link2, { overlay: /* @__PURE__ */ React2.createElement(Tooltip, null, sec.info) }, /* @__PURE__ */ React2.createElement(Icon2, { name: "info", size: "sm", screenReaderText: sec.info })))
+        );
+      } else {
+        elements.push(accordion);
+      }
+    }
+    const unsectionedFields = visibleFields.filter(
+      (f) => !sectionFieldNames.has(f.name)
+    );
+    if (unsectionedFields.length > 0) {
+      elements.push(...renderFieldSubset(unsectionedFields));
+    }
+    return elements;
+  };
+  const renderFieldLayout = () => {
+    const hasSections = Array.isArray(sections) && sections.length > 0;
+    if (hasSections) return renderSections();
+    const hasGroups = visibleFields.some((f) => f.group);
+    if (hasGroups && !layout) {
+      return wrapWithGroups(visibleFields, renderFieldSubset);
+    }
+    if (layout) return renderExplicitLayout();
+    return renderFieldSubset(visibleFields);
+  };
+  const renderButtons = () => {
+    if (submitPosition === "none" || formReadOnly) return null;
+    const isLastStep = !isMultiStep || currentStep === steps.length - 1;
+    const isFirstStep = !isMultiStep || currentStep === 0;
+    if (isMultiStep) {
+      return /* @__PURE__ */ React2.createElement(Flex2, { direction: "row", justify: "between", align: "center" }, !isFirstStep ? /* @__PURE__ */ React2.createElement(Button2, { variant: "secondary", onClick: handleBack, disabled }, "Back") : showCancel ? /* @__PURE__ */ React2.createElement(Button2, { variant: "secondary", onClick: onCancel, disabled }, cancelLabel) : /* @__PURE__ */ React2.createElement(Text2, null, " "), /* @__PURE__ */ React2.createElement(Inline, { gap: "small" }, /* @__PURE__ */ React2.createElement(Text2, { variant: "microcopy" }, "Step ", currentStep + 1, " of ", steps.length), isLastStep ? /* @__PURE__ */ React2.createElement(
+        LoadingButton,
+        {
+          variant: submitVariant,
+          loading: isLoading,
+          onClick: handleSubmit,
+          disabled
+        },
+        submitLabel
+      ) : /* @__PURE__ */ React2.createElement(Button2, { variant: "primary", onClick: handleNext, disabled }, "Next")));
+    }
+    return /* @__PURE__ */ React2.createElement(Flex2, { direction: "row", justify: showCancel ? "between" : "start", gap: "sm" }, showCancel && /* @__PURE__ */ React2.createElement(Button2, { variant: "secondary", onClick: onCancel, disabled }, cancelLabel), /* @__PURE__ */ React2.createElement(
+      LoadingButton,
+      {
+        variant: submitVariant,
+        type: noFormWrapper ? "button" : "submit",
+        loading: isLoading,
+        onClick: noFormWrapper ? handleSubmit : void 0,
+        disabled
+      },
+      submitLabel
+    ));
+  };
+  const formContent = /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap }, isMultiStep && showStepIndicator && /* @__PURE__ */ React2.createElement(
+    StepIndicator,
+    {
+      currentStep,
+      stepNames: steps.map((s) => s.title)
+    }
+  ), formReadOnly && readOnlyMessage && /* @__PURE__ */ React2.createElement(Alert, { title: "Read Only", variant: "warning" }, readOnlyMessage), formError && /* @__PURE__ */ React2.createElement(Alert, { title: "Error", variant: "danger" }, typeof formError === "string" ? formError : void 0), formSuccess && /* @__PURE__ */ React2.createElement(Alert, { title: "Success", variant: "success" }, formSuccess), isMultiStep && steps[currentStep] && steps[currentStep].render ? steps[currentStep].render({
+    values: formValues,
+    goNext: handleNext,
+    goBack: handleBack,
+    goTo: handleGoTo
+  }) : (
+    /* Field layout */
+    renderFieldLayout()
+  ), renderButtons());
+  if (noFormWrapper) {
+    return formContent;
+  }
+  return /* @__PURE__ */ React2.createElement(Form, { onSubmit: handleSubmit, autoComplete: props.autoComplete }, formContent);
+});
+export {
+  DataTable,
+  FormBuilder,
+  useFormPrefill
+};