Repository: laboratoriobridge/bold
Pull request #430 (2019-07-10 18:08:10)

Remove final form


Patch:
diff --git a/package.json b/package.json
index b7f838d64..57ccc073e 100644
--- a/package.json
+++ b/package.json
@@ -45,16 +45,12 @@
   },
   "peerDependencies": {
     "emotion": "^10.0.9",
-    "final-form": "^4.13.1",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "react-final-form": "^6.0.1"
+    "react-dom": ">=16.8.0"
   },
   "dependencies": {
     "@emotion/core": "10.0.10",
     "downshift": "3.2.10",
-    "final-form-focus": "1.1.2",
-    "final-form-set-field-data": "1.0.2",
     "focus-trap-react": "6.0.0",
     "hoist-non-react-statics": "3.3.0",
     "match-sorter": "3.1.1",
@@ -105,7 +101,6 @@
     "copyfiles": "2.1.0",
     "emotion": "10.0.9",
     "file-loader": "4.0.0",
-    "final-form": "4.15.0",
     "gh-pages": "2.0.1",
     "highlight.js": "9.15.8",
     "husky": "2.4.1",
@@ -122,7 +117,6 @@
     "react": "16.8.6",
     "react-docgen-typescript-loader": "3.1.0",
     "react-dom": "16.8.6",
-    "react-final-form": "6.2.1",
     "react-ga": "2.5.7",
     "react-test-renderer": "16.8.6",
     "remark-highlight.js": "5.1.1",
diff --git a/site/pages/components/form/Form.demo.tsx b/site/pages/components/form/Form.demo.tsx
index b6a63ce64..969c44bca 100644
--- a/site/pages/components/form/Form.demo.tsx
+++ b/site/pages/components/form/Form.demo.tsx
@@ -1,63 +1,95 @@
-import { FormRenderProps } from 'react-final-form'
+import { useState } from 'react'
 
-import { Button, Cell, CheckboxField, Form, FormControl, Grid, HFlow, RadioField, TextField } from '../../../../lib'
+import { Button, Cell, Checkbox, FormControl, Grid, HFlow, Radio, TextInput } from '../../../../lib'
 
 function FormDemo() {
-  const renderForm = (formProps: FormRenderProps) => {
-    return (
-      <form onSubmit={formProps.handleSubmit}>
+  const [formState, setFormState] = useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    color: '',
+    agreed: false,
+  })
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    alert(JSON.stringify(formState, null, 2))
+  }
+
+  const handleChange = (name: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    const el = e.target
+
+    setFormState(state => ({
+      ...state,
+      [name]: el.type === 'checkbox' ? el.checked : el.value,
+    }))
+  }
+
+  return (
+    <>
+      <form onSubmit={handleSubmit}>
         <Grid wrap>
           <Cell xs={6}>
-            <TextField label='First name' name='firstName' required />
+            <FormControl label='First name'>
+              <TextInput
+                name='firstName'
+                placeholder='Enter your first name'
+                value={formState.firstName}
+                onChange={handleChange('firstName')}
+                required
+              />
+            </FormControl>
           </Cell>
           <Cell xs={6}>
-            <TextField label='Last name' name='lastName' required />
+            <FormControl label='Last name'>
+              <TextInput
+                name='lastName'
+                placeholder='Enter your last name'
+                value={formState.lastName}
+                onChange={handleChange('lastName')}
+                required
+              />
+            </FormControl>
           </Cell>
           <Cell xs={6}>
-            <TextField name='email' label='E-mail' type='email' />
+            <FormControl label='E-mail'>
+              <TextInput
+                name='email'
+                type='email'
+                placeholder='Enter your e-mail'
+                value={formState.email}
+                onChange={handleChange('email')}
+              />
+            </FormControl>
           </Cell>
           <Cell xs={6}>
             <FormControl label='Favorite color'>
               <HFlow>
-                <RadioField name='color' value='red' label='Red' />
-                <RadioField name='color' value='green' label='Green' />
-                <RadioField name='color' value='blue' label='Blue' />
+                <Radio name='color' value='red' label='Red' onChange={handleChange('color')} />
+                <Radio name='color' value='green' label='Green' onChange={handleChange('color')} />
+                <Radio name='color' value='blue' label='Blue' onChange={handleChange('color')} />
               </HFlow>
             </FormControl>
           </Cell>
           <Cell xs={12}>
-            <CheckboxField name='agreed' label='I agree to the terms of use' />
+            <Checkbox name='agreed' label='I agree to the terms of use' onChange={handleChange('agreed')} />
           </Cell>
           <Cell xs={12}>
             <HFlow justifyContent='flex-end'>
-              <Button type='reset' skin='outline' onClick={formProps.reset}>
+              <Button type='reset' skin='outline'>
                 Reset
               </Button>
-              <Button type='submit' kind='primary' onClick={formProps.handleSubmit}>
+              <Button type='submit' kind='primary'>
                 Submit
               </Button>
             </HFlow>
           </Cell>
         </Grid>
       </form>
-    )
-  }
-
-  return <Form render={renderForm} onSubmit={console.log} validate={validate} />
-}
-
-const validate = (values: any) => {
-  const errors: any = {}
-
-  if (!values.firstName) {
-    errors.firstName = 'First name is required'
-  }
-
-  if (!values.lastName) {
-    errors.lastName = 'Last name is required'
-  }
 
-  return errors
+      <pre>{JSON.stringify(formState, null, 2)}</pre>
+    </>
+  )
 }
 
 export default FormDemo
diff --git a/site/pages/components/form/index.mdx b/site/pages/components/form/index.mdx
index 731d503bc..61ed4a1f9 100644
--- a/site/pages/components/form/index.mdx
+++ b/site/pages/components/form/index.mdx
@@ -12,6 +12,16 @@ Forms are used for submitting data. Every input must be displayed with a label.
 - Use mask input that helps the user identify the input pattern.
 - Required fields must be marked with a red asterisk after the label.
 
-### Form
+## Example
+
+The following example don't use any lib to manage the form state. In practice, you may (bot not need to) use a third party library to manage form state, like [`react-use-form-state`](https://github.com/wsmd/react-use-form-state), [`react-final-form`](https://github.com/final-form/react-final-form), [`formik`](https://github.com/jaredpalmer/formik) etc.
 
 <Demo src='pages/components/form/Form' />
