@crisp-ui-kit/crisp 0.57.1 → 0.57.3

package/dist/datepicker.layered.css

@@ -17,36 +17,22 @@
        measurement -- accessibility wins over the seed reference.
        neutralMuted clears it, 6.62:1 light / 14.71:1 dark (dark was
        already fine at 9.43:1). */
-    & .crisp-datepicker-weekday {
-      display: flex; align-items: center; justify-content: center;
-      height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-muted);
-      font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium);
-    }
-
+    & .crisp-datepicker-weekday { display: flex; align-items: center; justify-content: center; height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-muted); font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); }
     & .crisp-datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
     & .crisp-datepicker-months[data-wheel-open] { visibility: hidden; }
     & .crisp-datepicker-month { min-width: 0; }
-    & .crisp-datepicker-month-label {
-      display: flex; align-items: center; height: 24px;
-      color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px;
-      font-weight: var(--crisp-weight-medium);
-    }
-
+    & .crisp-datepicker-month-label { display: flex; align-items: center; height: 24px; color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); }
     & .crisp-datepicker-grid { display: grid; min-width: 0; }
     & .crisp-datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
-
-    & .crisp-datepicker-cell {
-      position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell);
-      isolation: isolate;
-    }
+    & .crisp-datepicker-cell { position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell); isolation: isolate; }
     & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
-
     /* The bridge joining days inside a completed range.
        The endpoints do NOT carry data-in-range -- only the interior days do --
        so these are three independent rules, not a base plus two modifiers. A
        modifier that sets only inset-inline-start never generates a pseudo
        element on an endpoint, which leaves a half-cell of white between the
-       endpoint's pill and the run of grey beside it. Each rule declares its own content. */
+       endpoint's pill and the run of grey beside it. Each rule declares its
+       own content. */
     & .crisp-datepicker-cell[data-range-complete][data-in-range]::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
     & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 50%; inset-inline-end: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
     & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 0; inset-inline-end: 50%; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
@@ -62,33 +48,19 @@
     & .crisp-datepicker-date:disabled { color: var(--crisp-fg-disabled); cursor: not-allowed; }
     & .crisp-datepicker-date:focus-visible::after { content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); transform: translateX(-50%); border-radius: var(--crisp-radius-md); outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; }
     & .crisp-datepicker-date-content { position: relative; z-index: 1; display: flex; width: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box; flex-direction: column; align-items: center; gap: 3px; padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); font-variant-numeric: tabular-nums; }
-    /* The numeral is its own 42px flex box so it centres on the 42px pill. Without this the content column top-aligns the glyph and the pill reads as offset — the cell is 48px, the pill 42px inset 3px, and only a 42px-tall numeral box shares the pill's centre line. */
-    & .crisp-datepicker-date-content > [data-date-picker-day] {
-      display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0;
-      align-items: center; justify-content: center;
-    }
-
+    /* The numeral is its own 42px flex box so it centres on the 42px pill.
+       Without this the content column top-aligns the glyph and the pill reads
+       as offset — the cell is 48px, the pill 42px inset 3px, and only a
+       42px-tall numeral box shares the pill's centre line. */
+    & .crisp-datepicker-date-content > [data-date-picker-day] { display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0; align-items: center; justify-content: center; }
     /* the year/month wheel, laid over the grid it replaces */
-    & .crisp-datepicker-wheel-container {
-      position: absolute; z-index: 1; inset-inline: 0;
-      top: var(--crisp-size-menuRow); bottom: 0;
-      display: flex; align-items: center; overflow: hidden;
-      background: var(--crisp-bg-surface);
-    }
+    & .crisp-datepicker-wheel-container { position: absolute; z-index: 1; inset-inline: 0; top: var(--crisp-size-menuRow); bottom: 0; display: flex; align-items: center; overflow: hidden; background: var(--crisp-bg-surface); }
     & .crisp-datepicker-wheel { width: 100%; }
