@crisp-ui-kit/crisp 0.31.5 → 0.32.0

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

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

package/dist/cjs/components/donutchart/donutchart.js

@@ -36,6 +36,6 @@ function DonutChart({ data, size = 120, thickness = 14, centerValue, centerCapti
     });
     const summary = ariaLabel ??
         `Donut chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, donutchart_recipe_1.donutchartRecipe)({ className }), ...rest, role: "img", "aria-label": summary, children: [(0, jsx_runtime_1.jsxs)("div", { className: "donutchart-ring", style: { width: size, height: size }, children: [(0, jsx_runtime_1.jsxs)("svg", { className: "donutchart-svg", width: size, height: size, viewBox: "0 0 42 42", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { className: "donutchart-track", cx: 21, cy: 21, r: R, strokeWidth: (thickness / size) * 42 }), slices.map((s) => ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("title", { children: `${s.label}: ${format(s.value)}` }) }, s.label)))] }), (0, jsx_runtime_1.jsxs)("div", { className: "donutchart-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "donutchart-total", children: centerValue ?? format(total) }), centerCaption != null && ((0, jsx_runtime_1.jsx)("span", { className: "donutchart-caption", children: centerCaption }))] })] }), legend && ((0, jsx_runtime_1.jsx)("div", { className: "donutchart-legend", children: slices.map((s) => ((0, jsx_runtime_1.jsxs)("span", { className: "donutchart-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "donutchart-swatch", style: { background: s.color } }), (0, jsx_runtime_1.jsx)("span", { className: "donutchart-name", children: s.label }), (0, jsx_runtime_1.jsx)("span", { className: "donutchart-val", children: format(s.value) })] }, s.label))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, donutchart_recipe_1.donutchartRecipe)({ className }), ...rest, role: "img", "aria-label": summary, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-donutchart-ring", style: { width: size, height: size }, children: [(0, jsx_runtime_1.jsxs)("svg", { className: "crisp-donutchart-svg", width: size, height: size, viewBox: "0 0 42 42", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { className: "crisp-donutchart-track", cx: 21, cy: 21, r: R, strokeWidth: (thickness / size) * 42 }), slices.map((s) => ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("title", { children: `${s.label}: ${format(s.value)}` }) }, s.label)))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-donutchart-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-donutchart-total", children: centerValue ?? format(total) }), centerCaption != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-donutchart-caption", children: centerCaption }))] })] }), legend && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-donutchart-legend", children: slices.map((s) => ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-donutchart-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-donutchart-swatch", style: { background: s.color } }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-donutchart-name", children: s.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-donutchart-val", children: format(s.value) })] }, s.label))) }))] }));
 }
 DonutChart.displayName = "DonutChart";

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

@@ -10,18 +10,18 @@ const config = (0, core_1.defineRecipe)({
     name: "donutchart",
     base: `display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["4"]}; box-sizing: border-box; font-family: ${tokens_1.contract.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, ${tokens_1.contract.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: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.3px; color: ${tokens_1.contract.fgPrimary}; }
-    & .donutchart-caption { font-size: ${tokens_1.contract.text.xs}; color: ${tokens_1.contract.fgMuted}; }
-    & .donutchart-legend { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
-    & .donutchart-item { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.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: ${tokens_1.contract.fgMuted}; }
-    & .donutchart-val { flex-shrink: 0; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.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, ${tokens_1.contract.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: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.3px; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-donutchart-caption { font-size: ${tokens_1.contract.text.xs}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-donutchart-legend { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
+    & .crisp-donutchart-item { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.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: ${tokens_1.contract.fgMuted}; }
+    & .crisp-donutchart-val { flex-shrink: 0; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/components/drawer/drawer.js

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

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

@@ -8,20 +8,20 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "drawer",
     base: `display: contents; font-family: ${tokens_1.contract.font.sans};
-    & .drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, ${tokens_1.contract.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: ${tokens_1.contract.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: ${tokens_1.contract.bgSurface}; border-radius: ${tokens_1.contract.radius.xl}; box-shadow: ${tokens_1.elevation.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% + ${tokens_1.contract.space["2"]})); } }
-    & .drawer-positioner[data-side="left"] .drawer-content { @starting-style { transform: translateX(calc(-100% - ${tokens_1.contract.space["2"]})); } }
-    & .drawer-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["4"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
-    & .drawer-header svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
-    & .drawer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.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: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
-    & .drawer-close:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }
-    & .drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["4"]}; }
-    & .drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${tokens_1.contract.space["4"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }`,
+    & .crisp-drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, ${tokens_1.contract.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: ${tokens_1.contract.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: ${tokens_1.contract.bgSurface}; border-radius: ${tokens_1.contract.radius.xl}; box-shadow: ${tokens_1.elevation.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% + ${tokens_1.contract.space["2"]})); } }
+    & .crisp-drawer-positioner[data-side="left"] .crisp-drawer-content { @starting-style { transform: translateX(calc(-100% - ${tokens_1.contract.space["2"]})); } }
+    & .crisp-drawer-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["4"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-drawer-header svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-drawer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.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: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .crisp-drawer-close:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["4"]}; }
+    & .crisp-drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${tokens_1.contract.space["4"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/components/emptystate/emptystate.js

@@ -5,6 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const emptystate_recipe_1 = require("./emptystate.recipe");
 /** A centred empty-state panel — icon, title, description, optional action. */
 function EmptyState({ icon, title, description, action, variant, className, ...rest }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, emptystate_recipe_1.emptystateRecipe)({ variant, className }), ...rest, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "emptystate-icon", children: icon }), (0, jsx_runtime_1.jsx)("div", { className: "emptystate-title", children: title }), description != null && ((0, jsx_runtime_1.jsx)("div", { className: "emptystate-desc", children: description })), action && (0, jsx_runtime_1.jsx)("div", { className: "emptystate-action", children: action })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, emptystate_recipe_1.emptystateRecipe)({ variant, className }), ...rest, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "crisp-emptystate-icon", children: icon }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-emptystate-title", children: title }), description != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-emptystate-desc", children: description })), action && (0, jsx_runtime_1.jsx)("div", { className: "crisp-emptystate-action", children: action })] }));
 }
 EmptyState.displayName = "EmptyState";

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

