import { jsx as _jsx } from "react/jsx-runtime";
import { cn } from "../../lib/utils";
/**
 * Generic layout chrome for settings panels.
 *
 * Extracted from the User Preferences panel: a full-height, scrollable, padded,
 * full-width container for a settings panel's content. Use this for any settings
 * panel with a simple scrolling body so they share the same padding, width, and
 * scroll behaviour.
 *
 * Inner content defaults to `w-full`; pass `contentClassName` to control the
 * inner layout (e.g. `"flex flex-col gap-4"` to stack cards, or `"grid gap-4"`).
 *
 * @example
 * <SettingsPanelLayout testId="my-panel" contentClassName="flex flex-col gap-4">
 *   <Card icon={...} title="Section" description="...">...</Card>
 *   <Card icon={...} title="Another" description="...">...</Card>
 * </SettingsPanelLayout>
 */
export function SettingsPanelLayout({ children, className, contentClassName, testId, }) {
    return (_jsx("div", { className: cn("h-full overflow-auto px-10 pt-0 pb-10", className), "data-testid": testId, children: _jsx("div", { className: cn("w-full", contentClassName), children: children }) }));
}
export default SettingsPanelLayout;
//# sourceMappingURL=SettingsPanelLayout.js.map