15 files changed, 65 insertions, 65 deletions
diff --git a/packages/dev-tools-pages/ts/components/base.tsx b/packages/dev-tools-pages/ts/components/base.tsx
index 8e608ecdd..4eb4e3ae3 100644
--- a/packages/dev-tools-pages/ts/components/base.tsx
+++ b/packages/dev-tools-pages/ts/components/base.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { ThemeProvider } from 'styled-components';
 
-import { Footer } from 'ts/components/Footer';
-import { Header } from 'ts/components/Header';
+import { Footer } from 'ts/components/footer';
+import { Header } from 'ts/components/header';
 import { ThemeContext } from 'ts/context';
 import { GlobalStyles } from 'ts/globalStyles';
 
diff --git a/packages/dev-tools-pages/ts/components/code.tsx b/packages/dev-tools-pages/ts/components/code.tsx
index 8415f1179..9123192d9 100644
--- a/packages/dev-tools-pages/ts/components/code.tsx
+++ b/packages/dev-tools-pages/ts/components/code.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/variables';
 
-import { Button as BaseButton } from './Button';
+import { Button as BaseButton } from './button';
 
 const isTouch = Boolean(
     'ontouchstart' in window ||
diff --git a/packages/dev-tools-pages/ts/components/compiler.tsx b/packages/dev-tools-pages/ts/components/compiler.tsx
index f16365fd0..c535795aa 100644
--- a/packages/dev-tools-pages/ts/components/compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/compiler.tsx
@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import { colors, media } from 'ts/variables';
 
-import { Breakout } from './Breakout';
-import { Container } from './Container';
-import { InlineCode } from './InlineCode';
+import { Breakout } from './breakout';
+import { Container } from './container';
+import { InlineCode } from './inline-code';
 
 const Cards = styled.dl`
     column-count: 3;
diff --git a/packages/dev-tools-pages/ts/components/content-block.tsx b/packages/dev-tools-pages/ts/components/content-block.tsx
index 2818858dc..a8c208163 100644
--- a/packages/dev-tools-pages/ts/components/content-block.tsx
+++ b/packages/dev-tools-pages/ts/components/content-block.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { ContextInterface } from 'ts/context';
 import { media } from 'ts/variables';
 
-import { Alpha, Beta } from './Typography';
+import { Alpha, Beta } from './typography';
 
 const Base = styled.div`
     display: flex;
diff --git a/packages/dev-tools-pages/ts/components/content.tsx b/packages/dev-tools-pages/ts/components/content.tsx
index 55550441c..f74e09af7 100644
--- a/packages/dev-tools-pages/ts/components/content.tsx
+++ b/packages/dev-tools-pages/ts/components/content.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Container } from './Container';
+import { Container } from './container';
 
 const StyledMain =
     styled.div <
diff --git a/packages/dev-tools-pages/ts/components/footer.tsx b/packages/dev-tools-pages/ts/components/footer.tsx
index a278fdfee..110d21443 100644
--- a/packages/dev-tools-pages/ts/components/footer.tsx
+++ b/packages/dev-tools-pages/ts/components/footer.tsx
@@ -8,8 +8,8 @@ import { context as trace } from 'ts/context/trace';
 import MainIcon from 'ts/icons/logos/0x.svg';
 import { media } from 'ts/variables';
 
-import { Container } from './Container';
-import { Alpha, Beta } from './Typography';
+import { Container } from './container';
+import { Alpha, Beta } from './typography';
 
 const tools = [trace, cov, compiler, profiler];
 
diff --git a/packages/dev-tools-pages/ts/components/header.tsx b/packages/dev-tools-pages/ts/components/header.tsx
index 94714c0af..2787692c1 100644
--- a/packages/dev-tools-pages/ts/components/header.tsx
+++ b/packages/dev-tools-pages/ts/components/header.tsx
@@ -4,8 +4,8 @@ import styled from 'styled-components';
 import { ContextInterface, ThemeContext } from 'ts/context';
 import { media } from 'ts/variables';
 
