@crisp-ui-kit/crisp 0.5.0 → 0.7.0

package/dist/esm/components/datepicker/datepicker.js

@@ -1,57 +1,108 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@seed-design/dom-utils";
+import { useDatePicker, } from "@seed-design/react-date-picker";
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import * as React from "react";
-import { Popover } from "../popover/popover.js";
+import { WheelPicker } from "../wheelpicker/index.js";
 import { datepickerRecipe } from "./datepicker.recipe.js";
-const DOW = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-const MONTHS = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-];
-const sameDay = (a, b) => a.getFullYear() === b.getFullYear() &&
-    a.getMonth() === b.getMonth() &&
-    a.getDate() === b.getDate();
-const defaultFormat = (d) => `${MONTHS[d.getMonth()].slice(0, 3)} ${d.getDate()}, ${d.getFullYear()}`;
-/**
- * A date field with a calendar popover — composes [Popover] with a month grid.
- * Controlled via `value`/`onChange` or self-managed from `defaultValue`.
- */
-export function DatePicker({ value, defaultValue, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, "aria-label": ariaLabel, className, }) {
-    const [internal, setInternal] = React.useState(defaultValue ?? null);
-    const selected = value ?? internal;
-    const [open, setOpen] = React.useState(false);
-    const [view, setView] = React.useState(() => selected ?? new Date());
-    // when reopening, jump the view to the selected month
-    React.useEffect(() => {
-        if (open)
-            setView(selected ?? new Date());
-    }, [open, selected]);
-    const pick = (d) => {
-        if (value === undefined)
-            setInternal(d);
-        onChange?.(d);
-        setOpen(false);
-    };
-    const today = new Date();
-    const year = view.getFullYear();
-    const month = view.getMonth();
-    const firstWeekday = new Date(year, month, 1).getDay();
-    const start = new Date(year, month, 1 - firstWeekday);
-    return (_jsx("div", { className: datepickerRecipe({ className }), children: _jsx(Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel ?? "Choose date", trigger: _jsxs("button", { type: "button", className: "datepicker-trigger", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", "aria-label": ariaLabel, children: [_jsx(CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: _jsxs("div", { className: "datepicker-cal", children: [_jsxs("div", { className: "datepicker-head", children: [_jsx("button", { type: "button", className: "datepicker-nav", "aria-label": "Previous month", onClick: () => setView(new Date(year, month - 1, 1)), children: _jsx(ChevronLeft, { size: 16, strokeWidth: 1.75 }) }), _jsxs("span", { className: "datepicker-title", children: [MONTHS[month], " ", year] }), _jsx("button", { type: "button", className: "datepicker-nav", "aria-label": "Next month", onClick: () => setView(new Date(year, month + 1, 1)), children: _jsx(ChevronRight, { size: 16, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "datepicker-grid", role: "grid", children: [DOW.map((d) => (_jsx("span", { className: "datepicker-dow", "aria-hidden": "true", children: d }, d))), Array.from({ length: 42 }, (_, i) => {
-                                const day = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
-                                const outside = day.getMonth() !== month;
-                                const isSel = selected != null && sameDay(day, selected);
-                                return (_jsx("button", { type: "button", className: "datepicker-day", "aria-label": format(day), "aria-pressed": isSel, "data-outside": outside ? "" : undefined, "data-today": sameDay(day, today) ? "" : undefined, "data-selected": isSel ? "" : undefined, onClick: () => pick(day), children: day.getDate() }, day.toISOString()));
-                            })] })] }) }) }));
+function WeekdayRow({ api, semantic = true, }) {
+    return (_jsx("div", { role: semantic ? "row" : undefined, "aria-hidden": semantic ? undefined : true, className: "datepicker-weekday-row", children: api.weekdayLabels.map((weekday) => (_jsx("div", { role: semantic ? "columnheader" : undefined, "aria-label": semantic ? weekday.long : undefined, className: "datepicker-weekday", children: _jsx("span", { "aria-hidden": "true", children: weekday.short }) }, weekday.key))) }));
 }
