@crisp-ui-kit/crisp 0.31.5 → 0.32.0

package/dist/cjs/product/recordpage/recordpage.js

@@ -126,25 +126,25 @@ function TagsValue({ values }) {
     const [expanded, setExpanded] = React.useState(false);
     const overflow = values.length - 1;
     const shown = expanded ? values : values.slice(0, 1);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [shown.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "recordstable-tag", "data-tone": (0, recordstable_1.tagTone)(t), children: t }, t))), !expanded && overflow > 0 && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordpage-morevalues", onClick: () => setExpanded(true), children: ["+", overflow] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [shown.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-tag", "data-tone": (0, recordstable_1.tagTone)(t), children: t }, t))), !expanded && overflow > 0 && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-morevalues", onClick: () => setExpanded(true), children: ["+", overflow] }))] }));
 }
 function FieldValue({ col, row, labels, }) {
     const v = row[col.key];
     if (valueEmpty(v))
-        return (0, jsx_runtime_1.jsx)("span", { className: "recordpage-empty", children: labels.setAValue });
+        return (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-empty", children: labels.setAValue });
     switch (col.type) {
         case "tags":
             return (0, jsx_runtime_1.jsx)(TagsValue, { values: v });
         case "number":
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: typeof v === "number" ? v.toLocaleString() : v });
         case "url":
-            return ((0, jsx_runtime_1.jsx)("a", { className: "recordpage-link", href: `https://${v}`, target: "_blank", rel: "noreferrer", children: String(v) }));
+            return ((0, jsx_runtime_1.jsx)("a", { className: "crisp-recordpage-link", href: `https://${v}`, target: "_blank", rel: "noreferrer", children: String(v) }));
         default:
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: String(v) });
     }
 }
 function SectionHead({ title, count, action, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-section-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "recordpage-section-title", children: title }), count != null && ((0, jsx_runtime_1.jsx)("span", { className: "recordpage-section-count", children: count })), (0, jsx_runtime_1.jsx)("span", { className: "recordpage-section-spacer" }), action] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-section-title", children: title }), count != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-section-count", children: count })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-section-spacer" }), action] }));
 }
 // A note/task composer: a textarea (or input) with Cancel / submit actions.
 function Composer({ placeholder, submitLabel, multiline, onSubmit, onCancel, labels, }) {
@@ -154,7 +154,7 @@ function Composer({ placeholder, submitLabel, multiline, onSubmit, onCancel, lab
         if (t)
             onSubmit(t);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-composer", children: [(0, jsx_runtime_1.jsx)("textarea", { 
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-composer", children: [(0, jsx_runtime_1.jsx)("textarea", { 
                 // biome-ignore lint/a11y/noAutofocus: focusing the just-opened composer is expected
                 autoFocus: true, placeholder: placeholder, value: text, rows: multiline ? 3 : 1, onChange: (e) => setText(e.target.value), onKeyDown: (e) => {
                     if (e.key === "Enter" && (!multiline || e.metaKey)) {
@@ -163,24 +163,24 @@ function Composer({ placeholder, submitLabel, multiline, onSubmit, onCancel, lab
                     }
                     if (e.key === "Escape")
                         onCancel();
-                } }), (0, jsx_runtime_1.jsxs)("div", { className: "recordpage-composer-actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-btn", onClick: onCancel, children: labels.cancel }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-btn recordpage-btn--primary", disabled: !text.trim(), onClick: commit, children: submitLabel })] })] }));
+                } }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-composer-actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-btn", onClick: onCancel, children: labels.cancel }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-btn crisp-recordpage-btn--primary", disabled: !text.trim(), onClick: commit, children: submitLabel })] })] }));
 }
 function NotesSection({ notes, onAdd, labels, }) {
     const [open, setOpen] = React.useState(false);
-    return ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: labels.tabs.notes, count: notes.length, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), labels.newNote] }) }), open && ((0, jsx_runtime_1.jsx)(Composer, { labels: labels, multiline: true, placeholder: labels.notePlaceholder, submitLabel: labels.saveNote, onCancel: () => setOpen(false), onSubmit: (t) => {
+    return ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: labels.tabs.notes, count: notes.length, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", onClick: () => setOpen(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), labels.newNote] }) }), open && ((0, jsx_runtime_1.jsx)(Composer, { labels: labels, multiline: true, placeholder: labels.notePlaceholder, submitLabel: labels.saveNote, onCancel: () => setOpen(false), onSubmit: (t) => {
                     onAdd(t);
                     setOpen(false);
-                } })), notes.length === 0 && !open ? ((0, jsx_runtime_1.jsx)("div", { className: "recordpage-emptystate", children: labels.noNotesYet })) : (notes.map((n) => ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-note", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), (0, jsx_runtime_1.jsxs)("div", { className: "recordpage-note-body", children: [(0, jsx_runtime_1.jsxs)("div", { className: "recordpage-note-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "recordpage-note-author", children: labels.you }), (0, jsx_runtime_1.jsx)("span", { className: "recordpage-note-time", children: n.time })] }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-note-text", children: n.text })] })] }, n.id))))] }));
+                } })), notes.length === 0 && !open ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: labels.noNotesYet })) : (notes.map((n) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-note", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-note-body", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-note-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-note-author", children: labels.you }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-note-time", children: n.time })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-note-text", children: n.text })] })] }, n.id))))] }));
 }
 function TasksSection({ tasks, onAdd, onToggle, labels, }) {
     const [open, setOpen] = React.useState(false);
-    return ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: labels.tabs.tasks, count: tasks.length, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), labels.newTask] }) }), open && ((0, jsx_runtime_1.jsx)(Composer, { labels: labels, placeholder: labels.taskPlaceholder, submitLabel: labels.addTask, onCancel: () => setOpen(false), onSubmit: (t) => {
+    return ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: labels.tabs.tasks, count: tasks.length, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", onClick: () => setOpen(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), labels.newTask] }) }), open && ((0, jsx_runtime_1.jsx)(Composer, { labels: labels, placeholder: labels.taskPlaceholder, submitLabel: labels.addTask, onCancel: () => setOpen(false), onSubmit: (t) => {
                     onAdd(t);
                     setOpen(false);
-                } })), tasks.length === 0 && !open ? ((0, jsx_runtime_1.jsx)("div", { className: "recordpage-emptystate", children: labels.noTasksYet })) : (tasks.map((t) => ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-task", "data-done": t.done ? "" : undefined, children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: t.done, onChange: () => onToggle(t.id), "aria-label": t.text }), (0, jsx_runtime_1.jsx)("span", { className: "recordpage-task-text", children: t.text })] }, t.id))))] }));
+                } })), tasks.length === 0 && !open ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: labels.noTasksYet })) : (tasks.map((t) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-task", "data-done": t.done ? "" : undefined, children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: t.done, onChange: () => onToggle(t.id), "aria-label": t.text }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-task-text", children: t.text })] }, t.id))))] }));
 }
 function EmptyCard({ icon, children, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-emptycard", children: [icon, children] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-emptycard", children: [icon, children] }));
 }
 /**
  * The full-page company record view — the page that opens when you click into a
@@ -374,38 +374,38 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
         },
     ].filter(Boolean);
     const shownActivity = showAllActivity ? activity : activity.slice(0, 2);
-    const activityFeed = ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.activity, action: activity.length > 2 ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-viewall recordpage-viewall--inline", onClick: () => setShowAllActivity((s) => !s), children: showAllActivity ? t.showLess : t.viewAll })) : undefined }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-feed", children: shownActivity.map((a) => ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-feed-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "recordpage-feed-dot", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Activity, { size: 13, strokeWidth: 2 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "recordpage-feed-body", children: [a.text, (0, jsx_runtime_1.jsx)("div", { className: "recordpage-feed-time", children: a.time })] })] }, a.id))) })] }));
+    const activityFeed = ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.activity, action: activity.length > 2 ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-viewall crisp-recordpage-viewall--inline", onClick: () => setShowAllActivity((s) => !s), children: showAllActivity ? t.showLess : t.viewAll })) : undefined }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-feed", children: shownActivity.map((a) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-feed-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-feed-dot", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Activity, { size: 13, strokeWidth: 2 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-feed-body", children: [a.text, (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-feed-time", children: a.time })] })] }, a.id))) })] }));
     const emailsEmpty = ((0, jsx_runtime_1.jsx)(EmptyCard, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { size: 22, strokeWidth: 1.5 }), children: t.noEmailsWith(name) }));
     const panel = (active) => {
         switch (active) {
             case "overview":
-                return ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-panel", children: [(0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("div", { className: "recordpage-section-title", children: t.highlights }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-hl-card", children: (0, jsx_runtime_1.jsx)("div", { className: "recordpage-hl-grid", children: highlights.map((h) => ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-hl-cell", children: [(0, jsx_runtime_1.jsx)(h.icon, { className: "recordpage-hl-icon", size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-hl-label", children: h.label }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-hl-value", children: h.value ?? ((0, jsx_runtime_1.jsx)("span", { className: "recordpage-hl-value--empty", children: h.empty })) })] }, h.label))) }) })] }), activityFeed, (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.emails, count: 0 }), emailsEmpty] }), (0, jsx_runtime_1.jsx)(NotesSection, { notes: notes, onAdd: addNote, labels: t }), (0, jsx_runtime_1.jsx)(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t })] }));
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-panel", children: [(0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-section-title", children: t.highlights }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-card", children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-grid", children: highlights.map((h) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-hl-cell", children: [(0, jsx_runtime_1.jsx)(h.icon, { className: "crisp-recordpage-hl-icon", size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-label", children: h.label }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-value", children: h.value ?? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-hl-value--empty", children: h.empty })) })] }, h.label))) }) })] }), activityFeed, (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.emails, count: 0 }), emailsEmpty] }), (0, jsx_runtime_1.jsx)(NotesSection, { notes: notes, onAdd: addNote, labels: t }), (0, jsx_runtime_1.jsx)(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t })] }));
             case "activity":
-                return (0, jsx_runtime_1.jsx)("div", { className: "recordpage-panel", children: activityFeed });
+                return (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: activityFeed });
             case "notes":
-                return ((0, jsx_runtime_1.jsx)("div", { className: "recordpage-panel", children: (0, jsx_runtime_1.jsx)(NotesSection, { notes: notes, onAdd: addNote, labels: t }) }));
+                return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: (0, jsx_runtime_1.jsx)(NotesSection, { notes: notes, onAdd: addNote, labels: t }) }));
             case "tasks":
-                return ((0, jsx_runtime_1.jsx)("div", { className: "recordpage-panel", children: (0, jsx_runtime_1.jsx)(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t }) }));
+                return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: (0, jsx_runtime_1.jsx)(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t }) }));
             case "emails":
-                return (0, jsx_runtime_1.jsx)("div", { className: "recordpage-panel", children: emailsEmpty });
+                return (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: emailsEmpty });
             default:
-                return ((0, jsx_runtime_1.jsx)("div", { className: "recordpage-panel", children: (0, jsx_runtime_1.jsx)(EmptyCard, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Folder, { size: 22, strokeWidth: 1.5 }), children: t.nothingHereYet }) }));
+                return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: (0, jsx_runtime_1.jsx)(EmptyCard, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Folder, { size: 22, strokeWidth: 1.5 }), children: t.nothingHereYet }) }));
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "recordpage-topbar", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "recordpage-crumb-name", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "recordpage-actions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordpage-action recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-action recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-action recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (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, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-quickbtn", "aria-label": t.copyRecordLink, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-quickbtn", "aria-label": t.logANote, children: (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-quickbtn", "aria-label": t.linkRecords, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-quickbtn", "aria-label": t.createATask, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "recordpage-section", children: [(0, jsx_runtime_1.jsxs)("div", { className: "recordpage-detailhead", children: [searchOpen ? ((0, jsx_runtime_1.jsx)("input", { 
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (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, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? ((0, jsx_runtime_1.jsx)("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: focusing the just-opened field search is expected
-                                                autoFocus: true, type: "text", className: "recordpage-fieldsearch", placeholder: t.searchPlaceholder, "aria-label": t.searchFields, value: fieldQuery, onChange: (e) => setFieldQuery(e.target.value), onKeyDown: (e) => {
+                                                autoFocus: true, type: "text", className: "crisp-recordpage-fieldsearch", placeholder: t.searchPlaceholder, "aria-label": t.searchFields, value: fieldQuery, onChange: (e) => setFieldQuery(e.target.value), onKeyDown: (e) => {
                                                     if (e.key === "Escape") {
                                                         setSearchOpen(false);
                                                         setFieldQuery("");
                                                     }
-                                                } })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordpage-collapse", "data-collapsed": detailsOpen ? undefined : "", "aria-expanded": detailsOpen, onClick: () => setDetailsOpen((o) => !o), children: [t.recordDetails, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "recordpage-chev", size: 12, strokeWidth: 2.5 })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-detailsearch", "data-active": searchOpen ? "" : undefined, "aria-label": searchOpen ? t.closeSearch : t.searchFields, "aria-pressed": searchOpen, onClick: () => {
+                                                } })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-collapse", "data-collapsed": detailsOpen ? undefined : "", "aria-expanded": detailsOpen, onClick: () => setDetailsOpen((o) => !o), children: [t.recordDetails, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-recordpage-chev", size: 12, strokeWidth: 2.5 })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-detailsearch", "data-active": searchOpen ? "" : undefined, "aria-label": searchOpen ? t.closeSearch : t.searchFields, "aria-pressed": searchOpen, onClick: () => {
                                                     setSearchOpen((s) => !s);
                                                     setFieldQuery("");
                                                     if (!searchOpen)
                                                         setDetailsOpen(true);
                                                 }, children: searchOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 14, strokeWidth: 1.75 })) })] }), detailsOpen &&
-                                        (shownFields.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [shownFields.map((col) => ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-field", children: [(0, jsx_runtime_1.jsxs)("span", { className: "recordpage-field-label", children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : null, (0, jsx_runtime_1.jsx)("span", { className: "recordpage-field-label-text", children: col.label })] }), (0, jsx_runtime_1.jsx)("span", { className: "recordpage-field-value", children: (0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, labels: t }) })] }, col.key))), canRevealFields && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-viewall recordpage-viewall--section", onClick: () => {
+                                        (shownFields.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [shownFields.map((col) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-field", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-field-label", children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-field-label-text", children: col.label })] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-field-value", children: (0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, labels: t }) })] }, col.key))), canRevealFields && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-viewall crisp-recordpage-viewall--section", onClick: () => {
                                                         // Revealing all fields also opens the (focused)
                                                         // field search; collapsing closes it.
                                                         const next = !showAllValues;
@@ -413,7 +413,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                                                         setSearchOpen(next);
                                                         if (!next)
                                                             setFieldQuery("");
-                                                    }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), (0, jsx_runtime_1.jsxs)("div", { className: "recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": 300, "aria-valuemax": 560, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
+                                                    }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": 300, "aria-valuemax": 560, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
                             if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
                                 return;
                             // The pointer drag learned its direction in #212; this did not.
@@ -423,6 +423,6 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                             const rtl = (0, core_1.isRtlElement)(e.currentTarget);
                             const grow = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
                             setDetailsW((w) => grow ? Math.min(560, w + 16) : Math.max(300, w - 16));
-                        } }), (0, jsx_runtime_1.jsx)("main", { className: "recordpage-main", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: tabs, defaultValue: "overview", "aria-label": `${name} record`, children: panel }) })] })] }));
+                        } }), (0, jsx_runtime_1.jsx)("main", { className: "crisp-recordpage-main", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: tabs, defaultValue: "overview", "aria-label": `${name} record`, children: panel }) })] })] }));
 }
 RecordPage.displayName = "RecordPage";

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

@@ -17,140 +17,140 @@ const config = (0, core_1.defineRecipe)({
     color: ${tokens_1.contract.fgPrimary};
     & * { box-sizing: border-box; }
 
-    & .recordpage-topbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 44px; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
-    & .recordpage-crumbs { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
-    & .recordpage-crumb { display: inline-flex; align-items: center; height: 26px; padding: 0 ${tokens_1.contract.space["1.5"]}; margin: 0 calc(-1 * ${tokens_1.contract.space["1.5"]}) 0 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
-    & .recordpage-crumb:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
-    & .recordpage-crumb-sep { color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.lg}; }
-    & .recordpage-crumb-name { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .recordpage-actions { margin-inline-start: auto; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; }
-    & .recordpage-action { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["1.5"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer; white-space: nowrap; }
-    & .recordpage-action:hover { background: ${tokens_1.contract.bgRaised}; }
-    & .recordpage-action--ghost { box-shadow: none; color: ${tokens_1.contract.fgMuted}; }
-    & .recordpage-action--icon { width: 28px; padding: 0; justify-content: center; box-shadow: none; color: ${tokens_1.contract.fgMuted}; }
-    & .recordpage-action svg { flex-shrink: 0; }
+    & .crisp-recordpage-topbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 44px; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-recordpage-crumbs { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
+    & .crisp-recordpage-crumb { display: inline-flex; align-items: center; height: 26px; padding: 0 ${tokens_1.contract.space["1.5"]}; margin: 0 calc(-1 * ${tokens_1.contract.space["1.5"]}) 0 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
+    & .crisp-recordpage-crumb:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-crumb-sep { color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.lg}; }
+    & .crisp-recordpage-crumb-name { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-recordpage-actions { margin-inline-start: auto; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; }
+    & .crisp-recordpage-action { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["1.5"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer; white-space: nowrap; }
+    & .crisp-recordpage-action:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-recordpage-action--ghost { box-shadow: none; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpage-action--icon { width: 28px; padding: 0; justify-content: center; box-shadow: none; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpage-action svg { flex-shrink: 0; }
 
-    & .recordpage-body { flex: 1; min-height: 0; display: flex; }
+    & .crisp-recordpage-body { flex: 1; min-height: 0; display: flex; }
 
-    & .recordpage-details { width: 320px; flex-shrink: 0; overflow-y: auto; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; padding: ${tokens_1.contract.space["3"]}; }
-    & .recordpage-resizer { position: relative; flex: 0 0 auto; width: 0; align-self: stretch; cursor: col-resize; z-index: 5; touch-action: none; }
-    & .recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -4px; width: 9px; }
-    & .recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
-    & .recordpage-resizer:hover::after, & .recordpage-resizer[data-active]::after { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 55%, transparent); }
-    & .recordpage-entity { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2"]}; }
-    & .recordpage-entity-logo { width: 32px; height: 32px; border-radius: 30%; flex-shrink: 0; object-fit: cover; background: ${tokens_1.contract.bgRaised}; }
-    & .recordpage-entity-name { flex: 0 1 auto; min-width: 0; font-size: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.3px; color: ${tokens_1.contract.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .recordpage-entity-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
-    & .recordpage-entity-iconbtn:first-of-type { margin-inline-start: calc(-1 * ${tokens_1.contract.space["1"]}); }
-    & .recordpage-entity-iconbtn:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
-    & .recordpage-entity-iconbtn[data-active] svg { color: #f5b83d; fill: #f5b83d; }
-    & .recordpage-quickactions { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; padding: 0 ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["3"]}; }
-    & .recordpage-compose { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; padding: 0 ${tokens_1.contract.space["4"]} 0 ${tokens_1.contract.space["3"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
-    & .recordpage-compose:hover { background: ${tokens_1.contract.bgRaised}; }
-    & .recordpage-compose svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
-    & .recordpage-quickbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
-    & .recordpage-quickbtn:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
-    & .recordpage-section { padding-top: ${tokens_1.contract.space["2"]}; }
-    & .recordpage-section-title { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.12px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); padding: ${tokens_1.contract.space["1"]}; }
+    & .crisp-recordpage-details { width: 320px; flex-shrink: 0; overflow-y: auto; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; padding: ${tokens_1.contract.space["3"]}; }
+    & .crisp-recordpage-resizer { position: relative; flex: 0 0 auto; width: 0; align-self: stretch; cursor: col-resize; z-index: 5; touch-action: none; }
+    & .crisp-recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -4px; width: 9px; }
+    & .crisp-recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
+    & .crisp-recordpage-resizer:hover::after, & .crisp-recordpage-resizer[data-active]::after { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 55%, transparent); }
+    & .crisp-recordpage-entity { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2"]}; }
+    & .crisp-recordpage-entity-logo { width: 32px; height: 32px; border-radius: 30%; flex-shrink: 0; object-fit: cover; background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-recordpage-entity-name { flex: 0 1 auto; min-width: 0; font-size: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.3px; color: ${tokens_1.contract.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-recordpage-entity-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-recordpage-entity-iconbtn:first-of-type { margin-inline-start: calc(-1 * ${tokens_1.contract.space["1"]}); }
+    & .crisp-recordpage-entity-iconbtn:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-entity-iconbtn[data-active] svg { color: #f5b83d; fill: #f5b83d; }
+    & .crisp-recordpage-quickactions { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; padding: 0 ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["3"]}; }
+    & .crisp-recordpage-compose { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; padding: 0 ${tokens_1.contract.space["4"]} 0 ${tokens_1.contract.space["3"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .crisp-recordpage-compose:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-recordpage-compose svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpage-quickbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-recordpage-quickbtn:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-section { padding-top: ${tokens_1.contract.space["2"]}; }
+    & .crisp-recordpage-section-title { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.12px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); padding: ${tokens_1.contract.space["1"]}; }
     /* main-area section headers (Highlights / Activity / Emails / Notes / Tasks)
        are 14px; the left column's (Record Details / Lists) stay 12px. */
