@crisp-ui-kit/crisp 0.31.5 → 0.32.0

package/dist/cjs/product/recordpanel/recordpanel.recipe.js

@@ -21,24 +21,24 @@ const config = (0, core_1.defineRecipe)({
     @starting-style { transform: translateX(calc(100% + ${tokens_1.contract.space["2"]})); }
     & * { box-sizing: border-box; }
 
-    & .recordpanel-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
-    & .recordpanel-fav { width: 22px; height: ${tokens_1.contract.size.chip}; border-radius: ${tokens_1.contract.radius.sm}; flex-shrink: 0; object-fit: cover; background: ${tokens_1.contract.bgRaised}; }
-    & .recordpanel-title { flex: 1; min-width: 0; font-size: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.2px; color: ${tokens_1.contract.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .recordpanel-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s; }
-    & .recordpanel-iconbtn:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpanel-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-recordpanel-fav { width: 22px; height: ${tokens_1.contract.size.chip}; border-radius: ${tokens_1.contract.radius.sm}; flex-shrink: 0; object-fit: cover; background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-recordpanel-title { flex: 1; min-width: 0; font-size: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.2px; color: ${tokens_1.contract.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-recordpanel-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s; }
+    & .crisp-recordpanel-iconbtn:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
 
-    & .recordpanel-body { flex: 1; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["3"]}; }
-    & .recordpanel-sectionlabel { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]}; }
-    & .recordpanel-field { display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2"]}; min-height: 32px; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.md}; }
-    & .recordpanel-field:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 3%, transparent); }
-    & .recordpanel-field-label { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 132px; flex-shrink: 0; padding-top: 3px; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.md}; }
-    & .recordpanel-field-label svg { flex-shrink: 0; }
-    & .recordpanel-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: ${tokens_1.contract.space["1"]}; padding-top: 3px; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
-    & .recordpanel-empty { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpanel-body { flex: 1; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["3"]}; }
+    & .crisp-recordpanel-sectionlabel { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]}; }
+    & .crisp-recordpanel-field { display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2"]}; min-height: 32px; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.md}; }
+    & .crisp-recordpanel-field:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 3%, transparent); }
+    & .crisp-recordpanel-field-label { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 132px; flex-shrink: 0; padding-top: 3px; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.md}; }
+    & .crisp-recordpanel-field-label svg { flex-shrink: 0; }
+    & .crisp-recordpanel-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: ${tokens_1.contract.space["1"]}; padding-top: 3px; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpanel-empty { color: ${tokens_1.contract.fgMuted}; }
 
     ${recordstable_tag_1.recordTagCss}