-
-    & .crisp-datepicker-continuous-scroll {
-      height: 100%; min-height: 0; overflow-y: auto;
-      overscroll-behavior: contain; scrollbar-width: none;
-    }
+    & .crisp-datepicker-continuous-scroll { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
     & .crisp-datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
     & .crisp-datepicker-continuous-content { display: flex; flex-direction: column; }
-
     /* announced, never drawn */
-    & .crisp-datepicker-live-region {
-      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
-    }
+    & .crisp-datepicker-live-region { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 }
 .crisp-datepicker--visibleRange_month {
   

package/dist/datepickerfield.css

@@ -1,13 +1,16 @@
 .crisp-datepickerfield {
   display: inline-flex; font-family: var(--crisp-font-sans);
-    & .crisp-datepickerfield-box { display: inline-flex; align-items: center; box-sizing: border-box; height: 32px; margin: 0; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); }
+    & .crisp-datepickerfield-box { display: inline-flex; align-items: center; width: 100%; box-sizing: border-box; height: 32px; margin: 0; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); }
     & .crisp-datepickerfield-box[data-ghost] { background: transparent; box-shadow: none; }
     & .crisp-datepickerfield-box[data-ghost]:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
-    & .crisp-datepickerfield-trigger { display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 100%; padding: 0 var(--crisp-space-2-5); margin: 0; border: none; background: none; color: inherit; font-family: inherit; font-size: inherit; white-space: nowrap; cursor: pointer; }
+    & .crisp-datepickerfield-trigger { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 100%; padding: 0 var(--crisp-space-2-5); margin: 0; border: none; background: none; color: inherit; font-family: inherit; font-size: inherit; white-space: nowrap; cursor: pointer; }
     & .crisp-datepickerfield-box[data-placeholder] .crisp-datepickerfield-trigger { color: var(--crisp-fg-muted); }
     & .crisp-datepickerfield-trigger svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     /* Reuses TableToolbar's measured filter-chip remove button
-       (tabletoolbar.chrome.ts's .crisp-tabletoolbar-fchip-x) -- the same small inline "clear this value" affordance, not a freshly-measured one: no live Attio composition for a DatePickerField-equivalent clear was reachable this round (#394). */
+       (tabletoolbar.chrome.ts's .crisp-tabletoolbar-fchip-x) -- the same
+       small inline "clear this value" affordance, not a freshly-measured
+       one: no live Attio composition for a DatePickerField-equivalent
+       clear was reachable this round (#394). */
     & .crisp-datepickerfield-clear { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-inline-end: var(--crisp-space-1); padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
     & .crisp-datepickerfield-clear:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 10%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-datepickerfield-panel { padding: var(--crisp-space-2); width: 300px; }
@@ -15,3 +18,9 @@
     & .crisp-datepickerfield-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-datepickerfield-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
 }
+.crisp-datepickerfield--width_full {
+  width: 100%;
+}
+.crisp-datepickerfield--width_auto {
+  width: auto;
+}

package/dist/datepickerfield.d.ts

@@ -1,7 +1,7 @@
 import type { RecipeFn } from "../core/types";
 
 export interface DatepickerfieldVariants {
-
+  width?: "full" | "auto";
 }
 
-export declare const datepickerfieldRecipe: RecipeFn<{  }>;
+export declare const datepickerfieldRecipe: RecipeFn<{ width: { full: string; auto: string } }>;

package/dist/datepickerfield.layered.css

@@ -1,14 +1,17 @@
 @layer crisp-components {
 .crisp-datepickerfield {
   display: inline-flex; font-family: var(--crisp-font-sans);
-    & .crisp-datepickerfield-box { display: inline-flex; align-items: center; box-sizing: border-box; height: 32px; margin: 0; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); }
+    & .crisp-datepickerfield-box { display: inline-flex; align-items: center; width: 100%; box-sizing: border-box; height: 32px; margin: 0; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); }
     & .crisp-datepickerfield-box[data-ghost] { background: transparent; box-shadow: none; }
     & .crisp-datepickerfield-box[data-ghost]:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
-    & .crisp-datepickerfield-trigger { display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 100%; padding: 0 var(--crisp-space-2-5); margin: 0; border: none; background: none; color: inherit; font-family: inherit; font-size: inherit; white-space: nowrap; cursor: pointer; }
+    & .crisp-datepickerfield-trigger { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 100%; padding: 0 var(--crisp-space-2-5); margin: 0; border: none; background: none; color: inherit; font-family: inherit; font-size: inherit; white-space: nowrap; cursor: pointer; }
     & .crisp-datepickerfield-box[data-placeholder] .crisp-datepickerfield-trigger { color: var(--crisp-fg-muted); }
     & .crisp-datepickerfield-trigger svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     /* Reuses TableToolbar's measured filter-chip remove button
-       (tabletoolbar.chrome.ts's .crisp-tabletoolbar-fchip-x) -- the same small inline "clear this value" affordance, not a freshly-measured one: no live Attio composition for a DatePickerField-equivalent clear was reachable this round (#394). */
+       (tabletoolbar.chrome.ts's .crisp-tabletoolbar-fchip-x) -- the same
+       small inline "clear this value" affordance, not a freshly-measured
+       one: no live Attio composition for a DatePickerField-equivalent
+       clear was reachable this round (#394). */
     & .crisp-datepickerfield-clear { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-inline-end: var(--crisp-space-1); padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
     & .crisp-datepickerfield-clear:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 10%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-datepickerfield-panel { padding: var(--crisp-space-2); width: 300px; }
@@ -16,4 +19,10 @@
     & .crisp-datepickerfield-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-datepickerfield-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
 }
+.crisp-datepickerfield--width_full {
+  width: 100%;
+}
+.crisp-datepickerfield--width_auto {
+  width: auto;
+}
 }

package/dist/dialog.css

@@ -3,10 +3,8 @@
     & .crisp-dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--crisp-bg-scrim); }
     & .crisp-dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--crisp-space-4) var(--crisp-space-4); }
     & .crisp-dialog-positioner[data-variant="alert"] { align-items: center; padding: var(--crisp-space-4); }
