@crisp-ui-kit/crisp 0.31.6 → 0.32.1

package/dist/cjs/product/recordstable/recordstable.recipe.js

@@ -22,135 +22,135 @@ const config = (0, core_1.defineRecipe)({
 
     /* toolbar */
 ${(0, tabletoolbar_chrome_1.toolbarChromeHead)("recordstable")}
-    & .recordstable-ctx { z-index: 60; }
-    & .recordstable-th[data-drop] { box-shadow: inset 2px 0 0 ${tokens_1.contract.bgBrandSolid}; }
-    & .recordstable-th-inner[draggable="true"]:active { cursor: grabbing; }
+    & .crisp-recordstable-ctx { z-index: 60; }
+    & .crisp-recordstable-th[data-drop] { box-shadow: inset 2px 0 0 ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-recordstable-th-inner[draggable="true"]:active { cursor: grabbing; }
 ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("recordstable")}
 
     /* scroll frame + table */
-    & .recordstable-scroll { flex: 1; min-height: 0; overflow: auto; background: ${tokens_1.contract.bgSurface}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 22%, transparent) transparent; }
-    & .recordstable-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
-    & .recordstable-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 20%, transparent); border-radius: ${tokens_1.contract.radius.full}; border: 2px solid ${tokens_1.contract.bgSurface}; background-clip: padding-box; }
-    & .recordstable-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 34%, transparent); background-clip: padding-box; }
-    & .recordstable-scroll::-webkit-scrollbar-corner { background: transparent; }
-    & .recordstable-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
-    & .recordstable-th, & .recordstable-td { position: relative; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; text-align: start; white-space: nowrap; overflow: hidden; }
-    & .recordstable-th { position: sticky; top: 0; z-index: 2; padding: 0; height: ${tokens_1.contract.size.tableHeader}; background: ${tokens_1.contract.bgSurface}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); user-select: none; }
-    & .recordstable-th-inner { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; }
-    & .recordstable-th-inner svg { flex-shrink: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 45%, transparent); }
-    & .recordstable-th-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
-    & .recordstable-th-rename { width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0; border: none; outline: none; background: none; color: inherit; font: inherit; letter-spacing: inherit; }
-    & .recordstable-th-rename:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
-    & .recordstable-sort { flex-shrink: 0; opacity: 0.4; transition: opacity .12s; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 45%, transparent); }
-    & .recordstable-th:hover .recordstable-sort, & .recordstable-th[data-sorted] .recordstable-sort { opacity: 1; }
-    & .recordstable-th[data-sorted="desc"] .recordstable-sort svg { transform: rotate(180deg); }
+    & .crisp-recordstable-scroll { flex: 1; min-height: 0; overflow: auto; background: ${tokens_1.contract.bgSurface}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 22%, transparent) transparent; }
+    & .crisp-recordstable-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
+    & .crisp-recordstable-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 20%, transparent); border-radius: ${tokens_1.contract.radius.full}; border: 2px solid ${tokens_1.contract.bgSurface}; background-clip: padding-box; }
+    & .crisp-recordstable-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 34%, transparent); background-clip: padding-box; }
+    & .crisp-recordstable-scroll::-webkit-scrollbar-corner { background: transparent; }
+    & .crisp-recordstable-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
+    & .crisp-recordstable-th, & .crisp-recordstable-td { position: relative; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; text-align: start; white-space: nowrap; overflow: hidden; }
+    & .crisp-recordstable-th { position: sticky; top: 0; z-index: 2; padding: 0; height: ${tokens_1.contract.size.tableHeader}; background: ${tokens_1.contract.bgSurface}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); user-select: none; }
+    & .crisp-recordstable-th-inner { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; }
+    & .crisp-recordstable-th-inner svg { flex-shrink: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 45%, transparent); }
+    & .crisp-recordstable-th-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-recordstable-th-rename { width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0; border: none; outline: none; background: none; color: inherit; font: inherit; letter-spacing: inherit; }
+    & .crisp-recordstable-th-rename:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-recordstable-sort { flex-shrink: 0; opacity: 0.4; transition: opacity .12s; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 45%, transparent); }
+    & .crisp-recordstable-th:hover .crisp-recordstable-sort, & .crisp-recordstable-th[data-sorted] .crisp-recordstable-sort { opacity: 1; }
+    & .crisp-recordstable-th[data-sorted="desc"] .crisp-recordstable-sort svg { transform: rotate(180deg); }
 
     /* column resize handle */
-    & .recordstable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .recordstable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
-    & .recordstable-resize:hover::after, & .recordstable-resize[data-resizing]::after { opacity: 1; }
+    & .crisp-recordstable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .crisp-recordstable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
+    & .crisp-recordstable-resize:hover::after, & .crisp-recordstable-resize[data-resizing]::after { opacity: 1; }
 
     /* add-column header */
-    & .recordstable-addcol { min-width: 44px; }
-    & .recordstable-addcol button { display: flex; align-items: center; justify-content: center; width: 44px; height: 100%; border: none; background: none; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
-    & .recordstable-addcol button:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordstable-addcol { min-width: 44px; }
+    & .crisp-recordstable-addcol button { display: flex; align-items: center; justify-content: center; width: 44px; height: 100%; border: none; background: none; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
+    & .crisp-recordstable-addcol button:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
 
     /* cells */
     /* font-weight is explicit because the first cell of each row is a
        th[scope=row] — the record's name is what the row IS — and a th
        defaults to bold. Measured before the change and unchanged after: 400. */
-    & .recordstable-td { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSurface}; cursor: default; }
-    & .recordstable-td--editable { cursor: text; }
+    & .crisp-recordstable-td { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSurface}; cursor: default; }
+    & .crisp-recordstable-td--editable { cursor: text; }
     /* keyboard/click cell selection (spreadsheet-style) */
-    & .recordstable-td[data-selected] { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: -2px; border-radius: ${tokens_1.contract.radius.sm}; z-index: 3; }
-    & .recordstable-scroll:focus { outline: none; }
+    & .crisp-recordstable-td[data-selected] { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: -2px; border-radius: ${tokens_1.contract.radius.sm}; z-index: 3; }
+    & .crisp-recordstable-scroll:focus { outline: none; }
     /* picker cells (status / date / reference) host a ghost control edge-to-edge */
