@crisp-ui-kit/crisp 0.54.5 → 0.54.7

package/dist/styles.layered.css

@@ -680,10 +680,14 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
-    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
-       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
-       draggable + dataTransfer, the same one column reorder already uses
-       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
+    /* url/email cell types (#654) -- same measured values as RecordsTable's own .crisp-recordstable-link, which this mirrors: no underline at rest, underline on hover, own-colour text rather than a browser-blue link. */
+    & .crisp-datatable-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-link:hover { text-decoration: underline; }
+    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures a leading 20px grip column, a 16px grip icon, and the row's own
+       hairline doubling as the drop indicator (it tints toward the brand
+       colour as the active drop target). The affordance + geometry are
+       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5 draggable + dataTransfer, the same one column reorder already uses (RecordsTable's reorderColumn) -- not a proprietary
+       pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }
@@ -1743,7 +1747,7 @@
     & .crisp-tabletoolbar-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-tabletoolbar-sort-learn svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-tabletoolbar-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-tabletoolbar-menu-item:disabled:hover { background: none; }
@@ -1756,6 +1760,7 @@
     & .crisp-tabletoolbar-menu--right { left: auto; right: 0; }
     & .crisp-tabletoolbar-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-tabletoolbar-menu--hdr { min-width: 200px; }
+    & .crisp-tabletoolbar-menu--op { min-width: 134px; }
     & .crisp-tabletoolbar-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
@@ -1893,6 +1898,13 @@
 .crisp-tooltip {
   position: fixed; z-index: 70; box-sizing: border-box; pointer-events: none; max-width: 260px; padding: var(--crisp-space-1-5) var(--crisp-space-2); border-radius: var(--crisp-radius-md); background: #101112; color: #eeeff1; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); line-height: 1.45; box-shadow: 0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04); opacity: 1; transition: opacity 0.12s ease;
     @starting-style { opacity: 0; }
+    & .crisp-tooltip-reference-row { display: inline-flex; align-items: center; gap: var(--crisp-space-1); }
+}
+.crisp-tooltip--variant_plain {
+  
+}
+.crisp-tooltip--variant_reference {
+  box-shadow: rgba(0,0,0,0) 0 0 0 1px inset, rgba(28,40,64,0.18) 0 0 2px 0, rgba(0,0,0,0.04) 0 1px 3px 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1967,14 +1979,18 @@
 
 .crisp-authshell {
   min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    &[data-single-pane] { justify-content: center; }
     & .crisp-authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--crisp-border-default); }
     & .crisp-authshell-progress-fill { height: 2px; background: var(--crisp-fg-primary); border-radius: 4px; transition: width .2s; }
     & .crisp-authshell-logo { margin-top: var(--crisp-space-8); height: 24px; display: flex; align-items: center; }
     & .crisp-authshell-card { margin-top: var(--crisp-space-6); display: flex; height: 692px; border-radius: 20px; border: 1px solid var(--crisp-border-subtle); overflow: hidden; }
+    &[data-single-pane] .crisp-authshell-card { height: auto; border: none; border-radius: 0; overflow: visible; }
     & .crisp-authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
+    &[data-single-pane] .crisp-authshell-pane { flex: 0 0 auto; padding: 0; }
     & .crisp-authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: var(--crisp-bg-subtle); border-inline-start: 1px solid color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
     & .crisp-authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, var(--crisp-bg-subtle) 0%, transparent) 0%, var(--crisp-bg-subtle) 100%); pointer-events: none; }
     & .crisp-authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--crisp-space-8); align-items: center; }
+    &[data-single-pane] .crisp-authshell-body { width: 360px; }
     & .crisp-authshell-title { font-size: 20px; line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); align-self: stretch; }
     & .crisp-authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
     & .crisp-authshell-footer { margin-top: var(--crisp-space-6); display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); line-height: 16px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
@@ -2739,7 +2755,7 @@
     & .crisp-recordstable-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-recordstable-sort-learn svg { flex-shrink: 0; }
     & .crisp-recordstable-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-recordstable-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordstable-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-recordstable-menu-item:disabled:hover { background: none; }