@@ -7,24 +7,24 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "emptystate",
     base: `display: flex; flex-direction: column; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1.5"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["4"]}; text-align: center; font-family: ${tokens_1.contract.font.sans};
-    & .emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.xl}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); color: ${tokens_1.contract.fgMuted}; }
-    & .emptystate-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
-    & .emptystate-desc { max-width: 320px; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
-    & .emptystate-action { margin-top: ${tokens_1.contract.space["2"]}; }`,
+    & .crisp-emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.xl}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-emptystate-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-emptystate-desc { max-width: 320px; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-emptystate-action { margin-top: ${tokens_1.contract.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: ${tokens_1.contract.space["2"]}; border-radius: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${tokens_1.contract.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }`,
+            illustrated: `& .crisp-emptystate-icon { width: 132px; height: 96px; margin-bottom: ${tokens_1.contract.space["2"]}; border-radius: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${tokens_1.contract.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: ${tokens_1.contract.space["2"]};
-    & .emptystate-icon { width: 45px; height: 45px; margin-bottom: ${tokens_1.contract.space["2"]}; border-radius: ${tokens_1.contract.radius.full}; border: 1px solid ${tokens_1.contract.borderSubtle}; background: none; color: ${tokens_1.contract.fgMuted}; }
-    & .emptystate-title { font-size: 20px; line-height: 24px; }
-    & .emptystate-desc { max-width: 266px; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; line-height: 20px; }
-    & .emptystate-action { margin-top: ${tokens_1.contract.space["2"]}; }`,
+    & .crisp-emptystate-icon { width: 45px; height: 45px; margin-bottom: ${tokens_1.contract.space["2"]}; border-radius: ${tokens_1.contract.radius.full}; border: 1px solid ${tokens_1.contract.borderSubtle}; background: none; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-desc { max-width: 266px; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; line-height: 20px; }
+    & .crisp-emptystate-action { margin-top: ${tokens_1.contract.space["2"]}; }`,
         },
     },
     defaultVariants: { variant: "default" },

package/dist/cjs/components/fileupload/fileupload.js

@@ -123,9 +123,9 @@ function FileUpload({ className, labels, "aria-label": ariaLabel, accept, disabl
     // file goes, and a container that disappears with the item cannot say where
     // focus should land next.
     const rootRef = React.useRef(null);
-    const focusAfterRemoval = (0, core_1.useFocusAfterRemoval)(rootRef, ".fileupload-remove", dropzoneRef);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, ...rest, className: (0, fileupload_recipe_1.fileuploadRecipe)({ className }), children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "fileupload-title", children: t.title }), (0, jsx_runtime_1.jsx)("span", { className: "fileupload-hint", children: t.hint })] }), (0, jsx_runtime_1.jsx)("input", { ...hiddenInputProps, ref: inputRef, className: "fileupload-input" }), acceptedFileEntries.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "fileupload-list", children: acceptedFileEntries.map((entry, i) => ((0, jsx_runtime_1.jsxs)("li", { className: "fileupload-item", "data-status": entry.status, children: [(0, jsx_runtime_1.jsx)("span", { className: "fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("span", { className: "fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), (0, jsx_runtime_1.jsx)("span", { className: "fileupload-item-size", children: formatSize(entry.file.size) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => {
+    const focusAfterRemoval = (0, core_1.useFocusAfterRemoval)(rootRef, ".crisp-fileupload-remove", dropzoneRef);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, ...rest, className: (0, fileupload_recipe_1.fileuploadRecipe)({ className }), children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-title", children: t.title }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-hint", children: t.hint })] }), (0, jsx_runtime_1.jsx)("input", { ...hiddenInputProps, ref: inputRef, className: "crisp-fileupload-input" }), acceptedFileEntries.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "crisp-fileupload-list", children: acceptedFileEntries.map((entry, i) => ((0, jsx_runtime_1.jsxs)("li", { className: "crisp-fileupload-item", "data-status": entry.status, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-item-size", children: formatSize(entry.file.size) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => {
                                 focusAfterRemoval(i);
                                 removeFileEntry(entry.id);
-                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }, entry.id))) })), (0, jsx_runtime_1.jsx)("ul", { className: "fileupload-errors", "aria-live": "polite", children: rejections.map((r) => ((0, jsx_runtime_1.jsx)("li", { className: "fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) })] }));
+                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }, entry.id))) })), (0, jsx_runtime_1.jsx)("ul", { className: "crisp-fileupload-errors", "aria-live": "polite", children: rejections.map((r) => ((0, jsx_runtime_1.jsx)("li", { className: "crisp-fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) })] }));
 }

package/dist/cjs/components/fileupload/fileupload.recipe.js

@@ -23,7 +23,7 @@ const config = (0, core_1.defineRecipe)({
     display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]};
     font-family: ${tokens_1.contract.font.sans}; min-width: 0;
 
-    & .fileupload-zone {
+    & .crisp-fileupload-zone {
       box-sizing: border-box; position: relative;
       display: flex; flex-direction: column; align-items: center;
       justify-content: center; gap: ${tokens_1.contract.space["1"]};
@@ -34,53 +34,53 @@ const config = (0, core_1.defineRecipe)({
       transition: background-color .12s, border-color .12s;
       outline: 2px solid transparent; outline-offset: -2px;
     }
-    & .fileupload-zone:hover { background: ${tokens_1.contract.bgRaised}; }
-    & .fileupload-zone:focus-visible { outline-color: ${tokens_1.contract.strokeFocusRing}; }
-    & .fileupload-zone[data-dragging] {
+    & .crisp-fileupload-zone:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-fileupload-zone:focus-visible { outline-color: ${tokens_1.contract.strokeFocusRing}; }
+    & .crisp-fileupload-zone[data-dragging] {
       border-color: ${tokens_1.contract.bgBrandSolid};
       background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 6%, transparent);
     }
-    & .fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
-    & .fileupload-zone[data-invalid] { border-color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
+    & .crisp-fileupload-zone[data-invalid] { border-color: ${tokens_1.contract.bgDanger}; }
 
     /* "No files" 16/20 weight 600 */
-    & .fileupload-title {
+    & .crisp-fileupload-title {
       color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.xl}; line-height: 20px;
       font-weight: ${tokens_1.contract.weight.semibold};
     }
     /* The hint line, 14/20 weight 500 at 63% of the foreground */
-    & .fileupload-hint {
+    & .crisp-fileupload-hint {
       color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent);
       font-size: ${tokens_1.contract.text.lg}; line-height: 20px;
       font-weight: ${tokens_1.contract.weight.medium};
     }
 
-    & .fileupload-input {
+    & .crisp-fileupload-input {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
       overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
     }
 
-    & .fileupload-list { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1"]}; margin: 0; padding: 0; list-style: none; }
+    & .crisp-fileupload-list { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1"]}; margin: 0; padding: 0; list-style: none; }
     /* the row height crisp measured for a data-grid row */
-    & .fileupload-item {
+    & .crisp-fileupload-item {
       display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]};
       min-height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]};
       border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgRaised};
       font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgPrimary};
     }
-    & .fileupload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .fileupload-item-size { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.sm}; font-variant-numeric: tabular-nums; }
-    & .fileupload-item[data-status="error"] { color: ${tokens_1.contract.bgDanger}; }
-    & .fileupload-item[data-status="error"] .fileupload-item-size { color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-fileupload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-fileupload-item-size { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.sm}; font-variant-numeric: tabular-nums; }
+    & .crisp-fileupload-item[data-status="error"] { color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-fileupload-item[data-status="error"] .crisp-fileupload-item-size { color: ${tokens_1.contract.bgDanger}; }
 
     /* progress track, reusing the measured Progress geometry */
-    & .fileupload-progress {
+    & .crisp-fileupload-progress {
       flex-shrink: 0; width: 64px; height: 4px; border-radius: ${tokens_1.contract.radius.full};
       background: ${tokens_1.contract.bgNeutralWeak}; overflow: hidden;
     }
-    & .fileupload-progress-fill { height: 100%; background: ${tokens_1.contract.bgBrandSolid}; transition: width .2s ease; }
+    & .crisp-fileupload-progress-fill { height: 100%; background: ${tokens_1.contract.bgBrandSolid}; transition: width .2s ease; }
 
-    & .fileupload-remove {
+    & .crisp-fileupload-remove {
       display: inline-flex; align-items: center; justify-content: center;
       flex-shrink: 0; width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon};
       padding: 0; border: none; border-radius: ${tokens_1.contract.radius.sm};
@@ -88,15 +88,15 @@ const config = (0, core_1.defineRecipe)({
       font-family: inherit;
       outline: 2px solid transparent; outline-offset: -2px;
     }
-    & .fileupload-remove:hover { color: ${tokens_1.contract.fgPrimary}; }
-    & .fileupload-remove:focus-visible { outline-color: ${tokens_1.contract.strokeFocusRing}; }
+    & .crisp-fileupload-remove:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-fileupload-remove:focus-visible { outline-color: ${tokens_1.contract.strokeFocusRing}; }
 
-    & .fileupload-errors { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["0.5"]}; margin: 0; padding: 0; list-style: none; }
+    & .crisp-fileupload-errors { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["0.5"]}; margin: 0; padding: 0; list-style: none; }
     /* out of flow while empty, so the always-mounted live region costs no
        layout: display:none would take it out of the accessibility tree, which
        is the one thing it exists to be in */
-    & .fileupload-errors:empty { position: absolute; }
-    & .fileupload-error { color: ${tokens_1.contract.bgDanger}; font-size: ${tokens_1.contract.text.md}; line-height: 18px; }
+    & .crisp-fileupload-errors:empty { position: absolute; }
+    & .crisp-fileupload-error { color: ${tokens_1.contract.bgDanger}; font-size: ${tokens_1.contract.text.md}; line-height: 18px; }
   `,
     variants: {},
     defaultVariants: {},

package/dist/cjs/components/formfield/formfield.js

@@ -102,6 +102,6 @@ function FormField({ label, htmlFor, required, optional, description, error, chi
         invalid: error != null,
         required: !!required,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, formfield_recipe_1.formfieldRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("label", { className: "formfield-label", htmlFor: htmlFor, children: [label, required && ((0, jsx_runtime_1.jsx)("span", { className: "formfield-required", "aria-hidden": "true", children: "*" })), optional && !required && ((0, jsx_runtime_1.jsx)("span", { className: "formfield-optional", children: optional === true ? "(optional)" : optional }))] }), children, error != null ? ((0, jsx_runtime_1.jsx)("span", { className: "formfield-error", id: hasMsg ? descId : undefined, children: error })) : description != null ? ((0, jsx_runtime_1.jsx)("span", { className: "formfield-desc", id: hasMsg ? descId : undefined, children: description })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, formfield_recipe_1.formfieldRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("label", { className: "crisp-formfield-label", htmlFor: htmlFor, children: [label, required && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-formfield-required", "aria-hidden": "true", children: "*" })), optional && !required && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-formfield-optional", children: optional === true ? "(optional)" : optional }))] }), children, error != null ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-formfield-error", id: hasMsg ? descId : undefined, children: error })) : description != null ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-formfield-desc", id: hasMsg ? descId : undefined, children: description })) : null] }));
 }
 FormField.displayName = "FormField";

package/dist/cjs/components/formfield/formfield.recipe.js

@@ -9,11 +9,11 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "formfield",
     base: `display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1.5"]}; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans};
-    & .formfield-label { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
-    & .formfield-required { color: ${tokens_1.contract.bgDanger}; }
-    & .formfield-optional { color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 40%, transparent); font-weight: ${tokens_1.contract.weight.regular}; }
-    & .formfield-desc { font-size: ${tokens_1.contract.text.sm}; line-height: 16px; color: ${tokens_1.contract.fgMuted}; }
-    & .formfield-error { font-size: ${tokens_1.contract.text.sm}; line-height: 16px; color: ${tokens_1.contract.bgDanger}; }`,
+    & .crisp-formfield-label { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-formfield-required { color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-formfield-optional { color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 40%, transparent); font-weight: ${tokens_1.contract.weight.regular}; }
+    & .crisp-formfield-desc { font-size: ${tokens_1.contract.text.sm}; line-height: 16px; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-formfield-error { font-size: ${tokens_1.contract.text.sm}; line-height: 16px; color: ${tokens_1.contract.bgDanger}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/components/input/input.js

@@ -42,6 +42,6 @@ exports.Input = React.forwardRef(({ size, invalid, className, style, ...props },
     // replaced element and cannot have one. Everything the consumer passes
     // still lands on the <input> itself, so `id`, `name`, `onChange`, form
     // association and every native attribute behave exactly as before.
-    return ((0, jsx_runtime_1.jsx)("span", { className: (0, input_recipe_1.inputRecipe)({ size, invalid, className }), style: style, children: (0, jsx_runtime_1.jsx)("input", { ref: ref, className: "input-value", "aria-invalid": invalid === true || undefined, ...props }) }));
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, input_recipe_1.inputRecipe)({ size, invalid, className }), style: style, children: (0, jsx_runtime_1.jsx)("input", { ref: ref, className: "crisp-input-value", "aria-invalid": invalid === true || undefined, ...props }) }));
 });
 exports.Input.displayName = "Input";

package/dist/cjs/components/input/input.recipe.js

@@ -28,19 +28,19 @@ const config = (0, core_1.defineRecipe)({
     }
     &:focus-within::after { border-color: ${tokens_1.contract.strokeFieldFocus}; }
 
-    & .input-value {
+    & .crisp-input-value {
       box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%;
       align-self: stretch; margin: 0; border: none; background: none; outline: none;
       font: inherit; color: ${tokens_1.contract.fgPrimary};
     }
-    & .input-value::placeholder { color: ${tokens_1.contract.fgMuted}; }
-    & .input-value:disabled { opacity: 0.5; cursor: not-allowed; }
-    &:has(.input-value:disabled) { opacity: 1; }
+    & .crisp-input-value::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-input-value:disabled { opacity: 0.5; cursor: not-allowed; }
+    &:has(.crisp-input-value:disabled) { opacity: 1; }
   `,
     variants: {
         size: {
-            medium: `height: 32px; border-radius: ${tokens_1.contract.radius.md}; & .input-value { padding-inline: ${tokens_1.contract.space["2.5"]}; }`,
-            large: `height: 36px; border-radius: 10px; & .input-value { padding-inline: ${tokens_1.contract.space["3"]}; }`,
+            medium: `height: 32px; border-radius: ${tokens_1.contract.radius.md}; & .crisp-input-value { padding-inline: ${tokens_1.contract.space["2.5"]}; }`,
+            large: `height: 36px; border-radius: 10px; & .crisp-input-value { padding-inline: ${tokens_1.contract.space["3"]}; }`,
         },
         invalid: {
             // critical outranks focus: a field that is wrong stays visibly wrong

package/dist/cjs/components/linechart/linechart.js

@@ -46,12 +46,12 @@ function LineChart({ data, height = 240, max, ticks = 5, color, area = true, dot
         `Line chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, linechart_recipe_1.linechartRecipe)({ className }), ...rest, style: {
             height,
-            "--linechart-yaxis-width": yAxisWidthValue,
-        }, role: "img", "aria-label": summary, children: [(0, jsx_runtime_1.jsxs)("div", { className: "linechart-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "linechart-yaxis", children: tickValues.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "linechart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), (0, jsx_runtime_1.jsxs)("div", { className: "linechart-plot", children: [tickValues.map((t) => ((0, jsx_runtime_1.jsx)("div", { className: "linechart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), pts.length > 1 && ((0, jsx_runtime_1.jsxs)("svg", { className: "linechart-svg", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [area && (0, jsx_runtime_1.jsx)("path", { className: "linechart-area", d: areaPath }), (0, jsx_runtime_1.jsx)("polyline", { className: "linechart-line", points: line, style: { stroke: color } })] })), dots &&
-                                pts.map((p, i) => ((0, jsx_runtime_1.jsx)("span", { className: "linechart-dot-html", style: {
+            "--crisp-linechart-yaxis-width": yAxisWidthValue,
+        }, role: "img", "aria-label": summary, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-linechart-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-linechart-yaxis", children: tickValues.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-linechart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-linechart-plot", children: [tickValues.map((t) => ((0, jsx_runtime_1.jsx)("div", { className: "crisp-linechart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), pts.length > 1 && ((0, jsx_runtime_1.jsxs)("svg", { className: "crisp-linechart-svg", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [area && (0, jsx_runtime_1.jsx)("path", { className: "crisp-linechart-area", d: areaPath }), (0, jsx_runtime_1.jsx)("polyline", { className: "crisp-linechart-line", points: line, style: { stroke: color } })] })), dots &&
+                                pts.map((p, i) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-linechart-dot-html", style: {
                                         left: `${p.x}%`,
                                         bottom: `${p.frac * 100}%`,
                                         borderColor: color,
-                                    }, title: `${data[i].label}: ${format(data[i].value)}` }, i)))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "linechart-xaxis", children: data.map((d) => ((0, jsx_runtime_1.jsx)("span", { className: "linechart-xlabel", children: d.label }, d.label))) }), xAxisTitle != null && ((0, jsx_runtime_1.jsx)("div", { className: "linechart-axis-title", children: xAxisTitle }))] }));
+                                    }, title: `${data[i].label}: ${format(data[i].value)}` }, i)))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-linechart-xaxis", children: data.map((d) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-linechart-xlabel", children: d.label }, d.label))) }), xAxisTitle != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-linechart-axis-title", children: xAxisTitle }))] }));
 }
 LineChart.displayName = "LineChart";

package/dist/cjs/components/linechart/linechart.recipe.js

@@ -9,24 +9,24 @@ const tokens_1 = require("../../tokens");
 // its box (non-scaling stroke keeps the line crisp); axes are HTML.
 const config = (0, core_1.defineRecipe)({
     name: "linechart",
-    // --linechart-yaxis-width is the one source of truth for the value-axis
+    // --crisp-linechart-yaxis-width is the one source of truth for the value-axis
     // gutter: the component sets it (auto-sized to the longest tick label, or
     // pinned via `yAxisWidth`) on the root element, and it inherits down to the
     // x-axis padding and axis title so they never drift out of alignment. 34px
     // is only the pre-JS fallback (e.g. if `linechartRecipe` is used bare).
-    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; --linechart-yaxis-width: 34px;
-    & .linechart-body { display: flex; flex: 1; min-height: 0; }
-    & .linechart-yaxis { position: relative; flex-shrink: 0; width: var(--linechart-yaxis-width); }
-    & .linechart-ytick { position: absolute; inset-inline-end: ${tokens_1.contract.space["2"]}; transform: translateY(50%); font-size: ${tokens_1.contract.text.xs}; color: ${tokens_1.contract.fgMuted}; white-space: nowrap; }
-    & .linechart-plot { position: relative; flex: 1; min-width: 0; border-bottom: 1px solid ${tokens_1.contract.borderDefault}; }
-    & .linechart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed ${tokens_1.contract.borderSubtle}; pointer-events: none; }
-    & .linechart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
-    & .linechart-area { fill: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 12%, transparent); stroke: none; }
-    & .linechart-line { fill: none; stroke: ${tokens_1.contract.bgBrandSolid}; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
-    & .linechart-dot-html { position: absolute; width: 8px; height: 8px; box-sizing: border-box; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgSurface}; border: 2px solid ${tokens_1.contract.bgBrandSolid}; transform: translate(-50%, 50%); pointer-events: auto; }
-    & .linechart-xaxis { display: flex; margin-top: ${tokens_1.contract.space["1.5"]}; padding-inline-start: var(--linechart-yaxis-width); }
-    & .linechart-xlabel { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
-    & .linechart-axis-title { margin-top: ${tokens_1.contract.space["1"]}; padding-inline-start: var(--linechart-yaxis-width); text-align: center; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }`,
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; --crisp-linechart-yaxis-width: 34px;
+    & .crisp-linechart-body { display: flex; flex: 1; min-height: 0; }
+    & .crisp-linechart-yaxis { position: relative; flex-shrink: 0; width: var(--crisp-linechart-yaxis-width); }
+    & .crisp-linechart-ytick { position: absolute; inset-inline-end: ${tokens_1.contract.space["2"]}; transform: translateY(50%); font-size: ${tokens_1.contract.text.xs}; color: ${tokens_1.contract.fgMuted}; white-space: nowrap; }
+    & .crisp-linechart-plot { position: relative; flex: 1; min-width: 0; border-bottom: 1px solid ${tokens_1.contract.borderDefault}; }
+    & .crisp-linechart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed ${tokens_1.contract.borderSubtle}; pointer-events: none; }
+    & .crisp-linechart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+    & .crisp-linechart-area { fill: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 12%, transparent); stroke: none; }
+    & .crisp-linechart-line { fill: none; stroke: ${tokens_1.contract.bgBrandSolid}; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
+    & .crisp-linechart-dot-html { position: absolute; width: 8px; height: 8px; box-sizing: border-box; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgSurface}; border: 2px solid ${tokens_1.contract.bgBrandSolid}; transform: translate(-50%, 50%); pointer-events: auto; }
+    & .crisp-linechart-xaxis { display: flex; margin-top: ${tokens_1.contract.space["1.5"]}; padding-inline-start: var(--crisp-linechart-yaxis-width); }
+    & .crisp-linechart-xlabel { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-linechart-axis-title { margin-top: ${tokens_1.contract.space["1"]}; padding-inline-start: var(--crisp-linechart-yaxis-width); text-align: center; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/components/menu/menu.js

@@ -128,27 +128,27 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
             setOpen(!open);
         },
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, menu_recipe_1.menuRecipe)({ className }), children: [triggerEl, open && ((0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: { close }, children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, className: "menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: children }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, menu_recipe_1.menuRecipe)({ className }), children: [triggerEl, open && ((0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: { close }, children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, className: "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: children }) }))] }));
 }
 Menu.displayName = "Menu";
 function MenuItem({ children, icon, shortcut, danger, disabled, onSelect, closeOnSelect = true, }) {
     const ctx = React.useContext(MenuContext);
-    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: `menu-item${danger ? " menu-item--danger" : ""}`, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: `crisp-menu-item${danger ? " crisp-menu-item--danger" : ""}`, onClick: () => {
             onSelect?.();
             if (closeOnSelect)
                 ctx?.close();
-        }, children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "menu-item-label", children: children }), shortcut && (0, jsx_runtime_1.jsx)("span", { className: "menu-item-shortcut", children: shortcut })] }));
+        }, children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-label", children: children }), shortcut && (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-shortcut", children: shortcut })] }));
 }
 MenuItem.displayName = "MenuItem";
 function MenuCheckboxItem({ children, checked, onCheckedChange, disabled, }) {
-    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: "menu-item", onClick: () => onCheckedChange?.(!checked), children: [checked ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "menu-item-check", size: 15, strokeWidth: 2 })) : ((0, jsx_runtime_1.jsx)("span", { className: "menu-item-check--placeholder" })), (0, jsx_runtime_1.jsx)("span", { className: "menu-item-label", children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: "crisp-menu-item", onClick: () => onCheckedChange?.(!checked), children: [checked ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-menu-item-check", size: 15, strokeWidth: 2 })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-check--placeholder" })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-label", children: children })] }));
 }
 MenuCheckboxItem.displayName = "MenuCheckboxItem";
 function MenuSeparator() {
-    return (0, jsx_runtime_1.jsx)("hr", { className: "menu-sep" });
+    return (0, jsx_runtime_1.jsx)("hr", { className: "crisp-menu-sep" });
 }
 MenuSeparator.displayName = "MenuSeparator";
 function MenuLabel({ children }) {
-    return (0, jsx_runtime_1.jsx)("div", { className: "menu-label", children: children });
+    return (0, jsx_runtime_1.jsx)("div", { className: "crisp-menu-label", children: children });
 }
 MenuLabel.displayName = "MenuLabel";