-    & .recordstable-td--picker { padding: 0; }
-    & .recordstable-td--picker .select-trigger, & .recordstable-td--picker .datepicker-trigger, & .recordstable-td--picker .multiselect-trigger { width: 100%; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; padding: 0 ${tokens_1.contract.space["2"]}; }
-    & .recordstable-td--picker .multiselect-trigger:hover { background: none; }
-    & .recordstable-td--picker .multiselect-trigger[data-open] { box-shadow: inset 0 0 0 1.5px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-recordstable-td--picker { padding: 0; }
+    & .crisp-recordstable-td--picker .crisp-select-trigger, & .crisp-recordstable-td--picker .crisp-datepicker-trigger, & .crisp-recordstable-td--picker .crisp-multiselect-trigger { width: 100%; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; padding: 0 ${tokens_1.contract.space["2"]}; }
+    & .crisp-recordstable-td--picker .crisp-multiselect-trigger:hover { background: none; }
+    & .crisp-recordstable-td--picker .crisp-multiselect-trigger[data-open] { box-shadow: inset 0 0 0 1.5px ${tokens_1.contract.bgBrandSolid}; }
     /* tag cell: one compact clipped line of full chips, no chevron (opens the picker on click) */
-    & .recordstable-td--picker .multiselect-chips { flex-wrap: nowrap; overflow: hidden; }
-    & .recordstable-td--picker .multiselect-chips .recordstable-tag { flex-shrink: 0; max-width: none; }
-    & .recordstable-td--picker .multiselect-chevron { display: none; }
-    & .recordstable-td--picker .multiselect-placeholder { color: ${tokens_1.contract.fgMuted}; }
-    & .recordstable-status { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
-    & .recordstable-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${tokens_1.contract.radius.full}; }
-    & .recordstable-cell { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 100%; min-width: 0; }
-    & .recordstable-cell--num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
-    & .recordstable-cell--tags { gap: ${tokens_1.contract.space["1"]}; }
+    & .crisp-recordstable-td--picker .crisp-multiselect-chips { flex-wrap: nowrap; overflow: hidden; }
+    & .crisp-recordstable-td--picker .crisp-multiselect-chips .crisp-recordstable-tag { flex-shrink: 0; max-width: none; }
+    & .crisp-recordstable-td--picker .crisp-multiselect-chevron { display: none; }
+    & .crisp-recordstable-td--picker .crisp-multiselect-placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordstable-status { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
+    & .crisp-recordstable-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${tokens_1.contract.radius.full}; }
+    & .crisp-recordstable-cell { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 100%; min-width: 0; }
+    & .crisp-recordstable-cell--num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
+    & .crisp-recordstable-cell--tags { gap: ${tokens_1.contract.space["1"]}; }
     ${recordstable_tag_1.recordTagCss}
-    & .recordstable-muted { color: ${tokens_1.contract.fgMuted}; }
-    & .recordstable-entity { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; text-decoration: none; }
-    & .recordstable-entity:hover .recordstable-entity-name { text-decoration: underline; }
-    & .recordstable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & button.recordstable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
-    & .recordstable-fav { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; border-radius: ${tokens_1.contract.radius.sm}; flex-shrink: 0; object-fit: cover; background: ${tokens_1.contract.bgRaised}; }
-    & .recordstable-open { position: absolute; inset-inline-end: ${tokens_1.contract.space["1"]}; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; opacity: 0; transition: opacity .12s, background-color .12s; z-index: 3; }
-    & .recordstable-open:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
-    & tbody tr:hover .recordstable-open { opacity: 1; }
-    & .recordstable-link { color: ${tokens_1.contract.fgPrimary}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
-    & .recordstable-link:hover { text-decoration: underline; }
+    & .crisp-recordstable-muted { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordstable-entity { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; text-decoration: none; }
+    & .crisp-recordstable-entity:hover .crisp-recordstable-entity-name { text-decoration: underline; }
+    & .crisp-recordstable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & button.crisp-recordstable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
+    & .crisp-recordstable-fav { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; border-radius: ${tokens_1.contract.radius.sm}; flex-shrink: 0; object-fit: cover; background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-recordstable-open { position: absolute; inset-inline-end: ${tokens_1.contract.space["1"]}; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; opacity: 0; transition: opacity .12s, background-color .12s; z-index: 3; }
+    & .crisp-recordstable-open:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & tbody tr:hover .crisp-recordstable-open { opacity: 1; }
+    & .crisp-recordstable-link { color: ${tokens_1.contract.fgPrimary}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-recordstable-link:hover { text-decoration: underline; }
 
     /* inline edit input */
-    & .recordstable-edit { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: -2px; border-radius: ${tokens_1.contract.radius.sm}; background: ${tokens_1.contract.bgSurface}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; z-index: 5; }
-    & .recordstable-edit--num { text-align: end; font-variant-numeric: tabular-nums; }
+    & .crisp-recordstable-edit { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: -2px; border-radius: ${tokens_1.contract.radius.sm}; background: ${tokens_1.contract.bgSurface}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; z-index: 5; }
+    & .crisp-recordstable-edit--num { text-align: end; font-variant-numeric: tabular-nums; }
 
     /* selection / hover / sticky */
-    & .recordstable-col-check { width: 40px; min-width: 40px; padding: 0; }
-    & .recordstable-check-inner { display: flex; align-items: center; justify-content: center; height: 100%; }
-    & .recordstable-col-check, & .recordstable-col-entity { position: sticky; z-index: 3; background: ${tokens_1.contract.bgSurface}; }
+    & .crisp-recordstable-col-check { width: 40px; min-width: 40px; padding: 0; }
+    & .crisp-recordstable-check-inner { display: flex; align-items: center; justify-content: center; height: 100%; }
+    & .crisp-recordstable-col-check, & .crisp-recordstable-col-entity { position: sticky; z-index: 3; background: ${tokens_1.contract.bgSurface}; }
     /* The sticky pin is a LOGICAL offset: with physical \`left\` these columns
        were not pinned at all under RTL -- scrolled, they left the viewport
        entirely (measured: viewport 13..773, check column at x=1333). Nothing in
        JS measures these, so converting them is safe; the two properties below
        that have no logical form get an explicit RTL rule rather than being
        left to point the wrong way. */
-    & .recordstable-col-check { inset-inline-start: 0; }
-    & .recordstable-col-entity { inset-inline-start: 40px; clip-path: inset(0 -38px 0 0); transition: box-shadow .2s ease; }
-    [dir="rtl"] & .recordstable-col-entity { clip-path: inset(0 0 0 -38px); }
-    & thead .recordstable-col-check, & thead .recordstable-col-entity { z-index: 4; }
+    & .crisp-recordstable-col-check { inset-inline-start: 0; }
+    & .crisp-recordstable-col-entity { inset-inline-start: 40px; clip-path: inset(0 -38px 0 0); transition: box-shadow .2s ease; }
+    [dir="rtl"] & .crisp-recordstable-col-entity { clip-path: inset(0 0 0 -38px); }
+    & thead .crisp-recordstable-col-check, & thead .crisp-recordstable-col-entity { z-index: 4; }
     /* soft shadow on the sticky column edge once the grid is scrolled horizontally */
-    & .recordstable-scroll[data-scrolled] .recordstable-col-entity { box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
+    & .crisp-recordstable-scroll[data-scrolled] .crisp-recordstable-col-entity { box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
     /* box-shadow has no logical form either: the bleed follows the scrolled
        content, which is the opposite side under RTL. */
-    [dir="rtl"] & .recordstable-scroll[data-scrolled] .recordstable-col-entity { box-shadow: -6px 0 16px 4px rgba(0,0,0,0.12); }
+    [dir="rtl"] & .crisp-recordstable-scroll[data-scrolled] .crisp-recordstable-col-entity { box-shadow: -6px 0 16px 4px rgba(0,0,0,0.12); }
     /* AI-enriched values carry a purple wash. Measured live:
        a full-bleed overlay at #9b69ff 4% (== bgPurple), composited OVER
        whatever row-state background the cell already has, which is why it
        is an ::after and not a background. */
-    & .recordstable-td[data-enriched]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 4%, transparent); }
-    & tbody tr:hover .recordstable-td { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, ${tokens_1.contract.bgSurface}); }
-    & tbody tr[data-selected] .recordstable-td { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 10%, ${tokens_1.contract.bgSurface}); }
-    & tbody tr[data-selected]:hover .recordstable-td { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 10%, ${tokens_1.contract.bgSurface})); }
-    & .recordstable-th:last-child, & .recordstable-td:last-child { border-inline-end: none; }
+    & .crisp-recordstable-td[data-enriched]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 4%, transparent); }
+    & tbody tr:hover .crisp-recordstable-td { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, ${tokens_1.contract.bgSurface}); }
+    & tbody tr[data-selected] .crisp-recordstable-td { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 10%, ${tokens_1.contract.bgSurface}); }
+    & tbody tr[data-selected]:hover .crisp-recordstable-td { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 10%, ${tokens_1.contract.bgSurface})); }
+    & .crisp-recordstable-th:last-child, & .crisp-recordstable-td:last-child { border-inline-end: none; }
 
     /* add-row footer */
