docs: adds first version of REST docs (#116)

2020-09-30 21:17:22 +02:00
parent 1da1ebbb5e
commit 47e2ad2952
29 changed files with 14653 additions and 17 deletions
--- a/docs/api/store/carts.md
+++ b/docs/api/store/carts.md
@@ -1,9 +0,0 @@
-POST /carts
-GET /carts/:id
-POST /carts/:id
-
-POST /carts/:id/line-items
-POST /carts/:id/line-items/:line_id
-
-GET /carts/:id/shipping-options
-POST /carts/:id/payment-sessions
--- a/docs/api/store/endpoints/carts.yaml
+++ b/docs/api/store/endpoints/carts.yaml
@@ -0,0 +1,317 @@
+title: Carts
+domain: store
+route: /carts
+description: >
+  A Cart is the preliminary step to an Order. The Cart holds a collection of 
+  items that the customer wishes to purchase, along with the customer's
+  preferred payment and shipping method. 
+endpoints: 
+  - path: /
+    method: POST
+    title: Create a Cart
+    body:
+      - name: region_id
+        type: String
+        required: false
+        description: Id of the region to associate the cart with.
+      - name: items
+        type: List
+        required: false
+        description: List of objects with `variantId` and `quantity`.
+    description: >
+      Creates a Cart within the given region and with the initial items. If no
+      `region_id` is provided the cart will be associated with the first Region
+      available. If no items are provided the cart will be empty after creation.
+      If a user is logged in the cart's customer id and email will be set.
+  - path: /:id
+    method: GET
+    title: Retrieve a Cart
+    params:
+      - name: id
+        type: String
+        description: Id of the cart.
+    description: >
+      Retrieves an existing cart.
+  - path: /:id
+    method: POST
+    title: Update a Cart
+    params: 
+      - name: id
+        type: String
+        description: Id of the cart.
+    body:
+      - name: region_id
+        type: String
+        description: Id of a region.
+      - name: email
+        type: String
+        description: >
+          Customer's email where they will receive transactional emails etc.
+      - name: billing_address
+        type: Address
+        description: >
+          The billing address for the order.
+      - name: shipping_address
+        type: Address
+        description: >
+          The shipping address for the order. Will be sent to the fulfillment
+          provider when the items are ready to be shipped.
+      - name: discounts
+        type: List
+        description: >
+          A list of objects with `code` that represents a discount code to be
+          applied to the cart.
+    description: >
+      Updates an existing cart with the provided data. Updating the `region_id`
+      will change the prices of the items in the cart to match the prices 
+      defined for the region. You can apply multiple discounts at once by 
+      calling the endpoint with an array of discounts.
+  - path: /:id/line-items
+    method: POST
+    title: Add a Line Item to a Cart
+    params: 
+      - name: id
+        type: String
+    body:
+      - name: variant_id
+        type: String
+        required: true
+        description: The id of the variant that should be added to the cart.
+      - name: quantity
+        type: Integer
+        required: true
+        description: >
+          The quantity of the variant to add to the cart. Must be
+          greater than 0.
+      - name: metadata
+        type: Object
+        description: >
+          Optional metadata that may be needed for display purposes or other 
+          functionality.
+  - path: /:id/line-items/:line_id
+    method: POST
+    title: Update a Line Item
+    params:
+      - name: id
+        type: String
+        description: Id of the cart to update.
+      - name: line_id
+        type: String
+        description: Id of the line to update.
+    body:
+      - name: quantity
+        type: Integer
+        description: The desired quantity of the line item.
+    description: >
+      Updates the quantity of a line item. If the variant associated with the 
+      line item is stock managed, the endpoint will respond with an error when
+      the inventory level cannot fulfill the desired quantity.
+  - path: /:id/line-items/:line_id
+    method: DELETE
+    title: Remove a Line Item
+    params:
+      - name: id
+        type: String
+        description: Id of the cart.
+      - name: line_id
+        type: String
+        description: Id of the line item to remove.
+    description: >
+      Removes a the given line item from the cart.
+  - path: /:id/discounts/:code
+    method: DELETE
+    title: Remove a Discount Code
+    params: 
+      - name: id
+        type: String
+        description: Id of the cart.
+      - name: code
+        type: String
+        description: The discount code to remove
+    description: Removes a discount code from the cart.
+  - path: /:id/payment-sessions
+    method: POST
+    title: Initialize Payment Sessions for a Cart
+    params: 
+      - name: id
+        type: String
+        description: Id of the cart.
+    description: >
+      Initializes the payment sessions that can be used to pay for the items of
+      the cart. This is usually called when a customer proceeds to checkout.
+  - path: /:id/payment-sessions/:provider_id
+    method: DELETE
+    title: Delete a Payment Session
+    params:
+      - name: id
+        type: String
+        description: Id of the cart.
+      - name: provider_id
+        type: String
+        description: >
+          Id of the provider that created the payment session to remove.
+    description: >
+      Deletes a payment session. Note that this will initialize a new payment
+      session with the provider. This is usually used if the payment session
+      reaches a state that cannot be recovered from.
+  - path: /:id/payment-method
+    method: POST
+    title: Set the Payment Method for a Cart
+    params: 
+      - name: id
+        type: String
+        description: Id of the cart.
+    body: 
+      - name: provider_id
+        type: String
+        required: true
+        description: >
+          Id of the provider that offers the payment method.
+      - name: data
+        type: Dictionary
+        description: >
+          Used to hold any data that the payment method may need to process the
+          payment. The requirements of `data` will be different across payment 
+          methods, and you should look at your installed payment providers to
+          find out what to send.
+    description: >
+      Adds or updates the payment method that will be used to pay for the items
+      in the cart. The payment is not processed until the payment provider's 
+      authorization functionality is called. You should consult with your 
+      installed payment plugins to find information about how to authorize a 
+      payment.
+  - path: /:id/shipping-methods
+    method: POST
+    title: Add a Shipping Method to a Cart
+    params:
+      - name: id
+        type: String
+        description: Id of the cart.
+    body: 
+      - name: option_id
+        type: String
+        required: true
+        description: The id of the shipping option to use.
+      - name: data
+        type: Dictionary
+        description: >
+          Used to hold any data that the shipping method may need to process the 
+          fulfillment of the order. Look at the documentation for your installed
+          fulfillment providers to find out what to send.
+    description: >
+      Adds a shipping method to the cart. 
+response: |
+  {
+    "cart": {
+      "_id": "5f68a234d694d000217a4d64",
+      "customer_id": "",
+      "region_id": "5f4cd57a5d1e3200214c0e4e",
+      "email": "",
+      "shipping_address": {
+        "_id": "5f68a234d694d000217a4d65",
+        "country_code": "US"
+      },
+      "items": [
+        {
+          "is_giftcard": false,
+          "has_shipping": false,
+          "returned": false,
+          "fulfilled": false,
+          "fulfilled_quantity": 0,
+          "returned_quantity": 0,
+          "_id": "5f72f79c2834b400216b1a54",
+          "title": "Line Item",
+          "description": "240x260",
+          "quantity": 1,
+          "thumbnail": "https://example-thumbnail.com",
+          "content": {
+            "unit_price": 303.2,
+            "variant": {
+                "_id": "5f4cf81a2ac41700211f6e63",
+                "barcode": "",
+                "image": "",
+                "published": true,
+                "inventory_quantity": 11,
+                "allow_backorder": false,
+                "manage_inventory": true,
+                "title": "1234",
+                "sku": "SKU1234",
+                "ean": "1111111111111",
+                "options": [
+                    {
+                        "_id": "5f4cf81a2ac41700211f6e64",
+                        "value": "1234",
+                        "option_id": "5f4cf81a2ac41700211f6e62"
+                    }
+                ],
+                "prices": [
+                    {
+                        "_id": "5f4cf81a2ac41700211f6e65",
+                        "currency_code": "SEK",
+                        "amount": 3180
+                    },
+                    {
+                        "_id": "5f4cf81a2ac41700211f6e66",
+                        "currency_code": "EUR",
+                        "amount": 303.2
+                    },
+                    {
+                        "_id": "5f4cf81a2ac41700211f6e67",
+                        "currency_code": "DKK",
+                        "amount": 2260
+                    }
+                ],
+                "metadata": {
+                    "origin_country": "Portugal"
+                }
+            },
+            "product": {
+                "_id": "5f4cf81a2ac41700211f6e61",
+                "description": "100% Organic",
+                "tags": "",
+                "is_giftcard": false,
+                "images": [],
+                "thumbnail": "https://example-thumbnail.com",
+                "variants": [
+                    "5f4cf81a2ac41700211f6e63"
+                ],
+                "published": false,
+                "title": "Line Item",
+                "options": [
+                    {
+                        "values": [],
+                        "_id": "5f4cf81a2ac41700211f6e62",
+                        "title": "Size"
+                    }
+                ]
+            },
+            "quantity": 1
+          }
+        }
+      ],
+      "discounts": [],
+      "payment_sessions": [],
+      "shipping_methods": [],
+      "shipping_total": 0,
+      "discount_total": 0,
+      "tax_total": 0,
+      "subtotal": 303.2,
+      "total": 303.2,
+      "region": {
+          "_id": "5f4cd57a5d1e3200214c0e4e",
+          "tax_rate": 0,
+          "countries": [
+              "US"
+          ],
+          "payment_providers": [
+              "stripe"
+          ],
+          "fulfillment_providers": [
+              "shiphero"
+          ],
+          "name": "United States",
+          "currency_code": "EUR",
+          "tax_code": "ABR"
+      }
+    }
+  }
--- a/docs/api/store/endpoints/customers.yaml
+++ b/docs/api/store/endpoints/customers.yaml
@@ -0,0 +1,166 @@
+title: Customers
+domain: store
+route: /customers
+description: >
+  Customers can create a login to view Order history and manage details. 
+  Customers must have unique emails.
+endpoints: 
+  - path: /
+    method: POST
+    title: Create a Customer Login
+    body:
+      - name: email
+        type: String
+        required: true
+        description: The Customer's email; must be unique.
+      - name: first_name
+        type: String
+        required: true
+        description: The Customer's first name.
+      - name: last_name
+        type: String
+        required: true
+        description: The Customer's last name.
+      - name: password
+        type: String
+        required: true
+        description: The Customer's desired password.
+      - name: phone
+        type: String
+        description: The customer's phone number.
+    description: >
+      Creates a customer profile with the given details. If the email has been
+      used on previous orders the newly created Customer profile will be able to
+      view the order history associated with this email.
+
+  - path: /password-reset
+    method: POST
+    title: Reset Customer password
+    body:
+      - name: email
+        type: String
+        required: true
+        description: The email of the Customer.
+      - name: token
+        type: String
+        required: true
+        description: > 
+          The token that will be used to reset the password. Should be generated
+          with a prior call to `/password-token`.
+      - name: password
+        type: String
+        required: true
+        description: > 
+          The new password to authenticate the user with.
+    description: >
+      Resets a customer's password. The reset call requires a valid token 
+
+  - path: /password-token
+    method: POST
+    title: Request Customer password reset token
+    body:
+      - name: email
+        type: String
+        required: true
+        description: The email of the Customer profile to reset password for.
+    description: >
+      Generates a reset password token. The token should be sent to the customer
+      via an email provider. Note that this doesn't send any emails it only 
+      generates the token and informs listeners to
+      `customer.password_token_generated` that the token was created.
+
+
+  - path: /:id
+    method: GET
+    title: Retrieve Customer
+    params: 
+      - name: id
+        type: String
+        description: The id of the Customer to retrieve.
+    description: >
+      Retrieves the customer's details. The Customer identified by `id` must be
+      authenticated.
+
+  - path: /:id
+    method: POST
+    title: Update Customer details
+    params: 
+      - name: id
+        type: String
+        description: The id of the customer.
+    body:
+      - name: first_name
+        type: String
+        description: The Customer's first name.
+      - name: last_name
+        type: String
+        description: The Customer's last name.
+      - name: password
+        type: String
+        description: >
+          The Customer's password. Will create a hashed value for the database.
+      - name: phone
+        type: String
+        description: The Customer's phone number.
+    description: >
+      Updates the customer's details. The customer identified by `id` must be
+      authenticated in order to call this endpoint.
+
+  - path: /:id/addresses
+    method: POST
+    title: Create a new Customer address
+    params:
+      - name: id
+        type: String
+        description: The id of the Customer.
+    body:
+      - name: address
+        type: Address
+        description: The address to add.
+    description: >
+      Adds an address to the customer's saved addresses. The customer must be 
+      authenticated prior to making this call.
+
+  - path: /:id/addresses/:address_id
+    method: POST
+    title: Update a Customer address
+    params:
+      - name: id
+        type: String
+        description: The id of the Customer.
+      - name: address_id
+        type: String
+        description: The id of the saved address to update.
+    body:
+      - name: address
+        type: Address
+        description: The address to update.
+    description: >
+      Updates a saved customer address. The customer must be authenticated prior
+      to making this call.
+
+  - path: /:id/payment-methods
+    method: GET
+    title: Retrieve Customer's saved payment methods
+    params: 
+      - name: id
+        type: String
+        description: The id of the customer.
+    description: >
+      Asks each payment provider for saved payment methods if any exist. This 
+      will only return in methods in the case where the payment provider allows
+      payment methods to be saved. The customer must be authenticated in order 
+      to call this endpoint.
+
+response: |
+  {
+    "customer": {
+      "_id": "5ea80c76d9549d0006c21da7",
+      "email": "mrs@potato.com",
+      "orders": [],
+      "shipping_addresses": [],
+      "first_name": "Potato",
+      "last_name": "Head",
+      "metadata": {}
+    }
+  }
--- a/docs/api/store/endpoints/orders.yaml
+++ b/docs/api/store/endpoints/orders.yaml
@@ -0,0 +1,235 @@
+title: Orders
+domain: store
+route: /orders
+description: >
+  An Order represents a selection of items purchased and holds information about
+  how the items have been purchased and will be fulfilled. 
+endpoints:
+  - path: /:id
+    method: GET
+    title: Retrieve an Order
+    params: 
+      - name: id
+        type: String
+        description: The id of the order.
+    description: >
+      Retrieves an order. 
+  - path: /
+    method: POST
+    title: Creates an Order
+    body:
+      - name: cartId
+        type: String
+        description: Id of the cart from which the order should be created.
+    description: >
+      Creates an order from a cart.
+
+response: |
+  {
+    "_id": "5f65c961395b3e0021d8f994",
+    "status": "pending",
+    "fulfillment_status": "not_fulfilled",
+    "payment_status": "awaiting",
+    "display_id": "1000",
+    "payment_method": {
+      "_id": "5f65c961395b3e0021d8f995",
+      "provider_id": "provider",
+      "data": {
+        "id": "importantForPaymentProvider",
+        "more": "information"
+      }
+    },
+    "discounts": [
+      {
+        "regions": [
+          "5f40ce8f7743b30021337e2b",
+          "5f4788eff847d30021ac331d",
+          "5f4cb9a07435de0021c69f09"
+        ],
+        "_id": "5f626102bd79500021ea17a3",
+        "is_giftcard": false,
+        "usage_count": 6,
+        "disabled": false,
+        "code": "TEST",
+        "discount_rule": {
+          "valid_for": [],
+          "_id": "5f626102bd79500021ea17a4",
+          "description": "TEST",
+          "value": 99,
+          "type": "percentage",
+          "allocation": "total"
+        }
+      }
+    ],
+    "shipping_methods": [
+      {
+        "name": "Always Free",
+        "items": [],
+        "_id": "5f5b7c1b55c13000213c0989",
+        "data": {
+          "id": "manual-fulfillment"
+        },
+        "profile_id": "5f3e8fd5cac0ff0021a2be66",
+        "price": 0,
+        "provider_id": "manual"
+      }
+    ],
+    "items": [
+      {
+        "is_giftcard": false,
+        "has_shipping": true,
+        "shipped_quantity": 0,
+        "returned": false,
+        "fulfilled": false,
+        "fulfilled_quantity": 0,
+        "returned_quantity": 0,
+        "_id": "5f65c927395b3e0021d8f984",
+        "title": "Item",
+        "description": "70x140",
+        "quantity": 1,
+        "thumbnail": "",
+        "content": {
+          "unit_price": 316,
+          "variant": {
+            "_id": "5f40f0a2b687940021667170",
+            "barcode": "",
+            "image": "",
+            "published": false,
+            "inventory_quantity": 20,
+            "allow_backorder": false,
+            "manage_inventory": true,
+            "title": "1234",
+            "sku": "SKU1234",
+            "ean": "5713682002297",
+            "options": [
+              {
+                "_id": "5f40f0a2b687940021667171",
+                "value": "70x140",
+                "option_id": "5f40f0a2b687940021667163"
+              }
+            ],
+            "prices": [
+              {
+                "_id": "5f40f0a2b687940021667172",
+                "currency_code": "EUR",
+                "amount": 44
+              },
+              {
+                "_id": "5f40f0a2b687940021667173",
+                "currency_code": "DKK",
+                "amount": 316
+              }
+            ],
+            "__v": 0
+          },
+          "product": {
+            "_id": "5f40f0a2b687940021667162",
+            "description": "100% Good",
+            "tags": "",
+            "is_giftcard": false,
+            "images": [],
+            "thumbnail": "",
+            "variants": [
+              "5f40f0a2b687940021667164",
+              "5f40f0a2b687940021667168",
+              "5f40f0a2b68794002166716c",
+              "5f40f0a2b687940021667170",
+              "5f40f0a2b687940021667174"
+            ],
+            "published": false,
+            "title": "Item",
+            "options": [
+              {
+                "values": [],
+                "_id": "5f40f0a2b687940021667163",
+                "title": "Size"
+              }
+            ],
+            "__v": 0
+          },
+          "quantity": 1
+        },
+        "refundable": 3.95
+      }
+    ],
+    "shipping_address": {
+      "_id": "5f60adf22162dd0021362beb",
+      "country_code": "DK",
+      "first_name": "John",
+      "last_name": "Jones",
+      "address_1": "Jone ST 9",
+      "city": "Jonstown",
+      "postal_code": "12332"
+    },
+    "billing_address": {
+      "_id": "5f60adf22162dd0021362beb",
+      "country_code": "DK",
+      "first_name": "John",
+      "last_name": "Jones",
+      "address_1": "Jone ST 9",
+      "city": "Jonstown",
+      "postal_code": "12332"
+    },
+    "region_id": "5f40ce8f7743b30021337e2b",
+    "email": "jojo@jon.com",
+    "customer_id": "5f42870e715758002170ed86",
+    "cart_id": "5f4bd6b47435de0021c69f04",
+    "tax_rate": 0.25,
+    "currency_code": "DKK",
+    "shipments": [],
+    "fulfillments": [],
+    "returns": [],
+    "refunds": [],
+    "created": "2020-09-19T09:03:29.000Z",
+    "shipping_total": 0,
+    "discount_total": 312.84,
+    "tax_total": 0.79,
+    "subtotal": 316,
+    "total": 3.95,
+    "refunded_total": 0,
+    "refundable_amount": 3.95,
+    "region": {
+      "_id": "5f40ce8f7743b30021337e2b",
+      "tax_rate": 0.25,
+      "countries": [
+        "DK"
+      ],
+      "payment_providers": [
+        "provider"
+      ],
+      "fulfillment_providers": [
+        "manual"
+      ],
+      "name": "Denmark",
+      "currency_code": "DKK",
+      "tax_code": "D25",
+      "__v": 0
+    },
+    "customer": {
+      "_id": "5f42870e715758002170ed86",
+      "payment_methods": [],
+      "has_account": true,
+      "orders": [
+        "5f65c961395b3e0021d8f994"
+      ],
+      "email": "jojo@jon.com",
+      "shipping_addresses": [
+        {
+          "_id": "5f60adf22162dd0021362beb",
+          "country_code": "DK",
+          "first_name": "John",
+          "last_name": "Jones",
+          "address_1": "Jone ST 9",
+          "city": "Jonstown",
+          "postal_code": "12332"
+        }
+      ],
+      "__v": 0,
+      "metadata": {
+        "stripe_id": "cus_123123123"
+      },
+      "first_name": "John",
+      "last_name": "Jones",
+      "password_hash": "c2NyeXB0AAEAAAABAAAAAd3Q0jehDc8N3cTdqlPCfeZtF5pILidEESwxcA9Yh8PuojRYBXG0xIiFKVq1xXGfXZlY6zkp1IGBXZDHKb9ZtExImjKlFJNwFxwiiaLFS6oD"
+    }
+  }
--- a/docs/api/store/endpoints/regions.yaml
+++ b/docs/api/store/endpoints/regions.yaml
@@ -0,0 +1,41 @@
+title: Regions
+domain: store
+route: /regions
+description: >
+  A Region represents a collection of countries that have common pricing 
+  schemes, shipping options, tax schemes, etc. Carts must have a region
+  associated.
+endpoints:
+  - path: /
+    method: GET
+    title: List Regions
+    description: >
+      Retrieves the regions configured for the store.
+  - path: /:id
+    method: GET
+    title: Retrieve a Region
+    params:
+      - name: id
+        type: String
+        description: Id of the region.
+    description: >
+      Retrieves a region
+
+response: |
+  {
+    "region": {
+      "name": "Denmark",
+      "currency_code": "DKK",
+      "tax_rate": 0.25,
+      "countries": [
+        "DK"
+        ],
+      "payment_providers": [
+        "stripe"
+        ],
+      "fulfillment_providers": [
+        "manual"
+        ],
+      "_id": "5f4cd45b5d1e3200214c0e49"
+    }
+  }
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
    "prettier": "^2.1.1"
  },
  "dependencies": {
-    "axios": "^0.19.2"
+    "axios": "^0.19.2",
+    "rebass": "^4.0.7"
  }
 }
