From e44e0aadc12b82f95dd1b2943b02969abd74d861 Mon Sep 17 00:00:00 2001
From: Brandon Tom <magicink@gmail.com>
Date: Sat, 30 Jan 2021 06:54:38 -0800
Subject: [PATCH] added prettier

---
 .prettierignore                         |   1 +
 .storybook/addons.js                    |   2 +-
 .storybook/config.js                    |   3 +-
 .storybook/webpack.config.js            |  10 +-
 README.md                               |  99 +++++-----
 package-lock.json                       | 237 +++++++++++++-----------
 package.json                            |  21 ++-
 rollup.config.js                        |  73 ++++----
 src/Functions/columnWidth.js            |   7 +-
 src/Functions/floatDirection.js         |   2 +-
 src/Functions/floatOppositeDirection.js |   4 +-
 src/Hooks/useTheme.js                   |  13 +-
 src/Mixins/gridMedia.js                 |   5 +-
 src/Mixins/gridMedia.test.js            |  32 ++--
 src/Mixins/gridPush.js                  |  12 +-
 src/Mixins/gridPush.test.js             |   4 +-
 src/Mixins/gridShift.js                 |   5 +-
 src/Mixins/gridVisual.test.js           |  16 +-
 src/Theme/Neat.js                       |   7 +-
 src/Theme/Neat.test.js                  |  18 +-
 src/Theme/NeatTheme.js                  |   2 +-
 src/test.js                             |  10 +-
 stories/index.js                        |  10 +-
 23 files changed, 337 insertions(+), 256 deletions(-)
 create mode 100644 .prettierignore

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..40b878d
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+node_modules/
\ No newline at end of file
diff --git a/.storybook/addons.js b/.storybook/addons.js
index c46a12b..b94b37f 100644
--- a/.storybook/addons.js
+++ b/.storybook/addons.js
@@ -1 +1 @@
-import '@storybook/addon-storysource/register'
\ No newline at end of file
+import '@storybook/addon-storysource/register'
diff --git a/.storybook/config.js b/.storybook/config.js
index a434696..37f48a2 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,8 +1,7 @@
 import { addDecorator, configure } from '@storybook/react'
 
-
 const loadStories = () => {
   require('../stories')
 }
 
-configure(loadStories, module)
\ No newline at end of file
+configure(loadStories, module)
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 21666e3..a3a18f9 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -5,8 +5,8 @@ module.exports = {
         exclude: /node_modules/,
         test: /\.js$/,
         loaders: [require.resolve('@storybook/addon-storysource/loader')],
-        enforce: 'pre',
-      },
-    ],
-  },
-}
\ No newline at end of file
+        enforce: 'pre'
+      }
+    ]
+  }
+}
diff --git a/README.md b/README.md
index 621c4a8..43b5809 100644
--- a/README.md
+++ b/README.md
@@ -9,24 +9,24 @@ View Storybook examples here: https://magicink.github.io/neat-components/
 ### Usage
 
 ```javascript
-import React, { Component } from "react";
-import styled, { ThemeProvider } from "styled-components";
-import Neat, { gridContainer, gridColumn, gridShift } from "neat-components";
+import React, { Component } from 'react'
+import styled, { ThemeProvider } from 'styled-components'
+import Neat, { gridContainer, gridColumn, gridShift } from 'neat-components'
 
 let constants = () => {
   return `
     background-color: blue;
     height: 50px;
     margin-top: 1em;
-  `;
-};
+  `
+}
 
 let Container = styled.div`
   ${gridContainer()};
-`;
+`
 let Column = styled.div`
   ${constants()} ${props => gridColumn(props.theme, 1)};
-`;
+`
 
 class App extends Component {
   render() {
@@ -41,11 +41,11 @@ class App extends Component {
           </Container>
         </div>
       </ThemeProvider>
-    );
+    )
   }
 }
 
-export default App;
+export default App
 ```
 
 ## API
@@ -71,17 +71,17 @@ You can pass in a `settings` object to create a custom grid. The `settings` obje
 **`media`**: Used by `gridMedia()` to specify the media the grid should be applied. It can accept a string (i.e. `only screen and (max-width: 800px)`) or a number (i.e `800`). The later would produce `only screen and (min-width: 800px)`. Defaults to `null`.
 
 ```javascript