-    & .crisp-dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-2xl); background: color-mix(in srgb, var(--crisp-bg-overlay-frost) 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px var(--crisp-shadow-overlay1), 0 18px 88px -4px var(--crisp-shadow-overlay2), 0 0 1px var(--crisp-shadow-overlay3); opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
-    & .crisp-dialog-content[data-variant="alert"] { padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
-    & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
-    & .crisp-dialog-content[data-variant="alert"] .crisp-dialog-card { border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); }
+    & .crisp-dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-3xl); background: var(--crisp-bg-surface); overflow: hidden; }
     & .crisp-dialog-header { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; height: 52px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); }
     & .crisp-dialog-header svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); margin: 0; }
@@ -15,8 +13,10 @@
     /* The discard-confirm's own stacked title + sentence (crisp#677) — no
        border, no close button, unlike the panel header above: measured
        live, both themes, 18px/24px 600-weight title (no scale token
-       reaches 18px — the scale tops out at text.xl's 16px, so this is raw px per Golden Rule 3's "genuinely intrinsic size" exception, same as
-       this file's own submit-key glyphs) then a 14px/20px 500-weight sentence 4px below it. */
+       reaches 18px — the scale tops out at text.xl's 16px, so this is raw
+       px per Golden Rule 3's "genuinely intrinsic size" exception, same as
+       this file's own submit-key glyphs) then a 14px/20px 500-weight
+       sentence 4px below it. */
     & .crisp-dialog-alert-header { display: flex; flex-direction: column; gap: var(--crisp-space-1); padding: var(--crisp-space-4) var(--crisp-space-4) 0; }
     & .crisp-dialog-alert-title { margin: 0; font-size: 18px; line-height: 24px; font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
     & .crisp-dialog-alert-description { margin: 0; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-alert-description); }
@@ -26,7 +26,12 @@
     & .crisp-dialog-field { display: flex; flex-direction: column; gap: var(--crisp-space-1-5); }
     & .crisp-dialog-field-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); }
     & .crisp-dialog-more { display: inline-flex; align-items: center; gap: var(--crisp-space-2); margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); cursor: pointer; }