-    & .recordstable-addrow { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; width: 100%; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-top: 1px solid ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; cursor: pointer; }
-    & .recordstable-addrow:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordstable-addrow { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; width: 100%; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-top: 1px solid ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; cursor: pointer; }
+    & .crisp-recordstable-addrow:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
     /* zero-row empty state — centred in the body region (headers + summary stay) */
-    & .recordstable-empty { display: flex; align-items: center; justify-content: center; min-height: 320px; padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["4"]}; }
+    & .crisp-recordstable-empty { display: flex; align-items: center; justify-content: center; min-height: 320px; padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["4"]}; }
 
     /* summary footer — per-column aggregation, sticky to the bottom */
-    & .recordstable-sum { position: sticky; bottom: 0; z-index: 2; height: ${tokens_1.contract.size.tableRow}; padding: 0; border-top: 1px solid ${tokens_1.contract.borderSubtle}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; }
-    & tfoot .recordstable-col-check, & tfoot .recordstable-col-entity { position: sticky; bottom: 0; z-index: 3; }
-    & .recordstable-sum:last-child { border-inline-end: none; }
-    & .recordstable-sum-btn { display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["3"]}; border: none; background: none; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; white-space: nowrap; overflow: hidden; }
-    & .recordstable-sum-btn:hover { background: ${tokens_1.contract.bgRaised}; }
-    & .recordstable-sum-label { color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 45%, transparent); text-transform: capitalize; }
-    & .recordstable-sum-value { color: ${tokens_1.contract.fgPrimary}; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
-    & .recordstable-sumgroup { width: 100%; height: 100%; }
-    & .recordstable-pin { flex-shrink: 0; margin-inline-start: ${tokens_1.contract.space["1"]}; color: ${tokens_1.contract.bgWarning}; fill: color-mix(in srgb, ${tokens_1.contract.bgWarning} 35%, transparent); }
-    & .recordstable-sum-btn[data-empty] { opacity: 0; justify-content: flex-start; }
-    & .recordstable-sum-btn[data-empty]:hover { opacity: 1; }
+    & .crisp-recordstable-sum { position: sticky; bottom: 0; z-index: 2; height: ${tokens_1.contract.size.tableRow}; padding: 0; border-top: 1px solid ${tokens_1.contract.borderSubtle}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; }
+    & tfoot .crisp-recordstable-col-check, & tfoot .crisp-recordstable-col-entity { position: sticky; bottom: 0; z-index: 3; }
+    & .crisp-recordstable-sum:last-child { border-inline-end: none; }
+    & .crisp-recordstable-sum-btn { display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["3"]}; border: none; background: none; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; white-space: nowrap; overflow: hidden; }
+    & .crisp-recordstable-sum-btn:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-recordstable-sum-label { color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 45%, transparent); text-transform: capitalize; }
+    & .crisp-recordstable-sum-value { color: ${tokens_1.contract.fgPrimary}; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-recordstable-sumgroup { width: 100%; height: 100%; }
+    & .crisp-recordstable-pin { flex-shrink: 0; margin-inline-start: ${tokens_1.contract.space["1"]}; color: ${tokens_1.contract.bgWarning}; fill: color-mix(in srgb, ${tokens_1.contract.bgWarning} 35%, transparent); }
+    & .crisp-recordstable-sum-btn[data-empty] { opacity: 0; justify-content: flex-start; }
+    & .crisp-recordstable-sum-btn[data-empty]:hover { opacity: 1; }
 
     /* bulk action bar lives in its own component now — see components/bulkbar */
-    & .recordstable-bulk-sep { width: 1px; height: 20px; margin: 0 ${tokens_1.contract.space["0.5"]}; background: ${tokens_1.contract.borderSubtle}; }
-    & .recordstable-bulk-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
-    & .recordstable-bulk-close:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordstable-bulk-sep { width: 1px; height: 20px; margin: 0 ${tokens_1.contract.space["0.5"]}; background: ${tokens_1.contract.borderSubtle}; }
+    & .crisp-recordstable-bulk-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
+    & .crisp-recordstable-bulk-close:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
   
     /* announced, never drawn */
-    & .recordstable-live {
+    & .crisp-recordstable-live {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
       overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
     }

package/dist/cjs/product/recordstable/recordstable.tag.js

@@ -11,11 +11,11 @@ const tokens_1 = require("../../tokens");
  * to be pasted into both recipes, and the two copies had already started to
  * drift — adding the measured inset ring meant patching the same rules twice.
  */
-exports.recordTagCss = `& .recordstable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; }
-    & .recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 30%, transparent); }
-    & .recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 78%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgSuccess} 30%, transparent); }
-    & .recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgWarning} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgWarning} 30%, transparent); }
-    & .recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 15%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgDanger} 80%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgDanger} 30%, transparent); }
-    & .recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgPurple} 30%, transparent); }
-    & .recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgCyan} 30%, transparent); }
-    & .recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgOrange} 30%, transparent); }`;
+exports.recordTagCss = `& .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; }
+    & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 30%, transparent); }
+    & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 78%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgSuccess} 30%, transparent); }
+    & .crisp-recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgWarning} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgWarning} 30%, transparent); }
+    & .crisp-recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 15%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgDanger} 80%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgDanger} 30%, transparent); }
+    & .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgPurple} 30%, transparent); }
+    & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgCyan} 30%, transparent); }
+    & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgOrange} 30%, transparent); }`;

package/dist/cjs/product/richtext/richtext.js

@@ -140,14 +140,14 @@ function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder
      * announces an un-pressed toggle that can never be pressed, which tells a
      * screen-reader user there is a state here that does not exist.
      */
-    const tool = (key, label, icon, onClick, toggles = true) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "rte-tool", "aria-label": label, "aria-pressed": toggles ? !!active[key] : undefined, "data-active": active[key] ? "" : undefined, onMouseDown: keepSel, onClick: onClick, children: icon }));
+    const tool = (key, label, icon, onClick, toggles = true) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-rte-tool", "aria-label": label, "aria-pressed": toggles ? !!active[key] : undefined, "data-active": active[key] ? "" : undefined, onMouseDown: keepSel, onClick: onClick, children: icon }));
     const ic = { size: 15, strokeWidth: 2 };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, richtext_recipe_1.richtextRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsx)("div", { ref: titleRef, className: "rte-title", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-label": titleLabel, "data-placeholder": titlePlaceholder, onInput: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, richtext_recipe_1.richtextRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsx)("div", { ref: titleRef, className: "crisp-rte-title", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-label": titleLabel, "data-placeholder": titlePlaceholder, onInput: () => {
                     syncEmpty(titleRef.current);
                     emit();
-                } }), (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, className: "rte-body", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-multiline": "true", "aria-label": bodyLabel, "data-placeholder": placeholder, onInput: () => {
+                } }), (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, className: "crisp-rte-body", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-multiline": "true", "aria-label": bodyLabel, "data-placeholder": placeholder, onInput: () => {
                     syncEmpty(bodyRef.current);
                     emit();
-                }, onMouseUp: updateBar, onKeyUp: updateBar }), bar && ((0, jsx_runtime_1.jsxs)("div", { className: "rte-toolbar", style: { left: bar.x, top: bar.y }, children: [tool("bold", "Bold", (0, jsx_runtime_1.jsx)(lucide_react_1.Bold, { ...ic }), () => run("bold")), tool("italic", "Italic", (0, jsx_runtime_1.jsx)(lucide_react_1.Italic, { ...ic }), () => run("italic")), tool("underline", "Underline", (0, jsx_runtime_1.jsx)(lucide_react_1.Underline, { ...ic }), () => run("underline")), tool("strikeThrough", "Strikethrough", (0, jsx_runtime_1.jsx)(lucide_react_1.Strikethrough, { ...ic }), () => run("strikeThrough")), tool("link", "Link", (0, jsx_runtime_1.jsx)(lucide_react_1.Link2, { ...ic }), addLink, false), (0, jsx_runtime_1.jsx)("span", { className: "rte-tool-sep" }), tool("h1", "Heading 1", (0, jsx_runtime_1.jsx)(lucide_react_1.Heading1, { ...ic }), () => toggleBlock("h1")), tool("h2", "Heading 2", (0, jsx_runtime_1.jsx)(lucide_react_1.Heading2, { ...ic }), () => toggleBlock("h2")), tool("ul", "Bullet list", (0, jsx_runtime_1.jsx)(lucide_react_1.List, { ...ic }), () => run("insertUnorderedList")), tool("ol", "Numbered list", (0, jsx_runtime_1.jsx)(lucide_react_1.ListOrdered, { ...ic }), () => run("insertOrderedList")), tool("blockquote", "Quote", (0, jsx_runtime_1.jsx)(lucide_react_1.Quote, { ...ic }), () => toggleBlock("blockquote"))] }))] }));
+                }, onMouseUp: updateBar, onKeyUp: updateBar }), bar && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-rte-toolbar", style: { left: bar.x, top: bar.y }, children: [tool("bold", "Bold", (0, jsx_runtime_1.jsx)(lucide_react_1.Bold, { ...ic }), () => run("bold")), tool("italic", "Italic", (0, jsx_runtime_1.jsx)(lucide_react_1.Italic, { ...ic }), () => run("italic")), tool("underline", "Underline", (0, jsx_runtime_1.jsx)(lucide_react_1.Underline, { ...ic }), () => run("underline")), tool("strikeThrough", "Strikethrough", (0, jsx_runtime_1.jsx)(lucide_react_1.Strikethrough, { ...ic }), () => run("strikeThrough")), tool("link", "Link", (0, jsx_runtime_1.jsx)(lucide_react_1.Link2, { ...ic }), addLink, false), (0, jsx_runtime_1.jsx)("span", { className: "crisp-rte-tool-sep" }), tool("h1", "Heading 1", (0, jsx_runtime_1.jsx)(lucide_react_1.Heading1, { ...ic }), () => toggleBlock("h1")), tool("h2", "Heading 2", (0, jsx_runtime_1.jsx)(lucide_react_1.Heading2, { ...ic }), () => toggleBlock("h2")), tool("ul", "Bullet list", (0, jsx_runtime_1.jsx)(lucide_react_1.List, { ...ic }), () => run("insertUnorderedList")), tool("ol", "Numbered list", (0, jsx_runtime_1.jsx)(lucide_react_1.ListOrdered, { ...ic }), () => run("insertOrderedList")), tool("blockquote", "Quote", (0, jsx_runtime_1.jsx)(lucide_react_1.Quote, { ...ic }), () => toggleBlock("blockquote"))] }))] }));
 }
 RichTextEditor.displayName = "RichTextEditor";

