chore: prettier

2025-04-24 19:39:11 +00:00 · 2020-10-10 04:33:54 -04:00 · 2020-10-10 04:33:54 -04:00 · 70fa51d4a1
commit 70fa51d4a1
parent ccf89d8480
67 changed files with 1811 additions and 1838 deletions
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@ -1,20 +1,20 @@
 {
-  "name": "Roleypoly (Bazel, Go, Node)",
-  // Docker Hub because easier to go fast
-  "image": "roleypoly/dev-container:main",
-  "settings": {
-    "terminal.integrated.shell.linux": "/bin/bash"
-  },
-  "extensions": [
-    "bazelbuild.vscode-bazel",
-    "dbaeumer.vscode-eslint",
-    "golang.go",
-    "hashicorp.terraform",
-    "firsttris.vscode-jest-runner",
-    "esbenp.prettier-vscode",
-    "zxh404.vscode-proto3",
-    "jpoissonnier.vscode-styled-components",
-    "eg2.vscode-npm-script",
-    "christian-kohler.npm-intellisense"
-  ]
-}
+    "name": "Roleypoly (Bazel, Go, Node)",
+    // Docker Hub because easier to go fast
+    "image": "roleypoly/dev-container:main",
+    "settings": {
+        "terminal.integrated.shell.linux": "/bin/bash"
+    },
+    "extensions": [
+        "bazelbuild.vscode-bazel",
+        "dbaeumer.vscode-eslint",
+        "golang.go",
+        "hashicorp.terraform",
+        "firsttris.vscode-jest-runner",
+        "esbenp.prettier-vscode",
+        "zxh404.vscode-proto3",
+        "jpoissonnier.vscode-styled-components",
+        "eg2.vscode-npm-script",
+        "christian-kohler.npm-intellisense"
+    ]
+}
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -1,24 +1,24 @@
 version: 2
 updates:
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "daily"
+    - package-ecosystem: 'npm'
+      directory: '/'
+      schedule:
+          interval: 'daily'

-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-      interval: "daily"
+    - package-ecosystem: 'github-actions'
+      directory: '/'
+      schedule:
+          interval: 'daily'

-  - package-ecosystem: "docker"
-    directory: "/.devcontainer"
-    schedule:
-      interval: "daily"
+    - package-ecosystem: 'docker'
+      directory: '/.devcontainer'
+      schedule:
+          interval: 'daily'

-  - package-ecosystem: "gomod"
-    directory: "/"
-    schedule:
-      interval: "daily"
+    - package-ecosystem: 'gomod'
+      directory: '/'
+      schedule:
+          interval: 'daily'
 # - package-ecosystem: "terraform"
 #   directory: "/terraform/platform/bootstrap"
 #   schedule:
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -3,57 +3,57 @@ name: Bazel Build
 on: push

 jobs:
-  bazel_build:
-    name: Bazel Build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@master
+    bazel_build:
+        name: Bazel Build
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@master

-      - name: Mount bazel cache
-        uses: actions/cache@v2.1.1
-        with:
-          path: "/home/runner/.cache/bazel"
-          key: bazel
+            - name: Mount bazel cache
+              uses: actions/cache@v2.1.1
+              with:
+                  path: '/home/runner/.cache/bazel'
+                  key: bazel

-      - name: Install bazelisk
-        run: |
-          curl -LO "https://github.com/bazelbuild/bazelisk/releases/download/v1.1.0/bazelisk-linux-amd64"
-          mkdir -p "${GITHUB_WORKSPACE}/bin/"
-          mv bazelisk-linux-amd64 "${GITHUB_WORKSPACE}/bin/bazel"
-          chmod +x "${GITHUB_WORKSPACE}/bin/bazel"
+            - name: Install bazelisk
+              run: |
+                  curl -LO "https://github.com/bazelbuild/bazelisk/releases/download/v1.1.0/bazelisk-linux-amd64"
+                  mkdir -p "${GITHUB_WORKSPACE}/bin/"
+                  mv bazelisk-linux-amd64 "${GITHUB_WORKSPACE}/bin/bazel"
+                  chmod +x "${GITHUB_WORKSPACE}/bin/bazel"

-      - name: Test
-        run: |
-          "${GITHUB_WORKSPACE}/bin/bazel" test \
-            --stamp \
-            --workspace_status_command hack/workspace_status.sh \
-              //src/...
+            - name: Test
+              run: |
+                  "${GITHUB_WORKSPACE}/bin/bazel" test \
+                    --stamp \
+                    --workspace_status_command hack/workspace_status.sh \
+                      //src/...

-      - name: Docker Login
-        run: |
-          echo ${{github.token}} | docker login -u ${{github.actor}} --password-stdin docker.pkg.github.com
+            - name: Docker Login
+              run: |
+                  echo ${{github.token}} | docker login -u ${{github.actor}} --password-stdin docker.pkg.github.com

-      - name: Publish Artifacts
-        run: |
-          "${GITHUB_WORKSPACE}/bin/bazel" query //src/... |\
-          grep +publish |\
-          xargs -l1 "${GITHUB_WORKSPACE}/bin/bazel" run \
-            --stamp \
-            --workspace_status_command hack/workspace_status.sh
+            - name: Publish Artifacts
+              run: |
+                  "${GITHUB_WORKSPACE}/bin/bazel" query //src/... |\
+                  grep +publish |\
+                  xargs -l1 "${GITHUB_WORKSPACE}/bin/bazel" run \
+                    --stamp \
+                    --workspace_status_command hack/workspace_status.sh

