remove typecasting from Field components

Author: dcastil

packages/components/index.d.ts

@@ -208,7 +208,7 @@ export type FieldProps<T extends React.ElementType> = FieldOwnProps &
 // `T` is far from unnecessary. We derive component props from it.
 // tslint:disable-next-line no-unnecessary-generics
 export function Field<
-  T extends React.ElementType = React.ElementType<InputProps>
+  T extends React.ElementType = React.ComponentType<InputProps>
 >(props: FieldProps<T>): JSX.Element
 
 export interface ProgressProps

packages/editor/src/Sx/Space.tsx

@@ -87,7 +87,7 @@ export const Space = ({
         gridTemplateColumns: 'repeat(3, 1fr)',
         alignItems: 'center',
       }}>
-      <Field<'input'>
+      <Field
         type="number"
         name={prefixName('l')}
         label={label('Left')}
@@ -99,7 +99,7 @@ export const Space = ({
           display: 'grid',
           gap: 2,
         }}>
-        <Field<'input'>
+        <Field
           type="number"
           name={prefixName('t')}
           label={label('Top')}
@@ -116,15 +116,15 @@ export const Space = ({
             Lock y-axis
           </Label>
         </div>
-        <Field<'input'>
+        <Field
           type="number"
           name={prefixName('b')}
           label={label('Bottom')}
           value={b}
           onChange={handleChange('b')}
         />
       </div>
-      <Field<'input'>
+      <Field
         type="number"
         name={prefixName('r')}
         label={label('Right')}

packages/editor/src/Sx/Typography.tsx

@@ -51,7 +51,7 @@ export const SxTypography = ({
           gap: 2,
           gridTemplateColumns: 'repeat(3, 1fr)',
         }}>
-        <Field<'input'>
+        <Field
           name={prefixName('fontSize')}
           label="Font Size"
           value={fontSize || ''}

packages/editor/src/Theme/FontSizes.tsx

@@ -28,9 +28,9 @@ const FontSizes = () => {
 
   return (
     <Fragment>
-      {Object.keys(fontSizes).map(key => (
+      {Object.keys(fontSizes).map((key) => (
         <div key={key}>
-          <Field<'input'>
+          <Field
             type="number"
             label={key}
             name={'fontSizes.' + key}

packages/editor/src/Theme/LineHeights.tsx

@@ -23,7 +23,7 @@ const LineHeights = () => {
     <Fragment>
       {Object.keys(lineHeights).map((key) => (
         <div key={key}>
-          <Field<'input'>
+          <Field
             type="number"
             label={key}
             name={'lineHeights.' + key}

packages/editor/src/Theme/Space.tsx

@@ -30,9 +30,9 @@ const Space = () => {
 
   return (
     <Fragment>
-      {Object.keys(space).map(key => (
+      {Object.keys(space).map((key) => (
         <div key={key}>
-          <Field<'input'>
+          <Field
             type="number"
             label={key}
             name={'space.' + key}