-const CustomGrid = Neat({ columns: 3, gutter: "60px" });
+const CustomGrid = Neat({ columns: 3, gutter: '60px' })
 const Container = styled.div`
   margin-top: 1rem;
   ${gridContainer()};
-`;
+`
 const WideColumn = styled.div`
   background-image: linear-gradient(to bottom right, #21e9f4, #00d4ff);
   border-radius: 5px;
   height: 20rem;
   ${props => gridColumn(props.theme, 1)};
-`;
+`
 
 class App extends Component {
   render() {
@@ -93,7 +93,7 @@ class App extends Component {
           <WideColumn theme={CustomGrid} />
         </Container>
       </ThemeProvider>
-    );
+    )
   }
 }
 ```
@@ -105,37 +105,37 @@ Used to create grids within grids.
 ```javascript
 const SidebarGrid = Neat({
   columns: 3,
-  gutter: "40px"
-});
+  gutter: '40px'
+})
 
 const GalleryGrid = Neat({
   columns: 4,
-  gutter: "40px"
-});
+  gutter: '40px'
+})
 
 const Container = styled.div`
   ${gridContainer()};
-`;
+`
 
 const SideBar = styled.div`
   height: 19rem;
   ${props => gridColumn(SidebarGrid, 1)};
-`;
+`
 
 const Gallery = styled.div`
   ${props => gridColumn(GalleryGrid, 2)};
-`;
+`
 
 const GalleryContainer = styled.div`
   ${gridCollapse(GalleryGrid)} ${gridContainer()};
-`;
+`
 
 const GalleryItem = styled.div`
   background-color: #496278;
   height: 4rem;
   margin-bottom: 1rem;
   ${gridColumn(GalleryGrid, 1)};
-`;
+`
 
 class App extends Component {
   render() {
@@ -151,7 +151,7 @@ class App extends Component {
           </Gallery>
         </Container>
       </ThemeProvider>
-    );
+    )
   }
 }
 ```
@@ -163,7 +163,7 @@ Creates a component that occupies `span` number of a given theme's columns
 ```javascript
 let Column = styled.div`
   ${props => gridColumn(props.theme, 1)};
-`;
+`
 
 class App extends Component {
   render() {
@@ -178,7 +178,7 @@ class App extends Component {
           </Container>
         </div>
       </ThemeProvider>
-    );
+    )
   }
 }
 ```
@@ -190,7 +190,7 @@ Injects a clearfix solution into the component.
 ```javascript
 const Container = styled.div`
   ${gridContainer()};
-`;
+`
 
 class App extends Component {
   render() {
@@ -198,7 +198,7 @@ class App extends Component {
       <ThemeProvider theme={Neat()}>
         <Container>...</Container>
       </ThemeProvider>
-    );
+    )
   }
 }
 ```
@@ -225,10 +225,12 @@ const Column = styled.div`
   background-color: yellow;
   margin-top: 1rem;
   ${gridColumn(mobileGrid, 2)}
-  ${gridMedia(desktopGrid, [{
-    ...gridColumn(desktopGrid, 1),
-    'background-color': 'red'
-  }])}
+  ${gridMedia(desktopGrid, [
+    {
+      ...gridColumn(desktopGrid, 1),
+      'background-color': 'red'
+    }
+  ])}
 `
 
 const Container = styled.div`
@@ -236,9 +238,11 @@ const Container = styled.div`
 `
 
 export class GridMedia extends React.Component {
-  render () {
+  render() {
     return [
-      <h1 key={'header'}><code>gridMedia</code></h1>,
+      <h1 key={'header'}>
+        <code>gridMedia</code>
+      </h1>,
       <ThemeProvider key={'provider'} theme={Neat()}>
         <Container>
           <Column />
@@ -258,7 +262,6 @@ export class GridMedia extends React.Component {
     ]
   }
 }
-
 ```
 
 ### gridShift(theme, shift)
@@ -271,21 +274,21 @@ let constants = () => {
     background-color: blue;
     height: 50px;
     margin-top: 1em;
-  `;
-};
+  `
+}
 
 let Container = styled.div`
   ${gridContainer()};
-`;
+`
 let Column = styled.div`
   ${constants()} ${props => gridColumn(props.theme, 1)};
-`;
+`
 
 let Shifted = styled.div`
   ${constants()}
   ${props => gridColumn(props.theme, 1)}
   ${props => gridShift(props.theme, 2)}
-`;
+`
 
 class App extends Component {
   render() {
@@ -298,7 +301,7 @@ class App extends Component {
           </Container>
         </div>
       </ThemeProvider>
-    );
+    )
   }
 }
 ```
@@ -313,21 +316,21 @@ let constants = () => {
     background-color: blue;
     height: 50px;
     margin-top: 1em;
-  `;
-};
+  `
+}
 
 let Container = styled.div`
   ${gridContainer()};
-`;
+`
 let Column = styled.div`
   ${constants()} ${props => gridColumn(props.theme, 1)};
-`;
+`
 
 let Pushed = styled.div`
   ${constants()}
   ${props => gridColumn(props.theme, 1)}
   ${props => gridPush(props.theme, 2)}
-`;
+`
 
 class App extends Component {
   render() {
@@ -340,7 +343,7 @@ class App extends Component {
           </Container>
         </div>
       </ThemeProvider>
-    );
+    )
   }
 }
 ```
@@ -351,5 +354,5 @@ Creates series of visual guidelines based on the grid system.
 
 ## References
 
