@crisp-ui-kit/crisp 0.54.7 → 0.54.9

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); line-height: 20px; font-weight: var(--crisp-weight-medium); 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; text-decoration: none; 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; }
@@ -47,12 +47,30 @@
     & .crisp-tabletoolbar-menu-item[data-on] svg { color: var(--crisp-bg-brand-solid); }
     & .crisp-tabletoolbar-menu-item .crisp-tabletoolbar-menu-check { margin-left: auto; }
     & .crisp-tabletoolbar-menu-input { height: var(--crisp-size-row); margin: var(--crisp-space-0-5); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); background: var(--crisp-bg-surface); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; }
-    & .crisp-tabletoolbar-menu-sep { height: 1px; background: var(--crisp-border-subtle); margin: var(--crisp-space-0-5) 0; }
+    & .crisp-tabletoolbar-menu-sep { height: 1px; border: none; background: var(--crisp-border-subtle); margin: var(--crisp-space-0-5) 0; }
+    /* #592: the Filter field picker's nested-scope header (back control +
+       search, once drilled into a nestedColumns column) and a search
+       result's own breadcrumb row ("Team › Twitter follower count", surfaced by the SAME query matching a nested column). menu-back reuses the established 28px icon-only control pattern this file already uses twice (sort-remove, the kebab segment) rather than an independent measurement of Attio's own back arrow. The breadcrumb
+       colours ARE measured live: the parent segment muted at the same
+       exact color-mix 63% sort-learn above already uses, the
+       separator chevron and leaf segment both full fgPrimary (the
+       generic menu-item svg rule below defaults every icon to
+       fgMuted, so the separator needs its own override to read
+       correctly here). */
+    & .crisp-tabletoolbar-menu-nesthead { display: flex; align-items: center; gap: var(--crisp-space-1); margin: var(--crisp-space-0-5); }
+    & .crisp-tabletoolbar-menu-nesthead .crisp-tabletoolbar-menu-input { flex: 1; margin: 0; }
+    & .crisp-tabletoolbar-menu-back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-tabletoolbar-menu-back:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-tabletoolbar-menu-item--expand { justify-content: space-between; }
+    & .crisp-tabletoolbar-menu-item-path { display: inline-flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
+    & .crisp-tabletoolbar-menu-item-path-parent { flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-tabletoolbar-menu-item-path-sep { flex-shrink: 0; color: var(--crisp-fg-primary); }
+    & .crisp-tabletoolbar-menu-item-path > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-tabletoolbar-menu--up { top: auto; bottom: calc(100% + var(--crisp-space-1)); transform-origin: bottom; }
     & .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--op { min-width: 0; }
     & .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); }
@@ -68,6 +86,32 @@
     & .crisp-tabletoolbar-count { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); padding: 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .12s; }
     & .crisp-tabletoolbar-new:hover { background: var(--crisp-bg-brand-solid-pressed); }