-    & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 28px; padding: 0 var(--crisp-space-1) 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; }
+    /* your-moon/crisp#953: bgBrandContrast, not bgBrandSolid --
+       the accent (#0298d9) only clears 3.23:1 with white; the darker
+       sibling clears 4.5:1+, same fix already applied to Button/Badge/
+       Avatar (#897). Scoped to this one fill only -- Dialog's own frosted-
+       surface identity (#934) is untouched here. */
+    & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 28px; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-contrast); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-dialog-submit-key { display: inline-flex; align-items: center; gap: var(--crisp-space-1); }
     & .crisp-dialog-submit-key kbd { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: transparent; color: var(--crisp-fg-on-brand); font-family: inherit; font-style: normal; font-size: 10px; }
 }

package/dist/dialog.layered.css

@@ -4,10 +4,8 @@
     & .crisp-dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--crisp-bg-scrim); }
     & .crisp-dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--crisp-space-4) var(--crisp-space-4); }
     & .crisp-dialog-positioner[data-variant="alert"] { align-items: center; padding: var(--crisp-space-4); }
-    & .crisp-dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-2xl); background: color-mix(in srgb, var(--crisp-bg-overlay-frost) 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px var(--crisp-shadow-overlay1), 0 18px 88px -4px var(--crisp-shadow-overlay2), 0 0 1px var(--crisp-shadow-overlay3); opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
-    & .crisp-dialog-content[data-variant="alert"] { padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
-    & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
-    & .crisp-dialog-content[data-variant="alert"] .crisp-dialog-card { border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); }
+    & .crisp-dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-3xl); background: var(--crisp-bg-surface); overflow: hidden; }
     & .crisp-dialog-header { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; height: 52px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); }
     & .crisp-dialog-header svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); margin: 0; }
@@ -16,8 +14,10 @@
     /* The discard-confirm's own stacked title + sentence (crisp#677) — no
        border, no close button, unlike the panel header above: measured
        live, both themes, 18px/24px 600-weight title (no scale token
-       reaches 18px — the scale tops out at text.xl's 16px, so this is raw px per Golden Rule 3's "genuinely intrinsic size" exception, same as
-       this file's own submit-key glyphs) then a 14px/20px 500-weight sentence 4px below it. */
+       reaches 18px — the scale tops out at text.xl's 16px, so this is raw
+       px per Golden Rule 3's "genuinely intrinsic size" exception, same as
+       this file's own submit-key glyphs) then a 14px/20px 500-weight
+       sentence 4px below it. */
     & .crisp-dialog-alert-header { display: flex; flex-direction: column; gap: var(--crisp-space-1); padding: var(--crisp-space-4) var(--crisp-space-4) 0; }
     & .crisp-dialog-alert-title { margin: 0; font-size: 18px; line-height: 24px; font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
     & .crisp-dialog-alert-description { margin: 0; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-alert-description); }
@@ -27,7 +27,12 @@
     & .crisp-dialog-field { display: flex; flex-direction: column; gap: var(--crisp-space-1-5); }
     & .crisp-dialog-field-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); }
     & .crisp-dialog-more { display: inline-flex; align-items: center; gap: var(--crisp-space-2); margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); cursor: pointer; }
-    & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 28px; padding: 0 var(--crisp-space-1) 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; }
+    /* your-moon/crisp#953: bgBrandContrast, not bgBrandSolid --
+       the accent (#0298d9) only clears 3.23:1 with white; the darker
+       sibling clears 4.5:1+, same fix already applied to Button/Badge/
+       Avatar (#897). Scoped to this one fill only -- Dialog's own frosted-
+       surface identity (#934) is untouched here. */
+    & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 28px; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-contrast); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-dialog-submit-key { display: inline-flex; align-items: center; gap: var(--crisp-space-1); }
     & .crisp-dialog-submit-key kbd { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: transparent; color: var(--crisp-fg-on-brand); font-family: inherit; font-style: normal; font-size: 10px; }
 }

package/dist/emptystate.css