package/dist/cjs/product/richtext/richtext.recipe.js

@@ -12,29 +12,29 @@ const config = (0, core_1.defineRecipe)({
     base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; color: ${tokens_1.contract.fgPrimary};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .rte-title { font-size: 32px; line-height: 36px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.6px; color: ${tokens_1.contract.fgPrimary}; outline: none; }
-    & .rte-title[data-empty]::before { content: attr(data-placeholder); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 28%, transparent); pointer-events: none; }
+    & .crisp-rte-title { font-size: 32px; line-height: 36px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.6px; color: ${tokens_1.contract.fgPrimary}; outline: none; }
+    & .crisp-rte-title[data-empty]::before { content: attr(data-placeholder); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 28%, transparent); pointer-events: none; }
 
-    & .rte-body { margin-top: ${tokens_1.contract.space["3"]}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgPrimary}; outline: none; }
-    & .rte-body[data-empty]::before { content: attr(data-placeholder); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 28%, transparent); pointer-events: none; }
-    & .rte-body > * { margin: 0; }
-    & .rte-body > * + * { margin-top: ${tokens_1.contract.space["2"]}; }
-    & .rte-body h1 { font-size: ${tokens_1.contract.text.xl}; line-height: 28px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.3px; margin-top: ${tokens_1.contract.space["4"]}; }
-    & .rte-body h2 { font-size: 17px; line-height: 24px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.2px; margin-top: ${tokens_1.contract.space["3"]}; }
-    & .rte-body h3 { font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.semibold}; margin-top: ${tokens_1.contract.space["2.5"]}; }
-    & .rte-body ul, & .rte-body ol { padding-inline-start: ${tokens_1.contract.space["5"]}; }
-    & .rte-body li { margin-top: ${tokens_1.contract.space["1"]}; }
-    & .rte-body blockquote { padding-inline-start: ${tokens_1.contract.space["3"]}; border-inline-start: 2px solid ${tokens_1.contract.borderDefault}; color: ${tokens_1.contract.fgMuted}; }
-    & .rte-body code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: ${tokens_1.contract.text.md}; padding: 1px ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); }
-    & .rte-body a { color: ${tokens_1.contract.bgBrandSolid}; text-decoration: underline; text-underline-offset: 2px; }
-    & .rte-body strong { font-weight: ${tokens_1.contract.weight.semibold}; }
+    & .crisp-rte-body { margin-top: ${tokens_1.contract.space["3"]}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgPrimary}; outline: none; }
+    & .crisp-rte-body[data-empty]::before { content: attr(data-placeholder); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 28%, transparent); pointer-events: none; }
+    & .crisp-rte-body > * { margin: 0; }
+    & .crisp-rte-body > * + * { margin-top: ${tokens_1.contract.space["2"]}; }
+    & .crisp-rte-body h1 { font-size: ${tokens_1.contract.text.xl}; line-height: 28px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.3px; margin-top: ${tokens_1.contract.space["4"]}; }
+    & .crisp-rte-body h2 { font-size: 17px; line-height: 24px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.2px; margin-top: ${tokens_1.contract.space["3"]}; }
+    & .crisp-rte-body h3 { font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.semibold}; margin-top: ${tokens_1.contract.space["2.5"]}; }
+    & .crisp-rte-body ul, & .crisp-rte-body ol { padding-inline-start: ${tokens_1.contract.space["5"]}; }
+    & .crisp-rte-body li { margin-top: ${tokens_1.contract.space["1"]}; }
+    & .crisp-rte-body blockquote { padding-inline-start: ${tokens_1.contract.space["3"]}; border-inline-start: 2px solid ${tokens_1.contract.borderDefault}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-rte-body code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: ${tokens_1.contract.text.md}; padding: 1px ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); }
+    & .crisp-rte-body a { color: ${tokens_1.contract.bgBrandSolid}; text-decoration: underline; text-underline-offset: 2px; }
+    & .crisp-rte-body strong { font-weight: ${tokens_1.contract.weight.semibold}; }
 