@@ -2752,6 +2768,7 @@
     & .crisp-recordstable-menu--right { left: auto; right: 0; }
     & .crisp-recordstable-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-recordstable-menu--hdr { min-width: 200px; }
+    & .crisp-recordstable-menu--op { min-width: 134px; }
     & .crisp-recordstable-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }

package/dist/tabletoolbar.css

@@ -39,7 +39,7 @@
     & .crisp-tabletoolbar-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-tabletoolbar-sort-learn svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-tabletoolbar-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-tabletoolbar-menu-item:disabled:hover { background: none; }
@@ -52,6 +52,7 @@
     & .crisp-tabletoolbar-menu--right { left: auto; right: 0; }
     & .crisp-tabletoolbar-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-tabletoolbar-menu--hdr { min-width: 200px; }
+    & .crisp-tabletoolbar-menu--op { min-width: 134px; }
     & .crisp-tabletoolbar-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }

package/dist/tabletoolbar.layered.css

@@ -40,7 +40,7 @@
     & .crisp-tabletoolbar-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-tabletoolbar-sort-learn svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-tabletoolbar-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-tabletoolbar-menu-item:disabled:hover { background: none; }
@@ -53,6 +53,7 @@
     & .crisp-tabletoolbar-menu--right { left: auto; right: 0; }
     & .crisp-tabletoolbar-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-tabletoolbar-menu--hdr { min-width: 200px; }
+    & .crisp-tabletoolbar-menu--op { min-width: 134px; }
     & .crisp-tabletoolbar-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }

package/dist/tooltip.css

