diff --git a/.releaserc b/.releaserc
index fc83a1a..c168af0 100644
--- a/.releaserc
+++ b/.releaserc
@@ -14,20 +14,20 @@
       '@semantic-release/commit-analyzer',
       '@semantic-release/release-notes-generator',
       '@semantic-release/npm',
-      '@semantic-release/github'
-    ],
-    [
-      '@semantic-release/changelog',
-      {
-        'changelogTitle': 'Changelog',
-        'changelogFile': 'docs/CHANGELOG.md'
-      }
-    ],
-    [
-      '@semantic-release/git',
-      {
-        'assets': ['docs/CHANGELOG.md']
-      }
+      '@semantic-release/github',
+      [
+        '@semantic-release/changelog',
+        {
+          'changelogTitle': 'Changelog',
+          'changelogFile': 'docs/CHANGELOG.md'
+        }
+      ],
+      [
+        '@semantic-release/git',
+        {
+          'assets': ['docs/CHANGELOG.md']
+        }
+      ]
     ]
   }
 }
diff --git a/package.json b/package.json
index c3b9bea..746c596 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,9 @@
     "get-pkg-repo": "4.1.1",
     "hosted-git-info": "^2.1.4"
   },
+  "dependencies": {
+    "@emotion/is-prop-valid": "^1.1.3"
+  },
   "devDependencies": {
     "@babel/eslint-parser": "^7.18.2",
     "@babel/preset-env": "7.18.6",
@@ -57,6 +60,8 @@
     "@emotion/babel-plugin": "^11.9.2",
     "@emotion/eslint-plugin": "^11.7.0",
     "@emotion/jest": "^11.9.3",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@preconstruct/cli": "2.1.7",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "9.0.2",
@@ -83,18 +88,16 @@
     "lint-staged": "13.0.3",
     "prettier": "2.7.1",
     "pretty-quick": "3.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "semantic-release": "19.0.3",
     "stylelint": "14.9.1",
     "ts-jest": "28.0.5",
     "typescript": "4.7.4"
   },
