ProductCard

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+.next
+public

assets/font.css

@@ -1,99 +1,99 @@
 /* latin */
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 100;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 200;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 300;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 800;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 900;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
@@ -104,525 +104,525 @@ in most cases, they are not downloaded at all */
 
 /* latin-ext */
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 100;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
     U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 200;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
     U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 300;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
     U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
     U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
     U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
     U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
     U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 800;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
     U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
     U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 /* cyrillic */
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 100;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 200;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 300;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 800;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
 /* cyrillic-ext */
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: swap;
   font-weight: 100;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: swap;
   font-weight: 200;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: swap;
   font-weight: 300;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: swap;
   font-weight: 400;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: swap;
   font-weight: 500;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: swap;
   font-weight: 600;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: swap;
   font-weight: 700;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: swap;
   font-weight: 800;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: swap;
   font-weight: 900;
   font-display: block;
   src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
 }
 
 /* greek */
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 100;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0370-03FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 200;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0370-03FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 300;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0370-03FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0370-03FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0370-03FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0370-03FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0370-03FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 800;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0370-03FF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0370-03FF;
 }
 
 /* greek-ext */
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 100;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+1F00-1FFF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 200;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+1F00-1FFF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 300;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+1F00-1FFF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+1F00-1FFF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+1F00-1FFF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+1F00-1FFF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+1F00-1FFF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 800;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+1F00-1FFF;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+1F00-1FFF;
 }
 
 /* vietnamese */
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 100;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
     U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 200;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
     U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 300;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
     U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
     U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
     U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
     U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
     U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 800;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
     U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 @font-face {
-  font-family: "Inter";
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
   src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2)
-    format("woff2");
+    format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
     U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }

assets/global.css

@@ -1,4 +1,4 @@
-@import "./font.css";
+@import './font.css';
 @tailwind base;
 @tailwind components;
 
@@ -61,8 +61,8 @@
   --geist-marketing-radius: 8px;
 
   /* Fonts */
-  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   --font-mono: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
     Bitstream Vera Sans Mono, Courier New, monospace;
@@ -164,7 +164,7 @@ html {
   height: 100%;
   box-sizing: border-box;
   touch-action: manipulation;
-  font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
+  font-feature-settings: 'case' 1, 'rlig' 1, 'calt' 0;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

codegen.json

@@ -8,7 +8,7 @@
   },
   "documents": [
     {
-      "./lib/bigcommerce/api/operations/**/*.ts": {
+      "./lib/bigcommerce/api/{operations,fragments}/**/*.ts": {
         "noRequire": true
       }
     }
@@ -20,5 +20,8 @@
     "./lib/bigcommerce/schema.graphql": {
       "plugins": ["schema-ast"]
     }
+  },
+  "hooks": {
+    "afterAllFileWrite": ["prettier --write"]
   }
 }

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -1,11 +1,11 @@
-import React, { FunctionComponent } from "react";
+import { FC } from 'react'
-import { UserNav } from "@components/core";
+import { UserNav } from '@components/core'
-import { Button } from "@components/ui";
+import { Button } from '@components/ui'
-import { Trash, Cross } from "@components/icon";
+import { Trash, Cross } from '@components/icon'
-import { useUI } from "@components/ui/context";
+import { useUI } from '@components/ui/context'
 
-const CartSidebarView: FunctionComponent = () => {
+const CartSidebarView: FC = () => {
-  const { closeSidebar } = useUI();
+  const { closeSidebar } = useUI()
   return (
     <>
       <header className="px-4 py-6 sm:px-6 border-b border-gray-200">
@@ -57,7 +57,7 @@ const CartSidebarView: FunctionComponent = () => {
         <Button>Proceed to Checkout</Button>
       </div>
     </>
-  );
+  )
-};
+}
 
-export default CartSidebarView;
+export default CartSidebarView

components/cart/CartSidebarView/index.ts

@@ -1 +1 @@
-export { default } from "./CartSidebarView";
+export { default } from './CartSidebarView'

components/cart/index.ts

@@ -1 +1 @@
-export { default as CartSidebarView } from "./CartSidebarView";
+export { default as CartSidebarView } from './CartSidebarView'

components/core/Avatar/Avatar.tsx

@@ -1,14 +1,14 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import { FC } from 'react'
-import s from "./Avatar.module.css";
+import s from './Avatar.module.css'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
 }
 
-const Avatar: FunctionComponent<Props> = ({ className }) => {
+const Avatar: FC<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
       <img
@@ -17,7 +17,7 @@ const Avatar: FunctionComponent<Props> = ({ className }) => {
         alt=""
       ></img>
     </div>
-  );
+  )
-};
+}
 
-export default Avatar;
+export default Avatar

components/core/Avatar/index.ts

@@ -1 +1 @@
-export { default } from "./Avatar";
+export { default } from './Avatar'

components/core/Featurebar/Featurebar.module.css

@@ -13,7 +13,7 @@
 }
 
 .separator:before {
-  content: "";
+  content: '';
 }
 
 .description {

components/core/Featurebar/Featurebar.tsx

@@ -1,26 +1,22 @@
-import cn from "classnames";
+import cn from 'classnames'
-import { FunctionComponent } from "react";
+import { FC } from 'react'
-import s from "./Featurebar.module.css";
+import s from './Featurebar.module.css'
 
 interface Props {
-  className?: string;
+  className?: string
-  title: string;
+  title: string
-  description: string;
+  description: string
 }
 
-const Featurebar: FunctionComponent<Props> = ({
+const Featurebar: FC<Props> = ({ title, description, className }) => {
-  title,
+  const rootClassName = cn(s.root, className)
-  description,
-  className,
-}) => {
-  const rootClassName = cn(s.root, className);
   return (
     <div className={rootClassName}>
       <span className={s.title}>{title}</span>
       <span className={s.separator} />
       <span className={s.description}>{description}</span>
     </div>
-  );
+  )
-};
+}
 
-export default Featurebar;
+export default Featurebar

components/core/Featurebar/index.ts

@@ -1 +1 @@
-export { default } from "./Featurebar";
+export { default } from './Featurebar'

components/core/Footer/Footer.tsx

@@ -1,20 +1,20 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import { FC } from 'react'
-import s from "./Footer.module.css";
+import s from './Footer.module.css'
-import { Container } from "@components/ui";
+import { Container } from '@components/ui'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
 }
 
-const Footer: FunctionComponent<Props> = ({ className }) => {
+const Footer: FC<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <footer className={rootClassName}>
       <Container className={s.container}></Container>
     </footer>
-  );
+  )
-};
+}
 
-export default Footer;
+export default Footer

components/core/Footer/index.ts

@@ -1 +1 @@
-export { default } from "./Footer";
+export { default } from './Footer'

components/core/Layout/Layout.tsx

@@ -1,19 +1,20 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import { FC } from 'react'
-import s from "./Layout.module.css";
+import s from './Layout.module.css'
-import { Navbar, Featurebar } from "@components/core";
+import { Navbar, Featurebar } from '@components/core'
-import { Container, Sidebar } from "@components/ui";
+import { Container, Sidebar } from '@components/ui'
-import { CartSidebarView } from "@components/cart";
+import { CartSidebarView } from '@components/cart'
-import { useUI } from "@components/ui/context";
+import { UIProvider, useUI } from '@components/ui/context'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
 }
 
-const Layout: FunctionComponent<Props> = ({ className, children }) => {
+const CoreLayout: FC<Props> = ({ className, children }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
-  const { displaySidebar } = useUI();
+  const { displaySidebar } = useUI()
+
   return (
     <div className={rootClassName}>
       <Featurebar
@@ -30,7 +31,13 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
         </Sidebar>
       )}
     </div>
-  );
+  )
-};
+}
 
-export default Layout;
+const Layout: FC<Props> = (props) => (
+  <UIProvider>
+    <CoreLayout {...props} />
+  </UIProvider>
+)
+
+export default Layout

components/core/Layout/index.ts

@@ -1 +1 @@
-export { default } from "./Layout";
+export { default } from './Layout'

components/core/Navbar/Navbar.tsx

@@ -1,15 +1,15 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import { FC } from 'react'
-import s from "./Navbar.module.css";
+import s from './Navbar.module.css'
-import { Logo, Container } from "@components/ui";
+import { Logo, Container } from '@components/ui'
-import { Searchbar } from "@components/core";
+import { Searchbar } from '@components/core'
-import { UserNav } from "@components/core";
+import { UserNav } from '@components/core'
 interface Props {
-  className?: string;
+  className?: string
 }
 
-const Navbar: FunctionComponent<Props> = ({ className }) => {
+const Navbar: FC<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <Container className={rootClassName}>
       <Logo />
@@ -23,7 +23,7 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
       </div>
       <UserNav />
     </Container>
-  );
+  )
-};
+}
 
-export default Navbar;
+export default Navbar

components/core/Navbar/index.ts

@@ -1 +1 @@
-export { default } from "./Navbar";
+export { default } from './Navbar'

components/core/Searchbar/Searchbar.tsx

@@ -1,14 +1,14 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import { FC } from 'react'
-import s from "./Searchbar.module.css";
+import s from './Searchbar.module.css'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
 }
 
-const Searchbar: FunctionComponent<Props> = ({ className }) => {
+const Searchbar: FC<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
       <div className="flex-1 flex justify-between px-2">
@@ -26,7 +26,7 @@ const Searchbar: FunctionComponent<Props> = ({ className }) => {
         </div>
       </div>
     </div>
-  );
+  )
-};
+}
 
-export default Searchbar;
+export default Searchbar

components/core/Searchbar/index.ts

@@ -1 +1 @@
-export { default } from "./Searchbar";
+export { default } from './Searchbar'

components/core/UserNav/UserNav.tsx

@@ -1,17 +1,17 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import { FC } from 'react'
-import s from "./UserNav.module.css";
+import s from './UserNav.module.css'
-import { Avatar } from "@components/core";
+import { Avatar } from '@components/core'
-import { Heart, Bag } from "@components/icon";
+import { Heart, Bag } from '@components/icon'
-import { useUI } from "@components/ui/context";
+import { useUI } from '@components/ui/context'
 
 interface Props {
-  className?: string;
+  className?: string
 }
 
-const UserNav: FunctionComponent<Props> = ({ className }) => {
+const UserNav: FC<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
-  const { openSidebar } = useUI();
+  const { openSidebar } = useUI()
 
   return (
     <nav className={rootClassName}>
@@ -30,7 +30,7 @@ const UserNav: FunctionComponent<Props> = ({ className }) => {
         </li>
       </ul>
     </nav>
-  );
+  )
-};
+}
 
-export default UserNav;
+export default UserNav

components/core/UserNav/index.ts

@@ -1 +1 @@
-export { default } from "./UserNav";
+export { default } from './UserNav'

components/core/index.ts

@@ -1,7 +1,7 @@
-export { default as Avatar } from "./Avatar";
+export { default as Avatar } from './Avatar'
-export { default as Featurebar } from "./Featurebar";
+export { default as Featurebar } from './Featurebar'
-export { default as Footer } from "./Footer";
+export { default as Footer } from './Footer'
-export { default as Layout } from "./Layout";
+export { default as Layout } from './Layout'
-export { default as Navbar } from "./Navbar";
+export { default as Navbar } from './Navbar'
-export { default as Searchbar } from "./Searchbar";
+export { default as Searchbar } from './Searchbar'
-export { default as UserNav } from "./UserNav";
+export { default as UserNav } from './UserNav'

components/icon/Bag.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const Bag = ({ ...props }) => {
   return (
     <svg
@@ -32,7 +30,7 @@ const Bag = ({ ...props }) => {
         strokeLinejoin="round"
       />
     </svg>
-  );
+  )
-};
+}
 
-export default Bag;
+export default Bag

components/icon/Cross.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const Cross = ({ ...props }) => {
   return (
     <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
@@ -10,7 +8,7 @@ const Cross = ({ ...props }) => {
         d="M6 18L18 6M6 6l12 12"
       />
     </svg>
-  );
+  )
-};
+}
 
-export default Cross;
+export default Cross

components/icon/Heart.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const Heart = ({ ...props }) => {
   return (
     <svg
@@ -18,7 +16,7 @@ const Heart = ({ ...props }) => {
         strokeLinejoin="round"
       />
     </svg>
-  );
+  )
-};
+}
 
-export default Heart;
+export default Heart

components/icon/Trash.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const Trash = ({ ...props }) => {
   return (
     <svg
@@ -39,7 +37,7 @@ const Trash = ({ ...props }) => {
         strokeLinejoin="round"
       />
     </svg>
-  );
+  )
-};
+}
 
-export default Trash;
+export default Trash

components/icon/index.ts

@@ -1,4 +1,4 @@
-export { default as Bag } from "./Bag";
+export { default as Bag } from './Bag'
-export { default as Heart } from "./Heart";
+export { default as Heart } from './Heart'
-export { default as Trash } from "./Trash";
+export { default as Trash } from './Trash'
-export { default as Cross } from "./Cross";
+export { default as Cross } from './Cross'

components/product/ProductCard/ProductCard.module.css

@@ -1,3 +1,3 @@
 .root {
-  @apply w-full h-full flex flex-row px-2;
+  @apply relative w-full h-full flex flex-row p-6 box-border justify-between;
 }

components/product/ProductCard/ProductCard.tsx

@@ -1,32 +1,29 @@
-import cn from "classnames";
+import cn from 'classnames'
-import s from "./ProductCard.module.css";
+import s from './ProductCard.module.css'
-import React, { FunctionComponent } from "react";
+import { FC } from 'react'
-import { Heart } from "@components/icon";
+import { Heart } from '@components/icon'
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
 }
 
-const ProductCard: FunctionComponent<Props> = ({ className }) => {
+const ProductCard: FC<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
-      <div className="absolute">
+      <div className="">
-        <h1 className="px-8 py-2 bg-white text-black font-bold text-3xl">
+        <h1 className="px-8 py-2 bg-white text-black font-bold text-2xl">
           T-Shirt
         </h1>
-        <div className="px-6 py-2 pb-4 bg-white text-black font-semibold inline-block">
+        <div className="px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6">
           $50
         </div>
       </div>
-      <div className="absolute flex items-center justify-center h-12 w-12 bg-white text-black">
+      <div className="flex items-center justify-center h-12 w-12 bg-white text-black cursor-pointer">
         <Heart />
       </div>
-      <div className="flex-1 h-full p-24">
-        <div className="bg-violet h-full"></div>
     </div>
-    </div>
+  )
-  );
+}
-};
 
