@workflow/web-shared 5.0.0-beta.26 → 5.0.0-beta.27

package/dist/components/sidebar/detail-card.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, ChevronRight } from 'lucide-react';
-import { useState } from 'react';
-import { cn } from '../../lib/cn';
-export function DetailCard({ summary, children, onToggle, disabled = false, defaultOpen = false, variant = 'section', trailing, summaryClassName, contentClassName, }) {
-    const [open, setOpen] = useState(defaultOpen);
-    const handleToggle = (e) => {
-        // React surfaces `toggle` as a bubbling synthetic event even though the
-        // native event doesn't bubble. Without this guard, a nested <details>
-        // (e.g. an event card inside the Events section) collapsing would flip
-        // the outer DetailCard's state. Only react to direct toggles.
-        if (e.target !== e.currentTarget)
-            return;
-        const next = e.currentTarget.open;
-        setOpen(next);
-        onToggle?.(next);
-    };
-    if (variant === 'card') {
-        if (disabled) {
-            return (_jsx("div", { className: cn('list-none px-3 py-4 bg-background-200 [&::-webkit-details-marker]:hidden', summaryClassName), style: { cursor: 'not-allowed', opacity: 0.8 }, children: summary }));
-        }
-        return (_jsxs("details", { className: "group/card last:border-b border-gray-alpha-400", open: open, onToggle: handleToggle, children: [_jsx("summary", { className: cn('list-none cursor-pointer px-3 py-4 border-t border-gray-alpha-400 bg-background-200 hover:bg-gray-100 [&::-webkit-details-marker]:hidden', summaryClassName), children: _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(ChevronRight, { size: 14, className: cn('shrink-0 text-gray-700 group-hover/card:text-gray-1000', open && 'rotate-90') }), summary] }) }), _jsx("div", { className: contentClassName, children: children })] }));
-    }
-    // Shared height with the expandable summary row. Keeps the trailing /
-    // disabled / chevron variants visually identical in height regardless of
-    // what's in the trailing slot.
-    const rowClasses = 'flex h-9 items-center gap-2 px-2 -mx-2 text-heading-14 font-medium my-2';
-    if (trailing) {
-        return (_jsx("section", { className: "-mx-4 border-t px-4 border-gray-alpha-400", children: _jsxs("div", { className: cn(rowClasses, summaryClassName), children: [_jsx("div", { className: "isolate relative shrink-0 w-3.5 h-3.5 text-gray-700", children: _jsx(ChevronRight, { size: 14, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }) }), _jsx("span", { className: "min-w-0 flex-1", children: summary }), _jsx("div", { className: "shrink-0 pr-1", children: trailing })] }) }));
-    }
-    if (disabled) {
-        return (_jsx("section", { className: "-mx-4 border-t px-4 border-gray-alpha-400", children: _jsx("div", { className: cn(rowClasses, summaryClassName), style: { color: 'var(--ds-gray-700)', cursor: 'not-allowed' }, children: _jsx("span", { className: "min-w-0 flex-1", children: summary }) }) }));
-    }
-    return (_jsx("section", { className: "-mx-4 border-t px-4 border-gray-alpha-400", children: _jsxs("details", { className: "group", open: open, onToggle: handleToggle, children: [_jsxs("summary", { className: cn('group/trigger list-none cursor-pointer rounded hover:bg-gray-alpha-100 [&::-webkit-details-marker]:hidden', rowClasses, summaryClassName), children: [_jsxs("div", { className: "isolate relative shrink-0 text-gray-700 group-hover/trigger:text-gray-1000 w-3.5 h-3.5", children: [_jsx(ChevronRight, { size: 14, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-100 group-open:opacity-0" }), _jsx(ChevronDown, { size: 14, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 group-open:opacity-100" })] }), _jsx("span", { className: "min-w-0 flex-1", children: summary })] }), _jsx("div", { className: cn('mb-3', contentClassName), children: children })] }) }));
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGV0YWlsLWNhcmQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9zaWRlYmFyL2RldGFpbC1jYXJkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxZQUFZLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDekQsT0FBTyxFQUFrQixRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUM7QUFDakQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUVsQyxNQUFNLFVBQVUsVUFBVSxDQUFDLEVBQ3pCLE9BQU8sRUFDUCxRQUFRLEVBQ1IsUUFBUSxFQUNSLFFBQVEsR0FBRyxLQUFLLEVBQ2hCLFdBQVcsR0FBRyxLQUFLLEVBQ25CLE9BQU8sR0FBRyxTQUFTLEVBQ25CLFFBQVEsRUFDUixnQkFBZ0IsRUFDaEIsZ0JBQWdCLEdBV2pCO0lBQ0MsTUFBTSxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsR0FBRyxRQUFRLENBQUMsV0FBVyxDQUFDLENBQUM7SUFFOUMsTUFBTSxZQUFZLEdBQUcsQ0FBQyxDQUEyQyxFQUFFLEVBQUU7UUFDbkUsd0VBQXdFO1FBQ3hFLHNFQUFzRTtRQUN0RSx1RUFBdUU7UUFDdkUsOERBQThEO1FBQzlELElBQUksQ0FBQyxDQUFDLE1BQU0sS0FBSyxDQUFDLENBQUMsYUFBYTtZQUFFLE9BQU87UUFDekMsTUFBTSxJQUFJLEdBQUcsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUM7UUFDbEMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ2QsUUFBUSxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDbkIsQ0FBQyxDQUFDO0lBRUYsSUFBSSxPQUFPLEtBQUssTUFBTSxFQUFFLENBQUM7UUFDdkIsSUFBSSxRQUFRLEVBQUUsQ0FBQztZQUNiLE9BQU8sQ0FDTCxjQUNFLFNBQVMsRUFBRSxFQUFFLENBQ1gsMEVBQTBFLEVBQzFFLGdCQUFnQixDQUNqQixFQUNELEtBQUssRUFBRSxFQUFFLE1BQU0sRUFBRSxhQUFhLEVBQUUsT0FBTyxFQUFFLEdBQUcsRUFBRSxZQUU3QyxPQUFPLEdBQ0osQ0FDUCxDQUFDO1FBQ0osQ0FBQztRQUNELE9BQU8sQ0FDTCxtQkFDRSxTQUFTLEVBQUMsZ0RBQWdELEVBQzFELElBQUksRUFBRSxJQUFJLEVBQ1YsUUFBUSxFQUFFLFlBQVksYUFFdEIsa0JBQ0UsU0FBUyxFQUFFLEVBQUUsQ0FDWCwwSUFBMEksRUFDMUksZ0JBQWdCLENBQ2pCLFlBRUQsZ0JBQU0sU0FBUyxFQUFDLDJCQUEyQixhQUN6QyxLQUFDLFlBQVksSUFDWCxJQUFJLEVBQUUsRUFBRSxFQUNSLFNBQVMsRUFBRSxFQUFFLENBQ1gsd0RBQXdELEVBQ3hELElBQUksSUFBSSxXQUFXLENBQ3BCLEdBQ0QsRUFDRCxPQUFPLElBQ0gsR0FDQyxFQUNWLGNBQUssU0FBUyxFQUFFLGdCQUFnQixZQUFHLFFBQVEsR0FBTyxJQUMxQyxDQUNYLENBQUM7SUFDSixDQUFDO0lBRUQsc0VBQXNFO0lBQ3RFLHlFQUF5RTtJQUN6RSwrQkFBK0I7SUFDL0IsTUFBTSxVQUFVLEdBQ2QseUVBQXlFLENBQUM7SUFFNUUsSUFBSSxRQUFRLEVBQUUsQ0FBQztRQUNiLE9BQU8sQ0FDTCxrQkFBUyxTQUFTLEVBQUMsMkNBQTJDLFlBQzVELGVBQUssU0FBUyxFQUFFLEVBQUUsQ0FBQyxVQUFVLEVBQUUsZ0JBQWdCLENBQUMsYUFDOUMsY0FBSyxTQUFTLEVBQUMscURBQXFELFlBQ2xFLEtBQUMsWUFBWSxJQUNYLElBQUksRUFBRSxFQUFFLEVBQ1IsU0FBUyxFQUFDLDZEQUE2RCxHQUN2RSxHQUNFLEVBQ04sZUFBTSxTQUFTLEVBQUMsZ0JBQWdCLFlBQUUsT0FBTyxHQUFRLEVBQ2pELGNBQUssU0FBUyxFQUFDLGVBQWUsWUFBRSxRQUFRLEdBQU8sSUFDM0MsR0FDRSxDQUNYLENBQUM7SUFDSixDQUFDO0lBRUQsSUFBSSxRQUFRLEVBQUUsQ0FBQztRQUNiLE9BQU8sQ0FDTCxrQkFBUyxTQUFTLEVBQUMsMkNBQTJDLFlBQzVELGNBQ0UsU0FBUyxFQUFFLEVBQUUsQ0FBQyxVQUFVLEVBQUUsZ0JBQWdCLENBQUMsRUFDM0MsS0FBSyxFQUFFLEVBQUUsS0FBSyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sRUFBRSxhQUFhLEVBQUUsWUFFN0QsZUFBTSxTQUFTLEVBQUMsZ0JBQWdCLFlBQUUsT0FBTyxHQUFRLEdBQzdDLEdBQ0UsQ0FDWCxDQUFDO0lBQ0osQ0FBQztJQUVELE9BQU8sQ0FDTCxrQkFBUyxTQUFTLEVBQUMsMkNBQTJDLFlBQzVELG1CQUFTLFNBQVMsRUFBQyxPQUFPLEVBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsWUFBWSxhQUMzRCxtQkFDRSxTQUFTLEVBQUUsRUFBRSxDQUNYLDJHQUEyRyxFQUMzRyxVQUFVLEVBQ1YsZ0JBQWdCLENBQ2pCLGFBRUQsZUFBSyxTQUFTLEVBQUMsd0ZBQXdGLGFBQ3JHLEtBQUMsWUFBWSxJQUNYLElBQUksRUFBRSxFQUFFLEVBQ1IsU0FBUyxFQUFDLDhGQUE4RixHQUN4RyxFQUNGLEtBQUMsV0FBVyxJQUNWLElBQUksRUFBRSxFQUFFLEVBQ1IsU0FBUyxFQUFDLDhGQUE4RixHQUN4RyxJQUNFLEVBQ04sZUFBTSxTQUFTLEVBQUMsZ0JBQWdCLFlBQUUsT0FBTyxHQUFRLElBQ3pDLEVBQ1YsY0FBSyxTQUFTLEVBQUUsRUFBRSxDQUFDLE1BQU0sRUFBRSxnQkFBZ0IsQ0FBQyxZQUFHLFFBQVEsR0FBTyxJQUN0RCxHQUNGLENBQ1gsQ0FBQztBQUNKLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGV2cm9uRG93biwgQ2hldnJvblJpZ2h0IH0gZnJvbSAnbHVjaWRlLXJlYWN0JztcbmltcG9ydCB7IHR5cGUgUmVhY3ROb2RlLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNuIH0gZnJvbSAnLi4vLi4vbGliL2NuJztcblxuZXhwb3J0IGZ1bmN0aW9uIERldGFpbENhcmQoe1xuICBzdW1tYXJ5LFxuICBjaGlsZHJlbixcbiAgb25Ub2dnbGUsXG4gIGRpc2FibGVkID0gZmFsc2UsXG4gIGRlZmF1bHRPcGVuID0gZmFsc2UsXG4gIHZhcmlhbnQgPSAnc2VjdGlvbicsXG4gIHRyYWlsaW5nLFxuICBzdW1tYXJ5Q2xhc3NOYW1lLFxuICBjb250ZW50Q2xhc3NOYW1lLFxufToge1xuICBzdW1tYXJ5OiBSZWFjdE5vZGU7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xuICBvblRvZ2dsZT86IChvcGVuOiBib29sZWFuKSA9PiB2b2lkO1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIGRlZmF1bHRPcGVuPzogYm9vbGVhbjtcbiAgdmFyaWFudD86ICdzZWN0aW9uJyB8ICdjYXJkJztcbiAgdHJhaWxpbmc/OiBSZWFjdE5vZGU7XG4gIHN1bW1hcnlDbGFzc05hbWU/OiBzdHJpbmc7XG4gIGNvbnRlbnRDbGFzc05hbWU/OiBzdHJpbmc7XG59KSB7XG4gIGNvbnN0IFtvcGVuLCBzZXRPcGVuXSA9IHVzZVN0YXRlKGRlZmF1bHRPcGVuKTtcblxuICBjb25zdCBoYW5kbGVUb2dnbGUgPSAoZTogUmVhY3QuU3ludGhldGljRXZlbnQ8SFRNTERldGFpbHNFbGVtZW50PikgPT4ge1xuICAgIC8vIFJlYWN0IHN1cmZhY2VzIGB0b2dnbGVgIGFzIGEgYnViYmxpbmcgc3ludGhldGljIGV2ZW50IGV2ZW4gdGhvdWdoIHRoZVxuICAgIC8vIG5hdGl2ZSBldmVudCBkb2Vzbid0IGJ1YmJsZS4gV2l0aG91dCB0aGlzIGd1YXJkLCBhIG5lc3RlZCA8ZGV0YWlscz5cbiAgICAvLyAoZS5nLiBhbiBldmVudCBjYXJkIGluc2lkZSB0aGUgRXZlbnRzIHNlY3Rpb24pIGNvbGxhcHNpbmcgd291bGQgZmxpcFxuICAgIC8vIHRoZSBvdXRlciBEZXRhaWxDYXJkJ3Mgc3RhdGUuIE9ubHkgcmVhY3QgdG8gZGlyZWN0IHRvZ2dsZXMuXG4gICAgaWYgKGUudGFyZ2V0ICE9PSBlLmN1cnJlbnRUYXJnZXQpIHJldHVybjtcbiAgICBjb25zdCBuZXh0ID0gZS5jdXJyZW50VGFyZ2V0Lm9wZW47XG4gICAgc2V0T3BlbihuZXh0KTtcbiAgICBvblRvZ2dsZT8uKG5leHQpO1xuICB9O1xuXG4gIGlmICh2YXJpYW50ID09PSAnY2FyZCcpIHtcbiAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzc05hbWU9e2NuKFxuICAgICAgICAgICAgJ2xpc3Qtbm9uZSBweC0zIHB5LTQgYmctYmFja2dyb3VuZC0yMDAgWyY6Oi13ZWJraXQtZGV0YWlscy1tYXJrZXJdOmhpZGRlbicsXG4gICAgICAgICAgICBzdW1tYXJ5Q2xhc3NOYW1lXG4gICAgICAgICAgKX1cbiAgICAgICAgICBzdHlsZT17eyBjdXJzb3I6ICdub3QtYWxsb3dlZCcsIG9wYWNpdHk6IDAuOCB9fVxuICAgICAgICA+XG4gICAgICAgICAge3N1bW1hcnl9XG4gICAgICAgIDwvZGl2PlxuICAgICAgKTtcbiAgICB9XG4gICAgcmV0dXJuIChcbiAgICAgIDxkZXRhaWxzXG4gICAgICAgIGNsYXNzTmFtZT1cImdyb3VwL2NhcmQgbGFzdDpib3JkZXItYiBib3JkZXItZ3JheS1hbHBoYS00MDBcIlxuICAgICAgICBvcGVuPXtvcGVufVxuICAgICAgICBvblRvZ2dsZT17aGFuZGxlVG9nZ2xlfVxuICAgICAgPlxuICAgICAgICA8c3VtbWFyeVxuICAgICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgICAnbGlzdC1ub25lIGN1cnNvci1wb2ludGVyIHB4LTMgcHktNCBib3JkZXItdCBib3JkZXItZ3JheS1hbHBoYS00MDAgYmctYmFja2dyb3VuZC0yMDAgaG92ZXI6YmctZ3JheS0xMDAgWyY6Oi13ZWJraXQtZGV0YWlscy1tYXJrZXJdOmhpZGRlbicsXG4gICAgICAgICAgICBzdW1tYXJ5Q2xhc3NOYW1lXG4gICAgICAgICAgKX1cbiAgICAgICAgPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cImZsZXggaXRlbXMtY2VudGVyIGdhcC0xLjVcIj5cbiAgICAgICAgICAgIDxDaGV2cm9uUmlnaHRcbiAgICAgICAgICAgICAgc2l6ZT17MTR9XG4gICAgICAgICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgICAgICAgJ3Nocmluay0wIHRleHQtZ3JheS03MDAgZ3JvdXAtaG92ZXIvY2FyZDp0ZXh0LWdyYXktMTAwMCcsXG4gICAgICAgICAgICAgICAgb3BlbiAmJiAncm90YXRlLTkwJ1xuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIHtzdW1tYXJ5fVxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPC9zdW1tYXJ5PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT17Y29udGVudENsYXNzTmFtZX0+e2NoaWxkcmVufTwvZGl2PlxuICAgICAgPC9kZXRhaWxzPlxuICAgICk7XG4gIH1cblxuICAvLyBTaGFyZWQgaGVpZ2h0IHdpdGggdGhlIGV4cGFuZGFibGUgc3VtbWFyeSByb3cuIEtlZXBzIHRoZSB0cmFpbGluZyAvXG4gIC8vIGRpc2FibGVkIC8gY2hldnJvbiB2YXJpYW50cyB2aXN1YWxseSBpZGVudGljYWwgaW4gaGVpZ2h0IHJlZ2FyZGxlc3Mgb2ZcbiAgLy8gd2hhdCdzIGluIHRoZSB0cmFpbGluZyBzbG90LlxuICBjb25zdCByb3dDbGFzc2VzID1cbiAgICAnZmxleCBoLTkgaXRlbXMtY2VudGVyIGdhcC0yIHB4LTIgLW14LTIgdGV4dC1oZWFkaW5nLTE0IGZvbnQtbWVkaXVtIG15LTInO1xuXG4gIGlmICh0cmFpbGluZykge1xuICAgIHJldHVybiAoXG4gICAgICA8c2VjdGlvbiBjbGFzc05hbWU9XCItbXgtNCBib3JkZXItdCBweC00IGJvcmRlci1ncmF5LWFscGhhLTQwMFwiPlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT17Y24ocm93Q2xhc3Nlcywgc3VtbWFyeUNsYXNzTmFtZSl9PlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiaXNvbGF0ZSByZWxhdGl2ZSBzaHJpbmstMCB3LTMuNSBoLTMuNSB0ZXh0LWdyYXktNzAwXCI+XG4gICAgICAgICAgICA8Q2hldnJvblJpZ2h0XG4gICAgICAgICAgICAgIHNpemU9ezE0fVxuICAgICAgICAgICAgICBjbGFzc05hbWU9XCJhYnNvbHV0ZSB0b3AtMS8yIGxlZnQtMS8yIC10cmFuc2xhdGUteC0xLzIgLXRyYW5zbGF0ZS15LTEvMlwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cIm1pbi13LTAgZmxleC0xXCI+e3N1bW1hcnl9PC9zcGFuPlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwic2hyaW5rLTAgcHItMVwiPnt0cmFpbGluZ308L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L3NlY3Rpb24+XG4gICAgKTtcbiAgfVxuXG4gIGlmIChkaXNhYmxlZCkge1xuICAgIHJldHVybiAoXG4gICAgICA8c2VjdGlvbiBjbGFzc05hbWU9XCItbXgtNCBib3JkZXItdCBweC00IGJvcmRlci1ncmF5LWFscGhhLTQwMFwiPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3NOYW1lPXtjbihyb3dDbGFzc2VzLCBzdW1tYXJ5Q2xhc3NOYW1lKX1cbiAgICAgICAgICBzdHlsZT17eyBjb2xvcjogJ3ZhcigtLWRzLWdyYXktNzAwKScsIGN1cnNvcjogJ25vdC1hbGxvd2VkJyB9fVxuICAgICAgICA+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwibWluLXctMCBmbGV4LTFcIj57c3VtbWFyeX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9zZWN0aW9uPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxzZWN0aW9uIGNsYXNzTmFtZT1cIi1teC00IGJvcmRlci10IHB4LTQgYm9yZGVyLWdyYXktYWxwaGEtNDAwXCI+XG4gICAgICA8ZGV0YWlscyBjbGFzc05hbWU9XCJncm91cFwiIG9wZW49e29wZW59IG9uVG9nZ2xlPXtoYW5kbGVUb2dnbGV9PlxuICAgICAgICA8c3VtbWFyeVxuICAgICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgICAnZ3JvdXAvdHJpZ2dlciBsaXN0LW5vbmUgY3Vyc29yLXBvaW50ZXIgcm91bmRlZCBob3ZlcjpiZy1ncmF5LWFscGhhLTEwMCBbJjo6LXdlYmtpdC1kZXRhaWxzLW1hcmtlcl06aGlkZGVuJyxcbiAgICAgICAgICAgIHJvd0NsYXNzZXMsXG4gICAgICAgICAgICBzdW1tYXJ5Q2xhc3NOYW1lXG4gICAgICAgICAgKX1cbiAgICAgICAgPlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiaXNvbGF0ZSByZWxhdGl2ZSBzaHJpbmstMCB0ZXh0LWdyYXktNzAwIGdyb3VwLWhvdmVyL3RyaWdnZXI6dGV4dC1ncmF5LTEwMDAgdy0zLjUgaC0zLjVcIj5cbiAgICAgICAgICAgIDxDaGV2cm9uUmlnaHRcbiAgICAgICAgICAgICAgc2l6ZT17MTR9XG4gICAgICAgICAgICAgIGNsYXNzTmFtZT1cImFic29sdXRlIHRvcC0xLzIgbGVmdC0xLzIgLXRyYW5zbGF0ZS14LTEvMiAtdHJhbnNsYXRlLXktMS8yIG9wYWNpdHktMTAwIGdyb3VwLW9wZW46b3BhY2l0eS0wXCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgICA8Q2hldnJvbkRvd25cbiAgICAgICAgICAgICAgc2l6ZT17MTR9XG4gICAgICAgICAgICAgIGNsYXNzTmFtZT1cImFic29sdXRlIHRvcC0xLzIgbGVmdC0xLzIgLXRyYW5zbGF0ZS14LTEvMiAtdHJhbnNsYXRlLXktMS8yIG9wYWNpdHktMCBncm91cC1vcGVuOm9wYWNpdHktMTAwXCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwibWluLXctMCBmbGV4LTFcIj57c3VtbWFyeX08L3NwYW4+XG4gICAgICAgIDwvc3VtbWFyeT5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2NuKCdtYi0zJywgY29udGVudENsYXNzTmFtZSl9PntjaGlsZHJlbn08L2Rpdj5cbiAgICAgIDwvZGV0YWlscz5cbiAgICA8L3NlY3Rpb24+XG4gICk7XG59XG4iXX0=