+function DateCellView({ cell, renderDateCellContent, renderDateCellSupplement, }) {
+    // a leading/trailing blank in the grid: still a gridcell, so the row keeps
+    // seven columns for a screen reader, but nothing to press
+    if (cell === null)
+        return (_jsx("div", { role: "gridcell", className: "datepicker-empty-cell" }));
+    const { cellProps, buttonProps, key: _key, ...renderProps } = cell;
+    return (_jsx("div", { ...cellProps, className: "datepicker-cell", children: _jsx("button", { ...buttonProps, type: "button", className: "datepicker-date", children: _jsx("span", { className: "datepicker-date-content", children: renderDateCellContent ? (renderDateCellContent(renderProps)) : (_jsxs(_Fragment, { children: [_jsx("span", { "data-date-picker-day": "", children: cell.formattedDay }), renderDateCellSupplement?.(renderProps)] })) }) }) }));
+}
+function NavigationButton({ direction, className, ...props }) {
+    const Icon = direction === "left" ? ChevronLeft : ChevronRight;
+    return (_jsx("button", { ...props, type: "button", className: className, children: _jsx(Icon, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }));
+}
+function Header({ api }) {
+    // in RTL the chevrons swap: "previous" is on the right
+    const previousDirection = api.isRtl ? "right" : "left";
+    const nextDirection = api.isRtl ? "left" : "right";
+    return (_jsxs("div", { className: "datepicker-header", children: [_jsxs("button", { ...api.monthYearButtonProps, type: "button", id: `${api.rootProps.id}-header-label`, className: "datepicker-header-label", children: [_jsx("span", { "data-date-picker-header-label": "", children: api.headerLabel }), _jsx("span", { className: "datepicker-header-chevron", "data-open": api.isWheelOpen ? "" : undefined, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), _jsxs("div", { className: "datepicker-nav", children: [_jsx(NavigationButton, { ...api.previousButtonProps, direction: previousDirection, className: "datepicker-nav-button" }), _jsx(NavigationButton, { ...api.nextButtonProps, direction: nextDirection, className: "datepicker-nav-button" })] })] }));
+}
+function TwoMonthHeader({ api, label, labelId, position, }) {
+    const isFirst = position === "first";
+    const direction = api.isRtl
+        ? isFirst
+            ? "right"
+            : "left"
+        : isFirst
+            ? "left"
+            : "right";
+    return (_jsxs("div", { className: "datepicker-two-month-header", children: [_jsx("div", { id: labelId, className: "datepicker-two-month-label", children: label }), _jsx(NavigationButton, { ...(isFirst ? api.previousButtonProps : api.nextButtonProps), direction: direction, "data-placement": isFirst ? "start" : "end", className: "datepicker-nav-button" })] }));
+}
+function MonthView({ api, month, renderDateCellContent, renderDateCellSupplement, showWeekdays, showMonthLabel, renderHeader, monthRef, }) {
+    const labelId = `${api.rootProps.id}-${month.key}-label`;
+    const headerLabelId = `${api.rootProps.id}-header-label`;
+    return (_jsxs("div", { ref: monthRef, className: "datepicker-month", children: [renderHeader?.(labelId), showMonthLabel ? (_jsx("div", { id: labelId, className: "datepicker-month-label", children: month.label })) : (_jsx("span", { id: labelId, className: "datepicker-live-region", children: month.label })), _jsxs("div", { ...api.gridProps, "aria-labelledby": showMonthLabel || renderHeader
+                    ? labelId
+                    : api.visibleRange === "month"
+                        ? headerLabelId
+                        : labelId, className: "datepicker-grid", children: [showWeekdays && _jsx(WeekdayRow, { api: api }), month.weeks.map((week) => (_jsx("div", { role: "row", className: "datepicker-week-row", children: week.cells.map((cell, index) => (_jsx(DateCellView, { cell: cell, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement }, cell?.key ?? `${week.key}-empty-${index}`))) }, week.key)))] })] }));
+}
+function WheelView({ api }) {
+    return (_jsx("div", { className: "datepicker-wheel-container", children: _jsx(WheelPicker, { className: "datepicker-wheel", "aria-label": api.headerLabel, columns: [
+                {
+                    key: "year",
+                    label: api.ariaLabels.yearWheel,
+                    options: api.wheel.yearOptions,
+                },
+                {
+                    key: "month",
+                    label: api.ariaLabels.monthWheel,
+                    options: api.wheel.monthOptions,
+                },
+            ], value: { year: api.wheel.yearValue, month: api.wheel.monthValue }, onValueChange: (next) => {
+                if (next.year !== api.wheel.yearValue)
+                    api.wheel.onYearValueChange(next.year);
+                if (next.month !== api.wheel.monthValue)
+                    api.wheel.onMonthValueChange(next.month);
+            } }) }));
+}
+const styleOf = ({ height, minHeight, maxHeight }) => height === undefined && minHeight === undefined && maxHeight === undefined
+    ? undefined
+    : { height, minHeight, maxHeight };
+const DatePickerImplementation = React.forwardRef((props, forwardedRef) => {
+    // The engine defaults `locale` to "ko-KR" — it is a Korean design system.
+    // crisp's other components are English-default, so the default is overridden
+    // here rather than inherited; a consumer's own `locale` still wins.
+    const api = useDatePicker({ locale: "en-US", ...props });
+    const { renderDateCellContent, renderDateCellSupplement, actionsRef, visibleRange: _visibleRange, selectionMode: _selectionMode, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, viewDate: _viewDate, defaultViewDate: _defaultViewDate, onViewDateChange: _onViewDateChange, today: _today, locale: _locale, weekStartsOn: _weekStartsOn, yearRange: _yearRange, monthRange: _monthRange, constraints: _constraints, disabled: _disabled, readOnly: _readOnly, rangeStartReadOnly: _rangeStartReadOnly, ariaLabels: _ariaLabels, height, minHeight, maxHeight, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...rootProps } = props;
+    React.useImperativeHandle(actionsRef, () => api.actions, [api.actions]);
+    // a labelledby wins over a label; otherwise fall back to the engine's name
+    const rootAriaLabel = ariaLabelledby
+        ? ariaLabel
+        : (ariaLabel ?? api.ariaLabels.root);
+    return (_jsxs("div", { ref: (el) => {
+            api.refs.root(el);
+            if (typeof forwardedRef === "function")
+                forwardedRef(el);
+            else if (forwardedRef)
+                forwardedRef.current = el;
+        }, ...mergeProps(api.rootProps, rootProps), "aria-label": rootAriaLabel, "aria-labelledby": ariaLabelledby, className: datepickerRecipe({
+            visibleRange: api.visibleRange,
+            className,
+        }), style: styleOf({ height, minHeight, maxHeight }), children: [api.visibleRange === "continuous" ? (_jsxs("div", { ref: api.refs.continuousScroll, ...api.continuousScrollProps, "data-date-picker-continuous-scroll": "", className: "datepicker-continuous-scroll", children: [_jsx(WeekdayRow, { api: api, semantic: false }), _jsxs("div", { className: "datepicker-continuous-content", children: [_jsx("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.topHeight } }), api.months.map((month) => (_jsx(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: false, showMonthLabel: true, monthRef: api.refs.continuousMonth(month.key) }, month.key))), _jsx("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.bottomHeight } })] })] })) : (_jsxs(_Fragment, { children: [api.visibleRange !== "twoMonths" && _jsx(Header, { api: api }), _jsx("div", { "data-wheel-open": api.isWheelOpen && api.visibleRange !== "twoMonths"
+                            ? ""
+                            : undefined, "aria-hidden": api.isWheelOpen && api.visibleRange !== "twoMonths"
+                            ? true
+                            : undefined, className: "datepicker-months", children: api.months.map((month, index) => (_jsx(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: true, showMonthLabel: false, renderHeader: api.visibleRange === "twoMonths"
+                                ? (labelId) => (_jsx(TwoMonthHeader, { api: api, label: month.label, labelId: labelId, position: index === 0 ? "first" : "last" }))
+                                : undefined }, month.key))) }), api.isWheelOpen && api.visibleRange !== "twoMonths" && (_jsx(WheelView, { api: api }))] })), _jsx("span", { ...api.liveRegionProps, className: "datepicker-live-region", children: api.headerLabel })] }));
+});
+DatePickerImplementation.displayName = "DatePickerImplementation";
+export const DatePicker = React.forwardRef((props, ref) => (_jsx(DatePickerImplementation, { ref: ref, ...props, visibleRange: "month" })));
 DatePicker.displayName = "DatePicker";
+export const TwoMonthDatePicker = React.forwardRef((props, ref) => (_jsx(DatePickerImplementation, { ref: ref, ...props, visibleRange: "twoMonths" })));
+TwoMonthDatePicker.displayName = "TwoMonthDatePicker";
+export const WeekDatePicker = React.forwardRef((props, ref) => (_jsx(DatePickerImplementation, { ref: ref, ...props, visibleRange: "week" })));
+WeekDatePicker.displayName = "WeekDatePicker";
+export const ContinuousDatePicker = React.forwardRef((props, ref) => (_jsx(DatePickerImplementation, { ref: ref, ...props, visibleRange: "continuous" })));
+ContinuousDatePicker.displayName = "ContinuousDatePicker";
+export { compareDates, dateKey, dateOnOrAfter, dateOnOrBefore, excludeDates, isSameDate, maxSelectionCount, rangeDayCountAtLeast, rangeDayCountAtMost, } from "@seed-design/react-date-picker";

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

@@ -1,32 +1,177 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
-// A date field + calendar popover — measured from Attio's date cell editor: an
-// outlined trigger showing the value, opening a month grid (weekday row, day
-// cells, today outline, selected day brand-filled).
+// seed-design's calendar, measured from @seed-design/css. The geometry is a
+// 48px rhythm: header, weekday row, month label and every date cell are all
+// x12 tall, and the 42px pill inside a cell is inset 3px from its top.
+//
+// The pill and the range bridge are ::before layers behind the numeral
+// (`isolation: isolate` on the cell keeps their z-index local), which is what
+// lets a range paint edge-to-edge between cells while each day keeps its own
+// round highlight.
+// The pill is centred in the cell, so its inset is the half-difference rather
+// than a fourth independent number: change the cell or the pill and the inset
+// follows. Every `top` in the calendar -- the day pill, its focus ring, the
+// range bridge and the content column's padding -- is this one value.
+const pillInset = `calc((${c.size.calendarCell} - ${c.size.calendarPill}) / 2)`;
 const config = defineRecipe({
     name: "datepicker",
-    base: `display: contents; font-family: ${c.font.sans};
-    & .datepicker-trigger { display: inline-flex; align-items: center; gap: ${c.space["2"]}; box-sizing: border-box; height: 32px; padding: 0 ${c.space["2.5"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 7%, transparent); color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; white-space: nowrap; cursor: pointer; }
-    & .datepicker-trigger[data-ghost] { background: transparent; box-shadow: none; }
-    & .datepicker-trigger[data-ghost]:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
-    & .datepicker-trigger[data-placeholder] { color: ${c.fgMuted}; }
-    & .datepicker-trigger svg { flex-shrink: 0; color: ${c.fgMuted}; }
-    & .datepicker-cal { width: 244px; }
-    & .datepicker-head { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 ${c.space["1"]}; }
-    & .datepicker-title { font-size: ${c.text.md}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
-    & .datepicker-nav { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; cursor: pointer; }
-    & .datepicker-nav:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
-    & .datepicker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: ${c.space["1"]}; }
-    & .datepicker-dow { display: flex; align-items: center; justify-content: center; height: 24px; font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
-    & .datepicker-day { display: flex; align-items: center; justify-content: center; height: 30px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; cursor: pointer; }
-    & .datepicker-day:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
-    & .datepicker-day[data-outside] { color: ${c.fgMuted}; opacity: 0.5; }
-    & .datepicker-day[data-today] { box-shadow: inset 0 0 0 1px ${c.borderDefault}; }
-    & .datepicker-day[data-selected] { background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; }
-    & .datepicker-day[data-selected]:hover { background: ${c.bgBrandSolidPressed}; }`,
-    variants: {},
-    defaultVariants: {},
+    base: `
+    position: relative; box-sizing: border-box; width: 100%; min-width: 0;
+    font-family: ${c.font.sans}; color: ${c.fgNeutralMuted}; background: ${c.bgSurface};
+
+    & .datepicker-header {
+      display: flex; align-items: center; justify-content: space-between;
+      height: ${c.size.calendarCell};
+    }
+    & .datepicker-header-label {
+      display: inline-flex; align-items: center; gap: ${c.space["1"]};
+      height: 100%; min-width: 0; border: 0; padding: 0 ${c.space["1"]};
+      border-radius: ${c.radius.md}; background: transparent; cursor: pointer;
+      color: ${c.fgPrimary}; font-family: inherit;
+      font-size: ${c.text.xl}; line-height: 22px; font-weight: ${c.weight.bold};
+      white-space: nowrap;
+      outline: 2px solid transparent; outline-offset: -2px;
+      transition: outline-color .2s ease;
+    }
+    & .datepicker-header-label:focus-visible { outline-color: ${c.strokeFocusRing}; }
+    & .datepicker-header-chevron { display: inline-flex; transition: transform .2s ease; }
+    & .datepicker-header-chevron[data-open] { transform: rotate(180deg); }
+
+    & .datepicker-nav { display: flex; align-items: center; }
+    & .datepicker-nav-button {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: ${c.size.menuRow}; height: ${c.size.menuRow}; padding: 0;
+      border: none; border-radius: ${c.radius.md}; background: none;
+      color: ${c.fgMuted}; font-family: inherit; cursor: pointer;
+      outline: 2px solid transparent; outline-offset: -2px;
+      transition: background-color .12s, outline-color .2s ease;
+    }
+    & .datepicker-nav-button:hover { background: ${c.bgRaised}; }
+    & .datepicker-nav-button:focus-visible { outline-color: ${c.strokeFocusRing}; }
+    & .datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
+
+    & .datepicker-weekday-row {
+      display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
+      position: relative; z-index: 2; background: ${c.bgSurface};
+    }
+    & .datepicker-weekday {
+      display: flex; align-items: center; justify-content: center;
+      height: ${c.size.calendarCell}; color: ${c.fgNeutralSubtle};
+      font-size: ${c.text.lg}; line-height: 19px; font-weight: ${c.weight.medium};
+    }
+
+    & .datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
+    & .datepicker-months[data-wheel-open] { visibility: hidden; }
+    & .datepicker-month { min-width: 0; }
+    & .datepicker-month-label {
+      display: flex; align-items: center; height: ${c.size.calendarCell};
+      color: ${c.fgPrimary}; font-size: ${c.text.xl}; line-height: 22px;
+      font-weight: ${c.weight.bold};
+    }
+
+    & .datepicker-grid { display: grid; min-width: 0; }
+    & .datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
+
+    & .datepicker-cell {
+      position: relative; min-width: 0; min-height: ${c.size.calendarCell};
+      isolation: isolate;
+    }
+    & .datepicker-empty-cell { min-height: ${c.size.calendarCell}; }
+
+    /* the bridge joining days inside a completed range */
+    & .datepicker-cell[data-range-complete][data-in-range]::before {
+      content: ""; position: absolute; z-index: -1; inset-inline: 0;
+      top: ${pillInset}; height: ${c.size.calendarPill}; background: ${c.bgNeutralWeak};
+    }
+    & .datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
+      inset-inline-start: 50%;
+    }
+    & .datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
+      inset-inline-end: 50%;
+    }
+
+    & .datepicker-date {
+      position: relative; display: flex; width: 100%; height: 100%;
+      min-height: ${c.size.calendarCell}; min-width: 0;
+      align-items: flex-start; justify-content: center;
+      border: 0; padding: 0; background: transparent; cursor: pointer;
+      color: ${c.fgNeutralMuted}; font: inherit; outline: none;
+      isolation: isolate;
+    }
+    /* the round day highlight, behind the numeral */
+    & .datepicker-date::before {
+      content: ""; position: absolute; z-index: -1; top: ${pillInset}; left: 50%;
+      width: ${c.size.calendarPill}; height: ${c.size.calendarPill};
+      border-radius: ${c.radius.full};
+      background: transparent; transform: translateX(-50%);
+    }
+    & .datepicker-date[data-today]::before { background: ${c.bgNeutralWeak}; }
+    & .datepicker-date[data-selected]::before { background: ${c.bgNeutralInverted}; }
+    & .datepicker-date[data-selected] { color: ${c.fgOnNeutralInverted}; }
+    & .datepicker-date[data-in-range] { color: ${c.fgNeutralMuted}; }
+    & .datepicker-date[data-in-range]::before { background: transparent; }
+    & .datepicker-date[data-unavailable] { color: ${c.fgDisabled}; }
+    & .datepicker-date:disabled { color: ${c.fgDisabled}; cursor: not-allowed; }
+    & .datepicker-date:focus-visible::after {
+      content: ""; position: absolute; top: ${pillInset}; left: 50%;
+      width: ${c.size.calendarPill}; height: ${c.size.calendarPill};
+      transform: translateX(-50%); border-radius: ${c.radius.full};
+      outline: 2px solid ${c.strokeFocusRing}; outline-offset: -2px;
+    }
+
+    & .datepicker-date-content {
+      position: relative; z-index: 1; display: flex; width: 100%;
+      min-height: ${c.size.calendarCell}; min-width: 0; box-sizing: border-box;
+      flex-direction: column; align-items: center; gap: 3px;
+      padding-top: ${pillInset}; color: inherit;
+      font-size: ${c.text.xl}; line-height: 22px; font-weight: ${c.weight.medium};
+      font-variant-numeric: tabular-nums;
+    }
+    /* The numeral is its own 42px flex box so it centres on the 42px pill.
+       Without this the content column top-aligns the glyph and the pill reads
+       as offset — the cell is 48px, the pill 42px inset 3px, and only a
+       42px-tall numeral box shares the pill's centre line. */
+    & .datepicker-date-content > [data-date-picker-day] {
+      display: flex; min-height: ${c.size.calendarPill}; flex-shrink: 0;
+      align-items: center; justify-content: center;
+    }
+
+    /* the year/month wheel, laid over the grid it replaces */
+    & .datepicker-wheel-container {
+      position: absolute; z-index: 1; inset-inline: 0;
+      top: ${c.size.calendarCell}; bottom: 0;
+      display: flex; align-items: center; overflow: hidden;
+      background: ${c.bgSurface};
+    }
+    & .datepicker-wheel { width: 100%; }
+
+    & .datepicker-continuous-scroll {
+      height: 100%; min-height: 0; overflow-y: auto;
+      overscroll-behavior: contain; scrollbar-width: none;
+    }
+    & .datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
+    & .datepicker-continuous-content { display: flex; flex-direction: column; }
+
+    /* announced, never drawn */
+    & .datepicker-live-region {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+  `,
+    variants: {
+        visibleRange: {
+            month: ``,
+            twoMonths: `& .datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: ${c.space["6"]}; }
+        & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: ${c.size.calendarCell}; }
+        & .datepicker-two-month-label { color: ${c.fgPrimary}; font-size: ${c.text.xl}; line-height: 22px; font-weight: ${c.weight.bold}; }`,
+            week: ``,
+            continuous: `& .datepicker-weekday-row { position: sticky; top: 0; }`,
+        },
+    },
+    defaultVariants: { visibleRange: "month" },
     compoundVariants: [],
 });
-export const datepickerRecipe = resolveRecipe(config);
+export const datepickerRecipe = Object.assign(resolveRecipe(config), {
+    config,
+});
 export default config;

package/dist/esm/components/datepicker/index.js

@@ -1,2 +1,2 @@
-export { DatePicker } from "./datepicker.js";
+export { ContinuousDatePicker, compareDates, DatePicker, dateKey, dateOnOrAfter, dateOnOrBefore, excludeDates, isSameDate, maxSelectionCount, rangeDayCountAtLeast, rangeDayCountAtMost, TwoMonthDatePicker, WeekDatePicker, } from "./datepicker.js";
 export { datepickerRecipe } from "./datepicker.recipe.js";

package/dist/esm/components/datepickerfield/datepickerfield.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarDays } from "lucide-react";
+import * as React from "react";
+import { DatePicker, } from "../datepicker/index.js";
+import { Popover } from "../popover/index.js";
+import { datepickerfieldRecipe } from "./datepickerfield.recipe.js";
+const defaultFormat = (d) => d.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+});
+// the calendar counts months from 1; a JS Date counts from 0
+const toDate = (d) => new Date(d.year, d.month - 1, d.day);
+const fromDate = (d) => ({
+    year: d.getFullYear(),
+    month: d.getMonth() + 1,
+    day: d.getDate(),
+});
+/**
+ * Attio's date field: a trigger showing the value, opening a calendar in a
+ * popover. This is what `DatePicker` used to be; `DatePicker` is now
+ * seed-design's bare calendar, and this composes it.
+ */
+export function DatePickerField({ value, defaultValue, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+    const [internal, setInternal] = React.useState(defaultValue ?? null);
+    const selected = value ?? internal;
+    const [open, setOpen] = React.useState(false);
+    const pick = (d) => {
+        if (value === undefined)
+            setInternal(d);
+        onChange?.(d);
+        setOpen(false);
+    };
+    return (_jsx("div", { className: datepickerfieldRecipe({ className }), ...rest, children: _jsx(Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: _jsxs("button", { type: "button", className: "datepickerfield-trigger", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", "aria-label": ariaLabel, children: [_jsx(CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: _jsxs("div", { className: "datepickerfield-panel", children: [_jsx(DatePicker
+                    // DatePickerProps is a union over selectionMode, and TypeScript
+                    // cannot narrow it through a spread: it tries every branch and
+                    // reports the range one as missing props. The field is always
+                    // single-select, so the shape is pinned here rather than inferred.
+                    , { ...{
+                            ...calendarProps,
+                            selectionMode: "single",
+                            value: selected ? fromDate(selected) : undefined,
+                            onValueChange: (next) => {
+                                if (next)
+                                    pick(toDate(next));
+                            },
+                        } }), presets && presets.length > 0 && (_jsx("div", { className: "datepickerfield-presets", children: presets.map((p, i) => (_jsx("button", { type: "button", className: "datepickerfield-preset", onClick: () => pick(p.date()), children: p.label }, typeof p.label === "string" ? p.label : i))) }))] }) }) }));
+}
+DatePickerField.displayName = "DatePickerField";

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

