@crisp-ui-kit/crisp 0.57.1 → 0.57.2

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

@@ -5,10 +5,20 @@ import { contract as c } from "../../tokens/index.js";
 // baseline needs, reserved as bottom padding so it's real box height and not
 // paint that trailing content can sit on top of. The bar carries 12px inline
 // padding too, and draws its own full-width `::after` baseline in
-// borderSubtle at its bottom edge, spanning that padding. The active tab is
-// a light pill — bg #fbfbfb + inset ring borderSubtle, r8 — with a 1px ink
-// underline that sits on the baseline (painted above it) and slides along it;
-// inactive tabs are muted and fill to a subtle pill on hover. Each tab carries
+// borderSubtle at its bottom edge, spanning that padding.
+//
+// your-moon/crisp#934: the selected tab used to be a light
+// filled pill (bg #fbfbfb + inset ring borderSubtle, r8) with a 1px ink
+// underline on top of it. Owner-directed: underline tabs, no fill pill --
+// seed-design's own `tab.yaml` has no `root.color` property at all, at any
+// state (selected/hover/pressed); selection is carried purely by the label
+// darkening (muted -> ink, unchanged, already matched seed) plus the
+// existing underline (already `fgPrimary`, "same colour as selected text,
+// not brand" -- also already matched seed). Only the selected pill's own
+// fill/ring is removed here; unselected tabs keep their existing subtle
+// hover tint (a desktop hover affordance seed's spec doesn't need to
+// consider one way or the other, and the owner didn't ask to remove).
+// Inactive tabs are muted and fill to a subtle pill on hover. Each tab carries
 // a 16px leading icon and an optional count badge. Measured from the live
 // app: bar `padding: 0 12px 8px`, 28px pills, 4/8 padding, 6px icon-label
 // gap, 14/500 labels. The count badge (crisp#697, re-measured against a
@@ -45,11 +55,18 @@ const config = defineRecipe({
 
     & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${c.space["1"]}; box-sizing: content-box; height: ${c.size.row}; padding: 0 ${c.space["3"]} ${c.space["2"]}; flex-shrink: 0; }
     & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: ${c.borderSubtle}; }
+    /* crisp#908: an alternative to the "+N more" collapse above (crisp#863) --
+       a consumer opts into a single scrolling row instead (Naver/Kakao's own
+       pattern, docs/study/korean/), never both at once. No new visual value:
+       reuses the same list gap/tab geometry, only adds overflow-x + snap. */
+    & .crisp-tabs-list[data-overflow="scroll"] { overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x mandatory; scrollbar-width: none; }
+    & .crisp-tabs-list[data-overflow="scroll"]::-webkit-scrollbar { display: none; }
+    & .crisp-tabs-list[data-overflow="scroll"] .crisp-tabs-tab { flex-shrink: 0; scroll-snap-align: start; }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: ${c.space["1"]}; }
-    & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: ${c.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: ${c.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
     & .crisp-tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
-    & .crisp-tabs-tab[data-selected] { color: ${c.fgPrimary}; background: ${c.bgSubtle}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; }
+    & .crisp-tabs-tab[data-selected] { color: ${c.fgPrimary}; }
     & .crisp-tabs-tab:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 ${c.space["1"]}; border-radius: 4px; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); box-shadow: inset 0 0 0 1px ${c.borderSubtle}; font-size: 10px; line-height: 14px; font-weight: ${c.weight.medium}; color: ${c.fgNeutralSoft}; }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${c.fgPrimary}; }

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

@@ -1,13 +1,16 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c, elevation as e } from "../../tokens/index.js";
-// A multiline text field: an inset 1px ring (radius 8), 14px text, and an
+import { contract as c } from "../../tokens/index.js";
+// A multiline text field: a real 1px border (radius 8), 14px text, and an
 // optional character counter pinned bottom-right (12px, muted). Focus rings
 // the field brand.
 //
-// The ring is `elevation.textField` (#466), not `elevation.field` — this
-// comment already correctly described "an inset 1px ring", but the code
-// pulled in `field`'s own button-chrome shadow (a ring PLUS a glow and a
-// drop-shadow layer), which live Attio never carries on a real typed field.
+// your-moon/crisp#920: the rest-state edge used to be `elevation.textField`,
+// a `box-shadow` ring (#466's fix for a real typed field's 1px ring, not
+// `field`'s button-chrome glow/drop-shadow layers) -- now a real `border`,
+// matching Input's own #914/#910 technique and seed-design's `text-input.yaml`
+// (an actual border that THICKENS on focus/invalid via the ::after overlay
+// below, not a fixed-width ring that only recolors). `borderDefault` is
+// seed's own `stroke.neutral-weak`, already the crisp token's exact value.
 //
 // The inset is seed-design's, not Attio's -- the second deliberate divergence
 // after the focus treatment. seed's text-input sets its inline inset to
