/**
 * Shared building blocks for the System Settings presentation stories
 * (`Presentation/System Settings/*`). The settings page header, the max-width
 * body column and the "row" card (title + description on the left, a control on
 * the right) are defined once here and reused by the Index, General and
 * Security stories so the chrome stays identical and in one place.
 *
 * Mirrors the app: PageHeader.jsx + BackButton.js (header) and the repeated
 * `Card variant="paper-2"` row pattern from the SystemSettings pages.
 */
import React, { ReactElement, ReactNode } from "react";
export interface SettingsHeaderProps {
    title: string;
    backTitle?: string;
}
export declare const SettingsHeader: ({ title, backTitle, }: SettingsHeaderProps) => ReactElement;
/** The page body, max-width 850px and left-aligned (mirrors the app Page). */
export declare const SettingsContent: import("styled-components").StyledComponent<"div", any, {}, never>;
/** A settings row card: title + description on the left, control on the right. */
export declare const StyledSettingRow: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement> & import("../..").ICardProps, "ref"> & React.RefAttributes<HTMLDivElement>>, any, {
    $clickable?: boolean;
}, never>;
export declare const RowText: import("styled-components").StyledComponent<"div", any, {}, never>;
export interface SettingRowProps {
    title: string;
    description?: ReactNode;
    control?: ReactNode;
    onClick?: () => void;
    /** Let a long description wrap onto multiple lines instead of truncating. */
    wrapDescription?: boolean;
}
export declare const SettingRow: ({ title, description, control, onClick, wrapDescription, }: SettingRowProps) => ReactElement;
//# sourceMappingURL=settings.d.ts.map