-    & .recordpage-main .recordpage-section-title { font-size: ${tokens_1.contract.text.lg}; }
-    & .recordpage-detailhead { display: flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; margin-bottom: ${tokens_1.contract.space["3"]}; padding-inline-end: ${tokens_1.contract.space["0.5"]}; }
-    & .recordpage-collapse { display: inline-flex; align-items: center; gap: 2px; flex: 1; min-width: 0; margin: 0; border: none; background: none; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.12px; color: ${tokens_1.contract.fgMuted}; cursor: pointer; text-align: start; }
-    & .recordpage-collapse:hover { color: ${tokens_1.contract.fgPrimary}; }
-    & .recordpage-collapse .recordpage-chev { flex-shrink: 0; transition: transform .15s ease; }
-    & .recordpage-collapse[data-collapsed] .recordpage-chev { transform: rotate(-90deg); }
-    & .recordpage-fieldsearch { flex: 1; min-width: 0; border: none; outline: none; background: none; padding: ${tokens_1.contract.space["1"]}; font-family: inherit; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.12px; color: ${tokens_1.contract.fgPrimary}; }
-    & .recordpage-fieldsearch:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; border-radius: ${tokens_1.contract.radius.md}; }
-    & .recordpage-fieldsearch::placeholder { color: ${tokens_1.contract.fgMuted}; font-weight: ${tokens_1.contract.weight.regular}; }
-    & .recordpage-detailsearch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: ${tokens_1.contract.size.chip}; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
-    & .recordpage-detailsearch:hover, & .recordpage-detailsearch[data-active] { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
-    & .recordpage-noresults { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
-    & .recordpage-morevalues { display: inline-flex; align-items: center; padding: 0; margin: 0; border: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
-    & .recordpage-morevalues:hover { color: ${tokens_1.contract.fgPrimary}; }
-    & .recordpage-viewall { flex-basis: 100%; margin-top: ${tokens_1.contract.space["0.5"]}; border: none; background: none; padding: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); font-family: inherit; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.regular}; cursor: pointer; text-align: start; }
-    & .recordpage-viewall:hover { color: ${tokens_1.contract.fgPrimary}; }
-    & .recordpage-viewall--inline { flex-basis: auto; margin-top: 0; }
-    & .recordpage-viewall--section { display: block; flex-basis: auto; margin-top: 0; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]}; }
-    & .recordpage-field { display: grid; grid-template-columns: 30% 1fr; align-items: start; column-gap: ${tokens_1.contract.space["2"]}; min-height: 32px; padding: ${tokens_1.contract.space["0.5"]} ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.md}; }
-    & .recordpage-field + .recordpage-field { margin-top: ${tokens_1.contract.space["0.5"]}; }
-    & .recordpage-field:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 3%, transparent); }
-    & .recordpage-field-label { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; overflow: hidden; padding-top: 2px; line-height: 20px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; }
-    & .recordpage-field-label svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
-    & .recordpage-field-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .recordpage-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: ${tokens_1.contract.space["1"]}; padding-top: 2px; line-height: 20px; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
-    & .recordpage-empty { color: ${tokens_1.contract.fgMuted}; }
-    & .recordpage-link { color: ${tokens_1.contract.fgPrimary}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
-    & .recordpage-link:hover { text-decoration: underline; }
-    & .recordpage-emptystate { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpage-main .crisp-recordpage-section-title { font-size: ${tokens_1.contract.text.lg}; }
+    & .crisp-recordpage-detailhead { display: flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; margin-bottom: ${tokens_1.contract.space["3"]}; padding-inline-end: ${tokens_1.contract.space["0.5"]}; }
+    & .crisp-recordpage-collapse { display: inline-flex; align-items: center; gap: 2px; flex: 1; min-width: 0; margin: 0; border: none; background: none; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.12px; color: ${tokens_1.contract.fgMuted}; cursor: pointer; text-align: start; }
+    & .crisp-recordpage-collapse:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-collapse .crisp-recordpage-chev { flex-shrink: 0; transition: transform .15s ease; }
+    & .crisp-recordpage-collapse[data-collapsed] .crisp-recordpage-chev { transform: rotate(-90deg); }
+    & .crisp-recordpage-fieldsearch { flex: 1; min-width: 0; border: none; outline: none; background: none; padding: ${tokens_1.contract.space["1"]}; font-family: inherit; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.12px; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-fieldsearch:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; border-radius: ${tokens_1.contract.radius.md}; }
+    & .crisp-recordpage-fieldsearch::placeholder { color: ${tokens_1.contract.fgMuted}; font-weight: ${tokens_1.contract.weight.regular}; }
+    & .crisp-recordpage-detailsearch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: ${tokens_1.contract.size.chip}; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-recordpage-detailsearch:hover, & .crisp-recordpage-detailsearch[data-active] { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-noresults { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpage-morevalues { display: inline-flex; align-items: center; padding: 0; margin: 0; border: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
+    & .crisp-recordpage-morevalues:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-viewall { flex-basis: 100%; margin-top: ${tokens_1.contract.space["0.5"]}; border: none; background: none; padding: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); font-family: inherit; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.regular}; cursor: pointer; text-align: start; }
+    & .crisp-recordpage-viewall:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-viewall--inline { flex-basis: auto; margin-top: 0; }
+    & .crisp-recordpage-viewall--section { display: block; flex-basis: auto; margin-top: 0; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]}; }
+    & .crisp-recordpage-field { display: grid; grid-template-columns: 30% 1fr; align-items: start; column-gap: ${tokens_1.contract.space["2"]}; min-height: 32px; padding: ${tokens_1.contract.space["0.5"]} ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.md}; }
+    & .crisp-recordpage-field + .crisp-recordpage-field { margin-top: ${tokens_1.contract.space["0.5"]}; }
+    & .crisp-recordpage-field:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 3%, transparent); }
+    & .crisp-recordpage-field-label { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; overflow: hidden; padding-top: 2px; line-height: 20px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; }
+    & .crisp-recordpage-field-label svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpage-field-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-recordpage-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: ${tokens_1.contract.space["1"]}; padding-top: 2px; line-height: 20px; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-empty { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpage-link { color: ${tokens_1.contract.fgPrimary}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-recordpage-link:hover { text-decoration: underline; }
+    & .crisp-recordpage-emptystate { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
 
-    & .recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["5"]}; }
+    & .crisp-recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["5"]}; }
 
