@sustaina/shared-ui 1.33.1 → 1.34.0

package/dist/index.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var AccordionPrimitive = require('@radix-ui/react-accordion');
 var clsx2 = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var React4 = require('react');
+var AccordionPrimitive = require('@radix-ui/react-accordion');
+var React26 = require('react');
 var lucideReact = require('lucide-react');
 var reactDom = require('react-dom');
 var SelectPrimitive = require('@radix-ui/react-select');
@@ -82,9 +82,9 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
-var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
+var React26__namespace = /*#__PURE__*/_interopNamespace(React26);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
@@ -777,6 +777,120 @@ var SuiWarningIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
   }
 );
 var warning_default = SuiWarningIcon;
+var TrashIcon = ({
+  size = 16,
+  color = "currentColor",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 17 15",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    fill: "none",
+    className,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_336_302483)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M3.49371 2.12043C3.38318 1.44249 3.66212 0.708651 4.43068 0.529533C4.94459 0.409578 7.77168 0.42749 8.38456 0.492081C9.25207 0.583811 9.64966 1.36813 9.5125 2.12097C10.3748 2.22627 11.9484 1.85067 12.6087 2.44664C13.1053 2.89498 13.1452 3.75638 12.64 4.21232C12.2707 4.54558 12.1422 4.28179 12.0664 4.92282C11.7412 7.68938 11.6509 10.4907 11.3494 13.2605C11.2452 13.9135 10.7718 14.3401 10.0646 14.3895C7.73175 14.5534 5.1836 14.2619 2.8276 14.3873C2.09203 14.2587 1.75116 13.8364 1.64178 13.1655L0.878435 4.54558C0.710025 4.38221 0.481427 4.33281 0.310702 4.15532C-0.221151 3.60006 -0.0434807 2.66593 0.639999 2.29358C0.702502 2.25938 0.998811 2.12043 1.03411 2.12043H3.49371ZM4.30394 2.12043H8.70228C8.71964 1.8333 8.70691 1.36813 8.32321 1.30951C7.19122 1.38116 5.90586 1.20367 4.79238 1.30246C4.28831 1.34696 4.29815 1.71931 4.30394 2.12043ZM12.0415 3.0589C12.0172 3.03068 11.8812 2.9574 11.8419 2.94926L1.26329 2.93243C0.749379 2.95794 0.749379 3.72598 1.26329 3.75149H11.7429C12.1029 3.75312 12.2429 3.29338 12.0415 3.0589ZM11.2487 4.56295H1.75753L2.51508 13.1612C2.5608 13.4597 2.68754 13.5498 2.9989 13.5759C5.22817 13.762 7.7468 13.4293 10.0073 13.5759L10.3823 13.4391L11.2487 4.56295Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M4.22952 5.50209C4.41761 5.72137 4.34006 6.27067 4.36263 6.54477C4.51599 8.36961 4.73649 10.3719 4.77121 12.1892C4.78568 12.9404 3.98125 12.8953 3.90254 12.4047C3.84698 10.417 3.54836 8.42443 3.49164 6.43947C3.48586 6.23159 3.45576 5.67469 3.54894 5.52542C3.66411 5.34088 4.08426 5.33274 4.22952 5.50263V5.50209Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M9.43711 5.50146C9.55575 5.63933 9.52045 6.22879 9.51466 6.43776C9.45852 8.42272 9.15932 10.4153 9.10376 12.4029C9.02447 12.8936 8.21946 12.9381 8.23509 12.1875C8.27213 10.3681 8.48973 8.37007 8.64367 6.54306C8.67492 6.17234 8.50941 5.28598 9.18941 5.37771C9.24497 5.38531 9.40412 5.46238 9.43711 5.50092V5.50146Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M6.83313 5.50252C6.90547 5.58611 6.90142 5.68218 6.91068 5.78314C7.10224 7.89891 6.76253 10.266 6.90837 12.4083C6.88985 12.8822 6.11551 12.8806 6.09814 12.4083L6.15312 5.52478C6.31575 5.34783 6.6734 5.31689 6.83313 5.50252Z",
+            fill: color
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_3678_200811", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "17", height: "15", fill: "white", transform: "translate(0.728516 0.726562)" }) }) })
+    ]
+  }
+);
+var trash_default = TrashIcon;
+var AuditFooter = ({
+  createdAt,
+  createdBy,
+  updatedAt,
+  updatedBy,
+  onDelete,
+  canDelete = true,
+  emptyValue = "-",
+  labels,
+  classNames,
+  formatters,
+  deleteAriaLabel = "Delete",
+  deleteIcon
+}) => {
+  const resolvedLabels = {
+    createdOn: "Created on :",
+    createdAtTime: "at Time :",
+    createdBy: "by :",
+    updatedOn: "Last Update :",
+    updatedAtTime: "at Time :",
+    updatedBy: "by :",
+    ...labels
+  };
+  const dateFormatter = formatters?.date ?? ((value) => formatISODate(value, "DD/MM/YYYY"));
+  const timeFormatter = formatters?.time ?? ((value) => formatISODate(value, "H:i"));
+  const userFormatter = formatters?.user ?? ((value) => value ?? emptyValue);
+  const resolvedDeleteIcon = deleteIcon ?? /* @__PURE__ */ jsxRuntime.jsx(trash_default, { className: "w-5 h-5" });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full h-14 mt-12 justify-between items-end px-3", classNames?.root), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "grid grid-cols-[auto_1fr_auto_1fr] gap-x-3 gap-y-1 text-[10px]",
+          classNames?.grid
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.createdOn }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: classNames?.value, children: createdAt ? dateFormatter(createdAt) : emptyValue }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.createdAtTime }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: classNames?.value, children: createdAt ? timeFormatter(createdAt) : emptyValue }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.createdBy }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("col-span-3", classNames?.value), children: userFormatter(createdBy) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.updatedOn }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: classNames?.value, children: updatedAt ? dateFormatter(updatedAt) : emptyValue }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.updatedAtTime }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: classNames?.value, children: updatedAt ? timeFormatter(updatedAt) : emptyValue }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.updatedBy }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("col-span-3", classNames?.value), children: userFormatter(updatedBy) })
+        ]
+      }
+    ),
+    onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: canDelete ? cn("w-5 h-5 cursor-pointer text-red-500", classNames?.deleteButton) : cn("w-5 h-5 text-gray-300 cursor-not-allowed", classNames?.deleteButtonDisabled),
+        onClick: canDelete ? onDelete : void 0,
+        "aria-label": deleteAriaLabel,
+        role: "button",
+        children: resolvedDeleteIcon
+      }
+    )
+  ] });
+};
 function Accordion({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { "data-slot": "accordion", ...props });
 }