-  "dependencies": {
-    "@emotion/css": "^11.9.0",
-    "@emotion/is-prop-valid": "^1.1.3",
+  "peerDependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@swc/helpers": "^0.4.3",
-    "gatsby-plugin-emotion": "^7.18.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
diff --git a/src/components/Col/Col.styles.ts b/src/components/Col/Col.styles.ts
new file mode 100644
index 0000000..14fd989
--- /dev/null
+++ b/src/components/Col/Col.styles.ts
@@ -0,0 +1,62 @@
+import { css } from '@emotion/react';
+
+import { config } from '../../config';
+import { responsive } from '../../utils';
+
+import type { ColProps } from '.';
+import type { DefaultTheme, StyleProps } from '../../types/emotion';
+
+export const base = ({ theme }: StyleProps) => css`
+  label: col;
+
+  position: relative;
+  flex: 1 0 0%;
+
+  width: 100%;
+  max-width: 100%;
+
+  box-sizing: border-box;
+
+  ${responsive(
+    config(theme).grid.breakpoints,
+    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
+      padding-left: ${config(theme).grid.gutter[breakpoint] / 2}rem;
+      padding-right: ${config(theme).grid.gutter[breakpoint] / 2}rem;
+    `
+  )};
+`;
+
+export const size = (props: ColProps & StyleProps) =>
+  responsive(
+    config(props.theme).grid.breakpoints,
+    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
+      props[breakpoint] &&
+      `
+        label: col--size;
+        flex: 0 0 ${
+          (props[breakpoint] / config(props.theme).grid.columns[breakpoint]) *
+          100
+        }%;
+        max-width: ${
+          (props[breakpoint] / config(props.theme).grid.columns[breakpoint]) *
+          100
+        }%;
+    `
+  );
+
+export const offset = ({ theme, offset }: ColProps & StyleProps) =>
+  offset &&
+  responsive(
+    config(theme).grid.breakpoints,
+    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
+      offset[breakpoint] &&
+      `
+        label: col--offset;
+        margin-left: ${
+          offset[breakpoint] >= 0
+            ? (offset[breakpoint] / config(theme).grid.columns[breakpoint]) *
+              100
+            : 0
+        }%;
+    `
+  );
diff --git a/src/components/Col/Col.tsx b/src/components/Col/Col.tsx
index 134c232..618a6f1 100644
--- a/src/components/Col/Col.tsx
+++ b/src/components/Col/Col.tsx
@@ -1,31 +1,25 @@
-import React, { Ref, ReactNode } from 'react';
+import React from 'react';
+import type { Ref, ReactNode } from 'react';
 
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 import isPropValid from '@emotion/is-prop-valid';
 
-import { config } from '../../config';
-import { responsive } from '../../utils';
+import { DefaultTheme } from '../../types/emotion';
 
-import { DefaultTheme, StyleProps } from '../../types/emotion';
+import * as styles from './Col.styles';
 
 export interface ColProps {
   /**
-   * Trigger column styles
-   * based on breakpoint
+   * Controls the column `size`, based on breakpoint
    */
   xs?: number;
-
   sm?: number;
-
   md?: number;
-
   lg?: number;
-
   xl?: number;
 
   /**
-   * The column `span`
+   * Controls the column `offset`
    */
   offset?: DefaultTheme['grid']['breakpoints'];
 
@@ -40,64 +34,9 @@ export interface ColProps {
   children: ReactNode;
 }
 
-const baseStyle = ({ theme }: StyleProps) => css`
-  label: col;
-
-  position: relative;
-  flex: 1 0 0%;
-
-  width: 100%;
-  max-width: 100%;
-
-  box-sizing: border-box;
-
-  ${responsive(
-    config(theme).grid.breakpoints,
-    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
-      padding-left: ${config(theme).grid.gutter[breakpoint] / 2}rem;
-      padding-right: ${config(theme).grid.gutter[breakpoint] / 2}rem;
-    `
-  )};
-`;
-
-const sizeStyle = (props: ColProps & StyleProps) =>
-  responsive(
-    config(props.theme).grid.breakpoints,
-    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
-      props[breakpoint] &&
-      `
-        label: col--size;
-        flex: 0 0 ${
-          (props[breakpoint] / config(props.theme).grid.columns[breakpoint]) *
-          100
-        }%;
-        max-width: ${
-          (props[breakpoint] / config(props.theme).grid.columns[breakpoint]) *
-          100
-        }%;
-    `
-  );
-
-const offsetStyle = ({ theme, offset }: ColProps & StyleProps) =>
-  offset &&
-  responsive(
-    config(theme).grid.breakpoints,
-    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
-      offset[breakpoint] &&
-      `
-        label: col--offset;
-        margin-left: ${
-          offset[breakpoint] >= 0
-            ? (offset[breakpoint] / config(theme).grid.columns[breakpoint]) *
-              100
-            : 0
-        }%;
-    `
-  );
-
 const ColEl = styled('div', {
   shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'offset',
-})<ColProps>(baseStyle, sizeStyle, offsetStyle);
+})<ColProps>(styles.base, styles.size, styles.offset);
 
 const Col = React.forwardRef((props: ColProps, ref?: ColProps['ref']) => {
   return <ColEl ref={ref} className="EmotionGrid-Col" {...props} />;
diff --git a/src/components/Container/Container.styles.ts b/src/components/Container/Container.styles.ts
new file mode 100644
index 0000000..bbbe93c
--- /dev/null
+++ b/src/components/Container/Container.styles.ts
@@ -0,0 +1,57 @@
+import { css } from '@emotion/react';
+
+import { config } from '../../config';
+import { responsive } from '../../utils';
+
+import { ContainerProps } from '.';
+import type { DefaultTheme, StyleProps } from '../../types/emotion';
+
+export const base = ({ theme }: StyleProps) => css`
+  label: container;
+
+  width: 100%;
+  max-width: 100%;
+
+  margin-right: auto;
+  margin-left: auto;
+
+  box-sizing: border-box;
+
+  ${responsive(
+    config(theme).grid.breakpoints,
+    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
+    padding-left: ${config(theme).grid.padding[breakpoint] / 2}rem;
+    padding-right: ${config(theme).grid.padding[breakpoint] / 2}rem;
+`
+  )}
+`;
+
+export const fluid = ({ theme, fluid }: ContainerProps & StyleProps) =>
+  !fluid &&
+  responsive(
+    config(theme).grid.breakpoints,
+    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
+      typeof config(theme).grid.container[breakpoint] === 'number' &&
+      `
+      label: container--fluid;
+      max-width: ${config(theme).grid.container[breakpoint]}rem;
+    `
+  );
+
+export const debug = ({ theme, debug }: ContainerProps & StyleProps) => {
+  return (
+    debug &&
+    css`
+      .EmotionGrid-Row {
+        label: row--debug;
+        background: ${config(theme).grid.colors.blue}0D;
+      }
+
+      .EmotionGrid-Col {
+        label: col--debug;
+        background: ${config(theme).grid.colors.blue}0D;
+        border: 1px solid ${config(theme).grid.colors.blue};
+      }
+    `
+  );
+};
diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
index e7e7d81..101118b 100644
--- a/src/components/Container/Container.tsx
+++ b/src/components/Container/Container.tsx
@@ -1,21 +1,18 @@
-import React, { Ref, ReactNode } from 'react';
+import React from 'react';
+import type { Ref, ReactNode } from 'react';
 
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 
-import { config } from '../../config';
-import { responsive } from '../../utils';
-
-import { DefaultTheme, StyleProps } from '../../types/emotion';
+import * as styles from './Container.styles';
 
 export interface ContainerProps {
   /**
-   * Set the container `max-width`
+   * The CSS `max-width` property
    */
   fluid?: boolean;
 
   /**
-   * Set a visual background
+   * Enable a background, to visual debug
    */
   debug?: boolean;
 
@@ -30,60 +27,10 @@ export interface ContainerProps {
   children: ReactNode;
 }
 
-const baseStyle = ({ theme }: StyleProps) => css`
-  label: container;
-
-  width: 100%;
-  max-width: 100%;
-
-  margin-right: auto;
-  margin-left: auto;
-
-  box-sizing: border-box;
-
-  ${responsive(
-    config(theme).grid.breakpoints,
-    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
-      padding-left: ${config(theme).grid.padding[breakpoint] / 2}rem;
-      padding-right: ${config(theme).grid.padding[breakpoint] / 2}rem;
-  `
-  )}
-`;
-
-const fluidStyle = ({ theme, fluid }: ContainerProps & StyleProps) =>
-  !fluid &&
-  responsive(
-    config(theme).grid.breakpoints,
-    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
-      typeof config(theme).grid.container[breakpoint] === 'number' &&
-      `
-        label: container--fluid;
-        max-width: ${config(theme).grid.container[breakpoint]}rem;
-      `
-  );
-
-const debugStyle = ({ theme, debug }: ContainerProps & StyleProps) => {
-  return (
-    debug &&
-    css`
-      .EmotionGrid-Row {
-        label: row--debug;
-        background: ${config(theme).grid.colors.blue}0D;
-      }
-
-      .EmotionGrid-Col {
-        label: col--debug;
-        background: ${config(theme).grid.colors.blue}0D;
-        border: 1px solid ${config(theme).grid.colors.blue};
-      }
-    `
-  );
-};
-
 const ContainerEl = styled('div')<ContainerProps>(
-  baseStyle,
-  fluidStyle,
-  debugStyle
+  styles.base,
+  styles.fluid,
+  styles.debug
 );
 
 const Container = React.forwardRef(
diff --git a/src/components/Debugger/components/Button/Button.styles.ts b/src/components/Debugger/components/Button/Button.styles.ts
new file mode 100644
index 0000000..8cd8f37
--- /dev/null
+++ b/src/components/Debugger/components/Button/Button.styles.ts
@@ -0,0 +1,47 @@
+import { css } from '@emotion/react';
+
+import { config } from '../../../../config';
+
+import type { ButtonProps } from '.';
+import type { StyleProps } from '../../../../types/emotion';
+
+export const base = ({ theme, isActive }: ButtonProps & StyleProps) => css`
+  label: button;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: fixed;
+  right: 30px;
+  bottom: 30px;
+
+  margin: 0;
+
+  width: 58px;
+  height: 58px;
+
+  overflow: hidden;
+
+  padding: 0;
+  box-sizing: border-box;
+
+  color: ${isActive ? `${config(theme).grid.colors.blue}` : '#fff'};
+  font-size: 14px;
+  font-weight: bold;
+
+  text-transform: uppercase;
+
+  cursor: pointer;
+  user-select: none;
+  pointer-events: auto;
+  -webkit-appearance: none;
+  transition: background, color 0.2s;
+
+  background: ${isActive
+    ? `${config(theme).grid.colors.blue}3D`
+    : `${config(theme).grid.colors.blue}`};
+  border: 0;
+  border-radius: 50%;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12);
+`;
diff --git a/src/components/Debugger/components/Button/Button.tsx b/src/components/Debugger/components/Button/Button.tsx
index 6b2e2b0..20c0020 100644
--- a/src/components/Debugger/components/Button/Button.tsx
+++ b/src/components/Debugger/components/Button/Button.tsx
@@ -1,55 +1,11 @@
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 
-import { config } from '../../../../config';
-import { StyleProps } from '../../../../types/emotion';
-
-type ButtonProps = {
+import * as styles from './Button.styles';
+export interface ButtonProps {
   isActive: boolean;
   onClick?: (e: React.MouseEvent) => void;
-};
-
-const baseStyle = ({ theme, isActive }: ButtonProps & StyleProps) => css`
-  label: button;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  position: fixed;
-  right: 30px;
-  bottom: 30px;
-
-  margin: 0;
-
-  width: 58px;
-  height: 58px;
-
-  overflow: hidden;
-
-  padding: 0;
-  box-sizing: border-box;
-
-  color: ${isActive ? `${config(theme).grid.colors.blue}` : '#fff'};
-  font-size: 14px;
-  font-weight: bold;
-
-  text-transform: uppercase;
-
-  cursor: pointer;
-  user-select: none;
-  pointer-events: auto;
-  -webkit-appearance: none;
-  transition: background, color 0.2s;
-
-  background: ${isActive
-    ? `${config(theme).grid.colors.blue}3D`
-    : `${config(theme).grid.colors.blue}`};
-  border: 0;
-  border-radius: 50%;
-  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12);
-`;
+}
 
-const Button = styled('div')<ButtonProps>(baseStyle);
+const Button = styled('div')<ButtonProps>(styles.base);
 
 export default Button;
diff --git a/src/components/Debugger/components/Button/index.ts b/src/components/Debugger/components/Button/index.ts
index eae9c8e..427c3ac 100644
--- a/src/components/Debugger/components/Button/index.ts
+++ b/src/components/Debugger/components/Button/index.ts
@@ -1 +1,2 @@
 export { default as Button } from './Button';
+export type { ButtonProps } from './Button';
diff --git a/src/components/Debugger/components/GridOverlay/GridOverlay.styles.ts b/src/components/Debugger/components/GridOverlay/GridOverlay.styles.ts
new file mode 100644
index 0000000..0242a73
--- /dev/null
+++ b/src/components/Debugger/components/GridOverlay/GridOverlay.styles.ts
@@ -0,0 +1,59 @@
+import { css } from '@emotion/react';
+
+import { config } from '../../../../config';
+
+import type { GridOverlayProps } from '.';
+import type { StyleProps } from '../../../../types/emotion';
+
+export const base = ({ theme, visible }: GridOverlayProps & StyleProps) => css`
+  label: grid-overlay;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  z-index: 10000;
+  overflow: hidden;
+
+  pointer-events: none;
+  transform-origin: 50% 0%;
+
+  .EmotionGrid-Container {
+    height: 100%;
+
+    opacity: ${visible ? 1 : 0};
+    transition: opacity 0.2s;
+  }
+
+  .EmotionGrid-Row {
+    height: 100%;
+    background: ${config(theme).grid.colors.blue}0D;
+  }
+
+  .EmotionGrid-Col {
+    height: 100%;
+
+    & > div {
+      position: relative;
+
+      width: 100%;
+      height: 100%;
+
+      &::before,
+      &::after {
+        content: '';
+
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 100%;
+
+        background: ${config(theme).grid.colors.blue}0D;
+      }
+    }
+  }
+`;
diff --git a/src/components/Debugger/components/GridOverlay/GridOverlay.tsx b/src/components/Debugger/components/GridOverlay/GridOverlay.tsx
index 45f149c..c9b9eac 100644
--- a/src/components/Debugger/components/GridOverlay/GridOverlay.tsx
+++ b/src/components/Debugger/components/GridOverlay/GridOverlay.tsx
@@ -1,68 +1,14 @@
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
+import type { ReactNode } from 'react';
 
-import { config } from '../../../../config';
+import styled from '@emotion/styled';
 
-import { StyleProps } from '../../../../types/emotion';
+import * as styles from './GridOverlay.styles';
 
-type GridOverlayProps = {
+export interface GridOverlayProps {
   visible?: boolean;
-  children?: React.ReactNode;
-};
-
-const baseStyle = ({ theme, visible }: GridOverlayProps & StyleProps) => css`
-  label: grid-overlay;
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  z-index: 10000;
-  overflow: hidden;
-
-  pointer-events: none;
-  transform-origin: 50% 0%;
-
-  .EmotionGrid-Container {
-    height: 100%;
-
-    opacity: ${visible ? 1 : 0};
-    transition: opacity 0.2s;
-  }
-
-  .EmotionGrid-Row {
-    height: 100%;
-    background: ${config(theme).grid.colors.blue}0D;
-  }
-
-  .EmotionGrid-Col {
-    height: 100%;
-
-    & > div {
-      position: relative;
-
-      width: 100%;
-      height: 100%;
-
-      &::before,
-      &::after {
-        content: '';
-
-        position: absolute;
-        top: 0;
-        left: 0;
-
-        width: 100%;
-        height: 100%;
-
-        background: ${config(theme).grid.colors.blue}0D;
-      }
-    }
-  }
-`;
+  children?: ReactNode;
+}
 
-const GridOverlay = styled('div')<GridOverlayProps>(baseStyle);
+const GridOverlay = styled('div')<GridOverlayProps>(styles.base);
 
 export default GridOverlay;
diff --git a/src/components/Debugger/components/GridOverlay/index.ts b/src/components/Debugger/components/GridOverlay/index.ts
index 784e48b..bb81d47 100644
--- a/src/components/Debugger/components/GridOverlay/index.ts
+++ b/src/components/Debugger/components/GridOverlay/index.ts
@@ -1 +1,2 @@
 export { default as GridOverlay } from './GridOverlay';
+export type { GridOverlayProps } from './GridOverlay';
diff --git a/src/components/Row/Row.styles.ts b/src/components/Row/Row.styles.ts
new file mode 100644
index 0000000..e1364b3
--- /dev/null
+++ b/src/components/Row/Row.styles.ts
@@ -0,0 +1,83 @@
+import { css } from '@emotion/react';
+
+import { config } from '../../config';
+import { responsive } from '../../utils';
+
+import type { RowProps } from '.';
+import { DefaultTheme, StyleProps } from '../../types/emotion';
+
+export const base = ({ theme }: StyleProps) => css`
+  label: row;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  box-sizing: border-box;
+
+  ${responsive(
+    config(theme).grid.breakpoints,
+    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
+      margin-left: -${config(theme).grid.gutter[breakpoint] / 2}rem;
+      margin-right: -${config(theme).grid.gutter[breakpoint] / 2}rem;
+    `
+  )};
+`;
+
+export const align = ({ theme, align }: RowProps & StyleProps) =>
+  typeof align === 'object'
+    ? responsive(
+        config(theme).grid.breakpoints,
+        (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
+          align[breakpoint] &&
+          `
+            label: row--align;
+            align-items: ${align[breakpoint]};
+          `
+      )
+    : css`
+        label: row--align;
+        align-items: ${align};
+      `;
+
+export const justify = ({ theme, justify }: RowProps & StyleProps) =>
+  typeof justify === 'object'
+    ? responsive(
+        config(theme).grid.breakpoints,
+        (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
+          justify[breakpoint] &&
+          `
+            label: row--justify;
+            justify-content: ${justify[breakpoint]};
+          `
+      )
+    : css`
+        label: row--justify;
+        justify-content: ${justify};
+      `;
+
+export const reverse = ({ theme, reverse }: RowProps & StyleProps) =>
+  reverse &&
+  (Array.isArray(reverse)
+    ? responsive(
+        config(theme).grid.breakpoints,
+        (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
+          label: row--reverse;
+          flex-direction: ${
+            reverse.includes(breakpoint) ? 'row-reverse' : 'row'
+          };
+        `
+      )
+    : css`
+        label: row--reverse;
+        flex-direction: row-reverse;
+      `);
+
+export const noGutter = ({ noGutters }: RowProps) =>
+  noGutters &&
+  css`
+    .EmotionGrid-Col {
+      label: col--no-gutters;
+      padding-left: 0;
+      padding-right: 0;
+    }
+  `;
diff --git a/src/components/Row/Row.tsx b/src/components/Row/Row.tsx
index 7126599..e416bc3 100644
--- a/src/components/Row/Row.tsx
+++ b/src/components/Row/Row.tsx
@@ -1,10 +1,7 @@
-import React, { Ref, ReactNode } from 'react';
+import React from 'react';
+import type { Ref, ReactNode } from 'react';
 
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-import { config } from '../../config';
-import { responsive } from '../../utils';
 
 import {
   Align,
@@ -12,9 +9,10 @@ import {
   Justify,
   JustifyProps,
   DefaultTheme,
-  StyleProps,
 } from '../../types/emotion';
 
+import * as styles from './Row.styles';
+
 export interface RowProps {
   /**
    * The CSS `align-items` property
@@ -47,88 +45,12 @@ export interface RowProps {
   children: ReactNode;
 }
 
-const baseStyle = ({ theme }: StyleProps) => css`
-  label: row;
-
-  display: flex;
-  flex-wrap: wrap;
-
-  box-sizing: border-box;
-
-  ${responsive(
-    config(theme).grid.breakpoints,
-    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
-      margin-left: -${config(theme).grid.gutter[breakpoint] / 2}rem;
-      margin-right: -${config(theme).grid.gutter[breakpoint] / 2}rem;
-    `
-  )};
-`;
-
-const alignStyle = ({ theme, align }: RowProps & StyleProps) =>
-  typeof align === 'object'
-    ? responsive(
-        config(theme).grid.breakpoints,
-        (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
-          align[breakpoint] &&
-          `
-            label: row--align;
-            align-items: ${align[breakpoint]};
-          `
-      )
-    : css`
-        label: row--align;
-        align-items: ${align};
-      `;
-
-const justifyStyle = ({ theme, justify }: RowProps & StyleProps) =>
-  typeof justify === 'object'
-    ? responsive(
-        config(theme).grid.breakpoints,
-        (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
-          justify[breakpoint] &&
-          `
-            label: row--justify;
-            justify-content: ${justify[breakpoint]};
-          `
-      )
-    : css`
-        label: row--justify;
-        justify-content: ${justify};
-      `;
-
-const reverseStyle = ({ theme, reverse }: RowProps & StyleProps) =>
-  reverse &&
-  (Array.isArray(reverse)
-    ? responsive(
-        config(theme).grid.breakpoints,
-        (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
-          label: row--reverse;
-          flex-direction: ${
-            reverse.includes(breakpoint) ? 'row-reverse' : 'row'
-          };
-        `
-      )
-    : css`
-        label: row--reverse;
-        flex-direction: row-reverse;
-      `);
-
-const noGutterStyle = ({ noGutters }: RowProps) =>
-  noGutters &&
-  css`
-    .EmotionGrid-Col {
-      label: col--no-gutters;
-      padding-left: 0;
-      padding-right: 0;
-    }
-  `;
-
 const RowEl = styled('div')<RowProps>(
-  baseStyle,
-  alignStyle,
-  justifyStyle,
-  reverseStyle,
-  noGutterStyle
+  styles.base,
+  styles.align,
+  styles.justify,
+  styles.reverse,
+  styles.noGutter
 );
 
 const Row = React.forwardRef((props: RowProps, ref?: RowProps['ref']) => {
diff --git a/yarn.lock b/yarn.lock
index 5368450..a1f9aa0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2245,7 +2245,7 @@
   dependencies:
     "@babel/plugin-syntax-jsx" "^7.2.0"
 
-"@emotion/babel-plugin@^11.2.0", "@emotion/babel-plugin@^11.7.1", "@emotion/babel-plugin@^11.9.2":
+"@emotion/babel-plugin@^11.7.1", "@emotion/babel-plugin@^11.9.2":
   version "11.9.2"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz#723b6d394c89fb2ef782229d92ba95a740576e95"
   integrity sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==
@@ -2274,16 +2274,6 @@
     "@emotion/babel-plugin-jsx-pragmatic" "^0.1.5"
     babel-plugin-emotion "^10.0.27"
 
-"@emotion/babel-preset-css-prop@^11.2.0":
-  version "11.2.0"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-11.2.0.tgz#c7e945f56b2610b438f0dc8ae5253fc55488de0e"
-  integrity sha512-9XLQm2eLPYTho+Cx1LQTDA1rATjoAaB4O+ds55XDvoAa+Z16Hhg8y5Vihj3C8E6+ilDM8SV5A9Z6z+yj0YIRBg==
-  dependencies:
-    "@babel/plugin-transform-react-jsx" "^7.12.1"
-    "@babel/runtime" "^7.7.2"
-    "@emotion/babel-plugin" "^11.2.0"
-    "@emotion/babel-plugin-jsx-pragmatic" "^0.1.5"
-
 "@emotion/cache@^10.0.27":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
@@ -2294,7 +2284,7 @@
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
-"@emotion/cache@^11.7.1", "@emotion/cache@^11.9.3":
+"@emotion/cache@^11.9.3":
   version "11.9.3"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.9.3.tgz#96638449f6929fd18062cfe04d79b29b44c0d6cb"
   integrity sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==
@@ -2334,17 +2324,6 @@
     "@emotion/utils" "0.11.3"
     babel-plugin-emotion "^10.0.27"
 
-"@emotion/css@^11.9.0":
-  version "11.9.0"
-  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.9.0.tgz#d5aeaca5ed19fc61cbdc9e032ad0b32fa6e366be"
-  integrity sha512-S9UjCxSrxEHawOLnWw4upTwfYKb0gVQdatHejn3W9kPyXxmKv3HmjVfJ84kDLmdX8jR20OuDQwaJ4Um24qD9vA==
-  dependencies:
-    "@emotion/babel-plugin" "^11.7.1"
-    "@emotion/cache" "^11.7.1"
-    "@emotion/serialize" "^1.0.3"
-    "@emotion/sheet" "^1.0.3"
-    "@emotion/utils" "^1.0.0"
-
 "@emotion/eslint-plugin@^11.7.0":
   version "11.7.0"
   resolved "https://registry.yarnpkg.com/@emotion/eslint-plugin/-/eslint-plugin-11.7.0.tgz#253c8ace26f3921695a7aa85ecbf6fac75e74b33"
@@ -2425,7 +2404,7 @@
     "@emotion/utils" "^1.0.0"
     csstype "^3.0.2"
 
-"@emotion/serialize@^1.0.3", "@emotion/serialize@^1.0.4":
+"@emotion/serialize@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.4.tgz#ff31fd11bb07999611199c2229e152faadc21a3c"
   integrity sha512-1JHamSpH8PIfFwAMryO2bNka+y8+KA5yga5Ocf2d7ZEiJjb7xlLW7aknBGZqJLajuLOvJ+72vN+IBSwPlXD1Pg==
@@ -2441,7 +2420,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
   integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
 
-"@emotion/sheet@^1.0.3", "@emotion/sheet@^1.1.1":
+"@emotion/sheet@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.1.tgz#015756e2a9a3c7c5f11d8ec22966a8dbfbfac787"
   integrity sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA==
@@ -3993,13 +3972,6 @@
     "@swc/core-win32-ia32-msvc" "1.2.210"
     "@swc/core-win32-x64-msvc" "1.2.210"
 
-"@swc/helpers@^0.4.3":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.3.tgz#16593dfc248c53b699d4b5026040f88ddb497012"
-  integrity sha512-6JrF+fdUK2zbGpJIlN7G3v966PQjyx/dPt1T9km2wj+EUBqgrxCk3uX4Kct16MIm9gGxfKRcfax2hVf5jvlTzA==
-  dependencies:
-    tslib "^2.4.0"
-
 "@swc/jest@^0.2.21":
   version "0.2.21"
   resolved "https://registry.yarnpkg.com/@swc/jest/-/jest-0.2.21.tgz#e8c4e234016a914f4cfbb7d75844860a250c1d1c"
@@ -6504,14 +6476,7 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001259:
-  version "1.0.30001260"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001260.tgz#e3be3f34ddad735ca4a2736fa9e768ef34316270"
-  integrity sha512-Fhjc/k8725ItmrvW5QomzxLeojewxvqiYCKeFcfFEhut28IVLdpHU19dneOmltZQIE5HNbawj1HYD+1f2bM1Dg==
-  dependencies:
-    nanocolors "^0.1.0"
-
-caniuse-lite@^1.0.30001359:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001259, caniuse-lite@^1.0.30001359:
   version "1.0.30001363"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001363.tgz#26bec2d606924ba318235944e1193304ea7c4f15"
   integrity sha512-HpQhpzTGGPVMnCjIomjt+jvyUu8vNFo3TaDiZ/RcoTrlOq/5+tC8zHdsbgFB6MxmaY+jCpsH09aD80Bb4Ow3Sg==
@@ -10393,14 +10358,6 @@ gatsby-plugin-emotion@^4.1.2:
     "@babel/runtime" "^7.12.5"
     "@emotion/babel-preset-css-prop" "^10.0.27"
 
-gatsby-plugin-emotion@^7.18.0:
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-emotion/-/gatsby-plugin-emotion-7.18.0.tgz#c1a5db43c210c13d8f5510c6ec99944ffe421211"
-  integrity sha512-zmUuON4oWA5hdFtes6Hf997KeSW2rgBIhxCbU7ZS+ydkUBTa49HDBjtLq2PDAVEhzJO2ntXR5dDOSfY7yxYaBQ==
-  dependencies:
-    "@babel/runtime" "^7.15.4"
-    "@emotion/babel-preset-css-prop" "^11.2.0"
-
 gatsby-plugin-eslint@^2.0.5:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-eslint/-/gatsby-plugin-eslint-2.0.8.tgz#1ff7f546a427d274dc2de3932ba29822aae330c3"
@@ -15166,7 +15123,7 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
   integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
 
-nanocolors@^0.1.0, nanocolors@^0.1.5:
+nanocolors@^0.1.5:
   version "0.1.12"
   resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.1.12.tgz#8577482c58cbd7b5bb1681db4cf48f11a87fd5f6"
   integrity sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==
@@ -20375,7 +20332,7 @@ tslib@^2, tslib@^2.0.3, tslib@~2.3.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
-tslib@^2.1.0, tslib@^2.4.0:
+tslib@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==