--- a/www/.gitignore
+++ b/www/.gitignore
@@ -0,0 +1,69 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env*
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity
--- a/www/.prettierignore
+++ b/www/.prettierignore
@@ -0,0 +1,4 @@
+.cache
+package.json
+package-lock.json
+public
--- a/www/.prettierrc
+++ b/www/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "arrowParens": "avoid",
+  "semi": false
+}
--- a/www/LICENSE
+++ b/www/LICENSE
@@ -0,0 +1,14 @@
+The BSD Zero Clause License (0BSD)
+
+Copyright (c) 2020 Gatsby Inc.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
--- a/www/README.md
+++ b/www/README.md
@@ -0,0 +1,3 @@
+# Medusa Docs
+
+Visit: docs.medusa-commerce.com to browse docs.
--- a/www/gatsby-browser.js
+++ b/www/gatsby-browser.js
@@ -0,0 +1,6 @@
+import React from "react"
+import { ThemeProvider as Provider } from "./src/theme"
+
+export const wrapPageElement = ({ element }) => {
+  return <Provider>{element}</Provider>
+}
--- a/www/gatsby-config.js
+++ b/www/gatsby-config.js
@@ -0,0 +1,24 @@
+/**
+ * Configure your Gatsby site with this file.
+ *
+ * See: https://www.gatsbyjs.com/docs/gatsby-config/
+ */
+
+module.exports = {
+  plugins: [
+    `gatsby-plugin-react-helmet`,
+    {
+      resolve: `gatsby-plugin-anchor-links`,
+      options: {
+        offset: -300,
+      },
+    },
+    `gatsby-transformer-yaml`,
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/../docs/api/store`,
+      },
+    },
+  ],
+}
--- a/www/gatsby-ssr.js
+++ b/www/gatsby-ssr.js
@@ -0,0 +1,6 @@
+import React from "react"
+import { ThemeProvider as Provider } from "./src/theme"
+
+export const wrapPageElement = ({ element }) => {
+  return <Provider>{element}</Provider>
+}
--- a/www/package.json
+++ b/www/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "medusa-commerce-docs",
+  "private": true,
+  "description": "Docs engine for Medusa docs",
+  "version": "0.1.0",
+  "license": "0BSD",
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
+    "start": "npm run develop",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean",
+    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
+  },
+  "dependencies": {
+    "emotion-theming": "^10.0.27",
+    "gatsby": "^2.24.66",
+    "gatsby-plugin-anchor-links": "^1.1.1",
+    "gatsby-plugin-react-helmet": "^3.3.12",
+    "gatsby-source-filesystem": "^2.3.31",
+    "gatsby-transformer-yaml": "^2.4.13",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-helmet": "^6.1.0",
+    "react-highlight.js": "^1.0.7",
+    "react-intersection-observer": "^8.29.0",
+    "rebass": "^4.0.7"
+  },
+  "devDependencies": {
+    "prettier": "2.1.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/medusajs/medusa"
+  }
+}
--- a/www/src/components/layout.js
+++ b/www/src/components/layout.js
@@ -0,0 +1,24 @@
+import React from "react"
+import { Flex, Box } from "rebass"
+
+const Layout = ({ children }) => {
+  return (
+    <Flex
+      sx={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflowY: "scroll",
+      }}
+      fontFamily={"body"}
+      flexDirection="column"
+      flexGrow="1"
+    >
+      <Box>{children}</Box>
+    </Flex>
+  )
+}
+
+export default Layout
--- a/www/src/pages/api/store.js
+++ b/www/src/pages/api/store.js
@@ -0,0 +1,233 @@
+import React, { useState, useEffect } from "react"
+import { graphql } from "gatsby"
+import { Flex, Box, Text } from "rebass"
+import { AnchorLink } from "gatsby-plugin-anchor-links"
+import Highlight from "react-highlight.js"
+import { Helmet } from "react-helmet"
+import { InView } from "react-intersection-observer"
+
+import Layout from "../../components/layout"
+import "highlight.js/styles/a11y-dark.css"
+
+const convertToKebabCase = string => {
+  return string.replace(/\s+/g, "-").toLowerCase()
+}
+
+const JsonBox = ({ content }) => {
+  const json = JSON.parse(content)
+  return (
+    <Flex
+      sx={{
+        border: "1px solid #454545",
+        backgroundColor: "dark",
+        borderRadius: "5px",
+        marginLeft: "auto",
+        marginRight: "auto",
+        width: "100%",
+        maxHeight: "calc(90vh - 20px)",
+        overflowY: "scroll",
+        alignSelf: "flex-start",
+        fontSize: "1",
+        position: "sticky",
+        top: "20px",
+        bottom: "20px",
+      }}
+      flexDirection="column"
+      as="pre"
+    >
+      <Text fontSize={0} fontFamily="body" py={1} px={2} color="lightest">
+        RESPONSE
+      </Text>
+      <Box w={1} flex="1" sx={{ overflowY: "scroll" }}>
+        <Highlight language="json">
+          {JSON.stringify(json, undefined, 2)}
+        </Highlight>
+      </Box>
+    </Flex>
+  )
+}
+
+const ParamSection = ({ routeParam, param }) => {
+  return (
+    <Box
+      py={2}
+      sx={{
+        borderTop: "hairline",
+      }}
+    >
+      <Flex fontSize="1" alignItems="center" pb={2} fontFamily="monospace">
+        <Box mr={2}>{param.name}</Box>
+        {(param.required || routeParam) && (
+          <Text variant="labels.required">required</Text>
+        )}
+      </Flex>
+      <Text fontSize="1">{param.description}</Text>
+    </Box>
+  )
+}
+
+const RouteSection = ({ path, method }) => {
+  return (
+    <Box py={2}>
+      <Flex fontFamily="monospace">
+        <Text mr={2} variant={`labels.${method}`}>
+          {method}
+        </Text>
+        <Text>{path}</Text>
+      </Flex>
+    </Box>
+  )
+}
+
+const SideBar = ({ endpoints }) => {
+  return (
+    <Flex
+      p={3}
+      sx={{
+        position: "sticky",
+        top: 0,
+        height: "100vh",
+        overflowY: "scroll",
+        backgroundColor: "light",
+        minWidth: "250px",
+      }}
+      flexDirection="column"
+    >
+      {endpoints.edges.map(({ node }) => {
+        return (
+          <Box py={3}>
+            <Text fontSize={1} mb={2} sx={{ textTransform: "uppercase" }}>
+              {node.title}
+            </Text>
+            {node.endpoints.map(e => (
+              <AnchorLink to={`#${convertToKebabCase(e.title)}`}>
+                <Text mb={2} fontSize={0}>
+                  {e.title}
+                </Text>
+              </AnchorLink>
+            ))}
+          </Box>
+        )
+      })}
+    </Flex>
+  )
+}
+
+const StoreApi = ({ data }) => {
+  let { endpoints } = data
+
+  return (
+    <Layout>
+      <Helmet>
+        <title>Store API | Medusa Commerce</title>
+      </Helmet>
+      <Flex>
+        <SideBar endpoints={endpoints} />
+        <Flex p={3} flexDirection="column">
+          {endpoints.edges.map(({ node }) => (
+            <Flex
+              id={convertToKebabCase(node.title)}
+              sx={{
+                minHeight: "90vh",
+                position: "relative",
+              }}
+            >
+              <Flex flexDirection="column" flex="60%" maxWidth={756}>
+                <Flex
+                  sx={{
+                    borderBottom: "hairline",
+                  }}
+                  py={5}
+                  flexDirection="column"
+                  borderBottom="hairline"
+                >
+                  <Text mb={3} fontSize={4}>
+                    {node.title}
+                  </Text>
+                  <Text fontFamily="monospace" my={2}>
+                    {node.route}
+                  </Text>
+                  <Text mb={4}>{node.description}</Text>
+                  {node.endpoints.map(endpoint => (
+                    <Flex
+                      id={convertToKebabCase(endpoint.title)}
+                      sx={{
+                        borderTop: "hairline",
+                      }}
+                      py={4}
+                      flexDirection="column"
+                    >
+                      <Text mb={3} fontSize={3}>
+                        {endpoint.title}
+                      </Text>
+                      <RouteSection
+                        method={endpoint.method}
+                        path={endpoint.path}
+                      />
+                      <Text>{endpoint.description}</Text>
+                      {((endpoint.params && endpoint.params.length) ||
+                        (endpoint.body && endpoint.body.length)) && (
+                        <Box
+                          sx={{
+                            borderBottom: "hairline",
+                          }}
+                          my="2"
+                        >
+                          <Text my={2}>Parameters</Text>
+                          {(endpoint.params || []).map(p => (
+                            <ParamSection routeParam param={p} />
+                          ))}
+                          {(endpoint.body || []).map(p => (
+                            <ParamSection param={p} />
+                          ))}
+                        </Box>
+                      )}
+                    </Flex>
+                  ))}
+                </Flex>
+              </Flex>
+              <Flex py={5} px={3} minWidth={450} flex="1">
+                <JsonBox name={node.title} content={node.response} />
+              </Flex>
+            </Flex>
+          ))}
+        </Flex>
+      </Flex>
+    </Layout>
+  )
+}
+
+export default StoreApi
+
+export const pageQuery = graphql`
+  {
+    endpoints: allEndpointsYaml(filter: { domain: { eq: "store" } }) {
+      edges {
+        node {
+          id
+          title
+          route
+          response
+          description
+          endpoints {
+            title
+            path
+            params {
+              description
+              name
+              type
+            }
+            method
+            description
+            body {
+              type
+              required
+              name
+              description
+            }
+          }
+        }
+      }
+    }
+  }
+`
--- a/www/src/pages/index.js
+++ b/www/src/pages/index.js
@@ -0,0 +1,5 @@
+import React from "react"
+
+export default function Home() {
+  return <div>Hello world!</div>
+}
--- a/www/src/theme/breakpoints.js
+++ b/www/src/theme/breakpoints.js
@@ -0,0 +1 @@
+export default ["40em", "52em", "64em"]
--- a/www/src/theme/buttons.js
+++ b/www/src/theme/buttons.js
@@ -0,0 +1,168 @@
+export const buttons = {
+  pillActive: {
+    cursor: "pointer",
+    backgroundColor: "transparent",
+    color: "dark",
+    height: "40px",
+    outline: 0,
+    borderRadius: "3px",
+    paddingTop: "3px",
+    paddingBottom: "3px",
+    boxShadow: "pillActive",
+    "&:focus": {
+      boxShadow: "pillActiveFocus",
+    },
+  },
+  pill: {
+    cursor: "pointer",
+    backgroundColor: "transparent",
+    color: "dark",
+    height: "40px",
+    outline: 0,
+    borderRadius: "3px",
+    paddingTop: "3px",
+    paddingBottom: "3px",
+    boxShadow: "pill",
+    "&:focus": {
+      boxShadow: "buttonBoxShadowActive",
+    },
+  },
+  danger: {
+    minHeight: "28px",
+    fontWeight: "500",
+    color: "light",
+    fontSize: "14px",
+    lineHeight: "14px",
+    backgroundColor: "danger",
+    border: 0,
+    outline: 0,
+    paddingTop: "3px",
+    paddingBottom: "3px",
+    cursor: "pointer",
+    borderRadius: "3px",
+    boxShadow: "buttonBoxShadow",
+    "&:hover": {
+      color: "darkest",
+      boxShadow: "buttonBoxShadowHover",
+    },
+    "&:active": {
+      boxShadow: "buttonBoxShadowActive",
+    },
+  },
+  primary: {
+    minHeight: "24px",
+    height: "28px",
+    fontWeight: "500",
+    color: "dark",
+    fontSize: "14px",
+    lineHeight: "14px",
+    backgroundColor: "lightest",
+    border: 0,
+    outline: 0,
+    paddingTop: "3px",
+    paddingBottom: "3px",
+    cursor: "pointer",
+    borderRadius: "3px",
+    boxShadow: "buttonBoxShadow",
+    "&:hover": {
+      color: "darkest",
+      boxShadow: "buttonBoxShadowHover",
+    },
+    "&:active": {
+      boxShadow: "buttonBoxShadowActive",
+    },
+    "&:disabled": {
+      cursor: "not-allowed",
+      pointerEvents: "none",
+      opacity: 0.5,
+    },
+  },
+  green: {
+    height: "30px",
+    color: "lightest",
+    backgroundColor: "#53725D",
+    border: 0,
+    outline: 0,
+    paddingTop: "3px",
+    paddingBottom: "3px",
+    cursor: "pointer",
+    borderRadius: "3px",
+    "&:focus": {
+      boxShadow: "buttonBoxShadowFocus",
+    },
+    "&:active": {
+      boxShadow: "buttonBoxShadowActive",
+    },
+  },
+  secondary: {
+    height: "30px",
+    color: "light",
+    backgroundColor: "dark",
+    border: 0,
+    outline: 0,
+    paddingTop: "3px",
+    paddingBottom: "3px",
+    cursor: "pointer",
+    borderRadius: "3px",
+    "&:focus": {
+      boxShadow: "buttonBoxShadowFocus",
+    },
+    "&:active": {
+      boxShadow: "buttonBoxShadowActive",
+    },
+  },
+  cta: {
+    height: "30px",
+    color: "white",
+    backgroundColor: "medusaGreen",
+    fontWeight: 600,
+    fontSize: "14px",
+    lineHeight: "14px",
+
+    border: 0,
+    outline: 0,
+
+    paddingTop: "3px",
+    paddingBottom: "3px",
+
+    cursor: "pointer",
+
+    borderRadius: "3px",
+    boxShadow: "ctaBoxShadow",
+
+    "&:hover": {
+      boxShadow: "ctaBoxShadowHover",
+    },
+
+    "&:disabled": {
+      cursor: "not-allowed",
+      pointerEvents: "none",
+      opacity: 0.5,
+    },
+  },
+  delete: {
+    height: "30px",
+    color: "white",
+    backgroundColor: "#b02b13",
+    fontWeight: 600,
+    fontSize: "14px",
+    lineHeight: "14px",
+
+    border: 0,
+    outline: 0,
+
+    paddingTop: "3px",
+    paddingBottom: "3px",
+
+    cursor: "pointer",
+
+    borderRadius: "3px",
+    boxShadow: "ctaBoxShadow",
+
+    "&:hover": {
+      boxShadow: "ctaBoxShadowHover",
+    },
+  },
+}
+
+export default buttons
--- a/www/src/theme/colors.js
+++ b/www/src/theme/colors.js
@@ -0,0 +1,11 @@
+export default {
+  primary: "#B27979",
+  secondary: "#79B28A",
+  medusaGreen: "#3ecf8e",
+  lightest: "#fefefe",
+  light: "#f0f0f0",
+  gray: "#a3acb9",
+  dark: "#454545",
+  darkest: "#212121",
+  placeholder: "#a3acb9",
+}
--- a/www/src/theme/forms.js
+++ b/www/src/theme/forms.js
@@ -0,0 +1,92 @@
+export default {
+  invalidInput: {
+    color: "dark",
+    backgroundColor: "lightest",
+
+    border: 0,
+    outline: 0,
+
+    cursor: "text",
+    transition: "all 0.2s ease",
+
+    borderRadius: "3px",
+    boxShadow: "invalidBoxShadow",
+    "&.tag__focus": {
+      boxShadow: "inputBoxShadowHover",
+    },
+    "&:focus": {
+      boxShadow: "inputBoxShadowHover",
+    },
+    "&::placeholder": {
+      color: "danger",
+    },
+  },
+  input: {
+    color: "dark",
+    backgroundColor: "lightest",
+
+    border: 0,
+    outline: 0,
+
+    cursor: "text",
+    transition: "all 0.2s ease",
+
+    borderRadius: "3px",
+    boxShadow: "inputBoxShadow",
+    "&.tag__focus": {
+      boxShadow: "inputBoxShadowHover",
+    },
+    "&:focus": {
+      boxShadow: "inputBoxShadowHover",
+    },
+    "&::placeholder": {
+      color: "placeholder",
+    },
+  },
+  textarea: {
+    color: "dark",
+    backgroundColor: "lightest",
+
+    border: 0,
+    outline: 0,
+
+    cursor: "text",
+    transition: "all 0.2s ease",
+
+    borderRadius: "3px",
+    boxShadow: "inputBoxShadow",
+    "&.tag__focus": {
+      boxShadow: "inputBoxShadowHover",
+    },
+    "&:focus": {
+      boxShadow: "inputBoxShadowHover",
+    },
+    "&::placeholder": {
+      color: "placeholder",
+    },
+  },
+  dropdown: {
+    color: "dark",
+    backgroundColor: "lightest",
+
+    border: 0,
+    outline: 0,
+
+    paddingTop: "3px",
+    paddingBottom: "3px",
+
+    cursor: "pointer",
+
+    borderRadius: "3px",
+    boxShadow: "buttonPrimaryBoxShadow",
+
+    "&:hover": {
+      color: "darkest",
+      boxShadow: "buttonPrimaryBoxShadowHover",
+    },
+
+    "&:active": {
+      boxShadow: "buttonPrimaryBoxShadowActive",
+    },
+  },
+}
--- a/www/src/theme/index.js
+++ b/www/src/theme/index.js
@@ -0,0 +1,85 @@
+import React from "react"
+import { ThemeProvider as Provider } from "emotion-theming"
+
+import breakpoints from "./breakpoints"
+import buttons from "./buttons"
+import spacing from "./spacing"
+import shadows from "./shadows"
+import forms from "./forms"
+import labels from "./labels"
+
+export const theme = {
+  labels,
+  colors: {
+    primary: "#53725D",
+    secondary: "#79B28A",
+    medusaGreen: "#53725D",
+    danger: "#FF7675",
+    muted: "#E3E8EE",
+    lightest: "#fefefe",
+    light: "#f0f0f0",
+    dark: "#454545",
+    darkest: "#212121",
+    placeholder: "#a3acb9",
+  },
+  borders: {
+    hairline: "1px solid #E3E8EE",
+  },
+  fontSizes: [12, 14, 16, 18, 22],
+  fonts: {
+    body:
+      "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Ubuntu, sans-serif",
+    heading: "system-ui, sans-serif",
+    monospace: "Menlo, monospace",
+  },
+  breakpoints,
+  spacing,
+  mediaQueries: {
+    small: `@media screen and (min-width: ${breakpoints[0]})`,
+    medium: `@media screen and (min-width: ${breakpoints[1]})`,
+    large: `@media screen and (min-width: ${breakpoints[2]})`,
+  },
+  grid: {
+    selectedShadow: `
+      inset rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      inset rgba(206, 208, 190, 0.56) 0px 0px 0px 2px,
+      inset rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
+      inset rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
+      inset rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
+      inset rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      inset rgba(0, 0, 0, 0) 0px 0px 0px 0px;
+    `,
+    header: {
+      padding: 2,
+      fontSize: 1,
+      fontFamily: "body",
+    },
+    data: {
+      padding: 2,
+      fontSize: 1,
+      fontFamily: "body",
+    },
+  },
+  shadows,
+  variants: {
+    loginCard: {
+      boxShadow: "buttonBoxShadow",
+      borderRadius: "3px",
+    },
+    badge: {
+      fontSize: "0",
+      color: "dark",
+      backgroundColor: "lightest",
+      boxShadow: "buttonBoxShadow",
+      borderRadius: "3px",
+      minWidth: "unset",
+      px: "1",
+    },
+  },
+  forms,
+  buttons,
+}
+
+export const ThemeProvider = ({ children }) => (
+  <Provider theme={theme}>{children}</Provider>
+)
--- a/www/src/theme/labels.js
+++ b/www/src/theme/labels.js
@@ -0,0 +1,17 @@
+export const labels = {
+  required: {
+    color: "danger",
+    fontSize: 0,
+  },
+  GET: {
+    color: "green",
+  },
+  POST: {
+    color: "blue",
+  },
+  DELETE: {
+    color: "danger",
+  },
+}
+
+export default labels
--- a/www/src/theme/shadows.js
+++ b/www/src/theme/shadows.js
@@ -0,0 +1,111 @@
+export default {
+  pill: `
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
+      rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(60, 66, 87, 0.08) 0px 0px 5px 0px;
+  `,
+  pillActive: `
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(83, 114, 93, 0.8) 0px 0px 0px 2px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
+      rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px
+  `,
+  pillActiveFocus: `
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(206, 208, 190, 0.36) 0px 0px 0px 4px,
+      rgba(83, 114, 93, 0.8) 0px 0px 0px 2px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
+      rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px
+  `,
+  invalidBoxShadow: `
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
+      rgba(255, 66, 87, 0.8) 0px 0px 0px 1px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px;
+    `,
+  inputBoxShadow: `
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
+      rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px;
+    `,
+  inputBoxShadowHover: `
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(206, 208, 190, 0.36) 0px 0px 0px 4px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
+      rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px;
+    `,
+  buttonBoxShadow: `
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
+      rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
+    `,
+  buttonBoxShadowHover: `
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
+      rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(60, 66, 87, 0.08) 0px 3px 9px 0px,
+      rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
+    `,
+  buttonBoxShadowActive: `
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(206, 208, 190, 0.36) 0px 0px 0px 4px,
+      rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
+      rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+      rgba(60, 66, 87, 0.08) 0px 3px 9px 0px;
+      rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
+    `,
+  tagBoxShadow: `
+      rgba(0,0,0,0) 0px 0px 0px 0px, 
+      rgb(190, 191, 208) 0px 0px 0px 2px, 
+      rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
+      rgba(60, 62, 87, 0.22) 0px 0px 0px 2px, 
+      rgba(0,0,0,0) 0px 0px 0px 0px, 
+      rgba(0,0,0,0) 0px 0px 0px 0px, 
+      rgba(0,0,0,0) 0px 0px 0px 0px;
+    `,
+  ctaBoxShadow: `
+      rgba(0,0,0,0) 0px 0px 0px 0px, 
+      rgba(0,0,0,0) 0px 0px 0px 0px, 
+      rgba(0,0,0,0.12) 0px 1px 1px 0px, 
+      rgba(62, 207, 142, 0) 0px 0px 0px 1px, 
+      rgba(0,0,0,0) 0px 0px 0px 0px, 
+      rgba(0,0,0,0) 0px 0px 0px 0px, 
+      rgba(60,66,87,0.08) 0px 2px 5px 0px;
+    `,
+  ctaBoxShadowHover: `
+      rgba(0,0,0,0) 0px 0px 0px 0px, 
+      rgba(0,0,0,0) 0px 0px 0px 0px, 
+      rgba(0,0,0,0.12) 0px 1px 1px 0px, 
+      rgba(62, 207, 142, 0) 0px 0px 0px 1px, 
+      rgba(0,0,0,0) 0px 0px 0px 0px, 
+      rgba(62, 207, 142, 0.25) 0px 3px 9px 0px;
+      rgba(62, 207, 142, 0.25) 0px 2px 5px 0px;
+    `,
+}
--- a/www/src/theme/spacing.js
+++ b/www/src/theme/spacing.js
@@ -0,0 +1 @@
+export default [0, 4, 8, 16, 32, 64]
--- a/www/static/favicon.ico
+++ b/www/static/favicon.ico
--- a/www/yarn.lock
+++ b/www/yarn.lock
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,7 +2,7 @@
 # yarn lockfile v1