-* [Neat 2.x](http://neat.bourbon.io)
-* [styled-components](https://www.styled-components.com/)
+- [Neat 2.x](http://neat.bourbon.io)
+- [styled-components](https://www.styled-components.com/)
diff --git a/package-lock.json b/package-lock.json
index 78e516b..2ccfa0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,17 @@
 {
   "name": "neat-components",
-  "version": "1.0.32",
+  "version": "1.0.33",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@babel/cli": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.10.5.tgz",
-      "integrity": "sha512-j9H9qSf3kLdM0Ao3aGPbGZ73mEA9XazuupcS6cDGWuiyAcANoguhP0r2Lx32H5JGw4sSSoHG3x/mxVnHgvOoyA==",
+      "version": "7.12.10",
+      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.12.10.tgz",
+      "integrity": "sha512-+y4ZnePpvWs1fc/LhZRTHkTesbXkyBYuOB+5CyodZqrEuETXi3zOVfpAQIdgC3lXbHLTDG9dQosxR9BhvLKDLQ==",
       "dev": true,
       "requires": {
-        "chokidar": "^2.1.8",
+        "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents",
+        "chokidar": "^3.4.0",
         "commander": "^4.0.1",
         "convert-source-map": "^1.1.0",
         "fs-readdir-recursive": "^1.1.0",
@@ -21,39 +22,12 @@
         "source-map": "^0.5.0"
       },
       "dependencies": {
-        "chokidar": {
-          "version": "2.1.8",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
-          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "anymatch": "^2.0.0",
-            "async-each": "^1.0.1",
-            "braces": "^2.3.2",
-            "fsevents": "^1.2.7",
-            "glob-parent": "^3.1.0",
-            "inherits": "^2.0.3",
-            "is-binary-path": "^1.0.0",
-            "is-glob": "^4.0.0",
-            "normalize-path": "^3.0.0",
-            "path-is-absolute": "^1.0.0",
-            "readdirp": "^2.2.1",
-            "upath": "^1.1.1"
-          }
-        },
         "commander": {
           "version": "4.1.1",
           "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
           "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
           "dev": true
         },
-        "lodash": {
-          "version": "4.17.19",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
-          "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
-          "dev": true
-        },
         "make-dir": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -64,13 +38,6 @@
             "semver": "^5.6.0"
           }
         },
-        "normalize-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-          "dev": true,
-          "optional": true
-        },
         "pify": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
@@ -5502,6 +5469,35 @@
         "glob-to-regexp": "^0.3.0"
       }
     },
+    "@nicolo-ribaudo/chokidar-2": {
+      "version": "2.1.8-no-fsevents",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.tgz",
+      "integrity": "sha512-+nb9vWloHNNMFHjGofEam3wopE3m1yuambrrd/fnPc+lFOMB9ROTqQlche9ByFWNkdNqfSgR/kkQtQ8DzEWt2w==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "anymatch": "^2.0.0",
+        "async-each": "^1.0.1",
+        "braces": "^2.3.2",
+        "glob-parent": "^3.1.0",
+        "inherits": "^2.0.3",
+        "is-binary-path": "^1.0.0",
+        "is-glob": "^4.0.0",
+        "normalize-path": "^3.0.0",
+        "path-is-absolute": "^1.0.0",
+        "readdirp": "^2.2.1",
+        "upath": "^1.1.1"
+      },
+      "dependencies": {
+        "normalize-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -5644,6 +5640,12 @@
         "util-deprecate": "^1.0.2"
       },
       "dependencies": {
+        "prettier": {
+          "version": "1.19.1",
+          "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+          "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
+          "dev": true
+        },
         "prop-types": {
           "version": "15.7.2",
           "resolved": "https://npm.groundspeak.biz:4873/prop-types/-/prop-types-15.7.2.tgz",
@@ -6488,6 +6490,12 @@
           "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
           "dev": true
         },
+        "prettier": {
+          "version": "1.19.1",
+          "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+          "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
+          "dev": true
+        },
         "regenerator-runtime": {
           "version": "0.13.7",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
@@ -7466,6 +7474,12 @@
         "regenerator-runtime": "^0.13.3"
       },
       "dependencies": {
+        "prettier": {
+          "version": "1.19.1",
+          "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+          "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
+          "dev": true
+        },
         "prop-types": {
           "version": "15.7.2",
           "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
@@ -11997,9 +12011,9 @@
       }
     },
     "dot-prop": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
-      "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz",
+      "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==",
       "dev": true,
       "requires": {
         "is-obj": "^1.0.0"
@@ -13589,12 +13603,12 @@
       }
     },
     "find-versions": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.2.0.tgz",
-      "integrity": "sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-4.0.0.tgz",
+      "integrity": "sha512-wgpWy002tA+wgmO27buH/9KzyEOQnKsG/R0yrcjPT9BOFm0zRBVQbZ95nRGXWMywS8YR5knRbpohio0bcJABxQ==",
       "dev": true,
       "requires": {
-        "semver-regex": "^2.0.0"
+        "semver-regex": "^3.1.2"
       }
     },
     "flat-cache": {
@@ -15308,30 +15322,29 @@
       }
     },
     "husky": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-4.2.5.tgz",
