From 129ea7292368002a6282e87b5d3d9f1ec82ba953 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 23 Mar 2023 08:50:52 +0000
Subject: [PATCH] fix(deps): update dependency grommet to v2.31.0

---
 package.json                                  |   2 +-
 .../__snapshots__/index.test.tsx.snap         | 148 ++++++-------
 .../__snapshots__/index.test.tsx.snap         |   3 -
 .../__snapshots__/index.test.tsx.snap         |   3 -
 .../__snapshots__/index.test.tsx.snap         |   3 -
 .../__snapshots__/index.test.tsx.snap         | 196 ++++++++----------
 .../__snapshots__/index.test.tsx.snap         |   3 -
 .../__snapshots__/index.test.tsx.snap         |   3 -
 yarn.lock                                     |  22 +-
 9 files changed, 158 insertions(+), 225 deletions(-)

diff --git a/package.json b/package.json
index ee0835a375..e147d3f212 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
     "bip39": "3.1.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "copy-to-clipboard": "3.3.3",
-    "grommet": "2.30.0",
+    "grommet": "2.31.0",
     "grommet-icons": "4.10.0",
     "i18next": "22.4.13",
     "i18next-browser-languagedetector": "7.0.1",
diff --git a/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap
index 4631d8c65c..7047e5e991 100644
--- a/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap
@@ -217,25 +217,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   padding: 24px;
 }
 