-"@babel/code-frame@^7.10.4":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
  version "7.10.4"
  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
@@ -142,7 +142,7 @@
  dependencies:
    "@babel/types" "^7.11.0"

-"@babel/helper-module-imports@^7.10.4":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4":
  version "7.10.4"
  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
  integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
@@ -830,7 +830,7 @@
    pirates "^4.0.0"
    source-map-support "^0.5.16"

-"@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
  version "7.11.2"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
  integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@@ -870,6 +870,108 @@
    lodash "^4.17.19"
    to-fast-properties "^2.0.0"

+"@emotion/cache@^10.0.27":
+  version "10.0.29"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
+  integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
+  dependencies:
+    "@emotion/sheet" "0.9.4"
+    "@emotion/stylis" "0.8.5"
+    "@emotion/utils" "0.11.3"
+    "@emotion/weak-memoize" "0.2.5"
+
+"@emotion/core@^10.0.0":
+  version "10.0.35"
+  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3"
+  integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/cache" "^10.0.27"
+    "@emotion/css" "^10.0.27"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/sheet" "0.9.4"
+    "@emotion/utils" "0.11.3"
+
+"@emotion/css@^10.0.27":
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
+  integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
+  dependencies:
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/utils" "0.11.3"
+    babel-plugin-emotion "^10.0.27"
+
+"@emotion/hash@0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
+"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.1":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4", "@emotion/memoize@^0.7.1":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
+"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
+  version "0.11.16"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
+  integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
+  dependencies:
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/unitless" "0.7.5"
+    "@emotion/utils" "0.11.3"
+    csstype "^2.5.7"
+
+"@emotion/sheet@0.9.4":
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
+  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
+
+"@emotion/styled-base@^10.0.27":
+  version "10.0.31"
+  resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a"
+  integrity sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/is-prop-valid" "0.8.8"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/utils" "0.11.3"
+
+"@emotion/styled@^10.0.0":
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
+  integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==
+  dependencies:
+    "@emotion/styled-base" "^10.0.27"
+    babel-plugin-emotion "^10.0.27"
+
+"@emotion/stylis@0.8.5":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
+"@emotion/utils@0.11.3":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
+  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
+
+"@emotion/weak-memoize@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@evocateur/libnpmaccess@^3.1.2":
  version "3.1.2"
  resolved "https://registry.yarnpkg.com/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz#ecf7f6ce6b004e9f942b098d92200be4a4b1c845"
