Repository: laboratoriobridge/bold
Pull request #403 (2019-05-31 20:02:29)

Remove react-router dependency and companion components

codecov-io: # [Codecov](https://codecov.io/gh/laboratoriobridge/bold/pull/403?src=pr&el=h1) Report
> Merging [#403](https://codecov.io/gh/laboratoriobridge/bold/pull/403?src=pr&el=desc) into [master](https://codecov.io/gh/laboratoriobridge/bold/commit/f22c17d9f9ae95f61c7fb1708fd9b0311f680370?src=pr&el=desc) will **increase** coverage by `0.17%`.
> The diff coverage is `100%`.

[![Impacted file tree graph](https://codecov.io/gh/laboratoriobridge/bold/pull/403/graphs/tree.svg?width=650&token=HXyupTWjcw&height=150&src=pr)](https://codecov.io/gh/laboratoriobridge/bold/pull/403?src=pr&el=tree)

```diff
@@            Coverage Diff            @@
##           master    #403      +/-   ##
=========================================
+ Coverage   96.42%   96.6%   +0.17%     
=========================================
  Files         421     413       -8     
  Lines        3361    3243     -118     
  Branches      371     363       -8     
=========================================
- Hits         3241    3133     -108     
+ Misses         98      91       -7     
+ Partials       22      19       -3
```


| [Impacted Files](https://codecov.io/gh/laboratoriobridge/bold/pull/403?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [src/test/index.tsx](https://codecov.io/gh/laboratoriobridge/bold/pull/403/diff?src=pr&el=tree#diff-c3JjL3Rlc3QvaW5kZXgudHN4) | `100% <ø> (ø)` | :arrow_up: |
| [src/components/form/finalForm/Form/Form.tsx](https://codecov.io/gh/laboratoriobridge/bold/pull/403/diff?src=pr&el=tree#diff-c3JjL2NvbXBvbmVudHMvZm9ybS9maW5hbEZvcm0vRm9ybS9Gb3JtLnRzeA==) | `93.87% <ø> (+1.72%)` | :arrow_up: |
| [.../components/elements/FileUploader/FileUploader.tsx](https://codecov.io/gh/laboratoriobridge/bold/pull/403/diff?src=pr&el=tree#diff-c3JjL2NvbXBvbmVudHMvZWxlbWVudHMvRmlsZVVwbG9hZGVyL0ZpbGVVcGxvYWRlci50c3g=) | `94.73% <ø> (ø)` | :arrow_up: |
| [src/styles/theme/createTypography.ts](https://codecov.io/gh/laboratoriobridge/bold/pull/403/diff?src=pr&el=tree#diff-c3JjL3N0eWxlcy90aGVtZS9jcmVhdGVUeXBvZ3JhcGh5LnRz) | `100% <ø> (ø)` | :arrow_up: |
| [...s/elements/MonthPicker/MonthPicker/MonthPicker.tsx](https://codecov.io/gh/laboratoriobridge/bold/pull/403/diff?src=pr&el=tree#diff-c3JjL2NvbXBvbmVudHMvZWxlbWVudHMvTW9udGhQaWNrZXIvTW9udGhQaWNrZXIvTW9udGhQaWNrZXIudHN4) | `100% <ø> (ø)` | :arrow_up: |
| [src/components/elements/Button/index.ts](https://codecov.io/gh/laboratoriobridge/bold/pull/403/diff?src=pr&el=tree#diff-c3JjL2NvbXBvbmVudHMvZWxlbWVudHMvQnV0dG9uL2luZGV4LnRz) | `100% <ø> (ø)` | :arrow_up: |
| [src/components/elements/Tabs/Tabs.tsx](https://codecov.io/gh/laboratoriobridge/bold/pull/403/diff?src=pr&el=tree#diff-c3JjL2NvbXBvbmVudHMvZWxlbWVudHMvVGFicy9UYWJzLnRzeA==) | `100% <100%> (ø)` | :arrow_up: |
| [src/components/elements/Breadcrumb/Breadcrumbs.tsx](https://codecov.io/gh/laboratoriobridge/bold/pull/403/diff?src=pr&el=tree#diff-c3JjL2NvbXBvbmVudHMvZWxlbWVudHMvQnJlYWRjcnVtYi9CcmVhZGNydW1icy50c3g=) | `100% <100%> (ø)` | |
| [src/components/elements/textual/Text/Text.tsx](https://codecov.io/gh/laboratoriobridge/bold/pull/403/diff?src=pr&el=tree#diff-c3JjL2NvbXBvbmVudHMvZWxlbWVudHMvdGV4dHVhbC9UZXh0L1RleHQudHN4) | `100% <100%> (ø)` | :arrow_up: |
| [src/styles/theme/createPallete.ts](https://codecov.io/gh/laboratoriobridge/bold/pull/403/diff?src=pr&el=tree#diff-c3JjL3N0eWxlcy90aGVtZS9jcmVhdGVQYWxsZXRlLnRz) | `75% <100%> (+1.66%)` | :arrow_up: |
| ... and [6 more](https://codecov.io/gh/laboratoriobridge/bold/pull/403/diff?src=pr&el=tree-more) | |

------

[Continue to review full report at Codecov](https://codecov.io/gh/laboratoriobridge/bold/pull/403?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/laboratoriobridge/bold/pull/403?src=pr&el=footer). Last update [f22c17d...4f51496](https://codecov.io/gh/laboratoriobridge/bold/pull/403?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/package.json b/package.json
index d54e4524d..9d205ae7e 100644
--- a/package.json
+++ b/package.json
@@ -45,12 +45,11 @@
   },
   "peerDependencies": {
     "emotion": "^10.0.9",
-    "final-form": "^4.12.0",
+    "final-form": "^4.13.1",
     "moment": "^2.24.0",
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
-    "react-final-form": "^4.1.0",
-    "react-router-dom": "^5.0.0"
+    "react-final-form": "^6.0.1"
   },
   "dependencies": {
     "@emotion/core": "10.0.10",
@@ -89,8 +88,6 @@
     "@types/react": "16.8.19",
     "@types/react-addons-create-fragment": "0.14.19",
     "@types/react-dom": "16.8.4",
-    "@types/react-router": "5.0.1",
-    "@types/react-router-dom": "4.3.3",
     "@types/react-text-mask": "5.4.4",
     "@types/react-transition-group": "2.9.1",
     "@types/storybook__addon-a11y": "5.0.0",
@@ -127,7 +124,6 @@
     "react-final-form": "6.0.1",
     "react-ga": "2.5.7",
     "react-hooks-testing-library": "0.5.0",
-    "react-router-dom": "5.0.0",
     "react-test-renderer": "16.8.6",
     "react-testing-library": "7.0.1",
     "remark-highlight.js": "5.1.0",
@@ -143,8 +139,5 @@
     "waait": "1.0.4",
     "webpack": "4.32.2",
     "webpack-cli": "3.3.2"
-  },
-  "resolutions": {
-    "@types/react": "16.8.19"
   }
 }
diff --git a/site/components/Page.tsx b/site/components/Page.tsx
index 4f364db40..ff8ce5041 100644
--- a/site/components/Page.tsx
+++ b/site/components/Page.tsx
@@ -16,7 +16,7 @@ export function Page(props: any) {
       <PageContainer>
         <main className={classes.main}>
           {parent && (
-            <Text id='page-parent-title' weight='bold'>
+            <Text id='page-parent-title' fontWeight='bold'>
               {parent.title}
             </Text>
           )}
diff --git a/site/pages/components/breadcrumb/breadcrumb.demo.tsx b/site/pages/components/breadcrumb/breadcrumb.demo.tsx
index 9880dff7a..d39aeca46 100644
--- a/site/pages/components/breadcrumb/breadcrumb.demo.tsx
+++ b/site/pages/components/breadcrumb/breadcrumb.demo.tsx
@@ -1,18 +1,21 @@
-import { MemoryRouter } from 'react-router'
-
-import { Breadcrumb, BreadcrumbNav, BreadcrumbProvider } from '../../../../lib'
+import { Breadcrumbs, Link } from '../../../../lib'
 
 function BreadcrumbDemo() {
   return (
-    <MemoryRouter>
-      <BreadcrumbProvider>
-        <Breadcrumb title='First level' />
-        <Breadcrumb title='Second level' to='/second/' />
-        <Breadcrumb title='Third level' to='/second/third/' />
-        <Breadcrumb title='Fourth level' to='/second/third/fourth/' />
-        <BreadcrumbNav />
-      </BreadcrumbProvider>
-    </MemoryRouter>
+    <Breadcrumbs>
+      <Link color='inherit' textDecoration='none' href='/'>
+        First level
+      </Link>
+      <Link color='inherit' textDecoration='none' href='/second/'>
+        Second level
+      </Link>
+      <Link color='inherit' textDecoration='none' href='/second/third/'>
+        Third level
+      </Link>
+      <Link color='inherit' textDecoration='none' href='/second/third/fourth/'>
+        Fourth level
+      </Link>
+    </Breadcrumbs>
   )
 }
 
diff --git a/site/pages/components/tabs/Tab.demo.tsx b/site/pages/components/tabs/Tab.demo.tsx
index 745986c22..14b1e9bdf 100644
--- a/site/pages/components/tabs/Tab.demo.tsx
+++ b/site/pages/components/tabs/Tab.demo.tsx
@@ -1,18 +1,17 @@
-import { MemoryRouter } from 'react-router'
-
-import { TabLink, Tabs } from '../../../../lib'
+import { TabItem, Tabs } from '../../../../lib'
 
 function TabEx() {
   return (
-    <MemoryRouter initialEntries={['/test-1']} initialIndex={0}>
-      <Tabs>
-        <TabLink to='/test-1'>First item</TabLink>
-        <TabLink to='/test-2'>Second item</TabLink>
-        <TabLink to='/test-5' disabled>
-          Disabled item
-        </TabLink>
-      </Tabs>
-    </MemoryRouter>
+    <Tabs>
+      <TabItem onClick={console.log}>First item</TabItem>
+      <TabItem onClick={console.log} active>
+        Active item
+      </TabItem>
+      <TabItem onClick={console.log}>Third item</TabItem>
+      <TabItem onClick={console.log} disabled>
+        Disabled item
+      </TabItem>
+    </Tabs>
   )
 }
 
diff --git a/site/pages/resources.tsx b/site/pages/resources.tsx
index 173765d5d..b242e4fa8 100644
--- a/site/pages/resources.tsx
+++ b/site/pages/resources.tsx
@@ -20,10 +20,10 @@ function Resources() {
         <Cell>
           <VFlow vSpacing={0.5}>
             <div>
-              <Text tag='p' weight='bold' size={1}>
+              <Text tag='p' fontWeight='bold' fontSize={1}>
                 Bold Design Kit
               </Text>
-              <Text tag='p' size={1}>
+              <Text tag='p' fontSize={1}>
                 Sketch symbols, visual styles and patterns.
               </Text>
             </div>
diff --git a/src/components/elements/Breadcrumb/Breadcrumb.tsx b/src/components/elements/Breadcrumb/Breadcrumb.tsx
deleted file mode 100644
index 4e0c029ba..000000000
--- a/src/components/elements/Breadcrumb/Breadcrumb.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useContext, useEffect, useRef } from 'react'
-
-import { useRouter } from '../../../hooks/useRouter'
-import { randomStr } from '../../../util/string'
-
-import { BreadcrumbContext } from './BreadcrumbContext'
-import { BreadcrumbEntry } from './BreadcrumbStore'
-
-export interface BreadcrumbProps extends Pick<BreadcrumbEntry, 'title' | 'to'> {}
-
-export function Breadcrumb(props: BreadcrumbProps) {
-  const { title, to } = props
-  const { match } = useRouter()
-  const store = useContext(BreadcrumbContext)
-
-  const entry = useRef({
-    key: randomStr(),
-    title,
-    to: to || match.url,
-  })
-
-  useEffect(() => {
-    store.push(entry.current)
-    return () => store.pop(entry.current)
-  }, [])
-
-  return null
-}
diff --git a/src/components/elements/Breadcrumb/BreadcrumbContext.tsx b/src/components/elements/Breadcrumb/BreadcrumbContext.tsx
deleted file mode 100644
index bac5be476..000000000
--- a/src/components/elements/Breadcrumb/BreadcrumbContext.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-
-import { BreadcrumbStore } from './BreadcrumbStore'
-
-const defaultStore = new BreadcrumbStore()
-
-export const BreadcrumbContext = React.createContext<BreadcrumbStore>(defaultStore)
-
-export const BreadcrumbConsumer = BreadcrumbContext.Consumer
-
-export interface BreadcrumbProviderProps {
-  value?: BreadcrumbStore
-  children?: React.ReactNode
-}
-
-export function BreadcrumbProvider({ value, children }: BreadcrumbProviderProps) {
-  return <BreadcrumbContext.Provider value={value}>{children}</BreadcrumbContext.Provider>
-}
-
-BreadcrumbProvider.defaultProps = {
-  value: defaultStore,
-} as Partial<BreadcrumbProviderProps>
diff --git a/src/components/elements/Breadcrumb/BreadcrumbNav.tsx b/src/components/elements/Breadcrumb/BreadcrumbNav.tsx
deleted file mode 100644
index be16fd7be..000000000
--- a/src/components/elements/Breadcrumb/BreadcrumbNav.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { CSSProperties, useContext, useEffect, useState } from 'react'
-import { Link as RouterLink } from 'react-router-dom'
-
-import { useRovingTabIndex } from '../../../hooks/useRovingTabIndex'
-import { Theme, useStyles } from '../../../styles'
-import { Icon } from '../Icon/Icon'
-import { Link } from '../Link'
-
-import { BreadcrumbContext } from './BreadcrumbContext'
-import { BreadcrumbEntry } from './BreadcrumbStore'
-
-export interface BreadcrumbNavProps {}
-
-export function BreadcrumbNav(props: BreadcrumbNavProps) {
-  const store = useContext(BreadcrumbContext)
-  const [entries, setEntries] = useState<BreadcrumbEntry[]>(store.getEntries())
-
-  const rootRef = useRovingTabIndex({
-    getItems: root => Array.from(root.querySelectorAll('a')),
-  })
-
-  useEffect(() => {
-    return store.subscribe(setEntries)
-  }, [store])
-
-  const { classes } = useStyles(createStyles)
-
-  return (
-    <nav ref={rootRef} aria-label='Breadcrumbs'>
-      <ol className={classes.list}>
-        {entries.map(({ title, to }, idx) => (
-          <li key={idx} className={classes.item}>
-            <Link component={RouterLink} style={classes.link} to={to}>
-              {title}
-            </Link>
-            {idx !== entries.length - 1 && <Icon style={classes.separator} size={1} icon='angleRight' />}
-          </li>
-        ))}
-      </ol>
-    </nav>
-  )
-}
-
-export const createStyles = (theme: Theme) => ({
-  list: {
-    listStyle: 'none',
-    padding: 0,
-    margin: 0,
-  } as CSSProperties,
-  item: {
-    display: 'inline-flex',
-    alignItems: 'center',
-
-    '&:last-of-type a': {
-      pointerEvents: 'none',
-      color: theme.pallete.primary.main,
-    },
-  } as CSSProperties,
-  separator: {
-    color: theme.pallete.text.disabled,
-    margin: '0 .5rem',
-    fontSize: '1rem',
-  } as CSSProperties,
-  link: {
-    color: theme.pallete.text.main,
-    textDecoration: 'none',
-    fontWeight: 'bold',
-    display: 'inline-block',
-
-    '&:hover': {
-      color: theme.pallete.primary.main,
-    },
-  } as CSSProperties,
-})
diff --git a/src/components/elements/Breadcrumb/BreadcrumbStore.ts b/src/components/elements/Breadcrumb/BreadcrumbStore.ts
deleted file mode 100644
index 1716983f4..000000000
--- a/src/components/elements/Breadcrumb/BreadcrumbStore.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { LinkProps } from 'react-router-dom'
-
-import { Observable } from '../../../util'
-
-export interface BreadcrumbEntry {
-  key: string
-  title: string
-  to?: LinkProps['to']
-}
-
-export class BreadcrumbStore extends Observable<BreadcrumbEntry[]> {
-  private entries: BreadcrumbEntry[] = []
-
-  public push(entry: BreadcrumbEntry) {
-    this.entries = [...this.entries, entry]
-    setTimeout(() => this.notify(this.entries))
-  }
-
-  public pop(entry: BreadcrumbEntry) {
-    this.entries = this.entries.filter(e => e.key !== entry.key)
-    setTimeout(() => this.notify(this.entries))
-  }
-
-  public getEntries(): BreadcrumbEntry[] {
-    return this.entries
-  }
-}
diff --git a/src/components/elements/Breadcrumb/Breadcrumbs.stories.tsx b/src/components/elements/Breadcrumb/Breadcrumbs.stories.tsx
index 22cf75f3e..73d09f48c 100644
--- a/src/components/elements/Breadcrumb/Breadcrumbs.stories.tsx
+++ b/src/components/elements/Breadcrumb/Breadcrumbs.stories.tsx
@@ -1,19 +1,23 @@
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 
-import { withRouter } from '../../../stories-addons'
+import { Link } from '../Link'
 
-import { Breadcrumb, BreadcrumbNav, BreadcrumbProvider } from '.'
+import { Breadcrumbs } from './Breadcrumbs'
 
-storiesOf('Components|Breadcrumb', module)
-  .addDecorator(withRouter())
-  .add('default', () => (
-    <BreadcrumbProvider>
-      <Breadcrumb title='First level' />
-      <Breadcrumb title='Second level' to='/second/' />
-      <Breadcrumb title='Third level' to='/second/third/' />
-      <Breadcrumb title='Fourth level' to='/second/third/fourth/' />
-
-      <BreadcrumbNav />
-    </BreadcrumbProvider>
-  ))
+storiesOf('Components|Breadcrumbs', module).add('default', () => (
+  <Breadcrumbs>
+    <Link color='inherit' textDecoration='none' href='/first'>
+      First level
+    </Link>
+    <Link color='inherit' textDecoration='none' href='/first/second/'>
+      Second level
+    </Link>
+    <Link color='inherit' textDecoration='none' href='/first/second/third/'>
+      Third level
+    </Link>
+    <Link color='inherit' textDecoration='none' href='/first/second/third/fourth/'>
+      Fourth level
+    </Link>
+  </Breadcrumbs>
+))
diff --git a/src/components/elements/Breadcrumb/Breadcrumbs.tsx b/src/components/elements/Breadcrumb/Breadcrumbs.tsx
new file mode 100644
index 000000000..c60b89524
--- /dev/null
+++ b/src/components/elements/Breadcrumb/Breadcrumbs.tsx
@@ -0,0 +1,68 @@
+import React, { CSSProperties, Fragment } from 'react'
+
+import { useRovingTabIndex } from '../../../hooks/useRovingTabIndex'
+import { Theme, useStyles } from '../../../styles'
+import { Icon } from '../Icon'
+
+export interface BreadcrumbsProps {
+  children?: React.ReactNode
+}
+
+export function Breadcrumbs(props: BreadcrumbsProps) {
+  const { children } = props
+
+  const rootRef = useRovingTabIndex({
+    getItems: root => Array.from(root.querySelectorAll('a')),
+  })
+
+  const { classes, css } = useStyles(createStyles)
+
+  return (
+    <nav ref={rootRef} aria-label='Breadcrumbs'>
+      <ol className={classes.list}>
+        {React.Children.map(children, (child, idx) => {
+          const isLastItem = idx === React.Children.count(children) - 1
+
+          return (
+            <Fragment key={idx}>
+              <li className={css(classes.item, isLastItem && classes.lastItem)}>{child}</li>
+
+              {!isLastItem && (
+                <li role='separator' aria-hidden={true} className={classes.item}>
+                  <Icon size={1} icon='angleRight' style={classes.separator} />
+                </li>
+              )}
+            </Fragment>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}
+
+export const createStyles = (theme: Theme) => ({
+  list: {
+    display: 'flex',
+    alignItems: 'center',
+    listStyle: 'none',
+    padding: 0,
+    margin: 0,
+    color: theme.pallete.text.main,
+    textDecoration: 'none',
+  } as CSSProperties,
+  item: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    '&:hover': {
+      color: theme.pallete.primary.main,
+    },
+  } as CSSProperties,
+  separator: {
+    color: theme.pallete.text.disabled,
+    margin: '0 .5rem',
+    fontSize: '1rem',
+  } as CSSProperties,
+  lastItem: {
+    color: theme.pallete.primary.main,
+  } as CSSProperties,
+})
diff --git a/src/components/elements/Breadcrumb/index.ts b/src/components/elements/Breadcrumb/index.ts
index 0e3bf624d..00ec51045 100644
--- a/src/components/elements/Breadcrumb/index.ts
+++ b/src/components/elements/Breadcrumb/index.ts
@@ -1,4 +1,1 @@
-export { Breadcrumb, BreadcrumbProps } from './Breadcrumb'
-export { BreadcrumbConsumer, BreadcrumbContext, BreadcrumbProvider, BreadcrumbProviderProps } from './BreadcrumbContext'
-export { BreadcrumbNav, BreadcrumbNavProps } from './BreadcrumbNav'
-export { BreadcrumbEntry, BreadcrumbStore } from './BreadcrumbStore'
+export { Breadcrumbs, BreadcrumbsProps } from './Breadcrumbs'
diff --git a/src/components/elements/Button/Button.stories.tsx b/src/components/elements/Button/Button.stories.tsx
index 8ba7e81e3..4af5f6b07 100644
--- a/src/components/elements/Button/Button.stories.tsx
+++ b/src/components/elements/Button/Button.stories.tsx
@@ -2,14 +2,11 @@ import { action } from '@storybook/addon-actions'
 import { boolean, select, text } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
-import { MemoryRouter } from 'react-router'
 
 import { Icon } from '../Icon'
-import { Text } from '../textual'
 
 import { Button } from './Button/Button'
 import { ButtonKind, ButtonSize, ButtonSkin } from './Button/ButtonSkins'
-import { ButtonLink } from './ButtonLink/ButtonLink'
 
 const typeOptions: ButtonKind[] = ['normal', 'primary', 'danger']
 const skinOptions: ButtonSkin[] = ['default', 'ghost', 'outline']
@@ -42,20 +39,3 @@ storiesOf('Components|Button', module)
       <Icon icon='adjust' />
     </Button>
   ))
-  .add('link', () => (
-    <MemoryRouter initialEntries={['/']} initialIndex={0}>
-      <ButtonLink
-        to='/links'
-        skin={select('skin', skinOptions, 'default')}
-        size={select('size', sizeOptions, 'medium')}
-        kind={select('kind', typeOptions, 'normal')}
-        loading={boolean('loading', false)}
-        disabled={boolean('disabled', false)}
-        block={boolean('block', false)}
-        onClick={action('link-clicked')}
-      >
-        <Icon icon='arrowLeft' style={{ marginRight: '0.5rem' }} />
-        <Text>Go back</Text>
-      </ButtonLink>
-    </MemoryRouter>
-  ))
diff --git a/src/components/elements/Button/ButtonLink/ButtonLink.tsx b/src/components/elements/Button/ButtonLink/ButtonLink.tsx
deleted file mode 100644
index 45cc29438..000000000
--- a/src/components/elements/Button/ButtonLink/ButtonLink.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Interpolation } from 'emotion'
-import React from 'react'
-import { Link, LinkProps } from 'react-router-dom'
-
-import { Button, ButtonProps } from '../Button/Button'
-import { ButtonBaseRenderProps } from '../ButtonBase'
-
-export interface ButtonLinkProps extends ButtonProps, Pick<LinkProps, 'to' | 'replace'> {}
-
-export function ButtonLink(props: ButtonLinkProps) {
-  const { to, replace, style, ...rest } = props
-
-  const linkStyle: Interpolation = {
-    textDecoration: 'none',
-  }
-
-  const renderLink = (buttonProps: ButtonBaseRenderProps) => {
-    const {
-      disabled, // `<a>` tag does not support the 'disabled' prop
-      ...other
-    } = buttonProps
-
-    return (
-      <Link
-        {...other as any}
-        to={to}
-        replace={replace}
-        aria-disabled={disabled === true ? true : undefined}
-        tabIndex={disabled ? -1 : buttonProps.tabIndex}
-      />
-    )
-  }
-
-  return <Button {...rest} style={{ ...linkStyle, ...(style as any) }} render={renderLink} />
-}
diff --git a/src/components/elements/Button/index.ts b/src/components/elements/Button/index.ts
index 9ca36ae40..6804e9c66 100644
--- a/src/components/elements/Button/index.ts
+++ b/src/components/elements/Button/index.ts
@@ -1,3 +1,2 @@
 export { ButtonBase, ButtonBaseProps } from './ButtonBase'
 export { Button, ButtonProps } from './Button/Button'
-export { ButtonLink, ButtonLinkProps } from './ButtonLink/ButtonLink'
diff --git a/src/components/elements/FileUploader/FileUploader.tsx b/src/components/elements/FileUploader/FileUploader.tsx
index 6411c37fa..c979edf4e 100644
--- a/src/components/elements/FileUploader/FileUploader.tsx
+++ b/src/components/elements/FileUploader/FileUploader.tsx
@@ -34,7 +34,7 @@ export function FileUploader(props: FileUploaderProps) {
         {isDragAccept}
         <HFlow alignItems='center' hSpacing={0.5}>
           <Icon fill='secondary' icon='upload' />
-          <Text color='secondary' size={0.875} weight='bold'>
+          <Text color='secondary' fontSize={0.875} fontWeight='bold'>
             {text}
           </Text>
         </HFlow>
@@ -89,7 +89,7 @@ export function FileInfo(props: FileInfoProps) {
       {!file.error && !file.uploading && (
         <Icon icon='checkDefault' fill='primary' size={1} style={{ marginRight: 5 }} />
       )}
-      <Text weight='bold' style={{ marginRight: 10 }}>
+      <Text fontWeight='bold' style={{ marginRight: 10 }}>
         {file.selectedFile.name}
       </Text>
       <Text>{format(file.selectedFile.size, 0)}</Text>
@@ -112,7 +112,7 @@ export function FileExtension(props: FileExtensionProps) {
   }))
 
   return (
-    <Text color='secondary' style={classes.root} weight='bold'>
+    <Text color='secondary' style={classes.root} fontWeight='bold'>
       {extension}
     </Text>
   )
diff --git a/src/components/elements/Link/Link.tsx b/src/components/elements/Link/Link.tsx
index 09258b576..2a2371564 100644
--- a/src/components/elements/Link/Link.tsx
+++ b/src/components/elements/Link/Link.tsx
@@ -1,30 +1,19 @@
-import React, { CSSProperties } from 'react'
+import React, { AnchorHTMLAttributes, CSSProperties } from 'react'
 
-import { ExternalStyles, focusBoxShadow, Theme, useStyles } from '../../../styles'
+import { focusBoxShadow, Theme, useStyles } from '../../../styles'
 import { Omit } from '../../../util'
+import { BaseTextProps, Text } from '../textual'
 
-export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'style'> {
-  component?: React.ElementType
-  style?: ExternalStyles
-  [key: string]: any
-}
-
-export function Link(props: LinkProps) {
-  const { style, component, ...rest } = props
-  const { classes, css } = useStyles(createStyles)
+export type LinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'style'> & BaseTextProps
 
-  const Cmp = component
+export function Link<P = LinkProps>(props: P & BaseTextProps) {
+  const { classes } = useStyles(createStyles, props)
 
-  return <Cmp className={css(classes.link, style)} {...rest} />
+  return <Text<LinkProps> variant='link' component='a' {...props} style={[classes.link, props.style]} />
 }
 
-Link.defaultProps = {
-  component: 'a',
-} as Partial<LinkProps>
-
 export const createStyles = (theme: Theme) => ({
   link: {
-    ...theme.typography.variant('link'),
     cursor: 'pointer',
     outline: 'none',
     transition: 'box-shadow .2s ease',
diff --git a/src/components/elements/MonthPicker/MonthPicker/MonthPicker.tsx b/src/components/elements/MonthPicker/MonthPicker/MonthPicker.tsx
index d072d5229..004d478f5 100644
--- a/src/components/elements/MonthPicker/MonthPicker/MonthPicker.tsx
+++ b/src/components/elements/MonthPicker/MonthPicker/MonthPicker.tsx
@@ -49,7 +49,7 @@ export function MonthPicker(props: MonthPickerProps) {
           <Button title={locale.calendar.previousYear} size='small' skin='ghost' onClick={onLeftClick}>
             <Icon icon='angleLeft' />
           </Button>
-          <Text weight='bold' size={0.875}>
+          <Text fontWeight='bold' fontSize={0.875}>
             {visibleYear}
           </Text>
           <Button title={locale.calendar.nextYear} size='small' skin='ghost' onClick={onRightClick}>
diff --git a/src/components/elements/Tabs/TabItem.tsx b/src/components/elements/Tabs/TabItem.tsx
new file mode 100644
index 000000000..cd8412b12
--- /dev/null
+++ b/src/components/elements/Tabs/TabItem.tsx
@@ -0,0 +1,80 @@
+import React, { CSSProperties, HTMLAttributes } from 'react'
+
+import { Theme, useStyles } from '../../../styles'
+
+export interface TabItemProps extends HTMLAttributes<HTMLElement> {
+  component?: React.ElementType
+  active?: boolean
+  disabled?: boolean
+  children?: React.ReactNode
+  [key: string]: any
+}
+
+export function TabItem(props: TabItemProps) {
+  const { active, disabled, component, children, ...rest } = props
+  const { classes, css } = useStyles(createStyles)
+
+  const className =
+    css(classes.item, active && classes.active, disabled && classes.disabled) + `${disabled ? ' disabled' : ''}`
+
+  const Cmp = component
+
+  return (
+    <li className={classes.li}>
+      <Cmp role='tab' className={className} {...rest}>
+        {children}
+      </Cmp>
+    </li>
+  )
+}
+
+TabItem.defaultProps = {
+  component: 'span',
+}
+
+const createStyles = (theme: Theme) => ({
+  li: {
+    display: 'inline-block',
+  } as CSSProperties,
+  item: {
+    display: 'inline-block',
+    textDecoration: 'none',
+    color: theme.pallete.text.main,
+    fontWeight: 'bold',
+    padding: '0.5rem 0.75rem',
+    lineHeight: '1rem',
+    borderRadius: 4,
+    outline: 0,
+    border: '2px solid transparent',
+    transition: 'background .15s, border-color .15s',
+
+    '&:not(.disabled):hover': {
+      cursor: 'pointer',
+      background: theme.pallete.gray.c90,
+    },
+
+    '&:not(.disabled):active': {
+      background: theme.pallete.gray.c90,
+      boxShadow: theme.shadows.inner['10'],
+    },
+
+    '&:focus': {
+      borderColor: theme.pallete.primary.main,
+      borderBottomLeftRadius: 4,
+      borderBottomRightRadius: 4,
+    },
+  } as CSSProperties,
+  active: {
+    color: theme.pallete.primary.main,
+    borderBottomColor: theme.pallete.primary.main,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  } as CSSProperties,
+  disabled: {
+    color: theme.pallete.text.disabled,
+
+    '&:hover': {
+      cursor: 'not-allowed',
+    },
+  } as CSSProperties,
+})
diff --git a/src/components/elements/Tabs/Tabs.stories.tsx b/src/components/elements/Tabs/Tabs.stories.tsx
index a0ccf180d..6962b2ef8 100644
--- a/src/components/elements/Tabs/Tabs.stories.tsx
+++ b/src/components/elements/Tabs/Tabs.stories.tsx
@@ -1,23 +1,15 @@
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 
-import { withRouter } from '../../../stories-addons/withRouter'
+import { TabItem } from './TabItem'
+import { Tabs } from './Tabs'
 
-import { TabLink, Tabs } from './Tabs'
-
-storiesOf('Components|Tabs', module)
-  // @ts-ignore
-  .addDecorator(withRouter(['/test-4'], 1))
-  .add('default', () => (
-    <Tabs>
-      <TabLink to='/test-1'>First item</TabLink>
-      <TabLink to='/test-2' active>
-        Second item
-      </TabLink>
-      <TabLink to='/test-3'>Third item</TabLink>
-      <TabLink to='/test-4'>Fourth item</TabLink>
-      <TabLink to='/test-5' disabled>
-        Disabled item
-      </TabLink>
-    </Tabs>
-  ))
+storiesOf('Components|Tabs', module).add('default', () => (
+  <Tabs>
+    <TabItem>First item</TabItem>
+    <TabItem active>Second item</TabItem>
+    <TabItem>Third item</TabItem>
+    <TabItem>Fourth item</TabItem>
+    <TabItem disabled>Disabled item</TabItem>
+  </Tabs>
+))
diff --git a/src/components/elements/Tabs/Tabs.tsx b/src/components/elements/Tabs/Tabs.tsx
index f45d2bc70..744131ca8 100644
--- a/src/components/elements/Tabs/Tabs.tsx
+++ b/src/components/elements/Tabs/Tabs.tsx
@@ -1,5 +1,4 @@
 import React, { CSSProperties } from 'react'
-import { NavLink, NavLinkProps } from 'react-router-dom'
 
 import { useRovingTabIndex } from '../../../hooks/useRovingTabIndex'
 import { Theme, useStyles } from '../../../styles'
@@ -11,55 +10,12 @@ export function Tabs(props: TabsProps) {
   const { classes } = useStyles(createStyles)
 
   const rootRef = useRovingTabIndex({
-    getItems: root => Array.from(root.querySelectorAll('a[role="tab"]')),
+    getItems: root => Array.from(root.querySelectorAll('[role="tab"]')),
   })
 
   return <ul ref={rootRef} className={classes.ul} role='tablist' {...rest} />
 }
 
-export interface TabLinkProps extends Pick<NavLinkProps, 'to' | 'replace' | 'exact'> {
-  active?: boolean
-  disabled?: boolean
-  children?: React.ReactNode
-}
-
-export function TabLink(props: TabLinkProps) {
-  const { active, children, disabled, ...rest } = props
-  const { classes, css } = useStyles(createStyles)
-
-  const isActive = (match, location) => {
-    return props.active || match
-  }
-
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (disabled) {
-      // Do not navitate if link is disabled
-      e.preventDefault()
-    }
-  }
-
-  return (
-    <li className={classes.li} role='presentation'>
-      <NavLink
-        className={css(classes.a, disabled && classes.disabled) + `${disabled ? ' disabled' : ''}`}
-        isActive={isActive}
-        role='tab'
-        aria-disabled={disabled === true ? disabled : undefined}
-        tabIndex={disabled ? -1 : undefined}
-        onClick={handleClick}
-        {...rest}
-      >
-        {children}
-      </NavLink>
-    </li>
-  )
-}
-
-TabLink.defaultProps = {
-  active: false,
-  disabled: false,
-} as Partial<TabLinkProps>
-
 const createStyles = (theme: Theme) => ({
   ul: {
     listStyle: 'none',
@@ -67,45 +23,4 @@ const createStyles = (theme: Theme) => ({
     margin: '0',
     fontSize: theme.typography.sizes.button,
   } as CSSProperties,
-  li: {
-    display: 'inline-block',
-  } as CSSProperties,
-  a: {
-    display: 'inline-block',
-    textDecoration: 'none',
-    color: theme.pallete.text.main,
-    fontWeight: 'bold',
-    padding: '0.5rem 0.75rem',
-    lineHeight: '1rem',
-    borderRadius: 4,
-    outline: 0,
-    border: '2px solid transparent',
-    transition: 'background .15s, border-color .15s',
-
-    '&.active': {
-      color: theme.pallete.primary.main,
-      borderBottomColor: theme.pallete.primary.main,
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-    },
-
-    '&:not(.disabled):hover': {
-      background: theme.pallete.gray.c90,
-    },
-
-    '&:focus': {
-      borderColor: theme.pallete.primary.main,
-      borderBottomLeftRadius: 4,
-      borderBottomRightRadius: 4,
-    },
-
-    '&:not(.disabled):active': {
-      background: theme.pallete.gray.c90,
-      boxShadow: theme.shadows.inner['10'],
-    },
-  } as CSSProperties,
-  disabled: {
-    color: theme.pallete.text.disabled,
-    cursor: 'not-allowed',
-  } as CSSProperties,
 })
diff --git a/src/components/elements/Tabs/index.ts b/src/components/elements/Tabs/index.ts
index e01802ad9..31b0d4ee2 100644
--- a/src/components/elements/Tabs/index.ts
+++ b/src/components/elements/Tabs/index.ts
@@ -1,1 +1,2 @@
-export { Tabs, TabsProps, TabLink, TabLinkProps } from './Tabs'
+export { Tabs, TabsProps } from './Tabs'
+export { TabItem, TabItemProps } from './TabItem'
diff --git a/src/components/elements/textual/Heading/Heading.tsx b/src/components/elements/textual/Heading/Heading.tsx
index 72c481e94..fbddaed33 100644
--- a/src/components/elements/textual/Heading/Heading.tsx
+++ b/src/components/elements/textual/Heading/Heading.tsx
@@ -1,30 +1,15 @@
 import React from 'react'
 
-import { ExternalStyles, TextColor, useCss } from '../../../../styles'
-import { getTextColor } from '../../../../styles/theme/createTheme'
-import { Omit } from '../../../../util/types'
+import { Text, TextProps } from '../Text/Text'
 
-export interface HeadingProps extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'style'> {
+export interface HeadingProps extends TextProps {
   level: 1 | 2 | 3 | 4 | 5 | 6
-  color?: TextColor
-  style?: ExternalStyles
 }
 
 export function Heading(props: HeadingProps) {
-  const { level, children, style, color, ...rest } = props
-  const { theme, css } = useCss()
-  const styles = {
-    color: color && getTextColor(theme, color),
-  }
+  const { level, ...rest } = props
 
-  return React.createElement(
-    `h${level}`,
-    {
-      ...rest,
-      className: css(styles, style),
-    },
-    children
-  )
-}
+  const heading = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
-Heading.defaultProps = {} as Partial<HeadingProps>
+  return <Text component={heading} variant={heading} {...rest} />
+}
diff --git a/src/components/elements/textual/Text/Text.stories.tsx b/src/components/elements/textual/Text/Text.stories.tsx
index 56c5e0119..875679adc 100644
--- a/src/components/elements/textual/Text/Text.stories.tsx
+++ b/src/components/elements/textual/Text/Text.stories.tsx
@@ -4,21 +4,47 @@ import React from 'react'
 
 import { TextColor } from '../../../../styles'
 
-import { FontStyle, Text, TextTag, Weight } from './Text'
+import { Text, TextProps } from './Text'
 
-const weights: Weight[] = ['normal', 'bold']
-const tags: TextTag[] = ['span', 'p']
-const fontStyles: FontStyle[] = ['normal', 'italic']
-export const colors: TextColor[] = ['normal', 'secondary', 'disabled', 'primary', 'danger', 'info', 'alert', 'success']
+const variants: Array<TextProps['variant']> = [
+  'main',
+  'secondary',
+  'disabled',
+  'link',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+]
+const components: Array<TextProps['component']> = ['span', 'p', 'button']
+const fontWeights: Array<TextProps['fontWeight']> = ['' as any, 'normal', 'bold']
+const fontStyles: Array<TextProps['fontStyle']> = ['' as any, 'normal', 'italic']
+const textDecorations: Array<TextProps['textDecoration']> = ['' as any, 'normal', 'underline']
+export const colors: TextColor[] = [
+  '' as any,
+  'inherit',
+  'normal',
+  'secondary',
+  'disabled',
+  'primary',
+  'danger',
+  'info',
+  'alert',
+  'success',
+]
 
 storiesOf('Components|Textual', module).add('Text', () => (
   <Text
-    size={number('size', 1)}
-    color={select('color', colors, 'normal')}
-    weight={select('weight', weights, 'normal')}
-    tag={select('tag', tags, 'span')}
-    fontStyle={select('fontStyle', fontStyles, 'normal')}
+    variant={select('variant', variants, undefined)}
+    component={select('component', components as any, undefined)}
+    fontSize={number('fontSize', undefined)}
+    color={select('color', colors, undefined)}
+    fontWeight={select('fontWeight', fontWeights, undefined)}
+    fontStyle={select('fontStyle', fontStyles, undefined)}
+    textDecoration={select('textDecoration', textDecorations, undefined)}
   >
-    {text('text', 'text here')}
+    {text('text', 'Lorem ipsum')}
   </Text>
 ))
diff --git a/src/components/elements/textual/Text/Text.tsx b/src/components/elements/textual/Text/Text.tsx
index 92ca8c18e..f5c4e798d 100644
--- a/src/components/elements/textual/Text/Text.tsx
+++ b/src/components/elements/textual/Text/Text.tsx
@@ -1,45 +1,69 @@
-import React from 'react'
+import { FontStyleProperty, FontWeightProperty, TextDecorationProperty } from 'csstype'
+import React, { CSSProperties, HTMLAttributes } from 'react'
 
 import { ExternalStyles, TextColor, useStyles } from '../../../../styles'
-import { getTextColor } from '../../../../styles/theme/createTheme'
+import { getTextColor, Theme } from '../../../../styles/theme/createTheme'
+import { TypographyVariant } from '../../../../styles/theme/createTypography'
 import { Omit } from '../../../../util'
 
-export type Weight = 'normal' | 'bold'
-export type TextTag = 'span' | 'p'
-export type FontStyle = 'normal' | 'italic'
-
-export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'style'> {
+export interface BaseTextProps {
+  component?: React.ElementType
+  variant?: TypographyVariant
   color?: TextColor
-  size?: number
-  weight?: Weight
-  tag?: TextTag
-  fontStyle?: FontStyle
+  fontSize?: number
+  fontWeight?: FontWeightProperty
+  fontStyle?: FontStyleProperty
+  textDecoration?: TextDecorationProperty
   style?: ExternalStyles
-  children: React.ReactNode
+  [key: string]: any
 }
 
-export function Text(props: TextProps) {
-  const { tag, color, size, weight, fontStyle, style, ...rest } = props
-  const { classes, css } = useStyles(theme => ({
-    root: {
-      ...theme.typography.variant('main'),
-      color: color && getTextColor(theme, color),
-      fontSize: size && size + 'rem',
-      fontWeight: weight,
-      fontStyle,
-    },
-  }))
-
-  return React.createElement(
-    tag,
-    {
-      className: css(classes[tag], classes.root, style),
-      ...rest,
-    },
-    props.children
+export type TextProps = Omit<HTMLAttributes<HTMLElement>, 'style'> & BaseTextProps
+
+export function Text<P = TextProps>(props: P & BaseTextProps) {
+  const { component, variant, color, fontSize, fontWeight, fontStyle, textDecoration, style, ...rest } = props
+  const { classes, css } = useStyles(createStyles, props)
+
+  const Cmp = component
+
+  const className = css(
+    classes.root,
+    color && classes.color,
+    fontSize && classes.fontSize,
+    fontWeight && classes.fontWeight,
+    fontStyle && classes.fontStyle,
+    textDecoration && classes.textDecoration,
+    style
   )
+
+  return <Cmp className={className} {...rest} />
 }
 
 Text.defaultProps = {
-  tag: 'span',
-} as Partial<TextProps>
+  component: 'span',
+  variant: 'main',
+}
+
+const createStyles = (
+  theme: Theme,
+  { variant, color, fontWeight, fontStyle, textDecoration, fontSize }: BaseTextProps
+) => ({
+  root: {
+    ...theme.typography.variant(variant),
+  } as CSSProperties,
+  color: {
+    color: color && getTextColor(theme, color),
+  } as CSSProperties,
+  fontSize: {
+    fontSize: fontSize && `${fontSize}rem`,
+  } as CSSProperties,
+  fontWeight: {
+    fontWeight,
+  } as CSSProperties,
+  fontStyle: {
+    fontStyle,
+  } as CSSProperties,
+  textDecoration: {
+    textDecoration,
+  } as CSSProperties,
+})
diff --git a/src/components/form/field/SelectField/SelectField.stories.tsx b/src/components/form/field/SelectField/SelectField.stories.tsx
index f25922a61..566747573 100644
--- a/src/components/form/field/SelectField/SelectField.stories.tsx
+++ b/src/components/form/field/SelectField/SelectField.stories.tsx
@@ -3,7 +3,7 @@ import { boolean, text } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 
-import { withForm, withRouter } from '../../../../stories-addons'
+import { withForm } from '../../../../stories-addons'
 import {
   DefaultItemType,
   defaultSelectFilter,
@@ -62,7 +62,6 @@ const SelectAsyncManager = (props: SelectAsyncManagerProps) => {
 
 // tslint:disable jsx-no-lambda
 storiesOf('Form|SelectField', module)
-  .addDecorator(withRouter())
   .addDecorator(withForm())
   .add('default', () => (
     <SelectField<DefaultItemType>
diff --git a/src/components/form/finalForm/Form/Form.stories.tsx b/src/components/form/finalForm/Form/Form.stories.tsx
index b78b3ef95..b4c100f34 100644
--- a/src/components/form/finalForm/Form/Form.stories.tsx
+++ b/src/components/form/finalForm/Form/Form.stories.tsx
@@ -3,7 +3,6 @@ import { storiesOf } from '@storybook/react'
 import React from 'react'
 import { FormRenderProps } from 'react-final-form'
 
-import { withRouter } from '../../../../stories-addons'
 import { Flow, VFlow } from '../../../elements'
 import { CheckboxField } from '../../field/CheckboxField/CheckboxField'
 import { CpfField } from '../../field/MaskedField/maskedFields'
@@ -14,46 +13,42 @@ import { SubmitButton } from '../SubmitButton'
 
 import { Form } from './Form'
 
-storiesOf('Form|Form', module)
-  .addDecorator(withRouter())
-  .add('default', () => {
-    const validate = form => {
-      const errors: any = {}
+storiesOf('Form|Form', module).add('default', () => {
+  const validate = form => {
+    const errors: any = {}
 
-      if (!form.nome) {
-        errors.nome = 'Preenchimento obrigatório.'
-      }
-
-      if (!form.cpf) {
-        errors.cpf = 'Preenchimento obrigatório.'
-      }
+    if (!form.nome) {
+      errors.nome = 'Preenchimento obrigatório.'
+    }
 
-      if (!form.text) {
-        errors.text = 'Preenchimento obrigatório.'
-      }
+    if (!form.cpf) {
+      errors.cpf = 'Preenchimento obrigatório.'
+    }
 
-      return errors
+    if (!form.text) {
+      errors.text = 'Preenchimento obrigatório.'
     }
 
-    const renderForm = (props: FormRenderProps) => (
-      <form onSubmit={props.handleSubmit}>
-        <VFlow>
-          <TextField name='nome' label='Nome' required />
-          <CpfField name='cpf' label='CPF' 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)} />
-    )
-  })
+    return errors
+  }
+
+  const renderForm = (props: FormRenderProps) => (
+    <form onSubmit={props.handleSubmit}>
+      <VFlow>
+        <TextField name='nome' label='Nome' required />
+        <CpfField name='cpf' label='CPF' 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/components/form/finalForm/Form/Form.tsx b/src/components/form/finalForm/Form/Form.tsx
index 39c419145..3ef18504d 100644
--- a/src/components/form/finalForm/Form/Form.tsx
+++ b/src/components/form/finalForm/Form/Form.tsx
@@ -5,12 +5,10 @@ import React from 'react'
 import { Form as FinalForm, FormProps as FinalFormProps, FormRenderProps } from 'react-final-form'
 
 import { isEmpty, isPromise } from '../../../../util'
-import { FormPrompt } from '../FormPrompt'
 
 export type ResultType = object | Promise<object | undefined> | undefined | void
 
 export interface FormProps extends FinalFormProps {
-  hasLeaveModal?: boolean
   focusOnError?: boolean
   transformResult?(result: ResultType): ResultType
   onSubmitSucceeded?(formState: FormState): void
@@ -21,7 +19,6 @@ const focusOnErrorDecorator = createFocusOnErrorDecorator()
 
 export class Form extends React.Component<FormProps> {
   static defaultProps: Partial<FormProps> = {
-    hasLeaveModal: false,
     focusOnError: true,
     decorators: [],
     transformResult: result => result,
@@ -48,7 +45,6 @@ export class Form extends React.Component<FormProps> {
 
   private renderForm = (props: FormRenderProps) => (
     <>
-      {this.props.hasLeaveModal && <FormPrompt />}
       {this.props.render({
         ...props,
         handleSubmit: this.handleSubmit(props),
diff --git a/src/components/form/finalForm/FormPrompt/FormPrompt.tsx b/src/components/form/finalForm/FormPrompt/FormPrompt.tsx
deleted file mode 100644
index 94d5a2d78..000000000
--- a/src/components/form/finalForm/FormPrompt/FormPrompt.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import { FormSpy } from 'react-final-form'
-import { Prompt } from 'react-router'
-
-export interface FormPromptProps {
-  message?: string
-}
-
-export class FormPrompt extends React.Component<FormPromptProps> {
-  static defaultProps: Partial<FormPromptProps> = {
-    message: 'Deseja sair e perder as informações não salvas?',
-  }
-
-  render() {
-    return (
-      <FormSpy subscription={{ pristine: true, submitSucceeded: true }}>
-        {spyProps => <Prompt when={!spyProps.pristine && !spyProps.submitSucceeded} message={this.props.message} />}
-      </FormSpy>
-    )
-  }
-}
diff --git a/src/components/form/finalForm/FormPrompt/index.ts b/src/components/form/finalForm/FormPrompt/index.ts
deleted file mode 100644
index 2e9fc50c7..000000000
--- a/src/components/form/finalForm/FormPrompt/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { FormPrompt, FormPromptProps } from './FormPrompt'
diff --git a/src/components/form/finalForm/wizard/WizardFooter/WizardFooter.tsx b/src/components/form/finalForm/wizard/WizardFooter/WizardFooter.tsx
deleted file mode 100644
index c4494a900..000000000
--- a/src/components/form/finalForm/wizard/WizardFooter/WizardFooter.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { CSSProperties } from 'react'
-
-import { Button } from '../../../../../components/elements/Button'
-import { Theme, useStyles } from '../../../../../styles'
-
-export interface WizardFooterProps {
-  isFirstStep: boolean
-  isLastStep: boolean
-  onSubmit(): any
-  onPrevious(): any
-}
-
-export function WizardFooter(props: WizardFooterProps) {
-  const { isFirstStep, isLastStep, onPrevious, onSubmit } = props
-  const { classes } = useStyles(createStyles)
-
-  return (
-    <div className={classes.container}>
-      {!isFirstStep && <Button onClick={onPrevious}>Voltar</Button>}
-      {!isLastStep && (
-        <Button kind='primary' onClick={onSubmit}>
-          Avançar
-        </Button>
-      )}
-      {isLastStep && (
-        <Button kind='primary' onClick={onSubmit}>
-          Salvar
-        </Button>
-      )}
-    </div>
-  )
-}
-
-export const createStyles = (theme: Theme) => ({
-  container: {
-    borderTop: '1px solid ' + theme.pallete.divider,
-    padding: '1rem 0',
-    margin: '2rem 0',
-    textAlign: 'right',
-    '& > *:not(:last-of-type)': {
-      marginRight: '1rem',
-    },
-  } as CSSProperties,
-})
diff --git a/src/components/form/finalForm/wizard/WizardForm/WizardForm.stories.tsx b/src/components/form/finalForm/wizard/WizardForm/WizardForm.stories.tsx
deleted file mode 100644
index 0db7f680e..000000000
--- a/src/components/form/finalForm/wizard/WizardForm/WizardForm.stories.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { action } from '@storybook/addon-actions'
-import { storiesOf } from '@storybook/react'
-import React from 'react'
-
-import { withRouter } from '../../../../../stories-addons'
-import { TextField } from '../../../field/TextField/TextField'
-
-import { WizardForm, WizardStep } from './WizardForm'
-
-storiesOf('Form|WizardForm', module)
-  .addDecorator(withRouter())
-  .add('default', () => {
-    return (
-      <WizardForm onSubmit={action('submit')} onSubmitSucceeded={action('submitSucceeded')}>
-        <WizardStep render={renderStep1} validate={validateStep1} />
-        <WizardStep render={renderStep2} />
-        <WizardStep render={renderStep3} />
-      </WizardForm>
-    )
-  })
-
-const validateStep1 = values => {
-  if (!values.step1) {
-    return {
-      step1: 'Preenchimento obrigatório',
-    }
-  }
-  return null
-}
-
-const renderStep1 = () => {
-  return (
-    <>
-      <h1>Step 1</h1>
-      <TextField name='step1' label='First name' required />
-    </>
-  )
-}
-
-const renderStep2 = () => {
-  return (
-    <>
-      <h1>Step 2</h1>
-      <TextField name='step2' label='Middle name' />
-    </>
-  )
-}
-
-const renderStep3 = () => {
-  return (
-    <>
-      <h1>Step 3</h1>
-      <TextField name='step3' label='Last name' />
-    </>
-  )
-}
diff --git a/src/components/form/finalForm/wizard/WizardForm/WizardForm.tsx b/src/components/form/finalForm/wizard/WizardForm/WizardForm.tsx
deleted file mode 100644
index 75c58ecb5..000000000
--- a/src/components/form/finalForm/wizard/WizardForm/WizardForm.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import { FormApi } from 'final-form'
-import React from 'react'
-import { FormRenderProps } from 'react-final-form'
-
-import { Omit } from '../../../../../util/types'
-import { Form, FormProps } from '../../Form'
-import { WizardFooter } from '../WizardFooter/WizardFooter'
-
-export interface WizardStepProps extends Pick<FormProps, 'render' | 'validate'> {}
-
-export class WizardStep extends React.Component<WizardStepProps> {
-  static defaultProps = {
-    render: (props: WizardRenderProps) => null,
-  }
-
-  render() {
-    return null
-  }
-}
-
-export interface WizardRenderProps extends FormRenderProps {
-  wizard: {
-    currentStep: number
-    totalSteps: number
-    isLastStep: boolean
-    isFirstStep: boolean
-    nextStep(values: any): void
-    prevStep(): void
-  }
-}
-
-export interface WizardFormProps extends Omit<FormProps, 'validate' | 'render'> {
-  onSubmit(values: any): any
-  renderFooter?(props: WizardRenderProps): React.ReactNode
-}
-
-export interface WizardFormState {
-  step: number
-  values: any
-}
-
-export class WizardForm extends React.Component<WizardFormProps, WizardFormState> {
-  constructor(props) {
-    super(props)
-    this.state = {
-      step: 0,
-      values: props.initialValues || {},
-    }
-  }
-
-  next = values => {
-    this.setState({
-      step: Math.min(this.state.step + 1, React.Children.toArray(this.props.children).length - 1),
-      values,
-    })
-  }
-
-  previous = () => {
-    this.setState({
-      step: Math.max(this.state.step - 1, 0),
-    })
-  }
-
-  validate = values => {
-    const activePage = this.getActiveStep()
-    return activePage.props.validate ? activePage.props.validate(values) : {}
-  }
-
-  getActiveStep = () => {
-    return React.Children.toArray(this.props.children)[this.state.step] as any
-  }
-
-  handleSubmit = (values, form: FormApi) => {
-    this.setState({
-      step: Math.min(this.state.step + 1, this.getTotalSteps() - 1),
-      values,
-    })
-
-    if (this.isLastStep()) {
-      return this.props.onSubmit(values)
-    }
-  }
-
-  getWizardRenderProps = (renderProps: FormRenderProps): WizardRenderProps => {
-    return {
-      ...renderProps,
-      wizard: {
-        currentStep: this.state.step,
-        totalSteps: React.Children.count(this.props.children),
-        isFirstStep: this.state.step === 0,
-        isLastStep: this.isLastStep(),
-        nextStep: this.next,
-        prevStep: this.previous,
-      },
-    }
-  }
-
-  render() {
-    return (
-      <Form
-        {...this.props}
-        key={this.state.step} // Force form reconstruction for each step, resetting form meta values
-        initialValues={this.state.values}
-        validate={this.validate}
-        onSubmit={this.handleSubmit}
-        render={this.renderStep}
-      />
-    )
-  }
-
-  renderStep = (props: FormRenderProps) => {
-    const activeStep = this.getActiveStep()
-    const renderProps = this.getWizardRenderProps(props)
-
-    return (
-      <form onSubmit={props.handleSubmit}>
-        {activeStep.props.render(renderProps)}
-
-        {this.props.renderFooter ? (
-          this.props.renderFooter(renderProps)
-        ) : (
-          <WizardFooter
-            isFirstStep={renderProps.wizard.isFirstStep}
-            isLastStep={renderProps.wizard.isLastStep}
-            onSubmit={renderProps.handleSubmit}
-            onPrevious={renderProps.wizard.prevStep}
-          />
-        )}
-      </form>
-    )
-  }
-
-  private isLastStep = () => {
-    return this.state.step === this.getTotalSteps() - 1
-  }
-
-  private getTotalSteps = () => {
-    return React.Children.count(this.props.children)
-  }
-}
diff --git a/src/components/form/finalForm/wizard/index.ts b/src/components/form/finalForm/wizard/index.ts
deleted file mode 100644
index d115c1ff9..000000000
--- a/src/components/form/finalForm/wizard/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export {
-  WizardForm,
-  WizardFormProps,
-  WizardFormState,
-  WizardRenderProps,
-  WizardStep,
-  WizardStepProps,
-} from './WizardForm/WizardForm'
-export { WizardFooter, WizardFooterProps } from './WizardFooter/WizardFooter'
diff --git a/src/components/form/index.ts b/src/components/form/index.ts
index ad44478d0..043e91f2f 100644
--- a/src/components/form/index.ts
+++ b/src/components/form/index.ts
@@ -25,4 +25,3 @@ export * from './finalForm/ErrorField'
 export * from './finalForm/Field'
 export * from './finalForm/Form'
 export * from './finalForm/SubmitButton'
-export * from './finalForm/wizard'
diff --git a/src/hooks/useRouter.ts b/src/hooks/useRouter.ts
deleted file mode 100644
index ffa5ae26e..000000000
--- a/src/hooks/useRouter.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useContext } from 'react'
-import * as ReactRouter from 'react-router'
-
-export const useRouter = <T = any>(): ReactRouter.RouteComponentProps<T> => {
-  return useContext((ReactRouter as any).__RouterContext)
-}
diff --git a/src/stories-addons/index.ts b/src/stories-addons/index.ts
index cd6c89e15..8384259d0 100644
--- a/src/stories-addons/index.ts
+++ b/src/stories-addons/index.ts
@@ -1,3 +1,2 @@
 export * from './withForm'
-export * from './withRouter'
 export * from './withStorybookTheme'
diff --git a/src/stories-addons/withForm.tsx b/src/stories-addons/withForm.tsx
index 4a2c6b28b..493922a78 100644
--- a/src/stories-addons/withForm.tsx
+++ b/src/stories-addons/withForm.tsx
@@ -1,7 +1,6 @@
 import { Renderable, RenderFunction } from '@storybook/react'
 import React from 'react'
 import { FormProps } from 'react-final-form'
-import { BrowserRouter } from 'react-router-dom'
 
 import { Form } from '../components/form/finalForm/Form'
 
@@ -12,9 +11,5 @@ export const withForm = (formProps: Partial<FormProps> = {}) => (
   context: { kind: string; story: string }
 ): Renderable => {
   const submit = () => undefined
-  return (
-    <BrowserRouter>
-      <Form onSubmit={submit} render={() => story()} {...formProps} />
-    </BrowserRouter>
-  )
+  return <Form onSubmit={submit} render={() => story()} {...formProps} />
 }
diff --git a/src/stories-addons/withRouter.tsx b/src/stories-addons/withRouter.tsx
deleted file mode 100644
index 64b6a872c..000000000
--- a/src/stories-addons/withRouter.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Renderable, RenderFunction } from '@storybook/react'
-import React from 'react'
-import { MemoryRouter } from 'react-router-dom'
-
-export const withRouter = (initialEntries = ['/', '/test'], initialIndex = 1) => (
-  story: RenderFunction,
-  context: { kind: string; story: string }
-): Renderable => {
-  return (
-    <MemoryRouter initialEntries={initialEntries} initialIndex={initialIndex}>
-      {story()}
-    </MemoryRouter>
-  )
-}
diff --git a/src/styles/theme/createPallete.ts b/src/styles/theme/createPallete.ts
index a8c3f202c..b9527dc12 100644
--- a/src/styles/theme/createPallete.ts
+++ b/src/styles/theme/createPallete.ts
@@ -89,9 +89,19 @@ export const createPallete = (userConfig?: PalleteConfig): Pallete => {
   }
 }
 
-export type TextColor = 'normal' | 'secondary' | 'disabled' | 'primary' | 'danger' | 'success' | 'info' | 'alert'
+export type TextColor =
+  | 'inherit'
+  | 'normal'
+  | 'secondary'
+  | 'disabled'
+  | 'primary'
+  | 'danger'
+  | 'success'
+  | 'info'
+  | 'alert'
 
 export const textColorMap: { [key in TextColor]: (pallete: Pallete) => Color } = {
+  inherit: pallete => 'inherit',
   normal: pallete => pallete.text.main,
   primary: pallete => pallete.primary.main,
   danger: pallete => pallete.status.danger.main,
diff --git a/src/styles/theme/createTypography.ts b/src/styles/theme/createTypography.ts
index ae5bdd9e2..fab6e82bc 100644
--- a/src/styles/theme/createTypography.ts
+++ b/src/styles/theme/createTypography.ts
@@ -1,4 +1,5 @@
 import { FontSizeProperty } from 'csstype'
+import { CSSProperties } from 'react'
 
 import { merge } from '../../util'
 
@@ -16,7 +17,7 @@ export interface Typography {
     text: FontSize
     button: FontSize
   }
-  variant(variant: TypographyVariant)
+  variant(variant: TypographyVariant): CSSProperties
 }
 
 export type TypographyConfig = typeof defaultTypographyConfig
diff --git a/webpack.config.js b/webpack.config.js
index 98797e93a..7bf95e805 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -33,18 +33,7 @@ const config = {
     ],
   },
   plugins: [new CheckerPlugin()],
-  externals: [
-    'emotion',
-    'final-form',
-    'history',
-    'moment',
-    'react',
-    'react-dom',
-    'react-final-form',
-    'react-router',
-    'react-router-dom',
-    'tslint-react',
-  ],
+  externals: ['emotion', 'final-form', 'history', 'moment', 'react', 'react-dom', 'react-final-form', 'tslint-react'],
   optimization: {
     minimizer: [
       new UglifyJsPlugin({
diff --git a/yarn.lock b/yarn.lock
index c6c2f2ae7..6220a855e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1996,11 +1996,6 @@
   resolved "https://registry.yarnpkg.com/@types/highlight.js/-/highlight.js-9.12.3.tgz#b672cfaac25cbbc634a0fd92c515f66faa18dbca"
   integrity sha512-pGF/zvYOACZ/gLGWdQH8zSwteQS1epp68yRcVLJMgUck/MjEn/FBYmPub9pXT8C1e4a8YZfHo1CKyV8q1vKUnQ==
 
-"@types/history@*":
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220"
-  integrity sha512-ui3WwXmjTaY73fOQ3/m3nnajU/Orhi6cEu5rzX+BrAAJxa3eITXZ5ch9suPqtM03OWhAHhPSyBGCN4UKoxO20Q==
-
 "@types/hoist-non-react-statics@3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -2125,23 +2120,6 @@
     "@types/react" "*"
     "@types/webpack" "*"
 
-"@types/react-router-dom@4.3.3":
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.3.3.tgz#7837e3e9fefbc84a8f6c8a51dca004f4e83e94e3"
-  integrity sha512-xj0DmFjgvAqRfh/kJPO7apD5G30yPQe+8slu/dugioQOkdKpyzc4Fgk4hoTelm6CSHz7pI2PPsW5+Y6GRBF2zw==
-  dependencies:
-    "@types/history" "*"
-    "@types/react" "*"
-    "@types/react-router" "*"
-
-"@types/react-router@*", "@types/react-router@5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.0.1.tgz#9f4548c75755c55b0cffdd743080e5afa87da6dd"
-  integrity sha512-vOyVO0u3Cs0w6G5DzYqNVqcTsurEnDgOmmkJf2s7VwtunWzpPgI6dHsCBX68vXqeICpP6jCfojgJcHkm5BV7hQ==
-  dependencies:
-    "@types/history" "*"
-    "@types/react" "*"
-
 "@types/react-text-mask@5.4.4":
   version "5.4.4"
   resolved "https://registry.yarnpkg.com/@types/react-text-mask/-/react-text-mask-5.4.4.tgz#eb4606e1c431b7bd2f5e817ea141432cc63b58c1"
@@ -6421,7 +6399,7 @@ highlight.js@~9.12.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
   integrity sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=
 
-history@^4.7.2, history@^4.9.0:
+history@^4.7.2:
   version "4.9.0"
   resolved "https://registry.yarnpkg.com/history/-/history-4.9.0.tgz#84587c2068039ead8af769e9d6a6860a14fa1bca"
   integrity sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==
@@ -6442,7 +6420,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@3.3.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@3.3.0, hoist-non-react-statics@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
   integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
@@ -9339,13 +9317,6 @@ path-to-regexp@2.1.0:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.1.0.tgz#7e30f9f5b134bd6a28ffc2e3ef1e47075ac5259b"
   integrity sha512-dZY7QPCPp5r9cnNuQ955mOv4ZFVDXY/yvqeV7Y1W2PJA3PEFcuow9xKFfJxbBj1pIjOAP+M2B4/7xubmykLrXw==
 
-path-to-regexp@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
-  integrity sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=
-  dependencies:
-    isarray "0.0.1"
-
 path-type@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
@@ -10111,7 +10082,7 @@ react-inspector@^2.3.0, react-inspector@^2.3.1:
     is-dom "^1.0.9"
     prop-types "^15.6.1"
 
-react-is@16.8.6, react-is@^16.5.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
+react-is@16.8.6, react-is@^16.5.2, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
@@ -10161,35 +10132,6 @@ react-resize-detector@^3.2.1:
     prop-types "^15.6.2"
     resize-observer-polyfill "^1.5.1"
 
-react-router-dom@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.0.tgz#542a9b86af269a37f0b87218c4c25ea8dcf0c073"
-  integrity sha512-wSpja5g9kh5dIteZT3tUoggjnsa+TPFHSMrpHXMpFsaHhQkm/JNVGh2jiF9Dkh4+duj4MKCkwO6H08u6inZYgQ==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    history "^4.9.0"
-    loose-envify "^1.3.1"
-    prop-types "^15.6.2"
-    react-router "5.0.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
-
-react-router@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.0.tgz#349863f769ffc2fa10ee7331a4296e86bc12879d"
-  integrity sha512-6EQDakGdLG/it2x9EaCt9ZpEEPxnd0OCLBHQ1AcITAAx7nCnyvnzf76jKWG1s2/oJ7SSviUgfWHofdYljFexsA==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    create-react-context "^0.2.2"
-    history "^4.9.0"
-    hoist-non-react-statics "^3.1.0"
-    loose-envify "^1.3.1"
-    path-to-regexp "^1.7.0"
-    prop-types "^15.6.2"
-    react-is "^16.6.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
-
 react-select@^2.3.0:
   version "2.4.4"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-2.4.4.tgz#ba72468ef1060c7d46fbb862b0748f96491f1f73"


Test patch:
diff --git a/src/components/elements/Breadcrumb/Breadcrumbs.test.tsx b/src/components/elements/Breadcrumb/Breadcrumbs.test.tsx
new file mode 100644
index 000000000..1e2cd2521
--- /dev/null
+++ b/src/components/elements/Breadcrumb/Breadcrumbs.test.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { render } from 'react-testing-library'
+
+import { Link } from '../../elements/Link'
+
+import { Breadcrumbs } from './Breadcrumbs'
+
+it('should render correctly', () => {
+  const { container } = render(
+    <Breadcrumbs>
+      <Link href='/first'>Link 1</Link>
+      <Link href='/first/second'>Link 2</Link>
+      <Link href='/first/second/third'>Link 3</Link>
+    </Breadcrumbs>
+  )
+  expect(container).toMatchSnapshot()
+})
diff --git a/src/components/elements/Breadcrumb/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/elements/Breadcrumb/__snapshots__/Breadcrumbs.test.tsx.snap
similarity index 53%
rename from src/components/elements/Breadcrumb/__snapshots__/breadcrumbs.test.tsx.snap
rename to src/components/elements/Breadcrumb/__snapshots__/Breadcrumbs.test.tsx.snap
index b801c4bcb..04e4e455f 100644
--- a/src/components/elements/Breadcrumb/__snapshots__/breadcrumbs.test.tsx.snap
+++ b/src/components/elements/Breadcrumb/__snapshots__/Breadcrumbs.test.tsx.snap
@@ -1,13 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BreadcrumbNav should render correctly 1`] = `
-.emotion-5 {
+exports[`should render correctly 1`] = `
+.emotion-10 {
+  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;
   list-style: none;
   padding: 0;
   margin: 0;
+  color: #2D343B;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-2 {
+.emotion-1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -18,8 +29,23 @@ exports[`BreadcrumbNav should render correctly 1`] = `
   align-items: center;
 }
 
-.emotion-2:last-of-type a {
-  pointer-events: none;
+.emotion-1:hover {
+  color: #0A67D1;
+}
+
+.emotion-9 {
+  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;
+  color: #0A67D1;
+}
+
+.emotion-9:hover {
   color: #0A67D1;
 }
 
@@ -35,11 +61,6 @@ exports[`BreadcrumbNav should render correctly 1`] = `
   outline: none;
   -webkit-transition: box-shadow .2s ease;
   transition: box-shadow .2s ease;
-  color: #2D343B;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-weight: bold;
-  display: inline-block;
 }
 
 .emotion-0:hover {
@@ -54,11 +75,7 @@ exports[`BreadcrumbNav should render correctly 1`] = `
   box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
 }
 
-.emotion-0:hover {
-  color: #0A67D1;
-}
-
-.emotion-1 {
+.emotion-2 {
   fill: currentColor;
   font-size: 1rem;
   color: #B9B9BD;
@@ -71,21 +88,56 @@ exports[`BreadcrumbNav should render correctly 1`] = `
     aria-label="Breadcrumbs"
   >
     <ol
-      class="emotion-5"
+      class="emotion-10"
     >
       <li
-        class="emotion-2"
+        class="emotion-1"
       >
         <a
           class="emotion-0"
-          href="/"
+          href="/first"
           tabindex="0"
         >
-          Entry #1
+          Link 1
         </a>
+      </li>
+      <li
+        aria-hidden="true"
+        class="emotion-1"
+        role="separator"
+      >
+        <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>
+      </li>
+      <li
+        class="emotion-1"
+      >
+        <a
+          class="emotion-0"
+          href="/first/second"
+          tabindex="-1"
+        >
+          Link 2
+        </a>
+      </li>
+      <li
+        aria-hidden="true"
+        class="emotion-1"
+        role="separator"
+      >
         <svg
           aria-hidden="true"
-          class="emotion-1"
+          class="emotion-2"
           height="1em"
           role="img"
           viewBox="0 0 24 24"
@@ -97,14 +149,14 @@ exports[`BreadcrumbNav should render correctly 1`] = `
         </svg>
       </li>
       <li
-        class="emotion-2"
+        class="emotion-9"
       >
         <a
           class="emotion-0"
-          href="/second"
+          href="/first/second/third"
           tabindex="-1"
         >
-          Entry #2
+          Link 3
         </a>
       </li>
     </ol>
diff --git a/src/components/elements/Breadcrumb/breadcrumbs.test.tsx b/src/components/elements/Breadcrumb/breadcrumbs.test.tsx
deleted file mode 100644
index dc0e6e646..000000000
--- a/src/components/elements/Breadcrumb/breadcrumbs.test.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-// tslint:disable:no-string-literal
-
-import React from 'react'
-import { fireEvent, render, wait } from 'react-testing-library'
-
-import { withRouter } from '../../../test'
-
-import { Breadcrumb, BreadcrumbEntry, BreadcrumbNav, BreadcrumbProvider, BreadcrumbStore } from './'
-
-const entry1: BreadcrumbEntry = { key: '1', title: 'Entry #1', to: '/' }
-const entry2: BreadcrumbEntry = { key: '2', title: 'Entry #2', to: '/second' }
-
-describe('BreadcrumbStore', () => {
-  it('should allow push of entries', () => {
-    const store = new BreadcrumbStore()
-    expect(store.getEntries()).toEqual([])
-    store.push(entry1)
-    expect(store.getEntries()).toEqual([entry1])
-    store.push(entry2)
-    expect(store.getEntries()).toEqual([entry1, entry2])
-  })
-
-  it('should allow pop of entries', () => {
-    const store = new BreadcrumbStore()
-    store.push(entry1)
-    store.push(entry2)
-    expect(store.getEntries()).toEqual([entry1, entry2])
-    store.pop(entry1)
-    expect(store.getEntries()).toEqual([entry2])
-  })
-
-  it('should allow adding listeners', () => {
-    const listener = jest.fn()
-    const store = new BreadcrumbStore()
-    store.subscribe(listener)
-    expect(store['listeners']).toEqual([listener])
-  })
-
-  it('should return the unsubscribe function when a new listener is subscribed', () => {
-    const listener = jest.fn()
-    const store = new BreadcrumbStore()
-    const unsubscribe = store.subscribe(listener)
-    unsubscribe()
-    expect(store['listeners']).toEqual([])
-  })
-
-  it('should invoke listeners passing entries when store is changed', async () => {
-    const listener = jest.fn()
-    const listener2 = jest.fn()
-    const store = new BreadcrumbStore()
-    store.subscribe(listener)
-    store.subscribe(listener2)
-
-    store.push(entry1)
-    await wait()
-    expect(listener).toHaveBeenLastCalledWith([entry1])
-
-    store.push(entry2)
-    await wait()
-    expect(listener).toHaveBeenLastCalledWith([entry1, entry2])
-    expect(listener2).toHaveBeenLastCalledWith([entry1, entry2])
-
-    store.pop(entry2)
-    await wait()
-    expect(listener).toHaveBeenLastCalledWith([entry1])
-  })
-})
-
-describe('BreadcrumbNav', () => {
-  it('should render correctly', () => {
-    const store = new BreadcrumbStore()
-    store.push(entry1)
-    store.push(entry2)
-
-    const { container } = render(
-      withRouter(
-        <BreadcrumbProvider value={store}>
-          <BreadcrumbNav />
-        </BreadcrumbProvider>
-      )
-    )
-    expect(container).toMatchSnapshot()
-  })
-  it('should have a roving tab index', () => {
-    const store = new BreadcrumbStore()
-    store.push(entry1)
-    store.push(entry2)
-
-    const { container } = render(
-      withRouter(
-        <BreadcrumbProvider value={store}>
-          <BreadcrumbNav />
-        </BreadcrumbProvider>
-      )
-    )
-
-    const nav = container.querySelector('nav')
-    const a = container.querySelectorAll('a')
-
-    a[0].focus()
-    expect(a[0].getAttribute('tabindex')).toEqual('0')
-    expect(a[1].getAttribute('tabindex')).toEqual('-1')
-
-    fireEvent.keyDown(nav, { key: 'ArrowDown' })
-    expect(document.activeElement).toEqual(a[1])
-    expect(a[0].getAttribute('tabindex')).toEqual('-1')
-    expect(a[1].getAttribute('tabindex')).toEqual('0')
-  })
-})
-
-describe('Breadcrumb', () => {
-  it('should add entry to the store when mounted', () => {
-    const store = new BreadcrumbStore()
-    render(
-      withRouter(
-        <BreadcrumbProvider value={store}>
-          <Breadcrumb title='Entry #1' to='/1' />
-        </BreadcrumbProvider>
-      )
-    )
-
-    expect(store.getEntries()).toHaveLength(1)
-    expect(store.getEntries()[0].key).toBeDefined()
-    expect(store.getEntries()[0].title).toEqual('Entry #1')
-    expect(store.getEntries()[0].to).toEqual('/1')
-  })
-
-  it('should remove entry from store when unmounted', () => {
-    const store = new BreadcrumbStore()
-    const { unmount } = render(
-      withRouter(
-        <BreadcrumbProvider value={store}>
-          <Breadcrumb title='Entry #1' to='/1' />
-        </BreadcrumbProvider>
-      )
-    )
-
-    unmount()
-    expect(store.getEntries()).toHaveLength(0)
-  })
-})
diff --git a/src/components/elements/Button/ButtonLink/ButtonLink.test.tsx b/src/components/elements/Button/ButtonLink/ButtonLink.test.tsx
deleted file mode 100644
index 4e77a4ba5..000000000
--- a/src/components/elements/Button/ButtonLink/ButtonLink.test.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import { MemoryRouter } from 'react-router'
-import { render } from 'react-testing-library'
-
-import { ButtonLink } from './ButtonLink'
-
-it('should render correctly', () => {
-  const { container } = render(
-    <MemoryRouter initialEntries={['/']} initialIndex={0}>
-      <ButtonLink to='/'>Link to home</ButtonLink>
-    </MemoryRouter>
-  )
-  expect(container).toMatchSnapshot()
-})
-
-it('should have tabIndex -1 and aria-disabled when disabled', () => {
-  const { container } = render(
-    <MemoryRouter initialEntries={['/']} initialIndex={0}>
-      <ButtonLink to='/' disabled>
-        Link to home
-      </ButtonLink>
-    </MemoryRouter>
-  )
-  expect(container.querySelector('a').getAttribute('aria-disabled')).toEqual('true')
-  expect(container.querySelector('a').getAttribute('tabIndex')).toEqual('-1')
-})
diff --git a/src/components/elements/Button/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap b/src/components/elements/Button/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap
deleted file mode 100644
index 573a1de70..000000000
--- a/src/components/elements/Button/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap
+++ /dev/null
@@ -1,68 +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 #818489;
-  border-radius: 4px;
-  color: #2D343B;
-  font-size: 0.875rem;
-  padding: calc(0.75rem - 1px) 2.5rem;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.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 #F2F2F7,0 0 0 4px #0A67D1;
-}
-
-.emotion-0:not(:disabled):hover {
-  background-color: #ebebeb;
-}
-
-<div>
-  <a
-    class="emotion-0"
-    href="/"
-    type="button"
-  >
-    <span>
-      Link to home
-    </span>
-  </a>
-</div>
-`;
diff --git a/src/components/elements/FileUploader/__snapshots__/FileUploader.test.tsx.snap b/src/components/elements/FileUploader/__snapshots__/FileUploader.test.tsx.snap
index ee8ea73e6..b0d420b8c 100644
--- a/src/components/elements/FileUploader/__snapshots__/FileUploader.test.tsx.snap
+++ b/src/components/elements/FileUploader/__snapshots__/FileUploader.test.tsx.snap
@@ -100,17 +100,28 @@ exports[`should render correct without extension 1`] = `
   font-size: 1.5rem;
 }
 
+.emotion-9 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #2D343B;
+}
+
 .emotion-2 {
   font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
   color: #53595E;
+  font-size: 0.875rem;
   font-weight: bold;
 }
 
 .emotion-6 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
   color: #53595E;
   font-weight: bold;
   background-color: #F2F2F7;
@@ -120,16 +131,13 @@ exports[`should render correct without extension 1`] = `
 
 .emotion-8 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
   font-weight: bold;
   margin-right: 10px;
 }
 
-.emotion-9 {
-  font-family: "IBM Plex Sans",sans-serif;
-  line-height: 1.5;
-}
-
 .emotion-7 {
   fill: #0A67D1;
   font-size: 1rem;
@@ -290,9 +298,11 @@ exports[`should render correctly at initial state 1`] = `
 
 .emotion-2 {
   font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
   color: #53595E;
+  font-size: 0.875rem;
   font-weight: bold;
 }
 
@@ -443,17 +453,28 @@ exports[`should render correctly at uploading state 1`] = `
   font-size: 1.5rem;
 }
 
+.emotion-8 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #2D343B;
+}
+
 .emotion-2 {
   font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
   color: #53595E;
+  font-size: 0.875rem;
   font-weight: bold;
 }
 
 .emotion-6 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
   color: #53595E;
   font-weight: bold;
   background-color: #F2F2F7;
@@ -463,16 +484,13 @@ exports[`should render correctly at uploading state 1`] = `
 
 .emotion-7 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
   font-weight: bold;
   margin-right: 10px;
 }
 
-.emotion-8 {
-  font-family: "IBM Plex Sans",sans-serif;
-  line-height: 1.5;
-}
-
 .emotion-10 {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -680,17 +698,28 @@ exports[`should render correctly complete state 1`] = `
   font-size: 1.5rem;
 }
 
+.emotion-9 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #2D343B;
+}
+
 .emotion-2 {
   font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
   color: #53595E;
+  font-size: 0.875rem;
   font-weight: bold;
 }
 
 .emotion-6 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
   color: #53595E;
   font-weight: bold;
   background-color: #F2F2F7;
@@ -700,16 +729,13 @@ exports[`should render correctly complete state 1`] = `
 
 .emotion-8 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
   font-weight: bold;
   margin-right: 10px;
 }
 
-.emotion-9 {
-  font-family: "IBM Plex Sans",sans-serif;
-  line-height: 1.5;
-}
-
 .emotion-7 {
   fill: #0A67D1;
   font-size: 1rem;
diff --git a/src/components/elements/Link/Link.test.tsx b/src/components/elements/Link/Link.test.tsx
index f8d51c5fc..0357bce61 100644
--- a/src/components/elements/Link/Link.test.tsx
+++ b/src/components/elements/Link/Link.test.tsx
@@ -1,9 +1,6 @@
-import React from 'react'
-import { Link as RouterLink } from 'react-router-dom'
+import React, { ButtonHTMLAttributes } from 'react'
 import { render } from 'react-testing-library'
 
-import { withRouter } from '../../../test'
-
 import { Link } from './Link'
 
 it('should render correctly', () => {
@@ -25,14 +22,23 @@ it('should accept the "style" prop', () => {
 })
 
 it('should accept "component" prop', () => {
-  render(<Link component='button'>Button link</Link>)
+  const { container } = render(<Link component='button'>Button link</Link>)
+  expect(container).toMatchSnapshot()
+})
 
+it('should accept all Text props', () => {
   const { container } = render(
-    withRouter(
-      <Link component={RouterLink} to='/'>
-        Router link
-      </Link>
-    )
+    <Link color='inherit' fontSize={2} fontWeight='bolder' fontStyle='italic' textDecoration='none'>
+      All text props
+    </Link>
   )
   expect(container).toMatchSnapshot()
 })
+
+it('should accept type argument and infer props', () => {
+  render(
+    <Link<ButtonHTMLAttributes<HTMLButtonElement>> component='button' autoFocus>
+      Link as button tag
+    </Link>
+  )
+})
diff --git a/src/components/elements/Link/__snapshots__/Link.test.tsx.snap b/src/components/elements/Link/__snapshots__/Link.test.tsx.snap
index 0a612c33f..a01dec751 100644
--- a/src/components/elements/Link/__snapshots__/Link.test.tsx.snap
+++ b/src/components/elements/Link/__snapshots__/Link.test.tsx.snap
@@ -27,12 +27,53 @@ exports[`should accept "component" prop 1`] = `
   box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
 }
 
+<div>
+  <button
+    class="emotion-0"
+  >
+    Button link
+  </button>
+</div>
+`;
+
+exports[`should accept all Text props 1`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #0A67D1;
+  font-weight: bold;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  color: inherit;
+  font-size: 2rem;
+  font-weight: bolder;
+  font-style: italic;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  -webkit-transition: box-shadow .2s ease;
+  transition: box-shadow .2s ease;
+}
+
+.emotion-0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-0:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border-radius: 2px;
+  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+}
+
 <div>
   <a
     class="emotion-0"
-    href="/"
   >
-    Router link
+    All text props
   </a>
 </div>
 `;
diff --git a/src/components/elements/MonthPicker/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap b/src/components/elements/MonthPicker/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap
index 3a0fe00a8..3f76aae27 100644
--- a/src/components/elements/MonthPicker/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap
+++ b/src/components/elements/MonthPicker/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap
@@ -132,8 +132,10 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
 
 .emotion-3 {
   font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
+  font-size: 0.875rem;
   font-weight: bold;
 }
 
diff --git a/src/components/elements/MonthPicker/MonthPickerInput/__snapshots__/MonthPickerInput.test.tsx.snap b/src/components/elements/MonthPicker/MonthPickerInput/__snapshots__/MonthPickerInput.test.tsx.snap
index 4fa1c5c54..c98244542 100644
--- a/src/components/elements/MonthPicker/MonthPickerInput/__snapshots__/MonthPickerInput.test.tsx.snap
+++ b/src/components/elements/MonthPicker/MonthPickerInput/__snapshots__/MonthPickerInput.test.tsx.snap
@@ -302,8 +302,10 @@ exports[`MonthPickerInput should render correctly 1`] = `
 
 .emotion-9 {
   font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
+  font-size: 0.875rem;
   font-weight: bold;
 }
 
diff --git a/src/components/elements/Paginator/__snapshots__/Paginator.test.tsx.snap b/src/components/elements/Paginator/__snapshots__/Paginator.test.tsx.snap
index 576c72c95..c079b3415 100644
--- a/src/components/elements/Paginator/__snapshots__/Paginator.test.tsx.snap
+++ b/src/components/elements/Paginator/__snapshots__/Paginator.test.tsx.snap
@@ -75,7 +75,9 @@ exports[`should render correctly 1`] = `
 
 .emotion-4 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
 }
 
 .emotion-6 {
@@ -293,7 +295,9 @@ exports[`should render correctly 2`] = `
 
 .emotion-4 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
 }
 
 .emotion-6 {
@@ -565,7 +569,9 @@ exports[`should render correctly 3`] = `
 
 .emotion-4 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
 }
 
 .emotion-6 {
diff --git a/src/components/elements/SelectInline/__snapshots__/SelectInline.test.tsx.snap b/src/components/elements/SelectInline/__snapshots__/SelectInline.test.tsx.snap
index 9260c012f..9c47f33d5 100644
--- a/src/components/elements/SelectInline/__snapshots__/SelectInline.test.tsx.snap
+++ b/src/components/elements/SelectInline/__snapshots__/SelectInline.test.tsx.snap
@@ -66,7 +66,9 @@ exports[`SelectInline should render correctly when closed 1`] = `
 
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
 }
 
 .emotion-5 {
@@ -503,7 +505,9 @@ exports[`SelectInline should render correctly when opened 1`] = `
 
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
 }
 
 .emotion-5 {
@@ -942,7 +946,9 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
 
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
 }
 
 .emotion-5 {
diff --git a/src/components/elements/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap b/src/components/elements/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
index 857c9c41a..ecc332905 100644
--- a/src/components/elements/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
+++ b/src/components/elements/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
@@ -81,7 +81,9 @@ exports[`renders correctly 1`] = `
 
 .emotion-1 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
 }
 
 .emotion-5 {
diff --git a/src/components/elements/Tabs/Tabs.test.tsx b/src/components/elements/Tabs/Tabs.test.tsx
index 611e80b29..6cfd28725 100644
--- a/src/components/elements/Tabs/Tabs.test.tsx
+++ b/src/components/elements/Tabs/Tabs.test.tsx
@@ -1,83 +1,67 @@
-import { createMemoryHistory } from 'history'
-import React from 'react'
+import React, { AnchorHTMLAttributes } from 'react'
 import { fireEvent, render } from 'react-testing-library'
 
-import { withRouter } from '../../../test'
-
-import { TabLink, Tabs } from './Tabs'
+import { TabItem, TabItemProps } from './TabItem'
+import { Tabs } from './Tabs'
 
 it('renders correctly', () => {
   expect(
     render(
-      withRouter(
-        <Tabs>
-          <TabLink to='/'>Home</TabLink>
-          <TabLink to='/test'>Test</TabLink>
-          <TabLink to='/active' active>
-            Active
-          </TabLink>
-          <TabLink to='/disabled' disabled>
-            Disabled
-          </TabLink>
-        </Tabs>
-      )
+      <Tabs>
+        <TabItem>Home</TabItem>
+        <TabItem>Test</TabItem>
+        <TabItem active>Active</TabItem>
+        <TabItem disabled>Disabled</TabItem>
+      </Tabs>
     ).container
   ).toMatchSnapshot()
 })
 
-it('should not navigate when tab link is disabled', () => {
-  const history = createMemoryHistory()
-  const { container } = render(
-    withRouter(
-      <Tabs>
-        <TabLink to='/test'>Test</TabLink>
-        <TabLink to='/disabled' disabled>
-          Disabled
-        </TabLink>
-      </Tabs>,
-      history
-    )
+it('shuld accept "component" prop', () => {
+  const TabLink = (props: AnchorHTMLAttributes<HTMLAnchorElement> & TabItemProps) => (
+    <TabItem component='a' {...props} />
   )
-  expect(history.location.pathname).toEqual('/')
 
-  fireEvent.click(container.querySelectorAll('a')[0])
-  expect(history.location.pathname).toEqual('/test')
-
-  fireEvent.click(container.querySelectorAll('a')[1])
-  expect(history.location.pathname).toEqual('/test')
+  const { container } = render(
+    <Tabs>
+      <TabLink href='/'>Home</TabLink>
+      <TabLink href='/'>Test</TabLink>
+      <TabLink href='/' active>
+        Active
+      </TabLink>
+      <TabLink href='/' disabled>
+        Disabled
+      </TabLink>
+    </Tabs>
+  )
+  expect(container).toMatchSnapshot()
 })
 
 it('should have a roving tabindex', () => {
   const { container } = render(
-    withRouter(
-      <Tabs>
-        <TabLink to='/'>Home</TabLink>
-        <TabLink to='/test'>Test</TabLink>
-        <TabLink to='/active' active>
-          Active
-        </TabLink>
-        <TabLink to='/disabled' disabled>
-          Disabled
-        </TabLink>
-      </Tabs>
-    )
+    <Tabs>
+      <TabItem>Home</TabItem>
+      <TabItem>Test</TabItem>
+      <TabItem active>Active</TabItem>
+      <TabItem disabled>Disabled</TabItem>
+    </Tabs>
   )
   const ul = container.querySelector('ul')
-  const links = container.querySelectorAll('a')
-  expect(links[0].getAttribute('tabindex')).toEqual('0')
-  expect(links[1].getAttribute('tabindex')).toEqual('-1')
+  const items = container.querySelectorAll<any>('[role="tab"]')
+  expect(items[0].getAttribute('tabindex')).toEqual('0')
+  expect(items[1].getAttribute('tabindex')).toEqual('-1')
 
-  links[2].focus()
-  expect(links[0].getAttribute('tabindex')).toEqual('-1')
-  expect(links[1].getAttribute('tabindex')).toEqual('-1')
-  expect(links[2].getAttribute('tabindex')).toEqual('0')
-  expect(links[3].getAttribute('tabindex')).toEqual('-1')
+  items[2].focus()
+  expect(items[0].getAttribute('tabindex')).toEqual('-1')
+  expect(items[1].getAttribute('tabindex')).toEqual('-1')
+  expect(items[2].getAttribute('tabindex')).toEqual('0')
+  expect(items[3].getAttribute('tabindex')).toEqual('-1')
 
   fireEvent.keyDown(ul, { key: 'ArrowDown' })
-  expect(links[2].getAttribute('tabindex')).toEqual('-1')
-  expect(links[3].getAttribute('tabindex')).toEqual('0')
+  expect(items[2].getAttribute('tabindex')).toEqual('-1')
+  expect(items[3].getAttribute('tabindex')).toEqual('0')
 
   fireEvent.keyDown(ul, { key: 'ArrowUp' })
-  expect(links[2].getAttribute('tabindex')).toEqual('0')
-  expect(links[3].getAttribute('tabindex')).toEqual('-1')
+  expect(items[2].getAttribute('tabindex')).toEqual('0')
+  expect(items[3].getAttribute('tabindex')).toEqual('-1')
 })
diff --git a/src/components/elements/Tabs/__snapshots__/Tabs.test.tsx.snap b/src/components/elements/Tabs/__snapshots__/Tabs.test.tsx.snap
index 917b901f4..f037ed059 100644
--- a/src/components/elements/Tabs/__snapshots__/Tabs.test.tsx.snap
+++ b/src/components/elements/Tabs/__snapshots__/Tabs.test.tsx.snap
@@ -27,15 +27,14 @@ exports[`renders correctly 1`] = `
   transition: background .15s,border-color .15s;
 }
 
-.emotion-0.active {
-  color: #0A67D1;
-  border-bottom-color: #0A67D1;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+.emotion-0:not(.disabled):hover {
+  cursor: pointer;
+  background: #F2F2F7;
 }
 
-.emotion-0:not(.disabled):hover {
+.emotion-0:not(.disabled):active {
   background: #F2F2F7;
+  box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14),inset 0 2px 4px 0 rgba(0,0,0,0.08);
 }
 
 .emotion-0:focus {
@@ -44,11 +43,41 @@ exports[`renders correctly 1`] = `
   border-bottom-right-radius: 4px;
 }
 
-.emotion-0:not(.disabled):active {
+.emotion-4 {
+  display: inline-block;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #2D343B;
+  font-weight: bold;
+  padding: 0.5rem 0.75rem;
+  line-height: 1rem;
+  border-radius: 4px;
+  outline: 0;
+  border: 2px solid transparent;
+  -webkit-transition: background .15s,border-color .15s;
+  transition: background .15s,border-color .15s;
+  color: #0A67D1;
+  border-bottom-color: #0A67D1;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.emotion-4:not(.disabled):hover {
+  cursor: pointer;
+  background: #F2F2F7;
+}
+
+.emotion-4:not(.disabled):active {
   background: #F2F2F7;
   box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14),inset 0 2px 4px 0 rgba(0,0,0,0.08);
 }
 
+.emotion-4:focus {
+  border-color: #0A67D1;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
 .emotion-6 {
   display: inline-block;
   -webkit-text-decoration: none;
@@ -63,31 +92,195 @@ exports[`renders correctly 1`] = `
   -webkit-transition: background .15s,border-color .15s;
   transition: background .15s,border-color .15s;
   color: #B9B9BD;
+}
+
+.emotion-6:not(.disabled):hover {
+  cursor: pointer;
+  background: #F2F2F7;
+}
+
+.emotion-6:not(.disabled):active {
+  background: #F2F2F7;
+  box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14),inset 0 2px 4px 0 rgba(0,0,0,0.08);
+}
+
+.emotion-6:focus {
+  border-color: #0A67D1;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.emotion-6:hover {
   cursor: not-allowed;
 }
 
-.emotion-6.active {
+<div>
+  <ul
+    class="emotion-8"
+    role="tablist"
+  >
+    <li
+      class="emotion-1"
+    >
+      <span
+        class="emotion-0"
+        role="tab"
+        tabindex="0"
+      >
+        Home
+      </span>
+    </li>
+    <li
+      class="emotion-1"
+    >
+      <span
+        class="emotion-0"
+        role="tab"
+        tabindex="-1"
+      >
+        Test
+      </span>
+    </li>
+    <li
+      class="emotion-1"
+    >
+      <span
+        class="emotion-4"
+        role="tab"
+        tabindex="-1"
+      >
+        Active
+      </span>
+    </li>
+    <li
+      class="emotion-1"
+    >
+      <span
+        class="emotion-6 disabled"
+        role="tab"
+        tabindex="-1"
+      >
+        Disabled
+      </span>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`shuld accept "component" prop 1`] = `
+.emotion-8 {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.emotion-1 {
+  display: inline-block;
+}
+
+.emotion-0 {
+  display: inline-block;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #2D343B;
+  font-weight: bold;
+  padding: 0.5rem 0.75rem;
+  line-height: 1rem;
+  border-radius: 4px;
+  outline: 0;
+  border: 2px solid transparent;
+  -webkit-transition: background .15s,border-color .15s;
+  transition: background .15s,border-color .15s;
+}
+
+.emotion-0:not(.disabled):hover {
+  cursor: pointer;
+  background: #F2F2F7;
+}
+
+.emotion-0:not(.disabled):active {
+  background: #F2F2F7;
+  box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14),inset 0 2px 4px 0 rgba(0,0,0,0.08);
+}
+
+.emotion-0:focus {
+  border-color: #0A67D1;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.emotion-4 {
+  display: inline-block;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #2D343B;
+  font-weight: bold;
+  padding: 0.5rem 0.75rem;
+  line-height: 1rem;
+  border-radius: 4px;
+  outline: 0;
+  border: 2px solid transparent;
+  -webkit-transition: background .15s,border-color .15s;
+  transition: background .15s,border-color .15s;
   color: #0A67D1;
   border-bottom-color: #0A67D1;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.emotion-6:not(.disabled):hover {
+.emotion-4:not(.disabled):hover {
+  cursor: pointer;
   background: #F2F2F7;
 }
 
-.emotion-6:focus {
+.emotion-4:not(.disabled):active {
+  background: #F2F2F7;
+  box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14),inset 0 2px 4px 0 rgba(0,0,0,0.08);
+}
+
+.emotion-4:focus {
   border-color: #0A67D1;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
 
+.emotion-6 {
+  display: inline-block;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #2D343B;
+  font-weight: bold;
+  padding: 0.5rem 0.75rem;
+  line-height: 1rem;
+  border-radius: 4px;
+  outline: 0;
+  border: 2px solid transparent;
+  -webkit-transition: background .15s,border-color .15s;
+  transition: background .15s,border-color .15s;
+  color: #B9B9BD;
+}
+
+.emotion-6:not(.disabled):hover {
+  cursor: pointer;
+  background: #F2F2F7;
+}
+
 .emotion-6:not(.disabled):active {
   background: #F2F2F7;
   box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14),inset 0 2px 4px 0 rgba(0,0,0,0.08);
 }
 
+.emotion-6:focus {
+  border-color: #0A67D1;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.emotion-6:hover {
+  cursor: not-allowed;
+}
+
 <div>
   <ul
     class="emotion-8"
@@ -95,11 +288,9 @@ exports[`renders correctly 1`] = `
   >
     <li
       class="emotion-1"
-      role="presentation"
     >
       <a
-        aria-current="page"
-        class="emotion-0 active"
+        class="emotion-0"
         href="/"
         role="tab"
         tabindex="0"
@@ -109,11 +300,10 @@ exports[`renders correctly 1`] = `
     </li>
     <li
       class="emotion-1"
-      role="presentation"
     >
       <a
         class="emotion-0"
-        href="/test"
+        href="/"
         role="tab"
         tabindex="-1"
       >
@@ -122,12 +312,10 @@ exports[`renders correctly 1`] = `
     </li>
     <li
       class="emotion-1"
-      role="presentation"
     >
       <a
-        aria-current="page"
-        class="emotion-0 active"
-        href="/active"
+        class="emotion-4"
+        href="/"
         role="tab"
         tabindex="-1"
       >
@@ -136,12 +324,10 @@ exports[`renders correctly 1`] = `
     </li>
     <li
       class="emotion-1"
-      role="presentation"
     >
       <a
-        aria-disabled="true"
         class="emotion-6 disabled"
-        href="/disabled"
+        href="/"
         role="tab"
         tabindex="-1"
       >
diff --git a/src/components/elements/textual/Heading/Heading.test.tsx b/src/components/elements/textual/Heading/Heading.test.tsx
index 184e5e4d6..2117667ee 100644
--- a/src/components/elements/textual/Heading/Heading.test.tsx
+++ b/src/components/elements/textual/Heading/Heading.test.tsx
@@ -12,10 +12,10 @@ it('should render correctly', () => {
   expect(render(<Heading level={6}>Heading 6</Heading>).container).toMatchSnapshot()
 })
 
-it('should accept color prop', () => {
+it('should accept all text props', () => {
   const { container } = render(
-    <Heading level={1} color='primary'>
-      Heading Primary color
+    <Heading level={1} color='primary' fontWeight='bolder' fontSize={4} textDecoration='underline' fontStyle='italic'>
+      Heading with all text props
     </Heading>
   )
   expect(container).toMatchSnapshot()
@@ -23,7 +23,7 @@ it('should accept color prop', () => {
 
 it('should accept style prop', () => {
   const { container } = render(
-    <Heading level={1} style={{ fontStyle: 'italic' }}>
+    <Heading level={1} style={{ color: 'red' }}>
       Heading Primary color
     </Heading>
   )
diff --git a/src/components/elements/textual/Heading/__snapshots__/Heading.test.tsx.snap b/src/components/elements/textual/Heading/__snapshots__/Heading.test.tsx.snap
index 200a737f7..8eca4b36f 100644
--- a/src/components/elements/textual/Heading/__snapshots__/Heading.test.tsx.snap
+++ b/src/components/elements/textual/Heading/__snapshots__/Heading.test.tsx.snap
@@ -1,22 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should accept color prop 1`] = `
+exports[`should accept all text props 1`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 1.5rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
   color: #0A67D1;
+  font-size: 4rem;
+  font-weight: bolder;
+  font-style: italic;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 <div>
   <h1
     class="emotion-0"
   >
-    Heading Primary color
+    Heading with all text props
   </h1>
 </div>
 `;
 
 exports[`should accept style prop 1`] = `
 .emotion-0 {
-  font-style: italic;
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 1.5rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
+  color: red;
 }
 
 <div>
@@ -29,6 +44,14 @@ exports[`should accept style prop 1`] = `
 `;
 
 exports[`should render correctly 1`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 1.5rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
+}
+
 <div>
   <h1
     class="emotion-0"
@@ -39,6 +62,14 @@ exports[`should render correctly 1`] = `
 `;
 
 exports[`should render correctly 2`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 1.25rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
+}
+
 <div>
   <h2
     class="emotion-0"
@@ -49,6 +80,14 @@ exports[`should render correctly 2`] = `
 `;
 
 exports[`should render correctly 3`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
+}
+
 <div>
   <h3
     class="emotion-0"
@@ -59,6 +98,14 @@ exports[`should render correctly 3`] = `
 `;
 
 exports[`should render correctly 4`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
+}
+
 <div>
   <h4
     class="emotion-0"
@@ -69,6 +116,14 @@ exports[`should render correctly 4`] = `
 `;
 
 exports[`should render correctly 5`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
+}
+
 <div>
   <h5
     class="emotion-0"
@@ -79,6 +134,14 @@ exports[`should render correctly 5`] = `
 `;
 
 exports[`should render correctly 6`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
+}
+
 <div>
   <h6
     class="emotion-0"
diff --git a/src/components/elements/textual/HeadingSection/__snapshots__/HeadingSection.test.tsx.snap b/src/components/elements/textual/HeadingSection/__snapshots__/HeadingSection.test.tsx.snap
index 1ae0b03a6..a2fb90c71 100644
--- a/src/components/elements/textual/HeadingSection/__snapshots__/HeadingSection.test.tsx.snap
+++ b/src/components/elements/textual/HeadingSection/__snapshots__/HeadingSection.test.tsx.snap
@@ -2,6 +2,11 @@
 
 exports[`should accept color prop 1`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 1.5rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
   color: #0A67D1;
   margin-bottom: 1rem;
 }
@@ -22,6 +27,11 @@ exports[`should accept color prop 1`] = `
 
 exports[`should accept style prop 1`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 1.5rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
   margin-bottom: 1rem;
 }
 
@@ -45,6 +55,11 @@ exports[`should accept style prop 1`] = `
 
 exports[`should accept vSpace prop 1`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 1.5rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
   margin-bottom: 10px;
 }
 
@@ -64,6 +79,11 @@ exports[`should accept vSpace prop 1`] = `
 
 exports[`should render correctly 1`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 1.5rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
   margin-bottom: 1rem;
 }
 
@@ -83,6 +103,11 @@ exports[`should render correctly 1`] = `
 
 exports[`should render correctly 2`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 1.25rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
   margin-bottom: 1rem;
 }
 
@@ -102,6 +127,11 @@ exports[`should render correctly 2`] = `
 
 exports[`should render correctly 3`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
   margin-bottom: 1rem;
 }
 
@@ -121,6 +151,11 @@ exports[`should render correctly 3`] = `
 
 exports[`should render correctly 4`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
   margin-bottom: 1rem;
 }
 
@@ -140,6 +175,11 @@ exports[`should render correctly 4`] = `
 
 exports[`should render correctly 5`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
   margin-bottom: 1rem;
 }
 
@@ -159,6 +199,11 @@ exports[`should render correctly 5`] = `
 
 exports[`should render correctly 6`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
   margin-bottom: 1rem;
 }
 
diff --git a/src/components/elements/textual/Text/Text.test.tsx b/src/components/elements/textual/Text/Text.test.tsx
index 757049007..0f0fd6120 100644
--- a/src/components/elements/textual/Text/Text.test.tsx
+++ b/src/components/elements/textual/Text/Text.test.tsx
@@ -1,28 +1,50 @@
-import React from 'react'
+import React, { AnchorHTMLAttributes } from 'react'
 import { render } from 'react-testing-library'
 
 import { Text } from './Text'
 
 it('should render correctly', () => {
   expect(render(<Text>Test 1</Text>).container).toMatchSnapshot()
-  expect(render(<Text tag='p'>Test with p tag</Text>).container).toMatchSnapshot()
-  expect(render(<Text weight='bold'>Test weight</Text>).container).toMatchSnapshot()
-  expect(render(<Text size={2}>Test size</Text>).container).toMatchSnapshot()
+})
+
+it('should accept text style decoration props', () => {
+  expect(render(<Text fontWeight='bold'>Test weight</Text>).container).toMatchSnapshot()
+  expect(render(<Text fontSize={2}>Test size</Text>).container).toMatchSnapshot()
   expect(render(<Text color='primary'>Test color</Text>).container).toMatchSnapshot()
   expect(render(<Text fontStyle='italic'>Test italic</Text>).container).toMatchSnapshot()
+  expect(render(<Text textDecoration='undeline'>Test underline</Text>).container).toMatchSnapshot()
+})
+
+it('should accept "variant" props', () => {
+  expect(render(<Text variant='main'>Main text</Text>).container).toMatchSnapshot()
+  expect(render(<Text variant='secondary'>Secondary text</Text>).container).toMatchSnapshot()
+  expect(render(<Text variant='disabled'>Disabled text</Text>).container).toMatchSnapshot()
+  expect(render(<Text variant='link'>Link</Text>).container).toMatchSnapshot()
+  expect(render(<Text variant='h1'>Heading 1</Text>).container).toMatchSnapshot()
+  expect(render(<Text variant='h2'>Heading 2</Text>).container).toMatchSnapshot()
+  expect(render(<Text variant='h3'>Heading 3</Text>).container).toMatchSnapshot()
+  expect(render(<Text variant='h4'>Heading 4</Text>).container).toMatchSnapshot()
+  expect(render(<Text variant='h5'>Heading 5</Text>).container).toMatchSnapshot()
+  expect(render(<Text variant='h6'>Heading 6</Text>).container).toMatchSnapshot()
+})
+
+it('should accept "component" props', () => {
+  expect(render(<Text component='p'>This is a paragraph</Text>).container).toMatchSnapshot()
 })
 
 it('should accept style prop', () => {
-  expect(
-    render(
-      <Text weight='bold' style={{ color: 'red' }}>
-        This is red
-      </Text>
-    ).container
-  ).toMatchSnapshot()
+  expect(render(<Text style={{ color: 'red' }}>This is red</Text>).container).toMatchSnapshot()
 })
 
 it('should accept HTMLElement props', () => {
   const { container } = render(<Text id='test-1'>Text</Text>)
   expect(container.querySelector('span').getAttribute('id')).toEqual('test-1')
 })
+
+it('should accept type argument and infer props', () => {
+  render(
+    <Text<AnchorHTMLAttributes<HTMLAnchorElement>> component='a' href='/'>
+      Text as anchor tag
+    </Text>
+  )
+})
diff --git a/src/components/elements/textual/Text/__snapshots__/Text.test.tsx.snap b/src/components/elements/textual/Text/__snapshots__/Text.test.tsx.snap
index 6472820d6..c90dd3261 100644
--- a/src/components/elements/textual/Text/__snapshots__/Text.test.tsx.snap
+++ b/src/components/elements/textual/Text/__snapshots__/Text.test.tsx.snap
@@ -1,56 +1,225 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should accept style prop 1`] = `
+exports[`should accept "component" props 1`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #2D343B;
+}
+
+<div>
+  <p
+    class="emotion-0"
+  >
+    This is a paragraph
+  </p>
+</div>
+`;
+
+exports[`should accept "variant" props 1`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #2D343B;
+}
+
+<div>
+  <span
+    class="emotion-0"
+  >
+    Main text
+  </span>
+</div>
+`;
+
+exports[`should accept "variant" props 2`] = `
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #53595E;
+}
+
+<div>
+  <span
+    class="emotion-0"
+  >
+    Secondary text
+  </span>
+</div>
+`;
+
+exports[`should accept "variant" props 3`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #B9B9BD;
+}
+
+<div>
+  <span
+    class="emotion-0"
+  >
+    Disabled text
+  </span>
+</div>
+`;
+
+exports[`should accept "variant" props 4`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #0A67D1;
   font-weight: bold;
-  color: red;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 <div>
   <span
     class="emotion-0"
   >
-    This is red
+    Link
   </span>
 </div>
 `;
 
-exports[`should render correctly 1`] = `
+exports[`should accept "variant" props 5`] = `
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 1.5rem;
   line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
 }
 
 <div>
   <span
     class="emotion-0"
   >
-    Test 1
+    Heading 1
   </span>
 </div>
 `;
 
-exports[`should render correctly 2`] = `
+exports[`should accept "variant" props 6`] = `
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 1.25rem;
   line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
 }
 
 <div>
-  <p
+  <span
     class="emotion-0"
   >
-    Test with p tag
-  </p>
+    Heading 2
+  </span>
+</div>
+`;
+
+exports[`should accept "variant" props 7`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
+}
+
+<div>
+  <span
+    class="emotion-0"
+  >
+    Heading 3
+  </span>
+</div>
+`;
+
+exports[`should accept "variant" props 8`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
+}
+
+<div>
+  <span
+    class="emotion-0"
+  >
+    Heading 4
+  </span>
+</div>
+`;
+
+exports[`should accept "variant" props 9`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
+}
+
+<div>
+  <span
+    class="emotion-0"
+  >
+    Heading 5
+  </span>
 </div>
 `;
 
-exports[`should render correctly 3`] = `
+exports[`should accept "variant" props 10`] = `
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.75rem;
   line-height: 1.5;
+  color: #2D343B;
+  font-weight: bold;
+}
+
+<div>
+  <span
+    class="emotion-0"
+  >
+    Heading 6
+  </span>
+</div>
+`;
+
+exports[`should accept style prop 1`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #2D343B;
+  color: red;
+}
+
+<div>
+  <span
+    class="emotion-0"
+  >
+    This is red
+  </span>
+</div>
+`;
+
+exports[`should accept text style decoration props 1`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #2D343B;
   font-weight: bold;
 }
 
@@ -63,11 +232,13 @@ exports[`should render correctly 3`] = `
 </div>
 `;
 
-exports[`should render correctly 4`] = `
+exports[`should accept text style decoration props 2`] = `
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
-  font-size: 2rem;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
+  font-size: 2rem;
 }
 
 <div>
@@ -79,10 +250,12 @@ exports[`should render correctly 4`] = `
 </div>
 `;
 
-exports[`should render correctly 5`] = `
+exports[`should accept text style decoration props 3`] = `
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
   color: #0A67D1;
 }
 
@@ -95,10 +268,12 @@ exports[`should render correctly 5`] = `
 </div>
 `;
 
-exports[`should render correctly 6`] = `
+exports[`should accept text style decoration props 4`] = `
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
   font-style: italic;
 }
 
@@ -110,3 +285,39 @@ exports[`should render correctly 6`] = `
   </span>
 </div>
 `;
+
+exports[`should accept text style decoration props 5`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #2D343B;
+  -webkit-text-decoration: undeline;
+  text-decoration: undeline;
+}
+
+<div>
+  <span
+    class="emotion-0"
+  >
+    Test underline
+  </span>
+</div>
+`;
+
+exports[`should render correctly 1`] = `
+.emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #2D343B;
+}
+
+<div>
+  <span
+    class="emotion-0"
+  >
+    Test 1
+  </span>
+</div>
+`;
diff --git a/src/components/form/field/MaskedField/MaskedField.test.tsx b/src/components/form/field/MaskedField/MaskedField.test.tsx
index ea0d26c1c..47afdbea5 100644
--- a/src/components/form/field/MaskedField/MaskedField.test.tsx
+++ b/src/components/form/field/MaskedField/MaskedField.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from 'react-testing-library'
 
-import { withForm, withRouter } from '../../../../test/index'
+import { withForm } from '../../../../test/index'
 import { Form } from '../../finalForm/Form/Form'
 
 import { MaskedField } from './MaskedField'
@@ -25,9 +25,7 @@ it('TimeField should parse hh:mm:ss to hh:mm', () => {
   const timeField = () => {
     return <TimeField name='test' label='Test Label' />
   }
-  const { container } = render(
-    withRouter(<Form render={timeField} onSubmit={null} initialValues={{ test: '05:30:55' }} />)
-  )
+  const { container } = render(<Form render={timeField} onSubmit={null} initialValues={{ test: '05:30:55' }} />)
 
   expect(container.querySelector('input').getAttribute('value')).toEqual('05:30')
 })
diff --git a/src/components/form/field/MonthField/__snapshots__/MonthField.test.tsx.snap b/src/components/form/field/MonthField/__snapshots__/MonthField.test.tsx.snap
index 0e90123f1..7a50adf33 100644
--- a/src/components/form/field/MonthField/__snapshots__/MonthField.test.tsx.snap
+++ b/src/components/form/field/MonthField/__snapshots__/MonthField.test.tsx.snap
@@ -302,8 +302,10 @@ exports[`MonthField should render correctly 1`] = `
 
 .emotion-9 {
   font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  color: #2D343B;
+  font-size: 0.875rem;
   font-weight: bold;
 }
 
diff --git a/src/components/form/field/SelectField/SelectField.test.tsx b/src/components/form/field/SelectField/SelectField.test.tsx
index 0693a6de6..cc69d9e5a 100644
--- a/src/components/form/field/SelectField/SelectField.test.tsx
+++ b/src/components/form/field/SelectField/SelectField.test.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import { render } from 'react-testing-library'
 
 import metaPath from '../../../../metaPath/metaPath'
-import { withRouter } from '../../../../test'
 import { Form, FormProps } from '../../finalForm/Form'
 import { DefaultItemType } from '../../input/Select'
 
@@ -12,7 +11,7 @@ const items: DefaultItemType[] = [{ value: 1, label: 'Item #1' }, { value: 2, la
 
 const createFormAndField = (fieldProps?: Partial<SelectFieldProps>, formProps?: Partial<FormProps>) => {
   // tslint:disable jsx-no-lambda
-  return withRouter(
+  return (
     <Form
       onSubmit={jest.fn()}
       initialValues={{ select1: items[0] }}
diff --git a/src/components/form/finalForm/FormPrompt/FormPrompt.test.tsx b/src/components/form/finalForm/FormPrompt/FormPrompt.test.tsx
deleted file mode 100644
index 4ae295664..000000000
--- a/src/components/form/finalForm/FormPrompt/FormPrompt.test.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { createMemoryHistory } from 'history'
-import React from 'react'
-import { Field, Form, FormProps } from 'react-final-form'
-import { Router } from 'react-router'
-import { fireEvent, render } from 'react-testing-library'
-
-import { FormPrompt, FormPromptProps } from './FormPrompt'
-
-const createComponent = (
-  props: Partial<FormPromptProps> = {},
-  formProps: Partial<FormProps> = {},
-  history = createMemoryHistory()
-) => {
-  return (
-    <Router history={history}>
-      <Form onSubmit={jest.fn()} {...formProps}>
-        {({ handleSubmit }) => (
-          <form onSubmit={handleSubmit}>
-            <FormPrompt {...props} />
-
-            <Field name='foo' component='input' type='text' />
-          </form>
-        )}
-      </Form>
-    </Router>
-  )
-}
-
-it('should call prompt when form is not pristine and not submit succedded', () => {
-  const userConfirmation = jest.fn()
-  const history = createMemoryHistory({ getUserConfirmation: userConfirmation })
-  const { container } = render(createComponent(null, null, history))
-  expect(userConfirmation).not.toHaveBeenCalled()
-  fireEvent.change(container.querySelector('input'), { target: { value: 'foo' } })
-  history.push('/b')
-  expect(userConfirmation).toHaveBeenLastCalledWith(FormPrompt.defaultProps.message, expect.anything())
-  expect(userConfirmation).toBeCalledTimes(1)
-})
-
-it('should NOT call prompt if form is pristine', () => {
-  const userConfirmation = jest.fn()
-  const history = createMemoryHistory({ getUserConfirmation: userConfirmation })
-  render(createComponent(null, null, history))
-  expect(userConfirmation).not.toHaveBeenCalled()
-  history.push('/b')
-  expect(userConfirmation).not.toHaveBeenCalled()
-})
-
-it('should NOT call prompt if form has successfully submitted ', () => {
-  const userConfirmation = jest.fn()
-  const history = createMemoryHistory({ getUserConfirmation: userConfirmation })
-  const { container } = render(createComponent(null, null, history))
-  expect(userConfirmation).not.toHaveBeenCalled()
-  fireEvent.change(container.querySelector('input'), { target: { value: 'foo' } })
-  fireEvent.submit(container.querySelector('form'))
-  history.push('/b')
-  expect(userConfirmation).not.toHaveBeenCalled()
-})
diff --git a/src/components/form/finalForm/wizard/WizardFooter/WizardFooter.test.tsx b/src/components/form/finalForm/wizard/WizardFooter/WizardFooter.test.tsx
deleted file mode 100644
index d64a28d18..000000000
--- a/src/components/form/finalForm/wizard/WizardFooter/WizardFooter.test.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react'
-import { render } from 'react-testing-library'
-
-import { withForm } from '../../../../../test'
-
-import { WizardFooter, WizardFooterProps } from './WizardFooter'
-
-const createComponent = (props: Partial<WizardFooterProps> = {}) =>
-  withForm(
-    <WizardFooter isFirstStep={false} isLastStep={false} onSubmit={jest.fn()} onPrevious={jest.fn()} {...props} />
-  )
-
-it('should render correctly', () => {
-  const { container } = render(createComponent())
-  expect(container).toMatchSnapshot()
-})
-
-it('should have only "next" and "previous" buttons on intermediate steps', () => {
-  const { container } = render(createComponent())
-  const buttons = container.querySelectorAll('button')
-
-  expect(buttons.length).toEqual(2)
-  expect(buttons[0].textContent).toEqual('Voltar')
-  expect(buttons[1].textContent).toEqual('Avançar')
-})
-
-it('should have only "next" button on first step', () => {
-  const { container } = render(createComponent({ isFirstStep: true }))
-  const buttons = container.querySelectorAll('button')
-
-  expect(buttons.length).toEqual(1)
-  expect(buttons[0].textContent).toEqual('Avançar')
-})
-it('should have "save" and "previous" button on last step', () => {
-  const { container } = render(createComponent({ isLastStep: true }))
-  const buttons = container.querySelectorAll('button')
-
-  expect(buttons.length).toEqual(2)
-  expect(buttons[0].textContent).toEqual('Voltar')
-  expect(buttons[1].textContent).toEqual('Salvar')
-})
diff --git a/src/components/form/finalForm/wizard/WizardFooter/__snapshots__/WizardFooter.test.tsx.snap b/src/components/form/finalForm/wizard/WizardFooter/__snapshots__/WizardFooter.test.tsx.snap
deleted file mode 100644
index 54b940a6d..000000000
--- a/src/components/form/finalForm/wizard/WizardFooter/__snapshots__/WizardFooter.test.tsx.snap
+++ /dev/null
@@ -1,146 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-.emotion-2 {
-  border-top: 1px solid #DCDCE0;
-  padding: 1rem 0;
-  margin: 2rem 0;
-  text-align: right;
-}
-
-.emotion-2 > *:not(:last-of-type) {
-  margin-right: 1rem;
-}
-
-.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 #818489;
-  border-radius: 4px;
-  color: #2D343B;
-  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 #F2F2F7,0 0 0 4px #0A67D1;
-}
-
-.emotion-0:not(:disabled):hover {
-  background-color: #ebebeb;
-}
-
-.emotion-1 {
-  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 #818489;
-  border-radius: 4px;
-  color: #2D343B;
-  background-color: #0A67D1;
-  color: #FFFFFF;
-  border: 1px solid #0A67D1;
-  font-size: 0.875rem;
-  padding: calc(0.75rem - 1px) 2.5rem;
-}
-
-.emotion-1 > 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-1:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
-}
-
-.emotion-1:not(:disabled):hover {
-  background-color: #ebebeb;
-}
-
-.emotion-1:not(:disabled):hover {
-  background-color: #095fc0;
-}
-
-<div>
-  <div
-    class="emotion-2"
-  >
-    <button
-      class="emotion-0"
-      type="button"
-    >
-      <span>
-        Voltar
-      </span>
-    </button>
-    <button
-      class="emotion-1"
-      type="button"
-    >
-      <span>
-        Avançar
-      </span>
-    </button>
-  </div>
-</div>
-`;
diff --git a/src/components/form/finalForm/wizard/WizardForm/WizardForm.test.tsx b/src/components/form/finalForm/wizard/WizardForm/WizardForm.test.tsx
deleted file mode 100644
index 5c3664303..000000000
--- a/src/components/form/finalForm/wizard/WizardForm/WizardForm.test.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import { render } from 'react-testing-library'
-
-import { withForm, withRouter } from '../../../../../test'
-
-import { WizardForm, WizardRenderProps, WizardStep } from './WizardForm'
-
-const renderStep = (props: WizardRenderProps) => {
-  return <h1>Step #{props.wizard.currentStep}</h1>
-}
-
-it('should render correctly', () => {
-  const { container } = render(
-    withRouter(
-      withForm(
-        <WizardForm onSubmit={jest.fn()}>
-          <WizardStep render={renderStep} />
-          <WizardStep render={renderStep} />
-          <WizardStep render={renderStep} />
-        </WizardForm>
-      )
-    )
-  )
-  expect(container).toMatchSnapshot()
-})
diff --git a/src/components/form/finalForm/wizard/WizardForm/__snapshots__/WizardForm.test.tsx.snap b/src/components/form/finalForm/wizard/WizardForm/__snapshots__/WizardForm.test.tsx.snap
deleted file mode 100644
index fba2108a4..000000000
--- a/src/components/form/finalForm/wizard/WizardForm/__snapshots__/WizardForm.test.tsx.snap
+++ /dev/null
@@ -1,93 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-.emotion-1 {
-  border-top: 1px solid #DCDCE0;
-  padding: 1rem 0;
-  margin: 2rem 0;
-  text-align: right;
-}
-
-.emotion-1 > *:not(:last-of-type) {
-  margin-right: 1rem;
-}
-
-.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 #818489;
-  border-radius: 4px;
-  color: #2D343B;
-  background-color: #0A67D1;
-  color: #FFFFFF;
-  border: 1px solid #0A67D1;
-  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 #F2F2F7,0 0 0 4px #0A67D1;
-}
-
-.emotion-0:not(:disabled):hover {
-  background-color: #ebebeb;
-}
-
-.emotion-0:not(:disabled):hover {
-  background-color: #095fc0;
-}
-
-<div>
-  <form>
-    <h1>
-      Step #
-      0
-    </h1>
-    <div
-      class="emotion-1"
-    >
-      <button
-        class="emotion-0"
-        type="button"
-      >
-        <span>
-          Avançar
-        </span>
-      </button>
-    </div>
-  </form>
-</div>
-`;
diff --git a/src/test/index.tsx b/src/test/index.tsx
index 4822b219d..880661916 100644
--- a/src/test/index.tsx
+++ b/src/test/index.tsx
@@ -1,7 +1,5 @@
-import { createMemoryHistory, MemoryHistory } from 'history'
 import React from 'react'
 import { Form } from 'react-final-form'
-import { Router } from 'react-router'
 
 /**
  * Wraps the component with react-final-form's <Form />
@@ -13,13 +11,3 @@ export const withForm = (node: React.ReactNode) => {
   const render = () => node
   return <Form render={render} onSubmit={onSubmit} />
 }
-
-/**
- * Wraps the component with react-router's <Router />.
- *
- * @param node Component to be wrapped.
- * @param history History to be used by the router. Uses history's `createMemoryHistory` as default
- */
-export const withRouter = (node: React.ReactNode, history: MemoryHistory = createMemoryHistory()) => {
-  return <Router history={history}>{node}</Router>
-}