-.c22 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  max-width: 100%;
-  margin-bottom: 12px;
-  min-width: 0;
-  min-height: 0;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-}
-
-.c24 {
+.c23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -250,7 +232,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c28 {
+.c27 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -269,7 +251,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c31 {
+.c30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -288,7 +270,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   flex-basis: 75%;
 }
 
-.c32 {
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -303,7 +285,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c33 {
+.c32 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -365,7 +347,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   flex-wrap: wrap;
 }
 
-.c27 {
+.c26 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -375,7 +357,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   height: 24px;
 }
 
-.c30 {
+.c29 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -416,7 +398,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   font-weight: bold;
 }
 
-.c23 {
+.c22 {
   margin-left: 12px;
   margin-right: 12px;
   margin-top: 6px;
@@ -482,7 +464,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   border: 0;
 }
 
-.c29 {
+.c28 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -511,48 +493,48 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   font-weight: bold;
 }
 
-.c29:hover {
+.c28:hover {
   box-shadow: 0px 0px 0px 2px #0092f6;
 }
 
-.c29:focus {
+.c28:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c29:focus > circle,
-.c29:focus > ellipse,
-.c29:focus > line,
-.c29:focus > path,
-.c29:focus > polygon,
-.c29:focus > polyline,
-.c29:focus > rect {
+.c28:focus > circle,
+.c28:focus > ellipse,
+.c28:focus > line,
+.c28:focus > path,
+.c28:focus > polygon,
+.c28:focus > polyline,
+.c28:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c29:focus::-moz-focus-inner {
+.c28:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c29:focus:not(:focus-visible) {
+.c28:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c29:focus:not(:focus-visible) > circle,.c29:focus:not(:focus-visible) > ellipse,
-.c29:focus:not(:focus-visible) > line,.c29:focus:not(:focus-visible) > path,
-.c29:focus:not(:focus-visible) > polygon,.c29:focus:not(:focus-visible) > polyline,
-.c29:focus:not(:focus-visible) > rect {
+.c28:focus:not(:focus-visible) > circle,.c28:focus:not(:focus-visible) > ellipse,
+.c28:focus:not(:focus-visible) > line,.c28:focus:not(:focus-visible) > path,
+.c28:focus:not(:focus-visible) > polygon,.c28:focus:not(:focus-visible) > polyline,
+.c28:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c29:focus:not(:focus-visible)::-moz-focus-inner {
+.c28:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c34 {
+.c33 {
   font-size: 26px;
   line-height: 32px;
   max-width: 624px;
@@ -560,7 +542,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   overflow-wrap: break-word;
 }
 
-.c26 {
+.c25 {
   box-sizing: border-box;
   font-size: inherit;
   font-family: inherit;
@@ -578,33 +560,33 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   border: none;
 }
 
-.c26::-webkit-input-placeholder {
+.c25::-webkit-input-placeholder {
   color: #AAAAAA;
 }
 
-.c26::-moz-placeholder {
+.c25::-moz-placeholder {
   color: #AAAAAA;
 }
 
-.c26:-ms-input-placeholder {
+.c25:-ms-input-placeholder {
   color: #AAAAAA;
 }
 
-.c26::-webkit-search-decoration {
+.c25::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-.c26::-moz-focus-inner {
+.c25::-moz-focus-inner {
   border: none;
   outline: none;
 }
 
-.c26:-moz-placeholder,
-.c26::-moz-placeholder {
+.c25:-moz-placeholder,
+.c25::-moz-placeholder {
   opacity: 1;
 }
 
-.c25 {
+.c24 {
   position: relative;
   width: 100%;
 }
@@ -770,37 +752,31 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c22 {
-    margin-bottom: 6px;
-  }
-}
-
-@media only screen and (max-width:768px) {
-  .c24 {
+  .c23 {
     border-bottom: solid 1px rgba(0,0,0,0.33);
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c28 {
+  .c27 {
     margin-top: 12px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c32 {
+  .c31 {
     margin: 0px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c33 {
+  .c32 {
     border: solid 1px #EDEDED;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c33 {
+  .c32 {
     padding: 24px;
   }
 }
@@ -813,20 +789,20 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c27 {
+  .c26 {
     height: 12px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c30 {
+  .c29 {
     width: auto;
     height: 6px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c34 {
+  .c33 {
     font-size: 18px;
     line-height: 24px;
     max-width: 432px;
@@ -1074,23 +1050,23 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
               class="c21"
             >
               <div
-                class="c22 "
+                class="c2 "
               >
                 <label
-                  class="c23"
+                  class="c22"
                   for="recipient-id"
                 >
                   Recipient
                 </label>
                 <div
-                  class="c24 "
+                  class="c23 "
                 >
                   <div
-                    class="c25"
+                    class="c24"
                   >
                     <input
                       autocomplete="off"
-                      class="c26"
+                      class="c25"
                       id="recipient-id"
                       name="recipient"
                       placeholder="Enter an address"
@@ -1101,26 +1077,26 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c27"
+                class="c26"
               />
               <div
-                class="c22 "
+                class="c2 "
               >
                 <label
-                  class="c23"
+                  class="c22"
                   for="amount-id"
                 >
                   Amount
                 </label>
                 <div
-                  class="c24 "
+                  class="c23 "
                 >
                   <div
-                    class="c25"
+                    class="c24"
                   >
                     <input
                       autocomplete="off"
-                      class="c26"
+                      class="c25"
                       id="amount-id"
                       min="0"
                       name="amount"
@@ -1134,13 +1110,13 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c27"
+                class="c26"
               />
               <div
-                class="c28"
+                class="c27"
               >
                 <button
-                  class="c29"
+                  class="c28"
                   type="submit"
                 >
                   Send
@@ -1151,19 +1127,19 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="c30"
+        class="c29"
       />
       <div
-        class="c31"
+        class="c30"
       >
         <div
-          class="c32"
+          class="c31"
         >
           <div
-            class="c33"
+            class="c32"
           >
             <h3
-              class="c34"
+              class="c33"
             >
               No transactions found.
             </h3>
diff --git a/src/app/pages/OpenWalletPage/Features/FromMnemonic/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/OpenWalletPage/Features/FromMnemonic/__tests__/__snapshots__/index.test.tsx.snap
index 6eb17443b9..9ac1a1cb8c 100644
--- a/src/app/pages/OpenWalletPage/Features/FromMnemonic/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/OpenWalletPage/Features/FromMnemonic/__tests__/__snapshots__/index.test.tsx.snap
@@ -34,9 +34,6 @@ exports[`<FromMnemonic/> should match snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
 }
 
 .c6 {
diff --git a/src/app/pages/OpenWalletPage/Features/FromPrivateKey/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/OpenWalletPage/Features/FromPrivateKey/__tests__/__snapshots__/index.test.tsx.snap
index 173a74a33c..400acfc05b 100644
--- a/src/app/pages/OpenWalletPage/Features/FromPrivateKey/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/OpenWalletPage/Features/FromPrivateKey/__tests__/__snapshots__/index.test.tsx.snap
@@ -81,9 +81,6 @@ exports[`<FromPrivateKey  /> should match snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
 }
 
 .c6 {
diff --git a/src/app/pages/ParaTimesPage/ParaTimeSelection/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/ParaTimesPage/ParaTimeSelection/__tests__/__snapshots__/index.test.tsx.snap
index fa5e3c5c38..943b705d92 100644
--- a/src/app/pages/ParaTimesPage/ParaTimeSelection/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/ParaTimesPage/ParaTimeSelection/__tests__/__snapshots__/index.test.tsx.snap
@@ -128,9 +128,6 @@ exports[`<ParaTimeSelection /> should render component 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
 }
 
 .c8 {
diff --git a/src/app/pages/ParaTimesPage/TransactionAmount/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/ParaTimesPage/TransactionAmount/__tests__/__snapshots__/index.test.tsx.snap
index e20c9db7b1..290a2b313f 100644
--- a/src/app/pages/ParaTimesPage/TransactionAmount/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/ParaTimesPage/TransactionAmount/__tests__/__snapshots__/index.test.tsx.snap
@@ -43,10 +43,6 @@ exports[`<TransactionAmount /> should render EVMc withdraw variant component 1`]
 
 }
 
-@media only screen and (max-width:768px) {
-
-}
-
 <span
   class="c0"
   data-testid="paraTime-content-description"
@@ -164,24 +160,6 @@ exports[`<TransactionAmount /> should render component 1`] = `
 }
 
 .c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  max-width: 100%;
-  margin-bottom: 12px;
-  min-width: 0;
-  min-height: 0;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-}
-
-.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -196,7 +174,7 @@ exports[`<TransactionAmount /> should render component 1`] = `
   flex-direction: column;
 }
 
-.c14 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -214,7 +192,7 @@ exports[`<TransactionAmount /> should render component 1`] = `
   flex-direction: column;
 }
 
-.c17 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -230,7 +208,7 @@ exports[`<TransactionAmount /> should render component 1`] = `
   padding-bottom: 24px;
 }
 
-.c18 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -248,7 +226,7 @@ exports[`<TransactionAmount /> should render component 1`] = `
   flex-direction: column;
 }
 
-.c20 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -262,7 +240,7 @@ exports[`<TransactionAmount /> should render component 1`] = `
   flex-direction: column;
 }
 
-.c22 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -287,20 +265,20 @@ exports[`<TransactionAmount /> should render component 1`] = `
   text-align: center;
 }
 
-.c15 {
+.c14 {
   font-size: 14px;
   line-height: 20px;
   font-weight: bolder;
 }
 
-.c16 {
+.c15 {
   font-size: 12px;
   line-height: 18px;
   color: lightText;
   font-weight: 600;
 }
 
-.c12 {
+.c11 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -318,44 +296,44 @@ exports[`<TransactionAmount /> should render component 1`] = `
   text-align: inherit;
 }
 
-.c12:focus {
+.c11:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c12:focus > circle,
-.c12:focus > ellipse,
-.c12:focus > line,
-.c12:focus > path,
-.c12:focus > polygon,
-.c12:focus > polyline,
-.c12:focus > rect {
+.c11:focus > circle,
+.c11:focus > ellipse,
+.c11:focus > line,
+.c11:focus > path,
+.c11:focus > polygon,
+.c11:focus > polyline,
+.c11:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c12:focus::-moz-focus-inner {
+.c11:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c12:focus:not(:focus-visible) {
+.c11:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c12:focus:not(:focus-visible) > circle,.c12:focus:not(:focus-visible) > ellipse,
-.c12:focus:not(:focus-visible) > line,.c12:focus:not(:focus-visible) > path,
-.c12:focus:not(:focus-visible) > polygon,.c12:focus:not(:focus-visible) > polyline,
-.c12:focus:not(:focus-visible) > rect {
+.c11:focus:not(:focus-visible) > circle,.c11:focus:not(:focus-visible) > ellipse,
+.c11:focus:not(:focus-visible) > line,.c11:focus:not(:focus-visible) > path,
+.c11:focus:not(:focus-visible) > polygon,.c11:focus:not(:focus-visible) > polyline,
+.c11:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c12:focus:not(:focus-visible)::-moz-focus-inner {
+.c11:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c19 {
+.c18 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -381,48 +359,48 @@ exports[`<TransactionAmount /> should render component 1`] = `
   transition-timing-function: ease-in-out;
 }
 
-.c19:hover {
+.c18:hover {
   box-shadow: 0px 0px 0px 2px #7D4CDB;
 }
 
-.c19:focus {
+.c18:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c19:focus > circle,
-.c19:focus > ellipse,
-.c19:focus > line,
-.c19:focus > path,
-.c19:focus > polygon,
-.c19:focus > polyline,
-.c19:focus > rect {
+.c18:focus > circle,
+.c18:focus > ellipse,
+.c18:focus > line,
+.c18:focus > path,
+.c18:focus > polygon,
+.c18:focus > polyline,
+.c18:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c19:focus::-moz-focus-inner {
+.c18:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c19:focus:not(:focus-visible) {
+.c18:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c19:focus:not(:focus-visible) > circle,.c19:focus:not(:focus-visible) > ellipse,
-.c19:focus:not(:focus-visible) > line,.c19:focus:not(:focus-visible) > path,
-.c19:focus:not(:focus-visible) > polygon,.c19:focus:not(:focus-visible) > polyline,
-.c19:focus:not(:focus-visible) > rect {
+.c18:focus:not(:focus-visible) > circle,.c18:focus:not(:focus-visible) > ellipse,
+.c18:focus:not(:focus-visible) > line,.c18:focus:not(:focus-visible) > path,
+.c18:focus:not(:focus-visible) > polygon,.c18:focus:not(:focus-visible) > polyline,
+.c18:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c19:focus:not(:focus-visible)::-moz-focus-inner {
+.c18:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c23 {
+.c22 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -451,48 +429,48 @@ exports[`<TransactionAmount /> should render component 1`] = `
   width: 100%;
 }
 
-.c23:hover {
+.c22:hover {
   box-shadow: 0px 0px 0px 2px #7D4CDB;
 }
 
-.c23:focus {
+.c22:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c23:focus > circle,
-.c23:focus > ellipse,
-.c23:focus > line,
-.c23:focus > path,
-.c23:focus > polygon,
-.c23:focus > polyline,
-.c23:focus > rect {
+.c22:focus > circle,
+.c22:focus > ellipse,
+.c22:focus > line,
+.c22:focus > path,
+.c22:focus > polygon,
+.c22:focus > polyline,
+.c22:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c23:focus::-moz-focus-inner {
+.c22:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c23:focus:not(:focus-visible) {
+.c22:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c23:focus:not(:focus-visible) > circle,.c23:focus:not(:focus-visible) > ellipse,
-.c23:focus:not(:focus-visible) > line,.c23:focus:not(:focus-visible) > path,
-.c23:focus:not(:focus-visible) > polygon,.c23:focus:not(:focus-visible) > polyline,
-.c23:focus:not(:focus-visible) > rect {
+.c22:focus:not(:focus-visible) > circle,.c22:focus:not(:focus-visible) > ellipse,
+.c22:focus:not(:focus-visible) > line,.c22:focus:not(:focus-visible) > path,
+.c22:focus:not(:focus-visible) > polygon,.c22:focus:not(:focus-visible) > polyline,
+.c22:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c23:focus:not(:focus-visible)::-moz-focus-inner {
+.c22:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c21 {
+.c20 {
   -webkit-transition: max-height 200ms,opacity 200ms;
   transition: max-height 200ms,opacity 200ms;
   opacity: 0;
@@ -508,7 +486,7 @@ exports[`<TransactionAmount /> should render component 1`] = `
   overflow-wrap: break-word;
 }
 
-.c11 {
+.c10 {
   box-sizing: border-box;
   font-size: inherit;
   font-family: inherit;
@@ -526,38 +504,38 @@ exports[`<TransactionAmount /> should render component 1`] = `
   border: none;
 }
 
-.c11::-webkit-input-placeholder {
+.c10::-webkit-input-placeholder {
   color: #AAAAAA;
 }
 
-.c11::-moz-placeholder {
+.c10::-moz-placeholder {
   color: #AAAAAA;
 }
 
-.c11:-ms-input-placeholder {
+.c10:-ms-input-placeholder {
   color: #AAAAAA;
 }
 
-.c11::-webkit-search-decoration {
+.c10::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-.c11::-moz-focus-inner {
+.c10::-moz-focus-inner {
   border: none;
   outline: none;
 }
 
-.c11:-moz-placeholder,
-.c11::-moz-placeholder {
+.c10:-moz-placeholder,
+.c10::-moz-placeholder {
   opacity: 1;
 }
 
-.c10 {
+.c9 {
   position: relative;
   width: 100%;
 }
 
-.c13 {
+.c12 {
   position: absolute;
   top: 10px;
   right: 0;
@@ -592,25 +570,19 @@ exports[`<TransactionAmount /> should render component 1`] = `
 
 @media only screen and (max-width:768px) {
   .c8 {
-    margin-bottom: 6px;
-  }
-}
-
-@media only screen and (max-width:768px) {
-  .c9 {
     border-bottom: solid 1px rgba(0,0,0,0.33);
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c17 {
+  .c16 {
     padding-top: 12px;
     padding-bottom: 12px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c22 {
+  .c21 {
     margin-bottom: 24px;
   }
 }
@@ -670,18 +642,18 @@ exports[`<TransactionAmount /> should render component 1`] = `
               style="position: relative;"
             >
               <div
-                class="c8 "
+                class="c6 "
                 style="width: 100%;"
               >
                 <div
-                  class="c9 "
+                  class="c8 "
                 >
                   <div
-                    class="c10"
+                    class="c9"
                   >
                     <input
                       autocomplete="off"
-                      class="c11"
+                      class="c10"
                       inputmode="decimal"
                       name="amount"
                       placeholder="0"
@@ -691,24 +663,24 @@ exports[`<TransactionAmount /> should render component 1`] = `
                 </div>
               </div>
               <button
-                class="c12 c13"
+                class="c11 c12"
                 type="button"
               >
                 MAX
               </button>
             </div>
             <div
-              class="c14"
+              class="c13"
             >
               <span
-                class="c15"
+                class="c14"
               >
                 Available:
                  
                 <span>
                   1.0
                   <span
-                    class="c16"
+                    class="c15"
                   >
                      
                   </span>
@@ -717,13 +689,13 @@ exports[`<TransactionAmount /> should render component 1`] = `
             </div>
           </div>
           <div
-            class="c17"
+            class="c16"
           >
             <div
-              class="c18"
+              class="c17"
             >
               <button
-                class="c19"
+                class="c18"
                 type="button"
               >
                 Advanced
@@ -731,17 +703,17 @@ exports[`<TransactionAmount /> should render component 1`] = `
             </div>
             <div
               aria-hidden="true"
-              class="c20 c21"
+              class="c19 c20"
             />
           </div>
           <div
-            class="c22"
+            class="c21"
           >
             <div
               class="c5"
             >
               <button
-                class="c23"
+                class="c22"
                 type="submit"
               >
                 Next
diff --git a/src/app/pages/ParaTimesPage/TransactionConfirmation/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/ParaTimesPage/TransactionConfirmation/__tests__/__snapshots__/index.test.tsx.snap
index 6ba4c624ce..c97d5840d9 100644
--- a/src/app/pages/ParaTimesPage/TransactionConfirmation/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/ParaTimesPage/TransactionConfirmation/__tests__/__snapshots__/index.test.tsx.snap
@@ -195,9 +195,6 @@ exports[`<TransactionConfirmation /> should render component 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
 }
 
 .c10 {
diff --git a/src/app/pages/ParaTimesPage/TransactionRecipient/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/ParaTimesPage/TransactionRecipient/__tests__/__snapshots__/index.test.tsx.snap
index a2434c2570..32ba37c3de 100644
--- a/src/app/pages/ParaTimesPage/TransactionRecipient/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/ParaTimesPage/TransactionRecipient/__tests__/__snapshots__/index.test.tsx.snap
@@ -125,9 +125,6 @@ exports[`<TransactionRecipient /> should render component 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
 }
 
 .c7 {
diff --git a/yarn.lock b/yarn.lock
index 806d5ea8ed..590405e7be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6554,7 +6554,7 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
-grommet-icons@4.10.0, grommet-icons@^4.8.0:
+grommet-icons@4.10.0, grommet-icons@^4.10.0:
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/grommet-icons/-/grommet-icons-4.10.0.tgz#a56bc083f7d52502a12871c031a6746c61164cce"
   integrity sha512-f3Re6jFRh93n2Cn2hyrJUANG7wOsv3wlEuyW/A1kIYzamDWnNfoZLgDQZXbAmMUMb1NdN7OU/0JrINxTCUOAEA==
@@ -6566,14 +6566,14 @@ grommet-styles@^0.2.0:
   resolved "https://registry.npmjs.org/grommet-styles/-/grommet-styles-0.2.0.tgz"
   integrity sha512-0OMSYuGeyifYKpg4Gv2HzL8rUdd0ddnJ5LbCBKgDuloC71XIwr9g/Fxa6rs737MbPV7OZ4pEm4wvrjH4epzf1A==
 
-grommet@2.30.0:
-  version "2.30.0"
-  resolved "https://registry.yarnpkg.com/grommet/-/grommet-2.30.0.tgz#aec75b4d8a7e5d3d686b3d79fd2072b9641a6e4e"
-  integrity sha512-sC5DIYZXGpkgvjYnDIsxK2KuDS8rDM7LwZmOeuad9wwPTJwg+K43wSy2DiBobj9e/Wn01IKEN3dwTQQDjE2jgg==
+grommet@2.31.0:
+  version "2.31.0"
+  resolved "https://registry.yarnpkg.com/grommet/-/grommet-2.31.0.tgz#eb74f1d983436eaec5d8fb023333387229ea6cf0"
+  integrity sha512-giWBFTCZpVushmEUJikWBL702k4y3qOE6TpnczIiNZAqQofu8N/u3v3m/ODXP/o+bxfMLnU/unUIDQoS2XQOkQ==
   dependencies:
-    grommet-icons "^4.8.0"
+    grommet-icons "^4.10.0"
     hoist-non-react-statics "^3.2.0"
-    markdown-to-jsx "^7.1.5"
+    markdown-to-jsx "^7.2.0"
     prop-types "^15.8.1"
 
 grpc-web@^1.4.1:
@@ -8272,10 +8272,10 @@ map-obj@^4.0.0:
   resolved "https://registry.npmjs.org/map-obj/-/map-obj-4.2.1.tgz"
   integrity sha512-+WA2/1sPmDj1dlvvJmB5G6JKfY9dpn7EVBUL06+y6PoljPkh+6V1QihwxNkbcGxCRjt2b0F9K0taiCuo7MbdFQ==
 
-markdown-to-jsx@^7.1.5:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.1.6.tgz#421487df2a66fe4231d94db653a34da033691e62"
-  integrity sha512-1wrIGZYwIG2gR3yfRmbr4FlQmhaAKoKTpRo4wur4fp9p0njU1Hi7vR8fj0AUKKIcPduiJmPprzmCB5B/GvlC7g==
+markdown-to-jsx@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.2.0.tgz#e7b46b65955f6a04d48a753acd55874a14bdda4b"
+  integrity sha512-3l4/Bigjm4bEqjCR6Xr+d4DtM1X6vvtGsMGSjJYyep8RjjIvcWtrXBS8Wbfe1/P+atKNMccpsraESIaWVplzVg==
 
 mathml-tag-names@^2.1.3:
   version "2.1.3"