@crisp-ui-kit/crisp 0.56.0 → 0.57.1

package/dist/tabletoolbar.layered.css

@@ -166,7 +166,14 @@
     & .crisp-tabletoolbar-tool--raised { border: none; background: var(--crisp-bg-surface); 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; }
 
     & .crisp-tabletoolbar-sorted-prefix { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
-    & .crisp-tabletoolbar-sorted-count { font-size: var(--crisp-text-sm); color: color-mix(in srgb, var(--crisp-fg-primary) 73%, transparent); }
+    & .crisp-tabletoolbar-sorted-count { display: inline-flex; align-items: center; height: 16px; box-sizing: border-box;
+      padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent);
+      box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft); }
+
+    & .crisp-tabletoolbar-tool-count { display: inline-flex; align-items: center; height: 16px; box-sizing: border-box;
+      padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent);
+      box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft);
+      font-variant-numeric: tabular-nums; }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
 

package/dist/tabs.css

@@ -11,6 +11,12 @@
     & .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#863: the "+N more" overflow trigger, measured live -- its computed style is identical to a plain .crisp-tabs-tab (same pill, same 6px icon/label gap the tab class already gives via space["1.5"]), and the dropdown it opens is crisp's own Menu/
+       MenuItem chrome (already matches Attio's popover, nothing new to style there). Only the wrapper needs a rule: an overflowed tab (or the trigger itself, when nothing is hidden) is taken out of the flex row and out of the a11y tree without ever making its own offsetWidth unmeasurable the way display:none would -- that's what
+       lets the tabs.tsx effect recompute the cutoff from cached widths on
+       every resize with no flash of an unclipped row. */
+    & .crisp-tabs-more { display: inline-flex; }
+    & [data-tabs-overflow-hidden] { position: absolute; visibility: hidden; pointer-events: none; }
     & .crisp-tabs-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: var(--crisp-space-8); }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }

package/dist/tabs.layered.css

@@ -12,6 +12,12 @@
     & .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#863: the "+N more" overflow trigger, measured live -- its computed style is identical to a plain .crisp-tabs-tab (same pill, same 6px icon/label gap the tab class already gives via space["1.5"]), and the dropdown it opens is crisp's own Menu/
+       MenuItem chrome (already matches Attio's popover, nothing new to style there). Only the wrapper needs a rule: an overflowed tab (or the trigger itself, when nothing is hidden) is taken out of the flex row and out of the a11y tree without ever making its own offsetWidth unmeasurable the way display:none would -- that's what
+       lets the tabs.tsx effect recompute the cutoff from cached widths on
+       every resize with no flash of an unclipped row. */
+    & .crisp-tabs-more { display: inline-flex; }
+    & [data-tabs-overflow-hidden] { position: absolute; visibility: hidden; pointer-events: none; }
     & .crisp-tabs-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: var(--crisp-space-8); }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }

package/dist/text.css

@@ -8,7 +8,7 @@
   color: var(--crisp-fg-neutral-muted);
 }
 .crisp-text--tone_brand {
-  color: var(--crisp-bg-brand-solid);
+  color: var(--crisp-fg-brand-contrast);
 }
 .crisp-text--tone_danger {
   color: var(--crisp-fg-danger);

package/dist/text.layered.css

@@ -9,7 +9,7 @@
   color: var(--crisp-fg-neutral-muted);
 }
 .crisp-text--tone_brand {
-  color: var(--crisp-bg-brand-solid);
+  color: var(--crisp-fg-brand-contrast);
 }
 .crisp-text--tone_danger {
   color: var(--crisp-fg-danger);

package/dist/textarea.css

@@ -16,8 +16,9 @@
     &[data-invalid] .crisp-textarea-wrap::after { border-color: var(--crisp-bg-danger); }
     &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-bg-danger); }
     &[data-counted] .crisp-textarea-field { padding-bottom: var(--crisp-space-5); }