@@ -3,7 +3,9 @@
     & .crisp-emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); color: var(--crisp-fg-muted); }
     & .crisp-emptystate-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
     & .crisp-emptystate-desc { max-width: 320px; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    /* #603: measured 8px gap between "Import CSV"/"Connect data source" -- inline-flex so one action (the common case) or several lay out the same way, wrapping if the container is narrow. */
+    /* #603: measured 8px gap between "Import CSV"/"Connect data source" --
+       inline-flex so one action (the common case) or several lay out the
+       same way, wrapping if the container is narrow. */
     & .crisp-emptystate-action { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--crisp-space-2); margin-top: var(--crisp-space-2); }
     /* #603: Attio's zero-records "Learn more" card -- a label above a
        clickable icon+title tile. Left/start-aligned, unlike the rest of
@@ -23,12 +25,12 @@
 .crisp-emptystate--variant_page {
   gap: var(--crisp-space-2);
     & .crisp-emptystate-icon { width: 45px; height: 45px; margin-bottom: var(--crisp-space-2); border-radius: var(--crisp-radius-full); border: 1px solid var(--crisp-border-subtle); background: none; color: var(--crisp-fg-muted); }
-    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; letter-spacing: var(--crisp-tracking-20); }
     & .crisp-emptystate-desc { max-width: 266px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; }
     & .crisp-emptystate-action { margin-top: var(--crisp-space-2); }
 }
 .crisp-emptystate--variant_records {
   & .crisp-emptystate-icon { width: 138px; height: 138px; margin-bottom: var(--crisp-space-2); border-radius: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--crisp-fg-primary) 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
-    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; letter-spacing: var(--crisp-tracking-20); }
     & .crisp-emptystate-desc { max-width: 266px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; }
 }

package/dist/emptystate.layered.css

@@ -4,7 +4,9 @@
     & .crisp-emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); color: var(--crisp-fg-muted); }
     & .crisp-emptystate-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
     & .crisp-emptystate-desc { max-width: 320px; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    /* #603: measured 8px gap between "Import CSV"/"Connect data source" -- inline-flex so one action (the common case) or several lay out the same way, wrapping if the container is narrow. */
