From 23c30e62081724eb913ac9f9f3df03d5cd85e044 Mon Sep 17 00:00:00 2001
From: iris-liu0312 <iris.liu0312@gmail.com>
Date: Fri, 11 Feb 2022 14:28:57 -0700
Subject: [PATCH 1/6] download image

---
 app.py                         |  2 --
 static/src/template/Canvas.jsx | 30 ++++++++++++++++++++++++++----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/app.py b/app.py
index 0f43dce..56e25f1 100644
--- a/app.py
+++ b/app.py
@@ -397,8 +397,6 @@ def get_subtree_or_update_node():
         values = json.loads(request.data.decode("utf-8"))
         new_json = update_json(values)
         return json.dumps(new_json)
-        
-
 
 @app.route('/reload', methods=['POST'])
 def reload_schema():
diff --git a/static/src/template/Canvas.jsx b/static/src/template/Canvas.jsx
index 987697b..96ed0ac 100644
--- a/static/src/template/Canvas.jsx
+++ b/static/src/template/Canvas.jsx
@@ -8,7 +8,8 @@ import contextMenus from 'cytoscape-context-menus'
 import axios from 'axios';
 import equal from 'fast-deep-equal';
 import RefreshIcon from '@material-ui/icons/Refresh';
-import OpenIcon from '@material-ui/icons/OpenWith';
+import AspectRatioIcon from '@material-ui/icons/AspectRatio';
+import PhotoIcon from '@material-ui/icons/Photo';
 
 import Background from '../public/canvas_bg.png';
 import CyStyle from '../public/cy-style.json';
@@ -28,7 +29,9 @@ class Canvas extends React.Component {
             hasSubtree: false,
             // static copy of topmost tree
             topTree: null,
-            removed: null
+            removed: null, 
+            downloadUrl: '',
+            fileName: 'graph.jpg'
         }
 
         // create topTree