-    & .rte-toolbar { position: fixed; z-index: 70; display: inline-flex; align-items: center; gap: 2px; padding: ${tokens_1.contract.space["0.5"]}; border-radius: ${tokens_1.contract.radius.md}; background: #20242c; box-shadow: 0 8px 28px -6px rgba(0,0,0,0.36), 0 2px 6px -2px rgba(0,0,0,0.24); transform: translate(-50%, -100%); opacity: 1; transition: opacity 0.1s ease; }
-    & .rte-toolbar { @starting-style { opacity: 0; } }
-    & .rte-tool { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; color: rgba(255,255,255,0.86); font-family: inherit; cursor: pointer; transition: background-color .1s; }
-    & .rte-tool:hover { background: rgba(255,255,255,0.12); color: #fff; }
-    & .rte-tool[data-active] { color: ${tokens_1.contract.bgBrandSolid}; }
-    & .rte-tool-sep { width: 1px; height: 16px; margin: 0 2px; background: rgba(255,255,255,0.16); }`,
+    & .crisp-rte-toolbar { position: fixed; z-index: 70; display: inline-flex; align-items: center; gap: 2px; padding: ${tokens_1.contract.space["0.5"]}; border-radius: ${tokens_1.contract.radius.md}; background: #20242c; box-shadow: 0 8px 28px -6px rgba(0,0,0,0.36), 0 2px 6px -2px rgba(0,0,0,0.24); transform: translate(-50%, -100%); opacity: 1; transition: opacity 0.1s ease; }
+    & .crisp-rte-toolbar { @starting-style { opacity: 0; } }
+    & .crisp-rte-tool { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; color: rgba(255,255,255,0.86); font-family: inherit; cursor: pointer; transition: background-color .1s; }
+    & .crisp-rte-tool:hover { background: rgba(255,255,255,0.12); color: #fff; }
+    & .crisp-rte-tool[data-active] { color: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-rte-tool-sep { width: 1px; height: 16px; margin: 0 2px; background: rgba(255,255,255,0.16); }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/product/settingssection/settingssection.js

@@ -9,6 +9,6 @@ const settingssection_recipe_1 = require("./settingssection.recipe");
  * FormField). Compose several inside a settings content pane.
  */
 function SettingsSection({ title, description, action, children, className, ...rest }) {
-    return ((0, jsx_runtime_1.jsxs)("section", { className: (0, settingssection_recipe_1.settingssectionRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "settingssection-head", children: [(0, jsx_runtime_1.jsxs)("div", { className: "settingssection-heading", children: [(0, jsx_runtime_1.jsx)("div", { className: "settingssection-title", children: title }), description != null && ((0, jsx_runtime_1.jsx)("div", { className: "settingssection-sub", children: description }))] }), action != null && ((0, jsx_runtime_1.jsx)("div", { className: "settingssection-action", children: action }))] }), children != null && ((0, jsx_runtime_1.jsx)("div", { className: "settingssection-body", children: children }))] }));
+    return ((0, jsx_runtime_1.jsxs)("section", { className: (0, settingssection_recipe_1.settingssectionRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-settingssection-head", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-settingssection-heading", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-settingssection-title", children: title }), description != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-settingssection-sub", children: description }))] }), action != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-settingssection-action", children: action }))] }), children != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-settingssection-body", children: children }))] }));
 }
 SettingsSection.displayName = "SettingsSection";

package/dist/cjs/product/settingssection/settingssection.recipe.js

@@ -9,12 +9,12 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "settingssection",
     base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans};
-    & .settingssection-head { display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2"]}; }
-    & .settingssection-heading { flex: 1; min-width: 0; }
-    & .settingssection-title { font-size: ${tokens_1.contract.text.xl}; line-height: 24px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.2px; color: ${tokens_1.contract.fgPrimary}; }
-    & .settingssection-sub { margin-top: ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.md}; line-height: 18px; color: ${tokens_1.contract.fgMuted}; }
-    & .settingssection-action { flex-shrink: 0; }
-    & .settingssection-body { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; margin-top: ${tokens_1.contract.space["3"]}; }`,
+    & .crisp-settingssection-head { display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2"]}; }
+    & .crisp-settingssection-heading { flex: 1; min-width: 0; }
+    & .crisp-settingssection-title { font-size: ${tokens_1.contract.text.xl}; line-height: 24px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.2px; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-settingssection-sub { margin-top: ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.md}; line-height: 18px; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-settingssection-action { flex-shrink: 0; }
+    & .crisp-settingssection-body { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; margin-top: ${tokens_1.contract.space["3"]}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/product/settingsshell/settingsshell.js

@@ -54,6 +54,6 @@ function SettingsShell({ title = "Settings", onBack, groups, activeItem, onSelec
         }))
             .filter((g) => g.items.length > 0)
         : groups;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, settingsshell_recipe_1.settingsshellRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("nav", { className: "settingsshell-nav", "aria-label": navLabel, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "settingsshell-back", onClick: onBack, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 2 }), title] }), searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "settingsshell-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value) })] })), (0, jsx_runtime_1.jsx)("div", { className: "settingsshell-groups", children: filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "settingsshell-empty", children: emptyLabel })) : (filtered.map((g, gi) => ((0, jsx_runtime_1.jsxs)("div", { className: "settingsshell-group", children: [g.label != null && ((0, jsx_runtime_1.jsx)("div", { className: "settingsshell-group-label", children: g.label })), g.items.map((it) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "settingsshell-item", "aria-current": it.id === activeItem ? "page" : undefined, "data-active": it.id === activeItem ? "" : undefined, onClick: () => onSelect(it.id), children: [it.icon, (0, jsx_runtime_1.jsx)("span", { className: "settingsshell-item-label", children: it.label })] }, it.id)))] }, gi)))) })] }), (0, jsx_runtime_1.jsx)("div", { className: "settingsshell-content", children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, settingsshell_recipe_1.settingsshellRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("nav", { className: "crisp-settingsshell-nav", "aria-label": navLabel, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-settingsshell-back", onClick: onBack, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 2 }), title] }), searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-settingsshell-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value) })] })), (0, jsx_runtime_1.jsx)("div", { className: "crisp-settingsshell-groups", children: filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-settingsshell-empty", children: emptyLabel })) : (filtered.map((g, gi) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-settingsshell-group", children: [g.label != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-settingsshell-group-label", children: g.label })), g.items.map((it) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-settingsshell-item", "aria-current": it.id === activeItem ? "page" : undefined, "data-active": it.id === activeItem ? "" : undefined, onClick: () => onSelect(it.id), children: [it.icon, (0, jsx_runtime_1.jsx)("span", { className: "crisp-settingsshell-item-label", children: it.label })] }, it.id)))] }, gi)))) })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-settingsshell-content", children: children })] }));
 }
 SettingsShell.displayName = "SettingsShell";