@@ -820,7 +934,7 @@ function AccordionContent({
   );
 }
 var ExpandCollapse = ({ title, children, portalId }) => {
-  const [isOpen, setIsOpen] = React4.useState(false);
+  const [isOpen, setIsOpen] = React26.useState(false);
   const Panel = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -930,31 +1044,31 @@ function makeNewRow(field) {
   };
 }
 function useAdvanceSearch({ fields, limitRows }) {
-  const [rows, setRows] = React4.useState([makeNewRow(fields[0])]);
-  const updateRows = React4.useCallback((next) => {
+  const [rows, setRows] = React26.useState([makeNewRow(fields[0])]);
+  const updateRows = React26.useCallback((next) => {
     setRows(next);
   }, []);
-  const operatorsForField = React4.useCallback(
+  const operatorsForField = React26.useCallback(
     (fieldName) => {
       const t = getFieldType(fields, fieldName);
       return OPERATOR_MAP[t];
     },
     [fields]
   );
-  const addRow = React4.useCallback(() => {
+  const addRow = React26.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 = React4.useCallback(
+  const removeRow = React26.useCallback(
     (id) => {
       if (rows.length === 1) return;
       updateRows(rows.filter((r) => r.id !== id));
     },
     [rows, updateRows]
   );
-  const clearRow = React4.useCallback(
+  const clearRow = React26.useCallback(
     (id) => {
       updateRows(
         rows.map((r) => {
@@ -987,10 +1101,10 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, fields, updateRows]
   );
-  const clearAllRow = React4.useCallback(() => {
+  const clearAllRow = React26.useCallback(() => {
     updateRows([makeNewRow(fields[0])]);
   }, [fields, updateRows]);
-  const changeField = React4.useCallback(
+  const changeField = React26.useCallback(
     (id, fieldName) => {
       updateRows(
         rows.map((r) => {
@@ -1002,7 +1116,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, fields, updateRows]
   );
-  const changeOperator = React4.useCallback(
+  const changeOperator = React26.useCallback(
     (id, operator) => {
       updateRows(
         rows.map((r) => {
@@ -1036,7 +1150,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, updateRows]
   );
-  const changeValue = React4.useCallback(
+  const changeValue = React26.useCallback(
     (id, which, val) => {
       updateRows(
         rows.map((r) => {
@@ -1048,7 +1162,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, updateRows]
   );
-  const fieldOptions = React4.useMemo(
+  const fieldOptions = React26.useMemo(
     () => fields.map((f) => ({
       value: f.name,
       label: f.label ?? f.name
@@ -1243,7 +1357,7 @@ var OPERATOR_LABEL = {
   containsAll: "Contains all of"
 };
 var OperatorSelect = ({ row, operators, onChangeOperator, error }) => {
-  React4__namespace.default.useEffect(() => {
+  React26__namespace.default.useEffect(() => {
     if (!operators.length) return;
     if (!operators.includes(row.operator)) {
       onChangeOperator(operators[0]);
@@ -1279,15 +1393,15 @@ function Label2({ className, ...props }) {
   );
 }
 var Form = reactHookForm.FormProvider;
-var FormFieldContext = React4__namespace.createContext({});
+var FormFieldContext = React26__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 = React4__namespace.useContext(FormFieldContext);
-  const itemContext = React4__namespace.useContext(FormItemContext);
+  const fieldContext = React26__namespace.useContext(FormFieldContext);
+  const itemContext = React26__namespace.useContext(FormItemContext);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1304,9 +1418,9 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React4__namespace.createContext({});
+var FormItemContext = React26__namespace.createContext({});
 function FormItem({ className, ...props }) {
-  const id = React4__namespace.useId();
+  const id = React26__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 }) {
@@ -1410,7 +1524,7 @@ var Spinner = ({ className, variant, size = "default", ...props }) => /* @__PURE
     ]
   }
 );
-var InputPrimitive = React4__namespace.forwardRef(
+var InputPrimitive = React26__namespace.forwardRef(
   ({ className, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -1449,7 +1563,7 @@ var inputVariants = classVarianceAuthority.cva("", {
     appearance: "filled"
   }
 });
-var Input = React4__namespace.forwardRef(
+var Input = React26__namespace.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -1482,8 +1596,8 @@ var Input = React4__namespace.forwardRef(
       onChange: onChangeProp
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React4__namespace.useId();
-    const handleChange = React4__namespace.useCallback(
+    const messageId = React26__namespace.useId();
+    const handleChange = React26__namespace.useCallback(
       (event) => {
         onChangeProp?.(event);
         onValueChange?.(event.target.value);
@@ -1826,20 +1940,20 @@ function DatePicker({
   className,
   ...props
 }) {
-  const today = React4__namespace.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const [displayed, setDisplayed] = React4__namespace.useState(
+  const today = React26__namespace.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [displayed, setDisplayed] = React26__namespace.useState(
     selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date()
   );
   minDate = clampToDay(minDate);
   maxDate = clampToDay(maxDate);
-  const disabledSet = React4__namespace.useMemo(() => {
+  const disabledSet = React26__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 = React4__namespace.useMemo(() => {
+  const weekdays = React26__namespace.useMemo(() => {
     const labels = [];
     for (let i = 0; i < 7; i++) {
       const idx = i;
@@ -1848,7 +1962,7 @@ function DatePicker({
     }
     return labels;
   }, [callbacks]);
-  const grid = React4__namespace.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
+  const grid = React26__namespace.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
   const isDateDisabled = (date) => {
     const d = startOfDay(date);
     if (minDate && d < minDate) return true;
@@ -1858,7 +1972,7 @@ function DatePicker({
   };
   const minYear = minDate?.getFullYear();
   const maxYear = maxDate?.getFullYear();
-  const getMonthLabel = React4__namespace.useCallback(
+  const getMonthLabel = React26__namespace.useCallback(
     (year, monthIndex) => {
       const label = callbacks?.monthLabel?.(year, monthIndex);
       if (label === null || label === void 0) {
@@ -1868,7 +1982,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const getYearLabel = React4__namespace.useCallback(
+  const getYearLabel = React26__namespace.useCallback(
     (year) => {
       const label = callbacks?.yearLabel?.(year);
       if (label === null || label === void 0) return String(year);
@@ -1876,7 +1990,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const clampMonthToBounds = React4__namespace.useCallback(
+  const clampMonthToBounds = React26__namespace.useCallback(
     (year, monthIndex) => {
       let output = monthIndex;
       if (typeof minYear === "number" && year === minYear && minDate) {
@@ -1891,7 +2005,7 @@ function DatePicker({
     },
     [maxDate, minDate, maxYear, minYear]
   );
-  const yearOptions = React4__namespace.useMemo(() => {
+  const yearOptions = React26__namespace.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : displayYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : displayYear + fallbackWindow;
@@ -1912,7 +2026,7 @@ function DatePicker({
     }
     return years;
   }, [displayYear, maxYear, minYear, selectedDate]);
-  const monthOptions = React4__namespace.useMemo(() => {
+  const monthOptions = React26__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 {
@@ -1931,7 +2045,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 = React4__namespace.useCallback((nextValue) => {
+  const handleMonthSelect = React26__namespace.useCallback((nextValue) => {
     const nextMonth = Number.parseInt(nextValue, 10);
     if (Number.isNaN(nextMonth)) return;
     setDisplayed((prev) => {
@@ -1941,7 +2055,7 @@ function DatePicker({
       return next;
     });
   }, []);
-  const handleYearSelect = React4__namespace.useCallback(
+  const handleYearSelect = React26__namespace.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -2089,14 +2203,14 @@ var DatePicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React4__namespace.default.useState(false);
-  const parser = React4__namespace.default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
-  const outputFormatter = React4__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
-  const labelFormatter = React4__namespace.default.useMemo(
+  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(
     () => displayFormatter ?? defaultDisplayFormatter,
     [displayFormatter]
   );
-  const parsedValue = React4__namespace.default.useMemo(() => {
+  const parsedValue = React26__namespace.default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return value;
     const parsed = parser(value);
@@ -2105,26 +2219,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 = React4__namespace.default.useCallback(() => setOpen(false), []);
-  const emitChange = React4__namespace.default.useCallback(
+  const handleClose = React26__namespace.default.useCallback(() => setOpen(false), []);
+  const emitChange = React26__namespace.default.useCallback(
     (next) => {
       onChange?.(next);
       onValueChange?.(next ? outputFormatter(next) : void 0);
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React4__namespace.default.useCallback(
+  const handleSelect = React26__namespace.default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React4__namespace.default.useCallback(() => {
+  const handleClear = React26__namespace.default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React4__namespace.default.useCallback(
+  const handleOpenChange = React26__namespace.default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -2314,15 +2428,15 @@ function MonthCal({
   onYearBackward,
   onYearForward
 }) {
-  const today = React4__namespace.useMemo(() => {
+  const today = React26__namespace.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     now.setDate(1);
     now.setHours(0, 0, 0, 0);
     return now;
   }, []);
-  const selectedMonthDate = React4__namespace.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
-  const min = React4__namespace.useMemo(() => normalizeMonth(minDate), [minDate]);
-  const max = React4__namespace.useMemo(() => normalizeMonth(maxDate), [maxDate]);
+  const selectedMonthDate = React26__namespace.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
+  const min = React26__namespace.useMemo(() => normalizeMonth(minDate), [minDate]);
+  const max = React26__namespace.useMemo(() => normalizeMonth(maxDate), [maxDate]);
   let effectiveMin = min;
   if (min && max && min > max) {
     effectiveMin = max;
@@ -2331,10 +2445,10 @@ function MonthCal({
   const minMonth = effectiveMin?.getMonth();
   const maxYear = max?.getFullYear();
   const maxMonth = max?.getMonth();
-  const [menuYear, setMenuYear] = React4__namespace.useState(
+  const [menuYear, setMenuYear] = React26__namespace.useState(
     () => selectedMonthDate?.getFullYear() ?? today.getFullYear()
   );
-  React4__namespace.useEffect(() => {
+  React26__namespace.useEffect(() => {
     if (selectedMonthDate) {
       const year = selectedMonthDate.getFullYear();
       if (year !== menuYear) {
@@ -2342,7 +2456,7 @@ function MonthCal({
       }
     }
   }, [selectedMonthDate, menuYear]);
-  React4__namespace.useEffect(() => {
+  React26__namespace.useEffect(() => {
     if (typeof minYear === "number" && menuYear < minYear) {
       setMenuYear(minYear);
       return;
@@ -2353,7 +2467,7 @@ function MonthCal({
   }, [minYear, maxYear, menuYear]);
   const disablePrevYear = typeof minYear === "number" ? menuYear <= minYear : false;
   const disableNextYear = typeof maxYear === "number" ? menuYear >= maxYear : false;
-  const yearOptions = React4__namespace.useMemo(() => {
+  const yearOptions = React26__namespace.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : menuYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : menuYear + fallbackWindow;
@@ -2367,7 +2481,7 @@ function MonthCal({
     }
     return years;
   }, [maxYear, menuYear, minYear]);
-  const formatYearLabel = React4__namespace.useCallback(
+  const formatYearLabel = React26__namespace.useCallback(
     (year) => {
       const raw = callbacks?.yearLabel?.(year);
       if (raw === null || raw === void 0) return String(year);
@@ -2375,7 +2489,7 @@ function MonthCal({
     },
     [callbacks]
   );
-  const handleYearSelect = React4__namespace.useCallback(
+  const handleYearSelect = React26__namespace.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -2385,7 +2499,7 @@ function MonthCal({
     },
     [maxYear, minYear]
   );
-  const disabledPairs = React4__namespace.useMemo(() => {
+  const disabledPairs = React26__namespace.useMemo(() => {
     if (!disabledDates?.length) return [];
     const pairs = [];
     disabledDates.forEach((date) => {
@@ -2530,14 +2644,14 @@ var MonthPicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React4__namespace.default.useState(false);
-  const parser = React4__namespace.default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
-  const outputFormatter = React4__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
-  const labelFormatter = React4__namespace.default.useMemo(
+  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(
     () => displayFormatter ?? defaultDisplayFormatter2,
     [displayFormatter]
   );
-  const parsedValue = React4__namespace.default.useMemo(() => {
+  const parsedValue = React26__namespace.default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return normalizeMonth2(value);
     if (typeof value === "string") {
@@ -2549,8 +2663,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 = React4__namespace.default.useCallback(() => setOpen(false), []);
-  const emitChange = React4__namespace.default.useCallback(
+  const handleClose = React26__namespace.default.useCallback(() => setOpen(false), []);
+  const emitChange = React26__namespace.default.useCallback(
     (next) => {
       const normalized = next ? normalizeMonth2(next) : void 0;
       onChange?.(normalized);
@@ -2558,18 +2672,18 @@ var MonthPicker2 = ({
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React4__namespace.default.useCallback(
+  const handleSelect = React26__namespace.default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React4__namespace.default.useCallback(() => {
+  const handleClear = React26__namespace.default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React4__namespace.default.useCallback(
+  const handleOpenChange = React26__namespace.default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -2780,23 +2894,23 @@ var LookupSelect = ({
   dropdownPortalId,
   multiple = false
 }) => {
-  const [inputValue, setInputValue] = React4.useState("");
-  const inputRef = React4.useRef(null);
-  const [suggestions, setSuggestions] = React4.useState([]);
-  const [optionLabels, setOptionLabels] = React4.useState({});
-  const [loading, setLoading] = React4.useState(false);
-  const [fetchError, setFetchError] = React4.useState(null);
-  const [isDropdownOpen, setIsDropdownOpen] = React4.useState(false);
-  const containerRef = React4.useRef(null);
-  const fetchDelayRef = React4.useRef(null);
-  const requestIdRef = React4.useRef(0);
-  const [dropdownStyles, setDropdownStyles] = React4.useState();
-  const dropdownContentRef = React4.useRef(null);
-  const assignDropdownContentRef = React4.useCallback((node) => {
+  const [inputValue, setInputValue] = React26.useState("");
+  const inputRef = React26.useRef(null);
+  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) => {
     dropdownContentRef.current = node;
   }, []);
-  const [activeSuggestionIndex, setActiveSuggestionIndex] = React4.useState(-1);
-  const dropdownPortalElement = React4.useMemo(() => {
+  const [activeSuggestionIndex, setActiveSuggestionIndex] = React26.useState(-1);
+  const dropdownPortalElement = React26.useMemo(() => {
     if (typeof document === "undefined") return null;
     if (dropdownPortalId) {
       const element = document.getElementById(dropdownPortalId);
@@ -2807,7 +2921,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 = React4.useCallback((options) => {
+  const upsertOptionLabels = React26.useCallback((options) => {
     setOptionLabels((prev) => {
       let next = null;
       options.forEach((opt) => {
@@ -2820,7 +2934,7 @@ var LookupSelect = ({
       return next ?? prev;
     });
   }, []);
-  const addTag = React4.useCallback(
+  const addTag = React26.useCallback(
     (val) => {
       const trimmed = val.trim();
       if (!trimmed) return;
@@ -2837,7 +2951,7 @@ var LookupSelect = ({
     },
     [value, onChange, maxTags, multiple]
   );
-  const removeTag = React4.useCallback(
+  const removeTag = React26.useCallback(
     (index) => {
       if (index < 0) return;
       const newTags = value.filter((_, i) => i !== index);
@@ -2845,14 +2959,14 @@ var LookupSelect = ({
     },
     [value, onChange]
   );
-  const handleClear = React4.useCallback(() => {
+  const handleClear = React26.useCallback(() => {
     setInputValue("");
     setSuggestions([]);
     setIsDropdownOpen(false);
     setFetchError(null);
     if (onClear) onClear();
   }, [onClear]);
-  const handleSuggestionSelect = React4.useCallback(
+  const handleSuggestionSelect = React26.useCallback(
     (option) => {
       upsertOptionLabels([option]);
       addTag(option.value);
@@ -2867,7 +2981,7 @@ var LookupSelect = ({
     },
     [addTag, multiple, upsertOptionLabels]
   );
-  const handleKeyDown = React4.useCallback(
+  const handleKeyDown = React26.useCallback(
     (e) => {
       if (e.key === "ArrowDown" && suggestions.length > 0) {
         e.preventDefault();
@@ -2894,7 +3008,7 @@ var LookupSelect = ({
     },
     [suggestions, activeSuggestionIndex, handleSuggestionSelect, inputValue, removeTag, value.length]
   );
-  const updateDropdownPosition = React4.useCallback(() => {
+  const updateDropdownPosition = React26.useCallback(() => {
     if (!dropdownPortalElement || !containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     setDropdownStyles({
@@ -2905,7 +3019,7 @@ var LookupSelect = ({
       zIndex: 50
     });
   }, [dropdownPortalElement]);
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (!fetchSuggestions) return;
     if (fetchDelayRef.current) {
       clearTimeout(fetchDelayRef.current);
@@ -2946,7 +3060,7 @@ var LookupSelect = ({
       }
     };
   }, [inputValue, fetchSuggestions, suggestionDebounce, upsertOptionLabels]);
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (!fetchSuggestions) return;
     if (value.length === 0) return;
     const unresolvedValues = value.filter((v) => !optionLabels[v]);
@@ -2956,7 +3070,7 @@ var LookupSelect = ({
     }).catch(() => {
     });
   }, [value, fetchSuggestions, optionLabels, upsertOptionLabels]);
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     const handleDocumentClick = (event) => {
       const target = event.target;
       if (containerRef.current?.contains(target)) return;
@@ -2968,11 +3082,11 @@ var LookupSelect = ({
       document.removeEventListener("mousedown", handleDocumentClick);
     };
   }, []);
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (!limitReached) return;
     setIsDropdownOpen(false);
   }, [limitReached]);
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (!dropdownPortalElement) return;
     if (!isDropdownOpen) return;
     updateDropdownPosition();
@@ -2984,7 +3098,7 @@ var LookupSelect = ({
       window.removeEventListener("scroll", handleReposition, true);
     };
   }, [dropdownPortalElement, isDropdownOpen, updateDropdownPosition]);
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (suggestions.length === 0) {
       setActiveSuggestionIndex(-1);
       return;
@@ -3819,7 +3933,7 @@ var AdvanceSearch = ({
   shortDateFormat,
   filterFieldMap = FILTER_FIELD_MAP
 }) => {
-  const fieldsData = React4.useMemo(() => {
+  const fieldsData = React26.useMemo(() => {
     if (fields.length === 0) throw new Error("fields cannot be an empty array");
     return fields || [];
   }, [fields]);
@@ -3839,8 +3953,8 @@ var AdvanceSearch = ({
     defaultValues: {}
   });
   const { handleSubmit, unregister, resetField, getValues, clearErrors, setError } = form;
-  const [operatorErrors, setOperatorErrors] = React4__namespace.default.useState({});
-  const clearOperatorError = React4.useCallback(
+  const [operatorErrors, setOperatorErrors] = React26__namespace.default.useState({});
+  const clearOperatorError = React26.useCallback(
     (rowId) => {
       setOperatorErrors((prev) => {
         if (!(rowId in prev)) return prev;
@@ -3850,7 +3964,7 @@ var AdvanceSearch = ({
     },
     [setOperatorErrors]
   );
-  const clearValue = React4.useCallback(
+  const clearValue = React26.useCallback(
     (rowId, which) => {
       const fieldName = `${which}_${rowId}`;
       resetField(fieldName, { defaultValue: void 0 });
@@ -3860,14 +3974,14 @@ var AdvanceSearch = ({
     },
     [resetField, clearErrors]
   );
-  const parseRangeValue = React4.useCallback((raw, fieldType) => {
+  const parseRangeValue = React26.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 = React4.useCallback(() => {
+  const onSubmit = React26.useCallback(() => {
     const operatorValidation = {};
     rows.forEach((r) => {
       const ops = operatorsForField(r.fieldName);
@@ -4103,11 +4217,11 @@ function resetVisibleTableState(payload) {
   table.setSorting(prevState.sorting.filter((s) => isVisible(s.id)));
 }
 var useHover = () => {
-  const [hovering, setHovering] = React4.useState(false);
-  const prevRef = React4.useRef(null);
-  const onMouseEnter = React4.useCallback(() => setHovering(true), []);
-  const onMouseLeave = React4.useCallback(() => setHovering(false), []);
-  const nodeRefCallback = React4.useCallback(
+  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(
     (node) => {
       if (prevRef.current) {
         prevRef.current.removeEventListener("mouseenter", onMouseEnter);
@@ -4135,15 +4249,15 @@ var useIntersectionObserver = ({
   initialIsIntersecting = false,
   onChange
 } = {}) => {
-  const [ref, setRef] = React4.useState(null);
-  const [state, setState] = React4.useState(() => ({
+  const [ref, setRef] = React26.useState(null);
+  const [state, setState] = React26.useState(() => ({
     isIntersecting: initialIsIntersecting,
     entry: void 0
   }));
-  const callbackRef = React4.useRef(null);
+  const callbackRef = React26.useRef(null);
   callbackRef.current = onChange;
   const frozen = state.entry?.isIntersecting && freezeOnceVisible;
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (!ref) return;
     if (!("IntersectionObserver" in window)) return;
     if (frozen) return;
@@ -4173,8 +4287,8 @@ var useIntersectionObserver = ({
     frozen,
     freezeOnceVisible
   ]);
-  const prevRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const prevRef = React26.useRef(null);
+  React26.useEffect(() => {
     if (!ref && state.entry?.target && !freezeOnceVisible && !frozen && prevRef.current !== state.entry.target) {
       prevRef.current = state.entry.target;
       setState({ isIntersecting: initialIsIntersecting, entry: void 0 });
@@ -4191,8 +4305,8 @@ var isValidMediaQueryString = (query) => {
   return query !== "not all";
 };
 var useMediaQuery = ({ query }) => {
-  const [matches, setMatches] = React4.useState(false);
-  React4.useEffect(() => {
+  const [matches, setMatches] = React26.useState(false);
+  React26.useEffect(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -4228,8 +4342,8 @@ var useTruncated = ({
   onChange,
   resizeDetectDelay = 150
 }) => {
-  const [isTruncated, setIsTruncated] = React4.useState(false);
-  React4.useEffect(() => {
+  const [isTruncated, setIsTruncated] = React26.useState(false);
+  React26.useEffect(() => {
     const element = elementRef.current;
     if (!element) return;
     const checkTruncate = debounce(() => {
@@ -4257,13 +4371,13 @@ var useControllableState = ({
   defaultValue,
   value
 }) => {
-  const [internalValue, setInternalValue] = React4__namespace.useState(value ?? defaultValue);
-  React4__namespace.useEffect(() => {
+  const [internalValue, setInternalValue] = React26__namespace.useState(value ?? defaultValue);
+  React26__namespace.useEffect(() => {
     if (value !== internalValue) {
       setInternalValue(value);
     }
   }, [value]);
-  const updateState = React4__namespace.useCallback((nextValue) => {
+  const updateState = React26__namespace.useCallback((nextValue) => {
     setInternalValue(nextValue);
   }, []);
   return {
@@ -4272,6 +4386,7 @@ var useControllableState = ({
   };
 };
 var useControllableState_default = useControllableState;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React26.useLayoutEffect : React26.useEffect;
 var HeaderCell = ({
   rootClassName,
   labelClassName,
@@ -4469,7 +4584,7 @@ var ColumnSeparator = ({ show, className, ...props }) => {
     }
   );
 };
-var ColumnSeparator_default = React4__namespace.default.memo(ColumnSeparator);
+var ColumnSeparator_default = React26__namespace.default.memo(ColumnSeparator);
 var StatusContentSlot = ({
   content,
   icon,
@@ -4488,7 +4603,7 @@ var StatusContentSlot = ({
     content
   ] });
 };
-var StatusContentSlot_default = React4__namespace.default.memo(StatusContentSlot);
+var StatusContentSlot_default = React26__namespace.default.memo(StatusContentSlot);
 var stateOptions = [
   "columnFilters",
   "globalFilter",
@@ -4541,9 +4656,9 @@ var modelOptions = [
   "getCenterVisibleLeafColumns"
 ];
 var DataTableDevTool = ({ table }) => {
-  const [open, setOpen] = React4.useState(false);
-  const [visibleStates, setVisibleStates] = React4.useState([]);
-  const [visibleModels, setVisibleModels] = React4.useState([]);
+  const [open, setOpen] = React26.useState(false);
+  const [visibleStates, setVisibleStates] = React26.useState([]);
+  const [visibleModels, setVisibleModels] = React26.useState([]);
   const tableState = table.getState();
   const toggleValue = (arr, value) => arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value];
   const getCircularReplacer = () => {
@@ -4800,14 +4915,14 @@ var DataTable = ({
       columnResizeMode: columnResizing?.enabled ? columnResizing?.resizeMode ?? "onChange" : "onChange"
     })
   });
-  const tableContainerRef = React4.useRef(null);
+  const tableContainerRef = React26.useRef(null);
   const isTableEmpty = table.getCoreRowModel().rows.length === 0;
   const isTableEmptyAfterFiltering = table.getRowModel().rows.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 } = React4.useMemo(() => {
+  const { isSomeColumnsFilterable, filterableColumns } = React26.useMemo(() => {
     const mergedColumns = [
       ...leftVisibleLeftColumns,
       ...centerVisibleLeafColumns,
@@ -4818,7 +4933,7 @@ var DataTable = ({
     );
     return { isSomeColumnsFilterable: isSomeColumnsFilterable2, filterableColumns: mergedColumns };
   }, [centerVisibleLeafColumns, leftVisibleLeftColumns, rightVisibleLeafColumns]);
-  const autoStatusKey = React4.useMemo(() => {
+  const autoStatusKey = React26.useMemo(() => {
     if (isInitialLoading) return "initialLoading";
     if (isTableEmpty) return "emptyData";
     if (isTableEmptyAfterFiltering) return "emptyFilteredData";
@@ -4836,14 +4951,14 @@ var DataTable = ({
     scrollFetch?.hasMore,
     scrollFetch?.isFetchingMore
   ]);
-  const activeStatusContentComputed = React4.useMemo(() => {
+  const activeStatusContentComputed = React26.useMemo(() => {
     if (!activeStatusContent) return autoStatusKey;
     if (typeof activeStatusContent === "function") {
       return activeStatusContent({ defaultComputedValue: autoStatusKey });
     }
     return activeStatusContent;
   }, [activeStatusContent, autoStatusKey]);
-  const fetchMoreOnScrollReached = React4.useCallback(
+  const fetchMoreOnScrollReached = React26.useCallback(
     (containerRefElement) => {
       if (!scrollFetch?.enabled || !containerRefElement || scrollFetch?.isFetchingMore || !scrollFetch?.hasMore || !scrollFetch?.fetchMore) {
         return;
@@ -4877,14 +4992,14 @@ var DataTable = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [scrollFetch?.enabled, scrollFetch?.isFetchingMore, scrollFetch?.hasMore, scrollFetch?.fetchMore]
   );
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (!tableRef) return;
     tableRef.current = table;
     return () => {
       tableRef.current = null;
     };
   }, [tableRef, table]);
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     fetchMoreOnScrollReached(tableContainerRef.current);
   }, [fetchMoreOnScrollReached]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5014,7 +5129,7 @@ var DataTable = ({
             ),
             /* @__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__ */ React4.createElement(
+              return /* @__PURE__ */ React26.createElement(
                 TableRow,
                 {
                   "data-testid": `table-data-row-${row.id}`,
@@ -5487,14 +5602,18 @@ function DialogAlert({
 }) {
   const alignClass = align === "start" ? "justify-start" : align === "end" ? "justify-end" : "justify-center";
   const { t } = reactI18next.useTranslation();
-  const handleCancel = React4.useCallback(() => {
+  const handleCancel = React26.useCallback(() => {
     onCancel?.();
     onOpenChange(false);
   }, [onCancel, onOpenChange]);
-  const handleConfirm = React4.useCallback(() => {
-    onConfirm?.();
+  const handleConfirm = React26.useCallback(() => {
+    let func = onConfirm;
+    if (variant === "success" && showCancel === false) {
+      func = onConfirm ?? onCancel;
+    }
+    func?.();
     onOpenChange(false);
-  }, [onConfirm, onOpenChange]);
+  }, [onCancel, onConfirm, onOpenChange, showCancel, variant]);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog2, { open, onOpenChange: persistent ? () => {
   } : onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent2, { className: "max-w-md", showCloseButton: !persistent, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader2, { children: [
@@ -5711,7 +5830,7 @@ var DialogAlertProvider = ({ children, i18nResource, i18nLang }) => {
   const open = useDialogAlertStore((state) => state.open);
   const setOpen = useDialogAlertStore((state) => state.setOpen);
   const dialogProps = useDialogAlertStore((state) => state.dialogProps);
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (!i18nResource) {
       i18n_default.changeLanguage("sharedui");
       return;
@@ -5821,8 +5940,8 @@ var defaultOperatorShortcuts = {
 };
 var DEFAULT_DEBOUNCE = 200;
 function useKeyboardNavigation(itemsLength, onSelect, isLocked) {
-  const [selectedIndex, setSelectedIndex] = React4.useState(0);
-  React4.useEffect(() => {
+  const [selectedIndex, setSelectedIndex] = React26.useState(0);
+  React26.useEffect(() => {
     const handler = (event) => {
       if (event.key === "ArrowDown") {
         event.preventDefault();
@@ -5845,10 +5964,10 @@ function useKeyboardNavigation(itemsLength, onSelect, isLocked) {
   return [selectedIndex, setSelectedIndex];
 }
 function useDropdownPosition(clientRect, itemsCount) {
-  const [rect, setRect] = React4.useState(null);
-  const [style, setStyle] = React4.useState({});
-  const ref = React4.useRef(null);
-  React4.useEffect(() => {
+  const [rect, setRect] = React26.useState(null);
+  const [style, setStyle] = React26.useState({});
+  const ref = React26.useRef(null);
+  React26.useEffect(() => {
     if (!clientRect) return;
     const update = () => {
       const nextRect = clientRect();
@@ -5865,7 +5984,7 @@ function useDropdownPosition(clientRect, itemsCount) {
       resizeObserver.disconnect();
     };
   }, [clientRect]);
-  React4.useLayoutEffect(() => {
+  React26.useLayoutEffect(() => {
     if (!rect || !ref.current) return;
     const dropdown = ref.current;
     const dropdownRect = dropdown.getBoundingClientRect();
@@ -5892,15 +6011,15 @@ var SuggestionList = ({
   debounceMs = DEFAULT_DEBOUNCE,
   query
 }) => {
-  const [items, setItems] = React4.useState([]);
-  const [isLoading, setIsLoading] = React4.useState(false);
-  const fetchId = React4.useRef(0);
-  const debounceHandle = React4.useRef(null);
-  const itemRefs = React4.useRef([]);
+  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 { ref, style, rect } = useDropdownPosition(clientRect, items.length);
-  const normalizedMap = React4.useMemo(() => mapItem, [mapItem]);
-  const normalizeItem = React4.useMemo(() => normalizeToken, [normalizeToken]);
-  React4.useEffect(() => {
+  const normalizedMap = React26.useMemo(() => mapItem, [mapItem]);
+  const normalizeItem = React26.useMemo(() => normalizeToken, [normalizeToken]);
+  React26.useEffect(() => {
     const runFetch = (input) => {
       fetchId.current += 1;
       const currentId = fetchId.current;
@@ -5931,7 +6050,7 @@ var SuggestionList = ({
       fetchId.current += 1;
     };
   }, [query, fetchItems, normalizedMap, normalizeItem, debounceMs]);
-  const handleSelect = React4.useMemo(
+  const handleSelect = React26.useMemo(
     () => (item) => {
       if (isLoading) return;
       command(item);
@@ -5946,10 +6065,10 @@ var SuggestionList = ({
     },
     isLoading
   );
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     setSelectedIndex(0);
   }, [items, setSelectedIndex]);
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     const element = itemRefs.current[selectedIndex];
     if (element) element.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
@@ -5997,8 +6116,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] = React4__namespace.default.useState(false);
-  React4__namespace.default.useEffect(() => {
+  const [isFocused, setIsFocused] = React26__namespace.default.useState(false);
+  React26__namespace.default.useEffect(() => {
     const handler = () => {
       const { from, to } = editor.state.selection;
       const position = getPos();
@@ -6913,21 +7032,21 @@ function ToolbarPlugin({
   acceptImageMimeTypes
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [state, setState] = React4.useState(initialToolbarState);
-  const fileInputRef = React4.useRef(null);
-  const [isLinkDialogOpen, setLinkDialogOpen] = React4.useState(false);
-  const [editingExistingLink, setEditingExistingLink] = React4.useState(false);
-  const [linkNodeKey, setLinkNodeKey] = React4.useState(null);
-  const [isImageDialogOpen, setImageDialogOpen] = React4.useState(false);
-  const [editingExistingImage, setEditingExistingImage] = React4.useState(false);
-  const [imageNodeKey, setImageNodeKey] = React4.useState(null);
+  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 linkForm = reactHookForm.useForm({
     defaultValues: { url: "", label: "" }
   });
   const imageForm = reactHookForm.useForm({
     defaultValues: { url: "", alt: "", width: "", height: "" }
   });
-  const openImageDialog = React4.useCallback(() => {
+  const openImageDialog = React26.useCallback(() => {
     if (disabled || !allowImageUrlInsert) {
       return;
     }
@@ -6961,7 +7080,7 @@ function ToolbarPlugin({
     setImageNodeKey(targetImage?.getKey() ?? null);
     setImageDialogOpen(true);
   }, [allowImageUrlInsert, disabled, editor, imageForm]);
-  const closeImageDialog = React4.useCallback(() => {
+  const closeImageDialog = React26.useCallback(() => {
     setImageDialogOpen(false);
     setEditingExistingImage(false);
     setImageNodeKey(null);
@@ -6970,7 +7089,7 @@ function ToolbarPlugin({
       editor.focus();
     }, 0);
   }, [editor, imageForm]);
-  const openLinkDialog = React4.useCallback(() => {
+  const openLinkDialog = React26.useCallback(() => {
     if (disabled) {
       return;
     }
@@ -7010,7 +7129,7 @@ function ToolbarPlugin({
     setLinkNodeKey(detectedLink?.getKey() ?? null);
     setLinkDialogOpen(true);
   }, [disabled, editor, linkForm]);
-  const closeLinkDialog = React4.useCallback(() => {
+  const closeLinkDialog = React26.useCallback(() => {
     setLinkDialogOpen(false);
     setEditingExistingLink(false);
     setLinkNodeKey(null);
@@ -7051,7 +7170,7 @@ function ToolbarPlugin({
     });
     closeLinkDialog();
   });
-  const handleRemoveLink = React4.useCallback(() => {
+  const handleRemoveLink = React26.useCallback(() => {
     editor.focus();
     editor.update(() => {
       if (linkNodeKey) {
@@ -7068,7 +7187,7 @@ function ToolbarPlugin({
     });
     closeLinkDialog();
   }, [closeLinkDialog, editor, linkNodeKey]);
-  const handleLinkDialogOpenChange = React4.useCallback(
+  const handleLinkDialogOpenChange = React26.useCallback(
     (open) => {
       if (open) {
         setLinkDialogOpen(true);
@@ -7078,7 +7197,7 @@ function ToolbarPlugin({
     },
     [closeLinkDialog]
   );
-  const updateToolbar = React4.useCallback(() => {
+  const updateToolbar = React26.useCallback(() => {
     const selection = lexical.$getSelection();
     if (!lexical.$isRangeSelection(selection)) {
       return;
@@ -7118,7 +7237,7 @@ function ToolbarPlugin({
       isLink: hasLink
     }));
   }, []);
-  React4__namespace.useEffect(() => {
+  React26__namespace.useEffect(() => {
     return utils.mergeRegister(
       editor.registerCommand(
         lexical.CAN_UNDO_COMMAND,
@@ -7149,7 +7268,7 @@ function ToolbarPlugin({
       })
     );
   }, [editor, updateToolbar]);
-  const applyBlock = React4.useCallback(
+  const applyBlock = React26.useCallback(
     (nextBlock) => {
       if (disabled) {
         return;
@@ -7211,7 +7330,7 @@ function ToolbarPlugin({
     },
     [disabled, editor, state.blockType]
   );
-  const toggleFormat = React4.useCallback(
+  const toggleFormat = React26.useCallback(
     (format5) => {
       if (disabled) {
         return;
@@ -7220,10 +7339,10 @@ function ToolbarPlugin({
     },
     [disabled, editor]
   );
-  const toggleLink = React4.useCallback(() => {
+  const toggleLink = React26.useCallback(() => {
     openLinkDialog();
   }, [openLinkDialog]);
-  const applyElementFormat = React4.useCallback(
+  const applyElementFormat = React26.useCallback(
     (format5) => {
       if (disabled) {
         return;
@@ -7234,7 +7353,7 @@ function ToolbarPlugin({
   );
   const canInsertImage = allowImageUrlInsert || Boolean(onImageUpload);
   const imageAccept = acceptImageMimeTypes ?? DEFAULT_IMAGE_ACCEPT;
-  const handleInsertImage = React4.useCallback(() => {
+  const handleInsertImage = React26.useCallback(() => {
     if (disabled || !canInsertImage) {
       return;
     }
@@ -7245,7 +7364,7 @@ function ToolbarPlugin({
     }
     openImageDialog();
   }, [canInsertImage, disabled, editor, onImageUpload, openImageDialog]);
-  const handleFileChange = React4.useCallback(
+  const handleFileChange = React26.useCallback(
     async (event) => {
       if (!onImageUpload) {
         return;
@@ -7335,7 +7454,7 @@ function ToolbarPlugin({
     });
     closeImageDialog();
   });
-  const handleImageDialogOpenChange = React4.useCallback(
+  const handleImageDialogOpenChange = React26.useCallback(
     (open) => {
       if (open) {
         setImageDialogOpen(true);
@@ -7345,7 +7464,7 @@ function ToolbarPlugin({
     },
     [closeImageDialog]
   );
-  const handleRemoveImage = React4.useCallback(() => {
+  const handleRemoveImage = React26.useCallback(() => {
     if (!imageNodeKey) {
       closeImageDialog();
       return;
@@ -7704,7 +7823,7 @@ function ControlledValuePlugin({
   trackAppliedValue
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React4__namespace.useEffect(() => {
+  React26__namespace.useEffect(() => {
     if (value == null || trackAppliedValue.current === value) {
       return;
     }
@@ -7728,14 +7847,14 @@ function ControlledValuePlugin({
 }
 function EditableStatePlugin({ editable }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React4__namespace.useEffect(() => {
+  React26__namespace.useEffect(() => {
     editor.setEditable(editable);
   }, [editor, editable]);
   return null;
 }
 function ImagesPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React4__namespace.useEffect(() => {
+  React26__namespace.useEffect(() => {
     return editor.registerCommand(
       INSERT_IMAGE_COMMAND,
       (payload) => {
@@ -7754,7 +7873,7 @@ function ImagesPlugin() {
   }, [editor]);
   return null;
 }
-var RichText = React4.forwardRef(function RichText2({
+var RichText = React26.forwardRef(function RichText2({
   value,
   defaultValue,
   onChange,
@@ -7773,11 +7892,11 @@ var RichText = React4.forwardRef(function RichText2({
   id,
   ...rest
 }, ref) {
-  const initialSerializedStateRef = React4.useRef(void 0);
+  const initialSerializedStateRef = React26.useRef(void 0);
   if (initialSerializedStateRef.current === void 0) {
     initialSerializedStateRef.current = parseSerializedEditorState(value ?? defaultValue);
   }
-  const initialConfig = React4.useMemo(
+  const initialConfig = React26.useMemo(
     () => ({
       namespace: "RichTextEditor",
       editable: !(readOnly || disabled),
@@ -7790,8 +7909,8 @@ var RichText = React4.forwardRef(function RichText2({
     }),
     [disabled, readOnly]
   );
-  const appliedValueRef = React4.useRef(value ?? defaultValue);
-  const handleChange = React4.useCallback(
+  const appliedValueRef = React26.useRef(value ?? defaultValue);
+  const handleChange = React26.useCallback(
     (editorState, editor) => {
       const serialized = JSON.stringify(editorState.toJSON());
       appliedValueRef.current = serialized;
@@ -7980,13 +8099,13 @@ function SheetDescription({
   );
 }
 function useIsMobile(breakpoint = 768) {
-  const [isMobile, setIsMobile] = React4.useState(() => {
+  const [isMobile, setIsMobile] = React26.useState(() => {
     if (typeof window === "undefined") {
       return false;
     }
     return window.innerWidth < breakpoint;
   });
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     function onResize() {
       setIsMobile(window.innerWidth < breakpoint);
     }
@@ -8016,9 +8135,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React4__namespace.createContext(null);
+var SidebarContext = React26__namespace.createContext(null);
 function useSidebar() {
-  const context = React4__namespace.useContext(SidebarContext);
+  const context = React26__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -8034,10 +8153,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React4__namespace.useState(false);
-  const [_open, _setOpen] = React4__namespace.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React26__namespace.useState(false);
+  const [_open, _setOpen] = React26__namespace.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React4__namespace.useCallback(
+  const setOpen = React26__namespace.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -8049,10 +8168,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React4__namespace.useCallback(() => {
+  const toggleSidebar = React26__namespace.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React4__namespace.useEffect(() => {
+  React26__namespace.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -8063,7 +8182,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React4__namespace.useMemo(
+  const contextValue = React26__namespace.useMemo(
     () => ({
       state,
       open,
@@ -8505,7 +8624,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React4__namespace.useMemo(() => {
+  const width = React26__namespace.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8770,10 +8889,10 @@ var FormulaEditor = ({
   fieldState,
   mode = "edit"
 }) => {
-  const [isExpanded, setIsExpanded] = React4.useState(false);
-  const lastEmittedValueRef = React4.useRef(null);
-  const ignorePropValueRef = React4.useRef(false);
-  const normalizedConfigs = React4.useMemo(() => {
+  const [isExpanded, setIsExpanded] = React26.useState(false);
+  const lastEmittedValueRef = React26.useRef(null);
+  const ignorePropValueRef = React26.useRef(false);
+  const normalizedConfigs = React26.useMemo(() => {
     const configsToUse = tokenConfigs?.length ? tokenConfigs : DEFAULT_TOKEN_CONFIGS;
     return configsToUse.map((config) => ({
       ...config,
@@ -8782,18 +8901,18 @@ var FormulaEditor = ({
       outputType: config.outputType ?? config.type
     }));
   }, [tokenConfigs]);
-  const prefixMap = React4.useMemo(() => buildPrefixMap(normalizedConfigs), [normalizedConfigs]);
-  const configLookup = React4.useMemo(() => {
+  const prefixMap = React26.useMemo(() => buildPrefixMap(normalizedConfigs), [normalizedConfigs]);
+  const configLookup = React26.useMemo(() => {
     const lookup = /* @__PURE__ */ new Map();
     normalizedConfigs.forEach((config) => lookup.set(config.prefix, config));
     return lookup;
   }, [normalizedConfigs]);
-  const allowedOperators = React4.useMemo(() => operators.map((operator) => operator.value), [operators]);
+  const allowedOperators = React26.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 = React4.useCallback(
+  const convertValueToContent = React26.useCallback(
     (input) => {
       if (!input) return "";
       const trimmed = input.trim();
@@ -8805,8 +8924,8 @@ var FormulaEditor = ({
     },
     [configLookup, prefixMap]
   );
-  const resolvedContent = React4.useMemo(() => convertValueToContent(value), [convertValueToContent, value]);
-  const extensions = React4.useMemo(
+  const resolvedContent = React26.useMemo(() => convertValueToContent(value), [convertValueToContent, value]);
+  const extensions = React26.useMemo(
     () => [
       StarterKit__default.default.configure({ bold: false, italic: false }),
       Token.configure({ configs: normalizedConfigs, onSelect: onSelectSuggestion }),
@@ -8838,11 +8957,11 @@ var FormulaEditor = ({
       }
     }
   });
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (!editor) return;
     editor.setEditable(!isEditorDisabled);
   }, [editor, isEditorDisabled]);
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (!editor || resolvedContent === void 0) return;
     if (ignorePropValueRef.current && typeof value === "string" && value === lastEmittedValueRef.current) {
       ignorePropValueRef.current = false;
@@ -8974,7 +9093,7 @@ function SortableRow({
     id: value,
     disabled: name === "columns.0.id"
   });
-  const style = React4__namespace.useMemo(
+  const style = React26__namespace.useMemo(
     () => ({
       transform: utilities.CSS.Transform.toString(transform),
       transition
@@ -9086,8 +9205,8 @@ var GridSettingsModal = ({
   onClose,
   onSaveColumns
 }) => {
-  const [isDragging, setIsDragging] = React4.useState(false);
-  const scrollRef = React4.useRef(null);
+  const [isDragging, setIsDragging] = React26.useState(false);
+  const scrollRef = React26.useRef(null);
   const form = reactHookForm.useForm({
     resolver: zod$1.zodResolver(GridSettingsSchema),
     defaultValues: { columns: currentColumns },
@@ -9099,7 +9218,7 @@ var GridSettingsModal = ({
     name: "columns",
     keyName: "fieldId"
   });
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (isOpen) {
       form.reset({ columns: currentColumns });
     }
@@ -9376,7 +9495,7 @@ function getCandidateWidths({
   }
   return DEVICE_SIZES;
 }
-var Image2 = React4__namespace.forwardRef(function Image3({
+var Image2 = React26__namespace.forwardRef(function Image3({
   src,
   alt,
   width,
@@ -9406,34 +9525,34 @@ var Image2 = React4__namespace.forwardRef(function Image3({
   } = imgProps;
   const widthNumber = toNumber(width);
   const heightNumber = toNumber(height);
-  React4__namespace.useEffect(() => {
+  React26__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 = React4__namespace.useMemo(
+  const candidateWidths = React26__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 = React4__namespace.useMemo(() => {
+  const computedSrc = React26__namespace.useMemo(() => {
     if (unoptimized) {
       return src;
     }
     return loader({ src, width: largestWidth, quality });
   }, [largestWidth, loader, quality, src, unoptimized]);
-  const computedSrcSet = React4__namespace.useMemo(() => {
+  const computedSrcSet = React26__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] = React4__namespace.useState(false);
-  const internalRef = React4__namespace.useRef(null);
-  const setRefs = React4__namespace.useCallback(
+  const [isLoaded, setIsLoaded] = React26__namespace.useState(false);
+  const internalRef = React26__namespace.useRef(null);
+  const setRefs = React26__namespace.useCallback(
     (node) => {
       internalRef.current = node;
       if (!ref) {
@@ -9447,7 +9566,7 @@ var Image2 = React4__namespace.forwardRef(function Image3({
     },
     [ref]
   );
-  React4__namespace.useEffect(() => {
+  React26__namespace.useEffect(() => {
     const image = internalRef.current;
     if (!image) {
       return;
@@ -9459,7 +9578,7 @@ var Image2 = React4__namespace.forwardRef(function Image3({
       setIsLoaded(false);
     }
   }, [onLoadingComplete, src]);
-  const handleLoad = React4__namespace.useCallback(
+  const handleLoad = React26__namespace.useCallback(
     (event) => {
       setIsLoaded(true);
       onLoadProp?.(event);
@@ -9471,7 +9590,7 @@ var Image2 = React4__namespace.forwardRef(function Image3({
   const fetchPriority = priority ? "high" : fetchPriorityProp;
   const decoding = decodingProp ?? "async";
   const resolvedObjectFit = objectFit ?? (fill ? "cover" : void 0);
-  const wrapperStyle = React4__namespace.useMemo(
+  const wrapperStyle = React26__namespace.useMemo(
     () => ({
       position: "relative",
       display: fill ? "block" : "inline-block",
@@ -9481,7 +9600,7 @@ var Image2 = React4__namespace.forwardRef(function Image3({
     }),
     [fill, height, width]
   );
-  const imageStyle = React4__namespace.useMemo(
+  const imageStyle = React26__namespace.useMemo(
     () => ({
       width: fill ? "100%" : formatDimension(width) ?? void 0,
       height: fill ? "100%" : formatDimension(height) ?? void 0,
@@ -9543,7 +9662,7 @@ var Image2 = React4__namespace.forwardRef(function Image3({
 });
 Image2.displayName = "Image";
 var ListTable = ({ onTableReady, children }) => {
-  React4__namespace.useEffect(() => {
+  React26__namespace.useEffect(() => {
     if (onTableReady) {
       onTableReady({ ready: true });
     }
@@ -9588,7 +9707,7 @@ var ListHeader = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "list-header", className: cn("rounded-t-lg px-4 py-2", bgColor, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 text-lg", textClassName), children: [
       titleIcon,
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-none", children: title })
+      title
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: rightActions ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       onSettingClick && /* @__PURE__ */ jsxRuntime.jsx(
@@ -9688,7 +9807,7 @@ var InfoIcon = (props) => {
     }
   );
 };
-var InfoIcon_default = React4__namespace.default.memo(InfoIcon);
+var InfoIcon_default = React26__namespace.default.memo(InfoIcon);
 var Navbar = ({
   className,
   title,
@@ -9713,7 +9832,7 @@ var Navbar = ({
 }) => {
   const { isMobile, isTablet, isDesktop } = useScreenSize_default();
   const Icon2 = lucideReact.CircleHelp;
-  const shouldShowSeparator = !separatorDisable && React4.isValidElement(searchButton);
+  const shouldShowSeparator = !separatorDisable && React26.isValidElement(searchButton);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
     {
@@ -9724,8 +9843,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: [
-            React4.isValidElement(title) ? title : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-xl font-bold", children: title }),
-            React4.isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-sm font-semibold", children: subTitle })
+            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 })
           ] }),
           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" }) }) }),
@@ -9756,10 +9875,10 @@ var Navbar = ({
                       ),
                       children: [
                         tooltipTitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                          React4.isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: 32, "aria-hidden": "true" }),
+                          React26.isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: 32, "aria-hidden": "true" }),
                           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: tooltipTitle })
                         ] }),
-                        React4.isValidElement(tooltipdescription) && tooltipdescription
+                        React26.isValidElement(tooltipdescription) && tooltipdescription
                       ]
                     }
                   ),
@@ -9814,13 +9933,13 @@ var Navbar = ({
             }
           ),
           shouldShowSeparator && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", className: "ml-1 w-[1px] h-10 bg-white" }),
-          React4.isValidElement(searchButton) ? searchButton : ""
+          React26.isValidElement(searchButton) ? searchButton : ""
         ] })
       ]
     }
   );
 };
-var navbar_default = React4__namespace.default.memo(Navbar);
+var navbar_default = React26__namespace.default.memo(Navbar);
 var usePreventPageLeaveStore = zustand.create((set) => ({
   isPreventing: false,
   setPreventing: (value) => set({ isPreventing: value })
@@ -9830,7 +9949,7 @@ var usePreventPageLeaveStore_default = usePreventPageLeaveStore;
 // src/components/prevent-page-leave/PreventPageLeave.tsx
 var PreventPageLeave = ({ children }) => {
   const { isPreventing } = usePreventPageLeaveStore();
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (!isPreventing || typeof window === "undefined") {
       return;
     }
@@ -9848,7 +9967,7 @@ var PreventPageLeave = ({ children }) => {
 var PreventPageLeave_default = PreventPageLeave;
 var usePreventPageLeave = ({ isPrevening }) => {
   const setPreventing = usePreventPageLeaveStore_default((state) => state.setPreventing);
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     setPreventing(isPrevening);
   }, [isPrevening, setPreventing]);
 };
@@ -9989,20 +10108,20 @@ var CropperModal = ({
   title,
   props
 }) => {
-  const [isLoading, setIsLoading] = React4.useState(false);
-  const [crop, setCrop] = React4.useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = React4.useState();
-  const [croppedAreaPixels, setCroppedAreaPixels] = React4.useState(null);
-  const handleClose = React4.useCallback(() => {
+  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(() => {
     onOpenChange(false);
   }, [onOpenChange]);
-  const handleCancel = React4.useCallback(() => {
+  const handleCancel = React26.useCallback(() => {
     if (onCancel) {
       onCancel();
     }
     handleClose();
   }, [handleClose, onCancel]);
-  const handleCropComplete = React4.useCallback((_, croppedAreaPixels2) => {
+  const handleCropComplete = React26.useCallback((_, croppedAreaPixels2) => {
     setCroppedAreaPixels(croppedAreaPixels2);
   }, []);
   const handleConfirm = async () => {
@@ -10096,6 +10215,231 @@ var CropperModal = ({
     }
   );
 };
+var REACT_ELEMENT_TYPE_18 = /* @__PURE__ */ Symbol.for("react.element");
+var REACT_ELEMENT_TYPE_19 = /* @__PURE__ */ Symbol.for("react.transitional.element");
+var REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for("react.fragment");
+function isFragment(object) {
+  return (
+    // Base object type
+    object && typeof object === "object" && // React Element type
+    (object.$$typeof === REACT_ELEMENT_TYPE_18 || object.$$typeof === REACT_ELEMENT_TYPE_19) && // React Fragment type
+    object.type === REACT_FRAGMENT_TYPE
+  );
+}
+var isValidText = (val) => ["string", "number"].includes(typeof val);
+function toArray(children, option = {}) {
+  let ret = [];
+  React26__namespace.Children.forEach(children, (child) => {
+    if ((child === void 0 || child === null) && !option.keepEmpty) {
+      return;
+    }
+    if (Array.isArray(child)) {
+      ret = ret.concat(toArray(child));
+    } else if (isFragment(child) && child.props) {
+      ret = ret.concat(toArray(child.props.children, option));
+    } else {
+      ret.push(child);
+    }
+  });
+  return ret;
+}
+var MeasureText = React26__namespace.forwardRef(({ style, children }, ref) => {
+  const spanRef = React26__namespace.useRef(null);
+  React26__namespace.useImperativeHandle(ref, () => ({
+    isExceed: () => {
+      const span = spanRef.current;
+      return span.scrollHeight > span.clientHeight;
+    },
+    getHeight: () => spanRef.current.clientHeight
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      ref: spanRef,
+      style: {
+        position: "fixed",
+        display: "block",
+        left: 0,
+        top: 0,
+        pointerEvents: "none",
+        ...style
+      },
+      children
+    }
+  );
+});
+var getNodesLen = (nodeList) => nodeList.reduce((totalLen, node) => totalLen + (isValidText(node) ? String(node).length : 1), 0);
+function sliceNodes(nodeList, len) {
+  let currLen = 0;
+  const currentNodeList = [];
+  for (let i = 0; i < nodeList.length; i += 1) {
+    if (currLen === len) {
+      return currentNodeList;
+    }
+    const node = nodeList[i];
+    const canCut = isValidText(node);
+    const nodeLen = canCut ? String(node).length : 1;
+    const nextLen = currLen + nodeLen;
+    if (nextLen > len) {
+      const restLen = len - currLen;
+      currentNodeList.push(String(node).slice(0, restLen));
+      return currentNodeList;
+    }
+    currentNodeList.push(node);
+    currLen = nextLen;
+  }
+  return nodeList;
+}
+var STATUS_MEASURE_NONE = 0;
+var STATUS_MEASURE_PREPARE = 1;
+var STATUS_MEASURE_START = 2;
+var STATUS_MEASURE_NEED_ELLIPSIS = 3;
+var STATUS_MEASURE_NO_NEED_ELLIPSIS = 4;
+var lineClipStyle = {
+  display: "-webkit-box",
+  overflow: "hidden",
+  WebkitBoxOrient: "vertical"
+};
+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);
+  useIsomorphicLayoutEffect(() => {
+    if (enableMeasure && width && nodeLen) {
+      setNeedEllipsis(STATUS_MEASURE_PREPARE);
+    } else {
+      setNeedEllipsis(STATUS_MEASURE_NONE);
+    }
+  }, [width, text, rows, enableMeasure, nodeList]);
+  useIsomorphicLayoutEffect(() => {
+    if (needEllipsis === STATUS_MEASURE_PREPARE) {
+      setNeedEllipsis(STATUS_MEASURE_START);
+      const nextWhiteSpace = measureWhiteSpaceRef.current && getComputedStyle(measureWhiteSpaceRef.current).whiteSpace;
+      setParentWhiteSpace(nextWhiteSpace);
+    } else if (needEllipsis === STATUS_MEASURE_START) {
+      const isOverflow = !!needEllipsisRef.current?.isExceed();
+      setNeedEllipsis(isOverflow ? STATUS_MEASURE_NEED_ELLIPSIS : STATUS_MEASURE_NO_NEED_ELLIPSIS);
+      setEllipsisCutIndex(isOverflow ? [0, nodeLen] : null);
+      setCanEllipsis(isOverflow);
+      const baseRowsEllipsisHeight = needEllipsisRef.current?.getHeight() || 0;
+      const descRowsEllipsisHeight = rows === 1 ? 0 : descRowsEllipsisRef.current?.getHeight() || 0;
+      const symbolRowEllipsisHeight = symbolRowEllipsisRef.current?.getHeight() || 0;
+      const maxRowsHeight = Math.max(
+        baseRowsEllipsisHeight,
+        // height of rows with ellipsis
+        descRowsEllipsisHeight + symbolRowEllipsisHeight
+      );
+      setEllipsisHeight(maxRowsHeight + 1);
+      onEllipsis(isOverflow);
+    }
+  }, [needEllipsis]);
+  const cutMidIndex = ellipsisCutIndex ? Math.ceil((ellipsisCutIndex[0] + ellipsisCutIndex[1]) / 2) : 0;
+  useIsomorphicLayoutEffect(() => {
+    const [minIndex, maxIndex] = ellipsisCutIndex || [0, 0];
+    if (minIndex !== maxIndex) {
+      const midHeight = cutMidRef.current?.getHeight() || 0;
+      const isOverflow = midHeight > ellipsisHeight;
+      let targetMidIndex = cutMidIndex;
+      if (maxIndex - minIndex === 1) {
+        targetMidIndex = isOverflow ? minIndex : maxIndex;
+      }
+      setEllipsisCutIndex(isOverflow ? [minIndex, targetMidIndex] : [targetMidIndex, maxIndex]);
+    }
+  }, [ellipsisCutIndex, cutMidIndex]);
+  const finalContent = React26__namespace.useMemo(() => {
+    if (!enableMeasure) {
+      return children(nodeList, false);
+    }
+    if (needEllipsis !== STATUS_MEASURE_NEED_ELLIPSIS || !ellipsisCutIndex || ellipsisCutIndex[0] !== ellipsisCutIndex[1]) {
+      const content = children(nodeList, false);
+      if ([STATUS_MEASURE_NO_NEED_ELLIPSIS, STATUS_MEASURE_NONE].includes(needEllipsis)) {
+        return content;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          style: {
+            ...lineClipStyle,
+            WebkitLineClamp: rows
+          },
+          children: content
+        }
+      );
+    }
+    return children(expanded ? nodeList : sliceNodes(nodeList, ellipsisCutIndex[0]), canEllipsis);
+  }, [expanded, needEllipsis, ellipsisCutIndex, nodeList, ...miscDeps]);
+  const measureStyle = {
+    width,
+    margin: 0,
+    padding: 0,
+    whiteSpace: parentWhiteSpace === "nowrap" ? "normal" : "inherit"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    finalContent,
+    needEllipsis === STATUS_MEASURE_START && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MeasureText,
+        {
+          style: {
+            ...measureStyle,
+            ...lineClipStyle,
+            WebkitLineClamp: rows
+          },
+          ref: needEllipsisRef,
+          children: fullContent
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MeasureText,
+        {
+          style: {
+            ...measureStyle,
+            ...lineClipStyle,
+            WebkitLineClamp: rows - 1
+          },
+          ref: descRowsEllipsisRef,
+          children: fullContent
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MeasureText,
+        {
+          style: {
+            ...measureStyle,
+            ...lineClipStyle,
+            WebkitLineClamp: 1
+          },
+          ref: symbolRowEllipsisRef,
+          children: children([], true)
+        }
+      )
+    ] }),
+    needEllipsis === STATUS_MEASURE_NEED_ELLIPSIS && ellipsisCutIndex && ellipsisCutIndex[0] !== ellipsisCutIndex[1] && /* @__PURE__ */ jsxRuntime.jsx(
+      MeasureText,
+      {
+        style: {
+          ...measureStyle,
+          top: 400
+        },
+        ref: cutMidRef,
+        children: children(sliceNodes(nodeList, cutMidIndex), true)
+      }
+    ),
+    needEllipsis === STATUS_MEASURE_PREPARE && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { whiteSpace: "inherit" }, ref: measureWhiteSpaceRef })
+  ] });
+}
 var Truncated = ({
   children,
   className,
@@ -10105,49 +10449,41 @@ var Truncated = ({
   tooltipProps,
   tooltipContentProps
 }) => {
-  const elementRef = React4.useRef(null);
-  const [open, setOpen] = React4.useState(false);
-  const [isTruncated, setIsTruncated] = React4.useState(false);
+  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 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;
-  React4.useEffect(() => {
+  const enableMeasure = Boolean(ellipsis) && !tooltipProps?.disabled;
+  useIsomorphicLayoutEffect(() => {
     const el = elementRef.current;
     if (!el) return;
-    const measure = () => {
-      if (!ellipsis) {
-        setIsTruncated(false);
-        return;
-      }
+    const updateWidth = () => {
       const rect = el.getBoundingClientRect();
-      const width = el.clientWidth || el.offsetWidth || rect.width;
-      const height = el.clientHeight || el.offsetHeight || rect.height;
-      if (!width || !height) {
-        setIsTruncated(false);
-        return;
-      }
-      const epsilon = 1;
-      const overflowWidth = el.scrollWidth - width > epsilon;
-      const overflowHeight = el.scrollHeight - height > epsilon;
-      setIsTruncated(overflowWidth || overflowHeight);
+      const width = el.clientWidth || el.offsetWidth || rect.width || 0;
+      setMeasureWidth(width);
     };
-    const resizeObserver = new ResizeObserver(() => requestAnimationFrame(measure));
+    updateWidth();
+    const resizeObserver = new ResizeObserver(() => requestAnimationFrame(updateWidth));
     resizeObserver.observe(el);
-    const mutationObserver = new MutationObserver(() => measure());
-    mutationObserver.observe(el, { childList: true, subtree: true, characterData: true });
-    requestAnimationFrame(measure);
     return () => {
       resizeObserver.disconnect();
-      mutationObserver.disconnect();
     };
-  }, [children, ellipsis, lineClampLines]);
-  const truncationClass = React4.useMemo(() => {
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!enableMeasure) {
+      setIsTruncated(false);
+    }
+  }, [enableMeasure]);
+  const truncationClass = React26__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 = React4.useMemo(() => {
+  const clampedStyle = React26__namespace.useMemo(() => {
     if (!lineClampLines) return style;
     return {
       ...style,
@@ -10157,7 +10493,19 @@ var Truncated = ({
       overflow: "hidden"
     };
   }, [lineClampLines, style]);
-  const baseContent = /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref: elementRef, className: cn(truncationClass, className), style: clampedStyle, children: normalizedChildren });
+  const baseContent = /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref: elementRef, className: cn(truncationClass, className), style: clampedStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+    EllipsisMeasure,
+    {
+      enableMeasure,
+      text: normalizedChildren,
+      width: measureWidth,
+      rows: lineClampLines ?? 1,
+      expanded: false,
+      miscDeps: [truncationClass],
+      onEllipsis: setIsTruncated,
+      children: () => normalizedChildren
+    }
+  ) });
   let tooltipContent = normalizedChildren;
   if (typeof ellipsis === "object") {
     tooltipContent = ellipsis?.content ?? normalizedChildren;
@@ -10184,10 +10532,10 @@ var Truncated = ({
           {
             side: tooltipSide,
             className: cn(
-              "text-white bg-[#8B8B8B] max-w-xs sm:max-w-md wrap-break-word shadow-lg",
+              "text-white bg-sus-secondary-gray-10 max-w-xs sm:max-w-md wrap-break-word shadow-lg",
               tooltipContentClassName
             ),
-            arrowClassName: cn("bg-[#8B8B8B] fill-[#8B8B8B]", tooltipArrowClassName),
+            arrowClassName: cn("bg-sus-secondary-gray-10 fill-sus-secondary-gray-10", tooltipArrowClassName),
             ...tooltipContentRest,
             children: tooltipContent
           }
@@ -10197,7 +10545,7 @@ var Truncated = ({
   );
 };
 var truncated_default = Truncated;
-var InputPrimitive2 = React4__namespace.forwardRef(
+var InputPrimitive2 = React26__namespace.forwardRef(
   ({ className, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -10236,7 +10584,7 @@ var inputVariants2 = classVarianceAuthority.cva("", {
     appearance: "filled"
   }
 });
-var Input2 = React4__namespace.forwardRef(
+var Input2 = React26__namespace.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -10269,8 +10617,8 @@ var Input2 = React4__namespace.forwardRef(
       onChange: onChangeProp
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React4__namespace.useId();
-    const handleChange = React4__namespace.useCallback(
+    const messageId = React26__namespace.useId();
+    const handleChange = React26__namespace.useCallback(
       (event) => {
         onChangeProp?.(event);
         onValueChange?.(event.target.value);
@@ -10398,8 +10746,8 @@ var ActionMenu = ({
   actionButtonClassName,
   separatorClassName
 }) => {
-  const [open, setOpen] = React4.useState(false);
-  const isAllowed = React4.useCallback(
+  const [open, setOpen] = React26.useState(false);
+  const isAllowed = React26.useCallback(
     (requiredPermission) => {
       if (!checkPermissionFunc || requiredPermission === void 0) {
         return true;
@@ -10408,7 +10756,7 @@ var ActionMenu = ({
     },
     [checkPermissionFunc]
   );
-  const filteredButtons = React4.useMemo(() => {
+  const filteredButtons = React26.useMemo(() => {
     return buttons.filter((btn) => isAllowed(btn.requiredPermission));
   }, [buttons, isAllowed]);
   if (buttons.length === 0) {
@@ -10663,13 +11011,13 @@ var useFieldNames = ({
   fieldNames
 }) => {
   const { label: labelFieldKey = "label", value: valueFieldKey = "value" } = fieldNames || {};
-  const getLabelField = React4__namespace.default.useCallback(
+  const getLabelField = React26__namespace.default.useCallback(
     (option) => {
       return option?.[labelFieldKey];
     },
     [labelFieldKey]
   );
-  const getValueField = React4__namespace.default.useCallback(
+  const getValueField = React26__namespace.default.useCallback(
     (option) => {
       return option?.[valueFieldKey];
     },
@@ -10690,7 +11038,7 @@ var VirtualizedCommand = ({
   emptyContent = "No data.",
   searchPlaceholder,
   value,
-  notFoundContent = "Not item found.",
+  notFoundContent = "No item found.",
   showSearch = true,
   fieldNames,
   disabledOption,
@@ -10701,11 +11049,11 @@ var VirtualizedCommand = ({
   onFocus
 }) => {
   const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
-  const internalOptions = React4__namespace.useMemo(() => options ?? [], [options]);
-  const [filteredOptions, setFilteredOptions] = React4__namespace.useState(internalOptions);
-  const [focusedIndex, setFocusedIndex] = React4__namespace.useState(0);
-  const [isKeyboardNavActive, setIsKeyboardNavActive] = React4__namespace.useState(false);
-  const parentRef = React4__namespace.useRef(null);
+  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 virtualizer = reactVirtual.useVirtualizer({
     count: filteredOptions.length,
     getScrollElement: () => parentRef.current,
@@ -10713,14 +11061,14 @@ var VirtualizedCommand = ({
     overscan: 2
   });
   const virtualOptions = virtualizer.getVirtualItems();
-  const dynamicHeight = React4__namespace.useMemo(() => {
+  const dynamicHeight = React26__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 = React4__namespace.useCallback(
+  const scrollToIndex = React26__namespace.useCallback(
     (index) => {
       virtualizer.scrollToIndex(index, {
         align: "center"
@@ -10728,7 +11076,7 @@ var VirtualizedCommand = ({
     },
     [virtualizer]
   );
-  const handleSearch = React4__namespace.useCallback(
+  const handleSearch = React26__namespace.useCallback(
     (search) => {
       setIsKeyboardNavActive(false);
       setFilteredOptions(
@@ -10743,7 +11091,7 @@ var VirtualizedCommand = ({
     },
     [filterOption, getLabelField, internalOptions]
   );
-  const handleKeyDown = React4__namespace.useCallback(
+  const handleKeyDown = React26__namespace.useCallback(
     (event) => {
       switch (event.key) {
         case "ArrowDown": {
@@ -10778,7 +11126,7 @@ var VirtualizedCommand = ({
     },
     [filteredOptions, focusedIndex, getValueField, onSelect, scrollToIndex]
   );
-  React4__namespace.useEffect(() => {
+  React26__namespace.useEffect(() => {
     if (value) {
       const option = filteredOptions.find((option2) => {
         const optionValue = getValueField(option2);
@@ -10892,21 +11240,21 @@ var ComboboxInner = ({
   showSearch,
   ...props
 }, ref) => {
-  const { getValueField } = useFieldNames_default({ fieldNames });
-  const [open, setOpen] = React4__namespace.useState(false);
+  const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
+  const [open, setOpen] = React26__namespace.useState(false);
   const { value: selectedValue, updateState: setSelectedValue } = useControllableState_default({
     defaultValue,
     value
   });
-  const renderValue = React4__namespace.useMemo(() => {
+  const renderValue = React26__namespace.useMemo(() => {
     if (!selectedValue) return placeholder2;
     const selectedOptionFound = options?.find((option) => {
       const optionValue = getValueField(option);
       return optionValue === selectedValue;
     });
-    return selectedOptionFound ? getValueField(selectedOptionFound) : null;
-  }, [getValueField, options, placeholder2, selectedValue]);
-  const handleSelect = React4__namespace.useCallback(
+    return selectedOptionFound ? getLabelField(selectedOptionFound) : null;
+  }, [getLabelField, getValueField, options, placeholder2, selectedValue]);
+  const handleSelect = React26__namespace.useCallback(
     (selected, option) => {
       setSelectedValue(selected);
       setOpen(false);
@@ -10916,7 +11264,7 @@ var ComboboxInner = ({
     },
     [onSelect, setSelectedValue]
   );
-  const handleClear = React4__namespace.useCallback(
+  const handleClear = React26__namespace.useCallback(
     (event) => {
       event.stopPropagation();
       setSelectedValue(void 0);
@@ -10933,9 +11281,11 @@ var ComboboxInner = ({
         role: "combobox",
         "aria-expanded": open,
         className: cn(
-          "flex w-full items-center justify-between gap-2 rounded-md border bg-white px-3 h-9 text-sm whitespace-nowrap shadow-xs outline-none border-input",
-          "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50",
-          "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+          "flex items-center justify-between gap-2 rounded-md border bg-white px-3 h-9 text-sm whitespace-nowrap shadow-xs outline-none border-input",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "focus-visible:border-ring focus-visible:ring-ring/50",
+          "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+          "data-[state=open]:border-ring",
           "transition-all",
           className
         ),
@@ -11000,8 +11350,67 @@ var ComboboxInner = ({
     )
   ] });
 };
-var Combobox = React4__namespace.forwardRef(ComboboxInner);
+var Combobox = React26__namespace.forwardRef(ComboboxInner);
 var Combobox_default = Combobox;
+var TruncatedMouseEnterDiv = ({
+  value,
+  className,
+  tooltipProps,
+  tooltipContentProps,
+  arrowClassName
+}) => {
+  const textRef = React26.useRef(null);
+  const [isTruncated, setIsTruncated] = React26.useState(false);
+  const checkTruncation = () => {
+    if (textRef.current) {
+      const { scrollWidth, clientWidth } = textRef.current;
+      setIsTruncated(scrollWidth > clientWidth);
+    }
+  };
+  const {
+    className: tooltipContentClassName,
+    side: tooltipContentSide,
+    sideOffset: tooltipContentSideOffset,
+    ...tooltipContentRest
+  } = tooltipContentProps ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip2, { open: isTruncated, ...tooltipProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: textRef,
+        onMouseEnter: checkTruncation,
+        onMouseLeave: () => setIsTruncated(false),
+        className: cn("truncate", className),
+        children: value
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      TooltipContent2,
+      {
+        side: tooltipContentSide ?? "bottom",
+        className: cn(
+          "text-white bg-sus-secondary-gray-10 max-w-xs sm:max-w-md wrap-break-word shadow-lg",
+          tooltipContentClassName
+        ),
+        sideOffset: tooltipContentSideOffset ?? 10,
+        ...tooltipContentRest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TooltipArrow,
+            {
+              className: cn(
+                "bg-sus-secondary-gray-10 fill-sus-secondary-gray-10 z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]",
+                arrowClassName
+              )
+            }
+          ),
+          value
+        ]
+      }
+    )
+  ] });
+};
+var truncatedMouseEnterDiv_default = TruncatedMouseEnterDiv;
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -11010,6 +11419,7 @@ exports.AccordionTrigger = AccordionTrigger;
 exports.ActionMenu = ActionMenu;
 exports.AdvanceSearch = AdvanceSearch_default;
 exports.ArrowIcon = arrow_default;
+exports.AuditFooter = AuditFooter;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.Collapsible = Collapsible;
@@ -11139,7 +11549,9 @@ exports.TooltipArrow = TooltipArrow;
 exports.TooltipContent = TooltipContent2;
 exports.TooltipProvider = TooltipProvider2;
 exports.TooltipTrigger = TooltipTrigger2;
+exports.TrashIcon = trash_default;
 exports.Truncated = truncated_default;
+exports.TruncatedMouseEnterDiv = truncatedMouseEnterDiv_default;
 exports.UI = ui_exports;
 exports.VirtualizedCommand = VirtualizedCommand_default;
 exports.booleanToSelectValue = booleanToSelectValue;
@@ -11171,6 +11583,7 @@ exports.useFormField = useFormField;
 exports.useGridSettingsStore = useGridSettingsStore_default;
 exports.useHover = useHover_default;
 exports.useIntersectionObserver = useIntersectionObserver_default;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useMediaQuery = useMediaQuery_default;
 exports.usePreventPageLeave = usePreventPageLeave_default;
 exports.usePreventPageLeaveStore = usePreventPageLeaveStore_default;