/*
 * The form primitives the settings screens share. Members, SSO and the page
 * itself had three byte-identical copies of both of these before they were
 * folded onto one page; one copy is what stops them drifting apart now that
 * they sit next to each other.
 */

export const inputClass =
    "w-full rounded border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary focus:border-accent/50 focus:outline-none focus:ring-1 focus:ring-accent/30";

export function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
    return (
        <div>
            <label className="mb-1.5 block text-sm font-medium text-text-secondary">{label}</label>
            {children}
            {hint && <p className="mt-1 text-xs text-text-tertiary">{hint}</p>}
        </div>
    );
}