-export default ProductCard;
+export default ProductCard

components/product/ProductCard/index.ts

@@ -1 +1 @@
-export { default } from "./ProductCard";
+export { default } from './ProductCard'

components/product/ProductGrid/ProductGrid.module.css

@@ -2,7 +2,28 @@
   @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-4 w-full h-96;
   min-height: calc((100vh - 80px - 56px) * 2);
 
-  & div:nth-child(1) {
+  & > * {
-    @apply row-span-2 lg:col-span-2 bg-red-200 h-full;
+    @apply row-span-1 lg:col-span-1 h-full bg-black;
+  }
+
+  & > div:nth-child(1),
+  & > div:nth-child(5) {
+    @apply row-span-2 lg:col-span-2 h-full;
+  }
+
+  & > div:nth-child(1) {
+    @apply bg-violet;
+  }
+
+  & > div:nth-child(3) {
+    @apply bg-pink;
+  }
+
+  & > div:nth-child(5) {
+    @apply bg-blue;
+  }
+
+  & > div:nth-child(6) {
+    @apply bg-cyan;
   }
 }

components/product/ProductGrid/ProductGrid.tsx

@@ -1,25 +1,22 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import { FC } from 'react'
-import s from "./ProductGrid.module.css";
+import s from './ProductGrid.module.css'
-import ProductCard from "@components/ProductCard";
+import ProductCard from '@components/product/ProductCard'
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
-  products: [any];
+  products: [any]
 }
 
-const ProductView: FunctionComponent<Props> = ({ products, className }) => {
+const ProductView: FC<Props> = ({ products, className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
-      <div></div>
+      {products.slice(0, 6).map((p) => (
-      <div className="row-span-1 lg:col-span-1 bg-black h-full"></div>
+        <ProductCard {...p} />
-      <div className="row-span-1 lg:col-span-1 bg-pink"></div>
+      ))}
-      <div className="row-span-1 lg:col-span-1 bg-black h-full"></div>
-      <div className="row-span-2 lg:col-span-2 bg-blue h-full"></div>
-      <div className="row-span-1 lg:col-span-1 bg-cyan"></div>
     </div>
-  );
+  )
-};
+}
 
-export default ProductView;
+export default ProductView

components/product/ProductGrid/index.ts

@@ -1 +1 @@
-export { default } from "./ProductGrid";
+export { default } from './ProductGrid'

components/product/ProductView/ProductView.tsx

@@ -1,18 +1,18 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import { FC } from 'react'
-import s from "./ProductView.module.css";
+import s from './ProductView.module.css'
-import { Button } from "@components/ui";
+import { Button } from '@components/ui'
-import { Swatch } from "@components/product";
+import { Swatch } from '@components/product'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
-  productData: ProductData;
+  productData: ProductData
 }
 
-const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
+const ProductView: FC<Props> = ({ productData, className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
-  console.log(productData);
+  console.log(productData)
   return (
     <div className={rootClassName}>
       <div className="absolute">
@@ -53,7 +53,7 @@ const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
         </section>
       </div>
     </div>
-  );
+  )
-};
+}
 
-export default ProductView;
+export default ProductView

components/product/ProductView/index.ts

@@ -1 +1 @@
-export { default } from "./ProductView";
+export { default } from './ProductView'

components/product/Swatch/Swatch.tsx

@@ -1,35 +1,30 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import { FC } from 'react'
-import s from "./Swatch.module.css";
+import s from './Swatch.module.css'
-import { Colors } from "@components/ui/types";
+import { Colors } from '@components/ui/types'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
-  active?: boolean;
+  active?: boolean
-  color?: Colors;
+  color?: Colors
-  size?: string;
+  size?: string
 }
 
-const Swatch: FunctionComponent<Props> = ({
+const Swatch: FC<Props> = ({ className, size, color, active }) => {
-  className,
-  size,
-  color,
-  active,
-}) => {
   const rootClassName = cn(
     s.root,
     {
       [s.active]: active,
       [s.size]: size,
-      [s.colorPink]: color === "pink",
+      [s.colorPink]: color === 'pink',
-      [s.colorWhite]: color === "white",
+      [s.colorWhite]: color === 'white',
-      [s.colorBlack]: color === "black",
+      [s.colorBlack]: color === 'black',
-      [s.colorViolet]: color === "violet",
+      [s.colorViolet]: color === 'violet',
     },
     className
-  );
+  )
-  return <span className={rootClassName}>{size ? size : null}</span>;
+  return <span className={rootClassName}>{size ? size : null}</span>
-};
+}
 
-export default Swatch;
+export default Swatch

components/product/Swatch/index.ts

@@ -1 +1 @@
-export { default } from "./Swatch";
+export { default } from './Swatch'

components/product/index.ts

@@ -1,4 +1,4 @@
-export { default as Swatch } from "./Swatch";
+export { default as Swatch } from './Swatch'
-export { default as ProductView } from "./ProductView";
+export { default as ProductView } from './ProductView'
-export { default as ProductCard } from "./ProductCard";
+export { default as ProductCard } from './ProductCard'
-export { default as ProductGrid } from "./ProductGrid";
+export { default as ProductGrid } from './ProductGrid'

components/product/types.ts

@@ -1,5 +1,5 @@
-import { Colors } from "@components/ui/types";
+import { Colors } from '@components/ui/types'
-export { Product } from "@lib/bigcommerce";
+export { Product } from '@lib/bigcommerce'
 
 // export type ProductData = {
 //   title: string;

components/ui/Button/Button.tsx

@@ -1,43 +1,43 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { ButtonHTMLAttributes } from "react";
+import React, { ButtonHTMLAttributes } from 'react'
-import s from "./Button.module.css";
+import s from './Button.module.css'
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  href?: string;
+  href?: string
-  className?: string;
+  className?: string
-  variant?: "filled" | "outlined" | "flat" | "none";
+  variant?: 'filled' | 'outlined' | 'flat' | 'none'
-  active?: boolean;
+  active?: boolean
-  type?: "submit" | "reset" | "button";
+  type?: 'submit' | 'reset' | 'button'
 }
 
 export default class Button extends React.Component<Props> {
   public render() {
     const {
       className,
-      variant = "filled",
+      variant = 'filled',
       children,
       disabled = false,
       href,
       active,
       ...rest
-    } = this.props;
+    } = this.props
 
     let Component: React.ComponentType<
       React.AnchorHTMLAttributes<
         HTMLAnchorElement | HTMLButtonElement | HTMLDivElement
       > &
         React.ClassAttributes<HTMLButtonElement | HTMLAnchorElement>
-    > = "a" as any;
+    > = 'a' as any
 
     // Catch for buttons / span / stc.
 
     const rootClassName = cn(
       s.root,
       {
-        [s.filled]: variant === "filled",
+        [s.filled]: variant === 'filled',
       },
       className
-    );
+    )
 
     return (
       <Component
@@ -49,6 +49,6 @@ export default class Button extends React.Component<Props> {
       >
         {children}
       </Component>
-    );
+    )
   }
 }

components/ui/Button/index.ts

@@ -1 +1 @@
-export { default } from "./Button";
+export { default } from './Button'

components/ui/ClickOutside/ClickOutside.tsx

@@ -1,49 +1,44 @@
-import React, {
+import React, { FC, MutableRefObject, useEffect, useRef } from 'react'
-  FunctionComponent,
-  MutableRefObject,
-  useEffect,
-  useRef,
-} from "react";
 
-import { Component } from "react";
+import { Component } from 'react'
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types'
 
 export interface ClickOutsideProps {
-  onClickOutside: (e?: MouseEvent) => void;
+  onClickOutside: (e?: MouseEvent) => void
-  children: React.ReactNode | any;
+  children: React.ReactNode | any
-  render: () => void;
+  render: () => void
 }
 
 export default class ClickOutside extends Component<ClickOutsideProps> {
-  public domNode: Element | null = null;
+  public domNode: Element | null = null
 
   handleRef = (element) => {
-    this.domNode = element;
+    this.domNode = element
-  };
+  }
 
   public componentDidMount() {
-    document.addEventListener("click", this.handleClick, true);
+    document.addEventListener('click', this.handleClick, true)
   }
 
   public componentWillUnmount() {
-    document.removeEventListener("mousedown", this.handleClick, true);
+    document.removeEventListener('mousedown', this.handleClick, true)
-    document.removeEventListener("touchstart", this.handleClick, true);
+    document.removeEventListener('touchstart', this.handleClick, true)
   }
 
   public handleClick = (event) => {
     function hasParent(element, root) {
-      return root && root.contains(element);
+      return root && root.contains(element)
     }
 
     if (!hasParent(event.target, this.domNode)) {
-      if (typeof this.props.onClickOutside === "function") {
+      if (typeof this.props.onClickOutside === 'function') {
-        this.props.onClickOutside(event);
+        this.props.onClickOutside(event)
+      }
     }
   }
-  };
 
   render() {
-    return null;
+    return null
     // return this.props.render({
     //   innerRef: this.handleRef,
     // });

components/ui/ClickOutside/index.ts

@@ -1 +1 @@
-export { default } from "./ClickOutside";
+export { default } from './ClickOutside'

components/ui/Container/Container.tsx

@@ -1,25 +1,21 @@
-import cn from "classnames";
+import cn from 'classnames'
-import { FunctionComponent } from "react";
+import React, { FC } from 'react'
-import s from "./Container.module.css";
+import s from './Container.module.css'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
-  el?: HTMLElement;
+  el?: HTMLElement
 }
 
-const Container: FunctionComponent<Props> = ({
+const Container: FC<Props> = ({ children, className, el = 'div' }) => {
-  children,
+  const rootClassName = cn(s.root, className)
-  className,
-  el = "div",
-}) => {
-  const rootClassName = cn(s.root, className);
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement
-  >> = el as any;
+  >> = el as any
 
-  return <Component className={rootClassName}>{children}</Component>;
+  return <Component className={rootClassName}>{children}</Component>
-};
+}
 
-export default Container;
+export default Container

components/ui/Container/index.ts

@@ -1 +1 @@
-export { default } from "./Container";
+export { default } from './Container'

components/ui/Logo/Logo.tsx

@@ -35,6 +35,6 @@ const Logo = () => (
       strokeWidth="0.30634"
     />
   </svg>
-);
+)
 
-export default Logo;
+export default Logo

components/ui/Logo/index.ts

@@ -1 +1 @@
-export { default } from "./Logo";
+export { default } from './Logo'

components/ui/Sidebar/Sidebar.tsx

@@ -1,14 +1,14 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import { FC } from 'react'
-import s from "./Sidebar.module.css";
+import s from './Sidebar.module.css'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
 }
 
-const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
+const Sidebar: FC<Props> = ({ className, children }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
       <div className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25">
@@ -23,7 +23,7 @@ const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
         </div>
       </div>
     </div>
-  );
+  )
-};
+}
 
-export default Sidebar;
+export default Sidebar

components/ui/Sidebar/index.ts

@@ -1 +1 @@
-export { default } from "./Sidebar";
+export { default } from './Sidebar'

components/ui/_BLANK/Featurebar.tsx

@@ -1,15 +1,15 @@
-import cn from "classnames";
+import cn from 'classnames'
-import { FunctionComponent } from "react";
+import { FC } from 'react'
-import s from "./Featurebar.module.css";
+import s from './Featurebar.module.css'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
 }
 
-const Featurebar: FunctionComponent<Props> = ({ children, className }) => {
+const Featurebar: FC<Props> = ({ children, className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
-  return <div className={rootClassName}>{children}</div>;
+  return <div className={rootClassName}>{children}</div>
-};
+}
 
-export default Featurebar;
+export default Featurebar

components/ui/_BLANK/index.ts

@@ -1 +1 @@
-export { default } from "./Featurebar";
+export { default } from './Featurebar'

components/ui/context.tsx

@@ -1,56 +1,56 @@
-import React, { FunctionComponent } from "react";
+import React, { FC } from 'react'
 
 export interface UIState {
-  displaySidebar: boolean;
+  displaySidebar: boolean
-  openSidebar: () => {};
+  openSidebar: () => {}
-  closeSidebar: () => {};
+  closeSidebar: () => {}
 }
 
 const initialState = {
   displaySidebar: false,
   openSidebar: null,
   closeSidebar: null,
-};
+}
 
-export const UIContext = React.createContext(initialState);
+export const UIContext = React.createContext(initialState)
-UIContext.displayName = "UIContext";
+UIContext.displayName = 'UIContext'
 
-export const UIProvider: FunctionComponent = (props) => {
+export const UIProvider: FC = (props) => {
-  const [state, dispatch] = React.useReducer(uiReducer, initialState);
+  const [state, dispatch] = React.useReducer(uiReducer, initialState)
 
-  const openSidebar = () => dispatch("OPEN_SIDEBAR");
+  const openSidebar = () => dispatch('OPEN_SIDEBAR')
-  const closeSidebar = () => dispatch("CLOSE_SIDEBAR");
+  const closeSidebar = () => dispatch('CLOSE_SIDEBAR')
 
   const value = {
     ...state,
     openSidebar,
     closeSidebar,
-  };
+  }
 
-  return <UIContext.Provider value={value} {...props} />;
+  return <UIContext.Provider value={value} {...props} />
-};
+}
 
 export const useUI = () => {
-  const context = React.useContext(UIContext);
+  const context = React.useContext(UIContext)
   if (context === undefined) {
-    throw new Error(`useUI must be used within a UIProvider`);
+    throw new Error(`useUI must be used within a UIProvider`)
+  }
+  return context
 }
-  return context;
-};
 
 function uiReducer(state, action) {
   switch (action) {
-    case "OPEN_SIDEBAR": {
+    case 'OPEN_SIDEBAR': {
       return {
         ...state,
         displaySidebar: true,
-      };
       }
-    case "CLOSE_SIDEBAR": {
+    }
+    case 'CLOSE_SIDEBAR': {
       return {
         ...state,
         displaySidebar: false,
-      };
+      }
     }
   }
 }

