From 33bdeb83033faba5ab3807b66a5a91724a5523ee Mon Sep 17 00:00:00 2001
From: Simone Taeggi <startae14@gmail.com>
Date: Wed, 22 Feb 2023 16:04:30 +0100
Subject: [PATCH 1/5] add limitation  on the schema validation of the name API
 and Transfer token

---
 .../pages/SettingsPage/pages/ApiTokens/EditView/utils/schema.js | 2 +-
 .../SettingsPage/pages/TransferTokens/EditView/utils/schema.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/utils/schema.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/utils/schema.js
index 4d6686c7ec..626080eef1 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/utils/schema.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/utils/schema.js
@@ -2,7 +2,7 @@ import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
 
 const schema = yup.object().shape({
-  name: yup.string(translatedErrors.string).required(translatedErrors.required),
+  name: yup.string(translatedErrors.string).max(100).required(translatedErrors.required),
   type: yup
     .string(translatedErrors.string)
     .oneOf(['read-only', 'full-access', 'custom'])
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/utils/schema.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/utils/schema.js
index ccaded4103..ca6efd5060 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/utils/schema.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/utils/schema.js
@@ -2,7 +2,7 @@ import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
 
 const schema = yup.object().shape({
-  name: yup.string(translatedErrors.string).required(translatedErrors.required),
+  name: yup.string(translatedErrors.string).max(100).required(translatedErrors.required),
   description: yup.string().nullable(),
   lifespan: yup.number().integer().min(0).nullable().defined(translatedErrors.required),
 });

From 7dac99e011922c3c416e1d8a3482002c20bc4750 Mon Sep 17 00:00:00 2001
From: Simone Taeggi <startae14@gmail.com>
Date: Wed, 22 Feb 2023 16:11:03 +0100
Subject: [PATCH 2/5] update snapshots

---
 .../tests/__snapshots__/index.test.js.snap    |  184 +-
 .../tests/__snapshots__/index.test.js.snap    | 1689 +++++++++--------
 .../ListView/tests/index.test.js              |  621 +++---
 3 files changed, 1384 insertions(+), 1110 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap
index 71244fe533..2e3934ca66 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap
@@ -15,7 +15,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   color: #32324d;
 }
 
-.c25 {
+.c24 {
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
@@ -61,6 +61,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   padding-right: 8px;
 }
 
+.c19 {
+  padding-right: 56px;
+  padding-left: 56px;
+}
+
 .c22 {
   background: #ffffff;
   padding-top: 24px;
@@ -179,7 +184,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   flex-direction: row;
 }
 
-.c23 {
+.c20 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -311,12 +316,21 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 2px solid #4945ff;
 }
 
-.c24 > * {
+.c21 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c24 > * + * {
+.c21 > * + * {
+  margin-top: 24px;
+}
+
+.c23 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c23 > * + * {
   margin-top: 16px;
 }
 
@@ -519,7 +533,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   fill: #ffffff;
 }
 
-.c26 {
+.c25 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 20px;
@@ -530,7 +544,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   grid-template-columns: repeat(12,1fr);
 }
 
-.c27 {
+.c26 {
   grid-column: span 6;
   max-width: 100%;
 }
@@ -553,11 +567,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   padding-right: 8px;
 }
 
-.c19 {
-  padding-right: 56px;
-  padding-left: 56px;
-}
-
 .c42 {
   padding-right: 16px;
   padding-left: 16px;
@@ -602,7 +611,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   color: #666687;
 }
 
-.c20 {
+.c27 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -708,15 +717,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   display: flex;
 }
 
-.c21 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c21 > * + * {
-  margin-top: 24px;
-}
-
 .c28 > * {
   margin-top: 0;
   margin-bottom: 0;
@@ -958,13 +958,13 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
 }
 
 @media (max-width:68.75rem) {
-  .c27 {
+  .c26 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c27 {
+  .c26 {
     grid-column: span 12;
   }
 }
@@ -1091,27 +1091,27 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
         </div>
       </div>
       <div
-        class="c19"
+        class="c1 c19"
       >
         <div
-          class="c20 c21"
+          class="c1 c8 c20 c21"
         >
           <div
             class="c1 c22"
           >
             <div
-              class="c1 c8 c23 c24"
+              class="c1 c8 c20 c23"
             >
               <h2
-                class="c11 c25"
+                class="c11 c24"
               >
                 Details
               </h2>
               <div
-                class="c1 c26"
+                class="c1 c25"
               >
                 <div
-                  class="c27"
+                  class="c26"
                 >
                   <div
                     class="c1 "
@@ -1119,7 +1119,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                     <div>
                       <div>
                         <div
-                          class="c20 c28"
+                          class="c27 c28"
                         >
                           <label
                             class="c29"
@@ -1155,7 +1155,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </div>
                 </div>
                 <div
-                  class="c27"
+                  class="c26"
                 >
                   <div
                     class="c1 "
@@ -1165,7 +1165,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                     >
                       <div>
                         <div
-                          class="c20 c28"
+                          class="c27 c28"
                         >
                           <div
                             class="c30"
@@ -1198,14 +1198,14 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </div>
                 </div>
                 <div
-                  class="c27"
+                  class="c26"
                 >
                   <div
                     class="c1 "
                   >
                     <div>
                       <div
-                        class="c20 c28"
+                        class="c27 c28"
                       >
                         <label
                           class="c29"
@@ -1288,14 +1288,14 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </div>
                 </div>
                 <div
-                  class="c27"
+                  class="c26"
                 >
                   <div
                     class="c1 "
                   >
                     <div>
                       <div
-                        class="c20 c28"
+                        class="c27 c28"
                       >
                         <label
                           class="c29"
@@ -1387,10 +1387,10 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                 class="c1 c51"
               >
                 <div
-                  class="c1 c8 c23 c52"
+                  class="c1 c8 c20 c52"
                 >
                   <h2
-                    class="c11 c25"
+                    class="c11 c24"
                   >
                     Permissions
                   </h2>
@@ -1532,10 +1532,10 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                 style="min-height: 100%;"
               >
                 <div
-                  class="c1 c8 c23 c52"
+                  class="c1 c8 c20 c52"
                 >
                   <h3
-                    class="c11 c25"
+                    class="c11 c24"
                   >
                     Advanced settings
                   </h3>
@@ -1592,20 +1592,20 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   color: #32324d;
 }
 
-.c33 {
+.c32 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 500;
   color: #32324d;
 }
 
-.c35 {
+.c34 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #666687;
 }
 
-.c38 {
+.c37 {
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
@@ -1633,6 +1633,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   padding-right: 8px;
 }
 
+.c25 {
+  padding-right: 56px;
+  padding-left: 56px;
+}
+
 .c2 {
   background: #f6f6f9;
   padding-top: 24px;
@@ -1658,7 +1663,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border-radius: 4px;
 }
 
-.c36 {
+.c35 {
   background: #ffffff;
   padding-top: 24px;
   padding-right: 32px;
@@ -1776,7 +1781,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   flex-direction: row;
 }
 
-.c31 {
+.c26 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -1908,21 +1913,30 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 2px solid #4945ff;
 }
 
-.c32 > * {
+.c27 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c32 > * + * {
+.c27 > * + * {
+  margin-top: 24px;
+}
+
+.c31 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c31 > * + * {
   margin-top: 4px;
 }
 
-.c37 > * {
+.c36 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c37 > * + * {
+.c36 > * + * {
   margin-top: 16px;
 }
 
@@ -2148,7 +2162,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   fill: #ffffff;
 }
 
-.c39 {
+.c38 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 20px;
@@ -2159,7 +2173,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   grid-template-columns: repeat(12,1fr);
 }
 
-.c40 {
+.c39 {
   grid-column: span 6;
   max-width: 100%;
 }
@@ -2187,7 +2201,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   height: 2rem;
 }
 
-.c34 {
+.c33 {
   word-break: break-all;
 }
 
@@ -2195,11 +2209,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   padding-right: 8px;
 }
 
-.c25 {
-  padding-right: 56px;
-  padding-left: 56px;
-}
-
 .c54 {
   padding-right: 16px;
   padding-left: 16px;
@@ -2254,7 +2263,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   color: #32324d;
 }
 
-.c26 {
+.c40 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -2494,15 +2503,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   display: flex;
 }
 
-.c27 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c27 > * + * {
-  margin-top: 24px;
-}
-
 .c41 > * {
   margin-top: 0;
   margin-bottom: 0;
@@ -2781,13 +2781,13 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
 }
 
 @media (max-width:68.75rem) {
-  .c40 {
+  .c39 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c40 {
+  .c39 {
     grid-column: span 12;
   }
 }
@@ -2945,10 +2945,10 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
         </div>
       </div>
       <div
-        class="c5 c25"
+        class="c1 c25"
       >
         <div
-          class="c5 c26 c27"
+          class="c1 c10 c26 c27"
         >
           <div
             class="c1 c10 c28 c12"
@@ -2970,40 +2970,40 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
               </svg>
             </div>
             <div
-              class="c1 c10 c31 c32"
+              class="c1 c10 c26 c31"
             >
               <div
                 class="c1 c10 c12"
               >
                 <span
-                  class="c13 c33 c34"
+                  class="c13 c32 c33"
                 >
                   This token isn’t accessible anymore.
                 </span>
               </div>
               <span
-                class="c13 c35"
+                class="c13 c34"
               >
                 For security reasons, you can only see your token once.
               </span>
             </div>
           </div>
           <div
-            class="c1 c36"
+            class="c1 c35"
           >
             <div
-              class="c1 c10 c31 c37"
+              class="c1 c10 c26 c36"
             >
               <h2
-                class="c13 c38"
+                class="c13 c37"
               >
                 Details
               </h2>
               <div
-                class="c1 c39"
+                class="c1 c38"
               >
                 <div
-                  class="c40"
+                  class="c39"
                 >
                   <div
                     class="c1 "
@@ -3011,7 +3011,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                     <div>
                       <div>
                         <div
-                          class="c5 c26 c41"
+                          class="c5 c40 c41"
                         >
                           <label
                             class="c8 c19"
@@ -3047,7 +3047,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </div>
                 </div>
                 <div
-                  class="c40"
+                  class="c39"
                 >
                   <div
                     class="c1 "
@@ -3057,7 +3057,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                     >
                       <div>
                         <div
-                          class="c5 c26 c41"
+                          class="c5 c40 c41"
                         >
                           <div
                             class="c5 c42"
@@ -3092,14 +3092,14 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </div>
                 </div>
                 <div
-                  class="c40"
+                  class="c39"
                 >
                   <div
                     class="c1 "
                   >
                     <div>
                       <div
-                        class="c5 c26 c41"
+                        class="c5 c40 c41"
                       >
                         <label
                           class="c8 c19"
@@ -3186,14 +3186,14 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </div>
                 </div>
                 <div
-                  class="c40"
+                  class="c39"
                 >
                   <div
                     class="c1 "
                   >
                     <div>
                       <div
-                        class="c5 c26 c41"
+                        class="c5 c40 c41"
                       >
                         <label
                           class="c8 c19"
@@ -3285,15 +3285,15 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                 class="c1 c66"
               >
                 <div
-                  class="c1 c10 c31 c67"
+                  class="c1 c10 c26 c67"
                 >
                   <h2
-                    class="c13 c38"
+                    class="c13 c37"
                   >
                     Permissions
                   </h2>
                   <p
-                    class="c13 c35"
+                    class="c13 c34"
                   >
                     Only actions bound by a route are listed below.
                   </p>
@@ -3430,15 +3430,15 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                 style="min-height: 100%;"
               >
                 <div
-                  class="c1 c10 c31 c67"
+                  class="c1 c10 c26 c67"
                 >
                   <h3
-                    class="c13 c38"
+                    class="c13 c37"
                   >
                     Advanced settings
                   </h3>
                   <p
-                    class="c13 c35"
+                    class="c13 c34"
                   >
                     Select the application's actions or the plugin's actions and click on the cog icon to display the bound route
                   </p>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/tests/__snapshots__/index.test.js.snap
index 4b44df4777..0e4eacddbf 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/tests/__snapshots__/index.test.js.snap
@@ -1,16 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snapshot when creating token 1`] = `
-.c42 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
+.c11 {
+  font-weight: 600;
+  font-size: 2rem;
+  line-height: 1.25;
+  color: #32324d;
+}
+
+.c17 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  font-weight: 600;
+  color: #32324d;
 }
 
 .c2 {
@@ -25,35 +27,11 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   padding-bottom: 8px;
 }
 
-.c5 {
+.c15 {
   padding-right: 8px;
 }
 
-.c17 {
-  padding-right: 56px;
-  padding-left: 56px;
-}
-
-.c20 {
-  background: #ffffff;
-  padding-top: 24px;
-  padding-right: 32px;
-  padding-bottom: 24px;
-  padding-left: 32px;
-  border-radius: 4px;
-  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-}
-
-.c36 {
-  padding-right: 16px;
-  padding-left: 16px;
-}
-
-.c38 {
-  padding-left: 12px;
-}
-
-.c9 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -71,7 +49,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   justify-content: space-between;
 }
 
-.c10 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -85,96 +63,6 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   flex-direction: row;
 }
 
-.c18 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c8 {
-  font-size: 0.875rem;
-  line-height: 1.43;
-  color: #4945ff;
-}
-
-.c11 {
-  font-weight: 600;
-  font-size: 2rem;
-  line-height: 1.25;
-  color: #32324d;
-}
-
-.c16 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  font-weight: 600;
-  color: #32324d;
-}
-
-.c22 {
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.25;
-  color: #32324d;
-}
-
-.c26 {
-  font-size: 0.875rem;
-  line-height: 1.43;
-  color: #d02b20;
-}
-
-.c37 {
-  font-size: 0.875rem;
-  line-height: 1.43;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #666687;
-}
-
-.c41 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  color: #666687;
-}
-
-.c19 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c19 > * + * {
-  margin-top: 24px;
-}
-
-.c21 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c21 > * + * {
-  margin-top: 16px;
-}
-
-.c25 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c25 > * + * {
-  margin-top: 4px;
-}
-
 .c12 > * {
   margin-left: 0;
   margin-right: 0;
@@ -242,7 +130,19 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   border: 2px solid #4945ff;
 }
 
-.c15 {
+.c46 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.c16 {
   height: 100%;
 }
 
@@ -269,7 +169,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   align-items: center;
 }
 
-.c14 .c7 {
+.c14 .c10 {
   color: #ffffff;
 }
 
@@ -278,7 +178,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   background: #eaeaef;
 }
 
-.c14[aria-disabled='true'] .c7 {
+.c14[aria-disabled='true'] .c10 {
   color: #666687;
 }
 
@@ -291,7 +191,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   background: #eaeaef;
 }
 
-.c14[aria-disabled='true']:active .c7 {
+.c14[aria-disabled='true']:active .c10 {
   color: #666687;
 }
 
@@ -314,142 +214,120 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   fill: #ffffff;
 }
 
-.c34 {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  width: 100%;
-  background: transparent;
-  border: none;
+.c5 {
+  padding-right: 8px;
 }
 
-.c34:focus {
-  outline: none;
+.c18 {
+  padding-right: 56px;
+  padding-left: 56px;
 }
 
-.c34[aria-disabled='true'] {
-  cursor: not-allowed;
-}
-
-.c27 {
-  line-height: 0;
-}
-
-.c29 {
-  border: none;
-  border-radius: 4px;
-  padding-bottom: 0.65625rem;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 0.65625rem;
-  color: #32324d;
-  font-weight: 400;
-  font-size: 0.875rem;
-  display: block;
-  width: 100%;
-  background: inherit;
-}
-
-.c29::-webkit-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c29::-moz-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c29:-ms-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c29::placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c29[aria-disabled='true'] {
-  color: inherit;
-}
-
-.c29:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-.c28 {
-  border: 1px solid #dcdce4;
-  border-radius: 4px;
+.c21 {
   background: #ffffff;
-  outline: none;
-  box-shadow: 0;
-  -webkit-transition-property: border-color,box-shadow,fill;
-  transition-property: border-color,box-shadow,fill;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-}
-
-.c28:focus-within {
-  border: 1px solid #4945ff;
-  box-shadow: #4945ff 0px 0px 0px 2px;
-}
-
-.c33 {
-  position: relative;
-  border: 1px solid #dcdce4;
-  padding-right: 12px;
+  padding-top: 24px;
+  padding-right: 32px;
+  padding-bottom: 24px;
+  padding-left: 32px;
   border-radius: 4px;
-  background: #ffffff;
-  overflow: hidden;
-  min-height: 2.5rem;
-  outline: none;
-  box-shadow: 0;
-  -webkit-transition-property: border-color,box-shadow,fill;
-  transition-property: border-color,box-shadow,fill;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-}
-
-.c33:focus-within {
-  border: 1px solid #4945ff;
-  box-shadow: #4945ff 0px 0px 0px 2px;
-}
-
-.c39 {
-  background: transparent;
-  border: none;
-  position: relative;
-  z-index: 1;
-}
-
-.c39 svg {
-  height: 0.6875rem;
-  width: 0.6875rem;
-}
-
-.c39 svg path {
-  fill: #666687;
+  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
 .c40 {
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.c42 {
+  padding-left: 12px;
+}
+
+.c7 {
+  font-size: 0.875rem;
+  line-height: 1.43;
+  color: #4945ff;
+}
+
+.c23 {
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.25;
+  color: #32324d;
+}
+
+.c27 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  font-weight: 600;
+  color: #32324d;
+}
+
+.c29 {
+  font-size: 0.875rem;
+  line-height: 1.43;
+  color: #d02b20;
+}
+
+.c41 {
+  font-size: 0.875rem;
+  line-height: 1.43;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #666687;
+}
+
+.c45 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  color: #666687;
+}
+
+.c19 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  background: none;
-  border: none;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 
-.c40 svg {
-  width: 0.375rem;
+.c28 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
-.c35 {
-  width: 100%;
+.c31 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
 .c4 {
@@ -512,22 +390,187 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   display: flex;
 }
 
-.c0:focus-visible {
-  outline: none;
+.c20 > * {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-.c23 {
+.c20 > * + * {
+  margin-top: 24px;
+}
+
+.c22 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c22 > * + * {
+  margin-top: 16px;
+}
+
+.c26 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c26 > * + * {
+  margin-top: 4px;
+}
+
+.c24 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 20px;
 }
 
-.c24 {
+.c25 {
   grid-column: span 6;
   max-width: 100%;
 }
 
-.c31 {
+.c30 {
+  line-height: 0;
+}
+
+.c33 {
+  border: none;
+  border-radius: 4px;
+  padding-bottom: 0.65625rem;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 0.65625rem;
+  color: #32324d;
+  font-weight: 400;
+  font-size: 0.875rem;
+  display: block;
+  width: 100%;
+  background: inherit;
+}
+
+.c33::-webkit-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c33::-moz-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c33:-ms-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c33::placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c33[aria-disabled='true'] {
+  color: inherit;
+}
+
+.c33:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.c32 {
+  border: 1px solid #dcdce4;
+  border-radius: 4px;
+  background: #ffffff;
+  outline: none;
+  box-shadow: 0;
+  -webkit-transition-property: border-color,box-shadow,fill;
+  transition-property: border-color,box-shadow,fill;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+}
+
+.c32:focus-within {
+  border: 1px solid #4945ff;
+  box-shadow: #4945ff 0px 0px 0px 2px;
+}
+
+.c0:focus-visible {
+  outline: none;
+}
+
+.c38 {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  background: transparent;
+  border: none;
+}
+
+.c38:focus {
+  outline: none;
+}
+
+.c38[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.c37 {
+  position: relative;
+  border: 1px solid #dcdce4;
+  padding-right: 12px;
+  border-radius: 4px;
+  background: #ffffff;
+  overflow: hidden;
+  min-height: 2.5rem;
+  outline: none;
+  box-shadow: 0;
+  -webkit-transition-property: border-color,box-shadow,fill;
+  transition-property: border-color,box-shadow,fill;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+}
+
+.c37:focus-within {
+  border: 1px solid #4945ff;
+  box-shadow: #4945ff 0px 0px 0px 2px;
+}
+
+.c43 {
+  background: transparent;
+  border: none;
+  position: relative;
+  z-index: 1;
+}
+
+.c43 svg {
+  height: 0.6875rem;
+  width: 0.6875rem;
+}
+
+.c43 svg path {
+  fill: #666687;
+}
+
+.c44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  background: none;
+  border: none;
+}
+
+.c44 svg {
+  width: 0.375rem;
+}
+
+.c39 {
+  width: 100%;
+}
+
+.c35 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   padding-left: 16px;
@@ -543,12 +586,12 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   transition-duration: 0.2s;
 }
 
-.c31:focus-within {
+.c35:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c32 {
+.c36 {
   display: block;
   width: 100%;
   font-weight: 400;
@@ -559,36 +602,36 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   background: inherit;
 }
 
-.c32::-webkit-input-placeholder {
+.c36::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c32::-moz-placeholder {
+.c36::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c32:-ms-input-placeholder {
+.c36:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c32::placeholder {
+.c36::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c32:focus-within {
+.c36:focus-within {
   outline: none;
 }
 
-.c30 textarea {
+.c34 textarea {
   height: 5rem;
   line-height: 1.25rem;
 }
 
-.c30 textarea::-webkit-input-placeholder {
+.c34 textarea::-webkit-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -596,7 +639,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   opacity: 1;
 }
 
-.c30 textarea::-moz-placeholder {
+.c34 textarea::-moz-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -604,7 +647,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   opacity: 1;
 }
 
-.c30 textarea:-ms-input-placeholder {
+.c34 textarea:-ms-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -612,7 +655,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   opacity: 1;
 }
 
-.c30 textarea::placeholder {
+.c34 textarea::placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -621,13 +664,13 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
 }
 
 @media (max-width:68.75rem) {
-  .c24 {
+  .c25 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c24 {
+  .c25 {
     grid-column: span 12;
   }
 }
@@ -660,7 +703,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
             >
               <span
                 aria-hidden="true"
-                class="c1 c5 c6"
+                class="c5 c6"
               >
                 <svg
                   fill="none"
@@ -676,26 +719,26 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                 </svg>
               </span>
               <span
-                class="c7 c8"
+                class="c7"
               >
                 Back
               </span>
             </a>
           </div>
           <div
-            class="c1 c9"
+            class="c1 c8"
           >
             <div
-              class="c1 c10"
+              class="c1 c9"
             >
               <h1
-                class="c7 c11"
+                class="c10 c11"
               >
                 Create Transfer Token
               </h1>
             </div>
             <div
-              class="c1 c10 c12"
+              class="c1 c9 c12"
             >
               <button
                 aria-disabled="false"
@@ -704,7 +747,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
               >
                 <div
                   aria-hidden="true"
-                  class="c1 c5 c15"
+                  class="c1 c15 c16"
                 >
                   <svg
                     fill="none"
@@ -720,7 +763,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                   </svg>
                 </div>
                 <span
-                  class="c7 c16"
+                  class="c10 c17"
                 >
                   Save
                 </span>
@@ -730,59 +773,59 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
         </div>
       </div>
       <div
-        class="c1 c17"
+        class="c18"
       >
         <div
-          class="c1 c18 c19"
+          class="c19 c20"
         >
           <div
-            class="c1 c20"
+            class="c21"
           >
             <div
-              class="c1 c18 c21"
+              class="c19 c22"
             >
               <h2
-                class="c7 c22"
+                class="c23"
               >
                 Details
               </h2>
               <div
-                class="c1 c23"
+                class="c24"
               >
                 <div
-                  class="c24"
+                  class="c25"
                 >
                   <div
-                    class="c1 "
+                    class=""
                   >
                     <div>
                       <div>
                         <div
-                          class="c1 c18 c25"
+                          class="c19 c26"
                         >
                           <label
-                            class="c7 c16"
+                            class="c27"
                             for="1"
                           >
                             <div
-                              class="c1 c10"
+                              class="c28"
                             >
                               Name
                               <span
-                                class="c7 c26 c27"
+                                class="c29 c30"
                               >
                                 *
                               </span>
                             </div>
                           </label>
                           <div
-                            class="c1 c9 c28"
+                            class="c31 c32"
                           >
                             <input
                               aria-disabled="false"
                               aria-invalid="false"
                               aria-required="true"
-                              class="c29"
+                              class="c33"
                               id="1"
                               name="name"
                               value=""
@@ -794,39 +837,39 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                   </div>
                 </div>
                 <div
-                  class="c24"
+                  class="c25"
                 >
                   <div
-                    class="c1 "
+                    class=""
                   >
                     <div
-                      class="c30"
+                      class="c34"
                     >
                       <div>
                         <div
-                          class="c1 c18 c25"
+                          class="c19 c26"
                         >
                           <div
-                            class="c1 c10"
+                            class="c28"
                           >
                             <label
-                              class="c7 c16"
+                              class="c27"
                               for="3"
                             >
                               <div
-                                class="c1 c10"
+                                class="c28"
                               >
                                 Description
                               </div>
                             </label>
                           </div>
                           <div
-                            class="c31"
+                            class="c35"
                           >
                             <textarea
                               aria-invalid="false"
                               aria-required="false"
-                              class="c32"
+                              class="c36"
                               id="3"
                               name="description"
                             />
@@ -837,54 +880,54 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                   </div>
                 </div>
                 <div
-                  class="c24"
+                  class="c25"
                 >
                   <div
-                    class="c1 "
+                    class=""
                   >
                     <div>
                       <div
-                        class="c1 c18 c25"
+                        class="c19 c26"
                       >
                         <label
-                          class="c7 c16"
+                          class="c27"
                           for="5"
                         >
                           <div
-                            class="c1 c10"
+                            class="c28"
                           >
                             Token duration
                             <span
-                              class="c7 c26 c27"
+                              class="c29 c30"
                             >
                               *
                             </span>
                           </div>
                         </label>
                         <div
-                          class="c1 c10 c33"
+                          class="c28 c37"
                         >
                           <button
                             aria-disabled="false"
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-labelledby="5 5-label 5-content"
-                            class="c34"
+                            class="c38"
                             id="5"
                             name="lifespan"
                             type="button"
                           />
                           <div
-                            class="c1 c9 c35"
+                            class="c31 c39"
                           >
                             <div
-                              class="c1 c10"
+                              class="c28"
                             >
                               <div
-                                class="c1 c36"
+                                class="c40"
                               >
                                 <span
-                                  class="c7 c37"
+                                  class="c41"
                                   id="5-content"
                                 >
                                   Select
@@ -892,11 +935,11 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                               </div>
                             </div>
                             <div
-                              class="c1 c10"
+                              class="c28"
                             >
                               <button
                                 aria-hidden="true"
-                                class="c1 c38 c39 c40"
+                                class="c42 c43 c44"
                                 tabindex="-1"
                                 title="Carret Down Button"
                                 type="button"
@@ -922,7 +965,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                       </div>
                     </div>
                     <span
-                      class="c7 c41"
+                      class="c45"
                     />
                   </div>
                 </div>
@@ -934,7 +977,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
     </form>
   </main>
   <div
-    class="c42"
+    class="c46"
   >
     <p
       aria-live="polite"
@@ -959,25 +1002,31 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
 `;
 
 exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snapshot when editing existing token 1`] = `
-.c49 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
+.c13 {
+  font-weight: 600;
+  font-size: 2rem;
+  line-height: 1.25;
+  color: #32324d;
 }
 
-.c5 {
-  padding-right: 8px;
+.c23 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  font-weight: 600;
+  color: #32324d;
 }
 
-.c18 {
-  padding-right: 56px;
-  padding-left: 56px;
+.c32 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  font-weight: 500;
+  color: #32324d;
+}
+
+.c34 {
+  font-size: 0.875rem;
+  line-height: 1.43;
+  color: #666687;
 }
 
 .c2 {
@@ -993,38 +1042,23 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
 }
 
 .c21 {
+  padding-right: 8px;
+}
+
+.c27 {
   background: #ffffff;
   padding: 24px;
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c22 {
+.c28 {
   background: #f6f6f9;
   padding: 12px;
   border-radius: 4px;
 }
 
-.c28 {
-  background: #ffffff;
-  padding-top: 24px;
-  padding-right: 32px;
-  padding-bottom: 24px;
-  padding-left: 32px;
-  border-radius: 4px;
-  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-}
-
-.c43 {
-  padding-right: 16px;
-  padding-left: 16px;
-}
-
-.c45 {
-  padding-left: 12px;
-}
-
-.c9 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1042,7 +1076,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   justify-content: space-between;
 }
 
-.c10 {
+.c11 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1056,7 +1090,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   flex-direction: row;
 }
 
-.c19 {
+.c30 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -1070,105 +1104,25 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   flex-direction: column;
 }
 
-.c11 {
-  font-weight: 600;
-  font-size: 2rem;
-  line-height: 1.25;
-  color: #32324d;
-}
-
-.c8 {
-  font-size: 0.875rem;
-  line-height: 1.43;
-  color: #4945ff;
-}
-
-.c16 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  font-weight: 600;
-  color: #32324d;
-}
-
-.c25 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  font-weight: 500;
-  color: #32324d;
-}
-
-.c27 {
-  font-size: 0.875rem;
-  line-height: 1.43;
-  color: #666687;
-}
-
-.c30 {
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.25;
-  color: #32324d;
-}
-
-.c33 {
-  font-size: 0.875rem;
-  line-height: 1.43;
-  color: #d02b20;
-}
-
-.c44 {
-  font-size: 0.875rem;
-  line-height: 1.43;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #666687;
-}
-
-.c48 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  color: #666687;
-}
-
-.c20 > * {
+.c31 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c20 > * + * {
-  margin-top: 24px;
-}
-
-.c24 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c24 > * + * {
+.c31 > * + * {
   margin-top: 4px;
 }
 
-.c29 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c29 > * + * {
-  margin-top: 16px;
-}
-
-.c12 > * {
+.c14 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c12 > * + * {
+.c14 > * + * {
   margin-left: 8px;
 }
 
-.c13 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1182,21 +1136,21 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   outline: none;
 }
 
-.c13 svg {
+.c19 svg {
   height: 12px;
   width: 12px;
 }
 
-.c13 svg > g,
-.c13 svg path {
+.c19 svg > g,
+.c19 svg path {
   fill: #ffffff;
 }
 
-.c13[aria-disabled='true'] {
+.c19[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c13:after {
+.c19:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -1211,11 +1165,11 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   border: 2px solid transparent;
 }
 
-.c13:focus-visible {
+.c19:focus-visible {
   outline: none;
 }
 
-.c13:focus-visible:after {
+.c19:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -1226,106 +1180,23 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   border: 2px solid #4945ff;
 }
 
-.c15 {
+.c59 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.c22 {
   height: 100%;
 }
 
-.c50 .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c50 .c7 {
-  color: #ffffff;
-}
-
-.c50[aria-disabled='true'] .c7 {
-  color: #666687;
-}
-
-.c50[aria-disabled='true']:active .c7 {
-  color: #666687;
-}
-
-.c14 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background-color: #4945ff;
-  border: 1px solid #4945ff;
-  height: 2rem;
-  padding-left: 16px;
-  padding-right: 16px;
-  border: 1px solid #dcdce4;
-  background: #ffffff;
-}
-
-.c14 .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c14 .c7 {
-  color: #ffffff;
-}
-
-.c14[aria-disabled='true'] {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c14[aria-disabled='true'] .c7 {
-  color: #666687;
-}
-
-.c14[aria-disabled='true'] svg > g,.c14[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c14[aria-disabled='true']:active {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c14[aria-disabled='true']:active .c7 {
-  color: #666687;
-}
-
-.c14[aria-disabled='true']:active svg > g,.c14[aria-disabled='true']:active svg path {
-  fill: #666687;
-}
-
-.c14:hover {
-  background-color: #f6f6f9;
-}
-
-.c14:active {
-  background-color: #eaeaef;
-}
-
-.c14 .c7 {
-  color: #32324d;
-}
-
-.c14 svg > g,
-.c14 svg path {
-  fill: #32324d;
-}
-
-.c17 {
+.c20 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1337,7 +1208,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   padding-right: 16px;
 }
 
-.c17 .c1 {
+.c20 .c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1348,190 +1219,335 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   align-items: center;
 }
 
-.c17 .c7 {
+.c20 .c12 {
   color: #ffffff;
 }
 
-.c17[aria-disabled='true'] {
+.c20[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c17[aria-disabled='true'] .c7 {
+.c20[aria-disabled='true'] .c12 {
   color: #666687;
 }
 
-.c17[aria-disabled='true'] svg > g,.c17[aria-disabled='true'] svg path {
+.c20[aria-disabled='true'] svg > g,.c20[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c17[aria-disabled='true']:active {
+.c20[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c17[aria-disabled='true']:active .c7 {
+.c20[aria-disabled='true']:active .c12 {
   color: #666687;
 }
 
-.c17[aria-disabled='true']:active svg > g,.c17[aria-disabled='true']:active svg path {
+.c20[aria-disabled='true']:active svg > g,.c20[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c17:hover {
+.c20:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c17:active {
+.c20:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c17 svg > g,
-.c17 svg path {
+.c20 svg > g,
+.c20 svg path {
   fill: #ffffff;
 }
 
-.c41 {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  width: 100%;
-  background: transparent;
-  border: none;
+.c29 {
+  margin-right: 24px;
 }
 
-.c41:focus {
-  outline: none;
+.c29 svg {
+  width: 2rem;
+  height: 2rem;
 }
 
-.c41[aria-disabled='true'] {
-  cursor: not-allowed;
+.c33 {
+  word-break: break-all;
 }
 
-.c34 {
-  line-height: 0;
+.c6 {
+  padding-right: 8px;
 }
 
-.c36 {
-  border: none;
-  border-radius: 4px;
-  padding-bottom: 0.65625rem;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 0.65625rem;
-  color: #32324d;
-  font-weight: 400;
-  font-size: 0.875rem;
-  display: block;
-  width: 100%;
-  background: inherit;
-}
-
-.c36::-webkit-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c36::-moz-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c36:-ms-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c36::placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c36[aria-disabled='true'] {
-  color: inherit;
-}
-
-.c36:focus {
-  outline: none;
-  box-shadow: none;
+.c24 {
+  padding-right: 56px;
+  padding-left: 56px;
 }
 
 .c35 {
-  border: 1px solid #dcdce4;
-  border-radius: 4px;
   background: #ffffff;
-  outline: none;
-  box-shadow: 0;
-  -webkit-transition-property: border-color,box-shadow,fill;
-  transition-property: border-color,box-shadow,fill;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
+  padding-top: 24px;
+  padding-right: 32px;
+  padding-bottom: 24px;
+  padding-left: 32px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c35:focus-within {
-  border: 1px solid #4945ff;
-  box-shadow: #4945ff 0px 0px 0px 2px;
+.c53 {
+  padding-right: 16px;
+  padding-left: 16px;
 }
 
-.c40 {
-  position: relative;
-  border: 1px solid #dcdce4;
-  padding-right: 12px;
-  border-radius: 4px;
-  background: #ffffff;
+.c55 {
+  padding-left: 12px;
+}
+
+.c9 {
+  font-size: 0.875rem;
+  line-height: 1.43;
+  color: #4945ff;
+}
+
+.c18 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  font-weight: 600;
+  color: #32324d;
+}
+
+.c37 {
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.25;
+  color: #32324d;
+}
+
+.c42 {
+  font-size: 0.875rem;
+  line-height: 1.43;
+  color: #d02b20;
+}
+
+.c54 {
+  font-size: 0.875rem;
+  line-height: 1.43;
+  display: block;
+  white-space: nowrap;
   overflow: hidden;
-  min-height: 2.5rem;
+  text-overflow: ellipsis;
   color: #666687;
-  background: #eaeaef;
-  outline: none;
-  box-shadow: 0;
-  -webkit-transition-property: border-color,box-shadow,fill;
-  transition-property: border-color,box-shadow,fill;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
 }
 
-.c40:focus-within {
-  border: 1px solid #4945ff;
-  box-shadow: #4945ff 0px 0px 0px 2px;
+.c58 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  color: #666687;
 }
 
-.c46 {
-  background: transparent;
-  border: none;
-  position: relative;
-  z-index: 1;
-}
-
-.c46 svg {
-  height: 0.6875rem;
-  width: 0.6875rem;
-}
-
-.c46 svg path {
-  fill: #666687;
-}
-
-.c47 {
+.c44 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  background: none;
-  border: none;
-  cursor: not-allowed;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
-.c47 svg {
-  width: 0.375rem;
+.c41 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
-.c42 {
-  width: 100%;
+.c25 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 4px;
+  background: #ffffff;
+  border: 1px solid #dcdce4;
+  position: relative;
+  outline: none;
+}
+
+.c15 svg {
+  height: 12px;
+  width: 12px;
+}
+
+.c15 svg > g,
+.c15 svg path {
+  fill: #ffffff;
+}
+
+.c15[aria-disabled='true'] {
+  pointer-events: none;
+}
+
+.c15:after {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border: 2px solid transparent;
+}
+
+.c15:focus-visible {
+  outline: none;
+}
+
+.c15:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
+.c17 {
+  height: 100%;
+}
+
+.c60 .c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c60 .c8 {
+  color: #ffffff;
+}
+
+.c60[aria-disabled='true'] .c8 {
+  color: #666687;
+}
+
+.c60[aria-disabled='true']:active .c8 {
+  color: #666687;
+}
+
+.c16 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #4945ff;
+  border: 1px solid #4945ff;
+  height: 2rem;
+  padding-left: 16px;
+  padding-right: 16px;
+  border: 1px solid #dcdce4;
+  background: #ffffff;
+}
+
+.c16 .c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c16 .c8 {
+  color: #ffffff;
+}
+
+.c16[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c16[aria-disabled='true'] .c8 {
+  color: #666687;
+}
+
+.c16[aria-disabled='true'] svg > g,.c16[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c16[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c16[aria-disabled='true']:active .c8 {
+  color: #666687;
+}
+
+.c16[aria-disabled='true']:active svg > g,.c16[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c16:hover {
+  background-color: #f6f6f9;
+}
+
+.c16:active {
+  background-color: #eaeaef;
+}
+
+.c16 .c8 {
+  color: #32324d;
+}
+
+.c16 svg > g,
+.c16 svg path {
+  fill: #32324d;
 }
 
 .c4 {
@@ -1587,42 +1603,197 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   border: 2px solid #4945ff;
 }
 
-.c6 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c23 {
-  margin-right: 24px;
+.c26 > * {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-.c23 svg {
-  width: 2rem;
-  height: 2rem;
+.c26 > * + * {
+  margin-top: 24px;
 }
 
-.c26 {
-  word-break: break-all;
+.c36 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c36 > * + * {
+  margin-top: 16px;
+}
+
+.c40 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c40 > * + * {
+  margin-top: 4px;
+}
+
+.c38 {
+  display: grid;
+  grid-template-columns: repeat(12,1fr);
+  gap: 20px;
+}
+
+.c39 {
+  grid-column: span 6;
+  max-width: 100%;
+}
+
+.c43 {
+  line-height: 0;
+}
+
+.c46 {
+  border: none;
+  border-radius: 4px;
+  padding-bottom: 0.65625rem;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 0.65625rem;
+  color: #32324d;
+  font-weight: 400;
+  font-size: 0.875rem;
+  display: block;
+  width: 100%;
+  background: inherit;
+}
+
+.c46::-webkit-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c46::-moz-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c46:-ms-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c46::placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c46[aria-disabled='true'] {
+  color: inherit;
+}
+
+.c46:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.c45 {
+  border: 1px solid #dcdce4;
+  border-radius: 4px;
+  background: #ffffff;
+  outline: none;
+  box-shadow: 0;
+  -webkit-transition-property: border-color,box-shadow,fill;
+  transition-property: border-color,box-shadow,fill;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+}
+
+.c45:focus-within {
+  border: 1px solid #4945ff;
+  box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
 .c0:focus-visible {
   outline: none;
 }
 
-.c31 {
-  display: grid;
-  grid-template-columns: repeat(12,1fr);
-  gap: 20px;
+.c51 {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  background: transparent;
+  border: none;
 }
 
-.c32 {
-  grid-column: span 6;
-  max-width: 100%;
+.c51:focus {
+  outline: none;
 }
 
-.c38 {
+.c51[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.c50 {
+  position: relative;
+  border: 1px solid #dcdce4;
+  padding-right: 12px;
+  border-radius: 4px;
+  background: #ffffff;
+  overflow: hidden;
+  min-height: 2.5rem;
+  color: #666687;
+  background: #eaeaef;
+  outline: none;
+  box-shadow: 0;
+  -webkit-transition-property: border-color,box-shadow,fill;
+  transition-property: border-color,box-shadow,fill;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+}
+
+.c50:focus-within {
+  border: 1px solid #4945ff;
+  box-shadow: #4945ff 0px 0px 0px 2px;
+}
+
+.c56 {
+  background: transparent;
+  border: none;
+  position: relative;
+  z-index: 1;
+}
+
+.c56 svg {
+  height: 0.6875rem;
+  width: 0.6875rem;
+}
+
+.c56 svg path {
+  fill: #666687;
+}
+
+.c57 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  background: none;
+  border: none;
+  cursor: not-allowed;
+}
+
+.c57 svg {
+  width: 0.375rem;
+}
+
+.c52 {
+  width: 100%;
+}
+
+.c48 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   padding-left: 16px;
@@ -1638,12 +1809,12 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   transition-duration: 0.2s;
 }
 
-.c38:focus-within {
+.c48:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c39 {
+.c49 {
   display: block;
   width: 100%;
   font-weight: 400;
@@ -1654,36 +1825,36 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   background: inherit;
 }
 
-.c39::-webkit-input-placeholder {
+.c49::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c39::-moz-placeholder {
+.c49::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c39:-ms-input-placeholder {
+.c49:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c39::placeholder {
+.c49::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c39:focus-within {
+.c49:focus-within {
   outline: none;
 }
 
-.c37 textarea {
+.c47 textarea {
   height: 5rem;
   line-height: 1.25rem;
 }
 
-.c37 textarea::-webkit-input-placeholder {
+.c47 textarea::-webkit-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1691,7 +1862,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   opacity: 1;
 }
 
-.c37 textarea::-moz-placeholder {
+.c47 textarea::-moz-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1699,7 +1870,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   opacity: 1;
 }
 
-.c37 textarea:-ms-input-placeholder {
+.c47 textarea:-ms-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1707,7 +1878,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   opacity: 1;
 }
 
-.c37 textarea::placeholder {
+.c47 textarea::placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1716,13 +1887,13 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
 }
 
 @media (max-width:68.75rem) {
-  .c32 {
+  .c39 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c32 {
+  .c39 {
     grid-column: span 12;
   }
 }
@@ -1755,7 +1926,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
             >
               <span
                 aria-hidden="true"
-                class="c1 c5 c6"
+                class="c5 c6 c7"
               >
                 <svg
                   fill="none"
@@ -1771,36 +1942,36 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                 </svg>
               </span>
               <span
-                class="c7 c8"
+                class="c8 c9"
               >
                 Back
               </span>
             </a>
           </div>
           <div
-            class="c1 c9"
+            class="c1 c10"
           >
             <div
-              class="c1 c10"
+              class="c1 c11"
             >
               <h1
-                class="c7 c11"
+                class="c12 c13"
               >
                 My super token
               </h1>
             </div>
             <div
-              class="c1 c10 c12"
+              class="c1 c11 c14"
             >
               <button
                 aria-disabled="false"
-                class="c13 c14"
+                class="c15 c16"
                 name="regenerate"
                 type="button"
               >
                 <div
                   aria-hidden="true"
-                  class="c1 c5 c15"
+                  class="c5 c6 c17"
                 >
                   <svg
                     fill="none"
@@ -1818,19 +1989,19 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                   </svg>
                 </div>
                 <span
-                  class="c7 c16"
+                  class="c8 c18"
                 >
                   Regenerate
                 </span>
               </button>
               <button
                 aria-disabled="false"
-                class="c13 c17"
+                class="c19 c20"
                 type="submit"
               >
                 <div
                   aria-hidden="true"
-                  class="c1 c5 c15"
+                  class="c1 c21 c22"
                 >
                   <svg
                     fill="none"
@@ -1846,7 +2017,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                   </svg>
                 </div>
                 <span
-                  class="c7 c16"
+                  class="c12 c23"
                 >
                   Save
                 </span>
@@ -1856,16 +2027,16 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
         </div>
       </div>
       <div
-        class="c1 c18"
+        class="c5 c24"
       >
         <div
-          class="c1 c19 c20"
+          class="c5 c25 c26"
         >
           <div
-            class="c1 c21 c10"
+            class="c1 c27 c11"
           >
             <div
-              class="c1 c22 c10 c23"
+              class="c1 c28 c11 c29"
             >
               <svg
                 fill="none"
@@ -1881,73 +2052,73 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
               </svg>
             </div>
             <div
-              class="c1 c19 c24"
+              class="c1 c30 c31"
             >
               <div
-                class="c1 c10"
+                class="c1 c11"
               >
                 <span
-                  class="c7 c25 c26"
+                  class="c12 c32 c33"
                 >
                   This token isn’t accessible anymore.
                 </span>
               </div>
               <span
-                class="c7 c27"
+                class="c12 c34"
               >
                 For security reasons, you can only see your token once.
               </span>
             </div>
           </div>
           <div
-            class="c1 c28"
+            class="c5 c35"
           >
             <div
-              class="c1 c19 c29"
+              class="c5 c25 c36"
             >
               <h2
-                class="c7 c30"
+                class="c8 c37"
               >
                 Details
               </h2>
               <div
-                class="c1 c31"
+                class="c5 c38"
               >
                 <div
-                  class="c32"
+                  class="c39"
                 >
                   <div
-                    class="c1 "
+                    class="c5 "
                   >
                     <div>
                       <div>
                         <div
-                          class="c1 c19 c24"
+                          class="c5 c25 c40"
                         >
                           <label
-                            class="c7 c16"
-                            for="8"
+                            class="c8 c18"
+                            for="7"
                           >
                             <div
-                              class="c1 c10"
+                              class="c5 c41"
                             >
                               Name
                               <span
-                                class="c7 c33 c34"
+                                class="c8 c42 c43"
                               >
                                 *
                               </span>
                             </div>
                           </label>
                           <div
-                            class="c1 c9 c35"
+                            class="c5 c44 c45"
                           >
                             <input
                               aria-disabled="false"
                               aria-invalid="false"
                               aria-required="true"
-                              class="c36"
-                              id="8"
+                              class="c46"
+                              id="7"
                               name="name"
                               value="My super token"
                             />
@@ -1958,40 +2129,40 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                   </div>
                 </div>
                 <div
-                  class="c32"
+                  class="c39"
                 >
                   <div
-                    class="c1 "
+                    class="c5 "
                   >
                     <div
-                      class="c37"
+                      class="c47"
                     >
                       <div>
                         <div
-                          class="c1 c19 c24"
+                          class="c5 c25 c40"
                         >
                           <div
-                            class="c1 c10"
+                            class="c5 c41"
                           >
                             <label
-                              class="c7 c16"
-                              for="10"
+                              class="c8 c18"
+                              for="9"
                             >
                               <div
-                                class="c1 c10"
+                                class="c5 c41"
                               >
                                 Description
                               </div>
                             </label>
                           </div>
                           <div
-                            class="c38"
+                            class="c48"
                           >
                             <textarea
                               aria-invalid="false"
                               aria-required="false"
-                              class="c39"
-                              id="10"
+                              class="c49"
+                              id="9"
                               name="description"
                             >
                               This describe my super token
@@ -2003,67 +2174,67 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                   </div>
                 </div>
                 <div
-                  class="c32"
+                  class="c39"
                 >
                   <div
-                    class="c1 "
+                    class="c5 "
                   >
                     <div>
                       <div
-                        class="c1 c19 c24"
+                        class="c5 c25 c40"
                       >
                         <label
-                          class="c7 c16"
-                          for="12"
+                          class="c8 c18"
+                          for="11"
                         >
                           <div
-                            class="c1 c10"
+                            class="c5 c41"
                           >
                             Token duration
                             <span
-                              class="c7 c33 c34"
+                              class="c8 c42 c43"
                             >
                               *
                             </span>
                           </div>
                         </label>
                         <div
-                          class="c1 c10 c40"
+                          class="c5 c41 c50"
                           disabled=""
                         >
                           <button
                             aria-disabled="true"
                             aria-expanded="false"
                             aria-haspopup="listbox"
-                            aria-labelledby="12 12-label 12-content"
-                            class="c41"
-                            id="12"
+                            aria-labelledby="11 11-label 11-content"
+                            class="c51"
+                            id="11"
                             name="lifespan"
                             type="button"
                           />
                           <div
-                            class="c1 c9 c42"
+                            class="c5 c44 c52"
                           >
                             <div
-                              class="c1 c10"
+                              class="c5 c41"
                             >
                               <div
-                                class="c1 c43"
+                                class="c5 c53"
                               >
                                 <span
-                                  class="c7 c44"
-                                  id="12-content"
+                                  class="c8 c54"
+                                  id="11-content"
                                 >
                                   Select
                                 </span>
                               </div>
                             </div>
                             <div
-                              class="c1 c10"
+                              class="c5 c41"
                             >
                               <button
                                 aria-hidden="true"
-                                class="c1 c45 c46 c47"
+                                class="c5 c55 c56 c57"
                                 disabled=""
                                 tabindex="-1"
                                 title="Carret Down Button"
@@ -2090,7 +2261,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                       </div>
                     </div>
                     <span
-                      class="c7 c48"
+                      class="c8 c58"
                     >
                       Expiration date: Unlimited
                     </span>
@@ -2104,7 +2275,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
     </form>
   </main>
   <div
-    class="c49"
+    class="c59"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/tests/index.test.js
index 579407c84e..edb89e88f2 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/tests/index.test.js
@@ -116,7 +116,106 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
     });
 
     expect(container.firstChild).toMatchInlineSnapshot(`
+      .c24 {
+        font-weight: 600;
+        font-size: 0.6875rem;
+        line-height: 1.45;
+        text-transform: uppercase;
+        color: #666687;
+      }
+
+      .c13 {
+        background: #ffffff;
+        border-radius: 4px;
+        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+      }
+
+      .c15 {
+        position: relative;
+      }
+
+      .c17 {
+        padding-right: 24px;
+        padding-left: 24px;
+      }
+
+      .c41 {
+        padding-left: 4px;
+      }
+
+      .c23 {
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+      }
+
       .c26 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        cursor: pointer;
+        padding: 8px;
+        border-radius: 4px;
+        background: #ffffff;
+        border: 1px solid #dcdce4;
+        position: relative;
+        outline: none;
+      }
+
+      .c26 svg {
+        height: 12px;
+        width: 12px;
+      }
+
+      .c26 svg > g,
+      .c26 svg path {
+        fill: #ffffff;
+      }
+
+      .c26[aria-disabled='true'] {
+        pointer-events: none;
+      }
+
+      .c26:after {
+        -webkit-transition-property: all;
+        transition-property: all;
+        -webkit-transition-duration: 0.2s;
+        transition-duration: 0.2s;
+        border-radius: 8px;
+        content: '';
+        position: absolute;
+        top: -4px;
+        bottom: -4px;
+        left: -4px;
+        right: -4px;
+        border: 2px solid transparent;
+      }
+
+      .c26:focus-visible {
+        outline: none;
+      }
+
+      .c26:focus-visible:after {
+        border-radius: 8px;
+        content: '';
+        position: absolute;
+        top: -5px;
+        bottom: -5px;
+        left: -5px;
+        right: -5px;
+        border: 2px solid #4945ff;
+      }
+
+      .c28 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -128,6 +227,127 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         width: 1px;
       }
 
+      .c27 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        height: 2rem;
+        width: 2rem;
+        border: none;
+      }
+
+      .c27 svg > g,
+      .c27 svg path {
+        fill: #8e8ea9;
+      }
+
+      .c27:hover svg > g,
+      .c27:hover svg path {
+        fill: #666687;
+      }
+
+      .c27:active svg > g,
+      .c27:active svg path {
+        fill: #a5a5ba;
+      }
+
+      .c27[aria-disabled='true'] {
+        background-color: #eaeaef;
+      }
+
+      .c27[aria-disabled='true'] svg path {
+        fill: #666687;
+      }
+
+      .c14 {
+        overflow: hidden;
+        border: 1px solid #eaeaef;
+      }
+
+      .c19 {
+        width: 100%;
+        white-space: nowrap;
+      }
+
+      .c16:before {
+        background: linear-gradient(90deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
+        opacity: 0.2;
+        position: absolute;
+        height: 100%;
+        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+        width: 8px;
+        left: 0;
+      }
+
+      .c16:after {
+        background: linear-gradient(270deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
+        opacity: 0.2;
+        position: absolute;
+        height: 100%;
+        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+        width: 8px;
+        right: 0;
+        top: 0;
+      }
+
+      .c18 {
+        overflow-x: auto;
+      }
+
+      .c20 {
+        border-bottom: 1px solid #eaeaef;
+      }
+
+      .c21 {
+        border-bottom: 1px solid #eaeaef;
+      }
+
+      .c21 td,
+      .c21 th {
+        padding: 16px;
+      }
+
+      .c21 td:first-of-type,
+      .c21 th:first-of-type {
+        padding: 0 4px;
+      }
+
+      .c21 th {
+        padding-top: 0;
+        padding-bottom: 0;
+        height: 3.5rem;
+      }
+
+      .c22 {
+        vertical-align: middle;
+        text-align: left;
+        color: #666687;
+        outline-offset: -4px;
+      }
+
+      .c22 input {
+        vertical-align: sub;
+      }
+
+      .c25 svg {
+        height: 0.25rem;
+      }
+
+      .c29 {
+        -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+        transform: rotate(180deg);
+      }
+
       .c2 {
         background: #f6f6f9;
         padding-top: 40px;
@@ -145,27 +365,57 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         padding-left: 56px;
       }
 
-      .c13 {
-        background: #ffffff;
-        border-radius: 4px;
-        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-      }
-
-      .c15 {
-        position: relative;
-      }
-
-      .c17 {
-        padding-right: 24px;
-        padding-left: 24px;
-      }
-
-      .c30 {
+      .c34 {
         max-width: 15.625rem;
       }
 
-      .c37 {
-        padding-left: 4px;
+      .c6 {
+        font-weight: 600;
+        font-size: 2rem;
+        line-height: 1.25;
+        color: #32324d;
+      }
+
+      .c10 {
+        font-size: 0.75rem;
+        line-height: 1.33;
+        font-weight: 600;
+        color: #32324d;
+      }
+
+      .c11 {
+        font-size: 1rem;
+        line-height: 1.5;
+        color: #666687;
+      }
+
+      .c33 {
+        font-size: 0.875rem;
+        line-height: 1.43;
+        font-weight: 600;
+        color: #32324d;
+      }
+
+      .c35 {
+        font-size: 0.875rem;
+        line-height: 1.43;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #32324d;
+      }
+
+      .c36 {
+        font-size: 0.875rem;
+        line-height: 1.43;
+        color: #32324d;
+      }
+
+      .c40 {
+        font-size: 0.875rem;
+        line-height: 1.43;
+        color: #4945ff;
       }
 
       .c3 {
@@ -200,7 +450,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         flex-direction: row;
       }
 
-      .c33 {
+      .c37 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -218,63 +468,6 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         justify-content: end;
       }
 
-      .c6 {
-        font-weight: 600;
-        font-size: 2rem;
-        line-height: 1.25;
-        color: #32324d;
-      }
-
-      .c10 {
-        font-size: 0.75rem;
-        line-height: 1.33;
-        font-weight: 600;
-        color: #32324d;
-      }
-
-      .c11 {
-        font-size: 1rem;
-        line-height: 1.5;
-        color: #666687;
-      }
-
-      .c23 {
-        font-weight: 600;
-        font-size: 0.6875rem;
-        line-height: 1.45;
-        text-transform: uppercase;
-        color: #666687;
-      }
-
-      .c29 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        font-weight: 600;
-        color: #32324d;
-      }
-
-      .c31 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: #32324d;
-      }
-
-      .c32 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        color: #32324d;
-      }
-
-      .c36 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        color: #4945ff;
-      }
-
       .c7 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -333,7 +526,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c38 .c1 {
+      .c42 .c1 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -344,146 +537,27 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         align-items: center;
       }
 
-      .c38 .c5 {
+      .c42 .c5 {
         color: #ffffff;
       }
 
-      .c38[aria-disabled='true'] .c5 {
+      .c42[aria-disabled='true'] .c5 {
         color: #666687;
       }
 
-      .c38[aria-disabled='true']:active .c5 {
+      .c42[aria-disabled='true']:active .c5 {
         color: #666687;
       }
 
-      .c38:active .c5 {
+      .c42:active .c5 {
         color: #4945ff;
       }
 
-      .c38 .c5 {
+      .c42 .c5 {
         color: #271fe0;
       }
 
-      .c14 {
-        overflow: hidden;
-        border: 1px solid #eaeaef;
-      }
-
-      .c19 {
-        width: 100%;
-        white-space: nowrap;
-      }
-
-      .c16:before {
-        background: linear-gradient(90deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
-        opacity: 0.2;
-        position: absolute;
-        height: 100%;
-        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-        width: 8px;
-        left: 0;
-      }
-
-      .c16:after {
-        background: linear-gradient(270deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
-        opacity: 0.2;
-        position: absolute;
-        height: 100%;
-        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-        width: 8px;
-        right: 0;
-        top: 0;
-      }
-
-      .c18 {
-        overflow-x: auto;
-      }
-
-      .c28 tr:last-of-type {
-        border-bottom: none;
-      }
-
-      .c20 {
-        border-bottom: 1px solid #eaeaef;
-      }
-
-      .c21 {
-        border-bottom: 1px solid #eaeaef;
-      }
-
-      .c21 td,
-      .c21 th {
-        padding: 16px;
-      }
-
-      .c21 td:first-of-type,
-      .c21 th:first-of-type {
-        padding: 0 4px;
-      }
-
-      .c21 th {
-        padding-top: 0;
-        padding-bottom: 0;
-        height: 3.5rem;
-      }
-
-      .c22 {
-        vertical-align: middle;
-        text-align: left;
-        color: #666687;
-        outline-offset: -4px;
-      }
-
-      .c22 input {
-        vertical-align: sub;
-      }
-
-      .c24 svg {
-        height: 0.25rem;
-      }
-
-      .c25 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        height: 2rem;
-        width: 2rem;
-        border: none;
-      }
-
-      .c25 svg > g,
-      .c25 svg path {
-        fill: #8e8ea9;
-      }
-
-      .c25:hover svg > g,
-      .c25:hover svg path {
-        fill: #666687;
-      }
-
-      .c25:active svg > g,
-      .c25:active svg path {
-        fill: #a5a5ba;
-      }
-
-      .c25[aria-disabled='true'] {
-        background-color: #eaeaef;
-      }
-
-      .c25[aria-disabled='true'] svg path {
-        fill: #666687;
-      }
-
-      .c34 {
+      .c38 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -498,15 +572,15 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         outline: none;
       }
 
-      .c34 svg path {
+      .c38 svg path {
         fill: #4945ff;
       }
 
-      .c34 svg {
+      .c38 svg {
         font-size: 0.625rem;
       }
 
-      .c34:after {
+      .c38:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -521,11 +595,11 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         border: 2px solid transparent;
       }
 
-      .c34:focus-visible {
+      .c38:focus-visible {
         outline: none;
       }
 
-      .c34:focus-visible:after {
+      .c38:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -605,22 +679,51 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         fill: #ffffff;
       }
 
-      .c27 {
-        -webkit-transform: rotate(180deg);
-        -ms-transform: rotate(180deg);
-        transform: rotate(180deg);
-      }
-
       .c0:focus-visible {
         outline: none;
       }
 
-      .c35 svg path {
+      .c30 tr:last-of-type {
+        border-bottom: none;
+      }
+
+      .c31 {
+        border-bottom: 1px solid #eaeaef;
+      }
+
+      .c31 td,
+      .c31 th {
+        padding: 16px;
+      }
+
+      .c31 td:first-of-type,
+      .c31 th:first-of-type {
+        padding: 0 4px;
+      }
+
+      .c31 th {
+        padding-top: 0;
+        padding-bottom: 0;
+        height: 3.5rem;
+      }
+
+      .c32 {
+        vertical-align: middle;
+        text-align: left;
+        color: #666687;
+        outline-offset: -4px;
+      }
+
+      .c32 input {
+        vertical-align: sub;
+      }
+
+      .c39 svg path {
         fill: #8e8ea9;
       }
 
-      .c35:hover svg path,
-      .c35:focus svg path {
+      .c39:hover svg path,
+      .c39:focus svg path {
         fill: #32324d;
       }
 
@@ -692,13 +795,13 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
           class="c1 c12"
         >
           <div
-            class="c1 c13 c14"
+            class="c13 c14"
           >
             <div
-              class="c1 c15 c16"
+              class="c15 c16"
             >
               <div
-                class="c1 c17 c18"
+                class="c17 c18"
               >
                 <table
                   aria-colcount="5"
@@ -711,21 +814,21 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                   >
                     <tr
                       aria-rowindex="1"
-                      class="c1 c21"
+                      class="c21"
                     >
                       <th
                         aria-colindex="1"
-                        class="c1 c22"
+                        class="c22"
                         role="gridcell"
                         tabindex="0"
                       >
                         <div
-                          class="c1 c4"
+                          class="c23"
                         >
                           <span>
                             <span
                               aria-labelledby="0"
-                              class="c5 c23"
+                              class="c24"
                               label="Name"
                               tabindex="-1"
                             >
@@ -733,24 +836,24 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c24"
+                            class="c25"
                           >
                             <span>
                               <button
                                 aria-disabled="false"
                                 aria-labelledby="1"
-                                class="c7 c25"
+                                class="c26 c27"
                                 tabindex="-1"
                                 type="button"
                               >
                                 <span
-                                  class="c26"
+                                  class="c28"
                                 >
                                   Sort on Name
                                 </span>
                                 <svg
                                   aria-hidden="true"
-                                  class="c27"
+                                  class="c29"
                                   fill="none"
                                   focusable="false"
                                   height="1em"
@@ -772,16 +875,16 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                       </th>
                       <th
                         aria-colindex="2"
-                        class="c1 c22"
+                        class="c22"
                         role="gridcell"
                       >
                         <div
-                          class="c1 c4"
+                          class="c23"
                         >
                           <span>
                             <span
                               aria-labelledby="2"
-                              class="c5 c23"
+                              class="c24"
                               label="Description"
                               tabindex="-1"
                             >
@@ -789,22 +892,22 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c24"
+                            class="c25"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="3"
-                        class="c1 c22"
+                        class="c22"
                         role="gridcell"
                       >
                         <div
-                          class="c1 c4"
+                          class="c23"
                         >
                           <span>
                             <span
                               aria-labelledby="3"
-                              class="c5 c23"
+                              class="c24"
                               label="Created at"
                               tabindex="-1"
                             >
@@ -812,22 +915,22 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c24"
+                            class="c25"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="4"
-                        class="c1 c22"
+                        class="c22"
                         role="gridcell"
                       >
                         <div
-                          class="c1 c4"
+                          class="c23"
                         >
                           <span>
                             <span
                               aria-labelledby="4"
-                              class="c5 c23"
+                              class="c24"
                               label="Last used"
                               tabindex="-1"
                             >
@@ -835,73 +938,73 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c24"
+                            class="c25"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="5"
-                        class="c1 c22"
+                        class="c22"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <div
-                          class="c1 c4"
+                          class="c23"
                         >
                           <div
-                            class="c26"
+                            class="c28"
                           >
                             Actions
                           </div>
                           <span
-                            class="c24"
+                            class="c25"
                           />
                         </div>
                       </th>
                     </tr>
                   </thead>
                   <tbody
-                    class="c28"
+                    class="c30"
                     entriestodelete=""
                     headers="[object Object],[object Object],[object Object],[object Object]"
                   >
                     <tr
                       aria-rowindex="2"
-                      class="c1 c21"
+                      class="c1 c31"
                       style="cursor: pointer;"
                     >
                       <td
                         aria-colindex="1"
-                        class="c1 c22"
+                        class="c1 c32"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c5 c29"
+                          class="c5 c33"
                         >
                           My super token
                         </span>
                       </td>
                       <td
                         aria-colindex="2"
-                        class="c1 c30 c22"
+                        class="c1 c34 c32"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c5 c31"
+                          class="c5 c35"
                         >
                           This describe my super token
                         </span>
                       </td>
                       <td
                         aria-colindex="3"
-                        class="c1 c22"
+                        class="c1 c32"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c5 c32"
+                          class="c5 c36"
                         >
                           <time
                             datetime="2021-11-15T00:00:00.000Z"
@@ -913,27 +1016,27 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                       </td>
                       <td
                         aria-colindex="4"
-                        class="c1 c22"
+                        class="c1 c32"
                         role="gridcell"
                         tabindex="-1"
                       />
                       <td
                         aria-colindex="5"
-                        class="c1 c22"
+                        class="c1 c32"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <div
-                          class="c1 c33"
+                          class="c1 c37"
                         >
                           <a
-                            class="c34 c35"
+                            class="c38 c39"
                             href="/settings/transfer-tokens/1"
                             tabindex="-1"
                             title="Edit My super token"
                           >
                             <span
-                              class="c5 c36"
+                              class="c5 c40"
                             >
                               <svg
                                 fill="none"
@@ -953,20 +1056,20 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                           </a>
                           <div
                             aria-hidden="true"
-                            class="c1 c37"
+                            class="c41"
                             role="button"
                           >
                             <span>
                               <button
                                 aria-disabled="false"
                                 aria-labelledby="5"
-                                class="c7 c25"
+                                class="c26 c27"
                                 name="delete"
                                 tabindex="-1"
                                 type="button"
                               >
                                 <span
-                                  class="c26"
+                                  class="c28"
                                 >
                                   Delete My super token
                                 </span>

From 9515855a1ba663501853e594fe7ef861db6a533f Mon Sep 17 00:00:00 2001
From: Simone Taeggi <startae14@gmail.com>
Date: Wed, 22 Feb 2023 16:47:05 +0100
Subject: [PATCH 3/5] reduce the characters showned in the list view for the
 name column

---
 .../components/Tokens/Table/index.js          |  8 +++----
 .../ApiTokens/ListView/tests/index.test.js    | 24 +++++++++++--------
 .../ListView/tests/index.test.js              | 24 +++++++++++--------
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/index.js b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/index.js
index 42004f367f..89882a7ed1 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/index.js
@@ -1,9 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { Typography } from '@strapi/design-system/Typography';
-import { Tbody, Tr, Td } from '@strapi/design-system/Table';
-import { Flex } from '@strapi/design-system/Flex';
+import { Flex, Typography, Tbody, Tr, Td } from '@strapi/design-system';
 import {
   RelativeTime,
   onRowClick,
@@ -55,8 +53,8 @@ const Table = ({ permissions, headers, contentType, isLoading, tokens, onConfirm
                 condition: canUpdate,
               })}
             >
-              <Td>
-                <Typography textColor="neutral800" fontWeight="bold">
+              <Td maxWidth={pxToRem(250)}>
+                <Typography textColor="neutral800" fontWeight="bold" ellipsis>
                   {token.name}
                 </Typography>
               </Td>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js
index ad33616792..3965b7f216 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js
@@ -431,7 +431,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         padding-right: 8px;
       }
 
-      .c35 {
+      .c33 {
         max-width: 15.625rem;
       }
 
@@ -442,9 +442,13 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         color: #32324d;
       }
 
-      .c34 {
+      .c35 {
         font-size: 0.875rem;
         line-height: 1.43;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         font-weight: 600;
         color: #32324d;
       }
@@ -693,14 +697,14 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         height: 3.5rem;
       }
 
-      .c33 {
+      .c34 {
         vertical-align: middle;
         text-align: left;
         color: #666687;
         outline-offset: -4px;
       }
 
-      .c33 input {
+      .c34 input {
         vertical-align: sub;
       }
 
@@ -961,19 +965,19 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                     >
                       <td
                         aria-colindex="1"
-                        class="c9 c33"
+                        class="c9 c33 c34"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c11 c34"
+                          class="c11 c35"
                         >
                           My super token
                         </span>
                       </td>
                       <td
                         aria-colindex="2"
-                        class="c9 c35 c33"
+                        class="c9 c33 c34"
                         role="gridcell"
                         tabindex="-1"
                       >
@@ -985,7 +989,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                       </td>
                       <td
                         aria-colindex="3"
-                        class="c9 c33"
+                        class="c9 c34"
                         role="gridcell"
                         tabindex="-1"
                       >
@@ -1002,13 +1006,13 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                       </td>
                       <td
                         aria-colindex="4"
-                        class="c9 c33"
+                        class="c9 c34"
                         role="gridcell"
                         tabindex="-1"
                       />
                       <td
                         aria-colindex="5"
-                        class="c9 c33"
+                        class="c9 c34"
                         role="gridcell"
                         tabindex="-1"
                       >
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/tests/index.test.js
index edb89e88f2..9a75a5f0aa 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/tests/index.test.js
@@ -365,7 +365,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         padding-left: 56px;
       }
 
-      .c34 {
+      .c32 {
         max-width: 15.625rem;
       }
 
@@ -389,9 +389,13 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         color: #666687;
       }
 
-      .c33 {
+      .c34 {
         font-size: 0.875rem;
         line-height: 1.43;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         font-weight: 600;
         color: #32324d;
       }
@@ -707,14 +711,14 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         height: 3.5rem;
       }
 
-      .c32 {
+      .c33 {
         vertical-align: middle;
         text-align: left;
         color: #666687;
         outline-offset: -4px;
       }
 
-      .c32 input {
+      .c33 input {
         vertical-align: sub;
       }
 
@@ -975,19 +979,19 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                     >
                       <td
                         aria-colindex="1"
-                        class="c1 c32"
+                        class="c1 c32 c33"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c5 c33"
+                          class="c5 c34"
                         >
                           My super token
                         </span>
                       </td>
                       <td
                         aria-colindex="2"
-                        class="c1 c34 c32"
+                        class="c1 c32 c33"
                         role="gridcell"
                         tabindex="-1"
                       >
@@ -999,7 +1003,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                       </td>
                       <td
                         aria-colindex="3"
-                        class="c1 c32"
+                        class="c1 c33"
                         role="gridcell"
                         tabindex="-1"
                       >
@@ -1016,13 +1020,13 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                       </td>
                       <td
                         aria-colindex="4"
-                        class="c1 c32"
+                        class="c1 c33"
                         role="gridcell"
                         tabindex="-1"
                       />
                       <td
                         aria-colindex="5"
-                        class="c1 c32"
+                        class="c1 c33"
                         role="gridcell"
                         tabindex="-1"
                       >

From 7f64567cbe521ddf76f264753698456121d2980d Mon Sep 17 00:00:00 2001
From: Simone Taeggi <startae14@gmail.com>
Date: Thu, 23 Feb 2023 12:25:28 +0100
Subject: [PATCH 4/5] add ellipsis to title and fix eslint problem

---
 .../src/pages/SettingsPage/components/Tokens/FormHead/index.js  | 1 +
 packages/core/data-transfer/src/strapi/remote/handlers.ts       | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/FormHead/index.js b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/FormHead/index.js
index dc5f2ef314..dd5786ce74 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/FormHead/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/FormHead/index.js
@@ -69,6 +69,7 @@ const FormHead = ({
           })}
         </Link>
       }
+      ellipsis
     />
   );
 };
diff --git a/packages/core/data-transfer/src/strapi/remote/handlers.ts b/packages/core/data-transfer/src/strapi/remote/handlers.ts
index cf8c33c0d7..e59328170c 100644
--- a/packages/core/data-transfer/src/strapi/remote/handlers.ts
+++ b/packages/core/data-transfer/src/strapi/remote/handlers.ts
@@ -13,7 +13,7 @@ import { ProviderTransferError, ProviderInitializationError } from '../../errors
 import { TRANSFER_METHODS } from './constants';
 import { createFlow, DEFAULT_TRANSFER_FLOW } from './flows';
 
-type TransferMethod = typeof TRANSFER_METHODS[number];
+type TransferMethod = (typeof TRANSFER_METHODS)[number];
 
 interface ITransferState {
   transfer?: {

From 6bdbe170683dba349dd66a989f6c11990ac12cd9 Mon Sep 17 00:00:00 2001
From: Simone Taeggi <startae14@gmail.com>
Date: Tue, 7 Mar 2023 18:13:28 +0100
Subject: [PATCH 5/5] upgrade the design-system and icons dependencies, the
 snapshots and a failing unit test

---
 examples/getstarted/package.json              |    2 +-
 .../components/InputUID/tests/index.test.js   |  120 +-
 .../__snapshots__/RelationInput.test.js.snap  |    4 +-
 .../tests/__snapshots__/index.test.js.snap    |  327 +-
 .../pages/App/tests/index.test.js             |  152 +-
 .../tests/__snapshots__/index.test.js.snap    |  340 +-
 .../pages/EditView/Header/tests/index.test.js |   66 +-
 .../tests/__snapshots__/index.test.js.snap    |  444 +-
 .../pages/NoContentType/tests/index.test.js   |   96 +-
 .../pages/NoPermissions/tests/index.test.js   |   36 +-
 .../components/Login/tests/BaseLogin.test.js  |  320 +-
 .../components/Register/tests/index.test.js   |  340 +-
 .../ResetPassword/tests/index.test.js         |  198 +-
 .../InternalErrorPage/tests/index.test.js     |   96 +-
 .../tests/__snapshots__/index.test.js.snap    |  331 +-
 .../tests/__snapshots__/plugins.test.js.snap  |  331 +-
 .../__snapshots__/providers.test.js.snap      |  425 +-
 .../pages/NotFoundPage/tests/index.test.js    |   96 +-
 .../tests/__snapshots__/index.test.js.snap    |  409 +-
 .../tests/__snapshots__/index.test.js.snap    |  781 ++--
 .../ApiTokens/ListView/tests/index.test.js    |  300 +-
 .../tests/__snapshots__/index.test.js.snap    | 3808 +++++++++--------
 .../__snapshots__/AddLogoDialog.test.js.snap  |  146 +-
 .../tests/__snapshots__/index.test.js.snap    |  176 +-
 .../pages/Roles/ListPage/tests/index.test.js  |  192 +-
 .../tests/__snapshots__/index.test.js.snap    |  485 +--
 .../ListView/tests/index.test.js              |  300 +-
 .../tests/__snapshots__/index.test.js.snap    |  213 +-
 .../Webhooks/ListView/tests/index.test.js     |  396 +-
 .../pages/SettingsPage/tests/index.test.js    |   18 +-
 .../src/pages/UseCasePage/tests/index.test.js |  128 +-
 .../tests/__snapshots__/index.test.js.snap    |  178 +-
 .../tests/__snapshots__/index.test.js.snap    |  142 +-
 packages/core/admin/package.json              |    4 +-
 .../tests/__snapshots__/index.test.js.snap    |  298 +-
 .../tests/__snapshots__/index.test.js.snap    | 1554 +++----
 .../core/content-type-builder/package.json    |    4 +-
 .../src/pages/Settings/tests/index.test.js    |  291 +-
 packages/core/email/package.json              |    4 +-
 .../DateTimePicker/DateTimePicker.stories.mdx |   19 +-
 .../tests/__snapshots__/index.test.js.snap    |  149 +-
 .../tests/__snapshots__/index.test.js.snap    |  615 +--
 .../FilterPopoverURLQuery.stories.mdx         |    2 +
 .../tests/__snapshots__/index.test.js.snap    |  132 +-
 .../NotAllowedInput/tests/index.test.js       |   58 +-
 .../PageSizeURLQuery/tests/index.test.js      |   61 +-
 .../SearchURLQuery/tests/index.test.js        |    8 +-
 packages/core/helper-plugin/package.json      |    8 +-
 .../AssetCard/tests/DocAssetCard.test.js      |   18 +-
 .../AssetCard/tests/ImageAssetCard.test.js    |   18 +-
 .../tests/__snapshots__/index.test.js.snap    |  199 +-
 .../__snapshots__/AssetGridList.test.js.snap  |   18 +-
 .../EditAssetDialog.test.js.snap              |  305 +-
 .../RemoveAssetDialog.test.js.snap            |  167 +-
 .../tests/__snapshots__/index.test.js.snap    |  305 +-
 .../EditFolderDialog.test.js.snap             |  209 +-
 .../tests/__snapshots__/index.test.js.snap    |  293 +-
 .../__snapshots__/FolderCard.test.js.snap     |   36 +-
 .../MediaLibraryInput.test.js.snap            |   70 +-
 .../PendingAssetStep.test.js.snap             |   18 +-
 .../UploadAssetDialog.test.js.snap            |  120 +-
 .../tests/__snapshots__/Settings.test.js.snap |  106 +-
 .../ConfigureTheView.test.js.snap             |  138 +-
 .../tests/__snapshots__/Header.test.js.snap   |  100 +-
 .../pages/SettingsPage/tests/index.test.js    |  174 +-
 packages/core/upload/package.json             |    4 +-
 .../color-picker-input.test.js.snap           |    4 +-
 packages/plugins/color-picker/package.json    |    4 +-
 packages/plugins/documentation/package.json   |    4 +-
 packages/plugins/graphql/package.json         |    4 +-
 .../__snapshots__/LocaleSelect.test.js.snap   |   60 +-
 packages/plugins/i18n/package.json            |    4 +-
 packages/plugins/sentry/package.json          |    4 +-
 .../FormModal/Input/tests/index.test.js       |   48 +-
 .../AdvancedSettings/tests/index.test.js      |  188 +-
 .../pages/EmailTemplates/tests/index.test.js  |  174 +-
 .../src/pages/Providers/tests/index.test.js   |   26 +-
 .../Roles/CreatePage/tests/index.test.js      |  259 +-
 .../pages/Roles/EditPage/tests/index.test.js  |  259 +-
 .../pages/Roles/ListPage/tests/index.test.js  |  144 +-
 .../plugins/users-permissions/package.json    |    4 +-
 yarn.lock                                     |   16 +-
 82 files changed, 8969 insertions(+), 9134 deletions(-)

diff --git a/examples/getstarted/package.json b/examples/getstarted/package.json
index 637341b433..47d7bbe079 100644
--- a/examples/getstarted/package.json
+++ b/examples/getstarted/package.json
@@ -12,7 +12,7 @@
     "strapi": "strapi"
   },
   "dependencies": {
-    "@strapi/icons": "1.6.4",
+    "@strapi/icons": "1.6.5",
     "@strapi/plugin-color-picker": "4.7.1",
     "@strapi/plugin-documentation": "4.7.1",
     "@strapi/plugin-graphql": "4.7.1",
diff --git a/packages/core/admin/admin/src/content-manager/components/InputUID/tests/index.test.js b/packages/core/admin/admin/src/content-manager/components/InputUID/tests/index.test.js
index 8d144bb555..14fb285153 100644
--- a/packages/core/admin/admin/src/content-manager/components/InputUID/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/components/InputUID/tests/index.test.js
@@ -47,11 +47,16 @@ describe('<InputUID />', () => {
     });
 
     expect(container.firstChild).toMatchInlineSnapshot(`
-      .c7 {
+      .c6 {
         padding-right: 12px;
         padding-left: 8px;
       }
 
+      .c8 {
+        background: transparent;
+        border-style: none;
+      }
+
       .c0 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
@@ -64,9 +69,10 @@ describe('<InputUID />', () => {
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
+        gap: 4px;
       }
 
-      .c3 {
+      .c2 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -80,7 +86,7 @@ describe('<InputUID />', () => {
         flex-direction: row;
       }
 
-      .c4 {
+      .c3 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -98,23 +104,44 @@ describe('<InputUID />', () => {
         justify-content: space-between;
       }
 
-      .c2 {
+      .c9 {
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: unset;
+        -webkit-justify-content: unset;
+        -ms-flex-pack: unset;
+        justify-content: unset;
+      }
+
+      .c1 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #32324d;
       }
 
-      .c1 > * {
-        margin-top: 0;
-        margin-bottom: 0;
+      .c12 {
+        border: 0;
+        -webkit-clip: rect(0 0 0 0);
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
       }
 
-      .c1 > * + * {
-        margin-top: 4px;
-      }
-
-      .c6 {
+      .c5 {
         border: none;
         border-radius: 4px;
         padding-bottom: 0.65625rem;
@@ -129,36 +156,36 @@ describe('<InputUID />', () => {
         background: inherit;
       }
 
-      .c6::-webkit-input-placeholder {
+      .c5::-webkit-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c6::-moz-placeholder {
+      .c5::-moz-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c6:-ms-input-placeholder {
+      .c5:-ms-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c6::placeholder {
+      .c5::placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c6[aria-disabled='true'] {
+      .c5[aria-disabled='true'] {
         color: inherit;
       }
 
-      .c6:focus {
+      .c5:focus {
         outline: none;
         box-shadow: none;
       }
 
-      .c5 {
+      .c4 {
         border: 1px solid #dcdce4;
         border-radius: 4px;
         background: #ffffff;
@@ -170,90 +197,87 @@ describe('<InputUID />', () => {
         transition-duration: 0.2s;
       }
 
-      .c5:focus-within {
+      .c4:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c9 {
-        border: none;
-        background: transparent;
+      .c10 {
         font-size: 1.6rem;
-        width: auto;
         padding: 0;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
       }
 
-      .c8 {
+      .c7 {
         position: relative;
       }
 
-      .c10 svg {
+      .c11 svg {
         height: 1rem;
         width: 1rem;
       }
 
-      .c10 svg path {
+      .c11 svg path {
         fill: #a5a5ba;
       }
 
-      .c10 svg:hover path {
+      .c11 svg:hover path {
         fill: #4945ff;
       }
 
-      .c11 {
+      .c13 {
         -webkit-animation: gzYjWD 2s infinite linear;
         animation: gzYjWD 2s infinite linear;
       }
 
       <div>
-        <div>
+        <div
+          class=""
+        >
           <div
-            class="c0 c1"
+            class="c0"
           >
             <label
-              class="c2"
+              class="c1"
               for="1"
             >
               <div
-                class="c3"
+                class="c2"
               >
                 test
               </div>
             </label>
             <div
-              class="c4 c5"
+              class="c3 c4"
             >
               <input
                 aria-disabled="false"
                 aria-invalid="false"
                 aria-required="false"
-                class="c6"
+                class="c5"
                 id="1"
                 name="test"
                 placeholder=""
                 value="michka"
               />
               <div
-                class="c7"
+                class="c6"
               >
                 <div
-                  class="c8"
+                  class="c7"
                 >
                   <button
-                    aria-label="regenerate"
-                    class="c9 c10"
+                    class="c8 c9 c10 c11"
                     type="button"
                   >
+                    <span
+                      class="c12"
+                    >
+                      regenerate
+                    </span>
                     <div
-                      class="c3 c11"
+                      aria-hidden="true"
+                      class="c2 c13"
+                      focusable="false"
                     >
                       <svg
                         fill="none"
diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap b/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
index 5bf8a658b3..8f3a47a31f 100644
--- a/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
@@ -552,7 +552,9 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
 }
 
 <div>
-  <div>
+  <div
+    class=""
+  >
     <div
       class="c0 c1"
       wrap="wrap"
diff --git a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/__snapshots__/index.test.js.snap
index bcc1131d48..b2922041b2 100644
--- a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/__snapshots__/index.test.js.snap
@@ -13,16 +13,16 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   padding: 8px;
 }
 
-.c13 {
+.c12 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c15 {
+.c14 {
   padding-left: 12px;
 }
 
-.c20 {
+.c19 {
   padding: 8px;
   border-radius: 4px;
   border-color: #dcdce4;
@@ -32,7 +32,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   cursor: pointer;
 }
 
-.c28 {
+.c27 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -43,13 +43,13 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   cursor: pointer;
 }
 
-.c34 {
+.c33 {
   background: #f6f6f9;
   padding: 8px;
   border-radius: 4px;
 }
 
-.c36 {
+.c35 {
   background: #ffffff;
   padding: 8px;
   border-radius: 4px;
@@ -134,7 +134,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   flex-direction: column;
 }
 
-.c21 {
+.c20 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -152,7 +152,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   justify-content: center;
 }
 
-.c29 {
+.c28 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -167,7 +167,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   gap: 8px;
 }
 
-.c35 {
+.c34 {
   -webkit-align-items: flex-end;
   -webkit-box-align: flex-end;
   -ms-flex-align: flex-end;
@@ -192,7 +192,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   color: #32324d;
 }
 
-.c14 {
+.c13 {
   font-size: 0.875rem;
   line-height: 1.43;
   display: block;
@@ -202,44 +202,39 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   color: #666687;
 }
 
-.c31 {
+.c30 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c38 {
+.c37 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c9 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c22 {
+.c21 {
   position: relative;
   outline: none;
 }
 
-.c22 svg {
+.c21 svg {
   height: 12px;
   width: 12px;
 }
 
-.c22 svg > g,
-.c22 svg path {
+.c21 svg > g,
+.c21 svg path {
   fill: #ffffff;
 }
 
-.c22[aria-disabled='true'] {
+.c21[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c22:after {
+.c21:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -254,11 +249,11 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   border: 2px solid transparent;
 }
 
-.c22:focus-visible {
+.c21:focus-visible {
   outline: none;
 }
 
-.c22:focus-visible:after {
+.c21:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -269,7 +264,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c26 {
+.c25 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -281,56 +276,56 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   width: 1px;
 }
 
-.c30 {
+.c29 {
   height: 2rem;
   border: 1px solid #dcdce4;
   background: #ffffff;
 }
 
-.c30[aria-disabled='true'] {
+.c29[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c30[aria-disabled='true'] .c2 {
+.c29[aria-disabled='true'] .c2 {
   color: #666687;
 }
 
-.c30[aria-disabled='true'] svg > g,.c30[aria-disabled='true'] svg path {
+.c29[aria-disabled='true'] svg > g,.c29[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c30[aria-disabled='true']:active {
+.c29[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c30[aria-disabled='true']:active .c2 {
+.c29[aria-disabled='true']:active .c2 {
   color: #666687;
 }
 
-.c30[aria-disabled='true']:active svg > g,.c30[aria-disabled='true']:active svg path {
+.c29[aria-disabled='true']:active svg > g,.c29[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c30:hover {
+.c29:hover {
   background-color: #f6f6f9;
 }
 
-.c30:active {
+.c29:active {
   background-color: #eaeaef;
 }
 
-.c30 .c2 {
+.c29 .c2 {
   color: #32324d;
 }
 
-.c30 svg > g,
-.c30 svg path {
+.c29 svg > g,
+.c29 svg path {
   fill: #32324d;
 }
 
-.c10 {
+.c9 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -346,28 +341,28 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   transition-duration: 0.2s;
 }
 
-.c10:focus-within {
+.c9:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c16 {
+.c15 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c16 svg {
+.c15 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c16 svg path {
+.c15 svg path {
   fill: #666687;
 }
 
-.c17 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -376,11 +371,11 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   border: none;
 }
 
-.c17 svg {
+.c16 svg {
   width: 0.375rem;
 }
 
-.c11 {
+.c10 {
   position: absolute;
   left: 0;
   right: 0;
@@ -391,85 +386,85 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   border: none;
 }
 
-.c11:focus {
+.c10:focus {
   outline: none;
 }
 
-.c11[aria-disabled='true'] {
+.c10[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c12 {
+.c11 {
   width: 100%;
 }
 
-.c24 svg > g,
-.c24 svg path {
+.c23 svg > g,
+.c23 svg path {
   fill: #8e8ea9;
 }
 
-.c24:hover svg > g,
-.c24:hover svg path {
+.c23:hover svg > g,
+.c23:hover svg path {
   fill: #666687;
 }
 
-.c24:active svg > g,
-.c24:active svg path {
+.c23:active svg > g,
+.c23:active svg path {
   fill: #a5a5ba;
 }
 
-.c24[aria-disabled='true'] svg path {
+.c23[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c18 span:first-child button {
+.c17 span:first-child button {
   border-left: 1px solid #dcdce4;
   border-radius: 4px 0 0 4px;
 }
 
-.c18 span:last-child button {
+.c17 span:last-child button {
   border-radius: 0 4px 4px 0;
 }
 
-.c18 .c23 {
+.c17 .c22 {
   border-radius: 0;
   border-left: none;
 }
 
-.c18 .c23 svg path {
+.c17 .c22 svg path {
   fill: #4a4a6a;
 }
 
-.c18 .c23:hover {
+.c17 .c22:hover {
   background-color: #f6f6f9;
 }
 
-.c18 .c23:hover svg path {
+.c17 .c22:hover svg path {
   fill: #32324d;
 }
 
-.c18 .c23:active {
+.c17 .c22:active {
   background-color: #eaeaef;
 }
 
-.c18 .c23:active svg path {
+.c17 .c22:active svg path {
   fill: #212134;
 }
 
-.c18 .c23[aria-disabled='true'] svg path {
+.c17 .c22[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c33 {
+.c32 {
   cursor: auto;
   height: 100%;
 }
 
-.c33 .CodeMirror-placeholder {
+.c32 .CodeMirror-placeholder {
   color: #666687 !important;
 }
 
-.c33 .CodeMirror {
+.c32 .CodeMirror {
   font-size: 0.875rem;
   height: 290px;
   color: #32324d;
@@ -477,22 +472,22 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell, 'Open Sans','Helvetica Neue',sans-serif;
 }
 
-.c33 .CodeMirror-lines {
+.c32 .CodeMirror-lines {
   padding: 12px 16px;
 }
 
-.c33 .CodeMirror-scrollbar-filler,
-.c33 .CodeMirror-gutter-filler {
+.c32 .CodeMirror-scrollbar-filler,
+.c32 .CodeMirror-gutter-filler {
   background-color: #ffffff;
 }
 
-.c33 .CodeMirror-gutters {
+.c32 .CodeMirror-gutters {
   border-right: 1px solid #ddd;
   background-color: #f7f7f7;
   white-space: nowrap;
 }
 
-.c33 .CodeMirror-linenumber {
+.c32 .CodeMirror-linenumber {
   padding: 0 3px 0 5px;
   min-width: 20px;
   text-align: right;
@@ -500,31 +495,31 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   white-space: nowrap;
 }
 
-.c33 .CodeMirror-guttermarker {
+.c32 .CodeMirror-guttermarker {
   color: black;
 }
 
-.c33 .CodeMirror-guttermarker-subtle {
+.c32 .CodeMirror-guttermarker-subtle {
   color: #999;
 }
 
-.c33 .CodeMirror-cursor {
+.c32 .CodeMirror-cursor {
   border-left: 1px solid black;
   border-right: none;
   width: 0;
 }
 
-.c33 .CodeMirror div.CodeMirror-secondarycursor {
+.c32 .CodeMirror div.CodeMirror-secondarycursor {
   border-left: 1px solid silver;
 }
 
-.c33 .cm-fat-cursor .CodeMirror-cursor {
+.c32 .cm-fat-cursor .CodeMirror-cursor {
   width: auto;
   border: 0 !important;
   background: #7e7;
 }
 
-.c33 .cm-fat-cursor-mark {
+.c32 .cm-fat-cursor-mark {
   background-color: rgba(20,255,20,0.5);
   -webkit-animation: blink 1.06s steps(1) infinite;
   -moz-animation: blink 1.06s steps(1) infinite;
@@ -532,7 +527,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   animation: blink 1.06s steps(1) infinite;
 }
 
-.c33 .cm-animate-fat-cursor {
+.c32 .cm-animate-fat-cursor {
   width: auto;
   border: 0;
   -webkit-animation: blink 1.06s steps(1) infinite;
@@ -542,13 +537,13 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   background-color: #7e7;
 }
 
-.c33 .cm-tab {
+.c32 .cm-tab {
   display: inline-block;
   -webkit-text-decoration: inherit;
   text-decoration: inherit;
 }
 
-.c33 .CodeMirror-rulers {
+.c32 .CodeMirror-rulers {
   position: absolute;
   left: 0;
   right: 0;
@@ -557,59 +552,59 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   overflow: hidden;
 }
 
-.c33 .CodeMirror-ruler {
+.c32 .CodeMirror-ruler {
   border-left: 1px solid #ccc;
   top: 0;
   bottom: 0;
   position: absolute;
 }
 
-.c33 .cm-header,
-.c33 .cm-strong {
+.c32 .cm-header,
+.c32 .cm-strong {
   font-weight: bold;
 }
 
-.c33 .cm-em {
+.c32 .cm-em {
   font-style: italic;
 }
 
-.c33 .cm-link {
+.c32 .cm-link {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c33 .cm-strikethrough {
+.c32 .cm-strikethrough {
   -webkit-text-decoration: line-through;
   text-decoration: line-through;
 }
 
-.c33 .CodeMirror-composing {
+.c32 .CodeMirror-composing {
   border-bottom: 2px solid;
 }
 
-.c33 div.CodeMirror span.CodeMirror-matchingbracket {
+.c32 div.CodeMirror span.CodeMirror-matchingbracket {
   color: #0b0;
 }
 
-.c33 div.CodeMirror span.CodeMirror-nonmatchingbracket {
+.c32 div.CodeMirror span.CodeMirror-nonmatchingbracket {
   color: #a22;
 }
 
-.c33 .CodeMirror-matchingtag {
+.c32 .CodeMirror-matchingtag {
   background: rgba(255,150,0,0.3);
 }
 
-.c33 .CodeMirror-activeline-background {
+.c32 .CodeMirror-activeline-background {
   background: #e8f2ff;
 }
 
-.c33 .CodeMirror {
+.c32 .CodeMirror {
   position: relative;
   overflow: hidden;
   background: #ffffff;
 }
 
-.c33 .CodeMirror-scroll {
+.c32 .CodeMirror-scroll {
   overflow: scroll !important;
   margin-bottom: -50px;
   margin-right: -50px;
@@ -619,47 +614,47 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   position: relative;
 }
 
-.c33 .CodeMirror-sizer {
+.c32 .CodeMirror-sizer {
   position: relative;
   border-right: 50px solid transparent;
 }
 
-.c33 .CodeMirror-vscrollbar,
-.c33 .CodeMirror-hscrollbar,
-.c33 .CodeMirror-scrollbar-filler,
-.c33 .CodeMirror-gutter-filler {
+.c32 .CodeMirror-vscrollbar,
+.c32 .CodeMirror-hscrollbar,
+.c32 .CodeMirror-scrollbar-filler,
+.c32 .CodeMirror-gutter-filler {
   position: absolute;
   z-index: 1;
   display: none;
   outline: none;
 }
 
-.c33 .CodeMirror-vscrollbar {
+.c32 .CodeMirror-vscrollbar {
   right: 0;
   top: 0;
   overflow-x: hidden;
   overflow-y: scroll;
 }
 
-.c33 .CodeMirror-hscrollbar {
+.c32 .CodeMirror-hscrollbar {
   bottom: 0;
   left: 0;
   overflow-y: hidden;
   overflow-x: scroll;
 }
 
-.c33 .CodeMirror-scrollbar-filler {
+.c32 .CodeMirror-scrollbar-filler {
   right: 0;
   bottom: 0;
 }
 
-.c33 .CodeMirror-lines {
+.c32 .CodeMirror-lines {
   cursor: text;
   min-height: 1px;
 }
 
-.c33 .CodeMirror pre.CodeMirror-line,
-.c33 .CodeMirror pre.CodeMirror-line-like {
+.c32 .CodeMirror pre.CodeMirror-line,
+.c32 .CodeMirror pre.CodeMirror-line-like {
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   border-radius: 0;
@@ -679,18 +674,18 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   font-variant-ligatures: contextual;
 }
 
-.c33 .CodeMirror pre.CodeMirror-line-like {
+.c32 .CodeMirror pre.CodeMirror-line-like {
   z-index: 2;
 }
 
-.c33 .CodeMirror-wrap pre.CodeMirror-line,
-.c33 .CodeMirror-wrap pre.CodeMirror-line-like {
+.c32 .CodeMirror-wrap pre.CodeMirror-line,
+.c32 .CodeMirror-wrap pre.CodeMirror-line-like {
   word-wrap: break-word;
   white-space: pre-wrap;
   word-break: normal;
 }
 
-.c33 .CodeMirror-linebackground {
+.c32 .CodeMirror-linebackground {
   position: absolute;
   left: 0;
   right: 0;
@@ -699,29 +694,29 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   z-index: 0;
 }
 
-.c33 .CodeMirror-linewidget {
+.c32 .CodeMirror-linewidget {
   position: relative;
   padding: 0.1px;
 }
 
-.c33 .CodeMirror-rtl pre {
+.c32 .CodeMirror-rtl pre {
   direction: rtl;
 }
 
-.c33 .CodeMirror-code {
+.c32 .CodeMirror-code {
   outline: none;
 }
 
-.c33 .CodeMirror-scroll,
-.c33 .CodeMirror-sizer,
-.c33 .CodeMirror-gutter,
-.c33 .CodeMirror-gutters,
-.c33 .CodeMirror-linenumber {
+.c32 .CodeMirror-scroll,
+.c32 .CodeMirror-sizer,
+.c32 .CodeMirror-gutter,
+.c32 .CodeMirror-gutters,
+.c32 .CodeMirror-linenumber {
   -moz-box-sizing: content-box;
   box-sizing: content-box;
 }
 
-.c33 .CodeMirror-measure {
+.c32 .CodeMirror-measure {
   position: absolute;
   width: 100%;
   height: 0;
@@ -729,87 +724,87 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   visibility: hidden;
 }
 
-.c33 .CodeMirror-cursor {
+.c32 .CodeMirror-cursor {
   position: absolute;
   pointer-events: none;
   border-color: #32324d;
 }
 
-.c33 .CodeMirror-measure pre {
+.c32 .CodeMirror-measure pre {
   position: static;
 }
 
-.c33 div.CodeMirror-cursors {
+.c32 div.CodeMirror-cursors {
   visibility: hidden;
   position: relative;
 }
 
-.c33 div.CodeMirror-cursors + div {
+.c32 div.CodeMirror-cursors + div {
   z-index: 0 !important;
 }
 
-.c33 div.CodeMirror-dragcursors {
+.c32 div.CodeMirror-dragcursors {
   visibility: visible;
 }
 
-.c33 .CodeMirror-focused div.CodeMirror-cursors {
+.c32 .CodeMirror-focused div.CodeMirror-cursors {
   visibility: visible;
 }
 
-.c33 .CodeMirror-selected {
+.c32 .CodeMirror-selected {
   background: #dcdce4;
 }
 
-.c33 .CodeMirror-crosshair {
+.c32 .CodeMirror-crosshair {
   cursor: crosshair;
 }
 
-.c33 .cm-force-border {
+.c32 .cm-force-border {
   padding-right: 0.1px;
 }
 
-.c33 .cm-tab-wrap-hack:after {
+.c32 .cm-tab-wrap-hack:after {
   content: '';
 }
 
-.c33 span.CodeMirror-selectedtext {
+.c32 span.CodeMirror-selectedtext {
   background: none;
 }
 
-.c33 span {
+.c32 span {
   color: #32324d !important;
 }
 
-.c25 {
+.c24 {
   padding: 8px;
   outline-offset: -2px !important;
 }
 
-.c25 svg {
+.c24 svg {
   width: 1.125rem;
   height: 1.125rem;
 }
 
-.c19 {
+.c18 {
   margin-left: 16px;
 }
 
-.c27 {
+.c26 {
   margin: 0 8px;
   padding: 8px;
 }
 
-.c27 svg {
+.c26 svg {
   width: 1.125rem;
   height: 1.125rem;
 }
 
-.c32 {
+.c31 {
   position: relative;
   height: calc(100% - 48px);
 }
 
-.c37 {
+.c36 {
   background-color: transparent;
   border: none;
   -webkit-align-items: center;
@@ -818,11 +813,11 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
   align-items: center;
 }
 
-.c37 svg {
+.c36 svg {
   margin-left: 8px;
 }
 
-.c37 svg path {
+.c36 svg path {
   fill: #4a4a6a;
   width: 0.75rem;
   height: 0.75rem;
@@ -852,33 +847,35 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
         <div
           class="c7"
         >
-          <div>
+          <div
+            class=""
+          >
             <div
-              class="c8 c9"
+              class="c8"
             >
               <div
-                class="c7 c10"
+                class="c7 c9"
               >
                 <button
                   aria-disabled="false"
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   aria-labelledby="selectTitle selectTitle-label selectTitle-content"
-                  class="c11"
+                  class="c10"
                   id="selectTitle"
                   type="button"
                 />
                 <div
-                  class="c6 c12"
+                  class="c6 c11"
                 >
                   <div
                     class="c7"
                   >
                     <div
-                      class="c13"
+                      class="c12"
                     >
                       <span
-                        class="c2 c14"
+                        class="c2 c13"
                         id="selectTitle-content"
                       >
                         Add a title
@@ -890,7 +887,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
                   >
                     <button
                       aria-hidden="true"
-                      class="c15 c16 c17"
+                      class="c14 c15 c16"
                       tabindex="-1"
                       title="Carret Down Button"
                       type="button"
@@ -916,20 +913,20 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
             </div>
           </div>
           <div
-            class="c7 c18 c19"
+            class="c7 c17 c18"
           >
             <span>
               <button
                 aria-disabled="false"
                 aria-labelledby="0"
-                class="c20 c21 c22 c23 c24 c25"
+                class="c19 c20 c21 c22 c23 c24"
                 id="Bold"
                 name="Bold"
                 tabindex="0"
                 type="button"
               >
                 <span
-                  class="c26"
+                  class="c25"
                 >
                   Bold
                 </span>
@@ -955,14 +952,14 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
               <button
                 aria-disabled="false"
                 aria-labelledby="1"
-                class="c20 c21 c22 c23 c24 c25"
+                class="c19 c20 c21 c22 c23 c24"
                 id="Italic"
                 name="Italic"
                 tabindex="0"
                 type="button"
               >
                 <span
-                  class="c26"
+                  class="c25"
                 >
                   Italic
                 </span>
@@ -986,14 +983,14 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
               <button
                 aria-disabled="false"
                 aria-labelledby="2"
-                class="c20 c21 c22 c23 c24 c25"
+                class="c19 c20 c21 c22 c23 c24"
                 id="Underline"
                 name="Underline"
                 tabindex="0"
                 type="button"
               >
                 <span
-                  class="c26"
+                  class="c25"
                 >
                   Underline
                 </span>
@@ -1018,13 +1015,13 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
             <button
               aria-disabled="false"
               aria-labelledby="3"
-              class="c20 c21 c22 c23 c24 c27"
+              class="c19 c20 c21 c22 c23 c26"
               id="more"
               tabindex="0"
               type="button"
             >
               <span
-                class="c26"
+                class="c25"
               >
                 More
               </span>
@@ -1047,12 +1044,12 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
         </div>
         <button
           aria-disabled="false"
-          class="c28 c29 c22 c30"
+          class="c27 c28 c21 c29"
           id="preview"
           type="button"
         >
           <span
-            class="c2 c31"
+            class="c2 c30"
           >
             Preview mode
           </span>
@@ -1060,10 +1057,10 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
       </div>
     </div>
     <div
-      class="c32"
+      class="c31"
     >
       <div
-        class="c33"
+        class="c32"
       >
         <textarea
           style="display: none;"
@@ -1162,18 +1159,18 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
       </div>
     </div>
     <div
-      class="c34"
+      class="c33"
     >
       <div
-        class="c35"
+        class="c34"
       >
         <button
-          class="c36 c7 c22 c37"
+          class="c35 c7 c21 c36"
           id="expand"
           type="button"
         >
           <span
-            class="c2 c38"
+            class="c2 c37"
           >
             Expand
           </span>
diff --git a/packages/core/admin/admin/src/content-manager/pages/App/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/App/tests/index.test.js
index 86c44fceed..e56d69f87c 100644
--- a/packages/core/admin/admin/src/content-manager/pages/App/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/App/tests/index.test.js
@@ -114,11 +114,11 @@ describe('Content manager | App | main', () => {
     expect(screen.getByText('Categories')).toBeVisible();
     expect(history.location.pathname).toEqual('/content-manager/collectionType/category');
     expect(container.firstChild).toMatchInlineSnapshot(`
-      .c34 {
+      .c33 {
         padding-bottom: 56px;
       }
 
-      .c36 {
+      .c35 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -136,7 +136,7 @@ describe('Content manager | App | main', () => {
         justify-content: space-around;
       }
 
-      .c38 {
+      .c37 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -148,7 +148,7 @@ describe('Content manager | App | main', () => {
         width: 1px;
       }
 
-      .c39 {
+      .c38 {
         -webkit-animation: gzYjWD 1s infinite linear;
         animation: gzYjWD 1s infinite linear;
         will-change: transform;
@@ -159,11 +159,11 @@ describe('Content manager | App | main', () => {
         grid-template-columns: auto 1fr;
       }
 
-      .c35 {
+      .c34 {
         overflow-x: hidden;
       }
 
-      .c37 {
+      .c36 {
         height: 100vh;
       }
 
@@ -197,23 +197,23 @@ describe('Content manager | App | main', () => {
         padding-bottom: 16px;
       }
 
-      .c19 {
+      .c18 {
         padding-top: 8px;
         padding-right: 16px;
         padding-bottom: 8px;
         padding-left: 24px;
       }
 
-      .c21 {
+      .c20 {
         padding-right: 24px;
         position: relative;
       }
 
-      .c24 {
+      .c23 {
         padding-right: 4px;
       }
 
-      .c26 {
+      .c25 {
         background: #eaeaef;
         padding-right: 8px;
         padding-left: 8px;
@@ -226,14 +226,14 @@ describe('Content manager | App | main', () => {
         transform: translateY(-50%);
       }
 
-      .c29 {
+      .c28 {
         background: #f6f6f9;
         padding-top: 8px;
         padding-bottom: 8px;
         padding-left: 32px;
       }
 
-      .c32 {
+      .c31 {
         padding-left: 8px;
       }
 
@@ -244,7 +244,7 @@ describe('Content manager | App | main', () => {
         color: #32324d;
       }
 
-      .c25 {
+      .c24 {
         font-weight: 600;
         font-size: 0.6875rem;
         line-height: 1.45;
@@ -252,7 +252,7 @@ describe('Content manager | App | main', () => {
         color: #666687;
       }
 
-      .c33 {
+      .c32 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #32324d;
@@ -306,9 +306,25 @@ describe('Content manager | App | main', () => {
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
+        gap: 8px;
       }
 
-      .c22 {
+      .c17 {
+        -webkit-align-items: stretch;
+        -webkit-box-align: stretch;
+        -ms-flex-align: stretch;
+        align-items: stretch;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .c21 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -322,7 +338,7 @@ describe('Content manager | App | main', () => {
         flex-direction: row;
       }
 
-      .c27 {
+      .c26 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -401,7 +417,7 @@ describe('Content manager | App | main', () => {
         width: 1px;
       }
 
-      .c28 {
+      .c27 {
         border-radius: 4px;
         height: 1.5rem;
       }
@@ -415,24 +431,6 @@ describe('Content manager | App | main', () => {
         margin: 0;
       }
 
-      .c17 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c17 > * + * {
-        margin-top: 8px;
-      }
-
-      .c18 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c18 > * + * {
-        margin-top: 4px;
-      }
-
       .c1 {
         width: 14.5rem;
         background: #f6f6f9;
@@ -469,7 +467,7 @@ describe('Content manager | App | main', () => {
         background-color: #dcdce4;
       }
 
-      .c30 {
+      .c29 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -487,48 +485,48 @@ describe('Content manager | App | main', () => {
         color: #32324d;
       }
 
-      .c30 svg > * {
+      .c29 svg > * {
         fill: #666687;
       }
 
-      .c30.active {
+      .c29.active {
         background-color: #f0f0ff;
         border-right: 2px solid #4945ff;
       }
 
-      .c30.active svg > * {
+      .c29.active svg > * {
         fill: #271fe0;
       }
 
-      .c30.active .c4 {
+      .c29.active .c4 {
         color: #271fe0;
         font-weight: 500;
       }
 
-      .c30:focus-visible {
+      .c29:focus-visible {
         outline-offset: -2px;
       }
 
-      .c31 {
+      .c30 {
         width: 0.75rem;
         height: 0.25rem;
       }
 
-      .c31 * {
+      .c30 * {
         fill: #666687;
       }
 
-      .c23 {
+      .c22 {
         border: none;
         padding: 0;
         background: transparent;
       }
 
-      .c20 svg {
+      .c19 svg {
         height: 0.25rem;
       }
 
-      .c20 svg path {
+      .c19 svg path {
         fill: #8e8ea9;
       }
 
@@ -594,37 +592,37 @@ describe('Content manager | App | main', () => {
             class="c15"
           >
             <ol
-              class="c16 c17"
+              class="c16"
             >
               <li>
                 <div
-                  class="c16 c18"
+                  class="c17"
                 >
                   <div
-                    class="c19 c20"
+                    class="c18 c19"
                   >
                     <div
-                      class="c21"
+                      class="c20"
                     >
                       <div
-                        class="c22 c23"
+                        class="c21 c22"
                       >
                         <div
-                          class="c24"
+                          class="c23"
                         >
                           <span
-                            class="c4 c25"
+                            class="c4 c24"
                           >
                             Collection Types
                           </span>
                         </div>
                       </div>
                       <div
-                        class="c26 c27 c28"
+                        class="c25 c26 c27"
                         transform="translateY(-50%)"
                       >
                         <span
-                          class="c4 c25"
+                          class="c4 c24"
                         >
                           1
                         </span>
@@ -637,14 +635,14 @@ describe('Content manager | App | main', () => {
                     <li>
                       <a
                         aria-current="page"
-                        class="c29 c30 active"
+                        class="c28 c29 active"
                         href="/content-manager/collectionType/category"
                       >
                         <div
-                          class="c22"
+                          class="c21"
                         >
                           <svg
-                            class="c31"
+                            class="c30"
                             fill="none"
                             height="1rem"
                             viewBox="0 0 4 4"
@@ -659,10 +657,10 @@ describe('Content manager | App | main', () => {
                             />
                           </svg>
                           <div
-                            class="c32"
+                            class="c31"
                           >
                             <span
-                              class="c4 c33"
+                              class="c4 c32"
                             >
                               Categories
                             </span>
@@ -675,33 +673,33 @@ describe('Content manager | App | main', () => {
               </li>
               <li>
                 <div
-                  class="c16 c18"
+                  class="c17"
                 >
                   <div
-                    class="c19 c20"
+                    class="c18 c19"
                   >
                     <div
-                      class="c21"
+                      class="c20"
                     >
                       <div
-                        class="c22 c23"
+                        class="c21 c22"
                       >
                         <div
-                          class="c24"
+                          class="c23"
                         >
                           <span
-                            class="c4 c25"
+                            class="c4 c24"
                           >
                             Single Types
                           </span>
                         </div>
                       </div>
                       <div
-                        class="c26 c27 c28"
+                        class="c25 c26 c27"
                         transform="translateY(-50%)"
                       >
                         <span
-                          class="c4 c25"
+                          class="c4 c24"
                         >
                           1
                         </span>
@@ -713,14 +711,14 @@ describe('Content manager | App | main', () => {
                   >
                     <li>
                       <a
-                        class="c29 c30"
+                        class="c28 c29"
                         href="/homepage"
                       >
                         <div
-                          class="c22"
+                          class="c21"
                         >
                           <svg
-                            class="c31"
+                            class="c30"
                             fill="none"
                             height="1rem"
                             viewBox="0 0 4 4"
@@ -735,10 +733,10 @@ describe('Content manager | App | main', () => {
                             />
                           </svg>
                           <div
-                            class="c32"
+                            class="c31"
                           >
                             <span
-                              class="c4 c33"
+                              class="c4 c32"
                             >
                               Home page
                             </span>
@@ -753,10 +751,10 @@ describe('Content manager | App | main', () => {
           </div>
         </nav>
         <div
-          class="c34 c35"
+          class="c33 c34"
         >
           <div
-            class="c36 c37"
+            class="c35 c36"
             data-testid="loader"
           >
             <div
@@ -764,13 +762,13 @@ describe('Content manager | App | main', () => {
               role="alert"
             >
               <div
-                class="c38"
+                class="c37"
               >
                 Loading content.
               </div>
               <img
                 aria-hidden="true"
-                class="c39"
+                class="c38"
                 src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2MyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQyLjU1NjMgMTEuOTgxNkMzOS40ODQgMTAuMzA3MSAzNS44NTc1IDkuMjkwOTcgMzIuMzM1NCA5LjEzNTIxQzI4LjY0NDMgOC45Mjg4OCAyNC44Mjk1IDkuNzIzMTggMjEuMzMzNiAxMS40MTI5QzIwLjkxMjMgMTEuNTkwMSAyMC41Mzc2IDExLjgxMDEgMjAuMTcyMiAxMi4wMjQ5TDIwLjAxMDggMTIuMTE3OUMxOS44Nzc0IDEyLjE5NTEgMTkuNzQ0MSAxMi4yNzI0IDE5LjYwOCAxMi4zNTM2QzE5LjMyNTMgMTIuNTE0NiAxOS4wNDkyIDEyLjY3NDQgMTguNzU0NCAxMi44NzkyQzE4LjU0NjMgMTMuMDMyOSAxOC4zMzk1IDEzLjE3NTkgMTguMTMwMSAxMy4zMjNDMTcuNTY1OCAxMy43MjA4IDE2Ljk4NjggMTQuMTMxNyAxNi40OTgzIDE0LjU5NzlDMTQuODQ3NiAxNS45NTI0IDEzLjU1NzEgMTcuNjA3NSAxMi42MDcxIDE4LjkyMTRDMTAuNDM2NSAyMi4xNTY2IDkuMDg2MjIgMjUuOTU2NyA4LjgwNzAyIDI5LjYxNDNMOC43NzY0IDMwLjE1ODhDOC43MzMyOCAzMC45MTk2IDguNjg0NzYgMzEuNzA1NyA4Ljc1MzUzIDMyLjQ1NTVDOC43NjY0OCAzMi42MDg0IDguNzY2MSAzMi43NjM4IDguNzc1MDYgMzIuOTE0QzguNzg4OTUgMzMuMjI5IDguODAxNTIgMzMuNTM3MyA4Ljg0NiAzMy44NjcyTDkuMDczOTYgMzUuNDIyMUM5LjA5NzU2IDM1LjU3NjQgOS4xMTk4IDM1Ljc0MTMgOS4xNjMzIDM1LjkyNjNMOS42NTkxOSAzNy45MjcyTDEwLjEzOCAzOS4yODIzQzEwLjI3MjkgMzkuNjY3MyAxMC40MTU4IDQwLjA3NTEgMTAuNiA0MC40M0MxMi4wMjkyIDQzLjYzNyAxNC4xNDI1IDQ2LjQ1NzggMTYuNzA2MyA0OC41ODVDMTkuMDUwOCA1MC41Mjk2IDIxLjgyNCA1Mi4wMDIzIDI0Ljc0OTEgNTIuODQ1MkwyNi4yMzcxIDUzLjIzNzZDMjYuMzc4MSA1My4yNjkzIDI2LjQ5MjYgNTMuMjg4OSAyNi42MDMxIDUzLjMwNThMMjYuNzc3NSA1My4zMzExQzI3LjAwNTIgNTMuMzYzNiAyNy4yMTk1IDUzLjM5ODYgMjcuNDQ0NSA1My40MzVDMjcuODU5OCA1My41MDc2IDI4LjI2NzIgNTMuNTc0OCAyOC43MDc5IDUzLjYxODNMMzAuNTY0MSA1My43MjI5QzMwLjk1MTYgNTMuNzI0OSAzMS4zMzUyIDUzLjcwNjggMzEuNzA4MSA1My42ODc0QzMxLjkwMzkgNTMuNjgxIDMyLjA5ODQgNTMuNjY4MSAzMi4zMjg4IDUzLjY2MkMzNC41MjUzIDUzLjQ3NzIgMzYuNTEwNiA1My4wNjM0IDM4LjA1MTYgNTIuNDY1MkMzOC4xNzY5IDUyLjQxNzEgMzguMzAwOCA1Mi4zNzk2IDM4LjQyMzQgNTIuMzM1NUMzOC42NzI3IDUyLjI0OTkgMzguOTI1OSA1Mi4xNjcgMzkuMTQzMiA1Mi4wNTk5TDQwLjg1OTEgNTEuMjYyNkw0Mi41NzAyIDUwLjI2NkM0Mi45MDA5IDUwLjA2ODIgNDMuMDIwNSA0OS42NDE0IDQyLjgyODIgNDkuMjk4NEM0Mi42MzIgNDguOTUyNiA0Mi4yMDM0IDQ4LjgzMDggNDEuODYzNCA0OS4wMTY2TDQwLjE3OTIgNDkuOTIxOEwzOC40OTk1IDUwLjYyMjRDMzguMzE2OSA1MC42OTUzIDM4LjEyMSA1MC43NTM0IDM3LjkyMjQgNTAuODE1NUMzNy43ODM4IDUwLjg0ODkgMzcuNjUxOCA1MC44OTgzIDM3LjUwMTIgNTAuOTQwOEMzNi4wNzExIDUxLjQzNSAzNC4yNDQ1IDUxLjc0MjUgMzIuMjQ0IDUxLjgzNDZDMzIuMDQ0MiA1MS44MzgzIDMxLjg0NzEgNTEuODM3OSAzMS42NTQgNTEuODQwM0MzMS4zMDUxIDUxLjg0MTQgMzAuOTYwMiA1MS44NDUxIDMwLjYzOTIgNTEuODMwNUwyOC45MTc3IDUxLjY3MjVDMjguNTQ3NiA1MS42MTkgMjguMTY5NSA1MS41NDI3IDI3Ljc4NDggNTEuNDY3OEMyNy41NjM5IDUxLjQxNjcgMjcuMzM3NiA1MS4zNzM3IDI3LjEyOTkgNTEuMzM3NEwyNi45NTI5IDUxLjI5ODdDMjYuODcwNCA1MS4yODM0IDI2Ljc3NzIgNTEuMjY2NyAyNi43MzMzIDUxLjI1NDNMMjUuMzQ2NiA1MC44MzIyQzIyLjc2NTEgNDkuOTc4OSAyMC4zMyA0OC41NzI5IDE4LjI5NDIgNDYuNzU1N0MxNi4xMDU2IDQ0Ljc5NTEgMTQuMzMzOSA0Mi4yMzM1IDEzLjE3NDIgMzkuMzU4MkMxMi4wMjc2IDM2LjYwMTMgMTEuNTk4OCAzMy4yNzkyIDExLjk3MTYgMzAuMDA3NkMxMi4zMTQ1IDI3LjAyMTMgMTMuMzk0OCAyNC4xNjM1IDE1LjE4NTggMjEuNTA4M0MxNS4zMDM0IDIxLjMzMzkgMTUuNDIxIDIxLjE1OTYgMTUuNTIxMiAyMS4wMTk2QzE2LjQzMDkgMTkuODY4OCAxNy41NDA4IDE4LjU1ODkgMTguOTQ4MyAxNy40OTZDMTkuMzM2NyAxNy4xNTI1IDE5Ljc4NjIgMTYuODU2IDIwLjI2MTEgMTYuNTQ3OEMyMC40ODc4IDE2LjQwMDkgMjAuNzA3OSAxNi4yNTUzIDIwLjg5MDcgMTYuMTMwNkMyMS4wOTc0IDE2LjAwNDggMjEuMzE4OCAxNS44ODMxIDIxLjUzNDggMTUuNzY5NEMyMS42NzYxIDE1LjY5NzUgMjEuODE2MiAxNS42MTkgMjEuOTM4OCAxNS41NTc2TDIyLjEwMDIgMTUuNDY0NkMyMi40MDAyIDE1LjMwMzcgMjIuNjc0OSAxNS4xNTQ2IDIyLjk5MDggMTUuMDM5TDI0LjExODYgMTQuNTcxNUMyNC4zMzk5IDE0LjQ4NDQgMjQuNTcxOCAxNC40MTU5IDI0Ljc5OTcgMTQuMzQ0N0MyNC45NTMgMTQuMjk4MiAyNS4wOTgyIDE0LjI2MzUgMjUuMjYzNSAxNC4yMDc4QzI1Ljc4NiAxNC4wMTgyIDI2LjMyODMgMTMuOTExMiAyNi45MTA1IDEzLjc5NjVDMjcuMTE3IDEzLjc1NzEgMjcuMzMwMiAxMy43MTYzIDI3LjU2MDggMTMuNjU4NUMyNy43NTUzIDEzLjYxMSAyNy45NzM3IDEzLjU5NjkgMjguMjA4MiAxMy41NzYyQzI4LjM2NCAxMy41NjAzIDI4LjUxNzIgMTMuNTQ4MyAyOC42MzE4IDEzLjUzMzNDMjguNzg3NiAxMy41MTczIDI4LjkzNDIgMTMuNTA2NiAyOS4wOTI3IDEzLjQ4NjdDMjkuMzI4NSAxMy40NTU1IDI5LjU0NTYgMTMuNDM0NyAyOS43NDk0IDEzLjQzMzdDMzAuMDIzNyAxMy40NCAzMC4yOTk0IDEzLjQzNTcgMzAuNTc3NyAxMy40Mjc0QzMxLjA4MTEgMTMuNDIxIDMxLjU1NzkgMTMuNDE5NyAzMi4wMzE4IDEzLjQ5MTRDMzQuOTY2NCAxMy43MzUyIDM3LjcxNDQgMTQuNjA4NSA0MC4yMDUyIDE2LjA4NjhDNDIuMzQ4OSAxNy4zNjU1IDQ0LjI3MTYgMTkuMTUyNSA0NS43NjA3IDIxLjI2NEM0Ny4wMjU1IDIzLjA2MjggNDcuOTc1NiAyNS4wNTI4IDQ4LjQ5MjggMjcuMDM5M0M0OC41NzIgMjcuMzE3NiA0OC42Mjk5IDI3LjU5MzEgNDguNjgzOSAyNy44NjU5QzQ4LjcxNTQgMjguMDQyOCA0OC43NTYzIDI4LjIxNDUgNDguNzg5MiAyOC4zNjM2QzQ4LjgwMzcgMjguNDU0MSA0OC44MjA4IDI4LjU0MDYgNDguODQ0NSAyOC42MjU4QzQ4Ljg3NDkgMjguNzQ0MyA0OC44OTg2IDI4Ljg2NCA0OC45MTE2IDI4Ljk2NTFMNDguOTc5MyAyOS42MDQ3QzQ4Ljk5MjIgMjkuNzc0OCA0OS4wMTMyIDI5LjkzMzEgNDkuMDMwMSAzMC4wODg3QzQ5LjA2NjggMzAuMzI2OCA0OS4wODg5IDMwLjU2MDggNDkuMDk2NCAzMC43NTYxTDQ5LjEwODMgMzEuOTAwMUM0OS4xMzEyIDMyLjMzMDcgNDkuMDg5IDMyLjcxMTYgNDkuMDUyMiAzMy4wNjczQzQ5LjAzODQgMzMuMjU5OCA0OS4wMTI2IDMzLjQ0NDMgNDkuMDEyMyAzMy41ODI0QzQ4Ljk5NjEgMzMuNjkyNiA0OC45OTE4IDMzLjc5MzUgNDguOTgzNiAzMy44OTE3QzQ4Ljk3NTMgMzQuMDA3MiA0OC45NzI0IDM0LjExNDggNDguOTQxNCAzNC4yNTU0TDQ4LjU0NDkgMzYuMzA1OUM0OC4zMTM0IDM3Ljg2MjMgNDkuMzc5MyAzOS4zMzY1IDUwLjk0ODggMzkuNTgyMkM1Mi4wNDE3IDM5Ljc2MDEgNTMuMTUzNiAzOS4yODE5IDUzLjc3MTEgMzguMzY2NEM1NC4wMDYzIDM4LjAxNzYgNTQuMTYwNCAzNy42MjU3IDU0LjIyMjcgMzcuMjA2NEw1NC41MjE3IDM1LjI1NzRDNTQuNTUxNCAzNS4wNzU2IDU0LjU3MiAzNC44MyA1NC41ODQ2IDM0LjU3OTFMNTQuNjAyOCAzNC4yMzM4QzU0LjYwOTggMzQuMDU5OCA1NC42MjIzIDMzLjg3NzkgNTQuNjM0NyAzMy42Nzg4QzU0LjY3MzQgMzMuMTA1MiA1NC43MTYzIDMyLjQ0NzkgNTQuNjYxOSAzMS44MDU4TDU0LjU4NjcgMzAuNDI4OUM1NC41NjIyIDMwLjA5NTIgNTQuNTA5NyAyOS43NiA1NC40NTU5IDI5LjQxODFDNTQuNDMxIDI5LjI1NzIgNTQuNDA0OCAyOS4wODk2IDU0LjM4MjYgMjguOTA3NEw1NC4yNjg3IDI4LjEwNEM1NC4yMzMyIDI3LjkyNDQgNTQuMTgwNCAyNy43MjczIDU0LjEzMjkgMjcuNTM5Nkw1NC4wNjQzIDI3LjI0NTRDNTQuMDE5NSAyNy4wNzEgNTMuOTc3MyAyNi44OTI3IDUzLjkzMzggMjYuNzA3NkM1My44NDU1IDI2LjMzMDkgNTMuNzQ3OSAyNS45NDIyIDUzLjYxMyAyNS41NTcxQzUyLjg0IDIzLjAyOTIgNTEuNTM4MyAyMC41MTk0IDQ5LjgzMzggMTguMjc5OUM0Ny44NTQ0IDE1LjY4MiA0NS4zMzMzIDEzLjUwODcgNDIuNTU2MyAxMS45ODE2WiIgZmlsbD0iIzQ5NDVGRiIvPgo8L3N2Zz4K"
               />
             </div>
diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap
index 26fe09c17d..a4f7b43f49 100644
--- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap
@@ -13,7 +13,11 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   padding-bottom: 8px;
 }
 
-.c12 {
+.c9 {
+  min-width: 0;
+}
+
+.c13 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -24,12 +28,12 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   cursor: pointer;
 }
 
-.c18 {
+.c19 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c19 {
+.c20 {
   background: #ffffff;
   padding-top: 24px;
   padding-right: 32px;
@@ -124,7 +128,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c9 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -138,7 +142,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c13 {
+.c14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -153,7 +157,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   gap: 8px;
 }
 
-.c20 {
+.c21 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -168,7 +172,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   gap: 16px;
 }
 
-.c24 {
+.c25 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -180,6 +184,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
 .c47 {
@@ -248,27 +253,27 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   justify-content: center;
 }
 
-.c11 {
+.c12 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c16 {
+.c17 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c17 {
+.c18 {
   font-size: 1rem;
   line-height: 1.5;
   color: #666687;
 }
 
-.c21 {
+.c22 {
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
@@ -316,35 +321,26 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c25 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c25 > * + * {
-  margin-top: 4px;
-}
-
-.c14 {
+.c15 {
   position: relative;
   outline: none;
 }
 
-.c14 svg {
+.c15 svg {
   height: 12px;
   width: 12px;
 }
 
-.c14 svg > g,
-.c14 svg path {
+.c15 svg > g,
+.c15 svg path {
   fill: #ffffff;
 }
 
-.c14[aria-disabled='true'] {
+.c15[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c14:after {
+.c15:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -359,11 +355,11 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c14:focus-visible {
+.c15:focus-visible {
   outline: none;
 }
 
-.c14:focus-visible:after {
+.c15:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -386,48 +382,48 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c15 {
+.c16 {
   height: 2rem;
 }
 
-.c15[aria-disabled='true'] {
+.c16[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c15[aria-disabled='true'] .c10 {
+.c16[aria-disabled='true'] .c11 {
   color: #666687;
 }
 
-.c15[aria-disabled='true'] svg > g,.c15[aria-disabled='true'] svg path {
+.c16[aria-disabled='true'] svg > g,.c16[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c15[aria-disabled='true']:active {
+.c16[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c15[aria-disabled='true']:active .c10 {
+.c16[aria-disabled='true']:active .c11 {
   color: #666687;
 }
 
-.c15[aria-disabled='true']:active svg > g,.c15[aria-disabled='true']:active svg path {
+.c16[aria-disabled='true']:active svg > g,.c16[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c15:hover {
+.c16:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c15:active {
+.c16:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c15 svg > g,
-.c15 svg path {
+.c16 svg > g,
+.c16 svg path {
   fill: #ffffff;
 }
 
@@ -442,7 +438,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   background: #eaeaef;
 }
 
-.c66[aria-disabled='true'] .c10 {
+.c66[aria-disabled='true'] .c11 {
   color: #666687;
 }
 
@@ -455,7 +451,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   background: #eaeaef;
 }
 
-.c66[aria-disabled='true']:active .c10 {
+.c66[aria-disabled='true']:active .c11 {
   color: #666687;
 }
 
@@ -472,7 +468,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c66:active .c10 {
+.c66:active .c11 {
   color: #4945ff;
 }
 
@@ -481,7 +477,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   fill: #4945ff;
 }
 
-.c66 .c10 {
+.c66 .c11 {
   color: #271fe0;
 }
 
@@ -572,12 +568,12 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   margin: 0;
 }
 
-.c22 {
+.c23 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
 }
 
-.c23 {
+.c24 {
   grid-column: span 6;
   max-width: 100%;
 }
@@ -877,13 +873,13 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
 }
 
 @media (max-width:68.75rem) {
-  .c23 {
+  .c24 {
     grid-column: span 12;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c23 {
+  .c24 {
     grid-column: span;
   }
 }
@@ -951,17 +947,17 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
             class="c8"
           >
             <div
-              class="c9"
+              class="c9 c10"
             >
               <h1
-                class="c10 c11"
+                class="c11 c12"
               >
                 Configure the view - Address
               </h1>
             </div>
             <button
               aria-disabled="true"
-              class="c12 c13 c14 c15"
+              class="c13 c14 c15 c16"
               disabled=""
               type="submit"
             >
@@ -983,58 +979,60 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                 </svg>
               </div>
               <span
-                class="c10 c16"
+                class="c11 c17"
               >
                 Save
               </span>
             </button>
           </div>
           <p
-            class="c10 c17"
+            class="c11 c18"
           >
             Customize how the edit view will look like.
           </p>
         </div>
       </div>
       <div
-        class="c18"
+        class="c19"
       >
         <div
-          class="c19"
+          class="c20"
         >
           <div
-            class="c20"
+            class="c21"
           >
             <h2
-              class="c10 c21"
+              class="c11 c22"
             >
               Settings
             </h2>
             <div
-              class="c22"
+              class="c23"
             >
               <div
-                class="c23"
+                class="c24"
               >
                 <div
                   class=""
                 >
-                  <div>
+                  <div
+                    class=""
+                  >
                     <div
-                      class="c24 c25"
+                      class="c25"
                     >
                       <label
-                        class="c10 c26"
+                        class="c11 c26"
                         for="1"
                       >
                         <div
-                          class="c9"
+                          class="c10"
                         >
                           Entry title
                         </div>
                       </label>
                       <div
-                        class="c9 c27"
+                        class="c10 c27"
                       >
                         <button
                           aria-describedby="1-hint"
@@ -1050,13 +1048,13 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                           class="c8 c29"
                         >
                           <div
-                            class="c9"
+                            class="c10"
                           >
                             <div
                               class="c30"
                             >
                               <span
-                                class="c10 c31"
+                                class="c11 c31"
                                 id="1-content"
                               >
                                 postal_code
@@ -1064,7 +1062,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                             </div>
                           </div>
                           <div
-                            class="c9"
+                            class="c10"
                           >
                             <button
                               aria-hidden="true"
@@ -1092,7 +1090,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                         </div>
                       </div>
                       <p
-                        class="c10 c35"
+                        class="c11 c35"
                         id="1-hint"
                       >
                         Set the display field of your entry
@@ -1110,12 +1108,12 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
               />
             </div>
             <h3
-              class="c10 c21"
+              class="c11 c22"
             >
               View
             </h3>
             <div
-              class="c20"
+              class="c21"
             >
               <div
                 class="c8"
@@ -1125,7 +1123,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <span
-                      class="c10 c39"
+                      class="c11 c39"
                     >
                       Displayed fields
                     </span>
@@ -1134,7 +1132,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <span
-                      class="c10 c35"
+                      class="c11 c35"
                     >
                       Drag & drop the fields to build the layout
                     </span>
@@ -1180,7 +1178,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                   class="c47"
                 >
                   <div
-                    class="c22"
+                    class="c23"
                   >
                     <div
                       class="c48"
@@ -1189,13 +1187,13 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                         class=""
                       >
                         <div
-                          class="c9 c49"
+                          class="c10 c49"
                         >
                           <div
                             class="c50 c51 c52"
                           >
                             <span
-                              class="c53 c9 c54"
+                              class="c53 c10 c54"
                               draggable="true"
                               tabindex="-1"
                               type="button"
@@ -1246,18 +1244,18 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                                 class="c32 c8"
                               >
                                 <span
-                                  class="c10 c57"
+                                  class="c11 c57"
                                 >
                                   postal_code
                                 </span>
                                 <div
-                                  class="c9"
+                                  class="c10"
                                 >
                                   <span>
                                     <button
                                       aria-disabled="false"
                                       aria-labelledby="2"
-                                      class="c58 c59 c14 c60 c61"
+                                      class="c58 c59 c15 c60 c61"
                                       tabindex="0"
                                       type="button"
                                     >
@@ -1288,7 +1286,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                                     <button
                                       aria-disabled="false"
                                       aria-labelledby="3"
-                                      class="c58 c59 c14 c60 c61"
+                                      class="c58 c59 c15 c60 c61"
                                       data-testid="delete-field"
                                       tabindex="0"
                                       type="button"
@@ -1328,13 +1326,13 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                         class=""
                       >
                         <div
-                          class="c9 c63"
+                          class="c10 c63"
                         >
                           <div
                             class="c50 c51 c52"
                           >
                             <span
-                              class="c53 c9 c54"
+                              class="c53 c10 c54"
                               draggable="true"
                               tabindex="-1"
                               type="button"
@@ -1385,18 +1383,18 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                                 class="c32 c8"
                               >
                                 <span
-                                  class="c10 c57"
+                                  class="c11 c57"
                                 >
                                   city
                                 </span>
                                 <div
-                                  class="c9"
+                                  class="c10"
                                 >
                                   <span>
                                     <button
                                       aria-disabled="false"
                                       aria-labelledby="4"
-                                      class="c58 c59 c14 c60 c61"
+                                      class="c58 c59 c15 c60 c61"
                                       tabindex="0"
                                       type="button"
                                     >
@@ -1427,7 +1425,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                                     <button
                                       aria-disabled="false"
                                       aria-labelledby="5"
-                                      class="c58 c59 c14 c60 c61"
+                                      class="c58 c59 c15 c60 c61"
                                       data-testid="delete-field"
                                       tabindex="0"
                                       type="button"
@@ -1467,7 +1465,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                       aria-disabled="true"
                       aria-expanded="false"
                       aria-haspopup="true"
-                      class="c64 c65 c14 c66"
+                      class="c64 c65 c15 c66"
                       data-testid="add-field"
                       disabled=""
                       label="Insert another field"
@@ -1491,7 +1489,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                         </svg>
                       </div>
                       <span
-                        class="c10 c16"
+                        class="c11 c17"
                       >
                         Insert another field
                       </span>
@@ -1543,7 +1541,11 @@ exports[`EditSettingsView should add field 1`] = `
   padding-bottom: 8px;
 }
 
-.c12 {
+.c9 {
+  min-width: 0;
+}
+
+.c13 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -1554,12 +1556,12 @@ exports[`EditSettingsView should add field 1`] = `
   cursor: pointer;
 }
 
-.c18 {
+.c19 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c19 {
+.c20 {
   background: #ffffff;
   padding-top: 24px;
   padding-right: 32px;
@@ -1654,7 +1656,7 @@ exports[`EditSettingsView should add field 1`] = `
   justify-content: space-between;
 }
 
-.c9 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1668,7 +1670,7 @@ exports[`EditSettingsView should add field 1`] = `
   flex-direction: row;
 }
 
-.c13 {
+.c14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1683,7 +1685,7 @@ exports[`EditSettingsView should add field 1`] = `
   gap: 8px;
 }
 
-.c20 {
+.c21 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -1698,7 +1700,7 @@ exports[`EditSettingsView should add field 1`] = `
   gap: 16px;
 }
 
-.c24 {
+.c25 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -1710,6 +1712,7 @@ exports[`EditSettingsView should add field 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
 .c47 {
@@ -1778,27 +1781,27 @@ exports[`EditSettingsView should add field 1`] = `
   justify-content: center;
 }
 
-.c11 {
+.c12 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c16 {
+.c17 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c17 {
+.c18 {
   font-size: 1rem;
   line-height: 1.5;
   color: #666687;
 }
 
-.c21 {
+.c22 {
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
@@ -1846,35 +1849,26 @@ exports[`EditSettingsView should add field 1`] = `
   color: #32324d;
 }
 
-.c25 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c25 > * + * {
-  margin-top: 4px;
-}
-
-.c14 {
+.c15 {
   position: relative;
   outline: none;
 }
 
-.c14 svg {
+.c15 svg {
   height: 12px;
   width: 12px;
 }
 
-.c14 svg > g,
-.c14 svg path {
+.c15 svg > g,
+.c15 svg path {
   fill: #ffffff;
 }
 
-.c14[aria-disabled='true'] {
+.c15[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c14:after {
+.c15:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -1889,11 +1883,11 @@ exports[`EditSettingsView should add field 1`] = `
   border: 2px solid transparent;
 }
 
-.c14:focus-visible {
+.c15:focus-visible {
   outline: none;
 }
 
-.c14:focus-visible:after {
+.c15:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -1916,48 +1910,48 @@ exports[`EditSettingsView should add field 1`] = `
   width: 1px;
 }
 
-.c15 {
+.c16 {
   height: 2rem;
 }
 
-.c15[aria-disabled='true'] {
+.c16[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c15[aria-disabled='true'] .c10 {
+.c16[aria-disabled='true'] .c11 {
   color: #666687;
 }
 
-.c15[aria-disabled='true'] svg > g,.c15[aria-disabled='true'] svg path {
+.c16[aria-disabled='true'] svg > g,.c16[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c15[aria-disabled='true']:active {
+.c16[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c15[aria-disabled='true']:active .c10 {
+.c16[aria-disabled='true']:active .c11 {
   color: #666687;
 }
 
-.c15[aria-disabled='true']:active svg > g,.c15[aria-disabled='true']:active svg path {
+.c16[aria-disabled='true']:active svg > g,.c16[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c15:hover {
+.c16:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c15:active {
+.c16:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c15 svg > g,
-.c15 svg path {
+.c16 svg > g,
+.c16 svg path {
   fill: #ffffff;
 }
 
@@ -1972,7 +1966,7 @@ exports[`EditSettingsView should add field 1`] = `
   background: #eaeaef;
 }
 
-.c66[aria-disabled='true'] .c10 {
+.c66[aria-disabled='true'] .c11 {
   color: #666687;
 }
 
@@ -1985,7 +1979,7 @@ exports[`EditSettingsView should add field 1`] = `
   background: #eaeaef;
 }
 
-.c66[aria-disabled='true']:active .c10 {
+.c66[aria-disabled='true']:active .c11 {
   color: #666687;
 }
 
@@ -2002,7 +1996,7 @@ exports[`EditSettingsView should add field 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c66:active .c10 {
+.c66:active .c11 {
   color: #4945ff;
 }
 
@@ -2011,7 +2005,7 @@ exports[`EditSettingsView should add field 1`] = `
   fill: #4945ff;
 }
 
-.c66 .c10 {
+.c66 .c11 {
   color: #271fe0;
 }
 
@@ -2102,12 +2096,12 @@ exports[`EditSettingsView should add field 1`] = `
   margin: 0;
 }
 
-.c22 {
+.c23 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
 }
 
-.c23 {
+.c24 {
   grid-column: span 6;
   max-width: 100%;
 }
@@ -2407,13 +2401,13 @@ exports[`EditSettingsView should add field 1`] = `
 }
 
 @media (max-width:68.75rem) {
-  .c23 {
+  .c24 {
     grid-column: span 12;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c23 {
+  .c24 {
     grid-column: span;
   }
 }
@@ -2481,17 +2475,17 @@ exports[`EditSettingsView should add field 1`] = `
             class="c8"
           >
             <div
-              class="c9"
+              class="c9 c10"
             >
               <h1
-                class="c10 c11"
+                class="c11 c12"
               >
                 Configure the view - Address
               </h1>
             </div>
             <button
               aria-disabled="true"
-              class="c12 c13 c14 c15"
+              class="c13 c14 c15 c16"
               disabled=""
               type="submit"
             >
@@ -2513,58 +2507,60 @@ exports[`EditSettingsView should add field 1`] = `
                 </svg>
               </div>
               <span
-                class="c10 c16"
+                class="c11 c17"
               >
                 Save
               </span>
             </button>
           </div>
           <p
-            class="c10 c17"
+            class="c11 c18"
           >
             Customize how the edit view will look like.
           </p>
         </div>
       </div>
       <div
-        class="c18"
+        class="c19"
       >
         <div
-          class="c19"
+          class="c20"
         >
           <div
-            class="c20"
+            class="c21"
           >
             <h2
-              class="c10 c21"
+              class="c11 c22"
             >
               Settings
             </h2>
             <div
-              class="c22"
+              class="c23"
             >
               <div
-                class="c23"
+                class="c24"
               >
                 <div
                   class=""
                 >
-                  <div>
+                  <div
+                    class=""
+                  >
                     <div
-                      class="c24 c25"
+                      class="c25"
                     >
                       <label
-                        class="c10 c26"
+                        class="c11 c26"
                         for="12"
                       >
                         <div
-                          class="c9"
+                          class="c10"
                         >
                           Entry title
                         </div>
                       </label>
                       <div
-                        class="c9 c27"
+                        class="c10 c27"
                       >
                         <button
                           aria-describedby="12-hint"
@@ -2580,13 +2576,13 @@ exports[`EditSettingsView should add field 1`] = `
                           class="c8 c29"
                         >
                           <div
-                            class="c9"
+                            class="c10"
                           >
                             <div
                               class="c30"
                             >
                               <span
-                                class="c10 c31"
+                                class="c11 c31"
                                 id="12-content"
                               >
                                 postal_code
@@ -2594,7 +2590,7 @@ exports[`EditSettingsView should add field 1`] = `
                             </div>
                           </div>
                           <div
-                            class="c9"
+                            class="c10"
                           >
                             <button
                               aria-hidden="true"
@@ -2622,7 +2618,7 @@ exports[`EditSettingsView should add field 1`] = `
                         </div>
                       </div>
                       <p
-                        class="c10 c35"
+                        class="c11 c35"
                         id="12-hint"
                       >
                         Set the display field of your entry
@@ -2640,12 +2636,12 @@ exports[`EditSettingsView should add field 1`] = `
               />
             </div>
             <h3
-              class="c10 c21"
+              class="c11 c22"
             >
               View
             </h3>
             <div
-              class="c20"
+              class="c21"
             >
               <div
                 class="c8"
@@ -2655,7 +2651,7 @@ exports[`EditSettingsView should add field 1`] = `
                     class=""
                   >
                     <span
-                      class="c10 c39"
+                      class="c11 c39"
                     >
                       Displayed fields
                     </span>
@@ -2664,7 +2660,7 @@ exports[`EditSettingsView should add field 1`] = `
                     class=""
                   >
                     <span
-                      class="c10 c35"
+                      class="c11 c35"
                     >
                       Drag & drop the fields to build the layout
                     </span>
@@ -2710,7 +2706,7 @@ exports[`EditSettingsView should add field 1`] = `
                   class="c47"
                 >
                   <div
-                    class="c22"
+                    class="c23"
                   >
                     <div
                       class="c48"
@@ -2719,13 +2715,13 @@ exports[`EditSettingsView should add field 1`] = `
                         class=""
                       >
                         <div
-                          class="c9 c49"
+                          class="c10 c49"
                         >
                           <div
                             class="c50 c51 c52"
                           >
                             <span
-                              class="c53 c9 c54"
+                              class="c53 c10 c54"
                               draggable="true"
                               tabindex="-1"
                               type="button"
@@ -2776,18 +2772,18 @@ exports[`EditSettingsView should add field 1`] = `
                                 class="c32 c8"
                               >
                                 <span
-                                  class="c10 c57"
+                                  class="c11 c57"
                                 >
                                   postal_code
                                 </span>
                                 <div
-                                  class="c9"
+                                  class="c10"
                                 >
                                   <span>
                                     <button
                                       aria-disabled="false"
                                       aria-labelledby="13"
-                                      class="c58 c59 c14 c60 c61"
+                                      class="c58 c59 c15 c60 c61"
                                       tabindex="0"
                                       type="button"
                                     >
@@ -2818,7 +2814,7 @@ exports[`EditSettingsView should add field 1`] = `
                                     <button
                                       aria-disabled="false"
                                       aria-labelledby="14"
-                                      class="c58 c59 c14 c60 c61"
+                                      class="c58 c59 c15 c60 c61"
                                       data-testid="delete-field"
                                       tabindex="0"
                                       type="button"
@@ -2858,13 +2854,13 @@ exports[`EditSettingsView should add field 1`] = `
                         class=""
                       >
                         <div
-                          class="c9 c63"
+                          class="c10 c63"
                         >
                           <div
                             class="c50 c51 c52"
                           >
                             <span
-                              class="c53 c9 c54"
+                              class="c53 c10 c54"
                               draggable="true"
                               tabindex="-1"
                               type="button"
@@ -2915,18 +2911,18 @@ exports[`EditSettingsView should add field 1`] = `
                                 class="c32 c8"
                               >
                                 <span
-                                  class="c10 c57"
+                                  class="c11 c57"
                                 >
                                   city
                                 </span>
                                 <div
-                                  class="c9"
+                                  class="c10"
                                 >
                                   <span>
                                     <button
                                       aria-disabled="false"
                                       aria-labelledby="15"
-                                      class="c58 c59 c14 c60 c61"
+                                      class="c58 c59 c15 c60 c61"
                                       tabindex="0"
                                       type="button"
                                     >
@@ -2957,7 +2953,7 @@ exports[`EditSettingsView should add field 1`] = `
                                     <button
                                       aria-disabled="false"
                                       aria-labelledby="16"
-                                      class="c58 c59 c14 c60 c61"
+                                      class="c58 c59 c15 c60 c61"
                                       data-testid="delete-field"
                                       tabindex="0"
                                       type="button"
@@ -2997,7 +2993,7 @@ exports[`EditSettingsView should add field 1`] = `
                       aria-disabled="true"
                       aria-expanded="false"
                       aria-haspopup="true"
-                      class="c64 c65 c14 c66"
+                      class="c64 c65 c15 c66"
                       data-testid="add-field"
                       disabled=""
                       label="Insert another field"
@@ -3021,7 +3017,7 @@ exports[`EditSettingsView should add field 1`] = `
                         </svg>
                       </div>
                       <span
-                        class="c10 c16"
+                        class="c11 c17"
                       >
                         Insert another field
                       </span>
diff --git a/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js
index 3ce358b1a3..6b17f199d3 100644
--- a/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js
@@ -65,7 +65,11 @@ describe('CONTENT MANAGER | EditView | Header', () => {
         padding-bottom: 8px;
       }
 
-      .c11 {
+      .c7 {
+        min-width: 0;
+      }
+
+      .c12 {
         background: #4945ff;
         padding: 8px;
         padding-right: 16px;
@@ -94,7 +98,7 @@ describe('CONTENT MANAGER | EditView | Header', () => {
         justify-content: space-between;
       }
 
-      .c7 {
+      .c8 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -108,7 +112,7 @@ describe('CONTENT MANAGER | EditView | Header', () => {
         flex-direction: row;
       }
 
-      .c10 {
+      .c11 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -123,46 +127,46 @@ describe('CONTENT MANAGER | EditView | Header', () => {
         gap: 8px;
       }
 
-      .c9 {
+      .c10 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c14 {
+      .c15 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c15 {
+      .c16 {
         font-size: 1rem;
         line-height: 1.5;
         color: #666687;
       }
 
-      .c12 {
+      .c13 {
         position: relative;
         outline: none;
       }
 
-      .c12 svg {
+      .c13 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c12 svg > g,
-      .c12 svg path {
+      .c13 svg > g,
+      .c13 svg path {
         fill: #ffffff;
       }
 
-      .c12[aria-disabled='true'] {
+      .c13[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c12:after {
+      .c13:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -177,11 +181,11 @@ describe('CONTENT MANAGER | EditView | Header', () => {
         border: 2px solid transparent;
       }
 
-      .c12:focus-visible {
+      .c13:focus-visible {
         outline: none;
       }
 
-      .c12:focus-visible:after {
+      .c13:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -192,48 +196,48 @@ describe('CONTENT MANAGER | EditView | Header', () => {
         border: 2px solid #4945ff;
       }
 
-      .c13 {
+      .c14 {
         height: 2rem;
       }
 
-      .c13[aria-disabled='true'] {
+      .c14[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c13[aria-disabled='true'] .c8 {
+      .c14[aria-disabled='true'] .c9 {
         color: #666687;
       }
 
-      .c13[aria-disabled='true'] svg > g,.c13[aria-disabled='true'] svg path {
+      .c14[aria-disabled='true'] svg > g,.c14[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c13[aria-disabled='true']:active {
+      .c14[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c13[aria-disabled='true']:active .c8 {
+      .c14[aria-disabled='true']:active .c9 {
         color: #666687;
       }
 
-      .c13[aria-disabled='true']:active svg > g,.c13[aria-disabled='true']:active svg path {
+      .c14[aria-disabled='true']:active svg > g,.c14[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c13:hover {
+      .c14:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c13:active {
+      .c14:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c13 svg > g,
-      .c13 svg path {
+      .c14 svg > g,
+      .c14 svg path {
         fill: #ffffff;
       }
 
@@ -350,25 +354,25 @@ describe('CONTENT MANAGER | EditView | Header', () => {
             class="c6"
           >
             <div
-              class="c7"
+              class="c7 c8"
             >
               <h1
-                class="c8 c9"
+                class="c9 c10"
               >
                 Create an entry
               </h1>
             </div>
             <div
-              class="c10"
+              class="c11"
             >
               <button
                 aria-disabled="true"
-                class="c11 c10 c12 c13"
+                class="c12 c11 c13 c14"
                 disabled=""
                 type="submit"
               >
                 <span
-                  class="c8 c14"
+                  class="c9 c15"
                 >
                   Save
                 </span>
@@ -376,7 +380,7 @@ describe('CONTENT MANAGER | EditView | Header', () => {
             </div>
           </div>
           <p
-            class="c8 c15"
+            class="c9 c16"
           >
             API ID  : restaurant
           </p>
diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap
index d8c5c2f78b..482181ebc3 100644
--- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap
@@ -17,7 +17,11 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   padding-bottom: 8px;
 }
 
-.c14 {
+.c11 {
+  min-width: 0;
+}
+
+.c15 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -28,12 +32,12 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   cursor: pointer;
 }
 
-.c20 {
+.c21 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c21 {
+.c22 {
   background: #ffffff;
   padding-top: 24px;
   padding-right: 32px;
@@ -43,7 +47,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c25 {
+.c26 {
   width: 100%;
 }
 
@@ -133,7 +137,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   justify-content: space-between;
 }
 
-.c11 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -147,7 +151,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   flex-direction: row;
 }
 
-.c15 {
+.c16 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -162,7 +166,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   gap: 8px;
 }
 
-.c22 {
+.c23 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -177,7 +181,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   gap: 16px;
 }
 
-.c24 {
+.c25 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -196,7 +200,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   justify-content: space-between;
 }
 
-.c27 {
+.c28 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -208,6 +212,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
 .c35 {
@@ -243,27 +248,27 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   gap: 12px;
 }
 
-.c13 {
+.c14 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c18 {
+.c19 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c19 {
+.c20 {
   font-size: 1rem;
   line-height: 1.5;
   color: #666687;
 }
 
-.c23 {
+.c24 {
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
@@ -324,35 +329,26 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   color: #32324d;
 }
 
-.c28 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c28 > * + * {
-  margin-top: 4px;
-}
-
-.c16 {
+.c17 {
   position: relative;
   outline: none;
 }
 
-.c16 svg {
+.c17 svg {
   height: 12px;
   width: 12px;
 }
 
-.c16 svg > g,
-.c16 svg path {
+.c17 svg > g,
+.c17 svg path {
   fill: #ffffff;
 }
 
-.c16[aria-disabled='true'] {
+.c17[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c16:after {
+.c17:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -367,11 +363,11 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   border: 2px solid transparent;
 }
 
-.c16:focus-visible {
+.c17:focus-visible {
   outline: none;
 }
 
-.c16:focus-visible:after {
+.c17:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -394,48 +390,48 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   width: 1px;
 }
 
-.c17 {
+.c18 {
   height: 2rem;
 }
 
-.c17[aria-disabled='true'] {
+.c18[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c17[aria-disabled='true'] .c12 {
+.c18[aria-disabled='true'] .c13 {
   color: #666687;
 }
 
-.c17[aria-disabled='true'] svg > g,.c17[aria-disabled='true'] svg path {
+.c18[aria-disabled='true'] svg > g,.c18[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c17[aria-disabled='true']:active {
+.c18[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c17[aria-disabled='true']:active .c12 {
+.c18[aria-disabled='true']:active .c13 {
   color: #666687;
 }
 
-.c17[aria-disabled='true']:active svg > g,.c17[aria-disabled='true']:active svg path {
+.c18[aria-disabled='true']:active svg > g,.c18[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c17:hover {
+.c18:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c17:active {
+.c18:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c17 svg > g,
-.c17 svg path {
+.c18 svg > g,
+.c18 svg path {
   fill: #ffffff;
 }
 
@@ -636,7 +632,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   width: 100%;
 }
 
-.c26 {
+.c27 {
   max-width: 320px;
 }
 
@@ -760,7 +756,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   fill: #4945ff;
 }
 
-.c64:hover .c12 {
+.c64:hover .c13 {
   color: #4945ff;
 }
 
@@ -875,17 +871,17 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                 class="c10"
               >
                 <div
-                  class="c11"
+                  class="c11 c12"
                 >
                   <h1
-                    class="c12 c13"
+                    class="c13 c14"
                   >
                     Configure the view - Michka
                   </h1>
                 </div>
                 <button
                   aria-disabled="true"
-                  class="c14 c15 c16 c17"
+                  class="c15 c16 c17 c18"
                   disabled=""
                   type="submit"
                 >
@@ -907,54 +903,54 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                     </svg>
                   </div>
                   <span
-                    class="c12 c18"
+                    class="c13 c19"
                   >
                     Save
                   </span>
                 </button>
               </div>
               <p
-                class="c12 c19"
+                class="c13 c20"
               >
                 Define the settings of the list view.
               </p>
             </div>
           </div>
           <div
-            class="c20"
+            class="c21"
           >
             <div
-              class="c21"
+              class="c22"
             >
               <div
-                class="c22"
+                class="c23"
               >
                 <h2
-                  class="c12 c23"
+                  class="c13 c24"
                 >
                   Settings
                 </h2>
                 <div
-                  class="c24"
+                  class="c25"
                 >
                   <div
-                    class="c25"
+                    class="c26"
                   >
                     <div
-                      class="c26"
+                      class="c27"
                     >
                       <div
-                        class="c27 c28"
+                        class="c28"
                       >
                         <div
-                          class="c11"
+                          class="c12"
                         >
                           <label
-                            class="c12 c29"
+                            class="c13 c29"
                             for="1"
                           >
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               Enable search
                             </div>
@@ -977,7 +973,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                               class="c34 c35 c36"
                             >
                               <span
-                                class="c12 c37"
+                                class="c13 c37"
                               >
                                 off
                               </span>
@@ -987,7 +983,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                               class="c34 c35 c38"
                             >
                               <span
-                                class="c12 c39"
+                                class="c13 c39"
                               >
                                 on
                               </span>
@@ -1007,23 +1003,23 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                     </div>
                   </div>
                   <div
-                    class="c25"
+                    class="c26"
                   >
                     <div
-                      class="c26"
+                      class="c27"
                     >
                       <div
-                        class="c27 c28"
+                        class="c28"
                       >
                         <div
-                          class="c11"
+                          class="c12"
                         >
                           <label
-                            class="c12 c29"
+                            class="c13 c29"
                             for="3"
                           >
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               Enable filters
                             </div>
@@ -1046,7 +1042,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                               class="c34 c35 c36"
                             >
                               <span
-                                class="c12 c37"
+                                class="c13 c37"
                               >
                                 off
                               </span>
@@ -1056,7 +1052,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                               class="c34 c35 c38"
                             >
                               <span
-                                class="c12 c39"
+                                class="c13 c39"
                               >
                                 on
                               </span>
@@ -1076,23 +1072,23 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                     </div>
                   </div>
                   <div
-                    class="c25"
+                    class="c26"
                   >
                     <div
-                      class="c26"
+                      class="c27"
                     >
                       <div
-                        class="c27 c28"
+                        class="c28"
                       >
                         <div
-                          class="c11"
+                          class="c12"
                         >
                           <label
-                            class="c12 c29"
+                            class="c13 c29"
                             for="5"
                           >
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               Enable bulk actions
                             </div>
@@ -1115,7 +1111,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                               class="c34 c35 c38"
                             >
                               <span
-                                class="c12 c41"
+                                class="c13 c41"
                               >
                                 off
                               </span>
@@ -1125,7 +1121,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                               class="c34 c35 c36"
                             >
                               <span
-                                class="c12 c37"
+                                class="c13 c37"
                               >
                                 on
                               </span>
@@ -1153,22 +1149,24 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                     <div
                       class=""
                     >
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c27 c28"
+                          class="c28"
                         >
                           <label
-                            class="c12 c29"
+                            class="c13 c29"
                             for="7"
                           >
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               Entries per page
                             </div>
                           </label>
                           <div
-                            class="c11 c44"
+                            class="c12 c44"
                           >
                             <button
                               aria-describedby="7-hint"
@@ -1185,13 +1183,13 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                               class="c10 c46"
                             >
                               <div
-                                class="c11"
+                                class="c12"
                               >
                                 <div
                                   class="c47"
                                 >
                                   <span
-                                    class="c12 c48"
+                                    class="c13 c48"
                                     id="7-content"
                                   >
                                     10
@@ -1199,7 +1197,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                                 </div>
                               </div>
                               <div
-                                class="c11"
+                                class="c12"
                               >
                                 <button
                                   aria-hidden="true"
@@ -1227,7 +1225,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                             </div>
                           </div>
                           <p
-                            class="c12 c52"
+                            class="c13 c52"
                             id="7-hint"
                           >
                             Note: You can override this value in the Collection Type settings page.
@@ -1242,22 +1240,24 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                     <div
                       class=""
                     >
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c27 c28"
+                          class="c28"
                         >
                           <label
-                            class="c12 c29"
+                            class="c13 c29"
                             for="9"
                           >
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               Default sort attribute
                             </div>
                           </label>
                           <div
-                            class="c11 c44"
+                            class="c12 c44"
                           >
                             <button
                               aria-disabled="false"
@@ -1273,13 +1273,13 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                               class="c10 c46"
                             >
                               <div
-                                class="c11"
+                                class="c12"
                               >
                                 <div
                                   class="c47"
                                 >
                                   <span
-                                    class="c12 c48"
+                                    class="c13 c48"
                                     id="9-content"
                                   >
                                     id
@@ -1287,7 +1287,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                                 </div>
                               </div>
                               <div
-                                class="c11"
+                                class="c12"
                               >
                                 <button
                                   aria-hidden="true"
@@ -1324,22 +1324,24 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                     <div
                       class=""
                     >
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c27 c28"
+                          class="c28"
                         >
                           <label
-                            class="c12 c29"
+                            class="c13 c29"
                             for="11"
                           >
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               Default sort order
                             </div>
                           </label>
                           <div
-                            class="c11 c44"
+                            class="c12 c44"
                           >
                             <button
                               aria-disabled="false"
@@ -1355,13 +1357,13 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                               class="c10 c46"
                             >
                               <div
-                                class="c11"
+                                class="c12"
                               >
                                 <div
                                   class="c47"
                                 >
                                   <span
-                                    class="c12 c48"
+                                    class="c13 c48"
                                     id="11-content"
                                   >
                                     ASC
@@ -1369,7 +1371,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                                 </div>
                               </div>
                               <div
-                                class="c11"
+                                class="c12"
                               >
                                 <button
                                   aria-hidden="true"
@@ -1413,13 +1415,13 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                 class="c57"
               >
                 <h2
-                  class="c12 c23"
+                  class="c13 c24"
                 >
                   View
                 </h2>
               </div>
               <div
-                class="c58 c11"
+                class="c58 c12"
               >
                 <div
                   class="c57 c59 c60"
@@ -1481,13 +1483,13 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                             </svg>
                           </span>
                           <span
-                            class="c12 c68"
+                            class="c13 c68"
                           >
                             id
                           </span>
                         </div>
                         <div
-                          class="c49 c11"
+                          class="c49 c12"
                         >
                           <button
                             aria-label="Edit id"
@@ -1584,13 +1586,13 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                             </svg>
                           </span>
                           <span
-                            class="c12 c68"
+                            class="c13 c68"
                           >
                             address
                           </span>
                         </div>
                         <div
-                          class="c49 c11"
+                          class="c49 c12"
                         >
                           <button
                             aria-label="Edit address"
@@ -1647,7 +1649,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                         aria-expanded="false"
                         aria-haspopup="true"
                         aria-labelledby="12"
-                        class="c71 c35 c16 c72"
+                        class="c71 c35 c17 c72"
                         data-testid="add-field"
                         tabindex="0"
                         type="button"
@@ -1724,7 +1726,11 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   padding-bottom: 8px;
 }
 
-.c14 {
+.c11 {
+  min-width: 0;
+}
+
+.c15 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -1735,12 +1741,12 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   cursor: pointer;
 }
 
-.c20 {
+.c21 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c21 {
+.c22 {
   background: #ffffff;
   padding-top: 24px;
   padding-right: 32px;
@@ -1750,7 +1756,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c25 {
+.c26 {
   width: 100%;
 }
 
@@ -1840,7 +1846,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   justify-content: space-between;
 }
 
-.c11 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1854,7 +1860,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   flex-direction: row;
 }
 
-.c15 {
+.c16 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1869,7 +1875,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   gap: 8px;
 }
 
-.c22 {
+.c23 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -1884,7 +1890,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   gap: 16px;
 }
 
-.c24 {
+.c25 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1903,7 +1909,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   justify-content: space-between;
 }
 
-.c27 {
+.c28 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -1915,6 +1921,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
 .c35 {
@@ -1950,27 +1957,27 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   gap: 12px;
 }
 
-.c13 {
+.c14 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c18 {
+.c19 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c19 {
+.c20 {
   font-size: 1rem;
   line-height: 1.5;
   color: #666687;
 }
 
-.c23 {
+.c24 {
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
@@ -2031,35 +2038,26 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   color: #32324d;
 }
 
-.c28 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c28 > * + * {
-  margin-top: 4px;
-}
-
-.c16 {
+.c17 {
   position: relative;
   outline: none;
 }
 
-.c16 svg {
+.c17 svg {
   height: 12px;
   width: 12px;
 }
 
-.c16 svg > g,
-.c16 svg path {
+.c17 svg > g,
+.c17 svg path {
   fill: #ffffff;
 }
 
-.c16[aria-disabled='true'] {
+.c17[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c16:after {
+.c17:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -2074,11 +2072,11 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   border: 2px solid transparent;
 }
 
-.c16:focus-visible {
+.c17:focus-visible {
   outline: none;
 }
 
-.c16:focus-visible:after {
+.c17:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -2101,48 +2099,48 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   width: 1px;
 }
 
-.c17 {
+.c18 {
   height: 2rem;
 }
 
-.c17[aria-disabled='true'] {
+.c18[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c17[aria-disabled='true'] .c12 {
+.c18[aria-disabled='true'] .c13 {
   color: #666687;
 }
 
-.c17[aria-disabled='true'] svg > g,.c17[aria-disabled='true'] svg path {
+.c18[aria-disabled='true'] svg > g,.c18[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c17[aria-disabled='true']:active {
+.c18[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c17[aria-disabled='true']:active .c12 {
+.c18[aria-disabled='true']:active .c13 {
   color: #666687;
 }
 
-.c17[aria-disabled='true']:active svg > g,.c17[aria-disabled='true']:active svg path {
+.c18[aria-disabled='true']:active svg > g,.c18[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c17:hover {
+.c18:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c17:active {
+.c18:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c17 svg > g,
-.c17 svg path {
+.c18 svg > g,
+.c18 svg path {
   fill: #ffffff;
 }
 
@@ -2343,7 +2341,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   width: 100%;
 }
 
-.c26 {
+.c27 {
   max-width: 320px;
 }
 
@@ -2467,7 +2465,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   fill: #4945ff;
 }
 
-.c64:hover .c12 {
+.c64:hover .c13 {
   color: #4945ff;
 }
 
@@ -2582,17 +2580,17 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                 class="c10"
               >
                 <div
-                  class="c11"
+                  class="c11 c12"
                 >
                   <h1
-                    class="c12 c13"
+                    class="c13 c14"
                   >
                     Configure the view - Michka
                   </h1>
                 </div>
                 <button
                   aria-disabled="false"
-                  class="c14 c15 c16 c17"
+                  class="c15 c16 c17 c18"
                   type="submit"
                 >
                   <div
@@ -2613,54 +2611,54 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                     </svg>
                   </div>
                   <span
-                    class="c12 c18"
+                    class="c13 c19"
                   >
                     Save
                   </span>
                 </button>
               </div>
               <p
-                class="c12 c19"
+                class="c13 c20"
               >
                 Define the settings of the list view.
               </p>
             </div>
           </div>
           <div
-            class="c20"
+            class="c21"
           >
             <div
-              class="c21"
+              class="c22"
             >
               <div
-                class="c22"
+                class="c23"
               >
                 <h2
-                  class="c12 c23"
+                  class="c13 c24"
                 >
                   Settings
                 </h2>
                 <div
-                  class="c24"
+                  class="c25"
                 >
                   <div
-                    class="c25"
+                    class="c26"
                   >
                     <div
-                      class="c26"
+                      class="c27"
                     >
                       <div
-                        class="c27 c28"
+                        class="c28"
                       >
                         <div
-                          class="c11"
+                          class="c12"
                         >
                           <label
-                            class="c12 c29"
+                            class="c13 c29"
                             for="33"
                           >
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               Enable search
                             </div>
@@ -2683,7 +2681,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                               class="c34 c35 c36"
                             >
                               <span
-                                class="c12 c37"
+                                class="c13 c37"
                               >
                                 off
                               </span>
@@ -2693,7 +2691,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                               class="c34 c35 c38"
                             >
                               <span
-                                class="c12 c39"
+                                class="c13 c39"
                               >
                                 on
                               </span>
@@ -2713,23 +2711,23 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                     </div>
                   </div>
                   <div
-                    class="c25"
+                    class="c26"
                   >
                     <div
-                      class="c26"
+                      class="c27"
                     >
                       <div
-                        class="c27 c28"
+                        class="c28"
                       >
                         <div
-                          class="c11"
+                          class="c12"
                         >
                           <label
-                            class="c12 c29"
+                            class="c13 c29"
                             for="35"
                           >
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               Enable filters
                             </div>
@@ -2752,7 +2750,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                               class="c34 c35 c36"
                             >
                               <span
-                                class="c12 c37"
+                                class="c13 c37"
                               >
                                 off
                               </span>
@@ -2762,7 +2760,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                               class="c34 c35 c38"
                             >
                               <span
-                                class="c12 c39"
+                                class="c13 c39"
                               >
                                 on
                               </span>
@@ -2782,23 +2780,23 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                     </div>
                   </div>
                   <div
-                    class="c25"
+                    class="c26"
                   >
                     <div
-                      class="c26"
+                      class="c27"
                     >
                       <div
-                        class="c27 c28"
+                        class="c28"
                       >
                         <div
-                          class="c11"
+                          class="c12"
                         >
                           <label
-                            class="c12 c29"
+                            class="c13 c29"
                             for="37"
                           >
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               Enable bulk actions
                             </div>
@@ -2821,7 +2819,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                               class="c34 c35 c38"
                             >
                               <span
-                                class="c12 c41"
+                                class="c13 c41"
                               >
                                 off
                               </span>
@@ -2831,7 +2829,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                               class="c34 c35 c36"
                             >
                               <span
-                                class="c12 c37"
+                                class="c13 c37"
                               >
                                 on
                               </span>
@@ -2859,22 +2857,24 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                     <div
                       class=""
                     >
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c27 c28"
+                          class="c28"
                         >
                           <label
-                            class="c12 c29"
+                            class="c13 c29"
                             for="39"
                           >
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               Entries per page
                             </div>
                           </label>
                           <div
-                            class="c11 c44"
+                            class="c12 c44"
                           >
                             <button
                               aria-describedby="39-hint"
@@ -2891,13 +2891,13 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                               class="c10 c46"
                             >
                               <div
-                                class="c11"
+                                class="c12"
                               >
                                 <div
                                   class="c47"
                                 >
                                   <span
-                                    class="c12 c48"
+                                    class="c13 c48"
                                     id="39-content"
                                   >
                                     10
@@ -2905,7 +2905,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                                 </div>
                               </div>
                               <div
-                                class="c11"
+                                class="c12"
                               >
                                 <button
                                   aria-hidden="true"
@@ -2933,7 +2933,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                             </div>
                           </div>
                           <p
-                            class="c12 c52"
+                            class="c13 c52"
                             id="39-hint"
                           >
                             Note: You can override this value in the Collection Type settings page.
@@ -2948,22 +2948,24 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                     <div
                       class=""
                     >
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c27 c28"
+                          class="c28"
                         >
                           <label
-                            class="c12 c29"
+                            class="c13 c29"
                             for="41"
                           >
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               Default sort attribute
                             </div>
                           </label>
                           <div
-                            class="c11 c44"
+                            class="c12 c44"
                           >
                             <button
                               aria-disabled="false"
@@ -2979,13 +2981,13 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                               class="c10 c46"
                             >
                               <div
-                                class="c11"
+                                class="c12"
                               >
                                 <div
                                   class="c47"
                                 >
                                   <span
-                                    class="c12 c48"
+                                    class="c13 c48"
                                     id="41-content"
                                   >
                                     id
@@ -2993,7 +2995,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                                 </div>
                               </div>
                               <div
-                                class="c11"
+                                class="c12"
                               >
                                 <button
                                   aria-hidden="true"
@@ -3030,22 +3032,24 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                     <div
                       class=""
                     >
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c27 c28"
+                          class="c28"
                         >
                           <label
-                            class="c12 c29"
+                            class="c13 c29"
                             for="43"
                           >
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               Default sort order
                             </div>
                           </label>
                           <div
-                            class="c11 c44"
+                            class="c12 c44"
                           >
                             <button
                               aria-disabled="false"
@@ -3061,13 +3065,13 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                               class="c10 c46"
                             >
                               <div
-                                class="c11"
+                                class="c12"
                               >
                                 <div
                                   class="c47"
                                 >
                                   <span
-                                    class="c12 c48"
+                                    class="c13 c48"
                                     id="43-content"
                                   >
                                     ASC
@@ -3075,7 +3079,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                                 </div>
                               </div>
                               <div
-                                class="c11"
+                                class="c12"
                               >
                                 <button
                                   aria-hidden="true"
@@ -3119,13 +3123,13 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                 class="c57"
               >
                 <h2
-                  class="c12 c23"
+                  class="c13 c24"
                 >
                   View
                 </h2>
               </div>
               <div
-                class="c58 c11"
+                class="c58 c12"
               >
                 <div
                   class="c57 c59 c60"
@@ -3187,13 +3191,13 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                             </svg>
                           </span>
                           <span
-                            class="c12 c68"
+                            class="c13 c68"
                           >
                             id
                           </span>
                         </div>
                         <div
-                          class="c49 c11"
+                          class="c49 c12"
                         >
                           <button
                             aria-label="Edit id"
@@ -3290,13 +3294,13 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                             </svg>
                           </span>
                           <span
-                            class="c12 c68"
+                            class="c13 c68"
                           >
                             address
                           </span>
                         </div>
                         <div
-                          class="c49 c11"
+                          class="c49 c12"
                         >
                           <button
                             aria-label="Edit address"
@@ -3393,13 +3397,13 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                             </svg>
                           </span>
                           <span
-                            class="c12 c68"
+                            class="c13 c68"
                           >
                             Cover
                           </span>
                         </div>
                         <div
-                          class="c49 c11"
+                          class="c49 c12"
                         >
                           <button
                             aria-label="Edit Cover"
@@ -3456,7 +3460,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                         aria-expanded="true"
                         aria-haspopup="true"
                         aria-labelledby="44"
-                        class="c71 c35 c16 c72"
+                        class="c71 c35 c17 c72"
                         data-testid="add-field"
                         tabindex="0"
                         type="button"
diff --git a/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js
index 8b83620422..8cb8ada839 100644
--- a/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js
@@ -38,23 +38,27 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         padding-left: 56px;
       }
 
-      .c5 {
+      .c3 {
+        min-width: 0;
+      }
+
+      .c6 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c6 {
+      .c7 {
         background: #ffffff;
         padding: 64px;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c8 {
+      .c9 {
         padding-bottom: 24px;
       }
 
-      .c10 {
+      .c11 {
         padding-bottom: 16px;
       }
 
@@ -76,7 +80,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         justify-content: space-between;
       }
 
-      .c3 {
+      .c4 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -90,21 +94,21 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         flex-direction: row;
       }
 
-      .c4 {
+      .c5 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c11 {
+      .c12 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
         color: #666687;
       }
 
-      .c7 {
+      .c8 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -119,7 +123,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         text-align: center;
       }
 
-      .c9 svg {
+      .c10 svg {
         height: 5.5rem;
       }
 
@@ -127,7 +131,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         outline: none;
       }
 
-      .c12 {
+      .c13 {
         background: #4945ff;
         padding-top: 8px;
         padding-right: 16px;
@@ -138,14 +142,14 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         border: 1px solid #4945ff;
       }
 
-      .c18 {
+      .c19 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c13 {
+      .c14 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -160,7 +164,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         gap: 8px;
       }
 
-      .c16 {
+      .c17 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -174,26 +178,26 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         flex-direction: row;
       }
 
-      .c14 {
+      .c15 {
         position: relative;
         outline: none;
       }
 
-      .c14 svg {
+      .c15 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c14 svg > g,
-      .c14 svg path {
+      .c15 svg > g,
+      .c15 svg path {
         fill: #ffffff;
       }
 
-      .c14[aria-disabled='true'] {
+      .c15[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c14:after {
+      .c15:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -208,11 +212,11 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         border: 2px solid transparent;
       }
 
-      .c14:focus-visible {
+      .c15:focus-visible {
         outline: none;
       }
 
-      .c14:focus-visible:after {
+      .c15:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -223,63 +227,63 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         border: 2px solid #4945ff;
       }
 
-      .c15 {
+      .c16 {
         -webkit-text-decoration: none;
         text-decoration: none;
         border: 1px solid #d9d8ff;
         background: #f0f0ff;
       }
 
-      .c15[aria-disabled='true'] {
+      .c16[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c15[aria-disabled='true'] .c17 {
+      .c16[aria-disabled='true'] .c18 {
         color: #666687;
       }
 
-      .c15[aria-disabled='true'] svg > g,.c15[aria-disabled='true'] svg path {
+      .c16[aria-disabled='true'] svg > g,.c16[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c15[aria-disabled='true']:active {
+      .c16[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c15[aria-disabled='true']:active .c17 {
+      .c16[aria-disabled='true']:active .c18 {
         color: #666687;
       }
 
-      .c15[aria-disabled='true']:active svg > g,.c15[aria-disabled='true']:active svg path {
+      .c16[aria-disabled='true']:active svg > g,.c16[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c15:hover {
+      .c16:hover {
         background-color: #ffffff;
       }
 
-      .c15:active {
+      .c16:active {
         background-color: #ffffff;
         border: 1px solid #4945ff;
       }
 
-      .c15:active .c17 {
+      .c16:active .c18 {
         color: #4945ff;
       }
 
-      .c15:active svg > g,
-      .c15:active svg path {
+      .c16:active svg > g,
+      .c16:active svg path {
         fill: #4945ff;
       }
 
-      .c15 .c17 {
+      .c16 .c18 {
         color: #271fe0;
       }
 
-      .c15 svg > g,
-      .c15 svg path {
+      .c16 svg > g,
+      .c16 svg path {
         fill: #271fe0;
       }
 
@@ -300,10 +304,10 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
               class="c2"
             >
               <div
-                class="c3"
+                class="c3 c4"
               >
                 <h1
-                  class="c4"
+                  class="c5"
                 >
                   Content
                 </h1>
@@ -312,14 +316,14 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
           </div>
         </div>
         <div
-          class="c5"
+          class="c6"
         >
           <div
-            class="c6 c7"
+            class="c7 c8"
           >
             <div
               aria-hidden="true"
-              class="c8 c9"
+              class="c9 c10"
             >
               <svg
                 fill="none"
@@ -385,22 +389,22 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
               </svg>
             </div>
             <div
-              class="c10"
+              class="c11"
             >
               <p
-                class="c11"
+                class="c12"
               >
                 You don't have any content yet, we recommend you to create your first Content-Type.
               </p>
             </div>
             <a
               aria-disabled="false"
-              class="c12 c13 c14 c15"
+              class="c13 c14 c15 c16"
               href="/plugins/content-type-builder/content-types/create-content-type"
             >
               <div
                 aria-hidden="true"
-                class="c16"
+                class="c17"
               >
                 <svg
                   fill="none"
@@ -416,7 +420,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
                 </svg>
               </div>
               <span
-                class="c17 c18"
+                class="c18 c19"
               >
                 Create your first Content-type
               </span>
diff --git a/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js
index cbbae3a868..29b3bea8c6 100644
--- a/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js
@@ -40,23 +40,27 @@ describe('<NoPermissions />', () => {
         padding-left: 56px;
       }
 
-      .c5 {
+      .c3 {
+        min-width: 0;
+      }
+
+      .c6 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c6 {
+      .c7 {
         background: #ffffff;
         padding: 64px;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c8 {
+      .c9 {
         padding-bottom: 24px;
       }
 
-      .c10 {
+      .c11 {
         padding-bottom: 16px;
       }
 
@@ -78,7 +82,7 @@ describe('<NoPermissions />', () => {
         justify-content: space-between;
       }
 
-      .c3 {
+      .c4 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -92,21 +96,21 @@ describe('<NoPermissions />', () => {
         flex-direction: row;
       }
 
-      .c4 {
+      .c5 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c11 {
+      .c12 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
         color: #666687;
       }
 
-      .c7 {
+      .c8 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -121,7 +125,7 @@ describe('<NoPermissions />', () => {
         text-align: center;
       }
 
-      .c9 svg {
+      .c10 svg {
         height: 5.5rem;
       }
 
@@ -146,10 +150,10 @@ describe('<NoPermissions />', () => {
               class="c2"
             >
               <div
-                class="c3"
+                class="c3 c4"
               >
                 <h1
-                  class="c4"
+                  class="c5"
                 >
                   Content
                 </h1>
@@ -158,14 +162,14 @@ describe('<NoPermissions />', () => {
           </div>
         </div>
         <div
-          class="c5"
+          class="c6"
         >
           <div
-            class="c6 c7"
+            class="c7 c8"
           >
             <div
               aria-hidden="true"
-              class="c8 c9"
+              class="c9 c10"
             >
               <svg
                 fill="none"
@@ -241,10 +245,10 @@ describe('<NoPermissions />', () => {
               </svg>
             </div>
             <div
-              class="c10"
+              class="c11"
             >
               <p
-                class="c11"
+                class="c12"
               >
                 You don't have the permissions to access that content
               </p>
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js b/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js
index cb50349995..2fabefc145 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js
@@ -46,16 +46,21 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         padding-bottom: 32px;
       }
 
-      .c22 {
+      .c21 {
         padding-right: 12px;
         padding-left: 8px;
       }
 
-      .c28 {
+      .c22 {
+        background: transparent;
+        border-style: none;
+      }
+
+      .c30 {
         padding-left: 8px;
       }
 
-      .c29 {
+      .c31 {
         background: #4945ff;
         padding: 8px;
         padding-right: 16px;
@@ -67,7 +72,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         cursor: pointer;
       }
 
-      .c35 {
+      .c37 {
         padding-top: 16px;
       }
 
@@ -112,9 +117,10 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
+        gap: 4px;
       }
 
-      .c17 {
+      .c16 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -132,7 +138,25 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         justify-content: space-between;
       }
 
-      .c30 {
+      .c23 {
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: unset;
+        -webkit-justify-content: unset;
+        -ms-flex-pack: unset;
+        justify-content: unset;
+      }
+
+      .c32 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -151,7 +175,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         justify-content: center;
       }
 
-      .c34 {
+      .c36 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -182,61 +206,52 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         color: #666687;
       }
 
-      .c14 {
+      .c13 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #32324d;
       }
 
-      .c15 {
+      .c14 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #d02b20;
       }
 
-      .c25 {
+      .c27 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #32324d;
       }
 
-      .c33 {
+      .c35 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c13 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c13 > * + * {
-        margin-top: 4px;
-      }
-
-      .c31 {
+      .c33 {
         position: relative;
         outline: none;
       }
 
-      .c31 svg {
+      .c33 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c31 svg > g,
-      .c31 svg path {
+      .c33 svg > g,
+      .c33 svg path {
         fill: #ffffff;
       }
 
-      .c31[aria-disabled='true'] {
+      .c33[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c31:after {
+      .c33:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -251,11 +266,11 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         border: 2px solid transparent;
       }
 
-      .c31:focus-visible {
+      .c33:focus-visible {
         outline: none;
       }
 
-      .c31:focus-visible:after {
+      .c33:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -266,7 +281,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         border: 2px solid #4945ff;
       }
 
-      .c27 {
+      .c29 {
         height: 18px;
         min-width: 18px;
         margin: 0;
@@ -277,12 +292,12 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         cursor: pointer;
       }
 
-      .c27:checked {
+      .c29:checked {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c27:checked:after {
+      .c29:checked:after {
         content: '';
         display: block;
         position: relative;
@@ -296,21 +311,21 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c27:checked:disabled:after {
+      .c29:checked:disabled:after {
         background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
       }
 
-      .c27:disabled {
+      .c29:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c27:indeterminate {
+      .c29:indeterminate {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c27:indeterminate:after {
+      .c29:indeterminate:after {
         content: '';
         display: block;
         position: relative;
@@ -325,70 +340,126 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c27:indeterminate:disabled {
+      .c29:indeterminate:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c27:indeterminate:disabled:after {
+      .c29:indeterminate:disabled:after {
         background-color: #8e8ea9;
       }
 
-      .c32 {
+      .c26 {
+        border: 0;
+        -webkit-clip: rect(0 0 0 0);
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+      }
+
+      .c34 {
         height: 2rem;
       }
 
-      .c32[aria-disabled='true'] {
+      .c34[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c32[aria-disabled='true'] .c7 {
+      .c34[aria-disabled='true'] .c7 {
         color: #666687;
       }
 
-      .c32[aria-disabled='true'] svg > g,.c32[aria-disabled='true'] svg path {
+      .c34[aria-disabled='true'] svg > g,.c34[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c32[aria-disabled='true']:active {
+      .c34[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c32[aria-disabled='true']:active .c7 {
+      .c34[aria-disabled='true']:active .c7 {
         color: #666687;
       }
 
-      .c32[aria-disabled='true']:active svg > g,.c32[aria-disabled='true']:active svg path {
+      .c34[aria-disabled='true']:active svg > g,.c34[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c32:hover {
+      .c34:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c32:active {
+      .c34:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c32 svg > g,
-      .c32 svg path {
+      .c34 svg > g,
+      .c34 svg path {
         fill: #ffffff;
       }
 
-      .c16 {
+      .c15 {
         line-height: 0;
       }
 
+      .c18 {
+        border: none;
+        border-radius: 4px;
+        padding-bottom: 0.65625rem;
+        padding-left: 16px;
+        padding-right: 16px;
+        padding-top: 0.65625rem;
+        color: #32324d;
+        font-weight: 400;
+        font-size: 0.875rem;
+        display: block;
+        width: 100%;
+        background: inherit;
+      }
+
+      .c18::-webkit-input-placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c18::-moz-placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c18:-ms-input-placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c18::placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c18[aria-disabled='true'] {
+        color: inherit;
+      }
+
+      .c18:focus {
+        outline: none;
+        box-shadow: none;
+      }
+
       .c19 {
         border: none;
         border-radius: 4px;
         padding-bottom: 0.65625rem;
         padding-left: 16px;
-        padding-right: 16px;
+        padding-right: 0;
         padding-top: 0.65625rem;
         color: #32324d;
         font-weight: 400;
@@ -427,51 +498,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         box-shadow: none;
       }
 
-      .c20 {
-        border: none;
-        border-radius: 4px;
-        padding-bottom: 0.65625rem;
-        padding-left: 16px;
-        padding-right: 0;
-        padding-top: 0.65625rem;
-        color: #32324d;
-        font-weight: 400;
-        font-size: 0.875rem;
-        display: block;
-        width: 100%;
-        background: inherit;
-      }
-
-      .c20::-webkit-input-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c20::-moz-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c20:-ms-input-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c20::placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c20[aria-disabled='true'] {
-        color: inherit;
-      }
-
-      .c20:focus {
-        outline: none;
-        box-shadow: none;
-      }
-
-      .c18 {
+      .c17 {
         border: 1px solid #dcdce4;
         border-radius: 4px;
         background: #ffffff;
@@ -483,28 +510,17 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         transition-duration: 0.2s;
       }
 
-      .c18:focus-within {
+      .c17:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c23 {
-        border: none;
-        background: transparent;
+      .c24 {
         font-size: 1.6rem;
-        width: auto;
         padding: 0;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
       }
 
-      .c26 {
+      .c28 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -515,7 +531,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         align-items: flex-start;
       }
 
-      .c26 * {
+      .c28 * {
         cursor: pointer;
       }
 
@@ -523,13 +539,13 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         outline: none;
       }
 
-      .c37 {
+      .c39 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #4945ff;
       }
 
-      .c36 {
+      .c38 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -544,15 +560,15 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         outline: none;
       }
 
-      .c36 svg path {
+      .c38 svg path {
         fill: #4945ff;
       }
 
-      .c36 svg {
+      .c38 svg {
         font-size: 0.625rem;
       }
 
-      .c36:after {
+      .c38:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -567,11 +583,11 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         border: 2px solid transparent;
       }
 
-      .c36:focus-visible {
+      .c38:focus-visible {
         outline: none;
       }
 
-      .c36:focus-visible:after {
+      .c38:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -597,16 +613,16 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         height: 4.5rem;
       }
 
-      .c24 svg {
+      .c25 svg {
         height: 1rem;
         width: 1rem;
       }
 
-      .c24 svg path {
+      .c25 svg path {
         fill: #666687;
       }
 
-      .c21::-ms-reveal {
+      .c20::-ms-reveal {
         display: none;
       }
 
@@ -655,12 +671,14 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
               class="c11"
             >
               <div>
-                <div>
+                <div
+                  class=""
+                >
                   <div
-                    class="c12 c13"
+                    class="c12"
                   >
                     <label
-                      class="c7 c14"
+                      class="c7 c13"
                       for="1"
                     >
                       <div
@@ -668,20 +686,20 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
                       >
                         Email
                         <span
-                          class="c7 c15 c16"
+                          class="c7 c14 c15"
                         >
                           *
                         </span>
                       </div>
                     </label>
                     <div
-                      class="c17 c18"
+                      class="c16 c17"
                     >
                       <input
                         aria-disabled="false"
                         aria-invalid="false"
                         aria-required="true"
-                        class="c19"
+                        class="c18"
                         id="1"
                         name="email"
                         placeholder="kai@doe.com"
@@ -692,12 +710,14 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
                 </div>
               </div>
               <div>
-                <div>
+                <div
+                  class=""
+                >
                   <div
-                    class="c12 c13"
+                    class="c12"
                   >
                     <label
-                      class="c7 c14"
+                      class="c7 c13"
                       for="3"
                     >
                       <div
@@ -705,35 +725,41 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
                       >
                         Password
                         <span
-                          class="c7 c15 c16"
+                          class="c7 c14 c15"
                         >
                           *
                         </span>
                       </div>
                     </label>
                     <div
-                      class="c17 c18"
+                      class="c16 c17"
                     >
                       <input
                         aria-disabled="false"
                         aria-invalid="false"
                         aria-required="true"
-                        class="c20 c21"
+                        class="c19 c20"
                         id="3"
                         name="password"
                         type="password"
                         value=""
                       />
                       <div
-                        class="c22"
+                        class="c21"
                       >
                         <button
-                          aria-label="Hide password"
-                          class="c23 c24"
+                          class="c22 c23 c24 c25"
                           type="button"
                         >
+                          <span
+                            class="c26"
+                          >
+                            Hide password
+                          </span>
                           <svg
+                            aria-hidden="true"
                             fill="none"
+                            focusable="false"
                             height="1rem"
                             viewBox="0 0 24 24"
                             width="1rem"
@@ -750,26 +776,28 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
                   </div>
                 </div>
               </div>
-              <div>
+              <div
+                class=""
+              >
                 <div
-                  class="c12 c13"
+                  class="c12"
                 >
                   <label
-                    class="c7 c25 c26"
+                    class="c7 c27 c28"
                   >
                     <div
                       class=""
                     >
                       <input
                         aria-label="rememberMe"
-                        class="c27"
+                        class="c29"
                         id="5"
                         name="rememberMe"
                         type="checkbox"
                       />
                     </div>
                     <div
-                      class="c28"
+                      class="c30"
                     >
                       Remember me
                     </div>
@@ -778,11 +806,11 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
               </div>
               <button
                 aria-disabled="false"
-                class="c29 c30 c31 c32"
+                class="c31 c32 c33 c34"
                 type="submit"
               >
                 <span
-                  class="c7 c33"
+                  class="c7 c35"
                 >
                   Login
                 </span>
@@ -791,17 +819,17 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
           </form>
         </div>
         <div
-          class="c34"
+          class="c36"
         >
           <div
-            class="c35"
+            class="c37"
           >
             <a
-              class="c36"
+              class="c38"
               href="/auth/forgot-password"
             >
               <span
-                class="c37"
+                class="c39"
               >
                 Forgot your password?
               </span>
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js b/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js
index 0ed315a3c5..9987872455 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js
@@ -85,16 +85,21 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         padding-bottom: 32px;
       }
 
-      .c34 {
+      .c33 {
         padding-right: 12px;
         padding-left: 8px;
       }
 
-      .c41 {
-        padding-left: 8px;
+      .c34 {
+        background: transparent;
+        border-style: none;
       }
 
       .c43 {
+        padding-left: 8px;
+      }
+
+      .c45 {
         background: #4945ff;
         padding: 8px;
         padding-right: 16px;
@@ -180,9 +185,10 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
+        gap: 4px;
       }
 
-      .c29 {
+      .c28 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -200,7 +206,25 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         justify-content: space-between;
       }
 
-      .c44 {
+      .c35 {
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: unset;
+        -webkit-justify-content: unset;
+        -ms-flex-pack: unset;
+        justify-content: unset;
+      }
+
+      .c46 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -239,47 +263,38 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         color: #666687;
       }
 
-      .c26 {
+      .c25 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #32324d;
       }
 
-      .c27 {
+      .c26 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #d02b20;
       }
 
-      .c37 {
+      .c39 {
         font-size: 0.75rem;
         line-height: 1.33;
         color: #666687;
       }
 
-      .c38 {
+      .c40 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #32324d;
       }
 
-      .c46 {
+      .c48 {
         font-size: 0.875rem;
         line-height: 1.43;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c25 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c25 > * + * {
-        margin-top: 4px;
-      }
-
       .c4 {
         position: relative;
         outline: none;
@@ -329,7 +344,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         border: 2px solid #4945ff;
       }
 
-      .c40 {
+      .c42 {
         height: 18px;
         min-width: 18px;
         margin: 0;
@@ -340,12 +355,12 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         cursor: pointer;
       }
 
-      .c40:checked {
+      .c42:checked {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c40:checked:after {
+      .c42:checked:after {
         content: '';
         display: block;
         position: relative;
@@ -359,21 +374,21 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c40:checked:disabled:after {
+      .c42:checked:disabled:after {
         background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
       }
 
-      .c40:disabled {
+      .c42:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c40:indeterminate {
+      .c42:indeterminate {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c40:indeterminate:after {
+      .c42:indeterminate:after {
         content: '';
         display: block;
         position: relative;
@@ -388,15 +403,27 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c40:indeterminate:disabled {
+      .c42:indeterminate:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c40:indeterminate:disabled:after {
+      .c42:indeterminate:disabled:after {
         background-color: #8e8ea9;
       }
 
+      .c38 {
+        border: 0;
+        -webkit-clip: rect(0 0 0 0);
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+      }
+
       .c5 {
         height: 2rem;
         border: 1px solid transparent;
@@ -447,61 +474,105 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         fill: #8e8ea9;
       }
 
-      .c45 {
+      .c47 {
         height: 2.5rem;
       }
 
-      .c45[aria-disabled='true'] {
+      .c47[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c45[aria-disabled='true'] .c6 {
+      .c47[aria-disabled='true'] .c6 {
         color: #666687;
       }
 
-      .c45[aria-disabled='true'] svg > g,.c45[aria-disabled='true'] svg path {
+      .c47[aria-disabled='true'] svg > g,.c47[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c45[aria-disabled='true']:active {
+      .c47[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c45[aria-disabled='true']:active .c6 {
+      .c47[aria-disabled='true']:active .c6 {
         color: #666687;
       }
 
-      .c45[aria-disabled='true']:active svg > g,.c45[aria-disabled='true']:active svg path {
+      .c47[aria-disabled='true']:active svg > g,.c47[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c45:hover {
+      .c47:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c45:active {
+      .c47:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c45 svg > g,
-      .c45 svg path {
+      .c47 svg > g,
+      .c47 svg path {
         fill: #ffffff;
       }
 
-      .c28 {
+      .c27 {
         line-height: 0;
       }
 
+      .c30 {
+        border: none;
+        border-radius: 4px;
+        padding-bottom: 0.65625rem;
+        padding-left: 16px;
+        padding-right: 16px;
+        padding-top: 0.65625rem;
+        color: #32324d;
+        font-weight: 400;
+        font-size: 0.875rem;
+        display: block;
+        width: 100%;
+        background: inherit;
+      }
+
+      .c30::-webkit-input-placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c30::-moz-placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c30:-ms-input-placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c30::placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c30[aria-disabled='true'] {
+        color: inherit;
+      }
+
+      .c30:focus {
+        outline: none;
+        box-shadow: none;
+      }
+
       .c31 {
         border: none;
         border-radius: 4px;
         padding-bottom: 0.65625rem;
         padding-left: 16px;
-        padding-right: 16px;
+        padding-right: 0;
         padding-top: 0.65625rem;
         color: #32324d;
         font-weight: 400;
@@ -540,51 +611,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         box-shadow: none;
       }
 
-      .c32 {
-        border: none;
-        border-radius: 4px;
-        padding-bottom: 0.65625rem;
-        padding-left: 16px;
-        padding-right: 0;
-        padding-top: 0.65625rem;
-        color: #32324d;
-        font-weight: 400;
-        font-size: 0.875rem;
-        display: block;
-        width: 100%;
-        background: inherit;
-      }
-
-      .c32::-webkit-input-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c32::-moz-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c32:-ms-input-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c32::placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c32[aria-disabled='true'] {
-        color: inherit;
-      }
-
-      .c32:focus {
-        outline: none;
-        box-shadow: none;
-      }
-
-      .c30 {
+      .c29 {
         border: 1px solid #dcdce4;
         border-radius: 4px;
         background: #ffffff;
@@ -596,28 +623,17 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         transition-duration: 0.2s;
       }
 
-      .c30:focus-within {
+      .c29:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c35 {
-        border: none;
-        background: transparent;
+      .c36 {
         font-size: 1.6rem;
-        width: auto;
         padding: 0;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
       }
 
-      .c39 {
+      .c41 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -628,7 +644,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         align-items: flex-start;
       }
 
-      .c39 * {
+      .c41 * {
         cursor: pointer;
       }
 
@@ -678,12 +694,12 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         height: 4.5rem;
       }
 
-      .c36 svg {
+      .c37 svg {
         height: 1rem;
         width: 1rem;
       }
 
-      .c36 svg path {
+      .c37 svg path {
         fill: #666687;
       }
 
@@ -691,11 +707,11 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         text-align: center;
       }
 
-      .c42 {
+      .c44 {
         color: #4945ff;
       }
 
-      .c33::-ms-reveal {
+      .c32::-ms-reveal {
         display: none;
       }
 
@@ -818,12 +834,14 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                         class=""
                       >
                         <div>
-                          <div>
+                          <div
+                            class=""
+                          >
                             <div
-                              class="c24 c25"
+                              class="c24"
                             >
                               <label
-                                class="c6 c26"
+                                class="c6 c25"
                                 for="2"
                               >
                                 <div
@@ -831,20 +849,20 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                                 >
                                   Firstname
                                   <span
-                                    class="c6 c27 c28"
+                                    class="c6 c26 c27"
                                   >
                                     *
                                   </span>
                                 </div>
                               </label>
                               <div
-                                class="c29 c30"
+                                class="c28 c29"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
                                   aria-required="true"
-                                  class="c31"
+                                  class="c30"
                                   id="2"
                                   name="firstname"
                                   value=""
@@ -862,12 +880,14 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                         class=""
                       >
                         <div>
-                          <div>
+                          <div
+                            class=""
+                          >
                             <div
-                              class="c24 c25"
+                              class="c24"
                             >
                               <label
-                                class="c6 c26"
+                                class="c6 c25"
                                 for="4"
                               >
                                 <div
@@ -877,13 +897,13 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                                 </div>
                               </label>
                               <div
-                                class="c29 c30"
+                                class="c28 c29"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
                                   aria-required="false"
-                                  class="c31"
+                                  class="c30"
                                   id="4"
                                   name="lastname"
                                   value=""
@@ -896,12 +916,14 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                     </div>
                   </div>
                   <div>
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c24 c25"
+                        class="c24"
                       >
                         <label
-                          class="c6 c26"
+                          class="c6 c25"
                           for="6"
                         >
                           <div
@@ -909,20 +931,20 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                           >
                             Email
                             <span
-                              class="c6 c27 c28"
+                              class="c6 c26 c27"
                             >
                               *
                             </span>
                           </div>
                         </label>
                         <div
-                          class="c29 c30"
+                          class="c28 c29"
                         >
                           <input
                             aria-disabled="false"
                             aria-invalid="false"
                             aria-required="true"
-                            class="c31"
+                            class="c30"
                             id="6"
                             name="email"
                             type="email"
@@ -933,12 +955,14 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                     </div>
                   </div>
                   <div>
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c24 c25"
+                        class="c24"
                       >
                         <label
-                          class="c6 c26"
+                          class="c6 c25"
                           for="8"
                         >
                           <div
@@ -946,36 +970,42 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                           >
                             Password
                             <span
-                              class="c6 c27 c28"
+                              class="c6 c26 c27"
                             >
                               *
                             </span>
                           </div>
                         </label>
                         <div
-                          class="c29 c30"
+                          class="c28 c29"
                         >
                           <input
                             aria-describedby="8-hint"
                             aria-disabled="false"
                             aria-invalid="false"
                             aria-required="true"
-                            class="c32 c33"
+                            class="c31 c32"
                             id="8"
                             name="password"
                             type="password"
                             value=""
                           />
                           <div
-                            class="c34"
+                            class="c33"
                           >
                             <button
-                              aria-label="Hide password"
-                              class="c35 c36"
+                              class="c34 c35 c36 c37"
                               type="button"
                             >
+                              <span
+                                class="c38"
+                              >
+                                Hide password
+                              </span>
                               <svg
+                                aria-hidden="true"
                                 fill="none"
+                                focusable="false"
                                 height="1rem"
                                 viewBox="0 0 24 24"
                                 width="1rem"
@@ -990,7 +1020,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                           </div>
                         </div>
                         <p
-                          class="c6 c37"
+                          class="c6 c39"
                           id="8-hint"
                         >
                           Must be at least 8 characters, 1 uppercase, 1 lowercase & 1 number
@@ -999,12 +1029,14 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                     </div>
                   </div>
                   <div>
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c24 c25"
+                        class="c24"
                       >
                         <label
-                          class="c6 c26"
+                          class="c6 c25"
                           for="10"
                         >
                           <div
@@ -1012,35 +1044,41 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                           >
                             Confirm Password
                             <span
-                              class="c6 c27 c28"
+                              class="c6 c26 c27"
                             >
                               *
                             </span>
                           </div>
                         </label>
                         <div
-                          class="c29 c30"
+                          class="c28 c29"
                         >
                           <input
                             aria-disabled="false"
                             aria-invalid="false"
                             aria-required="true"
-                            class="c32 c33"
+                            class="c31 c32"
                             id="10"
                             name="confirmPassword"
                             type="password"
                             value=""
                           />
                           <div
-                            class="c34"
+                            class="c33"
                           >
                             <button
-                              aria-label="Hide password"
-                              class="c35 c36"
+                              class="c34 c35 c36 c37"
                               type="button"
                             >
+                              <span
+                                class="c38"
+                              >
+                                Hide password
+                              </span>
                               <svg
+                                aria-hidden="true"
                                 fill="none"
+                                focusable="false"
                                 height="1rem"
                                 viewBox="0 0 24 24"
                                 width="1rem"
@@ -1057,30 +1095,32 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                       </div>
                     </div>
                   </div>
-                  <div>
+                  <div
+                    class=""
+                  >
                     <div
-                      class="c24 c25"
+                      class="c24"
                     >
                       <label
-                        class="c6 c38 c39"
+                        class="c6 c40 c41"
                       >
                         <div
                           class=""
                         >
                           <input
                             aria-label="news"
-                            class="c40"
+                            class="c42"
                             id="12"
                             name="news"
                             type="checkbox"
                           />
                         </div>
                         <div
-                          class="c41"
+                          class="c43"
                         >
                           Keep me updated about new features & upcoming improvements (by doing this you accept the 
                           <a
-                            class="c42"
+                            class="c44"
                             href="https://strapi.io/terms"
                             rel="noreferrer"
                             target="_blank"
@@ -1089,7 +1129,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                           </a>
                            and the 
                           <a
-                            class="c42"
+                            class="c44"
                             href="https://strapi.io/privacy"
                             rel="noreferrer"
                             target="_blank"
@@ -1103,11 +1143,11 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                   </div>
                   <button
                     aria-disabled="false"
-                    class="c43 c44 c4 c45"
+                    class="c45 c46 c4 c47"
                     type="submit"
                   >
                     <span
-                      class="c6 c46"
+                      class="c6 c48"
                     >
                       Let's start
                     </span>
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js b/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js
index a067d502e1..ef737cb579 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js
@@ -72,12 +72,17 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         padding-bottom: 32px;
       }
 
-      .c28 {
+      .c27 {
         padding-right: 12px;
         padding-left: 8px;
       }
 
-      .c34 {
+      .c28 {
+        background: transparent;
+        border-style: none;
+      }
+
+      .c36 {
         padding-top: 16px;
       }
 
@@ -155,9 +160,10 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
+        gap: 4px;
       }
 
-      .c24 {
+      .c23 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -175,7 +181,25 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         justify-content: space-between;
       }
 
-      .c33 {
+      .c29 {
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: unset;
+        -webkit-justify-content: unset;
+        -ms-flex-pack: unset;
+        justify-content: unset;
+      }
+
+      .c35 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -207,34 +231,25 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         color: #32324d;
       }
 
-      .c21 {
+      .c20 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #32324d;
       }
 
-      .c22 {
+      .c21 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #d02b20;
       }
 
-      .c31 {
+      .c33 {
         font-size: 0.75rem;
         line-height: 1.33;
         color: #666687;
       }
 
-      .c20 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c20 > * + * {
-        margin-top: 4px;
-      }
-
       .c4 {
         position: relative;
         outline: none;
@@ -284,6 +299,18 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         border: 2px solid #4945ff;
       }
 
+      .c32 {
+        border: 0;
+        -webkit-clip: rect(0 0 0 0);
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+      }
+
       .c5 {
         height: 2rem;
         border: 1px solid transparent;
@@ -334,56 +361,56 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         fill: #8e8ea9;
       }
 
-      .c32 {
+      .c34 {
         height: 2rem;
       }
 
-      .c32[aria-disabled='true'] {
+      .c34[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c32[aria-disabled='true'] .c6 {
+      .c34[aria-disabled='true'] .c6 {
         color: #666687;
       }
 
-      .c32[aria-disabled='true'] svg > g,.c32[aria-disabled='true'] svg path {
+      .c34[aria-disabled='true'] svg > g,.c34[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c32[aria-disabled='true']:active {
+      .c34[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c32[aria-disabled='true']:active .c6 {
+      .c34[aria-disabled='true']:active .c6 {
         color: #666687;
       }
 
-      .c32[aria-disabled='true']:active svg > g,.c32[aria-disabled='true']:active svg path {
+      .c34[aria-disabled='true']:active svg > g,.c34[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c32:hover {
+      .c34:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c32:active {
+      .c34:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c32 svg > g,
-      .c32 svg path {
+      .c34 svg > g,
+      .c34 svg path {
         fill: #ffffff;
       }
 
-      .c23 {
+      .c22 {
         line-height: 0;
       }
 
-      .c26 {
+      .c25 {
         border: none;
         border-radius: 4px;
         padding-bottom: 0.65625rem;
@@ -398,36 +425,36 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         background: inherit;
       }
 
-      .c26::-webkit-input-placeholder {
+      .c25::-webkit-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c26::-moz-placeholder {
+      .c25::-moz-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c26:-ms-input-placeholder {
+      .c25:-ms-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c26::placeholder {
+      .c25::placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c26[aria-disabled='true'] {
+      .c25[aria-disabled='true'] {
         color: inherit;
       }
 
-      .c26:focus {
+      .c25:focus {
         outline: none;
         box-shadow: none;
       }
 
-      .c25 {
+      .c24 {
         border: 1px solid #dcdce4;
         border-radius: 4px;
         background: #ffffff;
@@ -439,25 +466,14 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         transition-duration: 0.2s;
       }
 
-      .c25:focus-within {
+      .c24:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c29 {
-        border: none;
-        background: transparent;
+      .c30 {
         font-size: 1.6rem;
-        width: auto;
         padding: 0;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
       }
 
       .c9 {
@@ -480,13 +496,13 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         outline: none;
       }
 
-      .c36 {
+      .c38 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #4945ff;
       }
 
-      .c35 {
+      .c37 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -501,15 +517,15 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         outline: none;
       }
 
-      .c35 svg path {
+      .c37 svg path {
         fill: #4945ff;
       }
 
-      .c35 svg {
+      .c37 svg {
         font-size: 0.625rem;
       }
 
-      .c35:after {
+      .c37:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -524,11 +540,11 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         border: 2px solid transparent;
       }
 
-      .c35:focus-visible {
+      .c37:focus-visible {
         outline: none;
       }
 
-      .c35:focus-visible:after {
+      .c37:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -554,16 +570,16 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         height: 4.5rem;
       }
 
-      .c30 svg {
+      .c31 svg {
         height: 1rem;
         width: 1rem;
       }
 
-      .c30 svg path {
+      .c31 svg path {
         fill: #666687;
       }
 
-      .c27::-ms-reveal {
+      .c26::-ms-reveal {
         display: none;
       }
 
@@ -656,12 +672,14 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
                   class="c18"
                 >
                   <div>
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c19 c20"
+                        class="c19"
                       >
                         <label
-                          class="c6 c21"
+                          class="c6 c20"
                           for="2"
                         >
                           <div
@@ -669,36 +687,42 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
                           >
                             Password
                             <span
-                              class="c6 c22 c23"
+                              class="c6 c21 c22"
                             >
                               *
                             </span>
                           </div>
                         </label>
                         <div
-                          class="c24 c25"
+                          class="c23 c24"
                         >
                           <input
                             aria-describedby="2-hint"
                             aria-disabled="false"
                             aria-invalid="false"
                             aria-required="true"
-                            class="c26 c27"
+                            class="c25 c26"
                             id="2"
                             name="password"
                             type="password"
                             value=""
                           />
                           <div
-                            class="c28"
+                            class="c27"
                           >
                             <button
-                              aria-label="Hide password"
-                              class="c29 c30"
+                              class="c28 c29 c30 c31"
                               type="button"
                             >
+                              <span
+                                class="c32"
+                              >
+                                Hide password
+                              </span>
                               <svg
+                                aria-hidden="true"
                                 fill="none"
+                                focusable="false"
                                 height="1rem"
                                 viewBox="0 0 24 24"
                                 width="1rem"
@@ -713,7 +737,7 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
                           </div>
                         </div>
                         <p
-                          class="c6 c31"
+                          class="c6 c33"
                           id="2-hint"
                         >
                           Password must contain at least 8 characters, 1 uppercase, 1 lowercase and 1 number
@@ -722,12 +746,14 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
                     </div>
                   </div>
                   <div>
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c19 c20"
+                        class="c19"
                       >
                         <label
-                          class="c6 c21"
+                          class="c6 c20"
                           for="4"
                         >
                           <div
@@ -735,35 +761,41 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
                           >
                             Confirm Password
                             <span
-                              class="c6 c22 c23"
+                              class="c6 c21 c22"
                             >
                               *
                             </span>
                           </div>
                         </label>
                         <div
-                          class="c24 c25"
+                          class="c23 c24"
                         >
                           <input
                             aria-disabled="false"
                             aria-invalid="false"
                             aria-required="true"
-                            class="c26 c27"
+                            class="c25 c26"
                             id="4"
                             name="confirmPassword"
                             type="password"
                             value=""
                           />
                           <div
-                            class="c28"
+                            class="c27"
                           >
                             <button
-                              aria-label="Hide password"
-                              class="c29 c30"
+                              class="c28 c29 c30 c31"
                               type="button"
                             >
+                              <span
+                                class="c32"
+                              >
+                                Hide password
+                              </span>
                               <svg
+                                aria-hidden="true"
                                 fill="none"
+                                focusable="false"
                                 height="1rem"
                                 viewBox="0 0 24 24"
                                 width="1rem"
@@ -782,7 +814,7 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
                   </div>
                   <button
                     aria-disabled="false"
-                    class="c2 c3 c4 c32"
+                    class="c2 c3 c4 c34"
                     type="submit"
                   >
                     <span
@@ -795,17 +827,17 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
               </form>
             </div>
             <div
-              class="c33"
+              class="c35"
             >
               <div
-                class="c34"
+                class="c36"
               >
                 <a
-                  class="c35"
+                  class="c37"
                   href="/auth/login"
                 >
                   <span
-                    class="c36"
+                    class="c38"
                   >
                     Ready to sign in?
                   </span>
diff --git a/packages/core/admin/admin/src/pages/InternalErrorPage/tests/index.test.js b/packages/core/admin/admin/src/pages/InternalErrorPage/tests/index.test.js
index 856f326a4a..67db4b0593 100644
--- a/packages/core/admin/admin/src/pages/InternalErrorPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/InternalErrorPage/tests/index.test.js
@@ -33,23 +33,27 @@ describe('InternalErrorPage', () => {
         padding-left: 56px;
       }
 
-      .c5 {
+      .c3 {
+        min-width: 0;
+      }
+
+      .c6 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c6 {
+      .c7 {
         background: #ffffff;
         padding: 64px;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c8 {
+      .c9 {
         padding-bottom: 24px;
       }
 
-      .c10 {
+      .c11 {
         padding-bottom: 16px;
       }
 
@@ -71,7 +75,7 @@ describe('InternalErrorPage', () => {
         justify-content: space-between;
       }
 
-      .c3 {
+      .c4 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -85,21 +89,21 @@ describe('InternalErrorPage', () => {
         flex-direction: row;
       }
 
-      .c4 {
+      .c5 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c11 {
+      .c12 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
         color: #666687;
       }
 
-      .c7 {
+      .c8 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -114,7 +118,7 @@ describe('InternalErrorPage', () => {
         text-align: center;
       }
 
-      .c9 svg {
+      .c10 svg {
         height: 5.5rem;
       }
 
@@ -122,7 +126,7 @@ describe('InternalErrorPage', () => {
         outline: none;
       }
 
-      .c12 {
+      .c13 {
         background: #4945ff;
         padding-top: 8px;
         padding-right: 16px;
@@ -133,14 +137,14 @@ describe('InternalErrorPage', () => {
         border: 1px solid #4945ff;
       }
 
-      .c17 {
+      .c18 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c13 {
+      .c14 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -155,7 +159,7 @@ describe('InternalErrorPage', () => {
         gap: 8px;
       }
 
-      .c18 {
+      .c19 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -169,26 +173,26 @@ describe('InternalErrorPage', () => {
         flex-direction: row;
       }
 
-      .c14 {
+      .c15 {
         position: relative;
         outline: none;
       }
 
-      .c14 svg {
+      .c15 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c14 svg > g,
-      .c14 svg path {
+      .c15 svg > g,
+      .c15 svg path {
         fill: #ffffff;
       }
 
-      .c14[aria-disabled='true'] {
+      .c15[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c14:after {
+      .c15:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -203,11 +207,11 @@ describe('InternalErrorPage', () => {
         border: 2px solid transparent;
       }
 
-      .c14:focus-visible {
+      .c15:focus-visible {
         outline: none;
       }
 
-      .c14:focus-visible:after {
+      .c15:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -218,63 +222,63 @@ describe('InternalErrorPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c15 {
+      .c16 {
         -webkit-text-decoration: none;
         text-decoration: none;
         border: 1px solid #d9d8ff;
         background: #f0f0ff;
       }
 
-      .c15[aria-disabled='true'] {
+      .c16[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c15[aria-disabled='true'] .c16 {
+      .c16[aria-disabled='true'] .c17 {
         color: #666687;
       }
 
-      .c15[aria-disabled='true'] svg > g,.c15[aria-disabled='true'] svg path {
+      .c16[aria-disabled='true'] svg > g,.c16[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c15[aria-disabled='true']:active {
+      .c16[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c15[aria-disabled='true']:active .c16 {
+      .c16[aria-disabled='true']:active .c17 {
         color: #666687;
       }
 
-      .c15[aria-disabled='true']:active svg > g,.c15[aria-disabled='true']:active svg path {
+      .c16[aria-disabled='true']:active svg > g,.c16[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c15:hover {
+      .c16:hover {
         background-color: #ffffff;
       }
 
-      .c15:active {
+      .c16:active {
         background-color: #ffffff;
         border: 1px solid #4945ff;
       }
 
-      .c15:active .c16 {
+      .c16:active .c17 {
         color: #4945ff;
       }
 
-      .c15:active svg > g,
-      .c15:active svg path {
+      .c16:active svg > g,
+      .c16:active svg path {
         fill: #4945ff;
       }
 
-      .c15 .c16 {
+      .c16 .c17 {
         color: #271fe0;
       }
 
-      .c15 svg > g,
-      .c15 svg path {
+      .c16 svg > g,
+      .c16 svg path {
         fill: #271fe0;
       }
 
@@ -295,10 +299,10 @@ describe('InternalErrorPage', () => {
               class="c2"
             >
               <div
-                class="c3"
+                class="c3 c4"
               >
                 <h1
-                  class="c4"
+                  class="c5"
                   id="title"
                 >
                   Page not found
@@ -308,14 +312,14 @@ describe('InternalErrorPage', () => {
           </div>
         </div>
         <div
-          class="c5"
+          class="c6"
         >
           <div
-            class="c6 c7"
+            class="c7 c8"
           >
             <div
               aria-hidden="true"
-              class="c8 c9"
+              class="c9 c10"
             >
               <svg
                 fill="none"
@@ -394,10 +398,10 @@ describe('InternalErrorPage', () => {
               </svg>
             </div>
             <div
-              class="c10"
+              class="c11"
             >
               <p
-                class="c11"
+                class="c12"
               >
                 An error occured
               </p>
@@ -405,17 +409,17 @@ describe('InternalErrorPage', () => {
             <a
               aria-current="page"
               aria-disabled="false"
-              class="c12 c13 c14 c15 active"
+              class="c13 c14 c15 c16 active"
               href="/"
             >
               <span
-                class="c16 c17"
+                class="c17 c18"
               >
                 Back to homepage
               </span>
               <div
                 aria-hidden="true"
-                class="c18"
+                class="c19"
               >
                 <svg
                   fill="none"
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap
index 83649985c7..04322633e5 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap
@@ -13,26 +13,30 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   padding-left: 56px;
 }
 
-.c18 {
+.c6 {
+  min-width: 0;
+}
+
+.c19 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c19 {
+.c20 {
   padding-bottom: 16px;
   width: 25%;
 }
 
-.c25 {
+.c26 {
   padding-right: 8px;
   padding-left: 12px;
 }
 
-.c29 {
+.c30 {
   padding-bottom: 16px;
 }
 
-.c31 {
+.c32 {
   padding: 16px;
 }
 
@@ -166,7 +170,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   justify-content: space-between;
 }
 
-.c6 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -180,7 +184,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   flex-direction: row;
 }
 
-.c36 {
+.c37 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -195,7 +199,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   gap: 8px;
 }
 
-.c38 {
+.c39 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -260,27 +264,27 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   gap: 4px;
 }
 
-.c8 {
+.c9 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c17 {
+.c18 {
   font-size: 1rem;
   line-height: 1.5;
   color: #666687;
 }
 
-.c22 {
+.c23 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c33 {
+.c34 {
   font-weight: 600;
   font-size: 0.6875rem;
   line-height: 1.45;
@@ -288,7 +292,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   color: #4945ff;
 }
 
-.c35 {
+.c36 {
   font-weight: 600;
   font-size: 0.6875rem;
   line-height: 1.45;
@@ -358,11 +362,6 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   fill: #328048;
 }
 
-.c39 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 .c50 {
   position: relative;
   outline: none;
@@ -412,7 +411,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c21 {
+.c22 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -435,7 +434,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   background: #eaeaef;
 }
 
-.c51[aria-disabled='true'] .c7 {
+.c51[aria-disabled='true'] .c8 {
   color: #666687;
 }
 
@@ -448,7 +447,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   background: #eaeaef;
 }
 
-.c51[aria-disabled='true']:active .c7 {
+.c51[aria-disabled='true']:active .c8 {
   color: #666687;
 }
 
@@ -464,7 +463,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   background-color: #eaeaef;
 }
 
-.c51 .c7 {
+.c51 .c8 {
   color: #32324d;
 }
 
@@ -484,7 +483,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   background: #eaeaef;
 }
 
-.c75[aria-disabled='true'] .c7 {
+.c75[aria-disabled='true'] .c8 {
   color: #666687;
 }
 
@@ -497,7 +496,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   background: #eaeaef;
 }
 
-.c75[aria-disabled='true']:active .c7 {
+.c75[aria-disabled='true']:active .c8 {
   color: #666687;
 }
 
@@ -514,7 +513,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c75:active .c7 {
+.c75:active .c8 {
   color: #4945ff;
 }
 
@@ -523,7 +522,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   fill: #4945ff;
 }
 
-.c75 .c7 {
+.c75 .c8 {
   color: #271fe0;
 }
 
@@ -532,7 +531,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   fill: #271fe0;
 }
 
-.c28 {
+.c29 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -547,36 +546,36 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   background: inherit;
 }
 
-.c28::-webkit-input-placeholder {
+.c29::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c28::-moz-placeholder {
+.c29::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c28:-ms-input-placeholder {
+.c29:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c28::placeholder {
+.c29::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c28[aria-disabled='true'] {
+.c29[aria-disabled='true'] {
   color: inherit;
 }
 
-.c28:focus {
+.c29:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c24 {
+.c25 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -588,7 +587,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   transition-duration: 0.2s;
 }
 
-.c24:focus-within {
+.c25:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
@@ -698,15 +697,15 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   outline: none;
 }
 
-.c27 {
+.c28 {
   font-size: 0.8rem;
 }
 
-.c27 svg path {
+.c28 svg path {
   fill: #32324d;
 }
 
-.c20 {
+.c21 {
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
   outline: none;
@@ -717,28 +716,28 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   transition-duration: 0.2s;
 }
 
-.c20:focus-within .c26 svg path {
+.c21:focus-within .c27 svg path {
   fill: #4945ff;
 }
 
-.c20 .c23 {
+.c21 .c24 {
   border: 1px solid transparent;
 }
 
-.c20 .c23:focus-within {
+.c21 .c24:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c32 {
+.c33 {
   border-bottom: 2px solid #4945ff;
 }
 
-.c34 {
+.c35 {
   border-bottom: 2px solid transparent;
 }
 
-.c30[aria-disabled='true'] {
+.c31[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
@@ -755,7 +754,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   word-break: break-all;
 }
 
-.c10 {
+.c11 {
   background: #4945ff;
   padding-top: 8px;
   padding-right: 16px;
@@ -766,14 +765,14 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c16 {
+.c17 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c11 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -788,7 +787,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   gap: 8px;
 }
 
-.c14 {
+.c15 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -802,30 +801,30 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   flex-direction: row;
 }
 
-.c9 {
+.c10 {
   cursor: pointer;
 }
 
-.c12 {
+.c13 {
   position: relative;
   outline: none;
 }
 
-.c12 svg {
+.c13 svg {
   height: 12px;
   width: 12px;
 }
 
-.c12 svg > g,
-.c12 svg path {
+.c13 svg > g,
+.c13 svg path {
   fill: #ffffff;
 }
 
-.c12[aria-disabled='true'] {
+.c13[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c12:after {
+.c13:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -840,11 +839,11 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   border: 2px solid transparent;
 }
 
-.c12:focus-visible {
+.c13:focus-visible {
   outline: none;
 }
 
-.c12:focus-visible:after {
+.c13:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -855,53 +854,53 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c13 {
+.c14 {
   -webkit-text-decoration: none;
   text-decoration: none;
   border: 1px solid #dcdce4;
   background: #ffffff;
 }
 
-.c13[aria-disabled='true'] {
+.c14[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c13[aria-disabled='true'] .c15 {
+.c14[aria-disabled='true'] .c16 {
   color: #666687;
 }
 
-.c13[aria-disabled='true'] svg > g,.c13[aria-disabled='true'] svg path {
+.c14[aria-disabled='true'] svg > g,.c14[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c13[aria-disabled='true']:active {
+.c14[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c13[aria-disabled='true']:active .c15 {
+.c14[aria-disabled='true']:active .c16 {
   color: #666687;
 }
 
-.c13[aria-disabled='true']:active svg > g,.c13[aria-disabled='true']:active svg path {
+.c14[aria-disabled='true']:active svg > g,.c14[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c13:hover {
+.c14:hover {
   background-color: #f6f6f9;
 }
 
-.c13:active {
+.c14:active {
   background-color: #eaeaef;
 }
 
-.c13 .c15 {
+.c14 .c16 {
   color: #32324d;
 }
 
-.c13 svg > g,
-.c13 svg path {
+.c14 svg > g,
+.c14 svg path {
   fill: #32324d;
 }
 
@@ -918,11 +917,11 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
   overflow: hidden;
 }
 
-.c37 {
+.c38 {
   font-weight: 500;
 }
 
-.c37 span {
+.c38 span {
   font-size: 0.75rem;
 }
 
@@ -965,23 +964,23 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
             class="c5"
           >
             <div
-              class="c6"
+              class="c6 c7"
             >
               <h1
-                class="c7 c8"
+                class="c8 c9"
               >
                 Marketplace
               </h1>
             </div>
             <a
               aria-disabled="false"
-              class="c9 c10 c11 c12 c13"
+              class="c10 c11 c12 c13 c14"
               href="https://market.strapi.io/submit-plugin"
               target="_self"
             >
               <div
                 aria-hidden="true"
-                class="c14"
+                class="c15"
               >
                 <svg
                   fill="none"
@@ -999,51 +998,53 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                 </svg>
               </div>
               <span
-                class="c15 c16"
+                class="c16 c17"
               >
                 Submit plugin
               </span>
             </a>
           </div>
           <p
-            class="c7 c17"
+            class="c8 c18"
           >
             Get more out of Strapi
           </p>
         </div>
       </div>
       <div
-        class="c18"
+        class="c19"
       >
         <div
-          class="c19"
+          class="c20"
         >
           <div
-            class="c20"
+            class="c21"
           >
-            <div>
+            <div
+              class=""
+            >
               <div
-                class="c21"
+                class="c22"
               >
                 <label
-                  class="c7 c22"
+                  class="c8 c23"
                   for="0"
                 >
                   <div
-                    class="c6"
+                    class="c7"
                   >
                     Search
                   </div>
                 </label>
               </div>
               <div
-                class="c23 c5 c24"
+                class="c24 c5 c25"
               >
                 <div
-                  class="c25"
+                  class="c26"
                 >
                   <div
-                    class="c26 c6 c27"
+                    class="c27 c7 c28"
                   >
                     <svg
                       aria-hidden="true"
@@ -1066,7 +1067,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                   aria-disabled="false"
                   aria-invalid="false"
                   aria-required="false"
-                  class="c28"
+                  class="c29"
                   id="0"
                   name="searchbar"
                   placeholder="Search"
@@ -1078,7 +1079,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
         </div>
         <div>
           <div
-            class="c29"
+            class="c30"
           >
             <div
               aria-label="Plugins and Providers for Strapi"
@@ -1088,17 +1089,17 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                 aria-controls="tabs-0-tabpanel"
                 aria-disabled="false"
                 aria-selected="true"
-                class="c30"
+                class="c31"
                 id="tabs-0-tab"
                 role="tab"
                 tabindex="0"
                 type="button"
               >
                 <div
-                  class="c31 c32"
+                  class="c32 c33"
                 >
                   <span
-                    class="c7 c33"
+                    class="c8 c34"
                   >
                     Plugins
                      
@@ -1111,17 +1112,17 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
               <button
                 aria-disabled="false"
                 aria-selected="false"
-                class="c30"
+                class="c31"
                 id="tabs-1-tab"
                 role="tab"
                 tabindex="-1"
                 type="button"
               >
                 <div
-                  class="c31 c34"
+                  class="c32 c35"
                 >
                   <span
-                    class="c7 c35"
+                    class="c8 c36"
                   >
                     Providers
                      
@@ -1134,17 +1135,19 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
             </div>
           </div>
           <div
-            class="c29 c36"
+            class="c30 c37"
           >
             <div
-              class="c37"
+              class="c38"
             >
-              <div>
+              <div
+                class=""
+              >
                 <div
-                  class="c38 c39"
+                  class="c39"
                 >
                   <div
-                    class="c6 c40"
+                    class="c7 c40"
                   >
                     <button
                       aria-disabled="false"
@@ -1159,13 +1162,13 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                       class="c5 c42"
                     >
                       <div
-                        class="c6"
+                        class="c7"
                       >
                         <div
                           class="c43"
                         >
                           <span
-                            class="c7 c44"
+                            class="c8 c44"
                             id="sort-by-select-content"
                           >
                             Sort by alphabetical order
@@ -1173,7 +1176,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c6"
+                        class="c7"
                       >
                         <button
                           aria-hidden="true"
@@ -1208,7 +1211,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
             >
               <button
                 aria-disabled="false"
-                class="c49 c36 c50 c51 c52"
+                class="c49 c37 c50 c51 c52"
                 data-testid="filters-button"
                 type="button"
               >
@@ -1232,7 +1235,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                   </svg>
                 </div>
                 <span
-                  class="c7 c53"
+                  class="c8 c53"
                 >
                   Filters
                 </span>
@@ -1306,7 +1309,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                               aria-label="This plugin was starred 323 on GitHub"
                             >
                               <span
-                                class="c7 c65"
+                                class="c8 c65"
                               >
                                 323
                               </span>
@@ -1334,7 +1337,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                               aria-label="This plugin has 1123 weekly downloads"
                             >
                               <span
-                                class="c7 c65"
+                                class="c8 c65"
                               >
                                 1123
                               </span>
@@ -1345,10 +1348,10 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                           class="c69"
                         >
                           <h3
-                            class="c7 c70"
+                            class="c8 c70"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Comments
                             </div>
@@ -1358,31 +1361,31 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                           class="c71"
                         >
                           <p
-                            class="c7 c72 c73"
+                            class="c8 c72 c73"
                           >
                             Powerful Strapi based comments moderation tool for you and your users
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c74 c36"
+                        class="c74 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Comments"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/plugins/strapi-plugin-comments"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -1400,7 +1403,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c49 c36 c50 c75"
+                          class="c49 c37 c50 c75"
                           type="button"
                         >
                           <div
@@ -1425,7 +1428,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                             </svg>
                           </div>
                           <span
-                            class="c7 c53"
+                            class="c8 c53"
                           >
                             Copy install command
                           </span>
@@ -1479,7 +1482,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                               aria-label="This plugin has 0 weekly downloads"
                             >
                               <span
-                                class="c7 c65"
+                                class="c8 c65"
                               >
                                 0
                               </span>
@@ -1490,16 +1493,16 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                           class="c69"
                         >
                           <h3
-                            class="c7 c70"
+                            class="c8 c70"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Config Sync
                               <span>
                                 <div
                                   aria-describedby="1"
-                                  class="c6"
+                                  class="c7"
                                   tabindex="0"
                                 >
                                   <svg
@@ -1526,31 +1529,31 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                           class="c71"
                         >
                           <p
-                            class="c7 c72 c73"
+                            class="c8 c72 c73"
                           >
                             Migrate your config data across environments using the CLI or Strapi admin panel.
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c74 c36"
+                        class="c74 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Config Sync"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/plugins/strapi-plugin-config-sync"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -1574,7 +1577,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                           >
                             <button
                               aria-disabled="false"
-                              class="c49 c36 c50 c75"
+                              class="c49 c37 c50 c75"
                               type="button"
                             >
                               <div
@@ -1599,7 +1602,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                                 </svg>
                               </div>
                               <span
-                                class="c7 c53"
+                                class="c8 c53"
                               >
                                 Copy install command
                               </span>
@@ -1655,7 +1658,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                               aria-label="This plugin has 0 weekly downloads"
                             >
                               <span
-                                class="c7 c65"
+                                class="c8 c65"
                               >
                                 0
                               </span>
@@ -1666,10 +1669,10 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                           class="c69"
                         >
                           <h3
-                            class="c7 c70"
+                            class="c8 c70"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Content Versioning
                             </div>
@@ -1679,31 +1682,31 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                           class="c71"
                         >
                           <p
-                            class="c7 c72 c73"
+                            class="c8 c72 c73"
                           >
                             This plugin enables you to versioning Content Types. It allows multiple draft versions✅ Keeps history of all changes (with time travel) ✅ 
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c74 c36"
+                        class="c74 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Content Versioning"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/plugins/@notum-cz-strapi-plugin-content-versioning"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -1727,7 +1730,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                           >
                             <button
                               aria-disabled="true"
-                              class="c49 c36 c50 c75"
+                              class="c49 c37 c50 c75"
                               disabled=""
                               type="button"
                             >
@@ -1753,7 +1756,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                                 </svg>
                               </div>
                               <span
-                                class="c7 c53"
+                                class="c8 c53"
                               >
                                 Copy install command
                               </span>
@@ -1821,7 +1824,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                               aria-label="This plugin was starred 49130 on GitHub"
                             >
                               <span
-                                class="c7 c65"
+                                class="c8 c65"
                               >
                                 49130
                               </span>
@@ -1849,7 +1852,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                               aria-label="This plugin has 7492 weekly downloads"
                             >
                               <span
-                                class="c7 c65"
+                                class="c8 c65"
                               >
                                 7492
                               </span>
@@ -1860,16 +1863,16 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                           class="c69"
                         >
                           <h3
-                            class="c7 c70"
+                            class="c8 c70"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Documentation
                               <span>
                                 <div
                                   aria-describedby="4"
-                                  class="c6"
+                                  class="c7"
                                   tabindex="0"
                                 >
                                   <img
@@ -1886,31 +1889,31 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                           class="c71"
                         >
                           <p
-                            class="c7 c72 c73"
+                            class="c8 c72 c73"
                           >
                             Create an OpenAPI Document and visualize your API with SWAGGER UI
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c74 c36"
+                        class="c74 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Documentation"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/plugins/@strapi-plugin-documentation"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -1943,7 +1946,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                             />
                           </svg>
                           <span
-                            class="c7 c81"
+                            class="c8 c81"
                           >
                             Installed
                           </span>
@@ -1997,7 +2000,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                               aria-label="This plugin has 0 weekly downloads"
                             >
                               <span
-                                class="c7 c65"
+                                class="c8 c65"
                               >
                                 0
                               </span>
@@ -2008,10 +2011,10 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                           class="c69"
                         >
                           <h3
-                            class="c7 c70"
+                            class="c8 c70"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Transformer
                             </div>
@@ -2021,31 +2024,31 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                           class="c71"
                         >
                           <p
-                            class="c7 c72 c73"
+                            class="c8 c72 c73"
                           >
                             A plugin for Strapi Headless CMS that provides the ability to transform the API response. 
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c74 c36"
+                        class="c74 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Transformer"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/plugins/strapi-plugin-transformer"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -2069,7 +2072,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                           >
                             <button
                               aria-disabled="true"
-                              class="c49 c36 c50 c75"
+                              class="c49 c37 c50 c75"
                               disabled=""
                               type="button"
                             >
@@ -2095,7 +2098,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                                 </svg>
                               </div>
                               <span
-                                class="c7 c53"
+                                class="c8 c53"
                               >
                                 Copy install command
                               </span>
@@ -2120,10 +2123,10 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
             target="_blank"
           >
             <div
-              class="c83 c6"
+              class="c83 c7"
             >
               <div
-                class="c84 c6 c85"
+                class="c84 c7 c85"
               >
                 <svg
                   fill="none"
@@ -2145,13 +2148,13 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                 </svg>
               </div>
               <div
-                class="c38"
+                class="c39"
               >
                 <div
-                  class="c6"
+                  class="c7"
                 >
                   <span
-                    class="c7 c86 c87"
+                    class="c8 c86 c87"
                   >
                     Documentation
                   </span>
@@ -2170,7 +2173,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                   </svg>
                 </div>
                 <span
-                  class="c7 c72"
+                  class="c8 c72"
                 >
                   Tell us what plugin you are looking for and we'll let our community plugin developers know in case they are in search for inspiration!
                 </span>
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/plugins.test.js.snap b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/plugins.test.js.snap
index bc668038f2..51b1de623b 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/plugins.test.js.snap
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/plugins.test.js.snap
@@ -13,26 +13,30 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   padding-left: 56px;
 }
 
-.c18 {
+.c6 {
+  min-width: 0;
+}
+
+.c19 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c19 {
+.c20 {
   padding-bottom: 16px;
   width: 25%;
 }
 
-.c25 {
+.c26 {
   padding-right: 8px;
   padding-left: 12px;
 }
 
-.c29 {
+.c30 {
   padding-bottom: 16px;
 }
 
-.c31 {
+.c32 {
   padding: 16px;
 }
 
@@ -166,7 +170,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   justify-content: space-between;
 }
 
-.c6 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -180,7 +184,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   flex-direction: row;
 }
 
-.c36 {
+.c37 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -195,7 +199,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   gap: 8px;
 }
 
-.c38 {
+.c39 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -260,27 +264,27 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   gap: 4px;
 }
 
-.c8 {
+.c9 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c17 {
+.c18 {
   font-size: 1rem;
   line-height: 1.5;
   color: #666687;
 }
 
-.c22 {
+.c23 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c33 {
+.c34 {
   font-weight: 600;
   font-size: 0.6875rem;
   line-height: 1.45;
@@ -288,7 +292,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   color: #4945ff;
 }
 
-.c35 {
+.c36 {
   font-weight: 600;
   font-size: 0.6875rem;
   line-height: 1.45;
@@ -358,11 +362,6 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   fill: #328048;
 }
 
-.c39 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 .c50 {
   position: relative;
   outline: none;
@@ -412,7 +411,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   border: 2px solid #4945ff;
 }
 
-.c21 {
+.c22 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -435,7 +434,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   background: #eaeaef;
 }
 
-.c51[aria-disabled='true'] .c7 {
+.c51[aria-disabled='true'] .c8 {
   color: #666687;
 }
 
@@ -448,7 +447,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   background: #eaeaef;
 }
 
-.c51[aria-disabled='true']:active .c7 {
+.c51[aria-disabled='true']:active .c8 {
   color: #666687;
 }
 
@@ -464,7 +463,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   background-color: #eaeaef;
 }
 
-.c51 .c7 {
+.c51 .c8 {
   color: #32324d;
 }
 
@@ -484,7 +483,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   background: #eaeaef;
 }
 
-.c75[aria-disabled='true'] .c7 {
+.c75[aria-disabled='true'] .c8 {
   color: #666687;
 }
 
@@ -497,7 +496,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   background: #eaeaef;
 }
 
-.c75[aria-disabled='true']:active .c7 {
+.c75[aria-disabled='true']:active .c8 {
   color: #666687;
 }
 
@@ -514,7 +513,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   border: 1px solid #4945ff;
 }
 
-.c75:active .c7 {
+.c75:active .c8 {
   color: #4945ff;
 }
 
@@ -523,7 +522,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   fill: #4945ff;
 }
 
-.c75 .c7 {
+.c75 .c8 {
   color: #271fe0;
 }
 
@@ -532,7 +531,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   fill: #271fe0;
 }
 
-.c28 {
+.c29 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -547,36 +546,36 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   background: inherit;
 }
 
-.c28::-webkit-input-placeholder {
+.c29::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c28::-moz-placeholder {
+.c29::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c28:-ms-input-placeholder {
+.c29:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c28::placeholder {
+.c29::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c28[aria-disabled='true'] {
+.c29[aria-disabled='true'] {
   color: inherit;
 }
 
-.c28:focus {
+.c29:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c24 {
+.c25 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -588,7 +587,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   transition-duration: 0.2s;
 }
 
-.c24:focus-within {
+.c25:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
@@ -698,15 +697,15 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   outline: none;
 }
 
-.c27 {
+.c28 {
   font-size: 0.8rem;
 }
 
-.c27 svg path {
+.c28 svg path {
   fill: #32324d;
 }
 
-.c20 {
+.c21 {
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
   outline: none;
@@ -717,28 +716,28 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   transition-duration: 0.2s;
 }
 
-.c20:focus-within .c26 svg path {
+.c21:focus-within .c27 svg path {
   fill: #4945ff;
 }
 
-.c20 .c23 {
+.c21 .c24 {
   border: 1px solid transparent;
 }
 
-.c20 .c23:focus-within {
+.c21 .c24:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c32 {
+.c33 {
   border-bottom: 2px solid #4945ff;
 }
 
-.c34 {
+.c35 {
   border-bottom: 2px solid transparent;
 }
 
-.c30[aria-disabled='true'] {
+.c31[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
@@ -755,7 +754,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   word-break: break-all;
 }
 
-.c10 {
+.c11 {
   background: #4945ff;
   padding-top: 8px;
   padding-right: 16px;
@@ -766,14 +765,14 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   border: 1px solid #4945ff;
 }
 
-.c16 {
+.c17 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c11 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -788,7 +787,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   gap: 8px;
 }
 
-.c14 {
+.c15 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -802,30 +801,30 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   flex-direction: row;
 }
 
-.c9 {
+.c10 {
   cursor: pointer;
 }
 
-.c12 {
+.c13 {
   position: relative;
   outline: none;
 }
 
-.c12 svg {
+.c13 svg {
   height: 12px;
   width: 12px;
 }
 
-.c12 svg > g,
-.c12 svg path {
+.c13 svg > g,
+.c13 svg path {
   fill: #ffffff;
 }
 
-.c12[aria-disabled='true'] {
+.c13[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c12:after {
+.c13:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -840,11 +839,11 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   border: 2px solid transparent;
 }
 
-.c12:focus-visible {
+.c13:focus-visible {
   outline: none;
 }
 
-.c12:focus-visible:after {
+.c13:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -855,53 +854,53 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   border: 2px solid #4945ff;
 }
 
-.c13 {
+.c14 {
   -webkit-text-decoration: none;
   text-decoration: none;
   border: 1px solid #dcdce4;
   background: #ffffff;
 }
 
-.c13[aria-disabled='true'] {
+.c14[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c13[aria-disabled='true'] .c15 {
+.c14[aria-disabled='true'] .c16 {
   color: #666687;
 }
 
-.c13[aria-disabled='true'] svg > g,.c13[aria-disabled='true'] svg path {
+.c14[aria-disabled='true'] svg > g,.c14[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c13[aria-disabled='true']:active {
+.c14[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c13[aria-disabled='true']:active .c15 {
+.c14[aria-disabled='true']:active .c16 {
   color: #666687;
 }
 
-.c13[aria-disabled='true']:active svg > g,.c13[aria-disabled='true']:active svg path {
+.c14[aria-disabled='true']:active svg > g,.c14[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c13:hover {
+.c14:hover {
   background-color: #f6f6f9;
 }
 
-.c13:active {
+.c14:active {
   background-color: #eaeaef;
 }
 
-.c13 .c15 {
+.c14 .c16 {
   color: #32324d;
 }
 
-.c13 svg > g,
-.c13 svg path {
+.c14 svg > g,
+.c14 svg path {
   fill: #32324d;
 }
 
@@ -918,11 +917,11 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
   overflow: hidden;
 }
 
-.c37 {
+.c38 {
   font-weight: 500;
 }
 
-.c37 span {
+.c38 span {
   font-size: 0.75rem;
 }
 
@@ -965,23 +964,23 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
             class="c5"
           >
             <div
-              class="c6"
+              class="c6 c7"
             >
               <h1
-                class="c7 c8"
+                class="c8 c9"
               >
                 Marketplace
               </h1>
             </div>
             <a
               aria-disabled="false"
-              class="c9 c10 c11 c12 c13"
+              class="c10 c11 c12 c13 c14"
               href="https://market.strapi.io/submit-plugin"
               target="_self"
             >
               <div
                 aria-hidden="true"
-                class="c14"
+                class="c15"
               >
                 <svg
                   fill="none"
@@ -999,51 +998,53 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                 </svg>
               </div>
               <span
-                class="c15 c16"
+                class="c16 c17"
               >
                 Submit plugin
               </span>
             </a>
           </div>
           <p
-            class="c7 c17"
+            class="c8 c18"
           >
             Get more out of Strapi
           </p>
         </div>
       </div>
       <div
-        class="c18"
+        class="c19"
       >
         <div
-          class="c19"
+          class="c20"
         >
           <div
-            class="c20"
+            class="c21"
           >
-            <div>
+            <div
+              class=""
+            >
               <div
-                class="c21"
+                class="c22"
               >
                 <label
-                  class="c7 c22"
+                  class="c8 c23"
                   for="0"
                 >
                   <div
-                    class="c6"
+                    class="c7"
                   >
                     Search
                   </div>
                 </label>
               </div>
               <div
-                class="c23 c5 c24"
+                class="c24 c5 c25"
               >
                 <div
-                  class="c25"
+                  class="c26"
                 >
                   <div
-                    class="c26 c6 c27"
+                    class="c27 c7 c28"
                   >
                     <svg
                       aria-hidden="true"
@@ -1066,7 +1067,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                   aria-disabled="false"
                   aria-invalid="false"
                   aria-required="false"
-                  class="c28"
+                  class="c29"
                   id="0"
                   name="searchbar"
                   placeholder="Search"
@@ -1078,7 +1079,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
         </div>
         <div>
           <div
-            class="c29"
+            class="c30"
           >
             <div
               aria-label="Plugins and Providers for Strapi"
@@ -1088,17 +1089,17 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                 aria-controls="tabs-0-tabpanel"
                 aria-disabled="false"
                 aria-selected="true"
-                class="c30"
+                class="c31"
                 id="tabs-0-tab"
                 role="tab"
                 tabindex="0"
                 type="button"
               >
                 <div
-                  class="c31 c32"
+                  class="c32 c33"
                 >
                   <span
-                    class="c7 c33"
+                    class="c8 c34"
                   >
                     Plugins
                      
@@ -1111,17 +1112,17 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
               <button
                 aria-disabled="false"
                 aria-selected="false"
-                class="c30"
+                class="c31"
                 id="tabs-1-tab"
                 role="tab"
                 tabindex="-1"
                 type="button"
               >
                 <div
-                  class="c31 c34"
+                  class="c32 c35"
                 >
                   <span
-                    class="c7 c35"
+                    class="c8 c36"
                   >
                     Providers
                      
@@ -1134,17 +1135,19 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
             </div>
           </div>
           <div
-            class="c29 c36"
+            class="c30 c37"
           >
             <div
-              class="c37"
+              class="c38"
             >
-              <div>
+              <div
+                class=""
+              >
                 <div
-                  class="c38 c39"
+                  class="c39"
                 >
                   <div
-                    class="c6 c40"
+                    class="c7 c40"
                   >
                     <button
                       aria-disabled="false"
@@ -1159,13 +1162,13 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                       class="c5 c42"
                     >
                       <div
-                        class="c6"
+                        class="c7"
                       >
                         <div
                           class="c43"
                         >
                           <span
-                            class="c7 c44"
+                            class="c8 c44"
                             id="sort-by-select-content"
                           >
                             Sort by alphabetical order
@@ -1173,7 +1176,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                         </div>
                       </div>
                       <div
-                        class="c6"
+                        class="c7"
                       >
                         <button
                           aria-hidden="true"
@@ -1208,7 +1211,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
             >
               <button
                 aria-disabled="false"
-                class="c49 c36 c50 c51 c52"
+                class="c49 c37 c50 c51 c52"
                 data-testid="filters-button"
                 type="button"
               >
@@ -1232,7 +1235,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                   </svg>
                 </div>
                 <span
-                  class="c7 c53"
+                  class="c8 c53"
                 >
                   Filters
                 </span>
@@ -1306,7 +1309,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                               aria-label="This plugin was starred 323 on GitHub"
                             >
                               <span
-                                class="c7 c65"
+                                class="c8 c65"
                               >
                                 323
                               </span>
@@ -1334,7 +1337,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                               aria-label="This plugin has 1123 weekly downloads"
                             >
                               <span
-                                class="c7 c65"
+                                class="c8 c65"
                               >
                                 1123
                               </span>
@@ -1345,10 +1348,10 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                           class="c69"
                         >
                           <h3
-                            class="c7 c70"
+                            class="c8 c70"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Comments
                             </div>
@@ -1358,31 +1361,31 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                           class="c71"
                         >
                           <p
-                            class="c7 c72 c73"
+                            class="c8 c72 c73"
                           >
                             Powerful Strapi based comments moderation tool for you and your users
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c74 c36"
+                        class="c74 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Comments"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/plugins/strapi-plugin-comments"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -1400,7 +1403,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c49 c36 c50 c75"
+                          class="c49 c37 c50 c75"
                           type="button"
                         >
                           <div
@@ -1425,7 +1428,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                             </svg>
                           </div>
                           <span
-                            class="c7 c53"
+                            class="c8 c53"
                           >
                             Copy install command
                           </span>
@@ -1479,7 +1482,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                               aria-label="This plugin has 0 weekly downloads"
                             >
                               <span
-                                class="c7 c65"
+                                class="c8 c65"
                               >
                                 0
                               </span>
@@ -1490,16 +1493,16 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                           class="c69"
                         >
                           <h3
-                            class="c7 c70"
+                            class="c8 c70"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Config Sync
                               <span>
                                 <div
                                   aria-describedby="1"
-                                  class="c6"
+                                  class="c7"
                                   tabindex="0"
                                 >
                                   <svg
@@ -1526,31 +1529,31 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                           class="c71"
                         >
                           <p
-                            class="c7 c72 c73"
+                            class="c8 c72 c73"
                           >
                             Migrate your config data across environments using the CLI or Strapi admin panel.
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c74 c36"
+                        class="c74 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Config Sync"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/plugins/strapi-plugin-config-sync"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -1568,7 +1571,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c49 c36 c50 c75"
+                          class="c49 c37 c50 c75"
                           type="button"
                         >
                           <div
@@ -1593,7 +1596,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                             </svg>
                           </div>
                           <span
-                            class="c7 c53"
+                            class="c8 c53"
                           >
                             Copy install command
                           </span>
@@ -1647,7 +1650,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                               aria-label="This plugin has 0 weekly downloads"
                             >
                               <span
-                                class="c7 c65"
+                                class="c8 c65"
                               >
                                 0
                               </span>
@@ -1658,10 +1661,10 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                           class="c69"
                         >
                           <h3
-                            class="c7 c70"
+                            class="c8 c70"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Content Versioning
                             </div>
@@ -1671,31 +1674,31 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                           class="c71"
                         >
                           <p
-                            class="c7 c72 c73"
+                            class="c8 c72 c73"
                           >
                             This plugin enables you to versioning Content Types. It allows multiple draft versions✅ Keeps history of all changes (with time travel) ✅ 
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c74 c36"
+                        class="c74 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Content Versioning"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/plugins/@notum-cz-strapi-plugin-content-versioning"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -1713,7 +1716,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c49 c36 c50 c75"
+                          class="c49 c37 c50 c75"
                           type="button"
                         >
                           <div
@@ -1738,7 +1741,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                             </svg>
                           </div>
                           <span
-                            class="c7 c53"
+                            class="c8 c53"
                           >
                             Copy install command
                           </span>
@@ -1804,7 +1807,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                               aria-label="This plugin was starred 49130 on GitHub"
                             >
                               <span
-                                class="c7 c65"
+                                class="c8 c65"
                               >
                                 49130
                               </span>
@@ -1832,7 +1835,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                               aria-label="This plugin has 7492 weekly downloads"
                             >
                               <span
-                                class="c7 c65"
+                                class="c8 c65"
                               >
                                 7492
                               </span>
@@ -1843,16 +1846,16 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                           class="c69"
                         >
                           <h3
-                            class="c7 c70"
+                            class="c8 c70"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Documentation
                               <span>
                                 <div
                                   aria-describedby="2"
-                                  class="c6"
+                                  class="c7"
                                   tabindex="0"
                                 >
                                   <img
@@ -1869,31 +1872,31 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                           class="c71"
                         >
                           <p
-                            class="c7 c72 c73"
+                            class="c8 c72 c73"
                           >
                             Create an OpenAPI Document and visualize your API with SWAGGER UI
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c74 c36"
+                        class="c74 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Documentation"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/plugins/@strapi-plugin-documentation"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -1926,7 +1929,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                             />
                           </svg>
                           <span
-                            class="c7 c81"
+                            class="c8 c81"
                           >
                             Installed
                           </span>
@@ -1980,7 +1983,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                               aria-label="This plugin has 0 weekly downloads"
                             >
                               <span
-                                class="c7 c65"
+                                class="c8 c65"
                               >
                                 0
                               </span>
@@ -1991,10 +1994,10 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                           class="c69"
                         >
                           <h3
-                            class="c7 c70"
+                            class="c8 c70"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Transformer
                             </div>
@@ -2004,31 +2007,31 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                           class="c71"
                         >
                           <p
-                            class="c7 c72 c73"
+                            class="c8 c72 c73"
                           >
                             A plugin for Strapi Headless CMS that provides the ability to transform the API response. 
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c74 c36"
+                        class="c74 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Transformer"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/plugins/strapi-plugin-transformer"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -2046,7 +2049,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c49 c36 c50 c75"
+                          class="c49 c37 c50 c75"
                           type="button"
                         >
                           <div
@@ -2071,7 +2074,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                             </svg>
                           </div>
                           <span
-                            class="c7 c53"
+                            class="c8 c53"
                           >
                             Copy install command
                           </span>
@@ -2094,10 +2097,10 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
             target="_blank"
           >
             <div
-              class="c83 c6"
+              class="c83 c7"
             >
               <div
-                class="c84 c6 c85"
+                class="c84 c7 c85"
               >
                 <svg
                   fill="none"
@@ -2119,13 +2122,13 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                 </svg>
               </div>
               <div
-                class="c38"
+                class="c39"
               >
                 <div
-                  class="c6"
+                  class="c7"
                 >
                   <span
-                    class="c7 c86 c87"
+                    class="c8 c86 c87"
                   >
                     Documentation
                   </span>
@@ -2144,7 +2147,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                   </svg>
                 </div>
                 <span
-                  class="c7 c72"
+                  class="c8 c72"
                 >
                   Tell us what plugin you are looking for and we'll let our community plugin developers know in case they are in search for inspiration!
                 </span>
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/providers.test.js.snap b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/providers.test.js.snap
index a4ba117603..63bd2b3914 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/providers.test.js.snap
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/providers.test.js.snap
@@ -13,26 +13,30 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   padding-left: 56px;
 }
 
-.c18 {
+.c6 {
+  min-width: 0;
+}
+
+.c19 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c19 {
+.c20 {
   padding-bottom: 16px;
   width: 25%;
 }
 
-.c25 {
+.c26 {
   padding-right: 8px;
   padding-left: 12px;
 }
 
-.c29 {
+.c30 {
   padding-bottom: 16px;
 }
 
-.c31 {
+.c32 {
   padding: 16px;
 }
 
@@ -161,7 +165,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   justify-content: space-between;
 }
 
-.c6 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -175,7 +179,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   flex-direction: row;
 }
 
-.c36 {
+.c37 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -190,7 +194,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   gap: 8px;
 }
 
-.c38 {
+.c39 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -255,27 +259,27 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   gap: 4px;
 }
 
-.c8 {
+.c9 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c17 {
+.c18 {
   font-size: 1rem;
   line-height: 1.5;
   color: #666687;
 }
 
-.c22 {
+.c23 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c35 {
+.c36 {
   font-weight: 600;
   font-size: 0.6875rem;
   line-height: 1.45;
@@ -283,7 +287,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   color: #4945ff;
 }
 
-.c33 {
+.c34 {
   font-weight: 600;
   font-size: 0.6875rem;
   line-height: 1.45;
@@ -353,11 +357,6 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   fill: #328048;
 }
 
-.c39 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 .c50 {
   position: relative;
   outline: none;
@@ -407,7 +406,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   border: 2px solid #4945ff;
 }
 
-.c21 {
+.c22 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -430,7 +429,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   background: #eaeaef;
 }
 
-.c51[aria-disabled='true'] .c7 {
+.c51[aria-disabled='true'] .c8 {
   color: #666687;
 }
 
@@ -443,7 +442,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   background: #eaeaef;
 }
 
-.c51[aria-disabled='true']:active .c7 {
+.c51[aria-disabled='true']:active .c8 {
   color: #666687;
 }
 
@@ -459,7 +458,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   background-color: #eaeaef;
 }
 
-.c51 .c7 {
+.c51 .c8 {
   color: #32324d;
 }
 
@@ -479,7 +478,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   background: #eaeaef;
 }
 
-.c71[aria-disabled='true'] .c7 {
+.c71[aria-disabled='true'] .c8 {
   color: #666687;
 }
 
@@ -492,7 +491,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   background: #eaeaef;
 }
 
-.c71[aria-disabled='true']:active .c7 {
+.c71[aria-disabled='true']:active .c8 {
   color: #666687;
 }
 
@@ -509,7 +508,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   border: 1px solid #4945ff;
 }
 
-.c71:active .c7 {
+.c71:active .c8 {
   color: #4945ff;
 }
 
@@ -518,7 +517,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   fill: #4945ff;
 }
 
-.c71 .c7 {
+.c71 .c8 {
   color: #271fe0;
 }
 
@@ -527,7 +526,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   fill: #271fe0;
 }
 
-.c28 {
+.c29 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -542,36 +541,36 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   background: inherit;
 }
 
-.c28::-webkit-input-placeholder {
+.c29::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c28::-moz-placeholder {
+.c29::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c28:-ms-input-placeholder {
+.c29:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c28::placeholder {
+.c29::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c28[aria-disabled='true'] {
+.c29[aria-disabled='true'] {
   color: inherit;
 }
 
-.c28:focus {
+.c29:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c24 {
+.c25 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -583,7 +582,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   transition-duration: 0.2s;
 }
 
-.c24:focus-within {
+.c25:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
@@ -693,15 +692,15 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   outline: none;
 }
 
-.c27 {
+.c28 {
   font-size: 0.8rem;
 }
 
-.c27 svg path {
+.c28 svg path {
   fill: #32324d;
 }
 
-.c20 {
+.c21 {
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
   outline: none;
@@ -712,28 +711,28 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   transition-duration: 0.2s;
 }
 
-.c20:focus-within .c26 svg path {
+.c21:focus-within .c27 svg path {
   fill: #4945ff;
 }
 
-.c20 .c23 {
+.c21 .c24 {
   border: 1px solid transparent;
 }
 
-.c20 .c23:focus-within {
+.c21 .c24:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c34 {
+.c35 {
   border-bottom: 2px solid #4945ff;
 }
 
-.c32 {
+.c33 {
   border-bottom: 2px solid transparent;
 }
 
-.c30[aria-disabled='true'] {
+.c31[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
@@ -750,7 +749,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   word-break: break-all;
 }
 
-.c10 {
+.c11 {
   background: #4945ff;
   padding-top: 8px;
   padding-right: 16px;
@@ -761,14 +760,14 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   border: 1px solid #4945ff;
 }
 
-.c16 {
+.c17 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c11 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -783,7 +782,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   gap: 8px;
 }
 
-.c14 {
+.c15 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -797,30 +796,30 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   flex-direction: row;
 }
 
-.c9 {
+.c10 {
   cursor: pointer;
 }
 
-.c12 {
+.c13 {
   position: relative;
   outline: none;
 }
 
-.c12 svg {
+.c13 svg {
   height: 12px;
   width: 12px;
 }
 
-.c12 svg > g,
-.c12 svg path {
+.c13 svg > g,
+.c13 svg path {
   fill: #ffffff;
 }
 
-.c12[aria-disabled='true'] {
+.c13[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c12:after {
+.c13:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -835,11 +834,11 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   border: 2px solid transparent;
 }
 
-.c12:focus-visible {
+.c13:focus-visible {
   outline: none;
 }
 
-.c12:focus-visible:after {
+.c13:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -850,53 +849,53 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   border: 2px solid #4945ff;
 }
 
-.c13 {
+.c14 {
   -webkit-text-decoration: none;
   text-decoration: none;
   border: 1px solid #dcdce4;
   background: #ffffff;
 }
 
-.c13[aria-disabled='true'] {
+.c14[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c13[aria-disabled='true'] .c15 {
+.c14[aria-disabled='true'] .c16 {
   color: #666687;
 }
 
-.c13[aria-disabled='true'] svg > g,.c13[aria-disabled='true'] svg path {
+.c14[aria-disabled='true'] svg > g,.c14[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c13[aria-disabled='true']:active {
+.c14[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c13[aria-disabled='true']:active .c15 {
+.c14[aria-disabled='true']:active .c16 {
   color: #666687;
 }
 
-.c13[aria-disabled='true']:active svg > g,.c13[aria-disabled='true']:active svg path {
+.c14[aria-disabled='true']:active svg > g,.c14[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c13:hover {
+.c14:hover {
   background-color: #f6f6f9;
 }
 
-.c13:active {
+.c14:active {
   background-color: #eaeaef;
 }
 
-.c13 .c15 {
+.c14 .c16 {
   color: #32324d;
 }
 
-.c13 svg > g,
-.c13 svg path {
+.c14 svg > g,
+.c14 svg path {
   fill: #32324d;
 }
 
@@ -913,11 +912,11 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
   overflow: hidden;
 }
 
-.c37 {
+.c38 {
   font-weight: 500;
 }
 
-.c37 span {
+.c38 span {
   font-size: 0.75rem;
 }
 
@@ -960,23 +959,23 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
             class="c5"
           >
             <div
-              class="c6"
+              class="c6 c7"
             >
               <h1
-                class="c7 c8"
+                class="c8 c9"
               >
                 Marketplace
               </h1>
             </div>
             <a
               aria-disabled="false"
-              class="c9 c10 c11 c12 c13"
+              class="c10 c11 c12 c13 c14"
               href="https://market.strapi.io/submit-provider"
               target="_self"
             >
               <div
                 aria-hidden="true"
-                class="c14"
+                class="c15"
               >
                 <svg
                   fill="none"
@@ -994,51 +993,53 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                 </svg>
               </div>
               <span
-                class="c15 c16"
+                class="c16 c17"
               >
                 Submit provider
               </span>
             </a>
           </div>
           <p
-            class="c7 c17"
+            class="c8 c18"
           >
             Get more out of Strapi
           </p>
         </div>
       </div>
       <div
-        class="c18"
+        class="c19"
       >
         <div
-          class="c19"
+          class="c20"
         >
           <div
-            class="c20"
+            class="c21"
           >
-            <div>
+            <div
+              class=""
+            >
               <div
-                class="c21"
+                class="c22"
               >
                 <label
-                  class="c7 c22"
+                  class="c8 c23"
                   for="0"
                 >
                   <div
-                    class="c6"
+                    class="c7"
                   >
                     Search
                   </div>
                 </label>
               </div>
               <div
-                class="c23 c5 c24"
+                class="c24 c5 c25"
               >
                 <div
-                  class="c25"
+                  class="c26"
                 >
                   <div
-                    class="c26 c6 c27"
+                    class="c27 c7 c28"
                   >
                     <svg
                       aria-hidden="true"
@@ -1061,7 +1062,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                   aria-disabled="false"
                   aria-invalid="false"
                   aria-required="false"
-                  class="c28"
+                  class="c29"
                   id="0"
                   name="searchbar"
                   placeholder="Search"
@@ -1073,7 +1074,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
         </div>
         <div>
           <div
-            class="c29"
+            class="c30"
           >
             <div
               aria-label="Plugins and Providers for Strapi"
@@ -1082,17 +1083,17 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
               <button
                 aria-disabled="false"
                 aria-selected="false"
-                class="c30"
+                class="c31"
                 id="tabs-0-tab"
                 role="tab"
                 tabindex="-1"
                 type="button"
               >
                 <div
-                  class="c31 c32"
+                  class="c32 c33"
                 >
                   <span
-                    class="c7 c33"
+                    class="c8 c34"
                   >
                     Plugins
                      
@@ -1106,17 +1107,17 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                 aria-controls="tabs-1-tabpanel"
                 aria-disabled="false"
                 aria-selected="true"
-                class="c30"
+                class="c31"
                 id="tabs-1-tab"
                 role="tab"
                 tabindex="0"
                 type="button"
               >
                 <div
-                  class="c31 c34"
+                  class="c32 c35"
                 >
                   <span
-                    class="c7 c35"
+                    class="c8 c36"
                   >
                     Providers
                      
@@ -1129,17 +1130,19 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
             </div>
           </div>
           <div
-            class="c29 c36"
+            class="c30 c37"
           >
             <div
-              class="c37"
+              class="c38"
             >
-              <div>
+              <div
+                class=""
+              >
                 <div
-                  class="c38 c39"
+                  class="c39"
                 >
                   <div
-                    class="c6 c40"
+                    class="c7 c40"
                   >
                     <button
                       aria-disabled="false"
@@ -1154,13 +1157,13 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                       class="c5 c42"
                     >
                       <div
-                        class="c6"
+                        class="c7"
                       >
                         <div
                           class="c43"
                         >
                           <span
-                            class="c7 c44"
+                            class="c8 c44"
                             id="sort-by-select-content"
                           >
                             Sort by alphabetical order
@@ -1168,7 +1171,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                         </div>
                       </div>
                       <div
-                        class="c6"
+                        class="c7"
                       >
                         <button
                           aria-hidden="true"
@@ -1203,7 +1206,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
             >
               <button
                 aria-disabled="false"
-                class="c49 c36 c50 c51 c52"
+                class="c49 c37 c50 c51 c52"
                 data-testid="filters-button"
                 type="button"
               >
@@ -1227,7 +1230,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                   </svg>
                 </div>
                 <span
-                  class="c7 c53"
+                  class="c8 c53"
                 >
                   Filters
                 </span>
@@ -1289,7 +1292,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                               aria-label="This provider has 0 weekly downloads"
                             >
                               <span
-                                class="c7 c63"
+                                class="c8 c63"
                               >
                                 0
                               </span>
@@ -1300,16 +1303,16 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c64"
                         >
                           <h3
-                            class="c7 c65"
+                            class="c8 c65"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Amazon Ses
                               <span>
                                 <div
                                   aria-describedby="5"
-                                  class="c6"
+                                  class="c7"
                                   tabindex="0"
                                 >
                                   <img
@@ -1326,31 +1329,31 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c67"
                         >
                           <p
-                            class="c7 c68 c69"
+                            class="c8 c68 c69"
                           >
                             Amazon Ses provider for Strapi
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c70 c36"
+                        class="c70 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Amazon Ses"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/providers/@strapi-provider-email-amazon-ses"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -1368,7 +1371,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c49 c36 c50 c71"
+                          class="c49 c37 c50 c71"
                           type="button"
                         >
                           <div
@@ -1393,7 +1396,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                             </svg>
                           </div>
                           <span
-                            class="c7 c53"
+                            class="c8 c53"
                           >
                             Copy install command
                           </span>
@@ -1447,7 +1450,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                               aria-label="This provider has 0 weekly downloads"
                             >
                               <span
-                                class="c7 c63"
+                                class="c8 c63"
                               >
                                 0
                               </span>
@@ -1458,16 +1461,16 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c64"
                         >
                           <h3
-                            class="c7 c65"
+                            class="c8 c65"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               AWS S3
                               <span>
                                 <div
                                   aria-describedby="6"
-                                  class="c6"
+                                  class="c7"
                                   tabindex="0"
                                 >
                                   <img
@@ -1484,31 +1487,31 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c67"
                         >
                           <p
-                            class="c7 c68 c69"
+                            class="c8 c68 c69"
                           >
                             AWS S3 provider for Strapi uploads
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c70 c36"
+                        class="c70 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about AWS S3"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/providers/@strapi-provider-upload-aws-s3"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -1526,7 +1529,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c49 c36 c50 c71"
+                          class="c49 c37 c50 c71"
                           type="button"
                         >
                           <div
@@ -1551,7 +1554,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                             </svg>
                           </div>
                           <span
-                            class="c7 c53"
+                            class="c8 c53"
                           >
                             Copy install command
                           </span>
@@ -1617,7 +1620,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                               aria-label="This provider was starred 49130 on GitHub"
                             >
                               <span
-                                class="c7 c63"
+                                class="c8 c63"
                               >
                                 49130
                               </span>
@@ -1645,7 +1648,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                               aria-label="This provider has 7492 weekly downloads"
                             >
                               <span
-                                class="c7 c63"
+                                class="c8 c63"
                               >
                                 7492
                               </span>
@@ -1656,16 +1659,16 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c64"
                         >
                           <h3
-                            class="c7 c65"
+                            class="c8 c65"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Cloudinary
                               <span>
                                 <div
                                   aria-describedby="7"
-                                  class="c6"
+                                  class="c7"
                                   tabindex="0"
                                 >
                                   <img
@@ -1682,31 +1685,31 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c67"
                         >
                           <p
-                            class="c7 c68 c69"
+                            class="c8 c68 c69"
                           >
                             Cloudinary provider for Strapi uploads
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c70 c36"
+                        class="c70 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Cloudinary"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/providers/@strapi-provider-upload-cloudinary"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -1739,7 +1742,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                             />
                           </svg>
                           <span
-                            class="c7 c80"
+                            class="c8 c80"
                           >
                             Installed
                           </span>
@@ -1805,7 +1808,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                               aria-label="This provider was starred 30 on GitHub"
                             >
                               <span
-                                class="c7 c63"
+                                class="c8 c63"
                               >
                                 30
                               </span>
@@ -1833,7 +1836,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                               aria-label="This provider has 2492 weekly downloads"
                             >
                               <span
-                                class="c7 c63"
+                                class="c8 c63"
                               >
                                 2492
                               </span>
@@ -1844,16 +1847,16 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c64"
                         >
                           <h3
-                            class="c7 c65"
+                            class="c8 c65"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Local Upload
                               <span>
                                 <div
                                   aria-describedby="8"
-                                  class="c6"
+                                  class="c7"
                                   tabindex="0"
                                 >
                                   <img
@@ -1870,31 +1873,31 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c67"
                         >
                           <p
-                            class="c7 c68 c69"
+                            class="c8 c68 c69"
                           >
                             Local upload provider for Strapi
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c70 c36"
+                        class="c70 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Local Upload"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/providers/@strapi-provider-upload-local"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -1912,7 +1915,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c49 c36 c50 c71"
+                          class="c49 c37 c50 c71"
                           type="button"
                         >
                           <div
@@ -1937,7 +1940,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                             </svg>
                           </div>
                           <span
-                            class="c7 c53"
+                            class="c8 c53"
                           >
                             Copy install command
                           </span>
@@ -1991,7 +1994,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                               aria-label="This provider has 0 weekly downloads"
                             >
                               <span
-                                class="c7 c63"
+                                class="c8 c63"
                               >
                                 0
                               </span>
@@ -2002,16 +2005,16 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c64"
                         >
                           <h3
-                            class="c7 c65"
+                            class="c8 c65"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Mailgun
                               <span>
                                 <div
                                   aria-describedby="9"
-                                  class="c6"
+                                  class="c7"
                                   tabindex="0"
                                 >
                                   <img
@@ -2028,31 +2031,31 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c67"
                         >
                           <p
-                            class="c7 c68 c69"
+                            class="c8 c68 c69"
                           >
                             Mailgun provider for Strapi
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c70 c36"
+                        class="c70 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Mailgun"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/providers/@strapi-provider-email-mailgun"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -2070,7 +2073,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c49 c36 c50 c71"
+                          class="c49 c37 c50 c71"
                           type="button"
                         >
                           <div
@@ -2095,7 +2098,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                             </svg>
                           </div>
                           <span
-                            class="c7 c53"
+                            class="c8 c53"
                           >
                             Copy install command
                           </span>
@@ -2149,7 +2152,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                               aria-label="This provider has 0 weekly downloads"
                             >
                               <span
-                                class="c7 c63"
+                                class="c8 c63"
                               >
                                 0
                               </span>
@@ -2160,16 +2163,16 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c64"
                         >
                           <h3
-                            class="c7 c65"
+                            class="c8 c65"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Nodemailer
                               <span>
                                 <div
                                   aria-describedby="10"
-                                  class="c6"
+                                  class="c7"
                                   tabindex="0"
                                 >
                                   <img
@@ -2186,31 +2189,31 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c67"
                         >
                           <p
-                            class="c7 c68 c69"
+                            class="c8 c68 c69"
                           >
                             Nodemailer provider for Strapi
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c70 c36"
+                        class="c70 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Nodemailer"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/providers/@strapi-provider-email-nodemailer"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -2228,7 +2231,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c49 c36 c50 c71"
+                          class="c49 c37 c50 c71"
                           type="button"
                         >
                           <div
@@ -2253,7 +2256,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                             </svg>
                           </div>
                           <span
-                            class="c7 c53"
+                            class="c8 c53"
                           >
                             Copy install command
                           </span>
@@ -2307,7 +2310,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                               aria-label="This provider has 0 weekly downloads"
                             >
                               <span
-                                class="c7 c63"
+                                class="c8 c63"
                               >
                                 0
                               </span>
@@ -2318,16 +2321,16 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c64"
                         >
                           <h3
-                            class="c7 c65"
+                            class="c8 c65"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Rackspace
                               <span>
                                 <div
                                   aria-describedby="11"
-                                  class="c6"
+                                  class="c7"
                                   tabindex="0"
                                 >
                                   <img
@@ -2344,31 +2347,31 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c67"
                         >
                           <p
-                            class="c7 c68 c69"
+                            class="c8 c68 c69"
                           >
                             Rackspace provider for Strapi uploads
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c70 c36"
+                        class="c70 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Rackspace"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/providers/@strapi-provider-upload-rackspace"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -2386,7 +2389,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c49 c36 c50 c71"
+                          class="c49 c37 c50 c71"
                           type="button"
                         >
                           <div
@@ -2411,7 +2414,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                             </svg>
                           </div>
                           <span
-                            class="c7 c53"
+                            class="c8 c53"
                           >
                             Copy install command
                           </span>
@@ -2465,7 +2468,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                               aria-label="This provider has 0 weekly downloads"
                             >
                               <span
-                                class="c7 c63"
+                                class="c8 c63"
                               >
                                 0
                               </span>
@@ -2476,16 +2479,16 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c64"
                         >
                           <h3
-                            class="c7 c65"
+                            class="c8 c65"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               SendGrid
                               <span>
                                 <div
                                   aria-describedby="12"
-                                  class="c6"
+                                  class="c7"
                                   tabindex="0"
                                 >
                                   <img
@@ -2502,31 +2505,31 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c67"
                         >
                           <p
-                            class="c7 c68 c69"
+                            class="c8 c68 c69"
                           >
                             SendGrid provider for Strapi
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c70 c36"
+                        class="c70 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about SendGrid"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/providers/@strapi-provider-email-sendgrid"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -2544,7 +2547,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c49 c36 c50 c71"
+                          class="c49 c37 c50 c71"
                           type="button"
                         >
                           <div
@@ -2569,7 +2572,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                             </svg>
                           </div>
                           <span
-                            class="c7 c53"
+                            class="c8 c53"
                           >
                             Copy install command
                           </span>
@@ -2623,7 +2626,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                               aria-label="This provider has 0 weekly downloads"
                             >
                               <span
-                                class="c7 c63"
+                                class="c8 c63"
                               >
                                 0
                               </span>
@@ -2634,16 +2637,16 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c64"
                         >
                           <h3
-                            class="c7 c65"
+                            class="c8 c65"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               Sendmail
                               <span>
                                 <div
                                   aria-describedby="13"
-                                  class="c6"
+                                  class="c7"
                                   tabindex="0"
                                 >
                                   <img
@@ -2660,31 +2663,31 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           class="c67"
                         >
                           <p
-                            class="c7 c68 c69"
+                            class="c8 c68 c69"
                           >
                             Sendmail provider for Strapi
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c70 c36"
+                        class="c70 c37"
                         style="align-self: flex-end;"
                       >
                         <a
                           aria-disabled="false"
                           aria-label="Learn more about Sendmail"
-                          class="c9 c10 c11 c12 c13"
+                          class="c10 c11 c12 c13 c14"
                           href="https://market.strapi.io/providers/@strapi-provider-email-sendmail"
                           target="_self"
                         >
                           <span
-                            class="c15 c16"
+                            class="c16 c17"
                           >
                             More
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c14"
+                            class="c15"
                           >
                             <svg
                               fill="none"
@@ -2702,7 +2705,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c49 c36 c50 c71"
+                          class="c49 c37 c50 c71"
                           type="button"
                         >
                           <div
@@ -2727,7 +2730,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                             </svg>
                           </div>
                           <span
-                            class="c7 c53"
+                            class="c8 c53"
                           >
                             Copy install command
                           </span>
@@ -2750,10 +2753,10 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
             target="_blank"
           >
             <div
-              class="c82 c6"
+              class="c82 c7"
             >
               <div
-                class="c83 c6 c84"
+                class="c83 c7 c84"
               >
                 <svg
                   fill="none"
@@ -2775,13 +2778,13 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                 </svg>
               </div>
               <div
-                class="c38"
+                class="c39"
               >
                 <div
-                  class="c6"
+                  class="c7"
                 >
                   <span
-                    class="c7 c85 c86"
+                    class="c8 c85 c86"
                   >
                     Documentation
                   </span>
@@ -2800,7 +2803,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                   </svg>
                 </div>
                 <span
-                  class="c7 c68"
+                  class="c8 c68"
                 >
                   Tell us what plugin you are looking for and we'll let our community plugin developers know in case they are in search for inspiration!
                 </span>
diff --git a/packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js b/packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js
index ed1c0ccf64..028b561105 100644
--- a/packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js
@@ -33,23 +33,27 @@ describe('NotFoundPage', () => {
         padding-left: 56px;
       }
 
-      .c5 {
+      .c3 {
+        min-width: 0;
+      }
+
+      .c6 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c6 {
+      .c7 {
         background: #ffffff;
         padding: 64px;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c8 {
+      .c9 {
         padding-bottom: 24px;
       }
 
-      .c10 {
+      .c11 {
         padding-bottom: 16px;
       }
 
@@ -71,7 +75,7 @@ describe('NotFoundPage', () => {
         justify-content: space-between;
       }
 
-      .c3 {
+      .c4 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -85,21 +89,21 @@ describe('NotFoundPage', () => {
         flex-direction: row;
       }
 
-      .c4 {
+      .c5 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c11 {
+      .c12 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
         color: #666687;
       }
 
-      .c7 {
+      .c8 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -114,7 +118,7 @@ describe('NotFoundPage', () => {
         text-align: center;
       }
 
-      .c9 svg {
+      .c10 svg {
         height: 5.5rem;
       }
 
@@ -122,7 +126,7 @@ describe('NotFoundPage', () => {
         outline: none;
       }
 
-      .c12 {
+      .c13 {
         background: #4945ff;
         padding-top: 8px;
         padding-right: 16px;
@@ -133,14 +137,14 @@ describe('NotFoundPage', () => {
         border: 1px solid #4945ff;
       }
 
-      .c17 {
+      .c18 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c13 {
+      .c14 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -155,7 +159,7 @@ describe('NotFoundPage', () => {
         gap: 8px;
       }
 
-      .c18 {
+      .c19 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -169,26 +173,26 @@ describe('NotFoundPage', () => {
         flex-direction: row;
       }
 
-      .c14 {
+      .c15 {
         position: relative;
         outline: none;
       }
 
-      .c14 svg {
+      .c15 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c14 svg > g,
-      .c14 svg path {
+      .c15 svg > g,
+      .c15 svg path {
         fill: #ffffff;
       }
 
-      .c14[aria-disabled='true'] {
+      .c15[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c14:after {
+      .c15:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -203,11 +207,11 @@ describe('NotFoundPage', () => {
         border: 2px solid transparent;
       }
 
-      .c14:focus-visible {
+      .c15:focus-visible {
         outline: none;
       }
 
-      .c14:focus-visible:after {
+      .c15:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -218,63 +222,63 @@ describe('NotFoundPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c15 {
+      .c16 {
         -webkit-text-decoration: none;
         text-decoration: none;
         border: 1px solid #d9d8ff;
         background: #f0f0ff;
       }
 
-      .c15[aria-disabled='true'] {
+      .c16[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c15[aria-disabled='true'] .c16 {
+      .c16[aria-disabled='true'] .c17 {
         color: #666687;
       }
 
-      .c15[aria-disabled='true'] svg > g,.c15[aria-disabled='true'] svg path {
+      .c16[aria-disabled='true'] svg > g,.c16[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c15[aria-disabled='true']:active {
+      .c16[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c15[aria-disabled='true']:active .c16 {
+      .c16[aria-disabled='true']:active .c17 {
         color: #666687;
       }
 
-      .c15[aria-disabled='true']:active svg > g,.c15[aria-disabled='true']:active svg path {
+      .c16[aria-disabled='true']:active svg > g,.c16[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c15:hover {
+      .c16:hover {
         background-color: #ffffff;
       }
 
-      .c15:active {
+      .c16:active {
         background-color: #ffffff;
         border: 1px solid #4945ff;
       }
 
-      .c15:active .c16 {
+      .c16:active .c17 {
         color: #4945ff;
       }
 
-      .c15:active svg > g,
-      .c15:active svg path {
+      .c16:active svg > g,
+      .c16:active svg path {
         fill: #4945ff;
       }
 
-      .c15 .c16 {
+      .c16 .c17 {
         color: #271fe0;
       }
 
-      .c15 svg > g,
-      .c15 svg path {
+      .c16 svg > g,
+      .c16 svg path {
         fill: #271fe0;
       }
 
@@ -295,10 +299,10 @@ describe('NotFoundPage', () => {
               class="c2"
             >
               <div
-                class="c3"
+                class="c3 c4"
               >
                 <h1
-                  class="c4"
+                  class="c5"
                   id="title"
                 >
                   Page not found
@@ -308,14 +312,14 @@ describe('NotFoundPage', () => {
           </div>
         </div>
         <div
-          class="c5"
+          class="c6"
         >
           <div
-            class="c6 c7"
+            class="c7 c8"
           >
             <div
               aria-hidden="true"
-              class="c8 c9"
+              class="c9 c10"
             >
               <svg
                 fill="none"
@@ -394,10 +398,10 @@ describe('NotFoundPage', () => {
               </svg>
             </div>
             <div
-              class="c10"
+              class="c11"
             >
               <p
-                class="c11"
+                class="c12"
               >
                 Oops! We can't seem to find the page you're looging for...
               </p>
@@ -405,17 +409,17 @@ describe('NotFoundPage', () => {
             <a
               aria-current="page"
               aria-disabled="false"
-              class="c12 c13 c14 c15 active"
+              class="c13 c14 c15 c16 active"
               href="/"
             >
               <span
-                class="c16 c17"
+                class="c17 c18"
               >
                 Back to homepage
               </span>
               <div
                 aria-hidden="true"
-                class="c18"
+                class="c19"
               >
                 <svg
                   fill="none"
diff --git a/packages/core/admin/admin/src/pages/ProfilePage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/ProfilePage/tests/__snapshots__/index.test.js.snap
index e81e5430ca..16ec303d3b 100644
--- a/packages/core/admin/admin/src/pages/ProfilePage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/ProfilePage/tests/__snapshots__/index.test.js.snap
@@ -9,12 +9,16 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   padding-left: 56px;
 }
 
-.c12 {
+.c3 {
+  min-width: 0;
+}
+
+.c13 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c6 {
+.c7 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -25,11 +29,11 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   cursor: pointer;
 }
 
-.c11 {
+.c12 {
   padding-bottom: 56px;
 }
 
-.c14 {
+.c15 {
   background: #ffffff;
   padding-top: 24px;
   padding-right: 32px;
@@ -44,12 +48,17 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   padding-left: 8px;
 }
 
-.c37 {
+.c29 {
+  background: transparent;
+  border-style: none;
+}
+
+.c39 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c40 {
+.c42 {
   padding-left: 12px;
 }
 
@@ -71,7 +80,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c3 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -85,7 +94,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c7 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -100,7 +109,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   gap: 8px;
 }
 
-.c13 {
+.c14 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -115,7 +124,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   gap: 24px;
 }
 
-.c15 {
+.c16 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -130,21 +139,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   gap: 16px;
 }
 
-.c19 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c31 {
+.c20 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -159,21 +154,39 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   gap: 4px;
 }
 
-.c5 {
+.c30 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: unset;
+  -webkit-justify-content: unset;
+  -ms-flex-pack: unset;
+  justify-content: unset;
+}
+
+.c6 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c10 {
+.c11 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c16 {
+.c17 {
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
@@ -193,13 +206,13 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   color: #d02b20;
 }
 
-.c32 {
+.c34 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c38 {
+.c40 {
   font-size: 0.875rem;
   line-height: 1.43;
   display: block;
@@ -209,41 +222,32 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c42 {
+.c44 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #666687;
 }
 
-.c20 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c20 > * + * {
-  margin-top: 4px;
-}
-
-.c8 {
+.c9 {
   position: relative;
   outline: none;
 }
 
-.c8 svg {
+.c9 svg {
   height: 12px;
   width: 12px;
 }
 
-.c8 svg > g,
-.c8 svg path {
+.c9 svg > g,
+.c9 svg path {
   fill: #ffffff;
 }
 
-.c8[aria-disabled='true'] {
+.c9[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c8:after {
+.c9:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -258,11 +262,11 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c8:focus-visible {
+.c9:focus-visible {
   outline: none;
 }
 
-.c8:focus-visible:after {
+.c9:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -273,48 +277,60 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c9 {
+.c33 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.c10 {
   height: 2rem;
 }
 
-.c9[aria-disabled='true'] {
+.c10[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c9[aria-disabled='true'] .c4 {
+.c10[aria-disabled='true'] .c5 {
   color: #666687;
 }
 
-.c9[aria-disabled='true'] svg > g,.c9[aria-disabled='true'] svg path {
+.c10[aria-disabled='true'] svg > g,.c10[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c9[aria-disabled='true']:active {
+.c10[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c9[aria-disabled='true']:active .c4 {
+.c10[aria-disabled='true']:active .c5 {
   color: #666687;
 }
 
-.c9[aria-disabled='true']:active svg > g,.c9[aria-disabled='true']:active svg path {
+.c10[aria-disabled='true']:active svg > g,.c10[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c9:hover {
+.c10:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c9:active {
+.c10:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c9 svg > g,
-.c9 svg path {
+.c10 svg > g,
+.c10 svg path {
   fill: #ffffff;
 }
 
@@ -427,23 +443,12 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c29 {
-  border: none;
-  background: transparent;
+.c31 {
   font-size: 1.6rem;
-  width: auto;
   padding: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
 }
 
-.c34 {
+.c36 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -459,28 +464,28 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c34:focus-within {
+.c36:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c39 {
+.c41 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c39 svg {
+.c41 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c39 svg path {
+.c41 svg path {
   fill: #666687;
 }
 
-.c41 {
+.c43 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -489,11 +494,11 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c41 svg {
+.c43 svg {
   width: 0.375rem;
 }
 
-.c35 {
+.c37 {
   position: absolute;
   left: 0;
   right: 0;
@@ -504,25 +509,25 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c35:focus {
+.c37:focus {
   outline: none;
 }
 
-.c35[aria-disabled='true'] {
+.c37[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c36 {
+.c38 {
   width: 100%;
 }
 
-.c17 {
+.c18 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 20px;
 }
 
-.c18 {
+.c19 {
   grid-column: span 6;
   max-width: 100%;
 }
@@ -531,7 +536,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c33 {
+.c35 {
   color: #4945ff;
 }
 
@@ -539,23 +544,23 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   display: none;
 }
 
-.c30 svg {
+.c32 svg {
   height: 1rem;
   width: 1rem;
 }
 
-.c30 svg path {
+.c32 svg path {
   fill: #666687;
 }
 
 @media (max-width:68.75rem) {
-  .c18 {
+  .c19 {
     grid-column: span 12;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c18 {
+  .c19 {
     grid-column: span;
   }
 }
@@ -582,17 +587,17 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
           class="c2"
         >
           <div
-            class="c3"
+            class="c3 c4"
           >
             <h1
-              class="c4 c5"
+              class="c5 c6"
             >
               yolo
             </h1>
           </div>
           <button
             aria-disabled="false"
-            class="c6 c7 c8 c9"
+            class="c7 c8 c9 c10"
             type="submit"
           >
             <div
@@ -613,7 +618,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
               </svg>
             </div>
             <span
-              class="c4 c10"
+              class="c5 c11"
             >
               Save
             </span>
@@ -622,49 +627,51 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
       </div>
     </div>
     <div
-      class="c11"
+      class="c12"
     >
       <div
-        class="c12"
+        class="c13"
       >
         <div
-          class="c13"
+          class="c14"
         >
           <div
-            class="c14"
+            class="c15"
           >
             <div
-              class="c15"
+              class="c16"
             >
               <h2
-                class="c4 c16"
+                class="c5 c17"
               >
                 Profile
               </h2>
               <div
-                class="c17"
+                class="c18"
               >
                 <div
-                  class="c18"
+                  class="c19"
                 >
                   <div
                     class=""
                   >
                     <div>
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c19 c20"
+                          class="c20"
                         >
                           <label
-                            class="c4 c21"
+                            class="c5 c21"
                             for="firstname"
                           >
                             <div
-                              class="c3"
+                              class="c4"
                             >
                               First name
                               <span
-                                class="c4 c22 c23"
+                                class="c5 c22 c23"
                               >
                                 *
                               </span>
@@ -691,22 +698,24 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c18"
+                  class="c19"
                 >
                   <div
                     class=""
                   >
                     <div>
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c19 c20"
+                          class="c20"
                         >
                           <label
-                            class="c4 c21"
+                            class="c5 c21"
                             for="lastname"
                           >
                             <div
-                              class="c3"
+                              class="c4"
                             >
                               Last name
                             </div>
@@ -732,26 +741,28 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c18"
+                  class="c19"
                 >
                   <div
                     class=""
                   >
                     <div>
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c19 c20"
+                          class="c20"
                         >
                           <label
-                            class="c4 c21"
+                            class="c5 c21"
                             for="email"
                           >
                             <div
-                              class="c3"
+                              class="c4"
                             >
                               Email
                               <span
-                                class="c4 c22 c23"
+                                class="c5 c22 c23"
                               >
                                 *
                               </span>
@@ -778,22 +789,24 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c18"
+                  class="c19"
                 >
                   <div
                     class=""
                   >
                     <div>
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c19 c20"
+                          class="c20"
                         >
                           <label
-                            class="c4 c21"
+                            class="c5 c21"
                             for="username"
                           >
                             <div
-                              class="c3"
+                              class="c4"
                             >
                               Username
                             </div>
@@ -822,36 +835,38 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="c14"
+            class="c15"
           >
             <div
-              class="c15"
+              class="c16"
             >
               <h2
-                class="c4 c16"
+                class="c5 c17"
               >
                 Change password
               </h2>
               <div
-                class="c17"
+                class="c18"
               >
                 <div
-                  class="c18"
+                  class="c19"
                 >
                   <div
                     class=""
                   >
                     <div>
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c19 c20"
+                          class="c20"
                         >
                           <label
-                            class="c4 c21"
+                            class="c5 c21"
                             for="1"
                           >
                             <div
-                              class="c3"
+                              class="c4"
                             >
                               Current Password
                             </div>
@@ -873,12 +888,18 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                               class="c28"
                             >
                               <button
-                                aria-label="Hide password"
-                                class="c29 c30"
+                                class="c29 c30 c31 c32"
                                 type="button"
                               >
+                                <span
+                                  class="c33"
+                                >
+                                  Hide password
+                                </span>
                                 <svg
+                                  aria-hidden="true"
                                   fill="none"
+                                  focusable="false"
                                   height="1rem"
                                   viewBox="0 0 24 24"
                                   width="1rem"
@@ -899,25 +920,27 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c17"
+                class="c18"
               >
                 <div
-                  class="c18"
+                  class="c19"
                 >
                   <div
                     class=""
                   >
                     <div>
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c19 c20"
+                          class="c20"
                         >
                           <label
-                            class="c4 c21"
+                            class="c5 c21"
                             for="3"
                           >
                             <div
-                              class="c3"
+                              class="c4"
                             >
                               Password
                             </div>
@@ -940,12 +963,18 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                               class="c28"
                             >
                               <button
-                                aria-label="Hide password"
-                                class="c29 c30"
+                                class="c29 c30 c31 c32"
                                 type="button"
                               >
+                                <span
+                                  class="c33"
+                                >
+                                  Hide password
+                                </span>
                                 <svg
+                                  aria-hidden="true"
                                   fill="none"
+                                  focusable="false"
                                   height="1rem"
                                   viewBox="0 0 24 24"
                                   width="1rem"
@@ -965,22 +994,24 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c18"
+                  class="c19"
                 >
                   <div
                     class=""
                   >
                     <div>
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c19 c20"
+                          class="c20"
                         >
                           <label
-                            class="c4 c21"
+                            class="c5 c21"
                             for="5"
                           >
                             <div
-                              class="c3"
+                              class="c4"
                             >
                               Password confirmation
                             </div>
@@ -1003,12 +1034,18 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                               class="c28"
                             >
                               <button
-                                aria-label="Hide password"
-                                class="c29 c30"
+                                class="c29 c30 c31 c32"
                                 type="button"
                               >
+                                <span
+                                  class="c33"
+                                >
+                                  Hide password
+                                </span>
                                 <svg
+                                  aria-hidden="true"
                                   fill="none"
+                                  focusable="false"
                                   height="1rem"
                                   viewBox="0 0 24 24"
                                   width="1rem"
@@ -1031,25 +1068,25 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="c14"
+            class="c15"
           >
             <div
-              class="c15"
+              class="c16"
             >
               <div
-                class="c31"
+                class="c20"
               >
                 <h2
-                  class="c4 c16"
+                  class="c5 c17"
                 >
                   Experience
                 </h2>
                 <span
-                  class="c4 c32"
+                  class="c5 c34"
                 >
                   Preference changes will apply only to you. More information is available 
                   <a
-                    class="c33"
+                    class="c35"
                     href="https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#locales"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -1060,30 +1097,32 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                 </span>
               </div>
               <div
-                class="c17"
+                class="c18"
               >
                 <div
-                  class="c18"
+                  class="c19"
                 >
                   <div
                     class=""
                   >
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c19 c20"
+                        class="c20"
                       >
                         <label
-                          class="c4 c21"
+                          class="c5 c21"
                           for="7"
                         >
                           <div
-                            class="c3"
+                            class="c4"
                           >
                             Interface language
                           </div>
                         </label>
                         <div
-                          class="c3 c34"
+                          class="c4 c36"
                         >
                           <button
                             aria-describedby="7-hint"
@@ -1091,21 +1130,21 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-labelledby="7 7-label 7-content"
-                            class="c35"
+                            class="c37"
                             id="7"
                             type="button"
                           />
                           <div
-                            class="c2 c36"
+                            class="c2 c38"
                           >
                             <div
-                              class="c3"
+                              class="c4"
                             >
                               <div
-                                class="c37"
+                                class="c39"
                               >
                                 <span
-                                  class="c4 c38"
+                                  class="c5 c40"
                                   id="7-content"
                                 >
                                   Select
@@ -1113,12 +1152,12 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c3"
+                              class="c4"
                             >
                               <button
                                 aria-disabled="false"
                                 aria-label="Clear the interface language selected"
-                                class="c39"
+                                class="c41"
                                 title="Clear the interface language selected"
                                 type="button"
                               >
@@ -1137,7 +1176,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                               </button>
                               <button
                                 aria-hidden="true"
-                                class="c40 c39 c41"
+                                class="c42 c41 c43"
                                 tabindex="-1"
                                 title="Carret Down Button"
                                 type="button"
@@ -1161,7 +1200,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                           </div>
                         </div>
                         <p
-                          class="c4 c42"
+                          class="c5 c44"
                           id="7-hint"
                         >
                           This will only display your own interface in the chosen language.
@@ -1171,27 +1210,29 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c18"
+                  class="c19"
                 >
                   <div
                     class=""
                   >
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c19 c20"
+                        class="c20"
                       >
                         <label
-                          class="c4 c21"
+                          class="c5 c21"
                           for="9"
                         >
                           <div
-                            class="c3"
+                            class="c4"
                           >
                             Interface mode
                           </div>
                         </label>
                         <div
-                          class="c3 c34"
+                          class="c4 c36"
                         >
                           <button
                             aria-describedby="9-hint"
@@ -1199,21 +1240,21 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-labelledby="9 9-label 9-content"
-                            class="c35"
+                            class="c37"
                             id="9"
                             type="button"
                           />
                           <div
-                            class="c2 c36"
+                            class="c2 c38"
                           >
                             <div
-                              class="c3"
+                              class="c4"
                             >
                               <div
-                                class="c37"
+                                class="c39"
                               >
                                 <span
-                                  class="c4 c38"
+                                  class="c5 c40"
                                   id="9-content"
                                 >
                                   Light mode
@@ -1221,11 +1262,11 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c3"
+                              class="c4"
                             >
                               <button
                                 aria-hidden="true"
-                                class="c40 c39 c41"
+                                class="c42 c41 c43"
                                 tabindex="-1"
                                 title="Carret Down Button"
                                 type="button"
@@ -1249,7 +1290,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                           </div>
                         </div>
                         <p
-                          class="c4 c42"
+                          class="c5 c44"
                           id="9-hint"
                         >
                           Displays your interface in the chosen mode.
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap
index df7f9cde47..0f8548959e 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap
@@ -13,7 +13,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   padding-bottom: 8px;
 }
 
-.c13 {
+.c9 {
+  min-width: 0;
+}
+
+.c14 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -24,12 +28,12 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   cursor: pointer;
 }
 
-.c17 {
+.c18 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c19 {
+.c20 {
   background: #ffffff;
   padding-top: 24px;
   padding-right: 32px;
@@ -142,7 +146,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   justify-content: space-between;
 }
 
-.c9 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -156,7 +160,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   flex-direction: row;
 }
 
-.c12 {
+.c13 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -171,7 +175,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   gap: 8px;
 }
 
-.c18 {
+.c19 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -186,7 +190,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   gap: 24px;
 }
 
-.c20 {
+.c21 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -201,7 +205,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   gap: 16px;
 }
 
-.c24 {
+.c25 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -213,6 +217,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
 .c47 {
@@ -230,6 +235,21 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   gap: 8px;
 }
 
+.c55 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 12px;
+}
+
 .c62 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -251,7 +271,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   justify-content: center;
 }
 
-.c11 {
+.c12 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
@@ -262,14 +282,14 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   color: #32324d;
 }
 
-.c16 {
+.c17 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c21 {
+.c22 {
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
@@ -336,7 +356,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 1px solid #4945ff;
 }
 
-.c51:hover:not([aria-disabled='true']) .c10 {
+.c51:hover:not([aria-disabled='true']) .c11 {
   color: #4945ff;
 }
 
@@ -356,7 +376,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 1px solid #4945ff;
 }
 
-.c65:hover:not([aria-disabled='true']) .c10 {
+.c65:hover:not([aria-disabled='true']) .c11 {
   color: #4945ff;
 }
 
@@ -372,24 +392,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   fill: #666687;
 }
 
-.c25 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c25 > * + * {
-  margin-top: 4px;
-}
-
-.c55 > * {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c55 > * + * {
-  margin-left: 12px;
-}
-
 .c57 {
   background: transparent;
   border: none;
@@ -473,26 +475,26 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   fill: #4945ff;
 }
 
-.c14 {
+.c15 {
   position: relative;
   outline: none;
 }
 
-.c14 svg {
+.c15 svg {
   height: 12px;
   width: 12px;
 }
 
-.c14 svg > g,
-.c14 svg path {
+.c15 svg > g,
+.c15 svg path {
   fill: #ffffff;
 }
 
-.c14[aria-disabled='true'] {
+.c15[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c14:after {
+.c15:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -507,11 +509,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 2px solid transparent;
 }
 
-.c14:focus-visible {
+.c15:focus-visible {
   outline: none;
 }
 
-.c14:focus-visible:after {
+.c15:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -534,48 +536,48 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   width: 1px;
 }
 
-.c15 {
+.c16 {
   height: 2rem;
 }
 
-.c15[aria-disabled='true'] {
+.c16[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c15[aria-disabled='true'] .c10 {
+.c16[aria-disabled='true'] .c11 {
   color: #666687;
 }
 
-.c15[aria-disabled='true'] svg > g,.c15[aria-disabled='true'] svg path {
+.c16[aria-disabled='true'] svg > g,.c16[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c15[aria-disabled='true']:active {
+.c16[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c15[aria-disabled='true']:active .c10 {
+.c16[aria-disabled='true']:active .c11 {
   color: #666687;
 }
 
-.c15[aria-disabled='true']:active svg > g,.c15[aria-disabled='true']:active svg path {
+.c16[aria-disabled='true']:active svg > g,.c16[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c15:hover {
+.c16:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c15:active {
+.c16:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c15 svg > g,
-.c15 svg path {
+.c16 svg > g,
+.c16 svg path {
   fill: #ffffff;
 }
 
@@ -717,7 +719,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   width: 100%;
 }
 
-.c22 {
+.c23 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 20px;
@@ -728,7 +730,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   grid-template-columns: repeat(12,1fr);
 }
 
-.c23 {
+.c24 {
   grid-column: span 6;
   max-width: 100%;
 }
@@ -911,13 +913,13 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
 }
 
 @media (max-width:68.75rem) {
-  .c23 {
+  .c24 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c23 {
+  .c24 {
     grid-column: span 12;
   }
 }
@@ -1000,20 +1002,20 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
             class="c7 c8"
           >
             <div
-              class="c7 c9"
+              class="c7 c9 c10"
             >
               <h1
-                class="c10 c11"
+                class="c11 c12"
               >
                 Create API Token
               </h1>
             </div>
             <div
-              class="c7 c12"
+              class="c7 c13"
             >
               <button
                 aria-disabled="false"
-                class="c7 c13 c12 c14 c15"
+                class="c7 c14 c13 c15 c16"
                 type="submit"
               >
                 <div
@@ -1034,7 +1036,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </svg>
                 </div>
                 <span
-                  class="c10 c16"
+                  class="c11 c17"
                 >
                   Save
                 </span>
@@ -1044,46 +1046,48 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
         </div>
       </div>
       <div
-        class="c17"
+        class="c18"
       >
         <div
-          class="c7 c18"
+          class="c7 c19"
         >
           <div
-            class="c19"
+            class="c20"
           >
             <div
-              class="c7 c20"
+              class="c7 c21"
             >
               <h2
-                class="c10 c21"
+                class="c11 c22"
               >
                 Details
               </h2>
               <div
-                class="c22"
+                class="c23"
               >
                 <div
-                  class="c23"
+                  class="c24"
                 >
                   <div
                     class=""
                   >
                     <div>
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c7 c24 c25"
+                          class="c7 c25"
                         >
                           <label
-                            class="c10 c26"
+                            class="c11 c26"
                             for="1"
                           >
                             <div
-                              class="c7 c9"
+                              class="c7 c10"
                             >
                               Name
                               <span
-                                class="c10 c27 c28"
+                                class="c11 c27 c28"
                               >
                                 *
                               </span>
@@ -1108,7 +1112,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </div>
                 </div>
                 <div
-                  class="c23"
+                  class="c24"
                 >
                   <div
                     class=""
@@ -1116,19 +1120,21 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                     <div
                       class="c31"
                     >
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c7 c24 c25"
+                          class="c7 c25"
                         >
                           <div
-                            class="c7 c9"
+                            class="c7 c10"
                           >
                             <label
-                              class="c10 c26"
+                              class="c11 c26"
                               for="3"
                             >
                               <div
-                                class="c7 c9"
+                                class="c7 c10"
                               >
                                 Description
                               </div>
@@ -1151,32 +1157,34 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </div>
                 </div>
                 <div
-                  class="c23"
+                  class="c24"
                 >
                   <div
                     class=""
                   >
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c7 c24 c25"
+                        class="c7 c25"
                       >
                         <label
-                          class="c10 c26"
+                          class="c11 c26"
                           for="5"
                         >
                           <div
-                            class="c7 c9"
+                            class="c7 c10"
                           >
                             Token duration
                             <span
-                              class="c10 c27 c28"
+                              class="c11 c27 c28"
                             >
                               *
                             </span>
                           </div>
                         </label>
                         <div
-                          class="c7 c9 c34"
+                          class="c7 c10 c34"
                         >
                           <button
                             aria-disabled="false"
@@ -1192,13 +1200,13 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             class="c7 c8 c36"
                           >
                             <div
-                              class="c7 c9"
+                              class="c7 c10"
                             >
                               <div
                                 class="c37"
                               >
                                 <span
-                                  class="c10 c38"
+                                  class="c11 c38"
                                   id="5-content"
                                 >
                                   Select
@@ -1206,7 +1214,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                               </div>
                             </div>
                             <div
-                              class="c7 c9"
+                              class="c7 c10"
                             >
                               <button
                                 aria-hidden="true"
@@ -1236,37 +1244,39 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                       </div>
                     </div>
                     <span
-                      class="c10 c42"
+                      class="c11 c42"
                     />
                   </div>
                 </div>
                 <div
-                  class="c23"
+                  class="c24"
                 >
                   <div
                     class=""
                   >
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c7 c24 c25"
+                        class="c7 c25"
                       >
                         <label
-                          class="c10 c26"
+                          class="c11 c26"
                           for="7"
                         >
                           <div
-                            class="c7 c9"
+                            class="c7 c10"
                           >
                             Token type
                             <span
-                              class="c10 c27 c28"
+                              class="c11 c27 c28"
                             >
                               *
                             </span>
                           </div>
                         </label>
                         <div
-                          class="c7 c9 c34"
+                          class="c7 c10 c34"
                         >
                           <button
                             aria-disabled="false"
@@ -1282,13 +1292,13 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             class="c7 c8 c36"
                           >
                             <div
-                              class="c7 c9"
+                              class="c7 c10"
                             >
                               <div
                                 class="c37"
                               >
                                 <span
-                                  class="c10 c38"
+                                  class="c11 c38"
                                   id="7-content"
                                 >
                                   Select
@@ -1296,7 +1306,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                               </div>
                             </div>
                             <div
-                              class="c7 c9"
+                              class="c7 c10"
                             >
                               <button
                                 aria-hidden="true"
@@ -1343,12 +1353,12 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   class="c7 c47"
                 >
                   <h2
-                    class="c10 c21"
+                    class="c11 c22"
                   >
                     Permissions
                   </h2>
                   <p
-                    class="c10 c48"
+                    class="c11 c48"
                   >
                     Only actions bound by a route are listed below.
                   </p>
@@ -1365,22 +1375,22 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                       class="c7 c52 c8 c53"
                     >
                       <div
-                        class="c7 c54 c9 c55"
+                        class="c7 c54 c55"
                       >
                         <button
                           aria-controls="accordion-content-8"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-labelledby="accordion-label-8"
-                          class="c7 c56 c9 c57 c58"
+                          class="c7 c56 c10 c57 c58"
                           data-strapi-accordion-toggle="true"
                           type="button"
                         >
                           <span
-                            class="c10 c59"
+                            class="c11 c59"
                           >
                             <span
-                              class="c10 c60"
+                              class="c11 c60"
                               id="accordion-label-8"
                             >
                               Address
@@ -1388,7 +1398,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                           </span>
                         </button>
                         <div
-                          class="c7 c9 c55"
+                          class="c7 c55"
                         >
                           <span
                             aria-hidden="true"
@@ -1424,22 +1434,22 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                       class="c7 c66 c8 c53"
                     >
                       <div
-                        class="c7 c54 c9 c55"
+                        class="c7 c54 c55"
                       >
                         <button
                           aria-controls="accordion-content-9"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-labelledby="accordion-label-9"
-                          class="c7 c56 c9 c57 c58"
+                          class="c7 c56 c10 c57 c58"
                           data-strapi-accordion-toggle="true"
                           type="button"
                         >
                           <span
-                            class="c10 c59"
+                            class="c11 c59"
                           >
                             <span
-                              class="c10 c60"
+                              class="c11 c60"
                               id="accordion-label-9"
                             >
                               Category
@@ -1447,7 +1457,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                           </span>
                         </button>
                         <div
-                          class="c7 c9 c55"
+                          class="c7 c55"
                         >
                           <span
                             aria-hidden="true"
@@ -1488,12 +1498,12 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   class="c7 c47"
                 >
                   <h3
-                    class="c10 c21"
+                    class="c11 c22"
                   >
                     Advanced settings
                   </h3>
                   <p
-                    class="c10 c48"
+                    class="c11 c48"
                   >
                     Select the application's actions or the plugin's actions and click on the cog icon to display the bound route
                   </p>
@@ -1531,7 +1541,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
 `;
 
 exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot when editing existing token 1`] = `
-.c13 {
+.c9 {
+  min-width: 0;
+}
+
+.c14 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -1542,7 +1556,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   cursor: pointer;
 }
 
-.c18 {
+.c19 {
   padding-right: 56px;
   padding-left: 56px;
 }
@@ -1559,20 +1573,20 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   padding-bottom: 8px;
 }
 
-.c20 {
+.c21 {
   background: #ffffff;
   padding: 24px;
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c21 {
+.c22 {
   background: #f6f6f9;
   padding: 12px;
   border-radius: 4px;
 }
 
-.c27 {
+.c28 {
   background: #ffffff;
   padding-top: 24px;
   padding-right: 32px;
@@ -1582,34 +1596,34 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c45 {
+.c44 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c47 {
+.c46 {
   padding-left: 12px;
 }
 
-.c54 {
+.c53 {
   background: #ffffff;
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c57 {
+.c56 {
   padding-top: 24px;
   padding-right: 32px;
   padding-bottom: 24px;
   padding-left: 32px;
 }
 
-.c59 {
+.c58 {
   background: #ffffff;
   padding: 16px;
 }
 
-.c78 {
+.c77 {
   background: #eaeaef;
   padding-top: 24px;
   padding-right: 32px;
@@ -1617,11 +1631,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   padding-left: 32px;
 }
 
-.c60 {
+.c59 {
   border-radius: 4px;
 }
 
-.c62 {
+.c61 {
   background: #f6f6f9;
   padding-top: 24px;
   padding-right: 24px;
@@ -1629,21 +1643,21 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   padding-left: 24px;
 }
 
-.c64 {
+.c63 {
   max-width: 100%;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c66 {
+.c65 {
   min-width: 0;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c71 {
+.c70 {
   background: #dcdce4;
   border-radius: 50%;
   width: 2rem;
@@ -1654,12 +1668,12 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   cursor: pointer;
 }
 
-.c73 {
+.c72 {
   color: #666687;
   width: 0.6875rem;
 }
 
-.c76 {
+.c75 {
   background: #ffffff;
   padding-top: 24px;
   padding-right: 24px;
@@ -1685,7 +1699,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   justify-content: space-between;
 }
 
-.c9 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1699,7 +1713,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   flex-direction: row;
 }
 
-.c12 {
+.c13 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1714,7 +1728,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   gap: 8px;
 }
 
-.c19 {
+.c20 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -1729,7 +1743,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   gap: 24px;
 }
 
-.c23 {
+.c24 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -1744,7 +1758,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   gap: 4px;
 }
 
-.c28 {
+.c29 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -1759,21 +1773,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   gap: 16px;
 }
 
-.c32 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c58 {
+.c57 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -1788,7 +1788,22 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   gap: 8px;
 }
 
-.c72 {
+.c64 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 12px;
+}
+
+.c71 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1809,7 +1824,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   justify-content: center;
 }
 
-.c11 {
+.c12 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
@@ -1820,47 +1835,47 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   color: #32324d;
 }
 
-.c16 {
+.c17 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c24 {
+.c25 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 500;
   color: #32324d;
 }
 
-.c26 {
+.c27 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #666687;
 }
 
-.c29 {
+.c30 {
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c34 {
+.c33 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c35 {
+.c34 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #d02b20;
 }
 
-.c46 {
+.c45 {
   font-size: 0.875rem;
   line-height: 1.43;
   display: block;
@@ -1870,13 +1885,13 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   color: #666687;
 }
 
-.c50 {
+.c49 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #666687;
 }
 
-.c52 {
+.c51 {
   font-size: 0.875rem;
   line-height: 1.43;
   display: block;
@@ -1886,13 +1901,13 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   color: #32324d;
 }
 
-.c69 {
+.c68 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #4945ff;
 }
 
-.c70 {
+.c69 {
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
@@ -1903,84 +1918,66 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   color: #4a4a6a;
 }
 
-.c61 {
+.c60 {
   border: 1px solid #f6f6f9;
 }
 
-.c61:hover:not([aria-disabled='true']) {
+.c60:hover:not([aria-disabled='true']) {
   border: 1px solid #4945ff;
 }
 
-.c61:hover:not([aria-disabled='true']) .c10 {
+.c60:hover:not([aria-disabled='true']) .c11 {
   color: #4945ff;
 }
 
-.c61:hover:not([aria-disabled='true']) > .c7 {
+.c60:hover:not([aria-disabled='true']) > .c7 {
   background: #f0f0ff;
 }
 
-.c61:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
+.c60:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
   background: #d9d8ff;
 }
 
-.c75 {
+.c74 {
   border: 1px solid #ffffff;
 }
 
-.c75:hover:not([aria-disabled='true']) {
+.c74:hover:not([aria-disabled='true']) {
   border: 1px solid #4945ff;
 }
 
-.c75:hover:not([aria-disabled='true']) .c10 {
+.c74:hover:not([aria-disabled='true']) .c11 {
   color: #4945ff;
 }
 
-.c75:hover:not([aria-disabled='true']) > .c7 {
+.c74:hover:not([aria-disabled='true']) > .c7 {
   background: #f0f0ff;
 }
 
-.c75:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
+.c74:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
   background: #d9d8ff;
 }
 
-.c74 path {
+.c73 path {
   fill: #666687;
 }
 
-.c33 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c33 > * + * {
-  margin-top: 4px;
-}
-
-.c65 > * {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c65 > * + * {
-  margin-left: 12px;
-}
-
-.c67 {
+.c66 {
   background: transparent;
   border: none;
   position: relative;
   outline: none;
 }
 
-.c67[aria-disabled='true'] {
+.c66[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c67[aria-disabled='true'] svg path {
+.c66[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c67 svg {
+.c66 svg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1988,11 +1985,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   font-size: 0.625rem;
 }
 
-.c67 svg path {
+.c66 svg path {
   fill: #4945ff;
 }
 
-.c67:after {
+.c66:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -2007,11 +2004,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 2px solid transparent;
 }
 
-.c67:focus-visible {
+.c66:focus-visible {
   outline: none;
 }
 
-.c67:focus-visible:after {
+.c66:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -2022,52 +2019,52 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 2px solid #4945ff;
 }
 
-.c68 {
+.c67 {
   text-align: left;
 }
 
-.c68 > span {
+.c67 > span {
   max-width: 100%;
 }
 
-.c68 svg {
+.c67 svg {
   width: 0.875rem;
   height: 0.875rem;
 }
 
-.c68 svg path {
+.c67 svg path {
   fill: #8e8ea9;
 }
 
-.c63 {
+.c62 {
   min-height: 5.5rem;
   border-radius: 4px;
 }
 
-.c63:hover svg path {
+.c62:hover svg path {
   fill: #4945ff;
 }
 
-.c14 {
+.c15 {
   position: relative;
   outline: none;
 }
 
-.c14 svg {
+.c15 svg {
   height: 12px;
   width: 12px;
 }
 
-.c14 svg > g,
-.c14 svg path {
+.c15 svg > g,
+.c15 svg path {
   fill: #ffffff;
 }
 
-.c14[aria-disabled='true'] {
+.c15[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c14:after {
+.c15:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -2082,11 +2079,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 2px solid transparent;
 }
 
-.c14:focus-visible {
+.c15:focus-visible {
   outline: none;
 }
 
-.c14:focus-visible:after {
+.c15:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -2097,7 +2094,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 2px solid #4945ff;
 }
 
-.c79 {
+.c78 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -2109,113 +2106,113 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   width: 1px;
 }
 
-.c80[aria-disabled='true'] .c10 {
+.c79[aria-disabled='true'] .c11 {
   color: #666687;
 }
 
-.c80[aria-disabled='true']:active .c10 {
+.c79[aria-disabled='true']:active .c11 {
   color: #666687;
 }
 
-.c15 {
+.c16 {
   height: 2rem;
   border: 1px solid #dcdce4;
   background: #ffffff;
 }
 
-.c15[aria-disabled='true'] {
+.c16[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c15[aria-disabled='true'] .c10 {
+.c16[aria-disabled='true'] .c11 {
   color: #666687;
 }
 
-.c15[aria-disabled='true'] svg > g,.c15[aria-disabled='true'] svg path {
+.c16[aria-disabled='true'] svg > g,.c16[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c15[aria-disabled='true']:active {
+.c16[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c15[aria-disabled='true']:active .c10 {
+.c16[aria-disabled='true']:active .c11 {
   color: #666687;
 }
 
-.c15[aria-disabled='true']:active svg > g,.c15[aria-disabled='true']:active svg path {
+.c16[aria-disabled='true']:active svg > g,.c16[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c15:hover {
+.c16:hover {
   background-color: #f6f6f9;
 }
 
-.c15:active {
+.c16:active {
   background-color: #eaeaef;
 }
 
-.c15 .c10 {
+.c16 .c11 {
   color: #32324d;
 }
 
-.c15 svg > g,
-.c15 svg path {
+.c16 svg > g,
+.c16 svg path {
   fill: #32324d;
 }
 
-.c17 {
+.c18 {
   height: 2rem;
 }
 
-.c17[aria-disabled='true'] {
+.c18[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c17[aria-disabled='true'] .c10 {
+.c18[aria-disabled='true'] .c11 {
   color: #666687;
 }
 
-.c17[aria-disabled='true'] svg > g,.c17[aria-disabled='true'] svg path {
+.c18[aria-disabled='true'] svg > g,.c18[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c17[aria-disabled='true']:active {
+.c18[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c17[aria-disabled='true']:active .c10 {
+.c18[aria-disabled='true']:active .c11 {
   color: #666687;
 }
 
-.c17[aria-disabled='true']:active svg > g,.c17[aria-disabled='true']:active svg path {
+.c18[aria-disabled='true']:active svg > g,.c18[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c17:hover {
+.c18:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c17:active {
+.c18:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c17 svg > g,
-.c17 svg path {
+.c18 svg > g,
+.c18 svg path {
   fill: #ffffff;
 }
 
-.c36 {
+.c35 {
   line-height: 0;
 }
 
-.c38 {
+.c37 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -2230,36 +2227,36 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   background: inherit;
 }
 
-.c38::-webkit-input-placeholder {
+.c37::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c38::-moz-placeholder {
+.c37::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c38:-ms-input-placeholder {
+.c37:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c38::placeholder {
+.c37::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c38[aria-disabled='true'] {
+.c37[aria-disabled='true'] {
   color: inherit;
 }
 
-.c38:focus {
+.c37:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c37 {
+.c36 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -2271,12 +2268,12 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   transition-duration: 0.2s;
 }
 
-.c37:focus-within {
+.c36:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c42 {
+.c41 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -2294,12 +2291,12 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   transition-duration: 0.2s;
 }
 
-.c42:focus-within {
+.c41:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c51 {
+.c50 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -2315,28 +2312,28 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   transition-duration: 0.2s;
 }
 
-.c51:focus-within {
+.c50:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c48 {
+.c47 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c48 svg {
+.c47 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c48 svg path {
+.c47 svg path {
   fill: #666687;
 }
 
-.c49 {
+.c48 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2346,11 +2343,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   cursor: not-allowed;
 }
 
-.c49 svg {
+.c48 svg {
   width: 0.375rem;
 }
 
-.c53 {
+.c52 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2359,11 +2356,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: none;
 }
 
-.c53 svg {
+.c52 svg {
   width: 0.375rem;
 }
 
-.c43 {
+.c42 {
   position: absolute;
   left: 0;
   right: 0;
@@ -2374,40 +2371,40 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: none;
 }
 
-.c43:focus {
+.c42:focus {
   outline: none;
 }
 
-.c43[aria-disabled='true'] {
+.c42[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c44 {
+.c43 {
   width: 100%;
 }
 
-.c30 {
+.c31 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 20px;
 }
 
-.c55 {
+.c54 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
 }
 
-.c31 {
+.c32 {
   grid-column: span 6;
   max-width: 100%;
 }
 
-.c56 {
+.c55 {
   grid-column: span 7;
   max-width: 100%;
 }
 
-.c77 {
+.c76 {
   grid-column: span 5;
   max-width: 100%;
 }
@@ -2416,7 +2413,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   outline: none;
 }
 
-.c40 {
+.c39 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   padding-left: 16px;
@@ -2432,12 +2429,12 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   transition-duration: 0.2s;
 }
 
-.c40:focus-within {
+.c39:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c41 {
+.c40 {
   display: block;
   width: 100%;
   font-weight: 400;
@@ -2448,36 +2445,36 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   background: inherit;
 }
 
-.c41::-webkit-input-placeholder {
+.c40::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c41::-moz-placeholder {
+.c40::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c41:-ms-input-placeholder {
+.c40:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c41::placeholder {
+.c40::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c41:focus-within {
+.c40:focus-within {
   outline: none;
 }
 
-.c39 textarea {
+.c38 textarea {
   height: 5rem;
   line-height: 1.25rem;
 }
 
-.c39 textarea::-webkit-input-placeholder {
+.c38 textarea::-webkit-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -2485,7 +2482,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   opacity: 1;
 }
 
-.c39 textarea::-moz-placeholder {
+.c38 textarea::-moz-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -2493,7 +2490,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   opacity: 1;
 }
 
-.c39 textarea:-ms-input-placeholder {
+.c38 textarea:-ms-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -2501,7 +2498,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   opacity: 1;
 }
 
-.c39 textarea::placeholder {
+.c38 textarea::placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -2509,16 +2506,16 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   opacity: 1;
 }
 
-.c22 {
+.c23 {
   margin-right: 24px;
 }
 
-.c22 svg {
+.c23 svg {
   width: 2rem;
   height: 2rem;
 }
 
-.c25 {
+.c26 {
   word-break: break-all;
 }
 
@@ -2593,37 +2590,37 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
 }
 
 @media (max-width:68.75rem) {
-  .c31 {
+  .c32 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c31 {
+  .c32 {
     grid-column: span 12;
   }
 }
 
 @media (max-width:68.75rem) {
-  .c56 {
+  .c55 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c56 {
+  .c55 {
     grid-column: span;
   }
 }
 
 @media (max-width:68.75rem) {
-  .c77 {
+  .c76 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c77 {
+  .c76 {
     grid-column: span;
   }
 }
@@ -2682,20 +2679,20 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
             class="c7 c8"
           >
             <div
-              class="c7 c9"
+              class="c7 c9 c10"
             >
               <h1
-                class="c10 c11"
+                class="c11 c12"
               >
                 My super token
               </h1>
             </div>
             <div
-              class="c7 c12"
+              class="c7 c13"
             >
               <button
                 aria-disabled="false"
-                class="c7 c13 c12 c14 c15"
+                class="c7 c14 c13 c15 c16"
                 name="regenerate"
                 type="button"
               >
@@ -2719,14 +2716,14 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </svg>
                 </div>
                 <span
-                  class="c10 c16"
+                  class="c11 c17"
                 >
                   Regenerate
                 </span>
               </button>
               <button
                 aria-disabled="false"
-                class="c7 c13 c12 c14 c17"
+                class="c7 c14 c13 c15 c18"
                 type="submit"
               >
                 <div
@@ -2747,7 +2744,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </svg>
                 </div>
                 <span
-                  class="c10 c16"
+                  class="c11 c17"
                 >
                   Save
                 </span>
@@ -2757,16 +2754,16 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
         </div>
       </div>
       <div
-        class="c18"
+        class="c19"
       >
         <div
-          class="c7 c19"
+          class="c7 c20"
         >
           <div
-            class="c7 c20 c9"
+            class="c7 c21 c10"
           >
             <div
-              class="c7 c21 c9 c22"
+              class="c7 c22 c10 c23"
             >
               <svg
                 fill="none"
@@ -2782,72 +2779,74 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
               </svg>
             </div>
             <div
-              class="c7 c23"
+              class="c7 c24"
             >
               <div
-                class="c7 c9"
+                class="c7 c10"
               >
                 <span
-                  class="c10 c24 c25"
+                  class="c11 c25 c26"
                 >
                   This token isn’t accessible anymore.
                 </span>
               </div>
               <span
-                class="c10 c26"
+                class="c11 c27"
               >
                 For security reasons, you can only see your token once.
               </span>
             </div>
           </div>
           <div
-            class="c27"
+            class="c28"
           >
             <div
-              class="c7 c28"
+              class="c7 c29"
             >
               <h2
-                class="c10 c29"
+                class="c11 c30"
               >
                 Details
               </h2>
               <div
-                class="c30"
+                class="c31"
               >
                 <div
-                  class="c31"
+                  class="c32"
                 >
                   <div
                     class=""
                   >
                     <div>
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c7 c32 c33"
+                          class="c7 c24"
                         >
                           <label
-                            class="c10 c34"
+                            class="c11 c33"
                             for="12"
                           >
                             <div
-                              class="c7 c9"
+                              class="c7 c10"
                             >
                               Name
                               <span
-                                class="c10 c35 c36"
+                                class="c11 c34 c35"
                               >
                                 *
                               </span>
                             </div>
                           </label>
                           <div
-                            class="c7 c8 c37"
+                            class="c7 c8 c36"
                           >
                             <input
                               aria-disabled="false"
                               aria-invalid="false"
                               aria-required="true"
-                              class="c38"
+                              class="c37"
                               id="12"
                               name="name"
                               value="My super token"
@@ -2859,39 +2858,41 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </div>
                 </div>
                 <div
-                  class="c31"
+                  class="c32"
                 >
                   <div
                     class=""
                   >
                     <div
-                      class="c39"
+                      class="c38"
                     >
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c7 c32 c33"
+                          class="c7 c24"
                         >
                           <div
-                            class="c7 c9"
+                            class="c7 c10"
                           >
                             <label
-                              class="c10 c34"
+                              class="c11 c33"
                               for="14"
                             >
                               <div
-                                class="c7 c9"
+                                class="c7 c10"
                               >
                                 Description
                               </div>
                             </label>
                           </div>
                           <div
-                            class="c40"
+                            class="c39"
                           >
                             <textarea
                               aria-invalid="false"
                               aria-required="false"
-                              class="c41"
+                              class="c40"
                               id="14"
                               name="description"
                             >
@@ -2904,32 +2905,34 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </div>
                 </div>
                 <div
-                  class="c31"
+                  class="c32"
                 >
                   <div
                     class=""
                   >
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c7 c32 c33"
+                        class="c7 c24"
                       >
                         <label
-                          class="c10 c34"
+                          class="c11 c33"
                           for="16"
                         >
                           <div
-                            class="c7 c9"
+                            class="c7 c10"
                           >
                             Token duration
                             <span
-                              class="c10 c35 c36"
+                              class="c11 c34 c35"
                             >
                               *
                             </span>
                           </div>
                         </label>
                         <div
-                          class="c7 c9 c42"
+                          class="c7 c10 c41"
                           disabled=""
                         >
                           <button
@@ -2937,22 +2940,22 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-labelledby="16 16-label 16-content"
-                            class="c43"
+                            class="c42"
                             id="16"
                             name="lifespan"
                             type="button"
                           />
                           <div
-                            class="c7 c8 c44"
+                            class="c7 c8 c43"
                           >
                             <div
-                              class="c7 c9"
+                              class="c7 c10"
                             >
                               <div
-                                class="c45"
+                                class="c44"
                               >
                                 <span
-                                  class="c10 c46"
+                                  class="c11 c45"
                                   id="16-content"
                                 >
                                   Select
@@ -2960,11 +2963,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                               </div>
                             </div>
                             <div
-                              class="c7 c9"
+                              class="c7 c10"
                             >
                               <button
                                 aria-hidden="true"
-                                class="c47 c48 c49"
+                                class="c46 c47 c48"
                                 disabled=""
                                 tabindex="-1"
                                 title="Carret Down Button"
@@ -2991,61 +2994,63 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                       </div>
                     </div>
                     <span
-                      class="c10 c50"
+                      class="c11 c49"
                     >
                       Expiration date: Unlimited
                     </span>
                   </div>
                 </div>
                 <div
-                  class="c31"
+                  class="c32"
                 >
                   <div
                     class=""
                   >
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c7 c32 c33"
+                        class="c7 c24"
                       >
                         <label
-                          class="c10 c34"
+                          class="c11 c33"
                           for="18"
                         >
                           <div
-                            class="c7 c9"
+                            class="c7 c10"
                           >
                             Token type
                             <span
-                              class="c10 c35 c36"
+                              class="c11 c34 c35"
                             >
                               *
                             </span>
                           </div>
                         </label>
                         <div
-                          class="c7 c9 c51"
+                          class="c7 c10 c50"
                         >
                           <button
                             aria-disabled="false"
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-labelledby="18 18-label 18-content"
-                            class="c43"
+                            class="c42"
                             id="18"
                             name="type"
                             type="button"
                           />
                           <div
-                            class="c7 c8 c44"
+                            class="c7 c8 c43"
                           >
                             <div
-                              class="c7 c9"
+                              class="c7 c10"
                             >
                               <div
-                                class="c45"
+                                class="c44"
                               >
                                 <span
-                                  class="c10 c52"
+                                  class="c11 c51"
                                   id="18-content"
                                 >
                                   Read-only
@@ -3053,11 +3058,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                               </div>
                             </div>
                             <div
-                              class="c7 c9"
+                              class="c7 c10"
                             >
                               <button
                                 aria-hidden="true"
-                                class="c47 c48 c53"
+                                class="c46 c47 c52"
                                 tabindex="-1"
                                 title="Carret Down Button"
                                 type="button"
@@ -3088,56 +3093,56 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
             </div>
           </div>
           <div
-            class="c54 c55"
+            class="c53 c54"
           >
             <div
-              class="c56"
+              class="c55"
             >
               <div
-                class="c57"
+                class="c56"
               >
                 <div
-                  class="c7 c58"
+                  class="c7 c57"
                 >
                   <h2
-                    class="c10 c29"
+                    class="c11 c30"
                   >
                     Permissions
                   </h2>
                   <p
-                    class="c10 c26"
+                    class="c11 c27"
                   >
                     Only actions bound by a route are listed below.
                   </p>
                 </div>
                 <div
-                  class="c59"
+                  class="c58"
                 >
                   <div
                     aria-disabled="false"
-                    class="c60 c61"
+                    class="c59 c60"
                     data-strapi-expanded="false"
                   >
                     <div
-                      class="c7 c62 c8 c63"
+                      class="c7 c61 c8 c62"
                     >
                       <div
-                        class="c7 c64 c9 c65"
+                        class="c7 c63 c64"
                       >
                         <button
                           aria-controls="accordion-content-19"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-labelledby="accordion-label-19"
-                          class="c7 c66 c9 c67 c68"
+                          class="c7 c65 c10 c66 c67"
                           data-strapi-accordion-toggle="true"
                           type="button"
                         >
                           <span
-                            class="c10 c69"
+                            class="c11 c68"
                           >
                             <span
-                              class="c10 c70"
+                              class="c11 c69"
                               id="accordion-label-19"
                             >
                               Address
@@ -3145,15 +3150,15 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                           </span>
                         </button>
                         <div
-                          class="c7 c9 c65"
+                          class="c7 c64"
                         >
                           <span
                             aria-hidden="true"
-                            class="c7 c71 c72"
+                            class="c7 c70 c71"
                             data-strapi-dropdown="true"
                           >
                             <svg
-                              class="c73 c74"
+                              class="c72 c73"
                               fill="none"
                               height="1rem"
                               viewBox="0 0 14 8"
@@ -3174,29 +3179,29 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </div>
                   <div
                     aria-disabled="false"
-                    class="c60 c75"
+                    class="c59 c74"
                     data-strapi-expanded="false"
                   >
                     <div
-                      class="c7 c76 c8 c63"
+                      class="c7 c75 c8 c62"
                     >
                       <div
-                        class="c7 c64 c9 c65"
+                        class="c7 c63 c64"
                       >
                         <button
                           aria-controls="accordion-content-20"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-labelledby="accordion-label-20"
-                          class="c7 c66 c9 c67 c68"
+                          class="c7 c65 c10 c66 c67"
                           data-strapi-accordion-toggle="true"
                           type="button"
                         >
                           <span
-                            class="c10 c69"
+                            class="c11 c68"
                           >
                             <span
-                              class="c10 c70"
+                              class="c11 c69"
                               id="accordion-label-20"
                             >
                               Category
@@ -3204,15 +3209,15 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                           </span>
                         </button>
                         <div
-                          class="c7 c9 c65"
+                          class="c7 c64"
                         >
                           <span
                             aria-hidden="true"
-                            class="c7 c71 c72"
+                            class="c7 c70 c71"
                             data-strapi-dropdown="true"
                           >
                             <svg
-                              class="c73 c74"
+                              class="c72 c73"
                               fill="none"
                               height="1rem"
                               viewBox="0 0 14 8"
@@ -3235,22 +3240,22 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
               </div>
             </div>
             <div
-              class="c77"
+              class="c76"
             >
               <div
-                class="c78"
+                class="c77"
                 style="min-height: 100%;"
               >
                 <div
-                  class="c7 c58"
+                  class="c7 c57"
                 >
                   <h3
-                    class="c10 c29"
+                    class="c11 c30"
                   >
                     Advanced settings
                   </h3>
                   <p
-                    class="c10 c26"
+                    class="c11 c27"
                   >
                     Select the application's actions or the plugin's actions and click on the cog icon to display the bound route
                   </p>
@@ -3263,7 +3268,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
     </form>
   </main>
   <div
-    class="c79"
+    class="c78"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js
index 6f7fa2ba37..8332f8bc08 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js
@@ -124,27 +124,31 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         padding-left: 56px;
       }
 
-      .c14 {
+      .c3 {
+        min-width: 0;
+      }
+
+      .c15 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c15 {
+      .c16 {
         background: #ffffff;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c17 {
+      .c18 {
         position: relative;
       }
 
-      .c19 {
+      .c20 {
         padding-right: 24px;
         padding-left: 24px;
       }
 
-      .c27 {
+      .c28 {
         padding: 8px;
         border-radius: 4px;
         border-width: 0;
@@ -154,11 +158,11 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         cursor: pointer;
       }
 
-      .c34 {
+      .c35 {
         max-width: 15.625rem;
       }
 
-      .c42 {
+      .c43 {
         padding-left: 4px;
       }
 
@@ -180,7 +184,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         justify-content: space-between;
       }
 
-      .c3 {
+      .c4 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -194,7 +198,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         flex-direction: row;
       }
 
-      .c28 {
+      .c29 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -212,7 +216,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         justify-content: center;
       }
 
-      .c38 {
+      .c39 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -230,20 +234,20 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         justify-content: end;
       }
 
-      .c5 {
+      .c6 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c13 {
+      .c14 {
         font-size: 1rem;
         line-height: 1.5;
         color: #666687;
       }
 
-      .c25 {
+      .c26 {
         font-weight: 600;
         font-size: 0.6875rem;
         line-height: 1.45;
@@ -251,17 +255,6 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         color: #666687;
       }
 
-      .c35 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-weight: 600;
-        color: #32324d;
-      }
-
       .c36 {
         font-size: 0.875rem;
         line-height: 1.43;
@@ -269,35 +262,46 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        font-weight: 600;
         color: #32324d;
       }
 
       .c37 {
         font-size: 0.875rem;
         line-height: 1.43;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         color: #32324d;
       }
 
-      .c29 {
+      .c38 {
+        font-size: 0.875rem;
+        line-height: 1.43;
+        color: #32324d;
+      }
+
+      .c30 {
         position: relative;
         outline: none;
       }
 
-      .c29 svg {
+      .c30 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c29 svg > g,
-      .c29 svg path {
+      .c30 svg > g,
+      .c30 svg path {
         fill: #ffffff;
       }
 
-      .c29[aria-disabled='true'] {
+      .c30[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c29:after {
+      .c30:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -312,11 +316,11 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         border: 2px solid transparent;
       }
 
-      .c29:focus-visible {
+      .c30:focus-visible {
         outline: none;
       }
 
-      .c29:focus-visible:after {
+      .c30:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -327,7 +331,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c31 {
+      .c32 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -339,38 +343,38 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         width: 1px;
       }
 
-      .c43[aria-disabled='true'] .c4 {
+      .c44[aria-disabled='true'] .c5 {
         color: #666687;
       }
 
-      .c43[aria-disabled='true']:active .c4 {
+      .c44[aria-disabled='true']:active .c5 {
         color: #666687;
       }
 
-      .c43:active .c4 {
+      .c44:active .c5 {
         color: #4945ff;
       }
 
-      .c43 .c4 {
+      .c44 .c5 {
         color: #271fe0;
       }
 
-      .c30 svg > g,
-      .c30 svg path {
+      .c31 svg > g,
+      .c31 svg path {
         fill: #8e8ea9;
       }
 
-      .c30:hover svg > g,
-      .c30:hover svg path {
+      .c31:hover svg > g,
+      .c31:hover svg path {
         fill: #666687;
       }
 
-      .c30:active svg > g,
-      .c30:active svg path {
+      .c31:active svg > g,
+      .c31:active svg path {
         fill: #a5a5ba;
       }
 
-      .c30[aria-disabled='true'] svg path {
+      .c31[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
@@ -378,17 +382,17 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         outline: none;
       }
 
-      .c16 {
+      .c17 {
         overflow: hidden;
         border: 1px solid #eaeaef;
       }
 
-      .c21 {
+      .c22 {
         width: 100%;
         white-space: nowrap;
       }
 
-      .c18:before {
+      .c19:before {
         background: linear-gradient(90deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -398,7 +402,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         left: 0;
       }
 
-      .c18:after {
+      .c19:after {
         background: linear-gradient(270deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -409,60 +413,60 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         top: 0;
       }
 
-      .c20 {
+      .c21 {
         overflow-x: auto;
       }
 
-      .c33 tr:last-of-type {
+      .c34 tr:last-of-type {
         border-bottom: none;
       }
 
-      .c22 {
-        border-bottom: 1px solid #eaeaef;
-      }
-
       .c23 {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c23 td,
-      .c23 th {
+      .c24 {
+        border-bottom: 1px solid #eaeaef;
+      }
+
+      .c24 td,
+      .c24 th {
         padding: 16px;
       }
 
-      .c23 td:first-of-type,
-      .c23 th:first-of-type {
+      .c24 td:first-of-type,
+      .c24 th:first-of-type {
         padding: 0 4px;
       }
 
-      .c23 th {
+      .c24 th {
         padding-top: 0;
         padding-bottom: 0;
         height: 3.5rem;
       }
 
-      .c24 {
+      .c25 {
         vertical-align: middle;
         text-align: left;
         color: #666687;
         outline-offset: -4px;
       }
 
-      .c24 input {
+      .c25 input {
         vertical-align: sub;
       }
 
-      .c26 svg {
+      .c27 svg {
         height: 0.25rem;
       }
 
-      .c32 {
+      .c33 {
         -webkit-transform: rotate(180deg);
         -ms-transform: rotate(180deg);
         transform: rotate(180deg);
       }
 
-      .c6 {
+      .c7 {
         background: #4945ff;
         padding-top: 8px;
         padding-right: 16px;
@@ -473,20 +477,20 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         border: 1px solid #4945ff;
       }
 
-      .c12 {
+      .c13 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c41 {
+      .c42 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #4945ff;
       }
 
-      .c7 {
+      .c8 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -501,7 +505,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         gap: 8px;
       }
 
-      .c10 {
+      .c11 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -515,26 +519,26 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         flex-direction: row;
       }
 
-      .c8 {
+      .c9 {
         position: relative;
         outline: none;
       }
 
-      .c8 svg {
+      .c9 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c8 svg > g,
-      .c8 svg path {
+      .c9 svg > g,
+      .c9 svg path {
         fill: #ffffff;
       }
 
-      .c8[aria-disabled='true'] {
+      .c9[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c8:after {
+      .c9:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -549,11 +553,11 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         border: 2px solid transparent;
       }
 
-      .c8:focus-visible {
+      .c9:focus-visible {
         outline: none;
       }
 
-      .c8:focus-visible:after {
+      .c9:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -564,7 +568,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c39 {
+      .c40 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -579,15 +583,15 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         outline: none;
       }
 
-      .c39 svg path {
+      .c40 svg path {
         fill: #4945ff;
       }
 
-      .c39 svg {
+      .c40 svg {
         font-size: 0.625rem;
       }
 
-      .c39:after {
+      .c40:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -602,11 +606,11 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         border: 2px solid transparent;
       }
 
-      .c39:focus-visible {
+      .c40:focus-visible {
         outline: none;
       }
 
-      .c39:focus-visible:after {
+      .c40:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -617,58 +621,58 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c9 {
+      .c10 {
         -webkit-text-decoration: none;
         text-decoration: none;
       }
 
-      .c9[aria-disabled='true'] {
+      .c10[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c9[aria-disabled='true'] .c11 {
+      .c10[aria-disabled='true'] .c12 {
         color: #666687;
       }
 
-      .c9[aria-disabled='true'] svg > g,.c9[aria-disabled='true'] svg path {
+      .c10[aria-disabled='true'] svg > g,.c10[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c9[aria-disabled='true']:active {
+      .c10[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c9[aria-disabled='true']:active .c11 {
+      .c10[aria-disabled='true']:active .c12 {
         color: #666687;
       }
 
-      .c9[aria-disabled='true']:active svg > g,.c9[aria-disabled='true']:active svg path {
+      .c10[aria-disabled='true']:active svg > g,.c10[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c9:hover {
+      .c10:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c9:active {
+      .c10:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c9 svg > g,
-      .c9 svg path {
+      .c10 svg > g,
+      .c10 svg path {
         fill: #ffffff;
       }
 
-      .c40 svg path {
+      .c41 svg path {
         fill: #8e8ea9;
       }
 
-      .c40:hover svg path,
-      .c40:focus svg path {
+      .c41:hover svg path,
+      .c41:focus svg path {
         fill: #32324d;
       }
 
@@ -690,23 +694,23 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
               class="c2"
             >
               <div
-                class="c3"
+                class="c3 c4"
               >
                 <h1
-                  class="c4 c5"
+                  class="c5 c6"
                 >
                   API Tokens
                 </h1>
               </div>
               <a
                 aria-disabled="false"
-                class="c6 c7 c8 c9"
+                class="c7 c8 c9 c10"
                 data-testid="create-api-token-button"
                 href="/settings/api-tokens/create"
               >
                 <div
                   aria-hidden="true"
-                  class="c10"
+                  class="c11"
                 >
                   <svg
                     fill="none"
@@ -722,57 +726,57 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                   </svg>
                 </div>
                 <span
-                  class="c11 c12"
+                  class="c12 c13"
                 >
                   Create new API Token
                 </span>
               </a>
             </div>
             <p
-              class="c4 c13"
+              class="c5 c14"
             >
               List of generated tokens to consume the API
             </p>
           </div>
         </div>
         <div
-          class="c14"
+          class="c15"
         >
           <div
-            class="c15 c16"
+            class="c16 c17"
           >
             <div
-              class="c17 c18"
+              class="c18 c19"
             >
               <div
-                class="c19 c20"
+                class="c20 c21"
               >
                 <table
                   aria-colcount="5"
                   aria-rowcount="2"
-                  class="c21"
+                  class="c22"
                   role="grid"
                 >
                   <thead
-                    class="c22"
+                    class="c23"
                   >
                     <tr
                       aria-rowindex="1"
-                      class="c23"
+                      class="c24"
                     >
                       <th
                         aria-colindex="1"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                         tabindex="0"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <span>
                             <span
                               aria-labelledby="0"
-                              class="c4 c25"
+                              class="c5 c26"
                               label="Name"
                               tabindex="-1"
                             >
@@ -780,24 +784,24 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c26"
+                            class="c27"
                           >
                             <span>
                               <button
                                 aria-disabled="false"
                                 aria-labelledby="1"
-                                class="c27 c28 c29 c30"
+                                class="c28 c29 c30 c31"
                                 tabindex="-1"
                                 type="button"
                               >
                                 <span
-                                  class="c31"
+                                  class="c32"
                                 >
                                   Sort on Name
                                 </span>
                                 <svg
                                   aria-hidden="true"
-                                  class="c32"
+                                  class="c33"
                                   fill="none"
                                   focusable="false"
                                   height="1rem"
@@ -819,16 +823,16 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                       </th>
                       <th
                         aria-colindex="2"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <span>
                             <span
                               aria-labelledby="2"
-                              class="c4 c25"
+                              class="c5 c26"
                               label="Description"
                               tabindex="-1"
                             >
@@ -836,22 +840,22 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c26"
+                            class="c27"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="3"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <span>
                             <span
                               aria-labelledby="3"
-                              class="c4 c25"
+                              class="c5 c26"
                               label="Created at"
                               tabindex="-1"
                             >
@@ -859,22 +863,22 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c26"
+                            class="c27"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="4"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <span>
                             <span
                               aria-labelledby="4"
-                              class="c4 c25"
+                              class="c5 c26"
                               label="Last used"
                               tabindex="-1"
                             >
@@ -882,73 +886,73 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c26"
+                            class="c27"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="5"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <div
-                            class="c31"
+                            class="c32"
                           >
                             Actions
                           </div>
                           <span
-                            class="c26"
+                            class="c27"
                           />
                         </div>
                       </th>
                     </tr>
                   </thead>
                   <tbody
-                    class="c33"
+                    class="c34"
                     entriestodelete=""
                     headers="[object Object],[object Object],[object Object],[object Object]"
                   >
                     <tr
                       aria-rowindex="2"
-                      class="c23"
+                      class="c24"
                       style="cursor: pointer;"
                     >
                       <td
                         aria-colindex="1"
-                        class="c34 c24"
+                        class="c35 c25"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c4 c35"
+                          class="c5 c36"
                         >
                           My super token
                         </span>
                       </td>
                       <td
                         aria-colindex="2"
-                        class="c34 c24"
+                        class="c35 c25"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c4 c36"
+                          class="c5 c37"
                         >
                           This describe my super token
                         </span>
                       </td>
                       <td
                         aria-colindex="3"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c4 c37"
+                          class="c5 c38"
                         >
                           <time
                             datetime="2021-11-15T00:00:00.000Z"
@@ -960,27 +964,27 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                       </td>
                       <td
                         aria-colindex="4"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                         tabindex="-1"
                       />
                       <td
                         aria-colindex="5"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <div
-                          class="c38"
+                          class="c39"
                         >
                           <a
-                            class="c39 c40"
+                            class="c40 c41"
                             href="/settings/api-tokens/1"
                             tabindex="-1"
                             title="Edit My super token"
                           >
                             <span
-                              class="c11 c41"
+                              class="c12 c42"
                             >
                               <svg
                                 fill="none"
@@ -999,19 +1003,19 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                             </span>
                           </a>
                           <div
-                            class="c42"
+                            class="c43"
                           >
                             <span>
                               <button
                                 aria-disabled="false"
                                 aria-labelledby="5"
-                                class="c27 c28 c29 c30"
+                                class="c28 c29 c30 c31"
                                 name="delete"
                                 tabindex="-1"
                                 type="button"
                               >
                                 <span
-                                  class="c31"
+                                  class="c32"
                                 >
                                   Delete My super token
                                 </span>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/__snapshots__/index.test.js.snap
index 7bed57fc0b..1c86504e3a 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/__snapshots__/index.test.js.snap
@@ -1,1876 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ApplicationsInfosPage || LogoInput from computer should render upload modal with from computer tab 1`] = `
-.c5 {
-  background: #f6f6f9;
-  padding: 8px;
-  border-radius: 4px;
-  border-color: #dcdce4;
-  border: 1px solid #dcdce4;
-}
-
-.c6 {
-  position: relative;
-}
-
-.c8 {
-  padding-right: 8px;
-  padding-left: 8px;
-  overflow: hidden;
-  width: 100%;
-}
-
-.c10 {
-  height: 124px;
-}
-
-.c13 {
-  max-width: 40%;
-  max-height: 40%;
-}
-
-.c14 {
-  position: absolute;
-  bottom: 4px;
-  width: 100%;
-}
-
-.c16 {
-  padding: 8px;
-  border-radius: 4px;
-  border-color: #dcdce4;
-  border: 1px solid #dcdce4;
-  width: 2rem;
-  height: 2rem;
-  cursor: pointer;
-}
-
-.c20 {
-  padding-top: 8px;
-  padding-right: 16px;
-  padding-left: 16px;
-}
-
-.c22 {
-  background: #212134;
-  padding: 8px;
-  border-radius: 4px;
-  position: absolute;
-}
-
-.c25 {
-  padding-right: 40px;
-  padding-left: 40px;
-  position: fixed;
-  z-index: 4;
-}
-
-.c27 {
-  background: #ffffff;
-  border-radius: 4px;
-  box-shadow: 0px 2px 15px rgba(33,33,52,0.1);
-}
-
-.c29 {
-  background: #f6f6f9;
-  padding-top: 16px;
-  padding-right: 20px;
-  padding-bottom: 16px;
-  padding-left: 20px;
-}
-
-.c33 {
-  padding-right: 40px;
-  padding-left: 40px;
-}
-
-.c35 {
-  padding: 16px;
-}
-
-.c40 {
-  background: #eaeaef;
-}
-
-.c42 {
-  padding-top: 24px;
-  padding-right: 40px;
-  padding-bottom: 24px;
-  padding-left: 40px;
-}
-
-.c44 {
-  background: #f6f6f9;
-  padding-top: 48px;
-  padding-bottom: 32px;
-  border-radius: 4px;
-  border-style: dashed;
-  border-width: 1px;
-  border-color: #c0c0cf;
-  position: relative;
-}
-
-.c46 {
-  color: #4945ff;
-  width: 3.75rem;
-  height: 3.75rem;
-}
-
-.c48 {
-  padding-top: 12px;
-  padding-bottom: 20px;
-}
-
-.c51 {
-  background: #4945ff;
-  padding: 8px;
-  padding-right: 16px;
-  padding-left: 16px;
-  border-radius: 4px;
-  border-color: #4945ff;
-  border: 1px solid #4945ff;
-  cursor: pointer;
-}
-
-.c54 {
-  padding-top: 24px;
-}
-
-.c0 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c4 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c11 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c31 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.c43 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.c45 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c52 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-}
-
-.c3 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  font-weight: 600;
-  color: #32324d;
-}
-
-.c21 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #666687;
-}
-
-.c24 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  font-weight: 600;
-  color: #ffffff;
-}
-
-.c32 {
-  font-size: 0.875rem;
-  line-height: 1.43;
-  font-weight: 600;
-  color: #32324d;
-}
-
-.c37 {
-  font-weight: 600;
-  font-size: 0.6875rem;
-  line-height: 1.45;
-  text-transform: uppercase;
-  color: #4945ff;
-}
-
-.c39 {
-  font-weight: 600;
-  font-size: 0.6875rem;
-  line-height: 1.45;
-  text-transform: uppercase;
-  color: #666687;
-}
-
-.c49 {
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.25;
-  color: #32324d;
-}
-
-.c55 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  color: #666687;
-}
-
-.c47 path {
-  fill: #4945ff;
-}
-
-.c1 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c1 > * + * {
-  margin-top: 4px;
-}
-
-.c15 > * {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c15 > * + * {
-  margin-left: 4px;
-}
-
-.c17 {
-  position: relative;
-  outline: none;
-}
-
-.c17 svg {
-  height: 12px;
-  width: 12px;
-}
-
-.c17 svg > g,
-.c17 svg path {
-  fill: #ffffff;
-}
-
-.c17[aria-disabled='true'] {
-  pointer-events: none;
-}
-
-.c17:after {
-  -webkit-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -4px;
-  bottom: -4px;
-  left: -4px;
-  right: -4px;
-  border: 2px solid transparent;
-}
-
-.c17:focus-visible {
-  outline: none;
-}
-
-.c17:focus-visible:after {
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -5px;
-  bottom: -5px;
-  left: -5px;
-  right: -5px;
-  border: 2px solid #4945ff;
-}
-
-.c19 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.c53 {
-  height: 2rem;
-}
-
-.c53[aria-disabled='true'] {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c53[aria-disabled='true'] .c2 {
-  color: #666687;
-}
-
-.c53[aria-disabled='true'] svg > g,.c53[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c53[aria-disabled='true']:active {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c53[aria-disabled='true']:active .c2 {
-  color: #666687;
-}
-
-.c53[aria-disabled='true']:active svg > g,.c53[aria-disabled='true']:active svg path {
-  fill: #666687;
-}
-
-.c53:hover {
-  border: 1px solid #7b79ff;
-  background: #7b79ff;
-}
-
-.c53:active {
-  border: 1px solid #4945ff;
-  background: #4945ff;
-}
-
-.c53 svg > g,
-.c53 svg path {
-  fill: #ffffff;
-}
-
-.c58 {
-  height: 2rem;
-  border: 1px solid #dcdce4;
-  background: #ffffff;
-}
-
-.c58[aria-disabled='true'] {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c58[aria-disabled='true'] .c2 {
-  color: #666687;
-}
-
-.c58[aria-disabled='true'] svg > g,.c58[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c58[aria-disabled='true']:active {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c58[aria-disabled='true']:active .c2 {
-  color: #666687;
-}
-
-.c58[aria-disabled='true']:active svg > g,.c58[aria-disabled='true']:active svg path {
-  fill: #666687;
-}
-
-.c58:hover {
-  background-color: #f6f6f9;
-}
-
-.c58:active {
-  background-color: #eaeaef;
-}
-
-.c58 .c2 {
-  color: #32324d;
-}
-
-.c58 svg > g,
-.c58 svg path {
-  fill: #32324d;
-}
-
-.c23 {
-  z-index: 4;
-  display: none;
-}
-
-.c7 {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  grid-template-areas: 'startAction slides endAction';
-}
-
-.c9 {
-  grid-area: slides;
-}
-
-.c12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c41 {
-  height: 1px;
-  border: none;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin: 0;
-}
-
-.c18 svg > g,
-.c18 svg path {
-  fill: #8e8ea9;
-}
-
-.c18:hover svg > g,
-.c18:hover svg path {
-  fill: #666687;
-}
-
-.c18:active svg > g,
-.c18:active svg path {
-  fill: #a5a5ba;
-}
-
-.c18[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c26 {
-  inset: 0;
-  background: #32324d1F;
-}
-
-.c28 {
-  width: 51.875rem;
-}
-
-.c30 {
-  border-radius: 4px 4px 0 0;
-  border-bottom: 1px solid #eaeaef;
-}
-
-.c56 {
-  border-radius: 0 0 4px 4px;
-  border-top: 1px solid #eaeaef;
-}
-
-.c57 > * + * {
-  margin-left: 8px;
-}
-
-.c36 {
-  border-bottom: 2px solid #4945ff;
-}
-
-.c38 {
-  border-bottom: 2px solid transparent;
-}
-
-.c34[aria-disabled='true'] {
-  cursor: not-allowed;
-}
-
-.c50 {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-}
-
-<body
-  class="lock-body-scroll"
->
-  <div>
-    <div>
-      <div
-        class="c0 c1"
-      >
-        <label
-          class="c2 c3"
-          for="39"
-        >
-          <div
-            class="c4"
-          >
-            logo input label
-          </div>
-        </label>
-        <div
-          class=""
-          id="39"
-        >
-          <div
-            class="c5"
-          >
-            <section
-              aria-label="logo input label"
-              aria-roledescription="carousel"
-              class="c6 c7"
-            >
-              <div
-                aria-live="polite"
-                class="c8 c9"
-                overflow="hidden"
-              >
-                <div
-                  aria-label="Logo slide"
-                  aria-roledescription="slide"
-                  class="c10 c11 c12"
-                  role="group"
-                >
-                  <img
-                    alt="Logo"
-                    class="c13"
-                    src="/admin/defaultLogo.png"
-                  />
-                </div>
-              </div>
-              <div
-                class="c14 c11 c15"
-              >
-                <span>
-                  <button
-                    aria-disabled="false"
-                    aria-labelledby="36"
-                    class="c16 c11 c17 c18"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="c19"
-                    >
-                      Change logo
-                    </span>
-                    <svg
-                      aria-hidden="true"
-                      fill="none"
-                      focusable="false"
-                      height="1rem"
-                      viewBox="0 0 24 24"
-                      width="1rem"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M24 13.604a.3.3 0 0 1-.3.3h-9.795V23.7a.3.3 0 0 1-.3.3h-3.21a.3.3 0 0 1-.3-.3v-9.795H.3a.3.3 0 0 1-.3-.3v-3.21a.3.3 0 0 1 .3-.3h9.795V.3a.3.3 0 0 1 .3-.3h3.21a.3.3 0 0 1 .3.3v9.795H23.7a.3.3 0 0 1 .3.3v3.21Z"
-                        fill="#212134"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </section>
-            <div
-              class="c20"
-            >
-              <span>
-                <div
-                  aria-labelledby="37"
-                  class="c11"
-                  tabindex="0"
-                >
-                  <span
-                    class="c2 c21"
-                  >
-                    logo.png
-                  </span>
-                </div>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="c19"
-    >
-      <p
-        aria-live="polite"
-        aria-relevant="all"
-        id="live-region-log"
-        role="log"
-      />
-      <p
-        aria-live="polite"
-        aria-relevant="all"
-        id="live-region-status"
-        role="status"
-      />
-      <p
-        aria-live="assertive"
-        aria-relevant="all"
-        id="live-region-alert"
-        role="alert"
-      />
-    </div>
-  </div>
-  <div
-    data-react-portal="true"
-  >
-    <div
-      class="c22 c23"
-      id="36"
-      role="tooltip"
-    >
-      <p
-        class="c2 c24"
-      >
-        Change logo
-      </p>
-    </div>
-  </div>
-  <div
-    data-react-portal="true"
-  >
-    <div
-      class="c22 c23"
-      id="37"
-      role="tooltip"
-    >
-      <p
-        class="c2 c24"
-      >
-        logo.png
-      </p>
-    </div>
-  </div>
-  <div
-    data-react-portal="true"
-  >
-    <div
-      class="c25 c11 c26"
-    >
-      <div>
-        <div>
-          <div
-            aria-labelledby="modal"
-            aria-modal="true"
-            class="c27 c28"
-            role="dialog"
-          >
-            <div
-              class="c29 c30"
-            >
-              <div
-                class="c31"
-              >
-                <h2
-                  class="c2 c32"
-                  id="modal"
-                >
-                  Upload logo
-                </h2>
-                <button
-                  aria-disabled="false"
-                  class="c16 c11 c17 c18"
-                  type="button"
-                >
-                  <span
-                    class="c19"
-                  >
-                    Close the modal
-                  </span>
-                  <svg
-                    aria-hidden="true"
-                    fill="none"
-                    focusable="false"
-                    height="1rem"
-                    viewBox="0 0 24 24"
-                    width="1rem"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                      fill="#212134"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div>
-              <div
-                class="c33"
-              >
-                <div
-                  aria-label="How do you want to upload your assets?"
-                  role="tablist"
-                >
-                  <button
-                    aria-controls="43-0-tabpanel"
-                    aria-disabled="false"
-                    aria-selected="true"
-                    class="c34"
-                    id="43-0-tab"
-                    role="tab"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <div
-                      class="c35 c36"
-                    >
-                      <span
-                        class="c2 c37"
-                      >
-                        From computer
-                      </span>
-                    </div>
-                  </button>
-                  <button
-                    aria-disabled="false"
-                    aria-selected="false"
-                    class="c34"
-                    id="43-1-tab"
-                    role="tab"
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <div
-                      class="c35 c38"
-                    >
-                      <span
-                        class="c2 c39"
-                      >
-                        From url
-                      </span>
-                    </div>
-                  </button>
-                </div>
-                <hr
-                  class="c40 c41"
-                />
-              </div>
-              <div>
-                <div
-                  aria-labelledby="43-0-tab"
-                  id="43-0-tabpanel"
-                  role="tabpanel"
-                  tabindex="0"
-                >
-                  <form>
-                    <div
-                      class="c42"
-                    >
-                      <div>
-                        <label
-                          for="logo-upload"
-                        >
-                          <div
-                            class="c43"
-                          >
-                            <div
-                              class="c44 c45"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                class="c46 c47"
-                                fill="none"
-                                height="1rem"
-                                viewBox="0 0 24 20"
-                                width="1rem"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M21.569 2.398H7.829v1.586h13.74c.47 0 .826.5.826 1.094v9.853l-2.791-3.17a2.13 2.13 0 0 0-.74-.55 2.214 2.214 0 0 0-.912-.196 2.215 2.215 0 0 0-.912.191 2.131 2.131 0 0 0-.74.546l-2.93 3.385-2.973-3.36a2.147 2.147 0 0 0-.741-.545 2.228 2.228 0 0 0-1.824.007c-.286.13-.538.319-.739.553l-2.931 3.432V7.653H2.51v9.894c.023.153.06.304.108.452v.127l.041.095c.057.142.126.28.207.412l.099.15c.074.107.157.207.247.302l.124.119c.13.118.275.222.43.309h.024c.36.214.775.327 1.198.325h16.515c.36-.004.716-.085 1.039-.24.323-.153.606-.375.827-.648a2.78 2.78 0 0 0 .504-.888c.066-.217.108-.44.124-.666V5.078a2.497 2.497 0 0 0-.652-1.81 2.706 2.706 0 0 0-1.776-.87Z"
-                                  fill="#32324D"
-                                />
-                                <path
-                                  d="M12.552 9.199c.912 0 1.651-.71 1.651-1.585 0-.876-.74-1.586-1.651-1.586-.912 0-1.652.71-1.652 1.586 0 .875.74 1.585 1.652 1.585ZM3.303 6.408h.826V3.997h2.477V2.41H4.129V0h-.826c-.219 0-.85.002-.826 0v2.411H0v1.586h2.477v2.41h.826Z"
-                                  fill="#32324D"
-                                />
-                              </svg>
-                              <div
-                                class="c48"
-                              >
-                                <span
-                                  class="c2 c49"
-                                >
-                                  Drag and Drop here or
-                                </span>
-                              </div>
-                              <input
-                                accept="image/jpeg,image/png,image/svg+xml"
-                                class="c50"
-                                cursor="pointer"
-                                id="logo-upload"
-                                name="files"
-                                tabindex="-1"
-                                type="file"
-                              />
-                              <button
-                                aria-disabled="false"
-                                class="c51 c52 c17 c53"
-                                type="button"
-                              >
-                                <span
-                                  class="c2 c24"
-                                >
-                                  Browse files
-                                </span>
-                              </button>
-                              <div
-                                class="c54"
-                              >
-                                <span
-                                  class="c2 c55"
-                                >
-                                  Max dimension: 750x750, Max size: 100KB
-                                </span>
-                              </div>
-                            </div>
-                          </div>
-                        </label>
-                      </div>
-                    </div>
-                  </form>
-                  <div
-                    class="c29 c56"
-                  >
-                    <div
-                      class="c31"
-                    >
-                      <div
-                        class="c4 c57"
-                      >
-                        <button
-                          aria-disabled="false"
-                          class="c51 c52 c17 c58"
-                          type="button"
-                        >
-                          <span
-                            class="c2 c24"
-                          >
-                            Cancel
-                          </span>
-                        </button>
-                      </div>
-                      <div
-                        class="c4 c57"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`ApplicationsInfosPage || LogoInput from url should render upload modal with from url tab 1`] = `
-.c5 {
-  background: #f6f6f9;
-  padding: 8px;
-  border-radius: 4px;
-  border-color: #dcdce4;
-  border: 1px solid #dcdce4;
-}
-
-.c6 {
-  position: relative;
-}
-
-.c8 {
-  padding-right: 8px;
-  padding-left: 8px;
-  overflow: hidden;
-  width: 100%;
-}
-
-.c10 {
-  height: 124px;
-}
-
-.c13 {
-  max-width: 40%;
-  max-height: 40%;
-}
-
-.c14 {
-  position: absolute;
-  bottom: 4px;
-  width: 100%;
-}
-
-.c16 {
-  padding: 8px;
-  border-radius: 4px;
-  border-color: #dcdce4;
-  border: 1px solid #dcdce4;
-  width: 2rem;
-  height: 2rem;
-  cursor: pointer;
-}
-
-.c20 {
-  padding-top: 8px;
-  padding-right: 16px;
-  padding-left: 16px;
-}
-
-.c22 {
-  background: #212134;
-  padding: 8px;
-  border-radius: 4px;
-  position: absolute;
-}
-
-.c25 {
-  padding-right: 40px;
-  padding-left: 40px;
-  position: fixed;
-  z-index: 4;
-}
-
-.c27 {
-  background: #ffffff;
-  border-radius: 4px;
-  box-shadow: 0px 2px 15px rgba(33,33,52,0.1);
-}
-
-.c29 {
-  background: #f6f6f9;
-  padding-top: 16px;
-  padding-right: 20px;
-  padding-bottom: 16px;
-  padding-left: 20px;
-}
-
-.c33 {
-  padding-right: 40px;
-  padding-left: 40px;
-}
-
-.c35 {
-  padding: 16px;
-}
-
-.c40 {
-  background: #eaeaef;
-}
-
-.c42 {
-  padding-top: 24px;
-  padding-right: 40px;
-  padding-bottom: 24px;
-  padding-left: 40px;
-}
-
-.c47 {
-  background: #4945ff;
-  padding: 8px;
-  padding-right: 16px;
-  padding-left: 16px;
-  border-radius: 4px;
-  border-color: #4945ff;
-  border: 1px solid #4945ff;
-  cursor: pointer;
-}
-
-.c0 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c4 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c11 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c31 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.c48 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-}
-
-.c3 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  font-weight: 600;
-  color: #32324d;
-}
-
-.c21 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #666687;
-}
-
-.c24 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  font-weight: 600;
-  color: #ffffff;
-}
-
-.c32 {
-  font-size: 0.875rem;
-  line-height: 1.43;
-  font-weight: 600;
-  color: #32324d;
-}
-
-.c39 {
-  font-weight: 600;
-  font-size: 0.6875rem;
-  line-height: 1.45;
-  text-transform: uppercase;
-  color: #4945ff;
-}
-
-.c37 {
-  font-weight: 600;
-  font-size: 0.6875rem;
-  line-height: 1.45;
-  text-transform: uppercase;
-  color: #666687;
-}
-
-.c1 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c1 > * + * {
-  margin-top: 4px;
-}
-
-.c15 > * {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c15 > * + * {
-  margin-left: 4px;
-}
-
-.c17 {
-  position: relative;
-  outline: none;
-}
-
-.c17 svg {
-  height: 12px;
-  width: 12px;
-}
-
-.c17 svg > g,
-.c17 svg path {
-  fill: #ffffff;
-}
-
-.c17[aria-disabled='true'] {
-  pointer-events: none;
-}
-
-.c17:after {
-  -webkit-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -4px;
-  bottom: -4px;
-  left: -4px;
-  right: -4px;
-  border: 2px solid transparent;
-}
-
-.c17:focus-visible {
-  outline: none;
-}
-
-.c17:focus-visible:after {
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -5px;
-  bottom: -5px;
-  left: -5px;
-  right: -5px;
-  border: 2px solid #4945ff;
-}
-
-.c19 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.c50 {
-  height: 2rem;
-}
-
-.c50[aria-disabled='true'] {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c50[aria-disabled='true'] .c2 {
-  color: #666687;
-}
-
-.c50[aria-disabled='true'] svg > g,.c50[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c50[aria-disabled='true']:active {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c50[aria-disabled='true']:active .c2 {
-  color: #666687;
-}
-
-.c50[aria-disabled='true']:active svg > g,.c50[aria-disabled='true']:active svg path {
-  fill: #666687;
-}
-
-.c50:hover {
-  border: 1px solid #7b79ff;
-  background: #7b79ff;
-}
-
-.c50:active {
-  border: 1px solid #4945ff;
-  background: #4945ff;
-}
-
-.c50 svg > g,
-.c50 svg path {
-  fill: #ffffff;
-}
-
-.c49 {
-  height: 2rem;
-  border: 1px solid #dcdce4;
-  background: #ffffff;
-}
-
-.c49[aria-disabled='true'] {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c49[aria-disabled='true'] .c2 {
-  color: #666687;
-}
-
-.c49[aria-disabled='true'] svg > g,.c49[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c49[aria-disabled='true']:active {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c49[aria-disabled='true']:active .c2 {
-  color: #666687;
-}
-
-.c49[aria-disabled='true']:active svg > g,.c49[aria-disabled='true']:active svg path {
-  fill: #666687;
-}
-
-.c49:hover {
-  background-color: #f6f6f9;
-}
-
-.c49:active {
-  background-color: #eaeaef;
-}
-
-.c49 .c2 {
-  color: #32324d;
-}
-
-.c49 svg > g,
-.c49 svg path {
-  fill: #32324d;
-}
-
-.c23 {
-  z-index: 4;
-  display: none;
-}
-
-.c7 {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  grid-template-areas: 'startAction slides endAction';
-}
-
-.c9 {
-  grid-area: slides;
-}
-
-.c44 {
-  border: none;
-  border-radius: 4px;
-  padding-bottom: 0.65625rem;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 0.65625rem;
-  color: #32324d;
-  font-weight: 400;
-  font-size: 0.875rem;
-  display: block;
-  width: 100%;
-  background: inherit;
-}
-
-.c44::-webkit-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c44::-moz-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c44:-ms-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c44::placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c44[aria-disabled='true'] {
-  color: inherit;
-}
-
-.c44:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-.c43 {
-  border: 1px solid #dcdce4;
-  border-radius: 4px;
-  background: #ffffff;
-  outline: none;
-  box-shadow: 0;
-  -webkit-transition-property: border-color,box-shadow,fill;
-  transition-property: border-color,box-shadow,fill;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-}
-
-.c43:focus-within {
-  border: 1px solid #4945ff;
-  box-shadow: #4945ff 0px 0px 0px 2px;
-}
-
-.c12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c41 {
-  height: 1px;
-  border: none;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin: 0;
-}
-
-.c18 svg > g,
-.c18 svg path {
-  fill: #8e8ea9;
-}
-
-.c18:hover svg > g,
-.c18:hover svg path {
-  fill: #666687;
-}
-
-.c18:active svg > g,
-.c18:active svg path {
-  fill: #a5a5ba;
-}
-
-.c18[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c26 {
-  inset: 0;
-  background: #32324d1F;
-}
-
-.c28 {
-  width: 51.875rem;
-}
-
-.c30 {
-  border-radius: 4px 4px 0 0;
-  border-bottom: 1px solid #eaeaef;
-}
-
-.c45 {
-  border-radius: 0 0 4px 4px;
-  border-top: 1px solid #eaeaef;
-}
-
-.c46 > * + * {
-  margin-left: 8px;
-}
-
-.c38 {
-  border-bottom: 2px solid #4945ff;
-}
-
-.c36 {
-  border-bottom: 2px solid transparent;
-}
-
-.c34[aria-disabled='true'] {
-  cursor: not-allowed;
-}
-
-<body
-  class="lock-body-scroll"
->
-  <div>
-    <div>
-      <div
-        class="c0 c1"
-      >
-        <label
-          class="c2 c3"
-          for="91"
-        >
-          <div
-            class="c4"
-          >
-            logo input label
-          </div>
-        </label>
-        <div
-          class=""
-          id="91"
-        >
-          <div
-            class="c5"
-          >
-            <section
-              aria-label="logo input label"
-              aria-roledescription="carousel"
-              class="c6 c7"
-            >
-              <div
-                aria-live="polite"
-                class="c8 c9"
-                overflow="hidden"
-              >
-                <div
-                  aria-label="Logo slide"
-                  aria-roledescription="slide"
-                  class="c10 c11 c12"
-                  role="group"
-                >
-                  <img
-                    alt="Logo"
-                    class="c13"
-                    src="/admin/defaultLogo.png"
-                  />
-                </div>
-              </div>
-              <div
-                class="c14 c11 c15"
-              >
-                <span>
-                  <button
-                    aria-disabled="false"
-                    aria-labelledby="88"
-                    class="c16 c11 c17 c18"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="c19"
-                    >
-                      Change logo
-                    </span>
-                    <svg
-                      aria-hidden="true"
-                      fill="none"
-                      focusable="false"
-                      height="1rem"
-                      viewBox="0 0 24 24"
-                      width="1rem"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M24 13.604a.3.3 0 0 1-.3.3h-9.795V23.7a.3.3 0 0 1-.3.3h-3.21a.3.3 0 0 1-.3-.3v-9.795H.3a.3.3 0 0 1-.3-.3v-3.21a.3.3 0 0 1 .3-.3h9.795V.3a.3.3 0 0 1 .3-.3h3.21a.3.3 0 0 1 .3.3v9.795H23.7a.3.3 0 0 1 .3.3v3.21Z"
-                        fill="#212134"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </section>
-            <div
-              class="c20"
-            >
-              <span>
-                <div
-                  aria-labelledby="89"
-                  class="c11"
-                  tabindex="0"
-                >
-                  <span
-                    class="c2 c21"
-                  >
-                    logo.png
-                  </span>
-                </div>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="c19"
-    >
-      <p
-        aria-live="polite"
-        aria-relevant="all"
-        id="live-region-log"
-        role="log"
-      />
-      <p
-        aria-live="polite"
-        aria-relevant="all"
-        id="live-region-status"
-        role="status"
-      />
-      <p
-        aria-live="assertive"
-        aria-relevant="all"
-        id="live-region-alert"
-        role="alert"
-      />
-    </div>
-  </div>
-  <div
-    data-react-portal="true"
-  >
-    <div
-      class="c22 c23"
-      id="88"
-      role="tooltip"
-    >
-      <p
-        class="c2 c24"
-      >
-        Change logo
-      </p>
-    </div>
-  </div>
-  <div
-    data-react-portal="true"
-  >
-    <div
-      class="c22 c23"
-      id="89"
-      role="tooltip"
-    >
-      <p
-        class="c2 c24"
-      >
-        logo.png
-      </p>
-    </div>
-  </div>
-  <div
-    data-react-portal="true"
-  >
-    <div
-      class="c25 c11 c26"
-    >
-      <div>
-        <div>
-          <div
-            aria-labelledby="modal"
-            aria-modal="true"
-            class="c27 c28"
-            role="dialog"
-          >
-            <div
-              class="c29 c30"
-            >
-              <div
-                class="c31"
-              >
-                <h2
-                  class="c2 c32"
-                  id="modal"
-                >
-                  Upload logo
-                </h2>
-                <button
-                  aria-disabled="false"
-                  class="c16 c11 c17 c18"
-                  type="button"
-                >
-                  <span
-                    class="c19"
-                  >
-                    Close the modal
-                  </span>
-                  <svg
-                    aria-hidden="true"
-                    fill="none"
-                    focusable="false"
-                    height="1rem"
-                    viewBox="0 0 24 24"
-                    width="1rem"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                      fill="#212134"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div>
-              <div
-                class="c33"
-              >
-                <div
-                  aria-label="How do you want to upload your assets?"
-                  role="tablist"
-                >
-                  <button
-                    aria-disabled="false"
-                    aria-selected="false"
-                    class="c34"
-                    id="95-0-tab"
-                    role="tab"
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <div
-                      class="c35 c36"
-                    >
-                      <span
-                        class="c2 c37"
-                      >
-                        From computer
-                      </span>
-                    </div>
-                  </button>
-                  <button
-                    aria-controls="95-1-tabpanel"
-                    aria-disabled="false"
-                    aria-selected="true"
-                    class="c34"
-                    id="95-1-tab"
-                    role="tab"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <div
-                      class="c35 c38"
-                    >
-                      <span
-                        class="c2 c39"
-                      >
-                        From url
-                      </span>
-                    </div>
-                  </button>
-                </div>
-                <hr
-                  class="c40 c41"
-                />
-              </div>
-              <div>
-                <div
-                  aria-labelledby="95-1-tab"
-                  id="95-1-tabpanel"
-                  role="tabpanel"
-                  tabindex="0"
-                >
-                  <form>
-                    <div
-                      class="c42"
-                    >
-                      <div>
-                        <div>
-                          <div
-                            class="c0 c1"
-                          >
-                            <label
-                              class="c2 c3"
-                              for="97"
-                            >
-                              <div
-                                class="c4"
-                              >
-                                URL
-                              </div>
-                            </label>
-                            <div
-                              class="c31 c43"
-                            >
-                              <input
-                                aria-disabled="false"
-                                aria-invalid="false"
-                                aria-required="false"
-                                class="c44"
-                                id="97"
-                                name="logo-url"
-                                value=""
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="c29 c45"
-                    >
-                      <div
-                        class="c31"
-                      >
-                        <div
-                          class="c4 c46"
-                        >
-                          <button
-                            aria-disabled="false"
-                            class="c47 c48 c17 c49"
-                            type="button"
-                          >
-                            <span
-                              class="c2 c24"
-                            >
-                              Cancel
-                            </span>
-                          </button>
-                        </div>
-                        <div
-                          class="c4 c46"
-                        >
-                          <button
-                            aria-disabled="false"
-                            class="c47 c48 c17 c50"
-                            type="submit"
-                          >
-                            <span
-                              class="c2 c24"
-                            >
-                              Next
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </form>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`] = `
 .c4 {
   background: #f6f6f9;
   padding: 8px;
@@ -1921,6 +51,91 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   padding-left: 16px;
 }
 
+.c21 {
+  background: #212134;
+  padding: 8px;
+  border-radius: 4px;
+  position: absolute;
+}
+
+.c24 {
+  padding-right: 40px;
+  padding-left: 40px;
+  position: fixed;
+  z-index: 4;
+}
+
+.c26 {
+  background: #ffffff;
+  border-radius: 4px;
+  box-shadow: 0px 2px 15px rgba(33,33,52,0.1);
+}
+
+.c28 {
+  background: #f6f6f9;
+  padding-top: 16px;
+  padding-right: 20px;
+  padding-bottom: 16px;
+  padding-left: 20px;
+}
+
+.c32 {
+  padding-right: 40px;
+  padding-left: 40px;
+}
+
+.c34 {
+  padding: 16px;
+}
+
+.c39 {
+  background: #eaeaef;
+}
+
+.c41 {
+  padding-top: 24px;
+  padding-right: 40px;
+  padding-bottom: 24px;
+  padding-left: 40px;
+}
+
+.c43 {
+  background: #f6f6f9;
+  padding-top: 48px;
+  padding-bottom: 32px;
+  border-radius: 4px;
+  border-style: dashed;
+  border-width: 1px;
+  border-color: #c0c0cf;
+  position: relative;
+}
+
+.c45 {
+  color: #4945ff;
+  width: 3.75rem;
+  height: 3.75rem;
+}
+
+.c47 {
+  padding-top: 12px;
+  padding-bottom: 20px;
+}
+
+.c50 {
+  background: #4945ff;
+  padding: 8px;
+  padding-right: 16px;
+  padding-left: 16px;
+  border-radius: 4px;
+  border-color: #4945ff;
+  border: 1px solid #4945ff;
+  cursor: pointer;
+}
+
+.c53 {
+  padding-top: 24px;
+}
+
 .c0 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
@@ -1933,6 +148,7 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
 .c3 {
@@ -1967,6 +183,91 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   justify-content: center;
 }
 
+.c14 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 4px;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c30 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c42 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.c44 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c51 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 8px;
+}
+
 .c2 {
   font-size: 0.75rem;
   line-height: 1.33;
@@ -1984,22 +285,51 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   color: #666687;
 }
 
-.c1 > * {
-  margin-top: 0;
-  margin-bottom: 0;
+.c23 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  font-weight: 600;
+  color: #ffffff;
 }
 
-.c1 > * + * {
-  margin-top: 4px;
+.c31 {
+  font-size: 0.875rem;
+  line-height: 1.43;
+  font-weight: 600;
+  color: #32324d;
 }
 
-.c14 > * {
-  margin-left: 0;
-  margin-right: 0;
+.c36 {
+  font-weight: 600;
+  font-size: 0.6875rem;
+  line-height: 1.45;
+  text-transform: uppercase;
+  color: #4945ff;
 }
 
-.c14 > * + * {
-  margin-left: 4px;
+.c38 {
+  font-weight: 600;
+  font-size: 0.6875rem;
+  line-height: 1.45;
+  text-transform: uppercase;
+  color: #666687;
+}
+
+.c48 {
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.25;
+  color: #32324d;
+}
+
+.c54 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  color: #666687;
+}
+
+.c46 path {
+  fill: #4945ff;
 }
 
 .c16 {
@@ -2063,6 +393,105 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   width: 1px;
 }
 
+.c52 {
+  height: 2rem;
+}
+
+.c52[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c52[aria-disabled='true'] .c1 {
+  color: #666687;
+}
+
+.c52[aria-disabled='true'] svg > g,.c52[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c52[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c52[aria-disabled='true']:active .c1 {
+  color: #666687;
+}
+
+.c52[aria-disabled='true']:active svg > g,.c52[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c52:hover {
+  border: 1px solid #7b79ff;
+  background: #7b79ff;
+}
+
+.c52:active {
+  border: 1px solid #4945ff;
+  background: #4945ff;
+}
+
+.c52 svg > g,
+.c52 svg path {
+  fill: #ffffff;
+}
+
+.c57 {
+  height: 2rem;
+  border: 1px solid #dcdce4;
+  background: #ffffff;
+}
+
+.c57[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c57[aria-disabled='true'] .c1 {
+  color: #666687;
+}
+
+.c57[aria-disabled='true'] svg > g,.c57[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c57[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c57[aria-disabled='true']:active .c1 {
+  color: #666687;
+}
+
+.c57[aria-disabled='true']:active svg > g,.c57[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c57:hover {
+  background-color: #f6f6f9;
+}
+
+.c57:active {
+  background-color: #eaeaef;
+}
+
+.c57 .c1 {
+  color: #32324d;
+}
+
+.c57 svg > g,
+.c57 svg path {
+  fill: #32324d;
+}
+
+.c22 {
+  z-index: 4;
+  display: none;
+}
+
 .c6 {
   display: grid;
   grid-template-columns: auto 1fr auto;
@@ -2080,6 +509,15 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   display: flex;
 }
 
+.c40 {
+  height: 1px;
+  border: none;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin: 0;
+}
+
 .c17 svg > g,
 .c17 svg path {
   fill: #8e8ea9;
@@ -2099,17 +537,1595 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   fill: #666687;
 }
 
-<div>
+.c25 {
+  inset: 0;
+  background: #32324d1F;
+}
+
+.c27 {
+  width: 51.875rem;
+}
+
+.c29 {
+  border-radius: 4px 4px 0 0;
+  border-bottom: 1px solid #eaeaef;
+}
+
+.c55 {
+  border-radius: 0 0 4px 4px;
+  border-top: 1px solid #eaeaef;
+}
+
+.c56 > * + * {
+  margin-left: 8px;
+}
+
+.c35 {
+  border-bottom: 2px solid #4945ff;
+}
+
+.c37 {
+  border-bottom: 2px solid transparent;
+}
+
+.c33[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.c49 {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+
+<body
+  class="lock-body-scroll"
+>
   <div>
     <div
-      class="c0 c1"
+      class=""
+    >
+      <div
+        class="c0"
+      >
+        <label
+          class="c1 c2"
+          for="39"
+        >
+          <div
+            class="c3"
+          >
+            logo input label
+          </div>
+        </label>
+        <div
+          class=""
+          id="39"
+        >
+          <div
+            class="c4"
+          >
+            <section
+              aria-label="logo input label"
+              aria-roledescription="carousel"
+              class="c5 c6"
+            >
+              <div
+                aria-live="polite"
+                class="c7 c8"
+                overflow="hidden"
+              >
+                <div
+                  aria-label="Logo slide"
+                  aria-roledescription="slide"
+                  class="c9 c10 c11"
+                  role="group"
+                >
+                  <img
+                    alt="Logo"
+                    class="c12"
+                    src="/admin/defaultLogo.png"
+                  />
+                </div>
+              </div>
+              <div
+                class="c13 c14"
+              >
+                <span>
+                  <button
+                    aria-disabled="false"
+                    aria-labelledby="36"
+                    class="c15 c10 c16 c17"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="c18"
+                    >
+                      Change logo
+                    </span>
+                    <svg
+                      aria-hidden="true"
+                      fill="none"
+                      focusable="false"
+                      height="1rem"
+                      viewBox="0 0 24 24"
+                      width="1rem"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M24 13.604a.3.3 0 0 1-.3.3h-9.795V23.7a.3.3 0 0 1-.3.3h-3.21a.3.3 0 0 1-.3-.3v-9.795H.3a.3.3 0 0 1-.3-.3v-3.21a.3.3 0 0 1 .3-.3h9.795V.3a.3.3 0 0 1 .3-.3h3.21a.3.3 0 0 1 .3.3v9.795H23.7a.3.3 0 0 1 .3.3v3.21Z"
+                        fill="#212134"
+                      />
+                    </svg>
+                  </button>
+                </span>
+              </div>
+            </section>
+            <div
+              class="c19"
+            >
+              <span>
+                <div
+                  aria-labelledby="37"
+                  class="c10"
+                  tabindex="0"
+                >
+                  <span
+                    class="c1 c20"
+                  >
+                    logo.png
+                  </span>
+                </div>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="c18"
+    >
+      <p
+        aria-live="polite"
+        aria-relevant="all"
+        id="live-region-log"
+        role="log"
+      />
+      <p
+        aria-live="polite"
+        aria-relevant="all"
+        id="live-region-status"
+        role="status"
+      />
+      <p
+        aria-live="assertive"
+        aria-relevant="all"
+        id="live-region-alert"
+        role="alert"
+      />
+    </div>
+  </div>
+  <div
+    data-react-portal="true"
+  >
+    <div
+      class="c21 c22"
+      id="36"
+      role="tooltip"
+    >
+      <p
+        class="c1 c23"
+      >
+        Change logo
+      </p>
+    </div>
+  </div>
+  <div
+    data-react-portal="true"
+  >
+    <div
+      class="c21 c22"
+      id="37"
+      role="tooltip"
+    >
+      <p
+        class="c1 c23"
+      >
+        logo.png
+      </p>
+    </div>
+  </div>
+  <div
+    data-react-portal="true"
+  >
+    <div
+      class="c24 c10 c25"
+    >
+      <div>
+        <div>
+          <div
+            aria-labelledby="modal"
+            aria-modal="true"
+            class="c26 c27"
+            role="dialog"
+          >
+            <div
+              class="c28 c29"
+            >
+              <div
+                class="c30"
+              >
+                <h2
+                  class="c1 c31"
+                  id="modal"
+                >
+                  Upload logo
+                </h2>
+                <button
+                  aria-disabled="false"
+                  class="c15 c10 c16 c17"
+                  type="button"
+                >
+                  <span
+                    class="c18"
+                  >
+                    Close the modal
+                  </span>
+                  <svg
+                    aria-hidden="true"
+                    fill="none"
+                    focusable="false"
+                    height="1rem"
+                    viewBox="0 0 24 24"
+                    width="1rem"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+                      fill="#212134"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <div>
+              <div
+                class="c32"
+              >
+                <div
+                  aria-label="How do you want to upload your assets?"
+                  role="tablist"
+                >
+                  <button
+                    aria-controls="43-0-tabpanel"
+                    aria-disabled="false"
+                    aria-selected="true"
+                    class="c33"
+                    id="43-0-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="c34 c35"
+                    >
+                      <span
+                        class="c1 c36"
+                      >
+                        From computer
+                      </span>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-selected="false"
+                    class="c33"
+                    id="43-1-tab"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="c34 c37"
+                    >
+                      <span
+                        class="c1 c38"
+                      >
+                        From url
+                      </span>
+                    </div>
+                  </button>
+                </div>
+                <hr
+                  class="c39 c40"
+                />
+              </div>
+              <div>
+                <div
+                  aria-labelledby="43-0-tab"
+                  id="43-0-tabpanel"
+                  role="tabpanel"
+                  tabindex="0"
+                >
+                  <form>
+                    <div
+                      class="c41"
+                    >
+                      <div
+                        class=""
+                      >
+                        <label
+                          for="logo-upload"
+                        >
+                          <div
+                            class="c42"
+                          >
+                            <div
+                              class="c43 c44"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="c45 c46"
+                                fill="none"
+                                height="1rem"
+                                viewBox="0 0 24 20"
+                                width="1rem"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M21.569 2.398H7.829v1.586h13.74c.47 0 .826.5.826 1.094v9.853l-2.791-3.17a2.13 2.13 0 0 0-.74-.55 2.214 2.214 0 0 0-.912-.196 2.215 2.215 0 0 0-.912.191 2.131 2.131 0 0 0-.74.546l-2.93 3.385-2.973-3.36a2.147 2.147 0 0 0-.741-.545 2.228 2.228 0 0 0-1.824.007c-.286.13-.538.319-.739.553l-2.931 3.432V7.653H2.51v9.894c.023.153.06.304.108.452v.127l.041.095c.057.142.126.28.207.412l.099.15c.074.107.157.207.247.302l.124.119c.13.118.275.222.43.309h.024c.36.214.775.327 1.198.325h16.515c.36-.004.716-.085 1.039-.24.323-.153.606-.375.827-.648a2.78 2.78 0 0 0 .504-.888c.066-.217.108-.44.124-.666V5.078a2.497 2.497 0 0 0-.652-1.81 2.706 2.706 0 0 0-1.776-.87Z"
+                                  fill="#32324D"
+                                />
+                                <path
+                                  d="M12.552 9.199c.912 0 1.651-.71 1.651-1.585 0-.876-.74-1.586-1.651-1.586-.912 0-1.652.71-1.652 1.586 0 .875.74 1.585 1.652 1.585ZM3.303 6.408h.826V3.997h2.477V2.41H4.129V0h-.826c-.219 0-.85.002-.826 0v2.411H0v1.586h2.477v2.41h.826Z"
+                                  fill="#32324D"
+                                />
+                              </svg>
+                              <div
+                                class="c47"
+                              >
+                                <span
+                                  class="c1 c48"
+                                >
+                                  Drag and Drop here or
+                                </span>
+                              </div>
+                              <input
+                                accept="image/jpeg,image/png,image/svg+xml"
+                                class="c49"
+                                cursor="pointer"
+                                id="logo-upload"
+                                name="files"
+                                tabindex="-1"
+                                type="file"
+                              />
+                              <button
+                                aria-disabled="false"
+                                class="c50 c51 c16 c52"
+                                type="button"
+                              >
+                                <span
+                                  class="c1 c23"
+                                >
+                                  Browse files
+                                </span>
+                              </button>
+                              <div
+                                class="c53"
+                              >
+                                <span
+                                  class="c1 c54"
+                                >
+                                  Max dimension: 750x750, Max size: 100KB
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        </label>
+                      </div>
+                    </div>
+                  </form>
+                  <div
+                    class="c28 c55"
+                  >
+                    <div
+                      class="c30"
+                    >
+                      <div
+                        class="c3 c56"
+                      >
+                        <button
+                          aria-disabled="false"
+                          class="c50 c51 c16 c57"
+                          type="button"
+                        >
+                          <span
+                            class="c1 c23"
+                          >
+                            Cancel
+                          </span>
+                        </button>
+                      </div>
+                      <div
+                        class="c3 c56"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`ApplicationsInfosPage || LogoInput from url should render upload modal with from url tab 1`] = `
+.c4 {
+  background: #f6f6f9;
+  padding: 8px;
+  border-radius: 4px;
+  border-color: #dcdce4;
+  border: 1px solid #dcdce4;
+}
+
+.c5 {
+  position: relative;
+}
+
+.c7 {
+  padding-right: 8px;
+  padding-left: 8px;
+  overflow: hidden;
+  width: 100%;
+}
+
+.c9 {
+  height: 124px;
+}
+
+.c12 {
+  max-width: 40%;
+  max-height: 40%;
+}
+
+.c13 {
+  position: absolute;
+  bottom: 4px;
+  width: 100%;
+}
+
+.c15 {
+  padding: 8px;
+  border-radius: 4px;
+  border-color: #dcdce4;
+  border: 1px solid #dcdce4;
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+}
+
+.c19 {
+  padding-top: 8px;
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.c21 {
+  background: #212134;
+  padding: 8px;
+  border-radius: 4px;
+  position: absolute;
+}
+
+.c24 {
+  padding-right: 40px;
+  padding-left: 40px;
+  position: fixed;
+  z-index: 4;
+}
+
+.c26 {
+  background: #ffffff;
+  border-radius: 4px;
+  box-shadow: 0px 2px 15px rgba(33,33,52,0.1);
+}
+
+.c28 {
+  background: #f6f6f9;
+  padding-top: 16px;
+  padding-right: 20px;
+  padding-bottom: 16px;
+  padding-left: 20px;
+}
+
+.c32 {
+  padding-right: 40px;
+  padding-left: 40px;
+}
+
+.c34 {
+  padding: 16px;
+}
+
+.c39 {
+  background: #eaeaef;
+}
+
+.c41 {
+  padding-top: 24px;
+  padding-right: 40px;
+  padding-bottom: 24px;
+  padding-left: 40px;
+}
+
+.c46 {
+  background: #4945ff;
+  padding: 8px;
+  padding-right: 16px;
+  padding-left: 16px;
+  border-radius: 4px;
+  border-color: #4945ff;
+  border: 1px solid #4945ff;
+  cursor: pointer;
+}
+
+.c0 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c10 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c14 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 4px;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c30 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c47 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.c2 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  font-weight: 600;
+  color: #32324d;
+}
+
+.c20 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #666687;
+}
+
+.c23 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.c31 {
+  font-size: 0.875rem;
+  line-height: 1.43;
+  font-weight: 600;
+  color: #32324d;
+}
+
+.c38 {
+  font-weight: 600;
+  font-size: 0.6875rem;
+  line-height: 1.45;
+  text-transform: uppercase;
+  color: #4945ff;
+}
+
+.c36 {
+  font-weight: 600;
+  font-size: 0.6875rem;
+  line-height: 1.45;
+  text-transform: uppercase;
+  color: #666687;
+}
+
+.c16 {
+  position: relative;
+  outline: none;
+}
+
+.c16 svg {
+  height: 12px;
+  width: 12px;
+}
+
+.c16 svg > g,
+.c16 svg path {
+  fill: #ffffff;
+}
+
+.c16[aria-disabled='true'] {
+  pointer-events: none;
+}
+
+.c16:after {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border: 2px solid transparent;
+}
+
+.c16:focus-visible {
+  outline: none;
+}
+
+.c16:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
+.c18 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.c49 {
+  height: 2rem;
+}
+
+.c49[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c49[aria-disabled='true'] .c1 {
+  color: #666687;
+}
+
+.c49[aria-disabled='true'] svg > g,.c49[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c49[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c49[aria-disabled='true']:active .c1 {
+  color: #666687;
+}
+
+.c49[aria-disabled='true']:active svg > g,.c49[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c49:hover {
+  border: 1px solid #7b79ff;
+  background: #7b79ff;
+}
+
+.c49:active {
+  border: 1px solid #4945ff;
+  background: #4945ff;
+}
+
+.c49 svg > g,
+.c49 svg path {
+  fill: #ffffff;
+}
+
+.c48 {
+  height: 2rem;
+  border: 1px solid #dcdce4;
+  background: #ffffff;
+}
+
+.c48[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c48[aria-disabled='true'] .c1 {
+  color: #666687;
+}
+
+.c48[aria-disabled='true'] svg > g,.c48[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c48[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c48[aria-disabled='true']:active .c1 {
+  color: #666687;
+}
+
+.c48[aria-disabled='true']:active svg > g,.c48[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c48:hover {
+  background-color: #f6f6f9;
+}
+
+.c48:active {
+  background-color: #eaeaef;
+}
+
+.c48 .c1 {
+  color: #32324d;
+}
+
+.c48 svg > g,
+.c48 svg path {
+  fill: #32324d;
+}
+
+.c22 {
+  z-index: 4;
+  display: none;
+}
+
+.c6 {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: 'startAction slides endAction';
+}
+
+.c8 {
+  grid-area: slides;
+}
+
+.c43 {
+  border: none;
+  border-radius: 4px;
+  padding-bottom: 0.65625rem;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 0.65625rem;
+  color: #32324d;
+  font-weight: 400;
+  font-size: 0.875rem;
+  display: block;
+  width: 100%;
+  background: inherit;
+}
+
+.c43::-webkit-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c43::-moz-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c43:-ms-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c43::placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c43[aria-disabled='true'] {
+  color: inherit;
+}
+
+.c43:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.c42 {
+  border: 1px solid #dcdce4;
+  border-radius: 4px;
+  background: #ffffff;
+  outline: none;
+  box-shadow: 0;
+  -webkit-transition-property: border-color,box-shadow,fill;
+  transition-property: border-color,box-shadow,fill;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+}
+
+.c42:focus-within {
+  border: 1px solid #4945ff;
+  box-shadow: #4945ff 0px 0px 0px 2px;
+}
+
+.c11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c40 {
+  height: 1px;
+  border: none;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.c17 svg > g,
+.c17 svg path {
+  fill: #8e8ea9;
+}
+
+.c17:hover svg > g,
+.c17:hover svg path {
+  fill: #666687;
+}
+
+.c17:active svg > g,
+.c17:active svg path {
+  fill: #a5a5ba;
+}
+
+.c17[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c25 {
+  inset: 0;
+  background: #32324d1F;
+}
+
+.c27 {
+  width: 51.875rem;
+}
+
+.c29 {
+  border-radius: 4px 4px 0 0;
+  border-bottom: 1px solid #eaeaef;
+}
+
+.c44 {
+  border-radius: 0 0 4px 4px;
+  border-top: 1px solid #eaeaef;
+}
+
+.c45 > * + * {
+  margin-left: 8px;
+}
+
+.c37 {
+  border-bottom: 2px solid #4945ff;
+}
+
+.c35 {
+  border-bottom: 2px solid transparent;
+}
+
+.c33[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+<body
+  class="lock-body-scroll"
+>
+  <div>
+    <div
+      class=""
+    >
+      <div
+        class="c0"
+      >
+        <label
+          class="c1 c2"
+          for="91"
+        >
+          <div
+            class="c3"
+          >
+            logo input label
+          </div>
+        </label>
+        <div
+          class=""
+          id="91"
+        >
+          <div
+            class="c4"
+          >
+            <section
+              aria-label="logo input label"
+              aria-roledescription="carousel"
+              class="c5 c6"
+            >
+              <div
+                aria-live="polite"
+                class="c7 c8"
+                overflow="hidden"
+              >
+                <div
+                  aria-label="Logo slide"
+                  aria-roledescription="slide"
+                  class="c9 c10 c11"
+                  role="group"
+                >
+                  <img
+                    alt="Logo"
+                    class="c12"
+                    src="/admin/defaultLogo.png"
+                  />
+                </div>
+              </div>
+              <div
+                class="c13 c14"
+              >
+                <span>
+                  <button
+                    aria-disabled="false"
+                    aria-labelledby="88"
+                    class="c15 c10 c16 c17"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="c18"
+                    >
+                      Change logo
+                    </span>
+                    <svg
+                      aria-hidden="true"
+                      fill="none"
+                      focusable="false"
+                      height="1rem"
+                      viewBox="0 0 24 24"
+                      width="1rem"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M24 13.604a.3.3 0 0 1-.3.3h-9.795V23.7a.3.3 0 0 1-.3.3h-3.21a.3.3 0 0 1-.3-.3v-9.795H.3a.3.3 0 0 1-.3-.3v-3.21a.3.3 0 0 1 .3-.3h9.795V.3a.3.3 0 0 1 .3-.3h3.21a.3.3 0 0 1 .3.3v9.795H23.7a.3.3 0 0 1 .3.3v3.21Z"
+                        fill="#212134"
+                      />
+                    </svg>
+                  </button>
+                </span>
+              </div>
+            </section>
+            <div
+              class="c19"
+            >
+              <span>
+                <div
+                  aria-labelledby="89"
+                  class="c10"
+                  tabindex="0"
+                >
+                  <span
+                    class="c1 c20"
+                  >
+                    logo.png
+                  </span>
+                </div>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="c18"
+    >
+      <p
+        aria-live="polite"
+        aria-relevant="all"
+        id="live-region-log"
+        role="log"
+      />
+      <p
+        aria-live="polite"
+        aria-relevant="all"
+        id="live-region-status"
+        role="status"
+      />
+      <p
+        aria-live="assertive"
+        aria-relevant="all"
+        id="live-region-alert"
+        role="alert"
+      />
+    </div>
+  </div>
+  <div
+    data-react-portal="true"
+  >
+    <div
+      class="c21 c22"
+      id="88"
+      role="tooltip"
+    >
+      <p
+        class="c1 c23"
+      >
+        Change logo
+      </p>
+    </div>
+  </div>
+  <div
+    data-react-portal="true"
+  >
+    <div
+      class="c21 c22"
+      id="89"
+      role="tooltip"
+    >
+      <p
+        class="c1 c23"
+      >
+        logo.png
+      </p>
+    </div>
+  </div>
+  <div
+    data-react-portal="true"
+  >
+    <div
+      class="c24 c10 c25"
+    >
+      <div>
+        <div>
+          <div
+            aria-labelledby="modal"
+            aria-modal="true"
+            class="c26 c27"
+            role="dialog"
+          >
+            <div
+              class="c28 c29"
+            >
+              <div
+                class="c30"
+              >
+                <h2
+                  class="c1 c31"
+                  id="modal"
+                >
+                  Upload logo
+                </h2>
+                <button
+                  aria-disabled="false"
+                  class="c15 c10 c16 c17"
+                  type="button"
+                >
+                  <span
+                    class="c18"
+                  >
+                    Close the modal
+                  </span>
+                  <svg
+                    aria-hidden="true"
+                    fill="none"
+                    focusable="false"
+                    height="1rem"
+                    viewBox="0 0 24 24"
+                    width="1rem"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+                      fill="#212134"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <div>
+              <div
+                class="c32"
+              >
+                <div
+                  aria-label="How do you want to upload your assets?"
+                  role="tablist"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-selected="false"
+                    class="c33"
+                    id="95-0-tab"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="c34 c35"
+                    >
+                      <span
+                        class="c1 c36"
+                      >
+                        From computer
+                      </span>
+                    </div>
+                  </button>
+                  <button
+                    aria-controls="95-1-tabpanel"
+                    aria-disabled="false"
+                    aria-selected="true"
+                    class="c33"
+                    id="95-1-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="c34 c37"
+                    >
+                      <span
+                        class="c1 c38"
+                      >
+                        From url
+                      </span>
+                    </div>
+                  </button>
+                </div>
+                <hr
+                  class="c39 c40"
+                />
+              </div>
+              <div>
+                <div
+                  aria-labelledby="95-1-tab"
+                  id="95-1-tabpanel"
+                  role="tabpanel"
+                  tabindex="0"
+                >
+                  <form>
+                    <div
+                      class="c41"
+                    >
+                      <div>
+                        <div
+                          class=""
+                        >
+                          <div
+                            class="c0"
+                          >
+                            <label
+                              class="c1 c2"
+                              for="97"
+                            >
+                              <div
+                                class="c3"
+                              >
+                                URL
+                              </div>
+                            </label>
+                            <div
+                              class="c30 c42"
+                            >
+                              <input
+                                aria-disabled="false"
+                                aria-invalid="false"
+                                aria-required="false"
+                                class="c43"
+                                id="97"
+                                name="logo-url"
+                                value=""
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="c28 c44"
+                    >
+                      <div
+                        class="c30"
+                      >
+                        <div
+                          class="c3 c45"
+                        >
+                          <button
+                            aria-disabled="false"
+                            class="c46 c47 c16 c48"
+                            type="button"
+                          >
+                            <span
+                              class="c1 c23"
+                            >
+                              Cancel
+                            </span>
+                          </button>
+                        </div>
+                        <div
+                          class="c3 c45"
+                        >
+                          <button
+                            aria-disabled="false"
+                            class="c46 c47 c16 c49"
+                            type="submit"
+                          >
+                            <span
+                              class="c1 c23"
+                            >
+                              Next
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`] = `
+.c3 {
+  background: #f6f6f9;
+  padding: 8px;
+  border-radius: 4px;
+  border-color: #dcdce4;
+  border: 1px solid #dcdce4;
+}
+
+.c4 {
+  position: relative;
+}
+
+.c6 {
+  padding-right: 8px;
+  padding-left: 8px;
+  overflow: hidden;
+  width: 100%;
+}
+
+.c8 {
+  height: 124px;
+}
+
+.c11 {
+  max-width: 40%;
+  max-height: 40%;
+}
+
+.c12 {
+  position: absolute;
+  bottom: 4px;
+  width: 100%;
+}
+
+.c14 {
+  padding: 8px;
+  border-radius: 4px;
+  border-color: #dcdce4;
+  border: 1px solid #dcdce4;
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+}
+
+.c18 {
+  padding-top: 8px;
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.c0 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c13 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 4px;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c1 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  font-weight: 600;
+  color: #32324d;
+}
+
+.c19 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #666687;
+}
+
+.c15 {
+  position: relative;
+  outline: none;
+}
+
+.c15 svg {
+  height: 12px;
+  width: 12px;
+}
+
+.c15 svg > g,
+.c15 svg path {
+  fill: #ffffff;
+}
+
+.c15[aria-disabled='true'] {
+  pointer-events: none;
+}
+
+.c15:after {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border: 2px solid transparent;
+}
+
+.c15:focus-visible {
+  outline: none;
+}
+
+.c15:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
+.c17 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.c5 {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: 'startAction slides endAction';
+}
+
+.c7 {
+  grid-area: slides;
+}
+
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c16 svg > g,
+.c16 svg path {
+  fill: #8e8ea9;
+}
+
+.c16:hover svg > g,
+.c16:hover svg path {
+  fill: #666687;
+}
+
+.c16:active svg > g,
+.c16:active svg path {
+  fill: #a5a5ba;
+}
+
+.c16[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+<div>
+  <div
+    class=""
+  >
+    <div
+      class="c0"
     >
       <label
-        class="c2"
+        class="c1"
         for="3"
       >
         <div
-          class="c3"
+          class="c2"
         >
           logo input label
         </div>
@@ -2119,44 +2135,44 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
         id="3"
       >
         <div
-          class="c4"
+          class="c3"
         >
           <section
             aria-label="logo input label"
             aria-roledescription="carousel"
-            class="c5 c6"
+            class="c4 c5"
           >
             <div
               aria-live="polite"
-              class="c7 c8"
+              class="c6 c7"
               overflow="hidden"
             >
               <div
                 aria-label="Logo slide"
                 aria-roledescription="slide"
-                class="c9 c10 c11"
+                class="c8 c9 c10"
                 role="group"
               >
                 <img
                   alt="Logo"
-                  class="c12"
+                  class="c11"
                   src="/admin/defaultLogo.png"
                 />
               </div>
             </div>
             <div
-              class="c13 c10 c14"
+              class="c12 c13"
             >
               <span>
                 <button
                   aria-disabled="false"
                   aria-labelledby="0"
-                  class="c15 c10 c16 c17"
+                  class="c14 c9 c15 c16"
                   tabindex="0"
                   type="button"
                 >
                   <span
-                    class="c18"
+                    class="c17"
                   >
                     Change logo
                   </span>
@@ -2179,16 +2195,16 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
             </div>
           </section>
           <div
-            class="c19"
+            class="c18"
           >
             <span>
               <div
                 aria-labelledby="1"
-                class="c10"
+                class="c9"
                 tabindex="0"
               >
                 <span
-                  class="c20"
+                  class="c19"
                 >
                   logo.png
                 </span>
@@ -2200,7 +2216,7 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
     </div>
   </div>
   <div
-    class="c18"
+    class="c17"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/tests/__snapshots__/AddLogoDialog.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/tests/__snapshots__/AddLogoDialog.test.js.snap
index 51f81d6ba6..271e5aa15c 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/tests/__snapshots__/AddLogoDialog.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/tests/__snapshots__/AddLogoDialog.test.js.snap
@@ -445,7 +445,9 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
           <div
             class="c10"
           >
-            <div>
+            <div
+              class=""
+            >
               <label
                 for="logo-upload"
               >
@@ -592,7 +594,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
   padding-left: 40px;
 }
 
-.c21 {
+.c20 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -603,7 +605,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
   cursor: pointer;
 }
 
-.c18 {
+.c17 {
   background: #f6f6f9;
   padding-top: 16px;
   padding-right: 20px;
@@ -611,7 +613,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
   padding-left: 20px;
 }
 
-.c22 {
+.c21 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -626,7 +628,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
   gap: 8px;
 }
 
-.c15 {
+.c14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -644,7 +646,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
   justify-content: space-between;
 }
 
-.c14 {
+.c13 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -670,6 +672,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
 .c7 {
@@ -688,49 +691,40 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
   color: #666687;
 }
 
-.c25 {
+.c24 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c13 {
+.c12 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c12 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c12 > * + * {
-  margin-top: 4px;
-}
-
-.c23 {
+.c22 {
   position: relative;
   outline: none;
 }
 
-.c23 svg {
+.c22 svg {
   height: 12px;
   width: 12px;
 }
 
-.c23 svg > g,
-.c23 svg path {
+.c22 svg > g,
+.c22 svg path {
   fill: #ffffff;
 }
 
-.c23[aria-disabled='true'] {
+.c22[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c23:after {
+.c22:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -745,11 +739,11 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
   border: 2px solid transparent;
 }
 
-.c23:focus-visible {
+.c22:focus-visible {
   outline: none;
 }
 
-.c23:focus-visible:after {
+.c22:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -760,7 +754,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
   border: 2px solid #4945ff;
 }
 
-.c27 {
+.c26 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -772,101 +766,101 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
   width: 1px;
 }
 
-.c26 {
+.c25 {
   height: 2rem;
 }
 
-.c26[aria-disabled='true'] {
+.c25[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c26[aria-disabled='true'] .c4 {
+.c25[aria-disabled='true'] .c4 {
   color: #666687;
 }
 
-.c26[aria-disabled='true'] svg > g,.c26[aria-disabled='true'] svg path {
+.c25[aria-disabled='true'] svg > g,.c25[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c26[aria-disabled='true']:active {
+.c25[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c26[aria-disabled='true']:active .c4 {
+.c25[aria-disabled='true']:active .c4 {
   color: #666687;
 }
 
-.c26[aria-disabled='true']:active svg > g,.c26[aria-disabled='true']:active svg path {
+.c25[aria-disabled='true']:active svg > g,.c25[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c26:hover {
+.c25:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c26:active {
+.c25:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c26 svg > g,
-.c26 svg path {
+.c25 svg > g,
+.c25 svg path {
   fill: #ffffff;
 }
 
-.c24 {
+.c23 {
   height: 2rem;
   border: 1px solid #dcdce4;
   background: #ffffff;
 }
 
-.c24[aria-disabled='true'] {
+.c23[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c24[aria-disabled='true'] .c4 {
+.c23[aria-disabled='true'] .c4 {
   color: #666687;
 }
 
-.c24[aria-disabled='true'] svg > g,.c24[aria-disabled='true'] svg path {
+.c23[aria-disabled='true'] svg > g,.c23[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c24[aria-disabled='true']:active {
+.c23[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c24[aria-disabled='true']:active .c4 {
+.c23[aria-disabled='true']:active .c4 {
   color: #666687;
 }
 
-.c24[aria-disabled='true']:active svg > g,.c24[aria-disabled='true']:active svg path {
+.c23[aria-disabled='true']:active svg > g,.c23[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c24:hover {
+.c23:hover {
   background-color: #f6f6f9;
 }
 
-.c24:active {
+.c23:active {
   background-color: #eaeaef;
 }
 
-.c24 .c4 {
+.c23 .c4 {
   color: #32324d;
 }
 
-.c24 svg > g,
-.c24 svg path {
+.c23 svg > g,
+.c23 svg path {
   fill: #32324d;
 }
 
-.c17 {
+.c16 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -881,36 +875,36 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
   background: inherit;
 }
 
-.c17::-webkit-input-placeholder {
+.c16::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c17::-moz-placeholder {
+.c16::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c17:-ms-input-placeholder {
+.c16:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c17::placeholder {
+.c16::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c17[aria-disabled='true'] {
+.c16[aria-disabled='true'] {
   color: inherit;
 }
 
-.c17:focus {
+.c16:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c16 {
+.c15 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -922,7 +916,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
   transition-duration: 0.2s;
 }
 
-.c16:focus-within {
+.c15:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
@@ -936,12 +930,12 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
   margin: 0;
 }
 
-.c19 {
+.c18 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c20 > * + * {
+.c19 > * + * {
   margin-left: 8px;
 }
 
@@ -1022,28 +1016,30 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
             class="c10"
           >
             <div>
-              <div>
+              <div
+                class=""
+              >
                 <div
-                  class="c11 c12"
+                  class="c11"
                 >
                   <label
-                    class="c4 c13"
+                    class="c4 c12"
                     for="5"
                   >
                     <div
-                      class="c14"
+                      class="c13"
                     >
                       URL
                     </div>
                   </label>
                   <div
-                    class="c15 c16"
+                    class="c14 c15"
                   >
                     <input
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c17"
+                      class="c16"
                       id="5"
                       name="logo-url"
                       value=""
@@ -1054,36 +1050,36 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
             </div>
           </div>
           <div
-            class="c18 c19"
+            class="c17 c18"
           >
             <div
-              class="c15"
+              class="c14"
             >
               <div
-                class="c14 c20"
+                class="c13 c19"
               >
                 <button
                   aria-disabled="false"
-                  class="c21 c22 c23 c24"
+                  class="c20 c21 c22 c23"
                   type="button"
                 >
                   <span
-                    class="c4 c25"
+                    class="c4 c24"
                   >
                     Cancel
                   </span>
                 </button>
               </div>
               <div
-                class="c14 c20"
+                class="c13 c19"
               >
                 <button
                   aria-disabled="false"
-                  class="c21 c22 c23 c26"
+                  class="c20 c21 c22 c25"
                   type="submit"
                 >
                   <span
-                    class="c4 c25"
+                    class="c4 c24"
                   >
                     Next
                   </span>
@@ -1096,7 +1092,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
     </div>
   </div>
   <div
-    class="c27"
+    class="c26"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
index a86a601cad..956127e658 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
@@ -13,7 +13,11 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   padding-bottom: 8px;
 }
 
-.c12 {
+.c8 {
+  min-width: 0;
+}
+
+.c13 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -24,12 +28,12 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   cursor: pointer;
 }
 
-.c17 {
+.c18 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c19 {
+.c20 {
   background: #ffffff;
   padding: 24px;
   border-radius: 4px;
@@ -54,7 +58,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c8 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -68,7 +72,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c11 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -83,7 +87,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   gap: 8px;
 }
 
-.c18 {
+.c19 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -98,7 +102,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   gap: 24px;
 }
 
-.c20 {
+.c21 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -113,7 +117,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   gap: 16px;
 }
 
-.c27 {
+.c28 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -125,6 +129,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
 .c35 {
@@ -145,40 +150,40 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   justify-content: space-around;
 }
 
-.c10 {
+.c11 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c15 {
+.c16 {
   font-size: 0.875rem;
   line-height: 1.43;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c16 {
+.c17 {
   font-size: 1rem;
   line-height: 1.5;
   color: #666687;
 }
 
-.c21 {
+.c22 {
   font-size: 0.875rem;
   line-height: 1.43;
   font-weight: 600;
   color: #32324d;
 }
 
-.c22 {
+.c23 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #8e8ea9;
 }
 
-.c24 {
+.c25 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
@@ -192,35 +197,26 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c28 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c28 > * + * {
-  margin-top: 4px;
-}
-
-.c13 {
+.c14 {
   position: relative;
   outline: none;
 }
 
-.c13 svg {
+.c14 svg {
   height: 12px;
   width: 12px;
 }
 
-.c13 svg > g,
-.c13 svg path {
+.c14 svg > g,
+.c14 svg path {
   fill: #ffffff;
 }
 
-.c13[aria-disabled='true'] {
+.c14[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c13:after {
+.c14:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -235,11 +231,11 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c13:focus-visible {
+.c14:focus-visible {
   outline: none;
 }
 
-.c13:focus-visible:after {
+.c14:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -262,107 +258,107 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c14 {
+.c15 {
   height: 2.5rem;
 }
 
-.c14[aria-disabled='true'] {
+.c15[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c14[aria-disabled='true'] .c9 {
+.c15[aria-disabled='true'] .c10 {
   color: #666687;
 }
 
-.c14[aria-disabled='true'] svg > g,.c14[aria-disabled='true'] svg path {
+.c15[aria-disabled='true'] svg > g,.c15[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c14[aria-disabled='true']:active {
+.c15[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c14[aria-disabled='true']:active .c9 {
+.c15[aria-disabled='true']:active .c10 {
   color: #666687;
 }
 
-.c14[aria-disabled='true']:active svg > g,.c14[aria-disabled='true']:active svg path {
+.c15[aria-disabled='true']:active svg > g,.c15[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c14:hover {
+.c15:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c14:active {
+.c15:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c14 svg > g,
-.c14 svg path {
+.c15 svg > g,
+.c15 svg path {
   fill: #ffffff;
 }
 
-.c23 {
+.c24 {
   height: 2rem;
   border: 1px solid #d9d8ff;
   background: #f0f0ff;
 }
 
-.c23[aria-disabled='true'] {
+.c24[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c23[aria-disabled='true'] .c9 {
+.c24[aria-disabled='true'] .c10 {
   color: #666687;
 }
 
-.c23[aria-disabled='true'] svg > g,.c23[aria-disabled='true'] svg path {
+.c24[aria-disabled='true'] svg > g,.c24[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c23[aria-disabled='true']:active {
+.c24[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c23[aria-disabled='true']:active .c9 {
+.c24[aria-disabled='true']:active .c10 {
   color: #666687;
 }
 
-.c23[aria-disabled='true']:active svg > g,.c23[aria-disabled='true']:active svg path {
+.c24[aria-disabled='true']:active svg > g,.c24[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c23:hover {
+.c24:hover {
   background-color: #ffffff;
 }
 
-.c23:active {
+.c24:active {
   background-color: #ffffff;
   border: 1px solid #4945ff;
 }
 
-.c23:active .c9 {
+.c24:active .c10 {
   color: #4945ff;
 }
 
-.c23:active svg > g,
-.c23:active svg path {
+.c24:active svg > g,
+.c24:active svg path {
   fill: #4945ff;
 }
 
-.c23 .c9 {
+.c24 .c10 {
   color: #271fe0;
 }
 
-.c23 svg > g,
-.c23 svg path {
+.c24 svg > g,
+.c24 svg path {
   fill: #271fe0;
 }
 
@@ -433,13 +429,13 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   will-change: transform;
 }
 
-.c25 {
+.c26 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c26 {
+.c27 {
   grid-column: span 6;
   max-width: 100%;
 }
@@ -616,13 +612,13 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
 }
 
 @media (max-width:68.75rem) {
-  .c26 {
+  .c27 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c26 {
+  .c27 {
     grid-column: span;
   }
 }
@@ -678,24 +674,24 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
             class="c7"
           >
             <div
-              class="c8"
+              class="c8 c9"
             >
               <h1
-                class="c9 c10"
+                class="c10 c11"
               >
                 Edit a role
               </h1>
             </div>
             <div
-              class="c11"
+              class="c12"
             >
               <button
                 aria-disabled="false"
-                class="c12 c11 c13 c14"
+                class="c13 c12 c14 c15"
                 type="button"
               >
                 <span
-                  class="c9 c15"
+                  class="c10 c16"
                 >
                   Save
                 </span>
@@ -703,23 +699,23 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
             </div>
           </div>
           <p
-            class="c9 c16"
+            class="c10 c17"
           >
             Define the rights given to the role
           </p>
         </div>
       </div>
       <div
-        class="c17"
+        class="c18"
       >
         <div
-          class="c18"
+          class="c19"
         >
           <div
-            class="c19"
+            class="c20"
           >
             <div
-              class="c20"
+              class="c21"
             >
               <div
                 class="c7"
@@ -731,50 +727,52 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <span
-                      class="c9 c21"
+                      class="c10 c22"
                     />
                   </div>
                   <div
                     class=""
                   >
                     <span
-                      class="c9 c22"
+                      class="c10 c23"
                     />
                   </div>
                 </div>
                 <button
                   aria-disabled="true"
-                  class="c12 c11 c13 c23"
+                  class="c13 c12 c14 c24"
                   disabled=""
                   type="button"
                 >
                   <span
-                    class="c9 c24"
+                    class="c10 c25"
                   >
                     NaN users with this role
                   </span>
                 </button>
               </div>
               <div
-                class="c25"
+                class="c26"
               >
                 <div
-                  class="c26"
+                  class="c27"
                 >
                   <div
                     class=""
                   >
                     <div>
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c27 c28"
+                          class="c28"
                         >
                           <label
-                            class="c9 c29"
+                            class="c10 c29"
                             for="1"
                           >
                             <div
-                              class="c8"
+                              class="c9"
                             >
                               Name
                             </div>
@@ -798,7 +796,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c26"
+                  class="c27"
                 >
                   <div
                     class=""
@@ -806,19 +804,21 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
                     <div
                       class="c32"
                     >
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c27 c28"
+                          class="c28"
                         >
                           <div
-                            class="c8"
+                            class="c9"
                           >
                             <label
-                              class="c9 c29"
+                              class="c10 c29"
                               for="3"
                             >
                               <div
-                                class="c8"
+                                class="c9"
                               >
                                 Description
                               </div>
@@ -844,7 +844,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="c19"
+            class="c20"
           >
             <div
               class="c35 c36"
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js
index 49579a1ecb..0cc32f85dd 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js
@@ -69,7 +69,11 @@ describe('<ListPage />', () => {
         padding-left: 56px;
       }
 
-      .c6 {
+      .c3 {
+        min-width: 0;
+      }
+
+      .c7 {
         background: #4945ff;
         padding: 8px;
         padding-right: 16px;
@@ -80,40 +84,40 @@ describe('<ListPage />', () => {
         cursor: pointer;
       }
 
-      .c12 {
+      .c13 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c13 {
+      .c14 {
         background: #ffffff;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c15 {
+      .c16 {
         position: relative;
       }
 
-      .c17 {
+      .c18 {
         padding-right: 24px;
         padding-left: 24px;
       }
 
-      .c27 {
+      .c28 {
         background: #eaeaef;
       }
 
-      .c29 {
+      .c30 {
         background: #f0f0ff;
         padding: 20px;
       }
 
-      .c31 {
+      .c32 {
         background: #d9d8ff;
       }
 
-      .c33 {
+      .c34 {
         padding-left: 12px;
       }
 
@@ -135,7 +139,7 @@ describe('<ListPage />', () => {
         justify-content: space-between;
       }
 
-      .c3 {
+      .c4 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -149,7 +153,7 @@ describe('<ListPage />', () => {
         flex-direction: row;
       }
 
-      .c7 {
+      .c8 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -164,27 +168,27 @@ describe('<ListPage />', () => {
         gap: 8px;
       }
 
-      .c5 {
+      .c6 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c10 {
+      .c11 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c11 {
+      .c12 {
         font-size: 1rem;
         line-height: 1.5;
         color: #666687;
       }
 
-      .c23 {
+      .c24 {
         font-weight: 600;
         font-size: 0.6875rem;
         line-height: 1.45;
@@ -192,33 +196,33 @@ describe('<ListPage />', () => {
         color: #666687;
       }
 
-      .c34 {
+      .c35 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #4945ff;
       }
 
-      .c8 {
+      .c9 {
         position: relative;
         outline: none;
       }
 
-      .c8 svg {
+      .c9 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c8 svg > g,
-      .c8 svg path {
+      .c9 svg > g,
+      .c9 svg path {
         fill: #ffffff;
       }
 
-      .c8[aria-disabled='true'] {
+      .c9[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c8:after {
+      .c9:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -233,11 +237,11 @@ describe('<ListPage />', () => {
         border: 2px solid transparent;
       }
 
-      .c8:focus-visible {
+      .c9:focus-visible {
         outline: none;
       }
 
-      .c8:focus-visible:after {
+      .c9:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -248,7 +252,7 @@ describe('<ListPage />', () => {
         border: 2px solid #4945ff;
       }
 
-      .c25 {
+      .c26 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -260,52 +264,52 @@ describe('<ListPage />', () => {
         width: 1px;
       }
 
-      .c9 {
+      .c10 {
         height: 2rem;
       }
 
-      .c9[aria-disabled='true'] {
+      .c10[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c9[aria-disabled='true'] .c4 {
+      .c10[aria-disabled='true'] .c5 {
         color: #666687;
       }
 
-      .c9[aria-disabled='true'] svg > g,.c9[aria-disabled='true'] svg path {
+      .c10[aria-disabled='true'] svg > g,.c10[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c9[aria-disabled='true']:active {
+      .c10[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c9[aria-disabled='true']:active .c4 {
+      .c10[aria-disabled='true']:active .c5 {
         color: #666687;
       }
 
-      .c9[aria-disabled='true']:active svg > g,.c9[aria-disabled='true']:active svg path {
+      .c10[aria-disabled='true']:active svg > g,.c10[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c9:hover {
+      .c10:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c9:active {
+      .c10:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c9 svg > g,
-      .c9 svg path {
+      .c10 svg > g,
+      .c10 svg path {
         fill: #ffffff;
       }
 
-      .c28 {
+      .c29 {
         height: 1px;
         border: none;
         -webkit-flex-shrink: 0;
@@ -318,17 +322,17 @@ describe('<ListPage />', () => {
         outline: none;
       }
 
-      .c14 {
+      .c15 {
         overflow: hidden;
         border: 1px solid #eaeaef;
       }
 
-      .c19 {
+      .c20 {
         width: 100%;
         white-space: nowrap;
       }
 
-      .c16:before {
+      .c17:before {
         background: linear-gradient(90deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -338,7 +342,7 @@ describe('<ListPage />', () => {
         left: 0;
       }
 
-      .c16:after {
+      .c17:after {
         background: linear-gradient(270deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -349,54 +353,54 @@ describe('<ListPage />', () => {
         top: 0;
       }
 
-      .c18 {
+      .c19 {
         overflow-x: auto;
       }
 
-      .c26 tr:last-of-type {
+      .c27 tr:last-of-type {
         border-bottom: none;
       }
 
-      .c20 {
-        border-bottom: 1px solid #eaeaef;
-      }
-
       .c21 {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c21 td,
-      .c21 th {
+      .c22 {
+        border-bottom: 1px solid #eaeaef;
+      }
+
+      .c22 td,
+      .c22 th {
         padding: 16px;
       }
 
-      .c21 td:first-of-type,
-      .c21 th:first-of-type {
+      .c22 td:first-of-type,
+      .c22 th:first-of-type {
         padding: 0 4px;
       }
 
-      .c21 th {
+      .c22 th {
         padding-top: 0;
         padding-bottom: 0;
         height: 3.5rem;
       }
 
-      .c22 {
+      .c23 {
         vertical-align: middle;
         text-align: left;
         color: #666687;
         outline-offset: -4px;
       }
 
-      .c22 input {
+      .c23 input {
         vertical-align: sub;
       }
 
-      .c24 svg {
+      .c25 svg {
         height: 0.25rem;
       }
 
-      .c32 {
+      .c33 {
         height: 1.5rem;
         width: 1.5rem;
         border-radius: 50%;
@@ -414,16 +418,16 @@ describe('<ListPage />', () => {
         align-items: center;
       }
 
-      .c32 svg {
+      .c33 svg {
         height: 0.625rem;
         width: 0.625rem;
       }
 
-      .c32 svg path {
+      .c33 svg path {
         fill: #4945ff;
       }
 
-      .c30 {
+      .c31 {
         border-radius: 0 0 4px 4px;
         display: block;
         width: 100%;
@@ -447,17 +451,17 @@ describe('<ListPage />', () => {
               class="c2"
             >
               <div
-                class="c3"
+                class="c3 c4"
               >
                 <h1
-                  class="c4 c5"
+                  class="c5 c6"
                 >
                   roles
                 </h1>
               </div>
               <button
                 aria-disabled="false"
-                class="c6 c7 c8 c9"
+                class="c7 c8 c9 c10"
                 type="button"
               >
                 <div
@@ -478,141 +482,141 @@ describe('<ListPage />', () => {
                   </svg>
                 </div>
                 <span
-                  class="c4 c10"
+                  class="c5 c11"
                 >
                   Add new role
                 </span>
               </button>
             </div>
             <p
-              class="c4 c11"
+              class="c5 c12"
             >
               List of roles
             </p>
           </div>
         </div>
         <div
-          class="c12"
+          class="c13"
         >
           <div
-            class="c13 c14"
+            class="c14 c15"
           >
             <div
-              class="c15 c16"
+              class="c16 c17"
             >
               <div
-                class="c17 c18"
+                class="c18 c19"
               >
                 <table
                   aria-colcount="5"
                   aria-rowcount="1"
-                  class="c19"
+                  class="c20"
                   role="grid"
                 >
                   <thead
-                    class="c20"
+                    class="c21"
                   >
                     <tr
                       aria-rowindex="1"
-                      class="c21"
+                      class="c22"
                     >
                       <th
                         aria-colindex="1"
-                        class="c22"
+                        class="c23"
                         role="gridcell"
                         tabindex="0"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <span
-                            class="c4 c23"
+                            class="c5 c24"
                           >
                             Name
                           </span>
                           <span
-                            class="c24"
+                            class="c25"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="2"
-                        class="c22"
+                        class="c23"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <span
-                            class="c4 c23"
+                            class="c5 c24"
                           >
                             Description
                           </span>
                           <span
-                            class="c24"
+                            class="c25"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="3"
-                        class="c22"
+                        class="c23"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <span
-                            class="c4 c23"
+                            class="c5 c24"
                           >
                             Users
                           </span>
                           <span
-                            class="c24"
+                            class="c25"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="4"
-                        class="c22"
+                        class="c23"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <div
-                            class="c25"
+                            class="c26"
                           >
                             Actions
                           </div>
                           <span
-                            class="c24"
+                            class="c25"
                           />
                         </div>
                       </th>
                     </tr>
                   </thead>
                   <tbody
-                    class="c26"
+                    class="c27"
                   />
                 </table>
               </div>
             </div>
             <div>
               <hr
-                class="c27 c28"
+                class="c28 c29"
               />
               <button
-                class="c29 c30"
+                class="c30 c31"
               >
                 <div
-                  class="c3"
+                  class="c4"
                 >
                   <div
                     aria-hidden="true"
-                    class="c31 c32"
+                    class="c32 c33"
                   >
                     <svg
                       fill="none"
@@ -628,10 +632,10 @@ describe('<ListPage />', () => {
                     </svg>
                   </div>
                   <div
-                    class="c33"
+                    class="c34"
                   >
                     <span
-                      class="c4 c34"
+                      class="c5 c35"
                     >
                       Add new role
                     </span>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/tests/__snapshots__/index.test.js.snap
index a680768aae..b89664e31e 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/tests/__snapshots__/index.test.js.snap
@@ -13,7 +13,11 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   padding-bottom: 8px;
 }
 
-.c12 {
+.c8 {
+  min-width: 0;
+}
+
+.c13 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -24,12 +28,12 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   cursor: pointer;
 }
 
-.c16 {
+.c17 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c18 {
+.c19 {
   background: #ffffff;
   padding-top: 24px;
   padding-right: 32px;
@@ -66,7 +70,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   justify-content: space-between;
 }
 
-.c8 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -80,7 +84,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   flex-direction: row;
 }
 
-.c11 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -95,7 +99,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   gap: 8px;
 }
 
-.c17 {
+.c18 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -110,7 +114,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   gap: 24px;
 }
 
-.c19 {
+.c20 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -125,7 +129,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   gap: 16px;
 }
 
-.c23 {
+.c24 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -137,9 +141,10 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
-.c10 {
+.c11 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
@@ -150,14 +155,14 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   color: #32324d;
 }
 
-.c15 {
+.c16 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c20 {
+.c21 {
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
@@ -193,35 +198,26 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   color: #666687;
 }
 
-.c24 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c24 > * + * {
-  margin-top: 4px;
-}
-
-.c13 {
+.c14 {
   position: relative;
   outline: none;
 }
 
-.c13 svg {
+.c14 svg {
   height: 12px;
   width: 12px;
 }
 
-.c13 svg > g,
-.c13 svg path {
+.c14 svg > g,
+.c14 svg path {
   fill: #ffffff;
 }
 
-.c13[aria-disabled='true'] {
+.c14[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c13:after {
+.c14:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -236,11 +232,11 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   border: 2px solid transparent;
 }
 
-.c13:focus-visible {
+.c14:focus-visible {
   outline: none;
 }
 
-.c13:focus-visible:after {
+.c14:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -263,48 +259,48 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   width: 1px;
 }
 
-.c14 {
+.c15 {
   height: 2rem;
 }
 
-.c14[aria-disabled='true'] {
+.c15[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c14[aria-disabled='true'] .c9 {
+.c15[aria-disabled='true'] .c10 {
   color: #666687;
 }
 
-.c14[aria-disabled='true'] svg > g,.c14[aria-disabled='true'] svg path {
+.c15[aria-disabled='true'] svg > g,.c15[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c14[aria-disabled='true']:active {
+.c15[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c14[aria-disabled='true']:active .c9 {
+.c15[aria-disabled='true']:active .c10 {
   color: #666687;
 }
 
-.c14[aria-disabled='true']:active svg > g,.c14[aria-disabled='true']:active svg path {
+.c15[aria-disabled='true']:active svg > g,.c15[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c14:hover {
+.c15:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c14:active {
+.c15:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c14 svg > g,
-.c14 svg path {
+.c15 svg > g,
+.c15 svg path {
   fill: #ffffff;
 }
 
@@ -446,13 +442,13 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   width: 100%;
 }
 
-.c21 {
+.c22 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 20px;
 }
 
-.c22 {
+.c23 {
   grid-column: span 6;
   max-width: 100%;
 }
@@ -625,13 +621,13 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
 }
 
 @media (max-width:68.75rem) {
-  .c22 {
+  .c23 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c22 {
+  .c23 {
     grid-column: span 12;
   }
 }
@@ -690,20 +686,20 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
             class="c7"
           >
             <div
-              class="c8"
+              class="c8 c9"
             >
               <h1
-                class="c9 c10"
+                class="c10 c11"
               >
                 Create Transfer Token
               </h1>
             </div>
             <div
-              class="c11"
+              class="c12"
             >
               <button
                 aria-disabled="false"
-                class="c12 c11 c13 c14"
+                class="c13 c12 c14 c15"
                 type="submit"
               >
                 <div
@@ -724,7 +720,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                   </svg>
                 </div>
                 <span
-                  class="c9 c15"
+                  class="c10 c16"
                 >
                   Save
                 </span>
@@ -734,46 +730,48 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
         </div>
       </div>
       <div
-        class="c16"
+        class="c17"
       >
         <div
-          class="c17"
+          class="c18"
         >
           <div
-            class="c18"
+            class="c19"
           >
             <div
-              class="c19"
+              class="c20"
             >
               <h2
-                class="c9 c20"
+                class="c10 c21"
               >
                 Details
               </h2>
               <div
-                class="c21"
+                class="c22"
               >
                 <div
-                  class="c22"
+                  class="c23"
                 >
                   <div
                     class=""
                   >
                     <div>
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c23 c24"
+                          class="c24"
                         >
                           <label
-                            class="c9 c25"
+                            class="c10 c25"
                             for="1"
                           >
                             <div
-                              class="c8"
+                              class="c9"
                             >
                               Name
                               <span
-                                class="c9 c26 c27"
+                                class="c10 c26 c27"
                               >
                                 *
                               </span>
@@ -798,7 +796,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                   </div>
                 </div>
                 <div
-                  class="c22"
+                  class="c23"
                 >
                   <div
                     class=""
@@ -806,19 +804,21 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                     <div
                       class="c30"
                     >
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c23 c24"
+                          class="c24"
                         >
                           <div
-                            class="c8"
+                            class="c9"
                           >
                             <label
-                              class="c9 c25"
+                              class="c10 c25"
                               for="3"
                             >
                               <div
-                                class="c8"
+                                class="c9"
                               >
                                 Description
                               </div>
@@ -841,32 +841,34 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                   </div>
                 </div>
                 <div
-                  class="c22"
+                  class="c23"
                 >
                   <div
                     class=""
                   >
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c23 c24"
+                        class="c24"
                       >
                         <label
-                          class="c9 c25"
+                          class="c10 c25"
                           for="5"
                         >
                           <div
-                            class="c8"
+                            class="c9"
                           >
                             Token duration
                             <span
-                              class="c9 c26 c27"
+                              class="c10 c26 c27"
                             >
                               *
                             </span>
                           </div>
                         </label>
                         <div
-                          class="c8 c33"
+                          class="c9 c33"
                         >
                           <button
                             aria-disabled="false"
@@ -882,13 +884,13 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                             class="c7 c35"
                           >
                             <div
-                              class="c8"
+                              class="c9"
                             >
                               <div
                                 class="c36"
                               >
                                 <span
-                                  class="c9 c37"
+                                  class="c10 c37"
                                   id="5-content"
                                 >
                                   Select
@@ -896,7 +898,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                               </div>
                             </div>
                             <div
-                              class="c8"
+                              class="c9"
                             >
                               <button
                                 aria-hidden="true"
@@ -926,7 +928,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                       </div>
                     </div>
                     <span
-                      class="c9 c41"
+                      class="c10 c41"
                     />
                   </div>
                 </div>
@@ -963,7 +965,11 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
 `;
 
 exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snapshot when editing existing token 1`] = `
-.c12 {
+.c8 {
+  min-width: 0;
+}
+
+.c13 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -974,7 +980,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   cursor: pointer;
 }
 
-.c17 {
+.c18 {
   padding-right: 56px;
   padding-left: 56px;
 }
@@ -991,20 +997,20 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   padding-bottom: 8px;
 }
 
-.c19 {
+.c20 {
   background: #ffffff;
   padding: 24px;
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c20 {
+.c21 {
   background: #f6f6f9;
   padding: 12px;
   border-radius: 4px;
 }
 
-.c26 {
+.c27 {
   background: #ffffff;
   padding-top: 24px;
   padding-right: 32px;
@@ -1014,12 +1020,12 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c44 {
+.c43 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c46 {
+.c45 {
   padding-left: 12px;
 }
 
@@ -1041,7 +1047,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   justify-content: space-between;
 }
 
-.c8 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1055,7 +1061,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   flex-direction: row;
 }
 
-.c11 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1070,7 +1076,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   gap: 8px;
 }
 
-.c18 {
+.c19 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -1085,7 +1091,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   gap: 24px;
 }
 
-.c22 {
+.c23 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -1100,7 +1106,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   gap: 4px;
 }
 
-.c27 {
+.c28 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -1115,21 +1121,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   gap: 16px;
 }
 
-.c31 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c10 {
+.c11 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
@@ -1140,47 +1132,47 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   color: #32324d;
 }
 
-.c15 {
+.c16 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c23 {
+.c24 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 500;
   color: #32324d;
 }
 
-.c25 {
+.c26 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #666687;
 }
 
-.c28 {
+.c29 {
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c33 {
+.c32 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c34 {
+.c33 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #d02b20;
 }
 
-.c45 {
+.c44 {
   font-size: 0.875rem;
   line-height: 1.43;
   display: block;
@@ -1190,41 +1182,32 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   color: #666687;
 }
 
-.c49 {
+.c48 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #666687;
 }
 
-.c32 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c32 > * + * {
-  margin-top: 4px;
-}
-
-.c13 {
+.c14 {
   position: relative;
   outline: none;
 }
 
-.c13 svg {
+.c14 svg {
   height: 12px;
   width: 12px;
 }
 
-.c13 svg > g,
-.c13 svg path {
+.c14 svg > g,
+.c14 svg path {
   fill: #ffffff;
 }
 
-.c13[aria-disabled='true'] {
+.c14[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c13:after {
+.c14:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -1239,11 +1222,11 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   border: 2px solid transparent;
 }
 
-.c13:focus-visible {
+.c14:focus-visible {
   outline: none;
 }
 
-.c13:focus-visible:after {
+.c14:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -1254,7 +1237,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   border: 2px solid #4945ff;
 }
 
-.c50 {
+.c49 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -1266,113 +1249,113 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   width: 1px;
 }
 
-.c51[aria-disabled='true'] .c9 {
+.c50[aria-disabled='true'] .c10 {
   color: #666687;
 }
 
-.c51[aria-disabled='true']:active .c9 {
+.c50[aria-disabled='true']:active .c10 {
   color: #666687;
 }
 
-.c14 {
+.c15 {
   height: 2rem;
   border: 1px solid #dcdce4;
   background: #ffffff;
 }
 
-.c14[aria-disabled='true'] {
+.c15[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c14[aria-disabled='true'] .c9 {
+.c15[aria-disabled='true'] .c10 {
   color: #666687;
 }
 
-.c14[aria-disabled='true'] svg > g,.c14[aria-disabled='true'] svg path {
+.c15[aria-disabled='true'] svg > g,.c15[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c14[aria-disabled='true']:active {
+.c15[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c14[aria-disabled='true']:active .c9 {
+.c15[aria-disabled='true']:active .c10 {
   color: #666687;
 }
 
-.c14[aria-disabled='true']:active svg > g,.c14[aria-disabled='true']:active svg path {
+.c15[aria-disabled='true']:active svg > g,.c15[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c14:hover {
+.c15:hover {
   background-color: #f6f6f9;
 }
 
-.c14:active {
+.c15:active {
   background-color: #eaeaef;
 }
 
-.c14 .c9 {
+.c15 .c10 {
   color: #32324d;
 }
 
-.c14 svg > g,
-.c14 svg path {
+.c15 svg > g,
+.c15 svg path {
   fill: #32324d;
 }
 
-.c16 {
+.c17 {
   height: 2rem;
 }
 
-.c16[aria-disabled='true'] {
+.c17[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c16[aria-disabled='true'] .c9 {
+.c17[aria-disabled='true'] .c10 {
   color: #666687;
 }
 
-.c16[aria-disabled='true'] svg > g,.c16[aria-disabled='true'] svg path {
+.c17[aria-disabled='true'] svg > g,.c17[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c16[aria-disabled='true']:active {
+.c17[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c16[aria-disabled='true']:active .c9 {
+.c17[aria-disabled='true']:active .c10 {
   color: #666687;
 }
 
-.c16[aria-disabled='true']:active svg > g,.c16[aria-disabled='true']:active svg path {
+.c17[aria-disabled='true']:active svg > g,.c17[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c16:hover {
+.c17:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c16:active {
+.c17:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c16 svg > g,
-.c16 svg path {
+.c17 svg > g,
+.c17 svg path {
   fill: #ffffff;
 }
 
-.c35 {
+.c34 {
   line-height: 0;
 }
 
-.c37 {
+.c36 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -1387,36 +1370,36 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   background: inherit;
 }
 
-.c37::-webkit-input-placeholder {
+.c36::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c37::-moz-placeholder {
+.c36::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c37:-ms-input-placeholder {
+.c36:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c37::placeholder {
+.c36::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c37[aria-disabled='true'] {
+.c36[aria-disabled='true'] {
   color: inherit;
 }
 
-.c37:focus {
+.c36:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c36 {
+.c35 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -1428,12 +1411,12 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   transition-duration: 0.2s;
 }
 
-.c36:focus-within {
+.c35:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c41 {
+.c40 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -1451,28 +1434,28 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   transition-duration: 0.2s;
 }
 
-.c41:focus-within {
+.c40:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c47 {
+.c46 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c47 svg {
+.c46 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c47 svg path {
+.c46 svg path {
   fill: #666687;
 }
 
-.c48 {
+.c47 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1482,11 +1465,11 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   cursor: not-allowed;
 }
 
-.c48 svg {
+.c47 svg {
   width: 0.375rem;
 }
 
-.c42 {
+.c41 {
   position: absolute;
   left: 0;
   right: 0;
@@ -1497,25 +1480,25 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   border: none;
 }
 
-.c42:focus {
+.c41:focus {
   outline: none;
 }
 
-.c42[aria-disabled='true'] {
+.c41[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c43 {
+.c42 {
   width: 100%;
 }
 
-.c29 {
+.c30 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 20px;
 }
 
-.c30 {
+.c31 {
   grid-column: span 6;
   max-width: 100%;
 }
@@ -1524,7 +1507,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   outline: none;
 }
 
-.c39 {
+.c38 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   padding-left: 16px;
@@ -1540,12 +1523,12 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   transition-duration: 0.2s;
 }
 
-.c39:focus-within {
+.c38:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c40 {
+.c39 {
   display: block;
   width: 100%;
   font-weight: 400;
@@ -1556,36 +1539,36 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   background: inherit;
 }
 
-.c40::-webkit-input-placeholder {
+.c39::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c40::-moz-placeholder {
+.c39::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c40:-ms-input-placeholder {
+.c39:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c40::placeholder {
+.c39::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c40:focus-within {
+.c39:focus-within {
   outline: none;
 }
 
-.c38 textarea {
+.c37 textarea {
   height: 5rem;
   line-height: 1.25rem;
 }
 
-.c38 textarea::-webkit-input-placeholder {
+.c37 textarea::-webkit-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1593,7 +1576,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   opacity: 1;
 }
 
-.c38 textarea::-moz-placeholder {
+.c37 textarea::-moz-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1601,7 +1584,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   opacity: 1;
 }
 
-.c38 textarea:-ms-input-placeholder {
+.c37 textarea:-ms-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1609,7 +1592,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   opacity: 1;
 }
 
-.c38 textarea::placeholder {
+.c37 textarea::placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1617,16 +1600,16 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   opacity: 1;
 }
 
-.c21 {
+.c22 {
   margin-right: 24px;
 }
 
-.c21 svg {
+.c22 svg {
   width: 2rem;
   height: 2rem;
 }
 
-.c24 {
+.c25 {
   word-break: break-all;
 }
 
@@ -1701,13 +1684,13 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
 }
 
 @media (max-width:68.75rem) {
-  .c30 {
+  .c31 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c30 {
+  .c31 {
     grid-column: span 12;
   }
 }
@@ -1766,20 +1749,20 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
             class="c7"
           >
             <div
-              class="c8"
+              class="c8 c9"
             >
               <h1
-                class="c9 c10"
+                class="c10 c11"
               >
                 My super token
               </h1>
             </div>
             <div
-              class="c11"
+              class="c12"
             >
               <button
                 aria-disabled="false"
-                class="c12 c11 c13 c14"
+                class="c13 c12 c14 c15"
                 name="regenerate"
                 type="button"
               >
@@ -1803,14 +1786,14 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                   </svg>
                 </div>
                 <span
-                  class="c9 c15"
+                  class="c10 c16"
                 >
                   Regenerate
                 </span>
               </button>
               <button
                 aria-disabled="false"
-                class="c12 c11 c13 c16"
+                class="c13 c12 c14 c17"
                 type="submit"
               >
                 <div
@@ -1831,7 +1814,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                   </svg>
                 </div>
                 <span
-                  class="c9 c15"
+                  class="c10 c16"
                 >
                   Save
                 </span>
@@ -1841,16 +1824,16 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
         </div>
       </div>
       <div
-        class="c17"
+        class="c18"
       >
         <div
-          class="c18"
+          class="c19"
         >
           <div
-            class="c19 c8"
+            class="c20 c9"
           >
             <div
-              class="c20 c8 c21"
+              class="c21 c9 c22"
             >
               <svg
                 fill="none"
@@ -1866,72 +1849,74 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
               </svg>
             </div>
             <div
-              class="c22"
+              class="c23"
             >
               <div
-                class="c8"
+                class="c9"
               >
                 <span
-                  class="c9 c23 c24"
+                  class="c10 c24 c25"
                 >
                   This token isn’t accessible anymore.
                 </span>
               </div>
               <span
-                class="c9 c25"
+                class="c10 c26"
               >
                 For security reasons, you can only see your token once.
               </span>
             </div>
           </div>
           <div
-            class="c26"
+            class="c27"
           >
             <div
-              class="c27"
+              class="c28"
             >
               <h2
-                class="c9 c28"
+                class="c10 c29"
               >
                 Details
               </h2>
               <div
-                class="c29"
+                class="c30"
               >
                 <div
-                  class="c30"
+                  class="c31"
                 >
                   <div
                     class=""
                   >
                     <div>
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c31 c32"
+                          class="c23"
                         >
                           <label
-                            class="c9 c33"
+                            class="c10 c32"
                             for="8"
                           >
                             <div
-                              class="c8"
+                              class="c9"
                             >
                               Name
                               <span
-                                class="c9 c34 c35"
+                                class="c10 c33 c34"
                               >
                                 *
                               </span>
                             </div>
                           </label>
                           <div
-                            class="c7 c36"
+                            class="c7 c35"
                           >
                             <input
                               aria-disabled="false"
                               aria-invalid="false"
                               aria-required="true"
-                              class="c37"
+                              class="c36"
                               id="8"
                               name="name"
                               value="My super token"
@@ -1943,39 +1928,41 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                   </div>
                 </div>
                 <div
-                  class="c30"
+                  class="c31"
                 >
                   <div
                     class=""
                   >
                     <div
-                      class="c38"
+                      class="c37"
                     >
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c31 c32"
+                          class="c23"
                         >
                           <div
-                            class="c8"
+                            class="c9"
                           >
                             <label
-                              class="c9 c33"
+                              class="c10 c32"
                               for="10"
                             >
                               <div
-                                class="c8"
+                                class="c9"
                               >
                                 Description
                               </div>
                             </label>
                           </div>
                           <div
-                            class="c39"
+                            class="c38"
                           >
                             <textarea
                               aria-invalid="false"
                               aria-required="false"
-                              class="c40"
+                              class="c39"
                               id="10"
                               name="description"
                             >
@@ -1988,32 +1975,34 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                   </div>
                 </div>
                 <div
-                  class="c30"
+                  class="c31"
                 >
                   <div
                     class=""
                   >
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c31 c32"
+                        class="c23"
                       >
                         <label
-                          class="c9 c33"
+                          class="c10 c32"
                           for="12"
                         >
                           <div
-                            class="c8"
+                            class="c9"
                           >
                             Token duration
                             <span
-                              class="c9 c34 c35"
+                              class="c10 c33 c34"
                             >
                               *
                             </span>
                           </div>
                         </label>
                         <div
-                          class="c8 c41"
+                          class="c9 c40"
                           disabled=""
                         >
                           <button
@@ -2021,22 +2010,22 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-labelledby="12 12-label 12-content"
-                            class="c42"
+                            class="c41"
                             id="12"
                             name="lifespan"
                             type="button"
                           />
                           <div
-                            class="c7 c43"
+                            class="c7 c42"
                           >
                             <div
-                              class="c8"
+                              class="c9"
                             >
                               <div
-                                class="c44"
+                                class="c43"
                               >
                                 <span
-                                  class="c9 c45"
+                                  class="c10 c44"
                                   id="12-content"
                                 >
                                   Select
@@ -2044,11 +2033,11 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                               </div>
                             </div>
                             <div
-                              class="c8"
+                              class="c9"
                             >
                               <button
                                 aria-hidden="true"
-                                class="c46 c47 c48"
+                                class="c45 c46 c47"
                                 disabled=""
                                 tabindex="-1"
                                 title="Carret Down Button"
@@ -2075,7 +2064,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
                       </div>
                     </div>
                     <span
-                      class="c9 c49"
+                      class="c10 c48"
                     >
                       Expiration date: Unlimited
                     </span>
@@ -2089,7 +2078,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
     </form>
   </main>
   <div
-    class="c50"
+    class="c49"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/tests/index.test.js
index 108fe75a30..354d465e0c 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/tests/index.test.js
@@ -124,27 +124,31 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         padding-left: 56px;
       }
 
-      .c14 {
+      .c3 {
+        min-width: 0;
+      }
+
+      .c15 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c15 {
+      .c16 {
         background: #ffffff;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c17 {
+      .c18 {
         position: relative;
       }
 
-      .c19 {
+      .c20 {
         padding-right: 24px;
         padding-left: 24px;
       }
 
-      .c27 {
+      .c28 {
         padding: 8px;
         border-radius: 4px;
         border-width: 0;
@@ -154,11 +158,11 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         cursor: pointer;
       }
 
-      .c34 {
+      .c35 {
         max-width: 15.625rem;
       }
 
-      .c42 {
+      .c43 {
         padding-left: 4px;
       }
 
@@ -180,7 +184,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         justify-content: space-between;
       }
 
-      .c3 {
+      .c4 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -194,7 +198,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         flex-direction: row;
       }
 
-      .c28 {
+      .c29 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -212,7 +216,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         justify-content: center;
       }
 
-      .c38 {
+      .c39 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -230,20 +234,20 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         justify-content: end;
       }
 
-      .c5 {
+      .c6 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c13 {
+      .c14 {
         font-size: 1rem;
         line-height: 1.5;
         color: #666687;
       }
 
-      .c25 {
+      .c26 {
         font-weight: 600;
         font-size: 0.6875rem;
         line-height: 1.45;
@@ -251,17 +255,6 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         color: #666687;
       }
 
-      .c35 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-weight: 600;
-        color: #32324d;
-      }
-
       .c36 {
         font-size: 0.875rem;
         line-height: 1.43;
@@ -269,35 +262,46 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        font-weight: 600;
         color: #32324d;
       }
 
       .c37 {
         font-size: 0.875rem;
         line-height: 1.43;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         color: #32324d;
       }
 
-      .c29 {
+      .c38 {
+        font-size: 0.875rem;
+        line-height: 1.43;
+        color: #32324d;
+      }
+
+      .c30 {
         position: relative;
         outline: none;
       }
 
-      .c29 svg {
+      .c30 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c29 svg > g,
-      .c29 svg path {
+      .c30 svg > g,
+      .c30 svg path {
         fill: #ffffff;
       }
 
-      .c29[aria-disabled='true'] {
+      .c30[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c29:after {
+      .c30:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -312,11 +316,11 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         border: 2px solid transparent;
       }
 
-      .c29:focus-visible {
+      .c30:focus-visible {
         outline: none;
       }
 
-      .c29:focus-visible:after {
+      .c30:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -327,7 +331,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c31 {
+      .c32 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -339,38 +343,38 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         width: 1px;
       }
 
-      .c43[aria-disabled='true'] .c4 {
+      .c44[aria-disabled='true'] .c5 {
         color: #666687;
       }
 
-      .c43[aria-disabled='true']:active .c4 {
+      .c44[aria-disabled='true']:active .c5 {
         color: #666687;
       }
 
-      .c43:active .c4 {
+      .c44:active .c5 {
         color: #4945ff;
       }
 
-      .c43 .c4 {
+      .c44 .c5 {
         color: #271fe0;
       }
 
-      .c30 svg > g,
-      .c30 svg path {
+      .c31 svg > g,
+      .c31 svg path {
         fill: #8e8ea9;
       }
 
-      .c30:hover svg > g,
-      .c30:hover svg path {
+      .c31:hover svg > g,
+      .c31:hover svg path {
         fill: #666687;
       }
 
-      .c30:active svg > g,
-      .c30:active svg path {
+      .c31:active svg > g,
+      .c31:active svg path {
         fill: #a5a5ba;
       }
 
-      .c30[aria-disabled='true'] svg path {
+      .c31[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
@@ -378,17 +382,17 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         outline: none;
       }
 
-      .c16 {
+      .c17 {
         overflow: hidden;
         border: 1px solid #eaeaef;
       }
 
-      .c21 {
+      .c22 {
         width: 100%;
         white-space: nowrap;
       }
 
-      .c18:before {
+      .c19:before {
         background: linear-gradient(90deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -398,7 +402,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         left: 0;
       }
 
-      .c18:after {
+      .c19:after {
         background: linear-gradient(270deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -409,60 +413,60 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         top: 0;
       }
 
-      .c20 {
+      .c21 {
         overflow-x: auto;
       }
 
-      .c33 tr:last-of-type {
+      .c34 tr:last-of-type {
         border-bottom: none;
       }
 
-      .c22 {
-        border-bottom: 1px solid #eaeaef;
-      }
-
       .c23 {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c23 td,
-      .c23 th {
+      .c24 {
+        border-bottom: 1px solid #eaeaef;
+      }
+
+      .c24 td,
+      .c24 th {
         padding: 16px;
       }
 
-      .c23 td:first-of-type,
-      .c23 th:first-of-type {
+      .c24 td:first-of-type,
+      .c24 th:first-of-type {
         padding: 0 4px;
       }
 
-      .c23 th {
+      .c24 th {
         padding-top: 0;
         padding-bottom: 0;
         height: 3.5rem;
       }
 
-      .c24 {
+      .c25 {
         vertical-align: middle;
         text-align: left;
         color: #666687;
         outline-offset: -4px;
       }
 
-      .c24 input {
+      .c25 input {
         vertical-align: sub;
       }
 
-      .c26 svg {
+      .c27 svg {
         height: 0.25rem;
       }
 
-      .c32 {
+      .c33 {
         -webkit-transform: rotate(180deg);
         -ms-transform: rotate(180deg);
         transform: rotate(180deg);
       }
 
-      .c6 {
+      .c7 {
         background: #4945ff;
         padding-top: 8px;
         padding-right: 16px;
@@ -473,20 +477,20 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         border: 1px solid #4945ff;
       }
 
-      .c12 {
+      .c13 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c41 {
+      .c42 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #4945ff;
       }
 
-      .c7 {
+      .c8 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -501,7 +505,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         gap: 8px;
       }
 
-      .c10 {
+      .c11 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -515,26 +519,26 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         flex-direction: row;
       }
 
-      .c8 {
+      .c9 {
         position: relative;
         outline: none;
       }
 
-      .c8 svg {
+      .c9 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c8 svg > g,
-      .c8 svg path {
+      .c9 svg > g,
+      .c9 svg path {
         fill: #ffffff;
       }
 
-      .c8[aria-disabled='true'] {
+      .c9[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c8:after {
+      .c9:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -549,11 +553,11 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         border: 2px solid transparent;
       }
 
-      .c8:focus-visible {
+      .c9:focus-visible {
         outline: none;
       }
 
-      .c8:focus-visible:after {
+      .c9:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -564,7 +568,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c39 {
+      .c40 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -579,15 +583,15 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         outline: none;
       }
 
-      .c39 svg path {
+      .c40 svg path {
         fill: #4945ff;
       }
 
-      .c39 svg {
+      .c40 svg {
         font-size: 0.625rem;
       }
 
-      .c39:after {
+      .c40:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -602,11 +606,11 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         border: 2px solid transparent;
       }
 
-      .c39:focus-visible {
+      .c40:focus-visible {
         outline: none;
       }
 
-      .c39:focus-visible:after {
+      .c40:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -617,58 +621,58 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c9 {
+      .c10 {
         -webkit-text-decoration: none;
         text-decoration: none;
       }
 
-      .c9[aria-disabled='true'] {
+      .c10[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c9[aria-disabled='true'] .c11 {
+      .c10[aria-disabled='true'] .c12 {
         color: #666687;
       }
 
-      .c9[aria-disabled='true'] svg > g,.c9[aria-disabled='true'] svg path {
+      .c10[aria-disabled='true'] svg > g,.c10[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c9[aria-disabled='true']:active {
+      .c10[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c9[aria-disabled='true']:active .c11 {
+      .c10[aria-disabled='true']:active .c12 {
         color: #666687;
       }
 
-      .c9[aria-disabled='true']:active svg > g,.c9[aria-disabled='true']:active svg path {
+      .c10[aria-disabled='true']:active svg > g,.c10[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c9:hover {
+      .c10:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c9:active {
+      .c10:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c9 svg > g,
-      .c9 svg path {
+      .c10 svg > g,
+      .c10 svg path {
         fill: #ffffff;
       }
 
-      .c40 svg path {
+      .c41 svg path {
         fill: #8e8ea9;
       }
 
-      .c40:hover svg path,
-      .c40:focus svg path {
+      .c41:hover svg path,
+      .c41:focus svg path {
         fill: #32324d;
       }
 
@@ -690,23 +694,23 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
               class="c2"
             >
               <div
-                class="c3"
+                class="c3 c4"
               >
                 <h1
-                  class="c4 c5"
+                  class="c5 c6"
                 >
                   Transfer Tokens
                 </h1>
               </div>
               <a
                 aria-disabled="false"
-                class="c6 c7 c8 c9"
+                class="c7 c8 c9 c10"
                 data-testid="create-transfer-token-button"
                 href="/settings/transfer-tokens/create"
               >
                 <div
                   aria-hidden="true"
-                  class="c10"
+                  class="c11"
                 >
                   <svg
                     fill="none"
@@ -722,57 +726,57 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                   </svg>
                 </div>
                 <span
-                  class="c11 c12"
+                  class="c12 c13"
                 >
                   Create new Transfer Token
                 </span>
               </a>
             </div>
             <p
-              class="c4 c13"
+              class="c5 c14"
             >
               "List of generated transfer tokens"
             </p>
           </div>
         </div>
         <div
-          class="c14"
+          class="c15"
         >
           <div
-            class="c15 c16"
+            class="c16 c17"
           >
             <div
-              class="c17 c18"
+              class="c18 c19"
             >
               <div
-                class="c19 c20"
+                class="c20 c21"
               >
                 <table
                   aria-colcount="5"
                   aria-rowcount="2"
-                  class="c21"
+                  class="c22"
                   role="grid"
                 >
                   <thead
-                    class="c22"
+                    class="c23"
                   >
                     <tr
                       aria-rowindex="1"
-                      class="c23"
+                      class="c24"
                     >
                       <th
                         aria-colindex="1"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                         tabindex="0"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <span>
                             <span
                               aria-labelledby="0"
-                              class="c4 c25"
+                              class="c5 c26"
                               label="Name"
                               tabindex="-1"
                             >
@@ -780,24 +784,24 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c26"
+                            class="c27"
                           >
                             <span>
                               <button
                                 aria-disabled="false"
                                 aria-labelledby="1"
-                                class="c27 c28 c29 c30"
+                                class="c28 c29 c30 c31"
                                 tabindex="-1"
                                 type="button"
                               >
                                 <span
-                                  class="c31"
+                                  class="c32"
                                 >
                                   Sort on Name
                                 </span>
                                 <svg
                                   aria-hidden="true"
-                                  class="c32"
+                                  class="c33"
                                   fill="none"
                                   focusable="false"
                                   height="1rem"
@@ -819,16 +823,16 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                       </th>
                       <th
                         aria-colindex="2"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <span>
                             <span
                               aria-labelledby="2"
-                              class="c4 c25"
+                              class="c5 c26"
                               label="Description"
                               tabindex="-1"
                             >
@@ -836,22 +840,22 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c26"
+                            class="c27"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="3"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <span>
                             <span
                               aria-labelledby="3"
-                              class="c4 c25"
+                              class="c5 c26"
                               label="Created at"
                               tabindex="-1"
                             >
@@ -859,22 +863,22 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c26"
+                            class="c27"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="4"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <span>
                             <span
                               aria-labelledby="4"
-                              class="c4 c25"
+                              class="c5 c26"
                               label="Last used"
                               tabindex="-1"
                             >
@@ -882,73 +886,73 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c26"
+                            class="c27"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="5"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <div
-                            class="c31"
+                            class="c32"
                           >
                             Actions
                           </div>
                           <span
-                            class="c26"
+                            class="c27"
                           />
                         </div>
                       </th>
                     </tr>
                   </thead>
                   <tbody
-                    class="c33"
+                    class="c34"
                     entriestodelete=""
                     headers="[object Object],[object Object],[object Object],[object Object]"
                   >
                     <tr
                       aria-rowindex="2"
-                      class="c23"
+                      class="c24"
                       style="cursor: pointer;"
                     >
                       <td
                         aria-colindex="1"
-                        class="c34 c24"
+                        class="c35 c25"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c4 c35"
+                          class="c5 c36"
                         >
                           My super token
                         </span>
                       </td>
                       <td
                         aria-colindex="2"
-                        class="c34 c24"
+                        class="c35 c25"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c4 c36"
+                          class="c5 c37"
                         >
                           This describe my super token
                         </span>
                       </td>
                       <td
                         aria-colindex="3"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c4 c37"
+                          class="c5 c38"
                         >
                           <time
                             datetime="2021-11-15T00:00:00.000Z"
@@ -960,27 +964,27 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                       </td>
                       <td
                         aria-colindex="4"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                         tabindex="-1"
                       />
                       <td
                         aria-colindex="5"
-                        class="c24"
+                        class="c25"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <div
-                          class="c38"
+                          class="c39"
                         >
                           <a
-                            class="c39 c40"
+                            class="c40 c41"
                             href="/settings/transfer-tokens/1"
                             tabindex="-1"
                             title="Edit My super token"
                           >
                             <span
-                              class="c11 c41"
+                              class="c12 c42"
                             >
                               <svg
                                 fill="none"
@@ -999,19 +1003,19 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                             </span>
                           </a>
                           <div
-                            class="c42"
+                            class="c43"
                           >
                             <span>
                               <button
                                 aria-disabled="false"
                                 aria-labelledby="5"
-                                class="c27 c28 c29 c30"
+                                class="c28 c29 c30 c31"
                                 name="delete"
                                 tabindex="-1"
                                 type="button"
                               >
                                 <span
-                                  class="c31"
+                                  class="c32"
                                 >
                                   Delete My super token
                                 </span>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap
index f83d57d408..88637ed8a3 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap
@@ -5,16 +5,16 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   padding-top: 16px;
 }
 
-.c9 {
+.c8 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c11 {
+.c10 {
   padding-left: 12px;
 }
 
-.c14 {
+.c13 {
   padding-left: 8px;
 }
 
@@ -64,7 +64,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c7 {
+.c6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -82,7 +82,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c10 {
+.c9 {
   font-size: 0.875rem;
   line-height: 1.43;
   display: block;
@@ -92,31 +92,26 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c15 {
+.c14 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #666687;
 }
 
-.c22 {
+.c21 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c25 {
+.c24 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #32324d;
 }
 
-.c4 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c19 {
+.c18 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -128,7 +123,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c5 {
+.c4 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -144,28 +139,28 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c5:focus-within {
+.c4:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c12 {
+.c11 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c12 svg {
+.c11 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c12 svg path {
+.c11 svg path {
   fill: #666687;
 }
 
-.c13 {
+.c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -174,11 +169,11 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c13 svg {
+.c12 svg {
   width: 0.375rem;
 }
 
-.c6 {
+.c5 {
   position: absolute;
   left: 0;
   right: 0;
@@ -189,27 +184,27 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c6:focus {
+.c5:focus {
   outline: none;
 }
 
-.c6[aria-disabled='true'] {
+.c5[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c8 {
+.c7 {
   width: 100%;
 }
 
-.c16 > * + * {
+.c15 > * + * {
   margin-left: 4px;
 }
 
-.c23 {
+.c22 {
   line-height: revert;
 }
 
-.c17 {
+.c16 {
   padding: 12px;
   border-radius: 4px;
   -webkit-text-decoration: none;
@@ -222,7 +217,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c17:after {
+.c16:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -237,11 +232,55 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c17:focus-visible {
+.c16:focus-visible {
   outline: none;
 }
 
-.c17:focus-visible:after {
+.c16:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
+.c19 {
+  padding: 12px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  outline: none;
+}
+
+.c19:after {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border: 2px solid transparent;
+}
+
+.c19:focus-visible {
+  outline: none;
+}
+
+.c19:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -253,90 +292,46 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
 }
 
 .c20 {
-  padding: 12px;
-  border-radius: 4px;
-  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  outline: none;
-}
-
-.c20:after {
-  -webkit-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -4px;
-  bottom: -4px;
-  left: -4px;
-  right: -4px;
-  border: 2px solid transparent;
-}
-
-.c20:focus-visible {
-  outline: none;
-}
-
-.c20:focus-visible:after {
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -5px;
-  bottom: -5px;
-  left: -5px;
-  right: -5px;
-  border: 2px solid #4945ff;
-}
-
-.c21 {
   color: #271fe0;
   background: #ffffff;
 }
 
-.c21:hover {
+.c20:hover {
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c24 {
+.c23 {
   color: #32324d;
 }
 
-.c24:hover {
+.c23:hover {
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c18 {
+.c17 {
   font-size: 0.7rem;
   pointer-events: none;
 }
 
-.c18 svg path {
+.c17 svg path {
   fill: #c0c0cf;
 }
 
-.c18:focus svg path,
-.c18:hover svg path {
+.c17:focus svg path,
+.c17:hover svg path {
   fill: #c0c0cf;
 }
 
-.c26 {
+.c25 {
   font-size: 0.7rem;
 }
 
-.c26 svg path {
+.c25 svg path {
   fill: #666687;
 }
 
-.c26:focus svg path,
-.c26:hover svg path {
+.c25:focus svg path,
+.c25:hover svg path {
   fill: #4a4a6a;
 }
 
@@ -350,12 +345,14 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
       <div
         class="c2"
       >
-        <div>
+        <div
+          class=""
+        >
           <div
-            class="c3 c4"
+            class="c3"
           >
             <div
-              class="c2 c5"
+              class="c2 c4"
             >
               <button
                 aria-disabled="false"
@@ -363,21 +360,21 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
                 aria-haspopup="listbox"
                 aria-label="Entries per page"
                 aria-labelledby="1 1-label 1-content"
-                class="c6"
+                class="c5"
                 id="1"
                 type="button"
               />
               <div
-                class="c7 c8"
+                class="c6 c7"
               >
                 <div
                   class="c2"
                 >
                   <div
-                    class="c9"
+                    class="c8"
                   >
                     <span
-                      class="c10"
+                      class="c9"
                       id="1-content"
                     >
                       10
@@ -389,7 +386,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
                 >
                   <button
                     aria-hidden="true"
-                    class="c11 c12 c13"
+                    class="c10 c11 c12"
                     tabindex="-1"
                     title="Carret Down Button"
                     type="button"
@@ -415,10 +412,10 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
           </div>
         </div>
         <div
-          class="c14"
+          class="c13"
         >
           <label
-            class="c15"
+            class="c14"
             for="page-size"
           >
             Entries per page
@@ -430,18 +427,18 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
         class=""
       >
         <ul
-          class="c2 c16"
+          class="c2 c15"
         >
           <li>
             <a
               aria-current="page"
               aria-disabled="true"
-              class="c17 c18 active"
+              class="c16 c17 active"
               href="/settings/user"
               tabindex="-1"
             >
               <div
-                class="c19"
+                class="c18"
               >
                 Go to previous page
               </div>
@@ -463,17 +460,17 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
           <li>
             <a
               aria-current="page"
-              class="c20 c21 active"
+              class="c19 c20 active"
               href="/settings/user?pageSize=10&page=1&sort=firstname"
             >
               <div
-                class="c19"
+                class="c18"
               >
                 Go to page 1
               </div>
               <span
                 aria-hidden="true"
-                class="c22 c23"
+                class="c21 c22"
               >
                 1
               </span>
@@ -482,17 +479,17 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
           <li>
             <a
               aria-current="page"
-              class="c17 c24 active"
+              class="c16 c23 active"
               href="/settings/user?pageSize=10&page=2&sort=firstname"
             >
               <div
-                class="c19"
+                class="c18"
               >
                 Go to page 2
               </div>
               <span
                 aria-hidden="true"
-                class="c25 c23"
+                class="c24 c22"
               >
                 2
               </span>
@@ -502,11 +499,11 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
             <a
               aria-current="page"
               aria-disabled="false"
-              class="c17 c26 active"
+              class="c16 c25 active"
               href="/settings/user?pageSize=10&page=2&sort=firstname"
             >
               <div
-                class="c19"
+                class="c18"
               >
                 Go to next page
               </div>
@@ -530,7 +527,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c19"
+    class="c18"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js
index 392168a6a9..b655ae7914 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js
@@ -65,40 +65,44 @@ describe('Admin | containers | ListView', () => {
         padding-left: 56px;
       }
 
-      .c16 {
+      .c6 {
+        min-width: 0;
+      }
+
+      .c17 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c17 {
+      .c18 {
         background: #ffffff;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c19 {
+      .c20 {
         position: relative;
       }
 
-      .c21 {
+      .c22 {
         padding-right: 24px;
         padding-left: 24px;
       }
 
-      .c29 {
+      .c30 {
         width: 20%;
       }
 
-      .c31 {
+      .c32 {
         width: 60%;
       }
 
-      .c39 {
+      .c40 {
         color: #328048;
         padding-left: 8px;
       }
 
-      .c41 {
+      .c42 {
         padding: 8px;
         border-radius: 4px;
         border-width: 0;
@@ -108,25 +112,25 @@ describe('Admin | containers | ListView', () => {
         cursor: pointer;
       }
 
-      .c45 {
+      .c46 {
         color: #d02b20;
         padding-left: 8px;
       }
 
-      .c46 {
+      .c47 {
         background: #eaeaef;
       }
 
-      .c48 {
+      .c49 {
         background: #f0f0ff;
         padding: 20px;
       }
 
-      .c50 {
+      .c51 {
         background: #d9d8ff;
       }
 
-      .c52 {
+      .c53 {
         padding-left: 12px;
       }
 
@@ -148,7 +152,7 @@ describe('Admin | containers | ListView', () => {
         justify-content: space-between;
       }
 
-      .c6 {
+      .c7 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -162,7 +166,7 @@ describe('Admin | containers | ListView', () => {
         flex-direction: row;
       }
 
-      .c40 {
+      .c41 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -177,7 +181,7 @@ describe('Admin | containers | ListView', () => {
         gap: 4px;
       }
 
-      .c42 {
+      .c43 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -195,20 +199,20 @@ describe('Admin | containers | ListView', () => {
         justify-content: center;
       }
 
-      .c7 {
+      .c8 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c15 {
+      .c16 {
         font-size: 1rem;
         line-height: 1.5;
         color: #666687;
       }
 
-      .c30 {
+      .c31 {
         font-weight: 600;
         font-size: 0.6875rem;
         line-height: 1.45;
@@ -216,46 +220,46 @@ describe('Admin | containers | ListView', () => {
         color: #666687;
       }
 
-      .c34 {
+      .c35 {
         font-size: 0.875rem;
         line-height: 1.43;
         font-weight: 500;
         color: #32324d;
       }
 
-      .c35 {
+      .c36 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #32324d;
       }
 
-      .c53 {
+      .c54 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #4945ff;
       }
 
-      .c43 {
+      .c44 {
         position: relative;
         outline: none;
       }
 
-      .c43 svg {
+      .c44 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c43 svg > g,
-      .c43 svg path {
+      .c44 svg > g,
+      .c44 svg path {
         fill: #ffffff;
       }
 
-      .c43[aria-disabled='true'] {
+      .c44[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c43:after {
+      .c44:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -270,11 +274,11 @@ describe('Admin | containers | ListView', () => {
         border: 2px solid transparent;
       }
 
-      .c43:focus-visible {
+      .c44:focus-visible {
         outline: none;
       }
 
-      .c43:focus-visible:after {
+      .c44:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -285,7 +289,7 @@ describe('Admin | containers | ListView', () => {
         border: 2px solid #4945ff;
       }
 
-      .c27 {
+      .c28 {
         height: 18px;
         min-width: 18px;
         margin: 0;
@@ -296,12 +300,12 @@ describe('Admin | containers | ListView', () => {
         cursor: pointer;
       }
 
-      .c27:checked {
+      .c28:checked {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c27:checked:after {
+      .c28:checked:after {
         content: '';
         display: block;
         position: relative;
@@ -315,21 +319,21 @@ describe('Admin | containers | ListView', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c27:checked:disabled:after {
+      .c28:checked:disabled:after {
         background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
       }
 
-      .c27:disabled {
+      .c28:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c27:indeterminate {
+      .c28:indeterminate {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c27:indeterminate:after {
+      .c28:indeterminate:after {
         content: '';
         display: block;
         position: relative;
@@ -344,16 +348,16 @@ describe('Admin | containers | ListView', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c27:indeterminate:disabled {
+      .c28:indeterminate:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c27:indeterminate:disabled:after {
+      .c28:indeterminate:disabled:after {
         background-color: #8e8ea9;
       }
 
-      .c32 {
+      .c33 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -365,7 +369,7 @@ describe('Admin | containers | ListView', () => {
         width: 1px;
       }
 
-      .c47 {
+      .c48 {
         height: 1px;
         border: none;
         -webkit-flex-shrink: 0;
@@ -374,22 +378,22 @@ describe('Admin | containers | ListView', () => {
         margin: 0;
       }
 
-      .c44 svg > g,
-      .c44 svg path {
+      .c45 svg > g,
+      .c45 svg path {
         fill: #8e8ea9;
       }
 
-      .c44:hover svg > g,
-      .c44:hover svg path {
+      .c45:hover svg > g,
+      .c45:hover svg path {
         fill: #666687;
       }
 
-      .c44:active svg > g,
-      .c44:active svg path {
+      .c45:active svg > g,
+      .c45:active svg path {
         fill: #a5a5ba;
       }
 
-      .c44[aria-disabled='true'] svg path {
+      .c45[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
@@ -406,7 +410,7 @@ describe('Admin | containers | ListView', () => {
         outline: none;
       }
 
-      .c38 {
+      .c39 {
         background: #ee5e52;
         border: none;
         border-radius: 16px;
@@ -415,11 +419,11 @@ describe('Admin | containers | ListView', () => {
         width: 2.5rem;
       }
 
-      .c38 span {
+      .c39 span {
         font-size: 0;
       }
 
-      .c38:before {
+      .c39:before {
         content: '';
         background: #ffffff;
         width: 1rem;
@@ -432,33 +436,33 @@ describe('Admin | containers | ListView', () => {
         top: 4px;
       }
 
-      .c36 {
+      .c37 {
         background: transparent;
         padding: 0;
         border: none;
       }
 
-      .c36[aria-checked='true'] .c37 {
+      .c37[aria-checked='true'] .c38 {
         background: #5cb176;
       }
 
-      .c36[aria-checked='true'] .c37:before {
+      .c37[aria-checked='true'] .c38:before {
         -webkit-transform: translateX(1rem);
         -ms-transform: translateX(1rem);
         transform: translateX(1rem);
       }
 
-      .c18 {
+      .c19 {
         overflow: hidden;
         border: 1px solid #eaeaef;
       }
 
-      .c23 {
+      .c24 {
         width: 100%;
         white-space: nowrap;
       }
 
-      .c20:before {
+      .c21:before {
         background: linear-gradient(90deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -468,7 +472,7 @@ describe('Admin | containers | ListView', () => {
         left: 0;
       }
 
-      .c20:after {
+      .c21:after {
         background: linear-gradient(270deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -479,54 +483,54 @@ describe('Admin | containers | ListView', () => {
         top: 0;
       }
 
-      .c22 {
+      .c23 {
         overflow-x: auto;
       }
 
-      .c33 tr:last-of-type {
+      .c34 tr:last-of-type {
         border-bottom: none;
       }
 
-      .c24 {
-        border-bottom: 1px solid #eaeaef;
-      }
-
       .c25 {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c25 td,
-      .c25 th {
+      .c26 {
+        border-bottom: 1px solid #eaeaef;
+      }
+
+      .c26 td,
+      .c26 th {
         padding: 16px;
       }
 
-      .c25 td:first-of-type,
-      .c25 th:first-of-type {
+      .c26 td:first-of-type,
+      .c26 th:first-of-type {
         padding: 0 4px;
       }
 
-      .c25 th {
+      .c26 th {
         padding-top: 0;
         padding-bottom: 0;
         height: 3.5rem;
       }
 
-      .c26 {
+      .c27 {
         vertical-align: middle;
         text-align: left;
         color: #666687;
         outline-offset: -4px;
       }
 
-      .c26 input {
+      .c27 input {
         vertical-align: sub;
       }
 
-      .c28 svg {
+      .c29 svg {
         height: 0.25rem;
       }
 
-      .c51 {
+      .c52 {
         height: 1.5rem;
         width: 1.5rem;
         border-radius: 50%;
@@ -544,23 +548,23 @@ describe('Admin | containers | ListView', () => {
         align-items: center;
       }
 
-      .c51 svg {
+      .c52 svg {
         height: 0.625rem;
         width: 0.625rem;
       }
 
-      .c51 svg path {
+      .c52 svg path {
         fill: #4945ff;
       }
 
-      .c49 {
+      .c50 {
         border-radius: 0 0 4px 4px;
         display: block;
         width: 100%;
         border: none;
       }
 
-      .c8 {
+      .c9 {
         background: #4945ff;
         padding-top: 8px;
         padding-right: 16px;
@@ -571,14 +575,14 @@ describe('Admin | containers | ListView', () => {
         border: 1px solid #4945ff;
       }
 
-      .c14 {
+      .c15 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c9 {
+      .c10 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -593,7 +597,7 @@ describe('Admin | containers | ListView', () => {
         gap: 8px;
       }
 
-      .c12 {
+      .c13 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -607,26 +611,26 @@ describe('Admin | containers | ListView', () => {
         flex-direction: row;
       }
 
-      .c10 {
+      .c11 {
         position: relative;
         outline: none;
       }
 
-      .c10 svg {
+      .c11 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c10 svg > g,
-      .c10 svg path {
+      .c11 svg > g,
+      .c11 svg path {
         fill: #ffffff;
       }
 
-      .c10[aria-disabled='true'] {
+      .c11[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c10:after {
+      .c11:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -641,11 +645,11 @@ describe('Admin | containers | ListView', () => {
         border: 2px solid transparent;
       }
 
-      .c10:focus-visible {
+      .c11:focus-visible {
         outline: none;
       }
 
-      .c10:focus-visible:after {
+      .c11:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -656,54 +660,54 @@ describe('Admin | containers | ListView', () => {
         border: 2px solid #4945ff;
       }
 
-      .c11 {
+      .c12 {
         -webkit-text-decoration: none;
         text-decoration: none;
       }
 
-      .c11[aria-disabled='true'] {
+      .c12[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c11[aria-disabled='true'] .c13 {
+      .c12[aria-disabled='true'] .c14 {
         color: #666687;
       }
 
-      .c11[aria-disabled='true'] svg > g,.c11[aria-disabled='true'] svg path {
+      .c12[aria-disabled='true'] svg > g,.c12[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c11[aria-disabled='true']:active {
+      .c12[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c11[aria-disabled='true']:active .c13 {
+      .c12[aria-disabled='true']:active .c14 {
         color: #666687;
       }
 
-      .c11[aria-disabled='true']:active svg > g,.c11[aria-disabled='true']:active svg path {
+      .c12[aria-disabled='true']:active svg > g,.c12[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c11:hover {
+      .c12:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c11:active {
+      .c12:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c11 svg > g,
-      .c11 svg path {
+      .c12 svg > g,
+      .c12 svg path {
         fill: #ffffff;
       }
 
       @media (prefers-reduced-motion:reduce) {
-        .c38:before {
+        .c39:before {
           -webkit-transition: none;
           transition: none;
         }
@@ -733,22 +737,22 @@ describe('Admin | containers | ListView', () => {
                   class="c5"
                 >
                   <div
-                    class="c6"
+                    class="c6 c7"
                   >
                     <h1
-                      class="c7"
+                      class="c8"
                     >
                       Webhooks
                     </h1>
                   </div>
                   <a
                     aria-disabled="false"
-                    class="c8 c9 c10 c11"
+                    class="c9 c10 c11 c12"
                     href="//create"
                   >
                     <div
                       aria-hidden="true"
-                      class="c12"
+                      class="c13"
                     >
                       <svg
                         fill="none"
@@ -764,157 +768,157 @@ describe('Admin | containers | ListView', () => {
                       </svg>
                     </div>
                     <span
-                      class="c13 c14"
+                      class="c14 c15"
                     >
                       Create new webhook
                     </span>
                   </a>
                 </div>
                 <p
-                  class="c15"
+                  class="c16"
                 >
                   Get POST changes notifications
                 </p>
               </div>
             </div>
             <div
-              class="c16"
+              class="c17"
             >
               <div
-                class="c17 c18"
+                class="c18 c19"
               >
                 <div
-                  class="c19 c20"
+                  class="c20 c21"
                 >
                   <div
-                    class="c21 c22"
+                    class="c22 c23"
                   >
                     <table
                       aria-colcount="5"
                       aria-rowcount="3"
-                      class="c23"
+                      class="c24"
                       role="grid"
                     >
                       <thead
-                        class="c24"
+                        class="c25"
                       >
                         <tr
                           aria-rowindex="1"
-                          class="c25"
+                          class="c26"
                         >
                           <th
                             aria-colindex="1"
-                            class="c26"
+                            class="c27"
                             role="gridcell"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               <div
                                 class=""
                               >
                                 <input
                                   aria-label="Select all entries"
-                                  class="c27"
+                                  class="c28"
                                   tabindex="0"
                                   type="checkbox"
                                 />
                               </div>
                               <span
-                                class="c28"
+                                class="c29"
                               />
                             </div>
                           </th>
                           <th
                             aria-colindex="2"
-                            class="c29 c26"
+                            class="c30 c27"
                             role="gridcell"
                             tabindex="-1"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               <span
-                                class="c30"
+                                class="c31"
                               >
                                 Name
                               </span>
                               <span
-                                class="c28"
+                                class="c29"
                               />
                             </div>
                           </th>
                           <th
                             aria-colindex="3"
-                            class="c31 c26"
+                            class="c32 c27"
                             role="gridcell"
                             tabindex="-1"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               <span
-                                class="c30"
+                                class="c31"
                               >
                                 URL
                               </span>
                               <span
-                                class="c28"
+                                class="c29"
                               />
                             </div>
                           </th>
                           <th
                             aria-colindex="4"
-                            class="c29 c26"
+                            class="c30 c27"
                             role="gridcell"
                             tabindex="-1"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               <span
-                                class="c30"
+                                class="c31"
                               >
                                 Status
                               </span>
                               <span
-                                class="c28"
+                                class="c29"
                               />
                             </div>
                           </th>
                           <th
                             aria-colindex="5"
-                            class="c26"
+                            class="c27"
                             role="gridcell"
                             tabindex="-1"
                           >
                             <div
-                              class="c6"
+                              class="c7"
                             >
                               <div
-                                class="c32"
+                                class="c33"
                               >
                                 Actions
                               </div>
                               <span
-                                class="c28"
+                                class="c29"
                               />
                             </div>
                           </th>
                         </tr>
                       </thead>
                       <tbody
-                        class="c33"
+                        class="c34"
                       >
                         <tr
                           aria-rowindex="2"
-                          class="c25"
+                          class="c26"
                           style="cursor: pointer;"
                         >
                           <td
                             aria-colindex="1"
                             aria-hidden="true"
-                            class="c26"
+                            class="c27"
                             role="button"
                           >
                             <div
@@ -922,7 +926,7 @@ describe('Admin | containers | ListView', () => {
                             >
                               <input
                                 aria-label="Select test"
-                                class="c27"
+                                class="c28"
                                 id="select"
                                 name="select"
                                 tabindex="-1"
@@ -932,51 +936,51 @@ describe('Admin | containers | ListView', () => {
                           </td>
                           <td
                             aria-colindex="2"
-                            class="c26"
-                            role="gridcell"
-                            tabindex="-1"
-                          >
-                            <span
-                              class="c34"
-                            >
-                              test
-                            </span>
-                          </td>
-                          <td
-                            aria-colindex="3"
-                            class="c26"
+                            class="c27"
                             role="gridcell"
                             tabindex="-1"
                           >
                             <span
                               class="c35"
+                            >
+                              test
+                            </span>
+                          </td>
+                          <td
+                            aria-colindex="3"
+                            class="c27"
+                            role="gridcell"
+                            tabindex="-1"
+                          >
+                            <span
+                              class="c36"
                             >
                               http:://strapi.io
                             </span>
                           </td>
                           <td
                             aria-colindex="4"
-                            class="c26"
+                            class="c27"
                             role="gridcell"
                           >
                             <div
                               aria-hidden="true"
-                              class="c6"
+                              class="c7"
                               role="button"
                             >
                               <button
                                 aria-checked="true"
                                 aria-label="test Status"
-                                class="c36"
+                                class="c37"
                                 role="switch"
                                 tabindex="-1"
                                 type="button"
                               >
                                 <div
-                                  class="c6"
+                                  class="c7"
                                 >
                                   <div
-                                    class="c37 c38"
+                                    class="c38 c39"
                                   >
                                     <span>
                                       Enabled
@@ -987,7 +991,7 @@ describe('Admin | containers | ListView', () => {
                                   </div>
                                   <span
                                     aria-hidden="true"
-                                    class="c39"
+                                    class="c40"
                                   >
                                     Enabled
                                   </span>
@@ -997,24 +1001,24 @@ describe('Admin | containers | ListView', () => {
                           </td>
                           <td
                             aria-colindex="5"
-                            class="c26"
+                            class="c27"
                             role="gridcell"
                           >
                             <div
                               aria-hidden="true"
-                              class="c40"
+                              class="c41"
                               role="button"
                             >
                               <span>
                                 <button
                                   aria-disabled="false"
                                   aria-labelledby="1"
-                                  class="c41 c42 c43 c44"
+                                  class="c42 c43 c44 c45"
                                   tabindex="-1"
                                   type="button"
                                 >
                                   <span
-                                    class="c32"
+                                    class="c33"
                                   >
                                     Update
                                   </span>
@@ -1040,13 +1044,13 @@ describe('Admin | containers | ListView', () => {
                                 <button
                                   aria-disabled="false"
                                   aria-labelledby="2"
-                                  class="c41 c42 c43 c44"
+                                  class="c42 c43 c44 c45"
                                   id="delete-1"
                                   tabindex="-1"
                                   type="button"
                                 >
                                   <span
-                                    class="c32"
+                                    class="c33"
                                   >
                                     Delete
                                   </span>
@@ -1071,13 +1075,13 @@ describe('Admin | containers | ListView', () => {
                         </tr>
                         <tr
                           aria-rowindex="3"
-                          class="c25"
+                          class="c26"
                           style="cursor: pointer;"
                         >
                           <td
                             aria-colindex="1"
                             aria-hidden="true"
-                            class="c26"
+                            class="c27"
                             role="button"
                           >
                             <div
@@ -1085,7 +1089,7 @@ describe('Admin | containers | ListView', () => {
                             >
                               <input
                                 aria-label="Select test2"
-                                class="c27"
+                                class="c28"
                                 id="select"
                                 name="select"
                                 tabindex="-1"
@@ -1095,51 +1099,51 @@ describe('Admin | containers | ListView', () => {
                           </td>
                           <td
                             aria-colindex="2"
-                            class="c26"
-                            role="gridcell"
-                            tabindex="-1"
-                          >
-                            <span
-                              class="c34"
-                            >
-                              test2
-                            </span>
-                          </td>
-                          <td
-                            aria-colindex="3"
-                            class="c26"
+                            class="c27"
                             role="gridcell"
                             tabindex="-1"
                           >
                             <span
                               class="c35"
+                            >
+                              test2
+                            </span>
+                          </td>
+                          <td
+                            aria-colindex="3"
+                            class="c27"
+                            role="gridcell"
+                            tabindex="-1"
+                          >
+                            <span
+                              class="c36"
                             >
                               http://me.io
                             </span>
                           </td>
                           <td
                             aria-colindex="4"
-                            class="c26"
+                            class="c27"
                             role="gridcell"
                           >
                             <div
                               aria-hidden="true"
-                              class="c6"
+                              class="c7"
                               role="button"
                             >
                               <button
                                 aria-checked="false"
                                 aria-label="test2 Status"
-                                class="c36"
+                                class="c37"
                                 role="switch"
                                 tabindex="-1"
                                 type="button"
                               >
                                 <div
-                                  class="c6"
+                                  class="c7"
                                 >
                                   <div
-                                    class="c37 c38"
+                                    class="c38 c39"
                                   >
                                     <span>
                                       Enabled
@@ -1150,7 +1154,7 @@ describe('Admin | containers | ListView', () => {
                                   </div>
                                   <span
                                     aria-hidden="true"
-                                    class="c45"
+                                    class="c46"
                                   >
                                     Disabled
                                   </span>
@@ -1160,24 +1164,24 @@ describe('Admin | containers | ListView', () => {
                           </td>
                           <td
                             aria-colindex="5"
-                            class="c26"
+                            class="c27"
                             role="gridcell"
                           >
                             <div
                               aria-hidden="true"
-                              class="c40"
+                              class="c41"
                               role="button"
                             >
                               <span>
                                 <button
                                   aria-disabled="false"
                                   aria-labelledby="3"
-                                  class="c41 c42 c43 c44"
+                                  class="c42 c43 c44 c45"
                                   tabindex="-1"
                                   type="button"
                                 >
                                   <span
-                                    class="c32"
+                                    class="c33"
                                   >
                                     Update
                                   </span>
@@ -1203,13 +1207,13 @@ describe('Admin | containers | ListView', () => {
                                 <button
                                   aria-disabled="false"
                                   aria-labelledby="4"
-                                  class="c41 c42 c43 c44"
+                                  class="c42 c43 c44 c45"
                                   id="delete-2"
                                   tabindex="-1"
                                   type="button"
                                 >
                                   <span
-                                    class="c32"
+                                    class="c33"
                                   >
                                     Delete
                                   </span>
@@ -1238,17 +1242,17 @@ describe('Admin | containers | ListView', () => {
                 </div>
                 <div>
                   <hr
-                    class="c46 c47"
+                    class="c47 c48"
                   />
                   <button
-                    class="c48 c49"
+                    class="c49 c50"
                   >
                     <div
-                      class="c6"
+                      class="c7"
                     >
                       <div
                         aria-hidden="true"
-                        class="c50 c51"
+                        class="c51 c52"
                       >
                         <svg
                           fill="none"
@@ -1264,10 +1268,10 @@ describe('Admin | containers | ListView', () => {
                         </svg>
                       </div>
                       <div
-                        class="c52"
+                        class="c53"
                       >
                         <span
-                          class="c53"
+                          class="c54"
                         >
                           Create new webhook
                         </span>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js
index bb170921aa..3013242328 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js
@@ -70,7 +70,7 @@ describe('ADMIN | pages | SettingsPage', () => {
     const { container } = render(App);
 
     expect(container.firstChild).toMatchInlineSnapshot(`
-      .c12 {
+      .c11 {
         padding-bottom: 56px;
       }
 
@@ -79,7 +79,7 @@ describe('ADMIN | pages | SettingsPage', () => {
         grid-template-columns: auto 1fr;
       }
 
-      .c13 {
+      .c12 {
         overflow-x: hidden;
       }
 
@@ -140,6 +140,7 @@ describe('ADMIN | pages | SettingsPage', () => {
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
+        gap: 8px;
       }
 
       .c7 {
@@ -151,15 +152,6 @@ describe('ADMIN | pages | SettingsPage', () => {
         margin: 0;
       }
 
-      .c11 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c11 > * + * {
-        margin-top: 8px;
-      }
-
       .c1 {
         width: 14.5rem;
         background: #f6f6f9;
@@ -208,12 +200,12 @@ describe('ADMIN | pages | SettingsPage', () => {
             class="c9"
           >
             <ol
-              class="c10 c11"
+              class="c10"
             />
           </div>
         </nav>
         <div
-          class="c12 c13"
+          class="c11 c12"
         >
           <h1>
             App infos
diff --git a/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js b/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js
index 5899ccde27..452fe11647 100644
--- a/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js
@@ -86,16 +86,16 @@ describe('Admin | UseCasePage', () => {
         width: 15.625rem;
       }
 
-      .c28 {
+      .c27 {
         padding-right: 16px;
         padding-left: 16px;
       }
 
-      .c30 {
+      .c29 {
         padding-left: 12px;
       }
 
-      .c33 {
+      .c32 {
         background: #4945ff;
         padding: 8px;
         padding-right: 16px;
@@ -107,7 +107,7 @@ describe('Admin | UseCasePage', () => {
         cursor: pointer;
       }
 
-      .c38 {
+      .c37 {
         padding-top: 16px;
       }
 
@@ -199,9 +199,10 @@ describe('Admin | UseCasePage', () => {
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
+        gap: 4px;
       }
 
-      .c26 {
+      .c25 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -219,7 +220,7 @@ describe('Admin | UseCasePage', () => {
         justify-content: space-between;
       }
 
-      .c34 {
+      .c33 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -238,7 +239,7 @@ describe('Admin | UseCasePage', () => {
         justify-content: center;
       }
 
-      .c37 {
+      .c36 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -270,14 +271,14 @@ describe('Admin | UseCasePage', () => {
         color: #32324d;
       }
 
-      .c23 {
+      .c22 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #32324d;
       }
 
-      .c29 {
+      .c28 {
         font-size: 0.875rem;
         line-height: 1.43;
         display: block;
@@ -287,44 +288,35 @@ describe('Admin | UseCasePage', () => {
         color: #666687;
       }
 
-      .c36 {
+      .c35 {
         font-size: 0.875rem;
         line-height: 1.43;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c40 {
+      .c39 {
         font-size: 0.75rem;
         line-height: 1.33;
         color: #4945ff;
       }
 
-      .c22 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c22 > * + * {
-        margin-top: 4px;
-      }
-
-      .c39 {
+      .c38 {
         background: transparent;
         border: none;
         position: relative;
         outline: none;
       }
 
-      .c39[aria-disabled='true'] {
+      .c38[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c39[aria-disabled='true'] svg path {
+      .c38[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c39 svg {
+      .c38 svg {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -332,11 +324,11 @@ describe('Admin | UseCasePage', () => {
         font-size: 0.625rem;
       }
 
-      .c39 svg path {
+      .c38 svg path {
         fill: #4945ff;
       }
 
-      .c39:after {
+      .c38:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -351,11 +343,11 @@ describe('Admin | UseCasePage', () => {
         border: 2px solid transparent;
       }
 
-      .c39:focus-visible {
+      .c38:focus-visible {
         outline: none;
       }
 
-      .c39:focus-visible:after {
+      .c38:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -415,7 +407,7 @@ describe('Admin | UseCasePage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c41 {
+      .c40 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -477,52 +469,52 @@ describe('Admin | UseCasePage', () => {
         fill: #8e8ea9;
       }
 
-      .c35 {
+      .c34 {
         height: 2.5rem;
       }
 
-      .c35[aria-disabled='true'] {
+      .c34[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c35[aria-disabled='true'] .c6 {
+      .c34[aria-disabled='true'] .c6 {
         color: #666687;
       }
 
-      .c35[aria-disabled='true'] svg > g,.c35[aria-disabled='true'] svg path {
+      .c34[aria-disabled='true'] svg > g,.c34[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c35[aria-disabled='true']:active {
+      .c34[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c35[aria-disabled='true']:active .c6 {
+      .c34[aria-disabled='true']:active .c6 {
         color: #666687;
       }
 
-      .c35[aria-disabled='true']:active svg > g,.c35[aria-disabled='true']:active svg path {
+      .c34[aria-disabled='true']:active svg > g,.c34[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c35:hover {
+      .c34:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c35:active {
+      .c34:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c35 svg > g,
-      .c35 svg path {
+      .c34 svg > g,
+      .c34 svg path {
         fill: #ffffff;
       }
 
-      .c24 {
+      .c23 {
         position: relative;
         border: 1px solid #dcdce4;
         padding-right: 12px;
@@ -538,28 +530,28 @@ describe('Admin | UseCasePage', () => {
         transition-duration: 0.2s;
       }
 
-      .c24:focus-within {
+      .c23:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c31 {
+      .c30 {
         background: transparent;
         border: none;
         position: relative;
         z-index: 1;
       }
 
-      .c31 svg {
+      .c30 svg {
         height: 0.6875rem;
         width: 0.6875rem;
       }
 
-      .c31 svg path {
+      .c30 svg path {
         fill: #666687;
       }
 
-      .c32 {
+      .c31 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -568,7 +560,7 @@ describe('Admin | UseCasePage', () => {
         border: none;
       }
 
-      .c32 svg {
+      .c31 svg {
         width: 0.375rem;
       }
 
@@ -588,7 +580,7 @@ describe('Admin | UseCasePage', () => {
         width: 6px;
       }
 
-      .c25 {
+      .c24 {
         position: absolute;
         left: 0;
         right: 0;
@@ -599,15 +591,15 @@ describe('Admin | UseCasePage', () => {
         border: none;
       }
 
-      .c25:focus {
+      .c24:focus {
         outline: none;
       }
 
-      .c25[aria-disabled='true'] {
+      .c24[aria-disabled='true'] {
         cursor: not-allowed;
       }
 
-      .c27 {
+      .c26 {
         width: 100%;
       }
 
@@ -715,12 +707,14 @@ describe('Admin | UseCasePage', () => {
                   <div
                     class="c20"
                   >
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c21 c22"
+                        class="c21"
                       >
                         <label
-                          class="c6 c23"
+                          class="c6 c22"
                           for="usecase"
                         >
                           <div
@@ -730,29 +724,29 @@ describe('Admin | UseCasePage', () => {
                           </div>
                         </label>
                         <div
-                          class="c8 c24"
+                          class="c8 c23"
                         >
                           <button
                             aria-disabled="false"
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-labelledby="usecase usecase-label usecase-content"
-                            class="c25"
+                            class="c24"
                             data-testid="usecase"
                             id="usecase"
                             type="button"
                           />
                           <div
-                            class="c26 c27"
+                            class="c25 c26"
                           >
                             <div
                               class="c8"
                             >
                               <div
-                                class="c28"
+                                class="c27"
                               >
                                 <span
-                                  class="c6 c29"
+                                  class="c6 c28"
                                   id="usecase-content"
                                 >
                                   Select...
@@ -764,7 +758,7 @@ describe('Admin | UseCasePage', () => {
                             >
                               <button
                                 aria-hidden="true"
-                                class="c30 c31 c32"
+                                class="c29 c30 c31"
                                 tabindex="-1"
                                 title="Carret Down Button"
                                 type="button"
@@ -791,12 +785,12 @@ describe('Admin | UseCasePage', () => {
                     </div>
                     <button
                       aria-disabled="true"
-                      class="c33 c34 c4 c35"
+                      class="c32 c33 c4 c34"
                       disabled=""
                       type="submit"
                     >
                       <span
-                        class="c6 c36"
+                        class="c6 c35"
                       >
                         Finish
                       </span>
@@ -805,18 +799,18 @@ describe('Admin | UseCasePage', () => {
                 </form>
               </div>
               <div
-                class="c37"
+                class="c36"
               >
                 <div
-                  class="c38"
+                  class="c37"
                 >
                   <button
                     aria-disabled="false"
-                    class="c8 c39"
+                    class="c8 c38"
                     type="button"
                   >
                     <span
-                      class="c6 c40"
+                      class="c6 c39"
                     >
                       Skip this question
                     </span>
@@ -827,7 +821,7 @@ describe('Admin | UseCasePage', () => {
           </div>
         </div>
         <div
-          class="c41"
+          class="c40"
         >
           <p
             aria-live="polite"
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
index d73f929e6d..6ca94dcf61 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
@@ -13,7 +13,11 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   padding-bottom: 8px;
 }
 
-.c12 {
+.c8 {
+  min-width: 0;
+}
+
+.c13 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -24,12 +28,12 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   cursor: pointer;
 }
 
-.c18 {
+.c19 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c20 {
+.c21 {
   background: #ffffff;
   padding: 24px;
   border-radius: 4px;
@@ -54,7 +58,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c8 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -68,7 +72,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c11 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -83,7 +87,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   gap: 8px;
 }
 
-.c19 {
+.c20 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -98,7 +102,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   gap: 24px;
 }
 
-.c21 {
+.c22 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -113,7 +117,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   gap: 16px;
 }
 
-.c27 {
+.c28 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -125,6 +129,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
 .c35 {
@@ -145,34 +150,34 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   justify-content: space-around;
 }
 
-.c10 {
+.c11 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c15 {
+.c16 {
   font-size: 0.875rem;
   line-height: 1.43;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c17 {
+.c18 {
   font-size: 1rem;
   line-height: 1.5;
   color: #666687;
 }
 
-.c22 {
+.c23 {
   font-size: 0.875rem;
   line-height: 1.43;
   font-weight: 600;
   color: #32324d;
 }
 
-.c23 {
+.c24 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #666687;
@@ -185,35 +190,26 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c28 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c28 > * + * {
-  margin-top: 4px;
-}
-
-.c13 {
+.c14 {
   position: relative;
   outline: none;
 }
 
-.c13 svg {
+.c14 svg {
   height: 12px;
   width: 12px;
 }
 
-.c13 svg > g,
-.c13 svg path {
+.c14 svg > g,
+.c14 svg path {
   fill: #ffffff;
 }
 
-.c13[aria-disabled='true'] {
+.c14[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c13:after {
+.c14:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -228,11 +224,11 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c13:focus-visible {
+.c14:focus-visible {
   outline: none;
 }
 
-.c13:focus-visible:after {
+.c14:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -255,107 +251,107 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c14 {
+.c15 {
   height: 2.5rem;
   border: 1px solid #d9d8ff;
   background: #f0f0ff;
 }
 
-.c14[aria-disabled='true'] {
+.c15[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c14[aria-disabled='true'] .c9 {
+.c15[aria-disabled='true'] .c10 {
   color: #666687;
 }
 
-.c14[aria-disabled='true'] svg > g,.c14[aria-disabled='true'] svg path {
+.c15[aria-disabled='true'] svg > g,.c15[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c14[aria-disabled='true']:active {
+.c15[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c14[aria-disabled='true']:active .c9 {
+.c15[aria-disabled='true']:active .c10 {
   color: #666687;
 }
 
-.c14[aria-disabled='true']:active svg > g,.c14[aria-disabled='true']:active svg path {
+.c15[aria-disabled='true']:active svg > g,.c15[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c14:hover {
+.c15:hover {
   background-color: #ffffff;
 }
 
-.c14:active {
+.c15:active {
   background-color: #ffffff;
   border: 1px solid #4945ff;
 }
 
-.c14:active .c9 {
+.c15:active .c10 {
   color: #4945ff;
 }
 
-.c14:active svg > g,
-.c14:active svg path {
+.c15:active svg > g,
+.c15:active svg path {
   fill: #4945ff;
 }
 
-.c14 .c9 {
+.c15 .c10 {
   color: #271fe0;
 }
 
-.c14 svg > g,
-.c14 svg path {
+.c15 svg > g,
+.c15 svg path {
   fill: #271fe0;
 }
 
-.c16 {
+.c17 {
   height: 2.5rem;
 }
 
-.c16[aria-disabled='true'] {
+.c17[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c16[aria-disabled='true'] .c9 {
+.c17[aria-disabled='true'] .c10 {
   color: #666687;
 }
 
-.c16[aria-disabled='true'] svg > g,.c16[aria-disabled='true'] svg path {
+.c17[aria-disabled='true'] svg > g,.c17[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c16[aria-disabled='true']:active {
+.c17[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c16[aria-disabled='true']:active .c9 {
+.c17[aria-disabled='true']:active .c10 {
   color: #666687;
 }
 
-.c16[aria-disabled='true']:active svg > g,.c16[aria-disabled='true']:active svg path {
+.c17[aria-disabled='true']:active svg > g,.c17[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c16:hover {
+.c17:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c16:active {
+.c17:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c16 svg > g,
-.c16 svg path {
+.c17 svg > g,
+.c17 svg path {
   fill: #ffffff;
 }
 
@@ -426,13 +422,13 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   will-change: transform;
 }
 
-.c25 {
+.c26 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c26 {
+.c27 {
   grid-column: span 6;
   max-width: 100%;
 }
@@ -608,7 +604,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   display: flex;
 }
 
-.c24 {
+.c25 {
   border: 1px solid #d9d8ff;
   background: #f0f0ff;
   padding: 8px 16px;
@@ -619,13 +615,13 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
 }
 
 @media (max-width:68.75rem) {
-  .c26 {
+  .c27 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c26 {
+  .c27 {
     grid-column: span;
   }
 }
@@ -684,35 +680,35 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
             class="c7"
           >
             <div
-              class="c8"
+              class="c8 c9"
             >
               <h1
-                class="c9 c10"
+                class="c10 c11"
               >
                 Create a role
               </h1>
             </div>
             <div
-              class="c11"
+              class="c12"
             >
               <button
                 aria-disabled="false"
-                class="c12 c11 c13 c14"
+                class="c13 c12 c14 c15"
                 type="button"
               >
                 <span
-                  class="c9 c15"
+                  class="c10 c16"
                 >
                   Reset
                 </span>
               </button>
               <button
                 aria-disabled="false"
-                class="c12 c11 c13 c16"
+                class="c13 c12 c14 c17"
                 type="button"
               >
                 <span
-                  class="c9 c15"
+                  class="c10 c16"
                 >
                   Save
                 </span>
@@ -720,23 +716,23 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
             </div>
           </div>
           <p
-            class="c9 c17"
+            class="c10 c18"
           >
             Define the rights given to the role
           </p>
         </div>
       </div>
       <div
-        class="c18"
+        class="c19"
       >
         <div
-          class="c19"
+          class="c20"
         >
           <div
-            class="c20"
+            class="c21"
           >
             <div
-              class="c21"
+              class="c22"
             >
               <div
                 class="c7"
@@ -748,7 +744,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <span
-                      class="c9 c22"
+                      class="c10 c23"
                     >
                       Details
                     </span>
@@ -757,38 +753,40 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <span
-                      class="c9 c23"
+                      class="c10 c24"
                     >
                       Name and description of the role
                     </span>
                   </div>
                 </div>
                 <div
-                  class="c24"
+                  class="c25"
                 >
                   0 users with this role
                 </div>
               </div>
               <div
-                class="c25"
+                class="c26"
               >
                 <div
-                  class="c26"
+                  class="c27"
                 >
                   <div
                     class=""
                   >
                     <div>
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c27 c28"
+                          class="c28"
                         >
                           <label
-                            class="c9 c29"
+                            class="c10 c29"
                             for="1"
                           >
                             <div
-                              class="c8"
+                              class="c9"
                             >
                               Name
                             </div>
@@ -812,7 +810,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c26"
+                  class="c27"
                 >
                   <div
                     class=""
@@ -820,19 +818,21 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
                     <div
                       class="c32"
                     >
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c27 c28"
+                          class="c28"
                         >
                           <div
-                            class="c8"
+                            class="c9"
                           >
                             <label
-                              class="c9 c29"
+                              class="c10 c29"
                               for="3"
                             >
                               <div
-                                class="c8"
+                                class="c9"
                               >
                                 Description
                               </div>
@@ -860,7 +860,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="c20"
+            class="c21"
           >
             <div
               class="c35 c36"
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/SingleSignOn/tests/__snapshots__/index.test.js.snap b/packages/core/admin/ee/admin/pages/SettingsPage/pages/SingleSignOn/tests/__snapshots__/index.test.js.snap
index 1912584e31..d2ceae7297 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/SingleSignOn/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/SingleSignOn/tests/__snapshots__/index.test.js.snap
@@ -13,7 +13,11 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
   padding-left: 56px;
 }
 
-.c9 {
+.c6 {
+  min-width: 0;
+}
+
+.c10 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -24,12 +28,12 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
   cursor: pointer;
 }
 
-.c15 {
+.c16 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c16 {
+.c17 {
   background: #ffffff;
   padding: 24px;
   border-radius: 4px;
@@ -82,7 +86,7 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
   justify-content: space-between;
 }
 
-.c6 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -96,7 +100,7 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
   flex-direction: row;
 }
 
-.c10 {
+.c11 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -111,7 +115,7 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
   gap: 8px;
 }
 
-.c17 {
+.c18 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -126,7 +130,7 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
   gap: 16px;
 }
 
-.c22 {
+.c23 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -138,6 +142,7 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
 .c30 {
@@ -158,27 +163,27 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
   justify-content: center;
 }
 
-.c8 {
+.c9 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c13 {
+.c14 {
   font-size: 0.875rem;
   line-height: 1.43;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c14 {
+.c15 {
   font-size: 1rem;
   line-height: 1.5;
   color: #666687;
 }
 
-.c18 {
+.c19 {
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
@@ -224,35 +229,26 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
   color: #32324d;
 }
 
-.c23 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c23 > * + * {
-  margin-top: 4px;
-}
-
-.c11 {
+.c12 {
   position: relative;
   outline: none;
 }
 
-.c11 svg {
+.c12 svg {
   height: 12px;
   width: 12px;
 }
 
-.c11 svg > g,
-.c11 svg path {
+.c12 svg > g,
+.c12 svg path {
   fill: #ffffff;
 }
 
-.c11[aria-disabled='true'] {
+.c12[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c11:after {
+.c12:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -267,11 +263,11 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
   border: 2px solid transparent;
 }
 
-.c11:focus-visible {
+.c12:focus-visible {
   outline: none;
 }
 
-.c11:focus-visible:after {
+.c12:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -294,48 +290,48 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
   width: 1px;
 }
 
-.c12 {
+.c13 {
   height: 2.5rem;
 }
 
-.c12[aria-disabled='true'] {
+.c13[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c12[aria-disabled='true'] .c7 {
+.c13[aria-disabled='true'] .c8 {
   color: #666687;
 }
 
-.c12[aria-disabled='true'] svg > g,.c12[aria-disabled='true'] svg path {
+.c13[aria-disabled='true'] svg > g,.c13[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c12[aria-disabled='true']:active {
+.c13[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c12[aria-disabled='true']:active .c7 {
+.c13[aria-disabled='true']:active .c8 {
   color: #666687;
 }
 
-.c12[aria-disabled='true']:active svg > g,.c12[aria-disabled='true']:active svg path {
+.c13[aria-disabled='true']:active svg > g,.c13[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c12:hover {
+.c13:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c12:active {
+.c13:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c12 svg > g,
-.c12 svg path {
+.c13 svg > g,
+.c13 svg path {
   fill: #ffffff;
 }
 
@@ -412,13 +408,13 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
   width: 100%;
 }
 
-.c19 {
+.c20 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c20 {
+.c21 {
   grid-column: span 6;
   max-width: 100%;
 }
@@ -503,18 +499,18 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
   width: 100%;
 }
 
-.c21 {
+.c22 {
   max-width: 320px;
 }
 
 @media (max-width:68.75rem) {
-  .c20 {
+  .c21 {
     grid-column: span 12;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c20 {
+  .c21 {
     grid-column: span;
   }
 }
@@ -543,17 +539,17 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
               class="c5"
             >
               <div
-                class="c6"
+                class="c6 c7"
               >
                 <h1
-                  class="c7 c8"
+                  class="c8 c9"
                 >
                   Single Sign-On
                 </h1>
               </div>
               <button
                 aria-disabled="true"
-                class="c9 c10 c11 c12"
+                class="c10 c11 c12 c13"
                 data-testid="save-button"
                 disabled=""
                 type="submit"
@@ -576,54 +572,54 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
                   </svg>
                 </div>
                 <span
-                  class="c7 c13"
+                  class="c8 c14"
                 >
                   Save
                 </span>
               </button>
             </div>
             <p
-              class="c7 c14"
+              class="c8 c15"
             >
               Configure the settings for the Single Sign-On feature.
             </p>
           </div>
         </div>
         <div
-          class="c15"
+          class="c16"
         >
           <div
-            class="c16 c17"
+            class="c17 c18"
           >
             <h2
-              class="c7 c18"
+              class="c8 c19"
             >
               Settings
             </h2>
             <div
-              class="c19"
+              class="c20"
             >
               <div
-                class="c20"
+                class="c21"
               >
                 <div
                   class=""
                 >
                   <div
-                    class="c21"
+                    class="c22"
                   >
                     <div
-                      class="c22 c23"
+                      class="c23"
                     >
                       <div
-                        class="c6"
+                        class="c7"
                       >
                         <label
-                          class="c7 c24"
+                          class="c8 c24"
                           for="1"
                         >
                           <div
-                            class="c6"
+                            class="c7"
                           >
                             Auto-registration
                           </div>
@@ -646,7 +642,7 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
                             class="c29 c30 c31"
                           >
                             <span
-                              class="c7 c32"
+                              class="c8 c32"
                             >
                               Off
                             </span>
@@ -656,7 +652,7 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
                             class="c29 c30 c33"
                           >
                             <span
-                              class="c7 c34"
+                              class="c8 c34"
                             >
                               On
                             </span>
@@ -676,7 +672,7 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
                         </div>
                       </label>
                       <p
-                        class="c7 c36"
+                        class="c8 c36"
                         id="1-hint"
                       >
                         Create new user on SSO login if no account exists
@@ -686,27 +682,29 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
                 </div>
               </div>
               <div
-                class="c20"
+                class="c21"
               >
                 <div
                   class=""
                 >
-                  <div>
+                  <div
+                    class=""
+                  >
                     <div
-                      class="c22 c23"
+                      class="c23"
                     >
                       <label
-                        class="c7 c24"
+                        class="c8 c24"
                         for="3"
                       >
                         <div
-                          class="c6"
+                          class="c7"
                         >
                           Default role
                         </div>
                       </label>
                       <div
-                        class="c6 c37"
+                        class="c7 c37"
                       >
                         <button
                           aria-describedby="3-hint"
@@ -723,13 +721,13 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
                           class="c5 c39"
                         >
                           <div
-                            class="c6"
+                            class="c7"
                           >
                             <div
                               class="c40"
                             >
                               <span
-                                class="c7 c41"
+                                class="c8 c41"
                                 id="3-content"
                               >
                                 Editor
@@ -737,7 +735,7 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
                             </div>
                           </div>
                           <div
-                            class="c6"
+                            class="c7"
                           >
                             <button
                               aria-hidden="true"
@@ -765,7 +763,7 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
                         </div>
                       </div>
                       <p
-                        class="c7 c36"
+                        class="c8 c36"
                         id="3-hint"
                       >
                         It will attach the new authenticated user to the selected role
diff --git a/packages/core/admin/package.json b/packages/core/admin/package.json
index 2f3e105dec..ecc58bf3b5 100644
--- a/packages/core/admin/package.json
+++ b/packages/core/admin/package.json
@@ -48,9 +48,9 @@
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
     "@strapi/babel-plugin-switch-ee-ce": "4.7.1",
     "@strapi/data-transfer": "4.7.1",
-    "@strapi/design-system": "1.6.4",
+    "@strapi/design-system": "1.6.5",
     "@strapi/helper-plugin": "4.7.1",
-    "@strapi/icons": "1.6.4",
+    "@strapi/icons": "1.6.5",
     "@strapi/permissions": "4.7.1",
     "@strapi/provider-audit-logs-local": "4.7.1",
     "@strapi/typescript-utils": "4.7.1",
diff --git a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.js.snap b/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.js.snap
index 54fb4f1700..dab55a5b1f 100644
--- a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.js.snap
@@ -1,23 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
-.c36 {
+.c35 {
   padding-left: 32px;
 }
 
-.c37 {
+.c36 {
   margin-top: 8px;
 }
 
-.c40 {
+.c39 {
   padding-right: 8px;
 }
 
-.c49 {
+.c48 {
   padding-bottom: 56px;
 }
 
-.c38 {
+.c37 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -31,28 +31,28 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c41 {
+.c40 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #4945ff;
 }
 
-.c39 {
+.c38 {
   background: transparent;
   border: none;
   position: relative;
   outline: none;
 }
 
-.c39[aria-disabled='true'] {
+.c38[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c39[aria-disabled='true'] svg path {
+.c38[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c39 svg {
+.c38 svg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -60,11 +60,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   font-size: 0.625rem;
 }
 
-.c39 svg path {
+.c38 svg path {
   fill: #4945ff;
 }
 
-.c39:after {
+.c38:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -79,11 +79,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c39:focus-visible {
+.c38:focus-visible {
   outline: none;
 }
 
-.c39:focus-visible:after {
+.c38:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -94,7 +94,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c51 {
+.c50 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -111,7 +111,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   grid-template-columns: auto 1fr;
 }
 
-.c50 {
+.c49 {
   overflow-x: hidden;
 }
 
@@ -145,27 +145,27 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   padding-bottom: 16px;
 }
 
-.c19 {
+.c18 {
   padding-top: 8px;
   padding-right: 16px;
   padding-bottom: 8px;
   padding-left: 24px;
 }
 
-.c21 {
+.c20 {
   padding-right: 24px;
   position: relative;
 }
 
-.c22 {
+.c21 {
   text-align: left;
 }
 
-.c25 {
+.c24 {
   padding-right: 4px;
 }
 
-.c28 {
+.c27 {
   background: #eaeaef;
   padding-right: 8px;
   padding-left: 8px;
@@ -178,25 +178,25 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   transform: translateY(-50%);
 }
 
-.c31 {
+.c30 {
   background: #f6f6f9;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 32px;
 }
 
-.c34 {
+.c33 {
   padding-left: 8px;
 }
 
-.c42 {
+.c41 {
   padding-top: 8px;
   padding-right: 16px;
   padding-bottom: 8px;
   padding-left: 32px;
 }
 
-.c48 {
+.c47 {
   background: #f6f6f9;
   padding-top: 8px;
   padding-bottom: 8px;
@@ -210,7 +210,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c26 {
+.c25 {
   font-weight: 600;
   font-size: 0.6875rem;
   line-height: 1.45;
@@ -218,13 +218,13 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   color: #666687;
 }
 
-.c35 {
+.c34 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c47 {
+.c46 {
   font-size: 0.875rem;
   line-height: 1.43;
   font-weight: 500;
@@ -279,9 +279,25 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 8px;
 }
 
-.c23 {
+.c17 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.c22 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -295,7 +311,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c29 {
+.c28 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -313,7 +329,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   justify-content: center;
 }
 
-.c44 {
+.c43 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -392,7 +408,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c30 {
+.c29 {
   border-radius: 4px;
   height: 1.5rem;
 }
@@ -406,24 +422,6 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   margin: 0;
 }
 
-.c17 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c17 > * + * {
-  margin-top: 8px;
-}
-
-.c18 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c18 > * + * {
-  margin-top: 4px;
-}
-
 .c1 {
   width: 14.5rem;
   background: #f6f6f9;
@@ -460,7 +458,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   background-color: #dcdce4;
 }
 
-.c32 {
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -478,46 +476,46 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c32 svg > * {
+.c31 svg > * {
   fill: #666687;
 }
 
-.c32.active {
+.c31.active {
   background-color: #f0f0ff;
   border-right: 2px solid #4945ff;
 }
 
-.c32.active svg > * {
+.c31.active svg > * {
   fill: #271fe0;
 }
 
-.c32.active .c4 {
+.c31.active .c4 {
   color: #271fe0;
   font-weight: 500;
 }
 
-.c32:focus-visible {
+.c31:focus-visible {
   outline-offset: -2px;
 }
 
-.c33 {
+.c32 {
   width: 0.75rem;
   height: 0.25rem;
 }
 
-.c33 * {
+.c32 * {
   fill: #666687;
 }
 
-.c43 svg {
+.c42 svg {
   height: 0.25rem;
 }
 
-.c43 svg path {
+.c42 svg path {
   fill: #4a4a6a;
 }
 
-.c45 {
+.c44 {
   border: none;
   padding: 0;
   background: transparent;
@@ -531,7 +529,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c46 {
+.c45 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -546,13 +544,13 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   transform: rotateX(0deg);
 }
 
-.c24 {
+.c23 {
   border: none;
   padding: 0;
   background: transparent;
 }
 
-.c27 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -566,11 +564,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   transform: rotateX(0deg);
 }
 
-.c20 svg {
+.c19 svg {
   height: 0.25rem;
 }
 
-.c20 svg path {
+.c19 svg path {
   fill: #8e8ea9;
 }
 
@@ -637,34 +635,34 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
         class="c15"
       >
         <ol
-          class="c16 c17"
+          class="c16"
         >
           <li>
             <div
-              class="c16 c18"
+              class="c17"
             >
               <div
-                class="c19 c20"
+                class="c18 c19"
               >
                 <div
-                  class="c21"
+                  class="c20"
                 >
                   <button
                     aria-controls="2"
                     aria-expanded="true"
-                    class="c22 c23 c24"
+                    class="c21 c22 c23"
                   >
                     <div
-                      class="c25"
+                      class="c24"
                     >
                       <span
-                        class="c4 c26"
+                        class="c4 c25"
                       >
                         Collection Types
                       </span>
                     </div>
                     <div
-                      class="c27"
+                      class="c26"
                     >
                       <svg
                         aria-hidden="true"
@@ -684,11 +682,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     </div>
                   </button>
                   <div
-                    class="c28 c29 c30"
+                    class="c27 c28 c29"
                     transform="translateY(-50%)"
                   >
                     <span
-                      class="c4 c26"
+                      class="c4 c25"
                     >
                       2
                     </span>
@@ -700,14 +698,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               >
                 <li>
                   <a
-                    class="c31 c32"
+                    class="c30 c31"
                     href="/plugins/content-type-builder/content-types/application::address.address"
                   >
                     <div
-                      class="c23"
+                      class="c22"
                     >
                       <svg
-                        class="c33"
+                        class="c32"
                         fill="none"
                         height="1rem"
                         viewBox="0 0 4 4"
@@ -722,10 +720,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <div
-                        class="c34"
+                        class="c33"
                       >
                         <span
-                          class="c4 c35"
+                          class="c4 c34"
                         >
                           Address
                         </span>
@@ -735,14 +733,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                 </li>
                 <li>
                   <a
-                    class="c31 c32"
+                    class="c30 c31"
                     href="/plugins/content-type-builder/content-types/application::category.category"
                   >
                     <div
-                      class="c23"
+                      class="c22"
                     >
                       <svg
-                        class="c33"
+                        class="c32"
                         fill="none"
                         height="1rem"
                         viewBox="0 0 4 4"
@@ -757,10 +755,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <div
-                        class="c34"
+                        class="c33"
                       >
                         <span
-                          class="c4 c35"
+                          class="c4 c34"
                         >
                           Category
                         </span>
@@ -771,16 +769,16 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               </ol>
             </div>
             <div
-              class="c36"
+              class="c35"
             >
               <button
                 aria-disabled="false"
-                class="c37 c38 c39"
+                class="c36 c37 c38"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="c40"
+                  class="c39"
                 >
                   <svg
                     fill="none"
@@ -796,7 +794,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="c41"
+                  class="c40"
                 >
                   Create new collection type
                 </span>
@@ -805,30 +803,30 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
           </li>
           <li>
             <div
-              class="c16 c18"
+              class="c17"
             >
               <div
-                class="c19 c20"
+                class="c18 c19"
               >
                 <div
-                  class="c21"
+                  class="c20"
                 >
                   <button
                     aria-controls="3"
                     aria-expanded="true"
-                    class="c22 c23 c24"
+                    class="c21 c22 c23"
                   >
                     <div
-                      class="c25"
+                      class="c24"
                     >
                       <span
-                        class="c4 c26"
+                        class="c4 c25"
                       >
                         Single Types
                       </span>
                     </div>
                     <div
-                      class="c27"
+                      class="c26"
                     >
                       <svg
                         aria-hidden="true"
@@ -848,11 +846,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     </div>
                   </button>
                   <div
-                    class="c28 c29 c30"
+                    class="c27 c28 c29"
                     transform="translateY(-50%)"
                   >
                     <span
-                      class="c4 c26"
+                      class="c4 c25"
                     >
                       1
                     </span>
@@ -864,14 +862,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               >
                 <li>
                   <a
-                    class="c31 c32"
+                    class="c30 c31"
                     href="/plugins/content-type-builder/content-types/application::homepage.homepage"
                   >
                     <div
-                      class="c23"
+                      class="c22"
                     >
                       <svg
-                        class="c33"
+                        class="c32"
                         fill="none"
                         height="1rem"
                         viewBox="0 0 4 4"
@@ -886,10 +884,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <div
-                        class="c34"
+                        class="c33"
                       >
                         <span
-                          class="c4 c35"
+                          class="c4 c34"
                         >
                           Homepage
                         </span>
@@ -900,16 +898,16 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               </ol>
             </div>
             <div
-              class="c36"
+              class="c35"
             >
               <button
                 aria-disabled="false"
-                class="c37 c38 c39"
+                class="c36 c37 c38"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="c40"
+                  class="c39"
                 >
                   <svg
                     fill="none"
@@ -925,7 +923,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="c41"
+                  class="c40"
                 >
                   Create new single type
                 </span>
@@ -934,30 +932,30 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
           </li>
           <li>
             <div
-              class="c16 c18"
+              class="c17"
             >
               <div
-                class="c19 c20"
+                class="c18 c19"
               >
                 <div
-                  class="c21"
+                  class="c20"
                 >
                   <button
                     aria-controls="6"
                     aria-expanded="true"
-                    class="c22 c23 c24"
+                    class="c21 c22 c23"
                   >
                     <div
-                      class="c25"
+                      class="c24"
                     >
                       <span
-                        class="c4 c26"
+                        class="c4 c25"
                       >
                         Components
                       </span>
                     </div>
                     <div
-                      class="c27"
+                      class="c26"
                     >
                       <svg
                         aria-hidden="true"
@@ -977,11 +975,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     </div>
                   </button>
                   <div
-                    class="c28 c29 c30"
+                    class="c27 c28 c29"
                     transform="translateY(-50%)"
                   >
                     <span
-                      class="c4 c26"
+                      class="c4 c25"
                     >
                       2
                     </span>
@@ -996,18 +994,18 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <div
-                      class="c42 c43"
+                      class="c41 c42"
                     >
                       <div
-                        class="c44"
+                        class="c43"
                       >
                         <button
                           aria-controls="4"
                           aria-expanded="true"
-                          class="c45"
+                          class="c44"
                         >
                           <div
-                            class="c46"
+                            class="c45"
                           >
                             <svg
                               aria-hidden="true"
@@ -1026,10 +1024,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c34"
+                            class="c33"
                           >
                             <span
-                              class="c4 c47"
+                              class="c4 c46"
                             >
                               Basic
                             </span>
@@ -1042,14 +1040,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     >
                       <li>
                         <a
-                          class="c48 c32"
+                          class="c47 c31"
                           href="/plugins/content-type-builder/component-categories/basic/basic.simple"
                         >
                           <div
-                            class="c23"
+                            class="c22"
                           >
                             <svg
-                              class="c33"
+                              class="c32"
                               fill="none"
                               height="1rem"
                               viewBox="0 0 4 4"
@@ -1064,10 +1062,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <div
-                              class="c34"
+                              class="c33"
                             >
                               <span
-                                class="c4 c35"
+                                class="c4 c34"
                               >
                                 Simple
                               </span>
@@ -1083,18 +1081,18 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <div
-                      class="c42 c43"
+                      class="c41 c42"
                     >
                       <div
-                        class="c44"
+                        class="c43"
                       >
                         <button
                           aria-controls="5"
                           aria-expanded="true"
-                          class="c45"
+                          class="c44"
                         >
                           <div
-                            class="c46"
+                            class="c45"
                           >
                             <svg
                               aria-hidden="true"
@@ -1113,10 +1111,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c34"
+                            class="c33"
                           >
                             <span
-                              class="c4 c47"
+                              class="c4 c46"
                             >
                               Default
                             </span>
@@ -1129,14 +1127,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     >
                       <li>
                         <a
-                          class="c48 c32"
+                          class="c47 c31"
                           href="/plugins/content-type-builder/component-categories/default/default.closingperiod"
                         >
                           <div
-                            class="c23"
+                            class="c22"
                           >
                             <svg
-                              class="c33"
+                              class="c32"
                               fill="none"
                               height="1rem"
                               viewBox="0 0 4 4"
@@ -1151,10 +1149,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <div
-                              class="c34"
+                              class="c33"
                             >
                               <span
-                                class="c4 c35"
+                                class="c4 c34"
                               >
                                 Closingperiod
                               </span>
@@ -1164,14 +1162,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                       </li>
                       <li>
                         <a
-                          class="c48 c32"
+                          class="c47 c31"
                           href="/plugins/content-type-builder/component-categories/default/default.dish"
                         >
                           <div
-                            class="c23"
+                            class="c22"
                           >
                             <svg
-                              class="c33"
+                              class="c32"
                               fill="none"
                               height="1rem"
                               viewBox="0 0 4 4"
@@ -1186,10 +1184,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <div
-                              class="c34"
+                              class="c33"
                             >
                               <span
-                                class="c4 c35"
+                                class="c4 c34"
                               >
                                 Dish
                               </span>
@@ -1203,16 +1201,16 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               </ol>
             </div>
             <div
-              class="c36"
+              class="c35"
             >
               <button
                 aria-disabled="false"
-                class="c37 c38 c39"
+                class="c36 c37 c38"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="c40"
+                  class="c39"
                 >
                   <svg
                     fill="none"
@@ -1228,7 +1226,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="c41"
+                  class="c40"
                 >
                   Create a new component
                 </span>
@@ -1239,13 +1237,13 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
       </div>
     </nav>
     <div
-      class="c49 c50"
+      class="c48 c49"
     >
       <div />
     </div>
   </div>
   <div
-    class="c51"
+    class="c50"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap b/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap
index 42a979790a..ffa38a9693 100644
--- a/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap
@@ -13,11 +13,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   padding-bottom: 8px;
 }
 
-.c10 {
-  padding-left: 16px;
+.c7 {
+  min-width: 0;
 }
 
 .c11 {
+  padding-left: 16px;
+}
+
+.c12 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -28,27 +32,27 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   cursor: pointer;
 }
 
-.c19 {
+.c20 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c22 {
+.c23 {
   background: #ffffff;
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c24 {
+.c25 {
   padding-right: 24px;
   padding-left: 24px;
 }
 
-.c27 {
+.c28 {
   padding-left: 8px;
 }
 
-.c29 {
+.c30 {
   width: 2rem;
   height: 1.5rem;
   -webkit-flex-shrink: 0;
@@ -56,7 +60,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   flex-shrink: 0;
 }
 
-.c34 {
+.c35 {
   padding: 8px;
   border-radius: 4px;
   border-width: 0;
@@ -66,28 +70,28 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   cursor: pointer;
 }
 
-.c39 {
+.c40 {
   padding-left: 24px;
 }
 
-.c42 {
+.c43 {
   padding-top: 16px;
   padding-bottom: 16px;
 }
 
-.c44 {
+.c45 {
   background: #dcdce4;
 }
 
-.c46 {
+.c47 {
   padding-left: 12px;
 }
 
-.c49 {
+.c50 {
   padding-left: 40px;
 }
 
-.c56 {
+.c57 {
   padding-right: 16px;
   padding-left: 16px;
   border-radius: borderRadius;
@@ -96,20 +100,20 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   flex-shrink: 0;
 }
 
-.c59 {
+.c60 {
   background: #d9d8ff;
 }
 
-.c61 {
+.c62 {
   margin-top: 4px;
   max-width: 100%;
 }
 
-.c69 {
+.c70 {
   background: #eaeaef;
 }
 
-.c71 {
+.c72 {
   background: #f0f0ff;
   padding: 20px;
 }
@@ -132,7 +136,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c7 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -146,7 +150,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c12 {
+.c13 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -161,7 +165,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   gap: 8px;
 }
 
-.c20 {
+.c21 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -176,7 +180,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   gap: 16px;
 }
 
-.c21 {
+.c22 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -194,7 +198,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   justify-content: flex-end;
 }
 
-.c28 {
+.c29 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -209,7 +213,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   gap: 16px;
 }
 
-.c33 {
+.c34 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -224,7 +228,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   gap: 4px;
 }
 
-.c35 {
+.c36 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -242,7 +246,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   justify-content: center;
 }
 
-.c52 {
+.c53 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -257,7 +261,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   gap: 4px;
 }
 
-.c57 {
+.c58 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -278,27 +282,27 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   justify-content: center;
 }
 
-.c9 {
+.c10 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c15 {
+.c16 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c18 {
+.c19 {
   font-size: 1rem;
   line-height: 1.5;
   color: #666687;
 }
 
-.c25 {
+.c26 {
   font-weight: 600;
   font-size: 0.6875rem;
   line-height: 1.45;
@@ -306,34 +310,34 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   color: #666687;
 }
 
-.c31 {
+.c32 {
   font-size: 0.875rem;
   line-height: 1.43;
   font-weight: 600;
   color: #32324d;
 }
 
-.c32 {
+.c33 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c47 {
+.c48 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #666687;
 }
 
-.c55 {
+.c56 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #4945ff;
 }
 
-.c62 {
+.c63 {
   font-size: 0.75rem;
   line-height: 1.33;
   display: block;
@@ -344,26 +348,26 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c13 {
+.c14 {
   position: relative;
   outline: none;
 }
 
-.c13 svg {
+.c14 svg {
   height: 12px;
   width: 12px;
 }
 
-.c13 svg > g,
-.c13 svg path {
+.c14 svg > g,
+.c14 svg path {
   fill: #ffffff;
 }
 
-.c13[aria-disabled='true'] {
+.c14[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c13:after {
+.c14:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -378,11 +382,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c13:focus-visible {
+.c14:focus-visible {
   outline: none;
 }
 
-.c13:focus-visible:after {
+.c14:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -393,7 +397,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c37 {
+.c38 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -405,116 +409,59 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c14 {
+.c15 {
   height: 2rem;
   border: 1px solid #dcdce4;
   background: #ffffff;
 }
 
-.c14[aria-disabled='true'] {
+.c15[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c14[aria-disabled='true'] .c8 {
+.c15[aria-disabled='true'] .c9 {
   color: #666687;
 }
 
-.c14[aria-disabled='true'] svg > g,.c14[aria-disabled='true'] svg path {
+.c15[aria-disabled='true'] svg > g,.c15[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c14[aria-disabled='true']:active {
+.c15[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c14[aria-disabled='true']:active .c8 {
+.c15[aria-disabled='true']:active .c9 {
   color: #666687;
 }
 
-.c14[aria-disabled='true']:active svg > g,.c14[aria-disabled='true']:active svg path {
+.c15[aria-disabled='true']:active svg > g,.c15[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c14:hover {
+.c15:hover {
   background-color: #f6f6f9;
 }
 
-.c14:active {
+.c15:active {
   background-color: #eaeaef;
 }
 
-.c14 .c8 {
+.c15 .c9 {
   color: #32324d;
 }
 
-.c14 svg > g,
-.c14 svg path {
+.c15 svg > g,
+.c15 svg path {
   fill: #32324d;
 }
 
-.c16 {
-  height: 2rem;
-  border: 1px solid #d9d8ff;
-  background: #f0f0ff;
-}
-
-.c16[aria-disabled='true'] {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c16[aria-disabled='true'] .c8 {
-  color: #666687;
-}
-
-.c16[aria-disabled='true'] svg > g,.c16[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c16[aria-disabled='true']:active {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c16[aria-disabled='true']:active .c8 {
-  color: #666687;
-}
-
-.c16[aria-disabled='true']:active svg > g,.c16[aria-disabled='true']:active svg path {
-  fill: #666687;
-}
-
-.c16:hover {
-  background-color: #ffffff;
-}
-
-.c16:active {
-  background-color: #ffffff;
-  border: 1px solid #4945ff;
-}
-
-.c16:active .c8 {
-  color: #4945ff;
-}
-
-.c16:active svg > g,
-.c16:active svg path {
-  fill: #4945ff;
-}
-
-.c16 .c8 {
-  color: #271fe0;
-}
-
-.c16 svg > g,
-.c16 svg path {
-  fill: #271fe0;
-}
-
 .c17 {
   height: 2rem;
+  border: 1px solid #d9d8ff;
+  background: #f0f0ff;
 }
 
 .c17[aria-disabled='true'] {
@@ -522,7 +469,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background: #eaeaef;
 }
 
-.c17[aria-disabled='true'] .c8 {
+.c17[aria-disabled='true'] .c9 {
   color: #666687;
 }
 
@@ -535,7 +482,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background: #eaeaef;
 }
 
-.c17[aria-disabled='true']:active .c8 {
+.c17[aria-disabled='true']:active .c9 {
   color: #666687;
 }
 
@@ -544,21 +491,78 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
 }
 
 .c17:hover {
-  border: 1px solid #7b79ff;
-  background: #7b79ff;
+  background-color: #ffffff;
 }
 
 .c17:active {
+  background-color: #ffffff;
   border: 1px solid #4945ff;
-  background: #4945ff;
+}
+
+.c17:active .c9 {
+  color: #4945ff;
+}
+
+.c17:active svg > g,
+.c17:active svg path {
+  fill: #4945ff;
+}
+
+.c17 .c9 {
+  color: #271fe0;
 }
 
 .c17 svg > g,
 .c17 svg path {
+  fill: #271fe0;
+}
+
+.c18 {
+  height: 2rem;
+}
+
+.c18[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c18[aria-disabled='true'] .c9 {
+  color: #666687;
+}
+
+.c18[aria-disabled='true'] svg > g,.c18[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c18[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c18[aria-disabled='true']:active .c9 {
+  color: #666687;
+}
+
+.c18[aria-disabled='true']:active svg > g,.c18[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c18:hover {
+  border: 1px solid #7b79ff;
+  background: #7b79ff;
+}
+
+.c18:active {
+  border: 1px solid #4945ff;
+  background: #4945ff;
+}
+
+.c18 svg > g,
+.c18 svg path {
   fill: #ffffff;
 }
 
-.c70 {
+.c71 {
   height: 1px;
   border: none;
   -webkit-flex-shrink: 0;
@@ -567,26 +571,26 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   margin: 0;
 }
 
-.c36 svg > g,
-.c36 svg path {
+.c37 svg > g,
+.c37 svg path {
   fill: #8e8ea9;
 }
 
-.c36:hover svg > g,
-.c36:hover svg path {
+.c37:hover svg > g,
+.c37:hover svg path {
   fill: #666687;
 }
 
-.c36:active svg > g,
-.c36:active svg path {
+.c37:active svg > g,
+.c37:active svg path {
   fill: #a5a5ba;
 }
 
-.c36[aria-disabled='true'] svg path {
+.c37[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c73 {
+.c74 {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 50%;
@@ -604,16 +608,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c73 svg {
+.c74 svg {
   height: 0.625rem;
   width: 0.625rem;
 }
 
-.c73 svg path {
+.c74 svg path {
   fill: #4945ff;
 }
 
-.c72 {
+.c73 {
   border-radius: 0 0 4px 4px;
   display: block;
   width: 100%;
@@ -690,47 +694,47 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   display: flex;
 }
 
-.c60 {
+.c61 {
   border-radius: 50%;
   color: #4945ff;
   height: 40px;
   width: 40px;
 }
 
-.c60 svg {
+.c61 svg {
   height: 20px;
   width: 20px;
 }
 
-.c65 {
+.c66 {
   border-radius: 50%;
   color: #666687;
   height: 40px;
   width: 40px;
 }
 
-.c65 svg {
+.c66 svg {
   height: 20px;
   width: 20px;
 }
 
-.c64 {
+.c65 {
   position: absolute;
   display: none;
   top: 5px;
   right: 0.5rem;
 }
 
-.c64 svg {
+.c65 svg {
   width: 0.625rem;
   height: 0.625rem;
 }
 
-.c64 svg path {
+.c65 svg path {
   fill: #4945ff;
 }
 
-.c58 {
+.c59 {
   width: 8.75rem;
   height: 5rem;
   position: relative;
@@ -740,51 +744,51 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   max-width: 100%;
 }
 
-.c58.active,
-.c58:focus,
-.c58:hover {
+.c59.active,
+.c59:focus,
+.c59:hover {
   border: 1px solid #d9d8ff;
   background: #f0f0ff;
 }
 
-.c58.active .c63,
-.c58:focus .c63,
-.c58:hover .c63 {
+.c59.active .c64,
+.c59:focus .c64,
+.c59:hover .c64 {
   display: block;
 }
 
-.c58.active .c8,
-.c58:focus .c8,
-.c58:hover .c8 {
+.c59.active .c9,
+.c59:focus .c9,
+.c59:hover .c9 {
   color: #4945ff;
 }
 
-.c58.active > div:first-child,
-.c58:focus > div:first-child,
-.c58:hover > div:first-child {
+.c59.active > div:first-child,
+.c59:focus > div:first-child,
+.c59:hover > div:first-child {
   background: #d9d8ff;
   color: #4945ff;
 }
 
-.c38.component-row,
-.c38.dynamiczone-row {
+.c39.component-row,
+.c39.dynamiczone-row {
   position: relative;
   border-top: none !important;
 }
 
-.c38.component-row table tr:first-child,
-.c38.dynamiczone-row table tr:first-child {
+.c39.component-row table tr:first-child,
+.c39.dynamiczone-row table tr:first-child {
   border-top: none;
 }
 
-.c38.component-row > td:first-of-type,
-.c38.dynamiczone-row > td:first-of-type {
+.c39.component-row > td:first-of-type,
+.c39.dynamiczone-row > td:first-of-type {
   padding: 0 0 0 1.25rem;
   position: relative;
 }
 
-.c38.component-row > td:first-of-type::before,
-.c38.dynamiczone-row > td:first-of-type::before {
+.c39.component-row > td:first-of-type::before,
+.c39.dynamiczone-row > td:first-of-type::before {
   content: '';
   width: 0.25rem;
   height: calc(100% - 40px);
@@ -795,29 +799,29 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background: #eaeaef;
 }
 
-.c38.dynamiczone-row > td:first-of-type {
+.c39.dynamiczone-row > td:first-of-type {
   padding: 0;
 }
 
-.c48.component-row,
-.c48.dynamiczone-row {
+.c49.component-row,
+.c49.dynamiczone-row {
   position: relative;
   border-top: none !important;
 }
 
-.c48.component-row table tr:first-child,
-.c48.dynamiczone-row table tr:first-child {
+.c49.component-row table tr:first-child,
+.c49.dynamiczone-row table tr:first-child {
   border-top: none;
 }
 
-.c48.component-row > td:first-of-type,
-.c48.dynamiczone-row > td:first-of-type {
+.c49.component-row > td:first-of-type,
+.c49.dynamiczone-row > td:first-of-type {
   padding: 0 0 0 1.25rem;
   position: relative;
 }
 
-.c48.component-row > td:first-of-type::before,
-.c48.dynamiczone-row > td:first-of-type::before {
+.c49.component-row > td:first-of-type::before,
+.c49.dynamiczone-row > td:first-of-type::before {
   content: '';
   width: 0.25rem;
   height: calc(100% - 40px);
@@ -828,11 +832,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background-color: #d9d8ff;
 }
 
-.c48.dynamiczone-row > td:first-of-type {
+.c49.dynamiczone-row > td:first-of-type {
   padding: 0;
 }
 
-.c54 {
+.c55 {
   width: 2rem;
   height: 2rem;
   padding: 0.5625rem;
@@ -840,11 +844,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c54 path {
+.c55 path {
   fill: #4945ff;
 }
 
-.c50 {
+.c51 {
   height: 5.625rem;
   position: absolute;
   width: 100%;
@@ -852,16 +856,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   left: 0;
 }
 
-.c51 {
+.c52 {
   width: 100%;
   overflow-x: auto;
 }
 
-.c66 {
+.c67 {
   padding-top: 5.625rem;
 }
 
-.c53 {
+.c54 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -877,42 +881,42 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c23 table {
+.c24 table {
   width: 100%;
   white-space: nowrap;
 }
 
-.c23 thead {
+.c24 thead {
   border-bottom: 1px solid #eaeaef;
 }
 
-.c23 thead tr {
+.c24 thead tr {
   border-top: 0;
 }
 
-.c23 tr {
+.c24 tr {
   border-top: 1px solid #eaeaef;
 }
 
-.c23 tr td,
-.c23 tr th {
+.c24 tr td,
+.c24 tr th {
   padding: 16px;
 }
 
-.c23 tr td:first-of-type,
-.c23 tr th:first-of-type {
+.c24 tr td:first-of-type,
+.c24 tr th:first-of-type {
   padding: 0 4px;
 }
 
-.c23 th,
-.c23 td {
+.c24 th,
+.c24 td {
   vertical-align: middle;
   text-align: left;
   color: #666687;
   outline-offset: -4px;
 }
 
-.c45 {
+.c46 {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 50%;
@@ -930,16 +934,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c45 svg {
+.c46 svg {
   height: 0.625rem;
   width: 0.625rem;
 }
 
-.c45 svg path {
+.c46 svg path {
   fill: #666687;
 }
 
-.c68 {
+.c69 {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 50%;
@@ -957,16 +961,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c68 svg {
+.c69 svg {
   height: 0.625rem;
   width: 0.625rem;
 }
 
-.c68 svg path {
+.c69 svg path {
   fill: #4945ff;
 }
 
-.c43 {
+.c44 {
   border-radius: 0 0 4px 4px;
   display: block;
   width: 100%;
@@ -975,20 +979,20 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   left: -0.25rem;
 }
 
-.c40 {
+.c41 {
   position: absolute;
   left: -1.125rem;
   top: 0px;
 }
 
-.c40:before {
+.c41:before {
   content: '';
   width: 0.25rem;
   height: 0.75rem;
   display: block;
 }
 
-.c41 {
+.c42 {
   position: relative;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -998,11 +1002,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   transform: translate(-0.5px,-1px);
 }
 
-.c41 * {
+.c42 * {
   fill: #eaeaef;
 }
 
-.c67 {
+.c68 {
   position: relative;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1012,15 +1016,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   transform: translate(-0.5px,-1px);
 }
 
-.c67 * {
+.c68 * {
   fill: #d9d8ff;
 }
 
-.c26 {
+.c27 {
   position: relative;
 }
 
-.c30 svg {
+.c31 svg {
   height: 100%;
   width: 100%;
 }
@@ -1068,18 +1072,18 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
         class="c6"
       >
         <div
-          class="c7"
+          class="c7 c8"
         >
           <h1
-            class="c8 c9"
+            class="c9 c10"
             id="title"
           />
           <div
-            class="c10"
+            class="c11"
           >
             <button
               aria-disabled="false"
-              class="c11 c12 c13 c14"
+              class="c12 c13 c14 c15"
               type="button"
             >
               <div
@@ -1102,7 +1106,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                 </svg>
               </div>
               <span
-                class="c8 c15"
+                class="c9 c16"
               >
                 Edit
               </span>
@@ -1110,11 +1114,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
           </div>
         </div>
         <div
-          class="c12"
+          class="c13"
         >
           <button
             aria-disabled="false"
-            class="c11 c12 c13 c16"
+            class="c12 c13 c14 c17"
             type="button"
           >
             <div
@@ -1135,14 +1139,14 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
               </svg>
             </div>
             <span
-              class="c8 c15"
+              class="c9 c16"
             >
               content-type-builder.button.attributes.add.another
             </span>
           </button>
           <button
             aria-disabled="true"
-            class="c11 c12 c13 c17"
+            class="c12 c13 c14 c18"
             disabled=""
             type="submit"
           >
@@ -1164,7 +1168,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
               </svg>
             </div>
             <span
-              class="c8 c15"
+              class="c9 c16"
             >
               Save
             </span>
@@ -1172,28 +1176,28 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
         </div>
       </div>
       <p
-        class="c8 c18"
+        class="c9 c19"
       >
         Build the data architecture of your content
       </p>
     </div>
   </div>
   <div
-    class="c19"
+    class="c20"
   >
     <div
-      class="c20"
+      class="c21"
     >
       <div
-        class="c21"
+        class="c22"
       >
         <div
-          class="c12"
+          class="c13"
         >
           <div>
             <button
               aria-disabled="false"
-              class="c11 c12 c13 c14"
+              class="c12 c13 c14 c15"
               type="button"
             >
               <div
@@ -1214,7 +1218,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                 </svg>
               </div>
               <span
-                class="c8 c15"
+                class="c9 c16"
               >
                 content-type-builder.form.button.configure-view
               </span>
@@ -1223,13 +1227,13 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
         </div>
       </div>
       <div
-        class="c22"
+        class="c23"
       >
         <div
-          class="c23"
+          class="c24"
         >
           <div
-            class="c24"
+            class="c25"
             style="overflow-x: auto;"
           >
             <table>
@@ -1237,7 +1241,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                 <tr>
                   <th>
                     <span
-                      class="c8 c25"
+                      class="c9 c26"
                     >
                       Name
                     </span>
@@ -1246,7 +1250,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                     colspan="2"
                   >
                     <span
-                      class="c8 c25"
+                      class="c9 c26"
                     >
                       Type
                     </span>
@@ -1255,18 +1259,18 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
               </thead>
               <tbody>
                 <tr
-                  class="c26"
+                  class="c27"
                   style="cursor: pointer;"
                 >
                   <td
                     style="position: relative;"
                   >
                     <div
-                      class="c27 c28"
+                      class="c28 c29"
                     >
                       <div
                         aria-hidden="true"
-                        class="c29 c30"
+                        class="c30 c31"
                       >
                         <svg
                           class=""
@@ -1292,7 +1296,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </svg>
                       </div>
                       <span
-                        class="c8 c31"
+                        class="c9 c32"
                       >
                         postal_code
                       </span>
@@ -1300,7 +1304,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c8 c32"
+                      class="c9 c33"
                     >
                       string
                        
@@ -1309,22 +1313,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   <td>
                     <div
                       aria-hidden="true"
-                      class="c21"
+                      class="c22"
                       role="button"
                     >
                       <div
-                        class="c33"
+                        class="c34"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="0"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Edit postal_code
                             </span>
@@ -1350,12 +1354,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="1"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Delete postal_code
                             </span>
@@ -1380,18 +1384,18 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c26"
+                  class="c27"
                   style="cursor: pointer;"
                 >
                   <td
                     style="position: relative;"
                   >
                     <div
-                      class="c27 c28"
+                      class="c28 c29"
                     >
                       <div
                         aria-hidden="true"
-                        class="c29 c30"
+                        class="c30 c31"
                       >
                         <svg
                           class=""
@@ -1415,7 +1419,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </svg>
                       </div>
                       <span
-                        class="c8 c31"
+                        class="c9 c32"
                       >
                         categories
                       </span>
@@ -1423,7 +1427,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c8 c32"
+                      class="c9 c33"
                     >
                       Relation with
                        
@@ -1438,22 +1442,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   <td>
                     <div
                       aria-hidden="true"
-                      class="c21"
+                      class="c22"
                       role="button"
                     >
                       <div
-                        class="c33"
+                        class="c34"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="2"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Edit categories
                             </span>
@@ -1479,12 +1483,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="3"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Delete categories
                             </span>
@@ -1509,18 +1513,18 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c26"
+                  class="c27"
                   style="cursor: pointer;"
                 >
                   <td
                     style="position: relative;"
                   >
                     <div
-                      class="c27 c28"
+                      class="c28 c29"
                     >
                       <div
                         aria-hidden="true"
-                        class="c29 c30"
+                        class="c30 c31"
                       >
                         <svg
                           class=""
@@ -1548,7 +1552,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </svg>
                       </div>
                       <span
-                        class="c8 c31"
+                        class="c9 c32"
                       >
                         cover
                       </span>
@@ -1556,7 +1560,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c8 c32"
+                      class="c9 c33"
                     >
                       media
                        
@@ -1565,22 +1569,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   <td>
                     <div
                       aria-hidden="true"
-                      class="c21"
+                      class="c22"
                       role="button"
                     >
                       <div
-                        class="c33"
+                        class="c34"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="4"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Edit cover
                             </span>
@@ -1606,12 +1610,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="5"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Delete cover
                             </span>
@@ -1636,18 +1640,18 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c26"
+                  class="c27"
                   style="cursor: pointer;"
                 >
                   <td
                     style="position: relative;"
                   >
                     <div
-                      class="c27 c28"
+                      class="c28 c29"
                     >
                       <div
                         aria-hidden="true"
-                        class="c29 c30"
+                        class="c30 c31"
                       >
                         <svg
                           class=""
@@ -1675,7 +1679,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </svg>
                       </div>
                       <span
-                        class="c8 c31"
+                        class="c9 c32"
                       >
                         images
                       </span>
@@ -1683,7 +1687,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c8 c32"
+                      class="c9 c33"
                     >
                       media
                        
@@ -1692,22 +1696,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   <td>
                     <div
                       aria-hidden="true"
-                      class="c21"
+                      class="c22"
                       role="button"
                     >
                       <div
-                        class="c33"
+                        class="c34"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="6"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Edit images
                             </span>
@@ -1733,12 +1737,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="7"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Delete images
                             </span>
@@ -1763,18 +1767,18 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c26"
+                  class="c27"
                   style="cursor: pointer;"
                 >
                   <td
                     style="position: relative;"
                   >
                     <div
-                      class="c27 c28"
+                      class="c28 c29"
                     >
                       <div
                         aria-hidden="true"
-                        class="c29 c30"
+                        class="c30 c31"
                       >
                         <svg
                           class=""
@@ -1800,7 +1804,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </svg>
                       </div>
                       <span
-                        class="c8 c31"
+                        class="c9 c32"
                       >
                         city
                       </span>
@@ -1808,7 +1812,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c8 c32"
+                      class="c9 c33"
                     >
                       string
                        
@@ -1817,22 +1821,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   <td>
                     <div
                       aria-hidden="true"
-                      class="c21"
+                      class="c22"
                       role="button"
                     >
                       <div
-                        class="c33"
+                        class="c34"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="8"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Edit city
                             </span>
@@ -1858,12 +1862,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="9"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Delete city
                             </span>
@@ -1888,18 +1892,18 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c26"
+                  class="c27"
                   style="cursor: pointer;"
                 >
                   <td
                     style="position: relative;"
                   >
                     <div
-                      class="c27 c28"
+                      class="c28 c29"
                     >
                       <div
                         aria-hidden="true"
-                        class="c29 c30"
+                        class="c30 c31"
                       >
                         <svg
                           class=""
@@ -1927,7 +1931,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </svg>
                       </div>
                       <span
-                        class="c8 c31"
+                        class="c9 c32"
                       >
                         json
                       </span>
@@ -1935,7 +1939,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c8 c32"
+                      class="c9 c33"
                     >
                       json
                        
@@ -1944,22 +1948,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   <td>
                     <div
                       aria-hidden="true"
-                      class="c21"
+                      class="c22"
                       role="button"
                     >
                       <div
-                        class="c33"
+                        class="c34"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="10"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Edit json
                             </span>
@@ -1985,12 +1989,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="11"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Delete json
                             </span>
@@ -2015,18 +2019,18 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c26"
+                  class="c27"
                   style="cursor: pointer;"
                 >
                   <td
                     style="position: relative;"
                   >
                     <div
-                      class="c27 c28"
+                      class="c28 c29"
                     >
                       <div
                         aria-hidden="true"
-                        class="c29 c30"
+                        class="c30 c31"
                       >
                         <svg
                           class=""
@@ -2048,7 +2052,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </svg>
                       </div>
                       <span
-                        class="c8 c31"
+                        class="c9 c32"
                       >
                         slug
                       </span>
@@ -2056,7 +2060,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c8 c32"
+                      class="c9 c33"
                     >
                       uid
                        
@@ -2065,22 +2069,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   <td>
                     <div
                       aria-hidden="true"
-                      class="c21"
+                      class="c22"
                       role="button"
                     >
                       <div
-                        class="c33"
+                        class="c34"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="12"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Edit slug
                             </span>
@@ -2106,12 +2110,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="13"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Delete slug
                             </span>
@@ -2136,18 +2140,18 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c26"
+                  class="c27"
                   style="cursor: pointer;"
                 >
                   <td
                     style="position: relative;"
                   >
                     <div
-                      class="c27 c28"
+                      class="c28 c29"
                     >
                       <div
                         aria-hidden="true"
-                        class="c29 c30"
+                        class="c30 c31"
                       >
                         <svg
                           class=""
@@ -2179,7 +2183,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </svg>
                       </div>
                       <span
-                        class="c8 c31"
+                        class="c9 c32"
                       >
                         notrepeat_req
                       </span>
@@ -2187,7 +2191,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c8 c32"
+                      class="c9 c33"
                     >
                       component
                        
@@ -2196,22 +2200,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   <td>
                     <div
                       aria-hidden="true"
-                      class="c21"
+                      class="c22"
                       role="button"
                     >
                       <div
-                        class="c33"
+                        class="c34"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="14"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Edit notrepeat_req
                             </span>
@@ -2237,12 +2241,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="15"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Delete notrepeat_req
                             </span>
@@ -2267,31 +2271,31 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c38 component-row"
+                  class="c39 component-row"
                 >
                   <td
                     colspan="12"
                   >
                     <div
-                      class="c23"
+                      class="c24"
                     >
                       <div
-                        class="c39"
+                        class="c40"
                       >
                         <table>
                           <tbody>
                             <tr
-                              class="c26"
+                              class="c27"
                               style="cursor: pointer;"
                             >
                               <td
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c40"
+                                  class="c41"
                                 >
                                   <svg
-                                    class="c41"
+                                    class="c42"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -2307,11 +2311,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   </svg>
                                 </div>
                                 <div
-                                  class="c27 c28"
+                                  class="c28 c29"
                                 >
                                   <div
                                     aria-hidden="true"
-                                    class="c29 c30"
+                                    class="c30 c31"
                                   >
                                     <svg
                                       class=""
@@ -2337,7 +2341,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </svg>
                                   </div>
                                   <span
-                                    class="c8 c31"
+                                    class="c9 c32"
                                   >
                                     name
                                   </span>
@@ -2345,7 +2349,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                               <td>
                                 <span
-                                  class="c8 c32"
+                                  class="c9 c33"
                                 >
                                   string
                                    
@@ -2354,22 +2358,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               <td>
                                 <div
                                   aria-hidden="true"
-                                  class="c21"
+                                  class="c22"
                                   role="button"
                                 >
                                   <div
-                                    class="c33"
+                                    class="c34"
                                   >
                                     <span>
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="16"
-                                        class="c34 c35 c13 c36"
+                                        class="c35 c36 c14 c37"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c37"
+                                          class="c38"
                                         >
                                           Edit name
                                         </span>
@@ -2395,12 +2399,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="17"
-                                        class="c34 c35 c13 c36"
+                                        class="c35 c36 c14 c37"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c37"
+                                          class="c38"
                                         >
                                           Delete name
                                         </span>
@@ -2425,17 +2429,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                             </tr>
                             <tr
-                              class="c26"
+                              class="c27"
                               style="cursor: pointer;"
                             >
                               <td
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c40"
+                                  class="c41"
                                 >
                                   <svg
-                                    class="c41"
+                                    class="c42"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -2451,11 +2455,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   </svg>
                                 </div>
                                 <div
-                                  class="c27 c28"
+                                  class="c28 c29"
                                 >
                                   <div
                                     aria-hidden="true"
-                                    class="c29 c30"
+                                    class="c30 c31"
                                   >
                                     <svg
                                       class=""
@@ -2481,7 +2485,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </svg>
                                   </div>
                                   <span
-                                    class="c8 c31"
+                                    class="c9 c32"
                                   >
                                     popo
                                   </span>
@@ -2489,7 +2493,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                               <td>
                                 <span
-                                  class="c8 c32"
+                                  class="c9 c33"
                                 >
                                   string
                                    
@@ -2498,22 +2502,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               <td>
                                 <div
                                   aria-hidden="true"
-                                  class="c21"
+                                  class="c22"
                                   role="button"
                                 >
                                   <div
-                                    class="c33"
+                                    class="c34"
                                   >
                                     <span>
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="18"
-                                        class="c34 c35 c13 c36"
+                                        class="c35 c36 c14 c37"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c37"
+                                          class="c38"
                                         >
                                           Edit popo
                                         </span>
@@ -2539,12 +2543,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="19"
-                                        class="c34 c35 c13 c36"
+                                        class="c35 c36 c14 c37"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c37"
+                                          class="c38"
                                         >
                                           Delete popo
                                         </span>
@@ -2569,17 +2573,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                             </tr>
                             <tr
-                              class="c26"
+                              class="c27"
                               style="cursor: pointer;"
                             >
                               <td
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c40"
+                                  class="c41"
                                 >
                                   <svg
-                                    class="c41"
+                                    class="c42"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -2595,11 +2599,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   </svg>
                                 </div>
                                 <div
-                                  class="c27 c28"
+                                  class="c28 c29"
                                 >
                                   <div
                                     aria-hidden="true"
-                                    class="c29 c30"
+                                    class="c30 c31"
                                   >
                                     <svg
                                       class=""
@@ -2625,7 +2629,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </svg>
                                   </div>
                                   <span
-                                    class="c8 c31"
+                                    class="c9 c32"
                                   >
                                     poq
                                   </span>
@@ -2633,7 +2637,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                               <td>
                                 <span
-                                  class="c8 c32"
+                                  class="c9 c33"
                                 >
                                   string
                                    
@@ -2642,22 +2646,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               <td>
                                 <div
                                   aria-hidden="true"
-                                  class="c21"
+                                  class="c22"
                                   role="button"
                                 >
                                   <div
-                                    class="c33"
+                                    class="c34"
                                   >
                                     <span>
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="20"
-                                        class="c34 c35 c13 c36"
+                                        class="c35 c36 c14 c37"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c37"
+                                          class="c38"
                                         >
                                           Edit poq
                                         </span>
@@ -2683,12 +2687,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="21"
-                                        class="c34 c35 c13 c36"
+                                        class="c35 c36 c14 c37"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c37"
+                                          class="c38"
                                         >
                                           Delete poq
                                         </span>
@@ -2716,15 +2720,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </table>
                       </div>
                       <button
-                        class="c42 c43"
+                        class="c43 c44"
                         type="button"
                       >
                         <div
-                          class="c7"
+                          class="c8"
                         >
                           <div
                             aria-hidden="true"
-                            class="c44 c45"
+                            class="c45 c46"
                           >
                             <svg
                               fill="none"
@@ -2740,10 +2744,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c46"
+                            class="c47"
                           >
                             <span
-                              class="c8 c47"
+                              class="c9 c48"
                             >
                               Add another field
                             </span>
@@ -2754,18 +2758,18 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c26"
+                  class="c27"
                   style="cursor: pointer;"
                 >
                   <td
                     style="position: relative;"
                   >
                     <div
-                      class="c27 c28"
+                      class="c28 c29"
                     >
                       <div
                         aria-hidden="true"
-                        class="c29 c30"
+                        class="c30 c31"
                       >
                         <svg
                           class=""
@@ -2797,7 +2801,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </svg>
                       </div>
                       <span
-                        class="c8 c31"
+                        class="c9 c32"
                       >
                         Compopo
                       </span>
@@ -2805,7 +2809,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c8 c32"
+                      class="c9 c33"
                     >
                       component
                        
@@ -2814,22 +2818,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   <td>
                     <div
                       aria-hidden="true"
-                      class="c21"
+                      class="c22"
                       role="button"
                     >
                       <div
-                        class="c33"
+                        class="c34"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="22"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Edit Compopo
                             </span>
@@ -2855,12 +2859,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="23"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Delete Compopo
                             </span>
@@ -2885,31 +2889,31 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c38 component-row"
+                  class="c39 component-row"
                 >
                   <td
                     colspan="12"
                   >
                     <div
-                      class="c23"
+                      class="c24"
                     >
                       <div
-                        class="c39"
+                        class="c40"
                       >
                         <table>
                           <tbody>
                             <tr
-                              class="c26"
+                              class="c27"
                               style="cursor: pointer;"
                             >
                               <td
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c40"
+                                  class="c41"
                                 >
                                   <svg
-                                    class="c41"
+                                    class="c42"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -2925,11 +2929,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   </svg>
                                 </div>
                                 <div
-                                  class="c27 c28"
+                                  class="c28 c29"
                                 >
                                   <div
                                     aria-hidden="true"
-                                    class="c29 c30"
+                                    class="c30 c31"
                                   >
                                     <svg
                                       class=""
@@ -2955,7 +2959,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </svg>
                                   </div>
                                   <span
-                                    class="c8 c31"
+                                    class="c9 c32"
                                   >
                                     dede
                                   </span>
@@ -2963,7 +2967,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                               <td>
                                 <span
-                                  class="c8 c32"
+                                  class="c9 c33"
                                 >
                                   string
                                    
@@ -2972,22 +2976,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               <td>
                                 <div
                                   aria-hidden="true"
-                                  class="c21"
+                                  class="c22"
                                   role="button"
                                 >
                                   <div
-                                    class="c33"
+                                    class="c34"
                                   >
                                     <span>
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="24"
-                                        class="c34 c35 c13 c36"
+                                        class="c35 c36 c14 c37"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c37"
+                                          class="c38"
                                         >
                                           Edit dede
                                         </span>
@@ -3013,12 +3017,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="25"
-                                        class="c34 c35 c13 c36"
+                                        class="c35 c36 c14 c37"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c37"
+                                          class="c38"
                                         >
                                           Delete dede
                                         </span>
@@ -3043,17 +3047,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                             </tr>
                             <tr
-                              class="c26"
+                              class="c27"
                               style="cursor: pointer;"
                             >
                               <td
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c40"
+                                  class="c41"
                                 >
                                   <svg
-                                    class="c41"
+                                    class="c42"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -3069,11 +3073,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   </svg>
                                 </div>
                                 <div
-                                  class="c27 c28"
+                                  class="c28 c29"
                                 >
                                   <div
                                     aria-hidden="true"
-                                    class="c29 c30"
+                                    class="c30 c31"
                                   >
                                     <svg
                                       class=""
@@ -3099,7 +3103,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </svg>
                                   </div>
                                   <span
-                                    class="c8 c31"
+                                    class="c9 c32"
                                   >
                                     dada
                                   </span>
@@ -3107,7 +3111,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                               <td>
                                 <span
-                                  class="c8 c32"
+                                  class="c9 c33"
                                 >
                                   string
                                    
@@ -3116,22 +3120,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               <td>
                                 <div
                                   aria-hidden="true"
-                                  class="c21"
+                                  class="c22"
                                   role="button"
                                 >
                                   <div
-                                    class="c33"
+                                    class="c34"
                                   >
                                     <span>
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="26"
-                                        class="c34 c35 c13 c36"
+                                        class="c35 c36 c14 c37"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c37"
+                                          class="c38"
                                         >
                                           Edit dada
                                         </span>
@@ -3157,12 +3161,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="27"
-                                        class="c34 c35 c13 c36"
+                                        class="c35 c36 c14 c37"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c37"
+                                          class="c38"
                                         >
                                           Delete dada
                                         </span>
@@ -3187,17 +3191,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                             </tr>
                             <tr
-                              class="c26"
+                              class="c27"
                               style="cursor: pointer;"
                             >
                               <td
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c40"
+                                  class="c41"
                                 >
                                   <svg
-                                    class="c41"
+                                    class="c42"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -3213,11 +3217,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   </svg>
                                 </div>
                                 <div
-                                  class="c27 c28"
+                                  class="c28 c29"
                                 >
                                   <div
                                     aria-hidden="true"
-                                    class="c29 c30"
+                                    class="c30 c31"
                                   >
                                     <svg
                                       class=""
@@ -3243,7 +3247,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </svg>
                                   </div>
                                   <span
-                                    class="c8 c31"
+                                    class="c9 c32"
                                   >
                                     papi
                                   </span>
@@ -3251,7 +3255,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                               <td>
                                 <span
-                                  class="c8 c32"
+                                  class="c9 c33"
                                 >
                                   string
                                    
@@ -3260,22 +3264,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               <td>
                                 <div
                                   aria-hidden="true"
-                                  class="c21"
+                                  class="c22"
                                   role="button"
                                 >
                                   <div
-                                    class="c33"
+                                    class="c34"
                                   >
                                     <span>
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="28"
-                                        class="c34 c35 c13 c36"
+                                        class="c35 c36 c14 c37"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c37"
+                                          class="c38"
                                         >
                                           Edit papi
                                         </span>
@@ -3301,12 +3305,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="29"
-                                        class="c34 c35 c13 c36"
+                                        class="c35 c36 c14 c37"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c37"
+                                          class="c38"
                                         >
                                           Delete papi
                                         </span>
@@ -3334,15 +3338,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </table>
                       </div>
                       <button
-                        class="c42 c43"
+                        class="c43 c44"
                         type="button"
                       >
                         <div
-                          class="c7"
+                          class="c8"
                         >
                           <div
                             aria-hidden="true"
-                            class="c44 c45"
+                            class="c45 c46"
                           >
                             <svg
                               fill="none"
@@ -3358,10 +3362,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c46"
+                            class="c47"
                           >
                             <span
-                              class="c8 c47"
+                              class="c9 c48"
                             >
                               Add another field
                             </span>
@@ -3372,18 +3376,18 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c26"
+                  class="c27"
                   style="cursor: pointer;"
                 >
                   <td
                     style="position: relative;"
                   >
                     <div
-                      class="c27 c28"
+                      class="c28 c29"
                     >
                       <div
                         aria-hidden="true"
-                        class="c29 c30"
+                        class="c30 c31"
                       >
                         <svg
                           class=""
@@ -3409,7 +3413,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </svg>
                       </div>
                       <span
-                        class="c8 c31"
+                        class="c9 c32"
                       >
                         DynamicZone
                       </span>
@@ -3417,7 +3421,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c8 c32"
+                      class="c9 c33"
                     >
                       dynamiczone
                        
@@ -3426,22 +3430,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   <td>
                     <div
                       aria-hidden="true"
-                      class="c21"
+                      class="c22"
                       role="button"
                     >
                       <div
-                        class="c33"
+                        class="c34"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="30"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Edit DynamicZone
                             </span>
@@ -3467,12 +3471,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="31"
-                            class="c34 c35 c13 c36"
+                            class="c35 c36 c14 c37"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               Delete DynamicZone
                             </span>
@@ -3497,25 +3501,25 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c48 dynamiczone-row"
+                  class="c49 dynamiczone-row"
                 >
                   <td
                     colspan="12"
                   >
                     <div
-                      class="c49 c50"
+                      class="c50 c51"
                     >
                       <div
-                        class="c12 c51"
+                        class="c13 c52"
                       >
                         <button
                           type="button"
                         >
                           <div
-                            class="c52 c53"
+                            class="c53 c54"
                           >
                             <svg
-                              class="c54"
+                              class="c55"
                               fill="none"
                               height="1rem"
                               viewBox="0 0 24 24"
@@ -3528,18 +3532,18 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <span
-                              class="c8 c55"
+                              class="c9 c56"
                             >
                               content-type-builder.button.component.add
                             </span>
                           </div>
                         </button>
                         <button
-                          class="c56 c57 c58 active"
+                          class="c57 c58 c59 active"
                           type="button"
                         >
                           <div
-                            class="c59 c35 c60"
+                            class="c60 c36 c61"
                           >
                             <svg
                               viewBox="0 0 448 512"
@@ -3552,14 +3556,14 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c61"
+                            class="c62"
                           >
                             <span
-                              class="c8 c62"
+                              class="c9 c63"
                             />
                           </div>
                           <button
-                            class="c63 c64"
+                            class="c64 c65"
                             type="button"
                           >
                             <svg
@@ -3577,11 +3581,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           </button>
                         </button>
                         <button
-                          class="c56 c57 c58"
+                          class="c57 c58 c59"
                           type="button"
                         >
                           <div
-                            class="c44 c35 c65"
+                            class="c45 c36 c66"
                           >
                             <svg
                               viewBox="0 0 448 512"
@@ -3594,14 +3598,14 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c61"
+                            class="c62"
                           >
                             <span
-                              class="c8 c62"
+                              class="c9 c63"
                             />
                           </div>
                           <button
-                            class="c63 c64"
+                            class="c64 c65"
                             type="button"
                           >
                             <svg
@@ -3619,11 +3623,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           </button>
                         </button>
                         <button
-                          class="c56 c57 c58"
+                          class="c57 c58 c59"
                           type="button"
                         >
                           <div
-                            class="c44 c35 c65"
+                            class="c45 c36 c66"
                           >
                             <svg
                               viewBox="0 0 448 512"
@@ -3636,14 +3640,14 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c61"
+                            class="c62"
                           >
                             <span
-                              class="c8 c62"
+                              class="c9 c63"
                             />
                           </div>
                           <button
-                            class="c63 c64"
+                            class="c64 c65"
                             type="button"
                           >
                             <svg
@@ -3661,11 +3665,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           </button>
                         </button>
                         <button
-                          class="c56 c57 c58"
+                          class="c57 c58 c59"
                           type="button"
                         >
                           <div
-                            class="c44 c35 c65"
+                            class="c45 c36 c66"
                           >
                             <svg
                               viewBox="0 0 448 512"
@@ -3678,14 +3682,14 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c61"
+                            class="c62"
                           >
                             <span
-                              class="c8 c62"
+                              class="c9 c63"
                             />
                           </div>
                           <button
-                            class="c63 c64"
+                            class="c64 c65"
                             type="button"
                           >
                             <svg
@@ -3705,7 +3709,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       </div>
                     </div>
                     <div
-                      class="c66"
+                      class="c67"
                     >
                       <div
                         class=""
@@ -3714,31 +3718,31 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c48 component-row"
+                              class="c49 component-row"
                             >
                               <td
                                 colspan="12"
                               >
                                 <div
-                                  class="c23"
+                                  class="c24"
                                 >
                                   <div
-                                    class="c39"
+                                    class="c40"
                                   >
                                     <table>
                                       <tbody>
                                         <tr
-                                          class="c26"
+                                          class="c27"
                                           style="cursor: pointer;"
                                         >
                                           <td
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c40"
+                                              class="c41"
                                             >
                                               <svg
-                                                class="c67"
+                                                class="c68"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -3754,11 +3758,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               </svg>
                                             </div>
                                             <div
-                                              class="c27 c28"
+                                              class="c28 c29"
                                             >
                                               <div
                                                 aria-hidden="true"
-                                                class="c29 c30"
+                                                class="c30 c31"
                                               >
                                                 <svg
                                                   class=""
@@ -3784,7 +3788,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </svg>
                                               </div>
                                               <span
-                                                class="c8 c31"
+                                                class="c9 c32"
                                               >
                                                 name
                                               </span>
@@ -3792,7 +3796,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c8 c32"
+                                              class="c9 c33"
                                             >
                                               string
                                                
@@ -3801,22 +3805,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           <td>
                                             <div
                                               aria-hidden="true"
-                                              class="c21"
+                                              class="c22"
                                               role="button"
                                             >
                                               <div
-                                                class="c33"
+                                                class="c34"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="32"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Edit name
                                                     </span>
@@ -3842,12 +3846,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="33"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Delete name
                                                     </span>
@@ -3872,17 +3876,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                         </tr>
                                         <tr
-                                          class="c26"
+                                          class="c27"
                                           style="cursor: pointer;"
                                         >
                                           <td
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c40"
+                                              class="c41"
                                             >
                                               <svg
-                                                class="c67"
+                                                class="c68"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -3898,11 +3902,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               </svg>
                                             </div>
                                             <div
-                                              class="c27 c28"
+                                              class="c28 c29"
                                             >
                                               <div
                                                 aria-hidden="true"
-                                                class="c29 c30"
+                                                class="c30 c31"
                                               >
                                                 <svg
                                                   class=""
@@ -3928,7 +3932,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </svg>
                                               </div>
                                               <span
-                                                class="c8 c31"
+                                                class="c9 c32"
                                               >
                                                 mail
                                               </span>
@@ -3936,7 +3940,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c8 c32"
+                                              class="c9 c33"
                                             >
                                               email
                                                
@@ -3945,22 +3949,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           <td>
                                             <div
                                               aria-hidden="true"
-                                              class="c21"
+                                              class="c22"
                                               role="button"
                                             >
                                               <div
-                                                class="c33"
+                                                class="c34"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="34"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Edit mail
                                                     </span>
@@ -3986,12 +3990,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="35"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Delete mail
                                                     </span>
@@ -4016,17 +4020,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                         </tr>
                                         <tr
-                                          class="c26"
+                                          class="c27"
                                           style="cursor: pointer;"
                                         >
                                           <td
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c40"
+                                              class="c41"
                                             >
                                               <svg
-                                                class="c67"
+                                                class="c68"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4042,11 +4046,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               </svg>
                                             </div>
                                             <div
-                                              class="c27 c28"
+                                              class="c28 c29"
                                             >
                                               <div
                                                 aria-hidden="true"
-                                                class="c29 c30"
+                                                class="c30 c31"
                                               >
                                                 <svg
                                                   class=""
@@ -4072,7 +4076,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </svg>
                                               </div>
                                               <span
-                                                class="c8 c31"
+                                                class="c9 c32"
                                               >
                                                 phone
                                               </span>
@@ -4080,7 +4084,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c8 c32"
+                                              class="c9 c33"
                                             >
                                               integer
                                                
@@ -4089,22 +4093,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           <td>
                                             <div
                                               aria-hidden="true"
-                                              class="c21"
+                                              class="c22"
                                               role="button"
                                             >
                                               <div
-                                                class="c33"
+                                                class="c34"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="36"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Edit phone
                                                     </span>
@@ -4130,12 +4134,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="37"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Delete phone
                                                     </span>
@@ -4163,15 +4167,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c42 c43"
+                                    class="c43 c44"
                                     type="button"
                                   >
                                     <div
-                                      class="c7"
+                                      class="c8"
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c59 c68"
+                                        class="c60 c69"
                                       >
                                         <svg
                                           fill="none"
@@ -4187,10 +4191,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c46"
+                                        class="c47"
                                       >
                                         <span
-                                          class="c8 c55"
+                                          class="c9 c56"
                                         >
                                           Add another field
                                         </span>
@@ -4210,31 +4214,31 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c48 component-row"
+                              class="c49 component-row"
                             >
                               <td
                                 colspan="12"
                               >
                                 <div
-                                  class="c23"
+                                  class="c24"
                                 >
                                   <div
-                                    class="c39"
+                                    class="c40"
                                   >
                                     <table>
                                       <tbody>
                                         <tr
-                                          class="c26"
+                                          class="c27"
                                           style="cursor: pointer;"
                                         >
                                           <td
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c40"
+                                              class="c41"
                                             >
                                               <svg
-                                                class="c67"
+                                                class="c68"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4250,11 +4254,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               </svg>
                                             </div>
                                             <div
-                                              class="c27 c28"
+                                              class="c28 c29"
                                             >
                                               <div
                                                 aria-hidden="true"
-                                                class="c29 c30"
+                                                class="c30 c31"
                                               >
                                                 <svg
                                                   class=""
@@ -4280,7 +4284,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </svg>
                                               </div>
                                               <span
-                                                class="c8 c31"
+                                                class="c9 c32"
                                               >
                                                 name
                                               </span>
@@ -4288,7 +4292,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c8 c32"
+                                              class="c9 c33"
                                             >
                                               string
                                                
@@ -4297,22 +4301,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           <td>
                                             <div
                                               aria-hidden="true"
-                                              class="c21"
+                                              class="c22"
                                               role="button"
                                             >
                                               <div
-                                                class="c33"
+                                                class="c34"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="38"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Edit name
                                                     </span>
@@ -4338,12 +4342,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="39"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Delete name
                                                     </span>
@@ -4368,17 +4372,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                         </tr>
                                         <tr
-                                          class="c26"
+                                          class="c27"
                                           style="cursor: pointer;"
                                         >
                                           <td
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c40"
+                                              class="c41"
                                             >
                                               <svg
-                                                class="c67"
+                                                class="c68"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4394,11 +4398,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               </svg>
                                             </div>
                                             <div
-                                              class="c27 c28"
+                                              class="c28 c29"
                                             >
                                               <div
                                                 aria-hidden="true"
-                                                class="c29 c30"
+                                                class="c30 c31"
                                               >
                                                 <svg
                                                   class=""
@@ -4424,7 +4428,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </svg>
                                               </div>
                                               <span
-                                                class="c8 c31"
+                                                class="c9 c32"
                                               >
                                                 description
                                               </span>
@@ -4432,7 +4436,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c8 c32"
+                                              class="c9 c33"
                                             >
                                               text
                                                
@@ -4441,22 +4445,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           <td>
                                             <div
                                               aria-hidden="true"
-                                              class="c21"
+                                              class="c22"
                                               role="button"
                                             >
                                               <div
-                                                class="c33"
+                                                class="c34"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="40"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Edit description
                                                     </span>
@@ -4482,12 +4486,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="41"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Delete description
                                                     </span>
@@ -4512,17 +4516,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                         </tr>
                                         <tr
-                                          class="c26"
+                                          class="c27"
                                           style="cursor: pointer;"
                                         >
                                           <td
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c40"
+                                              class="c41"
                                             >
                                               <svg
-                                                class="c67"
+                                                class="c68"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4538,11 +4542,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               </svg>
                                             </div>
                                             <div
-                                              class="c27 c28"
+                                              class="c28 c29"
                                             >
                                               <div
                                                 aria-hidden="true"
-                                                class="c29 c30"
+                                                class="c30 c31"
                                               >
                                                 <svg
                                                   class=""
@@ -4568,7 +4572,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </svg>
                                               </div>
                                               <span
-                                                class="c8 c31"
+                                                class="c9 c32"
                                               >
                                                 price
                                               </span>
@@ -4576,7 +4580,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c8 c32"
+                                              class="c9 c33"
                                             >
                                               float
                                                
@@ -4585,22 +4589,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           <td>
                                             <div
                                               aria-hidden="true"
-                                              class="c21"
+                                              class="c22"
                                               role="button"
                                             >
                                               <div
-                                                class="c33"
+                                                class="c34"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="42"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Edit price
                                                     </span>
@@ -4626,12 +4630,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="43"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Delete price
                                                     </span>
@@ -4656,17 +4660,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                         </tr>
                                         <tr
-                                          class="c26"
+                                          class="c27"
                                           style="cursor: pointer;"
                                         >
                                           <td
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c40"
+                                              class="c41"
                                             >
                                               <svg
-                                                class="c67"
+                                                class="c68"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4682,11 +4686,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               </svg>
                                             </div>
                                             <div
-                                              class="c27 c28"
+                                              class="c28 c29"
                                             >
                                               <div
                                                 aria-hidden="true"
-                                                class="c29 c30"
+                                                class="c30 c31"
                                               >
                                                 <svg
                                                   class=""
@@ -4714,7 +4718,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </svg>
                                               </div>
                                               <span
-                                                class="c8 c31"
+                                                class="c9 c32"
                                               >
                                                 picture
                                               </span>
@@ -4722,7 +4726,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c8 c32"
+                                              class="c9 c33"
                                             >
                                               media
                                                
@@ -4731,22 +4735,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           <td>
                                             <div
                                               aria-hidden="true"
-                                              class="c21"
+                                              class="c22"
                                               role="button"
                                             >
                                               <div
-                                                class="c33"
+                                                class="c34"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="44"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Edit picture
                                                     </span>
@@ -4772,12 +4776,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="45"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Delete picture
                                                     </span>
@@ -4802,17 +4806,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                         </tr>
                                         <tr
-                                          class="c26"
+                                          class="c27"
                                           style="cursor: pointer;"
                                         >
                                           <td
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c40"
+                                              class="c41"
                                             >
                                               <svg
-                                                class="c67"
+                                                class="c68"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4828,11 +4832,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               </svg>
                                             </div>
                                             <div
-                                              class="c27 c28"
+                                              class="c28 c29"
                                             >
                                               <div
                                                 aria-hidden="true"
-                                                class="c29 c30"
+                                                class="c30 c31"
                                               >
                                                 <svg
                                                   class=""
@@ -4860,7 +4864,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </svg>
                                               </div>
                                               <span
-                                                class="c8 c31"
+                                                class="c9 c32"
                                               >
                                                 very_long_description
                                               </span>
@@ -4868,7 +4872,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c8 c32"
+                                              class="c9 c33"
                                             >
                                               richtext
                                                
@@ -4877,22 +4881,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           <td>
                                             <div
                                               aria-hidden="true"
-                                              class="c21"
+                                              class="c22"
                                               role="button"
                                             >
                                               <div
-                                                class="c33"
+                                                class="c34"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="46"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Edit very_long_description
                                                     </span>
@@ -4918,12 +4922,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="47"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Delete very_long_description
                                                     </span>
@@ -4948,17 +4952,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                         </tr>
                                         <tr
-                                          class="c26"
+                                          class="c27"
                                           style="cursor: pointer;"
                                         >
                                           <td
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c40"
+                                              class="c41"
                                             >
                                               <svg
-                                                class="c67"
+                                                class="c68"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4974,11 +4978,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               </svg>
                                             </div>
                                             <div
-                                              class="c27 c28"
+                                              class="c28 c29"
                                             >
                                               <div
                                                 aria-hidden="true"
-                                                class="c29 c30"
+                                                class="c30 c31"
                                               >
                                                 <svg
                                                   class=""
@@ -5002,7 +5006,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </svg>
                                               </div>
                                               <span
-                                                class="c8 c31"
+                                                class="c9 c32"
                                               >
                                                 categories
                                               </span>
@@ -5010,7 +5014,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c8 c32"
+                                              class="c9 c33"
                                             >
                                               Relation with
                                                
@@ -5025,22 +5029,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           <td>
                                             <div
                                               aria-hidden="true"
-                                              class="c21"
+                                              class="c22"
                                               role="button"
                                             >
                                               <div
-                                                class="c33"
+                                                class="c34"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="48"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Edit categories
                                                     </span>
@@ -5066,12 +5070,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="49"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Delete categories
                                                     </span>
@@ -5099,15 +5103,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c42 c43"
+                                    class="c43 c44"
                                     type="button"
                                   >
                                     <div
-                                      class="c7"
+                                      class="c8"
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c59 c68"
+                                        class="c60 c69"
                                       >
                                         <svg
                                           fill="none"
@@ -5123,10 +5127,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c46"
+                                        class="c47"
                                       >
                                         <span
-                                          class="c8 c55"
+                                          class="c9 c56"
                                         >
                                           Add another field
                                         </span>
@@ -5146,31 +5150,31 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c48 component-row"
+                              class="c49 component-row"
                             >
                               <td
                                 colspan="12"
                               >
                                 <div
-                                  class="c23"
+                                  class="c24"
                                 >
                                   <div
-                                    class="c39"
+                                    class="c40"
                                   >
                                     <table>
                                       <tbody>
                                         <tr
-                                          class="c26"
+                                          class="c27"
                                           style="cursor: pointer;"
                                         >
                                           <td
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c40"
+                                              class="c41"
                                             >
                                               <svg
-                                                class="c67"
+                                                class="c68"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5186,11 +5190,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               </svg>
                                             </div>
                                             <div
-                                              class="c27 c28"
+                                              class="c28 c29"
                                             >
                                               <div
                                                 aria-hidden="true"
-                                                class="c29 c30"
+                                                class="c30 c31"
                                               >
                                                 <svg
                                                   class=""
@@ -5216,7 +5220,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </svg>
                                               </div>
                                               <span
-                                                class="c8 c31"
+                                                class="c9 c32"
                                               >
                                                 label
                                               </span>
@@ -5224,7 +5228,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c8 c32"
+                                              class="c9 c33"
                                             >
                                               string
                                                
@@ -5233,22 +5237,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           <td>
                                             <div
                                               aria-hidden="true"
-                                              class="c21"
+                                              class="c22"
                                               role="button"
                                             >
                                               <div
-                                                class="c33"
+                                                class="c34"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="50"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Edit label
                                                     </span>
@@ -5274,12 +5278,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="51"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Delete label
                                                     </span>
@@ -5304,17 +5308,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                         </tr>
                                         <tr
-                                          class="c26"
+                                          class="c27"
                                           style="cursor: pointer;"
                                         >
                                           <td
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c40"
+                                              class="c41"
                                             >
                                               <svg
-                                                class="c67"
+                                                class="c68"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5330,11 +5334,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               </svg>
                                             </div>
                                             <div
-                                              class="c27 c28"
+                                              class="c28 c29"
                                             >
                                               <div
                                                 aria-hidden="true"
-                                                class="c29 c30"
+                                                class="c30 c31"
                                               >
                                                 <svg
                                                   class=""
@@ -5360,7 +5364,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </svg>
                                               </div>
                                               <span
-                                                class="c8 c31"
+                                                class="c9 c32"
                                               >
                                                 time
                                               </span>
@@ -5368,7 +5372,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c8 c32"
+                                              class="c9 c33"
                                             >
                                               string
                                                
@@ -5377,22 +5381,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           <td>
                                             <div
                                               aria-hidden="true"
-                                              class="c21"
+                                              class="c22"
                                               role="button"
                                             >
                                               <div
-                                                class="c33"
+                                                class="c34"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="52"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Edit time
                                                     </span>
@@ -5418,12 +5422,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="53"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Delete time
                                                     </span>
@@ -5448,17 +5452,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                         </tr>
                                         <tr
-                                          class="c26"
+                                          class="c27"
                                           style="cursor: pointer;"
                                         >
                                           <td
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c40"
+                                              class="c41"
                                             >
                                               <svg
-                                                class="c67"
+                                                class="c68"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5474,11 +5478,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               </svg>
                                             </div>
                                             <div
-                                              class="c27 c28"
+                                              class="c28 c29"
                                             >
                                               <div
                                                 aria-hidden="true"
-                                                class="c29 c30"
+                                                class="c30 c31"
                                               >
                                                 <svg
                                                   class=""
@@ -5510,7 +5514,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </svg>
                                               </div>
                                               <span
-                                                class="c8 c31"
+                                                class="c9 c32"
                                               >
                                                 dishrep
                                               </span>
@@ -5518,7 +5522,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c8 c32"
+                                              class="c9 c33"
                                             >
                                               component
                                                
@@ -5528,22 +5532,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           <td>
                                             <div
                                               aria-hidden="true"
-                                              class="c21"
+                                              class="c22"
                                               role="button"
                                             >
                                               <div
-                                                class="c33"
+                                                class="c34"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="54"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Edit dishrep
                                                     </span>
@@ -5569,12 +5573,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="55"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Delete dishrep
                                                     </span>
@@ -5599,31 +5603,31 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                         </tr>
                                         <tr
-                                          class="c38 component-row"
+                                          class="c39 component-row"
                                         >
                                           <td
                                             colspan="12"
                                           >
                                             <div
-                                              class="c23"
+                                              class="c24"
                                             >
                                               <div
-                                                class="c39"
+                                                class="c40"
                                               >
                                                 <table>
                                                   <tbody>
                                                     <tr
-                                                      class="c26"
+                                                      class="c27"
                                                       style="cursor: pointer;"
                                                     >
                                                       <td
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c40"
+                                                          class="c41"
                                                         >
                                                           <svg
-                                                            class="c41"
+                                                            class="c42"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -5639,11 +5643,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                           </svg>
                                                         </div>
                                                         <div
-                                                          class="c27 c28"
+                                                          class="c28 c29"
                                                         >
                                                           <div
                                                             aria-hidden="true"
-                                                            class="c29 c30"
+                                                            class="c30 c31"
                                                           >
                                                             <svg
                                                               class=""
@@ -5669,7 +5673,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                             </svg>
                                                           </div>
                                                           <span
-                                                            class="c8 c31"
+                                                            class="c9 c32"
                                                           >
                                                             name
                                                           </span>
@@ -5677,7 +5681,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                       <td>
                                                         <span
-                                                          class="c8 c32"
+                                                          class="c9 c33"
                                                         >
                                                           string
                                                            
@@ -5686,22 +5690,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       <td>
                                                         <div
                                                           aria-hidden="true"
-                                                          class="c21"
+                                                          class="c22"
                                                           role="button"
                                                         >
                                                           <div
-                                                            class="c33"
+                                                            class="c34"
                                                           >
                                                             <span>
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="56"
-                                                                class="c34 c35 c13 c36"
+                                                                class="c35 c36 c14 c37"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c37"
+                                                                  class="c38"
                                                                 >
                                                                   Edit name
                                                                 </span>
@@ -5727,12 +5731,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="57"
-                                                                class="c34 c35 c13 c36"
+                                                                class="c35 c36 c14 c37"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c37"
+                                                                  class="c38"
                                                                 >
                                                                   Delete name
                                                                 </span>
@@ -5757,17 +5761,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                     </tr>
                                                     <tr
-                                                      class="c26"
+                                                      class="c27"
                                                       style="cursor: pointer;"
                                                     >
                                                       <td
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c40"
+                                                          class="c41"
                                                         >
                                                           <svg
-                                                            class="c41"
+                                                            class="c42"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -5783,11 +5787,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                           </svg>
                                                         </div>
                                                         <div
-                                                          class="c27 c28"
+                                                          class="c28 c29"
                                                         >
                                                           <div
                                                             aria-hidden="true"
-                                                            class="c29 c30"
+                                                            class="c30 c31"
                                                           >
                                                             <svg
                                                               class=""
@@ -5813,7 +5817,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                             </svg>
                                                           </div>
                                                           <span
-                                                            class="c8 c31"
+                                                            class="c9 c32"
                                                           >
                                                             description
                                                           </span>
@@ -5821,7 +5825,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                       <td>
                                                         <span
-                                                          class="c8 c32"
+                                                          class="c9 c33"
                                                         >
                                                           text
                                                            
@@ -5830,22 +5834,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       <td>
                                                         <div
                                                           aria-hidden="true"
-                                                          class="c21"
+                                                          class="c22"
                                                           role="button"
                                                         >
                                                           <div
-                                                            class="c33"
+                                                            class="c34"
                                                           >
                                                             <span>
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="58"
-                                                                class="c34 c35 c13 c36"
+                                                                class="c35 c36 c14 c37"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c37"
+                                                                  class="c38"
                                                                 >
                                                                   Edit description
                                                                 </span>
@@ -5871,12 +5875,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="59"
-                                                                class="c34 c35 c13 c36"
+                                                                class="c35 c36 c14 c37"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c37"
+                                                                  class="c38"
                                                                 >
                                                                   Delete description
                                                                 </span>
@@ -5901,17 +5905,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                     </tr>
                                                     <tr
-                                                      class="c26"
+                                                      class="c27"
                                                       style="cursor: pointer;"
                                                     >
                                                       <td
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c40"
+                                                          class="c41"
                                                         >
                                                           <svg
-                                                            class="c41"
+                                                            class="c42"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -5927,11 +5931,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                           </svg>
                                                         </div>
                                                         <div
-                                                          class="c27 c28"
+                                                          class="c28 c29"
                                                         >
                                                           <div
                                                             aria-hidden="true"
-                                                            class="c29 c30"
+                                                            class="c30 c31"
                                                           >
                                                             <svg
                                                               class=""
@@ -5957,7 +5961,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                             </svg>
                                                           </div>
                                                           <span
-                                                            class="c8 c31"
+                                                            class="c9 c32"
                                                           >
                                                             price
                                                           </span>
@@ -5965,7 +5969,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                       <td>
                                                         <span
-                                                          class="c8 c32"
+                                                          class="c9 c33"
                                                         >
                                                           float
                                                            
@@ -5974,22 +5978,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       <td>
                                                         <div
                                                           aria-hidden="true"
-                                                          class="c21"
+                                                          class="c22"
                                                           role="button"
                                                         >
                                                           <div
-                                                            class="c33"
+                                                            class="c34"
                                                           >
                                                             <span>
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="60"
-                                                                class="c34 c35 c13 c36"
+                                                                class="c35 c36 c14 c37"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c37"
+                                                                  class="c38"
                                                                 >
                                                                   Edit price
                                                                 </span>
@@ -6015,12 +6019,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="61"
-                                                                class="c34 c35 c13 c36"
+                                                                class="c35 c36 c14 c37"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c37"
+                                                                  class="c38"
                                                                 >
                                                                   Delete price
                                                                 </span>
@@ -6045,17 +6049,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                     </tr>
                                                     <tr
-                                                      class="c26"
+                                                      class="c27"
                                                       style="cursor: pointer;"
                                                     >
                                                       <td
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c40"
+                                                          class="c41"
                                                         >
                                                           <svg
-                                                            class="c41"
+                                                            class="c42"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -6071,11 +6075,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                           </svg>
                                                         </div>
                                                         <div
-                                                          class="c27 c28"
+                                                          class="c28 c29"
                                                         >
                                                           <div
                                                             aria-hidden="true"
-                                                            class="c29 c30"
+                                                            class="c30 c31"
                                                           >
                                                             <svg
                                                               class=""
@@ -6103,7 +6107,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                             </svg>
                                                           </div>
                                                           <span
-                                                            class="c8 c31"
+                                                            class="c9 c32"
                                                           >
                                                             picture
                                                           </span>
@@ -6111,7 +6115,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                       <td>
                                                         <span
-                                                          class="c8 c32"
+                                                          class="c9 c33"
                                                         >
                                                           media
                                                            
@@ -6120,22 +6124,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       <td>
                                                         <div
                                                           aria-hidden="true"
-                                                          class="c21"
+                                                          class="c22"
                                                           role="button"
                                                         >
                                                           <div
-                                                            class="c33"
+                                                            class="c34"
                                                           >
                                                             <span>
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="62"
-                                                                class="c34 c35 c13 c36"
+                                                                class="c35 c36 c14 c37"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c37"
+                                                                  class="c38"
                                                                 >
                                                                   Edit picture
                                                                 </span>
@@ -6161,12 +6165,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="63"
-                                                                class="c34 c35 c13 c36"
+                                                                class="c35 c36 c14 c37"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c37"
+                                                                  class="c38"
                                                                 >
                                                                   Delete picture
                                                                 </span>
@@ -6191,17 +6195,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                     </tr>
                                                     <tr
-                                                      class="c26"
+                                                      class="c27"
                                                       style="cursor: pointer;"
                                                     >
                                                       <td
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c40"
+                                                          class="c41"
                                                         >
                                                           <svg
-                                                            class="c41"
+                                                            class="c42"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -6217,11 +6221,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                           </svg>
                                                         </div>
                                                         <div
-                                                          class="c27 c28"
+                                                          class="c28 c29"
                                                         >
                                                           <div
                                                             aria-hidden="true"
-                                                            class="c29 c30"
+                                                            class="c30 c31"
                                                           >
                                                             <svg
                                                               class=""
@@ -6249,7 +6253,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                             </svg>
                                                           </div>
                                                           <span
-                                                            class="c8 c31"
+                                                            class="c9 c32"
                                                           >
                                                             very_long_description
                                                           </span>
@@ -6257,7 +6261,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                       <td>
                                                         <span
-                                                          class="c8 c32"
+                                                          class="c9 c33"
                                                         >
                                                           richtext
                                                            
@@ -6266,22 +6270,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       <td>
                                                         <div
                                                           aria-hidden="true"
-                                                          class="c21"
+                                                          class="c22"
                                                           role="button"
                                                         >
                                                           <div
-                                                            class="c33"
+                                                            class="c34"
                                                           >
                                                             <span>
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="64"
-                                                                class="c34 c35 c13 c36"
+                                                                class="c35 c36 c14 c37"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c37"
+                                                                  class="c38"
                                                                 >
                                                                   Edit very_long_description
                                                                 </span>
@@ -6307,12 +6311,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="65"
-                                                                class="c34 c35 c13 c36"
+                                                                class="c35 c36 c14 c37"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c37"
+                                                                  class="c38"
                                                                 >
                                                                   Delete very_long_description
                                                                 </span>
@@ -6337,17 +6341,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                     </tr>
                                                     <tr
-                                                      class="c26"
+                                                      class="c27"
                                                       style="cursor: pointer;"
                                                     >
                                                       <td
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c40"
+                                                          class="c41"
                                                         >
                                                           <svg
-                                                            class="c41"
+                                                            class="c42"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -6363,11 +6367,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                           </svg>
                                                         </div>
                                                         <div
-                                                          class="c27 c28"
+                                                          class="c28 c29"
                                                         >
                                                           <div
                                                             aria-hidden="true"
-                                                            class="c29 c30"
+                                                            class="c30 c31"
                                                           >
                                                             <svg
                                                               class=""
@@ -6391,7 +6395,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                             </svg>
                                                           </div>
                                                           <span
-                                                            class="c8 c31"
+                                                            class="c9 c32"
                                                           >
                                                             categories
                                                           </span>
@@ -6399,7 +6403,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                       <td>
                                                         <span
-                                                          class="c8 c32"
+                                                          class="c9 c33"
                                                         >
                                                           Relation with
                                                            
@@ -6414,22 +6418,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       <td>
                                                         <div
                                                           aria-hidden="true"
-                                                          class="c21"
+                                                          class="c22"
                                                           role="button"
                                                         >
                                                           <div
-                                                            class="c33"
+                                                            class="c34"
                                                           >
                                                             <span>
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="66"
-                                                                class="c34 c35 c13 c36"
+                                                                class="c35 c36 c14 c37"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c37"
+                                                                  class="c38"
                                                                 >
                                                                   Edit categories
                                                                 </span>
@@ -6455,12 +6459,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="67"
-                                                                class="c34 c35 c13 c36"
+                                                                class="c35 c36 c14 c37"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c37"
+                                                                  class="c38"
                                                                 >
                                                                   Delete categories
                                                                 </span>
@@ -6488,15 +6492,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </table>
                                               </div>
                                               <button
-                                                class="c42 c43"
+                                                class="c43 c44"
                                                 type="button"
                                               >
                                                 <div
-                                                  class="c7"
+                                                  class="c8"
                                                 >
                                                   <div
                                                     aria-hidden="true"
-                                                    class="c44 c45"
+                                                    class="c45 c46"
                                                   >
                                                     <svg
                                                       fill="none"
@@ -6512,10 +6516,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     </svg>
                                                   </div>
                                                   <div
-                                                    class="c46"
+                                                    class="c47"
                                                   >
                                                     <span
-                                                      class="c8 c47"
+                                                      class="c9 c48"
                                                     >
                                                       Add another field
                                                     </span>
@@ -6529,15 +6533,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c42 c43"
+                                    class="c43 c44"
                                     type="button"
                                   >
                                     <div
-                                      class="c7"
+                                      class="c8"
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c59 c68"
+                                        class="c60 c69"
                                       >
                                         <svg
                                           fill="none"
@@ -6553,10 +6557,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c46"
+                                        class="c47"
                                       >
                                         <span
-                                          class="c8 c55"
+                                          class="c9 c56"
                                         >
                                           Add another field
                                         </span>
@@ -6576,31 +6580,31 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c48 component-row"
+                              class="c49 component-row"
                             >
                               <td
                                 colspan="12"
                               >
                                 <div
-                                  class="c23"
+                                  class="c24"
                                 >
                                   <div
-                                    class="c39"
+                                    class="c40"
                                   >
                                     <table>
                                       <tbody>
                                         <tr
-                                          class="c26"
+                                          class="c27"
                                           style="cursor: pointer;"
                                         >
                                           <td
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c40"
+                                              class="c41"
                                             >
                                               <svg
-                                                class="c67"
+                                                class="c68"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -6616,11 +6620,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               </svg>
                                             </div>
                                             <div
-                                              class="c27 c28"
+                                              class="c28 c29"
                                             >
                                               <div
                                                 aria-hidden="true"
-                                                class="c29 c30"
+                                                class="c30 c31"
                                               >
                                                 <svg
                                                   class=""
@@ -6646,7 +6650,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </svg>
                                               </div>
                                               <span
-                                                class="c8 c31"
+                                                class="c9 c32"
                                               >
                                                 name
                                               </span>
@@ -6654,7 +6658,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c8 c32"
+                                              class="c9 c33"
                                             >
                                               string
                                                
@@ -6663,22 +6667,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           <td>
                                             <div
                                               aria-hidden="true"
-                                              class="c21"
+                                              class="c22"
                                               role="button"
                                             >
                                               <div
-                                                class="c33"
+                                                class="c34"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="68"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Edit name
                                                     </span>
@@ -6704,12 +6708,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="69"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Delete name
                                                     </span>
@@ -6734,17 +6738,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                         </tr>
                                         <tr
-                                          class="c26"
+                                          class="c27"
                                           style="cursor: pointer;"
                                         >
                                           <td
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c40"
+                                              class="c41"
                                             >
                                               <svg
-                                                class="c67"
+                                                class="c68"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -6760,11 +6764,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               </svg>
                                             </div>
                                             <div
-                                              class="c27 c28"
+                                              class="c28 c29"
                                             >
                                               <div
                                                 aria-hidden="true"
-                                                class="c29 c30"
+                                                class="c30 c31"
                                               >
                                                 <svg
                                                   class=""
@@ -6792,7 +6796,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </svg>
                                               </div>
                                               <span
-                                                class="c8 c31"
+                                                class="c9 c32"
                                               >
                                                 media
                                               </span>
@@ -6800,7 +6804,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c8 c32"
+                                              class="c9 c33"
                                             >
                                               media
                                                
@@ -6809,22 +6813,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           <td>
                                             <div
                                               aria-hidden="true"
-                                              class="c21"
+                                              class="c22"
                                               role="button"
                                             >
                                               <div
-                                                class="c33"
+                                                class="c34"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="70"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Edit media
                                                     </span>
@@ -6850,12 +6854,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="71"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Delete media
                                                     </span>
@@ -6880,17 +6884,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                         </tr>
                                         <tr
-                                          class="c26"
+                                          class="c27"
                                           style="cursor: pointer;"
                                         >
                                           <td
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c40"
+                                              class="c41"
                                             >
                                               <svg
-                                                class="c67"
+                                                class="c68"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -6906,11 +6910,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               </svg>
                                             </div>
                                             <div
-                                              class="c27 c28"
+                                              class="c28 c29"
                                             >
                                               <div
                                                 aria-hidden="true"
-                                                class="c29 c30"
+                                                class="c30 c31"
                                               >
                                                 <svg
                                                   class=""
@@ -6936,7 +6940,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </svg>
                                               </div>
                                               <span
-                                                class="c8 c31"
+                                                class="c9 c32"
                                               >
                                                 is_available
                                               </span>
@@ -6944,7 +6948,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c8 c32"
+                                              class="c9 c33"
                                             >
                                               boolean
                                                
@@ -6953,22 +6957,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           <td>
                                             <div
                                               aria-hidden="true"
-                                              class="c21"
+                                              class="c22"
                                               role="button"
                                             >
                                               <div
-                                                class="c33"
+                                                class="c34"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="72"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Edit is_available
                                                     </span>
@@ -6994,12 +6998,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="73"
-                                                    class="c34 c35 c13 c36"
+                                                    class="c35 c36 c14 c37"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c37"
+                                                      class="c38"
                                                     >
                                                       Delete is_available
                                                     </span>
@@ -7027,15 +7031,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c42 c43"
+                                    class="c43 c44"
                                     type="button"
                                   >
                                     <div
-                                      class="c7"
+                                      class="c8"
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c59 c68"
+                                        class="c60 c69"
                                       >
                                         <svg
                                           fill="none"
@@ -7051,10 +7055,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c46"
+                                        class="c47"
                                       >
                                         <span
-                                          class="c8 c55"
+                                          class="c9 c56"
                                         >
                                           Add another field
                                         </span>
@@ -7075,17 +7079,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
           </div>
           <div>
             <hr
-              class="c69 c70"
+              class="c70 c71"
             />
             <button
-              class="c71 c72"
+              class="c72 c73"
             >
               <div
-                class="c7"
+                class="c8"
               >
                 <div
                   aria-hidden="true"
-                  class="c59 c73"
+                  class="c60 c74"
                 >
                   <svg
                     fill="none"
@@ -7101,10 +7105,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="c46"
+                  class="c47"
                 >
                   <span
-                    class="c8 c55"
+                    class="c9 c56"
                   >
                     Add another field
                   </span>
@@ -7117,7 +7121,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c37"
+    class="c38"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/content-type-builder/package.json b/packages/core/content-type-builder/package.json
index bb7677d5e9..5dbd21b3b4 100644
--- a/packages/core/content-type-builder/package.json
+++ b/packages/core/content-type-builder/package.json
@@ -28,10 +28,10 @@
   },
   "dependencies": {
     "@sindresorhus/slugify": "1.1.0",
-    "@strapi/design-system": "1.6.4",
+    "@strapi/design-system": "1.6.5",
     "@strapi/generators": "4.7.1",
     "@strapi/helper-plugin": "4.7.1",
-    "@strapi/icons": "1.6.4",
+    "@strapi/icons": "1.6.5",
     "@strapi/strapi": "4.7.1",
     "@strapi/utils": "4.7.1",
     "fs-extra": "10.0.0",
diff --git a/packages/core/email/admin/src/pages/Settings/tests/index.test.js b/packages/core/email/admin/src/pages/Settings/tests/index.test.js
index b27bddca51..f6cd7ad399 100644
--- a/packages/core/email/admin/src/pages/Settings/tests/index.test.js
+++ b/packages/core/email/admin/src/pages/Settings/tests/index.test.js
@@ -54,12 +54,16 @@ describe('Email | Pages | Settings', () => {
         padding-left: 56px;
       }
 
-      .c7 {
+      .c3 {
+        min-width: 0;
+      }
+
+      .c8 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c9 {
+      .c10 {
         background: #ffffff;
         padding-top: 24px;
         padding-right: 32px;
@@ -69,16 +73,16 @@ describe('Email | Pages | Settings', () => {
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c25 {
+      .c24 {
         padding-right: 16px;
         padding-left: 16px;
       }
 
-      .c27 {
+      .c26 {
         padding-left: 12px;
       }
 
-      .c33 {
+      .c32 {
         background: #4945ff;
         padding: 8px;
         padding-right: 16px;
@@ -107,7 +111,7 @@ describe('Email | Pages | Settings', () => {
         justify-content: space-between;
       }
 
-      .c3 {
+      .c4 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -121,7 +125,7 @@ describe('Email | Pages | Settings', () => {
         flex-direction: row;
       }
 
-      .c8 {
+      .c9 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -136,7 +140,7 @@ describe('Email | Pages | Settings', () => {
         gap: 32px;
       }
 
-      .c10 {
+      .c11 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -151,7 +155,7 @@ describe('Email | Pages | Settings', () => {
         gap: 16px;
       }
 
-      .c11 {
+      .c12 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -166,21 +170,7 @@ describe('Email | Pages | Settings', () => {
         gap: 4px;
       }
 
-      .c17 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-      }
-
-      .c34 {
+      .c33 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -195,40 +185,40 @@ describe('Email | Pages | Settings', () => {
         gap: 8px;
       }
 
-      .c5 {
+      .c6 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c6 {
+      .c7 {
         font-size: 1rem;
         line-height: 1.5;
         color: #666687;
       }
 
-      .c12 {
+      .c13 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c13 {
+      .c14 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #32324d;
       }
 
-      .c19 {
+      .c18 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #32324d;
       }
 
-      .c26 {
+      .c25 {
         font-size: 0.875rem;
         line-height: 1.43;
         display: block;
@@ -238,42 +228,33 @@ describe('Email | Pages | Settings', () => {
         color: #666687;
       }
 
-      .c37 {
+      .c36 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c18 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c18 > * + * {
-        margin-top: 4px;
-      }
-
-      .c35 {
+      .c34 {
         position: relative;
         outline: none;
       }
 
-      .c35 svg {
+      .c34 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c35 svg > g,
-      .c35 svg path {
+      .c34 svg > g,
+      .c34 svg path {
         fill: #ffffff;
       }
 
-      .c35[aria-disabled='true'] {
+      .c34[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c35:after {
+      .c34:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -288,11 +269,11 @@ describe('Email | Pages | Settings', () => {
         border: 2px solid transparent;
       }
 
-      .c35:focus-visible {
+      .c34:focus-visible {
         outline: none;
       }
 
-      .c35:focus-visible:after {
+      .c34:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -303,52 +284,52 @@ describe('Email | Pages | Settings', () => {
         border: 2px solid #4945ff;
       }
 
-      .c36 {
+      .c35 {
         height: 2rem;
       }
 
-      .c36[aria-disabled='true'] {
+      .c35[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c36[aria-disabled='true'] .c4 {
+      .c35[aria-disabled='true'] .c5 {
         color: #666687;
       }
 
-      .c36[aria-disabled='true'] svg > g,.c36[aria-disabled='true'] svg path {
+      .c35[aria-disabled='true'] svg > g,.c35[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c36[aria-disabled='true']:active {
+      .c35[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c36[aria-disabled='true']:active .c4 {
+      .c35[aria-disabled='true']:active .c5 {
         color: #666687;
       }
 
-      .c36[aria-disabled='true']:active svg > g,.c36[aria-disabled='true']:active svg path {
+      .c35[aria-disabled='true']:active svg > g,.c35[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c36:hover {
+      .c35:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c36:active {
+      .c35:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c36 svg > g,
-      .c36 svg path {
+      .c35 svg > g,
+      .c35 svg path {
         fill: #ffffff;
       }
 
-      .c21 {
+      .c20 {
         border: none;
         border-radius: 4px;
         padding-bottom: 0.65625rem;
@@ -364,36 +345,36 @@ describe('Email | Pages | Settings', () => {
         background: inherit;
       }
 
-      .c21::-webkit-input-placeholder {
+      .c20::-webkit-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c21::-moz-placeholder {
+      .c20::-moz-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c21:-ms-input-placeholder {
+      .c20:-ms-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c21::placeholder {
+      .c20::placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c21[aria-disabled='true'] {
+      .c20[aria-disabled='true'] {
         color: inherit;
       }
 
-      .c21:focus {
+      .c20:focus {
         outline: none;
         box-shadow: none;
       }
 
-      .c31 {
+      .c30 {
         border: none;
         border-radius: 4px;
         padding-bottom: 0.65625rem;
@@ -408,36 +389,36 @@ describe('Email | Pages | Settings', () => {
         background: inherit;
       }
 
-      .c31::-webkit-input-placeholder {
+      .c30::-webkit-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c31::-moz-placeholder {
+      .c30::-moz-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c31:-ms-input-placeholder {
+      .c30:-ms-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c31::placeholder {
+      .c30::placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c31[aria-disabled='true'] {
+      .c30[aria-disabled='true'] {
         color: inherit;
       }
 
-      .c31:focus {
+      .c30:focus {
         outline: none;
         box-shadow: none;
       }
 
-      .c20 {
+      .c19 {
         border: 1px solid #dcdce4;
         border-radius: 4px;
         background: #ffffff;
@@ -451,12 +432,12 @@ describe('Email | Pages | Settings', () => {
         background: #eaeaef;
       }
 
-      .c20:focus-within {
+      .c19:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c30 {
+      .c29 {
         border: 1px solid #dcdce4;
         border-radius: 4px;
         background: #ffffff;
@@ -468,12 +449,12 @@ describe('Email | Pages | Settings', () => {
         transition-duration: 0.2s;
       }
 
-      .c30:focus-within {
+      .c29:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c22 {
+      .c21 {
         position: relative;
         border: 1px solid #dcdce4;
         padding-right: 12px;
@@ -491,28 +472,28 @@ describe('Email | Pages | Settings', () => {
         transition-duration: 0.2s;
       }
 
-      .c22:focus-within {
+      .c21:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c28 {
+      .c27 {
         background: transparent;
         border: none;
         position: relative;
         z-index: 1;
       }
 
-      .c28 svg {
+      .c27 svg {
         height: 0.6875rem;
         width: 0.6875rem;
       }
 
-      .c28 svg path {
+      .c27 svg path {
         fill: #666687;
       }
 
-      .c29 {
+      .c28 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -522,11 +503,11 @@ describe('Email | Pages | Settings', () => {
         cursor: not-allowed;
       }
 
-      .c29 svg {
+      .c28 svg {
         width: 0.375rem;
       }
 
-      .c23 {
+      .c22 {
         position: absolute;
         left: 0;
         right: 0;
@@ -537,30 +518,30 @@ describe('Email | Pages | Settings', () => {
         border: none;
       }
 
-      .c23:focus {
+      .c22:focus {
         outline: none;
       }
 
-      .c23[aria-disabled='true'] {
+      .c22[aria-disabled='true'] {
         cursor: not-allowed;
       }
 
-      .c24 {
+      .c23 {
         width: 100%;
       }
 
-      .c15 {
+      .c16 {
         display: grid;
         grid-template-columns: repeat(12,1fr);
         gap: 20px;
       }
 
-      .c16 {
+      .c17 {
         grid-column: span 6;
         max-width: 100%;
       }
 
-      .c32 {
+      .c31 {
         grid-column: span 7;
         max-width: 100%;
       }
@@ -569,30 +550,30 @@ describe('Email | Pages | Settings', () => {
         outline: none;
       }
 
-      .c14 {
+      .c15 {
         color: #4945ff;
       }
 
       @media (max-width:68.75rem) {
-        .c16 {
+        .c17 {
           grid-column: span 12;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c16 {
+        .c17 {
           grid-column: span;
         }
       }
 
       @media (max-width:68.75rem) {
-        .c32 {
+        .c31 {
           grid-column: span 12;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c32 {
+        .c31 {
           grid-column: span;
         }
       }
@@ -615,10 +596,10 @@ describe('Email | Pages | Settings', () => {
               class="c2"
             >
               <div
-                class="c3"
+                class="c3 c4"
               >
                 <h1
-                  class="c4 c5"
+                  class="c5 c6"
                   id="title"
                 >
                   Configuration
@@ -626,39 +607,39 @@ describe('Email | Pages | Settings', () => {
               </div>
             </div>
             <p
-              class="c4 c6"
+              class="c5 c7"
             >
               Test the settings for the Email plugin
             </p>
           </div>
         </div>
         <div
-          class="c7"
+          class="c8"
         >
           <form>
             <div
-              class="c8"
+              class="c9"
             >
               <div
-                class="c9"
+                class="c10"
               >
                 <div
-                  class="c10"
+                  class="c11"
                 >
                   <div
-                    class="c11"
+                    class="c12"
                   >
                     <h2
-                      class="c4 c12"
+                      class="c5 c13"
                     >
                       Configuration
                     </h2>
                     <span
-                      class="c4 c13"
+                      class="c5 c14"
                     >
                       The plugin is configured through the ./config/plugins.js file, checkout this 
                       <a
-                        class="c14"
+                        class="c15"
                         href="https://docs.strapi.io/developer-docs/latest/plugins/email.html"
                         rel="noopener noreferrer"
                         target="_blank"
@@ -669,38 +650,42 @@ describe('Email | Pages | Settings', () => {
                     </span>
                   </div>
                   <div
-                    class="c15"
+                    class="c16"
                   >
                     <div
-                      class="c16"
+                      class="c17"
                     >
                       <div
                         class=""
                       >
                         <div>
-                          <div>
+                          <div
+                            class=""
+                          >
                             <div
-                              class="c17 c18"
+                              class="c12"
                             >
                               <label
-                                class="c4 c19"
+                                class="c5 c18"
                                 for="7"
                               >
                                 <div
-                                  class="c3"
+                                  class="c4"
                                 >
                                   Default sender email
                                 </div>
                               </label>
                               <div
-                                class="c2 c20"
+                                class="c2 c19"
                                 disabled=""
                               >
                                 <input
                                   aria-disabled="true"
                                   aria-invalid="false"
                                   aria-required="false"
-                                  class="c21"
+                                  class="c20"
+                                  data-disabled=""
+                                  disabled=""
                                   id="7"
                                   name="shipper-email"
                                   placeholder="ex: Strapi No-Reply <no-reply@strapi.io>"
@@ -713,35 +698,39 @@ describe('Email | Pages | Settings', () => {
                       </div>
                     </div>
                     <div
-                      class="c16"
+                      class="c17"
                     >
                       <div
                         class=""
                       >
                         <div>
-                          <div>
+                          <div
+                            class=""
+                          >
                             <div
-                              class="c17 c18"
+                              class="c12"
                             >
                               <label
-                                class="c4 c19"
+                                class="c5 c18"
                                 for="9"
                               >
                                 <div
-                                  class="c3"
+                                  class="c4"
                                 >
                                   Default response email
                                 </div>
                               </label>
                               <div
-                                class="c2 c20"
+                                class="c2 c19"
                                 disabled=""
                               >
                                 <input
                                   aria-disabled="true"
                                   aria-invalid="false"
                                   aria-required="false"
-                                  class="c21"
+                                  class="c20"
+                                  data-disabled=""
+                                  disabled=""
                                   id="9"
                                   name="response-email"
                                   placeholder="ex: Strapi <example@strapi.io>"
@@ -754,27 +743,29 @@ describe('Email | Pages | Settings', () => {
                       </div>
                     </div>
                     <div
-                      class="c16"
+                      class="c17"
                     >
                       <div
                         class=""
                       >
-                        <div>
+                        <div
+                          class=""
+                        >
                           <div
-                            class="c17 c18"
+                            class="c12"
                           >
                             <label
-                              class="c4 c19"
+                              class="c5 c18"
                               for="11"
                             >
                               <div
-                                class="c3"
+                                class="c4"
                               >
                                 Email provider
                               </div>
                             </label>
                             <div
-                              class="c3 c22"
+                              class="c4 c21"
                               disabled=""
                             >
                               <button
@@ -782,22 +773,22 @@ describe('Email | Pages | Settings', () => {
                                 aria-expanded="false"
                                 aria-haspopup="listbox"
                                 aria-labelledby="11 11-label 11-content"
-                                class="c23"
+                                class="c22"
                                 id="11"
                                 name="email-provider"
                                 type="button"
                               />
                               <div
-                                class="c2 c24"
+                                class="c2 c23"
                               >
                                 <div
-                                  class="c3"
+                                  class="c4"
                                 >
                                   <div
-                                    class="c25"
+                                    class="c24"
                                   >
                                     <span
-                                      class="c4 c26"
+                                      class="c5 c25"
                                       id="11-content"
                                     >
                                       Select...
@@ -805,12 +796,12 @@ describe('Email | Pages | Settings', () => {
                                   </div>
                                 </div>
                                 <div
-                                  class="c3"
+                                  class="c4"
                                 >
                                   
                                   <button
                                     aria-hidden="true"
-                                    class="c27 c28 c29"
+                                    class="c26 c27 c28"
                                     disabled=""
                                     tabindex="-1"
                                     title="Carret Down Button"
@@ -842,48 +833,50 @@ describe('Email | Pages | Settings', () => {
                 </div>
               </div>
               <div
-                class="c9"
+                class="c10"
               >
                 <div
-                  class="c10"
+                  class="c11"
                 >
                   <h2
-                    class="c4 c12"
+                    class="c5 c13"
                   >
                     Test email delivery
                   </h2>
                   <div
-                    class="c15"
+                    class="c16"
                   >
                     <div
-                      class="c16"
+                      class="c17"
                     >
                       <div
                         class=""
                       >
                         <div>
-                          <div>
+                          <div
+                            class=""
+                          >
                             <div
-                              class="c17 c18"
+                              class="c12"
                             >
                               <label
-                                class="c4 c19"
+                                class="c5 c18"
                                 for="test-address-input"
                               >
                                 <div
-                                  class="c3"
+                                  class="c4"
                                 >
                                   Recipient email
                                 </div>
                               </label>
                               <div
-                                class="c2 c30"
+                                class="c2 c29"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
                                   aria-required="false"
-                                  class="c31"
+                                  class="c30"
                                   id="test-address-input"
                                   name="test-address"
                                   placeholder="ex: developer@example.com"
@@ -896,14 +889,14 @@ describe('Email | Pages | Settings', () => {
                       </div>
                     </div>
                     <div
-                      class="c32"
+                      class="c31"
                     >
                       <div
                         class=""
                       >
                         <button
                           aria-disabled="true"
-                          class="c33 c34 c35 c36"
+                          class="c32 c33 c34 c35"
                           disabled=""
                           type="submit"
                         >
@@ -933,7 +926,7 @@ describe('Email | Pages | Settings', () => {
                             </svg>
                           </div>
                           <span
-                            class="c4 c37"
+                            class="c5 c36"
                           >
                             Send test email
                           </span>
diff --git a/packages/core/email/package.json b/packages/core/email/package.json
index d9efaf60cd..0a21c9eed9 100644
--- a/packages/core/email/package.json
+++ b/packages/core/email/package.json
@@ -26,8 +26,8 @@
     "test:front:watch:ce": "cross-env IS_EE=false jest --config ./jest.config.front.js --watchAll"
   },
   "dependencies": {
-    "@strapi/design-system": "1.6.4",
-    "@strapi/icons": "1.6.4",
+    "@strapi/design-system": "1.6.5",
+    "@strapi/icons": "1.6.5",
     "@strapi/provider-email-sendmail": "4.7.1",
     "@strapi/utils": "4.7.1",
     "lodash": "4.17.21",
diff --git a/packages/core/helper-plugin/lib/src/components/DateTimePicker/DateTimePicker.stories.mdx b/packages/core/helper-plugin/lib/src/components/DateTimePicker/DateTimePicker.stories.mdx
index 1cdb400c9d..d14885fc05 100644
--- a/packages/core/helper-plugin/lib/src/components/DateTimePicker/DateTimePicker.stories.mdx
+++ b/packages/core/helper-plugin/lib/src/components/DateTimePicker/DateTimePicker.stories.mdx
@@ -4,20 +4,20 @@ import { useState } from 'react';
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import DateTimePicker from './index';
 
-<Meta 
-  title="components/DateTimePicker" 
+<Meta
+  title="components/DateTimePicker"
   component={DateTimePicker}
   argTypes={{
     label: {
-      control: { 
-        type: 'text'
-      }
+      control: {
+        type: 'text',
+      },
     },
     value: {
       control: {
-        type: 'date'
-      }
-    }
+        type: 'date',
+      },
+    },
   }}
 />
 
@@ -37,7 +37,7 @@ Description...
         <DateTimePicker
           onClear={() => setValue(undefined)}
           value={value}
-          onChange={e => setValue(e)}
+          onChange={(e) => setValue(e)}
           label="Date time picker"
           hint="This is a super description"
         />
@@ -53,6 +53,7 @@ Description...
 <Canvas>
   <Story name="error">
     <DateTimePicker
+      label="Date time picker"
       hint="This is a super description"
       error="Very very very very very very very long error"
     />
diff --git a/packages/core/helper-plugin/lib/src/components/DateTimePicker/tests/__snapshots__/index.test.js.snap b/packages/core/helper-plugin/lib/src/components/DateTimePicker/tests/__snapshots__/index.test.js.snap
index 16394605d0..6bdf5f02a2 100644
--- a/packages/core/helper-plugin/lib/src/components/DateTimePicker/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/helper-plugin/lib/src/components/DateTimePicker/tests/__snapshots__/index.test.js.snap
@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DateTimePicker snapshots the component 1`] = `
-.c7 {
+.c6 {
   padding-right: 8px;
   padding-left: 12px;
 }
 
-.c13 {
+.c12 {
   padding-left: 12px;
 }
 
-.c15 {
+.c14 {
   padding-right: 16px;
   padding-left: 16px;
 }
@@ -27,6 +27,21 @@ exports[`DateTimePicker snapshots the component 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
+}
+
+.c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .c3 {
@@ -41,9 +56,10 @@ exports[`DateTimePicker snapshots the component 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: 8px;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -61,14 +77,14 @@ exports[`DateTimePicker snapshots the component 1`] = `
   justify-content: space-between;
 }
 
-.c2 {
+.c1 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c16 {
+.c15 {
   font-size: 0.875rem;
   line-height: 1.43;
   display: block;
@@ -78,31 +94,13 @@ exports[`DateTimePicker snapshots the component 1`] = `
   color: #32324d;
 }
 
-.c19 {
+.c18 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #666687;
 }
 
-.c1 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c1 > * + * {
-  margin-top: 4px;
-}
-
-.c4 > * {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c4 > * + * {
-  margin-left: 8px;
-}
-
-.c9 {
+.c8 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -117,36 +115,36 @@ exports[`DateTimePicker snapshots the component 1`] = `
   background: inherit;
 }
 
-.c9::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c9::-moz-placeholder {
+.c8::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c9:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c9::placeholder {
+.c8::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c9[aria-disabled='true'] {
+.c8[aria-disabled='true'] {
   color: inherit;
 }
 
-.c9:focus {
+.c8:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c6 {
+.c5 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -158,12 +156,12 @@ exports[`DateTimePicker snapshots the component 1`] = `
   transition-duration: 0.2s;
 }
 
-.c6:focus-within {
+.c5:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c10 {
+.c9 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -179,28 +177,28 @@ exports[`DateTimePicker snapshots the component 1`] = `
   transition-duration: 0.2s;
 }
 
-.c10:focus-within {
+.c9:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c17 {
+.c16 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c17 svg {
+.c16 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c17 svg path {
+.c16 svg path {
   fill: #666687;
 }
 
-.c18 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -209,21 +207,21 @@ exports[`DateTimePicker snapshots the component 1`] = `
   border: none;
 }
 
-.c18 svg {
+.c17 svg {
   width: 0.375rem;
 }
 
-.c8 {
+.c7 {
   border: none;
   background: transparent;
   border-radius: 4px;
 }
 
-.c8 svg path {
+.c7 svg path {
   fill: #8e8ea9;
 }
 
-.c11 {
+.c10 {
   position: absolute;
   left: 0;
   right: 0;
@@ -234,19 +232,19 @@ exports[`DateTimePicker snapshots the component 1`] = `
   border: none;
 }
 
-.c11:focus {
+.c10:focus {
   outline: none;
 }
 
-.c11[aria-disabled='true'] {
+.c10[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c12 {
+.c11 {
   width: 100%;
 }
 
-.c14 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -257,53 +255,56 @@ exports[`DateTimePicker snapshots the component 1`] = `
   align-items: center;
 }
 
-.c14 svg {
+.c13 svg {
   height: 1rem;
   width: 1rem;
 }
 
-.c14 svg path {
+.c13 svg path {
   fill: #8e8ea9;
 }
 
 <div
   aria-labelledby="6"
+  class=""
   role="group"
 >
   <div
-    class="c0 c1"
+    class="c0"
   >
     <label
-      class="c2"
+      class="c1"
       for="6"
     >
       <div
-        class="c3"
+        class="c2"
       >
         Date time picker
       </div>
     </label>
     <div
-      class="c3 c4"
+      class="c3"
     >
       <div
         class=""
       >
         <div>
-          <div>
+          <div
+            class=""
+          >
             <div
-              class="c0 c1"
+              class="c0"
             >
               <div
-                class="c5 c6"
+                class="c4 c5"
               >
                 <div
-                  class="c7"
+                  class="c6"
                 >
                   <button
                     aria-disabled="false"
                     aria-label="Date picker, current is 10/13/2021"
-                    class="c8"
+                    class="c7"
                     type="button"
                   >
                     <svg
@@ -330,7 +331,7 @@ exports[`DateTimePicker snapshots the component 1`] = `
                   aria-invalid="false"
                   aria-label="Date time picker"
                   aria-required="false"
-                  class="c9"
+                  class="c8"
                   data-testid="datetimepicker-date"
                   id="6"
                   name="datetimepicker"
@@ -341,12 +342,14 @@ exports[`DateTimePicker snapshots the component 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        class=""
+      >
         <div
-          class="c0 c1"
+          class="c0"
         >
           <div
-            class="c3 c10"
+            class="c2 c9"
           >
             <button
               aria-describedby="4-hint"
@@ -355,23 +358,23 @@ exports[`DateTimePicker snapshots the component 1`] = `
               aria-haspopup="listbox"
               aria-label="Date time picker"
               aria-labelledby="4 4-label 4-content"
-              class="c11"
+              class="c10"
               data-testid="datetimepicker-time"
               id="4"
               type="button"
             />
             <div
-              class="c5 c12"
+              class="c4 c11"
             >
               <div
-                class="c3"
+                class="c2"
               >
                 <div
                   aria-hidden="true"
-                  class="c13"
+                  class="c12"
                 >
                   <div
-                    class="c14"
+                    class="c13"
                   >
                     <svg
                       fill="none"
@@ -390,10 +393,10 @@ exports[`DateTimePicker snapshots the component 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c15"
+                  class="c14"
                 >
                   <span
-                    class="c16"
+                    class="c15"
                     id="4-content"
                   >
                     10:00
@@ -401,11 +404,11 @@ exports[`DateTimePicker snapshots the component 1`] = `
                 </div>
               </div>
               <div
-                class="c3"
+                class="c2"
               >
                 <button
                   aria-hidden="true"
-                  class="c13 c17 c18"
+                  class="c12 c16 c17"
                   tabindex="-1"
                   title="select"
                   type="button"
@@ -432,7 +435,7 @@ exports[`DateTimePicker snapshots the component 1`] = `
       </div>
     </div>
     <p
-      class="c19"
+      class="c18"
       id="6-hint"
     >
       This is a super description
diff --git a/packages/core/helper-plugin/lib/src/components/FilterListURLQuery/tests/__snapshots__/index.test.js.snap b/packages/core/helper-plugin/lib/src/components/FilterListURLQuery/tests/__snapshots__/index.test.js.snap
index dcfe168914..60019e72a0 100644
--- a/packages/core/helper-plugin/lib/src/components/FilterListURLQuery/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/helper-plugin/lib/src/components/FilterListURLQuery/tests/__snapshots__/index.test.js.snap
@@ -17,11 +17,7 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   height: 2rem;
 }
 
-.c6 {
-  padding-left: 8px;
-}
-
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -33,6 +29,7 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: 8px;
 }
 
 .c4 {
@@ -42,7 +39,7 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c7 {
+.c6 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -54,18 +51,18 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c2 svg {
+.c3 > svg {
   height: 0.5rem;
   width: 0.5rem;
 }
 
-.c2 svg path {
+.c3 > svg path {
   fill: #4945ff;
 }
 
 .c5 {
-  border-right: 1px solid #d9d8ff;
   color: inherit;
+  border-right: 1px solid #d9d8ff;
   padding-right: 8px;
 }
 
@@ -75,37 +72,25 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          Boolean is true
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        Boolean is true
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -113,37 +98,25 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          Date is not Wednesday, September 1, 2021
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        Date is not Wednesday, September 1, 2021
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -151,37 +124,25 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          city is null 
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        city is null 
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -189,37 +150,25 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          country is not null 
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        country is not null 
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -227,37 +176,25 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          time contains (case sensitive) 12:45 AM
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        time contains (case sensitive) 12:45 AM
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -265,37 +202,25 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          many to one does not contain (case sensitive) test
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        many to one does not contain (case sensitive) test
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -303,37 +228,25 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          many to one is test
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        many to one is test
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -341,37 +254,25 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          city starts with paris
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        city starts with paris
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -379,37 +280,25 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          country ends with france
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        country ends with france
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -417,37 +306,25 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          number is greater than 2
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        number is greater than 2
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -455,37 +332,25 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          Float is greater than or equal to 1
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        Float is greater than or equal to 1
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -493,37 +358,25 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          Float is lower than or equal to 3
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        Float is lower than or equal to 3
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -531,41 +384,29 @@ exports[`<FilterListURLQuery /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          Float is lower than 4
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        Float is lower than 4
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
-    class="c7"
+    class="c6"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx b/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx
index 57cb9696b8..f44e62da47 100644
--- a/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx
+++ b/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx
@@ -4,6 +4,7 @@ import { useEffect, useState, useRef } from 'react';
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
 import { Button, Box, Main, Flex } from '@strapi/design-system';
 import useQueryParams from '../../hooks/useQueryParams';
+import useTracking from '../../hooks/useTracking';
 import FilterListURLQuery from '../FilterListURLQuery';
 import FilterPopoverURLQuery from './index';
 
@@ -51,6 +52,7 @@ import { FilterListURLQuery } from '@strapi/helper-plugin';
           metadatas: { label: 'city' },
         },
       ];
+      const { trackUsage } = useTracking();
       return (
         <Main>
           <Flex direction="column" alignItems="stretch" gap={6}>
diff --git a/packages/core/helper-plugin/lib/src/components/GenericInput/tests/__snapshots__/index.test.js.snap b/packages/core/helper-plugin/lib/src/components/GenericInput/tests/__snapshots__/index.test.js.snap
index e9ae848465..d126cb088b 100644
--- a/packages/core/helper-plugin/lib/src/components/GenericInput/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/helper-plugin/lib/src/components/GenericInput/tests/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`GenericInput json renders and matches the snapshot 1`] = `
-.c4 {
+.c3 {
   font-size: 0.875rem;
   border-radius: 4px;
   max-height: 31.5rem;
@@ -20,9 +20,10 @@ exports[`GenericInput json renders and matches the snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -36,7 +37,7 @@ exports[`GenericInput json renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -50,23 +51,14 @@ exports[`GenericInput json renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c2 {
+.c1 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c1 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c1 > * + * {
-  margin-top: 4px;
-}
-
-.c7 {
+.c6 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -78,17 +70,17 @@ exports[`GenericInput json renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c6 {
+.c5 {
   line-height: 1.25;
 }
 
-.c6 .cm-editor {
+.c5 .cm-editor {
   background-color: #32324d;
   width: 100%;
   outline: none;
 }
 
-.c6 .cm-scroller {
+.c5 .cm-scroller {
   border: 1px solid #dcdce4;
   outline: none;
   box-shadow: 0;
@@ -98,38 +90,40 @@ exports[`GenericInput json renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c6 .cm-scroller:focus-within {
+.c5 .cm-scroller:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c6 .cm-editor,
-.c6 .cm-scroller {
+.c5 .cm-editor,
+.c5 .cm-scroller {
   border-radius: 4px;
 }
 
-.c6 .cm-gutters,
-.c6 .cm-activeLineGutter {
+.c5 .cm-gutters,
+.c5 .cm-activeLineGutter {
   background-color: #4a4a6a;
 }
 
 <div>
-  <div>
+  <div
+    class=""
+  >
     <div
-      class="c0 c1"
+      class="c0"
     >
       <label
-        class="c2"
+        class="c1"
         for="0"
       >
         <div
-          class="c3"
+          class="c2"
         >
           Default label
         </div>
       </label>
       <div
-        class="c4 c5 c6"
+        class="c3 c4 c5"
         font-size="2"
       >
         <div
@@ -218,7 +212,7 @@ exports[`GenericInput json renders and matches the snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c7"
+    class="c6"
   >
     <p
       aria-live="polite"
@@ -243,12 +237,12 @@ exports[`GenericInput json renders and matches the snapshot 1`] = `
 `;
 
 exports[`GenericInput number renders and matches the snapshot 1`] = `
-.c9 {
+.c8 {
   padding-right: 12px;
   padding-left: 8px;
 }
 
-.c11 {
+.c10 {
   color: #8e8ea9;
 }
 
@@ -264,9 +258,10 @@ exports[`GenericInput number renders and matches the snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -280,7 +275,7 @@ exports[`GenericInput number renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -298,33 +293,24 @@ exports[`GenericInput number renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c2 {
+.c1 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c4 {
+.c3 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #d02b20;
 }
 
-.c12 path {
+.c11 path {
   fill: #8e8ea9;
 }
 
-.c1 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c1 > * + * {
-  margin-top: 4px;
-}
-
-.c14 {
+.c13 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -336,11 +322,11 @@ exports[`GenericInput number renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c5 {
+.c4 {
   line-height: 0;
 }
 
-.c8 {
+.c7 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -355,36 +341,36 @@ exports[`GenericInput number renders and matches the snapshot 1`] = `
   background: inherit;
 }
 
-.c8::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c8::-moz-placeholder {
+.c7::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c8:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c8::placeholder {
+.c7::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c8[aria-disabled='true'] {
+.c7[aria-disabled='true'] {
   color: inherit;
 }
 
-.c8:focus {
+.c7:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -396,12 +382,12 @@ exports[`GenericInput number renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c7:focus-within {
+.c6:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c10 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -416,7 +402,7 @@ exports[`GenericInput number renders and matches the snapshot 1`] = `
   transform: translateY(-2px);
 }
 
-.c10 svg {
+.c9 svg {
   display: block;
   height: 0.25rem;
   -webkit-transform: rotateX(180deg);
@@ -424,7 +410,7 @@ exports[`GenericInput number renders and matches the snapshot 1`] = `
   transform: rotateX(180deg);
 }
 
-.c13 {
+.c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -439,39 +425,41 @@ exports[`GenericInput number renders and matches the snapshot 1`] = `
   transform: translateY(2px);
 }
 
-.c13 svg {
+.c12 svg {
   display: block;
   height: 0.25rem;
 }
 
 <div>
-  <div>
+  <div
+    class=""
+  >
     <div
-      class="c0 c1"
+      class="c0"
     >
       <label
-        class="c2"
+        class="c1"
         for="number"
       >
         <div
-          class="c3"
+          class="c2"
         >
           Default label
           <span
-            class="c4 c5"
+            class="c3 c4"
           >
             *
           </span>
         </div>
       </label>
       <div
-        class="c6 c7"
+        class="c5 c6"
       >
         <input
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          class="c8"
+          class="c7"
           id="number"
           name="number"
           placeholder="Default placeholder"
@@ -479,17 +467,17 @@ exports[`GenericInput number renders and matches the snapshot 1`] = `
           value=""
         />
         <div
-          class="c9"
+          class="c8"
         >
           <button
             aria-hidden="true"
-            class="c10"
+            class="c9"
             data-testid="ArrowUp"
             tabindex="-1"
             type="button"
           >
             <svg
-              class="c11 c12"
+              class="c10 c11"
               fill="none"
               height="1rem"
               viewBox="0 0 14 8"
@@ -506,13 +494,13 @@ exports[`GenericInput number renders and matches the snapshot 1`] = `
           </button>
           <button
             aria-hidden="true"
-            class="c13"
+            class="c12"
             data-testid="ArrowDown"
             tabindex="-1"
             type="button"
           >
             <svg
-              class="c11 c12"
+              class="c10 c11"
               fill="none"
               height="1rem"
               viewBox="0 0 14 8"
@@ -532,7 +520,7 @@ exports[`GenericInput number renders and matches the snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c14"
+    class="c13"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/helper-plugin/lib/src/components/NotAllowedInput/tests/index.test.js b/packages/core/helper-plugin/lib/src/components/NotAllowedInput/tests/index.test.js
index 929492081b..986b0c0048 100644
--- a/packages/core/helper-plugin/lib/src/components/NotAllowedInput/tests/index.test.js
+++ b/packages/core/helper-plugin/lib/src/components/NotAllowedInput/tests/index.test.js
@@ -27,7 +27,7 @@ describe('<NotAllowedInput />', () => {
     );
 
     expect(firstChild).toMatchInlineSnapshot(`
-      .c6 {
+      .c5 {
         padding-right: 8px;
         padding-left: 12px;
       }
@@ -44,9 +44,10 @@ describe('<NotAllowedInput />', () => {
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
+        gap: 4px;
       }
 
-      .c3 {
+      .c2 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -60,7 +61,7 @@ describe('<NotAllowedInput />', () => {
         flex-direction: row;
       }
 
-      .c4 {
+      .c3 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -78,23 +79,14 @@ describe('<NotAllowedInput />', () => {
         justify-content: space-between;
       }
 
-      .c2 {
+      .c1 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #32324d;
       }
 
-      .c1 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c1 > * + * {
-        margin-top: 4px;
-      }
-
-      .c8 {
+      .c7 {
         border: none;
         border-radius: 4px;
         padding-bottom: 0.65625rem;
@@ -110,36 +102,36 @@ describe('<NotAllowedInput />', () => {
         background: inherit;
       }
 
-      .c8::-webkit-input-placeholder {
+      .c7::-webkit-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c8::-moz-placeholder {
+      .c7::-moz-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c8:-ms-input-placeholder {
+      .c7:-ms-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c8::placeholder {
+      .c7::placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c8[aria-disabled='true'] {
+      .c7[aria-disabled='true'] {
         color: inherit;
       }
 
-      .c8:focus {
+      .c7:focus {
         outline: none;
         box-shadow: none;
       }
 
-      .c5 {
+      .c4 {
         border: 1px solid #dcdce4;
         border-radius: 4px;
         background: #ffffff;
@@ -153,39 +145,41 @@ describe('<NotAllowedInput />', () => {
         background: #eaeaef;
       }
 
-      .c5:focus-within {
+      .c4:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c7 > path {
+      .c6 > path {
         fill: #666687;
       }
 
       <div>
-        <div>
+        <div
+          class=""
+        >
           <div
-            class="c0 c1"
+            class="c0"
           >
             <label
-              class="c2"
+              class="c1"
               for="test"
             >
               <div
-                class="c3"
+                class="c2"
               >
                 test
               </div>
             </label>
             <div
-              class="c4 c5"
+              class="c3 c4"
               disabled=""
             >
               <div
-                class="c6"
+                class="c5"
               >
                 <svg
-                  class="c7"
+                  class="c6"
                   fill="none"
                   height="1rem"
                   viewBox="0 0 24 24"
@@ -202,7 +196,9 @@ describe('<NotAllowedInput />', () => {
                 aria-disabled="true"
                 aria-invalid="false"
                 aria-required="false"
-                class="c8"
+                class="c7"
+                data-disabled=""
+                disabled=""
                 id="test"
                 name="test"
                 placeholder="No permissions to see this field"
diff --git a/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/tests/index.test.js b/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/tests/index.test.js
index 0a2983f186..71abc5308a 100644
--- a/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/tests/index.test.js
+++ b/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/tests/index.test.js
@@ -39,16 +39,16 @@ describe('<PageSizeURLQuery />', () => {
     } = render(makeApp(history));
 
     expect(firstChild).toMatchInlineSnapshot(`
-      .c7 {
+      .c6 {
         padding-right: 16px;
         padding-left: 16px;
       }
 
-      .c9 {
+      .c8 {
         padding-left: 12px;
       }
 
-      .c12 {
+      .c11 {
         padding-left: 8px;
       }
 
@@ -80,7 +80,7 @@ describe('<PageSizeURLQuery />', () => {
         flex-direction: column;
       }
 
-      .c5 {
+      .c4 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -98,7 +98,7 @@ describe('<PageSizeURLQuery />', () => {
         justify-content: space-between;
       }
 
-      .c8 {
+      .c7 {
         font-size: 0.875rem;
         line-height: 1.43;
         display: block;
@@ -108,18 +108,13 @@ describe('<PageSizeURLQuery />', () => {
         color: #32324d;
       }
 
-      .c13 {
+      .c12 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #666687;
       }
 
-      .c2 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c3 {
+      .c2 {
         position: relative;
         border: 1px solid #dcdce4;
         padding-right: 12px;
@@ -135,28 +130,28 @@ describe('<PageSizeURLQuery />', () => {
         transition-duration: 0.2s;
       }
 
-      .c3:focus-within {
+      .c2:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c10 {
+      .c9 {
         background: transparent;
         border: none;
         position: relative;
         z-index: 1;
       }
 
-      .c10 svg {
+      .c9 svg {
         height: 0.6875rem;
         width: 0.6875rem;
       }
 
-      .c10 svg path {
+      .c9 svg path {
         fill: #666687;
       }
 
-      .c11 {
+      .c10 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -165,11 +160,11 @@ describe('<PageSizeURLQuery />', () => {
         border: none;
       }
 
-      .c11 svg {
+      .c10 svg {
         width: 0.375rem;
       }
 
-      .c4 {
+      .c3 {
         position: absolute;
         left: 0;
         right: 0;
@@ -180,27 +175,29 @@ describe('<PageSizeURLQuery />', () => {
         border: none;
       }
 
-      .c4:focus {
+      .c3:focus {
         outline: none;
       }
 
-      .c4[aria-disabled='true'] {
+      .c3[aria-disabled='true'] {
         cursor: not-allowed;
       }
 
-      .c6 {
+      .c5 {
         width: 100%;
       }
 
       <div
         class="c0"
       >
-        <div>
+        <div
+          class=""
+        >
           <div
-            class="c1 c2"
+            class="c1"
           >
             <div
-              class="c0 c3"
+              class="c0 c2"
             >
               <button
                 aria-disabled="false"
@@ -208,21 +205,21 @@ describe('<PageSizeURLQuery />', () => {
                 aria-haspopup="listbox"
                 aria-label="Entries per page"
                 aria-labelledby="1 1-label 1-content"
-                class="c4"
+                class="c3"
                 id="1"
                 type="button"
               />
               <div
-                class="c5 c6"
+                class="c4 c5"
               >
                 <div
                   class="c0"
                 >
                   <div
-                    class="c7"
+                    class="c6"
                   >
                     <span
-                      class="c8"
+                      class="c7"
                       id="1-content"
                     >
                       10
@@ -234,7 +231,7 @@ describe('<PageSizeURLQuery />', () => {
                 >
                   <button
                     aria-hidden="true"
-                    class="c9 c10 c11"
+                    class="c8 c9 c10"
                     tabindex="-1"
                     title="Carret Down Button"
                     type="button"
@@ -260,10 +257,10 @@ describe('<PageSizeURLQuery />', () => {
           </div>
         </div>
         <div
-          class="c12"
+          class="c11"
         >
           <label
-            class="c13"
+            class="c12"
             for="page-size"
           >
             Entries per page
diff --git a/packages/core/helper-plugin/lib/src/components/SearchURLQuery/tests/index.test.js b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/tests/index.test.js
index e2d33d5b1e..1f986fc619 100644
--- a/packages/core/helper-plugin/lib/src/components/SearchURLQuery/tests/index.test.js
+++ b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/tests/index.test.js
@@ -372,7 +372,9 @@ describe('<SearchURLQuery />', () => {
             <div
               class="c0"
             >
-              <div>
+              <div
+                class=""
+              >
                 <div
                   class="c1"
                 >
@@ -469,7 +471,7 @@ describe('<SearchURLQuery />', () => {
 
   it('should clear value and update query params', async () => {
     const history = createMemoryHistory();
-    const { container } = render(makeApp(history));
+    const { container, getByText } = render(makeApp(history));
 
     fireEvent.click(container.querySelector('button[type="button"]'));
 
@@ -480,7 +482,7 @@ describe('<SearchURLQuery />', () => {
     const urlSearchQuery = history.location.search;
     expect(urlSearchQuery).toEqual('?_q=michka&page=1');
 
-    fireEvent.click(container.querySelector('button[aria-label="Clear"]'));
+    fireEvent.click(getByText('Clear'));
 
     expect(input.value).toEqual('');
 
diff --git a/packages/core/helper-plugin/package.json b/packages/core/helper-plugin/package.json
index 8db9f5259e..ea50cd24b7 100644
--- a/packages/core/helper-plugin/package.json
+++ b/packages/core/helper-plugin/package.json
@@ -61,8 +61,8 @@
     "@storybook/builder-webpack5": "6.5.15",
     "@storybook/manager-webpack5": "6.5.15",
     "@storybook/react": "^6.5.16",
-    "@strapi/design-system": "1.6.4",
-    "@strapi/icons": "1.6.4",
+    "@strapi/design-system": "1.6.5",
+    "@strapi/icons": "1.6.5",
     "@testing-library/react": "12.1.4",
     "@testing-library/react-hooks": "8.0.1",
     "browserslist-to-esbuild": "1.2.0",
@@ -81,8 +81,8 @@
     "webpack-cli": "^5.0.1"
   },
   "peerDependencies": {
-    "@strapi/design-system": "1.6.4",
-    "@strapi/icons": "1.6.4",
+    "@strapi/design-system": "1.6.5",
+    "@strapi/icons": "1.6.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "5.3.4",
diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
index bdb6e267de..8b78cb77fb 100644
--- a/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
+++ b/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
@@ -177,15 +177,6 @@ describe('DocAssetCard', () => {
         color: #666687;
       }
 
-      .c7 > * {
-        margin-left: 0;
-        margin-right: 0;
-      }
-
-      .c7 > * + * {
-        margin-left: 8px;
-      }
-
       .c32 {
         border-radius: 4px;
         height: 1.5rem;
@@ -320,6 +311,15 @@ describe('DocAssetCard', () => {
         width: 1px;
       }
 
+      .c7 > * {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .c7 > * + * {
+        margin-left: 8px;
+      }
+
       .c8 {
         position: absolute;
         top: 12px;
diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
index 866814104b..f6cd9af1e3 100644
--- a/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
+++ b/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
@@ -175,15 +175,6 @@ describe('ImageAssetCard', () => {
         color: #666687;
       }
 
-      .c7 > * {
-        margin-left: 0;
-        margin-right: 0;
-      }
-
-      .c7 > * + * {
-        margin-left: 8px;
-      }
-
       .c31 {
         border-radius: 4px;
         height: 1.5rem;
@@ -318,6 +309,15 @@ describe('ImageAssetCard', () => {
         width: 1px;
       }
 
+      .c7 > * {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .c7 > * + * {
+        margin-left: 8px;
+      }
+
       .c8 {
         position: absolute;
         top: 12px;
diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
index aab2676559..b59a3ec2bb 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
@@ -87,16 +87,16 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   padding-top: 16px;
 }
 
-.c61 {
+.c60 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c63 {
+.c62 {
   padding-left: 12px;
 }
 
-.c66 {
+.c65 {
   padding-left: 8px;
 }
 
@@ -278,7 +278,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   color: #666687;
 }
 
-.c62 {
+.c61 {
   font-size: 0.875rem;
   line-height: 1.43;
   display: block;
@@ -288,33 +288,19 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   color: #32324d;
 }
 
-.c67 {
+.c66 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #666687;
 }
 
-.c73 {
+.c72 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c57 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c52 > * {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c52 > * + * {
-  margin-left: 8px;
-}
-
 .c6 {
   position: relative;
   outline: none;
@@ -425,12 +411,21 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   fill: #32324d;
 }
 
+.c52 > * {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.c52 > * + * {
+  margin-left: 8px;
+}
+
 .c53 {
   position: absolute;
   top: 12px;
 }
 
-.c58 {
+.c57 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -446,28 +441,28 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c58:focus-within {
+.c57:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c64 {
+.c63 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c64 svg {
+.c63 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c64 svg path {
+.c63 svg path {
   fill: #666687;
 }
 
-.c65 {
+.c64 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -476,7 +471,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: none;
 }
 
-.c65 svg {
+.c64 svg {
   width: 0.375rem;
 }
 
@@ -496,7 +491,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 6px;
 }
 
-.c59 {
+.c58 {
   position: absolute;
   left: 0;
   right: 0;
@@ -507,15 +502,15 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: none;
 }
 
-.c59:focus {
+.c58:focus {
   outline: none;
 }
 
-.c59[aria-disabled='true'] {
+.c58[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c60 {
+.c59 {
   width: 100%;
 }
 
@@ -661,15 +656,15 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   outline-offset: -2px;
 }
 
-.c68 > * + * {
+.c67 > * + * {
   margin-left: 4px;
 }
 
-.c74 {
+.c73 {
   line-height: revert;
 }
 
-.c69 {
+.c68 {
   padding: 12px;
   border-radius: 4px;
   -webkit-text-decoration: none;
@@ -682,7 +677,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   outline: none;
 }
 
-.c69:after {
+.c68:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -697,11 +692,55 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c69:focus-visible {
+.c68:focus-visible {
   outline: none;
 }
 
-.c69:focus-visible:after {
+.c68:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
+.c70 {
+  padding: 12px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  outline: none;
+}
+
+.c70:after {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border: 2px solid transparent;
+}
+
+.c70:focus-visible {
+  outline: none;
+}
+
+.c70:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -713,69 +752,25 @@ exports[`BrowseStep renders and match snapshot 1`] = `
 }
 
 .c71 {
-  padding: 12px;
-  border-radius: 4px;
-  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  outline: none;
-}
-
-.c71:after {
-  -webkit-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -4px;
-  bottom: -4px;
-  left: -4px;
-  right: -4px;
-  border: 2px solid transparent;
-}
-
-.c71:focus-visible {
-  outline: none;
-}
-
-.c71:focus-visible:after {
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -5px;
-  bottom: -5px;
-  left: -5px;
-  right: -5px;
-  border: 2px solid #4945ff;
-}
-
-.c72 {
   color: #271fe0;
   background: #ffffff;
 }
 
-.c72:hover {
+.c71:hover {
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c70 {
+.c69 {
   font-size: 0.7rem;
   pointer-events: none;
 }
 
-.c70 svg path {
+.c69 svg path {
   fill: #c0c0cf;
 }
 
-.c70:focus svg path,
-.c70:hover svg path {
+.c69:focus svg path,
+.c69:hover svg path {
   fill: #c0c0cf;
 }
 
@@ -1169,12 +1164,14 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       <div
         class="c10"
       >
-        <div>
+        <div
+          class=""
+        >
           <div
-            class="c56 c57"
+            class="c56"
           >
             <div
-              class="c10 c58"
+              class="c10 c57"
             >
               <button
                 aria-disabled="false"
@@ -1182,21 +1179,21 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                 aria-haspopup="listbox"
                 aria-label="Entries per page"
                 aria-labelledby="4 4-label 4-content"
-                class="c59"
+                class="c58"
                 id="4"
                 type="button"
               />
               <div
-                class="c55 c60"
+                class="c55 c59"
               >
                 <div
                   class="c10"
                 >
                   <div
-                    class="c61"
+                    class="c60"
                   >
                     <span
-                      class="c8 c62"
+                      class="c8 c61"
                       id="4-content"
                     >
                       10
@@ -1208,7 +1205,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                 >
                   <button
                     aria-hidden="true"
-                    class="c63 c64 c65"
+                    class="c62 c63 c64"
                     tabindex="-1"
                     title="Carret Down Button"
                     type="button"
@@ -1234,10 +1231,10 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="c66"
+          class="c65"
         >
           <label
-            class="c8 c67"
+            class="c8 c66"
             for="page-size"
           >
             Entries per page
@@ -1249,12 +1246,12 @@ exports[`BrowseStep renders and match snapshot 1`] = `
         class=""
       >
         <ul
-          class="c10 c68"
+          class="c10 c67"
         >
           <li>
             <button
               aria-disabled="true"
-              class="c69 c70"
+              class="c68 c69"
               tabindex="-1"
               type="button"
             >
@@ -1280,7 +1277,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           </li>
           <li>
             <button
-              class="c71 c72"
+              class="c70 c71"
               type="button"
             >
               <div
@@ -1290,7 +1287,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
               </div>
               <span
                 aria-hidden="true"
-                class="c8 c73 c74"
+                class="c8 c72 c73"
               >
                 1
               </span>
@@ -1299,7 +1296,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           <li>
             <button
               aria-disabled="true"
-              class="c69 c70"
+              class="c68 c69"
               tabindex="-1"
               type="button"
             >
diff --git a/packages/core/upload/admin/src/components/AssetGridList/tests/__snapshots__/AssetGridList.test.js.snap b/packages/core/upload/admin/src/components/AssetGridList/tests/__snapshots__/AssetGridList.test.js.snap
index cabcc83be6..65cd6ef1a1 100644
--- a/packages/core/upload/admin/src/components/AssetGridList/tests/__snapshots__/AssetGridList.test.js.snap
+++ b/packages/core/upload/admin/src/components/AssetGridList/tests/__snapshots__/AssetGridList.test.js.snap
@@ -155,15 +155,6 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   color: #ffffff;
 }
 
-.c10 > * {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c10 > * + * {
-  margin-left: 8px;
-}
-
 .c26 {
   border-radius: 4px;
   height: 1.5rem;
@@ -249,6 +240,15 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   width: 1px;
 }
 
+.c10 > * {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.c10 > * + * {
+  margin-left: 8px;
+}
+
 .c11 {
   position: absolute;
   top: 12px;
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
index b9de55bf7e..d4d524ee40 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
@@ -62,11 +62,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c38 {
+.c36 {
   padding-right: 12px;
 }
 
-.c43 {
+.c41 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -77,7 +77,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   cursor: pointer;
 }
 
-.c49 {
+.c47 {
   background: #212134;
   padding: 8px;
   border-radius: 4px;
@@ -183,21 +183,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   gap: 4px;
 }
 
-.c31 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c34 {
+.c32 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -211,7 +197,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c44 {
+.c42 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -247,35 +233,26 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   color: #4a4a6a;
 }
 
-.c33 {
+.c31 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c37 {
+.c35 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #666687;
 }
 
-.c46 {
+.c44 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c32 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c32 > * + * {
-  margin-top: 4px;
-}
-
 .c12 {
   position: relative;
   outline: none;
@@ -337,12 +314,61 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c45 {
+.c43 {
   height: 2rem;
   border: 1px solid #dcdce4;
   background: #ffffff;
 }
 
+.c43[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c43[aria-disabled='true'] .c9 {
+  color: #666687;
+}
+
+.c43[aria-disabled='true'] svg > g,.c43[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c43[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c43[aria-disabled='true']:active .c9 {
+  color: #666687;
+}
+
+.c43[aria-disabled='true']:active svg > g,.c43[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c43:hover {
+  background-color: #f6f6f9;
+}
+
+.c43:active {
+  background-color: #eaeaef;
+}
+
+.c43 .c9 {
+  color: #32324d;
+}
+
+.c43 svg > g,
+.c43 svg path {
+  fill: #32324d;
+}
+
+.c45 {
+  height: 2rem;
+  border: 1px solid #d9d8ff;
+  background: #f0f0ff;
+}
+
 .c45[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
@@ -370,132 +396,83 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
 }
 
 .c45:hover {
-  background-color: #f6f6f9;
+  background-color: #ffffff;
 }
 
 .c45:active {
-  background-color: #eaeaef;
+  background-color: #ffffff;
+  border: 1px solid #4945ff;
+}
+
+.c45:active .c9 {
+  color: #4945ff;
+}
+
+.c45:active svg > g,
+.c45:active svg path {
+  fill: #4945ff;
 }
 
 .c45 .c9 {
-  color: #32324d;
+  color: #271fe0;
 }
 
 .c45 svg > g,
 .c45 svg path {
-  fill: #32324d;
-}
-
-.c47 {
-  height: 2rem;
-  border: 1px solid #d9d8ff;
-  background: #f0f0ff;
-}
-
-.c47[aria-disabled='true'] {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c47[aria-disabled='true'] .c9 {
-  color: #666687;
-}
-
-.c47[aria-disabled='true'] svg > g,.c47[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c47[aria-disabled='true']:active {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c47[aria-disabled='true']:active .c9 {
-  color: #666687;
-}
-
-.c47[aria-disabled='true']:active svg > g,.c47[aria-disabled='true']:active svg path {
-  fill: #666687;
-}
-
-.c47:hover {
-  background-color: #ffffff;
-}
-
-.c47:active {
-  background-color: #ffffff;
-  border: 1px solid #4945ff;
-}
-
-.c47:active .c9 {
-  color: #4945ff;
-}
-
-.c47:active svg > g,
-.c47:active svg path {
-  fill: #4945ff;
-}
-
-.c47 .c9 {
-  color: #271fe0;
-}
-
-.c47 svg > g,
-.c47 svg path {
   fill: #271fe0;
 }
 
-.c48 {
+.c46 {
   height: 2rem;
 }
 
-.c48[aria-disabled='true'] {
+.c46[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c48[aria-disabled='true'] .c9 {
+.c46[aria-disabled='true'] .c9 {
   color: #666687;
 }
 
-.c48[aria-disabled='true'] svg > g,.c48[aria-disabled='true'] svg path {
+.c46[aria-disabled='true'] svg > g,.c46[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c48[aria-disabled='true']:active {
+.c46[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c48[aria-disabled='true']:active .c9 {
+.c46[aria-disabled='true']:active .c9 {
   color: #666687;
 }
 
-.c48[aria-disabled='true']:active svg > g,.c48[aria-disabled='true']:active svg path {
+.c46[aria-disabled='true']:active svg > g,.c46[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c48:hover {
+.c46:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c48:active {
+.c46:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c48 svg > g,
-.c48 svg path {
+.c46 svg > g,
+.c46 svg path {
   fill: #ffffff;
 }
 
-.c50 {
+.c48 {
   z-index: 4;
   display: none;
 }
 
-.c36 {
+.c34 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -510,36 +487,36 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: inherit;
 }
 
-.c36::-webkit-input-placeholder {
+.c34::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c36::-moz-placeholder {
+.c34::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c36:-ms-input-placeholder {
+.c34:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c36::placeholder {
+.c34::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c36[aria-disabled='true'] {
+.c34[aria-disabled='true'] {
   color: inherit;
 }
 
-.c36:focus {
+.c34:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c35 {
+.c33 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -551,7 +528,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c35:focus-within {
+.c33:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
@@ -600,12 +577,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c41 {
+.c39 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c42 > * + * {
+.c40 > * + * {
   margin-left: 8px;
 }
 
@@ -614,23 +591,23 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   max-height: 60vh;
 }
 
-.c39 {
+.c37 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c39 svg {
+.c37 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c39 svg path {
+.c37 svg path {
   fill: #666687;
 }
 
-.c40 {
+.c38 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -639,7 +616,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c40 svg {
+.c38 svg {
   width: 0.5625rem;
 }
 
@@ -1053,28 +1030,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                           </div>
                         </div>
                         <div>
-                          <div>
+                          <div
+                            class=""
+                          >
                             <div
-                              class="c31 c32"
+                              class="c28"
                             >
                               <label
-                                class="c9 c33"
+                                class="c9 c31"
                                 for="5"
                               >
                                 <div
-                                  class="c34"
+                                  class="c32"
                                 >
                                   File name
                                 </div>
                               </label>
                               <div
-                                class="c8 c35"
+                                class="c8 c33"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
                                   aria-required="false"
-                                  class="c36"
+                                  class="c34"
                                   id="5"
                                   name="name"
                                   value="Screenshot 2.png"
@@ -1084,36 +1063,38 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                           </div>
                         </div>
                         <div>
-                          <div>
+                          <div
+                            class=""
+                          >
                             <div
-                              class="c31 c32"
+                              class="c28"
                             >
                               <label
-                                class="c9 c33"
+                                class="c9 c31"
                                 for="7"
                               >
                                 <div
-                                  class="c34"
+                                  class="c32"
                                 >
                                   Alternative text
                                 </div>
                               </label>
                               <div
-                                class="c8 c35"
+                                class="c8 c33"
                               >
                                 <input
                                   aria-describedby="7-hint"
                                   aria-disabled="false"
                                   aria-invalid="false"
                                   aria-required="false"
-                                  class="c36"
+                                  class="c34"
                                   id="7"
                                   name="alternativeText"
                                   value=""
                                 />
                               </div>
                               <p
-                                class="c9 c37"
+                                class="c9 c35"
                                 id="7-hint"
                               >
                                 This text will be displayed if the asset can’t be shown.
@@ -1122,28 +1103,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                           </div>
                         </div>
                         <div>
-                          <div>
+                          <div
+                            class=""
+                          >
                             <div
-                              class="c31 c32"
+                              class="c28"
                             >
                               <label
-                                class="c9 c33"
+                                class="c9 c31"
                                 for="9"
                               >
                                 <div
-                                  class="c34"
+                                  class="c32"
                                 >
                                   Caption
                                 </div>
                               </label>
                               <div
-                                class="c8 c35"
+                                class="c8 c33"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
                                   aria-required="false"
-                                  class="c36"
+                                  class="c34"
                                   id="9"
                                   name="caption"
                                   value=""
@@ -1156,11 +1139,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                           class="c28"
                         >
                           <label
-                            class="c9 c33"
+                            class="c9 c31"
                             for="asset-folder"
                           >
                             <div
-                              class="c34"
+                              class="c32"
                             >
                               Location
                             </div>
@@ -1208,7 +1191,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               >
                                 <div
                                   aria-hidden="true"
-                                  class="c38 c39 c40"
+                                  class="c36 c37 c38"
                                 >
                                   <svg
                                     fill="none"
@@ -1251,36 +1234,36 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="c6 c41"
+              class="c6 c39"
             >
               <div
                 class="c8"
               >
                 <div
-                  class="c34 c42"
+                  class="c32 c40"
                 >
                   <button
                     aria-disabled="false"
-                    class="c43 c44 c12 c45"
+                    class="c41 c42 c12 c43"
                     type="button"
                   >
                     <span
-                      class="c9 c46"
+                      class="c9 c44"
                     >
                       Cancel
                     </span>
                   </button>
                 </div>
                 <div
-                  class="c34 c42"
+                  class="c32 c40"
                 >
                   <button
                     aria-disabled="false"
-                    class="c43 c44 c12 c47"
+                    class="c41 c42 c12 c45"
                     type="button"
                   >
                     <span
-                      class="c9 c46"
+                      class="c9 c44"
                     >
                       Replace media
                     </span>
@@ -1298,11 +1281,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                   </div>
                   <button
                     aria-disabled="false"
-                    class="c43 c44 c12 c48"
+                    class="c41 c42 c12 c46"
                     type="button"
                   >
                     <span
-                      class="c9 c46"
+                      class="c9 c44"
                     >
                       Finish
                     </span>
@@ -1319,12 +1302,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c49 c50"
+      class="c47 c48"
       id="0"
       role="tooltip"
     >
       <p
-        class="c9 c46"
+        class="c9 c44"
       >
         Delete
       </p>
@@ -1334,12 +1317,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c49 c50"
+      class="c47 c48"
       id="1"
       role="tooltip"
     >
       <p
-        class="c9 c46"
+        class="c9 c44"
       >
         Download
       </p>
@@ -1349,12 +1332,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c49 c50"
+      class="c47 c48"
       id="2"
       role="tooltip"
     >
       <p
-        class="c9 c46"
+        class="c9 c44"
       >
         Copy link
       </p>
@@ -1364,12 +1347,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c49 c50"
+      class="c47 c48"
       id="3"
       role="tooltip"
     >
       <p
-        class="c9 c46"
+        class="c9 c44"
       >
         Crop
       </p>
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/RemoveAssetDialog.test.js.snap b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/RemoveAssetDialog.test.js.snap
index c1ff418915..2344390f40 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/RemoveAssetDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/RemoveAssetDialog.test.js.snap
@@ -32,7 +32,7 @@ exports[`RemoveAssetDialog snapshots the component 1`] = `
   padding: 16px;
 }
 
-.c19 {
+.c18 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -88,20 +88,6 @@ exports[`RemoveAssetDialog snapshots the component 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-}
-
-.c20 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
   gap: 8px;
 }
 
@@ -118,42 +104,33 @@ exports[`RemoveAssetDialog snapshots the component 1`] = `
   color: #32324d;
 }
 
-.c23 {
+.c21 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c18 > * {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c18 > * + * {
-  margin-left: 8px;
-}
-
-.c21 {
+.c19 {
   position: relative;
   outline: none;
 }
 
-.c21 svg {
+.c19 svg {
   height: 12px;
   width: 12px;
 }
 
-.c21 svg > g,
-.c21 svg path {
+.c19 svg > g,
+.c19 svg path {
   fill: #ffffff;
 }
 
-.c21[aria-disabled='true'] {
+.c19[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c21:after {
+.c19:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -168,11 +145,11 @@ exports[`RemoveAssetDialog snapshots the component 1`] = `
   border: 2px solid transparent;
 }
 
-.c21:focus-visible {
+.c19:focus-visible {
   outline: none;
 }
 
-.c21:focus-visible:after {
+.c19:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -195,12 +172,61 @@ exports[`RemoveAssetDialog snapshots the component 1`] = `
   width: 1px;
 }
 
-.c22 {
+.c20 {
   height: 2rem;
   border: 1px solid #dcdce4;
   background: #ffffff;
 }
 
+.c20[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c20[aria-disabled='true'] .c8 {
+  color: #666687;
+}
+
+.c20[aria-disabled='true'] svg > g,.c20[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c20[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c20[aria-disabled='true']:active .c8 {
+  color: #666687;
+}
+
+.c20[aria-disabled='true']:active svg > g,.c20[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c20:hover {
+  background-color: #f6f6f9;
+}
+
+.c20:active {
+  background-color: #eaeaef;
+}
+
+.c20 .c8 {
+  color: #32324d;
+}
+
+.c20 svg > g,
+.c20 svg path {
+  fill: #32324d;
+}
+
+.c22 {
+  height: 2rem;
+  border: 1px solid #f5c0b8;
+  background: #fcecea;
+}
+
 .c22[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
@@ -228,78 +254,29 @@ exports[`RemoveAssetDialog snapshots the component 1`] = `
 }
 
 .c22:hover {
-  background-color: #f6f6f9;
-}
-
-.c22:active {
-  background-color: #eaeaef;
-}
-
-.c22 .c8 {
-  color: #32324d;
-}
-
-.c22 svg > g,
-.c22 svg path {
-  fill: #32324d;
-}
-
-.c24 {
-  height: 2rem;
-  border: 1px solid #f5c0b8;
-  background: #fcecea;
-}
-
-.c24[aria-disabled='true'] {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c24[aria-disabled='true'] .c8 {
-  color: #666687;
-}
-
-.c24[aria-disabled='true'] svg > g,.c24[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c24[aria-disabled='true']:active {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c24[aria-disabled='true']:active .c8 {
-  color: #666687;
-}
-
-.c24[aria-disabled='true']:active svg > g,.c24[aria-disabled='true']:active svg path {
-  fill: #666687;
-}
-
-.c24:hover {
   background-color: #ffffff;
 }
 
-.c24:active {
+.c22:active {
   background-color: #ffffff;
   border: 1px solid #d02b20;
 }
 
-.c24:active .c8 {
+.c22:active .c8 {
   color: #d02b20;
 }
 
-.c24:active svg > g,
-.c24:active svg path {
+.c22:active svg > g,
+.c22:active svg path {
   fill: #d02b20;
 }
 
-.c24 .c8 {
+.c22 .c8 {
   color: #b72b1a;
 }
 
-.c24 svg > g,
-.c24 svg path {
+.c22 svg > g,
+.c22 svg path {
   fill: #b72b1a;
 }
 
@@ -440,22 +417,22 @@ exports[`RemoveAssetDialog snapshots the component 1`] = `
                 class="c15 c16"
               >
                 <div
-                  class="c17 c18"
+                  class="c17"
                 >
                   <button
                     aria-disabled="false"
-                    class="c19 c20 c21 c22"
+                    class="c18 c17 c19 c20"
                     type="button"
                   >
                     <span
-                      class="c8 c23"
+                      class="c8 c21"
                     >
                       Cancel
                     </span>
                   </button>
                   <button
                     aria-disabled="false"
-                    class="c19 c20 c21 c24"
+                    class="c18 c17 c19 c22"
                     id="confirm-delete"
                     type="button"
                   >
@@ -477,7 +454,7 @@ exports[`RemoveAssetDialog snapshots the component 1`] = `
                       </svg>
                     </div>
                     <span
-                      class="c8 c23"
+                      class="c8 c21"
                     >
                       Confirm
                     </span>
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap
index b9de55bf7e..d4d524ee40 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap
@@ -62,11 +62,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c38 {
+.c36 {
   padding-right: 12px;
 }
 
-.c43 {
+.c41 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -77,7 +77,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   cursor: pointer;
 }
 
-.c49 {
+.c47 {
   background: #212134;
   padding: 8px;
   border-radius: 4px;
@@ -183,21 +183,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   gap: 4px;
 }
 
-.c31 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c34 {
+.c32 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -211,7 +197,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c44 {
+.c42 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -247,35 +233,26 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   color: #4a4a6a;
 }
 
-.c33 {
+.c31 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c37 {
+.c35 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #666687;
 }
 
-.c46 {
+.c44 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c32 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c32 > * + * {
-  margin-top: 4px;
-}
-
 .c12 {
   position: relative;
   outline: none;
@@ -337,12 +314,61 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c45 {
+.c43 {
   height: 2rem;
   border: 1px solid #dcdce4;
   background: #ffffff;
 }
 
+.c43[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c43[aria-disabled='true'] .c9 {
+  color: #666687;
+}
+
+.c43[aria-disabled='true'] svg > g,.c43[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c43[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c43[aria-disabled='true']:active .c9 {
+  color: #666687;
+}
+
+.c43[aria-disabled='true']:active svg > g,.c43[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c43:hover {
+  background-color: #f6f6f9;
+}
+
+.c43:active {
+  background-color: #eaeaef;
+}
+
+.c43 .c9 {
+  color: #32324d;
+}
+
+.c43 svg > g,
+.c43 svg path {
+  fill: #32324d;
+}
+
+.c45 {
+  height: 2rem;
+  border: 1px solid #d9d8ff;
+  background: #f0f0ff;
+}
+
 .c45[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
@@ -370,132 +396,83 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
 }
 
 .c45:hover {
-  background-color: #f6f6f9;
+  background-color: #ffffff;
 }
 
 .c45:active {
-  background-color: #eaeaef;
+  background-color: #ffffff;
+  border: 1px solid #4945ff;
+}
+
+.c45:active .c9 {
+  color: #4945ff;
+}
+
+.c45:active svg > g,
+.c45:active svg path {
+  fill: #4945ff;
 }
 
 .c45 .c9 {
-  color: #32324d;
+  color: #271fe0;
 }
 
 .c45 svg > g,
 .c45 svg path {
-  fill: #32324d;
-}
-
-.c47 {
-  height: 2rem;
-  border: 1px solid #d9d8ff;
-  background: #f0f0ff;
-}
-
-.c47[aria-disabled='true'] {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c47[aria-disabled='true'] .c9 {
-  color: #666687;
-}
-
-.c47[aria-disabled='true'] svg > g,.c47[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c47[aria-disabled='true']:active {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c47[aria-disabled='true']:active .c9 {
-  color: #666687;
-}
-
-.c47[aria-disabled='true']:active svg > g,.c47[aria-disabled='true']:active svg path {
-  fill: #666687;
-}
-
-.c47:hover {
-  background-color: #ffffff;
-}
-
-.c47:active {
-  background-color: #ffffff;
-  border: 1px solid #4945ff;
-}
-
-.c47:active .c9 {
-  color: #4945ff;
-}
-
-.c47:active svg > g,
-.c47:active svg path {
-  fill: #4945ff;
-}
-
-.c47 .c9 {
-  color: #271fe0;
-}
-
-.c47 svg > g,
-.c47 svg path {
   fill: #271fe0;
 }
 
-.c48 {
+.c46 {
   height: 2rem;
 }
 
-.c48[aria-disabled='true'] {
+.c46[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c48[aria-disabled='true'] .c9 {
+.c46[aria-disabled='true'] .c9 {
   color: #666687;
 }
 
-.c48[aria-disabled='true'] svg > g,.c48[aria-disabled='true'] svg path {
+.c46[aria-disabled='true'] svg > g,.c46[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c48[aria-disabled='true']:active {
+.c46[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c48[aria-disabled='true']:active .c9 {
+.c46[aria-disabled='true']:active .c9 {
   color: #666687;
 }
 
-.c48[aria-disabled='true']:active svg > g,.c48[aria-disabled='true']:active svg path {
+.c46[aria-disabled='true']:active svg > g,.c46[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c48:hover {
+.c46:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c48:active {
+.c46:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c48 svg > g,
-.c48 svg path {
+.c46 svg > g,
+.c46 svg path {
   fill: #ffffff;
 }
 
-.c50 {
+.c48 {
   z-index: 4;
   display: none;
 }
 
-.c36 {
+.c34 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -510,36 +487,36 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: inherit;
 }
 
-.c36::-webkit-input-placeholder {
+.c34::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c36::-moz-placeholder {
+.c34::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c36:-ms-input-placeholder {
+.c34:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c36::placeholder {
+.c34::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c36[aria-disabled='true'] {
+.c34[aria-disabled='true'] {
   color: inherit;
 }
 
-.c36:focus {
+.c34:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c35 {
+.c33 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -551,7 +528,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c35:focus-within {
+.c33:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
@@ -600,12 +577,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c41 {
+.c39 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c42 > * + * {
+.c40 > * + * {
   margin-left: 8px;
 }
 
@@ -614,23 +591,23 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   max-height: 60vh;
 }
 
-.c39 {
+.c37 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c39 svg {
+.c37 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c39 svg path {
+.c37 svg path {
   fill: #666687;
 }
 
-.c40 {
+.c38 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -639,7 +616,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c40 svg {
+.c38 svg {
   width: 0.5625rem;
 }
 
@@ -1053,28 +1030,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                           </div>
                         </div>
                         <div>
-                          <div>
+                          <div
+                            class=""
+                          >
                             <div
-                              class="c31 c32"
+                              class="c28"
                             >
                               <label
-                                class="c9 c33"
+                                class="c9 c31"
                                 for="5"
                               >
                                 <div
-                                  class="c34"
+                                  class="c32"
                                 >
                                   File name
                                 </div>
                               </label>
                               <div
-                                class="c8 c35"
+                                class="c8 c33"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
                                   aria-required="false"
-                                  class="c36"
+                                  class="c34"
                                   id="5"
                                   name="name"
                                   value="Screenshot 2.png"
@@ -1084,36 +1063,38 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                           </div>
                         </div>
                         <div>
-                          <div>
+                          <div
+                            class=""
+                          >
                             <div
-                              class="c31 c32"
+                              class="c28"
                             >
                               <label
-                                class="c9 c33"
+                                class="c9 c31"
                                 for="7"
                               >
                                 <div
-                                  class="c34"
+                                  class="c32"
                                 >
                                   Alternative text
                                 </div>
                               </label>
                               <div
-                                class="c8 c35"
+                                class="c8 c33"
                               >
                                 <input
                                   aria-describedby="7-hint"
                                   aria-disabled="false"
                                   aria-invalid="false"
                                   aria-required="false"
-                                  class="c36"
+                                  class="c34"
                                   id="7"
                                   name="alternativeText"
                                   value=""
                                 />
                               </div>
                               <p
-                                class="c9 c37"
+                                class="c9 c35"
                                 id="7-hint"
                               >
                                 This text will be displayed if the asset can’t be shown.
@@ -1122,28 +1103,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                           </div>
                         </div>
                         <div>
-                          <div>
+                          <div
+                            class=""
+                          >
                             <div
-                              class="c31 c32"
+                              class="c28"
                             >
                               <label
-                                class="c9 c33"
+                                class="c9 c31"
                                 for="9"
                               >
                                 <div
-                                  class="c34"
+                                  class="c32"
                                 >
                                   Caption
                                 </div>
                               </label>
                               <div
-                                class="c8 c35"
+                                class="c8 c33"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
                                   aria-required="false"
-                                  class="c36"
+                                  class="c34"
                                   id="9"
                                   name="caption"
                                   value=""
@@ -1156,11 +1139,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                           class="c28"
                         >
                           <label
-                            class="c9 c33"
+                            class="c9 c31"
                             for="asset-folder"
                           >
                             <div
-                              class="c34"
+                              class="c32"
                             >
                               Location
                             </div>
@@ -1208,7 +1191,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               >
                                 <div
                                   aria-hidden="true"
-                                  class="c38 c39 c40"
+                                  class="c36 c37 c38"
                                 >
                                   <svg
                                     fill="none"
@@ -1251,36 +1234,36 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="c6 c41"
+              class="c6 c39"
             >
               <div
                 class="c8"
               >
                 <div
-                  class="c34 c42"
+                  class="c32 c40"
                 >
                   <button
                     aria-disabled="false"
-                    class="c43 c44 c12 c45"
+                    class="c41 c42 c12 c43"
                     type="button"
                   >
                     <span
-                      class="c9 c46"
+                      class="c9 c44"
                     >
                       Cancel
                     </span>
                   </button>
                 </div>
                 <div
-                  class="c34 c42"
+                  class="c32 c40"
                 >
                   <button
                     aria-disabled="false"
-                    class="c43 c44 c12 c47"
+                    class="c41 c42 c12 c45"
                     type="button"
                   >
                     <span
-                      class="c9 c46"
+                      class="c9 c44"
                     >
                       Replace media
                     </span>
@@ -1298,11 +1281,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                   </div>
                   <button
                     aria-disabled="false"
-                    class="c43 c44 c12 c48"
+                    class="c41 c42 c12 c46"
                     type="button"
                   >
                     <span
-                      class="c9 c46"
+                      class="c9 c44"
                     >
                       Finish
                     </span>
@@ -1319,12 +1302,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c49 c50"
+      class="c47 c48"
       id="0"
       role="tooltip"
     >
       <p
-        class="c9 c46"
+        class="c9 c44"
       >
         Delete
       </p>
@@ -1334,12 +1317,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c49 c50"
+      class="c47 c48"
       id="1"
       role="tooltip"
     >
       <p
-        class="c9 c46"
+        class="c9 c44"
       >
         Download
       </p>
@@ -1349,12 +1332,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c49 c50"
+      class="c47 c48"
       id="2"
       role="tooltip"
     >
       <p
-        class="c9 c46"
+        class="c9 c44"
       >
         Copy link
       </p>
@@ -1364,12 +1347,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c49 c50"
+      class="c47 c48"
       id="3"
       role="tooltip"
     >
       <p
-        class="c9 c46"
+        class="c9 c44"
       >
         Crop
       </p>
diff --git a/packages/core/upload/admin/src/components/EditFolderDialog/tests/__snapshots__/EditFolderDialog.test.js.snap b/packages/core/upload/admin/src/components/EditFolderDialog/tests/__snapshots__/EditFolderDialog.test.js.snap
index e9859e38de..725f1e8227 100644
--- a/packages/core/upload/admin/src/components/EditFolderDialog/tests/__snapshots__/EditFolderDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditFolderDialog/tests/__snapshots__/EditFolderDialog.test.js.snap
@@ -36,11 +36,11 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   padding: 32px;
 }
 
-.c25 {
+.c23 {
   padding-right: 12px;
 }
 
-.c30 {
+.c28 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -99,9 +99,10 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
-.c21 {
+.c20 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -115,22 +116,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c24 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.c31 {
+.c29 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -152,29 +138,20 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c20 {
+.c19 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c33 {
+.c31 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c19 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c19 > * + * {
-  margin-top: 4px;
-}
-
 .c12 {
   position: relative;
   outline: none;
@@ -236,12 +213,59 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c32 {
+.c30 {
   height: 2rem;
   border: 1px solid #dcdce4;
   background: #ffffff;
 }
 
+.c30[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c30[aria-disabled='true'] .c9 {
+  color: #666687;
+}
+
+.c30[aria-disabled='true'] svg > g,.c30[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c30[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c30[aria-disabled='true']:active .c9 {
+  color: #666687;
+}
+
+.c30[aria-disabled='true']:active svg > g,.c30[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c30:hover {
+  background-color: #f6f6f9;
+}
+
+.c30:active {
+  background-color: #eaeaef;
+}
+
+.c30 .c9 {
+  color: #32324d;
+}
+
+.c30 svg > g,
+.c30 svg path {
+  fill: #32324d;
+}
+
+.c32 {
+  height: 2rem;
+}
+
 .c32[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
@@ -269,68 +293,21 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
 }
 
 .c32:hover {
-  background-color: #f6f6f9;
-}
-
-.c32:active {
-  background-color: #eaeaef;
-}
-
-.c32 .c9 {
-  color: #32324d;
-}
-
-.c32 svg > g,
-.c32 svg path {
-  fill: #32324d;
-}
-
-.c34 {
-  height: 2rem;
-}
-
-.c34[aria-disabled='true'] {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c34[aria-disabled='true'] .c9 {
-  color: #666687;
-}
-
-.c34[aria-disabled='true'] svg > g,.c34[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c34[aria-disabled='true']:active {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c34[aria-disabled='true']:active .c9 {
-  color: #666687;
-}
-
-.c34[aria-disabled='true']:active svg > g,.c34[aria-disabled='true']:active svg path {
-  fill: #666687;
-}
-
-.c34:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c34:active {
+.c32:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c34 svg > g,
-.c34 svg path {
+.c32 svg > g,
+.c32 svg path {
   fill: #ffffff;
 }
 
-.c23 {
+.c22 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -345,36 +322,36 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   background: inherit;
 }
 
-.c23::-webkit-input-placeholder {
+.c22::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c23::-moz-placeholder {
+.c22::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c23:-ms-input-placeholder {
+.c22:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c23::placeholder {
+.c22::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c23[aria-disabled='true'] {
+.c22[aria-disabled='true'] {
   color: inherit;
 }
 
-.c23:focus {
+.c22:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c22 {
+.c21 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -386,7 +363,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c22:focus-within {
+.c21:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
@@ -435,12 +412,12 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c28 {
+.c26 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c29 > * + * {
+.c27 > * + * {
   margin-left: 8px;
 }
 
@@ -449,23 +426,23 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   max-height: 60vh;
 }
 
-.c26 {
+.c24 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c26 svg {
+.c24 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c26 svg path {
+.c24 svg path {
   fill: #666687;
 }
 
-.c27 {
+.c25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -474,7 +451,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c27 svg {
+.c25 svg {
   width: 0.5625rem;
 }
 
@@ -587,28 +564,30 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                       class=""
                     >
                       <div>
-                        <div>
+                        <div
+                          class=""
+                        >
                           <div
-                            class="c18 c19"
+                            class="c18"
                           >
                             <label
-                              class="c9 c20"
+                              class="c9 c19"
                               for="1"
                             >
                               <div
-                                class="c21"
+                                class="c20"
                               >
                                 Name
                               </div>
                             </label>
                             <div
-                              class="c8 c22"
+                              class="c8 c21"
                             >
                               <input
                                 aria-disabled="false"
                                 aria-invalid="false"
                                 aria-required="false"
-                                class="c23"
+                                class="c22"
                                 id="1"
                                 name="name"
                                 value=""
@@ -626,14 +605,14 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                       class=""
                     >
                       <div
-                        class="c24"
+                        class="c18"
                       >
                         <label
-                          class="c9 c20"
+                          class="c9 c19"
                           for="folder-parent"
                         >
                           <div
-                            class="c21"
+                            class="c20"
                           >
                             Location
                           </div>
@@ -681,7 +660,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                             >
                               <div
                                 aria-hidden="true"
-                                class="c25 c26 c27"
+                                class="c23 c24 c25"
                               >
                                 <svg
                                   fill="none"
@@ -712,41 +691,41 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c6 c28"
+                class="c6 c26"
               >
                 <div
                   class="c8"
                 >
                   <div
-                    class="c21 c29"
+                    class="c20 c27"
                   >
                     <button
                       aria-disabled="false"
-                      class="c30 c31 c12 c32"
+                      class="c28 c29 c12 c30"
                       name="cancel"
                       type="button"
                     >
                       <span
-                        class="c9 c33"
+                        class="c9 c31"
                       >
                         Cancel
                       </span>
                     </button>
                   </div>
                   <div
-                    class="c21 c29"
+                    class="c20 c27"
                   >
                     <div
-                      class="c31"
+                      class="c29"
                     >
                       <button
                         aria-disabled="false"
-                        class="c30 c31 c12 c34"
+                        class="c28 c29 c12 c32"
                         name="submit"
                         type="submit"
                       >
                         <span
-                          class="c9 c33"
+                          class="c9 c31"
                         >
                           Create
                         </span>
diff --git a/packages/core/upload/admin/src/components/FilterList/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/components/FilterList/tests/__snapshots__/index.test.js.snap
index 2147061eb6..ba281e1b53 100644
--- a/packages/core/upload/admin/src/components/FilterList/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/upload/admin/src/components/FilterList/tests/__snapshots__/index.test.js.snap
@@ -17,11 +17,7 @@ exports[`<FilterList /> renders and matches the snapshot 1`] = `
   height: 2rem;
 }
 
-.c6 {
-  padding-left: 8px;
-}
-
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -33,6 +29,7 @@ exports[`<FilterList /> renders and matches the snapshot 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: 8px;
 }
 
 .c4 {
@@ -42,7 +39,7 @@ exports[`<FilterList /> renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c7 {
+.c6 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -54,18 +51,18 @@ exports[`<FilterList /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c2 svg {
+.c3 > svg {
   height: 0.5rem;
   width: 0.5rem;
 }
 
-.c2 svg path {
+.c3 > svg path {
   fill: #4945ff;
 }
 
 .c5 {
-  border-right: 1px solid #d9d8ff;
   color: inherit;
+  border-right: 1px solid #d9d8ff;
   padding-right: 8px;
 }
 
@@ -75,37 +72,25 @@ exports[`<FilterList /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          type is image
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        type is image
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -113,37 +98,25 @@ exports[`<FilterList /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          type is not image
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        type is not image
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -151,37 +124,25 @@ exports[`<FilterList /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          createdAt is Thursday, October 7, 2021
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        createdAt is Thursday, October 7, 2021
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -189,37 +150,25 @@ exports[`<FilterList /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          type is video
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        type is video
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -227,37 +176,25 @@ exports[`<FilterList /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          type is file
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        type is file
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
@@ -265,41 +202,29 @@ exports[`<FilterList /> renders and matches the snapshot 1`] = `
   >
     <button
       aria-disabled="false"
-      class="c1 c2"
+      class="c1 c2 c3"
     >
-      <div
-        class="c3"
+      <span
+        class="c4 c5"
       >
-        <span
-          class="c4 c5"
-        >
-          type is not file
-        </span>
-        <div
-          class="c6"
-        >
-          <div
-            class="c3"
-          >
-            <svg
-              fill="none"
-              height="1rem"
-              viewBox="0 0 24 24"
-              width="1rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
-                fill="#212134"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
+        type is not file
+      </span>
+      <svg
+        fill="none"
+        height="1rem"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24 2.417 21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417Z"
+          fill="#212134"
+        />
+      </svg>
     </button>
   </div>
   <div
-    class="c7"
+    class="c6"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/FolderCard/tests/__snapshots__/FolderCard.test.js.snap b/packages/core/upload/admin/src/components/FolderCard/tests/__snapshots__/FolderCard.test.js.snap
index 1d87818e0d..b8c6e1a2ef 100644
--- a/packages/core/upload/admin/src/components/FolderCard/tests/__snapshots__/FolderCard.test.js.snap
+++ b/packages/core/upload/admin/src/components/FolderCard/tests/__snapshots__/FolderCard.test.js.snap
@@ -96,15 +96,6 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
   color: #32324d;
 }
 
-.c17 > * {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c17 > * + * {
-  margin-left: 8px;
-}
-
 .c5 {
   height: 18px;
   min-width: 18px;
@@ -185,6 +176,15 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
   width: 1px;
 }
 
+.c17 > * {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.c17 > * + * {
+  margin-left: 8px;
+}
+
 .c18 {
   position: absolute;
   top: 12px;
@@ -415,15 +415,6 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c15 > * {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c15 > * + * {
-  margin-left: 8px;
-}
-
 .c17 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
@@ -436,6 +427,15 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
+.c15 > * {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.c15 > * + * {
+  margin-left: 8px;
+}
+
 .c16 {
   position: absolute;
   top: 12px;
diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/tests/__snapshots__/MediaLibraryInput.test.js.snap b/packages/core/upload/admin/src/components/MediaLibraryInput/tests/__snapshots__/MediaLibraryInput.test.js.snap
index 10f11857b3..ae91a04c58 100644
--- a/packages/core/upload/admin/src/components/MediaLibraryInput/tests/__snapshots__/MediaLibraryInput.test.js.snap
+++ b/packages/core/upload/admin/src/components/MediaLibraryInput/tests/__snapshots__/MediaLibraryInput.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
-.c4 {
+.c3 {
   background: #f6f6f9;
   padding: 8px;
   border-radius: 4px;
@@ -9,27 +9,27 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   border: 1px solid #dcdce4;
 }
 
-.c5 {
+.c4 {
   position: relative;
 }
 
-.c7 {
+.c6 {
   padding-right: 8px;
   padding-left: 8px;
   overflow: hidden;
   width: 100%;
 }
 
-.c9 {
+.c8 {
   height: 124px;
 }
 
-.c12 {
+.c11 {
   width: 100%;
   height: 100%;
 }
 
-.c14 {
+.c13 {
   color: #4945ff;
   margin-bottom: 12px;
   width: 30px;
@@ -48,9 +48,10 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -64,7 +65,7 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c10 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -82,7 +83,7 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   justify-content: center;
 }
 
-.c13 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -100,34 +101,25 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   justify-content: center;
 }
 
-.c2 {
+.c1 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c16 {
+.c15 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #666687;
 }
 
-.c15 path {
+.c14 path {
   fill: #4945ff;
 }
 
-.c1 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c1 > * + * {
-  margin-top: 4px;
-}
-
-.c18 {
+.c17 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -139,24 +131,24 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c6 {
+.c5 {
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-template-areas: 'startAction slides endAction';
 }
 
-.c8 {
+.c7 {
   grid-area: slides;
 }
 
-.c11 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c17 {
+.c16 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -165,16 +157,18 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
 
 <body>
   <div>
-    <div>
+    <div
+      class=""
+    >
       <div
-        class="c0 c1"
+        class="c0"
       >
         <label
-          class="c2"
+          class="c1"
           for="1"
         >
           <div
-            class="c3"
+            class="c2"
           >
             default
           </div>
@@ -184,32 +178,32 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
           id="1"
         >
           <div
-            class="c4"
+            class="c3"
           >
             <section
               aria-label="default"
               aria-roledescription="carousel"
-              class="c5 c6"
+              class="c4 c5"
             >
               <div
                 aria-live="polite"
-                class="c7 c8"
+                class="c6 c7"
                 overflow="hidden"
               >
                 <div
                   aria-label="upload.mediaLibraryInput.slideCount"
                   aria-roledescription="slide"
-                  class="c9 c10 c11"
+                  class="c8 c9 c10"
                   role="group"
                 >
                   <button
-                    class="c12 c13"
+                    class="c11 c12"
                     style="cursor: pointer;"
                     type="button"
                   >
                     <svg
                       aria-hidden="true"
-                      class="c14 c15"
+                      class="c13 c14"
                       fill="none"
                       height="1rem"
                       viewBox="0 0 24 20"
@@ -226,7 +220,7 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
                       />
                     </svg>
                     <span
-                      class="c16 c17"
+                      class="c15 c16"
                       style="text-align: center;"
                     >
                       upload.mediaLibraryInput.placeholder
@@ -240,7 +234,7 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
       </div>
     </div>
     <div
-      class="c18"
+      class="c17"
     >
       <p
         aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap
index 9611c9fdc6..8b3a91db31 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap
@@ -264,15 +264,6 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   color: #ffffff;
 }
 
-.c28 > * {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c28 > * + * {
-  margin-left: 8px;
-}
-
 .c46 {
   border-radius: 4px;
   height: 1.5rem;
@@ -501,6 +492,15 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   fill: #32324d;
 }
 
+.c28 > * {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.c28 > * + * {
+  margin-left: 8px;
+}
+
 .c29 {
   position: absolute;
   top: 12px;
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap b/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap
index fc81116c5e..985fa27a39 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap
@@ -737,7 +737,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   padding-left: 40px;
 }
 
-.c34 {
+.c33 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -784,7 +784,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   justify-content: space-between;
 }
 
-.c27 {
+.c26 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -798,7 +798,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   flex-direction: row;
 }
 
-.c35 {
+.c34 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -825,6 +825,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
 .c10 {
@@ -850,35 +851,26 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   color: #666687;
 }
 
-.c37 {
+.c36 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c28 {
+.c27 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c31 {
+.c30 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #666687;
 }
 
-.c26 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c26 > * + * {
-  margin-top: 4px;
-}
-
 .c12 {
   position: relative;
   outline: none;
@@ -940,97 +932,97 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   width: 1px;
 }
 
-.c38 {
+.c37 {
   height: 2rem;
 }
 
-.c38[aria-disabled='true'] {
+.c37[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c38[aria-disabled='true'] .c9 {
+.c37[aria-disabled='true'] .c9 {
   color: #666687;
 }
 
-.c38[aria-disabled='true'] svg > g,.c38[aria-disabled='true'] svg path {
+.c37[aria-disabled='true'] svg > g,.c37[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c38[aria-disabled='true']:active {
+.c37[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c38[aria-disabled='true']:active .c9 {
+.c37[aria-disabled='true']:active .c9 {
   color: #666687;
 }
 
-.c38[aria-disabled='true']:active svg > g,.c38[aria-disabled='true']:active svg path {
+.c37[aria-disabled='true']:active svg > g,.c37[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c38:hover {
+.c37:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c38:active {
+.c37:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c38 svg > g,
-.c38 svg path {
+.c37 svg > g,
+.c37 svg path {
   fill: #ffffff;
 }
 
-.c36 {
+.c35 {
   height: 2rem;
   border: 1px solid #dcdce4;
   background: #ffffff;
 }
 
-.c36[aria-disabled='true'] {
+.c35[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c36[aria-disabled='true'] .c9 {
+.c35[aria-disabled='true'] .c9 {
   color: #666687;
 }
 
-.c36[aria-disabled='true'] svg > g,.c36[aria-disabled='true'] svg path {
+.c35[aria-disabled='true'] svg > g,.c35[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c36[aria-disabled='true']:active {
+.c35[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c36[aria-disabled='true']:active .c9 {
+.c35[aria-disabled='true']:active .c9 {
   color: #666687;
 }
 
-.c36[aria-disabled='true']:active svg > g,.c36[aria-disabled='true']:active svg path {
+.c35[aria-disabled='true']:active svg > g,.c35[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c36:hover {
+.c35:hover {
   background-color: #f6f6f9;
 }
 
-.c36:active {
+.c35:active {
   background-color: #eaeaef;
 }
 
-.c36 .c9 {
+.c35 .c9 {
   color: #32324d;
 }
 
-.c36 svg > g,
-.c36 svg path {
+.c35 svg > g,
+.c35 svg path {
   fill: #32324d;
 }
 
@@ -1076,12 +1068,12 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c32 {
+.c31 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c33 > * + * {
+.c32 > * + * {
   margin-left: 8px;
 }
 
@@ -1097,7 +1089,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   cursor: not-allowed;
 }
 
-.c29 {
+.c28 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   padding-left: 16px;
@@ -1113,12 +1105,12 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   transition-duration: 0.2s;
 }
 
-.c29:focus-within {
+.c28:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c30 {
+.c29 {
   display: block;
   width: 100%;
   font-weight: 400;
@@ -1129,27 +1121,27 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   background: inherit;
 }
 
-.c30::-webkit-input-placeholder {
+.c29::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c30::-moz-placeholder {
+.c29::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c30:-ms-input-placeholder {
+.c29:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c30::placeholder {
+.c29::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c30:focus-within {
+.c29:focus-within {
   outline: none;
 }
 
@@ -1339,38 +1331,40 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
                       <div
                         class="c24"
                       >
-                        <div>
+                        <div
+                          class=""
+                        >
                           <div
-                            class="c25 c26"
+                            class="c25"
                           >
                             <div
-                              class="c27"
+                              class="c26"
                             >
                               <label
-                                class="c9 c28"
+                                class="c9 c27"
                                 for="34"
                               >
                                 <div
-                                  class="c27"
+                                  class="c26"
                                 >
                                   URL
                                 </div>
                               </label>
                             </div>
                             <div
-                              class="c29"
+                              class="c28"
                             >
                               <textarea
                                 aria-describedby="34-hint"
                                 aria-invalid="false"
                                 aria-required="false"
-                                class="c30"
+                                class="c29"
                                 id="34"
                                 name="urls"
                               />
                             </div>
                             <p
-                              class="c9 c31"
+                              class="c9 c30"
                               id="34-hint"
                             >
                               Separate your URL links by a carriage return.
@@ -1380,36 +1374,36 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
                       </div>
                     </div>
                     <div
-                      class="c6 c32"
+                      class="c6 c31"
                     >
                       <div
                         class="c8"
                       >
                         <div
-                          class="c27 c33"
+                          class="c26 c32"
                         >
                           <button
                             aria-disabled="false"
-                            class="c34 c35 c12 c36"
+                            class="c33 c34 c12 c35"
                             type="button"
                           >
                             <span
-                              class="c9 c37"
+                              class="c9 c36"
                             >
                               app.components.Button.cancel
                             </span>
                           </button>
                         </div>
                         <div
-                          class="c27 c33"
+                          class="c26 c32"
                         >
                           <button
                             aria-disabled="false"
-                            class="c34 c35 c12 c38"
+                            class="c33 c34 c12 c37"
                             type="submit"
                           >
                             <span
-                              class="c9 c37"
+                              class="c9 c36"
                             >
                               Next
                             </span>
diff --git a/packages/core/upload/admin/src/pages/App/ConfigureTheView/components/tests/__snapshots__/Settings.test.js.snap b/packages/core/upload/admin/src/pages/App/ConfigureTheView/components/tests/__snapshots__/Settings.test.js.snap
index b775667d54..cd7802b2e8 100644
--- a/packages/core/upload/admin/src/pages/App/ConfigureTheView/components/tests/__snapshots__/Settings.test.js.snap
+++ b/packages/core/upload/admin/src/pages/App/ConfigureTheView/components/tests/__snapshots__/Settings.test.js.snap
@@ -11,12 +11,12 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c11 {
+.c10 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c13 {
+.c12 {
   padding-left: 12px;
 }
 
@@ -32,9 +32,10 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -48,7 +49,7 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
   flex-direction: row;
 }
 
-.c9 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -66,14 +67,14 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
   justify-content: space-between;
 }
 
-.c5 {
+.c4 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c12 {
+.c11 {
   font-size: 0.875rem;
   line-height: 1.43;
   display: block;
@@ -83,22 +84,13 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
   color: #32324d;
 }
 
-.c16 {
+.c15 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #666687;
 }
 
-.c4 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c4 > * + * {
-  margin-top: 4px;
-}
-
-.c17 {
+.c16 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -110,7 +102,7 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
   width: 1px;
 }
 
-.c7 {
+.c6 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -126,28 +118,28 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
   transition-duration: 0.2s;
 }
 
-.c7:focus-within {
+.c6:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c14 {
+.c13 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c14 svg {
+.c13 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c14 svg path {
+.c13 svg path {
   fill: #666687;
 }
 
-.c15 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -156,11 +148,11 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
   border: none;
 }
 
-.c15 svg {
+.c14 svg {
   width: 0.375rem;
 }
 
-.c8 {
+.c7 {
   position: absolute;
   left: 0;
   right: 0;
@@ -171,15 +163,15 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
   border: none;
 }
 
-.c8:focus {
+.c7:focus {
   outline: none;
 }
 
-.c8[aria-disabled='true'] {
+.c7[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c10 {
+.c9 {
   width: 100%;
 }
 
@@ -219,22 +211,24 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
         <div
           class=""
         >
-          <div>
+          <div
+            class=""
+          >
             <div
-              class="c3 c4"
+              class="c3"
             >
               <label
-                class="c5"
+                class="c4"
                 for="1"
               >
                 <div
-                  class="c6"
+                  class="c5"
                 >
                   Entries per page
                 </div>
               </label>
               <div
-                class="c6 c7"
+                class="c5 c6"
               >
                 <button
                   aria-describedby="1-hint"
@@ -242,23 +236,23 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   aria-labelledby="1 1-label 1-content"
-                  class="c8"
+                  class="c7"
                   data-testid="pageSize-select"
                   id="1"
                   name="pageSize"
                   type="button"
                 />
                 <div
-                  class="c9 c10"
+                  class="c8 c9"
                 >
                   <div
-                    class="c6"
+                    class="c5"
                   >
                     <div
-                      class="c11"
+                      class="c10"
                     >
                       <span
-                        class="c12"
+                        class="c11"
                         id="1-content"
                       >
                         10
@@ -266,11 +260,11 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
                     </div>
                   </div>
                   <div
-                    class="c6"
+                    class="c5"
                   >
                     <button
                       aria-hidden="true"
-                      class="c13 c14 c15"
+                      class="c12 c13 c14"
                       tabindex="-1"
                       title="Carret Down Button"
                       type="button"
@@ -294,7 +288,7 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
                 </div>
               </div>
               <p
-                class="c16"
+                class="c15"
                 id="1-hint"
               >
                 Number of assets displayed by default in the Media Library
@@ -309,22 +303,24 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
         <div
           class=""
         >
-          <div>
+          <div
+            class=""
+          >
             <div
-              class="c3 c4"
+              class="c3"
             >
               <label
-                class="c5"
+                class="c4"
                 for="3"
               >
                 <div
-                  class="c6"
+                  class="c5"
                 >
                   Default sort order
                 </div>
               </label>
               <div
-                class="c6 c7"
+                class="c5 c6"
               >
                 <button
                   aria-describedby="3-hint"
@@ -332,23 +328,23 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   aria-labelledby="3 3-label 3-content"
-                  class="c8"
+                  class="c7"
                   data-testid="sort-select"
                   id="3"
                   name="sort"
                   type="button"
                 />
                 <div
-                  class="c9 c10"
+                  class="c8 c9"
                 >
                   <div
-                    class="c6"
+                    class="c5"
                   >
                     <div
-                      class="c11"
+                      class="c10"
                     >
                       <span
-                        class="c12"
+                        class="c11"
                         id="3-content"
                       >
                         createdAt:DESC
@@ -356,11 +352,11 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
                     </div>
                   </div>
                   <div
-                    class="c6"
+                    class="c5"
                   >
                     <button
                       aria-hidden="true"
-                      class="c13 c14 c15"
+                      class="c12 c13 c14"
                       tabindex="-1"
                       title="Carret Down Button"
                       type="button"
@@ -384,7 +380,7 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
                 </div>
               </div>
               <p
-                class="c16"
+                class="c15"
                 id="3-hint"
               >
                 Note: You can override this value in the media library.
@@ -396,7 +392,7 @@ exports[`Upload - Configure | Settings initial render renders and matches the sn
     </div>
   </div>
   <div
-    class="c17"
+    class="c16"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/upload/admin/src/pages/App/ConfigureTheView/tests/__snapshots__/ConfigureTheView.test.js.snap b/packages/core/upload/admin/src/pages/App/ConfigureTheView/tests/__snapshots__/ConfigureTheView.test.js.snap
index 182f91f780..a3a39896ee 100644
--- a/packages/core/upload/admin/src/pages/App/ConfigureTheView/tests/__snapshots__/ConfigureTheView.test.js.snap
+++ b/packages/core/upload/admin/src/pages/App/ConfigureTheView/tests/__snapshots__/ConfigureTheView.test.js.snap
@@ -17,7 +17,11 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   padding-bottom: 8px;
 }
 
-.c14 {
+.c11 {
+  min-width: 0;
+}
+
+.c15 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -28,12 +32,12 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   cursor: pointer;
 }
 
-.c20 {
+.c21 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c21 {
+.c22 {
   background: #ffffff;
   padding-top: 24px;
   padding-right: 32px;
@@ -70,7 +74,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   justify-content: space-between;
 }
 
-.c11 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -84,7 +88,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   flex-direction: row;
 }
 
-.c15 {
+.c16 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -99,7 +103,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   gap: 8px;
 }
 
-.c24 {
+.c25 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -111,23 +115,24 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
-.c13 {
+.c14 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c18 {
+.c19 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c19 {
+.c20 {
   font-size: 1rem;
   line-height: 1.5;
   color: #666687;
@@ -156,35 +161,26 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   color: #666687;
 }
 
-.c25 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c25 > * + * {
-  margin-top: 4px;
-}
-
-.c16 {
+.c17 {
   position: relative;
   outline: none;
 }
 
-.c16 svg {
+.c17 svg {
   height: 12px;
   width: 12px;
 }
 
-.c16 svg > g,
-.c16 svg path {
+.c17 svg > g,
+.c17 svg path {
   fill: #ffffff;
 }
 
-.c16[aria-disabled='true'] {
+.c17[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c16:after {
+.c17:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -199,11 +195,11 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   border: 2px solid transparent;
 }
 
-.c16:focus-visible {
+.c17:focus-visible {
   outline: none;
 }
 
-.c16:focus-visible:after {
+.c17:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -226,48 +222,48 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   width: 1px;
 }
 
-.c17 {
+.c18 {
   height: 2rem;
 }
 
-.c17[aria-disabled='true'] {
+.c18[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c17[aria-disabled='true'] .c12 {
+.c18[aria-disabled='true'] .c13 {
   color: #666687;
 }
 
-.c17[aria-disabled='true'] svg > g,.c17[aria-disabled='true'] svg path {
+.c18[aria-disabled='true'] svg > g,.c18[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c17[aria-disabled='true']:active {
+.c18[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c17[aria-disabled='true']:active .c12 {
+.c18[aria-disabled='true']:active .c13 {
   color: #666687;
 }
 
-.c17[aria-disabled='true']:active svg > g,.c17[aria-disabled='true']:active svg path {
+.c18[aria-disabled='true']:active svg > g,.c18[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c17:hover {
+.c18:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c17:active {
+.c18:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c17 svg > g,
-.c17 svg path {
+.c18 svg > g,
+.c18 svg path {
   fill: #ffffff;
 }
 
@@ -344,13 +340,13 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   width: 100%;
 }
 
-.c22 {
+.c23 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c23 {
+.c24 {
   grid-column: span 6;
   max-width: 100%;
 }
@@ -439,13 +435,13 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
 }
 
 @media (max-width:68.75rem) {
-  .c23 {
+  .c24 {
     grid-column: span 12;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c23 {
+  .c24 {
     grid-column: span;
   }
 }
@@ -507,17 +503,17 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                 class="c10"
               >
                 <div
-                  class="c11"
+                  class="c11 c12"
                 >
                   <h1
-                    class="c12 c13"
+                    class="c13 c14"
                   >
                     Configure the view - Media Library
                   </h1>
                 </div>
                 <button
                   aria-disabled="true"
-                  class="c14 c15 c16 c17"
+                  class="c15 c16 c17 c18"
                   disabled=""
                   type="submit"
                 >
@@ -539,50 +535,52 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                     </svg>
                   </div>
                   <span
-                    class="c12 c18"
+                    class="c13 c19"
                   >
                     Save
                   </span>
                 </button>
               </div>
               <p
-                class="c12 c19"
+                class="c13 c20"
               >
                 Define the view settings of the media library.
               </p>
             </div>
           </div>
           <div
-            class="c20"
+            class="c21"
           >
             <div
-              class="c21"
+              class="c22"
             >
               <div
-                class="c22"
+                class="c23"
               >
                 <div
-                  class="c23"
+                  class="c24"
                 >
                   <div
                     class=""
                   >
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c24 c25"
+                        class="c25"
                       >
                         <label
-                          class="c12 c26"
+                          class="c13 c26"
                           for="1"
                         >
                           <div
-                            class="c11"
+                            class="c12"
                           >
                             Entries per page
                           </div>
                         </label>
                         <div
-                          class="c11 c27"
+                          class="c12 c27"
                         >
                           <button
                             aria-describedby="1-hint"
@@ -600,13 +598,13 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                             class="c10 c29"
                           >
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               <div
                                 class="c30"
                               >
                                 <span
-                                  class="c12 c31"
+                                  class="c13 c31"
                                   id="1-content"
                                 >
                                   10
@@ -614,7 +612,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                               </div>
                             </div>
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               <button
                                 aria-hidden="true"
@@ -642,7 +640,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                           </div>
                         </div>
                         <p
-                          class="c12 c35"
+                          class="c13 c35"
                           id="1-hint"
                         >
                           Number of assets displayed by default in the Media Library
@@ -652,27 +650,29 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                   </div>
                 </div>
                 <div
-                  class="c23"
+                  class="c24"
                 >
                   <div
                     class=""
                   >
-                    <div>
+                    <div
+                      class=""
+                    >
                       <div
-                        class="c24 c25"
+                        class="c25"
                       >
                         <label
-                          class="c12 c26"
+                          class="c13 c26"
                           for="3"
                         >
                           <div
-                            class="c11"
+                            class="c12"
                           >
                             Default sort order
                           </div>
                         </label>
                         <div
-                          class="c11 c27"
+                          class="c12 c27"
                         >
                           <button
                             aria-describedby="3-hint"
@@ -690,13 +690,13 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                             class="c10 c29"
                           >
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               <div
                                 class="c30"
                               >
                                 <span
-                                  class="c12 c31"
+                                  class="c13 c31"
                                   id="3-content"
                                 >
                                   createdAt:DESC
@@ -704,7 +704,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                               </div>
                             </div>
                             <div
-                              class="c11"
+                              class="c12"
                             >
                               <button
                                 aria-hidden="true"
@@ -732,7 +732,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                           </div>
                         </div>
                         <p
-                          class="c12 c35"
+                          class="c13 c35"
                           id="3-hint"
                         >
                           Note: You can override this value in the media library.
diff --git a/packages/core/upload/admin/src/pages/App/MediaLibrary/components/tests/__snapshots__/Header.test.js.snap b/packages/core/upload/admin/src/pages/App/MediaLibrary/components/tests/__snapshots__/Header.test.js.snap
index 05ec6bcc56..40fdde4720 100644
--- a/packages/core/upload/admin/src/pages/App/MediaLibrary/components/tests/__snapshots__/Header.test.js.snap
+++ b/packages/core/upload/admin/src/pages/App/MediaLibrary/components/tests/__snapshots__/Header.test.js.snap
@@ -17,7 +17,11 @@ exports[`Header renders 1`] = `
   padding-right: 8px;
 }
 
-.c11 {
+.c8 {
+  min-width: 0;
+}
+
+.c12 {
   background: #4945ff;
   padding: 8px;
   padding-right: 16px;
@@ -46,7 +50,7 @@ exports[`Header renders 1`] = `
   justify-content: space-between;
 }
 
-.c8 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -60,7 +64,7 @@ exports[`Header renders 1`] = `
   flex-direction: row;
 }
 
-.c10 {
+.c11 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -81,40 +85,40 @@ exports[`Header renders 1`] = `
   color: #32324d;
 }
 
-.c9 {
+.c10 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c14 {
+.c15 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #ffffff;
 }
 
-.c12 {
+.c13 {
   position: relative;
   outline: none;
 }
 
-.c12 svg {
+.c13 svg {
   height: 12px;
   width: 12px;
 }
 
-.c12 svg > g,
-.c12 svg path {
+.c13 svg > g,
+.c13 svg path {
   fill: #ffffff;
 }
 
-.c12[aria-disabled='true'] {
+.c13[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c12:after {
+.c13:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -129,11 +133,11 @@ exports[`Header renders 1`] = `
   border: 2px solid transparent;
 }
 
-.c12:focus-visible {
+.c13:focus-visible {
   outline: none;
 }
 
-.c12:focus-visible:after {
+.c13:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -144,7 +148,7 @@ exports[`Header renders 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c16 {
+.c17 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -156,107 +160,107 @@ exports[`Header renders 1`] = `
   width: 1px;
 }
 
-.c13 {
+.c14 {
   height: 2rem;
   border: 1px solid #d9d8ff;
   background: #f0f0ff;
 }
 
-.c13[aria-disabled='true'] {
+.c14[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c13[aria-disabled='true'] .c5 {
+.c14[aria-disabled='true'] .c5 {
   color: #666687;
 }
 
-.c13[aria-disabled='true'] svg > g,.c13[aria-disabled='true'] svg path {
+.c14[aria-disabled='true'] svg > g,.c14[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c13[aria-disabled='true']:active {
+.c14[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c13[aria-disabled='true']:active .c5 {
+.c14[aria-disabled='true']:active .c5 {
   color: #666687;
 }
 
-.c13[aria-disabled='true']:active svg > g,.c13[aria-disabled='true']:active svg path {
+.c14[aria-disabled='true']:active svg > g,.c14[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c13:hover {
+.c14:hover {
   background-color: #ffffff;
 }
 
-.c13:active {
+.c14:active {
   background-color: #ffffff;
   border: 1px solid #4945ff;
 }
 
-.c13:active .c5 {
+.c14:active .c5 {
   color: #4945ff;
 }
 
-.c13:active svg > g,
-.c13:active svg path {
+.c14:active svg > g,
+.c14:active svg path {
   fill: #4945ff;
 }
 
-.c13 .c5 {
+.c14 .c5 {
   color: #271fe0;
 }
 
-.c13 svg > g,
-.c13 svg path {
+.c14 svg > g,
+.c14 svg path {
   fill: #271fe0;
 }
 
-.c15 {
+.c16 {
   height: 2rem;
 }
 
-.c15[aria-disabled='true'] {
+.c16[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c15[aria-disabled='true'] .c5 {
+.c16[aria-disabled='true'] .c5 {
   color: #666687;
 }
 
-.c15[aria-disabled='true'] svg > g,.c15[aria-disabled='true'] svg path {
+.c16[aria-disabled='true'] svg > g,.c16[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c15[aria-disabled='true']:active {
+.c16[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c15[aria-disabled='true']:active .c5 {
+.c16[aria-disabled='true']:active .c5 {
   color: #666687;
 }
 
-.c15[aria-disabled='true']:active svg > g,.c15[aria-disabled='true']:active svg path {
+.c16[aria-disabled='true']:active svg > g,.c16[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c15:hover {
+.c16:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c15:active {
+.c16:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c15 svg > g,
-.c15 svg path {
+.c16 svg > g,
+.c16 svg path {
   fill: #ffffff;
 }
 
@@ -381,20 +385,20 @@ exports[`Header renders 1`] = `
         class="c7"
       >
         <div
-          class="c8"
+          class="c8 c9"
         >
           <h1
-            class="c5 c9"
+            class="c5 c10"
           >
             Media Library
           </h1>
         </div>
         <div
-          class="c10"
+          class="c11"
         >
           <button
             aria-disabled="false"
-            class="c11 c10 c12 c13"
+            class="c12 c11 c13 c14"
             type="button"
           >
             <div
@@ -415,14 +419,14 @@ exports[`Header renders 1`] = `
               </svg>
             </div>
             <span
-              class="c5 c14"
+              class="c5 c15"
             >
               Add new folder
             </span>
           </button>
           <button
             aria-disabled="false"
-            class="c11 c10 c12 c15"
+            class="c12 c11 c13 c16"
             type="button"
           >
             <div
@@ -443,7 +447,7 @@ exports[`Header renders 1`] = `
               </svg>
             </div>
             <span
-              class="c5 c14"
+              class="c5 c15"
             >
               Add new assets
             </span>
@@ -453,7 +457,7 @@ exports[`Header renders 1`] = `
     </div>
   </div>
   <div
-    class="c16"
+    class="c17"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js b/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js
index 270363fcfd..5a8306797a 100644
--- a/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js
+++ b/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js
@@ -57,7 +57,11 @@ describe('Upload | SettingsPage', () => {
         padding-left: 56px;
       }
 
-      .c6 {
+      .c3 {
+        min-width: 0;
+      }
+
+      .c7 {
         background: #4945ff;
         padding: 8px;
         padding-right: 16px;
@@ -68,16 +72,16 @@ describe('Upload | SettingsPage', () => {
         cursor: pointer;
       }
 
-      .c12 {
+      .c13 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c14 {
+      .c15 {
         padding-bottom: 56px;
       }
 
-      .c17 {
+      .c18 {
         background: #ffffff;
         padding: 24px;
         border-radius: 4px;
@@ -121,7 +125,7 @@ describe('Upload | SettingsPage', () => {
         justify-content: space-between;
       }
 
-      .c3 {
+      .c4 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -135,7 +139,7 @@ describe('Upload | SettingsPage', () => {
         flex-direction: row;
       }
 
-      .c7 {
+      .c8 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -150,7 +154,7 @@ describe('Upload | SettingsPage', () => {
         gap: 8px;
       }
 
-      .c16 {
+      .c17 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -165,7 +169,7 @@ describe('Upload | SettingsPage', () => {
         gap: 12;
       }
 
-      .c18 {
+      .c19 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -180,7 +184,7 @@ describe('Upload | SettingsPage', () => {
         gap: 16px;
       }
 
-      .c23 {
+      .c24 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -192,6 +196,7 @@ describe('Upload | SettingsPage', () => {
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
+        gap: 4px;
       }
 
       .c31 {
@@ -212,27 +217,27 @@ describe('Upload | SettingsPage', () => {
         justify-content: center;
       }
 
-      .c5 {
+      .c6 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c10 {
+      .c11 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c11 {
+      .c12 {
         font-size: 1rem;
         line-height: 1.5;
         color: #666687;
       }
 
-      .c19 {
+      .c20 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
@@ -276,35 +281,26 @@ describe('Upload | SettingsPage', () => {
         text-transform: uppercase;
       }
 
-      .c24 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c24 > * + * {
-        margin-top: 4px;
-      }
-
-      .c8 {
+      .c9 {
         position: relative;
         outline: none;
       }
 
-      .c8 svg {
+      .c9 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c8 svg > g,
-      .c8 svg path {
+      .c9 svg > g,
+      .c9 svg path {
         fill: #ffffff;
       }
 
-      .c8[aria-disabled='true'] {
+      .c9[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c8:after {
+      .c9:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -319,11 +315,11 @@ describe('Upload | SettingsPage', () => {
         border: 2px solid transparent;
       }
 
-      .c8:focus-visible {
+      .c9:focus-visible {
         outline: none;
       }
 
-      .c8:focus-visible:after {
+      .c9:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -346,68 +342,68 @@ describe('Upload | SettingsPage', () => {
         width: 1px;
       }
 
-      .c9 {
+      .c10 {
         height: 2rem;
       }
 
-      .c9[aria-disabled='true'] {
+      .c10[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c9[aria-disabled='true'] .c4 {
+      .c10[aria-disabled='true'] .c5 {
         color: #666687;
       }
 
-      .c9[aria-disabled='true'] svg > g,.c9[aria-disabled='true'] svg path {
+      .c10[aria-disabled='true'] svg > g,.c10[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c9[aria-disabled='true']:active {
+      .c10[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c9[aria-disabled='true']:active .c4 {
+      .c10[aria-disabled='true']:active .c5 {
         color: #666687;
       }
 
-      .c9[aria-disabled='true']:active svg > g,.c9[aria-disabled='true']:active svg path {
+      .c10[aria-disabled='true']:active svg > g,.c10[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c9:hover {
+      .c10:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c9:active {
+      .c10:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c9 svg > g,
-      .c9 svg path {
+      .c10 svg > g,
+      .c10 svg path {
         fill: #ffffff;
       }
 
-      .c20 {
+      .c21 {
         display: grid;
         grid-template-columns: repeat(12,1fr);
         gap: 24px;
       }
 
-      .c21 {
+      .c22 {
         grid-column: span 6;
         max-width: 100%;
       }
 
-      .c13 {
+      .c14 {
         display: grid;
         grid-template-columns: 1fr;
       }
 
-      .c15 {
+      .c16 {
         overflow-x: hidden;
       }
 
@@ -482,18 +478,18 @@ describe('Upload | SettingsPage', () => {
         width: 100%;
       }
 
-      .c22 {
+      .c23 {
         max-width: 320px;
       }
 
       @media (max-width:68.75rem) {
-        .c21 {
+        .c22 {
           grid-column: span 12;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c21 {
+        .c22 {
           grid-column: span;
         }
       }
@@ -517,17 +513,17 @@ describe('Upload | SettingsPage', () => {
                   class="c2"
                 >
                   <div
-                    class="c3"
+                    class="c3 c4"
                   >
                     <h1
-                      class="c4 c5"
+                      class="c5 c6"
                     >
                       Media Library
                     </h1>
                   </div>
                   <button
                     aria-disabled="true"
-                    class="c6 c7 c8 c9"
+                    class="c7 c8 c9 c10"
                     data-testid="save-button"
                     disabled=""
                     type="submit"
@@ -550,70 +546,70 @@ describe('Upload | SettingsPage', () => {
                       </svg>
                     </div>
                     <span
-                      class="c4 c10"
+                      class="c5 c11"
                     >
                       Save
                     </span>
                   </button>
                 </div>
                 <p
-                  class="c4 c11"
+                  class="c5 c12"
                 >
                   Configure the settings for the Media Library
                 </p>
               </div>
             </div>
             <div
-              class="c12"
+              class="c13"
             >
               <div
-                class="c13"
+                class="c14"
               >
                 <div
-                  class="c14 c15"
+                  class="c15 c16"
                 >
                   <div
-                    class="c16"
+                    class="c17"
                   >
                     <div
-                      class="c17"
+                      class="c18"
                     >
                       <div
-                        class="c18"
+                        class="c19"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <h2
-                            class="c4 c19"
+                            class="c5 c20"
                           >
                             Asset management
                           </h2>
                         </div>
                         <div
-                          class="c20"
+                          class="c21"
                         >
                           <div
-                            class="c21"
+                            class="c22"
                           >
                             <div
                               class=""
                             >
                               <div
-                                class="c22"
+                                class="c23"
                               >
                                 <div
-                                  class="c23 c24"
+                                  class="c24"
                                 >
                                   <div
-                                    class="c3"
+                                    class="c4"
                                   >
                                     <label
-                                      class="c4 c25"
+                                      class="c5 c25"
                                       for="1"
                                     >
                                       <div
-                                        class="c3"
+                                        class="c4"
                                       >
                                         Responsive friendly upload
                                       </div>
@@ -636,7 +632,7 @@ describe('Upload | SettingsPage', () => {
                                         class="c30 c31 c32"
                                       >
                                         <span
-                                          class="c4 c33"
+                                          class="c5 c33"
                                         >
                                           Off
                                         </span>
@@ -646,7 +642,7 @@ describe('Upload | SettingsPage', () => {
                                         class="c30 c31 c34"
                                       >
                                         <span
-                                          class="c4 c35"
+                                          class="c5 c35"
                                         >
                                           On
                                         </span>
@@ -666,7 +662,7 @@ describe('Upload | SettingsPage', () => {
                                     </div>
                                   </label>
                                   <p
-                                    class="c4 c37"
+                                    class="c5 c37"
                                     id="1-hint"
                                   >
                                     Enabling this option will generate multiple formats (small, medium and large) of the uploaded asset.
@@ -676,26 +672,26 @@ describe('Upload | SettingsPage', () => {
                             </div>
                           </div>
                           <div
-                            class="c21"
+                            class="c22"
                           >
                             <div
                               class=""
                             >
                               <div
-                                class="c22"
+                                class="c23"
                               >
                                 <div
-                                  class="c23 c24"
+                                  class="c24"
                                 >
                                   <div
-                                    class="c3"
+                                    class="c4"
                                   >
                                     <label
-                                      class="c4 c25"
+                                      class="c5 c25"
                                       for="3"
                                     >
                                       <div
-                                        class="c3"
+                                        class="c4"
                                       >
                                         Size optimization
                                       </div>
@@ -718,7 +714,7 @@ describe('Upload | SettingsPage', () => {
                                         class="c30 c31 c34"
                                       >
                                         <span
-                                          class="c4 c38"
+                                          class="c5 c38"
                                         >
                                           Off
                                         </span>
@@ -728,7 +724,7 @@ describe('Upload | SettingsPage', () => {
                                         class="c30 c31 c32"
                                       >
                                         <span
-                                          class="c4 c33"
+                                          class="c5 c33"
                                         >
                                           On
                                         </span>
@@ -747,7 +743,7 @@ describe('Upload | SettingsPage', () => {
                                     </div>
                                   </label>
                                   <p
-                                    class="c4 c37"
+                                    class="c5 c37"
                                     id="3-hint"
                                   >
                                     Enabling this option will reduce the image size and slightly reduce its quality.
@@ -757,26 +753,26 @@ describe('Upload | SettingsPage', () => {
                             </div>
                           </div>
                           <div
-                            class="c21"
+                            class="c22"
                           >
                             <div
                               class=""
                             >
                               <div
-                                class="c22"
+                                class="c23"
                               >
                                 <div
-                                  class="c23 c24"
+                                  class="c24"
                                 >
                                   <div
-                                    class="c3"
+                                    class="c4"
                                   >
                                     <label
-                                      class="c4 c25"
+                                      class="c5 c25"
                                       for="5"
                                     >
                                       <div
-                                        class="c3"
+                                        class="c4"
                                       >
                                         Auto orientation
                                       </div>
@@ -799,7 +795,7 @@ describe('Upload | SettingsPage', () => {
                                         class="c30 c31 c32"
                                       >
                                         <span
-                                          class="c4 c33"
+                                          class="c5 c33"
                                         >
                                           Off
                                         </span>
@@ -809,7 +805,7 @@ describe('Upload | SettingsPage', () => {
                                         class="c30 c31 c34"
                                       >
                                         <span
-                                          class="c4 c35"
+                                          class="c5 c35"
                                         >
                                           On
                                         </span>
@@ -829,7 +825,7 @@ describe('Upload | SettingsPage', () => {
                                     </div>
                                   </label>
                                   <p
-                                    class="c4 c37"
+                                    class="c5 c37"
                                     id="5-hint"
                                   >
                                     Enabling this option will automatically rotate the image according to EXIF orientation tag.
diff --git a/packages/core/upload/package.json b/packages/core/upload/package.json
index ef9fc7ed50..40a0ea4eb9 100644
--- a/packages/core/upload/package.json
+++ b/packages/core/upload/package.json
@@ -23,9 +23,9 @@
     "test:front:watch:ce": "cross-env IS_EE=false jest --config ./jest.config.front.js --watchAll"
   },
   "dependencies": {
-    "@strapi/design-system": "1.6.4",
+    "@strapi/design-system": "1.6.5",
     "@strapi/helper-plugin": "4.7.1",
-    "@strapi/icons": "1.6.4",
+    "@strapi/icons": "1.6.5",
     "@strapi/provider-upload-local": "4.7.1",
     "@strapi/utils": "4.7.1",
     "axios": "1.2.2",
diff --git a/packages/plugins/color-picker/admin/src/components/tests/__snapshots__/color-picker-input.test.js.snap b/packages/plugins/color-picker/admin/src/components/tests/__snapshots__/color-picker-input.test.js.snap
index e2a525a226..ec962c106b 100644
--- a/packages/plugins/color-picker/admin/src/components/tests/__snapshots__/color-picker-input.test.js.snap
+++ b/packages/plugins/color-picker/admin/src/components/tests/__snapshots__/color-picker-input.test.js.snap
@@ -148,7 +148,9 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
 }
 
 <div>
-  <div>
+  <div
+    class=""
+  >
     <div
       class="c0"
     >
diff --git a/packages/plugins/color-picker/package.json b/packages/plugins/color-picker/package.json
index 6cc4f126e2..ca6acf9b6f 100644
--- a/packages/plugins/color-picker/package.json
+++ b/packages/plugins/color-picker/package.json
@@ -9,9 +9,9 @@
     "displayName": "Color Picker"
   },
   "dependencies": {
-    "@strapi/design-system": "1.6.4",
+    "@strapi/design-system": "1.6.5",
     "@strapi/helper-plugin": "4.7.1",
-    "@strapi/icons": "1.6.4",
+    "@strapi/icons": "1.6.5",
     "prop-types": "^15.7.2",
     "react-colorful": "5.6.1",
     "react-intl": "6.2.8"
diff --git a/packages/plugins/documentation/package.json b/packages/plugins/documentation/package.json
index 1d96afeaa9..f51d5c4c40 100644
--- a/packages/plugins/documentation/package.json
+++ b/packages/plugins/documentation/package.json
@@ -24,9 +24,9 @@
     "test": "echo \"no tests yet\""
   },
   "dependencies": {
-    "@strapi/design-system": "1.6.4",
+    "@strapi/design-system": "1.6.5",
     "@strapi/helper-plugin": "4.7.1",
-    "@strapi/icons": "1.6.4",
+    "@strapi/icons": "1.6.5",
     "@strapi/utils": "4.7.1",
     "bcryptjs": "2.4.3",
     "cheerio": "^1.0.0-rc.12",
diff --git a/packages/plugins/graphql/package.json b/packages/plugins/graphql/package.json
index 65e928b1c5..3af6e26fec 100644
--- a/packages/plugins/graphql/package.json
+++ b/packages/plugins/graphql/package.json
@@ -29,9 +29,9 @@
   "dependencies": {
     "@graphql-tools/schema": "8.5.1",
     "@graphql-tools/utils": "^8.12.0",
-    "@strapi/design-system": "1.6.4",
+    "@strapi/design-system": "1.6.5",
     "@strapi/helper-plugin": "4.7.1",
-    "@strapi/icons": "1.6.4",
+    "@strapi/icons": "1.6.5",
     "@strapi/utils": "4.7.1",
     "apollo-server-core": "3.11.1",
     "apollo-server-koa": "3.10.0",
diff --git a/packages/plugins/i18n/admin/src/components/LocaleSelect/tests/__snapshots__/LocaleSelect.test.js.snap b/packages/plugins/i18n/admin/src/components/LocaleSelect/tests/__snapshots__/LocaleSelect.test.js.snap
index bd3d7437b2..85c666f296 100644
--- a/packages/plugins/i18n/admin/src/components/LocaleSelect/tests/__snapshots__/LocaleSelect.test.js.snap
+++ b/packages/plugins/i18n/admin/src/components/LocaleSelect/tests/__snapshots__/LocaleSelect.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LocaleSelect shows an aria-busy element when loading the data 1`] = `
-.c9 {
+.c8 {
   padding-left: 12px;
 }
 
@@ -17,9 +17,10 @@ exports[`LocaleSelect shows an aria-busy element when loading the data 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -33,7 +34,7 @@ exports[`LocaleSelect shows an aria-busy element when loading the data 1`] = `
   flex-direction: row;
 }
 
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -50,22 +51,13 @@ exports[`LocaleSelect shows an aria-busy element when loading the data 1`] = `
   flex-wrap: wrap;
 }
 
-.c3 {
+.c2 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c2 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c2 > * + * {
-  margin-top: 4px;
-}
-
 .c0 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
@@ -78,7 +70,7 @@ exports[`LocaleSelect shows an aria-busy element when loading the data 1`] = `
   width: 1px;
 }
 
-.c5 {
+.c4 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -93,12 +85,12 @@ exports[`LocaleSelect shows an aria-busy element when loading the data 1`] = `
   transition-duration: 0.2s;
 }
 
-.c5:focus-within {
+.c4:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c7 {
+.c6 {
   display: grid;
   -webkit-flex: 1 1 0%;
   -ms-flex: 1 1 0%;
@@ -106,7 +98,7 @@ exports[`LocaleSelect shows an aria-busy element when loading the data 1`] = `
   position: relative;
 }
 
-.c8 {
+.c7 {
   display: inline-grid;
   grid-area: 1 / 1 / 2 / 3;
   grid-template-columns: 0px min-content;
@@ -121,35 +113,35 @@ exports[`LocaleSelect shows an aria-busy element when loading the data 1`] = `
   outline: none;
 }
 
-.c8:focus-visible {
+.c7:focus-visible {
   outline: none;
   box-shadow: none;
   outline-offset: 0;
 }
 
-.c8[aria-disabled='true'] {
+.c7[aria-disabled='true'] {
   background: inherit;
   color: inherit;
   cursor: not-allowed;
 }
 
-.c10 {
+.c9 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c10 svg {
+.c9 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c10 svg path {
+.c9 svg path {
   fill: #666687;
 }
 
-.c11 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -158,11 +150,13 @@ exports[`LocaleSelect shows an aria-busy element when loading the data 1`] = `
   border: none;
 }
 
-.c11 svg {
+.c10 svg {
   width: 0.375rem;
 }
 
-<div>
+<div
+  class=""
+>
   <div
     aria-atomic="false"
     aria-live="polite"
@@ -170,23 +164,23 @@ exports[`LocaleSelect shows an aria-busy element when loading the data 1`] = `
     class="c0"
   />
   <div
-    class="c1 c2"
+    class="c1"
   >
     <label
-      class="c3"
+      class="c2"
       for="1"
     >
       <div
-        class="c4"
+        class="c3"
       >
         Locales
       </div>
     </label>
     <div
-      class="c4 c5"
+      class="c3 c4"
     >
       <div
-        class="c6 c7"
+        class="c5 c6"
         wrap="wrap"
       >
         
@@ -199,7 +193,7 @@ exports[`LocaleSelect shows an aria-busy element when loading the data 1`] = `
           aria-haspopup="listbox"
           autocomplete="off"
           autocorrect="off"
-          class="c8"
+          class="c7"
           id="1"
           placeholder="Select"
           role="combobox"
@@ -209,12 +203,12 @@ exports[`LocaleSelect shows an aria-busy element when loading the data 1`] = `
         />
       </div>
       <div
-        class="c4"
+        class="c3"
       >
         
         <button
           aria-hidden="true"
-          class="c9 c10 c11"
+          class="c8 c9 c10"
           tabindex="-1"
           type="button"
         >
diff --git a/packages/plugins/i18n/package.json b/packages/plugins/i18n/package.json
index 5e2ce93bcd..a55fd7d179 100644
--- a/packages/plugins/i18n/package.json
+++ b/packages/plugins/i18n/package.json
@@ -24,9 +24,9 @@
     "test:unit": "jest --verbose"
   },
   "dependencies": {
-    "@strapi/design-system": "1.6.4",
+    "@strapi/design-system": "1.6.5",
     "@strapi/helper-plugin": "4.7.1",
-    "@strapi/icons": "1.6.4",
+    "@strapi/icons": "1.6.5",
     "@strapi/utils": "4.7.1",
     "formik": "2.2.9",
     "immer": "9.0.19",
diff --git a/packages/plugins/sentry/package.json b/packages/plugins/sentry/package.json
index 2450fa571f..2c39fe3cfc 100644
--- a/packages/plugins/sentry/package.json
+++ b/packages/plugins/sentry/package.json
@@ -25,9 +25,9 @@
   },
   "dependencies": {
     "@sentry/node": "6.19.7",
-    "@strapi/design-system": "1.6.4",
+    "@strapi/design-system": "1.6.5",
     "@strapi/helper-plugin": "4.7.1",
-    "@strapi/icons": "1.6.4"
+    "@strapi/icons": "1.6.5"
   },
   "devDependencies": {
     "react": "^17.0.2",
diff --git a/packages/plugins/users-permissions/admin/src/components/FormModal/Input/tests/index.test.js b/packages/plugins/users-permissions/admin/src/components/FormModal/Input/tests/index.test.js
index d9d05e15a3..0e1279b9ca 100644
--- a/packages/plugins/users-permissions/admin/src/components/FormModal/Input/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/components/FormModal/Input/tests/index.test.js
@@ -46,9 +46,10 @@ describe('<Input />', () => {
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
+        gap: 4px;
       }
 
-      .c3 {
+      .c2 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -62,7 +63,7 @@ describe('<Input />', () => {
         flex-direction: row;
       }
 
-      .c4 {
+      .c3 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -80,23 +81,14 @@ describe('<Input />', () => {
         justify-content: space-between;
       }
 
-      .c2 {
+      .c1 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #32324d;
       }
 
-      .c1 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c1 > * + * {
-        margin-top: 4px;
-      }
-
-      .c6 {
+      .c5 {
         border: none;
         border-radius: 4px;
         padding-bottom: 0.65625rem;
@@ -111,36 +103,36 @@ describe('<Input />', () => {
         background: inherit;
       }
 
-      .c6::-webkit-input-placeholder {
+      .c5::-webkit-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c6::-moz-placeholder {
+      .c5::-moz-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c6:-ms-input-placeholder {
+      .c5:-ms-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c6::placeholder {
+      .c5::placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c6[aria-disabled='true'] {
+      .c5[aria-disabled='true'] {
         color: inherit;
       }
 
-      .c6:focus {
+      .c5:focus {
         outline: none;
         box-shadow: none;
       }
 
-      .c5 {
+      .c4 {
         border: 1px solid #dcdce4;
         border-radius: 4px;
         background: #ffffff;
@@ -152,35 +144,37 @@ describe('<Input />', () => {
         transition-duration: 0.2s;
       }
 
-      .c5:focus-within {
+      .c4:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
       <div>
-        <div>
+        <div
+          class=""
+        >
           <div
-            class="c0 c1"
+            class="c0"
           >
             <label
-              class="c2"
+              class="c1"
               for="1"
             >
               <div
-                class="c3"
+                class="c2"
               >
                 Enabled
               </div>
             </label>
             <div
-              class="c4 c5"
+              class="c3 c4"
             >
               <input
                 aria-disabled="false"
                 aria-invalid="false"
                 aria-label="test"
                 aria-required="false"
-                class="c6"
+                class="c5"
                 id="1"
                 name="test"
                 placeholder=""
diff --git a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
index ca3cd7eab1..e7977455e6 100644
--- a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
@@ -70,12 +70,16 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         padding-left: 56px;
       }
 
-      .c11 {
+      .c3 {
+        min-width: 0;
+      }
+
+      .c12 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c6 {
+      .c7 {
         background: #4945ff;
         padding: 8px;
         padding-right: 16px;
@@ -86,7 +90,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         cursor: pointer;
       }
 
-      .c12 {
+      .c13 {
         background: #ffffff;
         padding-top: 24px;
         padding-right: 32px;
@@ -142,7 +146,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         justify-content: space-between;
       }
 
-      .c3 {
+      .c4 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -156,7 +160,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         flex-direction: row;
       }
 
-      .c7 {
+      .c8 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -171,7 +175,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         gap: 8px;
       }
 
-      .c13 {
+      .c14 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -186,7 +190,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         gap: 16px;
       }
 
-      .c17 {
+      .c18 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -198,6 +202,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
+        gap: 4px;
       }
 
       .c36 {
@@ -218,21 +223,21 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         justify-content: center;
       }
 
-      .c5 {
+      .c6 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c10 {
+      .c11 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c14 {
+      .c15 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
@@ -278,35 +283,26 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         text-transform: uppercase;
       }
 
-      .c18 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c18 > * + * {
-        margin-top: 4px;
-      }
-
-      .c8 {
+      .c9 {
         position: relative;
         outline: none;
       }
 
-      .c8 svg {
+      .c9 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c8 svg > g,
-      .c8 svg path {
+      .c9 svg > g,
+      .c9 svg path {
         fill: #ffffff;
       }
 
-      .c8[aria-disabled='true'] {
+      .c9[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c8:after {
+      .c9:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -321,11 +317,11 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         border: 2px solid transparent;
       }
 
-      .c8:focus-visible {
+      .c9:focus-visible {
         outline: none;
       }
 
-      .c8:focus-visible:after {
+      .c9:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -348,48 +344,48 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         width: 1px;
       }
 
-      .c9 {
+      .c10 {
         height: 2rem;
       }
 
-      .c9[aria-disabled='true'] {
+      .c10[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c9[aria-disabled='true'] .c4 {
+      .c10[aria-disabled='true'] .c5 {
         color: #666687;
       }
 
-      .c9[aria-disabled='true'] svg > g,.c9[aria-disabled='true'] svg path {
+      .c10[aria-disabled='true'] svg > g,.c10[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c9[aria-disabled='true']:active {
+      .c10[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c9[aria-disabled='true']:active .c4 {
+      .c10[aria-disabled='true']:active .c5 {
         color: #666687;
       }
 
-      .c9[aria-disabled='true']:active svg > g,.c9[aria-disabled='true']:active svg path {
+      .c10[aria-disabled='true']:active svg > g,.c10[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c9:hover {
+      .c10:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c9:active {
+      .c10:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c9 svg > g,
-      .c9 svg path {
+      .c10 svg > g,
+      .c10 svg path {
         fill: #ffffff;
       }
 
@@ -591,13 +587,13 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         width: 100%;
       }
 
-      .c15 {
+      .c16 {
         display: grid;
         grid-template-columns: repeat(12,1fr);
         gap: 24px;
       }
 
-      .c16 {
+      .c17 {
         grid-column: span 6;
         max-width: 100%;
       }
@@ -688,13 +684,13 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
       }
 
       @media (max-width:68.75rem) {
-        .c16 {
+        .c17 {
           grid-column: span 12;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c16 {
+        .c17 {
           grid-column: span;
         }
       }
@@ -745,17 +741,17 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                 class="c2"
               >
                 <div
-                  class="c3"
+                  class="c3 c4"
                 >
                   <h1
-                    class="c4 c5"
+                    class="c5 c6"
                   >
                     Advanced Settings
                   </h1>
                 </div>
                 <button
                   aria-disabled="false"
-                  class="c6 c7 c8 c9"
+                  class="c7 c8 c9 c10"
                   type="submit"
                 >
                   <div
@@ -776,7 +772,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                     </svg>
                   </div>
                   <span
-                    class="c4 c10"
+                    class="c5 c11"
                   >
                     Save
                   </span>
@@ -785,44 +781,46 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
             </div>
           </div>
           <div
-            class="c11"
+            class="c12"
           >
             <div
-              class="c12"
+              class="c13"
             >
               <div
-                class="c13"
+                class="c14"
               >
                 <h2
-                  class="c4 c14"
+                  class="c5 c15"
                 >
                   Settings
                 </h2>
                 <div
-                  class="c15"
+                  class="c16"
                 >
                   <div
-                    class="c16"
+                    class="c17"
                   >
                     <div
                       class=""
                     >
-                      <div>
+                      <div
+                        class=""
+                      >
                         <div
-                          class="c17 c18"
+                          class="c18"
                         >
                           <label
-                            class="c4 c19"
+                            class="c5 c19"
                             for="1"
                           >
                             <div
-                              class="c3"
+                              class="c4"
                             >
                               Default role for authenticated users
                             </div>
                           </label>
                           <div
-                            class="c3 c20"
+                            class="c4 c20"
                           >
                             <button
                               aria-describedby="1-hint"
@@ -838,13 +836,13 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                               class="c2 c22"
                             >
                               <div
-                                class="c3"
+                                class="c4"
                               >
                                 <div
                                   class="c23"
                                 >
                                   <span
-                                    class="c4 c24"
+                                    class="c5 c24"
                                     id="1-content"
                                   >
                                     Authenticated
@@ -852,7 +850,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                                 </div>
                               </div>
                               <div
-                                class="c3"
+                                class="c4"
                               >
                                 <button
                                   aria-hidden="true"
@@ -880,7 +878,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                             </div>
                           </div>
                           <p
-                            class="c4 c28"
+                            class="c5 c28"
                             id="1-hint"
                           >
                             It will attach the new authenticated user to the selected role.
@@ -899,17 +897,17 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                         class="c30"
                       >
                         <div
-                          class="c17 c18"
+                          class="c18"
                         >
                           <div
-                            class="c3"
+                            class="c4"
                           >
                             <label
-                              class="c4 c19"
+                              class="c5 c19"
                               for="3"
                             >
                               <div
-                                class="c3"
+                                class="c4"
                               >
                                 One account per email address
                               </div>
@@ -932,7 +930,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                                 class="c35 c36 c37"
                               >
                                 <span
-                                  class="c4 c38"
+                                  class="c5 c38"
                                 >
                                   False
                                 </span>
@@ -942,7 +940,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                                 class="c35 c36 c39"
                               >
                                 <span
-                                  class="c4 c40"
+                                  class="c5 c40"
                                 >
                                   True
                                 </span>
@@ -959,7 +957,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                             </div>
                           </label>
                           <p
-                            class="c4 c28"
+                            class="c5 c28"
                             id="3-hint"
                           >
                             Disallow the user to create multiple accounts using the same email address with different authentication providers.
@@ -978,17 +976,17 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                         class="c30"
                       >
                         <div
-                          class="c17 c18"
+                          class="c18"
                         >
                           <div
-                            class="c3"
+                            class="c4"
                           >
                             <label
-                              class="c4 c19"
+                              class="c5 c19"
                               for="5"
                             >
                               <div
-                                class="c3"
+                                class="c4"
                               >
                                 Enable sign-ups
                               </div>
@@ -1011,7 +1009,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                                 class="c35 c36 c37"
                               >
                                 <span
-                                  class="c4 c38"
+                                  class="c5 c38"
                                 >
                                   False
                                 </span>
@@ -1021,7 +1019,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                                 class="c35 c36 c39"
                               >
                                 <span
-                                  class="c4 c40"
+                                  class="c5 c40"
                                 >
                                   True
                                 </span>
@@ -1038,7 +1036,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                             </div>
                           </label>
                           <p
-                            class="c4 c28"
+                            class="c5 c28"
                             id="5-hint"
                           >
                             When disabled (OFF), the registration process is forbidden. No one can subscribe anymore no matter the used provider.
@@ -1054,16 +1052,18 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                       class=""
                     >
                       <div>
-                        <div>
+                        <div
+                          class=""
+                        >
                           <div
-                            class="c17 c18"
+                            class="c18"
                           >
                             <label
-                              class="c4 c19"
+                              class="c5 c19"
                               for="email_reset_password"
                             >
                               <div
-                                class="c3"
+                                class="c4"
                               >
                                 Reset password page
                               </div>
@@ -1085,7 +1085,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                               />
                             </div>
                             <p
-                              class="c4 c28"
+                              class="c5 c28"
                               id="email_reset_password-hint"
                             >
                               URL of your application's reset password page.
@@ -1105,17 +1105,17 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                         class="c30"
                       >
                         <div
-                          class="c17 c18"
+                          class="c18"
                         >
                           <div
-                            class="c3"
+                            class="c4"
                           >
                             <label
-                              class="c4 c19"
+                              class="c5 c19"
                               for="7"
                             >
                               <div
-                                class="c3"
+                                class="c4"
                               >
                                 Enable email confirmation
                               </div>
@@ -1138,7 +1138,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                                 class="c35 c36 c37"
                               >
                                 <span
-                                  class="c4 c38"
+                                  class="c5 c38"
                                 >
                                   False
                                 </span>
@@ -1148,7 +1148,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                                 class="c35 c36 c39"
                               >
                                 <span
-                                  class="c4 c40"
+                                  class="c5 c40"
                                 >
                                   True
                                 </span>
@@ -1165,7 +1165,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                             </div>
                           </label>
                           <p
-                            class="c4 c28"
+                            class="c5 c28"
                             id="7-hint"
                           >
                             When enabled (ON), new registered users receive a confirmation email.
@@ -1181,16 +1181,18 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                       class=""
                     >
                       <div>
-                        <div>
+                        <div
+                          class=""
+                        >
                           <div
-                            class="c17 c18"
+                            class="c18"
                           >
                             <label
-                              class="c4 c19"
+                              class="c5 c19"
                               for="email_confirmation_redirection"
                             >
                               <div
-                                class="c3"
+                                class="c4"
                               >
                                 Redirection url
                               </div>
@@ -1205,6 +1207,8 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                                 aria-invalid="false"
                                 aria-required="false"
                                 class="c46"
+                                data-disabled=""
+                                disabled=""
                                 id="email_confirmation_redirection"
                                 name="email_confirmation_redirection"
                                 placeholder="ex: https://youtfrontend.com/email-confirmation"
@@ -1213,7 +1217,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                               />
                             </div>
                             <p
-                              class="c4 c28"
+                              class="c5 c28"
                               id="email_confirmation_redirection-hint"
                             >
                               After you confirmed your email, choose where you will be redirected.
diff --git a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js
index c77db9561f..cae53a5694 100644
--- a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js
@@ -73,35 +73,39 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         padding-left: 56px;
       }
 
-      .c5 {
+      .c3 {
+        min-width: 0;
+      }
+
+      .c6 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c6 {
+      .c7 {
         background: #ffffff;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c8 {
+      .c9 {
         position: relative;
       }
 
-      .c10 {
+      .c11 {
         padding-right: 24px;
         padding-left: 24px;
       }
 
-      .c15 {
+      .c16 {
         width: 1%;
       }
 
-      .c21 {
+      .c22 {
         color: #666687;
       }
 
-      .c24 {
+      .c25 {
         padding: 8px;
         border-radius: 4px;
         border-width: 0;
@@ -129,7 +133,7 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         justify-content: space-between;
       }
 
-      .c3 {
+      .c4 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -143,7 +147,7 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         flex-direction: row;
       }
 
-      .c25 {
+      .c26 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -161,14 +165,14 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         justify-content: center;
       }
 
-      .c4 {
+      .c5 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c19 {
+      .c20 {
         font-weight: 600;
         font-size: 0.6875rem;
         line-height: 1.45;
@@ -176,36 +180,36 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         color: #666687;
       }
 
-      .c23 {
+      .c24 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #32324d;
       }
 
-      .c22 path {
+      .c23 path {
         fill: #666687;
       }
 
-      .c26 {
+      .c27 {
         position: relative;
         outline: none;
       }
 
-      .c26 svg {
+      .c27 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c26 svg > g,
-      .c26 svg path {
+      .c27 svg > g,
+      .c27 svg path {
         fill: #ffffff;
       }
 
-      .c26[aria-disabled='true'] {
+      .c27[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c26:after {
+      .c27:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -220,11 +224,11 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         border: 2px solid transparent;
       }
 
-      .c26:focus-visible {
+      .c27:focus-visible {
         outline: none;
       }
 
-      .c26:focus-visible:after {
+      .c27:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -235,7 +239,7 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         border: 2px solid #4945ff;
       }
 
-      .c17 {
+      .c18 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -247,22 +251,22 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         width: 1px;
       }
 
-      .c27 svg > g,
-      .c27 svg path {
+      .c28 svg > g,
+      .c28 svg path {
         fill: #8e8ea9;
       }
 
-      .c27:hover svg > g,
-      .c27:hover svg path {
+      .c28:hover svg > g,
+      .c28:hover svg path {
         fill: #666687;
       }
 
-      .c27:active svg > g,
-      .c27:active svg path {
+      .c28:active svg > g,
+      .c28:active svg path {
         fill: #a5a5ba;
       }
 
-      .c27[aria-disabled='true'] svg path {
+      .c28[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
@@ -270,17 +274,17 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         outline: none;
       }
 
-      .c7 {
+      .c8 {
         overflow: hidden;
         border: 1px solid #eaeaef;
       }
 
-      .c12 {
+      .c13 {
         width: 100%;
         white-space: nowrap;
       }
 
-      .c9:before {
+      .c10:before {
         background: linear-gradient(90deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -290,7 +294,7 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         left: 0;
       }
 
-      .c9:after {
+      .c10:after {
         background: linear-gradient(270deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -301,50 +305,50 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         top: 0;
       }
 
-      .c11 {
+      .c12 {
         overflow-x: auto;
       }
 
-      .c20 tr:last-of-type {
+      .c21 tr:last-of-type {
         border-bottom: none;
       }
 
-      .c13 {
-        border-bottom: 1px solid #eaeaef;
-      }
-
       .c14 {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c14 td,
-      .c14 th {
+      .c15 {
+        border-bottom: 1px solid #eaeaef;
+      }
+
+      .c15 td,
+      .c15 th {
         padding: 16px;
       }
 
-      .c14 td:first-of-type,
-      .c14 th:first-of-type {
+      .c15 td:first-of-type,
+      .c15 th:first-of-type {
         padding: 0 4px;
       }
 
-      .c14 th {
+      .c15 th {
         padding-top: 0;
         padding-bottom: 0;
         height: 3.5rem;
       }
 
-      .c16 {
+      .c17 {
         vertical-align: middle;
         text-align: left;
         color: #666687;
         outline-offset: -4px;
       }
 
-      .c16 input {
+      .c17 input {
         vertical-align: sub;
       }
 
-      .c18 svg {
+      .c19 svg {
         height: 0.25rem;
       }
 
@@ -366,10 +370,10 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
               class="c2"
             >
               <div
-                class="c3"
+                class="c3 c4"
               >
                 <h1
-                  class="c4"
+                  class="c5"
                 >
                   Email templates
                 </h1>
@@ -378,105 +382,105 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
           </div>
         </div>
         <div
-          class="c5"
+          class="c6"
         >
           <div
-            class="c6 c7"
+            class="c7 c8"
           >
             <div
-              class="c8 c9"
+              class="c9 c10"
             >
               <div
-                class="c10 c11"
+                class="c11 c12"
               >
                 <table
                   aria-colcount="3"
                   aria-rowcount="3"
-                  class="c12"
+                  class="c13"
                   role="grid"
                 >
                   <thead
-                    class="c13"
+                    class="c14"
                   >
                     <tr
                       aria-rowindex="1"
-                      class="c14"
+                      class="c15"
                     >
                       <th
                         aria-colindex="1"
-                        class="c15 c16"
+                        class="c16 c17"
                         role="gridcell"
                         tabindex="0"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <div
-                            class="c17"
+                            class="c18"
                           >
                             icon
                           </div>
                           <span
-                            class="c18"
+                            class="c19"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="2"
-                        class="c16"
+                        class="c17"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <span
-                            class="c19"
+                            class="c20"
                           >
                             name
                           </span>
                           <span
-                            class="c18"
+                            class="c19"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="3"
-                        class="c15 c16"
+                        class="c16 c17"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <div
-                          class="c3"
+                          class="c4"
                         >
                           <div
-                            class="c17"
+                            class="c18"
                           >
                             action
                           </div>
                           <span
-                            class="c18"
+                            class="c19"
                           />
                         </div>
                       </th>
                     </tr>
                   </thead>
                   <tbody
-                    class="c20"
+                    class="c21"
                   >
                     <tr
                       aria-rowindex="2"
-                      class="c14"
+                      class="c15"
                       style="cursor: pointer;"
                     >
                       <td
                         aria-colindex="1"
-                        class="c16"
+                        class="c17"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <div
-                          class="c21 c22"
+                          class="c22 c23"
                         >
                           <svg
                             aria-label="Reset password"
@@ -497,12 +501,12 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                       </td>
                       <td
                         aria-colindex="2"
-                        class="c16"
+                        class="c17"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c23"
+                          class="c24"
                         >
                           Reset password
                         </span>
@@ -510,19 +514,19 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                       <td
                         aria-colindex="3"
                         aria-hidden="true"
-                        class="c16"
+                        class="c17"
                         role="button"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="0"
-                            class="c24 c25 c26 c27"
+                            class="c25 c26 c27 c28"
                             tabindex="-1"
                             type="button"
                           >
                             <span
-                              class="c17"
+                              class="c18"
                             >
                               Edit a template
                             </span>
@@ -548,17 +552,17 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                     </tr>
                     <tr
                       aria-rowindex="3"
-                      class="c14"
+                      class="c15"
                       style="cursor: pointer;"
                     >
                       <td
                         aria-colindex="1"
-                        class="c16"
+                        class="c17"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <div
-                          class="c21 c22"
+                          class="c22 c23"
                         >
                           <svg
                             aria-label="Email address confirmation"
@@ -577,12 +581,12 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                       </td>
                       <td
                         aria-colindex="2"
-                        class="c16"
+                        class="c17"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c23"
+                          class="c24"
                         >
                           Email address confirmation
                         </span>
@@ -590,19 +594,19 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                       <td
                         aria-colindex="3"
                         aria-hidden="true"
-                        class="c16"
+                        class="c17"
                         role="button"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="1"
-                            class="c24 c25 c26 c27"
+                            class="c25 c26 c27 c28"
                             tabindex="-1"
                             type="button"
                           >
                             <span
-                              class="c17"
+                              class="c18"
                             >
                               Edit a template
                             </span>
diff --git a/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js
index 52183a74a3..e00f6cb563 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js
@@ -67,6 +67,10 @@ describe('Admin | containers | ProvidersPage', () => {
         padding-left: 56px;
       }
 
+      .c6 {
+        min-width: 0;
+      }
+
       .c5 {
         -webkit-align-items: center;
         -webkit-box-align: center;
@@ -85,7 +89,7 @@ describe('Admin | containers | ProvidersPage', () => {
         justify-content: space-between;
       }
 
-      .c6 {
+      .c7 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -99,7 +103,7 @@ describe('Admin | containers | ProvidersPage', () => {
         flex-direction: row;
       }
 
-      .c8 {
+      .c9 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -117,14 +121,14 @@ describe('Admin | containers | ProvidersPage', () => {
         justify-content: space-around;
       }
 
-      .c7 {
+      .c8 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c10 {
+      .c11 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -136,7 +140,7 @@ describe('Admin | containers | ProvidersPage', () => {
         width: 1px;
       }
 
-      .c11 {
+      .c12 {
         -webkit-animation: gzYjWD 1s infinite linear;
         animation: gzYjWD 1s infinite linear;
         will-change: transform;
@@ -155,7 +159,7 @@ describe('Admin | containers | ProvidersPage', () => {
         outline: none;
       }
 
-      .c9 {
+      .c10 {
         height: 100vh;
       }
 
@@ -182,10 +186,10 @@ describe('Admin | containers | ProvidersPage', () => {
                   class="c5"
                 >
                   <div
-                    class="c6"
+                    class="c6 c7"
                   >
                     <h1
-                      class="c7"
+                      class="c8"
                     >
                       Providers
                     </h1>
@@ -194,7 +198,7 @@ describe('Admin | containers | ProvidersPage', () => {
               </div>
             </div>
             <div
-              class="c8 c9"
+              class="c9 c10"
               data-testid="loader"
             >
               <div
@@ -202,13 +206,13 @@ describe('Admin | containers | ProvidersPage', () => {
                 role="alert"
               >
                 <div
-                  class="c10"
+                  class="c11"
                 >
                   Loading content.
                 </div>
                 <img
                   aria-hidden="true"
-                  class="c11"
+                  class="c12"
                   src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2MyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQyLjU1NjMgMTEuOTgxNkMzOS40ODQgMTAuMzA3MSAzNS44NTc1IDkuMjkwOTcgMzIuMzM1NCA5LjEzNTIxQzI4LjY0NDMgOC45Mjg4OCAyNC44Mjk1IDkuNzIzMTggMjEuMzMzNiAxMS40MTI5QzIwLjkxMjMgMTEuNTkwMSAyMC41Mzc2IDExLjgxMDEgMjAuMTcyMiAxMi4wMjQ5TDIwLjAxMDggMTIuMTE3OUMxOS44Nzc0IDEyLjE5NTEgMTkuNzQ0MSAxMi4yNzI0IDE5LjYwOCAxMi4zNTM2QzE5LjMyNTMgMTIuNTE0NiAxOS4wNDkyIDEyLjY3NDQgMTguNzU0NCAxMi44NzkyQzE4LjU0NjMgMTMuMDMyOSAxOC4zMzk1IDEzLjE3NTkgMTguMTMwMSAxMy4zMjNDMTcuNTY1OCAxMy43MjA4IDE2Ljk4NjggMTQuMTMxNyAxNi40OTgzIDE0LjU5NzlDMTQuODQ3NiAxNS45NTI0IDEzLjU1NzEgMTcuNjA3NSAxMi42MDcxIDE4LjkyMTRDMTAuNDM2NSAyMi4xNTY2IDkuMDg2MjIgMjUuOTU2NyA4LjgwNzAyIDI5LjYxNDNMOC43NzY0IDMwLjE1ODhDOC43MzMyOCAzMC45MTk2IDguNjg0NzYgMzEuNzA1NyA4Ljc1MzUzIDMyLjQ1NTVDOC43NjY0OCAzMi42MDg0IDguNzY2MSAzMi43NjM4IDguNzc1MDYgMzIuOTE0QzguNzg4OTUgMzMuMjI5IDguODAxNTIgMzMuNTM3MyA4Ljg0NiAzMy44NjcyTDkuMDczOTYgMzUuNDIyMUM5LjA5NzU2IDM1LjU3NjQgOS4xMTk4IDM1Ljc0MTMgOS4xNjMzIDM1LjkyNjNMOS42NTkxOSAzNy45MjcyTDEwLjEzOCAzOS4yODIzQzEwLjI3MjkgMzkuNjY3MyAxMC40MTU4IDQwLjA3NTEgMTAuNiA0MC40M0MxMi4wMjkyIDQzLjYzNyAxNC4xNDI1IDQ2LjQ1NzggMTYuNzA2MyA0OC41ODVDMTkuMDUwOCA1MC41Mjk2IDIxLjgyNCA1Mi4wMDIzIDI0Ljc0OTEgNTIuODQ1MkwyNi4yMzcxIDUzLjIzNzZDMjYuMzc4MSA1My4yNjkzIDI2LjQ5MjYgNTMuMjg4OSAyNi42MDMxIDUzLjMwNThMMjYuNzc3NSA1My4zMzExQzI3LjAwNTIgNTMuMzYzNiAyNy4yMTk1IDUzLjM5ODYgMjcuNDQ0NSA1My40MzVDMjcuODU5OCA1My41MDc2IDI4LjI2NzIgNTMuNTc0OCAyOC43MDc5IDUzLjYxODNMMzAuNTY0MSA1My43MjI5QzMwLjk1MTYgNTMuNzI0OSAzMS4zMzUyIDUzLjcwNjggMzEuNzA4MSA1My42ODc0QzMxLjkwMzkgNTMuNjgxIDMyLjA5ODQgNTMuNjY4MSAzMi4zMjg4IDUzLjY2MkMzNC41MjUzIDUzLjQ3NzIgMzYuNTEwNiA1My4wNjM0IDM4LjA1MTYgNTIuNDY1MkMzOC4xNzY5IDUyLjQxNzEgMzguMzAwOCA1Mi4zNzk2IDM4LjQyMzQgNTIuMzM1NUMzOC42NzI3IDUyLjI0OTkgMzguOTI1OSA1Mi4xNjcgMzkuMTQzMiA1Mi4wNTk5TDQwLjg1OTEgNTEuMjYyNkw0Mi41NzAyIDUwLjI2NkM0Mi45MDA5IDUwLjA2ODIgNDMuMDIwNSA0OS42NDE0IDQyLjgyODIgNDkuMjk4NEM0Mi42MzIgNDguOTUyNiA0Mi4yMDM0IDQ4LjgzMDggNDEuODYzNCA0OS4wMTY2TDQwLjE3OTIgNDkuOTIxOEwzOC40OTk1IDUwLjYyMjRDMzguMzE2OSA1MC42OTUzIDM4LjEyMSA1MC43NTM0IDM3LjkyMjQgNTAuODE1NUMzNy43ODM4IDUwLjg0ODkgMzcuNjUxOCA1MC44OTgzIDM3LjUwMTIgNTAuOTQwOEMzNi4wNzExIDUxLjQzNSAzNC4yNDQ1IDUxLjc0MjUgMzIuMjQ0IDUxLjgzNDZDMzIuMDQ0MiA1MS44MzgzIDMxLjg0NzEgNTEuODM3OSAzMS42NTQgNTEuODQwM0MzMS4zMDUxIDUxLjg0MTQgMzAuOTYwMiA1MS44NDUxIDMwLjYzOTIgNTEuODMwNUwyOC45MTc3IDUxLjY3MjVDMjguNTQ3NiA1MS42MTkgMjguMTY5NSA1MS41NDI3IDI3Ljc4NDggNTEuNDY3OEMyNy41NjM5IDUxLjQxNjcgMjcuMzM3NiA1MS4zNzM3IDI3LjEyOTkgNTEuMzM3NEwyNi45NTI5IDUxLjI5ODdDMjYuODcwNCA1MS4yODM0IDI2Ljc3NzIgNTEuMjY2NyAyNi43MzMzIDUxLjI1NDNMMjUuMzQ2NiA1MC44MzIyQzIyLjc2NTEgNDkuOTc4OSAyMC4zMyA0OC41NzI5IDE4LjI5NDIgNDYuNzU1N0MxNi4xMDU2IDQ0Ljc5NTEgMTQuMzMzOSA0Mi4yMzM1IDEzLjE3NDIgMzkuMzU4MkMxMi4wMjc2IDM2LjYwMTMgMTEuNTk4OCAzMy4yNzkyIDExLjk3MTYgMzAuMDA3NkMxMi4zMTQ1IDI3LjAyMTMgMTMuMzk0OCAyNC4xNjM1IDE1LjE4NTggMjEuNTA4M0MxNS4zMDM0IDIxLjMzMzkgMTUuNDIxIDIxLjE1OTYgMTUuNTIxMiAyMS4wMTk2QzE2LjQzMDkgMTkuODY4OCAxNy41NDA4IDE4LjU1ODkgMTguOTQ4MyAxNy40OTZDMTkuMzM2NyAxNy4xNTI1IDE5Ljc4NjIgMTYuODU2IDIwLjI2MTEgMTYuNTQ3OEMyMC40ODc4IDE2LjQwMDkgMjAuNzA3OSAxNi4yNTUzIDIwLjg5MDcgMTYuMTMwNkMyMS4wOTc0IDE2LjAwNDggMjEuMzE4OCAxNS44ODMxIDIxLjUzNDggMTUuNzY5NEMyMS42NzYxIDE1LjY5NzUgMjEuODE2MiAxNS42MTkgMjEuOTM4OCAxNS41NTc2TDIyLjEwMDIgMTUuNDY0NkMyMi40MDAyIDE1LjMwMzcgMjIuNjc0OSAxNS4xNTQ2IDIyLjk5MDggMTUuMDM5TDI0LjExODYgMTQuNTcxNUMyNC4zMzk5IDE0LjQ4NDQgMjQuNTcxOCAxNC40MTU5IDI0Ljc5OTcgMTQuMzQ0N0MyNC45NTMgMTQuMjk4MiAyNS4wOTgyIDE0LjI2MzUgMjUuMjYzNSAxNC4yMDc4QzI1Ljc4NiAxNC4wMTgyIDI2LjMyODMgMTMuOTExMiAyNi45MTA1IDEzLjc5NjVDMjcuMTE3IDEzLjc1NzEgMjcuMzMwMiAxMy43MTYzIDI3LjU2MDggMTMuNjU4NUMyNy43NTUzIDEzLjYxMSAyNy45NzM3IDEzLjU5NjkgMjguMjA4MiAxMy41NzYyQzI4LjM2NCAxMy41NjAzIDI4LjUxNzIgMTMuNTQ4MyAyOC42MzE4IDEzLjUzMzNDMjguNzg3NiAxMy41MTczIDI4LjkzNDIgMTMuNTA2NiAyOS4wOTI3IDEzLjQ4NjdDMjkuMzI4NSAxMy40NTU1IDI5LjU0NTYgMTMuNDM0NyAyOS43NDk0IDEzLjQzMzdDMzAuMDIzNyAxMy40NCAzMC4yOTk0IDEzLjQzNTcgMzAuNTc3NyAxMy40Mjc0QzMxLjA4MTEgMTMuNDIxIDMxLjU1NzkgMTMuNDE5NyAzMi4wMzE4IDEzLjQ5MTRDMzQuOTY2NCAxMy43MzUyIDM3LjcxNDQgMTQuNjA4NSA0MC4yMDUyIDE2LjA4NjhDNDIuMzQ4OSAxNy4zNjU1IDQ0LjI3MTYgMTkuMTUyNSA0NS43NjA3IDIxLjI2NEM0Ny4wMjU1IDIzLjA2MjggNDcuOTc1NiAyNS4wNTI4IDQ4LjQ5MjggMjcuMDM5M0M0OC41NzIgMjcuMzE3NiA0OC42Mjk5IDI3LjU5MzEgNDguNjgzOSAyNy44NjU5QzQ4LjcxNTQgMjguMDQyOCA0OC43NTYzIDI4LjIxNDUgNDguNzg5MiAyOC4zNjM2QzQ4LjgwMzcgMjguNDU0MSA0OC44MjA4IDI4LjU0MDYgNDguODQ0NSAyOC42MjU4QzQ4Ljg3NDkgMjguNzQ0MyA0OC44OTg2IDI4Ljg2NCA0OC45MTE2IDI4Ljk2NTFMNDguOTc5MyAyOS42MDQ3QzQ4Ljk5MjIgMjkuNzc0OCA0OS4wMTMyIDI5LjkzMzEgNDkuMDMwMSAzMC4wODg3QzQ5LjA2NjggMzAuMzI2OCA0OS4wODg5IDMwLjU2MDggNDkuMDk2NCAzMC43NTYxTDQ5LjEwODMgMzEuOTAwMUM0OS4xMzEyIDMyLjMzMDcgNDkuMDg5IDMyLjcxMTYgNDkuMDUyMiAzMy4wNjczQzQ5LjAzODQgMzMuMjU5OCA0OS4wMTI2IDMzLjQ0NDMgNDkuMDEyMyAzMy41ODI0QzQ4Ljk5NjEgMzMuNjkyNiA0OC45OTE4IDMzLjc5MzUgNDguOTgzNiAzMy44OTE3QzQ4Ljk3NTMgMzQuMDA3MiA0OC45NzI0IDM0LjExNDggNDguOTQxNCAzNC4yNTU0TDQ4LjU0NDkgMzYuMzA1OUM0OC4zMTM0IDM3Ljg2MjMgNDkuMzc5MyAzOS4zMzY1IDUwLjk0ODggMzkuNTgyMkM1Mi4wNDE3IDM5Ljc2MDEgNTMuMTUzNiAzOS4yODE5IDUzLjc3MTEgMzguMzY2NEM1NC4wMDYzIDM4LjAxNzYgNTQuMTYwNCAzNy42MjU3IDU0LjIyMjcgMzcuMjA2NEw1NC41MjE3IDM1LjI1NzRDNTQuNTUxNCAzNS4wNzU2IDU0LjU3MiAzNC44MyA1NC41ODQ2IDM0LjU3OTFMNTQuNjAyOCAzNC4yMzM4QzU0LjYwOTggMzQuMDU5OCA1NC42MjIzIDMzLjg3NzkgNTQuNjM0NyAzMy42Nzg4QzU0LjY3MzQgMzMuMTA1MiA1NC43MTYzIDMyLjQ0NzkgNTQuNjYxOSAzMS44MDU4TDU0LjU4NjcgMzAuNDI4OUM1NC41NjIyIDMwLjA5NTIgNTQuNTA5NyAyOS43NiA1NC40NTU5IDI5LjQxODFDNTQuNDMxIDI5LjI1NzIgNTQuNDA0OCAyOS4wODk2IDU0LjM4MjYgMjguOTA3NEw1NC4yNjg3IDI4LjEwNEM1NC4yMzMyIDI3LjkyNDQgNTQuMTgwNCAyNy43MjczIDU0LjEzMjkgMjcuNTM5Nkw1NC4wNjQzIDI3LjI0NTRDNTQuMDE5NSAyNy4wNzEgNTMuOTc3MyAyNi44OTI3IDUzLjkzMzggMjYuNzA3NkM1My44NDU1IDI2LjMzMDkgNTMuNzQ3OSAyNS45NDIyIDUzLjYxMyAyNS41NTcxQzUyLjg0IDIzLjAyOTIgNTEuNTM4MyAyMC41MTk0IDQ5LjgzMzggMTguMjc5OUM0Ny44NTQ0IDE1LjY4MiA0NS4zMzMzIDEzLjUwODcgNDIuNTU2MyAxMS45ODE2WiIgZmlsbD0iIzQ5NDVGRiIvPgo8L3N2Zz4K"
                 />
               </div>
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
index 5a7ee3d3b4..16a46fe050 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
@@ -71,12 +71,16 @@ describe('Admin | containers | RoleCreatePage', () => {
         padding-left: 56px;
       }
 
-      .c13 {
+      .c4 {
+        min-width: 0;
+      }
+
+      .c14 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c15 {
+      .c16 {
         background: #ffffff;
         padding-top: 24px;
         padding-right: 32px;
@@ -86,7 +90,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c7 {
+      .c8 {
         background: #4945ff;
         padding: 8px;
         padding-right: 16px;
@@ -110,11 +114,11 @@ describe('Admin | containers | RoleCreatePage', () => {
         padding-left: 32px;
       }
 
-      .c36 {
+      .c35 {
         border-radius: 4px;
       }
 
-      .c38 {
+      .c37 {
         background: #f6f6f9;
         padding-top: 24px;
         padding-right: 24px;
@@ -122,21 +126,21 @@ describe('Admin | containers | RoleCreatePage', () => {
         padding-left: 24px;
       }
 
-      .c40 {
+      .c39 {
         max-width: 100%;
         -webkit-flex: 1;
         -ms-flex: 1;
         flex: 1;
       }
 
-      .c42 {
+      .c41 {
         min-width: 0;
         -webkit-flex: 1;
         -ms-flex: 1;
         flex: 1;
       }
 
-      .c47 {
+      .c46 {
         background: #dcdce4;
         border-radius: 50%;
         width: 2rem;
@@ -147,12 +151,12 @@ describe('Admin | containers | RoleCreatePage', () => {
         cursor: pointer;
       }
 
-      .c49 {
+      .c48 {
         color: #666687;
         width: 0.6875rem;
       }
 
-      .c52 {
+      .c51 {
         background: #eaeaef;
         padding-top: 24px;
         padding-right: 32px;
@@ -178,7 +182,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         justify-content: space-between;
       }
 
-      .c4 {
+      .c5 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -192,7 +196,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         flex-direction: row;
       }
 
-      .c14 {
+      .c15 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -207,7 +211,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         gap: 32px;
       }
 
-      .c16 {
+      .c17 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -222,7 +226,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         gap: 16px;
       }
 
-      .c20 {
+      .c21 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -234,9 +238,10 @@ describe('Admin | containers | RoleCreatePage', () => {
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
+        gap: 4px;
       }
 
-      .c8 {
+      .c9 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -281,22 +286,22 @@ describe('Admin | containers | RoleCreatePage', () => {
         gap: 8px;
       }
 
-      .c35 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
+      .c40 {
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        gap: 4px;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        gap: 12px;
       }
 
-      .c48 {
+      .c47 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -317,20 +322,20 @@ describe('Admin | containers | RoleCreatePage', () => {
         justify-content: center;
       }
 
-      .c6 {
+      .c7 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c12 {
+      .c13 {
         font-size: 1rem;
         line-height: 1.5;
         color: #666687;
       }
 
-      .c17 {
+      .c18 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
@@ -344,7 +349,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         color: #32324d;
       }
 
-      .c11 {
+      .c12 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
@@ -357,13 +362,13 @@ describe('Admin | containers | RoleCreatePage', () => {
         color: #666687;
       }
 
-      .c45 {
+      .c44 {
         font-size: 0.75rem;
         line-height: 1.33;
         color: #4945ff;
       }
 
-      .c46 {
+      .c45 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
@@ -374,64 +379,46 @@ describe('Admin | containers | RoleCreatePage', () => {
         color: #4a4a6a;
       }
 
-      .c37 {
+      .c36 {
         border: 1px solid #f6f6f9;
       }
 
-      .c37:hover:not([aria-disabled='true']) {
+      .c36:hover:not([aria-disabled='true']) {
         border: 1px solid #4945ff;
       }
 
-      .c37:hover:not([aria-disabled='true']) .c5 {
+      .c36:hover:not([aria-disabled='true']) .c6 {
         color: #4945ff;
       }
 
-      .c37:hover:not([aria-disabled='true']) > .c2 {
+      .c36:hover:not([aria-disabled='true']) > .c2 {
         background: #f0f0ff;
       }
 
-      .c37:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
+      .c36:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
         background: #d9d8ff;
       }
 
-      .c50 path {
+      .c49 path {
         fill: #666687;
       }
 
-      .c21 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c21 > * + * {
-        margin-top: 4px;
-      }
-
-      .c41 > * {
-        margin-left: 0;
-        margin-right: 0;
-      }
-
-      .c41 > * + * {
-        margin-left: 12px;
-      }
-
-      .c43 {
+      .c42 {
         background: transparent;
         border: none;
         position: relative;
         outline: none;
       }
 
-      .c43[aria-disabled='true'] {
+      .c42[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c43[aria-disabled='true'] svg path {
+      .c42[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c43 svg {
+      .c42 svg {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -439,11 +426,11 @@ describe('Admin | containers | RoleCreatePage', () => {
         font-size: 0.625rem;
       }
 
-      .c43 svg path {
+      .c42 svg path {
         fill: #4945ff;
       }
 
-      .c43:after {
+      .c42:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -458,11 +445,11 @@ describe('Admin | containers | RoleCreatePage', () => {
         border: 2px solid transparent;
       }
 
-      .c43:focus-visible {
+      .c42:focus-visible {
         outline: none;
       }
 
-      .c43:focus-visible:after {
+      .c42:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -473,52 +460,52 @@ describe('Admin | containers | RoleCreatePage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c44 {
+      .c43 {
         text-align: left;
       }
 
-      .c44 > span {
+      .c43 > span {
         max-width: 100%;
       }
 
-      .c44 svg {
+      .c43 svg {
         width: 0.875rem;
         height: 0.875rem;
       }
 
-      .c44 svg path {
+      .c43 svg path {
         fill: #8e8ea9;
       }
 
-      .c39 {
+      .c38 {
         min-height: 5.5rem;
         border-radius: 4px;
       }
 
-      .c39:hover svg path {
+      .c38:hover svg path {
         fill: #4945ff;
       }
 
-      .c9 {
+      .c10 {
         position: relative;
         outline: none;
       }
 
-      .c9 svg {
+      .c10 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c9 svg > g,
-      .c9 svg path {
+      .c10 svg > g,
+      .c10 svg path {
         fill: #ffffff;
       }
 
-      .c9[aria-disabled='true'] {
+      .c10[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c9:after {
+      .c10:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -533,11 +520,11 @@ describe('Admin | containers | RoleCreatePage', () => {
         border: 2px solid transparent;
       }
 
-      .c9:focus-visible {
+      .c10:focus-visible {
         outline: none;
       }
 
-      .c9:focus-visible:after {
+      .c10:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -548,48 +535,48 @@ describe('Admin | containers | RoleCreatePage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c10 {
+      .c11 {
         height: 2rem;
       }
 
-      .c10[aria-disabled='true'] {
+      .c11[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c10[aria-disabled='true'] .c5 {
+      .c11[aria-disabled='true'] .c6 {
         color: #666687;
       }
 
-      .c10[aria-disabled='true'] svg > g,.c10[aria-disabled='true'] svg path {
+      .c11[aria-disabled='true'] svg > g,.c11[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c10[aria-disabled='true']:active {
+      .c11[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c10[aria-disabled='true']:active .c5 {
+      .c11[aria-disabled='true']:active .c6 {
         color: #666687;
       }
 
-      .c10[aria-disabled='true']:active svg > g,.c10[aria-disabled='true']:active svg path {
+      .c11[aria-disabled='true']:active svg > g,.c11[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c10:hover {
+      .c11:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c10:active {
+      .c11:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c10 svg > g,
-      .c10 svg path {
+      .c11 svg > g,
+      .c11 svg path {
         fill: #ffffff;
       }
 
@@ -654,7 +641,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c18 {
+      .c19 {
         display: grid;
         grid-template-columns: repeat(12,1fr);
         gap: 16px;
@@ -665,7 +652,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         grid-template-columns: repeat(12,1fr);
       }
 
-      .c19 {
+      .c20 {
         grid-column: span 6;
         max-width: 100%;
       }
@@ -675,7 +662,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         max-width: 100%;
       }
 
-      .c51 {
+      .c50 {
         grid-column: span 5;
         max-width: 100%;
       }
@@ -778,13 +765,13 @@ describe('Admin | containers | RoleCreatePage', () => {
       }
 
       @media (max-width:68.75rem) {
-        .c19 {
+        .c20 {
           grid-column: span;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c19 {
+        .c20 {
           grid-column: span;
         }
       }
@@ -802,13 +789,13 @@ describe('Admin | containers | RoleCreatePage', () => {
       }
 
       @media (max-width:68.75rem) {
-        .c51 {
+        .c50 {
           grid-column: span;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c51 {
+        .c50 {
           grid-column: span;
         }
       }
@@ -834,17 +821,17 @@ describe('Admin | containers | RoleCreatePage', () => {
                 class="c2 c3"
               >
                 <div
-                  class="c2 c4"
+                  class="c2 c4 c5"
                 >
                   <h1
-                    class="c5 c6"
+                    class="c6 c7"
                   >
                     Create a role
                   </h1>
                 </div>
                 <button
                   aria-disabled="false"
-                  class="c2 c7 c8 c9 c10"
+                  class="c2 c8 c9 c10 c11"
                   type="submit"
                 >
                   <div
@@ -865,56 +852,58 @@ describe('Admin | containers | RoleCreatePage', () => {
                     </svg>
                   </div>
                   <span
-                    class="c5 c11"
+                    class="c6 c12"
                   >
                     Save
                   </span>
                 </button>
               </div>
               <p
-                class="c5 c12"
+                class="c6 c13"
               >
                 Define the rights given to the role
               </p>
             </div>
           </div>
           <div
-            class="c13"
+            class="c14"
           >
             <div
-              class="c2 c14"
+              class="c2 c15"
             >
               <div
-                class="c15"
+                class="c16"
               >
                 <div
-                  class="c2 c16"
+                  class="c2 c17"
                 >
                   <h2
-                    class="c5 c17"
+                    class="c6 c18"
                   >
                     Role details
                   </h2>
                   <div
-                    class="c18"
+                    class="c19"
                   >
                     <div
-                      class="c19"
+                      class="c20"
                     >
                       <div
                         class=""
                       >
                         <div>
-                          <div>
+                          <div
+                            class=""
+                          >
                             <div
-                              class="c2 c20 c21"
+                              class="c2 c21"
                             >
                               <label
-                                class="c5 c22"
+                                class="c6 c22"
                                 for="1"
                               >
                                 <div
-                                  class="c2 c4"
+                                  class="c2 c5"
                                 >
                                   Name
                                 </div>
@@ -938,7 +927,7 @@ describe('Admin | containers | RoleCreatePage', () => {
                       </div>
                     </div>
                     <div
-                      class="c19"
+                      class="c20"
                     >
                       <div
                         class=""
@@ -946,19 +935,21 @@ describe('Admin | containers | RoleCreatePage', () => {
                         <div
                           class="c25"
                         >
-                          <div>
+                          <div
+                            class=""
+                          >
                             <div
-                              class="c2 c20 c21"
+                              class="c2 c21"
                             >
                               <div
-                                class="c2 c4"
+                                class="c2 c5"
                               >
                                 <label
-                                  class="c5 c22"
+                                  class="c6 c22"
                                   for="3"
                                 >
                                   <div
-                                    class="c2 c4"
+                                    class="c2 c5"
                                   >
                                     Description
                                   </div>
@@ -999,50 +990,50 @@ describe('Admin | containers | RoleCreatePage', () => {
                         class="c2 c33"
                       >
                         <h2
-                          class="c5 c17"
+                          class="c6 c18"
                         >
                           Permissions
                         </h2>
                         <p
-                          class="c5 c34"
+                          class="c6 c34"
                         >
                           Only actions bound by a route are listed below.
                         </p>
                       </div>
                       <div
-                        class="c2 c35"
+                        class="c2 c21"
                       >
                         <div
                           aria-disabled="false"
-                          class="c36 c37"
+                          class="c35 c36"
                           data-strapi-expanded="false"
                         >
                           <div
-                            class="c2 c38 c3 c39"
+                            class="c2 c37 c3 c38"
                           >
                             <div
-                              class="c2 c40 c4 c41"
+                              class="c2 c39 c40"
                             >
                               <button
                                 aria-controls="accordion-content-4"
                                 aria-disabled="false"
                                 aria-expanded="false"
                                 aria-labelledby="accordion-label-4"
-                                class="c2 c42 c4 c43 c44"
+                                class="c2 c41 c5 c42 c43"
                                 data-strapi-accordion-toggle="true"
                                 type="button"
                               >
                                 <span
-                                  class="c5 c45"
+                                  class="c6 c44"
                                 >
                                   <span
-                                    class="c5 c46"
+                                    class="c6 c45"
                                     id="accordion-label-4"
                                   >
                                     Address
                                   </span>
                                   <p
-                                    class="c5 c34"
+                                    class="c6 c34"
                                     id="accordion-desc-4"
                                   >
                                     Define all allowed actions for the api::address plugin.
@@ -1050,15 +1041,15 @@ describe('Admin | containers | RoleCreatePage', () => {
                                 </span>
                               </button>
                               <div
-                                class="c2 c4 c41"
+                                class="c2 c40"
                               >
                                 <span
                                   aria-hidden="true"
-                                  class="c2 c47 c48"
+                                  class="c2 c46 c47"
                                   data-strapi-dropdown="true"
                                 >
                                   <svg
-                                    class="c49 c50"
+                                    class="c48 c49"
                                     fill="none"
                                     height="1rem"
                                     viewBox="0 0 14 8"
@@ -1082,22 +1073,22 @@ describe('Admin | containers | RoleCreatePage', () => {
                   </div>
                 </div>
                 <div
-                  class="c51"
+                  class="c50"
                 >
                   <div
-                    class="c52"
+                    class="c51"
                     style="min-height: 100%;"
                   >
                     <div
                       class="c2 c33"
                     >
                       <h3
-                        class="c5 c17"
+                        class="c6 c18"
                       >
                         Advanced settings
                       </h3>
                       <p
-                        class="c5 c34"
+                        class="c6 c34"
                       >
                         Select the application's actions or the plugin's actions and click on the cog icon to display the bound route
                       </p>
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
index a1b1550803..632d394d8e 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
@@ -69,7 +69,11 @@ describe('Admin | containers | RoleEditPage', () => {
         padding-bottom: 8px;
       }
 
-      .c12 {
+      .c9 {
+        min-width: 0;
+      }
+
+      .c13 {
         background: #4945ff;
         padding: 8px;
         padding-right: 16px;
@@ -80,12 +84,12 @@ describe('Admin | containers | RoleEditPage', () => {
         cursor: pointer;
       }
 
-      .c18 {
+      .c19 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c20 {
+      .c21 {
         background: #ffffff;
         padding-top: 24px;
         padding-right: 32px;
@@ -108,11 +112,11 @@ describe('Admin | containers | RoleEditPage', () => {
         padding-left: 32px;
       }
 
-      .c41 {
+      .c40 {
         border-radius: 4px;
       }
 
-      .c43 {
+      .c42 {
         background: #f6f6f9;
         padding-top: 24px;
         padding-right: 24px;
@@ -120,21 +124,21 @@ describe('Admin | containers | RoleEditPage', () => {
         padding-left: 24px;
       }
 
-      .c45 {
+      .c44 {
         max-width: 100%;
         -webkit-flex: 1;
         -ms-flex: 1;
         flex: 1;
       }
 
-      .c47 {
+      .c46 {
         min-width: 0;
         -webkit-flex: 1;
         -ms-flex: 1;
         flex: 1;
       }
 
-      .c52 {
+      .c51 {
         background: #dcdce4;
         border-radius: 50%;
         width: 2rem;
@@ -145,12 +149,12 @@ describe('Admin | containers | RoleEditPage', () => {
         cursor: pointer;
       }
 
-      .c54 {
+      .c53 {
         color: #666687;
         width: 0.6875rem;
       }
 
-      .c57 {
+      .c56 {
         background: #eaeaef;
         padding-top: 24px;
         padding-right: 32px;
@@ -176,7 +180,7 @@ describe('Admin | containers | RoleEditPage', () => {
         justify-content: space-between;
       }
 
-      .c9 {
+      .c10 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -190,7 +194,7 @@ describe('Admin | containers | RoleEditPage', () => {
         flex-direction: row;
       }
 
-      .c13 {
+      .c14 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -205,7 +209,7 @@ describe('Admin | containers | RoleEditPage', () => {
         gap: 8px;
       }
 
-      .c19 {
+      .c20 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -220,7 +224,7 @@ describe('Admin | containers | RoleEditPage', () => {
         gap: 32px;
       }
 
-      .c21 {
+      .c22 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -235,7 +239,7 @@ describe('Admin | containers | RoleEditPage', () => {
         gap: 16px;
       }
 
-      .c25 {
+      .c26 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -247,6 +251,7 @@ describe('Admin | containers | RoleEditPage', () => {
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
+        gap: 4px;
       }
 
       .c37 {
@@ -279,22 +284,22 @@ describe('Admin | containers | RoleEditPage', () => {
         gap: 8px;
       }
 
-      .c40 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
+      .c45 {
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        gap: 4px;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        gap: 12px;
       }
 
-      .c53 {
+      .c52 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -315,27 +320,27 @@ describe('Admin | containers | RoleEditPage', () => {
         justify-content: center;
       }
 
-      .c11 {
+      .c12 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c16 {
+      .c17 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c17 {
+      .c18 {
         font-size: 1rem;
         line-height: 1.5;
         color: #666687;
       }
 
-      .c22 {
+      .c23 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
@@ -355,13 +360,13 @@ describe('Admin | containers | RoleEditPage', () => {
         color: #666687;
       }
 
-      .c50 {
+      .c49 {
         font-size: 0.75rem;
         line-height: 1.33;
         color: #4945ff;
       }
 
-      .c51 {
+      .c50 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
@@ -372,64 +377,46 @@ describe('Admin | containers | RoleEditPage', () => {
         color: #4a4a6a;
       }
 
-      .c42 {
+      .c41 {
         border: 1px solid #f6f6f9;
       }
 
-      .c42:hover:not([aria-disabled='true']) {
+      .c41:hover:not([aria-disabled='true']) {
         border: 1px solid #4945ff;
       }
 
-      .c42:hover:not([aria-disabled='true']) .c10 {
+      .c41:hover:not([aria-disabled='true']) .c11 {
         color: #4945ff;
       }
 
-      .c42:hover:not([aria-disabled='true']) > .c7 {
+      .c41:hover:not([aria-disabled='true']) > .c7 {
         background: #f0f0ff;
       }
 
-      .c42:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
+      .c41:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
         background: #d9d8ff;
       }
 
-      .c55 path {
+      .c54 path {
         fill: #666687;
       }
 
-      .c26 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c26 > * + * {
-        margin-top: 4px;
-      }
-
-      .c46 > * {
-        margin-left: 0;
-        margin-right: 0;
-      }
-
-      .c46 > * + * {
-        margin-left: 12px;
-      }
-
-      .c48 {
+      .c47 {
         background: transparent;
         border: none;
         position: relative;
         outline: none;
       }
 
-      .c48[aria-disabled='true'] {
+      .c47[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c48[aria-disabled='true'] svg path {
+      .c47[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c48 svg {
+      .c47 svg {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -437,11 +424,11 @@ describe('Admin | containers | RoleEditPage', () => {
         font-size: 0.625rem;
       }
 
-      .c48 svg path {
+      .c47 svg path {
         fill: #4945ff;
       }
 
-      .c48:after {
+      .c47:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -456,11 +443,11 @@ describe('Admin | containers | RoleEditPage', () => {
         border: 2px solid transparent;
       }
 
-      .c48:focus-visible {
+      .c47:focus-visible {
         outline: none;
       }
 
-      .c48:focus-visible:after {
+      .c47:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -471,52 +458,52 @@ describe('Admin | containers | RoleEditPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c49 {
+      .c48 {
         text-align: left;
       }
 
-      .c49 > span {
+      .c48 > span {
         max-width: 100%;
       }
 
-      .c49 svg {
+      .c48 svg {
         width: 0.875rem;
         height: 0.875rem;
       }
 
-      .c49 svg path {
+      .c48 svg path {
         fill: #8e8ea9;
       }
 
-      .c44 {
+      .c43 {
         min-height: 5.5rem;
         border-radius: 4px;
       }
 
-      .c44:hover svg path {
+      .c43:hover svg path {
         fill: #4945ff;
       }
 
-      .c14 {
+      .c15 {
         position: relative;
         outline: none;
       }
 
-      .c14 svg {
+      .c15 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c14 svg > g,
-      .c14 svg path {
+      .c15 svg > g,
+      .c15 svg path {
         fill: #ffffff;
       }
 
-      .c14[aria-disabled='true'] {
+      .c15[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c14:after {
+      .c15:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -531,11 +518,11 @@ describe('Admin | containers | RoleEditPage', () => {
         border: 2px solid transparent;
       }
 
-      .c14:focus-visible {
+      .c15:focus-visible {
         outline: none;
       }
 
-      .c14:focus-visible:after {
+      .c15:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -546,48 +533,48 @@ describe('Admin | containers | RoleEditPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c15 {
+      .c16 {
         height: 2rem;
       }
 
-      .c15[aria-disabled='true'] {
+      .c16[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c15[aria-disabled='true'] .c10 {
+      .c16[aria-disabled='true'] .c11 {
         color: #666687;
       }
 
-      .c15[aria-disabled='true'] svg > g,.c15[aria-disabled='true'] svg path {
+      .c16[aria-disabled='true'] svg > g,.c16[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c15[aria-disabled='true']:active {
+      .c16[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c15[aria-disabled='true']:active .c10 {
+      .c16[aria-disabled='true']:active .c11 {
         color: #666687;
       }
 
-      .c15[aria-disabled='true']:active svg > g,.c15[aria-disabled='true']:active svg path {
+      .c16[aria-disabled='true']:active svg > g,.c16[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c15:hover {
+      .c16:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c15:active {
+      .c16:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c15 svg > g,
-      .c15 svg path {
+      .c16 svg > g,
+      .c16 svg path {
         fill: #ffffff;
       }
 
@@ -652,7 +639,7 @@ describe('Admin | containers | RoleEditPage', () => {
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c23 {
+      .c24 {
         display: grid;
         grid-template-columns: repeat(12,1fr);
         gap: 16px;
@@ -663,7 +650,7 @@ describe('Admin | containers | RoleEditPage', () => {
         grid-template-columns: repeat(12,1fr);
       }
 
-      .c24 {
+      .c25 {
         grid-column: span 6;
         max-width: 100%;
       }
@@ -673,7 +660,7 @@ describe('Admin | containers | RoleEditPage', () => {
         max-width: 100%;
       }
 
-      .c56 {
+      .c55 {
         grid-column: span 5;
         max-width: 100%;
       }
@@ -846,13 +833,13 @@ describe('Admin | containers | RoleEditPage', () => {
       }
 
       @media (max-width:68.75rem) {
-        .c24 {
+        .c25 {
           grid-column: span;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c24 {
+        .c25 {
           grid-column: span;
         }
       }
@@ -870,13 +857,13 @@ describe('Admin | containers | RoleEditPage', () => {
       }
 
       @media (max-width:68.75rem) {
-        .c56 {
+        .c55 {
           grid-column: span;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c56 {
+        .c55 {
           grid-column: span;
         }
       }
@@ -934,17 +921,17 @@ describe('Admin | containers | RoleEditPage', () => {
                 class="c7 c8"
               >
                 <div
-                  class="c7 c9"
+                  class="c7 c9 c10"
                 >
                   <h1
-                    class="c10 c11"
+                    class="c11 c12"
                   >
                     Authenticated
                   </h1>
                 </div>
                 <button
                   aria-disabled="false"
-                  class="c7 c12 c13 c14 c15"
+                  class="c7 c13 c14 c15 c16"
                   type="submit"
                 >
                   <div
@@ -965,56 +952,58 @@ describe('Admin | containers | RoleEditPage', () => {
                     </svg>
                   </div>
                   <span
-                    class="c10 c16"
+                    class="c11 c17"
                   >
                     Save
                   </span>
                 </button>
               </div>
               <p
-                class="c10 c17"
+                class="c11 c18"
               >
                 Default role given to authenticated user.
               </p>
             </div>
           </div>
           <div
-            class="c18"
+            class="c19"
           >
             <div
-              class="c7 c19"
+              class="c7 c20"
             >
               <div
-                class="c20"
+                class="c21"
               >
                 <div
-                  class="c7 c21"
+                  class="c7 c22"
                 >
                   <h2
-                    class="c10 c22"
+                    class="c11 c23"
                   >
                     Role details
                   </h2>
                   <div
-                    class="c23"
+                    class="c24"
                   >
                     <div
-                      class="c24"
+                      class="c25"
                     >
                       <div
                         class=""
                       >
                         <div>
-                          <div>
+                          <div
+                            class=""
+                          >
                             <div
-                              class="c7 c25 c26"
+                              class="c7 c26"
                             >
                               <label
-                                class="c10 c27"
+                                class="c11 c27"
                                 for="1"
                               >
                                 <div
-                                  class="c7 c9"
+                                  class="c7 c10"
                                 >
                                   Name
                                 </div>
@@ -1038,7 +1027,7 @@ describe('Admin | containers | RoleEditPage', () => {
                       </div>
                     </div>
                     <div
-                      class="c24"
+                      class="c25"
                     >
                       <div
                         class=""
@@ -1046,19 +1035,21 @@ describe('Admin | containers | RoleEditPage', () => {
                         <div
                           class="c30"
                         >
-                          <div>
+                          <div
+                            class=""
+                          >
                             <div
-                              class="c7 c25 c26"
+                              class="c7 c26"
                             >
                               <div
-                                class="c7 c9"
+                                class="c7 c10"
                               >
                                 <label
-                                  class="c10 c27"
+                                  class="c11 c27"
                                   for="3"
                                 >
                                   <div
-                                    class="c7 c9"
+                                    class="c7 c10"
                                   >
                                     Description
                                   </div>
@@ -1101,50 +1092,50 @@ describe('Admin | containers | RoleEditPage', () => {
                         class="c7 c38"
                       >
                         <h2
-                          class="c10 c22"
+                          class="c11 c23"
                         >
                           Permissions
                         </h2>
                         <p
-                          class="c10 c39"
+                          class="c11 c39"
                         >
                           Only actions bound by a route are listed below.
                         </p>
                       </div>
                       <div
-                        class="c7 c40"
+                        class="c7 c26"
                       >
                         <div
                           aria-disabled="false"
-                          class="c41 c42"
+                          class="c40 c41"
                           data-strapi-expanded="false"
                         >
                           <div
-                            class="c7 c43 c8 c44"
+                            class="c7 c42 c8 c43"
                           >
                             <div
-                              class="c7 c45 c9 c46"
+                              class="c7 c44 c45"
                             >
                               <button
                                 aria-controls="accordion-content-4"
                                 aria-disabled="false"
                                 aria-expanded="false"
                                 aria-labelledby="accordion-label-4"
-                                class="c7 c47 c9 c48 c49"
+                                class="c7 c46 c10 c47 c48"
                                 data-strapi-accordion-toggle="true"
                                 type="button"
                               >
                                 <span
-                                  class="c10 c50"
+                                  class="c11 c49"
                                 >
                                   <span
-                                    class="c10 c51"
+                                    class="c11 c50"
                                     id="accordion-label-4"
                                   >
                                     Address
                                   </span>
                                   <p
-                                    class="c10 c39"
+                                    class="c11 c39"
                                     id="accordion-desc-4"
                                   >
                                     Define all allowed actions for the api::address plugin.
@@ -1152,15 +1143,15 @@ describe('Admin | containers | RoleEditPage', () => {
                                 </span>
                               </button>
                               <div
-                                class="c7 c9 c46"
+                                class="c7 c45"
                               >
                                 <span
                                   aria-hidden="true"
-                                  class="c7 c52 c53"
+                                  class="c7 c51 c52"
                                   data-strapi-dropdown="true"
                                 >
                                   <svg
-                                    class="c54 c55"
+                                    class="c53 c54"
                                     fill="none"
                                     height="1rem"
                                     viewBox="0 0 14 8"
@@ -1184,22 +1175,22 @@ describe('Admin | containers | RoleEditPage', () => {
                   </div>
                 </div>
                 <div
-                  class="c56"
+                  class="c55"
                 >
                   <div
-                    class="c57"
+                    class="c56"
                     style="min-height: 100%;"
                   >
                     <div
                       class="c7 c38"
                     >
                       <h3
-                        class="c10 c22"
+                        class="c11 c23"
                       >
                         Advanced settings
                       </h3>
                       <p
-                        class="c10 c39"
+                        class="c11 c39"
                       >
                         Select the application's actions or the plugin's actions and click on the cog icon to display the bound route
                       </p>
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js
index b4eebefac1..7c1a327675 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js
@@ -73,7 +73,11 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         padding-left: 56px;
       }
 
-      .c9 {
+      .c6 {
+        min-width: 0;
+      }
+
+      .c10 {
         background: #4945ff;
         padding: 8px;
         padding-right: 16px;
@@ -84,16 +88,16 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         cursor: pointer;
       }
 
-      .c15 {
+      .c16 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c16 {
+      .c17 {
         padding-bottom: 16px;
       }
 
-      .c20 {
+      .c21 {
         padding: 8px;
         border-radius: 4px;
         border-color: #dcdce4;
@@ -103,18 +107,18 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         cursor: pointer;
       }
 
-      .c24 {
+      .c25 {
         color: #32324d;
       }
 
-      .c29 {
+      .c30 {
         background: #ffffff;
         padding: 64px;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c31 {
+      .c32 {
         padding-bottom: 24px;
       }
 
@@ -136,7 +140,7 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         justify-content: space-between;
       }
 
-      .c6 {
+      .c7 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -150,7 +154,7 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         flex-direction: row;
       }
 
-      .c10 {
+      .c11 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -165,7 +169,7 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         gap: 8px;
       }
 
-      .c17 {
+      .c18 {
         -webkit-align-items: flex-start;
         -webkit-box-align: flex-start;
         -ms-flex-align: flex-start;
@@ -183,7 +187,7 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         justify-content: space-between;
       }
 
-      .c18 {
+      .c19 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -200,7 +204,7 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         flex-wrap: wrap;
       }
 
-      .c21 {
+      .c22 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -218,7 +222,7 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         justify-content: center;
       }
 
-      .c26 {
+      .c27 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -236,57 +240,57 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         justify-content: space-around;
       }
 
-      .c8 {
+      .c9 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c13 {
+      .c14 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #ffffff;
       }
 
-      .c14 {
+      .c15 {
         font-size: 1rem;
         line-height: 1.5;
         color: #666687;
       }
 
-      .c33 {
+      .c34 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
         color: #666687;
       }
 
-      .c25 path {
+      .c26 path {
         fill: #32324d;
       }
 
-      .c11 {
+      .c12 {
         position: relative;
         outline: none;
       }
 
-      .c11 svg {
+      .c12 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c11 svg > g,
-      .c11 svg path {
+      .c12 svg > g,
+      .c12 svg path {
         fill: #ffffff;
       }
 
-      .c11[aria-disabled='true'] {
+      .c12[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c11:after {
+      .c12:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -301,11 +305,11 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         border: 2px solid transparent;
       }
 
-      .c11:focus-visible {
+      .c12:focus-visible {
         outline: none;
       }
 
-      .c11:focus-visible:after {
+      .c12:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -316,7 +320,7 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c23 {
+      .c24 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -328,58 +332,58 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         width: 1px;
       }
 
-      .c12 {
+      .c13 {
         height: 2rem;
       }
 
-      .c12[aria-disabled='true'] {
+      .c13[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c12[aria-disabled='true'] .c7 {
+      .c13[aria-disabled='true'] .c8 {
         color: #666687;
       }
 
-      .c12[aria-disabled='true'] svg > g,.c12[aria-disabled='true'] svg path {
+      .c13[aria-disabled='true'] svg > g,.c13[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c12[aria-disabled='true']:active {
+      .c13[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c12[aria-disabled='true']:active .c7 {
+      .c13[aria-disabled='true']:active .c8 {
         color: #666687;
       }
 
-      .c12[aria-disabled='true']:active svg > g,.c12[aria-disabled='true']:active svg path {
+      .c13[aria-disabled='true']:active svg > g,.c13[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c12:hover {
+      .c13:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c12:active {
+      .c13:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c12 svg > g,
-      .c12 svg path {
+      .c13 svg > g,
+      .c13 svg path {
         fill: #ffffff;
       }
 
-      .c28 {
+      .c29 {
         -webkit-animation: gzYjWD 1s infinite linear;
         animation: gzYjWD 1s infinite linear;
         will-change: transform;
       }
 
-      .c30 {
+      .c31 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -394,26 +398,26 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         text-align: center;
       }
 
-      .c32 svg {
+      .c33 svg {
         height: 5.5rem;
       }
 
-      .c22 svg > g,
-      .c22 svg path {
+      .c23 svg > g,
+      .c23 svg path {
         fill: #8e8ea9;
       }
 
-      .c22:hover svg > g,
-      .c22:hover svg path {
+      .c23:hover svg > g,
+      .c23:hover svg path {
         fill: #666687;
       }
 
-      .c22:active svg > g,
-      .c22:active svg path {
+      .c23:active svg > g,
+      .c23:active svg path {
         fill: #a5a5ba;
       }
 
-      .c22[aria-disabled='true'] svg path {
+      .c23[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
@@ -426,7 +430,7 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         overflow-x: hidden;
       }
 
-      .c19 > * + * {
+      .c20 > * + * {
         margin-left: 8px;
       }
 
@@ -434,7 +438,7 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         outline: none;
       }
 
-      .c27 {
+      .c28 {
         height: 100vh;
       }
 
@@ -462,17 +466,17 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
                   class="c5"
                 >
                   <div
-                    class="c6"
+                    class="c6 c7"
                   >
                     <h1
-                      class="c7 c8"
+                      class="c8 c9"
                     >
                       Roles
                     </h1>
                   </div>
                   <button
                     aria-disabled="false"
-                    class="c9 c10 c11 c12"
+                    class="c10 c11 c12 c13"
                     type="button"
                   >
                     <div
@@ -493,48 +497,48 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
                       </svg>
                     </div>
                     <span
-                      class="c7 c13"
+                      class="c8 c14"
                     >
                       Add new role
                     </span>
                   </button>
                 </div>
                 <p
-                  class="c7 c14"
+                  class="c8 c15"
                 >
                   List of roles
                 </p>
               </div>
             </div>
             <div
-              class="c15"
+              class="c16"
             >
               <div
-                class="c16"
+                class="c17"
               >
                 <div
-                  class="c17"
+                  class="c18"
                 >
                   <div
-                    class="c18 c19"
+                    class="c19 c20"
                     wrap="wrap"
                   >
                     <span>
                       <button
                         aria-disabled="false"
                         aria-labelledby="0"
-                        class="c20 c21 c11 c22"
+                        class="c21 c22 c12 c23"
                         tabindex="0"
                         type="button"
                       >
                         <span
-                          class="c23"
+                          class="c24"
                         >
                           Search
                         </span>
                         <svg
                           aria-hidden="true"
-                          class="c24 c25"
+                          class="c25 c26"
                           fill="none"
                           focusable="false"
                           height="1rem"
@@ -556,10 +560,10 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
               </div>
             </div>
             <div
-              class="c15"
+              class="c16"
             >
               <div
-                class="c26 c27"
+                class="c27 c28"
                 data-testid="loader"
               >
                 <div
@@ -567,23 +571,23 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
                   role="alert"
                 >
                   <div
-                    class="c23"
+                    class="c24"
                   >
                     Loading content.
                   </div>
                   <img
                     aria-hidden="true"
-                    class="c28"
+                    class="c29"
                     src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2MyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQyLjU1NjMgMTEuOTgxNkMzOS40ODQgMTAuMzA3MSAzNS44NTc1IDkuMjkwOTcgMzIuMzM1NCA5LjEzNTIxQzI4LjY0NDMgOC45Mjg4OCAyNC44Mjk1IDkuNzIzMTggMjEuMzMzNiAxMS40MTI5QzIwLjkxMjMgMTEuNTkwMSAyMC41Mzc2IDExLjgxMDEgMjAuMTcyMiAxMi4wMjQ5TDIwLjAxMDggMTIuMTE3OUMxOS44Nzc0IDEyLjE5NTEgMTkuNzQ0MSAxMi4yNzI0IDE5LjYwOCAxMi4zNTM2QzE5LjMyNTMgMTIuNTE0NiAxOS4wNDkyIDEyLjY3NDQgMTguNzU0NCAxMi44NzkyQzE4LjU0NjMgMTMuMDMyOSAxOC4zMzk1IDEzLjE3NTkgMTguMTMwMSAxMy4zMjNDMTcuNTY1OCAxMy43MjA4IDE2Ljk4NjggMTQuMTMxNyAxNi40OTgzIDE0LjU5NzlDMTQuODQ3NiAxNS45NTI0IDEzLjU1NzEgMTcuNjA3NSAxMi42MDcxIDE4LjkyMTRDMTAuNDM2NSAyMi4xNTY2IDkuMDg2MjIgMjUuOTU2NyA4LjgwNzAyIDI5LjYxNDNMOC43NzY0IDMwLjE1ODhDOC43MzMyOCAzMC45MTk2IDguNjg0NzYgMzEuNzA1NyA4Ljc1MzUzIDMyLjQ1NTVDOC43NjY0OCAzMi42MDg0IDguNzY2MSAzMi43NjM4IDguNzc1MDYgMzIuOTE0QzguNzg4OTUgMzMuMjI5IDguODAxNTIgMzMuNTM3MyA4Ljg0NiAzMy44NjcyTDkuMDczOTYgMzUuNDIyMUM5LjA5NzU2IDM1LjU3NjQgOS4xMTk4IDM1Ljc0MTMgOS4xNjMzIDM1LjkyNjNMOS42NTkxOSAzNy45MjcyTDEwLjEzOCAzOS4yODIzQzEwLjI3MjkgMzkuNjY3MyAxMC40MTU4IDQwLjA3NTEgMTAuNiA0MC40M0MxMi4wMjkyIDQzLjYzNyAxNC4xNDI1IDQ2LjQ1NzggMTYuNzA2MyA0OC41ODVDMTkuMDUwOCA1MC41Mjk2IDIxLjgyNCA1Mi4wMDIzIDI0Ljc0OTEgNTIuODQ1MkwyNi4yMzcxIDUzLjIzNzZDMjYuMzc4MSA1My4yNjkzIDI2LjQ5MjYgNTMuMjg4OSAyNi42MDMxIDUzLjMwNThMMjYuNzc3NSA1My4zMzExQzI3LjAwNTIgNTMuMzYzNiAyNy4yMTk1IDUzLjM5ODYgMjcuNDQ0NSA1My40MzVDMjcuODU5OCA1My41MDc2IDI4LjI2NzIgNTMuNTc0OCAyOC43MDc5IDUzLjYxODNMMzAuNTY0MSA1My43MjI5QzMwLjk1MTYgNTMuNzI0OSAzMS4zMzUyIDUzLjcwNjggMzEuNzA4MSA1My42ODc0QzMxLjkwMzkgNTMuNjgxIDMyLjA5ODQgNTMuNjY4MSAzMi4zMjg4IDUzLjY2MkMzNC41MjUzIDUzLjQ3NzIgMzYuNTEwNiA1My4wNjM0IDM4LjA1MTYgNTIuNDY1MkMzOC4xNzY5IDUyLjQxNzEgMzguMzAwOCA1Mi4zNzk2IDM4LjQyMzQgNTIuMzM1NUMzOC42NzI3IDUyLjI0OTkgMzguOTI1OSA1Mi4xNjcgMzkuMTQzMiA1Mi4wNTk5TDQwLjg1OTEgNTEuMjYyNkw0Mi41NzAyIDUwLjI2NkM0Mi45MDA5IDUwLjA2ODIgNDMuMDIwNSA0OS42NDE0IDQyLjgyODIgNDkuMjk4NEM0Mi42MzIgNDguOTUyNiA0Mi4yMDM0IDQ4LjgzMDggNDEuODYzNCA0OS4wMTY2TDQwLjE3OTIgNDkuOTIxOEwzOC40OTk1IDUwLjYyMjRDMzguMzE2OSA1MC42OTUzIDM4LjEyMSA1MC43NTM0IDM3LjkyMjQgNTAuODE1NUMzNy43ODM4IDUwLjg0ODkgMzcuNjUxOCA1MC44OTgzIDM3LjUwMTIgNTAuOTQwOEMzNi4wNzExIDUxLjQzNSAzNC4yNDQ1IDUxLjc0MjUgMzIuMjQ0IDUxLjgzNDZDMzIuMDQ0MiA1MS44MzgzIDMxLjg0NzEgNTEuODM3OSAzMS42NTQgNTEuODQwM0MzMS4zMDUxIDUxLjg0MTQgMzAuOTYwMiA1MS44NDUxIDMwLjYzOTIgNTEuODMwNUwyOC45MTc3IDUxLjY3MjVDMjguNTQ3NiA1MS42MTkgMjguMTY5NSA1MS41NDI3IDI3Ljc4NDggNTEuNDY3OEMyNy41NjM5IDUxLjQxNjcgMjcuMzM3NiA1MS4zNzM3IDI3LjEyOTkgNTEuMzM3NEwyNi45NTI5IDUxLjI5ODdDMjYuODcwNCA1MS4yODM0IDI2Ljc3NzIgNTEuMjY2NyAyNi43MzMzIDUxLjI1NDNMMjUuMzQ2NiA1MC44MzIyQzIyLjc2NTEgNDkuOTc4OSAyMC4zMyA0OC41NzI5IDE4LjI5NDIgNDYuNzU1N0MxNi4xMDU2IDQ0Ljc5NTEgMTQuMzMzOSA0Mi4yMzM1IDEzLjE3NDIgMzkuMzU4MkMxMi4wMjc2IDM2LjYwMTMgMTEuNTk4OCAzMy4yNzkyIDExLjk3MTYgMzAuMDA3NkMxMi4zMTQ1IDI3LjAyMTMgMTMuMzk0OCAyNC4xNjM1IDE1LjE4NTggMjEuNTA4M0MxNS4zMDM0IDIxLjMzMzkgMTUuNDIxIDIxLjE1OTYgMTUuNTIxMiAyMS4wMTk2QzE2LjQzMDkgMTkuODY4OCAxNy41NDA4IDE4LjU1ODkgMTguOTQ4MyAxNy40OTZDMTkuMzM2NyAxNy4xNTI1IDE5Ljc4NjIgMTYuODU2IDIwLjI2MTEgMTYuNTQ3OEMyMC40ODc4IDE2LjQwMDkgMjAuNzA3OSAxNi4yNTUzIDIwLjg5MDcgMTYuMTMwNkMyMS4wOTc0IDE2LjAwNDggMjEuMzE4OCAxNS44ODMxIDIxLjUzNDggMTUuNzY5NEMyMS42NzYxIDE1LjY5NzUgMjEuODE2MiAxNS42MTkgMjEuOTM4OCAxNS41NTc2TDIyLjEwMDIgMTUuNDY0NkMyMi40MDAyIDE1LjMwMzcgMjIuNjc0OSAxNS4xNTQ2IDIyLjk5MDggMTUuMDM5TDI0LjExODYgMTQuNTcxNUMyNC4zMzk5IDE0LjQ4NDQgMjQuNTcxOCAxNC40MTU5IDI0Ljc5OTcgMTQuMzQ0N0MyNC45NTMgMTQuMjk4MiAyNS4wOTgyIDE0LjI2MzUgMjUuMjYzNSAxNC4yMDc4QzI1Ljc4NiAxNC4wMTgyIDI2LjMyODMgMTMuOTExMiAyNi45MTA1IDEzLjc5NjVDMjcuMTE3IDEzLjc1NzEgMjcuMzMwMiAxMy43MTYzIDI3LjU2MDggMTMuNjU4NUMyNy43NTUzIDEzLjYxMSAyNy45NzM3IDEzLjU5NjkgMjguMjA4MiAxMy41NzYyQzI4LjM2NCAxMy41NjAzIDI4LjUxNzIgMTMuNTQ4MyAyOC42MzE4IDEzLjUzMzNDMjguNzg3NiAxMy41MTczIDI4LjkzNDIgMTMuNTA2NiAyOS4wOTI3IDEzLjQ4NjdDMjkuMzI4NSAxMy40NTU1IDI5LjU0NTYgMTMuNDM0NyAyOS43NDk0IDEzLjQzMzdDMzAuMDIzNyAxMy40NCAzMC4yOTk0IDEzLjQzNTcgMzAuNTc3NyAxMy40Mjc0QzMxLjA4MTEgMTMuNDIxIDMxLjU1NzkgMTMuNDE5NyAzMi4wMzE4IDEzLjQ5MTRDMzQuOTY2NCAxMy43MzUyIDM3LjcxNDQgMTQuNjA4NSA0MC4yMDUyIDE2LjA4NjhDNDIuMzQ4OSAxNy4zNjU1IDQ0LjI3MTYgMTkuMTUyNSA0NS43NjA3IDIxLjI2NEM0Ny4wMjU1IDIzLjA2MjggNDcuOTc1NiAyNS4wNTI4IDQ4LjQ5MjggMjcuMDM5M0M0OC41NzIgMjcuMzE3NiA0OC42Mjk5IDI3LjU5MzEgNDguNjgzOSAyNy44NjU5QzQ4LjcxNTQgMjguMDQyOCA0OC43NTYzIDI4LjIxNDUgNDguNzg5MiAyOC4zNjM2QzQ4LjgwMzcgMjguNDU0MSA0OC44MjA4IDI4LjU0MDYgNDguODQ0NSAyOC42MjU4QzQ4Ljg3NDkgMjguNzQ0MyA0OC44OTg2IDI4Ljg2NCA0OC45MTE2IDI4Ljk2NTFMNDguOTc5MyAyOS42MDQ3QzQ4Ljk5MjIgMjkuNzc0OCA0OS4wMTMyIDI5LjkzMzEgNDkuMDMwMSAzMC4wODg3QzQ5LjA2NjggMzAuMzI2OCA0OS4wODg5IDMwLjU2MDggNDkuMDk2NCAzMC43NTYxTDQ5LjEwODMgMzEuOTAwMUM0OS4xMzEyIDMyLjMzMDcgNDkuMDg5IDMyLjcxMTYgNDkuMDUyMiAzMy4wNjczQzQ5LjAzODQgMzMuMjU5OCA0OS4wMTI2IDMzLjQ0NDMgNDkuMDEyMyAzMy41ODI0QzQ4Ljk5NjEgMzMuNjkyNiA0OC45OTE4IDMzLjc5MzUgNDguOTgzNiAzMy44OTE3QzQ4Ljk3NTMgMzQuMDA3MiA0OC45NzI0IDM0LjExNDggNDguOTQxNCAzNC4yNTU0TDQ4LjU0NDkgMzYuMzA1OUM0OC4zMTM0IDM3Ljg2MjMgNDkuMzc5MyAzOS4zMzY1IDUwLjk0ODggMzkuNTgyMkM1Mi4wNDE3IDM5Ljc2MDEgNTMuMTUzNiAzOS4yODE5IDUzLjc3MTEgMzguMzY2NEM1NC4wMDYzIDM4LjAxNzYgNTQuMTYwNCAzNy42MjU3IDU0LjIyMjcgMzcuMjA2NEw1NC41MjE3IDM1LjI1NzRDNTQuNTUxNCAzNS4wNzU2IDU0LjU3MiAzNC44MyA1NC41ODQ2IDM0LjU3OTFMNTQuNjAyOCAzNC4yMzM4QzU0LjYwOTggMzQuMDU5OCA1NC42MjIzIDMzLjg3NzkgNTQuNjM0NyAzMy42Nzg4QzU0LjY3MzQgMzMuMTA1MiA1NC43MTYzIDMyLjQ0NzkgNTQuNjYxOSAzMS44MDU4TDU0LjU4NjcgMzAuNDI4OUM1NC41NjIyIDMwLjA5NTIgNTQuNTA5NyAyOS43NiA1NC40NTU5IDI5LjQxODFDNTQuNDMxIDI5LjI1NzIgNTQuNDA0OCAyOS4wODk2IDU0LjM4MjYgMjguOTA3NEw1NC4yNjg3IDI4LjEwNEM1NC4yMzMyIDI3LjkyNDQgNTQuMTgwNCAyNy43MjczIDU0LjEzMjkgMjcuNTM5Nkw1NC4wNjQzIDI3LjI0NTRDNTQuMDE5NSAyNy4wNzEgNTMuOTc3MyAyNi44OTI3IDUzLjkzMzggMjYuNzA3NkM1My44NDU1IDI2LjMzMDkgNTMuNzQ3OSAyNS45NDIyIDUzLjYxMyAyNS41NTcxQzUyLjg0IDIzLjAyOTIgNTEuNTM4MyAyMC41MTk0IDQ5LjgzMzggMTguMjc5OUM0Ny44NTQ0IDE1LjY4MiA0NS4zMzMzIDEzLjUwODcgNDIuNTU2MyAxMS45ODE2WiIgZmlsbD0iIzQ5NDVGRiIvPgo8L3N2Zz4K"
                   />
                 </div>
               </div>
               <div
-                class="c29 c30"
+                class="c30 c31"
               >
                 <div
                   aria-hidden="true"
-                  class="c31 c32"
+                  class="c32 c33"
                 >
                   <svg
                     fill="none"
@@ -649,10 +653,10 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
                   </svg>
                 </div>
                 <div
-                  class="c16"
+                  class="c17"
                 >
                   <p
-                    class="c7 c33"
+                    class="c8 c34"
                   >
                     You don't have any roles yet.
                   </p>
diff --git a/packages/plugins/users-permissions/package.json b/packages/plugins/users-permissions/package.json
index 9cd469285c..6d553e82cc 100644
--- a/packages/plugins/users-permissions/package.json
+++ b/packages/plugins/users-permissions/package.json
@@ -27,9 +27,9 @@
     "test:front:watch:ce": "cross-env IS_EE=false jest --config ./jest.config.front.js --watchAll"
   },
   "dependencies": {
-    "@strapi/design-system": "1.6.4",
+    "@strapi/design-system": "1.6.5",
     "@strapi/helper-plugin": "4.7.1",
-    "@strapi/icons": "1.6.4",
+    "@strapi/icons": "1.6.5",
     "@strapi/utils": "4.7.1",
     "bcryptjs": "2.4.3",
     "formik": "2.2.9",
diff --git a/yarn.lock b/yarn.lock
index b07260afcf..c9d4300496 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5684,10 +5684,10 @@
     regenerator-runtime "^0.13.7"
     resolve-from "^5.0.0"
 
-"@strapi/design-system@1.6.4":
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/@strapi/design-system/-/design-system-1.6.4.tgz#4f6b29332ea4cc427b24de572ca7780c744eb0ef"
-  integrity sha512-Xfv2ovdHlLbSgtWRwBPB/L21FjdZL7967ZG0ECNP3I2mseq3j2bV7vrFvPL/COsMfOUQmu8CcCoesU5BfZYvEw==
+"@strapi/design-system@1.6.5":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@strapi/design-system/-/design-system-1.6.5.tgz#819feda630e83fdfe19589bb45b81d17e8b4ce8b"
+  integrity sha512-3jzpBK+A/hrZCFFe7bsA9vltH5g07QLC+ndmCFaLyxkYT6jzU0/HslR2LAJYQMz8VqlYOfDH9zIir134ZfmCTg==
   dependencies:
     "@codemirror/lang-json" "^6.0.1"
     "@floating-ui/react-dom" "^1.0.0"
@@ -5719,10 +5719,10 @@
   optionalDependencies:
     typescript "^4.6.2"
 
-"@strapi/icons@1.6.4":
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-1.6.4.tgz#2697a8d6d801265045ea89497b2c1d2f3fe142ba"
-  integrity sha512-1k+pvHhnXf3obQ+UsTf4lri0dSyk7bp0O7nIsYAALX9GFucOQG1CGTPHg+Eig5jOcVdSfF0mStb1V/a2lwuWqA==
+"@strapi/icons@1.6.5":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-1.6.5.tgz#59935fdeae17bcf5f74882fb10891d8d9b365351"
+  integrity sha512-HYTzC8Rn84TxfEtHkVHo+22EiRu6ynSrIMCD6H5S5pHBNuabmfPVIYwo15XfJ7oXqALCbIm5YiV+ndriBaYivQ==
 
 "@stylelint/postcss-css-in-js@^0.37.2":
   version "0.37.3"