@@ -46,6 +49,7 @@ class Canvas extends React.Component {
         this.removeObject = this.removeObject.bind(this);
         this.restore = this.restore.bind(this);
         this.fitCanvas = this.fitCanvas.bind(this);
+        this.download = this.download.bind(this);
     }
 
     showSidebar(data) {
@@ -68,6 +72,7 @@ class Canvas extends React.Component {
                 }
                 this.setState({hasSubtree: true});
                 this.cy.add(res.data);
+                this.cy.center(res.data);
                 this.runLayout();
             })
             .catch(err => {
@@ -118,6 +123,18 @@ class Canvas extends React.Component {
         this.cy.fit();
     }
 
+    download(event){
+        event.preventDefault();
+        const image = this.cy.jpg({output: 'blob'});
+        const url = URL.createObjectURL(image);
+        this.setState({downloadUrl: url},
+            () => {
+                this.dofileDownload.click();
+                URL.revokeObjectURL(url);
+                this.setState({downloadUrl: ''})
+        })
+    }
+
     componentDidMount() {
         this.cy.ready(() => {
             // left-click 
@@ -130,7 +147,6 @@ class Canvas extends React.Component {
                 } else if (eventTarget.isNode()) {
                     let node = eventTarget.data();
                     this.showSubTree(node);
-                    this.cy.center(node);
                 }
             });
 
@@ -197,7 +213,13 @@ class Canvas extends React.Component {
                 />
                 <div style={{'width': '15px', height: '3vh'}}>
                     <RefreshIcon type='button' color="action" fontSize='large' onClick={this.reloadCanvas}/>
-                    <OpenIcon type='button' color="action" fontSize='large' onClick={this.fitCanvas}/>
+                    <AspectRatioIcon type='button' color="action" fontSize='large' onClick={this.fitCanvas}/>
+                    <PhotoIcon className="button" type="button" color="action" onClick={this.download}/>
+                    <a style={{display: "none"}}
+                        download={this.state.fileName}
+                        href={this.state.downloadUrl}
+                        ref={e=>this.dofileDownload = e}
+                    >download it</a>
                 </div>
             </div>
         );

From b324d16c22ac5abf87a654c82fe774ea5fefcebd Mon Sep 17 00:00:00 2001
From: iris-liu0312 <iris.liu0312@gmail.com>
Date: Fri, 11 Feb 2022 17:00:35 -0700
Subject: [PATCH 2/6] Layout change, update home page description

---
 static/index.html          |   1 +
 static/src/App.js          |  30 ++++++++++++++++++------------
 static/src/App.scss        |   5 +++--
 static/src/public/logo.png | Bin 5294 -> 3871 bytes
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/static/index.html b/static/index.html
index c51ef53..4ce8f42 100644
--- a/static/index.html
+++ b/static/index.html
@@ -3,6 +3,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <link rel="icon" href="data:," />
 
         <title>Schema Curation Interface</title>
 
diff --git a/static/src/App.js b/static/src/App.js
index e0ea7b2..7236726 100644
--- a/static/src/App.js
+++ b/static/src/App.js
@@ -10,8 +10,8 @@ import {
 import Home from "./template/Home";
 import Viewer from "./template/Viewer";
 import logo from './public/logo.png'
-import GitHubIcon from '@material-ui/icons/GitHub';
-import HelpIcon from '@material-ui/icons/Help';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import HelpIcon from '@mui/icons-material/Help';
 
 import './App.scss'
 
@@ -21,23 +21,29 @@ export default function App() {
       <div className="App">
         <Row className="Header">
           <Col md="2" id="logo">
-            <img src={'/static'+ logo} alt="Curate" />
+            <Link to="/">
+              <img src={'/static'+ logo} alt="Curate" />
+            </Link>
           </Col>
-          <Col md="4" id="title" className="align-self-center">
-            <div><h1>CURATE</h1></div>
-            <div><h4 >Schema Curation Interface</h4></div>
+          <Col md="1" />
+          <Col md="3" id="title" className="align-self-center">
+              <div><h1>CURATE</h1></div>
+              <div><h4 >Schema Curation Interface</h4></div>
           </Col>
-          <Col md="6" className="align-self-center">
+          <Col md="5" className="align-self-center">
             <Row>
-              <Col md="3" className="nav-items">
-                <Link to="/">Home</Link>
-              </Col>
+              <Col md="1" />
               <Col md="3" className="nav-items">
                 <Link to="/viewer">Viewer</Link>
               </Col>
-              <Col md="3" className="nav-items">
+              <Col md="1" className="nav-items">
                 <a target="_blank" href="https://github.com/cu-clear/schema-interface">
-                  <img src={GitHubIcon} alt="GitHub" />
+                  <GitHubIcon />
+                </a>
+              </Col>
+              <Col md="1" className="nav-items">
+                <a target="_blank" href="https://chrysographes.notion.site/Schema-Curation-Manual-c17f79c7450246d3ad7796e43bebea1b">
+                  <HelpIcon />
                 </a>
               </Col>
             </Row>
diff --git a/static/src/App.scss b/static/src/App.scss
index cbae17b..202b973 100644
--- a/static/src/App.scss
+++ b/static/src/App.scss
@@ -2,11 +2,12 @@
     font-family: Arial, Helvetica, sans-serif;
     height: max-content;
     width: 100vw;
+    text-align: center;
 }
 
 .Header {
     display: inline-flex;
-    background-color: #000;
+    background-color: rgb(45, 46, 49);
     width: 100vw;
     height: 20vh;
     text-align: center;
@@ -30,7 +31,7 @@
     }
 
     a{
-        color: white;
+        color: #ddd;
     }
 }
 
diff --git a/static/src/public/logo.png b/static/src/public/logo.png
index 4b372780ea62d5b328e919bfd474696c181eef57..b2046c75bac9836e456acd970ce16ff3b7c84b6a 100644
GIT binary patch
literal 3871
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

literal 5294
zcmds5_ghoh7KNdWB1J|5QdN34RFS4s>C!>zp;s{oQ92C0Ih4?gq4yH12uKMLg@n*M
z8kF859Vzd|c|X3t;C<gM-_70GXP>jzS$pjp`&3VZ<~qxD5)u*`%_pjc!2J{P{F4&6
z)|l7k12<Brp@uR^Erx9!cp!IvtoxXRq#>F5+>QcxzV_mY1(bw@wvTv{qP@!<NJws}
zXsSLohFNdty&f^y=R{vPCMY-Rx+04kdG4tm3D0EMGeBJVjZ`A9so)R;v-cDP({5Q*
z8c6UcmvTQZVZIwFZ8&qhyL+sN2?{<whAjnPkL3$i1G|@2gRLd%Lf#(-DwYN8zQ&w-
z73})OA^88-QQTkdCSu42S2a;F`9Hqal-4|NmF6o5Y?R&ou&+~~7&N3pr{KU5a_+Og
zg~Y0h+H}nao)gec6O|@T%L9p5FE7pxahoq@8XcWB#w(o8PY5gDqB*7g7hjjPpWx$%
z*UJjLW}949_A?sr_1tcM_|N-jjCBPCKv9fls!H<~NT)0sR_V;{%d;;IgS*{VUXwM?
zoma30-W&m2VCep^j0V#xMs8OJ+W{A%)kZL|O1jv-_g%N=2s$v>KV2=zQMx?gx{N&=
zEC{)DovgNi@apBdc(wlkL5INTkt;J1BOqHBb#hzv5wgn(5<@XJxrX8xg%F&UYaR>l
zCq4i%miq55;vjc^g;3Q#5Z1JaNB`Bt)Z#e@x~g_K*=}7z9H9_u@d&?95?FaiJ`5lG
z2@Dy?G$>M6)62Yn_pB9ItkI!dSqZo3uWbdvX97vw=#7c0;k|Etx*dMoYtA<dfr&e=
z8fdUHHgoN%RMUoBUHIRE3?$rMSq#`sWLf9S^G%rnesr~d&MNJ}jM|*6$$9-Xj0)k0
zZCwgxb*|%ZpQ@EQUJ40WqY3dbPiZ8a?_*`CLBcV?)2@#q&M%Ial0_*G1iw)Y{Ty!^
z&X$tMuzpifQC@!ECg{*4&~N>tGvR2?J4dMQ!{~U0QS{2bIpF1)$Si1~!$0}`v$4G|
zV%@6#G5HDs>PkBBzGf=67oqD*-QA~OBj^lm&PhB$z6LVhi@7U=r^G*Q9!}YCCW4De
znZ|Wx792LF>hvMM+`hm?hDYA1R2}k1amXd0*kE77B%?Lr`clRp;`RoL-in;q6@n89
zv>+L7uvY{)2S5nl<<d+<zWhNr`^!&vC8Mc`#w^D(&YTjSvyz+W8%-kl0Xwo|2sLUJ
z8DHG%w<~n&NdQFh2M!+*<G4$S4!%5HJrUBS6fHKhevNAKoP!Tkd;0Cn%WiaPsZ^QP
zxagn(r{voJnCw=Dvi=H59DF?YJ)By!5bTb8wK*xJ5_JO%V9)(rle@^MOiwZ&g0j;L
zKdeS#;#O2<LOTY&52i-A2WkgQ+eKR(ZqabaXAbyO12B2v)qQb<yOXi4`uJcgZP}{m
zZCj3QFC;~p^`V&gjo+jGsO{KsTN%z_3h^B5vC)>qTMWHy)kx;x;e!MdP)rBrzpc1R
zUsPMRi(h_Di4b7v*lMIsthj`rlh}uol`fe>?5`-tws5b8l3tYqgVH0!7X6-4aIo+3
z58x}Vj@p)!gx>rEd!WcotBvo>eA?<dR(j&DMJbx}ID!%fbF<S|I2;dGuw;fgpdT2s
z!Ta683q418lFX-{@D(MUYlwIksy|Ctk;ihxm(N*cyga%t&o)msH8DZQ3mVH6gQy}`
zllq~I&Z&0*h^^z)4@XP1m+N?C&CmPs6@Cbzpl`jAgt9Zb92xJ@U1E%}8JIjdnagJ>
z`vABj+e&+$A20YXUFCE|_*oUHC$0ss3jnd^`7Z_epQm$Eg)9VG)!l5&T!z!VkC^$z
zMtqrWZtwQ|KItyH=`WCeO+IY=Y_E@QS${Tj&Z{G_3;Pcc$)b6kb*D@JBpg?yF$PnN
zcjb7eQ-}V!$i^?;v$*`k$DF}im23`l%YfQ5jg9OjCqNdGi=i6KM;uG%2V?q0Sk~2H
zYyV;(TqZnDaIm;Na4$IRhXWz-7L)jnp9$w(gC~C=-DkjEu!UDsYO8VTasdm(aWN>U
z=ylp@@qi-_7OaLCkghc^vp;n}{mazX@7FI|b&ToBndqs=;$yhh0@(P0$;`XgbxNOo
z_55h_ErRx8%)tI2KqF&rRu3+1#5xaB+RuM}>8xs%a~&;SV>3ue@7w{P%}{0^<&us2
zxjt3~OfKf?uN`J>xNt01n!T;c*28(e&8O6+J9s4*iUFfJLq5nJjHu)Zhbf%z^%br2
zKA<~#PX>TEcecu`?qu~XTa!YP!jU-(Hoc7>qxfs9d|GNldqR@Gd>B(SbSs+2X9FNG
zhL9hFuP+X#T&smW0k-yiY`e(BGK0FVUU-r#*+xI}Iz5XxdsW$N$&-2y5Jh=vxGR3G
zw`IFTh<p-NXigzlCk_y8e-{6`D>aABQ@u3Q7sIqQo$IB^%gi2ip&Q#1q$W#XjmnMF
zv<kqJ9&uR^B7b-g99u-SR=Fv7bfD;WHR3P6KH6llmVFWSy+9)i;Cp<(WFj=QyI0tH
za`DY(4dHfrRE>wnXt8D!-;)aaYbHIM>6Hzi0Xk#gE3ME8Z&YA5b|5r@xK1<$T0*JQ
zP3z4x4eLjfQ36K5iik5AiFyeABHbGA$G6i5Byu}`|MZWfdY3c}EKSiK{Fz8@L%MST
z=~u$L&*V3F9Ji($fY<z0sc9ESbIAkzDnuv8Jye_t-EMM$v+azjLa8amkRB&}<%D7+
zvm<efu83NHcyL*ny5C2qG-6)cuNbZQdZVJuB_YsLeaRiin>zu>2X1IQBcD)zRb7`B
zq@CeMOiD^|ZOw4fQ}&0xh5yE(g9=`7ee{nb2%Fxq-SRxpsicQDOIW=NRoZJtA?MQY
z?_j0&ye=%1H<%wSw@a?iz8;c+pjX|I<IHkfjsG=Rd^Kf7nDRikujXqLja(kA=rt_w
zH)n;1Yo-XR-xj3RPN~R@%%<d&nVfHQ)DHARov!3~uMtjXg)4iRZ^Ro!0R-x>ktSe-
zubZLebgtuFShyY$TJrgwJ)@nWX!~~tmZBSs(L96Wj$hy?8|cfuYOH;`-{Hmt;WjVX
zLTBXBbp2@`uGQP-zjnrR3W_8kwg&UsVX<=fE#aeH<D26sWeDroN`o47lv3%DTvDF?
zzkw|U9b27C@j1`6cuK<EaX~qh39pN@HVRZ){mKEx;x<Z^_Sn}P{q*WCul^+W^v5eC
zR#8G<>B84oe{+D<J3*^@BfLV3n6(Kfj6o9jLb0g)$=8UYi#}Y{-%%0+ZuM`krz;5x
z3L<b<l1Mo2gj3qXyorzNOO@&Gg>e<7PY_3%E5<d-!^oA}Ip#botHKw>($4x(_~(pF
z`oQ)X9G6Ts=kS_06oAtfePVs{E~TaJX(LsMJkGY2^sui!OF%AJoS1T>G0Qt$!{3Kx
zVSBb!Jjj!<<E<HF;~KfChW$qOu)Tn<h`U<q?^vaD8P#m2?2?(m_Z0i^h3unc`UT;T
zJ60Wj&2J9al!E0GjeaM^Ejvv4JkqhjQZDdh@8m{2(q~!yO<<RFhudk>!8B2BWt{;^
z0d0e17kS=NOt8%M#q)3o%@9sa7dEPyy*m#<iT|co@V(MlD9w(Ae8%F7J{rOdBNcW3
zG~pDH^FV;P$N9gA)I~n#dvvM?!j_b0W|B8OCK}|r8QzC|vQHychpg-t#5L&_XM$y%
zl%VDl@tIMlyE7R!!J3dZh5%-SOj4(59}!D}etcSFmGq4;(Pn`QqjD-CKIvIatrYbT
zco#s1IA;2QnkXWm<|T{P^F29kyBeL9jh_oNH2}K=S5T4}7^|x|<1R%k!Yid&6!E08
zTd8P#JHwb#ieV*u;u>EreK%54ljXu<rre;YoRx#RYkKovb6$4aDlMS4y2_i`Yd01b
zCV}Gr*<UM4PFk{HDWKGAD5ZE%`Cbgz675XZFuQ|yv-r7(F(8p={m!N=TZtI^?;c~N
zy62eDlcrvA8PMN<%x@jCm=d@1@jMi3OdSR2R{iC6hV+?KAQDDOWzTY>GTOw{X6Py=
z5mOd&b$RgHzCX6E^XS<@&ul1x+&BtYFc)Z;?TS}J)WiHAo_p^?rFgAY9$K=QJi7_d
z^F6`lvYs+hl^kkvAYSQ3fu_h@8pT`nnBCWMKhliW0^EMn-%jW8qAAZ6bSO(AdI0)v
zn<9nGNX<MtVtCb{5?2s;YI25)vfr(+12#i$RzPqwsV9@Lp*_Hr+V*4NwYUnSvh0CG
zR<i-*Oe?(*(>@jzDP&q5gQ2)$((t?o@T>Ez2L!I4%%R}&p<3bRC$41)EjmzyUCo~$
z{daG)4K11K2iUn<N4|V(O8}~>QN#H-$cA@wMn_73LMwT8=>7|<j}JpwJ%qy{yMw<=
z+|ka0+-2tWM{-$^m^PSfYNf7=JaZK6yEal@m78Y-!h2<O7hDtdI_kPXtWtu!gc6IW
zUppPUqcDs3busg;w9-4)h9j_o`*zBbFR_@r?p1pG`i&8$G(-(C-{gN&Cl6TK-$LQK
zZgzgVvTc7LP&y5~Z+}_;OhFCmcRryjpT;g`gaP2ipxPeQYV=e3W`J0XUN{2MaR?Co
zcnKZ44Y$*g^yd>mVXtZQ$tRnznhub73Y0o(14HBnRROvDVm+)@4SOrjYc9Nl($oqs
zTY!4yInhD2Hd(_O<V^`c9>z65;qe%o?45i^7N9csX0_h4!_6YsU12y~V+Ykod$FTS
z;v@;`9tp9Wu_8#PVFV$tKKSA+RvK;5{<37M8RnxQ)I<&MYb*zXwT`_w9vyE&anZ!D
z#uFQ=9)(A6Q7e`UA6xXPeRuE$9(f@H^Z`X^he9A3{=6ce;B=*hC)QtYlf|2qr4~Ya
zj|~xRNXBf+Wf%cYG{O5}SRzV3N?+^P?UGAej|VDIIh$pF7a#4_8Shb|%wh~CBaBqV
zPe+|N9{~>8r{z7MY6*fP*x)WW`Fb8T|Jg_DW6gwFCdkp&%t2cMaXO|60v@wX0+)g*
z63`W$-2shCKwB7{?JCB4vd1-3HMGh-ygS`+o0zZWOmL193)OY`Uk~B*;VxK4R&>wN
z3!oP*MLQ8y<#CJmlHx@1BhL8Y$UAYr7(1YlbtGSN3IOMD`Z3Xw@@5JMeb>a;PYYuk
z0Y9{Qkob_j6Z#>LC~oG4i|K4BcYK|o>~u7n+D&tv!w`IJC`v!_BMR3U;QywYi|B;`
zLOIRZ2hyqVo~mU}tngy;q%rf*upTnp87-k!m?Sb>Ppp@v@lRyld`yq%mK4SwUbPmP
z4Th+nU-KE^*?vO-AtgE@?sg}jha*g7vL&SdJu>`k46&zDp<((VDPPs^1F_2?7g0wr
ziCQv;<PAQqo1QSU(S=O<0ll9K(7c+z#LVS*cdh>#A_w%yR}>6g_&B1v#R1dcFvwu0
zh81UuD9aqTsQki~Dj0p^Hbd`&6o3h9ZgTCqYGortA_V?=kdLCVYMQC9z73tw3R|es
zlP9RMpo!weEpM70x;@)WFw19~53`1Sqga(HD^?9tsBW9Dw^KP+625V{3#jy;l}A2*
z5baBdJrWret?+D}&5f<qBr6XUHixb8iqtG=&u2KVxxkUAz6}k~7bwxVd2QeWAe4*}
zd&w+q+p2uGXQe7FdtbJJJgJ4F*%jV2S+sgt1+J9zJiC>)X9p%TV1pM6_d{WTl&_wQ
zF{6l&AT~=TrRcO98HwgPy#1N9qSk3*&330hf2?G?*H+M^$^zqj)@w4j&!afZt9WYr
z^=8r8wAD4R5AI1Fttw-n4rvb^%d6J<w?n0>uC%~sf@B7bU$F5sAbE~LEDdc{!hkxP
zczB{*$oh)-1>@)UK?5~a$>4^d`A||a1hs&T{N(}^tKc+UZ|4NaKZA7T1SQ*0TBFZZ
z)TPsfUMBl1!|TrUZGgXx5ER{?3W~75wf322`9|{M@uTL8UoPvKiQPwYoXY{CiV4M4
z@7U}hi_0eQuLi`thG)^EfTB@AS|H%`6fL-}wvEcFA+BV321f7`399P%wvV7d8;#@o
zmI;O+;-ZrL{C=td-lR%&vn6A9B>52wfR2)Q`TdCm&@YtJgrRd2S!L9fT;v<mSyDd+
zNP91`HQ#<(ZT~q<pcH|)Czu`Ti8T1ylabdfPyBQ>{M1(lLWZHFVHue+5dxOdSjzbS
m>B^{PaO-~@4GtaKmt+T3NOJ6s{2K6$kwjBXPqkLrHvB){6+0XN


From e3631e4016e7a24eb5921608de48879d087abd26 Mon Sep 17 00:00:00 2001
From: iris-liu0312 <iris.liu0312@gmail.com>
Date: Fri, 11 Feb 2022 17:01:37 -0700
Subject: [PATCH 3/6] change home description, download screenshot

---
 static/src/template/Canvas.jsx | 12 ++++++------
 static/src/template/Home.jsx   |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/static/src/template/Canvas.jsx b/static/src/template/Canvas.jsx
index 96ed0ac..4d7f464 100644
--- a/static/src/template/Canvas.jsx
+++ b/static/src/template/Canvas.jsx
@@ -7,9 +7,9 @@ import contextMenus from 'cytoscape-context-menus'
 
 import axios from 'axios';
 import equal from 'fast-deep-equal';
-import RefreshIcon from '@material-ui/icons/Refresh';
-import AspectRatioIcon from '@material-ui/icons/AspectRatio';
-import PhotoIcon from '@material-ui/icons/Photo';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import AspectRatioIcon from '@mui/icons-material/AspectRatio';
+import SaveIcon from '@mui/icons-material/Save';
 
 import Background from '../public/canvas_bg.png';
 import CyStyle from '../public/cy-style.json';
@@ -31,7 +31,7 @@ class Canvas extends React.Component {
             topTree: null,
             removed: null, 
             downloadUrl: '',
-            fileName: 'graph.jpg'
+            fileName: 'graph.png'
         }
 
         // create topTree
@@ -125,7 +125,7 @@ class Canvas extends React.Component {
 
     download(event){
         event.preventDefault();
-        const image = this.cy.jpg({output: 'blob'});
+        const image = this.cy.png({output: 'blob', bg: 'white', scale:'1'});
         const url = URL.createObjectURL(image);
         this.setState({downloadUrl: url},
             () => {
@@ -214,7 +214,7 @@ class Canvas extends React.Component {
                 <div style={{'width': '15px', height: '3vh'}}>
                     <RefreshIcon type='button' color="action" fontSize='large' onClick={this.reloadCanvas}/>
                     <AspectRatioIcon type='button' color="action" fontSize='large' onClick={this.fitCanvas}/>
-                    <PhotoIcon className="button" type="button" color="action" onClick={this.download}/>
+                    <SaveIcon className="button" type="button" color="action" onClick={this.download}/>
                     <a style={{display: "none"}}
                         download={this.state.fileName}
                         href={this.state.downloadUrl}
diff --git a/static/src/template/Home.jsx b/static/src/template/Home.jsx
index c86c737..d7ce65b 100644
--- a/static/src/template/Home.jsx
+++ b/static/src/template/Home.jsx
@@ -5,7 +5,7 @@ class Home extends Component {
   render() {
     return (
       <Container fluid="true">
-        <div>Curate is a schema visualization for research purposes.</div>
+        <div className="App">SCI 2.0 is a web application designed to visualize complex events and curate them for research purposes.</div>
       </Container>
     );
   }

From ff2963ecfed8212d4f7d463767a1219f615fec9e Mon Sep 17 00:00:00 2001
From: iris-liu0312 <iris.liu0312@gmail.com>
Date: Fri, 11 Feb 2022 17:06:40 -0700
Subject: [PATCH 4/6] description bug fix

---
 static/src/App.scss          | 4 ++++
 static/src/template/Home.jsx | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/static/src/App.scss b/static/src/App.scss
index 202b973..ab99d8a 100644
--- a/static/src/App.scss
+++ b/static/src/App.scss
@@ -2,6 +2,10 @@
     font-family: Arial, Helvetica, sans-serif;
     height: max-content;
     width: 100vw;
+}
+
+.Index{
+    font-family: Arial, Helvetica, sans-serif;
     text-align: center;
 }
 
diff --git a/static/src/template/Home.jsx b/static/src/template/Home.jsx
index d7ce65b..8fee2dc 100644
--- a/static/src/template/Home.jsx
+++ b/static/src/template/Home.jsx
@@ -5,7 +5,7 @@ class Home extends Component {
   render() {
     return (
       <Container fluid="true">
-        <div className="App">SCI 2.0 is a web application designed to visualize complex events and curate them for research purposes.</div>
+        <div className="Index">SCI 2.0 is a web application designed to visualize complex events and curate them for research purposes.</div>
       </Container>
     );
   }

From 87d2abf305a68b54744ceb453acb18ae3b3bd3c1 Mon Sep 17 00:00:00 2001
From: iris-liu0312 <iris.liu0312@gmail.com>
Date: Fri, 11 Feb 2022 17:06:59 -0700
Subject: [PATCH 5/6] update to MUI

---
 static/package-lock.json            | 1104 ++++++++++++++++++++++-----
 static/package.json                 |    5 +
 static/src/template/SchemaModal.jsx |  231 ------
 static/src/template/SideBar.jsx     |   43 --
 static/src/template/SideEditor.jsx  |   11 +-
 static/src/template/UploadModal.jsx |   16 +-
 static/src/template/Viewer.jsx      |    8 +-
 7 files changed, 953 insertions(+), 465 deletions(-)
 delete mode 100644 static/src/template/SchemaModal.jsx
 delete mode 100644 static/src/template/SideBar.jsx

diff --git a/static/package-lock.json b/static/package-lock.json
index 348a8e8..77887ce 100644
--- a/static/package-lock.json
+++ b/static/package-lock.json
@@ -9,8 +9,13 @@
       "version": "0.5.1",
       "license": "ISC",
       "dependencies": {
+        "@emotion/react": "^11.7.1",
+        "@emotion/styled": "^11.6.0",
         "@material-ui/core": "^4.10.1",
         "@material-ui/icons": "^4.11.2",
+        "@mui/icons-material": "^5.4.1",
+        "@mui/material": "^5.4.1",
+        "@mui/styles": "^5.4.1",
         "axios": "^0.25.0",
         "bootstrap": "^5.1.3",
         "cytoscape": "^3.20.0",
@@ -78,7 +83,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
       "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.16.7"
       },
@@ -90,7 +94,6 @@
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.8.tgz",
       "integrity": "sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -99,7 +102,6 @@
       "version": "7.16.12",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz",
       "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.16.8",
@@ -129,7 +131,6 @@
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
       "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.16.8",
         "jsesc": "^2.5.1",
@@ -168,7 +169,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz",
       "integrity": "sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==",
-      "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.16.4",
         "@babel/helper-validator-option": "^7.16.7",
@@ -242,7 +242,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
       "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -266,7 +265,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz",
       "integrity": "sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-get-function-arity": "^7.16.7",
         "@babel/template": "^7.16.7",
@@ -280,7 +278,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz",
       "integrity": "sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -292,7 +289,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
       "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -316,7 +312,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
       "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -328,7 +323,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz",
       "integrity": "sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.16.7",
         "@babel/helper-module-imports": "^7.16.7",
@@ -359,7 +353,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
       "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -398,7 +391,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz",
       "integrity": "sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -422,7 +414,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
       "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -434,7 +425,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
       "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -443,7 +433,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
       "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -467,7 +456,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.16.7.tgz",
       "integrity": "sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==",
-      "dev": true,
       "dependencies": {
         "@babel/template": "^7.16.7",
         "@babel/traverse": "^7.16.7",
@@ -481,7 +469,6 @@
       "version": "7.16.10",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.10.tgz",
       "integrity": "sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.16.7",
         "chalk": "^2.0.0",
@@ -495,7 +482,6 @@
       "version": "7.16.12",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.12.tgz",
       "integrity": "sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -862,7 +848,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz",
       "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1671,9 +1656,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
-      "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
+      "version": "7.17.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
+      "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -1685,7 +1670,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
       "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "@babel/parser": "^7.16.7",
@@ -1699,7 +1683,6 @@
       "version": "7.16.10",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.10.tgz",
       "integrity": "sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.16.8",
@@ -1720,7 +1703,6 @@
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz",
       "integrity": "sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.16.7",
         "to-fast-properties": "^2.0.0"
@@ -1738,11 +1720,157 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.7.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
+      "integrity": "sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==",
+      "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.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+      "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.13"
+      }
+    },
     "node_modules/@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.1.tgz",
+      "integrity": "sha512-bW1Tos67CZkOURLc0OalnfxtSXQJMrAMV0jZTVGJUPSOd4qgjF3+tTD5CwJM13PHA8cltGW1WGbbvV9NpvUZPw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.7.1.tgz",
+      "integrity": "sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/cache": "^11.7.1",
+        "@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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "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"
+      }
+    },
+    "node_modules/@emotion/serialize/node_modules/csstype": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.6.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.6.0.tgz",
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz",
@@ -1906,6 +2034,291 @@
         "react-dom": "^16.8.0 || ^17.0.0"
       }
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-alpha.68",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.68.tgz",
+      "integrity": "sha512-q+3gX6EHuM/AyOn8fkoANQxSzIHBeuNsrGgb7SPP0y7NuM+4ZHG/b9882+OfHcilaSqPDWUQoLbphcBpw/m/RA==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.0",
+        "@emotion/is-prop-valid": "^1.1.1",
+        "@mui/utils": "^5.4.1",
+        "@popperjs/core": "^2.4.4",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^17.0.0",
+        "react-dom": "^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.4.1.tgz",
+      "integrity": "sha512-koiq9q2GfjXRUWcC5fEi1b+EA4vfJHgIaAdBHlkOrBx2cnmmazQcyib501eodPfaZGx9BikrhivODaNQYQq8hA==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.4.1.tgz",
+      "integrity": "sha512-SxAT43UAjFTBBpJrN+oGrv40xP1uCa5Z49NfHt3m93xYeFzbxKOk0V9IKU7zlUjbsaVQ0i+o24yF5GULZmynlA==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.0",
+        "@mui/base": "5.0.0-alpha.68",
+        "@mui/system": "^5.4.1",
+        "@mui/types": "^7.1.1",
+        "@mui/utils": "^5.4.1",
+        "@types/react-transition-group": "^4.4.4",
+        "clsx": "^1.1.1",
+        "csstype": "^3.0.10",
+        "hoist-non-react-statics": "^3.3.2",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2",
+        "react-transition-group": "^4.4.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^17.0.0",
+        "react-dom": "^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/csstype": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.4.1.tgz",
+      "integrity": "sha512-Xbc4MXFZxv0A3hoc4TSDBhzjhstppKfc+gQcTMqqBZQP7KjnmxF+wO7rEPQuYRBihjCqQBdrHIGMLsKWrhkZkQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.0",
+        "@mui/utils": "^5.4.1",
+        "prop-types": "^15.7.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.4.1.tgz",
+      "integrity": "sha512-CFLNJkopRoAuShkgUZOTBVxdTlKu4w6L4kOwPi4r3QB2XXS6O5kyLHSsg9huUbtOYk5Dv5UZyUSc5pw4J7ezdg==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.0",
+        "@emotion/cache": "^11.7.1",
+        "prop-types": "^15.7.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styles": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.4.1.tgz",
+      "integrity": "sha512-ekw2NBC06re0H9SvCA1XgtFcghB8AQdGPXD3mjIz5ik+X+LvR+f2TeoCpJpkKp7UQdcNn6uuYi6BO6irTiQhdw==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.0",
+        "@emotion/hash": "^0.8.0",
+        "@mui/private-theming": "^5.4.1",
+        "@mui/types": "^7.1.1",
+        "@mui/utils": "^5.4.1",
+        "clsx": "^1.1.1",
+        "csstype": "^3.0.10",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.8.2",
+        "jss-plugin-camel-case": "^10.8.2",
+        "jss-plugin-default-unit": "^10.8.2",
+        "jss-plugin-global": "^10.8.2",
+        "jss-plugin-nested": "^10.8.2",
+        "jss-plugin-props-sort": "^10.8.2",
+        "jss-plugin-rule-value-function": "^10.8.2",
+        "jss-plugin-vendor-prefixer": "^10.8.2",
+        "prop-types": "^15.7.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styles/node_modules/csstype": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+    },
+    "node_modules/@mui/system": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.4.1.tgz",
+      "integrity": "sha512-07JBYf9iQdxIHZU8cFOLoxBnkQDUPLb7UBhNxo4998yEqpWFJ00WKgEVYBKvPl0X+MRU/20wqFz6yGIuCx4AeA==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.0",
+        "@mui/private-theming": "^5.4.1",
+        "@mui/styled-engine": "^5.4.1",
+        "@mui/types": "^7.1.1",
+        "@mui/utils": "^5.4.1",
+        "clsx": "^1.1.1",
+        "csstype": "^3.0.10",
+        "prop-types": "^15.7.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system/node_modules/csstype": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+    },
+    "node_modules/@mui/types": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.1.tgz",
+      "integrity": "sha512-33hbHFLCwenTpS+T4m4Cz7cQ/ng5g+IgtINkw1uDBVvi1oM83VNt/IGzWIQNPK8H2pr0WIfkmboD501bVdYsPw==",
+      "peerDependencies": {
+        "@types/react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.4.1.tgz",
+      "integrity": "sha512-5HzM+ZjlQqbSp7UTOvLlhAjkWB+o9Z4NzO0W+yhZ1KnxITr+zr/MBzYmmQ3kyvhui8pyhgRDoTcVgwb+02ZUZA==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.0",
+        "@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"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
     "node_modules/@nicolo-ribaudo/chokidar-2": {
       "version": "2.1.8-no-fsevents.3",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz",
@@ -2138,6 +2551,11 @@
       "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
       "dev": true
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.4",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
@@ -2165,6 +2583,14 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-is": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
+      "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.4",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
@@ -2601,7 +3027,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -2778,6 +3203,16 @@
         "object.assign": "^4.1.0"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz",
@@ -2982,7 +3417,6 @@
       "version": "4.19.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
       "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==",
-      "dev": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001286",
         "electron-to-chromium": "^1.4.17",
@@ -3064,6 +3498,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/camelcase": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
@@ -3094,7 +3536,6 @@
       "version": "1.0.30001302",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001302.tgz",
       "integrity": "sha512-YYTMO+tfwvgUN+1ZnRViE53Ma1S/oETg+J2lISsqi/ZTNThj3ZYBOKP2rHwJc37oCsPqAzJ3w2puZHn0xlLPPw==",
-      "dev": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/browserslist"
@@ -3110,7 +3551,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -3216,7 +3656,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -3224,8 +3663,7 @@
     "node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "node_modules/color-support": {
       "version": "1.1.3",
@@ -3380,7 +3818,6 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
       "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
-      "dev": true,
       "dependencies": {
         "safe-buffer": "~5.1.1"
       }
@@ -3429,6 +3866,21 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
+    "node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/cross-fetch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
@@ -3565,7 +4017,6 @@
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
       "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -3796,8 +4247,7 @@
     "node_modules/electron-to-chromium": {
       "version": "1.4.53",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.53.tgz",
-      "integrity": "sha512-rFveSKQczlcav+H3zkKqykU6ANseFwXwkl855jOIap5/0gnEcuIhv2ecz6aoTrXavF6I/CEBeRnBnkB51k06ew==",
-      "dev": true
+      "integrity": "sha512-rFveSKQczlcav+H3zkKqykU6ANseFwXwkl855jOIap5/0gnEcuIhv2ecz6aoTrXavF6I/CEBeRnBnkB51k06ew=="
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -3876,7 +4326,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -3891,7 +4340,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
       "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -3906,7 +4354,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -4328,6 +4775,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -4354,9 +4806,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.14.7",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
-      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
+      "version": "1.14.8",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
+      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==",
       "funding": [
         {
           "type": "individual",
@@ -4460,8 +4912,7 @@
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "node_modules/gauge": {
       "version": "3.0.2",
@@ -4499,7 +4950,6 @@
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -4599,7 +5049,6 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -4715,7 +5164,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -4727,7 +5175,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -5019,14 +5466,37 @@
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true,
       "engines": {
-        "node": ">= 4"
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
+      "dev": true
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/immutable": {
+    "node_modules/import-fresh/node_modules/resolve-from": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
-      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "engines": {
+        "node": ">=4"
+      }
     },
     "node_modules/import-local": {
       "version": "3.1.0",
@@ -5130,8 +5600,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
-      "dev": true
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
@@ -5149,7 +5618,6 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
       "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==",
-      "dev": true,
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -5421,7 +5889,6 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true,
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -5438,8 +5905,7 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "node_modules/json-schema": {
       "version": "0.4.0",
@@ -5467,7 +5933,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
       "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
-      "dev": true,
       "dependencies": {
         "minimist": "^1.2.5"
       },
@@ -5630,8 +6095,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/loader-runner": {
       "version": "4.2.0",
@@ -5946,8 +6410,7 @@
     "node_modules/minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-      "dev": true
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
     },
     "node_modules/minimist-options": {
       "version": "4.1.0",
@@ -6073,8 +6536,7 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/multicast-dns": {
       "version": "6.2.3",
@@ -6233,8 +6695,7 @@
     "node_modules/node-releases": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
-      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
-      "dev": true
+      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA=="
     },
     "node_modules/node-sass": {
       "version": "7.0.1",
@@ -6615,11 +7076,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -6672,8 +7143,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-to-regexp": {
       "version": "0.1.7",
@@ -6685,7 +7155,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -6699,8 +7168,7 @@
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -7525,7 +7993,6 @@
       "version": "1.22.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
       "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.8.1",
         "path-parse": "^1.0.7",
@@ -7619,8 +8086,7 @@
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
@@ -7765,7 +8231,6 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -8026,7 +8491,6 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8292,11 +8756,15 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -8308,7 +8776,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -8458,7 +8925,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -9294,6 +9760,14 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/yargs": {
       "version": "17.3.1",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.3.1.tgz",
@@ -9353,7 +9827,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
       "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
-      "dev": true,
       "requires": {
         "@babel/highlight": "^7.16.7"
       }
@@ -9361,14 +9834,12 @@
     "@babel/compat-data": {
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.8.tgz",
-      "integrity": "sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q==",
-      "dev": true
+      "integrity": "sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q=="
     },
     "@babel/core": {
       "version": "7.16.12",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz",
       "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.16.8",
@@ -9391,7 +9862,6 @@
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
       "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.8",
         "jsesc": "^2.5.1",
@@ -9421,7 +9891,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz",
       "integrity": "sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==",
-      "dev": true,
       "requires": {
         "@babel/compat-data": "^7.16.4",
         "@babel/helper-validator-option": "^7.16.7",
@@ -9474,7 +9943,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
       "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -9492,7 +9960,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz",
       "integrity": "sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==",
-      "dev": true,
       "requires": {
         "@babel/helper-get-function-arity": "^7.16.7",
         "@babel/template": "^7.16.7",
@@ -9503,7 +9970,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz",
       "integrity": "sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -9512,7 +9978,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
       "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -9530,7 +9995,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
       "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -9539,7 +10003,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz",
       "integrity": "sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==",
-      "dev": true,
       "requires": {
         "@babel/helper-environment-visitor": "^7.16.7",
         "@babel/helper-module-imports": "^7.16.7",
@@ -9563,8 +10026,7 @@
     "@babel/helper-plugin-utils": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
-      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
-      "dev": true
+      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA=="
     },
     "@babel/helper-remap-async-to-generator": {
       "version": "7.16.8",
@@ -9594,7 +10056,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz",
       "integrity": "sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -9612,7 +10073,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
       "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -9620,14 +10080,12 @@
     "@babel/helper-validator-identifier": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
-      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
-      "dev": true
+      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw=="
     },
     "@babel/helper-validator-option": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
-      "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==",
-      "dev": true
+      "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ=="
     },
     "@babel/helper-wrap-function": {
       "version": "7.16.8",
@@ -9645,7 +10103,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.16.7.tgz",
       "integrity": "sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==",
-      "dev": true,
       "requires": {
         "@babel/template": "^7.16.7",
         "@babel/traverse": "^7.16.7",
@@ -9656,7 +10113,6 @@
       "version": "7.16.10",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.10.tgz",
       "integrity": "sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==",
-      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.16.7",
         "chalk": "^2.0.0",
@@ -9666,8 +10122,7 @@
     "@babel/parser": {
       "version": "7.16.12",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.12.tgz",
-      "integrity": "sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A==",
-      "dev": true
+      "integrity": "sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A=="
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.16.7",
@@ -9905,7 +10360,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz",
       "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==",
-      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -10447,9 +10901,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
-      "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
+      "version": "7.17.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
+      "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -10458,7 +10912,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
       "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
         "@babel/parser": "^7.16.7",
@@ -10469,7 +10922,6 @@
       "version": "7.16.10",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.10.tgz",
       "integrity": "sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.16.8",
@@ -10487,7 +10939,6 @@
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz",
       "integrity": "sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==",
-      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.16.7",
         "to-fast-properties": "^2.0.0"
@@ -10499,11 +10950,127 @@
       "integrity": "sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA==",
       "dev": true
     },
+    "@emotion/babel-plugin": {
+      "version": "11.7.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
+      "integrity": "sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==",
+      "requires": {
+        "@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.13"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "4.0.13"
+      }
+    },
     "@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.1.tgz",
+      "integrity": "sha512-bW1Tos67CZkOURLc0OalnfxtSXQJMrAMV0jZTVGJUPSOd4qgjF3+tTD5CwJM13PHA8cltGW1WGbbvV9NpvUZPw==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "@emotion/react": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.7.1.tgz",
+      "integrity": "sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/cache": "^11.7.1",
+        "@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": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+          "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+        }
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+    },
+    "@emotion/styled": {
+      "version": "11.6.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.6.0.tgz",
+      "integrity": "sha512-mxVtVyIOTmCAkFbwIp+nCjTXJNgcz4VWkOYQro87jE2QBTydnkiYusMrRGFtzuruiGK4dDaNORk4gH049iiQuw==",
+      "requires": {
+        "@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/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@gar/promisify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz",
@@ -10587,6 +11154,145 @@
         "react-is": "^16.8.0 || ^17.0.0"
       }
     },
+    "@mui/base": {
+      "version": "5.0.0-alpha.68",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.68.tgz",
+      "integrity": "sha512-q+3gX6EHuM/AyOn8fkoANQxSzIHBeuNsrGgb7SPP0y7NuM+4ZHG/b9882+OfHcilaSqPDWUQoLbphcBpw/m/RA==",
+      "requires": {
+        "@babel/runtime": "^7.17.0",
+        "@emotion/is-prop-valid": "^1.1.1",
+        "@mui/utils": "^5.4.1",
+        "@popperjs/core": "^2.4.4",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      }
+    },
+    "@mui/icons-material": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.4.1.tgz",
+      "integrity": "sha512-koiq9q2GfjXRUWcC5fEi1b+EA4vfJHgIaAdBHlkOrBx2cnmmazQcyib501eodPfaZGx9BikrhivODaNQYQq8hA==",
+      "requires": {
+        "@babel/runtime": "^7.17.0"
+      }
+    },
+    "@mui/material": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.4.1.tgz",
+      "integrity": "sha512-SxAT43UAjFTBBpJrN+oGrv40xP1uCa5Z49NfHt3m93xYeFzbxKOk0V9IKU7zlUjbsaVQ0i+o24yF5GULZmynlA==",
+      "requires": {
+        "@babel/runtime": "^7.17.0",
+        "@mui/base": "5.0.0-alpha.68",
+        "@mui/system": "^5.4.1",
+        "@mui/types": "^7.1.1",
+        "@mui/utils": "^5.4.1",
+        "@types/react-transition-group": "^4.4.4",
+        "clsx": "^1.1.1",
+        "csstype": "^3.0.10",
+        "hoist-non-react-statics": "^3.3.2",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2",
+        "react-transition-group": "^4.4.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+          "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+        }
+      }
+    },
+    "@mui/private-theming": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.4.1.tgz",
+      "integrity": "sha512-Xbc4MXFZxv0A3hoc4TSDBhzjhstppKfc+gQcTMqqBZQP7KjnmxF+wO7rEPQuYRBihjCqQBdrHIGMLsKWrhkZkQ==",
+      "requires": {
+        "@babel/runtime": "^7.17.0",
+        "@mui/utils": "^5.4.1",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@mui/styled-engine": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.4.1.tgz",
+      "integrity": "sha512-CFLNJkopRoAuShkgUZOTBVxdTlKu4w6L4kOwPi4r3QB2XXS6O5kyLHSsg9huUbtOYk5Dv5UZyUSc5pw4J7ezdg==",
+      "requires": {
+        "@babel/runtime": "^7.17.0",
+        "@emotion/cache": "^11.7.1",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@mui/styles": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.4.1.tgz",
+      "integrity": "sha512-ekw2NBC06re0H9SvCA1XgtFcghB8AQdGPXD3mjIz5ik+X+LvR+f2TeoCpJpkKp7UQdcNn6uuYi6BO6irTiQhdw==",
+      "requires": {
+        "@babel/runtime": "^7.17.0",
+        "@emotion/hash": "^0.8.0",
+        "@mui/private-theming": "^5.4.1",
+        "@mui/types": "^7.1.1",
+        "@mui/utils": "^5.4.1",
+        "clsx": "^1.1.1",
+        "csstype": "^3.0.10",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.8.2",
+        "jss-plugin-camel-case": "^10.8.2",
+        "jss-plugin-default-unit": "^10.8.2",
+        "jss-plugin-global": "^10.8.2",
+        "jss-plugin-nested": "^10.8.2",
+        "jss-plugin-props-sort": "^10.8.2",
+        "jss-plugin-rule-value-function": "^10.8.2",
+        "jss-plugin-vendor-prefixer": "^10.8.2",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+          "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+        }
+      }
+    },
+    "@mui/system": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.4.1.tgz",
+      "integrity": "sha512-07JBYf9iQdxIHZU8cFOLoxBnkQDUPLb7UBhNxo4998yEqpWFJ00WKgEVYBKvPl0X+MRU/20wqFz6yGIuCx4AeA==",
+      "requires": {
+        "@babel/runtime": "^7.17.0",
+        "@mui/private-theming": "^5.4.1",
+        "@mui/styled-engine": "^5.4.1",
+        "@mui/types": "^7.1.1",
+        "@mui/utils": "^5.4.1",
+        "clsx": "^1.1.1",
+        "csstype": "^3.0.10",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+          "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+        }
+      }
+    },
+    "@mui/types": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.1.tgz",
+      "integrity": "sha512-33hbHFLCwenTpS+T4m4Cz7cQ/ng5g+IgtINkw1uDBVvi1oM83VNt/IGzWIQNPK8H2pr0WIfkmboD501bVdYsPw==",
+      "requires": {}
+    },
+    "@mui/utils": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.4.1.tgz",
+      "integrity": "sha512-5HzM+ZjlQqbSp7UTOvLlhAjkWB+o9Z4NzO0W+yhZ1KnxITr+zr/MBzYmmQ3kyvhui8pyhgRDoTcVgwb+02ZUZA==",
+      "requires": {
+        "@babel/runtime": "^7.17.0",
+        "@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"
+      }
+    },
     "@nicolo-ribaudo/chokidar-2": {
       "version": "2.1.8-no-fsevents.3",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz",
@@ -10793,6 +11499,11 @@
       "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
       "dev": true
     },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
     "@types/prop-types": {
       "version": "15.7.4",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
@@ -10827,6 +11538,14 @@
         }
       }
     },
+    "@types/react-is": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
+      "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-transition-group": {
       "version": "4.4.4",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
@@ -11199,7 +11918,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -11341,6 +12059,16 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz",
@@ -11508,7 +12236,6 @@
       "version": "4.19.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
       "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==",
-      "dev": true,
       "requires": {
         "caniuse-lite": "^1.0.30001286",
         "electron-to-chromium": "^1.4.17",
@@ -11571,6 +12298,11 @@
         "get-intrinsic": "^1.0.2"
       }
     },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
+    },
     "camelcase": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
@@ -11591,8 +12323,7 @@
     "caniuse-lite": {
       "version": "1.0.30001302",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001302.tgz",
-      "integrity": "sha512-YYTMO+tfwvgUN+1ZnRViE53Ma1S/oETg+J2lISsqi/ZTNThj3ZYBOKP2rHwJc37oCsPqAzJ3w2puZHn0xlLPPw==",
-      "dev": true
+      "integrity": "sha512-YYTMO+tfwvgUN+1ZnRViE53Ma1S/oETg+J2lISsqi/ZTNThj3ZYBOKP2rHwJc37oCsPqAzJ3w2puZHn0xlLPPw=="
     },
     "caseless": {
       "version": "0.12.0",
@@ -11604,7 +12335,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -11681,7 +12411,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -11689,8 +12418,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-support": {
       "version": "1.1.3",
@@ -11811,7 +12539,6 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
       "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.1"
       }
@@ -11852,6 +12579,18 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
+    "cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "requires": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      }
+    },
     "cross-fetch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
@@ -11954,7 +12693,6 @@
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
       "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-      "dev": true,
       "requires": {
         "ms": "2.1.2"
       }
@@ -12144,8 +12882,7 @@
     "electron-to-chromium": {
       "version": "1.4.53",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.53.tgz",
-      "integrity": "sha512-rFveSKQczlcav+H3zkKqykU6ANseFwXwkl855jOIap5/0gnEcuIhv2ecz6aoTrXavF6I/CEBeRnBnkB51k06ew==",
-      "dev": true
+      "integrity": "sha512-rFveSKQczlcav+H3zkKqykU6ANseFwXwkl855jOIap5/0gnEcuIhv2ecz6aoTrXavF6I/CEBeRnBnkB51k06ew=="
     },
     "emoji-regex": {
       "version": "8.0.0",
@@ -12206,7 +12943,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "requires": {
         "is-arrayish": "^0.2.1"
       }
@@ -12220,8 +12956,7 @@
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
     },
     "escape-html": {
       "version": "1.0.3",
@@ -12232,8 +12967,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "eslint-scope": {
       "version": "5.1.1",
@@ -12565,6 +13299,11 @@
         }
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -12585,9 +13324,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.14.7",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
-      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
+      "version": "1.14.8",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
+      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA=="
     },
     "forever-agent": {
       "version": "0.6.1",
@@ -12655,8 +13394,7 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "gauge": {
       "version": "3.0.2",
@@ -12687,8 +13425,7 @@
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
     },
     "get-caller-file": {
       "version": "2.0.5",
@@ -12760,8 +13497,7 @@
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
     },
     "globby": {
       "version": "11.1.0",
@@ -12850,7 +13586,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -12858,8 +13593,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-symbols": {
       "version": "1.0.2",
@@ -13106,6 +13840,22 @@
       "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
       "dev": true
     },
+    "import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+        }
+      }
+    },
     "import-local": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
@@ -13181,8 +13931,7 @@
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
-      "dev": true
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
     },
     "is-binary-path": {
       "version": "2.1.0",
@@ -13197,7 +13946,6 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
       "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==",
-      "dev": true,
       "requires": {
         "has": "^1.0.3"
       }
@@ -13395,8 +14143,7 @@
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
     },
     "json-parse-better-errors": {
       "version": "1.0.2",
@@ -13407,8 +14154,7 @@
     "json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "json-schema": {
       "version": "0.4.0",
@@ -13436,7 +14182,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
       "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
-      "dev": true,
       "requires": {
         "minimist": "^1.2.5"
       }
@@ -13579,8 +14324,7 @@
     "lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "loader-runner": {
       "version": "4.2.0",
@@ -13824,8 +14568,7 @@
     "minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-      "dev": true
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
     },
     "minimist-options": {
       "version": "4.1.0",
@@ -13919,8 +14662,7 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -14037,8 +14779,7 @@
     "node-releases": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
-      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
-      "dev": true
+      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA=="
     },
     "node-sass": {
       "version": "7.0.1",
@@ -14313,11 +15054,18 @@
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
       "dev": true
     },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
     "parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -14352,8 +15100,7 @@
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "path-to-regexp": {
       "version": "0.1.7",
@@ -14364,8 +15111,7 @@
     "path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
     "performance-now": {
       "version": "2.1.0",
@@ -14376,8 +15122,7 @@
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "picomatch": {
       "version": "2.3.1",
@@ -15014,7 +15759,6 @@
       "version": "1.22.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
       "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
-      "dev": true,
       "requires": {
         "is-core-module": "^2.8.1",
         "path-parse": "^1.0.7",
@@ -15069,8 +15813,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "safer-buffer": {
       "version": "2.1.2",
@@ -15167,8 +15910,7 @@
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
     },
     "send": {
       "version": "0.17.2",
@@ -15395,8 +16137,7 @@
     "source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
     },
     "source-map-js": {
       "version": "1.0.2",
@@ -15607,11 +16348,15 @@
       "dev": true,
       "requires": {}
     },
+    "stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -15619,8 +16364,7 @@
     "supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
     "tapable": {
       "version": "2.2.1",
@@ -15713,8 +16457,7 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-      "dev": true
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
     },
     "to-regex-range": {
       "version": "5.0.1",
@@ -16310,6 +17053,11 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
+    },
     "yargs": {
       "version": "17.3.1",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.3.1.tgz",
diff --git a/static/package.json b/static/package.json
index 65e165c..756c915 100644
--- a/static/package.json
+++ b/static/package.json
@@ -27,8 +27,13 @@
     "webpack-dev-server": "^4.7.3"
   },
   "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
     "@material-ui/core": "^4.10.1",
     "@material-ui/icons": "^4.11.2",
+    "@mui/icons-material": "^5.4.1",
+    "@mui/material": "^5.4.1",
+    "@mui/styles": "^5.4.1",
     "axios": "^0.25.0",
     "bootstrap": "^5.1.3",
     "cytoscape": "^3.20.0",
diff --git a/static/src/template/SchemaModal.jsx b/static/src/template/SchemaModal.jsx
deleted file mode 100644
index 98959c4..0000000
--- a/static/src/template/SchemaModal.jsx
+++ /dev/null
@@ -1,231 +0,0 @@
-import React, { Component } from 'react';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup } from 'reactstrap';
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-
-import axios from 'axios';
-import AddCircleIcon from '@material-ui/icons/AddCircle';
-// import LineStyleIcon from '@material-ui/icons/LineStyle';
-// import PersonIcon from '@material-ui/icons/Person';
-// import ChildCareIcon from '@material-ui/icons/ChildCare';
-
-/* Shows a pop-up window to create and edit JSON data. */
-// TODO: add submitted data to json
-// TODO: add child areas
-class SchemaModal extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      modal: false,
-      valid: false,
-      id: "",
-      name: "",
-      comment: "",
-      description: "",
-      aka: "",
-      qnode: "",
-      qlabel: "",
-      minDuration: "",
-      maxDuration: "",
-      goal: "",
-      ta1explanation: "",
-      importance: "1.0",
-      children_gate: "OR",
-      repeatable: false
-    }
-    this.toggle = this.toggle.bind(this);
-    this.onChangeHandler = this.onChangeHandler.bind(this);
-    this.validate = this.validate.bind(this);
-    this.onClickHandler = this.onClickHandler.bind(this);
-  }
-
-  toggle() {
-    this.setState({
-      modal: !this.state.modal,
-      id: "",
-      name: "",
-      comment: "",
-      description: "",
-      aka: "",
-      qnode: "",
-      qlabel: "",
-      minDuration: "",
-      maxDuration: "",
-      goal: "",
-      ta1explanation: "",
-      importance: "1.0",
-      children_gate: "OR"
-    })
-  }
-
-  validate() {
-    /*
-    Checks whether required text fields are completed
-    and are the right format.
-    */
-    const err = [];
-    
-    // id, name, ta1explanation, importance
-    if (this.state.id.length === 0){
-      err.push("@ID cannot be blank.\n");
-    }
-    if (this.state.name.length === 0){
-      err.push("Name cannot be blank.\n");
-    }
-    if (this.state.ta1explanation.length === 0){
-      err.push("TA1 explanation cannot be blank.\n");
-    }
-    if (this.state.importance > 1 || this.state.importance < 0){
-      err.push("Importance must be a number between 0 and 1.\n");
-    }
-    if (this.state.qnode.length !== 0){
-      var isValidQNode = false;
-      if(/Q\d/.test(this.state.qnode)){
-        isValidQNode = true;
-      }
-
-      if (!isValidQNode){
-        err.push("Invalid QNode.\n")
-      }
-    }
-    // show errors
-    for (var z = 0; z < err.length; z++) { 
-      toast.error(err[z]);
-    }
-    return err.length === 0;
-  }
-
-  onChangeHandler(event) {
-    // Set state of inputs.
-    if (event.target.name === "repeatable"){
-      event.target.value = !event.target.value
-    }
-    this.setState({
-      [event.target.name]: event.target.value
-    });
-  }
-
-  onClickHandler() {
-    /*
-    Validates fields and handles add button.
-    Shows success or failure.
-    If success, closes the sub window.
-    */
-    
-    validated = this.validate();
-    if (validated){
-      // const data = new FormData();
-      // for (var x = 0; x < this.state.selectedFile.length; x++) {
-      //   data.append('file', this.state.selectedFile[x]);
-      // }
-      // axios.post("/upload", data, {
-      //   onUploadProgress: ProgressEvent => {
-      //     this.setState({
-      //       loaded: (ProgressEvent.loaded / ProgressEvent.total * 100),
-      //     })
-      //   }
-      // })
-      //   .then(res => { // then print response status
-      //     this.props.parentCallback(res.data)
-      //     toast.success('upload success');
-      //     setTimeout(this.toggle, 1000);
-      //   })
-      //   .catch(err => { // then print response status
-      //     this.setState({ valid: false });
-      //     toast.error('upload fail, check console');
-      //   });
-      setTimeout(this.toggle, 1000);
-    }
-  }
-
-  render() {
-    /*
-    Opens up a sub window when Upload Schema button is pressed,
-    where you can upload a file or cancel.
-    Checks the validity of the file.
-    Upon pressing upload, shows an upload progress bar.
-    */
-    
-    const openModal = () => {
-      document.getElementById("btn-modal").blur();
-      this.toggle();
-    }
-
-    return (
-      <div>
-        <div style={{'display': 'flex', 'justifyContent': 'center'}}>
-          <AddCircleIcon type="button" id="btn-modal" color="primary" onClick={openModal}/>
-        </div>
-        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
-          <ToastContainer />
-          <ModalHeader toggle={this.toggle}>Edit Scheme</ModalHeader>
-
-          <ModalBody>
-            <Form>
-              <FormGroup>
-                <Label>@id *<Input required name="id" className="form-control"
-                  type="text" value={this.state.id} onChange={this.onChangeHandler} /></Label>
-                <Label>name *<Input required name="name" className="form-control"
-                  type="text" value={this.state.name} onChange={this.onChangeHandler} /></Label>
-              </FormGroup>
-              <FormGroup>
-                <Label>comment<Input name="comment" className="form-control"
-                  type="text" value={this.state.comment} onChange={this.onChangeHandler} /></Label>
-                <Label>description<Input name="description" className="form-control"
-                  type="text" value={this.state.description} onChange={this.onChangeHandler} /></Label>
-              </FormGroup>
-              <FormGroup>
-                <Label>aka<Input name="aka" className="form-control"
-                  type="text" value={this.state.aka} onChange={this.onChangeHandler} /></Label>
-              </FormGroup>
-              <FormGroup>
-                <Label>qnode<Input name="qnode" className="form-control"
-                  type="text" value={this.state.qnode} onChange={this.onChangeHandler} /></Label>
-                <Label>qlabel<Input name="qlabel" className="form-control"
-                  type="text" value={this.state.qlabel} onChange={this.onChangeHandler} /></Label>
-              </FormGroup>
-              <FormGroup>
-                <Label>minDuration<Input name="minDuration" className="form-control"
-                  type="text" value={this.state.minDuration} onChange={this.onChangeHandler} /></Label>
-                <Label>maxDuration<Input name="maxDuration" className="form-control"
-                  type="text" value={this.state.maxDuration} onChange={this.onChangeHandler} /></Label>
-              </FormGroup>
-              <FormGroup>
-                <Label>ta1explanation *<textarea required name="ta1explanation" className="form-control"
-                  value={this.state.ta1explanation} onChange={this.onChangeHandler} /></Label>
-              </FormGroup>
-              <FormGroup>
-                <Label>goal<Input name="goal" className="form-control"
-                  type="text" value={this.state.goal} onChange={this.onChangeHandler} /></Label>
-                <Label>importance *<Input required name="importance" className="form-control"
-                  type="number" value={this.state.importance} onChange={this.onChangeHandler} /></Label>
-              </FormGroup>
-              <FormGroup>
-                <Label>children_gate *
-                  <select required name="children_gate" className="form-select" value={this.state.children_gate} onChange={this.onChangeHandler}>
-                    <option value="OR">OR</option>
-                    <option value="AND">AND</option>
-                    <option value="XOR">XOR</option>
-                  </select>
-                </Label>
-              </FormGroup>
-              <FormGroup> 
-                <Label>repeatable<Input name="repeatable" className="form-check-input"
-                  type="checkbox" checked={this.state.repeatable} onChange={this.onChangeHandler} /></Label>
-              </FormGroup>
-            </Form>
-          </ModalBody>
-
-          <ModalFooter>
-            <Button color="primary" onClick={this.onClickHandler}>
-              Add
-            </Button>{' '}
-            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
-          </ModalFooter>
-        </Modal>
-      </div>
-    );
-  }
-}
-
-export default SchemaModal;
\ No newline at end of file
diff --git a/static/src/template/SideBar.jsx b/static/src/template/SideBar.jsx
deleted file mode 100644
index 6a7921f..0000000
--- a/static/src/template/SideBar.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import Divider from '@material-ui/core/Divider';
-import isEmpty from 'lodash/isEmpty';
-
-function SideBar (props) {
-    /*
-    Handles sidebar that shows general information about a node
-    selected via right-click.
-    */
-    let i = 0;
-    const excluded_ids = ['id', '_label', '_type', '_shape'];
-    
-    return (
-        <div className={props.className}>
-            {isEmpty(props.data) ? '' : 
-                <List disablePadding dense>
-                    {Object.entries(props.data).map(([key, val]) => {
-                        if (!excluded_ids.includes(key)) {
-                            val = val.toString()
-
-                            return (
-                                <div key={++i}>
-                                    <ListItem key={key}>
-                                        <ListItemText style={{'overflowWrap': 'anywhere'}}>
-                                            <div>{key.toUpperCase()}:</div>
-                                            <div>{val}</div>
-                                        </ListItemText>
-                                    </ListItem>
-                                    <Divider />
-                                </div>
-                            )
-                        }
-                    })}
-                </List>
-            }
-        </div>
-    );
-}
-
-export default SideBar;
\ No newline at end of file
diff --git a/static/src/template/SideEditor.jsx b/static/src/template/SideEditor.jsx
index 70280a9..6467bdd 100644
--- a/static/src/template/SideEditor.jsx
+++ b/static/src/template/SideEditor.jsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from "react";
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import Divider from '@material-ui/core/Divider';
+import {
+    List,
+    ListItem,
+    ListItemText,
+    Divider
+} from '@mui/material/';
 import isEmpty from 'lodash/isEmpty';
 
-import axios from 'axios';
 import Editable from './Editable';
 
 function SideEditor (props) {
diff --git a/static/src/template/UploadModal.jsx b/static/src/template/UploadModal.jsx
index 25430e0..73e4376 100644
--- a/static/src/template/UploadModal.jsx
+++ b/static/src/template/UploadModal.jsx
@@ -1,8 +1,11 @@
 import React, { Component } from 'react';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup } from 'reactstrap';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
+import Button from '@mui/material/Button';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+
 import axios from 'axios';
 
 /* Upload modal to upload JSON file.
@@ -156,7 +159,7 @@ class UploadModal extends Component {
     return (
       <div>
         <div style={{'display': 'flex', 'justifyContent': 'center'}}>
-          <Button id="btn-modal" color="primary" onClick={openModal}>
+          <Button id="btn-modal" variant="contained" endIcon={<UploadFileIcon />} onClick={openModal}>
             {this.props.buttonLabel}
           </Button>
         </div>
@@ -174,10 +177,13 @@ class UploadModal extends Component {
           </ModalBody>
 
           <ModalFooter>
-            <Button disabled={!this.state.valid} color="primary" onClick={this.onClickHandler}>
+            <Button variant="contained" disabled={!this.state.valid} onClick={this.onClickHandler} endIcon={<UploadFileIcon />}>
               Upload
-            </Button>{' '}
-            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
+            </Button>
+            {' '}
+            <Button variant="outlined" color="info" onClick={this.toggle}>
+              Cancel
+            </Button>
           </ModalFooter>
         </Modal>
       </div>
diff --git a/static/src/template/Viewer.jsx b/static/src/template/Viewer.jsx
index d13f917..b00b6f9 100644
--- a/static/src/template/Viewer.jsx
+++ b/static/src/template/Viewer.jsx
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import isEmpty from 'lodash/isEmpty';
-import DownloadIcon from '@material-ui/icons/CloudDownload';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-
+import IconButton from '@mui/material/IconButton';
+import DownloadIcon from '@mui/icons-material/CloudDownload';
 
 import axios from 'axios';
 import UploadModal from './UploadModal';
@@ -149,7 +149,9 @@ class Viewer extends Component {
                 <div className='container'>
                     <ToastContainer theme="colored"/>
                     <UploadModal buttonLabel="Upload Schema" parentCallback={this.callbackFunction} />
-                    <DownloadIcon className="button" type="button" color={this.state.isUpload ? "action" : "disabled"} onClick={this.download}/>
+                    <IconButton aria-label="download" disabled={!this.state.isUpload} color="primary" onClick={this.download}>
+                        <DownloadIcon />
+                    </IconButton>
                     <a style={{display: "none"}}
                         download={this.state.fileName}
                         href={this.state.downloadUrl}

From ade8b66469ad41d78a78789c39b864ccb15a9e15 Mon Sep 17 00:00:00 2001
From: iris-liu0312 <iris.liu0312@gmail.com>
Date: Fri, 11 Feb 2022 17:10:48 -0700
Subject: [PATCH 6/6] fix downloaded image scale

---
 static/src/template/Canvas.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/src/template/Canvas.jsx b/static/src/template/Canvas.jsx
index 4d7f464..1d9bedc 100644
--- a/static/src/template/Canvas.jsx
+++ b/static/src/template/Canvas.jsx
@@ -125,7 +125,7 @@ class Canvas extends React.Component {
 
     download(event){
         event.preventDefault();
-        const image = this.cy.png({output: 'blob', bg: 'white', scale:'1'});
+        const image = this.cy.png({output: 'blob', bg: 'white', scale:'1.5'});
         const url = URL.createObjectURL(image);
         this.setState({downloadUrl: url},
             () => {