@@ -1704,6 +1806,105 @@
  dependencies:
    "@types/node" ">= 8"

+"@styled-system/background@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/background/-/background-5.1.2.tgz#75c63d06b497ab372b70186c0bf608d62847a2ba"
+  integrity sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/border@^5.1.5":
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/@styled-system/border/-/border-5.1.5.tgz#0493d4332d2b59b74bb0d57d08c73eb555761ba6"
+  integrity sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/color@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/color/-/color-5.1.2.tgz#b8d6b4af481faabe4abca1a60f8daa4ccc2d9f43"
+  integrity sha512-1kCkeKDZkt4GYkuFNKc7vJQMcOmTl3bJY3YBUs7fCNM6mMYJeT1pViQ2LwBSBJytj3AB0o4IdLBoepgSgGl5MA==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/core@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/core/-/core-5.1.2.tgz#b8b7b86455d5a0514f071c4fa8e434b987f6a772"
+  integrity sha512-XclBDdNIy7OPOsN4HBsawG2eiWfCcuFt6gxKn1x4QfMIgeO6TOlA2pZZ5GWZtIhCUqEPTgIBta6JXsGyCkLBYw==
+  dependencies:
+    object-assign "^4.1.1"
+
+"@styled-system/css@^5.0.0", "@styled-system/css@^5.1.5":
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.1.5.tgz#0460d5f3ff962fa649ea128ef58d9584f403bbbc"
+  integrity sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A==
+
+"@styled-system/flexbox@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/flexbox/-/flexbox-5.1.2.tgz#077090f43f61c3852df63da24e4108087a8beecf"
+  integrity sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/grid@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/grid/-/grid-5.1.2.tgz#7165049877732900b99cd00759679fbe45c6c573"
+  integrity sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/layout@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/layout/-/layout-5.1.2.tgz#12d73e79887e10062f4dbbbc2067462eace42339"
+  integrity sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/position@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/position/-/position-5.1.2.tgz#56961266566836f57a24d8e8e33ce0c1adb59dd3"
+  integrity sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/shadow@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/shadow/-/shadow-5.1.2.tgz#beddab28d7de03cd0177a87ac4ed3b3b6d9831fd"
+  integrity sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/should-forward-prop@^5.0.0":
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz#c392008c6ae14a6eb78bf1932733594f7f7e5c76"
+  integrity sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q==
+  dependencies:
+    "@emotion/is-prop-valid" "^0.8.1"
+    "@emotion/memoize" "^0.7.1"
+    styled-system "^5.1.5"
+
+"@styled-system/space@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/space/-/space-5.1.2.tgz#38925d2fa29a41c0eb20e65b7c3efb6e8efce953"
+  integrity sha512-+zzYpR8uvfhcAbaPXhH8QgDAV//flxqxSjHiS9cDFQQUSznXMQmxJegbhcdEF7/eNnJgHeIXv1jmny78kipgBA==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/typography@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/typography/-/typography-5.1.2.tgz#65fb791c67d50cd2900d234583eaacdca8c134f7"
+  integrity sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/variant@^5.1.5":
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/@styled-system/variant/-/variant-5.1.5.tgz#8446d8aad06af3a4c723d717841df2dbe4ddeafd"
+  integrity sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+    "@styled-system/css" "^5.1.5"
+
 "@types/events@*":
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -1728,6 +1929,11 @@
  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.1.8.tgz#1d590429fe8187a02707720ecf38a6fe46ce294b"
  integrity sha512-6XzyyNM9EKQW4HKuzbo/CkOIjn/evtCmsU+MUM1xDfJ+3/rNjBttM1NgN7AOQvN6tP1Sl1D1PIKMreTArnxM9A==