+
+    & .crisp-tabletoolbar-fcond { display: inline-flex; align-items: center; height: var(--crisp-size-row); font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); white-space: nowrap; }
+    & .crisp-tabletoolbar-fcond-seg { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 100%; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: var(--crisp-bg-surface-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
+    & .crisp-tabletoolbar-fcond-seg svg { flex-shrink: 0; }
+    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--field,
+    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--val { background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-fcond-seg--field { border-radius: var(--crisp-radius-md) 0 0 var(--crisp-radius-md); font-weight: var(--crisp-weight-medium); max-width: 200px; }
+    & .crisp-tabletoolbar-fcond-seg--field svg { color: var(--crisp-fg-muted); }
+    /* #592: a nested pick's field segment ("Team › Twitter follower
+       count") — measured live: BOTH path segments the same colour (chip context only; the picker's own menu rows keep the parent muted, see
+       tabletoolbar.chrome.ts), each independently truncated. Attio's own layout gives the leaf segment priority (it stays fully readable longer, the parent truncates first) via a two-part min-content measurement this reproduces qualitatively with a flex-shrink differential rather than byte-for-byte (the exact px split Attio computes is content-length-dependent, not a fixed value) — not independently re-verified at other path-segment lengths. */
+    & .crisp-tabletoolbar-fcond-path { display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 178px; }
+    & .crisp-tabletoolbar-fcond-path-seg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
+    & .crisp-tabletoolbar-fcond-path-seg:first-child { flex: 0 1 auto; }
+    & .crisp-tabletoolbar-fcond-path-sep { flex-shrink: 0; color: inherit; }
+    & .crisp-tabletoolbar-fcond-seg--op { background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); }
+    & .crisp-tabletoolbar-fcond-seg--val { font-weight: var(--crisp-weight-medium); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-tabletoolbar-fcond-seg--kebab { background: var(--crisp-bg-surface); justify-content: center; width: 28px; padding: 0; border-radius: 0 var(--crisp-radius-md) var(--crisp-radius-md) 0; color: var(--crisp-fg-muted); }
+    & .crisp-tabletoolbar-fcond-seg--kebab:hover { color: var(--crisp-fg-primary); }
+    & .crisp-tabletoolbar-menu--val { min-width: 134px; }
+    & .crisp-tabletoolbar-datepop { width: 300px; }
+    & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-2); padding: 0 var(--crisp-space-1); }
+    & .crisp-tabletoolbar-datepop-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }
+    & .crisp-tabletoolbar-datepop-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
+    & .crisp-tabletoolbar-tool--raised { border: none; background: var(--crisp-bg-surface-muted); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; cursor: pointer; }
+    [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
 
 @media (prefers-reduced-motion: reduce) {

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); line-height: 20px; font-weight: var(--crisp-weight-medium); 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; text-decoration: none; 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; }
@@ -48,12 +48,30 @@
     & .crisp-tabletoolbar-menu-item[data-on] svg { color: var(--crisp-bg-brand-solid); }
     & .crisp-tabletoolbar-menu-item .crisp-tabletoolbar-menu-check { margin-left: auto; }
     & .crisp-tabletoolbar-menu-input { height: var(--crisp-size-row); margin: var(--crisp-space-0-5); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); background: var(--crisp-bg-surface); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; }
-    & .crisp-tabletoolbar-menu-sep { height: 1px; background: var(--crisp-border-subtle); margin: var(--crisp-space-0-5) 0; }
+    & .crisp-tabletoolbar-menu-sep { height: 1px; border: none; background: var(--crisp-border-subtle); margin: var(--crisp-space-0-5) 0; }
+    /* #592: the Filter field picker's nested-scope header (back control +
+       search, once drilled into a nestedColumns column) and a search
+       result's own breadcrumb row ("Team › Twitter follower count", surfaced by the SAME query matching a nested column). menu-back reuses the established 28px icon-only control pattern this file already uses twice (sort-remove, the kebab segment) rather than an independent measurement of Attio's own back arrow. The breadcrumb
+       colours ARE measured live: the parent segment muted at the same
+       exact color-mix 63% sort-learn above already uses, the
+       separator chevron and leaf segment both full fgPrimary (the
+       generic menu-item svg rule below defaults every icon to
+       fgMuted, so the separator needs its own override to read
+       correctly here). */
+    & .crisp-tabletoolbar-menu-nesthead { display: flex; align-items: center; gap: var(--crisp-space-1); margin: var(--crisp-space-0-5); }
+    & .crisp-tabletoolbar-menu-nesthead .crisp-tabletoolbar-menu-input { flex: 1; margin: 0; }
+    & .crisp-tabletoolbar-menu-back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-tabletoolbar-menu-back:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-tabletoolbar-menu-item--expand { justify-content: space-between; }
+    & .crisp-tabletoolbar-menu-item-path { display: inline-flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
+    & .crisp-tabletoolbar-menu-item-path-parent { flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-tabletoolbar-menu-item-path-sep { flex-shrink: 0; color: var(--crisp-fg-primary); }
+    & .crisp-tabletoolbar-menu-item-path > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-tabletoolbar-menu--up { top: auto; bottom: calc(100% + var(--crisp-space-1)); transform-origin: bottom; }
     & .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--op { min-width: 0; }
     & .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); }