@@ -0,0 +1,41 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The trigger crisp's DatePicker used to own, measured from Attio: a 32px
+// outlined chip showing the value, opening a calendar in a popover. Split out
+// when DatePicker became seed-design's bare calendar, so this Attio-measured
+// field survives unchanged for the consumers already using it.
+const config = defineRecipe({
+    name: "datepickerfield",
+    base: `
+    display: inline-flex; font-family: ${c.font.sans};
+
+    & .datepickerfield-trigger {
+      display: inline-flex; align-items: center; gap: ${c.space["2"]};
+      box-sizing: border-box; height: 32px; padding: 0 ${c.space["2.5"]}; margin: 0;
+      border: none; border-radius: ${c.radius.md}; background: transparent;
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 7%, transparent);
+      color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg};
+      white-space: nowrap; cursor: pointer;
+    }
+    & .datepickerfield-trigger[data-ghost] { background: transparent; box-shadow: none; }
+    & .datepickerfield-trigger[data-ghost]:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
+    & .datepickerfield-trigger[data-placeholder] { color: ${c.fgMuted}; }
+    & .datepickerfield-trigger svg { flex-shrink: 0; color: ${c.fgMuted}; }
+
+    & .datepickerfield-panel { padding: ${c.space["2"]}; width: 300px; }
+    & .datepickerfield-presets { display: flex; flex-wrap: wrap; gap: ${c.space["1"]}; margin-top: ${c.space["2"]}; }
+    & .datepickerfield-preset {
+      height: ${c.size.chip}; padding: 0 ${c.space["2"]}; border: none;
+      border-radius: ${c.radius.chip}; background: ${c.bgRaised}; color: ${c.fgPrimary};
+      font-family: inherit; font-size: ${c.text.sm}; cursor: pointer;
+    }
+    & .datepickerfield-preset:hover { background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const datepickerfieldRecipe = Object.assign(resolveRecipe(config), {
+    config,
+});
+export default config;

package/dist/esm/components/datepickerfield/index.js

@@ -0,0 +1,2 @@
+export { DatePickerField, } from "./datepickerfield.js";
+export { datepickerfieldRecipe } from "./datepickerfield.recipe.js";

package/dist/esm/components/dialog/dialog.js

@@ -21,7 +21,7 @@ function useDialogInstanceId() {
  * Escape / outside-click dismissal) with the measured Attio modal surface.
  * Compose the body with `DialogBody` and actions with `DialogFooter`.
  */
-export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, children, }) {
+export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, closeLabel = "Close", children, }) {
     const id = useDialogInstanceId();
     const service = useMachine(dialog.machine, {
         id,
@@ -37,7 +37,7 @@ export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-lab
     const api = dialog.connect(service, normalizeProps);
     if (!api.open)
         return null;
-    return (_jsx(Portal, { children: _jsxs("div", { className: dialogRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "dialog-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "dialog-positioner", children: _jsx("div", { ...api.getContentProps(), className: "dialog-content", "data-crisp-dialog": id, style: { maxWidth: `min(${width}px, 90vw)` }, children: _jsxs("div", { className: "dialog-card", children: [title != null && (_jsxs("div", { className: "dialog-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "dialog-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "dialog-close", "aria-label": "Close", children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
+    return (_jsx(Portal, { children: _jsxs("div", { className: dialogRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "dialog-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "dialog-positioner", children: _jsx("div", { ...api.getContentProps(), className: "dialog-content", "data-crisp-dialog": id, style: { maxWidth: `min(${width}px, 90vw)` }, children: _jsxs("div", { className: "dialog-card", children: [title != null && (_jsxs("div", { className: "dialog-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "dialog-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "dialog-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
 }
 Dialog.displayName = "Dialog";
 export function DialogBody({ children, className, }) {

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

@@ -1,5 +1,5 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
 // A modal dialog surface — measured from Attio's create-record modal: a radius-16
 // frosted-glass card (60% tinted background + 15px backdrop blur, both re-measured
 // per theme — light uses a blue-tinted 3-layer shadow, dark drops to a plain
@@ -10,18 +10,18 @@ const config = defineRecipe({
     base: `display: contents; font-family: ${c.font.sans};
     & .dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
     & .dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${c.space["4"]} ${c.space["4"]}; }
-    & .dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px ${c.shadowOverlay1}, 0 18px 88px -4px ${c.shadowOverlay2}, 0 0 1px ${c.shadowOverlay3}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${e.modal}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
     & .dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden; }
     & .dialog-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
     & .dialog-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
     & .dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
