@sustaina/shared-ui 1.7.3 → 1.8.1

package/dist/index.js

@@ -1,12 +1,13 @@
 'use strict';
 
-var React4 = require('react');
+var React5 = require('react');
 var reactHookForm = require('react-hook-form');
 var jsxRuntime = require('react/jsx-runtime');
-var clsx3 = require('clsx');
+var clsx2 = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var reactTable = require('@tanstack/react-table');
 var lucideReact = require('lucide-react');
+var classVarianceAuthority = require('class-variance-authority');
 var zustand = require('zustand');
 var reactSlot = require('@radix-ui/react-slot');
 var LabelPrimitive2 = require('@radix-ui/react-label');
@@ -17,7 +18,6 @@ var SelectPrimitive = require('@radix-ui/react-select');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var core = require('@dnd-kit/core');
 var modifiers = require('@dnd-kit/modifiers');
-var classVarianceAuthority = require('class-variance-authority');
 var zod = require('zod');
 var reactDom = require('react-dom');
 var PopoverPrimitive = require('@radix-ui/react-popover');
@@ -42,8 +42,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
-var clsx3__default = /*#__PURE__*/_interopDefault(clsx3);
+var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
+var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
 var LabelPrimitive2__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive2);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
@@ -51,20 +51,20 @@ var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitiv
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 
 // src/components/form/form-controls/use-form-field.ts
-var FormFieldContext = React4.createContext({});
+var FormFieldContext = React5.createContext({});
 function FormField(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 }
