From be154b6ddd23fada2e859245776dc3da11d2438e Mon Sep 17 00:00:00 2001
From: soupette <cyril@strapi.io>
Date: Wed, 27 Oct 2021 12:42:09 +0200
Subject: [PATCH] Upgrade DS

Signed-off-by: soupette <cyril@strapi.io>
---
 .../tests/__snapshots__/index.test.js.snap    | 630 +++++++++---------
 .../admin/src/pages/HomePage/SocialLinks.js   |   5 +-
 .../src/pages/HomePage/tests/index.test.js    |  60 +-
 packages/core/admin/package.json              |   4 +-
 packages/core/helper-plugin/package.json      |   4 +-
 yarn.lock                                     |  16 +-
 6 files changed, 358 insertions(+), 361 deletions(-)

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 73a9098fe0..43bba383e9 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
@@ -15,7 +15,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   padding-bottom: 16px;
 }
 
-.c63 {
+.c64 {
   padding-top: 24px;
   padding-bottom: 24px;
 }
@@ -167,7 +167,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   padding-bottom: 24px;
 }
 
-.c66 {
+.c67 {
   padding-top: 16px;
   padding-right: 16px;
   padding-left: 16px;
@@ -177,14 +177,14 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   border-color: #c0c0cf;
 }
 
-.c73 {
+.c74 {
   background: #f6f6f9;
   border-radius: 4px;
   border-color: #eaeaef;
   border: 1px solid #eaeaef;
 }
 
-.c82 {
+.c83 {
   padding-left: 12px;
 }
 
@@ -209,7 +209,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   flex-wrap: wrap;
 }
 
-.c67 {
+.c68 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -223,7 +223,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   align-items: center;
 }
 
-.c74 {
+.c75 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -241,7 +241,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   align-items: center;
 }
 
-.c85 {
+.c86 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -255,21 +255,21 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   outline: none;
 }
 
-.c85 svg {
+.c86 svg {
   height: 12px;
   width: 12px;
 }
 
-.c85 svg > g,
-.c85 svg path {
+.c86 svg > g,
+.c86 svg path {
   fill: #ffffff;
 }
 
-.c85[aria-disabled='true'] {
+.c86[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c85:after {
+.c86:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -284,11 +284,11 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   border: 2px solid transparent;
 }
 
-.c85:focus-visible {
+.c86:focus-visible {
   outline: none;
 }
 
-.c85:focus-visible:after {
+.c86:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -299,7 +299,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   border: 2px solid #4945ff;
 }
 
-.c86 {
+.c87 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -316,30 +316,30 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   width: 2rem;
 }
 
-.c86 svg > g,
-.c86 svg path {
+.c87 svg > g,
+.c87 svg path {
   fill: #8e8ea9;
 }
 
-.c86:hover svg > g,
-.c86:hover svg path {
+.c87:hover svg > g,
+.c87:hover svg path {
   fill: #666687;
 }
 
-.c86:active svg > g,
-.c86:active svg path {
+.c87:active svg > g,
+.c87:active svg path {
   fill: #a5a5ba;
 }
 
-.c86[aria-disabled='true'] {
+.c87[aria-disabled='true'] {
   background-color: #eaeaef;
 }
 
-.c86[aria-disabled='true'] svg path {
+.c87[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c53 {
+.c54 {
   position: absolute;
   left: 0;
   right: 0;
@@ -350,45 +350,45 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   border: none;
 }
 
-.c53:focus {
+.c54:focus {
   outline: none;
 }
 
-.c53[aria-disabled='true'] {
+.c54[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c50 {
+.c51 {
   font-weight: 500;
   font-size: 0.75rem;
   line-height: 1.33;
   color: #32324d;
 }
 
-.c57 {
+.c58 {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c61 {
+.c62 {
   font-weight: 400;
   font-size: 0.75rem;
   line-height: 1.33;
   color: #666687;
 }
 
-.c56 {
+.c57 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c58 {
+.c59 {
   padding-left: 12px;
 }
 
-.c51 {
+.c52 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -402,7 +402,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   align-items: center;
 }
 
-.c54 {
+.c55 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -420,7 +420,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   align-items: center;
 }
 
-.c49 {
+.c50 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -430,16 +430,16 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   flex-direction: column;
 }
 
-.c49 > * {
+.c50 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c49 > * + * {
+.c50 > * + * {
   margin-top: 4px;
 }
 
-.c52 {
+.c53 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -455,28 +455,28 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   transition-duration: 0.2s;
 }
 
-.c52:focus-within {
+.c53:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c59 {
+.c60 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c59 svg {
+.c60 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c59 svg path {
+.c60 svg path {
   fill: #666687;
 }
 
-.c60 {
+.c61 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -485,15 +485,15 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   border: none;
 }
 
-.c60 svg {
+.c61 svg {
   width: 0.375rem;
 }
 
-.c55 {
+.c56 {
   width: 100%;
 }
 
-.c70 {
+.c71 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -507,12 +507,12 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   align-items: center;
 }
 
-.c71 > * {
+.c72 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c71 > * + * {
+.c72 > * + * {
   margin-left: 12px;
 }
 
@@ -523,14 +523,14 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   color: #32324d;
 }
 
-.c80 {
+.c81 {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c81 {
+.c82 {
   font-weight: 600;
   line-height: 1.14;
 }
@@ -549,7 +549,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   color: #271fe0;
 }
 
-.c46 {
+.c47 {
   font-weight: 500;
   font-size: 0.75rem;
   line-height: 1.33;
@@ -568,6 +568,12 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
 }
 
 .c42 {
+  background: #f0f0ff;
+  padding-right: 32px;
+  padding-left: 32px;
+}
+
+.c46 {
   background: #fcecea;
   padding-right: 32px;
   padding-left: 32px;
@@ -670,11 +676,11 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   width: fit-content;
 }
 
-.c64 {
+.c65 {
   background: #eaeaef;
 }
 
-.c65 {
+.c66 {
   height: 1px;
   border: none;
   margin: 0;
@@ -849,17 +855,17 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   outline: none;
 }
 
-.c47 {
+.c48 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c48 {
+.c49 {
   grid-column: span 6;
 }
 
-.c62 {
+.c63 {
   grid-column: span 3;
 }
 
@@ -867,7 +873,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   gap: 16px;
 }
 
-.c77 {
+.c78 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -879,98 +885,98 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
   height: 32px;
 }
 
-.c77:last-child {
+.c78:last-child {
   padding: 0 12px;
 }
 
-.c78 {
+.c79 {
   padding: 0 12px;
   border-right: 1px solid #eaeaef;
   cursor: all-scroll;
 }
 
-.c78 svg {
+.c79 svg {
   width: 0.75rem;
   height: 0.75rem;
 }
 
-.c75 {
+.c76 {
   max-height: 2rem;
   cursor: pointer;
   opacity: 1;
 }
 
-.c75 svg {
+.c76 svg {
   width: 0.625rem;
   height: 0.625rem;
 }
 
-.c75 svg path {
+.c76 svg path {
   fill: #666687;
 }
 
-.c75:hover {
+.c76:hover {
   background-color: #f0f0ff;
   border-color: #d9d8ff;
 }
 
-.c75:hover svg path {
+.c76:hover svg path {
   fill: #4945ff;
 }
 
-.c75:hover .c79 {
+.c76:hover .c80 {
   color: #4945ff;
 }
 
-.c75:hover .c76 {
+.c76:hover .c77 {
   border-right: 1px solid #d9d8ff;
 }
 
-.c72:last-child {
+.c73:last-child {
   padding-right: 12px;
 }
 
-.c68 {
+.c69 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c83 {
+.c84 {
   -webkit-flex: auto;
   -ms-flex: auto;
   flex: auto;
 }
 
-.c69 {
+.c70 {
   overflow-x: scroll;
   overflow-y: hidden;
 }
 
-.c84 {
+.c85 {
   max-width: 2rem;
 }
 
 @media (max-width:68.75rem) {
-  .c48 {
+  .c49 {
     grid-column: span 12;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c48 {
+  .c49 {
     grid-column: span;
   }
 }
 
 @media (max-width:68.75rem) {
-  .c62 {
+  .c63 {
     grid-column: span 12;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c62 {
+  .c63 {
     grid-column: span;
   }
 }
@@ -1240,10 +1246,10 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                     >
                       <div
                         aria-hidden="true"
-                        class="c42 c34 c41"
+                        class="c46 c34 c41"
                       >
                         <span
-                          class="c46"
+                          class="c47"
                         >
                           off
                         </span>
@@ -1269,27 +1275,27 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
               </div>
             </div>
             <div
-              class="c47"
+              class="c48"
             >
               <div
-                class="c48"
+                class="c49"
               >
                 <div
                   class=""
                 >
                   <div>
                     <div
-                      class="c49"
+                      class="c50"
                     >
                       <span
-                        class="c50"
+                        class="c51"
                         for="select-1"
                         id="select-1-label"
                       >
                         Entries per page
                       </span>
                       <div
-                        class="c51 c52"
+                        class="c52 c53"
                       >
                         <button
                           aria-describedby="select-1-hint"
@@ -1297,22 +1303,22 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                           aria-expanded="false"
                           aria-haspopup="listbox"
                           aria-labelledby="select-1-label select-1-content"
-                          class="c53"
+                          class="c54"
                           id="select-1"
                           name="settings.pageSize"
                           type="button"
                         />
                         <div
-                          class="c54 c55"
+                          class="c55 c56"
                         >
                           <div
-                            class="c51"
+                            class="c52"
                           >
                             <div
-                              class="c56"
+                              class="c57"
                             >
                               <span
-                                class="c57"
+                                class="c58"
                                 id="select-1-content"
                               >
                                 10
@@ -1320,11 +1326,11 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                             </div>
                           </div>
                           <div
-                            class="c51"
+                            class="c52"
                           >
                             <button
                               aria-hidden="true"
-                              class="c58 c59 c60"
+                              class="c59 c60 c61"
                               tabindex="-1"
                               type="button"
                             >
@@ -1347,7 +1353,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                         </div>
                       </div>
                       <p
-                        class="c61"
+                        class="c62"
                         id="select-1-hint"
                       >
                         Note: You can override this value in the Collection Type settings page.
@@ -1357,46 +1363,46 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                 </div>
               </div>
               <div
-                class="c62"
+                class="c63"
               >
                 <div
                   class=""
                 >
                   <div>
                     <div
-                      class="c49"
+                      class="c50"
                     >
                       <span
-                        class="c50"
+                        class="c51"
                         for="select-2"
                         id="select-2-label"
                       >
                         Default sort attribute
                       </span>
                       <div
-                        class="c51 c52"
+                        class="c52 c53"
                       >
                         <button
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-haspopup="listbox"
                           aria-labelledby="select-2-label select-2-content"
-                          class="c53"
+                          class="c54"
                           id="select-2"
                           name="settings.defaultSortBy"
                           type="button"
                         />
                         <div
-                          class="c54 c55"
+                          class="c55 c56"
                         >
                           <div
-                            class="c51"
+                            class="c52"
                           >
                             <div
-                              class="c56"
+                              class="c57"
                             >
                               <span
-                                class="c57"
+                                class="c58"
                                 id="select-2-content"
                               >
                                 id
@@ -1404,11 +1410,11 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                             </div>
                           </div>
                           <div
-                            class="c51"
+                            class="c52"
                           >
                             <button
                               aria-hidden="true"
-                              class="c58 c59 c60"
+                              class="c59 c60 c61"
                               tabindex="-1"
                               type="button"
                             >
@@ -1435,46 +1441,46 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                 </div>
               </div>
               <div
-                class="c62"
+                class="c63"
               >
                 <div
                   class=""
                 >
                   <div>
                     <div
-                      class="c49"
+                      class="c50"
                     >
                       <span
-                        class="c50"
+                        class="c51"
                         for="select-3"
                         id="select-3-label"
                       >
                         Default sort order
                       </span>
                       <div
-                        class="c51 c52"
+                        class="c52 c53"
                       >
                         <button
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-haspopup="listbox"
                           aria-labelledby="select-3-label select-3-content"
-                          class="c53"
+                          class="c54"
                           id="select-3"
                           name="settings.defaultSortOrder"
                           type="button"
                         />
                         <div
-                          class="c54 c55"
+                          class="c55 c56"
                         >
                           <div
-                            class="c51"
+                            class="c52"
                           >
                             <div
-                              class="c56"
+                              class="c57"
                             >
                               <span
-                                class="c57"
+                                class="c58"
                                 id="select-3-content"
                               >
                                 ASC
@@ -1482,11 +1488,11 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                             </div>
                           </div>
                           <div
-                            class="c51"
+                            class="c52"
                           >
                             <button
                               aria-hidden="true"
-                              class="c58 c59 c60"
+                              class="c59 c60 c61"
                               tabindex="-1"
                               type="button"
                             >
@@ -1514,10 +1520,10 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
               </div>
             </div>
             <div
-              class="c63"
+              class="c64"
             >
               <hr
-                class="c64 c65"
+                class="c65 c66"
               />
             </div>
             <div
@@ -1530,27 +1536,27 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
               </h2>
             </div>
             <div
-              class="c66 c67"
+              class="c67 c68"
             >
               <div
-                class="c27 c68 c69"
+                class="c27 c69 c70"
                 size="1"
               >
                 <div
-                  class="c70 c71"
+                  class="c71 c72"
                 >
                   <div
-                    class="c72"
+                    class="c73"
                   >
                     <div
-                      class="c73 c74 c75"
+                      class="c74 c75 c76"
                     >
                       <div
-                        class="c70 c71"
+                        class="c71 c72"
                       >
                         <button
                           aria-label="Move id"
-                          class="c76 c77 c78"
+                          class="c77 c78 c79"
                           draggable="true"
                           type="button"
                         >
@@ -1592,17 +1598,17 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                           </svg>
                         </button>
                         <span
-                          class="c79 c80 c81"
+                          class="c80 c81 c82"
                         >
                           hey
                         </span>
                       </div>
                       <div
-                        class="c82 c67"
+                        class="c83 c68"
                       >
                         <button
                           aria-label="Edit id"
-                          class="c77"
+                          class="c78"
                           type="button"
                         >
                           <svg
@@ -1622,7 +1628,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                         </button>
                         <button
                           aria-label="Delete id"
-                          class="c77"
+                          class="c78"
                           data-testid="delete-id"
                           type="button"
                         >
@@ -1643,17 +1649,17 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                     </div>
                   </div>
                   <div
-                    class="c72"
+                    class="c73"
                   >
                     <div
-                      class="c73 c74 c75"
+                      class="c74 c75 c76"
                     >
                       <div
-                        class="c70 c71"
+                        class="c71 c72"
                       >
                         <button
                           aria-label="Move address"
-                          class="c76 c77 c78"
+                          class="c77 c78 c79"
                           draggable="true"
                           type="button"
                         >
@@ -1695,17 +1701,17 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                           </svg>
                         </button>
                         <span
-                          class="c79 c80 c81"
+                          class="c80 c81 c82"
                         >
                           address
                         </span>
                       </div>
                       <div
-                        class="c82 c67"
+                        class="c83 c68"
                       >
                         <button
                           aria-label="Edit address"
-                          class="c77"
+                          class="c78"
                           type="button"
                         >
                           <svg
@@ -1725,7 +1731,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                         </button>
                         <button
                           aria-label="Delete address"
-                          class="c77"
+                          class="c78"
                           data-testid="delete-address"
                           type="button"
                         >
@@ -1748,7 +1754,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                 </div>
               </div>
               <div
-                class="c27 c83 c84"
+                class="c27 c84 c85"
               >
                 <div>
                   <span>
@@ -1758,7 +1764,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                       aria-expanded="false"
                       aria-haspopup="true"
                       aria-labelledby="tooltip-1"
-                      class="c85 c86"
+                      class="c86 c87"
                       data-testid="add-field"
                       tabindex="0"
                       type="button"
@@ -1789,7 +1795,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`] = `
-.c87 {
+.c88 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -1815,7 +1821,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   padding-bottom: 16px;
 }
 
-.c63 {
+.c64 {
   padding-top: 24px;
   padding-bottom: 24px;
 }
@@ -1967,7 +1973,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   padding-bottom: 24px;
 }
 
-.c66 {
+.c67 {
   padding-top: 16px;
   padding-right: 16px;
   padding-left: 16px;
@@ -1977,14 +1983,14 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   border-color: #c0c0cf;
 }
 
-.c73 {
+.c74 {
   background: #f6f6f9;
   border-radius: 4px;
   border-color: #eaeaef;
   border: 1px solid #eaeaef;
 }
 
-.c82 {
+.c83 {
   padding-left: 12px;
 }
 
@@ -2009,7 +2015,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   flex-wrap: wrap;
 }
 
-.c67 {
+.c68 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2023,7 +2029,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   align-items: center;
 }
 
-.c74 {
+.c75 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2041,26 +2047,26 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   align-items: center;
 }
 
-.c88 {
+.c89 {
   background: #212134;
   padding: 8px;
   border-radius: 4px;
 }
 
-.c90 {
+.c91 {
   font-weight: 400;
   font-size: 0.75rem;
   line-height: 1.33;
   color: #ffffff;
 }
 
-.c89 {
+.c90 {
   position: absolute;
   z-index: 4;
   display: none;
 }
 
-.c85 {
+.c86 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2074,21 +2080,21 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   outline: none;
 }
 
-.c85 svg {
+.c86 svg {
   height: 12px;
   width: 12px;
 }
 
-.c85 svg > g,
-.c85 svg path {
+.c86 svg > g,
+.c86 svg path {
   fill: #ffffff;
 }
 
-.c85[aria-disabled='true'] {
+.c86[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c85:after {
+.c86:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -2103,11 +2109,11 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   border: 2px solid transparent;
 }
 
-.c85:focus-visible {
+.c86:focus-visible {
   outline: none;
 }
 
-.c85:focus-visible:after {
+.c86:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -2118,7 +2124,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c86 {
+.c87 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2135,30 +2141,30 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   width: 2rem;
 }
 
-.c86 svg > g,
-.c86 svg path {
+.c87 svg > g,
+.c87 svg path {
   fill: #8e8ea9;
 }
 
-.c86:hover svg > g,
-.c86:hover svg path {
+.c87:hover svg > g,
+.c87:hover svg path {
   fill: #666687;
 }
 
-.c86:active svg > g,
-.c86:active svg path {
+.c87:active svg > g,
+.c87:active svg path {
   fill: #a5a5ba;
 }
 
-.c86[aria-disabled='true'] {
+.c87[aria-disabled='true'] {
   background-color: #eaeaef;
 }
 
-.c86[aria-disabled='true'] svg path {
+.c87[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c53 {
+.c54 {
   position: absolute;
   left: 0;
   right: 0;
@@ -2169,45 +2175,45 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   border: none;
 }
 
-.c53:focus {
+.c54:focus {
   outline: none;
 }
 
-.c53[aria-disabled='true'] {
+.c54[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c50 {
+.c51 {
   font-weight: 500;
   font-size: 0.75rem;
   line-height: 1.33;
   color: #32324d;
 }
 
-.c57 {
+.c58 {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c61 {
+.c62 {
   font-weight: 400;
   font-size: 0.75rem;
   line-height: 1.33;
   color: #666687;
 }
 
-.c56 {
+.c57 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c58 {
+.c59 {
   padding-left: 12px;
 }
 
-.c51 {
+.c52 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2221,7 +2227,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   align-items: center;
 }
 
-.c54 {
+.c55 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2239,7 +2245,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   align-items: center;
 }
 
-.c49 {
+.c50 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2249,16 +2255,16 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   flex-direction: column;
 }
 
-.c49 > * {
+.c50 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c49 > * + * {
+.c50 > * + * {
   margin-top: 4px;
 }
 
-.c52 {
+.c53 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -2274,28 +2280,28 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   transition-duration: 0.2s;
 }
 
-.c52:focus-within {
+.c53:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c59 {
+.c60 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c59 svg {
+.c60 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c59 svg path {
+.c60 svg path {
   fill: #666687;
 }
 
-.c60 {
+.c61 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2304,15 +2310,15 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   border: none;
 }
 
-.c60 svg {
+.c61 svg {
   width: 0.375rem;
 }
 
-.c55 {
+.c56 {
   width: 100%;
 }
 
-.c70 {
+.c71 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2326,12 +2332,12 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   align-items: center;
 }
 
-.c71 > * {
+.c72 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c71 > * + * {
+.c72 > * + * {
   margin-left: 12px;
 }
 
@@ -2342,14 +2348,14 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   color: #32324d;
 }
 
-.c80 {
+.c81 {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c81 {
+.c82 {
   font-weight: 600;
   line-height: 1.14;
 }
@@ -2368,7 +2374,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   color: #271fe0;
 }
 
-.c46 {
+.c47 {
   font-weight: 500;
   font-size: 0.75rem;
   line-height: 1.33;
@@ -2387,6 +2393,12 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
 }
 
 .c42 {
+  background: #f0f0ff;
+  padding-right: 32px;
+  padding-left: 32px;
+}
+
+.c46 {
   background: #fcecea;
   padding-right: 32px;
   padding-left: 32px;
@@ -2489,11 +2501,11 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   width: fit-content;
 }
 
-.c64 {
+.c65 {
   background: #eaeaef;
 }
 
-.c65 {
+.c66 {
   height: 1px;
   border: none;
   margin: 0;
@@ -2668,17 +2680,17 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   outline: none;
 }
 
-.c47 {
+.c48 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c48 {
+.c49 {
   grid-column: span 6;
 }
 
-.c62 {
+.c63 {
   grid-column: span 3;
 }
 
@@ -2686,28 +2698,28 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   gap: 16px;
 }
 
-.c98 {
+.c99 {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c91 {
+.c92 {
   background: #ffffff;
   padding: 4px;
   border-radius: 4px;
 }
 
-.c94 {
+.c95 {
   padding: 4px;
 }
 
-.c97 {
+.c98 {
   padding: 8px;
 }
 
-.c95 {
+.c96 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2725,7 +2737,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   align-items: center;
 }
 
-.c92 {
+.c93 {
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
   position: absolute;
   z-index: 4;
@@ -2733,28 +2745,28 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   background: #ffffff;
 }
 
-.c93 {
+.c94 {
   max-height: 15rem;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
-.c93::-webkit-scrollbar {
+.c94::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 4px;
 }
 
-.c93::-webkit-scrollbar-track {
+.c94::-webkit-scrollbar-track {
   background: #ffffff;
 }
 
-.c93::-webkit-scrollbar-thumb {
+.c94::-webkit-scrollbar-thumb {
   background: #eaeaef;
   border-radius: 4px;
   margin-right: 10px;
 }
 
-.c96 {
+.c97 {
   border: none;
   padding: 0;
   background: transparent;
@@ -2765,15 +2777,15 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   border-radius: 4px;
 }
 
-.c96:focus {
+.c97:focus {
   background-color: #f0f0ff;
 }
 
-.c96:hover {
+.c97:hover {
   background-color: #f0f0ff;
 }
 
-.c77 {
+.c78 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2785,98 +2797,98 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
   height: 32px;
 }
 
-.c77:last-child {
+.c78:last-child {
   padding: 0 12px;
 }
 
-.c78 {
+.c79 {
   padding: 0 12px;
   border-right: 1px solid #eaeaef;
   cursor: all-scroll;
 }
 
-.c78 svg {
+.c79 svg {
   width: 0.75rem;
   height: 0.75rem;
 }
 
-.c75 {
+.c76 {
   max-height: 2rem;
   cursor: pointer;
   opacity: 1;
 }
 
-.c75 svg {
+.c76 svg {
   width: 0.625rem;
   height: 0.625rem;
 }
 
-.c75 svg path {
+.c76 svg path {
   fill: #666687;
 }
 
-.c75:hover {
+.c76:hover {
   background-color: #f0f0ff;
   border-color: #d9d8ff;
 }
 
-.c75:hover svg path {
+.c76:hover svg path {
   fill: #4945ff;
 }
 
-.c75:hover .c79 {
+.c76:hover .c80 {
   color: #4945ff;
 }
 
-.c75:hover .c76 {
+.c76:hover .c77 {
   border-right: 1px solid #d9d8ff;
 }
 
-.c72:last-child {
+.c73:last-child {
   padding-right: 12px;
 }
 
-.c68 {
+.c69 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c83 {
+.c84 {
   -webkit-flex: auto;
   -ms-flex: auto;
   flex: auto;
 }
 
-.c69 {
+.c70 {
   overflow-x: scroll;
   overflow-y: hidden;
 }
 
-.c84 {
+.c85 {
   max-width: 2rem;
 }
 
 @media (max-width:68.75rem) {
-  .c48 {
+  .c49 {
     grid-column: span 12;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c48 {
+  .c49 {
     grid-column: span;
   }
 }
 
 @media (max-width:68.75rem) {
-  .c62 {
+  .c63 {
     grid-column: span 12;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c62 {
+  .c63 {
     grid-column: span;
   }
 }
@@ -3146,10 +3158,10 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="c42 c34 c41"
+                          class="c46 c34 c41"
                         >
                           <span
-                            class="c46"
+                            class="c47"
                           >
                             off
                           </span>
@@ -3175,27 +3187,27 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                 </div>
               </div>
               <div
-                class="c47"
+                class="c48"
               >
                 <div
-                  class="c48"
+                  class="c49"
                 >
                   <div
                     class=""
                   >
                     <div>
                       <div
-                        class="c49"
+                        class="c50"
                       >
                         <span
-                          class="c50"
+                          class="c51"
                           for="select-10"
                           id="select-10-label"
                         >
                           Entries per page
                         </span>
                         <div
-                          class="c51 c52"
+                          class="c52 c53"
                         >
                           <button
                             aria-describedby="select-10-hint"
@@ -3203,22 +3215,22 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-labelledby="select-10-label select-10-content"
-                            class="c53"
+                            class="c54"
                             id="select-10"
                             name="settings.pageSize"
                             type="button"
                           />
                           <div
-                            class="c54 c55"
+                            class="c55 c56"
                           >
                             <div
-                              class="c51"
+                              class="c52"
                             >
                               <div
-                                class="c56"
+                                class="c57"
                               >
                                 <span
-                                  class="c57"
+                                  class="c58"
                                   id="select-10-content"
                                 >
                                   10
@@ -3226,11 +3238,11 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c51"
+                              class="c52"
                             >
                               <button
                                 aria-hidden="true"
-                                class="c58 c59 c60"
+                                class="c59 c60 c61"
                                 tabindex="-1"
                                 type="button"
                               >
@@ -3253,7 +3265,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                           </div>
                         </div>
                         <p
-                          class="c61"
+                          class="c62"
                           id="select-10-hint"
                         >
                           Note: You can override this value in the Collection Type settings page.
@@ -3263,46 +3275,46 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c62"
+                  class="c63"
                 >
                   <div
                     class=""
                   >
                     <div>
                       <div
-                        class="c49"
+                        class="c50"
                       >
                         <span
-                          class="c50"
+                          class="c51"
                           for="select-11"
                           id="select-11-label"
                         >
                           Default sort attribute
                         </span>
                         <div
-                          class="c51 c52"
+                          class="c52 c53"
                         >
                           <button
                             aria-disabled="false"
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-labelledby="select-11-label select-11-content"
-                            class="c53"
+                            class="c54"
                             id="select-11"
                             name="settings.defaultSortBy"
                             type="button"
                           />
                           <div
-                            class="c54 c55"
+                            class="c55 c56"
                           >
                             <div
-                              class="c51"
+                              class="c52"
                             >
                               <div
-                                class="c56"
+                                class="c57"
                               >
                                 <span
-                                  class="c57"
+                                  class="c58"
                                   id="select-11-content"
                                 >
                                   id
@@ -3310,11 +3322,11 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c51"
+                              class="c52"
                             >
                               <button
                                 aria-hidden="true"
-                                class="c58 c59 c60"
+                                class="c59 c60 c61"
                                 tabindex="-1"
                                 type="button"
                               >
@@ -3341,46 +3353,46 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c62"
+                  class="c63"
                 >
                   <div
                     class=""
                   >
                     <div>
                       <div
-                        class="c49"
+                        class="c50"
                       >
                         <span
-                          class="c50"
+                          class="c51"
                           for="select-12"
                           id="select-12-label"
                         >
                           Default sort order
                         </span>
                         <div
-                          class="c51 c52"
+                          class="c52 c53"
                         >
                           <button
                             aria-disabled="false"
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-labelledby="select-12-label select-12-content"
-                            class="c53"
+                            class="c54"
                             id="select-12"
                             name="settings.defaultSortOrder"
                             type="button"
                           />
                           <div
-                            class="c54 c55"
+                            class="c55 c56"
                           >
                             <div
-                              class="c51"
+                              class="c52"
                             >
                               <div
-                                class="c56"
+                                class="c57"
                               >
                                 <span
-                                  class="c57"
+                                  class="c58"
                                   id="select-12-content"
                                 >
                                   ASC
@@ -3388,11 +3400,11 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c51"
+                              class="c52"
                             >
                               <button
                                 aria-hidden="true"
-                                class="c58 c59 c60"
+                                class="c59 c60 c61"
                                 tabindex="-1"
                                 type="button"
                               >
@@ -3420,10 +3432,10 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                 </div>
               </div>
               <div
-                class="c63"
+                class="c64"
               >
                 <hr
-                  class="c64 c65"
+                  class="c65 c66"
                 />
               </div>
               <div
@@ -3436,27 +3448,27 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                 </h2>
               </div>
               <div
-                class="c66 c67"
+                class="c67 c68"
               >
                 <div
-                  class="c27 c68 c69"
+                  class="c27 c69 c70"
                   size="1"
                 >
                   <div
-                    class="c70 c71"
+                    class="c71 c72"
                   >
                     <div
-                      class="c72"
+                      class="c73"
                     >
                       <div
-                        class="c73 c74 c75"
+                        class="c74 c75 c76"
                       >
                         <div
-                          class="c70 c71"
+                          class="c71 c72"
                         >
                           <button
                             aria-label="Move cover"
-                            class="c76 c77 c78"
+                            class="c77 c78 c79"
                             draggable="true"
                             type="button"
                           >
@@ -3498,17 +3510,17 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                             </svg>
                           </button>
                           <span
-                            class="c79 c80 c81"
+                            class="c80 c81 c82"
                           >
                             michka
                           </span>
                         </div>
                         <div
-                          class="c82 c67"
+                          class="c83 c68"
                         >
                           <button
                             aria-label="Edit cover"
-                            class="c77"
+                            class="c78"
                             type="button"
                           >
                             <svg
@@ -3528,7 +3540,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                           </button>
                           <button
                             aria-label="Delete cover"
-                            class="c77"
+                            class="c78"
                             data-testid="delete-cover"
                             type="button"
                           >
@@ -3549,17 +3561,17 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                       </div>
                     </div>
                     <div
-                      class="c72"
+                      class="c73"
                     >
                       <div
-                        class="c73 c74 c75"
+                        class="c74 c75 c76"
                       >
                         <div
-                          class="c70 c71"
+                          class="c71 c72"
                         >
                           <button
                             aria-label="Move id"
-                            class="c76 c77 c78"
+                            class="c77 c78 c79"
                             draggable="true"
                             type="button"
                           >
@@ -3601,17 +3613,17 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                             </svg>
                           </button>
                           <span
-                            class="c79 c80 c81"
+                            class="c80 c81 c82"
                           >
                             hey
                           </span>
                         </div>
                         <div
-                          class="c82 c67"
+                          class="c83 c68"
                         >
                           <button
                             aria-label="Edit id"
-                            class="c77"
+                            class="c78"
                             type="button"
                           >
                             <svg
@@ -3631,7 +3643,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                           </button>
                           <button
                             aria-label="Delete id"
-                            class="c77"
+                            class="c78"
                             data-testid="delete-id"
                             type="button"
                           >
@@ -3652,17 +3664,17 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                       </div>
                     </div>
                     <div
-                      class="c72"
+                      class="c73"
                     >
                       <div
-                        class="c73 c74 c75"
+                        class="c74 c75 c76"
                       >
                         <div
-                          class="c70 c71"
+                          class="c71 c72"
                         >
                           <button
                             aria-label="Move address"
-                            class="c76 c77 c78"
+                            class="c77 c78 c79"
                             draggable="true"
                             type="button"
                           >
@@ -3704,17 +3716,17 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                             </svg>
                           </button>
                           <span
-                            class="c79 c80 c81"
+                            class="c80 c81 c82"
                           >
                             address
                           </span>
                         </div>
                         <div
-                          class="c82 c67"
+                          class="c83 c68"
                         >
                           <button
                             aria-label="Edit address"
-                            class="c77"
+                            class="c78"
                             type="button"
                           >
                             <svg
@@ -3734,7 +3746,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                           </button>
                           <button
                             aria-label="Delete address"
-                            class="c77"
+                            class="c78"
                             data-testid="delete-address"
                             type="button"
                           >
@@ -3757,7 +3769,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c27 c83 c84"
+                  class="c27 c84 c85"
                 >
                   <div>
                     <span>
@@ -3767,7 +3779,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                         aria-expanded="true"
                         aria-haspopup="true"
                         aria-labelledby="tooltip-7"
-                        class="c85 c86"
+                        class="c86 c87"
                         data-testid="add-field"
                         tabindex="0"
                         type="button"
@@ -3796,7 +3808,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
     </div>
   </div>
   <div
-    class="c87"
+    class="c88"
   >
     <p
       aria-live="polite"
@@ -3821,13 +3833,13 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c88 c89"
+      class="c89 c90"
       id="tooltip-7"
       role="tooltip"
       style="left: 0px; top: -8px;"
     >
       <p
-        class="c90"
+        class="c91"
       >
         Add a field
       </p>
@@ -3837,32 +3849,32 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
     data-react-portal="true"
   >
     <div
-      class="c91 c92"
+      class="c92 c93"
       style="left: 0px; top: 4px;"
     >
       <div
-        class="c93"
+        class="c94"
       >
         <ul
-          class="c94"
+          class="c95"
           id="simplemenu-4"
           role="menu"
         >
           <li
-            class="c95"
+            class="c96"
             role="menuitem"
           >
             <button
-              class="c96"
+              class="c97"
               role="menuitem"
               tabindex="0"
               type="button"
             >
               <div
-                class="c97"
+                class="c98"
               >
                 <span
-                  class="c98"
+                  class="c99"
                 >
                   averagePrice
                 </span>
@@ -3870,20 +3882,20 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
             </button>
           </li>
           <li
-            class="c95"
+            class="c96"
             role="menuitem"
           >
             <button
-              class="c96"
+              class="c97"
               role="menuitem"
               tabindex="-1"
               type="button"
             >
               <div
-                class="c97"
+                class="c98"
               >
                 <span
-                  class="c98"
+                  class="c99"
                 >
                   since
                 </span>
diff --git a/packages/core/admin/admin/src/pages/HomePage/SocialLinks.js b/packages/core/admin/admin/src/pages/HomePage/SocialLinks.js
index b457c3a143..7d7330fbbd 100644
--- a/packages/core/admin/admin/src/pages/HomePage/SocialLinks.js
+++ b/packages/core/admin/admin/src/pages/HomePage/SocialLinks.js
@@ -16,11 +16,8 @@ import ExternalLink from '@strapi/icons/ExternalLink';
 import Github from '@strapi/icons/Github';
 import Discord from '@strapi/icons/Discord';
 import Reddit from '@strapi/icons/Reddit';
-// FIXME
-// eslint-disable-next-line import/no-duplicates
-import Strapi from '@strapi/icons/Discourse';
+import Strapi from '@strapi/icons/Strapi';
 import Twitter from '@strapi/icons/Twitter';
-// eslint-disable-next-line import/no-duplicates
 import Discourse from '@strapi/icons/Discourse';
 
 const StyledDiscord = styled(Discord)`
diff --git a/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js b/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js
index a4fcda37aa..8dfedfe6f4 100644
--- a/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js
@@ -1403,28 +1403,22 @@ describe('Homepage', () => {
                                   xmlns="http://www.w3.org/2000/svg"
                                 >
                                   <path
-                                    d="M12.103 0C5.533 0 0 5.278 0 11.79V24l12.1-.012c6.57 0 11.9-5.481 11.9-11.992C24 5.486 18.666 0 12.103 0z"
-                                    fill="#231F20"
+                                    clip-rule="evenodd"
+                                    d="M23.498 0H7.68v8.035h7.783c.278 0 .503.224.503.502v7.783H24V.502A.502.502 0 0023.498 0z"
+                                    fill="#8E75FF"
+                                    fill-rule="evenodd"
                                   />
                                   <path
-                                    d="M12.22 4.564a7.43 7.43 0 00-3.644.956 7.346 7.346 0 00-2.692 2.614 7.26 7.26 0 00-.149 7.22L4.4 19.606l4.793-1.072a7.433 7.433 0 006.355-.14 7.36 7.36 0 002.513-2.057 7.28 7.28 0 001.372-2.93 7.243 7.243 0 00-.035-3.228A7.281 7.281 0 0017.96 7.28a7.365 7.365 0 00-2.557-2.002 7.432 7.432 0 00-3.178-.715h-.007z"
-                                    fill="#FFF9AE"
+                                    clip-rule="evenodd"
+                                    d="M7.68 0v8.035H.252a.251.251 0 01-.178-.429L7.68 0zM16.395 23.926a.251.251 0 01-.43-.177V16.32H24l-7.605 7.606z"
+                                    fill="#8E75FF"
+                                    fill-rule="evenodd"
+                                    opacity="0.405"
                                   />
                                   <path
-                                    d="M18.071 7.426a7.262 7.262 0 011.51 4.499 7.264 7.264 0 01-1.595 4.47 7.38 7.38 0 01-4.028 2.558 7.437 7.437 0 01-4.765-.43L4.4 19.61l4.88-.571a7.432 7.432 0 005.181.858 7.381 7.381 0 004.443-2.778 7.258 7.258 0 00-.833-9.693z"
-                                    fill="#00AEEF"
-                                  />
-                                  <path
-                                    d="M16.713 6.078a7.253 7.253 0 01.86 8.928 7.361 7.361 0 01-3.736 2.962 7.437 7.437 0 01-4.784.065L4.4 19.61l4.793-1.075a7.436 7.436 0 005.24.313 7.362 7.362 0 004.123-3.22 7.249 7.249 0 00.914-5.123 7.296 7.296 0 00-2.757-4.427z"
-                                    fill="#00A94F"
-                                  />
-                                  <path
-                                    d="M6.176 15.515a7.246 7.246 0 01-.26-4.876 7.312 7.312 0 012.9-3.95 7.427 7.427 0 019.26.735 7.387 7.387 0 00-4.603-2.771 7.431 7.431 0 00-5.277 1.068A7.311 7.311 0 005.06 10.06a7.249 7.249 0 00.676 5.294L4.4 19.607l1.776-4.092z"
-                                    fill="#F15D22"
-                                  />
-                                  <path
-                                    d="M5.735 15.353a7.25 7.25 0 01-.764-4.818 7.294 7.294 0 012.465-4.222 7.415 7.415 0 014.596-1.744 7.42 7.42 0 014.681 1.509 7.404 7.404 0 00-4.865-2.26 7.421 7.421 0 00-5.12 1.61 7.293 7.293 0 00-2.66 4.626A7.256 7.256 0 005.28 15.24l-.877 4.37 1.332-4.257z"
-                                    fill="#E31B23"
+                                    d="M7.68 8.035h8.034c.14 0 .252.112.252.25v8.035H8.183a.502.502 0 01-.503-.502V8.035z"
+                                    fill="#8E75FF"
+                                    opacity="0.405"
                                   />
                                 </svg>
                               </div>
@@ -1462,28 +1456,22 @@ describe('Homepage', () => {
                                   xmlns="http://www.w3.org/2000/svg"
                                 >
                                   <path
-                                    d="M12.103 0C5.533 0 0 5.278 0 11.79V24l12.1-.012c6.57 0 11.9-5.481 11.9-11.992C24 5.486 18.666 0 12.103 0z"
-                                    fill="#231F20"
+                                    clip-rule="evenodd"
+                                    d="M23.498 0H7.68v8.035h7.783c.278 0 .503.224.503.502v7.783H24V.502A.502.502 0 0023.498 0z"
+                                    fill="#8E75FF"
+                                    fill-rule="evenodd"
                                   />
                                   <path
-                                    d="M12.22 4.564a7.43 7.43 0 00-3.644.956 7.346 7.346 0 00-2.692 2.614 7.26 7.26 0 00-.149 7.22L4.4 19.606l4.793-1.072a7.433 7.433 0 006.355-.14 7.36 7.36 0 002.513-2.057 7.28 7.28 0 001.372-2.93 7.243 7.243 0 00-.035-3.228A7.281 7.281 0 0017.96 7.28a7.365 7.365 0 00-2.557-2.002 7.432 7.432 0 00-3.178-.715h-.007z"
-                                    fill="#FFF9AE"
+                                    clip-rule="evenodd"
+                                    d="M7.68 0v8.035H.252a.251.251 0 01-.178-.429L7.68 0zM16.395 23.926a.251.251 0 01-.43-.177V16.32H24l-7.605 7.606z"
+                                    fill="#8E75FF"
+                                    fill-rule="evenodd"
+                                    opacity="0.405"
                                   />
                                   <path
-                                    d="M18.071 7.426a7.262 7.262 0 011.51 4.499 7.264 7.264 0 01-1.595 4.47 7.38 7.38 0 01-4.028 2.558 7.437 7.437 0 01-4.765-.43L4.4 19.61l4.88-.571a7.432 7.432 0 005.181.858 7.381 7.381 0 004.443-2.778 7.258 7.258 0 00-.833-9.693z"
-                                    fill="#00AEEF"
-                                  />
-                                  <path
-                                    d="M16.713 6.078a7.253 7.253 0 01.86 8.928 7.361 7.361 0 01-3.736 2.962 7.437 7.437 0 01-4.784.065L4.4 19.61l4.793-1.075a7.436 7.436 0 005.24.313 7.362 7.362 0 004.123-3.22 7.249 7.249 0 00.914-5.123 7.296 7.296 0 00-2.757-4.427z"
-                                    fill="#00A94F"
-                                  />
-                                  <path
-                                    d="M6.176 15.515a7.246 7.246 0 01-.26-4.876 7.312 7.312 0 012.9-3.95 7.427 7.427 0 019.26.735 7.387 7.387 0 00-4.603-2.771 7.431 7.431 0 00-5.277 1.068A7.311 7.311 0 005.06 10.06a7.249 7.249 0 00.676 5.294L4.4 19.607l1.776-4.092z"
-                                    fill="#F15D22"
-                                  />
-                                  <path
-                                    d="M5.735 15.353a7.25 7.25 0 01-.764-4.818 7.294 7.294 0 012.465-4.222 7.415 7.415 0 014.596-1.744 7.42 7.42 0 014.681 1.509 7.404 7.404 0 00-4.865-2.26 7.421 7.421 0 00-5.12 1.61 7.293 7.293 0 00-2.66 4.626A7.256 7.256 0 005.28 15.24l-.877 4.37 1.332-4.257z"
-                                    fill="#E31B23"
+                                    d="M7.68 8.035h8.034c.14 0 .252.112.252.25v8.035H8.183a.502.502 0 01-.503-.502V8.035z"
+                                    fill="#8E75FF"
+                                    opacity="0.405"
                                   />
                                 </svg>
                               </div>
diff --git a/packages/core/admin/package.json b/packages/core/admin/package.json
index 583d3d6622..b17d415b43 100644
--- a/packages/core/admin/package.json
+++ b/packages/core/admin/package.json
@@ -40,8 +40,8 @@
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@strapi/babel-plugin-switch-ee-ce": "1.0.0",
     "@strapi/helper-plugin": "3.6.8",
-    "@strapi/icons": "0.0.1-alpha.52",
-    "@strapi/design-system": "0.0.1-alpha.52",
+    "@strapi/icons": "0.0.1-alpha.53",
+    "@strapi/design-system": "0.0.1-alpha.53",
     "@strapi/utils": "3.6.8",
     "axios": "^0.21.1",
     "babel-loader": "8.2.2",
diff --git a/packages/core/helper-plugin/package.json b/packages/core/helper-plugin/package.json
index ebf7d82f11..84b6d88219 100644
--- a/packages/core/helper-plugin/package.json
+++ b/packages/core/helper-plugin/package.json
@@ -57,8 +57,8 @@
     "@storybook/builder-webpack5": "^6.3.7",
     "@storybook/manager-webpack5": "^6.3.7",
     "@storybook/react": "^6.3.7",
-    "@strapi/icons": "0.0.1-alpha.52",
-    "@strapi/design-system": "0.0.1-alpha.52",
+    "@strapi/icons": "0.0.1-alpha.53",
+    "@strapi/design-system": "0.0.1-alpha.53",
     "babel-loader": "^8.2.2",
     "cross-env": "^7.0.3",
     "date-fns": "2.22.1",
diff --git a/yarn.lock b/yarn.lock
index 2f4402622d..f3317510bd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4602,19 +4602,19 @@
     resolve-from "^5.0.0"
     store2 "^2.12.0"
 
-"@strapi/design-system@0.0.1-alpha.52":
-  version "0.0.1-alpha.52"
-  resolved "https://registry.yarnpkg.com/@strapi/design-system/-/design-system-0.0.1-alpha.52.tgz#c59f89532a1376c11cfad480003a31a02d59a9f1"
-  integrity sha512-LuNVxp7OqF1RwSCxEBUtdH/ngZsX8bNbUZV7R8gITOClHqBOBqULt4BRfgG2OARTfV3x1HzAtn/6z6I74JC9SA==
+"@strapi/design-system@0.0.1-alpha.53":
+  version "0.0.1-alpha.53"
+  resolved "https://registry.yarnpkg.com/@strapi/design-system/-/design-system-0.0.1-alpha.53.tgz#3b4d06481edc39ef0be43ad98a17a748fe4921b9"
+  integrity sha512-2vqAQ/82OTwBfQWwhb5XwGJ2c3OjT3TxiS0S/5rKckK82GbBKqQFH6nuU45dGoCsaOk7JrSHRt3L2NJZlUazPA==
   dependencies:
     "@internationalized/number" "^3.0.2"
     compute-scroll-into-view "^1.0.17"
     prop-types "^15.7.2"
 
-"@strapi/icons@0.0.1-alpha.52":
-  version "0.0.1-alpha.52"
-  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-0.0.1-alpha.52.tgz#3daadf1231ad33163f1fc03f5ed03bd5a221ae3c"
-  integrity sha512-o/os1QnTCVIk2VJEac0XaX4lam+NepfPkz8DYJZPTNj0ngn5/cJ4TVpGzS9QbJgSIrpv7Dess1Hcox7OSFY1QQ==
+"@strapi/icons@0.0.1-alpha.53":
+  version "0.0.1-alpha.53"
+  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-0.0.1-alpha.53.tgz#4f94f7f2771ca34e6f348c3d45e84e40aaff169a"
+  integrity sha512-xAtUuzi83U2SzqPVjSMFfCObCzckdXVVJrhH1jmrR611qY+9tmydNusIXVeOYCU9E/dNZxDC6mFDcPn2jSIr/g==
 
 "@stylelint/postcss-css-in-js@^0.37.2":
   version "0.37.2"