chore: update frontend snapshots

packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js

@@ -56,12 +56,6 @@ describe('CONTENT MANAGER | EditView | Header', () => {
     } = render(makeApp());
 
     expect(firstChild).toMatchInlineSnapshot(`
-      .c4 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        color: #4945ff;
-      }
-
       .c8 {
         font-weight: 600;
         font-size: 2rem;
@@ -94,7 +88,7 @@ describe('CONTENT MANAGER | EditView | Header', () => {
         padding-bottom: 8px;
       }
 
-      .c6 {
+      .c5 {
         min-width: 0;
       }
 
@@ -109,7 +103,7 @@ describe('CONTENT MANAGER | EditView | Header', () => {
         cursor: pointer;
       }
 
-      .c5 {
+      .c4 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -127,7 +121,7 @@ describe('CONTENT MANAGER | EditView | Header', () => {
         justify-content: space-between;
       }
 
-      .c7 {
+      .c6 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -219,7 +213,7 @@ describe('CONTENT MANAGER | EditView | Header', () => {
         background: #eaeaef;
       }
 
-      .c12[aria-disabled='true'] .c3 {
+      .c12[aria-disabled='true'] .c7 {
         color: #666687;
       }
 
@@ -233,7 +227,7 @@ describe('CONTENT MANAGER | EditView | Header', () => {
         background: #eaeaef;
       }
 
-      .c12[aria-disabled='true']:active .c3 {
+      .c12[aria-disabled='true']:active .c7 {
         color: #666687;
       }
 
@@ -257,6 +251,12 @@ describe('CONTENT MANAGER | EditView | Header', () => {
         fill: #ffffff;
       }
 
+      .c3 {
+        font-size: 0.875rem;
+        line-height: 1.43;
+        color: #4945ff;
+      }
+
       .c2 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
@@ -347,20 +347,20 @@ describe('CONTENT MANAGER | EditView | Header', () => {
                 />
               </svg>
               <span
-                class="c3 c4"
+                class="c3"
               >
                 Back
               </span>
             </a>
           </div>
           <div
-            class="c5"
+            class="c4"
           >
             <div
-              class="c6 c7"
+              class="c5 c6"
             >
               <h1
-                class="c3 c8"
+                class="c7 c8"
               >
                 Create an entry
               </h1>
@@ -375,7 +375,7 @@ describe('CONTENT MANAGER | EditView | Header', () => {
                 type="submit"
               >
                 <span
-                  class="c3 c13"
+                  class="c7 c13"
                 >
                   Save
                 </span>
@@ -383,7 +383,7 @@ describe('CONTENT MANAGER | EditView | Header', () => {
             </div>
           </div>
           <p
-            class="c3 c14"
+            class="c7 c14"
           >
             API ID  : restaurant
           </p>

packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js

@@ -32,14 +32,14 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
     );
 
     expect(firstChild).toMatchInlineSnapshot(`
-      .c6 {
+      .c5 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c13 {
+      .c12 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
@@ -47,13 +47,6 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         text-align: center;
       }
 
-      .c18 {
-        font-size: 0.75rem;
-        line-height: 1.33;
-        font-weight: 600;
-        color: #ffffff;
-      }
-
       .c1 {
         background: #f6f6f9;
         padding-top: 40px;
@@ -66,37 +59,26 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         min-width: 0;
       }
 
-      .c7 {
+      .c6 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c8 {
+      .c7 {
         background: #ffffff;
         padding: 64px;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c10 {
+      .c9 {
         padding-bottom: 24px;
       }
 
-      .c12 {
+      .c11 {
         padding-bottom: 16px;
       }
 
-      .c14 {
-        background: #4945ff;
-        padding-top: 8px;
-        padding-right: 16px;
-        padding-bottom: 8px;
-        padding-left: 16px;
-        border-radius: 4px;
-        border-color: #4945ff;
-        border: 1px solid #4945ff;
-      }
-
       .c2 {
         -webkit-align-items: center;
         -webkit-box-align: center;
@@ -129,7 +111,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         flex-direction: row;
       }
 
-      .c9 {
+      .c8 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -143,7 +125,33 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         flex-direction: column;
       }
 
-      .c15 {
+      .c10 svg {
+        height: 5.5rem;
+      }
+
+      .c0:focus-visible {
+        outline: none;
+      }
+
+      .c19 {
+        font-size: 0.75rem;
+        line-height: 1.33;
+        font-weight: 600;
+        color: #ffffff;
+      }
+
+      .c13 {
+        background: #4945ff;
+        padding-top: 8px;
+        padding-right: 16px;
+        padding-bottom: 8px;
+        padding-left: 16px;
+        border-radius: 4px;
+        border-color: #4945ff;
+        border: 1px solid #4945ff;
+      }
+
+      .c14 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -158,26 +166,40 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         gap: 8px;
       }
 
-      .c16 {
+      .c17 {
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+      }
+
+      .c15 {
         position: relative;
         outline: none;
       }
 
-      .c16 > svg {
+      .c15 > svg {
         height: 12px;
         width: 12px;
       }
 
-      .c16 > svg > g,
+      .c15 > svg > g,
-      .c16 > svg path {
+      .c15 > svg path {
         fill: #ffffff;
       }
 
-      .c16[aria-disabled='true'] {
+      .c15[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c16:after {
+      .c15:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -192,11 +214,11 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         border: 2px solid transparent;
       }
 
-      .c16:focus-visible {
+      .c15:focus-visible {
         outline: none;
       }
 
-      .c16:focus-visible:after {
+      .c15:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -207,73 +229,65 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         border: 2px solid #4945ff;
       }
 
-      .c11 svg {
+      .c16 {
-        height: 5.5rem;
-      }
-
-      .c0:focus-visible {
-        outline: none;
-      }
-
-      .c17 {
         -webkit-text-decoration: none;
         text-decoration: none;
         border: 1px solid #d9d8ff;
         background: #f0f0ff;
       }
 
-      .c17[aria-disabled='true'] {
+      .c16[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c17[aria-disabled='true'] .c5 {
+      .c16[aria-disabled='true'] .c18 {
         color: #666687;
       }
 
-      .c17[aria-disabled='true'] svg > g,
+      .c16[aria-disabled='true'] svg > g,
-      .c17[aria-disabled='true'] svg path {
+      .c16[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c17[aria-disabled='true']:active {
+      .c16[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c17[aria-disabled='true']:active .c5 {
+      .c16[aria-disabled='true']:active .c18 {
         color: #666687;
       }
 
-      .c17[aria-disabled='true']:active svg > g,
+      .c16[aria-disabled='true']:active svg > g,
-      .c17[aria-disabled='true']:active svg path {
+      .c16[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c17:hover {
+      .c16:hover {
         background-color: #ffffff;
       }
 
-      .c17:active {
+      .c16:active {
         background-color: #ffffff;
         border: 1px solid #4945ff;
       }
 
-      .c17:active .c5 {
+      .c16:active .c18 {
         color: #4945ff;
       }
 
-      .c17:active svg > g,
+      .c16:active svg > g,
-      .c17:active svg path {
+      .c16:active svg path {
         fill: #4945ff;
       }
 
-      .c17 .c5 {
+      .c16 .c18 {
         color: #271fe0;
       }
 
-      .c17 svg > g,
+      .c16 svg > g,
-      .c17 svg path {
+      .c16 svg path {
         fill: #271fe0;
       }
 
@@ -297,7 +311,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
                 class="c3 c4"
               >
                 <h1
-                  class="c5 c6"
+                  class="c5"
                 >
                   Content
                 </h1>
@@ -306,14 +320,14 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
           </div>
         </div>
         <div
-          class="c7"
+          class="c6"
         >
           <div
-            class="c8 c9"
+            class="c7 c8"
           >
             <div
               aria-hidden="true"
-              class="c10 c11"
+              class="c9 c10"
             >
               <svg
                 fill="none"
@@ -379,22 +393,22 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
               </svg>
             </div>
             <div
-              class="c12"
+              class="c11"
             >
               <p
-                class="c5 c13"
+                class="c12"
               >
                 You don't have any content yet, we recommend you to create your first Content-Type.
               </p>
             </div>
             <a
               aria-disabled="false"
-              class="c14 c15 c16 c17"
+              class="c13 c14 c15 c16"
               href="/plugins/content-type-builder/content-types/create-content-type"
             >
               <div
                 aria-hidden="true"
-                class="c4"
+                class="c17"
               >
                 <svg
                   fill="none"
@@ -410,7 +424,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
                 </svg>
               </div>
               <span
-                class="c5 c18"
+                class="c18 c19"
               >
                 Create your first Content-type
               </span>

packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js

@@ -41,14 +41,6 @@ describe('<NoPermissions />', () => {
         color: #32324d;
       }
 
-      .c12 {
-        font-weight: 500;
-        font-size: 1rem;
-        line-height: 1.25;
-        color: #666687;
-        text-align: center;
-      }
-
       .c1 {
         background: #f6f6f9;
         padding-top: 40px;
@@ -66,21 +58,6 @@ describe('<NoPermissions />', () => {
         padding-left: 56px;
       }
 
-      .c7 {
-        background: #ffffff;
-        padding: 64px;
-        border-radius: 4px;
-        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-      }
-
-      .c9 {
-        padding-bottom: 24px;
-      }
-
-      .c11 {
-        padding-bottom: 16px;
-      }
-
       .c2 {
         -webkit-align-items: center;
         -webkit-box-align: center;
@@ -113,6 +90,33 @@ describe('<NoPermissions />', () => {
         flex-direction: row;
       }
 
+      .c0:focus-visible {
+        outline: none;
+      }
+
+      .c12 {
+        font-weight: 500;
+        font-size: 1rem;
+        line-height: 1.25;
+        color: #666687;
+        text-align: center;
+      }
+
+      .c7 {
+        background: #ffffff;
+        padding: 64px;
+        border-radius: 4px;
+        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+      }
+
+      .c9 {
+        padding-bottom: 24px;
+      }
+
+      .c11 {
+        padding-bottom: 16px;
+      }
+
       .c8 {
         -webkit-align-items: center;
         -webkit-box-align: center;
@@ -131,10 +135,6 @@ describe('<NoPermissions />', () => {
         height: 5.5rem;
       }
 
-      .c0:focus-visible {
-        outline: none;
-      }
-
       <main
         aria-labelledby="main-content-title"
         class="c0"

packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap

@@ -1,6 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DynamicTable renders and matches the snapshot 1`] = `
+.c25 {
+  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;
+}
+
+.c0 {
+  padding-top: 16px;
+}
+
+.c1 {
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
 .c18 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
@@ -44,10 +78,6 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c0 {
-  padding-top: 16px;
-}
-
 .c4 {
   background: #ffffff;
   padding-right: 12px;
@@ -65,24 +95,6 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   flex: 1;
 }
 
-.c1 {
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
 .c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -211,7 +223,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   flex-wrap: wrap;
 }
 
-.c25[data-state='checked'] .c9 {
+.c26[data-state='checked'] .c9 {
   font-weight: bold;
   color: #4945ff;
 }
@@ -527,7 +539,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c18"
+    class="c25"
   >
     <p
       aria-live="polite"

packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap

@@ -94,15 +94,6 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   color: #32324d;
 }
 
-.c0 {
-  margin-left: -250px;
-  position: fixed;
-  left: 50%;
-  top: 2.875rem;
-  z-index: 10;
-  width: 31.25rem;
-}
-
 .c2 {
   padding-bottom: 16px;
 }
@@ -228,21 +219,6 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   padding-left: 8px;
 }
 
-.c1 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 8px;
-}
-
 .c3 {
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
@@ -673,6 +649,30 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   fill: #666687;
 }
 
+.c0 {
+  margin-left: -250px;
+  position: fixed;
+  left: 50%;
+  top: 2.875rem;
+  z-index: 10;
+  width: 31.25rem;
+}
+
+.c1 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .c31:first-child {
   margin-left: calc(-1*8px);
 }

packages/core/upload/admin/src/components/BulkMoveDialog/tests/__snapshots__/BulkMoveDialog.test.js.snap

@@ -34,15 +34,6 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   color: #ffffff;
 }
 
-.c0 {
-  margin-left: -250px;
-  position: fixed;
-  left: 50%;
-  top: 2.875rem;
-  z-index: 10;
-  width: 31.25rem;
-}
-
 .c3 {
   padding-right: 40px;
   padding-left: 40px;
@@ -78,10 +69,6 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   padding: 32px;
 }
 
-.c22 {
-  padding-right: 12px;
-}
-
 .c27 {
   background: #4945ff;
   padding: 8px;
@@ -93,21 +80,6 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   cursor: pointer;
 }
 
-.c1 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 8px;
-}
-
 .c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -395,6 +367,34 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   max-height: 60vh;
 }
 
+.c0 {
+  margin-left: -250px;
+  position: fixed;
+  left: 50%;
+  top: 2.875rem;
+  z-index: 10;
+  width: 31.25rem;
+}
+
+.c22 {
+  padding-right: 12px;
+}
+
+.c1 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .c23 {
   background: transparent;
   border: none;

packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap

@@ -54,15 +54,6 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   color: #666687;
 }
 
-.c0 {
-  margin-left: -250px;
-  position: fixed;
-  left: 50%;
-  top: 2.875rem;
-  z-index: 10;
-  width: 31.25rem;
-}
-
 .c7 {
   padding-right: 40px;
   padding-left: 40px;
@@ -131,10 +122,6 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c40 {
-  padding-right: 12px;
-}
-
 .c45 {
   background: #4945ff;
   padding: 8px;
@@ -146,21 +133,6 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   cursor: pointer;
 }
 
-.c1 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 8px;
-}
-
 .c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -628,6 +600,34 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   max-height: 60vh;
 }
 
+.c0 {
+  margin-left: -250px;
+  position: fixed;
+  left: 50%;
+  top: 2.875rem;
+  z-index: 10;
+  width: 31.25rem;
+}
+
+.c40 {
+  padding-right: 12px;
+}
+
+.c1 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .c41 {
   background: transparent;
   border: none;

packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap

@@ -54,15 +54,6 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   color: #666687;
 }
 
-.c0 {
-  margin-left: -250px;
-  position: fixed;
-  left: 50%;
-  top: 2.875rem;
-  z-index: 10;
-  width: 31.25rem;
-}
-
 .c7 {
   padding-right: 40px;
   padding-left: 40px;
@@ -131,10 +122,6 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c40 {
-  padding-right: 12px;
-}
-
 .c45 {
   background: #4945ff;
   padding: 8px;
@@ -146,21 +133,6 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   cursor: pointer;
 }
 
-.c1 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 8px;
-}
-
 .c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -628,6 +600,34 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   max-height: 60vh;
 }
 
+.c0 {
+  margin-left: -250px;
+  position: fixed;
+  left: 50%;
+  top: 2.875rem;
+  z-index: 10;
+  width: 31.25rem;
+}
+
+.c40 {
+  padding-right: 12px;
+}
+
+.c1 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .c41 {
   background: transparent;
   border: none;

packages/core/upload/admin/src/components/EditFolderDialog/tests/__snapshots__/EditFolderDialog.test.js.snap

@@ -34,15 +34,6 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   color: #ffffff;
 }
 
-.c0 {
-  margin-left: -250px;
-  position: fixed;
-  left: 50%;
-  top: 2.875rem;
-  z-index: 10;
-  width: 31.25rem;
-}
-
 .c3 {
   padding-right: 40px;
   padding-left: 40px;
@@ -78,10 +69,6 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   padding: 32px;
 }
 
-.c24 {
-  padding-right: 12px;
-}
-
 .c29 {
   background: #4945ff;
   padding: 8px;
@@ -93,21 +80,6 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   cursor: pointer;
 }
 
-.c1 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 8px;
-}
-
 .c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -456,6 +428,34 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   max-height: 60vh;
 }
 
+.c0 {
+  margin-left: -250px;
+  position: fixed;
+  left: 50%;
+  top: 2.875rem;
+  z-index: 10;
+  width: 31.25rem;
+}
+
+.c24 {
+  padding-right: 12px;
+}
+
+.c1 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .c25 {
   background: transparent;
   border: none;

packages/core/upload/admin/src/components/MediaLibraryInput/tests/__snapshots__/MediaLibraryInput.test.js.snap

@@ -27,15 +27,6 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   color: #666687;
 }
 
-.c0 {
-  margin-left: -250px;
-  position: fixed;
-  left: 50%;
-  top: 2.875rem;
-  z-index: 10;
-  width: 31.25rem;
-}
-
 .c5 {
   background: #f6f6f9;
   padding: 8px;
@@ -77,21 +68,6 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   height: 24px;
 }
 
-.c1 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 8px;
-}
-
 .c2 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
@@ -181,6 +157,30 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
+.c0 {
+  margin-left: -250px;
+  position: fixed;
+  left: 50%;
+  top: 2.875rem;
+  z-index: 10;
+  width: 31.25rem;
+}
+
+.c1 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .c18 {
   -webkit-align-items: center;
   -webkit-box-align: center;

packages/core/upload/admin/src/pages/App/ConfigureTheView/tests/__snapshots__/ConfigureTheView.test.js.snap

@@ -13,12 +13,6 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   width: 1px;
 }
 
-.c8 {
-  font-size: 0.875rem;
-  line-height: 1.43;
-  color: #4945ff;
-}
-
 .c12 {
   font-weight: 600;
   font-size: 2rem;
@@ -78,7 +72,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   padding-bottom: 8px;
 }
 
-.c10 {
+.c9 {
   min-width: 0;
 }
 
@@ -125,7 +119,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   flex: 1;
 }
 
-.c9 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -143,7 +137,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   justify-content: space-between;
 }
 
-.c11 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -284,7 +278,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   background: #eaeaef;
 }
 
-.c16[aria-disabled='true'] .c7 {
+.c16[aria-disabled='true'] .c11 {
   color: #666687;
 }
 
@@ -298,7 +292,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   background: #eaeaef;
 }
 
-.c16[aria-disabled='true']:active .c7 {
+.c16[aria-disabled='true']:active .c11 {
   color: #666687;
 }
 
@@ -382,7 +376,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   flex-wrap: wrap;
 }
 
-.c37[data-state='checked'] .c7 {
+.c37[data-state='checked'] .c11 {
   font-weight: bold;
   color: #4945ff;
 }
@@ -411,6 +405,12 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
   outline: none;
 }
 
+.c7 {
+  font-size: 0.875rem;
+  line-height: 1.43;
+  color: #4945ff;
+}
+
 .c6 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -527,20 +527,20 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                     />
                   </svg>
                   <span
-                    class="c7 c8"
+                    class="c7"
                   >
                     Back
                   </span>
                 </a>
               </div>
               <div
-                class="c9"
+                class="c8"
               >
                 <div
-                  class="c10 c11"
+                  class="c9 c10"
                 >
                   <h1
-                    class="c7 c12"
+                    class="c11 c12"
                   >
                     Configure the view - Media Library
                   </h1>
@@ -569,14 +569,14 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                     </svg>
                   </div>
                   <span
-                    class="c7 c17"
+                    class="c11 c17"
                   >
                     Save
                   </span>
                 </button>
               </div>
               <p
-                class="c7 c18"
+                class="c11 c18"
               >
                 Define the view settings of the media library.
               </p>
@@ -601,7 +601,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                       class="c23"
                     >
                       <label
-                        class="c7 c24 c25"
+                        class="c11 c24 c25"
                         for=":r0:"
                       >
                         Entries per page
@@ -624,7 +624,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                           class="c29 c30"
                         >
                           <span
-                            class="c7 c31 c32"
+                            class="c11 c31 c32"
                           >
                             <span
                               class="c33"
@@ -658,7 +658,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                         </span>
                       </div>
                       <p
-                        class="c7 c35"
+                        class="c11 c35"
                         id=":r0:-hint"
                       >
                         Number of assets displayed by default in the Media Library
@@ -676,7 +676,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                       class="c23"
                     >
                       <label
-                        class="c7 c24 c25"
+                        class="c11 c24 c25"
                         for=":r4:"
                       >
                         Default sort order
@@ -699,7 +699,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                           class="c29 c30"
                         >
                           <span
-                            class="c7 c31 c32"
+                            class="c11 c31 c32"
                           >
                             <span
                               class="c33"
@@ -733,7 +733,7 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
                         </span>
                       </div>
                       <p
-                        class="c7 c35"
+                        class="c11 c35"
                         id=":r4:-hint"
                       >
                         Note: You can override this value in the media library.