@@ -69,6 +87,32 @@
     & .crisp-tabletoolbar-count { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); padding: 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .12s; }
     & .crisp-tabletoolbar-new:hover { background: var(--crisp-bg-brand-solid-pressed); }
+
+    & .crisp-tabletoolbar-fcond { display: inline-flex; align-items: center; height: var(--crisp-size-row); font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); white-space: nowrap; }
+    & .crisp-tabletoolbar-fcond-seg { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 100%; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: var(--crisp-bg-surface-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
+    & .crisp-tabletoolbar-fcond-seg svg { flex-shrink: 0; }
+    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--field,
+    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--val { background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-fcond-seg--field { border-radius: var(--crisp-radius-md) 0 0 var(--crisp-radius-md); font-weight: var(--crisp-weight-medium); max-width: 200px; }
+    & .crisp-tabletoolbar-fcond-seg--field svg { color: var(--crisp-fg-muted); }
+    /* #592: a nested pick's field segment ("Team › Twitter follower
+       count") — measured live: BOTH path segments the same colour (chip context only; the picker's own menu rows keep the parent muted, see
+       tabletoolbar.chrome.ts), each independently truncated. Attio's own layout gives the leaf segment priority (it stays fully readable longer, the parent truncates first) via a two-part min-content measurement this reproduces qualitatively with a flex-shrink differential rather than byte-for-byte (the exact px split Attio computes is content-length-dependent, not a fixed value) — not independently re-verified at other path-segment lengths. */
+    & .crisp-tabletoolbar-fcond-path { display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 178px; }
+    & .crisp-tabletoolbar-fcond-path-seg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
+    & .crisp-tabletoolbar-fcond-path-seg:first-child { flex: 0 1 auto; }
+    & .crisp-tabletoolbar-fcond-path-sep { flex-shrink: 0; color: inherit; }
+    & .crisp-tabletoolbar-fcond-seg--op { background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); }
+    & .crisp-tabletoolbar-fcond-seg--val { font-weight: var(--crisp-weight-medium); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-tabletoolbar-fcond-seg--kebab { background: var(--crisp-bg-surface); justify-content: center; width: 28px; padding: 0; border-radius: 0 var(--crisp-radius-md) var(--crisp-radius-md) 0; color: var(--crisp-fg-muted); }
+    & .crisp-tabletoolbar-fcond-seg--kebab:hover { color: var(--crisp-fg-primary); }
+    & .crisp-tabletoolbar-menu--val { min-width: 134px; }
+    & .crisp-tabletoolbar-datepop { width: 300px; }
+    & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-2); padding: 0 var(--crisp-space-1); }
+    & .crisp-tabletoolbar-datepop-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }
+    & .crisp-tabletoolbar-datepop-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
+    & .crisp-tabletoolbar-tool--raised { border: none; background: var(--crisp-bg-surface-muted); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; cursor: pointer; }
+    [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/tabs.css

@@ -8,7 +8,7 @@
     & .crisp-tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-tabs-tab[data-selected] { color: var(--crisp-fg-primary); background: var(--crisp-bg-subtle); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); }
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
-    & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 var(--crisp-space-1); border-radius: 4px; background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); font-size: 10px; line-height: 14px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
     & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: var(--crisp-space-8); }

package/dist/tabs.layered.css

@@ -9,7 +9,7 @@
     & .crisp-tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-tabs-tab[data-selected] { color: var(--crisp-fg-primary); background: var(--crisp-bg-subtle); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); }
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
-    & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 var(--crisp-space-1); border-radius: 4px; background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); font-size: 10px; line-height: 14px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
     & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: var(--crisp-space-8); }

package/dist/tokens.css

@@ -5,14 +5,18 @@
   --crisp-fg-on-tone: #101112;
   --crisp-bg-surface: #ffffff;
   --crisp-bg-raised: #f4f4f5;
+  --crisp-bg-surface-muted: #f6f7f7;
   --crisp-border-default: #e4e4e7;
   --crisp-border-subtle: #eeeff1;
   --crisp-border-dropzone: #e6e7ea;
