From 2ca59540c4404f8130495398094558c0e755f8c9 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Wed, 15 Apr 2020 12:19:59 +0200
Subject: [PATCH 01/28] refactor: version upgrade

---
 packages/commercetools/theme/package.json |  2 +-
 yarn.lock                                 | 26 +++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/commercetools/theme/package.json b/packages/commercetools/theme/package.json
index fe27b097e..01474b490 100644
--- a/packages/commercetools/theme/package.json
+++ b/packages/commercetools/theme/package.json
@@ -13,7 +13,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@storefront-ui/vue": "^0.6.4",
+    "@storefront-ui/vue": "^0.7.0",
     "@vue-storefront/commercetools": "^0.0.3",
     "@vue-storefront/commercetools-api": "^0.0.3",
     "@vue-storefront/nuxt": "^0.0.3",
diff --git a/yarn.lock b/yarn.lock
index 932647334..5725c1279 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2179,6 +2179,11 @@
   resolved "https://registry.yarnpkg.com/@storefront-ui/shared/-/shared-0.6.4.tgz#8e8582673d7739df76cce044ef2a12bec0ec1694"
   integrity sha512-gqv+l6Yl/55RtaQc26Ek0W6LW+s5Hhn7n13mC0qdtwkhmfwFnnr6wjonrvwcS5K2NvfRNug5Q1/At4UXGb6LHw==
 
+"@storefront-ui/shared@^0.7.1":
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/@storefront-ui/shared/-/shared-0.7.1.tgz#299105a9ff010277658a52de93ae623ed8778867"
+  integrity sha512-FF/JzUAjHNRY8gpzJRnj+/OpeshGQIRyvdHIXDJI7LQQ8a7gj6PurOhKly1+9+cTY015rvDoaaisox/YSmX4Ng==
+
 "@storefront-ui/vue@^0.5.1":
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/@storefront-ui/vue/-/vue-0.5.1.tgz#62c69d204232bd4050beb01963829fc4a4fbf751"
@@ -2221,6 +2226,27 @@
     vue2-leaflet "^2.1.1"
     webpack-dev-middleware "3.6.0"
 
+"@storefront-ui/vue@^0.7.0":
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/@storefront-ui/vue/-/vue-0.7.1.tgz#5ddccb5902689dbb59cdb0d008c65fe82c61ba40"
+  integrity sha512-lpOG1f8z6Ue80zsbAJ2CEalv9wpvTY6rVILL7ePT+J5J/IL6IFwlJ8GFFKE2bCk6FF4u2vswu8QL4ihfePs5Jg==
+  dependencies:
+    "@glidejs/glide" "^3.3.0"
+    "@storefront-ui/shared" "^0.7.1"
+    "@vue/babel-preset-app" "^4.0.0-alpha.1"
+    body-scroll-lock "^2.6.4"
+    core-js "^3.1.3"
+    hammerjs "^2.0.8"
+    leaflet "^1.5.1"
+    lozad "^1.9.0"
+    node-sass "^4.12.0"
+    sass-loader "^7.1.0"
+    simplebar-vue "^1.4.0"
+    vue-drag-drop "^1.1.4"
+    vue-fragment "^1.5.1"
+    vue2-leaflet "^2.1.1"
+    webpack-dev-middleware "3.6.0"
+
 "@szmarczak/http-timer@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"

From 40aab3a4973a0ec5deb1d275fd8ea0d9913bc616 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Wed, 15 Apr 2020 12:36:57 +0200
Subject: [PATCH 02/28] chore:  renamed spacing variables

---
 .../theme/components/CartSidebar.vue          | 12 ++---
 .../theme/components/InstagramFeed.vue        |  8 ++--
 .../theme/components/LoginModal.vue           | 10 ++--
 .../theme/components/checkout/CartPreview.vue | 20 ++++----
 .../theme/components/checkout/OrderReview.vue | 10 ++--
 .../theme-module/theme/pages/Category.vue     | 44 ++++++++---------
 .../theme-module/theme/pages/Checkout.vue     |  2 +-
 .../theme/pages/Checkout/OrderReview.vue      | 34 ++++++-------
 .../theme/pages/Checkout/Payment.vue          | 18 +++----
 .../theme/pages/Checkout/PersonalDetails.vue  | 14 +++---
 .../theme/pages/Checkout/Shipping.vue         | 12 ++---
 .../core/theme-module/theme/pages/Home.vue    | 28 +++++------
 .../theme-module/theme/pages/MyAccount.vue    |  4 +-
 .../theme/pages/MyAccount/LoyaltyCard.vue     |  2 +-
 .../theme/pages/MyAccount/MyNewsletter.vue    | 18 +++----
 .../theme/pages/MyAccount/MyProfile.vue       |  8 ++--
 .../theme/pages/MyAccount/MyReviews.vue       |  2 +-
 .../theme/pages/MyAccount/OrderHistory.vue    |  6 +--
 .../theme/pages/MyAccount/ShippingDetails.vue | 14 +++---
 .../core/theme-module/theme/pages/Product.vue | 48 +++++++++----------
 .../core/theme-module/theme/pages/index.vue   | 20 ++++----
 21 files changed, 167 insertions(+), 167 deletions(-)

