@krak-stack/registry 0.1.27 → 0.1.29

package/dist/components/ui/data-table.js

@@ -40,11 +40,7 @@ import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 
 // ../../src/lib/utils.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
+import { cn } from "cn";
 
 // ../../src/components/ui/badge.tsx
 var badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
@@ -1457,14 +1453,9 @@ import {
 
 // ../../src/components/ui/input-group.tsx
 import { cva as cva3 } from "class-variance-authority";
-
-// ../../src/components/ui/textarea.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
-
-// ../../src/components/ui/input-group.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
 function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx16("div", {
+  return /* @__PURE__ */ jsx15("div", {
     "data-slot": "input-group",
     role: "group",
     className: cn("group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
@@ -1497,7 +1488,7 @@ function InputGroupInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(Input, {
+  return /* @__PURE__ */ jsx15(Input, {
     "data-slot": "input-group-control",
     className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent", className),
     ...props
@@ -1505,7 +1496,7 @@ function InputGroupInput({
 }
 
 // ../../src/components/ui/virtualized-combobox.tsx
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 "use client";
 var messages2 = {
   en: {
@@ -1581,19 +1572,19 @@ var VirtualizedComboboxList = ({
       virtualizer.measure();
   }, [virtualizer]);
   if (filteredItems.length === 0) {
-    return /* @__PURE__ */ jsx17("div", {
+    return /* @__PURE__ */ jsx16("div", {
       className: "text-muted-foreground py-6 text-center text-sm",
       children: emptyLabel
     });
   }
-  return /* @__PURE__ */ jsx17(ComboboxPrimitive.List, {
+  return /* @__PURE__ */ jsx16(ComboboxPrimitive.List, {
     className: "scroll-py-1 overflow-auto overscroll-contain p-1",
     ref: handleScrollElementRef,
     style: {
       height: Math.min(virtualizer.getTotalSize() + 8, 288),
       maxHeight: "var(--available-height)"
     },
-    children: /* @__PURE__ */ jsx17("div", {
+    children: /* @__PURE__ */ jsx16("div", {
       className: "relative w-full",
       role: "presentation",
       style: { height: virtualizer.getTotalSize() },
@@ -1606,9 +1597,9 @@ var VirtualizedComboboxList = ({
           transform: `translateY(${virtualItem.start}px)`
         };
         if (entry.kind === "group") {
-          return /* @__PURE__ */ jsx17(ComboboxPrimitive.Group, {
+          return /* @__PURE__ */ jsx16(ComboboxPrimitive.Group, {
             className: "contents",
-            children: /* @__PURE__ */ jsx17(ComboboxPrimitive.GroupLabel, {
+            children: /* @__PURE__ */ jsx16(ComboboxPrimitive.GroupLabel, {
               className: "text-muted-foreground absolute top-0 left-0 w-full px-2 pt-3 pb-1 text-xs",
               "data-index": virtualItem.index,
               ref: virtualizer.measureElement,
@@ -1627,13 +1618,13 @@ var VirtualizedComboboxList = ({
           style,
           value: entry.item,
           children: [
-            renderItem?.(entry.item) ?? /* @__PURE__ */ jsx17("span", {
+            renderItem?.(entry.item) ?? /* @__PURE__ */ jsx16("span", {
               className: "min-w-0 truncate",
               children: entry.item.label
             }),
-            /* @__PURE__ */ jsx17(ComboboxPrimitive.ItemIndicator, {
+            /* @__PURE__ */ jsx16(ComboboxPrimitive.ItemIndicator, {
               className: "absolute right-2 flex size-4 items-center justify-center",
-              children: /* @__PURE__ */ jsx17(Check, {})
+              children: /* @__PURE__ */ jsx16(Check, {})
             })
           ]
         }, entry.item.value);
@@ -1652,8 +1643,8 @@ var VirtualizedComboboxContent = ({
   virtualizerRef
 }) => {
   const labels2 = virtualizedComboboxMessages(messageOverrides);
-  return /* @__PURE__ */ jsx17(ComboboxPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx17(ComboboxPrimitive.Positioner, {
+  return /* @__PURE__ */ jsx16(ComboboxPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx16(ComboboxPrimitive.Positioner, {
       align: "start",
       className: "isolate z-50",
       side: "bottom",
@@ -1661,17 +1652,17 @@ var VirtualizedComboboxContent = ({
       children: /* @__PURE__ */ jsxs8(ComboboxPrimitive.Popup, {
         className: cn("relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-0 origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-in-95", contentClassName),
         children: [
-          /* @__PURE__ */ jsx17("div", {
+          /* @__PURE__ */ jsx16("div", {
             className: "min-w-0 p-1 pb-0",
-            children: /* @__PURE__ */ jsx17(InputGroup, {
+            children: /* @__PURE__ */ jsx16(InputGroup, {
               className: "border-input/30 bg-input/30 h-8 w-full min-w-0 shadow-none",
-              children: /* @__PURE__ */ jsx17(ComboboxPrimitive.Input, {
+              children: /* @__PURE__ */ jsx16(ComboboxPrimitive.Input, {
                 placeholder: labels2.search,
-                render: /* @__PURE__ */ jsx17(InputGroupInput, {})
+                render: /* @__PURE__ */ jsx16(InputGroupInput, {})
               })
             })
           }),
-          /* @__PURE__ */ jsx17(VirtualizedComboboxList, {
+          /* @__PURE__ */ jsx16(VirtualizedComboboxList, {
             emptyLabel,
             groupSelections,
             itemIndexRef,
@@ -1694,20 +1685,20 @@ var defaultTrigger = (ariaLabel, ariaInvalid, disabled, label, triggerId) => /*
   type: "button",
   variant: "outline",
   children: [
-    /* @__PURE__ */ jsx17("span", {
+    /* @__PURE__ */ jsx16("span", {
       className: "min-w-0 flex-1 truncate pr-7 text-left",
       children: label
     }),
-    /* @__PURE__ */ jsx17(ChevronsUpDown, {
+    /* @__PURE__ */ jsx16(ChevronsUpDown, {
       className: "text-muted-foreground shrink-0 opacity-70"
     })
   ]
 });
-var defaultClear = (label) => /* @__PURE__ */ jsx17(ComboboxPrimitive.Clear, {
+var defaultClear = (label) => /* @__PURE__ */ jsx16(ComboboxPrimitive.Clear, {
   "aria-label": label,
   className: "text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute top-1/2 right-7 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded-sm outline-none focus-visible:border focus-visible:ring-3",
   type: "button",
-  children: /* @__PURE__ */ jsx17(X, {
+  children: /* @__PURE__ */ jsx16(X, {
     className: "size-3.5"
   })
 });
@@ -1746,13 +1737,13 @@ var VirtualizedComboboxSingle = (props) => {
       /* @__PURE__ */ jsxs8("div", {
         className: "relative",
         children: [
-          /* @__PURE__ */ jsx17(ComboboxPrimitive.Trigger, {
+          /* @__PURE__ */ jsx16(ComboboxPrimitive.Trigger, {
             render: props.trigger ?? defaultTrigger(props.ariaLabel, props.ariaInvalid, props.disabled, selectedLabel(props.value, props.placeholder), props.triggerId)
           }),
           props.trigger ? null : defaultClear(labels2.clear)
         ]
       }),
-      /* @__PURE__ */ jsx17(VirtualizedComboboxContent, {
+      /* @__PURE__ */ jsx16(VirtualizedComboboxContent, {
         ...props,
         groupSelections: false,
         itemIndexRef,
@@ -1788,13 +1779,13 @@ var VirtualizedComboboxMultiple = (props) => {
       /* @__PURE__ */ jsxs8("div", {
         className: "relative",
         children: [
-          /* @__PURE__ */ jsx17(ComboboxPrimitive.Trigger, {
+          /* @__PURE__ */ jsx16(ComboboxPrimitive.Trigger, {
             render: props.trigger ?? defaultTrigger(props.ariaLabel, props.ariaInvalid, props.disabled, selectedLabel(props.value, props.placeholder), props.triggerId)
           }),
           props.trigger ? null : defaultClear(labels2.clear)
         ]
       }),
-      /* @__PURE__ */ jsx17(VirtualizedComboboxContent, {
+      /* @__PURE__ */ jsx16(VirtualizedComboboxContent, {
         ...props,
         groupSelections: true,
         itemIndexRef,
@@ -1805,15 +1796,15 @@ var VirtualizedComboboxMultiple = (props) => {
   });
 };
 function VirtualizedCombobox(props) {
-  return props.multiple ? /* @__PURE__ */ jsx17(VirtualizedComboboxMultiple, {
+  return props.multiple ? /* @__PURE__ */ jsx16(VirtualizedComboboxMultiple, {
     ...props
-  }) : /* @__PURE__ */ jsx17(VirtualizedComboboxSingle, {
+  }) : /* @__PURE__ */ jsx16(VirtualizedComboboxSingle, {
     ...props
   });
 }
 
 // ../../src/components/ui/data-table.tsx
-import { jsx as jsx18, jsxs as jsxs9, Fragment } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9, Fragment } from "react/jsx-runtime";
 var DataTablePersistedUiStateSchema = Schema.Struct({
   columnVisibility: Schema.Record(Schema.String, Schema.Boolean),
   columnSizing: Schema.Record(Schema.String, Schema.Number),
@@ -2159,7 +2150,7 @@ var renderCell = (row, column) => {
   };
   const CellRenderer = column.colDef.cellRenderer;
   if (CellRenderer)
-    return /* @__PURE__ */ jsx18(CellRenderer, {
+    return /* @__PURE__ */ jsx17(CellRenderer, {
       ...params
     });
   return column.colDef.valueFormatter?.(params) ?? (value === null || value === undefined ? null : String(value));
@@ -2207,30 +2198,30 @@ var DataTableRowActions = ({
     return null;
   return /* @__PURE__ */ jsxs9(DropdownMenu, {
     children: [
-      /* @__PURE__ */ jsx18(DropdownMenuTrigger, {
+      /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
         onClick: (event) => event.stopPropagation(),
         render: /* @__PURE__ */ jsxs9(Button, {
           className: "size-8 focus-visible:ring-inset [&_svg:not([class*='size-'])]:size-4",
           size: "icon",
           variant: "ghost",
           children: [
-            /* @__PURE__ */ jsx18("span", {
+            /* @__PURE__ */ jsx17("span", {
               className: "sr-only",
               children: title
             }),
-            /* @__PURE__ */ jsx18(MoreHorizontal, {})
+            /* @__PURE__ */ jsx17(MoreHorizontal, {})
           ]
         })
       }),
-      /* @__PURE__ */ jsx18(DropdownMenuContent, {
+      /* @__PURE__ */ jsx17(DropdownMenuContent, {
         align: "end",
         className: "w-max",
         children: /* @__PURE__ */ jsxs9(DropdownMenuGroup, {
           children: [
-            /* @__PURE__ */ jsx18(DropdownMenuLabel, {
+            /* @__PURE__ */ jsx17(DropdownMenuLabel, {
               children: title
             }),
-            /* @__PURE__ */ jsx18(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}),
             visible.map((action) => /* @__PURE__ */ jsxs9(DropdownMenuItem, {
               onClick: (event) => {
                 event.stopPropagation();
@@ -2268,7 +2259,7 @@ var DataTableRowActionMenu = ({
       reorderActions.push({
         id: "data-table-move-up",
         name: store.config.labels.moveUp,
-        icon: /* @__PURE__ */ jsx18(ArrowUp, {}),
+        icon: /* @__PURE__ */ jsx17(ArrowUp, {}),
         onClick: () => move(rowIndex - 1)
       });
     }
@@ -2276,12 +2267,12 @@ var DataTableRowActionMenu = ({
       reorderActions.push({
         id: "data-table-move-down",
         name: store.config.labels.moveDown,
-        icon: /* @__PURE__ */ jsx18(ArrowDown, {}),
+        icon: /* @__PURE__ */ jsx17(ArrowDown, {}),
         onClick: () => move(rowIndex + 1)
       });
     }
   }
-  return /* @__PURE__ */ jsx18(DataTableRowActions, {
+  return /* @__PURE__ */ jsx17(DataTableRowActions, {
     actions: [...reorderActions, ...rowActions ? rowActions.items : []],
     row: row.data,
     title: rowActions?.label ?? store.config.labels.actions
@@ -2308,10 +2299,10 @@ var DataTableToolbar = ({
       features.search !== false ? /* @__PURE__ */ jsxs9("div", {
         className: "relative min-w-0",
         children: [
-          /* @__PURE__ */ jsx18(Search, {
+          /* @__PURE__ */ jsx17(Search, {
             className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2"
           }),
-          /* @__PURE__ */ jsx18(Input, {
+          /* @__PURE__ */ jsx17(Input, {
             className: "px-9",
             onChange: (event) => update((state) => ({
               ...state,
@@ -2321,7 +2312,7 @@ var DataTableToolbar = ({
             placeholder: labels2.filter,
             value: store.state.globalFilter ?? ""
           }),
-          store.state.globalFilter ? /* @__PURE__ */ jsx18(Button, {
+          store.state.globalFilter ? /* @__PURE__ */ jsx17(Button, {
             "aria-label": labels2.filter,
             className: "absolute top-1/2 right-1 size-7 -translate-y-1/2",
             onClick: () => update((state) => ({
@@ -2331,11 +2322,11 @@ var DataTableToolbar = ({
             })),
             size: "icon",
             variant: "ghost",
-            children: /* @__PURE__ */ jsx18(X2, {})
+            children: /* @__PURE__ */ jsx17(X2, {})
           }) : null
         ]
       }) : null,
-      /* @__PURE__ */ jsx18("div", {
+      /* @__PURE__ */ jsx17("div", {
         className: "-m-1 flex overflow-x-auto p-1",
         children: /* @__PURE__ */ jsxs9(Menubar, {
           className: "h-auto w-max min-w-full justify-start bg-transparent shadow-none [&_[data-slot=menubar-trigger]]:gap-2 [&_[data-slot=menubar-trigger]_svg]:size-4",
@@ -2346,22 +2337,22 @@ var DataTableToolbar = ({
                   className: "bg-primary text-primary-foreground hover:bg-primary/90 aria-expanded:bg-primary/90",
                   children: [
                     labels2.selected,
-                    /* @__PURE__ */ jsx18(Badge, {
+                    /* @__PURE__ */ jsx17(Badge, {
                       variant: "secondary",
                       children: selectedRows.length
                     }),
-                    /* @__PURE__ */ jsx18(ChevronDown, {})
+                    /* @__PURE__ */ jsx17(ChevronDown, {})
                   ]
                 }),
-                /* @__PURE__ */ jsx18(MenubarContent, {
+                /* @__PURE__ */ jsx17(MenubarContent, {
                   align: "end",
                   className: "w-max",
                   children: /* @__PURE__ */ jsxs9(MenubarGroup, {
                     children: [
-                      /* @__PURE__ */ jsx18(MenubarLabel, {
+                      /* @__PURE__ */ jsx17(MenubarLabel, {
                         children: bulkActions && bulkActions.label ? bulkActions.label : labels2.actions
                       }),
-                      /* @__PURE__ */ jsx18(MenubarSeparator, {}),
+                      /* @__PURE__ */ jsx17(MenubarSeparator, {}),
                       visibleBulkActions.map((action) => /* @__PURE__ */ jsxs9(MenubarItem, {
                         onClick: () => action.onClick(selectedRows),
                         variant: action.variant,
@@ -2380,22 +2371,22 @@ var DataTableToolbar = ({
                 /* @__PURE__ */ jsxs9(MenubarTrigger, {
                   "aria-label": labels2.groupBy,
                   children: [
-                    /* @__PURE__ */ jsx18(Rows3, {}),
-                    /* @__PURE__ */ jsx18("span", {
+                    /* @__PURE__ */ jsx17(Rows3, {}),
+                    /* @__PURE__ */ jsx17("span", {
                       className: "hidden sm:inline",
                       children: labels2.groupBy
                     })
                   ]
                 }),
-                /* @__PURE__ */ jsx18(MenubarContent, {
+                /* @__PURE__ */ jsx17(MenubarContent, {
                   align: "end",
                   children: /* @__PURE__ */ jsxs9(MenubarGroup, {
                     children: [
-                      /* @__PURE__ */ jsx18(MenubarLabel, {
+                      /* @__PURE__ */ jsx17(MenubarLabel, {
                         children: labels2.groupBy
                       }),
-                      /* @__PURE__ */ jsx18(MenubarSeparator, {}),
-                      grouping.fields.map((field) => /* @__PURE__ */ jsx18(MenubarCheckboxItem, {
+                      /* @__PURE__ */ jsx17(MenubarSeparator, {}),
+                      grouping.fields.map((field) => /* @__PURE__ */ jsx17(MenubarCheckboxItem, {
                         checked: store.state.grouping.includes(field.id),
                         onCheckedChange: (checked) => update((state) => ({
                           ...state,
@@ -2408,22 +2399,22 @@ var DataTableToolbar = ({
                 })
               ]
             }) : null,
-            features.sorting !== false ? /* @__PURE__ */ jsx18(SortMenu, {
+            features.sorting !== false ? /* @__PURE__ */ jsx17(SortMenu, {
               tableAtom
             }) : null,
-            features.gallery ? /* @__PURE__ */ jsx18(ViewMenu, {
+            features.gallery ? /* @__PURE__ */ jsx17(ViewMenu, {
               tableAtom
             }) : null,
-            features.columnVisibility !== false ? /* @__PURE__ */ jsx18(ColumnMenu, {
+            features.columnVisibility !== false ? /* @__PURE__ */ jsx17(ColumnMenu, {
               tableAtom
             }) : null,
-            features.refresh ? /* @__PURE__ */ jsx18(MenubarMenu, {
+            features.refresh ? /* @__PURE__ */ jsx17(MenubarMenu, {
               children: /* @__PURE__ */ jsxs9(MenubarTrigger, {
                 "aria-label": labels2.refresh,
                 onClick: features.refresh,
                 children: [
-                  /* @__PURE__ */ jsx18(RefreshCw, {}),
-                  /* @__PURE__ */ jsx18("span", {
+                  /* @__PURE__ */ jsx17(RefreshCw, {}),
+                  /* @__PURE__ */ jsx17("span", {
                     className: "hidden sm:inline",
                     children: labels2.refresh
                   })
@@ -2436,25 +2427,25 @@ var DataTableToolbar = ({
                   "aria-label": labels2.export,
                   disabled: !exportRows.length,
                   children: [
-                    /* @__PURE__ */ jsx18(Download, {}),
-                    /* @__PURE__ */ jsx18("span", {
+                    /* @__PURE__ */ jsx17(Download, {}),
+                    /* @__PURE__ */ jsx17("span", {
                       className: "hidden sm:inline",
                       children: labels2.export
                     })
                   ]
                 }),
-                /* @__PURE__ */ jsx18(MenubarContent, {
+                /* @__PURE__ */ jsx17(MenubarContent, {
                   align: "end",
                   children: /* @__PURE__ */ jsxs9(MenubarGroup, {
                     children: [
-                      /* @__PURE__ */ jsx18(MenubarLabel, {
+                      /* @__PURE__ */ jsx17(MenubarLabel, {
                         children: labels2.export
                       }),
-                      /* @__PURE__ */ jsx18(MenubarSeparator, {}),
+                      /* @__PURE__ */ jsx17(MenubarSeparator, {}),
                       /* @__PURE__ */ jsxs9(MenubarItem, {
                         onClick: () => downloadCsv(model.visibleColumns.map(columnLabel), exportRows.map((row) => model.visibleColumns.map((column) => String(row.values.get(column.id) ?? ""))), features.export ? features.export.baseName : "table"),
                         children: [
-                          /* @__PURE__ */ jsx18(FileText, {}),
+                          /* @__PURE__ */ jsx17(FileText, {}),
                           labels2.exportCsv
                         ]
                       }),
@@ -2464,7 +2455,7 @@ var DataTableToolbar = ({
                           row.values.get(column.id)
                         ]))), features.export ? features.export.baseName : "table"),
                         children: [
-                          /* @__PURE__ */ jsx18(FileJson, {}),
+                          /* @__PURE__ */ jsx17(FileJson, {}),
                           labels2.exportJson
                         ]
                       })
@@ -2497,14 +2488,14 @@ var SortMenu = ({
       /* @__PURE__ */ jsxs9(MenubarTrigger, {
         "aria-label": store.config.labels.sortBy,
         children: [
-          current ? current.direction === "desc" ? /* @__PURE__ */ jsx18(ArrowDown, {}) : /* @__PURE__ */ jsx18(ArrowUp, {}) : /* @__PURE__ */ jsx18(ChevronsUpDown2, {}),
-          /* @__PURE__ */ jsx18("span", {
+          current ? current.direction === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : /* @__PURE__ */ jsx17(ChevronsUpDown2, {}),
+          /* @__PURE__ */ jsx17("span", {
             className: "hidden sm:inline",
             children: store.config.labels.sortBy
           })
         ]
       }),
-      /* @__PURE__ */ jsx18(MenubarContent, {
+      /* @__PURE__ */ jsx17(MenubarContent, {
         align: "end",
         className: "w-52",
         children: columns.map((column) => {
@@ -2513,7 +2504,7 @@ var SortMenu = ({
             children: [
               /* @__PURE__ */ jsxs9(MenubarSubTrigger, {
                 children: [
-                  sortState ? sortState.direction === "desc" ? /* @__PURE__ */ jsx18(ArrowDown, {}) : /* @__PURE__ */ jsx18(ArrowUp, {}) : null,
+                  sortState ? sortState.direction === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : null,
                   columnLabel(column)
                 ]
               }),
@@ -2522,7 +2513,7 @@ var SortMenu = ({
                   /* @__PURE__ */ jsxs9(MenubarItem, {
                     onClick: () => sort(column.id, "asc"),
                     children: [
-                      /* @__PURE__ */ jsx18(ArrowUp, {}),
+                      /* @__PURE__ */ jsx17(ArrowUp, {}),
                       " ",
                       store.config.labels.sortAsc
                     ]
@@ -2530,21 +2521,21 @@ var SortMenu = ({
                   /* @__PURE__ */ jsxs9(MenubarItem, {
                     onClick: () => sort(column.id, "desc"),
                     children: [
-                      /* @__PURE__ */ jsx18(ArrowDown, {}),
+                      /* @__PURE__ */ jsx17(ArrowDown, {}),
                       " ",
                       store.config.labels.sortDesc
                     ]
                   }),
                   sortState ? /* @__PURE__ */ jsxs9(Fragment, {
                     children: [
-                      /* @__PURE__ */ jsx18(MenubarSeparator, {}),
+                      /* @__PURE__ */ jsx17(MenubarSeparator, {}),
                       /* @__PURE__ */ jsxs9(MenubarItem, {
                         onClick: () => changeState(setStore, (state) => ({
                           ...state,
                           sort: state.sort?.filter(({ id }) => id !== column.id)
                         })),
                         children: [
-                          /* @__PURE__ */ jsx18(X2, {}),
+                          /* @__PURE__ */ jsx17(X2, {}),
                           " ",
                           store.config.labels.sortClear
                         ]
@@ -2569,14 +2560,14 @@ var ViewMenu = ({
       /* @__PURE__ */ jsxs9(MenubarTrigger, {
         "aria-label": store.config.labels.view,
         children: [
-          store.state.view === "gallery" ? /* @__PURE__ */ jsx18(LayoutGrid, {}) : /* @__PURE__ */ jsx18(Rows3, {}),
-          /* @__PURE__ */ jsx18("span", {
+          store.state.view === "gallery" ? /* @__PURE__ */ jsx17(LayoutGrid, {}) : /* @__PURE__ */ jsx17(Rows3, {}),
+          /* @__PURE__ */ jsx17("span", {
             className: "hidden sm:inline",
             children: store.config.labels.view
           })
         ]
       }),
-      /* @__PURE__ */ jsx18(MenubarContent, {
+      /* @__PURE__ */ jsx17(MenubarContent, {
         align: "end",
         children: /* @__PURE__ */ jsxs9(MenubarRadioGroup, {
           onValueChange: (view) => {
@@ -2589,7 +2580,7 @@ var ViewMenu = ({
             /* @__PURE__ */ jsxs9(MenubarRadioItem, {
               value: "table",
               children: [
-                /* @__PURE__ */ jsx18(Rows3, {}),
+                /* @__PURE__ */ jsx17(Rows3, {}),
                 " ",
                 store.config.labels.tableView
               ]
@@ -2597,7 +2588,7 @@ var ViewMenu = ({
             /* @__PURE__ */ jsxs9(MenubarRadioItem, {
               value: "gallery",
               children: [
-                /* @__PURE__ */ jsx18(LayoutGrid, {}),
+                /* @__PURE__ */ jsx17(LayoutGrid, {}),
                 " ",
                 store.config.labels.galleryView
               ]
@@ -2620,22 +2611,22 @@ var ColumnMenu = ({
       /* @__PURE__ */ jsxs9(MenubarTrigger, {
         "aria-label": store.config.labels.columns,
         children: [
-          /* @__PURE__ */ jsx18(Settings2, {}),
-          /* @__PURE__ */ jsx18("span", {
+          /* @__PURE__ */ jsx17(Settings2, {}),
+          /* @__PURE__ */ jsx17("span", {
             className: "hidden sm:inline",
             children: store.config.labels.columns
           })
         ]
       }),
-      /* @__PURE__ */ jsx18(MenubarContent, {
+      /* @__PURE__ */ jsx17(MenubarContent, {
         align: "end",
         children: /* @__PURE__ */ jsxs9(MenubarGroup, {
           children: [
-            /* @__PURE__ */ jsx18(MenubarLabel, {
+            /* @__PURE__ */ jsx17(MenubarLabel, {
               children: store.config.labels.columns
             }),
-            /* @__PURE__ */ jsx18(MenubarSeparator, {}),
-            columns.map((column) => /* @__PURE__ */ jsx18(MenubarCheckboxItem, {
+            /* @__PURE__ */ jsx17(MenubarSeparator, {}),
+            columns.map((column) => /* @__PURE__ */ jsx17(MenubarCheckboxItem, {
               checked: store.state.columnVisibility[column.id] !== false,
               onCheckedChange: (visible) => changeState(setStore, (state) => ({
                 ...state,
@@ -2680,7 +2671,7 @@ var ResizeHandle = ({
     const startWidth = Number(event.currentTarget.dataset.startWidth);
     resize(startWidth + event.clientX - startX);
   };
-  return /* @__PURE__ */ jsx18("button", {
+  return /* @__PURE__ */ jsx17("button", {
     "aria-label": store.config.labels.resizeColumn(columnLabel(column)),
     "aria-orientation": "vertical",
     "aria-valuemax": column.colDef.maxWidth ?? DEFAULT_MAX_WIDTH,
@@ -2801,7 +2792,7 @@ var DragHandle = ({
   };
   return /* @__PURE__ */ jsxs9(Fragment, {
     children: [
-      /* @__PURE__ */ jsx18(Button, {
+      /* @__PURE__ */ jsx17(Button, {
         "aria-label": store.config.features.reordering && store.config.features.reordering.handleLabel ? store.config.features.reordering.handleLabel : store.config.labels.reorder,
         className: "size-8 cursor-grab touch-none active:cursor-grabbing",
         onClick: (event) => event.stopPropagation(),
@@ -2819,9 +2810,9 @@ var DragHandle = ({
         onPointerUp: finish,
         size: "icon",
         variant: "ghost",
-        children: /* @__PURE__ */ jsx18(GripVertical, {})
+        children: /* @__PURE__ */ jsx17(GripVertical, {})
       }),
-      overlay ? createPortal(/* @__PURE__ */ jsx18("div", {
+      overlay ? createPortal(/* @__PURE__ */ jsx17("div", {
         "aria-hidden": "true",
         className: "bg-background pointer-events-none fixed z-[100] rounded-md border px-3 py-2 text-sm shadow-lg",
         style: { left: overlay.x + 12, top: overlay.y + 12 },
@@ -2864,36 +2855,36 @@ var TableDataRow = ({
     },
     tabIndex: store.config.onRowClicked ? 0 : undefined,
     children: [
-      selection ? /* @__PURE__ */ jsx18(TableCell, {
+      selection ? /* @__PURE__ */ jsx17(TableCell, {
         className: "w-10 pr-0",
         onClick: (event) => event.stopPropagation(),
-        children: /* @__PURE__ */ jsx18(Checkbox, {
+        children: /* @__PURE__ */ jsx17(Checkbox, {
           "aria-label": store.config.labels.selectRow,
           checked: !!store.state.rowSelection[row.id],
           disabled: !selectable,
           onCheckedChange: (checked) => toggleRow(store, setStore, row.id, checked)
         })
       }) : null,
-      draggable ? /* @__PURE__ */ jsx18(TableCell, {
+      draggable ? /* @__PURE__ */ jsx17(TableCell, {
         className: "w-10 pr-0",
-        children: /* @__PURE__ */ jsx18(DragHandle, {
+        children: /* @__PURE__ */ jsx17(DragHandle, {
           tableAtom
         })
       }) : null,
-      model.visibleColumns.map((column) => /* @__PURE__ */ jsx18(TableCell, {
-        className: cn("min-w-24 overflow-hidden", column.colDef.truncate ? "whitespace-nowrap" : "whitespace-normal"),
+      model.visibleColumns.map((column) => /* @__PURE__ */ jsx17(TableCell, {
+        className: cn("min-w-24 overflow-hidden has-[[data-slot=data-table-relationship-cell]]:relative has-[[data-slot=data-table-relationship-cell]]:p-0", column.colDef.truncate ? "whitespace-nowrap" : "whitespace-normal"),
         style: { width: column.width },
-        children: /* @__PURE__ */ jsx18("div", {
+        children: /* @__PURE__ */ jsx17("div", {
           className: cn("min-w-0", column.colDef.truncate && "truncate"),
           children: renderCell(row, column)
         })
       }, column.id)),
-      hasRowActionMenu(store) ? /* @__PURE__ */ jsx18(TableCell, {
+      hasRowActionMenu(store) ? /* @__PURE__ */ jsx17(TableCell, {
         className: "bg-background group-data-[state=selected]/row:bg-muted sticky right-0 z-20 w-10 min-w-10 cursor-default p-0 transition-colors group-hover/row:bg-[color-mix(in_oklab,var(--muted)_50%,var(--background))]",
         onClick: (event) => event.stopPropagation(),
-        children: /* @__PURE__ */ jsx18("div", {
+        children: /* @__PURE__ */ jsx17("div", {
           className: "flex h-16 items-center justify-center",
-          children: /* @__PURE__ */ jsx18(DataTableRowActionMenu, {
+          children: /* @__PURE__ */ jsx17(DataTableRowActionMenu, {
             tableAtom
           })
         })
@@ -2911,23 +2902,23 @@ var GroupActions = ({
     return null;
   return /* @__PURE__ */ jsxs9(DropdownMenu, {
     children: [
-      /* @__PURE__ */ jsx18(DropdownMenuTrigger, {
+      /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
         onClick: (event) => event.stopPropagation(),
         render: /* @__PURE__ */ jsxs9(Button, {
           size: "icon",
           variant: "ghost",
           children: [
-            /* @__PURE__ */ jsx18("span", {
+            /* @__PURE__ */ jsx17("span", {
               className: "sr-only",
               children: title
             }),
-            /* @__PURE__ */ jsx18(MoreHorizontal, {})
+            /* @__PURE__ */ jsx17(MoreHorizontal, {})
           ]
         })
       }),
-      /* @__PURE__ */ jsx18(DropdownMenuContent, {
+      /* @__PURE__ */ jsx17(DropdownMenuContent, {
         align: "end",
-        children: /* @__PURE__ */ jsx18(DropdownMenuGroup, {
+        children: /* @__PURE__ */ jsx17(DropdownMenuGroup, {
           children: visible.map((action) => /* @__PURE__ */ jsxs9(DropdownMenuItem, {
             onClick: () => action.onClick(groupId),
             variant: action.variant,
@@ -2963,10 +2954,10 @@ var GroupedTable = ({
       className: "data-[drop-target=true]:outline-primary relative data-[drop-target=true]:z-30 data-[drop-target=true]:outline-2 data-[drop-target=true]:-outline-offset-2 data-[drop-target=true]:[&>tr]:border-transparent data-[drop-target=true]:[&>tr>td:last-child]:z-0",
       "data-table-group": section.field.onMoveToGroup ? targetKey : undefined,
       children: [
-        /* @__PURE__ */ jsx18(TableRow, {
+        /* @__PURE__ */ jsx17(TableRow, {
           className: "bg-muted/40 hover:bg-accent! cursor-pointer",
           onClick: toggleCollapsed,
-          children: /* @__PURE__ */ jsx18(TableCell, {
+          children: /* @__PURE__ */ jsx17(TableCell, {
             colSpan: model.visibleColumns.length + extra,
             children: /* @__PURE__ */ jsxs9("div", {
               className: "flex items-center gap-2",
@@ -2977,22 +2968,22 @@ var GroupedTable = ({
                   className: "flex flex-1 cursor-pointer items-center gap-2 text-left font-medium",
                   type: "button",
                   children: [
-                    collapsed ? /* @__PURE__ */ jsx18(ChevronRight2, {
+                    collapsed ? /* @__PURE__ */ jsx17(ChevronRight2, {
                       className: "size-4"
-                    }) : /* @__PURE__ */ jsx18(ChevronDown, {
+                    }) : /* @__PURE__ */ jsx17(ChevronDown, {
                       className: "size-4"
                     }),
-                    /* @__PURE__ */ jsx18("span", {
+                    /* @__PURE__ */ jsx17("span", {
                       className: "flex-1",
                       children: section.field.renderGroupLabel?.(section.groupId, section.rows.map((row) => row.data)) ?? section.groupId
                     })
                   ]
                 }),
-                /* @__PURE__ */ jsx18(Badge, {
+                /* @__PURE__ */ jsx17(Badge, {
                   variant: "secondary",
                   children: section.rows.length
                 }),
-                /* @__PURE__ */ jsx18(GroupActions, {
+                /* @__PURE__ */ jsx17(GroupActions, {
                   actions: section.field.actions,
                   groupId: section.groupId,
                   title: section.field.actionsLabel ?? store.config.labels.actions
@@ -3001,14 +2992,14 @@ var GroupedTable = ({
             })
           })
         }),
-        !collapsed && !section.children.length ? section.rows.length ? section.rows.map((row) => /* @__PURE__ */ jsx18(RowIdContext.Provider, {
+        !collapsed && !section.children.length ? section.rows.length ? section.rows.map((row) => /* @__PURE__ */ jsx17(RowIdContext.Provider, {
           value: row.id,
-          children: /* @__PURE__ */ jsx18(TableDataRow, {
+          children: /* @__PURE__ */ jsx17(TableDataRow, {
             tableAtom
           })
         }, `${section.key}:${row.id}`)) : [
-          /* @__PURE__ */ jsx18(TableRow, {
-            children: /* @__PURE__ */ jsx18(TableCell, {
+          /* @__PURE__ */ jsx17(TableRow, {
+            children: /* @__PURE__ */ jsx17(TableCell, {
               className: "text-muted-foreground h-16",
               colSpan: model.visibleColumns.length + extra,
               children: section.field.renderEmptyGroup?.(section.groupId) ?? store.config.labels.empty
@@ -3019,7 +3010,7 @@ var GroupedTable = ({
     }, section.key);
     return !collapsed && section.children.length ? [body, renderSections(section.children)] : [body];
   });
-  return /* @__PURE__ */ jsx18(Fragment, {
+  return /* @__PURE__ */ jsx17(Fragment, {
     children: renderSections(sections)
   });
 };
@@ -3042,29 +3033,29 @@ var ColumnHeaderMenu = ({
   }));
   const label = columnLabel(column);
   if (!sortingEnabled && !hidingEnabled) {
-    return /* @__PURE__ */ jsx18("div", {
+    return /* @__PURE__ */ jsx17("div", {
       className: "truncate",
       children: column.colDef.headerName
     });
   }
   return /* @__PURE__ */ jsxs9(DropdownMenu, {
     children: [
-      /* @__PURE__ */ jsx18(DropdownMenuTrigger, {
+      /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
         render: /* @__PURE__ */ jsxs9(Button, {
           "aria-label": label,
           className: "h-8 max-w-full justify-start px-2",
           size: "sm",
           variant: "ghost",
           children: [
-            /* @__PURE__ */ jsx18("span", {
+            /* @__PURE__ */ jsx17("span", {
               className: "truncate",
               children: column.colDef.headerName
             }),
-            sort ? sort.direction === "desc" ? /* @__PURE__ */ jsx18(ArrowDown, {}) : /* @__PURE__ */ jsx18(ArrowUp, {}) : sortingEnabled ? /* @__PURE__ */ jsx18(ChevronsUpDown2, {}) : null
+            sort ? sort.direction === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : sortingEnabled ? /* @__PURE__ */ jsx17(ChevronsUpDown2, {}) : null
           ]
         })
       }),
-      /* @__PURE__ */ jsx18(DropdownMenuContent, {
+      /* @__PURE__ */ jsx17(DropdownMenuContent, {
         align: "start",
         className: "w-48",
         children: /* @__PURE__ */ jsxs9(DropdownMenuGroup, {
@@ -3074,7 +3065,7 @@ var ColumnHeaderMenu = ({
                 /* @__PURE__ */ jsxs9(DropdownMenuItem, {
                   onClick: () => setSort("asc"),
                   children: [
-                    /* @__PURE__ */ jsx18(ArrowUp, {}),
+                    /* @__PURE__ */ jsx17(ArrowUp, {}),
                     " ",
                     store.config.labels.sortAsc
                   ]
@@ -3082,7 +3073,7 @@ var ColumnHeaderMenu = ({
                 /* @__PURE__ */ jsxs9(DropdownMenuItem, {
                   onClick: () => setSort("desc"),
                   children: [
-                    /* @__PURE__ */ jsx18(ArrowDown, {}),
+                    /* @__PURE__ */ jsx17(ArrowDown, {}),
                     " ",
                     store.config.labels.sortDesc
                   ]
@@ -3093,14 +3084,14 @@ var ColumnHeaderMenu = ({
                     sort: state.sort?.filter(({ id }) => id !== column.id)
                   })),
                   children: [
-                    /* @__PURE__ */ jsx18(X2, {}),
+                    /* @__PURE__ */ jsx17(X2, {}),
                     " ",
                     store.config.labels.sortClear
                   ]
                 }) : null
               ]
             }) : null,
-            sortingEnabled && hidingEnabled ? /* @__PURE__ */ jsx18(DropdownMenuSeparator, {}) : null,
+            sortingEnabled && hidingEnabled ? /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}) : null,
             hidingEnabled ? /* @__PURE__ */ jsxs9(DropdownMenuItem, {
               onClick: () => update((state) => ({
                 ...state,
@@ -3110,7 +3101,7 @@ var ColumnHeaderMenu = ({
                 }
               })),
               children: [
-                /* @__PURE__ */ jsx18(EyeOff, {}),
+                /* @__PURE__ */ jsx17(EyeOff, {}),
                 " ",
                 store.config.labels.hideColumn
               ]
@@ -3132,12 +3123,12 @@ var DataTableHeader = ({
   const selectableRows = getDataTableSelectableRows(model, grouped, selection ? selection.isRowSelectable : undefined);
   const allSelected = selectableRows.length > 0 && selectableRows.every((row) => store.state.rowSelection[row.id]);
   const someSelected = selectableRows.some((row) => store.state.rowSelection[row.id]);
-  return /* @__PURE__ */ jsx18(TableHeader, {
+  return /* @__PURE__ */ jsx17(TableHeader, {
     children: /* @__PURE__ */ jsxs9(TableRow, {
       children: [
-        selection ? /* @__PURE__ */ jsx18(TableHead, {
+        selection ? /* @__PURE__ */ jsx17(TableHead, {
           className: "w-10 pr-0",
-          children: /* @__PURE__ */ jsx18(Checkbox, {
+          children: /* @__PURE__ */ jsx17(Checkbox, {
             "aria-label": store.config.labels.selectAllRows,
             checked: allSelected,
             indeterminate: someSelected && !allSelected,
@@ -3151,27 +3142,27 @@ var DataTableHeader = ({
             }
           })
         }) : null,
-        draggable ? /* @__PURE__ */ jsx18(TableHead, {
+        draggable ? /* @__PURE__ */ jsx17(TableHead, {
           className: "w-10"
         }) : null,
         model.visibleColumns.map((column) => {
-          return /* @__PURE__ */ jsx18(TableHead, {
+          return /* @__PURE__ */ jsx17(TableHead, {
             className: "relative h-12",
             style: { width: column.width },
             children: /* @__PURE__ */ jsxs9(ColumnIdContext.Provider, {
               value: column.id,
               children: [
-                /* @__PURE__ */ jsx18(ColumnHeaderMenu, {
+                /* @__PURE__ */ jsx17(ColumnHeaderMenu, {
                   tableAtom
                 }),
-                /* @__PURE__ */ jsx18(ResizeHandle, {
+                /* @__PURE__ */ jsx17(ResizeHandle, {
                   tableAtom
                 })
               ]
             })
           }, column.id);
         }),
-        hasRowActionMenu(store) ? /* @__PURE__ */ jsx18(TableHead, {
+        hasRowActionMenu(store) ? /* @__PURE__ */ jsx17(TableHead, {
           className: "w-10"
         }) : null
       ]
@@ -3187,28 +3178,28 @@ var DataTableBody = ({
   const rows = grouped ? model.sortedRows : model.pageRows;
   const colSpan = model.visibleColumns.length + (store.config.features.selection ? 1 : 0) + (hasRowActionMenu(store) ? 1 : 0) + (canDragRows(store) ? 1 : 0);
   if (grouped && rows.length && !store.config.status.error) {
-    return /* @__PURE__ */ jsx18(GroupedTable, {
+    return /* @__PURE__ */ jsx17(GroupedTable, {
       tableAtom
     });
   }
-  return /* @__PURE__ */ jsx18(TableBody, {
-    children: store.config.status.error || !rows.length && !store.config.status.loading ? /* @__PURE__ */ jsx18(TableRow, {
-      children: /* @__PURE__ */ jsx18(TableCell, {
+  return /* @__PURE__ */ jsx17(TableBody, {
+    children: store.config.status.error || !rows.length && !store.config.status.loading ? /* @__PURE__ */ jsx17(TableRow, {
+      children: /* @__PURE__ */ jsx17(TableCell, {
         className: "h-24 text-center",
         colSpan: Math.max(colSpan, 1),
         children: store.config.status.error ?? store.config.status.empty ?? store.config.labels.empty
       })
-    }) : store.config.status.loading && !rows.length ? /* @__PURE__ */ jsx18(TableRow, {
-      children: /* @__PURE__ */ jsx18(TableCell, {
+    }) : store.config.status.loading && !rows.length ? /* @__PURE__ */ jsx17(TableRow, {
+      children: /* @__PURE__ */ jsx17(TableCell, {
         className: "h-24 text-center",
         colSpan: Math.max(colSpan, 1),
-        children: /* @__PURE__ */ jsx18(Loading, {
+        children: /* @__PURE__ */ jsx17(Loading, {
           label: store.config.labels.loading
         })
       })
-    }) : rows.map((row) => /* @__PURE__ */ jsx18(RowIdContext.Provider, {
+    }) : rows.map((row) => /* @__PURE__ */ jsx17(RowIdContext.Provider, {
       value: row.id,
-      children: /* @__PURE__ */ jsx18(TableDataRow, {
+      children: /* @__PURE__ */ jsx17(TableDataRow, {
         tableAtom
       })
     }, row.id))
@@ -3231,7 +3222,7 @@ var GalleryCard = ({
   const selection = store.config.features.selection;
   const selectable = !!selection && (selection.isRowSelectable?.(row.data) ?? true);
   const draggable = canDragRows(store);
-  return /* @__PURE__ */ jsx18(Card, {
+  return /* @__PURE__ */ jsx17(Card, {
     className: cn("relative gap-3 data-[drag-source=true]:opacity-40 data-[drop-position=before]:border-t-2 data-[drop-position=before]:border-t-primary data-[drop-position=after]:border-b-2 data-[drop-position=after]:border-b-primary", store.config.onRowClicked && "cursor-pointer"),
     "data-table-row": row.id,
     onClick: () => store.config.onRowClicked?.(row.data),
@@ -3248,14 +3239,14 @@ var GalleryCard = ({
         /* @__PURE__ */ jsxs9("div", {
           className: "flex items-center gap-2",
           children: [
-            selection ? /* @__PURE__ */ jsx18(Checkbox, {
+            selection ? /* @__PURE__ */ jsx17(Checkbox, {
               "aria-label": store.config.labels.selectRow,
               checked: !!store.state.rowSelection[row.id],
               disabled: !selectable,
               onCheckedChange: (checked) => toggleRow(store, setStore, row.id, checked),
               onClick: (event) => event.stopPropagation()
             }) : null,
-            draggable ? /* @__PURE__ */ jsx18(DragHandle, {
+            draggable ? /* @__PURE__ */ jsx17(DragHandle, {
               tableAtom
             }) : null,
             tag ? /* @__PURE__ */ jsxs9(Badge, {
@@ -3267,17 +3258,17 @@ var GalleryCard = ({
             }) : null
           ]
         }),
-        /* @__PURE__ */ jsx18(CardTitle, {
+        /* @__PURE__ */ jsx17(CardTitle, {
           children: name ? renderCell(row, name) : row.id
         }),
-        description ? /* @__PURE__ */ jsx18("div", {
+        description ? /* @__PURE__ */ jsx17("div", {
           className: "text-muted-foreground line-clamp-3 text-sm",
           children: renderCell(row, description)
         }) : null,
-        hasRowActionMenu(store) ? /* @__PURE__ */ jsx18("div", {
+        hasRowActionMenu(store) ? /* @__PURE__ */ jsx17("div", {
           className: "absolute top-4 right-4",
           onClick: (event) => event.stopPropagation(),
-          children: /* @__PURE__ */ jsx18(DataTableRowActionMenu, {
+          children: /* @__PURE__ */ jsx17(DataTableRowActionMenu, {
             tableAtom
           })
         }) : null
@@ -3293,31 +3284,31 @@ var DataTableGallery = ({
   const fields = getActiveGrouping(store);
   const rows = fields.length ? model.sortedRows : model.pageRows;
   if (store.config.status.error) {
-    return /* @__PURE__ */ jsx18("div", {
+    return /* @__PURE__ */ jsx17("div", {
       className: "text-destructive rounded-lg border border-dashed p-10 text-center",
       children: store.config.status.error
     });
   }
   if (store.config.status.loading && !rows.length) {
-    return /* @__PURE__ */ jsx18("div", {
+    return /* @__PURE__ */ jsx17("div", {
       className: "rounded-lg border border-dashed p-10 text-center",
-      children: /* @__PURE__ */ jsx18(Loading, {
+      children: /* @__PURE__ */ jsx17(Loading, {
         label: store.config.labels.loading
       })
     });
   }
   if (!rows.length) {
-    return /* @__PURE__ */ jsx18("div", {
+    return /* @__PURE__ */ jsx17("div", {
       className: "text-muted-foreground rounded-lg border border-dashed p-10 text-center",
       children: store.config.status.empty ?? store.config.labels.empty
     });
   }
   if (!fields.length) {
-    return /* @__PURE__ */ jsx18("div", {
+    return /* @__PURE__ */ jsx17("div", {
       className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-3",
-      children: rows.map((row) => /* @__PURE__ */ jsx18(RowIdContext.Provider, {
+      children: rows.map((row) => /* @__PURE__ */ jsx17(RowIdContext.Provider, {
         value: row.id,
-        children: /* @__PURE__ */ jsx18(GalleryCard, {
+        children: /* @__PURE__ */ jsx17(GalleryCard, {
           tableAtom
         })
       }, row.id))
@@ -3346,44 +3337,44 @@ var DataTableGallery = ({
               className: "flex flex-1 cursor-pointer items-center gap-2 text-left font-medium",
               type: "button",
               children: [
-                collapsed ? /* @__PURE__ */ jsx18(ChevronRight2, {
+                collapsed ? /* @__PURE__ */ jsx17(ChevronRight2, {
                   className: "size-4"
-                }) : /* @__PURE__ */ jsx18(ChevronDown, {
+                }) : /* @__PURE__ */ jsx17(ChevronDown, {
                   className: "size-4"
                 }),
-                /* @__PURE__ */ jsx18("span", {
+                /* @__PURE__ */ jsx17("span", {
                   className: "flex-1",
                   children: section.field.renderGroupLabel?.(section.groupId, section.rows.map((row) => row.data)) ?? section.groupId
                 }),
-                /* @__PURE__ */ jsx18(Badge, {
+                /* @__PURE__ */ jsx17(Badge, {
                   variant: "secondary",
                   children: section.rows.length
                 })
               ]
             }),
-            /* @__PURE__ */ jsx18(GroupActions, {
+            /* @__PURE__ */ jsx17(GroupActions, {
               actions: section.field.actions,
               groupId: section.groupId,
               title: section.field.actionsLabel ?? store.config.labels.actions
             })
           ]
         }),
-        !collapsed ? section.children.length ? renderSections(section.children) : section.rows.length ? /* @__PURE__ */ jsx18("div", {
+        !collapsed ? section.children.length ? renderSections(section.children) : section.rows.length ? /* @__PURE__ */ jsx17("div", {
           className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-3",
-          children: section.rows.map((row) => /* @__PURE__ */ jsx18(RowIdContext.Provider, {
+          children: section.rows.map((row) => /* @__PURE__ */ jsx17(RowIdContext.Provider, {
             value: row.id,
-            children: /* @__PURE__ */ jsx18(GalleryCard, {
+            children: /* @__PURE__ */ jsx17(GalleryCard, {
               tableAtom
             })
           }, `${section.key}:${row.id}`))
-        }) : /* @__PURE__ */ jsx18("div", {
+        }) : /* @__PURE__ */ jsx17("div", {
           className: "text-muted-foreground rounded-lg border border-dashed p-8 text-center",
           children: section.field.renderEmptyGroup?.(section.groupId) ?? store.config.labels.empty
         }) : null
       ]
     }, section.key);
   });
-  return /* @__PURE__ */ jsx18("div", {
+  return /* @__PURE__ */ jsx17("div", {
     className: "space-y-4",
     children: renderSections(groupDataTableRows(rows, fields))
   });
@@ -3410,9 +3401,9 @@ var DataTablePagination = ({
     return null;
   const selected = model.rows.filter((row) => store.state.rowSelection[row.id]).length;
   const setPagination = (next) => changeState(setStore, (state) => ({ ...state, ...next }));
-  return /* @__PURE__ */ jsx18("div", {
+  return /* @__PURE__ */ jsx17("div", {
     className: "pt-4",
-    children: /* @__PURE__ */ jsx18(Pagination, {
+    children: /* @__PURE__ */ jsx17(Pagination, {
       messages: store.config.labels,
       onPageChange: (page) => setPagination({ page, pageSize: store.state.pageSize }),
       onPageSizeChange: (pageSize) => setPagination({ page: 0, pageSize }),
@@ -3504,13 +3495,13 @@ var HydratedDataTable = ({
     className: "w-full max-w-full min-w-0 rounded-md",
     "data-table-root": "",
     children: [
-      /* @__PURE__ */ jsx18(DataTableToolbar, {
+      /* @__PURE__ */ jsx17(DataTableToolbar, {
         tableAtom
       }),
-      /* @__PURE__ */ jsx18(DataTableContent, {
+      /* @__PURE__ */ jsx17(DataTableContent, {
         tableAtom
       }),
-      /* @__PURE__ */ jsx18(DataTablePagination, {
+      /* @__PURE__ */ jsx17(DataTablePagination, {
         tableAtom
       })
     ]
@@ -3532,13 +3523,13 @@ var DataTable = (props) => {
   }
   const [persistedUiResult, setPersistedUiState] = useAtom(persistedUiAtomRef.current);
   if (!AsyncResult.isSuccess(persistedUiResult) || AsyncResult.isWaiting(persistedUiResult)) {
-    return /* @__PURE__ */ jsx18("div", {
+    return /* @__PURE__ */ jsx17("div", {
       "aria-busy": "true",
       className: "invisible w-full max-w-full min-w-0 rounded-md",
       "data-table-root": ""
     });
   }
-  return /* @__PURE__ */ jsx18(HydratedDataTable, {
+  return /* @__PURE__ */ jsx17(HydratedDataTable, {
     ...props,
     persistedUiState: persistedUiResult.value,
     setPersistedUiState
@@ -3549,7 +3540,7 @@ var DataTableContent = ({
 }) => {
   const [store] = useTableAtom(tableAtom);
   if (store.config.features.gallery && store.state.view === "gallery") {
-    return /* @__PURE__ */ jsx18(DataTableGallery, {
+    return /* @__PURE__ */ jsx17(DataTableGallery, {
       tableAtom
     });
   }
@@ -3562,15 +3553,15 @@ var DataTableContent = ({
         className: "table-fixed",
         style: { width: `max(100%, ${width}px)` },
         children: [
-          /* @__PURE__ */ jsx18(DataTableHeader, {
+          /* @__PURE__ */ jsx17(DataTableHeader, {
             tableAtom
           }),
-          /* @__PURE__ */ jsx18(DataTableBody, {
+          /* @__PURE__ */ jsx17(DataTableBody, {
             tableAtom
           })
         ]
       }),
-      /* @__PURE__ */ jsx18(ScrollBar, {
+      /* @__PURE__ */ jsx17(ScrollBar, {
         orientation: "horizontal"
       })
     ]
@@ -3587,33 +3578,39 @@ var DataTableRelationshipCell = ({
   const [selected, setSelected] = useState([...value]);
   useLayoutEffect(() => setSelected([...value]), [value]);
   const selectedValues = new Set(selected.map((item) => item.value));
-  return /* @__PURE__ */ jsx18(VirtualizedCombobox, {
-    ariaLabel: manageLabel,
-    emptyLabel,
-    items: [...options].sort((left, right) => Number(selectedValues.has(right.value)) - Number(selectedValues.has(left.value))),
-    messages: { search: manageLabel },
-    multiple: true,
-    onValueChange: (next) => {
-      const nextValues = new Set(next.map((item) => item.value));
-      selected.forEach((item) => !nextValues.has(item.value) && onRemove?.(item.value));
-      next.forEach((item) => !selectedValues.has(item.value) && onAdd?.(item.value));
-      setSelected(next);
-    },
-    placeholder: emptyLabel,
-    trigger: /* @__PURE__ */ jsxs9(Button, {
-      className: "h-full min-h-16 w-full justify-between rounded-none",
-      variant: "ghost",
-      children: [
-        /* @__PURE__ */ jsx18(DataTableListSummary, {
-          emptyLabel,
-          expandable: false,
-          items: selected,
-          variant: selected.some((item) => item.icon) ? "icon" : "text"
-        }),
-        /* @__PURE__ */ jsx18(ChevronDown, {})
-      ]
-    }),
-    value: selected
+  return /* @__PURE__ */ jsx17("div", {
+    "data-slot": "data-table-relationship-cell",
+    className: "h-full in-[[data-slot=table-cell]]:absolute in-[[data-slot=table-cell]]:inset-0",
+    onClick: (event) => event.stopPropagation(),
+    onPointerDown: (event) => event.stopPropagation(),
+    children: /* @__PURE__ */ jsx17(VirtualizedCombobox, {
+      ariaLabel: manageLabel,
+      emptyLabel,
+      items: [...options].sort((left, right) => Number(selectedValues.has(right.value)) - Number(selectedValues.has(left.value))),
+      messages: { search: manageLabel },
+      multiple: true,
+      onValueChange: (next) => {
+        const nextValues = new Set(next.map((item) => item.value));
+        selected.forEach((item) => !nextValues.has(item.value) && onRemove?.(item.value));
+        next.forEach((item) => !selectedValues.has(item.value) && onAdd?.(item.value));
+        setSelected(next);
+      },
+      placeholder: emptyLabel,
+      trigger: /* @__PURE__ */ jsxs9(Button, {
+        className: "h-full min-h-16 w-full justify-between rounded-none",
+        variant: "ghost",
+        children: [
+          /* @__PURE__ */ jsx17(DataTableListSummary, {
+            emptyLabel,
+            expandable: false,
+            items: selected,
+            variant: selected.some((item) => item.icon) ? "icon" : "text"
+          }),
+          /* @__PURE__ */ jsx17(ChevronDown, {})
+        ]
+      }),
+      value: selected
+    })
   });
 };
 var DataTableListSummary = ({
@@ -3628,13 +3625,13 @@ var DataTableListSummary = ({
   const labels2 = dataTableMessages();
   const normalized = items.map((item) => Schema.is(Schema.String)(item) ? { label: item } : item);
   if (!normalized.length)
-    return /* @__PURE__ */ jsx18("span", {
+    return /* @__PURE__ */ jsx17("span", {
       className: "text-muted-foreground",
       children: emptyLabel
     });
   const visible = normalized.slice(0, visibleCount);
   const remaining = Math.max(totalCount - visible.length, 0);
-  const details = /* @__PURE__ */ jsx18(PopoverContent, {
+  const details = /* @__PURE__ */ jsx17(PopoverContent, {
     align: "start",
     className: "max-h-72 w-72 overflow-y-auto p-2",
     children: normalized.map((item, index) => /* @__PURE__ */ jsxs9("div", {
@@ -3646,27 +3643,27 @@ var DataTableListSummary = ({
     }, item.value ?? `${item.label}-${index}`))
   });
   if (variant === "icon") {
-    return /* @__PURE__ */ jsx18(TooltipProvider, {
+    return /* @__PURE__ */ jsx17(TooltipProvider, {
       children: /* @__PURE__ */ jsxs9("span", {
         className: "flex items-center",
         children: [
           visible.map((item) => /* @__PURE__ */ jsxs9(Tooltip, {
             children: [
-              /* @__PURE__ */ jsx18(TooltipTrigger, {
-                render: /* @__PURE__ */ jsx18("span", {
+              /* @__PURE__ */ jsx17(TooltipTrigger, {
+                render: /* @__PURE__ */ jsx17("span", {
                   "aria-label": item.label,
                   className: "bg-muted -ml-1 flex size-8 items-center justify-center rounded-full",
                   children: item.icon ?? item.label.slice(0, 2).toUpperCase()
                 })
               }),
-              /* @__PURE__ */ jsx18(TooltipContent, {
+              /* @__PURE__ */ jsx17(TooltipContent, {
                 children: item.label
               })
             ]
           }, item.value ?? item.label)),
           remaining && expandable ? /* @__PURE__ */ jsxs9(Popover, {
             children: [
-              /* @__PURE__ */ jsx18(PopoverTrigger, {
+              /* @__PURE__ */ jsx17(PopoverTrigger, {
                 render: /* @__PURE__ */ jsxs9("button", {
                   "aria-label": labels2.listOthers(remaining),
                   className: "bg-muted -ml-1 flex size-8 items-center justify-center rounded-full",
@@ -3698,8 +3695,8 @@ var DataTableListSummary = ({
   });
   return remaining && expandable ? /* @__PURE__ */ jsxs9(Popover, {
     children: [
-      /* @__PURE__ */ jsx18(PopoverTrigger, {
-        render: /* @__PURE__ */ jsx18("button", {
+      /* @__PURE__ */ jsx17(PopoverTrigger, {
+        render: /* @__PURE__ */ jsx17("button", {
           className: "text-left text-sm",
           type: "button",
           children: summary
@@ -3707,26 +3704,26 @@ var DataTableListSummary = ({
       }),
       details
     ]
-  }) : /* @__PURE__ */ jsx18("span", {
+  }) : /* @__PURE__ */ jsx17("span", {
     className: "text-sm",
     children: summary
   });
 };
 export {
-  sortDataTableRows,
-  reorderDataTableRows,
-  paginateDataTableRows,
-  normalizeDataTableColumns,
-  groupDataTableRows,
-  getDataTableWidth,
-  getDataTableSelectableRows,
-  filterDataTableRows,
-  downloadJson,
-  downloadCsv,
-  dataTableMessages,
-  buildDataTableRows,
-  DataTableRowActions,
-  DataTableRelationshipCell,
+  DataTable,
   DataTableListSummary,
-  DataTable
+  DataTableRelationshipCell,
+  DataTableRowActions,
+  buildDataTableRows,
+  dataTableMessages,
+  downloadCsv,
+  downloadJson,
+  filterDataTableRows,
+  getDataTableSelectableRows,
+  getDataTableWidth,
+  groupDataTableRows,
+  normalizeDataTableColumns,
+  paginateDataTableRows,
+  reorderDataTableRows,
+  sortDataTableRows
 };