components/ui/index.ts

@@ -1,4 +1,4 @@
-export { default as Button } from "./Button";
+export { default as Button } from './Button'
-export { default as Container } from "./Container";
+export { default as Container } from './Container'
-export { default as Sidebar } from "./Sidebar";
+export { default as Sidebar } from './Sidebar'
-export { default as Logo } from "./Logo";
+export { default as Logo } from './Logo'

components/ui/types.ts

@@ -1 +1 @@
-export type Colors = "violet" | "black" | "pink" | "white";
+export type Colors = 'violet' | 'black' | 'pink' | 'white'

lib/bigcommerce/api/fragments/product.ts

@@ -0,0 +1,66 @@
+export const responsiveImageFragment = /* GraphQL */ `
+  fragment responsiveImage on Image {
+    urlSmall: url(width: $imgSmallWidth, height: $imgSmallHeight)
+    urlMedium: url(width: $imgMediumWidth, height: $imgMediumHeight)
+    urlLarge: url(width: $imgLargeWidth, height: $imgLargeHeight)
+    urlXL: url(width: $imgXLWidth, height: $imgXLHeight)
+  }
+`
+
+export const productInfoFragment = /* GraphQL */ `
+  fragment productInfo on Product {
+    entityId
+    name
+    path
+    brand {
+      name
+    }
+    description
+    prices {
+      price {
+        value
+        currencyCode
+      }
+      salePrice {
+        value
+        currencyCode
+      }
+    }
+    images {
+      edges {
+        node {
+          ...responsiveImage
+        }
+      }
+    }
+    variants {
+      edges {
+        node {
+          entityId
+          defaultImage {
+            ...responsiveImage
+          }
+        }
+      }
+    }
+    options {
+      edges {
+        node {
+          entityId
+          displayName
+          isRequired
+          values {
+            edges {
+              node {
+                entityId
+                label
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ${responsiveImageFragment}
+`

lib/bigcommerce/api/index.ts

@@ -1,17 +1,17 @@
-import { CommerceAPIConfig } from 'lib/commerce/api';
+import { CommerceAPIConfig } from 'lib/commerce/api'
-import { GetAllProductsQueryVariables } from '../schema';
+import { GetAllProductsQueryVariables } from '../schema'
-import fetchAPI from './utils/fetch-api';
+import fetchAPI from './utils/fetch-api'
 
 export interface Images {
-  small?: ImageOptions;
+  small?: ImageOptions
-  medium?: ImageOptions;
+  medium?: ImageOptions
-  large?: ImageOptions;
+  large?: ImageOptions
-  xl?: ImageOptions;
+  xl?: ImageOptions
 }
 
 export interface ImageOptions {
-  width: number;
+  width: number
-  height?: number;
+  height?: number
 }
 
 export type ProductImageVariables = Pick<
@@ -24,34 +24,39 @@ export type ProductImageVariables = Pick<
   | 'imgLargeHeight'
   | 'imgXLWidth'
   | 'imgXLHeight'
->;
+>
 
-export interface BigcommerceConfig extends CommerceAPIConfig {
+export interface BigcommerceConfigOptions extends CommerceAPIConfig {
-  images?: Images;
+  images?: Images
-  readonly imageVariables?: ProductImageVariables;
 }
 
-const API_URL = process.env.BIGCOMMERCE_STOREFRONT_API_URL;
+export interface BigcommerceConfig extends BigcommerceConfigOptions {
-const API_TOKEN = process.env.BIGCOMMERCE_STOREFRONT_API_TOKEN;
+  readonly imageVariables?: ProductImageVariables
+}
+
+const API_URL = process.env.BIGCOMMERCE_STOREFRONT_API_URL
+const API_TOKEN = process.env.BIGCOMMERCE_STOREFRONT_API_TOKEN
 
 if (!API_URL) {
   throw new Error(
     `The environment variable BIGCOMMERCE_STOREFRONT_API_URL is missing and it's required to access your store`
-  );
+  )
 }
 
 if (!API_TOKEN) {
   throw new Error(
     `The environment variable BIGCOMMERCE_STOREFRONT_API_TOKEN is missing and it's required to access your store`
-  );
+  )
 }
 
-const config: BigcommerceConfig = {
+export class Config {
-  commerceUrl: API_URL,
+  private config: BigcommerceConfig
-  apiToken: API_TOKEN,
+
-  fetch: fetchAPI,
+  constructor(config: BigcommerceConfigOptions) {
+    this.config = {
+      ...config,
       get imageVariables() {
-    const { images } = this;
+        const { images } = this
         return images
           ? {
               imgSmallWidth: images.small?.width,
@@ -63,14 +68,30 @@ const config: BigcommerceConfig = {
               imgXLWidth: images.xl?.height,
               imgXLHeight: images.xl?.height,
             }
-      : undefined;
+          : undefined
       },
-};
+    }
+  }
+
+  getConfig() {
+    return this.config
+  }
+
+  setConfig(newConfig: Partial<BigcommerceConfig>) {
+    Object.assign(this.config, newConfig)
+  }
+}
+
+const config = new Config({
+  commerceUrl: API_URL,
+  apiToken: API_TOKEN,
+  fetch: fetchAPI,
+})
 
 export function getConfig() {
-  return config;
+  return config.getConfig()
 }
 
 export function setConfig(newConfig: Partial<BigcommerceConfig>) {
-  Object.assign(config, newConfig);
+  return config.setConfig(newConfig)
 }

lib/bigcommerce/api/operations/get-all-product-paths.ts

@@ -0,0 +1,54 @@
+import type { GetAllProductPathsQuery } from 'lib/bigcommerce/schema'
+import type { RecursivePartial, RecursiveRequired } from '../utils/types'
+import { BigcommerceConfig, getConfig } from '..'
+
+export const getAllProductPathsQuery = /* GraphQL */ `
+  query getAllProductPaths {
+    site {
+      products {
+        edges {
+          node {
+            path
+          }
+        }
+      }
+    }
+  }
+`
+
+export interface GetAllProductPathsResult<T> {
+  products: T extends GetAllProductPathsQuery
+    ? NonNullable<T['site']['products']['edges']>
+    : unknown
+}
+
+async function getAllProductPaths(opts?: {
+  query?: string
+  config?: BigcommerceConfig
+}): Promise<GetAllProductPathsResult<GetAllProductPathsQuery>>
+
+async function getAllProductPaths<T, V = any>(opts: {
+  query: string
+  config?: BigcommerceConfig
+}): Promise<GetAllProductPathsResult<T>>
+
+async function getAllProductPaths({
+  query = getAllProductPathsQuery,
+  config = getConfig(),
+}: {
+  query?: string
+  config?: BigcommerceConfig
+} = {}): Promise<GetAllProductPathsResult<GetAllProductPathsQuery>> {
+  // RecursivePartial forces the method to check for every prop in the data, which is
+  // required in case there's a custom `query`
+  const data = await config.fetch<RecursivePartial<GetAllProductPathsQuery>>(
+    query
+  )
+  const products = data.site?.products?.edges
+
+  return {
+    products: (products as RecursiveRequired<typeof products>) ?? [],
+  }
+}
+
+export default getAllProductPaths

lib/bigcommerce/api/operations/get-all-products.ts

@@ -1,9 +1,10 @@
 import type {
   GetAllProductsQuery,
   GetAllProductsQueryVariables,
-} from "lib/bigcommerce/schema";
+} from 'lib/bigcommerce/schema'
-import type { RecursivePartial, RecursiveRequired } from "../types";
+import type { RecursivePartial, RecursiveRequired } from '../utils/types'
-import { getConfig, Images, ProductImageVariables } from "..";
+import { productInfoFragment } from '../fragments/product'
+import { BigcommerceConfig, getConfig, Images, ProductImageVariables } from '..'
 
 export const getAllProductsQuery = /* GraphQL */ `
   query getAllProducts(
@@ -26,124 +27,61 @@ export const getAllProductsQuery = /* GraphQL */ `
         edges {
           cursor
           node {
-            entityId
+            ...productInfo
-            name
-            path
-            brand {
-              name
-            }
-            description
-            prices {
-              price {
-                value
-                currencyCode
-              }
-              salePrice {
-                value
-                currencyCode
-              }
-            }
-            images {
-              edges {
-                node {
-                  urlSmall: url(width: $imgSmallWidth, height: $imgSmallHeight)
-                  urlMedium: url(
-                    width: $imgMediumWidth
-                    height: $imgMediumHeight
-                  )
-                  urlLarge: url(width: $imgLargeWidth, height: $imgLargeHeight)
-                  urlXL: url(width: $imgXLWidth, height: $imgXLHeight)
-                }
-              }
-            }
-            variants {
-              edges {
-                node {
-                  entityId
-                  defaultImage {
-                    urlSmall: url(
-                      width: $imgSmallWidth
-                      height: $imgSmallHeight
-                    )
-                    urlMedium: url(
-                      width: $imgMediumWidth
-                      height: $imgMediumHeight
-                    )
-                    urlLarge: url(
-                      width: $imgLargeWidth
-                      height: $imgLargeHeight
-                    )
-                    urlXL: url(width: $imgXLWidth, height: $imgXLHeight)
-                  }
-                }
-              }
-            }
-            options {
-              edges {
-                node {
-                  entityId
-                  displayName
-                  isRequired
-                  values {
-                    edges {
-                      node {
-                        entityId
-                        label
           }
         }
       }
     }
   }
-            }
+
-          }
+  ${productInfoFragment}
-        }
+`
-      }
-    }
-  }
-`;
 
 export interface GetAllProductsResult<T> {
   products: T extends GetAllProductsQuery
-    ? NonNullable<T["site"]["products"]["edges"]>
+    ? NonNullable<T['site']['products']['edges']>
-    : unknown;
+    : unknown
 }
 
 export type ProductVariables = Images &
-  Omit<GetAllProductsQueryVariables, keyof ProductImageVariables>;
+  Omit<GetAllProductsQueryVariables, keyof ProductImageVariables>
 
 async function getAllProducts(opts?: {
-  query?: string;
+  query?: string
-  variables?: ProductVariables;
+  variables?: ProductVariables
-}): Promise<GetAllProductsResult<GetAllProductsQuery>>;
+  config?: BigcommerceConfig
+}): Promise<GetAllProductsResult<GetAllProductsQuery>>
 
 async function getAllProducts<T, V = any>(opts: {
-  query: string;
+  query: string
-  variables?: V;
+  variables?: V
-}): Promise<GetAllProductsResult<T>>;
+  config?: BigcommerceConfig
+}): Promise<GetAllProductsResult<T>>
 
 async function getAllProducts({
   query = getAllProductsQuery,
   variables: vars,
+  config = getConfig(),
 }: {
-  query?: string;
+  query?: string
-  variables?: ProductVariables;
+  variables?: ProductVariables
+  config?: BigcommerceConfig
 } = {}): Promise<GetAllProductsResult<GetAllProductsQuery>> {
-  const config = getConfig();
   const variables: GetAllProductsQueryVariables = {
     ...config.imageVariables,
     ...vars,
-  };
+  }
   // RecursivePartial forces the method to check for every prop in the data, which is
   // required in case there's a custom `query`
   const data = await config.fetch<RecursivePartial<GetAllProductsQuery>>(
     query,
     { variables }
-  );
+  )
-  const products = data.site?.products?.edges;
+  const products = data.site?.products?.edges
 
   return {
     products: (products as RecursiveRequired<typeof products>) ?? [],
-  };
+  }
 }
 
-export default getAllProducts;
+export default getAllProducts

lib/bigcommerce/api/operations/get-product.ts

@@ -1,13 +1,14 @@
 import type {
   GetProductQuery,
   GetProductQueryVariables,
-} from 'lib/bigcommerce/schema';
+} from 'lib/bigcommerce/schema'
-import type { RecursivePartial, RecursiveRequired } from '../types';
+import type { RecursivePartial, RecursiveRequired } from '../utils/types'
-import { getConfig, Images, ProductImageVariables } from '..';
+import { productInfoFragment } from '../fragments/product'
+import { BigcommerceConfig, getConfig, Images } from '..'
 
 export const getProductQuery = /* GraphQL */ `
   query getProduct(
-    $slug: String!
+    $path: String!
     $imgSmallWidth: Int = 320
     $imgSmallHeight: Int
     $imgMediumWidth: Int = 640
@@ -18,114 +19,67 @@ export const getProductQuery = /* GraphQL */ `
     $imgXLHeight: Int
   ) {
     site {
-      route(path: $slug) {
+      route(path: $path) {
         node {
           __typename
           ... on Product {
-            entityId
+            ...productInfo
-            name
-            path
-            brand {
-              name
-            }
-            description
-            prices {
-              price {
-                currencyCode
-                value
-              }
-              salePrice {
-                currencyCode
-                value
-              }
-            }
-            images {
-              edges {
-                node {
-                  urlSmall: url(width: $imgSmallWidth, height: $imgSmallHeight)
-                  urlMedium: url(
-                    width: $imgMediumWidth
-                    height: $imgMediumHeight
-                  )
-                  urlLarge: url(width: $imgLargeWidth, height: $imgLargeHeight)
-                  urlXL: url(width: $imgXLWidth, height: $imgXLHeight)
-                }
-              }
-            }
-            variants {
-              edges {
-                node {
-                  entityId
-                }
-              }
-            }
-            options {
-              edges {
-                node {
-                  entityId
-                  displayName
-                  isRequired
-                  values {
-                    edges {
-                      node {
-                        entityId
-                        label
           }
         }
       }
     }
   }
-            }
+
-          }
+  ${productInfoFragment}
-        }
+`
-      }
-    }
-  }
-`;
 
 export interface GetProductResult<T> {
   product?: T extends GetProductQuery
     ? Extract<T['site']['route']['node'], { __typename: 'Product' }>
-    : unknown;
+    : unknown
 }
 
 export type ProductVariables = Images &
-  Omit<GetProductQueryVariables, keyof ProductImageVariables>;
+  ({ path: string; slug?: never } | { path?: never; slug: string })
 
 async function getProduct(opts: {
-  query?: string;
+  query?: string
-  variables: ProductVariables;
+  variables: ProductVariables
-}): Promise<GetProductResult<GetProductQuery>>;
+  config?: BigcommerceConfig
+}): Promise<GetProductResult<GetProductQuery>>
 
 async function getProduct<T, V = any>(opts: {
-  query: string;
+  query: string
-  variables: V;
+  variables: V
-}): Promise<GetProductResult<T>>;
+  config?: BigcommerceConfig
+}): Promise<GetProductResult<T>>
 
 async function getProduct({
   query = getProductQuery,
-  variables: vars,
+  variables: { slug, ...vars },
+  config = getConfig(),
 }: {
-  query?: string;
+  query?: string
-  variables: ProductVariables;
+  variables: ProductVariables
+  config?: BigcommerceConfig
 }): Promise<GetProductResult<GetProductQuery>> {
-  const config = getConfig();
   const variables: GetProductQueryVariables = {
     ...config.imageVariables,
     ...vars,
-  };
+    path: slug ? `/${slug}/` : vars.path!,
+  }
   const data = await config.fetch<RecursivePartial<GetProductQuery>>(query, {
     variables,
-  });
+  })
-  const product = data.site?.route?.node;
+  const product = data.site?.route?.node
 
   if (product?.__typename === 'Product') {
     return {
       product: product as RecursiveRequired<typeof product>,
-    };
+    }
   }
 
