@sustaina/shared-ui 1.1.5

package/dist/index.mjs

@@ -0,0 +1,4842 @@
+import * as React3 from 'react';
+import React3__default, { createContext, isValidElement, useState, useEffect, useId, useContext, useRef, useCallback, useMemo, createElement } from 'react';
+import { Controller, useFormContext, useForm, FormProvider, get, set, appendErrors, useFormState } from 'react-hook-form';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import clsx3, { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { create } from 'zustand';
+import { reSplitAlphaNumeric, useReactTable, getCoreRowModel, getGroupedRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, flexRender } from '@tanstack/react-table';
+import { CircleHelp, Triangle, X, Plus, Search, Bug, XIcon, GripVertical, Info, CircleMinus, CalendarIcon, Minus, ChevronDownIcon, CheckIcon, ChevronLeft, ChevronRight, Tag, ChevronUpIcon } from 'lucide-react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as LabelPrimitive2 from '@radix-ui/react-label';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { useSensors, useSensor, PointerSensor, DndContext, closestCenter } from '@dnd-kit/core';
+import { z } from 'zod';
+import { createPortal } from 'react-dom';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+// src/components/form/form-controls/use-form-field.ts
+var FormFieldContext = createContext({});
+function FormField(props) {
+  return /* @__PURE__ */ jsx(FormFieldContext, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+}
+var FormItemContext = createContext({});
+function FormItem({ children, ...props }) {
+  const formItemId = useId();
+  return /* @__PURE__ */ jsx(FormItemContext, { value: { id: formItemId }, children: /* @__PURE__ */ jsx("div", { ...props, children }) });
+}
+
+// src/components/form/form-controls/use-form-field.ts
+function useFormField(options) {
+  const { name: formFieldName } = useContext(FormFieldContext);
+  const { id: formItemId } = useContext(FormItemContext);
+  const formContext = useFormContext();
+  if ((!formFieldName || !formItemId || !formContext) && options?.skipValidationIfNoContext) {
+    return {
+      prefixId: void 0,
+      name: void 0,
+      formItemId: void 0,
+      formLabelId: void 0,
+      formErrorMessageId: void 0,
+      isDirty: false,
+      invalid: false,
+      isTouched: false,
+      isValidating: false,
+      error: void 0
+    };
+  }
+  if (!formFieldName) {
+    throw new Error(
+      "useFormField must be used inside a <FormField> component. Ensure that <FormField> wraps the component using useFormField."
+    );
+  }
+  if (!formItemId) {
+    throw new Error(
+      "useFormField must be used inside a <FormItem> component. Ensure that <FormItem> wraps the component using useFormField."
+    );
+  }
+  if (!formContext) {
+    throw new Error("useFormField must be used inside a <Form> component.");
+  }
+  const fieldState = formContext?.getFieldState?.(formFieldName, formContext?.formState);
+  const prefixId = formItemId?.concat(formFieldName);
+  return {
+    prefixId,
+    name: formFieldName,
+    formItemId: prefixId ? `${prefixId}-form-item` : void 0,
+    formLabelId: prefixId ? `${prefixId}-form-label` : void 0,
+    formErrorMessageId: prefixId ? `${prefixId}-form-error-message` : void 0,
+    ...fieldState
+  };
+}
+function cn(...args) {
+  return twMerge(clsx(args));
+}
+function FormErrorMessage({ className, errorClassName, ...props }) {
+  const { formErrorMessageId, invalid, error } = useFormField();
+  if (!invalid) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      id: formErrorMessageId,
+      className: cn(
+        "text-sm font-medium text-destructive text-red-600 flex items-center gap-1 mt-2 ml-1",
+        className,
+        {
+          "text-red-600": invalid,
+          [errorClassName ?? ""]: invalid
+        }
+      ),
+      "aria-invalid": invalid,
+      "aria-errormessage": error?.message,
+      ...props,
+      children: error?.message
+    }
+  );
+}
+function FormLabel({ children, className, errorClassName, required, ...props }) {
+  const { formItemId, formLabelId, invalid } = useFormField();
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      id: formLabelId,
+      htmlFor: formItemId,
+      className: cn("block mb-2", className, {
+        "text-destructive text-red-600": invalid,
+        [errorClassName ?? ""]: invalid
+      }),
+      "aria-label": formLabelId,
+      "aria-invalid": invalid,
+      ...props,
+      children: [
+        children,
+        required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+      ]
+    }
+  );
+}
+
+// src/utils/getColumnIdFromTable.ts
+function getColumnIdFromTable(table) {
+  const allColumns = table.getAllColumns();
+  const availableColumns = allColumns.map((col) => ({ id: col.id }));
+  const currentColumns = allColumns.filter((col) => col.getIsVisible()).map((col) => ({ id: col.id }));
+  return { availableColumns, currentColumns };
+}
+var useGridSettingsStore = create(
+  (set) => ({
+    availableColumns: [],
+    currentColumns: [],
+    payload: {
+      ordering: [],
+      visibility: {},
+      pinning: { left: [] }
+    },
+    setAvailableColumns: (cols) => set({ availableColumns: cols }),
+    setCurrentColumns: (cols) => set({ currentColumns: cols }),
+    setPayload: (payload) => set({ payload }),
+    reset: () => set({
+      availableColumns: [],
+      currentColumns: [],
+      payload: { ordering: [], visibility: {}, pinning: { left: [] } }
+    }),
+    extractColumns: (table) => {
+      const availableColumns = table.getAllColumns().map((col) => ({ id: col.id }));
+      const currentColumns = table.getVisibleLeafColumns().map((col) => ({ id: col.id }));
+      return { availableColumns, currentColumns };
+    }
+  })
+);
+function TextInput({ className, ...props }) {
+  return /* @__PURE__ */ jsx("input", { type: "text", className: cn("input", className), ...props });
+}
+function NumberInput({ className, ...props }) {
+  return /* @__PURE__ */ jsx("input", { type: "number", className: cn("input", className), ...props });
+}
+function compareAlphanumeric(aStr, bStr) {
+  const a = aStr.split(reSplitAlphaNumeric).filter(Boolean);
+  const b = bStr.split(reSplitAlphaNumeric).filter(Boolean);
+  while (a.length && b.length) {
+    const aa = a.shift();
+    const bb = b.shift();
+    const an = parseInt(aa, 10);
+    const bn = parseInt(bb, 10);
+    const combo = [an, bn].sort();
+    if (isNaN(combo[0])) {
+      if (aa > bb) {
+        return 1;
+      }
+      if (bb > aa) {
+        return -1;
+      }
+      continue;
+    }
+    if (isNaN(combo[1])) {
+      return isNaN(an) ? -1 : 1;
+    }
+    if (an > bn) {
+      return 1;
+    }
+    if (bn > an) {
+      return -1;
+    }
+  }
+  return a.length - b.length;
+}
+function cn2(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function booleanToSelectValue(value, options) {
+  if (value === true) return "true";
+  if (value === false) return "false";
+  return options?.fallbackUndefinedValue ?? "";
+}
+function selectValueToBoolean(value) {
+  if (value === "true") return true;
+  if (value === "false") return false;
+  return void 0;
+}
+function renderContentSlot(slot, defaultWrapperProps) {
+  const { content, wrapperProps = {} } = slot;
+  const mergedProps = {
+    ...defaultWrapperProps,
+    ...wrapperProps,
+    className: cn2(defaultWrapperProps?.className, wrapperProps?.className)
+  };
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { ...mergedProps, children: content });
+}
+var useHover = () => {
+  const [hovering, setHovering] = useState(false);
+  const prevRef = useRef(null);
+  const onMouseEnter = useCallback(() => setHovering(true), []);
+  const onMouseLeave = useCallback(() => setHovering(false), []);
+  const nodeRefCallback = useCallback(
+    (node) => {
+      if (prevRef.current) {
+        prevRef.current.removeEventListener("mouseenter", onMouseEnter);
+        prevRef.current.removeEventListener("mouseleave", onMouseLeave);
+      }
+      if (node?.nodeType === Node.ELEMENT_NODE) {
+        node.addEventListener("mouseenter", onMouseEnter);
+        node.addEventListener("mouseleave", onMouseLeave);
+      }
+      prevRef.current = node;
+    },
+    [onMouseEnter, onMouseLeave]
+  );
+  return {
+    ref: nodeRefCallback,
+    hovering
+  };
+};
+var useHover_default = useHover;
+var useIntersectionObserver = ({
+  threshold = 0,
+  root = null,
+  rootMargin = "0%",
+  freezeOnceVisible = false,
+  initialIsIntersecting = false,
+  onChange
+} = {}) => {
+  const [ref, setRef] = useState(null);
+  const [state, setState] = useState(() => ({
+    isIntersecting: initialIsIntersecting,
+    entry: void 0
+  }));
+  const callbackRef = useRef(null);
+  callbackRef.current = onChange;
+  const frozen = state.entry?.isIntersecting && freezeOnceVisible;
+  useEffect(() => {
+    if (!ref) return;
+    if (!("IntersectionObserver" in window)) return;
+    if (frozen) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const thresholds = Array.isArray(observer.thresholds) ? observer.thresholds : [observer.thresholds];
+        entries.forEach((entry) => {
+          const isIntersecting = entry.isIntersecting && thresholds.some((threshold2) => entry.intersectionRatio >= threshold2);
+          setState({ isIntersecting, entry });
+          if (callbackRef.current) {
+            callbackRef.current(isIntersecting, entry);
+          }
+        });
+      },
+      { threshold, root, rootMargin }
+    );
+    observer.observe(ref);
+    return () => {
+      observer.disconnect();
+    };
+  }, [
+    ref,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(threshold),
+    root,
+    rootMargin,
+    frozen,
+    freezeOnceVisible
+  ]);
+  const prevRef = useRef(null);
+  useEffect(() => {
+    if (!ref && state.entry?.target && !freezeOnceVisible && !frozen && prevRef.current !== state.entry.target) {
+      prevRef.current = state.entry.target;
+      setState({ isIntersecting: initialIsIntersecting, entry: void 0 });
+    }
+  }, [ref, state.entry, freezeOnceVisible, frozen, initialIsIntersecting]);
+  const result = [setRef, !!state.isIntersecting, state.entry];
+  result.ref = result[0];
+  result.isIntersecting = result[1];
+  result.entry = result[2];
+  return result;
+};
+var useIntersectionObserver_default = useIntersectionObserver;
+var isValidMediaQueryString = (query) => {
+  return query !== "not all";
+};
+var useMediaQuery = ({ query }) => {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const mql = window.matchMedia(query);
+    if (!isValidMediaQueryString(mql.media)) {
+      throw new Error(`${query}: invalid media query string.`);
+    }
+    const detectMediaChange = (event) => {
+      setMatches(event.matches);
+    };
+    setMatches(mql.matches);
+    mql.addEventListener("change", detectMediaChange);
+    return () => {
+      mql.removeEventListener("change", detectMediaChange);
+    };
+  }, [query]);
+  return matches;
+};
+var useMediaQuery_default = useMediaQuery;
+
+// src/hooks/useScreenSize/useScreenSize.ts
+var useScreenSize = (breakpoints) => {
+  const isMobile = useMediaQuery_default({ query: breakpoints?.mobile ?? "(max-width: 767px)" });
+  const isTablet = useMediaQuery_default({
+    query: breakpoints?.tablet ?? "(min-width: 768px) and (max-width: 1023px)"
+  });
+  const isDesktop = useMediaQuery_default({ query: breakpoints?.desktop ?? "(min-width: 1024px)" });
+  return { isMobile, isTablet, isDesktop };
+};
+var useScreenSize_default = useScreenSize;
+
+// src/utils/common.ts
+function isDefined(value) {
+  return value !== null && value !== void 0;
+}
+
+// src/utils/filters.ts
+function stripNullishObject(value) {
+  if (!isDefined(value)) {
+    return {};
+  }
+  try {
+    return Object.fromEntries(Object.entries(value).filter(([, propValue]) => isDefined(propValue)));
+  } catch {
+    return {};
+  }
+}
+var HeaderCell = ({ rootClassName, labelClassName, context, label, sorterProps }) => {
+  const { ref, hovering } = useHover_default();
+  const showSorter = sorterProps?.show ?? context.column.getCanSort();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-center gap-2",
+        {
+          "cursor-pointer": context?.column?.getCanSort()
+        },
+        rootClassName
+      ),
+      ...stripNullishObject({
+        onClick: (event) => {
+          event.preventDefault();
+          if (context?.column?.getCanSort()) {
+            context?.column?.toggleSorting();
+          }
+        }
+      }),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("inline-block font-bold", labelClassName), children: label }),
+        showSorter && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-col",
+            title: context.column.getCanSort() ? context.column.getNextSortingOrder() === "asc" ? "Sort ascending" : context.column.getNextSortingOrder() === "desc" ? "Sort descending" : "Clear sort" : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                Triangle,
+                {
+                  className: cn("fill-gray-300 stroke-0", {
+                    "fill-[#41875c]": context?.column?.getIsSorted() === "asc",
+                    "fill-[#41875c]/45": context?.column?.getNextSortingOrder() === "asc" && hovering
+                  }),
+                  size: 12
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Triangle,
+                {
+                  className: cn("rotate-180 fill-gray-300 stroke-0", {
+                    "fill-[#41875c]": context?.column?.getIsSorted() === "desc",
+                    "fill-[#41875c]/45": context?.column?.getNextSortingOrder() === "desc" && hovering
+                  }),
+                  size: 12
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var HeaderCell_default = HeaderCell;
+function TableContainer({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: cn("relative w-full overflow-x-auto", className),
+      ...props,
+      children
+    }
+  );
+}
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "table",
+    {
+      "data-slot": "table",
+      className: cn("w-full caption-bottom text-sm border-separate border-spacing-0", className),
+      ...props
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn("[&_tr]:border-b bg-[#f7f4f4]", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx("tbody", { "data-slot": "table-body", className: cn("[&_tr:last-child]:border-0", className), ...props });
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn("data-[state=selected]:bg-[#dfeae3]", className),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "text-foreground h-9 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] hover:bg-gray-200 bg-[#f7f4f4] truncate",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-2 h-10 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] border-b truncate",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var ColumnResizer = ({ header, className, style }) => {
+  if (!header.column.getCanResize()) {
+    return null;
+  }
+  const resizeHandler = header.getResizeHandler();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute top-0 right-0 h-full w-1 select-none touch-none cursor-col-resize hover:bg-[#41875c]/45 active:bg-[#41875c]",
+        className
+      ),
+      onDoubleClick: () => header.column.resetSize(),
+      onTouchStart: resizeHandler,
+      onMouseDown: resizeHandler,
+      style
+    }
+  );
+};
+var ColumnResizer_default = ColumnResizer;
+var stateOptions = [
+  "columnFilters",
+  "globalFilter",
+  "sorting",
+  "pagination",
+  "columnVisibility",
+  "columnOrder",
+  "rowSelection",
+  "expanded",
+  "grouping",
+  "columnPinning",
+  "columnSizing",
+  "columnSizingInfo",
+  "rowPinning"
+];
+var modelOptions = [
+  "getRowModel",
+  "getGroupedRowModel",
+  "getPaginationRowModel",
+  "getCoreRowModel",
+  "getFilteredRowModel",
+  "getFilteredSelectedRowModel",
+  "getSortedRowModel",
+  "getPreExpandedRowModel",
+  "getGroupedSelectedRowModel",
+  "getPrePaginationRowModel",
+  "getPreSelectedRowModel",
+  "getPreSortedRowModel",
+  "getSelectedRowModel",
+  "getExpandedRowModel",
+  "getIsAllColumnsVisible",
+  "getIsSomeColumnsPinned",
+  "getIsSomeColumnsVisible",
+  "getHeaderGroups",
+  "getFlatHeaders",
+  "getLeafHeaders",
+  "getLeftFlatHeaders",
+  "getCenterLeafHeaders",
+  "getRightFlatHeaders",
+  "getAllColumns",
+  "getAllFlatColumns",
+  "getAllLeafColumns",
+  "getLeftLeafColumns",
+  "getCenterLeafColumns",
+  "getRightLeafColumns",
+  "getVisibleFlatColumns",
+  "getVisibleLeafColumns",
+  "getLeftVisibleLeafColumns",
+  "getRightVisibleLeafColumns",
+  "getCenterVisibleLeafColumns"
+];
+var DataTableDevTool = ({ table }) => {
+  const [open, setOpen] = useState(false);
+  const [visibleStates, setVisibleStates] = useState([]);
+  const [visibleModels, setVisibleModels] = useState([]);
+  const tableState = table.getState();
+  const toggleValue = (arr, value) => arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value];
+  const getCircularReplacer = () => {
+    const seen = /* @__PURE__ */ new WeakSet();
+    return (_key, value) => {
+      if (typeof value === "object" && value !== null) {
+        if (seen.has(value)) return "[Circular]";
+        seen.add(value);
+      }
+      return value;
+    };
+  };
+  const renderStateValue = (key) => {
+    const value = tableState[key];
+    if (value == null) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "font-bold capitalize", children: key }),
+      /* @__PURE__ */ jsx("pre", { className: "bg-gray-100 text-xs p-2 rounded overflow-x-auto whitespace-pre-wrap", children: JSON.stringify(value, null, 2) })
+    ] }, key);
+  };
+  const renderModelValue = (key) => {
+    let value;
+    try {
+      value = table[key]();
+    } catch {
+      value = void 0;
+    }
+    if (value == null) return null;
+    let jsonString = "";
+    try {
+      jsonString = JSON.stringify(value, getCircularReplacer(), 2);
+    } catch {
+      jsonString = "[Cannot stringify]";
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "font-bold capitalize", children: key }),
+      /* @__PURE__ */ jsx("pre", { className: "bg-gray-100 text-xs p-2 rounded overflow-x-auto whitespace-pre-wrap", children: jsonString })
+    ] }, key);
+  };
+  if (process.env.NODE_ENV === "production") return null;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setOpen(true),
+        className: "fixed bottom-6 right-6 z-50 rounded-full bg-white border shadow p-3",
+        "aria-label": "Open debug panel",
+        children: /* @__PURE__ */ jsx(Bug, { className: "w-5 h-5" })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("aside", { className: "fixed top-0 right-0 h-full w-[420px] bg-white shadow-lg border-l border-gray-200 z-50 flex flex-col", children: [
+      /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between p-4 border-b border-gray-200", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Debug Table State & Models" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setOpen(false), className: "text-xl font-bold", "aria-label": "Close", children: "\xD7" })
+      ] }),
+      /* @__PURE__ */ jsxs("main", { className: "overflow-auto p-4 flex-grow space-y-4", children: [
+        /* @__PURE__ */ jsxs("section", { className: "max-h-80 overflow-y-auto overflow-x-hidden", children: [
+          /* @__PURE__ */ jsxs("fieldset", { children: [
+            /* @__PURE__ */ jsx("legend", { className: "block text-sm font-medium mb-1", children: "Show Table State" }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-1", children: stateOptions.map((stateKey) => /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: "flex items-center gap-2 cursor-pointer hover:bg-gray-50 p-1 rounded",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      className: "accent-blue-500",
+                      checked: visibleStates.includes(stateKey),
+                      onChange: () => setVisibleStates(toggleValue(visibleStates, stateKey))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: stateKey })
+                ]
+              },
+              stateKey
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxs("fieldset", { children: [
+            /* @__PURE__ */ jsx("legend", { className: "block text-sm font-medium mb-1", children: "Show Table Models" }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-1", children: modelOptions.map((modelKey) => /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: "flex items-center gap-2 cursor-pointer hover:bg-gray-50 p-1 rounded",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      className: "accent-green-500",
+                      checked: visibleModels.includes(modelKey),
+                      onChange: () => setVisibleModels(toggleValue(visibleModels, modelKey))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: modelKey })
+                ]
+              },
+              modelKey
+            )) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("hr", { className: "my-2 border-gray-300" }),
+        visibleStates.map(renderStateValue),
+        visibleModels.map(renderModelValue)
+      ] })
+    ] })
+  ] });
+};
+var DataTableDevTool_default = DataTableDevTool;
+
+// src/components/data-table/helpers.ts
+function getColumnPinningStyles(column) {
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
+  const classes = cn(
+    isPinned ? "sticky" : "relative",
+    isPinned ? "z-[1]" : "z-0",
+    isLastLeftPinnedColumn && "shadow-[inset_-1px_0_0_0_black]",
+    isFirstRightPinnedColumn && "shadow-[inset_1px_0_0_0_black]"
+  );
+  const style = {
+    left: isPinned === "left" ? column.getStart("left") : void 0,
+    right: isPinned === "right" ? column.getAfter("right") : void 0
+  };
+  return { classes, style };
+}
+var fallbackData = [];
+var DataTable = ({
+  tableRef,
+  isInitialLoading,
+  columns,
+  data,
+  filters,
+  sorting,
+  columnOrder,
+  columnVisibility,
+  columnPinning,
+  columnGrouping,
+  columnResizing,
+  rowSelection,
+  rowExpansion,
+  scrollFetch,
+  statusContent,
+  rowIdKey,
+  childrenKey,
+  onRowClick,
+  debug,
+  components
+}) => {
+  const table = useReactTable({
+    // required properties
+    columns,
+    data: data || fallbackData,
+    getCoreRowModel: getCoreRowModel(),
+    // optional properties
+    ...stripNullishObject({
+      // state for filters, sorting, pinning, row selection, etc.
+      initialState: stripNullishObject({
+        columnFilters: filters?.enabled && (filters?.column?.enabled ?? true) ? filters?.column?.initialState : void 0,
+        globalFilter: filters?.enabled ? filters?.global?.initialState : void 0,
+        sorting: sorting?.enabled ? sorting?.initialState : void 0,
+        columnOrder: columnOrder?.enabled ? columnOrder?.initialState : void 0,
+        columnVisibility: columnVisibility?.enabled ? columnVisibility?.initialState : void 0,
+        columnPinning: columnPinning?.enabled ? columnPinning?.initialState : void 0,
+        rowSelection: rowSelection?.enabled ? rowSelection?.initialState : void 0,
+        expanded: rowExpansion?.enabled ? rowExpansion?.initialState : void 0,
+        grouping: columnGrouping?.enabled ? columnGrouping?.initialState : void 0
+      }),
+      state: stripNullishObject({
+        columnFilters: filters?.enabled && (filters?.column?.enabled ?? true) ? filters?.column?.state : void 0,
+        globalFilter: filters?.enabled ? filters?.global?.state : void 0,
+        sorting: sorting?.enabled ? sorting?.state : void 0,
+        columnOrder: columnOrder?.enabled ? columnOrder?.state : void 0,
+        columnVisibility: columnVisibility?.enabled ? columnVisibility?.state : void 0,
+        columnPinning: columnPinning?.enabled ? columnPinning?.state : void 0,
+        rowSelection: rowSelection?.enabled ? rowSelection?.state : void 0,
+        expanded: rowExpansion?.enabled ? rowExpansion?.state : void 0,
+        grouping: columnGrouping?.enabled ? columnGrouping?.state : void 0
+      }),
+      // common
+      getRowId: rowIdKey,
+      getSubRows: childrenKey,
+      // shared configs filters column and global
+      enableFilters: filters?.enabled ?? false,
+      filterFromLeafRows: filters?.enabled && (filters?.filterFromLeafRows ?? false),
+      manualFiltering: filters?.enabled && (filters?.manual ?? false),
+      maxLeafRowFilterDepth: filters?.enabled ? filters?.maxDepth : void 0,
+      // column filters
+      getFilteredRowModel: !filters?.manual && filters?.enabled ? getFilteredRowModel() : void 0,
+      enableColumnFilters: filters?.enabled && (filters?.column?.enabled ?? true),
+      onColumnFiltersChange: filters?.enabled && (filters?.column?.enabled ?? true) ? filters?.column?.onFilterChange : void 0,
+      // global filters
+      enableGlobalFilter: filters?.enabled && (filters?.global?.enabled ?? true),
+      globalFilterFn: filters?.enabled && (filters?.global?.enabled ?? true) ? filters?.global?.filterFn : void 0,
+      onGlobalFilterChange: filters?.enabled && (filters?.global?.enabled ?? true) ? filters?.global?.onFilterChange : void 0,
+      getColumnCanGlobalFilter: filters?.enabled && (filters?.global?.enabled ?? true) ? filters?.global?.canColumnFilterable ?? (() => true) : void 0,
+      // sorting
+      getSortedRowModel: !sorting?.manual && sorting?.enabled ? getSortedRowModel() : void 0,
+      manualSorting: sorting?.enabled && (sorting?.manual ?? false),
+      enableSorting: sorting?.enabled ?? false,
+      // default behavior: column with type number is sort by desc and string sort by asc first, we fix force always asc
+      sortDescFirst: sorting?.enabled ? sorting?.sortDescFirst ?? false : false,
+      onSortingChange: sorting?.enabled ? sorting?.onSortingChange : void 0,
+      // ordering
+      onColumnOrderChange: columnOrder?.enabled ? columnOrder?.onOrderChange : void 0,
+      // visibility
+      onColumnVisibilityChange: columnVisibility?.enabled ? columnVisibility?.onVisibilityChange : void 0,
+      // pinning
+      enableColumnPinning: columnPinning?.enabled ?? false,
+      onColumnPinningChange: columnPinning?.enabled ? columnPinning?.onPinningChange : void 0,
+      // row selection
+      enableRowSelection: rowSelection?.enabled ? rowSelection?.canRowSelectable : false,
+      enableMultiRowSelection: rowSelection?.enabled ? rowSelection?.multiSelect ?? true : true,
+      onRowSelectionChange: rowSelection?.enabled ? rowSelection?.onSelectionChange : void 0,
+      // row expanded
+      getExpandedRowModel: (
+        // when grouping is use then we should open this
+        !rowExpansion?.manual && rowExpansion?.enabled ? getExpandedRowModel() : void 0
+      ),
+      manualExpanding: rowExpansion?.enabled && (rowExpansion?.manual ?? false),
+      enableExpanding: rowExpansion?.enabled ?? false,
+      getIsRowExpanded: rowExpansion?.enabled ? rowExpansion?.isRowExpanded : void 0,
+      getRowCanExpand: rowExpansion?.enabled ? rowExpansion?.canRowExpand : void 0,
+      onExpandedChange: rowExpansion?.enabled ? rowExpansion?.onExpandedChange : void 0,
+      // grouping
+      getGroupedRowModel: !columnGrouping?.manual && columnGrouping?.enabled ? getGroupedRowModel() : void 0,
+      enableGrouping: columnGrouping?.enabled ?? false,
+      manualGrouping: columnGrouping?.enabled && (columnGrouping?.manual ?? false),
+      groupedColumnMode: columnGrouping?.enabled ? columnGrouping?.groupedMode ?? false : false,
+      aggregationFns: columnGrouping?.enabled ? columnGrouping?.customAggregationFns : void 0,
+      onGroupingChange: columnGrouping?.enabled ? columnGrouping?.onGroupingChange : void 0,
+      // column sizing
+      enableColumnResizing: columnResizing?.enabled ?? false,
+      columnResizeMode: columnResizing?.enabled ? columnResizing?.resizeMode ?? "onChange" : "onChange"
+    })
+  });
+  if (isDefined(tableRef) && !isDefined(tableRef?.current)) {
+    tableRef.current = table;
+  }
+  const tableContainerRef = 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 } = useMemo(() => {
+    const mergedColumns = [
+      ...leftVisibleLeftColumns,
+      ...centerVisibleLeafColumns,
+      ...rightVisibleLeafColumns
+    ];
+    const isSomeColumnsFilterable2 = mergedColumns.some(
+      (column) => column.getCanFilter() && column.columnDef.meta?.renderColumnFilter
+    );
+    return { isSomeColumnsFilterable: isSomeColumnsFilterable2, filterableColumns: mergedColumns };
+  }, [centerVisibleLeafColumns, leftVisibleLeftColumns, rightVisibleLeafColumns]);
+  const fetchMoreOnScrollReached = useCallback(
+    (containerRefElement) => {
+      if (!scrollFetch?.enabled) {
+        return;
+      }
+      if (containerRefElement) {
+        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+        const threshold = 1.5;
+        if (scrollHeight - scrollTop - clientHeight < clientHeight * threshold && !scrollFetch?.isFetchingMore && scrollFetch?.hasMore && scrollFetch?.fetchMore) {
+          scrollFetch.fetchMore();
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [scrollFetch?.enabled, scrollFetch?.isFetchingMore, scrollFetch?.hasMore, scrollFetch?.fetchMore]
+  );
+  useEffect(() => {
+    fetchMoreOnScrollReached(tableContainerRef.current);
+  }, [fetchMoreOnScrollReached]);
+  return /* @__PURE__ */ jsxs(
+    TableContainer,
+    {
+      ref: tableContainerRef,
+      ...components?.containerProps,
+      className: cn(
+        "relative w-full overflow-auto h-full max-h-dvh max-w-full bg-white",
+        components?.containerProps?.className
+      ),
+      onScroll: (e2) => fetchMoreOnScrollReached(e2.currentTarget),
+      children: [
+        isInitialLoading ? /* @__PURE__ */ jsx(Fragment, { children: renderContentSlot(statusContent?.initialLoading || { content: "Loading..." }, {
+          className: "flex flex-col h-full items-center justify-center text-sm py-4"
+        }) }) : isTableEmpty ? /* @__PURE__ */ jsx(Fragment, { children: renderContentSlot(statusContent?.emptyData || { content: "There's nothing here yet." }, {
+          className: "flex flex-col h-full items-center justify-center text-sm py-4"
+        }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Table, { ...components?.tableProps, children: [
+            /* @__PURE__ */ jsxs(
+              TableHeader,
+              {
+                className: cn("sticky top-0 z-10", components?.tableHeaderProps?.className),
+                ...components?.tableHeaderProps,
+                children: [
+                  table.getHeaderGroups().map((headerGroup) => {
+                    return /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+                      const { classes, style } = getColumnPinningStyles(header.column);
+                      const useColumnSizing = header.column.columnDef?.meta?.useColumnSizing ?? columnResizing?.enabled ?? false;
+                      return /* @__PURE__ */ jsxs(
+                        TableHead,
+                        {
+                          colSpan: header.colSpan,
+                          ...header.column.columnDef?.meta?.headerProps,
+                          className: cn(classes, header.column.columnDef?.meta?.headerProps?.className),
+                          style: {
+                            ...style,
+                            width: useColumnSizing ? header.column.getSize() : void 0,
+                            minWidth: useColumnSizing ? header.column.columnDef.minSize : void 0,
+                            maxWidth: useColumnSizing ? header.column.columnDef.maxSize : void 0,
+                            ...header.column.columnDef?.meta?.headerProps?.style
+                          },
+                          children: [
+                            header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+                            /* @__PURE__ */ jsx(ColumnResizer_default, { header, ...components?.columnResizerProps })
+                          ]
+                        },
+                        header.id
+                      );
+                    }) }, headerGroup.id);
+                  }),
+                  isSomeColumnsFilterable && /* @__PURE__ */ jsx(TableRow, { children: filterableColumns.map((column) => {
+                    const { classes, style } = getColumnPinningStyles(column);
+                    const useColumnSizing = column.columnDef.meta?.useColumnSizing ?? columnResizing?.enabled ?? false;
+                    return /* @__PURE__ */ jsx(
+                      TableCell,
+                      {
+                        ...column.columnDef?.meta?.cellProps,
+                        className: cn(
+                          "bg-white border-b",
+                          classes,
+                          column.columnDef?.meta?.cellProps?.className
+                        ),
+                        style: {
+                          // TODO: should we separate styles for filter or use same columns styles
+                          ...style,
+                          width: useColumnSizing ? column.getSize() : void 0,
+                          minWidth: useColumnSizing ? column.columnDef.minSize : void 0,
+                          maxWidth: useColumnSizing ? column.columnDef.maxSize : void 0,
+                          ...column.columnDef?.meta?.cellProps?.style
+                        },
+                        children: column.getCanFilter() && column.columnDef.meta?.renderColumnFilter?.({
+                          column,
+                          table
+                        })
+                      },
+                      column.id
+                    );
+                  }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(TableBody, { ...components?.tableBodyProps, children: table.getRowModel().rows.map((row) => {
+              const tableDataRowProps = typeof components?.tableDataRowProps === "function" ? components.tableDataRowProps({ row, table }) || {} : components?.tableDataRowProps || {};
+              return /* @__PURE__ */ createElement(
+                TableRow,
+                {
+                  ...tableDataRowProps,
+                  key: row.id,
+                  className: cn("group", tableDataRowProps?.className),
+                  "data-state": row.getIsSelected() ? "selected" : "non-selected",
+                  onClick: (event) => {
+                    if (typeof onRowClick === "function") {
+                      onRowClick(row.original, { event, row, table });
+                    }
+                  }
+                },
+                row.getVisibleCells().map((cell) => {
+                  const { classes, style } = getColumnPinningStyles(cell.column);
+                  const useColumnSizing = cell.column.columnDef.meta?.useColumnSizing ?? columnResizing?.enabled ?? false;
+                  return /* @__PURE__ */ jsx(
+                    TableCell,
+                    {
+                      ...cell.column.columnDef?.meta?.cellProps,
+                      className: cn(
+                        {
+                          "bg-[#dfeae3]": row.getIsSelected(),
+                          "bg-white group-hover:bg-[#eff5f1]": !row.getIsSelected()
+                        },
+                        classes,
+                        cell.column.columnDef?.meta?.cellProps?.className
+                      ),
+                      style: {
+                        ...style,
+                        width: useColumnSizing ? cell.column.getSize() : void 0,
+                        minWidth: useColumnSizing ? cell.column.columnDef.minSize : void 0,
+                        maxWidth: useColumnSizing ? cell.column.columnDef.maxSize : void 0,
+                        ...cell.column.columnDef?.meta?.cellProps?.style
+                      },
+                      children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                    },
+                    cell.id
+                  );
+                })
+              );
+            }) })
+          ] }),
+          isTableEmptyAfterFiltering && /* @__PURE__ */ jsx(Fragment, { children: renderContentSlot(
+            statusContent?.emptyFilteredData || {
+              content: "No records found. Please try a different search."
+            },
+            {
+              className: "flex flex-col h-[calc(100%-76px)] items-center justify-center text-sm py-4"
+            }
+          ) }),
+          scrollFetch?.enabled && !isFiltering && !isInitialLoading && scrollFetch?.isFetchingMore && /* @__PURE__ */ jsx(Fragment, { children: renderContentSlot(statusContent?.fetchingMore || { content: "Loading more..." }, {
+            className: "flex items-center justify-center text-sm py-4"
+          }) }),
+          scrollFetch?.enabled && !isFiltering && !isInitialLoading && !scrollFetch?.hasMore && !scrollFetch?.isFetchingMore && /* @__PURE__ */ jsx(Fragment, { children: renderContentSlot(statusContent?.noMoreData || { content: null }, {
+            className: "flex items-center justify-center text-sm py-4"
+          }) })
+        ] }),
+        debug && /* @__PURE__ */ jsx(DataTableDevTool_default, { table })
+      ]
+    }
+  );
+};
+var DataTable_default = DataTable;
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-sus-primary-1 text-primary-foreground shadow-xs hover:bg-sus-primary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        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-white shadow-xs hover:bg-accent hover:text-accent-foreground 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"
+      },
+      size: {
+        default: "h-9 px-4  has-[>svg]:px-3",
+        option: "py-5 h-9 px-4  has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-5",
+        "icon-sm": "size-[22px]",
+        "icon-md": "size-7",
+        "icon-lg": "size-10"
+      },
+      active: {
+        true: "bg-sus-primary-1 text-white",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  active,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className, active })),
+      ...props
+    }
+  );
+}
+var s = (e2, s2, o3) => {
+  if (e2 && "reportValidity" in e2) {
+    const r2 = get(o3, s2);
+    e2.setCustomValidity(r2 && r2.message || ""), e2.reportValidity();
+  }
+};
+var o = (t3, e2) => {
+  for (const o3 in e2.fields) {
+    const r2 = e2.fields[o3];
+    r2 && r2.ref && "reportValidity" in r2.ref ? s(r2.ref, o3, t3) : r2.refs && r2.refs.forEach((e3) => s(e3, o3, t3));
+  }
+};
+var r = (s2, r2) => {
+  r2.shouldUseNativeValidation && o(s2, r2);
+  const f = {};
+  for (const o3 in s2) {
+    const n2 = get(r2.fields, o3), a = Object.assign(s2[o3] || {}, { ref: n2 && n2.ref });
+    if (i(r2.names || Object.keys(s2), o3)) {
+      const s3 = Object.assign({}, get(f, o3));
+      set(s3, "root", a), set(f, o3, s3);
+    } else set(f, o3, a);
+  }
+  return f;
+};
+var i = (t3, e2) => t3.some((t4) => t4.startsWith(e2 + "."));
+var n = function(r2, e2) {
+  for (var n2 = {}; r2.length; ) {
+    var t3 = r2[0], s2 = t3.code, i2 = t3.message, a = t3.path.join(".");
+    if (!n2[a]) if ("unionErrors" in t3) {
+      var u = t3.unionErrors[0].errors[0];
+      n2[a] = { message: u.message, type: u.code };
+    } else n2[a] = { message: i2, type: s2 };
+    if ("unionErrors" in t3 && t3.unionErrors.forEach(function(e3) {
+      return e3.errors.forEach(function(e4) {
+        return r2.push(e4);
+      });
+    }), e2) {
+      var c = n2[a].types, f = c && c[t3.code];
+      n2[a] = appendErrors(a, e2, n2, s2, f ? [].concat(f, t3.message) : t3.message);
+    }
+    r2.shift();
+  }
+  return n2;
+};
+var t2 = function(o3, t3, s2) {
+  return void 0 === s2 && (s2 = {}), function(i2, a, u) {
+    try {
+      return Promise.resolve(function(e2, n2) {
+        try {
+          var a2 = Promise.resolve(o3["sync" === s2.mode ? "parse" : "parseAsync"](i2, t3)).then(function(e3) {
+            return u.shouldUseNativeValidation && o({}, u), { errors: {}, values: s2.raw ? i2 : e3 };
+          });
+        } catch (r2) {
+          return n2(r2);
+        }
+        return a2 && a2.then ? a2.then(void 0, n2) : a2;
+      }(0, function(r2) {
+        if (function(r3) {
+          return Array.isArray(null == r3 ? void 0 : r3.errors);
+        }(r2)) return { values: {}, errors: r(n(r2.errors, !u.shouldUseNativeValidation && "all" === u.criteriaMode), u) };
+        throw r2;
+      }));
+    } catch (r2) {
+      return Promise.reject(r2);
+    }
+  };
+};
+var Form = FormProvider;
+var FormFieldContext2 = React3.createContext({});
+var FormField2 = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext2.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+var useFormField2 = () => {
+  const fieldContext = React3.useContext(FormFieldContext2);
+  const itemContext = React3.useContext(FormItemContext2);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+var FormItemContext2 = React3.createContext({});
+function FormItem2({ className, ...props }) {
+  const id = React3.useId();
+  return /* @__PURE__ */ jsx(FormItemContext2.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
+}
+function FormControl({ ...props }) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField2();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      "data-slot": "form-control",
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+}
+function FormMessage({ className, ...props }) {
+  const { error, formMessageId } = useFormField2();
+  const body = error ? String(error?.message ?? "") : props.children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "form-message",
+      id: formMessageId,
+      className: cn("text-destructive text-xs", className),
+      ...props,
+      children: body
+    }
+  );
+}
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-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 DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.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",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function Select({ ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({ ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]: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 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration, ...props });
+}
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  arrowClassName,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          TooltipPrimitive.Arrow,
+          {
+            className: cn(
+              "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",
+              arrowClassName
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+function SortableRow({
+  itemId,
+  index,
+  control,
+  availableColumns,
+  currentColumns,
+  disableDrag = false,
+  disableEdit = false,
+  hideFormMessage,
+  removeColumn
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: itemId,
+    disabled: disableDrag
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+  const options = availableColumns.map((col) => ({
+    id: col.id,
+    label: capitalize(col.id)
+  }));
+  return /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, className: "flex items-center rounded-md bg-white", children: /* @__PURE__ */ jsx(
+    FormField2,
+    {
+      control,
+      name: `columns.${index}.id`,
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem2, { className: "flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            GripVertical,
+            {
+              className: cn(
+                "h-5 w-5 text-[#B9B9B9] focus:outline-none cursor-grab",
+                index == 0 && "opacity-0 pointer-events-none"
+              ),
+              ...attributes,
+              ...listeners
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: field.value,
+              onValueChange: (val) => {
+                field.onChange(val);
+              },
+              disabled: disableEdit || index == 0,
+              children: [
+                /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+                  SelectTrigger,
+                  {
+                    className: cn(
+                      "w-full border-[#DDDDDD] data-[disabled]:opacity-100 aria-invalid:border-[#BB0B0E]",
+                      index == 0 ? "text-[#8B8B8B] bg-[#EAEAEA] cursor-not-allowed" : ""
+                    ),
+                    children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose column..." })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: options.filter((i2) => i2.id === field.value || !currentColumns?.some((c) => c.id === i2.id)).sort(
+                  (a, b) => a.id === field.value ? -1 : b.id === field.value ? 1 : 0
+                ).map((opt) => /* @__PURE__ */ jsx(
+                  SelectItem,
+                  {
+                    value: opt.id,
+                    className: cn(
+                      "focus:bg-[#e8edea]",
+                      opt.id === field.value ? "font-bold bg-[#dae5de] focus:bg-[#dae5de]" : ""
+                    ),
+                    children: opt.label
+                  },
+                  opt.id
+                )) })
+              ]
+            }
+          ),
+          index == 0 ? /* @__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,
+              {
+                align: "start",
+                alignOffset: 10,
+                className: "bg-[#8B8B8B] rounded-none",
+                arrowClassName: "!hidden",
+                children: /* @__PURE__ */ jsx("p", { children: "Column cannot be removed." })
+              }
+            )
+          ] }) }) : /* @__PURE__ */ jsx(
+            CircleMinus,
+            {
+              onClick: () => index > 0 && removeColumn(index),
+              className: "h-5 w-5 cursor-pointer",
+              stroke: "white",
+              fill: "#C32A2C"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(FormMessage, { className: cn("pl-6 text-[#BB0B0E]", hideFormMessage && "hidden") })
+      ] })
+    }
+  ) });
+}
+var buttonVariants2 = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-sus-primary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        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"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-5",
+        "icon-sm": "size-[22px]",
+        "icon-md": "size-7",
+        "icon-lg": "size-10"
+      },
+      active: {
+        true: "bg-sus-primary-1 text-white",
+        // <-- Active state style
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button2({
+  className,
+  variant,
+  size,
+  active,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants2({ variant, size, className, active })),
+      ...props
+    }
+  );
+}
+var ColumnSchema = z.object({
+  id: z.string().nonempty("This field is required")
+});
+var GridSettingsSchema = z.object({
+  columns: z.array(ColumnSchema).min(1, "At least one column is required")
+});
+var GridSettingsModal = ({
+  isOpen = false,
+  headerClassname,
+  descriptionClassname,
+  addButtonClassname,
+  saveButtonClassname,
+  availableColumns,
+  currentColumns,
+  limit = availableColumns.length,
+  onClose,
+  onSaveColumns
+}) => {
+  const [hideFormMessage, setHideFormMessage] = useState(false);
+  const form = useForm({
+    resolver: t2(GridSettingsSchema),
+    defaultValues: { columns: currentColumns },
+    mode: "onChange"
+  });
+  useEffect(() => {
+    if (isOpen) {
+      form.reset({ columns: currentColumns });
+    }
+  }, [isOpen, currentColumns, form]);
+  const columns = form.watch("columns");
+  const onSubmit = (data) => {
+    const ordering = data.columns.map((i2) => i2.id);
+    const visibility = Object.fromEntries(
+      availableColumns.map((col) => [col.id, data.columns.some((c) => c.id === col.id)])
+    );
+    const pinning = { left: [data.columns[0].id] };
+    if (onSaveColumns) {
+      onSaveColumns({ ordering, visibility, pinning });
+    }
+  };
+  const addColumn = async () => {
+    const isValid2 = await form.trigger("columns");
+    if (!isValid2) {
+      return;
+    }
+    form.setValue("columns", [...columns, { id: "" }], { shouldValidate: false });
+  };
+  const removeColumn = (index) => {
+    const newCols = [...columns];
+    newCols.splice(index, 1);
+    form.setValue("columns", newCols);
+  };
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = columns.findIndex((c) => c.id === active.id);
+    const newIndex = columns.findIndex((c) => c.id === over.id);
+    if (newIndex === 0) return;
+    const reordered = arrayMove(columns, oldIndex, newIndex);
+    form.setValue("columns", reordered, { shouldValidate: true });
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-xl p-0 border-0", showCloseButton: false, children: [
+    /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Close",
+        className: "absolute top-4 right-4",
+        style: {
+          background: "none",
+          border: "none",
+          padding: 0,
+          cursor: "pointer"
+        },
+        children: /* @__PURE__ */ jsx(X, { className: "w-6 h-6 text-white" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DialogHeader, { className: cn("bg-[#82B495] text-white h-25 rounded-t-lg", headerClassname), children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "text-2xl p-4", children: "Grid Settings" }),
+      /* @__PURE__ */ jsx(
+        DialogDescription,
+        {
+          className: cn("bg-[#8B8B8B] text-white px-4 py-2.5", descriptionClassname),
+          children: "Add or remove columns. To change the column order, drag and drop a field."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "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 overflow-y-auto pr-4", children: [
+        /* @__PURE__ */ jsx(
+          SortableRow,
+          {
+            itemId: columns[0]?.id,
+            index: 0,
+            control: form.control,
+            availableColumns,
+            currentColumns: columns,
+            disableDrag: true,
+            disableEdit: true,
+            removeColumn
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DndContext,
+          {
+            sensors,
+            collisionDetection: closestCenter,
+            onDragStart: () => setHideFormMessage(true),
+            onDragEnd: (event) => {
+              setHideFormMessage(false);
+              handleDragEnd(event);
+            },
+            children: /* @__PURE__ */ jsx(
+              SortableContext,
+              {
+                items: columns?.slice(1).map((c) => c.id),
+                strategy: verticalListSortingStrategy,
+                children: columns?.slice(1).map((item, index) => /* @__PURE__ */ jsx(
+                  SortableRow,
+                  {
+                    itemId: item.id,
+                    index: index + 1,
+                    control: form.control,
+                    availableColumns,
+                    currentColumns: columns,
+                    hideFormMessage,
+                    removeColumn
+                  },
+                  item.id + index
+                ))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "px-6", children: /* @__PURE__ */ jsxs(
+          Button2,
+          {
+            type: "button",
+            className: cn("bg-[#41875C99] text-white w-full rounded-t-lg", addButtonClassname),
+            onClick: addColumn,
+            disabled: columns.length >= limit,
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-1" }),
+              " Add column"
+            ]
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsx(DialogFooter, { className: "w-full px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between w-full py-4 border-t-1 border-[#B9B9B9]", children: [
+        /* @__PURE__ */ jsx(
+          Button2,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: onClose,
+            className: "w-18 text-[#8B8B8B] border-[#B9B9B9]",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button2,
+          {
+            type: "submit",
+            className: cn("w-18 bg-[#379A2A] text-white", saveButtonClassname),
+            children: "Save"
+          }
+        )
+      ] }) })
+    ] }) })
+  ] }) }) });
+};
+var GridSettingsModal_default = GridSettingsModal;
+var InfoIcon = (props) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "26",
+      viewBox: "0 0 14 13",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "6.98438", cy: "6.63281", r: "6.25", fill: "white" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M5.98811 3.39501C5.98811 4.01786 6.44715 4.40642 6.99953 4.40642C7.5519 4.40642 7.98047 4.04833 7.98047 3.39501C7.98047 2.74168 7.5519 2.41406 6.99953 2.41406C6.44715 2.41406 5.98811 2.76073 5.98811 3.39501ZM6.13096 10.8521H7.86809V5.02928H6.13096V10.8521Z",
+            fill: "#231F20"
+          }
+        )
+      ]
+    }
+  );
+};
+var InfoIcon_default = React3__default.memo(InfoIcon);
+function TooltipProvider2({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipProvider2, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipArrow(props) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { ...props });
+}
+function TooltipContent2({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "relative bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md rounded-tl-none px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+var Navbar = ({
+  className,
+  title,
+  subTitle,
+  headImageURL = "",
+  headImageURLClassName,
+  tooltipTitle,
+  tooltipIcon,
+  tooltipdescription = [],
+  mainButtonText,
+  mainButtonClassName,
+  mainButtonDisable = false,
+  subButtonText,
+  subButtonClassName,
+  subButtonDisable = false,
+  onMainButtonClick,
+  onSubButtonClick,
+  searchButton
+}) => {
+  const { isMobile, isTablet, isDesktop } = useScreenSize_default();
+  const Icon3 = CircleHelp;
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: cn(
+        "py-5 px-8 w-full h-[5.3rem] bg-sus-primary-1 flex items-center justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+          headImageURL !== "" ? /* @__PURE__ */ jsx("img", { src: headImageURL, alt: "", className: cn("w-full h-full", headImageURLClassName) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            isValidElement(title) ? title : /* @__PURE__ */ jsx("h1", { className: "text-white text-4xl font-bold", children: title }),
+            isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsx("h1", { className: "text-white text-xl font-bold", children: subTitle })
+          ] }),
+          tooltipTitle && /* @__PURE__ */ jsxs(Tooltip2, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "text-white hover:opacity-80 ", children: /* @__PURE__ */ jsx(InfoIcon_default, { className: "w-4" }) }) }),
+            /* @__PURE__ */ jsxs(
+              TooltipContent2,
+              {
+                forceMount: true,
+                side: isDesktop ? "right" : "bottom",
+                sideOffset: 8,
+                align: "start",
+                avoidCollisions: false,
+                className: cn(
+                  "bg-background text-foreground border border-black md:w-[350px] lg:w-[420px]",
+                  "transition-all duration-150 ease-out origin-top",
+                  "data-[state=closed]:opacity-0 data-[state=open]:opacity-100",
+                  "data-[state=closed]:scale-95 data-[state=open]:scale-100",
+                  { "mt-5": isDesktop }
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      role: "tooltip",
+                      "aria-label": tooltipTitle,
+                      className: cn("flex flex-col gap-4 max-w-sm text-sm text-gray-700", className),
+                      children: [
+                        tooltipTitle && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                          isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsx(Icon3, { size: 32, "aria-hidden": "true" }),
+                          /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold", children: tooltipTitle })
+                        ] }),
+                        isValidElement(tooltipdescription) ? tooltipdescription : ""
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(TooltipArrow, { className: "-my-px border-none fill-white", asChild: true, children: /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      width: isDesktop ? 35 : 33,
+                      height: 35,
+                      viewBox: "0 0 40 35",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      className: cn({
+                        "rotate-90 visible": isTablet || isMobile,
+                        "": isDesktop
+                      }),
+                      children: [
+                        /* @__PURE__ */ jsx("path", { d: "M0 0 L40 0 L0 35 Z", fill: "white" }),
+                        isDesktop ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx("line", { x1: "0", y1: "40", x2: "0", y2: "0", stroke: "black", strokeWidth: "2.5" }),
+                          /* @__PURE__ */ jsx("line", { x1: "40", y1: "0", x2: "0", y2: "35", stroke: "black", strokeWidth: "1" })
+                        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx("line", { x1: "40", y1: "0", x2: "0", y2: "0", stroke: "black", strokeWidth: "2" }),
+                          /* @__PURE__ */ jsx("line", { x1: "40", y1: "0", x2: "0", y2: "35", stroke: "black", strokeWidth: "1" })
+                        ] })
+                      ]
+                    }
+                  ) })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          mainButtonText && /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: mainButtonDisable,
+              className: cn("bg-sus-secondary-1 hover:bg-sus-secondary-hover", mainButtonClassName),
+              size: "lg",
+              onClick: onMainButtonClick,
+              children: mainButtonText
+            }
+          ),
+          subButtonText && /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: subButtonDisable,
+              className: cn("bg-sus-primary-2 hover:bg-sus-primary-2-hover", subButtonClassName),
+              size: "lg",
+              onClick: onSubButtonClick,
+              children: subButtonText
+            }
+          ),
+          isValidElement(searchButton) ? /* @__PURE__ */ jsx("div", { role: "separator", className: "ml-1 w-[1px] h-10 bg-white" }) : "",
+          isValidElement(searchButton) ? searchButton : ""
+        ] })
+      ]
+    }
+  );
+};
+var navbar_default = React3__default.memo(Navbar);
+var ExpandCollapse = ({ title, children, portalId }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const Panel = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx3(
+        "overflow-hidden transition-all duration-500 ease-in-out bg-white border-b shadow-md w-full",
+        isOpen ? "max-h-[700px] opacity-100" : "max-h-0 opacity-0"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "relative p-6", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsOpen(false),
+            className: "absolute top-2 right-2 text-gray-500 hover:text-gray-700",
+            children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" })
+          }
+        ),
+        children
+      ] })
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        className: "px-4 py-2 text-sm text-gray-700 hover:text-black",
+        children: title
+      }
+    ),
+    portalId && typeof document !== "undefined" ? document.getElementById(portalId) ? createPortal(Panel, document.getElementById(portalId)) : null : Panel
+  ] });
+};
+var ExpandCollapse_default = ExpandCollapse;
+
+// src/components/advanceSearch/operatorMap.ts
+var OPERATOR_MAP = {
+  text: [
+    "contains",
+    "equals",
+    "beginsWith",
+    "endsWith",
+    "notEquals",
+    "notBeginsWith",
+    "notEndsWith",
+    "notContains"
+  ],
+  number: ["equals", "notEquals", "gt", "gte", "lt", "lte"],
+  date: ["on", "after", "before", "between"],
+  datetime: ["on", "after", "before", "between"],
+  checkbox: ["is", "isNot"],
+  dropdown: ["is", "isNot"],
+  lookup: ["containsAny", "containsOnly", "containsAll", "notContains"]
+};
+
+// src/components/advanceSearch/hooks/useAdvanceSearch.ts
+function findField(fields, name) {
+  return fields.find((f) => f.name === name);
+}
+function getFieldType(fields, name) {
+  return findField(fields, name)?.type ?? "text";
+}
+function firstOperatorFor(fields, fieldName) {
+  const t3 = getFieldType(fields, fieldName);
+  return OPERATOR_MAP[t3][0];
+}
+function makeNewRow(fields) {
+  const first = fields[0];
+  const op = OPERATOR_MAP[first.type][0];
+  if (op === "between") {
+    return {
+      id: crypto.randomUUID(),
+      fieldName: first.name,
+      operator: "between",
+      value: "",
+      value2: ""
+    };
+  }
+  return { id: crypto.randomUUID(), fieldName: first.name, operator: op, value: "" };
+}
+function useAdvanceSearch({ fields, limitRows }) {
+  const [rows, setRows] = useState([makeNewRow(fields)]);
+  const updateRows = useCallback((next) => {
+    setRows(next);
+  }, []);
+  const operatorsForField = useCallback(
+    (fieldName) => {
+      const t3 = getFieldType(fields, fieldName);
+      return OPERATOR_MAP[t3];
+    },
+    [fields]
+  );
+  const addRow = useCallback(() => {
+    if (!limitRows || rows.length < limitRows) {
+      updateRows([...rows, makeNewRow(fields)]);
+    }
+  }, [rows, fields, updateRows, limitRows]);
+  const removeRow = useCallback(
+    (id) => {
+      if (rows.length === 1) return;
+      updateRows(rows.filter((r2) => r2.id !== id));
+    },
+    [rows, updateRows]
+  );
+  const clearRow = useCallback(
+    (id) => {
+      updateRows(
+        rows.map((r2) => {
+          if (r2.id !== id) return r2;
+          const nextOp = firstOperatorFor(fields, r2.fieldName);
+          return nextOp === "between" ? { id: r2.id, fieldName: r2.fieldName, operator: "between", value: "", value2: "" } : { id: r2.id, fieldName: r2.fieldName, operator: nextOp, value: "" };
+        })
+      );
+    },
+    [rows, fields, updateRows]
+  );
+  const clearAllRow = useCallback(() => {
+    updateRows([makeNewRow(fields)]);
+  }, [fields, updateRows]);
+  const changeField = useCallback(
+    (id, fieldName) => {
+      const nextOp = firstOperatorFor(fields, fieldName);
+      updateRows(
+        rows.map((r2) => {
+          if (r2.id !== id) return r2;
+          return nextOp === "between" ? { id: r2.id, fieldName, operator: "between", value: "", value2: "" } : { id: r2.id, fieldName, operator: nextOp, value: "" };
+        })
+      );
+    },
+    [rows, fields, updateRows]
+  );
+  const changeOperator = useCallback(
+    (id, operator) => {
+      updateRows(
+        rows.map((r2) => {
+          if (r2.id !== id) return r2;
+          if (operator === "between") {
+            return { id: r2.id, fieldName: r2.fieldName, operator, value: "", value2: "" };
+          }
+          return { id: r2.id, fieldName: r2.fieldName, operator, value: "" };
+        })
+      );
+    },
+    [rows, updateRows]
+  );
+  const changeValue = useCallback(
+    (id, which, val) => {
+      updateRows(
+        rows.map((r2) => {
+          if (r2.id !== id) return r2;
+          if (which === "value2" && r2.operator !== "between") return r2;
+          return { ...r2, [which]: val };
+        })
+      );
+    },
+    [rows, updateRows]
+  );
+  const fieldOptions = useMemo(
+    () => fields.map((f) => ({
+      value: f.name,
+      label: f.label ?? f.name
+    })),
+    [fields]
+  );
+  const rowToFilter = (row) => {
+    switch (row.operator) {
+      case "between":
+        return {
+          [row.fieldName]: {
+            gte: row.value,
+            lte: row.value2
+          }
+        };
+      case "contains":
+        return { [row.fieldName]: { contains: row.value } };
+      case "beginsWith":
+        return { [row.fieldName]: { startsWith: row.value } };
+      case "endsWith":
+        return { [row.fieldName]: { endsWith: row.value } };
+      case "notEquals":
+        return { [row.fieldName]: { not: row.value } };
+      case "gt":
+        return { [row.fieldName]: { gt: row.value } };
+      case "gte":
+        return { [row.fieldName]: { gte: row.value } };
+      case "lt":
+        return { [row.fieldName]: { lt: row.value } };
+      case "lte":
+        return { [row.fieldName]: { lte: row.value } };
+      case "is":
+        return { [row.fieldName]: row.value };
+      case "isNot":
+        return { [row.fieldName]: { not: row.value } };
+      case "notContains":
+        return { [row.fieldName]: { not: { contains: row.value } } };
+      case "notBeginsWith":
+        return { [row.fieldName]: { not: { startsWith: row.value } } };
+      case "notEndsWith":
+        return { [row.fieldName]: { not: { endsWith: row.value } } };
+      case "containsAny":
+        return { [row.fieldName]: { hasSome: row.value.split(",") } };
+      case "containsAll":
+        return { [row.fieldName]: { hasEvery: row.value.split(",") } };
+      case "containsOnly":
+        return { [row.fieldName]: { equals: row.value.split(",") } };
+      default:
+        return { [row.fieldName]: row.value };
+    }
+  };
+  const buildParam = useMemo(() => {
+    const andConditions = rows.map((r2) => r2.value ? rowToFilter(r2) : null).filter(Boolean);
+    return { AND: andConditions };
+  }, [rows]);
+  return {
+    rows,
+    addRow,
+    removeRow,
+    clearRow,
+    clearAllRow,
+    changeField,
+    changeOperator,
+    changeValue,
+    operatorsForField,
+    fieldOptions,
+    param: buildParam
+  };
+}
+
+// src/components/advanceSearch/types.ts
+var OPERATOR_LABEL = {
+  contains: "Contains",
+  equals: "Equals",
+  beginsWith: "Begins with",
+  endsWith: "Ends with",
+  notEquals: "Not equals",
+  notBeginsWith: "Not begins with",
+  notEndsWith: "Not ends with",
+  notContains: "Not contains",
+  gt: "Greater than",
+  gte: "Greater or equal",
+  lt: "Less than",
+  lte: "Less or equal",
+  on: "On",
+  after: "After",
+  before: "Before",
+  between: "Between",
+  is: "Is",
+  isNot: "Is not",
+  containsAny: "Contains at least one of",
+  containsOnly: "Contains only",
+  containsAll: "Contains all of"
+};
+function Select2({ ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectValue2({ ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger2({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn2(
+        "border-input data-[placeholder]:text-gray-00 [&_svg:not([class*='text-'])]: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:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(Triangle, { className: "size-2 opacity-60 fill-current", style: { transform: "rotate(180deg)" } }) })
+      ]
+    }
+  );
+}
+function SelectContent2({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      className: cn2(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton2, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            className: cn2(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton2, {})
+      ]
+    }
+  ) });
+}
+function SelectItem2({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn2(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-2" }) }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn2("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(Triangle, { className: "size-2 fill-current", style: { transform: "rotate(0deg)" } })
+    }
+  );
+}
+function SelectScrollDownButton2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn2("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(Triangle, { className: "size-2 fill-current", style: { transform: "rotate(180deg)" } })
+    }
+  );
+}
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn2(
+        "file:text-foreground placeholder:text-gray-400 selection:bg-primary selection:text-primary-foreground  border-input flex h-9 w-full min-w-0 rounded-md border bg-white px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      align,
+      sideOffset,
+      className: cn2(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) border p-4 shadow-md outline-hidden",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+var buttonVariants3 = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-sus-primary-1 text-primary-foreground shadow-xs hover:bg-sus-primary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground  dark:border-input dark:hover:bg-input/50",
+        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-white shadow-xs hover:bg-accent hover:text-accent-foreground  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:border-input dark:hover:bg-input/50"
+      },
+      size: {
+        default: "h-9 px-4  has-[>svg]:px-3",
+        option: "py-5 h-9 px-4  has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-5",
+        "icon-sm": "size-[22px]",
+        "icon-md": "size-7",
+        "icon-lg": "size-10"
+      },
+      active: {
+        true: "bg-sus-primary-1 text-white",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button3({
+  className,
+  variant,
+  size,
+  active,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn2(buttonVariants3({ variant, size, className, active })),
+      ...props
+    }
+  );
+}
+var ClearButton = ({
+  onClick,
+  title = "Clear",
+  ariaLabel = "Clear row",
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "button",
+      onClick,
+      className: `clear-button ${className}`,
+      "aria-label": ariaLabel,
+      title,
+      children: /* @__PURE__ */ jsx(X, { className: "icon" })
+    }
+  );
+};
+var isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var startOfDay = (d) => {
+  const x = new Date(d);
+  x.setHours(0, 0, 0, 0);
+  return x;
+};
+var clampToDay = (d) => d ? startOfDay(d) : void 0;
+var addMonths = (date, n2) => {
+  const d = new Date(date);
+  d.setMonth(d.getMonth() + n2);
+  return d;
+};
+var daysInMonth = (year, monthIndex) => new Date(year, monthIndex + 1, 0).getDate();
+function buildCalendarGrid(displayed, weekStartsOnMonday = true) {
+  const year = displayed.getFullYear();
+  const month = displayed.getMonth();
+  const firstOfMonth = new Date(year, month, 1);
+  const firstWeekday = firstOfMonth.getDay();
+  const offset = weekStartsOnMonday ? firstWeekday === 0 ? 6 : firstWeekday - 1 : firstWeekday;
+  const totalDays = daysInMonth(year, month);
+  const prevMonth = addMonths(firstOfMonth, -1);
+  const prevMonthDays = daysInMonth(prevMonth.getFullYear(), prevMonth.getMonth());
+  const grid = [];
+  for (let i2 = offset - 1; i2 >= 0; i2--) {
+    const d = new Date(prevMonth.getFullYear(), prevMonth.getMonth(), prevMonthDays - i2);
+    grid.push({ date: d, inCurrentMonth: false });
+  }
+  for (let d = 1; d <= totalDays; d++) {
+    grid.push({ date: new Date(year, month, d), inCurrentMonth: true });
+  }
+  while (grid.length < 42) {
+    const last = grid[grid.length - 1].date;
+    const next = new Date(last);
+    next.setDate(last.getDate() + 1);
+    grid.push({ date: next, inCurrentMonth: false });
+  }
+  const rows = [];
+  for (let r2 = 0; r2 < 6; r2++) rows.push(grid.slice(r2 * 7, r2 * 7 + 7));
+  return rows;
+}
+function DatePicker({
+  selectedDate,
+  onDateSelect,
+  callbacks,
+  onMonthBackward,
+  onMonthForward,
+  variant,
+  minDate,
+  maxDate,
+  disabledDates,
+  className,
+  ...props
+}) {
+  const today = React3.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [displayed, setDisplayed] = React3.useState(
+    selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date()
+  );
+  minDate = clampToDay(minDate);
+  maxDate = clampToDay(maxDate);
+  const disabledSet = React3.useMemo(() => {
+    const s2 = /* @__PURE__ */ new Set();
+    disabledDates?.forEach((d) => s2.add(startOfDay(d).toISOString()));
+    return s2;
+  }, [disabledDates]);
+  const displayYear = displayed.getFullYear();
+  const displayMonth = displayed.getMonth();
+  const monthLabel = callbacks?.monthLabel?.(displayYear, displayMonth) ?? new Intl.DateTimeFormat(void 0, { month: "short" }).format(displayed);
+  const yearLabel = callbacks?.yearLabel?.(displayYear) ?? String(displayYear);
+  const weekdays = React3.useMemo(() => {
+    const labels = [];
+    for (let i2 = 0; i2 < 7; i2++) {
+      const idx = i2;
+      const fallback = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"][idx];
+      labels.push(callbacks?.weekdayLabel?.(idx) ?? fallback);
+    }
+    return labels;
+  }, [callbacks]);
+  const grid = React3.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
+  const isDateDisabled = (date) => {
+    const d = startOfDay(date);
+    if (minDate && d < minDate) return true;
+    if (maxDate && d > maxDate) return true;
+    if (disabledSet.has(d.toISOString())) return true;
+    return false;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn2("min-w-[260px] w-[300px] p-3", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            setDisplayed(addMonths(displayed, -1));
+            onMonthBackward?.();
+          },
+          className: cn2(
+            buttonVariants3({ variant: variant?.chevrons ?? "outline" }),
+            "inline-flex h-8 w-8 items-center justify-center p-0"
+          ),
+          "aria-label": "Previous month",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 opacity-70" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium select-none", children: [
+        monthLabel,
+        " ",
+        yearLabel
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            setDisplayed(addMonths(displayed, 1));
+            onMonthForward?.();
+          },
+          className: cn2(
+            buttonVariants3({ variant: variant?.chevrons ?? "outline" }),
+            "inline-flex h-8 w-8 items-center justify-center p-0"
+          ),
+          "aria-label": "Next month",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-70" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 text-[11px] text-muted-foreground mb-1", children: weekdays.map((w, i2) => /* @__PURE__ */ jsx("div", { className: "text-center py-1", children: w }, i2)) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1", children: grid.map(
+      (row, r2) => row.map(({ date, inCurrentMonth }, c) => {
+        const selected = selectedDate && isSameDay(date, selectedDate);
+        const isToday = isSameDay(date, today);
+        const disabled = isDateDisabled(date);
+        let variantName = variant?.day?.main ?? "ghost";
+        if (!inCurrentMonth) variantName = variant?.day?.outside ?? "ghost";
+        if (isToday && !selected) variantName = variant?.day?.today ?? variantName;
+        if (selected) variantName = variant?.day?.selected ?? "default";
+        const label = callbacks?.dayLabel?.(date) ?? date.getDate();
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => !disabled && onDateSelect?.(date),
+            disabled: disabled || !inCurrentMonth,
+            className: cn2(
+              buttonVariants3({ variant: variantName }),
+              "h-9 w-full p-0 text-sm font-normal",
+              !inCurrentMonth && "opacity-50",
+              selected && "aria-selected:opacity-100"
+            ),
+            "aria-selected": selected,
+            "aria-label": date.toDateString(),
+            children: label
+          },
+          `${r2}-${c}`
+        );
+      })
+    ) })
+  ] });
+}
+var TagsInput = ({ value = [], onChange, onClear, error }) => {
+  const [inputValue, setInputValue] = useState("");
+  const addTag = (val) => {
+    const trimmed = val.trim();
+    if (!trimmed) return;
+    if (value.includes(trimmed)) return;
+    onChange([...value, trimmed]);
+    setInputValue("");
+  };
+  const removeTag = (index) => {
+    const newTags = value.filter((_, i2) => i2 !== index);
+    onChange(newTags);
+  };
+  const handleKeyDown = (e2) => {
+    if (e2.key === "Enter" || e2.key === ",") {
+      e2.preventDefault();
+      addTag(inputValue);
+    }
+    if (e2.key === "Backspace" && !inputValue) {
+      removeTag(value.length - 1);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex items-center border rounded-md px-2 py-1 w-full min-h-[36px] focus-within:ring-2 
+      ${error ? "border-red-500 focus-within:ring-red-500" : "border-gray-300 focus-within:ring-sus-green-1"}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 flex-1 items-center", children: [
+          value.map((tag, i2) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "flex items-center gap-1 border border-[#41875C] bg-[#f7fcf9] px-2 py-0.5 rounded-2xl text-sm text-black",
+              children: [
+                /* @__PURE__ */ jsx(Tag, { className: "w-3 h-3 transform scale-x-[-1]" }),
+                tag,
+                /* @__PURE__ */ jsx("button", { type: "button", onClick: () => removeTag(i2), className: "hover:text-red-500", children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" }) })
+              ]
+            },
+            i2
+          )),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: inputValue,
+              onChange: (e2) => setInputValue(e2.target.value),
+              onKeyDown: handleKeyDown,
+              className: "flex-1 border-none outline-none text-sm text-gray-400 placeholder:text-gray-400 border-1"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Search, { className: "w-4 h-4 text-gray-400 mx-2" }),
+        /* @__PURE__ */ jsx("span", { className: "right-2", children: /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }) })
+      ]
+    }
+  );
+};
+var millisecondsInWeek = 6048e5;
+var millisecondsInDay = 864e5;
+var millisecondsInMinute = 6e4;
+var millisecondsInHour = 36e5;
+var constructFromSymbol = Symbol.for("constructDateFrom");
+
+// node_modules/date-fns/constructFrom.js
+function constructFrom(date, value) {
+  if (typeof date === "function") return date(value);
+  if (date && typeof date === "object" && constructFromSymbol in date)
+    return date[constructFromSymbol](value);
+  if (date instanceof Date) return new date.constructor(value);
+  return new Date(value);
+}
+
+// node_modules/date-fns/toDate.js
+function toDate(argument, context) {
+  return constructFrom(context || argument, argument);
+}
+
+// node_modules/date-fns/_lib/defaultOptions.js
+var defaultOptions = {};
+function getDefaultOptions() {
+  return defaultOptions;
+}
+
+// node_modules/date-fns/startOfWeek.js
+function startOfWeek(date, options) {
+  const defaultOptions2 = getDefaultOptions();
+  const weekStartsOn = options?.weekStartsOn ?? options?.locale?.options?.weekStartsOn ?? defaultOptions2.weekStartsOn ?? defaultOptions2.locale?.options?.weekStartsOn ?? 0;
+  const _date = toDate(date, options?.in);
+  const day = _date.getDay();
+  const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
+  _date.setDate(_date.getDate() - diff);
+  _date.setHours(0, 0, 0, 0);
+  return _date;
+}
+
+// node_modules/date-fns/startOfISOWeek.js
+function startOfISOWeek(date, options) {
+  return startOfWeek(date, { ...options, weekStartsOn: 1 });
+}
+
+// node_modules/date-fns/getISOWeekYear.js
+function getISOWeekYear(date, options) {
+  const _date = toDate(date, options?.in);
+  const year = _date.getFullYear();
+  const fourthOfJanuaryOfNextYear = constructFrom(_date, 0);
+  fourthOfJanuaryOfNextYear.setFullYear(year + 1, 0, 4);
+  fourthOfJanuaryOfNextYear.setHours(0, 0, 0, 0);
+  const startOfNextYear = startOfISOWeek(fourthOfJanuaryOfNextYear);
+  const fourthOfJanuaryOfThisYear = constructFrom(_date, 0);
+  fourthOfJanuaryOfThisYear.setFullYear(year, 0, 4);
+  fourthOfJanuaryOfThisYear.setHours(0, 0, 0, 0);
+  const startOfThisYear = startOfISOWeek(fourthOfJanuaryOfThisYear);
+  if (_date.getTime() >= startOfNextYear.getTime()) {
+    return year + 1;
+  } else if (_date.getTime() >= startOfThisYear.getTime()) {
+    return year;
+  } else {
+    return year - 1;
+  }
+}
+
+// node_modules/date-fns/_lib/getTimezoneOffsetInMilliseconds.js
+function getTimezoneOffsetInMilliseconds(date) {
+  const _date = toDate(date);
+  const utcDate = new Date(
+    Date.UTC(
+      _date.getFullYear(),
+      _date.getMonth(),
+      _date.getDate(),
+      _date.getHours(),
+      _date.getMinutes(),
+      _date.getSeconds(),
+      _date.getMilliseconds()
+    )
+  );
+  utcDate.setUTCFullYear(_date.getFullYear());
+  return +date - +utcDate;
+}
+
+// node_modules/date-fns/_lib/normalizeDates.js
+function normalizeDates(context, ...dates) {
+  const normalize = constructFrom.bind(
+    null,
+    dates.find((date) => typeof date === "object")
+  );
+  return dates.map(normalize);
+}
+
+// node_modules/date-fns/startOfDay.js
+function startOfDay2(date, options) {
+  const _date = toDate(date, options?.in);
+  _date.setHours(0, 0, 0, 0);
+  return _date;
+}
+
+// node_modules/date-fns/differenceInCalendarDays.js
+function differenceInCalendarDays(laterDate, earlierDate, options) {
+  const [laterDate_, earlierDate_] = normalizeDates(
+    options?.in,
+    laterDate,
+    earlierDate
+  );
+  const laterStartOfDay = startOfDay2(laterDate_);
+  const earlierStartOfDay = startOfDay2(earlierDate_);
+  const laterTimestamp = +laterStartOfDay - getTimezoneOffsetInMilliseconds(laterStartOfDay);
+  const earlierTimestamp = +earlierStartOfDay - getTimezoneOffsetInMilliseconds(earlierStartOfDay);
+  return Math.round((laterTimestamp - earlierTimestamp) / millisecondsInDay);
+}
+
+// node_modules/date-fns/startOfISOWeekYear.js
+function startOfISOWeekYear(date, options) {
+  const year = getISOWeekYear(date, options);
+  const fourthOfJanuary = constructFrom(date, 0);
+  fourthOfJanuary.setFullYear(year, 0, 4);
+  fourthOfJanuary.setHours(0, 0, 0, 0);
+  return startOfISOWeek(fourthOfJanuary);
+}
+
+// node_modules/date-fns/isDate.js
+function isDate(value) {
+  return value instanceof Date || typeof value === "object" && Object.prototype.toString.call(value) === "[object Date]";
+}
+
+// node_modules/date-fns/isValid.js
+function isValid(date) {
+  return !(!isDate(date) && typeof date !== "number" || isNaN(+toDate(date)));
+}
+
+// node_modules/date-fns/startOfYear.js
+function startOfYear(date, options) {
+  const date_ = toDate(date, options?.in);
+  date_.setFullYear(date_.getFullYear(), 0, 1);
+  date_.setHours(0, 0, 0, 0);
+  return date_;
+}
+
+// node_modules/date-fns/locale/en-US/_lib/formatDistance.js
+var formatDistanceLocale = {
+  lessThanXSeconds: {
+    one: "less than a second",
+    other: "less than {{count}} seconds"
+  },
+  xSeconds: {
+    one: "1 second",
+    other: "{{count}} seconds"
+  },
+  halfAMinute: "half a minute",
+  lessThanXMinutes: {
+    one: "less than a minute",
+    other: "less than {{count}} minutes"
+  },
+  xMinutes: {
+    one: "1 minute",
+    other: "{{count}} minutes"
+  },
+  aboutXHours: {
+    one: "about 1 hour",
+    other: "about {{count}} hours"
+  },
+  xHours: {
+    one: "1 hour",
+    other: "{{count}} hours"
+  },
+  xDays: {
+    one: "1 day",
+    other: "{{count}} days"
+  },
+  aboutXWeeks: {
+    one: "about 1 week",
+    other: "about {{count}} weeks"
+  },
+  xWeeks: {
+    one: "1 week",
+    other: "{{count}} weeks"
+  },
+  aboutXMonths: {
+    one: "about 1 month",
+    other: "about {{count}} months"
+  },
+  xMonths: {
+    one: "1 month",
+    other: "{{count}} months"
+  },
+  aboutXYears: {
+    one: "about 1 year",
+    other: "about {{count}} years"
+  },
+  xYears: {
+    one: "1 year",
+    other: "{{count}} years"
+  },
+  overXYears: {
+    one: "over 1 year",
+    other: "over {{count}} years"
+  },
+  almostXYears: {
+    one: "almost 1 year",
+    other: "almost {{count}} years"
+  }
+};
+var formatDistance = (token, count, options) => {
+  let result;
+  const tokenValue = formatDistanceLocale[token];
+  if (typeof tokenValue === "string") {
+    result = tokenValue;
+  } else if (count === 1) {
+    result = tokenValue.one;
+  } else {
+    result = tokenValue.other.replace("{{count}}", count.toString());
+  }
+  if (options?.addSuffix) {
+    if (options.comparison && options.comparison > 0) {
+      return "in " + result;
+    } else {
+      return result + " ago";
+    }
+  }
+  return result;
+};
+
+// node_modules/date-fns/locale/_lib/buildFormatLongFn.js
+function buildFormatLongFn(args) {
+  return (options = {}) => {
+    const width = options.width ? String(options.width) : args.defaultWidth;
+    const format2 = args.formats[width] || args.formats[args.defaultWidth];
+    return format2;
+  };
+}
+
+// node_modules/date-fns/locale/en-US/_lib/formatLong.js
+var dateFormats = {
+  full: "EEEE, MMMM do, y",
+  long: "MMMM do, y",
+  medium: "MMM d, y",
+  short: "MM/dd/yyyy"
+};
+var timeFormats = {
+  full: "h:mm:ss a zzzz",
+  long: "h:mm:ss a z",
+  medium: "h:mm:ss a",
+  short: "h:mm a"
+};
+var dateTimeFormats = {
+  full: "{{date}} 'at' {{time}}",
+  long: "{{date}} 'at' {{time}}",
+  medium: "{{date}}, {{time}}",
+  short: "{{date}}, {{time}}"
+};
+var formatLong = {
+  date: buildFormatLongFn({
+    formats: dateFormats,
+    defaultWidth: "full"
+  }),
+  time: buildFormatLongFn({
+    formats: timeFormats,
+    defaultWidth: "full"
+  }),
+  dateTime: buildFormatLongFn({
+    formats: dateTimeFormats,
+    defaultWidth: "full"
+  })
+};
+
+// node_modules/date-fns/locale/en-US/_lib/formatRelative.js
+var formatRelativeLocale = {
+  lastWeek: "'last' eeee 'at' p",
+  yesterday: "'yesterday at' p",
+  today: "'today at' p",
+  tomorrow: "'tomorrow at' p",
+  nextWeek: "eeee 'at' p",
+  other: "P"
+};
+var formatRelative = (token, _date, _baseDate, _options) => formatRelativeLocale[token];
+
+// node_modules/date-fns/locale/_lib/buildLocalizeFn.js
+function buildLocalizeFn(args) {
+  return (value, options) => {
+    const context = options?.context ? String(options.context) : "standalone";
+    let valuesArray;
+    if (context === "formatting" && args.formattingValues) {
+      const defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
+      const width = options?.width ? String(options.width) : defaultWidth;
+      valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
+    } else {
+      const defaultWidth = args.defaultWidth;
+      const width = options?.width ? String(options.width) : args.defaultWidth;
+      valuesArray = args.values[width] || args.values[defaultWidth];
+    }
+    const index = args.argumentCallback ? args.argumentCallback(value) : value;
+    return valuesArray[index];
+  };
+}
+
+// node_modules/date-fns/locale/en-US/_lib/localize.js
+var eraValues = {
+  narrow: ["B", "A"],
+  abbreviated: ["BC", "AD"],
+  wide: ["Before Christ", "Anno Domini"]
+};
+var quarterValues = {
+  narrow: ["1", "2", "3", "4"],
+  abbreviated: ["Q1", "Q2", "Q3", "Q4"],
+  wide: ["1st quarter", "2nd quarter", "3rd quarter", "4th quarter"]
+};
+var monthValues = {
+  narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
+  abbreviated: [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+  ],
+  wide: [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ]
+};
+var dayValues = {
+  narrow: ["S", "M", "T", "W", "T", "F", "S"],
+  short: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+  abbreviated: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+  wide: [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday"
+  ]
+};
+var dayPeriodValues = {
+  narrow: {
+    am: "a",
+    pm: "p",
+    midnight: "mi",
+    noon: "n",
+    morning: "morning",
+    afternoon: "afternoon",
+    evening: "evening",
+    night: "night"
+  },
+  abbreviated: {
+    am: "AM",
+    pm: "PM",
+    midnight: "midnight",
+    noon: "noon",
+    morning: "morning",
+    afternoon: "afternoon",
+    evening: "evening",
+    night: "night"
+  },
+  wide: {
+    am: "a.m.",
+    pm: "p.m.",
+    midnight: "midnight",
+    noon: "noon",
+    morning: "morning",
+    afternoon: "afternoon",
+    evening: "evening",
+    night: "night"
+  }
+};
+var formattingDayPeriodValues = {
+  narrow: {
+    am: "a",
+    pm: "p",
+    midnight: "mi",
+    noon: "n",
+    morning: "in the morning",
+    afternoon: "in the afternoon",
+    evening: "in the evening",
+    night: "at night"
+  },
+  abbreviated: {
+    am: "AM",
+    pm: "PM",
+    midnight: "midnight",
+    noon: "noon",
+    morning: "in the morning",
+    afternoon: "in the afternoon",
+    evening: "in the evening",
+    night: "at night"
+  },
+  wide: {
+    am: "a.m.",
+    pm: "p.m.",
+    midnight: "midnight",
+    noon: "noon",
+    morning: "in the morning",
+    afternoon: "in the afternoon",
+    evening: "in the evening",
+    night: "at night"
+  }
+};
+var ordinalNumber = (dirtyNumber, _options) => {
+  const number = Number(dirtyNumber);
+  const rem100 = number % 100;
+  if (rem100 > 20 || rem100 < 10) {
+    switch (rem100 % 10) {
+      case 1:
+        return number + "st";
+      case 2:
+        return number + "nd";
+      case 3:
+        return number + "rd";
+    }
+  }
+  return number + "th";
+};
+var localize = {
+  ordinalNumber,
+  era: buildLocalizeFn({
+    values: eraValues,
+    defaultWidth: "wide"
+  }),
+  quarter: buildLocalizeFn({
+    values: quarterValues,
+    defaultWidth: "wide",
+    argumentCallback: (quarter) => quarter - 1
+  }),
+  month: buildLocalizeFn({
+    values: monthValues,
+    defaultWidth: "wide"
+  }),
+  day: buildLocalizeFn({
+    values: dayValues,
+    defaultWidth: "wide"
+  }),
+  dayPeriod: buildLocalizeFn({
+    values: dayPeriodValues,
+    defaultWidth: "wide",
+    formattingValues: formattingDayPeriodValues,
+    defaultFormattingWidth: "wide"
+  })
+};
+
+// node_modules/date-fns/locale/_lib/buildMatchFn.js
+function buildMatchFn(args) {
+  return (string, options = {}) => {
+    const width = options.width;
+    const matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
+    const matchResult = string.match(matchPattern);
+    if (!matchResult) {
+      return null;
+    }
+    const matchedString = matchResult[0];
+    const parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
+    const key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, (pattern) => pattern.test(matchedString)) : (
+      // [TODO] -- I challenge you to fix the type
+      findKey(parsePatterns, (pattern) => pattern.test(matchedString))
+    );
+    let value;
+    value = args.valueCallback ? args.valueCallback(key) : key;
+    value = options.valueCallback ? (
+      // [TODO] -- I challenge you to fix the type
+      options.valueCallback(value)
+    ) : value;
+    const rest = string.slice(matchedString.length);
+    return { value, rest };
+  };
+}
+function findKey(object, predicate) {
+  for (const key in object) {
+    if (Object.prototype.hasOwnProperty.call(object, key) && predicate(object[key])) {
+      return key;
+    }
+  }
+  return void 0;
+}
+function findIndex(array, predicate) {
+  for (let key = 0; key < array.length; key++) {
+    if (predicate(array[key])) {
+      return key;
+    }
+  }
+  return void 0;
+}
+
+// node_modules/date-fns/locale/_lib/buildMatchPatternFn.js
+function buildMatchPatternFn(args) {
+  return (string, options = {}) => {
+    const matchResult = string.match(args.matchPattern);
+    if (!matchResult) return null;
+    const matchedString = matchResult[0];
+    const parseResult = string.match(args.parsePattern);
+    if (!parseResult) return null;
+    let value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
+    value = options.valueCallback ? options.valueCallback(value) : value;
+    const rest = string.slice(matchedString.length);
+    return { value, rest };
+  };
+}
+
+// node_modules/date-fns/locale/en-US/_lib/match.js
+var matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i;
+var parseOrdinalNumberPattern = /\d+/i;
+var matchEraPatterns = {
+  narrow: /^(b|a)/i,
+  abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,
+  wide: /^(before christ|before common era|anno domini|common era)/i
+};
+var parseEraPatterns = {
+  any: [/^b/i, /^(a|c)/i]
+};
+var matchQuarterPatterns = {
+  narrow: /^[1234]/i,
+  abbreviated: /^q[1234]/i,
+  wide: /^[1234](th|st|nd|rd)? quarter/i
+};
+var parseQuarterPatterns = {
+  any: [/1/i, /2/i, /3/i, /4/i]
+};
+var matchMonthPatterns = {
+  narrow: /^[jfmasond]/i,
+  abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,
+  wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i
+};
+var parseMonthPatterns = {
+  narrow: [
+    /^j/i,
+    /^f/i,
+    /^m/i,
+    /^a/i,
+    /^m/i,
+    /^j/i,
+    /^j/i,
+    /^a/i,
+    /^s/i,
+    /^o/i,
+    /^n/i,
+    /^d/i
+  ],
+  any: [
+    /^ja/i,
+    /^f/i,
+    /^mar/i,
+    /^ap/i,
+    /^may/i,
+    /^jun/i,
+    /^jul/i,
+    /^au/i,
+    /^s/i,
+    /^o/i,
+    /^n/i,
+    /^d/i
+  ]
+};
+var matchDayPatterns = {
+  narrow: /^[smtwf]/i,
+  short: /^(su|mo|tu|we|th|fr|sa)/i,
+  abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i,
+  wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i
+};
+var parseDayPatterns = {
+  narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i],
+  any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i]
+};
+var matchDayPeriodPatterns = {
+  narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,
+  any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i
+};
+var parseDayPeriodPatterns = {
+  any: {
+    am: /^a/i,
+    pm: /^p/i,
+    midnight: /^mi/i,
+    noon: /^no/i,
+    morning: /morning/i,
+    afternoon: /afternoon/i,
+    evening: /evening/i,
+    night: /night/i
+  }
+};
+var match = {
+  ordinalNumber: buildMatchPatternFn({
+    matchPattern: matchOrdinalNumberPattern,
+    parsePattern: parseOrdinalNumberPattern,
+    valueCallback: (value) => parseInt(value, 10)
+  }),
+  era: buildMatchFn({
+    matchPatterns: matchEraPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseEraPatterns,
+    defaultParseWidth: "any"
+  }),
+  quarter: buildMatchFn({
+    matchPatterns: matchQuarterPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseQuarterPatterns,
+    defaultParseWidth: "any",
+    valueCallback: (index) => index + 1
+  }),
+  month: buildMatchFn({
+    matchPatterns: matchMonthPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseMonthPatterns,
+    defaultParseWidth: "any"
+  }),
+  day: buildMatchFn({
+    matchPatterns: matchDayPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseDayPatterns,
+    defaultParseWidth: "any"
+  }),
+  dayPeriod: buildMatchFn({
+    matchPatterns: matchDayPeriodPatterns,
+    defaultMatchWidth: "any",
+    parsePatterns: parseDayPeriodPatterns,
+    defaultParseWidth: "any"
+  })
+};
+
+// node_modules/date-fns/locale/en-US.js
+var enUS = {
+  code: "en-US",
+  formatDistance,
+  formatLong,
+  formatRelative,
+  localize,
+  match,
+  options: {
+    weekStartsOn: 0,
+    firstWeekContainsDate: 1
+  }
+};
+
+// node_modules/date-fns/getDayOfYear.js
+function getDayOfYear(date, options) {
+  const _date = toDate(date, options?.in);
+  const diff = differenceInCalendarDays(_date, startOfYear(_date));
+  const dayOfYear = diff + 1;
+  return dayOfYear;
+}
+
+// node_modules/date-fns/getISOWeek.js
+function getISOWeek(date, options) {
+  const _date = toDate(date, options?.in);
+  const diff = +startOfISOWeek(_date) - +startOfISOWeekYear(_date);
+  return Math.round(diff / millisecondsInWeek) + 1;
+}
+
+// node_modules/date-fns/getWeekYear.js
+function getWeekYear(date, options) {
+  const _date = toDate(date, options?.in);
+  const year = _date.getFullYear();
+  const defaultOptions2 = getDefaultOptions();
+  const firstWeekContainsDate = options?.firstWeekContainsDate ?? options?.locale?.options?.firstWeekContainsDate ?? defaultOptions2.firstWeekContainsDate ?? defaultOptions2.locale?.options?.firstWeekContainsDate ?? 1;
+  const firstWeekOfNextYear = constructFrom(options?.in || date, 0);
+  firstWeekOfNextYear.setFullYear(year + 1, 0, firstWeekContainsDate);
+  firstWeekOfNextYear.setHours(0, 0, 0, 0);
+  const startOfNextYear = startOfWeek(firstWeekOfNextYear, options);
+  const firstWeekOfThisYear = constructFrom(options?.in || date, 0);
+  firstWeekOfThisYear.setFullYear(year, 0, firstWeekContainsDate);
+  firstWeekOfThisYear.setHours(0, 0, 0, 0);
+  const startOfThisYear = startOfWeek(firstWeekOfThisYear, options);
+  if (+_date >= +startOfNextYear) {
+    return year + 1;
+  } else if (+_date >= +startOfThisYear) {
+    return year;
+  } else {
+    return year - 1;
+  }
+}
+
+// node_modules/date-fns/startOfWeekYear.js
+function startOfWeekYear(date, options) {
+  const defaultOptions2 = getDefaultOptions();
+  const firstWeekContainsDate = options?.firstWeekContainsDate ?? options?.locale?.options?.firstWeekContainsDate ?? defaultOptions2.firstWeekContainsDate ?? defaultOptions2.locale?.options?.firstWeekContainsDate ?? 1;
+  const year = getWeekYear(date, options);
+  const firstWeek = constructFrom(options?.in || date, 0);
+  firstWeek.setFullYear(year, 0, firstWeekContainsDate);
+  firstWeek.setHours(0, 0, 0, 0);
+  const _date = startOfWeek(firstWeek, options);
+  return _date;
+}
+
+// node_modules/date-fns/getWeek.js
+function getWeek(date, options) {
+  const _date = toDate(date, options?.in);
+  const diff = +startOfWeek(_date, options) - +startOfWeekYear(_date, options);
+  return Math.round(diff / millisecondsInWeek) + 1;
+}
+
+// node_modules/date-fns/_lib/addLeadingZeros.js
+function addLeadingZeros(number, targetLength) {
+  const sign = number < 0 ? "-" : "";
+  const output = Math.abs(number).toString().padStart(targetLength, "0");
+  return sign + output;
+}
+
+// node_modules/date-fns/_lib/format/lightFormatters.js
+var lightFormatters = {
+  // Year
+  y(date, token) {
+    const signedYear = date.getFullYear();
+    const year = signedYear > 0 ? signedYear : 1 - signedYear;
+    return addLeadingZeros(token === "yy" ? year % 100 : year, token.length);
+  },
+  // Month
+  M(date, token) {
+    const month = date.getMonth();
+    return token === "M" ? String(month + 1) : addLeadingZeros(month + 1, 2);
+  },
+  // Day of the month
+  d(date, token) {
+    return addLeadingZeros(date.getDate(), token.length);
+  },
+  // AM or PM
+  a(date, token) {
+    const dayPeriodEnumValue = date.getHours() / 12 >= 1 ? "pm" : "am";
+    switch (token) {
+      case "a":
+      case "aa":
+        return dayPeriodEnumValue.toUpperCase();
+      case "aaa":
+        return dayPeriodEnumValue;
+      case "aaaaa":
+        return dayPeriodEnumValue[0];
+      case "aaaa":
+      default:
+        return dayPeriodEnumValue === "am" ? "a.m." : "p.m.";
+    }
+  },
+  // Hour [1-12]
+  h(date, token) {
+    return addLeadingZeros(date.getHours() % 12 || 12, token.length);
+  },
+  // Hour [0-23]
+  H(date, token) {
+    return addLeadingZeros(date.getHours(), token.length);
+  },
+  // Minute
+  m(date, token) {
+    return addLeadingZeros(date.getMinutes(), token.length);
+  },
+  // Second
+  s(date, token) {
+    return addLeadingZeros(date.getSeconds(), token.length);
+  },
+  // Fraction of second
+  S(date, token) {
+    const numberOfDigits = token.length;
+    const milliseconds = date.getMilliseconds();
+    const fractionalSeconds = Math.trunc(
+      milliseconds * Math.pow(10, numberOfDigits - 3)
+    );
+    return addLeadingZeros(fractionalSeconds, token.length);
+  }
+};
+
+// node_modules/date-fns/_lib/format/formatters.js
+var dayPeriodEnum = {
+  midnight: "midnight",
+  noon: "noon",
+  morning: "morning",
+  afternoon: "afternoon",
+  evening: "evening",
+  night: "night"
+};
+var formatters = {
+  // Era
+  G: function(date, token, localize2) {
+    const era = date.getFullYear() > 0 ? 1 : 0;
+    switch (token) {
+      // AD, BC
+      case "G":
+      case "GG":
+      case "GGG":
+        return localize2.era(era, { width: "abbreviated" });
+      // A, B
+      case "GGGGG":
+        return localize2.era(era, { width: "narrow" });
+      // Anno Domini, Before Christ
+      case "GGGG":
+      default:
+        return localize2.era(era, { width: "wide" });
+    }
+  },
+  // Year
+  y: function(date, token, localize2) {
+    if (token === "yo") {
+      const signedYear = date.getFullYear();
+      const year = signedYear > 0 ? signedYear : 1 - signedYear;
+      return localize2.ordinalNumber(year, { unit: "year" });
+    }
+    return lightFormatters.y(date, token);
+  },
+  // Local week-numbering year
+  Y: function(date, token, localize2, options) {
+    const signedWeekYear = getWeekYear(date, options);
+    const weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear;
+    if (token === "YY") {
+      const twoDigitYear = weekYear % 100;
+      return addLeadingZeros(twoDigitYear, 2);
+    }
+    if (token === "Yo") {
+      return localize2.ordinalNumber(weekYear, { unit: "year" });
+    }
+    return addLeadingZeros(weekYear, token.length);
+  },
+  // ISO week-numbering year
+  R: function(date, token) {
+    const isoWeekYear = getISOWeekYear(date);
+    return addLeadingZeros(isoWeekYear, token.length);
+  },
+  // Extended year. This is a single number designating the year of this calendar system.
+  // The main difference between `y` and `u` localizers are B.C. years:
+  // | Year | `y` | `u` |
+  // |------|-----|-----|
+  // | AC 1 |   1 |   1 |
+  // | BC 1 |   1 |   0 |
+  // | BC 2 |   2 |  -1 |
+  // Also `yy` always returns the last two digits of a year,
+  // while `uu` pads single digit years to 2 characters and returns other years unchanged.
+  u: function(date, token) {
+    const year = date.getFullYear();
+    return addLeadingZeros(year, token.length);
+  },
+  // Quarter
+  Q: function(date, token, localize2) {
+    const quarter = Math.ceil((date.getMonth() + 1) / 3);
+    switch (token) {
+      // 1, 2, 3, 4
+      case "Q":
+        return String(quarter);
+      // 01, 02, 03, 04
+      case "QQ":
+        return addLeadingZeros(quarter, 2);
+      // 1st, 2nd, 3rd, 4th
+      case "Qo":
+        return localize2.ordinalNumber(quarter, { unit: "quarter" });
+      // Q1, Q2, Q3, Q4
+      case "QQQ":
+        return localize2.quarter(quarter, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      // 1, 2, 3, 4 (narrow quarter; could be not numerical)
+      case "QQQQQ":
+        return localize2.quarter(quarter, {
+          width: "narrow",
+          context: "formatting"
+        });
+      // 1st quarter, 2nd quarter, ...
+      case "QQQQ":
+      default:
+        return localize2.quarter(quarter, {
+          width: "wide",
+          context: "formatting"
+        });
+    }
+  },
+  // Stand-alone quarter
+  q: function(date, token, localize2) {
+    const quarter = Math.ceil((date.getMonth() + 1) / 3);
+    switch (token) {
+      // 1, 2, 3, 4
+      case "q":
+        return String(quarter);
+      // 01, 02, 03, 04
+      case "qq":
+        return addLeadingZeros(quarter, 2);
+      // 1st, 2nd, 3rd, 4th
+      case "qo":
+        return localize2.ordinalNumber(quarter, { unit: "quarter" });
+      // Q1, Q2, Q3, Q4
+      case "qqq":
+        return localize2.quarter(quarter, {
+          width: "abbreviated",
+          context: "standalone"
+        });
+      // 1, 2, 3, 4 (narrow quarter; could be not numerical)
+      case "qqqqq":
+        return localize2.quarter(quarter, {
+          width: "narrow",
+          context: "standalone"
+        });
+      // 1st quarter, 2nd quarter, ...
+      case "qqqq":
+      default:
+        return localize2.quarter(quarter, {
+          width: "wide",
+          context: "standalone"
+        });
+    }
+  },
+  // Month
+  M: function(date, token, localize2) {
+    const month = date.getMonth();
+    switch (token) {
+      case "M":
+      case "MM":
+        return lightFormatters.M(date, token);
+      // 1st, 2nd, ..., 12th
+      case "Mo":
+        return localize2.ordinalNumber(month + 1, { unit: "month" });
+      // Jan, Feb, ..., Dec
+      case "MMM":
+        return localize2.month(month, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      // J, F, ..., D
+      case "MMMMM":
+        return localize2.month(month, {
+          width: "narrow",
+          context: "formatting"
+        });
+      // January, February, ..., December
+      case "MMMM":
+      default:
+        return localize2.month(month, { width: "wide", context: "formatting" });
+    }
+  },
+  // Stand-alone month
+  L: function(date, token, localize2) {
+    const month = date.getMonth();
+    switch (token) {
+      // 1, 2, ..., 12
+      case "L":
+        return String(month + 1);
+      // 01, 02, ..., 12
+      case "LL":
+        return addLeadingZeros(month + 1, 2);
+      // 1st, 2nd, ..., 12th
+      case "Lo":
+        return localize2.ordinalNumber(month + 1, { unit: "month" });
+      // Jan, Feb, ..., Dec
+      case "LLL":
+        return localize2.month(month, {
+          width: "abbreviated",
+          context: "standalone"
+        });
+      // J, F, ..., D
+      case "LLLLL":
+        return localize2.month(month, {
+          width: "narrow",
+          context: "standalone"
+        });
+      // January, February, ..., December
+      case "LLLL":
+      default:
+        return localize2.month(month, { width: "wide", context: "standalone" });
+    }
+  },
+  // Local week of year
+  w: function(date, token, localize2, options) {
+    const week = getWeek(date, options);
+    if (token === "wo") {
+      return localize2.ordinalNumber(week, { unit: "week" });
+    }
+    return addLeadingZeros(week, token.length);
+  },
+  // ISO week of year
+  I: function(date, token, localize2) {
+    const isoWeek = getISOWeek(date);
+    if (token === "Io") {
+      return localize2.ordinalNumber(isoWeek, { unit: "week" });
+    }
+    return addLeadingZeros(isoWeek, token.length);
+  },
+  // Day of the month
+  d: function(date, token, localize2) {
+    if (token === "do") {
+      return localize2.ordinalNumber(date.getDate(), { unit: "date" });
+    }
+    return lightFormatters.d(date, token);
+  },
+  // Day of year
+  D: function(date, token, localize2) {
+    const dayOfYear = getDayOfYear(date);
+    if (token === "Do") {
+      return localize2.ordinalNumber(dayOfYear, { unit: "dayOfYear" });
+    }
+    return addLeadingZeros(dayOfYear, token.length);
+  },
+  // Day of week
+  E: function(date, token, localize2) {
+    const dayOfWeek = date.getDay();
+    switch (token) {
+      // Tue
+      case "E":
+      case "EE":
+      case "EEE":
+        return localize2.day(dayOfWeek, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      // T
+      case "EEEEE":
+        return localize2.day(dayOfWeek, {
+          width: "narrow",
+          context: "formatting"
+        });
+      // Tu
+      case "EEEEEE":
+        return localize2.day(dayOfWeek, {
+          width: "short",
+          context: "formatting"
+        });
+      // Tuesday
+      case "EEEE":
+      default:
+        return localize2.day(dayOfWeek, {
+          width: "wide",
+          context: "formatting"
+        });
+    }
+  },
+  // Local day of week
+  e: function(date, token, localize2, options) {
+    const dayOfWeek = date.getDay();
+    const localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
+    switch (token) {
+      // Numerical value (Nth day of week with current locale or weekStartsOn)
+      case "e":
+        return String(localDayOfWeek);
+      // Padded numerical value
+      case "ee":
+        return addLeadingZeros(localDayOfWeek, 2);
+      // 1st, 2nd, ..., 7th
+      case "eo":
+        return localize2.ordinalNumber(localDayOfWeek, { unit: "day" });
+      case "eee":
+        return localize2.day(dayOfWeek, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      // T
+      case "eeeee":
+        return localize2.day(dayOfWeek, {
+          width: "narrow",
+          context: "formatting"
+        });
+      // Tu
+      case "eeeeee":
+        return localize2.day(dayOfWeek, {
+          width: "short",
+          context: "formatting"
+        });
+      // Tuesday
+      case "eeee":
+      default:
+        return localize2.day(dayOfWeek, {
+          width: "wide",
+          context: "formatting"
+        });
+    }
+  },
+  // Stand-alone local day of week
+  c: function(date, token, localize2, options) {
+    const dayOfWeek = date.getDay();
+    const localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
+    switch (token) {
+      // Numerical value (same as in `e`)
+      case "c":
+        return String(localDayOfWeek);
+      // Padded numerical value
+      case "cc":
+        return addLeadingZeros(localDayOfWeek, token.length);
+      // 1st, 2nd, ..., 7th
+      case "co":
+        return localize2.ordinalNumber(localDayOfWeek, { unit: "day" });
+      case "ccc":
+        return localize2.day(dayOfWeek, {
+          width: "abbreviated",
+          context: "standalone"
+        });
+      // T
+      case "ccccc":
+        return localize2.day(dayOfWeek, {
+          width: "narrow",
+          context: "standalone"
+        });
+      // Tu
+      case "cccccc":
+        return localize2.day(dayOfWeek, {
+          width: "short",
+          context: "standalone"
+        });
+      // Tuesday
+      case "cccc":
+      default:
+        return localize2.day(dayOfWeek, {
+          width: "wide",
+          context: "standalone"
+        });
+    }
+  },
+  // ISO day of week
+  i: function(date, token, localize2) {
+    const dayOfWeek = date.getDay();
+    const isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek;
+    switch (token) {
+      // 2
+      case "i":
+        return String(isoDayOfWeek);
+      // 02
+      case "ii":
+        return addLeadingZeros(isoDayOfWeek, token.length);
+      // 2nd
+      case "io":
+        return localize2.ordinalNumber(isoDayOfWeek, { unit: "day" });
+      // Tue
+      case "iii":
+        return localize2.day(dayOfWeek, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      // T
+      case "iiiii":
+        return localize2.day(dayOfWeek, {
+          width: "narrow",
+          context: "formatting"
+        });
+      // Tu
+      case "iiiiii":
+        return localize2.day(dayOfWeek, {
+          width: "short",
+          context: "formatting"
+        });
+      // Tuesday
+      case "iiii":
+      default:
+        return localize2.day(dayOfWeek, {
+          width: "wide",
+          context: "formatting"
+        });
+    }
+  },
+  // AM or PM
+  a: function(date, token, localize2) {
+    const hours = date.getHours();
+    const dayPeriodEnumValue = hours / 12 >= 1 ? "pm" : "am";
+    switch (token) {
+      case "a":
+      case "aa":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      case "aaa":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "abbreviated",
+          context: "formatting"
+        }).toLowerCase();
+      case "aaaaa":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "narrow",
+          context: "formatting"
+        });
+      case "aaaa":
+      default:
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "wide",
+          context: "formatting"
+        });
+    }
+  },
+  // AM, PM, midnight, noon
+  b: function(date, token, localize2) {
+    const hours = date.getHours();
+    let dayPeriodEnumValue;
+    if (hours === 12) {
+      dayPeriodEnumValue = dayPeriodEnum.noon;
+    } else if (hours === 0) {
+      dayPeriodEnumValue = dayPeriodEnum.midnight;
+    } else {
+      dayPeriodEnumValue = hours / 12 >= 1 ? "pm" : "am";
+    }
+    switch (token) {
+      case "b":
+      case "bb":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      case "bbb":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "abbreviated",
+          context: "formatting"
+        }).toLowerCase();
+      case "bbbbb":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "narrow",
+          context: "formatting"
+        });
+      case "bbbb":
+      default:
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "wide",
+          context: "formatting"
+        });
+    }
+  },
+  // in the morning, in the afternoon, in the evening, at night
+  B: function(date, token, localize2) {
+    const hours = date.getHours();
+    let dayPeriodEnumValue;
+    if (hours >= 17) {
+      dayPeriodEnumValue = dayPeriodEnum.evening;
+    } else if (hours >= 12) {
+      dayPeriodEnumValue = dayPeriodEnum.afternoon;
+    } else if (hours >= 4) {
+      dayPeriodEnumValue = dayPeriodEnum.morning;
+    } else {
+      dayPeriodEnumValue = dayPeriodEnum.night;
+    }
+    switch (token) {
+      case "B":
+      case "BB":
+      case "BBB":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      case "BBBBB":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "narrow",
+          context: "formatting"
+        });
+      case "BBBB":
+      default:
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "wide",
+          context: "formatting"
+        });
+    }
+  },
+  // Hour [1-12]
+  h: function(date, token, localize2) {
+    if (token === "ho") {
+      let hours = date.getHours() % 12;
+      if (hours === 0) hours = 12;
+      return localize2.ordinalNumber(hours, { unit: "hour" });
+    }
+    return lightFormatters.h(date, token);
+  },
+  // Hour [0-23]
+  H: function(date, token, localize2) {
+    if (token === "Ho") {
+      return localize2.ordinalNumber(date.getHours(), { unit: "hour" });
+    }
+    return lightFormatters.H(date, token);
+  },
+  // Hour [0-11]
+  K: function(date, token, localize2) {
+    const hours = date.getHours() % 12;
+    if (token === "Ko") {
+      return localize2.ordinalNumber(hours, { unit: "hour" });
+    }
+    return addLeadingZeros(hours, token.length);
+  },
+  // Hour [1-24]
+  k: function(date, token, localize2) {
+    let hours = date.getHours();
+    if (hours === 0) hours = 24;
+    if (token === "ko") {
+      return localize2.ordinalNumber(hours, { unit: "hour" });
+    }
+    return addLeadingZeros(hours, token.length);
+  },
+  // Minute
+  m: function(date, token, localize2) {
+    if (token === "mo") {
+      return localize2.ordinalNumber(date.getMinutes(), { unit: "minute" });
+    }
+    return lightFormatters.m(date, token);
+  },
+  // Second
+  s: function(date, token, localize2) {
+    if (token === "so") {
+      return localize2.ordinalNumber(date.getSeconds(), { unit: "second" });
+    }
+    return lightFormatters.s(date, token);
+  },
+  // Fraction of second
+  S: function(date, token) {
+    return lightFormatters.S(date, token);
+  },
+  // Timezone (ISO-8601. If offset is 0, output is always `'Z'`)
+  X: function(date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
+    if (timezoneOffset === 0) {
+      return "Z";
+    }
+    switch (token) {
+      // Hours and optional minutes
+      case "X":
+        return formatTimezoneWithOptionalMinutes(timezoneOffset);
+      // Hours, minutes and optional seconds without `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `XX`
+      case "XXXX":
+      case "XX":
+        return formatTimezone(timezoneOffset);
+      // Hours, minutes and optional seconds with `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `XXX`
+      case "XXXXX":
+      case "XXX":
+      // Hours and minutes with `:` delimiter
+      default:
+        return formatTimezone(timezoneOffset, ":");
+    }
+  },
+  // Timezone (ISO-8601. If offset is 0, output is `'+00:00'` or equivalent)
+  x: function(date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
+    switch (token) {
+      // Hours and optional minutes
+      case "x":
+        return formatTimezoneWithOptionalMinutes(timezoneOffset);
+      // Hours, minutes and optional seconds without `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `xx`
+      case "xxxx":
+      case "xx":
+        return formatTimezone(timezoneOffset);
+      // Hours, minutes and optional seconds with `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `xxx`
+      case "xxxxx":
+      case "xxx":
+      // Hours and minutes with `:` delimiter
+      default:
+        return formatTimezone(timezoneOffset, ":");
+    }
+  },
+  // Timezone (GMT)
+  O: function(date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
+    switch (token) {
+      // Short
+      case "O":
+      case "OO":
+      case "OOO":
+        return "GMT" + formatTimezoneShort(timezoneOffset, ":");
+      // Long
+      case "OOOO":
+      default:
+        return "GMT" + formatTimezone(timezoneOffset, ":");
+    }
+  },
+  // Timezone (specific non-location)
+  z: function(date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
+    switch (token) {
+      // Short
+      case "z":
+      case "zz":
+      case "zzz":
+        return "GMT" + formatTimezoneShort(timezoneOffset, ":");
+      // Long
+      case "zzzz":
+      default:
+        return "GMT" + formatTimezone(timezoneOffset, ":");
+    }
+  },
+  // Seconds timestamp
+  t: function(date, token, _localize) {
+    const timestamp = Math.trunc(+date / 1e3);
+    return addLeadingZeros(timestamp, token.length);
+  },
+  // Milliseconds timestamp
+  T: function(date, token, _localize) {
+    return addLeadingZeros(+date, token.length);
+  }
+};
+function formatTimezoneShort(offset, delimiter = "") {
+  const sign = offset > 0 ? "-" : "+";
+  const absOffset = Math.abs(offset);
+  const hours = Math.trunc(absOffset / 60);
+  const minutes = absOffset % 60;
+  if (minutes === 0) {
+    return sign + String(hours);
+  }
+  return sign + String(hours) + delimiter + addLeadingZeros(minutes, 2);
+}
+function formatTimezoneWithOptionalMinutes(offset, delimiter) {
+  if (offset % 60 === 0) {
+    const sign = offset > 0 ? "-" : "+";
+    return sign + addLeadingZeros(Math.abs(offset) / 60, 2);
+  }
+  return formatTimezone(offset, delimiter);
+}
+function formatTimezone(offset, delimiter = "") {
+  const sign = offset > 0 ? "-" : "+";
+  const absOffset = Math.abs(offset);
+  const hours = addLeadingZeros(Math.trunc(absOffset / 60), 2);
+  const minutes = addLeadingZeros(absOffset % 60, 2);
+  return sign + hours + delimiter + minutes;
+}
+
+// node_modules/date-fns/_lib/format/longFormatters.js
+var dateLongFormatter = (pattern, formatLong2) => {
+  switch (pattern) {
+    case "P":
+      return formatLong2.date({ width: "short" });
+    case "PP":
+      return formatLong2.date({ width: "medium" });
+    case "PPP":
+      return formatLong2.date({ width: "long" });
+    case "PPPP":
+    default:
+      return formatLong2.date({ width: "full" });
+  }
+};
+var timeLongFormatter = (pattern, formatLong2) => {
+  switch (pattern) {
+    case "p":
+      return formatLong2.time({ width: "short" });
+    case "pp":
+      return formatLong2.time({ width: "medium" });
+    case "ppp":
+      return formatLong2.time({ width: "long" });
+    case "pppp":
+    default:
+      return formatLong2.time({ width: "full" });
+  }
+};
+var dateTimeLongFormatter = (pattern, formatLong2) => {
+  const matchResult = pattern.match(/(P+)(p+)?/) || [];
+  const datePattern = matchResult[1];
+  const timePattern = matchResult[2];
+  if (!timePattern) {
+    return dateLongFormatter(pattern, formatLong2);
+  }
+  let dateTimeFormat;
+  switch (datePattern) {
+    case "P":
+      dateTimeFormat = formatLong2.dateTime({ width: "short" });
+      break;
+    case "PP":
+      dateTimeFormat = formatLong2.dateTime({ width: "medium" });
+      break;
+    case "PPP":
+      dateTimeFormat = formatLong2.dateTime({ width: "long" });
+      break;
+    case "PPPP":
+    default:
+      dateTimeFormat = formatLong2.dateTime({ width: "full" });
+      break;
+  }
+  return dateTimeFormat.replace("{{date}}", dateLongFormatter(datePattern, formatLong2)).replace("{{time}}", timeLongFormatter(timePattern, formatLong2));
+};
+var longFormatters = {
+  p: timeLongFormatter,
+  P: dateTimeLongFormatter
+};
+
+// node_modules/date-fns/_lib/protectedTokens.js
+var dayOfYearTokenRE = /^D+$/;
+var weekYearTokenRE = /^Y+$/;
+var throwTokens = ["D", "DD", "YY", "YYYY"];
+function isProtectedDayOfYearToken(token) {
+  return dayOfYearTokenRE.test(token);
+}
+function isProtectedWeekYearToken(token) {
+  return weekYearTokenRE.test(token);
+}
+function warnOrThrowProtectedError(token, format2, input) {
+  const _message = message(token, format2, input);
+  console.warn(_message);
+  if (throwTokens.includes(token)) throw new RangeError(_message);
+}
+function message(token, format2, input) {
+  const subject = token[0] === "Y" ? "years" : "days of the month";
+  return `Use \`${token.toLowerCase()}\` instead of \`${token}\` (in \`${format2}\`) for formatting ${subject} to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`;
+}
+
+// node_modules/date-fns/format.js
+var formattingTokensRegExp = /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g;
+var longFormattingTokensRegExp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
+var escapedStringRegExp = /^'([^]*?)'?$/;
+var doubleQuoteRegExp = /''/g;
+var unescapedLatinCharacterRegExp = /[a-zA-Z]/;
+function format(date, formatStr, options) {
+  const defaultOptions2 = getDefaultOptions();
+  const locale = defaultOptions2.locale ?? enUS;
+  const firstWeekContainsDate = defaultOptions2.firstWeekContainsDate ?? defaultOptions2.locale?.options?.firstWeekContainsDate ?? 1;
+  const weekStartsOn = defaultOptions2.weekStartsOn ?? defaultOptions2.locale?.options?.weekStartsOn ?? 0;
+  const originalDate = toDate(date, options?.in);
+  if (!isValid(originalDate)) {
+    throw new RangeError("Invalid time value");
+  }
+  let parts = formatStr.match(longFormattingTokensRegExp).map((substring) => {
+    const firstCharacter = substring[0];
+    if (firstCharacter === "p" || firstCharacter === "P") {
+      const longFormatter = longFormatters[firstCharacter];
+      return longFormatter(substring, locale.formatLong);
+    }
+    return substring;
+  }).join("").match(formattingTokensRegExp).map((substring) => {
+    if (substring === "''") {
+      return { isToken: false, value: "'" };
+    }
+    const firstCharacter = substring[0];
+    if (firstCharacter === "'") {
+      return { isToken: false, value: cleanEscapedString(substring) };
+    }
+    if (formatters[firstCharacter]) {
+      return { isToken: true, value: substring };
+    }
+    if (firstCharacter.match(unescapedLatinCharacterRegExp)) {
+      throw new RangeError(
+        "Format string contains an unescaped latin alphabet character `" + firstCharacter + "`"
+      );
+    }
+    return { isToken: false, value: substring };
+  });
+  if (locale.localize.preprocessor) {
+    parts = locale.localize.preprocessor(originalDate, parts);
+  }
+  const formatterOptions = {
+    firstWeekContainsDate,
+    weekStartsOn,
+    locale
+  };
+  return parts.map((part) => {
+    if (!part.isToken) return part.value;
+    const token = part.value;
+    if (isProtectedWeekYearToken(token) || isProtectedDayOfYearToken(token)) {
+      warnOrThrowProtectedError(token, formatStr, String(date));
+    }
+    const formatter = formatters[token[0]];
+    return formatter(originalDate, token, locale.localize, formatterOptions);
+  }).join("");
+}
+function cleanEscapedString(input) {
+  const matched = input.match(escapedStringRegExp);
+  if (!matched) {
+    return input;
+  }
+  return matched[1].replace(doubleQuoteRegExp, "'");
+}
+
+// node_modules/date-fns/parseISO.js
+function parseISO(argument, options) {
+  const invalidDate = () => constructFrom(options?.in, NaN);
+  const additionalDigits = 2;
+  const dateStrings = splitDateString(argument);
+  let date;
+  if (dateStrings.date) {
+    const parseYearResult = parseYear(dateStrings.date, additionalDigits);
+    date = parseDate(parseYearResult.restDateString, parseYearResult.year);
+  }
+  if (!date || isNaN(+date)) return invalidDate();
+  const timestamp = +date;
+  let time = 0;
+  let offset;
+  if (dateStrings.time) {
+    time = parseTime(dateStrings.time);
+    if (isNaN(time)) return invalidDate();
+  }
+  if (dateStrings.timezone) {
+    offset = parseTimezone(dateStrings.timezone);
+    if (isNaN(offset)) return invalidDate();
+  } else {
+    const tmpDate = new Date(timestamp + time);
+    const result = toDate(0, options?.in);
+    result.setFullYear(
+      tmpDate.getUTCFullYear(),
+      tmpDate.getUTCMonth(),
+      tmpDate.getUTCDate()
+    );
+    result.setHours(
+      tmpDate.getUTCHours(),
+      tmpDate.getUTCMinutes(),
+      tmpDate.getUTCSeconds(),
+      tmpDate.getUTCMilliseconds()
+    );
+    return result;
+  }
+  return toDate(timestamp + time + offset, options?.in);
+}
+var patterns = {
+  dateTimeDelimiter: /[T ]/,
+  timeZoneDelimiter: /[Z ]/i,
+  timezone: /([Z+-].*)$/
+};
+var dateRegex = /^-?(?:(\d{3})|(\d{2})(?:-?(\d{2}))?|W(\d{2})(?:-?(\d{1}))?|)$/;
+var timeRegex = /^(\d{2}(?:[.,]\d*)?)(?::?(\d{2}(?:[.,]\d*)?))?(?::?(\d{2}(?:[.,]\d*)?))?$/;
+var timezoneRegex = /^([+-])(\d{2})(?::?(\d{2}))?$/;
+function splitDateString(dateString) {
+  const dateStrings = {};
+  const array = dateString.split(patterns.dateTimeDelimiter);
+  let timeString;
+  if (array.length > 2) {
+    return dateStrings;
+  }
+  if (/:/.test(array[0])) {
+    timeString = array[0];
+  } else {
+    dateStrings.date = array[0];
+    timeString = array[1];
+    if (patterns.timeZoneDelimiter.test(dateStrings.date)) {
+      dateStrings.date = dateString.split(patterns.timeZoneDelimiter)[0];
+      timeString = dateString.substr(
+        dateStrings.date.length,
+        dateString.length
+      );
+    }
+  }
+  if (timeString) {
+    const token = patterns.timezone.exec(timeString);
+    if (token) {
+      dateStrings.time = timeString.replace(token[1], "");
+      dateStrings.timezone = token[1];
+    } else {
+      dateStrings.time = timeString;
+    }
+  }
+  return dateStrings;
+}
+function parseYear(dateString, additionalDigits) {
+  const regex = new RegExp(
+    "^(?:(\\d{4}|[+-]\\d{" + (4 + additionalDigits) + "})|(\\d{2}|[+-]\\d{" + (2 + additionalDigits) + "})$)"
+  );
+  const captures = dateString.match(regex);
+  if (!captures) return { year: NaN, restDateString: "" };
+  const year = captures[1] ? parseInt(captures[1]) : null;
+  const century = captures[2] ? parseInt(captures[2]) : null;
+  return {
+    year: century === null ? year : century * 100,
+    restDateString: dateString.slice((captures[1] || captures[2]).length)
+  };
+}
+function parseDate(dateString, year) {
+  if (year === null) return /* @__PURE__ */ new Date(NaN);
+  const captures = dateString.match(dateRegex);
+  if (!captures) return /* @__PURE__ */ new Date(NaN);
+  const isWeekDate = !!captures[4];
+  const dayOfYear = parseDateUnit(captures[1]);
+  const month = parseDateUnit(captures[2]) - 1;
+  const day = parseDateUnit(captures[3]);
+  const week = parseDateUnit(captures[4]);
+  const dayOfWeek = parseDateUnit(captures[5]) - 1;
+  if (isWeekDate) {
+    if (!validateWeekDate(year, week, dayOfWeek)) {
+      return /* @__PURE__ */ new Date(NaN);
+    }
+    return dayOfISOWeekYear(year, week, dayOfWeek);
+  } else {
+    const date = /* @__PURE__ */ new Date(0);
+    if (!validateDate(year, month, day) || !validateDayOfYearDate(year, dayOfYear)) {
+      return /* @__PURE__ */ new Date(NaN);
+    }
+    date.setUTCFullYear(year, month, Math.max(dayOfYear, day));
+    return date;
+  }
+}
+function parseDateUnit(value) {
+  return value ? parseInt(value) : 1;
+}
+function parseTime(timeString) {
+  const captures = timeString.match(timeRegex);
+  if (!captures) return NaN;
+  const hours = parseTimeUnit(captures[1]);
+  const minutes = parseTimeUnit(captures[2]);
+  const seconds = parseTimeUnit(captures[3]);
+  if (!validateTime(hours, minutes, seconds)) {
+    return NaN;
+  }
+  return hours * millisecondsInHour + minutes * millisecondsInMinute + seconds * 1e3;
+}
+function parseTimeUnit(value) {
+  return value && parseFloat(value.replace(",", ".")) || 0;
+}
+function parseTimezone(timezoneString) {
+  if (timezoneString === "Z") return 0;
+  const captures = timezoneString.match(timezoneRegex);
+  if (!captures) return 0;
+  const sign = captures[1] === "+" ? -1 : 1;
+  const hours = parseInt(captures[2]);
+  const minutes = captures[3] && parseInt(captures[3]) || 0;
+  if (!validateTimezone(hours, minutes)) {
+    return NaN;
+  }
+  return sign * (hours * millisecondsInHour + minutes * millisecondsInMinute);
+}
+function dayOfISOWeekYear(isoWeekYear, week, day) {
+  const date = /* @__PURE__ */ new Date(0);
+  date.setUTCFullYear(isoWeekYear, 0, 4);
+  const fourthOfJanuaryDay = date.getUTCDay() || 7;
+  const diff = (week - 1) * 7 + day + 1 - fourthOfJanuaryDay;
+  date.setUTCDate(date.getUTCDate() + diff);
+  return date;
+}
+var daysInMonths = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+function isLeapYearIndex(year) {
+  return year % 400 === 0 || year % 4 === 0 && year % 100 !== 0;
+}
+function validateDate(year, month, date) {
+  return month >= 0 && month <= 11 && date >= 1 && date <= (daysInMonths[month] || (isLeapYearIndex(year) ? 29 : 28));
+}
+function validateDayOfYearDate(year, dayOfYear) {
+  return dayOfYear >= 1 && dayOfYear <= (isLeapYearIndex(year) ? 366 : 365);
+}
+function validateWeekDate(_year, week, day) {
+  return week >= 1 && week <= 53 && day >= 0 && day <= 6;
+}
+function validateTime(hours, minutes, seconds) {
+  if (hours === 24) {
+    return minutes === 0 && seconds === 0;
+  }
+  return seconds >= 0 && seconds < 60 && minutes >= 0 && minutes < 60 && hours >= 0 && hours < 25;
+}
+function validateTimezone(_hours, minutes) {
+  return minutes >= 0 && minutes <= 59;
+}
+function Label4({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive2.Root,
+    {
+      "data-slot": "label",
+      className: cn2(
+        "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var Form2 = FormProvider;
+var FormFieldContext3 = React3.createContext({});
+var FormField3 = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext3.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+var useFormField3 = () => {
+  const fieldContext = React3.useContext(FormFieldContext3);
+  const itemContext = React3.useContext(FormItemContext3);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+var FormItemContext3 = React3.createContext({});
+function FormItem3({ className, ...props }) {
+  const id = React3.useId();
+  return /* @__PURE__ */ jsx(FormItemContext3.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn2("grid gap-2", className), ...props }) });
+}
+function FormControl2({ ...props }) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField3();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      "data-slot": "form-control",
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+}
+var AdvanceSearchRow = ({
+  row,
+  isFirst,
+  fields,
+  fieldOptions,
+  operators,
+  onChangeField,
+  onChangeOperator,
+  onAdd,
+  onRemove,
+  onClear
+}) => {
+  const form = useFormContext();
+  const { control } = form;
+  const fieldSchema = fields.find((f) => f.name === row.fieldName);
+  const fieldType = fieldSchema?.type ?? "text";
+  React3__default.useEffect(() => {
+    if (operators && operators.length > 0 && !operators.includes(row.operator)) {
+      onChangeOperator(operators[0]);
+    }
+  }, [operators, row.operator, onChangeOperator]);
+  const isBetween = row.operator === "between";
+  const isCheckbox = fieldType === "checkbox";
+  const isDropdown = fieldType === "dropdown";
+  const isLookup = fieldType === "lookup";
+  const isNumber = fieldType === "number";
+  const isDate2 = fieldType === "date" || fieldType === "datetime";
+  const [openDateValue1, setOpenDateValue1] = React3__default.useState(false);
+  const [openDateValue2, setOpenDateValue2] = React3__default.useState(false);
+  const toDateFromISO = (v) => {
+    if (!v) return void 0;
+    try {
+      const d = parseISO(v);
+      return isValid(d) ? d : void 0;
+    } catch {
+      return void 0;
+    }
+  };
+  const getOpeatorLabel = (operator) => {
+    return OPERATOR_LABEL[operator] ?? operator;
+  };
+  const capitalizeFirst = (str) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-3 md:flex-row md:items-center md:space-x-1 md:space-y-0 w-full mb-6", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full md:w-1/8", children: /* @__PURE__ */ jsxs(Select2, { value: row.fieldName, onValueChange: (value) => onChangeField(value), children: [
+      /* @__PURE__ */ jsx(SelectTrigger2, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue2, { placeholder: row.fieldName }) }),
+      /* @__PURE__ */ jsx(SelectContent2, { children: fieldOptions.map((f) => /* @__PURE__ */ jsx(SelectItem2, { value: f.value, children: capitalizeFirst(f.label) }, f.value)) })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-full md:w-1/8", children: /* @__PURE__ */ jsxs(Select2, { value: row.operator, onValueChange: (value) => onChangeOperator(value), children: [
+      /* @__PURE__ */ jsx(SelectTrigger2, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue2, { placeholder: row.operator }) }),
+      /* @__PURE__ */ jsx(SelectContent2, { children: operators.map((op) => /* @__PURE__ */ jsx(SelectItem2, { value: op, children: getOpeatorLabel(op) }, op)) })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-full md:flex-1", children: !isBetween ? /* @__PURE__ */ jsx(
+      FormField3,
+      {
+        control,
+        name: `value_${row.id}`,
+        rules: { required: "This field is required." },
+        render: ({ field, fieldState }) => /* @__PURE__ */ jsx(FormItem3, { children: isCheckbox ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ jsxs(Select2, { value: field.value ?? "", onValueChange: (value) => field.onChange(value), children: [
+            /* @__PURE__ */ jsx(FormControl2, { children: /* @__PURE__ */ jsx(SelectTrigger2, { className: "w-full pr-8", children: /* @__PURE__ */ jsx(SelectValue2, { placeholder: "" }) }) }),
+            /* @__PURE__ */ jsxs(SelectContent2, { children: [
+              /* @__PURE__ */ jsx(SelectItem2, { value: "true", children: "true" }),
+              /* @__PURE__ */ jsx(SelectItem2, { value: "false", children: "false" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "absolute right-3 top-2.5 flex justify-center items-center space-x-1", children: /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }) }),
+          fieldState.error && !field.value && /* @__PURE__ */ jsx("span", { className: "absolute top-10 text-red-600 text-xs", children: "This field is required." })
+        ] }) : isDropdown && fieldSchema && "options" in fieldSchema ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ jsxs(Select2, { value: field.value ?? "", onValueChange: (value) => field.onChange(value), children: [
+            /* @__PURE__ */ jsx(FormControl2, { children: /* @__PURE__ */ jsx(SelectTrigger2, { className: "w-full pr-8", children: /* @__PURE__ */ jsx(SelectValue2, { placeholder: "" }) }) }),
+            /* @__PURE__ */ jsx(SelectContent2, { children: fieldSchema.options.map((opt) => /* @__PURE__ */ jsx(SelectItem2, { value: opt.value, children: opt.label }, opt.value)) })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "absolute right-3 top-2.5 flex justify-center items-center space-x-1", children: /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }) }),
+          fieldState.error && !field.value && /* @__PURE__ */ jsx("span", { className: "absolute top-10 text-red-600 text-xs", children: "This field is required." })
+        ] }) : isDate2 ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxs(Popover, { open: openDateValue1, onOpenChange: setOpenDateValue1, children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FormControl2, { children: /* @__PURE__ */ jsxs(
+              Button3,
+              {
+                type: "button",
+                variant: "outline",
+                className: cn2(
+                  "w-full justify-start text-left font-normal",
+                  !field.value && "text-muted-foreground"
+                ),
+                onClick: () => setOpenDateValue1((v) => !v),
+                children: [
+                  field.value ? format(toDateFromISO(field.value), "dd/MM/yyyy") : "DD/MM/YYYY",
+                  /* @__PURE__ */ jsxs("span", { className: "absolute right-3 top-2.5 flex justify-center items-center space-x-1", children: [
+                    /* @__PURE__ */ jsx(CalendarIcon, { className: "w-4 h-4 text-[#c0c0c0]" }),
+                    /* @__PURE__ */ jsx(ClearButton, { onClick: onClear })
+                  ] })
+                ]
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                variant: { day: { selected: "outline" } },
+                selectedDate: toDateFromISO(field.value),
+                onDateSelect: (d) => {
+                  field.onChange(d ? format(d, "yyyy-MM-dd") : void 0);
+                  if (d) setOpenDateValue1(false);
+                }
+              }
+            ) })
+          ] }),
+          fieldState.error && !field.value && /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-10 text-red-600 text-xs", children: "This field is required." })
+        ] }) : isNumber ? /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+          /* @__PURE__ */ jsx(FormControl2, { children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              ...field,
+              type: "number",
+              value: field.value ?? "",
+              autoComplete: "off",
+              inputMode: "numeric",
+              className: "focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:border-sus-green-1 pr-8"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { className: "absolute right-3 top-2.5 flex justify-center items-center space-x-1", children: /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }) }),
+          fieldState.error && !field.value && /* @__PURE__ */ jsx("span", { className: "absolute top-10 text-red-600 text-xs", children: "This field is required." })
+        ] }) : isLookup ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(FormControl2, { children: /* @__PURE__ */ jsx(
+            TagsInput,
+            {
+              value: Array.isArray(field.value) ? field.value : [],
+              onChange: field.onChange,
+              onClear,
+              error: !!fieldState.error
+            }
+          ) }),
+          fieldState.error && (!field.value || field.value.length === 0) && /* @__PURE__ */ jsx("span", { className: "absolute top-10 text-red-600 text-xs", children: "This field is required." })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+          /* @__PURE__ */ jsx(FormControl2, { children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              ...field,
+              value: field.value ?? "",
+              autoComplete: "off",
+              inputMode: "text",
+              className: "focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:border-sus-green-1"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("span", { className: "absolute right-3 top-2.5 flex justify-center items-center space-x-1", children: [
+            /* @__PURE__ */ jsx(Search, { className: "w-4 h-4 text-[#c0c0c0]" }),
+            /* @__PURE__ */ jsx(ClearButton, { onClick: onClear })
+          ] }),
+          fieldState.error && !field.value && /* @__PURE__ */ jsx("span", { className: "absolute top-10 text-red-600 text-xs", children: "This field is required." })
+        ] }) })
+      }
+    ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row md:items-center md:space-x-2 md:space-y-0 space-y-3", children: [
+      /* @__PURE__ */ jsx(
+        FormField3,
+        {
+          control,
+          name: `value_${row.id}`,
+          rules: { required: "This field is required." },
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsx(FormItem3, { className: "relative w-full md:w-1/2", children: /* @__PURE__ */ jsxs(Popover, { open: openDateValue1, onOpenChange: setOpenDateValue1, children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FormControl2, { children: /* @__PURE__ */ jsxs(
+              Button3,
+              {
+                type: "button",
+                variant: "outline",
+                className: cn2(
+                  "w-full justify-start text-left font-normal",
+                  !field.value && "text-muted-foreground"
+                ),
+                onClick: () => setOpenDateValue1((v) => !v),
+                children: [
+                  field.value ? format(toDateFromISO(field.value), "dd/MM/yyyy") : "DD/MM/YYYY",
+                  /* @__PURE__ */ jsxs("span", { className: "absolute right-3 top-2.5 flex justify-center items-center space-x-1", children: [
+                    /* @__PURE__ */ jsx(CalendarIcon, { className: "w-4 h-4 text-[#c0c0c0]" }),
+                    /* @__PURE__ */ jsx(ClearButton, { onClick: onClear })
+                  ] }),
+                  fieldState.error && !field.value && /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-10 text-red-600 text-xs", children: "This field is required." })
+                ]
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                selectedDate: toDateFromISO(field.value),
+                onDateSelect: (d) => {
+                  field.onChange(d ? format(d, "yyyy-MM-dd") : void 0);
+                  if (d) setOpenDateValue1(false);
+                }
+              }
+            ) })
+          ] }) })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-black font-bold text-center", children: "To" }),
+      /* @__PURE__ */ jsx(
+        FormField3,
+        {
+          control,
+          name: `value2_${row.id}`,
+          rules: { required: "This field is required." },
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsx(FormItem3, { className: "relative w-full md:w-1/2", children: /* @__PURE__ */ jsxs(Popover, { open: openDateValue2, onOpenChange: setOpenDateValue2, children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FormControl2, { children: /* @__PURE__ */ jsxs(
+              Button3,
+              {
+                type: "button",
+                variant: "outline",
+                className: cn2(
+                  "w-full justify-start text-left font-normal",
+                  !field.value && "text-muted-foreground"
+                ),
+                onClick: () => setOpenDateValue2((v) => !v),
+                children: [
+                  field.value ? format(toDateFromISO(field.value), "dd/MM/yyyy") : "DD/MM/YYYY",
+                  /* @__PURE__ */ jsxs("span", { className: "absolute right-3 top-2.5 flex justify-center items-center space-x-1", children: [
+                    /* @__PURE__ */ jsx(CalendarIcon, { className: "w-4 h-4 text-[#c0c0c0]" }),
+                    /* @__PURE__ */ jsx(ClearButton, { onClick: onClear })
+                  ] }),
+                  fieldState.error && !field.value && /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-10 text-red-600 text-xs", children: "This field is required." })
+                ]
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                selectedDate: toDateFromISO(field.value),
+                onDateSelect: (d) => {
+                  field.onChange(d ? format(d, "yyyy-MM-dd") : void 0);
+                  if (d) setOpenDateValue2(false);
+                }
+              }
+            ) })
+          ] }) })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: isFirst ? /* @__PURE__ */ jsx(
+      Button3,
+      {
+        type: "button",
+        onClick: onAdd,
+        className: "circle-btn bg-[#41875C] border border-[#41875C] text-white hover:bg-[#3a6f4e] transition duration-150",
+        "aria-label": "Add row",
+        title: "Add condition",
+        children: /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3 stroke-[2]" })
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button3,
+      {
+        type: "button",
+        onClick: onRemove,
+        className: "circle-btn bg-white border-2 border-[#82b495] text-[#82b495] hover:bg-[#82b495] hover:text-white transition duration-150",
+        "aria-label": "Remove row",
+        title: "Remove condition",
+        children: /* @__PURE__ */ jsx(Minus, { className: "w-3 h-3 stroke-[2]" })
+      }
+    ) })
+  ] });
+};
+var AdvanceSearch = ({
+  fields,
+  portalId,
+  iconColor = "#ffffff",
+  limitRows = 4,
+  onSearch
+}) => {
+  const fieldsData = useMemo(() => fields || [], [fields]);
+  const {
+    rows,
+    addRow,
+    removeRow,
+    clearRow,
+    clearAllRow,
+    changeField,
+    changeOperator,
+    operatorsForField,
+    fieldOptions
+  } = useAdvanceSearch({ fields: fieldsData, limitRows });
+  const form = useForm({
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {}
+  });
+  const { handleSubmit, unregister, resetField, getValues, setValue } = form;
+  const onSubmit = useCallback(() => {
+    const currentValues = getValues();
+    const param = {
+      AND: rows.map((r2) => {
+        const val1 = currentValues[`value_${r2.id}`];
+        const val2 = currentValues[`value2_${r2.id}`];
+        if (r2.operator === "between") {
+          if (!val1 || !val2) return null;
+          return {
+            [r2.fieldName]: {
+              gte: val1,
+              lte: val2
+            }
+          };
+        }
+        if (!val1) return null;
+        switch (r2.operator) {
+          case "contains":
+            return { [r2.fieldName]: { contains: val1 } };
+          case "beginsWith":
+            return { [r2.fieldName]: { startsWith: val1 } };
+          case "endsWith":
+            return { [r2.fieldName]: { endsWith: val1 } };
+          case "notEquals":
+            return { [r2.fieldName]: { not: val1 } };
+          case "gt":
+            return { [r2.fieldName]: { gt: val1 } };
+          case "gte":
+            return { [r2.fieldName]: { gte: val1 } };
+          case "lt":
+            return { [r2.fieldName]: { lt: val1 } };
+          case "lte":
+            return { [r2.fieldName]: { lte: val1 } };
+          case "is":
+            return { [r2.fieldName]: val1 };
+          case "isNot":
+            return { [r2.fieldName]: { not: val1 } };
+          case "notContains":
+            return { [r2.fieldName]: { not: { contains: val1 } } };
+          case "notBeginsWith":
+            return { [r2.fieldName]: { not: { startsWith: val1 } } };
+          case "notEndsWith":
+            return { [r2.fieldName]: { not: { endsWith: val1 } } };
+          case "containsAny":
+            return { [r2.fieldName]: { hasSome: String(val1).split(",") } };
+          case "containsAll":
+            return { [r2.fieldName]: { hasEvery: String(val1).split(",") } };
+          case "containsOnly":
+            return { [r2.fieldName]: { equals: String(val1).split(",") } };
+          default:
+            return { [r2.fieldName]: val1 };
+        }
+      }).filter(Boolean)
+    };
+    if (onSearch) {
+      onSearch(param);
+    }
+  }, [getValues, rows, onSearch]);
+  return /* @__PURE__ */ jsx(
+    ExpandCollapse_default,
+    {
+      title: /* @__PURE__ */ jsx(Search, { className: "w-5 h-5", style: { color: iconColor } }),
+      portalId,
+      children: /* @__PURE__ */ jsx(Form2, { ...form, children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit(onSubmit), className: "w-[70%] flex justify-center mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "rounded w-full md:w-3/4", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex justify-between items-center mb-2", children: /* @__PURE__ */ jsx(Label4, { className: "font-bold text-black", children: "Select field" }) }),
+        rows.map((row, idx) => /* @__PURE__ */ jsx(
+          AdvanceSearchRow,
+          {
+            row,
+            isFirst: idx === 0,
+            fields: fieldsData,
+            fieldOptions,
+            operators: operatorsForField(row.fieldName),
+            onChangeField: (f) => {
+              changeField(row.id, f);
+              setValue(`value_${row.id}`, void 0);
+              setValue(`value2_${row.id}`, void 0);
+            },
+            onChangeOperator: (op) => {
+              changeOperator(row.id, op);
+              setValue(`value_${row.id}`, void 0);
+              setValue(`value2_${row.id}`, void 0);
+            },
+            onAdd: addRow,
+            onRemove: () => {
+              removeRow(row.id);
+              unregister(`value_${row.id}`);
+              unregister(`value2_${row.id}`);
+            },
+            onClear: () => {
+              clearRow(row.id);
+              resetField(`value_${row.id}`);
+              resetField(`value2_${row.id}`);
+            }
+          },
+          row.id
+        )),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col-reverse md:flex-row md:justify-end gap-2 mt-4 pr-7", children: [
+          /* @__PURE__ */ jsx(
+            Button3,
+            {
+              type: "button",
+              className: "w-full md:w-auto md:min-w-[100px] bg-[#8b8b8b]",
+              onClick: () => {
+                clearAllRow();
+                Object.keys(getValues()).forEach((k) => resetField(k));
+              },
+              children: "Clear Search"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button3,
+            {
+              type: "submit",
+              className: "w-full md:w-auto md:min-w-[100px] bg-[#379a2a] hover:bg-[#3a6f4e]",
+              onClick: onSubmit,
+              children: "Search"
+            }
+          )
+        ] })
+      ] }) }) })
+    }
+  );
+};
+var AdvanceSearch_default = AdvanceSearch;
+
+export { AdvanceSearch_default as AdvanceSearch, Button, DataTable_default as DataTable, FormErrorMessage, FormField, FormFieldContext, FormItem, FormItemContext, FormLabel, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, navbar_default as Navbar, NumberInput, TextInput, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, getColumnIdFromTable, renderContentSlot, selectValueToBoolean, useFormField, useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, useScreenSize_default as useScreenSize };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map