@sustaina/shared-ui 1.41.0 → 1.43.0

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React26 = require('react');
+var React27 = require('react');
 var reactRouter = require('@tanstack/react-router');
 var zustand = require('zustand');
 var clsx2 = require('clsx');
@@ -19,6 +19,7 @@ var PopoverPrimitive = require('@radix-ui/react-popover');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 var reactTable = require('@tanstack/react-table');
+var reactVirtual = require('@tanstack/react-virtual');
 var SheetPrimitive = require('@radix-ui/react-dialog');
 var reactI18next = require('react-i18next');
 var i18n = require('i18next');
@@ -61,7 +62,6 @@ var zod = require('zod');
 var Cropper = require('react-easy-crop');
 var reactNumberFormat = require('react-number-format');
 var cmdk = require('cmdk');
-var reactVirtual = require('@tanstack/react-virtual');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -83,7 +83,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React26__namespace = /*#__PURE__*/_interopNamespace(React26);
+var React27__namespace = /*#__PURE__*/_interopNamespace(React27);
 var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
@@ -273,12 +273,12 @@ function useSafeBlocker({
   withResolver = false
 }) {
   const router = reactRouter.useRouter({ warn: false });
-  const [resolver, setResolver] = React26.useState({
+  const [resolver, setResolver] = React27.useState({
     status: "idle",
     proceed: void 0,
     reset: void 0
   });
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (disabled || !router?.history?.block) {
       return;
     }
@@ -308,7 +308,7 @@ function useSafeBlocker({
       }
     });
   }, [disabled, enableBeforeUnload, router, shouldBlockFn, withResolver]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (disabled || router?.history || typeof window === "undefined") {
       return;
     }
@@ -1987,6 +1987,68 @@ var UserFriendIcon = ({ size = "1em", className, ...props }) => /* @__PURE__ */
   }
 );
 var user_friend_default = UserFriendIcon;