-    & .recordpage-panel { padding-top: ${tokens_1.contract.space["4"]}; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; }
-    & .recordpage-card { border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: ${tokens_1.contract.radius["2xl"]}; background: ${tokens_1.contract.bgSurface}; overflow: hidden; }
-    & .recordpage-card-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.14px; color: ${tokens_1.contract.fgPrimary}; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; }
-    & .recordpage-hl-card { border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: ${tokens_1.contract.radius["2xl"]}; overflow: hidden; }
+    & .crisp-recordpage-panel { padding-top: ${tokens_1.contract.space["4"]}; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; }
+    & .crisp-recordpage-card { border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: ${tokens_1.contract.radius["2xl"]}; background: ${tokens_1.contract.bgSurface}; overflow: hidden; }
+    & .crisp-recordpage-card-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.14px; color: ${tokens_1.contract.fgPrimary}; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; }
+    & .crisp-recordpage-hl-card { border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: ${tokens_1.contract.radius["2xl"]}; overflow: hidden; }
     /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any
        column count, so the grid stays responsive (auto-fit) without per-cell
        nth-child border hacks that break when the column count changes. */
-    & .recordpage-hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: ${tokens_1.contract.borderSubtle}; }
-    & .recordpage-hl-cell { position: relative; min-height: 84px; padding: ${tokens_1.contract.space["2.5"]} ${tokens_1.contract.space["3"]}; background: ${tokens_1.contract.bgSurface}; }
-    & .recordpage-hl-icon { position: absolute; top: ${tokens_1.contract.space["2.5"]}; inset-inline-end: ${tokens_1.contract.space["3"]}; color: ${tokens_1.contract.fgMuted}; }
-    & .recordpage-hl-label { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); margin-bottom: ${tokens_1.contract.space["2.5"]}; padding-inline-end: ${tokens_1.contract.space["4"]}; }
-    & .recordpage-hl-value { display: flex; flex-wrap: wrap; align-items: center; gap: ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
-    & .recordpage-hl-value--empty { color: ${tokens_1.contract.fgMuted}; font-weight: ${tokens_1.contract.weight.regular}; }
+    & .crisp-recordpage-hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: ${tokens_1.contract.borderSubtle}; }
+    & .crisp-recordpage-hl-cell { position: relative; min-height: 84px; padding: ${tokens_1.contract.space["2.5"]} ${tokens_1.contract.space["3"]}; background: ${tokens_1.contract.bgSurface}; }
+    & .crisp-recordpage-hl-icon { position: absolute; top: ${tokens_1.contract.space["2.5"]}; inset-inline-end: ${tokens_1.contract.space["3"]}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpage-hl-label { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); margin-bottom: ${tokens_1.contract.space["2.5"]}; padding-inline-end: ${tokens_1.contract.space["4"]}; }
+    & .crisp-recordpage-hl-value { display: flex; flex-wrap: wrap; align-items: center; gap: ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-hl-value--empty { color: ${tokens_1.contract.fgMuted}; font-weight: ${tokens_1.contract.weight.regular}; }
 
-    & .recordpage-feed { display: flex; flex-direction: column; }
-    & .recordpage-feed-item { display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2.5"]}; padding: ${tokens_1.contract.space["2"]} 0; }
-    & .recordpage-feed-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgMuted}; }
-    & .recordpage-feed-body { flex: 1; min-width: 0; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; }
-    & .recordpage-feed-body b { font-weight: ${tokens_1.contract.weight.medium}; }
-    & .recordpage-feed-time { font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; margin-top: 2px; }
-    & .recordpage-feed-more { align-self: flex-start; margin-top: ${tokens_1.contract.space["1"]}; border: none; background: none; padding: ${tokens_1.contract.space["1"]} 0; color: ${tokens_1.contract.bgBrandSolid}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
-    & .recordpage-feed-more:hover { text-decoration: underline; }
+    & .crisp-recordpage-feed { display: flex; flex-direction: column; }
+    & .crisp-recordpage-feed-item { display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2.5"]}; padding: ${tokens_1.contract.space["2"]} 0; }
+    & .crisp-recordpage-feed-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpage-feed-body { flex: 1; min-width: 0; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-feed-body b { font-weight: ${tokens_1.contract.weight.medium}; }
+    & .crisp-recordpage-feed-time { font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; margin-top: 2px; }
+    & .crisp-recordpage-feed-more { align-self: flex-start; margin-top: ${tokens_1.contract.space["1"]}; border: none; background: none; padding: ${tokens_1.contract.space["1"]} 0; color: ${tokens_1.contract.bgBrandSolid}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
+    & .crisp-recordpage-feed-more:hover { text-decoration: underline; }
 
-    & .recordpage-section-head { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; padding: ${tokens_1.contract.space["1"]}; }
-    & .recordpage-section-head .recordpage-section-title { padding: 0; }
-    & .recordpage-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
-    & .recordpage-section-spacer { flex: 1; }
-    & .recordpage-addbtn { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: 26px; padding: 0 ${tokens_1.contract.space["1.5"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
-    & .recordpage-addbtn:hover { background: ${tokens_1.contract.bgRaised}; }
-    & .recordpage-addbtn svg { flex-shrink: 0; }
+    & .crisp-recordpage-section-head { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; padding: ${tokens_1.contract.space["1"]}; }
+    & .crisp-recordpage-section-head .crisp-recordpage-section-title { padding: 0; }
+    & .crisp-recordpage-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpage-section-spacer { flex: 1; }
+    & .crisp-recordpage-addbtn { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: 26px; padding: 0 ${tokens_1.contract.space["1.5"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
+    & .crisp-recordpage-addbtn:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-recordpage-addbtn svg { flex-shrink: 0; }
 
-    & .recordpage-composer { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["2"]}; border: 1px solid ${tokens_1.contract.borderDefault}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; margin-bottom: ${tokens_1.contract.space["2"]}; }
-    & .recordpage-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
-    & .recordpage-composer textarea:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; border-radius: ${tokens_1.contract.radius.md}; }
-    & .recordpage-composer textarea::placeholder { color: ${tokens_1.contract.fgMuted}; }
-    & .recordpage-composer-actions { display: flex; justify-content: flex-end; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; }
-    & .recordpage-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 ${tokens_1.contract.space["2.5"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; box-shadow: ${tokens_1.elevation.field}; background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgPrimary}; }
-    & .recordpage-btn:hover { background: ${tokens_1.contract.bgRaised}; }
-    & .recordpage-btn--primary { box-shadow: none; background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; }
-    & .recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-recordpage-composer { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["2"]}; border: 1px solid ${tokens_1.contract.borderDefault}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; margin-bottom: ${tokens_1.contract.space["2"]}; }
+    & .crisp-recordpage-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-composer textarea:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; border-radius: ${tokens_1.contract.radius.md}; }
+    & .crisp-recordpage-composer textarea::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpage-composer-actions { display: flex; justify-content: flex-end; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; }
+    & .crisp-recordpage-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 ${tokens_1.contract.space["2.5"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; box-shadow: ${tokens_1.elevation.field}; background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-btn:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-recordpage-btn--primary { box-shadow: none; background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; }
+    & .crisp-recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
-    & .recordpage-note { display: flex; gap: ${tokens_1.contract.space["2.5"]}; padding: ${tokens_1.contract.space["2.5"]} 0; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
-    & .recordpage-note-body { flex: 1; min-width: 0; }
-    & .recordpage-note-head { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; margin-bottom: ${tokens_1.contract.space["0.5"]}; }
-    & .recordpage-note-author { font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
-    & .recordpage-note-time { font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
-    & .recordpage-note-text { font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; white-space: pre-wrap; word-break: break-word; }
+    & .crisp-recordpage-note { display: flex; gap: ${tokens_1.contract.space["2.5"]}; padding: ${tokens_1.contract.space["2.5"]} 0; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-recordpage-note-body { flex: 1; min-width: 0; }
+    & .crisp-recordpage-note-head { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; margin-bottom: ${tokens_1.contract.space["0.5"]}; }
+    & .crisp-recordpage-note-author { font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-note-time { font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpage-note-text { font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; white-space: pre-wrap; word-break: break-word; }
 
-    & .recordpage-task { display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["1.5"]} 0; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
-    & .recordpage-task-text { flex: 1; min-width: 0; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; padding-top: 1px; }
-    & .recordpage-task[data-done] .recordpage-task-text { text-decoration: line-through; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpage-task { display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["1.5"]} 0; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-recordpage-task-text { flex: 1; min-width: 0; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; padding-top: 1px; }
+    & .crisp-recordpage-task[data-done] .crisp-recordpage-task-text { text-decoration: line-through; color: ${tokens_1.contract.fgMuted}; }
 
-    & .recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; padding: ${tokens_1.contract.space["6"]} ${tokens_1.contract.space["3"]}; border: 1px dashed ${tokens_1.contract.borderDefault}; border-radius: ${tokens_1.contract.radius.xl}; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.md}; text-align: center; }
-    & .recordpage-emptycard svg { color: ${tokens_1.contract.fgMuted}; opacity: 0.7; }
+    & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; padding: ${tokens_1.contract.space["6"]} ${tokens_1.contract.space["3"]}; border: 1px dashed ${tokens_1.contract.borderDefault}; border-radius: ${tokens_1.contract.radius.xl}; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.md}; text-align: center; }
+    & .crisp-recordpage-emptycard svg { color: ${tokens_1.contract.fgMuted}; opacity: 0.7; }
 
-    & .recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
+    & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
 
-    & .recordstable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); }
-    & .recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 82%, ${tokens_1.contract.fgPrimary}); }
-    & .recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 78%, ${tokens_1.contract.fgPrimary}); }
-    & .recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgWarning} 82%, ${tokens_1.contract.fgPrimary}); }
-    & .recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 15%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgDanger} 80%, ${tokens_1.contract.fgPrimary}); }
-    & .recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); }
-    & .recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); }
-    & .recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); }
+    & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 78%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgWarning} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 15%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgDanger} 80%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
   `,
     variants: {},
     defaultVariants: {},

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

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