@crisp-ui-kit/crisp 0.50.0 → 0.52.0

package/dist/cjs/product/recordstable/editable-field.js

@@ -0,0 +1,113 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditableField = useEditableField;
+exports.editableInputType = editableInputType;
+const React = __importStar(require("react"));
+/**
+ * The async-commit state machine behind `RecordPage`'s editable Details
+ * column (#431) — the same shape `DataTable`'s own `commitEdit` uses
+ * (#385/#430): a sync `onEdit` (returns `undefined`) commits and closes
+ * immediately; a Promise-returning `onEdit` keeps the field open and pending
+ * while it settles, then either closes it (resolve) or closes it AND
+ * reverts while showing the rejection's message (reject). The revert needs
+ * no extra code here either: `RecordPage` never mutates `record` itself, so
+ * once `editingKey` clears, the field simply renders `record[key]` again —
+ * whatever it still says.
+ *
+ * `RecordPanel` (the peek panel) used to share this hook too, before #448
+ * found that Attio's own peek has no editable field at all to attach it to
+ * — only `RecordPage`'s Details column does. Kept as its own module rather
+ * than folded back into `recordpage.tsx`: a second consumer turning up
+ * again is a smaller change than re-extracting it would be.
+ */
+function useEditableField(onEdit) {
+    const [editingKey, setEditingKey] = React.useState(null);
+    // Set only while an async `onEdit` is in flight -- a sync `onEdit` never
+    // touches this.
+    const [pendingKey, setPendingKey] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    // Opening a field's editor also clears any stale error left over from a
+    // PREVIOUS failed commit on it -- otherwise a rejection from three edits
+    // ago would still be sitting there while the reader tries again.
+    const openEditing = React.useCallback((key) => {
+        setError(null);
+        setEditingKey(key);
+    }, []);
+    const closeEditing = React.useCallback(() => setEditingKey(null), []);
+    const commit = React.useCallback((id, key, value) => {
+        setError(null);
+        const result = onEdit?.(id, key, value);
+        if (result && typeof result.then === "function") {
+            setPendingKey(key);
+            result.then(() => {
+                setPendingKey(null);
+                setEditingKey(null);
+            }, (err) => {
+                setPendingKey(null);
+                setEditingKey(null);
+                setError({
+                    key,
+                    message: err instanceof Error
+                        ? err.message
+                        : typeof err === "string"
+                            ? err
+                            : "Could not save",
+                });
+            });
+            return;
+        }
+        setEditingKey(null);
+    }, [onEdit]);
+    return { editingKey, pendingKey, error, openEditing, closeEditing, commit };
+}
+/**
+ * Which plain editor a column gets when it's `editable` without an
+ * `editor: "select" | "switch"` — identical to `DataTable`'s own
+ * `editorFor` (#385): number/currency get a numeric field, date a native
+ * date field, everything else (text, entity, tags, url, status, reference)
+ * a plain text field. Kept as one function so the two never drift apart.
+ */
+function editableInputType(colType) {
+    switch (colType) {
+        case "number":
+        case "currency":
+            return { type: "number", inputMode: "decimal" };
+        case "date":
+            return { type: "date" };
+        default:
+            return { type: "text", inputMode: "text" };
+    }
+}

package/dist/cjs/product/recordstable/index.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.recordstableRecipe = exports.tagTone = exports.RecordsTable = exports.defaultRows = exports.defaultColumns = void 0;
+exports.recordstableRecipe = exports.tagTone = exports.RecordsTable = exports.defaultRows = exports.defaultColumns = exports.useEditableField = exports.editableInputType = void 0;
+var editable_field_1 = require("./editable-field");
+Object.defineProperty(exports, "editableInputType", { enumerable: true, get: function () { return editable_field_1.editableInputType; } });
+Object.defineProperty(exports, "useEditableField", { enumerable: true, get: function () { return editable_field_1.useEditableField; } });
 var recordstable_1 = require("./recordstable");
 Object.defineProperty(exports, "defaultColumns", { enumerable: true, get: function () { return recordstable_1.defaultColumns; } });
 Object.defineProperty(exports, "defaultRows", { enumerable: true, get: function () { return recordstable_1.defaultRows; } });

package/dist/cjs/product/recordstable/recordstable.js

