@crisp-ui-kit/crisp 0.31.6 → 0.32.1

package/dist/esm/product/recordpanel/recordpanel.js

@@ -7,15 +7,15 @@ import { recordpanelRecipe } from "./recordpanel.recipe.js";
 function FieldValue({ col, row, emptyLabel, }) {
     const v = row[col.key];
     if (v == null || v === "" || (Array.isArray(v) && !v.length)) {
-        return _jsx("span", { className: "recordpanel-empty", children: emptyLabel });
+        return _jsx("span", { className: "crisp-recordpanel-empty", children: emptyLabel });
     }
     switch (col.type) {
         case "tags":
-            return (_jsx(_Fragment, { children: v.map((t) => (_jsx("span", { className: "recordstable-tag", "data-tone": tagTone(t), children: t }, t))) }));
+            return (_jsx(_Fragment, { children: v.map((t) => (_jsx("span", { className: "crisp-recordstable-tag", "data-tone": tagTone(t), children: t }, t))) }));
         case "number":
             return _jsx(_Fragment, { children: typeof v === "number" ? v.toLocaleString() : v });
         case "url":
-            return (_jsx("a", { className: "recordpanel-link", href: `https://${v}`, target: "_blank", rel: "noreferrer", children: v }));
+            return (_jsx("a", { className: "crisp-recordpanel-link", href: `https://${v}`, target: "_blank", rel: "noreferrer", children: v }));
         default:
             return _jsx(_Fragment, { children: String(v) });
     }
@@ -42,6 +42,6 @@ export function RecordPanel({ record, columns, onClose, className, closeLabel =
         ? record[entityCol.key]
         : undefined;
     const fields = columns.filter((c) => c.type !== "entity");
-    return (_jsxs("div", { className: recordpanelRecipe({ className }), ...rest, role: "dialog", "aria-label": entity?.name ?? "Record", children: [_jsxs("div", { className: "recordpanel-header", children: [entity?.avatar ? (_jsx("img", { className: "recordpanel-fav", src: entity.avatar, alt: "" })) : entity ? (_jsx(Avatar, { size: "md", shape: "rounded", tone: "brand", children: entity.name.charAt(0) })) : null, _jsx("span", { className: "recordpanel-title", children: entity?.name ?? "Record" }), _jsx("button", { type: "button", className: "recordpanel-iconbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 18, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "recordpanel-body", children: [_jsx("div", { className: "recordpanel-sectionlabel", children: detailsLabel }), fields.map((col) => (_jsxs("div", { className: "recordpanel-field", children: [_jsxs("span", { className: "recordpanel-field-label", children: [col.icon ? _jsx(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), _jsx("span", { className: "recordpanel-field-value", children: _jsx(FieldValue, { col: col, row: record, emptyLabel: emptyLabel }) })] }, col.key)))] })] }));
+    return (_jsxs("div", { className: recordpanelRecipe({ className }), ...rest, role: "dialog", "aria-label": entity?.name ?? "Record", children: [_jsxs("div", { className: "crisp-recordpanel-header", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpanel-fav", src: entity.avatar, alt: "" })) : entity ? (_jsx(Avatar, { size: "md", shape: "rounded", tone: "brand", children: entity.name.charAt(0) })) : null, _jsx("span", { className: "crisp-recordpanel-title", children: entity?.name ?? "Record" }), _jsx("button", { type: "button", className: "crisp-recordpanel-iconbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 18, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpanel-body", children: [_jsx("div", { className: "crisp-recordpanel-sectionlabel", children: detailsLabel }), fields.map((col) => (_jsxs("div", { className: "crisp-recordpanel-field", children: [_jsxs("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? _jsx(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), _jsx("span", { className: "crisp-recordpanel-field-value", children: _jsx(FieldValue, { col: col, row: record, emptyLabel: emptyLabel }) })] }, col.key)))] })] }));
 }
 RecordPanel.displayName = "RecordPanel";

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

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

package/dist/esm/product/recordstable/recordstable.js

@@ -217,10 +217,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 (_jsxs("span", { className: "recordstable-entity", children: [showImg ? (_jsx("img", { className: "recordstable-fav", src: value.avatar, alt: "", onError: () => setImgFailed(true) })) : (_jsx(Avatar, { size: "sm", shape: "rounded", tone: avatarTone === "hashed" ? avatarToneFor(value.name) : "brand", children: value.name.charAt(0) })), onOpenPage ? (_jsx("button", { type: "button", className: "recordstable-entity-name recordstable-entity-name--link", onClick: (e) => {
+    return (_jsxs("span", { className: "crisp-recordstable-entity", children: [showImg ? (_jsx("img", { className: "crisp-recordstable-fav", src: value.avatar, alt: "", onError: () => setImgFailed(true) })) : (_jsx(Avatar, { size: "sm", shape: "rounded", tone: avatarTone === "hashed" ? avatarToneFor(value.name) : "brand", children: value.name.charAt(0) })), onOpenPage ? (_jsx("button", { type: "button", className: "crisp-recordstable-entity-name crisp-recordstable-entity-name--link", onClick: (e) => {
                     e.stopPropagation();
                     onOpenPage();
-                }, children: value.name })) : (_jsx("span", { className: "recordstable-entity-name", children: value.name })), pinned ? (_jsx(Star, { className: "recordstable-pin", size: 13, strokeWidth: 2, "aria-label": labels.inAList })) : null] }));
+                }, children: value.name })) : (_jsx("span", { className: "crisp-recordstable-entity-name", children: value.name })), pinned ? (_jsx(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];
@@ -232,7 +232,7 @@ function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", label
     if (value == null ||
         value === "" ||
         (Array.isArray(value) && !value.length)) {
-        return _jsx("span", { className: "recordstable-muted", children: "\u2014" });
+        return _jsx("span", { className: "crisp-recordstable-muted", children: "\u2014" });
     }
     // `format` keeps the type renderer's chrome below and only replaces the
     // text it displays.
@@ -241,32 +241,32 @@ function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", label
         case "entity":
             return (_jsx(EntityCell, { labels: labels, value: value, pinned: pinned, onOpenPage: onOpenPage, avatarTone: avatarTone }));
         case "tags":
-            return (_jsx("span", { className: "recordstable-cell recordstable-cell--tags", children: value.map((t) => (_jsx("span", { className: "recordstable-tag", "data-tone": tagTone(t), children: t }, t))) }));
+            return (_jsx("span", { className: "crisp-recordstable-cell crisp-recordstable-cell--tags", children: value.map((t) => (_jsx("span", { className: "crisp-recordstable-tag", "data-tone": tagTone(t), children: t }, t))) }));
         case "number":
-            return (_jsx("span", { className: "recordstable-cell recordstable-cell--num", children: display ??
+            return (_jsx("span", { className: "crisp-recordstable-cell crisp-recordstable-cell--num", children: display ??
                     (typeof value === "number" ? value.toLocaleString() : value) }));
         case "url":
-            return (_jsx("a", { className: "recordstable-link", href: `https://${value}`, target: "_blank", rel: "noreferrer", onClick: (e) => e.stopPropagation(), children: display ?? value }));
+            return (_jsx("a", { className: "crisp-recordstable-link", href: `https://${value}`, target: "_blank", rel: "noreferrer", onClick: (e) => e.stopPropagation(), children: display ?? value }));
         case "date":
-            return _jsx("span", { className: "recordstable-muted", children: display ?? value });
+            return (_jsx("span", { className: "crisp-recordstable-muted", children: display ?? value }));
         case "currency": {
             const n = typeof value === "number" ? value : Number(value);
-            return (_jsx("span", { className: "recordstable-cell recordstable-cell--num", children: display ??
+            return (_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 _jsx("span", { className: "recordstable-muted", children: "\u2014" });
-            return (_jsxs("span", { className: "recordstable-status", children: [_jsx("span", { className: "recordstable-status-dot", style: { background: opt.color } }), display ?? opt.label] }));
+                return _jsx("span", { className: "crisp-recordstable-muted", children: "\u2014" });
+            return (_jsxs("span", { className: "crisp-recordstable-status", children: [_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 (_jsxs("span", { className: "recordstable-entity", children: [_jsx(Avatar, { size: "sm", shape: "rounded", tone: avatarTone === "hashed" ? avatarToneFor(label) : "brand", children: label.charAt(0) }), _jsx("span", { className: "recordstable-entity-name", children: label })] }));
+            return (_jsxs("span", { className: "crisp-recordstable-entity", children: [_jsx(Avatar, { size: "sm", shape: "rounded", tone: avatarTone === "hashed" ? avatarToneFor(label) : "brand", children: label.charAt(0) }), _jsx("span", { className: "crisp-recordstable-entity-name", children: label })] }));
         }
         default:
-            return (_jsx("span", { className: "recordstable-entity-name", children: display ?? value }));
+            return (_jsx("span", { className: "crisp-recordstable-entity-name", children: display ?? value }));
     }
 }
 // Always-interactive cell editors for the picker column types (status / date /
@@ -372,10 +372,10 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
     };
     const entityCol = columns.find((c) => c.type === "entity");
     const EntityIcon = entityCol?.icon;
-    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, title: labels.newRecordTitle(entityLabel), icon: EntityIcon ? _jsx(EntityIcon, { size: 16, strokeWidth: 1.75 }) : undefined, width: 720, children: [_jsx(DialogBody, { children: columns.map((col, i) => (_jsxs("div", { className: "dialog-field", children: [_jsx("label", { className: "dialog-field-label", htmlFor: `create-${col.key}`, children: col.label }), _jsx(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 (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, title: labels.newRecordTitle(entityLabel), icon: EntityIcon ? _jsx(EntityIcon, { size: 16, strokeWidth: 1.75 }) : undefined, width: 720, children: [_jsx(DialogBody, { children: columns.map((col, i) => (_jsxs("div", { className: "crisp-dialog-field", children: [_jsx("label", { className: "crisp-dialog-field-label", htmlFor: `create-${col.key}`, children: col.label }), _jsx(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))) }), _jsxs(DialogFooter, { children: [_jsxs("span", { className: "dialog-more", children: [labels.createMore, _jsx(Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore })] }), _jsxs("button", { type: "button", className: "dialog-submit", onClick: submit, children: [labels.createRecord, _jsx("span", { className: "dialog-submit-key", children: "\u2318\u21B5" })] })] })] }));
+                            } })] }, col.key))) }), _jsxs(DialogFooter, { children: [_jsxs("span", { className: "crisp-dialog-more", children: [labels.createMore, _jsx(Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore })] }), _jsxs("button", { type: "button", className: "crisp-dialog-submit", onClick: submit, children: [labels.createRecord, _jsx("span", { className: "crisp-dialog-submit-key", children: "\u2318\u21B5" })] })] })] }));
 }
 /**
  * A measured-style record grid — fully featured. Toolbar (search / sort status /
@@ -449,7 +449,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
         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;
@@ -468,7 +468,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
             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);
@@ -484,7 +484,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
         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);
@@ -959,47 +959,47 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
         window.addEventListener("pointermove", onMove);
         window.addEventListener("pointerup", onUp);
     };
-    return (_jsxs("div", { className: recordstableRecipe({ className }), ref: rootRef, ...rest, children: [_jsxs("div", { className: "recordstable-toolbar", children: [_jsxs("span", { className: "recordstable-toolgroup", children: [_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: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sorts.length
+    return (_jsxs("div", { className: recordstableRecipe({ className }), ref: rootRef, ...rest, children: [_jsxs("div", { className: "crisp-recordstable-toolbar", children: [_jsxs("span", { className: "crisp-recordstable-toolgroup", children: [_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: [_jsx(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" && (_jsxs("div", { className: "recordstable-menu recordstable-sortpop", role: "dialog", "aria-label": t.sort, children: [sorts.length === 0 ? (_jsx("div", { className: "recordstable-sort-empty", children: t.noSorts })) : (sorts.map((s, i) => (_jsxs("div", { className: "recordstable-sort-row", onDragOver: (e) => {
+                                        : t.sort] }), openMenu === "sort" && (_jsxs("div", { className: "crisp-recordstable-menu crisp-recordstable-sortpop", role: "dialog", "aria-label": t.sort, children: [sorts.length === 0 ? (_jsx("div", { className: "crisp-recordstable-sort-empty", children: t.noSorts })) : (sorts.map((s, i) => (_jsxs("div", { className: "crisp-recordstable-sort-row", onDragOver: (e) => {
                                             if (dragSort !== null)
                                                 e.preventDefault();
                                         }, onDrop: () => {
                                             if (dragSort !== null)
                                                 moveSort(dragSort, i);
                                             setDragSort(null);
-                                        }, children: [_jsx("button", { type: "button", className: "recordstable-sort-grip", "aria-label": t.reorderSort, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsx(Select, { className: "recordstable-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: cols.map((c) => ({
+                                        }, children: [_jsx("button", { type: "button", className: "crisp-recordstable-sort-grip", "aria-label": t.reorderSort, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsx(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 ? (_jsxs("span", { className: "recordstable-sort-optlabel", children: [_jsx(c.icon, { size: 15, strokeWidth: 1.75 }), c.label] })) : (c.label),
+                                                    label: c.icon ? (_jsxs("span", { className: "crisp-recordstable-sort-optlabel", children: [_jsx(c.icon, { size: 15, strokeWidth: 1.75 }), c.label] })) : (c.label),
                                                     keywords: c.label,
-                                                })), "aria-label": t.sortField }), _jsx(Select, { className: "recordstable-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
+                                                })), "aria-label": t.sortField }), _jsx(Select, { className: "crisp-recordstable-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
                                                     {
                                                         value: "asc",
-                                                        label: (_jsxs("span", { className: "recordstable-sort-optlabel", children: [_jsx(ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), t.ascending] })),
+                                                        label: (_jsxs("span", { className: "crisp-recordstable-sort-optlabel", children: [_jsx(ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), t.ascending] })),
                                                         keywords: t.ascending,
                                                     },
                                                     {
                                                         value: "desc",
-                                                        label: (_jsxs("span", { className: "recordstable-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), t.descending] })),
+                                                        label: (_jsxs("span", { className: "crisp-recordstable-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), t.descending] })),
                                                         keywords: t.descending,
                                                     },
-                                                ], "aria-label": t.sortDirection }), _jsx("button", { type: "button", className: "recordstable-sort-remove", onClick: () => removeSort(i), "aria-label": t.removeSort, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "recordstable-sort-addrow", children: _jsxs("button", { type: "button", className: "recordstable-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.addSort] }) }), _jsx("div", { className: "recordstable-sort-foot", children: t.learnSortingHref ? (_jsxs("a", { className: "recordstable-sort-learn", href: t.learnSortingHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) : (_jsxs("span", { className: "recordstable-sort-learn", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) })] }))] }), _jsxs("span", { className: "recordstable-toolgroup", children: [_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: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), t.filterCount(activeFilters)] }), openMenu === "filter" && (_jsxs("div", { className: "recordstable-menu", role: "dialog", "aria-label": t.addFilter, children: [_jsx("input", { className: "recordstable-menu-input", placeholder: t.filterByPlaceholder, "aria-label": t.filterByField, 
+                                                ], "aria-label": t.sortDirection }), _jsx("button", { type: "button", className: "crisp-recordstable-sort-remove", onClick: () => removeSort(i), "aria-label": t.removeSort, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "crisp-recordstable-sort-addrow", children: _jsxs("button", { type: "button", className: "crisp-recordstable-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.addSort] }) }), _jsx("div", { className: "crisp-recordstable-sort-foot", children: t.learnSortingHref ? (_jsxs("a", { className: "crisp-recordstable-sort-learn", href: t.learnSortingHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) : (_jsxs("span", { className: "crisp-recordstable-sort-learn", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) })] }))] }), _jsxs("span", { className: "crisp-recordstable-toolgroup", children: [_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: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), t.filterCount(activeFilters)] }), openMenu === "filter" && (_jsxs("div", { className: "crisp-recordstable-menu", role: "dialog", "aria-label": t.addFilter, children: [_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) => (_jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key)))] }))] }), filterConds.map((cond) => {
+                                        .map((col) => (_jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_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 (_jsxs("span", { className: "recordstable-toolgroup", children: [_jsxs("span", { className: "recordstable-fchip", children: [_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: [_jsx("span", { className: "recordstable-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "recordstable-fchip-op", children: t.op[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "recordstable-fchip-val", children: cond.value }))] })) : (_jsx("span", { className: "recordstable-fchip-op", children: t.selectCondition }))] }), _jsx("button", { type: "button", className: "recordstable-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "recordstable-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [_jsxs("div", { className: "recordstable-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => (_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 ? (_jsx(Check, { className: "recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "recordstable-menu-input", placeholder: t.filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
+                        return (_jsxs("span", { className: "crisp-recordstable-toolgroup", children: [_jsxs("span", { className: "crisp-recordstable-fchip", children: [_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: [_jsx("span", { className: "crisp-recordstable-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-recordstable-fchip-op", children: t.op[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-recordstable-fchip-val", children: cond.value }))] })) : (_jsx("span", { className: "crisp-recordstable-fchip-op", children: t.selectCondition }))] }), _jsx("button", { type: "button", className: "crisp-recordstable-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "crisp-recordstable-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [_jsxs("div", { className: "crisp-recordstable-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => (_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 ? (_jsx(Check, { className: "crisp-recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_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));
-                    }), _jsx("span", { className: "recordstable-spacer" }), _jsx("span", { className: "recordstable-count", children: t.recordCount(visibleRows.length) }), showNew && (_jsxs("button", { type: "button", className: "recordstable-new", onClick: () => setCreating(true), children: [_jsx(Plus, { size: 15, strokeWidth: 2, "aria-hidden": "true" }), t.newButton] }))] }), _jsxs("div", { ref: scrollRef, className: "recordstable-scroll", tabIndex: -1, "data-scrolled": scrolledX ? "" : undefined, onKeyDown: onGridKeyDown, onScroll: (e) => {
+                    }), _jsx("span", { className: "crisp-recordstable-spacer" }), _jsx("span", { className: "crisp-recordstable-count", children: t.recordCount(visibleRows.length) }), showNew && (_jsxs("button", { type: "button", className: "crisp-recordstable-new", onClick: () => setCreating(true), children: [_jsx(Plus, { size: 15, strokeWidth: 2, "aria-hidden": "true" }), t.newButton] }))] }), _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: [_jsxs("table", { className: "recordstable-table", style: {
+                }, children: [_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.
@@ -1007,10 +1007,10 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                             minWidth: CHECK_W +
                                 ADDCOL_W +
                                 cols.reduce((sum, c) => sum + colWidth(c), 0),
-                        }, children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: CHECK_W } }), cols.map((col) => (_jsx("col", { style: { width: colWidth(col) } }, col.key))), _jsx("col", {})] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "recordstable-th recordstable-col-check", children: _jsx("span", { className: "recordstable-check-inner", children: _jsx(Checkbox, { "aria-label": t.selectAll, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) }), cols.map((col, i) => {
+                        }, children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: CHECK_W } }), cols.map((col) => (_jsx("col", { style: { width: colWidth(col) } }, col.key))), _jsx("col", {})] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "crisp-recordstable-th crisp-recordstable-col-check", children: _jsx("span", { className: "crisp-recordstable-check-inner", children: _jsx(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 (_jsxs("th", { className: `recordstable-th${i === 0 ? " recordstable-col-entity" : ""}`, "data-sorted": sc?.dir, "aria-sort": sorts[0]?.key === col.key
+                                            return (_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"
@@ -1019,35 +1019,35 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                         e.preventDefault();
                                                         reorderColumn(dragCol, col.key);
                                                     }
-                                                    : undefined, children: [renamingCol === col.key ? (_jsx("input", { className: "recordstable-th-rename", 
+                                                    : undefined, children: [renamingCol === col.key ? (_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) })) : (_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) })) : (_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 ? _jsx(Icon, { size: 14, strokeWidth: 1.75 }) : null, _jsx("span", { className: "recordstable-th-label", children: col.label }), _jsx("span", { className: "recordstable-sort", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _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 ? _jsx(Icon, { size: 14, strokeWidth: 1.75 }) : null, _jsx("span", { className: "crisp-recordstable-th-label", children: col.label }), _jsx("span", { className: "crisp-recordstable-sort", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
                                                         rootRef.current &&
-                                                        createPortal(_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: [_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [_jsx(ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [_jsx(ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [_jsx(ArrowLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveLeft] }), _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: [_jsx(ArrowRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveRight] }), _jsx("div", { className: "recordstable-menu-sep" }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
+                                                        createPortal(_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: [_jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [_jsx(ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [_jsx(ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [_jsx(ArrowLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveLeft] }), _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: [_jsx(ArrowRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveRight] }), _jsx("div", { className: "crisp-recordstable-menu-sep" }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
                                                                         setRenamingCol(col.key);
                                                                         setOpenMenu(null);
-                                                                    }, children: [_jsx(Pencil, { size: 15, strokeWidth: 1.75 }), t.editColumnLabel] }), cols.length > 1 && (_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => hideColumn(col.key), children: [_jsx(EyeOff, { size: 15, strokeWidth: 1.75 }), t.hideFromView] }))] }), rootRef.current), _jsx("span", { className: "recordstable-resize", "aria-hidden": "true", onPointerDown: (e) => {
+                                                                    }, children: [_jsx(Pencil, { size: 15, strokeWidth: 1.75 }), t.editColumnLabel] }), cols.length > 1 && (_jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => hideColumn(col.key), children: [_jsx(EyeOff, { size: 15, strokeWidth: 1.75 }), t.hideFromView] }))] }), rootRef.current), _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));
-                                        }), _jsx("th", { className: "recordstable-th recordstable-addcol", children: allowAddColumn && (_jsx("button", { type: "button", onClick: addColumn, "aria-label": t.addColumn, children: _jsx(Plus, { size: 15, strokeWidth: 1.75 }) })) })] }) }), _jsx("tbody", { children: visibleRows.map((row) => (_jsxs("tr", { "data-selected": selected.has(row.id) ? "" : undefined, onContextMenu: (e) => {
+                                        }), _jsx("th", { className: "crisp-recordstable-th crisp-recordstable-addcol", children: allowAddColumn && (_jsx("button", { type: "button", onClick: addColumn, "aria-label": t.addColumn, children: _jsx(Plus, { size: 15, strokeWidth: 1.75 }) })) })] }) }), _jsx("tbody", { children: visibleRows.map((row) => (_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: [_jsx("td", { className: "recordstable-td recordstable-col-check", children: _jsx("span", { className: "recordstable-check-inner", children: _jsx(Checkbox, { "aria-label": `Select ${row.id}`, checked: selected.has(row.id), onClick: (e) => {
+                                    }, children: [_jsx("td", { className: "crisp-recordstable-td crisp-recordstable-col-check", children: _jsx("span", { className: "crisp-recordstable-check-inner", children: _jsx(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);
@@ -1059,7 +1059,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                             // 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 (_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 (_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)
@@ -1068,7 +1068,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                     scrollRef.current?.focus({ preventScroll: true });
                                                 }, onDoubleClick: canEdit
                                                     ? () => setEditing({ id: row.id, key: col.key })
-                                                    : undefined, children: [isPicker ? (col.type === "status" ? (_jsx(StatusCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) })) : col.type === "reference" ? (_jsx(ReferenceCell, { labels: t, column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) })) : col.type === "tags" ? (_jsx(TagsCell, { labels: t, column: col, row: row, options: tagOptionsFor(col.key), onChange: (v) => setCell(row.id, col.key, v) })) : (_jsx(DateCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) }))) : isEditing ? (_jsx("input", { className: `recordstable-edit${col.type === "number" ? " recordstable-edit--num" : ""}`, 
+                                                    : undefined, children: [isPicker ? (col.type === "status" ? (_jsx(StatusCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) })) : col.type === "reference" ? (_jsx(ReferenceCell, { labels: t, column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) })) : col.type === "tags" ? (_jsx(TagsCell, { labels: t, column: col, row: row, options: tagOptionsFor(col.key), onChange: (v) => setCell(row.id, col.key, v) })) : (_jsx(DateCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) }))) : isEditing ? (_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")
@@ -1077,15 +1077,15 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                                 setEditing(null);
                                                         } })) : (_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 && (_jsx("button", { type: "button", className: "recordstable-open", "aria-label": `Open ${cellText(col, row)}`, onClick: (e) => {
+                                                            : undefined, avatarTone: avatarTone })), i === 0 && onOpenRecord && !isEditing && (_jsx("button", { type: "button", className: "crisp-recordstable-open", "aria-label": `Open ${cellText(col, row)}`, onClick: (e) => {
                                                             e.stopPropagation();
                                                             onOpenRecord(row);
                                                         }, children: _jsx(ArrowUpRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }) }))] }, col.key));
-                                        }), _jsx("td", { className: "recordstable-td recordstable-addcol" })] }, row.id))) }), _jsx("tfoot", { children: _jsxs("tr", { children: [_jsx("td", { className: "recordstable-sum recordstable-col-check" }), cols.map((col, i) => {
+                                        }), _jsx("td", { className: "crisp-recordstable-td crisp-recordstable-addcol" })] }, row.id))) }), _jsx("tfoot", { children: _jsxs("tr", { children: [_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 (_jsx("td", { className: `recordstable-sum${i === 0 ? " recordstable-col-entity" : ""}`, children: _jsxs("span", { className: "recordstable-toolgroup recordstable-sumgroup", children: [_jsx("button", { type: "button", className: "recordstable-sum-btn", "data-empty": res ? undefined : "", "data-menu-trigger": true, "aria-haspopup": "menu", onClick: (e) => {
+                                            return (_jsx("td", { className: `crisp-recordstable-sum${i === 0 ? " crisp-recordstable-col-entity" : ""}`, children: _jsxs("span", { className: "crisp-recordstable-toolgroup crisp-recordstable-sumgroup", children: [_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;
@@ -1097,13 +1097,13 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                                 });
                                                                 menuReturn.current = e.currentTarget;
                                                                 setOpenMenu(`sum:${col.key}`);
-                                                            }, children: res ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "recordstable-sum-label", children: t.agg[a] }), _jsx("span", { className: "recordstable-sum-value", children: res.value })] })) : (_jsx("span", { className: "recordstable-sum-label", children: t.calculate })) }), sumOpen &&
+                                                            }, children: res ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-recordstable-sum-label", children: t.agg[a] }), _jsx("span", { className: "crisp-recordstable-sum-value", children: res.value })] })) : (_jsx("span", { className: "crisp-recordstable-sum-label", children: t.calculate })) }), sumOpen &&
                                                             rootRef.current &&
-                                                            createPortal(_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) => (_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 ? (_jsx(Check, { className: "recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, opt))) }), rootRef.current)] }) }, col.key));
-                                        }), _jsx("td", { className: "recordstable-sum recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? (_jsx("div", { className: "recordstable-empty", children: _jsx(EmptyState, { variant: "page", icon: activeFilters ? (_jsx(ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : (_jsx(Inbox, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })), title: activeFilters ? "No records match that filter" : t.noRecords, description: activeFilters
+                                                            createPortal(_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) => (_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 ? (_jsx(Check, { className: "crisp-recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, opt))) }), rootRef.current)] }) }, col.key));
+                                        }), _jsx("td", { className: "crisp-recordstable-sum crisp-recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? (_jsx("div", { className: "crisp-recordstable-empty", children: _jsx(EmptyState, { variant: "page", icon: activeFilters ? (_jsx(ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : (_jsx(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 ? (_jsxs(Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [_jsx(ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : (_jsxs(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : (_jsxs("button", { type: "button", className: "recordstable-addrow", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), _jsx("div", { className: "recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && (_jsxs(BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [_jsx(BulkBarButton, { icon: _jsx(ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), _jsx(BulkBarButton, { icon: _jsx(Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), _jsx(BulkBarButton, { icon: _jsx(Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), _jsxs(Menu, { align: "end", "aria-label": t.moreActions, trigger: _jsx(BulkBarButton, { icon: _jsx(MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [_jsx(MenuItem, { icon: _jsx(Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), _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 &&
-                createPortal(_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: [_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [_jsx(Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [_jsx(CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [_jsx(Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), _jsxs("button", { type: "button", className: "recordstable-menu-item recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [_jsx(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 ? (_jsxs(Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [_jsx(ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : (_jsxs(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : (_jsxs("button", { type: "button", className: "crisp-recordstable-addrow", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), _jsx("div", { className: "crisp-recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && (_jsxs(BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [_jsx(BulkBarButton, { icon: _jsx(ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), _jsx(BulkBarButton, { icon: _jsx(Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), _jsx(BulkBarButton, { icon: _jsx(Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), _jsxs(Menu, { align: "end", "aria-label": t.moreActions, trigger: _jsx(BulkBarButton, { icon: _jsx(MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [_jsx(MenuItem, { icon: _jsx(Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), _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 &&
+                createPortal(_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: [_jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [_jsx(Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [_jsx(CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [_jsx(Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item crisp-recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [_jsx(Trash2, { size: 15, strokeWidth: 1.75 }), t.delete] })] }), rootRef.current ?? document.body)] }));
 }
 export const defaultColumns = [
     { key: "company", label: "Company", type: "entity", icon: Building2 },