@sustaina/shared-ui 1.40.4 → 1.42.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import * as React25 from 'react';
-import React25__default, { forwardRef, useRef, useMemo, useCallback, useState, isValidElement, useEffect, useLayoutEffect, createElement } from 'react';
+import * as React27 from 'react';
+import React27__default, { forwardRef, useRef, useMemo, useCallback, useState, isValidElement, useEffect, useLayoutEffect, createElement } from 'react';
 import { useRouter } from '@tanstack/react-router';
 import { create } from 'zustand';
 import clsx2, { clsx } from 'clsx';
@@ -18,6 +18,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { reSplitAlphaNumeric, useReactTable, getCoreRowModel, getGroupedRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, flexRender } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { initReactI18next, useTranslation, I18nextProvider } from 'react-i18next';
 import i18n from 'i18next';
@@ -60,7 +61,6 @@ import { z } from 'zod';
 import Cropper from 'react-easy-crop';
 import { NumericFormat } from 'react-number-format';
 import { Command as Command$1 } from 'cmdk';
-import { useVirtualizer } from '@tanstack/react-virtual';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -2542,7 +2542,7 @@ var OPERATOR_LABEL = {
   containsAll: "Contains all of"
 };
 var OperatorSelect = ({ row, operators, onChangeOperator, error }) => {
-  React25__default.useEffect(() => {
+  React27__default.useEffect(() => {
     if (!operators.length) return;
     if (!operators.includes(row.operator)) {
       onChangeOperator(operators[0]);
@@ -2578,15 +2578,15 @@ function Label2({ className, ...props }) {
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React25.createContext({});
+var FormFieldContext = React27.createContext({});
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React25.useContext(FormFieldContext);
-  const itemContext = React25.useContext(FormItemContext);
+  const fieldContext = React27.useContext(FormFieldContext);
+  const itemContext = React27.useContext(FormItemContext);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -2603,9 +2603,9 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React25.createContext({});
+var FormItemContext = React27.createContext({});
 function FormItem({ className, ...props }) {
-  const id = React25.useId();
+  const id = React27.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
 }
 function FormLabel({ className, ...props }) {
@@ -2709,7 +2709,7 @@ var Spinner = ({ className, variant, size = "default", ...props }) => /* @__PURE
     ]
   }
 );
-var InputPrimitive = React25.forwardRef(
+var InputPrimitive = React27.forwardRef(
   ({ className, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -2748,7 +2748,7 @@ var inputVariants = cva("", {
     appearance: "filled"
   }
 });
-var Input = React25.forwardRef(
+var Input = React27.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -2781,8 +2781,8 @@ var Input = React25.forwardRef(
       onChange: onChangeProp
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React25.useId();
-    const handleChange = React25.useCallback(
+    const messageId = React27.useId();
+    const handleChange = React27.useCallback(
       (event) => {
         onChangeProp?.(event);
         onValueChange?.(event.target.value);
@@ -3170,20 +3170,20 @@ function DatePicker({
   className,
   ...props
 }) {
-  const today = React25.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const [displayed, setDisplayed] = React25.useState(
+  const today = React27.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [displayed, setDisplayed] = React27.useState(
     selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date()
   );
   minDate = clampToDay(minDate);
   maxDate = clampToDay(maxDate);
-  const disabledSet = React25.useMemo(() => {
+  const disabledSet = React27.useMemo(() => {
     const s = /* @__PURE__ */ new Set();
     disabledDates?.forEach((d) => s.add(startOfDay(d).toISOString()));
     return s;
   }, [disabledDates]);
   const displayYear = displayed.getFullYear();
   const displayMonth = displayed.getMonth();
-  const weekdays = React25.useMemo(() => {
+  const weekdays = React27.useMemo(() => {
     const labels = [];
     for (let i = 0; i < 7; i++) {
       const idx = i;
@@ -3192,7 +3192,7 @@ function DatePicker({
     }
     return labels;
   }, [callbacks]);
-  const grid = React25.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
+  const grid = React27.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
   const isDateDisabled = (date) => {
     const d = startOfDay(date);
     if (minDate && d < minDate) return true;
@@ -3202,7 +3202,7 @@ function DatePicker({
   };
   const minYear = minDate?.getFullYear();
   const maxYear = maxDate?.getFullYear();
-  const getMonthLabel = React25.useCallback(
+  const getMonthLabel = React27.useCallback(
     (year, monthIndex) => {
       const label = callbacks?.monthLabel?.(year, monthIndex);
       if (label === null || label === void 0) {
@@ -3212,7 +3212,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const getYearLabel = React25.useCallback(
+  const getYearLabel = React27.useCallback(
     (year) => {
       const label = callbacks?.yearLabel?.(year);
       if (label === null || label === void 0) return String(year);
@@ -3220,7 +3220,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const clampMonthToBounds = React25.useCallback(
+  const clampMonthToBounds = React27.useCallback(
     (year, monthIndex) => {
       let output = monthIndex;
       if (typeof minYear === "number" && year === minYear && minDate) {
@@ -3235,7 +3235,7 @@ function DatePicker({
     },
     [maxDate, minDate, maxYear, minYear]
   );
-  const yearOptions = React25.useMemo(() => {
+  const yearOptions = React27.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : displayYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : displayYear + fallbackWindow;
@@ -3256,7 +3256,7 @@ function DatePicker({
     }
     return years;
   }, [displayYear, maxYear, minYear, selectedDate]);
-  const monthOptions = React25.useMemo(() => {
+  const monthOptions = React27.useMemo(() => {
     const months = Array.from({ length: 12 }, (_, monthIndex) => {
       const disabled = typeof minYear === "number" && displayYear === minYear && minDate && monthIndex < minDate.getMonth() || typeof maxYear === "number" && displayYear === maxYear && maxDate && monthIndex > maxDate.getMonth();
       return {
@@ -3275,7 +3275,7 @@ function DatePicker({
     }
     return months.sort((a, b) => a.value - b.value).filter((option, index, arr) => index === 0 || option.value !== arr[index - 1].value);
   }, [displayMonth, displayYear, getMonthLabel, maxDate, maxYear, minDate, minYear]);
-  const handleMonthSelect = React25.useCallback((nextValue) => {
+  const handleMonthSelect = React27.useCallback((nextValue) => {
     const nextMonth = Number.parseInt(nextValue, 10);
     if (Number.isNaN(nextMonth)) return;
     setDisplayed((prev) => {
@@ -3285,7 +3285,7 @@ function DatePicker({
       return next;
     });
   }, []);
-  const handleYearSelect = React25.useCallback(
+  const handleYearSelect = React27.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -3433,14 +3433,14 @@ var DatePicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React25__default.useState(false);
-  const parser = React25__default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
-  const outputFormatter = React25__default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
-  const labelFormatter = React25__default.useMemo(
+  const [open, setOpen] = React27__default.useState(false);
+  const parser = React27__default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
+  const outputFormatter = React27__default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
+  const labelFormatter = React27__default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter,
     [displayFormatter]
   );
-  const parsedValue = React25__default.useMemo(() => {
+  const parsedValue = React27__default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return value;
     const parsed = parser(value);
@@ -3449,26 +3449,26 @@ var DatePicker2 = ({
   const buttonLabel = parsedValue ? labelFormatter(parsedValue) : placeholder2;
   const buttonAriaLabel = ariaLabel ?? (parsedValue ? `Change date, current selection ${labelFormatter(parsedValue)}` : "Open date picker");
   const shouldShowClear = allowClear && !disabled && !!parsedValue;
-  const handleClose = React25__default.useCallback(() => setOpen(false), []);
-  const emitChange = React25__default.useCallback(
+  const handleClose = React27__default.useCallback(() => setOpen(false), []);
+  const emitChange = React27__default.useCallback(
     (next) => {
       onChange?.(next);
       onValueChange?.(next ? outputFormatter(next) : void 0);
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React25__default.useCallback(
+  const handleSelect = React27__default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React25__default.useCallback(() => {
+  const handleClear = React27__default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React25__default.useCallback(
+  const handleOpenChange = React27__default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -3658,15 +3658,15 @@ function MonthCal({
   onYearBackward,
   onYearForward
 }) {
-  const today = React25.useMemo(() => {
+  const today = React27.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     now.setDate(1);
     now.setHours(0, 0, 0, 0);
     return now;
   }, []);
-  const selectedMonthDate = React25.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
-  const min = React25.useMemo(() => normalizeMonth(minDate), [minDate]);
-  const max = React25.useMemo(() => normalizeMonth(maxDate), [maxDate]);
+  const selectedMonthDate = React27.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
+  const min = React27.useMemo(() => normalizeMonth(minDate), [minDate]);
+  const max = React27.useMemo(() => normalizeMonth(maxDate), [maxDate]);
   let effectiveMin = min;
   if (min && max && min > max) {
     effectiveMin = max;
@@ -3675,10 +3675,10 @@ function MonthCal({
   const minMonth = effectiveMin?.getMonth();
   const maxYear = max?.getFullYear();
   const maxMonth = max?.getMonth();
-  const [menuYear, setMenuYear] = React25.useState(
+  const [menuYear, setMenuYear] = React27.useState(
     () => selectedMonthDate?.getFullYear() ?? today.getFullYear()
   );
-  React25.useEffect(() => {
+  React27.useEffect(() => {
     if (selectedMonthDate) {
       const year = selectedMonthDate.getFullYear();
       if (year !== menuYear) {
@@ -3686,7 +3686,7 @@ function MonthCal({
       }
     }
   }, [selectedMonthDate, menuYear]);
-  React25.useEffect(() => {
+  React27.useEffect(() => {
     if (typeof minYear === "number" && menuYear < minYear) {
       setMenuYear(minYear);
       return;
@@ -3697,7 +3697,7 @@ function MonthCal({
   }, [minYear, maxYear, menuYear]);
   const disablePrevYear = typeof minYear === "number" ? menuYear <= minYear : false;
   const disableNextYear = typeof maxYear === "number" ? menuYear >= maxYear : false;
-  const yearOptions = React25.useMemo(() => {
+  const yearOptions = React27.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : menuYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : menuYear + fallbackWindow;
@@ -3711,7 +3711,7 @@ function MonthCal({
     }
     return years;
   }, [maxYear, menuYear, minYear]);
-  const formatYearLabel = React25.useCallback(
+  const formatYearLabel = React27.useCallback(
     (year) => {
       const raw = callbacks?.yearLabel?.(year);
       if (raw === null || raw === void 0) return String(year);
@@ -3719,7 +3719,7 @@ function MonthCal({
     },
     [callbacks]
   );
-  const handleYearSelect = React25.useCallback(
+  const handleYearSelect = React27.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -3729,7 +3729,7 @@ function MonthCal({
     },
     [maxYear, minYear]
   );
-  const disabledPairs = React25.useMemo(() => {
+  const disabledPairs = React27.useMemo(() => {
     if (!disabledDates?.length) return [];
     const pairs = [];
     disabledDates.forEach((date) => {
@@ -3874,14 +3874,14 @@ var MonthPicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React25__default.useState(false);
-  const parser = React25__default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
-  const outputFormatter = React25__default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
-  const labelFormatter = React25__default.useMemo(
+  const [open, setOpen] = React27__default.useState(false);
+  const parser = React27__default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
+  const outputFormatter = React27__default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
+  const labelFormatter = React27__default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter2,
     [displayFormatter]
   );
-  const parsedValue = React25__default.useMemo(() => {
+  const parsedValue = React27__default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return normalizeMonth2(value);
     if (typeof value === "string") {
@@ -3893,8 +3893,8 @@ var MonthPicker2 = ({
   const buttonLabel = parsedValue ? labelFormatter(parsedValue) : placeholder2;
   const buttonAriaLabel = ariaLabel ?? (parsedValue ? `Change month, current selection ${labelFormatter(parsedValue)}` : "Open month picker");
   const shouldShowClear = allowClear && !disabled && !!parsedValue;
-  const handleClose = React25__default.useCallback(() => setOpen(false), []);
-  const emitChange = React25__default.useCallback(
+  const handleClose = React27__default.useCallback(() => setOpen(false), []);
+  const emitChange = React27__default.useCallback(
     (next) => {
       const normalized = next ? normalizeMonth2(next) : void 0;
       onChange?.(normalized);
@@ -3902,18 +3902,18 @@ var MonthPicker2 = ({
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React25__default.useCallback(
+  const handleSelect = React27__default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React25__default.useCallback(() => {
+  const handleClear = React27__default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React25__default.useCallback(
+  const handleOpenChange = React27__default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -5189,7 +5189,7 @@ var AdvanceSearch = ({
     defaultValues: {}
   });
   const { handleSubmit, unregister, resetField, getValues, clearErrors, setError } = form;
-  const [operatorErrors, setOperatorErrors] = React25__default.useState({});
+  const [operatorErrors, setOperatorErrors] = React27__default.useState({});
   const clearOperatorError = useCallback(
     (rowId) => {
       setOperatorErrors((prev) => {
@@ -5610,14 +5610,14 @@ var useControllableState = ({
   value
 }) => {
   const isControlled = typeof value !== "undefined";
-  const [internalValue, setInternalValue] = React25.useState(() => {
+  const [internalValue, setInternalValue] = React27.useState(() => {
     return isControlled ? value : defaultValue;
   });
-  React25.useEffect(() => {
+  React27.useEffect(() => {
     if (!isControlled) return;
     setInternalValue(value);
   }, [isControlled, value]);
-  const setValue = React25.useCallback(
+  const setValue = React27.useCallback(
     (nextValue) => {
       if (isControlled) return;
       setInternalValue(nextValue);
@@ -5632,6 +5632,16 @@ var useControllableState = ({
 };
 var useControllableState_default = useControllableState;
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var useBindRef = ({ ref, value }) => {
+  React27.useEffect(() => {
+    if (!ref) return;
+    ref.current = value;
+    return () => {
+      ref.current = null;
+    };
+  }, [ref, value]);
+};
+var useBindRef_default = useBindRef;
 var HeaderCell = ({
   rootClassName,
   labelClassName,
@@ -5798,38 +5808,6 @@ function TableCaption({ className, ...props }) {
     }
   );
 }
-var ColumnResizer = ({ header, className, style }) => {
-  if (!header.column.getCanResize()) {
-    return null;
-  }
-  const resizeHandler = header.getResizeHandler();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "z-[2] absolute top-0 right-0 h-full w-1 select-none touch-none cursor-col-resize hover:bg-[#41875c]/45 active:bg-[#41875c]",
-        className
-      ),
-      onDoubleClick: () => header.column.resetSize(),
-      onTouchStart: resizeHandler,
-      onMouseDown: resizeHandler,
-      style
-    }
-  );
-};
-var ColumnResizer_default = ColumnResizer;
-var ColumnSeparator = ({ show, className, ...props }) => {
-  if (!show) return null;
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "data-slot": "table-head-separator",
-      className: cn("absolute right-0 top-1/2 h-4 w-px -translate-y-1/2 bg-gray-300", className),
-      ...props
-    }
-  );
-};
-var ColumnSeparator_default = React25__default.memo(ColumnSeparator);
 var StatusContentSlot = ({
   content,
   icon,
@@ -5848,7 +5826,7 @@ var StatusContentSlot = ({
     content
   ] });
 };
-var StatusContentSlot_default = React25__default.memo(StatusContentSlot);
+var StatusContentSlot_default = React27__default.memo(StatusContentSlot);
 var stateOptions = [
   "columnFilters",
   "globalFilter",
@@ -6014,45 +5992,8 @@ var DataTableDevTool = ({ table }) => {
   ] });
 };
 var DataTableDevTool_default = DataTableDevTool;
-
-// src/components/data-table/helpers.ts
-function getColumnPinningInfo(column) {
-  const isPinned = column.getIsPinned();
-  const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
-  const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
-  return { isPinned, isLastLeftPinnedColumn, isFirstRightPinnedColumn };
-}
-function getColumnPinningStyles(column) {
-  const { isPinned, isFirstRightPinnedColumn, isLastLeftPinnedColumn } = getColumnPinningInfo(column);
-  const classes = cn(
-    isPinned ? "sticky" : "relative",
-    isPinned ? "z-[1]" : "z-0",
-    isLastLeftPinnedColumn && "shadow-[inset_-1px_0_0_0_black]",
-    isFirstRightPinnedColumn && "shadow-[inset_1px_0_0_0_black]"
-  );
-  const style = {
-    left: isPinned === "left" ? column.getStart("left") : void 0,
-    right: isPinned === "right" ? column.getAfter("right") : void 0
-  };
-  return { classes, style };
-}
-function getRowClickHandlers(handler, { rowData, row, table }) {
-  const handleClick = (event) => {
-    if (event.detail === 1) {
-      handler(rowData, { event, row, table, clickType: "single" });
-    }
-    if (event.detail >= 2) {
-      handler(rowData, { event, row, table, clickType: "double" });
-    }
-  };
-  return {
-    onClick: handleClick
-  };
-}
 var fallbackData = [];
-var DataTable = ({
-  tableRef,
-  isInitialLoading,
+var useTableController = ({
   columns,
   data,
   filters,
@@ -6064,14 +6005,8 @@ var DataTable = ({
   columnResizing,
   rowSelection,
   rowExpansion,
-  scrollFetch,
-  activeStatusContent,
-  statusContent,
   rowIdKey,
-  childrenKey,
-  onRowClick,
-  debug,
-  components
+  childrenKey
 }) => {
   const table = useReactTable({
     // required properties
@@ -6124,7 +6059,6 @@ var DataTable = ({
       getSortedRowModel: !sorting?.manual && sorting?.enabled ? getSortedRowModel() : void 0,
       manualSorting: sorting?.enabled && (sorting?.manual ?? false),
       enableSorting: sorting?.enabled ?? false,
-      // default behavior: column with type number is sort by desc and string sort by asc first, we fix force always asc
       sortDescFirst: sorting?.enabled ? sorting?.sortDescFirst ?? false : false,
       onSortingChange: sorting?.enabled ? sorting?.onSortingChange : void 0,
       // ordering
@@ -6139,10 +6073,7 @@ var DataTable = ({
       enableMultiRowSelection: rowSelection?.enabled ? rowSelection?.multiSelect ?? true : true,
       onRowSelectionChange: rowSelection?.enabled ? rowSelection?.onSelectionChange : void 0,
       // row expanded
-      getExpandedRowModel: (
-        // when grouping is use then we should open this
-        !rowExpansion?.manual && rowExpansion?.enabled ? getExpandedRowModel() : void 0
-      ),
+      getExpandedRowModel: !rowExpansion?.manual && rowExpansion?.enabled ? getExpandedRowModel() : void 0,
       manualExpanding: rowExpansion?.enabled && (rowExpansion?.manual ?? false),
       enableExpanding: rowExpansion?.enabled ?? false,
       getIsRowExpanded: rowExpansion?.enabled ? rowExpansion?.isRowExpanded : void 0,
@@ -6160,13 +6091,93 @@ var DataTable = ({
       columnResizeMode: columnResizing?.enabled ? columnResizing?.resizeMode ?? "onChange" : "onChange"
     })
   });
-  const tableContainerRef = useRef(null);
+  return table;
+};
+var useScrollFetch = ({ scrollFetch, containerRef }) => {
+  const fetchMoreOnScrollReached = useCallback(
+    (containerRefElement) => {
+      if (!scrollFetch?.enabled || !containerRefElement || scrollFetch?.isFetchingMore || !scrollFetch?.hasMore || !scrollFetch?.fetchMore) {
+        return;
+      }
+      const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+      const scrollableHeight = scrollHeight - clientHeight;
+      const distanceToBottom = scrollableHeight - scrollTop;
+      const ratioToBottom = scrollableHeight > 0 ? scrollTop / scrollableHeight : 1;
+      const info = {
+        scrollTop,
+        scrollHeight,
+        clientHeight,
+        scrollableHeight,
+        distanceToBottom,
+        ratioToBottom,
+        isTopReached: scrollTop === 0,
+        isBottomReached: distanceToBottom <= 0
+      };
+      let shouldTrigger = false;
+      if (typeof scrollFetch.scrollThreshold === "number") {
+        shouldTrigger = info.ratioToBottom >= scrollFetch.scrollThreshold;
+      } else if (typeof scrollFetch.scrollThreshold === "function") {
+        shouldTrigger = scrollFetch.scrollThreshold(info);
+      } else {
+        shouldTrigger = info.ratioToBottom >= 0.7;
+      }
+      if (shouldTrigger) {
+        scrollFetch.fetchMore();
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [scrollFetch?.enabled, scrollFetch?.isFetchingMore, scrollFetch?.hasMore, scrollFetch?.fetchMore]
+  );
+  useEffect(() => {
+    fetchMoreOnScrollReached(containerRef.current);
+  }, [fetchMoreOnScrollReached, containerRef]);
+  return fetchMoreOnScrollReached;
+};
+var DEFAULT_ROW_HEIGHT = 40;
+var DEFAULT_OVER_SCAN = 10;
+var useTableVirtualizer = ({
+  enabled,
+  table,
+  containerRef,
+  virtual
+}) => {
+  const rowModel = table.getRowModel().rows;
+  const virtualizer = useVirtualizer({
+    count: enabled ? rowModel.length : 0,
+    useFlushSync: false,
+    getScrollElement: () => containerRef.current,
+    estimateSize: () => DEFAULT_ROW_HEIGHT,
+    measureElement: typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1 ? (element) => element?.getBoundingClientRect().height : void 0,
+    overscan: virtual?.overscan ?? DEFAULT_OVER_SCAN
+  });
+  const virtualItems = enabled ? virtualizer.getVirtualItems() : [];
+  const paddingTop = enabled && virtualItems.length > 0 ? virtualItems[0].start : 0;
+  const paddingBottom = enabled && virtualItems.length > 0 ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0;
+  return {
+    virtualizer,
+    virtualItems,
+    paddingTop,
+    paddingBottom,
+    rowModel
+  };
+};
+function useComputedTableState({
+  table,
+  rowModel,
+  isInitialLoading,
+  scrollFetch,
+  activeStatusContent
+}) {
   const isTableEmpty = table.getCoreRowModel().rows.length === 0;
-  const isTableEmptyAfterFiltering = table.getRowModel().rows.length === 0;
+  const isTableEmptyAfterFiltering = rowModel.length === 0;
   const isFiltering = table.getState().columnFilters.length > 0 || !!table.getState().globalFilter;
   const leftVisibleLeftColumns = table.getLeftVisibleLeafColumns();
   const centerVisibleLeafColumns = table.getCenterVisibleLeafColumns();
   const rightVisibleLeafColumns = table.getRightVisibleLeafColumns();
+  const visibleColumnCount = Math.max(
+    leftVisibleLeftColumns.length + centerVisibleLeafColumns.length + rightVisibleLeafColumns.length,
+    1
+  );
   const { isSomeColumnsFilterable, filterableColumns } = useMemo(() => {
     const mergedColumns = [
       ...leftVisibleLeftColumns,
@@ -6203,50 +6214,329 @@ var DataTable = ({
     }
     return activeStatusContent;
   }, [activeStatusContent, autoStatusKey]);
-  const fetchMoreOnScrollReached = useCallback(
-    (containerRefElement) => {
-      if (!scrollFetch?.enabled || !containerRefElement || scrollFetch?.isFetchingMore || !scrollFetch?.hasMore || !scrollFetch?.fetchMore) {
-        return;
-      }
-      const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
-      const scrollableHeight = scrollHeight - clientHeight;
-      const distanceToBottom = scrollableHeight - scrollTop;
-      const ratioToBottom = scrollableHeight > 0 ? scrollTop / scrollableHeight : 1;
-      const info = {
-        scrollTop,
-        scrollHeight,
-        clientHeight,
-        scrollableHeight,
-        distanceToBottom,
-        ratioToBottom,
-        isTopReached: scrollTop === 0,
-        isBottomReached: distanceToBottom <= 0
-      };
-      let shouldTrigger = false;
-      if (typeof scrollFetch.scrollThreshold === "number") {
-        shouldTrigger = info.ratioToBottom >= scrollFetch.scrollThreshold;
-      } else if (typeof scrollFetch.scrollThreshold === "function") {
-        shouldTrigger = scrollFetch.scrollThreshold(info);
-      } else {
-        shouldTrigger = info.ratioToBottom >= 0.7;
+  return {
+    isTableEmpty,
+    isTableEmptyAfterFiltering,
+    isFiltering,
+    leftVisibleLeftColumns,
+    centerVisibleLeafColumns,
+    rightVisibleLeafColumns,
+    visibleColumnCount,
+    isSomeColumnsFilterable,
+    filterableColumns,
+    activeStatusContentComputed
+  };
+}
+var ColumnResizer = ({ header, className, style }) => {
+  if (!header.column.getCanResize()) {
+    return null;
+  }
+  const resizeHandler = header.getResizeHandler();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "z-[2] absolute top-0 right-0 h-full w-1 select-none touch-none cursor-col-resize hover:bg-[#41875c]/45 active:bg-[#41875c]",
+        className
+      ),
+      onDoubleClick: () => header.column.resetSize(),
+      onTouchStart: resizeHandler,
+      onMouseDown: resizeHandler,
+      style
+    }
+  );
+};
+var ColumnResizer_default = ColumnResizer;
+var ColumnSeparator = ({ show, className, ...props }) => {
+  if (!show) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "table-head-separator",
+      className: cn("absolute right-0 top-1/2 h-4 w-px -translate-y-1/2 bg-gray-300", className),
+      ...props
+    }
+  );
+};
+var ColumnSeparator_default = React27__default.memo(ColumnSeparator);
+
+// src/components/data-table/helpers.ts
+function getColumnPinningInfo(column) {
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
+  return { isPinned, isLastLeftPinnedColumn, isFirstRightPinnedColumn };
+}
+function getColumnPinningStyles(column) {
+  const { isPinned, isFirstRightPinnedColumn, isLastLeftPinnedColumn } = getColumnPinningInfo(column);
+  const classes = cn(isPinned ? "sticky" : "relative");
+  const style = {
+    left: isPinned === "left" ? column.getStart("left") : void 0,
+    right: isPinned === "right" ? column.getAfter("right") : void 0,
+    zIndex: isPinned ? 1 : 0,
+    boxShadow: isLastLeftPinnedColumn ? "inset -1px 0 0 0 black" : isFirstRightPinnedColumn ? "inset 1px 0 0 0 black" : void 0
+  };
+  return { classes, style };
+}
+function getRowClickHandlers(handler, { rowData, row, table }) {
+  const handleClick = (event) => {
+    if (event.detail === 1) {
+      handler(rowData, { event, row, table, clickType: "single" });
+    }
+    if (event.detail >= 2) {
+      handler(rowData, { event, row, table, clickType: "double" });
+    }
+  };
+  return {
+    onClick: handleClick
+  };
+}
+var TableHeaderRows = ({
+  table,
+  columnResizing,
+  virtual,
+  components
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: table.getHeaderGroups().map((headerGroup) => {
+    return /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+      const { classes, style } = getColumnPinningStyles(header.column);
+      const useColumnSizing = header.column.columnDef?.meta?.useColumnSizing ?? columnResizing?.enabled ?? virtual?.enabled ?? false;
+      const tableHeadCellProps = typeof components?.tableHeadCellProps === "function" ? components?.tableHeadCellProps({ header, table }) : components?.tableHeadCellProps;
+      const nextHeader = headerGroup.headers?.[header.index + 1] || header;
+      const { isLastLeftPinnedColumn } = getColumnPinningInfo(header.column);
+      const { isFirstRightPinnedColumn } = getColumnPinningInfo(nextHeader.column);
+      const headerGroupLength = header.headerGroup.headers.length;
+      const showSeparator = header.index !== headerGroupLength - 1 && !isLastLeftPinnedColumn && !isFirstRightPinnedColumn;
+      return /* @__PURE__ */ jsxs(
+        TableHead,
+        {
+          "data-testid": `table-head-${header.id}`,
+          colSpan: header.colSpan,
+          ...tableHeadCellProps,
+          ...header.column.columnDef?.meta?.headerProps,
+          className: cn(
+            classes,
+            tableHeadCellProps?.className,
+            header.column.columnDef?.meta?.headerProps?.className
+          ),
+          style: {
+            ...style,
+            width: useColumnSizing ? header.column.getSize() : void 0,
+            minWidth: useColumnSizing ? header.column.columnDef.minSize : void 0,
+            maxWidth: useColumnSizing ? header.column.columnDef.maxSize : void 0,
+            ...tableHeadCellProps?.style,
+            ...header.column.columnDef?.meta?.headerProps?.style
+          },
+          children: [
+            header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+            /* @__PURE__ */ jsx(
+              ColumnSeparator_default,
+              {
+                ...components?.columnSeparatorProps?.headerCell,
+                ...header.column.columnDef?.meta?.columnSeparatorProps,
+                show: header.column.columnDef?.meta?.columnSeparatorProps?.show ?? components?.columnSeparatorProps?.headerCell?.show ?? showSeparator
+              }
+            ),
+            /* @__PURE__ */ jsx(ColumnResizer_default, { header, ...components?.columnResizerProps })
+          ]
+        },
+        header.id
+      );
+    }) }, headerGroup.id);
+  }) });
+};
+var TableFilterRow = ({
+  table,
+  filterableColumns,
+  isSomeColumnsFilterable,
+  columnResizing,
+  virtual,
+  components
+}) => {
+  if (!isSomeColumnsFilterable) return null;
+  return /* @__PURE__ */ jsx(TableRow, { "data-testid": "table-filter-row", children: filterableColumns.map((column) => {
+    const { classes, style } = getColumnPinningStyles(column);
+    const useColumnSizing = column.columnDef.meta?.useColumnSizing ?? columnResizing?.enabled ?? virtual?.enabled ?? false;
+    const tableFilterCellProps = typeof components?.tableFilterCellProps === "function" ? components?.tableFilterCellProps({ column, table }) : components?.tableFilterCellProps;
+    return /* @__PURE__ */ jsx(
+      TableCell,
+      {
+        "data-testid": `table-filter-cell-${column.id}`,
+        ...tableFilterCellProps,
+        ...column.columnDef?.meta?.filterCellProps,
+        className: cn(
+          "bg-white border-b",
+          classes,
+          tableFilterCellProps?.className,
+          column.columnDef?.meta?.filterCellProps?.className
+        ),
+        style: {
+          ...style,
+          width: useColumnSizing ? column.getSize() : void 0,
+          minWidth: useColumnSizing ? column.columnDef.minSize : void 0,
+          maxWidth: useColumnSizing ? column.columnDef.maxSize : void 0,
+          ...tableFilterCellProps?.style,
+          ...column.columnDef?.meta?.filterCellProps?.style
+        },
+        children: column.getCanFilter() && column.columnDef.meta?.renderColumnFilter?.({
+          column,
+          table
+        })
+      },
+      column.id
+    );
+  }) });
+};
+var TableDataRows = ({
+  table,
+  rowModel,
+  virtualEnabled,
+  virtualItems,
+  virtualizer,
+  paddingTop,
+  paddingBottom,
+  visibleColumnCount,
+  columnResizing,
+  virtual,
+  onRowClick,
+  components
+}) => {
+  const config = virtualEnabled ? { items: virtualItems, isVirtualize: true, rowModel } : { items: rowModel, isVirtualize: false };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    virtualEnabled && paddingTop > 0 && /* @__PURE__ */ jsx(TableRow, { "aria-hidden": "true", "data-testid": "table-virtual-padding-top", children: /* @__PURE__ */ jsx(
+      TableCell,
+      {
+        className: "border-b-0 p-0 h-auto",
+        colSpan: visibleColumnCount,
+        style: { height: `${paddingTop}px` }
       }
-      if (shouldTrigger) {
-        scrollFetch.fetchMore();
+    ) }),
+    config.items.map((item) => {
+      const row = config.isVirtualize ? config.rowModel[item.index] : item;
+      if (!row) return null;
+      const virtualIndex = config.isVirtualize ? item.index : void 0;
+      const tableDataRowProps = typeof components?.tableDataRowProps === "function" ? components.tableDataRowProps({ row, table }) || {} : components?.tableDataRowProps || {};
+      return /* @__PURE__ */ createElement(
+        TableRow,
+        {
+          "data-testid": `table-data-row-${row.id}`,
+          "data-index": virtualIndex,
+          ref: config.isVirtualize ? (node) => virtualizer.measureElement(node) : void 0,
+          ...tableDataRowProps,
+          key: row.id,
+          className: cn("group", tableDataRowProps?.className),
+          "data-state": row.getIsSelected() ? "selected" : "non-selected",
+          ...getRowClickHandlers(onRowClick ?? (() => {
+          }), {
+            rowData: row.original,
+            row,
+            table
+          })
+        },
+        row.getVisibleCells().map((cell) => {
+          const { classes, style } = getColumnPinningStyles(cell.column);
+          const useColumnSizing = cell.column.columnDef.meta?.useColumnSizing ?? columnResizing?.enabled ?? virtual?.enabled ?? false;
+          const tableDataCellProps = typeof components?.tableDataCellProps === "function" ? components?.tableDataCellProps({ row, cell, table }) : components?.tableDataCellProps;
+          return /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              "data-testid": `table-data-cell-${cell.id}`,
+              "data-row-id": row.id,
+              "data-column-id": cell.column.id,
+              ...tableDataCellProps,
+              ...cell.column.columnDef?.meta?.cellProps,
+              className: cn(
+                {
+                  "bg-[#dfeae3]": row.getIsSelected(),
+                  "bg-white group-hover:bg-sus-primary-3-hover": !row.getIsSelected()
+                },
+                classes,
+                tableDataCellProps?.className,
+                cell.column.columnDef?.meta?.cellProps?.className
+              ),
+              style: {
+                ...style,
+                width: useColumnSizing ? cell.column.getSize() : void 0,
+                minWidth: useColumnSizing ? cell.column.columnDef.minSize : void 0,
+                maxWidth: useColumnSizing ? cell.column.columnDef.maxSize : void 0,
+                ...tableDataCellProps?.style,
+                ...cell.column.columnDef?.meta?.cellProps?.style
+              },
+              children: flexRender(cell.column.columnDef.cell, cell.getContext())
+            },
+            cell.id
+          );
+        })
+      );
+    }),
+    virtualEnabled && paddingBottom > 0 && /* @__PURE__ */ jsx(TableRow, { "aria-hidden": "true", "data-testid": "table-virtual-padding-bottom", children: /* @__PURE__ */ jsx(
+      TableCell,
+      {
+        className: "border-b-0 p-0 h-auto",
+        colSpan: visibleColumnCount,
+        style: { height: `${paddingBottom}px` }
       }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [scrollFetch?.enabled, scrollFetch?.isFetchingMore, scrollFetch?.hasMore, scrollFetch?.fetchMore]
-  );
-  useEffect(() => {
-    if (!tableRef) return;
-    tableRef.current = table;
-    return () => {
-      tableRef.current = null;
-    };
-  }, [tableRef, table]);
-  useEffect(() => {
-    fetchMoreOnScrollReached(tableContainerRef.current);
-  }, [fetchMoreOnScrollReached]);
+    ) })
+  ] });
+};
+var DataTable = ({
+  tableRef,
+  virtualizerRef,
+  isInitialLoading,
+  columns,
+  data,
+  filters,
+  sorting,
+  columnOrder,
+  columnVisibility,
+  columnPinning,
+  columnGrouping,
+  columnResizing,
+  rowSelection,
+  rowExpansion,
+  virtual,
+  scrollFetch,
+  activeStatusContent,
+  statusContent,
+  rowIdKey,
+  childrenKey,
+  onRowClick,
+  debug,
+  components
+}) => {
+  const virtualEnabled = virtual?.enabled ?? false;
+  const tableContainerRef = useRef(null);
+  const table = useTableController({
+    columns,
+    data,
+    filters,
+    sorting,
+    columnOrder,
+    columnVisibility,
+    columnPinning,
+    columnGrouping,
+    columnResizing,
+    rowSelection,
+    rowExpansion,
+    rowIdKey,
+    childrenKey
+  });
+  const { virtualizer, virtualItems, paddingTop, paddingBottom, rowModel } = useTableVirtualizer({
+    enabled: virtualEnabled,
+    table,
+    containerRef: tableContainerRef,
+    virtual
+  });
+  const { visibleColumnCount, isSomeColumnsFilterable, filterableColumns, activeStatusContentComputed } = useComputedTableState({
+    table,
+    rowModel,
+    isInitialLoading,
+    scrollFetch,
+    activeStatusContent
+  });
+  const fetchMoreOnScrollReached = useScrollFetch({ scrollFetch, containerRef: tableContainerRef });
+  useBindRef_default({ ref: tableRef, value: table });
+  useBindRef_default({ ref: virtualizerRef, value: virtualizer });
   return /* @__PURE__ */ jsxs(
     TableContainer,
     {
@@ -6283,149 +6573,61 @@ var DataTable = ({
             defaultIcon: /* @__PURE__ */ jsx(empty_data_default, { size: 128 })
           }
         ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(Table, { ...components?.tableProps, children: [
-            /* @__PURE__ */ jsxs(
-              TableHeader,
-              {
-                className: cn("sticky top-0 z-10", components?.tableHeaderProps?.className),
-                ...components?.tableHeaderProps,
-                children: [
-                  table.getHeaderGroups().map((headerGroup) => {
-                    return /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
-                      const { classes, style } = getColumnPinningStyles(header.column);
-                      const useColumnSizing = header.column.columnDef?.meta?.useColumnSizing ?? columnResizing?.enabled ?? false;
-                      const tableHeadCellProps = typeof components?.tableHeadCellProps === "function" ? components?.tableHeadCellProps({ header, table }) : components?.tableHeadCellProps;
-                      const nextHeader = headerGroup.headers?.[header.index + 1] || header;
-                      const { isLastLeftPinnedColumn } = getColumnPinningInfo(header.column);
-                      const { isFirstRightPinnedColumn } = getColumnPinningInfo(nextHeader.column);
-                      const headerGroupLength = header.headerGroup.headers.length;
-                      const showSeparator = header.index !== headerGroupLength - 1 && !isLastLeftPinnedColumn && !isFirstRightPinnedColumn;
-                      return /* @__PURE__ */ jsxs(
-                        TableHead,
-                        {
-                          "data-testid": `table-head-${header.id}`,
-                          colSpan: header.colSpan,
-                          ...tableHeadCellProps,
-                          ...header.column.columnDef?.meta?.headerProps,
-                          className: cn(
-                            classes,
-                            tableHeadCellProps?.className,
-                            header.column.columnDef?.meta?.headerProps?.className
-                          ),
-                          style: {
-                            ...style,
-                            width: useColumnSizing ? header.column.getSize() : void 0,
-                            minWidth: useColumnSizing ? header.column.columnDef.minSize : void 0,
-                            maxWidth: useColumnSizing ? header.column.columnDef.maxSize : void 0,
-                            ...tableHeadCellProps?.style,
-                            ...header.column.columnDef?.meta?.headerProps?.style
-                          },
-                          children: [
-                            header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
-                            /* @__PURE__ */ jsx(
-                              ColumnSeparator_default,
-                              {
-                                ...components?.columnSeparatorProps?.headerCell,
-                                ...header.column.columnDef?.meta?.columnSeparatorProps,
-                                show: header.column.columnDef?.meta?.columnSeparatorProps?.show ?? components?.columnSeparatorProps?.headerCell?.show ?? showSeparator
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(ColumnResizer_default, { header, ...components?.columnResizerProps })
-                          ]
-                        },
-                        header.id
-                      );
-                    }) }, headerGroup.id);
-                  }),
-                  isSomeColumnsFilterable && /* @__PURE__ */ jsx(TableRow, { "data-testid": "table-filter-row", children: filterableColumns.map((column) => {
-                    const { classes, style } = getColumnPinningStyles(column);
-                    const useColumnSizing = column.columnDef.meta?.useColumnSizing ?? columnResizing?.enabled ?? false;
-                    const tableFilterCellProps = typeof components?.tableFilterCellProps === "function" ? components?.tableFilterCellProps({ column, table }) : components?.tableFilterCellProps;
-                    return /* @__PURE__ */ jsx(
-                      TableCell,
-                      {
-                        "data-testid": `table-filter-cell-${column.id}`,
-                        ...tableFilterCellProps,
-                        ...column.columnDef?.meta?.filterCellProps,
-                        className: cn(
-                          "bg-white border-b",
-                          classes,
-                          tableFilterCellProps?.className,
-                          column.columnDef?.meta?.filterCellProps?.className
-                        ),
-                        style: {
-                          ...style,
-                          width: useColumnSizing ? column.getSize() : void 0,
-                          minWidth: useColumnSizing ? column.columnDef.minSize : void 0,
-                          maxWidth: useColumnSizing ? column.columnDef.maxSize : void 0,
-                          ...tableFilterCellProps?.style,
-                          ...column.columnDef?.meta?.filterCellProps?.style
-                        },
-                        children: column.getCanFilter() && column.columnDef.meta?.renderColumnFilter?.({
-                          column,
-                          table
-                        })
-                      },
-                      column.id
-                    );
-                  }) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(TableBody, { ...components?.tableBodyProps, children: table.getRowModel().rows.map((row) => {
-              const tableDataRowProps = typeof components?.tableDataRowProps === "function" ? components.tableDataRowProps({ row, table }) || {} : components?.tableDataRowProps || {};
-              return /* @__PURE__ */ createElement(
-                TableRow,
-                {
-                  "data-testid": `table-data-row-${row.id}`,
-                  ...tableDataRowProps,
-                  key: row.id,
-                  className: cn("group", tableDataRowProps?.className),
-                  "data-state": row.getIsSelected() ? "selected" : "non-selected",
-                  ...getRowClickHandlers(onRowClick ?? (() => {
-                  }), {
-                    rowData: row.original,
-                    row,
-                    table
-                  })
-                },
-                row.getVisibleCells().map((cell) => {
-                  const { classes, style } = getColumnPinningStyles(cell.column);
-                  const useColumnSizing = cell.column.columnDef.meta?.useColumnSizing ?? columnResizing?.enabled ?? false;
-                  const tableDataCellProps = typeof components?.tableDataCellProps === "function" ? components?.tableDataCellProps({ row, cell, table }) : components?.tableDataCellProps;
-                  return /* @__PURE__ */ jsx(
-                    TableCell,
-                    {
-                      "data-testid": `table-data-cell-${cell.id}`,
-                      "data-row-id": row.id,
-                      "data-column-id": cell.column.id,
-                      ...tableDataCellProps,
-                      ...cell.column.columnDef?.meta?.cellProps,
-                      className: cn(
+          /* @__PURE__ */ jsxs(
+            Table,
+            {
+              ...components?.tableProps,
+              style: { tableLayout: virtualEnabled ? "fixed" : "auto", ...components?.tableProps?.style },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  TableHeader,
+                  {
+                    className: cn("sticky top-0 z-10 bg-white", components?.tableHeaderProps?.className),
+                    ...components?.tableHeaderProps,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        TableHeaderRows,
                         {
-                          "bg-[#dfeae3]": row.getIsSelected(),
-                          "bg-white group-hover:bg-[#eff5f1]": !row.getIsSelected()
-                        },
-                        classes,
-                        tableDataCellProps?.className,
-                        cell.column.columnDef?.meta?.cellProps?.className
+                          table,
+                          columnResizing,
+                          virtual,
+                          components
+                        }
                       ),
-                      style: {
-                        ...style,
-                        width: useColumnSizing ? cell.column.getSize() : void 0,
-                        minWidth: useColumnSizing ? cell.column.columnDef.minSize : void 0,
-                        maxWidth: useColumnSizing ? cell.column.columnDef.maxSize : void 0,
-                        ...tableDataCellProps?.style,
-                        ...cell.column.columnDef?.meta?.cellProps?.style
-                      },
-                      children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                    },
-                    cell.id
-                  );
-                })
-              );
-            }) })
-          ] }),
+                      /* @__PURE__ */ jsx(
+                        TableFilterRow,
+                        {
+                          table,
+                          filterableColumns,
+                          isSomeColumnsFilterable,
+                          columnResizing,
+                          virtual,
+                          components
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(TableBody, { ...components?.tableBodyProps, children: /* @__PURE__ */ jsx(
+                  TableDataRows,
+                  {
+                    table,
+                    rowModel,
+                    virtualEnabled,
+                    virtualItems,
+                    virtualizer,
+                    paddingTop,
+                    paddingBottom,
+                    visibleColumnCount,
+                    columnResizing,
+                    virtual,
+                    onRowClick,
+                    components
+                  }
+                ) })
+              ]
+            }
+          ),
           activeStatusContentComputed === "emptyFilteredData" && /* @__PURE__ */ jsx(
             StatusContentSlot_default,
             {
@@ -7372,8 +7574,8 @@ var DISALLOWED_MARKS = ["bold", "italic", "link"];
 var SUGGESTION_DEBOUNCE = 200;
 var DEFAULT_CHIP_CLASS = "outline-1 outline-muted bg-muted/40 text-foreground";
 var TokenView = ({ node, editor, getPos }) => {
-  const [isFocused, setIsFocused] = React25__default.useState(false);
-  React25__default.useEffect(() => {
+  const [isFocused, setIsFocused] = React27__default.useState(false);
+  React27__default.useEffect(() => {
     const handler = () => {
       const { from, to } = editor.state.selection;
       const position = getPos();
@@ -8565,7 +8767,7 @@ function ToolbarPlugin({
       isLink: hasLink
     }));
   }, []);
-  React25.useEffect(() => {
+  React27.useEffect(() => {
     return mergeRegister(
       editor.registerCommand(
         CAN_UNDO_COMMAND,
@@ -9151,7 +9353,7 @@ function ControlledValuePlugin({
   trackAppliedValue
 }) {
   const [editor] = useLexicalComposerContext();
-  React25.useEffect(() => {
+  React27.useEffect(() => {
     if (value == null || trackAppliedValue.current === value) {
       return;
     }
@@ -9175,14 +9377,14 @@ function ControlledValuePlugin({
 }
 function EditableStatePlugin({ editable }) {
   const [editor] = useLexicalComposerContext();
-  React25.useEffect(() => {
+  React27.useEffect(() => {
     editor.setEditable(editable);
   }, [editor, editable]);
   return null;
 }
 function ImagesPlugin() {
   const [editor] = useLexicalComposerContext();
-  React25.useEffect(() => {
+  React27.useEffect(() => {
     return editor.registerCommand(
       INSERT_IMAGE_COMMAND,
       (payload) => {
@@ -9463,9 +9665,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React25.createContext(null);
+var SidebarContext = React27.createContext(null);
 function useSidebar() {
-  const context = React25.useContext(SidebarContext);
+  const context = React27.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -9481,10 +9683,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React25.useState(false);
-  const [_open, _setOpen] = React25.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React27.useState(false);
+  const [_open, _setOpen] = React27.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React25.useCallback(
+  const setOpen = React27.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -9496,10 +9698,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React25.useCallback(() => {
+  const toggleSidebar = React27.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React25.useEffect(() => {
+  React27.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -9510,7 +9712,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React25.useMemo(
+  const contextValue = React27.useMemo(
     () => ({
       state,
       open,
@@ -9952,7 +10154,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React25.useMemo(() => {
+  const width = React27.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -10095,8 +10297,8 @@ function TooltipProvider({
 }) {
   return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration, ...props });
 }
-function Tooltip({ ...props }) {
-  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+function Tooltip({ children, ...props }) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props, children }) });
 }
 function TooltipTrigger({ ...props }) {
   return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
@@ -10422,7 +10624,7 @@ function SortableRow({
     id: value,
     disabled: name === "columns.0.id"
   });
-  const style = React25.useMemo(
+  const style = React27.useMemo(
     () => ({
       transform: CSS.Transform.toString(transform),
       transition
@@ -10824,7 +11026,7 @@ function getCandidateWidths({
   }
   return DEVICE_SIZES;
 }
-var Image2 = React25.forwardRef(function Image3({
+var Image2 = React27.forwardRef(function Image3({
   src,
   alt,
   width,
@@ -10854,34 +11056,34 @@ var Image2 = React25.forwardRef(function Image3({
   } = imgProps;
   const widthNumber = toNumber(width);
   const heightNumber = toNumber(height);
-  React25.useEffect(() => {
+  React27.useEffect(() => {
     if (!fill && (!widthNumber || !heightNumber)) {
       console.warn(
         "[Image] When `fill` is false you should provide both `width` and `height` to prevent layout shifts."
       );
     }
   }, [fill, heightNumber, widthNumber]);
-  const candidateWidths = React25.useMemo(
+  const candidateWidths = React27.useMemo(
     () => getCandidateWidths({ width: widthNumber, sizes, fill }),
     [fill, sizes, widthNumber]
   );
   const largestWidth = candidateWidths[candidateWidths.length - 1] ?? widthNumber ?? DEVICE_SIZES[DEVICE_SIZES.length - 1];
-  const computedSrc = React25.useMemo(() => {
+  const computedSrc = React27.useMemo(() => {
     if (unoptimized) {
       return src;
     }
     return loader({ src, width: largestWidth, quality });
   }, [largestWidth, loader, quality, src, unoptimized]);
-  const computedSrcSet = React25.useMemo(() => {
+  const computedSrcSet = React27.useMemo(() => {
     if (unoptimized) {
       return void 0;
     }
     return candidateWidths.map((currentWidth) => `${loader({ src, width: currentWidth, quality })} ${currentWidth}w`).join(", ");
   }, [candidateWidths, loader, quality, src, unoptimized]);
   const sizesValue = sizes ?? (fill ? "100vw" : widthNumber ? `${widthNumber}px` : void 0);
-  const [isLoaded, setIsLoaded] = React25.useState(false);
-  const internalRef = React25.useRef(null);
-  const setRefs = React25.useCallback(
+  const [isLoaded, setIsLoaded] = React27.useState(false);
+  const internalRef = React27.useRef(null);
+  const setRefs = React27.useCallback(
     (node) => {
       internalRef.current = node;
       if (!ref) {
@@ -10895,7 +11097,7 @@ var Image2 = React25.forwardRef(function Image3({
     },
     [ref]
   );
-  React25.useEffect(() => {
+  React27.useEffect(() => {
     const image = internalRef.current;
     if (!image) {
       return;
@@ -10907,7 +11109,7 @@ var Image2 = React25.forwardRef(function Image3({
       setIsLoaded(false);
     }
   }, [onLoadingComplete, src]);
-  const handleLoad = React25.useCallback(
+  const handleLoad = React27.useCallback(
     (event) => {
       setIsLoaded(true);
       onLoadProp?.(event);
@@ -10919,7 +11121,7 @@ var Image2 = React25.forwardRef(function Image3({
   const fetchPriority = priority ? "high" : fetchPriorityProp;
   const decoding = decodingProp ?? "async";
   const resolvedObjectFit = objectFit ?? (fill ? "cover" : void 0);
-  const wrapperStyle = React25.useMemo(
+  const wrapperStyle = React27.useMemo(
     () => ({
       position: "relative",
       display: fill ? "block" : "inline-block",
@@ -10929,7 +11131,7 @@ var Image2 = React25.forwardRef(function Image3({
     }),
     [fill, height, width]
   );
-  const imageStyle = React25.useMemo(
+  const imageStyle = React27.useMemo(
     () => ({
       width: fill ? "100%" : formatDimension(width) ?? void 0,
       height: fill ? "100%" : formatDimension(height) ?? void 0,
@@ -11078,7 +11280,7 @@ var InfoIcon = ({ size = "1em", className, ...props }) => {
     }
   );
 };
-var InfoIcon_default = React25__default.memo(InfoIcon);
+var InfoIcon_default = React27__default.memo(InfoIcon);
 var Navbar = ({
   className,
   title,
@@ -11210,7 +11412,7 @@ var Navbar = ({
     }
   );
 };
-var navbar_default = React25__default.memo(Navbar);
+var navbar_default = React27__default.memo(Navbar);
 var usePreventPageLeaveStore = create((set) => ({
   isPreventing: false,
   setPreventing: (value) => set({ isPreventing: value })
@@ -11249,25 +11451,40 @@ var DefaultHeader = ({
   icon,
   classNames,
   rightActions
-}) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-start justify-between gap-3", classNames?.header), children: [
-  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-    icon ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "w-10 h-10 rounded-full bg-sus-green-50 flex items-center justify-center",
-          classNames?.iconWrapper
-        ),
-        children: icon
-      }
-    ) : null,
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      subtitle ? /* @__PURE__ */ jsx("span", { className: cn("text-xs text-gray-500", classNames?.subtitle), children: subtitle }) : null,
-      title ? /* @__PURE__ */ jsx("span", { className: cn("text-lg font-semibold text-sus-green-1", classNames?.title), children: title }) : null
-    ] })
-  ] }),
-  rightActions ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: rightActions }) : null
-] });
+}) => {
+  const titleRef = React27.useRef(null);
+  const isTruncated = useTruncated_default({ elementRef: titleRef });
+  const textElement = title ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: titleRef,
+      className: cn("text-lg font-semibold text-sus-green-1 truncate", classNames?.title),
+      children: title
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start justify-between gap-3", classNames?.header), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+      icon ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "w-10 h-10 rounded-full bg-sus-green-50 flex items-center justify-center",
+            classNames?.iconWrapper
+          ),
+          children: icon
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+        subtitle ? /* @__PURE__ */ jsx("span", { className: cn("text-xs text-gray-500", classNames?.subtitle), children: subtitle }) : null,
+        textElement ? isTruncated ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: textElement }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: title })
+        ] }) : textElement : null
+      ] })
+    ] }),
+    rightActions ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: rightActions }) : null
+  ] });
+};
 var RightPanelContainer = ({
   title,
   subtitle,
@@ -11291,19 +11508,28 @@ var RightPanelContainer = ({
         className,
         classNames?.root
       ),
-      children: /* @__PURE__ */ jsx("div", { className: cn("flex-1 flex min-h-0 px-4 py-6 justify-center", classNames?.body), children: /* @__PURE__ */ jsxs("div", { className: cn("w-full max-w-3xl overflow-auto", classNames?.content), children: [
-        renderHeader ? renderHeader({ title, subtitle, icon, rightActions, classNames }) : Header2 ? /* @__PURE__ */ jsx(
-          Header2,
-          {
-            title,
-            subtitle,
-            icon,
-            rightActions,
-            classNames
-          }
-        ) : null,
-        children
-      ] }) })
+      children: /* @__PURE__ */ jsx("div", { className: cn("flex-1 flex min-h-0 min-w-0 px-4 py-6 justify-center", classNames?.body), children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "w-full max-w-3xl min-w-0 overflow-x-hidden overflow-y-auto",
+            classNames?.content
+          ),
+          children: [
+            renderHeader ? renderHeader({ title, subtitle, icon, rightActions, classNames }) : Header2 ? /* @__PURE__ */ jsx(
+              Header2,
+              {
+                title,
+                subtitle,
+                icon,
+                rightActions,
+                classNames
+              }
+            ) : null,
+            children
+          ]
+        }
+      ) })
     }
   );
 };
@@ -11565,7 +11791,7 @@ function isFragment(object) {
 var isValidText = (val) => ["string", "number"].includes(typeof val);
 function toArray(children, option = {}) {
   let ret = [];
-  React25.Children.forEach(children, (child) => {
+  React27.Children.forEach(children, (child) => {
     if ((child === void 0 || child === null) && !option.keepEmpty) {
       return;
     }
@@ -11579,9 +11805,9 @@ function toArray(children, option = {}) {
   });
   return ret;
 }
-var MeasureText = React25.forwardRef(({ style, children }, ref) => {
-  const spanRef = React25.useRef(null);
-  React25.useImperativeHandle(ref, () => ({
+var MeasureText = React27.forwardRef(({ style, children }, ref) => {
+  const spanRef = React27.useRef(null);
+  React27.useImperativeHandle(ref, () => ({
     isExceed: () => {
       const span = spanRef.current;
       return span.scrollHeight > span.clientHeight;
@@ -11639,19 +11865,19 @@ var lineClipStyle = {
 };
 function EllipsisMeasure(props) {
   const { enableMeasure, width, text, children, rows, expanded, miscDeps, onEllipsis } = props;
-  const nodeList = React25.useMemo(() => toArray(text), [text]);
-  const nodeLen = React25.useMemo(() => getNodesLen(nodeList), [text]);
-  const fullContent = React25.useMemo(() => children(nodeList, false), [text]);
-  const [ellipsisCutIndex, setEllipsisCutIndex] = React25.useState(null);
-  const cutMidRef = React25.useRef(null);
-  const measureWhiteSpaceRef = React25.useRef(null);
-  const needEllipsisRef = React25.useRef(null);
-  const descRowsEllipsisRef = React25.useRef(null);
-  const symbolRowEllipsisRef = React25.useRef(null);
-  const [canEllipsis, setCanEllipsis] = React25.useState(false);
-  const [needEllipsis, setNeedEllipsis] = React25.useState(STATUS_MEASURE_NONE);
-  const [ellipsisHeight, setEllipsisHeight] = React25.useState(0);
-  const [parentWhiteSpace, setParentWhiteSpace] = React25.useState(null);
+  const nodeList = React27.useMemo(() => toArray(text), [text]);
+  const nodeLen = React27.useMemo(() => getNodesLen(nodeList), [text]);
+  const fullContent = React27.useMemo(() => children(nodeList, false), [text]);
+  const [ellipsisCutIndex, setEllipsisCutIndex] = React27.useState(null);
+  const cutMidRef = React27.useRef(null);
+  const measureWhiteSpaceRef = React27.useRef(null);
+  const needEllipsisRef = React27.useRef(null);
+  const descRowsEllipsisRef = React27.useRef(null);
+  const symbolRowEllipsisRef = React27.useRef(null);
+  const [canEllipsis, setCanEllipsis] = React27.useState(false);
+  const [needEllipsis, setNeedEllipsis] = React27.useState(STATUS_MEASURE_NONE);
+  const [ellipsisHeight, setEllipsisHeight] = React27.useState(0);
+  const [parentWhiteSpace, setParentWhiteSpace] = React27.useState(null);
   useIsomorphicLayoutEffect(() => {
     if (enableMeasure && width && nodeLen) {
       setNeedEllipsis(STATUS_MEASURE_PREPARE);
@@ -11694,7 +11920,7 @@ function EllipsisMeasure(props) {
       setEllipsisCutIndex(isOverflow ? [minIndex, targetMidIndex] : [targetMidIndex, maxIndex]);
     }
   }, [ellipsisCutIndex, cutMidIndex]);
-  const finalContent = React25.useMemo(() => {
+  const finalContent = React27.useMemo(() => {
     if (!enableMeasure) {
       return children(nodeList, false);
     }
@@ -11785,10 +12011,10 @@ var Truncated = ({
   tooltipProps,
   tooltipContentProps
 }) => {
-  const elementRef = React25.useRef(null);
-  const [open, setOpen] = React25.useState(false);
-  const [isTruncated, setIsTruncated] = React25.useState(false);
-  const [measureWidth, setMeasureWidth] = React25.useState(0);
+  const elementRef = React27.useRef(null);
+  const [open, setOpen] = React27.useState(false);
+  const [isTruncated, setIsTruncated] = React27.useState(false);
+  const [measureWidth, setMeasureWidth] = React27.useState(0);
   const Comp = as;
   const normalizedChildren = typeof children === "string" ? children.replace(/>/g, ">\u200B") : children;
   const lineClampLines = typeof ellipsis === "number" ? ellipsis : typeof ellipsis === "object" ? ellipsis?.lineClamp ?? 3 : null;
@@ -11813,13 +12039,13 @@ var Truncated = ({
       setIsTruncated(false);
     }
   }, [enableMeasure]);
-  const truncationClass = React25.useMemo(() => {
+  const truncationClass = React27.useMemo(() => {
     if (!ellipsis) return "";
     if (typeof ellipsis === "number") return `line-clamp-${ellipsis}`;
     if (typeof ellipsis === "object") return `line-clamp-${lineClampLines ?? 3}`;
     return "truncate";
   }, [ellipsis, lineClampLines]);
-  const clampedStyle = React25.useMemo(() => {
+  const clampedStyle = React27.useMemo(() => {
     if (!lineClampLines) return style;
     return {
       ...style,
@@ -11881,7 +12107,7 @@ var Truncated = ({
   );
 };
 var truncated_default = Truncated;
-var InputPrimitive2 = React25.forwardRef(
+var InputPrimitive2 = React27.forwardRef(
   ({ className, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -11920,7 +12146,7 @@ var inputVariants2 = cva("", {
     appearance: "filled"
   }
 });
-var Input2 = React25.forwardRef(
+var Input2 = React27.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -11953,8 +12179,8 @@ var Input2 = React25.forwardRef(
       onChange: onChangeProp
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React25.useId();
-    const handleChange = React25.useCallback(
+    const messageId = React27.useId();
+    const handleChange = React27.useCallback(
       (event) => {
         onChangeProp?.(event);
         onValueChange?.(event.target.value);
@@ -12048,16 +12274,16 @@ var InputNumber = ({ customInputProps, ...props }) => {
   return /* @__PURE__ */ jsx(NumericFormat, { customInput: Input2, ...props, ...customInputProps });
 };
 var InputNumber_default = InputNumber;
-var ActionButton = ({ label, onPress, className }) => {
-  const disabled = onPress === void 0;
+var ActionButton = ({ label, onPress, disabled, className }) => {
+  const isDisabled = disabled || onPress === void 0;
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
-      disabled,
+      disabled: isDisabled,
       onClick: (e) => {
         e.stopPropagation();
-        if (disabled) {
+        if (isDisabled || !onPress) {
           return;
         }
         onPress();
@@ -12065,7 +12291,7 @@ var ActionButton = ({ label, onPress, className }) => {
       className: cn(
         "action-menu-btn flex w-full items-center justify-start px-4 py-3 text-left",
         "hover:bg-sus-secondary-green-3 hover:not-disabled:text-sus-primary-green-9 text-gray-800",
-        disabled && "cursor-not-allowed opacity-50 hover:bg-transparent text-gray-400",
+        isDisabled && "cursor-not-allowed opacity-50 hover:bg-transparent text-gray-400",
         className
       ),
       children: label
@@ -12128,6 +12354,7 @@ var ActionMenu = ({
               {
                 className: actionButtonClassName,
                 label: btn.label,
+                disabled: btn.disabled,
                 onPress: btn.onPress ? () => {
                   btn.onPress?.(id);
                   setOpen(false);
@@ -12347,13 +12574,13 @@ var useFieldNames = ({
   fieldNames
 }) => {
   const { label: labelFieldKey = "label", value: valueFieldKey = "value" } = fieldNames || {};
-  const getLabelField = React25__default.useCallback(
+  const getLabelField = React27__default.useCallback(
     (option) => {
       return option?.[labelFieldKey];
     },
     [labelFieldKey]
   );
-  const getValueField = React25__default.useCallback(
+  const getValueField = React27__default.useCallback(
     (option) => {
       return option?.[valueFieldKey];
     },
@@ -12385,11 +12612,11 @@ var VirtualizedCommand = ({
   onFocus
 }) => {
   const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
-  const internalOptions = React25.useMemo(() => options ?? [], [options]);
-  const [filteredOptions, setFilteredOptions] = React25.useState(internalOptions);
-  const [focusedIndex, setFocusedIndex] = React25.useState(0);
-  const [isKeyboardNavActive, setIsKeyboardNavActive] = React25.useState(false);
-  const parentRef = React25.useRef(null);
+  const internalOptions = React27.useMemo(() => options ?? [], [options]);
+  const [filteredOptions, setFilteredOptions] = React27.useState(internalOptions);
+  const [focusedIndex, setFocusedIndex] = React27.useState(0);
+  const [isKeyboardNavActive, setIsKeyboardNavActive] = React27.useState(false);
+  const parentRef = React27.useRef(null);
   const virtualizer = useVirtualizer({
     count: filteredOptions.length,
     getScrollElement: () => parentRef.current,
@@ -12397,14 +12624,14 @@ var VirtualizedCommand = ({
     overscan: 2
   });
   const virtualOptions = virtualizer.getVirtualItems();
-  const dynamicHeight = React25.useMemo(() => {
+  const dynamicHeight = React27.useMemo(() => {
     const contentHeight = filteredOptions.length * ROW_HEIGHT;
     if (contentHeight <= 0) {
       return MIN_HEIGHT_EMPTY;
     }
     return Math.max(ROW_HEIGHT, Math.min(height, contentHeight));
   }, [filteredOptions.length, height]);
-  const scrollToIndex = React25.useCallback(
+  const scrollToIndex = React27.useCallback(
     (index) => {
       virtualizer.scrollToIndex(index, {
         align: "center"
@@ -12412,7 +12639,7 @@ var VirtualizedCommand = ({
     },
     [virtualizer]
   );
-  const handleSearch = React25.useCallback(
+  const handleSearch = React27.useCallback(
     (search) => {
       setIsKeyboardNavActive(false);
       setFilteredOptions(
@@ -12427,7 +12654,7 @@ var VirtualizedCommand = ({
     },
     [filterOption, getLabelField, internalOptions]
   );
-  const handleKeyDown = React25.useCallback(
+  const handleKeyDown = React27.useCallback(
     (event) => {
       switch (event.key) {
         case "ArrowDown": {
@@ -12462,7 +12689,7 @@ var VirtualizedCommand = ({
     },
     [filteredOptions, focusedIndex, getValueField, onSelect, scrollToIndex]
   );
-  React25.useEffect(() => {
+  React27.useEffect(() => {
     if (value) {
       const option = filteredOptions.find((option2) => {
         const optionValue = getValueField(option2);
@@ -12589,13 +12816,13 @@ var ComboboxInner = ({
     defaultValue,
     value
   });
-  const currentSelectedOption = React25.useMemo(() => {
+  const currentSelectedOption = React27.useMemo(() => {
     return options?.find((option) => {
       const optionValue = getValueField(option);
       return optionValue === selectedValue;
     });
   }, [getValueField, options, selectedValue]);
-  const renderValue = React25.useMemo(() => {
+  const renderValue = React27.useMemo(() => {
     if (!selectedValue) return placeholder2;
     if (currentSelectedOption) {
       return getLabelField(currentSelectedOption);
@@ -12605,7 +12832,7 @@ var ComboboxInner = ({
     }
     return null;
   }, [currentSelectedOption, getLabelField, placeholder2, selectedValue, showValueWhenNoMatch]);
-  const handleSelect = React25.useCallback(
+  const handleSelect = React27.useCallback(
     (selected, option) => {
       setSelectedValue(selected);
       setOpenPopover(false);
@@ -12618,7 +12845,7 @@ var ComboboxInner = ({
     },
     [onOpenChange, onSelect, setOpenPopover, setSelectedValue]
   );
-  const handleOpenPopover = React25.useCallback(
+  const handleOpenPopover = React27.useCallback(
     (isOpen) => {
       if (disabled) return;
       setOpenPopover(isOpen);
@@ -12628,7 +12855,7 @@ var ComboboxInner = ({
     },
     [disabled, onOpenChange, setOpenPopover]
   );
-  const handleClear = React25.useCallback(
+  const handleClear = React27.useCallback(
     (event) => {
       event.stopPropagation();
       setSelectedValue(void 0);
@@ -12717,7 +12944,7 @@ var ComboboxInner = ({
     )
   ] });
 };
-var Combobox = React25.forwardRef(ComboboxInner);
+var Combobox = React27.forwardRef(ComboboxInner);
 var Combobox_default = Combobox;
 var TruncatedMouseEnterDiv = ({
   value,
@@ -12842,6 +13069,6 @@ var TabSelect = ({
   );
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionMenu, AdministrationIcon, AdvanceSearch_default as AdvanceSearch, AnalyticsIcon, application_log_default as ApplicationLogIcon, arrow_default as ArrowIcon, AuditFooter, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Combobox_default as Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CropperModal, CropperModalError, custom_action_status_default as CustomActionStatusIcon, custom_field_default as CustomFieldIcon, DIALOG_ALERT_I18N_SUBNAMESPACE, DIALOG_ALERT_TEMPLATES, DashboardIcon, DataEntryIcon, DataTable_default as DataTable, DatePicker2 as DatePicker, decrease_default as DecreaseIcon, Dialog, DialogAlert, DialogAlertProvider, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, filters_default as FiltersIcon, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormulaEditor, GridSettingsModal_default as GridSettingsModal, HamburgerMenuIcon, HandymanIcon, HeaderCell_default as HeaderCell, Image2 as Image, information_default as InformationIcon, Input, InputNumber_default as InputNumber, Label2 as Label, LookupSelect, MailIcon, MainListContainer_default as MainListContainer, ManIcon, ManagementIcon, MenuIcon, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, plus_default as PlusIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PowerIcon, PreventPageLeave_default as PreventPageLeave, QuestionIcon, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, RightPanelContainer_default as RightPanelContainer, role_default as RoleIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, SetupIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Spinner, calendar_default as SuiCalendarIcon, calendar2_default as SuiCalendarIcon2, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, TabSelect, Textarea, ToolBoxIcon, Tooltip2 as Tooltip, TooltipArrow, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, trash_default as TrashIcon, truncated_default as Truncated, truncatedMouseEnterDiv_default as TruncatedMouseEnterDiv, ui_exports as UI, user_alone_default as UserAloneIcon, user_friend_default as UserFriendIcon, user_default as UserIcon, VirtualizedCommand_default as VirtualizedCommand, booleanToSelectValue, buildPrefixMap, buttonVariants, cn, compareAlphanumeric, debounce, defaultOperatorShortcuts, defaultOperators, formatISODate, getDialogAlertControls, inputVariants, isDefined, isEmptyObject, isValidParentheses, mapTokensToOutput, parseFormula, parseFormulaToToken, resetVisibleTableState, selectValueToBoolean, spinnerVariants, splitOperators, stripNullishObject, throttle, tokenizeFormulaString, useControllableState_default as useControllableState, useDraftGuardStore, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useIsomorphicLayoutEffect, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useSafeBlocker, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated, validateTokenPrefixes };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionMenu, AdministrationIcon, AdvanceSearch_default as AdvanceSearch, AnalyticsIcon, application_log_default as ApplicationLogIcon, arrow_default as ArrowIcon, AuditFooter, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Combobox_default as Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CropperModal, CropperModalError, custom_action_status_default as CustomActionStatusIcon, custom_field_default as CustomFieldIcon, DIALOG_ALERT_I18N_SUBNAMESPACE, DIALOG_ALERT_TEMPLATES, DashboardIcon, DataEntryIcon, DataTable_default as DataTable, DatePicker2 as DatePicker, decrease_default as DecreaseIcon, Dialog, DialogAlert, DialogAlertProvider, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, filters_default as FiltersIcon, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormulaEditor, GridSettingsModal_default as GridSettingsModal, HamburgerMenuIcon, HandymanIcon, HeaderCell_default as HeaderCell, Image2 as Image, information_default as InformationIcon, Input, InputNumber_default as InputNumber, Label2 as Label, LookupSelect, MailIcon, MainListContainer_default as MainListContainer, ManIcon, ManagementIcon, MenuIcon, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, plus_default as PlusIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PowerIcon, PreventPageLeave_default as PreventPageLeave, QuestionIcon, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, RightPanelContainer_default as RightPanelContainer, role_default as RoleIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, SetupIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Spinner, calendar_default as SuiCalendarIcon, calendar2_default as SuiCalendarIcon2, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, TabSelect, Textarea, ToolBoxIcon, Tooltip2 as Tooltip, TooltipArrow, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, trash_default as TrashIcon, truncated_default as Truncated, truncatedMouseEnterDiv_default as TruncatedMouseEnterDiv, ui_exports as UI, user_alone_default as UserAloneIcon, user_friend_default as UserFriendIcon, user_default as UserIcon, VirtualizedCommand_default as VirtualizedCommand, booleanToSelectValue, buildPrefixMap, buttonVariants, cn, compareAlphanumeric, debounce, defaultOperatorShortcuts, defaultOperators, formatISODate, getDialogAlertControls, inputVariants, isDefined, isEmptyObject, isValidParentheses, mapTokensToOutput, parseFormula, parseFormulaToToken, resetVisibleTableState, selectValueToBoolean, spinnerVariants, splitOperators, stripNullishObject, throttle, tokenizeFormulaString, useBindRef_default as useBindRef, useControllableState_default as useControllableState, useDraftGuardStore, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useIsomorphicLayoutEffect, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useSafeBlocker, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated, validateTokenPrefixes };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map