From 1d3fada54ea64b5f375769eaa8c3a4ca0ba6a33d Mon Sep 17 00:00:00 2001
From: yusmardianto <yyusmar2@gmail.com>
Date: Wed, 24 Nov 2021 10:59:46 +0700
Subject: [PATCH] add checkout & review page

---
 components/Home/MainBanner.js |   4 +-
 package.json                  |   3 +
 pages/checkout.js             | 235 +++++++++++++++++-------------------------
 pages/review.js               | 161 +++++++++++++++++++++++++++++
 yarn.lock                     | 228 ++++++++++++++++++++++++++++++++++++++--
 5 files changed, 480 insertions(+), 151 deletions(-)
 create mode 100644 pages/review.js

diff --git a/components/Home/MainBanner.js b/components/Home/MainBanner.js
index 73e80f3..3984c1d 100644
--- a/components/Home/MainBanner.js
+++ b/components/Home/MainBanner.js
@@ -26,12 +26,12 @@ const MainBanner = () => {
 
 									<div className="content">
 										<h3>
-											<Link href="/service-details">
+											<Link href="/checkout">
 												<a>Double Room<br/>Rp.180.000</a>
 											</Link>
 										</h3>
 
-										<Link href="/service-details">
+										<Link href="/checkout">
 											<a className="read-more-btn">
 												Booking Now <Icon.PlusCircle />
 											</a>
diff --git a/package.json b/package.json
index d4ba9fd..74f8c62 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,9 @@
     },
     "author": "EnvyTheme.com",
     "dependencies": {
+        "@emotion/react": "^11.6.0",
+        "@emotion/styled": "^11.6.0",
+        "@mui/material": "^5.1.1",
         "animate.css": "^4.1.1",
         "axios": "^0.21.1",
         "dotenv": "^10.0.0",
diff --git a/pages/checkout.js b/pages/checkout.js
index cc9eeb8..73f0314 100644
--- a/pages/checkout.js
+++ b/pages/checkout.js
@@ -1,146 +1,175 @@
-import React from 'react';
-import Navbar from "@/components/_App/Navbar";
+import React, { useState } from 'react';
+import Navbar from "@/components/_App/NavbarHome";
 import Footer from "@/components/_App/Footer";
-import PageBanner from '@/components/Common/PageBanner'; 
+import PageBanner from '@/components/Common/PageBanner';
 import * as Icon from 'react-feather';
- 
+
 const Checkout = () => {
     return (
         <>
-            <Navbar />
-
-            <PageBanner pageTitle="Checkout" />
+            <Navbar /><br /><br />
 
             <div className="checkout-area ptb-80">
                 <div className="container">
                     <div className="row">
                         <div className="col-lg-12 col-md-12">
-                            <div className="user-actions">
-                                <Icon.Edit />
-                                <span>Returning customer? <a href="#">Click here to login</a></span>
+                            <div className="user-actions" style={{backgroundColor:"#eb1928"}}>
+                                <h4 style={{ color: 'white' }}><Icon.Edit style={{ color: 'white' }} width="50px" /> Important Notice</h4><br/>
+                                <p style={{ color: 'white' }}>
+                                    <b>As COVID-19 situation evolves, make sure the cancellation policy suits your needs.</b><br/>
+                                    In reference to the circular letter by the government regarding the spread control of Covid-19, please ensure that you are aware of your booking's refund, cancellation, and reschedule policy.
+                                </p>
                             </div>
                         </div>
                     </div>
 
                     <form>
                         <div className="row">
-                            <div className="col-lg-6 col-md-12">
+                            <div className="col-lg-6 col-md-6">
                                 <div className="billing-details">
-                                    <h3 className="title">Billing Details</h3>
+                                    <h3 className="title">Masukan Informasi Pemesan</h3>
 
                                     <div className="row">
                                         <div className="col-lg-12 col-md-12">
                                             <div className="form-group">
-                                                <label>Country <span className="required">*</span></label>
-                                            
-                                                <div className="select-box">
-                                                    <select className="form-select">
-                                                        <option value="1">United Arab Emirates</option>
-                                                        <option value="2">China</option>
-                                                        <option value="3">United Kingdom</option>
-                                                        <option value="4">Germany</option>
-                                                        <option value="5">France</option>
-                                                        <option value="6">Japan</option>
-                                                    </select>
-                                                </div>
+                                                <label>Nama Lengkap <span className="required">*</span></label>
+                                                <input type="text" className="form-control" />
                                             </div>
                                         </div>
 
                                         <div className="col-lg-6 col-md-6">
                                             <div className="form-group">
-                                                <label>First Name <span className="required">*</span></label>
-                                                <input type="text" className="form-control" />
+                                                <label>Alamat Email <span className="required">*</span></label>
+                                                <input type="email" className="form-control" />
                                             </div>
                                         </div>
 
                                         <div className="col-lg-6 col-md-6">
                                             <div className="form-group">
-                                                <label>Last Name <span className="required">*</span></label>
-                                                <input type="text" className="form-control" />
+                                                <label>Masukan Ulang Alamat Email <span className="required">*</span></label>
+                                                <input type="email" className="form-control" />
                                             </div>
                                         </div>
 
-                                        <div className="col-lg-12 col-md-12">
+                                        <div className="col-lg-6 col-md-6">
                                             <div className="form-group">
-                                                <label>Company Name</label>
+                                                <label>Nomer Telepon <span className="required">*</span></label>
                                                 <input type="text" className="form-control" />
                                             </div>
                                         </div>
 
-                                        <div className="col-lg-12 col-md-6">
+                                        <div className="col-lg-6 col-md-6">
                                             <div className="form-group">
-                                                <label>Address <span className="required">*</span></label>
-                                                <input type="text" className="form-control" />
+                                                <label>Saya Memesan Untuk ? <span className="required">*</span></label>
+
+                                                <div className="select-box">
+                                                    <select className="form-select">
+                                                        <option value="1">Saya Sendiri</option>
+                                                        <option value="2">Orang Lain</option>
+                                                    </select>
+                                                </div>
                                             </div>
                                         </div>
+                                    </div>
+                                </div>
+                            </div>
 
-                                        <div className="col-lg-12 col-md-6">
-                                            <div className="form-group">
-                                                <label>Town / City <span className="required">*</span></label>
-                                                <input type="text" className="form-control" />
+                            <div className="col-lg-6 col-md-6">
+                                <div className="billing-details">
+                                    <div className="row">
+                                        <div className="col-lg-4 col-md-6">
+                                            <img style={{ borderRadius:"10px" }} src="https://origin.pegipegi.com/jalan/images/pictM/Y4/Y972594/Y972594002.jpg" height="120px" />
+                                        </div>
+                                        <div className="col-lg-8 col-md-6">
+                                            <h3 className="title">Catania Double Room</h3>
+                                            <div className="row">
+                                                <div className="col-lg-3 col-md-6">
+                                                    <p>Fasilitas : </p>
+                                                </div>
+                                                <div className="col-lg-4 col-md-6">
+                                                    <p><Icon.Wifi /> Free Wifi</p>
+                                                </div>
+                                                <div className="col-lg-4 col-md-6">
+                                                    <p><Icon.Phone /> Telepon</p>
+                                                </div>
                                             </div>
                                         </div>
-
+                                    </div><br />
+                                    <div className="row">
                                         <div className="col-lg-6 col-md-6">
                                             <div className="form-group">
-                                                <label>State / County <span className="required">*</span></label>
-                                                <input type="text" className="form-control" />
+                                                <label>Check In<span className="required">*</span></label>
+                                                <input type="date" className="form-control" />
                                             </div>
                                         </div>
 
                                         <div className="col-lg-6 col-md-6">
                                             <div className="form-group">
-                                                <label>Postcode / Zip <span className="required">*</span></label>
-                                                <input type="text" className="form-control" />
+                                                <label>Check Out <span className="required">*</span></label>
+                                                <input type="date" className="form-control" />
                                             </div>
                                         </div>
 
-                                        <div className="col-lg-6 col-md-6">
+                                        <div className="col-lg-12 col-md-6">
                                             <div className="form-group">
-                                                <label>Email Address <span className="required">*</span></label>
-                                                <input type="email" className="form-control" />
+                                                <label>Jumlah Pengunjung <span className="required">*</span></label>
+
+                                                <div className="select-box">
+                                                    <select className="form-select">
+                                                        <option value="1">1 Orang</option>
+                                                        <option value="2">2 Orang</option>
+                                                    </select>
+                                                </div>
                                             </div>
                                         </div>
+                                    </div>
+                                </div>
+                            </div>
 
-                                        <div className="col-lg-6 col-md-6">
-                                            <div className="form-group">
-                                                <label>Phone <span className="required">*</span></label>
-                                                <input type="text" className="form-control" />
+                            <div className="col-lg-6 col-md-6" style={{ marginTop: "50px" }}>
+                                <div className="billing-details">
+                                    <h3 className="title">Permintaan Khusus Untuk Kamar</h3>
+
+                                    <div className="row">
+                                        <div className="col-lg-4 col-md-4">
+                                            <div className="form-check">
+                                                <input type="checkbox" className="form-check-input" id="1-large-bed" />
+                                                <label className="form-check-label" htmlFor="1-large-bed">1 Kasur Besar</label>
                                             </div>
                                         </div>
 
-                                        <div className="col-lg-12 col-md-12">
+                                        <div className="col-lg-4 col-md-4">
                                             <div className="form-check">
-                                                <input type="checkbox" className="form-check-input" id="create-an-account" />
-                                                <label className="form-check-label" htmlFor="create-an-account">Create an account?</label>
+                                                <input type="checkbox" className="form-check-input" id="2-single-bed" />
+                                                <label className="form-check-label" htmlFor="2-single-bed">2 Kasur Single</label>
                                             </div>
                                         </div>
 
-                                        <div className="col-lg-12 col-md-12">
+                                        <div className="col-lg-4 col-md-4">
                                             <div className="form-check">
-                                                <input type="checkbox" className="form-check-input" id="ship-different-address" />
-                                                <label className="form-check-label" htmlFor="ship-different-address">Ship to a different address?</label>
+                                                <input type="checkbox" className="form-check-input" id="extra-bed" />
+                                                <label className="form-check-label" htmlFor="extra-bed">Extra Kasur</label>
                                             </div>
                                         </div>
 
                                         <div className="col-lg-12 col-md-12">
                                             <div className="form-group">
-                                                <textarea name="notes" id="notes" cols="30" rows="4" placeholder="Order Notes" className="form-control"></textarea>
+                                                <textarea name="notes" id="notes" cols="30" rows="4" placeholder="Catatan" className="form-control"></textarea>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
 
-                            <div className="col-lg-6 col-md-12">
+                            <div className="col-lg-6 col-md-6" style={{ marginTop: "50px" }}>
                                 <div className="order-details">
-                                    <h3 className="title">Your Order</h3>
+                                    <h3 className="title">Total Pesanan</h3>
 
                                     <div className="order-table table-responsive">
                                         <table className="table table-bordered">
                                             <thead>
                                                 <tr>
-                                                    <th scope="col">Product Name</th>
+                                                    <th scope="col">Jenis Kamar</th>
                                                     <th scope="col">Total</th>
                                                 </tr>
                                             </thead>
@@ -148,114 +177,44 @@ const Checkout = () => {
                                             <tbody>
                                                 <tr>
                                                     <td className="product-name">
-                                                        <a href="#">Smart Watch</a>
+                                                        <a href="#">Double Room</a>
                                                     </td>
 
                                                     <td className="product-total">
-                                                        <span className="subtotal-amount">$30.00</span>
+                                                        <span className="subtotal-amount">Rp.180.000</span>
                                                     </td>
                                                 </tr>
                                                 <tr>
                                                     <td className="product-name">
-                                                        <a href="#">TV</a>
+                                                        <a href="#">Extra Bed</a>
                                                     </td>
 
                                                     <td className="product-total">
-                                                        <span className="subtotal-amount">$30.00</span>
+                                                        <span className="subtotal-amount">Rp.50.000</span>
                                                     </td>
                                                 </tr>
                                                 <tr>
                                                     <td className="product-name">
-                                                        <a href="#">Book</a>
+                                                        <a href="#">Pajak 10%</a>
                                                     </td>
 
                                                     <td className="product-total">
-                                                        <span className="subtotal-amount">$30.00</span>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="product-name">
-                                                        <a href="#">Smart Watch</a>
-                                                    </td>
-
-                                                    <td className="product-total">
-                                                        <span className="subtotal-amount">$30.00</span>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="product-name">
-                                                        <a href="#">TV</a>
-                                                    </td>
-
-                                                    <td className="product-total">
-                                                        <span className="subtotal-amount">$30.00</span>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="product-name">
-                                                        <a href="#">Book</a>
-                                                    </td>
-
-                                                    <td className="product-total">
-                                                        <span className="subtotal-amount">$30.00</span>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="order-subtotal">
-                                                        <span>Cart Subtotal</span>
-                                                    </td>
-
-                                                    <td className="order-subtotal-price">
-                                                        <span className="order-subtotal-amount">$210.00</span>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="order-shipping">
-                                                        <span>Shipping</span>
-                                                    </td>
-
-                                                    <td className="shipping-price">
-                                                        <span>$5.00</span>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="total-price">
-                                                        <span>Order Total</span>
-                                                    </td>
-
-                                                    <td className="product-subtotal">
-                                                        <span className="subtotal-amount">$215.00</span>
+                                                        <span className="subtotal-amount">Rp.23.000</span>
                                                     </td>
                                                 </tr>
                                             </tbody>
                                         </table>
                                     </div>
 
-                                    <div className="payment-method">
-                                        <p>
-                                            <input type="radio" id="direct-bank-transfer" name="radio-group" defaultChecked />
-                                            <label htmlFor="direct-bank-transfer">Direct Bank Transfer</label>
-
-                                            Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order will not be shipped until the funds have cleared in our account.
-                                        </p>
-                                        <p>
-                                            <input type="radio" id="paypal" name="radio-group" />
-                                            <label htmlFor="paypal">PayPal</label>
-                                        </p>
-                                        <p>
-                                            <input type="radio" id="cash-on-delivery" name="radio-group" />
-                                            <label htmlFor="cash-on-delivery">Cash on Delivery</label>
-                                        </p>
-                                    </div>
-
-                                    <a href="#" className="btn btn-primary order-btn">Place Order</a>
+                                    <a href="/review" className="btn btn-primary order-btn">Book</a>
                                 </div>
                             </div>
+
                         </div>
                     </form>
                 </div>
             </div>
- 
+
             <Footer />
         </>
     )
diff --git a/pages/review.js b/pages/review.js
new file mode 100644
index 0000000..02406c3
--- /dev/null
+++ b/pages/review.js
@@ -0,0 +1,161 @@
+import React, { useState } from 'react';
+import Navbar from "@/components/_App/NavbarHome";
+import Footer from "@/components/_App/Footer";
+import PageBanner from '@/components/Common/PageBanner';
+import * as Icon from 'react-feather';
+
+const Checkout = () => {
+    return (
+        <>
+            <Navbar /><br /><br />
+
+            <div className="checkout-area ptb-80">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-12 col-md-12">
+                            <div className="user-actions">
+                                <h4><Icon.Edit width="50px" /> Mohon Periksa Ulang Pesanan Anda</h4><br />
+                            </div>
+                        </div>
+                    </div>
+
+                    <form>
+                        <div className="row">
+                            <div className="col-lg-12 col-md-6">
+                                <div className="billing-details">
+                                    <div className="row">
+                                        <div className="col-lg-4 col-md-6">
+                                            <img style={{ borderRadius: "10px" }} src="https://origin.pegipegi.com/jalan/images/pictM/Y4/Y972594/Y972594002.jpg" width="100%" />
+                                        </div>
+                                        <div className="col-lg-6 col-md-6">
+                                            <h2 className="title">Catania Double Room</h2>
+                                            <div className="row">
+                                                <div className="col-lg-3 col-md-6">
+                                                    <p>Fasilitas : </p>
+                                                </div>
+                                            </div>
+                                            <div className="row">
+                                                <div className="col-lg-3 col-md-6">
+                                                    <p><Icon.Wifi /> Free Wifi</p>
+                                                </div>
+                                                <div className="col-lg-3 col-md-6">
+                                                    <p><Icon.Phone /> Telepon</p>
+                                                </div>
+                                            </div><br /><br />
+                                            <div className="row">
+                                                <div className="col-lg-3 col-md-6">
+                                                    <h6>Check In </h6>
+                                                    <h6><p>25 Nov 2021</p></h6>
+                                                    <h6><p>From 14:00</p></h6>
+                                                </div>
+                                                <div className="col-lg-3 col-md-6">
+                                                    <h6>Check Out </h6>
+                                                    <h6><p>25 Nov 2021</p></h6>
+                                                    <h6><p>Before 14:00</p></h6>
+                                                </div>
+                                                <div className="col-lg-3 col-md-6">
+                                                    <h6>Durasi Hari </h6>
+                                                    <h6><p>1 Hari</p></h6>
+                                                </div>
+                                                <div className="col-lg-2 col-md-6">
+                                                    <h6>Pengunjung </h6>
+                                                    <h6><p>1 Orang</p></h6>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div><br />
+                                </div>
+                            </div>
+
+                            <div className="col-lg-12 col-md-6" style={{ marginTop: "50px" }}>
+                                <div className="billing-details">
+                                    <h3 className="title">Informasi Pemesan</h3>
+
+                                    <div className="row">
+                                        <div className="col-lg-7 col-md-4">
+                                            <div className="row">
+                                                <div className="col-lg-12 col-md-4">
+                                                    <h6>Nama Pemesan : Yusmardianto</h6>
+                                                </div>
+                                                <div className="col-lg-12 col-md-4">
+                                                    <h6>Nomer HP Pemesan : 087797315685 </h6>
+                                                </div>
+                                                <div className="col-lg-12 col-md-4">
+                                                    <h6>Alamat Email Pemesan : yusmardianto@thamrin.co.id</h6>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div className="col-lg-5 col-md-4">
+                                            <div className="row">
+                                                <div className="col-lg-12 col-md-4">
+                                                    <h6>Pesan Khusus : Yusmardianto</h6>
+                                                </div>
+                                                <div className="col-lg-7 col-md-4">
+                                                    <h6> </h6>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="col-lg-12 col-md-6" style={{ marginTop: "50px" }}>
+                                <div className="order-details">
+                                    <h3 className="title">Total Pesanan</h3>
+
+                                    <div className="order-table table-responsive">
+                                        <table className="table table-bordered">
+                                            <thead>
+                                                <tr>
+                                                    <th scope="col">Jenis Kamar</th>
+                                                    <th scope="col">Total</th>
+                                                </tr>
+                                            </thead>
+
+                                            <tbody>
+                                                <tr>
+                                                    <td className="product-name">
+                                                        <a href="#">Double Room</a>
+                                                    </td>
+
+                                                    <td className="product-total">
+                                                        <span className="subtotal-amount">Rp.180.000</span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td className="product-name">
+                                                        <a href="#">Extra Bed</a>
+                                                    </td>
+
+                                                    <td className="product-total">
+                                                        <span className="subtotal-amount">Rp.50.000</span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td className="product-name">
+                                                        <a href="#">Pajak 10%</a>
+                                                    </td>
+
+                                                    <td className="product-total">
+                                                        <span className="subtotal-amount">Rp.23.000</span>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+
+                                    <a href="#" className="btn btn-primary order-btn">Bayar Pesanan</a>
+                                </div>
+                            </div>
+
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            <Footer />
+        </>
+    )
+}
+
+export default Checkout;
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 6cb40f4..0142a15 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,13 +16,18 @@
   dependencies:
     "@babel/highlight" "^7.16.0"
 
-"@babel/helper-module-imports@^7.0.0":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3"
   integrity sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-plugin-utils@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
+  integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
+
 "@babel/helper-validator-identifier@^7.15.7":
   version "7.15.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
@@ -37,6 +42,13 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/plugin-syntax-jsx@^7.12.13":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.0.tgz#f9624394317365a9a88c82358d3f8471154698f1"
+  integrity sha512-8zv2+xiPHwly31RK4RmnEYY5zziuF3O7W2kIDW+07ewWDh6Oi0dRq8kwvulRkFgt6DB97RlKs5c1y068iPlCUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
 "@babel/runtime@7.12.5":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
@@ -44,7 +56,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.16.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
   integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
@@ -68,6 +80,24 @@
     "@babel/helper-validator-identifier" "^7.15.7"
     to-fast-properties "^2.0.0"
 
+"@emotion/babel-plugin@^11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz#3a16850ba04d8d9651f07f3fb674b3436a4fb9d7"
+  integrity sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.2"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "^4.0.3"
+
 "@emotion/cache@^10.0.27":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
@@ -78,6 +108,17 @@
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
+"@emotion/cache@^11.6.0":
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.6.0.tgz#65fbdbbe4382f1991d8b20853c38e63ecccec9a1"
+  integrity sha512-ElbsWY1KMwEowkv42vGo0UPuLgtPYfIs9BxxVrmvsaJVvktknsHYYlx5NQ5g6zLDcOTyamlDc7FkRg2TAcQDKQ==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.1.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "^4.0.10"
+
 "@emotion/core@^10.0.14":
   version "10.1.1"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3"
@@ -99,16 +140,41 @@
     "@emotion/utils" "0.11.3"
     babel-plugin-emotion "^10.0.27"
 
-"@emotion/hash@0.8.0":
+"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
+"@emotion/is-prop-valid@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.1.tgz#cbd843d409dfaad90f9404e7c0404c55eae8c134"
+  integrity sha512-bW1Tos67CZkOURLc0OalnfxtSXQJMrAMV0jZTVGJUPSOd4qgjF3+tTD5CwJM13PHA8cltGW1WGbbvV9NpvUZPw==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+
 "@emotion/memoize@0.7.4":
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
+"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/react@^11.6.0":
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.6.0.tgz#61fcb95c1e01255734c2c721cb9beabcf521eb0f"
+  integrity sha512-23MnRZFBN9+D1lHXC5pD6z4X9yhPxxtHr6f+iTGz6Fv6Rda0GdefPrsHL7otsEf+//7uqCdT5QtHeRxHCERzuw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/cache" "^11.6.0"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/sheet" "^1.1.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
 "@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
   version "0.11.16"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
@@ -120,17 +186,44 @@
     "@emotion/utils" "0.11.3"
     csstype "^2.5.7"
 
+"@emotion/serialize@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
+  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
 "@emotion/sheet@0.9.4":
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
   integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
 
+"@emotion/sheet@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2"
+  integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
+
+"@emotion/styled@^11.6.0":
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.6.0.tgz#9230d1a7bcb2ebf83c6a579f4c80e0664132d81d"
+  integrity sha512-mxVtVyIOTmCAkFbwIp+nCjTXJNgcz4VWkOYQro87jE2QBTydnkiYusMrRGFtzuruiGK4dDaNORk4gH049iiQuw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.3.0"
+    "@emotion/is-prop-valid" "^1.1.1"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/utils" "^1.0.0"
+
 "@emotion/stylis@0.8.5":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@0.7.5":
+"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@@ -140,7 +233,12 @@
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
   integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
 
-"@emotion/weak-memoize@0.2.5":
+"@emotion/utils@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
+  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
+
+"@emotion/weak-memoize@0.2.5", "@emotion/weak-memoize@^0.2.5":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
@@ -165,6 +263,85 @@
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.1.tgz#9551142a1980503752536b5050fd99f4a7f13b17"
   integrity sha512-gfta+H8aziZsm8pZa0vj04KO6biEiisppNgA1kbJvFrrWu9Vm7eaUEy76DIxsuTaWvti5fkJVhllWc6ZTE+Mdw==
 
+"@mui/base@5.0.0-alpha.55":
+  version "5.0.0-alpha.55"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.55.tgz#564d6c9374b4cfe86a4493512356047636076d4f"
+  integrity sha512-caPa04xwZF5Gv7qkto32xRBwubNgkjbXQngqp8PN10DQ/XcLtoe4PqrSPjwWBH0iNUZSRDf2HPP71tIU7bdR7Q==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@emotion/is-prop-valid" "^1.1.1"
+    "@mui/utils" "^5.1.1"
+    "@popperjs/core" "^2.4.4"
+    clsx "^1.1.1"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
+"@mui/material@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.1.1.tgz#72ba1ce8c253697df96e24cd1f555d5c2569376d"
+  integrity sha512-3mhuKlWnTa1r5cJ8mV66NXXmOB6Ck564oq4X8Ai0CeHqj0f6xCBHOgWXQtX6Cc8Yhf81MJkaN92AECVUpUHqLQ==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@mui/base" "5.0.0-alpha.55"
+    "@mui/system" "^5.1.1"
+    "@mui/types" "^7.1.0"
+    "@mui/utils" "^5.1.1"
+    "@types/react-transition-group" "^4.4.4"
+    clsx "^1.1.1"
+    csstype "^3.0.9"
+    hoist-non-react-statics "^3.3.2"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+    react-transition-group "^4.4.2"
+
+"@mui/private-theming@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.1.1.tgz#3e9e91d81a8e69dcb5c4499236e26d684cd4a919"
+  integrity sha512-h+MGzBVSH7GgXou4aIraJhakygTYIWvvxvTm81Y6RmwRcrzv8szDQeRDiM7iOVjqsS33dXfMkTi7csRCgeErsg==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@mui/utils" "^5.1.1"
+    prop-types "^15.7.2"
+
+"@mui/styled-engine@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.1.1.tgz#eb6a54546e65527786ab40aef9e2f20cc2fa00f5"
+  integrity sha512-vThhmTezPjBcn6CEeVuFqB3wgANnxHgYXn0wsr+OIgevkgSHeRfVn6mpSa66oTFGb+paPtH4ASqeUvL5Sscg4w==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@emotion/cache" "^11.6.0"
+    prop-types "^15.7.2"
+
+"@mui/system@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.1.1.tgz#64bf13c9137fdd858834f3921ded276b6b9767c4"
+  integrity sha512-RWaM/7wAvSOX39r13in3KrLXWsd0cSkk1P/MOCW2eVY13MJIAuDUl5ZoF1uos9kWWJJge+lE77XWmYqXYrxPLw==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@mui/private-theming" "^5.1.1"
+    "@mui/styled-engine" "^5.1.1"
+    "@mui/types" "^7.1.0"
+    "@mui/utils" "^5.1.1"
+    clsx "^1.1.1"
+    csstype "^3.0.9"
+    prop-types "^15.7.2"
+
+"@mui/types@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.0.tgz#5ed928c5a41cfbf9a4be82ea3bbdc47bcc9610d5"
+  integrity sha512-Hh7ALdq/GjfIwLvqH3XftuY3bcKhupktTm+S6qRIDGOtPtRuq2L21VWzOK4p7kblirK0XgGVH5BLwa6u8z/6QQ==
+
+"@mui/utils@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.1.1.tgz#3cb2c049731dacb3830336bc8011141e84434aad"
+  integrity sha512-rqakHf0IMaasDo1EcYqkx13VTxeoQoGf/3RxQuazQFKzF7d2uylFwNyb6bnUJGNe2/akiIMk/qiub58sYrwxVQ==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@types/prop-types" "^15.7.4"
+    "@types/react-is" "^16.7.1 || ^17.0.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
 "@next/env@10.2.3":
   version "10.2.3"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-10.2.3.tgz#ede3bbe68cec9939c37168ea2077f9adbc68334e"
@@ -209,6 +386,11 @@
   resolved "https://registry.yarnpkg.com/@opentelemetry/context-base/-/context-base-0.14.0.tgz#c67fc20a4d891447ca1a855d7d70fa79a3533001"
   integrity sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw==
 
+"@popperjs/core@^2.4.4":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
+  integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
+
 "@types/hoist-non-react-statics@^3.3.0":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -227,11 +409,18 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
-"@types/prop-types@*":
+"@types/prop-types@*", "@types/prop-types@^15.7.4":
   version "15.7.4"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
+"@types/react-is@^16.7.1 || ^17.0.0":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
+  integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@^7.1.20":
   version "7.1.20"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.20.tgz#42f0e61ababb621e12c66c96dda94c58423bd7df"
@@ -242,6 +431,13 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
+"@types/react-transition-group@^4.4.4":
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
+  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "17.0.35"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.35.tgz#217164cf830267d56cd1aec09dcf25a541eedd4c"
@@ -453,7 +649,7 @@ babel-plugin-emotion@^10.0.27:
     find-root "^1.1.0"
     source-map "^0.5.7"
 
-babel-plugin-macros@^2.0.0:
+babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.6.1:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
   integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
@@ -795,7 +991,7 @@ classnames@^2.2.5:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
-clsx@^1.1.0:
+clsx@^1.1.0, clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
@@ -1008,7 +1204,7 @@ csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.18.tgz#980a8b53085f34af313410af064f2bd241784218"
   integrity sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ==
 
-csstype@^3.0.2:
+csstype@^3.0.2, csstype@^3.0.9:
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
   integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
@@ -1301,6 +1497,11 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
 escodegen@^1.6.1:
   version "1.14.3"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
@@ -1635,7 +1836,7 @@ hoist-non-react-statics@^2.2.2:
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -2767,7 +2968,7 @@ react-toast-notifications@^2.4.3:
     "@emotion/core" "^10.0.14"
     react-transition-group "^4.4.1"
 
-react-transition-group@^4.4.1:
+react-transition-group@^4.4.1, react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
   integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
@@ -3195,6 +3396,11 @@ stylis@3.5.4:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
   integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
 
+stylis@^4.0.10, stylis@^4.0.3:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
+  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"