-    & .dialog-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: ${c.radius.md}; background: none; color: ${c.fgMuted}; cursor: pointer; }
+    & .dialog-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: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
     & .dialog-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
     & .dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: ${c.space["4"]}; padding: ${c.space["5"]} ${c.space["4"]}; }
     & .dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${c.space["4"]}; border-top: 1px solid ${c.borderSubtle}; }
     & .dialog-field { display: flex; flex-direction: column; gap: ${c.space["1.5"]}; }
     & .dialog-field-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
-    & .dialog-more { display: inline-flex; align-items: center; gap: ${c.space["2"]}; margin-right: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .dialog-more { display: inline-flex; align-items: center; gap: ${c.space["2"]}; margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgMuted}; cursor: pointer; }
     & .dialog-submit { display: inline-flex; align-items: center; gap: ${c.space["2"]}; height: 28px; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
     & .dialog-submit-key { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${c.text.xs}; }`,
     variants: {},

package/dist/esm/components/divider/divider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { dividerRecipe } from "./divider.recipe.js";
 /** A hairline separator over `borderSubtle`, horizontal or vertical. */
-export function Divider({ orientation = "horizontal", className, }) {
-    return (_jsx("hr", { "aria-orientation": orientation, "data-orientation": orientation, className: dividerRecipe({ className }) }));
+export function Divider({ orientation = "horizontal", className, ...rest }) {
+    return (_jsx("hr", { "aria-orientation": orientation, "data-orientation": orientation, className: dividerRecipe({ className }), ...rest }));
 }
 Divider.displayName = "Divider";

package/dist/esm/components/donutchart/donutchart.js

@@ -16,7 +16,7 @@ const PALETTE = [
  * ring using the r=15.915 (circumference 100) trick so slices are percentages;
  * a centred total and an optional legend. `role="img"` with a summary.
  */
-export function DonutChart({ data, size = 120, thickness = 14, centerValue, centerCaption, legend = true, format = (n) => n.toLocaleString(), "aria-label": ariaLabel, className, }) {
+export function DonutChart({ data, size = 120, thickness = 14, centerValue, centerCaption, legend = true, format = (n) => n.toLocaleString(), "aria-label": ariaLabel, className, ...rest }) {
     const total = data.reduce((s, d) => s + Math.max(0, d.value), 0);
     const R = 15.915; // circumference ≈ 100
     let cursor = 0;
@@ -33,6 +33,6 @@ export function DonutChart({ data, size = 120, thickness = 14, centerValue, cent
     });
     const summary = ariaLabel ??
         `Donut chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
-    return (_jsxs("div", { className: donutchartRecipe({ className }), role: "img", "aria-label": summary, children: [_jsxs("div", { className: "donutchart-ring", style: { width: size, height: size }, children: [_jsxs("svg", { className: "donutchart-svg", width: size, height: size, viewBox: "0 0 42 42", "aria-hidden": "true", children: [_jsx("circle", { className: "donutchart-track", cx: 21, cy: 21, r: R, strokeWidth: (thickness / size) * 42 }), slices.map((s) => (_jsx("circle", { className: "donutchart-seg", cx: 21, cy: 21, r: R, stroke: s.color, strokeWidth: (thickness / size) * 42, strokeDasharray: `${s.pct} ${100 - s.pct}`, strokeDashoffset: s.offset, children: _jsx("title", { children: `${s.label}: ${format(s.value)}` }) }, s.label)))] }), _jsxs("div", { className: "donutchart-center", children: [_jsx("span", { className: "donutchart-total", children: centerValue ?? format(total) }), centerCaption != null && (_jsx("span", { className: "donutchart-caption", children: centerCaption }))] })] }), legend && (_jsx("div", { className: "donutchart-legend", children: slices.map((s) => (_jsxs("span", { className: "donutchart-item", children: [_jsx("span", { className: "donutchart-swatch", style: { background: s.color } }), _jsx("span", { className: "donutchart-name", children: s.label }), _jsx("span", { className: "donutchart-val", children: format(s.value) })] }, s.label))) }))] }));
+    return (_jsxs("div", { className: donutchartRecipe({ className }), ...rest, role: "img", "aria-label": summary, children: [_jsxs("div", { className: "donutchart-ring", style: { width: size, height: size }, children: [_jsxs("svg", { className: "donutchart-svg", width: size, height: size, viewBox: "0 0 42 42", "aria-hidden": "true", children: [_jsx("circle", { className: "donutchart-track", cx: 21, cy: 21, r: R, strokeWidth: (thickness / size) * 42 }), slices.map((s) => (_jsx("circle", { className: "donutchart-seg", cx: 21, cy: 21, r: R, stroke: s.color, strokeWidth: (thickness / size) * 42, strokeDasharray: `${s.pct} ${100 - s.pct}`, strokeDashoffset: s.offset, children: _jsx("title", { children: `${s.label}: ${format(s.value)}` }) }, s.label)))] }), _jsxs("div", { className: "donutchart-center", children: [_jsx("span", { className: "donutchart-total", children: centerValue ?? format(total) }), centerCaption != null && (_jsx("span", { className: "donutchart-caption", children: centerCaption }))] })] }), legend && (_jsx("div", { className: "donutchart-legend", children: slices.map((s) => (_jsxs("span", { className: "donutchart-item", children: [_jsx("span", { className: "donutchart-swatch", style: { background: s.color } }), _jsx("span", { className: "donutchart-name", children: s.label }), _jsx("span", { className: "donutchart-val", children: format(s.value) })] }, s.label))) }))] }));
 }
 DonutChart.displayName = "DonutChart";