-      - name: Write Artifact Manifest
-        run: |
-          artifacts=$(${GITHUB_WORKSPACE}/bin/bazel query //src/... | grep +publish)
-          publishedServices=${artifacts//$'//src/'/}
-          publishedServices=${publishedServices//$':+publish'/}
-          manifestJSON='{"services": {}}'
-          for svc in $publishedServices; do 
-            manifestJSON=$(echo $manifestJSON | jq ".services+={\"$svc\":\"$(cat bazel-bin/src/$svc/+publish.digest)\"}")
-          done
-          echo $manifestJSON > manifest.json
+            - name: Write Artifact Manifest
+              run: |
+                  artifacts=$(${GITHUB_WORKSPACE}/bin/bazel query //src/... | grep +publish)
+                  publishedServices=${artifacts//$'//src/'/}
+                  publishedServices=${publishedServices//$':+publish'/}
+                  manifestJSON='{"services": {}}'
+                  for svc in $publishedServices; do 
+                    manifestJSON=$(echo $manifestJSON | jq ".services+={\"$svc\":\"$(cat bazel-bin/src/$svc/+publish.digest)\"}")
+                  done
+                  echo $manifestJSON > manifest.json

-      - name: Upload Artifact Manifest
-        uses: actions/upload-artifact@v2
-        with:
-          name: manifest.json
-          path: manifest.json
+            - name: Upload Artifact Manifest
+              uses: actions/upload-artifact@v2
+              with:
+                  name: manifest.json
+                  path: manifest.json
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@ -1,67 +1,67 @@
-name: "CodeQL"
+name: 'CodeQL'

 on:
-  push:
-    branches: [main]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [main]
-  schedule:
-    - cron: "0 1 * * 2"
+    push:
+        branches: [main]
+    pull_request:
+        # The branches below must be a subset of the branches above
+        branches: [main]
+    schedule:
+        - cron: '0 1 * * 2'

 jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
+    analyze:
+        name: Analyze
+        runs-on: ubuntu-latest

-    strategy:
-      fail-fast: false
-      matrix:
-        # Override automatic language detection by changing the below list
-        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
-        language: ["go", "javascript"]
-        # Learn more...
-        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
+        strategy:
+            fail-fast: false
+            matrix:
+                # Override automatic language detection by changing the below list
+                # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
+                language: ['go', 'javascript']
+                # Learn more...
+                # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection

-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          # We must fetch at least the immediate parents so that if this is
-          # a pull request then we can checkout the head.
-          fetch-depth: 2
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v2
+              with:
+                  # We must fetch at least the immediate parents so that if this is
+                  # a pull request then we can checkout the head.
+                  fetch-depth: 2

-      # If this run was triggered by a pull request event, then checkout
-      # the head of the pull request instead of the merge commit.
-      - run: git checkout HEAD^2
-        if: ${{ github.event_name == 'pull_request' }}
+            # If this run was triggered by a pull request event, then checkout
+            # the head of the pull request instead of the merge commit.
+            - run: git checkout HEAD^2
+              if: ${{ github.event_name == 'pull_request' }}

-      # Initializes the CodeQL tools for scanning.
-      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v1
-        with:
-          queries: +security-and-quality
-          languages: ${{ matrix.language }}
-          # If you wish to specify custom queries, you can do so here or in a config file.
-          # By default, queries listed here will override any specified in a config file.
-          # Prefix the list here with "+" to use these queries and those in the config file.
-          # queries: ./path/to/local/query, your-org/your-repo/queries@main
+            # Initializes the CodeQL tools for scanning.
+            - name: Initialize CodeQL
+              uses: github/codeql-action/init@v1
+              with:
+                  queries: +security-and-quality
+                  languages: ${{ matrix.language }}
+                  # If you wish to specify custom queries, you can do so here or in a config file.
+                  # By default, queries listed here will override any specified in a config file.
+                  # Prefix the list here with "+" to use these queries and those in the config file.
+                  # queries: ./path/to/local/query, your-org/your-repo/queries@main

-      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-      # If this step fails, then you should remove it and run the build manually (see below)
-      - name: Autobuild
-        uses: github/codeql-action/autobuild@v1
+            # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+            # If this step fails, then you should remove it and run the build manually (see below)
+            - name: Autobuild
+              uses: github/codeql-action/autobuild@v1

-      # ℹ️ Command-line programs to run using the OS shell.
-      # 📚 https://git.io/JvXDl
+            # ℹ️ Command-line programs to run using the OS shell.
+            # 📚 https://git.io/JvXDl

-      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-      #    and modify them (or add more) to build your code if your project
-      #    uses a compiled language
+            # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+            #    and modify them (or add more) to build your code if your project
+            #    uses a compiled language

-      #- run: |
-      #   make bootstrap
-      #   make release
+            #- run: |
+            #   make bootstrap
+            #   make release

-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v1
+            - name: Perform CodeQL Analysis
+              uses: github/codeql-action/analyze@v1
--- a/.github/workflows/dev-container.yml
+++ b/.github/workflows/dev-container.yml
@ -1,43 +1,43 @@
 name: Build Dev Container

 on:
-  push:
-    paths:
-      - .devcontainer/*
-      - src/dev-container/*
-      - .github/workflows/dev-container.yml
-  schedule:
-    - cron: "0 12 * * 2" # 12 noon every tuesday
+    push:
+        paths:
+            - .devcontainer/*
+            - src/dev-container/*
+            - .github/workflows/dev-container.yml
+    schedule:
+        - cron: '0 12 * * 2' # 12 noon every tuesday

 jobs:
-  dev_container_build:
-    name: Bazel Build (Dev Container)
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@master
-      - name: Mount bazel cache
-        uses: actions/cache@v2.1.1
-        with:
-          path: "/home/runner/.cache/bazel"
-          key: bazel_dev_container
+    dev_container_build:
+        name: Bazel Build (Dev Container)
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@master
+            - name: Mount bazel cache
+              uses: actions/cache@v2.1.1
+              with:
+                  path: '/home/runner/.cache/bazel'
+                  key: bazel_dev_container

-      - name: Install bazelisk
-        run: |
-          curl -LO "https://github.com/bazelbuild/bazelisk/releases/download/v1.1.0/bazelisk-linux-amd64"
-          mkdir -p "${GITHUB_WORKSPACE}/bin/"
-          mv bazelisk-linux-amd64 "${GITHUB_WORKSPACE}/bin/bazel"
-          chmod +x "${GITHUB_WORKSPACE}/bin/bazel"
+            - name: Install bazelisk
+              run: |
+                  curl -LO "https://github.com/bazelbuild/bazelisk/releases/download/v1.1.0/bazelisk-linux-amd64"
+                  mkdir -p "${GITHUB_WORKSPACE}/bin/"
+                  mv bazelisk-linux-amd64 "${GITHUB_WORKSPACE}/bin/bazel"
+                  chmod +x "${GITHUB_WORKSPACE}/bin/bazel"

-      - name: Build & Publish Dev Container
-        run: |
-          echo ${{github.token}} | docker login -u ${{github.actor}} --password-stdin docker.pkg.github.com
-          "${GITHUB_WORKSPACE}/bin/bazel" run \
-            --stamp \
-            --workspace_status_command hack/workspace_status.sh \
-              //src/dev-container:publish-dev-container
+            - name: Build & Publish Dev Container
+              run: |
+                  echo ${{github.token}} | docker login -u ${{github.actor}} --password-stdin docker.pkg.github.com
+                  "${GITHUB_WORKSPACE}/bin/bazel" run \
+                    --stamp \
+                    --workspace_status_command hack/workspace_status.sh \
+                      //src/dev-container:publish-dev-container

-          echo ${{secrets.DOCKER_PASSWORD}} | docker login -u ${{secrets.DOCKER_USERNAME}} --password-stdin
-          "${GITHUB_WORKSPACE}/bin/bazel" run \
-            --stamp \
-            --workspace_status_command hack/workspace_status.sh \
-              //src/dev-container:publish-dev-container-dockerhub
+                  echo ${{secrets.DOCKER_PASSWORD}} | docker login -u ${{secrets.DOCKER_USERNAME}} --password-stdin
+                  "${GITHUB_WORKSPACE}/bin/bazel" run \
+                    --stamp \
+                    --workspace_status_command hack/workspace_status.sh \
+                      //src/dev-container:publish-dev-container-dockerhub
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -3,22 +3,22 @@ name: Release Workflow
 on: workflow_dispatch

 jobs:
-  commit_release_tag:
-    name: Commit Roleypoly Release Tag
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@master
-        with:
-          ssh-key: ${{ secrets.DEPLOY_KEY }}
+    commit_release_tag:
+        name: Commit Roleypoly Release Tag
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@master
+              with:
+                  ssh-key: ${{ secrets.DEPLOY_KEY }}

-      - name: Push changes
-        id: push
-        run: |
-          TAG=$(date +v%Y%m%d-%H%M%S)
-          git config --local user.email "gh-automation@roleypoly.com"
-          git config --local user.name "Roleypoly Release Automation"
-          git tag $TAG
-          git push origin $TAG
-          echo "::set-output release_tag=${TAG}"
+            - name: Push changes
+              id: push
+              run: |
+                  TAG=$(date +v%Y%m%d-%H%M%S)
+                  git config --local user.email "gh-automation@roleypoly.com"
+                  git config --local user.name "Roleypoly Release Automation"
+                  git tag $TAG
+                  git push origin $TAG
+                  echo "::set-output release_tag=${TAG}"

-      - name: Retag images
+            - name: Retag images
--- a/.github/workflows/terraform.yml
+++ b/.github/workflows/terraform.yml
@ -1,2 +1 @@
 name: Terraform
-
--- a/.gitignore
+++ b/.gitignore
@ -5,16 +5,6 @@ bazel-testlogs
 node_modules
 .env
 docker-compose.yaml
-
-#Added by cargo
-
 /target
-
-
-#Added by cargo
-#
-#already existing elements were commented out
-
-#/target
-
-*.log
+*.log
+storybook-static
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1 @@
+bazel-*
--- a/.prettierrc
+++ b/.prettierrc
--- a/.prettierrc.js
+++ b/.prettierrc.js
@ -0,0 +1,9 @@
+module.exports = {
+    printWidth: 90,
+    useTabs: false,
+    tabWidth: 4,
+    singleQuote: true,
+    trailingComma: 'es5',
+    bracketSpacing: true,
+    semi: true,
+};
--- a/.storybook/main.js
+++ b/.storybook/main.js
@ -1,16 +1,16 @@
-const path = require("path");
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
+const path = require('path');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

 module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
-  webpackFinal: async (config, { configType }) => {
-    config.resolve.plugins = [
-      new TsconfigPathsPlugin({
-        configFile: path.resolve(__dirname, "../tsconfig.json"),
-      }),
-    ];
+    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+    webpackFinal: async (config, { configType }) => {
+        config.resolve.plugins = [
+            new TsconfigPathsPlugin({
+                configFile: path.resolve(__dirname, '../tsconfig.json'),
+            }),
+        ];

-    return config;
-  },
+        return config;
+    },
 };
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@ -1,6 +1,6 @@
-import { addons } from "@storybook/addons";
-import { roleypolyTheme } from "./theme";
+import { addons } from '@storybook/addons';
+import { roleypolyTheme } from './theme';

 addons.setConfig({
-  theme: roleypolyTheme,
+    theme: roleypolyTheme,
 });
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@ -1,4 +1,3 @@
-
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-}
+    actions: { argTypesRegex: '^on[A-Z].*' },
+};
--- a/.storybook/theme.js
+++ b/.storybook/theme.js
@ -1,34 +1,34 @@
-import { create } from "@storybook/theming";
-import { palette } from "../src/design-system/atoms/colors";
+import { create } from '@storybook/theming';
+import { palette } from '../src/design-system/atoms/colors';

 export const roleypolyTheme = create({
-  base: "dark",
+    base: 'dark',

-  colorPrimary: palette.green400,
-  colorSecondary: palette.taupe200,
+    colorPrimary: palette.green400,
+    colorSecondary: palette.taupe200,

-  // UI
-  appBg: palette.taupe300,
-  appContentBg: palette.taupe300,
-  appBorderColor: palette.taupe100,
-  appBorderRadius: 0,
+    // UI
+    appBg: palette.taupe300,
+    appContentBg: palette.taupe300,
+    appBorderColor: palette.taupe100,
+    appBorderRadius: 0,

-  // Typography
-  fontBase: "system-ui, sans-serif",
-  fontCode: "monospace",
+    // Typography
+    fontBase: 'system-ui, sans-serif',
+    fontCode: 'monospace',

-  // Text colors
-  textColor: palette.grey600,
-  textInverseColor: palette.grey100,
+    // Text colors
+    textColor: palette.grey600,
+    textInverseColor: palette.grey100,

-  // Toolbar default and active colors
-  barTextColor: palette.taupe500,
-  barSelectedColor: palette.taupe600,
-  barBg: palette.taupe100,
+    // Toolbar default and active colors
+    barTextColor: palette.taupe500,
+    barSelectedColor: palette.taupe600,
+    barBg: palette.taupe100,

-  // Form colors
-  inputBg: "rgba(0,0,0,0.24)",
-  inputBorder: palette.taupe100,
-  inputTextColor: palette.grey600,
-  inputBorderRadius: 0,
+    // Form colors
+    inputBg: 'rgba(0,0,0,0.24)',
+    inputBorder: palette.taupe100,
+    inputTextColor: palette.grey600,
+    inputBorderRadius: 0,
 });
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,10 +1,10 @@
-{
-  "go.inferGopath": false,
-  "editor.tabSize": 2,
-  "editor.insertSpaces": true,
-  "editor.formatOnSave": true,
-  "bazel.buildifierFixOnFormat": true,
-  "[starlark]": {
-    "editor.tabSize": 4
-  }
-}
+{
+    "go.inferGopath": false,
+    "editor.tabSize": 2,
+    "editor.insertSpaces": true,
+    "editor.formatOnSave": true,
+    "bazel.buildifierFixOnFormat": true,
+    "[starlark]": {
+        "editor.tabSize": 4
+    }
+}
--- a/README.md
+++ b/README.md
@ -1,29 +1,29 @@
-# Roleypoly
-
-https://roleypoly.com
-
-Tame your Discord roles.
-
-### Need Help with Roleypoly?
-
-📚 [Please read through our community documentation.](https://github.com/roleypoly/community-docs)
-😕 [Still confused? Talk to us on Discord!](https://discord.gg/PWQUVsd)
-
-## Developing
-
-Roleypoly is a distributed system built with Go, React, Terraform, and Bazel.
-
-This repo is currently being re-architected into a monorepo, so most processes might not be documented.
-
-### Quickstart
-
-This repo can be quickly setup with [VSCode Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) or [GitHub Codespaces](https://github.com/codespaces). This will setup a fully featured Docker container for developing VSCode, including extensions.
-
-If you'd like to not use either of those, it can be imported into your Docker host with `bazel run //src/dev-container`, or pulled from either `roleypoly/dev-container:main` or `docker.pkg.github.com/roleypoly/roleypoly/dev-container:main`. This use case is not actively investigated, but with tinkering, will work. Feel free to document this process and open a PR :)
-
-### Things to Know
-
-Bazel can make some tasks far harder normal. Ideally, these are automated over.
-
- **Updating `go.mod`?**
-  - Run `hack/gazelle.sh` to regenerate `deps.bzl`.
+# Roleypoly
+
+https://roleypoly.com
+
+Tame your Discord roles.
+
+### Need Help with Roleypoly?
+
+📚 [Please read through our community documentation.](https://github.com/roleypoly/community-docs)
+😕 [Still confused? Talk to us on Discord!](https://discord.gg/PWQUVsd)
+
+## Developing
+
+Roleypoly is a distributed system built with Go, React, Terraform, and Bazel.
+
+This repo is currently being re-architected into a monorepo, so most processes might not be documented.
+
+### Quickstart
+
+This repo can be quickly setup with [VSCode Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) or [GitHub Codespaces](https://github.com/codespaces). This will setup a fully featured Docker container for developing VSCode, including extensions.
+
+If you'd like to not use either of those, it can be imported into your Docker host with `bazel run //src/dev-container`, or pulled from either `roleypoly/dev-container:main` or `docker.pkg.github.com/roleypoly/roleypoly/dev-container:main`. This use case is not actively investigated, but with tinkering, will work. Feel free to document this process and open a PR :)
+
+### Things to Know
+
+Bazel can make some tasks far harder normal. Ideally, these are automated over.
+
+-   **Updating `go.mod`?**
+    -   Run `hack/gazelle.sh` to regenerate `deps.bzl`.
--- a/package.json
+++ b/package.json
@ -1,52 +1,53 @@
 {
-  "name": "roleypoly",
-  "version": "1.0.0",
-  "description": "https://roleypoly.com",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "now-build": "build-storybook"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/roleypoly/roleypoly.git"
-  },
-  "author": "Katalina Okano <git@kat.cafe>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/roleypoly/roleypoly/issues"
-  },
-  "homepage": "https://github.com/roleypoly/roleypoly#readme",
-  "dependencies": {
-    "@roleypoly/rpc": "^1.9.3",
-    "chroma-js": "2.1.0",
-    "next": "^9.5.4",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-icons": "^3.11.0",
-    "styled-components": "^5.2.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@bazel/typescript": "^2.2.1",
-    "@storybook/addon-actions": "^6.0.26",
-    "@storybook/addon-essentials": "^6.0.26",
-    "@storybook/addon-links": "^6.0.26",
-    "@storybook/addons": "^6.0.26",
-    "@storybook/react": "^6.0.26",
-    "@storybook/theming": "^6.0.26",
-    "@types/chroma-js": "2.1.0",
-    "@types/google-protobuf": "3.7.3",
-    "@types/styled-components": "5.1.3",
-    "babel-loader": "^8.1.0",
-    "prettier": "^2.1.2",
-    "react-is": "^16.13.1",
-    "tsconfig-paths-webpack-plugin": "^3.3.0",
-    "tslint": "6.1.3",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-config-standard": "^9.0.0",
-    "tslint-plugin-prettier": "^2.3.0",
-    "typescript": "^4.0.3"
-  }
+    "name": "roleypoly",
+    "version": "1.0.0",
+    "description": "https://roleypoly.com",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "storybook": "start-storybook -p 6006",
+        "build-storybook": "build-storybook",
+        "now-build": "build-storybook",
+        "lint:prettier": "cross-env prettier -c '**/*.{ts,tsx,css,yml,yaml,md,json,js,jsx}'"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/roleypoly/roleypoly.git"
+    },
+    "author": "Katalina Okano <git@kat.cafe>",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/roleypoly/roleypoly/issues"
+    },
+    "homepage": "https://github.com/roleypoly/roleypoly#readme",
+    "dependencies": {
+        "@roleypoly/rpc": "^1.9.3",
+        "chroma-js": "2.1.0",
+        "next": "^9.5.5",
+        "react": "16.13.1",
+        "react-dom": "16.13.1",
+        "react-icons": "^3.11.0",
+        "styled-components": "^5.2.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.11.6",
+        "@bazel/typescript": "^2.2.1",
+        "@storybook/addon-actions": "^6.0.26",
+        "@storybook/addon-essentials": "^6.0.26",
+        "@storybook/addon-links": "^6.0.26",
+        "@storybook/addons": "^6.0.26",
+        "@storybook/react": "^6.0.26",
+        "@storybook/theming": "^6.0.26",
+        "@types/chroma-js": "2.1.0",
+        "@types/google-protobuf": "3.7.3",
+        "@types/styled-components": "5.1.4",
+        "babel-loader": "^8.1.0",
+        "prettier": "^2.1.2",
+        "react-is": "^16.13.1",
+        "tsconfig-paths-webpack-plugin": "^3.3.0",
+        "tslint": "6.1.3",
+        "tslint-config-prettier": "^1.18.0",
+        "tslint-config-standard": "^9.0.0",
+        "tslint-plugin-prettier": "^2.3.0",
+        "typescript": "^4.0.3"
+    }
 }
--- a/src/db/README.md
+++ b/src/db/README.md
@ -1,17 +1,17 @@
 # DB

-Roleypoly's DB schemas, connectors, and other useful database admin tools. 
+Roleypoly's DB schemas, connectors, and other useful database admin tools.

 ## Tools

 ### ent

-ent schema and the files it generates. 
+ent schema and the files it generates.

 Edit nothing outside of the `schemas` folder, as all others are generated.

 When done editing, do `go generate ./ent` to update generation.

-*Failing to generate files will make CI fail.*
+_Failing to generate files will make CI fail._

-All schemas must be backwards compatible with previous versions of this library, and be compatible with **CockroachDB**-based Postgres.
+All schemas must be backwards compatible with previous versions of this library, and be compatible with **CockroachDB**-based Postgres.
--- a/src/design-system/atoms/avatar/Avatar.stories.tsx
+++ b/src/design-system/atoms/avatar/Avatar.stories.tsx
@ -1,30 +1,30 @@
-import { text } from "@storybook/addon-knobs";
-import * as React from "react";
-import { Avatar } from "./Avatar";
+import { text } from '@storybook/addon-knobs';
+import * as React from 'react';
+import { Avatar } from './Avatar';

 export default {
-  title: "Atoms/Avatar",
-  component: Avatar,
-  argTypes: {
-    initials: { control: "text" },
-  },
-  args: {
-    initials: "KR",
-  },
+    title: 'Atoms/Avatar',
+    component: Avatar,
+    argTypes: {
+        initials: { control: 'text' },
+    },
+    args: {
+        initials: 'KR',
+    },
 };

 export const WithInitials = ({ initials, ...rest }) => (
-  <Avatar src="https://i.imgur.com/epMSRQH.png" size={48} {...rest}>
-    {initials}
-  </Avatar>
+    <Avatar src="https://i.imgur.com/epMSRQH.png" size={48} {...rest}>
+        {initials}
+    </Avatar>
 );

 export const WithText = ({ initials, ...rest }) => (
-  <Avatar size={48} {...rest}>
-    {initials}
-  </Avatar>
+    <Avatar size={48} {...rest}>
+        {initials}
+    </Avatar>
 );
 export const Empty = (args) => <Avatar size={48} {...args}></Avatar>;
 export const DeliberatelyEmpty = (args) => (
-  <Avatar size={48} deliberatelyEmpty={true} {...args}></Avatar>
+    <Avatar size={48} deliberatelyEmpty={true} {...args}></Avatar>
 );
--- a/src/design-system/atoms/avatar/Avatar.styled.ts
+++ b/src/design-system/atoms/avatar/Avatar.styled.ts
@ -1,46 +1,45 @@
-import { AvatarProps } from "./Avatar";
-import styled, { css } from "styled-components";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
-import { palette } from "roleypoly/src/design-system/atoms/colors";
+import { AvatarProps } from './Avatar';
+import styled, { css } from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import { palette } from 'roleypoly/src/design-system/atoms/colors';

-type ContainerProps = Pick<AvatarProps, "size"> &
-  Pick<AvatarProps, "deliberatelyEmpty">;
+type ContainerProps = Pick<AvatarProps, 'size'> & Pick<AvatarProps, 'deliberatelyEmpty'>;
 export const Container = styled.div<ContainerProps>`
-  border-radius: 100%;
-  box-sizing: border-box;
-  width: ${(props: ContainerProps) => props.size || 48}px;
-  height: ${(props: ContainerProps) => props.size || 48}px;
-  min-width: ${(props: ContainerProps) => props.size || 48}px;
-  min-height: ${(props: ContainerProps) => props.size || 48}px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: ${palette.grey100};
-  position: relative;
-  background-color: ${palette.grey500};
-  font-weight: bold;
-  text-align: center;
-  line-height: 1;
-  overflow: hidden;
-  font-size: ${(props: ContainerProps) => props.size};
-  ${(props) =>
-    props.deliberatelyEmpty &&
-    css`
-      border: 4px solid rgba(0, 0, 0, 0.25);
-      background-color: ${palette.taupe400};
-      color: ${palette.taupe600};
-    `}
+    border-radius: 100%;
+    box-sizing: border-box;
+    width: ${(props: ContainerProps) => props.size || 48}px;
+    height: ${(props: ContainerProps) => props.size || 48}px;
+    min-width: ${(props: ContainerProps) => props.size || 48}px;
+    min-height: ${(props: ContainerProps) => props.size || 48}px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: ${palette.grey100};
+    position: relative;
+    background-color: ${palette.grey500};
+    font-weight: bold;
+    text-align: center;
+    line-height: 1;
+    overflow: hidden;
+    font-size: ${(props: ContainerProps) => props.size};
+    ${(props) =>
+        props.deliberatelyEmpty &&
+        css`
+            border: 4px solid rgba(0, 0, 0, 0.25);
+            background-color: ${palette.taupe400};
+            color: ${palette.taupe600};
+        `}
 `;

-type ImageProps = Pick<AvatarProps, "src">;
+type ImageProps = Pick<AvatarProps, 'src'>;
 export const Image = styled.div<ImageProps>`
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
-  border-radius: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+    border-radius: 100%;
 `;
--- a/src/design-system/atoms/branding/Branding.stories.tsx
+++ b/src/design-system/atoms/branding/Branding.stories.tsx
@ -1,27 +1,24 @@
-import * as React from "react";
-import {
-  Logomark as BrandingLogomark,
-  Logotype as BrandingLogotype,
-} from "./Branding";
-import styled from "styled-components";
+import * as React from 'react';
+import { Logomark as BrandingLogomark, Logotype as BrandingLogotype } from './Branding';
+import styled from 'styled-components';

 export default {
-  title: "Atoms/Branding",
+    title: 'Atoms/Branding',
 };

 const Wrapper = styled.div`
-  background-color: black;
-  padding: 2em;
+    background-color: black;
+    padding: 2em;
 `;

 export const Logomark = () => (
-  <Wrapper>
-    <BrandingLogomark />
-  </Wrapper>
+    <Wrapper>
+        <BrandingLogomark />
+    </Wrapper>
 );

 export const Logotype = () => (
-  <Wrapper>
-    <BrandingLogotype />
-  </Wrapper>
+    <Wrapper>
+        <BrandingLogotype />
+    </Wrapper>
 );
--- a/src/design-system/atoms/branding/Branding.tsx
+++ b/src/design-system/atoms/branding/Branding.tsx
--- a/src/design-system/atoms/breakpoints/Breakpoints.stories.tsx
+++ b/src/design-system/atoms/breakpoints/Breakpoints.stories.tsx
@ -1,11 +1,11 @@
-import * as React from "react";
-import { BreakpointDebugTool } from "./DebugTool";
-import { BreakpointsProvider } from "./BreakpointProvider";
+import * as React from 'react';
+import { BreakpointDebugTool } from './DebugTool';
+import { BreakpointsProvider } from './BreakpointProvider';

 export default {
-  title: "Atoms/Breakpoints",
-  decorators: [(story) => <BreakpointsProvider>{story()}</BreakpointsProvider>],
-  component: BreakpointDebugTool,
+    title: 'Atoms/Breakpoints',
+    decorators: [(story) => <BreakpointsProvider>{story()}</BreakpointsProvider>],
+    component: BreakpointDebugTool,
 };

 export const DebugTool = () => <BreakpointDebugTool />;
--- a/src/design-system/atoms/breakpoints/Context.ts
+++ b/src/design-system/atoms/breakpoints/Context.ts
@ -1,22 +1,22 @@
-import * as React from "react";
-import { withContext } from "roleypoly/src/common/utils/withContext";
+import * as React from 'react';
+import { withContext } from 'roleypoly/src/common/utils/withContext';

 export type ScreenSize = {
-  onSmallScreen: boolean;
-  onTablet: boolean;
-  onDesktop: boolean;
+    onSmallScreen: boolean;
+    onTablet: boolean;
+    onDesktop: boolean;
 };

 export type BreakpointProps = {
-  screenSize: ScreenSize;
+    screenSize: ScreenSize;
 };

 const defaultScreenSize: BreakpointProps = {
-  screenSize: {
-    onSmallScreen: true,
-    onDesktop: false,
-    onTablet: false,
-  },
+    screenSize: {
+        onSmallScreen: true,
+        onDesktop: false,
+        onTablet: false,
+    },
 };

 export const BreakpointContext = React.createContext(defaultScreenSize);
@ -24,4 +24,4 @@ export const BreakpointContext = React.createContext(defaultScreenSize);
 export const useBreakpointContext = () => React.useContext(BreakpointContext);

 export const withBreakpoints = <T>(Component: React.ComponentType<T>) =>
-  withContext(BreakpointContext, Component as any);
+    withContext(BreakpointContext, Component as any);
--- a/src/design-system/atoms/button/Button.story.tsx
+++ b/src/design-system/atoms/button/Button.story.tsx
@ -1,83 +1,83 @@
 // TODO: port to new story

-import * as React from "react";
-import { atomStories } from "atoms/atoms.story";
-import { Button, ButtonProps } from "./Button";
-import { text as textKnob } from "@storybook/addon-knobs";
-import { FaDiscord } from "react-icons/fa";
-import { styled } from "@storybook/theming";
+import * as React from 'react';
+import { atomStories } from 'atoms/atoms.story';
+import { Button, ButtonProps } from './Button';
+import { text as textKnob } from '@storybook/addon-knobs';
+import { FaDiscord } from 'react-icons/fa';
+import { styled } from '@storybook/theming';

-const largeStory = atomStories("Button/Large", module);
-const smallStory = atomStories("Button/Small", module);
+const largeStory = atomStories('Button/Large', module);
+const smallStory = atomStories('Button/Small', module);

-const colorModes: NonNullable<ButtonProps["color"]>[] = [
-  "primary",
-  "secondary",
-  "discord",
-  "muted",
+const colorModes: NonNullable<ButtonProps['color']>[] = [
+    'primary',
+    'secondary',
+    'discord',
+    'muted',
 ];

 const Margin = styled.div`
-  margin-top: 5px;
-  display: flex;
-  align-items: center;
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
 `;

-const storyTemplate = (props: Omit<ButtonProps, "children">) => () => {
-  const text = textKnob("Button content", "Example Button");
+const storyTemplate = (props: Omit<ButtonProps, 'children'>) => () => {
+    const text = textKnob('Button content', 'Example Button');

-  return (
-    <div>
-      {colorModes.map((color, i) => (
-        <Margin key={i}>
-          <Button {...props} color={color}>
-            {text}
-          </Button>
-          <div style={{ marginLeft: "1em" }}>
-            {color[0].toUpperCase()}
-            {color.slice(1)}
-          </div>
-        </Margin>
-      ))}
-    </div>
-  );
+    return (
+        <div>
+            {colorModes.map((color, i) => (
+                <Margin key={i}>
+                    <Button {...props} color={color}>
+                        {text}
+                    </Button>
+                    <div style={{ marginLeft: '1em' }}>
+                        {color[0].toUpperCase()}
+                        {color.slice(1)}
+                    </div>
+                </Margin>
+            ))}
+        </div>
+    );
 };
 const storyBuilder = (
-  story: typeof largeStory,
-  size: NonNullable<ButtonProps["size"]>
+    story: typeof largeStory,
+    size: NonNullable<ButtonProps['size']>
 ) => {
-  story.add(
-    "Normal",
-    storyTemplate({
-      size,
-    })
-  );
+    story.add(
+        'Normal',
+        storyTemplate({
+            size,
+        })
+    );

-  story.add(
-    "Icon",
-    storyTemplate({
-      size,
-      icon: (
-        <div style={{ position: "relative", top: 3 }}>
-          <FaDiscord />
-        </div>
-      ),
-    })
-  );
+    story.add(
+        'Icon',
+        storyTemplate({
+            size,
+            icon: (
+                <div style={{ position: 'relative', top: 3 }}>
+                    <FaDiscord />
+                </div>
+            ),
+        })
+    );

-  story.add(
-    "Loading",
-    storyTemplate({
-      size,
-      icon: (
-        <div style={{ position: "relative", top: 3 }}>
-          <FaDiscord />
-        </div>
-      ),
-      loading: true,
-    })
-  );
+    story.add(
+        'Loading',
+        storyTemplate({
+            size,
+            icon: (
+                <div style={{ position: 'relative', top: 3 }}>
+                    <FaDiscord />
+                </div>
+            ),
+            loading: true,
+        })
+    );
 };

-storyBuilder(largeStory, "large");
-storyBuilder(smallStory, "small");
+storyBuilder(largeStory, 'large');
+storyBuilder(smallStory, 'small');
--- a/src/design-system/atoms/button/Button.styled.ts
+++ b/src/design-system/atoms/button/Button.styled.ts
@ -1,106 +1,106 @@
-import styled, { css } from "styled-components";
-import { text400, text300 } from "roleypoly/src/design-system/atoms/typography";
-import { fontCSS } from "roleypoly/src/design-system/atoms/fonts";
-import { palette } from "roleypoly/src/design-system/atoms/colors";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import styled, { css } from 'styled-components';
+import { text400, text300 } from 'roleypoly/src/design-system/atoms/typography';
+import { fontCSS } from 'roleypoly/src/design-system/atoms/fonts';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 export const IconContainer = styled.div`
-  margin-right: 0.6rem;
-  font-size: 1.75em;
+    margin-right: 0.6rem;
+    font-size: 1.75em;
 `;

 const base = css`
-  ${fontCSS}
-  appearance: none;
-  display: block;
-  background-color: ${palette.taupe300};
-  color: ${palette.grey500};
-  border-radius: 3px;
-  border: 2px solid rgba(0, 0, 0, 0.55);
-  transition: all 0.15s ease-in-out;
-  outline: 0;
-  position: relative;
-  user-select: none;
-  cursor: pointer;
-  white-space: nowrap;
-
-  ::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: #000;
-    opacity: 0;
+    ${fontCSS}
+    appearance: none;
+    display: block;
+    background-color: ${palette.taupe300};
+    color: ${palette.grey500};
+    border-radius: 3px;
+    border: 2px solid rgba(0, 0, 0, 0.55);
    transition: all 0.15s ease-in-out;
-  }
+    outline: 0;
+    position: relative;
+    user-select: none;
+    cursor: pointer;
+    white-space: nowrap;

-  :hover {
-    transform: translateY(-1px);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-  }
-
-  :active {
-    transform: translateY(1px);
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
    ::after {
-      opacity: 0.1;
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: #000;
+        opacity: 0;
+        transition: all 0.15s ease-in-out;
+    }
+
+    :hover {
+        transform: translateY(-1px);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+    }
+
+    :active {
+        transform: translateY(1px);
+        box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
+        ::after {
+            opacity: 0.1;
+        }
    }
-  }
 `;

 const colors = {
-  primary: css`
-    background-color: ${palette.green400};
-    color: ${palette.taupe100};
-  `,
-  secondary: css``,
-  discord: css`
-    background-color: ${palette.discord400};
-    border: 2px solid ${palette.discord200};
-  `,
-  muted: css`
-    border: 2px solid rgba(0, 0, 0, 0.15);
-    background: none;
-    :hover {
-      background-color: ${palette.taupe200};
-    }
-  `,
+    primary: css`
+        background-color: ${palette.green400};
+        color: ${palette.taupe100};
+    `,
+    secondary: css``,
+    discord: css`
+        background-color: ${palette.discord400};
+        border: 2px solid ${palette.discord200};
+    `,
+    muted: css`
+        border: 2px solid rgba(0, 0, 0, 0.15);
+        background: none;
+        :hover {
+            background-color: ${palette.taupe200};
+        }
+    `,
 };

 const sizes = {
-  small: css`
-    ${text300}
-    padding: 4px 8px;
-  `,
-  large: css`
-    ${text400}
-    padding: 12px 32px;
-    width: 100%;
-  `,
+    small: css`
+        ${text300}
+        padding: 4px 8px;
+    `,
+    large: css`
+        ${text400}
+        padding: 12px 32px;
+        width: 100%;
+    `,
 };

 const modifiers = {
-  withIcon: css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `,
-  withLoading: css`
-    pointer-events: none;
-  `,
+    withIcon: css`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    `,
+    withLoading: css`
+        pointer-events: none;
+    `,
 };

 export type ButtonComposerOptions = {
-  size: keyof typeof sizes;
-  color: keyof typeof colors;
-  modifiers?: Array<keyof typeof modifiers>;
+    size: keyof typeof sizes;
+    color: keyof typeof colors;
+    modifiers?: Array<keyof typeof modifiers>;
 };

 export const Button = styled.button<ButtonComposerOptions>`
-  ${base}
-  ${(props) => props.size in sizes && sizes[props.size]}
+    ${base}
+    ${(props) => props.size in sizes && sizes[props.size]}
    ${(props) => props.color in colors && colors[props.color]}
    ${(props) => props.modifiers?.map((m) => modifiers[m])}
 `;
--- a/src/design-system/atoms/colors/colors.stories.tsx
+++ b/src/design-system/atoms/colors/colors.stories.tsx
@ -1,164 +1,162 @@
-import * as React from "react";
-import { palette } from "./colors";
-import styled from "styled-components";
-import chroma from "chroma-js";
-import { AmbientSmall } from "roleypoly/src/design-system/atoms/typography";
+import * as React from 'react';
+import { palette } from './colors';
+import styled from 'styled-components';
+import chroma from 'chroma-js';
+import { AmbientSmall } from 'roleypoly/src/design-system/atoms/typography';

 type RatioList = {
-  color1: string[];
-  color2: string[];
-  ratio: string;
+    color1: string[];
+    color2: string[];
+    ratio: string;
 };

 export default {
-  title: "Atoms/Colors",
+    title: 'Atoms/Colors',
 };

 const Swatch = styled.div`
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
-  width: 250px;
-  height: 100px;
-  margin: 10px;
-  display: inline-block;
-  background-color: #fff;
-  border: 1px solid #fff;
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    width: 250px;
+    height: 100px;
+    margin: 10px;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #fff;
 `;

 const SwatchColor = styled.div`
-  height: 72px;
+    height: 72px;
 `;

 const Label = styled.div`
-  font-size: 12px;
-  display: flex;
-  justify-content: space-between;
-  padding: 6px;
-  color: ${palette.taupe100};
-  p {
-    margin: 0;
-  }
+    font-size: 12px;
+    display: flex;
+    justify-content: space-between;
+    padding: 6px;
+    color: ${palette.taupe100};
+    p {
+        margin: 0;
+    }
 `;

 export const Colors = () => {
-  return (
-    <div>
-      {Object.entries(palette).map(([name, color], i) => (
-        <Swatch key={i}>
-          <SwatchColor style={{ backgroundColor: color }} />
-          <Label>
-            <p>{name}</p>
-            <p>
-              <code>var(--{name})</code>
-            </p>
-          </Label>
-        </Swatch>
-      ))}
-    </div>
-  );
+    return (
+        <div>
+            {Object.entries(palette).map(([name, color], i) => (
+                <Swatch key={i}>
+                    <SwatchColor style={{ backgroundColor: color }} />
+                    <Label>
+                        <p>{name}</p>
+                        <p>
+                            <code>var(--{name})</code>
+                        </p>
+                    </Label>
+                </Swatch>
+            ))}
+        </div>
+    );
 };

 export const ContrastRatios = () => {
-  const allRatios = getAllRatios(palette);
+    const allRatios = getAllRatios(palette);

-  return (
-    <div>
-      <p>
-        <b>WCAG Contrast Calculations.</b>
-        <br />
-        Marked in <span style={getWCAGStyle(7.1)}>Green</span> is 7.0+ or AAA.
-        Acceptable for Text.
-        <br />
-        Marked in <span style={getWCAGStyle(4.6)}>Orange</span> is 4.5+ or AA.
-        Acceptable for UI.
-        <br />
-        All below 4.5 is unacceptable.
-        <br />
-        <AmbientSmall>
-          WCAG Contrast testing disabled for this page.
-        </AmbientSmall>
-      </p>
-      <ContrastTable>
-        <thead>
-          <tr>
-            <th colSpan={2}>Swatch</th>
-            <th>Ratio</th>
-            <th>Color 1</th>
-            <th>Color 2</th>
-          </tr>
-        </thead>
-        <tbody>
-          {allRatios.map((ratio, i) => (
-            <tr key={i}>
-              <td style={{ backgroundColor: ratio.color1[1] }}>&nbsp;</td>
-              <td style={{ backgroundColor: ratio.color2[1] }}>&nbsp;</td>
-              <td style={getWCAGStyle(+ratio.ratio)}>{ratio.ratio}</td>
-              <td>{ratio.color1[0]}</td>
-              <td>{ratio.color2[0]}</td>
-              <td
-                style={{
-                  color: ratio.color1[1],
-                  backgroundColor: ratio.color2[1],
-                  paddingRight: "0.1em",
-                }}
-              >
-                oh my god my
-              </td>
-              <td
-                style={{
-                  color: ratio.color2[1],
-                  backgroundColor: ratio.color1[1],
-                  paddingLeft: "0.1em",
-                }}
-              >
-                shin how dare you
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </ContrastTable>
-    </div>
-  );
+    return (
+        <div>
+            <p>
+                <b>WCAG Contrast Calculations.</b>
+                <br />
+                Marked in <span style={getWCAGStyle(7.1)}>Green</span> is 7.0+ or AAA.
+                Acceptable for Text.
+                <br />
+                Marked in <span style={getWCAGStyle(4.6)}>Orange</span> is 4.5+ or AA.
+                Acceptable for UI.
+                <br />
+                All below 4.5 is unacceptable.
+                <br />
+                <AmbientSmall>WCAG Contrast testing disabled for this page.</AmbientSmall>
+            </p>
+            <ContrastTable>
+                <thead>
+                    <tr>
+                        <th colSpan={2}>Swatch</th>
+                        <th>Ratio</th>
+                        <th>Color 1</th>
+                        <th>Color 2</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {allRatios.map((ratio, i) => (
+                        <tr key={i}>
+                            <td style={{ backgroundColor: ratio.color1[1] }}>&nbsp;</td>
+                            <td style={{ backgroundColor: ratio.color2[1] }}>&nbsp;</td>
+                            <td style={getWCAGStyle(+ratio.ratio)}>{ratio.ratio}</td>
+                            <td>{ratio.color1[0]}</td>
+                            <td>{ratio.color2[0]}</td>
+                            <td
+                                style={{
+                                    color: ratio.color1[1],
+                                    backgroundColor: ratio.color2[1],
+                                    paddingRight: '0.1em',
+                                }}
+                            >
+                                oh my god my
+                            </td>
+                            <td
+                                style={{
+                                    color: ratio.color2[1],
+                                    backgroundColor: ratio.color1[1],
+                                    paddingLeft: '0.1em',
+                                }}
+                            >
+                                shin how dare you
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </ContrastTable>
+        </div>
+    );
 };

 const ContrastTable = styled.table`
-  td,
-  th {
-    padding: 6px 10px;
-  }
+    td,
+    th {
+        padding: 6px 10px;
+    }
 `;

 const getWCAGStyle = (ratio: number): React.CSSProperties => {
-  if (ratio >= 7) {
-    return { color: "green", fontWeight: "bold" };
-  }
+    if (ratio >= 7) {
+        return { color: 'green', fontWeight: 'bold' };
+    }

-  if (ratio >= 4.5) {
-    return { color: "orange", fontWeight: "bold" };
-  }
+    if (ratio >= 4.5) {
+        return { color: 'orange', fontWeight: 'bold' };
+    }

-  return {};
+    return {};
 };

 const getAllRatios = (input: typeof palette) =>
-  Object.entries(input)
-    .filter(([name]) => !name.startsWith("discord"))
-    .reduce((acc, [name, color]) => {
-      return [
-        ...acc,
-        ...Object.entries(palette)
-          .filter(([name]) => !name.startsWith("discord"))
-          .map(([matchName, matchColor]) => ({
-            color1: [name, color],
-            color2: [matchName, matchColor],
-            ratio: chroma.contrast(color, matchColor).toFixed(2),
-          })),
-      ];
-    }, [] as RatioList[])
-    .filter(({ ratio }) => +ratio !== 1)
-    .sort((a, b) => {
-      if (+a.ratio > +b.ratio) {
-        return -1;
-      }
-      return 1;
-    })
-    .filter((_, i) => i % 2 === 0);
+    Object.entries(input)
+        .filter(([name]) => !name.startsWith('discord'))
+        .reduce((acc, [name, color]) => {
+            return [
+                ...acc,
+                ...Object.entries(palette)
+                    .filter(([name]) => !name.startsWith('discord'))
+                    .map(([matchName, matchColor]) => ({
+                        color1: [name, color],
+                        color2: [matchName, matchColor],
+                        ratio: chroma.contrast(color, matchColor).toFixed(2),
+                    })),
+            ];
+        }, [] as RatioList[])
+        .filter(({ ratio }) => +ratio !== 1)
+        .sort((a, b) => {
+            if (+a.ratio > +b.ratio) {
+                return -1;
+            }
+            return 1;
+        })
+        .filter((_, i) => i % 2 === 0);
--- a/src/design-system/atoms/colors/colors.tsx
+++ b/src/design-system/atoms/colors/colors.tsx
@ -1,36 +1,36 @@
-import { css, createGlobalStyle } from "styled-components";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
-import chroma from "chroma-js";
+import { css, createGlobalStyle } from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import chroma from 'chroma-js';

 export const palette = {
-  taupe100: "#332D2D",
-  taupe200: "#453E3D",
-  taupe300: "#5D5352",
-  taupe400: "#756867",
-  taupe500: "#AB9B9A",
-  taupe600: "#EBD6D4",
+    taupe100: '#332D2D',
+    taupe200: '#453E3D',
+    taupe300: '#5D5352',
+    taupe400: '#756867',
+    taupe500: '#AB9B9A',
+    taupe600: '#EBD6D4',

-  discord100: "#23272A",
-  discord200: "#2C2F33",
-  discord400: "#7289DA",
-  discord500: "#99AAB5",
+    discord100: '#23272A',
+    discord200: '#2C2F33',
+    discord400: '#7289DA',
+    discord500: '#99AAB5',

-  green400: "#46B646",
+    green400: '#46B646',

-  red400: "#E95353",
+    red400: '#E95353',

-  gold400: "#EFCF24",
+    gold400: '#EFCF24',

-  grey100: "#1C1010",
-  grey500: "#DBD9D9",
-  grey600: "#F2EFEF",
+    grey100: '#1C1010',
+    grey500: '#DBD9D9',
+    grey600: '#F2EFEF',
 };

 const getPaletteCSS = () =>
-  Object.entries(palette).reduce(
-    (acc, [key, color]) => ({ ...acc, [`--${key}`]: color }),
-    {}
-  );
+    Object.entries(palette).reduce(
+        (acc, [key, color]) => ({ ...acc, [`--${key}`]: color }),
+        {}
+    );

 export const colorVars = css(getPaletteCSS());

@ -41,5 +41,5 @@ export const GlobalStyleColors = createGlobalStyle`
 `;

 export const numberToChroma = (colorInt: number) => {
-  return chroma(colorInt);
+    return chroma(colorInt);
 };
--- a/src/design-system/atoms/colors/index.ts
+++ b/src/design-system/atoms/colors/index.ts
@ -1,2 +1,2 @@
-export * from "./colors";
-export * as utils from "./withColors";
+export * from './colors';
+export * as utils from './withColors';
--- a/src/design-system/atoms/dot-overlay/DotOverlay.stories.tsx
+++ b/src/design-system/atoms/dot-overlay/DotOverlay.stories.tsx
@ -1,8 +1,8 @@
-import * as React from "react";
-import { DotOverlay } from "./DotOverlay";
+import * as React from 'react';
+import { DotOverlay } from './DotOverlay';

 export default {
-  title: "Atoms/Dot Overlay",
+    title: 'Atoms/Dot Overlay',
 };

 export const Dark = () => <DotOverlay />;
--- a/src/design-system/atoms/dot-overlay/DotOverlay.tsx
+++ b/src/design-system/atoms/dot-overlay/DotOverlay.tsx
@ -1,39 +1,39 @@
-import styled from "styled-components";
-import * as React from "react";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import styled from 'styled-components';
+import * as React from 'react';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 const dotOverlayBase = styled.div`
-  opacity: 0.6;
-  pointer-events: none;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: -10;
-  background-size: 27px 27px;
+    opacity: 0.6;
+    pointer-events: none;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: -10;
+    background-size: 27px 27px;
 `;

 const DotOverlayDark = styled(dotOverlayBase)`
-  background-image: radial-gradient(
-    circle,
-    #332d2d,
-    #332d2d 1px,
-    transparent 1px,
-    transparent
-  );
+    background-image: radial-gradient(
+        circle,
+        #332d2d,
+        #332d2d 1px,
+        transparent 1px,
+        transparent
+    );
 `;

 const DotOverlayLight = styled(dotOverlayBase)`
-  background-image: radial-gradient(
-    circle,
-    #dbd9d9,
-    #dbd9d9 1px,
-    transparent 1px,
-    transparent
-  );
+    background-image: radial-gradient(
+        circle,
+        #dbd9d9,
+        #dbd9d9 1px,
+        transparent 1px,
+        transparent
+    );
 `;

 export const DotOverlay = ({ light }: { light?: boolean }) => {
-  return light ? <DotOverlayLight /> : <DotOverlayDark />;
+    return light ? <DotOverlayLight /> : <DotOverlayDark />;
 };
--- a/src/design-system/atoms/fader/Fader.stories.tsx
+++ b/src/design-system/atoms/fader/Fader.stories.tsx
@ -1,28 +1,28 @@
-import * as React from "react";
-import { FaderOpacity, FaderSlide } from "./Fader";
-import { Button } from "roleypoly/src/design-system/atoms/button";
-import { action } from "@storybook/addon-actions";
+import * as React from 'react';
+import { FaderOpacity, FaderSlide } from './Fader';
+import { Button } from 'roleypoly/src/design-system/atoms/button';
+import { action } from '@storybook/addon-actions';

 export default {
-  title: "Atoms/Fader",
-  component: FaderSlide,
-  args: {
-    isVisible: true,
-  },
+    title: 'Atoms/Fader',
+    component: FaderSlide,
+    args: {
+        isVisible: true,
+    },
 };

 export const Opacity = (args) => {
-  return (
-    <FaderOpacity {...args}>
-      <Button onClick={action("onClick")}>Click me!</Button>
-    </FaderOpacity>
-  );
+    return (
+        <FaderOpacity {...args}>
+            <Button onClick={action('onClick')}>Click me!</Button>
+        </FaderOpacity>
+    );
 };

 export const Slide = (args) => {
-  return (
-    <FaderSlide {...args}>
-      <Button onClick={action("onClick")}>Click me!</Button>
-    </FaderSlide>
-  );
+    return (
+        <FaderSlide {...args}>
+            <Button onClick={action('onClick')}>Click me!</Button>
+        </FaderSlide>
+    );
 };
--- a/src/design-system/atoms/fader/Fader.tsx
+++ b/src/design-system/atoms/fader/Fader.tsx
@ -1,38 +1,36 @@
-import * as React from "react";
-import styled from "styled-components";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import * as React from 'react';
+import styled from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 export type FaderProps = {
-  isVisible: boolean;
-  children: React.ReactNode;
+    isVisible: boolean;
+    children: React.ReactNode;
 };

-const FaderOpacityStyled = styled.div<Pick<FaderProps, "isVisible">>`
-  opacity: ${(props) => (props.isVisible ? 1 : 0)};
-  pointer-events: ${(props) => (props.isVisible ? "unset" : "none")};
-  transition: opacity 0.35s ease-in-out;
+const FaderOpacityStyled = styled.div<Pick<FaderProps, 'isVisible'>>`
+    opacity: ${(props) => (props.isVisible ? 1 : 0)};
+    pointer-events: ${(props) => (props.isVisible ? 'unset' : 'none')};
+    transition: opacity 0.35s ease-in-out;
 `;

 export const FaderOpacity = (props: FaderProps) => {
-  return (
-    <FaderOpacityStyled isVisible={props.isVisible}>
-      {props.children}
-    </FaderOpacityStyled>
-  );
+    return (
+        <FaderOpacityStyled isVisible={props.isVisible}>
+            {props.children}
+        </FaderOpacityStyled>
+    );
 };

-const FaderSlideStyled = styled.div<Pick<FaderProps, "isVisible">>`
-  max-height: ${(props) => (props.isVisible ? "4em" : "0")};
-  pointer-events: ${(props) => (props.isVisible ? "unset" : "none")};
-  transition: max-height 0.35s ease-in-out;
-  overflow: hidden;
-  transform: translateZ(0);
+const FaderSlideStyled = styled.div<Pick<FaderProps, 'isVisible'>>`
+    max-height: ${(props) => (props.isVisible ? '4em' : '0')};
+    pointer-events: ${(props) => (props.isVisible ? 'unset' : 'none')};
+    transition: max-height 0.35s ease-in-out;
+    overflow: hidden;
+    transform: translateZ(0);
 `;

 export const FaderSlide = (props: FaderProps) => {
-  return (
-    <FaderSlideStyled isVisible={props.isVisible}>
-      {props.children}
-    </FaderSlideStyled>
-  );
+    return (
+        <FaderSlideStyled isVisible={props.isVisible}>{props.children}</FaderSlideStyled>
+    );
 };
--- a/src/design-system/atoms/fonts/fonts.stories.tsx
+++ b/src/design-system/atoms/fonts/fonts.stories.tsx
@ -1,66 +1,62 @@
-import * as React from "react";
-import { UseFontStyled } from "./fonts";
-import styled from "styled-components";
+import * as React from 'react';
+import { UseFontStyled } from './fonts';
+import styled from 'styled-components';
 import {
-  MediumTitle,
-  Text as TextBlock,
-} from "roleypoly/src/design-system/atoms/typography";
+    MediumTitle,
+    Text as TextBlock,
+} from 'roleypoly/src/design-system/atoms/typography';

-const resetFont = (storyFn: () => React.ReactNode) => (
-  <FontReset>{storyFn()}</FontReset>
-);
+const resetFont = (storyFn: () => React.ReactNode) => <FontReset>{storyFn()}</FontReset>;

 export default {
-  title: "Atoms/Fonts",
-  decorators: [resetFont],
+    title: 'Atoms/Fonts',
+    decorators: [resetFont],
 };

 const FontReset = styled.div`
-  font-family: sans-serif;
+    font-family: sans-serif;
 `;

 const CorrectlyFontedH2 = (props: { children: React.ReactNode }) => (
-  <UseFontStyled>
-    <MediumTitle>{props.children}</MediumTitle>
-  </UseFontStyled>
+    <UseFontStyled>
+        <MediumTitle>{props.children}</MediumTitle>
+    </UseFontStyled>
 );

 const Text = () => (
-  <>
-    <p>
-      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et facilis alias
-      placeat cumque sapiente ad delectus omnis quae. Reiciendis quibusdam
-      deserunt repellat. Exercitationem modi incidunt autem nemo tempore eaque
-      soluta.
-    </p>
-    <p>
-      帯カノ需混モイ一録43旧百12共ドレ能生ホクユ禁度ヨ材図クほはそ護関ラト郵張エノヨ議件クめざ県読れみとぶ論税クょンど慎転リつぎみ松期ほへド.
-      縦投記ふで覧速っだせあ過先課フ演無ぎぱべ習併相ーす気6元ゆる領気希ぎ投代ラ我関レ森郎由系堂ず.
-      読ケリ夜指ーっトせ認平引ウシ間花ヱクム年6台ぐ山婦ラスエ子著コア掲中ロ像属戸メソユ職諏ルど詐児題たに書希ク幕値長ラそめド.
-    </p>
-    <p>
-      🔸🐕🔺💱🎊👽🐛 👨📼🕦📞 👱👆🍗👚🌈 🔝🔟🍉🔰🍲🏁🕗 🎡🐉🍲📻🔢🔄
-      💟💲🍻💜💩🔼 🎱🌸📛👫🌻 🗽🕜🐥👕🍈. 🐒🍚🔓📱🏦 🎦🌑🔛💙👣🔚 🔆🗻🌿🎳📲🍯
-      🌞💟🎌🍌 🔪📯🐎💮 👌👭🎋🏉🏰 📓🕃🎂💉🔩 🐟🌇👺🌊🌒 📪👅🍂🍁 🌖🐮🔽🌒📊.
-      🔤🍍🌸📷🎴 💏🍌📎👥👉👒 👝💜🔶🍣 💨🗼👈💉💉💰 🍐🕖🌰👝🕓🏊🐕 🏀📅📼📒
-      🐕🌈👋
-    </p>
-  </>
+    <>
+        <p>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et facilis alias
+            placeat cumque sapiente ad delectus omnis quae. Reiciendis quibusdam deserunt
+            repellat. Exercitationem modi incidunt autem nemo tempore eaque soluta.
+        </p>
+        <p>
+            帯カノ需混モイ一録43旧百12共ドレ能生ホクユ禁度ヨ材図クほはそ護関ラト郵張エノヨ議件クめざ県読れみとぶ論税クょンど慎転リつぎみ松期ほへド.
+            縦投記ふで覧速っだせあ過先課フ演無ぎぱべ習併相ーす気6元ゆる領気希ぎ投代ラ我関レ森郎由系堂ず.
+            読ケリ夜指ーっトせ認平引ウシ間花ヱクム年6台ぐ山婦ラスエ子著コア掲中ロ像属戸メソユ職諏ルど詐児題たに書希ク幕値長ラそめド.
+        </p>
+        <p>
+            🔸🐕🔺💱🎊👽🐛 👨📼🕦📞 👱👆🍗👚🌈 🔝🔟🍉🔰🍲🏁🕗 🎡🐉🍲📻🔢🔄 💟💲🍻💜💩🔼
+            🎱🌸📛👫🌻 🗽🕜🐥👕🍈. 🐒🍚🔓📱🏦 🎦🌑🔛💙👣🔚 🔆🗻🌿🎳📲🍯 🌞💟🎌🍌 🔪📯🐎💮
+            👌👭🎋🏉🏰 📓🕃🎂💉🔩 🐟🌇👺🌊🌒 📪👅🍂🍁 🌖🐮🔽🌒📊. 🔤🍍🌸📷🎴 💏🍌📎👥👉👒
+            👝💜🔶🍣 💨🗼👈💉💉💰 🍐🕖🌰👝🕓🏊🐕 🏀📅📼📒 🐕🌈👋
+        </p>
+    </>
 );

 export const Fonts = () => (
-  <TextBlock>
-    <section>
-      <CorrectlyFontedH2>Unstyled Default</CorrectlyFontedH2>
-      <Text />
-    </section>
-    <section>
-      <CorrectlyFontedH2>
-        Main (Source Han Sans Japanese, Source Sans)
-      </CorrectlyFontedH2>
-      <UseFontStyled>
-        <Text />
-      </UseFontStyled>
-    </section>
-  </TextBlock>
+    <TextBlock>
+        <section>
+            <CorrectlyFontedH2>Unstyled Default</CorrectlyFontedH2>
+            <Text />
+        </section>
+        <section>
+            <CorrectlyFontedH2>
+                Main (Source Han Sans Japanese, Source Sans)
+            </CorrectlyFontedH2>
+            <UseFontStyled>
+                <Text />
+            </UseFontStyled>
+        </section>
+    </TextBlock>
 );
--- a/src/design-system/atoms/fonts/fonts.tsx
+++ b/src/design-system/atoms/fonts/fonts.tsx
@ -1,30 +1,30 @@
-import * as React from "react";
-import Head from "next/head";
-import styled, { css } from "styled-components";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import * as React from 'react';
+import Head from 'next/head';
+import styled, { css } from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 export const InjectTypekitFont = () => {
-  React.useEffect(() => {
-    (window as any).Typekit.load();
-  }, []);
-  return (
-    <Head>
-      <link
-        key="typekit-css-preload"
-        rel="preload"
-        href="https://use.typekit.net/bck0pci.js"
-        as="script"
-      />
-      <script key="typekit-js" src="https://use.typekit.net/bck0pci.js" />
-    </Head>
-  );
+    React.useEffect(() => {
+        (window as any).Typekit.load();
+    }, []);
+    return (
+        <Head>
+            <link
+                key="typekit-css-preload"
+                rel="preload"
+                href="https://use.typekit.net/bck0pci.js"
+                as="script"
+            />
+            <script key="typekit-js" src="https://use.typekit.net/bck0pci.js" />
+        </Head>
+    );
 };

 export const fontCSS = css`
-  font-family: "source-han-sans-japanese", "Source Sans Pro", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+    font-family: 'source-han-sans-japanese', 'Source Sans Pro', sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
 `;

 export const UseFontStyled = styled.div`
-  ${fontCSS}
+    ${fontCSS}
 `;
--- a/src/design-system/atoms/halfsies/Halfsies.stories.tsx
+++ b/src/design-system/atoms/halfsies/Halfsies.stories.tsx
@ -1,13 +1,13 @@
-import * as React from "react";
-import { HalfsiesContainer, HalfsiesItem } from "./Halfsies";
+import * as React from 'react';
+import { HalfsiesContainer, HalfsiesItem } from './Halfsies';

 export default {
-  title: "Atoms/Halfsies",
+    title: 'Atoms/Halfsies',
 };

 export const Container = () => (
-  <HalfsiesContainer>
-    <HalfsiesItem>Lefty doo</HalfsiesItem>
-    <HalfsiesItem>Righty doo</HalfsiesItem>
-  </HalfsiesContainer>
+    <HalfsiesContainer>
+        <HalfsiesItem>Lefty doo</HalfsiesItem>
+        <HalfsiesItem>Righty doo</HalfsiesItem>
+    </HalfsiesContainer>
 );
--- a/src/design-system/atoms/halfsies/Halfsies.tsx
+++ b/src/design-system/atoms/halfsies/Halfsies.tsx
@ -1,18 +1,18 @@
-import styled, { css } from "styled-components";
-import { onTablet } from "roleypoly/src/design-system/atoms/breakpoints";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import styled, { css } from 'styled-components';
+import { onTablet } from 'roleypoly/src/design-system/atoms/breakpoints';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 export const HalfsiesContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
 `;

 export const HalfsiesItem = styled.div`
-  box-sizing: border-box;
-  flex: 1 1 100%;
-  ${onTablet(css`
-    flex: 1 2 50%;
-  `)}
+    box-sizing: border-box;
+    flex: 1 1 100%;
+    ${onTablet(css`
+        flex: 1 2 50%;
+    `)}
 `;
--- a/src/design-system/atoms/hero/Hero.stories.tsx
+++ b/src/design-system/atoms/hero/Hero.stories.tsx
@ -1,74 +1,70 @@
-import * as React from "react";
-import { Hero as HeroComponent } from "./Hero";
+import * as React from 'react';
+import { Hero as HeroComponent } from './Hero';

 export default {
-  title: "Atoms/Hero",
-  component: HeroComponent,
-  args: {
-    topSpacing: 75,
-    bottomSpacing: 25,
-  },
+    title: 'Atoms/Hero',
+    component: HeroComponent,
+    args: {
+        topSpacing: 75,
+        bottomSpacing: 25,
+    },
 };

 export const Hero = ({ topSpacing, bottomSpacing }) => {
-  return (
-    <StoryWrapper topSpacing={topSpacing} bottomSpacing={bottomSpacing}>
-      <HeroComponent topSpacing={topSpacing} bottomSpacing={bottomSpacing}>
-        <h1>This is it.</h1>
-      </HeroComponent>
-    </StoryWrapper>
-  );
+    return (
+        <StoryWrapper topSpacing={topSpacing} bottomSpacing={bottomSpacing}>
+            <HeroComponent topSpacing={topSpacing} bottomSpacing={bottomSpacing}>
+                <h1>This is it.</h1>
+            </HeroComponent>
+        </StoryWrapper>
+    );
 };

 type WrapperProps = {
-  children: React.ReactNode;
-  topSpacing: number;
-  bottomSpacing: number;
+    children: React.ReactNode;
+    topSpacing: number;
+    bottomSpacing: number;
 };

-const StoryWrapper = ({
-  topSpacing,
-  bottomSpacing,
-  ...props
-}: WrapperProps) => (
-  <div>
-    <div
-      style={{
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: "100vh",
-      }}
-    >
-      <div
-        style={{
-          height: topSpacing,
-          backgroundColor: "rgba(255,0,0,0.25)",
-          top: 0,
-          left: 0,
-          right: 0,
-          position: "absolute",
-          overflow: "hidden",
-        }}
-      >
-        topSpacing
-      </div>
-      <div
-        style={{
-          height: bottomSpacing,
-          backgroundColor: "rgba(0,0,255,0.25)",
-          bottom: 0,
-          left: 0,
-          right: 0,
-          position: "absolute",
-          overflow: "hidden",
-        }}
-      >
-        bottomSpacing
-      </div>
+const StoryWrapper = ({ topSpacing, bottomSpacing, ...props }: WrapperProps) => (
+    <div>
+        <div
+            style={{
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height: '100vh',
+            }}
+        >
+            <div
+                style={{
+                    height: topSpacing,
+                    backgroundColor: 'rgba(255,0,0,0.25)',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    position: 'absolute',
+                    overflow: 'hidden',
+                }}
+            >
+                topSpacing
+            </div>
+            <div
+                style={{
+                    height: bottomSpacing,
+                    backgroundColor: 'rgba(0,0,255,0.25)',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    position: 'absolute',
+                    overflow: 'hidden',
+                }}
+            >
+                bottomSpacing
+            </div>
+        </div>
+        {props.children}
    </div>
-    {props.children}
-  </div>
 );
--- a/src/design-system/atoms/hero/Hero.tsx
+++ b/src/design-system/atoms/hero/Hero.tsx
@ -1,33 +1,31 @@
-import * as React from "react";
-import styled from "styled-components";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import * as React from 'react';
+import styled from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 type HeroContainerProps = {
-  topSpacing: number;
-  bottomSpacing: number;
+    topSpacing: number;
+    bottomSpacing: number;
 };

 type HeroProps = Partial<HeroContainerProps> & {
-  children: React.ReactNode;
+    children: React.ReactNode;
 };

 const HeroContainer = styled.div<HeroContainerProps>`
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow-x: hidden;
-  min-height: calc(
-    100vh - ${(props) => props.topSpacing + props.bottomSpacing}px
-  );
-  margin-top: ${(props) => props.topSpacing}px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow-x: hidden;
+    min-height: calc(100vh - ${(props) => props.topSpacing + props.bottomSpacing}px);
+    margin-top: ${(props) => props.topSpacing}px;
 `;

 export const Hero = (props: HeroProps) => (
-  <HeroContainer
-    topSpacing={props.topSpacing || 0}
-    bottomSpacing={props.bottomSpacing || 0}
-  >
-    {props.children}
-  </HeroContainer>
+    <HeroContainer
+        topSpacing={props.topSpacing || 0}
+        bottomSpacing={props.bottomSpacing || 0}
+    >
+        {props.children}
+    </HeroContainer>
 );
--- a/src/design-system/atoms/popover/Popover.stories.tsx
+++ b/src/design-system/atoms/popover/Popover.stories.tsx
@ -1,34 +1,34 @@
-import * as React from "react";
-import { Button } from "roleypoly/src/design-system/atoms/button";
-import { Popover as PopoverComponent } from "./Popover";
+import * as React from 'react';
+import { Button } from 'roleypoly/src/design-system/atoms/button';
+import { Popover as PopoverComponent } from './Popover';

 export default {
-  title: "Atoms/Popover",
-  argTypes: {
-    canDefocus: { control: "boolean" },
-  },
-  args: {
-    canDefocus: true,
-  },
+    title: 'Atoms/Popover',
+    argTypes: {
+        canDefocus: { control: 'boolean' },
+    },
+    args: {
+        canDefocus: true,
+    },
 };

 export const Popover = ({ canDefocus }) => {
-  const [isOpen, setIsOpen] = React.useState(false);
+    const [isOpen, setIsOpen] = React.useState(false);

-  return (
-    <div style={{ padding: 50 }}>
-      <Button size="small" onClick={() => setIsOpen(!isOpen)}>
-        {!isOpen ? "Open" : "Close"} me!
-      </Button>
-      <PopoverComponent
-        position="top right"
-        active={isOpen}
-        onExit={() => setIsOpen(false)}
-        canDefocus={canDefocus}
-        headContent={<>Hello c:</>}
-      >
-        stuff
-      </PopoverComponent>
-    </div>
-  );
+    return (
+        <div style={{ padding: 50 }}>
+            <Button size="small" onClick={() => setIsOpen(!isOpen)}>
+                {!isOpen ? 'Open' : 'Close'} me!
+            </Button>
+            <PopoverComponent
+                position="top right"
+                active={isOpen}
+                onExit={() => setIsOpen(false)}
+                canDefocus={canDefocus}
+                headContent={<>Hello c:</>}
+            >
+                stuff
+            </PopoverComponent>
+        </div>
+    );
 };
--- a/src/design-system/atoms/popover/Popover.styled.ts
+++ b/src/design-system/atoms/popover/Popover.styled.ts
@ -1,91 +1,88 @@
-import {
-  onSmallScreen,
-  onTablet,
-} from "roleypoly/src/design-system/atoms/breakpoints";
-import { palette } from "roleypoly/src/design-system/atoms/colors";
-import { transitions } from "roleypoly/src/design-system/atoms/timings";
-import styled, { css } from "styled-components";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import { onSmallScreen, onTablet } from 'roleypoly/src/design-system/atoms/breakpoints';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
+import { transitions } from 'roleypoly/src/design-system/atoms/timings';
+import styled, { css } from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 type PopoverStyledProps = {
-  active: boolean;
-  preferredWidth?: number;
+    active: boolean;
+    preferredWidth?: number;
 };

 export const PopoverBase = styled.div<PopoverStyledProps>`
-  box-sizing: border-box;
-  position: absolute;
-  background-color: ${palette.taupe100};
-  padding: 5px;
-  border: 2px solid rgba(0, 0, 0, 0.15);
-  border-radius: 3px;
-  z-index: 10;
-  transition: opacity ${transitions.out2in}s ease-in,
-    transform ${transitions.out2in}s ease-in;
-  min-width: ${(props) => props.preferredWidth || 320}px;
-  max-width: 100vw;
-  ${(props) =>
-    !props.active &&
-    css`
-      transform: translateY(-2vh);
-      opacity: 0;
-      pointer-events: none;
-    `}
-  ${onSmallScreen(css`
+    box-sizing: border-box;
    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    min-width: unset;
-    width: 100vw;
-    height: 100vh;
-  `)};
+    background-color: ${palette.taupe100};
+    padding: 5px;
+    border: 2px solid rgba(0, 0, 0, 0.15);
+    border-radius: 3px;
+    z-index: 10;
+    transition: opacity ${transitions.out2in}s ease-in,
+        transform ${transitions.out2in}s ease-in;
+    min-width: ${(props) => props.preferredWidth || 320}px;
+    max-width: 100vw;
+    ${(props) =>
+        !props.active &&
+        css`
+            transform: translateY(-2vh);
+            opacity: 0;
+            pointer-events: none;
+        `}
+    ${onSmallScreen(css`
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        min-width: unset;
+        width: 100vw;
+        height: 100vh;
+    `)};
 `;

 export const DefocusHandler = styled.div<PopoverStyledProps>`
-  background-color: rgba(0, 0, 0, 0.01);
-  position: fixed;
-  z-index: -1;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  ${(props) =>
-    !props.active &&
-    css`
-      display: none;
-      pointer-events: none;
-    `}
+    background-color: rgba(0, 0, 0, 0.01);
+    position: fixed;
+    z-index: -1;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    ${(props) =>
+        !props.active &&
+        css`
+            display: none;
+            pointer-events: none;
+        `}
 `;

 export const PopoverHead = styled.div`
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 `;

 export const PopoverHeadCloser = styled.div`
-  flex: 0;
-  font-size: 2em;
-  cursor: pointer;
-  margin-right: 10px;
-  border-radius: 2em;
-  min-width: 1.4em;
-  height: 1.4em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  ${onTablet(
-    css`
-      display: none;
-    `
-  )}
+    flex: 0;
+    font-size: 2em;
+    cursor: pointer;
+    margin-right: 10px;
+    border-radius: 2em;
+    min-width: 1.4em;
+    height: 1.4em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    ${onTablet(
+        css`
+            display: none;
+        `
+    )}

-  &:hover {
-    background: rgba(0, 0, 0, 0.1);
-  }
+    &:hover {
+        background: rgba(0, 0, 0, 0.1);
+    }
 `;

 export const PopoverContent = styled.div`
-  padding: 5px;
+    padding: 5px;
 `;
--- a/src/design-system/atoms/popover/Popover.tsx
+++ b/src/design-system/atoms/popover/Popover.tsx
@ -1,42 +1,42 @@
-import * as React from "react";
+import * as React from 'react';
 import {
-  PopoverBase,
-  DefocusHandler,
-  PopoverHead,
-  PopoverHeadCloser,
-  PopoverContent,
-} from "./Popover.styled";
-import { globalOnKeyUp } from "roleypoly/src/design-system/atoms/key-events";
-import { IoMdClose } from "react-icons/io";
+    PopoverBase,
+    DefocusHandler,
+    PopoverHead,
+    PopoverHeadCloser,
+    PopoverContent,
+} from './Popover.styled';
+import { globalOnKeyUp } from 'roleypoly/src/design-system/atoms/key-events';
+import { IoMdClose } from 'react-icons/io';

 type PopoverProps = {
-  children: React.ReactNode;
-  position: "top left" | "top right" | "bottom left" | "bottom right";
-  active: boolean;
-  canDefocus?: boolean;
-  onExit?: (type: "escape" | "defocus" | "explicit") => void;
-  headContent: React.ReactNode;
+    children: React.ReactNode;
+    position: 'top left' | 'top right' | 'bottom left' | 'bottom right';
+    active: boolean;
+    canDefocus?: boolean;
+    onExit?: (type: 'escape' | 'defocus' | 'explicit') => void;
+    headContent: React.ReactNode;
 };

 export const Popover = (props: PopoverProps) => {
-  globalOnKeyUp(["Escape"], () => props.onExit?.("escape"), props.active);
-  return (
-    <>
-      <PopoverBase active={props.active}>
-        <PopoverHead>
-          <PopoverHeadCloser onClick={() => props.onExit?.("explicit")}>
-            <IoMdClose />
-          </PopoverHeadCloser>
-          <div>{props.headContent}</div>
-        </PopoverHead>
-        <PopoverContent>{props.children}</PopoverContent>
-      </PopoverBase>
-      {props.canDefocus && (
-        <DefocusHandler
-          active={props.active}
-          onClick={() => props.onExit?.("defocus")}
-        />
-      )}
-    </>
-  );
+    globalOnKeyUp(['Escape'], () => props.onExit?.('escape'), props.active);
+    return (
+        <>
+            <PopoverBase active={props.active}>
+                <PopoverHead>
+                    <PopoverHeadCloser onClick={() => props.onExit?.('explicit')}>
+                        <IoMdClose />
+                    </PopoverHeadCloser>
+                    <div>{props.headContent}</div>
+                </PopoverHead>
+                <PopoverContent>{props.children}</PopoverContent>
+            </PopoverBase>
+            {props.canDefocus && (
+                <DefocusHandler
+                    active={props.active}
+                    onClick={() => props.onExit?.('defocus')}
+                />
+            )}
+        </>
+    );
 };
--- a/src/design-system/atoms/role/Role.stories.tsx
+++ b/src/design-system/atoms/role/Role.stories.tsx
@ -1,79 +1,79 @@
-import * as React from "react";
-import { Role as RoleComponent } from "./Role";
-import { roleCategory } from "roleypoly/hack/fixtures/storyData";
-import { withColors } from "roleypoly/src/design-system/atoms/colors/withColors";
-import styled from "styled-components";
+import * as React from 'react';
+import { Role as RoleComponent } from './Role';
+import { roleCategory } from 'roleypoly/hack/fixtures/storyData';
+import { withColors } from 'roleypoly/src/design-system/atoms/colors/withColors';
+import styled from 'styled-components';

 export default {
-  title: "Atoms/Role",
-  component: RoleComponent,
-  decorators: [withColors],
+    title: 'Atoms/Role',
+    component: RoleComponent,
+    decorators: [withColors],
 };

 const Demo = styled.div`
-  display: flex;
-  flex-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
 `;

 const RoleWithState = (props: any) => {
-  const [selected, updateSelected] = React.useState(false);
-  return (
-    <div style={{ padding: 5 }}>
-      <RoleComponent
-        {...props}
-        selected={selected}
-        onClick={(next) => updateSelected(next)}
-      />
-    </div>
-  );
+    const [selected, updateSelected] = React.useState(false);
+    return (
+        <div style={{ padding: 5 }}>
+            <RoleComponent
+                {...props}
+                selected={selected}
+                onClick={(next) => updateSelected(next)}
+            />
+        </div>
+    );
 };

 export const Role = () => (
-  <Demo>
-    {roleCategory.map((c, idx) => (
-      <RoleWithState key={idx} role={c} />
-    ))}
-  </Demo>
+    <Demo>
+        {roleCategory.map((c, idx) => (
+            <RoleWithState key={idx} role={c} />
+        ))}
+    </Demo>
 );

 export const Selected = () => (
-  <Demo>
-    {roleCategory.map((c, idx) => (
-      <RoleComponent key={idx} role={c} selected={true} />
-    ))}
-  </Demo>
+    <Demo>
+        {roleCategory.map((c, idx) => (
+            <RoleComponent key={idx} role={c} selected={true} />
+        ))}
+    </Demo>
 );

 export const Unselected = () => (
-  <Demo>
-    {roleCategory.map((c, idx) => (
-      <RoleComponent key={idx} role={c} selected={false} />
-    ))}
-  </Demo>
+    <Demo>
+        {roleCategory.map((c, idx) => (
+            <RoleComponent key={idx} role={c} selected={false} />
+        ))}
+    </Demo>
 );

 export const DisabledByPosition = () => (
-  <Demo>
-    {roleCategory.map((c, idx) => (
-      <RoleComponent
-        key={idx}
-        role={{ ...c, safety: 1 }}
-        selected={false}
-        disabled
-      />
-    ))}
-  </Demo>
+    <Demo>
+        {roleCategory.map((c, idx) => (
+            <RoleComponent
+                key={idx}
+                role={{ ...c, safety: 1 }}
+                selected={false}
+                disabled
+            />
+        ))}
+    </Demo>
 );

 export const DisabledByDanger = () => (
-  <Demo>
-    {roleCategory.map((c, idx) => (
-      <RoleComponent
-        key={idx}
-        role={{ ...c, safety: 2 }}
-        selected={false}
-        disabled
-      />
-    ))}
-  </Demo>
+    <Demo>
+        {roleCategory.map((c, idx) => (
+            <RoleComponent
+                key={idx}
+                role={{ ...c, safety: 2 }}
+                selected={false}
+                disabled
+            />
+        ))}
+    </Demo>
 );
--- a/src/design-system/atoms/role/Role.styled.tsx
+++ b/src/design-system/atoms/role/Role.styled.tsx
@ -1,84 +1,79 @@
-import styled, { css } from "styled-components";
-import { transitions } from "roleypoly/src/design-system/atoms/timings";
-import { palette } from "roleypoly/src/design-system/atoms/colors";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import styled, { css } from 'styled-components';
+import { transitions } from 'roleypoly/src/design-system/atoms/timings';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 export type StyledProps = {
-  selected: boolean;
-  defaultColor: boolean;
-  disabled: boolean;
+    selected: boolean;
+    defaultColor: boolean;
+    disabled: boolean;
 };

 export const Outer = styled.div<StyledProps>`
-  border-radius: 24px;
-  background-color: ${(props) =>
-    props.selected && !props.defaultColor
-      ? "var(--role-color)"
-      : palette.taupe100};
-  color: ${(props) =>
-    props.selected ? "var(--role-contrast)" : palette.grey600};
-  transition: color ${transitions.in2in}s ease-in-out,
-    background-color ${transitions.in2in}s ease-in-out,
-    transform ${transitions.actionable}s ease-in-out,
-    box-shadow ${transitions.actionable}s ease-in-out;
-  display: flex;
-  padding: 4px;
-  user-select: none;
-  overflow: hidden;
-  cursor: pointer;
-  ${(props) =>
-    !props.disabled
-      ? css`
-          &:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-          }
+    border-radius: 24px;
+    background-color: ${(props) =>
+        props.selected && !props.defaultColor ? 'var(--role-color)' : palette.taupe100};
+    color: ${(props) => (props.selected ? 'var(--role-contrast)' : palette.grey600)};
+    transition: color ${transitions.in2in}s ease-in-out,
+        background-color ${transitions.in2in}s ease-in-out,
+        transform ${transitions.actionable}s ease-in-out,
+        box-shadow ${transitions.actionable}s ease-in-out;
+    display: flex;
+    padding: 4px;
+    user-select: none;
+    overflow: hidden;
+    cursor: pointer;
+    ${(props) =>
+        !props.disabled
+            ? css`
+                  &:hover {
+                      transform: translateY(-2px);
+                      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+                  }

-          &:active {
-            transform: translateY(0);
-            box-shadow: 0 0 0 transparent;
-          }
-        `
-      : null};
+                  &:active {
+                      transform: translateY(0);
+                      box-shadow: 0 0 0 transparent;
+                  }
+              `
+            : null};
 `;

 export const Circle = styled.div<StyledProps>`
-  width: 24px;
-  height: 24px;
-  border-radius: 25px;
-  background-color: ${(props) =>
-    props.defaultColor && !props.selected
-      ? "transparent"
-      : "var(--role-color)"};
-  border: 1px solid
-    ${(props) =>
-      props.defaultColor
-        ? "var(--role-color)"
-        : props.selected
-        ? "var(--role-accent)"
-        : "transparent"};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: border ${transitions.in2in}s ease-in-out,
-    background-color ${transitions.in2in}s ease-in-out;
-  flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    border-radius: 25px;
+    background-color: ${(props) =>
+        props.defaultColor && !props.selected ? 'transparent' : 'var(--role-color)'};
+    border: 1px solid
+        ${(props) =>
+            props.defaultColor
+                ? 'var(--role-color)'
+                : props.selected
+                ? 'var(--role-accent)'
+                : 'transparent'};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: border ${transitions.in2in}s ease-in-out,
+        background-color ${transitions.in2in}s ease-in-out;
+    flex-shrink: 0;

-  svg {
-    width: 10px;
-    height: 10px;
-    fill-opacity: ${(props) => (props.selected || props.disabled ? 1 : 0)};
-    transition: fill-opacity ${transitions.in2in}s ease-in-out;
-    fill: ${(props) =>
-      props.disabled && props.defaultColor
-        ? "var(--role-color)"
-        : "var(--role-contrast)"};
-  }
+    svg {
+        width: 10px;
+        height: 10px;
+        fill-opacity: ${(props) => (props.selected || props.disabled ? 1 : 0)};
+        transition: fill-opacity ${transitions.in2in}s ease-in-out;
+        fill: ${(props) =>
+            props.disabled && props.defaultColor
+                ? 'var(--role-color)'
+                : 'var(--role-contrast)'};
+    }
 `;

 export const Text = styled.div`
-  padding: 0 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    padding: 0 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 `;
--- a/src/design-system/atoms/role/Role.tsx
+++ b/src/design-system/atoms/role/Role.tsx
@ -1,80 +1,80 @@
-import * as React from "react";
-import { Role as RPCRole } from "@roleypoly/rpc/shared";
-import * as styled from "./Role.styled";
-import { FaCheck, FaTimes } from "react-icons/fa";
-import { numberToChroma } from "roleypoly/src/design-system/atoms/colors";
-import chroma from "chroma-js";
+import * as React from 'react';
+import { Role as RPCRole } from '@roleypoly/rpc/shared';
+import * as styled from './Role.styled';
+import { FaCheck, FaTimes } from 'react-icons/fa';
+import { numberToChroma } from 'roleypoly/src/design-system/atoms/colors';
+import chroma from 'chroma-js';

 type Props = {
-  role: RPCRole.AsObject;
-  selected: boolean;
-  disabled?: boolean;
-  onClick?: (newState: boolean) => void;
-  tooltipId?: string;
+    role: RPCRole.AsObject;
+    selected: boolean;
+    disabled?: boolean;
+    onClick?: (newState: boolean) => void;
+    tooltipId?: string;
 };

 export const Role = (props: Props) => {
-  const colorVars = {
-    "--role-color": "white",
-    "--role-contrast": "hsl(0,0,0%)",
-    "--role-accent": "hsl(0,0,70%)",
-  };
+    const colorVars = {
+        '--role-color': 'white',
+        '--role-contrast': 'hsl(0,0,0%)',
+        '--role-accent': 'hsl(0,0,70%)',
+    };

-  if (props.role.color !== 0) {
-    const baseColor = numberToChroma(props.role.color);
-    const contrastColorUp = baseColor.brighten(5);
-    const contrastColorDown = baseColor.darken(5);
-    const ratio = chroma.contrast(contrastColorDown, baseColor);
-    const contrastColor = ratio > 2 ? contrastColorDown : contrastColorUp;
-    const accentColor = ratio > 2 ? baseColor.darken(2) : baseColor.brighten(2);
-    colorVars["--role-color"] = baseColor.css();
-    colorVars["--role-accent"] = accentColor.css();
-    colorVars["--role-contrast"] = contrastColor.css();
-  }
+    if (props.role.color !== 0) {
+        const baseColor = numberToChroma(props.role.color);
+        const contrastColorUp = baseColor.brighten(5);
+        const contrastColorDown = baseColor.darken(5);
+        const ratio = chroma.contrast(contrastColorDown, baseColor);
+        const contrastColor = ratio > 2 ? contrastColorDown : contrastColorUp;
+        const accentColor = ratio > 2 ? baseColor.darken(2) : baseColor.brighten(2);
+        colorVars['--role-color'] = baseColor.css();
+        colorVars['--role-accent'] = accentColor.css();
+        colorVars['--role-contrast'] = contrastColor.css();
+    }

-  const styledProps: styled.StyledProps = {
-    selected: props.selected,
-    defaultColor: props.role.color === 0,
-    disabled: !!props.disabled,
-  };
+    const styledProps: styled.StyledProps = {
+        selected: props.selected,
+        defaultColor: props.role.color === 0,
+        disabled: !!props.disabled,
+    };

-  const extra = !props.disabled
-    ? {}
-    : {
-        "data-tip": disabledReason(props.role),
-        "data-for": props.tooltipId,
-      };
+    const extra = !props.disabled
+        ? {}
+        : {
+              'data-tip': disabledReason(props.role),
+              'data-for': props.tooltipId,
+          };

-  return (
-    <styled.Outer
-      {...styledProps}
-      style={colorVars as any}
-      onClick={() => !props.disabled && props.onClick?.(!props.selected)}
-      {...extra}
-    >
-      <styled.Circle {...styledProps}>
-        {!props.disabled ? <FaCheck /> : <FaTimes />}
-      </styled.Circle>
-      <styled.Text>{props.role.name}</styled.Text>
-    </styled.Outer>
-  );
+    return (
+        <styled.Outer
+            {...styledProps}
+            style={colorVars as any}
+            onClick={() => !props.disabled && props.onClick?.(!props.selected)}
+            {...extra}
+        >
+            <styled.Circle {...styledProps}>
+                {!props.disabled ? <FaCheck /> : <FaTimes />}
+            </styled.Circle>
+            <styled.Text>{props.role.name}</styled.Text>
+        </styled.Outer>
+    );
 };

 const disabledReason = (role: RPCRole.AsObject) => {
-  switch (role.safety) {
-    case RPCRole.RoleSafety.HIGHERTHANBOT:
-      return `This role is above Roleypoly's own role.`;
-    case RPCRole.RoleSafety.DANGEROUSPERMISSIONS:
-      const { permissions } = role;
-      let permissionHits: string[] = [];
+    switch (role.safety) {
+        case RPCRole.RoleSafety.HIGHERTHANBOT:
+            return `This role is above Roleypoly's own role.`;
+        case RPCRole.RoleSafety.DANGEROUSPERMISSIONS:
+            const { permissions } = role;
+            let permissionHits: string[] = [];

-      (permissions & 0x00000008) === 0x00000008 &&
-        permissionHits.push("Administrator");
-      (permissions & 0x10000000) === 0x10000000 &&
-        permissionHits.push("Manage Roles");
+            (permissions & 0x00000008) === 0x00000008 &&
+                permissionHits.push('Administrator');
+            (permissions & 0x10000000) === 0x10000000 &&
+                permissionHits.push('Manage Roles');

-      return `This role has unsafe permissions: ${permissionHits.join(", ")}`;
-    default:
-      return `This role is disabled.`;
-  }
+            return `This role has unsafe permissions: ${permissionHits.join(', ')}`;
+        default:
+            return `This role is disabled.`;
+    }
 };
--- a/src/design-system/atoms/space/Space.stories.tsx
+++ b/src/design-system/atoms/space/Space.stories.tsx
@ -1,14 +1,14 @@
-import { Space as SpaceComponent } from "./Space";
-import * as React from "react";
+import { Space as SpaceComponent } from './Space';
+import * as React from 'react';

 export default {
-  title: "Atoms",
+    title: 'Atoms',
 };

 export const Space = () => (
-  <>
-    hello world
-    <SpaceComponent />
-    but im over here
-  </>
+    <>
+        hello world
+        <SpaceComponent />
+        but im over here
+    </>
 );
--- a/src/design-system/atoms/space/Space.tsx
+++ b/src/design-system/atoms/space/Space.tsx
@ -1,6 +1,6 @@
-import styled from "styled-components";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import styled from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 export const Space = styled.div`
-  height: 15px;
+    height: 15px;
 `;
--- a/src/design-system/atoms/sparkle/Sparkle.stories.tsx
+++ b/src/design-system/atoms/sparkle/Sparkle.stories.tsx
@ -1,22 +1,22 @@
-import * as React from "react";
-import { SparkleOverlay } from "./Sparkle";
-import { Button } from "roleypoly/src/design-system/atoms/button";
-import { Hero } from "roleypoly/src/design-system/atoms/hero";
+import * as React from 'react';
+import { SparkleOverlay } from './Sparkle';
+import { Button } from 'roleypoly/src/design-system/atoms/button';
+import { Hero } from 'roleypoly/src/design-system/atoms/hero';

 export default {
-  title: "Atoms/Sparkle",
-  component: SparkleOverlay,
-  args: {
-    size: -10,
-    opacity: 1,
-    repeatCount: 3,
-  },
+    title: 'Atoms/Sparkle',
+    component: SparkleOverlay,
+    args: {
+        size: -10,
+        opacity: 1,
+        repeatCount: 3,
+    },
 };

 export const ExampleButton = (args) => (
-  <Hero>
-    <SparkleOverlay {...args}>
-      <Button>Yo check this!</Button>
-    </SparkleOverlay>
-  </Hero>
+    <Hero>
+        <SparkleOverlay {...args}>
+            <Button>Yo check this!</Button>
+        </SparkleOverlay>
+    </Hero>
 );
--- a/src/design-system/atoms/sparkle/Sparkle.tsx
+++ b/src/design-system/atoms/sparkle/Sparkle.tsx
@ -1,55 +1,52 @@
-import * as React from "react";
-import styled from "styled-components";
-import { palette } from "roleypoly/src/design-system/atoms/colors";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
-import { SparklePatternAlpha, SparklePatternBeta } from "./Shapes";
+import * as React from 'react';
+import styled from 'styled-components';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import { SparklePatternAlpha, SparklePatternBeta } from './Shapes';

 type Props = {
-  children: React.ReactNode;
-  size?: number;
-  opacity?: number;
-  repeatCount?: number;
+    children: React.ReactNode;
+    size?: number;
+    opacity?: number;
+    repeatCount?: number;
 };

 const SparkleContainer = styled.div`
-  position: relative;
+    position: relative;
 `;

 type EffectProps = {
-  effectSize: Props["size"];
-  effectOpacity: Props["opacity"];
+    effectSize: Props['size'];
+    effectOpacity: Props['opacity'];
 };

 const SparkleEffect = styled.div<EffectProps>`
-  position: absolute;
-  top: ${(props) => props.effectSize}px;
-  bottom: ${(props) => props.effectSize}px;
-  left: ${(props) => props.effectSize}px;
-  right: ${(props) => props.effectSize}px;
-  display: flex;
-  justify-content: space-between;
-  z-index: 5;
-  opacity: ${(props) => props.effectOpacity};
-  pointer-events: none;
+    position: absolute;
+    top: ${(props) => props.effectSize}px;
+    bottom: ${(props) => props.effectSize}px;
+    left: ${(props) => props.effectSize}px;
+    right: ${(props) => props.effectSize}px;
+    display: flex;
+    justify-content: space-between;
+    z-index: 5;
+    opacity: ${(props) => props.effectOpacity};
+    pointer-events: none;
 `;

 export const SparkleOverlay = (props: Props) => (
-  <SparkleContainer>
-    <SparkleEffect
-      effectSize={props.size || 0}
-      effectOpacity={props.opacity || 1}
-    >
-      <SparklePatternAlpha
-        repeatCount={props.repeatCount}
-        height="100%"
-        strokeColor={palette.gold400}
-      />
-      <SparklePatternBeta
-        repeatCount={props.repeatCount}
-        height="100%"
-        strokeColor={palette.gold400}
-      />
-    </SparkleEffect>
-    {props.children}
-  </SparkleContainer>
+    <SparkleContainer>
+        <SparkleEffect effectSize={props.size || 0} effectOpacity={props.opacity || 1}>
+            <SparklePatternAlpha
+                repeatCount={props.repeatCount}
+                height="100%"
+                strokeColor={palette.gold400}
+            />
+            <SparklePatternBeta
+                repeatCount={props.repeatCount}
+                height="100%"
+                strokeColor={palette.gold400}
+            />
+        </SparkleEffect>
+        {props.children}
+    </SparkleContainer>
 );
--- a/src/design-system/atoms/tab-view/TabView.stories.tsx
+++ b/src/design-system/atoms/tab-view/TabView.stories.tsx
@ -0,0 +1,24 @@
+import * as React from 'react';
+import { TabView, Tab } from './TabView';
+
+export default {
+    title: 'Atoms/Tab View',
+    argTypes: {
+        tabCount: { control: 'range', min: 1, max: 100 },
+    },
+    args: {
+        tabCount: 10,
+    },
+};
+
+export const ManyTabs = ({ tabCount }) => {
+    const tabs = [...'0'.repeat(tabCount)].reduce(
+        (acc, _, idx) => ({
+            ...acc,
+            [`Tab ${idx + 1}`]: <Tab>{() => <div>tab {idx + 1}</div>}</Tab>,
+        }),
+        {}
+    );
+
+    return <TabView>{tabs}</TabView>;
+};
--- a/src/design-system/atoms/tab-view/TabView.story.tsx
+++ b/src/design-system/atoms/tab-view/TabView.story.tsx
@ -1,37 +0,0 @@
-import * as React from 'react';
-import { atomStories } from 'atoms/atoms.story';
-import { TabView, Tab } from './TabView';
-import { number } from '@storybook/addon-knobs';
-
-const story = atomStories('Tab View', module);
-
-story.add('Multiple Tabs', () => (
-    <TabView>
-        {{
-            'Tab 1': <Tab>{() => <div>tab 1</div>}</Tab>,
-            'Tab 2': <Tab>{() => <div>tab 2</div>}</Tab>,
-        }}
-    </TabView>
-));
-
-story.add('Single Tab', () => (
-    <TabView>
-        {{
-            'Tab 1': <Tab>{() => <div>tab 1</div>}</Tab>,
-        }}
-    </TabView>
-));
-
-story.add('Many Tabs', () => {
-    const amount = number('Tab Count', 10);
-
-    const tabs = [...'0'.repeat(amount)].reduce(
-        (acc, _, idx) => ({
-            ...acc,
-            [`Tab ${idx + 1}`]: <Tab>{() => <div>tab {idx + 1}</div>}</Tab>,
-        }),
-        {}
-    );
-
-    return <TabView>{tabs}</TabView>;
-});
--- a/src/design-system/atoms/tab-view/TabView.styled.ts
+++ b/src/design-system/atoms/tab-view/TabView.styled.ts
@ -1,43 +1,43 @@
-import styled, { css } from "styled-components";
-import { palette } from "roleypoly/src/design-system/atoms/colors";
-import { transitions } from "roleypoly/src/design-system/atoms/timings";
-import { onTablet } from "roleypoly/src/design-system/atoms/breakpoints";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import styled, { css } from 'styled-components';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
+import { transitions } from 'roleypoly/src/design-system/atoms/timings';
+import { onTablet } from 'roleypoly/src/design-system/atoms/breakpoints';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 export const TabViewStyled = styled.div``;

 export const TabTitleRow = styled.div`
-  display: flex;
-  border-bottom: 1px solid ${palette.taupe100};
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
+    display: flex;
+    border-bottom: 1px solid ${palette.taupe100};
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
 `;

 export const TabTitle = styled.div<{ selected: boolean }>`
-  flex: 1;
-  text-align: center;
-  padding: 0.7em 1em;
-  border-bottom: 3px solid transparent;
-  transition: border-color ${transitions.in2out}s ease-in-out,
-    color ${transitions.in2out}s ease-in-out;
-  cursor: pointer;
-  color: ${palette.taupe500};
-  ${(props) =>
-    props.selected
-      ? css`
-          color: unset;
-          border-bottom-color: ${palette.taupe500};
-        `
-      : css`
-          &:hover {
-            border-bottom-color: ${palette.taupe300};
-            color: unset;
-          }
-        `};
-  ${onTablet(css`
-    padding: 0.45em 1em;
-  `)}
+    flex: 1;
+    text-align: center;
+    padding: 0.7em 1em;
+    border-bottom: 3px solid transparent;
+    transition: border-color ${transitions.in2out}s ease-in-out,
+        color ${transitions.in2out}s ease-in-out;
+    cursor: pointer;
+    color: ${palette.taupe500};
+    ${(props) =>
+        props.selected
+            ? css`
+                  color: unset;
+                  border-bottom-color: ${palette.taupe500};
+              `
+            : css`
+                  &:hover {
+                      border-bottom-color: ${palette.taupe300};
+                      color: unset;
+                  }
+              `};
+    ${onTablet(css`
+        padding: 0.45em 1em;
+    `)}
 `;

 export const TabContent = styled.div``;
--- a/src/design-system/atoms/tab-view/TabView.tsx
+++ b/src/design-system/atoms/tab-view/TabView.tsx
@ -7,6 +7,7 @@ export type TabViewProps = {
 };

 type TabProps = {
+    title: string;
    children: () => React.ReactNode;
 };

--- a/src/design-system/atoms/text-input/TextInput.stories.tsx
+++ b/src/design-system/atoms/text-input/TextInput.stories.tsx
@ -1,36 +1,36 @@
-import * as React from "react";
-import { TextInput, TextInputWithIcon } from "./TextInput";
-import { SmallTitle } from "roleypoly/src/design-system/atoms/typography";
-import { FiKey } from "react-icons/fi";
+import * as React from 'react';
+import { TextInput, TextInputWithIcon } from './TextInput';
+import { SmallTitle } from 'roleypoly/src/design-system/atoms/typography';
+import { FiKey } from 'react-icons/fi';

 export default {
-  title: "Atoms/Text Input",
-  argTypes: {
-    placeholder: { control: "text" },
-  },
-  args: {
-    placeholder: "Fill me in!",
-  },
+    title: 'Atoms/Text Input',
+    argTypes: {
+        placeholder: { control: 'text' },
+    },
+    args: {
+        placeholder: 'Fill me in!',
+    },
 };

 export const Common = (args) => (
-  <div>
-    <SmallTitle>TextInput</SmallTitle>
    <div>
-      <TextInput {...args} />
+        <SmallTitle>TextInput</SmallTitle>
+        <div>
+            <TextInput {...args} />
+        </div>
+        <div>
+            <TextInput {...args} disabled />
+        </div>
+        <SmallTitle>TextInputWithIcon</SmallTitle>
+        <div>
+            <TextInputWithIcon icon={<FiKey />} {...args} />
+        </div>
+        <div>
+            <TextInputWithIcon icon={<FiKey />} {...args} disabled />
+        </div>
+        <div>
+            <TextInputWithIcon icon={<FiKey />} {...args} type="password" />
+        </div>
    </div>
-    <div>
-      <TextInput {...args} disabled />
-    </div>
-    <SmallTitle>TextInputWithIcon</SmallTitle>
-    <div>
-      <TextInputWithIcon icon={<FiKey />} {...args} />
-    </div>
-    <div>
-      <TextInputWithIcon icon={<FiKey />} {...args} disabled />
-    </div>
-    <div>
-      <TextInputWithIcon icon={<FiKey />} {...args} type="password" />
-    </div>
-  </div>
 );
--- a/src/design-system/atoms/text-input/TextInput.tsx
+++ b/src/design-system/atoms/text-input/TextInput.tsx
@ -1,83 +1,83 @@
-import * as React from "react";
-import styled from "styled-components";
-import { palette } from "roleypoly/src/design-system/atoms/colors";
+import * as React from 'react';
+import styled from 'styled-components';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';

 const StyledTextInput = styled.input`
-  appearance: none;
-  border: 1px solid ${palette.taupe200};
-  border-radius: 3px;
-  line-height: 163%;
-  padding: 12px 16px;
-  font-size: 1.2rem;
-  background-color: ${palette.taupe300};
-  color: ${palette.grey600};
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-  max-width: 97vw;
+    appearance: none;
+    border: 1px solid ${palette.taupe200};
+    border-radius: 3px;
+    line-height: 163%;
+    padding: 12px 16px;
+    font-size: 1.2rem;
+    background-color: ${palette.taupe300};
+    color: ${palette.grey600};
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    max-width: 97vw;

-  :focus {
-    outline: none;
-    border-color: ${palette.grey100};
-    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.25);
-  }
+    :focus {
+        outline: none;
+        border-color: ${palette.grey100};
+        box-shadow: 1px 0 3px rgba(0, 0, 0, 0.25);
+    }

-  [disabled],
-  :disabled {
-    cursor: not-allowed;
-    color: rgba(255, 255, 255, 0.75);
-    font-style: italic;
-  }
+    [disabled],
+    :disabled {
+        cursor: not-allowed;
+        color: rgba(255, 255, 255, 0.75);
+        font-style: italic;
+    }

-  :hover:not([disabled]) {
-    border-color: ${palette.grey100};
-  }
+    :hover:not([disabled]) {
+        border-color: ${palette.grey100};
+    }

-  ::placeholder {
-    color: ${palette.taupe500};
-  }
+    ::placeholder {
+        color: ${palette.taupe500};
+    }
 `;

 type TextInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  _override?: React.Component;
+    _override?: React.Component;
 };

 export const TextInput = (props: TextInputProps) => {
-  const { ...rest } = props;
-  return <StyledTextInput {...rest} />;
+    const { ...rest } = props;
+    return <StyledTextInput {...rest} />;
 };

 const StyledTextInputWithIcon = styled(StyledTextInput)`
-  padding-left: 36px;
+    padding-left: 36px;
 `;

 const IconContainer = styled.div`
-  position: absolute;
-  left: 12px;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    position: absolute;
+    left: 12px;
+    top: 0;
+    bottom: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 `;

 const IconInputContainer = styled.div`
-  position: relative;
-  width: 100%;
+    position: relative;
+    width: 100%;
 `;

 type TextInputWithIconProps = TextInputProps & {
-  icon: React.ReactNode;
+    icon: React.ReactNode;
 };

 export const TextInputWithIcon = (props: TextInputWithIconProps) => {
-  const { icon, ...rest } = props;
-  return (
-    <IconInputContainer>
-      <IconContainer>{icon}</IconContainer>
-      <StyledTextInputWithIcon {...rest}></StyledTextInputWithIcon>
-    </IconInputContainer>
-  );
+    const { icon, ...rest } = props;
+    return (
+        <IconInputContainer>
+            <IconContainer>{icon}</IconContainer>
+            <StyledTextInputWithIcon {...rest}></StyledTextInputWithIcon>
+        </IconInputContainer>
+    );
 };
--- a/src/design-system/atoms/typist/Typist.stories.tsx
+++ b/src/design-system/atoms/typist/Typist.stories.tsx
@ -1,16 +1,16 @@
-import * as React from "react";
-import { Typist } from "./Typist";
+import * as React from 'react';
+import { Typist } from './Typist';

 export default {
-  title: "Atoms/Typist",
-  component: Typist,
-  args: {
-    charTimeout: 75,
-    resetTimeout: 2000,
-    lines: ["hello world", "and again", "a third", "story time!"],
-  },
+    title: 'Atoms/Typist',
+    component: Typist,
+    args: {
+        charTimeout: 75,
+        resetTimeout: 2000,
+        lines: ['hello world', 'and again', 'a third', 'story time!'],
+    },
 };

 export const Looping = (args) => {
-  return <Typist {...args} />;
+    return <Typist {...args} />;
 };
--- a/src/design-system/atoms/typist/Typist.tsx
+++ b/src/design-system/atoms/typist/Typist.tsx
@ -1,37 +1,37 @@
-import * as React from "react";
+import * as React from 'react';

 type TypistProps = {
-  resetTimeout: number;
-  charTimeout: number;
-  lines: string[];
+    resetTimeout: number;
+    charTimeout: number;
+    lines: string[];
 };

 export const Typist = (props: TypistProps) => {
-  const [outputText, setOutputText] = React.useState("");
-  const [currentLine, setCurrentLine] = React.useState(0);
+    const [outputText, setOutputText] = React.useState('');
+    const [currentLine, setCurrentLine] = React.useState(0);

-  React.useEffect(() => {
-    const fullLine = props.lines[currentLine];
+    React.useEffect(() => {
+        const fullLine = props.lines[currentLine];

-    if (outputText === fullLine) {
-      const timeout = setTimeout(() => {
-        setOutputText("");
-        setCurrentLine((currentLine + 1) % props.lines.length);
-      }, props.resetTimeout);
+        if (outputText === fullLine) {
+            const timeout = setTimeout(() => {
+                setOutputText('');
+                setCurrentLine((currentLine + 1) % props.lines.length);
+            }, props.resetTimeout);

-      return () => {
-        clearTimeout(timeout);
-      };
-    }
+            return () => {
+                clearTimeout(timeout);
+            };
+        }

-    const timeout = setTimeout(() => {
-      setOutputText(fullLine.slice(0, outputText.length + 1));
-    }, props.charTimeout);
+        const timeout = setTimeout(() => {
+            setOutputText(fullLine.slice(0, outputText.length + 1));
+        }, props.charTimeout);

-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [currentLine, outputText]);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [currentLine, outputText]);

-  return <>{outputText}</>;
+    return <>{outputText}</>;
 };
--- a/src/design-system/atoms/typography/typography.stories.tsx
+++ b/src/design-system/atoms/typography/typography.stories.tsx
@ -1,109 +1,109 @@
-import * as React from "react";
-import * as typography from "./typography";
-import styled from "styled-components";
+import * as React from 'react';
+import * as typography from './typography';
+import styled from 'styled-components';

 export default {
-  title: "Atoms/Typography",
+    title: 'Atoms/Typography',
 };

 const Text = () => (
-  <>
-    <p>
-      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et facilis alias
-      placeat cumque sapiente ad delectus omnis quae. Reiciendis quibusdam
-      deserunt repellat. Exercitationem modi incidunt autem nemo tempore eaque
-      soluta.
-    </p>
-    <p>
-      帯カノ需混モイ一録43旧百12共ドレ能生ホクユ禁度ヨ材図クほはそ護関ラト郵張エノヨ議件クめざ県読れみとぶ論税クょンど慎転リつぎみ松期ほへド.
-      縦投記ふで覧速っだせあ過先課フ演無ぎぱべ習併相ーす気6元ゆる領気希ぎ投代ラ我関レ森郎由系堂ず.
-      読ケリ夜指ーっトせ認平引ウシ間花ヱクム年6台ぐ山婦ラスエ子著コア掲中ロ像属戸メソユ職諏ルど詐児題たに書希ク幕値長ラそめド.
-    </p>
-    <p>
-      🔸🐕🔺💱🎊👽🐛 👨📼🕦📞 👱👆🍗👚🌈 🔝🔟🍉🔰🍲🏁🕗 🎡🐉🍲📻🔢🔄
-      💟💲🍻💜💩🔼 🎱🌸📛👫🌻 🗽🕜🐥👕🍈. 🐒🍚🔓📱🏦 🎦🌑🔛💙👣🔚 🔆🗻🌿🎳📲🍯
-      🌞💟🎌🍌 🔪📯🐎💮 👌👭🎋🏉🏰 📓🕃🎂💉🔩 🐟🌇👺🌊🌒 📪👅🍂🍁 🌖🐮🔽🌒📊.
-      🔤🍍🌸📷🎴 💏🍌📎👥👉👒 👝💜🔶🍣 💨🗼👈💉💉💰 🍐🕖🌰👝🕓🏊🐕 🏀📅📼📒
-      🐕🌈👋
-    </p>
-  </>
+    <>
+        <p>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et facilis alias
+            placeat cumque sapiente ad delectus omnis quae. Reiciendis quibusdam deserunt
+            repellat. Exercitationem modi incidunt autem nemo tempore eaque soluta.
+        </p>
+        <p>
+            帯カノ需混モイ一録43旧百12共ドレ能生ホクユ禁度ヨ材図クほはそ護関ラト郵張エノヨ議件クめざ県読れみとぶ論税クょンど慎転リつぎみ松期ほへド.
+            縦投記ふで覧速っだせあ過先課フ演無ぎぱべ習併相ーす気6元ゆる領気希ぎ投代ラ我関レ森郎由系堂ず.
+            読ケリ夜指ーっトせ認平引ウシ間花ヱクム年6台ぐ山婦ラスエ子著コア掲中ロ像属戸メソユ職諏ルど詐児題たに書希ク幕値長ラそめド.
+        </p>
+        <p>
+            🔸🐕🔺💱🎊👽🐛 👨📼🕦📞 👱👆🍗👚🌈 🔝🔟🍉🔰🍲🏁🕗 🎡🐉🍲📻🔢🔄 💟💲🍻💜💩🔼
+            🎱🌸📛👫🌻 🗽🕜🐥👕🍈. 🐒🍚🔓📱🏦 🎦🌑🔛💙👣🔚 🔆🗻🌿🎳📲🍯 🌞💟🎌🍌 🔪📯🐎💮
+            👌👭🎋🏉🏰 📓🕃🎂💉🔩 🐟🌇👺🌊🌒 📪👅🍂🍁 🌖🐮🔽🌒📊. 🔤🍍🌸📷🎴 💏🍌📎👥👉👒
+            👝💜🔶🍣 💨🗼👈💉💉💰 🍐🕖🌰👝🕓🏊🐕 🏀📅📼📒 🐕🌈👋
+        </p>
+    </>
 );

 const swatches: [string, string | undefined, string][] = [
-  ["text900", "LargeTitle", "Used for large titles."],
-  ["text800", "MediumTitle", "Used for medium titles."],
-  ["text700", "SmallTitle", "Used for small titles."],
-  ["text600", "AccentTitle", "Used for accenting titles."],
-  ["text500", "LargeText", "Used for general large font text blocks."],
-  ["text400", "Text", "Used for less important font text blocks."],
-  ["text300", undefined, "Used for smaller UI elements."],
-  ["text200", "AmbientLarge", "Used for ambient text."],
-  ["text100", "AmbientSmall", "Used for ambient text."],
+    ['text900', 'LargeTitle', 'Used for large titles.'],
+    ['text800', 'MediumTitle', 'Used for medium titles.'],
+    ['text700', 'SmallTitle', 'Used for small titles.'],
+    ['text600', 'AccentTitle', 'Used for accenting titles.'],
+    ['text500', 'LargeText', 'Used for general large font text blocks.'],
+    ['text400', 'Text', 'Used for less important font text blocks.'],
+    ['text300', undefined, 'Used for smaller UI elements.'],
+    ['text200', 'AmbientLarge', 'Used for ambient text.'],
+    ['text100', 'AmbientSmall', 'Used for ambient text.'],
 ];

 const Section = styled.section`
-  margin: 3.26rem;
+    margin: 3.26rem;
 `;

 const swatch = (mixin: typeof typography.text900) =>
-  styled.p`
-    ${mixin}
-  `;
+    styled.p`
+        ${mixin}
+    `;

 const Usage = styled.code`
-  ${typography.text300}
+    ${typography.text300}
 `;

 const Description = styled.i`
-  ${typography.text200}
+    ${typography.text200}
 `;

 export const Sizes = () => (
-  <div>
-    {swatches.map(([mixin, componentName, usage], i) => {
-      const Component = swatch((typography as any)[mixin]);
-      return (
-        <Section key={i}>
-          <div>
-            <Component>The quick brown fox jumped over the lazy dog.</Component>
-          </div>
-          <div>
-            <Usage>
-              <code>
-                @{mixin} {componentName && `<${componentName} />`}
-              </code>
-            </Usage>
-          </div>
-          <div>
-            <Description>{usage}</Description>
-          </div>
-        </Section>
-      );
-    })}
-  </div>
+    <div>
+        {swatches.map(([mixin, componentName, usage], i) => {
+            const Component = swatch((typography as any)[mixin]);
+            return (
+                <Section key={i}>
+                    <div>
+                        <Component>
+                            The quick brown fox jumped over the lazy dog.
+                        </Component>
+                    </div>
+                    <div>
+                        <Usage>
+                            <code>
+                                @{mixin} {componentName && `<${componentName} />`}
+                            </code>
+                        </Usage>
+                    </div>
+                    <div>
+                        <Description>{usage}</Description>
+                    </div>
+                </Section>
+            );
+        })}
+    </div>
 );

 const SpacingHead = styled.p`
-  ${typography.text700}
+    ${typography.text700}
 `;

 const SpacingSection = styled(Section)`
-  max-width: 50vw;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+    max-width: 50vw;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
 `;

 export const Spacing = () => (
-  <div>
-    {swatches.map(([mixin], i) => {
-      const Component = swatch((typography as any)[mixin]);
-      return (
-        <SpacingSection key={i}>
-          <SpacingHead>@{mixin}</SpacingHead>
-          <Component>
-            <Text />
-          </Component>
-        </SpacingSection>
-      );
-    })}
-  </div>
+    <div>
+        {swatches.map(([mixin], i) => {
+            const Component = swatch((typography as any)[mixin]);
+            return (
+                <SpacingSection key={i}>
+                    <SpacingHead>@{mixin}</SpacingHead>
+                    <Component>
+                        <Text />
+                    </Component>
+                </SpacingSection>
+            );
+        })}
+    </div>
 );
--- a/src/design-system/atoms/typography/typography.tsx
+++ b/src/design-system/atoms/typography/typography.tsx
@ -1,88 +1,88 @@
-import styled, { css } from "styled-components";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import styled, { css } from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 const reset = css`
-  margin: 0;
-  line-height: 163%;
-  padding: 0;
-  font-weight: 400;
-  text-decoration: none;
-  font-size-adjust: 0.75;
+    margin: 0;
+    line-height: 163%;
+    padding: 0;
+    font-weight: 400;
+    text-decoration: none;
+    font-size-adjust: 0.75;
 `;

 export const text900 = css`
-  ${reset}
-  font-size: 2.3rem;
+    ${reset}
+    font-size: 2.3rem;
 `;

 export const text800 = css`
-  ${reset}
-  font-size: 2rem;
+    ${reset}
+    font-size: 2rem;
 `;

 export const text700 = css`
-  ${reset}
-  font-size: 1.7rem;
+    ${reset}
+    font-size: 1.7rem;
 `;

 export const text600 = css`
-  ${reset}
-  font-size: 1.4rem;
+    ${reset}
+    font-size: 1.4rem;
 `;

 export const text500 = css`
-  ${reset}
-  font-size: 1.2rem;
+    ${reset}
+    font-size: 1.2rem;
 `;

 export const text400 = css`
-  ${reset}
-  font-size: 1rem;
+    ${reset}
+    font-size: 1rem;
 `;

 export const text300 = css`
-  ${reset}
-  font-size: 0.9rem;
+    ${reset}
+    font-size: 0.9rem;
 `;

 export const text200 = css`
-  ${reset}
-  font-size: 0.7rem;
+    ${reset}
+    font-size: 0.7rem;
 `;

 export const text100 = css`
-  ${reset}
-  font-size: 0.5rem;
+    ${reset}
+    font-size: 0.5rem;
 `;

 export const LargeTitle = styled.span`
-  ${text900}
+    ${text900}
 `;

 export const MediumTitle = styled.span`
-  ${text800}
+    ${text800}
 `;

 export const SmallTitle = styled.span`
-  ${text700}
+    ${text700}
 `;

 export const AccentTitle = styled.span`
-  ${text600}
+    ${text600}
 `;

 export const LargeText = styled.span`
-  ${text500}
+    ${text500}
 `;

 export const Text = styled.span`
-  ${text400}
+    ${text400}
 `;

 export const AmbientLarge = styled.span`
-  ${text200}
+    ${text200}
 `;

 export const AmbientSmall = styled.span`
-  ${text100}
+    ${text100}
 `;
--- a/src/dev-container/README.md
+++ b/src/dev-container/README.md
@ -4,9 +4,9 @@ This package houses the dev-container image.

 It includes:

- go (1.15.2)
- bazel (latest via bazelisk)
- node (latest lts via nvm)
+-   go (1.15.2)
+-   bazel (latest via bazelisk)
+-   node (latest lts via nvm)

 As well as any other tooling within VSCode Dev Containers.

@ -20,5 +20,5 @@ bazel run //srv/dev-container && docker run -it --rm bazel/src/dev-container:dev

 To just use, this is published to two registries. There is no effective difference, except that GitHub's registry requires login, and Docker Hub does not.

- `docker pull roleypoly/dev-container:main`
- `docker pull docker.pkg.github.com/roleypoly/roleypoly/dev-container:main`
+-   `docker pull roleypoly/dev-container:main`
+-   `docker pull docker.pkg.github.com/roleypoly/roleypoly/dev-container:main`
--- a/src/discord-auth/README.md
+++ b/src/discord-auth/README.md
@ -4,18 +4,18 @@ Service for handling Discord OAuth flow.

 ## Responsibilities

- Redirect users to relevant Discord OAuth page w/ state
- Handle redirect from Discord OAuth flow and process the token
- Modify active session to include relevant data
-  - v3: for parity, this is just user data
-  - _vNext: get guilds from oauth and cache_
- _vNext: Source of truth for user guilds_
+-   Redirect users to relevant Discord OAuth page w/ state
+-   Handle redirect from Discord OAuth flow and process the token
+-   Modify active session to include relevant data
+    -   v3: for parity, this is just user data
+    -   _vNext: get guilds from oauth and cache_
+-   _vNext: Source of truth for user guilds_

 ## Boundaries & Services

- **Inbound**
-  - HTTP: /discord-auth/\*
-  - gRPC: DiscordAuthService
- **Outbound**
-  - Redis
-  - gRPC: SessionService
+-   **Inbound**
+    -   HTTP: /discord-auth/\*
+    -   gRPC: DiscordAuthService
+-   **Outbound**
+    -   Redis
+    -   gRPC: SessionService
--- a/src/jstest/index.ts
+++ b/src/jstest/index.ts
@ -1 +1 @@
-console.log("hello world");
+console.log('hello world');
--- a/terraform/app/tags.auto.tfvars.json
+++ b/terraform/app/tags.auto.tfvars.json
@ -1,6 +1,6 @@
 {
-  "deployment_env": {
-    "production": {},
-    "staging": {}
-  }
-}
+    "deployment_env": {
+        "production": {},
+        "staging": {}
+    }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,25 +1,25 @@
 {
-  "compilerOptions": {
-    "target": "es2020" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
-    "module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "es2020",
-      "es2015.collection",
-      "es2015.iterable",
-      "es2015.core"
-    ],
-    "jsx": "react",
-    "baseUrl": ".",
-    "strict": true,
-    "esModuleInterop": true,
-    "isolatedModules": true,
-    "allowSyntheticDefaultImports": true,
-    "skipLibCheck": true,
-    "declaration": true,
-    "paths": {
-      "roleypoly/*": ["*"]
+    "compilerOptions": {
+        "target": "es2020" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+        "module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "es2020",
+            "es2015.collection",
+            "es2015.iterable",
+            "es2015.core"
+        ],
+        "jsx": "react",
+        "baseUrl": ".",
+        "strict": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "skipLibCheck": true,
+        "declaration": true,
+        "moduleResolution": "node",
+        "paths": {
+            "roleypoly/*": ["*"]
+        }
    }
-  }
 }
--- a/vercel.json
+++ b/vercel.json
@ -1,12 +1,12 @@
 {
-  "version": 2,
-  "builds": [
-    {
-      "src": "package.json",
-      "use": "@vercel/static-build",
-      "config": {
-        "distDir": "storybook-static"
-      }
-    }
-  ]
-}
+    "version": 2,
+    "builds": [
+        {
+            "src": "package.json",
+            "use": "@vercel/static-build",
+            "config": {
+                "distDir": "storybook-static"
+            }
+        }
+    ]
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -1240,6 +1240,26 @@
  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==

+"@hapi/accept@5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-5.0.1.tgz#068553e867f0f63225a506ed74e899441af53e10"
+  integrity sha512-fMr4d7zLzsAXo28PRRQPXR1o2Wmu+6z+VY1UzDp0iFo13Twj8WePakwXBiqn3E1aAlTpSNzCXdnnQXFhst8h8Q==
+  dependencies:
+    "@hapi/boom" "9.x.x"
+    "@hapi/hoek" "9.x.x"
+
+"@hapi/boom@9.x.x":
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/@hapi/boom/-/boom-9.1.0.tgz#0d9517657a56ff1e0b42d0aca9da1b37706fec56"
+  integrity sha512-4nZmpp4tXbm162LaZT45P7F7sgiem8dwAh2vHWT6XX24dozNjGMg6BvKCRvtCUcmcXqeMIUqWN8Rc5X8yKuROQ==
+  dependencies:
+    "@hapi/hoek" "9.x.x"
+
+"@hapi/hoek@9.x.x":
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.0.tgz#6c9eafc78c1529248f8f4d92b0799a712b6052c6"
+  integrity sha512-i9YbZPN3QgfighY/1X1Pu118VUz2Fmmhd6b2n0/O8YVgGGfw0FbUYoA97k7FkpGJ+pLCFEDLUmAPPV4D1kpeFw==
+
 "@icons/material@^0.2.4":
  version "0.2.4"
  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
@ -1352,20 +1372,20 @@
    call-me-maybe "^1.0.1"
    glob-to-regexp "^0.3.0"

-"@next/env@9.5.4":
-  version "9.5.4"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.4.tgz#950f3370151a940ecac6e7e19cf125e6113e101e"
-  integrity sha512-uGnUO68/u9C8bqHj5obIvyGRDqe/jh1dFSLx03mJmlESjcCmV4umXYJOnt3XzU1VhVntSE+jUZtnS5bjYmmLfQ==
+"@next/env@9.5.5":
+  version "9.5.5"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.5.tgz#db993649ec6e619e34a36de90dc2baa52fc5280f"
+  integrity sha512-N9wdjU6XoqLqNQWtrGiWtp1SUuJsYK1cNrZ24A6YD+4w5CNV5SkZX6aewKZCCLP5Y8UNfTij2FkJiSYUfBjX8g==

-"@next/polyfill-module@9.5.4":
-  version "9.5.4"
-  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.4.tgz#35ea31ce5f6bbf0ac31aac483b60d4ba17a79861"
-  integrity sha512-GA2sW7gs33s7RGPFqkMiT9asYpaV/Hhw9+XM9/UlPrkNdTaxZWaPa2iHgmqJ7k6OHiOmy+CBLFrUBgzqKNhs3Q==
+"@next/polyfill-module@9.5.5":
+  version "9.5.5"
+  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.5.tgz#d9c65679a66664ab4859078f58997113c9d01f10"
+  integrity sha512-itqYFeHo3yN4ccpHq2uNFC2UVQm12K6DxUVwYdui9MJiiueT0pSGb2laYEjf/G5+vVq7M2vb+DkjkOkPMBVfeg==

-"@next/react-dev-overlay@9.5.4":
-  version "9.5.4"
-  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.4.tgz#7d88a710d23021020cca213bc77106df18950b2b"
-  integrity sha512-tYvNmOQ0inykSvcimkTiONMv4ZyFB2G2clsy9FKLLRZ2OA+Jiov6T7Pq6YpKbBwTLu/BQGVc7Qn4BZ5CDHR8ig==
+"@next/react-dev-overlay@9.5.5":
+  version "9.5.5"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.5.tgz#11b36813d75c43b7bd9d5e478bded1ed5391d03a"
+  integrity sha512-B1nDANxjXr2oyohv+tX0OXZTmJtO5qEWmisNPGnqQ2Z32IixfaAgyNYVuCVf20ap6EUz5elhgNUwRIFh/e26mQ==
  dependencies:
    "@babel/code-frame" "7.10.4"
    ally.js "1.4.1"
@ -1378,10 +1398,10 @@
    stacktrace-parser "0.1.10"
    strip-ansi "6.0.0"

-"@next/react-refresh-utils@9.5.4":
-  version "9.5.4"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.4.tgz#3bfe067f0cfc717f079482d956211708c9e81126"
-  integrity sha512-TPhEiYxK5YlEuzVuTzgZiDN7SDh4drvUAqsO9Yccd8WLcfYqOLRN2fCALremW5mNLAZQZW3iFgW8PW8Gckq4EQ==
+"@next/react-refresh-utils@9.5.5":
+  version "9.5.5"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.5.tgz#fe559b5ca51c038cb7840e0d669a6d7ef01fe4eb"
+  integrity sha512-Gz5z0+ID+KAGto6Tkgv1a340damEw3HG6ANLKwNi5/QSHqQ3JUAVxMuhz3qnL54505I777evpzL89ofWEMIWKw==

 "@nodelib/fs.stat@^1.1.2":
  version "1.1.3"
@ -2338,10 +2358,10 @@
  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==

-"@types/styled-components@5.1.3":
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.3.tgz#6fab3d9c8f7d9a15cbb89d379d850c985002f363"
-  integrity sha512-HGpirof3WOhiX17lb61Q/tpgqn48jxO8EfZkdJ8ueYqwLbK2AHQe/G08DasdA2IdKnmwOIP1s9X2bopxKXgjRw==
+"@types/styled-components@5.1.4":
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.4.tgz#11f167dbde268635c66adc89b5a5db2e69d75384"
+  integrity sha512-78f5Zuy0v/LTQNOYfpH+CINHpchzMMmAt9amY2YNtSgsk1TmlKm8L2Wijss/mtTrsUAVTm2CdGB8VOM65vA8xg==
  dependencies:
    "@types/hoist-non-react-statics" "*"
    "@types/react" "*"
@ -7439,10 +7459,10 @@ next-tick@~1.0.0:
  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
  integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=

-next@^9.5.4:
-  version "9.5.4"
-  resolved "https://registry.yarnpkg.com/next/-/next-9.5.4.tgz#3c6aa3fd38ff1711e956ea2b6833475e0262ec35"
-  integrity sha512-dicsJSxiUFcRjeZ/rNMAO3HS5ttFFuRHhdAn5g7lHnWUZ3MnEX4ggBIihaoUr6qu2So9KoqUPXpS91MuSXUmBw==
+next@^9.5.5:
+  version "9.5.5"
+  resolved "https://registry.yarnpkg.com/next/-/next-9.5.5.tgz#37a37095e7c877ed6c94ba82e34ab9ed02b4eb33"
+  integrity sha512-KF4MIdTYeI6YIGODNw27w9HGzCll4CXbUpkP6MNvyoHlpsunx8ybkQHm/hYa7lWMozmsn58LwaXJOhe4bSrI0g==
  dependencies:
    "@ampproject/toolbox-optimizer" "2.6.0"
    "@babel/code-frame" "7.10.4"
@ -7462,10 +7482,11 @@ next@^9.5.4:
    "@babel/preset-typescript" "7.10.4"
    "@babel/runtime" "7.11.2"
    "@babel/types" "7.11.5"
-    "@next/env" "9.5.4"
-    "@next/polyfill-module" "9.5.4"
-    "@next/react-dev-overlay" "9.5.4"
-    "@next/react-refresh-utils" "9.5.4"
+    "@hapi/accept" "5.0.1"
+    "@next/env" "9.5.5"
+    "@next/polyfill-module" "9.5.5"
+    "@next/react-dev-overlay" "9.5.5"
+    "@next/react-refresh-utils" "9.5.5"
    ast-types "0.13.2"
    babel-plugin-transform-define "2.0.0"
    babel-plugin-transform-react-remove-prop-types "0.4.24"