@crisp-ui-kit/crisp 0.31.5 → 0.32.0

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

@@ -6,17 +6,17 @@ const config = defineRecipe({
     name: "flowcanvas",
     base: `position: relative; overflow: hidden; box-sizing: border-box; width: 100%; height: 100%; background-color: ${c.bgSurface}; background-image: radial-gradient(circle, color-mix(in srgb, ${c.fgPrimary} 14%, transparent) 1px, transparent 1px); font-family: ${c.font.sans}; cursor: grab; touch-action: none; user-select: none;
     &[data-panning] { cursor: grabbing; }
-    & .flowcanvas-viewport { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
-    & .flowcanvas-edges { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
-    & .flowcanvas-edge { fill: none; stroke: color-mix(in srgb, ${c.fgPrimary} 28%, transparent); stroke-width: 1.5; }
-    & .flowcanvas-edge-dot { fill: ${c.bgBrandSolid}; }
-    & .flowcanvas-node { position: absolute; cursor: grab; }
-    & .flowcanvas-node[data-dragging] { cursor: grabbing; z-index: 10; }
-    & .flowcanvas-toolbar { position: absolute; bottom: ${c.space["4"]}; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: ${c.space["1"]}; padding: ${c.space["1"]}; border-radius: ${c.radius.lg}; background: ${c.bgRaised}; box-shadow: inset 0 0 0 1px ${c.borderDefault}, 0 4px 14px -4px rgba(28,40,64,0.16); }
-    & .flowcanvas-tool { display: inline-flex; align-items: center; justify-content: center; gap: ${c.space["1"]}; height: 30px; min-width: 30px; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
-    & .flowcanvas-tool:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
-    & .flowcanvas-tool-zoom { min-width: 48px; }
-    & .flowcanvas-tool-sep { width: 1px; height: 18px; background: ${c.borderSubtle}; }`,
+    & .crisp-flowcanvas-viewport { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
+    & .crisp-flowcanvas-edges { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
+    & .crisp-flowcanvas-edge { fill: none; stroke: color-mix(in srgb, ${c.fgPrimary} 28%, transparent); stroke-width: 1.5; }
+    & .crisp-flowcanvas-edge-dot { fill: ${c.bgBrandSolid}; }
+    & .crisp-flowcanvas-node { position: absolute; cursor: grab; }
+    & .crisp-flowcanvas-node[data-dragging] { cursor: grabbing; z-index: 10; }
+    & .crisp-flowcanvas-toolbar { position: absolute; bottom: ${c.space["4"]}; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: ${c.space["1"]}; padding: ${c.space["1"]}; border-radius: ${c.radius.lg}; background: ${c.bgRaised}; box-shadow: inset 0 0 0 1px ${c.borderDefault}, 0 4px 14px -4px rgba(28,40,64,0.16); }
+    & .crisp-flowcanvas-tool { display: inline-flex; align-items: center; justify-content: center; gap: ${c.space["1"]}; height: 30px; min-width: 30px; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
+    & .crisp-flowcanvas-tool:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    & .crisp-flowcanvas-tool-zoom { min-width: 48px; }
+    & .crisp-flowcanvas-tool-sep { width: 1px; height: 18px; background: ${c.borderSubtle}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/product/inbox/inbox.js

@@ -20,6 +20,6 @@ export function Inbox({ notifications = [], title = "Notifications", tabs, activ
         select: (id) => onTabChange?.(id),
         listRef,
     });
-    return (_jsxs("div", { className: inboxRecipe({ className }), ...rest, children: [_jsxs("div", { className: "inbox-head", children: [_jsx("div", { className: "inbox-title", children: title }), tabs && tabs.length > 0 && (_jsx("div", { ref: listRef, className: "inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": t.id === activeTab, tabIndex: tabIndexFor(t.id), "data-value": t.id, disabled: t.disabled, className: "inbox-tab", "data-active": t.id === activeTab ? "" : undefined, onClick: () => onTabChange?.(t.id), children: [t.label, t.count != null && (_jsxs("span", { className: "inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? (_jsxs("div", { className: "inbox-empty", children: [_jsx("span", { className: "inbox-empty-icon", children: _jsx(Bell, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "inbox-empty-title", children: emptyTitle }), emptySubtitle != null && (_jsx("div", { className: "inbox-empty-sub", children: emptySubtitle })), emptyAction != null && (_jsx("div", { className: "inbox-empty-action", children: emptyAction }))] })) : (_jsx("div", { className: "inbox-list", children: notifications.map((n) => (_jsxs("button", { type: "button", className: "inbox-row", onClick: n.onClick, children: [n.avatar != null && (_jsx("span", { className: "inbox-row-avatar", children: n.avatar })), _jsxs("span", { className: "inbox-row-body", children: [_jsx("span", { className: "inbox-row-msg", children: n.message }), n.time != null && (_jsx("span", { className: "inbox-row-time", children: n.time }))] }), n.unread && _jsx("span", { className: "inbox-row-unread" })] }, n.id))) }))] }));
+    return (_jsxs("div", { className: inboxRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-inbox-head", children: [_jsx("div", { className: "crisp-inbox-title", children: title }), tabs && tabs.length > 0 && (_jsx("div", { ref: listRef, className: "crisp-inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": t.id === activeTab, tabIndex: tabIndexFor(t.id), "data-value": t.id, disabled: t.disabled, className: "crisp-inbox-tab", "data-active": t.id === activeTab ? "" : undefined, onClick: () => onTabChange?.(t.id), children: [t.label, t.count != null && (_jsxs("span", { className: "crisp-inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? (_jsxs("div", { className: "crisp-inbox-empty", children: [_jsx("span", { className: "crisp-inbox-empty-icon", children: _jsx(Bell, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "crisp-inbox-empty-title", children: emptyTitle }), emptySubtitle != null && (_jsx("div", { className: "crisp-inbox-empty-sub", children: emptySubtitle })), emptyAction != null && (_jsx("div", { className: "crisp-inbox-empty-action", children: emptyAction }))] })) : (_jsx("div", { className: "crisp-inbox-list", children: notifications.map((n) => (_jsxs("button", { type: "button", className: "crisp-inbox-row", onClick: n.onClick, children: [n.avatar != null && (_jsx("span", { className: "crisp-inbox-row-avatar", children: n.avatar })), _jsxs("span", { className: "crisp-inbox-row-body", children: [_jsx("span", { className: "crisp-inbox-row-msg", children: n.message }), n.time != null && (_jsx("span", { className: "crisp-inbox-row-time", children: n.time }))] }), n.unread && _jsx("span", { className: "crisp-inbox-row-unread" })] }, n.id))) }))] }));
 }
 Inbox.displayName = "Inbox";

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

@@ -11,30 +11,30 @@ const config = defineRecipe({
     box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .inbox-head { padding: ${c.space["3"]} ${c.space["3"]} 0; }
-    & .inbox-title { font-size: ${c.text.xl}; line-height: 28px; font-weight: ${c.weight.semibold}; letter-spacing: -0.3px; color: ${c.fgPrimary}; }
-    & .inbox-tabs { display: flex; gap: ${c.space["3"]}; margin-top: ${c.space["2"]}; box-shadow: inset 0 -1px 0 ${c.borderSubtle}; }
-    & .inbox-tab { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 32px; padding: 0 2px; margin: 0; border: none; background: none; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .12s, box-shadow .12s; }
-    & .inbox-tab:hover { color: ${c.fgPrimary}; }
-    & .inbox-tab[data-active] { color: ${c.bgBrandSolid}; box-shadow: inset 0 -2px 0 ${c.bgBrandSolid}; }
-    & .inbox-tab-count { font-size: ${c.text.sm}; color: ${c.fgMuted}; }
-    & .inbox-tab[data-active] .inbox-tab-count { color: ${c.bgBrandSolid}; }
+    & .crisp-inbox-head { padding: ${c.space["3"]} ${c.space["3"]} 0; }
+    & .crisp-inbox-title { font-size: ${c.text.xl}; line-height: 28px; font-weight: ${c.weight.semibold}; letter-spacing: -0.3px; color: ${c.fgPrimary}; }
+    & .crisp-inbox-tabs { display: flex; gap: ${c.space["3"]}; margin-top: ${c.space["2"]}; box-shadow: inset 0 -1px 0 ${c.borderSubtle}; }
+    & .crisp-inbox-tab { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 32px; padding: 0 2px; margin: 0; border: none; background: none; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .12s, box-shadow .12s; }
+    & .crisp-inbox-tab:hover { color: ${c.fgPrimary}; }
+    & .crisp-inbox-tab[data-active] { color: ${c.bgBrandSolid}; box-shadow: inset 0 -2px 0 ${c.bgBrandSolid}; }
+    & .crisp-inbox-tab-count { font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .crisp-inbox-tab[data-active] .crisp-inbox-tab-count { color: ${c.bgBrandSolid}; }
 
-    & .inbox-list { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["1"]}; display: flex; flex-direction: column; gap: 1px; }
-    & .inbox-row { display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; padding: ${c.space["2"]} ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
-    & .inbox-row:hover { background: ${c.bgRaised}; }
-    & .inbox-row-avatar { flex-shrink: 0; margin-top: 1px; }
-    & .inbox-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-    & .inbox-row-msg { font-size: ${c.text.lg}; line-height: 18px; color: ${c.fgPrimary}; }
-    & .inbox-row-msg b { font-weight: ${c.weight.semibold}; }
-    & .inbox-row-time { font-size: ${c.text.sm}; color: ${c.fgMuted}; }
-    & .inbox-row-unread { flex-shrink: 0; width: 8px; height: 8px; margin-top: ${c.space["1"]}; border-radius: ${c.radius.full}; background: ${c.bgBrandSolid}; }
+    & .crisp-inbox-list { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["1"]}; display: flex; flex-direction: column; gap: 1px; }
+    & .crisp-inbox-row { display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; padding: ${c.space["2"]} ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
+    & .crisp-inbox-row:hover { background: ${c.bgRaised}; }
+    & .crisp-inbox-row-avatar { flex-shrink: 0; margin-top: 1px; }
+    & .crisp-inbox-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .crisp-inbox-row-msg { font-size: ${c.text.lg}; line-height: 18px; color: ${c.fgPrimary}; }
+    & .crisp-inbox-row-msg b { font-weight: ${c.weight.semibold}; }
+    & .crisp-inbox-row-time { font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .crisp-inbox-row-unread { flex-shrink: 0; width: 8px; height: 8px; margin-top: ${c.space["1"]}; border-radius: ${c.radius.full}; background: ${c.bgBrandSolid}; }
 
-    & .inbox-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: ${c.space["1"]}; padding: ${c.space["6"]} ${c.space["4"]}; text-align: center; }
-    & .inbox-empty-icon { display: inline-flex; margin-bottom: ${c.space["2"]}; color: color-mix(in srgb, ${c.fgPrimary} 22%, transparent); }
-    & .inbox-empty-title { font-size: ${c.text.xl}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
-    & .inbox-empty-sub { font-size: ${c.text.md}; line-height: 18px; color: ${c.fgMuted}; max-width: 260px; }
-    & .inbox-empty-action { margin-top: ${c.space["2"]}; }`,
+    & .crisp-inbox-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: ${c.space["1"]}; padding: ${c.space["6"]} ${c.space["4"]}; text-align: center; }
+    & .crisp-inbox-empty-icon { display: inline-flex; margin-bottom: ${c.space["2"]}; color: color-mix(in srgb, ${c.fgPrimary} 22%, transparent); }
+    & .crisp-inbox-empty-title { font-size: ${c.text.xl}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    & .crisp-inbox-empty-sub { font-size: ${c.text.md}; line-height: 18px; color: ${c.fgMuted}; max-width: 260px; }
+    & .crisp-inbox-empty-action { margin-top: ${c.space["2"]}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/product/listpage/listpage.js

@@ -4,9 +4,9 @@ import { listpageRecipe } from "./listpage.recipe.js";
  * Renders a real `<button>` when `onClick` is given, else a plain row. */
 export function ListRow({ children, onClick, }) {
     if (onClick) {
-        return (_jsx("button", { type: "button", className: "listpage-row", onClick: onClick, children: children }));
+        return (_jsx("button", { type: "button", className: "crisp-listpage-row", onClick: onClick, children: children }));
     }
-    return _jsx("div", { className: "listpage-row", children: children });
+    return _jsx("div", { className: "crisp-listpage-row", children: children });
 }
 /**
  * The entity-list page shell — measured from Reports/Sequences/Tasks/
@@ -16,6 +16,6 @@ export function ListRow({ children, onClick, }) {
  */
 export function ListPage({ leading, trailing, count, favorites, favoritesLabel = "Favorites", columns, groups, emptyLabel = "Nothing here yet", className, ...rest }) {
     const total = groups?.reduce((s, g) => s + g.rows.length, 0) ?? 0;
-    return (_jsxs("div", { className: listpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "listpage-toolbar", children: [_jsx("div", { className: "listpage-toolbar-lead", children: leading }), count != null && _jsx("div", { className: "listpage-count", children: count }), trailing != null && (_jsx("div", { className: "listpage-toolbar-trail", children: trailing }))] }), _jsxs("div", { className: "listpage-body", children: [favorites != null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "listpage-section-label", children: favoritesLabel }), _jsx("div", { className: "listpage-favorites", "data-dashed": "", children: favorites })] })), columns && columns.length > 0 && (_jsx("div", { className: "listpage-colhead", children: columns.map((col, i) => (_jsxs("span", { className: "listpage-colhead-cell", children: [col.icon, col.label] }, i))) })), total === 0 && !groups?.length ? (_jsx("div", { className: "listpage-empty", children: emptyLabel })) : (groups?.map((g) => (_jsxs("div", { children: [_jsxs("div", { className: "listpage-group", children: [g.label, g.count != null && (_jsx("span", { className: "listpage-group-count", children: g.count }))] }), g.rows] }, g.id))))] })] }));
+    return (_jsxs("div", { className: listpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-listpage-toolbar", children: [_jsx("div", { className: "crisp-listpage-toolbar-lead", children: leading }), count != null && _jsx("div", { className: "crisp-listpage-count", children: count }), trailing != null && (_jsx("div", { className: "crisp-listpage-toolbar-trail", children: trailing }))] }), _jsxs("div", { className: "crisp-listpage-body", children: [favorites != null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "crisp-listpage-section-label", children: favoritesLabel }), _jsx("div", { className: "crisp-listpage-favorites", "data-dashed": "", children: favorites })] })), columns && columns.length > 0 && (_jsx("div", { className: "crisp-listpage-colhead", children: columns.map((col, i) => (_jsxs("span", { className: "crisp-listpage-colhead-cell", children: [col.icon, col.label] }, i))) })), total === 0 && !groups?.length ? (_jsx("div", { className: "crisp-listpage-empty", children: emptyLabel })) : (groups?.map((g) => (_jsxs("div", { children: [_jsxs("div", { className: "crisp-listpage-group", children: [g.label, g.count != null && (_jsx("span", { className: "crisp-listpage-group-count", children: g.count }))] }), g.rows] }, g.id))))] })] }));
 }
 ListPage.displayName = "ListPage";

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

@@ -9,32 +9,32 @@ const config = defineRecipe({
     base: `display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; font-family: ${c.font.sans}; color: ${c.fgPrimary};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .listpage-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${c.space["3"]}; }
-    & .listpage-toolbar-lead { display: flex; align-items: center; gap: ${c.space["2"]}; }
-    & .listpage-count { margin-inline-start: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; white-space: nowrap; }
-    & .listpage-toolbar-trail { display: flex; align-items: center; gap: ${c.space["2"]}; }
-    & .listpage-count + .listpage-toolbar-trail { margin-inline-start: ${c.space["3"]}; }
+    & .crisp-listpage-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${c.space["3"]}; }
+    & .crisp-listpage-toolbar-lead { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .crisp-listpage-count { margin-inline-start: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .crisp-listpage-toolbar-trail { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .crisp-listpage-count + .crisp-listpage-toolbar-trail { margin-inline-start: ${c.space["3"]}; }
 
-    & .listpage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 ${c.space["3"]} ${c.space["3"]}; }
+    & .crisp-listpage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 ${c.space["3"]} ${c.space["3"]}; }
 
-    & .listpage-section-label { padding: ${c.space["2"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
-    & .listpage-favorites { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: ${c.space["6"]}; border-radius: ${c.radius.xl};
+    & .crisp-listpage-section-label { padding: ${c.space["2"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-listpage-favorites { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: ${c.space["6"]}; border-radius: ${c.radius.xl};
       background: repeating-linear-gradient(0deg, transparent, transparent) padding-box,
         border-box; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); }
-    & .listpage-favorites[data-dashed] { box-shadow: none; border: 1px dashed color-mix(in srgb, ${c.fgPrimary} 14%, transparent); }
+    & .crisp-listpage-favorites[data-dashed] { box-shadow: none; border: 1px dashed color-mix(in srgb, ${c.fgPrimary} 14%, transparent); }
 
-    & .listpage-colhead { display: flex; align-items: center; gap: ${c.space["2.5"]}; height: 40px; padding: 0 ${c.space["2"]}; box-shadow: inset 0 -1px 0 ${c.borderSubtle}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
-    & .listpage-colhead-cell { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; }
+    & .crisp-listpage-colhead { display: flex; align-items: center; gap: ${c.space["2.5"]}; height: 40px; padding: 0 ${c.space["2"]}; box-shadow: inset 0 -1px 0 ${c.borderSubtle}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .crisp-listpage-colhead-cell { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; }
 
-    & .listpage-group { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: 36px; padding: 0 ${c.space["2"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
-    & .listpage-group-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}; color: ${c.fgMuted}; }
+    & .crisp-listpage-group { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: 36px; padding: 0 ${c.space["2"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-listpage-group-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}; color: ${c.fgMuted}; }
 
-    & .listpage-row { display: flex; align-items: center; gap: ${c.space["2.5"]}; width: 100%; height: 52px; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-top: 1px solid ${c.borderSubtle}; background: none; font-family: inherit; color: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
-    & .listpage-row:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: -2px; }
-    & .listpage-row:hover { background: color-mix(in srgb, ${c.fgPrimary} 3%, transparent); }
-    & .listpage-row-title { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-listpage-row { display: flex; align-items: center; gap: ${c.space["2.5"]}; width: 100%; height: 52px; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-top: 1px solid ${c.borderSubtle}; background: none; font-family: inherit; color: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
+    & .crisp-listpage-row:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: -2px; }
+    & .crisp-listpage-row:hover { background: color-mix(in srgb, ${c.fgPrimary} 3%, transparent); }
+    & .crisp-listpage-row-title { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
 
-    & .listpage-empty { padding: ${c.space["8"]} ${c.space["4"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
+    & .crisp-listpage-empty { padding: ${c.space["8"]} ${c.space["4"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/product/navitem/navitem.js

@@ -3,6 +3,6 @@ import * as React from "react";
 import { Primitive } from "../../core/index.js";
 import { navitemRecipe } from "./navitem.recipe.js";
 export const NavItem = React.forwardRef(({ active, icon, trailing, className, children, ...props }, ref) => {
-    return (_jsxs(Primitive.a, { ref: ref, "data-active": active || undefined, className: navitemRecipe({ className }), ...props, children: [icon, _jsx("span", { className: "navitem-label", children: children }), trailing != null && (_jsx("span", { className: "navitem-trailing", children: trailing }))] }));
+    return (_jsxs(Primitive.a, { ref: ref, "data-active": active || undefined, className: navitemRecipe({ className }), ...props, children: [icon, _jsx("span", { className: "crisp-navitem-label", children: children }), trailing != null && (_jsx("span", { className: "crisp-navitem-trailing", children: trailing }))] }));
 });
 NavItem.displayName = "NavItem";

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

@@ -10,8 +10,8 @@ const config = defineRecipe({
   ; font-size: ${c.text.lg}
   ; font-weight: ${c.weight.medium}
   ; letter-spacing: -0.14px; line-height: 20px; color: ${c.fgPrimary}
-  ; text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s; & .navitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  & .navitem-trailing { margin-inline-start: auto; display: inline-flex; align-items: center; flex-shrink: 0; }
+  ; text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s; & .crisp-navitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .crisp-navitem-trailing { margin-inline-start: auto; display: inline-flex; align-items: center; flex-shrink: 0; }
   &:hover { background: color-mix(in srgb, ${c.fgPrimary} 2%, transparent); }
   &[data-active] { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
   `,

package/dist/esm/product/onboarding/onboarding.js

@@ -18,6 +18,6 @@ export const onboardingLabels = {
 export function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", progressText = onboardingLabels.progressText, completedStepLabel = onboardingLabels.completedStepLabel, ...rest }) {
     const total = steps.length;
     const done = steps.filter((s) => s.done).length;
-    return (_jsxs("div", { className: onboardingRecipe({ className }), ...rest, children: [_jsxs("div", { className: "onboarding-head", children: [_jsx("span", { className: "onboarding-title", children: title }), onMenu && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), _jsxs("span", { className: "onboarding-sub", children: [progressText(done, total), encouragement ? _jsxs(_Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), _jsx("div", { className: "onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": progressLabel, children: Array.from({ length: total }, (_, i) => (_jsx("span", { className: "onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), _jsx("div", { className: "onboarding-steps", children: steps.map((s) => (_jsxs("button", { type: "button", className: "onboarding-step", "data-done": s.done ? "" : undefined, "aria-label": s.done ? completedStepLabel(s.label) : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [_jsx("span", { className: "onboarding-step-icon", children: s.icon }), _jsx("span", { className: "onboarding-step-label", children: s.label }), _jsx("span", { className: "onboarding-step-check", children: s.done && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
+    return (_jsxs("div", { className: onboardingRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-onboarding-head", children: [_jsx("span", { className: "crisp-onboarding-title", children: title }), onMenu && (_jsx("button", { type: "button", className: "crisp-onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && (_jsx("button", { type: "button", className: "crisp-onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), _jsxs("span", { className: "crisp-onboarding-sub", children: [progressText(done, total), encouragement ? _jsxs(_Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), _jsx("div", { className: "crisp-onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": progressLabel, children: Array.from({ length: total }, (_, i) => (_jsx("span", { className: "crisp-onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), _jsx("div", { className: "crisp-onboarding-steps", children: steps.map((s) => (_jsxs("button", { type: "button", className: "crisp-onboarding-step", "data-done": s.done ? "" : undefined, "aria-label": s.done ? completedStepLabel(s.label) : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [_jsx("span", { className: "crisp-onboarding-step-icon", children: s.icon }), _jsx("span", { className: "crisp-onboarding-step-label", children: s.label }), _jsx("span", { className: "crisp-onboarding-step-check", children: s.done && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
 }
 OnboardingChecklist.displayName = "OnboardingChecklist";

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

@@ -11,28 +11,28 @@ const config = defineRecipe({
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
 
-    & .onboarding-head { display: flex; align-items: center; gap: ${c.space["1"]}; }
-    & .onboarding-title { flex: 1; min-width: 0; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
-    & .onboarding-iconbtn { 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; }
-    & .onboarding-iconbtn:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+    & .crisp-onboarding-head { display: flex; align-items: center; gap: ${c.space["1"]}; }
+    & .crisp-onboarding-title { flex: 1; min-width: 0; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-onboarding-iconbtn { 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; }
+    & .crisp-onboarding-iconbtn:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
 
-    & .onboarding-sub { font-size: ${c.text.sm}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
-    & .onboarding-sub b { font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-onboarding-sub { font-size: ${c.text.sm}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
+    & .crisp-onboarding-sub b { font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
 
-    & .onboarding-progress { display: flex; gap: ${c.space["1"]}; margin: ${c.space["0.5"]} 0 ${c.space["1"]}; }
-    & .onboarding-seg { flex: 1; height: 4px; border-radius: ${c.radius.full}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); transition: background-color .2s ease; }
-    & .onboarding-seg[data-done] { background: ${c.bgBrandSolid}; }
+    & .crisp-onboarding-progress { display: flex; gap: ${c.space["1"]}; margin: ${c.space["0.5"]} 0 ${c.space["1"]}; }
+    & .crisp-onboarding-seg { flex: 1; height: 4px; border-radius: ${c.radius.full}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); transition: background-color .2s ease; }
+    & .crisp-onboarding-seg[data-done] { background: ${c.bgBrandSolid}; }
 
-    & .onboarding-steps { display: flex; flex-direction: column; }
-    & .onboarding-step { display: flex; align-items: center; gap: ${c.space["2"]}; height: 36px; padding: 0 ${c.space["1"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: start; cursor: pointer; transition: background-color .12s; }
-    & .onboarding-step:hover { background: ${c.bgRaised}; }
-    & .onboarding-step-icon { display: inline-flex; flex-shrink: 0; color: ${c.fgMuted}; }
-    & .onboarding-step-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .onboarding-step-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: ${c.radius.full}; color: transparent; }
-    & .onboarding-step[data-done] { cursor: default; }
-    & .onboarding-step[data-done] .onboarding-step-icon, & .onboarding-step[data-done] .onboarding-step-label { color: ${c.fgMuted}; text-decoration: line-through; }
-    & .onboarding-step[data-done]:hover { background: none; }
-    & .onboarding-step[data-done] .onboarding-step-check { background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; }`,
+    & .crisp-onboarding-steps { display: flex; flex-direction: column; }
+    & .crisp-onboarding-step { display: flex; align-items: center; gap: ${c.space["2"]}; height: 36px; padding: 0 ${c.space["1"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: start; cursor: pointer; transition: background-color .12s; }
+    & .crisp-onboarding-step:hover { background: ${c.bgRaised}; }
+    & .crisp-onboarding-step-icon { display: inline-flex; flex-shrink: 0; color: ${c.fgMuted}; }
+    & .crisp-onboarding-step-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-onboarding-step-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: ${c.radius.full}; color: transparent; }
+    & .crisp-onboarding-step[data-done] { cursor: default; }
+    & .crisp-onboarding-step[data-done] .crisp-onboarding-step-icon, & .crisp-onboarding-step[data-done] .crisp-onboarding-step-label { color: ${c.fgMuted}; text-decoration: line-through; }
+    & .crisp-onboarding-step[data-done]:hover { background: none; }
+    & .crisp-onboarding-step[data-done] .crisp-onboarding-step-check { background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

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

@@ -89,25 +89,25 @@ 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] }))] }));
+    return (_jsxs(_Fragment, { children: [shown.map((t) => (_jsx("span", { className: "crisp-recordstable-tag", "data-tone": tagTone(t), children: t }, t))), !expanded && overflow > 0 && (_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 _jsx("span", { className: "recordpage-empty", children: labels.setAValue });
+        return _jsx("span", { className: "crisp-recordpage-empty", children: labels.setAValue });
     switch (col.type) {
         case "tags":
             return _jsx(TagsValue, { values: v });
         case "number":
             return _jsx(_Fragment, { children: typeof v === "number" ? v.toLocaleString() : v });
         case "url":
-            return (_jsx("a", { className: "recordpage-link", href: `https://${v}`, target: "_blank", rel: "noreferrer", children: String(v) }));
+            return (_jsx("a", { className: "crisp-recordpage-link", href: `https://${v}`, target: "_blank", rel: "noreferrer", children: String(v) }));
         default:
             return _jsx(_Fragment, { children: String(v) });
     }
 }
 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] }));
+    return (_jsxs("div", { className: "crisp-recordpage-section-head", children: [_jsx("span", { className: "crisp-recordpage-section-title", children: title }), count != null && (_jsx("span", { className: "crisp-recordpage-section-count", children: count })), _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, }) {
@@ -117,7 +117,7 @@ function Composer({ placeholder, submitLabel, multiline, onSubmit, onCancel, lab
         if (t)
             onSubmit(t);
     };
-    return (_jsxs("div", { className: "recordpage-composer", children: [_jsx("textarea", { 
+    return (_jsxs("div", { className: "crisp-recordpage-composer", children: [_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)) {
@@ -126,24 +126,24 @@ function Composer({ placeholder, submitLabel, multiline, onSubmit, onCancel, lab
                     }
                     if (e.key === "Escape")
                         onCancel();
-                } }), _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 })] })] }));
+                } }), _jsxs("div", { className: "crisp-recordpage-composer-actions", children: [_jsx("button", { type: "button", className: "crisp-recordpage-btn", onClick: onCancel, children: labels.cancel }), _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 (_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: labels.notePlaceholder, submitLabel: labels.saveNote, onCancel: () => setOpen(false), onSubmit: (t) => {
+    return (_jsxs("section", { children: [_jsx(SectionHead, { title: labels.tabs.notes, count: notes.length, action: _jsxs("button", { type: "button", className: "crisp-recordpage-addbtn", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), labels.newNote] }) }), open && (_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 ? (_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))))] }));
+                } })), notes.length === 0 && !open ? (_jsx("div", { className: "crisp-recordpage-emptystate", children: labels.noNotesYet })) : (notes.map((n) => (_jsxs("div", { className: "crisp-recordpage-note", children: [_jsx(Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), _jsxs("div", { className: "crisp-recordpage-note-body", children: [_jsxs("div", { className: "crisp-recordpage-note-head", children: [_jsx("span", { className: "crisp-recordpage-note-author", children: labels.you }), _jsx("span", { className: "crisp-recordpage-note-time", children: n.time })] }), _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 (_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: labels.taskPlaceholder, submitLabel: labels.addTask, onCancel: () => setOpen(false), onSubmit: (t) => {
+    return (_jsxs("section", { children: [_jsx(SectionHead, { title: labels.tabs.tasks, count: tasks.length, action: _jsxs("button", { type: "button", className: "crisp-recordpage-addbtn", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), labels.newTask] }) }), open && (_jsx(Composer, { labels: labels, placeholder: labels.taskPlaceholder, submitLabel: labels.addTask, onCancel: () => setOpen(false), onSubmit: (t) => {
                     onAdd(t);
                     setOpen(false);
-                } })), 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))))] }));
+                } })), tasks.length === 0 && !open ? (_jsx("div", { className: "crisp-recordpage-emptystate", children: labels.noTasksYet })) : (tasks.map((t) => (_jsxs("div", { className: "crisp-recordpage-task", "data-done": t.done ? "" : undefined, children: [_jsx(Checkbox, { checked: t.done, onChange: () => onToggle(t.id), "aria-label": t.text }), _jsx("span", { className: "crisp-recordpage-task-text", children: t.text })] }, t.id))))] }));
 }
 function EmptyCard({ icon, children, }) {
-    return (_jsxs("div", { className: "recordpage-emptycard", children: [icon, children] }));
+    return (_jsxs("div", { className: "crisp-recordpage-emptycard", children: [icon, children] }));
 }
 /**
  * The full-page company record view — the page that opens when you click into a
@@ -337,38 +337,38 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
         },
     ].filter(Boolean);
     const shownActivity = showAllActivity ? activity : activity.slice(0, 2);
-    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 activityFeed = (_jsxs("section", { children: [_jsx(SectionHead, { title: t.tabs.activity, action: activity.length > 2 ? (_jsx("button", { type: "button", className: "crisp-recordpage-viewall crisp-recordpage-viewall--inline", onClick: () => setShowAllActivity((s) => !s), children: showAllActivity ? t.showLess : t.viewAll })) : undefined }), _jsx("div", { className: "crisp-recordpage-feed", children: shownActivity.map((a) => (_jsxs("div", { className: "crisp-recordpage-feed-item", children: [_jsx("span", { className: "crisp-recordpage-feed-dot", children: _jsx(ActivityIcon, { size: 13, strokeWidth: 2 }) }), _jsxs("div", { className: "crisp-recordpage-feed-body", children: [a.text, _jsx("div", { className: "crisp-recordpage-feed-time", children: a.time })] })] }, a.id))) })] }));
     const emailsEmpty = (_jsx(EmptyCard, { icon: _jsx(Inbox, { size: 22, strokeWidth: 1.5 }), children: t.noEmailsWith(name) }));
     const panel = (active) => {
         switch (active) {
             case "overview":
-                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 })] }));
+                return (_jsxs("div", { className: "crisp-recordpage-panel", children: [_jsxs("section", { children: [_jsx("div", { className: "crisp-recordpage-section-title", children: t.highlights }), _jsx("div", { className: "crisp-recordpage-hl-card", children: _jsx("div", { className: "crisp-recordpage-hl-grid", children: highlights.map((h) => (_jsxs("div", { className: "crisp-recordpage-hl-cell", children: [_jsx(h.icon, { className: "crisp-recordpage-hl-icon", size: 15, strokeWidth: 1.75 }), _jsx("div", { className: "crisp-recordpage-hl-label", children: h.label }), _jsx("div", { className: "crisp-recordpage-hl-value", children: h.value ?? (_jsx("span", { className: "crisp-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 });
+                return _jsx("div", { className: "crisp-recordpage-panel", children: activityFeed });
             case "notes":
-                return (_jsx("div", { className: "recordpage-panel", children: _jsx(NotesSection, { notes: notes, onAdd: addNote, labels: t }) }));
+                return (_jsx("div", { className: "crisp-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, labels: t }) }));
+                return (_jsx("div", { className: "crisp-recordpage-panel", children: _jsx(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t }) }));
             case "emails":
-                return _jsx("div", { className: "recordpage-panel", children: emailsEmpty });
+                return _jsx("div", { className: "crisp-recordpage-panel", children: emailsEmpty });
             default:
-                return (_jsx("div", { className: "recordpage-panel", children: _jsx(EmptyCard, { icon: _jsx(Folder, { size: 22, strokeWidth: 1.5 }), children: t.nothingHereYet }) }));
+                return (_jsx("div", { className: "crisp-recordpage-panel", children: _jsx(EmptyCard, { icon: _jsx(Folder, { size: 22, strokeWidth: 1.5 }), children: t.nothingHereYet }) }));
         }
     };
-    return (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, 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", { 
+    return (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", children: [_jsxs("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "crisp-recordpage-crumb-name", children: name })] }), _jsxs("div", { className: "crisp-recordpage-actions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--bg-brand-solid)" }), t.askAttio] }), onToggleFull && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-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: "crisp-recordpage-action crisp-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: "crisp-recordpage-body", children: [_jsxs("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "crisp-recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _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: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: _jsx(Copy, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: _jsx(FileText, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: _jsx(Share2, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: _jsx(SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsxs("div", { className: "crisp-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: 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("");
                                                     }
-                                                } })) : (_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: () => {
+                                                } })) : (_jsxs("button", { type: "button", className: "crisp-recordpage-collapse", "data-collapsed": detailsOpen ? undefined : "", "aria-expanded": detailsOpen, onClick: () => setDetailsOpen((o) => !o), children: [t.recordDetails, _jsx(ChevronDown, { className: "crisp-recordpage-chev", size: 12, strokeWidth: 2.5 })] })), _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 ? (_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, labels: t }) })] }, 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: "crisp-recordpage-field", children: [_jsxs("span", { className: "crisp-recordpage-field-label", children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : null, _jsx("span", { className: "crisp-recordpage-field-label-text", children: col.label })] }), _jsx("span", { className: "crisp-recordpage-field-value", children: _jsx(FieldValue, { col: col, row: record, labels: t }) })] }, col.key))), canRevealFields && (_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;
@@ -376,7 +376,7 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
                                                         setSearchOpen(next);
                                                         if (!next)
                                                             setFieldQuery("");
-                                                    }, 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: t.noLists })] })] }), _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 }))] })) : (_jsxs("div", { className: "crisp-recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsx(SectionHead, { title: t.tabs.lists, action: _jsxs("button", { type: "button", className: "crisp-recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), _jsx("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), _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.
@@ -386,6 +386,6 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
                             const rtl = isRtlElement(e.currentTarget);
                             const grow = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
                             setDetailsW((w) => grow ? Math.min(560, w + 16) : Math.max(300, w - 16));
-                        } }), _jsx("main", { className: "recordpage-main", children: _jsx(Tabs, { tabs: tabs, defaultValue: "overview", "aria-label": `${name} record`, children: panel }) })] })] }));
+                        } }), _jsx("main", { className: "crisp-recordpage-main", children: _jsx(Tabs, { tabs: tabs, defaultValue: "overview", "aria-label": `${name} record`, children: panel }) })] })] }));
 }
 RecordPage.displayName = "RecordPage";