-import { Container } from './Container';
-import { Small } from './Typography';
+import { Container } from './container';
+import { Small } from './typography';
 
 const Header: React.StatelessComponent<{}> = () => (
     <ThemeContext.Consumer>
diff --git a/packages/dev-tools-pages/ts/components/hero.tsx b/packages/dev-tools-pages/ts/components/hero.tsx
index 8b6d6ade3..cdcad6982 100644
--- a/packages/dev-tools-pages/ts/components/hero.tsx
+++ b/packages/dev-tools-pages/ts/components/hero.tsx
@@ -4,8 +4,8 @@ import styled from 'styled-components';
 import { ContextInterface, ThemeContext } from 'ts/context';
 import { media } from 'ts/variables';
 
-import { Button } from './Button';
-import { Beta } from './Typography';
+import { Button } from './button';
+import { Beta } from './typography';
 
 const Hero: React.StatelessComponent<ContextInterface> = ({ children }) => (
     <ThemeContext.Consumer>
diff --git a/packages/dev-tools-pages/ts/components/intro.tsx b/packages/dev-tools-pages/ts/components/intro.tsx
index 54b14f237..a0e76ab17 100644
--- a/packages/dev-tools-pages/ts/components/intro.tsx
+++ b/packages/dev-tools-pages/ts/components/intro.tsx
@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import { colors, media } from 'ts/variables';
 
-import { Breakout } from './Breakout';
-import { Container } from './Container';
-import { Alpha, Lead } from './Typography';
+import { Breakout } from './breakout';
+import { Container } from './container';
+import { Alpha, Lead } from './typography';
 
 const Main = styled.div`
     background-color: ${colors.lightGray};
diff --git a/packages/dev-tools-pages/ts/components/tabs.tsx b/packages/dev-tools-pages/ts/components/tabs.tsx
index 0a62fa334..1d26f2777 100644
--- a/packages/dev-tools-pages/ts/components/tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/tabs.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/variables';
 
-import { Breakout } from './Breakout';
+import { Breakout } from './breakout';
 
 const StyledTabList = styled(TabList)`
     text-transform: uppercase;
diff --git a/packages/dev-tools-pages/ts/components/trace.tsx b/packages/dev-tools-pages/ts/components/trace.tsx
index 0cee4c1a2..108154648 100644
--- a/packages/dev-tools-pages/ts/components/trace.tsx
+++ b/packages/dev-tools-pages/ts/components/trace.tsx
@@ -8,10 +8,10 @@ import TimeConsuming from 'ts/icons/time-consuming.svg';
 import TimeSaving from 'ts/icons/time-saving.svg';
 import { colors, media } from 'ts/variables';
 
-import { Breakout } from './Breakout';
-import { Code } from './Code';
-import { Container } from './Container';
-import { Alpha, Gamma, Lead } from './Typography';
+import { Breakout } from './breakout';
+import { Code } from './code';
+import { Container } from './container';
+import { Alpha, Gamma, Lead } from './typography';
 
 const Trace: React.StatelessComponent<{}> = () => (
     <ThemeContext.Consumer>
diff --git a/packages/dev-tools-pages/ts/pages/compiler.tsx b/packages/dev-tools-pages/ts/pages/compiler.tsx
index ee533d566..912589b51 100644
--- a/packages/dev-tools-pages/ts/pages/compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/compiler.tsx
@@ -4,18 +4,18 @@ import * as Loadable from 'react-loadable';
 
 import { context } from 'ts/context/compiler';
 
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Compiler as CompilerComponent } from 'ts/components/Compiler';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { Lead } from 'ts/components/Typography';
+import { Base } from 'ts/components/base';
+import { Breakout } from 'ts/components/breakout';
+import { Code } from 'ts/components/code';
+import { Compiler as CompilerComponent } from 'ts/components/compiler';
+import { Content } from 'ts/components/content';
+import { ContentBlock } from 'ts/components/content-block';
+import { Hero } from 'ts/components/hero';
+import { InlineCode } from 'ts/components/inline-code';
+import { Lead } from 'ts/components/typography';
 
 const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/Animations/Compiler'),
+    loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/animations/compiler'),
     loading: () => <div />,
     delay: 1000,
     render(loadable: { Animation: any }): React.ReactNode {
diff --git a/packages/dev-tools-pages/ts/pages/cov.tsx b/packages/dev-tools-pages/ts/pages/cov.tsx
index 3ffa6077d..ebaf5bfb2 100644
--- a/packages/dev-tools-pages/ts/pages/cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/cov.tsx
@@ -4,19 +4,19 @@ import * as Loadable from 'react-loadable';
 
 import { context } from 'ts/context/cov';
 
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
-import { List, ListItem } from 'ts/components/List';
-import { TabBlock, Tabs } from 'ts/components/Tabs';
+import { Base } from 'ts/components/base';
+import { Breakout } from 'ts/components/breakout';
+import { Code } from 'ts/components/code';
+import { Content } from 'ts/components/content';
+import { ContentBlock } from 'ts/components/content-block';
+import { Hero } from 'ts/components/hero';
+import { InlineCode } from 'ts/components/inline-code';
+import { Intro, IntroAside, IntroLead } from 'ts/components/intro';
+import { List, ListItem } from 'ts/components/list';
+import { TabBlock, Tabs } from 'ts/components/tabs';
 
 const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/Animations/Cov'),
+    loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/animations/cov'),
     loading: () => <div />,
     delay: 1000,
     render(loadable: { Animation: any }): React.ReactNode {
diff --git a/packages/dev-tools-pages/ts/pages/profiler.tsx b/packages/dev-tools-pages/ts/pages/profiler.tsx
index 4e833e0d0..040b439e8 100644
--- a/packages/dev-tools-pages/ts/pages/profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/profiler.tsx
@@ -4,19 +4,19 @@ import * as Loadable from 'react-loadable';
 
 import { context } from 'ts/context/profiler';
 
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
-import { List, ListItem } from 'ts/components/List';
-import { TabBlock, Tabs } from 'ts/components/Tabs';
+import { Base } from 'ts/components/base';
+import { Breakout } from 'ts/components/breakout';
+import { Code } from 'ts/components/code';
+import { Content } from 'ts/components/content';
+import { ContentBlock } from 'ts/components/content-block';
+import { Hero } from 'ts/components/hero';
+import { InlineCode } from 'ts/components/inline-code';
+import { Intro, IntroAside, IntroLead } from 'ts/components/intro';
+import { List, ListItem } from 'ts/components/list';
+import { TabBlock, Tabs } from 'ts/components/tabs';
 
 const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/Animations/Profiler'),
+    loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/animations/profiler'),
     loading: () => <div />,
     delay: 1000,
     render(loadable: { Animation: any }): React.ReactNode {
diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx
index 23cbe98be..acb8fb841 100644
--- a/packages/dev-tools-pages/ts/pages/trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/trace.tsx
@@ -4,19 +4,19 @@ import * as Loadable from 'react-loadable';
 
 import { context } from 'ts/context/trace';
 
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { List, ListItem } from 'ts/components/List';
-import { TabBlock, Tabs } from 'ts/components/Tabs';
-import { Trace as TraceComponent } from 'ts/components/Trace';
+import { Base } from 'ts/components/base';
+import { Breakout } from 'ts/components/breakout';
+import { Code } from 'ts/components/code';
+import { Content } from 'ts/components/content';
+import { ContentBlock } from 'ts/components/content-block';
+import { Hero } from 'ts/components/hero';
+import { InlineCode } from 'ts/components/inline-code';
+import { List, ListItem } from 'ts/components/list';
+import { TabBlock, Tabs } from 'ts/components/tabs';
+import { Trace as TraceComponent } from 'ts/components/trace';
 
 const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/Animations/Trace'),
+    loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/animations/trace'),
     loading: () => <div />,
     delay: 1000,
     render(loadable: { Animation: any }): React.ReactNode {