+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
 "@zkochan/cmd-shim@^3.1.0":
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/@zkochan/cmd-shim/-/cmd-shim-3.1.0.tgz#2ab8ed81f5bb5452a85f25758eb9b8681982fd2e"
@@ -1951,6 +2157,36 @@ babel-plugin-dynamic-import-node@^2.3.3:
  dependencies:
    object.assign "^4.1.0"

+babel-plugin-emotion@^10.0.27:
+  version "10.0.33"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03"
+  integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/serialize" "^0.11.16"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+
+babel-plugin-macros@^2.0.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.0"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 balanced-match@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -2105,6 +2341,11 @@ callsites@^2.0.0:
  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=

+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
 camelcase-keys@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
@@ -2405,7 +2646,7 @@ conventional-recommended-bump@^5.0.0:
    meow "^4.0.0"
    q "^1.5.1"

-convert-source-map@^1.7.0:
+convert-source-map@^1.5.0, convert-source-map@^1.7.0:
  version "1.7.0"
  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
@@ -2457,6 +2698,17 @@ cosmiconfig@^5.1.0:
    js-yaml "^3.13.1"
    parse-json "^4.0.0"

+cosmiconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
+  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.7.2"
+
 cross-env@^7.0.2:
  version "7.0.2"
  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9"
