@crisp-ui-kit/crisp 0.5.0 → 0.7.0

package/dist/esm/product/recordpage/recordpage.js

@@ -10,19 +10,83 @@ import { recordpageRecipe } from "./recordpage.recipe.js";
 function valueEmpty(v) {
     return v == null || v === "" || (Array.isArray(v) && v.length === 0);
 }
-// Tags value — the first chip inline with a clickable muted "+N" that expands
-// to show every chip (Attio's per-field click-to-expand, independent of the
-// section-level "View all values" that reveals hidden fields).
+export const recordPageLabels = {
+    breadcrumb: "Breadcrumb",
+    editRecord: "Edit record",
+    recordActions: "Record actions",
+    addToFavourites: "Add to favourites",
+    removeFromFavourites: "Remove from favourites",
+    copyRecordLink: "Copy record link",
+    deleteRecord: "Delete record",
+    linkRecords: "Link records",
+    logANote: "Log a note",
+    createATask: "Create a task",
+    fullScreen: "Full screen",
+    exitFullScreen: "Exit full screen",
+    resizeDetails: "Resize details column",
+    composeEmail: "Compose email",
+    askAttio: "Ask Attio",
+    addToList: "Add to list",
+    highlights: "Highlights",
+    recordDetails: "Record Details",
+    searchFields: "Search fields",
+    closeSearch: "Close search",
+    searchPlaceholder: "Search…",
+    viewAllValues: "View all values",
+    setAValue: "Set a value…",
+    viewAll: "View all",
+    showLess: "Show less",
+    viewLess: "View less",
+    newNote: "New note",
+    newTask: "New task",
+    cancel: "Cancel",
+    noNotesYet: "No notes yet.",
+    noTasksYet: "No tasks yet.",
+    nothingHereYet: "Nothing here yet.",
+    you: "You",
+    justNow: "Just now",
+    tabs: {
+        overview: "Overview",
+        activity: "Activity",
+        emails: "Emails",
+        calls: "Calls",
+        team: "Team",
+        lists: "Lists",
+        notes: "Notes",
+        tasks: "Tasks",
+        files: "Files",
+    },
+    highlightLabels: {
+        connectionStrength: "Connection strength",
+        nextInteraction: "Next calendar interaction",
+        team: "Team",
+        estimatedArr: "Estimated ARR",
+        fundingRaised: "Funding raised",
+        employeeRange: "Employee range",
+        associatedDeals: "Associated deals",
+    },
+    highlightEmpty: {
+        connectionStrength: "No connection",
+        nextInteraction: "No interaction",
+        team: "No team",
+        estimatedArr: "No ARR",
+        fundingRaised: "No funding raised",
+        employeeRange: "No range",
+        associatedDeals: "No deals",
+    },
+    domainSetTo: (value) => (_jsxs(_Fragment, { children: ["Domain set to ", _jsx("b", { children: value })] })),
+    taggedCategories: (count) => (_jsxs(_Fragment, { children: ["Tagged ", _jsx("b", { children: count }), " categories"] })),
+};
 function TagsValue({ values }) {
     const [expanded, setExpanded] = React.useState(false);
     const overflow = values.length - 1;
     const shown = expanded ? values : values.slice(0, 1);
     return (_jsxs(_Fragment, { children: [shown.map((t) => (_jsx("span", { className: "recordstable-tag", "data-tone": tagTone(t), children: t }, t))), !expanded && overflow > 0 && (_jsxs("button", { type: "button", className: "recordpage-morevalues", onClick: () => setExpanded(true), children: ["+", overflow] }))] }));
 }
-function FieldValue({ col, row }) {
+function FieldValue({ col, row, labels, }) {
     const v = row[col.key];
     if (valueEmpty(v))
-        return _jsx("span", { className: "recordpage-empty", children: "Set a value\u2026" });
+        return _jsx("span", { className: "recordpage-empty", children: labels.setAValue });
     switch (col.type) {
         case "tags":
             return _jsx(TagsValue, { values: v });
@@ -38,7 +102,7 @@ function SectionHead({ title, count, action, }) {
     return (_jsxs("div", { className: "recordpage-section-head", children: [_jsx("span", { className: "recordpage-section-title", children: title }), count != null && (_jsx("span", { className: "recordpage-section-count", children: count })), _jsx("span", { className: "recordpage-section-spacer" }), action] }));
 }
 // A note/task composer: a textarea (or input) with Cancel / submit actions.
-function Composer({ placeholder, submitLabel, multiline, onSubmit, onCancel, }) {
+function Composer({ placeholder, submitLabel, multiline, onSubmit, onCancel, labels, }) {
     const [text, setText] = React.useState("");
     const commit = () => {
         const t = text.trim();
@@ -54,21 +118,21 @@ function Composer({ placeholder, submitLabel, multiline, onSubmit, onCancel, })
                     }
                     if (e.key === "Escape")
                         onCancel();
-                } }), _jsxs("div", { className: "recordpage-composer-actions", children: [_jsx("button", { type: "button", className: "recordpage-btn", onClick: onCancel, children: "Cancel" }), _jsx("button", { type: "button", className: "recordpage-btn recordpage-btn--primary", disabled: !text.trim(), onClick: commit, children: submitLabel })] })] }));
+                } }), _jsxs("div", { className: "recordpage-composer-actions", children: [_jsx("button", { type: "button", className: "recordpage-btn", onClick: onCancel, children: labels.cancel }), _jsx("button", { type: "button", className: "recordpage-btn recordpage-btn--primary", disabled: !text.trim(), onClick: commit, children: submitLabel })] })] }));
 }
