@sustaina/shared-ui 1.33.1 → 1.34.0

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import clsx2, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React4 from 'react';
-import React4__default, { forwardRef, useRef, useMemo, useCallback, useState, isValidElement, useEffect, useLayoutEffect, createElement } from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as React26 from 'react';
+import React26__default, { forwardRef, useRef, useMemo, useCallback, useState, isValidElement, useEffect, useLayoutEffect, createElement } from 'react';
 import { CircleX, Undo, Redo, Bold, Italic, Underline, Strikethrough, Code, Pilcrow, Heading1, Heading2, Heading3, List as List$1, ListOrdered, Quote, CodeSquare, Link, Link2Off, Image as Image$1, AlignLeft, AlignCenter, AlignRight, CircleHelp, ChevronDown, X, Check, XIcon, SearchIcon, ChevronRight, CheckIcon, Triangle, CalendarIcon, Search, ChevronUp, PanelLeftIcon, Minimize2, Maximize2, Plus, ChevronLeft, CircleUserRound, MoreVertical, Bug, GripVertical, Info, CircleMinus, Minus } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -737,6 +737,120 @@ var SuiWarningIcon = (props) => /* @__PURE__ */ jsxs(
   }
 );
 var warning_default = SuiWarningIcon;
+var TrashIcon = ({
+  size = 16,
+  color = "currentColor",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 17 15",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    fill: "none",
+    className,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_336_302483)", children: [
+        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_3678_200811", children: /* @__PURE__ */ 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__ */ jsx(trash_default, { className: "w-5 h-5" });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full h-14 mt-12 justify-between items-end px-3", classNames?.root), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "grid grid-cols-[auto_1fr_auto_1fr] gap-x-3 gap-y-1 text-[10px]",
+          classNames?.grid
+        ),
+        children: [
+          /* @__PURE__ */ jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.createdOn }),
+          /* @__PURE__ */ jsx("p", { className: classNames?.value, children: createdAt ? dateFormatter(createdAt) : emptyValue }),
+          /* @__PURE__ */ jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.createdAtTime }),
+          /* @__PURE__ */ jsx("p", { className: classNames?.value, children: createdAt ? timeFormatter(createdAt) : emptyValue }),
+          /* @__PURE__ */ jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.createdBy }),
+          /* @__PURE__ */ jsx("p", { className: cn("col-span-3", classNames?.value), children: userFormatter(createdBy) }),
+          /* @__PURE__ */ jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.updatedOn }),
+          /* @__PURE__ */ jsx("p", { className: classNames?.value, children: updatedAt ? dateFormatter(updatedAt) : emptyValue }),
+          /* @__PURE__ */ jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.updatedAtTime }),
+          /* @__PURE__ */ jsx("p", { className: classNames?.value, children: updatedAt ? timeFormatter(updatedAt) : emptyValue }),
+          /* @__PURE__ */ jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.updatedBy }),
+          /* @__PURE__ */ jsx("p", { className: cn("col-span-3", classNames?.value), children: userFormatter(updatedBy) })
+        ]
+      }
+    ),
+    onDelete && /* @__PURE__ */ 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__ */ jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
 }