@@ -2484,6 +2736,11 @@ cross-spawn@^7.0.1:
    shebang-command "^2.0.0"
    which "^2.0.1"

+csstype@^2.5.7:
+  version "2.6.13"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f"
+  integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==
+
 currently-unhandled@^0.4.1:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -2920,6 +3177,11 @@ find-cache-dir@^2.0.0:
    make-dir "^2.0.0"
    pkg-dir "^3.0.0"

+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^1.0.0:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -3359,6 +3621,14 @@ import-fresh@^2.0.0:
    caller-path "^2.0.0"
    resolve-from "^3.0.0"

+import-fresh@^3.1.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
+  integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
 import-local@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
@@ -3729,6 +3999,11 @@ json-parse-better-errors@^1.0.0, json-parse-better-errors@^1.0.1:
  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==

+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-schema-traverse@^0.4.1:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -3833,6 +4108,11 @@ levenary@^1.1.1:
  dependencies:
    leven "^3.1.0"

+lines-and-columns@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
+  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+
 load-json-file@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -4432,7 +4712,7 @@ oauth-sign@~0.9.0:
  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==

-object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -4629,6 +4909,13 @@ parallel-transform@^1.1.0:
    inherits "^2.0.3"
    readable-stream "^2.1.5"

+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
 parse-github-repo-url@^1.3.0:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/parse-github-repo-url/-/parse-github-repo-url-1.4.1.tgz#9e7d8bb252a6cb6ba42595060b7bf6df3dbc1f50"
