From b720106392a6a85e239aa4815f899749e01ff699 Mon Sep 17 00:00:00 2001
From: Simone Taeggi <startae14@gmail.com>
Date: Tue, 15 Nov 2022 15:56:31 +0100
Subject: [PATCH 1/5] trigger the didGoToCTB event when clicking on the Content
 Type Builder link

---
 .../GuidedTour/Modal/tests/index.test.js      | 174 ++--
 .../admin/src/components/LeftMenu/index.js    |  21 +-
 .../__snapshots__/RelationInput.test.js.snap  |   4 +-
 .../components/Wysiwyg/tests/index.test.js    | 274 +++--
 .../pages/App/tests/index.test.js             | 161 ++-
 .../tests/__snapshots__/index.test.js.snap    | 176 +---
 .../tests/__snapshots__/index.test.js.snap    |  46 +-
 .../components/Login/tests/BaseLogin.test.js  |  26 +-
 .../components/Register/tests/index.test.js   |  26 +-
 .../tests/__snapshots__/index.test.js.snap    |  16 +-
 .../ApiTokens/ListView/tests/index.test.js    |  86 +-
 .../tests/__snapshots__/index.test.js.snap    | 521 ++++------
 .../ApplicationInfosPage/tests/index.test.js  |  38 +-
 .../tests/__snapshots__/index.test.js.snap    |   2 +-
 .../pages/Users/ListPage/tests/index.test.js  | 384 ++++---
 .../Webhooks/ListView/tests/index.test.js     | 130 +--
 .../tests/__snapshots__/index.test.js.snap    | 307 +++---
 .../tests/__snapshots__/index.test.js.snap    | 972 ++++--------------
 .../SearchURLQuery/tests/index.test.js        |  29 +-
 .../AssetCard/tests/DocAssetCard.test.js      |  93 +-
 .../AssetCard/tests/ImageAssetCard.test.js    |  89 +-
 .../SearchAsset/tests/index.test.js           |  21 +-
 .../tests/__snapshots__/index.test.js.snap    | 291 +++---
 .../__snapshots__/AssetList.test.js.snap      |  44 +-
 .../__snapshots__/BulkMoveDialog.test.js.snap | 168 ++-
 .../EditAssetDialog.test.js.snap              | 478 ++++-----
 .../tests/__snapshots__/index.test.js.snap    | 478 ++++-----
 .../EditFolderDialog.test.js.snap             | 218 ++--
 .../__snapshots__/FolderCard.test.js.snap     |  14 +-
 .../__snapshots__/SelectTree.test.js.snap     |   2 +-
 .../PendingAssetStep.test.js.snap             | 444 ++++----
 .../UploadAssetDialog.test.js.snap            | 410 ++++----
 .../pages/EmailTemplates/tests/index.test.js  |  26 -
 .../Roles/CreatePage/tests/index.test.js      |   4 +-
 .../pages/Roles/EditPage/tests/index.test.js  |   4 +-
 .../pages/Roles/ListPage/tests/index.test.js  |  59 +-
 36 files changed, 2425 insertions(+), 3811 deletions(-)

diff --git a/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js b/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js
index 82f1f848a57..1d2350f4940 100644
--- a/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js
+++ b/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js
@@ -52,12 +52,12 @@ describe('<GuidedTourModal />', () => {
         padding: 40px;
       }
 
-      .c13 {
+      .c12 {
         margin-right: 40px;
         min-width: 1.875rem;
       }
 
-      .c18 {
+      .c17 {
         background: #4945ff;
         padding: 8px;
         border-radius: 50%;
@@ -101,7 +101,7 @@ describe('<GuidedTourModal />', () => {
         justify-content: flex-end;
       }
 
-      .c12 {
+      .c11 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -115,7 +115,7 @@ describe('<GuidedTourModal />', () => {
         flex-direction: row;
       }
 
-      .c16 {
+      .c15 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -129,7 +129,7 @@ describe('<GuidedTourModal />', () => {
         flex-direction: row;
       }
 
-      .c21 {
+      .c20 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -155,7 +155,7 @@ describe('<GuidedTourModal />', () => {
         width: 41.25rem;
       }
 
-      .c22 {
+      .c21 {
         padding-bottom: 24px;
       }
 
@@ -182,16 +182,16 @@ describe('<GuidedTourModal />', () => {
         margin-top: 40px;
       }
 
-      .c23 > * {
+      .c22 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c23 > * + * {
+      .c22 > * + * {
         margin-top: 16px;
       }
 
-      .c15 {
+      .c14 {
         color: #4945ff;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -199,14 +199,14 @@ describe('<GuidedTourModal />', () => {
         text-transform: uppercase;
       }
 
-      .c19 {
+      .c18 {
         font-weight: 500;
         color: #ffffff;
         font-size: 0.875rem;
         line-height: 1.43;
       }
 
-      .c20 {
+      .c19 {
         font-weight: 600;
         color: #32324d;
         font-weight: 600;
@@ -214,24 +214,24 @@ describe('<GuidedTourModal />', () => {
         line-height: 1.25;
       }
 
-      .c24 {
+      .c23 {
         color: #32324d;
         font-size: 0.875rem;
         line-height: 1.43;
       }
 
-      .c28 {
+      .c27 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c30 {
+      .c29 {
         padding-left: 8px;
       }
 
-      .c25 {
+      .c24 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -245,21 +245,21 @@ describe('<GuidedTourModal />', () => {
         outline: none;
       }
 
-      .c25 svg {
+      .c24 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c25 svg > g,
-      .c25 svg path {
+      .c24 svg > g,
+      .c24 svg path {
         fill: #ffffff;
       }
 
-      .c25[aria-disabled='true'] {
+      .c24[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c25:after {
+      .c24:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -274,11 +274,11 @@ describe('<GuidedTourModal />', () => {
         border: 2px solid transparent;
       }
 
-      .c25:focus-visible {
+      .c24:focus-visible {
         outline: none;
       }
 
-      .c25:focus-visible:after {
+      .c24:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -289,7 +289,7 @@ describe('<GuidedTourModal />', () => {
         border: 2px solid #4945ff;
       }
 
-      .c26 {
+      .c25 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -299,7 +299,7 @@ describe('<GuidedTourModal />', () => {
         border: 1px solid #4945ff;
       }
 
-      .c26 .c29 {
+      .c25 .c28 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -310,54 +310,54 @@ describe('<GuidedTourModal />', () => {
         align-items: center;
       }
 
-      .c26 .c27 {
+      .c25 .c26 {
         color: #ffffff;
       }
 
-      .c26[aria-disabled='true'] {
+      .c25[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c26[aria-disabled='true'] .c27 {
+      .c25[aria-disabled='true'] .c26 {
         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 .c27 {
+      .c25[aria-disabled='true']:active .c26 {
         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;
       }
 
-      .c31 {
+      .c30 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -369,7 +369,7 @@ describe('<GuidedTourModal />', () => {
         background: #ffffff;
       }
 
-      .c31 .c29 {
+      .c30 .c28 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -380,62 +380,62 @@ describe('<GuidedTourModal />', () => {
         align-items: center;
       }
 
-      .c31 .c27 {
+      .c30 .c26 {
         color: #ffffff;
       }
 
-      .c31[aria-disabled='true'] {
+      .c30[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c31[aria-disabled='true'] .c27 {
+      .c30[aria-disabled='true'] .c26 {
         color: #666687;
       }
 
-      .c31[aria-disabled='true'] svg > g,
-      .c31[aria-disabled='true'] svg path {
+      .c30[aria-disabled='true'] svg > g,
+      .c30[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c31[aria-disabled='true']:active {
+      .c30[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c31[aria-disabled='true']:active .c27 {
+      .c30[aria-disabled='true']:active .c26 {
         color: #666687;
       }
 
-      .c31[aria-disabled='true']:active svg > g,
-      .c31[aria-disabled='true']:active svg path {
+      .c30[aria-disabled='true']:active svg > g,
+      .c30[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c31:hover {
+      .c30:hover {
         background-color: #f6f6f9;
       }
 
-      .c31:active {
+      .c30:active {
         background-color: #eaeaef;
       }
 
-      .c31 .c27 {
+      .c30 .c26 {
         color: #32324d;
       }
 
-      .c31 svg > g,
-      .c31 svg path {
+      .c30 svg > g,
+      .c30 svg path {
         fill: #32324d;
       }
 
-      .c11 {
+      .c10 {
         padding-right: 32px;
         padding-bottom: 0px;
         padding-left: 32px;
       }
 
-      .c14 {
+      .c13 {
         background: #7b79ff;
         border-radius: 4px;
         width: 0.125rem;
@@ -443,23 +443,11 @@ describe('<GuidedTourModal />', () => {
         min-height: 1.5rem;
       }
 
-      .c17 {
+      .c16 {
         padding-top: 12px;
         padding-bottom: 12px;
       }
 
-      .c10 {
-        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;
-      }
-
       .c8 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -621,18 +609,12 @@ describe('<GuidedTourModal />', () => {
                 >
                   <button
                     aria-disabled="false"
+                    aria-label="Close"
                     class="c8 c9"
                     type="button"
                   >
-                    <span
-                      class="c10"
-                    >
-                      Close
-                    </span>
                     <svg
-                      aria-hidden="true"
                       fill="none"
-                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -646,42 +628,42 @@ describe('<GuidedTourModal />', () => {
                   </button>
                 </div>
                 <div
-                  class="c11"
+                  class="c10"
                 >
                   <div
-                    class="c12"
+                    class="c11"
                   >
                     <div
-                      class="c13 c2"
+                      class="c12 c2"
                     >
                       <div
-                        class="c14"
+                        class="c13"
                         height="100%"
                         width="0.125rem"
                       />
                     </div>
                     <span
-                      class="c15"
+                      class="c14"
                     >
                       3 steps to get started
                     </span>
                   </div>
                   <div
-                    class="c16"
+                    class="c15"
                   >
                     <div
-                      class="c13 c16"
+                      class="c12 c15"
                     >
                       <div
-                        class="c17"
+                        class="c16"
                       >
                         <div
-                          class="c18 c2"
+                          class="c17 c2"
                           height="1.875rem"
                           width="1.875rem"
                         >
                           <span
-                            class="c19"
+                            class="c18"
                           >
                             3
                           </span>
@@ -689,50 +671,50 @@ describe('<GuidedTourModal />', () => {
                       </div>
                     </div>
                     <h3
-                      class="c20"
+                      class="c19"
                       id="title"
                     >
                       🧠 Create a first Collection type
                     </h3>
                   </div>
                   <div
-                    class="c12"
+                    class="c11"
                   >
                     <div
-                      class="c13 c21"
+                      class="c12 c20"
                     />
                     <div
                       class=""
                     >
                       <div
-                        class="c22 c5 c23"
+                        class="c21 c5 c22"
                         spacing="4"
                       >
                         <span
-                          class="c24"
+                          class="c23"
                         >
                           Collection types help you manage several entries, Single types are suitable to manage only one entry.
                         </span>
                          
                         <span
-                          class="c24"
+                          class="c23"
                         >
                           Ex: For a Blog website, Articles would be a Collection type whereas a Homepage would be a Single type.
                         </span>
                       </div>
                       <button
                         aria-disabled="false"
-                        class="c25 c26"
+                        class="c24 c25"
                         type="button"
                       >
                         <span
-                          class="c27 c28"
+                          class="c26 c27"
                         >
                           Build a Collection type
                         </span>
                         <div
                           aria-hidden="true"
-                          class="c29 c30"
+                          class="c28 c29"
                         >
                           <svg
                             fill="none"
@@ -756,11 +738,11 @@ describe('<GuidedTourModal />', () => {
                 >
                   <button
                     aria-disabled="false"
-                    class="c25 c31"
+                    class="c24 c30"
                     type="button"
                   >
                     <span
-                      class="c27 c28"
+                      class="c26 c27"
                     >
                       Skip the tour
                     </span>
diff --git a/packages/core/admin/admin/src/components/LeftMenu/index.js b/packages/core/admin/admin/src/components/LeftMenu/index.js
index 23b936b3b8e..029390a5ca1 100644
--- a/packages/core/admin/admin/src/components/LeftMenu/index.js
+++ b/packages/core/admin/admin/src/components/LeftMenu/index.js
@@ -19,7 +19,7 @@ import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import Write from '@strapi/icons/Write';
 import Exit from '@strapi/icons/Exit';
-import { auth, usePersistentState, useAppInfos } from '@strapi/helper-plugin';
+import { auth, usePersistentState, useAppInfos, useTracking } from '@strapi/helper-plugin';
 import useConfigurations from '../../hooks/useConfigurations';
 
 const LinkUserWrapper = styled(Box)`
@@ -59,6 +59,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   const [condensed, setCondensed] = usePersistentState('navbar-condensed', false);
   const { userDisplayName } = useAppInfos();
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
 
   const initials = userDisplayName
     .split(' ')
@@ -125,7 +126,23 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
               const Icon = link.icon;
 
               return (
-                <NavLink as={RouterNavLink} to={link.to} key={link.to} icon={<Icon />}>
+                <NavLink
+                  as={RouterNavLink}
+                  to={link.to}
+                  key={link.to}
+                  icon={<Icon />}
+                  isActive={(match, location) => {
+                    if (match) {
+                      if (location.pathname === '/plugins/content-type-builder') {
+                        trackUsage(`didGoToCTB`);
+                      }
+
+                      return true;
+                    }
+
+                    return false;
+                  }}
+                >
                   {formatMessage(link.intlLabel)}
                 </NavLink>
               );
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 e84fad66c79..a0fc628b915 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
@@ -227,11 +227,11 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   border: 1px solid #c6f0c2;
 }
 
-.c25 .sc-dfhuTu {
+.c25 .sc-URNzB {
   color: #0c75af;
 }
 
-.c33 .sc-dfhuTu {
+.c33 .sc-URNzB {
   color: #328048;
 }
 
diff --git a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js
index a71fe1c8589..c6579c61099 100644
--- a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js
@@ -62,7 +62,7 @@ describe('Wysiwyg render and actions buttons', () => {
         line-height: 1.33;
       }
 
-      .c40 {
+      .c39 {
         color: #32324d;
         font-size: 0.875rem;
         line-height: 1.43;
@@ -80,7 +80,7 @@ describe('Wysiwyg render and actions buttons', () => {
         padding: 8px;
       }
 
-      .c36 {
+      .c35 {
         background: #f6f6f9;
         padding: 8px;
         border-radius: 4px;
@@ -164,7 +164,7 @@ describe('Wysiwyg render and actions buttons', () => {
         flex-direction: row;
       }
 
-      .c37 {
+      .c36 {
         -webkit-align-items: flex-end;
         -webkit-box-align: flex-end;
         -ms-flex-align: flex-end;
@@ -182,14 +182,14 @@ describe('Wysiwyg render and actions buttons', () => {
         justify-content: flex-end;
       }
 
-      .c33 {
+      .c32 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c30 {
+      .c29 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -203,21 +203,21 @@ describe('Wysiwyg render and actions buttons', () => {
         outline: none;
       }
 
-      .c30 svg {
+      .c29 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c30 svg > g,
-      .c30 svg path {
+      .c29 svg > g,
+      .c29 svg path {
         fill: #ffffff;
       }
 
-      .c30[aria-disabled='true'] {
+      .c29[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c30:after {
+      .c29:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -232,11 +232,11 @@ describe('Wysiwyg render and actions buttons', () => {
         border: 2px solid transparent;
       }
 
-      .c30:focus-visible {
+      .c29:focus-visible {
         outline: none;
       }
 
-      .c30:focus-visible:after {
+      .c29:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -247,7 +247,7 @@ describe('Wysiwyg render and actions buttons', () => {
         border: 2px solid #4945ff;
       }
 
-      .c31 {
+      .c30 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -259,7 +259,7 @@ describe('Wysiwyg render and actions buttons', () => {
         background: #ffffff;
       }
 
-      .c31 .sc-dJjYzT {
+      .c30 .sc-dJjYzT {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -270,67 +270,55 @@ describe('Wysiwyg render and actions buttons', () => {
         align-items: center;
       }
 
-      .c31 .c32 {
+      .c30 .c31 {
         color: #ffffff;
       }
 
-      .c31[aria-disabled='true'] {
+      .c30[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c31[aria-disabled='true'] .c32 {
+      .c30[aria-disabled='true'] .c31 {
         color: #666687;
       }
 
-      .c31[aria-disabled='true'] svg > g,
-      .c31[aria-disabled='true'] svg path {
+      .c30[aria-disabled='true'] svg > g,
+      .c30[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c31[aria-disabled='true']:active {
+      .c30[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c31[aria-disabled='true']:active .c32 {
+      .c30[aria-disabled='true']:active .c31 {
         color: #666687;
       }
 
-      .c31[aria-disabled='true']:active svg > g,
-      .c31[aria-disabled='true']:active svg path {
+      .c30[aria-disabled='true']:active svg > g,
+      .c30[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c31:hover {
+      .c30:hover {
         background-color: #f6f6f9;
       }
 
-      .c31:active {
+      .c30:active {
         background-color: #eaeaef;
       }
 
-      .c31 .c32 {
+      .c30 .c31 {
         color: #32324d;
       }
 
-      .c31 svg > g,
-      .c31 svg path {
+      .c30 svg > g,
+      .c30 svg path {
         fill: #32324d;
       }
 
-      .c28 {
-        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;
-      }
-
       .c24 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -624,16 +612,16 @@ describe('Wysiwyg render and actions buttons', () => {
         width: 100%;
       }
 
-      .c35 {
+      .c34 {
         cursor: auto;
         height: 100%;
       }
 
-      .c35 .CodeMirror-placeholder {
+      .c34 .CodeMirror-placeholder {
         color: #666687 !important;
       }
 
-      .c35 .CodeMirror {
+      .c34 .CodeMirror {
         font-size: 0.875rem;
         height: 290px;
         color: #32324d;
@@ -641,22 +629,22 @@ describe('Wysiwyg render and actions buttons', () => {
         font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell, 'Open Sans','Helvetica Neue',sans-serif;
       }
 
-      .c35 .CodeMirror-lines {
+      .c34 .CodeMirror-lines {
         padding: 12px 16px;
       }
 
-      .c35 .CodeMirror-scrollbar-filler,
-      .c35 .CodeMirror-gutter-filler {
+      .c34 .CodeMirror-scrollbar-filler,
+      .c34 .CodeMirror-gutter-filler {
         background-color: #ffffff;
       }
 
-      .c35 .CodeMirror-gutters {
+      .c34 .CodeMirror-gutters {
         border-right: 1px solid #ddd;
         background-color: #f7f7f7;
         white-space: nowrap;
       }
 
-      .c35 .CodeMirror-linenumber {
+      .c34 .CodeMirror-linenumber {
         padding: 0 3px 0 5px;
         min-width: 20px;
         text-align: right;
@@ -664,31 +652,31 @@ describe('Wysiwyg render and actions buttons', () => {
         white-space: nowrap;
       }
 
-      .c35 .CodeMirror-guttermarker {
+      .c34 .CodeMirror-guttermarker {
         color: black;
       }
 
-      .c35 .CodeMirror-guttermarker-subtle {
+      .c34 .CodeMirror-guttermarker-subtle {
         color: #999;
       }
 
-      .c35 .CodeMirror-cursor {
+      .c34 .CodeMirror-cursor {
         border-left: 1px solid black;
         border-right: none;
         width: 0;
       }
 
-      .c35 .CodeMirror div.CodeMirror-secondarycursor {
+      .c34 .CodeMirror div.CodeMirror-secondarycursor {
         border-left: 1px solid silver;
       }
 
-      .c35 .cm-fat-cursor .CodeMirror-cursor {
+      .c34 .cm-fat-cursor .CodeMirror-cursor {
         width: auto;
         border: 0 !important;
         background: #7e7;
       }
 
-      .c35 .cm-fat-cursor-mark {
+      .c34 .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;
@@ -696,7 +684,7 @@ describe('Wysiwyg render and actions buttons', () => {
         animation: blink 1.06s steps(1) infinite;
       }
 
-      .c35 .cm-animate-fat-cursor {
+      .c34 .cm-animate-fat-cursor {
         width: auto;
         border: 0;
         -webkit-animation: blink 1.06s steps(1) infinite;
@@ -706,13 +694,13 @@ describe('Wysiwyg render and actions buttons', () => {
         background-color: #7e7;
       }
 
-      .c35 .cm-tab {
+      .c34 .cm-tab {
         display: inline-block;
         -webkit-text-decoration: inherit;
         text-decoration: inherit;
       }
 
-      .c35 .CodeMirror-rulers {
+      .c34 .CodeMirror-rulers {
         position: absolute;
         left: 0;
         right: 0;
@@ -721,59 +709,59 @@ describe('Wysiwyg render and actions buttons', () => {
         overflow: hidden;
       }
 
-      .c35 .CodeMirror-ruler {
+      .c34 .CodeMirror-ruler {
         border-left: 1px solid #ccc;
         top: 0;
         bottom: 0;
         position: absolute;
       }
 
-      .c35 .cm-header,
-      .c35 .cm-strong {
+      .c34 .cm-header,
+      .c34 .cm-strong {
         font-weight: bold;
       }
 
-      .c35 .cm-em {
+      .c34 .cm-em {
         font-style: italic;
       }
 
-      .c35 .cm-link {
+      .c34 .cm-link {
         -webkit-text-decoration: underline;
         text-decoration: underline;
       }
 
-      .c35 .cm-strikethrough {
+      .c34 .cm-strikethrough {
         -webkit-text-decoration: line-through;
         text-decoration: line-through;
       }
 
-      .c35 .CodeMirror-composing {
+      .c34 .CodeMirror-composing {
         border-bottom: 2px solid;
       }
 
-      .c35 div.CodeMirror span.CodeMirror-matchingbracket {
+      .c34 div.CodeMirror span.CodeMirror-matchingbracket {
         color: #0b0;
       }
 
-      .c35 div.CodeMirror span.CodeMirror-nonmatchingbracket {
+      .c34 div.CodeMirror span.CodeMirror-nonmatchingbracket {
         color: #a22;
       }
 
-      .c35 .CodeMirror-matchingtag {
+      .c34 .CodeMirror-matchingtag {
         background: rgba(255,150,0,0.3);
       }
 
-      .c35 .CodeMirror-activeline-background {
+      .c34 .CodeMirror-activeline-background {
         background: #e8f2ff;
       }
 
-      .c35 .CodeMirror {
+      .c34 .CodeMirror {
         position: relative;
         overflow: hidden;
         background: #ffffff;
       }
 
-      .c35 .CodeMirror-scroll {
+      .c34 .CodeMirror-scroll {
         overflow: scroll !important;
         margin-bottom: -50px;
         margin-right: -50px;
@@ -783,47 +771,47 @@ describe('Wysiwyg render and actions buttons', () => {
         position: relative;
       }
 
-      .c35 .CodeMirror-sizer {
+      .c34 .CodeMirror-sizer {
         position: relative;
         border-right: 50px solid transparent;
       }
 
-      .c35 .CodeMirror-vscrollbar,
-      .c35 .CodeMirror-hscrollbar,
-      .c35 .CodeMirror-scrollbar-filler,
-      .c35 .CodeMirror-gutter-filler {
+      .c34 .CodeMirror-vscrollbar,
+      .c34 .CodeMirror-hscrollbar,
+      .c34 .CodeMirror-scrollbar-filler,
+      .c34 .CodeMirror-gutter-filler {
         position: absolute;
         z-index: 1;
         display: none;
         outline: none;
       }
 
-      .c35 .CodeMirror-vscrollbar {
+      .c34 .CodeMirror-vscrollbar {
         right: 0;
         top: 0;
         overflow-x: hidden;
         overflow-y: scroll;
       }
 
-      .c35 .CodeMirror-hscrollbar {
+      .c34 .CodeMirror-hscrollbar {
         bottom: 0;
         left: 0;
         overflow-y: hidden;
         overflow-x: scroll;
       }
 
-      .c35 .CodeMirror-scrollbar-filler {
+      .c34 .CodeMirror-scrollbar-filler {
         right: 0;
         bottom: 0;
       }
 
-      .c35 .CodeMirror-lines {
+      .c34 .CodeMirror-lines {
         cursor: text;
         min-height: 1px;
       }
 
-      .c35 .CodeMirror pre.CodeMirror-line,
-      .c35 .CodeMirror pre.CodeMirror-line-like {
+      .c34 .CodeMirror pre.CodeMirror-line,
+      .c34 .CodeMirror pre.CodeMirror-line-like {
         -moz-border-radius: 0;
         -webkit-border-radius: 0;
         border-radius: 0;
@@ -843,18 +831,18 @@ describe('Wysiwyg render and actions buttons', () => {
         font-variant-ligatures: contextual;
       }
 
-      .c35 .CodeMirror pre.CodeMirror-line-like {
+      .c34 .CodeMirror pre.CodeMirror-line-like {
         z-index: 2;
       }
 
-      .c35 .CodeMirror-wrap pre.CodeMirror-line,
-      .c35 .CodeMirror-wrap pre.CodeMirror-line-like {
+      .c34 .CodeMirror-wrap pre.CodeMirror-line,
+      .c34 .CodeMirror-wrap pre.CodeMirror-line-like {
         word-wrap: break-word;
         white-space: pre-wrap;
         word-break: normal;
       }
 
-      .c35 .CodeMirror-linebackground {
+      .c34 .CodeMirror-linebackground {
         position: absolute;
         left: 0;
         right: 0;
@@ -863,29 +851,29 @@ describe('Wysiwyg render and actions buttons', () => {
         z-index: 0;
       }
 
-      .c35 .CodeMirror-linewidget {
+      .c34 .CodeMirror-linewidget {
         position: relative;
         padding: 0.1px;
       }
 
-      .c35 .CodeMirror-rtl pre {
+      .c34 .CodeMirror-rtl pre {
         direction: rtl;
       }
 
-      .c35 .CodeMirror-code {
+      .c34 .CodeMirror-code {
         outline: none;
       }
 
-      .c35 .CodeMirror-scroll,
-      .c35 .CodeMirror-sizer,
-      .c35 .CodeMirror-gutter,
-      .c35 .CodeMirror-gutters,
-      .c35 .CodeMirror-linenumber {
+      .c34 .CodeMirror-scroll,
+      .c34 .CodeMirror-sizer,
+      .c34 .CodeMirror-gutter,
+      .c34 .CodeMirror-gutters,
+      .c34 .CodeMirror-linenumber {
         -moz-box-sizing: content-box;
         box-sizing: content-box;
       }
 
-      .c35 .CodeMirror-measure {
+      .c34 .CodeMirror-measure {
         position: absolute;
         width: 100%;
         height: 0;
@@ -893,58 +881,58 @@ describe('Wysiwyg render and actions buttons', () => {
         visibility: hidden;
       }
 
-      .c35 .CodeMirror-cursor {
+      .c34 .CodeMirror-cursor {
         position: absolute;
         pointer-events: none;
         border-color: #32324d;
       }
 
-      .c35 .CodeMirror-measure pre {
+      .c34 .CodeMirror-measure pre {
         position: static;
       }
 
-      .c35 div.CodeMirror-cursors {
+      .c34 div.CodeMirror-cursors {
         visibility: hidden;
         position: relative;
       }
 
-      .c35 div.CodeMirror-cursors + div {
+      .c34 div.CodeMirror-cursors + div {
         z-index: 0 !important;
       }
 
-      .c35 div.CodeMirror-dragcursors {
+      .c34 div.CodeMirror-dragcursors {
         visibility: visible;
       }
 
-      .c35 .CodeMirror-focused div.CodeMirror-cursors {
+      .c34 .CodeMirror-focused div.CodeMirror-cursors {
         visibility: visible;
       }
 
-      .c35 .CodeMirror-selected {
+      .c34 .CodeMirror-selected {
         background: #dcdce4;
       }
 
-      .c35 .CodeMirror-crosshair {
+      .c34 .CodeMirror-crosshair {
         cursor: crosshair;
       }
 
-      .c35 .cm-force-border {
+      .c34 .cm-force-border {
         padding-right: 0.1px;
       }
 
-      .c35 .cm-tab-wrap-hack:after {
+      .c34 .cm-tab-wrap-hack:after {
         content: '';
       }
 
-      .c35 span.CodeMirror-selectedtext {
+      .c34 span.CodeMirror-selectedtext {
         background: none;
       }
 
-      .c35 span {
+      .c34 span {
         color: #32324d !important;
       }
 
-      .c38 {
+      .c37 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -958,21 +946,21 @@ describe('Wysiwyg render and actions buttons', () => {
         outline: none;
       }
 
-      .c38 svg {
+      .c37 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c38 svg > g,
-      .c38 svg path {
+      .c37 svg > g,
+      .c37 svg path {
         fill: #ffffff;
       }
 
-      .c38[aria-disabled='true'] {
+      .c37[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c38:after {
+      .c37:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -987,11 +975,11 @@ describe('Wysiwyg render and actions buttons', () => {
         border: 2px solid transparent;
       }
 
-      .c38:focus-visible {
+      .c37:focus-visible {
         outline: none;
       }
 
-      .c38:focus-visible:after {
+      .c37:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -1016,22 +1004,22 @@ describe('Wysiwyg render and actions buttons', () => {
         margin-left: 16px;
       }
 
-      .c29 {
+      .c28 {
         margin: 0 8px;
         padding: 8px;
       }
 
-      .c29 svg {
+      .c28 svg {
         width: 1.125rem;
         height: 1.125rem;
       }
 
-      .c34 {
+      .c33 {
         position: relative;
         height: calc(100% - 48px);
       }
 
-      .c39 {
+      .c38 {
         background-color: transparent;
         border: none;
         -webkit-align-items: center;
@@ -1040,11 +1028,11 @@ describe('Wysiwyg render and actions buttons', () => {
         align-items: center;
       }
 
-      .c39 svg {
+      .c38 svg {
         margin-left: 8px;
       }
 
-      .c39 svg path {
+      .c38 svg path {
         fill: #4a4a6a;
         width: 0.75rem;
         height: 0.75rem;
@@ -1151,15 +1139,8 @@ describe('Wysiwyg render and actions buttons', () => {
                       tabindex="0"
                       type="button"
                     >
-                      <span
-                        class="c28"
-                      >
-                        Bold
-                      </span>
                       <svg
-                        aria-hidden="true"
                         fill="none"
-                        focusable="false"
                         height="1em"
                         viewBox="0 0 24 24"
                         width="1em"
@@ -1184,15 +1165,8 @@ describe('Wysiwyg render and actions buttons', () => {
                       tabindex="0"
                       type="button"
                     >
-                      <span
-                        class="c28"
-                      >
-                        Italic
-                      </span>
                       <svg
-                        aria-hidden="true"
                         fill="none"
-                        focusable="false"
                         height="1em"
                         viewBox="0 0 24 24"
                         width="1em"
@@ -1217,15 +1191,8 @@ describe('Wysiwyg render and actions buttons', () => {
                       tabindex="0"
                       type="button"
                     >
-                      <span
-                        class="c28"
-                      >
-                        Underline
-                      </span>
                       <svg
-                        aria-hidden="true"
                         fill="none"
-                        focusable="false"
                         height="1em"
                         viewBox="0 0 24 24"
                         width="1em"
@@ -1243,20 +1210,13 @@ describe('Wysiwyg render and actions buttons', () => {
                   <button
                     aria-disabled="false"
                     aria-labelledby="tooltip-7"
-                    class="c24 c25 c26 c29"
+                    class="c24 c25 c26 c28"
                     id="more"
                     tabindex="0"
                     type="button"
                   >
-                    <span
-                      class="c28"
-                    >
-                      More
-                    </span>
                     <svg
-                      aria-hidden="true"
                       fill="none"
-                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -1272,12 +1232,12 @@ describe('Wysiwyg render and actions buttons', () => {
               </div>
               <button
                 aria-disabled="false"
-                class="c30 c31"
+                class="c29 c30"
                 id="preview"
                 type="button"
               >
                 <span
-                  class="c32 c33"
+                  class="c31 c32"
                 >
                   Preview mode
                 </span>
@@ -1285,10 +1245,10 @@ describe('Wysiwyg render and actions buttons', () => {
             </div>
           </div>
           <div
-            class="c34"
+            class="c33"
           >
             <div
-              class="c35"
+              class="c34"
             >
               <textarea
                 style="display: none;"
@@ -1387,19 +1347,19 @@ describe('Wysiwyg render and actions buttons', () => {
             </div>
           </div>
           <div
-            class="c36"
+            class="c35"
           >
             <div
-              class="c37"
+              class="c36"
             >
               <button
                 aria-disabled="false"
-                class="c38 c39"
+                class="c37 c38"
                 id="expand"
                 type="button"
               >
                 <span
-                  class="c40"
+                  class="c39"
                 >
                   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 9f456db9e48..513ea5fb494 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
@@ -118,7 +118,7 @@ describe('Content manager | App | main', () => {
     expect(screen.getByText('Categories')).toBeVisible();
     expect(history.location.pathname).toEqual('/content-manager/collectionType/category');
     expect(container.firstChild).toMatchInlineSnapshot(`
-      .c35 {
+      .c34 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -130,13 +130,13 @@ describe('Content manager | App | main', () => {
         width: 1px;
       }
 
-      .c36 {
+      .c35 {
         -webkit-animation: gzYjWD 1s infinite linear;
         animation: gzYjWD 1s infinite linear;
         will-change: transform;
       }
 
-      .c33 {
+      .c32 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -154,11 +154,11 @@ describe('Content manager | App | main', () => {
         justify-content: space-around;
       }
 
-      .c34 {
+      .c33 {
         height: 100vh;
       }
 
-      .c31 {
+      .c30 {
         padding-bottom: 56px;
       }
 
@@ -167,7 +167,7 @@ describe('Content manager | App | main', () => {
         grid-template-columns: auto 1fr;
       }
 
-      .c32 {
+      .c31 {
         overflow-x: hidden;
       }
 
@@ -178,36 +178,36 @@ describe('Content manager | App | main', () => {
         padding-left: 24px;
       }
 
-      .c9 {
+      .c8 {
         padding-top: 16px;
       }
 
-      .c10 {
+      .c9 {
         background: #eaeaef;
       }
 
-      .c13 {
+      .c12 {
         padding-top: 8px;
         padding-bottom: 16px;
       }
 
-      .c17 {
+      .c16 {
         padding-top: 8px;
         padding-right: 16px;
         padding-bottom: 8px;
         padding-left: 24px;
       }
 
-      .c19 {
+      .c18 {
         padding-right: 24px;
         position: relative;
       }
 
-      .c22 {
+      .c21 {
         padding-right: 4px;
       }
 
-      .c24 {
+      .c23 {
         background: #eaeaef;
         padding: 4px;
         border-radius: 4px;
@@ -220,14 +220,14 @@ describe('Content manager | App | main', () => {
         transform: translateY(-50%);
       }
 
-      .c26 {
+      .c25 {
         background: #f6f6f9;
         padding-top: 8px;
         padding-bottom: 8px;
         padding-left: 32px;
       }
 
-      .c29 {
+      .c28 {
         padding-left: 8px;
       }
 
@@ -261,7 +261,7 @@ describe('Content manager | App | main', () => {
         justify-content: space-between;
       }
 
-      .c14 {
+      .c13 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -275,7 +275,7 @@ describe('Content manager | App | main', () => {
         flex-direction: column;
       }
 
-      .c20 {
+      .c19 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -289,7 +289,7 @@ describe('Content manager | App | main', () => {
         flex-direction: row;
       }
 
-      .c25 {
+      .c24 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -314,7 +314,7 @@ describe('Content manager | App | main', () => {
         line-height: 1.22;
       }
 
-      .c23 {
+      .c22 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -322,24 +322,12 @@ describe('Content manager | App | main', () => {
         text-transform: uppercase;
       }
 
-      .c30 {
+      .c29 {
         color: #32324d;
         font-size: 0.875rem;
         line-height: 1.43;
       }
 
-      .c8 {
-        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;
-      }
-
       .c6 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -438,18 +426,18 @@ describe('Content manager | App | main', () => {
         fill: #666687;
       }
 
-      .c11 {
+      .c10 {
         height: 1px;
         border: none;
         margin: 0;
       }
 
-      .c12 {
+      .c11 {
         width: 1.5rem;
         background-color: #dcdce4;
       }
 
-      .c27 {
+      .c26 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -467,66 +455,66 @@ describe('Content manager | App | main', () => {
         color: #32324d;
       }
 
-      .c27 svg > * {
+      .c26 svg > * {
         fill: #666687;
       }
 
-      .c27.active {
+      .c26.active {
         background-color: #f0f0ff;
         border-right: 2px solid #4945ff;
       }
 
-      .c27.active svg > * {
+      .c26.active svg > * {
         fill: #271fe0;
       }
 
-      .c27.active .c4 {
+      .c26.active .c4 {
         color: #271fe0;
         font-weight: 500;
       }
 
-      .c27:focus-visible {
+      .c26:focus-visible {
         outline-offset: -2px;
       }
 
-      .c28 {
+      .c27 {
         width: 0.75rem;
         height: 0.25rem;
       }
 
-      .c28 * {
+      .c27 * {
         fill: #666687;
       }
 
-      .c15 > * {
+      .c14 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c15 > * + * {
+      .c14 > * + * {
         margin-top: 8px;
       }
 
-      .c16 > * {
+      .c15 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c16 > * + * {
+      .c15 > * + * {
         margin-top: 4px;
       }
 
-      .c21 {
+      .c20 {
         border: none;
         padding: 0;
         background: transparent;
       }
 
-      .c18 svg {
+      .c17 svg {
         height: 0.25rem;
       }
 
-      .c18 svg path {
+      .c17 svg path {
         fill: #8e8ea9;
       }
 
@@ -556,15 +544,8 @@ describe('Content manager | App | main', () => {
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="c8"
-                  >
-                    Search for a content type
-                  </span>
                   <svg
-                    aria-hidden="true"
                     fill="none"
-                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -581,50 +562,50 @@ describe('Content manager | App | main', () => {
               </span>
             </div>
             <div
-              class="c9"
+              class="c8"
             >
               <hr
-                class="c10 c11 c12"
+                class="c9 c10 c11"
               />
             </div>
           </div>
           <div
-            class="c13"
+            class="c12"
           >
             <ol
-              class="c14 c15"
+              class="c13 c14"
               spacing="2"
             >
               <li>
                 <div
-                  class="c14 c16"
+                  class="c13 c15"
                   spacing="1"
                 >
                   <div
-                    class="c17 c18"
+                    class="c16 c17"
                   >
                     <div
-                      class="c19"
+                      class="c18"
                     >
                       <div
-                        class="c20 c21"
+                        class="c19 c20"
                       >
                         <div
-                          class="c22"
+                          class="c21"
                         >
                           <span
-                            class="c4 c23"
+                            class="c4 c22"
                           >
                             Collection Types
                           </span>
                         </div>
                       </div>
                       <div
-                        class="c24 c25"
+                        class="c23 c24"
                         transform="translateY(-50%)"
                       >
                         <span
-                          class="c4 c23"
+                          class="c4 c22"
                         >
                           1
                         </span>
@@ -637,14 +618,14 @@ describe('Content manager | App | main', () => {
                     <li>
                       <a
                         aria-current="page"
-                        class="c26 c27 active"
+                        class="c25 c26 active"
                         href="/content-manager/collectionType/category"
                       >
                         <div
-                          class="c20"
+                          class="c19"
                         >
                           <svg
-                            class="c28"
+                            class="c27"
                             fill="none"
                             height="1em"
                             viewBox="0 0 4 4"
@@ -659,10 +640,10 @@ describe('Content manager | App | main', () => {
                             />
                           </svg>
                           <div
-                            class="c29"
+                            class="c28"
                           >
                             <span
-                              class="c4 c30"
+                              class="c4 c29"
                             >
                               Categories
                             </span>
@@ -675,34 +656,34 @@ describe('Content manager | App | main', () => {
               </li>
               <li>
                 <div
-                  class="c14 c16"
+                  class="c13 c15"
                   spacing="1"
                 >
                   <div
-                    class="c17 c18"
+                    class="c16 c17"
                   >
                     <div
-                      class="c19"
+                      class="c18"
                     >
                       <div
-                        class="c20 c21"
+                        class="c19 c20"
                       >
                         <div
-                          class="c22"
+                          class="c21"
                         >
                           <span
-                            class="c4 c23"
+                            class="c4 c22"
                           >
                             Single Types
                           </span>
                         </div>
                       </div>
                       <div
-                        class="c24 c25"
+                        class="c23 c24"
                         transform="translateY(-50%)"
                       >
                         <span
-                          class="c4 c23"
+                          class="c4 c22"
                         >
                           1
                         </span>
@@ -714,14 +695,14 @@ describe('Content manager | App | main', () => {
                   >
                     <li>
                       <a
-                        class="c26 c27"
+                        class="c25 c26"
                         href="/homepage"
                       >
                         <div
-                          class="c20"
+                          class="c19"
                         >
                           <svg
-                            class="c28"
+                            class="c27"
                             fill="none"
                             height="1em"
                             viewBox="0 0 4 4"
@@ -736,10 +717,10 @@ describe('Content manager | App | main', () => {
                             />
                           </svg>
                           <div
-                            class="c29"
+                            class="c28"
                           >
                             <span
-                              class="c4 c30"
+                              class="c4 c29"
                             >
                               Home page
                             </span>
@@ -754,10 +735,10 @@ describe('Content manager | App | main', () => {
           </div>
         </nav>
         <div
-          class="c31 c32"
+          class="c30 c31"
         >
           <div
-            class="c33 c34"
+            class="c32 c33"
             data-testid="loader"
           >
             <div
@@ -765,13 +746,13 @@ describe('Content manager | App | main', () => {
               role="alert"
             >
               <div
-                class="c35"
+                class="c34"
               >
                 Loading content.
               </div>
               <img
                 aria-hidden="true"
-                class="c36"
+                class="c35"
                 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 97864a51aa1..022a6205539 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
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EditSettingsView renders and matches the snapshot 1`] = `
-.c71 {
+.c70 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -281,7 +281,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   fill: #ffffff;
 }
 
-.c70 {
+.c69 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -302,7 +302,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   width: 100%;
 }
 
-.c70 .c12 {
+.c69 .c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -313,62 +313,62 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c70 .c15 {
+.c69 .c15 {
   color: #ffffff;
 }
 
-.c70[aria-disabled='true'] {
+.c69[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c70[aria-disabled='true'] .c15 {
+.c69[aria-disabled='true'] .c15 {
   color: #666687;
 }
 
-.c70[aria-disabled='true'] svg > g,
-.c70[aria-disabled='true'] svg path {
+.c69[aria-disabled='true'] svg > g,
+.c69[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c70[aria-disabled='true']:active {
+.c69[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c70[aria-disabled='true']:active .c15 {
+.c69[aria-disabled='true']:active .c15 {
   color: #666687;
 }
 
-.c70[aria-disabled='true']:active svg > g,
-.c70[aria-disabled='true']:active svg path {
+.c69[aria-disabled='true']:active svg > g,
+.c69[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c70:hover {
+.c69:hover {
   background-color: #ffffff;
 }
 
-.c70:active {
+.c69:active {
   background-color: #ffffff;
   border: 1px solid #4945ff;
 }
 
-.c70:active .c15 {
+.c69:active .c15 {
   color: #4945ff;
 }
 
-.c70:active svg > g,
-.c70:active svg path {
+.c69:active svg > g,
+.c69:active svg path {
   fill: #4945ff;
 }
 
-.c70 .c15 {
+.c69 .c15 {
   color: #271fe0;
 }
 
-.c70 svg > g,
-.c70 svg path {
+.c69 svg > g,
+.c69 svg path {
   fill: #271fe0;
 }
 
@@ -400,18 +400,6 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   width: 100%;
 }
 
-.c68 {
-  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;
-}
-
 .c65 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1000,7 +988,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   padding-right: 4px;
 }
 
-.c69 {
+.c68 {
   position: relative;
   padding-left: 4px;
 }
@@ -1419,15 +1407,8 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
-                                      <span
-                                        class="c68"
-                                      >
-                                        Edit postal_code
-                                      </span>
                                       <svg
-                                        aria-hidden="true"
                                         fill="none"
-                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -1451,15 +1432,8 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
-                                      <span
-                                        class="c68"
-                                      >
-                                        Delete postal_code
-                                      </span>
                                       <svg
-                                        aria-hidden="true"
                                         fill="none"
-                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -1486,7 +1460,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                         class=""
                       >
                         <div
-                          class="c54 c69"
+                          class="c54 c68"
                         >
                           <div
                             class="c56 c57 c58"
@@ -1560,15 +1534,8 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
-                                      <span
-                                        class="c68"
-                                      >
-                                        Edit city
-                                      </span>
                                       <svg
-                                        aria-hidden="true"
                                         fill="none"
-                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -1592,15 +1559,8 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
-                                      <span
-                                        class="c68"
-                                      >
-                                        Delete city
-                                      </span>
                                       <svg
-                                        aria-hidden="true"
                                         fill="none"
-                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -1627,7 +1587,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                       aria-disabled="true"
                       aria-expanded="false"
                       aria-haspopup="true"
-                      class="c10 c70"
+                      class="c10 c69"
                       data-testid="add-field"
                       disabled=""
                       label="Insert another field"
@@ -1666,7 +1626,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
     </form>
   </main>
   <div
-    class="c71"
+    class="c70"
   >
     <p
       aria-live="polite"
@@ -1691,7 +1651,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
 `;
 
 exports[`EditSettingsView should add field 1`] = `
-.c71 {
+.c70 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -1971,7 +1931,7 @@ exports[`EditSettingsView should add field 1`] = `
   fill: #ffffff;
 }
 
-.c70 {
+.c69 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1992,7 +1952,7 @@ exports[`EditSettingsView should add field 1`] = `
   width: 100%;
 }
 
-.c70 .c12 {
+.c69 .c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2003,62 +1963,62 @@ exports[`EditSettingsView should add field 1`] = `
   align-items: center;
 }
 
-.c70 .c15 {
+.c69 .c15 {
   color: #ffffff;
 }
 
-.c70[aria-disabled='true'] {
+.c69[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c70[aria-disabled='true'] .c15 {
+.c69[aria-disabled='true'] .c15 {
   color: #666687;
 }
 
-.c70[aria-disabled='true'] svg > g,
-.c70[aria-disabled='true'] svg path {
+.c69[aria-disabled='true'] svg > g,
+.c69[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c70[aria-disabled='true']:active {
+.c69[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c70[aria-disabled='true']:active .c15 {
+.c69[aria-disabled='true']:active .c15 {
   color: #666687;
 }
 
-.c70[aria-disabled='true']:active svg > g,
-.c70[aria-disabled='true']:active svg path {
+.c69[aria-disabled='true']:active svg > g,
+.c69[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c70:hover {
+.c69:hover {
   background-color: #ffffff;
 }
 
-.c70:active {
+.c69:active {
   background-color: #ffffff;
   border: 1px solid #4945ff;
 }
 
-.c70:active .c15 {
+.c69:active .c15 {
   color: #4945ff;
 }
 
-.c70:active svg > g,
-.c70:active svg path {
+.c69:active svg > g,
+.c69:active svg path {
   fill: #4945ff;
 }
 
-.c70 .c15 {
+.c69 .c15 {
   color: #271fe0;
 }
 
-.c70 svg > g,
-.c70 svg path {
+.c69 svg > g,
+.c69 svg path {
   fill: #271fe0;
 }
 
@@ -2090,18 +2050,6 @@ exports[`EditSettingsView should add field 1`] = `
   width: 100%;
 }
 
-.c68 {
-  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;
-}
-
 .c65 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2690,7 +2638,7 @@ exports[`EditSettingsView should add field 1`] = `
   padding-right: 4px;
 }
 
-.c69 {
+.c68 {
   position: relative;
   padding-left: 4px;
 }
@@ -3109,15 +3057,8 @@ exports[`EditSettingsView should add field 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
-                                      <span
-                                        class="c68"
-                                      >
-                                        Edit postal_code
-                                      </span>
                                       <svg
-                                        aria-hidden="true"
                                         fill="none"
-                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -3141,15 +3082,8 @@ exports[`EditSettingsView should add field 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
-                                      <span
-                                        class="c68"
-                                      >
-                                        Delete postal_code
-                                      </span>
                                       <svg
-                                        aria-hidden="true"
                                         fill="none"
-                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -3176,7 +3110,7 @@ exports[`EditSettingsView should add field 1`] = `
                         class=""
                       >
                         <div
-                          class="c54 c69"
+                          class="c54 c68"
                         >
                           <div
                             class="c56 c57 c58"
@@ -3250,15 +3184,8 @@ exports[`EditSettingsView should add field 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
-                                      <span
-                                        class="c68"
-                                      >
-                                        Edit city
-                                      </span>
                                       <svg
-                                        aria-hidden="true"
                                         fill="none"
-                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -3282,15 +3209,8 @@ exports[`EditSettingsView should add field 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
-                                      <span
-                                        class="c68"
-                                      >
-                                        Delete city
-                                      </span>
                                       <svg
-                                        aria-hidden="true"
                                         fill="none"
-                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -3317,7 +3237,7 @@ exports[`EditSettingsView should add field 1`] = `
                       aria-disabled="true"
                       aria-expanded="false"
                       aria-haspopup="true"
-                      class="c10 c70"
+                      class="c10 c69"
                       data-testid="add-field"
                       disabled=""
                       label="Insert another field"
@@ -3356,7 +3276,7 @@ exports[`EditSettingsView should add field 1`] = `
     </form>
   </main>
   <div
-    class="c71"
+    class="c70"
   >
     <p
       aria-live="polite"
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 adb93dc346e..5bd65ce613e 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
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1`] = `
-.c86 {
+.c85 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -288,18 +288,6 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   padding-bottom: 24px;
 }
 
-.c85 {
-  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;
-}
-
 .c83 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1862,15 +1850,8 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                         tabindex="0"
                         type="button"
                       >
-                        <span
-                          class="c85"
-                        >
-                          Add a field
-                        </span>
                         <svg
-                          aria-hidden="true"
                           fill="none"
-                          focusable="false"
                           height="1em"
                           viewBox="0 0 24 24"
                           width="1em"
@@ -1893,7 +1874,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
     </div>
   </div>
   <div
-    class="c86"
+    class="c85"
   >
     <p
       aria-live="polite"
@@ -1918,7 +1899,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
 `;
 
 exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
-.c86 {
+.c85 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -2205,18 +2186,6 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   padding-bottom: 24px;
 }
 
-.c85 {
-  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;
-}
-
 .c83 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -3882,15 +3851,8 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                         tabindex="0"
                         type="button"
                       >
-                        <span
-                          class="c85"
-                        >
-                          Add a field
-                        </span>
                         <svg
-                          aria-hidden="true"
                           fill="none"
-                          focusable="false"
                           height="1em"
                           viewBox="0 0 24 24"
                           width="1em"
@@ -3913,7 +3875,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
     </div>
   </div>
   <div
-    class="c86"
+    class="c85"
   >
     <p
       aria-live="polite"
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 f1271cb642f..9f5aa966804 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
@@ -261,10 +261,6 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         padding-top: 16px;
       }
 
-      .c31 {
-        padding-left: 8px;
-      }
-
       .c30 {
         margin: 0;
         height: 18px;
@@ -333,6 +329,10 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         background-color: #8e8ea9;
       }
 
+      .c31 {
+        padding-left: 8px;
+      }
+
       .c26 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
@@ -817,17 +817,13 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
                   <label
                     class="c28 c29"
                   >
-                    <div
-                      class=""
-                    >
-                      <input
-                        aria-label="rememberMe"
-                        class="c30"
-                        id="checkbox-1"
-                        name="rememberMe"
-                        type="checkbox"
-                      />
-                    </div>
+                    <input
+                      aria-label="rememberMe"
+                      class="c30"
+                      id="checkbox-1"
+                      name="rememberMe"
+                      type="checkbox"
+                    />
                     <div
                       class="c31"
                     >
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 c021de37417..d4fd56d701d 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
@@ -285,10 +285,6 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         padding-bottom: 32px;
       }
 
-      .c45 {
-        padding-left: 8px;
-      }
-
       .c44 {
         margin: 0;
         height: 18px;
@@ -357,6 +353,10 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         background-color: #8e8ea9;
       }
 
+      .c45 {
+        padding-left: 8px;
+      }
+
       .c40 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
@@ -1185,17 +1185,13 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                       <label
                         class="c42 c43"
                       >
-                        <div
-                          class=""
-                        >
-                          <input
-                            aria-label="news"
-                            class="c44"
-                            id="checkbox-1"
-                            name="news"
-                            type="checkbox"
-                          />
-                        </div>
+                        <input
+                          aria-label="news"
+                          class="c44"
+                          id="checkbox-1"
+                          name="news"
+                          type="checkbox"
+                        />
                         <div
                           class="c45"
                         >
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 534ce56d123..5bc80a1a5d6 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
@@ -993,7 +993,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 1px solid #4945ff;
 }
 
-.c67:hover:not([aria-disabled='true']) .sc-igcPbY {
+.c67:hover:not([aria-disabled='true']) .sc-eHyqeh {
   color: #271fe0;
 }
 
@@ -1017,7 +1017,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 1px solid #4945ff;
 }
 
-.c85:hover:not([aria-disabled='true']) .sc-igcPbY {
+.c85:hover:not([aria-disabled='true']) .sc-eHyqeh {
   color: #271fe0;
 }
 
@@ -1610,7 +1610,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             class="c78 c79"
                           >
                             <span
-                              class="c78 sc-igcPbY c80"
+                              class="c78 sc-eHyqeh c80"
                               id="accordion-label-accordion-1"
                             >
                               Address
@@ -1675,7 +1675,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             class="c78 c79"
                           >
                             <span
-                              class="c78 sc-igcPbY c80"
+                              class="c78 sc-eHyqeh c80"
                               id="accordion-label-accordion-2"
                             >
                               Category
@@ -2962,7 +2962,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 1px solid #4945ff;
 }
 
-.c78:hover:not([aria-disabled='true']) .sc-igcPbY {
+.c78:hover:not([aria-disabled='true']) .sc-eHyqeh {
   color: #271fe0;
 }
 
@@ -2986,7 +2986,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 1px solid #4945ff;
 }
 
-.c96:hover:not([aria-disabled='true']) .sc-igcPbY {
+.c96:hover:not([aria-disabled='true']) .sc-eHyqeh {
   color: #271fe0;
 }
 
@@ -3655,7 +3655,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             class="c89 c90"
                           >
                             <span
-                              class="c89 sc-igcPbY c91"
+                              class="c89 sc-eHyqeh c91"
                               id="accordion-label-accordion-7"
                             >
                               Address
@@ -3720,7 +3720,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             class="c89 c90"
                           >
                             <span
-                              class="c89 sc-igcPbY c91"
+                              class="c89 sc-eHyqeh c91"
                               id="accordion-label-accordion-8"
                             >
                               Category
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 43b6270aa05..4150ea41c5d 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
@@ -92,7 +92,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
     });
 
     expect(container.firstChild).toMatchInlineSnapshot(`
-      .c35 {
+      .c34 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -118,14 +118,14 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         text-transform: uppercase;
       }
 
-      .c31 {
+      .c30 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.875rem;
         line-height: 1.43;
       }
 
-      .c33 {
+      .c32 {
         color: #32324d;
         display: block;
         white-space: nowrap;
@@ -135,13 +135,13 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         line-height: 1.43;
       }
 
-      .c34 {
+      .c33 {
         color: #32324d;
         font-size: 0.875rem;
         line-height: 1.43;
       }
 
-      .c39 {
+      .c38 {
         padding-left: 4px;
       }
 
@@ -156,7 +156,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         padding-left: 24px;
       }
 
-      .c32 {
+      .c31 {
         max-width: 15.625rem;
       }
 
@@ -199,7 +199,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         overflow-x: auto;
       }
 
-      .c30 tr:last-of-type {
+      .c29 tr:last-of-type {
         border-bottom: none;
       }
 
@@ -256,18 +256,6 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         height: 0.25rem;
       }
 
-      .c27 {
-        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;
-      }
-
       .c25 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -367,7 +355,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         fill: #666687;
       }
 
-      .c29 {
+      .c28 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -379,13 +367,13 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         width: 1px;
       }
 
-      .c38 {
+      .c37 {
         color: #4945ff;
         font-size: 0.875rem;
         line-height: 1.43;
       }
 
-      .c36 {
+      .c35 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -400,15 +388,15 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         outline: none;
       }
 
-      .c36 svg path {
+      .c35 svg path {
         fill: #4945ff;
       }
 
-      .c36 svg {
+      .c35 svg {
         font-size: 0.625rem;
       }
 
-      .c36:after {
+      .c35:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -423,11 +411,11 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         border: 2px solid transparent;
       }
 
-      .c36:focus-visible {
+      .c35:focus-visible {
         outline: none;
       }
 
-      .c36:focus-visible:after {
+      .c35:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -578,7 +566,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         fill: #ffffff;
       }
 
-      .c28 {
+      .c27 {
         -webkit-transform: rotate(180deg);
         -ms-transform: rotate(180deg);
         transform: rotate(180deg);
@@ -646,12 +634,12 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         outline: none;
       }
 
-      .c37 svg path {
+      .c36 svg path {
         fill: #8e8ea9;
       }
 
-      .c37:hover svg path,
-      .c37:focus svg path {
+      .c36:hover svg path,
+      .c36:focus svg path {
         fill: #32324d;
       }
 
@@ -772,16 +760,9 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                                 tabindex="-1"
                                 type="button"
                               >
-                                <span
-                                  class="c27"
-                                >
-                                  Sort on Name
-                                </span>
                                 <svg
-                                  aria-hidden="true"
-                                  class="c28"
+                                  class="c27"
                                   fill="none"
-                                  focusable="false"
                                   height="1em"
                                   viewBox="0 0 14 8"
                                   width="1em"
@@ -874,7 +855,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                           class="c22"
                         >
                           <div
-                            class="c29"
+                            class="c28"
                           >
                             Actions
                           </div>
@@ -886,7 +867,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                     </tr>
                   </thead>
                   <tbody
-                    class="c30"
+                    class="c29"
                   >
                     <tr
                       aria-rowindex="2"
@@ -899,18 +880,18 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                         tabindex="-1"
                       >
                         <span
-                          class="c31"
+                          class="c30"
                         >
                           My super token
                         </span>
                       </td>
                       <td
                         aria-colindex="2"
-                        class="c32 c21"
+                        class="c31 c21"
                         tabindex="-1"
                       >
                         <span
-                          class="c33"
+                          class="c32"
                         >
                           This describe my super token
                         </span>
@@ -921,7 +902,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                         tabindex="-1"
                       >
                         <span
-                          class="c34"
+                          class="c33"
                         >
                           <time
                             datetime="2021-11-15T00:00:00.000Z"
@@ -942,16 +923,16 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                         tabindex="-1"
                       >
                         <div
-                          class="c35"
+                          class="c34"
                         >
                           <a
-                            class="c36 c37"
+                            class="c35 c36"
                             href="/settings/api-tokens/1"
                             tabindex="-1"
                             title="Edit My super token"
                           >
                             <span
-                              class="c38"
+                              class="c37"
                             >
                               <svg
                                 fill="none"
@@ -971,7 +952,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                           </a>
                           <div
                             aria-hidden="true"
-                            class="c39"
+                            class="c38"
                             role="button"
                           >
                             <span>
@@ -983,15 +964,8 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                                 tabindex="-1"
                                 type="button"
                               >
-                                <span
-                                  class="c27"
-                                >
-                                  Delete My super token
-                                </span>
                                 <svg
-                                  aria-hidden="true"
                                   fill="none"
-                                  focusable="false"
                                   height="1em"
                                   viewBox="0 0 24 24"
                                   width="1em"
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 6fc752894c7..d6d3a9a3a9f 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
@@ -4,7 +4,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
 <body
   class="lock-body-scroll"
 >
-  .c21 {
+  .c20 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -45,7 +45,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   width: 100%;
 }
 
-.c18 {
+.c17 {
   padding-top: 8px;
   padding-right: 16px;
   padding-left: 16px;
@@ -58,7 +58,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   line-height: 1.33;
 }
 
-.c19 {
+.c18 {
   color: #666687;
   display: block;
   white-space: nowrap;
@@ -68,7 +68,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   line-height: 1.33;
 }
 
-.c20 {
+.c19 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
@@ -155,18 +155,6 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   display: flex;
 }
 
-.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;
-}
-
 .c15 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -331,15 +319,8 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                     tabindex="0"
                     type="button"
                   >
-                    <span
-                      class="c17"
-                    >
-                      Change logo
-                    </span>
                     <svg
-                      aria-hidden="true"
                       fill="none"
-                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -355,7 +336,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
               </div>
             </section>
             <div
-              class="c18"
+              class="c17"
             >
               <span>
                 <div
@@ -364,7 +345,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                   tabindex="0"
                 >
                   <span
-                    class="c19"
+                    class="c18"
                   >
                     logo.png
                   </span>
@@ -374,7 +355,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
           </div>
         </div>
         <p
-          class="c20"
+          class="c19"
           id="carouselinput-4-hint"
         >
           Change the admin panel logo (Max dimension: 750x750, Max file size: 100KB)
@@ -382,7 +363,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
       </div>
     </div>
     <div
-      class="c21"
+      class="c20"
     >
       <p
         aria-live="polite"
@@ -472,24 +453,24 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
       </p>
     </div>
   </div>
-  .c10 {
+  .c9 {
   padding-right: 40px;
   padding-left: 40px;
 }
 
-.c19 {
+.c18 {
   padding-top: 24px;
   padding-right: 40px;
   padding-bottom: 24px;
   padding-left: 40px;
 }
 
-.c26 {
+.c25 {
   padding-top: 12px;
   padding-bottom: 20px;
 }
 
-.c33 {
+.c32 {
   padding-top: 24px;
 }
 
@@ -549,7 +530,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   justify-content: space-between;
 }
 
-.c36 {
+.c35 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -563,18 +544,6 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   flex-direction: row;
 }
 
-.c9 {
-  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;
-}
-
 .c7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -678,12 +647,12 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   border-bottom: 1px solid #eaeaef;
 }
 
-.c35 {
+.c34 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c37 > * + * {
+.c36 > * + * {
   margin-left: 8px;
 }
 
@@ -694,20 +663,20 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   line-height: 1.43;
 }
 
-.c27 {
+.c26 {
   color: #32324d;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
 }
 
-.c34 {
+.c33 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c14 {
+.c13 {
   color: #4945ff;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -715,7 +684,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   text-transform: uppercase;
 }
 
-.c16 {
+.c15 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -723,33 +692,33 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   text-transform: uppercase;
 }
 
-.c12 {
+.c11 {
   padding: 16px;
 }
 
-.c13 {
+.c12 {
   border-bottom: 2px solid #4945ff;
 }
 
-.c15 {
+.c14 {
   border-bottom: 2px solid transparent;
 }
 
-.c11[aria-disabled='true'] {
+.c10[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c17 {
+.c16 {
   background: #eaeaef;
 }
 
-.c18 {
+.c17 {
   height: 1px;
   border: none;
   margin: 0;
 }
 
-.c20 {
+.c19 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -763,16 +732,16 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   flex-direction: column;
 }
 
-.c21 > * {
+.c20 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c21 > * + * {
+.c20 > * + * {
   margin-top: 8px;
 }
 
-.c22 {
+.c21 {
   background: #f6f6f9;
   padding-top: 48px;
   padding-bottom: 32px;
@@ -783,7 +752,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   position: relative;
 }
 
-.c23 {
+.c22 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -801,24 +770,24 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   justify-content: center;
 }
 
-.c24 {
+.c23 {
   color: #4945ff;
   width: 3.75rem;
   height: 3.75rem;
 }
 
-.c25 path {
+.c24 path {
   fill: #4945ff;
 }
 
-.c32 {
+.c31 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c29 {
+.c28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -832,21 +801,21 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   outline: none;
 }
 
-.c29 svg {
+.c28 svg {
   height: 12px;
   width: 12px;
 }
 
-.c29 svg > g,
-.c29 svg path {
+.c28 svg > g,
+.c28 svg path {
   fill: #ffffff;
 }
 
-.c29[aria-disabled='true'] {
+.c28[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c29:after {
+.c28:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -861,11 +830,11 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   border: 2px solid transparent;
 }
 
-.c29:focus-visible {
+.c28:focus-visible {
   outline: none;
 }
 
-.c29:focus-visible:after {
+.c28:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -876,7 +845,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   border: 2px solid #4945ff;
 }
 
-.c30 {
+.c29 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -886,7 +855,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   border: 1px solid #4945ff;
 }
 
-.c30 .sc-hAWBJg {
+.c29 .sc-hAWBJg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -897,54 +866,54 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   align-items: center;
 }
 
-.c30 .c31 {
+.c29 .c30 {
   color: #ffffff;
 }
 
-.c30[aria-disabled='true'] {
+.c29[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c30[aria-disabled='true'] .c31 {
+.c29[aria-disabled='true'] .c30 {
   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 .c31 {
+.c29[aria-disabled='true']:active .c30 {
   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 {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c30:active {
+.c29:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c30 svg > g,
-.c30 svg path {
+.c29 svg > g,
+.c29 svg path {
   fill: #ffffff;
 }
 
-.c38 {
+.c37 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -956,7 +925,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   background: #ffffff;
 }
 
-.c38 .sc-hAWBJg {
+.c37 .sc-hAWBJg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -967,56 +936,56 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   align-items: center;
 }
 
-.c38 .c31 {
+.c37 .c30 {
   color: #ffffff;
 }
 
-.c38[aria-disabled='true'] {
+.c37[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c38[aria-disabled='true'] .c31 {
+.c37[aria-disabled='true'] .c30 {
   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 .c31 {
+.c37[aria-disabled='true']:active .c30 {
   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 {
   background-color: #f6f6f9;
 }
 
-.c38:active {
+.c37:active {
   background-color: #eaeaef;
 }
 
-.c38 .c31 {
+.c37 .c30 {
   color: #32324d;
 }
 
-.c38 svg > g,
-.c38 svg path {
+.c37 svg > g,
+.c37 svg path {
   fill: #32324d;
 }
 
-.c28 {
+.c27 {
   opacity: 0;
   position: absolute;
   top: 0;
@@ -1054,18 +1023,12 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                 </h2>
                 <button
                   aria-disabled="false"
+                  aria-label="Close the modal"
                   class="c7 c8"
                   type="button"
                 >
-                  <span
-                    class="c9"
-                  >
-                    Close the modal
-                  </span>
                   <svg
-                    aria-hidden="true"
                     fill="none"
-                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -1081,7 +1044,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
             </div>
             <div>
               <div
-                class="c10"
+                class="c9"
               >
                 <div
                   aria-label="How do you want to upload your assets?"
@@ -1091,17 +1054,17 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                     aria-controls="tabgroup-1-0-tabpanel"
                     aria-disabled="false"
                     aria-selected="true"
-                    class="c11"
+                    class="c10"
                     id="tabgroup-1-0-tab"
                     role="tab"
                     tabindex="0"
                     type="button"
                   >
                     <div
-                      class="c12 c13"
+                      class="c11 c12"
                     >
                       <span
-                        class="c14"
+                        class="c13"
                       >
                         From computer
                       </span>
@@ -1110,17 +1073,17 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                   <button
                     aria-disabled="false"
                     aria-selected="false"
-                    class="c11"
+                    class="c10"
                     id="tabgroup-1-1-tab"
                     role="tab"
                     tabindex="-1"
                     type="button"
                   >
                     <div
-                      class="c12 c15"
+                      class="c11 c14"
                     >
                       <span
-                        class="c16"
+                        class="c15"
                       >
                         From url
                       </span>
@@ -1128,7 +1091,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                   </button>
                 </div>
                 <hr
-                  class="c17 c18"
+                  class="c16 c17"
                 />
               </div>
               <div>
@@ -1140,22 +1103,22 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                 >
                   <form>
                     <div
-                      class="c19"
+                      class="c18"
                     >
                       <div>
                         <label
                           for="logo-upload"
                         >
                           <div
-                            class="c20 c21"
+                            class="c19 c20"
                             spacing="2"
                           >
                             <div
-                              class="c22 c23"
+                              class="c21 c22"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="c24 c25"
+                                class="c23 c24"
                                 fill="none"
                                 height="3.75rem"
                                 viewBox="0 0 24 20"
@@ -1172,17 +1135,17 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                                 />
                               </svg>
                               <div
-                                class="c26"
+                                class="c25"
                               >
                                 <span
-                                  class="c27"
+                                  class="c26"
                                 >
                                   Drag and Drop here or
                                 </span>
                               </div>
                               <input
                                 accept="image/jpeg,image/png,image/svg+xml"
-                                class="c28"
+                                class="c27"
                                 cursor="pointer"
                                 id="logo-upload"
                                 name="files"
@@ -1191,20 +1154,20 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                               />
                               <button
                                 aria-disabled="false"
-                                class="c29 c30"
+                                class="c28 c29"
                                 type="button"
                               >
                                 <span
-                                  class="c31 c32"
+                                  class="c30 c31"
                                 >
                                   Browse files
                                 </span>
                               </button>
                               <div
-                                class="c33"
+                                class="c32"
                               >
                                 <span
-                                  class="c34"
+                                  class="c33"
                                 >
                                   Max dimension: 750x750, Max size: 100KB
                                 </span>
@@ -1216,28 +1179,28 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                     </div>
                   </form>
                   <div
-                    class="c3 c35"
+                    class="c3 c34"
                   >
                     <div
                       class="c5"
                     >
                       <div
-                        class="c36 c37"
+                        class="c35 c36"
                       >
                         <button
                           aria-disabled="false"
-                          class="c29 c38"
+                          class="c28 c37"
                           type="button"
                         >
                           <span
-                            class="c31 c32"
+                            class="c30 c31"
                           >
                             Cancel
                           </span>
                         </button>
                       </div>
                       <div
-                        class="c36 c37"
+                        class="c35 c36"
                       />
                     </div>
                   </div>
@@ -1256,7 +1219,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
 <body
   class="lock-body-scroll"
 >
-  .c21 {
+  .c20 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -1297,7 +1260,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   width: 100%;
 }
 
-.c18 {
+.c17 {
   padding-top: 8px;
   padding-right: 16px;
   padding-left: 16px;
@@ -1310,7 +1273,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   line-height: 1.33;
 }
 
-.c19 {
+.c18 {
   color: #666687;
   display: block;
   white-space: nowrap;
@@ -1320,7 +1283,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   line-height: 1.33;
 }
 
-.c20 {
+.c19 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
@@ -1407,18 +1370,6 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   display: flex;
 }
 
-.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;
-}
-
 .c15 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1583,15 +1534,8 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                     tabindex="0"
                     type="button"
                   >
-                    <span
-                      class="c17"
-                    >
-                      Change logo
-                    </span>
                     <svg
-                      aria-hidden="true"
                       fill="none"
-                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -1607,7 +1551,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
               </div>
             </section>
             <div
-              class="c18"
+              class="c17"
             >
               <span>
                 <div
@@ -1616,7 +1560,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                   tabindex="0"
                 >
                   <span
-                    class="c19"
+                    class="c18"
                   >
                     logo.png
                   </span>
@@ -1626,7 +1570,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
           </div>
         </div>
         <p
-          class="c20"
+          class="c19"
           id="carouselinput-49-hint"
         >
           Change the admin panel logo (Max dimension: 750x750, Max file size: 100KB)
@@ -1634,7 +1578,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
       </div>
     </div>
     <div
-      class="c21"
+      class="c20"
     >
       <p
         aria-live="polite"
@@ -1724,12 +1668,12 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
       </p>
     </div>
   </div>
-  .c10 {
+  .c9 {
   padding-right: 40px;
   padding-left: 40px;
 }
 
-.c19 {
+.c18 {
   padding-top: 24px;
   padding-right: 40px;
   padding-bottom: 24px;
@@ -1792,7 +1736,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   justify-content: space-between;
 }
 
-.c28 {
+.c27 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1806,18 +1750,6 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   flex-direction: row;
 }
 
-.c9 {
-  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;
-}
-
 .c7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1921,12 +1853,12 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   border-bottom: 1px solid #eaeaef;
 }
 
-.c27 {
+.c26 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c29 > * + * {
+.c28 > * + * {
   margin-left: 8px;
 }
 
@@ -1937,7 +1869,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   line-height: 1.43;
 }
 
-.c16 {
+.c15 {
   color: #4945ff;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -1945,7 +1877,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   text-transform: uppercase;
 }
 
-.c14 {
+.c13 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -1953,40 +1885,40 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   text-transform: uppercase;
 }
 
-.c12 {
+.c11 {
   padding: 16px;
 }
 
-.c15 {
+.c14 {
   border-bottom: 2px solid #4945ff;
 }
 
-.c13 {
+.c12 {
   border-bottom: 2px solid transparent;
 }
 
-.c11[aria-disabled='true'] {
+.c10[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c17 {
+.c16 {
   background: #eaeaef;
 }
 
-.c18 {
+.c17 {
   height: 1px;
   border: none;
   margin: 0;
 }
 
-.c33 {
+.c32 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c30 {
+.c29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2000,21 +1932,21 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   outline: none;
 }
 
-.c30 svg {
+.c29 svg {
   height: 12px;
   width: 12px;
 }
 
-.c30 svg > g,
-.c30 svg path {
+.c29 svg > g,
+.c29 svg path {
   fill: #ffffff;
 }
 
-.c30[aria-disabled='true'] {
+.c29[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c30:after {
+.c29:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -2029,11 +1961,11 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   border: 2px solid transparent;
 }
 
-.c30:focus-visible {
+.c29:focus-visible {
   outline: none;
 }
 
-.c30:focus-visible:after {
+.c29:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -2044,7 +1976,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   border: 2px solid #4945ff;
 }
 
-.c34 {
+.c33 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2054,7 +1986,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   border: 1px solid #4945ff;
 }
 
-.c34 .sc-hAWBJg {
+.c33 .sc-hAWBJg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2065,54 +1997,54 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   align-items: center;
 }
 
-.c34 .c32 {
+.c33 .c31 {
   color: #ffffff;
 }
 
-.c34[aria-disabled='true'] {
+.c33[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c34[aria-disabled='true'] .c32 {
+.c33[aria-disabled='true'] .c31 {
   color: #666687;
 }
 
-.c34[aria-disabled='true'] svg > g,
-.c34[aria-disabled='true'] svg path {
+.c33[aria-disabled='true'] svg > g,
+.c33[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c34[aria-disabled='true']:active {
+.c33[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c34[aria-disabled='true']:active .c32 {
+.c33[aria-disabled='true']:active .c31 {
   color: #666687;
 }
 
-.c34[aria-disabled='true']:active svg > g,
-.c34[aria-disabled='true']:active svg path {
+.c33[aria-disabled='true']:active svg > g,
+.c33[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c34:hover {
+.c33:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c34:active {
+.c33:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c34 svg > g,
-.c34 svg path {
+.c33 svg > g,
+.c33 svg path {
   fill: #ffffff;
 }
 
-.c31 {
+.c30 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2124,7 +2056,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   background: #ffffff;
 }
 
-.c31 .sc-hAWBJg {
+.c30 .sc-hAWBJg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2135,56 +2067,56 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   align-items: center;
 }
 
-.c31 .c32 {
+.c30 .c31 {
   color: #ffffff;
 }
 
-.c31[aria-disabled='true'] {
+.c30[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c31[aria-disabled='true'] .c32 {
+.c30[aria-disabled='true'] .c31 {
   color: #666687;
 }
 
-.c31[aria-disabled='true'] svg > g,
-.c31[aria-disabled='true'] svg path {
+.c30[aria-disabled='true'] svg > g,
+.c30[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c31[aria-disabled='true']:active {
+.c30[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c31[aria-disabled='true']:active .c32 {
+.c30[aria-disabled='true']:active .c31 {
   color: #666687;
 }
 
-.c31[aria-disabled='true']:active svg > g,
-.c31[aria-disabled='true']:active svg path {
+.c30[aria-disabled='true']:active svg > g,
+.c30[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c31:hover {
+.c30:hover {
   background-color: #f6f6f9;
 }
 
-.c31:active {
+.c30:active {
   background-color: #eaeaef;
 }
 
-.c31 .c32 {
+.c30 .c31 {
   color: #32324d;
 }
 
-.c31 svg > g,
-.c31 svg path {
+.c30 svg > g,
+.c30 svg path {
   fill: #32324d;
 }
 
-.c20 {
+.c19 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -2198,7 +2130,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   flex-direction: column;
 }
 
-.c23 {
+.c22 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2212,7 +2144,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   flex-direction: row;
 }
 
-.c24 {
+.c23 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2230,14 +2162,14 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   justify-content: space-between;
 }
 
-.c22 {
+.c21 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c26 {
+.c25 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -2252,36 +2184,36 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   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;
@@ -2293,17 +2225,17 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   transition-duration: 0.2s;
 }
 
-.c25:focus-within {
+.c24:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c21 > * {
+.c20 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c21 > * + * {
+.c20 > * + * {
   margin-top: 4px;
 }
 
@@ -2335,18 +2267,12 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                 </h2>
                 <button
                   aria-disabled="false"
+                  aria-label="Close the modal"
                   class="c7 c8"
                   type="button"
                 >
-                  <span
-                    class="c9"
-                  >
-                    Close the modal
-                  </span>
                   <svg
-                    aria-hidden="true"
                     fill="none"
-                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -2362,7 +2288,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
             </div>
             <div>
               <div
-                class="c10"
+                class="c9"
               >
                 <div
                   aria-label="How do you want to upload your assets?"
@@ -2371,17 +2297,17 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                   <button
                     aria-disabled="false"
                     aria-selected="false"
-                    class="c11"
+                    class="c10"
                     id="tabgroup-10-0-tab"
                     role="tab"
                     tabindex="-1"
                     type="button"
                   >
                     <div
-                      class="c12 c13"
+                      class="c11 c12"
                     >
                       <span
-                        class="c14"
+                        class="c13"
                       >
                         From computer
                       </span>
@@ -2391,17 +2317,17 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                     aria-controls="tabgroup-10-1-tabpanel"
                     aria-disabled="false"
                     aria-selected="true"
-                    class="c11"
+                    class="c10"
                     id="tabgroup-10-1-tab"
                     role="tab"
                     tabindex="0"
                     type="button"
                   >
                     <div
-                      class="c12 c15"
+                      class="c11 c14"
                     >
                       <span
-                        class="c16"
+                        class="c15"
                       >
                         From url
                       </span>
@@ -2409,7 +2335,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                   </button>
                 </div>
                 <hr
-                  class="c17 c18"
+                  class="c16 c17"
                 />
               </div>
               <div>
@@ -2421,31 +2347,31 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                 >
                   <form>
                     <div
-                      class="c19"
+                      class="c18"
                     >
                       <div>
                         <div>
                           <div
-                            class="c20 c21"
+                            class="c19 c20"
                             spacing="1"
                           >
                             <label
-                              class="c22"
+                              class="c21"
                               for="textinput-1"
                             >
                               <div
-                                class="c23"
+                                class="c22"
                               >
                                 URL
                               </div>
                             </label>
                             <div
-                              class="c24 c25"
+                              class="c23 c24"
                             >
                               <input
                                 aria-disabled="false"
                                 aria-invalid="false"
-                                class="c26"
+                                class="c25"
                                 id="textinput-1"
                                 name="logo-url"
                                 value=""
@@ -2456,36 +2382,36 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                       </div>
                     </div>
                     <div
-                      class="c3 c27"
+                      class="c3 c26"
                     >
                       <div
                         class="c5"
                       >
                         <div
-                          class="c28 c29"
+                          class="c27 c28"
                         >
                           <button
                             aria-disabled="false"
-                            class="c30 c31"
+                            class="c29 c30"
                             type="button"
                           >
                             <span
-                              class="c32 c33"
+                              class="c31 c32"
                             >
                               Cancel
                             </span>
                           </button>
                         </div>
                         <div
-                          class="c28 c29"
+                          class="c27 c28"
                         >
                           <button
                             aria-disabled="false"
-                            class="c30 c34"
+                            class="c29 c33"
                             type="submit"
                           >
                             <span
-                              class="c32 c33"
+                              class="c31 c32"
                             >
                               Next
                             </span>
@@ -2506,7 +2432,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
 `;
 
 exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`] = `
-.c21 {
+.c20 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -2547,13 +2473,13 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   width: 100%;
 }
 
-.c18 {
+.c17 {
   padding-top: 8px;
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c25 {
+.c24 {
   background: #212134;
   padding: 8px;
   border-radius: 4px;
@@ -2566,7 +2492,7 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   line-height: 1.33;
 }
 
-.c19 {
+.c18 {
   color: #666687;
   display: block;
   white-space: nowrap;
@@ -2576,13 +2502,13 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   line-height: 1.33;
 }
 
-.c20 {
+.c19 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c27 {
+.c26 {
   font-weight: 600;
   color: #ffffff;
   font-size: 0.75rem;
@@ -2635,7 +2561,7 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   justify-content: center;
 }
 
-.c26 {
+.c25 {
   position: absolute;
   z-index: 4;
   display: none;
@@ -2676,32 +2602,20 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   display: flex;
 }
 
-.c22 {
+.c21 {
   background: #212134;
   padding: 8px;
   border-radius: 4px;
 }
 
-.c24 {
+.c23 {
   font-weight: 600;
   color: #ffffff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.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;
-}
-
-.c23 {
+.c22 {
   position: absolute;
   z-index: 4;
   display: none;
@@ -2872,15 +2786,8 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
                     tabindex="0"
                     type="button"
                   >
-                    <span
-                      class="c17"
-                    >
-                      Change logo
-                    </span>
                     <svg
-                      aria-hidden="true"
                       fill="none"
-                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -2896,7 +2803,7 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
               </div>
             </section>
             <div
-              class="c18"
+              class="c17"
             >
               <span>
                 <div
@@ -2905,7 +2812,7 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
                   tabindex="0"
                 >
                   <span
-                    class="c19"
+                    class="c18"
                   >
                     logo.png
                   </span>
@@ -2915,7 +2822,7 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
           </div>
         </div>
         <p
-          class="c20"
+          class="c19"
           id="carouselinput-1-hint"
         >
           Change the admin panel logo (Max dimension: 750x750, Max file size: 100KB)
@@ -2923,7 +2830,7 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
       </div>
     </div>
     <div
-      class="c21"
+      class="c20"
     >
       <p
         aria-live="polite"
@@ -2949,12 +2856,12 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
     data-react-portal="true"
   >
     <div
-      class="c22 c23"
+      class="c21 c22"
       id="tooltip-1"
       role="tooltip"
     >
       <p
-        class="c24"
+        class="c23"
       >
         Change logo
       </p>
@@ -2964,12 +2871,12 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
     data-react-portal="true"
   >
     <div
-      class="c25 c26"
+      class="c24 c25"
       id="tooltip-2"
       role="tooltip"
     >
       <p
-        class="c27"
+        class="c26"
       >
         logo.png
       </p>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
index 70cfe92b240..85c819433e1 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
@@ -272,18 +272,6 @@ describe('Application page', () => {
         max-height: 40%;
       }
 
-      .c51 {
-        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 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -579,7 +567,7 @@ describe('Application page', () => {
         width: 100%;
       }
 
-      .c52 {
+      .c51 {
         padding-top: 8px;
         padding-right: 16px;
         padding-left: 16px;
@@ -592,7 +580,7 @@ describe('Application page', () => {
         line-height: 1.33;
       }
 
-      .c53 {
+      .c52 {
         color: #666687;
         display: block;
         white-space: nowrap;
@@ -602,7 +590,7 @@ describe('Application page', () => {
         line-height: 1.33;
       }
 
-      .c54 {
+      .c53 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
@@ -1027,15 +1015,8 @@ describe('Application page', () => {
                                           tabindex="0"
                                           type="button"
                                         >
-                                          <span
-                                            class="c51"
-                                          >
-                                            Change logo
-                                          </span>
                                           <svg
-                                            aria-hidden="true"
                                             fill="none"
-                                            focusable="false"
                                             height="1em"
                                             viewBox="0 0 24 24"
                                             width="1em"
@@ -1056,15 +1037,8 @@ describe('Application page', () => {
                                           tabindex="0"
                                           type="button"
                                         >
-                                          <span
-                                            class="c51"
-                                          >
-                                            Reset logo
-                                          </span>
                                           <svg
-                                            aria-hidden="true"
                                             fill="none"
-                                            focusable="false"
                                             height="1em"
                                             viewBox="0 0 24 24"
                                             width="1em"
@@ -1082,7 +1056,7 @@ describe('Application page', () => {
                                     </div>
                                   </section>
                                   <div
-                                    class="c52"
+                                    class="c51"
                                   >
                                     <span>
                                       <div
@@ -1091,7 +1065,7 @@ describe('Application page', () => {
                                         tabindex="0"
                                       >
                                         <span
-                                          class="c53"
+                                          class="c52"
                                         >
                                           michka.svg
                                         </span>
@@ -1101,7 +1075,7 @@ describe('Application page', () => {
                                 </div>
                               </div>
                               <p
-                                class="c54"
+                                class="c53"
                                 id="carouselinput-1-hint"
                               >
                                 Change the admin panel logo (Max dimension: 750x750, Max file size: 100KB)
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 020aa39b4b5..e609bc17b50 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
@@ -466,7 +466,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
       </div>
       <nav
         aria-label="pagination"
-        class="sc-bIaGFe"
+        class="sc-fAyhPT"
       >
         <ul
           class="c17 c18"
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
index a5e5ac32c84..73a209afd20 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
@@ -70,7 +70,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
     const { container } = render(app);
 
     expect(container.firstChild).toMatchInlineSnapshot(`
-      .c44 {
+      .c43 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -82,13 +82,13 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         width: 1px;
       }
 
-      .c45 {
+      .c44 {
         -webkit-animation: gzYjWD 1s infinite linear;
         animation: gzYjWD 1s infinite linear;
         will-change: transform;
       }
 
-      .c42 {
+      .c41 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -106,7 +106,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         justify-content: center;
       }
 
-      .c47 {
+      .c46 {
         -webkit-align-items: flex-end;
         -webkit-box-align: flex-end;
         -ms-flex-align: flex-end;
@@ -124,7 +124,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         justify-content: space-between;
       }
 
-      .c48 {
+      .c47 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -138,7 +138,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         flex-direction: row;
       }
 
-      .c37 {
+      .c36 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -146,7 +146,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         text-transform: uppercase;
       }
 
-      .c62 {
+      .c61 {
         color: #666687;
         font-size: 0.875rem;
         line-height: 1.43;
@@ -293,7 +293,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         fill: #ffffff;
       }
 
-      .c24 {
+      .c23 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -305,7 +305,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         background: #ffffff;
       }
 
-      .c24 .c7 {
+      .c23 .c7 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -316,99 +316,99 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         align-items: center;
       }
 
-      .c24 .c10 {
+      .c23 .c10 {
         color: #ffffff;
       }
 
-      .c24[aria-disabled='true'] {
+      .c23[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c24[aria-disabled='true'] .c10 {
+      .c23[aria-disabled='true'] .c10 {
         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 .c10 {
+      .c23[aria-disabled='true']:active .c10 {
         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 .c10 {
+      .c23 .c10 {
         color: #32324d;
       }
 
-      .c24 svg > g,
-      .c24 svg path {
+      .c23 svg > g,
+      .c23 svg path {
         fill: #32324d;
       }
 
-      .c23 {
+      .c22 {
         padding-top: 4px;
         padding-bottom: 4px;
       }
 
-      .c43 {
+      .c42 {
         background: #ffffff;
         padding: 64px;
       }
 
-      .c46 {
+      .c45 {
         padding-top: 16px;
       }
 
-      .c61 {
+      .c60 {
         padding-left: 8px;
       }
 
-      .c25 {
+      .c24 {
         background: #ffffff;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c28 {
+      .c27 {
         padding-right: 24px;
         padding-left: 24px;
       }
 
-      .c26 {
+      .c25 {
         overflow: hidden;
         border: 1px solid #eaeaef;
       }
 
-      .c30 {
+      .c29 {
         width: 100%;
         white-space: nowrap;
       }
 
-      .c27 {
+      .c26 {
         position: relative;
       }
 
-      .c27:before {
+      .c26:before {
         background: linear-gradient(90deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -418,7 +418,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         left: 0;
       }
 
-      .c27:after {
+      .c26:after {
         background: linear-gradient(270deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -429,39 +429,39 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         top: 0;
       }
 
-      .c29 {
+      .c28 {
         overflow-x: auto;
       }
 
-      .c41 tr:last-of-type {
+      .c40 tr:last-of-type {
         border-bottom: none;
       }
 
-      .c31 {
+      .c30 {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c32 {
+      .c31 {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c32 td,
-      .c32 th {
+      .c31 td,
+      .c31 th {
         padding: 16px;
       }
 
-      .c32 td:first-of-type,
-      .c32 th:first-of-type {
+      .c31 td:first-of-type,
+      .c31 th:first-of-type {
         padding: 0 4px;
       }
 
-      .c32 th {
+      .c31 th {
         padding-top: 0;
         padding-bottom: 0;
         height: 3.5rem;
       }
 
-      .c34 {
+      .c33 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -475,22 +475,22 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         flex-direction: row;
       }
 
-      .c33 {
+      .c32 {
         vertical-align: middle;
         text-align: left;
         color: #666687;
         outline-offset: -4px;
       }
 
-      .c33 input {
+      .c32 input {
         vertical-align: sub;
       }
 
-      .c36 svg {
+      .c35 svg {
         height: 0.25rem;
       }
 
-      .c35 {
+      .c34 {
         margin: 0;
         height: 18px;
         min-width: 18px;
@@ -501,12 +501,12 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         cursor: pointer;
       }
 
-      .c35:checked {
+      .c34:checked {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c35:checked:after {
+      .c34:checked:after {
         content: '';
         display: block;
         position: relative;
@@ -520,21 +520,21 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c35:checked:disabled:after {
+      .c34:checked:disabled:after {
         background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
       }
 
-      .c35:disabled {
+      .c34:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c35:indeterminate {
+      .c34:indeterminate {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c35:indeterminate:after {
+      .c34:indeterminate:after {
         content: '';
         display: block;
         position: relative;
@@ -549,27 +549,15 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c35:indeterminate:disabled {
+      .c34:indeterminate:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c35:indeterminate:disabled:after {
+      .c34:indeterminate:disabled:after {
         background-color: #8e8ea9;
       }
 
-      .c20 {
-        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;
-      }
-
       .c18 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -668,7 +656,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         fill: #666687;
       }
 
-      .c38 {
+      .c37 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -686,30 +674,30 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         border: none;
       }
 
-      .c38 svg > g,
-      .c38 svg path {
+      .c37 svg > g,
+      .c37 svg path {
         fill: #8e8ea9;
       }
 
-      .c38:hover svg > g,
-      .c38:hover svg path {
+      .c37:hover svg > g,
+      .c37:hover svg path {
         fill: #666687;
       }
 
-      .c38:active svg > g,
-      .c38:active svg path {
+      .c37:active svg > g,
+      .c37:active svg path {
         fill: #a5a5ba;
       }
 
-      .c38[aria-disabled='true'] {
+      .c37[aria-disabled='true'] {
         background-color: #eaeaef;
       }
 
-      .c38[aria-disabled='true'] svg path {
+      .c37[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c40 {
+      .c39 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -721,7 +709,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         width: 1px;
       }
 
-      .c53 {
+      .c52 {
         position: absolute;
         left: 0;
         right: 0;
@@ -732,24 +720,24 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         border: none;
       }
 
-      .c53:focus {
+      .c52:focus {
         outline: none;
       }
 
-      .c53[aria-disabled='true'] {
+      .c52[aria-disabled='true'] {
         cursor: not-allowed;
       }
 
-      .c56 {
+      .c55 {
         padding-right: 16px;
         padding-left: 16px;
       }
 
-      .c58 {
+      .c57 {
         padding-left: 12px;
       }
 
-      .c49 {
+      .c48 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -763,7 +751,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         flex-direction: column;
       }
 
-      .c51 {
+      .c50 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -777,7 +765,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         flex-direction: row;
       }
 
-      .c54 {
+      .c53 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -795,7 +783,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         justify-content: space-between;
       }
 
-      .c57 {
+      .c56 {
         color: #32324d;
         display: block;
         white-space: nowrap;
@@ -805,12 +793,12 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         line-height: 1.43;
       }
 
-      .c50 > * {
+      .c49 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c52 {
+      .c51 {
         position: relative;
         border: 1px solid #dcdce4;
         padding-right: 12px;
@@ -826,28 +814,28 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         transition-duration: 0.2s;
       }
 
-      .c52:focus-within {
+      .c51:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c59 {
+      .c58 {
         background: transparent;
         border: none;
         position: relative;
         z-index: 1;
       }
 
-      .c59 svg {
+      .c58 svg {
         height: 0.6875rem;
         width: 0.6875rem;
       }
 
-      .c59 svg path {
+      .c58 svg path {
         fill: #666687;
       }
 
-      .c60 {
+      .c59 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -856,23 +844,23 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         border: none;
       }
 
-      .c60 svg {
+      .c59 svg {
         width: 0.375rem;
       }
 
-      .c55 {
+      .c54 {
         width: 100%;
       }
 
-      .c21 {
+      .c20 {
         color: #32324d;
       }
 
-      .c22 path {
+      .c21 path {
         fill: #32324d;
       }
 
-      .c63 {
+      .c62 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -886,11 +874,11 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         flex-direction: row;
       }
 
-      .c64 > * + * {
+      .c63 > * + * {
         margin-left: 4px;
       }
 
-      .c67 {
+      .c66 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -902,7 +890,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         width: 1px;
       }
 
-      .c65 {
+      .c64 {
         padding: 12px;
         border-radius: 4px;
         -webkit-text-decoration: none;
@@ -915,7 +903,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         outline: none;
       }
 
-      .c65:after {
+      .c64:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -930,11 +918,11 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         border: 2px solid transparent;
       }
 
-      .c65:focus-visible {
+      .c64:focus-visible {
         outline: none;
       }
 
-      .c65:focus-visible:after {
+      .c64:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -945,34 +933,34 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c66 {
+      .c65 {
         font-size: 0.7rem;
         pointer-events: none;
       }
 
-      .c66 svg path {
+      .c65 svg path {
         fill: #c0c0cf;
       }
 
-      .c66:focus svg path,
-      .c66:hover svg path {
+      .c65:focus svg path,
+      .c65:hover svg path {
         fill: #c0c0cf;
       }
 
-      .c68 {
+      .c67 {
         font-size: 0.7rem;
       }
 
-      .c68 svg path {
+      .c67 svg path {
         fill: #666687;
       }
 
-      .c68:focus svg path,
-      .c68:hover svg path {
+      .c67:focus svg path,
+      .c67:hover svg path {
         fill: #4a4a6a;
       }
 
-      .c39 {
+      .c38 {
         -webkit-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         transform: rotate(0deg);
@@ -1175,16 +1163,9 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                     tabindex="0"
                     type="button"
                   >
-                    <span
-                      class="c20"
-                    >
-                      Search
-                    </span>
                     <svg
-                      aria-hidden="true"
-                      class="c21 c22"
+                      class="c20 c21"
                       fill="none"
-                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -1200,11 +1181,11 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                   </button>
                 </span>
                 <div
-                  class="c23"
+                  class="c22"
                 >
                   <button
                     aria-disabled="false"
-                    class="c5 c24"
+                    class="c5 c23"
                     type="button"
                   >
                     <div
@@ -1241,60 +1222,56 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
           class="c13"
         >
           <div
-            class="c25 c26"
+            class="c24 c25"
           >
             <div
-              class="c27"
+              class="c26"
             >
               <div
-                class="c28 c29"
+                class="c27 c28"
               >
                 <table
                   aria-colcount="8"
                   aria-rowcount="1"
-                  class="c30"
+                  class="c29"
                 >
                   <thead
-                    class="c31"
+                    class="c30"
                   >
                     <tr
                       aria-rowindex="1"
-                      class="c32"
+                      class="c31"
                     >
                       <th
                         aria-colindex="1"
-                        class="c33"
+                        class="c32"
                       >
                         <div
-                          class="c34"
+                          class="c33"
                         >
-                          <div
-                            class=""
-                          >
-                            <input
-                              aria-label="Select all entries"
-                              class="c35"
-                              tabindex="0"
-                              type="checkbox"
-                            />
-                          </div>
+                          <input
+                            aria-label="Select all entries"
+                            class="c34"
+                            tabindex="0"
+                            type="checkbox"
+                          />
                           <span
-                            class="c36"
+                            class="c35"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="2"
-                        class="c33"
+                        class="c32"
                         tabindex="-1"
                       >
                         <div
-                          class="c34"
+                          class="c33"
                         >
                           <span>
                             <span
                               aria-labelledby="tooltip-1"
-                              class="c37"
+                              class="c36"
                               label="Firstname"
                               tabindex="-1"
                             >
@@ -1302,26 +1279,19 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c36"
+                            class="c35"
                           >
                             <span>
                               <button
                                 aria-disabled="false"
                                 aria-labelledby="tooltip-3"
-                                class="c18 c38"
+                                class="c18 c37"
                                 tabindex="-1"
                                 type="button"
                               >
-                                <span
-                                  class="c20"
-                                >
-                                  Sort on Firstname
-                                </span>
                                 <svg
-                                  aria-hidden="true"
-                                  class="c39"
+                                  class="c38"
                                   fill="none"
-                                  focusable="false"
                                   height="1em"
                                   viewBox="0 0 14 8"
                                   width="1em"
@@ -1341,15 +1311,15 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                       </th>
                       <th
                         aria-colindex="3"
-                        class="c33"
+                        class="c32"
                       >
                         <div
-                          class="c34"
+                          class="c33"
                         >
                           <span>
                             <button
                               aria-labelledby="tooltip-3"
-                              class="c37"
+                              class="c36"
                               label="Lastname"
                               tabindex="-1"
                             >
@@ -1357,21 +1327,21 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                             </button>
                           </span>
                           <span
-                            class="c36"
+                            class="c35"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="4"
-                        class="c33"
+                        class="c32"
                       >
                         <div
-                          class="c34"
+                          class="c33"
                         >
                           <span>
                             <button
                               aria-labelledby="tooltip-5"
-                              class="c37"
+                              class="c36"
                               label="Email"
                               tabindex="-1"
                             >
@@ -1379,21 +1349,21 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                             </button>
                           </span>
                           <span
-                            class="c36"
+                            class="c35"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="5"
-                        class="c33"
+                        class="c32"
                       >
                         <div
-                          class="c34"
+                          class="c33"
                         >
                           <span>
                             <span
                               aria-labelledby="tooltip-7"
-                              class="c37"
+                              class="c36"
                               label="Roles"
                               tabindex="-1"
                             >
@@ -1401,21 +1371,21 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c36"
+                            class="c35"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="6"
-                        class="c33"
+                        class="c32"
                       >
                         <div
-                          class="c34"
+                          class="c33"
                         >
                           <span>
                             <button
                               aria-labelledby="tooltip-9"
-                              class="c37"
+                              class="c36"
                               label="Username"
                               tabindex="-1"
                             >
@@ -1423,21 +1393,21 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                             </button>
                           </span>
                           <span
-                            class="c36"
+                            class="c35"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="7"
-                        class="c33"
+                        class="c32"
                       >
                         <div
-                          class="c34"
+                          class="c33"
                         >
                           <span>
                             <span
                               aria-labelledby="tooltip-11"
-                              class="c37"
+                              class="c36"
                               label="User status"
                               tabindex="-1"
                             >
@@ -1445,61 +1415,61 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c36"
+                            class="c35"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="8"
-                        class="c33"
+                        class="c32"
                         tabindex="-1"
                       >
                         <div
-                          class="c34"
+                          class="c33"
                         >
                           <div
-                            class="c40"
+                            class="c39"
                           >
                             Actions
                           </div>
                           <span
-                            class="c36"
+                            class="c35"
                           />
                         </div>
                       </th>
                     </tr>
                   </thead>
                   <tbody
-                    class="c41"
+                    class="c40"
                   >
                     <tr
                       aria-rowindex="2"
-                      class="c32"
+                      class="c31"
                     >
                       <td
                         aria-colindex="1"
-                        class="c33"
+                        class="c32"
                         colspan="8"
                         tabindex="-1"
                       >
                         <div
-                          class="c42"
+                          class="c41"
                         >
                           <div
-                            class="c43"
+                            class="c42"
                           >
                             <div
                               aria-live="assertive"
                               role="alert"
                             >
                               <div
-                                class="c44"
+                                class="c43"
                               >
                                 Loading content...
                               </div>
                               <img
                                 aria-hidden="true"
-                                class="c45"
+                                class="c44"
                                 src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2MyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQyLjU1NjMgMTEuOTgxNkMzOS40ODQgMTAuMzA3MSAzNS44NTc1IDkuMjkwOTcgMzIuMzM1NCA5LjEzNTIxQzI4LjY0NDMgOC45Mjg4OCAyNC44Mjk1IDkuNzIzMTggMjEuMzMzNiAxMS40MTI5QzIwLjkxMjMgMTEuNTkwMSAyMC41Mzc2IDExLjgxMDEgMjAuMTcyMiAxMi4wMjQ5TDIwLjAxMDggMTIuMTE3OUMxOS44Nzc0IDEyLjE5NTEgMTkuNzQ0MSAxMi4yNzI0IDE5LjYwOCAxMi4zNTM2QzE5LjMyNTMgMTIuNTE0NiAxOS4wNDkyIDEyLjY3NDQgMTguNzU0NCAxMi44NzkyQzE4LjU0NjMgMTMuMDMyOSAxOC4zMzk1IDEzLjE3NTkgMTguMTMwMSAxMy4zMjNDMTcuNTY1OCAxMy43MjA4IDE2Ljk4NjggMTQuMTMxNyAxNi40OTgzIDE0LjU5NzlDMTQuODQ3NiAxNS45NTI0IDEzLjU1NzEgMTcuNjA3NSAxMi42MDcxIDE4LjkyMTRDMTAuNDM2NSAyMi4xNTY2IDkuMDg2MjIgMjUuOTU2NyA4LjgwNzAyIDI5LjYxNDNMOC43NzY0IDMwLjE1ODhDOC43MzMyOCAzMC45MTk2IDguNjg0NzYgMzEuNzA1NyA4Ljc1MzUzIDMyLjQ1NTVDOC43NjY0OCAzMi42MDg0IDguNzY2MSAzMi43NjM4IDguNzc1MDYgMzIuOTE0QzguNzg4OTUgMzMuMjI5IDguODAxNTIgMzMuNTM3MyA4Ljg0NiAzMy44NjcyTDkuMDczOTYgMzUuNDIyMUM5LjA5NzU2IDM1LjU3NjQgOS4xMTk4IDM1Ljc0MTMgOS4xNjMzIDM1LjkyNjNMOS42NTkxOSAzNy45MjcyTDEwLjEzOCAzOS4yODIzQzEwLjI3MjkgMzkuNjY3MyAxMC40MTU4IDQwLjA3NTEgMTAuNiA0MC40M0MxMi4wMjkyIDQzLjYzNyAxNC4xNDI1IDQ2LjQ1NzggMTYuNzA2MyA0OC41ODVDMTkuMDUwOCA1MC41Mjk2IDIxLjgyNCA1Mi4wMDIzIDI0Ljc0OTEgNTIuODQ1MkwyNi4yMzcxIDUzLjIzNzZDMjYuMzc4MSA1My4yNjkzIDI2LjQ5MjYgNTMuMjg4OSAyNi42MDMxIDUzLjMwNThMMjYuNzc3NSA1My4zMzExQzI3LjAwNTIgNTMuMzYzNiAyNy4yMTk1IDUzLjM5ODYgMjcuNDQ0NSA1My40MzVDMjcuODU5OCA1My41MDc2IDI4LjI2NzIgNTMuNTc0OCAyOC43MDc5IDUzLjYxODNMMzAuNTY0MSA1My43MjI5QzMwLjk1MTYgNTMuNzI0OSAzMS4zMzUyIDUzLjcwNjggMzEuNzA4MSA1My42ODc0QzMxLjkwMzkgNTMuNjgxIDMyLjA5ODQgNTMuNjY4MSAzMi4zMjg4IDUzLjY2MkMzNC41MjUzIDUzLjQ3NzIgMzYuNTEwNiA1My4wNjM0IDM4LjA1MTYgNTIuNDY1MkMzOC4xNzY5IDUyLjQxNzEgMzguMzAwOCA1Mi4zNzk2IDM4LjQyMzQgNTIuMzM1NUMzOC42NzI3IDUyLjI0OTkgMzguOTI1OSA1Mi4xNjcgMzkuMTQzMiA1Mi4wNTk5TDQwLjg1OTEgNTEuMjYyNkw0Mi41NzAyIDUwLjI2NkM0Mi45MDA5IDUwLjA2ODIgNDMuMDIwNSA0OS42NDE0IDQyLjgyODIgNDkuMjk4NEM0Mi42MzIgNDguOTUyNiA0Mi4yMDM0IDQ4LjgzMDggNDEuODYzNCA0OS4wMTY2TDQwLjE3OTIgNDkuOTIxOEwzOC40OTk1IDUwLjYyMjRDMzguMzE2OSA1MC42OTUzIDM4LjEyMSA1MC43NTM0IDM3LjkyMjQgNTAuODE1NUMzNy43ODM4IDUwLjg0ODkgMzcuNjUxOCA1MC44OTgzIDM3LjUwMTIgNTAuOTQwOEMzNi4wNzExIDUxLjQzNSAzNC4yNDQ1IDUxLjc0MjUgMzIuMjQ0IDUxLjgzNDZDMzIuMDQ0MiA1MS44MzgzIDMxLjg0NzEgNTEuODM3OSAzMS42NTQgNTEuODQwM0MzMS4zMDUxIDUxLjg0MTQgMzAuOTYwMiA1MS44NDUxIDMwLjYzOTIgNTEuODMwNUwyOC45MTc3IDUxLjY3MjVDMjguNTQ3NiA1MS42MTkgMjguMTY5NSA1MS41NDI3IDI3Ljc4NDggNTEuNDY3OEMyNy41NjM5IDUxLjQxNjcgMjcuMzM3NiA1MS4zNzM3IDI3LjEyOTkgNTEuMzM3NEwyNi45NTI5IDUxLjI5ODdDMjYuODcwNCA1MS4yODM0IDI2Ljc3NzIgNTEuMjY2NyAyNi43MzMzIDUxLjI1NDNMMjUuMzQ2NiA1MC44MzIyQzIyLjc2NTEgNDkuOTc4OSAyMC4zMyA0OC41NzI5IDE4LjI5NDIgNDYuNzU1N0MxNi4xMDU2IDQ0Ljc5NTEgMTQuMzMzOSA0Mi4yMzM1IDEzLjE3NDIgMzkuMzU4MkMxMi4wMjc2IDM2LjYwMTMgMTEuNTk4OCAzMy4yNzkyIDExLjk3MTYgMzAuMDA3NkMxMi4zMTQ1IDI3LjAyMTMgMTMuMzk0OCAyNC4xNjM1IDE1LjE4NTggMjEuNTA4M0MxNS4zMDM0IDIxLjMzMzkgMTUuNDIxIDIxLjE1OTYgMTUuNTIxMiAyMS4wMTk2QzE2LjQzMDkgMTkuODY4OCAxNy41NDA4IDE4LjU1ODkgMTguOTQ4MyAxNy40OTZDMTkuMzM2NyAxNy4xNTI1IDE5Ljc4NjIgMTYuODU2IDIwLjI2MTEgMTYuNTQ3OEMyMC40ODc4IDE2LjQwMDkgMjAuNzA3OSAxNi4yNTUzIDIwLjg5MDcgMTYuMTMwNkMyMS4wOTc0IDE2LjAwNDggMjEuMzE4OCAxNS44ODMxIDIxLjUzNDggMTUuNzY5NEMyMS42NzYxIDE1LjY5NzUgMjEuODE2MiAxNS42MTkgMjEuOTM4OCAxNS41NTc2TDIyLjEwMDIgMTUuNDY0NkMyMi40MDAyIDE1LjMwMzcgMjIuNjc0OSAxNS4xNTQ2IDIyLjk5MDggMTUuMDM5TDI0LjExODYgMTQuNTcxNUMyNC4zMzk5IDE0LjQ4NDQgMjQuNTcxOCAxNC40MTU5IDI0Ljc5OTcgMTQuMzQ0N0MyNC45NTMgMTQuMjk4MiAyNS4wOTgyIDE0LjI2MzUgMjUuMjYzNSAxNC4yMDc4QzI1Ljc4NiAxNC4wMTgyIDI2LjMyODMgMTMuOTExMiAyNi45MTA1IDEzLjc5NjVDMjcuMTE3IDEzLjc1NzEgMjcuMzMwMiAxMy43MTYzIDI3LjU2MDggMTMuNjU4NUMyNy43NTUzIDEzLjYxMSAyNy45NzM3IDEzLjU5NjkgMjguMjA4MiAxMy41NzYyQzI4LjM2NCAxMy41NjAzIDI4LjUxNzIgMTMuNTQ4MyAyOC42MzE4IDEzLjUzMzNDMjguNzg3NiAxMy41MTczIDI4LjkzNDIgMTMuNTA2NiAyOS4wOTI3IDEzLjQ4NjdDMjkuMzI4NSAxMy40NTU1IDI5LjU0NTYgMTMuNDM0NyAyOS43NDk0IDEzLjQzMzdDMzAuMDIzNyAxMy40NCAzMC4yOTk0IDEzLjQzNTcgMzAuNTc3NyAxMy40Mjc0QzMxLjA4MTEgMTMuNDIxIDMxLjU1NzkgMTMuNDE5NyAzMi4wMzE4IDEzLjQ5MTRDMzQuOTY2NCAxMy43MzUyIDM3LjcxNDQgMTQuNjA4NSA0MC4yMDUyIDE2LjA4NjhDNDIuMzQ4OSAxNy4zNjU1IDQ0LjI3MTYgMTkuMTUyNSA0NS43NjA3IDIxLjI2NEM0Ny4wMjU1IDIzLjA2MjggNDcuOTc1NiAyNS4wNTI4IDQ4LjQ5MjggMjcuMDM5M0M0OC41NzIgMjcuMzE3NiA0OC42Mjk5IDI3LjU5MzEgNDguNjgzOSAyNy44NjU5QzQ4LjcxNTQgMjguMDQyOCA0OC43NTYzIDI4LjIxNDUgNDguNzg5MiAyOC4zNjM2QzQ4LjgwMzcgMjguNDU0MSA0OC44MjA4IDI4LjU0MDYgNDguODQ0NSAyOC42MjU4QzQ4Ljg3NDkgMjguNzQ0MyA0OC44OTg2IDI4Ljg2NCA0OC45MTE2IDI4Ljk2NTFMNDguOTc5MyAyOS42MDQ3QzQ4Ljk5MjIgMjkuNzc0OCA0OS4wMTMyIDI5LjkzMzEgNDkuMDMwMSAzMC4wODg3QzQ5LjA2NjggMzAuMzI2OCA0OS4wODg5IDMwLjU2MDggNDkuMDk2NCAzMC43NTYxTDQ5LjEwODMgMzEuOTAwMUM0OS4xMzEyIDMyLjMzMDcgNDkuMDg5IDMyLjcxMTYgNDkuMDUyMiAzMy4wNjczQzQ5LjAzODQgMzMuMjU5OCA0OS4wMTI2IDMzLjQ0NDMgNDkuMDEyMyAzMy41ODI0QzQ4Ljk5NjEgMzMuNjkyNiA0OC45OTE4IDMzLjc5MzUgNDguOTgzNiAzMy44OTE3QzQ4Ljk3NTMgMzQuMDA3MiA0OC45NzI0IDM0LjExNDggNDguOTQxNCAzNC4yNTU0TDQ4LjU0NDkgMzYuMzA1OUM0OC4zMTM0IDM3Ljg2MjMgNDkuMzc5MyAzOS4zMzY1IDUwLjk0ODggMzkuNTgyMkM1Mi4wNDE3IDM5Ljc2MDEgNTMuMTUzNiAzOS4yODE5IDUzLjc3MTEgMzguMzY2NEM1NC4wMDYzIDM4LjAxNzYgNTQuMTYwNCAzNy42MjU3IDU0LjIyMjcgMzcuMjA2NEw1NC41MjE3IDM1LjI1NzRDNTQuNTUxNCAzNS4wNzU2IDU0LjU3MiAzNC44MyA1NC41ODQ2IDM0LjU3OTFMNTQuNjAyOCAzNC4yMzM4QzU0LjYwOTggMzQuMDU5OCA1NC42MjIzIDMzLjg3NzkgNTQuNjM0NyAzMy42Nzg4QzU0LjY3MzQgMzMuMTA1MiA1NC43MTYzIDMyLjQ0NzkgNTQuNjYxOSAzMS44MDU4TDU0LjU4NjcgMzAuNDI4OUM1NC41NjIyIDMwLjA5NTIgNTQuNTA5NyAyOS43NiA1NC40NTU5IDI5LjQxODFDNTQuNDMxIDI5LjI1NzIgNTQuNDA0OCAyOS4wODk2IDU0LjM4MjYgMjguOTA3NEw1NC4yNjg3IDI4LjEwNEM1NC4yMzMyIDI3LjkyNDQgNTQuMTgwNCAyNy43MjczIDU0LjEzMjkgMjcuNTM5Nkw1NC4wNjQzIDI3LjI0NTRDNTQuMDE5NSAyNy4wNzEgNTMuOTc3MyAyNi44OTI3IDUzLjkzMzggMjYuNzA3NkM1My44NDU1IDI2LjMzMDkgNTMuNzQ3OSAyNS45NDIyIDUzLjYxMyAyNS41NTcxQzUyLjg0IDIzLjAyOTIgNTEuNTM4MyAyMC41MTk0IDQ5LjgzMzggMTguMjc5OUM0Ny44NTQ0IDE1LjY4MiA0NS4zMzMzIDEzLjUwODcgNDIuNTU2MyAxMS45ODE2WiIgZmlsbD0iIzQ5NDVGRiIvPgo8L3N2Zz4K"
                               />
                             </div>
@@ -1513,20 +1483,20 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
             </div>
           </div>
           <div
-            class="c46"
+            class="c45"
           >
             <div
-              class="c47"
+              class="c46"
             >
               <div
-                class="c48"
+                class="c47"
               >
                 <div>
                   <div
-                    class="c49 c50"
+                    class="c48 c49"
                   >
                     <div
-                      class="c51 c52"
+                      class="c50 c51"
                     >
                       <button
                         aria-disabled="false"
@@ -1534,21 +1504,21 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                         aria-haspopup="listbox"
                         aria-label="Entries per page"
                         aria-labelledby="select-1-label select-1-content"
-                        class="c53"
+                        class="c52"
                         id="select-1"
                         type="button"
                       />
                       <div
-                        class="c54 c55"
+                        class="c53 c54"
                       >
                         <div
-                          class="c51"
+                          class="c50"
                         >
                           <div
-                            class="c56"
+                            class="c55"
                           >
                             <span
-                              class="c57"
+                              class="c56"
                               id="select-1-content"
                             >
                               10
@@ -1556,11 +1526,11 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                           </div>
                         </div>
                         <div
-                          class="c51"
+                          class="c50"
                         >
                           <button
                             aria-hidden="true"
-                            class="c58 c59 c60"
+                            class="c57 c58 c59"
                             tabindex="-1"
                             type="button"
                           >
@@ -1585,10 +1555,10 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                   </div>
                 </div>
                 <div
-                  class="c61"
+                  class="c60"
                 >
                   <label
-                    class="c62"
+                    class="c61"
                     for="page-size"
                   >
                     Entries per page
@@ -1597,21 +1567,21 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
               </div>
               <nav
                 aria-label="pagination"
-                class="sc-cfJLRR"
+                class="sc-haTkiu"
               >
                 <ul
-                  class="c63 c64"
+                  class="c62 c63"
                 >
                   <li>
                     <a
                       aria-current="page"
                       aria-disabled="true"
-                      class="c65 c66 active"
+                      class="c64 c65 active"
                       href="/settings/user"
                       tabindex="-1"
                     >
                       <div
-                        class="c67"
+                        class="c66"
                       >
                         Go to previous page
                       </div>
@@ -1634,11 +1604,11 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                     <a
                       aria-current="page"
                       aria-disabled="false"
-                      class="c65 c68 active"
+                      class="c64 c67 active"
                       href="/settings/user?pageSize=10&page=1&sort=firstname"
                     >
                       <div
-                        class="c67"
+                        class="c66"
                       >
                         Go to next page
                       </div>
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 ca8c8d05184..4ce084b9289 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
@@ -130,20 +130,20 @@ describe('Admin | containers | ListView', () => {
         width: 60%;
       }
 
-      .c47 {
+      .c46 {
         background: #eaeaef;
       }
 
-      .c49 {
+      .c48 {
         background: #f0f0ff;
         padding: 20px;
       }
 
-      .c51 {
+      .c50 {
         background: #d9d8ff;
       }
 
-      .c53 {
+      .c52 {
         padding-left: 12px;
       }
 
@@ -243,20 +243,20 @@ describe('Admin | containers | ListView', () => {
         height: 0.25rem;
       }
 
-      .c48 {
+      .c47 {
         height: 1px;
         border: none;
         margin: 0;
       }
 
-      .c54 {
+      .c53 {
         font-weight: 600;
         color: #4945ff;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c52 {
+      .c51 {
         height: 1.5rem;
         width: 1.5rem;
         border-radius: 50%;
@@ -274,16 +274,16 @@ describe('Admin | containers | ListView', () => {
         align-items: center;
       }
 
-      .c52 svg {
+      .c51 svg {
         height: 0.625rem;
         width: 0.625rem;
       }
 
-      .c52 svg path {
+      .c51 svg path {
         fill: #4945ff;
       }
 
-      .c50 {
+      .c49 {
         border-radius: 0 0 4px 4px;
         display: block;
         width: 100%;
@@ -358,18 +358,6 @@ describe('Admin | containers | ListView', () => {
         background-color: #8e8ea9;
       }
 
-      .c45 {
-        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;
-      }
-
       .c43 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -697,7 +685,7 @@ describe('Admin | containers | ListView', () => {
         padding-left: 8px;
       }
 
-      .c46 {
+      .c45 {
         color: #d02b20;
         padding-left: 8px;
       }
@@ -869,16 +857,12 @@ describe('Admin | containers | ListView', () => {
                             <div
                               class="c25"
                             >
-                              <div
-                                class=""
-                              >
-                                <input
-                                  aria-label="Select all entries"
-                                  class="c26"
-                                  tabindex="0"
-                                  type="checkbox"
-                                />
-                              </div>
+                              <input
+                                aria-label="Select all entries"
+                                class="c26"
+                                tabindex="0"
+                                type="checkbox"
+                              />
                               <span
                                 class="c27"
                               />
@@ -975,18 +959,14 @@ describe('Admin | containers | ListView', () => {
                             class="c24"
                             role="button"
                           >
-                            <div
-                              class=""
-                            >
-                              <input
-                                aria-label="Select test"
-                                class="c26"
-                                id="select"
-                                name="select"
-                                tabindex="-1"
-                                type="checkbox"
-                              />
-                            </div>
+                            <input
+                              aria-label="Select test"
+                              class="c26"
+                              id="select"
+                              name="select"
+                              tabindex="-1"
+                              type="checkbox"
+                            />
                           </td>
                           <td
                             aria-colindex="2"
@@ -1068,15 +1048,8 @@ describe('Admin | containers | ListView', () => {
                                   tabindex="-1"
                                   type="button"
                                 >
-                                  <span
-                                    class="c45"
-                                  >
-                                    Update
-                                  </span>
                                   <svg
-                                    aria-hidden="true"
                                     fill="none"
-                                    focusable="false"
                                     height="1em"
                                     viewBox="0 0 24 24"
                                     width="1em"
@@ -1100,15 +1073,8 @@ describe('Admin | containers | ListView', () => {
                                   tabindex="-1"
                                   type="button"
                                 >
-                                  <span
-                                    class="c45"
-                                  >
-                                    Delete
-                                  </span>
                                   <svg
-                                    aria-hidden="true"
                                     fill="none"
-                                    focusable="false"
                                     height="1em"
                                     viewBox="0 0 24 24"
                                     width="1em"
@@ -1135,18 +1101,14 @@ describe('Admin | containers | ListView', () => {
                             class="c24"
                             role="button"
                           >
-                            <div
-                              class=""
-                            >
-                              <input
-                                aria-label="Select test2"
-                                class="c26"
-                                id="select"
-                                name="select"
-                                tabindex="-1"
-                                type="checkbox"
-                              />
-                            </div>
+                            <input
+                              aria-label="Select test2"
+                              class="c26"
+                              id="select"
+                              name="select"
+                              tabindex="-1"
+                              type="checkbox"
+                            />
                           </td>
                           <td
                             aria-colindex="2"
@@ -1202,7 +1164,7 @@ describe('Admin | containers | ListView', () => {
                                   </div>
                                   <span
                                     aria-hidden="true"
-                                    class="c46"
+                                    class="c45"
                                   >
                                     Disabled
                                   </span>
@@ -1228,15 +1190,8 @@ describe('Admin | containers | ListView', () => {
                                   tabindex="-1"
                                   type="button"
                                 >
-                                  <span
-                                    class="c45"
-                                  >
-                                    Update
-                                  </span>
                                   <svg
-                                    aria-hidden="true"
                                     fill="none"
-                                    focusable="false"
                                     height="1em"
                                     viewBox="0 0 24 24"
                                     width="1em"
@@ -1260,15 +1215,8 @@ describe('Admin | containers | ListView', () => {
                                   tabindex="-1"
                                   type="button"
                                 >
-                                  <span
-                                    class="c45"
-                                  >
-                                    Delete
-                                  </span>
                                   <svg
-                                    aria-hidden="true"
                                     fill="none"
-                                    focusable="false"
                                     height="1em"
                                     viewBox="0 0 24 24"
                                     width="1em"
@@ -1290,17 +1238,17 @@ describe('Admin | containers | ListView', () => {
                 </div>
                 <div>
                   <hr
-                    class="c47 c48"
+                    class="c46 c47"
                   />
                   <button
-                    class="c49 c50"
+                    class="c48 c49"
                   >
                     <div
                       class="c25"
                     >
                       <div
                         aria-hidden="true"
-                        class="c51 c52"
+                        class="c50 c51"
                       >
                         <svg
                           fill="none"
@@ -1316,10 +1264,10 @@ describe('Admin | containers | ListView', () => {
                         </svg>
                       </div>
                       <div
-                        class="c53"
+                        class="c52"
                       >
                         <span
-                          class="c54"
+                          class="c53"
                         >
                           Create new webhook
                         </span>
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 9010df3a616..031396fe3ba 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,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
-.c46 {
+.c45 {
   padding-bottom: 56px;
 }
 
@@ -10,11 +10,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   grid-template-columns: auto 1fr;
 }
 
-.c47 {
+.c46 {
   overflow-x: hidden;
 }
 
-.c48 {
+.c47 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -26,7 +26,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c33 {
+.c32 {
   padding-left: 32px;
 }
 
@@ -37,40 +37,40 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   padding-left: 24px;
 }
 
-.c9 {
+.c8 {
   padding-top: 16px;
 }
 
-.c10 {
+.c9 {
   background: #eaeaef;
 }
 
-.c13 {
+.c12 {
   padding-top: 8px;
   padding-bottom: 16px;
 }
 
-.c17 {
+.c16 {
   padding-top: 8px;
   padding-right: 16px;
   padding-bottom: 8px;
   padding-left: 24px;
 }
 
-.c19 {
+.c18 {
   padding-right: 24px;
   position: relative;
 }
 
-.c20 {
+.c19 {
   text-align: left;
 }
 
-.c23 {
+.c22 {
   padding-right: 4px;
 }
 
-.c26 {
+.c25 {
   background: #eaeaef;
   padding: 4px;
   border-radius: 4px;
@@ -83,25 +83,25 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   transform: translateY(-50%);
 }
 
-.c28 {
+.c27 {
   background: #f6f6f9;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 32px;
 }
 
-.c31 {
+.c30 {
   padding-left: 8px;
 }
 
-.c39 {
+.c38 {
   padding-top: 8px;
   padding-right: 16px;
   padding-bottom: 8px;
   padding-left: 32px;
 }
 
-.c45 {
+.c44 {
   background: #f6f6f9;
   padding-top: 8px;
   padding-bottom: 8px;
@@ -138,7 +138,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c14 {
+.c13 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -152,7 +152,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c21 {
+.c20 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -166,7 +166,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c27 {
+.c26 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -184,7 +184,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   justify-content: center;
 }
 
-.c41 {
+.c40 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -209,7 +209,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   line-height: 1.22;
 }
 
-.c24 {
+.c23 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -217,31 +217,19 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   text-transform: uppercase;
 }
 
-.c32 {
+.c31 {
   color: #32324d;
   font-size: 0.875rem;
   line-height: 1.43;
 }
 
-.c44 {
+.c43 {
   font-weight: 500;
   color: #32324d;
   font-size: 0.875rem;
   line-height: 1.43;
 }
 
-.c8 {
-  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;
-}
-
 .c6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -340,18 +328,18 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   fill: #666687;
 }
 
-.c11 {
+.c10 {
   height: 1px;
   border: none;
   margin: 0;
 }
 
-.c12 {
+.c11 {
   width: 1.5rem;
   background-color: #dcdce4;
 }
 
-.c29 {
+.c28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -369,46 +357,46 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c29 svg > * {
+.c28 svg > * {
   fill: #666687;
 }
 
-.c29.active {
+.c28.active {
   background-color: #f0f0ff;
   border-right: 2px solid #4945ff;
 }
 
-.c29.active svg > * {
+.c28.active svg > * {
   fill: #271fe0;
 }
 
-.c29.active .c4 {
+.c28.active .c4 {
   color: #271fe0;
   font-weight: 500;
 }
 
-.c29:focus-visible {
+.c28:focus-visible {
   outline-offset: -2px;
 }
 
-.c30 {
+.c29 {
   width: 0.75rem;
   height: 0.25rem;
 }
 
-.c30 * {
+.c29 * {
   fill: #666687;
 }
 
-.c40 svg {
+.c39 svg {
   height: 0.25rem;
 }
 
-.c40 svg path {
+.c39 svg path {
   fill: #4a4a6a;
 }
 
-.c42 {
+.c41 {
   border: none;
   padding: 0;
   background: transparent;
@@ -422,7 +410,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c43 {
+.c42 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -437,31 +425,31 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   transform: rotateX(0deg);
 }
 
-.c15 > * {
+.c14 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c15 > * + * {
+.c14 > * + * {
   margin-top: 8px;
 }
 
-.c16 > * {
+.c15 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c16 > * + * {
+.c15 > * + * {
   margin-top: 4px;
 }
 
-.c22 {
+.c21 {
   border: none;
   padding: 0;
   background: transparent;
 }
 
-.c25 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -475,29 +463,29 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   transform: rotateX(0deg);
 }
 
-.c18 svg {
+.c17 svg {
   height: 0.25rem;
 }
 
-.c18 svg path {
+.c17 svg path {
   fill: #8e8ea9;
 }
 
-.c34 {
+.c33 {
   margin-top: 8px;
 }
 
-.c37 {
+.c36 {
   padding-right: 8px;
 }
 
-.c38 {
+.c37 {
   color: #4945ff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c35 {
+.c34 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -511,22 +499,22 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c36 {
+.c35 {
   background: transparent;
   border: none;
   position: relative;
   outline: none;
 }
 
-.c36[aria-disabled='true'] {
+.c35[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c36[aria-disabled='true'] svg path {
+.c35[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c36 svg {
+.c35 svg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -534,11 +522,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   font-size: 0.625rem;
 }
 
-.c36 svg path {
+.c35 svg path {
   fill: #4945ff;
 }
 
-.c36:after {
+.c35:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -553,11 +541,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c36:focus-visible {
+.c35:focus-visible {
   outline: none;
 }
 
-.c36:focus-visible:after {
+.c35:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -595,15 +583,8 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               tabindex="0"
               type="button"
             >
-              <span
-                class="c8"
-              >
-                Search
-              </span>
               <svg
-                aria-hidden="true"
                 fill="none"
-                focusable="false"
                 height="1em"
                 viewBox="0 0 24 24"
                 width="1em"
@@ -620,47 +601,47 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
           </span>
         </div>
         <div
-          class="c9"
+          class="c8"
         >
           <hr
-            class="c10 c11 c12"
+            class="c9 c10 c11"
           />
         </div>
       </div>
       <div
-        class="c13"
+        class="c12"
       >
         <ol
-          class="c14 c15"
+          class="c13 c14"
           spacing="2"
         >
           <li>
             <div
-              class="c14 c16"
+              class="c13 c15"
               spacing="1"
             >
               <div
-                class="c17 c18"
+                class="c16 c17"
               >
                 <div
-                  class="c19"
+                  class="c18"
                 >
                   <button
                     aria-controls="subnav-list-4"
                     aria-expanded="true"
-                    class="c20 c21 c22"
+                    class="c19 c20 c21"
                   >
                     <div
-                      class="c23"
+                      class="c22"
                     >
                       <span
-                        class="c4 c24"
+                        class="c4 c23"
                       >
                         Collection Types
                       </span>
                     </div>
                     <div
-                      class="c25"
+                      class="c24"
                     >
                       <svg
                         aria-hidden="true"
@@ -680,11 +661,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     </div>
                   </button>
                   <div
-                    class="c26 c27"
+                    class="c25 c26"
                     transform="translateY(-50%)"
                   >
                     <span
-                      class="c4 c24"
+                      class="c4 c23"
                     >
                       2
                     </span>
@@ -696,14 +677,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               >
                 <li>
                   <a
-                    class="c28 c29"
+                    class="c27 c28"
                     href="/plugins/content-type-builder/content-types/application::address.address"
                   >
                     <div
-                      class="c21"
+                      class="c20"
                     >
                       <svg
-                        class="c30"
+                        class="c29"
                         fill="none"
                         height="1em"
                         viewBox="0 0 4 4"
@@ -718,10 +699,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <div
-                        class="c31"
+                        class="c30"
                       >
                         <span
-                          class="c4 c32"
+                          class="c4 c31"
                         >
                           Address
                         </span>
@@ -731,14 +712,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                 </li>
                 <li>
                   <a
-                    class="c28 c29"
+                    class="c27 c28"
                     href="/plugins/content-type-builder/content-types/application::category.category"
                   >
                     <div
-                      class="c21"
+                      class="c20"
                     >
                       <svg
-                        class="c30"
+                        class="c29"
                         fill="none"
                         height="1em"
                         viewBox="0 0 4 4"
@@ -753,10 +734,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <div
-                        class="c31"
+                        class="c30"
                       >
                         <span
-                          class="c4 c32"
+                          class="c4 c31"
                         >
                           Category
                         </span>
@@ -767,16 +748,16 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               </ol>
             </div>
             <div
-              class="c33"
+              class="c32"
             >
               <button
                 aria-disabled="false"
-                class="c34 c35 c36"
+                class="c33 c34 c35"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="c37"
+                  class="c36"
                 >
                   <svg
                     fill="none"
@@ -792,7 +773,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="c38"
+                  class="c37"
                 >
                   Create new collection type
                 </span>
@@ -801,31 +782,31 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
           </li>
           <li>
             <div
-              class="c14 c16"
+              class="c13 c15"
               spacing="1"
             >
               <div
-                class="c17 c18"
+                class="c16 c17"
               >
                 <div
-                  class="c19"
+                  class="c18"
                 >
                   <button
                     aria-controls="subnav-list-5"
                     aria-expanded="true"
-                    class="c20 c21 c22"
+                    class="c19 c20 c21"
                   >
                     <div
-                      class="c23"
+                      class="c22"
                     >
                       <span
-                        class="c4 c24"
+                        class="c4 c23"
                       >
                         Single Types
                       </span>
                     </div>
                     <div
-                      class="c25"
+                      class="c24"
                     >
                       <svg
                         aria-hidden="true"
@@ -845,11 +826,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     </div>
                   </button>
                   <div
-                    class="c26 c27"
+                    class="c25 c26"
                     transform="translateY(-50%)"
                   >
                     <span
-                      class="c4 c24"
+                      class="c4 c23"
                     >
                       1
                     </span>
@@ -861,14 +842,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               >
                 <li>
                   <a
-                    class="c28 c29"
+                    class="c27 c28"
                     href="/plugins/content-type-builder/content-types/application::homepage.homepage"
                   >
                     <div
-                      class="c21"
+                      class="c20"
                     >
                       <svg
-                        class="c30"
+                        class="c29"
                         fill="none"
                         height="1em"
                         viewBox="0 0 4 4"
@@ -883,10 +864,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <div
-                        class="c31"
+                        class="c30"
                       >
                         <span
-                          class="c4 c32"
+                          class="c4 c31"
                         >
                           Homepage
                         </span>
@@ -897,16 +878,16 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               </ol>
             </div>
             <div
-              class="c33"
+              class="c32"
             >
               <button
                 aria-disabled="false"
-                class="c34 c35 c36"
+                class="c33 c34 c35"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="c37"
+                  class="c36"
                 >
                   <svg
                     fill="none"
@@ -922,7 +903,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="c38"
+                  class="c37"
                 >
                   Create new single type
                 </span>
@@ -931,31 +912,31 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
           </li>
           <li>
             <div
-              class="c14 c16"
+              class="c13 c15"
               spacing="1"
             >
               <div
-                class="c17 c18"
+                class="c16 c17"
               >
                 <div
-                  class="c19"
+                  class="c18"
                 >
                   <button
                     aria-controls="subnav-list-6"
                     aria-expanded="true"
-                    class="c20 c21 c22"
+                    class="c19 c20 c21"
                   >
                     <div
-                      class="c23"
+                      class="c22"
                     >
                       <span
-                        class="c4 c24"
+                        class="c4 c23"
                       >
                         Components
                       </span>
                     </div>
                     <div
-                      class="c25"
+                      class="c24"
                     >
                       <svg
                         aria-hidden="true"
@@ -975,11 +956,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     </div>
                   </button>
                   <div
-                    class="c26 c27"
+                    class="c25 c26"
                     transform="translateY(-50%)"
                   >
                     <span
-                      class="c4 c24"
+                      class="c4 c23"
                     >
                       2
                     </span>
@@ -994,18 +975,18 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <div
-                      class="c39 c40"
+                      class="c38 c39"
                     >
                       <div
-                        class="c41"
+                        class="c40"
                       >
                         <button
                           aria-controls="subnav-list-7"
                           aria-expanded="true"
-                          class="c42"
+                          class="c41"
                         >
                           <div
-                            class="c43"
+                            class="c42"
                           >
                             <svg
                               aria-hidden="true"
@@ -1024,10 +1005,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c31"
+                            class="c30"
                           >
                             <span
-                              class="c4 c44"
+                              class="c4 c43"
                             >
                               Basic
                             </span>
@@ -1040,14 +1021,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     >
                       <li>
                         <a
-                          class="c45 c29"
+                          class="c44 c28"
                           href="/plugins/content-type-builder/component-categories/basic/basic.simple"
                         >
                           <div
-                            class="c21"
+                            class="c20"
                           >
                             <svg
-                              class="c30"
+                              class="c29"
                               fill="none"
                               height="1em"
                               viewBox="0 0 4 4"
@@ -1062,10 +1043,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <div
-                              class="c31"
+                              class="c30"
                             >
                               <span
-                                class="c4 c32"
+                                class="c4 c31"
                               >
                                 Simple
                               </span>
@@ -1081,18 +1062,18 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <div
-                      class="c39 c40"
+                      class="c38 c39"
                     >
                       <div
-                        class="c41"
+                        class="c40"
                       >
                         <button
                           aria-controls="subnav-list-8"
                           aria-expanded="true"
-                          class="c42"
+                          class="c41"
                         >
                           <div
-                            class="c43"
+                            class="c42"
                           >
                             <svg
                               aria-hidden="true"
@@ -1111,10 +1092,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c31"
+                            class="c30"
                           >
                             <span
-                              class="c4 c44"
+                              class="c4 c43"
                             >
                               Default
                             </span>
@@ -1127,14 +1108,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     >
                       <li>
                         <a
-                          class="c45 c29"
+                          class="c44 c28"
                           href="/plugins/content-type-builder/component-categories/default/default.closingperiod"
                         >
                           <div
-                            class="c21"
+                            class="c20"
                           >
                             <svg
-                              class="c30"
+                              class="c29"
                               fill="none"
                               height="1em"
                               viewBox="0 0 4 4"
@@ -1149,10 +1130,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <div
-                              class="c31"
+                              class="c30"
                             >
                               <span
-                                class="c4 c32"
+                                class="c4 c31"
                               >
                                 Closingperiod
                               </span>
@@ -1162,14 +1143,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                       </li>
                       <li>
                         <a
-                          class="c45 c29"
+                          class="c44 c28"
                           href="/plugins/content-type-builder/component-categories/default/default.dish"
                         >
                           <div
-                            class="c21"
+                            class="c20"
                           >
                             <svg
-                              class="c30"
+                              class="c29"
                               fill="none"
                               height="1em"
                               viewBox="0 0 4 4"
@@ -1184,10 +1165,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <div
-                              class="c31"
+                              class="c30"
                             >
                               <span
-                                class="c4 c32"
+                                class="c4 c31"
                               >
                                 Dish
                               </span>
@@ -1201,16 +1182,16 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               </ol>
             </div>
             <div
-              class="c33"
+              class="c32"
             >
               <button
                 aria-disabled="false"
-                class="c34 c35 c36"
+                class="c33 c34 c35"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="c37"
+                  class="c36"
                 >
                   <svg
                     fill="none"
@@ -1226,7 +1207,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="c38"
+                  class="c37"
                 >
                   Create a new component
                 </span>
@@ -1237,13 +1218,13 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
       </div>
     </nav>
     <div
-      class="c46 c47"
+      class="c45 c46"
     >
       <div />
     </div>
   </div>
   <div
-    class="c48"
+    class="c47"
   >
     <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 377274661a8..b7167b95d7e 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
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ListView /> renders and matches the snapshot 1`] = `
-.c82 {
+.c81 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -31,7 +31,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   justify-content: flex-end;
 }
 
-.c47 {
+.c46 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -86,12 +86,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   margin-top: 16px;
 }
 
-.c56 > * {
+.c55 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c56 > * + * {
+.c55 > * + * {
   margin-top: 4px;
 }
 
@@ -143,21 +143,21 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c51 {
+.c50 {
   font-weight: 600;
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c59 {
+.c58 {
   font-weight: 600;
   color: #4945ff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c66 {
+.c65 {
   font-weight: 600;
   color: #32324d;
   display: block;
@@ -474,60 +474,60 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   padding-left: 24px;
 }
 
-.c42 {
+.c41 {
   padding-right: 0px;
   padding-left: 24px;
 }
 
-.c45 {
+.c44 {
   padding-top: 16px;
   padding-bottom: 16px;
 }
 
-.c48 {
+.c47 {
   background: #dcdce4;
 }
 
-.c50 {
+.c49 {
   padding-left: 12px;
 }
 
-.c53 {
+.c52 {
   padding-left: 40px;
 }
 
-.c60 {
+.c59 {
   padding-right: 16px;
   padding-left: 16px;
   border-radius: borderRadius;
 }
 
-.c65 {
+.c64 {
   max-width: calc(8.75rem - 32px);
 }
 
-.c71 {
+.c70 {
   background: #d9d8ff;
 }
 
-.c73 {
+.c72 {
   background: #eaeaef;
 }
 
-.c75 {
+.c74 {
   background: #f0f0ff;
   padding: 20px;
 }
 
-.c78 {
+.c77 {
   background: #d9d8ff;
 }
 
-.c80 {
+.c79 {
   padding-left: 12px;
 }
 
-.c77 {
+.c76 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -541,20 +541,20 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c74 {
+.c73 {
   height: 1px;
   border: none;
   margin: 0;
 }
 
-.c81 {
+.c80 {
   font-weight: 600;
   color: #4945ff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c79 {
+.c78 {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 50%;
@@ -572,34 +572,22 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c79 svg {
+.c78 svg {
   height: 0.625rem;
   width: 0.625rem;
 }
 
-.c79 svg path {
+.c78 svg path {
   fill: #4945ff;
 }
 
-.c76 {
+.c75 {
   border-radius: 0 0 4px 4px;
   display: block;
   width: 100%;
   border: none;
 }
 
-.c40 {
-  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;
-}
-
 .c38 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -835,7 +823,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   line-height: 1.5;
 }
 
-.c64 {
+.c63 {
   width: 2rem !important;
   height: 2rem !important;
   padding: 0.5625rem;
@@ -843,27 +831,27 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background: #eaeaef;
 }
 
-.c64 path {
+.c63 path {
   fill: #8e8ea9;
 }
 
-.c68 {
+.c67 {
   position: absolute;
   display: none;
   top: 5px;
   right: 0.5rem;
 }
 
-.c68 svg {
+.c67 svg {
   width: 0.625rem;
   height: 0.625rem;
 }
 
-.c68 svg path {
+.c67 svg path {
   fill: #4945ff;
 }
 
-.c61 {
+.c60 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -887,58 +875,58 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c61.active,
-.c61:hover {
+.c60.active,
+.c60:hover {
   border: 1px solid #d9d8ff;
   background: #f0f0ff;
 }
 
-.c61.active .c67,
-.c61:hover .c67 {
+.c60.active .c66,
+.c60:hover .c66 {
   display: block;
 }
 
-.c61.active .c63,
-.c61:hover .c63 {
+.c60.active .c62,
+.c60:hover .c62 {
   background: #d9d8ff;
 }
 
-.c61.active .c63 path,
-.c61:hover .c63 path {
+.c60.active .c62 path,
+.c60:hover .c62 path {
   fill: #4945ff;
 }
 
-.c61.active .c29,
-.c61:hover .c29 {
+.c60.active .c29,
+.c60:hover .c29 {
   color: #4945ff;
 }
 
-.c62 {
+.c61 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
 }
 
-.c41.component-row,
-.c41.dynamiczone-row {
+.c40.component-row,
+.c40.dynamiczone-row {
   position: relative;
   border-top: none !important;
 }
 
-.c41.component-row table tr:first-child,
-.c41.dynamiczone-row table tr:first-child {
+.c40.component-row table tr:first-child,
+.c40.dynamiczone-row table tr:first-child {
   border-top: none;
 }
 
-.c41.component-row > td:first-of-type,
-.c41.dynamiczone-row > td:first-of-type {
+.c40.component-row > td:first-of-type,
+.c40.dynamiczone-row > td:first-of-type {
   padding: 0 0 0 1.25rem;
   position: relative;
 }
 
-.c41.component-row > td:first-of-type::before,
-.c41.dynamiczone-row > td:first-of-type::before {
+.c40.component-row > td:first-of-type::before,
+.c40.dynamiczone-row > td:first-of-type::before {
   content: '';
   width: 0.25rem;
   height: calc(100% - 40px);
@@ -949,29 +937,29 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background: #eaeaef;
 }
 
-.c41.dynamiczone-row > td:first-of-type {
+.c40.dynamiczone-row > td:first-of-type {
   padding: 0;
 }
 
-.c52.component-row,
-.c52.dynamiczone-row {
+.c51.component-row,
+.c51.dynamiczone-row {
   position: relative;
   border-top: none !important;
 }
 
-.c52.component-row table tr:first-child,
-.c52.dynamiczone-row table tr:first-child {
+.c51.component-row table tr:first-child,
+.c51.dynamiczone-row table tr:first-child {
   border-top: none;
 }
 
-.c52.component-row > td:first-of-type,
-.c52.dynamiczone-row > td:first-of-type {
+.c51.component-row > td:first-of-type,
+.c51.dynamiczone-row > td:first-of-type {
   padding: 0 0 0 1.25rem;
   position: relative;
 }
 
-.c52.component-row > td:first-of-type::before,
-.c52.dynamiczone-row > td:first-of-type::before {
+.c51.component-row > td:first-of-type::before,
+.c51.dynamiczone-row > td:first-of-type::before {
   content: '';
   width: 0.25rem;
   height: calc(100% - 40px);
@@ -982,11 +970,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background-color: #d9d8ff;
 }
 
-.c52.dynamiczone-row > td:first-of-type {
+.c51.dynamiczone-row > td:first-of-type {
   padding: 0;
 }
 
-.c58 {
+.c57 {
   width: 2rem;
   height: 2rem;
   padding: 0.5625rem;
@@ -994,11 +982,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c58 path {
+.c57 path {
   fill: #4945ff;
 }
 
-.c54 {
+.c53 {
   height: 5.625rem;
   position: absolute;
   width: 100%;
@@ -1006,16 +994,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   left: 0;
 }
 
-.c55 {
+.c54 {
   width: 100%;
   overflow-x: auto;
 }
 
-.c69 {
+.c68 {
   padding-top: 5.625rem;
 }
 
-.c57 {
+.c56 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1066,7 +1054,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   outline-offset: -4px;
 }
 
-.c49 {
+.c48 {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 50%;
@@ -1084,16 +1072,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c49 svg {
+.c48 svg {
   height: 0.625rem;
   width: 0.625rem;
 }
 
-.c49 svg path {
+.c48 svg path {
   fill: #666687;
 }
 
-.c72 {
+.c71 {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 50%;
@@ -1111,16 +1099,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c72 svg {
+.c71 svg {
   height: 0.625rem;
   width: 0.625rem;
 }
 
-.c72 svg path {
+.c71 svg path {
   fill: #4945ff;
 }
 
-.c46 {
+.c45 {
   border-radius: 0 0 4px 4px;
   display: block;
   width: 100%;
@@ -1129,20 +1117,20 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   left: -0.25rem;
 }
 
-.c43 {
+.c42 {
   position: absolute;
   left: -1.125rem;
   top: 0px;
 }
 
-.c43:before {
+.c42:before {
   content: '';
   width: 0.25rem;
   height: 0.75rem;
   display: block;
 }
 
-.c44 {
+.c43 {
   position: relative;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1152,11 +1140,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   transform: translate(-0.5px,-1px);
 }
 
-.c44 * {
+.c43 * {
   fill: #eaeaef;
 }
 
-.c70 {
+.c69 {
   position: relative;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1166,7 +1154,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   transform: translate(-0.5px,-1px);
 }
 
-.c70 * {
+.c69 * {
   fill: #d9d8ff;
 }
 
@@ -1479,15 +1467,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Edit postal_code
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1510,15 +1491,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Delete postal_code
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1606,15 +1580,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Edit categories
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1637,15 +1604,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Delete categories
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1731,15 +1691,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Edit cover
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1762,15 +1715,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Delete cover
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1856,15 +1802,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Edit images
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1887,15 +1826,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Delete images
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1979,15 +1911,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Edit city
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2010,15 +1935,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Delete city
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2104,15 +2022,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Edit json
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2135,15 +2046,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Delete json
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2223,15 +2127,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Edit slug
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2254,15 +2151,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Delete slug
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2352,15 +2242,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Edit notrepeat_req
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2383,15 +2266,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Delete notrepeat_req
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2409,7 +2285,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c41 component-row"
+                  class="c40 component-row"
                 >
                   <td
                     colspan="12"
@@ -2418,7 +2294,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       class="c27"
                     >
                       <div
-                        class="c42"
+                        class="c41"
                       >
                         <table>
                           <tbody>
@@ -2430,10 +2306,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c43"
+                                  class="c42"
                                 >
                                   <svg
-                                    class="c44"
+                                    class="c43"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -2508,15 +2384,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
-                                        <span
-                                          class="c40"
-                                        >
-                                          Edit name
-                                        </span>
                                         <svg
-                                          aria-hidden="true"
                                           fill="none"
-                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -2539,15 +2408,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
-                                        <span
-                                          class="c40"
-                                        >
-                                          Delete name
-                                        </span>
                                         <svg
-                                          aria-hidden="true"
                                           fill="none"
-                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -2572,10 +2434,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c43"
+                                  class="c42"
                                 >
                                   <svg
-                                    class="c44"
+                                    class="c43"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -2650,15 +2512,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
-                                        <span
-                                          class="c40"
-                                        >
-                                          Edit popo
-                                        </span>
                                         <svg
-                                          aria-hidden="true"
                                           fill="none"
-                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -2681,15 +2536,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
-                                        <span
-                                          class="c40"
-                                        >
-                                          Delete popo
-                                        </span>
                                         <svg
-                                          aria-hidden="true"
                                           fill="none"
-                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -2714,10 +2562,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c43"
+                                  class="c42"
                                 >
                                   <svg
-                                    class="c44"
+                                    class="c43"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -2792,15 +2640,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
-                                        <span
-                                          class="c40"
-                                        >
-                                          Edit poq
-                                        </span>
                                         <svg
-                                          aria-hidden="true"
                                           fill="none"
-                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -2823,15 +2664,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
-                                        <span
-                                          class="c40"
-                                        >
-                                          Delete poq
-                                        </span>
                                         <svg
-                                          aria-hidden="true"
                                           fill="none"
-                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -2852,15 +2686,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </table>
                       </div>
                       <button
-                        class="c45 c46"
+                        class="c44 c45"
                         type="button"
                       >
                         <div
-                          class="c47"
+                          class="c46"
                         >
                           <div
                             aria-hidden="true"
-                            class="c48 c49"
+                            class="c47 c48"
                           >
                             <svg
                               fill="none"
@@ -2876,10 +2710,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c50"
+                            class="c49"
                           >
                             <span
-                              class="c29 c51"
+                              class="c29 c50"
                             >
                               Add another field to this component
                             </span>
@@ -2962,15 +2796,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Edit Compopo
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2993,15 +2820,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Delete Compopo
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -3019,7 +2839,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c41 component-row"
+                  class="c40 component-row"
                 >
                   <td
                     colspan="12"
@@ -3028,7 +2848,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       class="c27"
                     >
                       <div
-                        class="c42"
+                        class="c41"
                       >
                         <table>
                           <tbody>
@@ -3040,10 +2860,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c43"
+                                  class="c42"
                                 >
                                   <svg
-                                    class="c44"
+                                    class="c43"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -3118,15 +2938,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
-                                        <span
-                                          class="c40"
-                                        >
-                                          Edit dede
-                                        </span>
                                         <svg
-                                          aria-hidden="true"
                                           fill="none"
-                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -3149,15 +2962,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
-                                        <span
-                                          class="c40"
-                                        >
-                                          Delete dede
-                                        </span>
                                         <svg
-                                          aria-hidden="true"
                                           fill="none"
-                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -3182,10 +2988,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c43"
+                                  class="c42"
                                 >
                                   <svg
-                                    class="c44"
+                                    class="c43"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -3260,15 +3066,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
-                                        <span
-                                          class="c40"
-                                        >
-                                          Edit dada
-                                        </span>
                                         <svg
-                                          aria-hidden="true"
                                           fill="none"
-                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -3291,15 +3090,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
-                                        <span
-                                          class="c40"
-                                        >
-                                          Delete dada
-                                        </span>
                                         <svg
-                                          aria-hidden="true"
                                           fill="none"
-                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -3324,10 +3116,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c43"
+                                  class="c42"
                                 >
                                   <svg
-                                    class="c44"
+                                    class="c43"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -3402,15 +3194,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
-                                        <span
-                                          class="c40"
-                                        >
-                                          Edit papi
-                                        </span>
                                         <svg
-                                          aria-hidden="true"
                                           fill="none"
-                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -3433,15 +3218,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
-                                        <span
-                                          class="c40"
-                                        >
-                                          Delete papi
-                                        </span>
                                         <svg
-                                          aria-hidden="true"
                                           fill="none"
-                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -3462,15 +3240,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </table>
                       </div>
                       <button
-                        class="c45 c46"
+                        class="c44 c45"
                         type="button"
                       >
                         <div
-                          class="c47"
+                          class="c46"
                         >
                           <div
                             aria-hidden="true"
-                            class="c48 c49"
+                            class="c47 c48"
                           >
                             <svg
                               fill="none"
@@ -3486,10 +3264,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c50"
+                            class="c49"
                           >
                             <span
-                              class="c29 c51"
+                              class="c29 c50"
                             >
                               Add another field to this component
                             </span>
@@ -3566,15 +3344,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Edit DynamicZone
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -3597,15 +3368,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
-                            <span
-                              class="c40"
-                            >
-                              Delete DynamicZone
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -3623,27 +3387,27 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c52 dynamiczone-row"
+                  class="c51 dynamiczone-row"
                 >
                   <td
                     colspan="12"
                   >
                     <div
-                      class="c53 c54"
+                      class="c52 c53"
                     >
                       <div
-                        class="c17 c18 c55"
+                        class="c17 c18 c54"
                         spacing="2"
                       >
                         <button
                           type="button"
                         >
                           <div
-                            class="c23 c56 c57"
+                            class="c23 c55 c56"
                             spacing="1"
                           >
                             <svg
-                              class="c58"
+                              class="c57"
                               fill="none"
                               height="1em"
                               viewBox="0 0 24 24"
@@ -3656,7 +3420,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <span
-                              class="c29 c59"
+                              class="c29 c58"
                             >
                               Add a component
                             </span>
@@ -3666,15 +3430,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           type="button"
                         >
                           <div
-                            class="c60 c61 active"
+                            class="c59 c60 active"
                           >
                             <div
-                              class="c23 c56 c62"
+                              class="c23 c55 c61"
                               spacing="1"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="svg-inline--fa fa-adjust c63 c64"
+                                class="svg-inline--fa fa-adjust c62 c63"
                                 data-icon="adjust"
                                 data-prefix="fas"
                                 focusable="false"
@@ -3688,15 +3452,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 />
                               </svg>
                               <div
-                                class="c65"
+                                class="c64"
                               >
                                 <span
-                                  class="c29 c66"
+                                  class="c29 c65"
                                 />
                               </div>
                             </div>
                             <div
-                              class="c67 c68"
+                              class="c66 c67"
                               role="button"
                               tabindex="0"
                             >
@@ -3719,15 +3483,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           type="button"
                         >
                           <div
-                            class="c60 c61"
+                            class="c59 c60"
                           >
                             <div
-                              class="c23 c56 c62"
+                              class="c23 c55 c61"
                               spacing="1"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="svg-inline--fa fa-address-book c63 c64"
+                                class="svg-inline--fa fa-address-book c62 c63"
                                 data-icon="address-book"
                                 data-prefix="fas"
                                 focusable="false"
@@ -3741,15 +3505,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 />
                               </svg>
                               <div
-                                class="c65"
+                                class="c64"
                               >
                                 <span
-                                  class="c29 c66"
+                                  class="c29 c65"
                                 />
                               </div>
                             </div>
                             <div
-                              class="c67 c68"
+                              class="c66 c67"
                               role="button"
                               tabindex="0"
                             >
@@ -3772,15 +3536,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           type="button"
                         >
                           <div
-                            class="c60 c61"
+                            class="c59 c60"
                           >
                             <div
-                              class="c23 c56 c62"
+                              class="c23 c55 c61"
                               spacing="1"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="svg-inline--fa fa-calendar c63 c64"
+                                class="svg-inline--fa fa-calendar c62 c63"
                                 data-icon="calendar"
                                 data-prefix="fas"
                                 focusable="false"
@@ -3794,15 +3558,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 />
                               </svg>
                               <div
-                                class="c65"
+                                class="c64"
                               >
                                 <span
-                                  class="c29 c66"
+                                  class="c29 c65"
                                 />
                               </div>
                             </div>
                             <div
-                              class="c67 c68"
+                              class="c66 c67"
                               role="button"
                               tabindex="0"
                             >
@@ -3825,15 +3589,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           type="button"
                         >
                           <div
-                            class="c60 c61"
+                            class="c59 c60"
                           >
                             <div
-                              class="c23 c56 c62"
+                              class="c23 c55 c61"
                               spacing="1"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="svg-inline--fa fa-cannabis c63 c64"
+                                class="svg-inline--fa fa-cannabis c62 c63"
                                 data-icon="cannabis"
                                 data-prefix="fas"
                                 focusable="false"
@@ -3847,15 +3611,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 />
                               </svg>
                               <div
-                                class="c65"
+                                class="c64"
                               >
                                 <span
-                                  class="c29 c66"
+                                  class="c29 c65"
                                 />
                               </div>
                             </div>
                             <div
-                              class="c67 c68"
+                              class="c66 c67"
                               role="button"
                               tabindex="0"
                             >
@@ -3877,7 +3641,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       </div>
                     </div>
                     <div
-                      class="c69"
+                      class="c68"
                     >
                       <div
                         class=""
@@ -3886,7 +3650,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c52 component-row"
+                              class="c51 component-row"
                             >
                               <td
                                 colspan="12"
@@ -3895,7 +3659,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   class="c27"
                                 >
                                   <div
-                                    class="c42"
+                                    class="c41"
                                   >
                                     <table>
                                       <tbody>
@@ -3907,10 +3671,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c43"
+                                              class="c42"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c69"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -3985,15 +3749,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Edit name
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4016,15 +3773,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Delete name
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4049,10 +3799,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c43"
+                                              class="c42"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c69"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4127,15 +3877,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Edit mail
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4158,15 +3901,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Delete mail
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4191,10 +3927,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c43"
+                                              class="c42"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c69"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4269,15 +4005,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Edit phone
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4300,15 +4029,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Delete phone
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4329,15 +4051,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c45 c46"
+                                    class="c44 c45"
                                     type="button"
                                   >
                                     <div
-                                      class="c47"
+                                      class="c46"
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c71 c72"
+                                        class="c70 c71"
                                       >
                                         <svg
                                           fill="none"
@@ -4353,10 +4075,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c50"
+                                        class="c49"
                                       >
                                         <span
-                                          class="c29 c59"
+                                          class="c29 c58"
                                         >
                                           Add another field to this component
                                         </span>
@@ -4376,7 +4098,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c52 component-row"
+                              class="c51 component-row"
                             >
                               <td
                                 colspan="12"
@@ -4385,7 +4107,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   class="c27"
                                 >
                                   <div
-                                    class="c42"
+                                    class="c41"
                                   >
                                     <table>
                                       <tbody>
@@ -4397,10 +4119,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c43"
+                                              class="c42"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c69"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4475,15 +4197,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Edit name
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4506,15 +4221,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Delete name
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4539,10 +4247,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c43"
+                                              class="c42"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c69"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4617,15 +4325,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Edit description
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4648,15 +4349,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Delete description
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4681,10 +4375,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c43"
+                                              class="c42"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c69"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4759,15 +4453,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Edit price
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4790,15 +4477,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Delete price
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4823,10 +4503,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c43"
+                                              class="c42"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c69"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4903,15 +4583,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Edit picture
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4934,15 +4607,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Delete picture
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4967,10 +4633,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c43"
+                                              class="c42"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c69"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5047,15 +4713,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Edit very_long_description
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5078,15 +4737,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Delete very_long_description
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5111,10 +4763,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c43"
+                                              class="c42"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c69"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5193,15 +4845,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Edit categories
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5224,15 +4869,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Delete categories
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5253,15 +4891,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c45 c46"
+                                    class="c44 c45"
                                     type="button"
                                   >
                                     <div
-                                      class="c47"
+                                      class="c46"
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c71 c72"
+                                        class="c70 c71"
                                       >
                                         <svg
                                           fill="none"
@@ -5277,10 +4915,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c50"
+                                        class="c49"
                                       >
                                         <span
-                                          class="c29 c59"
+                                          class="c29 c58"
                                         >
                                           Add another field to this component
                                         </span>
@@ -5300,7 +4938,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c52 component-row"
+                              class="c51 component-row"
                             >
                               <td
                                 colspan="12"
@@ -5309,7 +4947,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   class="c27"
                                 >
                                   <div
-                                    class="c42"
+                                    class="c41"
                                   >
                                     <table>
                                       <tbody>
@@ -5321,10 +4959,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c43"
+                                              class="c42"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c69"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5399,15 +5037,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Edit label
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5430,15 +5061,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Delete label
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5463,10 +5087,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c43"
+                                              class="c42"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c69"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5541,15 +5165,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Edit time
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5572,15 +5189,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Delete time
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5605,10 +5215,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c43"
+                                              class="c42"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c69"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5690,15 +5300,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Edit dishrep
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5721,15 +5324,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Delete dishrep
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5747,7 +5343,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                         </tr>
                                         <tr
-                                          class="c41 component-row"
+                                          class="c40 component-row"
                                         >
                                           <td
                                             colspan="12"
@@ -5756,7 +5352,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c27"
                                             >
                                               <div
-                                                class="c42"
+                                                class="c41"
                                               >
                                                 <table>
                                                   <tbody>
@@ -5768,10 +5364,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c43"
+                                                          class="c42"
                                                         >
                                                           <svg
-                                                            class="c44"
+                                                            class="c43"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -5846,15 +5442,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
-                                                                <span
-                                                                  class="c40"
-                                                                >
-                                                                  Edit name
-                                                                </span>
                                                                 <svg
-                                                                  aria-hidden="true"
                                                                   fill="none"
-                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -5877,15 +5466,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
-                                                                <span
-                                                                  class="c40"
-                                                                >
-                                                                  Delete name
-                                                                </span>
                                                                 <svg
-                                                                  aria-hidden="true"
                                                                   fill="none"
-                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -5910,10 +5492,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c43"
+                                                          class="c42"
                                                         >
                                                           <svg
-                                                            class="c44"
+                                                            class="c43"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -5988,15 +5570,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
-                                                                <span
-                                                                  class="c40"
-                                                                >
-                                                                  Edit description
-                                                                </span>
                                                                 <svg
-                                                                  aria-hidden="true"
                                                                   fill="none"
-                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -6019,15 +5594,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
-                                                                <span
-                                                                  class="c40"
-                                                                >
-                                                                  Delete description
-                                                                </span>
                                                                 <svg
-                                                                  aria-hidden="true"
                                                                   fill="none"
-                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -6052,10 +5620,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c43"
+                                                          class="c42"
                                                         >
                                                           <svg
-                                                            class="c44"
+                                                            class="c43"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -6130,15 +5698,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
-                                                                <span
-                                                                  class="c40"
-                                                                >
-                                                                  Edit price
-                                                                </span>
                                                                 <svg
-                                                                  aria-hidden="true"
                                                                   fill="none"
-                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -6161,15 +5722,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
-                                                                <span
-                                                                  class="c40"
-                                                                >
-                                                                  Delete price
-                                                                </span>
                                                                 <svg
-                                                                  aria-hidden="true"
                                                                   fill="none"
-                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -6194,10 +5748,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c43"
+                                                          class="c42"
                                                         >
                                                           <svg
-                                                            class="c44"
+                                                            class="c43"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -6274,15 +5828,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
-                                                                <span
-                                                                  class="c40"
-                                                                >
-                                                                  Edit picture
-                                                                </span>
                                                                 <svg
-                                                                  aria-hidden="true"
                                                                   fill="none"
-                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -6305,15 +5852,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
-                                                                <span
-                                                                  class="c40"
-                                                                >
-                                                                  Delete picture
-                                                                </span>
                                                                 <svg
-                                                                  aria-hidden="true"
                                                                   fill="none"
-                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -6338,10 +5878,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c43"
+                                                          class="c42"
                                                         >
                                                           <svg
-                                                            class="c44"
+                                                            class="c43"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -6418,15 +5958,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
-                                                                <span
-                                                                  class="c40"
-                                                                >
-                                                                  Edit very_long_description
-                                                                </span>
                                                                 <svg
-                                                                  aria-hidden="true"
                                                                   fill="none"
-                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -6449,15 +5982,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
-                                                                <span
-                                                                  class="c40"
-                                                                >
-                                                                  Delete very_long_description
-                                                                </span>
                                                                 <svg
-                                                                  aria-hidden="true"
                                                                   fill="none"
-                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -6482,10 +6008,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c43"
+                                                          class="c42"
                                                         >
                                                           <svg
-                                                            class="c44"
+                                                            class="c43"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -6564,15 +6090,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
-                                                                <span
-                                                                  class="c40"
-                                                                >
-                                                                  Edit categories
-                                                                </span>
                                                                 <svg
-                                                                  aria-hidden="true"
                                                                   fill="none"
-                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -6595,15 +6114,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
-                                                                <span
-                                                                  class="c40"
-                                                                >
-                                                                  Delete categories
-                                                                </span>
                                                                 <svg
-                                                                  aria-hidden="true"
                                                                   fill="none"
-                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -6624,15 +6136,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </table>
                                               </div>
                                               <button
-                                                class="c45 c46"
+                                                class="c44 c45"
                                                 type="button"
                                               >
                                                 <div
-                                                  class="c47"
+                                                  class="c46"
                                                 >
                                                   <div
                                                     aria-hidden="true"
-                                                    class="c48 c49"
+                                                    class="c47 c48"
                                                   >
                                                     <svg
                                                       fill="none"
@@ -6648,10 +6160,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     </svg>
                                                   </div>
                                                   <div
-                                                    class="c50"
+                                                    class="c49"
                                                   >
                                                     <span
-                                                      class="c29 c51"
+                                                      class="c29 c50"
                                                     >
                                                       Add another field to this component
                                                     </span>
@@ -6665,15 +6177,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c45 c46"
+                                    class="c44 c45"
                                     type="button"
                                   >
                                     <div
-                                      class="c47"
+                                      class="c46"
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c71 c72"
+                                        class="c70 c71"
                                       >
                                         <svg
                                           fill="none"
@@ -6689,10 +6201,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c50"
+                                        class="c49"
                                       >
                                         <span
-                                          class="c29 c59"
+                                          class="c29 c58"
                                         >
                                           Add another field to this component
                                         </span>
@@ -6712,7 +6224,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c52 component-row"
+                              class="c51 component-row"
                             >
                               <td
                                 colspan="12"
@@ -6721,7 +6233,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   class="c27"
                                 >
                                   <div
-                                    class="c42"
+                                    class="c41"
                                   >
                                     <table>
                                       <tbody>
@@ -6733,10 +6245,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c43"
+                                              class="c42"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c69"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -6811,15 +6323,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Edit name
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -6842,15 +6347,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Delete name
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -6875,10 +6373,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c43"
+                                              class="c42"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c69"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -6955,15 +6453,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Edit media
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -6986,15 +6477,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Delete media
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -7019,10 +6503,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c43"
+                                              class="c42"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c69"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -7097,15 +6581,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Edit is_available
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -7128,15 +6605,8 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
-                                                    <span
-                                                      class="c40"
-                                                    >
-                                                      Delete is_available
-                                                    </span>
                                                     <svg
-                                                      aria-hidden="true"
                                                       fill="none"
-                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -7157,15 +6627,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c45 c46"
+                                    class="c44 c45"
                                     type="button"
                                   >
                                     <div
-                                      class="c47"
+                                      class="c46"
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c71 c72"
+                                        class="c70 c71"
                                       >
                                         <svg
                                           fill="none"
@@ -7181,10 +6651,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c50"
+                                        class="c49"
                                       >
                                         <span
-                                          class="c29 c59"
+                                          class="c29 c58"
                                         >
                                           Add another field to this component
                                         </span>
@@ -7205,17 +6675,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
           </div>
           <div>
             <hr
-              class="c73 c74"
+              class="c72 c73"
             />
             <button
-              class="c75 c76"
+              class="c74 c75"
             >
               <div
-                class="c77"
+                class="c76"
               >
                 <div
                   aria-hidden="true"
-                  class="c78 c79"
+                  class="c77 c78"
                 >
                   <svg
                     fill="none"
@@ -7231,10 +6701,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="c80"
+                  class="c79"
                 >
                   <span
-                    class="c81"
+                    class="c80"
                   >
                     Add another field to this collection type
                   </span>
@@ -7247,7 +6717,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c82"
+    class="c81"
   >
     <p
       aria-live="polite"
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 268f2cead96..ede94b11a4d 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
@@ -33,19 +33,7 @@ describe('<SearchURLQuery />', () => {
     const { container } = render(makeApp(history));
 
     expect(container).toMatchInlineSnapshot(`
-      .c5 {
-        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;
-      }
-
-      .c2 {
+      .c4 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -155,11 +143,11 @@ describe('<SearchURLQuery />', () => {
         fill: #666687;
       }
 
-      .c3 {
+      .c2 {
         color: #32324d;
       }
 
-      .c4 path {
+      .c3 path {
         fill: #32324d;
       }
 
@@ -172,16 +160,9 @@ describe('<SearchURLQuery />', () => {
             tabindex="0"
             type="button"
           >
-            <span
-              class="c2"
-            >
-              Search
-            </span>
             <svg
-              aria-hidden="true"
-              class="c3 c4"
+              class="c2 c3"
               fill="none"
-              focusable="false"
               height="1em"
               viewBox="0 0 24 24"
               width="1em"
@@ -197,7 +178,7 @@ describe('<SearchURLQuery />', () => {
           </button>
         </span>
         <div
-          class="c5"
+          class="c4"
         >
           <p
             aria-live="polite"
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 7a90b5638ef..8ec5fe6872b 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
@@ -29,7 +29,7 @@ describe('DocAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c32 {
+      .c31 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -41,12 +41,12 @@ describe('DocAssetCard', () => {
         width: 1px;
       }
 
-      .c16 {
+      .c15 {
         width: 100%;
         height: 5.5rem;
       }
 
-      .c17 {
+      .c16 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -64,22 +64,10 @@ describe('DocAssetCard', () => {
         justify-content: center;
       }
 
-      .c23 {
+      .c22 {
         padding-top: 4px;
       }
 
-      .c15 {
-        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 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -196,14 +184,14 @@ describe('DocAssetCard', () => {
         position: end;
       }
 
-      .c20 {
+      .c19 {
         padding-top: 8px;
         padding-right: 12px;
         padding-bottom: 8px;
         padding-left: 12px;
       }
 
-      .c28 {
+      .c27 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
@@ -242,7 +230,7 @@ describe('DocAssetCard', () => {
         flex-direction: row;
       }
 
-      .c21 {
+      .c20 {
         -webkit-align-items: flex-start;
         -webkit-box-align: flex-start;
         -ms-flex-align: flex-start;
@@ -256,7 +244,7 @@ describe('DocAssetCard', () => {
         flex-direction: row;
       }
 
-      .c29 {
+      .c28 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -295,20 +283,20 @@ describe('DocAssetCard', () => {
         right: 12px;
       }
 
-      .c24 {
+      .c23 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c25 {
+      .c24 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c31 {
+      .c30 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -316,14 +304,14 @@ describe('DocAssetCard', () => {
         text-transform: uppercase;
       }
 
-      .c27 {
+      .c26 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c30 {
+      .c29 {
         margin-left: 4px;
       }
 
@@ -395,7 +383,7 @@ describe('DocAssetCard', () => {
         background-color: #8e8ea9;
       }
 
-      .c22 {
+      .c21 {
         word-break: break-all;
       }
 
@@ -404,7 +392,7 @@ describe('DocAssetCard', () => {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c26 {
+      .c25 {
         text-transform: uppercase;
       }
 
@@ -424,11 +412,11 @@ describe('DocAssetCard', () => {
         opacity: 1;
       }
 
-      .c19 svg {
+      .c18 svg {
         font-size: 3rem;
       }
 
-      .c18 {
+      .c17 {
         border-radius: 4px 4px 0 0;
         background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
       }
@@ -449,15 +437,11 @@ describe('DocAssetCard', () => {
                 class="c4 c5 c6 c7"
                 spacing="2"
               >
-                <div
-                  class=""
-                >
-                  <input
-                    aria-labelledby="card-1-title"
-                    class="c8"
-                    type="checkbox"
-                  />
-                </div>
+                <input
+                  aria-labelledby="card-1-title"
+                  class="c8"
+                  type="checkbox"
+                />
               </div>
             </div>
             <div
@@ -472,15 +456,8 @@ describe('DocAssetCard', () => {
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="c15"
-                  >
-                    Edit
-                  </span>
                   <svg
-                    aria-hidden="true"
                     fill="none"
-                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -497,12 +474,12 @@ describe('DocAssetCard', () => {
               </span>
             </div>
             <div
-              class="c16 c17 c18"
+              class="c15 c16 c17"
               height="5.5rem"
               width="100%"
             >
               <span
-                class="c19"
+                class="c18"
               >
                 <svg
                   aria-label="hello.png"
@@ -523,29 +500,29 @@ describe('DocAssetCard', () => {
             </div>
           </div>
           <div
-            class="c20"
+            class="c19"
           >
             <div
-              class="c21"
+              class="c20"
             >
               <div
-                class="c22"
+                class="c21"
               >
                 <div
-                  class="c23"
+                  class="c22"
                 >
                   <h2
-                    class="c24"
+                    class="c23"
                     id="card-1-title"
                   >
                     hello.png
                   </h2>
                 </div>
                 <div
-                  class="c25"
+                  class="c24"
                 >
                   <span
-                    class="c26"
+                    class="c25"
                   >
                     png
                   </span>
@@ -553,13 +530,13 @@ describe('DocAssetCard', () => {
                 </div>
               </div>
               <div
-                class="c27"
+                class="c26"
               >
                 <div
-                  class="c28 c29 c30"
+                  class="c27 c28 c29"
                 >
                   <span
-                    class="c31"
+                    class="c30"
                   >
                     Doc
                   </span>
@@ -569,7 +546,7 @@ describe('DocAssetCard', () => {
           </div>
         </article>
         <div
-          class="c32"
+          class="c31"
         >
           <p
             aria-live="polite"
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 135bd0a6e24..6d4b80e2e1e 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
@@ -32,7 +32,7 @@ describe('ImageAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c30 {
+      .c29 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -62,14 +62,14 @@ describe('ImageAssetCard', () => {
         position: end;
       }
 
-      .c18 {
+      .c17 {
         padding-top: 8px;
         padding-right: 12px;
         padding-bottom: 8px;
         padding-left: 12px;
       }
 
-      .c26 {
+      .c25 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
@@ -108,7 +108,7 @@ describe('ImageAssetCard', () => {
         flex-direction: row;
       }
 
-      .c19 {
+      .c18 {
         -webkit-align-items: flex-start;
         -webkit-box-align: flex-start;
         -ms-flex-align: flex-start;
@@ -122,7 +122,7 @@ describe('ImageAssetCard', () => {
         flex-direction: row;
       }
 
-      .c27 {
+      .c26 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -161,7 +161,7 @@ describe('ImageAssetCard', () => {
         right: 12px;
       }
 
-      .c17 {
+      .c16 {
         margin: 0;
         padding: 0;
         max-height: 100%;
@@ -169,7 +169,7 @@ describe('ImageAssetCard', () => {
         object-fit: contain;
       }
 
-      .c16 {
+      .c15 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -185,20 +185,20 @@ describe('ImageAssetCard', () => {
         border-top-right-radius: 4px;
       }
 
-      .c22 {
+      .c21 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c23 {
+      .c22 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c29 {
+      .c28 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -206,14 +206,14 @@ describe('ImageAssetCard', () => {
         text-transform: uppercase;
       }
 
-      .c25 {
+      .c24 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c28 {
+      .c27 {
         margin-left: 4px;
       }
 
@@ -285,7 +285,7 @@ describe('ImageAssetCard', () => {
         background-color: #8e8ea9;
       }
 
-      .c20 {
+      .c19 {
         word-break: break-all;
       }
 
@@ -294,22 +294,10 @@ describe('ImageAssetCard', () => {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c21 {
+      .c20 {
         padding-top: 4px;
       }
 
-      .c15 {
-        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 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -408,7 +396,7 @@ describe('ImageAssetCard', () => {
         fill: #666687;
       }
 
-      .c24 {
+      .c23 {
         text-transform: uppercase;
       }
 
@@ -444,15 +432,11 @@ describe('ImageAssetCard', () => {
                 class="c4 c5 c6 c7"
                 spacing="2"
               >
-                <div
-                  class=""
-                >
-                  <input
-                    aria-labelledby="card-1-title"
-                    class="c8"
-                    type="checkbox"
-                  />
-                </div>
+                <input
+                  aria-labelledby="card-1-title"
+                  class="c8"
+                  type="checkbox"
+                />
               </div>
             </div>
             <div
@@ -467,15 +451,8 @@ describe('ImageAssetCard', () => {
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="c15"
-                  >
-                    Edit
-                  </span>
                   <svg
-                    aria-hidden="true"
                     fill="none"
-                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -492,40 +469,40 @@ describe('ImageAssetCard', () => {
               </span>
             </div>
             <div
-              class="c16"
+              class="c15"
             >
               <img
                 alt=""
                 aria-hidden="true"
-                class="c17"
+                class="c16"
                 src="http://somewhere.com/hello.png?width=40&height=40"
               />
             </div>
           </div>
           <div
-            class="c18"
+            class="c17"
           >
             <div
-              class="c19"
+              class="c18"
             >
               <div
-                class="c20"
+                class="c19"
               >
                 <div
-                  class="c21"
+                  class="c20"
                 >
                   <h2
-                    class="c22"
+                    class="c21"
                     id="card-1-title"
                   >
                     hello.png
                   </h2>
                 </div>
                 <div
-                  class="c23"
+                  class="c22"
                 >
                   <span
-                    class="c24"
+                    class="c23"
                   >
                     png
                   </span>
@@ -533,13 +510,13 @@ describe('ImageAssetCard', () => {
                 </div>
               </div>
               <div
-                class="c25"
+                class="c24"
               >
                 <div
-                  class="c26 c27 c28"
+                  class="c25 c26 c27"
                 >
                   <span
-                    class="c29"
+                    class="c28"
                   >
                     Image
                   </span>
@@ -549,7 +526,7 @@ describe('ImageAssetCard', () => {
           </div>
         </article>
         <div
-          class="c30"
+          class="c29"
         >
           <p
             aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/SearchAsset/tests/index.test.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/SearchAsset/tests/index.test.js
index 3f7f6fc60eb..5522c4395f5 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/SearchAsset/tests/index.test.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/SearchAsset/tests/index.test.js
@@ -30,18 +30,6 @@ describe('<SearchURLQuery />', () => {
     const { container } = render(makeApp(null));
 
     expect(container).toMatchInlineSnapshot(`
-      .c3 {
-        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;
-      }
-
       .c2 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
@@ -161,15 +149,8 @@ describe('<SearchURLQuery />', () => {
             tabindex="0"
             type="button"
           >
-            <span
-              class="c2"
-            >
-              Search
-            </span>
             <svg
-              aria-hidden="true"
               fill="none"
-              focusable="false"
               height="1em"
               viewBox="0 0 24 24"
               width="1em"
@@ -185,7 +166,7 @@ describe('<SearchURLQuery />', () => {
           </button>
         </span>
         <div
-          class="c3"
+          class="c2"
         >
           <p
             aria-live="polite"
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 43b9616ac3a..9fc11bafeae 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
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BrowseStep renders and match snapshot 1`] = `
-.c82 {
+.c81 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -13,17 +13,17 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 1px;
 }
 
-.c43 {
+.c42 {
   position: relative;
   overflow: hidden;
   max-width: 100%;
 }
 
-.c48 {
+.c47 {
   max-width: 100%;
 }
 
-.c59 {
+.c58 {
   padding-top: 16px;
 }
 
@@ -76,7 +76,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c44 {
+.c43 {
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
@@ -90,7 +90,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c49 {
+.c48 {
   -webkit-align-items: start;
   -webkit-box-align: start;
   -ms-flex-align: start;
@@ -104,7 +104,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c60 {
+.c59 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -122,7 +122,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c38 {
+.c37 {
   background: #ffffff;
   padding: 12px;
   border-radius: 4px;
@@ -134,7 +134,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   cursor: pointer;
 }
 
-.c39 {
+.c38 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -148,16 +148,16 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c40 > * {
+.c39 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c40 > * + * {
+.c39 > * + * {
   margin-left: 8px;
 }
 
-.c33 {
+.c32 {
   font-weight: 500;
   color: #32324d;
   font-weight: 500;
@@ -165,7 +165,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.25;
 }
 
-.c50 {
+.c49 {
   font-weight: 500;
   color: #32324d;
   display: block;
@@ -176,7 +176,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c53 {
+.c52 {
   color: #666687;
   display: block;
   white-space: nowrap;
@@ -186,13 +186,13 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.33;
 }
 
-.c74 {
+.c73 {
   color: #666687;
   font-size: 0.875rem;
   line-height: 1.43;
 }
 
-.c80 {
+.c79 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
@@ -344,20 +344,20 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   fill: #32324d;
 }
 
-.c23 {
+.c22 {
   padding-top: 12px;
 }
 
-.c32 {
+.c31 {
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
-.c36 {
+.c35 {
   position: relative;
 }
 
-.c41 {
+.c40 {
   background: #eaf5ff;
   color: #66b7f1;
   padding-top: 8px;
@@ -367,27 +367,15 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c46 {
+.c45 {
   padding: 4px;
   max-width: 100%;
 }
 
-.c73 {
+.c72 {
   padding-left: 8px;
 }
 
-.c22 {
-  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;
-}
-
 .c20 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -486,7 +474,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   fill: #666687;
 }
 
-.c52 {
+.c51 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -498,7 +486,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 1px;
 }
 
-.c65 {
+.c64 {
   position: absolute;
   left: 0;
   right: 0;
@@ -509,24 +497,24 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: none;
 }
 
-.c65:focus {
+.c64:focus {
   outline: none;
 }
 
-.c65[aria-disabled='true'] {
+.c64[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c68 {
+.c67 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c70 {
+.c69 {
   padding-left: 12px;
 }
 
-.c61 {
+.c60 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -540,7 +528,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c63 {
+.c62 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -554,7 +542,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c66 {
+.c65 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -572,7 +560,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c69 {
+.c68 {
   color: #32324d;
   display: block;
   white-space: nowrap;
@@ -582,12 +570,12 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c62 > * {
+.c61 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c64 {
+.c63 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -603,28 +591,28 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c64:focus-within {
+.c63:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c71 {
+.c70 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c71 svg {
+.c70 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c71 svg path {
+.c70 svg path {
   fill: #666687;
 }
 
-.c72 {
+.c71 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -633,30 +621,30 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: none;
 }
 
-.c72 svg {
+.c71 svg {
   width: 0.375rem;
 }
 
-.c67 {
+.c66 {
   width: 100%;
 }
 
-.c34 {
+.c33 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c35 {
+.c34 {
   grid-column: span 3;
   max-width: 100%;
 }
 
-.c55 {
+.c54 {
   right: 16px;
 }
 
-.c56 {
+.c55 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -670,45 +658,45 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c57 > * {
+.c56 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c57 > * + * {
+.c56 > * + * {
   margin-left: 8px;
 }
 
-.c58 {
+.c57 {
   position: absolute;
   top: 12px;
 }
 
-.c27 {
+.c26 {
   padding-top: 4px;
   padding-right: 8px;
   padding-bottom: 4px;
   padding-left: 8px;
 }
 
-.c29 {
+.c28 {
   padding-right: 4px;
   padding-left: 4px;
 }
 
-.c28 {
+.c27 {
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c30 {
+.c29 {
   color: #8e8ea9;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c24 {
+.c23 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -722,7 +710,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c26 {
+.c25 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -736,11 +724,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c25:first-child {
+.c24:first-child {
   margin-left: calc(-1*8px);
 }
 
-.c31 {
+.c30 {
   border-radius: 4px;
   color: #666687;
   font-size: 0.75rem;
@@ -750,8 +738,8 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   text-decoration: none;
 }
 
-.c31:hover,
-.c31:focus {
+.c30:hover,
+.c30:focus {
   background-color: #dcdce4;
   color: #4a4a6a;
 }
@@ -913,7 +901,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 6px;
 }
 
-.c37 {
+.c36 {
   height: 100%;
   left: 0;
   position: absolute;
@@ -922,41 +910,41 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 100%;
 }
 
-.c37:hover,
-.c37:focus {
+.c36:hover,
+.c36:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c42 path {
+.c41 path {
   fill: currentColor;
 }
 
-.c54 {
+.c53 {
   display: none;
 }
 
-.c45 {
+.c44 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.c47:focus {
+.c46:focus {
   outline: 2px solid #4945ff;
   outline-offset: -2px;
 }
 
-.c75 > * + * {
+.c74 > * + * {
   margin-left: 4px;
 }
 
-.c81 {
+.c80 {
   line-height: revert;
 }
 
-.c76 {
+.c75 {
   padding: 12px;
   border-radius: 4px;
   -webkit-text-decoration: none;
@@ -969,7 +957,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   outline: none;
 }
 
-.c76:after {
+.c75:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -984,11 +972,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c76:focus-visible {
+.c75:focus-visible {
   outline: none;
 }
 
-.c76:focus-visible:after {
+.c75:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -999,7 +987,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c78 {
+.c77 {
   padding: 12px;
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
@@ -1013,7 +1001,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   outline: none;
 }
 
-.c78:after {
+.c77:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -1028,11 +1016,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c78:focus-visible {
+.c77:focus-visible {
   outline: none;
 }
 
-.c78:focus-visible:after {
+.c77:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -1043,26 +1031,26 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c79 {
+.c78 {
   color: #271fe0;
   background: #ffffff;
 }
 
-.c79:hover {
+.c78:hover {
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c77 {
+.c76 {
   font-size: 0.7rem;
   pointer-events: none;
 }
 
-.c77 svg path {
+.c76 svg path {
   fill: #c0c0cf;
 }
 
-.c77:focus svg path,
-.c77:hover svg path {
+.c76:focus svg path,
+.c76:hover svg path {
   fill: #c0c0cf;
 }
 
@@ -1084,18 +1072,18 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-shrink: 0;
 }
 
-.c51 {
+.c50 {
   max-width: 100%;
 }
 
 @media (max-width:68.75rem) {
-  .c35 {
+  .c34 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c35 {
+  .c34 {
     grid-column: span;
   }
 }
@@ -1197,15 +1185,8 @@ exports[`BrowseStep renders and match snapshot 1`] = `
               tabindex="0"
               type="button"
             >
-              <span
-                class="c22"
-              >
-                Search
-              </span>
               <svg
-                aria-hidden="true"
                 fill="none"
-                focusable="false"
                 height="1em"
                 viewBox="0 0 24 24"
                 width="1em"
@@ -1224,64 +1205,64 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="c23"
+      class="c22"
     >
       <nav
         aria-label="Folders navigation"
         class=""
       >
         <ol
-          class="c24 c25"
+          class="c23 c24"
         >
           <li
-            class="c26"
+            class="c25"
           >
             <div
-              class="c27"
+              class="c26"
             >
               <span
                 aria-current="false"
-                class="c28"
+                class="c27"
               >
                 Media Library
               </span>
             </div>
             <div
               aria-hidden="true"
-              class="c29"
+              class="c28"
             >
               <span
-                class="c30"
+                class="c29"
               >
                 /
               </span>
             </div>
           </li>
           <li
-            class="c26"
+            class="c25"
           >
             <button
-              class="c31"
+              class="c30"
               type="button"
             >
               Folder 2
             </button>
             <div
               aria-hidden="true"
-              class="c29"
+              class="c28"
             >
               <span
-                class="c30"
+                class="c29"
               >
                 /
               </span>
             </div>
           </li>
           <li
-            class="c26"
+            class="c25"
           >
             <button
-              class="c31"
+              class="c30"
               type="button"
             >
               Folder 1
@@ -1294,44 +1275,44 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       class=""
     >
       <div
-        class="c32"
+        class="c31"
       >
         <h2
-          class="c33"
+          class="c32"
         >
           Folders (1)
         </h2>
       </div>
       <div
-        class="c34"
+        class="c33"
       >
         <div
-          class="c35"
+          class="c34"
         >
           <div
             class=""
           >
             <div
-              class="c36 "
+              class="c35 "
               tabindex="0"
             >
               <button
                 aria-hidden="true"
                 aria-label="Folder 1"
-                class="c37"
+                class="c36"
                 tabindex="-1"
                 type="button"
               />
               <div
-                class="c38 c39 c40"
+                class="c37 c38 c39"
                 cursor="pointer"
                 spacing="2"
               >
                 <div
-                  class="c41"
+                  class="c40"
                 >
                   <svg
-                    class="c42"
+                    class="c41"
                     fill="none"
                     height="1.5rem"
                     viewBox="0 0 24 24"
@@ -1345,29 +1326,29 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="c43 c44 c45"
+                  class="c42 c43 c44"
                   id="folder-1-1-title"
                   overflow="hidden"
                 >
                   <button
-                    class="c46 c47"
+                    class="c45 c46"
                     type="button"
                   >
                     <h2
-                      class="c48 c49"
+                      class="c47 c48"
                     >
                       <span
-                        class="c50 c51"
+                        class="c49 c50"
                       >
                         Folder 1
                         <div
-                          class="c52"
+                          class="c51"
                         >
                           :
                         </div>
                       </span>
                       <span
-                        class="c53 c51"
+                        class="c52 c50"
                       >
                         1 folder, 1 asset
                       </span>
@@ -1375,10 +1356,10 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                   </button>
                 </div>
                 <div
-                  class="c54"
+                  class="c53"
                 >
                   <div
-                    class="c55 c56 c57 c58"
+                    class="c54 c55 c56 c57"
                     spacing="2"
                   />
                 </div>
@@ -1389,17 +1370,17 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="c59 c60"
+      class="c58 c59"
     >
       <div
         class="c17"
       >
         <div>
           <div
-            class="c61 c62"
+            class="c60 c61"
           >
             <div
-              class="c63 c64"
+              class="c62 c63"
             >
               <button
                 aria-disabled="false"
@@ -1407,21 +1388,21 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                 aria-haspopup="listbox"
                 aria-label="Entries per page"
                 aria-labelledby="select-1-label select-1-content"
-                class="c65"
+                class="c64"
                 id="select-1"
                 type="button"
               />
               <div
-                class="c66 c67"
+                class="c65 c66"
               >
                 <div
-                  class="c63"
+                  class="c62"
                 >
                   <div
-                    class="c68"
+                    class="c67"
                   >
                     <span
-                      class="c69"
+                      class="c68"
                       id="select-1-content"
                     >
                       10
@@ -1429,11 +1410,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c63"
+                  class="c62"
                 >
                   <button
                     aria-hidden="true"
-                    class="c70 c71 c72"
+                    class="c69 c70 c71"
                     tabindex="-1"
                     type="button"
                   >
@@ -1458,10 +1439,10 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="c73"
+          class="c72"
         >
           <label
-            class="c74"
+            class="c73"
             for="page-size"
           >
             Entries per page
@@ -1470,20 +1451,20 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       </div>
       <nav
         aria-label="pagination"
-        class="sc-ekMTzm"
+        class="sc-ezDxBL"
       >
         <ul
-          class="c17 c75"
+          class="c17 c74"
         >
           <li>
             <button
               aria-disabled="true"
-              class="c76 c77"
+              class="c75 c76"
               tabindex="-1"
               type="button"
             >
               <div
-                class="c52"
+                class="c51"
               >
                 Go to previous page
               </div>
@@ -1504,17 +1485,17 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           </li>
           <li>
             <button
-              class="c78 c79"
+              class="c77 c78"
               type="button"
             >
               <div
-                class="c52"
+                class="c51"
               >
                 Go to page 1
               </div>
               <span
                 aria-hidden="true"
-                class="c80 c81"
+                class="c79 c80"
               >
                 1
               </span>
@@ -1523,12 +1504,12 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           <li>
             <button
               aria-disabled="true"
-              class="c76 c77"
+              class="c75 c76"
               tabindex="-1"
               type="button"
             >
               <div
-                class="c52"
+                class="c51"
               >
                 Go to next page
               </div>
@@ -1552,7 +1533,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c82"
+    class="c81"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap b/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap
index 729a913dbf9..31f46728152 100644
--- a/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap
+++ b/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap
@@ -334,7 +334,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   cursor: pointer;
 }
 
-.c4:hover .sc-dTBbbW {
+.c4:hover .sc-uWCef {
   opacity: 1;
 }
 
@@ -395,15 +395,11 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                   class="c7 c8 c9 c10"
                   spacing="2"
                 >
-                  <div
-                    class=""
-                  >
-                    <input
-                      aria-labelledby="card-1-title"
-                      class="c11"
-                      type="checkbox"
-                    />
-                  </div>
+                  <input
+                    aria-labelledby="card-1-title"
+                    class="c11"
+                    type="checkbox"
+                  />
                 </div>
               </div>
               <div
@@ -487,15 +483,11 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                   class="c7 c8 c9 c10"
                   spacing="2"
                 >
-                  <div
-                    class=""
-                  >
-                    <input
-                      aria-labelledby="card-2-title"
-                      class="c11"
-                      type="checkbox"
-                    />
-                  </div>
+                  <input
+                    aria-labelledby="card-2-title"
+                    class="c11"
+                    type="checkbox"
+                  />
                 </div>
               </div>
               <div
@@ -607,15 +599,11 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                   class="c7 c8 c9 c10"
                   spacing="2"
                 >
-                  <div
-                    class=""
-                  >
-                    <input
-                      aria-labelledby="card-3-title"
-                      class="c11"
-                      type="checkbox"
-                    />
-                  </div>
+                  <input
+                    aria-labelledby="card-3-title"
+                    class="c11"
+                    type="checkbox"
+                  />
                 </div>
               </div>
               <div
diff --git a/packages/core/upload/admin/src/components/BulkMoveDialog/tests/__snapshots__/BulkMoveDialog.test.js.snap b/packages/core/upload/admin/src/components/BulkMoveDialog/tests/__snapshots__/BulkMoveDialog.test.js.snap
index 9fb983ff35f..abf4c34877b 100644
--- a/packages/core/upload/admin/src/components/BulkMoveDialog/tests/__snapshots__/BulkMoveDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/BulkMoveDialog/tests/__snapshots__/BulkMoveDialog.test.js.snap
@@ -13,7 +13,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c15 {
+.c14 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -27,12 +27,12 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c16 > * {
+.c15 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c16 > * + * {
+.c15 > * + * {
   margin-top: 4px;
 }
 
@@ -43,14 +43,14 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c28 {
+.c27 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c25 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -64,21 +64,21 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c25 svg {
+.c24 svg {
   height: 12px;
   width: 12px;
 }
 
-.c25 svg > g,
-.c25 svg path {
+.c24 svg > g,
+.c24 svg path {
   fill: #ffffff;
 }
 
-.c25[aria-disabled='true'] {
+.c24[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c25:after {
+.c24:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -93,11 +93,11 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c25:focus-visible {
+.c24:focus-visible {
   outline: none;
 }
 
-.c25:focus-visible:after {
+.c24:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -108,7 +108,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c26 {
+.c25 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -120,7 +120,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c26 .sc-cfJLRR {
+.c25 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -131,56 +131,56 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c26 .c27 {
+.c25 .c26 {
   color: #ffffff;
 }
 
-.c26[aria-disabled='true'] {
+.c25[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c26[aria-disabled='true'] .c27 {
+.c25[aria-disabled='true'] .c26 {
   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 .c27 {
+.c25[aria-disabled='true']:active .c26 {
   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 {
   background-color: #f6f6f9;
 }
 
-.c26:active {
+.c25:active {
   background-color: #eaeaef;
 }
 
-.c26 .c27 {
+.c25 .c26 {
   color: #32324d;
 }
 
-.c26 svg > g,
-.c26 svg path {
+.c25 svg > g,
+.c25 svg path {
   fill: #32324d;
 }
 
-.c29 {
+.c28 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -190,7 +190,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c29 .sc-cfJLRR {
+.c28 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -201,58 +201,58 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c29 .c27 {
+.c28 .c26 {
   color: #ffffff;
 }
 
-.c29[aria-disabled='true'] {
+.c28[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c29[aria-disabled='true'] .c27 {
+.c28[aria-disabled='true'] .c26 {
   color: #666687;
 }
 
-.c29[aria-disabled='true'] svg > g,
-.c29[aria-disabled='true'] svg path {
+.c28[aria-disabled='true'] svg > g,
+.c28[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c29[aria-disabled='true']:active {
+.c28[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c29[aria-disabled='true']:active .c27 {
+.c28[aria-disabled='true']:active .c26 {
   color: #666687;
 }
 
-.c29[aria-disabled='true']:active svg > g,
-.c29[aria-disabled='true']:active svg path {
+.c28[aria-disabled='true']:active svg > g,
+.c28[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c29:hover {
+.c28:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c29:active {
+.c28:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c29 svg > g,
-.c29 svg path {
+.c28 svg > g,
+.c28 svg path {
   fill: #ffffff;
 }
 
-.c19 {
+.c18 {
   padding-right: 12px;
 }
 
-.c18 {
+.c17 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -266,30 +266,30 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c17 {
+.c16 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c20 {
+.c19 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c20 svg {
+.c19 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c20 svg path {
+.c19 svg path {
   fill: #666687;
 }
 
-.c21 {
+.c20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -298,17 +298,17 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c21 svg {
+.c20 svg {
   width: 0.5625rem;
 }
 
-.c13 {
+.c12 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c14 {
+.c13 {
   grid-column: span 12;
   max-width: 100%;
 }
@@ -327,7 +327,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   padding-left: 20px;
 }
 
-.c11 {
+.c10 {
   padding: 32px;
 }
 
@@ -373,7 +373,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c23 {
+.c22 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -387,18 +387,6 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c10 {
-  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;
-}
-
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -502,28 +490,28 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c22 {
+.c21 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c24 > * + * {
+.c23 > * + * {
   margin-left: 8px;
 }
 
-.c12 {
+.c11 {
   overflow: auto;
   max-height: 60vh;
 }
 
 @media (max-width:68.75rem) {
-  .c14 {
+  .c13 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c14 {
+  .c13 {
     grid-column: span 12;
   }
 }
@@ -587,18 +575,12 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
                   </h2>
                   <button
                     aria-disabled="false"
+                    aria-label="Close the modal"
                     class="c8 c9"
                     type="button"
                   >
-                    <span
-                      class="c10"
-                    >
-                      Close the modal
-                    </span>
                     <svg
-                      aria-hidden="true"
                       fill="none"
-                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -613,27 +595,27 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c11 c12"
+                class="c10 c11"
               >
                 <div
-                  class="c13"
+                  class="c12"
                 >
                   <div
-                    class="c14"
+                    class="c13"
                   >
                     <div
                       class=""
                     >
                       <div
-                        class="c15 c16"
+                        class="c14 c15"
                         spacing="1"
                       >
                         <label
-                          class="c17"
+                          class="c16"
                           for="folder-destination"
                         >
                           <div
-                            class="c18"
+                            class="c17"
                           >
                             Location
                           </div>
@@ -680,7 +662,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
                               class=" css-1hb7zxy-IndicatorsContainer"
                             >
                               <button
-                                class="c19 c20 c21"
+                                class="c18 c19 c20"
                                 type="button"
                               >
                                 <svg
@@ -712,37 +694,37 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c4 c22"
+                class="c4 c21"
               >
                 <div
                   class="c6"
                 >
                   <div
-                    class="c23 c24"
+                    class="c22 c23"
                   >
                     <button
                       aria-disabled="false"
-                      class="c25 c26"
+                      class="c24 c25"
                       name="cancel"
                       type="button"
                     >
                       <span
-                        class="c27 c28"
+                        class="c26 c27"
                       >
                         Cancel
                       </span>
                     </button>
                   </div>
                   <div
-                    class="c23 c24"
+                    class="c22 c23"
                   >
                     <button
                       aria-disabled="false"
-                      class="c25 c29"
+                      class="c24 c28"
                       type="submit"
                     >
                       <span
-                        class="c27 c28"
+                        class="c26 c27"
                       >
                         Move
                       </span>
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 25380f4f5df..e772cce9cc6 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
@@ -13,17 +13,17 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c17 {
+.c16 {
   padding-right: 12px;
   padding-left: 12px;
 }
 
-.c26 {
+.c24 {
   padding-right: 8px;
   padding-left: 8px;
 }
 
-.c18 {
+.c17 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -41,7 +41,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   justify-content: flex-end;
 }
 
-.c20 {
+.c19 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -55,7 +55,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c27 {
+.c25 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -69,30 +69,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c28 > * {
+.c26 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c28 > * + * {
+.c26 > * + * {
   margin-top: 12px;
 }
 
-.c30 > * {
+.c28 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c30 > * + * {
+.c28 > * + * {
   margin-top: 4px;
 }
 
-.c21 > * {
+.c20 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c21 > * + * {
+.c20 > * + * {
   margin-left: 4px;
 }
 
@@ -103,7 +103,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c31 {
+.c29 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -111,20 +111,20 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   text-transform: uppercase;
 }
 
-.c32 {
+.c30 {
   color: #4a4a6a;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c53 {
+.c51 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c50 {
+.c48 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -138,21 +138,21 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c50 svg {
+.c48 svg {
   height: 12px;
   width: 12px;
 }
 
-.c50 svg > g,
-.c50 svg path {
+.c48 svg > g,
+.c48 svg path {
   fill: #ffffff;
 }
 
-.c50[aria-disabled='true'] {
+.c48[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c50:after {
+.c48:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -167,11 +167,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c50:focus-visible {
+.c48:focus-visible {
   outline: none;
 }
 
-.c50:focus-visible:after {
+.c48:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -182,7 +182,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c51 {
+.c49 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -194,7 +194,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c51 .sc-cfJLRR {
+.c49 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -205,56 +205,56 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c51 .c52 {
+.c49 .c50 {
   color: #ffffff;
 }
 
-.c51[aria-disabled='true'] {
+.c49[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c51[aria-disabled='true'] .c52 {
+.c49[aria-disabled='true'] .c50 {
   color: #666687;
 }
 
-.c51[aria-disabled='true'] svg > g,
-.c51[aria-disabled='true'] svg path {
+.c49[aria-disabled='true'] svg > g,
+.c49[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c51[aria-disabled='true']:active {
+.c49[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c51[aria-disabled='true']:active .c52 {
+.c49[aria-disabled='true']:active .c50 {
   color: #666687;
 }
 
-.c51[aria-disabled='true']:active svg > g,
-.c51[aria-disabled='true']:active svg path {
+.c49[aria-disabled='true']:active svg > g,
+.c49[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c51:hover {
+.c49:hover {
   background-color: #f6f6f9;
 }
 
-.c51:active {
+.c49:active {
   background-color: #eaeaef;
 }
 
-.c51 .c52 {
+.c49 .c50 {
   color: #32324d;
 }
 
-.c51 svg > g,
-.c51 svg path {
+.c49 svg > g,
+.c49 svg path {
   fill: #32324d;
 }
 
-.c54 {
+.c52 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -266,7 +266,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c54 .sc-cfJLRR {
+.c52 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -277,66 +277,66 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c54 .c52 {
+.c52 .c50 {
   color: #ffffff;
 }
 
-.c54[aria-disabled='true'] {
+.c52[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c54[aria-disabled='true'] .c52 {
+.c52[aria-disabled='true'] .c50 {
   color: #666687;
 }
 
-.c54[aria-disabled='true'] svg > g,
-.c54[aria-disabled='true'] svg path {
+.c52[aria-disabled='true'] svg > g,
+.c52[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c54[aria-disabled='true']:active {
+.c52[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c54[aria-disabled='true']:active .c52 {
+.c52[aria-disabled='true']:active .c50 {
   color: #666687;
 }
 
-.c54[aria-disabled='true']:active svg > g,
-.c54[aria-disabled='true']:active svg path {
+.c52[aria-disabled='true']:active svg > g,
+.c52[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c54:hover {
+.c52:hover {
   background-color: #ffffff;
 }
 
-.c54:active {
+.c52:active {
   background-color: #ffffff;
   border: 1px solid #4945ff;
 }
 
-.c54:active .c52 {
+.c52:active .c50 {
   color: #4945ff;
 }
 
-.c54:active svg > g,
-.c54:active svg path {
+.c52:active svg > g,
+.c52:active svg path {
   fill: #4945ff;
 }
 
-.c54 .c52 {
+.c52 .c50 {
   color: #271fe0;
 }
 
-.c54 svg > g,
-.c54 svg path {
+.c52 svg > g,
+.c52 svg path {
   fill: #271fe0;
 }
 
-.c55 {
+.c53 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -346,7 +346,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c55 .sc-cfJLRR {
+.c53 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -357,61 +357,61 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c55 .c52 {
+.c53 .c50 {
   color: #ffffff;
 }
 
-.c55[aria-disabled='true'] {
+.c53[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c55[aria-disabled='true'] .c52 {
+.c53[aria-disabled='true'] .c50 {
   color: #666687;
 }
 
-.c55[aria-disabled='true'] svg > g,
-.c55[aria-disabled='true'] svg path {
+.c53[aria-disabled='true'] svg > g,
+.c53[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c55[aria-disabled='true']:active {
+.c53[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c55[aria-disabled='true']:active .c52 {
+.c53[aria-disabled='true']:active .c50 {
   color: #666687;
 }
 
-.c55[aria-disabled='true']:active svg > g,
-.c55[aria-disabled='true']:active svg path {
+.c53[aria-disabled='true']:active svg > g,
+.c53[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c55:hover {
+.c53:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c55:active {
+.c53:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c55 svg > g,
-.c55 svg path {
+.c53 svg > g,
+.c53 svg path {
   fill: #ffffff;
 }
 
-.c15 {
+.c14 {
   background: #eaeaef;
   border-radius: 4px;
   border-color: #dcdce4;
   border: 1px solid #dcdce4;
 }
 
-.c29 {
+.c27 {
   background: #f6f6f9;
   padding-top: 16px;
   padding-right: 24px;
@@ -420,42 +420,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c43 {
+.c41 {
   padding-right: 12px;
 }
 
-.c56 {
+.c54 {
   background: #212134;
   padding: 8px;
   border-radius: 4px;
 }
 
-.c58 {
+.c56 {
   font-weight: 600;
   color: #ffffff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c24 {
-  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;
-}
-
-.c57 {
+.c55 {
   position: absolute;
   z-index: 4;
   display: none;
 }
 
-.c22 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -469,21 +457,21 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   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;
@@ -498,11 +486,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 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;
@@ -513,7 +501,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c23 {
+.c22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -530,30 +518,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   width: 2rem;
 }
 
-.c23 svg > g,
-.c23 svg path {
+.c22 svg > g,
+.c22 svg path {
   fill: #8e8ea9;
 }
 
-.c23:hover svg > g,
-.c23:hover svg path {
+.c22:hover svg > g,
+.c22:hover svg path {
   fill: #666687;
 }
 
-.c23:active svg > g,
-.c23:active svg path {
+.c22:active svg > g,
+.c22:active svg path {
   fill: #a5a5ba;
 }
 
-.c23[aria-disabled='true'] {
+.c22[aria-disabled='true'] {
   background-color: #eaeaef;
 }
 
-.c23[aria-disabled='true'] svg path {
+.c22[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c46 {
+.c44 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -565,7 +553,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c33 {
+.c31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -579,7 +567,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c36 {
+.c34 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -593,7 +581,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c37 {
+.c35 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -611,20 +599,20 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c35 {
+.c33 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c40 {
+.c38 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c39 {
+.c37 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -639,36 +627,36 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: inherit;
 }
 
-.c39::-webkit-input-placeholder {
+.c37::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c39::-moz-placeholder {
+.c37::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c39:-ms-input-placeholder {
+.c37:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c39::placeholder {
+.c37::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c39[aria-disabled='true'] {
+.c37[aria-disabled='true'] {
   color: inherit;
 }
 
-.c39:focus {
+.c37:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c38 {
+.c36 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -680,21 +668,21 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c38:focus-within {
+.c36:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c34 > * {
+.c32 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c34 > * + * {
+.c32 > * + * {
   margin-top: 4px;
 }
 
-.c42 {
+.c40 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -708,30 +696,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c41 {
+.c39 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c44 {
+.c42 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c44 svg {
+.c42 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c44 svg path {
+.c42 svg path {
   fill: #666687;
 }
 
-.c45 {
+.c43 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -740,7 +728,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c45 svg {
+.c43 svg {
   width: 0.5625rem;
 }
 
@@ -758,7 +746,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   padding-left: 20px;
 }
 
-.c11 {
+.c10 {
   padding: 32px;
 }
 
@@ -804,7 +792,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c48 {
+.c46 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -818,18 +806,6 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c10 {
-  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;
-}
-
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -933,66 +909,66 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c47 {
+.c45 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c49 > * + * {
+.c47 > * + * {
   margin-left: 8px;
 }
 
-.c12 {
+.c11 {
   overflow: auto;
   max-height: 60vh;
 }
 
-.c13 {
+.c12 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c14 {
+.c13 {
   grid-column: span 6;
   max-width: 100%;
 }
 
-.c16 {
+.c15 {
   position: relative;
 }
 
-.c25 {
+.c23 {
   position: relative;
   text-align: center;
   background: repeating-conic-gradient( #f6f6f9 0% 25%, transparent 0% 50% ) 50% / 20px 20px;
 }
 
-.c25 svg {
+.c23 svg {
   font-size: 3rem;
   height: 16.5rem;
 }
 
-.c25 img,
-.c25 video {
+.c23 img,
+.c23 video {
   margin: 0;
   padding: 0;
   max-height: 16.5rem;
   max-width: 100%;
 }
 
-.c19 {
+.c18 {
   height: 3.25rem;
 }
 
 @media (max-width:68.75rem) {
-  .c14 {
+  .c13 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c14 {
+  .c13 {
     grid-column: span 12;
   }
 }
@@ -1052,18 +1028,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                 </h2>
                 <button
                   aria-disabled="false"
+                  aria-label="Close the modal"
                   class="c8 c9"
                   type="button"
                 >
-                  <span
-                    class="c10"
-                  >
-                    Close the modal
-                  </span>
                   <svg
-                    aria-hidden="true"
                     fill="none"
-                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -1078,44 +1048,37 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="c11 c12"
+              class="c10 c11"
             >
               <div
-                class="c13"
+                class="c12"
               >
                 <div
-                  class="c14"
+                  class="c13"
                 >
                   <div
                     class=""
                   >
                     <div
-                      class="c15 c16"
+                      class="c14 c15"
                     >
                       <div
-                        class="c17 c18 c19"
+                        class="c16 c17 c18"
                       >
                         <div
-                          class="c20 c21"
+                          class="c19 c20"
                           spacing="1"
                         >
                           <span>
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-1"
-                              class="c22 c23"
+                              class="c21 c22"
                               tabindex="0"
                               type="button"
                             >
-                              <span
-                                class="c24"
-                              >
-                                Delete
-                              </span>
                               <svg
-                                aria-hidden="true"
                                 fill="none"
-                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 24"
                                 width="1em"
@@ -1132,19 +1095,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-3"
-                              class="c22 c23"
+                              class="c21 c22"
                               tabindex="0"
                               type="button"
                             >
-                              <span
-                                class="c24"
-                              >
-                                Download
-                              </span>
                               <svg
-                                aria-hidden="true"
                                 fill="none"
-                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 25"
                                 width="1em"
@@ -1163,19 +1119,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-5"
-                              class="c22 c23"
+                              class="c21 c22"
                               tabindex="0"
                               type="button"
                             >
-                              <span
-                                class="c24"
-                              >
-                                Copy link
-                              </span>
                               <svg
-                                aria-hidden="true"
                                 fill="none"
-                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 24"
                                 width="1em"
@@ -1196,19 +1145,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-7"
-                              class="c22 c23"
+                              class="c21 c22"
                               tabindex="0"
                               type="button"
                             >
-                              <span
-                                class="c24"
-                              >
-                                Crop
-                              </span>
                               <svg
-                                aria-hidden="true"
                                 fill="none"
-                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 24"
                                 width="1em"
@@ -1224,7 +1166,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c25"
+                        class="c23"
                       >
                         <img
                           alt="Screenshot 2.png"
@@ -1232,13 +1174,13 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         />
                       </div>
                       <div
-                        class="c26 c18 c19"
+                        class="c24 c17 c18"
                       />
                     </div>
                   </div>
                 </div>
                 <div
-                  class="c14"
+                  class="c13"
                 >
                   <div
                     class=""
@@ -1248,32 +1190,32 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                       novalidate=""
                     >
                       <div
-                        class="c27 c28"
+                        class="c25 c26"
                         spacing="3"
                       >
                         <div
-                          class="c29"
+                          class="c27"
                         >
                           <div
-                            class="c13"
+                            class="c12"
                           >
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c27 c30"
+                                  class="c25 c28"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c31"
+                                    class="c29"
                                   >
                                     Size
                                   </span>
                                   <span
-                                    class="c32"
+                                    class="c30"
                                   >
                                     102KB
                                   </span>
@@ -1281,22 +1223,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c27 c30"
+                                  class="c25 c28"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c31"
+                                    class="c29"
                                   >
                                     Dimensions
                                   </span>
                                   <span
-                                    class="c32"
+                                    class="c30"
                                   >
                                     1476✕780
                                   </span>
@@ -1304,22 +1246,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c27 c30"
+                                  class="c25 c28"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c31"
+                                    class="c29"
                                   >
                                     Date
                                   </span>
                                   <span
-                                    class="c32"
+                                    class="c30"
                                   >
                                     10/4/2021
                                   </span>
@@ -1327,22 +1269,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c27 c30"
+                                  class="c25 c28"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c31"
+                                    class="c29"
                                   >
                                     Extension
                                   </span>
                                   <span
-                                    class="c32"
+                                    class="c30"
                                   >
                                     png
                                   </span>
@@ -1350,22 +1292,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c27 c30"
+                                  class="c25 c28"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c31"
+                                    class="c29"
                                   >
                                     Asset ID
                                   </span>
                                   <span
-                                    class="c32"
+                                    class="c30"
                                   >
                                     8
                                   </span>
@@ -1377,26 +1319,26 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         <div>
                           <div>
                             <div
-                              class="c33 c34"
+                              class="c31 c32"
                               spacing="1"
                             >
                               <label
-                                class="c35"
+                                class="c33"
                                 for="textinput-1"
                               >
                                 <div
-                                  class="c36"
+                                  class="c34"
                                 >
                                   File name
                                 </div>
                               </label>
                               <div
-                                class="c37 c38"
+                                class="c35 c36"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
-                                  class="c39"
+                                  class="c37"
                                   id="textinput-1"
                                   name="name"
                                   value="Screenshot 2.png"
@@ -1408,34 +1350,34 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         <div>
                           <div>
                             <div
-                              class="c33 c34"
+                              class="c31 c32"
                               spacing="1"
                             >
                               <label
-                                class="c35"
+                                class="c33"
                                 for="textinput-2"
                               >
                                 <div
-                                  class="c36"
+                                  class="c34"
                                 >
                                   Alternative text
                                 </div>
                               </label>
                               <div
-                                class="c37 c38"
+                                class="c35 c36"
                               >
                                 <input
                                   aria-describedby="textinput-2-hint"
                                   aria-disabled="false"
                                   aria-invalid="false"
-                                  class="c39"
+                                  class="c37"
                                   id="textinput-2"
                                   name="alternativeText"
                                   value=""
                                 />
                               </div>
                               <p
-                                class="c40"
+                                class="c38"
                                 id="textinput-2-hint"
                               >
                                 This text will be displayed if the asset can’t be shown.
@@ -1446,26 +1388,26 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         <div>
                           <div>
                             <div
-                              class="c33 c34"
+                              class="c31 c32"
                               spacing="1"
                             >
                               <label
-                                class="c35"
+                                class="c33"
                                 for="textinput-3"
                               >
                                 <div
-                                  class="c36"
+                                  class="c34"
                                 >
                                   Caption
                                 </div>
                               </label>
                               <div
-                                class="c37 c38"
+                                class="c35 c36"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
-                                  class="c39"
+                                  class="c37"
                                   id="textinput-3"
                                   name="caption"
                                   value=""
@@ -1475,15 +1417,15 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                           </div>
                         </div>
                         <div
-                          class="c27 c30"
+                          class="c25 c28"
                           spacing="1"
                         >
                           <label
-                            class="c41"
+                            class="c39"
                             for="asset-folder"
                           >
                             <div
-                              class="c42"
+                              class="c40"
                             >
                               Location
                             </div>
@@ -1530,7 +1472,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                                 class=" css-1hb7zxy-IndicatorsContainer"
                               >
                                 <button
-                                  class="c43 c44 c45"
+                                  class="c41 c42 c43"
                                   type="button"
                                 >
                                   <svg
@@ -1559,7 +1501,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c46"
+                        class="c44"
                       >
                         <button
                           tabindex="-1"
@@ -1574,42 +1516,42 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="c4 c47"
+              class="c4 c45"
             >
               <div
                 class="c6"
               >
                 <div
-                  class="c48 c49"
+                  class="c46 c47"
                 >
                   <button
                     aria-disabled="false"
-                    class="c50 c51"
+                    class="c48 c49"
                     type="button"
                   >
                     <span
-                      class="c52 c53"
+                      class="c50 c51"
                     >
                       Cancel
                     </span>
                   </button>
                 </div>
                 <div
-                  class="c48 c49"
+                  class="c46 c47"
                 >
                   <button
                     aria-disabled="false"
-                    class="c50 c54"
+                    class="c48 c52"
                     type="button"
                   >
                     <span
-                      class="c52 c53"
+                      class="c50 c51"
                     >
                       Replace media
                     </span>
                   </button>
                   <div
-                    class="c46"
+                    class="c44"
                   >
                     <input
                       accept="image/png"
@@ -1621,11 +1563,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                   </div>
                   <button
                     aria-disabled="false"
-                    class="c50 c55"
+                    class="c48 c53"
                     type="button"
                   >
                     <span
-                      class="c52 c53"
+                      class="c50 c51"
                     >
                       Finish
                     </span>
@@ -1642,12 +1584,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c56 c57"
+      class="c54 c55"
       id="tooltip-1"
       role="tooltip"
     >
       <p
-        class="c58"
+        class="c56"
       >
         Delete
       </p>
@@ -1657,12 +1599,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c56 c57"
+      class="c54 c55"
       id="tooltip-3"
       role="tooltip"
     >
       <p
-        class="c58"
+        class="c56"
       >
         Download
       </p>
@@ -1672,12 +1614,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c56 c57"
+      class="c54 c55"
       id="tooltip-5"
       role="tooltip"
     >
       <p
-        class="c58"
+        class="c56"
       >
         Copy link
       </p>
@@ -1687,12 +1629,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c56 c57"
+      class="c54 c55"
       id="tooltip-7"
       role="tooltip"
     >
       <p
-        class="c58"
+        class="c56"
       >
         Crop
       </p>
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 25380f4f5df..e772cce9cc6 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
@@ -13,17 +13,17 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c17 {
+.c16 {
   padding-right: 12px;
   padding-left: 12px;
 }
 
-.c26 {
+.c24 {
   padding-right: 8px;
   padding-left: 8px;
 }
 
-.c18 {
+.c17 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -41,7 +41,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   justify-content: flex-end;
 }
 
-.c20 {
+.c19 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -55,7 +55,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c27 {
+.c25 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -69,30 +69,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c28 > * {
+.c26 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c28 > * + * {
+.c26 > * + * {
   margin-top: 12px;
 }
 
-.c30 > * {
+.c28 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c30 > * + * {
+.c28 > * + * {
   margin-top: 4px;
 }
 
-.c21 > * {
+.c20 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c21 > * + * {
+.c20 > * + * {
   margin-left: 4px;
 }
 
@@ -103,7 +103,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c31 {
+.c29 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -111,20 +111,20 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   text-transform: uppercase;
 }
 
-.c32 {
+.c30 {
   color: #4a4a6a;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c53 {
+.c51 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c50 {
+.c48 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -138,21 +138,21 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c50 svg {
+.c48 svg {
   height: 12px;
   width: 12px;
 }
 
-.c50 svg > g,
-.c50 svg path {
+.c48 svg > g,
+.c48 svg path {
   fill: #ffffff;
 }
 
-.c50[aria-disabled='true'] {
+.c48[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c50:after {
+.c48:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -167,11 +167,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c50:focus-visible {
+.c48:focus-visible {
   outline: none;
 }
 
-.c50:focus-visible:after {
+.c48:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -182,7 +182,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c51 {
+.c49 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -194,7 +194,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c51 .sc-cfJLRR {
+.c49 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -205,56 +205,56 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c51 .c52 {
+.c49 .c50 {
   color: #ffffff;
 }
 
-.c51[aria-disabled='true'] {
+.c49[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c51[aria-disabled='true'] .c52 {
+.c49[aria-disabled='true'] .c50 {
   color: #666687;
 }
 
-.c51[aria-disabled='true'] svg > g,
-.c51[aria-disabled='true'] svg path {
+.c49[aria-disabled='true'] svg > g,
+.c49[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c51[aria-disabled='true']:active {
+.c49[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c51[aria-disabled='true']:active .c52 {
+.c49[aria-disabled='true']:active .c50 {
   color: #666687;
 }
 
-.c51[aria-disabled='true']:active svg > g,
-.c51[aria-disabled='true']:active svg path {
+.c49[aria-disabled='true']:active svg > g,
+.c49[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c51:hover {
+.c49:hover {
   background-color: #f6f6f9;
 }
 
-.c51:active {
+.c49:active {
   background-color: #eaeaef;
 }
 
-.c51 .c52 {
+.c49 .c50 {
   color: #32324d;
 }
 
-.c51 svg > g,
-.c51 svg path {
+.c49 svg > g,
+.c49 svg path {
   fill: #32324d;
 }
 
-.c54 {
+.c52 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -266,7 +266,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c54 .sc-cfJLRR {
+.c52 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -277,66 +277,66 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c54 .c52 {
+.c52 .c50 {
   color: #ffffff;
 }
 
-.c54[aria-disabled='true'] {
+.c52[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c54[aria-disabled='true'] .c52 {
+.c52[aria-disabled='true'] .c50 {
   color: #666687;
 }
 
-.c54[aria-disabled='true'] svg > g,
-.c54[aria-disabled='true'] svg path {
+.c52[aria-disabled='true'] svg > g,
+.c52[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c54[aria-disabled='true']:active {
+.c52[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c54[aria-disabled='true']:active .c52 {
+.c52[aria-disabled='true']:active .c50 {
   color: #666687;
 }
 
-.c54[aria-disabled='true']:active svg > g,
-.c54[aria-disabled='true']:active svg path {
+.c52[aria-disabled='true']:active svg > g,
+.c52[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c54:hover {
+.c52:hover {
   background-color: #ffffff;
 }
 
-.c54:active {
+.c52:active {
   background-color: #ffffff;
   border: 1px solid #4945ff;
 }
 
-.c54:active .c52 {
+.c52:active .c50 {
   color: #4945ff;
 }
 
-.c54:active svg > g,
-.c54:active svg path {
+.c52:active svg > g,
+.c52:active svg path {
   fill: #4945ff;
 }
 
-.c54 .c52 {
+.c52 .c50 {
   color: #271fe0;
 }
 
-.c54 svg > g,
-.c54 svg path {
+.c52 svg > g,
+.c52 svg path {
   fill: #271fe0;
 }
 
-.c55 {
+.c53 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -346,7 +346,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c55 .sc-cfJLRR {
+.c53 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -357,61 +357,61 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c55 .c52 {
+.c53 .c50 {
   color: #ffffff;
 }
 
-.c55[aria-disabled='true'] {
+.c53[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c55[aria-disabled='true'] .c52 {
+.c53[aria-disabled='true'] .c50 {
   color: #666687;
 }
 
-.c55[aria-disabled='true'] svg > g,
-.c55[aria-disabled='true'] svg path {
+.c53[aria-disabled='true'] svg > g,
+.c53[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c55[aria-disabled='true']:active {
+.c53[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c55[aria-disabled='true']:active .c52 {
+.c53[aria-disabled='true']:active .c50 {
   color: #666687;
 }
 
-.c55[aria-disabled='true']:active svg > g,
-.c55[aria-disabled='true']:active svg path {
+.c53[aria-disabled='true']:active svg > g,
+.c53[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c55:hover {
+.c53:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c55:active {
+.c53:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c55 svg > g,
-.c55 svg path {
+.c53 svg > g,
+.c53 svg path {
   fill: #ffffff;
 }
 
-.c15 {
+.c14 {
   background: #eaeaef;
   border-radius: 4px;
   border-color: #dcdce4;
   border: 1px solid #dcdce4;
 }
 
-.c29 {
+.c27 {
   background: #f6f6f9;
   padding-top: 16px;
   padding-right: 24px;
@@ -420,42 +420,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c43 {
+.c41 {
   padding-right: 12px;
 }
 
-.c56 {
+.c54 {
   background: #212134;
   padding: 8px;
   border-radius: 4px;
 }
 
-.c58 {
+.c56 {
   font-weight: 600;
   color: #ffffff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c24 {
-  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;
-}
-
-.c57 {
+.c55 {
   position: absolute;
   z-index: 4;
   display: none;
 }
 
-.c22 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -469,21 +457,21 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   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;
@@ -498,11 +486,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 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;
@@ -513,7 +501,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c23 {
+.c22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -530,30 +518,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   width: 2rem;
 }
 
-.c23 svg > g,
-.c23 svg path {
+.c22 svg > g,
+.c22 svg path {
   fill: #8e8ea9;
 }
 
-.c23:hover svg > g,
-.c23:hover svg path {
+.c22:hover svg > g,
+.c22:hover svg path {
   fill: #666687;
 }
 
-.c23:active svg > g,
-.c23:active svg path {
+.c22:active svg > g,
+.c22:active svg path {
   fill: #a5a5ba;
 }
 
-.c23[aria-disabled='true'] {
+.c22[aria-disabled='true'] {
   background-color: #eaeaef;
 }
 
-.c23[aria-disabled='true'] svg path {
+.c22[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c46 {
+.c44 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -565,7 +553,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c33 {
+.c31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -579,7 +567,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c36 {
+.c34 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -593,7 +581,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c37 {
+.c35 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -611,20 +599,20 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c35 {
+.c33 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c40 {
+.c38 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c39 {
+.c37 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -639,36 +627,36 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: inherit;
 }
 
-.c39::-webkit-input-placeholder {
+.c37::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c39::-moz-placeholder {
+.c37::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c39:-ms-input-placeholder {
+.c37:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c39::placeholder {
+.c37::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c39[aria-disabled='true'] {
+.c37[aria-disabled='true'] {
   color: inherit;
 }
 
-.c39:focus {
+.c37:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c38 {
+.c36 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -680,21 +668,21 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c38:focus-within {
+.c36:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c34 > * {
+.c32 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c34 > * + * {
+.c32 > * + * {
   margin-top: 4px;
 }
 
-.c42 {
+.c40 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -708,30 +696,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c41 {
+.c39 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c44 {
+.c42 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c44 svg {
+.c42 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c44 svg path {
+.c42 svg path {
   fill: #666687;
 }
 
-.c45 {
+.c43 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -740,7 +728,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c45 svg {
+.c43 svg {
   width: 0.5625rem;
 }
 
@@ -758,7 +746,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   padding-left: 20px;
 }
 
-.c11 {
+.c10 {
   padding: 32px;
 }
 
@@ -804,7 +792,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c48 {
+.c46 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -818,18 +806,6 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c10 {
-  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;
-}
-
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -933,66 +909,66 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c47 {
+.c45 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c49 > * + * {
+.c47 > * + * {
   margin-left: 8px;
 }
 
-.c12 {
+.c11 {
   overflow: auto;
   max-height: 60vh;
 }
 
-.c13 {
+.c12 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c14 {
+.c13 {
   grid-column: span 6;
   max-width: 100%;
 }
 
-.c16 {
+.c15 {
   position: relative;
 }
 
-.c25 {
+.c23 {
   position: relative;
   text-align: center;
   background: repeating-conic-gradient( #f6f6f9 0% 25%, transparent 0% 50% ) 50% / 20px 20px;
 }
 
-.c25 svg {
+.c23 svg {
   font-size: 3rem;
   height: 16.5rem;
 }
 
-.c25 img,
-.c25 video {
+.c23 img,
+.c23 video {
   margin: 0;
   padding: 0;
   max-height: 16.5rem;
   max-width: 100%;
 }
 
-.c19 {
+.c18 {
   height: 3.25rem;
 }
 
 @media (max-width:68.75rem) {
-  .c14 {
+  .c13 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c14 {
+  .c13 {
     grid-column: span 12;
   }
 }
@@ -1052,18 +1028,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                 </h2>
                 <button
                   aria-disabled="false"
+                  aria-label="Close the modal"
                   class="c8 c9"
                   type="button"
                 >
-                  <span
-                    class="c10"
-                  >
-                    Close the modal
-                  </span>
                   <svg
-                    aria-hidden="true"
                     fill="none"
-                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -1078,44 +1048,37 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="c11 c12"
+              class="c10 c11"
             >
               <div
-                class="c13"
+                class="c12"
               >
                 <div
-                  class="c14"
+                  class="c13"
                 >
                   <div
                     class=""
                   >
                     <div
-                      class="c15 c16"
+                      class="c14 c15"
                     >
                       <div
-                        class="c17 c18 c19"
+                        class="c16 c17 c18"
                       >
                         <div
-                          class="c20 c21"
+                          class="c19 c20"
                           spacing="1"
                         >
                           <span>
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-1"
-                              class="c22 c23"
+                              class="c21 c22"
                               tabindex="0"
                               type="button"
                             >
-                              <span
-                                class="c24"
-                              >
-                                Delete
-                              </span>
                               <svg
-                                aria-hidden="true"
                                 fill="none"
-                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 24"
                                 width="1em"
@@ -1132,19 +1095,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-3"
-                              class="c22 c23"
+                              class="c21 c22"
                               tabindex="0"
                               type="button"
                             >
-                              <span
-                                class="c24"
-                              >
-                                Download
-                              </span>
                               <svg
-                                aria-hidden="true"
                                 fill="none"
-                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 25"
                                 width="1em"
@@ -1163,19 +1119,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-5"
-                              class="c22 c23"
+                              class="c21 c22"
                               tabindex="0"
                               type="button"
                             >
-                              <span
-                                class="c24"
-                              >
-                                Copy link
-                              </span>
                               <svg
-                                aria-hidden="true"
                                 fill="none"
-                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 24"
                                 width="1em"
@@ -1196,19 +1145,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-7"
-                              class="c22 c23"
+                              class="c21 c22"
                               tabindex="0"
                               type="button"
                             >
-                              <span
-                                class="c24"
-                              >
-                                Crop
-                              </span>
                               <svg
-                                aria-hidden="true"
                                 fill="none"
-                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 24"
                                 width="1em"
@@ -1224,7 +1166,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c25"
+                        class="c23"
                       >
                         <img
                           alt="Screenshot 2.png"
@@ -1232,13 +1174,13 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         />
                       </div>
                       <div
-                        class="c26 c18 c19"
+                        class="c24 c17 c18"
                       />
                     </div>
                   </div>
                 </div>
                 <div
-                  class="c14"
+                  class="c13"
                 >
                   <div
                     class=""
@@ -1248,32 +1190,32 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                       novalidate=""
                     >
                       <div
-                        class="c27 c28"
+                        class="c25 c26"
                         spacing="3"
                       >
                         <div
-                          class="c29"
+                          class="c27"
                         >
                           <div
-                            class="c13"
+                            class="c12"
                           >
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c27 c30"
+                                  class="c25 c28"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c31"
+                                    class="c29"
                                   >
                                     Size
                                   </span>
                                   <span
-                                    class="c32"
+                                    class="c30"
                                   >
                                     102KB
                                   </span>
@@ -1281,22 +1223,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c27 c30"
+                                  class="c25 c28"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c31"
+                                    class="c29"
                                   >
                                     Dimensions
                                   </span>
                                   <span
-                                    class="c32"
+                                    class="c30"
                                   >
                                     1476✕780
                                   </span>
@@ -1304,22 +1246,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c27 c30"
+                                  class="c25 c28"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c31"
+                                    class="c29"
                                   >
                                     Date
                                   </span>
                                   <span
-                                    class="c32"
+                                    class="c30"
                                   >
                                     10/4/2021
                                   </span>
@@ -1327,22 +1269,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c27 c30"
+                                  class="c25 c28"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c31"
+                                    class="c29"
                                   >
                                     Extension
                                   </span>
                                   <span
-                                    class="c32"
+                                    class="c30"
                                   >
                                     png
                                   </span>
@@ -1350,22 +1292,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c27 c30"
+                                  class="c25 c28"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c31"
+                                    class="c29"
                                   >
                                     Asset ID
                                   </span>
                                   <span
-                                    class="c32"
+                                    class="c30"
                                   >
                                     8
                                   </span>
@@ -1377,26 +1319,26 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         <div>
                           <div>
                             <div
-                              class="c33 c34"
+                              class="c31 c32"
                               spacing="1"
                             >
                               <label
-                                class="c35"
+                                class="c33"
                                 for="textinput-1"
                               >
                                 <div
-                                  class="c36"
+                                  class="c34"
                                 >
                                   File name
                                 </div>
                               </label>
                               <div
-                                class="c37 c38"
+                                class="c35 c36"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
-                                  class="c39"
+                                  class="c37"
                                   id="textinput-1"
                                   name="name"
                                   value="Screenshot 2.png"
@@ -1408,34 +1350,34 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         <div>
                           <div>
                             <div
-                              class="c33 c34"
+                              class="c31 c32"
                               spacing="1"
                             >
                               <label
-                                class="c35"
+                                class="c33"
                                 for="textinput-2"
                               >
                                 <div
-                                  class="c36"
+                                  class="c34"
                                 >
                                   Alternative text
                                 </div>
                               </label>
                               <div
-                                class="c37 c38"
+                                class="c35 c36"
                               >
                                 <input
                                   aria-describedby="textinput-2-hint"
                                   aria-disabled="false"
                                   aria-invalid="false"
-                                  class="c39"
+                                  class="c37"
                                   id="textinput-2"
                                   name="alternativeText"
                                   value=""
                                 />
                               </div>
                               <p
-                                class="c40"
+                                class="c38"
                                 id="textinput-2-hint"
                               >
                                 This text will be displayed if the asset can’t be shown.
@@ -1446,26 +1388,26 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         <div>
                           <div>
                             <div
-                              class="c33 c34"
+                              class="c31 c32"
                               spacing="1"
                             >
                               <label
-                                class="c35"
+                                class="c33"
                                 for="textinput-3"
                               >
                                 <div
-                                  class="c36"
+                                  class="c34"
                                 >
                                   Caption
                                 </div>
                               </label>
                               <div
-                                class="c37 c38"
+                                class="c35 c36"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
-                                  class="c39"
+                                  class="c37"
                                   id="textinput-3"
                                   name="caption"
                                   value=""
@@ -1475,15 +1417,15 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                           </div>
                         </div>
                         <div
-                          class="c27 c30"
+                          class="c25 c28"
                           spacing="1"
                         >
                           <label
-                            class="c41"
+                            class="c39"
                             for="asset-folder"
                           >
                             <div
-                              class="c42"
+                              class="c40"
                             >
                               Location
                             </div>
@@ -1530,7 +1472,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                                 class=" css-1hb7zxy-IndicatorsContainer"
                               >
                                 <button
-                                  class="c43 c44 c45"
+                                  class="c41 c42 c43"
                                   type="button"
                                 >
                                   <svg
@@ -1559,7 +1501,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c46"
+                        class="c44"
                       >
                         <button
                           tabindex="-1"
@@ -1574,42 +1516,42 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="c4 c47"
+              class="c4 c45"
             >
               <div
                 class="c6"
               >
                 <div
-                  class="c48 c49"
+                  class="c46 c47"
                 >
                   <button
                     aria-disabled="false"
-                    class="c50 c51"
+                    class="c48 c49"
                     type="button"
                   >
                     <span
-                      class="c52 c53"
+                      class="c50 c51"
                     >
                       Cancel
                     </span>
                   </button>
                 </div>
                 <div
-                  class="c48 c49"
+                  class="c46 c47"
                 >
                   <button
                     aria-disabled="false"
-                    class="c50 c54"
+                    class="c48 c52"
                     type="button"
                   >
                     <span
-                      class="c52 c53"
+                      class="c50 c51"
                     >
                       Replace media
                     </span>
                   </button>
                   <div
-                    class="c46"
+                    class="c44"
                   >
                     <input
                       accept="image/png"
@@ -1621,11 +1563,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                   </div>
                   <button
                     aria-disabled="false"
-                    class="c50 c55"
+                    class="c48 c53"
                     type="button"
                   >
                     <span
-                      class="c52 c53"
+                      class="c50 c51"
                     >
                       Finish
                     </span>
@@ -1642,12 +1584,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c56 c57"
+      class="c54 c55"
       id="tooltip-1"
       role="tooltip"
     >
       <p
-        class="c58"
+        class="c56"
       >
         Delete
       </p>
@@ -1657,12 +1599,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c56 c57"
+      class="c54 c55"
       id="tooltip-3"
       role="tooltip"
     >
       <p
-        class="c58"
+        class="c56"
       >
         Download
       </p>
@@ -1672,12 +1614,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c56 c57"
+      class="c54 c55"
       id="tooltip-5"
       role="tooltip"
     >
       <p
-        class="c58"
+        class="c56"
       >
         Copy link
       </p>
@@ -1687,12 +1629,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c56 c57"
+      class="c54 c55"
       id="tooltip-7"
       role="tooltip"
     >
       <p
-        class="c58"
+        class="c56"
       >
         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 c4a8d8cad5a..9ea204e1ed9 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
@@ -13,7 +13,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c22 {
+.c21 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -27,7 +27,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c36 {
+.c35 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -41,21 +41,21 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c23 > * {
+.c22 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c23 > * + * {
+.c22 > * + * {
   margin-top: 4px;
 }
 
-.c37 > * {
+.c36 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c37 > * + * {
+.c36 > * + * {
   margin-left: 8px;
 }
 
@@ -66,14 +66,14 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c35 {
+.c34 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c32 {
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -87,21 +87,21 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c32 svg {
+.c31 svg {
   height: 12px;
   width: 12px;
 }
 
-.c32 svg > g,
-.c32 svg path {
+.c31 svg > g,
+.c31 svg path {
   fill: #ffffff;
 }
 
-.c32[aria-disabled='true'] {
+.c31[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c32:after {
+.c31:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -116,11 +116,11 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c32:focus-visible {
+.c31:focus-visible {
   outline: none;
 }
 
-.c32:focus-visible:after {
+.c31:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -131,7 +131,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c33 {
+.c32 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -143,7 +143,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c33 .sc-cfJLRR {
+.c32 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -154,56 +154,56 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c33 .c34 {
+.c32 .c33 {
   color: #ffffff;
 }
 
-.c33[aria-disabled='true'] {
+.c32[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c33[aria-disabled='true'] .c34 {
+.c32[aria-disabled='true'] .c33 {
   color: #666687;
 }
 
-.c33[aria-disabled='true'] svg > g,
-.c33[aria-disabled='true'] svg path {
+.c32[aria-disabled='true'] svg > g,
+.c32[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c33[aria-disabled='true']:active {
+.c32[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c33[aria-disabled='true']:active .c34 {
+.c32[aria-disabled='true']:active .c33 {
   color: #666687;
 }
 
-.c33[aria-disabled='true']:active svg > g,
-.c33[aria-disabled='true']:active svg path {
+.c32[aria-disabled='true']:active svg > g,
+.c32[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c33:hover {
+.c32:hover {
   background-color: #f6f6f9;
 }
 
-.c33:active {
+.c32:active {
   background-color: #eaeaef;
 }
 
-.c33 .c34 {
+.c32 .c33 {
   color: #32324d;
 }
 
-.c33 svg > g,
-.c33 svg path {
+.c32 svg > g,
+.c32 svg path {
   fill: #32324d;
 }
 
-.c38 {
+.c37 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -213,7 +213,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c38 .sc-cfJLRR {
+.c37 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -224,58 +224,58 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c38 .c34 {
+.c37 .c33 {
   color: #ffffff;
 }
 
-.c38[aria-disabled='true'] {
+.c37[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c38[aria-disabled='true'] .c34 {
+.c37[aria-disabled='true'] .c33 {
   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 .c34 {
+.c37[aria-disabled='true']:active .c33 {
   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;
 }
 
-.c26 {
+.c25 {
   padding-right: 12px;
 }
 
-.c15 {
+.c14 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -289,7 +289,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c18 {
+.c17 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -303,7 +303,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c19 {
+.c18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -321,14 +321,14 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c17 {
+.c16 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c21 {
+.c20 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -343,36 +343,36 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   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;
 }
 
-.c20 {
+.c19 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -384,21 +384,21 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c20:focus-within {
+.c19:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c16 > * {
+.c15 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c16 > * + * {
+.c15 > * + * {
   margin-top: 4px;
 }
 
-.c25 {
+.c24 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -412,30 +412,30 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c24 {
+.c23 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c27 {
+.c26 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c27 svg {
+.c26 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c27 svg path {
+.c26 svg path {
   fill: #666687;
 }
 
-.c28 {
+.c27 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -444,17 +444,17 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c28 svg {
+.c27 svg {
   width: 0.5625rem;
 }
 
-.c13 {
+.c12 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c14 {
+.c13 {
   grid-column: span 6;
   max-width: 100%;
 }
@@ -473,7 +473,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   padding-left: 20px;
 }
 
-.c11 {
+.c10 {
   padding: 32px;
 }
 
@@ -519,7 +519,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c30 {
+.c29 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -533,18 +533,6 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c10 {
-  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;
-}
-
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -648,28 +636,28 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c29 {
+.c28 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c31 > * + * {
+.c30 > * + * {
   margin-left: 8px;
 }
 
-.c12 {
+.c11 {
   overflow: auto;
   max-height: 60vh;
 }
 
 @media (max-width:68.75rem) {
-  .c14 {
+  .c13 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c14 {
+  .c13 {
     grid-column: span 12;
   }
 }
@@ -733,18 +721,12 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                   </h2>
                   <button
                     aria-disabled="false"
+                    aria-label="Close the modal"
                     class="c8 c9"
                     type="button"
                   >
-                    <span
-                      class="c10"
-                    >
-                      Close the modal
-                    </span>
                     <svg
-                      aria-hidden="true"
                       fill="none"
-                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -759,13 +741,13 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c11 c12"
+                class="c10 c11"
               >
                 <div
-                  class="c13"
+                  class="c12"
                 >
                   <div
-                    class="c14"
+                    class="c13"
                   >
                     <div
                       class=""
@@ -773,26 +755,26 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                       <div>
                         <div>
                           <div
-                            class="c15 c16"
+                            class="c14 c15"
                             spacing="1"
                           >
                             <label
-                              class="c17"
+                              class="c16"
                               for="textinput-1"
                             >
                               <div
-                                class="c18"
+                                class="c17"
                               >
                                 Name
                               </div>
                             </label>
                             <div
-                              class="c19 c20"
+                              class="c18 c19"
                             >
                               <input
                                 aria-disabled="false"
                                 aria-invalid="false"
-                                class="c21"
+                                class="c20"
                                 id="textinput-1"
                                 name="name"
                                 value=""
@@ -804,21 +786,21 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="c14"
+                    class="c13"
                   >
                     <div
                       class=""
                     >
                       <div
-                        class="c22 c23"
+                        class="c21 c22"
                         spacing="1"
                       >
                         <label
-                          class="c24"
+                          class="c23"
                           for="folder-parent"
                         >
                           <div
-                            class="c25"
+                            class="c24"
                           >
                             Location
                           </div>
@@ -865,7 +847,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                               class=" css-1hb7zxy-IndicatorsContainer"
                             >
                               <button
-                                class="c26 c27 c28"
+                                class="c25 c26 c27"
                                 type="button"
                               >
                                 <svg
@@ -897,42 +879,42 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c4 c29"
+                class="c4 c28"
               >
                 <div
                   class="c6"
                 >
                   <div
-                    class="c30 c31"
+                    class="c29 c30"
                   >
                     <button
                       aria-disabled="false"
-                      class="c32 c33"
+                      class="c31 c32"
                       name="cancel"
                       type="button"
                     >
                       <span
-                        class="c34 c35"
+                        class="c33 c34"
                       >
                         Cancel
                       </span>
                     </button>
                   </div>
                   <div
-                    class="c30 c31"
+                    class="c29 c30"
                   >
                     <div
-                      class="c36 c37"
+                      class="c35 c36"
                       spacing="2"
                     >
                       <button
                         aria-disabled="false"
-                        class="c32 c38"
+                        class="c31 c37"
                         name="submit"
                         type="submit"
                       >
                         <span
-                          class="c34 c35"
+                          class="c33 c34"
                         >
                           Create
                         </span>
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 e69104c1356..0e63e6128e3 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
@@ -254,15 +254,11 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
       <div
         class="c5"
       >
-        <div
-          class=""
-        >
-          <input
-            aria-labelledby="folder-3-title"
-            class="c6"
-            type="checkbox"
-          />
-        </div>
+        <input
+          aria-labelledby="folder-3-title"
+          class="c6"
+          type="checkbox"
+        />
       </div>
       <div
         class="c7"
diff --git a/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap b/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap
index 8f8945e568f..c0ccdbb31a4 100644
--- a/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap
+++ b/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap
@@ -176,7 +176,7 @@ exports[`SelectTree renders 1`] = `
           class=" css-1hb7zxy-IndicatorsContainer"
         >
           <button
-            class="sc-bvFjSx sc-jEItEs sc-kOJRsK flrKyR dEtywB bEaowF"
+            class="sc-bvFjSx sc-chKlql sc-jEItEs flrKyR iaRzgE kziwvZ"
             type="button"
           >
             <svg
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 721b7a9d535..4dc33f03667 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
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
-.c61 {
+.c59 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -13,12 +13,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   width: 1px;
 }
 
-.c48 {
+.c46 {
   width: 100%;
   height: 5.5rem;
 }
 
-.c11 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -36,7 +36,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   justify-content: space-between;
 }
 
-.c49 {
+.c47 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -54,7 +54,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   justify-content: center;
 }
 
-.c9 {
+.c8 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -68,16 +68,16 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   flex-direction: column;
 }
 
-.c10 > * {
+.c9 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c10 > * + * {
+.c9 > * + * {
   margin-top: 32px;
 }
 
-.c12 > * {
+.c11 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -89,27 +89,27 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   line-height: 1.43;
 }
 
-.c13 {
+.c12 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c14 {
+.c13 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c18 {
+.c17 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c15 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -123,21 +123,21 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   outline: none;
 }
 
-.c15 svg {
+.c14 svg {
   height: 12px;
   width: 12px;
 }
 
-.c15 svg > g,
-.c15 svg path {
+.c14 svg > g,
+.c14 svg path {
   fill: #ffffff;
 }
 
-.c15[aria-disabled='true'] {
+.c14[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c15:after {
+.c14:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -152,11 +152,11 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border: 2px solid transparent;
 }
 
-.c15:focus-visible {
+.c14:focus-visible {
   outline: none;
 }
 
-.c15:focus-visible:after {
+.c14:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -167,7 +167,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c16 {
+.c15 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -177,7 +177,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c16 .sc-cfJLRR {
+.c15 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -188,54 +188,54 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: center;
 }
 
-.c16 .c17 {
+.c15 .c16 {
   color: #ffffff;
 }
 
-.c16[aria-disabled='true'] {
+.c15[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c16[aria-disabled='true'] .c17 {
+.c15[aria-disabled='true'] .c16 {
   color: #666687;
 }
 
-.c16[aria-disabled='true'] svg > g,
-.c16[aria-disabled='true'] svg path {
+.c15[aria-disabled='true'] svg > g,
+.c15[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c16[aria-disabled='true']:active {
+.c15[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c16[aria-disabled='true']:active .c17 {
+.c15[aria-disabled='true']:active .c16 {
   color: #666687;
 }
 
-.c16[aria-disabled='true']:active svg > g,
-.c16[aria-disabled='true']:active svg path {
+.c15[aria-disabled='true']:active svg > g,
+.c15[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c16:hover {
+.c15:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c16:active {
+.c15:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c16 svg > g,
-.c16 svg path {
+.c15 svg > g,
+.c15 svg path {
   fill: #ffffff;
 }
 
-.c60 {
+.c58 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -247,7 +247,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   background: #ffffff;
 }
 
-.c60 .sc-cfJLRR {
+.c58 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -258,72 +258,60 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: center;
 }
 
-.c60 .c17 {
+.c58 .c16 {
   color: #ffffff;
 }
 
-.c60[aria-disabled='true'] {
+.c58[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c60[aria-disabled='true'] .c17 {
+.c58[aria-disabled='true'] .c16 {
   color: #666687;
 }
 
-.c60[aria-disabled='true'] svg > g,
-.c60[aria-disabled='true'] svg path {
+.c58[aria-disabled='true'] svg > g,
+.c58[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c60[aria-disabled='true']:active {
+.c58[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c60[aria-disabled='true']:active .c17 {
+.c58[aria-disabled='true']:active .c16 {
   color: #666687;
 }
 
-.c60[aria-disabled='true']:active svg > g,
-.c60[aria-disabled='true']:active svg path {
+.c58[aria-disabled='true']:active svg > g,
+.c58[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c60:hover {
+.c58:hover {
   background-color: #f6f6f9;
 }
 
-.c60:active {
+.c58:active {
   background-color: #eaeaef;
 }
 
-.c60 .c17 {
+.c58 .c16 {
   color: #32324d;
 }
 
-.c60 svg > g,
-.c60 svg path {
+.c58 svg > g,
+.c58 svg path {
   fill: #32324d;
 }
 
-.c39 {
+.c37 {
   padding-top: 4px;
 }
 
-.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;
-}
-
-.c31 {
+.c30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -337,21 +325,21 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   outline: none;
 }
 
-.c31 svg {
+.c30 svg {
   height: 12px;
   width: 12px;
 }
 
-.c31 svg > g,
-.c31 svg path {
+.c30 svg > g,
+.c30 svg path {
   fill: #ffffff;
 }
 
-.c31[aria-disabled='true'] {
+.c30[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c31:after {
+.c30:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -366,11 +354,11 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border: 2px solid transparent;
 }
 
-.c31:focus-visible {
+.c30:focus-visible {
   outline: none;
 }
 
-.c31:focus-visible:after {
+.c30:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -381,7 +369,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c32 {
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -398,30 +386,30 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   width: 2rem;
 }
 
-.c32 svg > g,
-.c32 svg path {
+.c31 svg > g,
+.c31 svg path {
   fill: #8e8ea9;
 }
 
-.c32:hover svg > g,
-.c32:hover svg path {
+.c31:hover svg > g,
+.c31:hover svg path {
   fill: #666687;
 }
 
-.c32:active svg > g,
-.c32:active svg path {
+.c31:active svg > g,
+.c31:active svg path {
   fill: #a5a5ba;
 }
 
-.c32[aria-disabled='true'] {
+.c31[aria-disabled='true'] {
   background-color: #eaeaef;
 }
 
-.c32[aria-disabled='true'] svg path {
+.c31[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c53 {
+.c51 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -441,7 +429,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   padding-left: 20px;
 }
 
-.c7 {
+.c6 {
   padding: 32px;
 }
 
@@ -463,7 +451,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   justify-content: space-between;
 }
 
-.c58 {
+.c56 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -477,18 +465,6 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   flex-direction: row;
 }
 
-.c6 {
-  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;
-}
-
 .c4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -592,32 +568,32 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c57 {
+.c55 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c59 > * + * {
+.c57 > * + * {
   margin-left: 8px;
 }
 
-.c8 {
+.c7 {
   overflow: auto;
   max-height: 60vh;
 }
 
-.c19 {
+.c18 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c20 {
+.c19 {
   grid-column: span 4;
   max-width: 100%;
 }
 
-.c21 {
+.c20 {
   background: #ffffff;
   border-radius: 4px;
   border-style: solid;
@@ -627,32 +603,32 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   height: 100%;
 }
 
-.c25 {
+.c24 {
   position: end;
 }
 
-.c36 {
+.c34 {
   padding-top: 8px;
   padding-right: 12px;
   padding-bottom: 8px;
   padding-left: 12px;
 }
 
-.c44 {
+.c42 {
   background: #f6f6f9;
   padding: 4px;
   border-radius: 4px;
   min-width: 20px;
 }
 
-.c54 {
+.c52 {
   background: #32324d;
   color: #ffffff;
   padding: 4px;
   border-radius: 4px;
 }
 
-.c23 {
+.c22 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -670,7 +646,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   justify-content: center;
 }
 
-.c26 {
+.c25 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -684,7 +660,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   flex-direction: row;
 }
 
-.c37 {
+.c35 {
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
@@ -698,7 +674,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   flex-direction: row;
 }
 
-.c45 {
+.c43 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -716,22 +692,22 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   justify-content: center;
 }
 
-.c27 > * {
+.c26 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c27 > * + * {
+.c26 > * + * {
   margin-left: 8px;
 }
 
-.c29 {
+.c28 {
   position: absolute;
   top: 12px;
   right: 12px;
 }
 
-.c35 {
+.c33 {
   margin: 0;
   padding: 0;
   max-height: 100%;
@@ -739,7 +715,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   object-fit: contain;
 }
 
-.c34 {
+.c32 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -755,20 +731,20 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-top-right-radius: 4px;
 }
 
-.c40 {
+.c38 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c41 {
+.c39 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c47 {
+.c45 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -776,82 +752,82 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   text-transform: uppercase;
 }
 
-.c56 {
+.c54 {
   color: #ffffff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c43 {
+.c41 {
   margin-left: auto;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c46 {
+.c44 {
   margin-left: 4px;
 }
 
-.c38 {
+.c36 {
   word-break: break-all;
 }
 
-.c24 {
+.c23 {
   position: relative;
   border-bottom: 1px solid #eaeaef;
 }
 
-.c55 {
+.c53 {
   position: absolute;
   bottom: 4px;
   right: 4px;
 }
 
-.c42 {
+.c40 {
   text-transform: uppercase;
 }
 
-.c30 {
+.c29 {
   opacity: 0;
 }
 
-.c30:focus-within {
+.c29:focus-within {
   opacity: 1;
 }
 
-.c22 {
+.c21 {
   cursor: pointer;
 }
 
-.c22:hover .c28 {
+.c21:hover .c27 {
   opacity: 1;
 }
 
-.c52 canvas,
-.c52 video {
+.c50 canvas,
+.c50 video {
   display: block;
   max-width: 100%;
   max-height: 5.5rem;
 }
 
-.c51 svg {
+.c49 svg {
   font-size: 3rem;
 }
 
-.c50 {
+.c48 {
   border-radius: 4px 4px 0 0;
   background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
 }
 
 @media (max-width:68.75rem) {
-  .c20 {
+  .c19 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c20 {
+  .c19 {
     grid-column: span;
   }
 }
@@ -872,18 +848,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
         </h2>
         <button
           aria-disabled="false"
+          aria-label="Close the modal"
           class="c4 c5"
           type="button"
         >
-          <span
-            class="c6"
-          >
-            Close the modal
-          </span>
           <svg
-            aria-hidden="true"
             fill="none"
-            focusable="false"
             height="1em"
             viewBox="0 0 24 24"
             width="1em"
@@ -898,36 +868,36 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
       </div>
     </div>
     <div
-      class="c7 c8"
+      class="c6 c7"
     >
       <div
-        class="c9 c10"
+        class="c8 c9"
         spacing="7"
       >
         <div
-          class="c11"
+          class="c10"
         >
           <div
-            class="c9 c12"
+            class="c8 c11"
           >
             <span
-              class="c13"
+              class="c12"
             >
               3 assets ready to upload
             </span>
             <span
-              class="c14"
+              class="c13"
             >
               Manage the assets before adding them to the Media Library
             </span>
           </div>
           <button
             aria-disabled="false"
-            class="c15 c16"
+            class="c14 c15"
             type="button"
           >
             <span
-              class="c17 c18"
+              class="c16 c17"
             >
               Add new assets
             </span>
@@ -937,45 +907,38 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
           class=""
         >
           <div
-            class="c19"
+            class="c18"
           >
             <div
-              class="c20"
+              class="c19"
             >
               <div
                 class=""
               >
                 <article
                   aria-labelledby="card-1-title"
-                  class="c21 c22"
+                  class="c20 c21"
                   height="100%"
                   role="button"
                   tabindex="-1"
                 >
                   <div
-                    class="c23 c24"
+                    class="c22 c23"
                   >
                     <div
-                      class="c25 c26 c27 c28 c29 c30"
+                      class="c24 c25 c26 c27 c28 c29"
                       spacing="2"
                     >
                       <span>
                         <button
                           aria-disabled="false"
                           aria-labelledby="tooltip-1"
-                          class="c31 c32"
+                          class="c30 c31"
                           tabindex="0"
                           type="button"
                         >
-                          <span
-                            class="c33"
-                          >
-                            Remove from selection
-                          </span>
                           <svg
-                            aria-hidden="true"
                             fill="none"
-                            focusable="false"
                             height="1em"
                             viewBox="0 0 24 24"
                             width="1em"
@@ -992,19 +955,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         <button
                           aria-disabled="false"
                           aria-labelledby="tooltip-3"
-                          class="c31 c32"
+                          class="c30 c31"
                           tabindex="0"
                           type="button"
                         >
-                          <span
-                            class="c33"
-                          >
-                            Edit
-                          </span>
                           <svg
-                            aria-hidden="true"
                             fill="none"
-                            focusable="false"
                             height="1em"
                             viewBox="0 0 24 24"
                             width="1em"
@@ -1021,40 +977,40 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       </span>
                     </div>
                     <div
-                      class="c34"
+                      class="c32"
                     >
                       <img
                         alt="something.jpg"
                         aria-hidden="true"
-                        class="c35"
+                        class="c33"
                         src="http://localhost:5000/CPAM.jpg"
                       />
                     </div>
                   </div>
                   <div
-                    class="c36"
+                    class="c34"
                   >
                     <div
-                      class="c37"
+                      class="c35"
                     >
                       <div
-                        class="c38"
+                        class="c36"
                       >
                         <div
-                          class="c39"
+                          class="c37"
                         >
                           <h2
-                            class="c40"
+                            class="c38"
                             id="card-1-title"
                           >
                             something.jpg
                           </h2>
                         </div>
                         <div
-                          class="c41"
+                          class="c39"
                         >
                           <span
-                            class="c42"
+                            class="c40"
                           >
                             jpg
                           </span>
@@ -1062,13 +1018,13 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c43"
+                        class="c41"
                       >
                         <div
-                          class="c44 c45 c46"
+                          class="c42 c43 c44"
                         >
                           <span
-                            class="c47"
+                            class="c45"
                           >
                             Image
                           </span>
@@ -1080,42 +1036,35 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
               </div>
             </div>
             <div
-              class="c20"
+              class="c19"
             >
               <div
                 class=""
               >
                 <article
                   aria-labelledby="card-2-title"
-                  class="c21 c22"
+                  class="c20 c21"
                   height="100%"
                   role="button"
                   tabindex="-1"
                 >
                   <div
-                    class="c23 c24"
+                    class="c22 c23"
                   >
                     <div
-                      class="c25 c26 c27 c28 c29 c30"
+                      class="c24 c25 c26 c27 c28 c29"
                       spacing="2"
                     >
                       <span>
                         <button
                           aria-disabled="false"
                           aria-labelledby="tooltip-5"
-                          class="c31 c32"
+                          class="c30 c31"
                           tabindex="0"
                           type="button"
                         >
-                          <span
-                            class="c33"
-                          >
-                            Remove from selection
-                          </span>
                           <svg
-                            aria-hidden="true"
                             fill="none"
-                            focusable="false"
                             height="1em"
                             viewBox="0 0 24 24"
                             width="1em"
@@ -1132,19 +1081,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         <button
                           aria-disabled="false"
                           aria-labelledby="tooltip-7"
-                          class="c31 c32"
+                          class="c30 c31"
                           tabindex="0"
                           type="button"
                         >
-                          <span
-                            class="c33"
-                          >
-                            Edit
-                          </span>
                           <svg
-                            aria-hidden="true"
                             fill="none"
-                            focusable="false"
                             height="1em"
                             viewBox="0 0 24 24"
                             width="1em"
@@ -1161,12 +1103,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       </span>
                     </div>
                     <div
-                      class="c48 c49 c50"
+                      class="c46 c47 c48"
                       height="5.5rem"
                       width="100%"
                     >
                       <span
-                        class="c51"
+                        class="c49"
                       >
                         <svg
                           aria-label="something.pdf"
@@ -1191,29 +1133,29 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                     </div>
                   </div>
                   <div
-                    class="c36"
+                    class="c34"
                   >
                     <div
-                      class="c37"
+                      class="c35"
                     >
                       <div
-                        class="c38"
+                        class="c36"
                       >
                         <div
-                          class="c39"
+                          class="c37"
                         >
                           <h2
-                            class="c40"
+                            class="c38"
                             id="card-2-title"
                           >
                             something.pdf
                           </h2>
                         </div>
                         <div
-                          class="c41"
+                          class="c39"
                         >
                           <span
-                            class="c42"
+                            class="c40"
                           >
                             pdf
                           </span>
@@ -1221,13 +1163,13 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c43"
+                        class="c41"
                       >
                         <div
-                          class="c44 c45 c46"
+                          class="c42 c43 c44"
                         >
                           <span
-                            class="c47"
+                            class="c45"
                           >
                             Doc
                           </span>
@@ -1239,42 +1181,35 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
               </div>
             </div>
             <div
-              class="c20"
+              class="c19"
             >
               <div
                 class=""
               >
                 <article
                   aria-labelledby="card-3-title"
-                  class="c21 c22"
+                  class="c20 c21"
                   height="100%"
                   role="button"
                   tabindex="-1"
                 >
                   <div
-                    class="c23 c24"
+                    class="c22 c23"
                   >
                     <div
-                      class="c25 c26 c27 c28 c29 c30"
+                      class="c24 c25 c26 c27 c28 c29"
                       spacing="2"
                     >
                       <span>
                         <button
                           aria-disabled="false"
                           aria-labelledby="tooltip-9"
-                          class="c31 c32"
+                          class="c30 c31"
                           tabindex="0"
                           type="button"
                         >
-                          <span
-                            class="c33"
-                          >
-                            Remove from selection
-                          </span>
                           <svg
-                            aria-hidden="true"
                             fill="none"
-                            focusable="false"
                             height="1em"
                             viewBox="0 0 24 24"
                             width="1em"
@@ -1291,19 +1226,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         <button
                           aria-disabled="false"
                           aria-labelledby="tooltip-11"
-                          class="c31 c32"
+                          class="c30 c31"
                           tabindex="0"
                           type="button"
                         >
-                          <span
-                            class="c33"
-                          >
-                            Edit
-                          </span>
                           <svg
-                            aria-hidden="true"
                             fill="none"
-                            focusable="false"
                             height="1em"
                             viewBox="0 0 24 24"
                             width="1em"
@@ -1320,13 +1248,13 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       </span>
                     </div>
                     <div
-                      class="c34"
+                      class="c32"
                     >
                       <div
-                        class="c26"
+                        class="c25"
                       >
                         <div
-                          class="c52"
+                          class="c50"
                         >
                           <figure
                             class=""
@@ -1340,7 +1268,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                               />
                             </video>
                             <figcaption
-                              class="c53"
+                              class="c51"
                             >
                               something.mp4
                             </figcaption>
@@ -1349,39 +1277,39 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       </div>
                     </div>
                     <time
-                      class="c54 c55"
+                      class="c52 c53"
                     >
                       <span
-                        class="c56"
+                        class="c54"
                       >
                         ...
                       </span>
                     </time>
                   </div>
                   <div
-                    class="c36"
+                    class="c34"
                   >
                     <div
-                      class="c37"
+                      class="c35"
                     >
                       <div
-                        class="c38"
+                        class="c36"
                       >
                         <div
-                          class="c39"
+                          class="c37"
                         >
                           <h2
-                            class="c40"
+                            class="c38"
                             id="card-3-title"
                           >
                             something.mp4
                           </h2>
                         </div>
                         <div
-                          class="c41"
+                          class="c39"
                         >
                           <span
-                            class="c42"
+                            class="c40"
                           >
                             mp4
                           </span>
@@ -1389,13 +1317,13 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c43"
+                        class="c41"
                       >
                         <div
-                          class="c44 c45 c46"
+                          class="c42 c43 c44"
                         >
                           <span
-                            class="c47"
+                            class="c45"
                           >
                             Video
                           </span>
@@ -1411,36 +1339,36 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
       </div>
     </div>
     <div
-      class="c0 c57"
+      class="c0 c55"
     >
       <div
         class="c2"
       >
         <div
-          class="c58 c59"
+          class="c56 c57"
         >
           <button
             aria-disabled="false"
-            class="c15 c60"
+            class="c14 c58"
             type="button"
           >
             <span
-              class="c17 c18"
+              class="c16 c17"
             >
               cancel
             </span>
           </button>
         </div>
         <div
-          class="c58 c59"
+          class="c56 c57"
         >
           <button
             aria-disabled="false"
-            class="c15 c16"
+            class="c14 c15"
             type="submit"
           >
             <span
-              class="c17 c18"
+              class="c16 c17"
             >
               Upload 3 assets to the library
             </span>
@@ -1450,7 +1378,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
     </div>
   </form>
   <div
-    class="c61"
+    class="c59"
   >
     <p
       aria-live="polite"
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 caf346ced3d..e3f111e7191 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
@@ -13,7 +13,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   width: 1px;
 }
 
-.c23 {
+.c22 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -31,7 +31,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   justify-content: center;
 }
 
-.c24 {
+.c23 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -52,21 +52,21 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   line-height: 1.43;
 }
 
-.c28 {
+.c27 {
   color: #666687;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
 }
 
-.c35 {
+.c34 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c32 {
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -80,21 +80,21 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   outline: none;
 }
 
-.c32 svg {
+.c31 svg {
   height: 12px;
   width: 12px;
 }
 
-.c32 svg > g,
-.c32 svg path {
+.c31 svg > g,
+.c31 svg path {
   fill: #ffffff;
 }
 
-.c32[aria-disabled='true'] {
+.c31[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c32:after {
+.c31:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -109,11 +109,11 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   border: 2px solid transparent;
 }
 
-.c32:focus-visible {
+.c31:focus-visible {
   outline: none;
 }
 
-.c32:focus-visible:after {
+.c31:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -124,7 +124,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c33 {
+.c32 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -134,7 +134,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c33 .sc-cfJLRR {
+.c32 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -145,54 +145,54 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   align-items: center;
 }
 
-.c33 .c34 {
+.c32 .c33 {
   color: #ffffff;
 }
 
-.c33[aria-disabled='true'] {
+.c32[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c33[aria-disabled='true'] .c34 {
+.c32[aria-disabled='true'] .c33 {
   color: #666687;
 }
 
-.c33[aria-disabled='true'] svg > g,
-.c33[aria-disabled='true'] svg path {
+.c32[aria-disabled='true'] svg > g,
+.c32[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c33[aria-disabled='true']:active {
+.c32[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c33[aria-disabled='true']:active .c34 {
+.c32[aria-disabled='true']:active .c33 {
   color: #666687;
 }
 
-.c33[aria-disabled='true']:active svg > g,
-.c33[aria-disabled='true']:active svg path {
+.c32[aria-disabled='true']:active svg > g,
+.c32[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c33:hover {
+.c32:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c33:active {
+.c32:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c33 svg > g,
-.c33 svg path {
+.c32 svg > g,
+.c32 svg path {
   fill: #ffffff;
 }
 
-.c39 {
+.c38 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -204,7 +204,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   background: #ffffff;
 }
 
-.c39 .sc-cfJLRR {
+.c38 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -215,69 +215,69 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   align-items: center;
 }
 
-.c39 .c34 {
+.c38 .c33 {
   color: #ffffff;
 }
 
-.c39[aria-disabled='true'] {
+.c38[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c39[aria-disabled='true'] .c34 {
+.c38[aria-disabled='true'] .c33 {
   color: #666687;
 }
 
-.c39[aria-disabled='true'] svg > g,
-.c39[aria-disabled='true'] svg path {
+.c38[aria-disabled='true'] svg > g,
+.c38[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c39[aria-disabled='true']:active {
+.c38[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c39[aria-disabled='true']:active .c34 {
+.c38[aria-disabled='true']:active .c33 {
   color: #666687;
 }
 
-.c39[aria-disabled='true']:active svg > g,
-.c39[aria-disabled='true']:active svg path {
+.c38[aria-disabled='true']:active svg > g,
+.c38[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c39:hover {
+.c38:hover {
   background-color: #f6f6f9;
 }
 
-.c39:active {
+.c38:active {
   background-color: #eaeaef;
 }
 
-.c39 .c34 {
+.c38 .c33 {
   color: #32324d;
 }
 
-.c39 svg > g,
-.c39 svg path {
+.c38 svg > g,
+.c38 svg path {
   fill: #32324d;
 }
 
-.c11 {
+.c10 {
   padding-top: 24px;
   padding-right: 40px;
   padding-left: 40px;
 }
 
-.c20 {
+.c19 {
   padding-top: 24px;
   padding-right: 40px;
   padding-bottom: 24px;
   padding-left: 40px;
 }
 
-.c21 {
+.c20 {
   background: #f6f6f9;
   padding-top: 64px;
   padding-bottom: 64px;
@@ -287,12 +287,12 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   position: relative;
 }
 
-.c27 {
+.c26 {
   padding-top: 12px;
   padding-bottom: 20px;
 }
 
-.c29 {
+.c28 {
   position: absolute;
   left: 0px;
   right: 0px;
@@ -302,7 +302,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   width: 100%;
 }
 
-.c31 {
+.c30 {
   position: relative;
 }
 
@@ -362,7 +362,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   justify-content: space-between;
 }
 
-.c37 {
+.c36 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -376,18 +376,6 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   flex-direction: row;
 }
 
-.c10 {
-  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;
-}
-
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -491,26 +479,26 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c36 {
+.c35 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c38 > * + * {
+.c37 > * + * {
   margin-left: 8px;
 }
 
-.c18 {
+.c17 {
   background: #eaeaef;
 }
 
-.c19 {
+.c18 {
   height: 1px;
   border: none;
   margin: 0;
 }
 
-.c15 {
+.c14 {
   color: #4945ff;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -518,7 +506,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   text-transform: uppercase;
 }
 
-.c17 {
+.c16 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -526,41 +514,41 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   text-transform: uppercase;
 }
 
-.c13 {
+.c12 {
   padding: 16px;
 }
 
-.c14 {
+.c13 {
   border-bottom: 2px solid #4945ff;
 }
 
-.c16 {
+.c15 {
   border-bottom: 2px solid transparent;
 }
 
-.c12[aria-disabled='true'] {
+.c11[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c25 {
+.c24 {
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
 }
 
-.c26 {
+.c25 {
   font-size: 3.75rem;
 }
 
-.c26 svg path {
+.c25 svg path {
   fill: #4945ff;
 }
 
-.c22 {
+.c21 {
   border-style: dashed;
 }
 
-.c30 {
+.c29 {
   opacity: 0;
   cursor: pointer;
 }
@@ -620,18 +608,12 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                 </h2>
                 <button
                   aria-disabled="false"
+                  aria-label="Close the modal"
                   class="c8 c9"
                   type="button"
                 >
-                  <span
-                    class="c10"
-                  >
-                    Close the modal
-                  </span>
                   <svg
-                    aria-hidden="true"
                     fill="none"
-                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -647,7 +629,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
             </div>
             <div>
               <div
-                class="c11"
+                class="c10"
               >
                 <div
                   aria-label="How do you want to upload your assets?"
@@ -657,17 +639,17 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                     aria-controls="tabgroup-1-0-tabpanel"
                     aria-disabled="false"
                     aria-selected="true"
-                    class="c12"
+                    class="c11"
                     id="tabgroup-1-0-tab"
                     role="tab"
                     tabindex="0"
                     type="button"
                   >
                     <div
-                      class="c13 c14"
+                      class="c12 c13"
                     >
                       <span
-                        class="c15"
+                        class="c14"
                       >
                         From computer
                       </span>
@@ -676,17 +658,17 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                   <button
                     aria-disabled="false"
                     aria-selected="false"
-                    class="c12"
+                    class="c11"
                     id="tabgroup-1-1-tab"
                     role="tab"
                     tabindex="-1"
                     type="button"
                   >
                     <div
-                      class="c13 c16"
+                      class="c12 c15"
                     >
                       <span
-                        class="c17"
+                        class="c16"
                       >
                         From url
                       </span>
@@ -694,7 +676,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                   </button>
                 </div>
                 <hr
-                  class="c18 c19"
+                  class="c17 c18"
                 />
               </div>
               <div>
@@ -706,20 +688,20 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                 >
                   <form>
                     <div
-                      class="c20"
+                      class="c19"
                     >
                       <label>
                         <div
-                          class="c21 c22"
+                          class="c20 c21"
                         >
                           <div
-                            class="c23"
+                            class="c22"
                           >
                             <div
-                              class="c24 c25"
+                              class="c23 c24"
                             >
                               <div
-                                class="c26"
+                                class="c25"
                               >
                                 <svg
                                   aria-hidden="true"
@@ -740,16 +722,16 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                                 </svg>
                               </div>
                               <div
-                                class="c27"
+                                class="c26"
                               >
                                 <span
-                                  class="c28"
+                                  class="c27"
                                 >
                                   Drag & Drop here or
                                 </span>
                               </div>
                               <input
-                                class="c29 c30"
+                                class="c28 c29"
                                 multiple=""
                                 name="files"
                                 tabindex="-1"
@@ -757,15 +739,15 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                                 width="100%"
                               />
                               <div
-                                class="c31"
+                                class="c30"
                               >
                                 <button
                                   aria-disabled="false"
-                                  class="c32 c33"
+                                  class="c31 c32"
                                   type="button"
                                 >
                                   <span
-                                    class="c34 c35"
+                                    class="c33 c34"
                                   >
                                     Browse files
                                   </span>
@@ -777,28 +759,28 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                       </label>
                     </div>
                     <div
-                      class="c4 c36"
+                      class="c4 c35"
                     >
                       <div
                         class="c6"
                       >
                         <div
-                          class="c37 c38"
+                          class="c36 c37"
                         >
                           <button
                             aria-disabled="false"
-                            class="c32 c39"
+                            class="c31 c38"
                             type="button"
                           >
                             <span
-                              class="c34 c35"
+                              class="c33 c34"
                             >
                               app.components.Button.cancel
                             </span>
                           </button>
                         </div>
                         <div
-                          class="c37 c38"
+                          class="c36 c37"
                         />
                       </div>
                     </div>
@@ -861,14 +843,14 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   line-height: 1.43;
 }
 
-.c34 {
+.c33 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c31 {
+.c30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -882,21 +864,21 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   outline: none;
 }
 
-.c31 svg {
+.c30 svg {
   height: 12px;
   width: 12px;
 }
 
-.c31 svg > g,
-.c31 svg path {
+.c30 svg > g,
+.c30 svg path {
   fill: #ffffff;
 }
 
-.c31[aria-disabled='true'] {
+.c30[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c31:after {
+.c30:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -911,11 +893,11 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   border: 2px solid transparent;
 }
 
-.c31:focus-visible {
+.c30:focus-visible {
   outline: none;
 }
 
-.c31:focus-visible:after {
+.c30:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -926,7 +908,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c35 {
+.c34 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -936,7 +918,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c35 .sc-cfJLRR {
+.c34 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -947,54 +929,54 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   align-items: center;
 }
 
-.c35 .c33 {
+.c34 .c32 {
   color: #ffffff;
 }
 
-.c35[aria-disabled='true'] {
+.c34[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c35[aria-disabled='true'] .c33 {
+.c34[aria-disabled='true'] .c32 {
   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 .c33 {
+.c34[aria-disabled='true']:active .c32 {
   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;
 }
 
-.c32 {
+.c31 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1006,7 +988,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   background: #ffffff;
 }
 
-.c32 .sc-cfJLRR {
+.c31 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1017,69 +999,69 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   align-items: center;
 }
 
-.c32 .c33 {
+.c31 .c32 {
   color: #ffffff;
 }
 
-.c32[aria-disabled='true'] {
+.c31[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c32[aria-disabled='true'] .c33 {
+.c31[aria-disabled='true'] .c32 {
   color: #666687;
 }
 
-.c32[aria-disabled='true'] svg > g,
-.c32[aria-disabled='true'] svg path {
+.c31[aria-disabled='true'] svg > g,
+.c31[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c32[aria-disabled='true']:active {
+.c31[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c32[aria-disabled='true']:active .c33 {
+.c31[aria-disabled='true']:active .c32 {
   color: #666687;
 }
 
-.c32[aria-disabled='true']:active svg > g,
-.c32[aria-disabled='true']:active svg path {
+.c31[aria-disabled='true']:active svg > g,
+.c31[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c32:hover {
+.c31:hover {
   background-color: #f6f6f9;
 }
 
-.c32:active {
+.c31:active {
   background-color: #eaeaef;
 }
 
-.c32 .c33 {
+.c31 .c32 {
   color: #32324d;
 }
 
-.c32 svg > g,
-.c32 svg path {
+.c31 svg > g,
+.c31 svg path {
   fill: #32324d;
 }
 
-.c10 {
+.c9 {
   padding-top: 24px;
   padding-right: 40px;
   padding-left: 40px;
 }
 
-.c19 {
+.c18 {
   padding-top: 24px;
   padding-right: 40px;
   padding-bottom: 24px;
   padding-left: 40px;
 }
 
-.c21 {
+.c20 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -1093,7 +1075,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   flex-direction: column;
 }
 
-.c23 {
+.c22 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1107,20 +1089,20 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   flex-direction: row;
 }
 
-.c24 {
+.c23 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c27 {
+.c26 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c25 {
+.c24 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   padding-left: 16px;
@@ -1136,12 +1118,12 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   transition-duration: 0.2s;
 }
 
-.c25:focus-within {
+.c24:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c26 {
+.c25 {
   display: block;
   width: 100%;
   font-weight: 400;
@@ -1152,45 +1134,45 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   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:focus-within {
+.c25:focus-within {
   outline: none;
 }
 
-.c22 > * {
+.c21 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c22 > * + * {
+.c21 > * + * {
   margin-top: 4px;
 }
 
-.c20 textarea {
+.c19 textarea {
   height: 5rem;
   line-height: 1.25rem;
 }
 
-.c20 textarea::-webkit-input-placeholder {
+.c19 textarea::-webkit-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1198,7 +1180,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   opacity: 1;
 }
 
-.c20 textarea::-moz-placeholder {
+.c19 textarea::-moz-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1206,7 +1188,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   opacity: 1;
 }
 
-.c20 textarea:-ms-input-placeholder {
+.c19 textarea:-ms-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1214,7 +1196,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   opacity: 1;
 }
 
-.c20 textarea::placeholder {
+.c19 textarea::placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1278,7 +1260,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   justify-content: space-between;
 }
 
-.c29 {
+.c28 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1292,18 +1274,6 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   flex-direction: row;
 }
 
-.c9 {
-  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;
-}
-
 .c7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1407,26 +1377,26 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c28 {
+.c27 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c30 > * + * {
+.c29 > * + * {
   margin-left: 8px;
 }
 
-.c17 {
+.c16 {
   background: #eaeaef;
 }
 
-.c18 {
+.c17 {
   height: 1px;
   border: none;
   margin: 0;
 }
 
-.c16 {
+.c15 {
   color: #4945ff;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -1434,7 +1404,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   text-transform: uppercase;
 }
 
-.c14 {
+.c13 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -1442,19 +1412,19 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   text-transform: uppercase;
 }
 
-.c12 {
+.c11 {
   padding: 16px;
 }
 
-.c15 {
+.c14 {
   border-bottom: 2px solid #4945ff;
 }
 
-.c13 {
+.c12 {
   border-bottom: 2px solid transparent;
 }
 
-.c11[aria-disabled='true'] {
+.c10[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
@@ -1486,18 +1456,12 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
                 </h2>
                 <button
                   aria-disabled="false"
+                  aria-label="Close the modal"
                   class="c7 c8"
                   type="button"
                 >
-                  <span
-                    class="c9"
-                  >
-                    Close the modal
-                  </span>
                   <svg
-                    aria-hidden="true"
                     fill="none"
-                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -1513,7 +1477,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
             </div>
             <div>
               <div
-                class="c10"
+                class="c9"
               >
                 <div
                   aria-label="How do you want to upload your assets?"
@@ -1522,17 +1486,17 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
                   <button
                     aria-disabled="false"
                     aria-selected="false"
-                    class="c11"
+                    class="c10"
                     id="tabgroup-8-0-tab"
                     role="tab"
                     tabindex="-1"
                     type="button"
                   >
                     <div
-                      class="c12 c13"
+                      class="c11 c12"
                     >
                       <span
-                        class="c14"
+                        class="c13"
                       >
                         From computer
                       </span>
@@ -1542,17 +1506,17 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
                     aria-controls="tabgroup-8-1-tabpanel"
                     aria-disabled="false"
                     aria-selected="true"
-                    class="c11"
+                    class="c10"
                     id="tabgroup-8-1-tab"
                     role="tab"
                     tabindex="0"
                     type="button"
                   >
                     <div
-                      class="c12 c15"
+                      class="c11 c14"
                     >
                       <span
-                        class="c16"
+                        class="c15"
                       >
                         From url
                       </span>
@@ -1560,7 +1524,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
                   </button>
                 </div>
                 <hr
-                  class="c17 c18"
+                  class="c16 c17"
                 />
               </div>
               <div>
@@ -1575,43 +1539,43 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
                     novalidate=""
                   >
                     <div
-                      class="c19"
+                      class="c18"
                     >
                       <div
-                        class="c20"
+                        class="c19"
                       >
                         <div>
                           <div
-                            class="c21 c22"
+                            class="c20 c21"
                             spacing="1"
                           >
                             <div
-                              class="c23"
+                              class="c22"
                             >
                               <label
-                                class="c24"
+                                class="c23"
                                 for="textarea-1"
                               >
                                 <div
-                                  class="c23"
+                                  class="c22"
                                 >
                                   URL
                                 </div>
                               </label>
                             </div>
                             <div
-                              class="c25"
+                              class="c24"
                             >
                               <textarea
                                 aria-describedby="textarea-1-hint"
                                 aria-invalid="false"
-                                class="c26"
+                                class="c25"
                                 id="textarea-1"
                                 name="urls"
                               />
                             </div>
                             <p
-                              class="c27"
+                              class="c26"
                               id="textarea-1-hint"
                             >
                               Separate your URL links by a carriage return.
@@ -1621,36 +1585,36 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
                       </div>
                     </div>
                     <div
-                      class="c3 c28"
+                      class="c3 c27"
                     >
                       <div
                         class="c5"
                       >
                         <div
-                          class="c29 c30"
+                          class="c28 c29"
                         >
                           <button
                             aria-disabled="false"
-                            class="c31 c32"
+                            class="c30 c31"
                             type="button"
                           >
                             <span
-                              class="c33 c34"
+                              class="c32 c33"
                             >
                               app.components.Button.cancel
                             </span>
                           </button>
                         </div>
                         <div
-                          class="c29 c30"
+                          class="c28 c29"
                         >
                           <button
                             aria-disabled="false"
-                            class="c31 c35"
+                            class="c30 c34"
                             type="submit"
                           >
                             <span
-                              class="c33 c34"
+                              class="c32 c33"
                             >
                               Next
                             </span>
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 e24ede314e7..45255e56ae4 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
@@ -190,18 +190,6 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         height: 0.25rem;
       }
 
-      .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;
-      }
-
       .c24 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -546,15 +534,8 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                             tabindex="-1"
                             type="button"
                           >
-                            <span
-                              class="c26"
-                            >
-                              Edit a template
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -624,15 +605,8 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                             tabindex="-1"
                             type="button"
                           >
-                            <span
-                              class="c26"
-                            >
-                              Edit a template
-                            </span>
                             <svg
-                              aria-hidden="true"
                               fill="none"
-                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
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 3bc5ee9b4f9..ac85e041efe 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
@@ -783,7 +783,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         border: 1px solid #4945ff;
       }
 
-      .c44:hover:not([aria-disabled='true']) .sc-igcPbY {
+      .c44:hover:not([aria-disabled='true']) .sc-eHyqeh {
         color: #271fe0;
       }
 
@@ -1161,7 +1161,7 @@ describe('Admin | containers | RoleCreatePage', () => {
                                   class="c55 c56"
                                 >
                                   <span
-                                    class="c55 sc-igcPbY c57"
+                                    class="c55 sc-eHyqeh c57"
                                     id="accordion-label-accordion-1"
                                   >
                                     Address
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 f823f287ee0..a5642e97e04 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
@@ -851,7 +851,7 @@ describe('Admin | containers | RoleEditPage', () => {
         border: 1px solid #4945ff;
       }
 
-      .c49:hover:not([aria-disabled='true']) .sc-igcPbY {
+      .c49:hover:not([aria-disabled='true']) .sc-eHyqeh {
         color: #271fe0;
       }
 
@@ -1263,7 +1263,7 @@ describe('Admin | containers | RoleEditPage', () => {
                                   class="c60 c61"
                                 >
                                   <span
-                                    class="c60 sc-igcPbY c62"
+                                    class="c60 sc-eHyqeh c62"
                                     id="accordion-label-accordion-1"
                                   >
                                     Address
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 17002ecafea..d9d36e30327 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
@@ -61,7 +61,7 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
     } = render(App);
 
     expect(firstChild).toMatchInlineSnapshot(`
-      .c28 {
+      .c27 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -73,13 +73,13 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         width: 1px;
       }
 
-      .c29 {
+      .c28 {
         -webkit-animation: gzYjWD 1s infinite linear;
         animation: gzYjWD 1s infinite linear;
         will-change: transform;
       }
 
-      .c26 {
+      .c25 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -238,29 +238,29 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         fill: #ffffff;
       }
 
-      .c35 {
+      .c34 {
         color: #666687;
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
       }
 
-      .c30 {
+      .c29 {
         background: #ffffff;
         padding: 64px;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c32 {
+      .c31 {
         padding-bottom: 24px;
       }
 
-      .c34 {
+      .c33 {
         padding-bottom: 16px;
       }
 
-      .c31 {
+      .c30 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -275,22 +275,10 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         text-align: center;
       }
 
-      .c33 svg {
+      .c32 svg {
         height: 5.5rem;
       }
 
-      .c23 {
-        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;
-      }
-
       .c21 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -389,15 +377,15 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         fill: #666687;
       }
 
-      .c24 {
+      .c23 {
         color: #32324d;
       }
 
-      .c25 path {
+      .c24 path {
         fill: #32324d;
       }
 
-      .c27 {
+      .c26 {
         height: 100vh;
       }
 
@@ -608,16 +596,9 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
                         tabindex="0"
                         type="button"
                       >
-                        <span
-                          class="c23"
-                        >
-                          Search
-                        </span>
                         <svg
-                          aria-hidden="true"
-                          class="c24 c25"
+                          class="c23 c24"
                           fill="none"
-                          focusable="false"
                           height="1em"
                           viewBox="0 0 24 24"
                           width="1em"
@@ -640,7 +621,7 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
               class="c16"
             >
               <div
-                class="c26 c27"
+                class="c25 c26"
                 data-testid="loader"
               >
                 <div
@@ -648,23 +629,23 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
                   role="alert"
                 >
                   <div
-                    class="c28"
+                    class="c27"
                   >
                     Loading content.
                   </div>
                   <img
                     aria-hidden="true"
-                    class="c29"
+                    class="c28"
                     src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2MyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQyLjU1NjMgMTEuOTgxNkMzOS40ODQgMTAuMzA3MSAzNS44NTc1IDkuMjkwOTcgMzIuMzM1NCA5LjEzNTIxQzI4LjY0NDMgOC45Mjg4OCAyNC44Mjk1IDkuNzIzMTggMjEuMzMzNiAxMS40MTI5QzIwLjkxMjMgMTEuNTkwMSAyMC41Mzc2IDExLjgxMDEgMjAuMTcyMiAxMi4wMjQ5TDIwLjAxMDggMTIuMTE3OUMxOS44Nzc0IDEyLjE5NTEgMTkuNzQ0MSAxMi4yNzI0IDE5LjYwOCAxMi4zNTM2QzE5LjMyNTMgMTIuNTE0NiAxOS4wNDkyIDEyLjY3NDQgMTguNzU0NCAxMi44NzkyQzE4LjU0NjMgMTMuMDMyOSAxOC4zMzk1IDEzLjE3NTkgMTguMTMwMSAxMy4zMjNDMTcuNTY1OCAxMy43MjA4IDE2Ljk4NjggMTQuMTMxNyAxNi40OTgzIDE0LjU5NzlDMTQuODQ3NiAxNS45NTI0IDEzLjU1NzEgMTcuNjA3NSAxMi42MDcxIDE4LjkyMTRDMTAuNDM2NSAyMi4xNTY2IDkuMDg2MjIgMjUuOTU2NyA4LjgwNzAyIDI5LjYxNDNMOC43NzY0IDMwLjE1ODhDOC43MzMyOCAzMC45MTk2IDguNjg0NzYgMzEuNzA1NyA4Ljc1MzUzIDMyLjQ1NTVDOC43NjY0OCAzMi42MDg0IDguNzY2MSAzMi43NjM4IDguNzc1MDYgMzIuOTE0QzguNzg4OTUgMzMuMjI5IDguODAxNTIgMzMuNTM3MyA4Ljg0NiAzMy44NjcyTDkuMDczOTYgMzUuNDIyMUM5LjA5NzU2IDM1LjU3NjQgOS4xMTk4IDM1Ljc0MTMgOS4xNjMzIDM1LjkyNjNMOS42NTkxOSAzNy45MjcyTDEwLjEzOCAzOS4yODIzQzEwLjI3MjkgMzkuNjY3MyAxMC40MTU4IDQwLjA3NTEgMTAuNiA0MC40M0MxMi4wMjkyIDQzLjYzNyAxNC4xNDI1IDQ2LjQ1NzggMTYuNzA2MyA0OC41ODVDMTkuMDUwOCA1MC41Mjk2IDIxLjgyNCA1Mi4wMDIzIDI0Ljc0OTEgNTIuODQ1MkwyNi4yMzcxIDUzLjIzNzZDMjYuMzc4MSA1My4yNjkzIDI2LjQ5MjYgNTMuMjg4OSAyNi42MDMxIDUzLjMwNThMMjYuNzc3NSA1My4zMzExQzI3LjAwNTIgNTMuMzYzNiAyNy4yMTk1IDUzLjM5ODYgMjcuNDQ0NSA1My40MzVDMjcuODU5OCA1My41MDc2IDI4LjI2NzIgNTMuNTc0OCAyOC43MDc5IDUzLjYxODNMMzAuNTY0MSA1My43MjI5QzMwLjk1MTYgNTMuNzI0OSAzMS4zMzUyIDUzLjcwNjggMzEuNzA4MSA1My42ODc0QzMxLjkwMzkgNTMuNjgxIDMyLjA5ODQgNTMuNjY4MSAzMi4zMjg4IDUzLjY2MkMzNC41MjUzIDUzLjQ3NzIgMzYuNTEwNiA1My4wNjM0IDM4LjA1MTYgNTIuNDY1MkMzOC4xNzY5IDUyLjQxNzEgMzguMzAwOCA1Mi4zNzk2IDM4LjQyMzQgNTIuMzM1NUMzOC42NzI3IDUyLjI0OTkgMzguOTI1OSA1Mi4xNjcgMzkuMTQzMiA1Mi4wNTk5TDQwLjg1OTEgNTEuMjYyNkw0Mi41NzAyIDUwLjI2NkM0Mi45MDA5IDUwLjA2ODIgNDMuMDIwNSA0OS42NDE0IDQyLjgyODIgNDkuMjk4NEM0Mi42MzIgNDguOTUyNiA0Mi4yMDM0IDQ4LjgzMDggNDEuODYzNCA0OS4wMTY2TDQwLjE3OTIgNDkuOTIxOEwzOC40OTk1IDUwLjYyMjRDMzguMzE2OSA1MC42OTUzIDM4LjEyMSA1MC43NTM0IDM3LjkyMjQgNTAuODE1NUMzNy43ODM4IDUwLjg0ODkgMzcuNjUxOCA1MC44OTgzIDM3LjUwMTIgNTAuOTQwOEMzNi4wNzExIDUxLjQzNSAzNC4yNDQ1IDUxLjc0MjUgMzIuMjQ0IDUxLjgzNDZDMzIuMDQ0MiA1MS44MzgzIDMxLjg0NzEgNTEuODM3OSAzMS42NTQgNTEuODQwM0MzMS4zMDUxIDUxLjg0MTQgMzAuOTYwMiA1MS44NDUxIDMwLjYzOTIgNTEuODMwNUwyOC45MTc3IDUxLjY3MjVDMjguNTQ3NiA1MS42MTkgMjguMTY5NSA1MS41NDI3IDI3Ljc4NDggNTEuNDY3OEMyNy41NjM5IDUxLjQxNjcgMjcuMzM3NiA1MS4zNzM3IDI3LjEyOTkgNTEuMzM3NEwyNi45NTI5IDUxLjI5ODdDMjYuODcwNCA1MS4yODM0IDI2Ljc3NzIgNTEuMjY2NyAyNi43MzMzIDUxLjI1NDNMMjUuMzQ2NiA1MC44MzIyQzIyLjc2NTEgNDkuOTc4OSAyMC4zMyA0OC41NzI5IDE4LjI5NDIgNDYuNzU1N0MxNi4xMDU2IDQ0Ljc5NTEgMTQuMzMzOSA0Mi4yMzM1IDEzLjE3NDIgMzkuMzU4MkMxMi4wMjc2IDM2LjYwMTMgMTEuNTk4OCAzMy4yNzkyIDExLjk3MTYgMzAuMDA3NkMxMi4zMTQ1IDI3LjAyMTMgMTMuMzk0OCAyNC4xNjM1IDE1LjE4NTggMjEuNTA4M0MxNS4zMDM0IDIxLjMzMzkgMTUuNDIxIDIxLjE1OTYgMTUuNTIxMiAyMS4wMTk2QzE2LjQzMDkgMTkuODY4OCAxNy41NDA4IDE4LjU1ODkgMTguOTQ4MyAxNy40OTZDMTkuMzM2NyAxNy4xNTI1IDE5Ljc4NjIgMTYuODU2IDIwLjI2MTEgMTYuNTQ3OEMyMC40ODc4IDE2LjQwMDkgMjAuNzA3OSAxNi4yNTUzIDIwLjg5MDcgMTYuMTMwNkMyMS4wOTc0IDE2LjAwNDggMjEuMzE4OCAxNS44ODMxIDIxLjUzNDggMTUuNzY5NEMyMS42NzYxIDE1LjY5NzUgMjEuODE2MiAxNS42MTkgMjEuOTM4OCAxNS41NTc2TDIyLjEwMDIgMTUuNDY0NkMyMi40MDAyIDE1LjMwMzcgMjIuNjc0OSAxNS4xNTQ2IDIyLjk5MDggMTUuMDM5TDI0LjExODYgMTQuNTcxNUMyNC4zMzk5IDE0LjQ4NDQgMjQuNTcxOCAxNC40MTU5IDI0Ljc5OTcgMTQuMzQ0N0MyNC45NTMgMTQuMjk4MiAyNS4wOTgyIDE0LjI2MzUgMjUuMjYzNSAxNC4yMDc4QzI1Ljc4NiAxNC4wMTgyIDI2LjMyODMgMTMuOTExMiAyNi45MTA1IDEzLjc5NjVDMjcuMTE3IDEzLjc1NzEgMjcuMzMwMiAxMy43MTYzIDI3LjU2MDggMTMuNjU4NUMyNy43NTUzIDEzLjYxMSAyNy45NzM3IDEzLjU5NjkgMjguMjA4MiAxMy41NzYyQzI4LjM2NCAxMy41NjAzIDI4LjUxNzIgMTMuNTQ4MyAyOC42MzE4IDEzLjUzMzNDMjguNzg3NiAxMy41MTczIDI4LjkzNDIgMTMuNTA2NiAyOS4wOTI3IDEzLjQ4NjdDMjkuMzI4NSAxMy40NTU1IDI5LjU0NTYgMTMuNDM0NyAyOS43NDk0IDEzLjQzMzdDMzAuMDIzNyAxMy40NCAzMC4yOTk0IDEzLjQzNTcgMzAuNTc3NyAxMy40Mjc0QzMxLjA4MTEgMTMuNDIxIDMxLjU1NzkgMTMuNDE5NyAzMi4wMzE4IDEzLjQ5MTRDMzQuOTY2NCAxMy43MzUyIDM3LjcxNDQgMTQuNjA4NSA0MC4yMDUyIDE2LjA4NjhDNDIuMzQ4OSAxNy4zNjU1IDQ0LjI3MTYgMTkuMTUyNSA0NS43NjA3IDIxLjI2NEM0Ny4wMjU1IDIzLjA2MjggNDcuOTc1NiAyNS4wNTI4IDQ4LjQ5MjggMjcuMDM5M0M0OC41NzIgMjcuMzE3NiA0OC42Mjk5IDI3LjU5MzEgNDguNjgzOSAyNy44NjU5QzQ4LjcxNTQgMjguMDQyOCA0OC43NTYzIDI4LjIxNDUgNDguNzg5MiAyOC4zNjM2QzQ4LjgwMzcgMjguNDU0MSA0OC44MjA4IDI4LjU0MDYgNDguODQ0NSAyOC42MjU4QzQ4Ljg3NDkgMjguNzQ0MyA0OC44OTg2IDI4Ljg2NCA0OC45MTE2IDI4Ljk2NTFMNDguOTc5MyAyOS42MDQ3QzQ4Ljk5MjIgMjkuNzc0OCA0OS4wMTMyIDI5LjkzMzEgNDkuMDMwMSAzMC4wODg3QzQ5LjA2NjggMzAuMzI2OCA0OS4wODg5IDMwLjU2MDggNDkuMDk2NCAzMC43NTYxTDQ5LjEwODMgMzEuOTAwMUM0OS4xMzEyIDMyLjMzMDcgNDkuMDg5IDMyLjcxMTYgNDkuMDUyMiAzMy4wNjczQzQ5LjAzODQgMzMuMjU5OCA0OS4wMTI2IDMzLjQ0NDMgNDkuMDEyMyAzMy41ODI0QzQ4Ljk5NjEgMzMuNjkyNiA0OC45OTE4IDMzLjc5MzUgNDguOTgzNiAzMy44OTE3QzQ4Ljk3NTMgMzQuMDA3MiA0OC45NzI0IDM0LjExNDggNDguOTQxNCAzNC4yNTU0TDQ4LjU0NDkgMzYuMzA1OUM0OC4zMTM0IDM3Ljg2MjMgNDkuMzc5MyAzOS4zMzY1IDUwLjk0ODggMzkuNTgyMkM1Mi4wNDE3IDM5Ljc2MDEgNTMuMTUzNiAzOS4yODE5IDUzLjc3MTEgMzguMzY2NEM1NC4wMDYzIDM4LjAxNzYgNTQuMTYwNCAzNy42MjU3IDU0LjIyMjcgMzcuMjA2NEw1NC41MjE3IDM1LjI1NzRDNTQuNTUxNCAzNS4wNzU2IDU0LjU3MiAzNC44MyA1NC41ODQ2IDM0LjU3OTFMNTQuNjAyOCAzNC4yMzM4QzU0LjYwOTggMzQuMDU5OCA1NC42MjIzIDMzLjg3NzkgNTQuNjM0NyAzMy42Nzg4QzU0LjY3MzQgMzMuMTA1MiA1NC43MTYzIDMyLjQ0NzkgNTQuNjYxOSAzMS44MDU4TDU0LjU4NjcgMzAuNDI4OUM1NC41NjIyIDMwLjA5NTIgNTQuNTA5NyAyOS43NiA1NC40NTU5IDI5LjQxODFDNTQuNDMxIDI5LjI1NzIgNTQuNDA0OCAyOS4wODk2IDU0LjM4MjYgMjguOTA3NEw1NC4yNjg3IDI4LjEwNEM1NC4yMzMyIDI3LjkyNDQgNTQuMTgwNCAyNy43MjczIDU0LjEzMjkgMjcuNTM5Nkw1NC4wNjQzIDI3LjI0NTRDNTQuMDE5NSAyNy4wNzEgNTMuOTc3MyAyNi44OTI3IDUzLjkzMzggMjYuNzA3NkM1My44NDU1IDI2LjMzMDkgNTMuNzQ3OSAyNS45NDIyIDUzLjYxMyAyNS41NTcxQzUyLjg0IDIzLjAyOTIgNTEuNTM4MyAyMC41MTk0IDQ5LjgzMzggMTguMjc5OUM0Ny44NTQ0IDE1LjY4MiA0NS4zMzMzIDEzLjUwODcgNDIuNTU2MyAxMS45ODE2WiIgZmlsbD0iIzQ5NDVGRiIvPgo8L3N2Zz4K"
                   />
                 </div>
               </div>
               <div
-                class="c30 c31"
+                class="c29 c30"
               >
                 <div
                   aria-hidden="true"
-                  class="c32 c33"
+                  class="c31 c32"
                 >
                   <svg
                     fill="none"
@@ -730,10 +711,10 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
                   </svg>
                 </div>
                 <div
-                  class="c34"
+                  class="c33"
                 >
                   <p
-                    class="c35"
+                    class="c34"
                   >
                     You don't have any roles yet.
                   </p>

From 971e179737a680e43b7f72ca39cc9d8c6a35edea Mon Sep 17 00:00:00 2001
From: Simone Taeggi <startae14@gmail.com>
Date: Thu, 17 Nov 2022 11:52:19 +0100
Subject: [PATCH 2/5] change implementation of tracking using didNavigate

---
 .../GuidedTour/Modal/tests/index.test.js      | 174 ++--
 .../admin/src/components/LeftMenu/index.js    |  27 +-
 .../__snapshots__/RelationInput.test.js.snap  |   4 +-
 .../components/Wysiwyg/tests/index.test.js    | 274 ++---
 .../pages/App/tests/index.test.js             | 161 +--
 .../tests/__snapshots__/index.test.js.snap    | 176 +++-
 .../tests/__snapshots__/index.test.js.snap    |  46 +-
 .../components/Login/tests/BaseLogin.test.js  |  26 +-
 .../components/Register/tests/index.test.js   |  26 +-
 .../tests/__snapshots__/index.test.js.snap    |  16 +-
 .../ApiTokens/ListView/tests/index.test.js    |  86 +-
 .../tests/__snapshots__/index.test.js.snap    | 521 ++++++----
 .../ApplicationInfosPage/tests/index.test.js  |  38 +-
 .../tests/__snapshots__/index.test.js.snap    |   2 +-
 .../pages/Users/ListPage/tests/index.test.js  | 384 +++----
 .../Webhooks/ListView/tests/index.test.js     | 130 ++-
 .../tests/__snapshots__/index.test.js.snap    | 307 +++---
 .../tests/__snapshots__/index.test.js.snap    | 972 ++++++++++++++----
 .../SearchURLQuery/tests/index.test.js        |  29 +-
 .../AssetCard/tests/DocAssetCard.test.js      |  93 +-
 .../AssetCard/tests/ImageAssetCard.test.js    |  89 +-
 .../SearchAsset/tests/index.test.js           |  21 +-
 .../tests/__snapshots__/index.test.js.snap    | 291 +++---
 .../__snapshots__/AssetList.test.js.snap      |  44 +-
 .../__snapshots__/BulkMoveDialog.test.js.snap | 168 +--
 .../EditAssetDialog.test.js.snap              | 478 +++++----
 .../tests/__snapshots__/index.test.js.snap    | 478 +++++----
 .../EditFolderDialog.test.js.snap             | 218 ++--
 .../__snapshots__/FolderCard.test.js.snap     |  14 +-
 .../__snapshots__/SelectTree.test.js.snap     |   2 +-
 .../PendingAssetStep.test.js.snap             | 444 ++++----
 .../UploadAssetDialog.test.js.snap            | 410 ++++----
 .../pages/EmailTemplates/tests/index.test.js  |  26 +
 .../Roles/CreatePage/tests/index.test.js      |   4 +-
 .../pages/Roles/EditPage/tests/index.test.js  |   4 +-
 .../pages/Roles/ListPage/tests/index.test.js  |  59 +-
 36 files changed, 3823 insertions(+), 2419 deletions(-)

diff --git a/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js b/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js
index 1d2350f4940..82f1f848a57 100644
--- a/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js
+++ b/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js
@@ -52,12 +52,12 @@ describe('<GuidedTourModal />', () => {
         padding: 40px;
       }
 
-      .c12 {
+      .c13 {
         margin-right: 40px;
         min-width: 1.875rem;
       }
 
-      .c17 {
+      .c18 {
         background: #4945ff;
         padding: 8px;
         border-radius: 50%;
@@ -101,7 +101,7 @@ describe('<GuidedTourModal />', () => {
         justify-content: flex-end;
       }
 
-      .c11 {
+      .c12 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -115,7 +115,7 @@ describe('<GuidedTourModal />', () => {
         flex-direction: row;
       }
 
-      .c15 {
+      .c16 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -129,7 +129,7 @@ describe('<GuidedTourModal />', () => {
         flex-direction: row;
       }
 
-      .c20 {
+      .c21 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -155,7 +155,7 @@ describe('<GuidedTourModal />', () => {
         width: 41.25rem;
       }
 
-      .c21 {
+      .c22 {
         padding-bottom: 24px;
       }
 
@@ -182,16 +182,16 @@ describe('<GuidedTourModal />', () => {
         margin-top: 40px;
       }
 
-      .c22 > * {
+      .c23 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c22 > * + * {
+      .c23 > * + * {
         margin-top: 16px;
       }
 
-      .c14 {
+      .c15 {
         color: #4945ff;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -199,14 +199,14 @@ describe('<GuidedTourModal />', () => {
         text-transform: uppercase;
       }
 
-      .c18 {
+      .c19 {
         font-weight: 500;
         color: #ffffff;
         font-size: 0.875rem;
         line-height: 1.43;
       }
 
-      .c19 {
+      .c20 {
         font-weight: 600;
         color: #32324d;
         font-weight: 600;
@@ -214,24 +214,24 @@ describe('<GuidedTourModal />', () => {
         line-height: 1.25;
       }
 
-      .c23 {
+      .c24 {
         color: #32324d;
         font-size: 0.875rem;
         line-height: 1.43;
       }
 
-      .c27 {
+      .c28 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c29 {
+      .c30 {
         padding-left: 8px;
       }
 
-      .c24 {
+      .c25 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -245,21 +245,21 @@ describe('<GuidedTourModal />', () => {
         outline: none;
       }
 
-      .c24 svg {
+      .c25 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c24 svg > g,
-      .c24 svg path {
+      .c25 svg > g,
+      .c25 svg path {
         fill: #ffffff;
       }
 
-      .c24[aria-disabled='true'] {
+      .c25[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c24:after {
+      .c25:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -274,11 +274,11 @@ describe('<GuidedTourModal />', () => {
         border: 2px solid transparent;
       }
 
-      .c24:focus-visible {
+      .c25:focus-visible {
         outline: none;
       }
 
-      .c24:focus-visible:after {
+      .c25:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -289,7 +289,7 @@ describe('<GuidedTourModal />', () => {
         border: 2px solid #4945ff;
       }
 
-      .c25 {
+      .c26 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -299,7 +299,7 @@ describe('<GuidedTourModal />', () => {
         border: 1px solid #4945ff;
       }
 
-      .c25 .c28 {
+      .c26 .c29 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -310,54 +310,54 @@ describe('<GuidedTourModal />', () => {
         align-items: center;
       }
 
-      .c25 .c26 {
+      .c26 .c27 {
         color: #ffffff;
       }
 
-      .c25[aria-disabled='true'] {
+      .c26[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c25[aria-disabled='true'] .c26 {
+      .c26[aria-disabled='true'] .c27 {
         color: #666687;
       }
 
-      .c25[aria-disabled='true'] svg > g,
-      .c25[aria-disabled='true'] svg path {
+      .c26[aria-disabled='true'] svg > g,
+      .c26[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c25[aria-disabled='true']:active {
+      .c26[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c25[aria-disabled='true']:active .c26 {
+      .c26[aria-disabled='true']:active .c27 {
         color: #666687;
       }
 
-      .c25[aria-disabled='true']:active svg > g,
-      .c25[aria-disabled='true']:active svg path {
+      .c26[aria-disabled='true']:active svg > g,
+      .c26[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c25:hover {
+      .c26:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c25:active {
+      .c26:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c25 svg > g,
-      .c25 svg path {
+      .c26 svg > g,
+      .c26 svg path {
         fill: #ffffff;
       }
 
-      .c30 {
+      .c31 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -369,7 +369,7 @@ describe('<GuidedTourModal />', () => {
         background: #ffffff;
       }
 
-      .c30 .c28 {
+      .c31 .c29 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -380,62 +380,62 @@ describe('<GuidedTourModal />', () => {
         align-items: center;
       }
 
-      .c30 .c26 {
+      .c31 .c27 {
         color: #ffffff;
       }
 
-      .c30[aria-disabled='true'] {
+      .c31[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c30[aria-disabled='true'] .c26 {
+      .c31[aria-disabled='true'] .c27 {
         color: #666687;
       }
 
-      .c30[aria-disabled='true'] svg > g,
-      .c30[aria-disabled='true'] svg path {
+      .c31[aria-disabled='true'] svg > g,
+      .c31[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c30[aria-disabled='true']:active {
+      .c31[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c30[aria-disabled='true']:active .c26 {
+      .c31[aria-disabled='true']:active .c27 {
         color: #666687;
       }
 
-      .c30[aria-disabled='true']:active svg > g,
-      .c30[aria-disabled='true']:active svg path {
+      .c31[aria-disabled='true']:active svg > g,
+      .c31[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c30:hover {
+      .c31:hover {
         background-color: #f6f6f9;
       }
 
-      .c30:active {
+      .c31:active {
         background-color: #eaeaef;
       }
 
-      .c30 .c26 {
+      .c31 .c27 {
         color: #32324d;
       }
 
-      .c30 svg > g,
-      .c30 svg path {
+      .c31 svg > g,
+      .c31 svg path {
         fill: #32324d;
       }
 
-      .c10 {
+      .c11 {
         padding-right: 32px;
         padding-bottom: 0px;
         padding-left: 32px;
       }
 
-      .c13 {
+      .c14 {
         background: #7b79ff;
         border-radius: 4px;
         width: 0.125rem;
@@ -443,11 +443,23 @@ describe('<GuidedTourModal />', () => {
         min-height: 1.5rem;
       }
 
-      .c16 {
+      .c17 {
         padding-top: 12px;
         padding-bottom: 12px;
       }
 
+      .c10 {
+        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;
+      }
+
       .c8 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -609,12 +621,18 @@ describe('<GuidedTourModal />', () => {
                 >
                   <button
                     aria-disabled="false"
-                    aria-label="Close"
                     class="c8 c9"
                     type="button"
                   >
+                    <span
+                      class="c10"
+                    >
+                      Close
+                    </span>
                     <svg
+                      aria-hidden="true"
                       fill="none"
+                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -628,42 +646,42 @@ describe('<GuidedTourModal />', () => {
                   </button>
                 </div>
                 <div
-                  class="c10"
+                  class="c11"
                 >
                   <div
-                    class="c11"
+                    class="c12"
                   >
                     <div
-                      class="c12 c2"
+                      class="c13 c2"
                     >
                       <div
-                        class="c13"
+                        class="c14"
                         height="100%"
                         width="0.125rem"
                       />
                     </div>
                     <span
-                      class="c14"
+                      class="c15"
                     >
                       3 steps to get started
                     </span>
                   </div>
                   <div
-                    class="c15"
+                    class="c16"
                   >
                     <div
-                      class="c12 c15"
+                      class="c13 c16"
                     >
                       <div
-                        class="c16"
+                        class="c17"
                       >
                         <div
-                          class="c17 c2"
+                          class="c18 c2"
                           height="1.875rem"
                           width="1.875rem"
                         >
                           <span
-                            class="c18"
+                            class="c19"
                           >
                             3
                           </span>
@@ -671,50 +689,50 @@ describe('<GuidedTourModal />', () => {
                       </div>
                     </div>
                     <h3
-                      class="c19"
+                      class="c20"
                       id="title"
                     >
                       🧠 Create a first Collection type
                     </h3>
                   </div>
                   <div
-                    class="c11"
+                    class="c12"
                   >
                     <div
-                      class="c12 c20"
+                      class="c13 c21"
                     />
                     <div
                       class=""
                     >
                       <div
-                        class="c21 c5 c22"
+                        class="c22 c5 c23"
                         spacing="4"
                       >
                         <span
-                          class="c23"
+                          class="c24"
                         >
                           Collection types help you manage several entries, Single types are suitable to manage only one entry.
                         </span>
                          
                         <span
-                          class="c23"
+                          class="c24"
                         >
                           Ex: For a Blog website, Articles would be a Collection type whereas a Homepage would be a Single type.
                         </span>
                       </div>
                       <button
                         aria-disabled="false"
-                        class="c24 c25"
+                        class="c25 c26"
                         type="button"
                       >
                         <span
-                          class="c26 c27"
+                          class="c27 c28"
                         >
                           Build a Collection type
                         </span>
                         <div
                           aria-hidden="true"
-                          class="c28 c29"
+                          class="c29 c30"
                         >
                           <svg
                             fill="none"
@@ -738,11 +756,11 @@ describe('<GuidedTourModal />', () => {
                 >
                   <button
                     aria-disabled="false"
-                    class="c24 c30"
+                    class="c25 c31"
                     type="button"
                   >
                     <span
-                      class="c26 c27"
+                      class="c27 c28"
                     >
                       Skip the tour
                     </span>
diff --git a/packages/core/admin/admin/src/components/LeftMenu/index.js b/packages/core/admin/admin/src/components/LeftMenu/index.js
index 029390a5ca1..ae4d1536b60 100644
--- a/packages/core/admin/admin/src/components/LeftMenu/index.js
+++ b/packages/core/admin/admin/src/components/LeftMenu/index.js
@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { NavLink as RouterNavLink } from 'react-router-dom';
+import { NavLink as RouterNavLink, useLocation } from 'react-router-dom';
 import { Divider } from '@strapi/design-system/Divider';
 import {
   MainNav,
@@ -60,6 +60,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   const { userDisplayName } = useAppInfos();
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
+  const { pathname } = useLocation();
 
   const initials = userDisplayName
     .split(' ')
@@ -83,6 +84,10 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
     }
   };
 
+  const handleClickOnLink = (destination = null) => {
+    trackUsage('didNavigate', { from: pathname, to: destination });
+  };
+
   const menuTitle = formatMessage({
     id: 'app.components.LeftMenu.navbrand.title',
     defaultMessage: 'Strapi Dashboard',
@@ -111,7 +116,12 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
       <Divider />
 
       <NavSections>
-        <NavLink as={RouterNavLink} to="/content-manager" icon={<Write />}>
+        <NavLink
+          as={RouterNavLink}
+          to="/content-manager"
+          icon={<Write />}
+          onClick={() => handleClickOnLink('/content-manager')}
+        >
           {formatMessage({ id: 'global.content-manager', defaultMessage: 'Content manager' })}
         </NavLink>
 
@@ -131,17 +141,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
                   to={link.to}
                   key={link.to}
                   icon={<Icon />}
-                  isActive={(match, location) => {
-                    if (match) {
-                      if (location.pathname === '/plugins/content-type-builder') {
-                        trackUsage(`didGoToCTB`);
-                      }
-
-                      return true;
-                    }
-
-                    return false;
-                  }}
+                  onClick={() => handleClickOnLink(link.to)}
                 >
                   {formatMessage(link.intlLabel)}
                 </NavLink>
@@ -169,6 +169,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
                   to={link.to}
                   key={link.to}
                   icon={<LinkIcon />}
+                  onClick={() => handleClickOnLink(link.to)}
                 >
                   {formatMessage(link.intlLabel)}
                 </NavLink>
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 a0fc628b915..e84fad66c79 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
@@ -227,11 +227,11 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   border: 1px solid #c6f0c2;
 }
 
-.c25 .sc-URNzB {
+.c25 .sc-dfhuTu {
   color: #0c75af;
 }
 
-.c33 .sc-URNzB {
+.c33 .sc-dfhuTu {
   color: #328048;
 }
 
diff --git a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js
index c6579c61099..a71fe1c8589 100644
--- a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js
@@ -62,7 +62,7 @@ describe('Wysiwyg render and actions buttons', () => {
         line-height: 1.33;
       }
 
-      .c39 {
+      .c40 {
         color: #32324d;
         font-size: 0.875rem;
         line-height: 1.43;
@@ -80,7 +80,7 @@ describe('Wysiwyg render and actions buttons', () => {
         padding: 8px;
       }
 
-      .c35 {
+      .c36 {
         background: #f6f6f9;
         padding: 8px;
         border-radius: 4px;
@@ -164,7 +164,7 @@ describe('Wysiwyg render and actions buttons', () => {
         flex-direction: row;
       }
 
-      .c36 {
+      .c37 {
         -webkit-align-items: flex-end;
         -webkit-box-align: flex-end;
         -ms-flex-align: flex-end;
@@ -182,14 +182,14 @@ describe('Wysiwyg render and actions buttons', () => {
         justify-content: flex-end;
       }
 
-      .c32 {
+      .c33 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c29 {
+      .c30 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -203,21 +203,21 @@ describe('Wysiwyg render and actions buttons', () => {
         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;
@@ -232,11 +232,11 @@ describe('Wysiwyg render and actions buttons', () => {
         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;
@@ -247,7 +247,7 @@ describe('Wysiwyg render and actions buttons', () => {
         border: 2px solid #4945ff;
       }
 
-      .c30 {
+      .c31 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -259,7 +259,7 @@ describe('Wysiwyg render and actions buttons', () => {
         background: #ffffff;
       }
 
-      .c30 .sc-dJjYzT {
+      .c31 .sc-dJjYzT {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -270,55 +270,67 @@ describe('Wysiwyg render and actions buttons', () => {
         align-items: center;
       }
 
-      .c30 .c31 {
+      .c31 .c32 {
         color: #ffffff;
       }
 
-      .c30[aria-disabled='true'] {
+      .c31[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c30[aria-disabled='true'] .c31 {
+      .c31[aria-disabled='true'] .c32 {
         color: #666687;
       }
 
-      .c30[aria-disabled='true'] svg > g,
-      .c30[aria-disabled='true'] svg path {
+      .c31[aria-disabled='true'] svg > g,
+      .c31[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c30[aria-disabled='true']:active {
+      .c31[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c30[aria-disabled='true']:active .c31 {
+      .c31[aria-disabled='true']:active .c32 {
         color: #666687;
       }
 
-      .c30[aria-disabled='true']:active svg > g,
-      .c30[aria-disabled='true']:active svg path {
+      .c31[aria-disabled='true']:active svg > g,
+      .c31[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c30:hover {
+      .c31:hover {
         background-color: #f6f6f9;
       }
 
-      .c30:active {
+      .c31:active {
         background-color: #eaeaef;
       }
 
-      .c30 .c31 {
+      .c31 .c32 {
         color: #32324d;
       }
 
-      .c30 svg > g,
-      .c30 svg path {
+      .c31 svg > g,
+      .c31 svg path {
         fill: #32324d;
       }
 
+      .c28 {
+        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;
+      }
+
       .c24 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -612,16 +624,16 @@ describe('Wysiwyg render and actions buttons', () => {
         width: 100%;
       }
 
-      .c34 {
+      .c35 {
         cursor: auto;
         height: 100%;
       }
 
-      .c34 .CodeMirror-placeholder {
+      .c35 .CodeMirror-placeholder {
         color: #666687 !important;
       }
 
-      .c34 .CodeMirror {
+      .c35 .CodeMirror {
         font-size: 0.875rem;
         height: 290px;
         color: #32324d;
@@ -629,22 +641,22 @@ describe('Wysiwyg render and actions buttons', () => {
         font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell, 'Open Sans','Helvetica Neue',sans-serif;
       }
 
-      .c34 .CodeMirror-lines {
+      .c35 .CodeMirror-lines {
         padding: 12px 16px;
       }
 
-      .c34 .CodeMirror-scrollbar-filler,
-      .c34 .CodeMirror-gutter-filler {
+      .c35 .CodeMirror-scrollbar-filler,
+      .c35 .CodeMirror-gutter-filler {
         background-color: #ffffff;
       }
 
-      .c34 .CodeMirror-gutters {
+      .c35 .CodeMirror-gutters {
         border-right: 1px solid #ddd;
         background-color: #f7f7f7;
         white-space: nowrap;
       }
 
-      .c34 .CodeMirror-linenumber {
+      .c35 .CodeMirror-linenumber {
         padding: 0 3px 0 5px;
         min-width: 20px;
         text-align: right;
@@ -652,31 +664,31 @@ describe('Wysiwyg render and actions buttons', () => {
         white-space: nowrap;
       }
 
-      .c34 .CodeMirror-guttermarker {
+      .c35 .CodeMirror-guttermarker {
         color: black;
       }
 
-      .c34 .CodeMirror-guttermarker-subtle {
+      .c35 .CodeMirror-guttermarker-subtle {
         color: #999;
       }
 
-      .c34 .CodeMirror-cursor {
+      .c35 .CodeMirror-cursor {
         border-left: 1px solid black;
         border-right: none;
         width: 0;
       }
 
-      .c34 .CodeMirror div.CodeMirror-secondarycursor {
+      .c35 .CodeMirror div.CodeMirror-secondarycursor {
         border-left: 1px solid silver;
       }
 
-      .c34 .cm-fat-cursor .CodeMirror-cursor {
+      .c35 .cm-fat-cursor .CodeMirror-cursor {
         width: auto;
         border: 0 !important;
         background: #7e7;
       }
 
-      .c34 .cm-fat-cursor-mark {
+      .c35 .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;
@@ -684,7 +696,7 @@ describe('Wysiwyg render and actions buttons', () => {
         animation: blink 1.06s steps(1) infinite;
       }
 
-      .c34 .cm-animate-fat-cursor {
+      .c35 .cm-animate-fat-cursor {
         width: auto;
         border: 0;
         -webkit-animation: blink 1.06s steps(1) infinite;
@@ -694,13 +706,13 @@ describe('Wysiwyg render and actions buttons', () => {
         background-color: #7e7;
       }
 
-      .c34 .cm-tab {
+      .c35 .cm-tab {
         display: inline-block;
         -webkit-text-decoration: inherit;
         text-decoration: inherit;
       }
 
-      .c34 .CodeMirror-rulers {
+      .c35 .CodeMirror-rulers {
         position: absolute;
         left: 0;
         right: 0;
@@ -709,59 +721,59 @@ describe('Wysiwyg render and actions buttons', () => {
         overflow: hidden;
       }
 
-      .c34 .CodeMirror-ruler {
+      .c35 .CodeMirror-ruler {
         border-left: 1px solid #ccc;
         top: 0;
         bottom: 0;
         position: absolute;
       }
 
-      .c34 .cm-header,
-      .c34 .cm-strong {
+      .c35 .cm-header,
+      .c35 .cm-strong {
         font-weight: bold;
       }
 
-      .c34 .cm-em {
+      .c35 .cm-em {
         font-style: italic;
       }
 
-      .c34 .cm-link {
+      .c35 .cm-link {
         -webkit-text-decoration: underline;
         text-decoration: underline;
       }
 
-      .c34 .cm-strikethrough {
+      .c35 .cm-strikethrough {
         -webkit-text-decoration: line-through;
         text-decoration: line-through;
       }
 
-      .c34 .CodeMirror-composing {
+      .c35 .CodeMirror-composing {
         border-bottom: 2px solid;
       }
 
-      .c34 div.CodeMirror span.CodeMirror-matchingbracket {
+      .c35 div.CodeMirror span.CodeMirror-matchingbracket {
         color: #0b0;
       }
 
-      .c34 div.CodeMirror span.CodeMirror-nonmatchingbracket {
+      .c35 div.CodeMirror span.CodeMirror-nonmatchingbracket {
         color: #a22;
       }
 
-      .c34 .CodeMirror-matchingtag {
+      .c35 .CodeMirror-matchingtag {
         background: rgba(255,150,0,0.3);
       }
 
-      .c34 .CodeMirror-activeline-background {
+      .c35 .CodeMirror-activeline-background {
         background: #e8f2ff;
       }
 
-      .c34 .CodeMirror {
+      .c35 .CodeMirror {
         position: relative;
         overflow: hidden;
         background: #ffffff;
       }
 
-      .c34 .CodeMirror-scroll {
+      .c35 .CodeMirror-scroll {
         overflow: scroll !important;
         margin-bottom: -50px;
         margin-right: -50px;
@@ -771,47 +783,47 @@ describe('Wysiwyg render and actions buttons', () => {
         position: relative;
       }
 
-      .c34 .CodeMirror-sizer {
+      .c35 .CodeMirror-sizer {
         position: relative;
         border-right: 50px solid transparent;
       }
 
-      .c34 .CodeMirror-vscrollbar,
-      .c34 .CodeMirror-hscrollbar,
-      .c34 .CodeMirror-scrollbar-filler,
-      .c34 .CodeMirror-gutter-filler {
+      .c35 .CodeMirror-vscrollbar,
+      .c35 .CodeMirror-hscrollbar,
+      .c35 .CodeMirror-scrollbar-filler,
+      .c35 .CodeMirror-gutter-filler {
         position: absolute;
         z-index: 1;
         display: none;
         outline: none;
       }
 
-      .c34 .CodeMirror-vscrollbar {
+      .c35 .CodeMirror-vscrollbar {
         right: 0;
         top: 0;
         overflow-x: hidden;
         overflow-y: scroll;
       }
 
-      .c34 .CodeMirror-hscrollbar {
+      .c35 .CodeMirror-hscrollbar {
         bottom: 0;
         left: 0;
         overflow-y: hidden;
         overflow-x: scroll;
       }
 
-      .c34 .CodeMirror-scrollbar-filler {
+      .c35 .CodeMirror-scrollbar-filler {
         right: 0;
         bottom: 0;
       }
 
-      .c34 .CodeMirror-lines {
+      .c35 .CodeMirror-lines {
         cursor: text;
         min-height: 1px;
       }
 
-      .c34 .CodeMirror pre.CodeMirror-line,
-      .c34 .CodeMirror pre.CodeMirror-line-like {
+      .c35 .CodeMirror pre.CodeMirror-line,
+      .c35 .CodeMirror pre.CodeMirror-line-like {
         -moz-border-radius: 0;
         -webkit-border-radius: 0;
         border-radius: 0;
@@ -831,18 +843,18 @@ describe('Wysiwyg render and actions buttons', () => {
         font-variant-ligatures: contextual;
       }
 
-      .c34 .CodeMirror pre.CodeMirror-line-like {
+      .c35 .CodeMirror pre.CodeMirror-line-like {
         z-index: 2;
       }
 
-      .c34 .CodeMirror-wrap pre.CodeMirror-line,
-      .c34 .CodeMirror-wrap pre.CodeMirror-line-like {
+      .c35 .CodeMirror-wrap pre.CodeMirror-line,
+      .c35 .CodeMirror-wrap pre.CodeMirror-line-like {
         word-wrap: break-word;
         white-space: pre-wrap;
         word-break: normal;
       }
 
-      .c34 .CodeMirror-linebackground {
+      .c35 .CodeMirror-linebackground {
         position: absolute;
         left: 0;
         right: 0;
@@ -851,29 +863,29 @@ describe('Wysiwyg render and actions buttons', () => {
         z-index: 0;
       }
 
-      .c34 .CodeMirror-linewidget {
+      .c35 .CodeMirror-linewidget {
         position: relative;
         padding: 0.1px;
       }
 
-      .c34 .CodeMirror-rtl pre {
+      .c35 .CodeMirror-rtl pre {
         direction: rtl;
       }
 
-      .c34 .CodeMirror-code {
+      .c35 .CodeMirror-code {
         outline: none;
       }
 
-      .c34 .CodeMirror-scroll,
-      .c34 .CodeMirror-sizer,
-      .c34 .CodeMirror-gutter,
-      .c34 .CodeMirror-gutters,
-      .c34 .CodeMirror-linenumber {
+      .c35 .CodeMirror-scroll,
+      .c35 .CodeMirror-sizer,
+      .c35 .CodeMirror-gutter,
+      .c35 .CodeMirror-gutters,
+      .c35 .CodeMirror-linenumber {
         -moz-box-sizing: content-box;
         box-sizing: content-box;
       }
 
-      .c34 .CodeMirror-measure {
+      .c35 .CodeMirror-measure {
         position: absolute;
         width: 100%;
         height: 0;
@@ -881,58 +893,58 @@ describe('Wysiwyg render and actions buttons', () => {
         visibility: hidden;
       }
 
-      .c34 .CodeMirror-cursor {
+      .c35 .CodeMirror-cursor {
         position: absolute;
         pointer-events: none;
         border-color: #32324d;
       }
 
-      .c34 .CodeMirror-measure pre {
+      .c35 .CodeMirror-measure pre {
         position: static;
       }
 
-      .c34 div.CodeMirror-cursors {
+      .c35 div.CodeMirror-cursors {
         visibility: hidden;
         position: relative;
       }
 
-      .c34 div.CodeMirror-cursors + div {
+      .c35 div.CodeMirror-cursors + div {
         z-index: 0 !important;
       }
 
-      .c34 div.CodeMirror-dragcursors {
+      .c35 div.CodeMirror-dragcursors {
         visibility: visible;
       }
 
-      .c34 .CodeMirror-focused div.CodeMirror-cursors {
+      .c35 .CodeMirror-focused div.CodeMirror-cursors {
         visibility: visible;
       }
 
-      .c34 .CodeMirror-selected {
+      .c35 .CodeMirror-selected {
         background: #dcdce4;
       }
 
-      .c34 .CodeMirror-crosshair {
+      .c35 .CodeMirror-crosshair {
         cursor: crosshair;
       }
 
-      .c34 .cm-force-border {
+      .c35 .cm-force-border {
         padding-right: 0.1px;
       }
 
-      .c34 .cm-tab-wrap-hack:after {
+      .c35 .cm-tab-wrap-hack:after {
         content: '';
       }
 
-      .c34 span.CodeMirror-selectedtext {
+      .c35 span.CodeMirror-selectedtext {
         background: none;
       }
 
-      .c34 span {
+      .c35 span {
         color: #32324d !important;
       }
 
-      .c37 {
+      .c38 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -946,21 +958,21 @@ describe('Wysiwyg render and actions buttons', () => {
         outline: none;
       }
 
-      .c37 svg {
+      .c38 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c37 svg > g,
-      .c37 svg path {
+      .c38 svg > g,
+      .c38 svg path {
         fill: #ffffff;
       }
 
-      .c37[aria-disabled='true'] {
+      .c38[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c37:after {
+      .c38:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -975,11 +987,11 @@ describe('Wysiwyg render and actions buttons', () => {
         border: 2px solid transparent;
       }
 
-      .c37:focus-visible {
+      .c38:focus-visible {
         outline: none;
       }
 
-      .c37:focus-visible:after {
+      .c38:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -1004,22 +1016,22 @@ describe('Wysiwyg render and actions buttons', () => {
         margin-left: 16px;
       }
 
-      .c28 {
+      .c29 {
         margin: 0 8px;
         padding: 8px;
       }
 
-      .c28 svg {
+      .c29 svg {
         width: 1.125rem;
         height: 1.125rem;
       }
 
-      .c33 {
+      .c34 {
         position: relative;
         height: calc(100% - 48px);
       }
 
-      .c38 {
+      .c39 {
         background-color: transparent;
         border: none;
         -webkit-align-items: center;
@@ -1028,11 +1040,11 @@ describe('Wysiwyg render and actions buttons', () => {
         align-items: center;
       }
 
-      .c38 svg {
+      .c39 svg {
         margin-left: 8px;
       }
 
-      .c38 svg path {
+      .c39 svg path {
         fill: #4a4a6a;
         width: 0.75rem;
         height: 0.75rem;
@@ -1139,8 +1151,15 @@ describe('Wysiwyg render and actions buttons', () => {
                       tabindex="0"
                       type="button"
                     >
+                      <span
+                        class="c28"
+                      >
+                        Bold
+                      </span>
                       <svg
+                        aria-hidden="true"
                         fill="none"
+                        focusable="false"
                         height="1em"
                         viewBox="0 0 24 24"
                         width="1em"
@@ -1165,8 +1184,15 @@ describe('Wysiwyg render and actions buttons', () => {
                       tabindex="0"
                       type="button"
                     >
+                      <span
+                        class="c28"
+                      >
+                        Italic
+                      </span>
                       <svg
+                        aria-hidden="true"
                         fill="none"
+                        focusable="false"
                         height="1em"
                         viewBox="0 0 24 24"
                         width="1em"
@@ -1191,8 +1217,15 @@ describe('Wysiwyg render and actions buttons', () => {
                       tabindex="0"
                       type="button"
                     >
+                      <span
+                        class="c28"
+                      >
+                        Underline
+                      </span>
                       <svg
+                        aria-hidden="true"
                         fill="none"
+                        focusable="false"
                         height="1em"
                         viewBox="0 0 24 24"
                         width="1em"
@@ -1210,13 +1243,20 @@ describe('Wysiwyg render and actions buttons', () => {
                   <button
                     aria-disabled="false"
                     aria-labelledby="tooltip-7"
-                    class="c24 c25 c26 c28"
+                    class="c24 c25 c26 c29"
                     id="more"
                     tabindex="0"
                     type="button"
                   >
+                    <span
+                      class="c28"
+                    >
+                      More
+                    </span>
                     <svg
+                      aria-hidden="true"
                       fill="none"
+                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -1232,12 +1272,12 @@ describe('Wysiwyg render and actions buttons', () => {
               </div>
               <button
                 aria-disabled="false"
-                class="c29 c30"
+                class="c30 c31"
                 id="preview"
                 type="button"
               >
                 <span
-                  class="c31 c32"
+                  class="c32 c33"
                 >
                   Preview mode
                 </span>
@@ -1245,10 +1285,10 @@ describe('Wysiwyg render and actions buttons', () => {
             </div>
           </div>
           <div
-            class="c33"
+            class="c34"
           >
             <div
-              class="c34"
+              class="c35"
             >
               <textarea
                 style="display: none;"
@@ -1347,19 +1387,19 @@ describe('Wysiwyg render and actions buttons', () => {
             </div>
           </div>
           <div
-            class="c35"
+            class="c36"
           >
             <div
-              class="c36"
+              class="c37"
             >
               <button
                 aria-disabled="false"
-                class="c37 c38"
+                class="c38 c39"
                 id="expand"
                 type="button"
               >
                 <span
-                  class="c39"
+                  class="c40"
                 >
                   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 513ea5fb494..9f456db9e48 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
@@ -118,7 +118,7 @@ describe('Content manager | App | main', () => {
     expect(screen.getByText('Categories')).toBeVisible();
     expect(history.location.pathname).toEqual('/content-manager/collectionType/category');
     expect(container.firstChild).toMatchInlineSnapshot(`
-      .c34 {
+      .c35 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -130,13 +130,13 @@ describe('Content manager | App | main', () => {
         width: 1px;
       }
 
-      .c35 {
+      .c36 {
         -webkit-animation: gzYjWD 1s infinite linear;
         animation: gzYjWD 1s infinite linear;
         will-change: transform;
       }
 
-      .c32 {
+      .c33 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -154,11 +154,11 @@ describe('Content manager | App | main', () => {
         justify-content: space-around;
       }
 
-      .c33 {
+      .c34 {
         height: 100vh;
       }
 
-      .c30 {
+      .c31 {
         padding-bottom: 56px;
       }
 
@@ -167,7 +167,7 @@ describe('Content manager | App | main', () => {
         grid-template-columns: auto 1fr;
       }
 
-      .c31 {
+      .c32 {
         overflow-x: hidden;
       }
 
@@ -178,36 +178,36 @@ describe('Content manager | App | main', () => {
         padding-left: 24px;
       }
 
-      .c8 {
+      .c9 {
         padding-top: 16px;
       }
 
-      .c9 {
+      .c10 {
         background: #eaeaef;
       }
 
-      .c12 {
+      .c13 {
         padding-top: 8px;
         padding-bottom: 16px;
       }
 
-      .c16 {
+      .c17 {
         padding-top: 8px;
         padding-right: 16px;
         padding-bottom: 8px;
         padding-left: 24px;
       }
 
-      .c18 {
+      .c19 {
         padding-right: 24px;
         position: relative;
       }
 
-      .c21 {
+      .c22 {
         padding-right: 4px;
       }
 
-      .c23 {
+      .c24 {
         background: #eaeaef;
         padding: 4px;
         border-radius: 4px;
@@ -220,14 +220,14 @@ describe('Content manager | App | main', () => {
         transform: translateY(-50%);
       }
 
-      .c25 {
+      .c26 {
         background: #f6f6f9;
         padding-top: 8px;
         padding-bottom: 8px;
         padding-left: 32px;
       }
 
-      .c28 {
+      .c29 {
         padding-left: 8px;
       }
 
@@ -261,7 +261,7 @@ describe('Content manager | App | main', () => {
         justify-content: space-between;
       }
 
-      .c13 {
+      .c14 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -275,7 +275,7 @@ describe('Content manager | App | main', () => {
         flex-direction: column;
       }
 
-      .c19 {
+      .c20 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -289,7 +289,7 @@ describe('Content manager | App | main', () => {
         flex-direction: row;
       }
 
-      .c24 {
+      .c25 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -314,7 +314,7 @@ describe('Content manager | App | main', () => {
         line-height: 1.22;
       }
 
-      .c22 {
+      .c23 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -322,12 +322,24 @@ describe('Content manager | App | main', () => {
         text-transform: uppercase;
       }
 
-      .c29 {
+      .c30 {
         color: #32324d;
         font-size: 0.875rem;
         line-height: 1.43;
       }
 
+      .c8 {
+        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;
+      }
+
       .c6 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -426,18 +438,18 @@ describe('Content manager | App | main', () => {
         fill: #666687;
       }
 
-      .c10 {
+      .c11 {
         height: 1px;
         border: none;
         margin: 0;
       }
 
-      .c11 {
+      .c12 {
         width: 1.5rem;
         background-color: #dcdce4;
       }
 
-      .c26 {
+      .c27 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -455,66 +467,66 @@ describe('Content manager | App | main', () => {
         color: #32324d;
       }
 
-      .c26 svg > * {
+      .c27 svg > * {
         fill: #666687;
       }
 
-      .c26.active {
+      .c27.active {
         background-color: #f0f0ff;
         border-right: 2px solid #4945ff;
       }
 
-      .c26.active svg > * {
+      .c27.active svg > * {
         fill: #271fe0;
       }
 
-      .c26.active .c4 {
+      .c27.active .c4 {
         color: #271fe0;
         font-weight: 500;
       }
 
-      .c26:focus-visible {
+      .c27:focus-visible {
         outline-offset: -2px;
       }
 
-      .c27 {
+      .c28 {
         width: 0.75rem;
         height: 0.25rem;
       }
 
-      .c27 * {
+      .c28 * {
         fill: #666687;
       }
 
-      .c14 > * {
+      .c15 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c14 > * + * {
+      .c15 > * + * {
         margin-top: 8px;
       }
 
-      .c15 > * {
+      .c16 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c15 > * + * {
+      .c16 > * + * {
         margin-top: 4px;
       }
 
-      .c20 {
+      .c21 {
         border: none;
         padding: 0;
         background: transparent;
       }
 
-      .c17 svg {
+      .c18 svg {
         height: 0.25rem;
       }
 
-      .c17 svg path {
+      .c18 svg path {
         fill: #8e8ea9;
       }
 
@@ -544,8 +556,15 @@ describe('Content manager | App | main', () => {
                   tabindex="0"
                   type="button"
                 >
+                  <span
+                    class="c8"
+                  >
+                    Search for a content type
+                  </span>
                   <svg
+                    aria-hidden="true"
                     fill="none"
+                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -562,50 +581,50 @@ describe('Content manager | App | main', () => {
               </span>
             </div>
             <div
-              class="c8"
+              class="c9"
             >
               <hr
-                class="c9 c10 c11"
+                class="c10 c11 c12"
               />
             </div>
           </div>
           <div
-            class="c12"
+            class="c13"
           >
             <ol
-              class="c13 c14"
+              class="c14 c15"
               spacing="2"
             >
               <li>
                 <div
-                  class="c13 c15"
+                  class="c14 c16"
                   spacing="1"
                 >
                   <div
-                    class="c16 c17"
+                    class="c17 c18"
                   >
                     <div
-                      class="c18"
+                      class="c19"
                     >
                       <div
-                        class="c19 c20"
+                        class="c20 c21"
                       >
                         <div
-                          class="c21"
+                          class="c22"
                         >
                           <span
-                            class="c4 c22"
+                            class="c4 c23"
                           >
                             Collection Types
                           </span>
                         </div>
                       </div>
                       <div
-                        class="c23 c24"
+                        class="c24 c25"
                         transform="translateY(-50%)"
                       >
                         <span
-                          class="c4 c22"
+                          class="c4 c23"
                         >
                           1
                         </span>
@@ -618,14 +637,14 @@ describe('Content manager | App | main', () => {
                     <li>
                       <a
                         aria-current="page"
-                        class="c25 c26 active"
+                        class="c26 c27 active"
                         href="/content-manager/collectionType/category"
                       >
                         <div
-                          class="c19"
+                          class="c20"
                         >
                           <svg
-                            class="c27"
+                            class="c28"
                             fill="none"
                             height="1em"
                             viewBox="0 0 4 4"
@@ -640,10 +659,10 @@ describe('Content manager | App | main', () => {
                             />
                           </svg>
                           <div
-                            class="c28"
+                            class="c29"
                           >
                             <span
-                              class="c4 c29"
+                              class="c4 c30"
                             >
                               Categories
                             </span>
@@ -656,34 +675,34 @@ describe('Content manager | App | main', () => {
               </li>
               <li>
                 <div
-                  class="c13 c15"
+                  class="c14 c16"
                   spacing="1"
                 >
                   <div
-                    class="c16 c17"
+                    class="c17 c18"
                   >
                     <div
-                      class="c18"
+                      class="c19"
                     >
                       <div
-                        class="c19 c20"
+                        class="c20 c21"
                       >
                         <div
-                          class="c21"
+                          class="c22"
                         >
                           <span
-                            class="c4 c22"
+                            class="c4 c23"
                           >
                             Single Types
                           </span>
                         </div>
                       </div>
                       <div
-                        class="c23 c24"
+                        class="c24 c25"
                         transform="translateY(-50%)"
                       >
                         <span
-                          class="c4 c22"
+                          class="c4 c23"
                         >
                           1
                         </span>
@@ -695,14 +714,14 @@ describe('Content manager | App | main', () => {
                   >
                     <li>
                       <a
-                        class="c25 c26"
+                        class="c26 c27"
                         href="/homepage"
                       >
                         <div
-                          class="c19"
+                          class="c20"
                         >
                           <svg
-                            class="c27"
+                            class="c28"
                             fill="none"
                             height="1em"
                             viewBox="0 0 4 4"
@@ -717,10 +736,10 @@ describe('Content manager | App | main', () => {
                             />
                           </svg>
                           <div
-                            class="c28"
+                            class="c29"
                           >
                             <span
-                              class="c4 c29"
+                              class="c4 c30"
                             >
                               Home page
                             </span>
@@ -735,10 +754,10 @@ describe('Content manager | App | main', () => {
           </div>
         </nav>
         <div
-          class="c30 c31"
+          class="c31 c32"
         >
           <div
-            class="c32 c33"
+            class="c33 c34"
             data-testid="loader"
           >
             <div
@@ -746,13 +765,13 @@ describe('Content manager | App | main', () => {
               role="alert"
             >
               <div
-                class="c34"
+                class="c35"
               >
                 Loading content.
               </div>
               <img
                 aria-hidden="true"
-                class="c35"
+                class="c36"
                 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 022a6205539..97864a51aa1 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
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EditSettingsView renders and matches the snapshot 1`] = `
-.c70 {
+.c71 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -281,7 +281,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   fill: #ffffff;
 }
 
-.c69 {
+.c70 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -302,7 +302,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   width: 100%;
 }
 
-.c69 .c12 {
+.c70 .c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -313,62 +313,62 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c69 .c15 {
+.c70 .c15 {
   color: #ffffff;
 }
 
-.c69[aria-disabled='true'] {
+.c70[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c69[aria-disabled='true'] .c15 {
+.c70[aria-disabled='true'] .c15 {
   color: #666687;
 }
 
-.c69[aria-disabled='true'] svg > g,
-.c69[aria-disabled='true'] svg path {
+.c70[aria-disabled='true'] svg > g,
+.c70[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c69[aria-disabled='true']:active {
+.c70[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c69[aria-disabled='true']:active .c15 {
+.c70[aria-disabled='true']:active .c15 {
   color: #666687;
 }
 
-.c69[aria-disabled='true']:active svg > g,
-.c69[aria-disabled='true']:active svg path {
+.c70[aria-disabled='true']:active svg > g,
+.c70[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c69:hover {
+.c70:hover {
   background-color: #ffffff;
 }
 
-.c69:active {
+.c70:active {
   background-color: #ffffff;
   border: 1px solid #4945ff;
 }
 
-.c69:active .c15 {
+.c70:active .c15 {
   color: #4945ff;
 }
 
-.c69:active svg > g,
-.c69:active svg path {
+.c70:active svg > g,
+.c70:active svg path {
   fill: #4945ff;
 }
 
-.c69 .c15 {
+.c70 .c15 {
   color: #271fe0;
 }
 
-.c69 svg > g,
-.c69 svg path {
+.c70 svg > g,
+.c70 svg path {
   fill: #271fe0;
 }
 
@@ -400,6 +400,18 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   width: 100%;
 }
 
+.c68 {
+  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;
+}
+
 .c65 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -988,7 +1000,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
   padding-right: 4px;
 }
 
-.c68 {
+.c69 {
   position: relative;
   padding-left: 4px;
 }
@@ -1407,8 +1419,15 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
+                                      <span
+                                        class="c68"
+                                      >
+                                        Edit postal_code
+                                      </span>
                                       <svg
+                                        aria-hidden="true"
                                         fill="none"
+                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -1432,8 +1451,15 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
+                                      <span
+                                        class="c68"
+                                      >
+                                        Delete postal_code
+                                      </span>
                                       <svg
+                                        aria-hidden="true"
                                         fill="none"
+                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -1460,7 +1486,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                         class=""
                       >
                         <div
-                          class="c54 c68"
+                          class="c54 c69"
                         >
                           <div
                             class="c56 c57 c58"
@@ -1534,8 +1560,15 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
+                                      <span
+                                        class="c68"
+                                      >
+                                        Edit city
+                                      </span>
                                       <svg
+                                        aria-hidden="true"
                                         fill="none"
+                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -1559,8 +1592,15 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
+                                      <span
+                                        class="c68"
+                                      >
+                                        Delete city
+                                      </span>
                                       <svg
+                                        aria-hidden="true"
                                         fill="none"
+                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -1587,7 +1627,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                       aria-disabled="true"
                       aria-expanded="false"
                       aria-haspopup="true"
-                      class="c10 c69"
+                      class="c10 c70"
                       data-testid="add-field"
                       disabled=""
                       label="Insert another field"
@@ -1626,7 +1666,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
     </form>
   </main>
   <div
-    class="c70"
+    class="c71"
   >
     <p
       aria-live="polite"
@@ -1651,7 +1691,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
 `;
 
 exports[`EditSettingsView should add field 1`] = `
-.c70 {
+.c71 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -1931,7 +1971,7 @@ exports[`EditSettingsView should add field 1`] = `
   fill: #ffffff;
 }
 
-.c69 {
+.c70 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1952,7 +1992,7 @@ exports[`EditSettingsView should add field 1`] = `
   width: 100%;
 }
 
-.c69 .c12 {
+.c70 .c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1963,62 +2003,62 @@ exports[`EditSettingsView should add field 1`] = `
   align-items: center;
 }
 
-.c69 .c15 {
+.c70 .c15 {
   color: #ffffff;
 }
 
-.c69[aria-disabled='true'] {
+.c70[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c69[aria-disabled='true'] .c15 {
+.c70[aria-disabled='true'] .c15 {
   color: #666687;
 }
 
-.c69[aria-disabled='true'] svg > g,
-.c69[aria-disabled='true'] svg path {
+.c70[aria-disabled='true'] svg > g,
+.c70[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c69[aria-disabled='true']:active {
+.c70[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c69[aria-disabled='true']:active .c15 {
+.c70[aria-disabled='true']:active .c15 {
   color: #666687;
 }
 
-.c69[aria-disabled='true']:active svg > g,
-.c69[aria-disabled='true']:active svg path {
+.c70[aria-disabled='true']:active svg > g,
+.c70[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c69:hover {
+.c70:hover {
   background-color: #ffffff;
 }
 
-.c69:active {
+.c70:active {
   background-color: #ffffff;
   border: 1px solid #4945ff;
 }
 
-.c69:active .c15 {
+.c70:active .c15 {
   color: #4945ff;
 }
 
-.c69:active svg > g,
-.c69:active svg path {
+.c70:active svg > g,
+.c70:active svg path {
   fill: #4945ff;
 }
 
-.c69 .c15 {
+.c70 .c15 {
   color: #271fe0;
 }
 
-.c69 svg > g,
-.c69 svg path {
+.c70 svg > g,
+.c70 svg path {
   fill: #271fe0;
 }
 
@@ -2050,6 +2090,18 @@ exports[`EditSettingsView should add field 1`] = `
   width: 100%;
 }
 
+.c68 {
+  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;
+}
+
 .c65 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2638,7 +2690,7 @@ exports[`EditSettingsView should add field 1`] = `
   padding-right: 4px;
 }
 
-.c68 {
+.c69 {
   position: relative;
   padding-left: 4px;
 }
@@ -3057,8 +3109,15 @@ exports[`EditSettingsView should add field 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
+                                      <span
+                                        class="c68"
+                                      >
+                                        Edit postal_code
+                                      </span>
                                       <svg
+                                        aria-hidden="true"
                                         fill="none"
+                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -3082,8 +3141,15 @@ exports[`EditSettingsView should add field 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
+                                      <span
+                                        class="c68"
+                                      >
+                                        Delete postal_code
+                                      </span>
                                       <svg
+                                        aria-hidden="true"
                                         fill="none"
+                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -3110,7 +3176,7 @@ exports[`EditSettingsView should add field 1`] = `
                         class=""
                       >
                         <div
-                          class="c54 c68"
+                          class="c54 c69"
                         >
                           <div
                             class="c56 c57 c58"
@@ -3184,8 +3250,15 @@ exports[`EditSettingsView should add field 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
+                                      <span
+                                        class="c68"
+                                      >
+                                        Edit city
+                                      </span>
                                       <svg
+                                        aria-hidden="true"
                                         fill="none"
+                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -3209,8 +3282,15 @@ exports[`EditSettingsView should add field 1`] = `
                                       tabindex="0"
                                       type="button"
                                     >
+                                      <span
+                                        class="c68"
+                                      >
+                                        Delete city
+                                      </span>
                                       <svg
+                                        aria-hidden="true"
                                         fill="none"
+                                        focusable="false"
                                         height="1em"
                                         viewBox="0 0 24 24"
                                         width="1em"
@@ -3237,7 +3317,7 @@ exports[`EditSettingsView should add field 1`] = `
                       aria-disabled="true"
                       aria-expanded="false"
                       aria-haspopup="true"
-                      class="c10 c69"
+                      class="c10 c70"
                       data-testid="add-field"
                       disabled=""
                       label="Insert another field"
@@ -3276,7 +3356,7 @@ exports[`EditSettingsView should add field 1`] = `
     </form>
   </main>
   <div
-    class="c70"
+    class="c71"
   >
     <p
       aria-live="polite"
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 5bd65ce613e..adb93dc346e 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
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1`] = `
-.c85 {
+.c86 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -288,6 +288,18 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   padding-bottom: 24px;
 }
 
+.c85 {
+  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;
+}
+
 .c83 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1850,8 +1862,15 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                         tabindex="0"
                         type="button"
                       >
+                        <span
+                          class="c85"
+                        >
+                          Add a field
+                        </span>
                         <svg
+                          aria-hidden="true"
                           fill="none"
+                          focusable="false"
                           height="1em"
                           viewBox="0 0 24 24"
                           width="1em"
@@ -1874,7 +1893,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
     </div>
   </div>
   <div
-    class="c85"
+    class="c86"
   >
     <p
       aria-live="polite"
@@ -1899,7 +1918,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
 `;
 
 exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
-.c85 {
+.c86 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -2186,6 +2205,18 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   padding-bottom: 24px;
 }
 
+.c85 {
+  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;
+}
+
 .c83 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -3851,8 +3882,15 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                         tabindex="0"
                         type="button"
                       >
+                        <span
+                          class="c85"
+                        >
+                          Add a field
+                        </span>
                         <svg
+                          aria-hidden="true"
                           fill="none"
+                          focusable="false"
                           height="1em"
                           viewBox="0 0 24 24"
                           width="1em"
@@ -3875,7 +3913,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
     </div>
   </div>
   <div
-    class="c85"
+    class="c86"
   >
     <p
       aria-live="polite"
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 9f5aa966804..f1271cb642f 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
@@ -261,6 +261,10 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         padding-top: 16px;
       }
 
+      .c31 {
+        padding-left: 8px;
+      }
+
       .c30 {
         margin: 0;
         height: 18px;
@@ -329,10 +333,6 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         background-color: #8e8ea9;
       }
 
-      .c31 {
-        padding-left: 8px;
-      }
-
       .c26 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
@@ -817,13 +817,17 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
                   <label
                     class="c28 c29"
                   >
-                    <input
-                      aria-label="rememberMe"
-                      class="c30"
-                      id="checkbox-1"
-                      name="rememberMe"
-                      type="checkbox"
-                    />
+                    <div
+                      class=""
+                    >
+                      <input
+                        aria-label="rememberMe"
+                        class="c30"
+                        id="checkbox-1"
+                        name="rememberMe"
+                        type="checkbox"
+                      />
+                    </div>
                     <div
                       class="c31"
                     >
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 d4fd56d701d..c021de37417 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
@@ -285,6 +285,10 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         padding-bottom: 32px;
       }
 
+      .c45 {
+        padding-left: 8px;
+      }
+
       .c44 {
         margin: 0;
         height: 18px;
@@ -353,10 +357,6 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         background-color: #8e8ea9;
       }
 
-      .c45 {
-        padding-left: 8px;
-      }
-
       .c40 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
@@ -1185,13 +1185,17 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                       <label
                         class="c42 c43"
                       >
-                        <input
-                          aria-label="news"
-                          class="c44"
-                          id="checkbox-1"
-                          name="news"
-                          type="checkbox"
-                        />
+                        <div
+                          class=""
+                        >
+                          <input
+                            aria-label="news"
+                            class="c44"
+                            id="checkbox-1"
+                            name="news"
+                            type="checkbox"
+                          />
+                        </div>
                         <div
                           class="c45"
                         >
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 5bc80a1a5d6..534ce56d123 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
@@ -993,7 +993,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 1px solid #4945ff;
 }
 
-.c67:hover:not([aria-disabled='true']) .sc-eHyqeh {
+.c67:hover:not([aria-disabled='true']) .sc-igcPbY {
   color: #271fe0;
 }
 
@@ -1017,7 +1017,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 1px solid #4945ff;
 }
 
-.c85:hover:not([aria-disabled='true']) .sc-eHyqeh {
+.c85:hover:not([aria-disabled='true']) .sc-igcPbY {
   color: #271fe0;
 }
 
@@ -1610,7 +1610,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             class="c78 c79"
                           >
                             <span
-                              class="c78 sc-eHyqeh c80"
+                              class="c78 sc-igcPbY c80"
                               id="accordion-label-accordion-1"
                             >
                               Address
@@ -1675,7 +1675,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             class="c78 c79"
                           >
                             <span
-                              class="c78 sc-eHyqeh c80"
+                              class="c78 sc-igcPbY c80"
                               id="accordion-label-accordion-2"
                             >
                               Category
@@ -2962,7 +2962,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 1px solid #4945ff;
 }
 
-.c78:hover:not([aria-disabled='true']) .sc-eHyqeh {
+.c78:hover:not([aria-disabled='true']) .sc-igcPbY {
   color: #271fe0;
 }
 
@@ -2986,7 +2986,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 1px solid #4945ff;
 }
 
-.c96:hover:not([aria-disabled='true']) .sc-eHyqeh {
+.c96:hover:not([aria-disabled='true']) .sc-igcPbY {
   color: #271fe0;
 }
 
@@ -3655,7 +3655,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             class="c89 c90"
                           >
                             <span
-                              class="c89 sc-eHyqeh c91"
+                              class="c89 sc-igcPbY c91"
                               id="accordion-label-accordion-7"
                             >
                               Address
@@ -3720,7 +3720,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             class="c89 c90"
                           >
                             <span
-                              class="c89 sc-eHyqeh c91"
+                              class="c89 sc-igcPbY c91"
                               id="accordion-label-accordion-8"
                             >
                               Category
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 4150ea41c5d..43b6270aa05 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
@@ -92,7 +92,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
     });
 
     expect(container.firstChild).toMatchInlineSnapshot(`
-      .c34 {
+      .c35 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -118,14 +118,14 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         text-transform: uppercase;
       }
 
-      .c30 {
+      .c31 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.875rem;
         line-height: 1.43;
       }
 
-      .c32 {
+      .c33 {
         color: #32324d;
         display: block;
         white-space: nowrap;
@@ -135,13 +135,13 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         line-height: 1.43;
       }
 
-      .c33 {
+      .c34 {
         color: #32324d;
         font-size: 0.875rem;
         line-height: 1.43;
       }
 
-      .c38 {
+      .c39 {
         padding-left: 4px;
       }
 
@@ -156,7 +156,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         padding-left: 24px;
       }
 
-      .c31 {
+      .c32 {
         max-width: 15.625rem;
       }
 
@@ -199,7 +199,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         overflow-x: auto;
       }
 
-      .c29 tr:last-of-type {
+      .c30 tr:last-of-type {
         border-bottom: none;
       }
 
@@ -256,6 +256,18 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         height: 0.25rem;
       }
 
+      .c27 {
+        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;
+      }
+
       .c25 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -355,7 +367,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         fill: #666687;
       }
 
-      .c28 {
+      .c29 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -367,13 +379,13 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         width: 1px;
       }
 
-      .c37 {
+      .c38 {
         color: #4945ff;
         font-size: 0.875rem;
         line-height: 1.43;
       }
 
-      .c35 {
+      .c36 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -388,15 +400,15 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         outline: none;
       }
 
-      .c35 svg path {
+      .c36 svg path {
         fill: #4945ff;
       }
 
-      .c35 svg {
+      .c36 svg {
         font-size: 0.625rem;
       }
 
-      .c35:after {
+      .c36:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -411,11 +423,11 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         border: 2px solid transparent;
       }
 
-      .c35:focus-visible {
+      .c36:focus-visible {
         outline: none;
       }
 
-      .c35:focus-visible:after {
+      .c36:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -566,7 +578,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         fill: #ffffff;
       }
 
-      .c27 {
+      .c28 {
         -webkit-transform: rotate(180deg);
         -ms-transform: rotate(180deg);
         transform: rotate(180deg);
@@ -634,12 +646,12 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         outline: none;
       }
 
-      .c36 svg path {
+      .c37 svg path {
         fill: #8e8ea9;
       }
 
-      .c36:hover svg path,
-      .c36:focus svg path {
+      .c37:hover svg path,
+      .c37:focus svg path {
         fill: #32324d;
       }
 
@@ -760,9 +772,16 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                                 tabindex="-1"
                                 type="button"
                               >
-                                <svg
+                                <span
                                   class="c27"
+                                >
+                                  Sort on Name
+                                </span>
+                                <svg
+                                  aria-hidden="true"
+                                  class="c28"
                                   fill="none"
+                                  focusable="false"
                                   height="1em"
                                   viewBox="0 0 14 8"
                                   width="1em"
@@ -855,7 +874,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                           class="c22"
                         >
                           <div
-                            class="c28"
+                            class="c29"
                           >
                             Actions
                           </div>
@@ -867,7 +886,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                     </tr>
                   </thead>
                   <tbody
-                    class="c29"
+                    class="c30"
                   >
                     <tr
                       aria-rowindex="2"
@@ -880,18 +899,18 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                         tabindex="-1"
                       >
                         <span
-                          class="c30"
+                          class="c31"
                         >
                           My super token
                         </span>
                       </td>
                       <td
                         aria-colindex="2"
-                        class="c31 c21"
+                        class="c32 c21"
                         tabindex="-1"
                       >
                         <span
-                          class="c32"
+                          class="c33"
                         >
                           This describe my super token
                         </span>
@@ -902,7 +921,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                         tabindex="-1"
                       >
                         <span
-                          class="c33"
+                          class="c34"
                         >
                           <time
                             datetime="2021-11-15T00:00:00.000Z"
@@ -923,16 +942,16 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                         tabindex="-1"
                       >
                         <div
-                          class="c34"
+                          class="c35"
                         >
                           <a
-                            class="c35 c36"
+                            class="c36 c37"
                             href="/settings/api-tokens/1"
                             tabindex="-1"
                             title="Edit My super token"
                           >
                             <span
-                              class="c37"
+                              class="c38"
                             >
                               <svg
                                 fill="none"
@@ -952,7 +971,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                           </a>
                           <div
                             aria-hidden="true"
-                            class="c38"
+                            class="c39"
                             role="button"
                           >
                             <span>
@@ -964,8 +983,15 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                                 tabindex="-1"
                                 type="button"
                               >
+                                <span
+                                  class="c27"
+                                >
+                                  Delete My super token
+                                </span>
                                 <svg
+                                  aria-hidden="true"
                                   fill="none"
+                                  focusable="false"
                                   height="1em"
                                   viewBox="0 0 24 24"
                                   width="1em"
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 d6d3a9a3a9f..6fc752894c7 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
@@ -4,7 +4,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
 <body
   class="lock-body-scroll"
 >
-  .c20 {
+  .c21 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -45,7 +45,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   width: 100%;
 }
 
-.c17 {
+.c18 {
   padding-top: 8px;
   padding-right: 16px;
   padding-left: 16px;
@@ -58,7 +58,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   line-height: 1.33;
 }
 
-.c18 {
+.c19 {
   color: #666687;
   display: block;
   white-space: nowrap;
@@ -68,7 +68,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   line-height: 1.33;
 }
 
-.c19 {
+.c20 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
@@ -155,6 +155,18 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   display: flex;
 }
 
+.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;
+}
+
 .c15 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -319,8 +331,15 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                     tabindex="0"
                     type="button"
                   >
+                    <span
+                      class="c17"
+                    >
+                      Change logo
+                    </span>
                     <svg
+                      aria-hidden="true"
                       fill="none"
+                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -336,7 +355,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
               </div>
             </section>
             <div
-              class="c17"
+              class="c18"
             >
               <span>
                 <div
@@ -345,7 +364,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                   tabindex="0"
                 >
                   <span
-                    class="c18"
+                    class="c19"
                   >
                     logo.png
                   </span>
@@ -355,7 +374,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
           </div>
         </div>
         <p
-          class="c19"
+          class="c20"
           id="carouselinput-4-hint"
         >
           Change the admin panel logo (Max dimension: 750x750, Max file size: 100KB)
@@ -363,7 +382,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
       </div>
     </div>
     <div
-      class="c20"
+      class="c21"
     >
       <p
         aria-live="polite"
@@ -453,24 +472,24 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
       </p>
     </div>
   </div>
-  .c9 {
+  .c10 {
   padding-right: 40px;
   padding-left: 40px;
 }
 
-.c18 {
+.c19 {
   padding-top: 24px;
   padding-right: 40px;
   padding-bottom: 24px;
   padding-left: 40px;
 }
 
-.c25 {
+.c26 {
   padding-top: 12px;
   padding-bottom: 20px;
 }
 
-.c32 {
+.c33 {
   padding-top: 24px;
 }
 
@@ -530,7 +549,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   justify-content: space-between;
 }
 
-.c35 {
+.c36 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -544,6 +563,18 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   flex-direction: row;
 }
 
+.c9 {
+  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;
+}
+
 .c7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -647,12 +678,12 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   border-bottom: 1px solid #eaeaef;
 }
 
-.c34 {
+.c35 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c36 > * + * {
+.c37 > * + * {
   margin-left: 8px;
 }
 
@@ -663,20 +694,20 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   line-height: 1.43;
 }
 
-.c26 {
+.c27 {
   color: #32324d;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
 }
 
-.c33 {
+.c34 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c13 {
+.c14 {
   color: #4945ff;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -684,7 +715,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   text-transform: uppercase;
 }
 
-.c15 {
+.c16 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -692,33 +723,33 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   text-transform: uppercase;
 }
 
-.c11 {
+.c12 {
   padding: 16px;
 }
 
-.c12 {
+.c13 {
   border-bottom: 2px solid #4945ff;
 }
 
-.c14 {
+.c15 {
   border-bottom: 2px solid transparent;
 }
 
-.c10[aria-disabled='true'] {
+.c11[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c16 {
+.c17 {
   background: #eaeaef;
 }
 
-.c17 {
+.c18 {
   height: 1px;
   border: none;
   margin: 0;
 }
 
-.c19 {
+.c20 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -732,16 +763,16 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   flex-direction: column;
 }
 
-.c20 > * {
+.c21 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c20 > * + * {
+.c21 > * + * {
   margin-top: 8px;
 }
 
-.c21 {
+.c22 {
   background: #f6f6f9;
   padding-top: 48px;
   padding-bottom: 32px;
@@ -752,7 +783,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   position: relative;
 }
 
-.c22 {
+.c23 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -770,24 +801,24 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   justify-content: center;
 }
 
-.c23 {
+.c24 {
   color: #4945ff;
   width: 3.75rem;
   height: 3.75rem;
 }
 
-.c24 path {
+.c25 path {
   fill: #4945ff;
 }
 
-.c31 {
+.c32 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c28 {
+.c29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -801,21 +832,21 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   outline: none;
 }
 
-.c28 svg {
+.c29 svg {
   height: 12px;
   width: 12px;
 }
 
-.c28 svg > g,
-.c28 svg path {
+.c29 svg > g,
+.c29 svg path {
   fill: #ffffff;
 }
 
-.c28[aria-disabled='true'] {
+.c29[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c28:after {
+.c29:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -830,11 +861,11 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   border: 2px solid transparent;
 }
 
-.c28:focus-visible {
+.c29:focus-visible {
   outline: none;
 }
 
-.c28:focus-visible:after {
+.c29:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -845,7 +876,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   border: 2px solid #4945ff;
 }
 
-.c29 {
+.c30 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -855,7 +886,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   border: 1px solid #4945ff;
 }
 
-.c29 .sc-hAWBJg {
+.c30 .sc-hAWBJg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -866,54 +897,54 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   align-items: center;
 }
 
-.c29 .c30 {
+.c30 .c31 {
   color: #ffffff;
 }
 
-.c29[aria-disabled='true'] {
+.c30[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c29[aria-disabled='true'] .c30 {
+.c30[aria-disabled='true'] .c31 {
   color: #666687;
 }
 
-.c29[aria-disabled='true'] svg > g,
-.c29[aria-disabled='true'] svg path {
+.c30[aria-disabled='true'] svg > g,
+.c30[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c29[aria-disabled='true']:active {
+.c30[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c29[aria-disabled='true']:active .c30 {
+.c30[aria-disabled='true']:active .c31 {
   color: #666687;
 }
 
-.c29[aria-disabled='true']:active svg > g,
-.c29[aria-disabled='true']:active svg path {
+.c30[aria-disabled='true']:active svg > g,
+.c30[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c29:hover {
+.c30:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c29:active {
+.c30:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c29 svg > g,
-.c29 svg path {
+.c30 svg > g,
+.c30 svg path {
   fill: #ffffff;
 }
 
-.c37 {
+.c38 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -925,7 +956,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   background: #ffffff;
 }
 
-.c37 .sc-hAWBJg {
+.c38 .sc-hAWBJg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -936,56 +967,56 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   align-items: center;
 }
 
-.c37 .c30 {
+.c38 .c31 {
   color: #ffffff;
 }
 
-.c37[aria-disabled='true'] {
+.c38[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c37[aria-disabled='true'] .c30 {
+.c38[aria-disabled='true'] .c31 {
   color: #666687;
 }
 
-.c37[aria-disabled='true'] svg > g,
-.c37[aria-disabled='true'] svg path {
+.c38[aria-disabled='true'] svg > g,
+.c38[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c37[aria-disabled='true']:active {
+.c38[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c37[aria-disabled='true']:active .c30 {
+.c38[aria-disabled='true']:active .c31 {
   color: #666687;
 }
 
-.c37[aria-disabled='true']:active svg > g,
-.c37[aria-disabled='true']:active svg path {
+.c38[aria-disabled='true']:active svg > g,
+.c38[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c37:hover {
+.c38:hover {
   background-color: #f6f6f9;
 }
 
-.c37:active {
+.c38:active {
   background-color: #eaeaef;
 }
 
-.c37 .c30 {
+.c38 .c31 {
   color: #32324d;
 }
 
-.c37 svg > g,
-.c37 svg path {
+.c38 svg > g,
+.c38 svg path {
   fill: #32324d;
 }
 
-.c27 {
+.c28 {
   opacity: 0;
   position: absolute;
   top: 0;
@@ -1023,12 +1054,18 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                 </h2>
                 <button
                   aria-disabled="false"
-                  aria-label="Close the modal"
                   class="c7 c8"
                   type="button"
                 >
+                  <span
+                    class="c9"
+                  >
+                    Close the modal
+                  </span>
                   <svg
+                    aria-hidden="true"
                     fill="none"
+                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -1044,7 +1081,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
             </div>
             <div>
               <div
-                class="c9"
+                class="c10"
               >
                 <div
                   aria-label="How do you want to upload your assets?"
@@ -1054,17 +1091,17 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                     aria-controls="tabgroup-1-0-tabpanel"
                     aria-disabled="false"
                     aria-selected="true"
-                    class="c10"
+                    class="c11"
                     id="tabgroup-1-0-tab"
                     role="tab"
                     tabindex="0"
                     type="button"
                   >
                     <div
-                      class="c11 c12"
+                      class="c12 c13"
                     >
                       <span
-                        class="c13"
+                        class="c14"
                       >
                         From computer
                       </span>
@@ -1073,17 +1110,17 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                   <button
                     aria-disabled="false"
                     aria-selected="false"
-                    class="c10"
+                    class="c11"
                     id="tabgroup-1-1-tab"
                     role="tab"
                     tabindex="-1"
                     type="button"
                   >
                     <div
-                      class="c11 c14"
+                      class="c12 c15"
                     >
                       <span
-                        class="c15"
+                        class="c16"
                       >
                         From url
                       </span>
@@ -1091,7 +1128,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                   </button>
                 </div>
                 <hr
-                  class="c16 c17"
+                  class="c17 c18"
                 />
               </div>
               <div>
@@ -1103,22 +1140,22 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                 >
                   <form>
                     <div
-                      class="c18"
+                      class="c19"
                     >
                       <div>
                         <label
                           for="logo-upload"
                         >
                           <div
-                            class="c19 c20"
+                            class="c20 c21"
                             spacing="2"
                           >
                             <div
-                              class="c21 c22"
+                              class="c22 c23"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="c23 c24"
+                                class="c24 c25"
                                 fill="none"
                                 height="3.75rem"
                                 viewBox="0 0 24 20"
@@ -1135,17 +1172,17 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                                 />
                               </svg>
                               <div
-                                class="c25"
+                                class="c26"
                               >
                                 <span
-                                  class="c26"
+                                  class="c27"
                                 >
                                   Drag and Drop here or
                                 </span>
                               </div>
                               <input
                                 accept="image/jpeg,image/png,image/svg+xml"
-                                class="c27"
+                                class="c28"
                                 cursor="pointer"
                                 id="logo-upload"
                                 name="files"
@@ -1154,20 +1191,20 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                               />
                               <button
                                 aria-disabled="false"
-                                class="c28 c29"
+                                class="c29 c30"
                                 type="button"
                               >
                                 <span
-                                  class="c30 c31"
+                                  class="c31 c32"
                                 >
                                   Browse files
                                 </span>
                               </button>
                               <div
-                                class="c32"
+                                class="c33"
                               >
                                 <span
-                                  class="c33"
+                                  class="c34"
                                 >
                                   Max dimension: 750x750, Max size: 100KB
                                 </span>
@@ -1179,28 +1216,28 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                     </div>
                   </form>
                   <div
-                    class="c3 c34"
+                    class="c3 c35"
                   >
                     <div
                       class="c5"
                     >
                       <div
-                        class="c35 c36"
+                        class="c36 c37"
                       >
                         <button
                           aria-disabled="false"
-                          class="c28 c37"
+                          class="c29 c38"
                           type="button"
                         >
                           <span
-                            class="c30 c31"
+                            class="c31 c32"
                           >
                             Cancel
                           </span>
                         </button>
                       </div>
                       <div
-                        class="c35 c36"
+                        class="c36 c37"
                       />
                     </div>
                   </div>
@@ -1219,7 +1256,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
 <body
   class="lock-body-scroll"
 >
-  .c20 {
+  .c21 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -1260,7 +1297,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   width: 100%;
 }
 
-.c17 {
+.c18 {
   padding-top: 8px;
   padding-right: 16px;
   padding-left: 16px;
@@ -1273,7 +1310,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   line-height: 1.33;
 }
 
-.c18 {
+.c19 {
   color: #666687;
   display: block;
   white-space: nowrap;
@@ -1283,7 +1320,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   line-height: 1.33;
 }
 
-.c19 {
+.c20 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
@@ -1370,6 +1407,18 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   display: flex;
 }
 
+.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;
+}
+
 .c15 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1534,8 +1583,15 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                     tabindex="0"
                     type="button"
                   >
+                    <span
+                      class="c17"
+                    >
+                      Change logo
+                    </span>
                     <svg
+                      aria-hidden="true"
                       fill="none"
+                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -1551,7 +1607,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
               </div>
             </section>
             <div
-              class="c17"
+              class="c18"
             >
               <span>
                 <div
@@ -1560,7 +1616,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                   tabindex="0"
                 >
                   <span
-                    class="c18"
+                    class="c19"
                   >
                     logo.png
                   </span>
@@ -1570,7 +1626,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
           </div>
         </div>
         <p
-          class="c19"
+          class="c20"
           id="carouselinput-49-hint"
         >
           Change the admin panel logo (Max dimension: 750x750, Max file size: 100KB)
@@ -1578,7 +1634,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
       </div>
     </div>
     <div
-      class="c20"
+      class="c21"
     >
       <p
         aria-live="polite"
@@ -1668,12 +1724,12 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
       </p>
     </div>
   </div>
-  .c9 {
+  .c10 {
   padding-right: 40px;
   padding-left: 40px;
 }
 
-.c18 {
+.c19 {
   padding-top: 24px;
   padding-right: 40px;
   padding-bottom: 24px;
@@ -1736,7 +1792,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   justify-content: space-between;
 }
 
-.c27 {
+.c28 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1750,6 +1806,18 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   flex-direction: row;
 }
 
+.c9 {
+  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;
+}
+
 .c7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1853,12 +1921,12 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   border-bottom: 1px solid #eaeaef;
 }
 
-.c26 {
+.c27 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c28 > * + * {
+.c29 > * + * {
   margin-left: 8px;
 }
 
@@ -1869,7 +1937,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   line-height: 1.43;
 }
 
-.c15 {
+.c16 {
   color: #4945ff;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -1877,7 +1945,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   text-transform: uppercase;
 }
 
-.c13 {
+.c14 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -1885,40 +1953,40 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   text-transform: uppercase;
 }
 
-.c11 {
+.c12 {
   padding: 16px;
 }
 
-.c14 {
+.c15 {
   border-bottom: 2px solid #4945ff;
 }
 
-.c12 {
+.c13 {
   border-bottom: 2px solid transparent;
 }
 
-.c10[aria-disabled='true'] {
+.c11[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c16 {
+.c17 {
   background: #eaeaef;
 }
 
-.c17 {
+.c18 {
   height: 1px;
   border: none;
   margin: 0;
 }
 
-.c32 {
+.c33 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c29 {
+.c30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1932,21 +2000,21 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   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;
@@ -1961,11 +2029,11 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   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;
@@ -1976,7 +2044,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   border: 2px solid #4945ff;
 }
 
-.c33 {
+.c34 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1986,7 +2054,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   border: 1px solid #4945ff;
 }
 
-.c33 .sc-hAWBJg {
+.c34 .sc-hAWBJg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1997,54 +2065,54 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   align-items: center;
 }
 
-.c33 .c31 {
+.c34 .c32 {
   color: #ffffff;
 }
 
-.c33[aria-disabled='true'] {
+.c34[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c33[aria-disabled='true'] .c31 {
+.c34[aria-disabled='true'] .c32 {
   color: #666687;
 }
 
-.c33[aria-disabled='true'] svg > g,
-.c33[aria-disabled='true'] svg path {
+.c34[aria-disabled='true'] svg > g,
+.c34[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c33[aria-disabled='true']:active {
+.c34[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c33[aria-disabled='true']:active .c31 {
+.c34[aria-disabled='true']:active .c32 {
   color: #666687;
 }
 
-.c33[aria-disabled='true']:active svg > g,
-.c33[aria-disabled='true']:active svg path {
+.c34[aria-disabled='true']:active svg > g,
+.c34[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c33:hover {
+.c34:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c33:active {
+.c34:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c33 svg > g,
-.c33 svg path {
+.c34 svg > g,
+.c34 svg path {
   fill: #ffffff;
 }
 
-.c30 {
+.c31 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2056,7 +2124,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   background: #ffffff;
 }
 
-.c30 .sc-hAWBJg {
+.c31 .sc-hAWBJg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2067,56 +2135,56 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   align-items: center;
 }
 
-.c30 .c31 {
+.c31 .c32 {
   color: #ffffff;
 }
 
-.c30[aria-disabled='true'] {
+.c31[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c30[aria-disabled='true'] .c31 {
+.c31[aria-disabled='true'] .c32 {
   color: #666687;
 }
 
-.c30[aria-disabled='true'] svg > g,
-.c30[aria-disabled='true'] svg path {
+.c31[aria-disabled='true'] svg > g,
+.c31[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c30[aria-disabled='true']:active {
+.c31[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c30[aria-disabled='true']:active .c31 {
+.c31[aria-disabled='true']:active .c32 {
   color: #666687;
 }
 
-.c30[aria-disabled='true']:active svg > g,
-.c30[aria-disabled='true']:active svg path {
+.c31[aria-disabled='true']:active svg > g,
+.c31[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c30:hover {
+.c31:hover {
   background-color: #f6f6f9;
 }
 
-.c30:active {
+.c31:active {
   background-color: #eaeaef;
 }
 
-.c30 .c31 {
+.c31 .c32 {
   color: #32324d;
 }
 
-.c30 svg > g,
-.c30 svg path {
+.c31 svg > g,
+.c31 svg path {
   fill: #32324d;
 }
 
-.c19 {
+.c20 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -2130,7 +2198,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   flex-direction: column;
 }
 
-.c22 {
+.c23 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2144,7 +2212,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   flex-direction: row;
 }
 
-.c23 {
+.c24 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2162,14 +2230,14 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   justify-content: space-between;
 }
 
-.c21 {
+.c22 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c25 {
+.c26 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -2184,36 +2252,36 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   background: inherit;
 }
 
-.c25::-webkit-input-placeholder {
+.c26::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c25::-moz-placeholder {
+.c26::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c25:-ms-input-placeholder {
+.c26:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c25::placeholder {
+.c26::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c25[aria-disabled='true'] {
+.c26[aria-disabled='true'] {
   color: inherit;
 }
 
-.c25:focus {
+.c26:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c24 {
+.c25 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -2225,17 +2293,17 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   transition-duration: 0.2s;
 }
 
-.c24:focus-within {
+.c25:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c20 > * {
+.c21 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c20 > * + * {
+.c21 > * + * {
   margin-top: 4px;
 }
 
@@ -2267,12 +2335,18 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                 </h2>
                 <button
                   aria-disabled="false"
-                  aria-label="Close the modal"
                   class="c7 c8"
                   type="button"
                 >
+                  <span
+                    class="c9"
+                  >
+                    Close the modal
+                  </span>
                   <svg
+                    aria-hidden="true"
                     fill="none"
+                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -2288,7 +2362,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
             </div>
             <div>
               <div
-                class="c9"
+                class="c10"
               >
                 <div
                   aria-label="How do you want to upload your assets?"
@@ -2297,17 +2371,17 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                   <button
                     aria-disabled="false"
                     aria-selected="false"
-                    class="c10"
+                    class="c11"
                     id="tabgroup-10-0-tab"
                     role="tab"
                     tabindex="-1"
                     type="button"
                   >
                     <div
-                      class="c11 c12"
+                      class="c12 c13"
                     >
                       <span
-                        class="c13"
+                        class="c14"
                       >
                         From computer
                       </span>
@@ -2317,17 +2391,17 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                     aria-controls="tabgroup-10-1-tabpanel"
                     aria-disabled="false"
                     aria-selected="true"
-                    class="c10"
+                    class="c11"
                     id="tabgroup-10-1-tab"
                     role="tab"
                     tabindex="0"
                     type="button"
                   >
                     <div
-                      class="c11 c14"
+                      class="c12 c15"
                     >
                       <span
-                        class="c15"
+                        class="c16"
                       >
                         From url
                       </span>
@@ -2335,7 +2409,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                   </button>
                 </div>
                 <hr
-                  class="c16 c17"
+                  class="c17 c18"
                 />
               </div>
               <div>
@@ -2347,31 +2421,31 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                 >
                   <form>
                     <div
-                      class="c18"
+                      class="c19"
                     >
                       <div>
                         <div>
                           <div
-                            class="c19 c20"
+                            class="c20 c21"
                             spacing="1"
                           >
                             <label
-                              class="c21"
+                              class="c22"
                               for="textinput-1"
                             >
                               <div
-                                class="c22"
+                                class="c23"
                               >
                                 URL
                               </div>
                             </label>
                             <div
-                              class="c23 c24"
+                              class="c24 c25"
                             >
                               <input
                                 aria-disabled="false"
                                 aria-invalid="false"
-                                class="c25"
+                                class="c26"
                                 id="textinput-1"
                                 name="logo-url"
                                 value=""
@@ -2382,36 +2456,36 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                       </div>
                     </div>
                     <div
-                      class="c3 c26"
+                      class="c3 c27"
                     >
                       <div
                         class="c5"
                       >
                         <div
-                          class="c27 c28"
+                          class="c28 c29"
                         >
                           <button
                             aria-disabled="false"
-                            class="c29 c30"
+                            class="c30 c31"
                             type="button"
                           >
                             <span
-                              class="c31 c32"
+                              class="c32 c33"
                             >
                               Cancel
                             </span>
                           </button>
                         </div>
                         <div
-                          class="c27 c28"
+                          class="c28 c29"
                         >
                           <button
                             aria-disabled="false"
-                            class="c29 c33"
+                            class="c30 c34"
                             type="submit"
                           >
                             <span
-                              class="c31 c32"
+                              class="c32 c33"
                             >
                               Next
                             </span>
@@ -2432,7 +2506,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
 `;
 
 exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`] = `
-.c20 {
+.c21 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -2473,13 +2547,13 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   width: 100%;
 }
 
-.c17 {
+.c18 {
   padding-top: 8px;
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c24 {
+.c25 {
   background: #212134;
   padding: 8px;
   border-radius: 4px;
@@ -2492,7 +2566,7 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   line-height: 1.33;
 }
 
-.c18 {
+.c19 {
   color: #666687;
   display: block;
   white-space: nowrap;
@@ -2502,13 +2576,13 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   line-height: 1.33;
 }
 
-.c19 {
+.c20 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c26 {
+.c27 {
   font-weight: 600;
   color: #ffffff;
   font-size: 0.75rem;
@@ -2561,7 +2635,7 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   justify-content: center;
 }
 
-.c25 {
+.c26 {
   position: absolute;
   z-index: 4;
   display: none;
@@ -2602,20 +2676,32 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
   display: flex;
 }
 
-.c21 {
+.c22 {
   background: #212134;
   padding: 8px;
   border-radius: 4px;
 }
 
-.c23 {
+.c24 {
   font-weight: 600;
   color: #ffffff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c22 {
+.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;
+}
+
+.c23 {
   position: absolute;
   z-index: 4;
   display: none;
@@ -2786,8 +2872,15 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
                     tabindex="0"
                     type="button"
                   >
+                    <span
+                      class="c17"
+                    >
+                      Change logo
+                    </span>
                     <svg
+                      aria-hidden="true"
                       fill="none"
+                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -2803,7 +2896,7 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
               </div>
             </section>
             <div
-              class="c17"
+              class="c18"
             >
               <span>
                 <div
@@ -2812,7 +2905,7 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
                   tabindex="0"
                 >
                   <span
-                    class="c18"
+                    class="c19"
                   >
                     logo.png
                   </span>
@@ -2822,7 +2915,7 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
           </div>
         </div>
         <p
-          class="c19"
+          class="c20"
           id="carouselinput-1-hint"
         >
           Change the admin panel logo (Max dimension: 750x750, Max file size: 100KB)
@@ -2830,7 +2923,7 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
       </div>
     </div>
     <div
-      class="c20"
+      class="c21"
     >
       <p
         aria-live="polite"
@@ -2856,12 +2949,12 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
     data-react-portal="true"
   >
     <div
-      class="c21 c22"
+      class="c22 c23"
       id="tooltip-1"
       role="tooltip"
     >
       <p
-        class="c23"
+        class="c24"
       >
         Change logo
       </p>
@@ -2871,12 +2964,12 @@ exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`]
     data-react-portal="true"
   >
     <div
-      class="c24 c25"
+      class="c25 c26"
       id="tooltip-2"
       role="tooltip"
     >
       <p
-        class="c26"
+        class="c27"
       >
         logo.png
       </p>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
index 85c819433e1..70cfe92b240 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
@@ -272,6 +272,18 @@ describe('Application page', () => {
         max-height: 40%;
       }
 
+      .c51 {
+        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 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -567,7 +579,7 @@ describe('Application page', () => {
         width: 100%;
       }
 
-      .c51 {
+      .c52 {
         padding-top: 8px;
         padding-right: 16px;
         padding-left: 16px;
@@ -580,7 +592,7 @@ describe('Application page', () => {
         line-height: 1.33;
       }
 
-      .c52 {
+      .c53 {
         color: #666687;
         display: block;
         white-space: nowrap;
@@ -590,7 +602,7 @@ describe('Application page', () => {
         line-height: 1.33;
       }
 
-      .c53 {
+      .c54 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
@@ -1015,8 +1027,15 @@ describe('Application page', () => {
                                           tabindex="0"
                                           type="button"
                                         >
+                                          <span
+                                            class="c51"
+                                          >
+                                            Change logo
+                                          </span>
                                           <svg
+                                            aria-hidden="true"
                                             fill="none"
+                                            focusable="false"
                                             height="1em"
                                             viewBox="0 0 24 24"
                                             width="1em"
@@ -1037,8 +1056,15 @@ describe('Application page', () => {
                                           tabindex="0"
                                           type="button"
                                         >
+                                          <span
+                                            class="c51"
+                                          >
+                                            Reset logo
+                                          </span>
                                           <svg
+                                            aria-hidden="true"
                                             fill="none"
+                                            focusable="false"
                                             height="1em"
                                             viewBox="0 0 24 24"
                                             width="1em"
@@ -1056,7 +1082,7 @@ describe('Application page', () => {
                                     </div>
                                   </section>
                                   <div
-                                    class="c51"
+                                    class="c52"
                                   >
                                     <span>
                                       <div
@@ -1065,7 +1091,7 @@ describe('Application page', () => {
                                         tabindex="0"
                                       >
                                         <span
-                                          class="c52"
+                                          class="c53"
                                         >
                                           michka.svg
                                         </span>
@@ -1075,7 +1101,7 @@ describe('Application page', () => {
                                 </div>
                               </div>
                               <p
-                                class="c53"
+                                class="c54"
                                 id="carouselinput-1-hint"
                               >
                                 Change the admin panel logo (Max dimension: 750x750, Max file size: 100KB)
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 e609bc17b50..020aa39b4b5 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
@@ -466,7 +466,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
       </div>
       <nav
         aria-label="pagination"
-        class="sc-fAyhPT"
+        class="sc-bIaGFe"
       >
         <ul
           class="c17 c18"
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
index 73a209afd20..a5e5ac32c84 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
@@ -70,7 +70,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
     const { container } = render(app);
 
     expect(container.firstChild).toMatchInlineSnapshot(`
-      .c43 {
+      .c44 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -82,13 +82,13 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         width: 1px;
       }
 
-      .c44 {
+      .c45 {
         -webkit-animation: gzYjWD 1s infinite linear;
         animation: gzYjWD 1s infinite linear;
         will-change: transform;
       }
 
-      .c41 {
+      .c42 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -106,7 +106,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         justify-content: center;
       }
 
-      .c46 {
+      .c47 {
         -webkit-align-items: flex-end;
         -webkit-box-align: flex-end;
         -ms-flex-align: flex-end;
@@ -124,7 +124,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         justify-content: space-between;
       }
 
-      .c47 {
+      .c48 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -138,7 +138,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         flex-direction: row;
       }
 
-      .c36 {
+      .c37 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -146,7 +146,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         text-transform: uppercase;
       }
 
-      .c61 {
+      .c62 {
         color: #666687;
         font-size: 0.875rem;
         line-height: 1.43;
@@ -293,7 +293,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         fill: #ffffff;
       }
 
-      .c23 {
+      .c24 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -305,7 +305,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         background: #ffffff;
       }
 
-      .c23 .c7 {
+      .c24 .c7 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -316,99 +316,99 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         align-items: center;
       }
 
-      .c23 .c10 {
+      .c24 .c10 {
         color: #ffffff;
       }
 
-      .c23[aria-disabled='true'] {
+      .c24[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c23[aria-disabled='true'] .c10 {
+      .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 .c10 {
+      .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: #f6f6f9;
       }
 
-      .c23:active {
+      .c24:active {
         background-color: #eaeaef;
       }
 
-      .c23 .c10 {
+      .c24 .c10 {
         color: #32324d;
       }
 
-      .c23 svg > g,
-      .c23 svg path {
+      .c24 svg > g,
+      .c24 svg path {
         fill: #32324d;
       }
 
-      .c22 {
+      .c23 {
         padding-top: 4px;
         padding-bottom: 4px;
       }
 
-      .c42 {
+      .c43 {
         background: #ffffff;
         padding: 64px;
       }
 
-      .c45 {
+      .c46 {
         padding-top: 16px;
       }
 
-      .c60 {
+      .c61 {
         padding-left: 8px;
       }
 
-      .c24 {
+      .c25 {
         background: #ffffff;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c27 {
+      .c28 {
         padding-right: 24px;
         padding-left: 24px;
       }
 
-      .c25 {
+      .c26 {
         overflow: hidden;
         border: 1px solid #eaeaef;
       }
 
-      .c29 {
+      .c30 {
         width: 100%;
         white-space: nowrap;
       }
 
-      .c26 {
+      .c27 {
         position: relative;
       }
 
-      .c26:before {
+      .c27:before {
         background: linear-gradient(90deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -418,7 +418,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         left: 0;
       }
 
-      .c26:after {
+      .c27:after {
         background: linear-gradient(270deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -429,39 +429,39 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         top: 0;
       }
 
-      .c28 {
+      .c29 {
         overflow-x: auto;
       }
 
-      .c40 tr:last-of-type {
+      .c41 tr:last-of-type {
         border-bottom: none;
       }
 
-      .c30 {
+      .c31 {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c31 {
+      .c32 {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c31 td,
-      .c31 th {
+      .c32 td,
+      .c32 th {
         padding: 16px;
       }
 
-      .c31 td:first-of-type,
-      .c31 th:first-of-type {
+      .c32 td:first-of-type,
+      .c32 th:first-of-type {
         padding: 0 4px;
       }
 
-      .c31 th {
+      .c32 th {
         padding-top: 0;
         padding-bottom: 0;
         height: 3.5rem;
       }
 
-      .c33 {
+      .c34 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -475,22 +475,22 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         flex-direction: row;
       }
 
-      .c32 {
+      .c33 {
         vertical-align: middle;
         text-align: left;
         color: #666687;
         outline-offset: -4px;
       }
 
-      .c32 input {
+      .c33 input {
         vertical-align: sub;
       }
 
-      .c35 svg {
+      .c36 svg {
         height: 0.25rem;
       }
 
-      .c34 {
+      .c35 {
         margin: 0;
         height: 18px;
         min-width: 18px;
@@ -501,12 +501,12 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         cursor: pointer;
       }
 
-      .c34:checked {
+      .c35:checked {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c34:checked:after {
+      .c35:checked:after {
         content: '';
         display: block;
         position: relative;
@@ -520,21 +520,21 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c34:checked:disabled:after {
+      .c35:checked:disabled:after {
         background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
       }
 
-      .c34:disabled {
+      .c35:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c34:indeterminate {
+      .c35:indeterminate {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c34:indeterminate:after {
+      .c35:indeterminate:after {
         content: '';
         display: block;
         position: relative;
@@ -549,15 +549,27 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c34:indeterminate:disabled {
+      .c35:indeterminate:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c34:indeterminate:disabled:after {
+      .c35:indeterminate:disabled:after {
         background-color: #8e8ea9;
       }
 
+      .c20 {
+        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;
+      }
+
       .c18 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -656,7 +668,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         fill: #666687;
       }
 
-      .c37 {
+      .c38 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -674,30 +686,30 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         border: none;
       }
 
-      .c37 svg > g,
-      .c37 svg path {
+      .c38 svg > g,
+      .c38 svg path {
         fill: #8e8ea9;
       }
 
-      .c37:hover svg > g,
-      .c37:hover svg path {
+      .c38:hover svg > g,
+      .c38:hover svg path {
         fill: #666687;
       }
 
-      .c37:active svg > g,
-      .c37:active svg path {
+      .c38:active svg > g,
+      .c38:active svg path {
         fill: #a5a5ba;
       }
 
-      .c37[aria-disabled='true'] {
+      .c38[aria-disabled='true'] {
         background-color: #eaeaef;
       }
 
-      .c37[aria-disabled='true'] svg path {
+      .c38[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c39 {
+      .c40 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -709,7 +721,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         width: 1px;
       }
 
-      .c52 {
+      .c53 {
         position: absolute;
         left: 0;
         right: 0;
@@ -720,24 +732,24 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         border: none;
       }
 
-      .c52:focus {
+      .c53:focus {
         outline: none;
       }
 
-      .c52[aria-disabled='true'] {
+      .c53[aria-disabled='true'] {
         cursor: not-allowed;
       }
 
-      .c55 {
+      .c56 {
         padding-right: 16px;
         padding-left: 16px;
       }
 
-      .c57 {
+      .c58 {
         padding-left: 12px;
       }
 
-      .c48 {
+      .c49 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -751,7 +763,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         flex-direction: column;
       }
 
-      .c50 {
+      .c51 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -765,7 +777,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         flex-direction: row;
       }
 
-      .c53 {
+      .c54 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -783,7 +795,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         justify-content: space-between;
       }
 
-      .c56 {
+      .c57 {
         color: #32324d;
         display: block;
         white-space: nowrap;
@@ -793,12 +805,12 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         line-height: 1.43;
       }
 
-      .c49 > * {
+      .c50 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c51 {
+      .c52 {
         position: relative;
         border: 1px solid #dcdce4;
         padding-right: 12px;
@@ -814,28 +826,28 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         transition-duration: 0.2s;
       }
 
-      .c51:focus-within {
+      .c52:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c58 {
+      .c59 {
         background: transparent;
         border: none;
         position: relative;
         z-index: 1;
       }
 
-      .c58 svg {
+      .c59 svg {
         height: 0.6875rem;
         width: 0.6875rem;
       }
 
-      .c58 svg path {
+      .c59 svg path {
         fill: #666687;
       }
 
-      .c59 {
+      .c60 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -844,23 +856,23 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         border: none;
       }
 
-      .c59 svg {
+      .c60 svg {
         width: 0.375rem;
       }
 
-      .c54 {
+      .c55 {
         width: 100%;
       }
 
-      .c20 {
+      .c21 {
         color: #32324d;
       }
 
-      .c21 path {
+      .c22 path {
         fill: #32324d;
       }
 
-      .c62 {
+      .c63 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -874,11 +886,11 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         flex-direction: row;
       }
 
-      .c63 > * + * {
+      .c64 > * + * {
         margin-left: 4px;
       }
 
-      .c66 {
+      .c67 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -890,7 +902,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         width: 1px;
       }
 
-      .c64 {
+      .c65 {
         padding: 12px;
         border-radius: 4px;
         -webkit-text-decoration: none;
@@ -903,7 +915,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         outline: none;
       }
 
-      .c64:after {
+      .c65:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -918,11 +930,11 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         border: 2px solid transparent;
       }
 
-      .c64:focus-visible {
+      .c65:focus-visible {
         outline: none;
       }
 
-      .c64:focus-visible:after {
+      .c65:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -933,34 +945,34 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c65 {
+      .c66 {
         font-size: 0.7rem;
         pointer-events: none;
       }
 
-      .c65 svg path {
+      .c66 svg path {
         fill: #c0c0cf;
       }
 
-      .c65:focus svg path,
-      .c65:hover svg path {
+      .c66:focus svg path,
+      .c66:hover svg path {
         fill: #c0c0cf;
       }
 
-      .c67 {
+      .c68 {
         font-size: 0.7rem;
       }
 
-      .c67 svg path {
+      .c68 svg path {
         fill: #666687;
       }
 
-      .c67:focus svg path,
-      .c67:hover svg path {
+      .c68:focus svg path,
+      .c68:hover svg path {
         fill: #4a4a6a;
       }
 
-      .c38 {
+      .c39 {
         -webkit-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         transform: rotate(0deg);
@@ -1163,9 +1175,16 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                     tabindex="0"
                     type="button"
                   >
+                    <span
+                      class="c20"
+                    >
+                      Search
+                    </span>
                     <svg
-                      class="c20 c21"
+                      aria-hidden="true"
+                      class="c21 c22"
                       fill="none"
+                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -1181,11 +1200,11 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                   </button>
                 </span>
                 <div
-                  class="c22"
+                  class="c23"
                 >
                   <button
                     aria-disabled="false"
-                    class="c5 c23"
+                    class="c5 c24"
                     type="button"
                   >
                     <div
@@ -1222,56 +1241,60 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
           class="c13"
         >
           <div
-            class="c24 c25"
+            class="c25 c26"
           >
             <div
-              class="c26"
+              class="c27"
             >
               <div
-                class="c27 c28"
+                class="c28 c29"
               >
                 <table
                   aria-colcount="8"
                   aria-rowcount="1"
-                  class="c29"
+                  class="c30"
                 >
                   <thead
-                    class="c30"
+                    class="c31"
                   >
                     <tr
                       aria-rowindex="1"
-                      class="c31"
+                      class="c32"
                     >
                       <th
                         aria-colindex="1"
-                        class="c32"
+                        class="c33"
                       >
                         <div
-                          class="c33"
+                          class="c34"
                         >
-                          <input
-                            aria-label="Select all entries"
-                            class="c34"
-                            tabindex="0"
-                            type="checkbox"
-                          />
+                          <div
+                            class=""
+                          >
+                            <input
+                              aria-label="Select all entries"
+                              class="c35"
+                              tabindex="0"
+                              type="checkbox"
+                            />
+                          </div>
                           <span
-                            class="c35"
+                            class="c36"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="2"
-                        class="c32"
+                        class="c33"
                         tabindex="-1"
                       >
                         <div
-                          class="c33"
+                          class="c34"
                         >
                           <span>
                             <span
                               aria-labelledby="tooltip-1"
-                              class="c36"
+                              class="c37"
                               label="Firstname"
                               tabindex="-1"
                             >
@@ -1279,19 +1302,26 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c35"
+                            class="c36"
                           >
                             <span>
                               <button
                                 aria-disabled="false"
                                 aria-labelledby="tooltip-3"
-                                class="c18 c37"
+                                class="c18 c38"
                                 tabindex="-1"
                                 type="button"
                               >
+                                <span
+                                  class="c20"
+                                >
+                                  Sort on Firstname
+                                </span>
                                 <svg
-                                  class="c38"
+                                  aria-hidden="true"
+                                  class="c39"
                                   fill="none"
+                                  focusable="false"
                                   height="1em"
                                   viewBox="0 0 14 8"
                                   width="1em"
@@ -1311,15 +1341,15 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                       </th>
                       <th
                         aria-colindex="3"
-                        class="c32"
+                        class="c33"
                       >
                         <div
-                          class="c33"
+                          class="c34"
                         >
                           <span>
                             <button
                               aria-labelledby="tooltip-3"
-                              class="c36"
+                              class="c37"
                               label="Lastname"
                               tabindex="-1"
                             >
@@ -1327,21 +1357,21 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                             </button>
                           </span>
                           <span
-                            class="c35"
+                            class="c36"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="4"
-                        class="c32"
+                        class="c33"
                       >
                         <div
-                          class="c33"
+                          class="c34"
                         >
                           <span>
                             <button
                               aria-labelledby="tooltip-5"
-                              class="c36"
+                              class="c37"
                               label="Email"
                               tabindex="-1"
                             >
@@ -1349,21 +1379,21 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                             </button>
                           </span>
                           <span
-                            class="c35"
+                            class="c36"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="5"
-                        class="c32"
+                        class="c33"
                       >
                         <div
-                          class="c33"
+                          class="c34"
                         >
                           <span>
                             <span
                               aria-labelledby="tooltip-7"
-                              class="c36"
+                              class="c37"
                               label="Roles"
                               tabindex="-1"
                             >
@@ -1371,21 +1401,21 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c35"
+                            class="c36"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="6"
-                        class="c32"
+                        class="c33"
                       >
                         <div
-                          class="c33"
+                          class="c34"
                         >
                           <span>
                             <button
                               aria-labelledby="tooltip-9"
-                              class="c36"
+                              class="c37"
                               label="Username"
                               tabindex="-1"
                             >
@@ -1393,21 +1423,21 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                             </button>
                           </span>
                           <span
-                            class="c35"
+                            class="c36"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="7"
-                        class="c32"
+                        class="c33"
                       >
                         <div
-                          class="c33"
+                          class="c34"
                         >
                           <span>
                             <span
                               aria-labelledby="tooltip-11"
-                              class="c36"
+                              class="c37"
                               label="User status"
                               tabindex="-1"
                             >
@@ -1415,61 +1445,61 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c35"
+                            class="c36"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="8"
-                        class="c32"
+                        class="c33"
                         tabindex="-1"
                       >
                         <div
-                          class="c33"
+                          class="c34"
                         >
                           <div
-                            class="c39"
+                            class="c40"
                           >
                             Actions
                           </div>
                           <span
-                            class="c35"
+                            class="c36"
                           />
                         </div>
                       </th>
                     </tr>
                   </thead>
                   <tbody
-                    class="c40"
+                    class="c41"
                   >
                     <tr
                       aria-rowindex="2"
-                      class="c31"
+                      class="c32"
                     >
                       <td
                         aria-colindex="1"
-                        class="c32"
+                        class="c33"
                         colspan="8"
                         tabindex="-1"
                       >
                         <div
-                          class="c41"
+                          class="c42"
                         >
                           <div
-                            class="c42"
+                            class="c43"
                           >
                             <div
                               aria-live="assertive"
                               role="alert"
                             >
                               <div
-                                class="c43"
+                                class="c44"
                               >
                                 Loading content...
                               </div>
                               <img
                                 aria-hidden="true"
-                                class="c44"
+                                class="c45"
                                 src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2MyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQyLjU1NjMgMTEuOTgxNkMzOS40ODQgMTAuMzA3MSAzNS44NTc1IDkuMjkwOTcgMzIuMzM1NCA5LjEzNTIxQzI4LjY0NDMgOC45Mjg4OCAyNC44Mjk1IDkuNzIzMTggMjEuMzMzNiAxMS40MTI5QzIwLjkxMjMgMTEuNTkwMSAyMC41Mzc2IDExLjgxMDEgMjAuMTcyMiAxMi4wMjQ5TDIwLjAxMDggMTIuMTE3OUMxOS44Nzc0IDEyLjE5NTEgMTkuNzQ0MSAxMi4yNzI0IDE5LjYwOCAxMi4zNTM2QzE5LjMyNTMgMTIuNTE0NiAxOS4wNDkyIDEyLjY3NDQgMTguNzU0NCAxMi44NzkyQzE4LjU0NjMgMTMuMDMyOSAxOC4zMzk1IDEzLjE3NTkgMTguMTMwMSAxMy4zMjNDMTcuNTY1OCAxMy43MjA4IDE2Ljk4NjggMTQuMTMxNyAxNi40OTgzIDE0LjU5NzlDMTQuODQ3NiAxNS45NTI0IDEzLjU1NzEgMTcuNjA3NSAxMi42MDcxIDE4LjkyMTRDMTAuNDM2NSAyMi4xNTY2IDkuMDg2MjIgMjUuOTU2NyA4LjgwNzAyIDI5LjYxNDNMOC43NzY0IDMwLjE1ODhDOC43MzMyOCAzMC45MTk2IDguNjg0NzYgMzEuNzA1NyA4Ljc1MzUzIDMyLjQ1NTVDOC43NjY0OCAzMi42MDg0IDguNzY2MSAzMi43NjM4IDguNzc1MDYgMzIuOTE0QzguNzg4OTUgMzMuMjI5IDguODAxNTIgMzMuNTM3MyA4Ljg0NiAzMy44NjcyTDkuMDczOTYgMzUuNDIyMUM5LjA5NzU2IDM1LjU3NjQgOS4xMTk4IDM1Ljc0MTMgOS4xNjMzIDM1LjkyNjNMOS42NTkxOSAzNy45MjcyTDEwLjEzOCAzOS4yODIzQzEwLjI3MjkgMzkuNjY3MyAxMC40MTU4IDQwLjA3NTEgMTAuNiA0MC40M0MxMi4wMjkyIDQzLjYzNyAxNC4xNDI1IDQ2LjQ1NzggMTYuNzA2MyA0OC41ODVDMTkuMDUwOCA1MC41Mjk2IDIxLjgyNCA1Mi4wMDIzIDI0Ljc0OTEgNTIuODQ1MkwyNi4yMzcxIDUzLjIzNzZDMjYuMzc4MSA1My4yNjkzIDI2LjQ5MjYgNTMuMjg4OSAyNi42MDMxIDUzLjMwNThMMjYuNzc3NSA1My4zMzExQzI3LjAwNTIgNTMuMzYzNiAyNy4yMTk1IDUzLjM5ODYgMjcuNDQ0NSA1My40MzVDMjcuODU5OCA1My41MDc2IDI4LjI2NzIgNTMuNTc0OCAyOC43MDc5IDUzLjYxODNMMzAuNTY0MSA1My43MjI5QzMwLjk1MTYgNTMuNzI0OSAzMS4zMzUyIDUzLjcwNjggMzEuNzA4MSA1My42ODc0QzMxLjkwMzkgNTMuNjgxIDMyLjA5ODQgNTMuNjY4MSAzMi4zMjg4IDUzLjY2MkMzNC41MjUzIDUzLjQ3NzIgMzYuNTEwNiA1My4wNjM0IDM4LjA1MTYgNTIuNDY1MkMzOC4xNzY5IDUyLjQxNzEgMzguMzAwOCA1Mi4zNzk2IDM4LjQyMzQgNTIuMzM1NUMzOC42NzI3IDUyLjI0OTkgMzguOTI1OSA1Mi4xNjcgMzkuMTQzMiA1Mi4wNTk5TDQwLjg1OTEgNTEuMjYyNkw0Mi41NzAyIDUwLjI2NkM0Mi45MDA5IDUwLjA2ODIgNDMuMDIwNSA0OS42NDE0IDQyLjgyODIgNDkuMjk4NEM0Mi42MzIgNDguOTUyNiA0Mi4yMDM0IDQ4LjgzMDggNDEuODYzNCA0OS4wMTY2TDQwLjE3OTIgNDkuOTIxOEwzOC40OTk1IDUwLjYyMjRDMzguMzE2OSA1MC42OTUzIDM4LjEyMSA1MC43NTM0IDM3LjkyMjQgNTAuODE1NUMzNy43ODM4IDUwLjg0ODkgMzcuNjUxOCA1MC44OTgzIDM3LjUwMTIgNTAuOTQwOEMzNi4wNzExIDUxLjQzNSAzNC4yNDQ1IDUxLjc0MjUgMzIuMjQ0IDUxLjgzNDZDMzIuMDQ0MiA1MS44MzgzIDMxLjg0NzEgNTEuODM3OSAzMS42NTQgNTEuODQwM0MzMS4zMDUxIDUxLjg0MTQgMzAuOTYwMiA1MS44NDUxIDMwLjYzOTIgNTEuODMwNUwyOC45MTc3IDUxLjY3MjVDMjguNTQ3NiA1MS42MTkgMjguMTY5NSA1MS41NDI3IDI3Ljc4NDggNTEuNDY3OEMyNy41NjM5IDUxLjQxNjcgMjcuMzM3NiA1MS4zNzM3IDI3LjEyOTkgNTEuMzM3NEwyNi45NTI5IDUxLjI5ODdDMjYuODcwNCA1MS4yODM0IDI2Ljc3NzIgNTEuMjY2NyAyNi43MzMzIDUxLjI1NDNMMjUuMzQ2NiA1MC44MzIyQzIyLjc2NTEgNDkuOTc4OSAyMC4zMyA0OC41NzI5IDE4LjI5NDIgNDYuNzU1N0MxNi4xMDU2IDQ0Ljc5NTEgMTQuMzMzOSA0Mi4yMzM1IDEzLjE3NDIgMzkuMzU4MkMxMi4wMjc2IDM2LjYwMTMgMTEuNTk4OCAzMy4yNzkyIDExLjk3MTYgMzAuMDA3NkMxMi4zMTQ1IDI3LjAyMTMgMTMuMzk0OCAyNC4xNjM1IDE1LjE4NTggMjEuNTA4M0MxNS4zMDM0IDIxLjMzMzkgMTUuNDIxIDIxLjE1OTYgMTUuNTIxMiAyMS4wMTk2QzE2LjQzMDkgMTkuODY4OCAxNy41NDA4IDE4LjU1ODkgMTguOTQ4MyAxNy40OTZDMTkuMzM2NyAxNy4xNTI1IDE5Ljc4NjIgMTYuODU2IDIwLjI2MTEgMTYuNTQ3OEMyMC40ODc4IDE2LjQwMDkgMjAuNzA3OSAxNi4yNTUzIDIwLjg5MDcgMTYuMTMwNkMyMS4wOTc0IDE2LjAwNDggMjEuMzE4OCAxNS44ODMxIDIxLjUzNDggMTUuNzY5NEMyMS42NzYxIDE1LjY5NzUgMjEuODE2MiAxNS42MTkgMjEuOTM4OCAxNS41NTc2TDIyLjEwMDIgMTUuNDY0NkMyMi40MDAyIDE1LjMwMzcgMjIuNjc0OSAxNS4xNTQ2IDIyLjk5MDggMTUuMDM5TDI0LjExODYgMTQuNTcxNUMyNC4zMzk5IDE0LjQ4NDQgMjQuNTcxOCAxNC40MTU5IDI0Ljc5OTcgMTQuMzQ0N0MyNC45NTMgMTQuMjk4MiAyNS4wOTgyIDE0LjI2MzUgMjUuMjYzNSAxNC4yMDc4QzI1Ljc4NiAxNC4wMTgyIDI2LjMyODMgMTMuOTExMiAyNi45MTA1IDEzLjc5NjVDMjcuMTE3IDEzLjc1NzEgMjcuMzMwMiAxMy43MTYzIDI3LjU2MDggMTMuNjU4NUMyNy43NTUzIDEzLjYxMSAyNy45NzM3IDEzLjU5NjkgMjguMjA4MiAxMy41NzYyQzI4LjM2NCAxMy41NjAzIDI4LjUxNzIgMTMuNTQ4MyAyOC42MzE4IDEzLjUzMzNDMjguNzg3NiAxMy41MTczIDI4LjkzNDIgMTMuNTA2NiAyOS4wOTI3IDEzLjQ4NjdDMjkuMzI4NSAxMy40NTU1IDI5LjU0NTYgMTMuNDM0NyAyOS43NDk0IDEzLjQzMzdDMzAuMDIzNyAxMy40NCAzMC4yOTk0IDEzLjQzNTcgMzAuNTc3NyAxMy40Mjc0QzMxLjA4MTEgMTMuNDIxIDMxLjU1NzkgMTMuNDE5NyAzMi4wMzE4IDEzLjQ5MTRDMzQuOTY2NCAxMy43MzUyIDM3LjcxNDQgMTQuNjA4NSA0MC4yMDUyIDE2LjA4NjhDNDIuMzQ4OSAxNy4zNjU1IDQ0LjI3MTYgMTkuMTUyNSA0NS43NjA3IDIxLjI2NEM0Ny4wMjU1IDIzLjA2MjggNDcuOTc1NiAyNS4wNTI4IDQ4LjQ5MjggMjcuMDM5M0M0OC41NzIgMjcuMzE3NiA0OC42Mjk5IDI3LjU5MzEgNDguNjgzOSAyNy44NjU5QzQ4LjcxNTQgMjguMDQyOCA0OC43NTYzIDI4LjIxNDUgNDguNzg5MiAyOC4zNjM2QzQ4LjgwMzcgMjguNDU0MSA0OC44MjA4IDI4LjU0MDYgNDguODQ0NSAyOC42MjU4QzQ4Ljg3NDkgMjguNzQ0MyA0OC44OTg2IDI4Ljg2NCA0OC45MTE2IDI4Ljk2NTFMNDguOTc5MyAyOS42MDQ3QzQ4Ljk5MjIgMjkuNzc0OCA0OS4wMTMyIDI5LjkzMzEgNDkuMDMwMSAzMC4wODg3QzQ5LjA2NjggMzAuMzI2OCA0OS4wODg5IDMwLjU2MDggNDkuMDk2NCAzMC43NTYxTDQ5LjEwODMgMzEuOTAwMUM0OS4xMzEyIDMyLjMzMDcgNDkuMDg5IDMyLjcxMTYgNDkuMDUyMiAzMy4wNjczQzQ5LjAzODQgMzMuMjU5OCA0OS4wMTI2IDMzLjQ0NDMgNDkuMDEyMyAzMy41ODI0QzQ4Ljk5NjEgMzMuNjkyNiA0OC45OTE4IDMzLjc5MzUgNDguOTgzNiAzMy44OTE3QzQ4Ljk3NTMgMzQuMDA3MiA0OC45NzI0IDM0LjExNDggNDguOTQxNCAzNC4yNTU0TDQ4LjU0NDkgMzYuMzA1OUM0OC4zMTM0IDM3Ljg2MjMgNDkuMzc5MyAzOS4zMzY1IDUwLjk0ODggMzkuNTgyMkM1Mi4wNDE3IDM5Ljc2MDEgNTMuMTUzNiAzOS4yODE5IDUzLjc3MTEgMzguMzY2NEM1NC4wMDYzIDM4LjAxNzYgNTQuMTYwNCAzNy42MjU3IDU0LjIyMjcgMzcuMjA2NEw1NC41MjE3IDM1LjI1NzRDNTQuNTUxNCAzNS4wNzU2IDU0LjU3MiAzNC44MyA1NC41ODQ2IDM0LjU3OTFMNTQuNjAyOCAzNC4yMzM4QzU0LjYwOTggMzQuMDU5OCA1NC42MjIzIDMzLjg3NzkgNTQuNjM0NyAzMy42Nzg4QzU0LjY3MzQgMzMuMTA1MiA1NC43MTYzIDMyLjQ0NzkgNTQuNjYxOSAzMS44MDU4TDU0LjU4NjcgMzAuNDI4OUM1NC41NjIyIDMwLjA5NTIgNTQuNTA5NyAyOS43NiA1NC40NTU5IDI5LjQxODFDNTQuNDMxIDI5LjI1NzIgNTQuNDA0OCAyOS4wODk2IDU0LjM4MjYgMjguOTA3NEw1NC4yNjg3IDI4LjEwNEM1NC4yMzMyIDI3LjkyNDQgNTQuMTgwNCAyNy43MjczIDU0LjEzMjkgMjcuNTM5Nkw1NC4wNjQzIDI3LjI0NTRDNTQuMDE5NSAyNy4wNzEgNTMuOTc3MyAyNi44OTI3IDUzLjkzMzggMjYuNzA3NkM1My44NDU1IDI2LjMzMDkgNTMuNzQ3OSAyNS45NDIyIDUzLjYxMyAyNS41NTcxQzUyLjg0IDIzLjAyOTIgNTEuNTM4MyAyMC41MTk0IDQ5LjgzMzggMTguMjc5OUM0Ny44NTQ0IDE1LjY4MiA0NS4zMzMzIDEzLjUwODcgNDIuNTU2MyAxMS45ODE2WiIgZmlsbD0iIzQ5NDVGRiIvPgo8L3N2Zz4K"
                               />
                             </div>
@@ -1483,20 +1513,20 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
             </div>
           </div>
           <div
-            class="c45"
+            class="c46"
           >
             <div
-              class="c46"
+              class="c47"
             >
               <div
-                class="c47"
+                class="c48"
               >
                 <div>
                   <div
-                    class="c48 c49"
+                    class="c49 c50"
                   >
                     <div
-                      class="c50 c51"
+                      class="c51 c52"
                     >
                       <button
                         aria-disabled="false"
@@ -1504,21 +1534,21 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                         aria-haspopup="listbox"
                         aria-label="Entries per page"
                         aria-labelledby="select-1-label select-1-content"
-                        class="c52"
+                        class="c53"
                         id="select-1"
                         type="button"
                       />
                       <div
-                        class="c53 c54"
+                        class="c54 c55"
                       >
                         <div
-                          class="c50"
+                          class="c51"
                         >
                           <div
-                            class="c55"
+                            class="c56"
                           >
                             <span
-                              class="c56"
+                              class="c57"
                               id="select-1-content"
                             >
                               10
@@ -1526,11 +1556,11 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                           </div>
                         </div>
                         <div
-                          class="c50"
+                          class="c51"
                         >
                           <button
                             aria-hidden="true"
-                            class="c57 c58 c59"
+                            class="c58 c59 c60"
                             tabindex="-1"
                             type="button"
                           >
@@ -1555,10 +1585,10 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                   </div>
                 </div>
                 <div
-                  class="c60"
+                  class="c61"
                 >
                   <label
-                    class="c61"
+                    class="c62"
                     for="page-size"
                   >
                     Entries per page
@@ -1567,21 +1597,21 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
               </div>
               <nav
                 aria-label="pagination"
-                class="sc-haTkiu"
+                class="sc-cfJLRR"
               >
                 <ul
-                  class="c62 c63"
+                  class="c63 c64"
                 >
                   <li>
                     <a
                       aria-current="page"
                       aria-disabled="true"
-                      class="c64 c65 active"
+                      class="c65 c66 active"
                       href="/settings/user"
                       tabindex="-1"
                     >
                       <div
-                        class="c66"
+                        class="c67"
                       >
                         Go to previous page
                       </div>
@@ -1604,11 +1634,11 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                     <a
                       aria-current="page"
                       aria-disabled="false"
-                      class="c64 c67 active"
+                      class="c65 c68 active"
                       href="/settings/user?pageSize=10&page=1&sort=firstname"
                     >
                       <div
-                        class="c66"
+                        class="c67"
                       >
                         Go to next page
                       </div>
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 4ce084b9289..ca8c8d05184 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
@@ -130,20 +130,20 @@ describe('Admin | containers | ListView', () => {
         width: 60%;
       }
 
-      .c46 {
+      .c47 {
         background: #eaeaef;
       }
 
-      .c48 {
+      .c49 {
         background: #f0f0ff;
         padding: 20px;
       }
 
-      .c50 {
+      .c51 {
         background: #d9d8ff;
       }
 
-      .c52 {
+      .c53 {
         padding-left: 12px;
       }
 
@@ -243,20 +243,20 @@ describe('Admin | containers | ListView', () => {
         height: 0.25rem;
       }
 
-      .c47 {
+      .c48 {
         height: 1px;
         border: none;
         margin: 0;
       }
 
-      .c53 {
+      .c54 {
         font-weight: 600;
         color: #4945ff;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c51 {
+      .c52 {
         height: 1.5rem;
         width: 1.5rem;
         border-radius: 50%;
@@ -274,16 +274,16 @@ 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%;
@@ -358,6 +358,18 @@ describe('Admin | containers | ListView', () => {
         background-color: #8e8ea9;
       }
 
+      .c45 {
+        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;
+      }
+
       .c43 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -685,7 +697,7 @@ describe('Admin | containers | ListView', () => {
         padding-left: 8px;
       }
 
-      .c45 {
+      .c46 {
         color: #d02b20;
         padding-left: 8px;
       }
@@ -857,12 +869,16 @@ describe('Admin | containers | ListView', () => {
                             <div
                               class="c25"
                             >
-                              <input
-                                aria-label="Select all entries"
-                                class="c26"
-                                tabindex="0"
-                                type="checkbox"
-                              />
+                              <div
+                                class=""
+                              >
+                                <input
+                                  aria-label="Select all entries"
+                                  class="c26"
+                                  tabindex="0"
+                                  type="checkbox"
+                                />
+                              </div>
                               <span
                                 class="c27"
                               />
@@ -959,14 +975,18 @@ describe('Admin | containers | ListView', () => {
                             class="c24"
                             role="button"
                           >
-                            <input
-                              aria-label="Select test"
-                              class="c26"
-                              id="select"
-                              name="select"
-                              tabindex="-1"
-                              type="checkbox"
-                            />
+                            <div
+                              class=""
+                            >
+                              <input
+                                aria-label="Select test"
+                                class="c26"
+                                id="select"
+                                name="select"
+                                tabindex="-1"
+                                type="checkbox"
+                              />
+                            </div>
                           </td>
                           <td
                             aria-colindex="2"
@@ -1048,8 +1068,15 @@ describe('Admin | containers | ListView', () => {
                                   tabindex="-1"
                                   type="button"
                                 >
+                                  <span
+                                    class="c45"
+                                  >
+                                    Update
+                                  </span>
                                   <svg
+                                    aria-hidden="true"
                                     fill="none"
+                                    focusable="false"
                                     height="1em"
                                     viewBox="0 0 24 24"
                                     width="1em"
@@ -1073,8 +1100,15 @@ describe('Admin | containers | ListView', () => {
                                   tabindex="-1"
                                   type="button"
                                 >
+                                  <span
+                                    class="c45"
+                                  >
+                                    Delete
+                                  </span>
                                   <svg
+                                    aria-hidden="true"
                                     fill="none"
+                                    focusable="false"
                                     height="1em"
                                     viewBox="0 0 24 24"
                                     width="1em"
@@ -1101,14 +1135,18 @@ describe('Admin | containers | ListView', () => {
                             class="c24"
                             role="button"
                           >
-                            <input
-                              aria-label="Select test2"
-                              class="c26"
-                              id="select"
-                              name="select"
-                              tabindex="-1"
-                              type="checkbox"
-                            />
+                            <div
+                              class=""
+                            >
+                              <input
+                                aria-label="Select test2"
+                                class="c26"
+                                id="select"
+                                name="select"
+                                tabindex="-1"
+                                type="checkbox"
+                              />
+                            </div>
                           </td>
                           <td
                             aria-colindex="2"
@@ -1164,7 +1202,7 @@ describe('Admin | containers | ListView', () => {
                                   </div>
                                   <span
                                     aria-hidden="true"
-                                    class="c45"
+                                    class="c46"
                                   >
                                     Disabled
                                   </span>
@@ -1190,8 +1228,15 @@ describe('Admin | containers | ListView', () => {
                                   tabindex="-1"
                                   type="button"
                                 >
+                                  <span
+                                    class="c45"
+                                  >
+                                    Update
+                                  </span>
                                   <svg
+                                    aria-hidden="true"
                                     fill="none"
+                                    focusable="false"
                                     height="1em"
                                     viewBox="0 0 24 24"
                                     width="1em"
@@ -1215,8 +1260,15 @@ describe('Admin | containers | ListView', () => {
                                   tabindex="-1"
                                   type="button"
                                 >
+                                  <span
+                                    class="c45"
+                                  >
+                                    Delete
+                                  </span>
                                   <svg
+                                    aria-hidden="true"
                                     fill="none"
+                                    focusable="false"
                                     height="1em"
                                     viewBox="0 0 24 24"
                                     width="1em"
@@ -1238,17 +1290,17 @@ describe('Admin | containers | ListView', () => {
                 </div>
                 <div>
                   <hr
-                    class="c46 c47"
+                    class="c47 c48"
                   />
                   <button
-                    class="c48 c49"
+                    class="c49 c50"
                   >
                     <div
                       class="c25"
                     >
                       <div
                         aria-hidden="true"
-                        class="c50 c51"
+                        class="c51 c52"
                       >
                         <svg
                           fill="none"
@@ -1264,10 +1316,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/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 031396fe3ba..9010df3a616 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,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
-.c45 {
+.c46 {
   padding-bottom: 56px;
 }
 
@@ -10,11 +10,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   grid-template-columns: auto 1fr;
 }
 
-.c46 {
+.c47 {
   overflow-x: hidden;
 }
 
-.c47 {
+.c48 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -26,7 +26,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c32 {
+.c33 {
   padding-left: 32px;
 }
 
@@ -37,40 +37,40 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   padding-left: 24px;
 }
 
-.c8 {
+.c9 {
   padding-top: 16px;
 }
 
-.c9 {
+.c10 {
   background: #eaeaef;
 }
 
-.c12 {
+.c13 {
   padding-top: 8px;
   padding-bottom: 16px;
 }
 
-.c16 {
+.c17 {
   padding-top: 8px;
   padding-right: 16px;
   padding-bottom: 8px;
   padding-left: 24px;
 }
 
-.c18 {
+.c19 {
   padding-right: 24px;
   position: relative;
 }
 
-.c19 {
+.c20 {
   text-align: left;
 }
 
-.c22 {
+.c23 {
   padding-right: 4px;
 }
 
-.c25 {
+.c26 {
   background: #eaeaef;
   padding: 4px;
   border-radius: 4px;
@@ -83,25 +83,25 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   transform: translateY(-50%);
 }
 
-.c27 {
+.c28 {
   background: #f6f6f9;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 32px;
 }
 
-.c30 {
+.c31 {
   padding-left: 8px;
 }
 
-.c38 {
+.c39 {
   padding-top: 8px;
   padding-right: 16px;
   padding-bottom: 8px;
   padding-left: 32px;
 }
 
-.c44 {
+.c45 {
   background: #f6f6f9;
   padding-top: 8px;
   padding-bottom: 8px;
@@ -138,7 +138,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c13 {
+.c14 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -152,7 +152,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c20 {
+.c21 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -166,7 +166,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c26 {
+.c27 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -184,7 +184,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   justify-content: center;
 }
 
-.c40 {
+.c41 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -209,7 +209,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   line-height: 1.22;
 }
 
-.c23 {
+.c24 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -217,19 +217,31 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   text-transform: uppercase;
 }
 
-.c31 {
+.c32 {
   color: #32324d;
   font-size: 0.875rem;
   line-height: 1.43;
 }
 
-.c43 {
+.c44 {
   font-weight: 500;
   color: #32324d;
   font-size: 0.875rem;
   line-height: 1.43;
 }
 
+.c8 {
+  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;
+}
+
 .c6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -328,18 +340,18 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   fill: #666687;
 }
 
-.c10 {
+.c11 {
   height: 1px;
   border: none;
   margin: 0;
 }
 
-.c11 {
+.c12 {
   width: 1.5rem;
   background-color: #dcdce4;
 }
 
-.c28 {
+.c29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -357,46 +369,46 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c28 svg > * {
+.c29 svg > * {
   fill: #666687;
 }
 
-.c28.active {
+.c29.active {
   background-color: #f0f0ff;
   border-right: 2px solid #4945ff;
 }
 
-.c28.active svg > * {
+.c29.active svg > * {
   fill: #271fe0;
 }
 
-.c28.active .c4 {
+.c29.active .c4 {
   color: #271fe0;
   font-weight: 500;
 }
 
-.c28:focus-visible {
+.c29:focus-visible {
   outline-offset: -2px;
 }
 
-.c29 {
+.c30 {
   width: 0.75rem;
   height: 0.25rem;
 }
 
-.c29 * {
+.c30 * {
   fill: #666687;
 }
 
-.c39 svg {
+.c40 svg {
   height: 0.25rem;
 }
 
-.c39 svg path {
+.c40 svg path {
   fill: #4a4a6a;
 }
 
-.c41 {
+.c42 {
   border: none;
   padding: 0;
   background: transparent;
@@ -410,7 +422,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c42 {
+.c43 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -425,31 +437,31 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   transform: rotateX(0deg);
 }
 
-.c14 > * {
+.c15 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c14 > * + * {
+.c15 > * + * {
   margin-top: 8px;
 }
 
-.c15 > * {
+.c16 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c15 > * + * {
+.c16 > * + * {
   margin-top: 4px;
 }
 
-.c21 {
+.c22 {
   border: none;
   padding: 0;
   background: transparent;
 }
 
-.c24 {
+.c25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -463,29 +475,29 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   transform: rotateX(0deg);
 }
 
-.c17 svg {
+.c18 svg {
   height: 0.25rem;
 }
 
-.c17 svg path {
+.c18 svg path {
   fill: #8e8ea9;
 }
 
-.c33 {
+.c34 {
   margin-top: 8px;
 }
 
-.c36 {
+.c37 {
   padding-right: 8px;
 }
 
-.c37 {
+.c38 {
   color: #4945ff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c34 {
+.c35 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -499,22 +511,22 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c35 {
+.c36 {
   background: transparent;
   border: none;
   position: relative;
   outline: none;
 }
 
-.c35[aria-disabled='true'] {
+.c36[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c35[aria-disabled='true'] svg path {
+.c36[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c35 svg {
+.c36 svg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -522,11 +534,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   font-size: 0.625rem;
 }
 
-.c35 svg path {
+.c36 svg path {
   fill: #4945ff;
 }
 
-.c35:after {
+.c36:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -541,11 +553,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c35:focus-visible {
+.c36:focus-visible {
   outline: none;
 }
 
-.c35:focus-visible:after {
+.c36:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -583,8 +595,15 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               tabindex="0"
               type="button"
             >
+              <span
+                class="c8"
+              >
+                Search
+              </span>
               <svg
+                aria-hidden="true"
                 fill="none"
+                focusable="false"
                 height="1em"
                 viewBox="0 0 24 24"
                 width="1em"
@@ -601,47 +620,47 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
           </span>
         </div>
         <div
-          class="c8"
+          class="c9"
         >
           <hr
-            class="c9 c10 c11"
+            class="c10 c11 c12"
           />
         </div>
       </div>
       <div
-        class="c12"
+        class="c13"
       >
         <ol
-          class="c13 c14"
+          class="c14 c15"
           spacing="2"
         >
           <li>
             <div
-              class="c13 c15"
+              class="c14 c16"
               spacing="1"
             >
               <div
-                class="c16 c17"
+                class="c17 c18"
               >
                 <div
-                  class="c18"
+                  class="c19"
                 >
                   <button
                     aria-controls="subnav-list-4"
                     aria-expanded="true"
-                    class="c19 c20 c21"
+                    class="c20 c21 c22"
                   >
                     <div
-                      class="c22"
+                      class="c23"
                     >
                       <span
-                        class="c4 c23"
+                        class="c4 c24"
                       >
                         Collection Types
                       </span>
                     </div>
                     <div
-                      class="c24"
+                      class="c25"
                     >
                       <svg
                         aria-hidden="true"
@@ -661,11 +680,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     </div>
                   </button>
                   <div
-                    class="c25 c26"
+                    class="c26 c27"
                     transform="translateY(-50%)"
                   >
                     <span
-                      class="c4 c23"
+                      class="c4 c24"
                     >
                       2
                     </span>
@@ -677,14 +696,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               >
                 <li>
                   <a
-                    class="c27 c28"
+                    class="c28 c29"
                     href="/plugins/content-type-builder/content-types/application::address.address"
                   >
                     <div
-                      class="c20"
+                      class="c21"
                     >
                       <svg
-                        class="c29"
+                        class="c30"
                         fill="none"
                         height="1em"
                         viewBox="0 0 4 4"
@@ -699,10 +718,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <div
-                        class="c30"
+                        class="c31"
                       >
                         <span
-                          class="c4 c31"
+                          class="c4 c32"
                         >
                           Address
                         </span>
@@ -712,14 +731,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                 </li>
                 <li>
                   <a
-                    class="c27 c28"
+                    class="c28 c29"
                     href="/plugins/content-type-builder/content-types/application::category.category"
                   >
                     <div
-                      class="c20"
+                      class="c21"
                     >
                       <svg
-                        class="c29"
+                        class="c30"
                         fill="none"
                         height="1em"
                         viewBox="0 0 4 4"
@@ -734,10 +753,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <div
-                        class="c30"
+                        class="c31"
                       >
                         <span
-                          class="c4 c31"
+                          class="c4 c32"
                         >
                           Category
                         </span>
@@ -748,16 +767,16 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               </ol>
             </div>
             <div
-              class="c32"
+              class="c33"
             >
               <button
                 aria-disabled="false"
-                class="c33 c34 c35"
+                class="c34 c35 c36"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="c36"
+                  class="c37"
                 >
                   <svg
                     fill="none"
@@ -773,7 +792,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="c37"
+                  class="c38"
                 >
                   Create new collection type
                 </span>
@@ -782,31 +801,31 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
           </li>
           <li>
             <div
-              class="c13 c15"
+              class="c14 c16"
               spacing="1"
             >
               <div
-                class="c16 c17"
+                class="c17 c18"
               >
                 <div
-                  class="c18"
+                  class="c19"
                 >
                   <button
                     aria-controls="subnav-list-5"
                     aria-expanded="true"
-                    class="c19 c20 c21"
+                    class="c20 c21 c22"
                   >
                     <div
-                      class="c22"
+                      class="c23"
                     >
                       <span
-                        class="c4 c23"
+                        class="c4 c24"
                       >
                         Single Types
                       </span>
                     </div>
                     <div
-                      class="c24"
+                      class="c25"
                     >
                       <svg
                         aria-hidden="true"
@@ -826,11 +845,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     </div>
                   </button>
                   <div
-                    class="c25 c26"
+                    class="c26 c27"
                     transform="translateY(-50%)"
                   >
                     <span
-                      class="c4 c23"
+                      class="c4 c24"
                     >
                       1
                     </span>
@@ -842,14 +861,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               >
                 <li>
                   <a
-                    class="c27 c28"
+                    class="c28 c29"
                     href="/plugins/content-type-builder/content-types/application::homepage.homepage"
                   >
                     <div
-                      class="c20"
+                      class="c21"
                     >
                       <svg
-                        class="c29"
+                        class="c30"
                         fill="none"
                         height="1em"
                         viewBox="0 0 4 4"
@@ -864,10 +883,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <div
-                        class="c30"
+                        class="c31"
                       >
                         <span
-                          class="c4 c31"
+                          class="c4 c32"
                         >
                           Homepage
                         </span>
@@ -878,16 +897,16 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               </ol>
             </div>
             <div
-              class="c32"
+              class="c33"
             >
               <button
                 aria-disabled="false"
-                class="c33 c34 c35"
+                class="c34 c35 c36"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="c36"
+                  class="c37"
                 >
                   <svg
                     fill="none"
@@ -903,7 +922,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="c37"
+                  class="c38"
                 >
                   Create new single type
                 </span>
@@ -912,31 +931,31 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
           </li>
           <li>
             <div
-              class="c13 c15"
+              class="c14 c16"
               spacing="1"
             >
               <div
-                class="c16 c17"
+                class="c17 c18"
               >
                 <div
-                  class="c18"
+                  class="c19"
                 >
                   <button
                     aria-controls="subnav-list-6"
                     aria-expanded="true"
-                    class="c19 c20 c21"
+                    class="c20 c21 c22"
                   >
                     <div
-                      class="c22"
+                      class="c23"
                     >
                       <span
-                        class="c4 c23"
+                        class="c4 c24"
                       >
                         Components
                       </span>
                     </div>
                     <div
-                      class="c24"
+                      class="c25"
                     >
                       <svg
                         aria-hidden="true"
@@ -956,11 +975,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     </div>
                   </button>
                   <div
-                    class="c25 c26"
+                    class="c26 c27"
                     transform="translateY(-50%)"
                   >
                     <span
-                      class="c4 c23"
+                      class="c4 c24"
                     >
                       2
                     </span>
@@ -975,18 +994,18 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <div
-                      class="c38 c39"
+                      class="c39 c40"
                     >
                       <div
-                        class="c40"
+                        class="c41"
                       >
                         <button
                           aria-controls="subnav-list-7"
                           aria-expanded="true"
-                          class="c41"
+                          class="c42"
                         >
                           <div
-                            class="c42"
+                            class="c43"
                           >
                             <svg
                               aria-hidden="true"
@@ -1005,10 +1024,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c30"
+                            class="c31"
                           >
                             <span
-                              class="c4 c43"
+                              class="c4 c44"
                             >
                               Basic
                             </span>
@@ -1021,14 +1040,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     >
                       <li>
                         <a
-                          class="c44 c28"
+                          class="c45 c29"
                           href="/plugins/content-type-builder/component-categories/basic/basic.simple"
                         >
                           <div
-                            class="c20"
+                            class="c21"
                           >
                             <svg
-                              class="c29"
+                              class="c30"
                               fill="none"
                               height="1em"
                               viewBox="0 0 4 4"
@@ -1043,10 +1062,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <div
-                              class="c30"
+                              class="c31"
                             >
                               <span
-                                class="c4 c31"
+                                class="c4 c32"
                               >
                                 Simple
                               </span>
@@ -1062,18 +1081,18 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <div
-                      class="c38 c39"
+                      class="c39 c40"
                     >
                       <div
-                        class="c40"
+                        class="c41"
                       >
                         <button
                           aria-controls="subnav-list-8"
                           aria-expanded="true"
-                          class="c41"
+                          class="c42"
                         >
                           <div
-                            class="c42"
+                            class="c43"
                           >
                             <svg
                               aria-hidden="true"
@@ -1092,10 +1111,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c30"
+                            class="c31"
                           >
                             <span
-                              class="c4 c43"
+                              class="c4 c44"
                             >
                               Default
                             </span>
@@ -1108,14 +1127,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     >
                       <li>
                         <a
-                          class="c44 c28"
+                          class="c45 c29"
                           href="/plugins/content-type-builder/component-categories/default/default.closingperiod"
                         >
                           <div
-                            class="c20"
+                            class="c21"
                           >
                             <svg
-                              class="c29"
+                              class="c30"
                               fill="none"
                               height="1em"
                               viewBox="0 0 4 4"
@@ -1130,10 +1149,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <div
-                              class="c30"
+                              class="c31"
                             >
                               <span
-                                class="c4 c31"
+                                class="c4 c32"
                               >
                                 Closingperiod
                               </span>
@@ -1143,14 +1162,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                       </li>
                       <li>
                         <a
-                          class="c44 c28"
+                          class="c45 c29"
                           href="/plugins/content-type-builder/component-categories/default/default.dish"
                         >
                           <div
-                            class="c20"
+                            class="c21"
                           >
                             <svg
-                              class="c29"
+                              class="c30"
                               fill="none"
                               height="1em"
                               viewBox="0 0 4 4"
@@ -1165,10 +1184,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <div
-                              class="c30"
+                              class="c31"
                             >
                               <span
-                                class="c4 c31"
+                                class="c4 c32"
                               >
                                 Dish
                               </span>
@@ -1182,16 +1201,16 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               </ol>
             </div>
             <div
-              class="c32"
+              class="c33"
             >
               <button
                 aria-disabled="false"
-                class="c33 c34 c35"
+                class="c34 c35 c36"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="c36"
+                  class="c37"
                 >
                   <svg
                     fill="none"
@@ -1207,7 +1226,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="c37"
+                  class="c38"
                 >
                   Create a new component
                 </span>
@@ -1218,13 +1237,13 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
       </div>
     </nav>
     <div
-      class="c45 c46"
+      class="c46 c47"
     >
       <div />
     </div>
   </div>
   <div
-    class="c47"
+    class="c48"
   >
     <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 b7167b95d7e..377274661a8 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
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ListView /> renders and matches the snapshot 1`] = `
-.c81 {
+.c82 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -31,7 +31,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   justify-content: flex-end;
 }
 
-.c46 {
+.c47 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -86,12 +86,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   margin-top: 16px;
 }
 
-.c55 > * {
+.c56 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c55 > * + * {
+.c56 > * + * {
   margin-top: 4px;
 }
 
@@ -143,21 +143,21 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c50 {
+.c51 {
   font-weight: 600;
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c58 {
+.c59 {
   font-weight: 600;
   color: #4945ff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c65 {
+.c66 {
   font-weight: 600;
   color: #32324d;
   display: block;
@@ -474,60 +474,60 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   padding-left: 24px;
 }
 
-.c41 {
+.c42 {
   padding-right: 0px;
   padding-left: 24px;
 }
 
-.c44 {
+.c45 {
   padding-top: 16px;
   padding-bottom: 16px;
 }
 
-.c47 {
+.c48 {
   background: #dcdce4;
 }
 
-.c49 {
+.c50 {
   padding-left: 12px;
 }
 
-.c52 {
+.c53 {
   padding-left: 40px;
 }
 
-.c59 {
+.c60 {
   padding-right: 16px;
   padding-left: 16px;
   border-radius: borderRadius;
 }
 
-.c64 {
+.c65 {
   max-width: calc(8.75rem - 32px);
 }
 
-.c70 {
+.c71 {
   background: #d9d8ff;
 }
 
-.c72 {
+.c73 {
   background: #eaeaef;
 }
 
-.c74 {
+.c75 {
   background: #f0f0ff;
   padding: 20px;
 }
 
-.c77 {
+.c78 {
   background: #d9d8ff;
 }
 
-.c79 {
+.c80 {
   padding-left: 12px;
 }
 
-.c76 {
+.c77 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -541,20 +541,20 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c73 {
+.c74 {
   height: 1px;
   border: none;
   margin: 0;
 }
 
-.c80 {
+.c81 {
   font-weight: 600;
   color: #4945ff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c78 {
+.c79 {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 50%;
@@ -572,22 +572,34 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c78 svg {
+.c79 svg {
   height: 0.625rem;
   width: 0.625rem;
 }
 
-.c78 svg path {
+.c79 svg path {
   fill: #4945ff;
 }
 
-.c75 {
+.c76 {
   border-radius: 0 0 4px 4px;
   display: block;
   width: 100%;
   border: none;
 }
 
+.c40 {
+  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;
+}
+
 .c38 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -823,7 +835,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   line-height: 1.5;
 }
 
-.c63 {
+.c64 {
   width: 2rem !important;
   height: 2rem !important;
   padding: 0.5625rem;
@@ -831,27 +843,27 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background: #eaeaef;
 }
 
-.c63 path {
+.c64 path {
   fill: #8e8ea9;
 }
 
-.c67 {
+.c68 {
   position: absolute;
   display: none;
   top: 5px;
   right: 0.5rem;
 }
 
-.c67 svg {
+.c68 svg {
   width: 0.625rem;
   height: 0.625rem;
 }
 
-.c67 svg path {
+.c68 svg path {
   fill: #4945ff;
 }
 
-.c60 {
+.c61 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -875,58 +887,58 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c60.active,
-.c60:hover {
+.c61.active,
+.c61:hover {
   border: 1px solid #d9d8ff;
   background: #f0f0ff;
 }
 
-.c60.active .c66,
-.c60:hover .c66 {
+.c61.active .c67,
+.c61:hover .c67 {
   display: block;
 }
 
-.c60.active .c62,
-.c60:hover .c62 {
+.c61.active .c63,
+.c61:hover .c63 {
   background: #d9d8ff;
 }
 
-.c60.active .c62 path,
-.c60:hover .c62 path {
+.c61.active .c63 path,
+.c61:hover .c63 path {
   fill: #4945ff;
 }
 
-.c60.active .c29,
-.c60:hover .c29 {
+.c61.active .c29,
+.c61:hover .c29 {
   color: #4945ff;
 }
 
-.c61 {
+.c62 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
 }
 
-.c40.component-row,
-.c40.dynamiczone-row {
+.c41.component-row,
+.c41.dynamiczone-row {
   position: relative;
   border-top: none !important;
 }
 
-.c40.component-row table tr:first-child,
-.c40.dynamiczone-row table tr:first-child {
+.c41.component-row table tr:first-child,
+.c41.dynamiczone-row table tr:first-child {
   border-top: none;
 }
 
-.c40.component-row > td:first-of-type,
-.c40.dynamiczone-row > td:first-of-type {
+.c41.component-row > td:first-of-type,
+.c41.dynamiczone-row > td:first-of-type {
   padding: 0 0 0 1.25rem;
   position: relative;
 }
 
-.c40.component-row > td:first-of-type::before,
-.c40.dynamiczone-row > td:first-of-type::before {
+.c41.component-row > td:first-of-type::before,
+.c41.dynamiczone-row > td:first-of-type::before {
   content: '';
   width: 0.25rem;
   height: calc(100% - 40px);
@@ -937,29 +949,29 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background: #eaeaef;
 }
 
-.c40.dynamiczone-row > td:first-of-type {
+.c41.dynamiczone-row > td:first-of-type {
   padding: 0;
 }
 
-.c51.component-row,
-.c51.dynamiczone-row {
+.c52.component-row,
+.c52.dynamiczone-row {
   position: relative;
   border-top: none !important;
 }
 
-.c51.component-row table tr:first-child,
-.c51.dynamiczone-row table tr:first-child {
+.c52.component-row table tr:first-child,
+.c52.dynamiczone-row table tr:first-child {
   border-top: none;
 }
 
-.c51.component-row > td:first-of-type,
-.c51.dynamiczone-row > td:first-of-type {
+.c52.component-row > td:first-of-type,
+.c52.dynamiczone-row > td:first-of-type {
   padding: 0 0 0 1.25rem;
   position: relative;
 }
 
-.c51.component-row > td:first-of-type::before,
-.c51.dynamiczone-row > td:first-of-type::before {
+.c52.component-row > td:first-of-type::before,
+.c52.dynamiczone-row > td:first-of-type::before {
   content: '';
   width: 0.25rem;
   height: calc(100% - 40px);
@@ -970,11 +982,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background-color: #d9d8ff;
 }
 
-.c51.dynamiczone-row > td:first-of-type {
+.c52.dynamiczone-row > td:first-of-type {
   padding: 0;
 }
 
-.c57 {
+.c58 {
   width: 2rem;
   height: 2rem;
   padding: 0.5625rem;
@@ -982,11 +994,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c57 path {
+.c58 path {
   fill: #4945ff;
 }
 
-.c53 {
+.c54 {
   height: 5.625rem;
   position: absolute;
   width: 100%;
@@ -994,16 +1006,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   left: 0;
 }
 
-.c54 {
+.c55 {
   width: 100%;
   overflow-x: auto;
 }
 
-.c68 {
+.c69 {
   padding-top: 5.625rem;
 }
 
-.c56 {
+.c57 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1054,7 +1066,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   outline-offset: -4px;
 }
 
-.c48 {
+.c49 {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 50%;
@@ -1072,16 +1084,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c48 svg {
+.c49 svg {
   height: 0.625rem;
   width: 0.625rem;
 }
 
-.c48 svg path {
+.c49 svg path {
   fill: #666687;
 }
 
-.c71 {
+.c72 {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 50%;
@@ -1099,16 +1111,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c71 svg {
+.c72 svg {
   height: 0.625rem;
   width: 0.625rem;
 }
 
-.c71 svg path {
+.c72 svg path {
   fill: #4945ff;
 }
 
-.c45 {
+.c46 {
   border-radius: 0 0 4px 4px;
   display: block;
   width: 100%;
@@ -1117,20 +1129,20 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   left: -0.25rem;
 }
 
-.c42 {
+.c43 {
   position: absolute;
   left: -1.125rem;
   top: 0px;
 }
 
-.c42:before {
+.c43:before {
   content: '';
   width: 0.25rem;
   height: 0.75rem;
   display: block;
 }
 
-.c43 {
+.c44 {
   position: relative;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1140,11 +1152,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   transform: translate(-0.5px,-1px);
 }
 
-.c43 * {
+.c44 * {
   fill: #eaeaef;
 }
 
-.c69 {
+.c70 {
   position: relative;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1154,7 +1166,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   transform: translate(-0.5px,-1px);
 }
 
-.c69 * {
+.c70 * {
   fill: #d9d8ff;
 }
 
@@ -1467,8 +1479,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Edit postal_code
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1491,8 +1510,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Delete postal_code
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1580,8 +1606,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Edit categories
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1604,8 +1637,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Delete categories
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1691,8 +1731,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Edit cover
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1715,8 +1762,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Delete cover
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1802,8 +1856,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Edit images
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1826,8 +1887,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Delete images
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1911,8 +1979,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Edit city
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -1935,8 +2010,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Delete city
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2022,8 +2104,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Edit json
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2046,8 +2135,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Delete json
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2127,8 +2223,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Edit slug
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2151,8 +2254,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Delete slug
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2242,8 +2352,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Edit notrepeat_req
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2266,8 +2383,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Delete notrepeat_req
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2285,7 +2409,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c40 component-row"
+                  class="c41 component-row"
                 >
                   <td
                     colspan="12"
@@ -2294,7 +2418,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       class="c27"
                     >
                       <div
-                        class="c41"
+                        class="c42"
                       >
                         <table>
                           <tbody>
@@ -2306,10 +2430,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c42"
+                                  class="c43"
                                 >
                                   <svg
-                                    class="c43"
+                                    class="c44"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -2384,8 +2508,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
+                                        <span
+                                          class="c40"
+                                        >
+                                          Edit name
+                                        </span>
                                         <svg
+                                          aria-hidden="true"
                                           fill="none"
+                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -2408,8 +2539,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
+                                        <span
+                                          class="c40"
+                                        >
+                                          Delete name
+                                        </span>
                                         <svg
+                                          aria-hidden="true"
                                           fill="none"
+                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -2434,10 +2572,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c42"
+                                  class="c43"
                                 >
                                   <svg
-                                    class="c43"
+                                    class="c44"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -2512,8 +2650,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
+                                        <span
+                                          class="c40"
+                                        >
+                                          Edit popo
+                                        </span>
                                         <svg
+                                          aria-hidden="true"
                                           fill="none"
+                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -2536,8 +2681,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
+                                        <span
+                                          class="c40"
+                                        >
+                                          Delete popo
+                                        </span>
                                         <svg
+                                          aria-hidden="true"
                                           fill="none"
+                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -2562,10 +2714,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c42"
+                                  class="c43"
                                 >
                                   <svg
-                                    class="c43"
+                                    class="c44"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -2640,8 +2792,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
+                                        <span
+                                          class="c40"
+                                        >
+                                          Edit poq
+                                        </span>
                                         <svg
+                                          aria-hidden="true"
                                           fill="none"
+                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -2664,8 +2823,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
+                                        <span
+                                          class="c40"
+                                        >
+                                          Delete poq
+                                        </span>
                                         <svg
+                                          aria-hidden="true"
                                           fill="none"
+                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -2686,15 +2852,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </table>
                       </div>
                       <button
-                        class="c44 c45"
+                        class="c45 c46"
                         type="button"
                       >
                         <div
-                          class="c46"
+                          class="c47"
                         >
                           <div
                             aria-hidden="true"
-                            class="c47 c48"
+                            class="c48 c49"
                           >
                             <svg
                               fill="none"
@@ -2710,10 +2876,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c49"
+                            class="c50"
                           >
                             <span
-                              class="c29 c50"
+                              class="c29 c51"
                             >
                               Add another field to this component
                             </span>
@@ -2796,8 +2962,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Edit Compopo
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2820,8 +2993,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Delete Compopo
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -2839,7 +3019,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c40 component-row"
+                  class="c41 component-row"
                 >
                   <td
                     colspan="12"
@@ -2848,7 +3028,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       class="c27"
                     >
                       <div
-                        class="c41"
+                        class="c42"
                       >
                         <table>
                           <tbody>
@@ -2860,10 +3040,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c42"
+                                  class="c43"
                                 >
                                   <svg
-                                    class="c43"
+                                    class="c44"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -2938,8 +3118,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
+                                        <span
+                                          class="c40"
+                                        >
+                                          Edit dede
+                                        </span>
                                         <svg
+                                          aria-hidden="true"
                                           fill="none"
+                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -2962,8 +3149,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
+                                        <span
+                                          class="c40"
+                                        >
+                                          Delete dede
+                                        </span>
                                         <svg
+                                          aria-hidden="true"
                                           fill="none"
+                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -2988,10 +3182,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c42"
+                                  class="c43"
                                 >
                                   <svg
-                                    class="c43"
+                                    class="c44"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -3066,8 +3260,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
+                                        <span
+                                          class="c40"
+                                        >
+                                          Edit dada
+                                        </span>
                                         <svg
+                                          aria-hidden="true"
                                           fill="none"
+                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -3090,8 +3291,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
+                                        <span
+                                          class="c40"
+                                        >
+                                          Delete dada
+                                        </span>
                                         <svg
+                                          aria-hidden="true"
                                           fill="none"
+                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -3116,10 +3324,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c42"
+                                  class="c43"
                                 >
                                   <svg
-                                    class="c43"
+                                    class="c44"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -3194,8 +3402,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
+                                        <span
+                                          class="c40"
+                                        >
+                                          Edit papi
+                                        </span>
                                         <svg
+                                          aria-hidden="true"
                                           fill="none"
+                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -3218,8 +3433,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         tabindex="0"
                                         type="button"
                                       >
+                                        <span
+                                          class="c40"
+                                        >
+                                          Delete papi
+                                        </span>
                                         <svg
+                                          aria-hidden="true"
                                           fill="none"
+                                          focusable="false"
                                           height="1em"
                                           viewBox="0 0 24 24"
                                           width="1em"
@@ -3240,15 +3462,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </table>
                       </div>
                       <button
-                        class="c44 c45"
+                        class="c45 c46"
                         type="button"
                       >
                         <div
-                          class="c46"
+                          class="c47"
                         >
                           <div
                             aria-hidden="true"
-                            class="c47 c48"
+                            class="c48 c49"
                           >
                             <svg
                               fill="none"
@@ -3264,10 +3486,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c49"
+                            class="c50"
                           >
                             <span
-                              class="c29 c50"
+                              class="c29 c51"
                             >
                               Add another field to this component
                             </span>
@@ -3344,8 +3566,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Edit DynamicZone
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -3368,8 +3597,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             tabindex="0"
                             type="button"
                           >
+                            <span
+                              class="c40"
+                            >
+                              Delete DynamicZone
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -3387,27 +3623,27 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c51 dynamiczone-row"
+                  class="c52 dynamiczone-row"
                 >
                   <td
                     colspan="12"
                   >
                     <div
-                      class="c52 c53"
+                      class="c53 c54"
                     >
                       <div
-                        class="c17 c18 c54"
+                        class="c17 c18 c55"
                         spacing="2"
                       >
                         <button
                           type="button"
                         >
                           <div
-                            class="c23 c55 c56"
+                            class="c23 c56 c57"
                             spacing="1"
                           >
                             <svg
-                              class="c57"
+                              class="c58"
                               fill="none"
                               height="1em"
                               viewBox="0 0 24 24"
@@ -3420,7 +3656,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <span
-                              class="c29 c58"
+                              class="c29 c59"
                             >
                               Add a component
                             </span>
@@ -3430,15 +3666,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           type="button"
                         >
                           <div
-                            class="c59 c60 active"
+                            class="c60 c61 active"
                           >
                             <div
-                              class="c23 c55 c61"
+                              class="c23 c56 c62"
                               spacing="1"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="svg-inline--fa fa-adjust c62 c63"
+                                class="svg-inline--fa fa-adjust c63 c64"
                                 data-icon="adjust"
                                 data-prefix="fas"
                                 focusable="false"
@@ -3452,15 +3688,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 />
                               </svg>
                               <div
-                                class="c64"
+                                class="c65"
                               >
                                 <span
-                                  class="c29 c65"
+                                  class="c29 c66"
                                 />
                               </div>
                             </div>
                             <div
-                              class="c66 c67"
+                              class="c67 c68"
                               role="button"
                               tabindex="0"
                             >
@@ -3483,15 +3719,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           type="button"
                         >
                           <div
-                            class="c59 c60"
+                            class="c60 c61"
                           >
                             <div
-                              class="c23 c55 c61"
+                              class="c23 c56 c62"
                               spacing="1"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="svg-inline--fa fa-address-book c62 c63"
+                                class="svg-inline--fa fa-address-book c63 c64"
                                 data-icon="address-book"
                                 data-prefix="fas"
                                 focusable="false"
@@ -3505,15 +3741,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 />
                               </svg>
                               <div
-                                class="c64"
+                                class="c65"
                               >
                                 <span
-                                  class="c29 c65"
+                                  class="c29 c66"
                                 />
                               </div>
                             </div>
                             <div
-                              class="c66 c67"
+                              class="c67 c68"
                               role="button"
                               tabindex="0"
                             >
@@ -3536,15 +3772,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           type="button"
                         >
                           <div
-                            class="c59 c60"
+                            class="c60 c61"
                           >
                             <div
-                              class="c23 c55 c61"
+                              class="c23 c56 c62"
                               spacing="1"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="svg-inline--fa fa-calendar c62 c63"
+                                class="svg-inline--fa fa-calendar c63 c64"
                                 data-icon="calendar"
                                 data-prefix="fas"
                                 focusable="false"
@@ -3558,15 +3794,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 />
                               </svg>
                               <div
-                                class="c64"
+                                class="c65"
                               >
                                 <span
-                                  class="c29 c65"
+                                  class="c29 c66"
                                 />
                               </div>
                             </div>
                             <div
-                              class="c66 c67"
+                              class="c67 c68"
                               role="button"
                               tabindex="0"
                             >
@@ -3589,15 +3825,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           type="button"
                         >
                           <div
-                            class="c59 c60"
+                            class="c60 c61"
                           >
                             <div
-                              class="c23 c55 c61"
+                              class="c23 c56 c62"
                               spacing="1"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="svg-inline--fa fa-cannabis c62 c63"
+                                class="svg-inline--fa fa-cannabis c63 c64"
                                 data-icon="cannabis"
                                 data-prefix="fas"
                                 focusable="false"
@@ -3611,15 +3847,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 />
                               </svg>
                               <div
-                                class="c64"
+                                class="c65"
                               >
                                 <span
-                                  class="c29 c65"
+                                  class="c29 c66"
                                 />
                               </div>
                             </div>
                             <div
-                              class="c66 c67"
+                              class="c67 c68"
                               role="button"
                               tabindex="0"
                             >
@@ -3641,7 +3877,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       </div>
                     </div>
                     <div
-                      class="c68"
+                      class="c69"
                     >
                       <div
                         class=""
@@ -3650,7 +3886,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c51 component-row"
+                              class="c52 component-row"
                             >
                               <td
                                 colspan="12"
@@ -3659,7 +3895,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   class="c27"
                                 >
                                   <div
-                                    class="c41"
+                                    class="c42"
                                   >
                                     <table>
                                       <tbody>
@@ -3671,10 +3907,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c42"
+                                              class="c43"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -3749,8 +3985,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Edit name
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -3773,8 +4016,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Delete name
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -3799,10 +4049,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c42"
+                                              class="c43"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -3877,8 +4127,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Edit mail
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -3901,8 +4158,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Delete mail
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -3927,10 +4191,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c42"
+                                              class="c43"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4005,8 +4269,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Edit phone
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4029,8 +4300,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Delete phone
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4051,15 +4329,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c44 c45"
+                                    class="c45 c46"
                                     type="button"
                                   >
                                     <div
-                                      class="c46"
+                                      class="c47"
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c70 c71"
+                                        class="c71 c72"
                                       >
                                         <svg
                                           fill="none"
@@ -4075,10 +4353,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c49"
+                                        class="c50"
                                       >
                                         <span
-                                          class="c29 c58"
+                                          class="c29 c59"
                                         >
                                           Add another field to this component
                                         </span>
@@ -4098,7 +4376,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c51 component-row"
+                              class="c52 component-row"
                             >
                               <td
                                 colspan="12"
@@ -4107,7 +4385,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   class="c27"
                                 >
                                   <div
-                                    class="c41"
+                                    class="c42"
                                   >
                                     <table>
                                       <tbody>
@@ -4119,10 +4397,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c42"
+                                              class="c43"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4197,8 +4475,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Edit name
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4221,8 +4506,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Delete name
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4247,10 +4539,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c42"
+                                              class="c43"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4325,8 +4617,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Edit description
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4349,8 +4648,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Delete description
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4375,10 +4681,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c42"
+                                              class="c43"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4453,8 +4759,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Edit price
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4477,8 +4790,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Delete price
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4503,10 +4823,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c42"
+                                              class="c43"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4583,8 +4903,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Edit picture
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4607,8 +4934,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Delete picture
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4633,10 +4967,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c42"
+                                              class="c43"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4713,8 +5047,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Edit very_long_description
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4737,8 +5078,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Delete very_long_description
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4763,10 +5111,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c42"
+                                              class="c43"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4845,8 +5193,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Edit categories
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4869,8 +5224,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Delete categories
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -4891,15 +5253,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c44 c45"
+                                    class="c45 c46"
                                     type="button"
                                   >
                                     <div
-                                      class="c46"
+                                      class="c47"
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c70 c71"
+                                        class="c71 c72"
                                       >
                                         <svg
                                           fill="none"
@@ -4915,10 +5277,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c49"
+                                        class="c50"
                                       >
                                         <span
-                                          class="c29 c58"
+                                          class="c29 c59"
                                         >
                                           Add another field to this component
                                         </span>
@@ -4938,7 +5300,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c51 component-row"
+                              class="c52 component-row"
                             >
                               <td
                                 colspan="12"
@@ -4947,7 +5309,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   class="c27"
                                 >
                                   <div
-                                    class="c41"
+                                    class="c42"
                                   >
                                     <table>
                                       <tbody>
@@ -4959,10 +5321,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c42"
+                                              class="c43"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5037,8 +5399,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Edit label
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5061,8 +5430,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Delete label
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5087,10 +5463,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c42"
+                                              class="c43"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5165,8 +5541,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Edit time
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5189,8 +5572,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Delete time
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5215,10 +5605,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c42"
+                                              class="c43"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5300,8 +5690,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Edit dishrep
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5324,8 +5721,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Delete dishrep
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -5343,7 +5747,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                         </tr>
                                         <tr
-                                          class="c40 component-row"
+                                          class="c41 component-row"
                                         >
                                           <td
                                             colspan="12"
@@ -5352,7 +5756,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c27"
                                             >
                                               <div
-                                                class="c41"
+                                                class="c42"
                                               >
                                                 <table>
                                                   <tbody>
@@ -5364,10 +5768,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c42"
+                                                          class="c43"
                                                         >
                                                           <svg
-                                                            class="c43"
+                                                            class="c44"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -5442,8 +5846,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
+                                                                <span
+                                                                  class="c40"
+                                                                >
+                                                                  Edit name
+                                                                </span>
                                                                 <svg
+                                                                  aria-hidden="true"
                                                                   fill="none"
+                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -5466,8 +5877,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
+                                                                <span
+                                                                  class="c40"
+                                                                >
+                                                                  Delete name
+                                                                </span>
                                                                 <svg
+                                                                  aria-hidden="true"
                                                                   fill="none"
+                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -5492,10 +5910,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c42"
+                                                          class="c43"
                                                         >
                                                           <svg
-                                                            class="c43"
+                                                            class="c44"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -5570,8 +5988,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
+                                                                <span
+                                                                  class="c40"
+                                                                >
+                                                                  Edit description
+                                                                </span>
                                                                 <svg
+                                                                  aria-hidden="true"
                                                                   fill="none"
+                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -5594,8 +6019,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
+                                                                <span
+                                                                  class="c40"
+                                                                >
+                                                                  Delete description
+                                                                </span>
                                                                 <svg
+                                                                  aria-hidden="true"
                                                                   fill="none"
+                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -5620,10 +6052,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c42"
+                                                          class="c43"
                                                         >
                                                           <svg
-                                                            class="c43"
+                                                            class="c44"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -5698,8 +6130,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
+                                                                <span
+                                                                  class="c40"
+                                                                >
+                                                                  Edit price
+                                                                </span>
                                                                 <svg
+                                                                  aria-hidden="true"
                                                                   fill="none"
+                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -5722,8 +6161,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
+                                                                <span
+                                                                  class="c40"
+                                                                >
+                                                                  Delete price
+                                                                </span>
                                                                 <svg
+                                                                  aria-hidden="true"
                                                                   fill="none"
+                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -5748,10 +6194,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c42"
+                                                          class="c43"
                                                         >
                                                           <svg
-                                                            class="c43"
+                                                            class="c44"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -5828,8 +6274,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
+                                                                <span
+                                                                  class="c40"
+                                                                >
+                                                                  Edit picture
+                                                                </span>
                                                                 <svg
+                                                                  aria-hidden="true"
                                                                   fill="none"
+                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -5852,8 +6305,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
+                                                                <span
+                                                                  class="c40"
+                                                                >
+                                                                  Delete picture
+                                                                </span>
                                                                 <svg
+                                                                  aria-hidden="true"
                                                                   fill="none"
+                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -5878,10 +6338,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c42"
+                                                          class="c43"
                                                         >
                                                           <svg
-                                                            class="c43"
+                                                            class="c44"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -5958,8 +6418,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
+                                                                <span
+                                                                  class="c40"
+                                                                >
+                                                                  Edit very_long_description
+                                                                </span>
                                                                 <svg
+                                                                  aria-hidden="true"
                                                                   fill="none"
+                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -5982,8 +6449,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
+                                                                <span
+                                                                  class="c40"
+                                                                >
+                                                                  Delete very_long_description
+                                                                </span>
                                                                 <svg
+                                                                  aria-hidden="true"
                                                                   fill="none"
+                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -6008,10 +6482,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c42"
+                                                          class="c43"
                                                         >
                                                           <svg
-                                                            class="c43"
+                                                            class="c44"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -6090,8 +6564,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
+                                                                <span
+                                                                  class="c40"
+                                                                >
+                                                                  Edit categories
+                                                                </span>
                                                                 <svg
+                                                                  aria-hidden="true"
                                                                   fill="none"
+                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -6114,8 +6595,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
+                                                                <span
+                                                                  class="c40"
+                                                                >
+                                                                  Delete categories
+                                                                </span>
                                                                 <svg
+                                                                  aria-hidden="true"
                                                                   fill="none"
+                                                                  focusable="false"
                                                                   height="1em"
                                                                   viewBox="0 0 24 24"
                                                                   width="1em"
@@ -6136,15 +6624,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </table>
                                               </div>
                                               <button
-                                                class="c44 c45"
+                                                class="c45 c46"
                                                 type="button"
                                               >
                                                 <div
-                                                  class="c46"
+                                                  class="c47"
                                                 >
                                                   <div
                                                     aria-hidden="true"
-                                                    class="c47 c48"
+                                                    class="c48 c49"
                                                   >
                                                     <svg
                                                       fill="none"
@@ -6160,10 +6648,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     </svg>
                                                   </div>
                                                   <div
-                                                    class="c49"
+                                                    class="c50"
                                                   >
                                                     <span
-                                                      class="c29 c50"
+                                                      class="c29 c51"
                                                     >
                                                       Add another field to this component
                                                     </span>
@@ -6177,15 +6665,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c44 c45"
+                                    class="c45 c46"
                                     type="button"
                                   >
                                     <div
-                                      class="c46"
+                                      class="c47"
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c70 c71"
+                                        class="c71 c72"
                                       >
                                         <svg
                                           fill="none"
@@ -6201,10 +6689,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c49"
+                                        class="c50"
                                       >
                                         <span
-                                          class="c29 c58"
+                                          class="c29 c59"
                                         >
                                           Add another field to this component
                                         </span>
@@ -6224,7 +6712,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c51 component-row"
+                              class="c52 component-row"
                             >
                               <td
                                 colspan="12"
@@ -6233,7 +6721,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   class="c27"
                                 >
                                   <div
-                                    class="c41"
+                                    class="c42"
                                   >
                                     <table>
                                       <tbody>
@@ -6245,10 +6733,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c42"
+                                              class="c43"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -6323,8 +6811,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Edit name
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -6347,8 +6842,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Delete name
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -6373,10 +6875,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c42"
+                                              class="c43"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -6453,8 +6955,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Edit media
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -6477,8 +6986,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Delete media
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -6503,10 +7019,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c42"
+                                              class="c43"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -6581,8 +7097,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Edit is_available
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -6605,8 +7128,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     tabindex="0"
                                                     type="button"
                                                   >
+                                                    <span
+                                                      class="c40"
+                                                    >
+                                                      Delete is_available
+                                                    </span>
                                                     <svg
+                                                      aria-hidden="true"
                                                       fill="none"
+                                                      focusable="false"
                                                       height="1em"
                                                       viewBox="0 0 24 24"
                                                       width="1em"
@@ -6627,15 +7157,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c44 c45"
+                                    class="c45 c46"
                                     type="button"
                                   >
                                     <div
-                                      class="c46"
+                                      class="c47"
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c70 c71"
+                                        class="c71 c72"
                                       >
                                         <svg
                                           fill="none"
@@ -6651,10 +7181,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c49"
+                                        class="c50"
                                       >
                                         <span
-                                          class="c29 c58"
+                                          class="c29 c59"
                                         >
                                           Add another field to this component
                                         </span>
@@ -6675,17 +7205,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
           </div>
           <div>
             <hr
-              class="c72 c73"
+              class="c73 c74"
             />
             <button
-              class="c74 c75"
+              class="c75 c76"
             >
               <div
-                class="c76"
+                class="c77"
               >
                 <div
                   aria-hidden="true"
-                  class="c77 c78"
+                  class="c78 c79"
                 >
                   <svg
                     fill="none"
@@ -6701,10 +7231,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="c79"
+                  class="c80"
                 >
                   <span
-                    class="c80"
+                    class="c81"
                   >
                     Add another field to this collection type
                   </span>
@@ -6717,7 +7247,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c81"
+    class="c82"
   >
     <p
       aria-live="polite"
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 ede94b11a4d..268f2cead96 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
@@ -33,7 +33,19 @@ describe('<SearchURLQuery />', () => {
     const { container } = render(makeApp(history));
 
     expect(container).toMatchInlineSnapshot(`
-      .c4 {
+      .c5 {
+        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;
+      }
+
+      .c2 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -143,11 +155,11 @@ describe('<SearchURLQuery />', () => {
         fill: #666687;
       }
 
-      .c2 {
+      .c3 {
         color: #32324d;
       }
 
-      .c3 path {
+      .c4 path {
         fill: #32324d;
       }
 
@@ -160,9 +172,16 @@ describe('<SearchURLQuery />', () => {
             tabindex="0"
             type="button"
           >
+            <span
+              class="c2"
+            >
+              Search
+            </span>
             <svg
-              class="c2 c3"
+              aria-hidden="true"
+              class="c3 c4"
               fill="none"
+              focusable="false"
               height="1em"
               viewBox="0 0 24 24"
               width="1em"
@@ -178,7 +197,7 @@ describe('<SearchURLQuery />', () => {
           </button>
         </span>
         <div
-          class="c4"
+          class="c5"
         >
           <p
             aria-live="polite"
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 8ec5fe6872b..7a90b5638ef 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
@@ -29,7 +29,7 @@ describe('DocAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c31 {
+      .c32 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -41,12 +41,12 @@ describe('DocAssetCard', () => {
         width: 1px;
       }
 
-      .c15 {
+      .c16 {
         width: 100%;
         height: 5.5rem;
       }
 
-      .c16 {
+      .c17 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -64,10 +64,22 @@ describe('DocAssetCard', () => {
         justify-content: center;
       }
 
-      .c22 {
+      .c23 {
         padding-top: 4px;
       }
 
+      .c15 {
+        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 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -184,14 +196,14 @@ describe('DocAssetCard', () => {
         position: end;
       }
 
-      .c19 {
+      .c20 {
         padding-top: 8px;
         padding-right: 12px;
         padding-bottom: 8px;
         padding-left: 12px;
       }
 
-      .c27 {
+      .c28 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
@@ -230,7 +242,7 @@ describe('DocAssetCard', () => {
         flex-direction: row;
       }
 
-      .c20 {
+      .c21 {
         -webkit-align-items: flex-start;
         -webkit-box-align: flex-start;
         -ms-flex-align: flex-start;
@@ -244,7 +256,7 @@ describe('DocAssetCard', () => {
         flex-direction: row;
       }
 
-      .c28 {
+      .c29 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -283,20 +295,20 @@ describe('DocAssetCard', () => {
         right: 12px;
       }
 
-      .c23 {
+      .c24 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c24 {
+      .c25 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c30 {
+      .c31 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -304,14 +316,14 @@ describe('DocAssetCard', () => {
         text-transform: uppercase;
       }
 
-      .c26 {
+      .c27 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c29 {
+      .c30 {
         margin-left: 4px;
       }
 
@@ -383,7 +395,7 @@ describe('DocAssetCard', () => {
         background-color: #8e8ea9;
       }
 
-      .c21 {
+      .c22 {
         word-break: break-all;
       }
 
@@ -392,7 +404,7 @@ describe('DocAssetCard', () => {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c25 {
+      .c26 {
         text-transform: uppercase;
       }
 
@@ -412,11 +424,11 @@ describe('DocAssetCard', () => {
         opacity: 1;
       }
 
-      .c18 svg {
+      .c19 svg {
         font-size: 3rem;
       }
 
-      .c17 {
+      .c18 {
         border-radius: 4px 4px 0 0;
         background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
       }
@@ -437,11 +449,15 @@ describe('DocAssetCard', () => {
                 class="c4 c5 c6 c7"
                 spacing="2"
               >
-                <input
-                  aria-labelledby="card-1-title"
-                  class="c8"
-                  type="checkbox"
-                />
+                <div
+                  class=""
+                >
+                  <input
+                    aria-labelledby="card-1-title"
+                    class="c8"
+                    type="checkbox"
+                  />
+                </div>
               </div>
             </div>
             <div
@@ -456,8 +472,15 @@ describe('DocAssetCard', () => {
                   tabindex="0"
                   type="button"
                 >
+                  <span
+                    class="c15"
+                  >
+                    Edit
+                  </span>
                   <svg
+                    aria-hidden="true"
                     fill="none"
+                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -474,12 +497,12 @@ describe('DocAssetCard', () => {
               </span>
             </div>
             <div
-              class="c15 c16 c17"
+              class="c16 c17 c18"
               height="5.5rem"
               width="100%"
             >
               <span
-                class="c18"
+                class="c19"
               >
                 <svg
                   aria-label="hello.png"
@@ -500,29 +523,29 @@ describe('DocAssetCard', () => {
             </div>
           </div>
           <div
-            class="c19"
+            class="c20"
           >
             <div
-              class="c20"
+              class="c21"
             >
               <div
-                class="c21"
+                class="c22"
               >
                 <div
-                  class="c22"
+                  class="c23"
                 >
                   <h2
-                    class="c23"
+                    class="c24"
                     id="card-1-title"
                   >
                     hello.png
                   </h2>
                 </div>
                 <div
-                  class="c24"
+                  class="c25"
                 >
                   <span
-                    class="c25"
+                    class="c26"
                   >
                     png
                   </span>
@@ -530,13 +553,13 @@ describe('DocAssetCard', () => {
                 </div>
               </div>
               <div
-                class="c26"
+                class="c27"
               >
                 <div
-                  class="c27 c28 c29"
+                  class="c28 c29 c30"
                 >
                   <span
-                    class="c30"
+                    class="c31"
                   >
                     Doc
                   </span>
@@ -546,7 +569,7 @@ describe('DocAssetCard', () => {
           </div>
         </article>
         <div
-          class="c31"
+          class="c32"
         >
           <p
             aria-live="polite"
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 6d4b80e2e1e..135bd0a6e24 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
@@ -32,7 +32,7 @@ describe('ImageAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c29 {
+      .c30 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -62,14 +62,14 @@ describe('ImageAssetCard', () => {
         position: end;
       }
 
-      .c17 {
+      .c18 {
         padding-top: 8px;
         padding-right: 12px;
         padding-bottom: 8px;
         padding-left: 12px;
       }
 
-      .c25 {
+      .c26 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
@@ -108,7 +108,7 @@ describe('ImageAssetCard', () => {
         flex-direction: row;
       }
 
-      .c18 {
+      .c19 {
         -webkit-align-items: flex-start;
         -webkit-box-align: flex-start;
         -ms-flex-align: flex-start;
@@ -122,7 +122,7 @@ describe('ImageAssetCard', () => {
         flex-direction: row;
       }
 
-      .c26 {
+      .c27 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -161,7 +161,7 @@ describe('ImageAssetCard', () => {
         right: 12px;
       }
 
-      .c16 {
+      .c17 {
         margin: 0;
         padding: 0;
         max-height: 100%;
@@ -169,7 +169,7 @@ describe('ImageAssetCard', () => {
         object-fit: contain;
       }
 
-      .c15 {
+      .c16 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -185,20 +185,20 @@ describe('ImageAssetCard', () => {
         border-top-right-radius: 4px;
       }
 
-      .c21 {
+      .c22 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c22 {
+      .c23 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c28 {
+      .c29 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -206,14 +206,14 @@ describe('ImageAssetCard', () => {
         text-transform: uppercase;
       }
 
-      .c24 {
+      .c25 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c27 {
+      .c28 {
         margin-left: 4px;
       }
 
@@ -285,7 +285,7 @@ describe('ImageAssetCard', () => {
         background-color: #8e8ea9;
       }
 
-      .c19 {
+      .c20 {
         word-break: break-all;
       }
 
@@ -294,10 +294,22 @@ describe('ImageAssetCard', () => {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c20 {
+      .c21 {
         padding-top: 4px;
       }
 
+      .c15 {
+        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 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -396,7 +408,7 @@ describe('ImageAssetCard', () => {
         fill: #666687;
       }
 
-      .c23 {
+      .c24 {
         text-transform: uppercase;
       }
 
@@ -432,11 +444,15 @@ describe('ImageAssetCard', () => {
                 class="c4 c5 c6 c7"
                 spacing="2"
               >
-                <input
-                  aria-labelledby="card-1-title"
-                  class="c8"
-                  type="checkbox"
-                />
+                <div
+                  class=""
+                >
+                  <input
+                    aria-labelledby="card-1-title"
+                    class="c8"
+                    type="checkbox"
+                  />
+                </div>
               </div>
             </div>
             <div
@@ -451,8 +467,15 @@ describe('ImageAssetCard', () => {
                   tabindex="0"
                   type="button"
                 >
+                  <span
+                    class="c15"
+                  >
+                    Edit
+                  </span>
                   <svg
+                    aria-hidden="true"
                     fill="none"
+                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -469,40 +492,40 @@ describe('ImageAssetCard', () => {
               </span>
             </div>
             <div
-              class="c15"
+              class="c16"
             >
               <img
                 alt=""
                 aria-hidden="true"
-                class="c16"
+                class="c17"
                 src="http://somewhere.com/hello.png?width=40&height=40"
               />
             </div>
           </div>
           <div
-            class="c17"
+            class="c18"
           >
             <div
-              class="c18"
+              class="c19"
             >
               <div
-                class="c19"
+                class="c20"
               >
                 <div
-                  class="c20"
+                  class="c21"
                 >
                   <h2
-                    class="c21"
+                    class="c22"
                     id="card-1-title"
                   >
                     hello.png
                   </h2>
                 </div>
                 <div
-                  class="c22"
+                  class="c23"
                 >
                   <span
-                    class="c23"
+                    class="c24"
                   >
                     png
                   </span>
@@ -510,13 +533,13 @@ describe('ImageAssetCard', () => {
                 </div>
               </div>
               <div
-                class="c24"
+                class="c25"
               >
                 <div
-                  class="c25 c26 c27"
+                  class="c26 c27 c28"
                 >
                   <span
-                    class="c28"
+                    class="c29"
                   >
                     Image
                   </span>
@@ -526,7 +549,7 @@ describe('ImageAssetCard', () => {
           </div>
         </article>
         <div
-          class="c29"
+          class="c30"
         >
           <p
             aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/SearchAsset/tests/index.test.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/SearchAsset/tests/index.test.js
index 5522c4395f5..3f7f6fc60eb 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/SearchAsset/tests/index.test.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/SearchAsset/tests/index.test.js
@@ -30,6 +30,18 @@ describe('<SearchURLQuery />', () => {
     const { container } = render(makeApp(null));
 
     expect(container).toMatchInlineSnapshot(`
+      .c3 {
+        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;
+      }
+
       .c2 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
@@ -149,8 +161,15 @@ describe('<SearchURLQuery />', () => {
             tabindex="0"
             type="button"
           >
+            <span
+              class="c2"
+            >
+              Search
+            </span>
             <svg
+              aria-hidden="true"
               fill="none"
+              focusable="false"
               height="1em"
               viewBox="0 0 24 24"
               width="1em"
@@ -166,7 +185,7 @@ describe('<SearchURLQuery />', () => {
           </button>
         </span>
         <div
-          class="c2"
+          class="c3"
         >
           <p
             aria-live="polite"
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 9fc11bafeae..43b9616ac3a 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
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BrowseStep renders and match snapshot 1`] = `
-.c81 {
+.c82 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -13,17 +13,17 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 1px;
 }
 
-.c42 {
+.c43 {
   position: relative;
   overflow: hidden;
   max-width: 100%;
 }
 
-.c47 {
+.c48 {
   max-width: 100%;
 }
 
-.c58 {
+.c59 {
   padding-top: 16px;
 }
 
@@ -76,7 +76,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c43 {
+.c44 {
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
@@ -90,7 +90,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c48 {
+.c49 {
   -webkit-align-items: start;
   -webkit-box-align: start;
   -ms-flex-align: start;
@@ -104,7 +104,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c59 {
+.c60 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -122,7 +122,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c37 {
+.c38 {
   background: #ffffff;
   padding: 12px;
   border-radius: 4px;
@@ -134,7 +134,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   cursor: pointer;
 }
 
-.c38 {
+.c39 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -148,16 +148,16 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c39 > * {
+.c40 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c39 > * + * {
+.c40 > * + * {
   margin-left: 8px;
 }
 
-.c32 {
+.c33 {
   font-weight: 500;
   color: #32324d;
   font-weight: 500;
@@ -165,7 +165,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.25;
 }
 
-.c49 {
+.c50 {
   font-weight: 500;
   color: #32324d;
   display: block;
@@ -176,7 +176,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c52 {
+.c53 {
   color: #666687;
   display: block;
   white-space: nowrap;
@@ -186,13 +186,13 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.33;
 }
 
-.c73 {
+.c74 {
   color: #666687;
   font-size: 0.875rem;
   line-height: 1.43;
 }
 
-.c79 {
+.c80 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
@@ -344,20 +344,20 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   fill: #32324d;
 }
 
-.c22 {
+.c23 {
   padding-top: 12px;
 }
 
-.c31 {
+.c32 {
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
-.c35 {
+.c36 {
   position: relative;
 }
 
-.c40 {
+.c41 {
   background: #eaf5ff;
   color: #66b7f1;
   padding-top: 8px;
@@ -367,15 +367,27 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c45 {
+.c46 {
   padding: 4px;
   max-width: 100%;
 }
 
-.c72 {
+.c73 {
   padding-left: 8px;
 }
 
+.c22 {
+  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;
+}
+
 .c20 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -474,7 +486,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   fill: #666687;
 }
 
-.c51 {
+.c52 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -486,7 +498,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 1px;
 }
 
-.c64 {
+.c65 {
   position: absolute;
   left: 0;
   right: 0;
@@ -497,24 +509,24 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: none;
 }
 
-.c64:focus {
+.c65:focus {
   outline: none;
 }
 
-.c64[aria-disabled='true'] {
+.c65[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c67 {
+.c68 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c69 {
+.c70 {
   padding-left: 12px;
 }
 
-.c60 {
+.c61 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -528,7 +540,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c62 {
+.c63 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -542,7 +554,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c65 {
+.c66 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -560,7 +572,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c68 {
+.c69 {
   color: #32324d;
   display: block;
   white-space: nowrap;
@@ -570,12 +582,12 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c61 > * {
+.c62 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c63 {
+.c64 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -591,28 +603,28 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c63:focus-within {
+.c64:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c70 {
+.c71 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c70 svg {
+.c71 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c70 svg path {
+.c71 svg path {
   fill: #666687;
 }
 
-.c71 {
+.c72 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -621,30 +633,30 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: none;
 }
 
-.c71 svg {
+.c72 svg {
   width: 0.375rem;
 }
 
-.c66 {
+.c67 {
   width: 100%;
 }
 
-.c33 {
+.c34 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c34 {
+.c35 {
   grid-column: span 3;
   max-width: 100%;
 }
 
-.c54 {
+.c55 {
   right: 16px;
 }
 
-.c55 {
+.c56 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -658,45 +670,45 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c56 > * {
+.c57 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c56 > * + * {
+.c57 > * + * {
   margin-left: 8px;
 }
 
-.c57 {
+.c58 {
   position: absolute;
   top: 12px;
 }
 
-.c26 {
+.c27 {
   padding-top: 4px;
   padding-right: 8px;
   padding-bottom: 4px;
   padding-left: 8px;
 }
 
-.c28 {
+.c29 {
   padding-right: 4px;
   padding-left: 4px;
 }
 
-.c27 {
+.c28 {
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c29 {
+.c30 {
   color: #8e8ea9;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c23 {
+.c24 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -710,7 +722,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c25 {
+.c26 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -724,11 +736,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c24:first-child {
+.c25:first-child {
   margin-left: calc(-1*8px);
 }
 
-.c30 {
+.c31 {
   border-radius: 4px;
   color: #666687;
   font-size: 0.75rem;
@@ -738,8 +750,8 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   text-decoration: none;
 }
 
-.c30:hover,
-.c30:focus {
+.c31:hover,
+.c31:focus {
   background-color: #dcdce4;
   color: #4a4a6a;
 }
@@ -901,7 +913,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 6px;
 }
 
-.c36 {
+.c37 {
   height: 100%;
   left: 0;
   position: absolute;
@@ -910,41 +922,41 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 100%;
 }
 
-.c36:hover,
-.c36:focus {
+.c37:hover,
+.c37:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c41 path {
+.c42 path {
   fill: currentColor;
 }
 
-.c53 {
+.c54 {
   display: none;
 }
 
-.c44 {
+.c45 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.c46:focus {
+.c47:focus {
   outline: 2px solid #4945ff;
   outline-offset: -2px;
 }
 
-.c74 > * + * {
+.c75 > * + * {
   margin-left: 4px;
 }
 
-.c80 {
+.c81 {
   line-height: revert;
 }
 
-.c75 {
+.c76 {
   padding: 12px;
   border-radius: 4px;
   -webkit-text-decoration: none;
@@ -957,7 +969,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   outline: none;
 }
 
-.c75:after {
+.c76:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -972,11 +984,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c75:focus-visible {
+.c76:focus-visible {
   outline: none;
 }
 
-.c75:focus-visible:after {
+.c76:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -987,7 +999,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c77 {
+.c78 {
   padding: 12px;
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
@@ -1001,7 +1013,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   outline: none;
 }
 
-.c77:after {
+.c78:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -1016,11 +1028,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c77:focus-visible {
+.c78:focus-visible {
   outline: none;
 }
 
-.c77:focus-visible:after {
+.c78:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -1031,26 +1043,26 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c78 {
+.c79 {
   color: #271fe0;
   background: #ffffff;
 }
 
-.c78:hover {
+.c79:hover {
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c76 {
+.c77 {
   font-size: 0.7rem;
   pointer-events: none;
 }
 
-.c76 svg path {
+.c77 svg path {
   fill: #c0c0cf;
 }
 
-.c76:focus svg path,
-.c76:hover svg path {
+.c77:focus svg path,
+.c77:hover svg path {
   fill: #c0c0cf;
 }
 
@@ -1072,18 +1084,18 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-shrink: 0;
 }
 
-.c50 {
+.c51 {
   max-width: 100%;
 }
 
 @media (max-width:68.75rem) {
-  .c34 {
+  .c35 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c34 {
+  .c35 {
     grid-column: span;
   }
 }
@@ -1185,8 +1197,15 @@ exports[`BrowseStep renders and match snapshot 1`] = `
               tabindex="0"
               type="button"
             >
+              <span
+                class="c22"
+              >
+                Search
+              </span>
               <svg
+                aria-hidden="true"
                 fill="none"
+                focusable="false"
                 height="1em"
                 viewBox="0 0 24 24"
                 width="1em"
@@ -1205,64 +1224,64 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="c22"
+      class="c23"
     >
       <nav
         aria-label="Folders navigation"
         class=""
       >
         <ol
-          class="c23 c24"
+          class="c24 c25"
         >
           <li
-            class="c25"
+            class="c26"
           >
             <div
-              class="c26"
+              class="c27"
             >
               <span
                 aria-current="false"
-                class="c27"
+                class="c28"
               >
                 Media Library
               </span>
             </div>
             <div
               aria-hidden="true"
-              class="c28"
+              class="c29"
             >
               <span
-                class="c29"
+                class="c30"
               >
                 /
               </span>
             </div>
           </li>
           <li
-            class="c25"
+            class="c26"
           >
             <button
-              class="c30"
+              class="c31"
               type="button"
             >
               Folder 2
             </button>
             <div
               aria-hidden="true"
-              class="c28"
+              class="c29"
             >
               <span
-                class="c29"
+                class="c30"
               >
                 /
               </span>
             </div>
           </li>
           <li
-            class="c25"
+            class="c26"
           >
             <button
-              class="c30"
+              class="c31"
               type="button"
             >
               Folder 1
@@ -1275,44 +1294,44 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       class=""
     >
       <div
-        class="c31"
+        class="c32"
       >
         <h2
-          class="c32"
+          class="c33"
         >
           Folders (1)
         </h2>
       </div>
       <div
-        class="c33"
+        class="c34"
       >
         <div
-          class="c34"
+          class="c35"
         >
           <div
             class=""
           >
             <div
-              class="c35 "
+              class="c36 "
               tabindex="0"
             >
               <button
                 aria-hidden="true"
                 aria-label="Folder 1"
-                class="c36"
+                class="c37"
                 tabindex="-1"
                 type="button"
               />
               <div
-                class="c37 c38 c39"
+                class="c38 c39 c40"
                 cursor="pointer"
                 spacing="2"
               >
                 <div
-                  class="c40"
+                  class="c41"
                 >
                   <svg
-                    class="c41"
+                    class="c42"
                     fill="none"
                     height="1.5rem"
                     viewBox="0 0 24 24"
@@ -1326,29 +1345,29 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="c42 c43 c44"
+                  class="c43 c44 c45"
                   id="folder-1-1-title"
                   overflow="hidden"
                 >
                   <button
-                    class="c45 c46"
+                    class="c46 c47"
                     type="button"
                   >
                     <h2
-                      class="c47 c48"
+                      class="c48 c49"
                     >
                       <span
-                        class="c49 c50"
+                        class="c50 c51"
                       >
                         Folder 1
                         <div
-                          class="c51"
+                          class="c52"
                         >
                           :
                         </div>
                       </span>
                       <span
-                        class="c52 c50"
+                        class="c53 c51"
                       >
                         1 folder, 1 asset
                       </span>
@@ -1356,10 +1375,10 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                   </button>
                 </div>
                 <div
-                  class="c53"
+                  class="c54"
                 >
                   <div
-                    class="c54 c55 c56 c57"
+                    class="c55 c56 c57 c58"
                     spacing="2"
                   />
                 </div>
@@ -1370,17 +1389,17 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="c58 c59"
+      class="c59 c60"
     >
       <div
         class="c17"
       >
         <div>
           <div
-            class="c60 c61"
+            class="c61 c62"
           >
             <div
-              class="c62 c63"
+              class="c63 c64"
             >
               <button
                 aria-disabled="false"
@@ -1388,21 +1407,21 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                 aria-haspopup="listbox"
                 aria-label="Entries per page"
                 aria-labelledby="select-1-label select-1-content"
-                class="c64"
+                class="c65"
                 id="select-1"
                 type="button"
               />
               <div
-                class="c65 c66"
+                class="c66 c67"
               >
                 <div
-                  class="c62"
+                  class="c63"
                 >
                   <div
-                    class="c67"
+                    class="c68"
                   >
                     <span
-                      class="c68"
+                      class="c69"
                       id="select-1-content"
                     >
                       10
@@ -1410,11 +1429,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c62"
+                  class="c63"
                 >
                   <button
                     aria-hidden="true"
-                    class="c69 c70 c71"
+                    class="c70 c71 c72"
                     tabindex="-1"
                     type="button"
                   >
@@ -1439,10 +1458,10 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="c72"
+          class="c73"
         >
           <label
-            class="c73"
+            class="c74"
             for="page-size"
           >
             Entries per page
@@ -1451,20 +1470,20 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       </div>
       <nav
         aria-label="pagination"
-        class="sc-ezDxBL"
+        class="sc-ekMTzm"
       >
         <ul
-          class="c17 c74"
+          class="c17 c75"
         >
           <li>
             <button
               aria-disabled="true"
-              class="c75 c76"
+              class="c76 c77"
               tabindex="-1"
               type="button"
             >
               <div
-                class="c51"
+                class="c52"
               >
                 Go to previous page
               </div>
@@ -1485,17 +1504,17 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           </li>
           <li>
             <button
-              class="c77 c78"
+              class="c78 c79"
               type="button"
             >
               <div
-                class="c51"
+                class="c52"
               >
                 Go to page 1
               </div>
               <span
                 aria-hidden="true"
-                class="c79 c80"
+                class="c80 c81"
               >
                 1
               </span>
@@ -1504,12 +1523,12 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           <li>
             <button
               aria-disabled="true"
-              class="c75 c76"
+              class="c76 c77"
               tabindex="-1"
               type="button"
             >
               <div
-                class="c51"
+                class="c52"
               >
                 Go to next page
               </div>
@@ -1533,7 +1552,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c81"
+    class="c82"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap b/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap
index 31f46728152..729a913dbf9 100644
--- a/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap
+++ b/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap
@@ -334,7 +334,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   cursor: pointer;
 }
 
-.c4:hover .sc-uWCef {
+.c4:hover .sc-dTBbbW {
   opacity: 1;
 }
 
@@ -395,11 +395,15 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                   class="c7 c8 c9 c10"
                   spacing="2"
                 >
-                  <input
-                    aria-labelledby="card-1-title"
-                    class="c11"
-                    type="checkbox"
-                  />
+                  <div
+                    class=""
+                  >
+                    <input
+                      aria-labelledby="card-1-title"
+                      class="c11"
+                      type="checkbox"
+                    />
+                  </div>
                 </div>
               </div>
               <div
@@ -483,11 +487,15 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                   class="c7 c8 c9 c10"
                   spacing="2"
                 >
-                  <input
-                    aria-labelledby="card-2-title"
-                    class="c11"
-                    type="checkbox"
-                  />
+                  <div
+                    class=""
+                  >
+                    <input
+                      aria-labelledby="card-2-title"
+                      class="c11"
+                      type="checkbox"
+                    />
+                  </div>
                 </div>
               </div>
               <div
@@ -599,11 +607,15 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                   class="c7 c8 c9 c10"
                   spacing="2"
                 >
-                  <input
-                    aria-labelledby="card-3-title"
-                    class="c11"
-                    type="checkbox"
-                  />
+                  <div
+                    class=""
+                  >
+                    <input
+                      aria-labelledby="card-3-title"
+                      class="c11"
+                      type="checkbox"
+                    />
+                  </div>
                 </div>
               </div>
               <div
diff --git a/packages/core/upload/admin/src/components/BulkMoveDialog/tests/__snapshots__/BulkMoveDialog.test.js.snap b/packages/core/upload/admin/src/components/BulkMoveDialog/tests/__snapshots__/BulkMoveDialog.test.js.snap
index abf4c34877b..9fb983ff35f 100644
--- a/packages/core/upload/admin/src/components/BulkMoveDialog/tests/__snapshots__/BulkMoveDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/BulkMoveDialog/tests/__snapshots__/BulkMoveDialog.test.js.snap
@@ -13,7 +13,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c14 {
+.c15 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -27,12 +27,12 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c15 > * {
+.c16 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c15 > * + * {
+.c16 > * + * {
   margin-top: 4px;
 }
 
@@ -43,14 +43,14 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c27 {
+.c28 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c24 {
+.c25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -64,21 +64,21 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c24 svg {
+.c25 svg {
   height: 12px;
   width: 12px;
 }
 
-.c24 svg > g,
-.c24 svg path {
+.c25 svg > g,
+.c25 svg path {
   fill: #ffffff;
 }
 
-.c24[aria-disabled='true'] {
+.c25[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c24:after {
+.c25:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -93,11 +93,11 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c24:focus-visible {
+.c25:focus-visible {
   outline: none;
 }
 
-.c24:focus-visible:after {
+.c25:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -108,7 +108,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c25 {
+.c26 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -120,7 +120,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c25 .sc-cfJLRR {
+.c26 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -131,56 +131,56 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c25 .c26 {
+.c26 .c27 {
   color: #ffffff;
 }
 
-.c25[aria-disabled='true'] {
+.c26[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c25[aria-disabled='true'] .c26 {
+.c26[aria-disabled='true'] .c27 {
   color: #666687;
 }
 
-.c25[aria-disabled='true'] svg > g,
-.c25[aria-disabled='true'] svg path {
+.c26[aria-disabled='true'] svg > g,
+.c26[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c25[aria-disabled='true']:active {
+.c26[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c25[aria-disabled='true']:active .c26 {
+.c26[aria-disabled='true']:active .c27 {
   color: #666687;
 }
 
-.c25[aria-disabled='true']:active svg > g,
-.c25[aria-disabled='true']:active svg path {
+.c26[aria-disabled='true']:active svg > g,
+.c26[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c25:hover {
+.c26:hover {
   background-color: #f6f6f9;
 }
 
-.c25:active {
+.c26:active {
   background-color: #eaeaef;
 }
 
-.c25 .c26 {
+.c26 .c27 {
   color: #32324d;
 }
 
-.c25 svg > g,
-.c25 svg path {
+.c26 svg > g,
+.c26 svg path {
   fill: #32324d;
 }
 
-.c28 {
+.c29 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -190,7 +190,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c28 .sc-cfJLRR {
+.c29 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -201,58 +201,58 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c28 .c26 {
+.c29 .c27 {
   color: #ffffff;
 }
 
-.c28[aria-disabled='true'] {
+.c29[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c28[aria-disabled='true'] .c26 {
+.c29[aria-disabled='true'] .c27 {
   color: #666687;
 }
 
-.c28[aria-disabled='true'] svg > g,
-.c28[aria-disabled='true'] svg path {
+.c29[aria-disabled='true'] svg > g,
+.c29[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c28[aria-disabled='true']:active {
+.c29[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c28[aria-disabled='true']:active .c26 {
+.c29[aria-disabled='true']:active .c27 {
   color: #666687;
 }
 
-.c28[aria-disabled='true']:active svg > g,
-.c28[aria-disabled='true']:active svg path {
+.c29[aria-disabled='true']:active svg > g,
+.c29[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c28:hover {
+.c29:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c28:active {
+.c29:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c28 svg > g,
-.c28 svg path {
+.c29 svg > g,
+.c29 svg path {
   fill: #ffffff;
 }
 
-.c18 {
+.c19 {
   padding-right: 12px;
 }
 
-.c17 {
+.c18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -266,30 +266,30 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c16 {
+.c17 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c19 {
+.c20 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c19 svg {
+.c20 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c19 svg path {
+.c20 svg path {
   fill: #666687;
 }
 
-.c20 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -298,17 +298,17 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c20 svg {
+.c21 svg {
   width: 0.5625rem;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c13 {
+.c14 {
   grid-column: span 12;
   max-width: 100%;
 }
@@ -327,7 +327,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   padding-left: 20px;
 }
 
-.c10 {
+.c11 {
   padding: 32px;
 }
 
@@ -373,7 +373,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c22 {
+.c23 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -387,6 +387,18 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
+.c10 {
+  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;
+}
+
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -490,28 +502,28 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c21 {
+.c22 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c23 > * + * {
+.c24 > * + * {
   margin-left: 8px;
 }
 
-.c11 {
+.c12 {
   overflow: auto;
   max-height: 60vh;
 }
 
 @media (max-width:68.75rem) {
-  .c13 {
+  .c14 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c13 {
+  .c14 {
     grid-column: span 12;
   }
 }
@@ -575,12 +587,18 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
                   </h2>
                   <button
                     aria-disabled="false"
-                    aria-label="Close the modal"
                     class="c8 c9"
                     type="button"
                   >
+                    <span
+                      class="c10"
+                    >
+                      Close the modal
+                    </span>
                     <svg
+                      aria-hidden="true"
                       fill="none"
+                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -595,27 +613,27 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c10 c11"
+                class="c11 c12"
               >
                 <div
-                  class="c12"
+                  class="c13"
                 >
                   <div
-                    class="c13"
+                    class="c14"
                   >
                     <div
                       class=""
                     >
                       <div
-                        class="c14 c15"
+                        class="c15 c16"
                         spacing="1"
                       >
                         <label
-                          class="c16"
+                          class="c17"
                           for="folder-destination"
                         >
                           <div
-                            class="c17"
+                            class="c18"
                           >
                             Location
                           </div>
@@ -662,7 +680,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
                               class=" css-1hb7zxy-IndicatorsContainer"
                             >
                               <button
-                                class="c18 c19 c20"
+                                class="c19 c20 c21"
                                 type="button"
                               >
                                 <svg
@@ -694,37 +712,37 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c4 c21"
+                class="c4 c22"
               >
                 <div
                   class="c6"
                 >
                   <div
-                    class="c22 c23"
+                    class="c23 c24"
                   >
                     <button
                       aria-disabled="false"
-                      class="c24 c25"
+                      class="c25 c26"
                       name="cancel"
                       type="button"
                     >
                       <span
-                        class="c26 c27"
+                        class="c27 c28"
                       >
                         Cancel
                       </span>
                     </button>
                   </div>
                   <div
-                    class="c22 c23"
+                    class="c23 c24"
                   >
                     <button
                       aria-disabled="false"
-                      class="c24 c28"
+                      class="c25 c29"
                       type="submit"
                     >
                       <span
-                        class="c26 c27"
+                        class="c27 c28"
                       >
                         Move
                       </span>
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 e772cce9cc6..25380f4f5df 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
@@ -13,17 +13,17 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c16 {
+.c17 {
   padding-right: 12px;
   padding-left: 12px;
 }
 
-.c24 {
+.c26 {
   padding-right: 8px;
   padding-left: 8px;
 }
 
-.c17 {
+.c18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -41,7 +41,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   justify-content: flex-end;
 }
 
-.c19 {
+.c20 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -55,7 +55,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c25 {
+.c27 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -69,30 +69,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c26 > * {
+.c28 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c26 > * + * {
+.c28 > * + * {
   margin-top: 12px;
 }
 
-.c28 > * {
+.c30 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c28 > * + * {
+.c30 > * + * {
   margin-top: 4px;
 }
 
-.c20 > * {
+.c21 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c20 > * + * {
+.c21 > * + * {
   margin-left: 4px;
 }
 
@@ -103,7 +103,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c29 {
+.c31 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -111,20 +111,20 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   text-transform: uppercase;
 }
 
-.c30 {
+.c32 {
   color: #4a4a6a;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c51 {
+.c53 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c48 {
+.c50 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -138,21 +138,21 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c48 svg {
+.c50 svg {
   height: 12px;
   width: 12px;
 }
 
-.c48 svg > g,
-.c48 svg path {
+.c50 svg > g,
+.c50 svg path {
   fill: #ffffff;
 }
 
-.c48[aria-disabled='true'] {
+.c50[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c48:after {
+.c50:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -167,11 +167,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c48:focus-visible {
+.c50:focus-visible {
   outline: none;
 }
 
-.c48:focus-visible:after {
+.c50:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -182,7 +182,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c49 {
+.c51 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -194,7 +194,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c49 .sc-cfJLRR {
+.c51 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -205,56 +205,56 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c49 .c50 {
+.c51 .c52 {
   color: #ffffff;
 }
 
-.c49[aria-disabled='true'] {
+.c51[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c49[aria-disabled='true'] .c50 {
+.c51[aria-disabled='true'] .c52 {
   color: #666687;
 }
 
-.c49[aria-disabled='true'] svg > g,
-.c49[aria-disabled='true'] svg path {
+.c51[aria-disabled='true'] svg > g,
+.c51[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c49[aria-disabled='true']:active {
+.c51[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c49[aria-disabled='true']:active .c50 {
+.c51[aria-disabled='true']:active .c52 {
   color: #666687;
 }
 
-.c49[aria-disabled='true']:active svg > g,
-.c49[aria-disabled='true']:active svg path {
+.c51[aria-disabled='true']:active svg > g,
+.c51[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c49:hover {
+.c51:hover {
   background-color: #f6f6f9;
 }
 
-.c49:active {
+.c51:active {
   background-color: #eaeaef;
 }
 
-.c49 .c50 {
+.c51 .c52 {
   color: #32324d;
 }
 
-.c49 svg > g,
-.c49 svg path {
+.c51 svg > g,
+.c51 svg path {
   fill: #32324d;
 }
 
-.c52 {
+.c54 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -266,7 +266,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c52 .sc-cfJLRR {
+.c54 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -277,66 +277,66 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c52 .c50 {
+.c54 .c52 {
   color: #ffffff;
 }
 
-.c52[aria-disabled='true'] {
+.c54[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c52[aria-disabled='true'] .c50 {
+.c54[aria-disabled='true'] .c52 {
   color: #666687;
 }
 
-.c52[aria-disabled='true'] svg > g,
-.c52[aria-disabled='true'] svg path {
+.c54[aria-disabled='true'] svg > g,
+.c54[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c52[aria-disabled='true']:active {
+.c54[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c52[aria-disabled='true']:active .c50 {
+.c54[aria-disabled='true']:active .c52 {
   color: #666687;
 }
 
-.c52[aria-disabled='true']:active svg > g,
-.c52[aria-disabled='true']:active svg path {
+.c54[aria-disabled='true']:active svg > g,
+.c54[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c52:hover {
+.c54:hover {
   background-color: #ffffff;
 }
 
-.c52:active {
+.c54:active {
   background-color: #ffffff;
   border: 1px solid #4945ff;
 }
 
-.c52:active .c50 {
+.c54:active .c52 {
   color: #4945ff;
 }
 
-.c52:active svg > g,
-.c52:active svg path {
+.c54:active svg > g,
+.c54:active svg path {
   fill: #4945ff;
 }
 
-.c52 .c50 {
+.c54 .c52 {
   color: #271fe0;
 }
 
-.c52 svg > g,
-.c52 svg path {
+.c54 svg > g,
+.c54 svg path {
   fill: #271fe0;
 }
 
-.c53 {
+.c55 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -346,7 +346,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c53 .sc-cfJLRR {
+.c55 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -357,61 +357,61 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c53 .c50 {
+.c55 .c52 {
   color: #ffffff;
 }
 
-.c53[aria-disabled='true'] {
+.c55[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c53[aria-disabled='true'] .c50 {
+.c55[aria-disabled='true'] .c52 {
   color: #666687;
 }
 
-.c53[aria-disabled='true'] svg > g,
-.c53[aria-disabled='true'] svg path {
+.c55[aria-disabled='true'] svg > g,
+.c55[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c53[aria-disabled='true']:active {
+.c55[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c53[aria-disabled='true']:active .c50 {
+.c55[aria-disabled='true']:active .c52 {
   color: #666687;
 }
 
-.c53[aria-disabled='true']:active svg > g,
-.c53[aria-disabled='true']:active svg path {
+.c55[aria-disabled='true']:active svg > g,
+.c55[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c53:hover {
+.c55:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c53:active {
+.c55:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c53 svg > g,
-.c53 svg path {
+.c55 svg > g,
+.c55 svg path {
   fill: #ffffff;
 }
 
-.c14 {
+.c15 {
   background: #eaeaef;
   border-radius: 4px;
   border-color: #dcdce4;
   border: 1px solid #dcdce4;
 }
 
-.c27 {
+.c29 {
   background: #f6f6f9;
   padding-top: 16px;
   padding-right: 24px;
@@ -420,30 +420,42 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c41 {
+.c43 {
   padding-right: 12px;
 }
 
-.c54 {
+.c56 {
   background: #212134;
   padding: 8px;
   border-radius: 4px;
 }
 
-.c56 {
+.c58 {
   font-weight: 600;
   color: #ffffff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c55 {
+.c24 {
+  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;
+}
+
+.c57 {
   position: absolute;
   z-index: 4;
   display: none;
 }
 
-.c21 {
+.c22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -457,21 +469,21 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c21 svg {
+.c22 svg {
   height: 12px;
   width: 12px;
 }
 
-.c21 svg > g,
-.c21 svg path {
+.c22 svg > g,
+.c22 svg path {
   fill: #ffffff;
 }
 
-.c21[aria-disabled='true'] {
+.c22[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c21:after {
+.c22:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -486,11 +498,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c21:focus-visible {
+.c22:focus-visible {
   outline: none;
 }
 
-.c21:focus-visible:after {
+.c22:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -501,7 +513,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c22 {
+.c23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -518,30 +530,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   width: 2rem;
 }
 
-.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'] {
+.c23[aria-disabled='true'] {
   background-color: #eaeaef;
 }
 
-.c22[aria-disabled='true'] svg path {
+.c23[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c44 {
+.c46 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -553,7 +565,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c31 {
+.c33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -567,7 +579,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c34 {
+.c36 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -581,7 +593,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c35 {
+.c37 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -599,20 +611,20 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c33 {
+.c35 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c38 {
+.c40 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c37 {
+.c39 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -627,36 +639,36 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: inherit;
 }
 
-.c37::-webkit-input-placeholder {
+.c39::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c37::-moz-placeholder {
+.c39::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c37:-ms-input-placeholder {
+.c39:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c37::placeholder {
+.c39::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c37[aria-disabled='true'] {
+.c39[aria-disabled='true'] {
   color: inherit;
 }
 
-.c37:focus {
+.c39:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c36 {
+.c38 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -668,21 +680,21 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c36:focus-within {
+.c38:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c32 > * {
+.c34 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c32 > * + * {
+.c34 > * + * {
   margin-top: 4px;
 }
 
-.c40 {
+.c42 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -696,30 +708,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c39 {
+.c41 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c42 {
+.c44 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c42 svg {
+.c44 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c42 svg path {
+.c44 svg path {
   fill: #666687;
 }
 
-.c43 {
+.c45 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -728,7 +740,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c43 svg {
+.c45 svg {
   width: 0.5625rem;
 }
 
@@ -746,7 +758,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   padding-left: 20px;
 }
 
-.c10 {
+.c11 {
   padding: 32px;
 }
 
@@ -792,7 +804,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c46 {
+.c48 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -806,6 +818,18 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
+.c10 {
+  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;
+}
+
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -909,66 +933,66 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c45 {
+.c47 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c47 > * + * {
+.c49 > * + * {
   margin-left: 8px;
 }
 
-.c11 {
+.c12 {
   overflow: auto;
   max-height: 60vh;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c13 {
+.c14 {
   grid-column: span 6;
   max-width: 100%;
 }
 
-.c15 {
+.c16 {
   position: relative;
 }
 
-.c23 {
+.c25 {
   position: relative;
   text-align: center;
   background: repeating-conic-gradient( #f6f6f9 0% 25%, transparent 0% 50% ) 50% / 20px 20px;
 }
 
-.c23 svg {
+.c25 svg {
   font-size: 3rem;
   height: 16.5rem;
 }
 
-.c23 img,
-.c23 video {
+.c25 img,
+.c25 video {
   margin: 0;
   padding: 0;
   max-height: 16.5rem;
   max-width: 100%;
 }
 
-.c18 {
+.c19 {
   height: 3.25rem;
 }
 
 @media (max-width:68.75rem) {
-  .c13 {
+  .c14 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c13 {
+  .c14 {
     grid-column: span 12;
   }
 }
@@ -1028,12 +1052,18 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                 </h2>
                 <button
                   aria-disabled="false"
-                  aria-label="Close the modal"
                   class="c8 c9"
                   type="button"
                 >
+                  <span
+                    class="c10"
+                  >
+                    Close the modal
+                  </span>
                   <svg
+                    aria-hidden="true"
                     fill="none"
+                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -1048,37 +1078,44 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="c10 c11"
+              class="c11 c12"
             >
               <div
-                class="c12"
+                class="c13"
               >
                 <div
-                  class="c13"
+                  class="c14"
                 >
                   <div
                     class=""
                   >
                     <div
-                      class="c14 c15"
+                      class="c15 c16"
                     >
                       <div
-                        class="c16 c17 c18"
+                        class="c17 c18 c19"
                       >
                         <div
-                          class="c19 c20"
+                          class="c20 c21"
                           spacing="1"
                         >
                           <span>
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-1"
-                              class="c21 c22"
+                              class="c22 c23"
                               tabindex="0"
                               type="button"
                             >
+                              <span
+                                class="c24"
+                              >
+                                Delete
+                              </span>
                               <svg
+                                aria-hidden="true"
                                 fill="none"
+                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 24"
                                 width="1em"
@@ -1095,12 +1132,19 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-3"
-                              class="c21 c22"
+                              class="c22 c23"
                               tabindex="0"
                               type="button"
                             >
+                              <span
+                                class="c24"
+                              >
+                                Download
+                              </span>
                               <svg
+                                aria-hidden="true"
                                 fill="none"
+                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 25"
                                 width="1em"
@@ -1119,12 +1163,19 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-5"
-                              class="c21 c22"
+                              class="c22 c23"
                               tabindex="0"
                               type="button"
                             >
+                              <span
+                                class="c24"
+                              >
+                                Copy link
+                              </span>
                               <svg
+                                aria-hidden="true"
                                 fill="none"
+                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 24"
                                 width="1em"
@@ -1145,12 +1196,19 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-7"
-                              class="c21 c22"
+                              class="c22 c23"
                               tabindex="0"
                               type="button"
                             >
+                              <span
+                                class="c24"
+                              >
+                                Crop
+                              </span>
                               <svg
+                                aria-hidden="true"
                                 fill="none"
+                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 24"
                                 width="1em"
@@ -1166,7 +1224,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c23"
+                        class="c25"
                       >
                         <img
                           alt="Screenshot 2.png"
@@ -1174,13 +1232,13 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         />
                       </div>
                       <div
-                        class="c24 c17 c18"
+                        class="c26 c18 c19"
                       />
                     </div>
                   </div>
                 </div>
                 <div
-                  class="c13"
+                  class="c14"
                 >
                   <div
                     class=""
@@ -1190,32 +1248,32 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                       novalidate=""
                     >
                       <div
-                        class="c25 c26"
+                        class="c27 c28"
                         spacing="3"
                       >
                         <div
-                          class="c27"
+                          class="c29"
                         >
                           <div
-                            class="c12"
+                            class="c13"
                           >
                             <div
-                              class="c13"
+                              class="c14"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c25 c28"
+                                  class="c27 c30"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c29"
+                                    class="c31"
                                   >
                                     Size
                                   </span>
                                   <span
-                                    class="c30"
+                                    class="c32"
                                   >
                                     102KB
                                   </span>
@@ -1223,22 +1281,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c13"
+                              class="c14"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c25 c28"
+                                  class="c27 c30"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c29"
+                                    class="c31"
                                   >
                                     Dimensions
                                   </span>
                                   <span
-                                    class="c30"
+                                    class="c32"
                                   >
                                     1476✕780
                                   </span>
@@ -1246,22 +1304,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c13"
+                              class="c14"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c25 c28"
+                                  class="c27 c30"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c29"
+                                    class="c31"
                                   >
                                     Date
                                   </span>
                                   <span
-                                    class="c30"
+                                    class="c32"
                                   >
                                     10/4/2021
                                   </span>
@@ -1269,22 +1327,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c13"
+                              class="c14"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c25 c28"
+                                  class="c27 c30"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c29"
+                                    class="c31"
                                   >
                                     Extension
                                   </span>
                                   <span
-                                    class="c30"
+                                    class="c32"
                                   >
                                     png
                                   </span>
@@ -1292,22 +1350,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c13"
+                              class="c14"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c25 c28"
+                                  class="c27 c30"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c29"
+                                    class="c31"
                                   >
                                     Asset ID
                                   </span>
                                   <span
-                                    class="c30"
+                                    class="c32"
                                   >
                                     8
                                   </span>
@@ -1319,26 +1377,26 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         <div>
                           <div>
                             <div
-                              class="c31 c32"
+                              class="c33 c34"
                               spacing="1"
                             >
                               <label
-                                class="c33"
+                                class="c35"
                                 for="textinput-1"
                               >
                                 <div
-                                  class="c34"
+                                  class="c36"
                                 >
                                   File name
                                 </div>
                               </label>
                               <div
-                                class="c35 c36"
+                                class="c37 c38"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
-                                  class="c37"
+                                  class="c39"
                                   id="textinput-1"
                                   name="name"
                                   value="Screenshot 2.png"
@@ -1350,34 +1408,34 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         <div>
                           <div>
                             <div
-                              class="c31 c32"
+                              class="c33 c34"
                               spacing="1"
                             >
                               <label
-                                class="c33"
+                                class="c35"
                                 for="textinput-2"
                               >
                                 <div
-                                  class="c34"
+                                  class="c36"
                                 >
                                   Alternative text
                                 </div>
                               </label>
                               <div
-                                class="c35 c36"
+                                class="c37 c38"
                               >
                                 <input
                                   aria-describedby="textinput-2-hint"
                                   aria-disabled="false"
                                   aria-invalid="false"
-                                  class="c37"
+                                  class="c39"
                                   id="textinput-2"
                                   name="alternativeText"
                                   value=""
                                 />
                               </div>
                               <p
-                                class="c38"
+                                class="c40"
                                 id="textinput-2-hint"
                               >
                                 This text will be displayed if the asset can’t be shown.
@@ -1388,26 +1446,26 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         <div>
                           <div>
                             <div
-                              class="c31 c32"
+                              class="c33 c34"
                               spacing="1"
                             >
                               <label
-                                class="c33"
+                                class="c35"
                                 for="textinput-3"
                               >
                                 <div
-                                  class="c34"
+                                  class="c36"
                                 >
                                   Caption
                                 </div>
                               </label>
                               <div
-                                class="c35 c36"
+                                class="c37 c38"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
-                                  class="c37"
+                                  class="c39"
                                   id="textinput-3"
                                   name="caption"
                                   value=""
@@ -1417,15 +1475,15 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                           </div>
                         </div>
                         <div
-                          class="c25 c28"
+                          class="c27 c30"
                           spacing="1"
                         >
                           <label
-                            class="c39"
+                            class="c41"
                             for="asset-folder"
                           >
                             <div
-                              class="c40"
+                              class="c42"
                             >
                               Location
                             </div>
@@ -1472,7 +1530,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                                 class=" css-1hb7zxy-IndicatorsContainer"
                               >
                                 <button
-                                  class="c41 c42 c43"
+                                  class="c43 c44 c45"
                                   type="button"
                                 >
                                   <svg
@@ -1501,7 +1559,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c44"
+                        class="c46"
                       >
                         <button
                           tabindex="-1"
@@ -1516,42 +1574,42 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="c4 c45"
+              class="c4 c47"
             >
               <div
                 class="c6"
               >
                 <div
-                  class="c46 c47"
+                  class="c48 c49"
                 >
                   <button
                     aria-disabled="false"
-                    class="c48 c49"
+                    class="c50 c51"
                     type="button"
                   >
                     <span
-                      class="c50 c51"
+                      class="c52 c53"
                     >
                       Cancel
                     </span>
                   </button>
                 </div>
                 <div
-                  class="c46 c47"
+                  class="c48 c49"
                 >
                   <button
                     aria-disabled="false"
-                    class="c48 c52"
+                    class="c50 c54"
                     type="button"
                   >
                     <span
-                      class="c50 c51"
+                      class="c52 c53"
                     >
                       Replace media
                     </span>
                   </button>
                   <div
-                    class="c44"
+                    class="c46"
                   >
                     <input
                       accept="image/png"
@@ -1563,11 +1621,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                   </div>
                   <button
                     aria-disabled="false"
-                    class="c48 c53"
+                    class="c50 c55"
                     type="button"
                   >
                     <span
-                      class="c50 c51"
+                      class="c52 c53"
                     >
                       Finish
                     </span>
@@ -1584,12 +1642,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c54 c55"
+      class="c56 c57"
       id="tooltip-1"
       role="tooltip"
     >
       <p
-        class="c56"
+        class="c58"
       >
         Delete
       </p>
@@ -1599,12 +1657,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c54 c55"
+      class="c56 c57"
       id="tooltip-3"
       role="tooltip"
     >
       <p
-        class="c56"
+        class="c58"
       >
         Download
       </p>
@@ -1614,12 +1672,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c54 c55"
+      class="c56 c57"
       id="tooltip-5"
       role="tooltip"
     >
       <p
-        class="c56"
+        class="c58"
       >
         Copy link
       </p>
@@ -1629,12 +1687,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c54 c55"
+      class="c56 c57"
       id="tooltip-7"
       role="tooltip"
     >
       <p
-        class="c56"
+        class="c58"
       >
         Crop
       </p>
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 e772cce9cc6..25380f4f5df 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
@@ -13,17 +13,17 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c16 {
+.c17 {
   padding-right: 12px;
   padding-left: 12px;
 }
 
-.c24 {
+.c26 {
   padding-right: 8px;
   padding-left: 8px;
 }
 
-.c17 {
+.c18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -41,7 +41,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   justify-content: flex-end;
 }
 
-.c19 {
+.c20 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -55,7 +55,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c25 {
+.c27 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -69,30 +69,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c26 > * {
+.c28 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c26 > * + * {
+.c28 > * + * {
   margin-top: 12px;
 }
 
-.c28 > * {
+.c30 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c28 > * + * {
+.c30 > * + * {
   margin-top: 4px;
 }
 
-.c20 > * {
+.c21 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c20 > * + * {
+.c21 > * + * {
   margin-left: 4px;
 }
 
@@ -103,7 +103,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c29 {
+.c31 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -111,20 +111,20 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   text-transform: uppercase;
 }
 
-.c30 {
+.c32 {
   color: #4a4a6a;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c51 {
+.c53 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c48 {
+.c50 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -138,21 +138,21 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c48 svg {
+.c50 svg {
   height: 12px;
   width: 12px;
 }
 
-.c48 svg > g,
-.c48 svg path {
+.c50 svg > g,
+.c50 svg path {
   fill: #ffffff;
 }
 
-.c48[aria-disabled='true'] {
+.c50[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c48:after {
+.c50:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -167,11 +167,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c48:focus-visible {
+.c50:focus-visible {
   outline: none;
 }
 
-.c48:focus-visible:after {
+.c50:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -182,7 +182,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c49 {
+.c51 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -194,7 +194,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c49 .sc-cfJLRR {
+.c51 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -205,56 +205,56 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c49 .c50 {
+.c51 .c52 {
   color: #ffffff;
 }
 
-.c49[aria-disabled='true'] {
+.c51[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c49[aria-disabled='true'] .c50 {
+.c51[aria-disabled='true'] .c52 {
   color: #666687;
 }
 
-.c49[aria-disabled='true'] svg > g,
-.c49[aria-disabled='true'] svg path {
+.c51[aria-disabled='true'] svg > g,
+.c51[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c49[aria-disabled='true']:active {
+.c51[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c49[aria-disabled='true']:active .c50 {
+.c51[aria-disabled='true']:active .c52 {
   color: #666687;
 }
 
-.c49[aria-disabled='true']:active svg > g,
-.c49[aria-disabled='true']:active svg path {
+.c51[aria-disabled='true']:active svg > g,
+.c51[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c49:hover {
+.c51:hover {
   background-color: #f6f6f9;
 }
 
-.c49:active {
+.c51:active {
   background-color: #eaeaef;
 }
 
-.c49 .c50 {
+.c51 .c52 {
   color: #32324d;
 }
 
-.c49 svg > g,
-.c49 svg path {
+.c51 svg > g,
+.c51 svg path {
   fill: #32324d;
 }
 
-.c52 {
+.c54 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -266,7 +266,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c52 .sc-cfJLRR {
+.c54 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -277,66 +277,66 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c52 .c50 {
+.c54 .c52 {
   color: #ffffff;
 }
 
-.c52[aria-disabled='true'] {
+.c54[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c52[aria-disabled='true'] .c50 {
+.c54[aria-disabled='true'] .c52 {
   color: #666687;
 }
 
-.c52[aria-disabled='true'] svg > g,
-.c52[aria-disabled='true'] svg path {
+.c54[aria-disabled='true'] svg > g,
+.c54[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c52[aria-disabled='true']:active {
+.c54[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c52[aria-disabled='true']:active .c50 {
+.c54[aria-disabled='true']:active .c52 {
   color: #666687;
 }
 
-.c52[aria-disabled='true']:active svg > g,
-.c52[aria-disabled='true']:active svg path {
+.c54[aria-disabled='true']:active svg > g,
+.c54[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c52:hover {
+.c54:hover {
   background-color: #ffffff;
 }
 
-.c52:active {
+.c54:active {
   background-color: #ffffff;
   border: 1px solid #4945ff;
 }
 
-.c52:active .c50 {
+.c54:active .c52 {
   color: #4945ff;
 }
 
-.c52:active svg > g,
-.c52:active svg path {
+.c54:active svg > g,
+.c54:active svg path {
   fill: #4945ff;
 }
 
-.c52 .c50 {
+.c54 .c52 {
   color: #271fe0;
 }
 
-.c52 svg > g,
-.c52 svg path {
+.c54 svg > g,
+.c54 svg path {
   fill: #271fe0;
 }
 
-.c53 {
+.c55 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -346,7 +346,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c53 .sc-cfJLRR {
+.c55 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -357,61 +357,61 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c53 .c50 {
+.c55 .c52 {
   color: #ffffff;
 }
 
-.c53[aria-disabled='true'] {
+.c55[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c53[aria-disabled='true'] .c50 {
+.c55[aria-disabled='true'] .c52 {
   color: #666687;
 }
 
-.c53[aria-disabled='true'] svg > g,
-.c53[aria-disabled='true'] svg path {
+.c55[aria-disabled='true'] svg > g,
+.c55[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c53[aria-disabled='true']:active {
+.c55[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c53[aria-disabled='true']:active .c50 {
+.c55[aria-disabled='true']:active .c52 {
   color: #666687;
 }
 
-.c53[aria-disabled='true']:active svg > g,
-.c53[aria-disabled='true']:active svg path {
+.c55[aria-disabled='true']:active svg > g,
+.c55[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c53:hover {
+.c55:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c53:active {
+.c55:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c53 svg > g,
-.c53 svg path {
+.c55 svg > g,
+.c55 svg path {
   fill: #ffffff;
 }
 
-.c14 {
+.c15 {
   background: #eaeaef;
   border-radius: 4px;
   border-color: #dcdce4;
   border: 1px solid #dcdce4;
 }
 
-.c27 {
+.c29 {
   background: #f6f6f9;
   padding-top: 16px;
   padding-right: 24px;
@@ -420,30 +420,42 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c41 {
+.c43 {
   padding-right: 12px;
 }
 
-.c54 {
+.c56 {
   background: #212134;
   padding: 8px;
   border-radius: 4px;
 }
 
-.c56 {
+.c58 {
   font-weight: 600;
   color: #ffffff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c55 {
+.c24 {
+  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;
+}
+
+.c57 {
   position: absolute;
   z-index: 4;
   display: none;
 }
 
-.c21 {
+.c22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -457,21 +469,21 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c21 svg {
+.c22 svg {
   height: 12px;
   width: 12px;
 }
 
-.c21 svg > g,
-.c21 svg path {
+.c22 svg > g,
+.c22 svg path {
   fill: #ffffff;
 }
 
-.c21[aria-disabled='true'] {
+.c22[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c21:after {
+.c22:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -486,11 +498,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c21:focus-visible {
+.c22:focus-visible {
   outline: none;
 }
 
-.c21:focus-visible:after {
+.c22:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -501,7 +513,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c22 {
+.c23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -518,30 +530,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   width: 2rem;
 }
 
-.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'] {
+.c23[aria-disabled='true'] {
   background-color: #eaeaef;
 }
 
-.c22[aria-disabled='true'] svg path {
+.c23[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c44 {
+.c46 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -553,7 +565,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c31 {
+.c33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -567,7 +579,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c34 {
+.c36 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -581,7 +593,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c35 {
+.c37 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -599,20 +611,20 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c33 {
+.c35 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c38 {
+.c40 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c37 {
+.c39 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -627,36 +639,36 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: inherit;
 }
 
-.c37::-webkit-input-placeholder {
+.c39::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c37::-moz-placeholder {
+.c39::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c37:-ms-input-placeholder {
+.c39:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c37::placeholder {
+.c39::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c37[aria-disabled='true'] {
+.c39[aria-disabled='true'] {
   color: inherit;
 }
 
-.c37:focus {
+.c39:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c36 {
+.c38 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -668,21 +680,21 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c36:focus-within {
+.c38:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c32 > * {
+.c34 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c32 > * + * {
+.c34 > * + * {
   margin-top: 4px;
 }
 
-.c40 {
+.c42 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -696,30 +708,30 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c39 {
+.c41 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c42 {
+.c44 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c42 svg {
+.c44 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c42 svg path {
+.c44 svg path {
   fill: #666687;
 }
 
-.c43 {
+.c45 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -728,7 +740,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c43 svg {
+.c45 svg {
   width: 0.5625rem;
 }
 
@@ -746,7 +758,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   padding-left: 20px;
 }
 
-.c10 {
+.c11 {
   padding: 32px;
 }
 
@@ -792,7 +804,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c46 {
+.c48 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -806,6 +818,18 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
+.c10 {
+  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;
+}
+
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -909,66 +933,66 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c45 {
+.c47 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c47 > * + * {
+.c49 > * + * {
   margin-left: 8px;
 }
 
-.c11 {
+.c12 {
   overflow: auto;
   max-height: 60vh;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c13 {
+.c14 {
   grid-column: span 6;
   max-width: 100%;
 }
 
-.c15 {
+.c16 {
   position: relative;
 }
 
-.c23 {
+.c25 {
   position: relative;
   text-align: center;
   background: repeating-conic-gradient( #f6f6f9 0% 25%, transparent 0% 50% ) 50% / 20px 20px;
 }
 
-.c23 svg {
+.c25 svg {
   font-size: 3rem;
   height: 16.5rem;
 }
 
-.c23 img,
-.c23 video {
+.c25 img,
+.c25 video {
   margin: 0;
   padding: 0;
   max-height: 16.5rem;
   max-width: 100%;
 }
 
-.c18 {
+.c19 {
   height: 3.25rem;
 }
 
 @media (max-width:68.75rem) {
-  .c13 {
+  .c14 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c13 {
+  .c14 {
     grid-column: span 12;
   }
 }
@@ -1028,12 +1052,18 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                 </h2>
                 <button
                   aria-disabled="false"
-                  aria-label="Close the modal"
                   class="c8 c9"
                   type="button"
                 >
+                  <span
+                    class="c10"
+                  >
+                    Close the modal
+                  </span>
                   <svg
+                    aria-hidden="true"
                     fill="none"
+                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -1048,37 +1078,44 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="c10 c11"
+              class="c11 c12"
             >
               <div
-                class="c12"
+                class="c13"
               >
                 <div
-                  class="c13"
+                  class="c14"
                 >
                   <div
                     class=""
                   >
                     <div
-                      class="c14 c15"
+                      class="c15 c16"
                     >
                       <div
-                        class="c16 c17 c18"
+                        class="c17 c18 c19"
                       >
                         <div
-                          class="c19 c20"
+                          class="c20 c21"
                           spacing="1"
                         >
                           <span>
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-1"
-                              class="c21 c22"
+                              class="c22 c23"
                               tabindex="0"
                               type="button"
                             >
+                              <span
+                                class="c24"
+                              >
+                                Delete
+                              </span>
                               <svg
+                                aria-hidden="true"
                                 fill="none"
+                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 24"
                                 width="1em"
@@ -1095,12 +1132,19 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-3"
-                              class="c21 c22"
+                              class="c22 c23"
                               tabindex="0"
                               type="button"
                             >
+                              <span
+                                class="c24"
+                              >
+                                Download
+                              </span>
                               <svg
+                                aria-hidden="true"
                                 fill="none"
+                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 25"
                                 width="1em"
@@ -1119,12 +1163,19 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-5"
-                              class="c21 c22"
+                              class="c22 c23"
                               tabindex="0"
                               type="button"
                             >
+                              <span
+                                class="c24"
+                              >
+                                Copy link
+                              </span>
                               <svg
+                                aria-hidden="true"
                                 fill="none"
+                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 24"
                                 width="1em"
@@ -1145,12 +1196,19 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                             <button
                               aria-disabled="false"
                               aria-labelledby="tooltip-7"
-                              class="c21 c22"
+                              class="c22 c23"
                               tabindex="0"
                               type="button"
                             >
+                              <span
+                                class="c24"
+                              >
+                                Crop
+                              </span>
                               <svg
+                                aria-hidden="true"
                                 fill="none"
+                                focusable="false"
                                 height="1em"
                                 viewBox="0 0 24 24"
                                 width="1em"
@@ -1166,7 +1224,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c23"
+                        class="c25"
                       >
                         <img
                           alt="Screenshot 2.png"
@@ -1174,13 +1232,13 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         />
                       </div>
                       <div
-                        class="c24 c17 c18"
+                        class="c26 c18 c19"
                       />
                     </div>
                   </div>
                 </div>
                 <div
-                  class="c13"
+                  class="c14"
                 >
                   <div
                     class=""
@@ -1190,32 +1248,32 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                       novalidate=""
                     >
                       <div
-                        class="c25 c26"
+                        class="c27 c28"
                         spacing="3"
                       >
                         <div
-                          class="c27"
+                          class="c29"
                         >
                           <div
-                            class="c12"
+                            class="c13"
                           >
                             <div
-                              class="c13"
+                              class="c14"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c25 c28"
+                                  class="c27 c30"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c29"
+                                    class="c31"
                                   >
                                     Size
                                   </span>
                                   <span
-                                    class="c30"
+                                    class="c32"
                                   >
                                     102KB
                                   </span>
@@ -1223,22 +1281,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c13"
+                              class="c14"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c25 c28"
+                                  class="c27 c30"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c29"
+                                    class="c31"
                                   >
                                     Dimensions
                                   </span>
                                   <span
-                                    class="c30"
+                                    class="c32"
                                   >
                                     1476✕780
                                   </span>
@@ -1246,22 +1304,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c13"
+                              class="c14"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c25 c28"
+                                  class="c27 c30"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c29"
+                                    class="c31"
                                   >
                                     Date
                                   </span>
                                   <span
-                                    class="c30"
+                                    class="c32"
                                   >
                                     10/4/2021
                                   </span>
@@ -1269,22 +1327,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c13"
+                              class="c14"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c25 c28"
+                                  class="c27 c30"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c29"
+                                    class="c31"
                                   >
                                     Extension
                                   </span>
                                   <span
-                                    class="c30"
+                                    class="c32"
                                   >
                                     png
                                   </span>
@@ -1292,22 +1350,22 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c13"
+                              class="c14"
                             >
                               <div
                                 class=""
                               >
                                 <div
-                                  class="c25 c28"
+                                  class="c27 c30"
                                   spacing="1"
                                 >
                                   <span
-                                    class="c29"
+                                    class="c31"
                                   >
                                     Asset ID
                                   </span>
                                   <span
-                                    class="c30"
+                                    class="c32"
                                   >
                                     8
                                   </span>
@@ -1319,26 +1377,26 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         <div>
                           <div>
                             <div
-                              class="c31 c32"
+                              class="c33 c34"
                               spacing="1"
                             >
                               <label
-                                class="c33"
+                                class="c35"
                                 for="textinput-1"
                               >
                                 <div
-                                  class="c34"
+                                  class="c36"
                                 >
                                   File name
                                 </div>
                               </label>
                               <div
-                                class="c35 c36"
+                                class="c37 c38"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
-                                  class="c37"
+                                  class="c39"
                                   id="textinput-1"
                                   name="name"
                                   value="Screenshot 2.png"
@@ -1350,34 +1408,34 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         <div>
                           <div>
                             <div
-                              class="c31 c32"
+                              class="c33 c34"
                               spacing="1"
                             >
                               <label
-                                class="c33"
+                                class="c35"
                                 for="textinput-2"
                               >
                                 <div
-                                  class="c34"
+                                  class="c36"
                                 >
                                   Alternative text
                                 </div>
                               </label>
                               <div
-                                class="c35 c36"
+                                class="c37 c38"
                               >
                                 <input
                                   aria-describedby="textinput-2-hint"
                                   aria-disabled="false"
                                   aria-invalid="false"
-                                  class="c37"
+                                  class="c39"
                                   id="textinput-2"
                                   name="alternativeText"
                                   value=""
                                 />
                               </div>
                               <p
-                                class="c38"
+                                class="c40"
                                 id="textinput-2-hint"
                               >
                                 This text will be displayed if the asset can’t be shown.
@@ -1388,26 +1446,26 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         <div>
                           <div>
                             <div
-                              class="c31 c32"
+                              class="c33 c34"
                               spacing="1"
                             >
                               <label
-                                class="c33"
+                                class="c35"
                                 for="textinput-3"
                               >
                                 <div
-                                  class="c34"
+                                  class="c36"
                                 >
                                   Caption
                                 </div>
                               </label>
                               <div
-                                class="c35 c36"
+                                class="c37 c38"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
-                                  class="c37"
+                                  class="c39"
                                   id="textinput-3"
                                   name="caption"
                                   value=""
@@ -1417,15 +1475,15 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                           </div>
                         </div>
                         <div
-                          class="c25 c28"
+                          class="c27 c30"
                           spacing="1"
                         >
                           <label
-                            class="c39"
+                            class="c41"
                             for="asset-folder"
                           >
                             <div
-                              class="c40"
+                              class="c42"
                             >
                               Location
                             </div>
@@ -1472,7 +1530,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                                 class=" css-1hb7zxy-IndicatorsContainer"
                               >
                                 <button
-                                  class="c41 c42 c43"
+                                  class="c43 c44 c45"
                                   type="button"
                                 >
                                   <svg
@@ -1501,7 +1559,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c44"
+                        class="c46"
                       >
                         <button
                           tabindex="-1"
@@ -1516,42 +1574,42 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="c4 c45"
+              class="c4 c47"
             >
               <div
                 class="c6"
               >
                 <div
-                  class="c46 c47"
+                  class="c48 c49"
                 >
                   <button
                     aria-disabled="false"
-                    class="c48 c49"
+                    class="c50 c51"
                     type="button"
                   >
                     <span
-                      class="c50 c51"
+                      class="c52 c53"
                     >
                       Cancel
                     </span>
                   </button>
                 </div>
                 <div
-                  class="c46 c47"
+                  class="c48 c49"
                 >
                   <button
                     aria-disabled="false"
-                    class="c48 c52"
+                    class="c50 c54"
                     type="button"
                   >
                     <span
-                      class="c50 c51"
+                      class="c52 c53"
                     >
                       Replace media
                     </span>
                   </button>
                   <div
-                    class="c44"
+                    class="c46"
                   >
                     <input
                       accept="image/png"
@@ -1563,11 +1621,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                   </div>
                   <button
                     aria-disabled="false"
-                    class="c48 c53"
+                    class="c50 c55"
                     type="button"
                   >
                     <span
-                      class="c50 c51"
+                      class="c52 c53"
                     >
                       Finish
                     </span>
@@ -1584,12 +1642,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c54 c55"
+      class="c56 c57"
       id="tooltip-1"
       role="tooltip"
     >
       <p
-        class="c56"
+        class="c58"
       >
         Delete
       </p>
@@ -1599,12 +1657,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c54 c55"
+      class="c56 c57"
       id="tooltip-3"
       role="tooltip"
     >
       <p
-        class="c56"
+        class="c58"
       >
         Download
       </p>
@@ -1614,12 +1672,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c54 c55"
+      class="c56 c57"
       id="tooltip-5"
       role="tooltip"
     >
       <p
-        class="c56"
+        class="c58"
       >
         Copy link
       </p>
@@ -1629,12 +1687,12 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c54 c55"
+      class="c56 c57"
       id="tooltip-7"
       role="tooltip"
     >
       <p
-        class="c56"
+        class="c58"
       >
         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 9ea204e1ed9..c4a8d8cad5a 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
@@ -13,7 +13,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c21 {
+.c22 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -27,7 +27,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c35 {
+.c36 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -41,21 +41,21 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c22 > * {
+.c23 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c22 > * + * {
+.c23 > * + * {
   margin-top: 4px;
 }
 
-.c36 > * {
+.c37 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c36 > * + * {
+.c37 > * + * {
   margin-left: 8px;
 }
 
@@ -66,14 +66,14 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c34 {
+.c35 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c31 {
+.c32 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -87,21 +87,21 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c31 svg {
+.c32 svg {
   height: 12px;
   width: 12px;
 }
 
-.c31 svg > g,
-.c31 svg path {
+.c32 svg > g,
+.c32 svg path {
   fill: #ffffff;
 }
 
-.c31[aria-disabled='true'] {
+.c32[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c31:after {
+.c32:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -116,11 +116,11 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c31:focus-visible {
+.c32:focus-visible {
   outline: none;
 }
 
-.c31:focus-visible:after {
+.c32:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -131,7 +131,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c32 {
+.c33 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -143,7 +143,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c32 .sc-cfJLRR {
+.c33 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -154,56 +154,56 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c32 .c33 {
+.c33 .c34 {
   color: #ffffff;
 }
 
-.c32[aria-disabled='true'] {
+.c33[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c32[aria-disabled='true'] .c33 {
+.c33[aria-disabled='true'] .c34 {
   color: #666687;
 }
 
-.c32[aria-disabled='true'] svg > g,
-.c32[aria-disabled='true'] svg path {
+.c33[aria-disabled='true'] svg > g,
+.c33[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c32[aria-disabled='true']:active {
+.c33[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c32[aria-disabled='true']:active .c33 {
+.c33[aria-disabled='true']:active .c34 {
   color: #666687;
 }
 
-.c32[aria-disabled='true']:active svg > g,
-.c32[aria-disabled='true']:active svg path {
+.c33[aria-disabled='true']:active svg > g,
+.c33[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c32:hover {
+.c33:hover {
   background-color: #f6f6f9;
 }
 
-.c32:active {
+.c33:active {
   background-color: #eaeaef;
 }
 
-.c32 .c33 {
+.c33 .c34 {
   color: #32324d;
 }
 
-.c32 svg > g,
-.c32 svg path {
+.c33 svg > g,
+.c33 svg path {
   fill: #32324d;
 }
 
-.c37 {
+.c38 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -213,7 +213,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c37 .sc-cfJLRR {
+.c38 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -224,58 +224,58 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c37 .c33 {
+.c38 .c34 {
   color: #ffffff;
 }
 
-.c37[aria-disabled='true'] {
+.c38[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c37[aria-disabled='true'] .c33 {
+.c38[aria-disabled='true'] .c34 {
   color: #666687;
 }
 
-.c37[aria-disabled='true'] svg > g,
-.c37[aria-disabled='true'] svg path {
+.c38[aria-disabled='true'] svg > g,
+.c38[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c37[aria-disabled='true']:active {
+.c38[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c37[aria-disabled='true']:active .c33 {
+.c38[aria-disabled='true']:active .c34 {
   color: #666687;
 }
 
-.c37[aria-disabled='true']:active svg > g,
-.c37[aria-disabled='true']:active svg path {
+.c38[aria-disabled='true']:active svg > g,
+.c38[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c37:hover {
+.c38:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c37:active {
+.c38:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c37 svg > g,
-.c37 svg path {
+.c38 svg > g,
+.c38 svg path {
   fill: #ffffff;
 }
 
-.c25 {
+.c26 {
   padding-right: 12px;
 }
 
-.c14 {
+.c15 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -289,7 +289,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c17 {
+.c18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -303,7 +303,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c18 {
+.c19 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -321,14 +321,14 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c16 {
+.c17 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c20 {
+.c21 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -343,36 +343,36 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   background: inherit;
 }
 
-.c20::-webkit-input-placeholder {
+.c21::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c20::-moz-placeholder {
+.c21::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c20:-ms-input-placeholder {
+.c21:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c20::placeholder {
+.c21::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c20[aria-disabled='true'] {
+.c21[aria-disabled='true'] {
   color: inherit;
 }
 
-.c20:focus {
+.c21:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c19 {
+.c20 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -384,21 +384,21 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c19:focus-within {
+.c20:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c15 > * {
+.c16 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c15 > * + * {
+.c16 > * + * {
   margin-top: 4px;
 }
 
-.c24 {
+.c25 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -412,30 +412,30 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c23 {
+.c24 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c26 {
+.c27 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c26 svg {
+.c27 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c26 svg path {
+.c27 svg path {
   fill: #666687;
 }
 
-.c27 {
+.c28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -444,17 +444,17 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c27 svg {
+.c28 svg {
   width: 0.5625rem;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c13 {
+.c14 {
   grid-column: span 6;
   max-width: 100%;
 }
@@ -473,7 +473,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   padding-left: 20px;
 }
 
-.c10 {
+.c11 {
   padding: 32px;
 }
 
@@ -519,7 +519,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c29 {
+.c30 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -533,6 +533,18 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
+.c10 {
+  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;
+}
+
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -636,28 +648,28 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c28 {
+.c29 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c30 > * + * {
+.c31 > * + * {
   margin-left: 8px;
 }
 
-.c11 {
+.c12 {
   overflow: auto;
   max-height: 60vh;
 }
 
 @media (max-width:68.75rem) {
-  .c13 {
+  .c14 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c13 {
+  .c14 {
     grid-column: span 12;
   }
 }
@@ -721,12 +733,18 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                   </h2>
                   <button
                     aria-disabled="false"
-                    aria-label="Close the modal"
                     class="c8 c9"
                     type="button"
                   >
+                    <span
+                      class="c10"
+                    >
+                      Close the modal
+                    </span>
                     <svg
+                      aria-hidden="true"
                       fill="none"
+                      focusable="false"
                       height="1em"
                       viewBox="0 0 24 24"
                       width="1em"
@@ -741,13 +759,13 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c10 c11"
+                class="c11 c12"
               >
                 <div
-                  class="c12"
+                  class="c13"
                 >
                   <div
-                    class="c13"
+                    class="c14"
                   >
                     <div
                       class=""
@@ -755,26 +773,26 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                       <div>
                         <div>
                           <div
-                            class="c14 c15"
+                            class="c15 c16"
                             spacing="1"
                           >
                             <label
-                              class="c16"
+                              class="c17"
                               for="textinput-1"
                             >
                               <div
-                                class="c17"
+                                class="c18"
                               >
                                 Name
                               </div>
                             </label>
                             <div
-                              class="c18 c19"
+                              class="c19 c20"
                             >
                               <input
                                 aria-disabled="false"
                                 aria-invalid="false"
-                                class="c20"
+                                class="c21"
                                 id="textinput-1"
                                 name="name"
                                 value=""
@@ -786,21 +804,21 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="c13"
+                    class="c14"
                   >
                     <div
                       class=""
                     >
                       <div
-                        class="c21 c22"
+                        class="c22 c23"
                         spacing="1"
                       >
                         <label
-                          class="c23"
+                          class="c24"
                           for="folder-parent"
                         >
                           <div
-                            class="c24"
+                            class="c25"
                           >
                             Location
                           </div>
@@ -847,7 +865,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                               class=" css-1hb7zxy-IndicatorsContainer"
                             >
                               <button
-                                class="c25 c26 c27"
+                                class="c26 c27 c28"
                                 type="button"
                               >
                                 <svg
@@ -879,42 +897,42 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c4 c28"
+                class="c4 c29"
               >
                 <div
                   class="c6"
                 >
                   <div
-                    class="c29 c30"
+                    class="c30 c31"
                   >
                     <button
                       aria-disabled="false"
-                      class="c31 c32"
+                      class="c32 c33"
                       name="cancel"
                       type="button"
                     >
                       <span
-                        class="c33 c34"
+                        class="c34 c35"
                       >
                         Cancel
                       </span>
                     </button>
                   </div>
                   <div
-                    class="c29 c30"
+                    class="c30 c31"
                   >
                     <div
-                      class="c35 c36"
+                      class="c36 c37"
                       spacing="2"
                     >
                       <button
                         aria-disabled="false"
-                        class="c31 c37"
+                        class="c32 c38"
                         name="submit"
                         type="submit"
                       >
                         <span
-                          class="c33 c34"
+                          class="c34 c35"
                         >
                           Create
                         </span>
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 0e63e6128e3..e69104c1356 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
@@ -254,11 +254,15 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
       <div
         class="c5"
       >
-        <input
-          aria-labelledby="folder-3-title"
-          class="c6"
-          type="checkbox"
-        />
+        <div
+          class=""
+        >
+          <input
+            aria-labelledby="folder-3-title"
+            class="c6"
+            type="checkbox"
+          />
+        </div>
       </div>
       <div
         class="c7"
diff --git a/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap b/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap
index c0ccdbb31a4..8f8945e568f 100644
--- a/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap
+++ b/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap
@@ -176,7 +176,7 @@ exports[`SelectTree renders 1`] = `
           class=" css-1hb7zxy-IndicatorsContainer"
         >
           <button
-            class="sc-bvFjSx sc-chKlql sc-jEItEs flrKyR iaRzgE kziwvZ"
+            class="sc-bvFjSx sc-jEItEs sc-kOJRsK flrKyR dEtywB bEaowF"
             type="button"
           >
             <svg
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 4dc33f03667..721b7a9d535 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
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
-.c59 {
+.c61 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -13,12 +13,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   width: 1px;
 }
 
-.c46 {
+.c48 {
   width: 100%;
   height: 5.5rem;
 }
 
-.c10 {
+.c11 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -36,7 +36,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   justify-content: space-between;
 }
 
-.c47 {
+.c49 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -54,7 +54,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   justify-content: center;
 }
 
-.c8 {
+.c9 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -68,16 +68,16 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   flex-direction: column;
 }
 
-.c9 > * {
+.c10 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c9 > * + * {
+.c10 > * + * {
   margin-top: 32px;
 }
 
-.c11 > * {
+.c12 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -89,27 +89,27 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   line-height: 1.43;
 }
 
-.c12 {
+.c13 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c13 {
+.c14 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c17 {
+.c18 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c14 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -123,21 +123,21 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   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;
@@ -152,11 +152,11 @@ exports[`PendingAssetStep snapshots the component with valid cards 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;
@@ -167,7 +167,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c15 {
+.c16 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -177,7 +177,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c15 .sc-cfJLRR {
+.c16 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -188,54 +188,54 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: center;
 }
 
-.c15 .c16 {
+.c16 .c17 {
   color: #ffffff;
 }
 
-.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 {
   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;
 }
 
-.c58 {
+.c60 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -247,7 +247,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   background: #ffffff;
 }
 
-.c58 .sc-cfJLRR {
+.c60 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -258,60 +258,72 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: center;
 }
 
-.c58 .c16 {
+.c60 .c17 {
   color: #ffffff;
 }
 
-.c58[aria-disabled='true'] {
+.c60[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c58[aria-disabled='true'] .c16 {
+.c60[aria-disabled='true'] .c17 {
   color: #666687;
 }
 
-.c58[aria-disabled='true'] svg > g,
-.c58[aria-disabled='true'] svg path {
+.c60[aria-disabled='true'] svg > g,
+.c60[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c58[aria-disabled='true']:active {
+.c60[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c58[aria-disabled='true']:active .c16 {
+.c60[aria-disabled='true']:active .c17 {
   color: #666687;
 }
 
-.c58[aria-disabled='true']:active svg > g,
-.c58[aria-disabled='true']:active svg path {
+.c60[aria-disabled='true']:active svg > g,
+.c60[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c58:hover {
+.c60:hover {
   background-color: #f6f6f9;
 }
 
-.c58:active {
+.c60:active {
   background-color: #eaeaef;
 }
 
-.c58 .c16 {
+.c60 .c17 {
   color: #32324d;
 }
 
-.c58 svg > g,
-.c58 svg path {
+.c60 svg > g,
+.c60 svg path {
   fill: #32324d;
 }
 
-.c37 {
+.c39 {
   padding-top: 4px;
 }
 
-.c30 {
+.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;
+}
+
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -325,21 +337,21 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   outline: none;
 }
 
-.c30 svg {
+.c31 svg {
   height: 12px;
   width: 12px;
 }
 
-.c30 svg > g,
-.c30 svg path {
+.c31 svg > g,
+.c31 svg path {
   fill: #ffffff;
 }
 
-.c30[aria-disabled='true'] {
+.c31[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c30:after {
+.c31:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -354,11 +366,11 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border: 2px solid transparent;
 }
 
-.c30:focus-visible {
+.c31:focus-visible {
   outline: none;
 }
 
-.c30:focus-visible:after {
+.c31:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -369,7 +381,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c31 {
+.c32 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -386,30 +398,30 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   width: 2rem;
 }
 
-.c31 svg > g,
-.c31 svg path {
+.c32 svg > g,
+.c32 svg path {
   fill: #8e8ea9;
 }
 
-.c31:hover svg > g,
-.c31:hover svg path {
+.c32:hover svg > g,
+.c32:hover svg path {
   fill: #666687;
 }
 
-.c31:active svg > g,
-.c31:active svg path {
+.c32:active svg > g,
+.c32:active svg path {
   fill: #a5a5ba;
 }
 
-.c31[aria-disabled='true'] {
+.c32[aria-disabled='true'] {
   background-color: #eaeaef;
 }
 
-.c31[aria-disabled='true'] svg path {
+.c32[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c51 {
+.c53 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -429,7 +441,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   padding-left: 20px;
 }
 
-.c6 {
+.c7 {
   padding: 32px;
 }
 
@@ -451,7 +463,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   justify-content: space-between;
 }
 
-.c56 {
+.c58 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -465,6 +477,18 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   flex-direction: row;
 }
 
+.c6 {
+  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;
+}
+
 .c4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -568,32 +592,32 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c55 {
+.c57 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c57 > * + * {
+.c59 > * + * {
   margin-left: 8px;
 }
 
-.c7 {
+.c8 {
   overflow: auto;
   max-height: 60vh;
 }
 
-.c18 {
+.c19 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c19 {
+.c20 {
   grid-column: span 4;
   max-width: 100%;
 }
 
-.c20 {
+.c21 {
   background: #ffffff;
   border-radius: 4px;
   border-style: solid;
@@ -603,32 +627,32 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   height: 100%;
 }
 
-.c24 {
+.c25 {
   position: end;
 }
 
-.c34 {
+.c36 {
   padding-top: 8px;
   padding-right: 12px;
   padding-bottom: 8px;
   padding-left: 12px;
 }
 
-.c42 {
+.c44 {
   background: #f6f6f9;
   padding: 4px;
   border-radius: 4px;
   min-width: 20px;
 }
 
-.c52 {
+.c54 {
   background: #32324d;
   color: #ffffff;
   padding: 4px;
   border-radius: 4px;
 }
 
-.c22 {
+.c23 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -646,7 +670,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   justify-content: center;
 }
 
-.c25 {
+.c26 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -660,7 +684,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   flex-direction: row;
 }
 
-.c35 {
+.c37 {
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
@@ -674,7 +698,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   flex-direction: row;
 }
 
-.c43 {
+.c45 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -692,22 +716,22 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   justify-content: center;
 }
 
-.c26 > * {
+.c27 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c26 > * + * {
+.c27 > * + * {
   margin-left: 8px;
 }
 
-.c28 {
+.c29 {
   position: absolute;
   top: 12px;
   right: 12px;
 }
 
-.c33 {
+.c35 {
   margin: 0;
   padding: 0;
   max-height: 100%;
@@ -715,7 +739,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   object-fit: contain;
 }
 
-.c32 {
+.c34 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -731,20 +755,20 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-top-right-radius: 4px;
 }
 
-.c38 {
+.c40 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c39 {
+.c41 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c45 {
+.c47 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -752,82 +776,82 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   text-transform: uppercase;
 }
 
-.c54 {
+.c56 {
   color: #ffffff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c41 {
+.c43 {
   margin-left: auto;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c44 {
+.c46 {
   margin-left: 4px;
 }
 
-.c36 {
+.c38 {
   word-break: break-all;
 }
 
-.c23 {
+.c24 {
   position: relative;
   border-bottom: 1px solid #eaeaef;
 }
 
-.c53 {
+.c55 {
   position: absolute;
   bottom: 4px;
   right: 4px;
 }
 
-.c40 {
+.c42 {
   text-transform: uppercase;
 }
 
-.c29 {
+.c30 {
   opacity: 0;
 }
 
-.c29:focus-within {
+.c30:focus-within {
   opacity: 1;
 }
 
-.c21 {
+.c22 {
   cursor: pointer;
 }
 
-.c21:hover .c27 {
+.c22:hover .c28 {
   opacity: 1;
 }
 
-.c50 canvas,
-.c50 video {
+.c52 canvas,
+.c52 video {
   display: block;
   max-width: 100%;
   max-height: 5.5rem;
 }
 
-.c49 svg {
+.c51 svg {
   font-size: 3rem;
 }
 
-.c48 {
+.c50 {
   border-radius: 4px 4px 0 0;
   background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
 }
 
 @media (max-width:68.75rem) {
-  .c19 {
+  .c20 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c19 {
+  .c20 {
     grid-column: span;
   }
 }
@@ -848,12 +872,18 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
         </h2>
         <button
           aria-disabled="false"
-          aria-label="Close the modal"
           class="c4 c5"
           type="button"
         >
+          <span
+            class="c6"
+          >
+            Close the modal
+          </span>
           <svg
+            aria-hidden="true"
             fill="none"
+            focusable="false"
             height="1em"
             viewBox="0 0 24 24"
             width="1em"
@@ -868,36 +898,36 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
       </div>
     </div>
     <div
-      class="c6 c7"
+      class="c7 c8"
     >
       <div
-        class="c8 c9"
+        class="c9 c10"
         spacing="7"
       >
         <div
-          class="c10"
+          class="c11"
         >
           <div
-            class="c8 c11"
+            class="c9 c12"
           >
             <span
-              class="c12"
+              class="c13"
             >
               3 assets ready to upload
             </span>
             <span
-              class="c13"
+              class="c14"
             >
               Manage the assets before adding them to the Media Library
             </span>
           </div>
           <button
             aria-disabled="false"
-            class="c14 c15"
+            class="c15 c16"
             type="button"
           >
             <span
-              class="c16 c17"
+              class="c17 c18"
             >
               Add new assets
             </span>
@@ -907,38 +937,45 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
           class=""
         >
           <div
-            class="c18"
+            class="c19"
           >
             <div
-              class="c19"
+              class="c20"
             >
               <div
                 class=""
               >
                 <article
                   aria-labelledby="card-1-title"
-                  class="c20 c21"
+                  class="c21 c22"
                   height="100%"
                   role="button"
                   tabindex="-1"
                 >
                   <div
-                    class="c22 c23"
+                    class="c23 c24"
                   >
                     <div
-                      class="c24 c25 c26 c27 c28 c29"
+                      class="c25 c26 c27 c28 c29 c30"
                       spacing="2"
                     >
                       <span>
                         <button
                           aria-disabled="false"
                           aria-labelledby="tooltip-1"
-                          class="c30 c31"
+                          class="c31 c32"
                           tabindex="0"
                           type="button"
                         >
+                          <span
+                            class="c33"
+                          >
+                            Remove from selection
+                          </span>
                           <svg
+                            aria-hidden="true"
                             fill="none"
+                            focusable="false"
                             height="1em"
                             viewBox="0 0 24 24"
                             width="1em"
@@ -955,12 +992,19 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         <button
                           aria-disabled="false"
                           aria-labelledby="tooltip-3"
-                          class="c30 c31"
+                          class="c31 c32"
                           tabindex="0"
                           type="button"
                         >
+                          <span
+                            class="c33"
+                          >
+                            Edit
+                          </span>
                           <svg
+                            aria-hidden="true"
                             fill="none"
+                            focusable="false"
                             height="1em"
                             viewBox="0 0 24 24"
                             width="1em"
@@ -977,40 +1021,40 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       </span>
                     </div>
                     <div
-                      class="c32"
+                      class="c34"
                     >
                       <img
                         alt="something.jpg"
                         aria-hidden="true"
-                        class="c33"
+                        class="c35"
                         src="http://localhost:5000/CPAM.jpg"
                       />
                     </div>
                   </div>
                   <div
-                    class="c34"
+                    class="c36"
                   >
                     <div
-                      class="c35"
+                      class="c37"
                     >
                       <div
-                        class="c36"
+                        class="c38"
                       >
                         <div
-                          class="c37"
+                          class="c39"
                         >
                           <h2
-                            class="c38"
+                            class="c40"
                             id="card-1-title"
                           >
                             something.jpg
                           </h2>
                         </div>
                         <div
-                          class="c39"
+                          class="c41"
                         >
                           <span
-                            class="c40"
+                            class="c42"
                           >
                             jpg
                           </span>
@@ -1018,13 +1062,13 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c41"
+                        class="c43"
                       >
                         <div
-                          class="c42 c43 c44"
+                          class="c44 c45 c46"
                         >
                           <span
-                            class="c45"
+                            class="c47"
                           >
                             Image
                           </span>
@@ -1036,35 +1080,42 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
               </div>
             </div>
             <div
-              class="c19"
+              class="c20"
             >
               <div
                 class=""
               >
                 <article
                   aria-labelledby="card-2-title"
-                  class="c20 c21"
+                  class="c21 c22"
                   height="100%"
                   role="button"
                   tabindex="-1"
                 >
                   <div
-                    class="c22 c23"
+                    class="c23 c24"
                   >
                     <div
-                      class="c24 c25 c26 c27 c28 c29"
+                      class="c25 c26 c27 c28 c29 c30"
                       spacing="2"
                     >
                       <span>
                         <button
                           aria-disabled="false"
                           aria-labelledby="tooltip-5"
-                          class="c30 c31"
+                          class="c31 c32"
                           tabindex="0"
                           type="button"
                         >
+                          <span
+                            class="c33"
+                          >
+                            Remove from selection
+                          </span>
                           <svg
+                            aria-hidden="true"
                             fill="none"
+                            focusable="false"
                             height="1em"
                             viewBox="0 0 24 24"
                             width="1em"
@@ -1081,12 +1132,19 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         <button
                           aria-disabled="false"
                           aria-labelledby="tooltip-7"
-                          class="c30 c31"
+                          class="c31 c32"
                           tabindex="0"
                           type="button"
                         >
+                          <span
+                            class="c33"
+                          >
+                            Edit
+                          </span>
                           <svg
+                            aria-hidden="true"
                             fill="none"
+                            focusable="false"
                             height="1em"
                             viewBox="0 0 24 24"
                             width="1em"
@@ -1103,12 +1161,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       </span>
                     </div>
                     <div
-                      class="c46 c47 c48"
+                      class="c48 c49 c50"
                       height="5.5rem"
                       width="100%"
                     >
                       <span
-                        class="c49"
+                        class="c51"
                       >
                         <svg
                           aria-label="something.pdf"
@@ -1133,29 +1191,29 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                     </div>
                   </div>
                   <div
-                    class="c34"
+                    class="c36"
                   >
                     <div
-                      class="c35"
+                      class="c37"
                     >
                       <div
-                        class="c36"
+                        class="c38"
                       >
                         <div
-                          class="c37"
+                          class="c39"
                         >
                           <h2
-                            class="c38"
+                            class="c40"
                             id="card-2-title"
                           >
                             something.pdf
                           </h2>
                         </div>
                         <div
-                          class="c39"
+                          class="c41"
                         >
                           <span
-                            class="c40"
+                            class="c42"
                           >
                             pdf
                           </span>
@@ -1163,13 +1221,13 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c41"
+                        class="c43"
                       >
                         <div
-                          class="c42 c43 c44"
+                          class="c44 c45 c46"
                         >
                           <span
-                            class="c45"
+                            class="c47"
                           >
                             Doc
                           </span>
@@ -1181,35 +1239,42 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
               </div>
             </div>
             <div
-              class="c19"
+              class="c20"
             >
               <div
                 class=""
               >
                 <article
                   aria-labelledby="card-3-title"
-                  class="c20 c21"
+                  class="c21 c22"
                   height="100%"
                   role="button"
                   tabindex="-1"
                 >
                   <div
-                    class="c22 c23"
+                    class="c23 c24"
                   >
                     <div
-                      class="c24 c25 c26 c27 c28 c29"
+                      class="c25 c26 c27 c28 c29 c30"
                       spacing="2"
                     >
                       <span>
                         <button
                           aria-disabled="false"
                           aria-labelledby="tooltip-9"
-                          class="c30 c31"
+                          class="c31 c32"
                           tabindex="0"
                           type="button"
                         >
+                          <span
+                            class="c33"
+                          >
+                            Remove from selection
+                          </span>
                           <svg
+                            aria-hidden="true"
                             fill="none"
+                            focusable="false"
                             height="1em"
                             viewBox="0 0 24 24"
                             width="1em"
@@ -1226,12 +1291,19 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         <button
                           aria-disabled="false"
                           aria-labelledby="tooltip-11"
-                          class="c30 c31"
+                          class="c31 c32"
                           tabindex="0"
                           type="button"
                         >
+                          <span
+                            class="c33"
+                          >
+                            Edit
+                          </span>
                           <svg
+                            aria-hidden="true"
                             fill="none"
+                            focusable="false"
                             height="1em"
                             viewBox="0 0 24 24"
                             width="1em"
@@ -1248,13 +1320,13 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       </span>
                     </div>
                     <div
-                      class="c32"
+                      class="c34"
                     >
                       <div
-                        class="c25"
+                        class="c26"
                       >
                         <div
-                          class="c50"
+                          class="c52"
                         >
                           <figure
                             class=""
@@ -1268,7 +1340,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                               />
                             </video>
                             <figcaption
-                              class="c51"
+                              class="c53"
                             >
                               something.mp4
                             </figcaption>
@@ -1277,39 +1349,39 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       </div>
                     </div>
                     <time
-                      class="c52 c53"
+                      class="c54 c55"
                     >
                       <span
-                        class="c54"
+                        class="c56"
                       >
                         ...
                       </span>
                     </time>
                   </div>
                   <div
-                    class="c34"
+                    class="c36"
                   >
                     <div
-                      class="c35"
+                      class="c37"
                     >
                       <div
-                        class="c36"
+                        class="c38"
                       >
                         <div
-                          class="c37"
+                          class="c39"
                         >
                           <h2
-                            class="c38"
+                            class="c40"
                             id="card-3-title"
                           >
                             something.mp4
                           </h2>
                         </div>
                         <div
-                          class="c39"
+                          class="c41"
                         >
                           <span
-                            class="c40"
+                            class="c42"
                           >
                             mp4
                           </span>
@@ -1317,13 +1389,13 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c41"
+                        class="c43"
                       >
                         <div
-                          class="c42 c43 c44"
+                          class="c44 c45 c46"
                         >
                           <span
-                            class="c45"
+                            class="c47"
                           >
                             Video
                           </span>
@@ -1339,36 +1411,36 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
       </div>
     </div>
     <div
-      class="c0 c55"
+      class="c0 c57"
     >
       <div
         class="c2"
       >
         <div
-          class="c56 c57"
+          class="c58 c59"
         >
           <button
             aria-disabled="false"
-            class="c14 c58"
+            class="c15 c60"
             type="button"
           >
             <span
-              class="c16 c17"
+              class="c17 c18"
             >
               cancel
             </span>
           </button>
         </div>
         <div
-          class="c56 c57"
+          class="c58 c59"
         >
           <button
             aria-disabled="false"
-            class="c14 c15"
+            class="c15 c16"
             type="submit"
           >
             <span
-              class="c16 c17"
+              class="c17 c18"
             >
               Upload 3 assets to the library
             </span>
@@ -1378,7 +1450,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
     </div>
   </form>
   <div
-    class="c59"
+    class="c61"
   >
     <p
       aria-live="polite"
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 e3f111e7191..caf346ced3d 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
@@ -13,7 +13,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   width: 1px;
 }
 
-.c22 {
+.c23 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -31,7 +31,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   justify-content: center;
 }
 
-.c23 {
+.c24 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -52,21 +52,21 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   line-height: 1.43;
 }
 
-.c27 {
+.c28 {
   color: #666687;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
 }
 
-.c34 {
+.c35 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c31 {
+.c32 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -80,21 +80,21 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   outline: none;
 }
 
-.c31 svg {
+.c32 svg {
   height: 12px;
   width: 12px;
 }
 
-.c31 svg > g,
-.c31 svg path {
+.c32 svg > g,
+.c32 svg path {
   fill: #ffffff;
 }
 
-.c31[aria-disabled='true'] {
+.c32[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c31:after {
+.c32:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -109,11 +109,11 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   border: 2px solid transparent;
 }
 
-.c31:focus-visible {
+.c32:focus-visible {
   outline: none;
 }
 
-.c31:focus-visible:after {
+.c32:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -124,7 +124,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c32 {
+.c33 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -134,7 +134,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c32 .sc-cfJLRR {
+.c33 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -145,54 +145,54 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   align-items: center;
 }
 
-.c32 .c33 {
+.c33 .c34 {
   color: #ffffff;
 }
 
-.c32[aria-disabled='true'] {
+.c33[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c32[aria-disabled='true'] .c33 {
+.c33[aria-disabled='true'] .c34 {
   color: #666687;
 }
 
-.c32[aria-disabled='true'] svg > g,
-.c32[aria-disabled='true'] svg path {
+.c33[aria-disabled='true'] svg > g,
+.c33[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c32[aria-disabled='true']:active {
+.c33[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c32[aria-disabled='true']:active .c33 {
+.c33[aria-disabled='true']:active .c34 {
   color: #666687;
 }
 
-.c32[aria-disabled='true']:active svg > g,
-.c32[aria-disabled='true']:active svg path {
+.c33[aria-disabled='true']:active svg > g,
+.c33[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c32:hover {
+.c33:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c32:active {
+.c33:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c32 svg > g,
-.c32 svg path {
+.c33 svg > g,
+.c33 svg path {
   fill: #ffffff;
 }
 
-.c38 {
+.c39 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -204,7 +204,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   background: #ffffff;
 }
 
-.c38 .sc-cfJLRR {
+.c39 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -215,69 +215,69 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   align-items: center;
 }
 
-.c38 .c33 {
+.c39 .c34 {
   color: #ffffff;
 }
 
-.c38[aria-disabled='true'] {
+.c39[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c38[aria-disabled='true'] .c33 {
+.c39[aria-disabled='true'] .c34 {
   color: #666687;
 }
 
-.c38[aria-disabled='true'] svg > g,
-.c38[aria-disabled='true'] svg path {
+.c39[aria-disabled='true'] svg > g,
+.c39[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c38[aria-disabled='true']:active {
+.c39[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c38[aria-disabled='true']:active .c33 {
+.c39[aria-disabled='true']:active .c34 {
   color: #666687;
 }
 
-.c38[aria-disabled='true']:active svg > g,
-.c38[aria-disabled='true']:active svg path {
+.c39[aria-disabled='true']:active svg > g,
+.c39[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c38:hover {
+.c39:hover {
   background-color: #f6f6f9;
 }
 
-.c38:active {
+.c39:active {
   background-color: #eaeaef;
 }
 
-.c38 .c33 {
+.c39 .c34 {
   color: #32324d;
 }
 
-.c38 svg > g,
-.c38 svg path {
+.c39 svg > g,
+.c39 svg path {
   fill: #32324d;
 }
 
-.c10 {
+.c11 {
   padding-top: 24px;
   padding-right: 40px;
   padding-left: 40px;
 }
 
-.c19 {
+.c20 {
   padding-top: 24px;
   padding-right: 40px;
   padding-bottom: 24px;
   padding-left: 40px;
 }
 
-.c20 {
+.c21 {
   background: #f6f6f9;
   padding-top: 64px;
   padding-bottom: 64px;
@@ -287,12 +287,12 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   position: relative;
 }
 
-.c26 {
+.c27 {
   padding-top: 12px;
   padding-bottom: 20px;
 }
 
-.c28 {
+.c29 {
   position: absolute;
   left: 0px;
   right: 0px;
@@ -302,7 +302,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   width: 100%;
 }
 
-.c30 {
+.c31 {
   position: relative;
 }
 
@@ -362,7 +362,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   justify-content: space-between;
 }
 
-.c36 {
+.c37 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -376,6 +376,18 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   flex-direction: row;
 }
 
+.c10 {
+  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;
+}
+
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -479,26 +491,26 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c35 {
+.c36 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c37 > * + * {
+.c38 > * + * {
   margin-left: 8px;
 }
 
-.c17 {
+.c18 {
   background: #eaeaef;
 }
 
-.c18 {
+.c19 {
   height: 1px;
   border: none;
   margin: 0;
 }
 
-.c14 {
+.c15 {
   color: #4945ff;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -506,7 +518,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   text-transform: uppercase;
 }
 
-.c16 {
+.c17 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -514,41 +526,41 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   text-transform: uppercase;
 }
 
-.c12 {
+.c13 {
   padding: 16px;
 }
 
-.c13 {
+.c14 {
   border-bottom: 2px solid #4945ff;
 }
 
-.c15 {
+.c16 {
   border-bottom: 2px solid transparent;
 }
 
-.c11[aria-disabled='true'] {
+.c12[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c24 {
+.c25 {
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
 }
 
-.c25 {
+.c26 {
   font-size: 3.75rem;
 }
 
-.c25 svg path {
+.c26 svg path {
   fill: #4945ff;
 }
 
-.c21 {
+.c22 {
   border-style: dashed;
 }
 
-.c29 {
+.c30 {
   opacity: 0;
   cursor: pointer;
 }
@@ -608,12 +620,18 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                 </h2>
                 <button
                   aria-disabled="false"
-                  aria-label="Close the modal"
                   class="c8 c9"
                   type="button"
                 >
+                  <span
+                    class="c10"
+                  >
+                    Close the modal
+                  </span>
                   <svg
+                    aria-hidden="true"
                     fill="none"
+                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -629,7 +647,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
             </div>
             <div>
               <div
-                class="c10"
+                class="c11"
               >
                 <div
                   aria-label="How do you want to upload your assets?"
@@ -639,17 +657,17 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                     aria-controls="tabgroup-1-0-tabpanel"
                     aria-disabled="false"
                     aria-selected="true"
-                    class="c11"
+                    class="c12"
                     id="tabgroup-1-0-tab"
                     role="tab"
                     tabindex="0"
                     type="button"
                   >
                     <div
-                      class="c12 c13"
+                      class="c13 c14"
                     >
                       <span
-                        class="c14"
+                        class="c15"
                       >
                         From computer
                       </span>
@@ -658,17 +676,17 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                   <button
                     aria-disabled="false"
                     aria-selected="false"
-                    class="c11"
+                    class="c12"
                     id="tabgroup-1-1-tab"
                     role="tab"
                     tabindex="-1"
                     type="button"
                   >
                     <div
-                      class="c12 c15"
+                      class="c13 c16"
                     >
                       <span
-                        class="c16"
+                        class="c17"
                       >
                         From url
                       </span>
@@ -676,7 +694,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                   </button>
                 </div>
                 <hr
-                  class="c17 c18"
+                  class="c18 c19"
                 />
               </div>
               <div>
@@ -688,20 +706,20 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                 >
                   <form>
                     <div
-                      class="c19"
+                      class="c20"
                     >
                       <label>
                         <div
-                          class="c20 c21"
+                          class="c21 c22"
                         >
                           <div
-                            class="c22"
+                            class="c23"
                           >
                             <div
-                              class="c23 c24"
+                              class="c24 c25"
                             >
                               <div
-                                class="c25"
+                                class="c26"
                               >
                                 <svg
                                   aria-hidden="true"
@@ -722,16 +740,16 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                                 </svg>
                               </div>
                               <div
-                                class="c26"
+                                class="c27"
                               >
                                 <span
-                                  class="c27"
+                                  class="c28"
                                 >
                                   Drag & Drop here or
                                 </span>
                               </div>
                               <input
-                                class="c28 c29"
+                                class="c29 c30"
                                 multiple=""
                                 name="files"
                                 tabindex="-1"
@@ -739,15 +757,15 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                                 width="100%"
                               />
                               <div
-                                class="c30"
+                                class="c31"
                               >
                                 <button
                                   aria-disabled="false"
-                                  class="c31 c32"
+                                  class="c32 c33"
                                   type="button"
                                 >
                                   <span
-                                    class="c33 c34"
+                                    class="c34 c35"
                                   >
                                     Browse files
                                   </span>
@@ -759,28 +777,28 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                       </label>
                     </div>
                     <div
-                      class="c4 c35"
+                      class="c4 c36"
                     >
                       <div
                         class="c6"
                       >
                         <div
-                          class="c36 c37"
+                          class="c37 c38"
                         >
                           <button
                             aria-disabled="false"
-                            class="c31 c38"
+                            class="c32 c39"
                             type="button"
                           >
                             <span
-                              class="c33 c34"
+                              class="c34 c35"
                             >
                               app.components.Button.cancel
                             </span>
                           </button>
                         </div>
                         <div
-                          class="c36 c37"
+                          class="c37 c38"
                         />
                       </div>
                     </div>
@@ -843,14 +861,14 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   line-height: 1.43;
 }
 
-.c33 {
+.c34 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c30 {
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -864,21 +882,21 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   outline: none;
 }
 
-.c30 svg {
+.c31 svg {
   height: 12px;
   width: 12px;
 }
 
-.c30 svg > g,
-.c30 svg path {
+.c31 svg > g,
+.c31 svg path {
   fill: #ffffff;
 }
 
-.c30[aria-disabled='true'] {
+.c31[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c30:after {
+.c31:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -893,11 +911,11 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   border: 2px solid transparent;
 }
 
-.c30:focus-visible {
+.c31:focus-visible {
   outline: none;
 }
 
-.c30:focus-visible:after {
+.c31:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -908,7 +926,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c34 {
+.c35 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -918,7 +936,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c34 .sc-cfJLRR {
+.c35 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -929,54 +947,54 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   align-items: center;
 }
 
-.c34 .c32 {
+.c35 .c33 {
   color: #ffffff;
 }
 
-.c34[aria-disabled='true'] {
+.c35[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c34[aria-disabled='true'] .c32 {
+.c35[aria-disabled='true'] .c33 {
   color: #666687;
 }
 
-.c34[aria-disabled='true'] svg > g,
-.c34[aria-disabled='true'] svg path {
+.c35[aria-disabled='true'] svg > g,
+.c35[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c34[aria-disabled='true']:active {
+.c35[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c34[aria-disabled='true']:active .c32 {
+.c35[aria-disabled='true']:active .c33 {
   color: #666687;
 }
 
-.c34[aria-disabled='true']:active svg > g,
-.c34[aria-disabled='true']:active svg path {
+.c35[aria-disabled='true']:active svg > g,
+.c35[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c34:hover {
+.c35:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c34:active {
+.c35:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c34 svg > g,
-.c34 svg path {
+.c35 svg > g,
+.c35 svg path {
   fill: #ffffff;
 }
 
-.c31 {
+.c32 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -988,7 +1006,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   background: #ffffff;
 }
 
-.c31 .sc-cfJLRR {
+.c32 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -999,69 +1017,69 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   align-items: center;
 }
 
-.c31 .c32 {
+.c32 .c33 {
   color: #ffffff;
 }
 
-.c31[aria-disabled='true'] {
+.c32[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c31[aria-disabled='true'] .c32 {
+.c32[aria-disabled='true'] .c33 {
   color: #666687;
 }
 
-.c31[aria-disabled='true'] svg > g,
-.c31[aria-disabled='true'] svg path {
+.c32[aria-disabled='true'] svg > g,
+.c32[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c31[aria-disabled='true']:active {
+.c32[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c31[aria-disabled='true']:active .c32 {
+.c32[aria-disabled='true']:active .c33 {
   color: #666687;
 }
 
-.c31[aria-disabled='true']:active svg > g,
-.c31[aria-disabled='true']:active svg path {
+.c32[aria-disabled='true']:active svg > g,
+.c32[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c31:hover {
+.c32:hover {
   background-color: #f6f6f9;
 }
 
-.c31:active {
+.c32:active {
   background-color: #eaeaef;
 }
 
-.c31 .c32 {
+.c32 .c33 {
   color: #32324d;
 }
 
-.c31 svg > g,
-.c31 svg path {
+.c32 svg > g,
+.c32 svg path {
   fill: #32324d;
 }
 
-.c9 {
+.c10 {
   padding-top: 24px;
   padding-right: 40px;
   padding-left: 40px;
 }
 
-.c18 {
+.c19 {
   padding-top: 24px;
   padding-right: 40px;
   padding-bottom: 24px;
   padding-left: 40px;
 }
 
-.c20 {
+.c21 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -1075,7 +1093,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   flex-direction: column;
 }
 
-.c22 {
+.c23 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1089,20 +1107,20 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   flex-direction: row;
 }
 
-.c23 {
+.c24 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c26 {
+.c27 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c24 {
+.c25 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   padding-left: 16px;
@@ -1118,12 +1136,12 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   transition-duration: 0.2s;
 }
 
-.c24:focus-within {
+.c25:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c25 {
+.c26 {
   display: block;
   width: 100%;
   font-weight: 400;
@@ -1134,45 +1152,45 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   background: inherit;
 }
 
-.c25::-webkit-input-placeholder {
+.c26::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c25::-moz-placeholder {
+.c26::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c25:-ms-input-placeholder {
+.c26:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c25::placeholder {
+.c26::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c25:focus-within {
+.c26:focus-within {
   outline: none;
 }
 
-.c21 > * {
+.c22 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c21 > * + * {
+.c22 > * + * {
   margin-top: 4px;
 }
 
-.c19 textarea {
+.c20 textarea {
   height: 5rem;
   line-height: 1.25rem;
 }
 
-.c19 textarea::-webkit-input-placeholder {
+.c20 textarea::-webkit-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1180,7 +1198,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   opacity: 1;
 }
 
-.c19 textarea::-moz-placeholder {
+.c20 textarea::-moz-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1188,7 +1206,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   opacity: 1;
 }
 
-.c19 textarea:-ms-input-placeholder {
+.c20 textarea:-ms-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1196,7 +1214,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   opacity: 1;
 }
 
-.c19 textarea::placeholder {
+.c20 textarea::placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -1260,7 +1278,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   justify-content: space-between;
 }
 
-.c28 {
+.c29 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1274,6 +1292,18 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   flex-direction: row;
 }
 
+.c9 {
+  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;
+}
+
 .c7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1377,26 +1407,26 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c27 {
+.c28 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c29 > * + * {
+.c30 > * + * {
   margin-left: 8px;
 }
 
-.c16 {
+.c17 {
   background: #eaeaef;
 }
 
-.c17 {
+.c18 {
   height: 1px;
   border: none;
   margin: 0;
 }
 
-.c15 {
+.c16 {
   color: #4945ff;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -1404,7 +1434,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   text-transform: uppercase;
 }
 
-.c13 {
+.c14 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -1412,19 +1442,19 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   text-transform: uppercase;
 }
 
-.c11 {
+.c12 {
   padding: 16px;
 }
 
-.c14 {
+.c15 {
   border-bottom: 2px solid #4945ff;
 }
 
-.c12 {
+.c13 {
   border-bottom: 2px solid transparent;
 }
 
-.c10[aria-disabled='true'] {
+.c11[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
@@ -1456,12 +1486,18 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
                 </h2>
                 <button
                   aria-disabled="false"
-                  aria-label="Close the modal"
                   class="c7 c8"
                   type="button"
                 >
+                  <span
+                    class="c9"
+                  >
+                    Close the modal
+                  </span>
                   <svg
+                    aria-hidden="true"
                     fill="none"
+                    focusable="false"
                     height="1em"
                     viewBox="0 0 24 24"
                     width="1em"
@@ -1477,7 +1513,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
             </div>
             <div>
               <div
-                class="c9"
+                class="c10"
               >
                 <div
                   aria-label="How do you want to upload your assets?"
@@ -1486,17 +1522,17 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
                   <button
                     aria-disabled="false"
                     aria-selected="false"
-                    class="c10"
+                    class="c11"
                     id="tabgroup-8-0-tab"
                     role="tab"
                     tabindex="-1"
                     type="button"
                   >
                     <div
-                      class="c11 c12"
+                      class="c12 c13"
                     >
                       <span
-                        class="c13"
+                        class="c14"
                       >
                         From computer
                       </span>
@@ -1506,17 +1542,17 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
                     aria-controls="tabgroup-8-1-tabpanel"
                     aria-disabled="false"
                     aria-selected="true"
-                    class="c10"
+                    class="c11"
                     id="tabgroup-8-1-tab"
                     role="tab"
                     tabindex="0"
                     type="button"
                   >
                     <div
-                      class="c11 c14"
+                      class="c12 c15"
                     >
                       <span
-                        class="c15"
+                        class="c16"
                       >
                         From url
                       </span>
@@ -1524,7 +1560,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
                   </button>
                 </div>
                 <hr
-                  class="c16 c17"
+                  class="c17 c18"
                 />
               </div>
               <div>
@@ -1539,43 +1575,43 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
                     novalidate=""
                   >
                     <div
-                      class="c18"
+                      class="c19"
                     >
                       <div
-                        class="c19"
+                        class="c20"
                       >
                         <div>
                           <div
-                            class="c20 c21"
+                            class="c21 c22"
                             spacing="1"
                           >
                             <div
-                              class="c22"
+                              class="c23"
                             >
                               <label
-                                class="c23"
+                                class="c24"
                                 for="textarea-1"
                               >
                                 <div
-                                  class="c22"
+                                  class="c23"
                                 >
                                   URL
                                 </div>
                               </label>
                             </div>
                             <div
-                              class="c24"
+                              class="c25"
                             >
                               <textarea
                                 aria-describedby="textarea-1-hint"
                                 aria-invalid="false"
-                                class="c25"
+                                class="c26"
                                 id="textarea-1"
                                 name="urls"
                               />
                             </div>
                             <p
-                              class="c26"
+                              class="c27"
                               id="textarea-1-hint"
                             >
                               Separate your URL links by a carriage return.
@@ -1585,36 +1621,36 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
                       </div>
                     </div>
                     <div
-                      class="c3 c27"
+                      class="c3 c28"
                     >
                       <div
                         class="c5"
                       >
                         <div
-                          class="c28 c29"
+                          class="c29 c30"
                         >
                           <button
                             aria-disabled="false"
-                            class="c30 c31"
+                            class="c31 c32"
                             type="button"
                           >
                             <span
-                              class="c32 c33"
+                              class="c33 c34"
                             >
                               app.components.Button.cancel
                             </span>
                           </button>
                         </div>
                         <div
-                          class="c28 c29"
+                          class="c29 c30"
                         >
                           <button
                             aria-disabled="false"
-                            class="c30 c34"
+                            class="c31 c35"
                             type="submit"
                           >
                             <span
-                              class="c32 c33"
+                              class="c33 c34"
                             >
                               Next
                             </span>
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 45255e56ae4..e24ede314e7 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
@@ -190,6 +190,18 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         height: 0.25rem;
       }
 
+      .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;
+      }
+
       .c24 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -534,8 +546,15 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                             tabindex="-1"
                             type="button"
                           >
+                            <span
+                              class="c26"
+                            >
+                              Edit a template
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
@@ -605,8 +624,15 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                             tabindex="-1"
                             type="button"
                           >
+                            <span
+                              class="c26"
+                            >
+                              Edit a template
+                            </span>
                             <svg
+                              aria-hidden="true"
                               fill="none"
+                              focusable="false"
                               height="1em"
                               viewBox="0 0 24 24"
                               width="1em"
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 ac85e041efe..3bc5ee9b4f9 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
@@ -783,7 +783,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         border: 1px solid #4945ff;
       }
 
-      .c44:hover:not([aria-disabled='true']) .sc-eHyqeh {
+      .c44:hover:not([aria-disabled='true']) .sc-igcPbY {
         color: #271fe0;
       }
 
@@ -1161,7 +1161,7 @@ describe('Admin | containers | RoleCreatePage', () => {
                                   class="c55 c56"
                                 >
                                   <span
-                                    class="c55 sc-eHyqeh c57"
+                                    class="c55 sc-igcPbY c57"
                                     id="accordion-label-accordion-1"
                                   >
                                     Address
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 ee9fa27b6a9..7ead595d134 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
@@ -851,7 +851,7 @@ describe('Admin | containers | RoleEditPage', () => {
         border: 1px solid #4945ff;
       }
 
-      .c49:hover:not([aria-disabled='true']) .sc-eHyqeh {
+      .c49:hover:not([aria-disabled='true']) .sc-igcPbY {
         color: #271fe0;
       }
 
@@ -1263,7 +1263,7 @@ describe('Admin | containers | RoleEditPage', () => {
                                   class="c60 c61"
                                 >
                                   <span
-                                    class="c60 sc-eHyqeh c62"
+                                    class="c60 sc-igcPbY c62"
                                     id="accordion-label-accordion-1"
                                   >
                                     Address
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 d9d36e30327..17002ecafea 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
@@ -61,7 +61,7 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
     } = render(App);
 
     expect(firstChild).toMatchInlineSnapshot(`
-      .c27 {
+      .c28 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -73,13 +73,13 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         width: 1px;
       }
 
-      .c28 {
+      .c29 {
         -webkit-animation: gzYjWD 1s infinite linear;
         animation: gzYjWD 1s infinite linear;
         will-change: transform;
       }
 
-      .c25 {
+      .c26 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -238,29 +238,29 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         fill: #ffffff;
       }
 
-      .c34 {
+      .c35 {
         color: #666687;
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
       }
 
-      .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;
       }
 
-      .c33 {
+      .c34 {
         padding-bottom: 16px;
       }
 
-      .c30 {
+      .c31 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -275,10 +275,22 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         text-align: center;
       }
 
-      .c32 svg {
+      .c33 svg {
         height: 5.5rem;
       }
 
+      .c23 {
+        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;
+      }
+
       .c21 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -377,15 +389,15 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
         fill: #666687;
       }
 
-      .c23 {
+      .c24 {
         color: #32324d;
       }
 
-      .c24 path {
+      .c25 path {
         fill: #32324d;
       }
 
-      .c26 {
+      .c27 {
         height: 100vh;
       }
 
@@ -596,9 +608,16 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
                         tabindex="0"
                         type="button"
                       >
+                        <span
+                          class="c23"
+                        >
+                          Search
+                        </span>
                         <svg
-                          class="c23 c24"
+                          aria-hidden="true"
+                          class="c24 c25"
                           fill="none"
+                          focusable="false"
                           height="1em"
                           viewBox="0 0 24 24"
                           width="1em"
@@ -621,7 +640,7 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
               class="c16"
             >
               <div
-                class="c25 c26"
+                class="c26 c27"
                 data-testid="loader"
               >
                 <div
@@ -629,23 +648,23 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
                   role="alert"
                 >
                   <div
-                    class="c27"
+                    class="c28"
                   >
                     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"
@@ -711,10 +730,10 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
                   </svg>
                 </div>
                 <div
-                  class="c33"
+                  class="c34"
                 >
                   <p
-                    class="c34"
+                    class="c35"
                   >
                     You don't have any roles yet.
                   </p>

From 7f0e8b972deb614e93b6577f9c05dd3f6cf73d08 Mon Sep 17 00:00:00 2001
From: Simone Taeggi <startae14@gmail.com>
Date: Thu, 17 Nov 2022 12:01:07 +0100
Subject: [PATCH 3/5] fix prop types warnings

---
 .../EditView/components/FormApiTokenContainer/index.js          | 2 +-
 .../pages/ApiTokens/EditView/components/FormBody/index.js       | 2 +-
 .../pages/ApiTokens/EditView/components/FormHead/index.js       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormApiTokenContainer/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormApiTokenContainer/index.js
index 794f935ec65..a94e4f26fbb 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormApiTokenContainer/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormApiTokenContainer/index.js
@@ -236,7 +236,7 @@ FormApiTokenContainer.propTypes = {
   apiToken: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
-    lifespan: PropTypes.number,
+    lifespan: PropTypes.string,
     name: PropTypes.string,
     accessKey: PropTypes.string,
     permissions: PropTypes.array,
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormBody/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormBody/index.js
index 4bacc001e62..49c59607714 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormBody/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormBody/index.js
@@ -50,7 +50,7 @@ FormBody.propTypes = {
   apiToken: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
-    lifespan: PropTypes.number,
+    lifespan: PropTypes.string,
     name: PropTypes.string,
     accessKey: PropTypes.string,
     permissions: PropTypes.array,
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormHead/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormHead/index.js
index d9f3fc0e813..76e4ca742d2 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormHead/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormHead/index.js
@@ -69,7 +69,7 @@ FormHead.propTypes = {
   apiToken: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
-    lifespan: PropTypes.number,
+    lifespan: PropTypes.string,
     name: PropTypes.string,
     accessKey: PropTypes.string,
     permissions: PropTypes.array,

From 84026a6b42d8293cd95f114804b9fac9e2e98526 Mon Sep 17 00:00:00 2001
From: Simone Taeggi <startae14@gmail.com>
Date: Thu, 17 Nov 2022 14:40:24 +0100
Subject: [PATCH 4/5] add apiToken different values prop types

---
 .../EditView/components/FormApiTokenContainer/index.js          | 2 +-
 .../pages/ApiTokens/EditView/components/FormBody/index.js       | 2 +-
 .../pages/ApiTokens/EditView/components/FormHead/index.js       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormApiTokenContainer/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormApiTokenContainer/index.js
index a94e4f26fbb..9d9f64f6dbc 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormApiTokenContainer/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormApiTokenContainer/index.js
@@ -229,7 +229,7 @@ FormApiTokenContainer.propTypes = {
   values: PropTypes.shape({
     name: PropTypes.string,
     description: PropTypes.string,
-    lifespan: PropTypes.string,
+    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
   }).isRequired,
   isCreating: PropTypes.bool.isRequired,
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormBody/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormBody/index.js
index 49c59607714..ff2b70d174a 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormBody/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormBody/index.js
@@ -50,7 +50,7 @@ FormBody.propTypes = {
   apiToken: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
-    lifespan: PropTypes.string,
+    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     name: PropTypes.string,
     accessKey: PropTypes.string,
     permissions: PropTypes.array,
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormHead/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormHead/index.js
index 76e4ca742d2..1d898ba13e7 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormHead/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormHead/index.js
@@ -69,7 +69,7 @@ FormHead.propTypes = {
   apiToken: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
-    lifespan: PropTypes.string,
+    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     name: PropTypes.string,
     accessKey: PropTypes.string,
     permissions: PropTypes.array,

From 326521d6fd1eb8edcc5f4699ce6dd9b12f51b508 Mon Sep 17 00:00:00 2001
From: Simone Taeggi <startae14@gmail.com>
Date: Mon, 21 Nov 2022 15:44:59 +0100
Subject: [PATCH 5/5] change event name

---
 packages/core/admin/admin/src/components/LeftMenu/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/admin/admin/src/components/LeftMenu/index.js b/packages/core/admin/admin/src/components/LeftMenu/index.js
index ae4d1536b60..752f3a6a5d7 100644
--- a/packages/core/admin/admin/src/components/LeftMenu/index.js
+++ b/packages/core/admin/admin/src/components/LeftMenu/index.js
@@ -85,7 +85,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   };
 
   const handleClickOnLink = (destination = null) => {
-    trackUsage('didNavigate', { from: pathname, to: destination });
+    trackUsage('willNavigate', { from: pathname, to: destination });
   };
 
   const menuTitle = formatMessage({