+var UserGroupIcon = ({
+  size = "1em",
+  stroke = "currentColor",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 18 18",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    preserveAspectRatio: "xMidYMid meet",
+    width: size,
+    height: size,
+    className,
+    "aria-hidden": true,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12 15.75V14.25C12 13.4544 11.6839 12.6913 11.1213 12.1287C10.5587 11.5661 9.79565 11.25 9 11.25H4.5C3.70435 11.25 2.94129 11.5661 2.37868 12.1287C1.81607 12.6913 1.5 13.4544 1.5 14.25V15.75",
+          stroke,
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12 2.34595C12.6433 2.51272 13.213 2.8884 13.6198 3.41399C14.0265 3.93959 14.2471 4.58536 14.2471 5.24995C14.2471 5.91453 14.0265 6.5603 13.6198 7.0859C13.213 7.6115 12.6433 7.98717 12 8.15395",
+          stroke,
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M16.5 15.7499V14.2499C16.4995 13.5852 16.2783 12.9395 15.871 12.4141C15.4638 11.8888 14.8936 11.5136 14.25 11.3474",
+          stroke,
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M6.75 8.25C8.40685 8.25 9.75 6.90685 9.75 5.25C9.75 3.59315 8.40685 2.25 6.75 2.25C5.09315 2.25 3.75 3.59315 3.75 5.25C3.75 6.90685 5.09315 8.25 6.75 8.25Z",
+          stroke,
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+var user_group_default = UserGroupIcon;
 var UserIcon = ({ size = "1em", className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
@@ -2159,7 +2221,7 @@ function AccordionContent({
   );
 }
 var ExpandCollapse = ({ title, children, portalId }) => {
-  const [isOpen, setIsOpen] = React26.useState(false);
+  const [isOpen, setIsOpen] = React27.useState(false);
   const Panel = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -2269,31 +2331,31 @@ function makeNewRow(field) {
   };
 }
 function useAdvanceSearch({ fields, limitRows }) {
-  const [rows, setRows] = React26.useState([makeNewRow(fields[0])]);
-  const updateRows = React26.useCallback((next) => {
+  const [rows, setRows] = React27.useState([makeNewRow(fields[0])]);
+  const updateRows = React27.useCallback((next) => {
     setRows(next);
   }, []);
-  const operatorsForField = React26.useCallback(
+  const operatorsForField = React27.useCallback(
     (fieldName) => {
       const t = getFieldType(fields, fieldName);
       return OPERATOR_MAP[t];
     },
     [fields]
   );
-  const addRow = React26.useCallback(() => {
+  const addRow = React27.useCallback(() => {
     if (limitRows && rows.length >= limitRows) return;
     const lastRow = rows[rows.length - 1];
     const lastField = fields.find((f) => f.name === lastRow?.fieldName) ?? fields[0];
     updateRows([...rows, makeNewRow(lastField)]);
   }, [rows, fields, updateRows, limitRows]);
-  const removeRow = React26.useCallback(
+  const removeRow = React27.useCallback(
     (id) => {
       if (rows.length === 1) return;
       updateRows(rows.filter((r) => r.id !== id));
     },
     [rows, updateRows]
   );
-  const clearRow = React26.useCallback(
+  const clearRow = React27.useCallback(
     (id) => {
       updateRows(
         rows.map((r) => {
@@ -2326,10 +2388,10 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, fields, updateRows]
   );
-  const clearAllRow = React26.useCallback(() => {
+  const clearAllRow = React27.useCallback(() => {
     updateRows([makeNewRow(fields[0])]);
   }, [fields, updateRows]);
-  const changeField = React26.useCallback(
+  const changeField = React27.useCallback(
     (id, fieldName) => {
       updateRows(
         rows.map((r) => {
@@ -2341,7 +2403,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, fields, updateRows]
   );
-  const changeOperator = React26.useCallback(
+  const changeOperator = React27.useCallback(
     (id, operator) => {
       updateRows(
         rows.map((r) => {
@@ -2375,7 +2437,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, updateRows]
   );
-  const changeValue = React26.useCallback(
+  const changeValue = React27.useCallback(
     (id, which, val) => {
       updateRows(
         rows.map((r) => {
@@ -2387,7 +2449,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, updateRows]
   );
-  const fieldOptions = React26.useMemo(
+  const fieldOptions = React27.useMemo(
     () => fields.map((f) => ({
       value: f.name,
       label: f.label ?? f.name
@@ -2582,7 +2644,7 @@ var OPERATOR_LABEL = {
   containsAll: "Contains all of"
 };
 var OperatorSelect = ({ row, operators, onChangeOperator, error }) => {
-  React26__namespace.default.useEffect(() => {
+  React27__namespace.default.useEffect(() => {
     if (!operators.length) return;
     if (!operators.includes(row.operator)) {
       onChangeOperator(operators[0]);
@@ -2618,15 +2680,15 @@ function Label2({ className, ...props }) {
   );
 }
 var Form = reactHookForm.FormProvider;
-var FormFieldContext = React26__namespace.createContext({});
+var FormFieldContext = React27__namespace.createContext({});
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React26__namespace.useContext(FormFieldContext);
-  const itemContext = React26__namespace.useContext(FormItemContext);
+  const fieldContext = React27__namespace.useContext(FormFieldContext);
+  const itemContext = React27__namespace.useContext(FormItemContext);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -2643,9 +2705,9 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React26__namespace.createContext({});
+var FormItemContext = React27__namespace.createContext({});
 function FormItem({ className, ...props }) {
-  const id = React26__namespace.useId();
+  const id = React27__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
 }
 function FormLabel({ className, ...props }) {
@@ -2749,7 +2811,7 @@ var Spinner = ({ className, variant, size = "default", ...props }) => /* @__PURE
     ]
   }
 );
-var InputPrimitive = React26__namespace.forwardRef(
+var InputPrimitive = React27__namespace.forwardRef(
   ({ className, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -2788,7 +2850,7 @@ var inputVariants = classVarianceAuthority.cva("", {
     appearance: "filled"
   }
 });
-var Input = React26__namespace.forwardRef(
+var Input = React27__namespace.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -2821,8 +2883,8 @@ var Input = React26__namespace.forwardRef(
       onChange: onChangeProp
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React26__namespace.useId();
-    const handleChange = React26__namespace.useCallback(
+    const messageId = React27__namespace.useId();
+    const handleChange = React27__namespace.useCallback(
       (event) => {
         onChangeProp?.(event);
         onValueChange?.(event.target.value);
@@ -3210,20 +3272,20 @@ function DatePicker({
   className,
   ...props
 }) {
-  const today = React26__namespace.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const [displayed, setDisplayed] = React26__namespace.useState(
+  const today = React27__namespace.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [displayed, setDisplayed] = React27__namespace.useState(
     selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date()
   );
   minDate = clampToDay(minDate);
   maxDate = clampToDay(maxDate);
-  const disabledSet = React26__namespace.useMemo(() => {
+  const disabledSet = React27__namespace.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 = React26__namespace.useMemo(() => {
+  const weekdays = React27__namespace.useMemo(() => {
     const labels = [];
     for (let i = 0; i < 7; i++) {
       const idx = i;
@@ -3232,7 +3294,7 @@ function DatePicker({
     }
     return labels;
   }, [callbacks]);
-  const grid = React26__namespace.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
+  const grid = React27__namespace.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
   const isDateDisabled = (date) => {
     const d = startOfDay(date);
     if (minDate && d < minDate) return true;
@@ -3242,7 +3304,7 @@ function DatePicker({
   };
   const minYear = minDate?.getFullYear();
   const maxYear = maxDate?.getFullYear();
-  const getMonthLabel = React26__namespace.useCallback(
+  const getMonthLabel = React27__namespace.useCallback(
     (year, monthIndex) => {
       const label = callbacks?.monthLabel?.(year, monthIndex);
       if (label === null || label === void 0) {
@@ -3252,7 +3314,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const getYearLabel = React26__namespace.useCallback(
+  const getYearLabel = React27__namespace.useCallback(
     (year) => {
       const label = callbacks?.yearLabel?.(year);
       if (label === null || label === void 0) return String(year);
@@ -3260,7 +3322,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const clampMonthToBounds = React26__namespace.useCallback(
+  const clampMonthToBounds = React27__namespace.useCallback(
     (year, monthIndex) => {
       let output = monthIndex;
       if (typeof minYear === "number" && year === minYear && minDate) {
@@ -3275,7 +3337,7 @@ function DatePicker({
     },
     [maxDate, minDate, maxYear, minYear]
   );
-  const yearOptions = React26__namespace.useMemo(() => {
+  const yearOptions = React27__namespace.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : displayYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : displayYear + fallbackWindow;
@@ -3296,7 +3358,7 @@ function DatePicker({
     }
     return years;
   }, [displayYear, maxYear, minYear, selectedDate]);
-  const monthOptions = React26__namespace.useMemo(() => {
+  const monthOptions = React27__namespace.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 {
@@ -3315,7 +3377,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 = React26__namespace.useCallback((nextValue) => {
+  const handleMonthSelect = React27__namespace.useCallback((nextValue) => {
     const nextMonth = Number.parseInt(nextValue, 10);
     if (Number.isNaN(nextMonth)) return;
     setDisplayed((prev) => {
@@ -3325,7 +3387,7 @@ function DatePicker({
       return next;
     });
   }, []);
-  const handleYearSelect = React26__namespace.useCallback(
+  const handleYearSelect = React27__namespace.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -3473,14 +3535,14 @@ var DatePicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React26__namespace.default.useState(false);
-  const parser = React26__namespace.default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
-  const outputFormatter = React26__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
-  const labelFormatter = React26__namespace.default.useMemo(
+  const [open, setOpen] = React27__namespace.default.useState(false);
+  const parser = React27__namespace.default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
+  const outputFormatter = React27__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
+  const labelFormatter = React27__namespace.default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter,
     [displayFormatter]
   );
-  const parsedValue = React26__namespace.default.useMemo(() => {
+  const parsedValue = React27__namespace.default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return value;
     const parsed = parser(value);
@@ -3489,26 +3551,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 = React26__namespace.default.useCallback(() => setOpen(false), []);
-  const emitChange = React26__namespace.default.useCallback(
+  const handleClose = React27__namespace.default.useCallback(() => setOpen(false), []);
+  const emitChange = React27__namespace.default.useCallback(
     (next) => {
       onChange?.(next);
       onValueChange?.(next ? outputFormatter(next) : void 0);
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React26__namespace.default.useCallback(
+  const handleSelect = React27__namespace.default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React26__namespace.default.useCallback(() => {
+  const handleClear = React27__namespace.default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React26__namespace.default.useCallback(
+  const handleOpenChange = React27__namespace.default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -3698,15 +3760,15 @@ function MonthCal({
   onYearBackward,
   onYearForward
 }) {
-  const today = React26__namespace.useMemo(() => {
+  const today = React27__namespace.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     now.setDate(1);
     now.setHours(0, 0, 0, 0);
     return now;
   }, []);
-  const selectedMonthDate = React26__namespace.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
-  const min = React26__namespace.useMemo(() => normalizeMonth(minDate), [minDate]);
-  const max = React26__namespace.useMemo(() => normalizeMonth(maxDate), [maxDate]);
+  const selectedMonthDate = React27__namespace.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
+  const min = React27__namespace.useMemo(() => normalizeMonth(minDate), [minDate]);
+  const max = React27__namespace.useMemo(() => normalizeMonth(maxDate), [maxDate]);
   let effectiveMin = min;
   if (min && max && min > max) {
     effectiveMin = max;
@@ -3715,10 +3777,10 @@ function MonthCal({
   const minMonth = effectiveMin?.getMonth();
   const maxYear = max?.getFullYear();
   const maxMonth = max?.getMonth();
-  const [menuYear, setMenuYear] = React26__namespace.useState(
+  const [menuYear, setMenuYear] = React27__namespace.useState(
     () => selectedMonthDate?.getFullYear() ?? today.getFullYear()
   );
-  React26__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (selectedMonthDate) {
       const year = selectedMonthDate.getFullYear();
       if (year !== menuYear) {
@@ -3726,7 +3788,7 @@ function MonthCal({
       }
     }
   }, [selectedMonthDate, menuYear]);
-  React26__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (typeof minYear === "number" && menuYear < minYear) {
       setMenuYear(minYear);
       return;
@@ -3737,7 +3799,7 @@ function MonthCal({
   }, [minYear, maxYear, menuYear]);
   const disablePrevYear = typeof minYear === "number" ? menuYear <= minYear : false;
   const disableNextYear = typeof maxYear === "number" ? menuYear >= maxYear : false;
-  const yearOptions = React26__namespace.useMemo(() => {
+  const yearOptions = React27__namespace.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : menuYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : menuYear + fallbackWindow;
@@ -3751,7 +3813,7 @@ function MonthCal({
     }
     return years;
   }, [maxYear, menuYear, minYear]);
-  const formatYearLabel = React26__namespace.useCallback(
+  const formatYearLabel = React27__namespace.useCallback(
     (year) => {
       const raw = callbacks?.yearLabel?.(year);
       if (raw === null || raw === void 0) return String(year);
@@ -3759,7 +3821,7 @@ function MonthCal({
     },
     [callbacks]
   );
-  const handleYearSelect = React26__namespace.useCallback(
+  const handleYearSelect = React27__namespace.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -3769,7 +3831,7 @@ function MonthCal({
     },
     [maxYear, minYear]
   );
-  const disabledPairs = React26__namespace.useMemo(() => {
+  const disabledPairs = React27__namespace.useMemo(() => {
     if (!disabledDates?.length) return [];
     const pairs = [];
     disabledDates.forEach((date) => {
@@ -3914,14 +3976,14 @@ var MonthPicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React26__namespace.default.useState(false);
-  const parser = React26__namespace.default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
-  const outputFormatter = React26__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
-  const labelFormatter = React26__namespace.default.useMemo(
+  const [open, setOpen] = React27__namespace.default.useState(false);
+  const parser = React27__namespace.default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
+  const outputFormatter = React27__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
+  const labelFormatter = React27__namespace.default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter2,
     [displayFormatter]
   );
-  const parsedValue = React26__namespace.default.useMemo(() => {
+  const parsedValue = React27__namespace.default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return normalizeMonth2(value);
     if (typeof value === "string") {
@@ -3933,8 +3995,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 = React26__namespace.default.useCallback(() => setOpen(false), []);
-  const emitChange = React26__namespace.default.useCallback(
+  const handleClose = React27__namespace.default.useCallback(() => setOpen(false), []);
+  const emitChange = React27__namespace.default.useCallback(
     (next) => {
       const normalized = next ? normalizeMonth2(next) : void 0;
       onChange?.(normalized);
@@ -3942,18 +4004,18 @@ var MonthPicker2 = ({
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React26__namespace.default.useCallback(
+  const handleSelect = React27__namespace.default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React26__namespace.default.useCallback(() => {
+  const handleClear = React27__namespace.default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React26__namespace.default.useCallback(
+  const handleOpenChange = React27__namespace.default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -4164,24 +4226,24 @@ var LookupSelect = ({
   dropdownPortalId,
   multiple = false
 }) => {
-  const [inputValue, setInputValue] = React26.useState("");
-  const inputRef = React26.useRef(null);
-  const [inputFocused, setInputFocused] = React26.useState(false);
-  const [suggestions, setSuggestions] = React26.useState([]);
-  const [optionLabels, setOptionLabels] = React26.useState({});
-  const [loading, setLoading] = React26.useState(false);
-  const [fetchError, setFetchError] = React26.useState(null);
-  const [isDropdownOpen, setIsDropdownOpen] = React26.useState(false);
-  const containerRef = React26.useRef(null);
-  const fetchDelayRef = React26.useRef(null);
-  const requestIdRef = React26.useRef(0);
-  const [dropdownStyles, setDropdownStyles] = React26.useState();
-  const dropdownContentRef = React26.useRef(null);
-  const assignDropdownContentRef = React26.useCallback((node) => {
+  const [inputValue, setInputValue] = React27.useState("");
+  const inputRef = React27.useRef(null);
+  const [inputFocused, setInputFocused] = React27.useState(false);
+  const [suggestions, setSuggestions] = React27.useState([]);
+  const [optionLabels, setOptionLabels] = React27.useState({});
+  const [loading, setLoading] = React27.useState(false);
+  const [fetchError, setFetchError] = React27.useState(null);
+  const [isDropdownOpen, setIsDropdownOpen] = React27.useState(false);
+  const containerRef = React27.useRef(null);
+  const fetchDelayRef = React27.useRef(null);
+  const requestIdRef = React27.useRef(0);
+  const [dropdownStyles, setDropdownStyles] = React27.useState();
+  const dropdownContentRef = React27.useRef(null);
+  const assignDropdownContentRef = React27.useCallback((node) => {
     dropdownContentRef.current = node;
   }, []);
-  const [activeSuggestionIndex, setActiveSuggestionIndex] = React26.useState(-1);
-  const dropdownPortalElement = React26.useMemo(() => {
+  const [activeSuggestionIndex, setActiveSuggestionIndex] = React27.useState(-1);
+  const dropdownPortalElement = React27.useMemo(() => {
     if (typeof document === "undefined") return null;
     if (dropdownPortalId) {
       const element = document.getElementById(dropdownPortalId);
@@ -4192,7 +4254,7 @@ var LookupSelect = ({
   const limitReached = multiple && value.length >= maxTags;
   const selectedValue = !multiple && value.length > 0 ? value[0] : void 0;
   const selectedLabel = selectedValue ? optionLabels[selectedValue] ?? selectedValue : void 0;
-  const upsertOptionLabels = React26.useCallback((options) => {
+  const upsertOptionLabels = React27.useCallback((options) => {
     setOptionLabels((prev) => {
       let next = null;
       options.forEach((opt) => {
@@ -4205,7 +4267,7 @@ var LookupSelect = ({
       return next ?? prev;
     });
   }, []);
-  const addTag = React26.useCallback(
+  const addTag = React27.useCallback(
     (val) => {
       const trimmed = val.trim();
       if (!trimmed) return;
@@ -4220,7 +4282,7 @@ var LookupSelect = ({
     },
     [value, onChange, maxTags, multiple]
   );
-  const removeTag = React26.useCallback(
+  const removeTag = React27.useCallback(
     (index) => {
       if (index < 0) return;
       const newTags = value.filter((_, i) => i !== index);
@@ -4230,7 +4292,7 @@ var LookupSelect = ({
     },
     [value, onChange]
   );
-  const handleClear = React26.useCallback(() => {
+  const handleClear = React27.useCallback(() => {
     setInputValue("");
     setSuggestions([]);
     setInputFocused(false);
@@ -4238,7 +4300,7 @@ var LookupSelect = ({
     setFetchError(null);
     if (onClear) onClear();
   }, [onClear]);
-  const handleSuggestionSelect = React26.useCallback(
+  const handleSuggestionSelect = React27.useCallback(
     (option) => {
       upsertOptionLabels([option]);
       addTag(option.value);
@@ -4256,7 +4318,7 @@ var LookupSelect = ({
     },
     [addTag, multiple, upsertOptionLabels]
   );
-  const handleKeyDown = React26.useCallback(
+  const handleKeyDown = React27.useCallback(
     (e) => {
       if (e.key === "ArrowDown" && suggestions.length > 0) {
         e.preventDefault();
@@ -4283,7 +4345,7 @@ var LookupSelect = ({
     },
     [suggestions, activeSuggestionIndex, handleSuggestionSelect, inputValue, removeTag, value.length]
   );
-  const updateDropdownPosition = React26.useCallback(() => {
+  const updateDropdownPosition = React27.useCallback(() => {
     if (!dropdownPortalElement || !containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     setDropdownStyles({
@@ -4294,7 +4356,7 @@ var LookupSelect = ({
       zIndex: 50
     });
   }, [dropdownPortalElement]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!fetchSuggestions || !inputFocused) return;
     if (fetchDelayRef.current) {
       clearTimeout(fetchDelayRef.current);
@@ -4328,7 +4390,7 @@ var LookupSelect = ({
       }
     };
   }, [inputValue, fetchSuggestions, suggestionDebounce, upsertOptionLabels, inputFocused]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!fetchSuggestions) return;
     if (value.length === 0) return;
     const unresolvedValues = value.filter((v) => !optionLabels[v]);
@@ -4338,7 +4400,7 @@ var LookupSelect = ({
     }).catch(() => {
     });
   }, [value, fetchSuggestions, optionLabels, upsertOptionLabels]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     const handleDocumentClick = (event) => {
       const target = event.target;
       if (containerRef.current?.contains(target)) return;
@@ -4351,11 +4413,11 @@ var LookupSelect = ({
       document.removeEventListener("mousedown", handleDocumentClick);
     };
   }, []);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!limitReached) return;
     setIsDropdownOpen(false);
   }, [limitReached]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!dropdownPortalElement) return;
     if (!isDropdownOpen) return;
     updateDropdownPosition();
@@ -4367,7 +4429,7 @@ var LookupSelect = ({
       window.removeEventListener("scroll", handleReposition, true);
     };
   }, [dropdownPortalElement, isDropdownOpen, updateDropdownPosition, value]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (suggestions.length === 0) {
       setActiveSuggestionIndex(-1);
       return;
@@ -5209,7 +5271,7 @@ var AdvanceSearch = ({
   shortDateFormat,
   filterFieldMap = FILTER_FIELD_MAP
 }) => {
-  const fieldsData = React26.useMemo(() => {
+  const fieldsData = React27.useMemo(() => {
     if (fields.length === 0) throw new Error("fields cannot be an empty array");
     return fields || [];
   }, [fields]);
@@ -5229,8 +5291,8 @@ var AdvanceSearch = ({
     defaultValues: {}
   });
   const { handleSubmit, unregister, resetField, getValues, clearErrors, setError } = form;
-  const [operatorErrors, setOperatorErrors] = React26__namespace.default.useState({});
-  const clearOperatorError = React26.useCallback(
+  const [operatorErrors, setOperatorErrors] = React27__namespace.default.useState({});
+  const clearOperatorError = React27.useCallback(
     (rowId) => {
       setOperatorErrors((prev) => {
         if (!(rowId in prev)) return prev;
@@ -5240,7 +5302,7 @@ var AdvanceSearch = ({
     },
     [setOperatorErrors]
   );
-  const clearValue = React26.useCallback(
+  const clearValue = React27.useCallback(
     (rowId, which) => {
       const fieldName = `${which}_${rowId}`;
       resetField(fieldName, { defaultValue: void 0 });
@@ -5250,14 +5312,14 @@ var AdvanceSearch = ({
     },
     [resetField, clearErrors]
   );
-  const parseRangeValue = React26.useCallback((raw, fieldType) => {
+  const parseRangeValue = React27.useCallback((raw, fieldType) => {
     if (!raw) return void 0;
     if (Array.isArray(raw)) return void 0;
     const normalized = fieldType === "datemonth" ? `${raw}-01` : raw;
     const parsed = dateFns.parseISO(normalized);
     return dateFns.isValid(parsed) ? parsed : void 0;
   }, []);
-  const onSubmit = React26.useCallback(() => {
+  const onSubmit = React27.useCallback(() => {
     const operatorValidation = {};
     rows.forEach((r) => {
       const ops = operatorsForField(r.fieldName);
@@ -5495,11 +5557,11 @@ function resetVisibleTableState(payload) {
   table.setSorting(prevState.sorting.filter((s) => isVisible(s.id)));
 }
 var useHover = () => {
-  const [hovering, setHovering] = React26.useState(false);
-  const prevRef = React26.useRef(null);
-  const onMouseEnter = React26.useCallback(() => setHovering(true), []);
-  const onMouseLeave = React26.useCallback(() => setHovering(false), []);
-  const nodeRefCallback = React26.useCallback(
+  const [hovering, setHovering] = React27.useState(false);
+  const prevRef = React27.useRef(null);
+  const onMouseEnter = React27.useCallback(() => setHovering(true), []);
+  const onMouseLeave = React27.useCallback(() => setHovering(false), []);
+  const nodeRefCallback = React27.useCallback(
     (node) => {
       if (prevRef.current) {
         prevRef.current.removeEventListener("mouseenter", onMouseEnter);
@@ -5527,15 +5589,15 @@ var useIntersectionObserver = ({
   initialIsIntersecting = false,
   onChange
 } = {}) => {
-  const [ref, setRef] = React26.useState(null);
-  const [state, setState] = React26.useState(() => ({
+  const [ref, setRef] = React27.useState(null);
+  const [state, setState] = React27.useState(() => ({
     isIntersecting: initialIsIntersecting,
     entry: void 0
   }));
-  const callbackRef = React26.useRef(null);
+  const callbackRef = React27.useRef(null);
   callbackRef.current = onChange;
   const frozen = state.entry?.isIntersecting && freezeOnceVisible;
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!ref) return;
     if (!("IntersectionObserver" in window)) return;
     if (frozen) return;
@@ -5565,8 +5627,8 @@ var useIntersectionObserver = ({
     frozen,
     freezeOnceVisible
   ]);
-  const prevRef = React26.useRef(null);
-  React26.useEffect(() => {
+  const prevRef = React27.useRef(null);
+  React27.useEffect(() => {
     if (!ref && state.entry?.target && !freezeOnceVisible && !frozen && prevRef.current !== state.entry.target) {
       prevRef.current = state.entry.target;
       setState({ isIntersecting: initialIsIntersecting, entry: void 0 });
@@ -5583,8 +5645,8 @@ var isValidMediaQueryString = (query) => {
   return query !== "not all";
 };
 var useMediaQuery = ({ query }) => {
-  const [matches, setMatches] = React26.useState(false);
-  React26.useEffect(() => {
+  const [matches, setMatches] = React27.useState(false);
+  React27.useEffect(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -5620,8 +5682,8 @@ var useTruncated = ({
   onChange,
   resizeDetectDelay = 150
 }) => {
-  const [isTruncated, setIsTruncated] = React26.useState(false);
-  React26.useEffect(() => {
+  const [isTruncated, setIsTruncated] = React27.useState(false);
+  React27.useEffect(() => {
     const element = elementRef.current;
     if (!element) return;
     const checkTruncate = debounce(() => {
@@ -5650,14 +5712,14 @@ var useControllableState = ({
   value
 }) => {
   const isControlled = typeof value !== "undefined";
-  const [internalValue, setInternalValue] = React26__namespace.useState(() => {
+  const [internalValue, setInternalValue] = React27__namespace.useState(() => {
     return isControlled ? value : defaultValue;
   });
-  React26__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (!isControlled) return;
     setInternalValue(value);
   }, [isControlled, value]);
-  const setValue = React26__namespace.useCallback(
+  const setValue = React27__namespace.useCallback(
     (nextValue) => {
       if (isControlled) return;
       setInternalValue(nextValue);
@@ -5671,7 +5733,17 @@ var useControllableState = ({
   };
 };
 var useControllableState_default = useControllableState;
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React26.useLayoutEffect : React26.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React27.useLayoutEffect : React27.useEffect;
+var useBindRef = ({ ref, value }) => {
+  React27__namespace.useEffect(() => {
+    if (!ref) return;
+    ref.current = value;
+    return () => {
+      ref.current = null;
+    };
+  }, [ref, value]);
+};
+var useBindRef_default = useBindRef;
 var HeaderCell = ({
   rootClassName,
   labelClassName,
@@ -5838,38 +5910,6 @@ function TableCaption({ className, ...props }) {
     }
   );
 }
-var ColumnResizer = ({ header, className, style }) => {
-  if (!header.column.getCanResize()) {
-    return null;
-  }
-  const resizeHandler = header.getResizeHandler();
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = React26__namespace.default.memo(ColumnSeparator);
 var StatusContentSlot = ({
   content,
   icon,
@@ -5888,7 +5928,7 @@ var StatusContentSlot = ({
     content
   ] });
 };
-var StatusContentSlot_default = React26__namespace.default.memo(StatusContentSlot);
+var StatusContentSlot_default = React27__namespace.default.memo(StatusContentSlot);
 var stateOptions = [
   "columnFilters",
   "globalFilter",
@@ -5941,9 +5981,9 @@ var modelOptions = [
   "getCenterVisibleLeafColumns"
 ];
 var DataTableDevTool = ({ table }) => {
-  const [open, setOpen] = React26.useState(false);
-  const [visibleStates, setVisibleStates] = React26.useState([]);
-  const [visibleModels, setVisibleModels] = React26.useState([]);
+  const [open, setOpen] = React27.useState(false);
+  const [visibleStates, setVisibleStates] = React27.useState([]);
+  const [visibleModels, setVisibleModels] = React27.useState([]);
   const tableState = table.getState();
   const toggleValue = (arr, value) => arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value];
   const getCircularReplacer = () => {
@@ -6054,45 +6094,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,
@@ -6104,14 +6107,8 @@ var DataTable = ({
   columnResizing,
   rowSelection,
   rowExpansion,
-  scrollFetch,
-  activeStatusContent,
-  statusContent,
   rowIdKey,
-  childrenKey,
-  onRowClick,
-  debug,
-  components
+  childrenKey
 }) => {
   const table = reactTable.useReactTable({
     // required properties
@@ -6164,7 +6161,6 @@ var DataTable = ({
       getSortedRowModel: !sorting?.manual && sorting?.enabled ? reactTable.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
@@ -6179,10 +6175,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 ? reactTable.getExpandedRowModel() : void 0
-      ),
+      getExpandedRowModel: !rowExpansion?.manual && rowExpansion?.enabled ? reactTable.getExpandedRowModel() : void 0,
       manualExpanding: rowExpansion?.enabled && (rowExpansion?.manual ?? false),
       enableExpanding: rowExpansion?.enabled ?? false,
       getIsRowExpanded: rowExpansion?.enabled ? rowExpansion?.isRowExpanded : void 0,
@@ -6200,14 +6193,94 @@ var DataTable = ({
       columnResizeMode: columnResizing?.enabled ? columnResizing?.resizeMode ?? "onChange" : "onChange"
     })
   });
-  const tableContainerRef = React26.useRef(null);
+  return table;
+};
+var useScrollFetch = ({ scrollFetch, containerRef }) => {
+  const fetchMoreOnScrollReached = React27.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]
+  );
+  React27.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 = reactVirtual.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 { isSomeColumnsFilterable, filterableColumns } = React26.useMemo(() => {
+  const visibleColumnCount = Math.max(
+    leftVisibleLeftColumns.length + centerVisibleLeafColumns.length + rightVisibleLeafColumns.length,
+    1
+  );
+  const { isSomeColumnsFilterable, filterableColumns } = React27.useMemo(() => {
     const mergedColumns = [
       ...leftVisibleLeftColumns,
       ...centerVisibleLeafColumns,
@@ -6218,7 +6291,7 @@ var DataTable = ({
     );
     return { isSomeColumnsFilterable: isSomeColumnsFilterable2, filterableColumns: mergedColumns };
   }, [centerVisibleLeafColumns, leftVisibleLeftColumns, rightVisibleLeafColumns]);
-  const autoStatusKey = React26.useMemo(() => {
+  const autoStatusKey = React27.useMemo(() => {
     if (isInitialLoading) return "initialLoading";
     if (isTableEmpty) return "emptyData";
     if (isTableEmptyAfterFiltering) return "emptyFilteredData";
@@ -6236,57 +6309,336 @@ var DataTable = ({
     scrollFetch?.hasMore,
     scrollFetch?.isFetchingMore
   ]);
-  const activeStatusContentComputed = React26.useMemo(() => {
+  const activeStatusContentComputed = React27.useMemo(() => {
     if (!activeStatusContent) return autoStatusKey;
     if (typeof activeStatusContent === "function") {
       return activeStatusContent({ defaultComputedValue: autoStatusKey });
     }
     return activeStatusContent;
   }, [activeStatusContent, autoStatusKey]);
-  const fetchMoreOnScrollReached = React26.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__ */ jsxRuntime.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__ */ jsxRuntime.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__namespace.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getHeaderGroups().map((headerGroup) => {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 : reactTable.flexRender(header.column.columnDef.header, header.getContext()),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ColumnSeparator_default,
+              {
+                ...components?.columnSeparatorProps?.headerCell,
+                ...header.column.columnDef?.meta?.columnSeparatorProps,
+                show: header.column.columnDef?.meta?.columnSeparatorProps?.show ?? components?.columnSeparatorProps?.headerCell?.show ?? showSeparator
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer_default, { header, ...components?.columnResizerProps })
+          ]
+        },
+        header.id
+      );
+    }) }, headerGroup.id);
+  }) });
+};
+var TableFilterRow = ({
+  table,
+  filterableColumns,
+  isSomeColumnsFilterable,
+  columnResizing,
+  virtual,
+  components
+}) => {
+  if (!isSomeColumnsFilterable) return null;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    virtualEnabled && paddingTop > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { "aria-hidden": "true", "data-testid": "table-virtual-padding-top", children: /* @__PURE__ */ jsxRuntime.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__ */ React27.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__ */ jsxRuntime.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: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
+            },
+            cell.id
+          );
+        })
+      );
+    }),
+    virtualEnabled && paddingBottom > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { "aria-hidden": "true", "data-testid": "table-virtual-padding-bottom", children: /* @__PURE__ */ jsxRuntime.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]
-  );
-  React26.useEffect(() => {
-    if (!tableRef) return;
-    tableRef.current = table;
-    return () => {
-      tableRef.current = null;
-    };
-  }, [tableRef, table]);
-  React26.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 = React27.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__ */ jsxRuntime.jsxs(
     TableContainer,
     {
@@ -6323,149 +6675,61 @@ var DataTable = ({
             defaultIcon: /* @__PURE__ */ jsxRuntime.jsx(empty_data_default, { size: 128 })
           }
         ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Table, { ...components?.tableProps, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              TableHeader,
-              {
-                className: cn("sticky top-0 z-10", components?.tableHeaderProps?.className),
-                ...components?.tableHeaderProps,
-                children: [
-                  table.getHeaderGroups().map((headerGroup) => {
-                    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 : reactTable.flexRender(header.column.columnDef.header, header.getContext()),
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              ColumnSeparator_default,
-                              {
-                                ...components?.columnSeparatorProps?.headerCell,
-                                ...header.column.columnDef?.meta?.columnSeparatorProps,
-                                show: header.column.columnDef?.meta?.columnSeparatorProps?.show ?? components?.columnSeparatorProps?.headerCell?.show ?? showSeparator
-                              }
-                            ),
-                            /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer_default, { header, ...components?.columnResizerProps })
-                          ]
-                        },
-                        header.id
-                      );
-                    }) }, headerGroup.id);
-                  }),
-                  isSomeColumnsFilterable && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TableBody, { ...components?.tableBodyProps, children: table.getRowModel().rows.map((row) => {
-              const tableDataRowProps = typeof components?.tableDataRowProps === "function" ? components.tableDataRowProps({ row, table }) || {} : components?.tableDataRowProps || {};
-              return /* @__PURE__ */ React26.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+            Table,
+            {
+              ...components?.tableProps,
+              style: { tableLayout: virtualEnabled ? "fixed" : "auto", ...components?.tableProps?.style },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  TableHeader,
+                  {
+                    className: cn("sticky top-0 z-10 bg-white", components?.tableHeaderProps?.className),
+                    ...components?.tableHeaderProps,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.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: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
-                    },
-                    cell.id
-                  );
-                })
-              );
-            }) })
-          ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        TableFilterRow,
+                        {
+                          table,
+                          filterableColumns,
+                          isSomeColumnsFilterable,
+                          columnResizing,
+                          virtual,
+                          components
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(TableBody, { ...components?.tableBodyProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  TableDataRows,
+                  {
+                    table,
+                    rowModel,
+                    virtualEnabled,
+                    virtualItems,
+                    virtualizer,
+                    paddingTop,
+                    paddingBottom,
+                    visibleColumnCount,
+                    columnResizing,
+                    virtual,
+                    onRowClick,
+                    components
+                  }
+                ) })
+              ]
+            }
+          ),
           activeStatusContentComputed === "emptyFilteredData" && /* @__PURE__ */ jsxRuntime.jsx(
             StatusContentSlot_default,
             {
@@ -6747,11 +7011,11 @@ function DialogAlert({
 }) {
   const alignClass = align === "start" ? "justify-start" : align === "end" ? "justify-end" : "justify-center";
   const { t } = reactI18next.useTranslation();
-  const handleCancel = React26.useCallback(() => {
+  const handleCancel = React27.useCallback(() => {
     onCancel?.();
     onOpenChange(false);
   }, [onCancel, onOpenChange]);
-  const handleConfirm = React26.useCallback(() => {
+  const handleConfirm = React27.useCallback(() => {
     let func = onConfirm;
     if (variant === "success" && showCancel === false) {
       func = onConfirm ?? onCancel;
@@ -7126,7 +7390,7 @@ var DialogAlertProvider = ({ children, i18nResource, i18nLang }) => {
   const open = useDialogAlertStore((state) => state.open);
   const setOpen = useDialogAlertStore((state) => state.setOpen);
   const dialogProps = useDialogAlertStore((state) => state.dialogProps);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!i18nResource) {
       i18n_default.changeLanguage("sharedui");
       return;
@@ -7236,8 +7500,8 @@ var defaultOperatorShortcuts = {
 };
 var DEFAULT_DEBOUNCE = 200;
 function useKeyboardNavigation(itemsLength, onSelect, isLocked) {
-  const [selectedIndex, setSelectedIndex] = React26.useState(0);
-  React26.useEffect(() => {
+  const [selectedIndex, setSelectedIndex] = React27.useState(0);
+  React27.useEffect(() => {
     const handler = (event) => {
       if (event.key === "ArrowDown") {
         event.preventDefault();
@@ -7260,10 +7524,10 @@ function useKeyboardNavigation(itemsLength, onSelect, isLocked) {
   return [selectedIndex, setSelectedIndex];
 }
 function useDropdownPosition(clientRect, itemsCount) {
-  const [rect, setRect] = React26.useState(null);
-  const [style, setStyle] = React26.useState({});
-  const ref = React26.useRef(null);
-  React26.useEffect(() => {
+  const [rect, setRect] = React27.useState(null);
+  const [style, setStyle] = React27.useState({});
+  const ref = React27.useRef(null);
+  React27.useEffect(() => {
     if (!clientRect) return;
     const update = () => {
       const nextRect = clientRect();
@@ -7280,7 +7544,7 @@ function useDropdownPosition(clientRect, itemsCount) {
       resizeObserver.disconnect();
     };
   }, [clientRect]);
-  React26.useLayoutEffect(() => {
+  React27.useLayoutEffect(() => {
     if (!rect || !ref.current) return;
     const dropdown = ref.current;
     const dropdownRect = dropdown.getBoundingClientRect();
@@ -7307,15 +7571,15 @@ var SuggestionList = ({
   debounceMs = DEFAULT_DEBOUNCE,
   query
 }) => {
-  const [items, setItems] = React26.useState([]);
-  const [isLoading, setIsLoading] = React26.useState(false);
-  const fetchId = React26.useRef(0);
-  const debounceHandle = React26.useRef(null);
-  const itemRefs = React26.useRef([]);
+  const [items, setItems] = React27.useState([]);
+  const [isLoading, setIsLoading] = React27.useState(false);
+  const fetchId = React27.useRef(0);
+  const debounceHandle = React27.useRef(null);
+  const itemRefs = React27.useRef([]);
   const { ref, style, rect } = useDropdownPosition(clientRect, items.length);
-  const normalizedMap = React26.useMemo(() => mapItem, [mapItem]);
-  const normalizeItem = React26.useMemo(() => normalizeToken, [normalizeToken]);
-  React26.useEffect(() => {
+  const normalizedMap = React27.useMemo(() => mapItem, [mapItem]);
+  const normalizeItem = React27.useMemo(() => normalizeToken, [normalizeToken]);
+  React27.useEffect(() => {
     const runFetch = (input) => {
       fetchId.current += 1;
       const currentId = fetchId.current;
@@ -7346,7 +7610,7 @@ var SuggestionList = ({
       fetchId.current += 1;
     };
   }, [query, fetchItems, normalizedMap, normalizeItem, debounceMs]);
-  const handleSelect = React26.useMemo(
+  const handleSelect = React27.useMemo(
     () => (item) => {
       if (isLoading) return;
       command(item);
@@ -7361,10 +7625,10 @@ var SuggestionList = ({
     },
     isLoading
   );
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     setSelectedIndex(0);
   }, [items, setSelectedIndex]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     const element = itemRefs.current[selectedIndex];
     if (element) element.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
@@ -7412,8 +7676,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] = React26__namespace.default.useState(false);
-  React26__namespace.default.useEffect(() => {
+  const [isFocused, setIsFocused] = React27__namespace.default.useState(false);
+  React27__namespace.default.useEffect(() => {
     const handler = () => {
       const { from, to } = editor.state.selection;
       const position = getPos();
@@ -8400,21 +8664,21 @@ function ToolbarPlugin({
   acceptImageMimeTypes
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [state, setState] = React26.useState(initialToolbarState);
-  const fileInputRef = React26.useRef(null);
-  const [isLinkDialogOpen, setLinkDialogOpen] = React26.useState(false);
-  const [editingExistingLink, setEditingExistingLink] = React26.useState(false);
-  const [linkNodeKey, setLinkNodeKey] = React26.useState(null);
-  const [isImageDialogOpen, setImageDialogOpen] = React26.useState(false);
-  const [editingExistingImage, setEditingExistingImage] = React26.useState(false);
-  const [imageNodeKey, setImageNodeKey] = React26.useState(null);
+  const [state, setState] = React27.useState(initialToolbarState);
+  const fileInputRef = React27.useRef(null);
+  const [isLinkDialogOpen, setLinkDialogOpen] = React27.useState(false);
+  const [editingExistingLink, setEditingExistingLink] = React27.useState(false);
+  const [linkNodeKey, setLinkNodeKey] = React27.useState(null);
+  const [isImageDialogOpen, setImageDialogOpen] = React27.useState(false);
+  const [editingExistingImage, setEditingExistingImage] = React27.useState(false);
+  const [imageNodeKey, setImageNodeKey] = React27.useState(null);
   const linkForm = reactHookForm.useForm({
     defaultValues: { url: "", label: "" }
   });
   const imageForm = reactHookForm.useForm({
     defaultValues: { url: "", alt: "", width: "", height: "" }
   });
-  const openImageDialog = React26.useCallback(() => {
+  const openImageDialog = React27.useCallback(() => {
     if (disabled || !allowImageUrlInsert) {
       return;
     }
@@ -8448,7 +8712,7 @@ function ToolbarPlugin({
     setImageNodeKey(targetImage?.getKey() ?? null);
     setImageDialogOpen(true);
   }, [allowImageUrlInsert, disabled, editor, imageForm]);
-  const closeImageDialog = React26.useCallback(() => {
+  const closeImageDialog = React27.useCallback(() => {
     setImageDialogOpen(false);
     setEditingExistingImage(false);
     setImageNodeKey(null);
@@ -8457,7 +8721,7 @@ function ToolbarPlugin({
       editor.focus();
     }, 0);
   }, [editor, imageForm]);
-  const openLinkDialog = React26.useCallback(() => {
+  const openLinkDialog = React27.useCallback(() => {
     if (disabled) {
       return;
     }
@@ -8497,7 +8761,7 @@ function ToolbarPlugin({
     setLinkNodeKey(detectedLink?.getKey() ?? null);
     setLinkDialogOpen(true);
   }, [disabled, editor, linkForm]);
-  const closeLinkDialog = React26.useCallback(() => {
+  const closeLinkDialog = React27.useCallback(() => {
     setLinkDialogOpen(false);
     setEditingExistingLink(false);
     setLinkNodeKey(null);
@@ -8538,7 +8802,7 @@ function ToolbarPlugin({
     });
     closeLinkDialog();
   });
-  const handleRemoveLink = React26.useCallback(() => {
+  const handleRemoveLink = React27.useCallback(() => {
     editor.focus();
     editor.update(() => {
       if (linkNodeKey) {
@@ -8555,7 +8819,7 @@ function ToolbarPlugin({
     });
     closeLinkDialog();
   }, [closeLinkDialog, editor, linkNodeKey]);
-  const handleLinkDialogOpenChange = React26.useCallback(
+  const handleLinkDialogOpenChange = React27.useCallback(
     (open) => {
       if (open) {
         setLinkDialogOpen(true);
@@ -8565,7 +8829,7 @@ function ToolbarPlugin({
     },
     [closeLinkDialog]
   );
-  const updateToolbar = React26.useCallback(() => {
+  const updateToolbar = React27.useCallback(() => {
     const selection = lexical.$getSelection();
     if (!lexical.$isRangeSelection(selection)) {
       return;
@@ -8605,7 +8869,7 @@ function ToolbarPlugin({
       isLink: hasLink
     }));
   }, []);
-  React26__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     return utils.mergeRegister(
       editor.registerCommand(
         lexical.CAN_UNDO_COMMAND,
@@ -8636,7 +8900,7 @@ function ToolbarPlugin({
       })
     );
   }, [editor, updateToolbar]);
-  const applyBlock = React26.useCallback(
+  const applyBlock = React27.useCallback(
     (nextBlock) => {
       if (disabled) {
         return;
@@ -8698,7 +8962,7 @@ function ToolbarPlugin({
     },
     [disabled, editor, state.blockType]
   );
-  const toggleFormat = React26.useCallback(
+  const toggleFormat = React27.useCallback(
     (format5) => {
       if (disabled) {
         return;
@@ -8707,10 +8971,10 @@ function ToolbarPlugin({
     },
     [disabled, editor]
   );
-  const toggleLink = React26.useCallback(() => {
+  const toggleLink = React27.useCallback(() => {
     openLinkDialog();
   }, [openLinkDialog]);
-  const applyElementFormat = React26.useCallback(
+  const applyElementFormat = React27.useCallback(
     (format5) => {
       if (disabled) {
         return;
@@ -8721,7 +8985,7 @@ function ToolbarPlugin({
   );
   const canInsertImage = allowImageUrlInsert || Boolean(onImageUpload);
   const imageAccept = acceptImageMimeTypes ?? DEFAULT_IMAGE_ACCEPT;
-  const handleInsertImage = React26.useCallback(() => {
+  const handleInsertImage = React27.useCallback(() => {
     if (disabled || !canInsertImage) {
       return;
     }
@@ -8732,7 +8996,7 @@ function ToolbarPlugin({
     }
     openImageDialog();
   }, [canInsertImage, disabled, editor, onImageUpload, openImageDialog]);
-  const handleFileChange = React26.useCallback(
+  const handleFileChange = React27.useCallback(
     async (event) => {
       if (!onImageUpload) {
         return;
@@ -8822,7 +9086,7 @@ function ToolbarPlugin({
     });
     closeImageDialog();
   });
-  const handleImageDialogOpenChange = React26.useCallback(
+  const handleImageDialogOpenChange = React27.useCallback(
     (open) => {
       if (open) {
         setImageDialogOpen(true);
@@ -8832,7 +9096,7 @@ function ToolbarPlugin({
     },
     [closeImageDialog]
   );
-  const handleRemoveImage = React26.useCallback(() => {
+  const handleRemoveImage = React27.useCallback(() => {
     if (!imageNodeKey) {
       closeImageDialog();
       return;
@@ -9191,7 +9455,7 @@ function ControlledValuePlugin({
   trackAppliedValue
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React26__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (value == null || trackAppliedValue.current === value) {
       return;
     }
@@ -9215,14 +9479,14 @@ function ControlledValuePlugin({
 }
 function EditableStatePlugin({ editable }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React26__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     editor.setEditable(editable);
   }, [editor, editable]);
   return null;
 }
 function ImagesPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React26__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     return editor.registerCommand(
       INSERT_IMAGE_COMMAND,
       (payload) => {
@@ -9241,7 +9505,7 @@ function ImagesPlugin() {
   }, [editor]);
   return null;
 }
-var RichText = React26.forwardRef(function RichText2({
+var RichText = React27.forwardRef(function RichText2({
   value,
   defaultValue,
   onChange,
@@ -9260,11 +9524,11 @@ var RichText = React26.forwardRef(function RichText2({
   id,
   ...rest
 }, ref) {
-  const initialSerializedStateRef = React26.useRef(void 0);
+  const initialSerializedStateRef = React27.useRef(void 0);
   if (initialSerializedStateRef.current === void 0) {
     initialSerializedStateRef.current = parseSerializedEditorState(value ?? defaultValue);
   }
-  const initialConfig = React26.useMemo(
+  const initialConfig = React27.useMemo(
     () => ({
       namespace: "RichTextEditor",
       editable: !(readOnly || disabled),
@@ -9277,8 +9541,8 @@ var RichText = React26.forwardRef(function RichText2({
     }),
     [disabled, readOnly]
   );
-  const appliedValueRef = React26.useRef(value ?? defaultValue);
-  const handleChange = React26.useCallback(
+  const appliedValueRef = React27.useRef(value ?? defaultValue);
+  const handleChange = React27.useCallback(
     (editorState, editor) => {
       const serialized = JSON.stringify(editorState.toJSON());
       appliedValueRef.current = serialized;
@@ -9467,13 +9731,13 @@ function SheetDescription({
   );
 }
 function useIsMobile(breakpoint = 768) {
-  const [isMobile, setIsMobile] = React26.useState(() => {
+  const [isMobile, setIsMobile] = React27.useState(() => {
     if (typeof window === "undefined") {
       return false;
     }
     return window.innerWidth < breakpoint;
   });
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     function onResize() {
       setIsMobile(window.innerWidth < breakpoint);
     }
@@ -9503,9 +9767,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React26__namespace.createContext(null);
+var SidebarContext = React27__namespace.createContext(null);
 function useSidebar() {
-  const context = React26__namespace.useContext(SidebarContext);
+  const context = React27__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -9521,10 +9785,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React26__namespace.useState(false);
-  const [_open, _setOpen] = React26__namespace.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React27__namespace.useState(false);
+  const [_open, _setOpen] = React27__namespace.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React26__namespace.useCallback(
+  const setOpen = React27__namespace.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -9536,10 +9800,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React26__namespace.useCallback(() => {
+  const toggleSidebar = React27__namespace.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React26__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -9550,7 +9814,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React26__namespace.useMemo(
+  const contextValue = React27__namespace.useMemo(
     () => ({
       state,
       open,
@@ -9992,7 +10256,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React26__namespace.useMemo(() => {
+  const width = React27__namespace.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10257,10 +10521,10 @@ var FormulaEditor = ({
   fieldState,
   mode = "edit"
 }) => {
-  const [isExpanded, setIsExpanded] = React26.useState(false);
-  const lastEmittedValueRef = React26.useRef(null);
-  const ignorePropValueRef = React26.useRef(false);
-  const normalizedConfigs = React26.useMemo(() => {
+  const [isExpanded, setIsExpanded] = React27.useState(false);
+  const lastEmittedValueRef = React27.useRef(null);
+  const ignorePropValueRef = React27.useRef(false);
+  const normalizedConfigs = React27.useMemo(() => {
     const configsToUse = tokenConfigs?.length ? tokenConfigs : DEFAULT_TOKEN_CONFIGS;
     return configsToUse.map((config) => ({
       ...config,
@@ -10269,18 +10533,18 @@ var FormulaEditor = ({
       outputType: config.outputType ?? config.type
     }));
   }, [tokenConfigs]);
-  const prefixMap = React26.useMemo(() => buildPrefixMap(normalizedConfigs), [normalizedConfigs]);
-  const configLookup = React26.useMemo(() => {
+  const prefixMap = React27.useMemo(() => buildPrefixMap(normalizedConfigs), [normalizedConfigs]);
+  const configLookup = React27.useMemo(() => {
     const lookup = /* @__PURE__ */ new Map();
     normalizedConfigs.forEach((config) => lookup.set(config.prefix, config));
     return lookup;
   }, [normalizedConfigs]);
-  const allowedOperators = React26.useMemo(() => operators.map((operator) => operator.value), [operators]);
+  const allowedOperators = React27.useMemo(() => operators.map((operator) => operator.value), [operators]);
   const displayError = errorMessage ?? fieldState?.error?.message;
   const hasError = Boolean(displayError);
   const isEditorReadOnly = mode === "display";
   const isEditorDisabled = disabled || loading || isEditorReadOnly;
-  const convertValueToContent = React26.useCallback(
+  const convertValueToContent = React27.useCallback(
     (input) => {
       if (!input) return "";
       const trimmed = input.trim();
@@ -10292,8 +10556,8 @@ var FormulaEditor = ({
     },
     [configLookup, prefixMap]
   );
-  const resolvedContent = React26.useMemo(() => convertValueToContent(value), [convertValueToContent, value]);
-  const extensions = React26.useMemo(
+  const resolvedContent = React27.useMemo(() => convertValueToContent(value), [convertValueToContent, value]);
+  const extensions = React27.useMemo(
     () => [
       StarterKit__default.default.configure({ bold: false, italic: false }),
       Token.configure({ configs: normalizedConfigs, onSelect: onSelectSuggestion }),
@@ -10325,11 +10589,11 @@ var FormulaEditor = ({
       }
     }
   });
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!editor) return;
     editor.setEditable(!isEditorDisabled);
   }, [editor, isEditorDisabled]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!editor || resolvedContent === void 0) return;
     if (ignorePropValueRef.current && typeof value === "string" && value === lastEmittedValueRef.current) {
       ignorePropValueRef.current = false;
@@ -10462,7 +10726,7 @@ function SortableRow({
     id: value,
     disabled: name === "columns.0.id"
   });
-  const style = React26__namespace.useMemo(
+  const style = React27__namespace.useMemo(
     () => ({
       transform: utilities.CSS.Transform.toString(transform),
       transition
@@ -10574,8 +10838,8 @@ var GridSettingsModal = ({
   onClose,
   onSaveColumns
 }) => {
-  const [isDragging, setIsDragging] = React26.useState(false);
-  const scrollRef = React26.useRef(null);
+  const [isDragging, setIsDragging] = React27.useState(false);
+  const scrollRef = React27.useRef(null);
   const form = reactHookForm.useForm({
     resolver: zod$1.zodResolver(GridSettingsSchema),
     defaultValues: { columns: currentColumns },
@@ -10587,7 +10851,7 @@ var GridSettingsModal = ({
     name: "columns",
     keyName: "fieldId"
   });
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (isOpen) {
       form.reset({ columns: currentColumns });
     }
@@ -10864,7 +11128,7 @@ function getCandidateWidths({
   }
   return DEVICE_SIZES;
 }
-var Image2 = React26__namespace.forwardRef(function Image3({
+var Image2 = React27__namespace.forwardRef(function Image3({
   src,
   alt,
   width,
@@ -10894,34 +11158,34 @@ var Image2 = React26__namespace.forwardRef(function Image3({
   } = imgProps;
   const widthNumber = toNumber(width);
   const heightNumber = toNumber(height);
-  React26__namespace.useEffect(() => {
+  React27__namespace.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 = React26__namespace.useMemo(
+  const candidateWidths = React27__namespace.useMemo(
     () => getCandidateWidths({ width: widthNumber, sizes, fill }),
     [fill, sizes, widthNumber]
   );
   const largestWidth = candidateWidths[candidateWidths.length - 1] ?? widthNumber ?? DEVICE_SIZES[DEVICE_SIZES.length - 1];
-  const computedSrc = React26__namespace.useMemo(() => {
+  const computedSrc = React27__namespace.useMemo(() => {
     if (unoptimized) {
       return src;
     }
     return loader({ src, width: largestWidth, quality });
   }, [largestWidth, loader, quality, src, unoptimized]);
-  const computedSrcSet = React26__namespace.useMemo(() => {
+  const computedSrcSet = React27__namespace.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] = React26__namespace.useState(false);
-  const internalRef = React26__namespace.useRef(null);
-  const setRefs = React26__namespace.useCallback(
+  const [isLoaded, setIsLoaded] = React27__namespace.useState(false);
+  const internalRef = React27__namespace.useRef(null);
+  const setRefs = React27__namespace.useCallback(
     (node) => {
       internalRef.current = node;
       if (!ref) {
@@ -10935,7 +11199,7 @@ var Image2 = React26__namespace.forwardRef(function Image3({
     },
     [ref]
   );
-  React26__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     const image = internalRef.current;
     if (!image) {
       return;
@@ -10947,7 +11211,7 @@ var Image2 = React26__namespace.forwardRef(function Image3({
       setIsLoaded(false);
     }
   }, [onLoadingComplete, src]);
-  const handleLoad = React26__namespace.useCallback(
+  const handleLoad = React27__namespace.useCallback(
     (event) => {
       setIsLoaded(true);
       onLoadProp?.(event);
@@ -10959,7 +11223,7 @@ var Image2 = React26__namespace.forwardRef(function Image3({
   const fetchPriority = priority ? "high" : fetchPriorityProp;
   const decoding = decodingProp ?? "async";
   const resolvedObjectFit = objectFit ?? (fill ? "cover" : void 0);
-  const wrapperStyle = React26__namespace.useMemo(
+  const wrapperStyle = React27__namespace.useMemo(
     () => ({
       position: "relative",
       display: fill ? "block" : "inline-block",
@@ -10969,7 +11233,7 @@ var Image2 = React26__namespace.forwardRef(function Image3({
     }),
     [fill, height, width]
   );
-  const imageStyle = React26__namespace.useMemo(
+  const imageStyle = React27__namespace.useMemo(
     () => ({
       width: fill ? "100%" : formatDimension(width) ?? void 0,
       height: fill ? "100%" : formatDimension(height) ?? void 0,
@@ -11118,7 +11382,7 @@ var InfoIcon = ({ size = "1em", className, ...props }) => {
     }
   );
 };
-var InfoIcon_default = React26__namespace.default.memo(InfoIcon);
+var InfoIcon_default = React27__namespace.default.memo(InfoIcon);
 var Navbar = ({
   className,
   title,
@@ -11143,7 +11407,7 @@ var Navbar = ({
 }) => {
   const { isMobile, isTablet, isDesktop } = useScreenSize_default();
   const Icon2 = lucideReact.CircleHelp;
-  const shouldShowSeparator = !separatorDisable && React26.isValidElement(searchButton);
+  const shouldShowSeparator = !separatorDisable && React27.isValidElement(searchButton);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
     {
@@ -11154,8 +11418,8 @@ var Navbar = ({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
           headImageURL !== "" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: headImageURL, alt: "", className: cn("w-full h-full", headImageURLClassName) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-            React26.isValidElement(title) ? title : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-xl font-bold", children: title }),
-            React26.isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-sm font-semibold", children: subTitle })
+            React27.isValidElement(title) ? title : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-xl font-bold", children: title }),
+            React27.isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-sm font-semibold", children: subTitle })
           ] }),
           tooltipTitle && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip2, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "text-white hover:opacity-80 ", children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon_default, { className: "w-4" }) }) }),
@@ -11186,10 +11450,10 @@ var Navbar = ({
                       ),
                       children: [
                         tooltipTitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                          React26.isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: 32, "aria-hidden": "true" }),
+                          React27.isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: 32, "aria-hidden": "true" }),
                           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: tooltipTitle })
                         ] }),
-                        React26.isValidElement(tooltipdescription) && tooltipdescription
+                        React27.isValidElement(tooltipdescription) && tooltipdescription
                       ]
                     }
                   ),
@@ -11244,13 +11508,13 @@ var Navbar = ({
             }
           ),
           shouldShowSeparator && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", className: "ml-1 w-[1px] h-10 bg-white" }),
-          React26.isValidElement(searchButton) ? searchButton : ""
+          React27.isValidElement(searchButton) ? searchButton : ""
         ] })
       ]
     }
   );
 };
-var navbar_default = React26__namespace.default.memo(Navbar);
+var navbar_default = React27__namespace.default.memo(Navbar);
 var usePreventPageLeaveStore = zustand.create((set) => ({
   isPreventing: false,
   setPreventing: (value) => set({ isPreventing: value })
@@ -11260,7 +11524,7 @@ var usePreventPageLeaveStore_default = usePreventPageLeaveStore;
 // src/components/prevent-page-leave/PreventPageLeave.tsx
 var PreventPageLeave = ({ children }) => {
   const { isPreventing } = usePreventPageLeaveStore();
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!isPreventing || typeof window === "undefined") {
       return;
     }
@@ -11278,7 +11542,7 @@ var PreventPageLeave = ({ children }) => {
 var PreventPageLeave_default = PreventPageLeave;
 var usePreventPageLeave = ({ isPrevening }) => {
   const setPreventing = usePreventPageLeaveStore_default((state) => state.setPreventing);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     setPreventing(isPrevening);
   }, [isPrevening, setPreventing]);
 };
@@ -11290,7 +11554,7 @@ var DefaultHeader = ({
   classNames,
   rightActions
 }) => {
-  const titleRef = React26__namespace.useRef(null);
+  const titleRef = React27__namespace.useRef(null);
   const isTruncated = useTruncated_default({ elementRef: titleRef });
   const textElement = title ? /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -11300,13 +11564,13 @@ var DefaultHeader = ({
       children: title
     }
   ) : null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start justify-between gap-3", classNames?.header), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start justify-between gap-1", classNames?.header), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 min-w-0", children: [
       icon ? /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: cn(
-            "w-10 h-10 rounded-full bg-sus-green-50 flex items-center justify-center",
+            "w-10 h-10 rounded-full bg-sus-green-50 flex items-start justify-center",
             classNames?.iconWrapper
           ),
           children: icon
@@ -11508,20 +11772,20 @@ var CropperModal = ({
   title,
   props
 }) => {
-  const [isLoading, setIsLoading] = React26.useState(false);
-  const [crop, setCrop] = React26.useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = React26.useState();
-  const [croppedAreaPixels, setCroppedAreaPixels] = React26.useState(null);
-  const handleClose = React26.useCallback(() => {
+  const [isLoading, setIsLoading] = React27.useState(false);
+  const [crop, setCrop] = React27.useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = React27.useState();
+  const [croppedAreaPixels, setCroppedAreaPixels] = React27.useState(null);
+  const handleClose = React27.useCallback(() => {
     onOpenChange(false);
   }, [onOpenChange]);
-  const handleCancel = React26.useCallback(() => {
+  const handleCancel = React27.useCallback(() => {
     if (onCancel) {
       onCancel();
     }
     handleClose();
   }, [handleClose, onCancel]);
-  const handleCropComplete = React26.useCallback((_, croppedAreaPixels2) => {
+  const handleCropComplete = React27.useCallback((_, croppedAreaPixels2) => {
     setCroppedAreaPixels(croppedAreaPixels2);
   }, []);
   const handleConfirm = async () => {
@@ -11629,7 +11893,7 @@ function isFragment(object) {
 var isValidText = (val) => ["string", "number"].includes(typeof val);
 function toArray(children, option = {}) {
   let ret = [];
-  React26__namespace.Children.forEach(children, (child) => {
+  React27__namespace.Children.forEach(children, (child) => {
     if ((child === void 0 || child === null) && !option.keepEmpty) {
       return;
     }
@@ -11643,9 +11907,9 @@ function toArray(children, option = {}) {
   });
   return ret;
 }
-var MeasureText = React26__namespace.forwardRef(({ style, children }, ref) => {
-  const spanRef = React26__namespace.useRef(null);
-  React26__namespace.useImperativeHandle(ref, () => ({
+var MeasureText = React27__namespace.forwardRef(({ style, children }, ref) => {
+  const spanRef = React27__namespace.useRef(null);
+  React27__namespace.useImperativeHandle(ref, () => ({
     isExceed: () => {
       const span = spanRef.current;
       return span.scrollHeight > span.clientHeight;
@@ -11703,19 +11967,19 @@ var lineClipStyle = {
 };
 function EllipsisMeasure(props) {
   const { enableMeasure, width, text, children, rows, expanded, miscDeps, onEllipsis } = props;
-  const nodeList = React26__namespace.useMemo(() => toArray(text), [text]);
-  const nodeLen = React26__namespace.useMemo(() => getNodesLen(nodeList), [text]);
-  const fullContent = React26__namespace.useMemo(() => children(nodeList, false), [text]);
-  const [ellipsisCutIndex, setEllipsisCutIndex] = React26__namespace.useState(null);
-  const cutMidRef = React26__namespace.useRef(null);
-  const measureWhiteSpaceRef = React26__namespace.useRef(null);
-  const needEllipsisRef = React26__namespace.useRef(null);
-  const descRowsEllipsisRef = React26__namespace.useRef(null);
-  const symbolRowEllipsisRef = React26__namespace.useRef(null);
-  const [canEllipsis, setCanEllipsis] = React26__namespace.useState(false);
-  const [needEllipsis, setNeedEllipsis] = React26__namespace.useState(STATUS_MEASURE_NONE);
-  const [ellipsisHeight, setEllipsisHeight] = React26__namespace.useState(0);
-  const [parentWhiteSpace, setParentWhiteSpace] = React26__namespace.useState(null);
+  const nodeList = React27__namespace.useMemo(() => toArray(text), [text]);
+  const nodeLen = React27__namespace.useMemo(() => getNodesLen(nodeList), [text]);
+  const fullContent = React27__namespace.useMemo(() => children(nodeList, false), [text]);
+  const [ellipsisCutIndex, setEllipsisCutIndex] = React27__namespace.useState(null);
+  const cutMidRef = React27__namespace.useRef(null);
+  const measureWhiteSpaceRef = React27__namespace.useRef(null);
+  const needEllipsisRef = React27__namespace.useRef(null);
+  const descRowsEllipsisRef = React27__namespace.useRef(null);
+  const symbolRowEllipsisRef = React27__namespace.useRef(null);
+  const [canEllipsis, setCanEllipsis] = React27__namespace.useState(false);
+  const [needEllipsis, setNeedEllipsis] = React27__namespace.useState(STATUS_MEASURE_NONE);
+  const [ellipsisHeight, setEllipsisHeight] = React27__namespace.useState(0);
+  const [parentWhiteSpace, setParentWhiteSpace] = React27__namespace.useState(null);
   useIsomorphicLayoutEffect(() => {
     if (enableMeasure && width && nodeLen) {
       setNeedEllipsis(STATUS_MEASURE_PREPARE);
@@ -11758,7 +12022,7 @@ function EllipsisMeasure(props) {
       setEllipsisCutIndex(isOverflow ? [minIndex, targetMidIndex] : [targetMidIndex, maxIndex]);
     }
   }, [ellipsisCutIndex, cutMidIndex]);
-  const finalContent = React26__namespace.useMemo(() => {
+  const finalContent = React27__namespace.useMemo(() => {
     if (!enableMeasure) {
       return children(nodeList, false);
     }
@@ -11849,10 +12113,10 @@ var Truncated = ({
   tooltipProps,
   tooltipContentProps
 }) => {
-  const elementRef = React26__namespace.useRef(null);
-  const [open, setOpen] = React26__namespace.useState(false);
-  const [isTruncated, setIsTruncated] = React26__namespace.useState(false);
-  const [measureWidth, setMeasureWidth] = React26__namespace.useState(0);
+  const elementRef = React27__namespace.useRef(null);
+  const [open, setOpen] = React27__namespace.useState(false);
+  const [isTruncated, setIsTruncated] = React27__namespace.useState(false);
+  const [measureWidth, setMeasureWidth] = React27__namespace.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;
@@ -11877,13 +12141,13 @@ var Truncated = ({
       setIsTruncated(false);
     }
   }, [enableMeasure]);
-  const truncationClass = React26__namespace.useMemo(() => {
+  const truncationClass = React27__namespace.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 = React26__namespace.useMemo(() => {
+  const clampedStyle = React27__namespace.useMemo(() => {
     if (!lineClampLines) return style;
     return {
       ...style,
@@ -11945,7 +12209,7 @@ var Truncated = ({
   );
 };
 var truncated_default = Truncated;
-var InputPrimitive2 = React26__namespace.forwardRef(
+var InputPrimitive2 = React27__namespace.forwardRef(
   ({ className, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -11984,7 +12248,7 @@ var inputVariants2 = classVarianceAuthority.cva("", {
     appearance: "filled"
   }
 });
-var Input2 = React26__namespace.forwardRef(
+var Input2 = React27__namespace.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -12017,8 +12281,8 @@ var Input2 = React26__namespace.forwardRef(
       onChange: onChangeProp
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React26__namespace.useId();
-    const handleChange = React26__namespace.useCallback(
+    const messageId = React27__namespace.useId();
+    const handleChange = React27__namespace.useCallback(
       (event) => {
         onChangeProp?.(event);
         onValueChange?.(event.target.value);
@@ -12146,8 +12410,8 @@ var ActionMenu = ({
   actionButtonClassName,
   separatorClassName
 }) => {
-  const [open, setOpen] = React26.useState(false);
-  const isAllowed = React26.useCallback(
+  const [open, setOpen] = React27.useState(false);
+  const isAllowed = React27.useCallback(
     (requiredPermission) => {
       if (!checkPermissionFunc || requiredPermission === void 0) {
         return true;
@@ -12156,7 +12420,7 @@ var ActionMenu = ({
     },
     [checkPermissionFunc]
   );
-  const filteredButtons = React26.useMemo(() => {
+  const filteredButtons = React27.useMemo(() => {
     return buttons.filter((btn) => isAllowed(btn.requiredPermission));
   }, [buttons, isAllowed]);
   if (buttons.length === 0) {
@@ -12412,13 +12676,13 @@ var useFieldNames = ({
   fieldNames
 }) => {
   const { label: labelFieldKey = "label", value: valueFieldKey = "value" } = fieldNames || {};
-  const getLabelField = React26__namespace.default.useCallback(
+  const getLabelField = React27__namespace.default.useCallback(
     (option) => {
       return option?.[labelFieldKey];
     },
     [labelFieldKey]
   );
-  const getValueField = React26__namespace.default.useCallback(
+  const getValueField = React27__namespace.default.useCallback(
     (option) => {
       return option?.[valueFieldKey];
     },
@@ -12450,11 +12714,11 @@ var VirtualizedCommand = ({
   onFocus
 }) => {
   const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
-  const internalOptions = React26__namespace.useMemo(() => options ?? [], [options]);
-  const [filteredOptions, setFilteredOptions] = React26__namespace.useState(internalOptions);
-  const [focusedIndex, setFocusedIndex] = React26__namespace.useState(0);
-  const [isKeyboardNavActive, setIsKeyboardNavActive] = React26__namespace.useState(false);
-  const parentRef = React26__namespace.useRef(null);
+  const internalOptions = React27__namespace.useMemo(() => options ?? [], [options]);
+  const [filteredOptions, setFilteredOptions] = React27__namespace.useState(internalOptions);
+  const [focusedIndex, setFocusedIndex] = React27__namespace.useState(0);
+  const [isKeyboardNavActive, setIsKeyboardNavActive] = React27__namespace.useState(false);
+  const parentRef = React27__namespace.useRef(null);
   const virtualizer = reactVirtual.useVirtualizer({
     count: filteredOptions.length,
     getScrollElement: () => parentRef.current,
@@ -12462,14 +12726,14 @@ var VirtualizedCommand = ({
     overscan: 2
   });
   const virtualOptions = virtualizer.getVirtualItems();
-  const dynamicHeight = React26__namespace.useMemo(() => {
+  const dynamicHeight = React27__namespace.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 = React26__namespace.useCallback(
+  const scrollToIndex = React27__namespace.useCallback(
     (index) => {
       virtualizer.scrollToIndex(index, {
         align: "center"
@@ -12477,7 +12741,7 @@ var VirtualizedCommand = ({
     },
     [virtualizer]
   );
-  const handleSearch = React26__namespace.useCallback(
+  const handleSearch = React27__namespace.useCallback(
     (search) => {
       setIsKeyboardNavActive(false);
       setFilteredOptions(
@@ -12492,7 +12756,7 @@ var VirtualizedCommand = ({
     },
     [filterOption, getLabelField, internalOptions]
   );
-  const handleKeyDown = React26__namespace.useCallback(
+  const handleKeyDown = React27__namespace.useCallback(
     (event) => {
       switch (event.key) {
         case "ArrowDown": {
@@ -12527,7 +12791,7 @@ var VirtualizedCommand = ({
     },
     [filteredOptions, focusedIndex, getValueField, onSelect, scrollToIndex]
   );
-  React26__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (value) {
       const option = filteredOptions.find((option2) => {
         const optionValue = getValueField(option2);
@@ -12654,13 +12918,13 @@ var ComboboxInner = ({
     defaultValue,
     value
   });
-  const currentSelectedOption = React26__namespace.useMemo(() => {
+  const currentSelectedOption = React27__namespace.useMemo(() => {
     return options?.find((option) => {
       const optionValue = getValueField(option);
       return optionValue === selectedValue;
     });
   }, [getValueField, options, selectedValue]);
-  const renderValue = React26__namespace.useMemo(() => {
+  const renderValue = React27__namespace.useMemo(() => {
     if (!selectedValue) return placeholder2;
     if (currentSelectedOption) {
       return getLabelField(currentSelectedOption);
@@ -12670,7 +12934,7 @@ var ComboboxInner = ({
     }
     return null;
   }, [currentSelectedOption, getLabelField, placeholder2, selectedValue, showValueWhenNoMatch]);
-  const handleSelect = React26__namespace.useCallback(
+  const handleSelect = React27__namespace.useCallback(
     (selected, option) => {
       setSelectedValue(selected);
       setOpenPopover(false);
@@ -12683,7 +12947,7 @@ var ComboboxInner = ({
     },
     [onOpenChange, onSelect, setOpenPopover, setSelectedValue]
   );
-  const handleOpenPopover = React26__namespace.useCallback(
+  const handleOpenPopover = React27__namespace.useCallback(
     (isOpen) => {
       if (disabled) return;
       setOpenPopover(isOpen);
@@ -12693,7 +12957,7 @@ var ComboboxInner = ({
     },
     [disabled, onOpenChange, setOpenPopover]
   );
-  const handleClear = React26__namespace.useCallback(
+  const handleClear = React27__namespace.useCallback(
     (event) => {
       event.stopPropagation();
       setSelectedValue(void 0);
@@ -12782,7 +13046,7 @@ var ComboboxInner = ({
     )
   ] });
 };
-var Combobox = React26__namespace.forwardRef(ComboboxInner);
+var Combobox = React27__namespace.forwardRef(ComboboxInner);
 var Combobox_default = Combobox;
 var TruncatedMouseEnterDiv = ({
   value,
@@ -12791,8 +13055,8 @@ var TruncatedMouseEnterDiv = ({
   tooltipContentProps,
   arrowClassName
 }) => {
-  const textRef = React26.useRef(null);
-  const [isTruncated, setIsTruncated] = React26.useState(false);
+  const textRef = React27.useRef(null);
+  const [isTruncated, setIsTruncated] = React27.useState(false);
   const checkTruncation = () => {
     if (textRef.current) {
       const { scrollWidth, clientWidth } = textRef.current;
@@ -12852,8 +13116,8 @@ var TabSelect = ({
   separatorClassName,
   ...rest
 }) => {
-  const [selected, setSelected] = React26.useState(items[0]);
-  React26.useEffect(() => {
+  const [selected, setSelected] = React27.useState(items[0]);
+  React27.useEffect(() => {
     onSelectTab(selected.id);
   }, [onSelectTab, selected]);
   if (items.length === 0) {
@@ -13070,6 +13334,7 @@ exports.TruncatedMouseEnterDiv = truncatedMouseEnterDiv_default;
 exports.UI = ui_exports;
 exports.UserAloneIcon = user_alone_default;
 exports.UserFriendIcon = user_friend_default;
+exports.UserGroupIcon = user_group_default;
 exports.UserIcon = user_default;
 exports.VirtualizedCommand = VirtualizedCommand_default;
 exports.booleanToSelectValue = booleanToSelectValue;
@@ -13096,6 +13361,7 @@ exports.splitOperators = splitOperators;
 exports.stripNullishObject = stripNullishObject;
 exports.throttle = throttle;
 exports.tokenizeFormulaString = tokenizeFormulaString;
+exports.useBindRef = useBindRef_default;
 exports.useControllableState = useControllableState_default;
 exports.useDraftGuardStore = useDraftGuardStore;
 exports.useFormField = useFormField;