-    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: var(--crisp-space-2-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: var(--crisp-space-2-5); display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
     & .crisp-textarea-count[data-over] { color: var(--crisp-bg-danger); }
+    & .crisp-textarea-progress { flex-shrink: 0; }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/textarea.layered.css

@@ -17,8 +17,9 @@
     &[data-invalid] .crisp-textarea-wrap::after { border-color: var(--crisp-bg-danger); }
     &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-bg-danger); }
     &[data-counted] .crisp-textarea-field { padding-bottom: var(--crisp-space-5); }
-    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: var(--crisp-space-2-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: var(--crisp-space-2-5); display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
     & .crisp-textarea-count[data-over] { color: var(--crisp-bg-danger); }
+    & .crisp-textarea-progress { flex-shrink: 0; }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/textlink.css

@@ -3,9 +3,18 @@
     &:hover { text-decoration: underline; }
 }
 .crisp-textlink--tone_brand {
-  font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-bg-brand-solid);
+  font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-brand-contrast);
 }
 .crisp-textlink--tone_muted {
   font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-muted);
-    &:hover { color: var(--crisp-bg-brand-solid); }
+    &:hover { color: var(--crisp-fg-brand-contrast); }
+}
+.crisp-textlink--size_sm {
+  font-size: var(--crisp-text-sm);
+}
+.crisp-textlink--size_md {
+  font-size: var(--crisp-text-md);
+}
+.crisp-textlink--size_lg {
+  font-size: var(--crisp-text-lg);
 }

package/dist/textlink.d.ts

@@ -2,6 +2,7 @@ import type { RecipeFn } from "../core/types";
 
 export interface TextlinkVariants {
   tone?: "brand" | "muted";
+  size?: "sm" | "md" | "lg";
 }
 
-export declare const textlinkRecipe: RecipeFn<{ tone: { brand: string; muted: string } }>;
+export declare const textlinkRecipe: RecipeFn<{ tone: { brand: string; muted: string }; size: { sm: string; md: string; lg: string } }>;

package/dist/textlink.layered.css

@@ -4,10 +4,19 @@
     &:hover { text-decoration: underline; }
 }
 .crisp-textlink--tone_brand {
-  font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-bg-brand-solid);
+  font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-brand-contrast);
 }
 .crisp-textlink--tone_muted {
   font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-muted);
-    &:hover { color: var(--crisp-bg-brand-solid); }
+    &:hover { color: var(--crisp-fg-brand-contrast); }
+}
+.crisp-textlink--size_sm {
+  font-size: var(--crisp-text-sm);
+}
+.crisp-textlink--size_md {
+  font-size: var(--crisp-text-md);
+}
+.crisp-textlink--size_lg {
+  font-size: var(--crisp-text-lg);
 }
 }

package/dist/tokens.css