-function NotesSection({ notes, onAdd, }) {
+function NotesSection({ notes, onAdd, labels, }) {
     const [open, setOpen] = React.useState(false);
-    return (_jsxs("section", { children: [_jsx(SectionHead, { title: "Notes", count: notes.length, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), "New note"] }) }), open && (_jsx(Composer, { multiline: true, placeholder: "Write a note\u2026  (\u2318\u21B5 to save)", submitLabel: "Save note", onCancel: () => setOpen(false), onSubmit: (t) => {
+    return (_jsxs("section", { children: [_jsx(SectionHead, { title: labels.tabs.notes, count: notes.length, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), labels.newNote] }) }), open && (_jsx(Composer, { labels: labels, multiline: true, placeholder: "Write a note\u2026  (\u2318\u21B5 to save)", submitLabel: "Save note", onCancel: () => setOpen(false), onSubmit: (t) => {
                     onAdd(t);
                     setOpen(false);
-                } })), notes.length === 0 && !open ? (_jsx("div", { className: "recordpage-emptystate", children: "No notes yet." })) : (notes.map((n) => (_jsxs("div", { className: "recordpage-note", children: [_jsx(Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), _jsxs("div", { className: "recordpage-note-body", children: [_jsxs("div", { className: "recordpage-note-head", children: [_jsx("span", { className: "recordpage-note-author", children: "You" }), _jsx("span", { className: "recordpage-note-time", children: n.time })] }), _jsx("div", { className: "recordpage-note-text", children: n.text })] })] }, n.id))))] }));
+                } })), notes.length === 0 && !open ? (_jsx("div", { className: "recordpage-emptystate", children: labels.noNotesYet })) : (notes.map((n) => (_jsxs("div", { className: "recordpage-note", children: [_jsx(Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), _jsxs("div", { className: "recordpage-note-body", children: [_jsxs("div", { className: "recordpage-note-head", children: [_jsx("span", { className: "recordpage-note-author", children: labels.you }), _jsx("span", { className: "recordpage-note-time", children: n.time })] }), _jsx("div", { className: "recordpage-note-text", children: n.text })] })] }, n.id))))] }));
 }
