@sustaina/shared-ui 1.9.6 → 1.10.0

package/dist/index.mjs

@@ -2,10 +2,10 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import clsx2, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React6 from 'react';
-import React6__default, { forwardRef, useRef, useMemo, useCallback, isValidElement, useState, useEffect, createElement } from 'react';
+import * as React5 from 'react';
+import React5__default, { forwardRef, useRef, useMemo, useCallback, isValidElement, useState, useEffect, createElement } from 'react';
 import { format, isValid, parseISO, isAfter, compareAsc, parse } from 'date-fns';
-import { CircleX, CircleHelp, Undo, Redo, Bold, Italic, Underline, Strikethrough, Code, Pilcrow, Heading1, Heading2, Heading3, List as List$1, ListOrdered, Quote, CodeSquare, Link, Link2Off, Image, AlignLeft, AlignCenter, AlignRight, XIcon, ChevronRight, CheckIcon, Triangle, CalendarIcon, X, Search, ChevronUp, ChevronDown, Plus, ChevronLeft, CircleUserRound, Bug, GripVertical, Info, CircleMinus, Minus } from 'lucide-react';
+import { CircleX, CircleHelp, Undo, Redo, Bold, Italic, Underline, Strikethrough, Code, Pilcrow, Heading1, Heading2, Heading3, List as List$1, ListOrdered, Quote, CodeSquare, Link, Link2Off, Image, AlignLeft, AlignCenter, AlignRight, XIcon, ChevronRight, CheckIcon, Triangle, CalendarIcon, X, Search, ChevronUp, ChevronDown, Plus, ChevronLeft, CircleUserRound, PanelLeftIcon, Bug, GripVertical, Info, CircleMinus, Minus } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { useForm, FormProvider, Controller, useFormContext, useFormState, useFieldArray, useWatch } from 'react-hook-form';
@@ -14,8 +14,9 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { reSplitAlphaNumeric, useReactTable, getCoreRowModel, getGroupedRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, flexRender } from '@tanstack/react-table';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -938,7 +939,7 @@ var OPERATOR_LABEL = {
   containsAll: "Contains all of"
 };
 var OperatorSelect = ({ row, operators, onChangeOperator, error }) => {
-  React6__default.useEffect(() => {
+  React5__default.useEffect(() => {
     if (!operators.length) return;
     if (!operators.includes(row.operator)) {
       onChangeOperator(operators[0]);
@@ -965,7 +966,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
@@ -973,15 +974,15 @@ function Label2({ className, ...props }) {
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React6.createContext({});
+var FormFieldContext = React5.createContext({});
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React6.useContext(FormFieldContext);
-  const itemContext = React6.useContext(FormItemContext);
+  const fieldContext = React5.useContext(FormFieldContext);
+  const itemContext = React5.useContext(FormItemContext);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -998,9 +999,9 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React6.createContext({});
+var FormItemContext = React5.createContext({});
 function FormItem({ className, ...props }) {
-  const id = React6.useId();
+  const id = React5.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
 }
 function FormLabel({ className, ...props }) {
@@ -1059,7 +1060,7 @@ function FormMessage({ className, ...props }) {
     }
   );
 }
-var InputPrimitive = React6.forwardRef(
+var InputPrimitive = React5.forwardRef(
   ({ className, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -1094,7 +1095,7 @@ var spinnerVariants = cva("relative inline-block aspect-square transform-gpu", {
   },
   defaultVariants: { variant: "primary", size: "default" }
 });
-var Spinner = ({ className, variant, size = "default" }) => /* @__PURE__ */ jsxs(
+var Spinner = ({ className, variant, size = "default", ...props }) => /* @__PURE__ */ jsxs(
   "div",
   {
     role: "status",
@@ -1104,6 +1105,7 @@ var Spinner = ({ className, variant, size = "default" }) => /* @__PURE__ */ jsxs
       className
     ),
     style: typeof size === "number" ? { width: size, height: size } : void 0,
+    ...props,
     children: [
       Array.from({ length: 12 }).map((_, i) => /* @__PURE__ */ jsx(
         "div",
@@ -1143,7 +1145,7 @@ var inputVariants = cva("", {
     appearance: "filled"
   }
 });
-var Input = React6.forwardRef(
+var Input = React5.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -1172,7 +1174,7 @@ var Input = React6.forwardRef(
       ...inputProps
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React6.useId();
+    const messageId = React5.useId();
     const resolvedAriaInvalid = typeof ariaInvalid === "string" ? ariaInvalid : ariaInvalid ? true : void 0;
     const describedBy = validationMessage ? [ariaDescribedByProp, messageId].filter(Boolean).join(" ") : ariaDescribedByProp;
     const controlWrapperClassName = cn(
@@ -1356,7 +1358,7 @@ var buttonVariants = 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"
@@ -1447,6 +1449,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();
@@ -1487,22 +1490,20 @@ function DatePicker({
   className,
   ...props
 }) {
-  const today = React6.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const [displayed, setDisplayed] = React6.useState(
+  const today = React5.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [displayed, setDisplayed] = React5.useState(
     selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date()
   );
   minDate = clampToDay(minDate);
   maxDate = clampToDay(maxDate);
-  const disabledSet = React6.useMemo(() => {
+  const disabledSet = React5.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.useMemo(() => {
+  const weekdays = React5.useMemo(() => {
     const labels = [];
     for (let i = 0; i < 7; i++) {
       const idx = i;
@@ -1511,7 +1512,7 @@ function DatePicker({
     }
     return labels;
   }, [callbacks]);
-  const grid = React6.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
+  const grid = React5.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
   const isDateDisabled = (date) => {
     const d = startOfDay(date);
     if (minDate && d < minDate) return true;
@@ -1519,6 +1520,106 @@ function DatePicker({
     if (disabledSet.has(d.toISOString())) return true;
     return false;
   };
+  const minYear = minDate?.getFullYear();
+  const maxYear = maxDate?.getFullYear();
+  const getMonthLabel = React5.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.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.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.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.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.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.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__ */ jsxs("div", { className: cn("min-w-[260px] w-[300px] p-3", className), ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
       /* @__PURE__ */ jsx(
@@ -1536,10 +1637,46 @@ function DatePicker({
           children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 opacity-70" })
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "text-sm font-bold select-none", children: [
-        monthLabel,
-        " ",
-        yearLabel
+      /* @__PURE__ */ jsxs(Select, { value: String(displayMonth), onValueChange: handleMonthSelect, children: [
+        /* @__PURE__ */ 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__ */ jsx(SelectValue, { placeholder: getMonthLabel(displayYear, displayMonth) })
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectContent, { className: "max-h-64", children: monthOptions.map((option) => /* @__PURE__ */ jsx(
+          SelectItem,
+          {
+            className: "text-center w-full",
+            value: String(option.value),
+            disabled: option.disabled,
+            children: option.label
+          },
+          option.value
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs(Select, { value: String(displayYear), onValueChange: handleYearSelect, children: [
+        /* @__PURE__ */ 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__ */ jsx(SelectValue, { placeholder: getYearLabel(displayYear) })
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectContent, { className: "max-h-64", children: yearOptions.map((year) => /* @__PURE__ */ jsx(
+          SelectItem,
+          {
+            value: String(year),
+            disabled: typeof minYear === "number" && year < minYear || typeof maxYear === "number" && year > maxYear,
+            children: getYearLabel(year)
+          },
+          year
+        )) })
       ] }),
       /* @__PURE__ */ jsx(
         "button",
@@ -1616,14 +1753,14 @@ var DatePicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React6__default.useState(false);
-  const parser = React6__default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
-  const outputFormatter = React6__default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
-  const labelFormatter = React6__default.useMemo(
+  const [open, setOpen] = React5__default.useState(false);
+  const parser = React5__default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
+  const outputFormatter = React5__default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
+  const labelFormatter = React5__default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter,
     [displayFormatter]
   );
-  const parsedValue = React6__default.useMemo(() => {
+  const parsedValue = React5__default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return value;
     const parsed = parser(value);
@@ -1632,26 +1769,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__default.useCallback(() => setOpen(false), []);
-  const emitChange = React6__default.useCallback(
+  const handleClose = React5__default.useCallback(() => setOpen(false), []);
+  const emitChange = React5__default.useCallback(
     (next) => {
       onChange?.(next);
       onValueChange?.(next ? outputFormatter(next) : void 0);
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React6__default.useCallback(
+  const handleSelect = React5__default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React6__default.useCallback(() => {
+  const handleClear = React5__default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React6__default.useCallback(
+  const handleOpenChange = React5__default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -1823,15 +1960,15 @@ function MonthCal({
   onYearBackward,
   onYearForward
 }) {
-  const today = React6.useMemo(() => {
+  const today = React5.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     now.setDate(1);
     now.setHours(0, 0, 0, 0);
     return now;
   }, []);
-  const selectedMonthDate = React6.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
-  const min = React6.useMemo(() => normalizeMonth(minDate), [minDate]);
-  const max = React6.useMemo(() => normalizeMonth(maxDate), [maxDate]);
+  const selectedMonthDate = React5.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
+  const min = React5.useMemo(() => normalizeMonth(minDate), [minDate]);
+  const max = React5.useMemo(() => normalizeMonth(maxDate), [maxDate]);
   let effectiveMin = min;
   if (min && max && min > max) {
     effectiveMin = max;
@@ -1840,10 +1977,10 @@ function MonthCal({
   const minMonth = effectiveMin?.getMonth();
   const maxYear = max?.getFullYear();
   const maxMonth = max?.getMonth();
-  const [menuYear, setMenuYear] = React6.useState(
+  const [menuYear, setMenuYear] = React5.useState(
     () => selectedMonthDate?.getFullYear() ?? today.getFullYear()
   );
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     if (selectedMonthDate) {
       const year = selectedMonthDate.getFullYear();
       if (year !== menuYear) {
@@ -1851,7 +1988,7 @@ function MonthCal({
       }
     }
   }, [selectedMonthDate, menuYear]);
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     if (typeof minYear === "number" && menuYear < minYear) {
       setMenuYear(minYear);
       return;
@@ -1862,7 +1999,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.useMemo(() => {
+  const yearOptions = React5.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.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.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.useMemo(() => {
     if (!disabledDates?.length) return [];
     const pairs = [];
     disabledDates.forEach((date) => {
@@ -1877,42 +2046,67 @@ function MonthCal({
     return pairs;
   }, [disabledDates]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-center pt-1 relative items-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: callbacks?.yearLabel ? callbacks.yearLabel(menuYear) : menuYear }),
-      /* @__PURE__ */ jsxs("div", { className: "space-x-1 flex items-center", children: [
-        /* @__PURE__ */ 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__ */ jsx(ChevronLeft, { className: "opacity-50 h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ 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__ */ jsx(ChevronLeft, { className: "opacity-50 h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: String(menuYear),
+          onValueChange: handleYearSelect,
+          disabled: disablePrevYear && disableNextYear,
+          children: [
+            /* @__PURE__ */ 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__ */ jsx(SelectValue, { placeholder: formatYearLabel(menuYear) })
+              }
             ),
-            children: /* @__PURE__ */ jsx(ChevronRight, { className: "opacity-50 h-4 w-4" })
-          }
-        )
-      ] })
+            /* @__PURE__ */ jsx(SelectContent, { className: "max-h-64", children: yearOptions.map((year) => /* @__PURE__ */ jsx(
+              SelectItem,
+              {
+                value: String(year),
+                disabled: typeof minYear === "number" && year < minYear || typeof maxYear === "number" && year > maxYear,
+                children: formatYearLabel(year)
+              },
+              year
+            )) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ 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__ */ jsx(ChevronRight, { className: "opacity-50 h-4 w-4" })
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx("table", { className: "w-full border-collapse space-y-1", children: /* @__PURE__ */ jsx("tbody", { children: MONTHS.map((row, rowIndex) => /* @__PURE__ */ 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;
@@ -1982,14 +2176,14 @@ var MonthPicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React6__default.useState(false);
-  const parser = React6__default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
-  const outputFormatter = React6__default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
-  const labelFormatter = React6__default.useMemo(
+  const [open, setOpen] = React5__default.useState(false);
+  const parser = React5__default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
+  const outputFormatter = React5__default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
+  const labelFormatter = React5__default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter2,
     [displayFormatter]
   );
-  const parsedValue = React6__default.useMemo(() => {
+  const parsedValue = React5__default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return normalizeMonth2(value);
     if (typeof value === "string") {
@@ -2001,8 +2195,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__default.useCallback(() => setOpen(false), []);
-  const emitChange = React6__default.useCallback(
+  const handleClose = React5__default.useCallback(() => setOpen(false), []);
+  const emitChange = React5__default.useCallback(
     (next) => {
       const normalized = next ? normalizeMonth2(next) : void 0;
       onChange?.(normalized);
@@ -2010,18 +2204,18 @@ var MonthPicker2 = ({
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React6__default.useCallback(
+  const handleSelect = React5__default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React6__default.useCallback(() => {
+  const handleClear = React5__default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React6__default.useCallback(
+  const handleOpenChange = React5__default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -3081,7 +3275,7 @@ var AdvanceSearch = ({
     defaultValues: {}
   });
   const { handleSubmit, unregister, resetField, getValues, clearErrors, setError } = form;
-  const [operatorErrors, setOperatorErrors] = React6__default.useState({});
+  const [operatorErrors, setOperatorErrors] = React5__default.useState({});
   const clearOperatorError = useCallback(
     (rowId) => {
       setOperatorErrors((prev) => {
@@ -3270,6 +3464,19 @@ function Checkbox({ className, ...props }) {
     }
   );
 }
+function Collapsible({ ...props }) {
+  return /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleTrigger, { "data-slot": "collapsible-trigger", ...props });
+}
+function CollapsibleContent2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", ...props });
+}
 function compareAlphanumeric(aStr, bStr) {
   const a = aStr.split(reSplitAlphaNumeric).filter(Boolean);
   const b = bStr.split(reSplitAlphaNumeric).filter(Boolean);
@@ -3659,7 +3866,7 @@ var ColumnSeparator = ({ show, className, ...props }) => {
     }
   );
 };
-var ColumnSeparator_default = React6__default.memo(ColumnSeparator);
+var ColumnSeparator_default = React5__default.memo(ColumnSeparator);
 var StatusContentSlot = ({
   content,
   icon,
@@ -3678,7 +3885,7 @@ var StatusContentSlot = ({
     content
   ] });
 };
-var StatusContentSlot_default = React6__default.memo(StatusContentSlot);
+var StatusContentSlot_default = React5__default.memo(StatusContentSlot);
 var stateOptions = [
   "columnFilters",
   "globalFilter",
@@ -4091,7 +4298,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__ */ jsx(Spinner, { size: 48 })
           }
@@ -4102,7 +4310,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__ */ jsx(empty_data_default, { className: "text-[128px]" })
           }
@@ -4127,6 +4336,7 @@ var DataTable = ({
                       return /* @__PURE__ */ jsxs(
                         TableHead,
                         {
+                          "data-testid": `table-head-${header.id}`,
                           colSpan: header.colSpan,
                           ...tableHeadCellProps,
                           ...header.column.columnDef?.meta?.headerProps,
@@ -4160,13 +4370,14 @@ var DataTable = ({
                       );
                     }) }, headerGroup.id);
                   }),
-                  isSomeColumnsFilterable && /* @__PURE__ */ jsx(TableRow, { children: filterableColumns.map((column) => {
+                  isSomeColumnsFilterable && /* @__PURE__ */ 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__ */ jsx(
                       TableCell,
                       {
+                        "data-testid": `table-filter-cell-${column.id}`,
                         ...tableFilterCellProps,
                         ...column.columnDef?.meta?.filterCellProps,
                         className: cn(
@@ -4199,6 +4410,7 @@ var DataTable = ({
               return /* @__PURE__ */ createElement(
                 TableRow,
                 {
+                  "data-testid": `table-data-row-${row.id}`,
                   ...tableDataRowProps,
                   key: row.id,
                   className: cn("group", tableDataRowProps?.className),
@@ -4217,6 +4429,9 @@ var DataTable = ({
                   return /* @__PURE__ */ 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(
@@ -4251,7 +4466,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__ */ jsx(empty_data_default, { className: "text-[128px]" })
             }
@@ -4262,7 +4478,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"
               }
             }
           ),
@@ -4273,7 +4490,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"
               }
             }
           )
@@ -4285,17 +4503,17 @@ var DataTable = ({
 };
 var DataTable_default = DataTable;
 function Dialog(props) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogTrigger(props) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal(props) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Overlay,
+    SheetPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn(
@@ -4319,7 +4537,7 @@ function DialogHeader({ className, children, ...props }) {
       children: [
         /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold", children }),
         /* @__PURE__ */ jsxs(
-          DialogPrimitive.Close,
+          SheetPrimitive.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",
@@ -4343,7 +4561,7 @@ function DialogContent({
   return /* @__PURE__ */ jsxs(DialogPortal, { children: [
     showOverlay && /* @__PURE__ */ jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
+      SheetPrimitive.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
@@ -4374,7 +4592,7 @@ function DialogFooter({ className, ...props }) {
 }
 function DialogTitle({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Title,
+    SheetPrimitive.Title,
     {
       "data-slot": "dialog-title",
       className: cn("text-lg font-semibold leading-none", className),
@@ -4387,7 +4605,7 @@ function DialogDescription({
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Description,
+    SheetPrimitive.Description,
     {
       "data-slot": "dialog-description",
       className: cn("text-sm text-muted-foreground", className),
@@ -4399,14 +4617,14 @@ function cn2(...inputs) {
   return twMerge(clsx(inputs));
 }
 function Dialog2({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal2({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay2({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Overlay,
+    SheetPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn2(
@@ -4426,7 +4644,7 @@ function DialogContent2({
   return /* @__PURE__ */ jsxs(DialogPortal2, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ jsx(DialogOverlay2, {}),
     /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
+      SheetPrimitive.Content,
       {
         "data-slot": "dialog-content",
         className: cn2(
@@ -4437,7 +4655,7 @@ function DialogContent2({
         children: [
           children,
           showCloseButton && /* @__PURE__ */ jsxs(
-            DialogPrimitive.Close,
+            SheetPrimitive.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",
@@ -4464,7 +4682,7 @@ function DialogHeader2({ className, ...props }) {
 }
 function DialogTitle2({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Title,
+    SheetPrimitive.Title,
     {
       "data-slot": "dialog-title",
       className: cn2("text-lg leading-none font-semibold", className),
@@ -4477,7 +4695,7 @@ function DialogDescription2({
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Description,
+    SheetPrimitive.Description,
     {
       "data-slot": "dialog-description",
       className: cn2("text-muted-foreground text-sm", className),
@@ -4640,9 +4858,9 @@ function SortableRow({
 }) {
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
     id: value,
-    disabled: name == "columns.0.id"
+    disabled: name === "columns.0.id"
   });
-  const style = React6.useMemo(
+  const style = React5.useMemo(
     () => ({
       transform: CSS.Transform.toString(transform),
       transition
@@ -4650,7 +4868,10 @@ function SortableRow({
     [transform, transition]
   );
   const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-  const currentFormColumns = useWatch({ control, name: "columns" });
+  const currentFormColumns = useWatch({
+    control,
+    name: "columns"
+  });
   return /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, className: "flex items-center rounded-md bg-white", children: /* @__PURE__ */ jsx(
     FormField,
     {
@@ -4667,7 +4888,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"
                 )
               }
             ),
@@ -4676,27 +4897,26 @@ function SortableRow({
               {
                 value: field.value,
                 onValueChange: field.onChange,
-                disabled: name == "columns.0.id",
+                disabled: name === "columns.0.id",
                 children: [
                   /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ 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__ */ jsx(SelectValue, { placeholder: "Choose column..." })
                     }
                   ) }),
-                  /* @__PURE__ */ jsx(SelectContent, { children: options.sort(
+                  /* @__PURE__ */ 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__ */ 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
@@ -4706,7 +4926,7 @@ function SortableRow({
                 ]
               }
             ),
-            name == "columns.0.id" ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            name === "columns.0.id" ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Info, { className: "h-5 w-5", stroke: "white", fill: "#8B8B8B" }) }),
               /* @__PURE__ */ jsx(
                 TooltipContent,
@@ -4714,7 +4934,6 @@ function SortableRow({
                   align: "start",
                   alignOffset: 10,
                   className: "bg-[#8B8B8B] rounded-none",
-                  arrowClassName: "!hidden",
                   children: /* @__PURE__ */ jsx("p", { children: "Column cannot be removed." })
                 }
               )
@@ -4754,6 +4973,7 @@ var GridSettingsModal = ({
   onSaveColumns
 }) => {
   const [isDragging, setIsDragging] = useState(false);
+  const scrollRef = useRef(null);
   const form = useForm({
     resolver: zodResolver(GridSettingsSchema),
     defaultValues: { columns: currentColumns },
@@ -4774,6 +4994,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;
     }
@@ -4798,8 +5027,8 @@ var GridSettingsModal = ({
       move(oldIndex, newIndex);
     }
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-xl border-0 p-0 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsx(DialogContent, { className: "sm:max-w-xl border-0 p-0 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-[500px] rounded-lg overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -4815,7 +5044,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__ */ jsx(X, { className: "h-6 w-6 text-white" })
               }
             )
@@ -4833,85 +5062,96 @@ var GridSettingsModal = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "mt-6 flex flex-col justify-between", children: [
-      /* @__PURE__ */ jsx("div", { className: "px-16 my-10", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 max-h-60 pr-4", children: [
-        /* @__PURE__ */ jsx(
-          SortableRow,
-          {
-            value: fields[0]?.fieldId,
-            control,
-            name: `columns.0.id`,
-            isDragging,
-            availableColumns
-          },
-          fields[0]?.fieldId
-        ),
-        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsx(
-          DndContext,
-          {
-            sensors,
-            collisionDetection: closestCenter,
-            modifiers: [restrictToParentElement, restrictToVerticalAxis],
-            onDragStart: () => setIsDragging(true),
-            onDragEnd: (event) => {
-              setIsDragging(false);
-              handleDragEnd(event);
-            },
-            children: /* @__PURE__ */ jsx(
-              SortableContext,
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 px-12 my-10 overflow-hidden", children: /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-col flex-1", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: scrollRef,
+          className: "flex-1 overflow-y-auto overflow-x-hidden max-h-[35vh] [scrollbar-gutter:stable_both-edges]",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 px-6", children: [
+            /* @__PURE__ */ jsx("div", { className: "[&_button:not([disabled])]:cursor-pointer", children: /* @__PURE__ */ jsx(
+              SortableRow,
+              {
+                value: fields[0]?.fieldId,
+                control,
+                name: `columns.0.id`,
+                isDragging,
+                availableColumns
+              },
+              fields[0]?.fieldId
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-3 [&_button:not([disabled])]:cursor-pointer", children: /* @__PURE__ */ jsx(
+              DndContext,
               {
-                items: fields?.slice(1).map((c) => c?.fieldId),
-                strategy: verticalListSortingStrategy,
-                children: fields?.slice(1).map((col, index) => /* @__PURE__ */ jsx(
-                  SortableRow,
+                sensors,
+                collisionDetection: closestCenter,
+                modifiers: [restrictToParentElement, restrictToVerticalAxis],
+                onDragStart: () => setIsDragging(true),
+                onDragEnd: (event) => {
+                  setIsDragging(false);
+                  handleDragEnd(event);
+                },
+                children: /* @__PURE__ */ jsx(
+                  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: verticalListSortingStrategy,
+                    children: fields?.slice(1).map((col, index) => /* @__PURE__ */ jsx(
+                      SortableRow,
+                      {
+                        value: col?.fieldId,
+                        control,
+                        name: `columns.${index + 1}.id`,
+                        isDragging,
+                        availableColumns,
+                        onRemove: () => remove(index + 1)
+                      },
+                      col?.fieldId
+                    ))
+                  }
+                )
               }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: "px-6", children: /* @__PURE__ */ jsxs(
-          Button,
-          {
-            type: "button",
-            className: cn("bg-[#49865d] text-white w-full rounded-t-lg", addButtonClassname),
-            onClick: addColumn,
-            disabled: fields.length >= limit,
-            children: [
-              /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-1" }),
-              " Add column"
-            ]
-          }
-        ) })
-      ] }) }),
-      /* @__PURE__ */ jsx(DialogFooter, { className: "-mx-6 mt-6 px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex px-4 justify-between w-full", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            variant: "outline",
-            onClick: onClose,
-            className: "w-18 text-[#8B8B8B] border-[#B9B9B9]",
-            children: "Cancel"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "submit",
-            className: cn("w-18 bg-[#379A2A] text-white", saveButtonClassname),
-            children: "Save"
-          }
-        )
-      ] }) })
+            ) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 z-20 flex justify-center bg-white pt-3", children: /* @__PURE__ */ 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__ */ jsx(Plus, { className: "h-4 w-4 mr-1" }),
+            " Add column"
+          ]
+        }
+      ) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(DialogFooter, { className: "bottom-0 border-t bg-white", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2 px-4 justify-end w-full", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: onClose,
+          className: "w-18 text-[#8B8B8B] border-[#B9B9B9]",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          className: cn("w-18 bg-[#379A2A] hover:bg-[#2f8524] text-white", saveButtonClassname),
+          onClick: form.handleSubmit(onSubmit),
+          children: "Save"
+        }
+      )
     ] }) })
   ] }) }) });
 };
@@ -4962,7 +5202,7 @@ var useGridSettingsStore = create(
 );
 var useGridSettingsStore_default = useGridSettingsStore;
 var ListTable = ({ onTableReady, children }) => {
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     if (onTableReady) {
       onTableReady({ ready: true });
     }
@@ -5085,7 +5325,7 @@ var InfoIcon = (props) => {
     }
   );
 };
-var InfoIcon_default = React6__default.memo(InfoIcon);
+var InfoIcon_default = React5__default.memo(InfoIcon);
 var Navbar = ({
   className,
   title,
@@ -5216,7 +5456,100 @@ var Navbar = ({
     }
   );
 };
-var navbar_default = React6__default.memo(Navbar);
+var navbar_default = React5__default.memo(Navbar);
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.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__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      SheetPrimitive.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__ */ jsxs(SheetPrimitive.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__ */ jsx(XIcon, { className: "size-4" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5 p-4", className), ...props });
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ 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__ */ jsx(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
 var usePreventPageLeaveStore = create((set) => ({
   isPreventing: false,
   setPreventing: (value) => set({ isPreventing: value })
@@ -5728,7 +6061,7 @@ function ToolbarPlugin({
       isLink: hasLink
     }));
   }, []);
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     return mergeRegister(
       editor.registerCommand(
         CAN_UNDO_COMMAND,
@@ -6314,7 +6647,7 @@ function ControlledValuePlugin({
   trackAppliedValue
 }) {
   const [editor] = useLexicalComposerContext();
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     if (value == null || trackAppliedValue.current === value) {
       return;
     }
@@ -6338,14 +6671,14 @@ function ControlledValuePlugin({
 }
 function EditableStatePlugin({ editable }) {
   const [editor] = useLexicalComposerContext();
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     editor.setEditable(editable);
   }, [editor, editable]);
   return null;
 }
 function ImagesPlugin() {
   const [editor] = useLexicalComposerContext();
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     return editor.registerCommand(
       INSERT_IMAGE_COMMAND,
       (payload) => {
@@ -6496,47 +6829,34 @@ function Separator2({
     }
   );
 }
-function Switch({ className, ...props }) {
+function useIsMobile(breakpoint = 768) {
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+    return window.innerWidth < breakpoint;
+  });
+  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__ */ jsx(
-    SwitchPrimitive.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__ */ jsx(
-        SwitchPrimitive.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__ */ 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
     }
   );
 }
@@ -6551,6 +6871,9 @@ __export(ui_exports, {
   Button: () => Button,
   Checkbox: () => Checkbox,
   ClearButton: () => ClearButton,
+  Collapsible: () => Collapsible,
+  CollapsibleContent: () => CollapsibleContent2,
+  CollapsibleTrigger: () => CollapsibleTrigger2,
   DatePicker: () => DatePicker,
   Dialog: () => Dialog,
   DialogContent: () => DialogContent,
@@ -6588,6 +6911,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,
@@ -6606,8 +6962,53 @@ __export(ui_exports, {
   TooltipTrigger: () => TooltipTrigger2,
   buttonVariants: () => buttonVariants,
   spinnerVariants: () => spinnerVariants,
-  useFormField: () => useFormField
+  useFormField: () => useFormField,
+  useSidebar: () => useSidebar
 });
+function Switch({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitive.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__ */ jsx(
+        SwitchPrimitive.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__ */ 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
@@ -6652,7 +7053,595 @@ 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.createContext(null);
+function useSidebar() {
+  const context = React5.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.useState(false);
+  const [_open, _setOpen] = React5.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React5.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.useCallback(() => {
+    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+  }, [isMobile, setOpen, setOpenMobile]);
+  React5.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.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipProvider2, { delayDuration: 0, children: /* @__PURE__ */ 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__ */ 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__ */ jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ 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__ */ jsxs(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex h-full w-full flex-col", children })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(PanelLeftIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
+      ]
+    }
+  );
+}
+function SidebarRail({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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 ? Slot : "div";
+  return /* @__PURE__ */ 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 ? Slot : "button";
+  return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(
+    "li",
+    {
+      "data-slot": "sidebar-menu-item",
+      "data-sidebar": "menu-item",
+      className: cn("group/menu-item relative", className),
+      ...props
+    }
+  );
+}
+var sidebarMenuButtonVariants = 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 ? Slot : "button";
+  const { isMobile, state } = useSidebar();
+  const button = /* @__PURE__ */ 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__ */ jsxs(Tooltip2, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger2, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx(
+      TooltipContent2,
+      {
+        side: "right",
+        align: "center",
+        hidden: state !== "collapsed" || isMobile,
+        ...tooltip
+      }
+    )
+  ] });
+}
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ 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__ */ 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.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+  return /* @__PURE__ */ 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__ */ jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }),
+        /* @__PURE__ */ 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__ */ 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__ */ 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 ? Slot : "a";
+  return /* @__PURE__ */ 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__ */ jsx(SidebarProvider, { ...providerProps, children: /* @__PURE__ */ jsxs("div", { "data-slot": "sidebar-layout", ...restLayoutProps, className: cn("flex", layoutClassName), children: [
+    /* @__PURE__ */ jsx(Sidebar, { ...sidebarProps, children: sidebar }),
+    /* @__PURE__ */ jsx(SidebarInset, { ...insetProps, children })
+  ] }) });
+}
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvanceSearch_default as AdvanceSearch, arrow_default as ArrowIcon, Button, Checkbox, DataTable_default as DataTable, DatePicker2 as DatePicker, Dialog, DialogAlert, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, Input, List_default as List, container_default as ListContainer, header_default as ListHeader, table_default as ListTable, LookupSelect, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave_default as PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, calendar_default as SuiCalendarIcon, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, ui_exports as UI, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, inputVariants, isDefined, isEmptyObject, selectValueToBoolean, stripNullishObject, throttle, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useTruncated_default as useTruncated };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvanceSearch_default as AdvanceSearch, arrow_default as ArrowIcon, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, DataTable_default as DataTable, DatePicker2 as DatePicker, Dialog, DialogAlert, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, Input, Label2 as Label, List_default as List, container_default as ListContainer, header_default as ListHeader, table_default as ListTable, LookupSelect, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave_default as PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, calendar_default as SuiCalendarIcon, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, ui_exports as UI, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, inputVariants, isDefined, isEmptyObject, selectValueToBoolean, stripNullishObject, throttle, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map