@@ -4649,6 +4936,16 @@ parse-json@^4.0.0:
    error-ex "^1.3.1"
    json-parse-better-errors "^1.0.1"

+parse-json@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.1.0.tgz#f96088cdf24a8faa9aea9a009f2d9d942c999646"
+  integrity sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
 parse-passwd@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
@@ -4730,6 +5027,11 @@ path-type@^3.0.0:
  dependencies:
    pify "^3.0.0"

+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
 performance-now@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -4984,6 +5286,13 @@ readdir-scoped-modules@^1.0.0:
    graceful-fs "^4.1.2"
    once "^1.3.0"

+rebass@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/rebass/-/rebass-4.0.7.tgz#0a84e5558750c1f416c3baf41ec4c7fc8d64a98a"
+  integrity sha512-GJot6j6Qcr7jk1QIgf9qBoud75CGRpN8pGcEo98TSp4KNSWV01ZLvGwFKGI35oEBuNs+lpEd3+pnwkQUTSFytg==
+  dependencies:
+    reflexbox "^4.0.6"
+
 redent@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
@@ -5000,6 +5309,17 @@ redent@^2.0.0:
    indent-string "^3.0.0"
    strip-indent "^2.0.0"

+reflexbox@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/reflexbox/-/reflexbox-4.0.6.tgz#fc756d2cc1ca493baf9b96bb27dd640ad8154cf1"
+  integrity sha512-UNUL4YoJEXAPjRKHuty1tuOk+LV1nDJ2KYViDcH7lYm5yU3AQ+EKNXxPU3E14bQNK/pE09b1hYl+ZKdA94tWLQ==
+  dependencies:
+    "@emotion/core" "^10.0.0"
+    "@emotion/styled" "^10.0.0"
+    "@styled-system/css" "^5.0.0"
+    "@styled-system/should-forward-prop" "^5.0.0"
+    styled-system "^5.0.0"
+
 regenerate-unicode-properties@^8.2.0:
  version "8.2.0"
  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -5138,7 +5458,7 @@ resolve@^1.10.0:
  dependencies:
    path-parse "^1.0.6"