-    & .recordpanel-link { color: ${tokens_1.contract.bgBrandSolid}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
-    & .recordpanel-link:hover { text-decoration: underline; }
+    & .crisp-recordpanel-link { color: ${tokens_1.contract.bgBrandSolid}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-recordpanel-link:hover { text-decoration: underline; }
   `,
     variants: {},
     defaultVariants: {},

package/dist/cjs/product/recordstable/recordstable.js

@@ -257,10 +257,10 @@ function EntityCell({ value, pinned, onOpenPage, avatarTone = "brand", labels, }
     // 404s or the row has no avatar
     const [imgFailed, setImgFailed] = React.useState(false);
     const showImg = Boolean(value.avatar) && !imgFailed;
-    return ((0, jsx_runtime_1.jsxs)("span", { className: "recordstable-entity", children: [showImg ? ((0, jsx_runtime_1.jsx)("img", { className: "recordstable-fav", src: value.avatar, alt: "", onError: () => setImgFailed(true) })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "rounded", tone: avatarTone === "hashed" ? avatarToneFor(value.name) : "brand", children: value.name.charAt(0) })), onOpenPage ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordstable-entity-name recordstable-entity-name--link", onClick: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordstable-entity", children: [showImg ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordstable-fav", src: value.avatar, alt: "", onError: () => setImgFailed(true) })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "rounded", tone: avatarTone === "hashed" ? avatarToneFor(value.name) : "brand", children: value.name.charAt(0) })), onOpenPage ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordstable-entity-name crisp-recordstable-entity-name--link", onClick: (e) => {
                     e.stopPropagation();
                     onOpenPage();
-                }, children: value.name })) : ((0, jsx_runtime_1.jsx)("span", { className: "recordstable-entity-name", children: value.name })), pinned ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Star, { className: "recordstable-pin", size: 13, strokeWidth: 2, "aria-label": labels.inAList })) : null] }));
+                }, children: value.name })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-entity-name", children: value.name })), pinned ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Star, { className: "crisp-recordstable-pin", size: 13, strokeWidth: 2, "aria-label": labels.inAList })) : null] }));
 }
 function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", labels, }) {
     const value = row[column.key];
@@ -272,7 +272,7 @@ function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", label
     if (value == null ||
         value === "" ||
         (Array.isArray(value) && !value.length)) {
-        return (0, jsx_runtime_1.jsx)("span", { className: "recordstable-muted", children: "\u2014" });
+        return (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-muted", children: "\u2014" });
     }
     // `format` keeps the type renderer's chrome below and only replaces the
     // text it displays.
@@ -281,32 +281,32 @@ function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", label
         case "entity":
             return ((0, jsx_runtime_1.jsx)(EntityCell, { labels: labels, value: value, pinned: pinned, onOpenPage: onOpenPage, avatarTone: avatarTone }));
         case "tags":
-            return ((0, jsx_runtime_1.jsx)("span", { className: "recordstable-cell recordstable-cell--tags", children: value.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "recordstable-tag", "data-tone": tagTone(t), children: t }, t))) }));
+            return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-cell crisp-recordstable-cell--tags", children: value.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-tag", "data-tone": tagTone(t), children: t }, t))) }));
         case "number":
-            return ((0, jsx_runtime_1.jsx)("span", { className: "recordstable-cell recordstable-cell--num", children: display ??
+            return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-cell crisp-recordstable-cell--num", children: display ??
                     (typeof value === "number" ? value.toLocaleString() : value) }));
         case "url":
-            return ((0, jsx_runtime_1.jsx)("a", { className: "recordstable-link", href: `https://${value}`, target: "_blank", rel: "noreferrer", onClick: (e) => e.stopPropagation(), children: display ?? value }));
+            return ((0, jsx_runtime_1.jsx)("a", { className: "crisp-recordstable-link", href: `https://${value}`, target: "_blank", rel: "noreferrer", onClick: (e) => e.stopPropagation(), children: display ?? value }));
         case "date":
-            return (0, jsx_runtime_1.jsx)("span", { className: "recordstable-muted", children: display ?? value });
+            return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-muted", children: display ?? value }));
         case "currency": {
             const n = typeof value === "number" ? value : Number(value);
-            return ((0, jsx_runtime_1.jsx)("span", { className: "recordstable-cell recordstable-cell--num", children: display ??
+            return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-cell crisp-recordstable-cell--num", children: display ??
                     `${column.symbol ?? "$"}${Number.isFinite(n) ? n.toLocaleString() : value}` }));
         }
         case "status": {
             const opt = column.options?.find((o) => o.value === value);
             if (!opt)
-                return (0, jsx_runtime_1.jsx)("span", { className: "recordstable-muted", children: "\u2014" });
-            return ((0, jsx_runtime_1.jsxs)("span", { className: "recordstable-status", children: [(0, jsx_runtime_1.jsx)("span", { className: "recordstable-status-dot", style: { background: opt.color } }), display ?? opt.label] }));
+                return (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-muted", children: "\u2014" });
+            return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordstable-status", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-status-dot", style: { background: opt.color } }), display ?? opt.label] }));
         }
         case "reference": {
             const opt = column.refOptions?.find((o) => o.value === value);
             const label = display ?? opt?.label ?? String(value);
-            return ((0, jsx_runtime_1.jsxs)("span", { className: "recordstable-entity", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "rounded", tone: avatarTone === "hashed" ? avatarToneFor(label) : "brand", children: label.charAt(0) }), (0, jsx_runtime_1.jsx)("span", { className: "recordstable-entity-name", children: label })] }));
+            return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordstable-entity", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "rounded", tone: avatarTone === "hashed" ? avatarToneFor(label) : "brand", children: label.charAt(0) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-entity-name", children: label })] }));
         }
         default:
-            return ((0, jsx_runtime_1.jsx)("span", { className: "recordstable-entity-name", children: display ?? value }));
+            return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-entity-name", children: display ?? value }));
     }
 }
 // Always-interactive cell editors for the picker column types (status / date /
@@ -412,10 +412,10 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
     };
     const entityCol = columns.find((c) => c.type === "entity");
     const EntityIcon = entityCol?.icon;