+  --crisp-border-divider: #e6e7ea;
   --crisp-ring-neutral: transparent;
   --crisp-ring-field: rgba(0,0,0,0.06);
   --crisp-ring-switch: #d9dade;
   --crisp-bg-tile-active: #ffffff;
   --crisp-shadow-tile-active: rgba(0,0,0,0.04);
+  --crisp-bg-scrim: rgba(0,0,0,0.25);
+  --crisp-fg-alert-description: rgba(0,0,0,0.63);
   --crisp-bg-overlay-frost: #ffffff;
   --crisp-shadow-overlay1: rgba(28,40,64,0.12);
   --crisp-shadow-overlay2: rgba(28,40,64,0.16);
@@ -46,7 +50,7 @@
   --crisp-fg-success-soft: #186b3d;
   --crisp-fg-warning-soft: #80520d;
   --crisp-fg-danger-soft: #a33539;
-  --crisp-fg-neutral-soft: #686870;
+  --crisp-fg-neutral-soft: #505155;
   --crisp-bg-purple-soft: #f5f0ff;
   --crisp-fg-purple-soft: #6238b5;
   --crisp-ring-purple-soft: #e8ddfe;
@@ -59,14 +63,18 @@
   --crisp-fg-on-tone: #101112;
   --crisp-bg-surface: #0a0a0a;
   --crisp-bg-raised: #101112;
+  --crisp-bg-surface-muted: #101112;
   --crisp-border-default: #212224;
   --crisp-border-subtle: #1c1d1f;
   --crisp-border-dropzone: #212224;
+  --crisp-border-divider: #212224;
   --crisp-ring-neutral: #212224;
   --crisp-ring-field: #212224;
   --crisp-ring-switch: #212224;
   --crisp-bg-tile-active: #101112;
   --crisp-shadow-tile-active: rgba(0,0,0,0);
+  --crisp-bg-scrim: rgba(0,0,0,0.55);
+  --crisp-fg-alert-description: rgba(255,255,255,0.6);
   --crisp-bg-overlay-frost: #1c1d1f;
   --crisp-shadow-overlay1: rgba(0,0,0,0.48);
   --crisp-shadow-overlay2: rgba(0,0,0,0.64);

package/dist/tokens.json

@@ -7,14 +7,18 @@
       "fgOnTone": "#101112",
       "bgSurface": "#ffffff",
       "bgRaised": "#f4f4f5",
+      "bgSurfaceMuted": "#f6f7f7",
       "borderDefault": "#e4e4e7",
       "borderSubtle": "#eeeff1",
       "borderDropzone": "#e6e7ea",
+      "borderDivider": "#e6e7ea",
       "ringNeutral": "transparent",
       "ringField": "rgba(0,0,0,0.06)",
       "ringSwitch": "#d9dade",
       "bgTileActive": "#ffffff",
       "shadowTileActive": "rgba(0,0,0,0.04)",
+      "bgScrim": "rgba(0,0,0,0.25)",
+      "fgAlertDescription": "rgba(0,0,0,0.63)",
       "bgOverlayFrost": "#ffffff",
       "shadowOverlay1": "rgba(28,40,64,0.12)",
       "shadowOverlay2": "rgba(28,40,64,0.16)",
@@ -48,7 +52,7 @@
       "fgSuccessSoft": "#186b3d",
       "fgWarningSoft": "#80520d",
       "fgDangerSoft": "#a33539",
-      "fgNeutralSoft": "#686870",
+      "fgNeutralSoft": "#505155",
       "bgPurpleSoft": "#f5f0ff",
       "fgPurpleSoft": "#6238b5",
       "ringPurpleSoft": "#e8ddfe"
@@ -60,14 +64,18 @@
       "fgOnTone": "#101112",
       "bgSurface": "#0a0a0a",
       "bgRaised": "#101112",
+      "bgSurfaceMuted": "#101112",
       "borderDefault": "#212224",
       "borderSubtle": "#1c1d1f",
       "borderDropzone": "#212224",