-      "integrity": "sha512-SYZ95AjKcX7goYVZtVZF2i6XiZcHknw50iXvY7b0MiGoj5RwdgRQNEHdb+gPDPCXKlzwrybjFjkL6FOj8uRhZQ==",
+      "version": "4.3.8",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-4.3.8.tgz",
+      "integrity": "sha512-LCqqsB0PzJQ/AlCgfrfzRe3e3+NvmefAdKQhRYpxS4u6clblBoDdzzvHi8fmxKRzvMxPY/1WZWzomPZww0Anow==",
       "dev": true,
       "requires": {
         "chalk": "^4.0.0",
         "ci-info": "^2.0.0",
         "compare-versions": "^3.6.0",
-        "cosmiconfig": "^6.0.0",
-        "find-versions": "^3.2.0",
+        "cosmiconfig": "^7.0.0",
+        "find-versions": "^4.0.0",
         "opencollective-postinstall": "^2.0.2",
-        "pkg-dir": "^4.2.0",
+        "pkg-dir": "^5.0.0",
         "please-upgrade-node": "^3.2.0",
         "slash": "^3.0.0",
         "which-pm-runs": "^1.0.0"
       },
       "dependencies": {
         "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
           "requires": {
-            "@types/color-name": "^1.1.1",
             "color-convert": "^2.0.1"
           }
         },
@@ -15361,25 +15374,25 @@
           "dev": true
         },
         "cosmiconfig": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
+          "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
           "dev": true,
           "requires": {
             "@types/parse-json": "^4.0.0",
-            "import-fresh": "^3.1.0",
+            "import-fresh": "^3.2.1",
             "parse-json": "^5.0.0",
             "path-type": "^4.0.0",
-            "yaml": "^1.7.2"
+            "yaml": "^1.10.0"
           }
         },
         "find-up": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
           "dev": true,
           "requires": {
-            "locate-path": "^5.0.0",
+            "locate-path": "^6.0.0",
             "path-exists": "^4.0.0"
           }
         },
@@ -15390,9 +15403,9 @@
           "dev": true
         },
         "import-fresh": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
-          "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
           "dev": true,
           "requires": {
             "parent-module": "^1.0.0",
@@ -15400,47 +15413,41 @@
           }
         },
         "locate-path": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
           "dev": true,
           "requires": {
-            "p-locate": "^4.1.0"
+            "p-locate": "^5.0.0"
           }
         },
         "p-limit": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
           "dev": true,
           "requires": {
-            "p-try": "^2.0.0"
+            "yocto-queue": "^0.1.0"
           }
         },
         "p-locate": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
           "dev": true,
           "requires": {
-            "p-limit": "^2.2.0"
+            "p-limit": "^3.0.2"
           }
         },
-        "p-try": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-          "dev": true
-        },
         "parse-json": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.1.tgz",
-          "integrity": "sha512-ztoZ4/DYeXQq4E21v169sC8qWINGpcosGv9XhTDvg9/hWvx/zrFkc9BiWxR58OJLHGk28j5BL0SDLeV2WmFZlQ==",
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+          "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.0.0",
             "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1",
+            "json-parse-even-better-errors": "^2.3.0",
             "lines-and-columns": "^1.1.6"
           }
         },
@@ -15457,12 +15464,12 @@
           "dev": true
         },
         "pkg-dir": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
+          "integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==",
           "dev": true,
           "requires": {
-            "find-up": "^4.0.0"
+            "find-up": "^5.0.0"
           }
         },
         "resolve-from": {
@@ -15478,9 +15485,9 @@
           "dev": true
         },
         "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -15683,9 +15690,9 @@
       "dev": true
     },
     "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
     "inline-style-parser": {
@@ -20696,6 +20703,12 @@
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
       "dev": true
     },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
     "json-schema": {
       "version": "0.2.3",
       "resolved": "https://npm.groundspeak.biz:4873/json-schema/-/json-schema-0.2.3.tgz",
@@ -22223,9 +22236,9 @@
       }
     },
     "node-fetch": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
-      "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
       "dev": true
     },
     "node-fetch-npm": {
@@ -24029,9 +24042,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "1.18.2",
-      "resolved": "https://npm.groundspeak.biz:4873/prettier/-/prettier-1.18.2.tgz",
-      "integrity": "sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
+      "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==",
       "dev": true
     },
     "pretty-error": {
@@ -26014,9 +26027,9 @@
       }
     },
     "semver-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz",