-  return {};
+  return {}
 }
 
-export default getProduct;
+export default getProduct

lib/bigcommerce/api/types/index.ts

@@ -1,7 +0,0 @@
-export type RecursivePartial<T> = {
-  [P in keyof T]?: RecursivePartial<T[P]>;
-};
-
-export type RecursiveRequired<T> = {
-  [P in keyof T]-?: RecursiveRequired<T[P]>;
-};

lib/bigcommerce/api/utils/fetch-api.ts

@@ -1,11 +1,11 @@
-import { CommerceAPIFetchOptions } from 'lib/commerce/api';
+import { CommerceAPIFetchOptions } from 'lib/commerce/api'
-import { getConfig } from '..';
+import { getConfig } from '..'
 
 export default async function fetchAPI<Q, V = any>(
   query: string,
   { variables, preview }: CommerceAPIFetchOptions<V> = {}
 ): Promise<Q> {
-  const config = getConfig();
+  const config = getConfig()
   const res = await fetch(config.commerceUrl + (preview ? '/preview' : ''), {
     method: 'POST',
     headers: {
@@ -16,12 +16,12 @@ export default async function fetchAPI<Q, V = any>(
       query,
       variables,
     }),
-  });
+  })
 
-  const json = await res.json();
+  const json = await res.json()
   if (json.errors) {
-    console.error(json.errors);
+    console.error(json.errors)
-    throw new Error('Failed to fetch API');
+    throw new Error('Failed to fetch API')
   }
-  return json.data;
+  return json.data
 }

lib/bigcommerce/api/utils/types.ts

@@ -0,0 +1,7 @@
+export type RecursivePartial<T> = {
+  [P in keyof T]?: RecursivePartial<T[P]>
+}
+
+export type RecursiveRequired<T> = {
+  [P in keyof T]-?: RecursiveRequired<T[P]>
+}

lib/bigcommerce/cart.tsx

@@ -1,14 +1,14 @@
 import {
   CartProvider as CommerceCartProvider,
   useCart as useCommerceCart,
-} from 'lib/commerce/cart';
+} from 'lib/commerce/cart'
 
-export type Cart = any;
+export type Cart = any
 
 export function CartProvider({ children }) {
-  return <CommerceCartProvider>{children}</CommerceCartProvider>;
+  return <CommerceCartProvider>{children}</CommerceCartProvider>
 }
 
 export function useCart() {
-  return useCommerceCart<Cart>();
+  return useCommerceCart<Cart>()
 }

lib/bigcommerce/index.tsx

@@ -2,38 +2,38 @@ import {
   CommerceProvider as CoreCommerceProvider,
   Connector,
   useCommerce as useCoreCommerce,
-} from 'lib/commerce';
+} from 'lib/commerce'
 
 async function getText(res: Response) {
   try {
-    return (await res.text()) || res.statusText;
+    return (await res.text()) || res.statusText
   } catch (error) {
-    return res.statusText;
+    return res.statusText
   }
 }
 
 async function getError(res: Response) {
   if (res.headers.get('Content-Type')?.includes('application/json')) {
-    const data = await res.json();
+    const data = await res.json()
-    return data.errors[0];
+    return data.errors[0]
   }
-  return { message: await getText(res) };
+  return { message: await getText(res) }
 }
 
 async function fetcher(url: string, query: string) {
-  const res = await fetch(url);
+  const res = await fetch(url)
 
   if (res.ok) {
-    return res.json();
+    return res.json()
   }
 
-  throw await getError(res);
+  throw await getError(res)
 }
 
 export const bigcommerce: Connector = {
   locale: 'en-us',
   fetcher,
-};
+}
 
 // TODO: The connector should be extendable when a developer is using it
 export function CommerceProvider({ children }) {
@@ -41,7 +41,7 @@ export function CommerceProvider({ children }) {
     <CoreCommerceProvider connector={bigcommerce}>
       {children}
     </CoreCommerceProvider>
-  );
+  )
 }
 
-export const useCommerce = () => useCoreCommerce();
+export const useCommerce = () => useCoreCommerce()

lib/cart.js

@@ -1,105 +1,105 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback } from 'react'
-import useSWR, { mutate } from "swr";
+import useSWR, { mutate } from 'swr'
 
 async function getText(res) {
   try {
-    return (await res.text()) || res.statusText;
+    return (await res.text()) || res.statusText
   } catch (error) {
-    return res.statusText;
+    return res.statusText
   }
 }
 
 async function getError(res) {
-  if (res.headers.get("Content-Type")?.includes("application/json")) {
+  if (res.headers.get('Content-Type')?.includes('application/json')) {
-    const data = await res.json();
+    const data = await res.json()
-    return data.errors[0];
+    return data.errors[0]
   }
-  return { message: await getText(res) };
+  return { message: await getText(res) }
 }
 
 async function fetcher(url) {
-  const res = await fetch(url);
+  const res = await fetch(url)
 
   if (res.status === 200) {
-    return res.json();
+    return res.json()
   }
-  throw await getError(res);
+  throw await getError(res)
 }
 
 export function useCart() {
-  return useSWR("/api/cart", fetcher);
+  return useSWR('/api/cart', fetcher)
 }
 
 export function useAddToCart() {
   const [{ addingToCart, error }, setStatus] = useState({
     addingToCart: false,
-  });
+  })
   const addToCart = useCallback(async ({ product }) => {
-    setStatus({ addingToCart: true });
+    setStatus({ addingToCart: true })
 
-    const res = await fetch("/api/cart", {
+    const res = await fetch('/api/cart', {
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify({ product }),
-    });
+    })
 
     // Product added as expected
     if (res.status === 200) {
-      setStatus({ addingToCart: false });
+      setStatus({ addingToCart: false })
-      return mutate("/api/cart");
+      return mutate('/api/cart')
     }
 
-    const error = await getError(res);
+    const error = await getError(res)
 
-    console.error("Adding product to cart failed with:", res.status, error);
+    console.error('Adding product to cart failed with:', res.status, error)
-    setStatus({ addingToCart: false, error });
+    setStatus({ addingToCart: false, error })
-  }, []);
+  }, [])
 
-  return { addToCart, addingToCart, error };
+  return { addToCart, addingToCart, error }
 }
 
 export function useUpdateCart() {
   const [{ updatingCart, error }, setStatus] = useState({
     updatingCart: false,
-  });
+  })
   const updateCart = useCallback(async ({ product, item }) => {
-    setStatus({ updatingCart: true });
+    setStatus({ updatingCart: true })
 
     const res = await fetch(
       `/api/cart?itemId=${item.id}`,
       product.quantity < 1
-        ? { method: "DELETE" }
+        ? { method: 'DELETE' }
         : {
-            method: "PUT",
+            method: 'PUT',
             headers: {
-              "Content-Type": "application/json",
+              'Content-Type': 'application/json',
             },
             body: JSON.stringify({ product }),
           }
-    );
+    )
 
     // Product updated as expected
     if (res.status === 200) {
-      setStatus({ updatingCart: false });
+      setStatus({ updatingCart: false })
-      return mutate("/api/cart");
+      return mutate('/api/cart')
     }
 
-    const error = await getError(res);
+    const error = await getError(res)
 
-    console.error("Update to cart failed with:", res.status, error);
+    console.error('Update to cart failed with:', res.status, error)
-    setStatus({ updatingCart: false, error });
+    setStatus({ updatingCart: false, error })
-  }, []);
+  }, [])
 
-  return { updateCart, updatingCart, error };
+  return { updateCart, updatingCart, error }
 }
 
 export function useRemoveFromCart() {
-  const { updateCart, updatingCart, error } = useUpdateCart();
+  const { updateCart, updatingCart, error } = useUpdateCart()
   const removeFromCart = async ({ item }) => {
-    updateCart({ item, product: { quantity: 0 } });
+    updateCart({ item, product: { quantity: 0 } })
-  };
+  }
-
+
-  return { removeFromCart, removingFromCart: updatingCart, error };
+  return { removeFromCart, removingFromCart: updatingCart, error }
 }

lib/commerce-api.ts

@@ -1,9 +0,0 @@
-import BigcommerceAPI from "./bigcommerce/api";
-
-const API_URL = process.env.NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_URL!;
-const API_TOKEN = process.env.NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_TOKEN!;
-
-export const commerce = new BigcommerceAPI({
-  commerceUrl: API_URL,
-  apiToken: API_TOKEN,
-});

lib/commerce/api/index.ts

@@ -1,15 +1,15 @@
 export interface CommerceAPIConfig {
-  commerceUrl: string;
+  commerceUrl: string
-  apiToken: string;
+  apiToken: string
   fetch<Q, V = any>(
     query: string,
     queryData?: CommerceAPIFetchOptions<V>
-  ): Promise<Q>;
+  ): Promise<Q>
 }
 
 export interface CommerceAPIFetchOptions<V> {
-  variables?: V;
+  variables?: V
-  preview?: boolean;
+  preview?: boolean
 }
 
 // TODO: define interfaces for all the available operations

lib/commerce/cart.tsx

@@ -1,37 +1,37 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext } from 'react'
-import useSWR, { responseInterface } from 'swr';
+import useSWR, { responseInterface } from 'swr'
-import { useCommerce } from '.';
+import { useCommerce } from '.'
 
-export type Cart = any;
+export type Cart = any
 
 export type CartResponse<C extends Cart> = responseInterface<C, Error> & {
-  isEmpty: boolean;
+  isEmpty: boolean
-};
+}
 
-const CartContext = createContext<CartResponse<Cart>>(null);
+const CartContext = createContext<CartResponse<Cart>>(null)
 
 function getCartCookie() {
   // TODO: Figure how the cart should be persisted
-  return null;
+  return null
 }
 
 export function CartProvider({ children }) {
-  const { hooks, fetcher } = useCommerce<Cart>();
+  const { hooks, fetcher } = useCommerce<Cart>()
-  const { useCart } = hooks;
+  const { useCart } = hooks
-  const cartId = getCartCookie();
+  const cartId = getCartCookie()
   const response = useSWR(
     () => (cartId ? [useCart.url, useCart.query, useCart.resolver] : null),
     fetcher
-  );
+  )
-  const isEmpty = true;
+  const isEmpty = true
 
   return (
     <CartContext.Provider value={{ ...response, isEmpty }}>
       {children}
     </CartContext.Provider>
-  );
+  )
 }
 
 export function useCart<C extends Cart>() {
-  return useContext(CartContext) as CartResponse<C>;
+  return useContext(CartContext) as CartResponse<C>
 }

lib/commerce/index.tsx

@@ -1,29 +1,29 @@
-import { createContext, ReactNode, useContext } from 'react';
+import { createContext, ReactNode, useContext } from 'react'
 
-const Commerce = createContext<Connector>(null);
+const Commerce = createContext<Connector>(null)
 
 export type CommerceProps = {
-  children?: ReactNode;
+  children?: ReactNode
-  connector: Connector;
+  connector: Connector
-};
+}
 
 export type Connector = {
-  fetcher: Fetcher<any>;
+  fetcher: Fetcher<any>
-  locale: string;
+  locale: string
-};
+}
 
-export type Fetcher<T> = (...args: any) => T | Promise<T>;
+export type Fetcher<T> = (...args: any) => T | Promise<T>
 
 export function CommerceProvider({ children, connector }: CommerceProps) {
   if (!connector) {
     throw new Error(
       'CommerceProvider requires a valid headless commerce connector'
-    );
+    )
   }
 
-  return <Commerce.Provider value={connector}>{children}</Commerce.Provider>;
+  return <Commerce.Provider value={connector}>{children}</Commerce.Provider>
 }
 
 export function useCommerce<T extends Connector>() {
-  return useContext(Commerce) as T;
+  return useContext(Commerce) as T
 }

package.json

@@ -12,6 +12,10 @@
     "schema": "lib/bigcommerce/schema.graphql",
     "documents": "lib/bigcommerce/**/*.{graphql,js,ts,jsx,tsx}"
   },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true
+  },
   "dependencies": {
     "@tailwindcss/ui": "^0.6.2",
     "@types/classnames": "^2.2.10",
@@ -34,6 +38,7 @@
     "graphql": "^15.3.0",
     "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-preset-env": "^6.7.0",
+    "prettier": "^2.1.2",
     "tailwindcss": "^1.8.10",
     "typescript": "^4.0.3"
   },

pages/_app.tsx

@@ -1,13 +1,15 @@
-import "@assets/global.css";
+import { FC } from 'react'
-import React from "react";
+import type { AppProps } from 'next/app'
-import { UIProvider } from "@components/ui/context";
+import '@assets/global.css'
+
+const Noop: FC = ({ children }) => <>{children}</>
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  const Layout = (Component as any).Layout || Noop
 
-export default function MyApp({ Component, pageProps }) {
   return (
-    <>
+    <Layout>
-      <UIProvider>
       <Component {...pageProps} />
-      </UIProvider>
+    </Layout>
-    </>
+  )
-  );
 }

pages/_document.tsx