+      "borderDivider": "#212224",
       "ringNeutral": "#212224",
       "ringField": "#212224",
       "ringSwitch": "#212224",
       "bgTileActive": "#101112",
       "shadowTileActive": "rgba(0,0,0,0)",
+      "bgScrim": "rgba(0,0,0,0.55)",
+      "fgAlertDescription": "rgba(255,255,255,0.6)",
       "bgOverlayFrost": "#1c1d1f",
       "shadowOverlay1": "rgba(0,0,0,0.48)",
       "shadowOverlay2": "rgba(0,0,0,0.64)",
@@ -117,11 +125,14 @@
       "line200": "#e4e4e7",
       "line100": "#eeeff1",
       "line150": "#e6e7ea",
+      "gray25": "#f6f7f7",
       "ringNeutral": "transparent",
       "ringField": "rgba(0,0,0,0.06)",
       "ringSwitch": "#d9dade",
       "tileActive": "#ffffff",
       "tileActiveShadow": "rgba(0,0,0,0.04)",
+      "bgScrim": "rgba(0,0,0,0.25)",
+      "fgAlertDescription": "rgba(0,0,0,0.63)",
       "overlayFrost": "#ffffff",
       "shadowOverlay1": "rgba(28,40,64,0.12)",
       "shadowOverlay2": "rgba(28,40,64,0.16)",
@@ -155,7 +166,7 @@
       "softSuccessText": "#186b3d",
       "softWarningText": "#80520d",
       "softDangerText": "#a33539",
-      "softNeutralText": "#686870",
+      "softNeutralText": "#505155",
       "purpleTint": "#f5f0ff",
       "softPurpleText": "#6238b5",
       "purpleRing": "#e8ddfe"
@@ -169,11 +180,14 @@
       "line200": "#212224",
       "line100": "#1c1d1f",
       "line150": "#212224",
+      "gray25": "#101112",
       "ringNeutral": "#212224",
       "ringField": "#212224",
       "ringSwitch": "#212224",
       "tileActive": "#101112",
       "tileActiveShadow": "rgba(0,0,0,0)",
+      "bgScrim": "rgba(0,0,0,0.55)",
+      "fgAlertDescription": "rgba(255,255,255,0.6)",
       "overlayFrost": "#1c1d1f",
       "shadowOverlay1": "rgba(0,0,0,0.48)",
       "shadowOverlay2": "rgba(0,0,0,0.64)",

package/dist/tooltip.css

@@ -1,5 +1,5 @@
 .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;
+  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: rgb(33,34,36) 0 0 0 1px inset, rgba(0,0,0,0.04) 0 0 2px 0, rgba(0,0,0,0.12) 0 1px 3px 0; 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); }
 }

package/dist/tooltip.layered.css

@@ -1,6 +1,6 @@
 @layer crisp-components {
 .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;
+  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: rgb(33,34,36) 0 0 0 1px inset, rgba(0,0,0,0.04) 0 0 2px 0, rgba(0,0,0,0.12) 0 1px 3px 0; 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); }
 }

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