package/dist/esm/components/drawer/drawer.js

@@ -18,7 +18,7 @@ function useDrawerInstanceId() {
  * Escape / outside-click dismissal) with a panel that slides in from the edge.
  * Compose the body with `DrawerBody` and actions with `DrawerFooter`.
  */
-export function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-label": ariaLabel, children, }) {
+export function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-label": ariaLabel, closeLabel = "Close", children, }) {
     const id = useDrawerInstanceId();
     const service = useMachine(dialog.machine, {
         id,
@@ -31,7 +31,7 @@ export function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-
     const api = dialog.connect(service, normalizeProps);
     if (!api.open)
         return null;
-    return (_jsx(Portal, { children: _jsxs("div", { className: drawerRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "drawer-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "drawer-positioner", "data-side": side, children: _jsxs("div", { ...api.getContentProps(), className: "drawer-content", children: [title != null && (_jsxs("div", { className: "drawer-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "drawer-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "drawer-close", "aria-label": "Close", children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) })] }) }));
+    return (_jsx(Portal, { children: _jsxs("div", { className: drawerRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "drawer-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "drawer-positioner", "data-side": side, children: _jsxs("div", { ...api.getContentProps(), className: "drawer-content", children: [title != null && (_jsxs("div", { className: "drawer-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "drawer-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "drawer-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) })] }) }));
 }
 Drawer.displayName = "Drawer";
 export function DrawerBody({ children }) {