@sustaina/shared-ui 1.45.0 → 1.46.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import * as React27 from 'react';
-import React27__default, { forwardRef, useRef, useMemo, useCallback, useState, isValidElement, useEffect, useLayoutEffect, createElement } from 'react';
+import * as React28 from 'react';
+import React28__default, { forwardRef, useRef, useMemo, useCallback, useState, isValidElement, useEffect, useLayoutEffect, createElement } from 'react';
 import { useRouter } from '@tanstack/react-router';
 import { create } from 'zustand';
 import clsx2, { clsx } from 'clsx';
@@ -2823,7 +2823,7 @@ var OPERATOR_LABEL = {
   containsAll: "Contains all of"
 };
 var OperatorSelect = ({ row, operators, onChangeOperator, error }) => {
-  React27__default.useEffect(() => {
+  React28__default.useEffect(() => {
     if (!operators.length) return;
     if (!operators.includes(row.operator)) {
       onChangeOperator(operators[0]);
@@ -2859,15 +2859,15 @@ function Label2({ className, ...props }) {
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React27.createContext({});
+var FormFieldContext = React28.createContext({});
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React27.useContext(FormFieldContext);
-  const itemContext = React27.useContext(FormItemContext);
+  const fieldContext = React28.useContext(FormFieldContext);
+  const itemContext = React28.useContext(FormItemContext);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -2884,9 +2884,9 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React27.createContext({});
+var FormItemContext = React28.createContext({});
 function FormItem({ className, ...props }) {
-  const id = React27.useId();
+  const id = React28.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 }) {
@@ -2990,7 +2990,7 @@ var Spinner = ({ className, variant, size = "default", ...props }) => /* @__PURE
     ]
   }
 );
-var InputPrimitive = React27.forwardRef(
+var InputPrimitive = React28.forwardRef(
   ({ className, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -3029,7 +3029,7 @@ var inputVariants = cva("", {
     appearance: "filled"
   }
 });
-var Input = React27.forwardRef(
+var Input = React28.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -3062,8 +3062,8 @@ var Input = React27.forwardRef(
       onChange: onChangeProp
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React27.useId();
-    const handleChange = React27.useCallback(
+    const messageId = React28.useId();
+    const handleChange = React28.useCallback(
       (event) => {
         onChangeProp?.(event);
         onValueChange?.(event.target.value);
@@ -3451,20 +3451,20 @@ function DatePicker({
   className,
   ...props
 }) {
-  const today = React27.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const [displayed, setDisplayed] = React27.useState(
+  const today = React28.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [displayed, setDisplayed] = React28.useState(
     selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date()
   );
   minDate = clampToDay(minDate);
   maxDate = clampToDay(maxDate);
-  const disabledSet = React27.useMemo(() => {
+  const disabledSet = React28.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 = React27.useMemo(() => {
+  const weekdays = React28.useMemo(() => {
     const labels = [];
     for (let i = 0; i < 7; i++) {
       const idx = i;
@@ -3473,7 +3473,7 @@ function DatePicker({
     }
     return labels;
   }, [callbacks]);
-  const grid = React27.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
+  const grid = React28.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
   const isDateDisabled = (date) => {
     const d = startOfDay(date);
     if (minDate && d < minDate) return true;
@@ -3483,7 +3483,7 @@ function DatePicker({
   };
   const minYear = minDate?.getFullYear();
   const maxYear = maxDate?.getFullYear();
-  const getMonthLabel = React27.useCallback(
+  const getMonthLabel = React28.useCallback(
     (year, monthIndex) => {
       const label = callbacks?.monthLabel?.(year, monthIndex);
       if (label === null || label === void 0) {
@@ -3493,7 +3493,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const getYearLabel = React27.useCallback(
+  const getYearLabel = React28.useCallback(
     (year) => {
       const label = callbacks?.yearLabel?.(year);
       if (label === null || label === void 0) return String(year);
@@ -3501,7 +3501,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const clampMonthToBounds = React27.useCallback(
+  const clampMonthToBounds = React28.useCallback(
     (year, monthIndex) => {
       let output = monthIndex;
       if (typeof minYear === "number" && year === minYear && minDate) {
@@ -3516,7 +3516,7 @@ function DatePicker({
     },
     [maxDate, minDate, maxYear, minYear]
   );
-  const yearOptions = React27.useMemo(() => {
+  const yearOptions = React28.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : displayYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : displayYear + fallbackWindow;
@@ -3537,7 +3537,7 @@ function DatePicker({
     }
     return years;
   }, [displayYear, maxYear, minYear, selectedDate]);
-  const monthOptions = React27.useMemo(() => {
+  const monthOptions = React28.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 {
@@ -3556,7 +3556,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 = React27.useCallback((nextValue) => {
+  const handleMonthSelect = React28.useCallback((nextValue) => {
     const nextMonth = Number.parseInt(nextValue, 10);
     if (Number.isNaN(nextMonth)) return;
     setDisplayed((prev) => {
@@ -3566,7 +3566,7 @@ function DatePicker({
       return next;
     });
   }, []);
-  const handleYearSelect = React27.useCallback(
+  const handleYearSelect = React28.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -3714,14 +3714,14 @@ var DatePicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React27__default.useState(false);
-  const parser = React27__default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
-  const outputFormatter = React27__default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
-  const labelFormatter = React27__default.useMemo(
+  const [open, setOpen] = React28__default.useState(false);
+  const parser = React28__default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
+  const outputFormatter = React28__default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
+  const labelFormatter = React28__default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter,
     [displayFormatter]
   );
-  const parsedValue = React27__default.useMemo(() => {
+  const parsedValue = React28__default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return value;
     const parsed = parser(value);
@@ -3730,26 +3730,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 = React27__default.useCallback(() => setOpen(false), []);
-  const emitChange = React27__default.useCallback(
+  const handleClose = React28__default.useCallback(() => setOpen(false), []);
+  const emitChange = React28__default.useCallback(
     (next) => {
       onChange?.(next);
       onValueChange?.(next ? outputFormatter(next) : void 0);
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React27__default.useCallback(
+  const handleSelect = React28__default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React27__default.useCallback(() => {
+  const handleClear = React28__default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React27__default.useCallback(
+  const handleOpenChange = React28__default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -3813,6 +3813,7 @@ var DatePicker2 = ({
 
 // src/components/advanceSearch/components/constants/index.ts
 var fallbackShortDateFormat = "DD/MM/YYYY";
+var UUIDregex = /^[0-9a-f]{8}-?[0-9a-f]{4}-?4[0-9a-f]{3}-?[89ab][0-9a-f]{3}-?[0-9a-f]{12}$/i;
 var ConditionDateInput = ({
   row,
   control,
@@ -3939,15 +3940,15 @@ function MonthCal({
   onYearBackward,
   onYearForward
 }) {
-  const today = React27.useMemo(() => {
+  const today = React28.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     now.setDate(1);
     now.setHours(0, 0, 0, 0);
     return now;
   }, []);
-  const selectedMonthDate = React27.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
-  const min = React27.useMemo(() => normalizeMonth(minDate), [minDate]);
-  const max = React27.useMemo(() => normalizeMonth(maxDate), [maxDate]);
+  const selectedMonthDate = React28.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
+  const min = React28.useMemo(() => normalizeMonth(minDate), [minDate]);
+  const max = React28.useMemo(() => normalizeMonth(maxDate), [maxDate]);
   let effectiveMin = min;
   if (min && max && min > max) {
     effectiveMin = max;
@@ -3956,10 +3957,10 @@ function MonthCal({
   const minMonth = effectiveMin?.getMonth();
   const maxYear = max?.getFullYear();
   const maxMonth = max?.getMonth();
-  const [menuYear, setMenuYear] = React27.useState(
+  const [menuYear, setMenuYear] = React28.useState(
     () => selectedMonthDate?.getFullYear() ?? today.getFullYear()
   );
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     if (selectedMonthDate) {
       const year = selectedMonthDate.getFullYear();
       if (year !== menuYear) {
@@ -3967,7 +3968,7 @@ function MonthCal({
       }
     }
   }, [selectedMonthDate, menuYear]);
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     if (typeof minYear === "number" && menuYear < minYear) {
       setMenuYear(minYear);
       return;
@@ -3978,7 +3979,7 @@ function MonthCal({
   }, [minYear, maxYear, menuYear]);
   const disablePrevYear = typeof minYear === "number" ? menuYear <= minYear : false;
   const disableNextYear = typeof maxYear === "number" ? menuYear >= maxYear : false;
-  const yearOptions = React27.useMemo(() => {
+  const yearOptions = React28.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : menuYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : menuYear + fallbackWindow;
@@ -3992,7 +3993,7 @@ function MonthCal({
     }
     return years;
   }, [maxYear, menuYear, minYear]);
-  const formatYearLabel = React27.useCallback(
+  const formatYearLabel = React28.useCallback(
     (year) => {
       const raw = callbacks?.yearLabel?.(year);
       if (raw === null || raw === void 0) return String(year);
@@ -4000,7 +4001,7 @@ function MonthCal({
     },
     [callbacks]
   );
-  const handleYearSelect = React27.useCallback(
+  const handleYearSelect = React28.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -4010,7 +4011,7 @@ function MonthCal({
     },
     [maxYear, minYear]
   );
-  const disabledPairs = React27.useMemo(() => {
+  const disabledPairs = React28.useMemo(() => {
     if (!disabledDates?.length) return [];
     const pairs = [];
     disabledDates.forEach((date) => {
@@ -4155,14 +4156,14 @@ var MonthPicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React27__default.useState(false);
-  const parser = React27__default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
-  const outputFormatter = React27__default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
-  const labelFormatter = React27__default.useMemo(
+  const [open, setOpen] = React28__default.useState(false);
+  const parser = React28__default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
+  const outputFormatter = React28__default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
+  const labelFormatter = React28__default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter2,
     [displayFormatter]
   );
-  const parsedValue = React27__default.useMemo(() => {
+  const parsedValue = React28__default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return normalizeMonth2(value);
     if (typeof value === "string") {
@@ -4174,8 +4175,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 = React27__default.useCallback(() => setOpen(false), []);
-  const emitChange = React27__default.useCallback(
+  const handleClose = React28__default.useCallback(() => setOpen(false), []);
+  const emitChange = React28__default.useCallback(
     (next) => {
       const normalized = next ? normalizeMonth2(next) : void 0;
       onChange?.(normalized);
@@ -4183,18 +4184,18 @@ var MonthPicker2 = ({
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React27__default.useCallback(
+  const handleSelect = React28__default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React27__default.useCallback(() => {
+  const handleClear = React28__default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React27__default.useCallback(
+  const handleOpenChange = React28__default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -4302,51 +4303,70 @@ var ConditionMonthInput = ({ row, control, onClear }) => {
   }
   return renderPicker(`value_${row.id}`, "value");
 };
-var ConditionDropdownInput = ({ row, control, fieldSchema, onClear }) => /* @__PURE__ */ jsx(
-  FormField,
-  {
-    control,
-    name: `value_${row.id}`,
-    rules: { required: "This field is required." },
-    render: ({ field }) => {
-      const handleClear = () => {
-        field.onChange("");
-        onClear("value");
-      };
-      const hasValue = Boolean(field.value);
-      const clearLabel = "Clear selected value";
-      return /* @__PURE__ */ jsxs(FormItem, { className: "relative", children: [
-        /* @__PURE__ */ jsxs(Select, { value: field.value ?? "", onValueChange: field.onChange, children: [
-          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
-            SelectTrigger,
+var ConditionDropdownInput = ({ row, control, fieldSchema, onClear }) => {
+  const [options, setOptions] = useState([]);
+  const [loading, setIsLoading] = useState(false);
+  useEffect(() => {
+    if (!fieldSchema) {
+      return;
+    }
+    if (fieldSchema.fetchOptions) {
+      setIsLoading(true);
+      fieldSchema.fetchOptions().then((fetchedOptions) => {
+        setOptions(fetchedOptions);
+      }).catch((err) => {
+        console.error("Failed to fetch lookup options", err);
+      }).finally(() => setIsLoading(false));
+    } else {
+      setOptions(fieldSchema.options);
+    }
+  }, [fieldSchema]);
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name: `value_${row.id}`,
+      rules: { required: "This field is required." },
+      render: ({ field }) => {
+        const handleClear = () => {
+          field.onChange("");
+          onClear("value");
+        };
+        const hasValue = Boolean(field.value);
+        const clearLabel = "Clear selected value";
+        return /* @__PURE__ */ jsxs(FormItem, { className: "relative", children: [
+          /* @__PURE__ */ jsxs(Select, { value: field.value ?? "", onValueChange: field.onChange, children: [
+            /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+              SelectTrigger,
+              {
+                className: cn(
+                  "w-full justify-between rounded-md bg-white px-4 text-sm font-medium text-gray-700 shadow-none focus:ring-0",
+                  hasValue ? "pr-8" : "pr-4"
+                ),
+                "data-testid": "advsearch-dropdown-value",
+                children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select value" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(SelectContent, { className: "w-full min-w-[unset]", children: loading ? /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-inherit", children: fieldSchema?.loadingMessage ?? "Loading..." }) }) : options.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-inherit", children: fieldSchema?.noOptionsMessage ?? "No records found." }) }) : options.map((opt) => /* @__PURE__ */ jsxs(SelectItem, { value: opt.value, className: cn(opt.labelStyle), children: [
+              opt.decorator,
+              opt.label
+            ] }, opt.value)) })
+          ] }),
+          hasValue && /* @__PURE__ */ jsx(
+            ClearButton,
             {
-              className: cn(
-                "w-full justify-between rounded-md bg-white px-4 text-sm font-medium text-gray-700 shadow-none focus:ring-0",
-                hasValue ? "pr-8" : "pr-4"
-              ),
-              "data-testid": "advsearch-dropdown-value",
-              children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select value" })
+              onClick: handleClear,
+              ariaLabel: clearLabel,
+              title: clearLabel,
+              className: "absolute right-3 top-1/2 z-10 -translate-y-1/2"
             }
-          ) }),
-          /* @__PURE__ */ jsx(SelectContent, { className: "w-full min-w-[unset]", children: fieldSchema && "options" in fieldSchema && fieldSchema.options.map((opt) => /* @__PURE__ */ jsxs(SelectItem, { value: opt.value, className: cn(opt.labelStyle), children: [
-            opt.decorator,
-            opt.label
-          ] }, opt.value)) })
-        ] }),
-        hasValue && /* @__PURE__ */ jsx(
-          ClearButton,
-          {
-            onClick: handleClear,
-            ariaLabel: clearLabel,
-            title: clearLabel,
-            className: "absolute right-3 top-1/2 z-10 -translate-y-1/2"
-          }
-        ),
-        /* @__PURE__ */ jsx(FormMessage, { className: "absolute left-0 top-full mt-1 text-xs text-red-600" })
-      ] });
+          ),
+          /* @__PURE__ */ jsx(FormMessage, { className: "absolute left-0 top-full mt-1 text-xs text-red-600" })
+        ] });
+      }
     }
