ref(input): Add InputStylesProps (#38345)

Export a separate interface called `InputStylesProps` from `sentry/components/input` for components that use `inputStyles`. 

This is useful for components like `<TextArea />` that only need to extend `inputStyles`'s props and not the other props in `InputProps`.

This resolves a typing issue with `<TextArea />` in which the `onChange` callback is weirdly typed as  `ChangeEventHandler<HTMLTextAreaElement> & ChangeEventHandler<HTMLInputElement>`.

<img width="1032" alt="Screen Shot 2022-08-31 at 11 56 04 AM" src="https://user-images.githubusercontent.com/44172267/187761558-756fa25a-4ab8-4de1-9fcf-96176cedc2e7.png">

static/app/components/forms/controls/textarea.tsx

@@ -3,11 +3,11 @@ import TextareaAutosize from 'react-autosize-textarea';
 import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 
-import {InputProps, inputStyles} from 'sentry/components/input';
+import {inputStyles, InputStylesProps} from 'sentry/components/input';
 
 export interface TextAreaProps
   extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'css'>,
-    Omit<InputProps, keyof React.InputHTMLAttributes<HTMLInputElement>> {
+    InputStylesProps {
   /**
    * Enable autosizing of the textarea.
    */
@@ -23,7 +23,7 @@ export interface TextAreaProps
 }
 
 const TextAreaControl = forwardRef(function TextAreaControl(
-  {autosize, rows, maxRows, ...p}: TextAreaProps,
+  {autosize, rows, maxRows, size: _size, ...p}: TextAreaProps,
   ref: React.Ref<HTMLTextAreaElement>
 ) {
   return autosize ? (

static/app/components/input.tsx

@@ -5,15 +5,15 @@ import styled from '@emotion/styled';
 
 import {FormSize, Theme} from 'sentry/utils/theme';
 
-export interface InputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+export interface InputStylesProps {
   monospace?: boolean;
   nativeSize?: React.InputHTMLAttributes<HTMLInputElement>['size'];
+  readOnly?: React.InputHTMLAttributes<HTMLInputElement>['readOnly'];
   size?: FormSize;
   type?: React.HTMLInputTypeAttribute;
 }
 
-export const inputStyles = (p: InputProps & {theme: Theme}) => css`
+export const inputStyles = (p: InputStylesProps & {theme: Theme}) => css`
   display: block;
   width: 100%;
   color: ${p.theme.formText};
@@ -53,6 +53,10 @@ export const inputStyles = (p: InputProps & {theme: Theme}) => css`
   }
 `;
 
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'readOnly'>,
+    InputStylesProps {}
+
 /**
  * Basic input component.
  *