-function TasksSection({ tasks, onAdd, onToggle, }) {
+function TasksSection({ tasks, onAdd, onToggle, labels, }) {
     const [open, setOpen] = React.useState(false);
-    return (_jsxs("section", { children: [_jsx(SectionHead, { title: "Tasks", count: tasks.length, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), "New task"] }) }), open && (_jsx(Composer, { placeholder: "Task name\u2026  (\u21B5 to add)", submitLabel: "Add task", onCancel: () => setOpen(false), onSubmit: (t) => {
+    return (_jsxs("section", { children: [_jsx(SectionHead, { title: labels.tabs.tasks, count: tasks.length, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), labels.newTask] }) }), open && (_jsx(Composer, { labels: labels, placeholder: "Task name\u2026  (\u21B5 to add)", submitLabel: "Add task", onCancel: () => setOpen(false), onSubmit: (t) => {
                     onAdd(t);
                     setOpen(false);
-                } })), tasks.length === 0 && !open ? (_jsx("div", { className: "recordpage-emptystate", children: "No tasks yet." })) : (tasks.map((t) => (_jsxs("div", { className: "recordpage-task", "data-done": t.done ? "" : undefined, children: [_jsx(Checkbox, { checked: t.done, onChange: () => onToggle(t.id), "aria-label": t.text }), _jsx("span", { className: "recordpage-task-text", children: t.text })] }, t.id))))] }));
+                } })), tasks.length === 0 && !open ? (_jsx("div", { className: "recordpage-emptystate", children: labels.noTasksYet })) : (tasks.map((t) => (_jsxs("div", { className: "recordpage-task", "data-done": t.done ? "" : undefined, children: [_jsx(Checkbox, { checked: t.done, onChange: () => onToggle(t.id), "aria-label": t.text }), _jsx("span", { className: "recordpage-task-text", children: t.text })] }, t.id))))] }));
 }
 function EmptyCard({ icon, children, }) {
     return (_jsxs("div", { className: "recordpage-emptycard", children: [icon, children] }));
@@ -81,7 +145,20 @@ function EmptyCard({ icon, children, }) {
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-export function RecordPage({ record, columns, collection = "Records", onBack, onToggleFull, full, className, }) {
+export function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, }) {
+    const t = React.useMemo(() => ({
+        ...recordPageLabels,
+        ...labels,
+        tabs: { ...recordPageLabels.tabs, ...labels?.tabs },
+        highlightLabels: {
+            ...recordPageLabels.highlightLabels,
+            ...labels?.highlightLabels,
+        },
+        highlightEmpty: {
+            ...recordPageLabels.highlightEmpty,
+            ...labels?.highlightEmpty,
+        },
+    }), [labels]);
     const [favorite, setFavorite] = React.useState(false);
     const [notes, setNotes] = React.useState([]);
     const [tasks, setTasks] = React.useState([]);
@@ -151,65 +228,74 @@ export function RecordPage({ record, columns, collection = "Records", onBack, on
                 : "<1K";
     const highlights = [
         {
-            label: "Connection strength",
+            label: t.highlightLabels.connectionStrength,
             icon: Zap,
             value: null,
-            empty: "No connection",
+            empty: t.highlightEmpty.connectionStrength,
         },
         {
-            label: "Next calendar interaction",
+            label: t.highlightLabels.nextInteraction,
             icon: CalendarClock,
             value: null,
-            empty: "No interaction",
+            empty: t.highlightEmpty.nextInteraction,
         },
-        { label: "Team", icon: Users, value: null, empty: "No team" },
         {
-            label: "Estimated ARR",
+            label: t.highlightLabels.team,
+            icon: Users,
+            value: null,
+            empty: t.highlightEmpty.team,
+        },
+        {
+            label: t.highlightLabels.estimatedArr,
             icon: DollarSign,
             value: typeof arrVal === "number" ? compactUsd(arrVal) : null,
-            empty: "No ARR",
+            empty: t.highlightEmpty.estimatedArr,
         },
         {
-            label: "Funding raised",
+            label: t.highlightLabels.fundingRaised,
             icon: Landmark,
             value: null,
-            empty: "No funding raised",
+            empty: t.highlightEmpty.fundingRaised,
         },
         {
-            label: "Employee range",
+            label: t.highlightLabels.employeeRange,
             icon: UsersRound,
             value: typeof empVal === "number" ? empRange(empVal) : null,
-            empty: "No range",
+            empty: t.highlightEmpty.employeeRange,
         },
     ];
     const ti = { size: 15, strokeWidth: 1.75 };
     const tabs = [
-        { value: "overview", label: "Overview", icon: _jsx(LayoutGrid, { ...ti }) },
-        { value: "activity", label: "Activity", icon: _jsx(ActivityIcon, { ...ti }) },
-        { value: "emails", label: "Emails", icon: _jsx(Mail, { ...ti }), badge: 0 },
-        { value: "calls", label: "Calls", icon: _jsx(Phone, { ...ti }), badge: 0 },
-        { value: "team", label: "Team", icon: _jsx(Users, { ...ti }), badge: 0 },
+        { value: "overview", label: t.tabs.overview, icon: _jsx(LayoutGrid, { ...ti }) },
+        {
+            value: "activity",
+            label: t.tabs.activity,
+            icon: _jsx(ActivityIcon, { ...ti }),
+        },
+        { value: "emails", label: t.tabs.emails, icon: _jsx(Mail, { ...ti }), badge: 0 },
+        { value: "calls", label: t.tabs.calls, icon: _jsx(Phone, { ...ti }), badge: 0 },
+        { value: "team", label: t.tabs.team, icon: _jsx(Users, { ...ti }), badge: 0 },
         {
             value: "notes",
-            label: "Notes",
+            label: t.tabs.notes,
             icon: _jsx(FileText, { ...ti }),
             badge: notes.length,
         },
         {
             value: "tasks",
-            label: "Tasks",
+            label: t.tabs.tasks,
             icon: _jsx(SquareCheck, { ...ti }),
             badge: tasks.length,
         },
-        { value: "files", label: "Files", icon: _jsx(Folder, { ...ti }) },
+        { value: "files", label: t.tabs.files, icon: _jsx(Folder, { ...ti }) },
         {
             value: "deals",
-            label: "Associated deals",
+            label: t.highlightLabels.associatedDeals,
             icon: _jsx(CircleDollarSign, { ...ti }),
             badge: 0,
         },
     ];
-    const addNote = (text) => setNotes((n) => [{ id: nextId(), text, time: "Just now" }, ...n]);
+    const addNote = (text) => setNotes((n) => [{ id: nextId(), text, time: t.justNow }, ...n]);
     const addTask = (text) => setTasks((t) => [{ id: nextId(), text, done: false }, ...t]);
     const toggleTask = (id) => setTasks((t) => t.map((x) => (x.id === id ? { ...x, done: !x.done } : x)));
     // A small, plausible activity feed derived from the record's own fields.
@@ -219,14 +305,14 @@ export function RecordPage({ record, columns, collection = "Records", onBack, on
         domain && !valueEmpty(record[domain.key])
             ? {
                 id: "domain",
-                text: (_jsxs(_Fragment, { children: ["Domain set to ", _jsx("b", { children: String(record[domain.key]) })] })),
+                text: _jsx(_Fragment, { children: t.domainSetTo(String(record[domain.key])) }),
                 time: "2 hours ago",
             }
             : null,
         cats && !valueEmpty(record[cats.key])
             ? {
                 id: "cats",
-                text: (_jsxs(_Fragment, { children: ["Tagged ", _jsx("b", { children: record[cats.key].length }), " categories"] })),
+                text: t.taggedCategories(record[cats.key].length),
                 time: "1 day ago",
             }
             : null,
@@ -237,38 +323,38 @@ export function RecordPage({ record, columns, collection = "Records", onBack, on
         },
     ].filter(Boolean);
     const shownActivity = showAllActivity ? activity : activity.slice(0, 2);
-    const activityFeed = (_jsxs("section", { children: [_jsx(SectionHead, { title: "Activity", action: activity.length > 2 ? (_jsx("button", { type: "button", className: "recordpage-viewall recordpage-viewall--inline", onClick: () => setShowAllActivity((s) => !s), children: showAllActivity ? "Show less" : "View all" })) : undefined }), _jsx("div", { className: "recordpage-feed", children: shownActivity.map((a) => (_jsxs("div", { className: "recordpage-feed-item", children: [_jsx("span", { className: "recordpage-feed-dot", children: _jsx(ActivityIcon, { size: 13, strokeWidth: 2 }) }), _jsxs("div", { className: "recordpage-feed-body", children: [a.text, _jsx("div", { className: "recordpage-feed-time", children: a.time })] })] }, a.id))) })] }));
+    const activityFeed = (_jsxs("section", { children: [_jsx(SectionHead, { title: t.tabs.activity, action: activity.length > 2 ? (_jsx("button", { type: "button", className: "recordpage-viewall recordpage-viewall--inline", onClick: () => setShowAllActivity((s) => !s), children: showAllActivity ? t.showLess : t.viewAll })) : undefined }), _jsx("div", { className: "recordpage-feed", children: shownActivity.map((a) => (_jsxs("div", { className: "recordpage-feed-item", children: [_jsx("span", { className: "recordpage-feed-dot", children: _jsx(ActivityIcon, { size: 13, strokeWidth: 2 }) }), _jsxs("div", { className: "recordpage-feed-body", children: [a.text, _jsx("div", { className: "recordpage-feed-time", children: a.time })] })] }, a.id))) })] }));
     const emailsEmpty = (_jsxs(EmptyCard, { icon: _jsx(Inbox, { size: 22, strokeWidth: 1.5 }), children: ["No emails logged with ", name, " yet."] }));
     const panel = (active) => {
         switch (active) {
             case "overview":
-                return (_jsxs("div", { className: "recordpage-panel", children: [_jsxs("section", { children: [_jsx("div", { className: "recordpage-section-title", children: "Highlights" }), _jsx("div", { className: "recordpage-hl-card", children: _jsx("div", { className: "recordpage-hl-grid", children: highlights.map((h) => (_jsxs("div", { className: "recordpage-hl-cell", children: [_jsx(h.icon, { className: "recordpage-hl-icon", size: 15, strokeWidth: 1.75 }), _jsx("div", { className: "recordpage-hl-label", children: h.label }), _jsx("div", { className: "recordpage-hl-value", children: h.value ?? (_jsx("span", { className: "recordpage-hl-value--empty", children: h.empty })) })] }, h.label))) }) })] }), activityFeed, _jsxs("section", { children: [_jsx(SectionHead, { title: "Emails", count: 0 }), emailsEmpty] }), _jsx(NotesSection, { notes: notes, onAdd: addNote }), _jsx(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask })] }));
+                return (_jsxs("div", { className: "recordpage-panel", children: [_jsxs("section", { children: [_jsx("div", { className: "recordpage-section-title", children: t.highlights }), _jsx("div", { className: "recordpage-hl-card", children: _jsx("div", { className: "recordpage-hl-grid", children: highlights.map((h) => (_jsxs("div", { className: "recordpage-hl-cell", children: [_jsx(h.icon, { className: "recordpage-hl-icon", size: 15, strokeWidth: 1.75 }), _jsx("div", { className: "recordpage-hl-label", children: h.label }), _jsx("div", { className: "recordpage-hl-value", children: h.value ?? (_jsx("span", { className: "recordpage-hl-value--empty", children: h.empty })) })] }, h.label))) }) })] }), activityFeed, _jsxs("section", { children: [_jsx(SectionHead, { title: t.tabs.emails, count: 0 }), emailsEmpty] }), _jsx(NotesSection, { notes: notes, onAdd: addNote, labels: t }), _jsx(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t })] }));
             case "activity":
                 return _jsx("div", { className: "recordpage-panel", children: activityFeed });
             case "notes":
-                return (_jsx("div", { className: "recordpage-panel", children: _jsx(NotesSection, { notes: notes, onAdd: addNote }) }));
+                return (_jsx("div", { className: "recordpage-panel", children: _jsx(NotesSection, { notes: notes, onAdd: addNote, labels: t }) }));
             case "tasks":
-                return (_jsx("div", { className: "recordpage-panel", children: _jsx(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask }) }));
+                return (_jsx("div", { className: "recordpage-panel", children: _jsx(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t }) }));
             case "emails":
                 return _jsx("div", { className: "recordpage-panel", children: emailsEmpty });
             default:
-                return (_jsx("div", { className: "recordpage-panel", children: _jsx(EmptyCard, { icon: _jsx(Folder, { size: 22, strokeWidth: 1.5 }), children: "Nothing here yet." }) }));
+                return (_jsx("div", { className: "recordpage-panel", children: _jsx(EmptyCard, { icon: _jsx(Folder, { size: 22, strokeWidth: 1.5 }), children: t.nothingHereYet }) }));
         }
     };
-    return (_jsxs("div", { className: recordpageRecipe({ className }), children: [_jsxs("div", { className: "recordpage-topbar", children: [_jsxs("nav", { className: "recordpage-crumbs", "aria-label": "Breadcrumb", children: [_jsx("button", { type: "button", className: "recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "recordpage-crumb-name", children: name })] }), _jsxs("div", { className: "recordpage-actions", children: [_jsxs("button", { type: "button", className: "recordpage-action recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--bg-brand-solid)" }), "Ask Attio"] }), onToggleFull && (_jsx("button", { type: "button", className: "recordpage-action recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? "Exit full screen" : "Full screen", children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": "Record actions", trigger: _jsx("button", { type: "button", className: "recordpage-action recordpage-action--icon", "aria-label": "Record actions", children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: "Copy record link" }), _jsx(MenuItem, { icon: _jsx(Plus, { size: 15, strokeWidth: 1.75 }), children: "Add to list" }), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? "Remove from favourites" : "Add to favourites" }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: "Delete record" })] })] })] }), _jsxs("div", { className: "recordpage-body", children: [_jsxs("aside", { className: "recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "recordpage-entity-iconbtn", "aria-label": "Edit record", children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? "Remove from favourites" : "Add to favourites", children: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), "Compose email"] }), _jsx("button", { type: "button", className: "recordpage-quickbtn", "aria-label": "Copy record link", children: _jsx(Copy, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "recordpage-quickbtn", "aria-label": "Log a note", children: _jsx(FileText, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "recordpage-quickbtn", "aria-label": "Link records", children: _jsx(Share2, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "recordpage-quickbtn", "aria-label": "Create a task", children: _jsx(SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "recordpage-section", children: [_jsxs("div", { className: "recordpage-detailhead", children: [searchOpen ? (_jsx("input", { 
+    return (_jsxs("div", { className: recordpageRecipe({ className }), children: [_jsxs("div", { className: "recordpage-topbar", children: [_jsxs("nav", { className: "recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "recordpage-crumb-name", children: name })] }), _jsxs("div", { className: "recordpage-actions", children: [_jsxs("button", { type: "button", className: "recordpage-action recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--bg-brand-solid)" }), t.askAttio] }), onToggleFull && (_jsx("button", { type: "button", className: "recordpage-action recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": t.recordActions, trigger: _jsx("button", { type: "button", className: "recordpage-action recordpage-action--icon", "aria-label": t.recordActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), _jsx(MenuItem, { icon: _jsx(Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), _jsxs("div", { className: "recordpage-body", children: [_jsxs("aside", { className: "recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "recordpage-entity-iconbtn", "aria-label": t.editRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _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: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsx("button", { type: "button", className: "recordpage-quickbtn", "aria-label": t.copyRecordLink, children: _jsx(Copy, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "recordpage-quickbtn", "aria-label": t.logANote, children: _jsx(FileText, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "recordpage-quickbtn", "aria-label": t.linkRecords, children: _jsx(Share2, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "recordpage-quickbtn", "aria-label": t.createATask, children: _jsx(SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "recordpage-section", children: [_jsxs("div", { className: "recordpage-detailhead", children: [searchOpen ? (_jsx("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: focusing the just-opened field search is expected
-                                                autoFocus: true, type: "text", className: "recordpage-fieldsearch", placeholder: "Search\u2026", "aria-label": "Search fields", value: fieldQuery, onChange: (e) => setFieldQuery(e.target.value), onKeyDown: (e) => {
+                                                autoFocus: true, type: "text", className: "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("");
                                                     }
-                                                } })) : (_jsxs("button", { type: "button", className: "recordpage-collapse", "data-collapsed": detailsOpen ? undefined : "", "aria-expanded": detailsOpen, onClick: () => setDetailsOpen((o) => !o), children: ["Record Details", _jsx(ChevronDown, { className: "recordpage-chev", size: 12, strokeWidth: 2.5 })] })), _jsx("button", { type: "button", className: "recordpage-detailsearch", "data-active": searchOpen ? "" : undefined, "aria-label": searchOpen ? "Close search" : "Search fields", "aria-pressed": searchOpen, onClick: () => {
+                                                } })) : (_jsxs("button", { type: "button", className: "recordpage-collapse", "data-collapsed": detailsOpen ? undefined : "", "aria-expanded": detailsOpen, onClick: () => setDetailsOpen((o) => !o), children: [t.recordDetails, _jsx(ChevronDown, { className: "recordpage-chev", size: 12, strokeWidth: 2.5 })] })), _jsx("button", { type: "button", className: "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 ? (_jsx(X, { size: 14, strokeWidth: 1.75 })) : (_jsx(Search, { size: 14, strokeWidth: 1.75 })) })] }), detailsOpen &&
-                                        (shownFields.length > 0 ? (_jsxs(_Fragment, { children: [shownFields.map((col) => (_jsxs("div", { className: "recordpage-field", children: [_jsxs("span", { className: "recordpage-field-label", children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : null, _jsx("span", { className: "recordpage-field-label-text", children: col.label })] }), _jsx("span", { className: "recordpage-field-value", children: _jsx(FieldValue, { col: col, row: record }) })] }, col.key))), canRevealFields && (_jsx("button", { type: "button", className: "recordpage-viewall recordpage-viewall--section", onClick: () => {
+                                        (shownFields.length > 0 ? (_jsxs(_Fragment, { children: [shownFields.map((col) => (_jsxs("div", { className: "recordpage-field", children: [_jsxs("span", { className: "recordpage-field-label", children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : null, _jsx("span", { className: "recordpage-field-label-text", children: col.label })] }), _jsx("span", { className: "recordpage-field-value", children: _jsx(FieldValue, { col: col, row: record, labels: t }) })] }, col.key))), canRevealFields && (_jsx("button", { type: "button", className: "recordpage-viewall recordpage-viewall--section", onClick: () => {
                                                         // Attio: revealing all fields also opens the (focused)
                                                         // field search; collapsing closes it.
                                                         const next = !showAllValues;
@@ -276,7 +362,7 @@ export function RecordPage({ record, columns, collection = "Records", onBack, on
                                                         setSearchOpen(next);
                                                         if (!next)
                                                             setFieldQuery("");
-                                                    }, children: showAllValues ? "View less" : "View all values" }))] })) : (_jsxs("div", { className: "recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), _jsxs("div", { className: "recordpage-section", children: [_jsx(SectionHead, { title: "Lists", action: _jsxs("button", { type: "button", className: "recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), "Add to list"] }) }), _jsx("div", { className: "recordpage-emptystate", children: "This record has not been added to any lists." })] })] }), _jsx("div", { className: "recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": "Resize details column", "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 }))] })) : (_jsxs("div", { className: "recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), _jsxs("div", { className: "recordpage-section", children: [_jsx(SectionHead, { title: t.tabs.lists, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), _jsx("div", { className: "recordpage-emptystate", children: "This record has not been added to any lists." })] })] }), _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) => {
                             if (e.key === "ArrowLeft")
                                 setDetailsW((w) => Math.max(300, w - 16));
                             else if (e.key === "ArrowRight")

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

@@ -1,5 +1,5 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
 // The full-page company record view Attio opens when you click into a record —
 // measured from the live app. A slim top bar (breadcrumb · logo · name 16/600 ·
 // actions), then a two-column body: a 320px left "Record Details" attribute
@@ -20,8 +20,8 @@ const config = defineRecipe({
     & .recordpage-crumb:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
     & .recordpage-crumb-sep { color: ${c.fgMuted}; font-size: ${c.text.lg}; }
     & .recordpage-crumb-name { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .recordpage-actions { margin-left: auto; display: flex; align-items: center; gap: ${c.space["1"]}; }
-    & .recordpage-action { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; padding: 0 ${c.space["2"]} 0 ${c.space["1.5"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.ringNeutral}, 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; cursor: pointer; white-space: nowrap; }
+    & .recordpage-actions { margin-inline-start: auto; display: flex; align-items: center; gap: ${c.space["1"]}; }
+    & .recordpage-action { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; padding: 0 ${c.space["2"]} 0 ${c.space["1.5"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; cursor: pointer; white-space: nowrap; }
     & .recordpage-action:hover { background: ${c.bgRaised}; }
     & .recordpage-action--ghost { box-shadow: none; color: ${c.fgMuted}; }
     & .recordpage-action--icon { width: 28px; padding: 0; justify-content: center; box-shadow: none; color: ${c.fgMuted}; }
@@ -29,7 +29,7 @@ const config = defineRecipe({
 
     & .recordpage-body { flex: 1; min-height: 0; display: flex; }
 
-    & .recordpage-details { width: 320px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid ${c.borderSubtle}; padding: ${c.space["3"]}; }
+    & .recordpage-details { width: 320px; flex-shrink: 0; overflow-y: auto; border-inline-end: 1px solid ${c.borderSubtle}; padding: ${c.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; left: -4px; width: 9px; }
     & .recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
@@ -37,34 +37,35 @@ const config = defineRecipe({
     & .recordpage-entity { display: flex; align-items: center; gap: ${c.space["2"]}; padding: ${c.space["1"]} ${c.space["1"]} ${c.space["2"]}; }
     & .recordpage-entity-logo { width: 32px; height: 32px; border-radius: 30%; flex-shrink: 0; object-fit: cover; background: ${c.bgRaised}; }
     & .recordpage-entity-name { flex: 0 1 auto; min-width: 0; font-size: ${c.text.xl}; font-weight: ${c.weight.semibold}; letter-spacing: -0.3px; color: ${c.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: ${c.radius.sm}; background: none; color: ${c.fgMuted}; cursor: pointer; transition: background-color .12s, color .12s; }
-    & .recordpage-entity-iconbtn:first-of-type { margin-left: calc(-1 * ${c.space["1"]}); }
+    & .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: ${c.radius.sm}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .recordpage-entity-iconbtn:first-of-type { margin-inline-start: calc(-1 * ${c.space["1"]}); }
     & .recordpage-entity-iconbtn:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
     & .recordpage-entity-iconbtn[data-active] svg { color: #f5b83d; fill: #f5b83d; }
     & .recordpage-quickactions { display: flex; align-items: center; gap: ${c.space["2"]}; padding: 0 ${c.space["1"]} ${c.space["3"]}; }
-    & .recordpage-compose { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; padding: 0 ${c.space["4"]} 0 ${c.space["3"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.ringNeutral}, 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .recordpage-compose { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; padding: 0 ${c.space["4"]} 0 ${c.space["3"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .recordpage-compose:hover { background: ${c.bgRaised}; }
     & .recordpage-compose svg { flex-shrink: 0; color: ${c.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: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.ringNeutral}, 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: ${c.fgMuted}; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .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: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
     & .recordpage-quickbtn:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
     & .recordpage-section { padding-top: ${c.space["2"]}; }
     & .recordpage-section-title { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; letter-spacing: -0.12px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); padding: ${c.space["1"]}; }
     /* main-area section headers (Highlights / Activity / Emails / Notes / Tasks)
        are 14px in Attio; the left column's (Record Details / Lists) stay 12px. */
     & .recordpage-main .recordpage-section-title { font-size: ${c.text.lg}; }
-    & .recordpage-detailhead { display: flex; align-items: center; gap: ${c.space["0.5"]}; margin-bottom: ${c.space["3"]}; padding-right: ${c.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: ${c.space["1"]}; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; letter-spacing: -0.12px; color: ${c.fgMuted}; cursor: pointer; text-align: left; }
+    & .recordpage-detailhead { display: flex; align-items: center; gap: ${c.space["0.5"]}; margin-bottom: ${c.space["3"]}; padding-inline-end: ${c.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: ${c.space["1"]}; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; letter-spacing: -0.12px; color: ${c.fgMuted}; cursor: pointer; text-align: start; }
     & .recordpage-collapse:hover { color: ${c.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: ${c.space["1"]}; font-family: inherit; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; letter-spacing: -0.12px; color: ${c.fgPrimary}; }
+    & .recordpage-fieldsearch:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; border-radius: ${c.radius.md}; }
     & .recordpage-fieldsearch::placeholder { color: ${c.fgMuted}; font-weight: ${c.weight.regular}; }
-    & .recordpage-detailsearch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${c.radius.sm}; background: none; color: ${c.fgMuted}; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .recordpage-detailsearch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: ${c.size.chip}; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${c.radius.sm}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
     & .recordpage-detailsearch:hover, & .recordpage-detailsearch[data-active] { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
     & .recordpage-noresults { padding: ${c.space["1.5"]} ${c.space["1"]}; font-size: ${c.text.md}; color: ${c.fgMuted}; }
     & .recordpage-morevalues { display: inline-flex; align-items: center; padding: 0; margin: 0; border: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgMuted}; cursor: pointer; }
     & .recordpage-morevalues:hover { color: ${c.fgPrimary}; }
-    & .recordpage-viewall { flex-basis: 100%; margin-top: ${c.space["0.5"]}; border: none; background: none; padding: 0; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); font-family: inherit; font-size: ${c.text.sm}; font-weight: ${c.weight.regular}; cursor: pointer; text-align: left; }
+    & .recordpage-viewall { flex-basis: 100%; margin-top: ${c.space["0.5"]}; border: none; background: none; padding: 0; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); font-family: inherit; font-size: ${c.text.sm}; font-weight: ${c.weight.regular}; cursor: pointer; text-align: start; }
     & .recordpage-viewall:hover { color: ${c.fgPrimary}; }
     & .recordpage-viewall--inline { flex-basis: auto; margin-top: 0; }
     & .recordpage-viewall--section { display: block; flex-basis: auto; margin-top: 0; padding: ${c.space["1"]} ${c.space["1"]}; }
@@ -91,8 +92,8 @@ const config = defineRecipe({
        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: ${c.borderSubtle}; }
     & .recordpage-hl-cell { position: relative; min-height: 84px; padding: ${c.space["2.5"]} ${c.space["3"]}; background: ${c.bgSurface}; }
-    & .recordpage-hl-icon { position: absolute; top: ${c.space["2.5"]}; right: ${c.space["3"]}; color: ${c.fgMuted}; }
-    & .recordpage-hl-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); margin-bottom: ${c.space["2.5"]}; padding-right: ${c.space["4"]}; }
+    & .recordpage-hl-icon { position: absolute; top: ${c.space["2.5"]}; inset-inline-end: ${c.space["3"]}; color: ${c.fgMuted}; }
+    & .recordpage-hl-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); margin-bottom: ${c.space["2.5"]}; padding-inline-end: ${c.space["4"]}; }
     & .recordpage-hl-value { display: flex; flex-wrap: wrap; align-items: center; gap: ${c.space["1"]}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
     & .recordpage-hl-value--empty { color: ${c.fgMuted}; font-weight: ${c.weight.regular}; }
 
@@ -109,15 +110,16 @@ const config = defineRecipe({
     & .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 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     & .recordpage-section-spacer { flex: 1; }
-    & .recordpage-addbtn { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: 26px; padding: 0 ${c.space["1.5"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.ringNeutral}, 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
+    & .recordpage-addbtn { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: 26px; padding: 0 ${c.space["1.5"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
     & .recordpage-addbtn:hover { background: ${c.bgRaised}; }
     & .recordpage-addbtn svg { flex-shrink: 0; }
 
     & .recordpage-composer { display: flex; flex-direction: column; gap: ${c.space["2"]}; padding: ${c.space["2"]}; border: 1px solid ${c.borderDefault}; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; margin-bottom: ${c.space["2"]}; }
     & .recordpage-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
+    & .recordpage-composer textarea:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; border-radius: ${c.radius.md}; }
     & .recordpage-composer textarea::placeholder { color: ${c.fgMuted}; }
     & .recordpage-composer-actions { display: flex; justify-content: flex-end; align-items: center; gap: ${c.space["1.5"]}; }
-    & .recordpage-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 ${c.space["2.5"]}; margin: 0; border: none; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; box-shadow: inset 0 0 0 1px ${c.ringNeutral}, 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); background: ${c.bgSurface}; color: ${c.fgPrimary}; }
+    & .recordpage-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 ${c.space["2.5"]}; margin: 0; border: none; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; box-shadow: ${e.field}; background: ${c.bgSurface}; color: ${c.fgPrimary}; }
     & .recordpage-btn:hover { background: ${c.bgRaised}; }
     & .recordpage-btn--primary { box-shadow: none; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; }
     & .recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
@@ -138,7 +140,7 @@ const config = defineRecipe({
 
     & .recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
 
-    & .recordstable-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 ${c.space["1"]}; border-radius: 7px; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
+    & .recordstable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
     & .recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
     & .recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); }
     & .recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); }

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

@@ -4,10 +4,10 @@ import * as React from "react";
 import { Avatar } from "../../components/avatar/index.js";
 import { tagTone, } from "../recordstable/index.js";
 import { recordpanelRecipe } from "./recordpanel.recipe.js";
-function FieldValue({ col, row }) {
+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: "Empty" });
+        return _jsx("span", { className: "recordpanel-empty", children: emptyLabel });
     }
     switch (col.type) {
         case "tags":
@@ -26,7 +26,7 @@ function FieldValue({ col, row }) {
  * relative` container (e.g. the app main area); it slides in from the right and
  * overlays the content.
  */
-export function RecordPanel({ record, columns, onClose, className, }) {
+export function RecordPanel({ record, columns, onClose, className, closeLabel = "Close panel", detailsLabel = "Details", emptyLabel = "Empty", ...rest }) {
     // close on Escape while open
     React.useEffect(() => {
         if (!record)
@@ -42,6 +42,6 @@ export function RecordPanel({ record, columns, onClose, className, }) {
         ? record[entityCol.key]
         : undefined;
     const fields = columns.filter((c) => c.type !== "entity");
-    return (_jsxs("div", { className: recordpanelRecipe({ className }), 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": "Close panel", onClick: onClose, children: _jsx(X, { size: 18, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "recordpanel-body", children: [_jsx("div", { className: "recordpanel-sectionlabel", children: "Details" }), 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 }) })] }, col.key)))] })] }));
+    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)))] })] }));
 }
 RecordPanel.displayName = "RecordPanel";

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

@@ -1,24 +1,27 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+import { recordTagCss } from "../recordstable/recordstable.tag.js";
 // A right-side record peek panel — slides in over the main content to show one
 // record's fields, the way Attio opens a row. Positioned absolutely inside a
 // relative container (the app main area); slides in via @starting-style.
 const config = defineRecipe({
     name: "recordpanel",
     base: `
-    position: absolute; top: 0; right: 0; z-index: 20; display: flex; flex-direction: column;
-    width: 420px; max-width: 92%; height: 100%;
-    background: ${c.bgSurface}; border-left: 1px solid ${c.borderSubtle};
-    box-shadow: -12px 0 32px -16px rgba(28,40,64,0.22); font-family: ${c.font.sans};
+    position: absolute; top: ${c.space["2"]}; inset-inline-end: ${c.space["2"]}; bottom: ${c.space["2"]};
+    z-index: 20; display: flex; flex-direction: column; overflow: hidden;
+    width: 420px; max-width: calc(92% - ${c.space["2"]});
+    background: ${c.bgSurface}; border-radius: ${c.radius.xl};
+    box-shadow: ${e.floating};
+    font-family: ${c.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     transform: translateX(0); transition: transform .2s ease;
-    @starting-style { transform: translateX(100%); }
+    @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: 22px; border-radius: ${c.radius.sm}; flex-shrink: 0; object-fit: cover; background: ${c.bgRaised}; }
+    & .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}; cursor: pointer; transition: background-color .12s; }
+    & .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}; }
 
     & .recordpanel-body { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["2"]} ${c.space["3"]}; }
@@ -30,14 +33,7 @@ const config = defineRecipe({
     & .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}; }
 
-    & .recordstable-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 ${c.space["1"]}; border-radius: 7px; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
-    & .recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
+    ${recordTagCss}
     & .recordpanel-link { color: ${c.bgBrandSolid}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .recordpanel-link:hover { text-decoration: underline; }
   `,