@crisp-ui-kit/crisp 0.57.0 → 0.57.2

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

@@ -3,14 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.textareaRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
-// A multiline text field: an inset 1px ring (radius 8), 14px text, and an
+// 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
@@ -27,10 +30,10 @@ const config = (0, core_1.defineRecipe)({
 
     & .crisp-textarea-field {
       box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical;
-      margin: 0; padding: ${tokens_1.contract.space["2.5"]} 14px; border: none; border-radius: ${tokens_1.contract.radius.md};
-      background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.textField};
+      margin: 0; padding: ${tokens_1.contract.space["2.5"]} 14px; border-radius: ${tokens_1.contract.radius.md};
+      background: ${tokens_1.contract.bgSurface}; border: 1px solid ${tokens_1.contract.borderDefault};
       font-family: inherit; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgPrimary};
-      outline: none; transition: box-shadow .15s ease;
+      outline: none;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     }
     & .crisp-textarea-field::placeholder { color: ${tokens_1.contract.fgMuted}; }
@@ -49,8 +52,9 @@ const config = (0, core_1.defineRecipe)({
     &[data-invalid] .crisp-textarea-wrap::after { border-color: ${tokens_1.contract.bgDanger}; }
     &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: ${tokens_1.contract.bgDanger}; }
     &[data-counted] .crisp-textarea-field { padding-bottom: ${tokens_1.contract.space["5"]}; }
-    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: ${tokens_1.contract.space["2.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; pointer-events: none; }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: ${tokens_1.contract.space["2.5"]}; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; pointer-events: none; }
     & .crisp-textarea-count[data-over] { color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-textarea-progress { flex-shrink: 0; }
   `,
     variants: {},
     defaultVariants: {},

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

@@ -21,11 +21,14 @@ const config = (0, core_1.defineRecipe)({
     variants: {
         tone: {
             // The bold, always-brand-coloured trailing link a Card's own `action`
-            // slot uses ("View all →", "All registers →").
-            brand: `font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.bgBrandSolid};`,
+            // slot uses ("View all →", "All registers →"). your-moon/crisp#897:
+            // `fgBrandContrast`, not `bgBrandSolid` (#0298d9) directly -- as TEXT
+            // on a white page the accent itself only clears 3.23:1; the darker
+            // contrast-safe sibling clears 4.5:1+.
+            brand: `font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgBrandContrast};`,
             // A quieter in-context reference (a sample record under a finding)
             // that only goes brand on hover.
-            muted: `font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgMuted}; &:hover { color: ${tokens_1.contract.bgBrandSolid}; }`,
+            muted: `font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgMuted}; &:hover { color: ${tokens_1.contract.fgBrandContrast}; }`,
         },
         // crisp#874: an explicit, OPTIONAL size override -- no `defaultVariants`
         // entry below, so omitting `size` emits no `--size_*` class at all and

package/dist/cjs/index.js

@@ -18,11 +18,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 // primitives (components/)
+__exportStar(require("./components/accentpicker"), exports);
 __exportStar(require("./components/accordion"), exports);
 __exportStar(require("./components/avatar"), exports);
 __exportStar(require("./components/avatargroup"), exports);
 __exportStar(require("./components/badge"), exports);
 __exportStar(require("./components/barchart"), exports);
+__exportStar(require("./components/bottomsheet"), exports);
 __exportStar(require("./components/breadcrumb"), exports);
 __exportStar(require("./components/bulkbar"), exports);
 __exportStar(require("./components/button"), exports);
@@ -30,6 +32,7 @@ __exportStar(require("./components/callout"), exports);
 __exportStar(require("./components/card"), exports);
 __exportStar(require("./components/checkbox"), exports);
 __exportStar(require("./components/chip"), exports);
+__exportStar(require("./components/chipgroup"), exports);
 __exportStar(require("./components/columncalc"), exports);
 __exportStar(require("./components/composewindow"), exports);
 __exportStar(require("./components/contextmenu"), exports);
@@ -51,6 +54,7 @@ __exportStar(require("./components/kbd"), exports);
 __exportStar(require("./components/linechart"), exports);
 __exportStar(require("./components/mentionchip"), exports);
 __exportStar(require("./components/menu"), exports);
+__exportStar(require("./components/menusheet"), exports);
 __exportStar(require("./components/middletruncate"), exports);
 __exportStar(require("./components/multiselect"), exports);
 __exportStar(require("./components/personchip"), exports);
@@ -64,6 +68,7 @@ __exportStar(require("./components/select"), exports);
 __exportStar(require("./components/skeleton"), exports);
 __exportStar(require("./components/skiplink"), exports);
 __exportStar(require("./components/slider"), exports);
+__exportStar(require("./components/snackbar"), exports);
 __exportStar(require("./components/spinner"), exports);
 __exportStar(require("./components/stagebar"), exports);
 __exportStar(require("./components/statcard"), exports);
@@ -98,7 +103,9 @@ __exportStar(require("./product/headerbar"), exports);
 __exportStar(require("./product/importdialog"), exports);
 __exportStar(require("./product/inbox"), exports);
 __exportStar(require("./product/listpage"), exports);
+__exportStar(require("./product/memberssettings"), exports);
 __exportStar(require("./product/navitem"), exports);
+__exportStar(require("./product/notificationssettings"), exports);
 __exportStar(require("./product/objectsettings"), exports);
 __exportStar(require("./product/onboarding"), exports);
 __exportStar(require("./product/recordpage"), exports);
@@ -113,5 +120,6 @@ __exportStar(require("./product/tasklist"), exports);
 __exportStar(require("./product/themepicker"), exports);
 __exportStar(require("./product/trialbanner"), exports);
 __exportStar(require("./product/viewtoggle"), exports);
+__exportStar(require("./product/workspacegeneralsettings"), exports);
 // design tokens + recipe core (for building custom components)
 __exportStar(require("./tokens"), exports);

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

@@ -43,7 +43,11 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-authshell-progress-fill { height: 2px; background: ${tokens_1.contract.fgPrimary}; border-radius: 4px; transition: width .2s; }
 
     & .crisp-authshell-logo { margin-top: ${tokens_1.contract.space["8"]}; min-height: 24px; display: flex; align-items: center; gap: ${tokens_1.contract.space["2.5"]}; }
-    & .crisp-authshell-logo-badge { flex-shrink: 0; box-sizing: border-box; width: 32px; height: 32px; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.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: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.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: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.bold}; letter-spacing: -0.2px; color: ${tokens_1.contract.fgPrimary}; }
     & .crisp-authshell-logo-subtitle { font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }

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

@@ -32,7 +32,10 @@ const config = (0, core_1.defineRecipe)({
   & .crisp-command-list > .crisp-command-group-label:first-child { padding-top: ${tokens_1.contract.space["1"]}; }
   & .crisp-command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 ${tokens_1.contract.space["2.5"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
   & .crisp-command-footer-nav { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
-  & .crisp-command-footer-action { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 28px; max-width: 60%; padding: 0 ${tokens_1.contract.space["1"]} 0 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
+  /* 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: ${tokens_1.contract.space["2"]}; height: 28px; max-width: 60%; padding: 0 ${tokens_1.contract.space["1"]} 0 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgBrandContrast}; color: ${tokens_1.contract.fgOnBrand}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
   & .crisp-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 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${tokens_1.contract.text.xs}; }

package/dist/cjs/product/comments/comments.js

@@ -315,8 +315,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.
  */
-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 }) {
+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 = (0, core_1.useCrispMessage)(closeLabelProp, "Close");
     const backLabel = (0, core_1.useCrispMessage)(backLabelProp, "Back");
     const title = (0, core_1.useCrispMessage)(titleProp, "All comments");
@@ -369,7 +374,7 @@ function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResol
     const activeThread = activeThreadId
         ? threads.find((t) => t.id === activeThreadId)
         : null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, comments_recipe_1.commentsRecipe)({ className }), role: "dialog", "aria-label": title, ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-head", children: [activeThread ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": backLabel, onClick: () => setActiveThreadId(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-title-wrap", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-title", children: activeThread ? threadTitle : title }), activeThread && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-comments-breadcrumb", children: [breadcrumbPrefix, " ", subjectIcon, " ", subject] }))] }), !activeThread && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": filterLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: showResolved, onCheckedChange: onShowResolvedChange, children: showResolvedLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: onlyMine, onCheckedChange: onOnlyMineChange, children: onlyMineLabel })] })), onClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-body crisp-comments-body--pad-top", children: activeThread ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, comments_recipe_1.commentsRecipe)({ variant, className }), role: "dialog", "aria-label": title, ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-head", children: [activeThread ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": backLabel, onClick: () => setActiveThreadId(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-title-wrap", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-title", children: activeThread ? threadTitle : title }), activeThread && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-comments-breadcrumb", children: [breadcrumbPrefix, " ", subjectIcon, " ", subject] }))] }), !activeThread && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": filterLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: showResolved, onCheckedChange: onShowResolvedChange, children: showResolvedLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: onlyMine, onCheckedChange: onOnlyMineChange, children: onlyMineLabel })] })), onClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-body crisp-comments-body--pad-top", children: activeThread ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.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/cjs/product/comments/comments.recipe.js

@@ -18,8 +18,8 @@ const tokens_1 = require("../../tokens");
 // width and still gets an odd number).
 const config = (0, core_1.defineRecipe)({
     name: "comments",
-    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 320px; height: 100%;
-    background: ${tokens_1.contract.bgSurface}; border-inline-start: 1px solid ${tokens_1.contract.borderSubtle};
+    base: `display: flex; flex-direction: column; box-sizing: border-box; height: 100%;
+    background: ${tokens_1.contract.bgSurface};
     font-family: ${tokens_1.contract.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & * { box-sizing: border-box; }
@@ -99,9 +99,13 @@ const config = (0, core_1.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 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.lg}; background: ${tokens_1.contract.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: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgOnBrand}; cursor: pointer; opacity: 1; transition: opacity .12s, background-color .12s; }
-    & .crisp-comments-post:hover:not(:disabled) { background: ${tokens_1.contract.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 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.lg}; background: ${tokens_1.contract.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: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.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,
@@ -113,8 +117,22 @@ const config = (0, core_1.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, ${tokens_1.contract.bgBrandSolid} 12%, transparent); color: ${tokens_1.contract.bgBrandSolid}; font-weight: ${tokens_1.contract.weight.medium}; user-select: none; }
     ${core_1.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 ${tokens_1.contract.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/cjs/product/memberssettings/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MembersSettings = exports.InviteMembersDialog = void 0;
+var memberssettings_1 = require("./memberssettings");
+Object.defineProperty(exports, "InviteMembersDialog", { enumerable: true, get: function () { return memberssettings_1.InviteMembersDialog; } });
+Object.defineProperty(exports, "MembersSettings", { enumerable: true, get: function () { return memberssettings_1.MembersSettings; } });

package/dist/cjs/product/memberssettings/memberssettings.js

@@ -0,0 +1,99 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MembersSettings = MembersSettings;
+exports.InviteMembersDialog = InviteMembersDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const avatar_1 = require("../../components/avatar");
+const badge_1 = require("../../components/badge");
+const button_1 = require("../../components/button");
+const dialog_1 = require("../../components/dialog");
+const formfield_1 = require("../../components/formfield");
+const select_1 = require("../../components/select");
+const tabs_keyboard_1 = require("../../components/tabs/tabs-keyboard");
+const textarea_1 = require("../../components/textarea");
+const textlink_1 = require("../../components/textlink");
+const memberssettings_recipe_1 = require("./memberssettings.recipe");
+/**
+ * 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.
+ */
+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: (0, jsx_runtime_1.jsx)(lucide_react_1.User, { size: 16 }),
+        },
+        {
+            value: "teams",
+            label: teamsTabLabel,
+            icon: (0, jsx_runtime_1.jsx)(lucide_react_1.UsersRound, { size: 16 }),
+        },
+    ];
+    const { onKeyDown, tabIndexFor } = (0, tabs_keyboard_1.useTablistKeyboard)({
+        tabs: tabEntries,
+        active: tab,
+        select: (value) => setTab(value),
+        listRef,
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, memberssettings_recipe_1.memberssettingsRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-memberssettings-page", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-memberssettings-heading", children: [(0, jsx_runtime_1.jsx)("h1", { className: "crisp-memberssettings-title", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "crisp-memberssettings-desc", children: [description, " ", (0, jsx_runtime_1.jsx)(textlink_1.TextLink, { href: learnMoreHref, children: learnMoreLabel })] })] }), (0, jsx_runtime_1.jsx)("div", { ref: listRef, className: "crisp-memberssettings-tabpair", role: "tablist", "aria-label": tablistLabel, onKeyDown: onKeyDown, children: tabEntries.map((t) => ((0, jsx_runtime_1.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" ? ((0, jsx_runtime_1.jsxs)("div", { role: "tabpanel", "aria-label": membersTabLabel, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-memberssettings-toolbar", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-memberssettings-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16 }), (0, jsx_runtime_1.jsx)("input", { value: searchValue, onChange: (e) => onSearchChange?.(e.target.value), placeholder: searchPlaceholder })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-memberssettings-filterbtn", onClick: onFilterClick, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Filter, { size: 14 }), filterLabel] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-memberssettings-invitebtn", onClick: onInviteClick, children: inviteLabel })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-memberssettings-table-wrap", children: (0, jsx_runtime_1.jsxs)("table", { className: "crisp-memberssettings-table", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: userColumnLabel }), (0, jsx_runtime_1.jsx)("th", { children: roleColumnLabel }), (0, jsx_runtime_1.jsx)("th", { children: teamsColumnLabel })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: members.map((m) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-memberssettings-user", children: [m.avatarSrc ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-memberssettings-avatarimg", src: m.avatarSrc, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "circle", tone: "brand", children: String(m.name).charAt(0) })), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-memberssettings-usermeta", children: [(0, jsx_runtime_1.jsxs)("span", { children: [m.name, m.isYou ? " (You)" : ""] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-memberssettings-useremail", children: m.email })] })] }) }), (0, jsx_runtime_1.jsx)("td", { children: m.role === "Admin" ? ((0, jsx_runtime_1.jsx)(badge_1.Badge, { tone: "purple", children: m.role })) : (m.role) }), (0, jsx_runtime_1.jsxs)("td", { children: [m.teams ?? "—", (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-memberssettings-kebab", "aria-label": memberActionsLabel, onClick: () => onRowMenuClick?.(m), children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16 }) })] })] }, m.id))) })] }) })] })) : ((0, jsx_runtime_1.jsx)("div", { role: "tabpanel", "aria-label": teamsTabLabel, children: teamsContent ?? ((0, jsx_runtime_1.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".
+ */
+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 ((0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { open: open, onOpenChange: onOpenChange, title: title, width: 708, ...rest, children: [(0, jsx_runtime_1.jsxs)(dialog_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-memberssettings-invitefield", children: (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { value: emails, onChange: (e) => onEmailsChange(e.target.value), placeholder: emailsPlaceholder, rows: 3 }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: inviteAsFieldLabel, children: (0, jsx_runtime_1.jsx)(select_1.Select, { options: inviteAsOptions, value: inviteAs, onValueChange: (v) => onInviteAsChange(v) }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: addToTeamFieldLabel, optional: true, children: (0, jsx_runtime_1.jsx)(select_1.Select, { options: teamOptions, value: team, onValueChange: onTeamChange, placeholder: addToTeamPlaceholder, searchable: true }) })] }), (0, jsx_runtime_1.jsx)(dialog_1.DialogFooter, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "primary", onClick: onSend, children: sendLabel }) })] }));
+}
+InviteMembersDialog.displayName = "InviteMembersDialog";

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

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.memberssettingsRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (0, core_1.defineRecipe)({
+    name: "memberssettings",
+    base: `& .crisp-memberssettings-page { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["6"]}; font-family: ${tokens_1.contract.font.sans}; }
+    & .crisp-memberssettings-heading { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["0.5"]}; }
+    & .crisp-memberssettings-title { font-size: 24px; line-height: 28px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.48px; color: ${tokens_1.contract.fgPrimary}; margin: 0; }
+    & .crisp-memberssettings-desc { font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.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: ${tokens_1.contract.space["1.5"]}; height: 28px; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; box-shadow: inset 0 0 0 1px transparent; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.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: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-memberssettings-tab[data-selected] { color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSubtle}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; }
+    & .crisp-memberssettings-tab:focus-visible { outline: 2px solid ${tokens_1.contract.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: ${tokens_1.contract.space["2"]}; }
+    & .crisp-memberssettings-search { display: flex; align-items: center; flex: 1; min-width: 0; gap: ${tokens_1.contract.space["1.5"]}; height: 32px; padding: 0 ${tokens_1.contract.space["2.5"]} 0 ${tokens_1.contract.space["2"]}; border-radius: 9px; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-memberssettings-search:focus-within { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-memberssettings-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-memberssettings-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-memberssettings-filterbtn { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: ${tokens_1.contract.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: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; white-space: nowrap; }
+    & .crisp-memberssettings-filterbtn:hover { background: ${tokens_1.contract.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: ${tokens_1.contract.space["1.5"]}; height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: ${tokens_1.contract.bgBrandContrast}; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 4px -2px color-mix(in srgb, ${tokens_1.contract.bgBrandContrast} 12%, transparent), 0 3px 6px -2px color-mix(in srgb, ${tokens_1.contract.bgBrandContrast} 8%, transparent); color: ${tokens_1.contract.fgOnBrand}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.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 ${tokens_1.contract.borderSubtle}; overflow: hidden; }
+    & .crisp-memberssettings-table { width: 100%; border-collapse: collapse; font-family: inherit; }
+    & .crisp-memberssettings-table th { height: 32px; padding: 0 ${tokens_1.contract.space["4"]}; text-align: start; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; }
+    & .crisp-memberssettings-table td { height: 40px; padding: 0 ${tokens_1.contract.space["4"]}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-memberssettings-table tr:last-child td { border-bottom: none; }
+    & .crisp-memberssettings-user { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; }
+    & .crisp-memberssettings-avatarimg { width: 24px; height: 24px; border-radius: ${tokens_1.contract.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: ${tokens_1.contract.space["2"]}; min-width: 0; }
+    & .crisp-memberssettings-usermeta > span:first-child { flex-shrink: 0; }
+    & .crisp-memberssettings-useremail { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.regular}; color: color-mix(in srgb, ${tokens_1.contract.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: ${tokens_1.contract.radius.sm}; background: none; font-family: inherit; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
+    & .crisp-memberssettings-kebab:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+
+    & .crisp-memberssettings-teamspanel { display: flex; align-items: center; justify-content: center; padding: ${tokens_1.contract.space["8"]} 0; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.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: ${tokens_1.contract.space["1.5"]}; }
+    & .crisp-memberssettings-invitelabel { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.memberssettingsRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationsSettings = void 0;
+var notificationssettings_1 = require("./notificationssettings");
+Object.defineProperty(exports, "NotificationsSettings", { enumerable: true, get: function () { return notificationssettings_1.NotificationsSettings; } });

package/dist/cjs/product/notificationssettings/notificationssettings.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationsSettings = NotificationsSettings;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const checkbox_1 = require("../../components/checkbox");
+const switch_1 = require("../../components/switch");
+const textlink_1 = require("../../components/textlink");
+const notificationssettings_recipe_1 = require("./notificationssettings.recipe");
+/**
+ * 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.
+ */
+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 ((0, jsx_runtime_1.jsx)("div", { className: (0, notificationssettings_recipe_1.notificationssettingsRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-page", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-heading", children: [(0, jsx_runtime_1.jsx)("h1", { className: "crisp-notificationssettings-title", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "crisp-notificationssettings-desc", children: [description, " ", (0, jsx_runtime_1.jsx)(textlink_1.TextLink, { href: learnMoreHref, children: learnMoreLabel })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-section", children: [(0, jsx_runtime_1.jsx)("h2", { className: "crisp-notificationssettings-sectiontitle", children: dailyDigestSectionTitle }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-digestcard", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-digesttext", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-notificationssettings-rowtitle", children: dailyDigestRowTitle }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-notificationssettings-rowdesc", children: dailyDigestRowDescription })] }), (0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: dailyDigestEnabled, onCheckedChange: onDailyDigestChange, "aria-label": dailyDigestRowTitle })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-section", children: [(0, jsx_runtime_1.jsx)("h2", { className: "crisp-notificationssettings-sectiontitle", children: collaborationSectionTitle }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-matrix", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-matrixhead", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-notificationssettings-matrixhead-about", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 14 }), notifyMeAboutLabel] }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-notificationssettings-matrixhead-col", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 14 }), emailColumnLabel] }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-notificationssettings-matrixhead-col", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.MonitorSmartphone, { size: 14 }), appColumnLabel] })] }), rows.map((row) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-matrixrow", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-matrixrow-about", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-notificationssettings-rowtitle", children: row.title }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-notificationssettings-rowdesc", children: row.description })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-notificationssettings-matrixrow-col", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: row.email, onChange: (e) => onEmailChange(row.id, e.target.checked), "aria-label": `${emailColumnLabel}: ${typeof row.title === "string" ? row.title : row.id}` }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-notificationssettings-matrixrow-col", children: (0, jsx_runtime_1.jsx)(checkbox_1.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/cjs/product/notificationssettings/notificationssettings.recipe.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.notificationssettingsRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (0, core_1.defineRecipe)({
+    name: "notificationssettings",
+    base: `& .crisp-notificationssettings-page { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["6"]}; font-family: ${tokens_1.contract.font.sans}; }
+    & .crisp-notificationssettings-heading { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["0.5"]}; }
+    & .crisp-notificationssettings-title { font-size: 24px; line-height: 28px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.48px; color: ${tokens_1.contract.fgPrimary}; margin: 0; }
+    & .crisp-notificationssettings-desc { font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgMuted}; margin: 0; }
+
+    & .crisp-notificationssettings-section { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; }
+    & .crisp-notificationssettings-sectiontitle { font-size: 16px; line-height: 20px; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; margin: 0; }
+
+    /* Daily digest card: one bordered 12px-radius row. */
+    & .crisp-notificationssettings-digestcard { display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["6"]}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["3"]}; border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: 12px; background: ${tokens_1.contract.bgSurface}; }
+    & .crisp-notificationssettings-digesttext { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1"]}; }
+    & .crisp-notificationssettings-rowtitle { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-notificationssettings-rowdesc { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+
+    /* Collaboration matrix: a bordered card, header row + N body rows. */
+    & .crisp-notificationssettings-matrix { border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: 12px; overflow: hidden; background: ${tokens_1.contract.bgSurface}; }
+    & .crisp-notificationssettings-matrixhead { display: flex; align-items: center; gap: ${tokens_1.contract.space["3"]}; padding: 0 ${tokens_1.contract.space["4"]}; height: 40px; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-notificationssettings-matrixhead-about { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; flex: 1; min-width: 0; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+    & .crisp-notificationssettings-matrixhead-col { display: flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1.5"]}; width: 64px; flex-shrink: 0; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+    & .crisp-notificationssettings-matrixrow { display: flex; align-items: center; gap: ${tokens_1.contract.space["3"]}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["4"]}; min-height: 52px; }
+    & .crisp-notificationssettings-matrixrow + .crisp-notificationssettings-matrixrow { border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-notificationssettings-matrixrow-about { display: flex; flex-direction: column; gap: ${tokens_1.contract.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: [],
+});
+exports.notificationssettingsRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;