@crisp-ui-kit/crisp 0.53.2 → 0.53.4

package/dist/esm/components/filldoc/filldoc.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cx } from "../../core/index.js";
+import { cx, useCrispMessage } from "../../core/index.js";
 import { FillSheet } from "../fillsheet/index.js";
 import { filldocRecipe } from "./filldoc.recipe.js";
 /** Size a textarea to its content; see FillSheet's autoGrow for the reset. */
@@ -36,7 +36,12 @@ const emptyTable = () => ({
  * page covered in handles and grips stops looking like a page, which is the
  * whole thing this is for.
  */
-export const FillDoc = React.forwardRef(function FillDoc({ blocks, onBlocksChange, mode = "edit", page = "a4", label, addTextLabel = "Text", addHeadingLabel = "Heading", addTableLabel = "Table", removeLabel = "Remove", className, style, ...rest }, forwardedRef) {
+export const FillDoc = React.forwardRef(function FillDoc({ blocks, onBlocksChange, mode = "edit", page = "a4", label, addTextLabel: addTextLabelProp, addHeadingLabel: addHeadingLabelProp, addTableLabel: addTableLabelProp, removeLabel: removeLabelProp, className, style, ...rest }, forwardedRef) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const addTextLabel = useCrispMessage(addTextLabelProp, "Text");
+    const addHeadingLabel = useCrispMessage(addHeadingLabelProp, "Heading");
+    const addTableLabel = useCrispMessage(addTableLabelProp, "Table");
+    const removeLabel = useCrispMessage(removeLabelProp, "Remove");
     const editable = mode === "edit";
     const replace = (i, block) => {
         const next = blocks.slice();

package/dist/esm/components/heatmapchart/heatmapchart.js

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { heatmapchartRecipe } from "./heatmapchart.recipe.js";
+/**
+ * An NxM cell-matrix chart — GRC's own risk heatmap (impact x likelihood)
+ * is the first consumer. Severity/intensity mapping (`tone`, `ring`) is
+ * entirely the caller's own data, not a scale this component invents; see
+ * the recipe's own doc comment for why (and for its measurement — or lack
+ * of one — against Attio).
+ */
+export function HeatmapChart({ data, rowAxis, colAxis, format = (cell) => (cell.value ? cell.value : ""), cellTitle, onCellClick, isCellClickable = (cell) => cell.value > 0, empty, emptyLabel = "Nothing to plot yet.", "aria-label": ariaLabel, className, ...rest }) {
+    const cols = data[0]?.length ?? 0;
+    const summary = ariaLabel ?? `Heatmap: ${data.length} x ${cols} grid`;
+    return (_jsx("div", { className: heatmapchartRecipe({ className }), ...rest, role: "img", "aria-label": summary, children: empty ? (_jsx("div", { className: "crisp-heatmapchart-empty", children: emptyLabel })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "crisp-heatmapchart-rowaxis", children: [_jsx("span", { children: rowAxis.high }), rowAxis.title != null && (_jsx("span", { className: "crisp-heatmapchart-rowaxis-title", children: rowAxis.title })), _jsx("span", { children: rowAxis.low })] }), _jsxs("div", { className: "crisp-heatmapchart-body", children: [_jsx("div", { className: "crisp-heatmapchart-grid", style: { gridTemplateColumns: `repeat(${cols}, 1fr)` }, children: data.map((row, r) => row.map((cell, cc) => {
+                                const clickable = onCellClick != null && isCellClickable(cell, r, cc);
+                                const title = cellTitle?.(cell, r, cc);
+                                const key = `${r}-${cc}`;
+                                const tone = cell.tone ?? "neutral";
+                                return clickable ? (_jsx("button", { type: "button", className: "crisp-heatmapchart-cell", "data-tone": tone, "data-ring": cell.ring ? "" : undefined, title: title, onClick: () => onCellClick?.(r, cc, cell), children: format(cell, r, cc) }, key)) : (_jsx("div", { className: "crisp-heatmapchart-cell", "data-tone": tone, "data-ring": cell.ring ? "" : undefined, title: title, children: format(cell, r, cc) }, key));
+                            })) }), _jsxs("div", { className: "crisp-heatmapchart-colaxis", children: [_jsx("span", { children: colAxis.low }), colAxis.title != null && _jsx("span", { children: colAxis.title }), _jsx("span", { children: colAxis.high })] })] })] })) }));
+}
+HeatmapChart.displayName = "HeatmapChart";

package/dist/esm/components/heatmapchart/heatmapchart.recipe.js

@@ -0,0 +1,46 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+const soft = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, transparent)`;
+// An NxM cell-matrix chart, alongside BarChart/LineChart/DonutChart — GRC's
+// own risk heatmap (impact x likelihood) is the first consumer. No Attio
+// widget in the workspace this was checked against (Reports/Dashboards:
+// bar/line/number report tiles) has a matching matrix chart to measure a
+// pixel value from, so this is composed entirely from already-measured
+// crisp values: the same `color-mix` soft-tint recipe Badge's own `soft()`
+// helper and StatCard's delta pill already use, at the same 14-16%,
+// against the token contract's own success/warning/orange/danger roles.
+// A cell's text stays `fgPrimary` at every tone — not tone-matched — the
+// same "the background already carries the severity, tone-on-tone measures
+// illegible" reasoning GRC's own hand-built heatmap already recorded.
+const config = defineRecipe({
+    name: "heatmapchart",
+    base: `display: flex; gap: ${c.space["2"]}; box-sizing: border-box; font-family: ${c.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-heatmapchart-rowaxis { display: flex; flex-direction: column; justify-content: space-between; padding: ${c.space["1"]} 0; font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; text-transform: uppercase; letter-spacing: 0.02em; color: ${c.fgNeutralSubtle}; }
+    & .crisp-heatmapchart-rowaxis-title { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
+
+    & .crisp-heatmapchart-body { flex: 1; }
+    & .crisp-heatmapchart-grid { display: grid; gap: ${c.space["1.5"]}; }
+
+    & .crisp-heatmapchart-cell { box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; border-radius: ${c.radius.md}; border: none; background: transparent; margin: 0; padding: 0; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.semibold}; font-variant-numeric: tabular-nums; color: ${c.fgPrimary}; }
+    & button.crisp-heatmapchart-cell { cursor: pointer; transition: filter 0.12s ease; }
+    & button.crisp-heatmapchart-cell:hover { filter: brightness(0.97); }
+    & button.crisp-heatmapchart-cell:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+
+    & .crisp-heatmapchart-cell[data-tone="neutral"] { background: ${c.bgRaised}; color: ${c.fgMuted}; }
+    & .crisp-heatmapchart-cell[data-tone="success"] { background: ${soft(c.bgSuccess, 16)}; }
+    & .crisp-heatmapchart-cell[data-tone="warning"] { background: ${soft(c.bgWarning, 16)}; }
+    & .crisp-heatmapchart-cell[data-tone="orange"] { background: ${soft(c.bgOrange, 18)}; }
+    & .crisp-heatmapchart-cell[data-tone="danger"] { background: ${soft(c.bgDanger, 16)}; }
+    & .crisp-heatmapchart-cell[data-ring] { box-shadow: inset 0 0 0 2px ${c.bgDangerSolid}; }
+
+    & .crisp-heatmapchart-colaxis { display: flex; justify-content: space-between; margin-top: ${c.space["1.5"]}; padding: 0 ${c.space["0.5"]}; font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; text-transform: uppercase; letter-spacing: 0.02em; color: ${c.fgNeutralSubtle}; }
+
+    & .crisp-heatmapchart-empty { padding: ${c.space["8"]} 0; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const heatmapchartRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/components/heatmapchart/index.js

@@ -0,0 +1 @@
+export * from "./heatmapchart.js";

package/dist/esm/components/spinner/spinner.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useCrispMessage } from "../../core/index.js";
 import { spinnerRecipe } from "./spinner.recipe.js";
 /** A spinning ring indicator. Reports `role="status"` for assistive tech. */
-export function Spinner({ size = 16, "aria-label": ariaLabel = "Loading", className, ...rest }) {
+export function Spinner({ size = 16, "aria-label": ariaLabelProp, className, ...rest }) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const ariaLabel = useCrispMessage(ariaLabelProp, "Loading");
     return (_jsx("span", { role: "status", "aria-label": ariaLabel, className: spinnerRecipe({ className }), ...rest, style: {
             width: size,
             height: size,

package/dist/esm/components/toast/toast.recipe.js

@@ -1,13 +1,17 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/index.js";
-// Toast notifications — a fixed bottom-right stack of cards on the measured
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// Toast notifications — a fixed TOP-right stack of cards on the measured
 // popover surface, each with a tone icon, title/description, optional action,
-// and a close button.
+// and a close button. Position, radius, padding, surface and shadow measured
+// live off Attio's own "Copied to clipboard!" toast (crisp#515): the stack
+// anchors top-right (not bottom-right), and the card shares Menu/Popover's
+// `bgPopover` surface + `elevation.floating` shadow (Lesson 31 — reference
+// the shared token, never a hand-typed near-duplicate).
 const config = defineRecipe({
     name: "toast",
     base: `display: contents; font-family: ${c.font.sans};
-    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: ${c.space["4"]}; bottom: ${c.space["4"]}; display: flex; flex-direction: column; gap: ${c.space["2"]}; width: 360px; max-width: calc(100vw - ${c.space["8"]}); pointer-events: none; }
-    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; box-sizing: border-box; padding: ${c.space["3"]}; border-radius: ${c.radius.xl}; background: ${c.bgRaised}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: ${c.space["4"]}; top: ${c.space["4"]}; display: flex; flex-direction: column; gap: ${c.space["2"]}; width: 360px; max-width: calc(100vw - ${c.space["8"]}); pointer-events: none; }
+    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; box-sizing: border-box; padding: ${c.space["2.5"]}; border-radius: ${c.radius.md}; background: ${c.bgPopover}; box-shadow: ${e.floating}; opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
     & .crisp-toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: ${c.fgMuted}; }
     & .crisp-toast[data-tone="info"] .crisp-toast-icon { color: ${c.bgBrandSolid}; }
     & .crisp-toast[data-tone="success"] .crisp-toast-icon { color: ${c.bgSuccess}; }

package/dist/esm/core/i18n.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 const CrispMessagesContext = React.createContext({});
-export function CrispMessagesProvider({ messages, children, }) {
-    return (_jsx(CrispMessagesContext.Provider, { value: messages, children: children }));
+const CrispComponentDefaultsContext = React.createContext({});
+export function CrispMessagesProvider({ messages, componentDefaults, children, }) {
+    return (_jsx(CrispMessagesContext.Provider, { value: messages, children: _jsx(CrispComponentDefaultsContext.Provider, { value: componentDefaults ?? {}, children: children }) }));
 }
 /**
  * Resolves one translatable string for a component: `explicit` is whatever
@@ -35,3 +36,16 @@ export function useCrispMessage(explicit, englishDefault) {
 export function useCrispMessages() {
     return React.useContext(CrispMessagesContext);
 }
+/**
+ * Reads one component's own whole-object defaults override, set via
+ * `CrispMessagesProvider`'s `componentDefaults` prop (see its own doc for
+ * why this exists separately from `useCrispMessage`). `T` is the
+ * component's own labels TYPE (e.g. `Partial<RecordPageLabels>`) — this
+ * hook itself only knows `name`, a plain string key; the caller supplies
+ * and trusts the real shape, the same way `useContext` always has for an
+ * untyped-at-the-provider value.
+ */
+export function useCrispComponentDefaults(name) {
+    const all = React.useContext(CrispComponentDefaultsContext);
+    return all[name];
+}

package/dist/esm/core/index.js

@@ -7,7 +7,7 @@ export { isRtlElement } from "./direction.js";
 export { FloatingPortal } from "./floating-portal.js";
 export { hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack.js";
 export { formValueStyle } from "./form-value.js";
-export { CrispMessagesProvider, useCrispMessage, useCrispMessages, } from "./i18n.js";
+export { CrispMessagesProvider, useCrispComponentDefaults, useCrispMessage, useCrispMessages, } from "./i18n.js";
 export { matchMentionTrigger, } from "./mention.js";
 export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";

package/dist/esm/index.js

@@ -29,6 +29,7 @@ export * from "./components/fileupload/index.js";
 export * from "./components/filldoc/index.js";
 export * from "./components/fillsheet/index.js";
 export * from "./components/formfield/index.js";
+export * from "./components/heatmapchart/index.js";
 export * from "./components/input/index.js";
 export * from "./components/kbd/index.js";
 export * from "./components/linechart/index.js";
@@ -78,6 +79,7 @@ export * from "./product/richtext/index.js";
 export * from "./product/settingssection/index.js";
 export * from "./product/settingsshell/index.js";
 export * from "./product/sidebar/index.js";
+export * from "./product/statlist/index.js";
 export * from "./product/tasklist/index.js";
 export * from "./product/trialbanner/index.js";
 export * from "./product/viewtoggle/index.js";

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

@@ -8,7 +8,7 @@ import { Select } from "../../components/select/index.js";
 import { Spinner } from "../../components/spinner/index.js";
 import { Switch } from "../../components/switch/index.js";
 import { Tabs } from "../../components/tabs/index.js";
-import { isRtlElement } from "../../core/index.js";
+import { isRtlElement, useCrispComponentDefaults } from "../../core/index.js";
 import { editableInputType, tagTone, useEditableField, } from "../recordstable/index.js";
 import { recordpageRecipe } from "./recordpage.recipe.js";
 function valueEmpty(v) {
@@ -220,19 +220,34 @@ function EmptyCard({ icon, children, }) {
  */
 export function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, ...rest }) {
     const { editingKey, pendingKey, error, openEditing, closeEditing, commit } = useEditableField(onEdit);
+    // crisp/#471: a CrispMessagesProvider's `componentDefaults.recordPage` sits
+    // BETWEEN the built-in English defaults and this instance's own explicit
+    // `labels` prop — a provider translates every RecordPage on the page at
+    // once, and a caller who still passes `labels` for one instance keeps
+    // overriding it there, same as before this existed. Not `useCrispMessage`:
+    // several of these entries (`domainSetTo`, `sortedBy`, …) are formatter
+    // FUNCTIONS, which a flat string dictionary can't hold.
+    const providerLabels = useCrispComponentDefaults("recordPage");
     const t = React.useMemo(() => ({
         ...recordPageLabels,
+        ...providerLabels,
         ...labels,
-        tabs: { ...recordPageLabels.tabs, ...labels?.tabs },
+        tabs: {
+            ...recordPageLabels.tabs,
+            ...providerLabels?.tabs,
+            ...labels?.tabs,
+        },
         highlightLabels: {
             ...recordPageLabels.highlightLabels,
+            ...providerLabels?.highlightLabels,
             ...labels?.highlightLabels,
         },
         highlightEmpty: {
             ...recordPageLabels.highlightEmpty,
+            ...providerLabels?.highlightEmpty,
             ...labels?.highlightEmpty,
         },
-    }), [labels]);
+    }), [labels, providerLabels]);
     const [favorite, setFavorite] = React.useState(false);
     // Notes/Tasks are controlled when the caller supplies `notes`/`tasks` (even
     // `[]`) -- otherwise RecordPage keeps its own self-contained state, as

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

@@ -14,7 +14,7 @@ import { Menu, MenuItem, useMenuKeyboard } from "../../components/menu/index.js"
 import { MultiSelect } from "../../components/multiselect/index.js";
 import { Select } from "../../components/select/index.js";
 import { Switch } from "../../components/switch/index.js";
-import { isInsideLaterFloatingLayer, isRtlElement, usePrefersReducedMotion, } from "../../core/index.js";
+import { isInsideLaterFloatingLayer, isRtlElement, useCrispComponentDefaults, usePrefersReducedMotion, } from "../../core/index.js";
 import { companyLogos } from "./company-logos.js";
 import { recordstableRecipe } from "./recordstable.recipe.js";
 const EDITABLE = new Set(["text", "number", "url", "currency"]);
@@ -456,12 +456,23 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
     const [filterConds, setFilterConds] = React.useState([]);
     const [filterQuery, setFilterQuery] = React.useState("");
     // one popover open at a time: "sort" | "filter" | "more" | `sum:<key>`
+    // crisp/#471: same "provider sits between the built-in default and this
+    // instance's own explicit labels prop" order as RecordPage's own — see
+    // its comment. Several entries here (`selectionAnnouncement`, `sortedBy`,
+    // `recordCount`, …) are formatter functions, which is why this goes
+    // through `useCrispComponentDefaults`, not `useCrispMessage`.
+    const providerLabels = useCrispComponentDefaults("recordsTable");
     const t = React.useMemo(() => ({
         ...recordsTableLabels,
+        ...providerLabels,
         ...labels,
-        agg: { ...recordsTableLabels.agg, ...labels?.agg },
-        op: { ...recordsTableLabels.op, ...labels?.op },
-    }), [labels]);
+        agg: {
+            ...recordsTableLabels.agg,
+            ...providerLabels?.agg,
+            ...labels?.agg,
+        },
+        op: { ...recordsTableLabels.op, ...providerLabels?.op, ...labels?.op },
+    }), [labels, providerLabels]);
     const [openMenu, setOpenMenu] = React.useState(null);
     // the element that opened the current menu, so Esc/select can hand focus back
     const menuReturn = React.useRef(null);

package/dist/esm/product/richtext/richtext.js

@@ -134,6 +134,19 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
     // entirely", the same distinction `updateBar` already makes for the block
     // menu's search input below.
     const mentionPickerRef = React.useRef(null);
+    // Whether focus currently sits somewhere inside whatever
+    // `renderMentionPicker` returned (#514) — tracked through React's own
+    // onFocus/onBlur, not `mentionPickerRef.current.contains(activeElement)`.
+    // A picker built from crisp's own `Command` (the shape #372's own doc
+    // recommends) renders through a `Portal`, so its DOM parent is nowhere
+    // near `mentionPickerRef` even though it's still that ref's REACT child;
+    // `.contains()` sees a stranger the instant the picker's search input
+    // takes focus and updateMention closes the picker it was just asked to
+    // protect. React's synthetic focus/blur events bubble through the
+    // component tree a portal renders into, not the DOM tree it renders to
+    // (documented React behaviour), so a plain onFocus/onBlur pair on this
+    // same wrapper sees the portal's contents correctly.
+    const mentionPickerHasFocusRef = React.useRef(false);
     const syncEmpty = (el) => {
         if (el)
             el.toggleAttribute("data-empty", (el.textContent ?? "") === "");
@@ -255,6 +268,11 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
     }, [readOnly, blockMenu, closeBlockMenu]);
     const closeMention = React.useCallback(() => {
         mentionRangeRef.current = null;
+        // Defensive, not load-bearing: the wrapper's onBlur already clears this
+        // when the picker's own focused element leaves the DOM on unmount, but
+        // resetting it directly here means a stale `true` can never survive
+        // past whatever actually closed the picker, blur-ordering included.
+        mentionPickerHasFocusRef.current = false;
         setMention(null);
     }, []);
     /**
@@ -266,16 +284,23 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
      * no trigger.
      *
      * Does NOT auto-close while focus sits inside the consumer's own picker
-     * (`mentionPickerRef`) — a picker with its own search field would
+     * (`mentionPickerHasFocusRef`) — a picker with its own search field would
      * otherwise close itself the instant that field took focus, since focus
      * moving there also moves the document selection out of `body`. This is
      * the same distinction `updateBar` already draws for the block menu's own
-     * search input, made while merging the two features together.
+     * search input, made while merging the two features together — except a
+     * consumer's picker, unlike the block menu's own inline search, is free
+     * to render through a Portal (crisp's own `Command`, the shape #372's own
+     * doc recommends building one from, does exactly that), so this reads a
+     * ref React's focus/blur bubbling keeps current instead of asking
+     * `mentionPickerRef`'s DOM node whether it contains `activeElement` (#514
+     * — a Portal's content is a DOM stranger to its React parent, so that
+     * check silently stopped protecting the one case it exists for).
      */
     const updateMention = React.useCallback(() => {
         if (readOnly)
             return;
-        if (mentionPickerRef.current?.contains(document.activeElement))
+        if (mentionPickerHasFocusRef.current)
             return;
         const body = bodyRef.current;
         const sel = window.getSelection();
@@ -528,7 +553,11 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
                         select: insertMention,
                         close: closeMention,
                     });
-                    return rendered == null ? null : (_jsx("div", { ref: mentionPickerRef, style: { display: "contents" }, children: rendered }));
+                    return rendered == null ? null : (_jsx("div", { ref: mentionPickerRef, style: { display: "contents" }, onFocus: () => {
+                            mentionPickerHasFocusRef.current = true;
+                        }, onBlur: () => {
+                            mentionPickerHasFocusRef.current = false;
+                        }, children: rendered }));
                 })()] }));
 });
 RichTextEditor.displayName = "RichTextEditor";

package/dist/esm/product/statlist/index.js

@@ -0,0 +1 @@
+export * from "./statlist.js";

package/dist/esm/product/statlist/statlist.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "../../components/badge/badge.js";
+import { statlistRecipe } from "./statlist.recipe.js";
+/**
+ * A list of label + trailing-count rows — a dashboard's own findings
+ * summary ("Open risks with no owner: 3") or an audit-readiness check list,
+ * each row optionally a link. Not measured against one specific Attio
+ * widget (see the recipe's own doc comment for why); composed from
+ * already-measured crisp values throughout.
+ */
+export function StatList({ items, emptyLabel = "Nothing to show", className, ...rest }) {
+    return (_jsx("div", { className: statlistRecipe({ className }), ...rest, children: items.length === 0 ? (_jsx("div", { className: "crisp-statlist-empty", children: emptyLabel })) : (items.map((item) => {
+            const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-statlist-label", children: item.label }), _jsx(Badge, { tone: item.count === 0 ? "neutral" : (item.tone ?? "neutral"), children: item.count })] }));
+            return item.href ? (_jsx("a", { href: item.href, onClick: item.onClick, className: "crisp-statlist-row", children: content }, item.id)) : (_jsx("div", { className: "crisp-statlist-row", children: content }, item.id));
+        })) }));
+}
+StatList.displayName = "StatList";

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

@@ -0,0 +1,29 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A list of label + trailing-count rows, each optionally a link — the
+// "N findings of this kind" shape a dashboard's own status summary and an
+// audit-readiness check list both need. No direct Attio widget measures
+// this exact row (Attio's own Reports/Dashboards surface in this workspace
+// has bar/line/number report tiles, not a findings list), so this reuses
+// already-measured crisp values throughout rather than a fresh guess:
+// TaskList's own row-divider structure (border-top, no border on the first
+// row), the type scale's own `md`/`sm` sizes, and Badge's own tone colours
+// for the trailing count — no new pixel or colour value is introduced here.
+const config = defineRecipe({
+    name: "statlist",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-statlist-row { display: flex; align-items: center; justify-content: space-between; gap: ${c.space["3"]}; padding: ${c.space["2.5"]} 0; border-top: 1px solid ${c.borderSubtle}; font-size: ${c.text.md}; color: inherit; text-decoration: none; }
+    & .crisp-statlist-row:first-child { border-top: none; }
+    & a.crisp-statlist-row:hover .crisp-statlist-label { color: ${c.fgBrandSoft}; }
+
+    & .crisp-statlist-label { color: ${c.fgMuted}; }
+
+    & .crisp-statlist-empty { padding: ${c.space["4"]} 0; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const statlistRecipe = resolveRecipe(config);
+export default config;

package/dist/heatmapchart.css

@@ -0,0 +1,27 @@
+.crisp-heatmapchart {
+  display: flex; gap: var(--crisp-space-2); box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-heatmapchart-rowaxis { display: flex; flex-direction: column; justify-content: space-between; padding: var(--crisp-space-1) 0; font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-rowaxis-title { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
+    & .crisp-heatmapchart-body { flex: 1; }
+    & .crisp-heatmapchart-grid { display: grid; gap: var(--crisp-space-1-5); }
+    & .crisp-heatmapchart-cell { box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; border-radius: var(--crisp-radius-md); border: none; background: transparent; margin: 0; padding: 0; font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-semibold); font-variant-numeric: tabular-nums; color: var(--crisp-fg-primary); }
+    & button.crisp-heatmapchart-cell { cursor: pointer; transition: filter 0.12s ease; }
+    & button.crisp-heatmapchart-cell:hover { filter: brightness(0.97); }
+    & button.crisp-heatmapchart-cell:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    & .crisp-heatmapchart-cell[data-tone="neutral"] { background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
+    & .crisp-heatmapchart-cell[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="warning"] { background: color-mix(in srgb, var(--crisp-bg-warning) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 18%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-ring] { box-shadow: inset 0 0 0 2px var(--crisp-bg-danger-solid); }
+    & .crisp-heatmapchart-colaxis { display: flex; justify-content: space-between; margin-top: var(--crisp-space-1-5); padding: 0 var(--crisp-space-0-5); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-empty { padding: var(--crisp-space-8) 0; text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-heatmapchart, .crisp-heatmapchart * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/heatmapchart.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface HeatmapchartVariants {
+
+}
+
+export declare const heatmapchartRecipe: RecipeFn<{  }>;

package/dist/heatmapchart.layered.css

@@ -0,0 +1,29 @@
+@layer crisp-components {
+.crisp-heatmapchart {
+  display: flex; gap: var(--crisp-space-2); box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-heatmapchart-rowaxis { display: flex; flex-direction: column; justify-content: space-between; padding: var(--crisp-space-1) 0; font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-rowaxis-title { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
+    & .crisp-heatmapchart-body { flex: 1; }
+    & .crisp-heatmapchart-grid { display: grid; gap: var(--crisp-space-1-5); }
+    & .crisp-heatmapchart-cell { box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; border-radius: var(--crisp-radius-md); border: none; background: transparent; margin: 0; padding: 0; font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-semibold); font-variant-numeric: tabular-nums; color: var(--crisp-fg-primary); }
+    & button.crisp-heatmapchart-cell { cursor: pointer; transition: filter 0.12s ease; }
+    & button.crisp-heatmapchart-cell:hover { filter: brightness(0.97); }
+    & button.crisp-heatmapchart-cell:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    & .crisp-heatmapchart-cell[data-tone="neutral"] { background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
+    & .crisp-heatmapchart-cell[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="warning"] { background: color-mix(in srgb, var(--crisp-bg-warning) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 18%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-ring] { box-shadow: inset 0 0 0 2px var(--crisp-bg-danger-solid); }
+    & .crisp-heatmapchart-colaxis { display: flex; justify-content: space-between; margin-top: var(--crisp-space-1-5); padding: 0 var(--crisp-space-0-5); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-empty { padding: var(--crisp-space-8) 0; text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-heatmapchart, .crisp-heatmapchart * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/statlist.css

@@ -0,0 +1,8 @@
+.crisp-statlist {
+  display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-statlist-row { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-3); padding: var(--crisp-space-2-5) 0; border-top: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-md); color: inherit; text-decoration: none; }
+    & .crisp-statlist-row:first-child { border-top: none; }
+    & a.crisp-statlist-row:hover .crisp-statlist-label { color: var(--crisp-fg-brand-soft); }
+    & .crisp-statlist-label { color: var(--crisp-fg-muted); }
+    & .crisp-statlist-empty { padding: var(--crisp-space-4) 0; text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}

package/dist/statlist.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface StatlistVariants {
+
+}
+
+export declare const statlistRecipe: RecipeFn<{  }>;

package/dist/statlist.layered.css

@@ -0,0 +1,10 @@
+@layer crisp-components {
+.crisp-statlist {
+  display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-statlist-row { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-3); padding: var(--crisp-space-2-5) 0; border-top: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-md); color: inherit; text-decoration: none; }
+    & .crisp-statlist-row:first-child { border-top: none; }
+    & a.crisp-statlist-row:hover .crisp-statlist-label { color: var(--crisp-fg-brand-soft); }
+    & .crisp-statlist-label { color: var(--crisp-fg-muted); }
+    & .crisp-statlist-empty { padding: var(--crisp-space-4) 0; text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}
+}

package/dist/styles.css

@@ -1028,6 +1028,34 @@
     & .crisp-formfield-error { font-size: var(--crisp-text-sm); line-height: 16px; color: var(--crisp-bg-danger); }
 }
 
+.crisp-heatmapchart {
+  display: flex; gap: var(--crisp-space-2); box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-heatmapchart-rowaxis { display: flex; flex-direction: column; justify-content: space-between; padding: var(--crisp-space-1) 0; font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-rowaxis-title { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
+    & .crisp-heatmapchart-body { flex: 1; }
+    & .crisp-heatmapchart-grid { display: grid; gap: var(--crisp-space-1-5); }
+    & .crisp-heatmapchart-cell { box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; border-radius: var(--crisp-radius-md); border: none; background: transparent; margin: 0; padding: 0; font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-semibold); font-variant-numeric: tabular-nums; color: var(--crisp-fg-primary); }
+    & button.crisp-heatmapchart-cell { cursor: pointer; transition: filter 0.12s ease; }
+    & button.crisp-heatmapchart-cell:hover { filter: brightness(0.97); }
+    & button.crisp-heatmapchart-cell:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    & .crisp-heatmapchart-cell[data-tone="neutral"] { background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
+    & .crisp-heatmapchart-cell[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="warning"] { background: color-mix(in srgb, var(--crisp-bg-warning) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 18%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-ring] { box-shadow: inset 0 0 0 2px var(--crisp-bg-danger-solid); }
+    & .crisp-heatmapchart-colaxis { display: flex; justify-content: space-between; margin-top: var(--crisp-space-1-5); padding: 0 var(--crisp-space-0-5); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-empty { padding: var(--crisp-space-8) 0; text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-heatmapchart, .crisp-heatmapchart * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 .crisp-input {
   position: relative; box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-field); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px;
     &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; transition: border-color .1s ease; pointer-events: none; }
@@ -1758,8 +1786,8 @@
 
 .crisp-toast {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); bottom: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
-    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-3); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
+    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-2-5); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
     & .crisp-toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: var(--crisp-fg-muted); }
     & .crisp-toast[data-tone="info"] .crisp-toast-icon { color: var(--crisp-bg-brand-solid); }
     & .crisp-toast[data-tone="success"] .crisp-toast-icon { color: var(--crisp-bg-success); }
@@ -2729,6 +2757,15 @@
   }
 }
 
+.crisp-statlist {
+  display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-statlist-row { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-3); padding: var(--crisp-space-2-5) 0; border-top: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-md); color: inherit; text-decoration: none; }
+    & .crisp-statlist-row:first-child { border-top: none; }
+    & a.crisp-statlist-row:hover .crisp-statlist-label { color: var(--crisp-fg-brand-soft); }
+    & .crisp-statlist-label { color: var(--crisp-fg-muted); }
+    & .crisp-statlist-empty { padding: var(--crisp-space-4) 0; text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}
+
 .crisp-tasklist {
   display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-tasklist-group { display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 36px; padding: 0 var(--crisp-space-2); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }