chore: update frontend snapshots

2025-09-25 16:29:34 +00:00 · 2023-11-30 12:07:39 +01:00 · 2023-11-30 12:07:39 +01:00 · b6dda1f6ae
commit b6dda1f6ae
parent 97e854e902
11 changed files with 346 additions and 320 deletions
--- a/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js
@ -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>
--- a/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js
@ -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,
-      .c16 > svg path {
+      .c15 > svg > g,
+      .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 {
-        height: 5.5rem;
-      }
-
-      .c0:focus-visible {
-        outline: none;
-      }
-
-      .c17 {
+      .c16 {
        -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,
-      .c17[aria-disabled='true'] svg path {
+      .c16[aria-disabled='true'] svg > g,
+      .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,
-      .c17[aria-disabled='true']:active svg path {
+      .c16[aria-disabled='true']:active svg > g,
+      .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,
-      .c17:active svg path {
+      .c16:active svg > g,
+      .c16:active svg path {
        fill: #4945ff;
      }

-      .c17 .c5 {
+      .c16 .c18 {
        color: #271fe0;
      }

-      .c17 svg > g,
-      .c17 svg path {
+      .c16 svg > g,
+      .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>
--- a/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js
@ -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"
--- 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
@ -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"
--- 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
@ -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);
 }
--- 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
@ -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;
--- 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
@ -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;
--- 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
@ -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;
--- 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
@ -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;
--- a/packages/core/upload/admin/src/components/MediaLibraryInput/tests/snapshots/MediaLibraryInput.test.js.snap
+++ b/packages/core/upload/admin/src/components/MediaLibraryInput/tests/snapshots/MediaLibraryInput.test.js.snap
@ -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;
--- a/packages/core/upload/admin/src/pages/App/ConfigureTheView/tests/snapshots/ConfigureTheView.test.js.snap
+++ b/packages/core/upload/admin/src/pages/App/ConfigureTheView/tests/snapshots/ConfigureTheView.test.js.snap
@ -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.