@@ -1,4 +1,4 @@
-import Document_, { Html, Head, Main, NextScript } from "next/document";
+import Document_, { Html, Head, Main, NextScript } from 'next/document'
 
 export default class Document extends Document_ {
   render() {
@@ -13,6 +13,6 @@ export default class Document extends Document_ {
            */}
         </body>
       </Html>
-    );
+    )
   }
 }

pages/index.tsx

@@ -1,22 +1,20 @@
-import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
+import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
-import getAllProducts from "lib/bigcommerce/api/operations/get-all-products";
+import getAllProducts from 'lib/bigcommerce/api/operations/get-all-products'
-import { Layout } from "@components/core";
+import { Layout } from '@components/core'
-import { ProductGrid } from "@components/product";
+import { ProductGrid } from '@components/product'
 
 export async function getStaticProps({ preview }: GetStaticPropsContext) {
-  const { products } = await getAllProducts();
+  const { products } = await getAllProducts()
   return {
     props: { products },
-  };
+  }
 }
 
 export default function Home({
   products,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  console.log("PRODUCTS", products);
+  console.log('PRODUCTS', products)
-  return (
+  return <ProductGrid products={products} />
-    <Layout>
-      <ProductGrid products={products} />
-    </Layout>
-  );
 }
+
+Home.Layout = Layout

pages/product/[slug].tsx

@@ -1,18 +1,16 @@
-import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
+import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
-import { useRouter } from "next/router";
+import { useRouter } from 'next/router'
-import getProduct from "lib/bigcommerce/api/operations/get-product";
+import getProduct from 'lib/bigcommerce/api/operations/get-product'
-import { Layout } from "@components/core";
+import { Layout } from '@components/core'
-import { ProductView } from "@components/product";
+import { ProductView } from '@components/product'
+import getAllProductPaths from '@lib/bigcommerce/api/operations/get-all-product-paths'
 
 export async function getStaticProps({
   params,
 }: GetStaticPropsContext<{ slug: string }>) {
-  const { product } = await getProduct({ variables: { slug: params!.slug } });
+  const { product } = await getProduct({ variables: { slug: params!.slug } })
-
-  console.log("PRODUCT", product);
-
   const productData = {
-    title: "T-Shirt",
+    title: 'T-Shirt',
     description: `
       Nothing undercover about this tee. Nope. This is the official Bad
       Boys tee. Printed in white or black ink on Black, Brown, or Oatmeal.
@@ -21,36 +19,43 @@ export async function getStaticProps({
       run. Printing starts when the drop ends. Reminder: Bad Boys For
       Life. Shipping may take 10+ days due to COVID-19.
     `,
-    price: "$50",
+    price: '$50',
-    colors: ["black", "white", "pink"],
+    colors: ['black', 'white', 'pink'],
-    sizes: ["s", "m", "l", "xl", "xxl"],
+    sizes: ['s', 'm', 'l', 'xl', 'xxl'],
-  };
+  }
   return {
     props: {
+      product,
       productData,
     },
     revalidate: 200,
-  };
+  }
 }
 
 export async function getStaticPaths() {
+  const { products } = await getAllProductPaths()
+
   return {
-    paths: [],
+    paths: products.map((product) => ({
-    fallback: "unstable_blocking",
+      params: { slug: product!.node.path },
-  };
+    })),
+    fallback: 'unstable_blocking',
+  }
 }
 
-export default function Home({
+export default function Slug({
+  product,
   productData,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  const router = useRouter();
+  console.log('PRODUCT', product)
-  return (
+
-    <Layout>
+  const router = useRouter()
-      {router.isFallback ? (
+
+  return router.isFallback ? (
     <h1>Loading...</h1>
   ) : (
     <ProductView productData={productData} />
-      )}
+  )
-    </Layout>
-  );
 }
+
+Slug.Layout = Layout

postcss.config.js

@@ -1,19 +1,24 @@
 module.exports = {
   plugins: [
+<<<<<<< HEAD
     "tailwindcss",
     "postcss-nesting",
     "postcss-flexbugs-fixes",
+=======
+    'tailwindcss',
+    'postcss-flexbugs-fixes',
+>>>>>>> f2108ca97faf54a18680b608356012700971c450
     [
-      "postcss-preset-env",
+      'postcss-preset-env',
       {
         autoprefixer: {
-          flexbox: "no-2009",
+          flexbox: 'no-2009',
         },
         stage: 3,
         features: {
-          "custom-properties": false,
+          'custom-properties': false,
         },
       },
     ],
   ],
-};
+}

tailwind.config.js

@@ -3,25 +3,25 @@ module.exports = {
     removeDeprecatedGapUtilities: true,
   },
   purge: [
-    "./components/**/*.{js,ts,jsx,tsx}",
+    './components/**/*.{js,ts,jsx,tsx}',
-    "./pages/**/*.{js,ts,jsx,tsx}",
+    './pages/**/*.{js,ts,jsx,tsx}',
-    "./ui/**/*.{js,ts,jsx,tsx}",
+    './ui/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     extend: {
       colors: {
-        "accent-1": "#FAFAFA",
+        'accent-1': '#FAFAFA',
-        "accent-4": "#888",
+        'accent-4': '#888',
-        violet: "#7928CA",
+        violet: '#7928CA',
-        pink: "#FF0080",
+        pink: '#FF0080',
-        cyan: "#50E3C2",
+        cyan: '#50E3C2',
-        blue: "#0070F3",
+        blue: '#0070F3',
       },
     },
   },
   variants: {},
-  plugins: [require("@tailwindcss/ui")],
+  plugins: [require('@tailwindcss/ui')],
   experimental: {
     applyComplexClasses: true,
   },
-};
+}

yarn.lock

@@ -3,11 +3,11 @@
 
 
 "@ampproject/toolbox-core@^2.6.0":
-  version "2.6.0"
+  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/@ampproject/toolbox-core/-/toolbox-core-2.6.0.tgz#9824d5f133d82106a9bf0774920843c69fa5c869"
+  resolved "https://registry.yarnpkg.com/@ampproject/toolbox-core/-/toolbox-core-2.6.1.tgz#af97ec253bf39e5fe5121b8ec28f1f35d1878446"
-  integrity sha512-sDMnHj8WaX3tqJS5VsIHkeW98nq5WQ0C9RoFc1PPS3rmYIlS0vhAfHbrjJw6wtuxBTQFxccje+Ew+2OJ2D15kA==
+  integrity sha512-hTsd9J2yy3JPMClG8BuUhUfMDtd3oDhCuRe/SyZJYQfNMN8hQHt7LNXtdOzZr0Kw7nTepHmn7GODS68fZN4OQQ==
   dependencies:
-    cross-fetch "3.0.5"
+    cross-fetch "3.0.6"
     lru-cache "6.0.0"
 
 "@ampproject/toolbox-optimizer@2.6.0":
@@ -1194,103 +1194,103 @@
     tslib "~2.0.1"
 
 "@graphql-tools/apollo-engine-loader@^6":
-  version "6.2.3"
+  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/apollo-engine-loader/-/apollo-engine-loader-6.2.3.tgz#769fb39e3ea63e036421705c711651cea0f21c44"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/apollo-engine-loader/-/apollo-engine-loader-6.2.4.tgz#bed59ccac654e36a62f736e035697e2e5de152ba"
-  integrity sha512-KxBKk3nPAcTBjv+n8BM6t8L/xhlkvfgkonjRdbYN/PrjzshVS8T7ddI/7CwG6RARZHqKBQqp4uEmlmvC4oLPMg==
+  integrity sha512-aYDyEs7Q0J0og7E/B7zj2+62Jf8QerkwV+hQ5wwGLSQlYnLDTB+hMNBG/3ga9qMQ5UVQ+d45ckXKN9nOl6LX7g==
   dependencies:
-    "@graphql-tools/utils" "6.2.3"
+    "@graphql-tools/utils" "^6.2.4"
     cross-fetch "3.0.6"
     tslib "~2.0.1"
 
 "@graphql-tools/code-file-loader@^6":
-  version "6.2.3"
+  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/code-file-loader/-/code-file-loader-6.2.3.tgz#65b0376224cc98a0c09ffcd925baf011c3d9f76f"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/code-file-loader/-/code-file-loader-6.2.4.tgz#ce194c19b2fcd714bffa4c0c529a4c65a6b0db4b"
-  integrity sha512-Cvk9edruHSXhf0oFgdlVnGSUHg+X8OMwLiJwbMUc3cNT6w6JVef8yjn1mmEw9qHYakFwHSLMyJoghfXzP31Jww==
+  integrity sha512-aDVI/JVUXIdqSJJKLjpBaqOAOCa5yUvsgQZu2Q9nVwV9faGlQi5MUuYAh1xp0LW80/5/unbiZ5/taRUyUY/6Eg==
   dependencies:
-    "@graphql-tools/graphql-tag-pluck" "6.2.3"
+    "@graphql-tools/graphql-tag-pluck" "^6.2.4"
-    "@graphql-tools/utils" "6.2.3"
+    "@graphql-tools/utils" "^6.2.4"
     fs-extra "9.0.1"
     tslib "~2.0.1"
 
-"@graphql-tools/delegate@6.2.3":
+"@graphql-tools/delegate@^6.2.4":
-  version "6.2.3"
+  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/delegate/-/delegate-6.2.3.tgz#7776bfe8acf6f9a9aa0f6481a34ca8ab9fa87d1f"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/delegate/-/delegate-6.2.4.tgz#db553b63eb9512d5eb5bbfdfcd8cb1e2b534699c"
-  integrity sha512-j4P7RaI5J9AvGcfBDITO6bZDeSvjMgDby2smn3L2dmXpPfMYh00KRRSZjzdMwSkLxi+0octh9buUAeCdvVMkKQ==
+  integrity sha512-mXe6DfoWmq49kPcDrpKHgC2DSWcD5q0YCaHHoXYPAOlnLH8VMTY8BxcE8y/Do2eyg+GLcwAcrpffVszWMwqw0w==
   dependencies:
     "@ardatan/aggregate-error" "0.0.6"
-    "@graphql-tools/schema" "6.2.3"
+    "@graphql-tools/schema" "^6.2.4"
-    "@graphql-tools/utils" "6.2.3"
+    "@graphql-tools/utils" "^6.2.4"
     dataloader "2.0.0"
     is-promise "4.0.0"
     tslib "~2.0.1"
 
 "@graphql-tools/git-loader@^6":
-  version "6.2.3"
+  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/git-loader/-/git-loader-6.2.3.tgz#a2a217064201adf109139e7a0784ac23926894bf"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/git-loader/-/git-loader-6.2.4.tgz#2502d48cb1253bde7df3f3e1dfd2bdcf7ff72b82"
-  integrity sha512-kWUsQ6rhFTSC6NhfNUxLJsMwtop4Es8e0xLz8IKqboDl+a3gRqv4bdGUVKXndNj98G7bt6DZRqH7LTS0dPmZwQ==
+  integrity sha512-urMwWhhsZUKnX9MDHXbMUfZd568pWwj1Bx1O2M7N8I25GqZDW54Fzj9DudlVKE5M9twMtoEyBTH7sH4tscliqg==
   dependencies:
-    "@graphql-tools/graphql-tag-pluck" "6.2.3"
+    "@graphql-tools/graphql-tag-pluck" "^6.2.4"
-    "@graphql-tools/utils" "6.2.3"
+    "@graphql-tools/utils" "^6.2.4"
     tslib "~2.0.1"
 
 "@graphql-tools/github-loader@^6":
-  version "6.2.3"
+  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/github-loader/-/github-loader-6.2.3.tgz#b7d944616278d182d1187bbcace3b6b967a0ca7a"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/github-loader/-/github-loader-6.2.4.tgz#38520b5964594a578dbb4a7693a76938a79877a1"
-  integrity sha512-YDMcT59Jt2PO9Ork397BOjMCMvjNVFm4LVic7Llnl+3t5MnsBHsJ8fWEOx/p10/LXIBW5xjtKonz6QeY9QfB7w==
+  integrity sha512-p4peplm/Ot989bCD4XATK5NEXX7l39BXNw+YKaqgoEoHopyQ142I2Zb0GJiMRjW9yXGqIlDjG4reZazleiprgQ==
   dependencies:
-    "@graphql-tools/graphql-tag-pluck" "6.2.3"
+    "@graphql-tools/graphql-tag-pluck" "^6.2.4"
-    "@graphql-tools/utils" "6.2.3"
+    "@graphql-tools/utils" "^6.2.4"
     cross-fetch "3.0.6"
     tslib "~2.0.1"
 
 "@graphql-tools/graphql-file-loader@^6", "@graphql-tools/graphql-file-loader@^6.0.0":
-  version "6.2.3"
+  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/graphql-file-loader/-/graphql-file-loader-6.2.3.tgz#be82b56a7585c24b0d8fef7570707d6e7df7c0ee"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/graphql-file-loader/-/graphql-file-loader-6.2.4.tgz#1765b644cd621040f232f5c32321b45c187399a7"
-  integrity sha512-9K+foDqfcJXf2jNNOWWZnV+PdxJkKmzAY58qlbFEFfUeRC6ZmOA9B3vTkcFadVdSwIsaWHhaxqHrNAD+OfkAyQ==
+  integrity sha512-IcdUZoOlkCGr0KO8QCO8G031CDDv5dzHBZeN5H1gzE2AVFFwn2AexysrUXBxftm2DQIOuV+Knap7dC4Ol54kNA==
   dependencies:
-    "@graphql-tools/import" "6.2.3"
+    "@graphql-tools/import" "^6.2.4"
-    "@graphql-tools/utils" "6.2.3"
+    "@graphql-tools/utils" "^6.2.4"
     fs-extra "9.0.1"
     tslib "~2.0.1"
 