@@ -24,10 +27,10 @@ const config = defineRecipe({
 
     & .crisp-textarea-field {
       box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical;
-      margin: 0; padding: ${c.space["2.5"]} 14px; border: none; border-radius: ${c.radius.md};
-      background: ${c.bgSurface}; box-shadow: ${e.textField};
+      margin: 0; padding: ${c.space["2.5"]} 14px; border-radius: ${c.radius.md};
+      background: ${c.bgSurface}; border: 1px solid ${c.borderDefault};
       font-family: inherit; font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgPrimary};
-      outline: none; transition: box-shadow .15s ease;
+      outline: none;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     }
     & .crisp-textarea-field::placeholder { color: ${c.fgMuted}; }

package/dist/esm/index.js

@@ -8,6 +8,7 @@ export * from "./components/avatar/index.js";
 export * from "./components/avatargroup/index.js";
 export * from "./components/badge/index.js";
 export * from "./components/barchart/index.js";
+export * from "./components/bottomsheet/index.js";
 export * from "./components/breadcrumb/index.js";
 export * from "./components/bulkbar/index.js";
 export * from "./components/button/index.js";
@@ -15,6 +16,7 @@ export * from "./components/callout/index.js";
 export * from "./components/card/index.js";
 export * from "./components/checkbox/index.js";
 export * from "./components/chip/index.js";
+export * from "./components/chipgroup/index.js";
 export * from "./components/columncalc/index.js";
 export * from "./components/composewindow/index.js";
 export * from "./components/contextmenu/index.js";
@@ -36,6 +38,7 @@ export * from "./components/kbd/index.js";
 export * from "./components/linechart/index.js";
 export * from "./components/mentionchip/index.js";
 export * from "./components/menu/index.js";
+export * from "./components/menusheet/index.js";
 export * from "./components/middletruncate/index.js";
 export * from "./components/multiselect/index.js";
 export * from "./components/personchip/index.js";
@@ -49,6 +52,7 @@ export * from "./components/select/index.js";
 export * from "./components/skeleton/index.js";
 export * from "./components/skiplink/index.js";
 export * from "./components/slider/index.js";
+export * from "./components/snackbar/index.js";
 export * from "./components/spinner/index.js";
 export * from "./components/stagebar/index.js";
 export * from "./components/statcard/index.js";
@@ -83,7 +87,9 @@ export * from "./product/headerbar/index.js";
 export * from "./product/importdialog/index.js";
 export * from "./product/inbox/index.js";
 export * from "./product/listpage/index.js";
+export * from "./product/memberssettings/index.js";
 export * from "./product/navitem/index.js";
+export * from "./product/notificationssettings/index.js";
 export * from "./product/objectsettings/index.js";
 export * from "./product/onboarding/index.js";
 export * from "./product/recordpage/index.js";
@@ -98,5 +104,6 @@ export * from "./product/tasklist/index.js";
 export * from "./product/themepicker/index.js";
 export * from "./product/trialbanner/index.js";
 export * from "./product/viewtoggle/index.js";
+export * from "./product/workspacegeneralsettings/index.js";
 // design tokens + recipe core (for building custom components)
 export * from "./tokens/index.js";

package/dist/esm/product/authshell/authshell.recipe.js

@@ -40,7 +40,11 @@ const config = defineRecipe({
     & .crisp-authshell-progress-fill { height: 2px; background: ${c.fgPrimary}; border-radius: 4px; transition: width .2s; }
 
     & .crisp-authshell-logo { margin-top: ${c.space["8"]}; min-height: 24px; display: flex; align-items: center; gap: ${c.space["2.5"]}; }
-    & .crisp-authshell-logo-badge { flex-shrink: 0; box-sizing: border-box; width: 32px; height: 32px; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: #fff; display: flex; align-items: center; justify-content: center; }
+    /* your-moon/crisp#953: bgBrandContrast, not bgBrandSolid --
+       the accent (#0298d9) only clears 3.23:1 with white; the darker
+       sibling clears 4.5:1+, same fix already applied to Button/Badge/
+       Avatar (#897). */
+    & .crisp-authshell-logo-badge { flex-shrink: 0; box-sizing: border-box; width: 32px; height: 32px; border-radius: ${c.radius.md}; background: ${c.bgBrandContrast}; color: #fff; display: flex; align-items: center; justify-content: center; }
     & .crisp-authshell-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
     & .crisp-authshell-logo-title { font-size: ${c.text.xl}; font-weight: ${c.weight.bold}; letter-spacing: -0.2px; color: ${c.fgPrimary}; }
     & .crisp-authshell-logo-subtitle { font-size: ${c.text.sm}; color: ${c.fgMuted}; }

package/dist/esm/product/command/command.recipe.js

@@ -29,7 +29,10 @@ const config = defineRecipe({
   & .crisp-command-list > .crisp-command-group-label:first-child { padding-top: ${c.space["1"]}; }
   & .crisp-command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 ${c.space["2.5"]}; border-top: 1px solid ${c.borderSubtle}; }
   & .crisp-command-footer-nav { display: flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
-  & .crisp-command-footer-action { display: flex; align-items: center; gap: ${c.space["2"]}; height: 28px; max-width: 60%; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
+  /* your-moon/crisp#953: bgBrandContrast, not bgBrandSolid --
+     the accent (#0298d9) only clears 3.23:1 with white; the darker sibling
+     clears 4.5:1+, same fix already applied to Button/Badge/Avatar (#897). */
+  & .crisp-command-footer-action { display: flex; align-items: center; gap: ${c.space["2"]}; height: 28px; max-width: 60%; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandContrast}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
   & .crisp-command-footer-action:disabled { opacity: 0.5; cursor: default; }
   & .crisp-command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   & .crisp-command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${c.text.xs}; }

package/dist/esm/product/comments/comments.js

@@ -277,8 +277,13 @@ function CommentRow({ comment, replyLabel, reactLabel, resolveLabel, moreLabel,
  * nothing on its own beyond that data. See `CommentCountBadge` for the
  * separate row affordance (P-051) — deliberately NOT part of this
  * component, since it lives in a table cell this component doesn't own.
+ *
+ * `variant="drawer"` (default) is today's measured 320px + left-border
+ * look; `variant="pane"` (crisp#960) fills its container's width instead,
+ * for a consumer embedding this in a full-width tab pane rather than a
+ * true slide-over/drawer.
  */
-export function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResolved = false, onShowResolvedChange, onlyMine = false, onOnlyMineChange, activeThreadId: activeThreadIdProp, onActiveThreadChange, onPost, onReact, onResolve, onDelete, onCopyLink, emojiOptions = DEFAULT_EMOJI, mentionTrigger = "@", renderMentionPicker, onClose, closeLabel: closeLabelProp, backLabel: backLabelProp, title: titleProp, threadTitle: threadTitleProp, breadcrumbPrefix: breadcrumbPrefixProp, composerPlaceholder: composerPlaceholderProp, replyPlaceholder: replyPlaceholderProp, postLabel: postLabelProp, replyPostLabel: replyPostLabelProp, emptyLabel, filterLabel: filterLabelProp, showResolvedLabel: showResolvedLabelProp, onlyMineLabel: onlyMineLabelProp, replyActionLabel: replyActionLabelProp, reactActionLabel: reactActionLabelProp, resolveActionLabel: resolveActionLabelProp, resolvedByYouLabel: resolvedByYouLabelProp, resolvedByLabel, moreActionsLabel: moreActionsLabelProp, copyLinkLabel: copyLinkLabelProp, deleteLabel: deleteLabelProp, addReactionLabel: addReactionLabelProp, reactionSearchLabel: reactionSearchLabelProp, deleteConfirmTitle: deleteConfirmTitleProp, deleteConfirmBody: deleteConfirmBodyProp, deleteConfirmActionLabel: deleteConfirmActionLabelProp, cancelLabel: cancelLabelProp, composerMentionToolLabel: composerMentionToolLabelProp, className, ...rest }) {
+export function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResolved = false, onShowResolvedChange, onlyMine = false, onOnlyMineChange, activeThreadId: activeThreadIdProp, onActiveThreadChange, onPost, onReact, onResolve, onDelete, onCopyLink, emojiOptions = DEFAULT_EMOJI, mentionTrigger = "@", renderMentionPicker, onClose, closeLabel: closeLabelProp, backLabel: backLabelProp, title: titleProp, threadTitle: threadTitleProp, breadcrumbPrefix: breadcrumbPrefixProp, composerPlaceholder: composerPlaceholderProp, replyPlaceholder: replyPlaceholderProp, postLabel: postLabelProp, replyPostLabel: replyPostLabelProp, emptyLabel, filterLabel: filterLabelProp, showResolvedLabel: showResolvedLabelProp, onlyMineLabel: onlyMineLabelProp, replyActionLabel: replyActionLabelProp, reactActionLabel: reactActionLabelProp, resolveActionLabel: resolveActionLabelProp, resolvedByYouLabel: resolvedByYouLabelProp, resolvedByLabel, moreActionsLabel: moreActionsLabelProp, copyLinkLabel: copyLinkLabelProp, deleteLabel: deleteLabelProp, addReactionLabel: addReactionLabelProp, reactionSearchLabel: reactionSearchLabelProp, deleteConfirmTitle: deleteConfirmTitleProp, deleteConfirmBody: deleteConfirmBodyProp, deleteConfirmActionLabel: deleteConfirmActionLabelProp, cancelLabel: cancelLabelProp, composerMentionToolLabel: composerMentionToolLabelProp, variant, className, ...rest }) {
     const closeLabel = useCrispMessage(closeLabelProp, "Close");
     const backLabel = useCrispMessage(backLabelProp, "Back");
     const title = useCrispMessage(titleProp, "All comments");
@@ -331,7 +336,7 @@ export function CommentsPanel({ threads, currentUserId, subject, subjectIcon, sh
     const activeThread = activeThreadId
         ? threads.find((t) => t.id === activeThreadId)
         : null;
-    return (_jsxs("div", { className: commentsRecipe({ className }), role: "dialog", "aria-label": title, ...rest, children: [_jsxs("div", { className: "crisp-comments-head", children: [activeThread ? (_jsx("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": backLabel, onClick: () => setActiveThreadId(null), children: _jsx(ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) : null, _jsxs("div", { className: "crisp-comments-title-wrap", children: [_jsx("span", { className: "crisp-comments-title", children: activeThread ? threadTitle : title }), activeThread && (_jsxs("span", { className: "crisp-comments-breadcrumb", children: [breadcrumbPrefix, " ", subjectIcon, " ", subject] }))] }), !activeThread && (_jsxs(Menu, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": filterLabel, children: _jsx(ListFilter, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [_jsx(MenuCheckboxItem, { checked: showResolved, onCheckedChange: onShowResolvedChange, children: showResolvedLabel }), _jsx(MenuCheckboxItem, { checked: onlyMine, onCheckedChange: onOnlyMineChange, children: onlyMineLabel })] })), onClose && (_jsx("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }), _jsx("div", { className: "crisp-comments-body crisp-comments-body--pad-top", children: activeThread ? (_jsxs("div", { children: [_jsx(CommentRow, { comment: activeThread.root, currentUserId: currentUserId, replyLabel: replyActionLabel, reactLabel: reactActionLabel, resolveLabel: resolveActionLabel, moreLabel: moreActionsLabel, copyLinkLabel: copyLinkLabel, deleteLabel: deleteLabel, addReactionLabel: addReactionLabel, reactionSearchLabel: reactionSearchLabel, emojiOptions: emojiOptions, resolvable: !!onResolve, resolved: activeThread.resolved, resolvedLabel: activeThread.resolved
+    return (_jsxs("div", { className: commentsRecipe({ variant, className }), role: "dialog", "aria-label": title, ...rest, children: [_jsxs("div", { className: "crisp-comments-head", children: [activeThread ? (_jsx("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": backLabel, onClick: () => setActiveThreadId(null), children: _jsx(ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) : null, _jsxs("div", { className: "crisp-comments-title-wrap", children: [_jsx("span", { className: "crisp-comments-title", children: activeThread ? threadTitle : title }), activeThread && (_jsxs("span", { className: "crisp-comments-breadcrumb", children: [breadcrumbPrefix, " ", subjectIcon, " ", subject] }))] }), !activeThread && (_jsxs(Menu, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": filterLabel, children: _jsx(ListFilter, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [_jsx(MenuCheckboxItem, { checked: showResolved, onCheckedChange: onShowResolvedChange, children: showResolvedLabel }), _jsx(MenuCheckboxItem, { checked: onlyMine, onCheckedChange: onOnlyMineChange, children: onlyMineLabel })] })), onClose && (_jsx("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }), _jsx("div", { className: "crisp-comments-body crisp-comments-body--pad-top", children: activeThread ? (_jsxs("div", { children: [_jsx(CommentRow, { comment: activeThread.root, currentUserId: currentUserId, replyLabel: replyActionLabel, reactLabel: reactActionLabel, resolveLabel: resolveActionLabel, moreLabel: moreActionsLabel, copyLinkLabel: copyLinkLabel, deleteLabel: deleteLabel, addReactionLabel: addReactionLabel, reactionSearchLabel: reactionSearchLabel, emojiOptions: emojiOptions, resolvable: !!onResolve, resolved: activeThread.resolved, resolvedLabel: activeThread.resolved
                                 ? activeThread.resolvedBy?.id === currentUserId ||
                                     !activeThread.resolvedBy
                                     ? resolvedByYouLabel

package/dist/esm/product/comments/comments.recipe.js

@@ -15,8 +15,8 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // width and still gets an odd number).
 const config = defineRecipe({
     name: "comments",
-    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 320px; height: 100%;
-    background: ${c.bgSurface}; border-inline-start: 1px solid ${c.borderSubtle};
+    base: `display: flex; flex-direction: column; box-sizing: border-box; height: 100%;
+    background: ${c.bgSurface};
     font-family: ${c.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & * { box-sizing: border-box; }
@@ -96,9 +96,13 @@ const config = defineRecipe({
        box-shadow, so this reuses that literal rather than re-deriving it.
        32px/radius.lg/6px-10px padding has no matching Button \`size\` yet
        (24/28/40 are the three that exist), so this stays hand-rolled instead
-       of stretching one of those. */
-    & .crisp-comments-post { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 6px ${c.space["2.5"]}; border: none; border-radius: ${c.radius.lg}; background: ${c.bgBrandSolid}; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgOnBrand}; cursor: pointer; opacity: 1; transition: opacity .12s, background-color .12s; }
-    & .crisp-comments-post:hover:not(:disabled) { background: ${c.bgBrandSolidPressed}; }
+       of stretching one of those. your-moon/crisp#953:
+       bgBrandContrast, not bgBrandSolid -- the accent (#0298d9) only clears
+       3.23:1 with white; same fix already applied to Button/Badge/Avatar
+       (#897). Hover is a brightness filter on the new fill, matching that
+       PR's own Button primary treatment, not bgBrandSolidPressed. */
+    & .crisp-comments-post { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 6px ${c.space["2.5"]}; border: none; border-radius: ${c.radius.lg}; background: ${c.bgBrandContrast}; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgOnBrand}; cursor: pointer; opacity: 1; transition: opacity .12s, filter .12s; }
+    & .crisp-comments-post:hover:not(:disabled) { filter: brightness(0.96); }
     & .crisp-comments-post:disabled { opacity: .4; cursor: default; }
 
     /* Filter menu -- measured: 220px, radius 12 (radius.xl), 4px padding,
@@ -110,8 +114,22 @@ const config = defineRecipe({
        rather than re-derived since it's the same atomic-chip affordance. */
     & .crisp-comments-mention { display: inline; padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, ${c.bgBrandSolid} 12%, transparent); color: ${c.bgBrandSolid}; font-weight: ${c.weight.medium}; user-select: none; }
     ${rtlFlipCss}`,
-    variants: {},
-    defaultVariants: {},
+    variants: {
+        // your-moon/crisp#960: the 320px width + left-border hairline is a
+        // drawer-consumer look (RecordPage's own comments drawer, #864), not
+        // an intrinsic property of the panel itself. A consumer embedding this
+        // in a full-width tab pane (internal/grc's own record-page Comments
+        // tab, sibling to Related/Activity/Notes/Tasks/Lists, all of which
+        // fill the pane) needs `width: 100%` and no border -- a tab pane
+        // doesn't need a seam separating it from itself. `drawer` (default)
+        // is today's exact, already-measured look; nothing changes for an
+        // existing consumer that doesn't pass `variant`.
+        variant: {
+            drawer: `width: 320px; border-inline-start: 1px solid ${c.borderSubtle};`,
+            pane: `width: 100%;`,
+        },
+    },
+    defaultVariants: { variant: "drawer" },
     compoundVariants: [],
     // Two pieces below intentionally live OUTSIDE the nested \`base\` above,
     // the same reason Menu's own \`.crisp-menu-content\` does (menu.recipe.ts's

package/dist/esm/product/memberssettings/index.js

@@ -0,0 +1 @@
+export { InviteMembersDialog, MembersSettings, } from "./memberssettings.js";

package/dist/esm/product/memberssettings/memberssettings.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Filter, MoreHorizontal, Search, User, UsersRound } from "lucide-react";
+import * as React from "react";
+import { Avatar } from "../../components/avatar/index.js";
+import { Badge } from "../../components/badge/index.js";
+import { Button } from "../../components/button/index.js";
+import { Dialog, DialogBody, DialogFooter } from "../../components/dialog/index.js";
+import { FormField } from "../../components/formfield/index.js";
+import { Select } from "../../components/select/index.js";
+import { useTablistKeyboard } from "../../components/tabs/tabs-keyboard.js";
+import { Textarea } from "../../components/textarea/index.js";
+import { TextLink } from "../../components/textlink/index.js";
+import { memberssettingsRecipe } from "./memberssettings.recipe.js";
+/**
+ * Attio's "Members and teams" settings page (crisp#636, P-119/P-120):
+ * title + description, a Members/Teams segmented switcher, a
+ * search+Filter+Invite toolbar, and the members table (User/Role/Teams).
+ * Compose `InviteMembersDialog` alongside for the "Invite members" flow.
+ */
+export function MembersSettings({ members, searchValue, onSearchChange, onFilterClick, onInviteClick, onRowMenuClick, tab: tabProp, onTabChange, teamsContent, className, title = "Members and teams", description = "Manage workspace members and teams, set access levels, and invite new users.", learnMoreLabel = "Learn more", learnMoreHref = "#", membersTabLabel = "Members", teamsTabLabel = "Teams", tablistLabel = "Members and teams", searchPlaceholder = "Search name or email", filterLabel = "Filter", inviteLabel = "Invite members", userColumnLabel = "User", roleColumnLabel = "Role", teamsColumnLabel = "Teams", memberActionsLabel = "Member actions", noTeamsLabel = "No teams yet", ...rest }) {
+    const [internalTab, setInternalTab] = React.useState("members");
+    const tab = tabProp ?? internalTab;
+    const setTab = (next) => {
+        if (tabProp === undefined)
+            setInternalTab(next);
+        onTabChange?.(next);
+    };
+    const listRef = React.useRef(null);
+    const tabEntries = [
+        {
+            value: "members",
+            label: membersTabLabel,
+            icon: _jsx(User, { size: 16 }),
+        },
+        {
+            value: "teams",
+            label: teamsTabLabel,
+            icon: _jsx(UsersRound, { size: 16 }),
+        },
+    ];
+    const { onKeyDown, tabIndexFor } = useTablistKeyboard({
+        tabs: tabEntries,
+        active: tab,
+        select: (value) => setTab(value),
+        listRef,
+    });
+    return (_jsx("div", { className: memberssettingsRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-memberssettings-page", children: [_jsxs("div", { className: "crisp-memberssettings-heading", children: [_jsx("h1", { className: "crisp-memberssettings-title", children: title }), _jsxs("p", { className: "crisp-memberssettings-desc", children: [description, " ", _jsx(TextLink, { href: learnMoreHref, children: learnMoreLabel })] })] }), _jsx("div", { ref: listRef, className: "crisp-memberssettings-tabpair", role: "tablist", "aria-label": tablistLabel, onKeyDown: onKeyDown, children: tabEntries.map((t) => (_jsxs("button", { type: "button", role: "tab", "data-value": t.value, "aria-selected": tab === t.value, "data-selected": tab === t.value ? "" : undefined, tabIndex: tabIndexFor(t.value), className: "crisp-memberssettings-tab", onClick: () => setTab(t.value), children: [t.icon, t.label] }, t.value))) }), tab === "members" ? (_jsxs("div", { role: "tabpanel", "aria-label": membersTabLabel, children: [_jsxs("div", { className: "crisp-memberssettings-toolbar", children: [_jsxs("div", { className: "crisp-memberssettings-search", children: [_jsx(Search, { size: 16 }), _jsx("input", { value: searchValue, onChange: (e) => onSearchChange?.(e.target.value), placeholder: searchPlaceholder })] }), _jsxs("button", { type: "button", className: "crisp-memberssettings-filterbtn", onClick: onFilterClick, children: [_jsx(Filter, { size: 14 }), filterLabel] }), _jsx("button", { type: "button", className: "crisp-memberssettings-invitebtn", onClick: onInviteClick, children: inviteLabel })] }), _jsx("div", { className: "crisp-memberssettings-table-wrap", children: _jsxs("table", { className: "crisp-memberssettings-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: userColumnLabel }), _jsx("th", { children: roleColumnLabel }), _jsx("th", { children: teamsColumnLabel })] }) }), _jsx("tbody", { children: members.map((m) => (_jsxs("tr", { children: [_jsx("td", { children: _jsxs("div", { className: "crisp-memberssettings-user", children: [m.avatarSrc ? (_jsx("img", { className: "crisp-memberssettings-avatarimg", src: m.avatarSrc, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "circle", tone: "brand", children: String(m.name).charAt(0) })), _jsxs("div", { className: "crisp-memberssettings-usermeta", children: [_jsxs("span", { children: [m.name, m.isYou ? " (You)" : ""] }), _jsx("span", { className: "crisp-memberssettings-useremail", children: m.email })] })] }) }), _jsx("td", { children: m.role === "Admin" ? (_jsx(Badge, { tone: "purple", children: m.role })) : (m.role) }), _jsxs("td", { children: [m.teams ?? "—", _jsx("button", { type: "button", className: "crisp-memberssettings-kebab", "aria-label": memberActionsLabel, onClick: () => onRowMenuClick?.(m), children: _jsx(MoreHorizontal, { size: 16 }) })] })] }, m.id))) })] }) })] })) : (_jsx("div", { role: "tabpanel", "aria-label": teamsTabLabel, children: teamsContent ?? (_jsx("div", { className: "crisp-memberssettings-teamspanel", children: noTeamsLabel })) }))] }) }));
+}
+MembersSettings.displayName = "MembersSettings";
+/**
+ * Attio's "Invite members" modal (crisp#636, P-120), measured live: 708px
+ * wide, a multi-email composer, an "Invite as" select (default Member) and
+ * an optional "Add to team" search-or-create select, footer "Send Invites".
+ */
+export function InviteMembersDialog({ open, onOpenChange, emails, onEmailsChange, inviteAs, onInviteAsChange, team, onTeamChange, teamOptions = [], onSend, title = "Invite members", emailsPlaceholder = "Send Invite to ...", inviteAsFieldLabel = "Invite as", memberOptionLabel = "Member — can edit", adminOptionLabel = "Admin — full access", addToTeamFieldLabel = "Add to team", addToTeamPlaceholder = "Search or create a team", sendLabel = "Send Invites ⌘⏎", ...rest }) {
+    const inviteAsOptions = [
+        { value: "member", label: memberOptionLabel },
+        { value: "admin", label: adminOptionLabel },
+    ];
+    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, title: title, width: 708, ...rest, children: [_jsxs(DialogBody, { children: [_jsx("div", { className: "crisp-memberssettings-invitefield", children: _jsx(Textarea, { value: emails, onChange: (e) => onEmailsChange(e.target.value), placeholder: emailsPlaceholder, rows: 3 }) }), _jsx(FormField, { label: inviteAsFieldLabel, children: _jsx(Select, { options: inviteAsOptions, value: inviteAs, onValueChange: (v) => onInviteAsChange(v) }) }), _jsx(FormField, { label: addToTeamFieldLabel, optional: true, children: _jsx(Select, { options: teamOptions, value: team, onValueChange: onTeamChange, placeholder: addToTeamPlaceholder, searchable: true }) })] }), _jsx(DialogFooter, { children: _jsx(Button, { intent: "primary", onClick: onSend, children: sendLabel }) })] }));
+}
+InviteMembersDialog.displayName = "InviteMembersDialog";

package/dist/esm/product/memberssettings/memberssettings.recipe.js

@@ -0,0 +1,80 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// Measured live against app.attio.com/<workspace>/settings/members-and-teams
+// (crisp#636, P-119/P-120). The Members/Teams switcher is a plain segmented
+// pill toggle -- NOT the shared `Tabs` primitive, which always reserves an
+// 8px baseline strip and draws an ink underline (crisp#749's own tabs
+// recipe comment): this page's tab container measured a clean 28px, no
+// baseline, no underline, bg transparent. Reusing `Tabs` here would paint a
+// baseline Attio's own switcher doesn't have.
+const config = defineRecipe({
+    name: "memberssettings",
+    base: `& .crisp-memberssettings-page { display: flex; flex-direction: column; gap: ${c.space["6"]}; font-family: ${c.font.sans}; }
+    & .crisp-memberssettings-heading { display: flex; flex-direction: column; gap: ${c.space["0.5"]}; }
+    & .crisp-memberssettings-title { font-size: 24px; line-height: 28px; font-weight: ${c.weight.semibold}; letter-spacing: -0.48px; color: ${c.fgPrimary}; margin: 0; }
+    & .crisp-memberssettings-desc { font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgMuted}; margin: 0; }
+
+    /* Segmented Members/Teams switcher -- measured: 28px pills, radius 8,
+       4px gap, 6px icon-label gap, 14/500 label, selected bg bgSubtle +
+       inset borderSubtle ring, unselected transparent + a flat 63%-opacity
+       fgPrimary mix (measured rgba(0,0,0,.63) on the live page, not the
+       solid fgMuted token — same alpha technique this file's table header
+       already uses). */
+    & .crisp-memberssettings-tabpair { display: inline-flex; align-items: center; gap: 4px; }
+    & .crisp-memberssettings-tab { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: none; box-shadow: inset 0 0 0 1px transparent; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-memberssettings-tab svg { flex-shrink: 0; }
+    & .crisp-memberssettings-tab:hover:not([data-selected]) { color: ${c.fgPrimary}; }
+    & .crisp-memberssettings-tab[data-selected] { color: ${c.fgPrimary}; background: ${c.bgSubtle}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; }
+    & .crisp-memberssettings-tab:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+
+    /* Toolbar row: search grows, Filter + Invite sit trailing -- measured
+       32px height on all three, search radius 9 with a 6% ink ring,
+       Filter/Invite radius 9 with the button drop-shadow pairing. */
+    & .crisp-memberssettings-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .crisp-memberssettings-search { display: flex; align-items: center; flex: 1; min-width: 0; gap: ${c.space["1.5"]}; height: 32px; padding: 0 ${c.space["2.5"]} 0 ${c.space["2"]}; border-radius: 9px; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgMuted}; }
+    & .crisp-memberssettings-search:focus-within { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    & .crisp-memberssettings-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-memberssettings-search input::placeholder { color: ${c.fgMuted}; }
+    & .crisp-memberssettings-filterbtn { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px transparent, 0 0 2px 0 rgba(28,40,64,.18), 0 1px 3px 0 rgba(0,0,0,.04); color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; cursor: pointer; white-space: nowrap; }
+    & .crisp-memberssettings-filterbtn:hover { background: ${c.bgRaised}; }
+    /* your-moon/crisp#979: bgBrandContrast, not bgBrandSolid -- the accent
+       (#0298d9) only clears 3.23:1 with white; the darker sibling clears
+       4.5:1+, same fix already applied to Button/Badge/Avatar (#897) and
+       TableToolbar/Dialog/Command/Comments/AuthShell (#953/#961), which
+       explicitly flagged this button as found-not-fixed. */
+    & .crisp-memberssettings-invitebtn { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: ${c.bgBrandContrast}; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 4px -2px color-mix(in srgb, ${c.bgBrandContrast} 12%, transparent), 0 3px 6px -2px color-mix(in srgb, ${c.bgBrandContrast} 8%, transparent); color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; cursor: pointer; white-space: nowrap; }
+    & .crisp-memberssettings-invitebtn:hover { filter: brightness(0.95); }
+
+    /* Table wrapper -- measured card: radius 12, 1px borderSubtle, 40px
+       rows, header label 12/500/63%-opacity fgPrimary. */
+    & .crisp-memberssettings-table-wrap { border-radius: 12px; border: 1px solid ${c.borderSubtle}; overflow: hidden; }
+    & .crisp-memberssettings-table { width: 100%; border-collapse: collapse; font-family: inherit; }
+    & .crisp-memberssettings-table th { height: 32px; padding: 0 ${c.space["4"]}; text-align: start; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); border-bottom: 1px solid ${c.borderSubtle}; background: ${c.bgSurface}; }
+    & .crisp-memberssettings-table td { height: 40px; padding: 0 ${c.space["4"]}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-memberssettings-table tr:last-child td { border-bottom: none; }
+    & .crisp-memberssettings-user { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .crisp-memberssettings-avatarimg { width: 24px; height: 24px; border-radius: ${c.radius.full}; object-fit: cover; }
+    /* Name + email sit on ONE line, not stacked -- confirmed live: both spans
+       share the same y and the same 14px size, only the email's colour
+       differs (a flat 63%-opacity fgPrimary mix, not a smaller muted font). */
+    & .crisp-memberssettings-usermeta { display: flex; align-items: baseline; gap: ${c.space["2"]}; min-width: 0; }
+    & .crisp-memberssettings-usermeta > span:first-child { flex-shrink: 0; }
+    & .crisp-memberssettings-useremail { font-size: ${c.text.lg}; font-weight: ${c.weight.regular}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-memberssettings-kebab { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-inline-start: auto; border: none; border-radius: ${c.radius.sm}; background: none; font-family: inherit; color: ${c.fgMuted}; cursor: pointer; }
+    & .crisp-memberssettings-kebab:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+
+    & .crisp-memberssettings-teamspanel { display: flex; align-items: center; justify-content: center; padding: ${c.space["8"]} 0; color: ${c.fgMuted}; font-size: ${c.text.lg}; }
+
+    /* Invite dialog fields -- measured 708x386 dialog, radius 16; the
+       "Invite as"/"Add to team" selects are 32/34px with a flat 1px
+       6%-ink border and 9/10px radius respectively (Attio's own two
+       selects don't share one radius). */
+    & .crisp-memberssettings-invitefield { display: flex; flex-direction: column; gap: ${c.space["1.5"]}; }
+    & .crisp-memberssettings-invitelabel { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const memberssettingsRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/notificationssettings/index.js

@@ -0,0 +1 @@
+export { NotificationsSettings, } from "./notificationssettings.js";

package/dist/esm/product/notificationssettings/notificationssettings.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bell, Mail, MonitorSmartphone } from "lucide-react";
+import { Checkbox } from "../../components/checkbox/index.js";
+import { Switch } from "../../components/switch/index.js";
+import { TextLink } from "../../components/textlink/index.js";
+import { notificationssettingsRecipe } from "./notificationssettings.recipe.js";
+/**
+ * Attio's "Notifications" settings page (crisp#630, P-083): title +
+ * description, a "Daily digest" card (a single toggle row), and a
+ * "Collaboration notifications" matrix — a header row plus one row per
+ * event, each with an Email and an App checkbox. Measured live.
+ */
+export function NotificationsSettings({ dailyDigestEnabled, onDailyDigestChange, rows, onEmailChange, onAppChange, className, title = "Notifications", description = "Customize your notification settings to stay informed without being overwhelmed.", learnMoreLabel = "Learn more", learnMoreHref = "#", dailyDigestSectionTitle = "Daily digest", dailyDigestRowTitle = "Enable daily digest", dailyDigestRowDescription = "Includes tasks overdue and due today. Sent every morning if any tasks are due or overdue.", collaborationSectionTitle = "Collaboration notifications", notifyMeAboutLabel = "Notify me about", emailColumnLabel = "Email", appColumnLabel = "App", ...rest }) {
+    return (_jsx("div", { className: notificationssettingsRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-notificationssettings-page", children: [_jsxs("div", { className: "crisp-notificationssettings-heading", children: [_jsx("h1", { className: "crisp-notificationssettings-title", children: title }), _jsxs("p", { className: "crisp-notificationssettings-desc", children: [description, " ", _jsx(TextLink, { href: learnMoreHref, children: learnMoreLabel })] })] }), _jsxs("div", { className: "crisp-notificationssettings-section", children: [_jsx("h2", { className: "crisp-notificationssettings-sectiontitle", children: dailyDigestSectionTitle }), _jsxs("div", { className: "crisp-notificationssettings-digestcard", children: [_jsxs("div", { className: "crisp-notificationssettings-digesttext", children: [_jsx("span", { className: "crisp-notificationssettings-rowtitle", children: dailyDigestRowTitle }), _jsx("span", { className: "crisp-notificationssettings-rowdesc", children: dailyDigestRowDescription })] }), _jsx(Switch, { checked: dailyDigestEnabled, onCheckedChange: onDailyDigestChange, "aria-label": dailyDigestRowTitle })] })] }), _jsxs("div", { className: "crisp-notificationssettings-section", children: [_jsx("h2", { className: "crisp-notificationssettings-sectiontitle", children: collaborationSectionTitle }), _jsxs("div", { className: "crisp-notificationssettings-matrix", children: [_jsxs("div", { className: "crisp-notificationssettings-matrixhead", children: [_jsxs("span", { className: "crisp-notificationssettings-matrixhead-about", children: [_jsx(Bell, { size: 14 }), notifyMeAboutLabel] }), _jsxs("span", { className: "crisp-notificationssettings-matrixhead-col", children: [_jsx(Mail, { size: 14 }), emailColumnLabel] }), _jsxs("span", { className: "crisp-notificationssettings-matrixhead-col", children: [_jsx(MonitorSmartphone, { size: 14 }), appColumnLabel] })] }), rows.map((row) => (_jsxs("div", { className: "crisp-notificationssettings-matrixrow", children: [_jsxs("div", { className: "crisp-notificationssettings-matrixrow-about", children: [_jsx("span", { className: "crisp-notificationssettings-rowtitle", children: row.title }), _jsx("span", { className: "crisp-notificationssettings-rowdesc", children: row.description })] }), _jsx("div", { className: "crisp-notificationssettings-matrixrow-col", children: _jsx(Checkbox, { checked: row.email, onChange: (e) => onEmailChange(row.id, e.target.checked), "aria-label": `${emailColumnLabel}: ${typeof row.title === "string" ? row.title : row.id}` }) }), _jsx("div", { className: "crisp-notificationssettings-matrixrow-col", children: _jsx(Checkbox, { checked: row.app, onChange: (e) => onAppChange(row.id, e.target.checked), "aria-label": `${appColumnLabel}: ${typeof row.title === "string" ? row.title : row.id}` }) })] }, row.id)))] })] })] }) }));
+}
+NotificationsSettings.displayName = "NotificationsSettings";

package/dist/esm/product/notificationssettings/notificationssettings.recipe.js

@@ -0,0 +1,41 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// Measured live against app.attio.com/<workspace>/settings/notifications
+// (crisp#630, P-083). Two sections, each a 16/600 heading over a bordered
+// 12px-radius card: "Daily digest" (a single 56px row, label 14/500 +
+// description 12/500/63%-opacity, a Switch trailing) and "Collaboration
+// notifications" (a header row -- 12/500/63%-opacity labels -- then 7 rows,
+// each 52px, a title/description pair on the left and two Checkboxes,
+// right-aligned under Email/App, per row).
+const config = defineRecipe({
+    name: "notificationssettings",
+    base: `& .crisp-notificationssettings-page { display: flex; flex-direction: column; gap: ${c.space["6"]}; font-family: ${c.font.sans}; }
+    & .crisp-notificationssettings-heading { display: flex; flex-direction: column; gap: ${c.space["0.5"]}; }
+    & .crisp-notificationssettings-title { font-size: 24px; line-height: 28px; font-weight: ${c.weight.semibold}; letter-spacing: -0.48px; color: ${c.fgPrimary}; margin: 0; }
+    & .crisp-notificationssettings-desc { font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgMuted}; margin: 0; }
+
+    & .crisp-notificationssettings-section { display: flex; flex-direction: column; gap: ${c.space["4"]}; }
+    & .crisp-notificationssettings-sectiontitle { font-size: 16px; line-height: 20px; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; margin: 0; }
+
+    /* Daily digest card: one bordered 12px-radius row. */
+    & .crisp-notificationssettings-digestcard { display: flex; align-items: center; justify-content: space-between; gap: ${c.space["6"]}; padding: ${c.space["2"]} ${c.space["3"]}; border: 1px solid ${c.borderSubtle}; border-radius: 12px; background: ${c.bgSurface}; }
+    & .crisp-notificationssettings-digesttext { display: flex; flex-direction: column; gap: ${c.space["1"]}; }
+    & .crisp-notificationssettings-rowtitle { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-notificationssettings-rowdesc { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+
+    /* Collaboration matrix: a bordered card, header row + N body rows. */
+    & .crisp-notificationssettings-matrix { border: 1px solid ${c.borderSubtle}; border-radius: 12px; overflow: hidden; background: ${c.bgSurface}; }
+    & .crisp-notificationssettings-matrixhead { display: flex; align-items: center; gap: ${c.space["3"]}; padding: 0 ${c.space["4"]}; height: 40px; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-notificationssettings-matrixhead-about { display: flex; align-items: center; gap: ${c.space["1.5"]}; flex: 1; min-width: 0; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-notificationssettings-matrixhead-col { display: flex; align-items: center; justify-content: center; gap: ${c.space["1.5"]}; width: 64px; flex-shrink: 0; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-notificationssettings-matrixrow { display: flex; align-items: center; gap: ${c.space["3"]}; padding: ${c.space["2"]} ${c.space["4"]}; min-height: 52px; }
+    & .crisp-notificationssettings-matrixrow + .crisp-notificationssettings-matrixrow { border-top: 1px solid ${c.borderSubtle}; }
+    & .crisp-notificationssettings-matrixrow-about { display: flex; flex-direction: column; gap: ${c.space["1"]}; flex: 1; min-width: 0; }
+    & .crisp-notificationssettings-matrixrow-col { display: flex; align-items: center; justify-content: center; width: 64px; flex-shrink: 0; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const notificationssettingsRecipe = resolveRecipe(config);
+export default config;