@@ -7,7 +7,7 @@ declare const spec: {
         readonly gap: `var(--${string})`;
         readonly fontFamily: `var(--${string})`;
         readonly fontWeight: `var(--${string})`;
-        readonly letterSpacing: "-0.1px";
+        readonly letterSpacing: "normal";
         readonly whiteSpace: "nowrap";
     };
     readonly parts: [{
@@ -59,18 +59,22 @@ declare const spec: {
                 readonly height: "16px";
                 readonly paddingInline: `var(--${string})`;
                 readonly fontSize: `var(--${string})`;
+                readonly lineHeight: "16px";
                 readonly borderRadius: `var(--${string})`;
             };
             readonly medium: {
                 readonly height: "20px";
                 readonly paddingInline: `var(--${string})`;
                 readonly fontSize: `var(--${string})`;
+                readonly lineHeight: "16px";
+                readonly gap: "3px";
                 readonly borderRadius: `var(--${string})`;
             };
             readonly large: {
                 readonly height: `var(--${string})`;
                 readonly paddingInline: "9px";
                 readonly fontSize: `var(--${string})`;
+                readonly letterSpacing: "-0.1px";
                 readonly borderRadius: `var(--${string})`;
             };
         };

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

@@ -7,7 +7,7 @@ declare const spec: {
         readonly gap: `var(--${string})`;
         readonly fontFamily: `var(--${string})`;
         readonly fontWeight: `var(--${string})`;
-        readonly letterSpacing: "-0.14px";
+        readonly letterSpacing: "-0.07px";
         readonly lineHeight: "20px";
         readonly whiteSpace: "nowrap";
         readonly border: "none";
@@ -95,10 +95,23 @@ declare const spec: {
                 readonly borderRadius: `var(--${string})`;
             };
             readonly md: {
-                readonly height: "28px";
-                readonly paddingInline: `var(--${string})`;
-                readonly fontSize: `var(--${string})`;
-                readonly borderRadius: `var(--${string})`;
+                readonly decls: {
+                    readonly height: "28px";
+                    readonly paddingInline: `var(--${string})`;
+                    readonly fontSize: `var(--${string})`;
+                    readonly borderRadius: `var(--${string})`;
+                };
+                readonly parts: [{
+                    readonly selector: "&[data-icon-start]";
+                    readonly decls: {
+                        paddingInlineStart: `var(--${string})`;
+                    };
+                }, {
+                    readonly selector: "&[data-icon-end]";
+                    readonly decls: {
+                        paddingInlineEnd: `var(--${string})`;
+                    };
+                }];
             };
             readonly lg: {
                 readonly height: "40px";

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

@@ -27,13 +27,20 @@ export type ContextMenuProps = {
      * element, same as any other `asChild` in crisp (`core/primitive.tsx`).
      */
     asChild?: boolean;
+    /** `"light"` (default) is this component's own original popover surface.
+     * `"dark"` is Attio's OWN cell-level context menu (`DataTable`'s #598) —
+     * measured live as a fixed, theme-INDEPENDENT dark chrome (background
+     * `#101112`, text `#eeeff1`), the same "dark pill" ink pair `Tooltip`
+     * already hardcodes for the same reason: this surface doesn't follow the
+     * app's light/dark theme, Attio always renders it dark. */
+    variant?: "light" | "dark";
 };
 /**
  * A right-click context menu — the popover surface positioned at the cursor.
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-export declare function ContextMenu({ children, items, menuLabel: menuLabelProp, className, asChild, }: ContextMenuProps): React.JSX.Element;
+export declare function ContextMenu({ children, items, menuLabel: menuLabelProp, className, asChild, variant, }: ContextMenuProps): React.JSX.Element;
 export declare namespace ContextMenu {
     var displayName: string;
 }

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type CalcOp } from "../columncalc";
 type IconType = React.ComponentType<{
     size?: number;
     strokeWidth?: number;
@@ -7,6 +8,7 @@ export declare function isLabelTruncated(el: {
     scrollWidth: number;
     clientWidth: number;
 }): boolean;
+export declare function reorderColumns<T>(cols: DataTableColumn<T>[], order: string[] | undefined): DataTableColumn<T>[];
 export type EntityValue = {
     name: string;
     avatar?: string;
@@ -140,10 +142,42 @@ export type DataTableColumn<T> = {
     format?: (value: unknown, row: T) => string;
     /** Footer summary for this column (shown when any column supplies one). */
     summary?: (rows: T[]) => React.ReactNode;
+    /**
+     * Give this column an aggregation footer via `ColumnCalc`, matching
+     * Attio's own per-type set exactly (crisp/#602, checklist G-073;
+     * confirmed live against `app.attio.com`'s "Add calculation" menu on
+     * both a text and a numeric column): Count empty / Count filled /
+     * Percent empty / Percent filled on every column, plus Sum / Average /
+     * Min / Max on `"number"`/`"currency"` columns, plus an explicit "None"
+     * once one is active. RecordsTable's own OLDER, separate calc footer
+     * predates `ColumnCalc` and gives a flat, per-type-WRONG set (no
+     * Percent empty/filled at all, "Count all" instead of "Count empty" +
+     * "Count filled" as two ops) — that duplicate implementation is not
+     * touched here; this is DataTable's own footer only. Wins over
+     * `summary` when both are set on the same column. */
+    calc?: {
+        defaultOp?: CalcOp;
+        op?: CalcOp;
+        onOpChange?: (op: CalcOp) => void;
+    };
     /** Opt this column out of the header menu's Hide/Move/Rename items. */
     managed?: boolean;
     /** Hidden from the grid but still listed in the column manager. */
     hidden?: boolean;
+    /** A "no-edit" marker icon before the resize handle, for a read-only/
+     * computed column (crisp/#596, checklist G-027 — seen live on Attio's
+     * "Connection strength"/"Last interaction"). Attio's own icon is
+     * proprietary and isn't reproduced (AUTHORING.md: never copy Attio's
+     * icon set); this uses a Lucide `Lock`, the same substitution every
+     * other crisp icon makes. Purely a visual marker — it does NOT disable
+     * editing on its own; a column that shouldn't be editable simply
+     * doesn't set `editable: true`, the same as any other column.
+     * Also used by the cell context menu (crisp/#598, #645): matching
+     * Attio's own "no copy handler at all" for a computed field (checklist
+     * G-100), a `readOnly` cell's Copy item is disabled and its keyboard/
+     * native-copy path writes nothing to the clipboard, and its Clear-value
+     * item is disabled (there is nothing editable to clear). */
+    readOnly?: boolean;
     /** `type: "entity"` only (#501) — makes the cell's name its own click
      * target, separate from the row's own `onRowClick`: the name renders as a
      * `stopPropagation`-guarded button instead of a plain span, the same
@@ -154,6 +188,30 @@ export type DataTableColumn<T> = {
      * row's own record — that's what `onRowClick` is for. Ignored on any
      * other `type`. */
     onEntityClick?: (row: T) => void;
+    /** `type: "entity"` only (crisp/#601, checklist G-048) — a right-aligned
+     * "Open preview" icon that appears on row hover (or keyboard focus),
+     * alongside `onOpenComments` below. Matches Attio's own measured pair
+     * exactly: a 20px ghost button, `radius.sm`, muted at rest, darkening on
+     * its own hover. Omit to render neither icon (default). Ignored on any
+     * other `type`, same as `onEntityClick`. */
+    onOpenPreview?: (row: T) => void;
+    /** `type: "entity"` only (crisp/#601, checklist G-048) — the OTHER
+     * hover icon next to `onOpenPreview`. Measured live: its button carries
+     * `aria-controls="comment-drawer"`, not the "possibly drag-to-reorder"
+     * the issue's own first-pass guess landed on — it opens a comment
+     * drawer for the row. Once set, renders via `CommentCountBadge`
+     * (product/comments, crisp/#625) rather than a plain icon — a persistent
+     * dot once the row has ≥1 comment, replaced on hover by the count (see
+     * `commentCount`); `onOpenPreview` above rides along as that badge's own
+     * second icon instead of rendering separately. Setting `onOpenPreview`
+     * with NO `onOpenComments` keeps the old plain-icon-only rendering (a
+     * column with a preview affordance but no comments concept at all). */
+    onOpenComments?: (row: T) => void;
+    /** The row's own comment count, read by `CommentCountBadge` when
+     * `onOpenComments` is set. Omit to always pass `0` — the badge still
+     * renders (a plain icon, no dot, no digit) once `onOpenComments` is set;
+     * it just can't show a real count without this. */
+    commentCount?: (row: T) => number;
 };
 export type SortState = {
     key: string;
@@ -218,8 +276,35 @@ export type DataTableProps<T extends {
     viewSettingsLabel?: string;
     /** That menu's own "Columns" section heading. */
     columnsGroupLabel?: string;
+    /** Accessible name for the cell context menu (crisp/#598) and the hidden
+     * clipboard-proxy textarea its Copy/Cmd+C share (crisp/#645). */
+    cellMenuLabel?: string;
+    /** The cell context menu's four items, matching Attio's own exactly
+     * (checklist G-043 — "identical menu regardless of field type"). */
+    copyLabel?: string;
+    pasteLabel?: string;
+    viewEditHistoryLabel?: string;
+    /** "Clear value" commits an empty string via the existing `onEdit`, same
+     * as clearing a plain text editor by hand -- no separate callback. */
+    clearValueLabel?: string;
     /** Called with the next column list after a move, rename or hide. */
     onColumnsChange?: (columns: DataTableColumn<T>[]) => void;
+    /**
+     * Controlled column order — a plain array of `key`s (crisp/#731), lighter
+     * than `onColumnsChange`'s full column definitions (which can't round-trip
+     * through JSON: `render`/`accessor`/etc. are functions) and so the shape a
+     * saved view actually persists. Omit for an uncontrolled default seeded
+     * from `columns`' own order and updated internally by a header drag or the
+     * column menu's Move left/right. A key this doesn't mention (a column
+     * added since the order was last saved) renders after every key it DOES
+     * mention, in `columns`' own relative order — see `reorderColumns`. Column
+     * drag-to-reorder itself is always available (like resize); this prop only
+     * changes who owns the resulting order.
+     */
+    columnOrder?: string[];
+    /** Called with the next `columnOrder` after a header drag or the column
+     *  menu's Move left/right — whichever changed the order. */
+    onColumnOrderChange?: (order: string[]) => void;
     /** Group rows under a heading row, the way a grouped view does. */
     groupBy?: (row: T) => string;
     /**
@@ -232,6 +317,11 @@ export type DataTableProps<T extends {
     onRowsReorder?: (rows: T[]) => void;
     /** aria-label on each row's drag grip (default "Reorder row"). */
     reorderRowLabel?: string;
+    /** aria-label on the entity column's "Open preview" hover icon (crisp/#601;
+     *  only rendered when a column sets `onOpenPreview`). Also passed through
+     *  to `CommentCountBadge`'s own `previewLabel` when a column sets
+     *  `onOpenComments` too (crisp/#601 supersession). */
+    openPreviewLabel?: string;
     /**
      * Render an error state in place of the rows. Uses the same measured
      * `EmptyState variant="page"` surface as the zero-row state.
@@ -256,6 +346,13 @@ export type DataTableProps<T extends {
      * outside `render`'s own output so a hover-only wrapper (a `Tooltip`, say)
      * can't swallow it. */
     onEdit?: (id: string, key: string, value: string) => Promise<void> | void;
+    /** The cell context menu's "View edit history" item (crisp/#598, checklist
+     * G-043 -- Attio's own item carries a "Pro" pill crisp has no billing
+     * concept to gate on, so the item itself always renders; see the
+     * component's own comment). Omitted: the item still renders (matching
+     * Attio, which shows it regardless of field type) but disabled, since
+     * there is nothing for it to open. */
+    onViewEditHistory?: (id: string, key: string) => void;
     /** Sticky the first column(s) with a horizontal scroll shadow (default true). */
     stickyFirst?: boolean;
     /** Sticky the LAST column with a horizontal scroll shadow, mirroring
@@ -328,7 +425,7 @@ export type DataTableProps<T extends {
 };
 export declare function DataTable<T extends {
     id: string;
-}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst, stickyLast, scrollProps, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount, countLabel, toolbar, height, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }: DataTableProps<T>): React.JSX.Element;
+}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, columnOrder, onColumnOrderChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, onViewEditHistory, stickyFirst, stickyLast, scrollProps, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount, countLabel, toolbar, height, className, reorderRowLabel: reorderRowLabelProp, openPreviewLabel: openPreviewLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, cellMenuLabel: cellMenuLabelProp, copyLabel: copyLabelProp, pasteLabel: pasteLabelProp, viewEditHistoryLabel: viewEditHistoryLabelProp, clearValueLabel: clearValueLabelProp, ...rest }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var displayName: string;
 }