-    return ((0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { open: open, onOpenChange: onOpenChange, title: labels.newRecordTitle(entityLabel), icon: EntityIcon ? (0, jsx_runtime_1.jsx)(EntityIcon, { size: 16, strokeWidth: 1.75 }) : undefined, width: 720, children: [(0, jsx_runtime_1.jsx)(dialog_1.DialogBody, { children: columns.map((col, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "dialog-field", children: [(0, jsx_runtime_1.jsx)("label", { className: "dialog-field-label", htmlFor: `create-${col.key}`, children: col.label }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: `create-${col.key}`, ref: i === 0 ? firstRef : undefined, value: values[col.key] ?? "", onChange: (e) => set(col.key, e.currentTarget.value), placeholder: labels.setFieldPlaceholder(col.label), onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { open: open, onOpenChange: onOpenChange, title: labels.newRecordTitle(entityLabel), icon: EntityIcon ? (0, jsx_runtime_1.jsx)(EntityIcon, { size: 16, strokeWidth: 1.75 }) : undefined, width: 720, children: [(0, jsx_runtime_1.jsx)(dialog_1.DialogBody, { children: columns.map((col, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-dialog-field", children: [(0, jsx_runtime_1.jsx)("label", { className: "crisp-dialog-field-label", htmlFor: `create-${col.key}`, children: col.label }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: `create-${col.key}`, ref: i === 0 ? firstRef : undefined, value: values[col.key] ?? "", onChange: (e) => set(col.key, e.currentTarget.value), placeholder: labels.setFieldPlaceholder(col.label), onKeyDown: (e) => {
                                 if (e.key === "Enter" && (e.metaKey || e.ctrlKey))
                                     submit();
-                            } })] }, col.key))) }), (0, jsx_runtime_1.jsxs)(dialog_1.DialogFooter, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "dialog-more", children: [labels.createMore, (0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "dialog-submit", onClick: submit, children: [labels.createRecord, (0, jsx_runtime_1.jsx)("span", { className: "dialog-submit-key", children: "\u2318\u21B5" })] })] })] }));
+                            } })] }, col.key))) }), (0, jsx_runtime_1.jsxs)(dialog_1.DialogFooter, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-dialog-more", children: [labels.createMore, (0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-dialog-submit", onClick: submit, children: [labels.createRecord, (0, jsx_runtime_1.jsx)("span", { className: "crisp-dialog-submit-key", children: "\u2318\u21B5" })] })] })] }));
 }
 /**
  * A measured-style record grid — fully featured. Toolbar (search / sort status /
@@ -489,7 +489,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
         const onWheel = (e) => {
             // don't hijack the wheel when it's over an open cell popover (its own list
             // scrolls) — only map vertical wheel to horizontal for the table itself
-            if (e.target?.closest?.(".select-listbox, .multiselect-listbox, .datepicker-cal, .recordstable-menu"))
+            if (e.target?.closest?.(".crisp-select-listbox, .crisp-multiselect-listbox, .datepicker-cal, .crisp-recordstable-menu"))
                 return;
             const canH = el.scrollWidth > el.clientWidth;
             const canV = el.scrollHeight > el.clientHeight;
@@ -508,7 +508,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
             return;
         const onDown = (e) => {
             const t = e.target;
-            if (!t.closest(".recordstable-menu, [data-menu-trigger]"))
+            if (!t.closest(".crisp-recordstable-menu, [data-menu-trigger]"))
                 setOpenMenu(null);
         };
         const onKey = (e) => e.key === "Escape" && setOpenMenu(null);
@@ -524,7 +524,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
         if (!ctxMenu)
             return;
         const onDown = (e) => {
-            if (!e.target.closest(".recordstable-ctx"))
+            if (!e.target.closest(".crisp-recordstable-ctx"))
                 setCtxMenu(null);
         };
         const onKey = (e) => e.key === "Escape" && setCtxMenu(null);
@@ -999,47 +999,47 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
         window.addEventListener("pointermove", onMove);
         window.addEventListener("pointerup", onUp);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordstable_recipe_1.recordstableRecipe)({ className }), ref: rootRef, ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "recordstable-toolbar", children: [(0, jsx_runtime_1.jsxs)("span", { className: "recordstable-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `recordstable-tool${sorts.length ? " recordstable-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sorts.length
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordstable_recipe_1.recordstableRecipe)({ className }), ref: rootRef, ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordstable-toolbar", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordstable-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `crisp-recordstable-tool${sorts.length ? " crisp-recordstable-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sorts.length
                                         ? t.sortedBy(cols.find((c) => c.key === sorts[0].key)?.label ?? "", sorts.length - 1)
-                                        : t.sort] }), openMenu === "sort" && ((0, jsx_runtime_1.jsxs)("div", { className: "recordstable-menu recordstable-sortpop", role: "dialog", "aria-label": t.sort, children: [sorts.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "recordstable-sort-empty", children: t.noSorts })) : (sorts.map((s, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "recordstable-sort-row", onDragOver: (e) => {
+                                        : t.sort] }), openMenu === "sort" && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordstable-menu crisp-recordstable-sortpop", role: "dialog", "aria-label": t.sort, children: [sorts.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-sort-empty", children: t.noSorts })) : (sorts.map((s, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordstable-sort-row", onDragOver: (e) => {
                                             if (dragSort !== null)
                                                 e.preventDefault();
                                         }, onDrop: () => {
                                             if (dragSort !== null)
                                                 moveSort(dragSort, i);
                                             setDragSort(null);
-                                        }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordstable-sort-grip", "aria-label": t.reorderSort, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)(select_1.Select, { className: "recordstable-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: cols.map((c) => ({
+                                        }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordstable-sort-grip", "aria-label": t.reorderSort, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)(select_1.Select, { className: "crisp-recordstable-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: cols.map((c) => ({
                                                     value: c.key,
-                                                    label: c.icon ? ((0, jsx_runtime_1.jsxs)("span", { className: "recordstable-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(c.icon, { size: 15, strokeWidth: 1.75 }), c.label] })) : (c.label),
+                                                    label: c.icon ? ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordstable-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(c.icon, { size: 15, strokeWidth: 1.75 }), c.label] })) : (c.label),
                                                     keywords: c.label,
-                                                })), "aria-label": t.sortField }), (0, jsx_runtime_1.jsx)(select_1.Select, { className: "recordstable-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
+                                                })), "aria-label": t.sortField }), (0, jsx_runtime_1.jsx)(select_1.Select, { className: "crisp-recordstable-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
                                                     {
                                                         value: "asc",
-                                                        label: ((0, jsx_runtime_1.jsxs)("span", { className: "recordstable-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), t.ascending] })),
+                                                        label: ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordstable-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), t.ascending] })),
                                                         keywords: t.ascending,
                                                     },
                                                     {
                                                         value: "desc",
-                                                        label: ((0, jsx_runtime_1.jsxs)("span", { className: "recordstable-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), t.descending] })),
+                                                        label: ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordstable-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), t.descending] })),
                                                         keywords: t.descending,
                                                     },
-                                                ], "aria-label": t.sortDirection }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordstable-sort-remove", onClick: () => removeSort(i), "aria-label": t.removeSort, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "recordstable-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.addSort] }) }), (0, jsx_runtime_1.jsx)("div", { className: "recordstable-sort-foot", children: t.learnSortingHref ? ((0, jsx_runtime_1.jsxs)("a", { className: "recordstable-sort-learn", href: t.learnSortingHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) : ((0, jsx_runtime_1.jsxs)("span", { className: "recordstable-sort-learn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) })] }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "recordstable-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `recordstable-tool recordstable-tool--ghost${activeFilters ? " recordstable-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), t.filterCount(activeFilters)] }), openMenu === "filter" && ((0, jsx_runtime_1.jsxs)("div", { className: "recordstable-menu", role: "dialog", "aria-label": t.addFilter, children: [(0, jsx_runtime_1.jsx)("input", { className: "recordstable-menu-input", placeholder: t.filterByPlaceholder, "aria-label": t.filterByField, 
+                                                ], "aria-label": t.sortDirection }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordstable-sort-remove", onClick: () => removeSort(i), "aria-label": t.removeSort, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.addSort] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-sort-foot", children: t.learnSortingHref ? ((0, jsx_runtime_1.jsxs)("a", { className: "crisp-recordstable-sort-learn", href: t.learnSortingHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) : ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordstable-sort-learn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) })] }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordstable-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `crisp-recordstable-tool crisp-recordstable-tool--ghost${activeFilters ? " crisp-recordstable-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), t.filterCount(activeFilters)] }), openMenu === "filter" && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordstable-menu", role: "dialog", "aria-label": t.addFilter, children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-recordstable-menu-input", placeholder: t.filterByPlaceholder, "aria-label": t.filterByField, 
                                         // biome-ignore lint/a11y/noAutofocus: focus the picker on open
                                         autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), cols
                                         .filter((col) => col.label
                                         .toLowerCase()
                                         .includes(filterQuery.trim().toLowerCase()))
-                                        .map((col) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)("span", { style: { width: 15 } })), col.label] }, col.key)))] }))] }), filterConds.map((cond) => {
+                                        .map((col) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)("span", { style: { width: 15 } })), col.label] }, col.key)))] }))] }), filterConds.map((cond) => {
                         const col = cols.find((c) => c.key === cond.key);
                         const open = openMenu === `fcond:${cond.id}`;
                         const hasValue = !opNeedsValue(cond.op) || cond.value.trim();
-                        return ((0, jsx_runtime_1.jsxs)("span", { className: "recordstable-toolgroup", children: [(0, jsx_runtime_1.jsxs)("span", { className: "recordstable-fchip", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [(0, jsx_runtime_1.jsx)("span", { className: "recordstable-fchip-field", children: col?.label }), hasValue ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "recordstable-fchip-op", children: t.op[cond.op] }), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("span", { className: "recordstable-fchip-val", children: cond.value }))] })) : ((0, jsx_runtime_1.jsx)("span", { className: "recordstable-fchip-op", children: t.selectCondition }))] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordstable-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "recordstable-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "recordstable-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [t.op[op], cond.op === op ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("input", { className: "recordstable-menu-input", placeholder: t.filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
+                        return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordstable-toolgroup", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordstable-fchip", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-fchip-field", children: col?.label }), hasValue ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-fchip-op", children: t.op[cond.op] }), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-fchip-val", children: cond.value }))] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-fchip-op", children: t.selectCondition }))] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordstable-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordstable-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordstable-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [t.op[op], cond.op === op ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-recordstable-menu-input", placeholder: t.filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
                                             // biome-ignore lint/a11y/noAutofocus: focus the value field
                                             autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) }))] }))] }, cond.id));
-                    }), (0, jsx_runtime_1.jsx)("span", { className: "recordstable-spacer" }), (0, jsx_runtime_1.jsx)("span", { className: "recordstable-count", children: t.recordCount(visibleRows.length) }), showNew && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-new", onClick: () => setCreating(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 2, "aria-hidden": "true" }), t.newButton] }))] }), (0, jsx_runtime_1.jsxs)("div", { ref: scrollRef, className: "recordstable-scroll", tabIndex: -1, "data-scrolled": scrolledX ? "" : undefined, onKeyDown: onGridKeyDown, onScroll: (e) => {
+                    }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-spacer" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-count", children: t.recordCount(visibleRows.length) }), showNew && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-new", onClick: () => setCreating(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 2, "aria-hidden": "true" }), t.newButton] }))] }), (0, jsx_runtime_1.jsxs)("div", { ref: scrollRef, className: "crisp-recordstable-scroll", tabIndex: -1, "data-scrolled": scrolledX ? "" : undefined, onKeyDown: onGridKeyDown, onScroll: (e) => {
                     const left = e.currentTarget.scrollLeft > 0;
                     setScrolledX((prev) => (prev === left ? prev : left));
-                }, children: [(0, jsx_runtime_1.jsxs)("table", { className: "recordstable-table", style: {
+                }, children: [(0, jsx_runtime_1.jsxs)("table", { className: "crisp-recordstable-table", style: {
                             // fill the container; the trailing add-column absorbs the slack (a
                             // flexible filler). minWidth keeps real column widths and drives the
                             // horizontal scroll once the columns outgrow the container.
@@ -1047,10 +1047,10 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                             minWidth: CHECK_W +
                                 ADDCOL_W +
                                 cols.reduce((sum, c) => sum + colWidth(c), 0),
-                        }, children: [(0, jsx_runtime_1.jsxs)("colgroup", { children: [(0, jsx_runtime_1.jsx)("col", { style: { width: CHECK_W } }), cols.map((col) => ((0, jsx_runtime_1.jsx)("col", { style: { width: colWidth(col) } }, col.key))), (0, jsx_runtime_1.jsx)("col", {})] }), (0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { className: "recordstable-th recordstable-col-check", children: (0, jsx_runtime_1.jsx)("span", { className: "recordstable-check-inner", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": t.selectAll, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) }), cols.map((col, i) => {
+                        }, children: [(0, jsx_runtime_1.jsxs)("colgroup", { children: [(0, jsx_runtime_1.jsx)("col", { style: { width: CHECK_W } }), cols.map((col) => ((0, jsx_runtime_1.jsx)("col", { style: { width: colWidth(col) } }, col.key))), (0, jsx_runtime_1.jsx)("col", {})] }), (0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { className: "crisp-recordstable-th crisp-recordstable-col-check", children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-check-inner", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": t.selectAll, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) }), cols.map((col, i) => {
                                             const Icon = col.icon;
                                             const sc = sorts.find((s) => s.key === col.key);
-                                            return ((0, jsx_runtime_1.jsxs)("th", { className: `recordstable-th${i === 0 ? " recordstable-col-entity" : ""}`, "data-sorted": sc?.dir, "aria-sort": sorts[0]?.key === col.key
+                                            return ((0, jsx_runtime_1.jsxs)("th", { className: `crisp-recordstable-th${i === 0 ? " crisp-recordstable-col-entity" : ""}`, "data-sorted": sc?.dir, "aria-sort": sorts[0]?.key === col.key
                                                     ? sorts[0].dir === "asc"
                                                         ? "ascending"
                                                         : "descending"
@@ -1059,35 +1059,35 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                         e.preventDefault();
                                                         reorderColumn(dragCol, col.key);
                                                     }
-                                                    : undefined, children: [renamingCol === col.key ? ((0, jsx_runtime_1.jsx)("input", { className: "recordstable-th-rename", 
+                                                    : undefined, children: [renamingCol === col.key ? ((0, jsx_runtime_1.jsx)("input", { className: "crisp-recordstable-th-rename", 
                                                         // biome-ignore lint/a11y/noAutofocus: focus the rename field the moment it opens
                                                         autoFocus: true, defaultValue: col.label, "aria-label": t.columnLabel, onKeyDown: (e) => {
                                                             if (e.key === "Enter")
                                                                 renameColumn(col.key, e.currentTarget.value);
                                                             else if (e.key === "Escape")
                                                                 setRenamingCol(null);
-                                                        }, onBlur: (e) => renameColumn(col.key, e.currentTarget.value) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-th-inner", "data-menu-trigger": true, "aria-haspopup": "menu", draggable: i >= 1, onDragStart: i >= 1
+                                                        }, onBlur: (e) => renameColumn(col.key, e.currentTarget.value) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-th-inner", "data-menu-trigger": true, "aria-haspopup": "menu", draggable: i >= 1, onDragStart: i >= 1
                                                             ? (e) => {
                                                                 setDragCol(col.key);
                                                                 e.dataTransfer.effectAllowed = "move";
                                                             }
-                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 14, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "recordstable-th-label", children: col.label }), (0, jsx_runtime_1.jsx)("span", { className: "recordstable-sort", children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
+                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 14, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-th-label", children: col.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sort", children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
                                                         rootRef.current &&
-                                                        (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "recordstable-menu recordstable-menu--fixed recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveLeft] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveRight] }), (0, jsx_runtime_1.jsx)("div", { className: "recordstable-menu-sep" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
+                                                        (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "crisp-recordstable-menu crisp-recordstable-menu--fixed crisp-recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveLeft] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveRight] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-menu-sep" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
                                                                         setRenamingCol(col.key);
                                                                         setOpenMenu(null);
-                                                                    }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }), t.editColumnLabel] }), cols.length > 1 && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => hideColumn(col.key), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { size: 15, strokeWidth: 1.75 }), t.hideFromView] }))] }), rootRef.current), (0, jsx_runtime_1.jsx)("span", { className: "recordstable-resize", "aria-hidden": "true", onPointerDown: (e) => {
+                                                                    }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }), t.editColumnLabel] }), cols.length > 1 && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => hideColumn(col.key), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { size: 15, strokeWidth: 1.75 }), t.hideFromView] }))] }), rootRef.current), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-resize", "aria-hidden": "true", onPointerDown: (e) => {
                                                             e.preventDefault();
                                                             e.stopPropagation();
                                                             const th = e.currentTarget
                                                                 .parentElement;
                                                             resizeCol(col.key, e.clientX, th ? th.getBoundingClientRect().width : 180, e.currentTarget);
                                                         }, onClick: (e) => e.stopPropagation() })] }, col.key));
-                                        }), (0, jsx_runtime_1.jsx)("th", { className: "recordstable-th recordstable-addcol", children: allowAddColumn && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: addColumn, "aria-label": t.addColumn, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }) })) })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: visibleRows.map((row) => ((0, jsx_runtime_1.jsxs)("tr", { "data-selected": selected.has(row.id) ? "" : undefined, onContextMenu: (e) => {
+                                        }), (0, jsx_runtime_1.jsx)("th", { className: "crisp-recordstable-th crisp-recordstable-addcol", children: allowAddColumn && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: addColumn, "aria-label": t.addColumn, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }) })) })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: visibleRows.map((row) => ((0, jsx_runtime_1.jsxs)("tr", { "data-selected": selected.has(row.id) ? "" : undefined, onContextMenu: (e) => {
                                         e.preventDefault();
                                         ctxReturn.current = document.activeElement;
                                         setCtxMenu({ x: e.clientX, y: e.clientY, id: row.id });
-                                    }, children: [(0, jsx_runtime_1.jsx)("td", { className: "recordstable-td recordstable-col-check", children: (0, jsx_runtime_1.jsx)("span", { className: "recordstable-check-inner", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": `Select ${row.id}`, checked: selected.has(row.id), onClick: (e) => {
+                                    }, children: [(0, jsx_runtime_1.jsx)("td", { className: "crisp-recordstable-td crisp-recordstable-col-check", children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-check-inner", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": `Select ${row.id}`, checked: selected.has(row.id), onClick: (e) => {
                                                         shiftHeld.current = e.shiftKey;
                                                     }, onChange: () => toggleRow(row.id) }) }) }), cols.map((col, i) => {
                                             const canEdit = canEditCol(col);
@@ -1099,7 +1099,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                             // row instead of a bare "182,000", and the same header is
                                             // repeated in every cell's context (#231).
                                             const Cell = (i === 0 ? "th" : "td");
-                                            return ((0, jsx_runtime_1.jsxs)(Cell, { scope: i === 0 ? "row" : undefined, "data-cell": `${row.id}:${col.key}`, className: `recordstable-td${i === 0 ? " recordstable-col-entity" : ""}${canEdit ? " recordstable-td--editable" : ""}${isPicker ? " recordstable-td--picker" : ""}`, "data-enriched": col.enriched ? "" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
+                                            return ((0, jsx_runtime_1.jsxs)(Cell, { scope: i === 0 ? "row" : undefined, "data-cell": `${row.id}:${col.key}`, className: `crisp-recordstable-td${i === 0 ? " crisp-recordstable-col-entity" : ""}${canEdit ? " crisp-recordstable-td--editable" : ""}${isPicker ? " crisp-recordstable-td--picker" : ""}`, "data-enriched": col.enriched ? "" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
                                                     ? ""
                                                     : undefined, onClick: () => {
                                                     if (isPicker)
@@ -1108,7 +1108,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                     scrollRef.current?.focus({ preventScroll: true });
                                                 }, onDoubleClick: canEdit
                                                     ? () => setEditing({ id: row.id, key: col.key })
-                                                    : undefined, children: [isPicker ? (col.type === "status" ? ((0, jsx_runtime_1.jsx)(StatusCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) })) : col.type === "reference" ? ((0, jsx_runtime_1.jsx)(ReferenceCell, { labels: t, column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) })) : col.type === "tags" ? ((0, jsx_runtime_1.jsx)(TagsCell, { labels: t, column: col, row: row, options: tagOptionsFor(col.key), onChange: (v) => setCell(row.id, col.key, v) })) : ((0, jsx_runtime_1.jsx)(DateCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) }))) : isEditing ? ((0, jsx_runtime_1.jsx)("input", { className: `recordstable-edit${col.type === "number" ? " recordstable-edit--num" : ""}`, 
+                                                    : undefined, children: [isPicker ? (col.type === "status" ? ((0, jsx_runtime_1.jsx)(StatusCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) })) : col.type === "reference" ? ((0, jsx_runtime_1.jsx)(ReferenceCell, { labels: t, column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) })) : col.type === "tags" ? ((0, jsx_runtime_1.jsx)(TagsCell, { labels: t, column: col, row: row, options: tagOptionsFor(col.key), onChange: (v) => setCell(row.id, col.key, v) })) : ((0, jsx_runtime_1.jsx)(DateCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) }))) : isEditing ? ((0, jsx_runtime_1.jsx)("input", { className: `crisp-recordstable-edit${col.type === "number" ? " crisp-recordstable-edit--num" : ""}`, 
                                                         // biome-ignore lint/a11y/noAutofocus: focusing the just-opened editor is the expected behavior
                                                         autoFocus: true, defaultValue: cellText(col, row), onBlur: (e) => commitEdit(row.id, col.key, e.target.value), onKeyDown: (e) => {
                                                             if (e.key === "Enter")
@@ -1117,15 +1117,15 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                                 setEditing(null);
                                                         } })) : ((0, jsx_runtime_1.jsx)(CellView, { labels: t, column: col, row: row, pinned: i === 0 && pinned.has(row.id), onOpenPage: i === 0 && onOpenRecordPage
                                                             ? () => onOpenRecordPage(row)
-                                                            : undefined, avatarTone: avatarTone })), i === 0 && onOpenRecord && !isEditing && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordstable-open", "aria-label": `Open ${cellText(col, row)}`, onClick: (e) => {
+                                                            : undefined, avatarTone: avatarTone })), i === 0 && onOpenRecord && !isEditing && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordstable-open", "aria-label": `Open ${cellText(col, row)}`, onClick: (e) => {
                                                             e.stopPropagation();
                                                             onOpenRecord(row);
                                                         }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }) }))] }, col.key));
-                                        }), (0, jsx_runtime_1.jsx)("td", { className: "recordstable-td recordstable-addcol" })] }, row.id))) }), (0, jsx_runtime_1.jsx)("tfoot", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "recordstable-sum recordstable-col-check" }), cols.map((col, i) => {
+                                        }), (0, jsx_runtime_1.jsx)("td", { className: "crisp-recordstable-td crisp-recordstable-addcol" })] }, row.id))) }), (0, jsx_runtime_1.jsx)("tfoot", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "crisp-recordstable-sum crisp-recordstable-col-check" }), cols.map((col, i) => {
                                             const a = agg[col.key] ?? "none";
                                             const res = summarize(col, a, visibleRows);
                                             const sumOpen = openMenu === `sum:${col.key}`;
-                                            return ((0, jsx_runtime_1.jsx)("td", { className: `recordstable-sum${i === 0 ? " recordstable-col-entity" : ""}`, children: (0, jsx_runtime_1.jsxs)("span", { className: "recordstable-toolgroup recordstable-sumgroup", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordstable-sum-btn", "data-empty": res ? undefined : "", "data-menu-trigger": true, "aria-haspopup": "menu", onClick: (e) => {
+                                            return ((0, jsx_runtime_1.jsx)("td", { className: `crisp-recordstable-sum${i === 0 ? " crisp-recordstable-col-entity" : ""}`, children: (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordstable-toolgroup crisp-recordstable-sumgroup", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordstable-sum-btn", "data-empty": res ? undefined : "", "data-menu-trigger": true, "aria-haspopup": "menu", onClick: (e) => {
                                                                 if (sumOpen) {
                                                                     setOpenMenu(null);
                                                                     return;
@@ -1137,13 +1137,13 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                                 });
                                                                 menuReturn.current = e.currentTarget;
                                                                 setOpenMenu(`sum:${col.key}`);
-                                                            }, children: res ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "recordstable-sum-label", children: t.agg[a] }), (0, jsx_runtime_1.jsx)("span", { className: "recordstable-sum-value", children: res.value })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "recordstable-sum-label", children: t.calculate })) }), sumOpen &&
+                                                            }, children: res ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sum-label", children: t.agg[a] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sum-value", children: res.value })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sum-label", children: t.calculate })) }), sumOpen &&
                                                             rootRef.current &&
-                                                            (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "recordstable-menu recordstable-menu--fixed recordstable-menu--up", role: "menu", "aria-label": `${col.label} summary`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: aggOptions(col).map((opt) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitemradio", tabIndex: -1, "aria-checked": a === opt, "data-on": a === opt ? "" : undefined, onClick: () => setAggValue(col.key, opt), children: [t.agg[opt], a === opt ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, opt))) }), rootRef.current)] }) }, col.key));
-                                        }), (0, jsx_runtime_1.jsx)("td", { className: "recordstable-sum recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "recordstable-empty", children: (0, jsx_runtime_1.jsx)(emptystate_1.EmptyState, { variant: "page", icon: activeFilters ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })), title: activeFilters ? "No records match that filter" : t.noRecords, description: activeFilters
+                                                            (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "crisp-recordstable-menu crisp-recordstable-menu--fixed crisp-recordstable-menu--up", role: "menu", "aria-label": `${col.label} summary`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: aggOptions(col).map((opt) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitemradio", tabIndex: -1, "aria-checked": a === opt, "data-on": a === opt ? "" : undefined, onClick: () => setAggValue(col.key, opt), children: [t.agg[opt], a === opt ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, opt))) }), rootRef.current)] }) }, col.key));
+                                        }), (0, jsx_runtime_1.jsx)("td", { className: "crisp-recordstable-sum crisp-recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-empty", children: (0, jsx_runtime_1.jsx)(emptystate_1.EmptyState, { variant: "page", icon: activeFilters ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })), title: activeFilters ? "No records match that filter" : t.noRecords, description: activeFilters
                                 ? "None of your records match the filters that are set."
-                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-addrow", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && ((0, jsx_runtime_1.jsxs)(bulkbar_1.BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [(0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.moreActions, trigger: (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), (0, jsx_runtime_1.jsx)(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: ctxRef, className: "recordstable-menu recordstable-ctx", role: "menu", "aria-label": t.recordActions, style: { position: "fixed", top: ctxMenu.y, left: ctxMenu.x }, onKeyDown: onCtxKeyDown, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), t.delete] })] }), rootRef.current ?? document.body)] }));
+                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-addrow", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && ((0, jsx_runtime_1.jsxs)(bulkbar_1.BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [(0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.moreActions, trigger: (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), (0, jsx_runtime_1.jsx)(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: ctxRef, className: "crisp-recordstable-menu crisp-recordstable-ctx", role: "menu", "aria-label": t.recordActions, style: { position: "fixed", top: ctxMenu.y, left: ctxMenu.x }, onKeyDown: onCtxKeyDown, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item crisp-recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), t.delete] })] }), rootRef.current ?? document.body)] }));
 }
 exports.defaultColumns = [
     { key: "company", label: "Company", type: "entity", icon: lucide_react_1.Building2 },