@crisp-ui-kit/crisp 0.5.0 → 0.7.0

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

@@ -0,0 +1,148 @@
+"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.Sidebar = exports.ATTIO_SIDEBAR_FOOTER = exports.ATTIO_SIDEBAR_CHATS_SECTION = exports.ATTIO_SIDEBAR_LISTS_SECTION = exports.ATTIO_SIDEBAR_RECORDS_SECTION = exports.ATTIO_SIDEBAR_ITEMS = exports.ATTIO_SIDEBAR_WORKSPACE = void 0;
+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 core_1 = require("../../core");
+const command_1 = require("../command");
+const navitem_1 = require("../navitem");
+const sidebar_recipe_1 = require("./sidebar.recipe");
+const IconHome = ({ className }) => ((0, jsx_runtime_1.jsx)(lucide_react_1.House, { className: className, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconTasks = ({ className }) => ((0, jsx_runtime_1.jsx)(lucide_react_1.SquareCheck, { className: className, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconNotes = ({ className }) => ((0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: className, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconEmails = ({ className }) => ((0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { className: className, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconCalls = ({ className }) => ((0, jsx_runtime_1.jsx)(lucide_react_1.Phone, { className: className, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconReports = ({ className }) => ((0, jsx_runtime_1.jsx)(lucide_react_1.ChartNoAxesColumn, { className: className, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconSequences = ({ className }) => ((0, jsx_runtime_1.jsx)(lucide_react_1.Send, { className: className, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconWorkflows = ({ className }) => ((0, jsx_runtime_1.jsx)(lucide_react_1.Waypoints, { className: className, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconChevronDown = ({ className }) => ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: className, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconSearch = ({ className }) => ((0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: className, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconInbox = ({ className }) => ((0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { className: className, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconInvite = ({ className }) => ((0, jsx_runtime_1.jsx)(lucide_react_1.UserPlus, { className: className, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconChat = ({ className }) => ((0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { className: className, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconCollapsePanel = ({ className }) => ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeft, { className: className, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconChevronMini = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" }));
+const GlyphCompanies = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 12, color: "white", strokeWidth: 1.75, "aria-hidden": "true" }));
+const GlyphPeople = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.User, { size: 12, color: "white", strokeWidth: 1.75, "aria-hidden": "true" }));
+const GlyphDeals = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.CircleDollarSign, { size: 12, color: "white", strokeWidth: 1.75, "aria-hidden": "true" }));
+const GlyphUsers = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.Users, { size: 12, color: "white", strokeWidth: 1.75, "aria-hidden": "true" }));
+const GlyphWorkspaces = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { size: 12, color: "white", strokeWidth: 1.75, "aria-hidden": "true" }));
+/** The measured Attio workspace switcher — the default `workspace` prop. */
+exports.ATTIO_SIDEBAR_WORKSPACE = {
+    name: "techpartners",
+    avatarLabel: "T",
+    avatarTone: "cyan",
+};
+/** The measured Attio main nav — the default `items` prop. */
+exports.ATTIO_SIDEBAR_ITEMS = [
+    { label: "Home", icon: IconHome },
+    {
+        label: "Tasks",
+        icon: IconTasks,
+        active: true,
+        trailing: ((0, jsx_runtime_1.jsx)(badge_1.Badge, { tone: "brand", variant: "solid", size: "small", children: "1" })),
+    },
+    { label: "Notes", icon: IconNotes },
+    { label: "Emails", icon: IconEmails },
+    { label: "Calls", icon: IconCalls },
+    { label: "Reports", icon: IconReports },
+    { label: "Sequences", icon: IconSequences },
+    { label: "Workflows", icon: IconWorkflows },
+];
+/** The measured Attio Records section — the default `recordsSection` prop. */
+exports.ATTIO_SIDEBAR_RECORDS_SECTION = {
+    label: "Records",
+    items: [
+        { label: "Companies", tone: "brand", glyph: GlyphCompanies },
+        { label: "People", tone: "brand", glyph: GlyphPeople },
+        { label: "Deals", tone: "orange", glyph: GlyphDeals },
+        { label: "Users", tone: "cyan", glyph: GlyphUsers },
+        { label: "Workspaces", tone: "purple", glyph: GlyphWorkspaces },
+    ],
+};
+/** The measured Attio Lists section — the default `listsSection` prop. */
+exports.ATTIO_SIDEBAR_LISTS_SECTION = {
+    label: "Lists",
+    newListLabel: "+ New list",
+};
+/** The measured Attio Chats section — the default `chatsSection` prop. */
+exports.ATTIO_SIDEBAR_CHATS_SECTION = {
+    label: "Chats",
+    items: [{ label: "In-app notification for deal wins", icon: IconChat }],
+};
+/** The measured Attio footer copy — the default `footer` prop. */
+exports.ATTIO_SIDEBAR_FOOTER = {
+    gettingStartedLabel: "Getting started 1/6",
+    inviteLabel: "Invite team members",
+    trialText: "13 days left on trial!",
+    trialActionLabel: "Keep Pro",
+};
+function SectionHeader({ label, open, onToggle, }) {
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "sidebar-section-header", "data-collapsed": open ? undefined : "", "aria-expanded": open, onClick: onToggle, children: [(0, jsx_runtime_1.jsx)(IconChevronMini, {}), (0, jsx_runtime_1.jsx)("span", { children: label })] }));
+}
+exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", workspace = exports.ATTIO_SIDEBAR_WORKSPACE, items = exports.ATTIO_SIDEBAR_ITEMS, recordsSection = exports.ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = exports.ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = exports.ATTIO_SIDEBAR_CHATS_SECTION, footer = exports.ATTIO_SIDEBAR_FOOTER, ...props }, ref) => {
+    const [collapsedSections, setCollapsedSections] = React.useState(() => new Set());
+    const [commandOpen, setCommandOpen] = React.useState(false);
+    React.useEffect(() => {
+        function handleKeyDown(event) {
+            if ((event.metaKey || event.ctrlKey) &&
+                event.key.toLowerCase() === "k") {
+                event.preventDefault();
+                setCommandOpen(true);
+            }
+        }
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, []);
+    const toggleSection = React.useCallback((key) => {
+        setCollapsedSections((prev) => {
+            const next = new Set(prev);
+            if (next.has(key)) {
+                next.delete(key);
+            }
+            else {
+                next.add(key);
+            }
+            return next;
+        });
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(core_1.Primitive.div, { ref: ref, asChild: asChild, className: (0, sidebar_recipe_1.sidebarRecipe)({ className }), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "sidebar-ws", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), (0, jsx_runtime_1.jsx)("span", { className: "sidebar-ws-name", children: workspace.name }), (0, jsx_runtime_1.jsx)(IconChevronDown, {}), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "ghost", size: "sm", shape: "icon", className: "sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: (0, jsx_runtime_1.jsx)(IconCollapsePanel, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "sidebar-searchrow", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "sidebar-search", onClick: () => setCommandOpen(true), children: [(0, jsx_runtime_1.jsx)(IconSearch, {}), (0, jsx_runtime_1.jsx)("span", { className: "sidebar-search-label", children: "Search" }), (0, jsx_runtime_1.jsx)("span", { className: "sidebar-search-kbd", children: "\u2318K" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: (0, jsx_runtime_1.jsx)(IconInbox, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-divider" }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", active: active, icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), trailing: trailing, children: label }, label))) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "rounded", tone: tone, children: (0, jsx_runtime_1.jsx)(Glyph, {}) }), children: label }, label))) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "sidebar-newlist", children: listsSection.newListLabel }) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), children: label }, label))) }), (0, jsx_runtime_1.jsxs)("div", { className: "sidebar-footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", className: "sidebar-pill", children: footer.gettingStartedLabel }), (0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(IconInvite, {}), children: footer.inviteLabel }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "sidebar-trial", children: [(0, jsx_runtime_1.jsx)("span", { children: footer.trialText }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] }), (0, jsx_runtime_1.jsx)(command_1.Command, { open: commandOpen, onOpenChange: setCommandOpen })] }));
+});
+exports.Sidebar.displayName = "Sidebar";

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tasklistRecipe = exports.TaskList = void 0;
+var tasklist_1 = require("./tasklist");
+Object.defineProperty(exports, "TaskList", { enumerable: true, get: function () { return tasklist_1.TaskList; } });
+var tasklist_recipe_1 = require("./tasklist.recipe");
+Object.defineProperty(exports, "tasklistRecipe", { enumerable: true, get: function () { return tasklist_recipe_1.tasklistRecipe; } });

package/dist/cjs/product/tasklist/tasklist.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TaskList = TaskList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tasklist_recipe_1 = require("./tasklist.recipe");
+function Row({ task, onToggle, completeLabel, incompleteLabel, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "tasklist-row", "data-done": task.done ? "" : undefined, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "tasklist-check", checked: !!task.done, "aria-label": task.done ? incompleteLabel : completeLabel, onChange: () => onToggle?.(task.id, !task.done) }), (0, jsx_runtime_1.jsx)("span", { className: "tasklist-title", children: task.title }), (task.due != null || task.meta != null) && ((0, jsx_runtime_1.jsxs)("span", { className: "tasklist-meta", children: [task.due != null && ((0, jsx_runtime_1.jsx)("span", { className: "tasklist-due", "data-overdue": task.overdue ? "" : undefined, children: task.due })), task.meta] }))] }));
+}
+/**
+ * A task list — measured from Attio's Tasks page. Optional group headers with a
+ * count, then rows of a round complete-checkbox + title + trailing meta.
+ * Completed rows strike through; overdue dates go red.
+ */
+function TaskList({ tasks, groups, onToggle, emptyLabel = "No tasks", className, completeLabel = "Mark complete", incompleteLabel = "Mark incomplete", }) {
+    const resolved = groups ?? (tasks?.length ? [{ label: null, tasks }] : []);
+    const total = resolved.reduce((s, g) => s + g.tasks.length, 0);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, tasklist_recipe_1.tasklistRecipe)({ className }), children: total === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "tasklist-empty", children: emptyLabel })) : (resolved.map((g, gi) => ((0, jsx_runtime_1.jsxs)("div", { children: [g.label != null && ((0, jsx_runtime_1.jsxs)("div", { className: "tasklist-group", children: [g.label, (0, jsx_runtime_1.jsx)("span", { className: "tasklist-group-count", children: g.tasks.length })] })), g.tasks.map((t) => ((0, jsx_runtime_1.jsx)(Row, { task: t, onToggle: onToggle, completeLabel: completeLabel, incompleteLabel: incompleteLabel }, t.id)))] }, gi)))) }));
+}
+TaskList.displayName = "TaskList";

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tasklistRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A task list — measured from Attio's Tasks page: optional group headers, then
+// rows of a round complete-checkbox + title + trailing meta (due date, record,
+// assignee). Completed rows strike through; overdue due-dates go red.
+const config = (0, core_1.defineRecipe)({
+    name: "tasklist",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .tasklist-group { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 36px; padding: 0 ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .tasklist-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.xs}; color: ${tokens_1.contract.fgMuted}; }
+
+    & .tasklist-row { display: flex; align-items: center; gap: ${tokens_1.contract.space["2.5"]}; height: 52px; padding: 0 ${tokens_1.contract.space["2"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .tasklist-row:first-child { border-top: none; }
+
+    & .tasklist-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; }
+    & .tasklist-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 30%, transparent); }
+    & .tasklist-check:checked { background: ${tokens_1.contract.bgBrandSolid} center / 10px no-repeat; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
+    & .tasklist-check:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
+
+    & .tasklist-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .tasklist-row[data-done] .tasklist-title { color: ${tokens_1.contract.fgMuted}; text-decoration: line-through; }
+
+    & .tasklist-meta { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["3"]}; flex-shrink: 0; }
+    & .tasklist-due { font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgMuted}; white-space: nowrap; }
+    & .tasklist-due[data-overdue] { color: ${tokens_1.contract.bgDanger}; }
+
+    & .tasklist-empty { padding: ${tokens_1.contract.space["4"]} ${tokens_1.contract.space["2"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.tasklistRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.trialbannerRecipe = exports.TrialBanner = void 0;
+var trialbanner_1 = require("./trialbanner");
+Object.defineProperty(exports, "TrialBanner", { enumerable: true, get: function () { return trialbanner_1.TrialBanner; } });
+var trialbanner_recipe_1 = require("./trialbanner.recipe");
+Object.defineProperty(exports, "trialbannerRecipe", { enumerable: true, get: function () { return trialbanner_recipe_1.trialbannerRecipe; } });

package/dist/cjs/product/trialbanner/trialbanner.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TrialBanner = TrialBanner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const trialbanner_recipe_1 = require("./trialbanner.recipe");
+/**
+ * A compact trial / upgrade banner — measured from Attio's sidebar footer.
+ * Icon + message + an optional small action pill (soft-glow outlined button).
+ */
+function TrialBanner({ icon, children, action, onAction, tone = "neutral", className, ...rest }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, trialbanner_recipe_1.trialbannerRecipe)({ className }), ...rest, "data-tone": tone === "neutral" ? undefined : tone, children: [icon != null && (0, jsx_runtime_1.jsx)("span", { className: "trialbanner-icon", children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "trialbanner-msg", children: children }), action != null && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "trialbanner-action", onClick: onAction, children: action }))] }));
+}
+TrialBanner.displayName = "TrialBanner";

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.trialbannerRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A compact trial / upgrade banner — measured from Attio's sidebar footer: an
+// icon + a message on the left and a small action pill on the right, in a 28px
+// row. The action uses Attio's soft-glow outlined-button shadow.
+const config = (0, core_1.defineRecipe)({
+    name: "trialbanner",
+    base: `display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; box-sizing: border-box; min-height: 28px;
+    padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.lg}; font-family: ${tokens_1.contract.font.sans};
+    font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .trialbanner-icon { display: inline-flex; flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .trialbanner-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .trialbanner-action { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: 20px; flex-shrink: 0;
+      padding: 0 ${tokens_1.contract.space["1.5"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: ${tokens_1.contract.bgSurface};
+      box-shadow: ${tokens_1.elevation.fieldNoRing};
+      font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary};
+      white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .trialbanner-action:hover { background: ${tokens_1.contract.bgRaised}; }
+
+    &[data-tone="warning"] .trialbanner-icon { color: ${tokens_1.contract.bgWarning}; }
+    &[data-tone="danger"] .trialbanner-icon { color: ${tokens_1.contract.bgDanger}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.trialbannerRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.viewtoggleRecipe = exports.ViewToggle = void 0;
+var viewtoggle_1 = require("./viewtoggle");
+Object.defineProperty(exports, "ViewToggle", { enumerable: true, get: function () { return viewtoggle_1.ViewToggle; } });
+var viewtoggle_recipe_1 = require("./viewtoggle.recipe");
+Object.defineProperty(exports, "viewtoggleRecipe", { enumerable: true, get: function () { return viewtoggle_recipe_1.viewtoggleRecipe; } });

package/dist/cjs/product/viewtoggle/viewtoggle.js

@@ -0,0 +1,55 @@
+"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.ViewToggle = ViewToggle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const viewtoggle_recipe_1 = require("./viewtoggle.recipe");
+/**
+ * A compact icon toggle — measured from Attio's list/grid switch. A padded track
+ * of icon tiles; the selected tile is raised. Use for view-mode switches (list ⇄
+ * grid) or any small mutually-exclusive icon choice.
+ */
+function ViewToggle({ options, value: valueProp, defaultValue, onChange, "aria-label": ariaLabel, className, ...rest }) {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const value = valueProp ?? internalValue ?? options[0]?.value;
+    const pick = (next) => {
+        if (valueProp === undefined)
+            setInternalValue(next);
+        onChange?.(next);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, viewtoggle_recipe_1.viewtoggleRecipe)({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: options.map((o) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "viewtoggle-tile", "aria-pressed": o.value === value, "aria-label": o.label, title: o.label, "data-active": o.value === value ? "" : undefined, onClick: () => pick(o.value), children: o.icon }, o.value))) }));
+}
+ViewToggle.displayName = "ViewToggle";

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.viewtoggleRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A compact icon toggle — measured from Attio's list/grid switch: a 28px track
+// (radius 10, ~5% ink) padded 2px, holding 24px icon tiles (radius 8). The
+// selected tile gets a raised surface with a soft shadow.
+const config = (0, core_1.defineRecipe)({
+    name: "viewtoggle",
+    base: `display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; padding: 2px;
+    border-radius: ${tokens_1.contract.radius.lg}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent);
+    font-family: ${tokens_1.contract.font.sans};
+
+    & .viewtoggle-tile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
+      padding: 0; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted};
+      font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s; }
+    & .viewtoggle-tile:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .viewtoggle-tile[data-active] { background: ${tokens_1.contract.bgTileActive}; color: ${tokens_1.contract.fgPrimary};
+      box-shadow: 0 1px 2px -1px ${tokens_1.contract.shadowTileActive}; }
+    & .viewtoggle-tile:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.viewtoggleRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/tokens/contract.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contract = void 0;
+const scale_1 = require("./scale");
+const semantic_1 = require("./semantic");
+const kebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+const toVar = (key) => `var(--${kebab(key)})`;
+// dots aren't valid in a CSS custom-property name → "2.5" becomes "2-5"
+const scaleVar = (prefix, key) => `var(--${prefix}-${key.replace(/\./g, "-")})`;
+const mapScale = (prefix, scale) => Object.fromEntries(Object.keys(scale).map((k) => [k, scaleVar(prefix, k)]));
+const colors = Object.fromEntries(Object.keys(semantic_1.semantic).map((k) => [k, toVar(k)]));
+// contract = color tokens (theme-flipping) + the dimensional scale
+// (theme-invariant). Recipes read everything through this one import.
+exports.contract = Object.assign(colors, {
+    space: mapScale("space", scale_1.space),
+    radius: mapScale("radius", scale_1.radius),
+    size: mapScale("size", scale_1.size),
+    font: mapScale("font", scale_1.font),
+    text: mapScale("text", scale_1.text),
+    weight: mapScale("weight", scale_1.weight),
+});

package/dist/cjs/tokens/elevation.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.elevation = void 0;
+const contract_1 = require("./contract");
+/**
+ * Attio's measured elevation recipes, written **once**.
+ *
+ * The whole product runs on two elevation tiers plus one control shadow
+ * (measured live — see `docs/study/attio-panels.md` §4). Before this module each
+ * surface carried its own copy of the string: the tier-1 stack appeared in 9
+ * places, the control shadow in 12. Copies drift, and every drift was a real
+ * bug — `Drawer`/`RecordPanel` grew invented directional shadows, `BulkBar`'s
+ * copy used raw literals and so never darkened in dark mode (AUTHORING.md
+ * Lesson 30). Reference the constant; never re-type the value.
+ */
+exports.elevation = {
+    /**
+     * Tier 1 — anything floating and *attached*: menus, popovers, dropdowns,
+     * hover-preview cards, the floating sidebar, the record peek, drawers, the
+     * bulk bar. Pairs with a 10–12px radius and, for panels, an 8px gutter.
+     */
+    floating: `inset 0 0 0 1px ${contract_1.contract.ringPopover}, 0 0 0 1px ${contract_1.contract.shadowPopover1}, 0 4px 8px -4px ${contract_1.contract.shadowPopover2}, 0 4px 12px -2px ${contract_1.contract.shadowPopover3}`,
+    /**
+     * Tier 2 — the modal frosted bezel (Dialog, Command). Sits on the
+     * `bgOverlayFrost` 60% + `blur(15px)` surface at radius 16, wrapping an inner
+     * card at radius 12. Attio dims nothing behind it; the blur does the work.
+     */
+    modal: `0 8px 28px -6px ${contract_1.contract.shadowOverlay1}, 0 18px 88px -4px ${contract_1.contract.shadowOverlay2}, 0 0 1px ${contract_1.contract.shadowOverlay3}`,
+    /**
+     * The neutral/outlined control shadow — buttons, inputs, textareas, the
+     * sidebar search, record-page actions.
+     *
+     * The two raw values **are** the measured Attio value (Lessons 22 and 29) and
+     * must stay raw. `rgba(0,0,0,0.04)` equals `tileActiveShadow`'s light value by
+     * coincidence, not by meaning; tokenizing it would delete a measured layer in
+     * dark mode. Only the ring is theme-aware, via `ringNeutral`.
+     */
+    field: `inset 0 0 0 1px ${contract_1.contract.ringNeutral}, 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04)`,
+    /**
+     * The same control shadow **without** the theme-aware ring. Lesson 29 added
+     * the ring to the neutral-button family but deliberately left `trialbanner`
+     * and `viewtoggle` alone pending their own re-measurement — this constant
+     * exists so those surfaces share the value without silently acquiring a ring
+     * nobody measured for them.
+     */
+    fieldNoRing: `0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04)`,
+};

package/dist/cjs/tokens/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.semantic = exports.weight = exports.text = exports.space = exports.size = exports.radius = exports.font = exports.palette = exports.elevation = exports.contract = void 0;
+var contract_1 = require("./contract");
+Object.defineProperty(exports, "contract", { enumerable: true, get: function () { return contract_1.contract; } });
+var elevation_1 = require("./elevation");
+Object.defineProperty(exports, "elevation", { enumerable: true, get: function () { return elevation_1.elevation; } });
+var palette_1 = require("./palette");
+Object.defineProperty(exports, "palette", { enumerable: true, get: function () { return palette_1.palette; } });
+var scale_1 = require("./scale");
+Object.defineProperty(exports, "font", { enumerable: true, get: function () { return scale_1.font; } });
+Object.defineProperty(exports, "radius", { enumerable: true, get: function () { return scale_1.radius; } });
+Object.defineProperty(exports, "size", { enumerable: true, get: function () { return scale_1.size; } });
+Object.defineProperty(exports, "space", { enumerable: true, get: function () { return scale_1.space; } });
+Object.defineProperty(exports, "text", { enumerable: true, get: function () { return scale_1.text; } });
+Object.defineProperty(exports, "weight", { enumerable: true, get: function () { return scale_1.weight; } });
+var semantic_1 = require("./semantic");
+Object.defineProperty(exports, "semantic", { enumerable: true, get: function () { return semantic_1.semantic; } });

package/dist/cjs/tokens/palette.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.palette = void 0;
+exports.palette = {
+    gray00: { light: "#ffffff", dark: "#0a0a0a" },
+    white: { light: "#ffffff", dark: "#ffffff" },
+    // the counterpart to `white`: ink that does NOT flip with the theme, for text
+    // on a bright tone fill. Same value as gray900's light side (Attio's measured
+    // near-black), named separately because its job is not "primary foreground".
+    ink: { light: "#101112", dark: "#101112" },
+    gray50: { light: "#f4f4f5", dark: "#101112" },
+    gray900: { light: "#101112", dark: "#f5f5f5" },
+    line200: { light: "#e4e4e7", dark: "#212224" },
+    line100: { light: "#eeeff1", dark: "#1c1d1f" },
+    ringNeutral: { light: "transparent", dark: "#212224" },
+    tileActive: { light: "#ffffff", dark: "#101112" },
+    tileActiveShadow: { light: "rgba(0,0,0,0.04)", dark: "rgba(0,0,0,0)" },
+    overlayFrost: { light: "#ffffff", dark: "#1c1d1f" },
+    shadowOverlay1: { light: "rgba(28,40,64,0.12)", dark: "rgba(0,0,0,0.48)" },
+    shadowOverlay2: { light: "rgba(28,40,64,0.16)", dark: "rgba(0,0,0,0.64)" },
+    shadowOverlay3: { light: "rgba(28,40,64,0.16)", dark: "rgba(0,0,0,0)" },
+    popoverBg: { light: "#ffffff", dark: "#17181a" },
+    ringPopover: { light: "rgba(0,0,0,0)", dark: "#212224" },
+    shadowPopover1: { light: "rgba(28,40,64,0.04)", dark: "rgba(0,0,0,0.16)" },
+    shadowPopover2: { light: "rgba(28,40,64,0.12)", dark: "rgba(0,0,0,0.24)" },
+    shadowPopover3: { light: "rgba(24,41,75,0.16)", dark: "rgba(0,0,0,0.32)" },
+    gray400: { light: "#71717a", dark: "#9a9aa2" },
+    brand600: { light: "#266df0", dark: "#266df0" },
+    brand700: { light: "#1f5fd6", dark: "#1f5fd6" },
+    red600: { light: "#e5484d", dark: "#ff5a5f" },
+    // A red dark enough to carry white text. red600 cannot: white on it is
+    // 3.91:1 light / 3.05:1 dark, and the solid button's hover DARKENS the fill
+    // (filter: brightness), so dark ink fails there instead (4.49 at hover).
+    // Measured from Attio's own stylesheet, which ships this red alongside the
+    // #EB3B3B it uses for destructive menu TEXT. Does not flip: a filled
+    // destructive control needs the same white-bearing fill in both themes.
+    red700: { light: "#ba2525", dark: "#ba2525" },
+    // seed-design's field focus ring (stroke-neutral-contrast = gray-1000),
+    // measured from @seed-design/css. A high-contrast neutral rather than a brand
+    // hue: the ring reads as "this field has focus", not as a state colour.
+    fieldFocus: { light: "#1a1c20", dark: "#f3f4f5" },
+    // seed-design's wheel picker, measured from @seed-design/css: unselected
+    // items sit at fg-disabled (gray-500) and the selection band at
+    // bg-neutral-weak (gray-200). The focus ring is their blue-600.
+    // seed's fg-disabled (gray-500): unselected wheel rows, unavailable dates
+    disabledFg: { light: "#d1d3d8", dark: "#5b606a" },
+    // seed's bg-neutral-weak (gray-200): the wheel's selection band, the
+    // calendar's today pill, and the bridge under a complete date range
+    neutralWeak: { light: "#f3f4f5", dark: "#1d2025" },
+    // seed's calendar greys: the selected day's fill and its text, the weekday
+    // header row, and the date numerals
+    neutralInverted: { light: "#2a3038", dark: "#f3f4f5" },
+    onNeutralInverted: { light: "#ffffff", dark: "#16171b" },
+    neutralSubtle: { light: "#868b94", dark: "#b0b3ba" },
+    neutralMuted: { light: "#555d6d", dark: "#dcdee3" },
+    focusRing: { light: "#1e82eb", dark: "#5e98fe" },
+    green600: { light: "#1f9d57", dark: "#2ea968" },
+    amber600: { light: "#b5730f", dark: "#e0982a" },
+    orange600: { light: "#f97514", dark: "#f97514" },
+    cyan600: { light: "#00b9eb", dark: "#00b9eb" },
+    purple600: { light: "#9b69ff", dark: "#9b69ff" },
+    graySidebar: { light: "#fbfbfb", dark: "#0e0f10" },
+};