-var FormItemContext = React4.createContext({});
+var FormItemContext = React5.createContext({});
 function FormItem({ children, ...props }) {
-  const formItemId = React4.useId();
+  const formItemId = React5.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext, { value: { id: formItemId }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, children }) });
 }
 
 // src/components/form/form-controls/use-form-field.ts
 function useFormField(options) {
-  const { name: formFieldName } = React4.useContext(FormFieldContext);
-  const { id: formItemId } = React4.useContext(FormItemContext);
+  const { name: formFieldName } = React5.useContext(FormFieldContext);
+  const { id: formItemId } = React5.useContext(FormItemContext);
   const formContext = reactHookForm.useFormContext();
   if ((!formFieldName || !formItemId || !formContext) && options?.skipValidationIfNoContext) {
     return {
@@ -105,7 +105,7 @@ function useFormField(options) {
   };
 }
 function cn(...args) {
-  return tailwindMerge.twMerge(clsx3.clsx(args));
+  return tailwindMerge.twMerge(clsx2.clsx(args));
 }
 function FormErrorMessage({ className, errorClassName, ...props }) {
   const { formErrorMessageId, invalid, error } = useFormField();
@@ -160,14 +160,105 @@ function isDefined(value) {
 function isEmptyObject(value) {
   return !!value && Object.keys(value).length === 0 && value.constructor === Object;
 }
-function debounce(fn, delay = 150) {
-  let timeout = null;
-  return (...args) => {
-    if (timeout) clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      fn(...args);
-    }, delay);
-  };
+function debounce(func, wait = 150, options) {
+  let lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
+  if (typeof func !== "function") {
+    throw new TypeError("Expected a function");
+  }
+  wait = Number(wait) || 0;
+  if (options && typeof options === "object") {
+    leading = !!options.leading;
+    maxing = "maxWait" in options;
+    maxWait = maxing ? Math.max(Number(options.maxWait) || 0, wait) : void 0;
+    trailing = "trailing" in options ? !!options.trailing : trailing;
+  }
+  function invokeFunc(time) {
+    const args = lastArgs;
+    const thisArg = lastThis;
+    lastArgs = lastThis = void 0;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+  function leadingEdge(time) {
+    lastInvokeTime = time;
+    timerId = setTimeout(timerExpired, wait);
+    return leading ? invokeFunc(time) : result;
+  }
+  function remainingWait(time) {
+    const timeSinceLastCall = time - (lastCallTime ?? 0);
+    const timeSinceLastInvoke = time - lastInvokeTime;
+    const remaining = wait - timeSinceLastCall;
+    return maxing ? Math.min(remaining, (maxWait ?? 0) - timeSinceLastInvoke) : remaining;
+  }
+  function shouldInvoke(time) {
+    const timeSinceLastCall = time - (lastCallTime ?? 0);
+    const timeSinceLastInvoke = time - lastInvokeTime;
+    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= (maxWait ?? 0);
+  }
+  function timerExpired() {
+    const time = Date.now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+  function trailingEdge(time) {
+    timerId = void 0;
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = void 0;
+    return result;
+  }
+  function cancel() {
+    if (timerId !== void 0) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = void 0;
+  }
+  function flush() {
+    return timerId === void 0 ? result : trailingEdge(Date.now());
+  }
+  function debounced(...args) {
+    const time = Date.now();
+    const isInvoking = shouldInvoke(time);
+    lastArgs = args;
+    lastThis = this;
+    lastCallTime = time;
+    if (isInvoking) {
+      if (timerId === void 0) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === void 0) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+function throttle(func, wait, options) {
+  let leading = true, trailing = true;
+  if (typeof func !== "function") {
+    throw new TypeError("Expected a function");
+  }
+  if (options) {
+    leading = "leading" in options ? !!options.leading : leading;
+    trailing = "trailing" in options ? !!options.trailing : trailing;
+  }
+  return debounce(func, wait, {
+    leading,
+    maxWait: wait,
+    trailing
+  });
 }
 
 // src/utils/filters.ts
@@ -217,9 +308,8 @@ function compareAlphanumeric(aStr, bStr) {
   }
   return a.length - b.length;
 }
-function cn2(...inputs) {
-  return tailwindMerge.twMerge(clsx3.clsx(inputs));
-}
+
+// src/components/data-table/utils.tsx
 function booleanToSelectValue(value, options) {
   if (value === true) return "true";
   if (value === false) return "false";
@@ -230,24 +320,12 @@ function selectValueToBoolean(value) {
   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__ */ jsxRuntime.jsx("div", { ...mergedProps, children: content });
-}
 var useHover = () => {
-  const [hovering, setHovering] = React4.useState(false);
-  const prevRef = React4.useRef(null);
-  const onMouseEnter = React4.useCallback(() => setHovering(true), []);
-  const onMouseLeave = React4.useCallback(() => setHovering(false), []);
-  const nodeRefCallback = React4.useCallback(
+  const [hovering, setHovering] = React5.useState(false);
+  const prevRef = React5.useRef(null);
+  const onMouseEnter = React5.useCallback(() => setHovering(true), []);
+  const onMouseLeave = React5.useCallback(() => setHovering(false), []);
+  const nodeRefCallback = React5.useCallback(
     (node) => {
       if (prevRef.current) {
         prevRef.current.removeEventListener("mouseenter", onMouseEnter);
@@ -275,15 +353,15 @@ var useIntersectionObserver = ({
   initialIsIntersecting = false,
   onChange
 } = {}) => {
-  const [ref, setRef] = React4.useState(null);
-  const [state, setState] = React4.useState(() => ({
+  const [ref, setRef] = React5.useState(null);
+  const [state, setState] = React5.useState(() => ({
     isIntersecting: initialIsIntersecting,
     entry: void 0
   }));
-  const callbackRef = React4.useRef(null);
+  const callbackRef = React5.useRef(null);
   callbackRef.current = onChange;
   const frozen = state.entry?.isIntersecting && freezeOnceVisible;
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!ref) return;
     if (!("IntersectionObserver" in window)) return;
     if (frozen) return;
@@ -313,8 +391,8 @@ var useIntersectionObserver = ({
     frozen,
     freezeOnceVisible
   ]);
-  const prevRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const prevRef = React5.useRef(null);
+  React5.useEffect(() => {
     if (!ref && state.entry?.target && !freezeOnceVisible && !frozen && prevRef.current !== state.entry.target) {
       prevRef.current = state.entry.target;
       setState({ isIntersecting: initialIsIntersecting, entry: void 0 });
@@ -331,8 +409,8 @@ var isValidMediaQueryString = (query) => {
   return query !== "not all";
 };
 var useMediaQuery = ({ query }) => {
-  const [matches, setMatches] = React4.useState(false);
-  React4.useEffect(() => {
+  const [matches, setMatches] = React5.useState(false);
+  React5.useEffect(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -368,8 +446,8 @@ var useTruncated = ({
   onChange,
   resizeDetectDelay = 150
 }) => {
-  const [isTruncated, setIsTruncated] = React4.useState(false);
-  React4.useEffect(() => {
+  const [isTruncated, setIsTruncated] = React5.useState(false);
+  React5.useEffect(() => {
     const element = elementRef.current;
     if (!element) return;
     const checkTruncate = debounce(() => {
@@ -393,7 +471,14 @@ var useTruncated = ({
   return isTruncated;
 };
 var useTruncated_default = useTruncated;
-var HeaderCell = ({ rootClassName, labelClassName, context, label, sorterProps }) => {
+var HeaderCell = ({
+  rootClassName,
+  labelClassName,
+  context,
+  label,
+  sorterProps,
+  align = "left"
+}) => {
   const { ref, hovering } = useHover_default();
   const showSorter = sorterProps?.show ?? context.column.getCanSort();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -401,46 +486,56 @@ var HeaderCell = ({ rootClassName, labelClassName, context, label, sorterProps }
     {
       ref,
       className: cn(
-        "flex items-center gap-2",
+        "flex items-center justify-between gap-2",
         {
           "cursor-pointer": context?.column?.getCanSort()
         },
         rootClassName
       ),
-      ...stripNullishObject({
-        onClick: (event) => {
-          event.preventDefault();
-          if (context?.column?.getCanSort()) {
-            context?.column?.toggleSorting();
-          }
+      onClick: (event) => {
+        event.preventDefault();
+        if (context?.column?.getCanSort()) {
+          context?.column?.toggleSorting();
         }
-      }),
+      },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("inline-block font-bold", labelClassName), children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn("flex-1 flex items-center", {
+              "justify-start": align === "left",
+              "justify-center": align === "center",
+              "justify-end": align === "right"
+            }),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("inline-block font-bold", labelClassName), children: label })
+          }
+        ),
         showSorter && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "flex flex-col",
+            className: "flex flex-col -space-y-2",
             title: context.column.getCanSort() ? context.column.getNextSortingOrder() === "asc" ? "Sort ascending" : context.column.getNextSortingOrder() === "desc" ? "Sort descending" : "Clear sort" : void 0,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                lucideReact.Triangle,
+                lucideReact.ChevronUp,
                 {
-                  className: cn("fill-gray-300 stroke-0", {
-                    "fill-[#41875c]": context?.column?.getIsSorted() === "asc",
-                    "fill-[#41875c]/45": context?.column?.getNextSortingOrder() === "asc" && hovering
+                  className: cn("stroke-[#BBBBBB]", {
+                    "stroke-[#41875c]": context?.column?.getIsSorted() === "asc",
+                    "stroke-[#41875c]/45": context?.column?.getNextSortingOrder() === "asc" && hovering
                   }),
-                  size: 12
+                  size: 16,
+                  strokeWidth: 3
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                lucideReact.Triangle,
+                lucideReact.ChevronDown,
                 {
-                  className: cn("rotate-180 fill-gray-300 stroke-0", {
-                    "fill-[#41875c]": context?.column?.getIsSorted() === "desc",
-                    "fill-[#41875c]/45": context?.column?.getNextSortingOrder() === "desc" && hovering
+                  className: cn("stroke-[#BBBBBB]", {
+                    "stroke-[#41875c]": context?.column?.getIsSorted() === "desc",
+                    "stroke-[#41875c]/45": context?.column?.getNextSortingOrder() === "desc" && hovering
                   }),
-                  size: 12
+                  size: 16,
+                  strokeWidth: 3
                 }
               )
             ]
@@ -501,7 +596,7 @@ function TableHead({ className, ...props }) {
     {
       "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",
+        "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-[#F0F0F0] truncate",
         className
       ),
       ...props
@@ -530,7 +625,7 @@ var ColumnResizer = ({ header, className, style }) => {
     "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]",
+        "z-[2] 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(),
@@ -541,6 +636,37 @@ var ColumnResizer = ({ header, className, style }) => {
   );
 };
 var ColumnResizer_default = ColumnResizer;
+var ColumnSeparator = ({ show, className, ...props }) => {
+  if (!show) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "table-head-separator",
+      className: cn("absolute right-0 top-1/2 h-4 w-px -translate-y-1/2 bg-gray-300", className),
+      ...props
+    }
+  );
+};
+var ColumnSeparator_default = React5__namespace.default.memo(ColumnSeparator);
+var StatusContentSlot = ({
+  content,
+  icon,
+  wrapperProps = {},
+  defaultWrapperProps,
+  defaultIcon
+}) => {
+  if (!content && !icon && !defaultIcon) return null;
+  const mergedProps = {
+    ...defaultWrapperProps,
+    ...wrapperProps,
+    className: cn(defaultWrapperProps?.className, wrapperProps?.className)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...mergedProps, children: [
+    icon ?? defaultIcon,
+    content
+  ] });
+};
+var StatusContentSlot_default = StatusContentSlot;
 var stateOptions = [
   "columnFilters",
   "globalFilter",
@@ -593,9 +719,9 @@ var modelOptions = [
   "getCenterVisibleLeafColumns"
 ];
 var DataTableDevTool = ({ table }) => {
-  const [open, setOpen] = React4.useState(false);
-  const [visibleStates, setVisibleStates] = React4.useState([]);
-  const [visibleModels, setVisibleModels] = React4.useState([]);
+  const [open, setOpen] = React5.useState(false);
+  const [visibleStates, setVisibleStates] = React5.useState([]);
+  const [visibleModels, setVisibleModels] = React5.useState([]);
   const tableState = table.getState();
   const toggleValue = (arr, value) => arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value];
   const getCircularReplacer = () => {
@@ -706,12 +832,107 @@ var DataTableDevTool = ({ table }) => {
   ] });
 };
 var DataTableDevTool_default = DataTableDevTool;
+var SuiEmptyDataIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 184 152", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", fillRule: "evenodd", children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "translate(24 31.67)", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("ellipse", { fillOpacity: ".8", cx: "67.797", cy: "106.89", rx: "67.797", ry: "12.668", fill: "#B0DFAA" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z",
+        fill: "#CEE5D6"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z",
+        fill: "#DDEEE3",
+        transform: "translate(13.56)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z",
+        fill: "#F9F9F9"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z",
+        fill: "#DDEEE3"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z",
+      fill: "#DDEEE3"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "translate(149.65 15.383)", fill: "#FFF", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "20.654", cy: "3.167", rx: "2.849", ry: "2.815" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" })
+  ] })
+] }) });
+var empty_data_default = SuiEmptyDataIcon;
+var spinnerVariants = classVarianceAuthority.cva("relative inline-block aspect-square transform-gpu", {
+  variants: {
+    variant: {
+      primary: "[&>div]:bg-[#77ab8a]",
+      secondary: "[&>div]:bg-[#ab9555]",
+      destructive: "[&>div]:bg-destructive",
+      muted: "[&>div]:bg-muted-foreground"
+    },
+    size: {
+      sm: "size-7",
+      default: "size-8",
+      lg: "size-9",
+      xl: "size-10",
+      "2xl": "size-12"
+    }
+  },
+  defaultVariants: { variant: "primary", size: "default" }
+});
+var Spinner = ({ className, variant, size = "default" }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    role: "status",
+    "aria-label": "Loading",
+    className: cn(
+      typeof size === "string" ? spinnerVariants({ variant, size }) : spinnerVariants({ variant }),
+      className
+    ),
+    style: typeof size === "number" ? { width: size, height: size } : void 0,
+    children: [
+      Array.from({ length: 12 }).map((_, i2) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "animate-sus-spinner absolute left-[46.5%] top-[4.4%] h-[24%] w-[7%] origin-[center_190%] rounded-full opacity-[0.1] will-change-transform",
+          style: {
+            transform: `rotate(${i2 * 30}deg)`,
+            animationDelay: `${(i2 * 0.083).toFixed(3)}s`
+          },
+          "aria-hidden": "true"
+        },
+        i2
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading..." })
+    ]
+  }
+);
 
 // src/components/data-table/helpers.ts
-function getColumnPinningStyles(column) {
+function getColumnPinningInfo(column) {
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
+  return { isPinned, isLastLeftPinnedColumn, isFirstRightPinnedColumn };
+}
+function getColumnPinningStyles(column) {
+  const { isPinned, isFirstRightPinnedColumn, isLastLeftPinnedColumn } = getColumnPinningInfo(column);
   const classes = cn(
     isPinned ? "sticky" : "relative",
     isPinned ? "z-[1]" : "z-0",
@@ -846,14 +1067,14 @@ var DataTable = ({
   if (isDefined(tableRef) && !isDefined(tableRef?.current)) {
     tableRef.current = table;
   }
-  const tableContainerRef = React4.useRef(null);
+  const tableContainerRef = React5.useRef(null);
   const isTableEmpty = table.getCoreRowModel().rows.length === 0;
   const isTableEmptyAfterFiltering = table.getRowModel().rows.length === 0;
   const isFiltering = table.getState().columnFilters.length > 0 || !!table.getState().globalFilter;
   const leftVisibleLeftColumns = table.getLeftVisibleLeafColumns();
   const centerVisibleLeafColumns = table.getCenterVisibleLeafColumns();
   const rightVisibleLeafColumns = table.getRightVisibleLeafColumns();
-  const { isSomeColumnsFilterable, filterableColumns } = React4.useMemo(() => {
+  const { isSomeColumnsFilterable, filterableColumns } = React5.useMemo(() => {
     const mergedColumns = [
       ...leftVisibleLeftColumns,
       ...centerVisibleLeafColumns,
@@ -864,14 +1085,14 @@ var DataTable = ({
     );
     return { isSomeColumnsFilterable: isSomeColumnsFilterable2, filterableColumns: mergedColumns };
   }, [centerVisibleLeafColumns, leftVisibleLeftColumns, rightVisibleLeafColumns]);
-  const fetchMoreOnScrollReached = React4.useCallback(
+  const fetchMoreOnScrollReached = React5.useCallback(
     (containerRefElement) => {
       if (!scrollFetch?.enabled || !containerRefElement || scrollFetch?.isFetchingMore || !scrollFetch?.hasMore || !scrollFetch?.fetchMore) {
         return;
       }
       const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
       const scrollableHeight = scrollHeight - clientHeight;
-      const distanceToBottom = scrollHeight - clientHeight - scrollTop;
+      const distanceToBottom = scrollableHeight - scrollTop;
       const ratioToBottom = scrollableHeight > 0 ? scrollTop / scrollableHeight : 1;
       const info = {
         scrollTop,
@@ -898,7 +1119,7 @@ var DataTable = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [scrollFetch?.enabled, scrollFetch?.isFetchingMore, scrollFetch?.hasMore, scrollFetch?.fetchMore]
   );
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     fetchMoreOnScrollReached(tableContainerRef.current);
   }, [fetchMoreOnScrollReached]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -912,11 +1133,29 @@ var DataTable = ({
       ),
       onScroll: (e2) => fetchMoreOnScrollReached(e2.currentTarget),
       children: [
-        isInitialLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderContentSlot(statusContent?.initialLoading || { content: "Loading..." }, {
-          className: "flex flex-col h-full items-center justify-center text-sm py-4"
-        }) }) : isTableEmpty ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        isInitialLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+          StatusContentSlot_default,
+          {
+            content: statusContent?.initialLoading?.content ?? "Loading...",
+            icon: statusContent?.initialLoading?.icon,
+            wrapperProps: statusContent?.initialLoading?.wrapperProps,
+            defaultWrapperProps: {
+              className: "flex flex-col h-full items-center justify-center text-sm py-4 gap-2"
+            },
+            defaultIcon: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 })
+          }
+        ) : isTableEmpty ? /* @__PURE__ */ jsxRuntime.jsx(
+          StatusContentSlot_default,
+          {
+            content: statusContent?.emptyData?.content ?? "There's nothing here yet.",
+            icon: statusContent?.emptyData?.icon,
+            wrapperProps: statusContent?.emptyData?.wrapperProps,
+            defaultWrapperProps: {
+              className: "flex flex-col h-full items-center justify-center text-sm py-4 gap-2"
+            },
+            defaultIcon: /* @__PURE__ */ jsxRuntime.jsx(empty_data_default, { className: "text-[128px]" })
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Table, { ...components?.tableProps, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               TableHeader,
@@ -929,6 +1168,11 @@ var DataTable = ({
                       const { classes, style } = getColumnPinningStyles(header.column);
                       const useColumnSizing = header.column.columnDef?.meta?.useColumnSizing ?? columnResizing?.enabled ?? false;
                       const tableHeadCellProps = typeof components?.tableHeadCellProps === "function" ? components?.tableHeadCellProps({ header, table }) : components?.tableHeadCellProps;
+                      const nextHeader = headerGroup.headers?.[header.index + 1] || header;
+                      const { isLastLeftPinnedColumn } = getColumnPinningInfo(header.column);
+                      const { isFirstRightPinnedColumn } = getColumnPinningInfo(nextHeader.column);
+                      const headerGroupLength = header.headerGroup.headers.length;
+                      const showSeparator = header.index !== headerGroupLength - 1 && !isLastLeftPinnedColumn && !isFirstRightPinnedColumn;
                       return /* @__PURE__ */ jsxRuntime.jsxs(
                         TableHead,
                         {
@@ -950,6 +1194,14 @@ var DataTable = ({
                           },
                           children: [
                             header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              ColumnSeparator_default,
+                              {
+                                ...components?.columnSeparatorProps?.headerCell,
+                                ...header.column.columnDef?.meta?.columnSeparatorProps,
+                                show: header.column.columnDef?.meta?.columnSeparatorProps?.show ?? components?.columnSeparatorProps?.headerCell?.show ?? showSeparator
+                              }
+                            ),
                             /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer_default, { header, ...components?.columnResizerProps })
                           ]
                         },
@@ -973,7 +1225,6 @@ var DataTable = ({
                           column.columnDef?.meta?.filterCellProps?.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,
@@ -994,7 +1245,7 @@ var DataTable = ({
             ),
             /* @__PURE__ */ jsxRuntime.jsx(TableBody, { ...components?.tableBodyProps, children: table.getRowModel().rows.map((row) => {
               const tableDataRowProps = typeof components?.tableDataRowProps === "function" ? components.tableDataRowProps({ row, table }) || {} : components?.tableDataRowProps || {};
-              return /* @__PURE__ */ React4.createElement(
+              return /* @__PURE__ */ React5.createElement(
                 TableRow,
                 {
                   ...tableDataRowProps,
@@ -1042,20 +1293,39 @@ var DataTable = ({
               );
             }) })
           ] }),
-          isTableEmptyAfterFiltering && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderContentSlot(
-            statusContent?.emptyFilteredData || {
-              content: "No records found. Please try a different search."
-            },
+          isTableEmptyAfterFiltering && /* @__PURE__ */ jsxRuntime.jsx(
+            StatusContentSlot_default,
             {
-              className: "flex flex-col h-[calc(100%-76px)] items-center justify-center text-sm py-4"
+              content: statusContent?.emptyFilteredData?.content ?? "No records found. Please try a different search.",
+              icon: statusContent?.emptyFilteredData?.icon,
+              wrapperProps: statusContent?.emptyFilteredData?.wrapperProps,
+              defaultWrapperProps: {
+                className: "flex flex-col h-[calc(100%-76px)] items-center justify-center text-sm py-4 gap-2"
+              },
+              defaultIcon: /* @__PURE__ */ jsxRuntime.jsx(empty_data_default, { className: "text-[128px]" })
             }
-          ) }),
-          scrollFetch?.enabled && !isFiltering && !isInitialLoading && scrollFetch?.isFetchingMore && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderContentSlot(statusContent?.noMoreData || { content: null }, {
-            className: "flex items-center justify-center text-sm py-4"
-          }) })
+          ),
+          scrollFetch?.enabled && !isFiltering && !isInitialLoading && scrollFetch?.isFetchingMore && /* @__PURE__ */ jsxRuntime.jsx(
+            StatusContentSlot_default,
+            {
+              content: statusContent?.fetchingMore?.content ?? "Loading more...",
+              wrapperProps: statusContent?.fetchingMore?.wrapperProps,
+              defaultWrapperProps: {
+                className: "flex flex-col items-center justify-center text-sm py-4 gap-2"
+              }
+            }
+          ),
+          scrollFetch?.enabled && !isFiltering && !isInitialLoading && !scrollFetch?.hasMore && !scrollFetch?.isFetchingMore && /* @__PURE__ */ jsxRuntime.jsx(
+            StatusContentSlot_default,
+            {
+              content: statusContent?.noMoreData?.content,
+              icon: statusContent?.noMoreData?.icon,
+              wrapperProps: statusContent?.noMoreData?.wrapperProps,
+              defaultWrapperProps: {
+                className: "flex flex-col items-center justify-center text-sm py-4 gap-2"
+              }
+            }
+          )
         ] }),
         debug && /* @__PURE__ */ jsxRuntime.jsx(DataTableDevTool_default, { table })
       ]
@@ -1072,7 +1342,7 @@ var usePreventPageLeaveStore_default = usePreventPageLeaveStore;
 // src/components/prevent-page-leave/PreventPageLeave.tsx
 var PreventPageLeave = ({ children }) => {
   const { isPreventing } = usePreventPageLeaveStore();
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!isPreventing || typeof window === "undefined") {
       return;
     }
@@ -1090,7 +1360,7 @@ var PreventPageLeave = ({ children }) => {
 var PreventPageLeave_default = PreventPageLeave;
 var usePreventPageLeave = ({ isPrevening }) => {
   const setPreventing = usePreventPageLeaveStore_default((state) => state.setPreventing);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     setPreventing(isPrevening);
   }, [isPrevening, setPreventing]);
 };
@@ -1163,15 +1433,15 @@ var t2 = function(o3, t3, s2) {
   };
 };
 var Form = reactHookForm.FormProvider;
-var FormFieldContext2 = React4__namespace.createContext({});
+var FormFieldContext2 = React5__namespace.createContext({});
 var FormField2 = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext2.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField2 = () => {
-  const fieldContext = React4__namespace.useContext(FormFieldContext2);
-  const itemContext = React4__namespace.useContext(FormItemContext2);
+  const fieldContext = React5__namespace.useContext(FormFieldContext2);
+  const itemContext = React5__namespace.useContext(FormItemContext2);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1188,9 +1458,9 @@ var useFormField2 = () => {
     ...fieldState
   };
 };
-var FormItemContext2 = React4__namespace.createContext({});
+var FormItemContext2 = React5__namespace.createContext({});
 function FormItem2({ className, ...props }) {
-  const id = React4__namespace.useId();
+  const id = React5__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext2.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
 }
 function FormControl({ ...props }) {
@@ -1493,7 +1763,7 @@ function SortableRow({
     id: value,
     disabled: name == "columns.0.id"
   });
-  const style = React4__namespace.useMemo(
+  const style = React5__namespace.useMemo(
     () => ({
       transform: utilities.CSS.Transform.toString(transform),
       transition
@@ -1656,7 +1926,7 @@ var GridSettingsModal = ({
   onClose,
   onSaveColumns
 }) => {
-  const [isDragging, setIsDragging] = React4.useState(false);
+  const [isDragging, setIsDragging] = React5.useState(false);
   const form = reactHookForm.useForm({
     resolver: t2(GridSettingsSchema),
     defaultValues: { columns: currentColumns },
@@ -1668,7 +1938,7 @@ var GridSettingsModal = ({
     name: "columns",
     keyName: "fieldId"
   });
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (isOpen) {
       form.reset({ columns: currentColumns });
     }
@@ -1926,7 +2196,7 @@ var InfoIcon = (props) => {
     }
   );
 };
-var InfoIcon_default = React4__namespace.default.memo(InfoIcon);
+var InfoIcon_default = React5__namespace.default.memo(InfoIcon);
 function TooltipProvider2({
   delayDuration = 0,
   ...props
@@ -1997,7 +2267,7 @@ var Navbar = ({
 }) => {
   const { isMobile, isTablet, isDesktop } = useScreenSize_default();
   const Icon3 = lucideReact.CircleHelp;
-  const shouldShowSeparator = !separatorDisable && React4.isValidElement(searchButton);
+  const shouldShowSeparator = !separatorDisable && React5.isValidElement(searchButton);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
     {
@@ -2008,8 +2278,8 @@ var Navbar = ({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
           headImageURL !== "" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: headImageURL, alt: "", className: cn("w-full h-full", headImageURLClassName) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-            React4.isValidElement(title) ? title : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-xl font-bold", children: title }),
-            React4.isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-sm font-semibold", children: subTitle })
+            React5.isValidElement(title) ? title : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-xl font-bold", children: title }),
+            React5.isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-sm font-semibold", children: subTitle })
           ] }),
           tooltipTitle && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip2, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "text-white hover:opacity-80", children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon_default, { className: "w-4" }) }) }),
@@ -2040,10 +2310,10 @@ var Navbar = ({
                       ),
                       children: [
                         tooltipTitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                          React4.isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon3, { size: 32, "aria-hidden": "true" }),
+                          React5.isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon3, { size: 32, "aria-hidden": "true" }),
                           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: tooltipTitle })
                         ] }),
-                        React4.isValidElement(tooltipdescription) && tooltipdescription
+                        React5.isValidElement(tooltipdescription) && tooltipdescription
                       ]
                     }
                   ),
@@ -2097,19 +2367,19 @@ var Navbar = ({
             }
           ),
           shouldShowSeparator && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", className: "ml-1 w-[1px] h-10 bg-white" }),
-          React4.isValidElement(searchButton) ? searchButton : ""
+          React5.isValidElement(searchButton) ? searchButton : ""
         ] })
       ]
     }
   );
 };
-var navbar_default = React4__namespace.default.memo(Navbar);
+var navbar_default = React5__namespace.default.memo(Navbar);
 var ExpandCollapse = ({ title, children, portalId }) => {
-  const [isOpen, setIsOpen] = React4.useState(false);
+  const [isOpen, setIsOpen] = React5.useState(false);
   const Panel = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: clsx3__default.default(
+      className: clsx2__default.default(
         "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"
       ),
@@ -2142,7 +2412,6 @@ var ExpandCollapse_default = ExpandCollapse;
 
 // src/components/advanceSearch/operatorMap.ts
 var OPERATOR_MAP = {
-  uuid: ["equals", "notEquals", "gt", "gte", "lt", "lte"],
   text: [
     "contains",
     "equals",
@@ -2158,7 +2427,18 @@ var OPERATOR_MAP = {
   datetime: ["on", "after", "before", "between"],
   checkbox: ["is", "isNot"],
   dropdown: ["is", "isNot"],
-  lookup: ["containsAny", "containsOnly", "containsAll", "notContains"]
+  lookup: ["containsAny", "containsOnly", "containsAll", "notContains"],
+  uuid: ["equals", "notEquals", "gt", "gte", "lt", "lte"],
+  json: [
+    "contains",
+    "equals",
+    "beginsWith",
+    "endsWith",
+    "notEquals",
+    "notBeginsWith",
+    "notEndsWith",
+    "notContains"
+  ]
 };
 
 // src/components/advanceSearch/hooks/useAdvanceSearch.ts
@@ -2182,7 +2462,8 @@ function makeNewRow(field) {
       operator: "between",
       value: "",
       value2: "",
-      multiTableSearch: field.multiTableSearch
+      multiTableSearch: field.multiTableSearch,
+      jsonPath: field.jsonPath
     };
   }
   return {
@@ -2191,34 +2472,35 @@ function makeNewRow(field) {
     fieldType: field.type,
     operator: op,
     value: "",
-    multiTableSearch: field.multiTableSearch
+    multiTableSearch: field.multiTableSearch,
+    jsonPath: field.jsonPath
   };
 }
 function useAdvanceSearch({ fields, limitRows }) {
-  const [rows, setRows] = React4.useState([makeNewRow(fields[0])]);
-  const updateRows = React4.useCallback((next) => {
+  const [rows, setRows] = React5.useState([makeNewRow(fields[0])]);
+  const updateRows = React5.useCallback((next) => {
     setRows(next);
   }, []);
-  const operatorsForField = React4.useCallback(
+  const operatorsForField = React5.useCallback(
     (fieldName) => {
       const t3 = getFieldType(fields, fieldName);
       return OPERATOR_MAP[t3];
     },
     [fields]
   );
-  const addRow = React4.useCallback(() => {
+  const addRow = React5.useCallback(() => {
     if (!limitRows || rows.length < limitRows) {
       updateRows([...rows, makeNewRow(fields[0])]);
     }
   }, [rows, fields, updateRows, limitRows]);
-  const removeRow = React4.useCallback(
+  const removeRow = React5.useCallback(
     (id) => {
       if (rows.length === 1) return;
       updateRows(rows.filter((r2) => r2.id !== id));
     },
     [rows, updateRows]
   );
-  const clearRow = React4.useCallback(
+  const clearRow = React5.useCallback(
     (id) => {
       updateRows(
         rows.map((r2) => {
@@ -2237,10 +2519,10 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, fields, updateRows]
   );
-  const clearAllRow = React4.useCallback(() => {
+  const clearAllRow = React5.useCallback(() => {
     updateRows([makeNewRow(fields[0])]);
   }, [fields, updateRows]);
-  const changeField = React4.useCallback(
+  const changeField = React5.useCallback(
     (id, fieldName) => {
       updateRows(
         rows.map((r2) => {
@@ -2252,7 +2534,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, fields, updateRows]
   );
-  const changeOperator = React4.useCallback(
+  const changeOperator = React5.useCallback(
     (id, operator) => {
       updateRows(
         rows.map((r2) => {
@@ -2263,6 +2545,7 @@ function useAdvanceSearch({ fields, limitRows }) {
               fieldName: r2.fieldName,
               fieldType: r2.fieldType,
               multiTableSearch: r2.multiTableSearch,
+              jsonPath: r2.jsonPath,
               operator,
               value: "",
               value2: ""
@@ -2273,6 +2556,7 @@ function useAdvanceSearch({ fields, limitRows }) {
             fieldName: r2.fieldName,
             fieldType: r2.fieldType,
             multiTableSearch: r2.multiTableSearch,
+            jsonPath: r2.jsonPath,
             operator,
             value: ""
           };
@@ -2281,7 +2565,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, updateRows]
   );
-  const changeValue = React4.useCallback(
+  const changeValue = React5.useCallback(
     (id, which, val) => {
       updateRows(
         rows.map((r2) => {
@@ -2293,23 +2577,13 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, updateRows]
   );
-  const fieldOptions = React4.useMemo(
+  const fieldOptions = React5.useMemo(
     () => fields.map((f) => ({
       value: f.name,
       label: f.label ?? f.name
     })),
     [fields]
   );
-  const buildFilter = React4.useCallback(
-    (prismaFilter, options) => {
-      return options?.multiTableSearch ? {
-        some: {
-          value: { ...prismaFilter, ...options?.insensitive ? { mode: "insensitive" } : void 0 }
-        }
-      } : prismaFilter;
-    },
-    []
-  );
   return {
     rows,
     addRow,
@@ -2320,8 +2594,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     changeOperator,
     changeValue,
     operatorsForField,
-    fieldOptions,
-    buildFilter
+    fieldOptions
   };
 }
 
@@ -2349,6 +2622,9 @@ var OPERATOR_LABEL = {
   containsOnly: "Contains only",
   containsAll: "Contains all of"
 };
+function cn2(...inputs) {
+  return tailwindMerge.twMerge(clsx2.clsx(inputs));
+}
 function Select2({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Root, { "data-slot": "select", ...props });
 }
@@ -2630,13 +2906,13 @@ function DatePicker({
   className,
   ...props
 }) {
-  const today = React4__namespace.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const [displayed, setDisplayed] = React4__namespace.useState(
+  const today = React5__namespace.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [displayed, setDisplayed] = React5__namespace.useState(
     selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date()
   );
   minDate = clampToDay(minDate);
   maxDate = clampToDay(maxDate);
-  const disabledSet = React4__namespace.useMemo(() => {
+  const disabledSet = React5__namespace.useMemo(() => {
     const s2 = /* @__PURE__ */ new Set();
     disabledDates?.forEach((d) => s2.add(startOfDay(d).toISOString()));
     return s2;
@@ -2645,7 +2921,7 @@ function DatePicker({
   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 = React4__namespace.useMemo(() => {
+  const weekdays = React5__namespace.useMemo(() => {
     const labels = [];
     for (let i2 = 0; i2 < 7; i2++) {
       const idx = i2;
@@ -2654,7 +2930,7 @@ function DatePicker({
     }
     return labels;
   }, [callbacks]);
-  const grid = React4__namespace.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
+  const grid = React5__namespace.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
   const isDateDisabled = (date) => {
     const d = startOfDay(date);
     if (minDate && d < minDate) return true;
@@ -2733,7 +3009,7 @@ function DatePicker({
   ] });
 }
 var TagsInput = ({ value = [], onChange, onClear, error }) => {
-  const [inputValue, setInputValue] = React4.useState("");
+  const [inputValue, setInputValue] = React5.useState("");
   const addTag = (val) => {
     const trimmed = val.trim();
     if (!trimmed) return;
@@ -4428,10 +4704,10 @@ function splitDateString(dateString) {
   return dateStrings;
 }
 function parseYear(dateString, additionalDigits) {
-  const regex = new RegExp(
+  const regex2 = new RegExp(
     "^(?:(\\d{4}|[+-]\\d{" + (4 + additionalDigits) + "})|(\\d{2}|[+-]\\d{" + (2 + additionalDigits) + "})$)"
   );
-  const captures = dateString.match(regex);
+  const captures = dateString.match(regex2);
   if (!captures) return { year: NaN, restDateString: "" };
   const year = captures[1] ? parseInt(captures[1]) : null;
   const century = captures[2] ? parseInt(captures[2]) : null;
@@ -4537,15 +4813,15 @@ function Label4({ className, ...props }) {
   );
 }
 var Form2 = reactHookForm.FormProvider;
-var FormFieldContext3 = React4__namespace.createContext({});
+var FormFieldContext3 = React5__namespace.createContext({});
 var FormField3 = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext3.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField3 = () => {
-  const fieldContext = React4__namespace.useContext(FormFieldContext3);
-  const itemContext = React4__namespace.useContext(FormItemContext3);
+  const fieldContext = React5__namespace.useContext(FormFieldContext3);
+  const itemContext = React5__namespace.useContext(FormItemContext3);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -4562,9 +4838,9 @@ var useFormField3 = () => {
     ...fieldState
   };
 };
-var FormItemContext3 = React4__namespace.createContext({});
+var FormItemContext3 = React5__namespace.createContext({});
 function FormItem3({ className, ...props }) {
-  const id = React4__namespace.useId();
+  const id = React5__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext3.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "form-item", className: cn2("grid gap-2", className), ...props }) });
 }
 function FormControl2({ ...props }) {
@@ -4596,7 +4872,7 @@ var AdvanceSearchRow = ({
   const { control } = form;
   const fieldSchema = fields.find((f) => f.name === row.fieldName);
   const fieldType = fieldSchema?.type ?? "text";
-  React4__namespace.default.useEffect(() => {
+  React5__namespace.default.useEffect(() => {
     if (operators && operators.length > 0 && !operators.includes(row.operator)) {
       onChangeOperator(operators[0]);
     }
@@ -4607,8 +4883,8 @@ var AdvanceSearchRow = ({
   const isLookup = fieldType === "lookup";
   const isNumber = fieldType === "number";
   const isDate2 = fieldType === "date" || fieldType === "datetime";
-  const [openDateValue1, setOpenDateValue1] = React4__namespace.default.useState(false);
-  const [openDateValue2, setOpenDateValue2] = React4__namespace.default.useState(false);
+  const [openDateValue1, setOpenDateValue1] = React5__namespace.default.useState(false);
+  const [openDateValue2, setOpenDateValue2] = React5__namespace.default.useState(false);
   const toDateFromISO = (v) => {
     if (!v) return void 0;
     try {
@@ -4839,6 +5115,372 @@ var AdvanceSearchRow = ({
     ) })
   ] });
 };
+
+// src/components/advanceSearch/builder/checkbox.ts
+var CheckboxBuilder = class {
+  build(row) {
+    switch (row.operator) {
+      case "is":
+        return { [row.fieldName]: row.value };
+      case "isNot":
+        return { [row.fieldName]: { not: row.value } };
+      default:
+        return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/helper.ts
+var helper = (prismaFilter, options) => {
+  return options?.multiTableSearch ? {
+    some: {
+      value: { ...prismaFilter, ...options?.insensitive ? { mode: "insensitive" } : void 0 }
+    }
+  } : prismaFilter;
+};
+
+// src/components/advanceSearch/builder/datetime.ts
+var DatetimeBuilder = class {
+  build(row) {
+    try {
+      const start = new Date(row.value);
+      start.setHours(0, 0, 0, 0);
+      const end = new Date(row.value);
+      end.setHours(23, 59, 59, 59);
+      switch (row.operator) {
+        case "on": {
+          return {
+            [row.fieldName]: helper(
+              { gte: start.toISOString(), lt: end.toISOString() },
+              { multiTableSearch: row.multiTableSearch }
+            )
+          };
+        }
+        case "after":
+          return {
+            [row.fieldName]: helper(
+              { gte: start.toISOString() },
+              { multiTableSearch: row.multiTableSearch }
+            )
+          };
+        case "before":
+          return {
+            [row.fieldName]: helper(
+              { lt: start.toISOString() },
+              { multiTableSearch: row.multiTableSearch }
+            )
+          };
+        case "between": {
+          const start2 = new Date(row.value);
+          start2.setHours(0, 0, 0, 0);
+          const end2 = new Date(row.value2);
+          end2.setHours(23, 59, 59, 59);
+          return {
+            [row.fieldName]: helper(
+              { gte: start2.toISOString(), lt: end2.toISOString() },
+              { multiTableSearch: row.multiTableSearch }
+            )
+          };
+        }
+        default:
+          return {};
+      }
+    } catch {
+      return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/dropdown.ts
+var DropdownBuilder = class {
+  build(row) {
+    switch (row.operator) {
+      case "is":
+        return { [row.fieldName]: row.value };
+      case "isNot":
+        return { [row.fieldName]: { not: row.value } };
+      default:
+        return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/json.ts
+var JSONBuilder = class {
+  build(row) {
+    switch (row.operator) {
+      case "contains":
+        return { [row.fieldName]: { path: row.jsonPath, string_contains: row.value } };
+      case "equals":
+        return { [row.fieldName]: { path: row.jsonPath, equals: row.value } };
+      case "beginsWith":
+        return { [row.fieldName]: { path: row.jsonPath, string_starts_with: row.value } };
+      case "endsWith":
+        return { [row.fieldName]: { path: row.jsonPath, string_ends_with: row.value } };
+      case "notContains":
+        return { [row.fieldName]: { path: row.jsonPath, not: { string_contains: row.value } } };
+      case "notEquals":
+        return { [row.fieldName]: { path: row.jsonPath, not: { equals: row.value } } };
+      case "notBeginsWith":
+        return { [row.fieldName]: { path: row.jsonPath, not: { string_starts_with: row.value } } };
+      case "notEndsWith":
+        return { [row.fieldName]: { path: row.jsonPath, not: { string_ends_with: row.value } } };
+      default:
+        return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/lookup.ts
+var LookupBuilder = class {
+  build(row) {
+    switch (row.operator) {
+      case "containsAny":
+        return {
+          [row.fieldName]: helper(
+            { hasSome: String(row.value).split(",") },
+            { multiTableSearch: row.multiTableSearch }
+          )
+        };
+      case "containsAll":
+        return {
+          [row.fieldName]: helper(
+            { hasEvery: String(row.value).split(",") },
+            { multiTableSearch: row.multiTableSearch }
+          )
+        };
+      case "containsOnly":
+        return {
+          [row.fieldName]: helper(
+            { equals: String(row.value).split(",") },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "notContains":
+        return {
+          [row.fieldName]: helper(
+            { not: { contains: row.value } },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      default:
+        return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/number.ts
+var NumberBuilder = class {
+  build(row) {
+    const value = Number(row.value);
+    switch (row.operator) {
+      case "gt":
+        return {
+          [row.fieldName]: helper({ gt: value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "gte":
+        return {
+          [row.fieldName]: helper({ gte: value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "lt":
+        return {
+          [row.fieldName]: helper({ lt: value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "lte":
+        return {
+          [row.fieldName]: helper({ lte: value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "equals":
+        return {
+          [row.fieldName]: helper(
+            { equals: value },
+            {
+              multiTableSearch: row.multiTableSearch
+            }
+          )
+        };
+      case "notEquals":
+        return {
+          [row.fieldName]: helper(
+            { not: value },
+            {
+              multiTableSearch: row.multiTableSearch
+            }
+          )
+        };
+      default:
+        return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/text.ts
+var TextBuilder = class {
+  build(row) {
+    switch (row.operator) {
+      case "contains":
+        return {
+          [row.fieldName]: helper(
+            { contains: row.value },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "equals":
+        return {
+          [row.fieldName]: helper(
+            { equals: row.value },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "beginsWith":
+        return {
+          [row.fieldName]: helper(
+            { startsWith: row.value },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "endsWith":
+        return {
+          [row.fieldName]: helper(
+            { endsWith: row.value },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "notEquals":
+        return {
+          [row.fieldName]: helper(
+            { not: row.value },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "notBeginsWith":
+        return {
+          [row.fieldName]: helper(
+            { not: { startsWith: row.value } },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "notEndsWith":
+        return {
+          [row.fieldName]: helper(
+            { not: { endsWith: row.value } },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "notContains":
+        return {
+          [row.fieldName]: helper(
+            { not: { contains: row.value } },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      default:
+        return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/uuid.ts
+var regex = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+var UUIDBuilder = class {
+  build(row) {
+    if (!regex.test(row.value)) {
+      return { [row.fieldName]: {} };
+    }
+    switch (row.operator) {
+      case "gt":
+        return {
+          [row.fieldName]: helper({ gt: row.value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "gte":
+        return {
+          [row.fieldName]: helper({ gte: row.value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "lt":
+        return {
+          [row.fieldName]: helper({ lt: row.value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "lte":
+        return {
+          [row.fieldName]: helper({ lte: row.value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "equals":
+        return {
+          [row.fieldName]: helper(
+            { equals: row.value },
+            {
+              multiTableSearch: row.multiTableSearch
+            }
+          )
+        };
+      case "notEquals":
+        return {
+          [row.fieldName]: helper(
+            { not: row.value },
+            {
+              multiTableSearch: row.multiTableSearch
+            }
+          )
+        };
+      default:
+        return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/index.ts
+function getBuilder(fieldType) {
+  switch (fieldType) {
+    case "text":
+      return new TextBuilder();
+    case "number":
+      return new NumberBuilder();
+    case "date":
+      return new DatetimeBuilder();
+    case "datetime":
+      return new DatetimeBuilder();
+    case "checkbox":
+      return new CheckboxBuilder();
+    case "dropdown":
+      return new DropdownBuilder();
+    case "lookup":
+      return new LookupBuilder();
+    case "uuid":
+      return new UUIDBuilder();
+    case "json":
+      return new JSONBuilder();
+  }
+}
 var AdvanceSearch = ({
   fields,
   portalId,
@@ -4847,7 +5489,7 @@ var AdvanceSearch = ({
   onSearch,
   onClear
 }) => {
-  const fieldsData = React4.useMemo(() => {
+  const fieldsData = React5.useMemo(() => {
     if (fields.length === 0) throw new Error("fields cannot be an empty array");
     return fields || [];
   }, [fields]);
@@ -4860,8 +5502,7 @@ var AdvanceSearch = ({
     changeField,
     changeOperator,
     operatorsForField,
-    fieldOptions,
-    buildFilter
+    fieldOptions
   } = useAdvanceSearch({ fields: fieldsData, limitRows });
   const form = reactHookForm.useForm({
     mode: "onSubmit",
@@ -4869,185 +5510,23 @@ var AdvanceSearch = ({
     defaultValues: {}
   });
   const { handleSubmit, unregister, resetField, getValues, setValue } = form;
-  const onSubmit = React4.useCallback(() => {
+  const onSubmit = React5.useCallback(() => {
     const currentValues = getValues();
+    const rawRows = rows.map((r2) => {
+      r2.value = currentValues[`value_${r2.id}`] ?? "";
+      r2.value2 = currentValues[`value2_${r2.id}`] ?? "";
+      return r2;
+    });
     const param = {
-      AND: rows.map((r2) => {
-        let val1 = currentValues[`value_${r2.id}`];
-        const val2 = currentValues[`value2_${r2.id}`];
-        if (r2.operator === "between") {
-          if (!val1 || !val2) return null;
-          const start = new Date(val1);
-          start.setHours(0, 0, 0, 0);
-          const end = new Date(val2);
-          end.setHours(23, 59, 59, 59);
-          return {
-            [r2.fieldName]: {
-              gte: start.toISOString(),
-              lt: end.toISOString()
-            }
-          };
-        }
-        if (!val1) return null;
-        val1 = r2.fieldType === "number" ? Number(val1) : val1;
-        switch (r2.operator) {
-          case "contains":
-            return {
-              [r2.fieldName]: buildFilter(
-                { contains: val1 },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "beginsWith":
-            return {
-              [r2.fieldName]: buildFilter(
-                { startsWith: val1 },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "endsWith":
-            return {
-              [r2.fieldName]: buildFilter(
-                { endsWith: val1 },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "equals":
-            return {
-              [r2.fieldName]: buildFilter(
-                { equals: val1 },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "notEquals":
-            return {
-              [r2.fieldName]: buildFilter(
-                { not: val1 },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "gt":
-            return {
-              [r2.fieldName]: buildFilter({ gt: val1 }, { multiTableSearch: r2.multiTableSearch })
-            };
-          case "gte":
-            return {
-              [r2.fieldName]: buildFilter({ gte: val1 }, { multiTableSearch: r2.multiTableSearch })
-            };
-          case "lt":
-            return {
-              [r2.fieldName]: buildFilter({ lt: val1 }, { multiTableSearch: r2.multiTableSearch })
-            };
-          case "lte":
-            return {
-              [r2.fieldName]: buildFilter({ lte: val1 }, { multiTableSearch: r2.multiTableSearch })
-            };
-          case "is":
-            return { [r2.fieldName]: val1 };
-          case "isNot":
-            return { [r2.fieldName]: { not: val1 } };
-          case "notContains":
-            return {
-              [r2.fieldName]: buildFilter(
-                { not: { contains: val1 } },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "notBeginsWith":
-            return {
-              [r2.fieldName]: buildFilter(
-                { not: { startsWith: val1 } },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "notEndsWith":
-            return {
-              [r2.fieldName]: buildFilter(
-                { not: { endsWith: val1 } },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "containsAny":
-            return {
-              [r2.fieldName]: buildFilter(
-                { hasSome: String(val1).split(",") },
-                { multiTableSearch: r2.multiTableSearch }
-              )
-            };
-          case "containsAll":
-            return {
-              [r2.fieldName]: buildFilter(
-                { hasEvery: String(val1).split(",") },
-                { multiTableSearch: r2.multiTableSearch }
-              )
-            };
-          case "containsOnly":
-            return {
-              [r2.fieldName]: buildFilter(
-                { equals: String(val1).split(",") },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "on": {
-            const start = new Date(val1);
-            start.setHours(0, 0, 0, 0);
-            const end = new Date(val1);
-            end.setHours(23, 59, 59, 59);
-            return {
-              [r2.fieldName]: buildFilter(
-                { gte: start.toISOString(), lt: end.toISOString() },
-                { multiTableSearch: r2.multiTableSearch }
-              )
-            };
-          }
-          case "after":
-            return {
-              [r2.fieldName]: buildFilter(
-                { gte: new Date(val1).toISOString() },
-                { multiTableSearch: r2.multiTableSearch }
-              )
-            };
-          case "before":
-            return {
-              [r2.fieldName]: buildFilter(
-                { lt: new Date(val1).toISOString() },
-                { multiTableSearch: r2.multiTableSearch }
-              )
-            };
-        }
+      AND: rawRows.map((r2) => {
+        const builder = getBuilder(r2.fieldType);
+        return builder.build(r2);
       }).filter(Boolean)
     };
     if (onSearch) {
-      onSearch(param);
+      onSearch(param, rawRows);
     }
-  }, [buildFilter, getValues, rows, onSearch]);
+  }, [getValues, rows, onSearch]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ExpandCollapse_default,
     {
@@ -5117,7 +5596,7 @@ var AdvanceSearch = ({
 };
 var AdvanceSearch_default = AdvanceSearch;
 function cn3(...inputs) {
-  return tailwindMerge.twMerge(clsx3.clsx(inputs));
+  return tailwindMerge.twMerge(clsx2.clsx(inputs));
 }
 function Dialog2({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
@@ -5273,11 +5752,11 @@ function DialogAlert({
   persistent = false
 }) {
   const alignClass = align === "start" ? "justify-start" : align === "end" ? "justify-end" : "justify-center";
-  const handleCancel = React4.useCallback(() => {
+  const handleCancel = React5.useCallback(() => {
     onCancel?.();
     onOpenChange(false);
   }, [onCancel, onOpenChange]);
-  const handleConfirm = React4.useCallback(() => {
+  const handleConfirm = React5.useCallback(() => {
     onConfirm?.();
   }, [onConfirm]);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog2, { open, onOpenChange: persistent ? () => {
@@ -5329,9 +5808,9 @@ exports.compareAlphanumeric = compareAlphanumeric;
 exports.debounce = debounce;
 exports.isDefined = isDefined;
 exports.isEmptyObject = isEmptyObject;
-exports.renderContentSlot = renderContentSlot;
 exports.selectValueToBoolean = selectValueToBoolean;
 exports.stripNullishObject = stripNullishObject;
+exports.throttle = throttle;
 exports.useFormField = useFormField;
 exports.useGridSettingsStore = useGridSettingsStore_default;
 exports.useHover = useHover_default;