@sustaina/shared-ui 1.9.6 → 1.10.1

package/dist/index.js

@@ -4,7 +4,7 @@ var AccordionPrimitive = require('@radix-ui/react-accordion');
 var clsx2 = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var React6 = require('react');
+var React5 = require('react');
 var dateFns = require('date-fns');
 var lucideReact = require('lucide-react');
 var reactDom = require('react-dom');
@@ -15,8 +15,9 @@ var LabelPrimitive = require('@radix-ui/react-label');
 var classVarianceAuthority = require('class-variance-authority');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
+var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 var reactTable = require('@tanstack/react-table');
-var DialogPrimitive = require('@radix-ui/react-dialog');
+var SheetPrimitive = require('@radix-ui/react-dialog');
 var zod$1 = require('@hookform/resolvers/zod');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
@@ -71,12 +72,13 @@ function _interopNamespace(e) {
 
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
-var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
+var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
-var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
+var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
@@ -579,7 +581,7 @@ function AccordionContent({
   );
 }
 var ExpandCollapse = ({ title, children, portalId }) => {
-  const [isOpen, setIsOpen] = React6.useState(false);
+  const [isOpen, setIsOpen] = React5.useState(false);
   const Panel = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -673,31 +675,31 @@ function makeNewRow(field) {
   };
 }
 function useAdvanceSearch({ fields, limitRows }) {
-  const [rows, setRows] = React6.useState([makeNewRow(fields[0])]);
-  const updateRows = React6.useCallback((next) => {
+  const [rows, setRows] = React5.useState([makeNewRow(fields[0])]);
+  const updateRows = React5.useCallback((next) => {
     setRows(next);
   }, []);
-  const operatorsForField = React6.useCallback(
+  const operatorsForField = React5.useCallback(
     (fieldName) => {
       const t = getFieldType(fields, fieldName);
       return OPERATOR_MAP[t];
     },
     [fields]
   );
-  const addRow = React6.useCallback(() => {
+  const addRow = React5.useCallback(() => {
     if (limitRows && rows.length >= limitRows) return;
     const lastRow = rows[rows.length - 1];
     const lastField = fields.find((f) => f.name === lastRow?.fieldName) ?? fields[0];
     updateRows([...rows, makeNewRow(lastField)]);
   }, [rows, fields, updateRows, limitRows]);
-  const removeRow = React6.useCallback(
+  const removeRow = React5.useCallback(
     (id) => {
       if (rows.length === 1) return;
       updateRows(rows.filter((r) => r.id !== id));
     },
     [rows, updateRows]
   );
-  const clearRow = React6.useCallback(
+  const clearRow = React5.useCallback(
     (id) => {
       updateRows(
         rows.map((r) => {
@@ -726,10 +728,10 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, fields, updateRows]
   );
-  const clearAllRow = React6.useCallback(() => {
+  const clearAllRow = React5.useCallback(() => {
     updateRows([makeNewRow(fields[0])]);
   }, [fields, updateRows]);
-  const changeField = React6.useCallback(
+  const changeField = React5.useCallback(
     (id, fieldName) => {
       updateRows(
         rows.map((r) => {
@@ -741,7 +743,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, fields, updateRows]
   );
-  const changeOperator = React6.useCallback(
+  const changeOperator = React5.useCallback(
     (id, operator) => {
       updateRows(
         rows.map((r) => {
@@ -772,7 +774,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, updateRows]
   );
-  const changeValue = React6.useCallback(
+  const changeValue = React5.useCallback(
     (id, which, val) => {
       updateRows(
         rows.map((r) => {
@@ -784,7 +786,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, updateRows]
   );
-  const fieldOptions = React6.useMemo(
+  const fieldOptions = React5.useMemo(
     () => fields.map((f) => ({
       value: f.name,
       label: f.label ?? f.name
@@ -972,7 +974,7 @@ var OPERATOR_LABEL = {
   containsAll: "Contains all of"
 };
 var OperatorSelect = ({ row, operators, onChangeOperator, error }) => {
-  React6__namespace.default.useEffect(() => {
+  React5__namespace.default.useEffect(() => {
     if (!operators.length) return;
     if (!operators.includes(row.operator)) {
       onChangeOperator(operators[0]);
@@ -999,7 +1001,7 @@ function Label2({ className, ...props }) {
     {
       "data-slot": "label",
       className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "flex items-center gap-2 text-sm leading-none font-medium group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className
       ),
       ...props
@@ -1007,15 +1009,15 @@ function Label2({ className, ...props }) {
   );
 }
 var Form = reactHookForm.FormProvider;
-var FormFieldContext = React6__namespace.createContext({});
+var FormFieldContext = React5__namespace.createContext({});
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React6__namespace.useContext(FormFieldContext);
-  const itemContext = React6__namespace.useContext(FormItemContext);
+  const fieldContext = React5__namespace.useContext(FormFieldContext);
+  const itemContext = React5__namespace.useContext(FormItemContext);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1032,9 +1034,9 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React6__namespace.createContext({});
+var FormItemContext = React5__namespace.createContext({});
 function FormItem({ className, ...props }) {
-  const id = React6__namespace.useId();
+  const id = React5__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
 }
 function FormLabel({ className, ...props }) {
@@ -1093,7 +1095,7 @@ function FormMessage({ className, ...props }) {
     }
   );
 }
-var InputPrimitive = React6__namespace.forwardRef(
+var InputPrimitive = React5__namespace.forwardRef(
   ({ className, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -1128,7 +1130,7 @@ var spinnerVariants = classVarianceAuthority.cva("relative inline-block aspect-s
   },
   defaultVariants: { variant: "primary", size: "default" }
 });
-var Spinner = ({ className, variant, size = "default" }) => /* @__PURE__ */ jsxRuntime.jsxs(
+var Spinner = ({ className, variant, size = "default", ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "div",
   {
     role: "status",
@@ -1138,6 +1140,7 @@ var Spinner = ({ className, variant, size = "default" }) => /* @__PURE__ */ jsxR
       className
     ),
     style: typeof size === "number" ? { width: size, height: size } : void 0,
+    ...props,
     children: [
       Array.from({ length: 12 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -1177,7 +1180,7 @@ var inputVariants = classVarianceAuthority.cva("", {
     appearance: "filled"
   }
 });
-var Input = React6__namespace.forwardRef(
+var Input = React5__namespace.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -1206,7 +1209,7 @@ var Input = React6__namespace.forwardRef(
       ...inputProps
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React6__namespace.useId();
+    const messageId = React5__namespace.useId();
     const resolvedAriaInvalid = typeof ariaInvalid === "string" ? ariaInvalid : ariaInvalid ? true : void 0;
     const describedBy = validationMessage ? [ariaDescribedByProp, messageId].filter(Boolean).join(" ") : ariaDescribedByProp;
     const controlWrapperClassName = cn(
@@ -1390,7 +1393,7 @@ var buttonVariants = classVarianceAuthority.cva(
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
-        cancel: "border bg-[#8B8B8B] text-black shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        cancel: "border bg-[#8B8B8B] text-accent-foreground shadow-xs hover:bg-accent hover:text-black dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         defaultSelect: "bg-primary text-primary-foreground shadow-xs hover:bg-sus-primary/90 py-2",
         defaultOutline: "border bg-background py-2 shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         warning: "border bg-[#f9d629] text-black shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-[#f9d629] dark:hover:bg-[#f9d629]/50"
@@ -1481,6 +1484,7 @@ var addMonths = (date, n) => {
   return d;
 };
 var daysInMonth = (year, monthIndex) => new Date(year, monthIndex + 1, 0).getDate();
+var DEFAULT_MONTH_FORMATTER = new Intl.DateTimeFormat("en-US", { month: "short" });
 function buildCalendarGrid(displayed, weekStartsOnMonday = true) {
   const year = displayed.getFullYear();
   const month = displayed.getMonth();
@@ -1521,22 +1525,20 @@ function DatePicker({
   className,
   ...props
 }) {
-  const today = React6__namespace.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const [displayed, setDisplayed] = React6__namespace.useState(
+  const today = React5__namespace.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [displayed, setDisplayed] = React5__namespace.useState(
     selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date()
   );
   minDate = clampToDay(minDate);
   maxDate = clampToDay(maxDate);
-  const disabledSet = React6__namespace.useMemo(() => {
+  const disabledSet = React5__namespace.useMemo(() => {
     const s = /* @__PURE__ */ new Set();
     disabledDates?.forEach((d) => s.add(startOfDay(d).toISOString()));
     return s;
   }, [disabledDates]);
   const displayYear = displayed.getFullYear();
   const displayMonth = displayed.getMonth();
-  const monthLabel = callbacks?.monthLabel?.(displayYear, displayMonth) ?? new Intl.DateTimeFormat("en-US", { month: "short" }).format(displayed);
-  const yearLabel = callbacks?.yearLabel?.(displayYear) ?? String(displayYear);
-  const weekdays = React6__namespace.useMemo(() => {
+  const weekdays = React5__namespace.useMemo(() => {
     const labels = [];
     for (let i = 0; i < 7; i++) {
       const idx = i;
@@ -1545,7 +1547,7 @@ function DatePicker({
     }
     return labels;
   }, [callbacks]);
-  const grid = React6__namespace.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
+  const grid = React5__namespace.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
   const isDateDisabled = (date) => {
     const d = startOfDay(date);
     if (minDate && d < minDate) return true;
@@ -1553,6 +1555,106 @@ function DatePicker({
     if (disabledSet.has(d.toISOString())) return true;
     return false;
   };
+  const minYear = minDate?.getFullYear();
+  const maxYear = maxDate?.getFullYear();
+  const getMonthLabel = React5__namespace.useCallback(
+    (year, monthIndex) => {
+      const label = callbacks?.monthLabel?.(year, monthIndex);
+      if (label === null || label === void 0) {
+        return DEFAULT_MONTH_FORMATTER.format(new Date(year, monthIndex, 1));
+      }
+      return label;
+    },
+    [callbacks]
+  );
+  const getYearLabel = React5__namespace.useCallback(
+    (year) => {
+      const label = callbacks?.yearLabel?.(year);
+      if (label === null || label === void 0) return String(year);
+      return typeof label === "string" ? label : String(label);
+    },
+    [callbacks]
+  );
+  const clampMonthToBounds = React5__namespace.useCallback(
+    (year, monthIndex) => {
+      let output = monthIndex;
+      if (typeof minYear === "number" && year === minYear && minDate) {
+        const boundary = minDate.getMonth();
+        if (output < boundary) output = boundary;
+      }
+      if (typeof maxYear === "number" && year === maxYear && maxDate) {
+        const boundary = maxDate.getMonth();
+        if (output > boundary) output = boundary;
+      }
+      return output;
+    },
+    [maxDate, minDate, maxYear, minYear]
+  );
+  const yearOptions = React5__namespace.useMemo(() => {
+    const fallbackWindow = 50;
+    const start = typeof minYear === "number" ? minYear : displayYear - fallbackWindow;
+    const end = typeof maxYear === "number" ? maxYear : displayYear + fallbackWindow;
+    const years = [];
+    for (let year = start; year <= end; year++) {
+      years.push(year);
+    }
+    if (!years.includes(displayYear)) {
+      years.push(displayYear);
+      years.sort((a, b) => a - b);
+    }
+    if (selectedDate) {
+      const selectedYear = selectedDate.getFullYear();
+      if (!years.includes(selectedYear)) {
+        years.push(selectedYear);
+        years.sort((a, b) => a - b);
+      }
+    }
+    return years;
+  }, [displayYear, maxYear, minYear, selectedDate]);
+  const monthOptions = React5__namespace.useMemo(() => {
+    const months = Array.from({ length: 12 }, (_, monthIndex) => {
+      const disabled = typeof minYear === "number" && displayYear === minYear && minDate && monthIndex < minDate.getMonth() || typeof maxYear === "number" && displayYear === maxYear && maxDate && monthIndex > maxDate.getMonth();
+      return {
+        value: monthIndex,
+        disabled,
+        label: getMonthLabel(displayYear, monthIndex)
+      };
+    });
+    const currentMonthExists = months.some((option) => option.value === displayMonth);
+    if (!currentMonthExists) {
+      months.push({
+        value: displayMonth,
+        disabled: false,
+        label: getMonthLabel(displayYear, displayMonth)
+      });
+    }
+    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 = React5__namespace.useCallback((nextValue) => {
+    const nextMonth = Number.parseInt(nextValue, 10);
+    if (Number.isNaN(nextMonth)) return;
+    setDisplayed((prev) => {
+      const next = new Date(prev);
+      next.setDate(1);
+      next.setMonth(nextMonth);
+      return next;
+    });
+  }, []);
+  const handleYearSelect = React5__namespace.useCallback(
+    (nextValue) => {
+      const nextYear = Number.parseInt(nextValue, 10);
+      if (Number.isNaN(nextYear)) return;
+      setDisplayed((prev) => {
+        const next = new Date(prev);
+        next.setFullYear(nextYear);
+        const adjustedMonth = clampMonthToBounds(nextYear, next.getMonth());
+        next.setMonth(adjustedMonth);
+        next.setDate(1);
+        return next;
+      });
+    },
+    [clampMonthToBounds]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("min-w-[260px] w-[300px] p-3", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1570,10 +1672,46 @@ function DatePicker({
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4 opacity-70" })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold select-none", children: [
-        monthLabel,
-        " ",
-        yearLabel
+      /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: String(displayMonth), onValueChange: handleMonthSelect, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectTrigger,
+          {
+            size: "sm",
+            "aria-label": "Select month",
+            className: "h-8 min-w-[110px] justify-between rounded-md border border-gray-200 bg-white px-3 text-sm font-medium text-gray-700 shadow-none focus-visible:ring-0",
+            children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: getMonthLabel(displayYear, displayMonth) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64", children: monthOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          SelectItem,
+          {
+            className: "text-center w-full",
+            value: String(option.value),
+            disabled: option.disabled,
+            children: option.label
+          },
+          option.value
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: String(displayYear), onValueChange: handleYearSelect, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectTrigger,
+          {
+            size: "sm",
+            "aria-label": "Select year",
+            className: "h-8 min-w-[90px] justify-between rounded-md border border-gray-200 bg-white px-3 text-sm font-medium text-gray-700 shadow-none focus-visible:ring-0",
+            children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: getYearLabel(displayYear) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64", children: yearOptions.map((year) => /* @__PURE__ */ jsxRuntime.jsx(
+          SelectItem,
+          {
+            value: String(year),
+            disabled: typeof minYear === "number" && year < minYear || typeof maxYear === "number" && year > maxYear,
+            children: getYearLabel(year)
+          },
+          year
+        )) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -1650,14 +1788,14 @@ var DatePicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React6__namespace.default.useState(false);
-  const parser = React6__namespace.default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
-  const outputFormatter = React6__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
-  const labelFormatter = React6__namespace.default.useMemo(
+  const [open, setOpen] = React5__namespace.default.useState(false);
+  const parser = React5__namespace.default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
+  const outputFormatter = React5__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
+  const labelFormatter = React5__namespace.default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter,
     [displayFormatter]
   );
-  const parsedValue = React6__namespace.default.useMemo(() => {
+  const parsedValue = React5__namespace.default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return value;
     const parsed = parser(value);
@@ -1666,26 +1804,26 @@ var DatePicker2 = ({
   const buttonLabel = parsedValue ? labelFormatter(parsedValue) : placeholder3;
   const buttonAriaLabel = ariaLabel ?? (parsedValue ? `Change date, current selection ${labelFormatter(parsedValue)}` : "Open date picker");
   const shouldShowClear = allowClear && !disabled && !!parsedValue;
-  const handleClose = React6__namespace.default.useCallback(() => setOpen(false), []);
-  const emitChange = React6__namespace.default.useCallback(
+  const handleClose = React5__namespace.default.useCallback(() => setOpen(false), []);
+  const emitChange = React5__namespace.default.useCallback(
     (next) => {
       onChange?.(next);
       onValueChange?.(next ? outputFormatter(next) : void 0);
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React6__namespace.default.useCallback(
+  const handleSelect = React5__namespace.default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React6__namespace.default.useCallback(() => {
+  const handleClear = React5__namespace.default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React6__namespace.default.useCallback(
+  const handleOpenChange = React5__namespace.default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -1857,15 +1995,15 @@ function MonthCal({
   onYearBackward,
   onYearForward
 }) {
-  const today = React6__namespace.useMemo(() => {
+  const today = React5__namespace.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     now.setDate(1);
     now.setHours(0, 0, 0, 0);
     return now;
   }, []);
-  const selectedMonthDate = React6__namespace.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
-  const min = React6__namespace.useMemo(() => normalizeMonth(minDate), [minDate]);
-  const max = React6__namespace.useMemo(() => normalizeMonth(maxDate), [maxDate]);
+  const selectedMonthDate = React5__namespace.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
+  const min = React5__namespace.useMemo(() => normalizeMonth(minDate), [minDate]);
+  const max = React5__namespace.useMemo(() => normalizeMonth(maxDate), [maxDate]);
   let effectiveMin = min;
   if (min && max && min > max) {
     effectiveMin = max;
@@ -1874,10 +2012,10 @@ function MonthCal({
   const minMonth = effectiveMin?.getMonth();
   const maxYear = max?.getFullYear();
   const maxMonth = max?.getMonth();
-  const [menuYear, setMenuYear] = React6__namespace.useState(
+  const [menuYear, setMenuYear] = React5__namespace.useState(
     () => selectedMonthDate?.getFullYear() ?? today.getFullYear()
   );
-  React6__namespace.useEffect(() => {
+  React5__namespace.useEffect(() => {
     if (selectedMonthDate) {
       const year = selectedMonthDate.getFullYear();
       if (year !== menuYear) {
@@ -1885,7 +2023,7 @@ function MonthCal({
       }
     }
   }, [selectedMonthDate, menuYear]);
-  React6__namespace.useEffect(() => {
+  React5__namespace.useEffect(() => {
     if (typeof minYear === "number" && menuYear < minYear) {
       setMenuYear(minYear);
       return;
@@ -1896,7 +2034,39 @@ function MonthCal({
   }, [minYear, maxYear, menuYear]);
   const disablePrevYear = typeof minYear === "number" ? menuYear <= minYear : false;
   const disableNextYear = typeof maxYear === "number" ? menuYear >= maxYear : false;
-  const disabledPairs = React6__namespace.useMemo(() => {
+  const yearOptions = React5__namespace.useMemo(() => {
+    const fallbackWindow = 50;
+    const start = typeof minYear === "number" ? minYear : menuYear - fallbackWindow;
+    const end = typeof maxYear === "number" ? maxYear : menuYear + fallbackWindow;
+    const years = [];
+    for (let year = start; year <= end; year++) {
+      years.push(year);
+    }
+    if (!years.includes(menuYear)) {
+      years.push(menuYear);
+      years.sort((a, b) => a - b);
+    }
+    return years;
+  }, [maxYear, menuYear, minYear]);
+  const formatYearLabel = React5__namespace.useCallback(
+    (year) => {
+      const raw = callbacks?.yearLabel?.(year);
+      if (raw === null || raw === void 0) return String(year);
+      return typeof raw === "string" ? raw : String(raw);
+    },
+    [callbacks]
+  );
+  const handleYearSelect = React5__namespace.useCallback(
+    (nextValue) => {
+      const nextYear = Number.parseInt(nextValue, 10);
+      if (Number.isNaN(nextYear)) return;
+      if (typeof minYear === "number" && nextYear < minYear) return;
+      if (typeof maxYear === "number" && nextYear > maxYear) return;
+      setMenuYear(nextYear);
+    },
+    [maxYear, minYear]
+  );
+  const disabledPairs = React5__namespace.useMemo(() => {
     if (!disabledDates?.length) return [];
     const pairs = [];
     disabledDates.forEach((date) => {
@@ -1911,42 +2081,67 @@ function MonthCal({
     return pairs;
   }, [disabledDates]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center pt-1 relative items-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: callbacks?.yearLabel ? callbacks.yearLabel(menuYear) : menuYear }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-x-1 flex items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => {
-              if (disablePrevYear) return;
-              setMenuYear((prev) => prev - 1);
-              onYearBackward?.();
-            },
-            disabled: disablePrevYear,
-            className: cn(
-              buttonVariants({ variant: variant?.chevrons ?? "outline" }),
-              "inline-flex items-center justify-center h-7 w-7 p-0 absolute left-1"
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "opacity-50 h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => {
-              if (disableNextYear) return;
-              setMenuYear((prev) => prev + 1);
-              onYearForward?.();
-            },
-            disabled: disableNextYear,
-            className: cn(
-              buttonVariants({ variant: variant?.chevrons ?? "outline" }),
-              "inline-flex items-center justify-center h-7 w-7 p-0 absolute right-1"
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => {
+            if (disablePrevYear) return;
+            setMenuYear((prev) => prev - 1);
+            onYearBackward?.();
+          },
+          disabled: disablePrevYear,
+          className: cn(
+            buttonVariants({ variant: variant?.chevrons ?? "outline" }),
+            "inline-flex items-center justify-center h-7 w-7 p-0"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "opacity-50 h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Select,
+        {
+          value: String(menuYear),
+          onValueChange: handleYearSelect,
+          disabled: disablePrevYear && disableNextYear,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SelectTrigger,
+              {
+                size: "sm",
+                "aria-label": "Select year",
+                className: "h-7 w-[100px] justify-center rounded-md border border-gray-200 bg-white px-2 text-sm font-medium text-gray-700 shadow-none focus-visible:ring-0",
+                children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: formatYearLabel(menuYear) })
+              }
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "opacity-50 h-4 w-4" })
-          }
-        )
-      ] })
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64", children: yearOptions.map((year) => /* @__PURE__ */ jsxRuntime.jsx(
+              SelectItem,
+              {
+                value: String(year),
+                disabled: typeof minYear === "number" && year < minYear || typeof maxYear === "number" && year > maxYear,
+                children: formatYearLabel(year)
+              },
+              year
+            )) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => {
+            if (disableNextYear) return;
+            setMenuYear((prev) => prev + 1);
+            onYearForward?.();
+          },
+          disabled: disableNextYear,
+          className: cn(
+            buttonVariants({ variant: variant?.chevrons ?? "outline" }),
+            "inline-flex items-center justify-center h-7 w-7 p-0"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "opacity-50 h-4 w-4" })
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full border-collapse space-y-1", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: MONTHS.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "flex w-full mt-2 gap-2", children: row.map((m) => {
       const afterMax = maxMonth !== void 0 && maxYear !== void 0 ? menuYear > maxYear || menuYear === maxYear && m.number > maxMonth : false;
@@ -2016,14 +2211,14 @@ var MonthPicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React6__namespace.default.useState(false);
-  const parser = React6__namespace.default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
-  const outputFormatter = React6__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
-  const labelFormatter = React6__namespace.default.useMemo(
+  const [open, setOpen] = React5__namespace.default.useState(false);
+  const parser = React5__namespace.default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
+  const outputFormatter = React5__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
+  const labelFormatter = React5__namespace.default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter2,
     [displayFormatter]
   );
-  const parsedValue = React6__namespace.default.useMemo(() => {
+  const parsedValue = React5__namespace.default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return normalizeMonth2(value);
     if (typeof value === "string") {
@@ -2035,8 +2230,8 @@ var MonthPicker2 = ({
   const buttonLabel = parsedValue ? labelFormatter(parsedValue) : placeholder3;
   const buttonAriaLabel = ariaLabel ?? (parsedValue ? `Change month, current selection ${labelFormatter(parsedValue)}` : "Open month picker");
   const shouldShowClear = allowClear && !disabled && !!parsedValue;
-  const handleClose = React6__namespace.default.useCallback(() => setOpen(false), []);
-  const emitChange = React6__namespace.default.useCallback(
+  const handleClose = React5__namespace.default.useCallback(() => setOpen(false), []);
+  const emitChange = React5__namespace.default.useCallback(
     (next) => {
       const normalized = next ? normalizeMonth2(next) : void 0;
       onChange?.(normalized);
@@ -2044,18 +2239,18 @@ var MonthPicker2 = ({
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React6__namespace.default.useCallback(
+  const handleSelect = React5__namespace.default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React6__namespace.default.useCallback(() => {
+  const handleClear = React5__namespace.default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React6__namespace.default.useCallback(
+  const handleOpenChange = React5__namespace.default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -2261,21 +2456,21 @@ var LookupSelect = ({
   loadingMessage = "Loading...",
   dropdownPortalId
 }) => {
-  const [inputValue, setInputValue] = React6.useState("");
-  const [suggestions, setSuggestions] = React6.useState([]);
-  const [optionLabels, setOptionLabels] = React6.useState({});
-  const [loading, setLoading] = React6.useState(false);
-  const [fetchError, setFetchError] = React6.useState(null);
-  const [isDropdownOpen, setIsDropdownOpen] = React6.useState(false);
-  const containerRef = React6.useRef(null);
-  const fetchDelayRef = React6.useRef(null);
-  const requestIdRef = React6.useRef(0);
-  const [dropdownStyles, setDropdownStyles] = React6.useState();
-  const dropdownContentRef = React6.useRef(null);
-  const assignDropdownContentRef = React6.useCallback((node) => {
+  const [inputValue, setInputValue] = React5.useState("");
+  const [suggestions, setSuggestions] = React5.useState([]);
+  const [optionLabels, setOptionLabels] = React5.useState({});
+  const [loading, setLoading] = React5.useState(false);
+  const [fetchError, setFetchError] = React5.useState(null);
+  const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
+  const containerRef = React5.useRef(null);
+  const fetchDelayRef = React5.useRef(null);
+  const requestIdRef = React5.useRef(0);
+  const [dropdownStyles, setDropdownStyles] = React5.useState();
+  const dropdownContentRef = React5.useRef(null);
+  const assignDropdownContentRef = React5.useCallback((node) => {
     dropdownContentRef.current = node;
   }, []);
-  const dropdownPortalElement = React6.useMemo(() => {
+  const dropdownPortalElement = React5.useMemo(() => {
     if (typeof document === "undefined") return null;
     if (dropdownPortalId) {
       const element = document.getElementById(dropdownPortalId);
@@ -2284,7 +2479,7 @@ var LookupSelect = ({
     return document.body;
   }, [dropdownPortalId]);
   const limitReached = value.length >= maxTags;
-  const upsertOptionLabels = React6.useCallback((options) => {
+  const upsertOptionLabels = React5.useCallback((options) => {
     setOptionLabels((prev) => {
       let next = null;
       options.forEach((opt) => {
@@ -2297,7 +2492,7 @@ var LookupSelect = ({
       return next ?? prev;
     });
   }, []);
-  const addTag = React6.useCallback(
+  const addTag = React5.useCallback(
     (val) => {
       const trimmed = val.trim();
       if (!trimmed) return;
@@ -2310,7 +2505,7 @@ var LookupSelect = ({
     },
     [value, onChange, maxTags]
   );
-  const removeTag = React6.useCallback(
+  const removeTag = React5.useCallback(
     (index) => {
       if (index < 0) return;
       const newTags = value.filter((_, i) => i !== index);
@@ -2318,7 +2513,7 @@ var LookupSelect = ({
     },
     [value, onChange]
   );
-  const handleKeyDown = React6.useCallback(
+  const handleKeyDown = React5.useCallback(
     (e) => {
       if (e.key === "Enter" || e.key === ",") {
         e.preventDefault();
@@ -2329,21 +2524,21 @@ var LookupSelect = ({
     },
     [inputValue, removeTag, value.length]
   );
-  const handleClear = React6.useCallback(() => {
+  const handleClear = React5.useCallback(() => {
     setInputValue("");
     setSuggestions([]);
     setIsDropdownOpen(false);
     setFetchError(null);
     if (onClear) onClear();
   }, [onClear]);
-  const handleSuggestionSelect = React6.useCallback(
+  const handleSuggestionSelect = React5.useCallback(
     (option) => {
       upsertOptionLabels([option]);
       addTag(option.value);
     },
     [addTag, upsertOptionLabels]
   );
-  const updateDropdownPosition = React6.useCallback(() => {
+  const updateDropdownPosition = React5.useCallback(() => {
     if (!dropdownPortalElement || !containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     setDropdownStyles({
@@ -2354,7 +2549,7 @@ var LookupSelect = ({
       zIndex: 50
     });
   }, [dropdownPortalElement]);
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     if (!fetchSuggestions) return;
     if (fetchDelayRef.current) {
       clearTimeout(fetchDelayRef.current);
@@ -2394,7 +2589,7 @@ var LookupSelect = ({
       }
     };
   }, [inputValue, fetchSuggestions, suggestionDebounce, upsertOptionLabels]);
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     const handleDocumentClick = (event) => {
       const target = event.target;
       if (containerRef.current?.contains(target)) return;
@@ -2406,11 +2601,11 @@ var LookupSelect = ({
       document.removeEventListener("mousedown", handleDocumentClick);
     };
   }, []);
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     if (!limitReached) return;
     setIsDropdownOpen(false);
   }, [limitReached]);
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     if (!dropdownPortalElement) return;
     if (!isDropdownOpen) return;
     updateDropdownPosition();
@@ -3095,7 +3290,7 @@ var AdvanceSearch = ({
   onSearch,
   onClear
 }) => {
-  const fieldsData = React6.useMemo(() => {
+  const fieldsData = React5.useMemo(() => {
     if (fields.length === 0) throw new Error("fields cannot be an empty array");
     return fields || [];
   }, [fields]);
@@ -3115,8 +3310,8 @@ var AdvanceSearch = ({
     defaultValues: {}
   });
   const { handleSubmit, unregister, resetField, getValues, clearErrors, setError } = form;
-  const [operatorErrors, setOperatorErrors] = React6__namespace.default.useState({});
-  const clearOperatorError = React6.useCallback(
+  const [operatorErrors, setOperatorErrors] = React5__namespace.default.useState({});
+  const clearOperatorError = React5.useCallback(
     (rowId) => {
       setOperatorErrors((prev) => {
         if (!(rowId in prev)) return prev;
@@ -3126,7 +3321,7 @@ var AdvanceSearch = ({
     },
     [setOperatorErrors]
   );
-  const clearValue = React6.useCallback(
+  const clearValue = React5.useCallback(
     (rowId, which) => {
       const fieldName = `${which}_${rowId}`;
       resetField(fieldName, { defaultValue: void 0 });
@@ -3136,13 +3331,13 @@ var AdvanceSearch = ({
     },
     [resetField, clearErrors]
   );
-  const parseRangeValue = React6.useCallback((raw, fieldType) => {
+  const parseRangeValue = React5.useCallback((raw, fieldType) => {
     if (!raw) return void 0;
     const normalized = fieldType === "datemonth" ? `${raw}-01` : raw;
     const parsed = dateFns.parseISO(normalized);
     return dateFns.isValid(parsed) ? parsed : void 0;
   }, []);
-  const onSubmit = React6.useCallback(() => {
+  const onSubmit = React5.useCallback(() => {
     const operatorValidation = {};
     rows.forEach((r) => {
       const availableOperators = operatorsForField(r.fieldName);
@@ -3304,6 +3499,19 @@ function Checkbox({ className, ...props }) {
     }
   );
 }
+function Collapsible({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.CollapsibleTrigger, { "data-slot": "collapsible-trigger", ...props });
+}
+function CollapsibleContent2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.CollapsibleContent, { "data-slot": "collapsible-content", ...props });
+}
 function compareAlphanumeric(aStr, bStr) {
   const a = aStr.split(reactTable.reSplitAlphaNumeric).filter(Boolean);
   const b = bStr.split(reactTable.reSplitAlphaNumeric).filter(Boolean);
@@ -3347,11 +3555,11 @@ function selectValueToBoolean(value) {
   return void 0;
 }
 var useHover = () => {
-  const [hovering, setHovering] = React6.useState(false);
-  const prevRef = React6.useRef(null);
-  const onMouseEnter = React6.useCallback(() => setHovering(true), []);
-  const onMouseLeave = React6.useCallback(() => setHovering(false), []);
-  const nodeRefCallback = React6.useCallback(
+  const [hovering, setHovering] = React5.useState(false);
+  const prevRef = React5.useRef(null);
+  const onMouseEnter = React5.useCallback(() => setHovering(true), []);
+  const onMouseLeave = React5.useCallback(() => setHovering(false), []);
+  const nodeRefCallback = React5.useCallback(
     (node) => {
       if (prevRef.current) {
         prevRef.current.removeEventListener("mouseenter", onMouseEnter);
@@ -3379,15 +3587,15 @@ var useIntersectionObserver = ({
   initialIsIntersecting = false,
   onChange
 } = {}) => {
-  const [ref, setRef] = React6.useState(null);
-  const [state, setState] = React6.useState(() => ({
+  const [ref, setRef] = React5.useState(null);
+  const [state, setState] = React5.useState(() => ({
     isIntersecting: initialIsIntersecting,
     entry: void 0
   }));
-  const callbackRef = React6.useRef(null);
+  const callbackRef = React5.useRef(null);
   callbackRef.current = onChange;
   const frozen = state.entry?.isIntersecting && freezeOnceVisible;
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     if (!ref) return;
     if (!("IntersectionObserver" in window)) return;
     if (frozen) return;
@@ -3417,8 +3625,8 @@ var useIntersectionObserver = ({
     frozen,
     freezeOnceVisible
   ]);
-  const prevRef = React6.useRef(null);
-  React6.useEffect(() => {
+  const prevRef = React5.useRef(null);
+  React5.useEffect(() => {
     if (!ref && state.entry?.target && !freezeOnceVisible && !frozen && prevRef.current !== state.entry.target) {
       prevRef.current = state.entry.target;
       setState({ isIntersecting: initialIsIntersecting, entry: void 0 });
@@ -3435,8 +3643,8 @@ var isValidMediaQueryString = (query) => {
   return query !== "not all";
 };
 var useMediaQuery = ({ query }) => {
-  const [matches, setMatches] = React6.useState(false);
-  React6.useEffect(() => {
+  const [matches, setMatches] = React5.useState(false);
+  React5.useEffect(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -3472,8 +3680,8 @@ var useTruncated = ({
   onChange,
   resizeDetectDelay = 150
 }) => {
-  const [isTruncated, setIsTruncated] = React6.useState(false);
-  React6.useEffect(() => {
+  const [isTruncated, setIsTruncated] = React5.useState(false);
+  React5.useEffect(() => {
     const element = elementRef.current;
     if (!element) return;
     const checkTruncate = debounce(() => {
@@ -3693,7 +3901,7 @@ var ColumnSeparator = ({ show, className, ...props }) => {
     }
   );
 };
-var ColumnSeparator_default = React6__namespace.default.memo(ColumnSeparator);
+var ColumnSeparator_default = React5__namespace.default.memo(ColumnSeparator);
 var StatusContentSlot = ({
   content,
   icon,
@@ -3712,7 +3920,7 @@ var StatusContentSlot = ({
     content
   ] });
 };
-var StatusContentSlot_default = React6__namespace.default.memo(StatusContentSlot);
+var StatusContentSlot_default = React5__namespace.default.memo(StatusContentSlot);
 var stateOptions = [
   "columnFilters",
   "globalFilter",
@@ -3765,9 +3973,9 @@ var modelOptions = [
   "getCenterVisibleLeafColumns"
 ];
 var DataTableDevTool = ({ table }) => {
-  const [open, setOpen] = React6.useState(false);
-  const [visibleStates, setVisibleStates] = React6.useState([]);
-  const [visibleModels, setVisibleModels] = React6.useState([]);
+  const [open, setOpen] = React5.useState(false);
+  const [visibleStates, setVisibleStates] = React5.useState([]);
+  const [visibleModels, setVisibleModels] = React5.useState([]);
   const tableState = table.getState();
   const toggleValue = (arr, value) => arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value];
   const getCircularReplacer = () => {
@@ -4027,14 +4235,14 @@ var DataTable = ({
   if (isDefined(tableRef) && !isDefined(tableRef?.current)) {
     tableRef.current = table;
   }
-  const tableContainerRef = React6.useRef(null);
+  const tableContainerRef = React5.useRef(null);
   const isTableEmpty = table.getCoreRowModel().rows.length === 0;
   const isTableEmptyAfterFiltering = table.getRowModel().rows.length === 0;
   const isFiltering = table.getState().columnFilters.length > 0 || !!table.getState().globalFilter;
   const leftVisibleLeftColumns = table.getLeftVisibleLeafColumns();
   const centerVisibleLeafColumns = table.getCenterVisibleLeafColumns();
   const rightVisibleLeafColumns = table.getRightVisibleLeafColumns();
-  const { isSomeColumnsFilterable, filterableColumns } = React6.useMemo(() => {
+  const { isSomeColumnsFilterable, filterableColumns } = React5.useMemo(() => {
     const mergedColumns = [
       ...leftVisibleLeftColumns,
       ...centerVisibleLeafColumns,
@@ -4045,7 +4253,7 @@ var DataTable = ({
     );
     return { isSomeColumnsFilterable: isSomeColumnsFilterable2, filterableColumns: mergedColumns };
   }, [centerVisibleLeafColumns, leftVisibleLeftColumns, rightVisibleLeafColumns]);
-  const autoStatusKey = React6.useMemo(() => {
+  const autoStatusKey = React5.useMemo(() => {
     if (isInitialLoading) return "initialLoading";
     if (isTableEmpty) return "emptyData";
     if (isTableEmptyAfterFiltering) return "emptyFilteredData";
@@ -4063,14 +4271,14 @@ var DataTable = ({
     scrollFetch?.hasMore,
     scrollFetch?.isFetchingMore
   ]);
-  const activeStatusContentComputed = React6.useMemo(() => {
+  const activeStatusContentComputed = React5.useMemo(() => {
     if (!activeStatusContent) return autoStatusKey;
     if (typeof activeStatusContent === "function") {
       return activeStatusContent({ defaultComputedValue: autoStatusKey });
     }
     return activeStatusContent;
   }, [activeStatusContent, autoStatusKey]);
-  const fetchMoreOnScrollReached = React6.useCallback(
+  const fetchMoreOnScrollReached = React5.useCallback(
     (containerRefElement) => {
       if (!scrollFetch?.enabled || !containerRefElement || scrollFetch?.isFetchingMore || !scrollFetch?.hasMore || !scrollFetch?.fetchMore) {
         return;
@@ -4104,7 +4312,7 @@ var DataTable = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [scrollFetch?.enabled, scrollFetch?.isFetchingMore, scrollFetch?.hasMore, scrollFetch?.fetchMore]
   );
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     fetchMoreOnScrollReached(tableContainerRef.current);
   }, [fetchMoreOnScrollReached]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4125,7 +4333,8 @@ var DataTable = ({
             icon: statusContent?.initialLoading?.icon,
             wrapperProps: statusContent?.initialLoading?.wrapperProps,
             defaultWrapperProps: {
-              className: "flex flex-col h-full items-center justify-center text-sm py-4 gap-2"
+              className: "flex flex-col h-full items-center justify-center text-sm py-4 gap-2",
+              ["data-testid"]: "status-content-initial-loading"
             },
             defaultIcon: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 })
           }
@@ -4136,7 +4345,8 @@ var DataTable = ({
             icon: statusContent?.emptyData?.icon,
             wrapperProps: statusContent?.emptyData?.wrapperProps,
             defaultWrapperProps: {
-              className: "flex flex-col h-full items-center justify-center text-sm py-4 gap-2"
+              className: "flex flex-col h-full items-center justify-center text-sm py-4 gap-2",
+              ["data-testid"]: "status-content-empty-data"
             },
             defaultIcon: /* @__PURE__ */ jsxRuntime.jsx(empty_data_default, { className: "text-[128px]" })
           }
@@ -4161,6 +4371,7 @@ var DataTable = ({
                       return /* @__PURE__ */ jsxRuntime.jsxs(
                         TableHead,
                         {
+                          "data-testid": `table-head-${header.id}`,
                           colSpan: header.colSpan,
                           ...tableHeadCellProps,
                           ...header.column.columnDef?.meta?.headerProps,
@@ -4194,13 +4405,14 @@ var DataTable = ({
                       );
                     }) }, headerGroup.id);
                   }),
-                  isSomeColumnsFilterable && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: filterableColumns.map((column) => {
+                  isSomeColumnsFilterable && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { "data-testid": "table-filter-row", children: filterableColumns.map((column) => {
                     const { classes, style } = getColumnPinningStyles(column);
                     const useColumnSizing = column.columnDef.meta?.useColumnSizing ?? columnResizing?.enabled ?? false;
                     const tableFilterCellProps = typeof components?.tableFilterCellProps === "function" ? components?.tableFilterCellProps({ column, table }) : components?.tableFilterCellProps;
                     return /* @__PURE__ */ jsxRuntime.jsx(
                       TableCell,
                       {
+                        "data-testid": `table-filter-cell-${column.id}`,
                         ...tableFilterCellProps,
                         ...column.columnDef?.meta?.filterCellProps,
                         className: cn(
@@ -4230,9 +4442,10 @@ var DataTable = ({
             ),
             /* @__PURE__ */ jsxRuntime.jsx(TableBody, { ...components?.tableBodyProps, children: table.getRowModel().rows.map((row) => {
               const tableDataRowProps = typeof components?.tableDataRowProps === "function" ? components.tableDataRowProps({ row, table }) || {} : components?.tableDataRowProps || {};
-              return /* @__PURE__ */ React6.createElement(
+              return /* @__PURE__ */ React5.createElement(
                 TableRow,
                 {
+                  "data-testid": `table-data-row-${row.id}`,
                   ...tableDataRowProps,
                   key: row.id,
                   className: cn("group", tableDataRowProps?.className),
@@ -4251,6 +4464,9 @@ var DataTable = ({
                   return /* @__PURE__ */ jsxRuntime.jsx(
                     TableCell,
                     {
+                      "data-testid": `table-data-cell-${cell.id}`,
+                      "data-row-id": row.id,
+                      "data-column-id": cell.column.id,
                       ...tableDataCellProps,
                       ...cell.column.columnDef?.meta?.cellProps,
                       className: cn(
@@ -4285,7 +4501,8 @@ var DataTable = ({
               icon: statusContent?.emptyFilteredData?.icon,
               wrapperProps: statusContent?.emptyFilteredData?.wrapperProps,
               defaultWrapperProps: {
-                className: "flex flex-col h-[calc(100%-76px)] items-center justify-center text-sm py-4 gap-2"
+                className: "flex flex-col h-[calc(100%-76px)] items-center justify-center text-sm py-4 gap-2",
+                ["data-testid"]: "status-content-empty-filtered-data"
               },
               defaultIcon: /* @__PURE__ */ jsxRuntime.jsx(empty_data_default, { className: "text-[128px]" })
             }
@@ -4296,7 +4513,8 @@ var DataTable = ({
               content: statusContent?.fetchingMore?.content ?? "Loading more...",
               wrapperProps: statusContent?.fetchingMore?.wrapperProps,
               defaultWrapperProps: {
-                className: "flex flex-col items-center justify-center text-sm py-4 gap-2"
+                className: "flex flex-col items-center justify-center text-sm py-4 gap-2",
+                ["data-testid"]: "status-content-fetching-more"
               }
             }
           ),
@@ -4307,7 +4525,8 @@ var DataTable = ({
               icon: statusContent?.noMoreData?.icon,
               wrapperProps: statusContent?.noMoreData?.wrapperProps,
               defaultWrapperProps: {
-                className: "flex flex-col items-center justify-center text-sm py-4 gap-2"
+                className: "flex flex-col items-center justify-center text-sm py-4 gap-2",
+                ["data-testid"]: "status-content-no-more-data"
               }
             }
           )
@@ -4319,17 +4538,17 @@ var DataTable = ({
 };
 var DataTable_default = DataTable;
 function Dialog(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
 }
 function DialogTrigger(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Overlay,
+    SheetPrimitive__namespace.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn(
@@ -4353,7 +4572,7 @@ function DialogHeader({ className, children, ...props }) {
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-semibold", children }),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          DialogPrimitive__namespace.Close,
+          SheetPrimitive__namespace.Close,
           {
             "data-slot": "dialog-close",
             className: "absolute right-4 top-4 rounded-xs opacity-80 hover:opacity-100 transition-opacity focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -4377,7 +4596,7 @@ function DialogContent({
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
     showOverlay && /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      DialogPrimitive__namespace.Content,
+      SheetPrimitive__namespace.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
@@ -4408,7 +4627,7 @@ function DialogFooter({ className, ...props }) {
 }
 function DialogTitle({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Title,
+    SheetPrimitive__namespace.Title,
     {
       "data-slot": "dialog-title",
       className: cn("text-lg font-semibold leading-none", className),
@@ -4421,7 +4640,7 @@ function DialogDescription({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Description,
+    SheetPrimitive__namespace.Description,
     {
       "data-slot": "dialog-description",
       className: cn("text-sm text-muted-foreground", className),
@@ -4433,14 +4652,14 @@ function cn2(...inputs) {
   return tailwindMerge.twMerge(clsx2.clsx(inputs));
 }
 function Dialog2({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal2({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay2({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Overlay,
+    SheetPrimitive__namespace.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn2(
@@ -4460,7 +4679,7 @@ function DialogContent2({
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal2, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay2, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      DialogPrimitive__namespace.Content,
+      SheetPrimitive__namespace.Content,
       {
         "data-slot": "dialog-content",
         className: cn2(
@@ -4471,7 +4690,7 @@ function DialogContent2({
         children: [
           children,
           showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
-            DialogPrimitive__namespace.Close,
+            SheetPrimitive__namespace.Close,
             {
               "data-slot": "dialog-close",
               className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -4498,7 +4717,7 @@ function DialogHeader2({ className, ...props }) {
 }
 function DialogTitle2({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Title,
+    SheetPrimitive__namespace.Title,
     {
       "data-slot": "dialog-title",
       className: cn2("text-lg leading-none font-semibold", className),
@@ -4511,7 +4730,7 @@ function DialogDescription2({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Description,
+    SheetPrimitive__namespace.Description,
     {
       "data-slot": "dialog-description",
       className: cn2("text-muted-foreground text-sm", className),
@@ -4586,11 +4805,11 @@ function DialogAlert({
   persistent = false
 }) {
   const alignClass = align === "start" ? "justify-start" : align === "end" ? "justify-end" : "justify-center";
-  const handleCancel = React6.useCallback(() => {
+  const handleCancel = React5.useCallback(() => {
     onCancel?.();
     onOpenChange(false);
   }, [onCancel, onOpenChange]);
-  const handleConfirm = React6.useCallback(() => {
+  const handleConfirm = React5.useCallback(() => {
     onConfirm?.();
   }, [onConfirm]);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog2, { open, onOpenChange: persistent ? () => {
@@ -4674,9 +4893,9 @@ function SortableRow({
 }) {
   const { attributes, listeners, setNodeRef, transform, transition } = sortable.useSortable({
     id: value,
-    disabled: name == "columns.0.id"
+    disabled: name === "columns.0.id"
   });
-  const style = React6__namespace.useMemo(
+  const style = React5__namespace.useMemo(
     () => ({
       transform: utilities.CSS.Transform.toString(transform),
       transition
@@ -4684,7 +4903,10 @@ function SortableRow({
     [transform, transition]
   );
   const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-  const currentFormColumns = reactHookForm.useWatch({ control, name: "columns" });
+  const currentFormColumns = reactHookForm.useWatch({
+    control,
+    name: "columns"
+  });
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, style, className: "flex items-center rounded-md bg-white", children: /* @__PURE__ */ jsxRuntime.jsx(
     FormField,
     {
@@ -4701,7 +4923,7 @@ function SortableRow({
                 ...listeners,
                 className: cn(
                   "h-5 w-5 text-[#B9B9B9] focus:outline-none cursor-grab",
-                  name == "columns.0.id" && "opacity-0 pointer-events-none"
+                  name === "columns.0.id" && "opacity-0 pointer-events-none"
                 )
               }
             ),
@@ -4710,27 +4932,26 @@ function SortableRow({
               {
                 value: field.value,
                 onValueChange: field.onChange,
-                disabled: name == "columns.0.id",
+                disabled: name === "columns.0.id",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
                     SelectTrigger,
                     {
                       className: cn(
                         "w-full border-[#DDDDDD] data-[disabled]:opacity-100 aria-invalid:border-[#BB0B0E]",
-                        name == "columns.0.id" ? "text-[#8B8B8B] bg-[#EAEAEA] cursor-not-allowed" : ""
+                        name === "columns.0.id" ? "text-[#8B8B8B] bg-[#EAEAEA] cursor-not-allowed" : "cursor-pointer"
                       ),
                       children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Choose column..." })
                     }
                   ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.sort(
+                  /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "cursor-pointer overflow-hidden rounded-md [&_[data-radix-select-viewport]]:m-0", children: options.sort(
                     (a, b) => a.id === field.value ? -1 : b.id === field.value ? 1 : 0
                   ).map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
                     SelectItem,
                     {
                       value: opt.id,
-                      hideCheckIcon: true,
                       className: cn(
-                        "focus:bg-[#e8edea]",
+                        "cursor-pointer focus:bg-[#e8edea] first:rounded-t-md last:rounded-b-md hover:text-inherit",
                         opt.id === field.value ? "font-bold bg-[#dae5de] focus:bg-[#dae5de]" : ""
                       ),
                       children: opt.label
@@ -4740,7 +4961,7 @@ function SortableRow({
                 ]
               }
             ),
-            name == "columns.0.id" ? /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+            name === "columns.0.id" ? /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "h-5 w-5", stroke: "white", fill: "#8B8B8B" }) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 TooltipContent,
@@ -4748,7 +4969,6 @@ function SortableRow({
                   align: "start",
                   alignOffset: 10,
                   className: "bg-[#8B8B8B] rounded-none",
-                  arrowClassName: "!hidden",
                   children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Column cannot be removed." })
                 }
               )
@@ -4787,7 +5007,8 @@ var GridSettingsModal = ({
   onClose,
   onSaveColumns
 }) => {
-  const [isDragging, setIsDragging] = React6.useState(false);
+  const [isDragging, setIsDragging] = React5.useState(false);
+  const scrollRef = React5.useRef(null);
   const form = reactHookForm.useForm({
     resolver: zod$1.zodResolver(GridSettingsSchema),
     defaultValues: { columns: currentColumns },
@@ -4799,7 +5020,7 @@ var GridSettingsModal = ({
     name: "columns",
     keyName: "fieldId"
   });
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     if (isOpen) {
       form.reset({ columns: currentColumns });
     }
@@ -4808,6 +5029,15 @@ var GridSettingsModal = ({
     const isValid5 = await trigger("columns");
     if (isValid5) {
       append({ id: "" });
+      requestAnimationFrame(() => {
+        const container = scrollRef.current;
+        if (container) {
+          container.scrollTo({
+            top: container.scrollHeight,
+            behavior: "smooth"
+          });
+        }
+      });
     } else {
       return;
     }
@@ -4832,8 +5062,8 @@ var GridSettingsModal = ({
       move(oldIndex, newIndex);
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-xl border-0 p-0 overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "sm:max-w-xl border-0 p-0 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-h-[550px] rounded-lg overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -4849,7 +5079,7 @@ var GridSettingsModal = ({
                 type: "button",
                 "aria-label": "Close",
                 onClick: onClose,
-                className: "flex items-center justify-center rounded-md hover:bg-white/10 transition",
+                className: "flex items-center justify-center rounded-md hover:bg-white/10 transition cursor-pointer",
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-6 w-6 text-white" })
               }
             )
@@ -4867,85 +5097,96 @@ var GridSettingsModal = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "mt-6 flex flex-col justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-16 my-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 max-h-60 pr-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          SortableRow,
-          {
-            value: fields[0]?.fieldId,
-            control,
-            name: `columns.0.id`,
-            isDragging,
-            availableColumns
-          },
-          fields[0]?.fieldId
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-          core.DndContext,
-          {
-            sensors,
-            collisionDetection: core.closestCenter,
-            modifiers: [modifiers.restrictToParentElement, modifiers.restrictToVerticalAxis],
-            onDragStart: () => setIsDragging(true),
-            onDragEnd: (event) => {
-              setIsDragging(false);
-              handleDragEnd(event);
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              sortable.SortableContext,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col flex-1 px-12 my-10 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-col flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: scrollRef,
+          className: "flex-1 overflow-y-auto overflow-x-hidden max-h-[35vh] [scrollbar-gutter:stable_both-edges]",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 px-6", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[&_button:not([disabled])]:cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(
+              SortableRow,
+              {
+                value: fields[0]?.fieldId,
+                control,
+                name: `columns.0.id`,
+                isDragging,
+                availableColumns
+              },
+              fields[0]?.fieldId
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3 [&_button:not([disabled])]:cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(
+              core.DndContext,
               {
-                items: fields?.slice(1).map((c) => c?.fieldId),
-                strategy: sortable.verticalListSortingStrategy,
-                children: fields?.slice(1).map((col, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                  SortableRow,
+                sensors,
+                collisionDetection: core.closestCenter,
+                modifiers: [modifiers.restrictToParentElement, modifiers.restrictToVerticalAxis],
+                onDragStart: () => setIsDragging(true),
+                onDragEnd: (event) => {
+                  setIsDragging(false);
+                  handleDragEnd(event);
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  sortable.SortableContext,
                   {
-                    value: col?.fieldId,
-                    control,
-                    name: `columns.${index + 1}.id`,
-                    isDragging,
-                    availableColumns,
-                    onRemove: () => remove(index + 1)
-                  },
-                  col?.fieldId
-                ))
+                    items: fields?.slice(1).map((c) => c?.fieldId),
+                    strategy: sortable.verticalListSortingStrategy,
+                    children: fields?.slice(1).map((col, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                      SortableRow,
+                      {
+                        value: col?.fieldId,
+                        control,
+                        name: `columns.${index + 1}.id`,
+                        isDragging,
+                        availableColumns,
+                        onRemove: () => remove(index + 1)
+                      },
+                      col?.fieldId
+                    ))
+                  }
+                )
               }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          Button,
-          {
-            type: "button",
-            className: cn("bg-[#49865d] text-white w-full rounded-t-lg", addButtonClassname),
-            onClick: addColumn,
-            disabled: fields.length >= limit,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-1" }),
-              " Add column"
-            ]
-          }
-        ) })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(DialogFooter, { className: "-mx-6 mt-6 px-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex px-4 justify-between w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "button",
-            variant: "outline",
-            onClick: onClose,
-            className: "w-18 text-[#8B8B8B] border-[#B9B9B9]",
-            children: "Cancel"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "submit",
-            className: cn("w-18 bg-[#379A2A] text-white", saveButtonClassname),
-            children: "Save"
-          }
-        )
-      ] }) })
+            ) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky bottom-0 z-20 flex justify-center bg-white pt-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          className: cn(
+            "bg-[#49865d] hover:bg-[#326446] text-white w-[350px] rounded-t-lg transition-colors",
+            addButtonClassname
+          ),
+          onClick: addColumn,
+          disabled: fields.length >= limit,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-1" }),
+            " Add column"
+          ]
+        }
+      ) })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DialogFooter, { className: "bottom-0 border-t bg-white", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 px-4 justify-end w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: onClose,
+          className: "w-18 text-[#8B8B8B] border-[#B9B9B9]",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "submit",
+          className: cn("w-18 bg-[#379A2A] hover:bg-[#2f8524] text-white", saveButtonClassname),
+          onClick: form.handleSubmit(onSubmit),
+          children: "Save"
+        }
+      )
     ] }) })
   ] }) }) });
 };
@@ -4996,7 +5237,7 @@ var useGridSettingsStore = zustand.create(
 );
 var useGridSettingsStore_default = useGridSettingsStore;
 var ListTable = ({ onTableReady, children }) => {
-  React6__namespace.useEffect(() => {
+  React5__namespace.useEffect(() => {
     if (onTableReady) {
       onTableReady({ ready: true });
     }
@@ -5119,7 +5360,7 @@ var InfoIcon = (props) => {
     }
   );
 };
-var InfoIcon_default = React6__namespace.default.memo(InfoIcon);
+var InfoIcon_default = React5__namespace.default.memo(InfoIcon);
 var Navbar = ({
   className,
   title,
@@ -5144,7 +5385,7 @@ var Navbar = ({
 }) => {
   const { isMobile, isTablet, isDesktop } = useScreenSize_default();
   const Icon2 = lucideReact.CircleHelp;
-  const shouldShowSeparator = !separatorDisable && React6.isValidElement(searchButton);
+  const shouldShowSeparator = !separatorDisable && React5.isValidElement(searchButton);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
     {
@@ -5155,8 +5396,8 @@ var Navbar = ({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
           headImageURL !== "" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: headImageURL, alt: "", className: cn("w-full h-full", headImageURLClassName) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-            React6.isValidElement(title) ? title : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-xl font-bold", children: title }),
-            React6.isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-sm font-semibold", children: subTitle })
+            React5.isValidElement(title) ? title : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-xl font-bold", children: title }),
+            React5.isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-sm font-semibold", children: subTitle })
           ] }),
           tooltipTitle && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "text-white hover:opacity-80 ", children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon_default, { className: "w-4" }) }) }),
@@ -5187,10 +5428,10 @@ var Navbar = ({
                       ),
                       children: [
                         tooltipTitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                          React6.isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: 32, "aria-hidden": "true" }),
+                          React5.isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: 32, "aria-hidden": "true" }),
                           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: tooltipTitle })
                         ] }),
-                        React6.isValidElement(tooltipdescription) && tooltipdescription
+                        React5.isValidElement(tooltipdescription) && tooltipdescription
                       ]
                     }
                   ),
@@ -5244,13 +5485,106 @@ var Navbar = ({
             }
           ),
           shouldShowSeparator && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", className: "ml-1 w-[1px] h-10 bg-white" }),
-          React6.isValidElement(searchButton) ? searchButton : ""
+          React5.isValidElement(searchButton) ? searchButton : ""
         ] })
       ]
     }
   );
 };
-var navbar_default = React6__namespace.default.memo(Navbar);
+var navbar_default = React5__namespace.default.memo(Navbar);
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SheetPrimitive__namespace.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      SheetPrimitive__namespace.Content,
+      {
+        "data-slot": "sheet-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsxs(SheetPrimitive__namespace.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5 p-4", className), ...props });
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SheetPrimitive__namespace.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SheetPrimitive__namespace.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
 var usePreventPageLeaveStore = zustand.create((set) => ({
   isPreventing: false,
   setPreventing: (value) => set({ isPreventing: value })
@@ -5260,7 +5594,7 @@ var usePreventPageLeaveStore_default = usePreventPageLeaveStore;
 // src/components/prevent-page-leave/PreventPageLeave.tsx
 var PreventPageLeave = ({ children }) => {
   const { isPreventing } = usePreventPageLeaveStore();
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     if (!isPreventing || typeof window === "undefined") {
       return;
     }
@@ -5278,7 +5612,7 @@ var PreventPageLeave = ({ children }) => {
 var PreventPageLeave_default = PreventPageLeave;
 var usePreventPageLeave = ({ isPrevening }) => {
   const setPreventing = usePreventPageLeaveStore_default((state) => state.setPreventing);
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     setPreventing(isPrevening);
   }, [isPrevening, setPreventing]);
 };
@@ -5557,21 +5891,21 @@ function ToolbarPlugin({
   acceptImageMimeTypes
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [state, setState] = React6.useState(initialToolbarState);
-  const fileInputRef = React6.useRef(null);
-  const [isLinkDialogOpen, setLinkDialogOpen] = React6.useState(false);
-  const [editingExistingLink, setEditingExistingLink] = React6.useState(false);
-  const [linkNodeKey, setLinkNodeKey] = React6.useState(null);
-  const [isImageDialogOpen, setImageDialogOpen] = React6.useState(false);
-  const [editingExistingImage, setEditingExistingImage] = React6.useState(false);
-  const [imageNodeKey, setImageNodeKey] = React6.useState(null);
+  const [state, setState] = React5.useState(initialToolbarState);
+  const fileInputRef = React5.useRef(null);
+  const [isLinkDialogOpen, setLinkDialogOpen] = React5.useState(false);
+  const [editingExistingLink, setEditingExistingLink] = React5.useState(false);
+  const [linkNodeKey, setLinkNodeKey] = React5.useState(null);
+  const [isImageDialogOpen, setImageDialogOpen] = React5.useState(false);
+  const [editingExistingImage, setEditingExistingImage] = React5.useState(false);
+  const [imageNodeKey, setImageNodeKey] = React5.useState(null);
   const linkForm = reactHookForm.useForm({
     defaultValues: { url: "", label: "" }
   });
   const imageForm = reactHookForm.useForm({
     defaultValues: { url: "", alt: "", width: "", height: "" }
   });
-  const openImageDialog = React6.useCallback(() => {
+  const openImageDialog = React5.useCallback(() => {
     if (disabled || !allowImageUrlInsert) {
       return;
     }
@@ -5605,7 +5939,7 @@ function ToolbarPlugin({
     setImageNodeKey(targetImage?.getKey() ?? null);
     setImageDialogOpen(true);
   }, [allowImageUrlInsert, disabled, editor, imageForm]);
-  const closeImageDialog = React6.useCallback(() => {
+  const closeImageDialog = React5.useCallback(() => {
     setImageDialogOpen(false);
     setEditingExistingImage(false);
     setImageNodeKey(null);
@@ -5614,7 +5948,7 @@ function ToolbarPlugin({
       editor.focus();
     }, 0);
   }, [editor, imageForm]);
-  const openLinkDialog = React6.useCallback(() => {
+  const openLinkDialog = React5.useCallback(() => {
     if (disabled) {
       return;
     }
@@ -5654,7 +5988,7 @@ function ToolbarPlugin({
     setLinkNodeKey(detectedLink?.getKey() ?? null);
     setLinkDialogOpen(true);
   }, [disabled, editor, linkForm]);
-  const closeLinkDialog = React6.useCallback(() => {
+  const closeLinkDialog = React5.useCallback(() => {
     setLinkDialogOpen(false);
     setEditingExistingLink(false);
     setLinkNodeKey(null);
@@ -5695,7 +6029,7 @@ function ToolbarPlugin({
     });
     closeLinkDialog();
   });
-  const handleRemoveLink = React6.useCallback(() => {
+  const handleRemoveLink = React5.useCallback(() => {
     editor.focus();
     editor.update(() => {
       if (linkNodeKey) {
@@ -5712,7 +6046,7 @@ function ToolbarPlugin({
     });
     closeLinkDialog();
   }, [closeLinkDialog, editor, linkNodeKey]);
-  const handleLinkDialogOpenChange = React6.useCallback(
+  const handleLinkDialogOpenChange = React5.useCallback(
     (open) => {
       if (open) {
         setLinkDialogOpen(true);
@@ -5722,7 +6056,7 @@ function ToolbarPlugin({
     },
     [closeLinkDialog]
   );
-  const updateToolbar = React6.useCallback(() => {
+  const updateToolbar = React5.useCallback(() => {
     const selection = lexical.$getSelection();
     if (!lexical.$isRangeSelection(selection)) {
       return;
@@ -5762,7 +6096,7 @@ function ToolbarPlugin({
       isLink: hasLink
     }));
   }, []);
-  React6__namespace.useEffect(() => {
+  React5__namespace.useEffect(() => {
     return utils.mergeRegister(
       editor.registerCommand(
         lexical.CAN_UNDO_COMMAND,
@@ -5793,7 +6127,7 @@ function ToolbarPlugin({
       })
     );
   }, [editor, updateToolbar]);
-  const applyBlock = React6.useCallback(
+  const applyBlock = React5.useCallback(
     (nextBlock) => {
       if (disabled) {
         return;
@@ -5855,7 +6189,7 @@ function ToolbarPlugin({
     },
     [disabled, editor, state.blockType]
   );
-  const toggleFormat = React6.useCallback(
+  const toggleFormat = React5.useCallback(
     (format5) => {
       if (disabled) {
         return;
@@ -5864,10 +6198,10 @@ function ToolbarPlugin({
     },
     [disabled, editor]
   );
-  const toggleLink = React6.useCallback(() => {
+  const toggleLink = React5.useCallback(() => {
     openLinkDialog();
   }, [openLinkDialog]);
-  const applyElementFormat = React6.useCallback(
+  const applyElementFormat = React5.useCallback(
     (format5) => {
       if (disabled) {
         return;
@@ -5878,7 +6212,7 @@ function ToolbarPlugin({
   );
   const canInsertImage = allowImageUrlInsert || Boolean(onImageUpload);
   const imageAccept = acceptImageMimeTypes ?? DEFAULT_IMAGE_ACCEPT;
-  const handleInsertImage = React6.useCallback(() => {
+  const handleInsertImage = React5.useCallback(() => {
     if (disabled || !canInsertImage) {
       return;
     }
@@ -5889,7 +6223,7 @@ function ToolbarPlugin({
     }
     openImageDialog();
   }, [canInsertImage, disabled, editor, onImageUpload, openImageDialog]);
-  const handleFileChange = React6.useCallback(
+  const handleFileChange = React5.useCallback(
     async (event) => {
       if (!onImageUpload) {
         return;
@@ -5979,7 +6313,7 @@ function ToolbarPlugin({
     });
     closeImageDialog();
   });
-  const handleImageDialogOpenChange = React6.useCallback(
+  const handleImageDialogOpenChange = React5.useCallback(
     (open) => {
       if (open) {
         setImageDialogOpen(true);
@@ -5989,7 +6323,7 @@ function ToolbarPlugin({
     },
     [closeImageDialog]
   );
-  const handleRemoveImage = React6.useCallback(() => {
+  const handleRemoveImage = React5.useCallback(() => {
     if (!imageNodeKey) {
       closeImageDialog();
       return;
@@ -6348,7 +6682,7 @@ function ControlledValuePlugin({
   trackAppliedValue
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React6__namespace.useEffect(() => {
+  React5__namespace.useEffect(() => {
     if (value == null || trackAppliedValue.current === value) {
       return;
     }
@@ -6372,14 +6706,14 @@ function ControlledValuePlugin({
 }
 function EditableStatePlugin({ editable }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React6__namespace.useEffect(() => {
+  React5__namespace.useEffect(() => {
     editor.setEditable(editable);
   }, [editor, editable]);
   return null;
 }
 function ImagesPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React6__namespace.useEffect(() => {
+  React5__namespace.useEffect(() => {
     return editor.registerCommand(
       INSERT_IMAGE_COMMAND,
       (payload) => {
@@ -6398,7 +6732,7 @@ function ImagesPlugin() {
   }, [editor]);
   return null;
 }
-var RichText = React6.forwardRef(function RichText2({
+var RichText = React5.forwardRef(function RichText2({
   value,
   defaultValue,
   onChange,
@@ -6417,11 +6751,11 @@ var RichText = React6.forwardRef(function RichText2({
   id,
   ...rest
 }, ref) {
-  const initialSerializedStateRef = React6.useRef(void 0);
+  const initialSerializedStateRef = React5.useRef(void 0);
   if (initialSerializedStateRef.current === void 0) {
     initialSerializedStateRef.current = parseSerializedEditorState(value ?? defaultValue);
   }
-  const initialConfig = React6.useMemo(
+  const initialConfig = React5.useMemo(
     () => ({
       namespace: "RichTextEditor",
       editable: !(readOnly || disabled),
@@ -6434,8 +6768,8 @@ var RichText = React6.forwardRef(function RichText2({
     }),
     [disabled, readOnly]
   );
-  const appliedValueRef = React6.useRef(value ?? defaultValue);
-  const handleChange = React6.useCallback(
+  const appliedValueRef = React5.useRef(value ?? defaultValue);
+  const handleChange = React5.useCallback(
     (editorState, editor) => {
       const serialized = JSON.stringify(editorState.toJSON());
       appliedValueRef.current = serialized;
@@ -6530,47 +6864,34 @@ function Separator2({
     }
   );
 }
-function Switch({ className, ...props }) {
+function useIsMobile(breakpoint = 768) {
+  const [isMobile, setIsMobile] = React5.useState(() => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+    return window.innerWidth < breakpoint;
+  });
+  React5.useEffect(() => {
+    function onResize() {
+      setIsMobile(window.innerWidth < breakpoint);
+    }
+    window.addEventListener("resize", onResize);
+    window.addEventListener("orientationchange", onResize);
+    onResize();
+    return () => {
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("orientationchange", onResize);
+    };
+  }, [breakpoint]);
+  return isMobile;
+}
+function Skeleton({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SwitchPrimitive__namespace.Root,
+    "div",
     {
-      "data-slot": "switch",
-      className: cn(
-        "peer inline-flex h-[1.15rem] w-10 shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-[3px]",
-        "data-[state=checked]:bg-[#379A2A] data-[state=unchecked]:bg-[#EFEFEF]",
-        "dark:data-[state=unchecked]:bg-input/80",
-        "focus-visible:border-ring focus-visible:ring-ring/50",
-        "disabled:bg-gray-300 disabled:data-[state=checked]:bg-[#A5D6A7] disabled:data-[state=unchecked]:bg-[#E0E0E0]",
-        "disabled:cursor-not-allowed disabled:opacity-70",
-        "shadow-inner",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        SwitchPrimitive__namespace.Thumb,
-        {
-          "data-slot": "switch-thumb",
-          className: cn(
-            "bg-white block size-3.5 rounded-full ring-0 transition-transform",
-            "data-[state=checked]:translate-x-5.5 data-[state=unchecked]:translate-x-0.5",
-            "disabled:bg-gray-100"
-          )
-        }
-      )
-    }
-  );
-}
-function Textarea({ className, autoResize = true, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "textarea",
-    {
-      "data-slot": "textarea",
-      className: cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        autoResize ? "field-sizing-content min-h-16" : "field-sizing-fixed",
-        className
-      ),
-      ...props
+      "data-slot": "skeleton",
+      className: cn("bg-accent animate-pulse rounded-md", className),
+      ...props
     }
   );
 }
@@ -6585,6 +6906,9 @@ __export(ui_exports, {
   Button: () => Button,
   Checkbox: () => Checkbox,
   ClearButton: () => ClearButton,
+  Collapsible: () => Collapsible,
+  CollapsibleContent: () => CollapsibleContent2,
+  CollapsibleTrigger: () => CollapsibleTrigger2,
   DatePicker: () => DatePicker,
   Dialog: () => Dialog,
   DialogContent: () => DialogContent,
@@ -6622,6 +6946,39 @@ __export(ui_exports, {
   SelectTrigger: () => SelectTrigger,
   SelectValue: () => SelectValue,
   Separator: () => Separator2,
+  Sheet: () => Sheet,
+  SheetClose: () => SheetClose,
+  SheetContent: () => SheetContent,
+  SheetDescription: () => SheetDescription,
+  SheetFooter: () => SheetFooter,
+  SheetHeader: () => SheetHeader,
+  SheetTitle: () => SheetTitle,
+  SheetTrigger: () => SheetTrigger,
+  Sidebar: () => Sidebar,
+  SidebarContent: () => SidebarContent,
+  SidebarFooter: () => SidebarFooter,
+  SidebarGroup: () => SidebarGroup,
+  SidebarGroupAction: () => SidebarGroupAction,
+  SidebarGroupContent: () => SidebarGroupContent,
+  SidebarGroupLabel: () => SidebarGroupLabel,
+  SidebarHeader: () => SidebarHeader,
+  SidebarInput: () => SidebarInput,
+  SidebarInset: () => SidebarInset,
+  SidebarLayout: () => SidebarLayout,
+  SidebarMenu: () => SidebarMenu,
+  SidebarMenuAction: () => SidebarMenuAction,
+  SidebarMenuBadge: () => SidebarMenuBadge,
+  SidebarMenuButton: () => SidebarMenuButton,
+  SidebarMenuItem: () => SidebarMenuItem,
+  SidebarMenuSkeleton: () => SidebarMenuSkeleton,
+  SidebarMenuSub: () => SidebarMenuSub,
+  SidebarMenuSubButton: () => SidebarMenuSubButton,
+  SidebarMenuSubItem: () => SidebarMenuSubItem,
+  SidebarProvider: () => SidebarProvider,
+  SidebarRail: () => SidebarRail,
+  SidebarSeparator: () => SidebarSeparator,
+  SidebarTrigger: () => SidebarTrigger,
+  Skeleton: () => Skeleton,
   Spinner: () => Spinner,
   Switch: () => Switch,
   Table: () => Table,
@@ -6640,8 +6997,53 @@ __export(ui_exports, {
   TooltipTrigger: () => TooltipTrigger2,
   buttonVariants: () => buttonVariants,
   spinnerVariants: () => spinnerVariants,
-  useFormField: () => useFormField
+  useFormField: () => useFormField,
+  useSidebar: () => useSidebar
 });
+function Switch({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SwitchPrimitive__namespace.Root,
+    {
+      "data-slot": "switch",
+      className: cn(
+        "peer inline-flex h-[1.15rem] w-10 shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-[3px]",
+        "data-[state=checked]:bg-[#379A2A] data-[state=unchecked]:bg-[#EFEFEF]",
+        "dark:data-[state=unchecked]:bg-input/80",
+        "focus-visible:border-ring focus-visible:ring-ring/50",
+        "disabled:bg-gray-300 disabled:data-[state=checked]:bg-[#A5D6A7] disabled:data-[state=unchecked]:bg-[#E0E0E0]",
+        "disabled:cursor-not-allowed disabled:opacity-70",
+        "shadow-inner",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SwitchPrimitive__namespace.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: cn(
+            "bg-white block size-3.5 rounded-full ring-0 transition-transform",
+            "data-[state=checked]:translate-x-5.5 data-[state=unchecked]:translate-x-0.5",
+            "disabled:bg-gray-100"
+          )
+        }
+      )
+    }
+  );
+}
+function Textarea({ className, autoResize = true, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        autoResize ? "field-sizing-content min-h-16" : "field-sizing-fixed",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function TooltipProvider2({
   delayDuration = 0,
   ...props
@@ -6686,6 +7088,594 @@ function TooltipContent2({
     }
   ) });
 }
+var SIDEBAR_COOKIE_NAME = "sidebar_state";
+var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var SIDEBAR_WIDTH = "16rem";
+var SIDEBAR_WIDTH_MOBILE = "18rem";
+var SIDEBAR_WIDTH_ICON = "3rem";
+var SIDEBAR_KEYBOARD_SHORTCUT = "b";
+var SidebarContext = React5__namespace.createContext(null);
+function useSidebar() {
+  const context = React5__namespace.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return context;
+}
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React5__namespace.useState(false);
+  const [_open, _setOpen] = React5__namespace.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React5__namespace.useCallback(
+    (value) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open]
+  );
+  const toggleSidebar = React5__namespace.useCallback(() => {
+    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+  }, [isMobile, setOpen, setOpenMobile]);
+  React5__namespace.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+  const state = open ? "expanded" : "collapsed";
+  const contextValue = React5__namespace.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider2, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sidebar-wrapper",
+      style: {
+        "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+        ...style
+      },
+      className: cn(
+        "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) }) });
+}
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  if (collapsible === "none") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "sidebar",
+        className: cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      SheetContent,
+      {
+        "data-sidebar": "sidebar",
+        "data-slot": "sidebar",
+        "data-mobile": "true",
+        className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+        style: {
+          "--sidebar-width": SIDEBAR_WIDTH_MOBILE
+        },
+        side,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SheetDescription, { children: "Displays the mobile sidebar." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col", children })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "group peer text-sidebar-foreground hidden md:block",
+      "data-state": state,
+      "data-collapsible": state === "collapsed" ? collapsible : "",
+      "data-variant": variant,
+      "data-side": side,
+      "data-slot": "sidebar",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "sidebar-gap",
+            className: cn(
+              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+              "group-data-[collapsible=offcanvas]:w-0",
+              "group-data-[side=right]:rotate-180",
+              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "sidebar-container",
+            className: cn(
+              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+              side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+              // Adjust the padding for floating and inset variants.
+              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              className
+            ),
+            ...props,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-sidebar": "sidebar",
+                "data-slot": "sidebar-inner",
+                className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarTrigger({ className, onClick, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Button,
+    {
+      "data-sidebar": "trigger",
+      "data-slot": "sidebar-trigger",
+      variant: "ghost",
+      size: "icon",
+      className: cn("size-7", className),
+      onClick: (event) => {
+        onClick?.(event);
+        toggleSidebar();
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
+      ]
+    }
+  );
+}
+function SidebarRail({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-sidebar": "rail",
+      "data-slot": "sidebar-rail",
+      "aria-label": "Toggle Sidebar",
+      tabIndex: -1,
+      onClick: toggleSidebar,
+      title: "Toggle Sidebar",
+      className: cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarInset({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "main",
+    {
+      "data-slot": "sidebar-inset",
+      className: cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarInput({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputPrimitive,
+    {
+      "data-slot": "sidebar-input",
+      "data-sidebar": "input",
+      className: cn("bg-background h-8 w-full shadow-none", className),
+      ...props
+    }
+  );
+}
+function SidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sidebar-header",
+      "data-sidebar": "header",
+      className: cn("flex flex-col gap-2 p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sidebar-footer",
+      "data-sidebar": "footer",
+      className: cn("flex flex-col gap-2 p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Separator2,
+    {
+      "data-slot": "sidebar-separator",
+      "data-sidebar": "separator",
+      className: cn("bg-sidebar-border mx-2 w-auto", className),
+      ...props
+    }
+  );
+}
+function SidebarContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sidebar-content",
+      "data-sidebar": "content",
+      className: cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group",
+      "data-sidebar": "group",
+      className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-group-label",
+      "data-sidebar": "group-label",
+      className: cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-group-action",
+      "data-sidebar": "group-action",
+      className: cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      className: cn("w-full text-sm", className),
+      ...props
+    }
+  );
+}
+function SidebarMenu({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      "data-slot": "sidebar-menu",
+      "data-sidebar": "menu",
+      className: cn("flex w-full min-w-0 flex-col gap-1", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      "data-slot": "sidebar-menu-item",
+      "data-sidebar": "menu-item",
+      className: cn("group/menu-item relative", className),
+      ...props
+    }
+  );
+}
+var sidebarMenuButtonVariants = classVarianceAuthority.cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "button";
+  const { isMobile, state } = useSidebar();
+  const button = /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-button",
+      "data-sidebar": "menu-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+  if (!tooltip) {
+    return button;
+  }
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip
+    };
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip2, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger2, { asChild: true, children: button }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TooltipContent2,
+      {
+        side: "right",
+        align: "center",
+        hidden: state !== "collapsed" || isMobile,
+        ...tooltip
+      }
+    )
+  ] });
+}
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-action",
+      "data-sidebar": "menu-action",
+      className: cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarMenuBadge({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sidebar-menu-badge",
+      "data-sidebar": "menu-badge",
+      className: cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}) {
+  const width = React5__namespace.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "sidebar-menu-skeleton",
+      "data-sidebar": "menu-skeleton",
+      className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+      ...props,
+      children: [
+        showIcon && /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Skeleton,
+          {
+            className: "h-4 max-w-(--skeleton-width) flex-1",
+            "data-sidebar": "menu-skeleton-text",
+            style: {
+              "--skeleton-width": width
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarMenuSub({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      "data-slot": "sidebar-menu-sub",
+      "data-sidebar": "menu-sub",
+      className: cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarMenuSubItem({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      "data-slot": "sidebar-menu-sub-item",
+      "data-sidebar": "menu-sub-item",
+      className: cn("group/menu-sub-item relative", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "a";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-sub-button",
+      "data-sidebar": "menu-sub-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarLayout({
+  sidebar,
+  children,
+  layoutProps,
+  sidebarProps,
+  insetProps,
+  ...providerProps
+}) {
+  const { className: layoutClassName, ...restLayoutProps } = layoutProps ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarProvider, { ...providerProps, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "sidebar-layout", ...restLayoutProps, className: cn("flex", layoutClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { ...sidebarProps, children: sidebar }),
+    /* @__PURE__ */ jsxRuntime.jsx(SidebarInset, { ...insetProps, children })
+  ] }) });
+}
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -6695,6 +7685,9 @@ exports.AdvanceSearch = AdvanceSearch_default;
 exports.ArrowIcon = arrow_default;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
+exports.Collapsible = Collapsible;
+exports.CollapsibleContent = CollapsibleContent2;
+exports.CollapsibleTrigger = CollapsibleTrigger2;
 exports.DataTable = DataTable_default;
 exports.DatePicker = DatePicker2;
 exports.Dialog = Dialog;
@@ -6714,6 +7707,7 @@ exports.FormMessage = FormMessage;
 exports.GridSettingsModal = GridSettingsModal_default;
 exports.HeaderCell = HeaderCell_default;
 exports.Input = Input;
+exports.Label = Label2;
 exports.List = List_default;
 exports.ListContainer = container_default;
 exports.ListHeader = header_default;
@@ -6743,6 +7737,39 @@ exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
 exports.Separator = Separator2;
+exports.Sheet = Sheet;
+exports.SheetClose = SheetClose;
+exports.SheetContent = SheetContent;
+exports.SheetDescription = SheetDescription;
+exports.SheetFooter = SheetFooter;
+exports.SheetHeader = SheetHeader;
+exports.SheetTitle = SheetTitle;
+exports.SheetTrigger = SheetTrigger;
+exports.Sidebar = Sidebar;
+exports.SidebarContent = SidebarContent;
+exports.SidebarFooter = SidebarFooter;
+exports.SidebarGroup = SidebarGroup;
+exports.SidebarGroupAction = SidebarGroupAction;
+exports.SidebarGroupContent = SidebarGroupContent;
+exports.SidebarGroupLabel = SidebarGroupLabel;
+exports.SidebarHeader = SidebarHeader;
+exports.SidebarInput = SidebarInput;
+exports.SidebarInset = SidebarInset;
+exports.SidebarLayout = SidebarLayout;
+exports.SidebarMenu = SidebarMenu;
+exports.SidebarMenuAction = SidebarMenuAction;
+exports.SidebarMenuBadge = SidebarMenuBadge;
+exports.SidebarMenuButton = SidebarMenuButton;
+exports.SidebarMenuItem = SidebarMenuItem;
+exports.SidebarMenuSkeleton = SidebarMenuSkeleton;
+exports.SidebarMenuSub = SidebarMenuSub;
+exports.SidebarMenuSubButton = SidebarMenuSubButton;
+exports.SidebarMenuSubItem = SidebarMenuSubItem;
+exports.SidebarProvider = SidebarProvider;
+exports.SidebarRail = SidebarRail;
+exports.SidebarSeparator = SidebarSeparator;
+exports.SidebarTrigger = SidebarTrigger;
+exports.Skeleton = Skeleton;
 exports.SuiCalendarIcon = calendar_default;
 exports.SuiCheckIcon = check_default;
 exports.SuiDotsVerticalIcon = dots_vertical_default;
@@ -6779,6 +7806,7 @@ exports.useMediaQuery = useMediaQuery_default;
 exports.usePreventPageLeave = usePreventPageLeave_default;
 exports.usePreventPageLeaveStore = usePreventPageLeaveStore_default;
 exports.useScreenSize = useScreenSize_default;
+exports.useSidebar = useSidebar;
 exports.useTruncated = useTruncated_default;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map