-"@graphql-tools/graphql-tag-pluck@6.2.3":
+"@graphql-tools/graphql-tag-pluck@^6.2.4":
-  version "6.2.3"
+  version "6.2.5"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/graphql-tag-pluck/-/graphql-tag-pluck-6.2.3.tgz#e60cb0159d6081f7743c7379ebeb5384552f93e6"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/graphql-tag-pluck/-/graphql-tag-pluck-6.2.5.tgz#5c0c47362406a55aaf661c4af0209b542b8483dc"
-  integrity sha512-GnZnFSGV71g4Za/fMlwLXKIIPbP7jBoeeSUbk2LPL3d58v9+n8GtbQewTKLKWFSFtF9qAfpHos+Ok2WC1+o1FA==
+  integrity sha512-qvdIOTanBuKYLIMSYl9Tk+ej9dq00B4BqUnHqoCvYtSjD1n1UINGrqXgwMT+JXp66gUZWw8BU9Ke92mQ4UwTpg==
   dependencies:
     "@babel/parser" "7.11.5"
     "@babel/traverse" "7.11.5"
     "@babel/types" "7.11.5"
-    "@graphql-tools/utils" "6.2.3"
+    "@graphql-tools/utils" "^6.2.4"
     tslib "~2.0.1"
   optionalDependencies:
     vue-template-compiler "^2.6.12"
 
-"@graphql-tools/import@6.2.3":
+"@graphql-tools/import@^6.2.4":
-  version "6.2.3"
+  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/import/-/import-6.2.3.tgz#c50677b4404bd3a8aa92c31dcd9919ec921bb86e"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/import/-/import-6.2.4.tgz#0547f6d4754a924e80439d6af013577cdb617194"
-  integrity sha512-2ftXR84aPy2ueAEEGw/yFvYGPbvJYs2m18FEODhAq5z4P285ZlCMluxTUR9yNjumzgQP5Eer4fl64ztsdJvCyg==
+  integrity sha512-Q6fk6hbtDevoEVcgwb3WRn7XOqGY4MnX3Mvc+x8/b8k4RZ4wT+0WSLRDXGAKiVKRxGhgouU2lZVnGE/LDrGSCg==
   dependencies:
     fs-extra "9.0.1"
     resolve-from "5.0.0"
     tslib "~2.0.1"
 
 "@graphql-tools/json-file-loader@^6", "@graphql-tools/json-file-loader@^6.0.0":
-  version "6.2.3"
+  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/json-file-loader/-/json-file-loader-6.2.3.tgz#5992ef57bfa29b3bfea07915cc50c59b6e656ab8"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/json-file-loader/-/json-file-loader-6.2.4.tgz#0707fedfced73dd91b1dd81dfa02e83413e5aeaa"
-  integrity sha512-7v445KZLVB3owbibu2HsFmVSsdDOn0NzYSqIXaaIZ7saqoVtG8etSt699kLw5gJM3j0Kjm7XDz9tK60Apes/xg==
+  integrity sha512-1iL6wwZrUt888hExlNEloSpNXuuUFYD2KV2FZ82t6yiq6bO9Iyg12SUuGd5xVXx9jUkdaHRZc0plMyuIA6gTGA==
   dependencies:
-    "@graphql-tools/utils" "6.2.3"
+    "@graphql-tools/utils" "^6.2.4"
     fs-extra "9.0.1"
     tslib "~2.0.1"
 
 "@graphql-tools/load@^6", "@graphql-tools/load@^6.0.0":
-  version "6.2.3"
+  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/load/-/load-6.2.3.tgz#7a40d9767049941c704bff7300c46ae5ea647bac"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/load/-/load-6.2.4.tgz#a1a860bdc9d9e0bd93e1dffdbd2cf8839a521c41"
-  integrity sha512-3wmzrwf7tVY8rDRT2jxfQKlKgSB6P8OordFoOxpk1qNP2vmkUN9tWKxaI1ANkdm+et1D3ovUHeSoW6jKscnUAA==
+  integrity sha512-FlQC50VELwRxoWUbJMMMs5gG0Dl8BaQYMrXUHTsxwqR7UmksUYnysC21rdousvs6jVZ7pf4unZfZFtBjz+8Edg==
   dependencies:
-    "@graphql-tools/merge" "6.2.3"
+    "@graphql-tools/merge" "^6.2.4"
-    "@graphql-tools/utils" "6.2.3"
+    "@graphql-tools/utils" "^6.2.4"
     globby "11.0.1"
     import-from "3.0.0"
     is-glob "4.0.1"
@@ -1299,22 +1299,22 @@
     unixify "1.0.0"
     valid-url "1.0.9"
 
-"@graphql-tools/merge@6.2.3", "@graphql-tools/merge@^6.0.0", "@graphql-tools/merge@^6.0.18":
+"@graphql-tools/merge@^6.0.0", "@graphql-tools/merge@^6.0.18", "@graphql-tools/merge@^6.2.4":
-  version "6.2.3"
+  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/merge/-/merge-6.2.3.tgz#df6d84d9182bd289985da4cc3a45515a7c2135df"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/merge/-/merge-6.2.4.tgz#5b3b68083d55a38a7f3caac6e0adc46f428c2a3b"
-  integrity sha512-qSSxdM2AKjnAHuChcnxIfzsGej78B56EE6ZD3tXMtKJOMQMhk4T4yXnKRHEw8fw7ZtNk/KqCmb6LJHy8Ws8frg==
+  integrity sha512-hQbiSzCJgzUYG1Aspj5EAUY9DsbTI2OK30GLBOjUI16DWkoLVXLXy4ljQYJxq6wDc4fqixMOmvxwf8FoJ9okmw==
   dependencies:
-    "@graphql-tools/schema" "6.2.3"
+    "@graphql-tools/schema" "^6.2.4"
-    "@graphql-tools/utils" "6.2.3"
+    "@graphql-tools/utils" "^6.2.4"
     tslib "~2.0.1"
 
 "@graphql-tools/prisma-loader@^6":
-  version "6.2.3"
+  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/prisma-loader/-/prisma-loader-6.2.3.tgz#ee820c46ea94836c97adbc4ea4a34ac2740e0ca6"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/prisma-loader/-/prisma-loader-6.2.4.tgz#3f902b9f1d36ae0c4731e1fe963178bea300af49"
-  integrity sha512-wjHg5SCJHsqI97/ct4G/B88VnPeTlaYYAAIgSvkpLWshuA3eZUuW28TlWlyRyjgUeGDaeNiO/UQSLE3pOAZUFw==
+  integrity sha512-4S6j+7kNHKLDnK6mgVj+daW/7SkbdaZ7S8kkyKQzsY8hCh0B7RUkUBqkPCZ5+rbTyKCtFOyKyMYw+ebfLQ5QXg==
   dependencies:
-    "@graphql-tools/url-loader" "6.2.3"
+    "@graphql-tools/url-loader" "^6.2.4"
-    "@graphql-tools/utils" "6.2.3"
+    "@graphql-tools/utils" "^6.2.4"
     "@types/http-proxy-agent" "^2.0.2"
     "@types/js-yaml" "^3.12.5"
     "@types/json-stable-stringify" "^1.0.32"
@@ -1322,13 +1322,13 @@
     ajv "^6.12.5"
     bluebird "^3.7.2"
     chalk "^4.1.0"
-    debug "^4.1.1"
+    debug "^4.2.0"
     dotenv "^8.2.0"
     fs-extra "9.0.1"
     graphql-request "^3.1.0"
     http-proxy-agent "^4.0.1"
     https-proxy-agent "^5.0.0"
-    isomorphic-fetch "^2.2.1"
+    isomorphic-fetch "^3.0.0"
     js-yaml "^3.14.0"
     json-stable-stringify "^1.0.1"
     jsonwebtoken "^8.5.1"
@@ -1339,30 +1339,30 @@
     yaml-ast-parser "^0.0.43"
 
 "@graphql-tools/relay-operation-optimizer@^6":
-  version "6.2.3"
+  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/relay-operation-optimizer/-/relay-operation-optimizer-6.2.3.tgz#8f2bda200ae1eab53991f952f1e900c2bcc9b610"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/relay-operation-optimizer/-/relay-operation-optimizer-6.2.4.tgz#1cba2ea7ebc30aa28d1e5461a6079aca173fabd0"
-  integrity sha512-l7pVF1lC1fGNCXTSlPc1esGV5fEqru7HjWrcg5oF/DGIaWi8Drw6GLmexLBfkbmxatKlFkBjrVJ/q3RxSaj+eQ==
+  integrity sha512-lvBCrRupmVpKfwgOmwz7epm28Nwmk9McddG1htRiAPRCg5MB7/52bYP/QgklDQgkRXWsaDEBXfxKyoGkvLvu0w==
   dependencies:
-    "@graphql-tools/utils" "6.2.3"
+    "@graphql-tools/utils" "^6.2.4"
     relay-compiler "10.0.1"
     tslib "~2.0.1"
 
-"@graphql-tools/schema@6.2.3":
+"@graphql-tools/schema@^6.2.4":
-  version "6.2.3"
+  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/schema/-/schema-6.2.3.tgz#7ffc8e5f49d9a81f446fb8db87a6f5d07b1fba8e"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/schema/-/schema-6.2.4.tgz#cc4e9f5cab0f4ec48500e666719d99fc5042481d"
-  integrity sha512-CV5vDfQhXidssLK5hjT55FfwRAvBoGW53lVBl0rbXrbsSX7H9iVHdUf4UaDIlMc6WcnnzOrRiue/khHz3rzDEg==
+  integrity sha512-rh+14lSY1q8IPbEv2J9x8UBFJ5NrDX9W5asXEUlPp+7vraLp/Tiox4GXdgyA92JhwpYco3nTf5Bo2JDMt1KnAQ==
   dependencies:
-    "@graphql-tools/utils" "6.2.3"
+    "@graphql-tools/utils" "^6.2.4"
     tslib "~2.0.1"
 
-"@graphql-tools/url-loader@6.2.3", "@graphql-tools/url-loader@^6", "@graphql-tools/url-loader@^6.0.0":
+"@graphql-tools/url-loader@^6", "@graphql-tools/url-loader@^6.0.0", "@graphql-tools/url-loader@^6.2.4":
-  version "6.2.3"
+  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/url-loader/-/url-loader-6.2.3.tgz#3ecffd85c6efd89d9c260d9c4737aa87d0e5c7e9"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/url-loader/-/url-loader-6.3.0.tgz#75b82bdf0983d3e389c75948a7abff20fa45a630"
-  integrity sha512-cV/VR/lT1bHxwhrZlyG+sevl4zU0zZQHS7+TelTfAdKGrSswEozK98pPjkFP57+6ghitH6XoHUE91hFxtaODsA==
+  integrity sha512-lX6A22Rhbqj8FHmkCVSDflolOGy7UtCJGtGbfRuv8/VqD94JfJLnGVFxC1jODURFdj+yrs/97Wm/ntRcpy7nDA==
   dependencies:
-    "@graphql-tools/delegate" "6.2.3"
+    "@graphql-tools/delegate" "^6.2.4"
-    "@graphql-tools/utils" "6.2.3"
+    "@graphql-tools/utils" "^6.2.4"
-    "@graphql-tools/wrap" "6.2.3"
+    "@graphql-tools/wrap" "^6.2.4"
     "@types/websocket" "1.0.1"
     cross-fetch "3.0.6"
     subscriptions-transport-ws "0.9.18"
@@ -1370,35 +1370,40 @@
     valid-url "1.0.9"
     websocket "1.0.32"
 
-"@graphql-tools/utils@6.2.3", "@graphql-tools/utils@^6", "@graphql-tools/utils@^6.0.0", "@graphql-tools/utils@^6.0.18":
+"@graphql-tools/utils@^6", "@graphql-tools/utils@^6.0.0", "@graphql-tools/utils@^6.0.18", "@graphql-tools/utils@^6.2.4":
-  version "6.2.3"
+  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/utils/-/utils-6.2.3.tgz#235636b47a62f12f3dddbdd30b2986fc03f3a5fa"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/utils/-/utils-6.2.4.tgz#38a2314d2e5e229ad4f78cca44e1199e18d55856"
-  integrity sha512-eOhZy4y23r6AddokBqvFpQybtHvhTyZCc3VFWn8eIqF92vre90UKHbCX6Cf6VBo6i7l0ZwChPPbUzEiHOk+HJQ==
+  integrity sha512-ybgZ9EIJE3JMOtTrTd2VcIpTXtDrn2q6eiYkeYMKRVh3K41+LZa6YnR2zKERTXqTWqhobROwLt4BZbw2O3Aeeg==
   dependencies:
     "@ardatan/aggregate-error" "0.0.6"
     camel-case "4.1.1"
     tslib "~2.0.1"
 
-"@graphql-tools/wrap@6.2.3":
+"@graphql-tools/wrap@^6.2.4":
-  version "6.2.3"
+  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/wrap/-/wrap-6.2.3.tgz#7e27ce75fefe4da4601e2ff4ba22ccf13a130e32"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/wrap/-/wrap-6.2.4.tgz#2709817da6e469753735a9fe038c9e99736b2c57"
-  integrity sha512-bxMXobcuKy8r7jKefQx5VH3FSyXVHKfDWfJ65Kq4oAC2+d7DUlpr3HZ6BWoMhfgUf6s6PPM26Us00TGsUQlAGg==
+  integrity sha512-cyQgpybolF9DjL2QNOvTS1WDCT/epgYoiA8/8b3nwv5xmMBQ6/6nYnZwityCZ7njb7MMyk7HBEDNNlP9qNJDcA==
   dependencies:
-    "@graphql-tools/delegate" "6.2.3"
+    "@graphql-tools/delegate" "^6.2.4"
-    "@graphql-tools/schema" "6.2.3"
+    "@graphql-tools/schema" "^6.2.4"
-    "@graphql-tools/utils" "6.2.3"
+    "@graphql-tools/utils" "^6.2.4"
     is-promise "4.0.0"
     tslib "~2.0.1"
 
-"@next/polyfill-module@9.5.4-canary.20":
+"@next/env@9.5.4-canary.23":
-  version "9.5.4-canary.20"
+  version "9.5.4-canary.23"
-  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.4-canary.20.tgz#1de6f1a5924c6dc1998d8a3e0dbd685f413203bc"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.4-canary.23.tgz#2078ce80a1d9424bab7ec169dcf98b8d684bc845"
-  integrity sha512-9C/RQIiXA62TheJLatVRR6UVOBZVIMZ5J7DJIn2WRxgT2srRI0Ku6C+tgPJekjHp9XjbWRzc0JCKG1mYwkmdtA==
+  integrity sha512-uP9GV9QU+QODyYM9ueV1E4tocrAeAsvT1+x11mbQWYhC4lv9EXA85S5dUpJp4dbv1WwM+qJQaoEe7yL/exCkng==
 