@@ -1,6 +1,13 @@
 .crisp-tooltip {
   position: fixed; z-index: 70; box-sizing: border-box; pointer-events: none; max-width: 260px; padding: var(--crisp-space-1-5) var(--crisp-space-2); border-radius: var(--crisp-radius-md); background: #101112; color: #eeeff1; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); line-height: 1.45; box-shadow: 0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04); opacity: 1; transition: opacity 0.12s ease;
     @starting-style { opacity: 0; }
+    & .crisp-tooltip-reference-row { display: inline-flex; align-items: center; gap: var(--crisp-space-1); }
+}
+.crisp-tooltip--variant_plain {
+  
+}
+.crisp-tooltip--variant_reference {
+  box-shadow: rgba(0,0,0,0) 0 0 0 1px inset, rgba(28,40,64,0.18) 0 0 2px 0, rgba(0,0,0,0.04) 0 1px 3px 0;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/tooltip.d.ts

@@ -1,7 +1,7 @@
 import type { RecipeFn } from "../core/types";
 
 export interface TooltipVariants {
-
+  variant?: "plain" | "reference";
 }
 
-export declare const tooltipRecipe: RecipeFn<{  }>;
+export declare const tooltipRecipe: RecipeFn<{ variant: { plain: string; reference: string } }>;

package/dist/tooltip.layered.css

@@ -2,6 +2,13 @@
 .crisp-tooltip {
   position: fixed; z-index: 70; box-sizing: border-box; pointer-events: none; max-width: 260px; padding: var(--crisp-space-1-5) var(--crisp-space-2); border-radius: var(--crisp-radius-md); background: #101112; color: #eeeff1; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); line-height: 1.45; box-shadow: 0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04); opacity: 1; transition: opacity 0.12s ease;
     @starting-style { opacity: 0; }
+    & .crisp-tooltip-reference-row { display: inline-flex; align-items: center; gap: var(--crisp-space-1); }
+}
+.crisp-tooltip--variant_plain {
+  
+}
+.crisp-tooltip--variant_reference {
+  box-shadow: rgba(0,0,0,0) 0 0 0 1px inset, rgba(28,40,64,0.18) 0 0 2px 0, rgba(0,0,0,0.04) 0 1px 3px 0;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/types/components/datatable/datatable.d.ts

@@ -22,7 +22,20 @@ export type DataEditableOption = {
      * `editor: "select"`. */
     avatar?: string;
 };
-export type DataCellType = "text" | "entity" | "tags" | "status" | "date" | "datetime" | "number" | "currency";
+export type DataCellType = "text" | "entity" | "tags" | "status" | "date" | "datetime" | "number" | "currency"
+/** Opens `https://{value}` in a new tab -- matches RecordsTable's own
+ * `url` type exactly (crisp/#654): `color: fgPrimary`, no underline at
+ * rest, underline on hover. A click stops propagation, same as an
+ * `entity` column's `onEntityClick` link, so it doesn't also fire the
+ * row's own `onRowClick`. */
+ | "url"
+/** Opens `mailto:{value}`, same link styling as `url`. Attio confirms
+ * this is a distinct column type ("Primary email address", checklist
+ * G-042), but its editor was never opened live in the measured
+ * workspace -- this type is display-only for now; editing still falls
+ * through to the plain-text editor every other non-number/date type
+ * gets, not a dedicated one (see #597 for when that's measured). */
+ | "email";
 export type DataTableColumn<T> = {
     key: string;
     /** Truncates with an ellipsis when it's wider than the column (#534: a
@@ -35,6 +48,17 @@ export type DataTableColumn<T> = {
     type?: DataCellType;
     /** A leading field-type icon in the header (matches RecordsTable). */
     icon?: IconType;
+    /** This column's values reference another type of record (e.g. a
+     * "Primary location" column of Country records). When the header
+     * overflows, its `Tooltip` appends this type's icon and name after the
+     * label and switches to Attio's second, reference-column tooltip chrome
+     * (crisp#580) — distinct from `icon` above, which is the column's own
+     * field-type glyph shown in the header row itself, not inside the
+     * tooltip. Omit for a plain column; the tooltip stays label-only (#534). */
+    referencedType?: {
+        icon: IconType;
+        label: string;
+    };
     /** Currency symbol for `currency` columns (default "$"). */
     symbol?: string;
     /** Allow drag-to-resize on this column (default true). */
@@ -51,17 +75,25 @@ export type DataTableColumn<T> = {
     editable?: boolean;
     /** The inline editor an `editable` column opens. Omitted: a plain field
      * inferred from `type` (number/date/datetime/text). `"select"`/
-     * `"reference"` render crisp's own `Select` the same way — at rest the
-     * cell shows the column's `render`/formatted value like every other
-     * editable type (#453), and double-click (or Enter on the selected
+     * `"reference"`/`"actor"` render crisp's own `Select` the same way — at
+     * rest the cell shows the column's `render`/formatted value like every
+     * other editable type (#453), and double-click (or Enter on the selected
      * cell) opens the picker; choosing a value commits and closes it,
-     * Escape cancels. `select` reads `options`; `reference` reads
-     * `refOptions` and is search-enabled, the same searchable-`Select`
+     * Escape cancels. `select` reads `options`; `reference`/`actor` both
+     * read `refOptions` and are search-enabled, the same searchable-`Select`
      * shape as `RecordsTable`'s own `ReferenceCell`. `"switch"` is the one
      * exception — ALWAYS its own live widget, no double-click gate, since
      * flipping the toggle IS the commit gesture and there's no meaningfully
-     * different "rest" display for a boolean. */
-    editor?: "select" | "switch" | "reference";
+     * different "rest" display for a boolean.
+     *
+     * `"actor"` (crisp/#654, checklist G-039) is `"reference"` with Attio's
+     * own measured person-picker copy as the default instead of a generic
+     * one: `refSearchPlaceholder` defaults to "Search people…" and the
+     * empty-search state reads "No users" rather than `Select`'s own
+     * generic "No results" — both still overridable the normal way.
+     * Otherwise identical to `reference`: same `refOptions` shape, same
+     * `onCreateReference`/`createLabel` "Create X" row. */
+    editor?: "select" | "switch" | "reference" | "actor";
     /** Options for `editor: "select"` (value/label, an optional `color` a
      * caller's own `render` can read) — same shape as RecordsTable's
      * `Column.options` for its `status` picker. */
@@ -72,10 +104,17 @@ export type DataTableColumn<T> = {
      * RecordsTable's own `ReferenceCell`, which this picker mirrors. */
     refOptions?: DataEditableOption[];
     /** Placeholder for `editor: "reference"`'s search input. Defaults to
-     * `Select`'s own generic "Search…" — a generic primitive doesn't hardcode
-     * Attio's own copy ("Search records..."), which is workspace/object
-     * text, not a crisp-measured value. */
+     * `Select`'s own generic "Search…" for `reference` — a generic primitive
+     * doesn't hardcode Attio's own copy ("Search records..."), which is
+     * workspace/object text, not a crisp-measured value. `editor: "actor"`
+     * defaults this to the measured "Search people…" instead (still
+     * overridable here). */
     refSearchPlaceholder?: string;
+    /** `editor: "reference"`/`"actor"`'s empty-search-results text. Defaults
+     * to `Select`'s own generic "No results" for `reference`; `"actor"`
+     * defaults this to the measured "No users" (checklist G-039 — a real
+     * empty-search state on an empty query, not an error). */
+    refEmptyLabel?: string;
     /** Adds a trailing "Create {createLabel}" row to `editor: "reference"`'s
      * picker (Attio's own always has one, #449) — rendered only when this is
      * provided. Picking it hands back the picker's current search text, e.g.

package/dist/types/components/personchip/personchip.d.ts

@@ -11,6 +11,14 @@ export type PersonChipProps = Omit<React.ComponentPropsWithoutRef<"span">, "chil
      *  Applied to the name only; the avatar keeps its full-strength tone so
      *  the chip still reads as a distinct person, not a disabled control. */
     muted?: boolean;
+    /** One more thing after the name that must never shrink or wrap out of
+     *  view (an icon, a small badge) — a consumer needing this used to wrap
+     *  `PersonChip` in its own flex row for it, which needed `min-width: 0`
+     *  of its own to keep shrinking correctly and, missing that, overflowed
+     *  its container the same way #668 did before that fix (#683). Rendered
+     *  inside the chip, after the name, so it shares `Chip`'s own flex/
+     *  shrink layout instead of wrapping it in a second, unconstrained one. */
+    trailing?: React.ReactNode;
     className?: string;
 };
 /**
@@ -29,9 +37,13 @@ export type PersonChipProps = Omit<React.ComponentPropsWithoutRef<"span">, "chil
  * Composes `Chip`'s `truncate` CSS directly rather than its string-only
  * auto-wrap (children here is an avatar plus a name, not a single string),
  * so the name gets its own `.crisp-chip-label` span while the avatar stays
- * fixed-size.
+ * fixed-size. `trailing` (#683) is the same idea for a consumer's own
+ * icon/badge after the name — inside the chip's own flex row rather than a
+ * second one a consumer would otherwise wrap this in, which needs its own
+ * `min-width: 0` to keep shrinking correctly and, missing that, overflows
+ * its container the same way #668 did before `Chip` itself was fixed.
  */
-export declare function PersonChip({ name, avatar, muted, className, ...props }: PersonChipProps): React.JSX.Element;
+export declare function PersonChip({ name, avatar, muted, trailing, className, ...props }: PersonChipProps): React.JSX.Element;
 export declare namespace PersonChip {
     var displayName: string;
 }

package/dist/types/components/tabletoolbar/tabletoolbar.d.ts

@@ -95,8 +95,10 @@ export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "chi
     /** aria-label on a filter chip's "⋮" kebab (default "Filter options"). */
     filterOptionsLabel?: string;
     /** Label on the filter chip kebab's "Delete filter" action (default
-     *  "Delete filter") — Attio's own chip kebab (#594) has exactly this one
-     *  item. */
+     *  "Delete filter") — Attio's own chip kebab (#594) has exactly this
+     *  one item, danger-styled with a leading trash icon. Renamed from
+     *  "Delete filter" (this prop's original default) after a re-measurement
+     *  caught the wrong word. */
     deleteFilterLabel?: string;
     /** Label on the "ascending" sort-direction option (default "Ascending"). */
     ascendingLabel?: string;

package/dist/types/components/tooltip/tooltip.d.ts

@@ -33,6 +33,14 @@ export type TooltipProps = Omit<React.ComponentPropsWithoutRef<"span">, "content
      * `ContextMenu`'s.
      */
     asChild?: boolean;
+    /**
+     * Which of Attio's two measured tooltip shadows to use (crisp#580) —
+     * background/colour/radius/padding/font are identical between them, only
+     * the `box-shadow` differs. `"reference"` is for a reference-column
+     * header's tooltip (icon + the referenced type's name); every other
+     * tooltip in crisp is `"plain"`, the default.
+     */
+    variant?: "plain" | "reference";
 };
 /**
  * A hover/focus tooltip — a dark hint chip measured live. Wraps its
@@ -85,4 +93,12 @@ export declare const Tooltip: React.ForwardRefExoticComponent<Omit<Omit<React.De
      * `ContextMenu`'s.
      */
     asChild?: boolean;
+    /**
+     * Which of Attio's two measured tooltip shadows to use (crisp#580) —
+     * background/colour/radius/padding/font are identical between them, only
+     * the `box-shadow` differs. `"reference"` is for a reference-column
+     * header's tooltip (icon + the referenced type's name); every other
+     * tooltip in crisp is `"plain"`, the default.
+     */
+    variant?: "plain" | "reference";
 } & React.RefAttributes<HTMLElement>>;

package/dist/types/components/tooltip/tooltip.recipe.d.ts

@@ -23,9 +23,37 @@ declare const spec: {
         readonly decls: {
             readonly opacity: 0;
         };
+    }, {
+        readonly selector: "& .crisp-tooltip-reference-row";
+        readonly decls: {
+            readonly display: "inline-flex";
+            readonly alignItems: "center";
+            readonly gap: `var(--${string})`;
+        };
     }];
+    readonly variants: {
+        readonly variant: {
+            readonly plain: {};
+            readonly reference: {
+                readonly boxShadow: "rgba(0,0,0,0) 0 0 0 1px inset, rgba(28,40,64,0.18) 0 0 2px 0, rgba(0,0,0,0.04) 0 1px 3px 0";
+            };
+        };
+    };
+    readonly defaultVariants: {
+        readonly variant: "plain";
+    };
 };
-declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
-export declare const tooltipRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+declare const config: import("../..").RecipeConfig<{
+    readonly variant: {
+        readonly plain: string;
+        readonly reference: string;
+    };
+}>;
+export declare const tooltipRecipe: import("../..").RecipeFn<{
+    readonly variant: {
+        readonly plain: string;
+        readonly reference: string;
+    };
+}>;
 export { spec };
 export default config;

package/dist/types/product/authshell/authshell.d.ts

@@ -8,7 +8,10 @@ export type AuthShellProps = Omit<React.ComponentPropsWithoutRef<"div">, "title"
     title?: React.ReactNode;
     /** The form / body content. */
     children: React.ReactNode;
-    /** Right-hand product preview. Hidden under 1200px; omit for a single-pane card. */
+    /** Right-hand product preview. Hidden under 1200px; omit for a single-pane
+     *  layout — no card chrome (border/shadow/fixed height), a narrower
+     *  360px content column, and the whole shell vertically centred, matching
+     *  the real single-pane sign-in screen (crisp#653). */
     preview?: React.ReactNode;
     /** Legal / support links under the card. */
     footer?: React.ReactNode;

package/dist/types/product/recordstable/recordstable.d.ts

@@ -28,6 +28,18 @@ export type Column = {
      *  enriched values are washed (#9b69ff at 4%). */
     enriched?: boolean;
     icon?: IconType;
+    /** This column's values reference another type of record (e.g. a
+     * "Primary location" column of Country records). When the header
+     * overflows, its `Tooltip` appends this type's icon and name after the
+     * label and switches to Attio's second, reference-column tooltip chrome
+     * (crisp#580) — distinct from `icon` above (the column's own field-type
+     * glyph shown in the header row) and from `refOptions` (the picker's
+     * selectable values). Omit for a plain column; the tooltip stays
+     * label-only (#534). */
+    referencedType?: {
+        icon: IconType;
+        label: string;
+    };
     width?: number;
     /** Currency symbol for `currency` columns (default "$"). */
     symbol?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.54.5",
+  "version": "0.54.7",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",