-      "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-3.1.2.tgz",
+      "integrity": "sha512-bXWyL6EAKOJa81XG1OZ/Yyuq+oT0b2YLlxx7c+mrdYPaPbnj6WgVULXhinMIeZGufuUBu/eVRqXEhiv4imfwxA==",
       "dev": true
     },
     "send": {
@@ -29769,6 +29782,12 @@
         "decamelize": "^1.2.0"
       }
     },
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true
+    },
     "zwitch": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
diff --git a/package.json b/package.json
index 011651d..79746c8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "neat-components",
-  "version": "1.0.32",
+  "version": "1.0.33",
   "description": "Combining Thoughtbot's Neat Grid system with Styled Components",
   "keywords": [
     "components",
@@ -27,6 +27,7 @@
   "scripts": {
     "build": "rollup --config rollup.config.js",
     "clean": "npx rimraf bundle.js && npx rimraf ./docs",
+    "format": "prettier --write \"**/*.{js,json,md}\"",
     "lint": "standard --parser babel-eslint \"./src/**.js\"",
     "patch": "npm version patch --no-git-tag-version",
     "prepare": "npx rimraf ./docs && npm run build",
@@ -37,9 +38,20 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npm run clean && npm run storybook:build && npm test"
+      "pre-commit": "npm run format && npm run clean && npm run storybook:build && npm test"
     }
   },
