@crisp-ui-kit/crisp 0.54.1 → 0.54.3

package/dist/cjs/product/formdialog/formdialog.js

@@ -0,0 +1,171 @@
+"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.useFormDialogOptional = useFormDialogOptional;
+exports.FormDialog = FormDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const button_1 = require("../../components/button");
+const dialog_1 = require("../../components/dialog");
+const switch_1 = require("../../components/switch");
+const core_1 = require("../../core");
+const formdialog_recipe_1 = require("./formdialog.recipe");
+/**
+ * Whether a non-required field inside a `createMode` `FormDialog` gets
+ * `FormField`'s "(optional)" marker automatically — Attio suffixes every
+ * optional label this way on its own "New Company" dialog (crisp#548). A
+ * consumer's own field wrapper reads this once (`useFormDialogOptional`);
+ * `false` outside any `FormDialog`, or on an edit dialog.
+ */
+const OptionalLabelsContext = React.createContext(false);
+/** See `OptionalLabelsContext`. Call from a field wrapper as
+ *  `optional={useFormDialogOptional(required)}`. */
+function useFormDialogOptional(required) {
+    return React.useContext(OptionalLabelsContext) && !required;
+}
+/**
+ * A modal for a create or edit form — crisp's own `Dialog`/`DialogBody`/
+ * `DialogFooter`, plus everything a record-creating form needs beyond plain
+ * chrome (crisp#548, moved out of internal/grc's own `forms.tsx`, called
+ * from nine places there): dirty tracking with a discard-changes confirm
+ * (any click/change/input inside the form marks it dirty; Escape/backdrop/
+ * header-×/Cancel all route through one `requestClose`, which only asks
+ * when something actually changed — a stacked crisp `Dialog`), a
+ * `beforeunload` guard for a reload or external navigation, and
+ * scroll-to-first-invalid-field once a submit attempt finishes (crisp's own
+ * `FormField` already marks every control `aria-invalid`, so this needs no
+ * per-field wiring). A record needs several fields at once to be valid,
+ * which is why records are not created by inline editing.
+ */
+function FormDialog({ title, submitLabel, onSubmit, onClose, busy, error, children, wide = false, size, createMode = false, createMoreLabel: createMoreLabelProp, cancelLabel: cancelLabelProp, discardTitle: discardTitleProp, discardConfirmLabel: discardConfirmLabelProp, discardCancelLabel: discardCancelLabelProp, className, ...rest }) {
+    const createMoreLabel = (0, core_1.useCrispMessage)(createMoreLabelProp, "Create more");
+    const createRecordLabel = (0, core_1.useCrispMessage)(undefined, "Create record");
+    const cancelLabel = (0, core_1.useCrispMessage)(cancelLabelProp, "Cancel");
+    const discardTitle = (0, core_1.useCrispMessage)(discardTitleProp, "Discard changes? Your changes will be lost.");
+    const discardConfirmLabel = (0, core_1.useCrispMessage)(discardConfirmLabelProp, "Discard");
+    const discardCancelLabel = (0, core_1.useCrispMessage)(discardCancelLabelProp, "Keep editing");
+    const formId = React.useId();
+    const formRef = React.useRef(null);
+    const switchId = React.useId();
+    // Read at submit time (click, Enter, or Cmd/Ctrl+Enter alike — all three
+    // go through the one <form onSubmit>), so `onSubmit` never has to reach
+    // back into the footer to know which way the switch was left.
+    const [createMore, setCreateMore] = React.useState(false);
+    const [confirmingDiscard, setConfirmingDiscard] = React.useState(false);
+    // Dirtiness is detected generically (any click, change or text input
+    // anywhere inside the form), not wired per field: React delivers these as
+    // synthetic events through the REACT tree, so a Select's portaled listbox
+    // or a DatePicker's portaled calendar — neither a DOM descendant of
+    // <form> — still reaches this handler, the same way a click inside either
+    // already reaches a submit handler on the form itself. A stray click
+    // (opening a picker without choosing anything) can mark this dirty when
+    // nothing actually changed; an occasional unneeded confirmation is a far
+    // smaller cost than silently discarding real, typed work.
+    const dirtyRef = React.useRef(false);
+    const markDirty = () => {
+        dirtyRef.current = true;
+    };
+    const requestClose = () => {
+        if (!dirtyRef.current) {
+            onClose();
+            return;
+        }
+        setConfirmingDiscard(true);
+    };
+    // A reload or an external navigation never reaches `requestClose` above —
+    // needs its own listener, live only while the dialog is mounted.
+    React.useEffect(() => {
+        const onBeforeUnload = (e) => {
+            if (!dirtyRef.current)
+                return;
+            e.preventDefault();
+            e.returnValue = "";
+        };
+        window.addEventListener("beforeunload", onBeforeUnload);
+        return () => window.removeEventListener("beforeunload", onBeforeUnload);
+    }, []);
+    // A refused save that leaves a field invalid is the one thing on screen
+    // that matters, and on a long form the field can be several screens above
+    // the submit button — a failed submit that never moves the viewport reads
+    // as nothing happened. `FormField` already marks every field it was given
+    // an error for with `aria-invalid`, on every control kind, so this needs
+    // no per-field wiring of its own — it just goes looking for the first one
+    // once a submit attempt finishes.
+    // `usePrefersReducedMotion`, not CSS `scroll-behavior: smooth`: this is JS
+    // motion driven by an explicit `behavior` argument, which CSS cannot reach.
+    const reduceMotion = (0, core_1.usePrefersReducedMotion)();
+    const wasBusy = React.useRef(false);
+    React.useEffect(() => {
+        if (wasBusy.current && !busy) {
+            const invalid = formRef.current?.querySelector('[aria-invalid="true"]');
+            if (invalid) {
+                invalid.scrollIntoView({
+                    block: "center",
+                    ...(reduceMotion
+                        ? { behavior: "auto" }
+                        : { behavior: "smooth" }),
+                });
+                invalid.focus({ preventScroll: true });
+            }
+        }
+        wasBusy.current = Boolean(busy);
+    }, [busy, reduceMotion]);
+    // Attached to the document, not the form: a portaled Popover (a
+    // DatePicker's calendar, a Select's listbox) renders outside the <form>
+    // element in the DOM, and a person pressing the shortcut while one of
+    // those is open should still submit the dialog it belongs to.
+    React.useEffect(() => {
+        if (!createMode)
+            return;
+        const onKeyDown = (e) => {
+            if (busy)
+                return;
+            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                formRef.current?.requestSubmit();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [createMode, busy]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { open: true, onOpenChange: (open) => !open && requestClose(), title: title, width: size ?? (wide ? 760 : 640), className: (0, formdialog_recipe_1.formdialogRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)(dialog_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(OptionalLabelsContext.Provider, { value: createMode, children: (0, jsx_runtime_1.jsx)("form", { ref: formRef, id: formId, className: "crisp-formdialog-form", onSubmit: (e) => {
+                                        e.preventDefault();
+                                        onSubmit(createMore);
+                                    }, onChange: markDirty, onInput: markDirty, onClick: markDirty, children: children }) }), error != null && (0, jsx_runtime_1.jsx)("p", { className: "crisp-formdialog-error", children: error })] }), (0, jsx_runtime_1.jsx)(dialog_1.DialogFooter, { children: createMode ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-formdialog-createfoot", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-dialog-more", children: [(0, jsx_runtime_1.jsx)(switch_1.Switch, { id: switchId, checked: createMore, onCheckedChange: setCreateMore, "aria-label": createMoreLabel }), (0, jsx_runtime_1.jsx)("label", { className: "crisp-formdialog-more-label", htmlFor: switchId, children: createMoreLabel })] }), (0, jsx_runtime_1.jsxs)("button", { type: "submit", form: formId, className: "crisp-dialog-submit", disabled: busy, children: [createRecordLabel, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-dialog-submit-key", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("kbd", { children: "\u2318" }), (0, jsx_runtime_1.jsx)("kbd", { children: "\u21B5" })] })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "neutral", onClick: requestClose, children: cancelLabel }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "submit", form: formId, intent: "primary", loading: busy, children: submitLabel })] })) })] }), (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { open: confirmingDiscard, onOpenChange: (open) => !open && setConfirmingDiscard(false), title: discardTitle, width: 400, children: (0, jsx_runtime_1.jsxs)(dialog_1.DialogFooter, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "neutral", onClick: () => setConfirmingDiscard(false), children: discardCancelLabel }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "danger", onClick: () => {
+                                setConfirmingDiscard(false);
+                                onClose();
+                            }, children: discardConfirmLabel })] }) })] }));
+}
+FormDialog.displayName = "FormDialog";

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formdialogRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The createMode footer's switch+button cluster — measured live off Attio's
+// own "New Company" create dialog (crisp#548): a 16px gap between the
+// "Create more" switch group and the submit button, different from
+// `.crisp-dialog-footer`'s own 12px (the gap every OTHER dialog's
+// Cancel/Save pair uses). One wrapper carries the 16px itself rather than
+// widening the shared token, so it doesn't stretch to the footer's full
+// width — `.crisp-dialog-footer`'s `justify-content: flex-end` still pushes
+// the whole cluster to the right edge as one snug group.
+const config = (0, core_1.defineRecipe)({
+    name: "formdialog",
+    base: `& .crisp-formdialog-createfoot { display: flex; align-items: center; gap: ${tokens_1.contract.space["4"]}; }
+    & .crisp-formdialog-more-label { font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
+    & .crisp-formdialog-error { font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgDanger}; margin: 0; }
+    & .crisp-formdialog-form { display: grid; gap: ${tokens_1.contract.space["3"]}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.formdialogRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formdialogRecipe = exports.useFormDialogOptional = exports.FormDialog = void 0;
+var formdialog_1 = require("./formdialog");
+Object.defineProperty(exports, "FormDialog", { enumerable: true, get: function () { return formdialog_1.FormDialog; } });
+Object.defineProperty(exports, "useFormDialogOptional", { enumerable: true, get: function () { return formdialog_1.useFormDialogOptional; } });
+var formdialog_recipe_1 = require("./formdialog.recipe");
+Object.defineProperty(exports, "formdialogRecipe", { enumerable: true, get: function () { return formdialog_recipe_1.formdialogRecipe; } });

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

@@ -20,10 +20,18 @@ const tokens_1 = require("../../tokens");
 // `title`/`trailing` slot content a consumer supplies. `size.header` (48px)
 // is reused rather than a new token, since it's the same "workspace-switcher
 // header height" measured elsewhere in the sidebar.
+//
+// crisp#576: `border-box` plus a plain `height: ${size.header}` meant the
+// bordered variant's own 1px border was eaten OUT OF the 48px box, leaving
+// only 47px of content -- caught in review of internal/grc's own shell
+// shifting up 1px end-to-end after adopting this component. Re-measured
+// live: Attio's own `<header>` is 49px total (border-box) with the 1px
+// border OUTSIDE the 48px content row, not inside it. `[data-bordered]` now
+// grows the box by the border's own width so content stays 48px either way.
 const config = (0, core_1.defineRecipe)({
     name: "headerbar",
     base: `box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.header}; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    &[data-bordered] { border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    &[data-bordered] { height: calc(${tokens_1.contract.size.header} + 1px); border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
     & .crisp-headerbar-leading { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; min-width: 0; }
     & .crisp-headerbar-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; overflow: hidden; }
     & .crisp-headerbar-trailing { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; }`,

package/dist/cjs/product/importdialog/importdialog.js

@@ -0,0 +1,134 @@
+"use strict";
+"use client";
+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.ImportDialog = ImportDialog;
+exports.ImportDialogDropzone = ImportDialogDropzone;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_file_upload_1 = require("@seed-design/react-file-upload");
+const dialog = __importStar(require("@zag-js/dialog"));
+const react_1 = require("@zag-js/react");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const button_1 = require("../../components/button");
+const core_1 = require("../../core");
+const importdialog_recipe_1 = require("./importdialog.recipe");
+let instanceCounter = 0;
+function useImportDialogInstanceId() {
+    const idRef = React.useRef(null);
+    if (idRef.current == null) {
+        instanceCounter += 1;
+        idRef.current = `crisp-importdialog-${instanceCounter}`;
+    }
+    return idRef.current;
+}
+/**
+ * A full-viewport step wizard — Attio's own CSV import flow (measured live:
+ * `1584x871` filling a ~1600x900 viewport, `border-radius: 0`, no shadow,
+ * opaque white). Composes Zag's dialog machine for focus-trap/scroll-lock/
+ * Escape exactly like `Dialog`/`Drawer`, with its own recipe for the
+ * full-bleed chrome neither of those two share (see importdialog.recipe.ts).
+ *
+ * The step header and footer are generic — the wizard doesn't know about
+ * CSV. Step 1's body is typically `ImportDialogDropzone`; steps 2-4
+ * (map columns / review values / preview import) are consumer-supplied
+ * `children`, since Attio's own column-mapping UI wasn't part of this
+ * measurement pass.
+ */
+function ImportDialog({ open, onOpenChange, title = "Import", steps, activeStep, onStepClick, children, primaryLabel = "Next", onPrimary, primaryDisabled, "aria-label": ariaLabel, closeLabel: closeLabelProp, className, style, "aria-describedby": describedBy, ...rest }) {
+    const closeLabel = (0, core_1.useCrispMessage)(closeLabelProp, "Close");
+    const id = useImportDialogInstanceId();
+    const service = (0, react_1.useMachine)(dialog.machine, {
+        id,
+        open,
+        onOpenChange(details) {
+            onOpenChange(details.open);
+        },
+        "aria-label": typeof title === "string" ? title : ariaLabel,
+        // Defer to a nested Menu/Select/Popover/ContextMenu's own Escape
+        // handling (#361) -- see Dialog's identical comment; this composes the
+        // same Zag machine.
+        onEscapeKeyDown(event) {
+            if ((0, core_1.hasOpenFloatingLayer)())
+                event.preventDefault();
+        },
+    });
+    const api = dialog.connect(service, react_1.normalizeProps);
+    if (!api.open)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, importdialog_recipe_1.importdialogRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...api.getBackdropProps(), className: "crisp-importdialog-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "crisp-importdialog-positioner", children: (0, jsx_runtime_1.jsxs)("div", { ...rest, ...(0, core_1.withDescribedBy)(api.getContentProps(), describedBy), className: (0, core_1.cx)("crisp-importdialog-content", className), style: style, "data-crisp-importdialog": id, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-importdialog-header", children: [(0, jsx_runtime_1.jsx)("h2", { ...api.getTitleProps(), className: "crisp-importdialog-title", children: title }), (0, jsx_runtime_1.jsx)("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-importdialog-close", "aria-label": closeLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] }), (0, jsx_runtime_1.jsx)("nav", { className: "crisp-importdialog-steps", "aria-label": (typeof title === "string" ? title : ariaLabel) ?? "Steps", children: steps.map((step) => {
+                                    const isActive = step.id === activeStep;
+                                    const commonProps = {
+                                        className: "crisp-importdialog-step",
+                                        "data-active": isActive ? "" : undefined,
+                                        "aria-current": isActive ? "step" : undefined,
+                                    };
+                                    return onStepClick ? ((0, jsx_runtime_1.jsx)("button", { type: "button", ...commonProps, onClick: () => onStepClick(step.id), children: step.label }, step.id)) : ((0, jsx_runtime_1.jsx)("span", { ...commonProps, children: step.label }, step.id));
+                                }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-importdialog-body", children: children }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-importdialog-footer", children: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "primary", size: "md", disabled: primaryDisabled, onClick: onPrimary, children: primaryLabel }) })] }) })] }) }));
+}
+ImportDialog.displayName = "ImportDialog";
+/**
+ * The step-1 drop target — measured chrome (`border: 1px dashed
+ * rgb(230,231,234)`, `border-radius: 20px`, `background: rgb(251,251,251)`)
+ * over the SAME headless drag/drop + file-picker engine `FileUpload` uses
+ * (`@seed-design/react-file-upload`'s `useFileUpload`), rather than a fork
+ * of it. `FileUpload`'s own rendered markup (a single button carrying one
+ * title + one hint) can't host this dropzone's four separate pieces of copy
+ * — a title, an "or" divider, a "Choose a .CSV file" trigger, and a "Learn
+ * more" link that needs its own `<a href>` — so this composes the hook
+ * directly instead of wrapping `<FileUpload>`, and the engine (not this
+ * file) still owns every bit of drag-state/accept/reject behaviour.
+ */
+function ImportDialogDropzone({ accept = ".csv", disabled, maxFileSize, onFileAccept, onFileReject, dropLabel = "Drop your .CSV file onto this area to upload", orLabel = "or", chooseLabel = "Choose a .CSV file", learnMoreHref, learnMoreLabel = "Learn more", className, id, ...rest }) {
+    const [rejections, setRejections] = React.useState([]);
+    const { dropzoneProps, triggerProps, hiddenInputProps, inputRef } = (0, react_file_upload_1.useFileUpload)({
+        accept,
+        disabled,
+        maxFileSize,
+        maxFiles: 1,
+        onFileReject: (r) => {
+            setRejections(r);
+            onFileReject?.(r);
+        },
+        onFileAccept: (entries) => {
+            setRejections([]);
+            const file = entries[entries.length - 1]?.file;
+            if (file)
+                onFileAccept?.(file);
+        },
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { ...rest, ...dropzoneProps, className: (0, core_1.cx)("crisp-importdialog-dropzone", className), children: [(0, jsx_runtime_1.jsx)("input", { ...hiddenInputProps, id: id ?? hiddenInputProps.id, ref: inputRef, className: "crisp-importdialog-dropzone-input" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-importdialog-dropzone-title", children: dropLabel }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-importdialog-dropzone-or", children: orLabel }), (0, jsx_runtime_1.jsx)("button", { ...triggerProps, className: "crisp-importdialog-dropzone-choose", children: chooseLabel }), learnMoreHref && ((0, jsx_runtime_1.jsx)("a", { className: "crisp-importdialog-dropzone-learnmore", href: learnMoreHref, target: "_blank", rel: "noreferrer", children: learnMoreLabel })), (0, jsx_runtime_1.jsx)("ul", { className: "crisp-importdialog-dropzone-errors", "aria-live": "polite", children: rejections.map((r) => ((0, jsx_runtime_1.jsx)("li", { className: "crisp-importdialog-dropzone-error", children: r.file.name }, r.file.name))) })] }));
+}
+ImportDialogDropzone.displayName = "ImportDialogDropzone";

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

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.importdialogRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A full-viewport wizard takeover — measured live from Attio's own Import CSV
+// flow (app.attio.com/techpartners/companies -> toolbar "Import / Export" ->
+// "Import CSV"): panel `1584x871` in a ~1600x900 viewport (i.e. it fills the
+// content area, not a small centred modal like `Dialog`), `border-radius: 0`,
+// `box-shadow: none`, opaque `rgb(255,255,255)` background. Unlike
+// Dialog/Drawer's frosted, edge-gutter surfaces (AUTHORING Lesson 30), a
+// full-viewport takeover has no edge to float off of, so it gets its own
+// recipe rather than composing either.
+//
+// The 4-step header renders each step as a 28px pill (`size.row`), 8px
+// corner (`radius.md`), transparent at rest. Attio's own active-step
+// treatment wasn't captured in the measurement pass, so the current step
+// reuses crisp's existing brand-tint pattern (14%/82% `color-mix` — the same
+// ratio `RecordsTable`'s brand-tone tag and `MultiSelect`'s brand chip
+// already use) rather than inventing a new colour — a documented scope
+// decision, not a guess.
+//
+// The dropzone is `border: 1px dashed rgb(230,231,234)` (`borderDropzone`,
+// see tokens/palette.ts), `border-radius: 20px`, `background: rgb(251,251,251)`
+// (`bgSubtle`). 20px sits between the scale's `2xl` (16px) and `full` (999px)
+// with no other measured use yet — left as a raw px per AUTHORING 4b's
+// "genuine one-off" exception rather than added to the shared scale for a
+// single consumer.
+//
+// The primary "Next" button is composed from crisp's own `Button` (`intent`
+// `primary`, `size` `md` — 28px tall, 8px corner, brand solid background —
+// matches the measurement exactly), not a hand-rolled button.
+const config = (0, core_1.defineRecipe)({
+    name: "importdialog",
+    base: `display: contents; font-family: ${tokens_1.contract.font.sans};
+    & .crisp-importdialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
+    & .crisp-importdialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; }
+    & .crisp-importdialog-content {
+      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: relative; display: flex; flex-direction: column; box-sizing: border-box;
+      width: 100%; height: 100%; border-radius: 0; background: ${tokens_1.contract.bgSurface}; box-shadow: none;
+      transform: none; opacity: 1; transition: opacity 0.2s ease;
+      @starting-style { opacity: 0; }
+    }
+    & .crisp-importdialog-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["6"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-importdialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; margin: 0; }
+    & .crisp-importdialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .crisp-importdialog-close:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+
+    & .crisp-importdialog-steps { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; padding: ${tokens_1.contract.space["4"]} ${tokens_1.contract.space["6"]} 0; }
+    & .crisp-importdialog-step {
+      display: inline-flex; align-items: center; height: ${tokens_1.contract.size.row}; padding: 0 ${tokens_1.contract.space["2.5"]};
+      border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted};
+      font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: default;
+      transition: background-color .12s, color .12s;
+    }
+    & button.crisp-importdialog-step { cursor: pointer; }
+    & .crisp-importdialog-step[data-active] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-importdialog-step:focus-visible { outline: 2px solid ${tokens_1.contract.strokeFocusRing}; outline-offset: 1px; }
+
+    & .crisp-importdialog-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: ${tokens_1.contract.space["6"]}; }
+
+    & .crisp-importdialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${tokens_1.contract.space["6"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
+
+    & .crisp-importdialog-dropzone {
+      box-sizing: border-box; position: relative; flex: 1; min-height: 0;
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      gap: ${tokens_1.contract.space["1"]}; width: 100%;
+      border: 1px dashed ${tokens_1.contract.borderDropzone}; border-radius: 20px; background: ${tokens_1.contract.bgSubtle};
+      text-align: center; transition: background-color .12s, border-color .12s;
+    }
+    & .crisp-importdialog-dropzone[data-dragging-over] { border-color: ${tokens_1.contract.bgBrandSolid}; background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 6%, transparent); }
+    & .crisp-importdialog-dropzone[data-invalid] { border-color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-importdialog-dropzone-title { color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; }
+    & .crisp-importdialog-dropzone-or { color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.md}; line-height: 18px; }
+    & .crisp-importdialog-dropzone-choose {
+      border: none; background: none; padding: 0; margin: 0; font-family: inherit;
+      font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.bgBrandSolid}; cursor: pointer;
+    }
+    & .crisp-importdialog-dropzone-choose:hover { color: ${tokens_1.contract.bgBrandSolidPressed}; }
+    & .crisp-importdialog-dropzone-choose:focus-visible { outline: 2px solid ${tokens_1.contract.strokeFocusRing}; outline-offset: 2px; border-radius: ${tokens_1.contract.radius.sm}; }
+    & .crisp-importdialog-dropzone-learnmore { color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.md}; text-decoration: underline; }
+    & .crisp-importdialog-dropzone-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    & .crisp-importdialog-dropzone-errors { margin: 0; padding: 0; list-style: none; }
+    & .crisp-importdialog-dropzone-errors:empty { position: absolute; }
+    & .crisp-importdialog-dropzone-error { color: ${tokens_1.contract.bgDanger}; font-size: ${tokens_1.contract.text.md}; line-height: 18px; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.importdialogRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./importdialog"), exports);
+__exportStar(require("./importdialog.recipe"), exports);

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

@@ -9,6 +9,14 @@ const tokens_1 = require("../../tokens");
 // column (transparent, border-right) and a flexible main area whose tab bar
 // (14/500 labels over a sliding ink underline) switches content — Overview shows
 // a bordered Highlights stat-grid and an Activity feed.
+//
+// `.crisp-recordpage-panel`'s own `padding-top` (c.space["4"], 16px) was
+// dropped (your-moon/crisp#588): this panel is only ever rendered as Tabs'
+// own children (every branch of `builtinPanel` in recordpage.tsx, all fed to
+// `<Tabs>` below), so it sat inside `.crisp-tabs-panel`, which now carries
+// its own measured 32px top-inset by default — keeping both would have
+// stacked to 48px. Caught by tracing every consumer of `Tabs` before
+// shipping its new default, not by a screenshot.
 const config = (0, core_1.defineRecipe)({
     name: "recordpage",
     base: `
@@ -128,7 +136,8 @@ const config = (0, core_1.defineRecipe)({
 
     & .crisp-recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["5"]}; }
 
-    & .crisp-recordpage-panel { padding-top: ${tokens_1.contract.space["4"]}; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; }
+    /* no padding-top: Tabs' own panel supplies it now (#588) */
+    & .crisp-recordpage-panel { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; }
     & .crisp-recordpage-card { border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: ${tokens_1.contract.radius["2xl"]}; background: ${tokens_1.contract.bgSurface}; overflow: hidden; }
     & .crisp-recordpage-card-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.14px; color: ${tokens_1.contract.fgPrimary}; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; }
     & .crisp-recordpage-hl-card { border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: ${tokens_1.contract.radius["2xl"]}; overflow: hidden; }