-resolve@^1.13.1, resolve@^1.3.2, resolve@^1.8.1:
+resolve@^1.12.0, resolve@^1.13.1, resolve@^1.3.2, resolve@^1.8.1:
  version "1.17.0"
  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
@@ -5371,7 +5691,7 @@ source-map-url@^0.4.0:
  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
  integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=

-source-map@^0.5.0, source-map@^0.5.6:
+source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
  version "0.5.7"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -5591,6 +5911,25 @@ strong-log-transformer@^2.0.0:
    minimist "^1.2.0"
    through "^2.3.4"

+styled-system@^5.0.0, styled-system@^5.1.5:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.5.tgz#e362d73e1dbb5641a2fd749a6eba1263dc85075e"
+  integrity sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==
+  dependencies:
+    "@styled-system/background" "^5.1.2"
+    "@styled-system/border" "^5.1.5"
+    "@styled-system/color" "^5.1.2"
+    "@styled-system/core" "^5.1.2"
+    "@styled-system/flexbox" "^5.1.2"
+    "@styled-system/grid" "^5.1.2"
+    "@styled-system/layout" "^5.1.2"
+    "@styled-system/position" "^5.1.2"
+    "@styled-system/shadow" "^5.1.2"
+    "@styled-system/space" "^5.1.2"
+    "@styled-system/typography" "^5.1.2"
+    "@styled-system/variant" "^5.1.5"
+    object-assign "^4.1.1"
+
 supports-color@^5.3.0:
  version "5.5.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -6045,6 +6384,11 @@ yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==

+yaml@^1.7.2:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
+  integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
+
 yargs-parser@^10.0.0:
  version "10.1.0"
  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"