diff --git a/packages/core/theme-module/theme/components/CartSidebar.vue b/packages/core/theme-module/theme/components/CartSidebar.vue
index 692fa3930..a1b4531b2 100644
--- a/packages/core/theme-module/theme/components/CartSidebar.vue
+++ b/packages/core/theme-module/theme/components/CartSidebar.vue
@@ -123,7 +123,7 @@ export default {
     margin: 0;
   }
   &__total-price {
-    margin: 0 0 var(--spacer-big) 0;
+    margin: 0 0 var(--spacer-xl) 0;
   }
 }
 .empty-cart {
@@ -142,11 +142,11 @@ export default {
     text-align: center;
   }
   &__label {
-    margin: var(--spacer-extra-big) 0 0 0;
+    margin: var(--spacer-2xl) 0 0 0;
     font: 400 var(--font-size-big) / 1.6 var(--body-font-family-secondary);
   }
   &__description {
-    margin: var(--spacer-big) 0 0 0;
+    margin: var(--spacer-xl) 0 0 0;
     font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-primary);
   }
   &__icon {
@@ -160,13 +160,13 @@ export default {
 }
 .collected-product-list {
   flex: 1;
-  margin: var(--spacer-big) calc(var(--spacer-big) * -1);
+  margin: var(--spacer-xl) calc(var(--spacer-xl) * -1);
 }
 .collected-product {
-  margin: var(--spacer-big) 0;
+  margin: var(--spacer-xl) 0;
   font: 300 var(--font-size-extra-small) / 1.6 var(--body-font-family-secondary);
   &__properties {
-    margin: var(--spacer-big) 0 0 0;
+    margin: var(--spacer-xl) 0 0 0;
   }
   &__actions {
     transition: opacity 150ms ease-in-out;
diff --git a/packages/core/theme-module/theme/components/InstagramFeed.vue b/packages/core/theme-module/theme/components/InstagramFeed.vue
index 975e989eb..72c18705c 100644
--- a/packages/core/theme-module/theme/components/InstagramFeed.vue
+++ b/packages/core/theme-module/theme/components/InstagramFeed.vue
@@ -46,9 +46,9 @@ export default {
   &__row {
     display: flex;
     & + & {
-      margin-top: calc(var(--spacer-big) / 2);
+      margin-top: calc(var(--spacer-xl) / 2);
       @include for-desktop {
-        margin-top: var(--spacer-big);
+        margin-top: var(--spacer-xl);
       }
     }
   }
@@ -56,9 +56,9 @@ export default {
     margin: 0;
     flex: 1;
     & + & {
-      margin-left: calc(var(--spacer-big) / 2);
+      margin-left: calc(var(--spacer-xl) / 2);
       @include for-desktop {
-        margin-left: var(--spacer-big);
+        margin-left: var(--spacer-xl);
       }
     }
   }
diff --git a/packages/core/theme-module/theme/components/LoginModal.vue b/packages/core/theme-module/theme/components/LoginModal.vue
index 38dc931dd..b65323fdb 100644
--- a/packages/core/theme-module/theme/components/LoginModal.vue
+++ b/packages/core/theme-module/theme/components/LoginModal.vue
@@ -197,7 +197,7 @@ export default {
 
 .form {
   &__element {
-    margin: 0 0 var(--spacer-extra-big) 0;
+    margin: 0 0 var(--spacer-2xl) 0;
   }
 }
 .action,
@@ -205,18 +205,18 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: var(--spacer-big) 0 var(--spacer-big) 0;
+  margin: var(--spacer-xl) 0 var(--spacer-xl) 0;
   font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
   & > * {
     margin: 0 0 0 var(--spacer);
   }
 }
 .action {
-  margin: var(--spacer-big) 0 var(--spacer-big) 0;
+  margin: var(--spacer-xl) 0 var(--spacer-xl) 0;
 }
 .bottom {
-  padding: var(--spacer-extra-big) 0 0 0;
-  margin: var(--spacer-extra-big) 0 0 0;
+  padding: var(--spacer-2xl) 0 0 0;
+  margin: var(--spacer-2xl) 0 0 0;
   border: 1px solid var(--c-light);
   border-width: 1px 0 0 0;
 }
diff --git a/packages/core/theme-module/theme/components/checkout/CartPreview.vue b/packages/core/theme-module/theme/components/checkout/CartPreview.vue
index 030dc87ac..380082c33 100644
--- a/packages/core/theme-module/theme/components/checkout/CartPreview.vue
+++ b/packages/core/theme-module/theme/components/checkout/CartPreview.vue
@@ -175,8 +175,8 @@ export default {
   box-sizing: border-box;
   width: 100%;
   background-color: #f1f2f3;
-  padding: var(--spacer-extra-big);
-  margin-bottom: var(--spacer-big);
+  padding: var(--spacer-2xl);
+  margin-bottom: var(--spacer-xl);
   &:last-child {
     margin-bottom: 0;
   }
@@ -185,13 +185,13 @@ export default {
   }
 }
 .title {
-  margin-bottom: var(--spacer-extra-big);
+  margin-bottom: var(--spacer-2xl);
 }
 .total-items {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: var(--spacer-big);
+  margin-bottom: var(--spacer-xl);
 }
 .property {
   margin-bottom: var(--spacer);
@@ -200,7 +200,7 @@ export default {
   }
 }
 .property-total {
-  margin-top: var(--spacer-extra-big);
+  margin-top: var(--spacer-2xl);
   font-size: var(--font-size-extra-big-desktop);
   font-weight: 500;
   ::v-deep .sf-property__name {
@@ -212,12 +212,12 @@ export default {
 }
 .collected-product {
   &:not(:last-child) {
-    margin-bottom: var(--spacer-big);
+    margin-bottom: var(--spacer-xl);
   }
 }
 .characteristic {
   &:not(:last-child) {
-    margin-bottom: var(--spacer-big);
+    margin-bottom: var(--spacer-xl);
   }
 }
 .promo-code {
@@ -228,7 +228,7 @@ export default {
     font-size: var(--font-size-big-desktop);
   }
   &__input {
-    margin: var(--spacer-big) 0;
+    margin: var(--spacer-xl) 0;
     ::v-deep input {
       border-color: var(--c-gray-variant);
     }
@@ -236,7 +236,7 @@ export default {
 }
 .product {
   &__properties {
-    margin: var(--spacer-big) 0 0 0;
+    margin: var(--spacer-xl) 0 0 0;
   }
   &__property,
   &__action {
@@ -245,7 +245,7 @@ export default {
   &__action {
     color: var(--c-gray-variant);
     font-size: var(--font-size-extra-small-desktop);
-    margin: 0 0 var(--spacer-small) 0;
+    margin: 0 0 var(--spacer-sm) 0;
     &:last-child {
       margin: 0;
     }
diff --git a/packages/core/theme-module/theme/components/checkout/OrderReview.vue b/packages/core/theme-module/theme/components/checkout/OrderReview.vue
index 5febde615..431f8cd19 100644
--- a/packages/core/theme-module/theme/components/checkout/OrderReview.vue
+++ b/packages/core/theme-module/theme/components/checkout/OrderReview.vue
@@ -84,8 +84,8 @@ export default {
   box-sizing: border-box;
   width: 100%;
   background-color: #f1f2f3;
-  padding: var(--spacer-extra-big);
-  margin-bottom: var(--spacer-big);
+  padding: var(--spacer-2xl);
+  margin-bottom: var(--spacer-xl);
   &:last-child {
     margin-bottom: 0;
   }
@@ -96,7 +96,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: var(--spacer-big);
+    margin-bottom: var(--spacer-xl);
   }
   &__title {
     font-family: var(--body-font-family-primary);
@@ -105,10 +105,10 @@ export default {
   }
 }
 .title {
-  margin-bottom: var(--spacer-extra-big);
+  margin-bottom: var(--spacer-2xl);
 }
 .content {
-  margin: 0 0 var(--spacer-big) 0;
+  margin: 0 0 var(--spacer-xl) 0;
   color: var(--c-text);
   font-size: var(--font-size-extra-small-desktop);
   font-weight: 300;
diff --git a/packages/core/theme-module/theme/pages/Category.vue b/packages/core/theme-module/theme/pages/Category.vue
index d825662bd..7945ef441 100644
--- a/packages/core/theme-module/theme/pages/Category.vue
+++ b/packages/core/theme-module/theme/pages/Category.vue
@@ -478,19 +478,19 @@ export default {
   }
 }
 .section {
-  padding: 0 var(--spacer-big);
+  padding: 0 var(--spacer-xl);
   @include for-desktop {
     padding: 0;
   }
 }
 .breadcrumbs {
-  padding: var(--spacer-big) var(--spacer-extra-big) var(--spacer-extra-big)
-    var(--spacer-extra-big);
+  padding: var(--spacer-xl) var(--spacer-2xl) var(--spacer-2xl)
+    var(--spacer-2xl);
 }
 .navbar {
   position: relative;
   display: flex;
-  font: 300 var(--font-size-small) / 1.6 var(--body-font-family-primary);
+  font: 300 var(--font-size-small) / 1.6 var(--font-family-primary);
   @include for-desktop {
     border: 1px solid var(--c-light);
     border-width: 1px 0 1px 0;
@@ -498,8 +498,8 @@ export default {
   &::after {
     position: absolute;
     bottom: 0;
-    left: var(--spacer-big);
-    width: calc(100% - calc(var(--spacer-big) * 2));
+    left: var(--spacer-xl);
+    width: calc(100% - calc(var(--spacer-xl) * 2));
     height: 1px;
     background: var(--c-light);
     content: "";
@@ -511,16 +511,16 @@ export default {
   &__main {
     display: flex;
     align-items: center;
-    padding: var(--spacer-medium) 0;
+    padding: var(--spacer-lg) 0;
     font-size: var(--font-size-small);
     line-height: 1.6;
     @include for-desktop {
-      padding: var(--spacer-big) 0;
+      padding: var(--spacer-xl) 0;
     }
   }
   &__aside {
     flex: 0 0 15%;
-    padding: var(--spacer-big) var(--spacer-extra-big);
+    padding: var(--spacer-xl) var(--spacer-2xl);
     border: 1px solid var(--c-light);
     border-width: 0 1px 0 0;
   }
@@ -542,7 +542,7 @@ export default {
     display: flex;
     align-items: center;
     @include for-desktop {
-      margin: 0 0 0 var(--spacer-extra-big);
+      margin: 0 0 0 var(--spacer-2xl);
     }
     svg {
       fill: var(--c-text-muted);
@@ -560,7 +560,7 @@ export default {
   &__sort {
     display: flex;
     align-items: center;
-    margin: 0 auto 0 var(--spacer-extra-big);
+    margin: 0 auto 0 var(--spacer-2xl);
     --select-font-size: var(--font-size-small);
   }
   &__counter {
@@ -572,9 +572,9 @@ export default {
   &__view {
     display: flex;
     align-items: center;
-    margin: 0 var(--spacer-extra-big);
+    margin: 0 var(--spacer-2xl);
     @include for-desktop {
-      margin: var(--spacer-big);
+      margin: var(--spacer-xl);
     }
     &-icon {
       margin: 0 0 0 0.625rem;
@@ -593,7 +593,7 @@ export default {
 }
 .sidebar {
   flex: 0 0 15%;
-  padding: var(--spacer-extra-big);
+  padding: var(--spacer-2xl);
   border: 1px solid var(--c-light);
   border-width: 0 1px 0 0;
 }
@@ -602,7 +602,7 @@ export default {
   flex: 1;
   margin: 0 calc(var(--spacer) * -1);
   @include for-desktop {
-    margin: var(--spacer-big);
+    margin: var(--spacer-xl);
   }
   @include for-mobile {
     display: flex;
@@ -624,7 +624,7 @@ export default {
     --product-card-padding: var(--spacer);
     flex: 1 1 50%;
     @include for-desktop {
-      --product-card-padding: var(--spacer-big);
+      --product-card-padding: var(--spacer-xl);
       flex: 1 1 25%;
     }
   }
@@ -648,7 +648,7 @@ export default {
     --product-card-horizontal-padding: var(--spacer);
     flex: 0 0 100%;
     @include for-desktop {
-      --product-card-horizontal-padding: var(--spacer-big);
+      --product-card-horizontal-padding: var(--spacer-xl);
     }
   }
   &__slide-enter {
@@ -663,18 +663,18 @@ export default {
     @include for-desktop {
       display: flex;
       justify-content: center;
-      margin: var(--spacer-extra-big) 0 0 0;
+      margin: var(--spacer-2xl) 0 0 0;
     }
   }
 }
 .filters {
-  padding: var(--spacer-big);
+  padding: var(--spacer-xl);
   &__title {
-    margin: calc(var(--spacer-big) * 3) 0 var(--spacer-big) 0;
+    margin: calc(var(--spacer-xl) * 3) 0 var(--spacer-xl) 0;
     font: 400 var(--font-size-extra-big) / 1.6 var(--body-font-family-secondary);
     line-height: 1.6;
     &:first-child {
-      margin: 0 0 var(--spacer-big) 0;
+      margin: 0 0 var(--spacer-xl) 0;
     }
   }
   &__colors {
@@ -687,7 +687,7 @@ export default {
     margin: var(--spacer) 0;
   }
   &__buttons {
-    margin: calc(var(--spacer-big) * 3) 0 0 0;
+    margin: calc(var(--spacer-xl) * 3) 0 0 0;
   }
   &__button-clear {
     --button-background: var(--c-light);
diff --git a/packages/core/theme-module/theme/pages/Checkout.vue b/packages/core/theme-module/theme/pages/Checkout.vue
index 10099bda4..f148a2923 100644
--- a/packages/core/theme-module/theme/pages/Checkout.vue
+++ b/packages/core/theme-module/theme/pages/Checkout.vue
@@ -84,7 +84,7 @@ export default {
 
 #checkout {
   box-sizing: border-box;
-  padding: 0 var(--spacer-big);
+  padding: 0 var(--spacer-xl);
   @include for-desktop {
     max-width: 1240px;
     margin: 0 auto;
diff --git a/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue b/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
index 8c25209e8..c64cb3f82 100644
--- a/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
@@ -240,7 +240,7 @@ export default {
 @import "~@storefront-ui/vue/styles";
 
 .title {
-  margin: 0 0 var(--spacer-extra-big);
+  margin: 0 0 var(--spacer-2xl);
 }
 .form {
   @include for-desktop {
@@ -249,7 +249,7 @@ export default {
     align-items: center;
   }
   &__element {
-    margin: 0 0 var(--spacer-extra-big) 0;
+    margin: 0 0 var(--spacer-2xl) 0;
     @include for-desktop {
       flex: 0 0 100%;
     }
@@ -259,7 +259,7 @@ export default {
       }
       &-even {
         @include for-desktop {
-          padding: 0 0 0 var(--spacer-extra-big);
+          padding: 0 0 0 var(--spacer-2xl);
         }
       }
     }
@@ -276,7 +276,7 @@ export default {
   }
   &__action-button {
     &--secondary {
-      --button-margin: var(--spacer-big) 0;
+      --button-margin: var(--spacer-xl) 0;
       @include for-desktop {
         order: -1;
         --button-margin: 0;
@@ -292,11 +292,11 @@ export default {
   }
   &__radio-group {
     flex: 0 0 100%;
-    margin: 0 0 var(--spacer-extra-big) 0;
+    margin: 0 0 var(--spacer-2xl) 0;
   }
 }
 .table {
-  margin: 0 0 var(--spacer-big) 0;
+  margin: 0 0 var(--spacer-xl) 0;
   &__header {
     font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
     @include for-desktop {
@@ -335,25 +335,25 @@ export default {
 }
 .summary {
   background: var(--c-light);
-  margin: 0 calc(var(--spacer-big) * -1);
-  padding: var(--spacer-big);
+  margin: 0 calc(var(--spacer-xl) * -1);
+  padding: var(--spacer-xl);
   @include for-desktop {
     background: transparent;
   }
   &__group {
     @include for-desktop {
       display: flex;
-      margin: 0 0 var(--spacer-extra-big) 0;
+      margin: 0 0 var(--spacer-2xl) 0;
     }
   }
   &__terms {
     flex: 1;
     order: -1;
-    margin: 0 0 var(--spacer-big) 0;
+    margin: 0 0 var(--spacer-xl) 0;
   }
   &__total {
-    margin: 0 0 var(--spacer-extra-big) 0;
-    padding: 0 var(--spacer-big);
+    margin: 0 0 var(--spacer-2xl) 0;
+    padding: 0 var(--spacer-xl);
     flex: 0 0 16.875rem;
     @include for-desktop {
       padding: 0;
@@ -361,7 +361,7 @@ export default {
   }
   &__action-button {
     &--secondary {
-      margin: var(--spacer-big) 0;
+      margin: var(--spacer-xl) 0;
       @include for-desktop {
         order: -1;
         margin: 0;
@@ -374,20 +374,20 @@ export default {
       var(--body-font-family-secondary);
     --property-value-font: 500 var(--font-size-big) / 1.6
       var(--body-font-family-secondary);
-    margin: var(--spacer-big) 0 0 0;
+    margin: var(--spacer-xl) 0 0 0;
     text-transform: uppercase;
     font: 500 var(--font-size-big) / 1.6 var(--body-font-family-secondary);
   }
 }
 .property {
-  margin: 0 0 var(--spacer-big) 0;
+  margin: 0 0 var(--spacer-xl) 0;
   font: 400 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
   &__name {
     color: var(--c-text-muted);
   }
 }
 .accordion {
-  margin: 0 0 var(--spacer-extra-big) 0;
+  margin: 0 0 var(--spacer-2xl) 0;
   &__item {
     display: flex;
     align-items: flex-start;
@@ -400,7 +400,7 @@ export default {
   }
 }
 .content {
-  margin: 0 0 var(--spacer-big) 0;
+  margin: 0 0 var(--spacer-xl) 0;
   font: 300 var(--font-size-mall) / 1.6 var(--body-font-family-secondary);
   color: var(--c-text);
   &:last-child {
diff --git a/packages/core/theme-module/theme/pages/Checkout/Payment.vue b/packages/core/theme-module/theme/pages/Checkout/Payment.vue
index 895792f6a..034dbe0cd 100644
--- a/packages/core/theme-module/theme/pages/Checkout/Payment.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/Payment.vue
@@ -188,7 +188,7 @@ export default {
 <style lang="scss" scoped>
 @import "~@storefront-ui/vue/styles";
 .title {
-  margin: 0 0 var(--spacer-extra-big);
+  margin: 0 0 var(--spacer-2xl);
 }
 .form {
   @include for-desktop {
@@ -197,7 +197,7 @@ export default {
     align-items: center;
   }
   &__element {
-    margin: 0 0 var(--spacer-extra-big) 0;
+    margin: 0 0 var(--spacer-2xl) 0;
     @include for-desktop {
       flex: 0 0 100%;
     }
@@ -207,7 +207,7 @@ export default {
       }
       &-even {
         @include for-desktop {
-          padding: 0 0 0 var(--spacer-extra-big);
+          padding: 0 0 0 var(--spacer-2xl);
         }
       }
     }
@@ -224,7 +224,7 @@ export default {
   }
   &__action-button {
     &--secondary {
-      margin: var(--spacer-big) 0;
+      margin: var(--spacer-xl) 0;
       @include for-desktop {
         order: -1;
         --button-margin: 0;
@@ -240,13 +240,13 @@ export default {
   }
   &__radio-group {
     flex: 0 0 100%;
-    margin: 0 0 var(--spacer-extra-big) 0;
+    margin: 0 0 var(--spacer-2xl) 0;
   }
 }
 .payment-methods {
   @include for-desktop {
     display: flex;
-    padding: var(--spacer-big) 0;
+    padding: var(--spacer-xl) 0;
     border: 1px solid var(--c-light);
     border-width: 1px 0;
   }
@@ -270,7 +270,7 @@ export default {
   }
 }
 .credit-card-form {
-  margin: 0 0 var(--spacer-big) 0;
+  margin: 0 0 var(--spacer-xl) 0;
   @include for-desktop {
     flex: 0 0 66.666%;
     padding: 0 calc((100% - 66.666%) / 2);
@@ -279,7 +279,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin: 0 0 var(--spacer-big) 0;
+    margin: 0 0 var(--spacer-xl) 0;
   }
   &__label {
     flex: unset;
@@ -295,7 +295,7 @@ export default {
       flex: 0 0 46.666%;
     }
     & + & {
-      margin: 0 0 0 var(--spacer-big);
+      margin: 0 0 0 var(--spacer-xl);
     }
   }
 }
diff --git a/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue b/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue
index 5fb3bc403..776a33cd5 100644
--- a/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue
@@ -135,7 +135,7 @@ export default {
 <style lang="scss" scoped>
 @import "~@storefront-ui/vue/styles";
 .title {
-  margin: 0 0 var(--spacer-extra-big);
+  margin: 0 0 var(--spacer-2xl);
 }
 .form {
   @include for-desktop {
@@ -144,7 +144,7 @@ export default {
     align-items: center;
   }
   &__element {
-    margin: 0 0 var(--spacer-extra-big) 0;
+    margin: 0 0 var(--spacer-2xl) 0;
     @include for-desktop {
       flex: 0 0 100%;
     }
@@ -154,7 +154,7 @@ export default {
       }
       &-even {
         @include for-desktop {
-          padding: 0 0 0 var(--spacer-extra-big);
+          padding: 0 0 0 var(--spacer-2xl);
         }
       }
     }
@@ -171,7 +171,7 @@ export default {
   }
   &__action-button {
     &--secondary {
-      margin: var(--spacer-big) 0;
+      margin: var(--spacer-xl) 0;
       @include for-desktop {
         --button-margin: 0;
         text-align: right;
@@ -191,17 +191,17 @@ export default {
   --button-text-decoration: none;
 }
 .characteristic {
-  margin: 0 0 var(--spacer-big) 0;
+  margin: 0 0 var(--spacer-xl) 0;
   &:last-child {
     margin: 0;
   }
 }
 .modal {
   &__heading {
-    margin: 0 0 var(--spacer-extra-big) 0;
+    margin: 0 0 var(--spacer-2xl) 0;
   }
   &__button {
-    margin: var(--spacer-extra-big) 0 0 0;
+    margin: var(--spacer-2xl) 0 0 0;
   }
 }
 </style>
diff --git a/packages/core/theme-module/theme/pages/Checkout/Shipping.vue b/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
index 6dc1ad7f5..7e30aea17 100644
--- a/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
@@ -176,7 +176,7 @@ export default {
 <style lang="scss" scoped>
 @import "~@storefront-ui/vue/styles";
 .title {
-  margin: 0 0 var(--spacer-extra-big);
+  margin: 0 0 var(--spacer-2xl);
 }
 .form {
   @include for-desktop {
@@ -185,7 +185,7 @@ export default {
     align-items: center;
   }
   &__element {
-    margin: 0 0 var(--spacer-extra-big) 0;
+    margin: 0 0 var(--spacer-2xl) 0;
     @include for-desktop {
       flex: 0 0 100%;
     }
@@ -195,7 +195,7 @@ export default {
       }
       &-even {
         @include for-desktop {
-          padding: 0 0 0 var(--spacer-extra-big);
+          padding: 0 0 0 var(--spacer-2xl);
         }
       }
     }
@@ -212,7 +212,7 @@ export default {
   }
   &__action-button {
     &--secondary {
-      margin: var(--spacer-big) 0;
+      margin: var(--spacer-xl) 0;
       @include for-desktop {
         order: -1;
         --button-margin: 0;
@@ -228,11 +228,11 @@ export default {
   }
   &__radio-group {
     flex: 0 0 100%;
-    margin: 0 0 var(--spacer-extra-big) 0;
+    margin: 0 0 var(--spacer-2xl) 0;
   }
 }
 .shipping {
-  margin: 0 calc(var(--spacer-big) * -1);
+  margin: 0 calc(var(--spacer-xl) * -1);
   &__label {
     display: flex;
     justify-content: space-between;
diff --git a/packages/core/theme-module/theme/pages/Home.vue b/packages/core/theme-module/theme/pages/Home.vue
index 264541a5e..89edd7764 100644
--- a/packages/core/theme-module/theme/pages/Home.vue
+++ b/packages/core/theme-module/theme/pages/Home.vue
@@ -247,15 +247,15 @@ export default {
   }
 }
 .section {
-  padding: 0 var(--spacer-big);
+  padding: 0 var(--spacer-xl);
   @include for-desktop {
     padding: 0;
   }
 }
 .banner-grid {
-  margin: var(--spacer-big) 0;
+  margin: var(--spacer-xl) 0;
   @include for-desktop {
-    margin: var(--spacer-extra-big) 0;
+    margin: var(--spacer-2xl) 0;
   }
 }
 .banner-central {
@@ -264,16 +264,16 @@ export default {
   }
 }
 .call-to-action {
-  margin: var(--spacer-big) 0;
+  margin: var(--spacer-xl) 0;
   @include for-desktop {
-    margin: calc(var(--spacer-extra-big) * 2) 0;
+    margin: calc(var(--spacer-2xl) * 2) 0;
   }
 }
 .product-carousel {
-  margin: 0 calc(var(--spacer-big) * -1) 0 0;
+  margin: 0 calc(var(--spacer-xl) * -1) 0 0;
   @include for-desktop {
-    margin: var(--spacer-big) 0;
-    --carousel-padding: var(--spacer-big);
+    margin: var(--spacer-xl) 0;
+    --carousel-padding: var(--spacer-xl);
     --carousel-max-width: calc(100% - 13.5rem);
   }
 }
@@ -289,9 +289,9 @@ export default {
   &__row {
     display: flex;
     & + & {
-      margin: calc(var(--spacer-big) / 2) 0 0 0;
+      margin: calc(var(--spacer-xl) / 2) 0 0 0;
       @include for-desktop {
-        margin: var(--spacer-big) 0 0 0;
+        margin: var(--spacer-xl) 0 0 0;
       }
     }
   }
@@ -299,15 +299,15 @@ export default {
     flex: 1;
     margin: 0;
     & + & {
-      margin: 0 0 0 calc(var(--spacer-big) / 2);
+      margin: 0 0 0 calc(var(--spacer-xl) / 2);
       @include for-desktop {
-        margin: 0 0 0 var(--spacer-big);
+        margin: 0 0 0 var(--spacer-xl);
       }
     }
   }
 }
 .banner-app {
-  --banner-title-margin: var(--spacer-big) 0 0 0;
+  --banner-title-margin: var(--spacer-xl) 0 0 0;
   --banner-title-font-size: var(--h1-font-size);
   --banner-title-font-weight: var(--h1-font-weight);
   --banner-subtitle-font-size: var(--font-size-extra-big);
@@ -324,7 +324,7 @@ export default {
   &__image {
     width: 22%;
     & + & {
-      margin: 0 0 0 var(--spacer-big);
+      margin: 0 0 0 var(--spacer-xl);
     }
   }
 }
diff --git a/packages/core/theme-module/theme/pages/MyAccount.vue b/packages/core/theme-module/theme/pages/MyAccount.vue
index 9fc3617b3..e0da46c67 100644
--- a/packages/core/theme-module/theme/pages/MyAccount.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount.vue
@@ -151,7 +151,7 @@ export default {
   }
 }
 .breadcrumbs {
-  padding: var(--spacer-big) var(--spacer-extra-big) var(--spacer-extra-big)
-    var(--spacer-extra-big);
+  padding: var(--spacer-xl) var(--spacer-2xl) var(--spacer-2xl)
+    var(--spacer-2xl);
 }
 </style>
diff --git a/packages/core/theme-module/theme/pages/MyAccount/LoyaltyCard.vue b/packages/core/theme-module/theme/pages/MyAccount/LoyaltyCard.vue
index 74c75fd08..0f2d7acc0 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/LoyaltyCard.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/LoyaltyCard.vue
@@ -29,7 +29,7 @@ export default {
   }
 }
 .message {
-  margin: 0 0 var(--spacer-extra-big) 0;
+  margin: 0 0 var(--spacer-2xl) 0;
   font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
   &__label {
     font-weight: 500;
diff --git a/packages/core/theme-module/theme/pages/MyAccount/MyNewsletter.vue b/packages/core/theme-module/theme/pages/MyAccount/MyNewsletter.vue
index 68c0ba417..d13948fb8 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/MyNewsletter.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/MyNewsletter.vue
@@ -54,11 +54,11 @@ export default {
 <style lang='scss' scoped>
 @import "~@storefront-ui/vue/styles";
 .shipping-list {
-  margin: 0 0 var(--spacer-extra-big) 0;
+  margin: 0 0 var(--spacer-2xl) 0;
 }
 .shipping {
   display: flex;
-  padding: var(--spacer-big) 0;
+  padding: var(--spacer-xl) 0;
   border: 1px solid var(--c-light);
   border-width: 1px 0 0 0;
   &:last-child {
@@ -87,11 +87,11 @@ export default {
       --button-background: var(--c-light-variant);
     }
     @include for-desktop {
-      margin: 0 0 0 var(--spacer-big);
+      margin: 0 0 0 var(--spacer-xl);
     }
   }
   &__address {
-    margin: 0 0 var(--spacer-big) 0;
+    margin: 0 0 var(--spacer-xl) 0;
     &:last-child {
       margin: 0;
     }
@@ -109,16 +109,16 @@ export default {
 }
 .form {
   &__element {
-    margin: 0 0 var(--spacer-big) 0;
+    margin: 0 0 var(--spacer-xl) 0;
     &:last-child {
       margin: 0;
     }
   }
   &__checkbox-group {
-    margin: 0 0 var(--spacer-extra-big) 0;
+    margin: 0 0 var(--spacer-2xl) 0;
   }
   &__title {
-    margin: 0 0 var(--spacer-big) 0;
+    margin: 0 0 var(--spacer-xl) 0;
     font: 500 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
   }
   &__button {
@@ -129,7 +129,7 @@ export default {
   }
 }
 .message {
-  margin: 0 0 var(--spacer-extra-big) 0;
+  margin: 0 0 var(--spacer-2xl) 0;
   font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
   &__label {
     font-weight: 500;
@@ -143,7 +143,7 @@ a {
   }
 }
 .notice {
-  margin: var(--spacer-big) 0 0 0;
+  margin: var(--spacer-xl) 0 0 0;
   font: 300 var(--font-size-extra-small) / 1.6 var(--body-font-family-secondary);
 }
 .action-button {
diff --git a/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue b/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
index fd72ff0fa..54d776c3b 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
@@ -201,7 +201,7 @@ export default {
 .form {
   &__element {
     display: block;
-    margin: 0 0 var(--spacer-extra-big) 0;
+    margin: 0 0 var(--spacer-2xl) 0;
   }
 
   &__button {
@@ -218,7 +218,7 @@ export default {
     .form__element {
       @include for-desktop {
         flex: 1;
-        margin-right: var(--spacer-extra-big);
+        margin-right: var(--spacer-2xl);
       }
 
       &:last-child {
@@ -234,7 +234,7 @@ export default {
   line-height: 1.6;
 }
 .message {
-  margin: 0 0 var(--spacer-extra-big) 0;
+  margin: 0 0 var(--spacer-2xl) 0;
   font-size: var(--font-size-regular-mobile);
   @include for-desktop {
     font-size: var(--font-size-regular-desktop);
@@ -244,7 +244,7 @@ export default {
   }
 }
 .notice {
-  margin: var(--spacer-big) 0 0 0;
+  margin: var(--spacer-xl) 0 0 0;
   font-size: var(--font-size-extra-small-mobile);
   @include for-desktop {
     max-width: 70%;
diff --git a/packages/core/theme-module/theme/pages/MyAccount/MyReviews.vue b/packages/core/theme-module/theme/pages/MyAccount/MyReviews.vue
index d297a75d7..f8075c517 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/MyReviews.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/MyReviews.vue
@@ -29,7 +29,7 @@ export default {
   }
 }
 .message {
-  margin: 0 0 var(--spacer-extra-big) 0;
+  margin: 0 0 var(--spacer-2xl) 0;
   font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
   &__label {
     font-weight: 500;
diff --git a/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue b/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue
index f0d7b5eed..5106d0fac 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue
@@ -104,7 +104,7 @@ export default {
 
 .no-orders {
   &__title {
-    margin: 0 0 var(--spacer-big) 0;
+    margin: 0 0 var(--spacer-xl) 0;
     font: 500 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
   }
   &__content {
@@ -119,7 +119,7 @@ export default {
 }
 .orders {
   &__download-all {
-    --button-padding: 0.625rem var(--spacer-big);
+    --button-padding: 0.625rem var(--spacer-xl);
     --button-font-size: var(--font-size-extra-small);
     white-space: nowrap;
   }
@@ -130,7 +130,7 @@ export default {
   }
 }
 .message {
-  margin: 0 0 var(--spacer-extra-big) 0;
+  margin: 0 0 var(--spacer-2xl) 0;
   font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
   &__label {
     font-weight: 500;
diff --git a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
index c6cbd7b01..3bc76ed32 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
@@ -342,7 +342,7 @@ export default {
 .form {
   &__element {
     display: block;
-    margin-bottom: var(--spacer-extra-big);
+    margin-bottom: var(--spacer-2xl);
   }
 
   &__button {
@@ -359,7 +359,7 @@ export default {
     .form__element {
       @include for-desktop {
         flex: 1;
-        margin-right: var(--spacer-extra-big);
+        margin-right: var(--spacer-2xl);
       }
 
       &:last-child {
@@ -369,7 +369,7 @@ export default {
   }
 }
 .message {
-  margin: 0 0 var(--spacer-extra-big) 0;
+  margin: 0 0 var(--spacer-2xl) 0;
   font-family: var(--body-font-family-primary);
   font-weight: var(--body-font-weight-primary);
   line-height: 1.6;
@@ -379,11 +379,11 @@ export default {
   }
 }
 .shipping-list {
-  margin-bottom: var(--spacer-extra-big);
+  margin-bottom: var(--spacer-2xl);
 }
 .shipping {
   display: flex;
-  padding: var(--spacer-big) 0;
+  padding: var(--spacer-xl) 0;
   border-top: 1px solid var(--c-light);
   &:last-child {
     border-bottom: 1px solid var(--c-light);
@@ -414,11 +414,11 @@ export default {
     background-color: var(--c-light);
     color: var(--c-text-muted);
     @include for-desktop {
-      margin-left: var(--spacer-big);
+      margin-left: var(--spacer-xl);
     }
   }
   &__address {
-    margin: 0 0 var(--spacer-big) 0;
+    margin: 0 0 var(--spacer-xl) 0;
     &:last-child {
       margin: 0;
     }
diff --git a/packages/core/theme-module/theme/pages/Product.vue b/packages/core/theme-module/theme/pages/Product.vue
index 79f2f5342..d54df8213 100644
--- a/packages/core/theme-module/theme/pages/Product.vue
+++ b/packages/core/theme-module/theme/pages/Product.vue
@@ -362,14 +362,14 @@ export default {
   }
 }
 .section {
-  padding: 0 var(--spacer-big);
+  padding: 0 var(--spacer-xl);
   @include for-desktop {
     padding: 0;
   }
 }
 .breadcrumbs {
-  padding: var(--spacer-big) var(--spacer-extra-big) var(--spacer-extra-big)
-    var(--spacer-extra-big);
+  padding: var(--spacer-xl) var(--spacer-2xl) var(--spacer-2xl)
+    var(--spacer-2xl);
 }
 .product {
   @include for-desktop {
@@ -380,9 +380,9 @@ export default {
     flex: 1;
   }
   &__description {
-    padding: 0 var(--spacer-big);
+    padding: 0 var(--spacer-xl);
     @include for-desktop {
-      margin: 0 0 0 calc(var(--spacer-big) * 5);
+      margin: 0 0 0 calc(var(--spacer-xl) * 5);
     }
   }
 }
@@ -393,7 +393,7 @@ export default {
   &__heading {
     --heading-title-font-size: var(--font-size-big);
     --heading-title-font-weight: var(--body-font-weight-primary);
-    margin: var(--spacer-big) 0 0 0;
+    margin: var(--spacer-xl) 0 0 0;
     @include for-desktop {
       --heading-title-font-size: var(--h1-font-size);
       --heading-title-font-weight: var(--body-font-weight-secondary);
@@ -414,7 +414,7 @@ export default {
   &__sub-rating {
     display: flex;
     align-items: center;
-    margin: calc(var(--spacer-big) / 2) 0 0 0;
+    margin: calc(var(--spacer-xl) / 2) 0 0 0;
     @include for-desktop {
       margin: 0;
     }
@@ -434,7 +434,7 @@ export default {
   }
   &__action {
     display: flex;
-    margin: var(--spacer-big) 0 calc(var(--spacer-big) / 2);
+    margin: var(--spacer-xl) 0 calc(var(--spacer-xl) / 2);
     @include for-desktop {
       justify-content: flex-end;
     }
@@ -442,17 +442,17 @@ export default {
   &__add-to-cart {
     margin: 1.5rem 0 0 0;
     @include for-desktop {
-      margin: var(--spacer-extra-big) 0 0 0;
+      margin: var(--spacer-2xl) 0 0 0;
     }
   }
   &__alert {
     margin: 1.5rem 0 0 0;
   }
   &__attribute {
-    margin: 0 0 var(--spacer-big) 0;
+    margin: 0 0 var(--spacer-xl) 0;
   }
   &__description {
-    margin: var(--spacer-extra-big) 0 calc(var(--spacer-big) * 3) 0;
+    margin: var(--spacer-2xl) 0 calc(var(--spacer-xl) * 3) 0;
     font-family: var(--body-font-family-secondary);
     font-size: var(--font-size-regular);
     line-height: 1.6;
@@ -461,28 +461,28 @@ export default {
     }
   }
   &__properties {
-    margin: var(--spacer-big) 0 0 0;
+    margin: var(--spacer-xl) 0 0 0;
   }
   &__tabs {
-    margin: var(--spacer-big) 0 0 0;
+    margin: var(--spacer-xl) 0 0 0;
     @include for-desktop {
-      margin: calc(5 * var(--spacer-big)) 0 0 0;
+      margin: calc(5 * var(--spacer-xl)) 0 0 0;
     }
     p {
       margin: 0;
     }
   }
   &__review {
-    padding: var(--spacer-big) 0;
+    padding: var(--spacer-xl) 0;
     border: 1px solid var(--c-light);
     border-width: 0 0 1px 0;
   }
 }
 .product-carousel {
-  margin: 0 calc(var(--spacer-big) * -1) 0 0;
+  margin: 0 calc(var(--spacer-xl) * -1) 0 0;
   @include for-desktop {
-    margin: var(--spacer-big) 0;
-    --carousel-padding: var(--spacer-big);
+    margin: var(--spacer-xl) 0;
+    --carousel-padding: var(--spacer-xl);
     --carousel-max-width: calc(100% - 13.5rem);
   }
 }
@@ -497,9 +497,9 @@ export default {
   &__row {
     display: flex;
     & + & {
-      margin: calc(var(--spacer-big) / 2) 0 0 0;
+      margin: calc(var(--spacer-xl) / 2) 0 0 0;
       @include for-desktop {
-        margin: var(--spacer-big) 0 0 0;
+        margin: var(--spacer-xl) 0 0 0;
       }
     }
   }
@@ -507,15 +507,15 @@ export default {
     flex: 1;
     margin: 0;
     & + & {
-      margin: 0 0 0 calc(var(--spacer-big) / 2);
+      margin: 0 0 0 calc(var(--spacer-xl) / 2);
       @include for-desktop {
-        margin: 0 0 0 var(--spacer-big);
+        margin: 0 0 0 var(--spacer-xl);
       }
     }
   }
 }
 .banner-app {
-  --banner-title-margin: var(--spacer-big) 0 0 0;
+  --banner-title-margin: var(--spacer-xl) 0 0 0;
   --banner-title-font-size: var(--h1-font-size);
   --banner-title-font-weight: var(--h1-font-weight);
   --banner-subtitle-font-size: var(--font-size-extra-big);
@@ -532,7 +532,7 @@ export default {
   &__image {
     width: 22%;
     & + & {
-      margin: 0 0 0 var(--spacer-big);
+      margin: 0 0 0 var(--spacer-xl);
     }
   }
 }
diff --git a/packages/core/theme-module/theme/pages/index.vue b/packages/core/theme-module/theme/pages/index.vue
index 09797ef7b..3f7429cd9 100644
--- a/packages/core/theme-module/theme/pages/index.vue
+++ b/packages/core/theme-module/theme/pages/index.vue
@@ -251,10 +251,10 @@ export default {
 }
 
 .call-to-action-newsletter {
-  margin: var(--spacer-big) 0;
+  margin: var(--spacer-xl) 0;
   box-sizing: border-box;
   @include for-desktop {
-    margin: calc(var(--spacer-extra-big) * 2) 0;
+    margin: calc(var(--spacer-2xl) * 2) 0;
   }
 }
 .product-card {
@@ -266,7 +266,7 @@ export default {
   }
 }
 .product-carousel {
-  margin: -20px -#{var(--spacer-big)} -20px 0;
+  margin: -20px -#{var(--spacer-xl)} -20px 0;
   @include for-desktop {
     margin: -20px 0;
   }
@@ -291,7 +291,7 @@ export default {
   padding-left: 2.5rem;
   line-height: 1.6;
   &__title {
-    margin: var(--spacer-big) 0 0 0;
+    margin: var(--spacer-xl) 0 0 0;
     font-size: var(--h1-font-size-desktop);
     font-weight: var(--h1-font-weight-desktop);
   }
@@ -303,16 +303,16 @@ export default {
   }
   &__download {
     max-height: 47px;
-    margin-top: var(--spacer-extra-big);
+    margin-top: var(--spacer-2xl);
     & + & {
-      margin-left: var(--spacer-big);
+      margin-left: var(--spacer-xl);
     }
   }
 }
 .banners {
-  margin: var(--spacer-big) 0;
+  margin: var(--spacer-xl) 0;
   @include for-desktop {
-    margin: var(--spacer-extra-big) 0;
+    margin: var(--spacer-2xl) 0;
   }
 }
 .sf-banner {
@@ -320,8 +320,8 @@ export default {
 }
 .section {
   @media (max-width: $desktop-min) {
-    padding-left: var(--spacer-big);
-    padding-right: var(--spacer-big);
+    padding-left: var(--spacer-xl);
+    padding-right: var(--spacer-xl);
   }
 }
 .bottom-navigation-circle {

From 229260557796ee00f2ca2f3866249b1426189991 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Wed, 15 Apr 2020 14:41:14 +0200
Subject: [PATCH 03/28] chore: renamed typography variables

---
 .../theme-module/theme/assets/css/reset.scss  | 17 +++++---------
 .../theme/components/CartSidebar.vue          |  8 +++----
 .../theme/components/LocaleSelector.vue       |  2 +-
 .../theme/components/LoginModal.vue           |  2 +-
 .../theme/components/checkout/CartPreview.vue |  6 ++---
 .../theme/components/checkout/OrderReview.vue |  6 ++---
 .../theme-module/theme/pages/Category.vue     | 13 +++++------
 .../theme/pages/Checkout/OrderReview.vue      | 22 +++++++++----------
 .../theme/pages/Checkout/Payment.vue          |  4 ++--
 .../theme/pages/Checkout/Shipping.vue         |  2 +-
 .../core/theme-module/theme/pages/Home.vue    |  1 -
 .../theme/pages/MyAccount/LoyaltyCard.vue     |  2 +-
 .../theme/pages/MyAccount/MyNewsletter.vue    | 10 ++++-----
 .../theme/pages/MyAccount/MyProfile.vue       | 11 +++++-----
 .../theme/pages/MyAccount/MyReviews.vue       |  2 +-
 .../theme/pages/MyAccount/OrderHistory.vue    |  8 +++----
 .../theme/pages/MyAccount/ShippingDetails.vue | 13 +++++------
 .../core/theme-module/theme/pages/Product.vue | 20 +++++++----------
 .../core/theme-module/theme/pages/index.vue   |  5 ++---
 19 files changed, 70 insertions(+), 84 deletions(-)

diff --git a/packages/core/theme-module/theme/assets/css/reset.scss b/packages/core/theme-module/theme/assets/css/reset.scss
index 659c6b47b..8e1b2deb8 100644
--- a/packages/core/theme-module/theme/assets/css/reset.scss
+++ b/packages/core/theme-module/theme/assets/css/reset.scss
@@ -1,9 +1,8 @@
 // Reset CSS
 body {
   color: var(--c-text);
-  font-size: var(--font-size-regular);
-  font-family: var(--body-font-family-primary);
-  font-weight: var(--body-font-weight-primary);
+  font-size: var(--font-base);
+  font-family: var(--font-family-primary);
   margin: 0;
   padding: 0;
 }
@@ -15,30 +14,26 @@ a {
   }
 }
 h1 {
-  font-family: var(--body-font-family-secondary);
+  font-family: var(--font-family-secondary);
   font-size: var(--h1-font-size);
-  font-weight: var(--h1-font-weight);
   line-height: 1.6;
   margin: 0;
 }
 h2 {
-  font-family: var(--body-font-family-secondary);
+  font-family: var(--font-family-secondary);
   font-size: var(--h2-font-size);
-  font-weight: var(--h2-font-weight);
   line-height: 1.6;
   margin: 0;
 }
 h3 {
-  font-family: var(--body-font-family-secondary);
+  font-family: var(--font-family-secondary);
   font-size: var(--h3-font-size);
-  font-weight: var(--h3-font-weight);
   line-height: 1.6;
   margin: 0;
 }
 h4 {
-  font-family: var(--body-font-family-secondary);
+  font-family: var(--font-family-secondary);
   font-size: var(--h4-font-size);
-  font-weight: var(--h4-font-weight);
   line-height: 1.6;
   margin: 0;
 }
diff --git a/packages/core/theme-module/theme/components/CartSidebar.vue b/packages/core/theme-module/theme/components/CartSidebar.vue
index a1b4531b2..dbcb9a01f 100644
--- a/packages/core/theme-module/theme/components/CartSidebar.vue
+++ b/packages/core/theme-module/theme/components/CartSidebar.vue
@@ -119,7 +119,7 @@ export default {
   display: flex;
   flex-direction: column;
   &__total-items {
-    font: 400 var(--font-size-big) / 1.6 var(--body-font-family-secondary);
+    font: 400 var(--font-lg) / 1.6 var(--font-family-secondary);
     margin: 0;
   }
   &__total-price {
@@ -143,11 +143,11 @@ export default {
   }
   &__label {
     margin: var(--spacer-2xl) 0 0 0;
-    font: 400 var(--font-size-big) / 1.6 var(--body-font-family-secondary);
+    font: 400 var(--font-lg) / 1.6 var(--font-family-secondary);
   }
   &__description {
     margin: var(--spacer-xl) 0 0 0;
-    font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-primary);
+    font: 300 var(--font-base) / 1.6 var(--font-family-primary);
   }
   &__icon {
     width: 18.125rem;
@@ -164,7 +164,7 @@ export default {
 }
 .collected-product {
   margin: var(--spacer-xl) 0;
-  font: 300 var(--font-size-extra-small) / 1.6 var(--body-font-family-secondary);
+  font: 300 var(--font-xs) / 1.6 var(--font-family-secondary);
   &__properties {
     margin: var(--spacer-xl) 0 0 0;
   }
diff --git a/packages/core/theme-module/theme/components/LocaleSelector.vue b/packages/core/theme-module/theme/components/LocaleSelector.vue
index 436d163eb..6d30c9894 100644
--- a/packages/core/theme-module/theme/components/LocaleSelector.vue
+++ b/packages/core/theme-module/theme/components/LocaleSelector.vue
@@ -64,7 +64,7 @@ export default {
   flex-wrap: nowrap;
   align-items: center;
   &::v-deep .sf-select {
-    --select-font-size: var(--font-size-small);
+    --select-font-size: var(--font-sm);
   }
   &__select {
     padding: 0 5px;
diff --git a/packages/core/theme-module/theme/components/LoginModal.vue b/packages/core/theme-module/theme/components/LoginModal.vue
index b65323fdb..caa928b57 100644
--- a/packages/core/theme-module/theme/components/LoginModal.vue
+++ b/packages/core/theme-module/theme/components/LoginModal.vue
@@ -206,7 +206,7 @@ export default {
   align-items: center;
   justify-content: center;
   margin: var(--spacer-xl) 0 var(--spacer-xl) 0;
-  font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
+  font: 300 var(--font-base) / 1.6 var(--font-family-secondary);
   & > * {
     margin: 0 0 0 var(--spacer);
   }
diff --git a/packages/core/theme-module/theme/components/checkout/CartPreview.vue b/packages/core/theme-module/theme/components/checkout/CartPreview.vue
index 380082c33..707f2ccc8 100644
--- a/packages/core/theme-module/theme/components/checkout/CartPreview.vue
+++ b/packages/core/theme-module/theme/components/checkout/CartPreview.vue
@@ -225,7 +225,7 @@ export default {
     padding: 0;
     background-color: transparent;
     color: var(--c-primary);
-    font-size: var(--font-size-big-desktop);
+    font-size: var(--font-lg-desktop);
   }
   &__input {
     margin: var(--spacer-xl) 0;
@@ -240,11 +240,11 @@ export default {
   }
   &__property,
   &__action {
-    font-size: var(--font-size-extra-small-desktop);
+    font-size: var(--font-xs-desktop);
   }
   &__action {
     color: var(--c-gray-variant);
-    font-size: var(--font-size-extra-small-desktop);
+    font-size: var(--font-xs-desktop);
     margin: 0 0 var(--spacer-sm) 0;
     &:last-child {
       margin: 0;
diff --git a/packages/core/theme-module/theme/components/checkout/OrderReview.vue b/packages/core/theme-module/theme/components/checkout/OrderReview.vue
index 431f8cd19..8242e3b3c 100644
--- a/packages/core/theme-module/theme/components/checkout/OrderReview.vue
+++ b/packages/core/theme-module/theme/components/checkout/OrderReview.vue
@@ -99,8 +99,8 @@ export default {
     margin-bottom: var(--spacer-xl);
   }
   &__title {
-    font-family: var(--body-font-family-primary);
-    font-size: var(--font-size-big-desktop);
+    font-family: var(--font-family-primary);
+    font-size: var(--font-lg-desktop);
     line-height: 1.6;
   }
 }
@@ -110,7 +110,7 @@ export default {
 .content {
   margin: 0 0 var(--spacer-xl) 0;
   color: var(--c-text);
-  font-size: var(--font-size-extra-small-desktop);
+  font-size: var(--font-xs-desktop);
   font-weight: 300;
   line-height: 1.6;
   &:last-child {
diff --git a/packages/core/theme-module/theme/pages/Category.vue b/packages/core/theme-module/theme/pages/Category.vue
index 7945ef441..1ed26e167 100644
--- a/packages/core/theme-module/theme/pages/Category.vue
+++ b/packages/core/theme-module/theme/pages/Category.vue
@@ -490,7 +490,7 @@ export default {
 .navbar {
   position: relative;
   display: flex;
-  font: 300 var(--font-size-small) / 1.6 var(--font-family-primary);
+  font: 300 var(--font-sm) / 1.6 var(--font-family-primary);
   @include for-desktop {
     border: 1px solid var(--c-light);
     border-width: 1px 0 1px 0;
@@ -512,7 +512,7 @@ export default {
     display: flex;
     align-items: center;
     padding: var(--spacer-lg) 0;
-    font-size: var(--font-size-small);
+    font-size: var(--font-sm);
     line-height: 1.6;
     @include for-desktop {
       padding: var(--spacer-xl) 0;
@@ -529,14 +529,13 @@ export default {
   }
   &__title {
     padding: 0;
-    font-size: var(--font-size-big);
-    font-family: var(--body-font-family-secondary);
+    font-size: var(--font-lg);
+    font-family: var(--font-family-secondary);
     font-weight: 500;
     line-height: 1.6;
   }
   &__filters-button {
     --button-text-decoration: none;
-    --button-font-weight: var(--body-font-weight-secondary);
     --button-color: var(--c-text);
     --button-transition: all 150ms linear;
     display: flex;
@@ -561,7 +560,7 @@ export default {
     display: flex;
     align-items: center;
     margin: 0 auto 0 var(--spacer-2xl);
-    --select-font-size: var(--font-size-small);
+    --select-font-size: var(--font-sm);
   }
   &__counter {
     margin: auto;
@@ -671,7 +670,7 @@ export default {
   padding: var(--spacer-xl);
   &__title {
     margin: calc(var(--spacer-xl) * 3) 0 var(--spacer-xl) 0;
-    font: 400 var(--font-size-extra-big) / 1.6 var(--body-font-family-secondary);
+    font: 400 var(--font-size-extra-big) / 1.6 var(--font-family-secondary);
     line-height: 1.6;
     &:first-child {
       margin: 0 0 var(--spacer-xl) 0;
diff --git a/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue b/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
index c64cb3f82..12b78fdac 100644
--- a/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
@@ -298,13 +298,13 @@ export default {
 .table {
   margin: 0 0 var(--spacer-xl) 0;
   &__header {
-    font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
+    font: 300 var(--font-base) / 1.6 var(--font-family-secondary);
     @include for-desktop {
       text-align: center;
     }
   }
   &__data {
-    font: 300 var(--font-size-small) / 1.6 var(--body-font-family-secondary);
+    font: 300 var(--font-sm) / 1.6 var(--font-family-secondary);
     @include for-desktop {
       text-align: center;
     }
@@ -325,10 +325,10 @@ export default {
 }
 .product-sku {
   color: var(--c-text-muted);
-  font-size: var(--font-size-extra-small);
+  font-size: var(--font-xs);
 }
 .product-price {
-  --price-font-size: var(--font-size-small);
+  --price-font-size: var(--font-sm);
 }
 .button {
   cursor: pointer;
@@ -370,18 +370,18 @@ export default {
     }
   }
   &__property-total {
-    --property-name-font: 500 var(--font-size-big) / 1.6
-      var(--body-font-family-secondary);
-    --property-value-font: 500 var(--font-size-big) / 1.6
-      var(--body-font-family-secondary);
+    --property-name-font: 500 var(--font-lg) / 1.6
+      var(--font-family-secondary);
+    --property-value-font: 500 var(--font-lg) / 1.6
+      var(--font-family-secondary);
     margin: var(--spacer-xl) 0 0 0;
     text-transform: uppercase;
-    font: 500 var(--font-size-big) / 1.6 var(--body-font-family-secondary);
+    font: 500 var(--font-lg) / 1.6 var(--font-family-secondary);
   }
 }
 .property {
   margin: 0 0 var(--spacer-xl) 0;
-  font: 400 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
+  font: 400 var(--font-base) / 1.6 var(--font-family-secondary);
   &__name {
     color: var(--c-text-muted);
   }
@@ -401,7 +401,7 @@ export default {
 }
 .content {
   margin: 0 0 var(--spacer-xl) 0;
-  font: 300 var(--font-size-mall) / 1.6 var(--body-font-family-secondary);
+  font: 300 var(--font-size-mall) / 1.6 var(--font-family-secondary);
   color: var(--c-text);
   &:last-child {
     margin: 0;
diff --git a/packages/core/theme-module/theme/pages/Checkout/Payment.vue b/packages/core/theme-module/theme/pages/Checkout/Payment.vue
index 034dbe0cd..f005afe4d 100644
--- a/packages/core/theme-module/theme/pages/Checkout/Payment.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/Payment.vue
@@ -254,7 +254,7 @@ export default {
 .payment-method {
   --radio-container-align-items: center;
   --ratio-content-margin: 0 0 0 var(--spacer);
-  --radio-label-font-size: var(--font-size-regular);
+  --radio-label-font-size: var(--font-base);
   white-space: nowrap;
   border: 1px solid var(--c-light);
   border-width: 1px 0 0 0;
@@ -283,7 +283,7 @@ export default {
   }
   &__label {
     flex: unset;
-    font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
+    font: 300 var(--font-base) / 1.6 var(--font-family-secondary);
   }
   &__element {
     display: flex;
diff --git a/packages/core/theme-module/theme/pages/Checkout/Shipping.vue b/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
index 7e30aea17..006e8c1a2 100644
--- a/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
@@ -239,7 +239,7 @@ export default {
   }
   &__description {
     --radio-description-margin: 0;
-    --radio-description-font-size: var(--font-size-extra-small);
+    --radio-description-font-size: var(--font-xs);
   }
   &__delivery {
     color: var(--c-text-muted);
diff --git a/packages/core/theme-module/theme/pages/Home.vue b/packages/core/theme-module/theme/pages/Home.vue
index 89edd7764..9694d68f7 100644
--- a/packages/core/theme-module/theme/pages/Home.vue
+++ b/packages/core/theme-module/theme/pages/Home.vue
@@ -311,7 +311,6 @@ export default {
   --banner-title-font-size: var(--h1-font-size);
   --banner-title-font-weight: var(--h1-font-weight);
   --banner-subtitle-font-size: var(--font-size-extra-big);
-  --banner-subtitle-font-weight: var(--body-font-weight-primary);
   min-height: 26.25rem;
   max-width: 65rem;
   margin: 0 auto;
diff --git a/packages/core/theme-module/theme/pages/MyAccount/LoyaltyCard.vue b/packages/core/theme-module/theme/pages/MyAccount/LoyaltyCard.vue
index 0f2d7acc0..7ad4d7970 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/LoyaltyCard.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/LoyaltyCard.vue
@@ -30,7 +30,7 @@ export default {
 }
 .message {
   margin: 0 0 var(--spacer-2xl) 0;
-  font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
+  font: 300 var(--font-base) / 1.6 var(--font-family-secondary);
   &__label {
     font-weight: 500;
   }
diff --git a/packages/core/theme-module/theme/pages/MyAccount/MyNewsletter.vue b/packages/core/theme-module/theme/pages/MyAccount/MyNewsletter.vue
index d13948fb8..bcbb743ab 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/MyNewsletter.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/MyNewsletter.vue
@@ -67,7 +67,7 @@ export default {
   &__content {
     flex: 1;
     color: var(--c-text);
-    font: 300 var(--font-size-small) / 1.6 var(--body-font-family-secondary);
+    font: 300 var(--font-sm) / 1.6 var(--font-family-secondary);
   }
   &__actions {
     display: flex;
@@ -97,7 +97,7 @@ export default {
     }
   }
   &__client-name {
-    font: 500 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
+    font: 500 var(--font-base) / 1.6 var(--font-family-secondary);
   }
 }
 .tab-orphan {
@@ -119,7 +119,7 @@ export default {
   }
   &__title {
     margin: 0 0 var(--spacer-xl) 0;
-    font: 500 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
+    font: 500 var(--font-base) / 1.6 var(--font-family-secondary);
   }
   &__button {
     --button-width: 100%;
@@ -130,7 +130,7 @@ export default {
 }
 .message {
   margin: 0 0 var(--spacer-2xl) 0;
-  font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
+  font: 300 var(--font-base) / 1.6 var(--font-family-secondary);
   &__label {
     font-weight: 500;
   }
@@ -144,7 +144,7 @@ a {
 }
 .notice {
   margin: var(--spacer-xl) 0 0 0;
-  font: 300 var(--font-size-extra-small) / 1.6 var(--body-font-family-secondary);
+  font: 300 var(--font-xs) / 1.6 var(--font-family-secondary);
 }
 .action-button {
   --button-width: 100%;
diff --git a/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue b/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
index 54d776c3b..4626847f6 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
@@ -229,15 +229,14 @@ export default {
 }
 .message,
 .notice {
-  font-family: var(--body-font-family-primary);
-  font-weight: var(--body-font-weight-primary);
+  font-family: var(--font-family-primary);
   line-height: 1.6;
 }
 .message {
   margin: 0 0 var(--spacer-2xl) 0;
-  font-size: var(--font-size-regular-mobile);
+  font-size: var(--font-base-mobile);
   @include for-desktop {
-    font-size: var(--font-size-regular-desktop);
+    font-size: var(--font-base-desktop);
   }
   &__label {
     font-weight: 400;
@@ -245,11 +244,11 @@ export default {
 }
 .notice {
   margin: var(--spacer-xl) 0 0 0;
-  font-size: var(--font-size-extra-small-mobile);
+  font-size: var(--font-xs-mobile);
   @include for-desktop {
     max-width: 70%;
     margin: var(--spacer) 0 0 0;
-    font-size: var(--font-size-extra-small-desktop);
+    font-size: var(--font-xs-desktop);
   }
 }
 </style>
diff --git a/packages/core/theme-module/theme/pages/MyAccount/MyReviews.vue b/packages/core/theme-module/theme/pages/MyAccount/MyReviews.vue
index f8075c517..c25170f66 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/MyReviews.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/MyReviews.vue
@@ -30,7 +30,7 @@ export default {
 }
 .message {
   margin: 0 0 var(--spacer-2xl) 0;
-  font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
+  font: 300 var(--font-base) / 1.6 var(--font-family-secondary);
   &__label {
     font-weight: 500;
   }
diff --git a/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue b/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue
index 5106d0fac..208cc9996 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue
@@ -105,10 +105,10 @@ export default {
 .no-orders {
   &__title {
     margin: 0 0 var(--spacer-xl) 0;
-    font: 500 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
+    font: 500 var(--font-base) / 1.6 var(--font-family-secondary);
   }
   &__content {
-    font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
+    font: 300 var(--font-base) / 1.6 var(--font-family-secondary);
   }
   &__button {
     --button-width: 100%;
@@ -120,7 +120,7 @@ export default {
 .orders {
   &__download-all {
     --button-padding: 0.625rem var(--spacer-xl);
-    --button-font-size: var(--font-size-extra-small);
+    --button-font-size: var(--font-xs);
     white-space: nowrap;
   }
   &__view {
@@ -131,7 +131,7 @@ export default {
 }
 .message {
   margin: 0 0 var(--spacer-2xl) 0;
-  font: 300 var(--font-size-regular) / 1.6 var(--body-font-family-secondary);
+  font: 300 var(--font-base) / 1.6 var(--font-family-secondary);
   &__label {
     font-weight: 500;
   }
diff --git a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
index 3bc76ed32..1fd2c7340 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
@@ -370,12 +370,11 @@ export default {
 }
 .message {
   margin: 0 0 var(--spacer-2xl) 0;
-  font-family: var(--body-font-family-primary);
-  font-weight: var(--body-font-weight-primary);
+  font-family: var(--font-family-primary);
   line-height: 1.6;
-  font-size: var(--font-size-regular-mobile);
+  font-size: var(--font-base-mobile);
   @include for-desktop {
-    font-size: var(--font-size-regular-desktop);
+    font-size: var(--font-base-desktop);
   }
 }
 .shipping-list {
@@ -391,11 +390,11 @@ export default {
   &__content {
     flex: 1;
     color: var(--c-text);
-    font-size: var(--font-size-small-mobile);
+    font-size: var(--font-sm-mobile);
     font-weight: 300;
     line-height: 1.6;
     @include for-desktop {
-      font-size: var(--font-size-small-desktop);
+      font-size: var(--font-sm-desktop);
     }
   }
   &__actions {
@@ -424,7 +423,7 @@ export default {
     }
   }
   &__client-name {
-    font-size: var(--font-size-regular-desktop);
+    font-size: var(--font-base-desktop);
     font-weight: 500;
   }
 }
diff --git a/packages/core/theme-module/theme/pages/Product.vue b/packages/core/theme-module/theme/pages/Product.vue
index d54df8213..0535182dc 100644
--- a/packages/core/theme-module/theme/pages/Product.vue
+++ b/packages/core/theme-module/theme/pages/Product.vue
@@ -391,12 +391,10 @@ export default {
 }
 .product-details {
   &__heading {
-    --heading-title-font-size: var(--font-size-big);
-    --heading-title-font-weight: var(--body-font-weight-primary);
+    --heading-title-font-size: var(--font-lg);
     margin: var(--spacer-xl) 0 0 0;
     @include for-desktop {
       --heading-title-font-size: var(--h1-font-size);
-      --heading-title-font-weight: var(--body-font-weight-secondary);
       margin: 0;
     }
   }
@@ -409,7 +407,7 @@ export default {
     }
   }
   &__sub-price {
-    --price-font-size: 1.5rem;
+    --price-font-size: var(--font-xl);
   }
   &__sub-rating {
     display: flex;
@@ -421,7 +419,7 @@ export default {
   }
   &__sub-reviews {
     margin: 0 0 0 0.625rem;
-    font-size: var(--font-size-extra-small);
+    font-size: var(--font-xs);
   }
   &__section {
     border: 1px solid var(--c-light);
@@ -440,24 +438,24 @@ export default {
     }
   }
   &__add-to-cart {
-    margin: 1.5rem 0 0 0;
+    margin: var(--spacer-base) 0 0 0;
     @include for-desktop {
       margin: var(--spacer-2xl) 0 0 0;
     }
   }
   &__alert {
-    margin: 1.5rem 0 0 0;
+    margin: var(--spacer-base) 0 0 0;
   }
   &__attribute {
     margin: 0 0 var(--spacer-xl) 0;
   }
   &__description {
     margin: var(--spacer-2xl) 0 calc(var(--spacer-xl) * 3) 0;
-    font-family: var(--body-font-family-secondary);
-    font-size: var(--font-size-regular);
+    font-family: var(--font-family-secondary);
+    font-size: var(--font-base);
     line-height: 1.6;
     @include for-desktop {
-      font-size: var(--font-size-regular);
+      font-size: var(--font-base);
     }
   }
   &__properties {
@@ -517,9 +515,7 @@ export default {
 .banner-app {
   --banner-title-margin: var(--spacer-xl) 0 0 0;
   --banner-title-font-size: var(--h1-font-size);
-  --banner-title-font-weight: var(--h1-font-weight);
   --banner-subtitle-font-size: var(--font-size-extra-big);
-  --banner-subtitle-font-weight: var(--body-font-weight-primary);
   min-height: 26.25rem;
   max-width: 65rem;
   margin: 0 auto;
diff --git a/packages/core/theme-module/theme/pages/index.vue b/packages/core/theme-module/theme/pages/index.vue
index 3f7429cd9..30d285991 100644
--- a/packages/core/theme-module/theme/pages/index.vue
+++ b/packages/core/theme-module/theme/pages/index.vue
@@ -94,6 +94,7 @@
         <div class="banner-application__subtitle">Fashion to Take Away</div>
       </template>
       <template #title>
+        <!-- TODO: replace with SfHeading -->
         <h1 class="banner-application__title">
           Download our application to your&nbsp;mobile
         </h1>
@@ -293,13 +294,11 @@ export default {
   &__title {
     margin: var(--spacer-xl) 0 0 0;
     font-size: var(--h1-font-size-desktop);
-    font-weight: var(--h1-font-weight-desktop);
   }
   &__subtitle {
     color: #a3a5ad;
-    font-family: var(--body-font-family-primary);
+    font-family: var(--font-family-primary);
     font-size: var(--font-size-extra-big-desktop);
-    font-weight: var(--body-font-weight-primary);
   }
   &__download {
     max-height: 47px;

From b6d558b0885ed312ac622baf49261b01439bc43d Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Wed, 15 Apr 2020 16:21:36 +0200
Subject: [PATCH 04/28] refactor: adjusted AppFooter

---
 .../theme/components/AppFooter.vue            | 48 ++++++-------------
 1 file changed, 14 insertions(+), 34 deletions(-)

diff --git a/packages/core/theme-module/theme/components/AppFooter.vue b/packages/core/theme-module/theme/components/AppFooter.vue
index c4fcfd929..8b7755a57 100644
--- a/packages/core/theme-module/theme/components/AppFooter.vue
+++ b/packages/core/theme-module/theme/components/AppFooter.vue
@@ -7,7 +7,6 @@
           :key="item"
           >
           <SfMenuItem
-            class="sf-footer__menu-item"
             :label="item"
           />
         </SfListItem>
@@ -20,7 +19,6 @@
           :key="item"
         >
           <SfMenuItem
-            class="sf-footer__menu-item"
             :label="item"
           />
         </SfListItem>
@@ -33,7 +31,6 @@
           :key="item"
         >
           <SfMenuItem
-            class="sf-footer__menu-item"
             :label="item"
           />
         </SfListItem>
@@ -46,15 +43,14 @@
           :key="item"
         >
           <SfMenuItem
-            class="sf-footer__menu-item"
             :label="item"
           />
         </SfListItem>
       </SfList>
     </SfFooterColumn>
-    <SfFooterColumn title="Social" style="margin-left: auto">
-      <div :style="style">
-        <img v-for="item in social" :key="item" :src="'/icons/'+item+'.svg'" style="height: 0.75rem; margin-right: 1.25rem" />
+    <SfFooterColumn title="Social">
+      <div class="footer__socials">
+        <SfImage class="footer__social-image" v-for="item in social" :key="item" :src="'/icons/'+item+'.svg'" width="12" height="12" />
       </div>
     </SfFooterColumn>
   </SfFooter>
@@ -80,29 +76,6 @@ export default {
       isMobile: false,
       desktopMin: 1024
     };
-  },
-  computed: {
-    style() {
-      return this.isMobile ? { padding: '20px 40px' } : { padding: '6px 0' };
-    }
-  },
-  methods: {
-    isMobileHandler(e) {
-      this.isMobile = e.matches;
-    }
-  },
-  mounted() {
-    this.isMobile =
-      Math.max(document.documentElement.clientWidth, window.innerWidth) <
-      this.desktopMin;
-    window
-      .matchMedia('(max-width: 1024px)')
-      .addListener(this.isMobileHandler);
-  },
-  beforeDestroy() {
-    window
-      .matchMedia('(max-width: 1024px)')
-      .removeListener(this.isMobileHandler);
   }
 };
 </script>
@@ -115,10 +88,17 @@ export default {
     @content;
   }
 }
-#footer {
-  /* temporary */
-  @include for-desktop {
-    padding: 0 2.5rem;
+
+.footer {
+  &__socials {
+    padding: var(--spacer-base) var(--spacer-xl);
+
+    @media screen and (min-width: $desktop-min) {
+      padding: var(--spacer-sm) 0;
+    }
+  }
+  &__social-image {
+    margin: 0 var(--spacer-base) 0 0;
   }
 }
 </style>

From f957c0d2e03be2d6871aab2be22d280e411e3f17 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Thu, 16 Apr 2020 13:19:03 +0200
Subject: [PATCH 05/28] chore: replaced issue number

---
 packages/core/theme-module/theme/components/AppHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/theme-module/theme/components/AppHeader.vue b/packages/core/theme-module/theme/components/AppHeader.vue
index 380cb0680..3ca56cc88 100644
--- a/packages/core/theme-module/theme/components/AppHeader.vue
+++ b/packages/core/theme-module/theme/components/AppHeader.vue
@@ -50,7 +50,7 @@ export default {
     const { cart } = useCart();
     const cartTotalItems = computed(() => {
       const count = cartGetters.getTotalItems(cart.value);
-      // TODO: remove once resolved by UI team: https://github.com/DivanteLtd/storefront-ui/issues/922
+      // TODO: remove once resolved by UI team: https://github.com/DivanteLtd/storefront-ui/issues/1061
       return count ? count.toString() : null;
     });
     return {

From 55915d009a4ccd68efccd3e0508a866347257bb9 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Thu, 16 Apr 2020 14:06:11 +0200
Subject: [PATCH 06/28] chore: adjusted TopBar styles

---
 .../theme-module/theme/components/TopBar.vue  | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/packages/core/theme-module/theme/components/TopBar.vue b/packages/core/theme-module/theme/components/TopBar.vue
index 00b463df4..7e8bc81ae 100644
--- a/packages/core/theme-module/theme/components/TopBar.vue
+++ b/packages/core/theme-module/theme/components/TopBar.vue
@@ -1,24 +1,15 @@
 <template>
   <SfTopBar>
     <template #left>
-      <LocaleSelector />
-    </template>
-    <template #right>
-      <SfButton
-        v-if="!isAuthenticated"
-        class="sf-button--text color-secondary"
-        @click="toggleLoginModal">
-          Register / login
-      </SfButton>
-      <div v-else>
-        {{ userGetters.getFullName(user) }} (
-          <SfButton
-            class="sf-button--text color-secondary"
-            @click="logout">
-              logout
-          </SfButton>
-        )
-      </div>
+        <SfButton class="sf-button--text">Help & FAQs</SfButton>
+      </template>
+    <template #center>
+        <p>Download our application.</p>
+        <SfButton class="topbar__button sf-button--text">Find out more</SfButton>
+      </template>
+      <template #right>
+        <div>Location:</div>
+        <LocaleSelector />
     </template>
   </SfTopBar>
 </template>
@@ -49,3 +40,10 @@ export default {
 };
 
 </script>
+<style lang="scss" scoped>
+.topbar {
+  &__button {
+    margin: 0 0 0 var(--spacer-xs);
+  }
+}
+</style>

From c4c8e7295d623543fe0d2ea177f1820953701bc0 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Thu, 16 Apr 2020 16:14:12 +0200
Subject: [PATCH 07/28] chore: adjusted topbar, awaiting sfui component

---
 .../theme/components/LocaleSelector.vue             | 13 +++++--------
 .../core/theme-module/theme/components/TopBar.vue   |  1 -
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/core/theme-module/theme/components/LocaleSelector.vue b/packages/core/theme-module/theme/components/LocaleSelector.vue
index 6d30c9894..5a1c96b05 100644
--- a/packages/core/theme-module/theme/components/LocaleSelector.vue
+++ b/packages/core/theme-module/theme/components/LocaleSelector.vue
@@ -8,16 +8,12 @@
     >
       <SfImage :src="`/icons/langs/${lang.name}.png`" width="20" />
     </SfButton>
-    <SfSelect v-model="country" class="container__select">
-      <SfSelectOption v-for="currentCountry in availableCountries" :key="currentCountry.name" :value="currentCountry.name">
-        <div>{{ currentCountry.label }}</div>
-      </SfSelectOption>
-    </SfSelect>
-    <SfSelect v-model="currency" class="container__select">
+    <!-- TODO: replace with SfDropdown or dedicated component -->
+    <!-- <SfSelect v-model="currency" class="container__select">
       <SfSelectOption v-for="currentCurrency in availableCurrencies" :key="currentCurrency.name" :value="currentCurrency.name">
-        <div>{{ currentCurrency.label }}</div>
+        <div>{{ currentCurrency.name }}</div>
       </SfSelectOption>
-    </SfSelect>
+    </SfSelect> -->
   </div>
 </template>
 
@@ -81,6 +77,7 @@ export default {
   }
   &__lang {
     --image-width: 20px;
+    --button-box-shadow: none;
     background: none;
     padding: 0 5px;
     display: flex;
diff --git a/packages/core/theme-module/theme/components/TopBar.vue b/packages/core/theme-module/theme/components/TopBar.vue
index 7e8bc81ae..4ea250cc2 100644
--- a/packages/core/theme-module/theme/components/TopBar.vue
+++ b/packages/core/theme-module/theme/components/TopBar.vue
@@ -8,7 +8,6 @@
         <SfButton class="topbar__button sf-button--text">Find out more</SfButton>
       </template>
       <template #right>
-        <div>Location:</div>
         <LocaleSelector />
     </template>
   </SfTopBar>

From 9d0a91fab473bc331882f78f7921769a0ae6b367 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Fri, 17 Apr 2020 11:53:56 +0200
Subject: [PATCH 08/28] refactor: fixed issues with bottom navigation
 overflowing the content

---
 .../theme-module/theme/assets/css/reset.scss  |  5 +++
 .../theme/components/AppHeader.vue            |  1 +
 .../theme/components/BottomNavigation.vue     | 38 ++++++++++---------
 .../theme-module/theme/layouts/account.vue    |  2 +-
 .../theme-module/theme/layouts/default.vue    |  2 +-
 .../core/theme-module/theme/pages/Home.vue    |  2 +-
 6 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/packages/core/theme-module/theme/assets/css/reset.scss b/packages/core/theme-module/theme/assets/css/reset.scss
index 8e1b2deb8..c09f0c9c7 100644
--- a/packages/core/theme-module/theme/assets/css/reset.scss
+++ b/packages/core/theme-module/theme/assets/css/reset.scss
@@ -1,5 +1,10 @@
 // Reset CSS
+html {
+  width: auto;
+  overflow-x: hidden;
+}
 body {
+  overflow-x: hidden;
   color: var(--c-text);
   font-size: var(--font-base);
   font-family: var(--font-family-primary);
diff --git a/packages/core/theme-module/theme/components/AppHeader.vue b/packages/core/theme-module/theme/components/AppHeader.vue
index 3ca56cc88..6bef1370c 100644
--- a/packages/core/theme-module/theme/components/AppHeader.vue
+++ b/packages/core/theme-module/theme/components/AppHeader.vue
@@ -5,6 +5,7 @@
     @click:account="onAccountClicked"
     :cartItemsQty="cartTotalItems"
     >
+    <!-- TODO: add mobile view buttons after SFUI team PR -->
     <template #logo>
       <nuxt-link to="/" class="sf-header__logo">
         <SfImage src="/icons/logo.svg" alt="Vue Storefront Next" class="sf-header__logo-image"/>
diff --git a/packages/core/theme-module/theme/components/BottomNavigation.vue b/packages/core/theme-module/theme/components/BottomNavigation.vue
index f1115aedd..e8a136b3b 100644
--- a/packages/core/theme-module/theme/components/BottomNavigation.vue
+++ b/packages/core/theme-module/theme/components/BottomNavigation.vue
@@ -1,24 +1,28 @@
 <template>
+<!-- TODO: create logic with isActive prop for BottomNavigationItems -->
   <SfBottomNavigation class="mobile-only">
     <nuxt-link to="/">
-      <SfBottomNavigationItem :class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''">
-        <SfIcon icon="home" size="20px" />
-      </SfBottomNavigationItem>
+      <SfBottomNavigationItem :class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''" icon="home" size="20px" label="Home"/>
     </nuxt-link>
-    <SfBottomNavigationItem>
-      <SfIcon icon="menu" size="20px" style="width: 25px" />
-    </SfBottomNavigationItem>
-    <SfBottomNavigationItem>
-      <SfIcon icon="heart" size="20px" />
-    </SfBottomNavigationItem>
-    <SfBottomNavigationItem>
-      <SfIcon icon="profile" size="20px" />
-    </SfBottomNavigationItem>
-    <SfBottomNavigationItem class="bottom-navigation-circle">
-      <SfCircleIcon class="sf-bottom-navigation__floating-icon sf-circle-icon--big">
-        <SfIcon icon="add_to_cart" size="20px" color="white" style="margin-right: 4px;" />
-      </SfCircleIcon>
-    </SfBottomNavigationItem>
+    <SfBottomNavigationItem icon="menu" size="20px" label="Menu"/>
+    <SfBottomNavigationItem  icon="heart" size="20px" label="Wishlist"/>
+    <SfBottomNavigationItem icon="profile" size="20px" label="Account"/>
+    <!-- TODO: add logic for label - if on Home then Basket, if on PDC then AddToCart etc. -->
+  <SfBottomNavigationItem
+        label="Basket"
+        icon="add_to_cart"
+        >
+        <template #icon>
+          <SfCircleIcon aria-label="Add to cart">
+            <SfIcon
+              icon="add_to_cart"
+              color="white"
+              size="25px"
+              :style="{margin: '0 0 0 -2px'}"
+            />
+          </SfCircleIcon>
+        </template>
+      </SfBottomNavigationItem>
   </SfBottomNavigation>
 </template>
 
diff --git a/packages/core/theme-module/theme/layouts/account.vue b/packages/core/theme-module/theme/layouts/account.vue
index 6b0883537..908b89855 100644
--- a/packages/core/theme-module/theme/layouts/account.vue
+++ b/packages/core/theme-module/theme/layouts/account.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <TopBar />
+    <TopBar class="desktop-only" />
     <div id="layout" >
       <AppHeader />
       <nuxt />
diff --git a/packages/core/theme-module/theme/layouts/default.vue b/packages/core/theme-module/theme/layouts/default.vue
index 59805a624..1e931ef63 100644
--- a/packages/core/theme-module/theme/layouts/default.vue
+++ b/packages/core/theme-module/theme/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <TopBar />
+    <TopBar class="desktop-only" />
     <div id="layout" >
       <AppHeader />
       <nuxt />
diff --git a/packages/core/theme-module/theme/pages/Home.vue b/packages/core/theme-module/theme/pages/Home.vue
index 9694d68f7..717f63838 100644
--- a/packages/core/theme-module/theme/pages/Home.vue
+++ b/packages/core/theme-module/theme/pages/Home.vue
@@ -247,7 +247,7 @@ export default {
   }
 }
 .section {
-  padding: 0 var(--spacer-xl);
+  padding: 0 var(--spacer-sm);
   @include for-desktop {
     padding: 0;
   }

From 0396f8088a98d04f820d77aa6cb1f53201dceda6 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Fri, 17 Apr 2020 13:02:53 +0200
Subject: [PATCH 09/28] refactor: adjusted sidebar heading

---
 .../theme/components/CartSidebar.vue          | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/core/theme-module/theme/components/CartSidebar.vue b/packages/core/theme-module/theme/components/CartSidebar.vue
index dbcb9a01f..266ec7ee4 100644
--- a/packages/core/theme-module/theme/components/CartSidebar.vue
+++ b/packages/core/theme-module/theme/components/CartSidebar.vue
@@ -2,10 +2,19 @@
   <div id="cart">
     <SfSidebar
       :visible="isCartSidebarOpen"
+      :button="false"
       title="My Cart"
       @close="toggleCartSidebar"
       class="sf-sidebar--right"
     >
+      <template #title>
+        <div class="heading__wrapper">
+          <SfHeading :level="3" title="My cart" class="sf-heading--left"/>
+          <button class="heading__close-button" aria-label="Cart sidebar close button">
+            <SfIcon icon="cross" size="14px" color="gray-primaary"/>
+          </button>
+        </div>
+      </template>
       <transition name="fade" mode="out-in">
         <div v-if="totalItems" class="my-cart" key="my-cart">
           <h3 class="my-cart__total-items">Total items: {{ totalItems }}</h3>
@@ -51,7 +60,7 @@
             </template>
           </SfProperty>
           <nuxt-link to="/checkout/personal-details">
-            <SfButton class="sf-button--full-width">Go to checkout</SfButton>
+            <SfButton class="sf-button--full-width color-secondary">Go to checkout</SfButton>
           </nuxt-link>
         </div>
         <div v-else class="empty-cart" key="empty-cart">
@@ -72,7 +81,9 @@
 <script>
 import {
   SfSidebar,
+  SfHeading,
   SfButton,
+  SfIcon,
   SfProperty,
   SfPrice,
   SfCollectedProduct
@@ -88,6 +99,8 @@ export default {
   components: {
     SfSidebar,
     SfButton,
+    SfHeading,
+    SfIcon,
     SfProperty,
     SfPrice,
     SfCollectedProduct
@@ -158,6 +171,18 @@ export default {
     }
   }
 }
+.heading {
+  &__wrapper {
+    --heading-title-color: var(--c-dark-variant);
+    --heading-title-font-weight: var(--font-normal);
+    display: flex;
+    justify-content: space-between;
+  }
+  &__close-button {
+    background: none;
+    border: none;
+  }
+}
 .collected-product-list {
   flex: 1;
   margin: var(--spacer-xl) calc(var(--spacer-xl) * -1);

From 2581b39cbc2b0288eb7d394052d6c9a181ad7cb2 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Fri, 17 Apr 2020 15:40:36 +0200
Subject: [PATCH 10/28] refactor: adjusted collected product cards in sidebar

---
 .../theme/components/CartSidebar.vue          | 71 ++++++++-----------
 1 file changed, 29 insertions(+), 42 deletions(-)

diff --git a/packages/core/theme-module/theme/components/CartSidebar.vue b/packages/core/theme-module/theme/components/CartSidebar.vue
index 266ec7ee4..0ce3306d1 100644
--- a/packages/core/theme-module/theme/components/CartSidebar.vue
+++ b/packages/core/theme-module/theme/components/CartSidebar.vue
@@ -5,19 +5,19 @@
       :button="false"
       title="My Cart"
       @close="toggleCartSidebar"
-      class="sf-sidebar--right"
+      class="sidebar sf-sidebar--right"
     >
       <template #title>
         <div class="heading__wrapper">
           <SfHeading :level="3" title="My cart" class="sf-heading--left"/>
-          <button class="heading__close-button" aria-label="Cart sidebar close button">
-            <SfIcon icon="cross" size="14px" color="gray-primaary"/>
+          <button class="heading__close-button" aria-label="Cart sidebar close button" @click="toggleCartSidebar">
+            <SfIcon icon="cross" size="14px" color="gray-primary"/>
           </button>
         </div>
       </template>
       <transition name="fade" mode="out-in">
         <div v-if="totalItems" class="my-cart" key="my-cart">
-          <h3 class="my-cart__total-items">Total items: {{ totalItems }}</h3>
+          <div class="my-cart__total-items">Total items: <strong>{{ totalItems }}</strong></div>
           <div class="collected-product-list">
             <transition-group name="fade" tag="div">
               <SfCollectedProduct
@@ -27,34 +27,26 @@
                 :title="cartGetters.getItemName(product)"
                 :regular-price="cartGetters.getItemPrice(product).regular"
                 :stock="99999"
+                image-width="180"
+                image-height="200"
                 :qty="cartGetters.getItemQty(product)"
                 @input="updateQuantity(product, $event)"
                 @click:remove="removeFromCart(product)"
                 class="collected-product"
               >
-                <template #configuration>
-                  <div class="collected-product__properties">
-                    <SfProperty
-                      v-for="(value, key) in cartGetters.getItemAttributes(product, ['color', 'size'])"
-                      :key="key"
-                      :name="key"
-                      :value="value"
-                    />
-                  </div>
-                </template>
-                <template #actions>
-                  <div class="collected-product__actions">
-                    <SfButton class="sf-button--text color-secondary collected-product__action">Save for later</SfButton>
-                    <SfButton class="sf-button--text color-secondary collected-product__action">Add to compare</SfButton>
-                  </div>
-                </template>
+               <template #configuration>
+                <div class="collected-product__properties">
+                  <SfProperty name="Size" :value="cartGetters.getItemAttributes(product).size"/>
+                  <SfProperty name="Color" :value="cartGetters.getItemAttributes(product).color"/>
+                </div>
+              </template>
+              <template #actions>
+                  <SfButton class="sf-button--text desktop-only">Save for later</SfButton>
+              </template>
               </SfCollectedProduct>
             </transition-group>
           </div>
-          <SfProperty class="sf-property--full-width my-cart__total-price">
-            <template #name>
-              <span class="sf-property__name">TOTAL</span>
-            </template>
+          <SfProperty class="sf-property--full-width my-cart__total-price" name="Total price:">
             <template #value>
               <SfPrice :regular="totals.subtotal" />
             </template>
@@ -127,12 +119,19 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@storefront-ui/vue/styles";
+
+.sidebar {
+  --sidebar-top-padding: var(--spacer-lg) var(--spacer-base) 0 var(--spacer-base);
+  --sidebar-content-padding: var(--spacer-lg) var(--spacer-base);
+}
+
 .my-cart {
   flex: 1;
   display: flex;
   flex-direction: column;
   &__total-items {
-    font: 400 var(--font-lg) / 1.6 var(--font-family-secondary);
+    font: var(--font-normal) var(--font-lg) / 1.6 var(--font-family-secondary);
+    color: var(--c-dark-variant);
     margin: 0;
   }
   &__total-price {
@@ -183,25 +182,13 @@ export default {
     border: none;
   }
 }
-.collected-product-list {
-  flex: 1;
-  margin: var(--spacer-xl) calc(var(--spacer-xl) * -1);
-}
+
 .collected-product {
-  margin: var(--spacer-xl) 0;
-  font: 300 var(--font-xs) / 1.6 var(--font-family-secondary);
+  margin: var(--spacer-base) 0;
+
   &__properties {
-    margin: var(--spacer-xl) 0 0 0;
-  }
-  &__actions {
-    transition: opacity 150ms ease-in-out;
-    opacity: var(--cp-actions-opacity, 0);
-  }
-  &__action {
-    --button-padding: 0;
-  }
-  &:hover {
-    --cp-actions-opacity: 1;
+    margin: var(--spacer-sm) 0 0 0;
   }
+
 }
 </style>

From 083f27b57cf2fff77b686494f62e5bcd8409f540 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Fri, 17 Apr 2020 17:02:56 +0200
Subject: [PATCH 11/28] chore: adjusted font sizes in sidebar

---
 .../theme/components/CartSidebar.vue          | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/core/theme-module/theme/components/CartSidebar.vue b/packages/core/theme-module/theme/components/CartSidebar.vue
index 0ce3306d1..5aeab9ee8 100644
--- a/packages/core/theme-module/theme/components/CartSidebar.vue
+++ b/packages/core/theme-module/theme/components/CartSidebar.vue
@@ -46,7 +46,11 @@
               </SfCollectedProduct>
             </transition-group>
           </div>
-          <SfProperty class="sf-property--full-width my-cart__total-price" name="Total price:">
+          <div class="sidebar-bottom">
+          <SfProperty class="sf-property--full-width my-cart__total-price">
+            <template #name>
+              <span class="my-cart__total-price-label">Total price:</span>
+            </template>
             <template #value>
               <SfPrice :regular="totals.subtotal" />
             </template>
@@ -54,6 +58,7 @@
           <nuxt-link to="/checkout/personal-details">
             <SfButton class="sf-button--full-width color-secondary">Go to checkout</SfButton>
           </nuxt-link>
+          </div>
         </div>
         <div v-else class="empty-cart" key="empty-cart">
           <div class="empty-cart__banner">
@@ -130,12 +135,19 @@ export default {
   display: flex;
   flex-direction: column;
   &__total-items {
-    font: var(--font-normal) var(--font-lg) / 1.6 var(--font-family-secondary);
+    font: var(--font-normal) var(--font-xl) / 1.6 var(--font-family-secondary);
     color: var(--c-dark-variant);
     margin: 0;
   }
   &__total-price {
+    --property-name-font-size: var(--font-xl);
+    --price-font-size: var(--font-xl);
     margin: 0 0 var(--spacer-xl) 0;
+
+    &-label {
+      font: var(--font-normal) var(--font-xl) / 1.6 var(--font-family-secondary);
+      color: var(--c-dark-variant);
+    }
   }
 }
 .empty-cart {
@@ -183,6 +195,10 @@ export default {
   }
 }
 
+.sidebar-bottom {
+  margin: auto 0 0 0;
+}
+
 .collected-product {
   margin: var(--spacer-base) 0;
 

From cf6b67b9d16871817e26d47020a18c3d3687c9bd Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Mon, 20 Apr 2020 11:38:32 +0200
Subject: [PATCH 12/28] fix: fixed spacings

---
 .../core/theme-module/theme/components/InstagramFeed.vue    | 4 ++--
 packages/core/theme-module/theme/pages/Home.vue             | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/core/theme-module/theme/components/InstagramFeed.vue b/packages/core/theme-module/theme/components/InstagramFeed.vue
index 72c18705c..5337bfe3f 100644
--- a/packages/core/theme-module/theme/components/InstagramFeed.vue
+++ b/packages/core/theme-module/theme/components/InstagramFeed.vue
@@ -48,7 +48,7 @@ export default {
     & + & {
       margin-top: calc(var(--spacer-xl) / 2);
       @include for-desktop {
-        margin-top: var(--spacer-xl);
+        margin-top: var(--spacer-sm);
       }
     }
   }
@@ -58,7 +58,7 @@ export default {
     & + & {
       margin-left: calc(var(--spacer-xl) / 2);
       @include for-desktop {
-        margin-left: var(--spacer-xl);
+        margin-left: var(--spacer-sm);
       }
     }
   }
diff --git a/packages/core/theme-module/theme/pages/Home.vue b/packages/core/theme-module/theme/pages/Home.vue
index 717f63838..a32c9ddd0 100644
--- a/packages/core/theme-module/theme/pages/Home.vue
+++ b/packages/core/theme-module/theme/pages/Home.vue
@@ -42,6 +42,7 @@
               :regular-price="product.price.regular"
               :max-rating="product.rating.max"
               :score-rating="product.rating.score"
+              :show-add-to-cart-button="true"
               :is-on-wishlist="product.isOnWishlist"
               class="product-card"
               @click:wishlist="toggleWishlist(i)"
@@ -266,7 +267,7 @@ export default {
 .call-to-action {
   margin: var(--spacer-xl) 0;
   @include for-desktop {
-    margin: calc(var(--spacer-2xl) * 2) 0;
+    margin: var(--spacer-2xl) 0 0 0;
   }
 }
 .product-carousel {
@@ -279,9 +280,6 @@ export default {
 }
 .product-card {
   max-width: unset;
-  &:hover {
-    --product-card-box-shadow: 0 4px 20px rgba(168, 172, 176, 0.19);
-  }
 }
 .images-grid {
   max-width: 60rem;

From c5dafc7d3d73bc0e3be8befdb0329d75d983aa25 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Mon, 20 Apr 2020 13:22:35 +0200
Subject: [PATCH 13/28] fix: adjusted spacers on category

---
 .../theme-module/theme/pages/Category.vue     | 136 ++++++++++--------
 1 file changed, 77 insertions(+), 59 deletions(-)

diff --git a/packages/core/theme-module/theme/pages/Category.vue b/packages/core/theme-module/theme/pages/Category.vue
index 1ed26e167..8f4b28c43 100644
--- a/packages/core/theme-module/theme/pages/Category.vue
+++ b/packages/core/theme-module/theme/pages/Category.vue
@@ -6,7 +6,7 @@
     />
     <div class="navbar section">
       <div class="navbar__aside desktop-only">
-        <h1 class="navbar__title">Categories</h1>
+        <SfHeading :level="3" title="Categories" class="navbar__title" />
       </div>
       <div class="navbar__main">
         <SfButton
@@ -161,6 +161,7 @@
             :regular-price="'$' + productGetters.getPrice(product).regular"
             :max-rating="5"
             :score-rating="3"
+            :show-add-to-cart-button="true"
             :isOnWishlist="false"
             @click:wishlist="toggleWishlist(i)"
             :link="`/p/${productGetters.getId(product)}/${productGetters.getSlug(product)}`"
@@ -297,6 +298,7 @@ import {
   SfButton,
   SfList,
   SfIcon,
+  SfHeading,
   SfMenuItem,
   SfFilter,
   SfProductCard,
@@ -463,7 +465,8 @@ export default {
     SfSelect,
     SfBreadcrumbs,
     SfLoader,
-    SfColor
+    SfColor,
+    SfHeading
   }
 };
 </script>
@@ -477,92 +480,85 @@ export default {
     margin: 0 auto;
   }
 }
-.section {
-  padding: 0 var(--spacer-xl);
-  @include for-desktop {
-    padding: 0;
+.main {
+  &.section {
+    padding: var(--spacer-xs);
+    @include for-desktop {
+      padding: 0;
+    }
   }
 }
 .breadcrumbs {
-  padding: var(--spacer-xl) var(--spacer-2xl) var(--spacer-2xl)
-    var(--spacer-2xl);
+  padding: var(--spacer-base) 0 var(--spacer-base)
+    var(--spacer-xs);
 }
 .navbar {
   position: relative;
   display: flex;
-  font: 300 var(--font-sm) / 1.6 var(--font-family-primary);
+  border: 1px solid var(--c-light);
+  border-width: 0 0 1px 0;
   @include for-desktop {
-    border: 1px solid var(--c-light);
     border-width: 1px 0 1px 0;
   }
-  &::after {
-    position: absolute;
-    bottom: 0;
-    left: var(--spacer-xl);
-    width: calc(100% - calc(var(--spacer-xl) * 2));
-    height: 1px;
-    background: var(--c-light);
-    content: "";
+  &.section {
+    padding: var(--spacer-sm);
     @include for-desktop {
-      content: none;
+      padding: 0;
     }
   }
   &__aside,
   &__main {
     display: flex;
     align-items: center;
-    padding: var(--spacer-lg) 0;
-    font-size: var(--font-sm);
-    line-height: 1.6;
-    @include for-desktop {
-      padding: var(--spacer-xl) 0;
-    }
+    padding: var(--spacer-sm) 0;
   }
   &__aside {
     flex: 0 0 15%;
-    padding: var(--spacer-xl) var(--spacer-2xl);
+    padding: var(--spacer-sm) var(--spacer-sm);
     border: 1px solid var(--c-light);
     border-width: 0 1px 0 0;
   }
   &__main {
     flex: 1;
+    padding: 0;
+    @include for-desktop {
+      padding: var(--spacer-xs) var(--spacer-xl);
+    }
   }
   &__title {
-    padding: 0;
-    font-size: var(--font-lg);
-    font-family: var(--font-family-secondary);
-    font-weight: 500;
-    line-height: 1.6;
+    --heading-title-font-weight: var(--font-light);
+    --heading-title-font-size: var(--font-xl);
   }
   &__filters-button {
-    --button-text-decoration: none;
-    --button-color: var(--c-text);
-    --button-transition: all 150ms linear;
     display: flex;
     align-items: center;
-    @include for-desktop {
-      margin: 0 0 0 var(--spacer-2xl);
-    }
     svg {
       fill: var(--c-text-muted);
+      transition: fill 150ms ease;
     }
     &:hover {
-      --button-color: var(--c-primary);
       svg {
         fill: var(--c-primary);
       }
     }
   }
   &__label {
+    font-family: var(--font-family-secondary);
+    font-weight: var(--font-normal);
     color: var(--c-text-muted);
+    margin: 0 var(--spacer-2xs) 0 0;
+  }
+  &__select {
+    --select-padding: 0 var(--spacer-lg) 0 var(--spacer-2xs);
+    --select-margin: 0;
   }
   &__sort {
     display: flex;
     align-items: center;
     margin: 0 auto 0 var(--spacer-2xl);
-    --select-font-size: var(--font-sm);
   }
   &__counter {
+    font-family: var(--font-family-secondary);
     margin: auto;
     @include for-desktop {
       margin: auto 0 auto auto;
@@ -571,28 +567,33 @@ export default {
   &__view {
     display: flex;
     align-items: center;
-    margin: 0 var(--spacer-2xl);
+    margin: 0 var(--spacer-xl);
     @include for-desktop {
-      margin: var(--spacer-xl);
+      margin: 0 0 0 var(--spacer-2xl);
     }
     &-icon {
-      margin: 0 0 0 0.625rem;
       cursor: pointer;
     }
+    &-label {
+      margin: 0 var(--spacer-sm) 0 0;
+      font: var(--font-medium) var(--font-xs) / 1.6 var(--font-family-secondary);
+      text-decoration: underline;
+    }
   }
 }
 .sort-by {
-  /*--select-padding: 0 0.625rem;*/
+  --select-padding: 0 var(--spacer-lg) 0 var(--spacer-2xs);
+  --select-margin: 0;
   flex: unset;
   width: 11.875rem;
-  --select-dropdown-z-index: 10;
+  --select-dropdown-z-index: 1;
 }
 .main {
   display: flex;
 }
 .sidebar {
   flex: 0 0 15%;
-  padding: var(--spacer-2xl);
+  padding: var(--spacer-sm);
   border: 1px solid var(--c-light);
   border-width: 0 1px 0 0;
 }
@@ -623,7 +624,7 @@ export default {
     --product-card-padding: var(--spacer);
     flex: 1 1 50%;
     @include for-desktop {
-      --product-card-padding: var(--spacer-xl);
+      --product-card-padding: var(--spacer-sm);
       flex: 1 1 25%;
     }
   }
@@ -647,7 +648,7 @@ export default {
     --product-card-horizontal-padding: var(--spacer);
     flex: 0 0 100%;
     @include for-desktop {
-      --product-card-horizontal-padding: var(--spacer-xl);
+      --product-card-horizontal-padding: var(--spacer-sm);
     }
   }
   &__slide-enter {
@@ -667,31 +668,48 @@ export default {
   }
 }
 .filters {
-  padding: var(--spacer-xl);
   &__title {
-    margin: calc(var(--spacer-xl) * 3) 0 var(--spacer-xl) 0;
-    font: 400 var(--font-size-extra-big) / 1.6 var(--font-family-secondary);
-    line-height: 1.6;
+    --heading-title-font-size: var(--font-xl);
+    margin: var(--spacer-xl) 0 var(--spacer-base) 0;
     &:first-child {
-      margin: 0 0 var(--spacer-xl) 0;
+      margin: calc(var(--spacer-xl) + var(--spacer-base)) 0 var(--spacer-xs) 0;
     }
   }
-  &__colors {
-    margin: calc(var(--spacer) * -1);
-  }
   &__color {
-    margin: var(--spacer);
+    margin: var(--spacer-xs) var(--spacer-xs) var(--spacer-xs) 0;
   }
   &__item {
-    margin: var(--spacer) 0;
+    --filter-label-color: var(--c-secondary-variant);
+    --filter-count-color: var(--c-secondary-variant);
+    --checkbox-padding: 0 var(--spacer-sm) 0 var(--spacer-xl);
+    padding: var(--spacer-sm) 0;
+    border-bottom: 1px solid var(--c-light);
+    &:last-child {
+      border-bottom: 0;
+    }
+    @include for-desktop {
+      --checkbox-padding: 0;
+      margin: var(--spacer-sm) 0;
+      border: 0;
+      padding: 0;
+    }
+  }
+  &__accordion-item {
+    --accordion-item-content-padding: 0;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+    width: 100vw;
   }
   &__buttons {
-    margin: calc(var(--spacer-xl) * 3) 0 0 0;
+    margin: var(--spacer-sm) 0;
   }
   &__button-clear {
     --button-background: var(--c-light);
     --button-color: var(--c-dark-variant);
-    margin: 0.625rem 0 0 0;
+    margin: var(--spacer-xs) 0 0 0;
   }
 }
 </style>

From aa1161ee855da183aff760ca2cf0d97ca7e80285 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Mon, 20 Apr 2020 16:35:43 +0200
Subject: [PATCH 14/28] refactor: adjusted category page

---
 .../theme-module/theme/pages/Category.vue     | 60 +++++++------------
 1 file changed, 22 insertions(+), 38 deletions(-)

diff --git a/packages/core/theme-module/theme/pages/Category.vue b/packages/core/theme-module/theme/pages/Category.vue
index 8f4b28c43..df39e6606 100644
--- a/packages/core/theme-module/theme/pages/Category.vue
+++ b/packages/core/theme-module/theme/pages/Category.vue
@@ -44,12 +44,12 @@
         </SfButton>
         <div class="navbar__sort desktop-only">
           <span class="navbar__label">Sort by:</span>
-          <SfSelect class="sort-by" v-model="sortBy">
+          <SfSelect  v-model="sortBy">
             <SfSelectOption
               v-for="option in sortByOptions"
               :key="option.value"
               :value="option.value"
-              class="sort-by__option"
+              class="sort__option"
               >{{ option.label }}</SfSelectOption
             >
           </SfSelect>
@@ -60,43 +60,28 @@
           <span class="navbar__label mobile-only">{{ totalProducts }} Items</span>
         </div>
         <div class="navbar__view desktop-only">
-          <span>View </span>
+          <span class="navbar__view-label">View</span>
           <SfIcon
             class="navbar__view-icon"
             :color="isGridView ? '#1D1F22' : '#BEBFC4'"
-            size="10px"
+            icon="tiles"
+            size="32px"
             role="button"
             aria-label="Change to grid view"
             :aria-pressed="isGridView"
             @click="isGridView = true"
           >
-            <svg viewBox="0 0 10 10">
-              <rect width="2" height="2" />
-              <rect y="4" width="2" height="2" />
-              <rect y="8" width="2" height="2" />
-              <rect x="4" width="2" height="2" />
-              <rect x="4" y="4" width="2" height="2" />
-              <rect x="4" y="8" width="2" height="2" />
-              <rect x="8" width="2" height="2" />
-              <rect x="8" y="4" width="2" height="2" />
-              <rect x="8" y="8" width="2" height="2" />
-            </svg>
           </SfIcon>
           <SfIcon
             class="navbar__view-icon"
             :color="!isGridView ? '#1D1F22' : '#BEBFC4'"
-            size="11px"
+            icon="list"
+            size="32px"
             role="button"
             aria-label="Change to list view"
             :aria-pressed="!isGridView"
             @click="isGridView = false"
-          >
-            <svg viewBox="0 0 11 10">
-              <rect width="11" height="2" />
-              <rect y="8" width="11" height="2" />
-              <rect y="4" width="7" height="2" />
-            </svg>
-          </SfIcon>
+          />
         </div>
         <SfButton
           class="sf-button--text navbar__filters-button mobile-only"
@@ -123,15 +108,15 @@
               :header="cat.label"
             >
               <template>
-                <SfList>
-                  <SfListItem>
+                <SfList class="list">
+                  <SfListItem class="list__item">
                     <SfMenuItem :label="cat.label">
                       <template #label>
                         <nuxt-link :to="getCategoryUrl(cat.slug)" :class="isCategorySelected(cat.slug) ? 'sidebar--cat-selected' : ''">All</nuxt-link>
                       </template>
                     </SfMenuItem>
                   </SfListItem>
-                  <SfListItem v-for="(subCat, j) in cat.items" :key="j">
+                  <SfListItem class="list__item" v-for="(subCat, j) in cat.items" :key="j">
                     <SfMenuItem :label="subCat.label">
                       <template #label="{ label }">
                         <nuxt-link :to="getCategoryUrl(subCat.slug)" :class="isCategorySelected(subCat.slug) ? 'sidebar--cat-selected' : ''">{{ label }}</nuxt-link>
@@ -548,11 +533,10 @@ export default {
     color: var(--c-text-muted);
     margin: 0 var(--spacer-2xs) 0 0;
   }
-  &__select {
-    --select-padding: 0 var(--spacer-lg) 0 var(--spacer-2xs);
-    --select-margin: 0;
-  }
+
   &__sort {
+    --select-margin: 0;
+    --select-padding: 0 var(--spacer-lg) 0 var(--spacer-2xs);
     display: flex;
     align-items: center;
     margin: 0 auto 0 var(--spacer-2xl);
@@ -581,13 +565,6 @@ export default {
     }
   }
 }
-.sort-by {
-  --select-padding: 0 var(--spacer-lg) 0 var(--spacer-2xs);
-  --select-margin: 0;
-  flex: unset;
-  width: 11.875rem;
-  --select-dropdown-z-index: 1;
-}
 .main {
   display: flex;
 }
@@ -600,7 +577,7 @@ export default {
 .products {
   box-sizing: border-box;
   flex: 1;
-  margin: 0 calc(var(--spacer) * -1);
+  margin: 0 calc(var(--spacer-base) * -1);
   @include for-desktop {
     margin: var(--spacer-xl);
   }
@@ -667,6 +644,13 @@ export default {
     }
   }
 }
+.list {
+  &__item {
+    &:not(:last-of-type) {
+      --list-item-margin: 0 0 var(--spacer-sm) 0;
+    }
+  }
+}
 .filters {
   &__title {
     --heading-title-font-size: var(--font-xl);

From 61f943633679e2d0b06d041937385a3dbbabac3d Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Mon, 20 Apr 2020 17:53:10 +0200
Subject: [PATCH 15/28] refactor: adjusted pdp on desktop

---
 .../core/theme-module/theme/pages/Product.vue | 90 +++++++++++--------
 1 file changed, 51 insertions(+), 39 deletions(-)

diff --git a/packages/core/theme-module/theme/pages/Product.vue b/packages/core/theme-module/theme/pages/Product.vue
index 0535182dc..c9894b869 100644
--- a/packages/core/theme-module/theme/pages/Product.vue
+++ b/packages/core/theme-module/theme/pages/Product.vue
@@ -35,19 +35,18 @@
         <SfSticky class="product-details">
           <SfHeading
             :title="productGetters.getName(product)"
-            :level="1"
+            :level="3"
             class="sf-heading--no-underline sf-heading--left product-details__heading"
           />
           <div class="product-details__sub">
             <SfPrice
               :regular="'$' + productGetters.getPrice(product).regular"
-              class="product-details__sub-price"
             />
             <div class="product-details__sub-rating">
               <SfRating :score="4" :max="5" />
-              <div class="product-details__sub-reviews desktop-only">
-                Read all 1 review
-              </div>
+              <SfButton class="product-details__sub-reviews sf-button--text desktop-only">
+                Read all reviews
+              </SfButton>
               <div class="product-details__sub-reviews mobile-only">
                 (1)
               </div>
@@ -69,7 +68,7 @@
               :selected="configuration.size"
               @change="size => updateFilter({ size })"
               label="Size"
-              class="sf-select--bordered product-details__attribute"
+              class="sf-select--underlined product-details__attribute"
             >
               <SfSelectOption
                 v-for="size in options.size"
@@ -79,21 +78,17 @@
                 <SfProductOption :label="size.label" />
               </SfSelectOption>
             </SfSelect>
-            <SfSelect
-              v-if="options.color"
-              :selected="configuration.color"
-              @change="color => updateFilter({ color })"
-              label="Color"
-              class="sf-select--bordered product-details__attribute"
-            >
-              <SfSelectOption
-                v-for="color in options.color"
-                :key="color.value"
-                :value="color.value"
-              >
-                <SfProductOption :label="color.label" />
-              </SfSelectOption>
-            </SfSelect>
+            <div v-if="options.color" class="product-details__colors desktop-only">
+            <p class="product-details__color-label">Color:</p>
+            <!-- TODO: handle selected logic differently as the selected prop for SfColor is a boolean -->
+            <SfColor
+              v-for="(color, i) in options.color"
+              :key="i"
+              :color="color.value"
+              class="product-details__color"
+              @click="updateFilter({color})"
+            />
+          </div>
           </div>
           <div class="product-details__section">
             <SfAlert
@@ -220,7 +215,8 @@ import {
   SfSticky,
   SfReview,
   SfBreadcrumbs,
-  SfButton
+  SfButton,
+  SfColor
 } from '@storefront-ui/vue';
 
 import InstagramFeed from '~/components/InstagramFeed.vue';
@@ -272,6 +268,7 @@ export default {
   },
   components: {
     SfAlert,
+    SfColor,
     SfProperty,
     SfHeading,
     SfPrice,
@@ -368,8 +365,7 @@ export default {
   }
 }
 .breadcrumbs {
-  padding: var(--spacer-xl) var(--spacer-2xl) var(--spacer-2xl)
-    var(--spacer-2xl);
+  margin: var(--spacer-base) auto var(--spacer-lg);
 }
 .product {
   @include for-desktop {
@@ -382,6 +378,7 @@ export default {
   &__description {
     padding: 0 var(--spacer-xl);
     @include for-desktop {
+      padding: 0;
       margin: 0 0 0 calc(var(--spacer-xl) * 5);
     }
   }
@@ -391,11 +388,9 @@ export default {
 }
 .product-details {
   &__heading {
-    --heading-title-font-size: var(--font-lg);
-    margin: var(--spacer-xl) 0 0 0;
+    margin: 0 var(--spacer-sm);
     @include for-desktop {
-      --heading-title-font-size: var(--h1-font-size);
-      margin: 0;
+      margin: var(--spacer-base) 0;
     }
   }
   &__sub {
@@ -406,19 +401,36 @@ export default {
       justify-content: space-between;
     }
   }
-  &__sub-price {
-    --price-font-size: var(--font-xl);
-  }
   &__sub-rating {
     display: flex;
     align-items: center;
     margin: calc(var(--spacer-xl) / 2) 0 0 0;
     @include for-desktop {
+      flex-direction: column;
+      align-items:flex-start;
       margin: 0;
     }
+  }
+    &__colors {
+    @include font(
+      --product-color-font,
+      var(--font-normal),
+      var(--font-lg),
+      1.6,
+      var(--font-family-secondary)
+    );
+    display: flex;
+    align-items: center;
+    margin-top: var(--spacer-xl);
+  }
+  &__color-label {
+    margin: 0 var(--spacer-lg) 0 0;
+  }
+  &__color {
+    margin: 0 var(--spacer-2xs);
   }
   &__sub-reviews {
-    margin: 0 0 0 0.625rem;
+    margin: var(--spacer-2xs) 0 0 0;
     font-size: var(--font-xs);
   }
   &__section {
@@ -432,7 +444,9 @@ export default {
   }
   &__action {
     display: flex;
-    margin: var(--spacer-xl) 0 calc(var(--spacer-xl) / 2);
+    &:not(:last-of-type) {
+      margin: var(--spacer-xl) 0 var(--spacer-base);
+    }
     @include for-desktop {
       justify-content: flex-end;
     }
@@ -450,9 +464,10 @@ export default {
     margin: 0 0 var(--spacer-xl) 0;
   }
   &__description {
-    margin: var(--spacer-2xl) 0 calc(var(--spacer-xl) * 3) 0;
+    margin: var(--spacer-xl) 0;
     font-family: var(--font-family-secondary);
     font-size: var(--font-base);
+    color: var(--c-dark-variant);
     line-height: 1.6;
     @include for-desktop {
       font-size: var(--font-base);
@@ -462,12 +477,9 @@ export default {
     margin: var(--spacer-xl) 0 0 0;
   }
   &__tabs {
-    margin: var(--spacer-xl) 0 0 0;
+    margin: var(--spacer-lg) auto var(--spacer-2xl);
     @include for-desktop {
-      margin: calc(5 * var(--spacer-xl)) 0 0 0;
-    }
-    p {
-      margin: 0;
+      margin-top: var(--spacer-2xl);
     }
   }
   &__review {

From 47370455861872b8f910c9ad8c9fe4b742498b29 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Tue, 21 Apr 2020 10:21:27 +0200
Subject: [PATCH 16/28] refcator: fixed spacings and content on mobile pdp

---
 .../theme-module/theme/pages/Category.vue     |  2 +-
 .../core/theme-module/theme/pages/Product.vue | 33 +++++++++----------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/packages/core/theme-module/theme/pages/Category.vue b/packages/core/theme-module/theme/pages/Category.vue
index df39e6606..ec965a37b 100644
--- a/packages/core/theme-module/theme/pages/Category.vue
+++ b/packages/core/theme-module/theme/pages/Category.vue
@@ -622,7 +622,7 @@ export default {
   }
   // end of TODO
   &__product-card-horizontal {
-    --product-card-horizontal-padding: var(--spacer);
+    --product-card-horizontal-padding: var(--spacer-xs);
     flex: 0 0 100%;
     @include for-desktop {
       --product-card-horizontal-padding: var(--spacer-sm);
diff --git a/packages/core/theme-module/theme/pages/Product.vue b/packages/core/theme-module/theme/pages/Product.vue
index c9894b869..b1ca00fd4 100644
--- a/packages/core/theme-module/theme/pages/Product.vue
+++ b/packages/core/theme-module/theme/pages/Product.vue
@@ -6,10 +6,9 @@
     />
     <div class="product">
       <div class="product__gallery">
-        <SfGallery
+        <!-- TODO: replace example images with the getter, wait for SfGallery fix by SFUI team: https://github.com/DivanteLtd/storefront-ui/issues/1074 -->
+        <!-- <SfGallery
           class="gallery-mobile mobile-only"
-          :image-width="375"
-          :image-height="490"
           :images="[
             {
               mobile: { url: '/productpage/productM.jpg' },
@@ -22,13 +21,12 @@
               big: { url: '/productpage/productM.jpg' }
             }
           ]"
-        />
+        /> -->
         <SfImage
           v-for="(image, i) in productGetters.getGallery(product).splice(0, 2)" :key="i"
           :src="image.big"
           :width="590"
           :height="700"
-          class="desktop-only"
         />
       </div>
       <div class="product__description">
@@ -57,12 +55,13 @@
             and metallic cocktail dresses and party dresses from all your
             favorite brands.
           </p>
-          <div class="product-details__action">
+          <div class="product-details__action desktop-only">
             <SfButton class="sf-button--text color-secondary"
               >Size guide</SfButton
             >
           </div>
-          <div class="product-details__section">
+          <!-- TODO: add size selector after design is added -->
+          <div class="product-details__section desktop-only" >
             <SfSelect
               v-if="options.size"
               :selected="configuration.size"
@@ -78,6 +77,7 @@
                 <SfProductOption :label="size.label" />
               </SfSelectOption>
             </SfSelect>
+            <!-- TODO: add color picker after PR done by SFUI team -->
             <div v-if="options.color" class="product-details__colors desktop-only">
             <p class="product-details__color-label">Color:</p>
             <!-- TODO: handle selected logic differently as the selected prop for SfColor is a boolean -->
@@ -90,12 +90,7 @@
             />
           </div>
           </div>
-          <div class="product-details__section">
-            <SfAlert
-              message="Low in stock"
-              type="warning"
-              class="product-details__alert mobile-only"
-            />
+          <div class="product-details__section desktop-only">
             <SfAddToCart
               :stock="stock"
               v-model="qty"
@@ -376,7 +371,7 @@ export default {
     flex: 1;
   }
   &__description {
-    padding: 0 var(--spacer-xl);
+    padding: 0 var(--spacer-sm);
     @include for-desktop {
       padding: 0;
       margin: 0 0 0 calc(var(--spacer-xl) * 5);
@@ -384,11 +379,11 @@ export default {
   }
 }
 .product-property {
-  margin: var(--spacer) 0;
+  margin: var(--spacer-xs) 0;
 }
 .product-details {
   &__heading {
-    margin: 0 var(--spacer-sm);
+    margin: var(--spacer-lg) 0 0 0;
     @include for-desktop {
       margin: var(--spacer-base) 0;
     }
@@ -404,7 +399,7 @@ export default {
   &__sub-rating {
     display: flex;
     align-items: center;
-    margin: calc(var(--spacer-xl) / 2) 0 0 0;
+    margin: var(--spacer-sm) 0 0 0;
     @include for-desktop {
       flex-direction: column;
       align-items:flex-start;
@@ -477,7 +472,9 @@ export default {
     margin: var(--spacer-xl) 0 0 0;
   }
   &__tabs {
-    margin: var(--spacer-lg) auto var(--spacer-2xl);
+    --tabs-title-padding: var(--spacer-sm) 0;
+    --tabs-content-tab-padding: var(--spacer-sm) 0;
+    margin: var(--spacer-lg) 0 0 0;
     @include for-desktop {
       margin-top: var(--spacer-2xl);
     }

From 3280a6c5cd34b2ef97508d6059c6b57cf0876301 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Tue, 21 Apr 2020 11:19:18 +0200
Subject: [PATCH 17/28] fix: adjusted login modal

---
 .../core/theme-module/theme/components/LoginModal.vue     | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/core/theme-module/theme/components/LoginModal.vue b/packages/core/theme-module/theme/components/LoginModal.vue
index caa928b57..1451043dd 100644
--- a/packages/core/theme-module/theme/components/LoginModal.vue
+++ b/packages/core/theme-module/theme/components/LoginModal.vue
@@ -3,6 +3,7 @@
     <SfModal
       :visible="isLoginModalOpen"
       title="Log in"
+      class="modal"
       @close="toggleLoginModal">
       <transition name="fade" mode="out-in">
         <div v-if="isLogin" key="log-in">
@@ -56,7 +57,7 @@
         </div>
         <div v-else key="sign-up" class="form">
           <ValidationObserver v-slot="{ handleSubmit }">
-            <form class="from" @submit.prevent="handleSubmit(handleRegister)" autocomplete="off">
+            <form class="form" @submit.prevent="handleSubmit(handleRegister)" autocomplete="off">
               <ValidationProvider rules="required|email" v-slot="{ errors }">
                 <SfInput
                   v-model="form.email"
@@ -196,8 +197,9 @@ export default {
 @import "~@storefront-ui/vue/styles";
 
 .form {
+  margin-top: var(--spacer-sm);
   &__element {
-    margin: 0 0 var(--spacer-2xl) 0;
+    margin: 0 0 var(--spacer-xl) 0;
   }
 }
 .action,
@@ -208,7 +210,7 @@ export default {
   margin: var(--spacer-xl) 0 var(--spacer-xl) 0;
   font: 300 var(--font-base) / 1.6 var(--font-family-secondary);
   & > * {
-    margin: 0 0 0 var(--spacer);
+    margin: 0 0 0 var(--spacer-xs);
   }
 }
 .action {

From cbe0d122d9921815a2b9ba5df5b1070795e9588e Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Tue, 21 Apr 2020 12:32:30 +0200
Subject: [PATCH 18/28] chore: adjusted margins on CAtegory page

---
 .../theme-module/theme/components/checkout/CartPreview.vue     | 3 +--
 packages/core/theme-module/theme/pages/Category.vue            | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/core/theme-module/theme/components/checkout/CartPreview.vue b/packages/core/theme-module/theme/components/checkout/CartPreview.vue
index 707f2ccc8..b59c773d4 100644
--- a/packages/core/theme-module/theme/components/checkout/CartPreview.vue
+++ b/packages/core/theme-module/theme/components/checkout/CartPreview.vue
@@ -175,8 +175,7 @@ export default {
   box-sizing: border-box;
   width: 100%;
   background-color: #f1f2f3;
-  padding: var(--spacer-2xl);
-  margin-bottom: var(--spacer-xl);
+  padding: var(--spacer-xl);
   &:last-child {
     margin-bottom: 0;
   }
diff --git a/packages/core/theme-module/theme/pages/Category.vue b/packages/core/theme-module/theme/pages/Category.vue
index ec965a37b..346421b56 100644
--- a/packages/core/theme-module/theme/pages/Category.vue
+++ b/packages/core/theme-module/theme/pages/Category.vue
@@ -577,7 +577,6 @@ export default {
 .products {
   box-sizing: border-box;
   flex: 1;
-  margin: 0 calc(var(--spacer-base) * -1);
   @include for-desktop {
     margin: var(--spacer-xl);
   }

From 058595ed5529fb92fc06ba3ed866bb41a3451d37 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Tue, 21 Apr 2020 13:35:13 +0200
Subject: [PATCH 19/28] Replaced headings on category view

---
 .../theme-module/theme/pages/Category.vue     | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/core/theme-module/theme/pages/Category.vue b/packages/core/theme-module/theme/pages/Category.vue
index 346421b56..ca8c6a2e1 100644
--- a/packages/core/theme-module/theme/pages/Category.vue
+++ b/packages/core/theme-module/theme/pages/Category.vue
@@ -209,7 +209,11 @@
       @close="isFilterSidebarOpen = false"
     >
       <div class="filters">
-        <h3 class="filters__title">Collection</h3>
+        <SfHeading
+          :level="4"
+          title="Collection"
+          class="filters__title sf-heading--left"
+        />
         <SfFilter
           v-for="filter in filters.collection"
           :key="filter.value"
@@ -219,7 +223,11 @@
           class="filters__item"
           @change="filter.selected = !filter.selected"
         />
-        <h3 class="filters__title">Color</h3>
+        <SfHeading
+          :level="4"
+          title="Color"
+          class="filters__title sf-heading--left"
+        />
         <div class="filters__colors">
           <SfColor
             v-for="filter in filters.color"
@@ -230,7 +238,11 @@
             @click="filter.selected = !filter.selected"
           />
         </div>
-        <h3 class="filters__title">Size</h3>
+        <SfHeading
+          :level="4"
+          title="Size"
+          class="filters__title sf-heading--left"
+        />
         <SfFilter
           v-for="filter in filters.size"
           :key="filter.value"
@@ -240,7 +252,11 @@
           class="filters__item"
           @change="filter.selected = !filter.selected"
         />
-        <h3 class="filters__title">Price</h3>
+        <SfHeading
+          :level="4"
+          title="Price"
+          class="filters__title sf-heading--left"
+        />
         <SfFilter
           v-for="filter in filters.price"
           :key="filter.value"
@@ -250,7 +266,11 @@
           class="filters__item"
           @change="filter.selected = !filter.selected"
         />
-        <h3 class="filters__title">Material</h3>
+       <SfHeading
+          :level="4"
+          title="Material"
+          class="filters__title sf-heading--left"
+        />
         <SfFilter
           v-for="filter in filters.material"
           :key="filter.value"
@@ -654,9 +674,6 @@ export default {
   &__title {
     --heading-title-font-size: var(--font-xl);
     margin: var(--spacer-xl) 0 var(--spacer-base) 0;
-    &:first-child {
-      margin: calc(var(--spacer-xl) + var(--spacer-base)) 0 var(--spacer-xs) 0;
-    }
   }
   &__color {
     margin: var(--spacer-xs) var(--spacer-xs) var(--spacer-xs) 0;

From e2a0731107938bcd89fd811895fd615bde4e877c Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Tue, 21 Apr 2020 16:23:35 +0200
Subject: [PATCH 20/28] refactor: adjusted checkout personal details

---
 .../theme/components/checkout/CartPreview.vue |  18 ++-
 .../theme-module/theme/pages/Checkout.vue     |   9 +-
 .../theme/pages/Checkout/PersonalDetails.vue  | 109 +++++++++++-------
 3 files changed, 82 insertions(+), 54 deletions(-)

diff --git a/packages/core/theme-module/theme/components/checkout/CartPreview.vue b/packages/core/theme-module/theme/components/checkout/CartPreview.vue
index b59c773d4..2afb6ef7c 100644
--- a/packages/core/theme-module/theme/components/checkout/CartPreview.vue
+++ b/packages/core/theme-module/theme/components/checkout/CartPreview.vue
@@ -2,10 +2,11 @@
   <div>
     <div class="highlighted">
       <SfHeading
+        :level="3"
         title="Order summary"
         class="sf-heading--left sf-heading--no-underline title"
       />
-      <div class="total-items">
+      <!-- <div class="total-items">
         <h3>Total items: {{ totalItems }}</h3>
         <SfButton class="sf-button--text" @click="listIsHidden = !listIsHidden">
           {{ listIsHidden ? "Show" : "Hide" }} items list
@@ -45,28 +46,28 @@
             </template>
           </SfCollectedProduct>
         </div>
-      </transition>
+      </transition> -->
     </div>
     <div class="highlighted highlighted--total">
       <SfProperty
         name="Products"
         :value="totalItems"
-        class="sf-property--full-width property"
+        class="sf-property--full-width sf-property--large property"
       />
       <SfProperty
         name="Subtotal"
         :value="totals.subtotal"
-        class="sf-property--full-width property"
+        class="sf-property--full-width sf-property--large property"
       />
       <SfProperty
         name="Shipping"
         :value="checkoutGetters.getShippingMethodPrice(chosenShippingMethod)"
-        class="sf-property--full-width property"
+        class="sf-property--full-width sf-property--large property"
       />
       <SfProperty
         name="Total"
         :value="totals.total + checkoutGetters.getShippingMethodPrice(chosenShippingMethod)"
-        class="sf-property--full-width property-total"
+        class="sf-property--full-width sf-property--large property-total"
       />
     </div>
     <div class="highlighted promo-code">
@@ -183,9 +184,6 @@ export default {
     margin-bottom: 1px;
   }
 }
-.title {
-  margin-bottom: var(--spacer-2xl);
-}
 .total-items {
   display: flex;
   justify-content: space-between;
@@ -193,7 +191,7 @@ export default {
   margin-bottom: var(--spacer-xl);
 }
 .property {
-  margin-bottom: var(--spacer);
+  margin-bottom: var(--spacer-sm);
   ::v-deep .sf-property__name {
     text-transform: unset;
   }
diff --git a/packages/core/theme-module/theme/pages/Checkout.vue b/packages/core/theme-module/theme/pages/Checkout.vue
index f148a2923..d9b3bb937 100644
--- a/packages/core/theme-module/theme/pages/Checkout.vue
+++ b/packages/core/theme-module/theme/pages/Checkout.vue
@@ -2,7 +2,7 @@
   <div id="checkout">
     <div class="checkout">
       <div class="checkout__main">
-        <SfSteps :active="currentStep" v-if="currentStep < 4">
+        <SfSteps :active="currentStep" v-if="currentStep < 4" class="checkout__steps">
           <SfStep v-for="(step, index) in STEPS" :key="step.name" :name="step.label">
             <nuxt-child
               @showReview="handleShowReview"
@@ -24,7 +24,7 @@
 </template>
 <script>
 
-import { SfSteps } from '@storefront-ui/vue';
+import { SfSteps, SfButton } from '@storefront-ui/vue';
 import CartPreview from '~/components/checkout/CartPreview';
 import OrderReview from '~/components/checkout/OrderReview';
 import { ref } from '@vue/composition-api';
@@ -47,6 +47,7 @@ const STEPS = [
 export default {
   name: 'Checkout',
   components: {
+    SfButton,
     SfSteps,
     CartPreview,
     OrderReview
@@ -97,6 +98,7 @@ export default {
   &__main {
     @include for-desktop {
       flex: 1;
+      padding: var(--spacer-xl) 0 0 0;
     }
   }
   &__aside {
@@ -105,5 +107,8 @@ export default {
       margin: 0 0 0 4.25rem;
     }
   }
+  &__steps {
+    --steps-content-padding: 0;
+  }
 }
 </style>
diff --git a/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue b/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue
index 776a33cd5..02b531b16 100644
--- a/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue
@@ -1,9 +1,12 @@
 <template>
   <div>
-    <SfHeading
-      title="1. Personal details"
-      class="sf-heading--left sf-heading--no-underline title"
-    />
+    <div class="log-in desktop-only">
+      <SfButton class="log-in__button color-secondary"
+        >Log in to your account</SfButton
+      >
+      <p class="log-in__info">or fill the details below:</p>
+    </div>
+    <SfHeading :level="3" title="Personal details" class="sf-heading--left sf-heading--no-underline title" />
     <div class="form">
       <SfInput
         v-model="personalDetails.firstName"
@@ -26,18 +29,25 @@
         class="form__element"
         required
       />
+      <div class="info">
+        <p class="info__heading">
+          Enjoy these perks with your free account!
+        </p>
+        <SfCharacteristic
+          v-for="(characteristic, key) in characteristics"
+          :key="key"
+          :description="characteristic.description"
+          :icon="characteristic.icon"
+          size-icon="0.75rem"
+          class="info__characteristic"
+        />
+      </div>
       <div class="form__element form__group">
         <SfCheckbox
           v-model="createAccount"
           name="createAccount"
           label="I want to create an account"
-          class="form__checkbox"
         />
-        <SfButton
-          class="sf-button--text info color-secondary"
-          @click="accountBenefits = true"
-          >+info
-        </SfButton>
       </div>
       <transition name="fade">
         <SfInput
@@ -50,37 +60,15 @@
         />
       </transition>
       <div class="form__action">
-        <SfButton class="sf-button--full-width form__action-button" @click="$emit('nextStep')">
+        <!-- TODO: add nuxt link for returning to home page -->
+        <SfButton class="color-secondary form__back-button">
+          Go back
+        </SfButton>
+        <SfButton class="form__action-button" @click="$emit('nextStep')">
           Continue to shipping
         </SfButton>
-        <SfButton class="sf-button--full-width sf-button--text color-secondary form__action-button form__action-button--secondary">
-          or log in to your account
-        </SfButton
-        >
       </div>
     </div>
-    <SfModal
-      :visible="accountBenefits"
-      class="modal"
-      @close="accountBenefits = false"
-    >
-      <SfHeading
-        title="Account Benefits"
-        subtitle="Enjoy these perks with your free account!"
-        class="sf-heading--left sf-heading--no-underline modal__heading"
-      />
-      <SfCharacteristic
-        v-for="(characteristic, key) in characteristics"
-        :key="key"
-        :description="characteristic.description"
-        :icon="characteristic.icon"
-        class="characteristic"
-      />
-      <SfButton
-        class="sf-button--full-width color-secondary modal__button" @click="accountBenefits = false">
-        Ok
-      </SfButton>
-    </SfModal>
   </div>
 </template>
 
@@ -135,7 +123,42 @@ export default {
 <style lang="scss" scoped>
 @import "~@storefront-ui/vue/styles";
 .title {
-  margin: 0 0 var(--spacer-2xl);
+  margin: 0 0 var(--spacer-xl);
+}
+.log-in {
+  &__info {
+    margin: var(--spacer-lg) 0;
+    color: var(--c-dark-variant);
+    font: var(--font-light) var(--font-base) / 1.6 var(--font-family-primary);
+    @include for-desktop {
+      font-weight: var(--font-normal);
+      font-size: var(--font-sm);
+    }
+  }
+  &__button {
+    margin: var(--spacer-2xl) 0 var(--spacer-xl) 0;
+  }
+}
+.info {
+  margin: 0 0 var(--spacer-xl) 0;
+  &__heading {
+    font-family: var(--font-family-primary);
+    font-weight: var(--font-light);
+  }
+  &__characteristic {
+    --characteristic-description-font-size: var(--font-xs);
+    margin: 0 0 var(--spacer-sm) var(--spacer-2xs);
+  }
+  @include for-desktop {
+    margin: 0;
+    &__heading {
+      margin: 0 0 var(--spacer-sm) 0;
+      font-size: var(--font-xs);
+    }
+    &__characteristic {
+      margin: var(--spacer-base) 0;
+    }
+  }
 }
 .form {
   @include for-desktop {
@@ -144,7 +167,7 @@ export default {
     align-items: center;
   }
   &__element {
-    margin: 0 0 var(--spacer-2xl) 0;
+    margin: 0 0 var(--spacer-xl) 0;
     @include for-desktop {
       flex: 0 0 100%;
     }
@@ -154,7 +177,7 @@ export default {
       }
       &-even {
         @include for-desktop {
-          padding: 0 0 0 var(--spacer-2xl);
+          padding: 0 0 0 var(--spacer-xl);
         }
       }
     }
@@ -162,6 +185,7 @@ export default {
   &__group {
     display: flex;
     align-items: center;
+    margin: var(--spacer-xl) 0 var(--spacer-lg) 0;
   }
   &__action {
     @include for-desktop {
@@ -171,13 +195,14 @@ export default {
   }
   &__action-button {
     &--secondary {
-      margin: var(--spacer-xl) 0;
       @include for-desktop {
-        --button-margin: 0;
         text-align: right;
       }
     }
   }
+  &__back-button {
+    margin: 0 var(--spacer-sm) 0 0;
+  }
   &__button {
     --button-width: 100%;
     @include for-desktop {

From c717dc31e72746f1a662adc3c367a34343cef0b7 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Tue, 21 Apr 2020 17:29:21 +0200
Subject: [PATCH 21/28] refactor: adjusted checkout titles

---
 .../theme/components/checkout/CartPreview.vue | 44 +++++++++----------
 .../theme/pages/Checkout/OrderReview.vue      |  5 ++-
 .../theme/pages/Checkout/Payment.vue          |  6 +--
 .../theme/pages/Checkout/PersonalDetails.vue  |  2 +-
 .../theme/pages/Checkout/Shipping.vue         | 11 ++---
 5 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/packages/core/theme-module/theme/components/checkout/CartPreview.vue b/packages/core/theme-module/theme/components/checkout/CartPreview.vue
index 2afb6ef7c..787490e66 100644
--- a/packages/core/theme-module/theme/components/checkout/CartPreview.vue
+++ b/packages/core/theme-module/theme/components/checkout/CartPreview.vue
@@ -71,19 +71,13 @@
       />
     </div>
     <div class="highlighted promo-code">
-      <SfButton class="promo-code__button" @click="showPromoCode = !showPromoCode">
-        {{ showPromoCode ? "-" : "+" }} Promo Code</SfButton>
-      <transition name="fade">
-        <div v-if="showPromoCode">
-          <SfInput
-            v-model="promoCode"
-            name="promoCode"
-            label="Enter promo code"
-            class="promo-code__input"
-          />
-          <SfButton class="sf-button--full-width">Apply code</SfButton>
-        </div>
-      </transition>
+      <SfInput
+        v-model="promoCode"
+        name="promoCode"
+        label="Enter promo code"
+        class="sf-input--filled promo-code__input"
+      />
+      <SfCircleIcon class="promo-code__circle-icon" icon="check" />
     </div>
     <div class="highlighted">
       <SfCharacteristic
@@ -105,7 +99,8 @@ import {
   SfCollectedProduct,
   SfProperty,
   SfCharacteristic,
-  SfInput
+  SfInput,
+  SfCircleIcon
 } from '@storefront-ui/vue';
 import { computed, ref } from '@vue/composition-api';
 import { useCart, useCheckout, checkoutGetters, cartGetters } from '<%= options.composables %>';
@@ -118,7 +113,8 @@ export default {
     SfCollectedProduct,
     SfProperty,
     SfCharacteristic,
-    SfInput
+    SfInput,
+    SfCircleIcon
   },
   setup() {
     const { chosenShippingMethod } = useCheckout();
@@ -218,17 +214,17 @@ export default {
   }
 }
 .promo-code {
-  &__button {
-    padding: 0;
-    background-color: transparent;
-    color: var(--c-primary);
-    font-size: var(--font-lg-desktop);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  &__circle-icon {
+    --button-size: 2rem;
+    --icon-size: 0.6875rem;
   }
   &__input {
-    margin: var(--spacer-xl) 0;
-    ::v-deep input {
-      border-color: var(--c-gray-variant);
-    }
+    --input-background: var(--c-white);
+    flex: 1;
+    margin: 0 var(--spacer-lg) 0 0;
   }
 }
 .product {
diff --git a/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue b/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
index 12b78fdac..00a1ba608 100644
--- a/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
@@ -1,7 +1,8 @@
 <template>
   <div>
     <SfHeading
-      title="4. Order review"
+      :level="3"
+      title="Order review"
       class="sf-heading--left sf-heading--no-underline title"
     />
     <SfAccordion first-open class="accordion mobile-only">
@@ -240,7 +241,7 @@ export default {
 @import "~@storefront-ui/vue/styles";
 
 .title {
-  margin: 0 0 var(--spacer-2xl);
+   margin: var(--spacer-xl) 0 var(--spacer-base) 0;
 }
 .form {
   @include for-desktop {
diff --git a/packages/core/theme-module/theme/pages/Checkout/Payment.vue b/packages/core/theme-module/theme/pages/Checkout/Payment.vue
index f005afe4d..cd92ed270 100644
--- a/packages/core/theme-module/theme/pages/Checkout/Payment.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/Payment.vue
@@ -1,7 +1,8 @@
 <template>
   <div>
     <SfHeading
-      title="3. Payment"
+      :level="3"
+      title="Payment"
       class="sf-heading--left sf-heading--no-underline title"
     />
     <div class="form">
@@ -188,7 +189,7 @@ export default {
 <style lang="scss" scoped>
 @import "~@storefront-ui/vue/styles";
 .title {
-  margin: 0 0 var(--spacer-2xl);
+   margin: var(--spacer-xl) 0 var(--spacer-base) 0;
 }
 .form {
   @include for-desktop {
@@ -224,7 +225,6 @@ export default {
   }
   &__action-button {
     &--secondary {
-      margin: var(--spacer-xl) 0;
       @include for-desktop {
         order: -1;
         --button-margin: 0;
diff --git a/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue b/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue
index 02b531b16..9d8db5158 100644
--- a/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue
@@ -123,7 +123,7 @@ export default {
 <style lang="scss" scoped>
 @import "~@storefront-ui/vue/styles";
 .title {
-  margin: 0 0 var(--spacer-xl);
+  margin: 0 0 var(--spacer-xl) 0;
 }
 .log-in {
   &__info {
diff --git a/packages/core/theme-module/theme/pages/Checkout/Shipping.vue b/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
index 006e8c1a2..604690434 100644
--- a/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
@@ -1,7 +1,8 @@
 <template>
   <div>
     <SfHeading
-      title="2. Shipping"
+      :level="3"
+      title="Shipping"
       class="sf-heading--left sf-heading--no-underline title"
     />
     <div class="form">
@@ -77,6 +78,7 @@
       />
     </div>
     <SfHeading
+      :level="3"
       title="Shipping method"
       class="sf-heading--left sf-heading--no-underline title"
     />
@@ -176,7 +178,7 @@ export default {
 <style lang="scss" scoped>
 @import "~@storefront-ui/vue/styles";
 .title {
-  margin: 0 0 var(--spacer-2xl);
+  margin: var(--spacer-xl) 0 var(--spacer-base) 0;
 }
 .form {
   @include for-desktop {
@@ -185,7 +187,7 @@ export default {
     align-items: center;
   }
   &__element {
-    margin: 0 0 var(--spacer-2xl) 0;
+    margin: 0 0 var(--spacer-xl) 0;
     @include for-desktop {
       flex: 0 0 100%;
     }
@@ -195,7 +197,7 @@ export default {
       }
       &-even {
         @include for-desktop {
-          padding: 0 0 0 var(--spacer-2xl);
+          padding: 0 0 0 var(--spacer-xl);
         }
       }
     }
@@ -212,7 +214,6 @@ export default {
   }
   &__action-button {
     &--secondary {
-      margin: var(--spacer-xl) 0;
       @include for-desktop {
         order: -1;
         --button-margin: 0;

From 55ee9334423ce6f35e0b20a7b694718eea4578d5 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Wed, 22 Apr 2020 11:10:21 +0200
Subject: [PATCH 22/28] fix: adjusted headings

---
 .../theme/pages/Checkout/OrderReview.vue      | 16 ++++++------
 .../theme/pages/Checkout/Payment.vue          | 25 ++++++++++---------
 .../theme/pages/Checkout/Shipping.vue         | 15 +++++------
 3 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue b/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
index 00a1ba608..e58248e0c 100644
--- a/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
@@ -112,6 +112,7 @@
       </SfTableRow>
     </SfTable>
     <SfHeading
+      :level="3"
       title="Order details"
       class="sf-heading--left sf-heading--no-underline title"
     />
@@ -153,14 +154,11 @@
         </SfCheckbox>
       </div>
       <div class="summary__group">
-        <SfButton class="sf-button--full-width summary__action-button" @click="processOrder">
-          Place my order
+        <SfButton class="color-secondary form__back-button" @click="$emit('click:back')">
+          Go back
         </SfButton>
-        <SfButton
-          class="sf-button--full-width sf-button--text color-secondary summary__action-button summary__action-button--secondary"
-          @click="$emit('click:back')"
-        >
-          Go back to Payment
+        <SfButton class="form__action-button" @click="processOrder">
+          Place my order
         </SfButton>
       </div>
     </div>
@@ -250,7 +248,7 @@ export default {
     align-items: center;
   }
   &__element {
-    margin: 0 0 var(--spacer-2xl) 0;
+    margin: 0 0 var(--spacer-xl) 0;
     @include for-desktop {
       flex: 0 0 100%;
     }
@@ -260,7 +258,7 @@ export default {
       }
       &-even {
         @include for-desktop {
-          padding: 0 0 0 var(--spacer-2xl);
+          padding: 0 0 0 var(--spacer-xl);
         }
       }
     }
diff --git a/packages/core/theme-module/theme/pages/Checkout/Payment.vue b/packages/core/theme-module/theme/pages/Checkout/Payment.vue
index cd92ed270..fbeebc474 100644
--- a/packages/core/theme-module/theme/pages/Checkout/Payment.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/Payment.vue
@@ -2,7 +2,7 @@
   <div>
     <SfHeading
       :level="3"
-      title="Payment"
+      title="Billing address"
       class="sf-heading--left sf-heading--no-underline title"
     />
     <div class="form">
@@ -84,8 +84,8 @@
       />
     </div>
     <SfHeading
+      :level="3"
       title="Payment methods"
-      subtitle="Choose your payment method"
       class="sf-heading--left sf-heading--no-underline title"
     />
     <div class="form">
@@ -108,14 +108,12 @@
         </SfRadio>
       </div>
       <div class="form__action">
-        <SfButton class="sf-button--full-width form__action-button" @click="$emit('nextStep')">
-          Review order
+        <!-- TODO: add nuxt link for returning to personal details -->
+        <SfButton class="color-secondary form__back-button">
+          Go back
         </SfButton>
-        <SfButton
-          class="sf-button--full-width sf-button--text color-secondary form__action-button form__action-button--secondary"
-          @click="$emit('click:back')"
-        >
-          Go back to Shipping Methods
+        <SfButton class="form__action-button" @click="$emit('nextStep')">
+          Review my order
         </SfButton>
       </div>
     </div>
@@ -198,7 +196,7 @@ export default {
     align-items: center;
   }
   &__element {
-    margin: 0 0 var(--spacer-2xl) 0;
+    margin: 0 0 var(--spacer-xl) 0;
     @include for-desktop {
       flex: 0 0 100%;
     }
@@ -208,7 +206,7 @@ export default {
       }
       &-even {
         @include for-desktop {
-          padding: 0 0 0 var(--spacer-2xl);
+          padding: 0 0 0 var(--spacer-xl);
         }
       }
     }
@@ -232,6 +230,9 @@ export default {
       }
     }
   }
+  &__back-button {
+    margin: 0 var(--spacer-sm) 0 0;
+  }
   &__button {
     --button-width: 100%;
     @include for-desktop {
@@ -246,7 +247,7 @@ export default {
 .payment-methods {
   @include for-desktop {
     display: flex;
-    padding: var(--spacer-xl) 0;
+    padding: var(--spacer-lg) 0;
     border: 1px solid var(--c-light);
     border-width: 1px 0;
   }
diff --git a/packages/core/theme-module/theme/pages/Checkout/Shipping.vue b/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
index 604690434..4fdcebd19 100644
--- a/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
@@ -111,15 +111,13 @@
         </SfRadio>
       </div>
       <div class="form__action">
-        <SfButton class="sf-button--full-width form__action-button" @click="$emit('nextStep')">
+        <!-- TODO: add nuxt link for returning to personal details -->
+        <SfButton class="color-secondary form__back-button">
+          Go back
+        </SfButton>
+        <SfButton class="form__action-button" @click="$emit('nextStep')">
           Continue to payment
         </SfButton>
-        <SfButton
-          class="sf-button--full-width sf-button--text color-secondary form__action-button form__action-button--secondary"
-          @click="$emit('click:back')">
-            Go back to Personal details
-        </SfButton
-        >
       </div>
     </div>
   </div>
@@ -221,6 +219,9 @@ export default {
       }
     }
   }
+  &__back-button {
+    margin: 0 var(--spacer-sm) 0 0;
+  }
   &__button {
     --button-width: 100%;
     @include for-desktop {

From f41bac4e1463a9d1e70b021ea29c437dcf3261aa Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Fri, 24 Apr 2020 13:18:20 +0200
Subject: [PATCH 23/28] feat: adjusted order details

---
 packages/commercetools/theme/package.json     |    2 +-
 .../theme-module/theme/pages/Checkout.vue     |    2 +-
 .../theme/pages/Checkout/OrderReview.vue      |   89 +-
 .../theme/pages/Checkout/Payment.vue          |    4 +-
 .../theme/pages/Checkout/PersonalDetails.vue  |    2 +-
 .../theme/pages/Checkout/Shipping.vue         |    4 +-
 yarn.lock                                     | 1566 ++++++++++++++++-
 7 files changed, 1560 insertions(+), 109 deletions(-)

diff --git a/packages/commercetools/theme/package.json b/packages/commercetools/theme/package.json
index 01474b490..65687a5de 100644
--- a/packages/commercetools/theme/package.json
+++ b/packages/commercetools/theme/package.json
@@ -13,7 +13,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@storefront-ui/vue": "^0.7.0",
+    "@storefront-ui/vue": "^0.7.4",
     "@vue-storefront/commercetools": "^0.0.3",
     "@vue-storefront/commercetools-api": "^0.0.3",
     "@vue-storefront/nuxt": "^0.0.3",
diff --git a/packages/core/theme-module/theme/pages/Checkout.vue b/packages/core/theme-module/theme/pages/Checkout.vue
index d9b3bb937..8e711bf7d 100644
--- a/packages/core/theme-module/theme/pages/Checkout.vue
+++ b/packages/core/theme-module/theme/pages/Checkout.vue
@@ -85,7 +85,7 @@ export default {
 
 #checkout {
   box-sizing: border-box;
-  padding: 0 var(--spacer-xl);
+  //padding: 0 var(--spacer-xl);
   @include for-desktop {
     max-width: 1240px;
     margin: 0 auto;
diff --git a/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue b/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
index e58248e0c..95219f5e2 100644
--- a/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
@@ -2,7 +2,7 @@
   <div>
     <SfHeading
       :level="3"
-      title="Order review"
+      title="Order details"
       class="sf-heading--left sf-heading--no-underline title"
     />
     <SfAccordion first-open class="accordion mobile-only">
@@ -111,11 +111,6 @@
         </SfTableData>
       </SfTableRow>
     </SfTable>
-    <SfHeading
-      :level="3"
-      title="Order details"
-      class="sf-heading--left sf-heading--no-underline title"
-    />
     <div class="summary">
       <div class="summary__group">
         <div class="summary__total">
@@ -123,28 +118,19 @@
             name="Subtotal"
             :value="totals.subtotal"
             class="sf-property--full-width property"
-          >
-            <template #name>
-              <span class="property__name">Subtotal</span>
-            </template>
-          </SfProperty>
+          />
           <SfProperty
             name="Shipping"
             :value="checkoutGetters.getShippingMethodPrice(chosenShippingMethod)"
             class="sf-property--full-width property"
-          >
-            <template #name>
-              <span class="property__name">Shipping</span>
-            </template>
-          </SfProperty>
-          <SfProperty
-            name="Total"
-            :value="totals.total"
-            class="sf-property--full-width property--huge summary__property-total"
-          >
-            <template #name>TOTAL</template>
-          </SfProperty>
+          />
         </div>
+        <SfDivider />
+        <SfProperty
+          name="Total price"
+          :value="totals.total"
+          class="sf-property--full-width sf-property--large summary__property-total"
+        />
         <SfCheckbox v-model="terms" name="terms" class="summary__terms">
           <template #label>
             <div class="sf-checkbox__label">
@@ -152,16 +138,18 @@
             </div>
           </template>
         </SfCheckbox>
-      </div>
-      <div class="summary__group">
-        <SfButton class="color-secondary form__back-button" @click="$emit('click:back')">
-          Go back
-        </SfButton>
-        <SfButton class="form__action-button" @click="processOrder">
-          Place my order
-        </SfButton>
+          <div class="summary__action">
+          <!-- TODO: add nuxt link for navigating back and forward -->
+          <SfButton class="color-secondary summary__back-button">
+            Go back
+          </SfButton>
+          <SfButton class="summary__action-button" @click="$emit('nextStep')">
+            Continue to shipping
+          </SfButton>
+        </div>
       </div>
     </div>
+
   </div>
 </template>
 
@@ -171,6 +159,7 @@ import {
   SfTable,
   SfCheckbox,
   SfButton,
+  SfDivider,
   SfImage,
   SfIcon,
   SfPrice,
@@ -187,6 +176,7 @@ export default {
     SfTable,
     SfCheckbox,
     SfButton,
+    SfDivider,
     SfImage,
     SfIcon,
     SfPrice,
@@ -239,7 +229,7 @@ export default {
 @import "~@storefront-ui/vue/styles";
 
 .title {
-   margin: var(--spacer-xl) 0 var(--spacer-base) 0;
+   margin: var(--spacer-2xl) 0 var(--spacer-base) 0;
 }
 .form {
   @include for-desktop {
@@ -297,13 +287,11 @@ export default {
 .table {
   margin: 0 0 var(--spacer-xl) 0;
   &__header {
-    font: 300 var(--font-base) / 1.6 var(--font-family-secondary);
     @include for-desktop {
       text-align: center;
     }
   }
   &__data {
-    font: 300 var(--font-sm) / 1.6 var(--font-family-secondary);
     @include for-desktop {
       text-align: center;
     }
@@ -322,6 +310,7 @@ export default {
     }
   }
 }
+
 .product-sku {
   color: var(--c-text-muted);
   font-size: var(--font-xs);
@@ -334,53 +323,46 @@ export default {
 }
 .summary {
   background: var(--c-light);
-  margin: 0 calc(var(--spacer-xl) * -1);
-  padding: var(--spacer-xl);
   @include for-desktop {
     background: transparent;
   }
   &__group {
     @include for-desktop {
-      display: flex;
       margin: 0 0 var(--spacer-2xl) 0;
     }
   }
   &__terms {
-    flex: 1;
-    order: -1;
-    margin: 0 0 var(--spacer-xl) 0;
+    margin: var(--spacer-base) 0 0 0;
   }
   &__total {
-    margin: 0 0 var(--spacer-2xl) 0;
+    margin: 0 0 var(--spacer-sm) 0;
     padding: 0 var(--spacer-xl);
     flex: 0 0 16.875rem;
     @include for-desktop {
       padding: 0;
     }
   }
+  &__action {
+    display: flex;
+    margin: var(--spacer-2xl) 0 0 0;
+  }
+
   &__action-button {
     &--secondary {
-      margin: var(--spacer-xl) 0;
       @include for-desktop {
-        order: -1;
-        margin: 0;
-        text-align: left;
+        text-align: right;
       }
     }
   }
+  &__back-button {
+    margin: 0 var(--spacer-xl) 0 0;
+  }
   &__property-total {
-    --property-name-font: 500 var(--font-lg) / 1.6
-      var(--font-family-secondary);
-    --property-value-font: 500 var(--font-lg) / 1.6
-      var(--font-family-secondary);
     margin: var(--spacer-xl) 0 0 0;
-    text-transform: uppercase;
-    font: 500 var(--font-lg) / 1.6 var(--font-family-secondary);
   }
 }
 .property {
-  margin: 0 0 var(--spacer-xl) 0;
-  font: 400 var(--font-base) / 1.6 var(--font-family-secondary);
+  margin: 0 0 var(--spacer-sm) 0;
   &__name {
     color: var(--c-text-muted);
   }
@@ -400,7 +382,6 @@ export default {
 }
 .content {
   margin: 0 0 var(--spacer-xl) 0;
-  font: 300 var(--font-size-mall) / 1.6 var(--font-family-secondary);
   color: var(--c-text);
   &:last-child {
     margin: 0;
diff --git a/packages/core/theme-module/theme/pages/Checkout/Payment.vue b/packages/core/theme-module/theme/pages/Checkout/Payment.vue
index fbeebc474..f28d76209 100644
--- a/packages/core/theme-module/theme/pages/Checkout/Payment.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/Payment.vue
@@ -187,7 +187,7 @@ export default {
 <style lang="scss" scoped>
 @import "~@storefront-ui/vue/styles";
 .title {
-   margin: var(--spacer-xl) 0 var(--spacer-base) 0;
+  margin: var(--spacer-2xl) 0 var(--spacer-base) 0;
 }
 .form {
   @include for-desktop {
@@ -231,7 +231,7 @@ export default {
     }
   }
   &__back-button {
-    margin: 0 var(--spacer-sm) 0 0;
+    margin: 0 var(--spacer-xl) 0 0;
   }
   &__button {
     --button-width: 100%;
diff --git a/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue b/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue
index 9d8db5158..3205350bf 100644
--- a/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue
@@ -201,7 +201,7 @@ export default {
     }
   }
   &__back-button {
-    margin: 0 var(--spacer-sm) 0 0;
+    margin: 0 var(--spacer-xl) 0 0;
   }
   &__button {
     --button-width: 100%;
diff --git a/packages/core/theme-module/theme/pages/Checkout/Shipping.vue b/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
index 4fdcebd19..122897353 100644
--- a/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
@@ -176,7 +176,7 @@ export default {
 <style lang="scss" scoped>
 @import "~@storefront-ui/vue/styles";
 .title {
-  margin: var(--spacer-xl) 0 var(--spacer-base) 0;
+  margin: var(--spacer-2xl) 0 var(--spacer-base) 0;
 }
 .form {
   @include for-desktop {
@@ -220,7 +220,7 @@ export default {
     }
   }
   &__back-button {
-    margin: 0 var(--spacer-sm) 0 0;
+    margin: 0 var(--spacer-xl) 0 0;
   }
   &__button {
     --button-width: 100%;
diff --git a/yarn.lock b/yarn.lock
index 5725c1279..03d2fea98 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -260,7 +260,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.4.3", "@babel/parser@^7.5.5", "@babel/parser@^7.8.6", "@babel/parser@^7.9.0":
+"@babel/parser@^7.1.0", "@babel/parser@^7.2.3", "@babel/parser@^7.4.3", "@babel/parser@^7.5.5", "@babel/parser@^7.7.0", "@babel/parser@^7.8.6", "@babel/parser@^7.9.0":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
   integrity sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==
@@ -764,7 +764,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.9.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
   integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
@@ -780,7 +780,7 @@
     "@babel/parser" "^7.8.6"
     "@babel/types" "^7.8.6"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.5.5", "@babel/traverse@^7.8.3", "@babel/traverse@^7.8.6", "@babel/traverse@^7.9.0":
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.5.5", "@babel/traverse@^7.7.0", "@babel/traverse@^7.8.3", "@babel/traverse@^7.8.6", "@babel/traverse@^7.9.0":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.5.tgz#6e7c56b44e2ac7011a948c21e283ddd9d9db97a2"
   integrity sha512-c4gH3jsvSuGUezlP6rzSJ6jf8fYjLj3hsMZRx/nX0h+fmHN0w+ekubRrHPqnMec0meycA2nwCsJ7dC8IPem2FQ==
@@ -795,7 +795,7 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
-"@babel/types@^7.0.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.9.0", "@babel/types@^7.9.5":
+"@babel/types@^7.0.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.9.0", "@babel/types@^7.9.5":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.5.tgz#89231f82915a8a566a703b3b20133f73da6b9444"
   integrity sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==
@@ -830,6 +830,108 @@
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
   integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
 
+"@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.20":
+  version "10.0.28"
+  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.28.tgz#bb65af7262a234593a9e952c041d0f1c9b9bef3d"
+  integrity sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==
+  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":
+  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":
+  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.17":
+  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"
@@ -1065,6 +1167,16 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
+"@jest/types@^25.4.0":
+  version "25.4.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.4.0.tgz#5afeb8f7e1cba153a28e5ac3c9fe3eede7206d59"
+  integrity sha512-XBeaWNzw2PPnGW5aXvZt3+VO60M+34RY3XDsCK5tW7kyj3RK0XClRutCfjqcBuaR2aBQTbluEDME9b5MB9UAPw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.0.0"
+
 "@lerna/add@3.20.0":
   version "3.20.0"
   resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.20.0.tgz#bea7edf36fc93fb72ec34cb9ba854c48d4abf309"
@@ -2157,6 +2269,16 @@
   dependencies:
     "@types/node" ">= 8"
 
+"@reach/router@^1.2.1":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.3.tgz#58162860dce6c9449d49be86b0561b5ef46d80db"
+  integrity sha512-gOIAiFhWdiVGSVjukKeNKkCRBLmnORoTPyBihI/jLunICPgxdP30DroAvPQuf1eVfQbfGJQDJkwhJXsNPMnVWw==
+  dependencies:
+    create-react-context "0.3.0"
+    invariant "^2.2.3"
+    prop-types "^15.6.1"
+    react-lifecycles-compat "^3.0.4"
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -2179,10 +2301,10 @@
   resolved "https://registry.yarnpkg.com/@storefront-ui/shared/-/shared-0.6.4.tgz#8e8582673d7739df76cce044ef2a12bec0ec1694"
   integrity sha512-gqv+l6Yl/55RtaQc26Ek0W6LW+s5Hhn7n13mC0qdtwkhmfwFnnr6wjonrvwcS5K2NvfRNug5Q1/At4UXGb6LHw==
 
-"@storefront-ui/shared@^0.7.1":
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/@storefront-ui/shared/-/shared-0.7.1.tgz#299105a9ff010277658a52de93ae623ed8778867"
-  integrity sha512-FF/JzUAjHNRY8gpzJRnj+/OpeshGQIRyvdHIXDJI7LQQ8a7gj6PurOhKly1+9+cTY015rvDoaaisox/YSmX4Ng==
+"@storefront-ui/shared@^0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@storefront-ui/shared/-/shared-0.7.3.tgz#6aa0c624fa3001c36bea4c6ee2acc66fe632597f"
+  integrity sha512-0aEgYPAdlgwtO5VKpJDX/2Hd8SvuH4/vX1FGa85bd5UJVJ7W83xCcKLkFhwTMbnPgAmoV64khHOegePDAJQXNw==
 
 "@storefront-ui/vue@^0.5.1":
   version "0.5.1"
@@ -2226,26 +2348,213 @@
     vue2-leaflet "^2.1.1"
     webpack-dev-middleware "3.6.0"
 
-"@storefront-ui/vue@^0.7.0":
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/@storefront-ui/vue/-/vue-0.7.1.tgz#5ddccb5902689dbb59cdb0d008c65fe82c61ba40"
-  integrity sha512-lpOG1f8z6Ue80zsbAJ2CEalv9wpvTY6rVILL7ePT+J5J/IL6IFwlJ8GFFKE2bCk6FF4u2vswu8QL4ihfePs5Jg==
+"@storefront-ui/vue@^0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@storefront-ui/vue/-/vue-0.7.4.tgz#f8b35068acfbd113082938014f84f509710e569f"
+  integrity sha512-hPhkjyyRlwqoaX9+ZTC0usvhkbNjFtfrPXOKiNMsCF0ty85PPbHc2AiNJhvUJdZZVbAz2rh9E9HamljD+Ry6TA==
   dependencies:
     "@glidejs/glide" "^3.3.0"
-    "@storefront-ui/shared" "^0.7.1"
-    "@vue/babel-preset-app" "^4.0.0-alpha.1"
-    body-scroll-lock "^2.6.4"
-    core-js "^3.1.3"
+    "@storefront-ui/shared" "^0.7.3"
+    "@storybook/addon-storysource" "^5.3.18"
+    "@storybook/addon-viewport" "^5.3.18"
+    "@types/jest" "^25.2.1"
+    "@vue/babel-preset-app" "^4.3.1"
+    "@vuepress/plugin-register-components" "^1.4.1"
+    babel-eslint "^10.1.0"
+    babel-loader "^8.1.0"
+    body-scroll-lock "^3.0.1"
+    core-js "^3.6.5"
     hammerjs "^2.0.8"
     leaflet "^1.5.1"
+    lint-staged "^10.1.3"
     lozad "^1.9.0"
     node-sass "^4.12.0"
-    sass-loader "^7.1.0"
+    sass-loader "^8.0.2"
     simplebar-vue "^1.4.0"
+    storybook-addon-vue-info "^1.4.2"
     vue-drag-drop "^1.1.4"
     vue-fragment "^1.5.1"
-    vue2-leaflet "^2.1.1"
-    webpack-dev-middleware "3.6.0"
+    vue2-leaflet "^2.5.2"
+    webpack-dev-middleware "3.7.2"
+
+"@storybook/addon-storysource@^5.3.18":
+  version "5.3.18"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-storysource/-/addon-storysource-5.3.18.tgz#003374d76c0898c3b74aa4cd008f444eb6b63c68"
+  integrity sha512-uMSu505rbcNErAYngV5raVRQ/eMiOtGNA88WxNzD/8h/0EVpEXlBAewiGzAmooNhCa/3O3iPuwka8Cky6aWPOA==
+  dependencies:
+    "@storybook/addons" "5.3.18"
+    "@storybook/components" "5.3.18"
+    "@storybook/router" "5.3.18"
+    "@storybook/source-loader" "5.3.18"
+    "@storybook/theming" "5.3.18"
+    core-js "^3.0.1"
+    estraverse "^4.2.0"
+    loader-utils "^1.2.3"
+    prettier "^1.16.4"
+    prop-types "^15.7.2"
+    react-syntax-highlighter "^11.0.2"
+    regenerator-runtime "^0.13.3"
+    util-deprecate "^1.0.2"
+
+"@storybook/addon-viewport@^5.3.18":
+  version "5.3.18"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-5.3.18.tgz#9cfeb93e473845436e0c7fb74d590305ff7ef48e"
+  integrity sha512-9ofmbhYm4fU28u9Gasywwul8OLVhKlu1aiLnLfYUd+ZE2r9WuNxGW93m3iIgtccynpANn9phFcgEmWGKfY3vIw==
+  dependencies:
+    "@storybook/addons" "5.3.18"
+    "@storybook/api" "5.3.18"
+    "@storybook/client-logger" "5.3.18"
+    "@storybook/components" "5.3.18"
+    "@storybook/core-events" "5.3.18"
+    "@storybook/theming" "5.3.18"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    memoizerific "^1.11.3"
+    prop-types "^15.7.2"
+    util-deprecate "^1.0.2"
+
+"@storybook/addons@5.3.18":
+  version "5.3.18"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.3.18.tgz#5cbba6407ef7a802041c5ee831473bc3bed61f64"
+  integrity sha512-ZQjDgTUDFRLvAiBg2d8FgPgghfQ+9uFyXQbtiGlTBLinrPCeQd7J86qiUES0fcGoohCCw0wWKtvB0WF2z1XNDg==
+  dependencies:
+    "@storybook/api" "5.3.18"
+    "@storybook/channels" "5.3.18"
+    "@storybook/client-logger" "5.3.18"
+    "@storybook/core-events" "5.3.18"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    util-deprecate "^1.0.2"
+
+"@storybook/api@5.3.18":
+  version "5.3.18"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-5.3.18.tgz#95582ab90d947065e0e34ed603650a3630dcbd16"
+  integrity sha512-QXaccNCARHzPWOuxYndiebGWBZmwiUvRgB9ji0XTJBS3y8K0ZPb5QyuqiKPaEWUj8dBA8rzdDtkW3Yt95Namaw==
+  dependencies:
+    "@reach/router" "^1.2.1"
+    "@storybook/channels" "5.3.18"
+    "@storybook/client-logger" "5.3.18"
+    "@storybook/core-events" "5.3.18"
+    "@storybook/csf" "0.0.1"
+    "@storybook/router" "5.3.18"
+    "@storybook/theming" "5.3.18"
+    "@types/reach__router" "^1.2.3"
+    core-js "^3.0.1"
+    fast-deep-equal "^2.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    prop-types "^15.6.2"
+    react "^16.8.3"
+    semver "^6.0.0"
+    shallow-equal "^1.1.0"
+    store2 "^2.7.1"
+    telejson "^3.2.0"
+    util-deprecate "^1.0.2"
+
+"@storybook/channels@5.3.18":
+  version "5.3.18"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-5.3.18.tgz#490c9eaa8292b0571c0f665052b12addf7c35f21"
+  integrity sha512-scP/6td/BJSEOgfN+qaYGDf3E793xye7tIw6W+sYqwg+xdMFO39wVXgVZNpQL6sLEwpJZTaPywCjC6p6ksErqQ==
+  dependencies:
+    core-js "^3.0.1"
+
+"@storybook/client-logger@5.3.18":
+  version "5.3.18"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.3.18.tgz#27c9d09d788965db0164be6e168bc3f03adbf88f"
+  integrity sha512-RZjxw4uqZX3Yk27IirbB/pQG+wRsQSSRlKqYa8KQ5bSanm4IrcV9VA1OQbuySW9njE+CexAnakQJ/fENdmurNg==
+  dependencies:
+    core-js "^3.0.1"
+
+"@storybook/components@5.3.18":
+  version "5.3.18"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.3.18.tgz#528f6ab1660981e948993a04b407a6fad7751589"
+  integrity sha512-LIN4aVCCDY7klOwtuqQhfYz4tHaMADhXEzZpij+3r8N68Inck6IJ1oo9A9umXQPsTioQi8e6FLobH1im90j/2A==
+  dependencies:
+    "@storybook/client-logger" "5.3.18"
+    "@storybook/theming" "5.3.18"
+    "@types/react-syntax-highlighter" "11.0.4"
+    "@types/react-textarea-autosize" "^4.3.3"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    markdown-to-jsx "^6.9.1"
+    memoizerific "^1.11.3"
+    polished "^3.3.1"
+    popper.js "^1.14.7"
+    prop-types "^15.7.2"
+    react "^16.8.3"
+    react-dom "^16.8.3"
+    react-focus-lock "^2.1.0"
+    react-helmet-async "^1.0.2"
+    react-popper-tooltip "^2.8.3"
+    react-syntax-highlighter "^11.0.2"
+    react-textarea-autosize "^7.1.0"
+    simplebar-react "^1.0.0-alpha.6"
+    ts-dedent "^1.1.0"
+
+"@storybook/core-events@5.3.18":
+  version "5.3.18"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-5.3.18.tgz#e5d335f8a2c7dd46502b8f505006f1e111b46d49"
+  integrity sha512-uQ6NYJ5WODXK8DJ7m8y3yUAtWB3n+6XtYztjY+tdkCsLYvTYDXNS+epV+f5Hu9+gB+/Dm+b5Su4jDD+LZB2QWA==
+  dependencies:
+    core-js "^3.0.1"
+
+"@storybook/csf@0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
+  integrity sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==
+  dependencies:
+    lodash "^4.17.15"
+
+"@storybook/router@5.3.18":
+  version "5.3.18"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.3.18.tgz#8ab22f1f2f7f957e78baf992030707a62289076e"
+  integrity sha512-6B2U2C75KTSVaCuYYgcubeJGcCSnwsXuEf50hEd5mGqWgHZfojCtGvB7Ko4X+0h8rEC+eNA4p7YBOhlUv9WNrQ==
+  dependencies:
+    "@reach/router" "^1.2.1"
+    "@storybook/csf" "0.0.1"
+    "@types/reach__router" "^1.2.3"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    qs "^6.6.0"
+    util-deprecate "^1.0.2"
+
+"@storybook/source-loader@5.3.18":
+  version "5.3.18"
+  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-5.3.18.tgz#39ba28d9664ab8204d6b04ee757772369931e7e5"
+  integrity sha512-oljmLt3KMu17W9FAaEgocsI6wrloWczS26SVXadzbDbL+8Tu6vTeFJSd6HcY+e4JIIKjuze0kmaVhpi6wwPbZQ==
+  dependencies:
+    "@storybook/addons" "5.3.18"
+    "@storybook/client-logger" "5.3.18"
+    "@storybook/csf" "0.0.1"
+    core-js "^3.0.1"
+    estraverse "^4.2.0"
+    global "^4.3.2"
+    loader-utils "^1.2.3"
+    prettier "^1.16.4"
+    prop-types "^15.7.2"
+    regenerator-runtime "^0.13.3"
+
+"@storybook/theming@5.3.18":
+  version "5.3.18"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.3.18.tgz#35e78de79d9cf8f1248af0dd1c7fa60555761312"
+  integrity sha512-lfFTeLoYwLMKg96N3gn0umghMdAHgJBGuk2OM8Ll84yWtdl9RGnzfiI1Fl7Cr5k95dCF7drLJlJCao1VxUkFSA==
+  dependencies:
+    "@emotion/core" "^10.0.20"
+    "@emotion/styled" "^10.0.17"
+    "@storybook/client-logger" "5.3.18"
+    core-js "^3.0.1"
+    deep-object-diff "^1.1.0"
+    emotion-theming "^10.0.19"
+    global "^4.3.2"
+    memoizerific "^1.11.3"
+    polished "^3.3.1"
+    prop-types "^15.7.2"
+    resolve-from "^5.0.0"
+    ts-dedent "^1.1.0"
 
 "@szmarczak/http-timer@^1.1.2":
   version "1.1.2"
@@ -2267,6 +2576,11 @@
     "@types/browserslist" "*"
     postcss "7.x.x"
 
+"@types/babel-types@*", "@types/babel-types@^7.0.0":
+  version "7.0.7"
+  resolved "https://registry.yarnpkg.com/@types/babel-types/-/babel-types-7.0.7.tgz#667eb1640e8039436028055737d2b9986ee336e3"
+  integrity sha512-dBtBbrc+qTHy1WdfHYjBwRln4+LWqASWakLHsWHR2NWHIFkv4W3O070IGoGLEBrJBvct3r0L1BUPuvURi7kYUQ==
+
 "@types/babel__core@^7.1.0", "@types/babel__core@^7.1.3":
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.7.tgz#1dacad8840364a57c98d0dd4855c6dd3752c6b89"
@@ -2300,6 +2614,13 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/babylon@^6.16.2":
+  version "6.16.5"
+  resolved "https://registry.yarnpkg.com/@types/babylon/-/babylon-6.16.5.tgz#1c5641db69eb8cdf378edd25b4be7754beeb48b4"
+  integrity sha512-xH2e58elpj1X4ynnKp9qSnWlsRTIs6n3tgLGNfwAGHwePw0mulHQllV34n0T25uYSu1k0hRKkWXF890B1yS47w==
+  dependencies:
+    "@types/babel-types" "*"
+
 "@types/body-parser@*":
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.0.tgz#0685b3c47eb3006ffed117cdd55164b61f80538f"
@@ -2400,6 +2721,11 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/history@*":
+  version "4.7.5"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.5.tgz#527d20ef68571a4af02ed74350164e7a67544860"
+  integrity sha512-wLD/Aq2VggCJXSjxEwrMafIP51Z+13H78nXIX0ABEuIGhmB5sNGbR113MOKo+yfw+RDo1ZU3DM6yfnnRF/+ouw==
+
 "@types/html-minifier@^3.5.3":
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/@types/html-minifier/-/html-minifier-3.5.3.tgz#5276845138db2cebc54c789e0aaf87621a21e84f"
@@ -2409,6 +2735,11 @@
     "@types/relateurl" "*"
     "@types/uglify-js" "*"
 
+"@types/is-function@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.0.tgz#1b0b819b1636c7baf0d6785d030d12edf70c3e83"
+  integrity sha512-iTs9HReBu7evG77Q4EC8hZnqRt57irBDkK9nvmHroiOIVwYMQc4IvYvdRgwKfYepunIY7Oh/dBuuld+Gj9uo6w==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
@@ -2436,6 +2767,14 @@
   dependencies:
     jest-diff "^24.3.0"
 
+"@types/jest@^25.2.1":
+  version "25.2.1"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-25.2.1.tgz#9544cd438607955381c1bdbdb97767a249297db5"
+  integrity sha512-msra1bCaAeEdkSyA0CZ6gW1ukMIvZ5YoJkdXw/qhQdsuuDlFTcEUrUw8CLCPt2rVRUfXlClVvK2gvPs9IokZaA==
+  dependencies:
+    jest-diff "^25.2.1"
+    pretty-format "^25.2.1"
+
 "@types/json-schema@^7.0.3":
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
@@ -2492,6 +2831,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/prop-types@*":
+  version "15.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
+
 "@types/pug@^2.0.4":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.4.tgz#8772fcd0418e3cd2cc171555d73007415051f4b2"
@@ -2512,6 +2856,36 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
   integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
 
+"@types/reach__router@^1.2.3":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.3.4.tgz#98ef393d06f59d296b5c021ba94b94e5fc463245"
+  integrity sha512-DZgYfxUIlVSjvf0AvBbYNbpXLrTFNNpU1HrvCRbnMtx3nvGUUWC1/zlAe4dD4FCPFtc+LQuIPEsDiTb0zQkthg==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+
+"@types/react-syntax-highlighter@11.0.4":
+  version "11.0.4"
+  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"
+  integrity sha512-9GfTo3a0PHwQeTVoqs0g5bS28KkSY48pp5659wA+Dp4MqceDEa8EHBqrllJvvtyusszyJhViUEap0FDvlk/9Zg==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-textarea-autosize@^4.3.3":
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/@types/react-textarea-autosize/-/react-textarea-autosize-4.3.5.tgz#6c4d2753fa1864c98c0b2b517f67bb1f6e4c46de"
+  integrity sha512-PiDL83kPMTolyZAWW3lyzO6ktooTb9tFTntVy7CA83/qFLWKLJ5bLeRboy6J6j3b1e8h2Eec6gBTEOOJRjV14A==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "16.9.34"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.34.tgz#f7d5e331c468f53affed17a8a4d488cd44ea9349"
+  integrity sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/relateurl@*":
   version "0.2.28"
   resolved "https://registry.yarnpkg.com/@types/relateurl/-/relateurl-0.2.28.tgz#6bda7db8653fa62643f5ee69e9f69c11a392e3a6"
@@ -2612,6 +2986,13 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@types/yargs@^15.0.0":
+  version "15.0.4"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.4.tgz#7e5d0f8ca25e9d5849f2ea443cf7c402decd8299"
+  integrity sha512-9T1auFmbPZoxHz0enUFlUuKRy3it01R+hlggyVUMtnCTQRunsQYifnSGb8hET4Xo8yiC0o0r1paW3ud5+rbURg==
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@types/zen-observable@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.8.0.tgz#8b63ab7f1aa5321248aad5ac890a485656dcea4d"
@@ -2677,7 +3058,7 @@
     lodash.kebabcase "^4.1.1"
     svg-tags "^1.0.0"
 
-"@vue/babel-preset-app@^4.0.0-alpha.1", "@vue/babel-preset-app@^4.1.2":
+"@vue/babel-preset-app@^4.0.0-alpha.1", "@vue/babel-preset-app@^4.1.2", "@vue/babel-preset-app@^4.3.1":
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-4.3.1.tgz#bb67aae562983067c5b242c27fb7de17f40cf109"
   integrity sha512-iNkySkbRWXGUA+Cvzj+/gEP0Y0uVAwwzfn21S7hkggSeIg9LJyZ+QzdxgKO0wgi01yTdb2mYWgeLQAfHZ65aew==
@@ -2899,11 +3280,33 @@
   dependencies:
     "@vuepress/shared-utils" "^1.4.0"
 
+"@vuepress/plugin-register-components@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@vuepress/plugin-register-components/-/plugin-register-components-1.4.1.tgz#25d70834006960f54475da97255ebaca66ecc5a6"
+  integrity sha512-6yI4J/tMhOASSLmlP+5p4ccljlWuNBRsyYSKiD5jWAV181oMmN32LtuoCggXBhSvQUgn2grxyjmYw+tcSV5KGQ==
+  dependencies:
+    "@vuepress/shared-utils" "1.4.1"
+
 "@vuepress/plugin-search@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@vuepress/plugin-search/-/plugin-search-1.4.0.tgz#26a02e3409e6ea6830f9fc7e6d87fc45ba46c579"
   integrity sha512-5K02DL9Wqlfy/aNiYXdbXBOGzR9zMNKz/P8lfHDU+ZOjtfNf6ImAdUkHS4pi70YkkTuemdYM8JjG/j5UYn6Rjw==
 
+"@vuepress/shared-utils@1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@vuepress/shared-utils/-/shared-utils-1.4.1.tgz#d09fcd742111f2efeef93b9c9b353bcd8202ae97"
+  integrity sha512-FBUHFhvR7vk6glQy/qUntBz8bVeWiNYZ2/G16EKaerKKn15xAiD7tUFCQ3L/KjtQJ8TV38GK47UEXh7UTcRwQg==
+  dependencies:
+    chalk "^2.3.2"
+    diacritics "^1.3.0"
+    escape-html "^1.0.3"
+    fs-extra "^7.0.1"
+    globby "^9.2.0"
+    gray-matter "^4.0.1"
+    hash-sum "^1.0.2"
+    semver "^6.0.0"
+    upath "^1.1.0"
+
 "@vuepress/shared-utils@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@vuepress/shared-utils/-/shared-utils-1.4.0.tgz#ab4bfcd5c1e3d0e5e384e0c1d0bb86470430c87e"
@@ -3139,6 +3542,13 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+acorn-globals@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-3.1.0.tgz#fd8270f71fbb4996b004fa880ee5d46573a731bf"
+  integrity sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=
+  dependencies:
+    acorn "^4.0.4"
+
 acorn-globals@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
@@ -3162,6 +3572,16 @@ acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.1.1.tgz#345f0dffad5c735e7373d2fec9a1023e6a44b83e"
   integrity sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==
 
+acorn@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+  integrity sha1-ReN/s56No/JbruP/U2niu18iAXo=
+
+acorn@^4.0.4, acorn@~4.0.2:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+  integrity sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=
+
 acorn@^5.5.3:
   version "5.7.4"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
@@ -3252,6 +3672,15 @@ algoliasearch@^3.24.5:
     semver "^5.1.0"
     tunnel-agent "^0.6.0"
 
+align-text@^0.1.1, align-text@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
+  integrity sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
 alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
@@ -3558,7 +3987,7 @@ arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
-asap@^2.0.0:
+asap@^2.0.0, asap@~2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -3607,6 +4036,11 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
+ast-types@0.12.4, ast-types@^0.12.2:
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.12.4.tgz#71ce6383800f24efc9a1a3308f3a6e420a0974d1"
+  integrity sha512-ky/YVYCbtVAS8TdMIaTiPFHwEpRB5z1hctepJplTr3UW5q8TDrpIMCILyk8pmLxGtn2KCtC/lSn7zOsaI7nzDw==
+
 astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
@@ -3703,6 +4137,18 @@ babel-code-frame@^6.22.0:
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
+babel-eslint@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
+  integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.7.0"
+    "@babel/traverse" "^7.7.0"
+    "@babel/types" "^7.7.0"
+    eslint-visitor-keys "^1.0.0"
+    resolve "^1.12.0"
+
 babel-jest@^24.1.0, babel-jest@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
@@ -3734,6 +4180,22 @@ babel-plugin-dynamic-import-node@^2.3.0:
   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-istanbul@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854"
@@ -3751,6 +4213,20 @@ babel-plugin-jest-hoist@^24.9.0:
   dependencies:
     "@types/babel__traverse" "^7.0.6"
 
+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=
+
 babel-preset-jest@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz#192b521e2217fb1d1f67cf73f70c336650ad3cdc"
@@ -3759,6 +4235,29 @@ babel-preset-jest@^24.9.0:
     "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
     babel-plugin-jest-hoist "^24.9.0"
 
+babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
+babel-types@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  integrity sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
+
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -3879,6 +4378,11 @@ body-scroll-lock@^2.6.4:
   resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.7.1.tgz#caf3f9c91773af1ffb684cd66ed9137b5b737014"
   integrity sha512-hS53SQ8RhM0e4DsQ3PKz6Gr2O7Kpdh59TWU98GHjaQznL7y4dFycEPk7pFQAikqBaUSCArkc5E3pe7CWIt2fZA==
 
+body-scroll-lock@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.0.1.tgz#bacb9ebf64fef2498392a3b779f4943af2004fad"
+  integrity sha512-BYcnBAv6r3iKFDeYgG3ZMiOtxHDcHaev84he4vU4nB062A9MSUHsbVkrgsiSZlGCcWqoqGKCKTytSUhzuEjiCQ==
+
 bonjour@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
@@ -4244,6 +4748,14 @@ camel-case@3.0.x, camel-case@^3.0.0:
     no-case "^2.2.0"
     upper-case "^1.1.1"
 
+camel-case@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.1.tgz#1fc41c854f00e2f7d0139dfeba1542d6896fe547"
+  integrity sha512-7fa2WcG4fYFkclIvEmxBbTvmibwF2/agfEBc6q3lOpVu0A13ltLsA+Hr/8Hp6kp5f+G7hKi6t8lys6XxP+1K6Q==
+  dependencies:
+    pascal-case "^3.1.1"
+    tslib "^1.10.0"
+
 camelcase-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
@@ -4261,6 +4773,11 @@ camelcase-keys@^4.0.0:
     map-obj "^2.0.0"
     quick-lru "^1.0.0"
 
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+  integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=
+
 camelcase@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
@@ -4301,6 +4818,15 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001036, can
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001039.tgz#b3814a1c38ffeb23567f8323500c09526a577bbe"
   integrity sha512-SezbWCTT34eyFoWHgx8UWso7YtvtM7oosmFoXbCkdC6qJzRfBTeTgE9REtKtiuKXuMwWTZEvdnFNGAyVMorv8Q==
 
+capital-case@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.3.tgz#339bd77e8fab6cf75111d4fca509b3edf7c117c8"
+  integrity sha512-OlUSJpUr7SY0uZFOxcwnDOU7/MpHlKTZx2mqnDYQFrDudXLFm0JJ9wr/l4csB+rh2Ug0OPuoSO53PqiZBqno9A==
+  dependencies:
+    no-case "^3.0.3"
+    tslib "^1.10.0"
+    upper-case-first "^2.0.1"
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -4313,6 +4839,14 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  integrity sha1-qg0yYptu6XIgBBHL1EYckHvCt60=
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
 chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -4341,6 +4875,54 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.0.0.tgz#6e98081ed2d17faab615eb52ac66ec1fe6209e72"
+  integrity sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+change-case@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/change-case/-/change-case-4.1.1.tgz#d5005709275952e7963fed7b91e4f9fdb6180afa"
+  integrity sha512-qRlUWn/hXnX1R1LBDF/RelJLiqNjKjUqlmuBVSEIyye8kq49CXqkZWKmi8XeUAdDXWFOcGLUMZ+aHn3Q5lzUXw==
+  dependencies:
+    camel-case "^4.1.1"
+    capital-case "^1.0.3"
+    constant-case "^3.0.3"
+    dot-case "^3.0.3"
+    header-case "^2.0.3"
+    no-case "^3.0.3"
+    param-case "^3.0.3"
+    pascal-case "^3.1.1"
+    path-case "^3.0.3"
+    sentence-case "^3.0.3"
+    snake-case "^3.0.3"
+    tslib "^1.10.0"
+
+character-entities-legacy@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
+
+character-entities@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
+
+character-parser@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/character-parser/-/character-parser-2.2.0.tgz#c7ce28f36d4bcd9744e5ffc2c5fcde1c73261fc0"
+  integrity sha1-x84o821LzZdE5f/CxfzeHHMmH8A=
+  dependencies:
+    is-regex "^1.0.3"
+
+character-reference-invalid@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
+
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -4425,7 +5007,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-clean-css@4.2.x, clean-css@^4.2.1:
+clean-css@4.2.x, clean-css@^4.1.11, clean-css@^4.2.1:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
   integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
@@ -4478,6 +5060,15 @@ clipboard@^2.0.0:
     select "^1.1.2"
     tiny-emitter "^2.0.0"
 
+cliui@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+  integrity sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=
+  dependencies:
+    center-align "^0.1.1"
+    right-align "^0.1.1"
+    wordwrap "0.0.2"
+
 cliui@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
@@ -4526,6 +5117,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+clone@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -4608,6 +5204,11 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+comma-separated-tokens@^1.0.0:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
+  integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
+
 commander@2.17.x:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
@@ -4623,6 +5224,11 @@ commander@^4.0.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commander@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-5.0.0.tgz#dbf1909b49e5044f8fdaf0adc809f0c0722bdfd0"
+  integrity sha512-JrDGPAKjMGSP1G0DUoaceEJ3DZgAfr/q6X7FVk4+U5KxUSKviYGM2k6zWkfyyBHy5rAtzgYJFa1ro2O9PtoxwQ==
+
 commander@~2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
@@ -4762,6 +5368,25 @@ consolidate@^0.15.1:
   dependencies:
     bluebird "^3.1.1"
 
+constant-case@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-3.0.3.tgz#ac910a99caf3926ac5112f352e3af599d8c5fc0a"
+  integrity sha512-FXtsSnnrFYpzDmvwDGQW+l8XK3GV1coLyBN0eBz16ZUzGaZcT2ANVCJmLeuw2GQgxKHQIe9e0w2dzkSfaRlUmA==
+  dependencies:
+    no-case "^3.0.3"
+    tslib "^1.10.0"
+    upper-case "^2.0.1"
+
+constantinople@^3.0.1, constantinople@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/constantinople/-/constantinople-3.1.2.tgz#d45ed724f57d3d10500017a7d3a889c1381ae647"
+  integrity sha512-yePcBqEFhLOqSBtwYOGGS1exHo/s1xjekXiinh4itpNQGCu4KA1euPh1fg07N2wMITZXQkBz75Ntdt1ctGZouw==
+  dependencies:
+    "@types/babel-types" "^7.0.0"
+    "@types/babylon" "^6.16.2"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+
 constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@@ -4867,7 +5492,7 @@ conventional-recommended-bump@^5.0.0:
     meow "^4.0.0"
     q "^1.5.1"
 
-convert-source-map@^1.4.0, convert-source-map@^1.7.0:
+convert-source-map@^1.4.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==
@@ -4948,7 +5573,7 @@ core-js-compat@^3.6.2, core-js-compat@^3.6.4:
     browserslist "^4.8.3"
     semver "7.0.0"
 
-core-js@^2.5.3, core-js@^2.6.5:
+core-js@^2.4.0, core-js@^2.5.3, core-js@^2.6.5:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
@@ -4958,6 +5583,11 @@ core-js@^3.0.1, core-js@^3.1.3, core-js@^3.6.4:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
   integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
 
+core-js@^3.6.5:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
+  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -5026,6 +5656,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-context@0.3.0, create-react-context@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
+  integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
+  dependencies:
+    gud "^1.0.0"
+    warning "^4.0.3"
+
 cross-env@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941"
@@ -5332,6 +5970,11 @@ cssstyle@^1.0.0:
   dependencies:
     cssom "0.3.x"
 
+csstype@^2.2.0, csstype@^2.5.7:
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
+  integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
+
 cuint@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
@@ -5428,7 +6071,7 @@ decamelize-keys@^1.0.0:
     decamelize "^1.1.0"
     map-obj "^1.0.0"
 
-decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
+decamelize@^1.0.0, decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
@@ -5445,12 +6088,17 @@ decompress-response@^3.3.0:
   dependencies:
     mimic-response "^1.0.0"
 
+dedent-tabs@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/dedent-tabs/-/dedent-tabs-0.8.0.tgz#e8e37e2a84f8d305bc714c2f1121fee873170db6"
+  integrity sha512-YKS/ItX7e9+TdLaUiwht1IxkFDbQEHNJSTruwvrwODRXFov8X7C7iCwrUynrsOh1+CkwmjFK51P5d1HsrI5VJA==
+
 dedent@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
 
-deep-equal@^1.0.1:
+deep-equal@^1.0.1, deep-equal@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
   integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
@@ -5472,6 +6120,11 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deep-object-diff@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.0.tgz#d6fabf476c2ed1751fc94d5ca693d2ed8c18bc5a"
+  integrity sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==
+
 deepmerge@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
@@ -5625,6 +6278,11 @@ diff-sequences@^24.9.0:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
   integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
 
+diff-sequences@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd"
+  integrity sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==
+
 diff@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
@@ -5701,6 +6359,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+doctypes@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9"
+  integrity sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=
+
 dom-converter@^0.2:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -5771,6 +6434,14 @@ domutils@^1.5.1, domutils@^1.7.0:
     dom-serializer "0"
     domelementtype "1"
 
+dot-case@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.3.tgz#21d3b52efaaba2ea5fda875bb1aa8124521cf4aa"
+  integrity sha512-7hwEmg6RiSQfm/GwPL4AAWXKy3YNNZA3oFv2Pdiey0mwkRCPZ9x6SZbkLcn8Ma5PYeVokzoD4Twv2n7LKp5WeA==
+  dependencies:
+    no-case "^3.0.3"
+    tslib "^1.10.0"
+
 dot-prop@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
@@ -5883,6 +6554,15 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
+emotion-theming@^10.0.19:
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10"
+  integrity sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/weak-memoize" "0.2.5"
+    hoist-non-react-statics "^3.3.0"
+
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -6143,7 +6823,7 @@ eslint-utils@^2.0.0:
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-eslint-visitor-keys@^1.1.0:
+eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
   integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
@@ -6205,7 +6885,7 @@ espree@^6.1.2:
     acorn-jsx "^5.2.0"
     eslint-visitor-keys "^1.1.0"
 
-esprima@^4.0.0, esprima@^4.0.1:
+esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
@@ -6323,6 +7003,21 @@ execa@^3.4.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
+execa@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.0.tgz#7f37d6ec17f09e6b8fc53288611695b6d12b9daf"
+  integrity sha512-JbDUxwV3BoT5ZVXQrSVbAiaXhXUkIwvbhPIwZ0N13kX+5yCzOhUNdocxB/UQRuYOHRYYwAxKYwJYc0T4D12pDA==
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -6460,6 +7155,11 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
+fast-deep-equal@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
+  integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
+
 fast-deep-equal@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
@@ -6487,6 +7187,13 @@ fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fault@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
+  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
+  dependencies:
+    format "^0.2.0"
+
 faye-websocket@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
@@ -6616,6 +7323,11 @@ find-cache-dir@^3.0.0, find-cache-dir@^3.2.0:
     make-dir "^3.0.2"
     pkg-dir "^4.1.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"
@@ -6680,6 +7392,11 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+focus-lock@^0.6.7:
+  version "0.6.7"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.7.tgz#65e298f2ba2a3372ab57a4e4c4bdc19e1e32a4e5"
+  integrity sha512-KRo93U/afEqt7w5tBm4t0FHf/Li8tEYav3n4GUiZdeRlRfrtMbL8yQg0xRVnY/kmBRmQ4xkqIlbaMvuqlu53kg==
+
 follow-redirects@1.5.10:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
@@ -6732,6 +7449,11 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+format@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -7018,7 +7740,7 @@ global-dirs@^2.0.1:
   dependencies:
     ini "^1.3.5"
 
-global@^4.3.2:
+global@^4.3.2, global@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
   integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
@@ -7151,6 +7873,11 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
+
 gzip-size@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
@@ -7314,21 +8041,49 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+hast-util-parse-selector@^2.0.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.4.tgz#60c99d0b519e12ab4ed32e58f150ec3f61ed1974"
+  integrity sha512-gW3sxfynIvZApL4L07wryYF4+C9VvH3AUi7LAnVXV4MneGEgwOByXvFo18BgmTWnm7oHAe874jKbIB1YhHSIzA==
+
+hastscript@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-5.1.2.tgz#bde2c2e56d04c62dd24e8c5df288d050a355fb8a"
+  integrity sha512-WlztFuK+Lrvi3EggsqOkQ52rKbxkXL3RwB6t5lwoa8QLMemoWfBuL43eDrwOamJyR7uKQKdmKYaBH1NZBiIRrQ==
+  dependencies:
+    comma-separated-tokens "^1.0.0"
+    hast-util-parse-selector "^2.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+
 he@1.2.x, he@^1.1.0, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+header-case@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.3.tgz#8a7407d16edfd5c970f8ebb116e6383f855b5a72"
+  integrity sha512-LChe/V32mnUQnTwTxd3aAlNMk8ia9tjCDb/LjYtoMrdAPApxLB+azejUk5ERZIZdIqvinwv6BAUuFXH/tQPdZA==
+  dependencies:
+    capital-case "^1.0.3"
+    tslib "^1.10.0"
+
 hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-highlight.js@^9.18.1:
+highlight.js@^9.12.0, highlight.js@^9.18.1:
   version "9.18.1"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.1.tgz#ed21aa001fe6252bb10a3d76d47573c6539fe13c"
   integrity sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==
 
+highlight.js@~9.13.0:
+  version "9.13.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e"
+  integrity sha512-Sc28JNQNDzaH6PORtRLMvif9RSn1mYuOoX3omVjnb0+HbpPygU2ALBI0R/wsiqCb4/fcp07Gdo8g+fhtFrQl6A==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -7346,6 +8101,13 @@ hogan.js@^3.0.2:
     mkdirp "0.3.0"
     nopt "1.0.10"
 
+hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -7812,7 +8574,7 @@ interpret@^1.0.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
 
-invariant@^2.2.2, invariant@^2.2.4:
+invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -7868,6 +8630,19 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
+
+is-alphanumerical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
 is-arguments@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
@@ -7950,6 +8725,11 @@ is-date-object@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
 
+is-decimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
+
 is-descriptor@^0.1.0:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
@@ -7973,6 +8753,14 @@ is-directory@^0.3.1:
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
   integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
 
+is-expression@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-expression/-/is-expression-3.0.0.tgz#39acaa6be7fd1f3471dc42c7416e61c24317ac9f"
+  integrity sha1-Oayqa+f9HzRx3ELHQW5hwkMXrJ8=
+  dependencies:
+    acorn "~4.0.2"
+    object-assign "^4.0.1"
+
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -8012,6 +8800,11 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-function@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08"
+  integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==
+
 is-generator-fn@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
@@ -8036,6 +8829,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-hexadecimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+
 is-https@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-https/-/is-https-1.0.0.tgz#9c1dde000dc7e7288edb983bef379e498e7cb1bf"
@@ -8133,12 +8931,12 @@ is-plain-object@^3.0.0:
   dependencies:
     isobject "^4.0.0"
 
-is-promise@^2.1.0:
+is-promise@^2.0.0, is-promise@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
   integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
 
-is-regex@^1.0.4, is-regex@^1.0.5:
+is-regex@^1.0.3, is-regex@^1.0.4, is-regex@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
   integrity sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==
@@ -8184,7 +8982,7 @@ is-svg@^3.0.0:
   dependencies:
     html-comment-regex "^1.1.0"
 
-is-symbol@^1.0.2:
+is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
   integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
@@ -8394,6 +9192,16 @@ jest-diff@^24.3.0, jest-diff@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
+jest-diff@^25.2.1:
+  version "25.4.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.4.0.tgz#260b70f19a46c283adcad7f081cae71eb784a634"
+  integrity sha512-kklLbJVXW0y8UKOWOdYhI6TH5MG6QAxrWiBMgQaPIuhj3dNFGirKCd+/xfplBXICQ7fI+3QcqHm9p9lWu1N6ug==
+  dependencies:
+    chalk "^3.0.0"
+    diff-sequences "^25.2.6"
+    jest-get-type "^25.2.6"
+    pretty-format "^25.4.0"
+
 jest-docblock@^24.3.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.9.0.tgz#7970201802ba560e1c4092cc25cbedf5af5a8ce2"
@@ -8440,6 +9248,11 @@ jest-get-type@^24.9.0:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
   integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==
 
+jest-get-type@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877"
+  integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==
+
 jest-haste-map@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
@@ -8721,6 +9534,11 @@ js-cookie@^2.2.1:
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
   integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
 
+js-stringify@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db"
+  integrity sha1-Fzb939lyTyijaCrcYjCufk6Weds=
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -8862,6 +9680,14 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jstransformer@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/jstransformer/-/jstransformer-1.0.0.tgz#ed8bf0921e2f3f1ed4d5c1a44f68709ed24722c3"
+  integrity sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=
+  dependencies:
+    is-promise "^2.0.0"
+    promise "^7.0.1"
+
 keyv@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
@@ -8933,6 +9759,11 @@ launch-editor@^2.2.1:
     chalk "^2.3.0"
     shell-quote "^1.6.1"
 
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+  integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=
+
 lcid@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
@@ -9037,6 +9868,25 @@ lint-staged@^10.0.7:
     string-argv "0.3.1"
     stringify-object "^3.3.0"
 
+lint-staged@^10.1.3:
+  version "10.1.7"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.1.7.tgz#b628f8b010083fe4e116d0af7949a32f1ea6b3a7"
+  integrity sha512-ZkK8t9Ep/AHuJQKV95izSa+DqotftGnSsNeEmCSqbQ6j4C4H0jDYhEZqVOGD1Q2Oe227igbqjMWycWyYbQtpoA==
+  dependencies:
+    chalk "^4.0.0"
+    commander "^5.0.0"
+    cosmiconfig "^6.0.0"
+    debug "^4.1.1"
+    dedent "^0.7.0"
+    execa "^4.0.0"
+    listr "^0.14.3"
+    log-symbols "^3.0.0"
+    micromatch "^4.0.2"
+    normalize-path "^3.0.0"
+    please-upgrade-node "^3.2.0"
+    string-argv "0.3.1"
+    stringify-object "^3.3.0"
+
 listr-silent-renderer@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
@@ -9255,7 +10105,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.5, lodash@^4.2.1, lodash@~4.17.12:
+lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@~4.17.12:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -9293,7 +10143,12 @@ loglevel@^1.6.6, loglevel@^1.6.7:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.7.tgz#b3e034233188c68b889f5b862415306f565e2c56"
   integrity sha512-cY2eLFrQSAfVPhCgH1s7JI73tMbg9YC3v3+ZHVW67sBS7UxWzNEk/ZBbSfLykBWHp33dqqtOv82gjhKEi81T/A==
 
-loose-envify@^1.0.0:
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+  integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
+
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9313,6 +10168,13 @@ lower-case@^1.1.1:
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
   integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
 
+lower-case@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7"
+  integrity sha512-LiWgfDLLb1dwbFQZsSglpRj+1ctGnayXz3Uv0/WO8n558JycT5fg6zkNcnW0G68Nn0aEldTFeEfmjCfmqry/rQ==
+  dependencies:
+    tslib "^1.10.0"
+
 lowercase-keys@^1.0.0, lowercase-keys@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
@@ -9323,6 +10185,14 @@ lowercase-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
+lowlight@~1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.11.0.tgz#1304d83005126d4e8b1dc0f07981e9b689ec2efc"
+  integrity sha512-xrGGN6XLL7MbTMdPD6NfWPwY43SNkjf/d0mecSx/CW36fUZTjRHEq0/Cdug3TWKtRXLWi7iMl1eP0olYxj/a4A==
+  dependencies:
+    fault "^1.0.2"
+    highlight.js "~9.13.0"
+
 lozad@^1.9.0:
   version "1.14.0"
   resolved "https://registry.yarnpkg.com/lozad/-/lozad-1.14.0.tgz#91d51d57e53187e95c5b7f4029d7a28a0e940e10"
@@ -9426,6 +10296,11 @@ map-obj@^2.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9"
   integrity sha1-plzSkIepJZi4eRJXpSPgISIqwfk=
 
+map-or-similar@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08"
+  integrity sha1-beJlMXSt+12e3DPGnT6Sobdvrwg=
+
 map-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
@@ -9471,11 +10346,24 @@ markdown-it@^8.4.1:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+markdown-to-jsx@^6.9.1:
+  version "6.11.1"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.11.1.tgz#3931612cfffaa5fd6610ecf2a4055eccccb98fa8"
+  integrity sha512-FdtDAv8d9/tjyHxdCvWZxxOgK2icwzBkTq/dPk+XlQ2B+DYDcwE89FWGzT92erXQ0CQR/bQbpNK3loNYhYL70g==
+  dependencies:
+    prop-types "^15.6.2"
+    unquote "^1.1.0"
+
 marked@0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.2.tgz#4faad28d26ede351a7a1aaa5fec67915c869e355"
   integrity sha512-EGwzEeCcLniFX51DhTpmTom+dSA/MG/OBUDjnWtHbEnjAH180VzUeAw+oE4+Zv+CoYBWyRlYOTR0N8SO9R1PVw==
 
+marked@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.7.0.tgz#b64201f051d271b1edc10a04d1ae9b74bb8e5c0e"
+  integrity sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -9514,6 +10402,13 @@ mem@^4.0.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
+memoizerific@^1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
+  integrity sha1-fIekZGREwy11Q4VwkF8tvRsagFo=
+  dependencies:
+    map-or-similar "^1.5.0"
+
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -9946,6 +10841,14 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
+no-case@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.3.tgz#c21b434c1ffe48b39087e86cfb4d2582e9df18f8"
+  integrity sha512-ehY/mVQCf9BL0gKfsJBvFJen+1V//U+0HQMPrWct40ixE4jnv0bfvxDbWtAHL9EcaPEOJHVVYKoQn1TlZUB8Tw==
+  dependencies:
+    lower-case "^2.0.1"
+    tslib "^1.10.0"
+
 node-fetch-npm@^2.0.2:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/node-fetch-npm/-/node-fetch-npm-2.0.4.tgz#6507d0e17a9ec0be3bec516958a497cec54bf5a4"
@@ -10692,6 +11595,14 @@ param-case@2.1.x, param-case@^2.1.1:
   dependencies:
     no-case "^2.2.0"
 
+param-case@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.3.tgz#4be41f8399eff621c56eebb829a5e451d9801238"
+  integrity sha512-VWBVyimc1+QrzappRs7waeN2YmoZFCGXWASRYX1/rGHtXqEcrGEIDm+jqIwFa2fRXNgQEwrxaYuIrX0WcAguTA==
+  dependencies:
+    dot-case "^3.0.3"
+    tslib "^1.10.0"
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -10711,6 +11622,18 @@ parse-asn1@^5.0.0:
     pbkdf2 "^3.0.3"
     safe-buffer "^5.1.1"
 
+parse-entities@^1.1.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.2.tgz#c31bf0f653b6661354f8973559cb86dd1d5edf50"
+  integrity sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.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"
@@ -10769,6 +11692,14 @@ parseurl@~1.3.2, parseurl@~1.3.3:
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
+pascal-case@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.1.tgz#5ac1975133ed619281e88920973d2cd1f279de5f"
+  integrity sha512-XIeHKqIrsquVTQL2crjq3NfJUxmdLasn3TYOU0VBM+UX2a6ztAWBlJQBePLGY7VHW8+2dRadeIPK5+KImwTxQA==
+  dependencies:
+    no-case "^3.0.3"
+    tslib "^1.10.0"
+
 pascalcase@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
@@ -10779,6 +11710,14 @@ path-browserify@0.0.1:
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
   integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==
 
+path-case@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/path-case/-/path-case-3.0.3.tgz#d48119aed52c4712e036ca40c6b15984f909554f"
+  integrity sha512-UMFU6UETFpCNWbIWNczshPrnK/7JAXBP2NYw80ojElbQ2+JYxdqWDBkvvqM93u4u6oLmuJ/tPOf2tM8KtXv4eg==
+  dependencies:
+    dot-case "^3.0.3"
+    tslib "^1.10.0"
+
 path-dirname@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
@@ -10961,6 +11900,18 @@ pn@^1.1.0:
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
+polished@^3.3.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-3.5.2.tgz#ca132b8cd68f7ffa95ae9d423f03e7a14fda1062"
+  integrity sha512-vWoRDg3gY5RQBtUfcj9MRN10VCIf4EkdUikGxyXItg2Hnwk+eIVtdBiLajN0ldFeT3Vq4r/QNbjrQdhqBKrTug==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+
+popper.js@^1.14.4, popper.js@^1.14.7:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 portfinder@^1.0.13, portfinder@^1.0.25:
   version "1.0.25"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca"
@@ -11667,7 +12618,7 @@ prettier@1.16.3:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.3.tgz#8c62168453badef702f34b45b6ee899574a6a65d"
   integrity sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==
 
-prettier@^1.18.2:
+prettier@^1.16.4, prettier@^1.18.2:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
   integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
@@ -11695,6 +12646,16 @@ pretty-format@^24.9.0:
     ansi-styles "^3.2.0"
     react-is "^16.8.4"
 
+pretty-format@^25.2.1, pretty-format@^25.4.0:
+  version "25.4.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.4.0.tgz#c58801bb5c4926ff4a677fe43f9b8b99812c7830"
+  integrity sha512-PI/2dpGjXK5HyXexLPZU/jw5T9Q6S1YVXxxVxco+LIqzUFHXIbKZKdUVt7GcX7QUCr31+3fzhi4gN4/wUYPVxQ==
+  dependencies:
+    "@jest/types" "^25.4.0"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^16.12.0"
+
 pretty-time@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pretty-time/-/pretty-time-1.1.0.tgz#ffb7429afabb8535c346a34e41873adf3d74dd0e"
@@ -11744,13 +12705,20 @@ prismic-vue@^2.0.0:
   resolved "https://registry.yarnpkg.com/prismic-vue/-/prismic-vue-2.0.0.tgz#e2c26d70402d3bcc172054017f1c23b208c0192d"
   integrity sha512-dg9CrpDEPbSCflMjbBHkU4jqGllRUqqYynqKJ8Mk3AtHUULfjEK4nQ2mZYQrFBMLOheh9lAv0/CCP4uHN7G7xw==
 
-prismjs@^1.13.0:
+prismjs@^1.13.0, prismjs@^1.8.4:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.20.0.tgz#9b685fc480a3514ee7198eac6a3bf5024319ff03"
   integrity sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==
   optionalDependencies:
     clipboard "^2.0.0"
 
+prismjs@~1.17.0:
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be"
+  integrity sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==
+  optionalDependencies:
+    clipboard "^2.0.0"
+
 private@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -11789,6 +12757,13 @@ promise-retry@^1.1.1:
     err-code "^1.0.0"
     retry "^0.10.0"
 
+promise@^7.0.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+  dependencies:
+    asap "~2.0.3"
+
 prompts@^2.0.1:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.3.2.tgz#480572d89ecf39566d2bd3fe2c9fccb7c4c0b068"
@@ -11804,6 +12779,15 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
+prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 proper-lockfile@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/proper-lockfile/-/proper-lockfile-4.1.1.tgz#284cf9db9e30a90e647afad69deb7cb06881262c"
@@ -11813,6 +12797,13 @@ proper-lockfile@^4.1.1:
     retry "^0.12.0"
     signal-exit "^3.0.2"
 
+property-information@^5.0.0:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.4.0.tgz#16e08f13f4e5c4a7be2e4ec431c01c4f8dba869a"
+  integrity sha512-nmMWAm/3vKFGmmOWOcdLjgq/Hlxa+hsuR/px1Lp/UGEyc5A22A6l78Shc2C0E71sPmAqglni+HrS7L7VJ7AUCA==
+  dependencies:
+    xtend "^4.0.0"
+
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
@@ -11865,6 +12856,111 @@ public-encrypt@^4.0.0:
     randombytes "^2.0.1"
     safe-buffer "^5.1.2"
 
+pug-attrs@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pug-attrs/-/pug-attrs-2.0.4.tgz#b2f44c439e4eb4ad5d4ef25cac20d18ad28cc336"
+  integrity sha512-TaZ4Z2TWUPDJcV3wjU3RtUXMrd3kM4Wzjbe3EWnSsZPsJ3LDI0F3yCnf2/W7PPFF+edUFQ0HgDL1IoxSz5K8EQ==
+  dependencies:
+    constantinople "^3.0.1"
+    js-stringify "^1.0.1"
+    pug-runtime "^2.0.5"
+
+pug-code-gen@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/pug-code-gen/-/pug-code-gen-2.0.2.tgz#ad0967162aea077dcf787838d94ed14acb0217c2"
+  integrity sha512-kROFWv/AHx/9CRgoGJeRSm+4mLWchbgpRzTEn8XCiwwOy6Vh0gAClS8Vh5TEJ9DBjaP8wCjS3J6HKsEsYdvaCw==
+  dependencies:
+    constantinople "^3.1.2"
+    doctypes "^1.1.0"
+    js-stringify "^1.0.1"
+    pug-attrs "^2.0.4"
+    pug-error "^1.3.3"
+    pug-runtime "^2.0.5"
+    void-elements "^2.0.1"
+    with "^5.0.0"
+
+pug-error@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/pug-error/-/pug-error-1.3.3.tgz#f342fb008752d58034c185de03602dd9ffe15fa6"
+  integrity sha512-qE3YhESP2mRAWMFJgKdtT5D7ckThRScXRwkfo+Erqga7dyJdY3ZquspprMCj/9sJ2ijm5hXFWQE/A3l4poMWiQ==
+
+pug-filters@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/pug-filters/-/pug-filters-3.1.1.tgz#ab2cc82db9eeccf578bda89130e252a0db026aa7"
+  integrity sha512-lFfjNyGEyVWC4BwX0WyvkoWLapI5xHSM3xZJFUhx4JM4XyyRdO8Aucc6pCygnqV2uSgJFaJWW3Ft1wCWSoQkQg==
+  dependencies:
+    clean-css "^4.1.11"
+    constantinople "^3.0.1"
+    jstransformer "1.0.0"
+    pug-error "^1.3.3"
+    pug-walk "^1.1.8"
+    resolve "^1.1.6"
+    uglify-js "^2.6.1"
+
+pug-lexer@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/pug-lexer/-/pug-lexer-4.1.0.tgz#531cde48c7c0b1fcbbc2b85485c8665e31489cfd"
+  integrity sha512-i55yzEBtjm0mlplW4LoANq7k3S8gDdfC6+LThGEvsK4FuobcKfDAwt6V4jKPH9RtiE3a2Akfg5UpafZ1OksaPA==
+  dependencies:
+    character-parser "^2.1.1"
+    is-expression "^3.0.0"
+    pug-error "^1.3.3"
+
+pug-linker@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/pug-linker/-/pug-linker-3.0.6.tgz#f5bf218b0efd65ce6670f7afc51658d0f82989fb"
+  integrity sha512-bagfuHttfQOpANGy1Y6NJ+0mNb7dD2MswFG2ZKj22s8g0wVsojpRlqveEQHmgXXcfROB2RT6oqbPYr9EN2ZWzg==
+  dependencies:
+    pug-error "^1.3.3"
+    pug-walk "^1.1.8"
+
+pug-load@^2.0.12:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/pug-load/-/pug-load-2.0.12.tgz#d38c85eb85f6e2f704dea14dcca94144d35d3e7b"
+  integrity sha512-UqpgGpyyXRYgJs/X60sE6SIf8UBsmcHYKNaOccyVLEuT6OPBIMo6xMPhoJnqtB3Q3BbO4Z3Bjz5qDsUWh4rXsg==
+  dependencies:
+    object-assign "^4.1.0"
+    pug-walk "^1.1.8"
+
+pug-parser@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/pug-parser/-/pug-parser-5.0.1.tgz#03e7ada48b6840bd3822f867d7d90f842d0ffdc9"
+  integrity sha512-nGHqK+w07p5/PsPIyzkTQfzlYfuqoiGjaoqHv1LjOv2ZLXmGX1O+4Vcvps+P4LhxZ3drYSljjq4b+Naid126wA==
+  dependencies:
+    pug-error "^1.3.3"
+    token-stream "0.0.1"
+
+pug-runtime@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/pug-runtime/-/pug-runtime-2.0.5.tgz#6da7976c36bf22f68e733c359240d8ae7a32953a"
+  integrity sha512-P+rXKn9un4fQY77wtpcuFyvFaBww7/91f3jHa154qU26qFAnOe6SW1CbIDcxiG5lLK9HazYrMCCuDvNgDQNptw==
+
+pug-strip-comments@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/pug-strip-comments/-/pug-strip-comments-1.0.4.tgz#cc1b6de1f6e8f5931cf02ec66cdffd3f50eaf8a8"
+  integrity sha512-i5j/9CS4yFhSxHp5iKPHwigaig/VV9g+FgReLJWWHEHbvKsbqL0oP/K5ubuLco6Wu3Kan5p7u7qk8A4oLLh6vw==
+  dependencies:
+    pug-error "^1.3.3"
+
+pug-walk@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/pug-walk/-/pug-walk-1.1.8.tgz#b408f67f27912f8c21da2f45b7230c4bd2a5ea7a"
+  integrity sha512-GMu3M5nUL3fju4/egXwZO0XLi6fW/K3T3VTgFQ14GxNi8btlxgT5qZL//JwZFm/2Fa64J/PNS8AZeys3wiMkVA==
+
+pug@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pug/-/pug-2.0.4.tgz#ee7682ec0a60494b38d48a88f05f3b0ac931377d"
+  integrity sha512-XhoaDlvi6NIzL49nu094R2NA6P37ijtgMDuWE+ofekDChvfKnzFal60bhSdiy8y2PBO6fmz3oMEIcfpBVRUdvw==
+  dependencies:
+    pug-code-gen "^2.0.2"
+    pug-filters "^3.1.1"
+    pug-lexer "^4.1.0"
+    pug-linker "^3.0.6"
+    pug-load "^2.0.12"
+    pug-parser "^5.0.1"
+    pug-runtime "^2.0.5"
+    pug-strip-comments "^1.0.4"
+
 pump@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
@@ -11922,6 +13018,11 @@ qs@6.7.0:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
+qs@^6.6.0:
+  version "6.9.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.3.tgz#bfadcd296c2d549f1dffa560619132c977f5008e"
+  integrity sha512-EbZYNarm6138UKKq46tdx08Yo/q9ZhFoAXAI1meAFd2GtbRDhbZY2WQSICskT0c5q99aFzLG1D4nvTk9tqfXIw==
+
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
@@ -12018,11 +13119,110 @@ rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-is@^16.8.4:
+react-clientside-effect@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"
+  integrity sha512-nRmoyxeok5PBO6ytPvSjKp9xwXg9xagoTK1mMjwnQxqM9Hd7MNPl+LS1bOSOe+CV2+4fnEquc7H/S8QD3q697A==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+
+react-dom@^16.8.3:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
+  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.19.1"
+
+react-fast-compare@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.0.1.tgz#884d339ce1341aad22392e7a88664c71da48600e"
+  integrity sha512-C5vP0J644ofZGd54P8++O7AvrqMEbrGf8Ue0eAUJLJyw168dAX2aiYyX/zcY/eSNwO0IDjsKUaLE6n83D+TnEg==
+
+react-focus-lock@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.3.1.tgz#9d5d85899773609c7eefa4fc54fff6a0f5f2fc47"
+  integrity sha512-j15cWLPzH0gOmRrUg01C09Peu8qbcdVqr6Bjyfxj80cNZmH+idk/bNBYEDSmkAtwkXI+xEYWSmHYqtaQhZ8iUQ==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    focus-lock "^0.6.7"
+    prop-types "^15.6.2"
+    react-clientside-effect "^1.2.2"
+    use-callback-ref "^1.2.1"
+    use-sidecar "^1.0.1"
+
+react-helmet-async@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.5.tgz#d2557bf274e32280a877ecb648b81740d8fb0bf1"
+  integrity sha512-nqGA5a1HRZsw1lzDn+bYuUN2FyHRiY+DgjRVhEOKVBDTrrqJCpCIOuY/IRHdobr+KD1gGTP0WabZsTrIHnFKJA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    invariant "^2.2.4"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.0.1"
+    shallowequal "^1.1.0"
+
+react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-popper-tooltip@^2.8.3:
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz#3c4bdfd8bc10d1c2b9a162e859bab8958f5b2644"
+  integrity sha512-04A2f24GhyyMicKvg/koIOQ5BzlrRbKiAgP6L+Pdj1MVX3yJ1NeZ8+EidndQsbejFT55oW1b++wg2Z8KlAyhfQ==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    react-popper "^1.3.7"
+
+react-popper@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
+  integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    create-react-context "^0.3.0"
+    deep-equal "^1.1.1"
+    popper.js "^1.14.4"
+    prop-types "^15.6.1"
+    typed-styles "^0.0.7"
+    warning "^4.0.2"
+
+react-syntax-highlighter@^11.0.2:
+  version "11.0.2"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-11.0.2.tgz#4e3f376e752b20d2f54e4c55652fd663149e4029"
+  integrity sha512-kqmpM2OH5OodInbEADKARwccwSQWBfZi0970l5Jhp4h39q9Q65C4frNcnd6uHE5pR00W8pOWj9HDRntj2G4Rww==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    highlight.js "~9.13.0"
+    lowlight "~1.11.0"
+    prismjs "^1.8.4"
+    refractor "^2.4.1"
+
+react-textarea-autosize@^7.1.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-7.1.2.tgz#70fdb333ef86bcca72717e25e623e90c336e2cda"
+  integrity sha512-uH3ORCsCa3C6LHxExExhF4jHoXYCQwE5oECmrRsunlspaDAbS4mGKNlWZqjLfInWtFQcf0o1n1jC/NGXFdUBCg==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    prop-types "^15.6.0"
+
+react@^16.8.3:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
+  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -12179,6 +13379,16 @@ realpath-native@^1.1.0:
   dependencies:
     util.promisify "^1.0.0"
 
+recast@^0.17.3:
+  version "0.17.6"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.17.6.tgz#64ae98d0d2dfb10ff92ff5fb9ffb7371823b69fa"
+  integrity sha512-yoQRMRrK1lszNtbkGyM4kN45AwylV5hMiuEveUBlxytUViWevjvX6w+tzJt1LH4cfUhWt4NZvy3ThIhu6+m5wQ==
+  dependencies:
+    ast-types "0.12.4"
+    esprima "~4.0.0"
+    private "^0.1.8"
+    source-map "~0.6.1"
+
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@@ -12209,6 +13419,15 @@ reduce@^1.0.1:
   dependencies:
     object-keys "^1.1.0"
 
+refractor@^2.4.1:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.1.tgz#166c32f114ed16fd96190ad21d5193d3afc7d34e"
+  integrity sha512-Xh9o7hQiQlDbxo5/XkOX6H+x/q8rmlmZKr97Ie1Q8ZM32IRRd3B/UxuA/yXDW79DBSXGWxm2yRTbcTVmAciJRw==
+  dependencies:
+    hastscript "^5.0.0"
+    parse-entities "^1.1.2"
+    prismjs "~1.17.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"
@@ -12221,7 +13440,12 @@ regenerate@^1.4.0:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
   integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
 
-regenerator-runtime@^0.13.4:
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
+regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
   version "0.13.5"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
   integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
@@ -12324,7 +13548,7 @@ repeat-element@^1.1.2:
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
   integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
 
-repeat-string@^1.6.1:
+repeat-string@^1.5.2, repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
@@ -12420,6 +13644,11 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -12497,6 +13726,13 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  integrity sha1-YTObci/mo1FWiSENJOFMlhSGE+8=
+  dependencies:
+    align-text "^0.1.1"
+
 rimraf@2, rimraf@^2.5.4, rimraf@^2.6.2, rimraf@^2.6.3, rimraf@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
@@ -12656,11 +13892,30 @@ sass-loader@^7.1.0:
     pify "^4.0.1"
     semver "^6.3.0"
 
+sass-loader@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
+  integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==
+  dependencies:
+    clone-deep "^4.0.1"
+    loader-utils "^1.2.3"
+    neo-async "^2.6.1"
+    schema-utils "^2.6.1"
+    semver "^6.3.0"
+
 sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+scheduler@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
+  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -12772,6 +14027,15 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
+sentence-case@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-3.0.3.tgz#47576e4adff7abf42c63c815b0543c9d2f85a930"
+  integrity sha512-ZPr4dgTcNkEfcGOMFQyDdJrTU9uQO1nb1cjf+nuzb6FxgMDgKddZOM29qEsB7jvsZSMruLRcL2KfM4ypKpa0LA==
+  dependencies:
+    no-case "^3.0.3"
+    tslib "^1.10.0"
+    upper-case-first "^2.0.1"
+
 serialize-javascript@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
@@ -12862,6 +14126,16 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+shallow-equal@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
+  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
+
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -12922,6 +14196,14 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+simplebar-react@^1.0.0-alpha.6:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-1.2.3.tgz#bd81fa9827628470e9470d06caef6ece15e1c882"
+  integrity sha512-1EOWJzFC7eqHUp1igD1/tb8GBv5aPQA5ZMvpeDnVkpNJ3jAuvmrL2kir3HuijlxhG7njvw9ssxjjBa89E5DrJg==
+  dependencies:
+    prop-types "^15.6.1"
+    simplebar "^4.2.3"
+
 simplebar-vue@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/simplebar-vue/-/simplebar-vue-1.4.0.tgz#d474d0ef6a3e0298d0f7d10ff710cd770ff63150"
@@ -12930,6 +14212,18 @@ simplebar-vue@^1.4.0:
     core-js "^3.0.1"
     simplebar "^5.1.0"
 
+simplebar@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-4.2.3.tgz#dac40aced299c17928329eab3d5e6e795fafc10c"
+  integrity sha512-9no0pK7/1y+8/oTF3sy/+kx0PjQ3uk4cYwld5F1CJGk2gx+prRyUq8GRfvcVLq5niYWSozZdX73a2wIr1o9l/g==
+  dependencies:
+    can-use-dom "^0.1.0"
+    core-js "^3.0.1"
+    lodash.debounce "^4.0.8"
+    lodash.memoize "^4.1.2"
+    lodash.throttle "^4.1.1"
+    resize-observer-polyfill "^1.5.1"
+
 simplebar@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-5.1.0.tgz#15437ace314ec888accd7d8f24ada672e9bb2717"
@@ -12991,6 +14285,14 @@ smoothscroll-polyfill@^0.4.3:
   resolved "https://registry.yarnpkg.com/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz#3a259131dc6930e6ca80003e1cb03b603b69abf8"
   integrity sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==
 
+snake-case@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.3.tgz#c598b822ab443fcbb145ae8a82c5e43526d5bbee"
+  integrity sha512-WM1sIXEO+rsAHBKjGf/6R1HBBcgbncKS08d2Aqec/mrDSpU80SiOU41hO7ny6DToHSyrlwTYzQBIK1FPSx4Y3Q==
+  dependencies:
+    dot-case "^3.0.3"
+    tslib "^1.10.0"
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -13112,7 +14414,7 @@ source-map@^0.4.2:
   dependencies:
     amdefine ">=0.0.4"
 
-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, source-map@~0.5.1:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -13127,6 +14429,11 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+space-separated-tokens@^1.0.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
+  integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
+
 spdx-correct@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
@@ -13289,6 +14596,27 @@ stealthy-require@^1.1.1:
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
   integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
 
+store2@^2.7.1:
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/store2/-/store2-2.11.1.tgz#118645f1b5e38d20604852362183955e360a5893"
+  integrity sha512-llZqXAXjG2E4FvWsZxFmBDfh6kqQuGFZm64TX23qW02Hf4dyElhDEbYx1IIVTEMKWrrDnDA9oqOjY8WHo2NgcA==
+
+storybook-addon-vue-info@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/storybook-addon-vue-info/-/storybook-addon-vue-info-1.4.2.tgz#c50f5bf798647d13cf13e9a050a84dd3668cac90"
+  integrity sha512-17AnVlWL9SqACoDixAixbGMIcqqljVqZAUPfYTgnPwKeOXzRAIesIrRUmTVfQkZhg1XstUUnpcfHSuZjpeR/Lw==
+  dependencies:
+    change-case "^4.1.0"
+    clone "^2.1.2"
+    dedent-tabs "^0.8.0"
+    highlight.js "^9.12.0"
+    loader-utils "^1.2.3"
+    marked "^0.7.0"
+    querystring "^0.2.0"
+    vue-docgen-api "^3.11.4"
+    vue-template-compiler "^2.5.16"
+    vuera "^0.2.3"
+
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
@@ -13661,6 +14989,20 @@ tar@^4.4.10, tar@^4.4.12, tar@^4.4.8:
     safe-buffer "^5.1.2"
     yallist "^3.0.3"
 
+telejson@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/telejson/-/telejson-3.3.0.tgz#6d814f3c0d254d5c4770085aad063e266b56ad03"
+  integrity sha512-er08AylQ+LEbDLp1GRezORZu5wKOHaBczF6oYJtgC3Idv10qZ8A3p6ffT+J5BzDKkV9MqBvu8HAKiIIOp6KJ2w==
+  dependencies:
+    "@types/is-function" "^1.0.0"
+    global "^4.4.0"
+    is-function "^1.0.1"
+    is-regex "^1.0.4"
+    is-symbol "^1.0.3"
+    isobject "^4.0.0"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+
 temp-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
@@ -13839,6 +15181,11 @@ to-factory@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-factory/-/to-factory-1.0.0.tgz#8738af8bd97120ad1d4047972ada5563bf9479b1"
   integrity sha1-hzivi9lxIK0dQEeXKtpVY7+UebE=
 
+to-fast-properties@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+  integrity sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -13886,6 +15233,11 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+token-stream@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/token-stream/-/token-stream-0.0.1.tgz#ceeefc717a76c4316f126d0b9dbaa55d7e7df01a"
+  integrity sha1-zu78cXp2xDFvEm0LnbqlXX598Bo=
+
 toml@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/toml/-/toml-3.0.0.tgz#342160f1af1904ec9d204d03a5d61222d762c5ee"
@@ -13938,6 +15290,11 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
+ts-dedent@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-1.1.1.tgz#68fad040d7dbd53a90f545b450702340e17d18f3"
+  integrity sha512-UGTRZu1evMw4uTPyYF66/KFd22XiU+jMaIuHrkIHQ2GivAXVlLV0v/vHrpOuTRf9BmpNHi/SO7Vd0rLu0y57jg==
+
 ts-invariant@^0.4.0:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.4.4.tgz#97a523518688f93aafad01b0e80eb803eb2abd86"
@@ -13987,6 +15344,11 @@ ts-loader@^6.2.1:
     micromatch "^4.0.0"
     semver "^6.0.0"
 
+ts-map@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/ts-map/-/ts-map-1.0.3.tgz#1c4d218dec813d2103b7e04e4bcf348e1471c1ff"
+  integrity sha512-vDWbsl26LIcPGmDpoVzjEP6+hvHZkBkLW7JpvwbCv/5IYPJlsbzCVXY3wsCeAxAUeTclNOUZxnLdGh3VBD/J6w==
+
 ts-node@^8.4.1:
   version "8.8.2"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-8.8.2.tgz#0b39e690bee39ea5111513a9d2bcdc0bc121755f"
@@ -14062,6 +15424,11 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+typed-styles@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
+  integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
+
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
@@ -14097,7 +15464,7 @@ typedoc@^0.17.1:
     shelljs "^0.8.3"
     typedoc-default-themes "^0.10.0"
 
-typescript@^3.6.4:
+typescript@^3.2.2, typescript@^3.6.4:
   version "3.8.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
   integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
@@ -14125,6 +15492,16 @@ uglify-js@3.4.x:
     commander "~2.19.0"
     source-map "~0.6.1"
 
+uglify-js@^2.6.1:
+  version "2.8.29"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  integrity sha1-KcVzMUgFe7Th913zW3qcty5qWd0=
+  dependencies:
+    source-map "~0.5.1"
+    yargs "~3.10.0"
+  optionalDependencies:
+    uglify-to-browserify "~1.0.0"
+
 uglify-js@^3.1.4, uglify-js@^3.5.1:
   version "3.8.1"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.8.1.tgz#43bb15ce6f545eaa0a64c49fd29375ea09fa0f93"
@@ -14133,6 +15510,11 @@ uglify-js@^3.1.4, uglify-js@^3.5.1:
     commander "~2.20.3"
     source-map "~0.6.1"
 
+uglify-to-browserify@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
+  integrity sha1-bgkk1r2mta/jSeOabWMoUKD4grc=
+
 uid-number@0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
@@ -14236,7 +15618,7 @@ unpipe@1.0.0, unpipe@~1.0.0:
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
 
-unquote@~1.1.1:
+unquote@^1.1.0, unquote@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
   integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
@@ -14273,11 +15655,25 @@ update-notifier@^4.0.0:
     semver-diff "^3.1.1"
     xdg-basedir "^4.0.0"
 
+upper-case-first@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-2.0.1.tgz#32ab436747d891cc20ab1e43d601cb4d0a7fbf4a"
+  integrity sha512-105J8XqQ+9RxW3l9gHZtgve5oaiR9TIwvmZAMAIZWRHe00T21cdvewKORTlOJf/zXW6VukuTshM+HXZNWz7N5w==
+  dependencies:
+    tslib "^1.10.0"
+
 upper-case@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
   integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
 
+upper-case@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-2.0.1.tgz#6214d05e235dc817822464ccbae85822b3d8665f"
+  integrity sha512-laAsbea9SY5osxrv7S99vH9xAaJKrw5Qpdh4ENRLcaxipjKsiaBwiAsxfa8X5mObKNTQPsupSq0J/VIxsSJe3A==
+  dependencies:
+    tslib "^1.10.0"
+
 uri-js@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
@@ -14331,12 +15727,25 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-callback-ref@^1.2.1:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.3.tgz#9f939dfb5740807bbf9dd79cdd4e99d27e827756"
+  integrity sha512-DPBPh1i2adCZoIArRlTuKRy7yue7QogtEnfv0AKrWsY+GA+4EKe37zhRDouNnyWMoNQFYZZRF+2dLHsWE4YvJA==
+
+use-sidecar@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.2.tgz#e72f582a75842f7de4ef8becd6235a4720ad8af6"
+  integrity sha512-287RZny6m5KNMTb/Kq9gmjafi7lQL0YHO1lYolU6+tY1h9+Z3uCtkJJ3OSOq3INwYf2hBryCcDh4520AhJibMA==
+  dependencies:
+    detect-node "^2.0.4"
+    tslib "^1.9.3"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -14454,11 +15863,32 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+void-elements@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
+
 vue-client-only@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.0.0.tgz#ddad8d675ee02c761a14229f0e440e219de1da1c"
   integrity sha512-arhk1wtWAfLsJyxGMoEYhoBowM87/i6HLSG2LH/03Yog6i2d9JEN1peMP0Ceis+/n9DxdenGYZZTxbPPJyHciA==
 
+vue-docgen-api@^3.11.4:
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-3.26.0.tgz#2afc6a39e72862fbbc60ceb8510c681749f05460"
+  integrity sha512-ujdg4i5ZI/wE46RZQMFzKnDGyhEuPCu+fMA86CAd9EIek/6+OqraSVBm5ZkLrbEd5f8xxdnqMU4yiSGHHeao/Q==
+  dependencies:
+    "@babel/parser" "^7.2.3"
+    "@babel/types" "^7.0.0"
+    ast-types "^0.12.2"
+    hash-sum "^1.0.2"
+    lru-cache "^4.1.5"
+    pug "^2.0.3"
+    recast "^0.17.3"
+    ts-map "^1.0.3"
+    typescript "^3.2.2"
+    vue-template-compiler "^2.0.0"
+
 vue-drag-drop@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/vue-drag-drop/-/vue-drag-drop-1.1.4.tgz#6e94aeb10304b91d651614b7307d0b90f0227e89"
@@ -14567,7 +15997,7 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.6.10, vue-template-compiler@^2.6.11, vue-template-compiler@^2.6.x:
+vue-template-compiler@^2.0.0, vue-template-compiler@^2.5.16, vue-template-compiler@^2.6.10, vue-template-compiler@^2.6.11, vue-template-compiler@^2.6.x:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
   integrity sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==
@@ -14580,7 +16010,7 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue2-leaflet@^2.1.1:
+vue2-leaflet@^2.1.1, vue2-leaflet@^2.5.2:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-2.5.2.tgz#b89c056fe741c7ce7cb9df5aca90809092e5eb8d"
   integrity sha512-9eN0TxqCkyXbaI7waO3u+n0OAezkxjb811tstG6gRLAZy/ocXlNLC3JqTWE0FwBUlqBbMpyzsIk6LrEhs8oVBQ==
@@ -14629,6 +16059,11 @@ vuepress@^1.2.0:
     opencollective-postinstall "^2.0.2"
     update-notifier "^4.0.0"
 
+vuera@^0.2.3:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/vuera/-/vuera-0.2.7.tgz#8046ac9a7ce961b1c81f84218b3be4eaaa7ba940"
+  integrity sha512-MZErNEK+xXjxBzIDFL9cdEtX3TDZk4pMJGB+WLrlFOVro9okS/FeOSpdPFkpdyZUImZN/or4CrmztA932ChGEQ==
+
 vuex@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.3.tgz#f2ad73e3fb73691698b38c93f66e58e267947180"
@@ -14648,6 +16083,13 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning@^4.0.2, warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^1.6.0:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"
@@ -14721,7 +16163,7 @@ webpack-dev-middleware@3.6.0:
     range-parser "^1.0.3"
     webpack-log "^2.0.0"
 
-webpack-dev-middleware@^3.7.2:
+webpack-dev-middleware@3.7.2, webpack-dev-middleware@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
   integrity sha512-1xC42LxbYoqLNAhV6YzTYacicgMZQTqRd27Sim9wn5hJrX3I5nxYy1SxSd4+gjUFsz1dQFj+yEe6zEVmSkeJjw==
@@ -14979,6 +16421,11 @@ widest-line@^3.1.0:
   dependencies:
     string-width "^4.0.0"
 
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+  integrity sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=
+
 windows-release@^3.1.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/windows-release/-/windows-release-3.3.0.tgz#dce167e9f8be733f21c849ebd4d03fe66b29b9f0"
@@ -14986,11 +16433,24 @@ windows-release@^3.1.0:
   dependencies:
     execa "^1.0.0"
 
+with@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/with/-/with-5.1.1.tgz#fa4daa92daf32c4ea94ed453c81f04686b575dfe"
+  integrity sha1-+k2qktrzLE6pTtRTyB8EaGtXXf4=
+  dependencies:
+    acorn "^3.1.0"
+    acorn-globals "^3.0.0"
+
 word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+  integrity sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=
+
 wordwrap@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
@@ -15292,6 +16752,16 @@ yargs@^7.0.0:
     y18n "^3.2.1"
     yargs-parser "^5.0.0"
 
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  integrity sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
+
 yarn@^1.22.0:
   version "1.22.4"
   resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.4.tgz#01c1197ca5b27f21edc8bc472cd4c8ce0e5a470e"

From 78e8cfab565ec42bb5b812822c1827c51466bfc4 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Fri, 24 Apr 2020 14:01:16 +0200
Subject: [PATCH 24/28] fix: small spacing and alingment fixes

---
 .../theme/components/checkout/OrderReview.vue  |  5 ++++-
 .../core/theme-module/theme/pages/Category.vue |  4 ++++
 .../core/theme-module/theme/pages/Checkout.vue |  5 ++++-
 .../theme/pages/Checkout/OrderReview.vue       |  9 +++++++--
 .../theme/pages/Checkout/Payment.vue           |  7 +++++--
 .../theme/pages/Checkout/PersonalDetails.vue   | 18 ++++++++++++------
 .../theme/pages/Checkout/Shipping.vue          |  5 ++++-
 7 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/packages/core/theme-module/theme/components/checkout/OrderReview.vue b/packages/core/theme-module/theme/components/checkout/OrderReview.vue
index 8242e3b3c..0853aec26 100644
--- a/packages/core/theme-module/theme/components/checkout/OrderReview.vue
+++ b/packages/core/theme-module/theme/components/checkout/OrderReview.vue
@@ -105,7 +105,10 @@ export default {
   }
 }
 .title {
-  margin-bottom: var(--spacer-2xl);
+  margin: var(--spacer-xl) 0 var(--spacer-base) 0;
+  @include for-desktop {
+    margin: var(--spacer-2xl) 0 var(--spacer-base) 0;
+  }
 }
 .content {
   margin: 0 0 var(--spacer-xl) 0;
diff --git a/packages/core/theme-module/theme/pages/Category.vue b/packages/core/theme-module/theme/pages/Category.vue
index ca8c6a2e1..1e3d05e67 100644
--- a/packages/core/theme-module/theme/pages/Category.vue
+++ b/packages/core/theme-module/theme/pages/Category.vue
@@ -615,6 +615,10 @@ export default {
   &__list {
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
+    @include for-desktop {
+      justify-content: flex-start;
+    }
   }
   &__product-card {
     --product-card-padding: var(--spacer);
diff --git a/packages/core/theme-module/theme/pages/Checkout.vue b/packages/core/theme-module/theme/pages/Checkout.vue
index 8e711bf7d..b6693f52e 100644
--- a/packages/core/theme-module/theme/pages/Checkout.vue
+++ b/packages/core/theme-module/theme/pages/Checkout.vue
@@ -108,7 +108,10 @@ export default {
     }
   }
   &__steps {
-    --steps-content-padding: 0;
+    --steps-content-padding: 0 var(--spacer-base);
+    @include for-desktop {
+      --steps-content-padding: 0;
+    }
   }
 }
 </style>
diff --git a/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue b/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
index 95219f5e2..9c6a1ca77 100644
--- a/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/OrderReview.vue
@@ -229,7 +229,10 @@ export default {
 @import "~@storefront-ui/vue/styles";
 
 .title {
-   margin: var(--spacer-2xl) 0 var(--spacer-base) 0;
+  margin: var(--spacer-xl) 0 var(--spacer-base) 0;
+  @include for-desktop {
+    margin: var(--spacer-2xl) 0 var(--spacer-base) 0;
+  }
 }
 .form {
   @include for-desktop {
@@ -343,8 +346,10 @@ export default {
     }
   }
   &__action {
-    display: flex;
+    @include for-desktop {
+      display: flex;
     margin: var(--spacer-2xl) 0 0 0;
+    }
   }
 
   &__action-button {
diff --git a/packages/core/theme-module/theme/pages/Checkout/Payment.vue b/packages/core/theme-module/theme/pages/Checkout/Payment.vue
index f28d76209..5c5617549 100644
--- a/packages/core/theme-module/theme/pages/Checkout/Payment.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/Payment.vue
@@ -187,7 +187,10 @@ export default {
 <style lang="scss" scoped>
 @import "~@storefront-ui/vue/styles";
 .title {
-  margin: var(--spacer-2xl) 0 var(--spacer-base) 0;
+  margin: var(--spacer-xl) 0 var(--spacer-base) 0;
+  @include for-desktop {
+    margin: var(--spacer-2xl) 0 var(--spacer-base) 0;
+  }
 }
 .form {
   @include for-desktop {
@@ -254,7 +257,7 @@ export default {
 }
 .payment-method {
   --radio-container-align-items: center;
-  --ratio-content-margin: 0 0 0 var(--spacer);
+  --ratio-content-margin: 0 0 0 var(--spacer-base);
   --radio-label-font-size: var(--font-base);
   white-space: nowrap;
   border: 1px solid var(--c-light);
diff --git a/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue b/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue
index 3205350bf..07f864f71 100644
--- a/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/PersonalDetails.vue
@@ -123,7 +123,10 @@ export default {
 <style lang="scss" scoped>
 @import "~@storefront-ui/vue/styles";
 .title {
-  margin: 0 0 var(--spacer-xl) 0;
+ margin: var(--spacer-xl) 0 var(--spacer-base) 0;
+  @include for-desktop {
+    margin: var(--spacer-2xl) 0 var(--spacer-base) 0;
+  }
 }
 .log-in {
   &__info {
@@ -188,16 +191,19 @@ export default {
     margin: var(--spacer-xl) 0 var(--spacer-lg) 0;
   }
   &__action {
+    display: flex;
+    flex-direction: column-reverse;
+    margin: 0 0 var(--spacer-sm) 0;
     @include for-desktop {
       flex: 0 0 100%;
-      display: flex;
+      flex-direction: row;
+      margin: 0;
     }
   }
   &__action-button {
-    &--secondary {
-      @include for-desktop {
-        text-align: right;
-      }
+    margin: 0 0 var(--spacer-sm) 0;
+    @include for-desktop {
+      margin: 0;
     }
   }
   &__back-button {
diff --git a/packages/core/theme-module/theme/pages/Checkout/Shipping.vue b/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
index 122897353..e3c76aae0 100644
--- a/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
+++ b/packages/core/theme-module/theme/pages/Checkout/Shipping.vue
@@ -176,7 +176,10 @@ export default {
 <style lang="scss" scoped>
 @import "~@storefront-ui/vue/styles";
 .title {
-  margin: var(--spacer-2xl) 0 var(--spacer-base) 0;
+  margin: var(--spacer-xl) 0 var(--spacer-base) 0;
+  @include for-desktop {
+    margin: var(--spacer-2xl) 0 var(--spacer-base) 0;
+  }
 }
 .form {
   @include for-desktop {

From eb413c3fc1a94ff28646f4a7f50287672a9f5a99 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Fri, 24 Apr 2020 14:39:36 +0200
Subject: [PATCH 25/28] refactor: refactored filters on mobile

---
 .../theme-module/theme/pages/Category.vue     | 60 ++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

diff --git a/packages/core/theme-module/theme/pages/Category.vue b/packages/core/theme-module/theme/pages/Category.vue
index 1e3d05e67..8dd8cf0fb 100644
--- a/packages/core/theme-module/theme/pages/Category.vue
+++ b/packages/core/theme-module/theme/pages/Category.vue
@@ -208,7 +208,7 @@
       title="Filters"
       @close="isFilterSidebarOpen = false"
     >
-      <div class="filters">
+      <div class="filters desktop-only">
         <SfHeading
           :level="4"
           title="Collection"
@@ -280,6 +280,7 @@
           class="filters__item"
           @change="filter.selected = !filter.selected"
         />
+
         <div class="filters__buttons">
           <SfButton
             @click="isFilterSidebarOpen = false"
@@ -293,6 +294,63 @@
           >
         </div>
       </div>
+       <SfAccordion class="filters mobile-only">
+        <SfAccordionItem header="Collection" class="filters__accordion-item">
+          <SfFilter
+            v-for="filter in filters.collection"
+            :key="filter.value"
+            :label="filter.label"
+            :count="filter.count"
+            :selected="filter.selected"
+            class="filters__item"
+            @change="filter.selected = !filter.selected"
+          />
+        </SfAccordionItem>
+        <SfAccordionItem header="Color" class="filters__accordion-item">
+          <SfFilter
+            v-for="filter in filters.color"
+            :key="filter.value"
+            :label="filter.label"
+            :color="filter.color"
+            :selected="filter.selected"
+            class="filters__item"
+            @change="filter.selected = !filter.selected"
+          />
+        </SfAccordionItem>
+        <SfAccordionItem header="Size" class="filters__accordion-item">
+          <SfFilter
+            v-for="filter in filters.size"
+            :key="filter.value"
+            :label="filter.label"
+            :count="filter.count"
+            :selected="filter.selected"
+            class="filters__item"
+            @change="filter.selected = !filter.selected"
+          />
+        </SfAccordionItem>
+        <SfAccordionItem header="Price" class="filters__accordion-item">
+          <SfFilter
+            v-for="filter in filters.price"
+            :key="filter.value"
+            :label="filter.label"
+            :count="filter.count"
+            :selected="filter.selected"
+            class="filters__item"
+            @change="filter.selected = !filter.selected"
+          />
+        </SfAccordionItem>
+        <SfAccordionItem header="Material" class="filters__accordion-item">
+          <SfFilter
+            v-for="filter in filters.material"
+            :key="filter.value"
+            :value="filter.value"
+            :label="filter.label"
+            :selected="filter.selected"
+            class="filters__item"
+            @change="filter.selected = !filter.selected"
+          />
+        </SfAccordionItem>
+      </SfAccordion>
     </SfSidebar>
   </div>
 </template>

From c521e4036368c5786a55763692e8a4d42a75c087 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Fri, 24 Apr 2020 15:03:47 +0200
Subject: [PATCH 26/28] fix: spacer adjustments

---
 packages/core/theme-module/theme/components/LoginModal.vue   | 5 ++---
 .../theme-module/theme/components/checkout/OrderReview.vue   | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/core/theme-module/theme/components/LoginModal.vue b/packages/core/theme-module/theme/components/LoginModal.vue
index 1451043dd..e32c69776 100644
--- a/packages/core/theme-module/theme/components/LoginModal.vue
+++ b/packages/core/theme-module/theme/components/LoginModal.vue
@@ -208,7 +208,7 @@ export default {
   align-items: center;
   justify-content: center;
   margin: var(--spacer-xl) 0 var(--spacer-xl) 0;
-  font: 300 var(--font-base) / 1.6 var(--font-family-secondary);
+  font: var(--font-light) var(--font-base) / 1.6 var(--font-family-secondary);
   & > * {
     margin: 0 0 0 var(--spacer-xs);
   }
@@ -217,8 +217,7 @@ export default {
   margin: var(--spacer-xl) 0 var(--spacer-xl) 0;
 }
 .bottom {
-  padding: var(--spacer-2xl) 0 0 0;
-  margin: var(--spacer-2xl) 0 0 0;
+  padding: var(--spacer-xl) 0 0 0;
   border: 1px solid var(--c-light);
   border-width: 1px 0 0 0;
 }
diff --git a/packages/core/theme-module/theme/components/checkout/OrderReview.vue b/packages/core/theme-module/theme/components/checkout/OrderReview.vue
index 0853aec26..cb9fd6e9f 100644
--- a/packages/core/theme-module/theme/components/checkout/OrderReview.vue
+++ b/packages/core/theme-module/theme/components/checkout/OrderReview.vue
@@ -114,7 +114,7 @@ export default {
   margin: 0 0 var(--spacer-xl) 0;
   color: var(--c-text);
   font-size: var(--font-xs-desktop);
-  font-weight: 300;
+  font-weight: var(--font-light);
   line-height: 1.6;
   &:last-child {
     margin: 0;

From 0817e39268aa1a78e7204e507204ab428720cbf1 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Fri, 24 Apr 2020 15:12:51 +0200
Subject: [PATCH 27/28] fix: self cr fix

---
 packages/core/theme-module/theme/components/CartSidebar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/theme-module/theme/components/CartSidebar.vue b/packages/core/theme-module/theme/components/CartSidebar.vue
index 5aeab9ee8..65a171962 100644
--- a/packages/core/theme-module/theme/components/CartSidebar.vue
+++ b/packages/core/theme-module/theme/components/CartSidebar.vue
@@ -167,11 +167,11 @@ export default {
   }
   &__label {
     margin: var(--spacer-2xl) 0 0 0;
-    font: 400 var(--font-lg) / 1.6 var(--font-family-secondary);
+    font: var(--font-normal) var(--font-lg) / 1.6 var(--font-family-secondary);
   }
   &__description {
     margin: var(--spacer-xl) 0 0 0;
-    font: 300 var(--font-base) / 1.6 var(--font-family-primary);
+    font: var(--font-light) var(--font-base) / 1.6 var(--font-family-primary);
   }
   &__icon {
     width: 18.125rem;

From 2d4021172df297e3192c49df99896b1557737405 Mon Sep 17 00:00:00 2001
From: Ania <ania.musial13@gmail.com>
Date: Fri, 24 Apr 2020 15:17:24 +0200
Subject: [PATCH 28/28] fix: heading level

---
 packages/core/theme-module/theme/pages/Product.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/theme-module/theme/pages/Product.vue b/packages/core/theme-module/theme/pages/Product.vue
index b1ca00fd4..1026aff1e 100644
--- a/packages/core/theme-module/theme/pages/Product.vue
+++ b/packages/core/theme-module/theme/pages/Product.vue
@@ -33,7 +33,7 @@
         <SfSticky class="product-details">
           <SfHeading
             :title="productGetters.getName(product)"
-            :level="3"
+            :level="1"
             class="sf-heading--no-underline sf-heading--left product-details__heading"
           />
           <div class="product-details__sub">