+    /* #603: measured 8px gap between "Import CSV"/"Connect data source" --
+       inline-flex so one action (the common case) or several lay out the
+       same way, wrapping if the container is narrow. */
     & .crisp-emptystate-action { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--crisp-space-2); margin-top: var(--crisp-space-2); }
     /* #603: Attio's zero-records "Learn more" card -- a label above a
        clickable icon+title tile. Left/start-aligned, unlike the rest of
@@ -24,13 +26,13 @@
 .crisp-emptystate--variant_page {
   gap: var(--crisp-space-2);
     & .crisp-emptystate-icon { width: 45px; height: 45px; margin-bottom: var(--crisp-space-2); border-radius: var(--crisp-radius-full); border: 1px solid var(--crisp-border-subtle); background: none; color: var(--crisp-fg-muted); }
-    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; letter-spacing: var(--crisp-tracking-20); }
     & .crisp-emptystate-desc { max-width: 266px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; }
     & .crisp-emptystate-action { margin-top: var(--crisp-space-2); }
 }
 .crisp-emptystate--variant_records {
   & .crisp-emptystate-icon { width: 138px; height: 138px; margin-bottom: var(--crisp-space-2); border-radius: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--crisp-fg-primary) 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
-    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; letter-spacing: var(--crisp-tracking-20); }
     & .crisp-emptystate-desc { max-width: 266px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; }
 }
 }

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

@@ -89,7 +89,11 @@ const spec = defineSpec({
                 paddingInline: c.space["1"],
                 fontSize: c.text.sm,
                 lineHeight: "16px",
-                borderRadius: c.radius.sm,
+                // your-moon/crisp#919: seed-design's own Badge (`badge.yaml`)
+                // is a small rounded-rect at every size, never a pill -- its
+                // small/medium step is `$radius.r1` = 4px (`radius.xs`), not the 6px
+                // `radius.sm` this used to share with Chip's old rounded-rect shape.
+                borderRadius: c.radius.xs,
             },
             // crisp#696: Attio's tag pill (Standard/System/Enriched) measures
             // 20px h / 4px padding / 12px text / 16px line-height / 3px gap -- was
@@ -101,14 +105,24 @@ const spec = defineSpec({
                 fontSize: c.text.sm,
                 lineHeight: "16px",
                 gap: "3px",
-                borderRadius: c.radius.sm,
+                // your-moon/crisp#919: same seed radius step as `small`
+                // above -- seed's Badge treats small/medium as one radius step
+                // (`$radius.r1` = 4px), unlike Button/Input's per-size table.
+                borderRadius: c.radius.xs,
             },
             // crisp#805: measured live against Attio's real status/stage chip
-            // (Deals "Deal stage" column, All Deals table view) -- radius 9px, not
-            // `radius.chip`'s 7px, and asymmetric padding (room for a leading dot/
-            // icon: 1px top/bottom, 6px trailing, 4px leading), not a symmetric
-            // 9px. Height/font/tracking are unchanged (still not independently
-            // re-measured this round, per #696's own note).
+            // (Deals "Deal stage" column, All Deals table view) -- asymmetric
+            // padding (room for a leading dot/icon: 1px top/bottom, 6px trailing,
+            // 4px leading), not a symmetric 9px. Height/font/tracking are
+            // unchanged (still not independently re-measured this round, per
+            // #696's own note).
+            // your-moon/crisp#919: radius was Attio's own measured 9px
+            // (`radius.lg`, deliberately not `radius.chip`'s then-7px) -- now
+            // `radius.sm` (6px), seed-design's own Badge large step
+            // (`$radius.r1_5`). Radius specifically is one of the values this
+            // migration takes from seed over an Attio measurement (colours/radii/
+            // control-styling/elevation all do); the padding/height facts above
+            // are unaffected and still Attio's.
             large: {
                 height: c.size.chip,
                 paddingBlock: c.space.px,
@@ -116,7 +130,7 @@ const spec = defineSpec({
                 paddingInlineEnd: c.space["1.5"],
                 fontSize: c.text.lg,
                 letterSpacing: "-0.1px",
-                borderRadius: c.radius.lg,
+                borderRadius: c.radius.sm,
             },
         },
         variant: { soft: {}, solid: {} },

package/dist/esm/components/bottomsheet/bottomsheet.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as dialog from "@zag-js/dialog";
+import { normalizeProps, Portal, useMachine } from "@zag-js/react";
+import { X } from "lucide-react";
+import * as React from "react";
+import { cx, hasOpenFloatingLayer, useCrispMessage, withDescribedBy, } from "../../core/index.js";
+import { bottomsheetRecipe } from "./bottomsheet.recipe.js";
+let instanceCounter = 0;
+function useBottomSheetInstanceId() {
+    const idRef = React.useRef(null);
+    if (idRef.current == null) {
+        instanceCounter += 1;
+        idRef.current = `crisp-bottomsheet-${instanceCounter}`;
+    }
+    return idRef.current;
+}
+/**
+ * A mobile bottom sheet — composes Zag's dialog machine (focus trap, scroll
+ * lock, Escape / outside-click dismissal) with a panel that slides up from
+ * the bottom edge. Compose the body with `BottomSheetBody` and actions with
+ * `BottomSheetFooter`.
+ */
+export function BottomSheet({ open, onOpenChange, title, description, headerAlign = "left", showCloseButton, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, "aria-describedby": describedBy, ...rest }) {
+    const closeLabel = useCrispMessage(closeLabelProp, "Close");
+    const id = useBottomSheetInstanceId();
+    const service = useMachine(dialog.machine, {
+        id,
+        open,
+        onOpenChange(details) {
+            onOpenChange(details.open);
+        },
+        "aria-label": typeof title === "string" ? title : ariaLabel,
+        // Defer to a nested Menu/Select/Popover/ContextMenu's own Escape
+        // handling (#361) -- same reasoning as Dialog/Drawer, same machine.
+        onEscapeKeyDown(event) {
+            if (hasOpenFloatingLayer())
+                event.preventDefault();
+        },
+    });
+    const api = dialog.connect(service, normalizeProps);
+    if (!api.open)
+        return null;
+    const hasClose = showCloseButton ?? title != null;
+    return (_jsx(Portal, { children: _jsxs("div", { className: bottomsheetRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "crisp-bottomsheet-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "crisp-bottomsheet-positioner", children: _jsxs("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: cx("crisp-bottomsheet-content", className), "data-header-align": headerAlign, "data-has-close": hasClose ? "" : undefined, children: [(title != null || description != null) && (_jsxs("div", { className: "crisp-bottomsheet-header", children: [title != null && (_jsx("span", { ...api.getTitleProps(), className: "crisp-bottomsheet-title", children: title })), description != null && (_jsx("span", { className: "crisp-bottomsheet-description", children: description })), hasClose && (_jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-bottomsheet-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) }))] })), children] }) })] }) }));
+}
+BottomSheet.displayName = "BottomSheet";
+export function BottomSheetBody({ children }) {
+    return _jsx("div", { className: "crisp-bottomsheet-body", children: children });
+}
+export function BottomSheetFooter({ children, }) {
+    return _jsx("div", { className: "crisp-bottomsheet-footer", children: children });
+}

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