package/dist/cjs/product/settingsshell/settingsshell.recipe.js

@@ -11,33 +11,33 @@ const config = (0, core_1.defineRecipe)({
     base: `display: flex; min-height: 0; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; color: ${tokens_1.contract.fgPrimary};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .settingsshell-nav { display: flex; flex-direction: column; width: 256px; flex-shrink: 0; min-height: 0; padding: ${tokens_1.contract.space["3"]}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; }
-    & .settingsshell-back { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; padding: 0 ${tokens_1.contract.space["1"]}; margin: 0 0 ${tokens_1.contract.space["2"]}; border: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer; border-radius: ${tokens_1.contract.radius.md}; }
-    & .settingsshell-back svg { color: ${tokens_1.contract.fgMuted}; }
-    & .settingsshell-back:hover svg { color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-settingsshell-nav { display: flex; flex-direction: column; width: 256px; flex-shrink: 0; min-height: 0; padding: ${tokens_1.contract.space["3"]}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-settingsshell-back { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; padding: 0 ${tokens_1.contract.space["1"]}; margin: 0 0 ${tokens_1.contract.space["2"]}; border: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer; border-radius: ${tokens_1.contract.radius.md}; }
+    & .crisp-settingsshell-back svg { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-settingsshell-back:hover svg { color: ${tokens_1.contract.fgPrimary}; }
 
-    & .settingsshell-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 32px; margin-bottom: ${tokens_1.contract.space["2"]}; padding: 0 ${tokens_1.contract.space["2.5"]}; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-settingsshell-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 32px; margin-bottom: ${tokens_1.contract.space["2"]}; padding: 0 ${tokens_1.contract.space["2.5"]}; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; color: ${tokens_1.contract.fgMuted}; }
     /* The field box owns the ring, so focus has to move it -- the inner
        input kills its own outline. Measured live: a focused field's
        input carries box-shadow: none while its wrapper carries
        inset 0 0 0 1px #266df0. */
-    & .settingsshell-search:focus-within { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
-    & .settingsshell-search svg { flex-shrink: 0; }
-    & .settingsshell-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
-    & .settingsshell-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-settingsshell-search:focus-within { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-settingsshell-search svg { flex-shrink: 0; }
+    & .crisp-settingsshell-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-settingsshell-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
 
-    & .settingsshell-groups { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2.5"]}; }
-    & .settingsshell-group { display: flex; flex-direction: column; gap: 1px; }
-    & .settingsshell-group-label { padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
-    & .settingsshell-item { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 30px; padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; text-align: start; cursor: pointer; transition: background-color .12s; }
-    & .settingsshell-item svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
-    & .settingsshell-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .settingsshell-item:hover { background: ${tokens_1.contract.bgRaised}; }
-    & .settingsshell-item[data-active] { background: ${tokens_1.contract.bgRaised}; font-weight: ${tokens_1.contract.weight.medium}; }
-    & .settingsshell-item[data-active] svg { color: ${tokens_1.contract.fgPrimary}; }
-    & .settingsshell-empty { padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-settingsshell-groups { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2.5"]}; }
+    & .crisp-settingsshell-group { display: flex; flex-direction: column; gap: 1px; }
+    & .crisp-settingsshell-group-label { padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-settingsshell-item { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 30px; padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; text-align: start; cursor: pointer; transition: background-color .12s; }
+    & .crisp-settingsshell-item svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-settingsshell-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-settingsshell-item:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-settingsshell-item[data-active] { background: ${tokens_1.contract.bgRaised}; font-weight: ${tokens_1.contract.weight.medium}; }
+    & .crisp-settingsshell-item[data-active] svg { color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-settingsshell-empty { padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
 
-    & .settingsshell-content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["6"]} ${tokens_1.contract.space["8"]}; }
+    & .crisp-settingsshell-content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["6"]} ${tokens_1.contract.space["8"]}; }
     ${core_1.rtlFlipCss}
   `,
     variants: {},

package/dist/cjs/product/sidebar/sidebar.js

@@ -115,7 +115,7 @@ exports.ATTIO_SIDEBAR_FOOTER = {
     trialActionLabel: "Keep Pro",
 };
 function SectionHeader({ label, open, onToggle, }) {
-    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "sidebar-section-header", "data-collapsed": open ? undefined : "", "aria-expanded": open, onClick: onToggle, children: [(0, jsx_runtime_1.jsx)(IconChevronMini, {}), (0, jsx_runtime_1.jsx)("span", { children: label })] }));
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-sidebar-section-header", "data-collapsed": open ? undefined : "", "aria-expanded": open, onClick: onToggle, children: [(0, jsx_runtime_1.jsx)(IconChevronMini, {}), (0, jsx_runtime_1.jsx)("span", { children: label })] }));
 }
 exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = exports.ATTIO_SIDEBAR_WORKSPACE, items = exports.ATTIO_SIDEBAR_ITEMS, recordsSection = exports.ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = exports.ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = exports.ATTIO_SIDEBAR_CHATS_SECTION, footer = exports.ATTIO_SIDEBAR_FOOTER, ...props }, ref) => {
     const [collapsedSections, setCollapsedSections] = React.useState(() => new Set());
@@ -143,6 +143,6 @@ exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, coll
             return next;
         });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(core_1.Primitive.div, { ref: ref, asChild: asChild, className: (0, sidebar_recipe_1.sidebarRecipe)({ className }), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "sidebar-ws", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), (0, jsx_runtime_1.jsx)("span", { className: "sidebar-ws-name", children: workspace.name }), (0, jsx_runtime_1.jsx)(IconChevronDown, {}), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "ghost", size: "sm", shape: "icon", className: "sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: (0, jsx_runtime_1.jsx)(IconCollapsePanel, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "sidebar-searchrow", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "sidebar-search", onClick: () => setCommandOpen(true), children: [(0, jsx_runtime_1.jsx)(IconSearch, {}), (0, jsx_runtime_1.jsx)("span", { className: "sidebar-search-label", children: searchLabel }), (0, jsx_runtime_1.jsx)("span", { className: "sidebar-search-kbd", children: "\u2318K" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: (0, jsx_runtime_1.jsx)(IconInbox, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-divider" }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", active: active, icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), trailing: trailing, children: label }, label))) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "rounded", tone: tone, children: (0, jsx_runtime_1.jsx)(Glyph, {}) }), children: label }, label))) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "sidebar-newlist", children: listsSection.newListLabel }) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), children: label }, label))) }), (0, jsx_runtime_1.jsxs)("div", { className: "sidebar-footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", className: "sidebar-pill", children: footer.gettingStartedLabel }), (0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(IconInvite, {}), children: footer.inviteLabel }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "sidebar-trial", children: [(0, jsx_runtime_1.jsx)("span", { children: footer.trialText }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] }), (0, jsx_runtime_1.jsx)(command_1.Command, { open: commandOpen, onOpenChange: setCommandOpen })] }));