+  "prettier": {
+    "arrowParens": "avoid",
+    "bracketSpacing": true,
+    "quoteProps": "as-needed",
+    "jsxBracketSameLine": false,
+    "jsxSingleQuote": true,
+    "semi": false,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "none"
+  },
   "jest": {
     "roots": [
       "<rootDir>/src/"
@@ -48,7 +60,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/cli": "^7.10.5",
+    "@babel/cli": "^7.12.10",
     "@babel/core": "^7.10.5",
     "@babel/plugin-proposal-decorators": "^7.10.5",
     "@babel/plugin-proposal-export-default-from": "^7.10.4",
@@ -81,11 +93,12 @@
     "babel-loader": "^8.0.6",
     "eslint-plugin-flowtype": "^3.10.3",
     "flow-bin": "^0.100.0",
-    "husky": "^4.2.5",
+    "husky": "^4.3.8",
     "jest": "^26.1.0",
     "jest-environment-jsdom": "^26.1.0",
     "jest-environment-jsdom-global": "^2.0.4",
     "marked": "^0.6.2",
+    "prettier": "^2.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "regenerator-runtime": "^0.13.2",
diff --git a/rollup.config.js b/rollup.config.js
index 04b614a..729b290 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -4,40 +4,39 @@ import path from 'path'
 import resolve from 'rollup-plugin-node-resolve'
 import { terser } from 'rollup-plugin-terser'
 
-export default [{
-  external: ['react', 'styled-components'],
-  input: `${path.resolve(__dirname, 'src', 'index.js')}`,
-  output: {
-    exports: 'named',
-    file: `${path.resolve(__dirname, 'bundle.js')}`,
-    format: 'cjs'
-  },
-  plugins: [
-    babel({
-      babelrc: false,
-      exclude: 'node_modules/**',
-      presets: [
-        '@babel/preset-flow',
-        '@babel/preset-react'
-      ],
-      plugins: [
-        '@babel/plugin-syntax-dynamic-import',
-        '@babel/plugin-proposal-export-default-from',
-        '@babel/plugin-proposal-object-rest-spread',
-        '@babel/plugin-transform-arrow-functions',
-        '@babel/plugin-transform-spread',
-        '@babel/plugin-transform-destructuring',
-        '@babel/plugin-transform-parameters',
-        '@babel/plugin-transform-block-scoping',
-        '@babel/plugin-transform-computed-properties',
-        '@babel/plugin-transform-template-literals',
-        '@babel/plugin-proposal-nullish-coalescing-operator',
-        '@babel/plugin-proposal-optional-chaining'
-      ],
-      babelHelpers: 'bundled'
-    }),
-    flow({ all: true }),
-    resolve(),
-    terser()
-  ]
-}]
+export default [
+  {
+    external: ['react', 'styled-components'],
+    input: `${path.resolve(__dirname, 'src', 'index.js')}`,
+    output: {
+      exports: 'named',
+      file: `${path.resolve(__dirname, 'bundle.js')}`,
+      format: 'cjs'
+    },
+    plugins: [
+      babel({
+        babelrc: false,
+        exclude: 'node_modules/**',
+        presets: ['@babel/preset-flow', '@babel/preset-react'],
+        plugins: [
+          '@babel/plugin-syntax-dynamic-import',
+          '@babel/plugin-proposal-export-default-from',
+          '@babel/plugin-proposal-object-rest-spread',
+          '@babel/plugin-transform-arrow-functions',
+          '@babel/plugin-transform-spread',
+          '@babel/plugin-transform-destructuring',
+          '@babel/plugin-transform-parameters',
+          '@babel/plugin-transform-block-scoping',
+          '@babel/plugin-transform-computed-properties',
+          '@babel/plugin-transform-template-literals',
+          '@babel/plugin-proposal-nullish-coalescing-operator',
+          '@babel/plugin-proposal-optional-chaining'
+        ],
+        babelHelpers: 'bundled'
+      }),
+      flow({ all: true }),
+      resolve(),
+      terser()
+    ]
+  }
+]
diff --git a/src/Functions/columnWidth.js b/src/Functions/columnWidth.js
index 5c443c9..db10b54 100644
--- a/src/Functions/columnWidth.js
+++ b/src/Functions/columnWidth.js
@@ -3,7 +3,10 @@ import parseUnit from './parseUnit'
 import stripUnit from './stripUnit'
 import { NeatTheme } from '../Theme/NeatTheme'
 
-const columnWidth: Function = (theme: typeof NeatTheme, span: number): string => {
+const columnWidth: Function = (
+  theme: typeof NeatTheme,
+  span: number
+): string => {
   const { columns, gutter } = theme
   if (!columns || gutter === undefined) return '0'
   let ratio = span / columns
@@ -12,7 +15,7 @@ const columnWidth: Function = (theme: typeof NeatTheme, span: number): string =>
   if (gutterValue === 0) {
     return `${ratio * 100}%`
   } else {
-    let affordance = `${gutterValue + (gutterValue * ratio)}${gutterUnit}`
+    let affordance = `${gutterValue + gutterValue * ratio}${gutterUnit}`
     return `${ratio * 100}% - ${affordance}`
   }
 }
diff --git a/src/Functions/floatDirection.js b/src/Functions/floatDirection.js
index 1f54be8..5700f0f 100644
--- a/src/Functions/floatDirection.js
+++ b/src/Functions/floatDirection.js
@@ -1,6 +1,6 @@
 // @flow
 const floatDirection: Function = (direction: string = 'ltr'): string => {
-  return (direction === 'rtl') ? 'right' : 'left'
+  return direction === 'rtl' ? 'right' : 'left'
 }
 
 export default floatDirection
diff --git a/src/Functions/floatOppositeDirection.js b/src/Functions/floatOppositeDirection.js
index 63ac66d..456c06c 100644
--- a/src/Functions/floatOppositeDirection.js
+++ b/src/Functions/floatOppositeDirection.js
@@ -1,5 +1,7 @@
 // @flow
-const floatOppositeDirection: Function = (direction: string = 'ltr'): ?string => {
+const floatOppositeDirection: Function = (
+  direction: string = 'ltr'
+): ?string => {
   if (direction === 'ltr') {
     return 'right'
   }
diff --git a/src/Hooks/useTheme.js b/src/Hooks/useTheme.js
index 50b7e74..3202794 100644
--- a/src/Hooks/useTheme.js
+++ b/src/Hooks/useTheme.js
@@ -1,9 +1,18 @@
 import React from 'react'
 import { NeatTheme } from '../Theme/NeatTheme'
+
+/**
+ * Eventually this will replace the Theme provider.
+ * @param props
+ */
 export const useTheme = props => {
   const [color, setColor] = React.useState(props.color ?? NeatTheme.color)
-  const [columns, setColumns] = React.useState(props.columns ?? NeatTheme.columns)
-  const [direction, setDirection] = React.useState(props.direction ?? NeatTheme.direction)
+  const [columns, setColumns] = React.useState(
+    props.columns ?? NeatTheme.columns
+  )
+  const [direction, setDirection] = React.useState(
+    props.direction ?? NeatTheme.direction
+  )
   const [gutter, setGutter] = React.useState(props.gutter ?? NeatTheme.gutter)
   const [media, setMedia] = React.useState(props.media ?? NeatTheme.media)
   return {
diff --git a/src/Mixins/gridMedia.js b/src/Mixins/gridMedia.js
index aa87643..d70ad44 100644
--- a/src/Mixins/gridMedia.js
+++ b/src/Mixins/gridMedia.js
@@ -3,7 +3,10 @@ import { parseMedia } from '../Functions'
 import { css } from 'styled-components'
 import { NeatTheme } from '../Theme/NeatTheme'
 
-let gridMedia: Function = (theme: typeof NeatTheme, ...args: Array<any>): Array<any> => {
+let gridMedia: Function = (
+  theme: typeof NeatTheme,
+  ...args: Array<any>
+): Array<any> => {
   const { media } = theme
   if (!media) return []
   return css`
diff --git a/src/Mixins/gridMedia.test.js b/src/Mixins/gridMedia.test.js
index 7cf59b4..d443754 100644
--- a/src/Mixins/gridMedia.test.js
+++ b/src/Mixins/gridMedia.test.js
@@ -3,25 +3,35 @@ import Neat from '../Theme/Neat'
 
 describe('gridMedia()', () => {
   it('should handle numeric input', () => {
-    let result = gridMedia(Neat({
-      media: 500
-    }), [{backgroundColor: 'blue'}])
+    let result = gridMedia(
+      Neat({
+        media: 500
+      }),
+      [{ backgroundColor: 'blue' }]
+    )
     expect(Array.isArray(result)).toBe(true)
-    expect(result.join('').replace(/\s+/g, ' ').trim()).toEqual(`
+    expect(result.join('').replace(/\s+/g, ' ').trim()).toEqual(
+      `
       @media only screen and (min-width: 500px) { background-color: blue; } 
-    `.trim())
+    `.trim()
+    )
   })
   it('should handle string input', () => {
-    let result = gridMedia(Neat({
-      media: 'only screen and (max-width: 100px)'
-    }), [{backgroundColor: 'red'}])
+    let result = gridMedia(
+      Neat({
+        media: 'only screen and (max-width: 100px)'
+      }),
+      [{ backgroundColor: 'red' }]
+    )
     expect(Array.isArray(result)).toBe(true)
-    expect(result.join('').replace(/\s+/g, ' ').trim()).toEqual(`
+    expect(result.join('').replace(/\s+/g, ' ').trim()).toEqual(
+      `
       @media only screen and (max-width: 100px) { background-color: red; } 
-    `.trim())
+    `.trim()
+    )
   })
   it('should return an empty array when no media is passed', () => {
-    let result = gridMedia(Neat({}), [{backgroundColor: 'red'}])
+    let result = gridMedia(Neat({}), [{ backgroundColor: 'red' }])
     expect(Array.isArray(result)).toBe(true)
     expect(result).toEqual([])
   })
diff --git a/src/Mixins/gridPush.js b/src/Mixins/gridPush.js
index b01dc2a..d031ff1 100644
--- a/src/Mixins/gridPush.js
+++ b/src/Mixins/gridPush.js
@@ -1,10 +1,5 @@
 // @flow
-import {
-  columnWidth,
-  floatDirection,
-  parseUnit,
-  stripUnit
-} from '../Functions'
+import { columnWidth, floatDirection, parseUnit, stripUnit } from '../Functions'
 import { NeatTheme } from '../Theme/NeatTheme'
 
 type Styles = {
@@ -12,7 +7,10 @@ type Styles = {
   'margin-right'?: string
 }
 
-let gridPush: Function = (theme: typeof NeatTheme, push: number = 0): Styles => {
+let gridPush: Function = (
+  theme: typeof NeatTheme,
+  push: number = 0
+): Styles => {
   const { direction, gutter } = theme
   if (push > 0) {
     let gutterValue = stripUnit(gutter)
diff --git a/src/Mixins/gridPush.test.js b/src/Mixins/gridPush.test.js
index e1094ae..8ac8de7 100644
--- a/src/Mixins/gridPush.test.js
+++ b/src/Mixins/gridPush.test.js
@@ -16,6 +16,8 @@ describe('gridPush()', () => {
   it('should handle a push greater than 0', () => {
     let result = gridPush(Neat(), 2)
     let calculatedWidth = columnWidth(Neat(), 2)
-    expect(result['margin-left'].trim()).toEqual(`calc(${calculatedWidth} + 40px)`)
+    expect(result['margin-left'].trim()).toEqual(
+      `calc(${calculatedWidth} + 40px)`
+    )
   })
 })
diff --git a/src/Mixins/gridShift.js b/src/Mixins/gridShift.js
index d652050..30cb84f 100644
--- a/src/Mixins/gridShift.js
+++ b/src/Mixins/gridShift.js
@@ -8,7 +8,10 @@ type Styles = {
   position?: string
 }
 
-const gridShift: Function = (theme: typeof NeatTheme, shift: number = 0): Styles => {
+const gridShift: Function = (
+  theme: typeof NeatTheme,
+  shift: number = 0
+): Styles => {
   const { direction, gutter } = theme
   if (!direction || gutter === undefined) return {}
   if (shift > 0) {
diff --git a/src/Mixins/gridVisual.test.js b/src/Mixins/gridVisual.test.js
index 788d970..d926862 100644
--- a/src/Mixins/gridVisual.test.js
+++ b/src/Mixins/gridVisual.test.js
@@ -5,13 +5,16 @@ import Neat from '../Theme/Neat'
 describe('gridVisual()', () => {
   it('should return the correct object', () => {
     let color = 'blue'
-    let result = gridVisual(Neat({color}))
+    let result = gridVisual(Neat({ color }))
     expect(result.hasOwnProperty('background-image')).toBe(true)
-    expect(result['background-image'].replace(/\s+/g, ' ').trim()).toEqual(`
+    expect(result['background-image'].replace(/\s+/g, ' ').trim()).toEqual(
+      `
       repeating-linear-gradient(
         to right, transparent, transparent 20px, ${color} 20px,
         ${color} calc(${columnWidth(Neat(), 1)} + 20px)
-      )`.replace(/\s+/g, ' ').trim()
+      )`
+        .replace(/\s+/g, ' ')
+        .trim()
     )
   })
   it('should return an empty object if there is no gutter', () => {
@@ -27,11 +30,14 @@ describe('gridVisual()', () => {
   it('should return the correct object', () => {
     let result = gridVisual(Neat())
     expect(result.hasOwnProperty('background-image')).toBe(true)
-    expect(result['background-image'].replace(/\s+/g, ' ').trim()).toEqual(`
+    expect(result['background-image'].replace(/\s+/g, ' ').trim()).toEqual(
+      `
       repeating-linear-gradient(
         to right, transparent, transparent 20px, 20px,
         calc(${columnWidth(Neat(), 1)} + 20px)
-      )`.replace(/\s+/g, ' ').trim()
+      )`
+        .replace(/\s+/g, ' ')
+        .trim()
     )
   })
 })
diff --git a/src/Theme/Neat.js b/src/Theme/Neat.js
index f1bf311..1d77c99 100644
--- a/src/Theme/Neat.js
+++ b/src/Theme/Neat.js
@@ -5,9 +5,10 @@ import type { Theme } from './NeatTheme'
 const Neat: Function = (theme: Theme = NeatTheme): Theme => ({
   color: theme.color || NeatTheme.color,
   columns: theme.columns || NeatTheme.columns,
-  direction: (theme.direction === Directions.LTR || theme.direction === Directions.RTL)
-    ? theme.direction
-    : NeatTheme.direction,
+  direction:
+    theme.direction === Directions.LTR || theme.direction === Directions.RTL
+      ? theme.direction
+      : NeatTheme.direction,
   gutter: theme.gutter || NeatTheme.gutter,
   media: theme.media || NeatTheme.media
 })
diff --git a/src/Theme/Neat.test.js b/src/Theme/Neat.test.js
index 1aa263f..eae7a6d 100644
--- a/src/Theme/Neat.test.js
+++ b/src/Theme/Neat.test.js
@@ -5,7 +5,7 @@ describe('Neat', () => {
   describe('constructor', () => {
     it('should return the default values', () => {
       const result = {
-        ...(new Neat())
+        ...new Neat()
       }
       expect(result.color).toBe(null)
       expect(result.columns).toBe(12)
@@ -15,11 +15,11 @@ describe('Neat', () => {
     })
     it('should return a mix of default values with custom values', () => {
       const result = {
-        ...(new Neat({
+        ...new Neat({
           color: 'blue',
           media: 1000,
           gutter: '10px'
-        }))
+        })
       }
       expect(result.color).toBe('blue')
       expect(result.columns).toBe(12)
@@ -29,25 +29,25 @@ describe('Neat', () => {
     })
     it('should handle a direction of "ltr" correctly', () => {
       const result = {
-        ...(new Neat({
+        ...new Neat({
           direction: Directions.LTR
-        }))
+        })
       }
       expect(result.direction).toBe(Directions.LTR)
     })
     it('should handle a direction of "rtl" correctly', () => {
       const result = {
-        ...(new Neat({
+        ...new Neat({
           direction: Directions.RTL
-        }))
+        })
       }
       expect(result.direction).toBe(Directions.RTL)
     })
     it('should handle a number direction correctly', () => {
       const result = {
-        ...(new Neat({
+        ...new Neat({
           direction: 1
-        }))
+        })
       }
       expect(result.direction).toBe(Directions.LTR)
     })
diff --git a/src/Theme/NeatTheme.js b/src/Theme/NeatTheme.js
index 261cb89..5bb59df 100644
--- a/src/Theme/NeatTheme.js
+++ b/src/Theme/NeatTheme.js
@@ -1,5 +1,5 @@
 // @flow
-export const Directions: {[key: string]: string} = {
+export const Directions: { [key: string]: string } = {
   LTR: 'LTR',
   RTL: 'RTL'
 }
diff --git a/src/test.js b/src/test.js
index bc0c1b2..c272879 100644
--- a/src/test.js
+++ b/src/test.js
@@ -1,4 +1,12 @@
-import Neat, { gridCollapse, gridColumn, gridContainer, gridMedia, gridPush, gridShift, gridVisual } from './'
+import Neat, {
+  gridCollapse,
+  gridColumn,
+  gridContainer,
+  gridMedia,
+  gridPush,
+  gridShift,
+  gridVisual
+} from './'
 
 describe('API', () => {
   it('should export the API correctly', () => {
diff --git a/stories/index.js b/stories/index.js
index 31de0de..823963a 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -80,10 +80,12 @@ storiesOf('Neat Components', module)
       media: 'only screen and (min-width: 601px)'
     })
 
-    const desktopMediaQuery = gridMedia(desktopGrid, [{
-      ...gridColumn(desktopGrid, 1),
-      'background-color': 'red'
-    }])
+    const desktopMediaQuery = gridMedia(desktopGrid, [
+      {
+        ...gridColumn(desktopGrid, 1),
+        'background-color': 'red'
+      }
+    ])
 
     const Column = styled.div`
       height: 50px;