@@ -1203,7 +1317,7 @@ var OPERATOR_LABEL = {
   containsAll: "Contains all of"
 };
 var OperatorSelect = ({ row, operators, onChangeOperator, error }) => {
-  React4__default.useEffect(() => {
+  React26__default.useEffect(() => {
     if (!operators.length) return;
     if (!operators.includes(row.operator)) {
       onChangeOperator(operators[0]);
@@ -1239,15 +1353,15 @@ function Label2({ className, ...props }) {
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React4.createContext({});
+var FormFieldContext = React26.createContext({});
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React4.useContext(FormFieldContext);
-  const itemContext = React4.useContext(FormItemContext);
+  const fieldContext = React26.useContext(FormFieldContext);
+  const itemContext = React26.useContext(FormItemContext);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1264,9 +1378,9 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React4.createContext({});
+var FormItemContext = React26.createContext({});
 function FormItem({ className, ...props }) {
-  const id = React4.useId();
+  const id = React26.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
 }
 function FormLabel({ className, ...props }) {
@@ -1370,7 +1484,7 @@ var Spinner = ({ className, variant, size = "default", ...props }) => /* @__PURE
     ]
   }
 );
-var InputPrimitive = React4.forwardRef(
+var InputPrimitive = React26.forwardRef(
   ({ className, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -1409,7 +1523,7 @@ var inputVariants = cva("", {
     appearance: "filled"
   }
 });
-var Input = React4.forwardRef(
+var Input = React26.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -1442,8 +1556,8 @@ var Input = React4.forwardRef(
       onChange: onChangeProp
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React4.useId();
-    const handleChange = React4.useCallback(
+    const messageId = React26.useId();
+    const handleChange = React26.useCallback(
       (event) => {
         onChangeProp?.(event);
         onValueChange?.(event.target.value);
@@ -1786,20 +1900,20 @@ function DatePicker({
   className,
   ...props
 }) {
-  const today = React4.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const [displayed, setDisplayed] = React4.useState(
+  const today = React26.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [displayed, setDisplayed] = React26.useState(
     selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date()
   );
   minDate = clampToDay(minDate);
   maxDate = clampToDay(maxDate);
-  const disabledSet = React4.useMemo(() => {
+  const disabledSet = React26.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.useMemo(() => {
+  const weekdays = React26.useMemo(() => {
     const labels = [];
     for (let i = 0; i < 7; i++) {
       const idx = i;
@@ -1808,7 +1922,7 @@ function DatePicker({
     }
     return labels;
   }, [callbacks]);
-  const grid = React4.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
+  const grid = React26.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
   const isDateDisabled = (date) => {
     const d = startOfDay(date);
     if (minDate && d < minDate) return true;
@@ -1818,7 +1932,7 @@ function DatePicker({
   };
   const minYear = minDate?.getFullYear();
   const maxYear = maxDate?.getFullYear();
-  const getMonthLabel = React4.useCallback(
+  const getMonthLabel = React26.useCallback(
     (year, monthIndex) => {
       const label = callbacks?.monthLabel?.(year, monthIndex);
       if (label === null || label === void 0) {
@@ -1828,7 +1942,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const getYearLabel = React4.useCallback(
+  const getYearLabel = React26.useCallback(
     (year) => {
       const label = callbacks?.yearLabel?.(year);
       if (label === null || label === void 0) return String(year);
@@ -1836,7 +1950,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const clampMonthToBounds = React4.useCallback(
+  const clampMonthToBounds = React26.useCallback(
     (year, monthIndex) => {
       let output = monthIndex;
       if (typeof minYear === "number" && year === minYear && minDate) {
@@ -1851,7 +1965,7 @@ function DatePicker({
     },
     [maxDate, minDate, maxYear, minYear]
   );
-  const yearOptions = React4.useMemo(() => {
+  const yearOptions = React26.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : displayYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : displayYear + fallbackWindow;
@@ -1872,7 +1986,7 @@ function DatePicker({
     }
     return years;
   }, [displayYear, maxYear, minYear, selectedDate]);
-  const monthOptions = React4.useMemo(() => {
+  const monthOptions = React26.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 {
@@ -1891,7 +2005,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.useCallback((nextValue) => {
+  const handleMonthSelect = React26.useCallback((nextValue) => {
     const nextMonth = Number.parseInt(nextValue, 10);
     if (Number.isNaN(nextMonth)) return;
     setDisplayed((prev) => {
@@ -1901,7 +2015,7 @@ function DatePicker({
       return next;
     });
   }, []);
-  const handleYearSelect = React4.useCallback(
+  const handleYearSelect = React26.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -2049,14 +2163,14 @@ var DatePicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React4__default.useState(false);
-  const parser = React4__default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
-  const outputFormatter = React4__default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
-  const labelFormatter = React4__default.useMemo(
+  const [open, setOpen] = React26__default.useState(false);
+  const parser = React26__default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
+  const outputFormatter = React26__default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
+  const labelFormatter = React26__default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter,
     [displayFormatter]
   );
-  const parsedValue = React4__default.useMemo(() => {
+  const parsedValue = React26__default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return value;
     const parsed = parser(value);
@@ -2065,26 +2179,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__default.useCallback(() => setOpen(false), []);
-  const emitChange = React4__default.useCallback(
+  const handleClose = React26__default.useCallback(() => setOpen(false), []);
+  const emitChange = React26__default.useCallback(
     (next) => {
       onChange?.(next);
       onValueChange?.(next ? outputFormatter(next) : void 0);
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React4__default.useCallback(
+  const handleSelect = React26__default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React4__default.useCallback(() => {
+  const handleClear = React26__default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React4__default.useCallback(
+  const handleOpenChange = React26__default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -2274,15 +2388,15 @@ function MonthCal({
   onYearBackward,
   onYearForward
 }) {
-  const today = React4.useMemo(() => {
+  const today = React26.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     now.setDate(1);
     now.setHours(0, 0, 0, 0);
     return now;
   }, []);
-  const selectedMonthDate = React4.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
-  const min = React4.useMemo(() => normalizeMonth(minDate), [minDate]);
-  const max = React4.useMemo(() => normalizeMonth(maxDate), [maxDate]);
+  const selectedMonthDate = React26.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
+  const min = React26.useMemo(() => normalizeMonth(minDate), [minDate]);
+  const max = React26.useMemo(() => normalizeMonth(maxDate), [maxDate]);
   let effectiveMin = min;
   if (min && max && min > max) {
     effectiveMin = max;
@@ -2291,10 +2405,10 @@ function MonthCal({
   const minMonth = effectiveMin?.getMonth();
   const maxYear = max?.getFullYear();
   const maxMonth = max?.getMonth();
-  const [menuYear, setMenuYear] = React4.useState(
+  const [menuYear, setMenuYear] = React26.useState(
     () => selectedMonthDate?.getFullYear() ?? today.getFullYear()
   );
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (selectedMonthDate) {
       const year = selectedMonthDate.getFullYear();
       if (year !== menuYear) {
@@ -2302,7 +2416,7 @@ function MonthCal({
       }
     }
   }, [selectedMonthDate, menuYear]);
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (typeof minYear === "number" && menuYear < minYear) {
       setMenuYear(minYear);
       return;
@@ -2313,7 +2427,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.useMemo(() => {
+  const yearOptions = React26.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : menuYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : menuYear + fallbackWindow;
@@ -2327,7 +2441,7 @@ function MonthCal({
     }
     return years;
   }, [maxYear, menuYear, minYear]);
-  const formatYearLabel = React4.useCallback(
+  const formatYearLabel = React26.useCallback(
     (year) => {
       const raw = callbacks?.yearLabel?.(year);
       if (raw === null || raw === void 0) return String(year);
@@ -2335,7 +2449,7 @@ function MonthCal({
     },
     [callbacks]
   );
-  const handleYearSelect = React4.useCallback(
+  const handleYearSelect = React26.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -2345,7 +2459,7 @@ function MonthCal({
     },
     [maxYear, minYear]
   );
-  const disabledPairs = React4.useMemo(() => {
+  const disabledPairs = React26.useMemo(() => {
     if (!disabledDates?.length) return [];
     const pairs = [];
     disabledDates.forEach((date) => {
@@ -2490,14 +2604,14 @@ var MonthPicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React4__default.useState(false);
-  const parser = React4__default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
-  const outputFormatter = React4__default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
-  const labelFormatter = React4__default.useMemo(
+  const [open, setOpen] = React26__default.useState(false);
+  const parser = React26__default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
+  const outputFormatter = React26__default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
+  const labelFormatter = React26__default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter2,
     [displayFormatter]
   );
-  const parsedValue = React4__default.useMemo(() => {
+  const parsedValue = React26__default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return normalizeMonth2(value);
     if (typeof value === "string") {
@@ -2509,8 +2623,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__default.useCallback(() => setOpen(false), []);
-  const emitChange = React4__default.useCallback(
+  const handleClose = React26__default.useCallback(() => setOpen(false), []);
+  const emitChange = React26__default.useCallback(
     (next) => {
       const normalized = next ? normalizeMonth2(next) : void 0;
       onChange?.(normalized);
@@ -2518,18 +2632,18 @@ var MonthPicker2 = ({
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React4__default.useCallback(
+  const handleSelect = React26__default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React4__default.useCallback(() => {
+  const handleClear = React26__default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React4__default.useCallback(
+  const handleOpenChange = React26__default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -3799,7 +3913,7 @@ var AdvanceSearch = ({
     defaultValues: {}
   });
   const { handleSubmit, unregister, resetField, getValues, clearErrors, setError } = form;
-  const [operatorErrors, setOperatorErrors] = React4__default.useState({});
+  const [operatorErrors, setOperatorErrors] = React26__default.useState({});
   const clearOperatorError = useCallback(
     (rowId) => {
       setOperatorErrors((prev) => {
@@ -4217,13 +4331,13 @@ var useControllableState = ({
   defaultValue,
   value
 }) => {
-  const [internalValue, setInternalValue] = React4.useState(value ?? defaultValue);
-  React4.useEffect(() => {
+  const [internalValue, setInternalValue] = React26.useState(value ?? defaultValue);
+  React26.useEffect(() => {
     if (value !== internalValue) {
       setInternalValue(value);
     }
   }, [value]);
-  const updateState = React4.useCallback((nextValue) => {
+  const updateState = React26.useCallback((nextValue) => {
     setInternalValue(nextValue);
   }, []);
   return {
@@ -4232,6 +4346,7 @@ var useControllableState = ({
   };
 };
 var useControllableState_default = useControllableState;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 var HeaderCell = ({
   rootClassName,
   labelClassName,
@@ -4429,7 +4544,7 @@ var ColumnSeparator = ({ show, className, ...props }) => {
     }
   );
 };
-var ColumnSeparator_default = React4__default.memo(ColumnSeparator);
+var ColumnSeparator_default = React26__default.memo(ColumnSeparator);
 var StatusContentSlot = ({
   content,
   icon,
@@ -4448,7 +4563,7 @@ var StatusContentSlot = ({
     content
   ] });
 };
-var StatusContentSlot_default = React4__default.memo(StatusContentSlot);
+var StatusContentSlot_default = React26__default.memo(StatusContentSlot);
 var stateOptions = [
   "columnFilters",
   "globalFilter",
@@ -5452,9 +5567,13 @@ function DialogAlert({
     onOpenChange(false);
   }, [onCancel, onOpenChange]);
   const handleConfirm = useCallback(() => {
-    onConfirm?.();
+    let func = onConfirm;
+    if (variant === "success" && showCancel === false) {
+      func = onConfirm ?? onCancel;
+    }
+    func?.();
     onOpenChange(false);
-  }, [onConfirm, onOpenChange]);
+  }, [onCancel, onConfirm, onOpenChange, showCancel, variant]);
   return /* @__PURE__ */ jsx(Dialog2, { open, onOpenChange: persistent ? () => {
   } : onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent2, { className: "max-w-md", showCloseButton: !persistent, children: [
     /* @__PURE__ */ jsxs(DialogHeader2, { children: [
@@ -5957,8 +6076,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__default.useState(false);
-  React4__default.useEffect(() => {
+  const [isFocused, setIsFocused] = React26__default.useState(false);
+  React26__default.useEffect(() => {
     const handler = () => {
       const { from, to } = editor.state.selection;
       const position = getPos();
@@ -7078,7 +7197,7 @@ function ToolbarPlugin({
       isLink: hasLink
     }));
   }, []);
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     return mergeRegister(
       editor.registerCommand(
         CAN_UNDO_COMMAND,
@@ -7664,7 +7783,7 @@ function ControlledValuePlugin({
   trackAppliedValue
 }) {
   const [editor] = useLexicalComposerContext();
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (value == null || trackAppliedValue.current === value) {
       return;
     }
@@ -7688,14 +7807,14 @@ function ControlledValuePlugin({
 }
 function EditableStatePlugin({ editable }) {
   const [editor] = useLexicalComposerContext();
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     editor.setEditable(editable);
   }, [editor, editable]);
   return null;
 }
 function ImagesPlugin() {
   const [editor] = useLexicalComposerContext();
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     return editor.registerCommand(
       INSERT_IMAGE_COMMAND,
       (payload) => {
@@ -7976,9 +8095,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React4.createContext(null);
+var SidebarContext = React26.createContext(null);
 function useSidebar() {
-  const context = React4.useContext(SidebarContext);
+  const context = React26.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -7994,10 +8113,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React4.useState(false);
-  const [_open, _setOpen] = React4.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React26.useState(false);
+  const [_open, _setOpen] = React26.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React4.useCallback(
+  const setOpen = React26.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -8009,10 +8128,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React4.useCallback(() => {
+  const toggleSidebar = React26.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -8023,7 +8142,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React4.useMemo(
+  const contextValue = React26.useMemo(
     () => ({
       state,
       open,
@@ -8465,7 +8584,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React4.useMemo(() => {
+  const width = React26.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -8934,7 +9053,7 @@ function SortableRow({
     id: value,
     disabled: name === "columns.0.id"
   });
-  const style = React4.useMemo(
+  const style = React26.useMemo(
     () => ({
       transform: CSS.Transform.toString(transform),
       transition
@@ -9336,7 +9455,7 @@ function getCandidateWidths({
   }
   return DEVICE_SIZES;
 }
-var Image2 = React4.forwardRef(function Image3({
+var Image2 = React26.forwardRef(function Image3({
   src,
   alt,
   width,
@@ -9366,34 +9485,34 @@ var Image2 = React4.forwardRef(function Image3({
   } = imgProps;
   const widthNumber = toNumber(width);
   const heightNumber = toNumber(height);
-  React4.useEffect(() => {
+  React26.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.useMemo(
+  const candidateWidths = React26.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.useMemo(() => {
+  const computedSrc = React26.useMemo(() => {
     if (unoptimized) {
       return src;
     }
     return loader({ src, width: largestWidth, quality });
   }, [largestWidth, loader, quality, src, unoptimized]);
-  const computedSrcSet = React4.useMemo(() => {
+  const computedSrcSet = React26.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.useState(false);
-  const internalRef = React4.useRef(null);
-  const setRefs = React4.useCallback(
+  const [isLoaded, setIsLoaded] = React26.useState(false);
+  const internalRef = React26.useRef(null);
+  const setRefs = React26.useCallback(
     (node) => {
       internalRef.current = node;
       if (!ref) {
@@ -9407,7 +9526,7 @@ var Image2 = React4.forwardRef(function Image3({
     },
     [ref]
   );
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     const image = internalRef.current;
     if (!image) {
       return;
@@ -9419,7 +9538,7 @@ var Image2 = React4.forwardRef(function Image3({
       setIsLoaded(false);
     }
   }, [onLoadingComplete, src]);
-  const handleLoad = React4.useCallback(
+  const handleLoad = React26.useCallback(
     (event) => {
       setIsLoaded(true);
       onLoadProp?.(event);
@@ -9431,7 +9550,7 @@ var Image2 = React4.forwardRef(function Image3({
   const fetchPriority = priority ? "high" : fetchPriorityProp;
   const decoding = decodingProp ?? "async";
   const resolvedObjectFit = objectFit ?? (fill ? "cover" : void 0);
-  const wrapperStyle = React4.useMemo(
+  const wrapperStyle = React26.useMemo(
     () => ({
       position: "relative",
       display: fill ? "block" : "inline-block",
@@ -9441,7 +9560,7 @@ var Image2 = React4.forwardRef(function Image3({
     }),
     [fill, height, width]
   );
-  const imageStyle = React4.useMemo(
+  const imageStyle = React26.useMemo(
     () => ({
       width: fill ? "100%" : formatDimension(width) ?? void 0,
       height: fill ? "100%" : formatDimension(height) ?? void 0,
@@ -9503,7 +9622,7 @@ var Image2 = React4.forwardRef(function Image3({
 });
 Image2.displayName = "Image";
 var ListTable = ({ onTableReady, children }) => {
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (onTableReady) {
       onTableReady({ ready: true });
     }
@@ -9548,7 +9667,7 @@ var ListHeader = ({
   return /* @__PURE__ */ jsx("div", { "data-testid": "list-header", className: cn("rounded-t-lg px-4 py-2", bgColor, className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 text-lg", textClassName), children: [
       titleIcon,
-      /* @__PURE__ */ jsx("p", { className: "leading-none", children: title })
+      title
     ] }),
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: rightActions ?? /* @__PURE__ */ jsxs(Fragment, { children: [
       onSettingClick && /* @__PURE__ */ jsx(
@@ -9648,7 +9767,7 @@ var InfoIcon = (props) => {
     }
   );
 };
-var InfoIcon_default = React4__default.memo(InfoIcon);
+var InfoIcon_default = React26__default.memo(InfoIcon);
 var Navbar = ({
   className,
   title,
@@ -9780,7 +9899,7 @@ var Navbar = ({
     }
   );
 };
-var navbar_default = React4__default.memo(Navbar);
+var navbar_default = React26__default.memo(Navbar);
 var usePreventPageLeaveStore = create((set) => ({
   isPreventing: false,
   setPreventing: (value) => set({ isPreventing: value })
@@ -10056,6 +10175,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.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.forwardRef(({ style, children }, ref) => {
+  const spanRef = React26.useRef(null);
+  React26.useImperativeHandle(ref, () => ({
+    isExceed: () => {
+      const span = spanRef.current;
+      return span.scrollHeight > span.clientHeight;
+    },
+    getHeight: () => spanRef.current.clientHeight
+  }));
+  return /* @__PURE__ */ 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.useMemo(() => toArray(text), [text]);
+  const nodeLen = React26.useMemo(() => getNodesLen(nodeList), [text]);
+  const fullContent = React26.useMemo(() => children(nodeList, false), [text]);
+  const [ellipsisCutIndex, setEllipsisCutIndex] = React26.useState(null);
+  const cutMidRef = React26.useRef(null);
+  const measureWhiteSpaceRef = React26.useRef(null);
+  const needEllipsisRef = React26.useRef(null);
+  const descRowsEllipsisRef = React26.useRef(null);
+  const symbolRowEllipsisRef = React26.useRef(null);
+  const [canEllipsis, setCanEllipsis] = React26.useState(false);
+  const [needEllipsis, setNeedEllipsis] = React26.useState(STATUS_MEASURE_NONE);
+  const [ellipsisHeight, setEllipsisHeight] = React26.useState(0);
+  const [parentWhiteSpace, setParentWhiteSpace] = React26.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.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__ */ 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__ */ jsxs(Fragment, { children: [
+    finalContent,
+    needEllipsis === STATUS_MEASURE_START && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        MeasureText,
+        {
+          style: {
+            ...measureStyle,
+            ...lineClipStyle,
+            WebkitLineClamp: rows
+          },
+          ref: needEllipsisRef,
+          children: fullContent
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MeasureText,
+        {
+          style: {
+            ...measureStyle,
+            ...lineClipStyle,
+            WebkitLineClamp: rows - 1
+          },
+          ref: descRowsEllipsisRef,
+          children: fullContent
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MeasureText,
+        {
+          style: {
+            ...measureStyle,
+            ...lineClipStyle,
+            WebkitLineClamp: 1
+          },
+          ref: symbolRowEllipsisRef,
+          children: children([], true)
+        }
+      )
+    ] }),
+    needEllipsis === STATUS_MEASURE_NEED_ELLIPSIS && ellipsisCutIndex && ellipsisCutIndex[0] !== ellipsisCutIndex[1] && /* @__PURE__ */ jsx(
+      MeasureText,
+      {
+        style: {
+          ...measureStyle,
+          top: 400
+        },
+        ref: cutMidRef,
+        children: children(sliceNodes(nodeList, cutMidIndex), true)
+      }
+    ),
+    needEllipsis === STATUS_MEASURE_PREPARE && /* @__PURE__ */ jsx("span", { style: { whiteSpace: "inherit" }, ref: measureWhiteSpaceRef })
+  ] });
+}
 var Truncated = ({
   children,
   className,
@@ -10065,49 +10409,41 @@ var Truncated = ({
   tooltipProps,
   tooltipContentProps
 }) => {
-  const elementRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const [isTruncated, setIsTruncated] = useState(false);
+  const elementRef = React26.useRef(null);
+  const [open, setOpen] = React26.useState(false);
+  const [isTruncated, setIsTruncated] = React26.useState(false);
+  const [measureWidth, setMeasureWidth] = React26.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;
-  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 = useMemo(() => {
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!enableMeasure) {
+      setIsTruncated(false);
+    }
+  }, [enableMeasure]);
+  const truncationClass = React26.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 = useMemo(() => {
+  const clampedStyle = React26.useMemo(() => {
     if (!lineClampLines) return style;
     return {
       ...style,
@@ -10117,7 +10453,19 @@ var Truncated = ({
       overflow: "hidden"
     };
   }, [lineClampLines, style]);
-  const baseContent = /* @__PURE__ */ jsx(Comp, { ref: elementRef, className: cn(truncationClass, className), style: clampedStyle, children: normalizedChildren });
+  const baseContent = /* @__PURE__ */ jsx(Comp, { ref: elementRef, className: cn(truncationClass, className), style: clampedStyle, children: /* @__PURE__ */ 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;
@@ -10144,10 +10492,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
           }
@@ -10157,7 +10505,7 @@ var Truncated = ({
   );
 };
 var truncated_default = Truncated;
-var InputPrimitive2 = React4.forwardRef(
+var InputPrimitive2 = React26.forwardRef(
   ({ className, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -10196,7 +10544,7 @@ var inputVariants2 = cva("", {
     appearance: "filled"
   }
 });
-var Input2 = React4.forwardRef(
+var Input2 = React26.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -10229,8 +10577,8 @@ var Input2 = React4.forwardRef(
       onChange: onChangeProp
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React4.useId();
-    const handleChange = React4.useCallback(
+    const messageId = React26.useId();
+    const handleChange = React26.useCallback(
       (event) => {
         onChangeProp?.(event);
         onValueChange?.(event.target.value);
@@ -10623,13 +10971,13 @@ var useFieldNames = ({
   fieldNames
 }) => {
   const { label: labelFieldKey = "label", value: valueFieldKey = "value" } = fieldNames || {};
-  const getLabelField = React4__default.useCallback(
+  const getLabelField = React26__default.useCallback(
     (option) => {
       return option?.[labelFieldKey];
     },
     [labelFieldKey]
   );
-  const getValueField = React4__default.useCallback(
+  const getValueField = React26__default.useCallback(
     (option) => {
       return option?.[valueFieldKey];
     },
@@ -10650,7 +10998,7 @@ var VirtualizedCommand = ({
   emptyContent = "No data.",
   searchPlaceholder,
   value,
-  notFoundContent = "Not item found.",
+  notFoundContent = "No item found.",
   showSearch = true,
   fieldNames,
   disabledOption,
@@ -10661,11 +11009,11 @@ var VirtualizedCommand = ({
   onFocus
 }) => {
   const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
-  const internalOptions = React4.useMemo(() => options ?? [], [options]);
-  const [filteredOptions, setFilteredOptions] = React4.useState(internalOptions);
-  const [focusedIndex, setFocusedIndex] = React4.useState(0);
-  const [isKeyboardNavActive, setIsKeyboardNavActive] = React4.useState(false);
-  const parentRef = React4.useRef(null);
+  const internalOptions = React26.useMemo(() => options ?? [], [options]);
+  const [filteredOptions, setFilteredOptions] = React26.useState(internalOptions);
+  const [focusedIndex, setFocusedIndex] = React26.useState(0);
+  const [isKeyboardNavActive, setIsKeyboardNavActive] = React26.useState(false);
+  const parentRef = React26.useRef(null);
   const virtualizer = useVirtualizer({
     count: filteredOptions.length,
     getScrollElement: () => parentRef.current,
@@ -10673,14 +11021,14 @@ var VirtualizedCommand = ({
     overscan: 2
   });
   const virtualOptions = virtualizer.getVirtualItems();
-  const dynamicHeight = React4.useMemo(() => {
+  const dynamicHeight = React26.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.useCallback(
+  const scrollToIndex = React26.useCallback(
     (index) => {
       virtualizer.scrollToIndex(index, {
         align: "center"
@@ -10688,7 +11036,7 @@ var VirtualizedCommand = ({
     },
     [virtualizer]
   );
-  const handleSearch = React4.useCallback(
+  const handleSearch = React26.useCallback(
     (search) => {
       setIsKeyboardNavActive(false);
       setFilteredOptions(
@@ -10703,7 +11051,7 @@ var VirtualizedCommand = ({
     },
     [filterOption, getLabelField, internalOptions]
   );
-  const handleKeyDown = React4.useCallback(
+  const handleKeyDown = React26.useCallback(
     (event) => {
       switch (event.key) {
         case "ArrowDown": {
@@ -10738,7 +11086,7 @@ var VirtualizedCommand = ({
     },
     [filteredOptions, focusedIndex, getValueField, onSelect, scrollToIndex]
   );
-  React4.useEffect(() => {
+  React26.useEffect(() => {
     if (value) {
       const option = filteredOptions.find((option2) => {
         const optionValue = getValueField(option2);
@@ -10852,21 +11200,21 @@ var ComboboxInner = ({
   showSearch,
   ...props
 }, ref) => {
-  const { getValueField } = useFieldNames_default({ fieldNames });
-  const [open, setOpen] = React4.useState(false);
+  const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
+  const [open, setOpen] = React26.useState(false);
   const { value: selectedValue, updateState: setSelectedValue } = useControllableState_default({
     defaultValue,
     value
   });
-  const renderValue = React4.useMemo(() => {
+  const renderValue = React26.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.useCallback(
+    return selectedOptionFound ? getLabelField(selectedOptionFound) : null;
+  }, [getLabelField, getValueField, options, placeholder2, selectedValue]);
+  const handleSelect = React26.useCallback(
     (selected, option) => {
       setSelectedValue(selected);
       setOpen(false);
@@ -10876,7 +11224,7 @@ var ComboboxInner = ({
     },
     [onSelect, setSelectedValue]
   );
-  const handleClear = React4.useCallback(
+  const handleClear = React26.useCallback(
     (event) => {
       event.stopPropagation();
       setSelectedValue(void 0);
@@ -10893,9 +11241,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
         ),
@@ -10960,9 +11310,68 @@ var ComboboxInner = ({
     )
   ] });
 };
-var Combobox = React4.forwardRef(ComboboxInner);
+var Combobox = React26.forwardRef(ComboboxInner);
 var Combobox_default = Combobox;
+var TruncatedMouseEnterDiv = ({
+  value,
+  className,
+  tooltipProps,
+  tooltipContentProps,
+  arrowClassName
+}) => {
+  const textRef = useRef(null);
+  const [isTruncated, setIsTruncated] = 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__ */ jsxs(Tooltip2, { open: isTruncated, ...tooltipProps, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: textRef,
+        onMouseEnter: checkTruncation,
+        onMouseLeave: () => setIsTruncated(false),
+        className: cn("truncate", className),
+        children: value
+      }
+    ) }),
+    /* @__PURE__ */ 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__ */ 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;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionMenu, AdvanceSearch_default as AdvanceSearch, arrow_default as ArrowIcon, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Combobox_default as Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CropperModal, CropperModalError, DIALOG_ALERT_I18N_SUBNAMESPACE, DIALOG_ALERT_TEMPLATES, DataTable_default as DataTable, DatePicker2 as DatePicker, Dialog, DialogAlert, DialogAlertProvider, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, filters_default as FiltersIcon, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormulaEditor, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, Image2 as Image, Input, InputNumber_default as InputNumber, Label2 as Label, List_default as List, container_default as ListContainer, header_default as ListHeader, table_default as ListTable, LookupSelect, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave_default as PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Spinner, calendar_default as SuiCalendarIcon, calendar2_default as SuiCalendarIcon2, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, Textarea, Tooltip2 as Tooltip, TooltipArrow, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, truncated_default as Truncated, ui_exports as UI, VirtualizedCommand_default as VirtualizedCommand, booleanToSelectValue, buildPrefixMap, buttonVariants, cn, compareAlphanumeric, debounce, defaultOperatorShortcuts, defaultOperators, formatISODate, getDialogAlertControls, inputVariants, isDefined, isEmptyObject, isValidParentheses, mapTokensToOutput, parseFormula, parseFormulaToToken, resetVisibleTableState, selectValueToBoolean, spinnerVariants, splitOperators, stripNullishObject, throttle, tokenizeFormulaString, useControllableState_default as useControllableState, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated, validateTokenPrefixes };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionMenu, AdvanceSearch_default as AdvanceSearch, arrow_default as ArrowIcon, AuditFooter, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Combobox_default as Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CropperModal, CropperModalError, DIALOG_ALERT_I18N_SUBNAMESPACE, DIALOG_ALERT_TEMPLATES, DataTable_default as DataTable, DatePicker2 as DatePicker, Dialog, DialogAlert, DialogAlertProvider, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, filters_default as FiltersIcon, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormulaEditor, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, Image2 as Image, Input, InputNumber_default as InputNumber, Label2 as Label, List_default as List, container_default as ListContainer, header_default as ListHeader, table_default as ListTable, LookupSelect, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave_default as PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Spinner, calendar_default as SuiCalendarIcon, calendar2_default as SuiCalendarIcon2, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, Textarea, Tooltip2 as Tooltip, TooltipArrow, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, trash_default as TrashIcon, truncated_default as Truncated, truncatedMouseEnterDiv_default as TruncatedMouseEnterDiv, ui_exports as UI, VirtualizedCommand_default as VirtualizedCommand, booleanToSelectValue, buildPrefixMap, buttonVariants, cn, compareAlphanumeric, debounce, defaultOperatorShortcuts, defaultOperators, formatISODate, getDialogAlertControls, inputVariants, isDefined, isEmptyObject, isValidParentheses, mapTokensToOutput, parseFormula, parseFormulaToToken, resetVisibleTableState, selectValueToBoolean, spinnerVariants, splitOperators, stripNullishObject, throttle, tokenizeFormulaString, useControllableState_default as useControllableState, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useIsomorphicLayoutEffect, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated, validateTokenPrefixes };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map