@@ -262,15 +262,17 @@ function EntityCell({ value, pinned, onOpenPage, avatarTone = "brand", labels, }
 }
 function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", labels, }) {
     const value = row[column.key];
-    // `render` fully owns the cell's content — no empty-dash fallback, no
-    // type renderer; it's the only thing drawn here (see the doc comment on
+    // `render` fully owns the cell's content — no empty fallback, no type
+    // renderer; it's the only thing drawn here (see the doc comment on
     // `Column.render`).
     if (column.render)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: column.render(value, row) });
     if (value == null ||
         value === "" ||
         (Array.isArray(value) && !value.length)) {
-        return (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-muted", children: "\u2014" });
+        // Attio's own empty cell is genuinely blank -- no placeholder character
+        // at all (#412).
+        return null;
     }
     // `format` keeps the type renderer's chrome below and only replaces the
     // text it displays.
@@ -313,11 +315,40 @@ function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", label
 function StatusCell({ column, row, onChange, }) {
     return ((0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", "aria-label": column.label, placeholder: "\u2014", value: row[column.key] ?? undefined, onValueChange: onChange, options: column.options ?? [] }));
 }
+// A sentinel that can't collide with a real record id (crisp never generates
+// one, and a consumer's own ids come from their own data store) -- picking
+// this row calls `onCreateReference`, not `onChange` (#449).
+const CREATE_REFERENCE_VALUE = "__crisp_create_reference__";
+/** The 16px avatar Attio's own reference picker draws before every option's
+ * label -- a photo when the option carries one, a generic person glyph
+ * otherwise (measured live, #449: Attio's own fallback is an icon, not
+ * initials -- a different, deliberate choice from the entity cell's own
+ * initials fallback elsewhere in this file). */
+function referenceOptionLabel(o) {
+    return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordstable-refoption", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", className: "crisp-recordstable-refoption-avatar", children: o.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: o.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.CircleUserRound, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" })) }), o.label] }));
+}
 function ReferenceCell({ column, row, onChange, labels, }) {
-    return ((0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", searchable: true, searchPlaceholder: labels.searchRecordsPlaceholder, "aria-label": column.label, placeholder: labels.setRecordPlaceholder, value: row[column.key] ?? undefined, onValueChange: onChange, options: (column.refOptions ?? []).map((o) => ({
-            value: o.value,
-            label: o.label,
-        })) }));
+    const [query, setQuery] = React.useState("");
+    const options = (column.refOptions ?? []).map((o) => ({
+        value: o.value,
+        label: referenceOptionLabel(o),
+        keywords: o.label,
+    }));
+    if (column.onCreateReference) {
+        options.push({
+            value: CREATE_REFERENCE_VALUE,
+            label: ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordstable-refoption crisp-recordstable-refoption--create", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), `Create ${column.createLabel ?? "record"}`] })),
+            // always reachable regardless of the typed query -- it's an action,
+            // not a record to filter away
+            keywords: query,
+        });
+    }
+    return ((0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", searchable: true, searchPlaceholder: labels.searchRecordsPlaceholder, onSearchChange: setQuery, "aria-label": column.label, placeholder: labels.setRecordPlaceholder, value: row[column.key] ?? undefined, onValueChange: (v) => {
+            if (v === CREATE_REFERENCE_VALUE)
+                column.onCreateReference?.(query);
+            else
+                onChange(v);
+        }, options: options }));
 }
 function TagsCell({ column, row, options, onChange, labels, }) {
     const value = row[column.key] ?? [];
@@ -343,10 +374,35 @@ function TagsCell({ column, row, options, onChange, labels, }) {
 const core_2 = require("../../core");
 Object.defineProperty(exports, "formatCellDate", { enumerable: true, get: function () { return core_2.formatCellDate; } });
 Object.defineProperty(exports, "parseCellDate", { enumerable: true, get: function () { return core_2.parseCellDate; } });
+// "1998" for a year-only raw value, "Sep 1998" for year-month, and the full
+// "Sep 4, 1998" only once the raw value actually named a day (#312) --
+// DatePickerField's own default format always prints full precision, since
+// as a general calendar field it has no raw string to read a precision from.
+function formatByPrecision(d, precision) {
+    if (precision === "year")
+        return String(d.getFullYear());
+    return d.toLocaleDateString(undefined, {
+        month: "short",
+        day: precision === "month" ? undefined : "numeric",
+        year: "numeric",
+    });
+}
 function DateCell({ column, row, onChange, }) {
     const raw = row[column.key];
     const value = (0, core_2.parseCellDate)(raw);
-    return ((0, jsx_runtime_1.jsx)(datepickerfield_1.DatePickerField, { variant: "ghost", "aria-label": column.label, value: value, onChange: (d) => onChange((0, core_2.formatCellDate)(d)) }));
+    const precision = raw ? (0, core_2.cellDatePrecision)(raw) : "day";
+    return ((0, jsx_runtime_1.jsx)(datepickerfield_1.DatePickerField, { variant: "ghost", "aria-label": column.label, value: value, 
+        // Out of scope for #394 (which added Clear to DatePickerField itself):
+        // a cell's OWN clear-to-empty affordance is a different, unmeasured
+        // question, and this callback's `string` contract has no "empty" of
+        // its own to report yet. Keeps this cell's exact pre-#394 behavior.
+        clearable: false, 
+        // #417: the trigger displays the value at its stored precision
+        // (year-only stays year-only) rather than always a full date.
+        format: (d) => formatByPrecision(d, precision), onChange: (d) => {
+            if (d)
+                onChange((0, core_2.formatCellDate)(d));
+        } }));
 }
 /**
  * The "New <object>" create modal — measured from a create-record dialog:
@@ -374,7 +430,7 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
                 row[col.key] = { name: raw || labels.untitled };
             }
             else if (!raw) {
-                // leave empty fields unset so the cell renders its "—" placeholder
+                // leave empty fields unset so the cell renders blank (#412)
             }
             else if (col.type === "tags") {
                 row[col.key] = raw
@@ -406,7 +462,7 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
     return ((0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { open: open, onOpenChange: onOpenChange, title: labels.newRecordTitle(entityLabel), icon: EntityIcon ? (0, jsx_runtime_1.jsx)(EntityIcon, { size: 16, strokeWidth: 1.75 }) : undefined, width: 720, children: [(0, jsx_runtime_1.jsx)(dialog_1.DialogBody, { children: columns.map((col, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-dialog-field", children: [(0, jsx_runtime_1.jsx)("label", { className: "crisp-dialog-field-label", htmlFor: `create-${col.key}`, children: col.label }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: `create-${col.key}`, ref: i === 0 ? firstRef : undefined, value: values[col.key] ?? "", onChange: (e) => set(col.key, e.currentTarget.value), placeholder: labels.setFieldPlaceholder(col.label), onKeyDown: (e) => {
                                 if (e.key === "Enter" && (e.metaKey || e.ctrlKey))
                                     submit();
-                            } })] }, col.key))) }), (0, jsx_runtime_1.jsxs)(dialog_1.DialogFooter, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-dialog-more", children: [labels.createMore, (0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-dialog-submit", onClick: submit, children: [labels.createRecord, (0, jsx_runtime_1.jsx)("span", { className: "crisp-dialog-submit-key", children: "\u2318\u21B5" })] })] })] }));
+                            } })] }, col.key))) }), (0, jsx_runtime_1.jsxs)(dialog_1.DialogFooter, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-dialog-more", children: [(0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore }), labels.createMore] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-dialog-submit", onClick: submit, children: [labels.createRecord, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-dialog-submit-key", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("kbd", { children: "\u2318" }), (0, jsx_runtime_1.jsx)("kbd", { children: (0, jsx_runtime_1.jsx)(lucide_react_1.CornerDownLeft, { size: 10, strokeWidth: 2 }) })] })] })] })] }));
 }
 /**
  * A measured-style record grid — fully featured. Toolbar (search / sort status /
@@ -1073,7 +1129,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                                 setDragCol(col.key);
                                                                 e.dataTransfer.effectAllowed = "move";
                                                             }
-                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 14, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-th-label", children: col.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sort", children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
+                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 16, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-th-label", children: col.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sort", children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
                                                         rootRef.current &&
                                                         (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "crisp-recordstable-menu crisp-recordstable-menu--fixed crisp-recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveLeft] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveRight] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-menu-sep" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
                                                                         setRenamingCol(col.key);

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

@@ -74,6 +74,14 @@ ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("recordstable")}
     & .crisp-recordstable-td--picker .crisp-multiselect-chips .crisp-recordstable-tag { flex-shrink: 0; max-width: none; }
     & .crisp-recordstable-td--picker .crisp-multiselect-chevron { display: none; }
     & .crisp-recordstable-td--picker .crisp-multiselect-placeholder { color: ${tokens_1.contract.fgMuted}; }
+    /* reference picker: a leading 16px avatar per option, plus a trailing
+       "Create X" row when the consumer supplies one (#449) -- measured live
+       against Attio's own picker (16px circular avatar, 16px plain icon for
+       the create row, both sitting in the option's existing 8px gap, no new
+       gap value invented). */
+    & .crisp-recordstable-refoption { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-recordstable-refoption-avatar { flex-shrink: 0; }
+    & .crisp-recordstable-refoption--create { color: ${tokens_1.contract.fgMuted}; }
     & .crisp-recordstable-status { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
     & .crisp-recordstable-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${tokens_1.contract.radius.full}; }
     & .crisp-recordstable-cell { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 100%; min-width: 0; }
@@ -132,7 +140,7 @@ ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("recordstable")}
     & .crisp-recordstable-empty { display: flex; align-items: center; justify-content: center; min-height: 320px; padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["4"]}; }
 
     /* summary footer — per-column aggregation, sticky to the bottom */
-    & .crisp-recordstable-sum { position: sticky; bottom: 0; z-index: 2; height: ${tokens_1.contract.size.tableRow}; padding: 0; border-top: 1px solid ${tokens_1.contract.borderSubtle}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; }
+    & .crisp-recordstable-sum { position: sticky; bottom: 0; z-index: 2; height: ${tokens_1.contract.size.tableRow}; padding: 0; border-top: 1px solid ${tokens_1.contract.borderSubtle}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; }
     & tfoot .crisp-recordstable-col-check, & tfoot .crisp-recordstable-col-entity { position: sticky; bottom: 0; z-index: 3; }
     & .crisp-recordstable-sum:last-child { border-inline-end: none; }
     & .crisp-recordstable-sum-btn { display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["3"]}; border: none; background: none; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; white-space: nowrap; overflow: hidden; }