-"@next/react-dev-overlay@9.5.4-canary.20":
+"@next/polyfill-module@9.5.4-canary.23":
-  version "9.5.4-canary.20"
+  version "9.5.4-canary.23"
-  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.4-canary.20.tgz#dd3dcd3898b8684e3768a1018822041e0e304fb7"
+  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.4-canary.23.tgz#5fd54f33889a6f605337168c94b0fbac779dc107"
-  integrity sha512-Q8/iSvIJuLQnF3KQ4lV15wAm2j3ZFgT6Hn6y4+rj6p0DU9bB/Cp4XqDbVh3VIo+yyGNsw0cT/vmcimFe1MSqFg==
+  integrity sha512-nyvVpt8mb2IGoAqsCucrOk88/nU2c+Xv/Iuaxfyex1qv2g1ZK1KUSojLVSIfqOPa5toP1gCgU+xsz8jXVgmpEg==
+
+"@next/react-dev-overlay@9.5.4-canary.23":
+  version "9.5.4-canary.23"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.4-canary.23.tgz#8f856f0b1db2fad6f7a2bdf6b15d487541484bdc"
+  integrity sha512-Ls00yEPvtTkXxipRfprMGJLn9mlmyDozYiIzvZqafkxuZ9KhII/aLu1Xx4W4o6muwEnxPBKW1knsHvWzStsjQA==
   dependencies:
     "@babel/code-frame" "7.10.4"
     ally.js "1.4.1"
@@ -1411,10 +1416,10 @@
     stacktrace-parser "0.1.10"
     strip-ansi "6.0.0"
 
-"@next/react-refresh-utils@9.5.4-canary.20":
+"@next/react-refresh-utils@9.5.4-canary.23":
-  version "9.5.4-canary.20"
+  version "9.5.4-canary.23"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.4-canary.20.tgz#2eac9bbf1cb19303b6e9690ec49c6355ab055e2f"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.4-canary.23.tgz#a0a5c3b10108dc6ef1e17ff68e09bd7dcae76278"
-  integrity sha512-5B9/GLFqnv6/lx/7kySB8EiqB/R/mXWmH53pcbHKVNdXvoD4oi2fT7PWHXA05JQdr0P1cYIPA1ytrrnIf8F1EQ==
+  integrity sha512-9Bne33O1uveH7YRjfX0UCJLfsUcP/lIZMc1JDmTkZuQOIFcTg8wuWOXC2mwQIAVtPZ8S9Lg37vK/c0ngZO9omw==
 
 "@nodelib/fs.scandir@2.1.3":
   version "2.1.3"
@@ -1511,9 +1516,9 @@
     "@types/estree" "*"
 
 "@types/eslint@*":
-  version "7.2.2"
+  version "7.2.3"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.2.2.tgz#c88426b896efeb0b2732a92431ce8aa7ec0dee61"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.2.3.tgz#a3731b7584fe1a847a34e67ac57a556afd9b0c0e"
-  integrity sha512-psWuwNXuKR2e6vMU5d2qH0Kqzrb2Zxwk+uBCF2LsyEph+Nex3lFIPMJXwxfGesdtJM2qtjKoCYsyh76K3x9wLg==
+  integrity sha512-SPBkpC+awgFfyAn4sjt0JBZ3vzACoSp2zhGBJkkrs09EzPqLbxkzaE8kJs3EsRRgkZwWk9zyXT/swvhnJYX8pQ==
   dependencies:
     "@types/estree" "*"
     "@types/json-schema" "*"
@@ -1552,12 +1557,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/node@*":
+"@types/node@*", "@types/node@^14.11.2":
-  version "14.11.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.1.tgz#56af902ad157e763f9ba63d671c39cda3193c835"
-  integrity sha512-oTQgnd0hblfLsJ6BvJzzSL+Inogp3lq9fGgqRkMB/ziKMgEUaFl801OncOzUmalfzt14N0oPHMK47ipl+wbTIw==
-
-"@types/node@^14.11.2":
   version "14.11.2"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.2.tgz#2de1ed6670439387da1c9f549a2ade2b0a799256"
   integrity sha512-jiE3QIxJ8JLNcb1Ps6rDbysDhN4xa8DJJvuC9prr6w+1tIh+QAbYyNF3tyiZNLDBIuBCf4KEcV2UvQm/V60xfA==
@@ -1573,9 +1573,9 @@
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
 "@types/react@^16.9.49":
-  version "16.9.49"
+  version "16.9.50"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.49.tgz#09db021cf8089aba0cdb12a49f8021a69cce4872"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.50.tgz#cb5f2c22d42de33ca1f5efc6a0959feb784a3a2d"
-  integrity sha512-DtLFjSj0OYAdVLBbyjhuV9CdGVHCkHn2R+xr3XkBvK2rS1Y1tkc14XSGjYgm5Fjjr90AxH9tiSzc1pCFMGO06g==
+  integrity sha512-kPx5YsNnKDJejTk1P+lqThwxN2PczrocwsvqXnjvVvKpFescoY62ZiM3TV7dH1T8lFhlHZF+PE5xUyimUwqEGA==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
@@ -2268,13 +2268,13 @@ browserslist@4.13.0:
     escalade "^3.0.1"
     node-releases "^1.1.58"
 
-browserslist@^4.12.0, browserslist@^4.6.4, browserslist@^4.8.5:
+browserslist@^4.12.0, browserslist@^4.14.3, browserslist@^4.6.4, browserslist@^4.8.5:
-  version "4.14.3"
+  version "4.14.5"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.3.tgz#381f9e7f13794b2eb17e1761b4f118e8ae665a53"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.5.tgz#1c751461a102ddc60e40993639b709be7f2c4015"
-  integrity sha512-GcZPC5+YqyPO4SFnz48/B0YaCwS47Q9iPChRGi6t7HhflKBcINzFrJvRfC+jp30sRMKxF+d4EHGs27Z0XP1NaQ==
+  integrity sha512-Z+vsCZIvCBvqLoYkBFTwEYH3v5MCQbsAjp50ERycpOjnPmolg1Gjy4+KaWWpm8QOJt9GHkhdqAl14NpCX73CWA==
   dependencies:
-    caniuse-lite "^1.0.30001131"
+    caniuse-lite "^1.0.30001135"
-    electron-to-chromium "^1.3.570"
+    electron-to-chromium "^1.3.571"
     escalade "^3.1.0"
     node-releases "^1.1.61"
 
@@ -2404,10 +2404,10 @@ camelcase@^6.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
   integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
 
-caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001113, caniuse-lite@^1.0.30001131:
+caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001113, caniuse-lite@^1.0.30001135:
-  version "1.0.30001133"
+  version "1.0.30001141"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001133.tgz#ec564c5495311299eb05245e252d589a84acd95e"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001141.tgz#214a196d81aa938b268fb0cb6d8fab23fdf14378"
-  integrity sha512-s3XAUFaC/ntDb1O3lcw9K8MPeOW7KO3z9+GzAoBxfz1B0VdacXPMKgFUtG4KIsgmnbexmi013s9miVu4h+qMHw==
+  integrity sha512-EHfInJHoQTmlMdVZrEc5gmwPc0zyN/hVufmGHPbVNQwlk7tJfCmQ2ysRZMY2MeleBivALUTyyxXnQjK18XrVpA==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -2964,7 +2964,7 @@ debounce@^1.2.0:
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
   integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
 
-debug@4, debug@^4.1.0, debug@^4.1.1:
+debug@4, debug@^4.1.0, debug@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.2.0.tgz#7f150f93920e94c58f5574c2fd01a3110effe7f1"
   integrity sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==
@@ -3049,6 +3049,11 @@ dependency-graph@^0.9.0:
   resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.9.0.tgz#11aed7e203bc8b00f48356d92db27b265c445318"
   integrity sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==
 
+dequal@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -3118,13 +3123,20 @@ domelementtype@^2.0.1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.2.tgz#f3b6e549201e46f588b59463dd77187131fe6971"
   integrity sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==
 
-domhandler@3.0.0, domhandler@^3.0.0:
+domhandler@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.0.0.tgz#51cd13efca31da95bbb0c5bee3a48300e333b3e9"
   integrity sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw==
   dependencies:
     domelementtype "^2.0.1"
 
+domhandler@^3.0.0, domhandler@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.2.0.tgz#41711ab2f48f42b692537bcf279bc7f1167c83cd"
+  integrity sha512-FnT5pxGpykNI10uuwyqae65Ysw7XBQJKDjDjlHgE/rsNtjr1FyGNVNQCVlM5hwcq9wkyWSqB+L5Z+Qa4khwLuA==
+  dependencies:
+    domelementtype "^2.0.1"
+
 domutils@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.1.0.tgz#7ade3201af43703fde154952e3a868eb4b635f16"
@@ -3135,13 +3147,13 @@ domutils@2.1.0:
     domhandler "^3.0.0"
 
 domutils@^2.0.0:
-  version "2.3.0"
+  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.3.0.tgz#6469c63a3da2de0c3016f3a59e6a969e10705bce"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.4.1.tgz#73f65c09eb17943dd752d4a6e5d07914e52dc541"
-  integrity sha512-xWC75PM3QF6MjE5e58OzwTX0B/rPQnlqH0YyXB/c056RtVJA+eu60da2I/bdnEHzEYC00g8QaZUlAbqOZVbOsw==
+  integrity sha512-AA5r2GD1Dljhxc+k4zD2HYQaDkDPBhTqmqF55wLNlxfhFQlqaYME8Jhmo2nKNBb+CNfPXE8SAjtF6SsZ0cza/w==
   dependencies:
     dom-serializer "^1.0.1"
     domelementtype "^2.0.1"
-    domhandler "^3.0.0"
+    domhandler "^3.2.0"
 
 dot-case@^3.0.3:
   version "3.0.3"
@@ -3176,10 +3188,10 @@ ecdsa-sig-formatter@1.0.11:
   dependencies:
     safe-buffer "^5.0.1"
 
-electron-to-chromium@^1.3.488, electron-to-chromium@^1.3.570:
+electron-to-chromium@^1.3.488, electron-to-chromium@^1.3.571:
-  version "1.3.570"
+  version "1.3.576"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.570.tgz#3f5141cc39b4e3892a276b4889980dabf1d29c7f"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.576.tgz#2e70234484e03d7c7e90310d7d79fd3775379c34"
-  integrity sha512-Y6OCoVQgFQBP5py6A/06+yWxUZHDlNr/gNDGatjH8AZqXl8X0tE4LfjLJsXGz/JmWJz8a6K7bR1k+QzZ+k//fg==
+  integrity sha512-uSEI0XZ//5ic+0NdOqlxp0liCD44ck20OAGyLMSymIWTEAtHKVJi6JM18acOnRgUgX7Q65QqnI+sNncNvIy8ew==
 
 elegant-spinner@^1.0.1:
   version "1.0.1"
@@ -3228,10 +3240,10 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^5.0.0:
+enhanced-resolve@^5.2.0:
-  version "5.0.0"
+  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.0.0.tgz#4737e6ebd4f2fd13fe23f4cec9d02146afc2c527"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.2.0.tgz#3db3307a608f236f33aeea79303d32915792cbab"
-  integrity sha512-6F037vvK16tgLlRgUx6ZEZISMysNvnnk09SILFrx3bNa1UsSLpIXFzWOmtiDxf1ISPAG6/wHBI61PEkeuTLVNA==
+  integrity sha512-NZlGLl8DxmZoq0uqPPtJfsCAir68uR047+Udsh1FH4+5ydGQdMurn/A430A1BtxASVmMEuS7/XiJ5OxJ9apAzQ==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.0.0"
@@ -3249,37 +3261,37 @@ error-ex@^1.3.1:
     is-arrayish "^0.2.1"
 
 es-abstract@^1.17.0-next.1, es-abstract@^1.17.5:
-  version "1.17.6"
+  version "1.17.7"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
-  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
+  integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
   dependencies:
     es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
     has "^1.0.3"
     has-symbols "^1.0.1"
-    is-callable "^1.2.0"
+    is-callable "^1.2.2"
-    is-regex "^1.1.0"
+    is-regex "^1.1.1"
-    object-inspect "^1.7.0"
+    object-inspect "^1.8.0"
     object-keys "^1.1.1"
-    object.assign "^4.1.0"
+    object.assign "^4.1.1"
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
 es-abstract@^1.18.0-next.0:
-  version "1.18.0-next.0"
+  version "1.18.0-next.1"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.0.tgz#b302834927e624d8e5837ed48224291f2c66e6fc"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
-  integrity sha512-elZXTZXKn51hUBdJjSZGYRujuzilgXo8vSPQzjGYXLvSlGiCo8VO8ZGV3kjo9a0WNJJ57hENagwbtlRuHuzkcQ==
+  integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
   dependencies:
     es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
     has "^1.0.3"
     has-symbols "^1.0.1"
-    is-callable "^1.2.0"
+    is-callable "^1.2.2"
     is-negative-zero "^2.0.0"
     is-regex "^1.1.1"
     object-inspect "^1.8.0"
     object-keys "^1.1.1"
-    object.assign "^4.1.0"
+    object.assign "^4.1.1"
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
@@ -3464,11 +3476,6 @@ 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.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -3906,12 +3913,7 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-he@1.1.1:
+he@1.2.0, he@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
-  integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=
-
-he@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -4152,10 +4154,10 @@ is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-callable@^1.1.4, is-callable@^1.2.0:
+is-callable@^1.1.4, is-callable@^1.2.2:
-  version "1.2.1"
+  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.1.tgz#4d1e21a4f437509d25ce55f8184350771421c96d"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9"
-  integrity sha512-wliAfSzx6V+6WfMOmus1xy0XvSgf/dlStkvTfq7F0g4bOIW0PSUbnyse3NhDwdyYS1ozfUtAAySqTws3z9Eqgg==
+  integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==
 
 is-data-descriptor@^0.1.4:
   version "0.1.4"
@@ -4283,7 +4285,7 @@ is-promise@^2.1.0:
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
   integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
 
-is-regex@^1.1.0, is-regex@^1.1.1:
+is-regex@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
   integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