package/dist/cjs/components/menu/menu.recipe.js

@@ -14,37 +14,37 @@ const config = (0, core_1.defineRecipe)({
     position: relative; display: inline-flex; font-family: ${tokens_1.contract.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .menu-content {
+    & .crisp-menu-content {
       position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px};
       min-width: 200px; max-height: 360px; overflow-y: auto; padding: ${tokens_1.contract.space["1"]};
       border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover};
       box-shadow: ${tokens_1.elevation.floating};
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
-    & .menu-content[data-align="end"] { transform-origin: top right; }
-    & .menu-content[data-up] { transform-origin: bottom left; }
-    & .menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
-    & .menu-content { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-menu-content[data-align="end"] { transform-origin: top right; }
+    & .crisp-menu-content[data-up] { transform-origin: bottom left; }
+    & .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
+    & .crisp-menu-content { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
 
-    & .menu-item {
+    & .crisp-menu-item {
       box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; height: ${tokens_1.contract.size.menuRow}; flex-shrink: 0;
       margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; border-radius: ${tokens_1.contract.radius.md};
       font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; text-align: start; cursor: pointer; white-space: nowrap;
     }
-    & .menu-item svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
-    & .menu-item:focus { outline: none; }
-    & .menu-item:hover:not([data-disabled]), & .menu-item:focus-visible:not([data-disabled]), & .menu-item[data-highlighted]:not([data-disabled]) { background: ${tokens_1.contract.bgRaised}; }
-    & .menu-item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
-    & .menu-item--danger { color: ${tokens_1.contract.bgDanger}; }
-    & .menu-item--danger svg { color: ${tokens_1.contract.bgDanger}; }
-    & .menu-item--danger:hover, & .menu-item--danger:focus-visible, & .menu-item--danger[data-highlighted] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }
-    & .menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-    & .menu-item-shortcut { flex-shrink: 0; margin-inline-start: ${tokens_1.contract.space["3"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; letter-spacing: 0.02em; }
-    & .menu-item-check { flex-shrink: 0; color: ${tokens_1.contract.bgBrandSolid}; }
-    & .menu-item-check--placeholder { width: 15px; }
+    & .crisp-menu-item svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-menu-item:focus { outline: none; }
+    & .crisp-menu-item:hover:not([data-disabled]), & .crisp-menu-item:focus-visible:not([data-disabled]), & .crisp-menu-item[data-highlighted]:not([data-disabled]) { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-menu-item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-menu-item--danger { color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-menu-item--danger svg { color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-menu-item--danger:hover, & .crisp-menu-item--danger:focus-visible, & .crisp-menu-item--danger[data-highlighted] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }
+    & .crisp-menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-menu-item-shortcut { flex-shrink: 0; margin-inline-start: ${tokens_1.contract.space["3"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; letter-spacing: 0.02em; }
+    & .crisp-menu-item-check { flex-shrink: 0; color: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-menu-item-check--placeholder { width: 15px; }
 
-    & .menu-sep { height: 1px; flex-shrink: 0; border: none; margin: ${tokens_1.contract.space["1"]} calc(-1 * ${tokens_1.contract.space["1"]}); background: ${tokens_1.contract.borderSubtle}; }
-    & .menu-label { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-menu-sep { height: 1px; flex-shrink: 0; border: none; margin: ${tokens_1.contract.space["1"]} calc(-1 * ${tokens_1.contract.space["1"]}); background: ${tokens_1.contract.borderSubtle}; }
+    & .crisp-menu-label { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
   `,
     variants: {},
     defaultVariants: {},