package/dist/cjs/product/recordstable/recordstable.tag.js

@@ -7,9 +7,14 @@ const tokens_1 = require("../../tokens");
  * `border-radius: ${c.radius.chip}`, 14px/20px at weight 500, and a 1px inset ring in the
  * tone's colour.
  *
- * Shared because RecordsTable and RecordPanel render the *same* chip. It used
- * to be pasted into both recipes, and the two copies had already started to
- * drift — adding the measured inset ring meant patching the same rules twice.
+ * Its own module (not pasted into `recordstable.recipe.ts`) because it used
+ * to be shared with `RecordPanel`'s own Details field list too, and the two
+ * copies had already started to drift before that sharing existed — adding
+ * the measured inset ring meant patching the same rules twice. `RecordPanel`
+ * no longer renders a Details list (#448, Attio's own peek doesn't have
+ * one), so `RecordsTable` is this module's only consumer now; kept as its
+ * own file rather than folded back in, since a second consumer showing up
+ * again is exactly how the drift happened the first time.
  */
 exports.recordTagCss = `& .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; }
     & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 30%, transparent); }

package/dist/cjs/product/richtext/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.richtextRecipe = exports.RichTextEditor = void 0;
+exports.richtextRecipe = exports.RichTextEditor = exports.RICHTEXT_COLOR_TONES = void 0;
 var richtext_1 = require("./richtext");
+Object.defineProperty(exports, "RICHTEXT_COLOR_TONES", { enumerable: true, get: function () { return richtext_1.RICHTEXT_COLOR_TONES; } });
 Object.defineProperty(exports, "RichTextEditor", { enumerable: true, get: function () { return richtext_1.RichTextEditor; } });
 var richtext_recipe_1 = require("./richtext.recipe");
 Object.defineProperty(exports, "richtextRecipe", { enumerable: true, get: function () { return richtext_recipe_1.richtextRecipe; } });