+    return ((0, jsx_runtime_1.jsxs)(core_1.Primitive.div, { ref: ref, asChild: asChild, className: (0, sidebar_recipe_1.sidebarRecipe)({ className }), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-ws", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-sidebar-ws-name", children: workspace.name }), (0, jsx_runtime_1.jsx)(IconChevronDown, {}), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "ghost", size: "sm", shape: "icon", className: "crisp-sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: (0, jsx_runtime_1.jsx)(IconCollapsePanel, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-searchrow", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-sidebar-search", onClick: () => setCommandOpen(true), children: [(0, jsx_runtime_1.jsx)(IconSearch, {}), (0, jsx_runtime_1.jsx)("span", { className: "crisp-sidebar-search-label", children: searchLabel }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-sidebar-search-kbd", children: "\u2318K" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: (0, jsx_runtime_1.jsx)(IconInbox, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-divider" }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", active: active, icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), trailing: trailing, children: label }, label))) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "rounded", tone: tone, children: (0, jsx_runtime_1.jsx)(Glyph, {}) }), children: label }, label))) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-sidebar-newlist", children: listsSection.newListLabel }) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), children: label }, label))) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", className: "crisp-sidebar-pill", children: footer.gettingStartedLabel }), (0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(IconInvite, {}), children: footer.inviteLabel }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-trial", children: [(0, jsx_runtime_1.jsx)("span", { children: footer.trialText }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] }), (0, jsx_runtime_1.jsx)(command_1.Command, { open: commandOpen, onOpenChange: setCommandOpen })] }));
 });
 exports.Sidebar.displayName = "Sidebar";