-  }
-);
+  );
+};
 var ConditionCheckboxInput = ({ row, control, onClear }) => /* @__PURE__ */ jsx(
   FormField,
   {
@@ -5304,13 +5324,12 @@ var TextBuilder = class {
 };
 
 // src/components/advanceSearch/builder/uuid.ts
-var regex = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
 var UUIDBuilder = class {
   build(row) {
     if (Array.isArray(row.value)) {
       return {};
     }
-    if (!regex.test(row.value)) {
+    if (!UUIDregex.test(row.value)) {
       return { [row.fieldName]: {} };
     }
     const sharedOptions = {
@@ -5414,7 +5433,7 @@ var sanitizeInput = (val) => {
   if (/\p{Cc}/u.test(val)) return "__INVALID_CONTROL_CHAR__";
   return trimmed.replace(/\s+/g, " ");
 };
-var numericTypes = ["number", "integer", "decimal"];
+var numericTypes = ["number"];
 var dateTypes = ["date", "datemonth"];
 var validateByFieldType = (value, fieldType) => {
   if (!value) return { valid: true };
@@ -5426,9 +5445,9 @@ var validateByFieldType = (value, fieldType) => {
       return { valid: false, message: "Please enter a valid number." };
     }
   }
-  if (fieldType === "boolean") {
-    if (!["true", "false"].includes(value.toLowerCase())) {
-      return { valid: false, message: "Please enter a boolean value (true/false)." };
+  if (fieldType === "uuid") {
+    if (!UUIDregex.test(value)) {
+      return { valid: false, message: "Please enter a valid UUID." };
     }
   }
   if (dateTypes.includes(fieldType)) {
@@ -5471,7 +5490,7 @@ var AdvanceSearch = ({
     defaultValues: {}
   });
   const { handleSubmit, unregister, resetField, getValues, clearErrors, setError } = form;
-  const [operatorErrors, setOperatorErrors] = React27__default.useState({});
+  const [operatorErrors, setOperatorErrors] = React28__default.useState({});
   const clearOperatorError = useCallback(
     (rowId) => {
       setOperatorErrors((prev) => {
@@ -5908,14 +5927,14 @@ var useControllableState = ({
   value
 }) => {
   const isControlled = typeof value !== "undefined";
-  const [internalValue, setInternalValue] = React27.useState(() => {
+  const [internalValue, setInternalValue] = React28.useState(() => {
     return isControlled ? value : defaultValue;
   });
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     if (!isControlled) return;
     setInternalValue(value);
   }, [isControlled, value]);
-  const setValue = React27.useCallback(
+  const setValue = React28.useCallback(
     (nextValue) => {
       if (isControlled) return;
       setInternalValue(nextValue);
@@ -5931,7 +5950,7 @@ var useControllableState = ({
 var useControllableState_default = useControllableState;
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 var useBindRef = ({ ref, value }) => {
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     if (!ref) return;
     ref.current = value;
     return () => {
@@ -6124,7 +6143,7 @@ var StatusContentSlot = ({
     content
   ] });
 };
-var StatusContentSlot_default = React27__default.memo(StatusContentSlot);
+var StatusContentSlot_default = React28__default.memo(StatusContentSlot);
 var stateOptions = [
   "columnFilters",
   "globalFilter",
@@ -6556,7 +6575,7 @@ var ColumnSeparator = ({ show, className, ...props }) => {
     }
   );
 };
-var ColumnSeparator_default = React27__default.memo(ColumnSeparator);
+var ColumnSeparator_default = React28__default.memo(ColumnSeparator);
 
 // src/components/data-table/helpers.ts
 function getColumnPinningInfo(column) {
@@ -7872,8 +7891,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] = React27__default.useState(false);
-  React27__default.useEffect(() => {
+  const [isFocused, setIsFocused] = React28__default.useState(false);
+  React28__default.useEffect(() => {
     const handler = () => {
       const { from, to } = editor.state.selection;
       const position = getPos();
@@ -9065,7 +9084,7 @@ function ToolbarPlugin({
       isLink: hasLink
     }));
   }, []);
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     return mergeRegister(
       editor.registerCommand(
         CAN_UNDO_COMMAND,
@@ -9651,7 +9670,7 @@ function ControlledValuePlugin({
   trackAppliedValue
 }) {
   const [editor] = useLexicalComposerContext();
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     if (value == null || trackAppliedValue.current === value) {
       return;
     }
@@ -9675,14 +9694,14 @@ function ControlledValuePlugin({
 }
 function EditableStatePlugin({ editable }) {
   const [editor] = useLexicalComposerContext();
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     editor.setEditable(editable);
   }, [editor, editable]);
   return null;
 }
 function ImagesPlugin() {
   const [editor] = useLexicalComposerContext();
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     return editor.registerCommand(
       INSERT_IMAGE_COMMAND,
       (payload) => {
@@ -9963,9 +9982,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React27.createContext(null);
+var SidebarContext = React28.createContext(null);
 function useSidebar() {
-  const context = React27.useContext(SidebarContext);
+  const context = React28.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -9981,10 +10000,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React27.useState(false);
-  const [_open, _setOpen] = React27.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React28.useState(false);
+  const [_open, _setOpen] = React28.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React27.useCallback(
+  const setOpen = React28.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -9996,10 +10015,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React27.useCallback(() => {
+  const toggleSidebar = React28.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -10010,7 +10029,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React27.useMemo(
+  const contextValue = React28.useMemo(
     () => ({
       state,
       open,
@@ -10452,7 +10471,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React27.useMemo(() => {
+  const width = React28.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -10922,7 +10941,7 @@ function SortableRow({
     id: value,
     disabled: name === "columns.0.id"
   });
-  const style = React27.useMemo(
+  const style = React28.useMemo(
     () => ({
       transform: CSS.Transform.toString(transform),
       transition
@@ -11324,7 +11343,7 @@ function getCandidateWidths({
   }
   return DEVICE_SIZES;
 }
-var Image2 = React27.forwardRef(function Image3({
+var Image2 = React28.forwardRef(function Image3({
   src,
   alt,
   width,
@@ -11354,34 +11373,34 @@ var Image2 = React27.forwardRef(function Image3({
   } = imgProps;
   const widthNumber = toNumber(width);
   const heightNumber = toNumber(height);
-  React27.useEffect(() => {
+  React28.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 = React27.useMemo(
+  const candidateWidths = React28.useMemo(
     () => getCandidateWidths({ width: widthNumber, sizes, fill }),
     [fill, sizes, widthNumber]
   );
   const largestWidth = candidateWidths[candidateWidths.length - 1] ?? widthNumber ?? DEVICE_SIZES[DEVICE_SIZES.length - 1];
-  const computedSrc = React27.useMemo(() => {
+  const computedSrc = React28.useMemo(() => {
     if (unoptimized) {
       return src;
     }
     return loader({ src, width: largestWidth, quality });
   }, [largestWidth, loader, quality, src, unoptimized]);
-  const computedSrcSet = React27.useMemo(() => {
+  const computedSrcSet = React28.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] = React27.useState(false);
-  const internalRef = React27.useRef(null);
-  const setRefs = React27.useCallback(
+  const [isLoaded, setIsLoaded] = React28.useState(false);
+  const internalRef = React28.useRef(null);
+  const setRefs = React28.useCallback(
     (node) => {
       internalRef.current = node;
       if (!ref) {
@@ -11395,7 +11414,7 @@ var Image2 = React27.forwardRef(function Image3({
     },
     [ref]
   );
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     const image = internalRef.current;
     if (!image) {
       return;
@@ -11407,7 +11426,7 @@ var Image2 = React27.forwardRef(function Image3({
       setIsLoaded(false);
     }
   }, [onLoadingComplete, src]);
-  const handleLoad = React27.useCallback(
+  const handleLoad = React28.useCallback(
     (event) => {
       setIsLoaded(true);
       onLoadProp?.(event);
@@ -11419,7 +11438,7 @@ var Image2 = React27.forwardRef(function Image3({
   const fetchPriority = priority ? "high" : fetchPriorityProp;
   const decoding = decodingProp ?? "async";
   const resolvedObjectFit = objectFit ?? (fill ? "cover" : void 0);
-  const wrapperStyle = React27.useMemo(
+  const wrapperStyle = React28.useMemo(
     () => ({
       position: "relative",
       display: fill ? "block" : "inline-block",
@@ -11429,7 +11448,7 @@ var Image2 = React27.forwardRef(function Image3({
     }),
     [fill, height, width]
   );
-  const imageStyle = React27.useMemo(
+  const imageStyle = React28.useMemo(
     () => ({
       width: fill ? "100%" : formatDimension(width) ?? void 0,
       height: fill ? "100%" : formatDimension(height) ?? void 0,
@@ -11578,7 +11597,7 @@ var InfoIcon = ({ size = "1em", className, ...props }) => {
     }
   );
 };
-var InfoIcon_default = React27__default.memo(InfoIcon);
+var InfoIcon_default = React28__default.memo(InfoIcon);
 var Navbar = ({
   className,
   title,
@@ -11710,7 +11729,7 @@ var Navbar = ({
     }
   );
 };
-var navbar_default = React27__default.memo(Navbar);
+var navbar_default = React28__default.memo(Navbar);
 var usePreventPageLeaveStore = create((set) => ({
   isPreventing: false,
   setPreventing: (value) => set({ isPreventing: value })
@@ -11750,7 +11769,7 @@ var DefaultHeader = ({
   classNames,
   rightActions
 }) => {
-  const titleRef = React27.useRef(null);
+  const titleRef = React28.useRef(null);
   const isTruncated = useTruncated_default({ elementRef: titleRef });
   const textElement = title ? /* @__PURE__ */ jsx(
     "span",
@@ -12089,7 +12108,7 @@ function isFragment(object) {
 var isValidText = (val) => ["string", "number"].includes(typeof val);
 function toArray(children, option = {}) {
   let ret = [];
-  React27.Children.forEach(children, (child) => {
+  React28.Children.forEach(children, (child) => {
     if ((child === void 0 || child === null) && !option.keepEmpty) {
       return;
     }
@@ -12103,9 +12122,9 @@ function toArray(children, option = {}) {
   });
   return ret;
 }
-var MeasureText = React27.forwardRef(({ style, children }, ref) => {
-  const spanRef = React27.useRef(null);
-  React27.useImperativeHandle(ref, () => ({
+var MeasureText = React28.forwardRef(({ style, children }, ref) => {
+  const spanRef = React28.useRef(null);
+  React28.useImperativeHandle(ref, () => ({
     isExceed: () => {
       const span = spanRef.current;
       return span.scrollHeight > span.clientHeight;
@@ -12163,19 +12182,19 @@ var lineClipStyle = {
 };
 function EllipsisMeasure(props) {
   const { enableMeasure, width, text, children, rows, expanded, miscDeps, onEllipsis } = props;
-  const nodeList = React27.useMemo(() => toArray(text), [text]);
-  const nodeLen = React27.useMemo(() => getNodesLen(nodeList), [text]);
-  const fullContent = React27.useMemo(() => children(nodeList, false), [text]);
-  const [ellipsisCutIndex, setEllipsisCutIndex] = React27.useState(null);
-  const cutMidRef = React27.useRef(null);
-  const measureWhiteSpaceRef = React27.useRef(null);
-  const needEllipsisRef = React27.useRef(null);
-  const descRowsEllipsisRef = React27.useRef(null);
-  const symbolRowEllipsisRef = React27.useRef(null);
-  const [canEllipsis, setCanEllipsis] = React27.useState(false);
-  const [needEllipsis, setNeedEllipsis] = React27.useState(STATUS_MEASURE_NONE);
-  const [ellipsisHeight, setEllipsisHeight] = React27.useState(0);
-  const [parentWhiteSpace, setParentWhiteSpace] = React27.useState(null);
+  const nodeList = React28.useMemo(() => toArray(text), [text]);
+  const nodeLen = React28.useMemo(() => getNodesLen(nodeList), [text]);
+  const fullContent = React28.useMemo(() => children(nodeList, false), [text]);
+  const [ellipsisCutIndex, setEllipsisCutIndex] = React28.useState(null);
+  const cutMidRef = React28.useRef(null);
+  const measureWhiteSpaceRef = React28.useRef(null);
+  const needEllipsisRef = React28.useRef(null);
+  const descRowsEllipsisRef = React28.useRef(null);
+  const symbolRowEllipsisRef = React28.useRef(null);
+  const [canEllipsis, setCanEllipsis] = React28.useState(false);
+  const [needEllipsis, setNeedEllipsis] = React28.useState(STATUS_MEASURE_NONE);
+  const [ellipsisHeight, setEllipsisHeight] = React28.useState(0);
+  const [parentWhiteSpace, setParentWhiteSpace] = React28.useState(null);
   useIsomorphicLayoutEffect(() => {
     if (enableMeasure && width && nodeLen) {
       setNeedEllipsis(STATUS_MEASURE_PREPARE);
@@ -12218,7 +12237,7 @@ function EllipsisMeasure(props) {
       setEllipsisCutIndex(isOverflow ? [minIndex, targetMidIndex] : [targetMidIndex, maxIndex]);
     }
   }, [ellipsisCutIndex, cutMidIndex]);
-  const finalContent = React27.useMemo(() => {
+  const finalContent = React28.useMemo(() => {
     if (!enableMeasure) {
       return children(nodeList, false);
     }
@@ -12309,10 +12328,10 @@ var Truncated = ({
   tooltipProps,
   tooltipContentProps
 }) => {
-  const elementRef = React27.useRef(null);
-  const [open, setOpen] = React27.useState(false);
-  const [isTruncated, setIsTruncated] = React27.useState(false);
-  const [measureWidth, setMeasureWidth] = React27.useState(0);
+  const elementRef = React28.useRef(null);
+  const [open, setOpen] = React28.useState(false);
+  const [isTruncated, setIsTruncated] = React28.useState(false);
+  const [measureWidth, setMeasureWidth] = React28.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;
@@ -12337,13 +12356,13 @@ var Truncated = ({
       setIsTruncated(false);
     }
   }, [enableMeasure]);
-  const truncationClass = React27.useMemo(() => {
+  const truncationClass = React28.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 = React27.useMemo(() => {
+  const clampedStyle = React28.useMemo(() => {
     if (!lineClampLines) return style;
     return {
       ...style,
@@ -12405,7 +12424,7 @@ var Truncated = ({
   );
 };
 var truncated_default = Truncated;
-var InputPrimitive2 = React27.forwardRef(
+var InputPrimitive2 = React28.forwardRef(
   ({ className, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -12444,7 +12463,7 @@ var inputVariants2 = cva("", {
     appearance: "filled"
   }
 });
-var Input2 = React27.forwardRef(
+var Input2 = React28.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -12477,8 +12496,8 @@ var Input2 = React27.forwardRef(
       onChange: onChangeProp
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React27.useId();
-    const handleChange = React27.useCallback(
+    const messageId = React28.useId();
+    const handleChange = React28.useCallback(
       (event) => {
         onChangeProp?.(event);
         onValueChange?.(event.target.value);
@@ -12593,11 +12612,11 @@ var InputNumber = ({
   onBlur,
   ...props
 }) => {
-  const [internalValue, setInternalValue] = React27.useState(
+  const [internalValue, setInternalValue] = React28.useState(
     () => parseToNumber(value) ?? parseToNumber(defaultValue)
   );
-  const [stepperChanged, setStepperChanged] = React27.useState(false);
-  React27.useEffect(() => {
+  const [stepperChanged, setStepperChanged] = React28.useState(false);
+  React28.useEffect(() => {
     const parsed = parseToNumber(value);
     if (parsed !== void 0) setInternalValue(parsed);
   }, [value]);
@@ -12995,13 +13014,13 @@ var useFieldNames = ({
   fieldNames
 }) => {
   const { label: labelFieldKey = "label", value: valueFieldKey = "value" } = fieldNames || {};
-  const getLabelField = React27__default.useCallback(
+  const getLabelField = React28__default.useCallback(
     (option) => {
       return option?.[labelFieldKey];
     },
     [labelFieldKey]
   );
-  const getValueField = React27__default.useCallback(
+  const getValueField = React28__default.useCallback(
     (option) => {
       return option?.[valueFieldKey];
     },
@@ -13033,11 +13052,11 @@ var VirtualizedCommand = ({
   onFocus
 }) => {
   const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
-  const internalOptions = React27.useMemo(() => options ?? [], [options]);
-  const [filteredOptions, setFilteredOptions] = React27.useState(internalOptions);
-  const [focusedIndex, setFocusedIndex] = React27.useState(0);
-  const [isKeyboardNavActive, setIsKeyboardNavActive] = React27.useState(false);
-  const parentRef = React27.useRef(null);
+  const internalOptions = React28.useMemo(() => options ?? [], [options]);
+  const [filteredOptions, setFilteredOptions] = React28.useState(internalOptions);
+  const [focusedIndex, setFocusedIndex] = React28.useState(0);
+  const [isKeyboardNavActive, setIsKeyboardNavActive] = React28.useState(false);
+  const parentRef = React28.useRef(null);
   const virtualizer = useVirtualizer({
     count: filteredOptions.length,
     getScrollElement: () => parentRef.current,
@@ -13045,14 +13064,14 @@ var VirtualizedCommand = ({
     overscan: 2
   });
   const virtualOptions = virtualizer.getVirtualItems();
-  const dynamicHeight = React27.useMemo(() => {
+  const dynamicHeight = React28.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 = React27.useCallback(
+  const scrollToIndex = React28.useCallback(
     (index) => {
       virtualizer.scrollToIndex(index, {
         align: "center"
@@ -13060,7 +13079,7 @@ var VirtualizedCommand = ({
     },
     [virtualizer]
   );
-  const handleSearch = React27.useCallback(
+  const handleSearch = React28.useCallback(
     (search) => {
       setIsKeyboardNavActive(false);
       setFilteredOptions(
@@ -13075,7 +13094,7 @@ var VirtualizedCommand = ({
     },
     [filterOption, getLabelField, internalOptions]
   );
-  const handleKeyDown = React27.useCallback(
+  const handleKeyDown = React28.useCallback(
     (event) => {
       switch (event.key) {
         case "ArrowDown": {
@@ -13110,7 +13129,7 @@ var VirtualizedCommand = ({
     },
     [filteredOptions, focusedIndex, getValueField, onSelect, scrollToIndex]
   );
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     if (value) {
       const option = filteredOptions.find((option2) => {
         const optionValue = getValueField(option2);
@@ -13237,13 +13256,13 @@ var ComboboxInner = ({
     defaultValue,
     value
   });
-  const currentSelectedOption = React27.useMemo(() => {
+  const currentSelectedOption = React28.useMemo(() => {
     return options?.find((option) => {
       const optionValue = getValueField(option);
       return optionValue === selectedValue;
     });
   }, [getValueField, options, selectedValue]);
-  const renderValue = React27.useMemo(() => {
+  const renderValue = React28.useMemo(() => {
     if (!selectedValue) return placeholder2;
     if (currentSelectedOption) {
       return getLabelField(currentSelectedOption);
@@ -13253,7 +13272,7 @@ var ComboboxInner = ({
     }
     return null;
   }, [currentSelectedOption, getLabelField, placeholder2, selectedValue, showValueWhenNoMatch]);
-  const handleSelect = React27.useCallback(
+  const handleSelect = React28.useCallback(
     (selected, option) => {
       setSelectedValue(selected);
       setOpenPopover(false);
@@ -13266,7 +13285,7 @@ var ComboboxInner = ({
     },
     [onOpenChange, onSelect, setOpenPopover, setSelectedValue]
   );
-  const handleOpenPopover = React27.useCallback(
+  const handleOpenPopover = React28.useCallback(
     (isOpen) => {
       if (disabled) return;
       setOpenPopover(isOpen);
@@ -13276,7 +13295,7 @@ var ComboboxInner = ({
     },
     [disabled, onOpenChange, setOpenPopover]
   );
-  const handleClear = React27.useCallback(
+  const handleClear = React28.useCallback(
     (event) => {
       event.stopPropagation();
       setSelectedValue(void 0);
@@ -13365,7 +13384,7 @@ var ComboboxInner = ({
     )
   ] });
 };
-var Combobox = React27.forwardRef(ComboboxInner);
+var Combobox = React28.forwardRef(ComboboxInner);
 var Combobox_default = Combobox;
 var TruncatedMouseEnterDiv = ({
   value,