@@ -27,14 +27,16 @@
   font-display: swap;
 }
 :root {
-  --crisp-bg-brand-solid: #266df0;
-  --crisp-bg-brand-solid-pressed: #1f5fd6;
+  --crisp-bg-brand-solid: #0298d9;
+  --crisp-bg-brand-solid-pressed: #0283bb;
+  --crisp-bg-brand-contrast: #0278ac;
+  --crisp-fg-brand-contrast: #0278ac;
   --crisp-fg-on-brand: #ffffff;
   --crisp-fg-on-tone: #101112;
   --crisp-bg-surface: #ffffff;
-  --crisp-bg-raised: #f4f4f5;
+  --crisp-bg-raised: #f7f8f9;
   --crisp-bg-surface-muted: #f6f7f7;
-  --crisp-border-default: #e4e4e7;
+  --crisp-border-default: #dcdee3;
   --crisp-border-subtle: #eeeff1;
   --crisp-border-dropzone: #e6e7ea;
   --crisp-border-divider: #e6e7ea;
@@ -56,9 +58,9 @@
   --crisp-shadow-popover3: rgba(24,41,75,0.16);
   --crisp-fg-primary: #101112;
   --crisp-fg-muted: #71717a;
-  --crisp-bg-danger: #e5484d;
-  --crisp-bg-danger-solid: #ba2525;
-  --crisp-fg-danger: #eb3b3b;
+  --crisp-bg-danger: #fa342c;
+  --crisp-bg-danger-solid: #ca1d13;
+  --crisp-fg-danger: #fa342c;
   --crisp-stroke-field-focus: #1a1c20;
   --crisp-fg-disabled: #d1d3d8;
   --crisp-bg-neutral-weak: #f3f4f5;
@@ -67,8 +69,9 @@
   --crisp-fg-neutral-subtle: #868b94;
   --crisp-fg-neutral-muted: #555d6d;
   --crisp-stroke-focus-ring: #1e82eb;
-  --crisp-bg-success: #1f9d57;
-  --crisp-bg-warning: #b5730f;
+  --crisp-bg-success: #079171;
+  --crisp-bg-warning: #9b7821;
+  --crisp-bg-warning-solid: #fbdc65;
   --crisp-bg-orange: #f97514;
   --crisp-bg-cyan: #00b9eb;
   --crisp-bg-purple: #9b69ff;
@@ -82,11 +85,23 @@
   --crisp-bg-purple-soft: #f5f0ff;
   --crisp-fg-purple-soft: #6238b5;
   --crisp-ring-purple-soft: #e8ddfe;
+  --crisp-ring-brand-soft: #d6e5ff;
+  --crisp-fg-select-neutral: #1a1c20;
+  --crisp-bg-select-listbox: #ffffff;
+  --crisp-stroke-select-trigger: #dcdee3;
+  --crisp-bg-select-pressed: #00000007;
+  --crisp-bg-select-disabled: #f3f4f5;
+  --crisp-stroke-select-invalid: #fa342c;
+  --crisp-stroke-select-divider: #00000010;
+  --crisp-fg-select-placeholder: #b0b3ba;
+  --crisp-shadow-select: #0000001f;
 }
 
 [data-theme="dark"] {
-  --crisp-bg-brand-solid: #266df0;
-  --crisp-bg-brand-solid-pressed: #1f5fd6;
+  --crisp-bg-brand-solid: #0298d9;
+  --crisp-bg-brand-solid-pressed: #0283bb;
+  --crisp-bg-brand-contrast: #0278ac;
+  --crisp-fg-brand-contrast: #0278ac;
   --crisp-fg-on-brand: #ffffff;
   --crisp-fg-on-tone: #101112;
   --crisp-bg-surface: #0a0a0a;
@@ -127,6 +142,7 @@
   --crisp-stroke-focus-ring: #5e98fe;
   --crisp-bg-success: #2ea968;
   --crisp-bg-warning: #e0982a;
+  --crisp-bg-warning-solid: #e0982a;
   --crisp-bg-orange: #f97514;
   --crisp-bg-cyan: #00b9eb;
   --crisp-bg-purple: #9b69ff;
@@ -140,6 +156,16 @@
   --crisp-bg-purple-soft: #2f1e5a;
   --crisp-fg-purple-soft: #d8c4ff;
   --crisp-ring-purple-soft: #45297d;
+  --crisp-ring-brand-soft: #212224;
+  --crisp-fg-select-neutral: #f3f4f5;
+  --crisp-bg-select-listbox: #1d2025;
+  --crisp-stroke-select-trigger: #393d46;
+  --crisp-bg-select-pressed: #ffffff0d;
+  --crisp-bg-select-disabled: #2b2e35;
+  --crisp-stroke-select-invalid: #ff6e60;
+  --crisp-stroke-select-divider: #ffffff17;
+  --crisp-fg-select-placeholder: #868b94;
+  --crisp-shadow-select: #000000cc;
 }
 
 :root {
@@ -154,12 +180,15 @@
   --crisp-space-0-5: 2px;
   --crisp-space-1-5: 6px;
   --crisp-space-2-5: 10px;
+  --crisp-space-3-5: 14px;
+  --crisp-radius-xs: 4px;
   --crisp-radius-chip: 7px;
   --crisp-radius-sm: 6px;
   --crisp-radius-md: 8px;
   --crisp-radius-lg: 9px;
   --crisp-radius-xl: 12px;
   --crisp-radius-2xl: 16px;
+  --crisp-radius-3xl: 20px;
   --crisp-radius-full: 999px;
   --crisp-size-icon: 16px;
   --crisp-size-chip: 22px;
@@ -170,6 +199,9 @@
   --crisp-size-header: 48px;
   --crisp-size-calendarCell: 34px;
   --crisp-size-calendarPill: 32px;
+  --crisp-size-selectTriggerMd: 40px;
+  --crisp-size-selectTriggerLg: 52px;
+  --crisp-size-selectIconLg: 20px;
   --crisp-text-xs: 11px;
   --crisp-text-sm: 12px;
   --crisp-text-md: 13px;

package/dist/tokens.json

@@ -1,14 +1,16 @@
 {
   "color": {
     "light": {
-      "bgBrandSolid": "#266df0",
-      "bgBrandSolidPressed": "#1f5fd6",
+      "bgBrandSolid": "#0298d9",
+      "bgBrandSolidPressed": "#0283bb",
+      "bgBrandContrast": "#0278ac",
+      "fgBrandContrast": "#0278ac",
       "fgOnBrand": "#ffffff",
       "fgOnTone": "#101112",
       "bgSurface": "#ffffff",
-      "bgRaised": "#f4f4f5",
+      "bgRaised": "#f7f8f9",
       "bgSurfaceMuted": "#f6f7f7",
-      "borderDefault": "#e4e4e7",
+      "borderDefault": "#dcdee3",
       "borderSubtle": "#eeeff1",
       "borderDropzone": "#e6e7ea",
       "borderDivider": "#e6e7ea",
@@ -30,9 +32,9 @@
       "shadowPopover3": "rgba(24,41,75,0.16)",
       "fgPrimary": "#101112",
       "fgMuted": "#71717a",
-      "bgDanger": "#e5484d",
-      "bgDangerSolid": "#ba2525",
-      "fgDanger": "#eb3b3b",
+      "bgDanger": "#fa342c",
+      "bgDangerSolid": "#ca1d13",
+      "fgDanger": "#fa342c",
       "strokeFieldFocus": "#1a1c20",
       "fgDisabled": "#d1d3d8",
       "bgNeutralWeak": "#f3f4f5",
@@ -41,8 +43,9 @@
       "fgNeutralSubtle": "#868b94",
       "fgNeutralMuted": "#555d6d",
       "strokeFocusRing": "#1e82eb",
-      "bgSuccess": "#1f9d57",
-      "bgWarning": "#b5730f",
+      "bgSuccess": "#079171",
+      "bgWarning": "#9b7821",
+      "bgWarningSolid": "#fbdc65",
       "bgOrange": "#f97514",
       "bgCyan": "#00b9eb",
       "bgPurple": "#9b69ff",
@@ -55,11 +58,23 @@
       "fgNeutralSoft": "#505155",
       "bgPurpleSoft": "#f5f0ff",
       "fgPurpleSoft": "#6238b5",
-      "ringPurpleSoft": "#e8ddfe"
+      "ringPurpleSoft": "#e8ddfe",
+      "ringBrandSoft": "#d6e5ff",
+      "fgSelectNeutral": "#1a1c20",
+      "bgSelectListbox": "#ffffff",
+      "strokeSelectTrigger": "#dcdee3",
+      "bgSelectPressed": "#00000007",
+      "bgSelectDisabled": "#f3f4f5",
+      "strokeSelectInvalid": "#fa342c",
+      "strokeSelectDivider": "#00000010",
+      "fgSelectPlaceholder": "#b0b3ba",
+      "shadowSelect": "#0000001f"
     },
     "dark": {
-      "bgBrandSolid": "#266df0",
-      "bgBrandSolidPressed": "#1f5fd6",
+      "bgBrandSolid": "#0298d9",
+      "bgBrandSolidPressed": "#0283bb",
+      "bgBrandContrast": "#0278ac",
+      "fgBrandContrast": "#0278ac",
       "fgOnBrand": "#ffffff",
       "fgOnTone": "#101112",
       "bgSurface": "#0a0a0a",
@@ -100,6 +115,7 @@
       "strokeFocusRing": "#5e98fe",
       "bgSuccess": "#2ea968",
       "bgWarning": "#e0982a",
+      "bgWarningSolid": "#e0982a",
       "bgOrange": "#f97514",
       "bgCyan": "#00b9eb",
       "bgPurple": "#9b69ff",
@@ -112,7 +128,17 @@
       "fgNeutralSoft": "#9a9aa2",
       "bgPurpleSoft": "#2f1e5a",
       "fgPurpleSoft": "#d8c4ff",
-      "ringPurpleSoft": "#45297d"
+      "ringPurpleSoft": "#45297d",
+      "ringBrandSoft": "#212224",
+      "fgSelectNeutral": "#f3f4f5",
+      "bgSelectListbox": "#1d2025",
+      "strokeSelectTrigger": "#393d46",
+      "bgSelectPressed": "#ffffff0d",
+      "bgSelectDisabled": "#2b2e35",
+      "strokeSelectInvalid": "#ff6e60",
+      "strokeSelectDivider": "#ffffff17",
+      "fgSelectPlaceholder": "#868b94",
+      "shadowSelect": "#000000cc"
     }
   },
   "palette": {
@@ -120,15 +146,16 @@
       "gray00": "#ffffff",
       "white": "#ffffff",
       "ink": "#101112",
-      "gray50": "#f4f4f5",
+      "gray50": "#f7f8f9",
       "gray900": "#101112",
-      "line200": "#e4e4e7",
+      "line200": "#dcdee3",
       "line100": "#eeeff1",
       "line150": "#e6e7ea",
       "gray25": "#f6f7f7",
       "ringNeutral": "transparent",
       "ringField": "rgba(0,0,0,0.06)",
       "ringSwitch": "#d9dade",
+      "ringBrandSoft": "#d6e5ff",
       "tileActive": "#ffffff",
       "tileActiveShadow": "rgba(0,0,0,0.04)",
       "bgScrim": "rgba(0,0,0,0.25)",
@@ -143,11 +170,12 @@
       "shadowPopover2": "rgba(28,40,64,0.12)",
       "shadowPopover3": "rgba(24,41,75,0.16)",
       "gray400": "#71717a",
-      "brand600": "#266df0",
-      "brand700": "#1f5fd6",
-      "red600": "#e5484d",
-      "red700": "#ba2525",
-      "red500": "#eb3b3b",
+      "brand600": "#0298d9",
+      "brand700": "#0283bb",
+      "brandContrast": "#0278ac",
+      "red600": "#fa342c",
+      "red700": "#ca1d13",
+      "red500": "#fa342c",
       "fieldFocus": "#1a1c20",
       "disabledFg": "#d1d3d8",
       "neutralWeak": "#f3f4f5",
@@ -156,8 +184,9 @@
       "neutralSubtle": "#868b94",
       "neutralMuted": "#555d6d",
       "focusRing": "#1e82eb",
-      "green600": "#1f9d57",
-      "amber600": "#b5730f",
+      "green600": "#079171",
+      "amber600": "#9b7821",
+      "amberSolid": "#fbdc65",
       "orange600": "#f97514",
       "cyan600": "#00b9eb",
       "purple600": "#9b69ff",
@@ -169,7 +198,15 @@
       "softNeutralText": "#505155",
       "purpleTint": "#f5f0ff",
       "softPurpleText": "#6238b5",
-      "purpleRing": "#e8ddfe"
+      "purpleRing": "#e8ddfe",
+      "selectListboxBg": "#ffffff",
+      "selectTriggerStroke": "#dcdee3",
+      "selectPressedTint": "#00000007",
+      "selectDisabledBg": "#f3f4f5",
+      "selectInvalidStroke": "#fa342c",
+      "selectDivider": "#00000010",
+      "selectPlaceholder": "#b0b3ba",
+      "selectShadow": "#0000001f"
     },
     "dark": {
       "gray00": "#0a0a0a",
@@ -184,6 +221,7 @@
       "ringNeutral": "#212224",
       "ringField": "#212224",
       "ringSwitch": "#212224",
+      "ringBrandSoft": "#212224",
       "tileActive": "#101112",
       "tileActiveShadow": "rgba(0,0,0,0)",
       "bgScrim": "rgba(0,0,0,0.55)",
@@ -198,8 +236,9 @@
       "shadowPopover2": "rgba(0,0,0,0.24)",
       "shadowPopover3": "rgba(0,0,0,0.32)",
       "gray400": "#9a9aa2",
-      "brand600": "#266df0",
-      "brand700": "#1f5fd6",
+      "brand600": "#0298d9",
+      "brand700": "#0283bb",
+      "brandContrast": "#0278ac",
       "red600": "#ff5a5f",
       "red700": "#ba2525",
       "red500": "#ff5a5f",
@@ -213,6 +252,7 @@
       "focusRing": "#5e98fe",
       "green600": "#2ea968",
       "amber600": "#e0982a",
+      "amberSolid": "#e0982a",
       "orange600": "#f97514",
       "cyan600": "#00b9eb",
       "purple600": "#9b69ff",
@@ -224,7 +264,15 @@
       "softNeutralText": "#9a9aa2",
       "purpleTint": "#2f1e5a",
       "softPurpleText": "#d8c4ff",
-      "purpleRing": "#45297d"
+      "purpleRing": "#45297d",
+      "selectListboxBg": "#1d2025",
+      "selectTriggerStroke": "#393d46",
+      "selectPressedTint": "#ffffff0d",
+      "selectDisabledBg": "#2b2e35",
+      "selectInvalidStroke": "#ff6e60",
+      "selectDivider": "#ffffff17",
+      "selectPlaceholder": "#868b94",
+      "selectShadow": "#000000cc"
     }
   },
   "space": {
@@ -238,15 +286,18 @@
     "px": 1,
     "0.5": 2,
     "1.5": 6,
-    "2.5": 10
+    "2.5": 10,
+    "3.5": 14
   },
   "radius": {
+    "xs": 4,
     "chip": 7,
     "sm": 6,
     "md": 8,
     "lg": 9,
     "xl": 12,
     "2xl": 16,
+    "3xl": 20,
     "full": 999
   },
   "size": {
@@ -258,7 +309,10 @@
     "tableHeader": 40,
     "header": 48,
     "calendarCell": 34,
-    "calendarPill": 32
+    "calendarPill": 32,
+    "selectTriggerMd": 40,
+    "selectTriggerLg": 52,
+    "selectIconLg": 20
   },
   "text": {
     "xs": 11,

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+export type AccentPickerProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "className"> & {
+    /** Hex (or any CSS) colours, in display order. */
+    colors: string[];
+    /** Controlled selected colour. Omit to let the picker manage it (see `defaultValue`). */
+    value?: string;
+    /** Initially selected colour, when uncontrolled. */
+    defaultValue?: string;
+    onValueChange?: (color: string) => void;
+    className?: string;
+};
+/**
+ * A row of selectable colour swatches — Attio's own accent-colour picker
+ * (Settings > Appearance). Not a fixed palette: pass the colours (and the
+ * accent isn't crisp's concern to theme the app with — this only picks one).
+ * Same roving-focus/arrow-key model every other crisp radio-like control
+ * shares (`useRadioGroupKeyboard`, also used by `RadioGroup` and
+ * `Segmented`).
+ */
+export declare function AccentPicker({ colors, value, defaultValue, onValueChange, className, onKeyDown: onKeyDownProp, ...rest }: AccentPickerProps): React.JSX.Element;
+export declare namespace AccentPicker {
+    var displayName: string;
+}

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

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<import("../..").RecipeVariantRecord>;
+export declare const accentpickerRecipe: import("../..").RecipeFn<import("../..").RecipeVariantRecord>;
+export default config;

package/dist/types/components/accentpicker/index.d.ts

@@ -0,0 +1,2 @@
+export { AccentPicker, type AccentPickerProps } from "./accentpicker";
+export { accentpickerRecipe } from "./accentpicker.recipe";

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

@@ -32,12 +32,12 @@ declare const spec: {
                 readonly parts: [{
                     readonly selector: "&:hover";
                     readonly decls: {
-                        background: `var(--${string})`;
+                        readonly filter: "brightness(0.96)";
                     };
                 }, {
                     readonly selector: "&:active";
                     readonly decls: {
-                        background: `var(--${string})`;
+                        readonly filter: "brightness(0.92)";
                     };
                 }];
             };

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

@@ -8,13 +8,21 @@ export type CalloutProps = Omit<React.ComponentPropsWithoutRef<"div">, "title">
     children?: React.ReactNode;
     /** Trailing action (e.g. a Button). */
     action?: React.ReactNode;
+    /**
+     * A page-level banner look (crisp#869): a 1px border, 12px radius, tighter
+     * 8px/12px padding, and a brand-tinted background — measured live on
+     * Attio's own Objects settings page (a real full-width Pro-plan nudge).
+     * There's no measured close/dismiss button on that banner, so this adds
+     * none.
+     */
+    bordered?: boolean;
     className?: string;
 };
 /**
  * An inline callout / banner — measured from info notices. `tone` tints
  * the background and icon; pass a `title` and/or body `children`.
  */
-export declare function Callout({ tone, icon, title, children, action, className, ...rest }: CalloutProps): React.JSX.Element;
+export declare function Callout({ tone, icon, title, children, action, bordered, className, ...rest }: CalloutProps): React.JSX.Element;
 export declare namespace Callout {
     var displayName: string;
 }

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

@@ -1,3 +1,13 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const calloutRecipe: import("../..").RecipeFn<{}>;
+declare const config: import("../..").RecipeConfig<{
+    bordered: {
+        true: string;
+        false: string;
+    };
+}>;
+export declare const calloutRecipe: import("../..").RecipeFn<{
+    bordered: {
+        true: string;
+        false: string;
+    };
+}>;
 export default config;

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

@@ -4,9 +4,16 @@ import { inputRecipe } from "./input.recipe";
 export type InputProps = Omit<React.ComponentPropsWithoutRef<"input">, "size"> & VariantProps<typeof inputRecipe> & {
     /** Class for the wrapper that draws the field chrome and focus ring. */
     className?: string;
+    /**
+     * Content after the value (crisp#634) — e.g. an "Edit" button on a
+     * read-only field. Measured live on Attio's own Settings > Profile
+     * primary-email field.
+     */
+    suffix?: React.ReactNode;
 };
 export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size"> & VariantProps<import("../..").RecipeFn<{
     size: {
+        sm: string;
         medium: string;
         large: string;
     };
@@ -17,6 +24,7 @@ export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
 }> & {
     config: import("../..").RecipeConfig<{
         size: {
+            sm: string;
             medium: string;
             large: string;
         };
@@ -28,4 +36,10 @@ export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
 }> & {
     /** Class for the wrapper that draws the field chrome and focus ring. */
     className?: string;
+    /**
+     * Content after the value (crisp#634) — e.g. an "Edit" button on a
+     * read-only field. Measured live on Attio's own Settings > Profile
+     * primary-email field.
+     */
+    suffix?: React.ReactNode;
 } & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,5 +1,6 @@
 declare const config: import("../..").RecipeConfig<{
     size: {
+        sm: string;
         medium: string;
         large: string;
     };
@@ -10,6 +11,7 @@ declare const config: import("../..").RecipeConfig<{
 }>;
 export declare const inputRecipe: import("../..").RecipeFn<{
     size: {
+        sm: string;
         medium: string;
         large: string;
     };
@@ -20,6 +22,7 @@ export declare const inputRecipe: import("../..").RecipeFn<{
 }> & {
     config: import("../..").RecipeConfig<{
         size: {
+            sm: string;
             medium: string;
             large: string;
         };