@@ -4343,7 +4345,7 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
-isomorphic-fetch@^2.1.1, isomorphic-fetch@^2.2.1:
+isomorphic-fetch@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
   integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
@@ -4351,6 +4353,14 @@ isomorphic-fetch@^2.1.1, isomorphic-fetch@^2.2.1:
     node-fetch "^1.0.1"
     whatwg-fetch ">=0.10.0"
 
+isomorphic-fetch@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-3.0.0.tgz#0267b005049046d2421207215d45d6a262b8b8b4"
+  integrity sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA==
+  dependencies:
+    node-fetch "^2.6.1"
+    whatwg-fetch "^3.4.1"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -4633,10 +4643,10 @@ listr@^0.14.3:
     p-map "^2.0.0"
     rxjs "^6.3.3"
 
-loader-runner@^4.0.0:
+loader-runner@^4.1.0:
-  version "4.0.0"
+  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.0.0.tgz#02abcfd9fe6ff7a5aeb3547464746c4dc6ba333d"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.1.0.tgz#f70bc0c29edbabdf2043e7ee73ccc3fe1c96b42d"
-  integrity sha512-Rqf48ufrr48gFjnaqss04QesoXB7VenbpFFIV/0yOKGnpbejrVlOPqTsoX42FG5goXM5Ixekcs4DqDzHOX2z7Q==
+  integrity sha512-oR4lB4WvwFoC70ocraKhn5nkKSs23t57h9udUgw8o0iH8hMXeEoRuUgfcvgUwAJ1ZpRqBvcou4N2SMvM1DwMrA==
 
 loader-utils@1.2.3:
   version "1.2.3"
@@ -5030,9 +5040,9 @@ next-tick@~1.0.0:
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
 next@^9.5.4-canary.20:
-  version "9.5.4-canary.20"
+  version "9.5.4-canary.23"
-  resolved "https://registry.yarnpkg.com/next/-/next-9.5.4-canary.20.tgz#041ae6c400b8ab7b7aabba3d66bdcda428f241c3"
+  resolved "https://registry.yarnpkg.com/next/-/next-9.5.4-canary.23.tgz#ce0e7b9e284b5f9b718610ff5363827d3dfecd44"
-  integrity sha512-rQvdk3NDYyrB1KvQv2SzAoZlcpOJV2GA93l7BVbByp0l006d3dkFDML7XKEqqtYcvtDlzdKS/V9hde0psKFkAg==
+  integrity sha512-uNMIonQUZr5uZvmuMJ1Pq2akfzEQa60mQPVkMUUe12eHcE3efsA1M3W+SZfcSnSkCna53qU9Km1pNdGbVLe1Cg==
   dependencies:
     "@ampproject/toolbox-optimizer" "2.6.0"
     "@babel/code-frame" "7.10.4"
@@ -5052,9 +5062,10 @@ next@^9.5.4-canary.20:
     "@babel/preset-typescript" "7.10.4"
     "@babel/runtime" "7.11.2"
     "@babel/types" "7.11.5"
-    "@next/polyfill-module" "9.5.4-canary.20"
+    "@next/env" "9.5.4-canary.23"
-    "@next/react-dev-overlay" "9.5.4-canary.20"
+    "@next/polyfill-module" "9.5.4-canary.23"
-    "@next/react-refresh-utils" "9.5.4-canary.20"
+    "@next/react-dev-overlay" "9.5.4-canary.23"
+    "@next/react-refresh-utils" "9.5.4-canary.23"
     ast-types "0.13.2"
     babel-plugin-transform-define "2.0.0"
     babel-plugin-transform-react-remove-prop-types "0.4.24"
@@ -5113,7 +5124,7 @@ node-fetch@2.6.0:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
   integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
 
-node-fetch@2.6.1:
+node-fetch@2.6.1, node-fetch@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
@@ -5132,11 +5143,11 @@ node-gyp-build@~3.7.0:
   integrity sha512-L/Eg02Epx6Si2NXmedx+Okg+4UHqmaf3TNcxd50SF9NQGcJaON3AtU++kax69XV7YWz4tUspqZSAsVofhFKG2w==
 
 node-html-parser@^1.2.19:
-  version "1.2.20"
+  version "1.2.21"
-  resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-1.2.20.tgz#37e9ebc627dbe3ff446eea4ac93e3d254b7c6ee4"
+  resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-1.2.21.tgz#93b074d877007c7148d594968a642cd65d254daa"
-  integrity sha512-1fUpYjAducDrrBSE0etRUV1tM+wSFTudmrslMXuk35wL/L29E7e1CLQn4CNzFLnqtYpmDlWhkD6VUloyHA0dwA==
+  integrity sha512-6vDhgen6J332syN5HUmeT4FfBG7m6bFRrPN+FXY8Am7FGuVpsIxTASVbeoO5PF2IHbX2s+WEIudb1hgxOjllNQ==
   dependencies:
-    he "1.1.1"
+    he "1.2.0"
 
 node-int64@^0.4.0:
   version "0.4.0"
@@ -5219,7 +5230,7 @@ object-hash@^2.0.3:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.0.3.tgz#d12db044e03cd2ca3d77c0570d87225b02e1e6ea"
   integrity sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg==
 
-object-inspect@^1.7.0, object-inspect@^1.8.0:
+object-inspect@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
@@ -5241,7 +5252,7 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.1.0:
+object.assign@^4.1.0, object.assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.1.tgz#303867a666cdd41936ecdedfb1f8f3e32a478cdd"
   integrity sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA==
@@ -5838,17 +5849,7 @@ postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.3.tgz#766d77728728817cc140fa1ac6da5e77f9fada98"
-  integrity sha512-0ClFaY4X1ra21LRqbW6y3rUbWcxnSVkDFG57R7Nxus9J9myPFlv+jYDMohzpkBx0RrjjiqjtycpchQ+PLGmZ9w==
-  dependencies:
-    cssesc "^3.0.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-    util-deprecate "^1.0.2"
-
-postcss-selector-parser@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
   integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==
@@ -5905,9 +5906,9 @@ postcss@^6.0.9:
     supports-color "^5.4.0"
 
 postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.18, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
-  version "7.0.34"
+  version "7.0.35"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.34.tgz#f2baf57c36010df7de4009940f21532c16d65c20"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
-  integrity sha512-H/7V2VeNScX9KE83GDrDZNiGT1m2H+UTnlinIzhjlLX9hfMUn1mHNnGeX81a1c8JSBdBvqk7c2ZOG6ZPn5itGw==
+  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
@@ -5918,6 +5919,11 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
+prettier@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.1.2.tgz#3050700dae2e4c8b67c4c3f666cdb8af405e1ce5"
+  integrity sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==
+
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
@@ -6579,7 +6585,7 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-support@~0.5.12:
+source-map-support@~0.5.12, source-map-support@~0.5.19:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
   integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
@@ -6597,7 +6603,7 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@0.7.3:
+source-map@0.7.3, source-map@~0.7.2:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
@@ -6833,11 +6839,11 @@ supports-color@^7.0.0, supports-color@^7.1.0:
     has-flag "^4.0.0"
 
 swr@^0.3.3:
-  version "0.3.3"
+  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-0.3.3.tgz#8e820360e3fece26df6f30ca09c478f70bf1f880"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-0.3.5.tgz#848a80e7b23b96d7221468555d8688d3efdecbc7"
-  integrity sha512-UxjfbvLdk4CzdchQBKmthUc1rO7KaCXdNL69oW7V/I2BOMv905rsL+kJdpO19OYwOPOpWZPvffTEE7yACwXc8w==
+  integrity sha512-sZNed7JBEnFC42+XFWJ+aYGGVg5D3qNyISZOke3oL/gM1UNm0tsj9mbhTPT99SV9DzbKbT1NFTTRandPdhvpUA==
   dependencies:
-    fast-deep-equal "2.0.1"
+    dequal "2.0.2"
 
 symbol-observable@^1.0.4, symbol-observable@^1.1.0:
   version "1.2.0"
@@ -6914,13 +6920,13 @@ terser@4.8.0:
     source-map-support "~0.5.12"
 
 terser@^5.3.2:
-  version "5.3.2"
+  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.3.2.tgz#f4bea90eb92945b2a028ceef79181b9bb586e7af"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.3.3.tgz#2592a1cf079df55101fe2b2cb2330f951863860b"
-  integrity sha512-H67sydwBz5jCUA32ZRL319ULu+Su1cAoZnnc+lXnenGRYWyLE3Scgkt8mNoAsMx0h5kdo758zdoS0LG9rYZXDQ==
+  integrity sha512-vRQDIlD+2Pg8YMwVK9kMM3yGylG95EIwzBai1Bw7Ot4OBfn3VP1TZn3EWx4ep2jERN/AmnVaTiGuelZSN7ds/A==
   dependencies:
     commander "^2.20.0"
-    source-map "~0.6.1"
+    source-map "~0.7.2"
-    source-map-support "~0.5.12"
+    source-map-support "~0.5.19"
 
 through@^2.3.6:
   version "2.3.8"
@@ -7275,18 +7281,18 @@ webpack-sources@1.4.3, webpack-sources@^1.4.3:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack-sources@^2.0.0:
+webpack-sources@^2.0.1:
-  version "2.0.0"
+  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-2.0.0.tgz#602d4bc7ff2e630ceb753a09ef49f260fa4ae7f0"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-2.0.1.tgz#1467f6e692ddce91e88b8044c44347b1087bbd4f"
-  integrity sha512-CpCkDjEKa5vYVRDFDRABBkBomz+82lz9bpXViN1LBc8L/WDXvSyELKcBvBnTeDEiRfMJCGAFG9+04406PLSsIA==
+  integrity sha512-A9oYz7ANQBK5EN19rUXbvNgfdfZf5U2gP0769OXsj9CvYkCR6OHOsd6OKyEy4H38GGxpsQPKIL83NC64QY6Xmw==
   dependencies:
     source-list-map "^2.0.1"
     source-map "^0.6.1"
 
 webpack@4.44.1, webpack@^5.0.0-beta.30:
-  version "5.0.0-rc.0"
+  version "5.0.0-rc.3"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.0.0-rc.0.tgz#166f6d9cd65912ff021695d82256b2f1e6e858ee"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.0.0-rc.3.tgz#534afa7ef8b54c62ea393492dfa2e05b4491d773"
-  integrity sha512-tHUFu4vaZxJuyKYf8FKkDZmxnf0txy6twNewxUlviFo+GYjFoGW3szD71cOw0NtJBiyGAQ9zLGVzfb2pXBSKVA==
+  integrity sha512-z07btJiDKZjtbHz1d/jbWBw+cV+ZEAIDZx/rHGJIj2I1jC/zWg0TxH0wg33v9GSVGTkVo48KcQ4AM5QnpN0yYQ==
   dependencies:
     "@types/eslint-scope" "^3.7.0"
     "@types/estree" "^0.0.45"
@@ -7295,14 +7301,15 @@ webpack@4.44.1, webpack@^5.0.0-beta.30:
     "@webassemblyjs/wasm-edit" "1.9.0"
     "@webassemblyjs/wasm-parser" "1.9.0"
     acorn "^7.4.0"
+    browserslist "^4.14.3"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.0.0"
+    enhanced-resolve "^5.2.0"
     eslint-scope "^5.1.0"
     events "^3.2.0"
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.2.4"
     json-parse-better-errors "^1.0.2"
-    loader-runner "^4.0.0"
+    loader-runner "^4.1.0"
     mime-types "^2.1.27"
     neo-async "^2.6.2"
     pkg-dir "^4.2.0"
@@ -7310,7 +7317,7 @@ webpack@4.44.1, webpack@^5.0.0-beta.30:
     tapable "^2.0.0"
     terser-webpack-plugin "^4.1.0"
     watchpack "^2.0.0"
-    webpack-sources "^2.0.0"
+    webpack-sources "^2.0.1"
 
 websocket@1.0.32:
   version "1.0.32"
@@ -7324,7 +7331,7 @@ websocket@1.0.32:
     utf-8-validate "^5.0.2"
     yaeti "^0.0.6"
 
-whatwg-fetch@>=0.10.0:
+whatwg-fetch@>=0.10.0, whatwg-fetch@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.4.1.tgz#e5f871572d6879663fa5674c8f833f15a8425ab3"
   integrity sha512-sofZVzE1wKwO+EYPbWfiwzaKovWiZXf4coEzjGP9b2GBVgQRLQUZ2QcuPpQExGDAW5GItpEm6Tl4OU5mywnAoQ==
@@ -7392,9 +7399,9 @@ y18n@^4.0.0:
   integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
 y18n@^5.0.1:
-  version "5.0.1"
+  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.1.tgz#1ad2a7eddfa8bce7caa2e1f6b5da96c39d99d571"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.2.tgz#48218df5da2731b4403115c39a1af709c873f829"
-  integrity sha512-/jJ831jEs4vGDbYPQp4yGKDYPSCCEQ45uZWJHE1AoYBzqdZi8+LDWas0z4HrmJXmKdpFsTiowSHXdxyFhpmdMg==
+  integrity sha512-CkwaeZw6dQgqgPGeTWKMXCRmMcBgETFlTml1+ZOO+q7kGst8NREJ+eWwFNPVUQ4QGdAaklbqCZHH6Zuep1RjiA==
 
 yaeti@^0.0.6:
   version "0.0.6"
@@ -7425,9 +7432,9 @@ yargs-parser@^18.1.2:
     decamelize "^1.2.0"
 
 yargs-parser@^20.0.0:
-  version "20.2.0"
+  version "20.2.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.0.tgz#944791ca2be2e08ddadd3d87e9de4c6484338605"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.1.tgz#28f3773c546cdd8a69ddae68116b48a5da328e77"
-  integrity sha512-2agPoRFPoIcFzOIp6656gcvsg2ohtscpw2OINr/q46+Sq41xz2OYLqx5HRHabmFU1OARIPAYH5uteICE7mn/5A==
+  integrity sha512-yYsjuSkjbLMBp16eaOt7/siKTjNVjMm3SoJnIg3sEh/JsvqVVDyjRKmaJV4cl+lNIgq6QEco2i3gDebJl7/vLA==
 
 yargs@^15.3.1:
   version "15.4.1"