@@ -0,0 +1,74 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A mobile bottom sheet — daangn/seed-design's
+// packages/rootage/components/bottom-sheet.yaml (dev@e1c486b904297f7b6a8f17b8523f732c37015d60),
+// not Attio (no such component there; crisp#911). Composes @zag-js/dialog, the
+// same headless machine Dialog/Drawer already use, with a panel that slides
+// up from the bottom edge over a scrim -- only the TOP corners round; the
+// panel sits flush with the viewport's bottom edge, unlike Drawer's own
+// 8px-gutter floating panel. Every numeric value below cites its yaml line.
+const config = defineRecipe({
+    name: "bottomsheet",
+    base: `display: contents; font-family: ${c.font.sans};
+    & .crisp-bottomsheet-backdrop {
+      position: fixed; inset: 0; z-index: 60;
+      background: ${c.bgOverlayStrong}; /* bottom-sheet.yaml:99 backdrop.color = $color.bg.overlay -- a different, darker, theme-constant scrim than the Dialog bgScrim token, see its own comment */
+      opacity: 1; transition: opacity 300ms cubic-bezier(0,0,.15,1); /* bottom-sheet.yaml:100-102 enterDuration/enterTimingFunction */
+      @starting-style { opacity: 0; }
+    }
+    & .crisp-bottomsheet-positioner {
+      position: fixed; inset: 0; z-index: 61;
+      display: flex; align-items: flex-end; justify-content: center;
+    }
+    & .crisp-bottomsheet-content {
+      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: relative; box-sizing: border-box; display: flex; flex-direction: column;
+      overflow: hidden; width: 100%; max-width: 480px; /* bottom-sheet.yaml:110 content.maxWidth */
+      max-height: 85vh;
+      background: ${c.bgSurface}; /* bottom-sheet.yaml:109 content.color = $color.bg.layer-floating */
+      border-radius: ${c.radius["4xl"]} ${c.radius["4xl"]} 0 0; /* bottom-sheet.yaml:111 content.topCornerRadius = $radius.r6 (24px), bottom flush with the viewport */
+      transform: translateY(0);
+      transition: transform 300ms cubic-bezier(.03,.4,.1,1); /* bottom-sheet.yaml:112-113 content.enterDuration/enterTimingFunction (enter-expressive) */
+      @starting-style { transform: translateY(100%); }
+    }
+    & .crisp-bottomsheet-header {
+      position: relative; display: flex; flex-direction: column;
+      gap: ${c.space["2"]}; /* bottom-sheet.yaml:120 header.gap = $dimension.x2 (8px) */
+      padding-top: ${c.space["6"]}; padding-bottom: ${c.space["4"]}; /* bottom-sheet.yaml:121-122 header.paddingTop/paddingBottom = $dimension.x6/x4 (24px/16px) */
+      flex-shrink: 0;
+    }
+    & .crisp-bottomsheet-title {
+      color: ${c.fgPrimary}; /* bottom-sheet.yaml:130 title.color = $color.fg.neutral */
+      font-size: 22px; line-height: 30px; font-weight: ${c.weight.bold}; /* bottom-sheet.yaml:131-133 title.fontSize/lineHeight/fontWeight = $font-size.t8/$line-height.t8/bold */
+      padding-inline: ${c.space["4"]}; /* default (headerAlignment=left, no close button): bottom-sheet.yaml:150-152 */
+    }
+    &[data-header-align="left"][data-has-close] .crisp-bottomsheet-title { padding-inline-start: ${c.space["4"]}; padding-inline-end: 56px; } /* bottom-sheet.yaml:141-144 */
+    &[data-header-align="center"] .crisp-bottomsheet-title { text-align: center; }
+    &[data-header-align="center"][data-has-close] .crisp-bottomsheet-title { padding-inline: 56px; } /* bottom-sheet.yaml:154-157 */
+    & .crisp-bottomsheet-description {
+      color: ${c.fgMuted}; /* bottom-sheet.yaml:138 description.color = $color.fg.neutral-muted */
+      font-size: ${c.text.xl}; line-height: 22px; font-weight: ${c.weight.regular}; /* bottom-sheet.yaml:139-141 description.fontSize/lineHeight/fontWeight = $font-size.t5/$line-height.t5/regular */
+      padding-inline: ${c.space["4"]}; /* bottom-sheet.yaml:142 description.paddingX = global-gutter (16px) */
+    }
+    & .crisp-bottomsheet-close {
+      position: absolute; top: ${c.space["6"]}; inset-inline-end: ${c.space["4"]}; /* bottom-sheet.yaml:145-146 closeButton.fromTop/fromRight = $dimension.x6/x4 (24px/16px) */
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md};
+      background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer;
+    }
+    & .crisp-bottomsheet-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    & .crisp-bottomsheet-body {
+      flex: 1; min-height: 0; overflow-y: auto;
+      padding-inline: ${c.space["4"]}; /* bottom-sheet.yaml:126 body.paddingX = global-gutter (16px) -- no vertical padding in the spec */
+    }
+    & .crisp-bottomsheet-footer {
+      display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["3"]};
+      flex-shrink: 0;
+      padding-inline: ${c.space["4"]}; padding-top: ${c.space["3"]}; padding-bottom: ${c.space["4"]}; /* bottom-sheet.yaml:127-129 footer.paddingX/paddingTop/paddingBottom = global-gutter/x3/x4 (16px/12px/16px) */
+    }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const bottomsheetRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { BottomSheet, BottomSheetBody, BottomSheetFooter, } from "./bottomsheet.js";
+export { bottomsheetRecipe } from "./bottomsheet.recipe.js";

package/dist/esm/components/breadcrumb/breadcrumb.js

@@ -19,7 +19,7 @@ export function Breadcrumb({ items, separator, "aria-label": ariaLabelProp, clas
     return (_jsx("nav", { "aria-label": ariaLabel, className: breadcrumbRecipe({ className }), ...rest, children: items.map((item, i) => {
             const last = i === items.length - 1;
             const content = (_jsxs(_Fragment, { children: [item.icon, item.label] }));
-            return (_jsxs(React.Fragment, { children: [last ? (_jsx("span", { className: "crisp-breadcrumb-item", "aria-current": "page", children: content })) : item.href ? (_jsx("a", { className: "crisp-breadcrumb-item", href: item.href, children: content })) : (_jsx("button", { type: "button", className: "crisp-breadcrumb-item", onClick: item.onClick, children: content })), !last && _jsx("span", { className: "crisp-breadcrumb-sep", children: sep })] }, i));
+            return (_jsxs(React.Fragment, { children: [last ? (_jsx("span", { className: "crisp-breadcrumb-item", "aria-current": "page", children: content })) : item.href ? (_jsx("a", { className: "crisp-breadcrumb-item", href: item.href, onClick: item.onClick, children: content })) : (_jsx("button", { type: "button", className: "crisp-breadcrumb-item", onClick: item.onClick, children: content })), !last && _jsx("span", { className: "crisp-breadcrumb-sep", children: sep })] }, i));
         }) }));
 }
 Breadcrumb.displayName = "Breadcrumb";