//
// Copyright 2024 DXOS.org
//
import React from 'react';
import { Icon } from '@dxos/react-ui';
import { mx } from '@dxos/ui-theme';
export const Panel = ({ children, className, id, icon, title, info, padding = true, maxHeight = 240, open = true, onToggle, }) => {
    return (React.createElement("div", { className: 'flex flex-col overflow-hidden' },
        React.createElement("div", { className: 'flex items-center justify-between pli-2 text-sm text-fine cursor-pointer', onClick: () => onToggle?.(id, !open) },
            React.createElement("div", { className: 'flex items-center gap-2 plb-1' },
                React.createElement(Icon, { icon: icon }),
                React.createElement("span", { className: 'truncate' }, title)),
            info),
        children && (React.createElement("div", { style: { maxHeight: open ? (maxHeight ? `${maxHeight}px` : undefined) : 0 }, className: mx('flex flex-col is-full transition-all duration-200 ease-in-out', maxHeight ? 'overflow-y-auto' : 'bs-full overflow-hidden', padding && 'pli-2', className) }, children))));
};
//# sourceMappingURL=Panel.js.map