package/src/components/sidebar/detail-card.tsx

@@ -1,143 +0,0 @@
-import { ChevronDown, ChevronRight } from 'lucide-react';
-import { type ReactNode, useState } from 'react';
-import { cn } from '../../lib/cn';
-
-export function DetailCard({
-  summary,
-  children,
-  onToggle,
-  disabled = false,
-  defaultOpen = false,
-  variant = 'section',
-  trailing,
-  summaryClassName,
-  contentClassName,
-}: {
-  summary: ReactNode;
-  children?: ReactNode;
-  onToggle?: (open: boolean) => void;
-  disabled?: boolean;
-  defaultOpen?: boolean;
-  variant?: 'section' | 'card';
-  trailing?: ReactNode;
-  summaryClassName?: string;
-  contentClassName?: string;
-}) {
-  const [open, setOpen] = useState(defaultOpen);
-
-  const handleToggle = (e: React.SyntheticEvent<HTMLDetailsElement>) => {
-    // React surfaces `toggle` as a bubbling synthetic event even though the
-    // native event doesn't bubble. Without this guard, a nested <details>
-    // (e.g. an event card inside the Events section) collapsing would flip
-    // the outer DetailCard's state. Only react to direct toggles.
-    if (e.target !== e.currentTarget) return;
-    const next = e.currentTarget.open;
-    setOpen(next);
-    onToggle?.(next);
-  };
-
-  if (variant === 'card') {
-    if (disabled) {
-      return (
-        <div
-          className={cn(
-            'list-none px-3 py-4 bg-background-200 [&::-webkit-details-marker]:hidden',
-            summaryClassName
-          )}
-          style={{ cursor: 'not-allowed', opacity: 0.8 }}
-        >
-          {summary}
-        </div>
-      );
-    }
-    return (
-      <details
-        className="group/card last:border-b border-gray-alpha-400"
-        open={open}
-        onToggle={handleToggle}
-      >
-        <summary
-          className={cn(
-            'list-none cursor-pointer px-3 py-4 border-t border-gray-alpha-400 bg-background-200 hover:bg-gray-100 [&::-webkit-details-marker]:hidden',
-            summaryClassName
-          )}
-        >
-          <span className="flex items-center gap-1.5">
-            <ChevronRight
-              size={14}
-              className={cn(
-                'shrink-0 text-gray-700 group-hover/card:text-gray-1000',
-                open && 'rotate-90'
-              )}
-            />
-            {summary}
-          </span>
-        </summary>
-        <div className={contentClassName}>{children}</div>
-      </details>
-    );
-  }
-
-  // Shared height with the expandable summary row. Keeps the trailing /
-  // disabled / chevron variants visually identical in height regardless of
-  // what's in the trailing slot.
-  const rowClasses =
-    'flex h-9 items-center gap-2 px-2 -mx-2 text-heading-14 font-medium my-2';
-
-  if (trailing) {
-    return (
-      <section className="-mx-4 border-t px-4 border-gray-alpha-400">
-        <div className={cn(rowClasses, summaryClassName)}>
-          <div className="isolate relative shrink-0 w-3.5 h-3.5 text-gray-700">
-            <ChevronRight
-              size={14}
-              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-            />
-          </div>
-          <span className="min-w-0 flex-1">{summary}</span>
-          <div className="shrink-0 pr-1">{trailing}</div>
-        </div>
-      </section>
-    );
-  }
-
-  if (disabled) {
-    return (
-      <section className="-mx-4 border-t px-4 border-gray-alpha-400">
-        <div
-          className={cn(rowClasses, summaryClassName)}
-          style={{ color: 'var(--ds-gray-700)', cursor: 'not-allowed' }}
-        >
-          <span className="min-w-0 flex-1">{summary}</span>
-        </div>
-      </section>
-    );
-  }
-
-  return (
-    <section className="-mx-4 border-t px-4 border-gray-alpha-400">
-      <details className="group" open={open} onToggle={handleToggle}>
-        <summary
-          className={cn(
-            'group/trigger list-none cursor-pointer rounded hover:bg-gray-alpha-100 [&::-webkit-details-marker]:hidden',
-            rowClasses,
-            summaryClassName
-          )}
-        >
-          <div className="isolate relative shrink-0 text-gray-700 group-hover/trigger:text-gray-1000 w-3.5 h-3.5">
-            <ChevronRight
-              size={14}
-              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-100 group-open:opacity-0"
-            />
-            <ChevronDown
-              size={14}
-              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 group-open:opacity-100"
-            />
-          </div>
-          <span className="min-w-0 flex-1">{summary}</span>
-        </summary>
-        <div className={cn('mb-3', contentClassName)}>{children}</div>
-      </details>
-    </section>
-  );
-}