+
+<!-- ## Example with [`react-use-form-state`](https://github.com/wsmd/react-use-form-state)
+
+[![Edit bold-form-example-use-form-state](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/bold-form-example-use-form-state-s0ptf?fontsize=14&module=%2Fsrc%2FForm.tsx)
+
+## Example with [`react-final-form`](https://github.com/final-form/react-final-form)
+
+[![Edit bold-form-example-final-form](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/bold-form-example-final-form-8pzzd?fontsize=14&module=%2Fsrc%2FForm.tsx) -->
diff --git a/site/pages/components/text-input/TextArea.demo.tsx b/site/pages/components/text-input/TextArea.demo.tsx
index 4602e1ab3..b864f63e8 100644
--- a/site/pages/components/text-input/TextArea.demo.tsx
+++ b/site/pages/components/text-input/TextArea.demo.tsx
@@ -1,20 +1,20 @@
-import { Cell, Form, Grid, TextAreaField } from '../../../../lib'
+import { Cell, FormControl, Grid, TextArea } from '../../../../lib'
 
-function TextArea() {
-  const renderForm = () => {
-    return (
-      <Grid>
-        <Cell size={6}>
-          <TextAreaField name='empty' label='Name' placeholder='Ex: Hercílio Luz' required />
-        </Cell>
-        <Cell size={6}>
-          <TextAreaField name='disabled' label='Email' disabled />
-        </Cell>
-      </Grid>
-    )
-  }
-
-  return <Form render={renderForm} />
+function TextAreaDemo() {
+  return (
+    <Grid>
+      <Cell size={6}>
+        <FormControl label='Post body' required>
+          <TextArea name='empty' placeholder='Enter the body of your post' required />
+        </FormControl>
+      </Cell>
+      <Cell size={6}>
+        <FormControl label='Comment'>
+          <TextArea name='disabled' disabled />
+        </FormControl>
+      </Cell>
+    </Grid>
+  )
 }
 
-export default TextArea
+export default TextAreaDemo
diff --git a/site/pages/components/text-input/TextInput.demo.tsx b/site/pages/components/text-input/TextInput.demo.tsx
index e11e414ee..73bf1bc09 100644
--- a/site/pages/components/text-input/TextInput.demo.tsx
+++ b/site/pages/components/text-input/TextInput.demo.tsx
@@ -1,28 +1,25 @@
-import { Cell, Form, Grid, HFlow, TextField } from '../../../../lib'
+import { Cell, FormControl, Grid, TextInput } from '../../../../lib'
 
-function TextInput() {
-  const renderForm = () => {
-    return (
-      <Grid>
-        <Cell size={6}>
-          <TextField
-            name='empty'
-            label='Name'
-            placeholder='Ex: Daenerys Stormborn of the House Targaryen First of Her Name'
-            required
-          />
-        </Cell>
-        <Cell size={3}>
-          <TextField name='disabled' label='Email' disabled />
-        </Cell>
-        <Cell size={3}>
-          <TextField name='password' label='Password' type='password' required />
-        </Cell>
-      </Grid>
-    )
-  }
-
-  return <Form render={renderForm} />
+function TextInputDemo() {
+  return (
+    <Grid>
+      <Cell size={6}>
+        <FormControl label='Name'>
+          <TextInput name='empty' placeholder='Ex: Daenerys Stormborn of the House Targaryen First of Her Name' />
+        </FormControl>
+      </Cell>
+      <Cell size={3}>
+        <FormControl label='Email' required>
+          <TextInput name='disabled' disabled />
+        </FormControl>
+      </Cell>
+      <Cell size={3}>
+        <FormControl label='Password' required>
+          <TextInput name='password' type='password' required />
+        </FormControl>
+      </Cell>
+    </Grid>
+  )
 }
 
-export default TextInput
+export default TextInputDemo
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
new file mode 100644
index 000000000..1b715771a
--- /dev/null
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -0,0 +1,16 @@
+import { action } from '@storybook/addon-actions'
+import { boolean, text } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+
+import { Checkbox } from './Checkbox'
+
+storiesOf('Components|Checkbox', module).add('default', () => (
+  <Checkbox
+    name='check'
+    label={text('label', 'Component label')}
+    disabled={boolean('disabled', false)}
+    indeterminate={boolean('indeterminate', false)}
+    onChange={action('changed')}
+  />
+))
diff --git a/src/components/DateInput/DateInput.stories.tsx b/src/components/DateInput/DateInput.stories.tsx
new file mode 100644
index 000000000..caee45015
--- /dev/null
+++ b/src/components/DateInput/DateInput.stories.tsx
@@ -0,0 +1,33 @@
+import { action } from '@storybook/addon-actions'
+import { boolean } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+
+import { DateInput } from './DateInput'
+import { DatePickerInput } from './DatePickerInput'
+
+const todayMinus10 = new Date(new Date().setDate(new Date().getDate() - 10))
+
+storiesOf('Components|DateInput', module).add('default', () => (
+  <DateInput name='date' value={new Date()} onChange={action('changed')} disabled={boolean('disabled', false)} />
+))
+
+storiesOf('Components|DatePickerInput', module)
+  .add('default', () => (
+    <DatePickerInput
+      name='date'
+      value={new Date()}
+      onChange={action('changed')}
+      disabled={boolean('disabled', false)}
+    />
+  ))
+  .add('min/max date', () => (
+    <DatePickerInput
+      name='date'
+      disabled={boolean('disabled', false)}
+      onChange={action('changed')}
+      minDate={todayMinus10}
+      maxDate={new Date()}
+      required
+    />
+  ))
diff --git a/src/components/MaskedInput/MaskedInput.stories.tsx b/src/components/MaskedInput/MaskedInput.stories.tsx
new file mode 100644
index 000000000..33c2753c0
--- /dev/null
+++ b/src/components/MaskedInput/MaskedInput.stories.tsx
@@ -0,0 +1,18 @@
+import { action } from '@storybook/addon-actions'
+import { boolean } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+
+import { MaskedInput } from './MaskedInput'
+
+storiesOf('Components|MaskedInput', module).add('default', () => (
+  <MaskedInput
+    mask={['(', /\d/, /\d/, /\d/, ')']}
+    placeholder='(___)'
+    name='generic'
+    disabled={boolean('disabled', false)}
+    guide={boolean('guide', true)}
+    keepCharPositions={boolean('keepCharPositions', false)}
+    onChange={action('changed')}
+  />
+))
diff --git a/src/components/MonthPicker/MonthPicker.stories.tsx b/src/components/MonthPicker/MonthPicker.stories.tsx
index 0b666163e..7ba76e3ab 100644
--- a/src/components/MonthPicker/MonthPicker.stories.tsx
+++ b/src/components/MonthPicker/MonthPicker.stories.tsx
@@ -1,9 +1,10 @@
 import { action } from '@storybook/addon-actions'
-import { number } from '@storybook/addon-knobs'
+import { boolean, number } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 
 import { MonthPicker } from './MonthPicker/MonthPicker'
+import { MonthPickerInput } from './MonthPickerInput/MonthPickerInput'
 
 storiesOf('Components|MonthPicker', module).add('default', () => (
   <MonthPicker
@@ -12,3 +13,7 @@ storiesOf('Components|MonthPicker', module).add('default', () => (
     onChange={action('changed')}
   />
 ))
+
+storiesOf('Components|MonthPickerInput', module).add('default', () => (
+  <MonthPickerInput onChange={action('changed')} disabled={boolean('disabled', false)} />
+))
diff --git a/src/components/Radio/Radio.stories.tsx b/src/components/Radio/Radio.stories.tsx
new file mode 100644
index 000000000..7b16cb125
--- /dev/null
+++ b/src/components/Radio/Radio.stories.tsx
@@ -0,0 +1,27 @@
+import { action } from '@storybook/addon-actions'
+import { boolean, text } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+
+import { HFlow } from '../Flow'
+
+import { Radio } from './Radio'
+
+storiesOf('Components|Radio', module).add('default', () => (
+  <HFlow>
+    <Radio
+      name='radio1'
+      label={text('label', 'Component label')}
+      value='1'
+      onChange={action('changed')}
+      disabled={boolean('disabled', false)}
+    />
+    <Radio
+      name='radio1'
+      label={text('label', 'Component label')}
+      value='2'
+      onChange={action('changed')}
+      disabled={boolean('disabled', false)}
+    />
+  </HFlow>
+))
diff --git a/src/form/inputs/SelectField/SelectField.stories.tsx b/src/components/Select/Selec.stories.tsx
similarity index 64%
rename from src/form/inputs/SelectField/SelectField.stories.tsx
rename to src/components/Select/Selec.stories.tsx
index 43ef04de2..cc5cac944 100644
--- a/src/form/inputs/SelectField/SelectField.stories.tsx
+++ b/src/components/Select/Selec.stories.tsx
@@ -1,20 +1,9 @@
 import { action } from '@storybook/addon-actions'
-import { boolean, text } from '@storybook/addon-knobs'
+import { boolean } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 
-import {
-  DefaultItemType,
-  defaultSelectFilter,
-  Select,
-  SelectMenu,
-  SelectMenuItem,
-  SelectMulti,
-  SelectSingle,
-} from '../../../components/Select'
-import { withForm } from '../../../stories-addons'
-
-import { SelectField } from './SelectField'
+import { DefaultItemType, defaultSelectFilter, Select, SelectMenu, SelectMenuItem } from './'
 
 const fruits: DefaultItemType[] = [
   { value: 1, label: 'Apple' },
@@ -61,16 +50,14 @@ const SelectAsyncManager = (props: SelectAsyncManagerProps) => {
 }
 
 // tslint:disable jsx-no-lambda
-storiesOf('Form|SelectField', module)
-  .addDecorator(withForm())
+storiesOf('Components|Select', module)
   .add('default', () => (
-    <SelectField<DefaultItemType>
+    <Select<DefaultItemType>
       name='fruit'
       items={fruits}
       itemToString={item => item && item.label}
       itemIsEqual={(a, b) => a.value === b.value}
       placeholder='Select a value...'
-      label={text('label', 'Favorite fruit')}
       multiple={boolean('multiple', false)}
       clearable={boolean('clearable', true)}
       disabled={boolean('disabled', false)}
@@ -80,7 +67,7 @@ storiesOf('Form|SelectField', module)
     />
   ))
   .add('custom menu item', () => (
-    <SelectField<DefaultItemType>
+    <Select<DefaultItemType>
       renderItem={item => (
         <>
           <p>
@@ -94,7 +81,6 @@ storiesOf('Form|SelectField', module)
       itemToString={item => item && item.label}
       itemIsEqual={(a, b) => a.value === b.value}
       placeholder='Select a value...'
-      label={text('label', 'Favorite fruit')}
       multiple={boolean('multiple', false)}
       clearable={boolean('clearable', true)}
       disabled={boolean('disabled', false)}
@@ -106,13 +92,12 @@ storiesOf('Form|SelectField', module)
   .add('async items', () => (
     <SelectAsyncManager>
       {({ items, loading, loadItems }) => (
-        <SelectField<DefaultItemType>
+        <Select<DefaultItemType>
           name='repository'
           items={items}
           itemToString={item => item && item.label}
           itemIsEqual={(a, b) => a.value === b.value}
           placeholder='Select a value...'
-          label={text('label', 'Favorite fruit')}
           multiple={boolean('multiple', false)}
           clearable={boolean('clearable', true)}
           disabled={boolean('disabled', false)}
@@ -124,46 +109,6 @@ storiesOf('Form|SelectField', module)
       )}
     </SelectAsyncManager>
   ))
-  .add('input', () => (
-    <Select<DefaultItemType>
-      items={fruits}
-      itemToString={item => item && item.label}
-      itemIsEqual={(a, b) => a.value === b.value}
-      placeholder='Select a value...'
-      multiple={boolean('multiple', false)}
-      clearable={boolean('clearable', true)}
-      disabled={boolean('disabled', false)}
-      loading={boolean('loading', false)}
-      onChange={action('changed')}
-      onBlur={action('blur')}
-    />
-  ))
-  .add('input (single value)', () => (
-    <SelectSingle<DefaultItemType>
-      items={fruits}
-      itemToString={item => item && item.label}
-      placeholder='Select a value...'
-      clearable={boolean('clearable', true)}
-      disabled={boolean('disabled', false)}
-      loading={boolean('loading', false)}
-      onChange={action('changed')}
-      onBlur={action('blur')}
-    />
-  ))
-  .add('input (multiple value)', () => (
-    <SelectMulti<DefaultItemType>
-      items={fruits}
-      itemToString={item => item && item.label}
-      itemIsEqual={(a, b) => a.value === b.value}
-      placeholder='Select a value...'
-      clearable={boolean('clearable', true)}
-      disabled={boolean('disabled', false)}
-      loading={boolean('loading', false)}
-      onChange={action('changed')}
-      onBlur={action('blur')}
-    />
-  ))
-
   .add('select menu', () => (
     <SelectMenu style={{ position: 'static' }}>
       <SelectMenuItem>Item 1</SelectMenuItem>
diff --git a/src/components/Switch/Switch.stories.tsx b/src/components/Switch/Switch.stories.tsx
new file mode 100644
index 000000000..61bdc7b9f
--- /dev/null
+++ b/src/components/Switch/Switch.stories.tsx
@@ -0,0 +1,15 @@
+import { action } from '@storybook/addon-actions'
+import { boolean, text } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+
+import { Switch } from './Switch'
+
+storiesOf('Components|Switch', module).add('default', () => (
+  <Switch
+    name='switch'
+    label={text('label', 'Label')}
+    disabled={boolean('disabled', false)}
+    onChange={action('changed')}
+  />
+))
diff --git a/src/components/TextArea/TextArea.stories.tsx b/src/components/TextArea/TextArea.stories.tsx
new file mode 100644
index 000000000..6b78dcfc1
--- /dev/null
+++ b/src/components/TextArea/TextArea.stories.tsx
@@ -0,0 +1,17 @@
+import { action } from '@storybook/addon-actions'
+import { boolean, number } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+
+import { TextArea } from './TextArea'
+
+storiesOf('Components|TextArea', module).add('default', () => (
+  <TextArea
+    disabled={boolean('disabled', false)}
+    name='nome'
+    placeholder='Nome'
+    maxLength={number('maxLength', '' as any)}
+    onChange={action('changed')}
+    required
+  />
+))
diff --git a/src/form/inputs/TextField/TextField.stories.tsx b/src/components/TextInput/TextInput.stories.tsx
similarity index 73%
rename from src/form/inputs/TextField/TextField.stories.tsx
rename to src/components/TextInput/TextInput.stories.tsx
index 977a3d9a1..3703096b3 100644
--- a/src/form/inputs/TextField/TextField.stories.tsx
+++ b/src/components/TextInput/TextInput.stories.tsx
@@ -3,17 +3,13 @@ import { boolean, select } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 
-import { withForm } from '../../../stories-addons'
+import { TextInput } from './TextInput'
 
-import { TextField } from './TextField'
-
-storiesOf('Form|TextField', module)
-  .addDecorator(withForm())
+storiesOf('Components|TextInput', module)
   .add('default', () => (
-    <TextField
+    <TextInput
       id='nome'
       name='nome'
-      label='Nome'
       placeholder='Nome'
       disabled={boolean('disabled', false)}
       onChange={action('changed')}
@@ -21,23 +17,23 @@ storiesOf('Form|TextField', module)
     />
   ))
   .add('password', () => (
-    <TextField
+    <TextInput
       id='password'
       name='password'
-      label='Password'
       placeholder='Type your password...'
       type='password'
-      required
+      disabled={boolean('disabled', false)}
+      onChange={action('changed')}
     />
   ))
   .add('with icon', () => (
-    <TextField
+    <TextInput
       id='iconized'
       name='iconized'
-      label='Input with icon'
       icon='zoomOutline'
       iconPosition={select('iconPosition', ['left', 'right'], 'right')}
       onIconClick={action('icon-clicked')}
       disabled={boolean('disabled', false)}
+      onChange={action('changed')}
     />
   ))
diff --git a/src/components/TimeInput/TimeInput.stories.tsx b/src/components/TimeInput/TimeInput.stories.tsx
new file mode 100644
index 000000000..54142f411
--- /dev/null
+++ b/src/components/TimeInput/TimeInput.stories.tsx
@@ -0,0 +1,16 @@
+import { action } from '@storybook/addon-actions'
+import { boolean } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+
+import { TimeInput } from './TimeInput'
+
+storiesOf('Components|TimeInput', module).add('default', () => (
+  <TimeInput
+    name='time'
+    disabled={boolean('disabled', false)}
+    guide={boolean('guide', true)}
+    keepCharPositions={boolean('keepCharPositions', false)}
+    onChange={action('changed')}
+  />
+))
diff --git a/src/form/ErrorField/ErrorField.tsx b/src/form/ErrorField/ErrorField.tsx
deleted file mode 100644
index 082b9fb16..000000000
--- a/src/form/ErrorField/ErrorField.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import { Field, FieldRenderProps } from 'react-final-form'
-
-import { FormError } from '../../components/FormControl'
-
-export interface ErrorFieldProps {
-  name: string
-  ignoreObjectError?: boolean
-}
-
-export function ErrorField(props: ErrorFieldProps) {
-  const { name, ignoreObjectError } = props
-
-  const renderField = (renderProps: FieldRenderProps<any, HTMLElement>) => {
-    const {
-      meta: { touched, error, dirtySinceLastSubmit, submitError },
-    } = renderProps
-
-    const hasError = (!!error && touched) || (!!submitError && !dirtySinceLastSubmit)
-
-    const ignore = ignoreObjectError && !(typeof error === 'string') && !(typeof submitError === 'string')
-
-    if (hasError && !ignore) {
-      return <FormError>{error || submitError}</FormError>
-    }
-
-    return null
-  }
-
-  return <Field name={name} render={renderField} />
-}
diff --git a/src/form/ErrorField/index.ts b/src/form/ErrorField/index.ts
deleted file mode 100644
index 180630184..000000000
--- a/src/form/ErrorField/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { ErrorField, ErrorFieldProps } from './ErrorField'
diff --git a/src/form/Field/Field.tsx b/src/form/Field/Field.tsx
deleted file mode 100644
index a454befac..000000000
--- a/src/form/Field/Field.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React, { useEffect } from 'react'
-import {
-  Field as FinalFormField,
-  FieldProps as FinalFieldProps,
-  FieldRenderProps as FinalRenderProps,
-  useForm,
-} from 'react-final-form'
-
-import { FormControl, FormControlProps } from '../../components/FormControl'
-import { Meta } from '../../metaPath/metaPath'
-import { Omit } from '../../util'
-
-import { getFieldError } from './util'
-
-export interface FieldRenderProps<FieldValue = any, Element extends HTMLElement = HTMLElement>
-  extends FinalRenderProps<FieldValue, Element> {
-  hasError?: boolean
-}
-
-type PickedFinalFieldProps =
-  | 'allowNull'
-  | 'format'
-  | 'formatOnBlur'
-  | 'parse'
-  | 'isEqual'
-  | 'subscription'
-  | 'validate'
-  | 'value'
-
-export interface FieldProps<FieldValue = any, Element extends HTMLElement = HTMLElement>
-  extends Omit<FormControlProps, 'name'>,
-    Pick<FinalFieldProps<FieldValue, Element>, PickedFinalFieldProps> {
-  name: string | Meta<FieldValue>
-  hasWrapper?: boolean
-  onChange?: any
-  type?: string
-  render(props: FieldRenderProps<FieldValue, Element>): React.ReactNode
-
-  /**
-   * Converts the field value to another before sending it to submit handler.
-   * @param value The field original value.
-   * @return The converted value.
-   */
-  convert?(value: any): any
-}
-
-export function Field<FieldValue = any, Element extends HTMLElement = HTMLElement>(
-  props: FieldProps<FieldValue, Element>
-) {
-  const form = useForm()
-
-  useEffect(() => {
-    if (props.convert) {
-      const setFieldData = form.mutators.setFieldData
-      if (setFieldData) {
-        setFieldData(getFieldName(), {
-          convert: props.convert,
-        })
-      } else {
-        throw new Error('Form must have a setFieldData mutator so Field can define a convert function')
-      }
-    }
-  }, [])
-
-  const getFieldName = (): string => {
-    if (typeof props.name === 'string') {
-      return props.name
-    } else {
-      return (props.name as Meta<FieldValue>).absolutePath()
-    }
-  }
-
-  const renderComponent = (fieldProps: FinalRenderProps<FieldValue, Element> & { custom: any }) => {
-    const customOnChange = value => {
-      // External onChange prop is killed by final-form, so we merge the external and the internal one
-      fieldProps.input.onChange(value)
-      fieldProps.custom.onChange && fieldProps.custom.onChange(value)
-    }
-    const renderProps = {
-      ...fieldProps,
-      input: {
-        'aria-label': props.label,
-        ...fieldProps.input,
-        onChange: customOnChange,
-      },
-      hasError: !!getFieldError(fieldProps),
-    }
-
-    if (props.hasWrapper) {
-      return (
-        <FormControl
-          id={props.id}
-          name={getFieldName()}
-          error={getFieldError(fieldProps)}
-          label={props.label}
-          required={props.required}
-        >
-          {props.render(renderProps)}
-        </FormControl>
-      )
-    }
-    return props.render(renderProps)
-  }
-
-  const { onChange, name, ...rest } = props
-  return <FinalFormField {...rest} name={getFieldName()} custom={{ onChange }} render={renderComponent} />
-}
-
-Field.defaultProps = {
-  hasWrapper: true,
-} as Partial<FieldProps<any>>
diff --git a/src/form/Field/index.ts b/src/form/Field/index.ts
deleted file mode 100644
index ae05f49d8..000000000
--- a/src/form/Field/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { Field, FieldProps, FieldRenderProps } from './Field'
-export { getFieldError, BaseFieldProps, BaseInputProps, extractInputProps } from './util'
-export { withField } from './withField'
diff --git a/src/form/Field/util.ts b/src/form/Field/util.ts
deleted file mode 100644
index b82c29453..000000000
--- a/src/form/Field/util.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { FieldRenderProps } from 'react-final-form'
-
-import { Omit } from '../../util'
-
-import { FieldProps } from './Field'
-
-/**
- * Return the current field's active error.
- *
- * @param fieldProps The react-final-form field render props.
- */
-export const getFieldError = (fieldProps: FieldRenderProps<any, HTMLElement>): any => {
-  const { meta } = fieldProps
-  return (meta.touched && meta.error) || (!meta.dirtySinceLastSubmit && meta.submitError)
-}
-
-export interface BaseInputProps {
-  name?: string
-}
-
-/**
- * Type to be extended by component props which are a Field-based versions of input elements
- * This type exposes props from Field that must be public and overridables
- */
-export type BaseFieldProps<T extends BaseInputProps, K = any> = Omit<T, 'name'> &
-  Pick<FieldProps<K>, 'name' | 'label' | 'hasWrapper' | 'parse' | 'format' | 'convert' | 'required' | 'validate'>
-
-/**
- * Extract from a BaseFieldProps object only props that can be safely passed down to input elements
- * This functions removes the Field specific props made available by the usage of BaseFieldProps
- */
-export function extractInputProps<T extends BaseInputProps>(fieldProps: BaseFieldProps<T, any>) {
-  const { label, hasWrapper, parse, format, convert, validate, ...rest } = fieldProps
-
-  return rest
-}
diff --git a/src/form/Field/withField.tsx b/src/form/Field/withField.tsx
deleted file mode 100644
index 7f060a3fc..000000000
--- a/src/form/Field/withField.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import hoistNonReactStatics from 'hoist-non-react-statics'
-import React from 'react'
-
-import { InputStatus } from '../../components/TextInput'
-
-import { Field, FieldProps, FieldRenderProps } from './Field'
-import { BaseFieldProps, extractInputProps } from './index'
-
-export interface BaseInputProps {
-  name?: string
-  status?: InputStatus
-}
-
-export function withField<T, P extends BaseInputProps>(
-  InputComponent: React.ComponentType<P>,
-  fieldProps: Partial<FieldProps<T>> = {}
-) {
-  const WithField = class extends React.Component<BaseFieldProps<P, T>> {
-    static displayName = `Field(${InputComponent.displayName || InputComponent.name})`
-
-    render() {
-      return <Field<T> {...this.props} render={this.renderInput} {...fieldProps} />
-    }
-
-    renderInput = (props: FieldRenderProps) => {
-      const Inpt = InputComponent as any
-      return <Inpt status={props.hasError ? 'error' : undefined} {...extractInputProps(this.props)} {...props.input} />
-    }
-  }
-  hoistNonReactStatics(WithField, InputComponent)
-  return WithField
-}
diff --git a/src/form/Form/Form.stories.tsx b/src/form/Form/Form.stories.tsx
deleted file mode 100644
index a5b3e75e8..000000000
--- a/src/form/Form/Form.stories.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { boolean } from '@storybook/addon-knobs'
-import { storiesOf } from '@storybook/react'
-import React from 'react'
-import { FormRenderProps } from 'react-final-form'
-
-import { Flow, VFlow } from '../../components/Flow'
-import { CheckboxField } from '../inputs/CheckboxField'
-import { RadioField } from '../inputs/RadioField'
-import { TextAreaField } from '../inputs/TextAreaField'
-import { TextField } from '../inputs/TextField'
-import { SubmitButton } from '../SubmitButton'
-
-import { Form } from './Form'
-
-storiesOf('Form|Form', module).add('default', () => {
-  const validate = form => {
-    const errors: any = {}
-
-    if (!form.name) {
-      errors.name = 'Required field'
-    }
-
-    if (!form.cpf) {
-      errors.cpf = 'Required field'
-    }
-
-    if (!form.text) {
-      errors.text = 'Required field'
-    }
-
-    return errors
-  }
-
-  const renderForm = (props: FormRenderProps) => (
-    <form onSubmit={props.handleSubmit}>
-      <VFlow>
-        <TextField name='name' label='Name' required />
-        <TextAreaField name='text' label='Text' maxLength={100} required />
-        <Flow>
-          <RadioField name='radio' label='Option1' value='1' />
-          <RadioField name='radio' label='Option2' value='2' />
-        </Flow>
-        <CheckboxField name='check' label='Check' />
-        <SubmitButton handleSubmit={props.handleSubmit}>Submit</SubmitButton>
-      </VFlow>
-    </form>
-  )
-
-  const submit = () => ({ nome: 'test' })
-
-  return <Form onSubmit={submit} render={renderForm} validate={validate} focusOnError={boolean('focusOnError', true)} />
-})
diff --git a/src/form/Form/Form.tsx b/src/form/Form/Form.tsx
deleted file mode 100644
index d8b876256..000000000
--- a/src/form/Form/Form.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { FormApi, FormState, getIn, setIn } from 'final-form'
-import createFocusOnErrorDecorator from 'final-form-focus'
-import setFieldData from 'final-form-set-field-data'
-import React from 'react'
-import { Form as FinalForm, FormProps as FinalFormProps, FormRenderProps } from 'react-final-form'
-
-import { isEmpty, isPromise } from '../../util'
-
-export type ResultType = object | Promise<object | undefined> | undefined | void
-
-export interface FormProps<FormValues> extends FinalFormProps<FormValues> {
-  focusOnError?: boolean
-  transformResult?(result: ResultType): ResultType
-  onSubmitSucceeded?(formState: FormState<FormValues>): void
-  onSubmitFailed?(formState: FormState<FormValues>): void
-}
-
-const focusOnErrorDecorator = createFocusOnErrorDecorator()
-
-export class Form<FormValues extends object = any> extends React.Component<FormProps<FormValues>> {
-  static defaultProps: Partial<FormProps<any>> = {
-    focusOnError: true,
-    decorators: [],
-    transformResult: result => result,
-  }
-
-  render() {
-    const decorators = this.props.decorators ? this.props.decorators : []
-    if (this.props.focusOnError) {
-      decorators.push(focusOnErrorDecorator)
-    }
-
-    const mutators = { ...this.props.mutators, setFieldData: setFieldData.default || setFieldData }
-
-    return (
-      <FinalForm<FormValues>
-        {...this.props}
-        onSubmit={this.onSubmit}
-        render={this.renderForm}
-        decorators={decorators}
-        mutators={mutators}
-      />
-    )
-  }
-
-  private renderForm = (props: FormRenderProps<FormValues>) => (
-    <>
-      {this.props.render({
-        ...props,
-        handleSubmit: this.handleSubmit(props),
-      })}
-    </>
-  )
-
-  private handleSubmit = (formProps: FormRenderProps<FormValues>) => event => {
-    const { onSubmitFailed } = this.props
-    if (onSubmitFailed && !isEmpty(formProps.errors)) {
-      setTimeout(() => onSubmitFailed(formProps.form.getState()))
-    }
-    return formProps.handleSubmit(event)
-  }
-
-  private getConvertedValues = (values: FormValues, form: FormApi<FormValues>) => {
-    let newValues = values
-
-    for (const field of form.getRegisteredFields()) {
-      const fieldState = form.getFieldState(field)
-      const convert = fieldState.data ? fieldState.data.convert : null
-      if (convert) {
-        const fieldValue = getIn(values, field)
-        newValues = setIn(newValues, field, convert(fieldValue)) as FormValues
-      }
-    }
-
-    return newValues
-  }
-
-  private onSubmit = (values: FormValues, form: FormApi<FormValues>) => {
-    const { onSubmit, transformResult } = this.props
-
-    const newValues = this.getConvertedValues(values, form)
-    const result = onSubmit(newValues, form)
-    let ret = transformResult(result)
-
-    if (isPromise(ret)) {
-      ret = ret.then(res => {
-        this.emitSubmitEvents(res, form)
-        return res
-      })
-    } else {
-      this.emitSubmitEvents(ret, form)
-    }
-
-    return ret
-  }
-
-  private emitSubmitEvents = (submitResult: ResultType, form: FormApi<FormValues>) => {
-    const { onSubmitFailed, onSubmitSucceeded } = this.props
-
-    if (!submitResult && onSubmitSucceeded) {
-      setTimeout(() => onSubmitSucceeded(form.getState()))
-    }
-
-    if (submitResult && onSubmitFailed) {
-      setTimeout(() => onSubmitFailed(form.getState()))
-    }
-  }
-}
diff --git a/src/form/Form/index.ts b/src/form/Form/index.ts
deleted file mode 100644
index df1368e80..000000000
--- a/src/form/Form/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { Form, FormProps } from './Form'
diff --git a/src/form/SubmitButton/SubmitButton.tsx b/src/form/SubmitButton/SubmitButton.tsx
deleted file mode 100644
index a8d8e318d..000000000
--- a/src/form/SubmitButton/SubmitButton.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import { FormSpy } from 'react-final-form'
-
-import { Button, ButtonProps } from '../../components/Button'
-
-export interface SubmitButtonProps extends ButtonProps {
-  handleSubmit: (event?: React.SyntheticEvent<HTMLFormElement>) => void
-}
-
-export class SubmitButton extends React.PureComponent<SubmitButtonProps> {
-  render() {
-    const { handleSubmit, ...rest } = this.props
-    return (
-      <FormSpy subscription={{ submitting: true }}>
-        {({ submitting }) => (
-          <Button loading={submitting} onClick={handleSubmit} kind='primary' render={this.renderButton} {...rest} />
-        )}
-      </FormSpy>
-    )
-  }
-
-  private renderButton = (props: any) => {
-    return <button type='submit' {...props} />
-  }
-}
diff --git a/src/form/SubmitButton/index.ts b/src/form/SubmitButton/index.ts
deleted file mode 100644
index 1caeb5bac..000000000
--- a/src/form/SubmitButton/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export * from './SubmitButton'
diff --git a/src/form/index.ts b/src/form/index.ts
deleted file mode 100644
index fb68d0011..000000000
--- a/src/form/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export * from './ErrorField'
-export * from './Field'
-export * from './Form'
-export * from './SubmitButton'
-
-export * from './inputs/CheckboxField'
-export * from './inputs/DateField'
-export * from './inputs/HiddenField'
-export * from './inputs/MaskedField'
-export * from './inputs/MonthField'
-export * from './inputs/NumberField'
-export * from './inputs/RadioField'
-export * from './inputs/SelectField'
-export * from './inputs/SwitchField'
-export * from './inputs/TextAreaField'
-export * from './inputs/TextField'
-export * from './inputs/TimeField'
diff --git a/src/form/inputs/CheckboxField/CheckboxField.stories.tsx b/src/form/inputs/CheckboxField/CheckboxField.stories.tsx
deleted file mode 100644
index aebf439c6..000000000
--- a/src/form/inputs/CheckboxField/CheckboxField.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { action } from '@storybook/addon-actions'
-import { boolean, text } from '@storybook/addon-knobs'
-import { storiesOf } from '@storybook/react'
-import React from 'react'
-
-import { withForm } from '../../../stories-addons'
-
-import { CheckboxField } from './CheckboxField'
-
-storiesOf('Form|CheckboxField', module)
-  .addDecorator(withForm())
-  .add('default', () => (
-    <CheckboxField
-      name='check'
-      label={text('label', 'Component label')}
-      disabled={boolean('disabled', false)}
-      indeterminate={boolean('indeterminate', false)}
-      onChange={action('changed')}
-    />
-  ))
diff --git a/src/form/inputs/CheckboxField/CheckboxField.tsx b/src/form/inputs/CheckboxField/CheckboxField.tsx
deleted file mode 100644
index e7612ed48..000000000
--- a/src/form/inputs/CheckboxField/CheckboxField.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-
-import { Checkbox, CheckboxProps } from '../../../components/Checkbox'
-import { BaseFieldProps, extractInputProps, Field, FieldRenderProps } from '../../Field'
-
-export interface CheckboxFieldProps extends BaseFieldProps<CheckboxProps> {}
-
-export function CheckboxField(props: CheckboxFieldProps) {
-  const renderCheck = (fieldProps: FieldRenderProps) => (
-    <Checkbox {...extractInputProps(props)} {...fieldProps.input} label={props.label} />
-  )
-
-  return <Field {...props} type='checkbox' hasWrapper={false} render={renderCheck} />
-}
diff --git a/src/form/inputs/CheckboxField/index.ts b/src/form/inputs/CheckboxField/index.ts
deleted file mode 100644
index b6078c5ff..000000000
--- a/src/form/inputs/CheckboxField/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { CheckboxField, CheckboxFieldProps } from './CheckboxField'
diff --git a/src/form/inputs/DateField/DateField.stories.tsx b/src/form/inputs/DateField/DateField.stories.tsx
deleted file mode 100644
index a8dc8c640..000000000
--- a/src/form/inputs/DateField/DateField.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { action } from '@storybook/addon-actions'
-import { boolean } from '@storybook/addon-knobs'
-import { storiesOf } from '@storybook/react'
-import React from 'react'
-
-import { DateInput } from '../../../components/DateInput'
-import { withForm } from '../../../stories-addons/withForm'
-
-import { DateField } from './DateField'
-
-const todayMinus10 = new Date(new Date().setDate(new Date().getDate() - 10))
-
-storiesOf('Form|DateField', module)
-  .addDecorator(withForm())
-  .add('field', () => (
-    <DateField name='date' label='Data' disabled={boolean('disabled', false)} onChange={action('changed')} required />
-  ))
-  .add('min/max date', () => (
-    <DateField
-      name='date'
-      label='Data'
-      disabled={boolean('disabled', false)}
-      onChange={action('changed')}
-      minDate={todayMinus10}
-      maxDate={new Date()}
-      required
-    />
-  ))
-  .add('input', () => <DateInput name='date' onChange={action('changed')} value={new Date()} />)
diff --git a/src/form/inputs/DateField/DateField.tsx b/src/form/inputs/DateField/DateField.tsx
deleted file mode 100644
index 01a52866c..000000000
--- a/src/form/inputs/DateField/DateField.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { DatePickerInput, DatePickerInputProps } from '../../../components/DateInput'
-import { BaseFieldProps, withField } from '../../Field'
-
-export const parse = (value: Date): string => {
-  if (!value) {
-    return null
-  }
-
-  const year = ('000' + value.getFullYear()).slice(-4)
-  const month = ('0' + (value.getMonth() + 1)).slice(-2)
-  const day = ('0' + value.getDate()).slice(-2)
-
-  return `${year}-${month}-${day}`
-}
-
-export const format = (value: string): Date => {
-  if (!value) {
-    return null
-  }
-
-  const dateParts = value.split('-')
-  try {
-    const date = new Date(parseInt(dateParts[0], 10), parseInt(dateParts[1], 10) - 1, parseInt(dateParts[2], 10))
-    return date && date.getTime() ? date : null
-  } catch (err) {
-    return null
-  }
-}
-
-export type DateFieldProps = BaseFieldProps<DatePickerInputProps>
-
-export const DateField = withField(DatePickerInput, {
-  parse,
-  format,
-})
diff --git a/src/form/inputs/DateField/index.ts b/src/form/inputs/DateField/index.ts
deleted file mode 100644
index ba47a4195..000000000
--- a/src/form/inputs/DateField/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { DateField, DateFieldProps } from './DateField'
diff --git a/src/form/inputs/HiddenField/HiddenField.tsx b/src/form/inputs/HiddenField/HiddenField.tsx
deleted file mode 100644
index df535d809..000000000
--- a/src/form/inputs/HiddenField/HiddenField.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Input, InputProps } from '../../../components/Input'
-import { BaseFieldProps, withField } from '../../Field'
-
-export type HiddenFieldProps = BaseFieldProps<InputProps>
-
-export const HiddenField = withField(Input, {
-  type: 'hidden',
-})
diff --git a/src/form/inputs/HiddenField/index.ts b/src/form/inputs/HiddenField/index.ts
deleted file mode 100644
index e51512d78..000000000
--- a/src/form/inputs/HiddenField/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { HiddenField, HiddenFieldProps } from './HiddenField'
diff --git a/src/form/inputs/MaskedField/MaskedField.tsx b/src/form/inputs/MaskedField/MaskedField.tsx
deleted file mode 100644
index 0f7edd0db..000000000
--- a/src/form/inputs/MaskedField/MaskedField.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { MaskedInput, MaskedInputProps } from '../../../components/MaskedInput'
-import { BaseFieldProps, withField } from '../../Field'
-
-export type MaskedFieldProps = BaseFieldProps<MaskedInputProps>
-
-export const MaskedField = withField(MaskedInput)
diff --git a/src/form/inputs/MaskedField/index.ts b/src/form/inputs/MaskedField/index.ts
deleted file mode 100644
index b5c668e5f..000000000
--- a/src/form/inputs/MaskedField/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { MaskedField, MaskedFieldProps } from './MaskedField'
diff --git a/src/form/inputs/MonthField/MonthField.stories.tsx b/src/form/inputs/MonthField/MonthField.stories.tsx
deleted file mode 100644
index db5ed3e70..000000000
--- a/src/form/inputs/MonthField/MonthField.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { action } from '@storybook/addon-actions'
-import { storiesOf } from '@storybook/react'
-import React from 'react'
-
-import { MonthPickerInput } from '../../../components'
-import { withForm } from '../../../stories-addons'
-
-import { MonthField } from './MonthField'
-
-storiesOf('Form|MonthField', module)
-  .addDecorator(withForm())
-  .add('default', () => <MonthField onChange={action('changed')} name='month' />)
-  .add('input', () => <MonthPickerInput onChange={action('changed')} name='month' />)
diff --git a/src/form/inputs/MonthField/MonthField.tsx b/src/form/inputs/MonthField/MonthField.tsx
deleted file mode 100644
index 663e36ed1..000000000
--- a/src/form/inputs/MonthField/MonthField.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { MonthPickerInput, MonthPickerInputProps } from '../../../components/MonthPicker'
-import { BaseFieldProps, withField } from '../../Field'
-
-export type MonthFieldProps = BaseFieldProps<MonthPickerInputProps>
-
-export const MonthField = withField(MonthPickerInput)
diff --git a/src/form/inputs/MonthField/index.ts b/src/form/inputs/MonthField/index.ts
deleted file mode 100644
index 44c82fc8f..000000000
--- a/src/form/inputs/MonthField/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { MonthField, MonthFieldProps } from './MonthField'
diff --git a/src/form/inputs/NumberField/NumberField.stories.tsx b/src/form/inputs/NumberField/NumberField.stories.tsx
deleted file mode 100644
index a4661f980..000000000
--- a/src/form/inputs/NumberField/NumberField.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { action } from '@storybook/addon-actions'
-import { storiesOf } from '@storybook/react'
-import React from 'react'
-
-import { withForm } from '../../../stories-addons'
-
-import { NumberField } from './NumberField'
-
-storiesOf('Form|NumberField', module)
-  .addDecorator(withForm())
-  .add('default', () => (
-    <NumberField name='number' label='Number' placeholder='Type a number...' onChange={action('changed')} />
-  ))
diff --git a/src/form/inputs/NumberField/NumberField.tsx b/src/form/inputs/NumberField/NumberField.tsx
deleted file mode 100644
index 3c06b63f3..000000000
--- a/src/form/inputs/NumberField/NumberField.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-
-import { TextInputProps } from '../../../components/TextInput'
-import { BaseFieldProps } from '../../Field'
-import { TextField } from '../TextField/TextField'
-
-export const parse = value => value.replace(/[^\d]/g, '')
-
-export interface NumberFieldProps extends BaseFieldProps<TextInputProps> {}
-
-export class NumberField extends React.Component<NumberFieldProps> {
-  render() {
-    return <TextField parse={parse} {...this.props} />
-  }
-}
diff --git a/src/form/inputs/NumberField/index.ts b/src/form/inputs/NumberField/index.ts
deleted file mode 100644
index a52303269..000000000
--- a/src/form/inputs/NumberField/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { NumberField, NumberFieldProps } from './NumberField'
diff --git a/src/form/inputs/RadioField/RadioField.stories.tsx b/src/form/inputs/RadioField/RadioField.stories.tsx
deleted file mode 100644
index 4058ffe1b..000000000
--- a/src/form/inputs/RadioField/RadioField.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { action } from '@storybook/addon-actions'
-import { boolean, text } from '@storybook/addon-knobs'
-import { storiesOf } from '@storybook/react'
-import React from 'react'
-
-import { Flow } from '../../../components/Flow'
-import { withForm } from '../../../stories-addons/withForm'
-
-import { RadioField } from './RadioField'
-
-storiesOf('Form|RadioField', module)
-  .addDecorator(withForm())
-  .add('default', () => (
-    <Flow>
-      <RadioField
-        name='radio1'
-        label={text('label', 'Component label')}
-        value='1'
-        onChange={action('changed')}
-        disabled={boolean('disabled', false)}
-      />
-      <RadioField
-        name='radio1'
-        label={text('label', 'Component label')}
-        value='2'
-        onChange={action('changed')}
-        disabled={boolean('disabled', false)}
-      />
-    </Flow>
-  ))
diff --git a/src/form/inputs/RadioField/RadioField.tsx b/src/form/inputs/RadioField/RadioField.tsx
deleted file mode 100644
index 776825287..000000000
--- a/src/form/inputs/RadioField/RadioField.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-
-import { Radio, RadioProps } from '../../../components/Radio'
-import { BaseFieldProps, extractInputProps, Field, FieldRenderProps } from '../../Field'
-
-export interface RadioFieldProps extends BaseFieldProps<RadioProps> {}
-
-export class RadioField extends React.Component<RadioFieldProps> {
-  render() {
-    return <Field {...this.props} type='radio' hasWrapper={false} render={this.renderRadio} />
-  }
-
-  private renderRadio = (props: FieldRenderProps) => (
-    <Radio {...extractInputProps(this.props)} {...props.input} label={this.props.label} />
-  )
-}
diff --git a/src/form/inputs/RadioField/index.ts b/src/form/inputs/RadioField/index.ts
deleted file mode 100644
index c2f60a45c..000000000
--- a/src/form/inputs/RadioField/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { RadioField, RadioFieldProps } from './RadioField'
diff --git a/src/form/inputs/SelectField/SelectField.tsx b/src/form/inputs/SelectField/SelectField.tsx
deleted file mode 100644
index 68d83c53f..000000000
--- a/src/form/inputs/SelectField/SelectField.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-
-import { DefaultItemType, Select, SelectProps } from '../../../components/Select'
-import { BaseFieldProps, extractInputProps, Field, FieldRenderProps } from '../../Field'
-
-export interface SelectFieldProps<T = DefaultItemType> extends BaseFieldProps<SelectProps<T>, T | T[]> {}
-
-export class SelectField<T = DefaultItemType> extends React.Component<SelectFieldProps<T>> {
-  static defaultProps: Partial<SelectFieldProps<any>> = {}
-
-  render() {
-    return <Field<T | T[]> {...this.props} render={this.renderSelect} />
-  }
-
-  private renderSelect = (props: FieldRenderProps<any>) => {
-    return (
-      <Select<T>
-        {...extractInputProps<SelectProps<T>>(this.props)}
-        {...(props.input as any)}
-        status={props.hasError ? 'error' : undefined}
-      />
-    )
-  }
-}
diff --git a/src/form/inputs/SelectField/index.ts b/src/form/inputs/SelectField/index.ts
deleted file mode 100644
index 0030c5c33..000000000
--- a/src/form/inputs/SelectField/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { SelectField, SelectFieldProps } from './SelectField'
diff --git a/src/form/inputs/SwitchField/SwitchField.stories.tsx b/src/form/inputs/SwitchField/SwitchField.stories.tsx
deleted file mode 100644
index 33130b7c9..000000000
--- a/src/form/inputs/SwitchField/SwitchField.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { action } from '@storybook/addon-actions'
-import { boolean, text } from '@storybook/addon-knobs'
-import { storiesOf } from '@storybook/react'
-import React from 'react'
-
-import { withForm } from '../../../stories-addons/withForm'
-
-import { SwitchField } from './SwitchField'
-
-storiesOf('Form|SwitchField', module)
-  .addDecorator(withForm())
-  .add('default', () => (
-    <SwitchField
-      name='switch'
-      label={text('label', '')}
-      disabled={boolean('disabled', false)}
-      onChange={action('changed')}
-    />
-  ))
diff --git a/src/form/inputs/SwitchField/SwitchField.tsx b/src/form/inputs/SwitchField/SwitchField.tsx
deleted file mode 100644
index 29c1a2407..000000000
--- a/src/form/inputs/SwitchField/SwitchField.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-
-import { Switch, SwitchProps } from '../../../components/Switch'
-import { BaseFieldProps, extractInputProps, Field, FieldRenderProps } from '../../Field'
-
-export interface SwitchFieldProps extends BaseFieldProps<SwitchProps> {
-  name: string
-}
-
-export class SwitchField extends React.Component<SwitchFieldProps> {
-  render() {
-    return <Field {...this.props} type='checkbox' hasWrapper={false} render={this.renderSwitch} />
-  }
-
-  private renderSwitch = (props: FieldRenderProps) => (
-    <Switch {...extractInputProps(this.props)} {...props.input} label={this.props.label} />
-  )
-}
diff --git a/src/form/inputs/SwitchField/index.ts b/src/form/inputs/SwitchField/index.ts
deleted file mode 100644
index 62cfc7121..000000000
--- a/src/form/inputs/SwitchField/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { SwitchField, SwitchFieldProps } from './SwitchField'
diff --git a/src/form/inputs/TextAreaField/TextAreaField.stories.tsx b/src/form/inputs/TextAreaField/TextAreaField.stories.tsx
deleted file mode 100644
index 544f10b85..000000000
--- a/src/form/inputs/TextAreaField/TextAreaField.stories.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { action } from '@storybook/addon-actions'
-import { boolean, number } from '@storybook/addon-knobs'
-import { storiesOf } from '@storybook/react'
-import React from 'react'
-
-import { withForm } from '../../../stories-addons/withForm'
-
-import { TextAreaField } from './TextAreaField'
-
-storiesOf('Form|TextAreaField', module)
-  .addDecorator(withForm())
-  .add('default', () => (
-    <TextAreaField
-      disabled={boolean('disabled', false)}
-      name='nome'
-      label='Nome'
-      placeholder='Nome'
-      maxLength={number('maxLength', '' as any)}
-      onChange={action('changed')}
-      required
-    />
-  ))
diff --git a/src/form/inputs/TextAreaField/TextAreaField.tsx b/src/form/inputs/TextAreaField/TextAreaField.tsx
deleted file mode 100644
index 5a87dc7c3..000000000
--- a/src/form/inputs/TextAreaField/TextAreaField.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { TextArea, TextAreaProps } from '../../../components/TextArea'
-import { BaseFieldProps, withField } from '../../Field'
-
-export type TextAreaFieldProps = BaseFieldProps<TextAreaProps>
-
-export const TextAreaField = withField(TextArea)
diff --git a/src/form/inputs/TextAreaField/index.ts b/src/form/inputs/TextAreaField/index.ts
deleted file mode 100644
index fc3c49b66..000000000
--- a/src/form/inputs/TextAreaField/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { TextAreaField, TextAreaFieldProps } from './TextAreaField'
diff --git a/src/form/inputs/TextField/TextField.tsx b/src/form/inputs/TextField/TextField.tsx
deleted file mode 100644
index 1bf692c71..000000000
--- a/src/form/inputs/TextField/TextField.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { TextInput, TextInputProps } from '../../../components/TextInput'
-import { BaseFieldProps, withField } from '../../Field'
-
-export type TextFieldProps = BaseFieldProps<TextInputProps, string>
-
-export const TextField = withField<string, TextInputProps>(TextInput)
diff --git a/src/form/inputs/TextField/index.ts b/src/form/inputs/TextField/index.ts
deleted file mode 100644
index 69979c827..000000000
--- a/src/form/inputs/TextField/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { TextField, TextFieldProps } from './TextField'
diff --git a/src/form/inputs/TimeField/TimeField.stories.tsx b/src/form/inputs/TimeField/TimeField.stories.tsx
deleted file mode 100644
index 2d3bfdd95..000000000
--- a/src/form/inputs/TimeField/TimeField.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { action } from '@storybook/addon-actions'
-import { boolean } from '@storybook/addon-knobs'
-import { storiesOf } from '@storybook/react'
-import React from 'react'
-
-import { withForm } from '../../../stories-addons'
-
-import { TimeField } from './TimeField'
-
-storiesOf('Form|TimeField', module)
-  .addDecorator(withForm())
-  .add('default', () => (
-    <TimeField
-      name='time'
-      label='Time (hour:minute)'
-      disabled={boolean('disabled', false)}
-      guide={boolean('guide', true)}
-      keepCharPositions={boolean('keepCharPositions', false)}
-      onChange={action('changed')}
-    />
-  ))
diff --git a/src/form/inputs/TimeField/TimeField.tsx b/src/form/inputs/TimeField/TimeField.tsx
deleted file mode 100644
index 75993c093..000000000
--- a/src/form/inputs/TimeField/TimeField.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { TimeInput, TimeInputProps } from '../../../components/TimeInput'
-import { BaseFieldProps, withField } from '../../Field'
-
-export const format = (value: string) => {
-  // Omit seconds in case the initial field value is in format 'HH:mm:ss'
-  return value ? value.slice(0, 5) : null
-}
-
-export type TimeFieldProps = BaseFieldProps<TimeInputProps>
-
-export const TimeField = withField(TimeInput, {
-  format,
-})
diff --git a/src/form/inputs/TimeField/index.ts b/src/form/inputs/TimeField/index.ts
deleted file mode 100644
index a9f93a5d0..000000000
--- a/src/form/inputs/TimeField/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { TimeField, TimeFieldProps } from './TimeField'
diff --git a/src/index.ts b/src/index.ts
index 0647797e6..f4fc268df 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,4 @@
 export * from './components'
-export * from './form'
 export * from './locale'
 export * from './metaPath'
 export * from './styles'
diff --git a/src/stories-addons/index.ts b/src/stories-addons/index.ts
index 8384259d0..16456f660 100644
--- a/src/stories-addons/index.ts
+++ b/src/stories-addons/index.ts
@@ -1,2 +1,1 @@
-export * from './withForm'
 export * from './withStorybookTheme'
diff --git a/src/stories-addons/withForm.tsx b/src/stories-addons/withForm.tsx
deleted file mode 100644
index 5160641cf..000000000
--- a/src/stories-addons/withForm.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Renderable, RenderFunction } from '@storybook/react'
-import React from 'react'
-import { FormProps } from 'react-final-form'
-
-import { Form } from '../form/Form'
-
-// tslint:disable jsx-no-lambda
-
-export const withForm = (formProps: Partial<FormProps> = {}) => (story: RenderFunction): Renderable => {
-  const submit = () => undefined
-  return <Form onSubmit={submit} render={() => story()} {...formProps} />
-}
diff --git a/webpack.config.js b/webpack.config.js
index 2549321eb..836c7b04a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -33,7 +33,7 @@ const config = {
     ],
   },
   plugins: [new CheckerPlugin()],
-  externals: ['react', 'react-dom', 'emotion', 'react-final-form', 'final-form'],
+  externals: ['react', 'react-dom', 'emotion'],
   optimization: {
     minimizer: [
       new UglifyJsPlugin({
diff --git a/yarn.lock b/yarn.lock
index 5f45a8a2e..ef35fceda 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1018,7 +1018,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.3", "@babel/runtime@^7.4.5":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.3", "@babel/runtime@^7.4.5":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
   integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
@@ -5714,23 +5714,6 @@ fill-range@^4.0.0:
     repeat-string "^1.6.1"
     to-regex-range "^2.1.0"
 
-final-form-focus@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/final-form-focus/-/final-form-focus-1.1.2.tgz#8ea5c4bd802e220cebaa47a587bb0be164eb6806"
-  integrity sha512-Gd+Bd2Ll7ijo3/sd6kJ/bwLkhc2bUJPxTON6fIqee/008EJpACWhT+zoWCm9q6NcfMcWRS+Sp5ikRX8iqdXeGQ==
-
-final-form-set-field-data@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/final-form-set-field-data/-/final-form-set-field-data-1.0.2.tgz#ce19095af5d607148c1e6ce3403d75d40223d848"
-  integrity sha512-gAnENimyQ5GW3OEGca5pbwm4lYshW2orzfBlPUYqzcm7ZxkQrVO8FqCAgEcCM+Rq9U1OU0q+D+UkqETvvDY6jw==
-
-final-form@4.15.0:
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.15.0.tgz#8bce40c65138d0dd464c705880bbdc273320438a"
-  integrity sha512-A7pvzFAZ/mswLfU4pMKnB+otx3ttv8dO6/X+gWqhUSP+EpNsMenY88PHuGNJ9bIkhYcwF1ErXB8b2E2EMHKBLg==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-
 finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@@ -9991,14 +9974,6 @@ react-fast-compare@2.0.4:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-final-form@6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/react-final-form/-/react-final-form-6.2.1.tgz#c674ba55bb1cadd407eaa3466db8257e63cf7a4b"
-  integrity sha512-U4sxiBw5BtKJXCOA5ezaX+0U/Rr3j4R3YwNEkfYsBfYHtJABfUNrTmxPqeX0hrvj+jdhsBTgMU/41jZddJ9p9A==
-  dependencies:
-    "@babel/runtime" "^7.4.5"
-    ts-essentials "^2.0.8"
-
 react-focus-lock@^1.18.3:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-1.19.1.tgz#2f3429793edaefe2d077121f973ce5a3c7a0651a"
@@ -11847,11 +11822,6 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.4.tgz#3b52b1f13924f460c3fbfd0df69b587dbcbc762e"
   integrity sha512-tdzBRDGWcI1OpPVmChbdSKhvSVurznZ8X36AYURAcl+0o2ldlCY2XPzyXNNxwJwwyIU+rIglTCG4kxtNKBQH7Q==
 
-ts-essentials@^2.0.8:
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-2.0.10.tgz#c44ebe16ee8089c6cbb9a423ed14f700dd4fe58e"
-  integrity sha512-QnjI4QUa+dgP6NU6+uicEN7HDHrsyX26tCyhysmowfnGrGhs+gY9i5fDmMDBF+Bu7X3/mHUlag9jvkqsPaXJiA==
-
 ts-jest@24.0.2:
   version "24.0.2"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-24.0.2.tgz#8dde6cece97c31c03e80e474c749753ffd27194d"


Test patch:
diff --git a/src/__snapshots__/index.test.ts.snap b/src/__snapshots__/index.test.ts.snap
index 7cf4ec680..007732c35 100644
--- a/src/__snapshots__/index.test.ts.snap
+++ b/src/__snapshots__/index.test.ts.snap
@@ -101,25 +101,6 @@ Array [
   "TextInput",
   "TimeInput",
   "Tooltip",
-  "ErrorField",
-  "Field",
-  "getFieldError",
-  "extractInputProps",
-  "withField",
-  "Form",
-  "SubmitButton",
-  "CheckboxField",
-  "DateField",
-  "HiddenField",
-  "MaskedField",
-  "MonthField",
-  "NumberField",
-  "RadioField",
-  "SelectField",
-  "SwitchField",
-  "TextAreaField",
-  "TextField",
-  "TimeField",
   "LocaleContext",
   "useLocale",
   "metaPath",
diff --git a/src/form/Field/Field.test.tsx b/src/form/Field/Field.test.tsx
deleted file mode 100644
index d82e10357..000000000
--- a/src/form/Field/Field.test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { render } from '@testing-library/react'
-import setFieldData from 'final-form-set-field-data'
-import React from 'react'
-import { Form } from 'react-final-form'
-
-import metaPath from '../../metaPath/metaPath'
-
-import { Field, FieldProps, FieldRenderProps } from './Field'
-
-interface FormType {
-  id: number
-  name: string
-}
-
-const input = jest.fn((props: FieldRenderProps) => <input {...props.input} />)
-
-const createFormAndField = (fieldProps?: Partial<FieldProps>) => {
-  return <Form onSubmit={jest.fn()}>{p => <Field name='field1' render={input} {...fieldProps} />}</Form>
-}
-
-describe('render', () => {
-  it('should render correctly', () => {
-    const { container } = render(createFormAndField({ label: 'Field #1', required: true }))
-    expect(container).toMatchSnapshot()
-  })
-
-  it('should NOT render wrapper if hasWrapper is false', () => {
-    const { container } = render(createFormAndField({ hasWrapper: false }))
-    expect(container.querySelectorAll('div').length).toEqual(0)
-  })
-})
-
-describe('convert', () => {
-  it('should throw an exception if convert is defined but necessary mutator is not set on context', () => {
-    jest.spyOn(console, 'error').mockImplementation(() => null)
-    expect(() => {
-      render(createFormAndField({ convert: jest.fn() }))
-    }).toThrowErrorMatchingSnapshot()
-  })
-})
-
-describe('meta', () => {
-  it('should accept metaPath as name prop', () => {
-    const path = metaPath<FormType>()
-    const convert = jest.fn()
-
-    const { container } = render(
-      <Form onSubmit={jest.fn()} mutators={{ setFieldData: setFieldData.default || setFieldData }}>
-        {p => <Field<number> name={path.id} render={input} convert={convert} />}
-      </Form>
-    )
-
-    expect(container.querySelector('input').getAttribute('name')).toEqual('id')
-  })
-})
diff --git a/src/form/Field/__snapshots__/Field.test.tsx.snap b/src/form/Field/__snapshots__/Field.test.tsx.snap
deleted file mode 100644
index 8af3a3529..000000000
--- a/src/form/Field/__snapshots__/Field.test.tsx.snap
+++ /dev/null
@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`convert should throw an exception if convert is defined but necessary mutator is not set on context 1`] = `"Form must have a setFieldData mutator so Field can define a convert function"`;
-
-exports[`render should render correctly 1`] = `
-.emotion-0 {
-  color: #D01E29;
-  margin-left: 0.25rem;
-}
-
-.emotion-1 {
-  font-weight: bold;
-  display: block;
-  margin-bottom: 0.25rem;
-  line-height: 20px;
-}
-
-<div>
-  <div
-    data-name="field1"
-  >
-    <label
-      class="emotion-1"
-    >
-      Field #1
-      <span
-        class="emotion-0"
-        title="Required field"
-      >
-        *
-      </span>
-    </label>
-    <input
-      aria-label="Field #1"
-      name="field1"
-      value=""
-    />
-  </div>
-</div>
-`;
diff --git a/src/form/Field/util.test.ts b/src/form/Field/util.test.ts
deleted file mode 100644
index 5f3290aa8..000000000
--- a/src/form/Field/util.test.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { FieldRenderProps } from 'react-final-form'
-
-import { BaseFieldProps, extractInputProps, getFieldError } from './util'
-
-describe('getFieldError', () => {
-  it('should return the current field active error', () => {
-    const baseFieldProps: FieldRenderProps<any, HTMLElement> = {
-      input: { name: '', checked: false, onBlur: jest.fn(), onChange: jest.fn(), onFocus: jest.fn(), value: '' },
-      meta: {},
-    }
-
-    expect(getFieldError({ ...baseFieldProps })).toBeFalsy()
-
-    expect(getFieldError({ ...baseFieldProps, meta: { error: 'Error!' } })).toBeFalsy()
-    expect(getFieldError({ ...baseFieldProps, meta: { error: 'Error!', touched: true } })).toEqual('Error!')
-
-    expect(
-      getFieldError({
-        ...baseFieldProps,
-        meta: {
-          submitError: 'Submit Error!',
-          dirtySinceLastSubmit: true,
-        },
-      })
-    ).toBeFalsy()
-    expect(
-      getFieldError({
-        ...baseFieldProps,
-        meta: { submitError: 'Submit Error!', dirtySinceLastSubmit: false },
-      })
-    ).toEqual('Submit Error!')
-  })
-})
-
-describe('extractInputProps', () => {
-  it('should remove Field specific props from object', () => {
-    const obj: BaseFieldProps<{ foo: string; bar: string; name: string }> = {
-      name: 'test',
-      label: 'Test',
-      hasWrapper: true,
-      parse: jest.fn(),
-      format: jest.fn(),
-      convert: jest.fn(),
-      validate: jest.fn(),
-      foo: '',
-      bar: '',
-    }
-    expect(extractInputProps(obj)).toEqual({
-      name: 'test',
-      foo: '',
-      bar: '',
-    })
-  })
-})
diff --git a/src/form/Form/Form.test.tsx b/src/form/Form/Form.test.tsx
deleted file mode 100644
index 69d238d34..000000000
--- a/src/form/Form/Form.test.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import { fireEvent, render, wait } from '@testing-library/react'
-import React from 'react'
-import { Field as FinalFormField } from 'react-final-form'
-
-import { Field, FieldRenderProps } from '../Field'
-
-import { Form, FormProps } from './Form'
-
-// tslint:disable jsx-no-lambda
-
-const createComponent = (props: Partial<FormProps<any>> = {}) => {
-  return (
-    <Form
-      onSubmit={jest.fn()}
-      render={({ handleSubmit }) => (
-        <form onSubmit={handleSubmit}>
-          <FinalFormField name='foo' component='input' type='text' />
-        </form>
-      )}
-      {...props}
-    />
-  )
-}
-
-it('should render the return of the render prop', () => {
-  const renderForm = jest.fn(() => <span>Hello</span>)
-  const { container } = render(createComponent({ render: renderForm }))
-  expect(renderForm).toHaveBeenCalledTimes(1)
-  expect(container.innerHTML).toEqual('<span>Hello</span>')
-})
-
-it('should call each field convert value and pass values to onSubmit', () => {
-  const input = jest.fn((p: FieldRenderProps) => <input {...p.input} />)
-  const onSubmit = jest.fn()
-  const { container } = render(
-    createComponent({
-      onSubmit,
-      initialValues: {
-        foo: { id: 1, label: 'Item #1' },
-        bar: {
-          qux: { id: 2, label: 'Item #2' },
-        },
-      },
-      render: p => (
-        <form onSubmit={p.handleSubmit}>
-          <Field name='foo' render={input} convert={val => val.id} />
-          <Field name='bar.qux' render={input} convert={val => val.id} />
-        </form>
-      ),
-    })
-  )
-
-  fireEvent.submit(container.querySelector('form'))
-  expect(onSubmit).toHaveBeenLastCalledWith({ foo: 1, bar: { qux: 2 } }, expect.any(Object))
-})
-
-describe('onSubmitSucceedded', () => {
-  it('should call onSubmitSucceeded when form is submited without errors', async () => {
-    const onSubmitSucceeded = jest.fn()
-    const onSubmitFailed = jest.fn()
-    const { container } = render(createComponent({ onSubmitSucceeded, onSubmitFailed }))
-    const form = container.querySelector('form')
-
-    expect(onSubmitSucceeded).not.toHaveBeenCalled()
-    fireEvent.submit(form)
-    await wait()
-    expect(onSubmitSucceeded).toBeCalledTimes(1)
-    expect(onSubmitSucceeded).toHaveBeenLastCalledWith(expect.objectContaining({ submitSucceeded: true }))
-
-    fireEvent.submit(form)
-    await wait()
-    expect(onSubmitSucceeded).toBeCalledTimes(2)
-
-    expect(onSubmitFailed).not.toHaveBeenCalled()
-  })
-  it.skip('should call onSubmitSucceeded when submit is resolved with an empty promise', async () => {
-    const onSubmitSucceeded = jest.fn()
-    const onSubmitFailed = jest.fn()
-    const onSubmit = jest.fn(() => Promise.resolve())
-    const { container } = render(createComponent({ onSubmit, onSubmitSucceeded, onSubmitFailed }))
-    const form = container.querySelector('form')
-
-    expect(onSubmitSucceeded).not.toHaveBeenCalled()
-    fireEvent.submit(form)
-    await wait()
-    expect(onSubmitSucceeded).toBeCalledTimes(1)
-    expect(onSubmitSucceeded).toHaveBeenLastCalledWith(expect.objectContaining({ submitSucceeded: true }))
-
-    fireEvent.submit(form)
-    await wait()
-    expect(onSubmitSucceeded).toBeCalledTimes(2)
-
-    expect(onSubmitFailed).not.toHaveBeenCalled()
-  })
-})
-
-describe('onSubmitFailed', () => {
-  it('should call onSubmitFailed when form is submited with validation errors', async () => {
-    const onSubmitFailed = jest.fn()
-    const onSubmitSucceeded = jest.fn()
-    const { container } = render(
-      createComponent({
-        onSubmitFailed,
-        onSubmitSucceeded,
-        validate: () => ({ foo: 'Error' }),
-      })
-    )
-    const form = container.querySelector('form')
-
-    expect(onSubmitFailed).not.toHaveBeenCalled()
-    fireEvent.submit(form)
-    await wait()
-    expect(onSubmitFailed).toHaveBeenCalledTimes(1)
-    expect(onSubmitFailed).toHaveBeenLastCalledWith(
-      expect.objectContaining({ submitFailed: true, errors: { foo: 'Error' } })
-    )
-
-    fireEvent.submit(form)
-    await wait()
-    expect(onSubmitFailed).toHaveBeenCalledTimes(2)
-
-    expect(onSubmitSucceeded).not.toHaveBeenCalled()
-  })
-
-  it('should call onSubmitFailed when form is submited with submit errors', async () => {
-    const onSubmitFailed = jest.fn()
-    const onSubmitSucceeded = jest.fn()
-    const { container } = render(
-      createComponent({
-        onSubmitFailed,
-        onSubmitSucceeded,
-        onSubmit: () => ({ foo: 'Error' }),
-      })
-    )
-    const form = container.querySelector('form')
-
-    expect(onSubmitFailed).not.toHaveBeenCalled()
-    fireEvent.submit(form)
-    await wait()
-    expect(onSubmitFailed).toHaveBeenCalledTimes(1)
-    expect(onSubmitFailed).toHaveBeenLastCalledWith(
-      expect.objectContaining({ submitFailed: true, submitErrors: { foo: 'Error' } })
-    )
-
-    fireEvent.submit(form)
-    await wait()
-    expect(onSubmitFailed).toHaveBeenCalledTimes(2)
-
-    expect(onSubmitSucceeded).not.toHaveBeenCalled()
-  })
-
-  it.skip('should call onSubmitFailed when submit is resolved with a non-empty value', async () => {
-    const onSubmitFailed = jest.fn()
-    const onSubmitSucceeded = jest.fn()
-    const onSubmit = jest.fn(() => Promise.resolve({ foo: 'Error' }))
-    const { container } = render(
-      createComponent({
-        onSubmitFailed,
-        onSubmitSucceeded,
-        onSubmit,
-      })
-    )
-    const form = container.querySelector('form')
-
-    expect(onSubmitFailed).not.toHaveBeenCalled()
-    fireEvent.submit(form)
-    await wait()
-    expect(onSubmitFailed).toHaveBeenCalledTimes(1)
-    expect(onSubmitFailed).toHaveBeenLastCalledWith(
-      expect.objectContaining({ submitFailed: true, submitErrors: { foo: 'Error' } })
-    )
-
-    fireEvent.submit(form)
-    await wait()
-    expect(onSubmitFailed).toHaveBeenCalledTimes(2)
-
-    expect(onSubmitSucceeded).not.toHaveBeenCalled()
-  })
-})
diff --git a/src/form/SubmitButton/SubmitButton.test.tsx b/src/form/SubmitButton/SubmitButton.test.tsx
deleted file mode 100644
index f6b53c68b..000000000
--- a/src/form/SubmitButton/SubmitButton.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { fireEvent, render } from '@testing-library/react'
-import React from 'react'
-import { Form } from 'react-final-form'
-
-import { SubmitButton } from './SubmitButton'
-
-it('should render correctly', () => {
-  const { container } = render(
-    <Form onSubmit={jest.fn()}>
-      {renderProps => <SubmitButton handleSubmit={renderProps.handleSubmit}>Submit Button</SubmitButton>}
-    </Form>
-  )
-  expect(container).toMatchSnapshot()
-})
-
-it('should be loading when form is submitting', () => {
-  const submitHandler = () => new Promise(() => null) // never resolves
-  const { container } = render(
-    <Form onSubmit={submitHandler}>
-      {renderProps => <SubmitButton handleSubmit={renderProps.handleSubmit}>Submit Button</SubmitButton>}
-    </Form>
-  )
-  const button = container.querySelector('button')
-
-  fireEvent.click(button)
-  expect(button.getAttribute('data-loading')).toEqual('true')
-})
diff --git a/src/form/SubmitButton/__snapshots__/SubmitButton.test.tsx.snap b/src/form/SubmitButton/__snapshots__/SubmitButton.test.tsx.snap
deleted file mode 100644
index 78f08605e..000000000
--- a/src/form/SubmitButton/__snapshots__/SubmitButton.test.tsx.snap
+++ /dev/null
@@ -1,72 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-.emotion-0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: #FFFFFF;
-  border: 1px solid #8F8FA2;
-  border-radius: 4px;
-  color: #3A3A47;
-  background-color: #0069D0;
-  color: #FFFFFF;
-  border: 1px solid #0069D0;
-  font-size: 0.875rem;
-  padding: calc(0.75rem - 1px) 2.5rem;
-}
-
-.emotion-0 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-0:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-0:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
-}
-
-.emotion-0:not(:disabled):hover {
-  background-color: #F0F0F5;
-}
-
-.emotion-0:not(:disabled):hover {
-  background-color: #0051A2;
-}
-
-<div>
-  <button
-    class="emotion-0"
-    type="button"
-  >
-    <span>
-      Submit Button
-    </span>
-  </button>
-</div>
-`;
diff --git a/src/form/inputs/DateField/DateField.test.tsx b/src/form/inputs/DateField/DateField.test.tsx
deleted file mode 100644
index 72f859769..000000000
--- a/src/form/inputs/DateField/DateField.test.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import { withForm } from '../../../test'
-
-import { DateField, format, parse } from './DateField'
-
-it('should be rendered correctly', () => {
-  const { container } = render(
-    withForm(
-      <DateField
-        label='Date test'
-        name='test'
-        disabled={false}
-        calendarProps={{ initialVisibleDate: new Date('2018-10-01') }}
-      />
-    )
-  )
-  expect(container).toMatchSnapshot()
-})
-
-describe('parse', () => {
-  it('should parse date to ISO string (date only)', () => {
-    expect(parse(null)).toEqual(null)
-    expect(parse(new Date('0001-01-02'))).toEqual('0001-01-02')
-    expect(parse(new Date('2018-10-26T12:34:12'))).toEqual('2018-10-26')
-  })
-})
-
-describe('format', () => {
-  it('should format ISO string (date only) from store to Date', () => {
-    expect(format(null)).toEqual(null)
-    expect(format('')).toEqual(null)
-    expect(format('foo')).toEqual(null)
-    expect(format('2004-1-1')).toEqual(new Date('2004-01-01'))
-    expect(format('2004-04-20')).toEqual(new Date('2004-04-20'))
-    expect(format('2010-01-01T00:00:00')).toEqual(new Date('2010-01-01'))
-    expect(format('2010-01-01T23:59:59')).toEqual(new Date('2010-01-01'))
-  })
-})
diff --git a/src/form/inputs/DateField/__snapshots__/DateField.test.tsx.snap b/src/form/inputs/DateField/__snapshots__/DateField.test.tsx.snap
deleted file mode 100644
index c6c2bf408..000000000
--- a/src/form/inputs/DateField/__snapshots__/DateField.test.tsx.snap
+++ /dev/null
@@ -1,930 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should be rendered correctly 1`] = `
-.emotion-0 {
-  font-weight: bold;
-  display: block;
-  margin-bottom: 0.25rem;
-  line-height: 20px;
-}
-
-.emotion-6 {
-  display: block;
-}
-
-.emotion-5 {
-  position: relative;
-}
-
-.emotion-5 input {
-  padding-right: 3rem;
-}
-
-.emotion-4 {
-  position: absolute;
-  background-color: #F0F0F5;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding: 0.25rem;
-  width: 2.5rem;
-  top: 1px;
-  bottom: 1px;
-  right: 1px;
-}
-
-.emotion-1 {
-  background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
-  border-radius: 2px;
-  color: #3A3A47;
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1rem;
-  padding: calc(0.5rem - 1px) 0.5rem;
-  width: 100%;
-  -webkit-transition-property: box-shadow;
-  transition-property: box-shadow;
-  -webkit-transition-duration: .2s;
-  transition-duration: .2s;
-}
-
-.emotion-1[type="search"]::-webkit-search-decoration {
-  display: none;
-}
-
-.emotion-1[type="search"]::-webkit-search-cancel-button {
-  display: none;
-}
-
-.emotion-1[type="search"]::-webkit-search-results-button {
-  display: none;
-}
-
-.emotion-1[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-
-.emotion-1:required {
-  box-shadow: none;
-}
-
-.emotion-1::-webkit-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-1::-moz-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-1:-ms-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-1::placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-1:disabled {
-  border-color: #D3D4DD;
-  background-color: #F0F0F5;
-}
-
-.emotion-1:not(:disabled):hover {
-  border-color: #8F8FA2;
-}
-
-.emotion-1:not(:disabled):focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
-}
-
-.emotion-1:not(:disabled):active {
-  border-color: #0069D0;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-}
-
-.emotion-3 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  border-radius: inherit;
-}
-
-.emotion-3 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-3:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-3:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-3:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
-.emotion-3:focus {
-  box-shadow: none;
-}
-
-.emotion-2 {
-  fill: currentColor;
-  font-size: 1.5rem;
-}
-
-.emotion-64 {
-  -webkit-transition: opacity .2s;
-  transition: opacity .2s;
-  z-index: 1200;
-  padding: 0rem;
-  visibility: hidden;
-  opacity: 0;
-}
-
-.emotion-63 {
-  background: #FFFFFF;
-  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2),0 1px 10px 0 rgba(0,0,0,0.12),0 4px 5px 0 rgba(0,0,0,0.14);
-  border-radius: 2px;
-  padding: 0.5rem .25rem .25rem .25rem;
-  outline: none;
-}
-
-.emotion-62 {
-  width: 288px;
-}
-
-.emotion-9 {
-  margin-bottom: 0rem;
-  margin-top: 0rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-  display: inline-block;
-}
-
-.emotion-9:first-of-type {
-  margin-left: 0;
-}
-
-.emotion-9:last-of-type {
-  margin-right: 0;
-}
-
-.emotion-9:empty {
-  display: none;
-}
-
-.emotion-25 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  margin-bottom: 0.5rem;
-  font-weight: bold;
-}
-
-.emotion-14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-8 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-}
-
-.emotion-8 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-8:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-8:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-8:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
-.emotion-61 {
-  border-collapse: collapse;
-  text-align: center;
-  line-height: 1.5rem;
-  width: 100%;
-}
-
-.emotion-61 th {
-  width: 2rem;
-  padding: 0.25rem 0;
-}
-
-.emotion-27 {
-  width: 2rem;
-  padding: 0.25rem 0;
-  display: inline-block;
-  border-radius: 50%;
-}
-
-.emotion-27:hover {
-  cursor: pointer;
-  background: #F0F0F5;
-}
-
-.emotion-26 {
-  width: 2rem;
-  padding: 0.25rem 0;
-  display: inline-block;
-  border-radius: 50%;
-  color: #AAAAB9;
-}
-
-.emotion-26:hover {
-  cursor: pointer;
-  background: #F0F0F5;
-}
-
-<div>
-  <div
-    data-name="test"
-  >
-    <label
-      class="emotion-0"
-    >
-      Date test
-    </label>
-    <div>
-      <div
-        class="emotion-6"
-      >
-        <div
-          class="emotion-6"
-        >
-          <div
-            class="emotion-5"
-          >
-            <input
-              aria-label="Date test"
-              autocomplete="off"
-              class="emotion-1"
-              name="test"
-              placeholder="dd/mm/yyyy"
-              type="text"
-              value=""
-            />
-            <span
-              class="emotion-4"
-            >
-              <button
-                class="emotion-3"
-                tabindex="-1"
-                type="button"
-              >
-                <span>
-                  <svg
-                    aria-hidden="true"
-                    class="emotion-2"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                  >
-                    <defs>
-                      <path
-                        d="M6 4h1V3c-.002-.667.33-1 1-1 .67 0 1.004.333 1.004 1v1H15V2.941c0-.627.333-.941 1-.941s1 .314 1 .941V4h1c1.333 0 2 .667 2 2v14c0 1.333-.667 2-2 2H6c-1.333 0-2-.667-2-2V6.004C4 4.668 4.667 4 6 4zm0 16h12V10H6v10zM6 6v2h12V6H6zm3 8c-.667.001-1-.332-1-1 0-.668.335-1.001 1.002-1H10c.667 0 1 .333 1 1s-.333 1-1 1H9zm5 0c-.667.001-1-.332-1-1 0-.668.335-1.001 1.002-1H15c.667 0 1 .333 1 1s-.333 1-1 1h-1zm-5 4c-.667.001-1-.332-1-1 0-.668.335-1.001 1.002-1H10c.667 0 1 .333 1 1s-.333 1-1 1H9zm5 0c-.667.001-1-.332-1-1 0-.668.335-1.001 1.002-1H15c.667 0 1 .333 1 1s-.333 1-1 1h-1z"
-                        id="calendar-outline_svg__a"
-                      />
-                    </defs>
-                    <use
-                      xlink:href="#calendar-outline_svg__a"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          class="emotion-64"
-          data-visible="false"
-          style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
-        >
-          <div
-            class="emotion-63"
-            tabindex="-1"
-          >
-            <div
-              class="emotion-62"
-            >
-              <div
-                class="emotion-25"
-              >
-                <div
-                  class="emotion-9"
-                >
-                  <div
-                    class="emotion-14"
-                  >
-                    <div
-                      class="emotion-9"
-                    >
-                      <button
-                        class="emotion-8"
-                        tabindex="-1"
-                        title="Previous month"
-                        type="button"
-                      >
-                        <span>
-                          <svg
-                            aria-hidden="true"
-                            class="emotion-2"
-                            height="1em"
-                            role="img"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                          >
-                            <path
-                              d="M14.707 16.294a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5.001-5.001a1 1 0 0 1 1.414 1.414l-4.294 4.294 4.293 4.293z"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                    </div>
-                    <div
-                      class="emotion-9"
-                    >
-                      Oct
-                    </div>
-                    <div
-                      class="emotion-9"
-                    >
-                      <button
-                        class="emotion-8"
-                        tabindex="-1"
-                        title="Next month"
-                        type="button"
-                      >
-                        <span>
-                          <svg
-                            aria-hidden="true"
-                            class="emotion-2"
-                            height="1em"
-                            role="img"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                          >
-                            <path
-                              d="M8.294 7.707a1 1 0 1 1 1.414-1.414l5 5a1 1 0 0 1 0 1.414l-5 5.001a1 1 0 0 1-1.415-1.414L12.587 12 8.294 7.707z"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="emotion-9"
-                >
-                  <div
-                    class="emotion-14"
-                  >
-                    <div
-                      class="emotion-9"
-                    >
-                      <button
-                        class="emotion-8"
-                        tabindex="-1"
-                        title="Previous year"
-                        type="button"
-                      >
-                        <span>
-                          <svg
-                            aria-hidden="true"
-                            class="emotion-2"
-                            height="1em"
-                            role="img"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                          >
-                            <path
-                              d="M14.707 16.294a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5.001-5.001a1 1 0 0 1 1.414 1.414l-4.294 4.294 4.293 4.293z"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                    </div>
-                    <div
-                      class="emotion-9"
-                    >
-                      2018
-                    </div>
-                    <div
-                      class="emotion-9"
-                    >
-                      <button
-                        class="emotion-8"
-                        tabindex="-1"
-                        title="Next year"
-                        type="button"
-                      >
-                        <span>
-                          <svg
-                            aria-hidden="true"
-                            class="emotion-2"
-                            height="1em"
-                            role="img"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                          >
-                            <path
-                              d="M8.294 7.707a1 1 0 1 1 1.414-1.414l5 5a1 1 0 0 1 0 1.414l-5 5.001a1 1 0 0 1-1.415-1.414L12.587 12 8.294 7.707z"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <table
-                class="emotion-61"
-              >
-                <thead>
-                  <tr>
-                    <th>
-                      S
-                    </th>
-                    <th>
-                      M
-                    </th>
-                    <th>
-                      T
-                    </th>
-                    <th>
-                      W
-                    </th>
-                    <th>
-                      T
-                    </th>
-                    <th>
-                      F
-                    </th>
-                    <th>
-                      S
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td
-                      data-date="2018-09-30"
-                    >
-                      <span
-                        class="emotion-26"
-                        role="button"
-                      >
-                        30
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-01"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        01
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-02"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        02
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-03"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        03
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-04"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        04
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-05"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        05
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-06"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        06
-                      </span>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td
-                      data-date="2018-10-07"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        07
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-08"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        08
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-09"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        09
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-10"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        10
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-11"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        11
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-12"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        12
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-13"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        13
-                      </span>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td
-                      data-date="2018-10-14"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        14
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-15"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        15
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-16"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        16
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-17"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        17
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-18"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        18
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-19"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        19
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-20"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        20
-                      </span>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td
-                      data-date="2018-10-21"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        21
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-22"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        22
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-23"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        23
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-24"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        24
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-25"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        25
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-26"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        26
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-27"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        27
-                      </span>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td
-                      data-date="2018-10-28"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        28
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-29"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        29
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-30"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        30
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-10-31"
-                    >
-                      <span
-                        class="emotion-27"
-                        role="button"
-                      >
-                        31
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-11-01"
-                    >
-                      <span
-                        class="emotion-26"
-                        role="button"
-                      >
-                        01
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-11-02"
-                    >
-                      <span
-                        class="emotion-26"
-                        role="button"
-                      >
-                        02
-                      </span>
-                    </td>
-                    <td
-                      data-date="2018-11-03"
-                    >
-                      <span
-                        class="emotion-26"
-                        role="button"
-                      >
-                        03
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/form/inputs/HiddenField/HiddenField.test.tsx b/src/form/inputs/HiddenField/HiddenField.test.tsx
deleted file mode 100644
index d12777658..000000000
--- a/src/form/inputs/HiddenField/HiddenField.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import { withForm } from '../../../test'
-
-import { HiddenField } from './HiddenField'
-
-describe('HiddenField', () => {
-  it('should be rendered correctly', () => {
-    const { container } = render(withForm(<HiddenField name='test' />))
-    expect(container).toMatchSnapshot()
-  })
-})
diff --git a/src/form/inputs/HiddenField/__snapshots__/HiddenField.test.tsx.snap b/src/form/inputs/HiddenField/__snapshots__/HiddenField.test.tsx.snap
deleted file mode 100644
index e2fbd1fbf..000000000
--- a/src/form/inputs/HiddenField/__snapshots__/HiddenField.test.tsx.snap
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HiddenField should be rendered correctly 1`] = `
-<div>
-  <div
-    data-name="test"
-  >
-    <input
-      name="test"
-      type="hidden"
-      value=""
-    />
-  </div>
-</div>
-`;
diff --git a/src/form/inputs/MaskedField/MaskedField.test.tsx b/src/form/inputs/MaskedField/MaskedField.test.tsx
deleted file mode 100644
index aef6ea919..000000000
--- a/src/form/inputs/MaskedField/MaskedField.test.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import { withForm } from '../../../test'
-
-import { MaskedField } from './MaskedField'
-
-it('render correctly', () => {
-  const { container } = render(
-    withForm(<MaskedField mask={['(', /\w/, ')']} label='Mask test' name='test' placeholder='Test' disabled={false} />)
-  )
-  expect(container).toMatchSnapshot()
-})
-
-it('render with icon', () => {
-  const { container } = render(
-    withForm(<MaskedField mask={['(', /\w/, ')']} name='test' icon='zoomOutline' onIconClick={jest.fn()} />)
-  )
-  expect(container).toMatchSnapshot()
-})
diff --git a/src/form/inputs/MaskedField/__snapshots__/MaskedField.test.tsx.snap b/src/form/inputs/MaskedField/__snapshots__/MaskedField.test.tsx.snap
deleted file mode 100644
index 6f627f81f..000000000
--- a/src/form/inputs/MaskedField/__snapshots__/MaskedField.test.tsx.snap
+++ /dev/null
@@ -1,314 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`render correctly 1`] = `
-.emotion-0 {
-  font-weight: bold;
-  display: block;
-  margin-bottom: 0.25rem;
-  line-height: 20px;
-}
-
-.emotion-2 {
-  position: relative;
-}
-
-.emotion-1 {
-  background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
-  border-radius: 2px;
-  color: #3A3A47;
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1rem;
-  padding: calc(0.5rem - 1px) 0.5rem;
-  width: 100%;
-  -webkit-transition-property: box-shadow;
-  transition-property: box-shadow;
-  -webkit-transition-duration: .2s;
-  transition-duration: .2s;
-}
-
-.emotion-1[type="search"]::-webkit-search-decoration {
-  display: none;
-}
-
-.emotion-1[type="search"]::-webkit-search-cancel-button {
-  display: none;
-}
-
-.emotion-1[type="search"]::-webkit-search-results-button {
-  display: none;
-}
-
-.emotion-1[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-
-.emotion-1:required {
-  box-shadow: none;
-}
-
-.emotion-1::-webkit-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-1::-moz-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-1:-ms-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-1::placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-1:disabled {
-  border-color: #D3D4DD;
-  background-color: #F0F0F5;
-}
-
-.emotion-1:not(:disabled):hover {
-  border-color: #8F8FA2;
-}
-
-.emotion-1:not(:disabled):focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
-}
-
-.emotion-1:not(:disabled):active {
-  border-color: #0069D0;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-}
-
-<div>
-  <div
-    data-name="test"
-  >
-    <label
-      class="emotion-0"
-    >
-      Mask test
-    </label>
-    <div
-      class="emotion-2"
-    >
-      <input
-        aria-label="Mask test"
-        class="emotion-1"
-        name="test"
-        placeholder="Test"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`render with icon 1`] = `
-.emotion-3 {
-  position: absolute;
-  background-color: #F0F0F5;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding: 0.25rem;
-  width: 2.5rem;
-  top: 1px;
-  bottom: 1px;
-  right: 1px;
-}
-
-.emotion-0 {
-  background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
-  border-radius: 2px;
-  color: #3A3A47;
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1rem;
-  padding: calc(0.5rem - 1px) 0.5rem;
-  width: 100%;
-  -webkit-transition-property: box-shadow;
-  transition-property: box-shadow;
-  -webkit-transition-duration: .2s;
-  transition-duration: .2s;
-}
-
-.emotion-0[type="search"]::-webkit-search-decoration {
-  display: none;
-}
-
-.emotion-0[type="search"]::-webkit-search-cancel-button {
-  display: none;
-}
-
-.emotion-0[type="search"]::-webkit-search-results-button {
-  display: none;
-}
-
-.emotion-0[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-
-.emotion-0:required {
-  box-shadow: none;
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0::-moz-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0::placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0:disabled {
-  border-color: #D3D4DD;
-  background-color: #F0F0F5;
-}
-
-.emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
-}
-
-.emotion-0:not(:disabled):focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
-}
-
-.emotion-0:not(:disabled):active {
-  border-color: #0069D0;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-}
-
-.emotion-4 {
-  position: relative;
-}
-
-.emotion-4 input {
-  padding-right: 3rem;
-}
-
-.emotion-2 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  border-radius: inherit;
-}
-
-.emotion-2 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-2:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-2:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-2:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
-.emotion-2:focus {
-  box-shadow: none;
-}
-
-.emotion-1 {
-  fill: currentColor;
-  font-size: 1.5rem;
-}
-
-<div>
-  <div
-    data-name="test"
-  >
-    <div
-      class="emotion-4"
-    >
-      <input
-        class="emotion-0"
-        name="test"
-        type="text"
-        value=""
-      />
-      <span
-        class="emotion-3"
-      >
-        <button
-          class="emotion-2"
-          tabindex="-1"
-          type="button"
-        >
-          <span>
-            <svg
-              aria-hidden="true"
-              class="emotion-1"
-              height="1em"
-              role="img"
-              viewBox="0 0 24 24"
-              width="1em"
-            >
-              <path
-                d="M14.605 13.194l7 6.998a1 1 0 0 1-1.415 1.414l-6.997-7a7 7 0 1 1 1.412-1.412zM9 14A5 5 0 1 0 9 4a5 5 0 0 0 0 10z"
-              />
-            </svg>
-          </span>
-        </button>
-      </span>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/form/inputs/MonthField/MonthField.test.tsx b/src/form/inputs/MonthField/MonthField.test.tsx
deleted file mode 100644
index 373d7e687..000000000
--- a/src/form/inputs/MonthField/MonthField.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import { withForm } from '../../../test'
-
-import { MonthField } from './MonthField'
-
-describe('MonthField', () => {
-  it('should render correctly', () => {
-    const { container } = render(withForm(<MonthField onChange={jest.fn()} name='month' />))
-    expect(container).toMatchSnapshot()
-  })
-})
diff --git a/src/form/inputs/MonthField/__snapshots__/MonthField.test.tsx.snap b/src/form/inputs/MonthField/__snapshots__/MonthField.test.tsx.snap
deleted file mode 100644
index f722b7f16..000000000
--- a/src/form/inputs/MonthField/__snapshots__/MonthField.test.tsx.snap
+++ /dev/null
@@ -1,600 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MonthField should render correctly 1`] = `
-.emotion-5 {
-  display: block;
-}
-
-.emotion-4 {
-  position: relative;
-}
-
-.emotion-4 input {
-  padding-right: 3rem;
-}
-
-.emotion-3 {
-  position: absolute;
-  background-color: #F0F0F5;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding: 0.25rem;
-  width: 2.5rem;
-  top: 1px;
-  bottom: 1px;
-  right: 1px;
-}
-
-.emotion-0 {
-  background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
-  border-radius: 2px;
-  color: #3A3A47;
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1rem;
-  padding: calc(0.5rem - 1px) 0.5rem;
-  width: 100%;
-  -webkit-transition-property: box-shadow;
-  transition-property: box-shadow;
-  -webkit-transition-duration: .2s;
-  transition-duration: .2s;
-}
-
-.emotion-0[type="search"]::-webkit-search-decoration {
-  display: none;
-}
-
-.emotion-0[type="search"]::-webkit-search-cancel-button {
-  display: none;
-}
-
-.emotion-0[type="search"]::-webkit-search-results-button {
-  display: none;
-}
-
-.emotion-0[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-
-.emotion-0:required {
-  box-shadow: none;
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0::-moz-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0::placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0:disabled {
-  border-color: #D3D4DD;
-  background-color: #F0F0F5;
-}
-
-.emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
-}
-
-.emotion-0:not(:disabled):focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
-}
-
-.emotion-0:not(:disabled):active {
-  border-color: #0069D0;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-}
-
-.emotion-2 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  border-radius: inherit;
-}
-
-.emotion-2 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-2:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-2:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-2:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
-.emotion-2:focus {
-  box-shadow: none;
-}
-
-.emotion-1 {
-  fill: currentColor;
-  font-size: 1.5rem;
-}
-
-.emotion-40 {
-  -webkit-transition: opacity .2s;
-  transition: opacity .2s;
-  z-index: 1200;
-  padding: 0rem;
-  visibility: hidden;
-  opacity: 0;
-}
-
-.emotion-39 {
-  background-color: #FFFFFF;
-  display: inline-block;
-  padding: 1rem;
-  border: 1px solid #D3D4DD;
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 1px -2px rgba(0,0,0,0.12),0 2px 2px 0 rgba(0,0,0,0.14);
-  border-radius: 2px;
-}
-
-.emotion-38 {
-  margin: -0.25rem -0.25rem;
-  display: grid;
-  grid-template-columns: repeat(3,1fr);
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-8 {
-  text-align: center;
-  margin: 0.25rem 0.25rem;
-}
-
-.emotion-7 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-}
-
-.emotion-7 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-7:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-7:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-7:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
-.emotion-9 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  font-weight: bold;
-}
-
-.emotion-14 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.75rem - 1px) 2.5rem;
-  padding: calc(0.25rem - 1px) 1rem;
-  -webkit-transition-property: background;
-  transition-property: background;
-  min-width: 70px;
-}
-
-.emotion-14 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-14:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-14:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-14:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
-<div>
-  <div
-    data-name="month"
-  >
-    <div
-      class="emotion-5"
-    >
-      <div
-        class="emotion-5"
-      >
-        <div
-          class="emotion-4"
-        >
-          <input
-            class="emotion-0"
-            name="month"
-            placeholder="mm/yyyy"
-            type="text"
-            value=""
-          />
-          <span
-            class="emotion-3"
-          >
-            <button
-              class="emotion-2"
-              tabindex="-1"
-              type="button"
-            >
-              <span>
-                <svg
-                  aria-hidden="true"
-                  class="emotion-1"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <defs>
-                    <path
-                      d="M6 4h1V3c-.002-.667.33-1 1-1 .67 0 1.004.333 1.004 1v1H15V2.941c0-.627.333-.941 1-.941s1 .314 1 .941V4h1c1.333 0 2 .667 2 2v14c0 1.333-.667 2-2 2H6c-1.333 0-2-.667-2-2V6.004C4 4.668 4.667 4 6 4zm0 16h12V10H6v10zM6 6v2h12V6H6zm3 8c-.667.001-1-.332-1-1 0-.668.335-1.001 1.002-1H10c.667 0 1 .333 1 1s-.333 1-1 1H9zm5 0c-.667.001-1-.332-1-1 0-.668.335-1.001 1.002-1H15c.667 0 1 .333 1 1s-.333 1-1 1h-1zm-5 4c-.667.001-1-.332-1-1 0-.668.335-1.001 1.002-1H10c.667 0 1 .333 1 1s-.333 1-1 1H9zm5 0c-.667.001-1-.332-1-1 0-.668.335-1.001 1.002-1H15c.667 0 1 .333 1 1s-.333 1-1 1h-1z"
-                      id="calendar-outline_svg__a"
-                    />
-                  </defs>
-                  <use
-                    xlink:href="#calendar-outline_svg__a"
-                  />
-                </svg>
-              </span>
-            </button>
-          </span>
-        </div>
-      </div>
-      <div
-        class="emotion-40"
-        data-visible="false"
-        style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
-      >
-        <div
-          class="emotion-39"
-        >
-          <div
-            class="emotion-38"
-          >
-            <div
-              class="emotion-8"
-            >
-              <button
-                class="emotion-7"
-                title="Previous year"
-                type="button"
-              >
-                <span>
-                  <svg
-                    aria-hidden="true"
-                    class="emotion-1"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                  >
-                    <path
-                      d="M14.707 16.294a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5.001-5.001a1 1 0 0 1 1.414 1.414l-4.294 4.294 4.293 4.293z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-            <div
-              class="emotion-8"
-            >
-              <span
-                class="emotion-9"
-              >
-                2019
-              </span>
-            </div>
-            <div
-              class="emotion-8"
-            >
-              <button
-                class="emotion-7"
-                title="Next year"
-                type="button"
-              >
-                <span>
-                  <svg
-                    aria-hidden="true"
-                    class="emotion-1"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                  >
-                    <path
-                      d="M8.294 7.707a1 1 0 1 1 1.414-1.414l5 5a1 1 0 0 1 0 1.414l-5 5.001a1 1 0 0 1-1.415-1.414L12.587 12 8.294 7.707z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-            <div
-              class="emotion-8"
-            >
-              <button
-                class="emotion-14"
-                title="January"
-                type="button"
-              >
-                <span>
-                  Jan
-                </span>
-              </button>
-            </div>
-            <div
-              class="emotion-8"
-            >
-              <button
-                class="emotion-14"
-                title="February"
-                type="button"
-              >
-                <span>
-                  Feb
-                </span>
-              </button>
-            </div>
-            <div
-              class="emotion-8"
-            >
-              <button
-                class="emotion-14"
-                title="March"
-                type="button"
-              >
-                <span>
-                  Mar
-                </span>
-              </button>
-            </div>
-            <div
-              class="emotion-8"
-            >
-              <button
-                class="emotion-14"
-                title="April"
-                type="button"
-              >
-                <span>
-                  Apr
-                </span>
-              </button>
-            </div>
-            <div
-              class="emotion-8"
-            >
-              <button
-                class="emotion-14"
-                title="May"
-                type="button"
-              >
-                <span>
-                  May
-                </span>
-              </button>
-            </div>
-            <div
-              class="emotion-8"
-            >
-              <button
-                class="emotion-14"
-                title="June"
-                type="button"
-              >
-                <span>
-                  Jun
-                </span>
-              </button>
-            </div>
-            <div
-              class="emotion-8"
-            >
-              <button
-                class="emotion-14"
-                title="July"
-                type="button"
-              >
-                <span>
-                  Jul
-                </span>
-              </button>
-            </div>
-            <div
-              class="emotion-8"
-            >
-              <button
-                class="emotion-14"
-                title="August"
-                type="button"
-              >
-                <span>
-                  Aug
-                </span>
-              </button>
-            </div>
-            <div
-              class="emotion-8"
-            >
-              <button
-                class="emotion-14"
-                title="September"
-                type="button"
-              >
-                <span>
-                  Sep
-                </span>
-              </button>
-            </div>
-            <div
-              class="emotion-8"
-            >
-              <button
-                class="emotion-14"
-                title="October"
-                type="button"
-              >
-                <span>
-                  Oct
-                </span>
-              </button>
-            </div>
-            <div
-              class="emotion-8"
-            >
-              <button
-                class="emotion-14"
-                title="November"
-                type="button"
-              >
-                <span>
-                  Nov
-                </span>
-              </button>
-            </div>
-            <div
-              class="emotion-8"
-            >
-              <button
-                class="emotion-14"
-                title="December"
-                type="button"
-              >
-                <span>
-                  Dec
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/form/inputs/NumberField/NumberField.test.tsx b/src/form/inputs/NumberField/NumberField.test.tsx
deleted file mode 100644
index bc8191118..000000000
--- a/src/form/inputs/NumberField/NumberField.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { fireEvent, render } from '@testing-library/react'
-import React from 'react'
-
-import { withForm } from '../../../test'
-
-import { NumberField, parse } from './NumberField'
-
-describe('parse', () => {
-  it('should accept numbers only', () => {
-    expect(parse('abcdefgh999!@.a')).toEqual('999')
-  })
-})
-
-describe('Field', () => {
-  it('should render correctly', () => {
-    const { container } = render(withForm(<NumberField name='number' />))
-    expect(container).toMatchSnapshot()
-  })
-
-  it('should accept only numbers', () => {
-    const { container } = render(withForm(<NumberField name='number' />))
-    const input = container.querySelector('input')
-
-    fireEvent.change(input, { target: { value: '\'"@#$*/+./ªºabc123a!' } })
-    expect(input.getAttribute('value')).toEqual('123')
-  })
-})
diff --git a/src/form/inputs/NumberField/__snapshots__/NumberField.test.tsx.snap b/src/form/inputs/NumberField/__snapshots__/NumberField.test.tsx.snap
deleted file mode 100644
index 2ccbc5a08..000000000
--- a/src/form/inputs/NumberField/__snapshots__/NumberField.test.tsx.snap
+++ /dev/null
@@ -1,95 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Field should render correctly 1`] = `
-.emotion-1 {
-  position: relative;
-}
-
-.emotion-0 {
-  background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
-  border-radius: 2px;
-  color: #3A3A47;
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1rem;
-  padding: calc(0.5rem - 1px) 0.5rem;
-  width: 100%;
-  -webkit-transition-property: box-shadow;
-  transition-property: box-shadow;
-  -webkit-transition-duration: .2s;
-  transition-duration: .2s;
-}
-
-.emotion-0[type="search"]::-webkit-search-decoration {
-  display: none;
-}
-
-.emotion-0[type="search"]::-webkit-search-cancel-button {
-  display: none;
-}
-
-.emotion-0[type="search"]::-webkit-search-results-button {
-  display: none;
-}
-
-.emotion-0[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-
-.emotion-0:required {
-  box-shadow: none;
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0::-moz-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0::placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0:disabled {
-  border-color: #D3D4DD;
-  background-color: #F0F0F5;
-}
-
-.emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
-}
-
-.emotion-0:not(:disabled):focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
-}
-
-.emotion-0:not(:disabled):active {
-  border-color: #0069D0;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-}
-
-<div>
-  <div
-    data-name="number"
-  >
-    <div
-      class="emotion-1"
-    >
-      <input
-        class="emotion-0"
-        name="number"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/form/inputs/SelectField/SelectField.test.tsx b/src/form/inputs/SelectField/SelectField.test.tsx
deleted file mode 100644
index 79b458b42..000000000
--- a/src/form/inputs/SelectField/SelectField.test.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import { DefaultItemType } from '../../../components/Select'
-import metaPath from '../../../metaPath/metaPath'
-import { Form, FormProps } from '../../Form'
-
-import { SelectField, SelectFieldProps } from './SelectField'
-
-const items: DefaultItemType[] = [{ value: 1, label: 'Item #1' }, { value: 2, label: 'Item #2' }]
-
-const createFormAndField = (fieldProps?: Partial<SelectFieldProps>, formProps?: Partial<FormProps<any>>) => {
-  // tslint:disable jsx-no-lambda
-  return (
-    <Form
-      onSubmit={jest.fn()}
-      initialValues={{ select1: items[0] }}
-      {...formProps}
-      render={() => (
-        <SelectField
-          name='select1'
-          items={items}
-          itemToString={item => item.label}
-          itemIsEqual={(a, b) => a.value === b.value}
-          {...fieldProps}
-        />
-      )}
-    />
-  )
-}
-
-interface FormType {
-  select1: DefaultItemType
-  select2: DefaultItemType[]
-}
-
-const meta = metaPath<FormType>()
-
-it('should render correctly', () => {
-  const { container } = render(createFormAndField())
-  expect(container).toMatchSnapshot()
-})
-
-it('should render correctly when multiple', () => {
-  const { container } = render(createFormAndField({ multiple: true }, { initialValues: { select1: [items[0]] } }))
-  expect(container).toMatchSnapshot()
-})
-
-it('should accept meta path as name', () => {
-  render(createFormAndField({ name: meta.select1 }))
-  render(createFormAndField({ name: meta.select2, multiple: true }))
-})
diff --git a/src/form/inputs/SelectField/__snapshots__/SelectField.test.tsx.snap b/src/form/inputs/SelectField/__snapshots__/SelectField.test.tsx.snap
deleted file mode 100644
index c1959a44b..000000000
--- a/src/form/inputs/SelectField/__snapshots__/SelectField.test.tsx.snap
+++ /dev/null
@@ -1,472 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-.emotion-6 {
-  position: relative;
-}
-
-.emotion-6 input {
-  padding-right: 4.5rem;
-}
-
-.emotion-2 {
-  position: absolute;
-  right: 2.5rem;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  height: 100%;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  outline: 0;
-  color: #696979;
-  padding: 1px 6px;
-}
-
-.emotion-2:hover {
-  color: #D01E29;
-}
-
-.emotion-5 {
-  position: absolute;
-  background-color: #F0F0F5;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding: 0.25rem;
-  width: 2.5rem;
-  top: 1px;
-  bottom: 1px;
-  right: 1px;
-}
-
-.emotion-0 {
-  background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
-  border-radius: 2px;
-  color: #3A3A47;
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1rem;
-  padding: calc(0.5rem - 1px) 0.5rem;
-  width: 100%;
-  -webkit-transition-property: box-shadow;
-  transition-property: box-shadow;
-  -webkit-transition-duration: .2s;
-  transition-duration: .2s;
-}
-
-.emotion-0[type="search"]::-webkit-search-decoration {
-  display: none;
-}
-
-.emotion-0[type="search"]::-webkit-search-cancel-button {
-  display: none;
-}
-
-.emotion-0[type="search"]::-webkit-search-results-button {
-  display: none;
-}
-
-.emotion-0[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-
-.emotion-0:required {
-  box-shadow: none;
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0::-moz-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0::placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0:disabled {
-  border-color: #D3D4DD;
-  background-color: #F0F0F5;
-}
-
-.emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
-}
-
-.emotion-0:not(:disabled):focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
-}
-
-.emotion-0:not(:disabled):active {
-  border-color: #0069D0;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-}
-
-.emotion-1 {
-  fill: currentColor;
-  font-size: 1.5rem;
-}
-
-.emotion-4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  border-radius: inherit;
-}
-
-.emotion-4 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-4:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-4:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-4:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
-.emotion-4:focus {
-  box-shadow: none;
-}
-
-.emotion-7 {
-  position: relative;
-}
-
-<div>
-  <div
-    data-name="select1"
-  >
-    <div
-      aria-expanded="false"
-      aria-haspopup="listbox"
-      aria-labelledby="downshift-0-label"
-      class="emotion-8"
-      role="combobox"
-    >
-      <div>
-        <div
-          class="emotion-6"
-        >
-          <input
-            aria-autocomplete="list"
-            aria-labelledby="downshift-0-label"
-            autocomplete="off"
-            class="emotion-0"
-            id="downshift-0-input"
-            name="select1"
-            type="text"
-            value="Item #1"
-          />
-          <span
-            class="emotion-2"
-            role="button"
-            tabindex="-1"
-            title="Limpar"
-          >
-            <svg
-              aria-hidden="true"
-              class="emotion-1"
-              height="1em"
-              role="img"
-              viewBox="0 0 24 24"
-              width="1em"
-            >
-              <path
-                d="M8.071 6.657l4.243 4.242 4.242-4.242c.464-.48.935-.48 1.415 0s.48.95 0 1.414l-4.243 4.243 4.243 4.242c.471.472.471.943 0 1.415-.472.471-.943.471-1.415 0l-4.242-4.243L8.07 17.97c-.46.482-.932.482-1.414 0-.482-.483-.482-.954 0-1.415l4.242-4.242L6.657 8.07c-.472-.47-.472-.942 0-1.414s.943-.472 1.414 0z"
-              />
-            </svg>
-          </span>
-          <span
-            class="emotion-5"
-          >
-            <button
-              class="emotion-4"
-              tabindex="-1"
-              type="button"
-            >
-              <span>
-                <svg
-                  aria-hidden="true"
-                  class="emotion-1"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <path
-                    d="M16.294 8.294a1 1 0 1 1 1.414 1.414l-5 5a1 1 0 0 1-1.414 0l-5.001-5a1 1 0 0 1 1.414-1.415l4.294 4.294 4.293-4.293z"
-                  />
-                </svg>
-              </span>
-            </button>
-          </span>
-        </div>
-      </div>
-      <div
-        class="emotion-7"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`should render correctly when multiple 1`] = `
-.emotion-5 {
-  position: relative;
-}
-
-.emotion-4 {
-  background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
-  border-radius: 2px;
-  color: #3A3A47;
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1rem;
-  padding: calc(0.25rem - 1px) 0.25rem;
-  width: 100%;
-  -webkit-transition-property: box-shadow;
-  transition-property: box-shadow;
-  -webkit-transition-duration: .2s;
-  transition-duration: .2s;
-  cursor: text;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-4[type="search"]::-webkit-search-decoration {
-  display: none;
-}
-
-.emotion-4[type="search"]::-webkit-search-cancel-button {
-  display: none;
-}
-
-.emotion-4[type="search"]::-webkit-search-results-button {
-  display: none;
-}
-
-.emotion-4[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-
-.emotion-4:required {
-  box-shadow: none;
-}
-
-.emotion-4:hover {
-  border-color: #8F8FA2;
-}
-
-.emotion-4:active {
-  border-color: #0069D0;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-}
-
-.emotion-4:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
-}
-
-.emotion-3 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  color: #3A3A47;
-  line-height: 1rem;
-  background: #FFFFFF;
-  padding: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: 0;
-  outline: 0;
-}
-
-.emotion-3::-webkit-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-3::-moz-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-3:-ms-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-3::placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-3:disabled {
-  border-color: #D3D4DD;
-  background-color: #F0F0F5;
-}
-
-.emotion-0 {
-  padding: calc(0.125rem - 1px) 0.25rem;
-}
-
-.emotion-1 {
-  background: #F0F0F5;
-  cursor: pointer;
-  font-size: 1.25rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding: calc(0.125rem - 1px) 0;
-}
-
-.emotion-1:hover {
-  color: #D01E29;
-}
-
-.emotion-1 svg {
-  fill: currentColor;
-}
-
-.emotion-2 {
-  border: 1px solid #D3D4DD;
-  border-radius: 4px;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  font-weight: bold;
-  margin-right: 0.25rem;
-}
-
-<div>
-  <div
-    data-name="select1"
-  >
-    <div
-      aria-expanded="false"
-      aria-haspopup="listbox"
-      aria-labelledby="downshift-1-label"
-      role="combobox"
-    >
-      <div
-        class="emotion-4"
-      >
-        <span
-          class="emotion-2"
-        >
-          <span
-            class="emotion-0"
-          >
-            Item #1
-          </span>
-          <span
-            class="emotion-1"
-            title="Remove"
-          >
-            <svg
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-            >
-              <path
-                d="M8.071 6.657l4.243 4.242 4.242-4.242c.464-.48.935-.48 1.415 0s.48.95 0 1.414l-4.243 4.243 4.243 4.242c.471.472.471.943 0 1.415-.472.471-.943.471-1.415 0l-4.242-4.243L8.07 17.97c-.46.482-.932.482-1.414 0-.482-.483-.482-.954 0-1.415l4.242-4.242L6.657 8.07c-.472-.47-.472-.942 0-1.414s.943-.472 1.414 0z"
-              />
-            </svg>
-          </span>
-        </span>
-        <input
-          aria-autocomplete="list"
-          aria-labelledby="downshift-1-label"
-          autocomplete="off"
-          class="emotion-3"
-          id="downshift-1-input"
-          name="select1"
-          value=""
-        />
-      </div>
-      <div
-        class="emotion-5"
-      />
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/form/inputs/TextAreaField/TextAreaField.test.tsx b/src/form/inputs/TextAreaField/TextAreaField.test.tsx
deleted file mode 100644
index f1b54ca90..000000000
--- a/src/form/inputs/TextAreaField/TextAreaField.test.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-import { Form } from 'react-final-form'
-
-import { TextAreaField } from './TextAreaField'
-
-it('should render correctly', () => {
-  const { container } = render(
-    <Form onSubmit={jest.fn()} initialValues={{ textarea: 'Value' }}>
-      {() => <TextAreaField label='Label' name='textarea' maxLength={100} required />}
-    </Form>
-  )
-  expect(container).toMatchSnapshot()
-})
diff --git a/src/form/inputs/TextAreaField/__snapshots__/TextAreaField.test.tsx.snap b/src/form/inputs/TextAreaField/__snapshots__/TextAreaField.test.tsx.snap
deleted file mode 100644
index c649bb2ae..000000000
--- a/src/form/inputs/TextAreaField/__snapshots__/TextAreaField.test.tsx.snap
+++ /dev/null
@@ -1,127 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-.emotion-0 {
-  color: #D01E29;
-  margin-left: 0.25rem;
-}
-
-.emotion-1 {
-  font-weight: bold;
-  display: block;
-  margin-bottom: 0.25rem;
-  line-height: 20px;
-}
-
-.emotion-2 {
-  background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
-  border-radius: 2px;
-  color: #3A3A47;
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1rem;
-  padding: calc(0.5rem - 1px) 0.5rem;
-  width: 100%;
-  -webkit-transition-property: box-shadow;
-  transition-property: box-shadow;
-  -webkit-transition-duration: .2s;
-  transition-duration: .2s;
-}
-
-.emotion-2[type="search"]::-webkit-search-decoration {
-  display: none;
-}
-
-.emotion-2[type="search"]::-webkit-search-cancel-button {
-  display: none;
-}
-
-.emotion-2[type="search"]::-webkit-search-results-button {
-  display: none;
-}
-
-.emotion-2[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-
-.emotion-2:required {
-  box-shadow: none;
-}
-
-.emotion-2::-webkit-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-2::-moz-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-2:-ms-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-2::placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-2:disabled {
-  border-color: #D3D4DD;
-  background-color: #F0F0F5;
-}
-
-.emotion-2:not(:disabled):hover {
-  border-color: #8F8FA2;
-}
-
-.emotion-2:not(:disabled):focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
-}
-
-.emotion-2:not(:disabled):active {
-  border-color: #0069D0;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-}
-
-.emotion-3 {
-  text-align: right;
-}
-
-<div>
-  <div
-    data-name="textarea"
-  >
-    <label
-      class="emotion-1"
-    >
-      Label
-      <span
-        class="emotion-0"
-        title="Required field"
-      >
-        *
-      </span>
-    </label>
-    <div>
-      <textarea
-        aria-label="Label"
-        class="emotion-2"
-        maxlength="100"
-        name="textarea"
-        required=""
-      >
-        Value
-      </textarea>
-      <div
-        class="emotion-3"
-      >
-        5
-        /
-        100
-         caracteres
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/form/inputs/TextField/TextField.test.tsx b/src/form/inputs/TextField/TextField.test.tsx
deleted file mode 100644
index 2c889086b..000000000
--- a/src/form/inputs/TextField/TextField.test.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { fireEvent, render } from '@testing-library/react'
-import React from 'react'
-
-import { withForm } from '../../../test'
-import { Form } from '../../Form'
-
-import { TextField } from './TextField'
-
-it('should be rendered correctly', () => {
-  const { container } = render(withForm(<TextField name='test' placeholder='Test' maxLength={2} disabled={false} />))
-  expect(container).toMatchSnapshot()
-})
-
-it('should not include field props on rendered HTML', () => {
-  // tslint:disable jsx-no-lambda
-  const { container } = render(
-    <Form
-      render={() => (
-        <TextField
-          id='test'
-          name='test'
-          label='Test'
-          hasWrapper={true}
-          parse={jest.fn()}
-          format={jest.fn()}
-          convert={jest.fn()}
-          required
-        />
-      )}
-    />
-  )
-  expect(container).toMatchSnapshot()
-})
-
-it('should call onChange with current value', () => {
-  const change = jest.fn()
-  const { container } = render(withForm(<TextField name='test' onChange={change} />))
-  const input = container.querySelector('input')
-
-  fireEvent.change(input, { target: { value: 'foo' } })
-  expect(change).toHaveBeenCalledTimes(1)
-})
diff --git a/src/form/inputs/TextField/__snapshots__/TextField.test.tsx.snap b/src/form/inputs/TextField/__snapshots__/TextField.test.tsx.snap
deleted file mode 100644
index 765f41d38..000000000
--- a/src/form/inputs/TextField/__snapshots__/TextField.test.tsx.snap
+++ /dev/null
@@ -1,218 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should be rendered correctly 1`] = `
-.emotion-1 {
-  position: relative;
-}
-
-.emotion-0 {
-  background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
-  border-radius: 2px;
-  color: #3A3A47;
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1rem;
-  padding: calc(0.5rem - 1px) 0.5rem;
-  width: 100%;
-  -webkit-transition-property: box-shadow;
-  transition-property: box-shadow;
-  -webkit-transition-duration: .2s;
-  transition-duration: .2s;
-}
-
-.emotion-0[type="search"]::-webkit-search-decoration {
-  display: none;
-}
-
-.emotion-0[type="search"]::-webkit-search-cancel-button {
-  display: none;
-}
-
-.emotion-0[type="search"]::-webkit-search-results-button {
-  display: none;
-}
-
-.emotion-0[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-
-.emotion-0:required {
-  box-shadow: none;
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0::-moz-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0::placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-0:disabled {
-  border-color: #D3D4DD;
-  background-color: #F0F0F5;
-}
-
-.emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
-}
-
-.emotion-0:not(:disabled):focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
-}
-
-.emotion-0:not(:disabled):active {
-  border-color: #0069D0;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-}
-
-<div>
-  <div
-    data-name="test"
-  >
-    <div
-      class="emotion-1"
-    >
-      <input
-        class="emotion-0"
-        maxlength="2"
-        name="test"
-        placeholder="Test"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`should not include field props on rendered HTML 1`] = `
-.emotion-3 {
-  position: relative;
-}
-
-.emotion-2 {
-  background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
-  border-radius: 2px;
-  color: #3A3A47;
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1rem;
-  padding: calc(0.5rem - 1px) 0.5rem;
-  width: 100%;
-  -webkit-transition-property: box-shadow;
-  transition-property: box-shadow;
-  -webkit-transition-duration: .2s;
-  transition-duration: .2s;
-}
-
-.emotion-2[type="search"]::-webkit-search-decoration {
-  display: none;
-}
-
-.emotion-2[type="search"]::-webkit-search-cancel-button {
-  display: none;
-}
-
-.emotion-2[type="search"]::-webkit-search-results-button {
-  display: none;
-}
-
-.emotion-2[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-
-.emotion-2:required {
-  box-shadow: none;
-}
-
-.emotion-2::-webkit-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-2::-moz-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-2:-ms-input-placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-2::placeholder {
-  color: #AAAAB9;
-}
-
-.emotion-2:disabled {
-  border-color: #D3D4DD;
-  background-color: #F0F0F5;
-}
-
-.emotion-2:not(:disabled):hover {
-  border-color: #8F8FA2;
-}
-
-.emotion-2:not(:disabled):focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
-}
-
-.emotion-2:not(:disabled):active {
-  border-color: #0069D0;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-}
-
-.emotion-0 {
-  color: #D01E29;
-  margin-left: 0.25rem;
-}
-
-.emotion-1 {
-  font-weight: bold;
-  display: block;
-  margin-bottom: 0.25rem;
-  line-height: 20px;
-}
-
-<div>
-  <div
-    data-name="test"
-  >
-    <label
-      class="emotion-1"
-      for="test"
-    >
-      Test
-      <span
-        class="emotion-0"
-        title="Required field"
-      >
-        *
-      </span>
-    </label>
-    <div
-      class="emotion-3"
-    >
-      <input
-        aria-label="Test"
-        class="emotion-2"
-        id="test"
-        name="test"
-        required=""
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/form/inputs/TimeField/TimeField.test.tsx b/src/form/inputs/TimeField/TimeField.test.tsx
deleted file mode 100644
index 0e7a21b83..000000000
--- a/src/form/inputs/TimeField/TimeField.test.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-import { Form } from 'react-final-form'
-
-import { TimeField } from './TimeField'
-
-it('TimeField should parse hh:mm:ss to hh:mm', () => {
-  const timeField = () => {
-    return <TimeField name='test' label='Test Label' />
-  }
-  const { container } = render(<Form render={timeField} onSubmit={jest.fn()} initialValues={{ test: '05:30:55' }} />)
-
-  expect(container.querySelector('input').getAttribute('value')).toEqual('05:30')
-})
diff --git a/src/test/index.tsx b/src/test/index.tsx
deleted file mode 100644
index 880661916..000000000
--- a/src/test/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { Form } from 'react-final-form'
-
-/**
- * Wraps the component with react-final-form's <Form />
- *
- * @param node Component to be wrapped.
- */
-export const withForm = (node: React.ReactNode) => {
-  const onSubmit = () => undefined
-  const render = () => node
-  return <Form render={render} onSubmit={onSubmit} />
-}