@crisp-ui-kit/crisp 0.31.6 → 0.32.1

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

@@ -21,11 +21,11 @@ const config = defineRecipe({
     position: relative; box-sizing: border-box; width: 100%; min-width: 0;
     font-family: ${c.font.sans}; color: ${c.fgPrimary}; background: ${c.bgSurface};
 
-    & .datepicker-header {
+    & .crisp-datepicker-header {
       display: flex; align-items: center; justify-content: space-between;
       height: ${c.size.menuRow};
     }
-    & .datepicker-header-label {
+    & .crisp-datepicker-header-label {
       display: inline-flex; align-items: center; gap: ${c.space["1"]};
       height: 100%; min-width: 0; border: 0; padding: 0 ${c.space["1"]};
       border-radius: ${c.radius.md}; background: transparent; cursor: pointer;
@@ -35,12 +35,12 @@ const config = defineRecipe({
       outline: 2px solid transparent; outline-offset: -2px;
       transition: outline-color .2s ease;
     }
-    & .datepicker-header-label:focus-visible { outline-color: ${c.strokeFocusRing}; }
-    & .datepicker-header-chevron { display: inline-flex; transition: transform .2s ease; }
-    & .datepicker-header-chevron[data-open] { transform: rotate(180deg); }
+    & .crisp-datepicker-header-label:focus-visible { outline-color: ${c.strokeFocusRing}; }
+    & .crisp-datepicker-header-chevron { display: inline-flex; transition: transform .2s ease; }
+    & .crisp-datepicker-header-chevron[data-open] { transform: rotate(180deg); }
 
-    & .datepicker-nav { display: flex; align-items: center; }
-    & .datepicker-nav-button {
+    & .crisp-datepicker-nav { display: flex; align-items: center; }
+    & .crisp-datepicker-nav-button {
       display: inline-flex; align-items: center; justify-content: center;
       width: ${c.size.menuRow}; height: ${c.size.menuRow}; padding: 0;
       border: none; border-radius: ${c.radius.md}; background: none;
@@ -48,37 +48,37 @@ const config = defineRecipe({
       outline: 2px solid transparent; outline-offset: -2px;
       transition: background-color .12s, outline-color .2s ease;
     }
-    & .datepicker-nav-button:hover { background: ${c.bgRaised}; }
-    & .datepicker-nav-button:focus-visible { outline-color: ${c.strokeFocusRing}; }
-    & .datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
+    & .crisp-datepicker-nav-button:hover { background: ${c.bgRaised}; }
+    & .crisp-datepicker-nav-button:focus-visible { outline-color: ${c.strokeFocusRing}; }
+    & .crisp-datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
 
-    & .datepicker-weekday-row {
+    & .crisp-datepicker-weekday-row {
       display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
       position: relative; z-index: 2; background: ${c.bgSurface};
     }
-    & .datepicker-weekday {
+    & .crisp-datepicker-weekday {
       display: flex; align-items: center; justify-content: center;
       height: ${c.size.calendarCell}; color: ${c.fgNeutralSubtle};
       font-size: ${c.text.sm}; line-height: 16px; font-weight: ${c.weight.medium};
     }
 
-    & .datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
-    & .datepicker-months[data-wheel-open] { visibility: hidden; }
-    & .datepicker-month { min-width: 0; }
-    & .datepicker-month-label {
+    & .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: ${c.fgPrimary}; font-size: ${c.text.lg}; line-height: 20px;
       font-weight: ${c.weight.medium};
     }
 
-    & .datepicker-grid { display: grid; min-width: 0; }
-    & .datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    & .crisp-datepicker-grid { display: grid; min-width: 0; }
+    & .crisp-datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
 
-    & .datepicker-cell {
+    & .crisp-datepicker-cell {
       position: relative; min-width: 0; min-height: ${c.size.calendarCell};
       isolation: isolate;
     }
-    & .datepicker-empty-cell { min-height: ${c.size.calendarCell}; }
+    & .crisp-datepicker-empty-cell { min-height: ${c.size.calendarCell}; }
 
     /* The bridge joining days inside a completed range.
        The endpoints do NOT carry data-in-range -- only the interior days do --
@@ -87,22 +87,22 @@ const config = defineRecipe({
        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. */
-    & .datepicker-cell[data-range-complete][data-in-range]::before {
+    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before {
       content: ""; position: absolute; z-index: -1; inset-inline: 0;
       top: ${pillInset}; height: ${c.size.calendarPill}; background: ${c.bgNeutralWeak};
     }
-    & .datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
+    & .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: ${pillInset}; height: ${c.size.calendarPill}; background: ${c.bgNeutralWeak};
     }
-    & .datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
+    & .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: ${pillInset}; height: ${c.size.calendarPill}; background: ${c.bgNeutralWeak};
     }
 
-    & .datepicker-date {
+    & .crisp-datepicker-date {
       position: relative; display: flex; width: 100%; height: 100%;
       min-height: ${c.size.calendarCell}; min-width: 0;
       align-items: flex-start; justify-content: center;
@@ -111,27 +111,27 @@ const config = defineRecipe({
       isolation: isolate;
     }
     /* the round day highlight, behind the numeral */
-    & .datepicker-date::before {
+    & .crisp-datepicker-date::before {
       content: ""; position: absolute; z-index: -1; top: ${pillInset}; left: 50%;
       width: ${c.size.calendarPill}; height: ${c.size.calendarPill};
       border-radius: ${c.radius.md};
       background: transparent; transform: translateX(-50%);
     }
-    & .datepicker-date[data-today]::before { background: ${c.bgNeutralWeak}; }
-    & .datepicker-date[data-selected]::before { background: ${c.bgBrandSolid}; }
-    & .datepicker-date[data-selected] { color: ${c.fgOnBrand}; }
-    & .datepicker-date[data-in-range] { color: ${c.fgPrimary}; }
-    & .datepicker-date[data-in-range]::before { background: transparent; }
-    & .datepicker-date[data-unavailable] { color: ${c.fgDisabled}; }
-    & .datepicker-date:disabled { color: ${c.fgDisabled}; cursor: not-allowed; }
-    & .datepicker-date:focus-visible::after {
+    & .crisp-datepicker-date[data-today]::before { background: ${c.bgNeutralWeak}; }
+    & .crisp-datepicker-date[data-selected]::before { background: ${c.bgBrandSolid}; }
+    & .crisp-datepicker-date[data-selected] { color: ${c.fgOnBrand}; }
+    & .crisp-datepicker-date[data-in-range] { color: ${c.fgPrimary}; }
+    & .crisp-datepicker-date[data-in-range]::before { background: transparent; }
+    & .crisp-datepicker-date[data-unavailable] { color: ${c.fgDisabled}; }
+    & .crisp-datepicker-date:disabled { color: ${c.fgDisabled}; cursor: not-allowed; }
+    & .crisp-datepicker-date:focus-visible::after {
       content: ""; position: absolute; top: ${pillInset}; left: 50%;
       width: ${c.size.calendarPill}; height: ${c.size.calendarPill};
       transform: translateX(-50%); border-radius: ${c.radius.md};
       outline: 2px solid ${c.strokeFocusRing}; outline-offset: -2px;
     }
 
-    & .datepicker-date-content {
+    & .crisp-datepicker-date-content {
       position: relative; z-index: 1; display: flex; width: 100%;
       min-height: ${c.size.calendarCell}; min-width: 0; box-sizing: border-box;
       flex-direction: column; align-items: center; gap: 3px;
@@ -143,29 +143,29 @@ const config = defineRecipe({
        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. */
-    & .datepicker-date-content > [data-date-picker-day] {
+    & .crisp-datepicker-date-content > [data-date-picker-day] {
       display: flex; min-height: ${c.size.calendarPill}; flex-shrink: 0;
       align-items: center; justify-content: center;
     }
 
     /* the year/month wheel, laid over the grid it replaces */
-    & .datepicker-wheel-container {
+    & .crisp-datepicker-wheel-container {
       position: absolute; z-index: 1; inset-inline: 0;
       top: ${c.size.menuRow}; bottom: 0;
       display: flex; align-items: center; overflow: hidden;
       background: ${c.bgSurface};
     }
-    & .datepicker-wheel { width: 100%; }
+    & .crisp-datepicker-wheel { width: 100%; }
 
-    & .datepicker-continuous-scroll {
+    & .crisp-datepicker-continuous-scroll {
       height: 100%; min-height: 0; overflow-y: auto;
       overscroll-behavior: contain; scrollbar-width: none;
     }
-    & .datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
-    & .datepicker-continuous-content { display: flex; flex-direction: column; }
+    & .crisp-datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
+    & .crisp-datepicker-continuous-content { display: flex; flex-direction: column; }
 
     /* announced, never drawn */
-    & .datepicker-live-region {
+    & .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;
     }
@@ -173,11 +173,11 @@ const config = defineRecipe({
     variants: {
         visibleRange: {
             month: ``,
-            twoMonths: `& .datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: ${c.space["6"]}; }
-        & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: ${c.size.menuRow}; }
-        & .datepicker-two-month-label { color: ${c.fgPrimary}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; }`,
+            twoMonths: `& .crisp-datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: ${c.space["6"]}; }
+        & .crisp-datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: ${c.size.menuRow}; }
+        & .crisp-datepicker-two-month-label { color: ${c.fgPrimary}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; }`,
             week: ``,
-            continuous: `& .datepicker-weekday-row { position: sticky; top: 0; }`,
+            continuous: `& .crisp-datepicker-weekday-row { position: sticky; top: 0; }`,
         },
     },
     defaultVariants: { visibleRange: "month" },

package/dist/esm/components/datepickerfield/datepickerfield.js

@@ -33,7 +33,7 @@ export function DatePickerField({ value, defaultValue, onValueChange, onChange,
         onChange?.(d);
         setOpen(false);
     };
-    return (_jsx("div", { className: datepickerfieldRecipe({ className }), ...rest, children: _jsx(Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: _jsxs("button", { type: "button", className: "datepickerfield-trigger", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", "aria-label": ariaLabel, children: [_jsx(CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: _jsxs("div", { className: "datepickerfield-panel", children: [_jsx(DatePicker
+    return (_jsx("div", { className: datepickerfieldRecipe({ className }), ...rest, children: _jsx(Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: _jsxs("button", { type: "button", className: "crisp-datepickerfield-trigger", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", "aria-label": ariaLabel, children: [_jsx(CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: _jsxs("div", { className: "crisp-datepickerfield-panel", children: [_jsx(DatePicker
                     // DatePickerProps is a union over selectionMode, and TypeScript
                     // cannot narrow it through a spread: it tries every branch and
                     // reports the range one as missing props. The field is always
@@ -46,6 +46,6 @@ export function DatePickerField({ value, defaultValue, onValueChange, onChange,
                                 if (next)
                                     pick(toDate(next));
                             },
-                        } }), presets && presets.length > 0 && (_jsx("div", { className: "datepickerfield-presets", children: presets.map((p, i) => (_jsx("button", { type: "button", className: "datepickerfield-preset", onClick: () => pick(p.date()), children: p.label }, typeof p.label === "string" ? p.label : i))) }))] }) }) }));
+                        } }), presets && presets.length > 0 && (_jsx("div", { className: "crisp-datepickerfield-presets", children: presets.map((p, i) => (_jsx("button", { type: "button", className: "crisp-datepickerfield-preset", onClick: () => pick(p.date()), children: p.label }, typeof p.label === "string" ? p.label : i))) }))] }) }) }));
 }
 DatePickerField.displayName = "DatePickerField";

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

@@ -9,7 +9,7 @@ const config = defineRecipe({
     base: `
     display: inline-flex; font-family: ${c.font.sans};
 
-    & .datepickerfield-trigger {
+    & .crisp-datepickerfield-trigger {
       display: inline-flex; align-items: center; gap: ${c.space["2"]};
       box-sizing: border-box; height: 32px; padding: 0 ${c.space["2.5"]}; margin: 0;
       border: none; border-radius: ${c.radius.md}; background: transparent;
@@ -17,19 +17,19 @@ const config = defineRecipe({
       color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg};
       white-space: nowrap; cursor: pointer;
     }
-    & .datepickerfield-trigger[data-ghost] { background: transparent; box-shadow: none; }
-    & .datepickerfield-trigger[data-ghost]:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
-    & .datepickerfield-trigger[data-placeholder] { color: ${c.fgMuted}; }
-    & .datepickerfield-trigger svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .crisp-datepickerfield-trigger[data-ghost] { background: transparent; box-shadow: none; }
+    & .crisp-datepickerfield-trigger[data-ghost]:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
+    & .crisp-datepickerfield-trigger[data-placeholder] { color: ${c.fgMuted}; }
+    & .crisp-datepickerfield-trigger svg { flex-shrink: 0; color: ${c.fgMuted}; }
 
-    & .datepickerfield-panel { padding: ${c.space["2"]}; width: 300px; }
-    & .datepickerfield-presets { display: flex; flex-wrap: wrap; gap: ${c.space["1"]}; margin-top: ${c.space["2"]}; }
-    & .datepickerfield-preset {
+    & .crisp-datepickerfield-panel { padding: ${c.space["2"]}; width: 300px; }
+    & .crisp-datepickerfield-presets { display: flex; flex-wrap: wrap; gap: ${c.space["1"]}; margin-top: ${c.space["2"]}; }
+    & .crisp-datepickerfield-preset {
       height: ${c.size.chip}; padding: 0 ${c.space["2"]}; border: none;
       border-radius: ${c.radius.chip}; background: ${c.bgRaised}; color: ${c.fgPrimary};
       font-family: inherit; font-size: ${c.text.sm}; cursor: pointer;
     }
-    & .datepickerfield-preset:hover { background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); }
+    & .crisp-datepickerfield-preset:hover { background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); }
   `,
     variants: {},
     defaultVariants: {},

package/dist/esm/components/dialog/dialog.js

@@ -32,21 +32,21 @@ export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-lab
         },
         // Focus the first form field on open (like the command palette focuses its
         // search), rather than the close button; fall back to the machine default.
-        initialFocusEl: () => document.querySelector(`[data-crisp-dialog="${id}"] .dialog-body :where(input, textarea, select, [contenteditable]):not([disabled])`),
+        initialFocusEl: () => document.querySelector(`[data-crisp-dialog="${id}"] .crisp-dialog-body :where(input, textarea, select, [contenteditable]):not([disabled])`),
         "aria-label": typeof title === "string" ? title : ariaLabel,
     });
     const api = dialog.connect(service, normalizeProps);
     if (!api.open)
         return null;
-    return (_jsx(Portal, { children: _jsxs("div", { className: dialogRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "dialog-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "dialog-positioner", children: _jsx("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: cx("dialog-content", className), "data-crisp-dialog": id, 
+    return (_jsx(Portal, { children: _jsxs("div", { className: dialogRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "crisp-dialog-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "crisp-dialog-positioner", children: _jsx("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: cx("crisp-dialog-content", className), "data-crisp-dialog": id, 
                         // `width` is the component's own knob, so it wins over a passed
                         // maxWidth; everything else a consumer sets survives
-                        style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: _jsxs("div", { className: "dialog-card", children: [title != null && (_jsxs("div", { className: "dialog-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "dialog-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "dialog-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
+                        style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: _jsxs("div", { className: "crisp-dialog-card", children: [title != null && (_jsxs("div", { className: "crisp-dialog-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "crisp-dialog-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-dialog-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
 }
 Dialog.displayName = "Dialog";
 export function DialogBody({ children, className, }) {
-    return (_jsx("div", { className: className ? `dialog-body ${className}` : "dialog-body", children: children }));
+    return (_jsx("div", { className: className ? `crisp-dialog-body ${className}` : "crisp-dialog-body", children: children }));
 }
 export function DialogFooter({ children }) {
-    return _jsx("div", { className: "dialog-footer", children: children });
+    return _jsx("div", { className: "crisp-dialog-footer", children: children });
 }

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

@@ -8,22 +8,22 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "dialog",
     base: `display: contents; font-family: ${c.font.sans};
-    & .dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
-    & .dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${c.space["4"]} ${c.space["4"]}; }
-    & .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: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${e.modal}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
-    & .dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden; }
-    & .dialog-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
-    & .dialog-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
-    & .dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
-    & .dialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; 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; }
-    & .dialog-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
-    & .dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: ${c.space["4"]}; padding: ${c.space["5"]} ${c.space["4"]}; }
-    & .dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${c.space["4"]}; border-top: 1px solid ${c.borderSubtle}; }
-    & .dialog-field { display: flex; flex-direction: column; gap: ${c.space["1.5"]}; }
-    & .dialog-field-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
-    & .dialog-more { display: inline-flex; align-items: center; gap: ${c.space["2"]}; margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgMuted}; cursor: pointer; }
-    & .dialog-submit { display: inline-flex; align-items: center; gap: ${c.space["2"]}; height: 28px; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
-    & .dialog-submit-key { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${c.text.xs}; }`,
+    & .crisp-dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
+    & .crisp-dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${c.space["4"]} ${c.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: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${e.modal}; 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: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden; }
+    & .crisp-dialog-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-dialog-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-dialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; 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-dialog-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    & .crisp-dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: ${c.space["4"]}; padding: ${c.space["5"]} ${c.space["4"]}; }
+    & .crisp-dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${c.space["4"]}; border-top: 1px solid ${c.borderSubtle}; }
+    & .crisp-dialog-field { display: flex; flex-direction: column; gap: ${c.space["1.5"]}; }
+    & .crisp-dialog-field-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
+    & .crisp-dialog-more { display: inline-flex; align-items: center; gap: ${c.space["2"]}; margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgMuted}; cursor: pointer; }
+    & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: ${c.space["2"]}; height: 28px; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
+    & .crisp-dialog-submit-key { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${c.text.xs}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/donutchart/donutchart.js

@@ -33,6 +33,6 @@ export function DonutChart({ data, size = 120, thickness = 14, centerValue, cent
     });
     const summary = ariaLabel ??
         `Donut chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
-    return (_jsxs("div", { className: donutchartRecipe({ className }), ...rest, role: "img", "aria-label": summary, children: [_jsxs("div", { className: "donutchart-ring", style: { width: size, height: size }, children: [_jsxs("svg", { className: "donutchart-svg", width: size, height: size, viewBox: "0 0 42 42", "aria-hidden": "true", children: [_jsx("circle", { className: "donutchart-track", cx: 21, cy: 21, r: R, strokeWidth: (thickness / size) * 42 }), slices.map((s) => (_jsx("circle", { className: "donutchart-seg", cx: 21, cy: 21, r: R, stroke: s.color, strokeWidth: (thickness / size) * 42, strokeDasharray: `${s.pct} ${100 - s.pct}`, strokeDashoffset: s.offset, children: _jsx("title", { children: `${s.label}: ${format(s.value)}` }) }, s.label)))] }), _jsxs("div", { className: "donutchart-center", children: [_jsx("span", { className: "donutchart-total", children: centerValue ?? format(total) }), centerCaption != null && (_jsx("span", { className: "donutchart-caption", children: centerCaption }))] })] }), legend && (_jsx("div", { className: "donutchart-legend", children: slices.map((s) => (_jsxs("span", { className: "donutchart-item", children: [_jsx("span", { className: "donutchart-swatch", style: { background: s.color } }), _jsx("span", { className: "donutchart-name", children: s.label }), _jsx("span", { className: "donutchart-val", children: format(s.value) })] }, s.label))) }))] }));
+    return (_jsxs("div", { className: donutchartRecipe({ className }), ...rest, role: "img", "aria-label": summary, children: [_jsxs("div", { className: "crisp-donutchart-ring", style: { width: size, height: size }, children: [_jsxs("svg", { className: "crisp-donutchart-svg", width: size, height: size, viewBox: "0 0 42 42", "aria-hidden": "true", children: [_jsx("circle", { className: "crisp-donutchart-track", cx: 21, cy: 21, r: R, strokeWidth: (thickness / size) * 42 }), slices.map((s) => (_jsx("circle", { className: "crisp-donutchart-seg", cx: 21, cy: 21, r: R, stroke: s.color, strokeWidth: (thickness / size) * 42, strokeDasharray: `${s.pct} ${100 - s.pct}`, strokeDashoffset: s.offset, children: _jsx("title", { children: `${s.label}: ${format(s.value)}` }) }, s.label)))] }), _jsxs("div", { className: "crisp-donutchart-center", children: [_jsx("span", { className: "crisp-donutchart-total", children: centerValue ?? format(total) }), centerCaption != null && (_jsx("span", { className: "crisp-donutchart-caption", children: centerCaption }))] })] }), legend && (_jsx("div", { className: "crisp-donutchart-legend", children: slices.map((s) => (_jsxs("span", { className: "crisp-donutchart-item", children: [_jsx("span", { className: "crisp-donutchart-swatch", style: { background: s.color } }), _jsx("span", { className: "crisp-donutchart-name", children: s.label }), _jsx("span", { className: "crisp-donutchart-val", children: format(s.value) })] }, s.label))) }))] }));
 }
 DonutChart.displayName = "DonutChart";

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

@@ -7,18 +7,18 @@ const config = defineRecipe({
     name: "donutchart",
     base: `display: inline-flex; align-items: center; gap: ${c.space["4"]}; box-sizing: border-box; font-family: ${c.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .donutchart-ring { position: relative; flex-shrink: 0; }
-    & .donutchart-svg { display: block; }
-    & .donutchart-seg { fill: none; transition: stroke-dasharray 0.3s ease; }
-    & .donutchart-track { fill: none; stroke: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
-    & .donutchart-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
-    & .donutchart-total { font-size: ${c.text.xl}; font-weight: ${c.weight.semibold}; letter-spacing: -0.3px; color: ${c.fgPrimary}; }
-    & .donutchart-caption { font-size: ${c.text.xs}; color: ${c.fgMuted}; }
-    & .donutchart-legend { display: flex; flex-direction: column; gap: ${c.space["1.5"]}; min-width: 0; }
-    & .donutchart-item { display: inline-flex; align-items: center; gap: ${c.space["2"]}; font-size: ${c.text.md}; color: ${c.fgPrimary}; }
-    & .donutchart-swatch { width: 10px; height: 10px; flex-shrink: 0; border-radius: 3px; }
-    & .donutchart-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: ${c.fgMuted}; }
-    & .donutchart-val { flex-shrink: 0; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }`,
+    & .crisp-donutchart-ring { position: relative; flex-shrink: 0; }
+    & .crisp-donutchart-svg { display: block; }
+    & .crisp-donutchart-seg { fill: none; transition: stroke-dasharray 0.3s ease; }
+    & .crisp-donutchart-track { fill: none; stroke: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
+    & .crisp-donutchart-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
+    & .crisp-donutchart-total { font-size: ${c.text.xl}; font-weight: ${c.weight.semibold}; letter-spacing: -0.3px; color: ${c.fgPrimary}; }
+    & .crisp-donutchart-caption { font-size: ${c.text.xs}; color: ${c.fgMuted}; }
+    & .crisp-donutchart-legend { display: flex; flex-direction: column; gap: ${c.space["1.5"]}; min-width: 0; }
+    & .crisp-donutchart-item { display: inline-flex; align-items: center; gap: ${c.space["2"]}; font-size: ${c.text.md}; color: ${c.fgPrimary}; }
+    & .crisp-donutchart-swatch { width: 10px; height: 10px; flex-shrink: 0; border-radius: 3px; }
+    & .crisp-donutchart-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: ${c.fgMuted}; }
+    & .crisp-donutchart-val { flex-shrink: 0; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/drawer/drawer.js

@@ -32,12 +32,12 @@ export function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-
     const api = dialog.connect(service, normalizeProps);
     if (!api.open)
         return null;
-    return (_jsx(Portal, { children: _jsxs("div", { className: drawerRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "drawer-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "drawer-positioner", "data-side": side, children: _jsxs("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: cx("drawer-content", className), children: [title != null && (_jsxs("div", { className: "drawer-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "drawer-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "drawer-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) })] }) }));
+    return (_jsx(Portal, { children: _jsxs("div", { className: drawerRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "crisp-drawer-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "crisp-drawer-positioner", "data-side": side, children: _jsxs("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: cx("crisp-drawer-content", className), children: [title != null && (_jsxs("div", { className: "crisp-drawer-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "crisp-drawer-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-drawer-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) })] }) }));
 }
 Drawer.displayName = "Drawer";
 export function DrawerBody({ children }) {
-    return _jsx("div", { className: "drawer-body", children: children });
+    return _jsx("div", { className: "crisp-drawer-body", children: children });
 }
 export function DrawerFooter({ children }) {
-    return _jsx("div", { className: "drawer-footer", children: children });
+    return _jsx("div", { className: "crisp-drawer-footer", children: children });
 }

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

@@ -5,20 +5,20 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "drawer",
     base: `display: contents; font-family: ${c.font.sans};
-    & .drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, ${c.fgPrimary} 18%, transparent); opacity: 1; transition: opacity 0.2s ease; @starting-style { opacity: 0; } }
-    & .drawer-positioner { position: fixed; inset: 0; z-index: 61; display: flex; box-sizing: border-box; padding: ${c.space["2"]}; }
-    & .drawer-positioner[data-side="right"] { justify-content: flex-end; }
-    & .drawer-positioner[data-side="left"] { justify-content: flex-start; }
-    & .drawer-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; width: 420px; max-width: 100%; height: 100%; background: ${c.bgSurface}; border-radius: ${c.radius.xl}; box-shadow: ${e.floating}; transform: none; transition: transform 0.24s cubic-bezier(.32,.72,0,1); }
-    & .drawer-positioner[data-side="right"] .drawer-content { @starting-style { transform: translateX(calc(100% + ${c.space["2"]})); } }
-    & .drawer-positioner[data-side="left"] .drawer-content { @starting-style { transform: translateX(calc(-100% - ${c.space["2"]})); } }
-    & .drawer-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
-    & .drawer-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
-    & .drawer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
-    & .drawer-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; 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; }
-    & .drawer-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
-    & .drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["4"]}; }
-    & .drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${c.space["4"]}; border-top: 1px solid ${c.borderSubtle}; }`,
+    & .crisp-drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, ${c.fgPrimary} 18%, transparent); opacity: 1; transition: opacity 0.2s ease; @starting-style { opacity: 0; } }
+    & .crisp-drawer-positioner { position: fixed; inset: 0; z-index: 61; display: flex; box-sizing: border-box; padding: ${c.space["2"]}; }
+    & .crisp-drawer-positioner[data-side="right"] { justify-content: flex-end; }
+    & .crisp-drawer-positioner[data-side="left"] { justify-content: flex-start; }
+    & .crisp-drawer-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; width: 420px; max-width: 100%; height: 100%; background: ${c.bgSurface}; border-radius: ${c.radius.xl}; box-shadow: ${e.floating}; transform: none; transition: transform 0.24s cubic-bezier(.32,.72,0,1); }
+    & .crisp-drawer-positioner[data-side="right"] .crisp-drawer-content { @starting-style { transform: translateX(calc(100% + ${c.space["2"]})); } }
+    & .crisp-drawer-positioner[data-side="left"] .crisp-drawer-content { @starting-style { transform: translateX(calc(-100% - ${c.space["2"]})); } }
+    & .crisp-drawer-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-drawer-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .crisp-drawer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    & .crisp-drawer-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; 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-drawer-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    & .crisp-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["4"]}; }
+    & .crisp-drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${c.space["4"]}; border-top: 1px solid ${c.borderSubtle}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/emptystate/emptystate.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { emptystateRecipe } from "./emptystate.recipe.js";
 /** A centred empty-state panel — icon, title, description, optional action. */
 export function EmptyState({ icon, title, description, action, variant, className, ...rest }) {
-    return (_jsxs("div", { className: emptystateRecipe({ variant, className }), ...rest, children: [icon && _jsx("span", { className: "emptystate-icon", children: icon }), _jsx("div", { className: "emptystate-title", children: title }), description != null && (_jsx("div", { className: "emptystate-desc", children: description })), action && _jsx("div", { className: "emptystate-action", children: action })] }));
+    return (_jsxs("div", { className: emptystateRecipe({ variant, className }), ...rest, children: [icon && _jsx("span", { className: "crisp-emptystate-icon", children: icon }), _jsx("div", { className: "crisp-emptystate-title", children: title }), description != null && (_jsx("div", { className: "crisp-emptystate-desc", children: description })), action && _jsx("div", { className: "crisp-emptystate-action", children: action })] }));
 }
 EmptyState.displayName = "EmptyState";

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

@@ -4,24 +4,24 @@ import { contract as c } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "emptystate",
     base: `display: flex; flex-direction: column; align-items: center; justify-content: center; gap: ${c.space["1.5"]}; box-sizing: border-box; padding: ${c.space["8"]} ${c.space["4"]}; text-align: center; font-family: ${c.font.sans};
-    & .emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: color-mix(in srgb, ${c.fgPrimary} 5%, transparent); color: ${c.fgMuted}; }
-    & .emptystate-title { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
-    & .emptystate-desc { max-width: 320px; font-size: ${c.text.md}; color: ${c.fgMuted}; }
-    & .emptystate-action { margin-top: ${c.space["2"]}; }`,
+    & .crisp-emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: color-mix(in srgb, ${c.fgPrimary} 5%, transparent); color: ${c.fgMuted}; }
+    & .crisp-emptystate-title { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    & .crisp-emptystate-desc { max-width: 320px; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .crisp-emptystate-action { margin-top: ${c.space["2"]}; }`,
     variants: {
         variant: {
             // compact icon tile (default)
             default: ``,
             // a large icon on a dotted-grid backdrop — a Developers/Reports empty state
-            illustrated: `& .emptystate-icon { width: 132px; height: 96px; margin-bottom: ${c.space["2"]}; border-radius: 0; color: color-mix(in srgb, ${c.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${c.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }`,
+            illustrated: `& .crisp-emptystate-icon { width: 132px; height: 96px; margin-bottom: ${c.space["2"]}; border-radius: 0; color: color-mix(in srgb, ${c.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${c.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }`,
             // A full-view empty state (measured from a filtered-to-zero records table):
             // a 45px ringed circle icon, a 20/24 semibold heading, a 14/20 medium muted body,
             // then a primary action. Gaps are 16 / 8 / 16 (icon→title→desc→action).
             page: `gap: ${c.space["2"]};
-    & .emptystate-icon { width: 45px; height: 45px; margin-bottom: ${c.space["2"]}; border-radius: ${c.radius.full}; border: 1px solid ${c.borderSubtle}; background: none; color: ${c.fgMuted}; }
-    & .emptystate-title { font-size: 20px; line-height: 24px; }
-    & .emptystate-desc { max-width: 266px; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; }
-    & .emptystate-action { margin-top: ${c.space["2"]}; }`,
+    & .crisp-emptystate-icon { width: 45px; height: 45px; margin-bottom: ${c.space["2"]}; border-radius: ${c.radius.full}; border: 1px solid ${c.borderSubtle}; background: none; color: ${c.fgMuted}; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-desc { max-width: 266px; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; }
+    & .crisp-emptystate-action { margin-top: ${c.space["2"]}; }`,
         },
     },
     defaultVariants: { variant: "default" },

package/dist/esm/components/fileupload/fileupload.js

@@ -86,9 +86,9 @@ export function FileUpload({ className, labels, "aria-label": ariaLabel, accept,
     // file goes, and a container that disappears with the item cannot say where
     // focus should land next.
     const rootRef = React.useRef(null);
-    const focusAfterRemoval = useFocusAfterRemoval(rootRef, ".fileupload-remove", dropzoneRef);
-    return (_jsxs("div", { ref: rootRef, ...rest, className: fileuploadRecipe({ className }), children: [_jsxs("button", { ...dropzoneProps, ref: dropzoneRef, type: "button", className: "fileupload-zone", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel ?? t.hint, disabled: disabled, "data-dragging": dragging ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": invalid ? "" : undefined, onClick: () => openFilePicker(), children: [_jsx("span", { className: "fileupload-title", children: t.title }), _jsx("span", { className: "fileupload-hint", children: t.hint })] }), _jsx("input", { ...hiddenInputProps, ref: inputRef, className: "fileupload-input" }), acceptedFileEntries.length > 0 && (_jsx("ul", { className: "fileupload-list", children: acceptedFileEntries.map((entry, i) => (_jsxs("li", { className: "fileupload-item", "data-status": entry.status, children: [_jsx("span", { className: "fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && (_jsx("span", { className: "fileupload-progress", role: "progressbar", "aria-valuenow": Math.round(entry.progress), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": entry.file.name, children: _jsx("span", { className: "fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), _jsx("span", { className: "fileupload-item-size", children: formatSize(entry.file.size) }), _jsx("button", { type: "button", className: "fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => {
+    const focusAfterRemoval = useFocusAfterRemoval(rootRef, ".crisp-fileupload-remove", dropzoneRef);
+    return (_jsxs("div", { ref: rootRef, ...rest, className: fileuploadRecipe({ className }), children: [_jsxs("button", { ...dropzoneProps, ref: dropzoneRef, type: "button", className: "crisp-fileupload-zone", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel ?? t.hint, disabled: disabled, "data-dragging": dragging ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": invalid ? "" : undefined, onClick: () => openFilePicker(), children: [_jsx("span", { className: "crisp-fileupload-title", children: t.title }), _jsx("span", { className: "crisp-fileupload-hint", children: t.hint })] }), _jsx("input", { ...hiddenInputProps, ref: inputRef, className: "crisp-fileupload-input" }), acceptedFileEntries.length > 0 && (_jsx("ul", { className: "crisp-fileupload-list", children: acceptedFileEntries.map((entry, i) => (_jsxs("li", { className: "crisp-fileupload-item", "data-status": entry.status, children: [_jsx("span", { className: "crisp-fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && (_jsx("span", { className: "crisp-fileupload-progress", role: "progressbar", "aria-valuenow": Math.round(entry.progress), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": entry.file.name, children: _jsx("span", { className: "crisp-fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), _jsx("span", { className: "crisp-fileupload-item-size", children: formatSize(entry.file.size) }), _jsx("button", { type: "button", className: "crisp-fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => {
                                 focusAfterRemoval(i);
                                 removeFileEntry(entry.id);
-                            }, children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }, entry.id))) })), _jsx("ul", { className: "fileupload-errors", "aria-live": "polite", children: rejections.map((r) => (_jsx("li", { className: "fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) })] }));
+                            }, children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }, entry.id))) })), _jsx("ul", { className: "crisp-fileupload-errors", "aria-live": "polite", children: rejections.map((r) => (_jsx("li", { className: "crisp-fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) })] }));
 }