package/dist/cjs/product/sidebar/sidebar.recipe.js

@@ -9,27 +9,27 @@ const config = (0, core_1.defineRecipe)({
   ; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}
   ; padding: ${tokens_1.contract.space["2"]}
   ; font-family: ${tokens_1.contract.font.sans}
-  ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto; & .sidebar-section { display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px}; margin-top: ${tokens_1.contract.space["2"]}; }
-  & .sidebar-section[data-collapsed] { display: none; }
-  & .sidebar-label { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; }
-  & .sidebar-section-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; margin: 0; border: none; background: none; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
-  & .sidebar-section-header svg { flex-shrink: 0; transition: transform .15s ease; }
-  & .sidebar-section-header[data-collapsed] svg { transform: rotate(-90deg); }
-  & .sidebar-ws { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.header}; padding: 0 ${tokens_1.contract.space["2"]}; border-radius: ${tokens_1.contract.radius.lg}; cursor: pointer; transition: background-color 0.16s; }
-  & .sidebar-ws:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); }
-  & .sidebar-ws-name { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  & .sidebar-ws-collapse { margin-inline-start: auto; }
-  & .sidebar-searchrow { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; margin-top: ${tokens_1.contract.space["2.5"]}; padding-inline-end: ${tokens_1.contract.space["2"]}; }
-  & .sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["0.5"]}; }
-  & .sidebar-trial { display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
-  & .sidebar-search { box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["1"]} 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; text-align: start; cursor: pointer; transition: background-color 0.14s; }
-  & .sidebar-search:hover { background: ${tokens_1.contract.bgRaised}; }
-  & .sidebar-search-label { flex: 1; color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; }
-  & .sidebar-search-kbd { margin-inline-start: auto; display: inline-flex; align-items: center; height: 18px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent); font-size: ${tokens_1.contract.text.xs}; }
-  & .sidebar-pill { border-radius: ${tokens_1.contract.radius.full}; align-self: center; width: auto; height: 32px; padding-inline: ${tokens_1.contract.space["4"]}; }
-  & .sidebar-divider { height: 0; border: none; border-top: 1px solid ${tokens_1.contract.borderSubtle}; margin: ${tokens_1.contract.space["2"]} calc(-1 * ${tokens_1.contract.space["2"]}) 0; }
-  & .sidebar-newlist { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: ${tokens_1.contract.size.row}; border-radius: ${tokens_1.contract.radius.md}; border: 1px dashed ${tokens_1.contract.borderDefault}; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
-  & .sidebar-newlist:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+  ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto; & .crisp-sidebar-section { display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px}; margin-top: ${tokens_1.contract.space["2"]}; }
+  & .crisp-sidebar-section[data-collapsed] { display: none; }
+  & .crisp-sidebar-label { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; }
+  & .crisp-sidebar-section-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; margin: 0; border: none; background: none; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
+  & .crisp-sidebar-section-header svg { flex-shrink: 0; transition: transform .15s ease; }
+  & .crisp-sidebar-section-header[data-collapsed] svg { transform: rotate(-90deg); }
+  & .crisp-sidebar-ws { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.header}; padding: 0 ${tokens_1.contract.space["2"]}; border-radius: ${tokens_1.contract.radius.lg}; cursor: pointer; transition: background-color 0.16s; }
+  & .crisp-sidebar-ws:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); }
+  & .crisp-sidebar-ws-name { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .crisp-sidebar-ws-collapse { margin-inline-start: auto; }
+  & .crisp-sidebar-searchrow { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; margin-top: ${tokens_1.contract.space["2.5"]}; padding-inline-end: ${tokens_1.contract.space["2"]}; }
+  & .crisp-sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["0.5"]}; }
+  & .crisp-sidebar-trial { display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
+  & .crisp-sidebar-search { box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["1"]} 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; text-align: start; cursor: pointer; transition: background-color 0.14s; }
+  & .crisp-sidebar-search:hover { background: ${tokens_1.contract.bgRaised}; }
+  & .crisp-sidebar-search-label { flex: 1; color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; }
+  & .crisp-sidebar-search-kbd { margin-inline-start: auto; display: inline-flex; align-items: center; height: 18px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent); font-size: ${tokens_1.contract.text.xs}; }
+  & .crisp-sidebar-pill { border-radius: ${tokens_1.contract.radius.full}; align-self: center; width: auto; height: 32px; padding-inline: ${tokens_1.contract.space["4"]}; }
+  & .crisp-sidebar-divider { height: 0; border: none; border-top: 1px solid ${tokens_1.contract.borderSubtle}; margin: ${tokens_1.contract.space["2"]} calc(-1 * ${tokens_1.contract.space["2"]}) 0; }
+  & .crisp-sidebar-newlist { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: ${tokens_1.contract.size.row}; border-radius: ${tokens_1.contract.radius.md}; border: 1px dashed ${tokens_1.contract.borderDefault}; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
+  & .crisp-sidebar-newlist:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
 
   ${core_1.rtlFlipCss}
   `,