import type { ReactNode } from "react";
/**
 * 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 declare function SettingsPanelLayout({ children, className, contentClassName, testId, }: {
    children: ReactNode;
    /** Extra classes for the outer scroll container. */
    className?: string;
    /** Classes for the inner content wrapper (defaults to `w-full`). */
    contentClassName?: string;
    /** data-testid applied to the scroll container. */
    testId?: string;
}): import("react").JSX.Element;
export default SettingsPanelLayout;
