From c546768aa3f2f5a83e3154da23b456c320b11e12 Mon Sep 17 00:00:00 2001
From: soupette <cyril@strapi.io>
Date: Thu, 28 Oct 2021 16:11:11 +0200
Subject: [PATCH] updgrade design system

Signed-off-by: soupette <cyril@strapi.io>
---
 .../components/EditFieldForm.js               |   2 +-
 packages/core/admin/package.json              |   4 +-
 .../src/components/AttributeIcon/index.js     |   2 +-
 .../tests/__snapshots__/index.test.js.snap    | 237 ++++++++-----
 .../tests/__snapshots__/index.test.js.snap    |   4 +-
 .../PaginationURLQuery/tests/index.test.js    |   2 +-
 packages/core/helper-plugin/package.json      |   4 +-
 .../EditAssetDialog.test.js.snap              |   6 +-
 .../EditAssetDialog/tests/index.test.js       |   6 +-
 .../tests/FromComputerForm.test.js            |   4 +-
 .../tests/PendingAssetStep.test.js            |   4 +-
 .../UploadAssetDialog.test.js.snap            |   8 +-
 .../Roles/CreatePage/tests/index.test.js      | 333 ++++++++++++------
 .../pages/Roles/EditPage/tests/index.test.js  | 333 ++++++++++++------
 yarn.lock                                     |  16 +-
 15 files changed, 618 insertions(+), 347 deletions(-)

diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js
index a799589449..e39d93e5bf 100644
--- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js
+++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js
@@ -19,7 +19,7 @@ import Date from '@strapi/icons/Date';
 import Boolean from '@strapi/icons/Boolean';
 import Email from '@strapi/icons/Email';
 import Enumeration from '@strapi/icons/Enumeration';
-import Media from '@strapi/icons/Landscape';
+import Media from '@strapi/icons/Media';
 import Relation from '@strapi/icons/Relation';
 import Text from '@strapi/icons/Text';
 import Uid from '@strapi/icons/Uid';
diff --git a/packages/core/admin/package.json b/packages/core/admin/package.json
index b17d415b43..e9ffeb488e 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.53",
-    "@strapi/design-system": "0.0.1-alpha.53",
+    "@strapi/icons": "0.0.1-alpha.54",
+    "@strapi/design-system": "0.0.1-alpha.54",
     "@strapi/utils": "3.6.8",
     "axios": "^0.21.1",
     "babel-loader": "8.2.2",
diff --git a/packages/core/content-type-builder/admin/src/components/AttributeIcon/index.js b/packages/core/content-type-builder/admin/src/components/AttributeIcon/index.js
index e15da15fc6..0e1cbea348 100644
--- a/packages/core/content-type-builder/admin/src/components/AttributeIcon/index.js
+++ b/packages/core/content-type-builder/admin/src/components/AttributeIcon/index.js
@@ -11,7 +11,7 @@ import Email from '@strapi/icons/Email';
 import Enumeration from '@strapi/icons/Enumeration';
 import Json from '@strapi/icons/Json';
 import LongDescription from '@strapi/icons/RichText';
-import Media from '@strapi/icons/Picture';
+import Media from '@strapi/icons/Media';
 import Password from '@strapi/icons/Password';
 import Relation from '@strapi/icons/Relation';
 import SingleType from '@strapi/icons/SingleType';
diff --git a/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap b/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap
index a810b012af..940cc7769a 100644
--- a/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ListView /> renders and matches the snapshot 1`] = `
-.c82 {
+.c83 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -46,7 +46,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   padding-left: 40px;
 }
 
-.c71 {
+.c63 {
+  border-radius: borderRadius;
+}
+
+.c72 {
   background: #d9d8ff;
 }
 
@@ -556,24 +560,24 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   margin-left: 4px;
 }
 
-.c73 {
+.c74 {
   background: #eaeaef;
 }
 
-.c75 {
+.c76 {
   background: #f0f0ff;
   padding: 20px;
 }
 
-.c78 {
+.c79 {
   background: #d9d8ff;
 }
 
-.c80 {
+.c81 {
   padding-left: 12px;
 }
 
-.c77 {
+.c78 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -587,20 +591,20 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c74 {
+.c75 {
   height: 1px;
   border: none;
   margin: 0;
 }
 
-.c81 {
+.c82 {
   font-weight: 500;
   font-size: 0.75rem;
   line-height: 1.33;
   color: #4945ff;
 }
 
-.c79 {
+.c80 {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 50%;
@@ -618,16 +622,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c79 svg {
+.c80 svg {
   height: 0.625rem;
   width: 0.625rem;
 }
 
-.c79 svg path {
+.c80 svg path {
   fill: #4945ff;
 }
 
-.c76 {
+.c77 {
   border-radius: 0 0 4px 4px;
   display: block;
   width: 100%;
@@ -669,7 +673,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   color: #4945ff;
 }
 
-.c66 {
+.c67 {
   font-weight: 500;
   font-size: 0.75rem;
   line-height: 1.33;
@@ -844,7 +848,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   line-height: 1.5;
 }
 
-.c65 {
+.c66 {
   width: 2rem !important;
   height: 2rem !important;
   padding: 0.5625rem;
@@ -852,27 +856,27 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background: #eaeaef;
 }
 
-.c65 path {
+.c66 path {
   fill: #8e8ea9;
 }
 
-.c68 {
+.c69 {
   position: absolute;
   display: none;
   top: 5px;
   right: 0.5rem;
 }
 
-.c68 svg {
+.c69 svg {
   width: 0.625rem;
   height: 0.625rem;
 }
 
-.c68 svg path {
+.c69 svg path {
   fill: #4945ff;
 }
 
-.c63 {
+.c64 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -896,29 +900,29 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c63.active,
-.c63:hover {
+.c64.active,
+.c64:hover {
   border: 1px solid #d9d8ff;
   background: #f0f0ff;
 }
 
-.c63.active .c67,
-.c63:hover .c67 {
+.c64.active .c68,
+.c64:hover .c68 {
   display: block;
 }
 
-.c63.active .c64,
-.c63:hover .c64 {
+.c64.active .c65,
+.c64:hover .c65 {
   background: #d9d8ff;
 }
 
-.c63.active .c64 path,
-.c63:hover .c64 path {
+.c64.active .c65 path,
+.c64:hover .c65 path {
   fill: #4945ff;
 }
 
-.c63.active .c31,
-.c63:hover .c31 {
+.c64.active .c31,
+.c64:hover .c31 {
   color: #4945ff;
 }
 
@@ -1013,7 +1017,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   overflow-x: auto;
 }
 
-.c69 {
+.c70 {
   padding-top: 5.625rem;
 }
 
@@ -1095,7 +1099,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   fill: #666687;
 }
 
-.c72 {
+.c73 {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 50%;
@@ -1113,12 +1117,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c72 svg {
+.c73 svg {
   height: 0.625rem;
   width: 0.625rem;
 }
 
-.c72 svg path {
+.c73 svg path {
   fill: #4945ff;
 }
 
@@ -1158,7 +1162,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   fill: #eaeaef;
 }
 
-.c70 {
+.c71 {
   position: relative;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1168,7 +1172,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   transform: translate(-0.5px,-1px);
 }
 
-.c70 * {
+.c71 * {
   fill: #d9d8ff;
 }
 
@@ -1641,14 +1645,23 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         class="c38"
                         fill="none"
                         height="1em"
-                        viewBox="0 0 24 24"
+                        viewBox="0 0 32 24"
                         width="1em"
                         xmlns="http://www.w3.org/2000/svg"
                       >
+                        <rect
+                          fill="#F6ECFC"
+                          height="23"
+                          rx="2.5"
+                          stroke="#E0C1F4"
+                          width="31"
+                          x="0.5"
+                          y="0.5"
+                        />
                         <path
                           clip-rule="evenodd"
-                          d="M6.094 16.62V7.308h11.812v9.312H6.094zM5 6.42a.22.22 0 01.219-.22H18.78c.121 0 .219.098.219.22v11.087a.22.22 0 01-.219.222H5.22A.22.22 0 015 17.507V6.42zm9.426 5.105a1.22 1.22 0 100-2.442 1.22 1.22 0 000 2.442zm-6.599 3.789h8.135a.349.349 0 00.29-.554l-1.122-1.524a.348.348 0 00-.525-.045l-1.153 1.098-2.676-3.634a.349.349 0 00-.573.016l-2.676 4.106a.348.348 0 00.3.537z"
-                          fill="#32324D"
+                          d="M22 8.759a2 2 0 00-2-2h-8c-1.105 0-2 .902-2 2.006v6.068a2 2 0 00.985 1.724l3.66-3.74 3.31 3.381 1.471-1.502 1.731 1.769c.51-.363.843-.958.843-1.632V8.76zM18.5 9c-.84 0-1.5.66-1.5 1.5s.66 1.5 1.5 1.5 1.5-.66 1.5-1.5S19.34 9 18.5 9z"
+                          fill="#9736E8"
                           fill-rule="evenodd"
                         />
                       </svg>
@@ -1740,14 +1753,23 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         class="c38"
                         fill="none"
                         height="1em"
-                        viewBox="0 0 24 24"
+                        viewBox="0 0 32 24"
                         width="1em"
                         xmlns="http://www.w3.org/2000/svg"
                       >
+                        <rect
+                          fill="#F6ECFC"
+                          height="23"
+                          rx="2.5"
+                          stroke="#E0C1F4"
+                          width="31"
+                          x="0.5"
+                          y="0.5"
+                        />
                         <path
                           clip-rule="evenodd"
-                          d="M6.094 16.62V7.308h11.812v9.312H6.094zM5 6.42a.22.22 0 01.219-.22H18.78c.121 0 .219.098.219.22v11.087a.22.22 0 01-.219.222H5.22A.22.22 0 015 17.507V6.42zm9.426 5.105a1.22 1.22 0 100-2.442 1.22 1.22 0 000 2.442zm-6.599 3.789h8.135a.349.349 0 00.29-.554l-1.122-1.524a.348.348 0 00-.525-.045l-1.153 1.098-2.676-3.634a.349.349 0 00-.573.016l-2.676 4.106a.348.348 0 00.3.537z"
-                          fill="#32324D"
+                          d="M22 8.759a2 2 0 00-2-2h-8c-1.105 0-2 .902-2 2.006v6.068a2 2 0 00.985 1.724l3.66-3.74 3.31 3.381 1.471-1.502 1.731 1.769c.51-.363.843-.958.843-1.632V8.76zM18.5 9c-.84 0-1.5.66-1.5 1.5s.66 1.5 1.5 1.5 1.5-.66 1.5-1.5S19.34 9 18.5 9z"
+                          fill="#9736E8"
                           fill-rule="evenodd"
                         />
                       </svg>
@@ -3373,7 +3395,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           type="button"
                         >
                           <div
-                            class="c63 active"
+                            class="c63 c64 active"
                           >
                             <div
                               class="c59"
@@ -3381,7 +3403,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             >
                               <svg
                                 aria-hidden="true"
-                                class="svg-inline--fa fa-adjust fa-w-16 c64 c65"
+                                class="svg-inline--fa fa-adjust fa-w-16 c65 c66"
                                 data-icon="adjust"
                                 data-prefix="fas"
                                 focusable="false"
@@ -3395,13 +3417,13 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 />
                               </svg>
                               <span
-                                class="c31 c66"
+                                class="c31 c67"
                               >
                                 Compo
                               </span>
                             </div>
                             <div
-                              class="c67 c68"
+                              class="c68 c69"
                               role="button"
                               tabindex="0"
                             >
@@ -3424,7 +3446,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           type="button"
                         >
                           <div
-                            class="c63"
+                            class="c63 c64"
                           >
                             <div
                               class="c59"
@@ -3432,7 +3454,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             >
                               <svg
                                 aria-hidden="true"
-                                class="svg-inline--fa fa-address-book fa-w-14 c64 c65"
+                                class="svg-inline--fa fa-address-book fa-w-14 c65 c66"
                                 data-icon="address-book"
                                 data-prefix="fas"
                                 focusable="false"
@@ -3446,13 +3468,13 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 />
                               </svg>
                               <span
-                                class="c31 c66"
+                                class="c31 c67"
                               >
                                 dish
                               </span>
                             </div>
                             <div
-                              class="c67 c68"
+                              class="c68 c69"
                               role="button"
                               tabindex="0"
                             >
@@ -3475,7 +3497,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           type="button"
                         >
                           <div
-                            class="c63"
+                            class="c63 c64"
                           >
                             <div
                               class="c59"
@@ -3483,7 +3505,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             >
                               <svg
                                 aria-hidden="true"
-                                class="svg-inline--fa fa-calendar fa-w-14 c64 c65"
+                                class="svg-inline--fa fa-calendar fa-w-14 c65 c66"
                                 data-icon="calendar"
                                 data-prefix="fas"
                                 focusable="false"
@@ -3497,13 +3519,13 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 />
                               </svg>
                               <span
-                                class="c31 c66"
+                                class="c31 c67"
                               >
                                 openingtimes
                               </span>
                             </div>
                             <div
-                              class="c67 c68"
+                              class="c68 c69"
                               role="button"
                               tabindex="0"
                             >
@@ -3526,7 +3548,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           type="button"
                         >
                           <div
-                            class="c63"
+                            class="c63 c64"
                           >
                             <div
                               class="c59"
@@ -3534,7 +3556,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             >
                               <svg
                                 aria-hidden="true"
-                                class="svg-inline--fa fa-cannabis fa-w-16 c64 c65"
+                                class="svg-inline--fa fa-cannabis fa-w-16 c65 c66"
                                 data-icon="cannabis"
                                 data-prefix="fas"
                                 focusable="false"
@@ -3548,13 +3570,13 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 />
                               </svg>
                               <span
-                                class="c31 c66"
+                                class="c31 c67"
                               >
                                 restaurantservice
                               </span>
                             </div>
                             <div
-                              class="c67 c68"
+                              class="c68 c69"
                               role="button"
                               tabindex="0"
                             >
@@ -3576,7 +3598,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       </div>
                     </div>
                     <div
-                      class="c69"
+                      class="c70"
                     >
                       <div
                         class=""
@@ -3609,7 +3631,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c46"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c71"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -3734,7 +3756,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c46"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c71"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -3859,7 +3881,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c46"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c71"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -3985,7 +4007,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c71 c72"
+                                        class="c72 c73"
                                       >
                                         <svg
                                           fill="none"
@@ -4048,7 +4070,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c46"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c71"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4173,7 +4195,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c46"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c71"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4298,7 +4320,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c46"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c71"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4423,7 +4445,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c46"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c71"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4445,14 +4467,23 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 class="c38"
                                                 fill="none"
                                                 height="1em"
-                                                viewBox="0 0 24 24"
+                                                viewBox="0 0 32 24"
                                                 width="1em"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
+                                                <rect
+                                                  fill="#F6ECFC"
+                                                  height="23"
+                                                  rx="2.5"
+                                                  stroke="#E0C1F4"
+                                                  width="31"
+                                                  x="0.5"
+                                                  y="0.5"
+                                                />
                                                 <path
                                                   clip-rule="evenodd"
-                                                  d="M6.094 16.62V7.308h11.812v9.312H6.094zM5 6.42a.22.22 0 01.219-.22H18.78c.121 0 .219.098.219.22v11.087a.22.22 0 01-.219.222H5.22A.22.22 0 015 17.507V6.42zm9.426 5.105a1.22 1.22 0 100-2.442 1.22 1.22 0 000 2.442zm-6.599 3.789h8.135a.349.349 0 00.29-.554l-1.122-1.524a.348.348 0 00-.525-.045l-1.153 1.098-2.676-3.634a.349.349 0 00-.573.016l-2.676 4.106a.348.348 0 00.3.537z"
-                                                  fill="#32324D"
+                                                  d="M22 8.759a2 2 0 00-2-2h-8c-1.105 0-2 .902-2 2.006v6.068a2 2 0 00.985 1.724l3.66-3.74 3.31 3.381 1.471-1.502 1.731 1.769c.51-.363.843-.958.843-1.632V8.76zM18.5 9c-.84 0-1.5.66-1.5 1.5s.66 1.5 1.5 1.5 1.5-.66 1.5-1.5S19.34 9 18.5 9z"
+                                                  fill="#9736E8"
                                                   fill-rule="evenodd"
                                                 />
                                               </svg>
@@ -4541,7 +4572,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c46"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c71"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4668,7 +4699,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c46"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c71"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4798,7 +4829,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c71 c72"
+                                        class="c72 c73"
                                       >
                                         <svg
                                           fill="none"
@@ -4861,7 +4892,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c46"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c71"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4986,7 +5017,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c46"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c71"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5111,7 +5142,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c46"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c71"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5654,14 +5685,23 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                             class="c38"
                                                             fill="none"
                                                             height="1em"
-                                                            viewBox="0 0 24 24"
+                                                            viewBox="0 0 32 24"
                                                             width="1em"
                                                             xmlns="http://www.w3.org/2000/svg"
                                                           >
+                                                            <rect
+                                                              fill="#F6ECFC"
+                                                              height="23"
+                                                              rx="2.5"
+                                                              stroke="#E0C1F4"
+                                                              width="31"
+                                                              x="0.5"
+                                                              y="0.5"
+                                                            />
                                                             <path
                                                               clip-rule="evenodd"
-                                                              d="M6.094 16.62V7.308h11.812v9.312H6.094zM5 6.42a.22.22 0 01.219-.22H18.78c.121 0 .219.098.219.22v11.087a.22.22 0 01-.219.222H5.22A.22.22 0 015 17.507V6.42zm9.426 5.105a1.22 1.22 0 100-2.442 1.22 1.22 0 000 2.442zm-6.599 3.789h8.135a.349.349 0 00.29-.554l-1.122-1.524a.348.348 0 00-.525-.045l-1.153 1.098-2.676-3.634a.349.349 0 00-.573.016l-2.676 4.106a.348.348 0 00.3.537z"
-                                                              fill="#32324D"
+                                                              d="M22 8.759a2 2 0 00-2-2h-8c-1.105 0-2 .902-2 2.006v6.068a2 2 0 00.985 1.724l3.66-3.74 3.31 3.381 1.471-1.502 1.731 1.769c.51-.363.843-.958.843-1.632V8.76zM18.5 9c-.84 0-1.5.66-1.5 1.5s.66 1.5 1.5 1.5 1.5-.66 1.5-1.5S19.34 9 18.5 9z"
+                                                              fill="#9736E8"
                                                               fill-rule="evenodd"
                                                             />
                                                           </svg>
@@ -6048,7 +6088,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c71 c72"
+                                        class="c72 c73"
                                       >
                                         <svg
                                           fill="none"
@@ -6111,7 +6151,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c46"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c71"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -6236,7 +6276,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c46"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c71"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -6258,14 +6298,23 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 class="c38"
                                                 fill="none"
                                                 height="1em"
-                                                viewBox="0 0 24 24"
+                                                viewBox="0 0 32 24"
                                                 width="1em"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
+                                                <rect
+                                                  fill="#F6ECFC"
+                                                  height="23"
+                                                  rx="2.5"
+                                                  stroke="#E0C1F4"
+                                                  width="31"
+                                                  x="0.5"
+                                                  y="0.5"
+                                                />
                                                 <path
                                                   clip-rule="evenodd"
-                                                  d="M6.094 16.62V7.308h11.812v9.312H6.094zM5 6.42a.22.22 0 01.219-.22H18.78c.121 0 .219.098.219.22v11.087a.22.22 0 01-.219.222H5.22A.22.22 0 015 17.507V6.42zm9.426 5.105a1.22 1.22 0 100-2.442 1.22 1.22 0 000 2.442zm-6.599 3.789h8.135a.349.349 0 00.29-.554l-1.122-1.524a.348.348 0 00-.525-.045l-1.153 1.098-2.676-3.634a.349.349 0 00-.573.016l-2.676 4.106a.348.348 0 00.3.537z"
-                                                  fill="#32324D"
+                                                  d="M22 8.759a2 2 0 00-2-2h-8c-1.105 0-2 .902-2 2.006v6.068a2 2 0 00.985 1.724l3.66-3.74 3.31 3.381 1.471-1.502 1.731 1.769c.51-.363.843-.958.843-1.632V8.76zM18.5 9c-.84 0-1.5.66-1.5 1.5s.66 1.5 1.5 1.5 1.5-.66 1.5-1.5S19.34 9 18.5 9z"
+                                                  fill="#9736E8"
                                                   fill-rule="evenodd"
                                                 />
                                               </svg>
@@ -6354,7 +6403,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c46"
                                             >
                                               <svg
-                                                class="c70"
+                                                class="c71"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -6480,7 +6529,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c71 c72"
+                                        class="c72 c73"
                                       >
                                         <svg
                                           fill="none"
@@ -6520,17 +6569,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
           </div>
           <div>
             <hr
-              class="c73 c74"
+              class="c74 c75"
             />
             <button
-              class="c75 c76"
+              class="c76 c77"
             >
               <div
-                class="c77"
+                class="c78"
               >
                 <div
                   aria-hidden="true"
-                  class="c78 c79"
+                  class="c79 c80"
                 >
                   <svg
                     fill="none"
@@ -6546,10 +6595,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="c80"
+                  class="c81"
                 >
                   <span
-                    class="c81"
+                    class="c82"
                   >
                     Add another field to this collection type
                   </span>
@@ -6562,7 +6611,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c82"
+    class="c83"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/__snapshots__/index.test.js.snap b/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/__snapshots__/index.test.js.snap
index 097aa7a691..26a0418610 100644
--- a/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/__snapshots__/index.test.js.snap
@@ -172,7 +172,7 @@ exports[`<PaginationURLQuery /> should display the dots correctly 1`] = `
 
 <nav
   aria-label="pagination"
-  class="sc-DJgqy"
+  class="sc-hJxDiT"
 >
   <ul
     class="c0 c1"
@@ -546,7 +546,7 @@ exports[`<PaginationURLQuery /> should work when the pageCount is inferior or eq
 
 <nav
   aria-label="pagination"
-  class="sc-DJgqy"
+  class="sc-hJxDiT"
 >
   <ul
     class="c0 c1"
diff --git a/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/index.test.js b/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/index.test.js
index 9f7987ebff..b11af9bb22 100644
--- a/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/index.test.js
+++ b/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/index.test.js
@@ -190,7 +190,7 @@ describe('<PaginationURLQuery />', () => {
 
       <nav
         aria-label="pagination"
-        class="sc-DJgqy"
+        class="sc-hJxDiT"
       >
         <ul
           class="c0 c1"
diff --git a/packages/core/helper-plugin/package.json b/packages/core/helper-plugin/package.json
index 84b6d88219..e42018d91d 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.53",
-    "@strapi/design-system": "0.0.1-alpha.53",
+    "@strapi/icons": "0.0.1-alpha.54",
+    "@strapi/design-system": "0.0.1-alpha.54",
     "babel-loader": "^8.2.2",
     "cross-env": "^7.0.3",
     "date-fns": "2.22.1",
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
index 117c9f208c..b9ae3fe807 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
@@ -106,7 +106,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c45 .sc-lhuRmv {
+.c45 .sc-hmftZk {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -178,7 +178,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c48 .sc-lhuRmv {
+.c48 .sc-hmftZk {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -260,7 +260,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #4945ff;
 }
 
-.c49 .sc-lhuRmv {
+.c49 .sc-hmftZk {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/tests/index.test.js b/packages/core/upload/admin/src/components/EditAssetDialog/tests/index.test.js
index b8afef681d..1715998b7b 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/index.test.js
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/index.test.js
@@ -229,7 +229,7 @@ describe('<EditAssetDialog />', () => {
         background: #ffffff;
       }
 
-      .c45 .sc-lhuRmv {
+      .c45 .sc-hmftZk {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -301,7 +301,7 @@ describe('<EditAssetDialog />', () => {
         background: #f0f0ff;
       }
 
-      .c48 .sc-lhuRmv {
+      .c48 .sc-hmftZk {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -383,7 +383,7 @@ describe('<EditAssetDialog />', () => {
         background: #4945ff;
       }
 
-      .c49 .sc-lhuRmv {
+      .c49 .sc-hmftZk {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.js b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.js
index 8797ca5617..9c2e92b96e 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.js
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.js
@@ -235,7 +235,7 @@ describe('FromComputerForm', () => {
         background: #4945ff;
       }
 
-      .c13 .sc-dYzmtA {
+      .c13 .sc-hxqEdz {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -300,7 +300,7 @@ describe('FromComputerForm', () => {
         background: #ffffff;
       }
 
-      .c21 .sc-dYzmtA {
+      .c21 .sc-hxqEdz {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.js b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.js
index a0eb74f966..daf1d7d25c 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.js
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.js
@@ -349,7 +349,7 @@ describe('PendingAssetStep', () => {
         background: #4945ff;
       }
 
-      .c15 .sc-fFYUIl {
+      .c15 .sc-dYzmtA {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -414,7 +414,7 @@ describe('PendingAssetStep', () => {
         background: #ffffff;
       }
 
-      .c49 .sc-fFYUIl {
+      .c49 .sc-dYzmtA {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap b/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap
index 466d800f9a..f7222fa054 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap
@@ -385,7 +385,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   background: #4945ff;
 }
 
-.c35 .sc-iLcRtq {
+.c35 .sc-jnHPDa {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -450,7 +450,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   background: #ffffff;
 }
 
-.c41 .sc-iLcRtq {
+.c41 .sc-jnHPDa {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1317,7 +1317,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   background: #4945ff;
 }
 
-.c36 .sc-iLcRtq {
+.c36 .sc-jnHPDa {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1382,7 +1382,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   background: #ffffff;
 }
 
-.c33 .sc-iLcRtq {
+.c33 .sc-jnHPDa {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
index abae99e916..0ce4400eea 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
@@ -612,7 +612,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         padding-left: 32px;
       }
 
-      .c54 {
+      .c60 {
         background: #eaeaef;
         padding-top: 24px;
         padding-right: 32px;
@@ -640,99 +640,62 @@ describe('Admin | containers | RoleCreatePage', () => {
         grid-column: span 7;
       }
 
-      .c53 {
+      .c59 {
         grid-column: span 5;
       }
 
-      .c47 {
+      .c52 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
         color: #4a4a6a;
       }
 
-      .c49 {
+      .c50 {
+        font-weight: 400;
+        font-size: 0.75rem;
+        line-height: 1.33;
+        color: #4945ff;
+      }
+
+      .c53 {
         font-weight: 400;
         font-size: 0.875rem;
         line-height: 1.43;
         color: #666687;
       }
 
-      .c40 {
+      .c39 {
         border-radius: 4px;
       }
 
       .c42 {
-        background: #f6f6f9;
-        padding: 24px;
-        border-radius: 4px;
+        background: #ffffff;
+        padding-right: 24px;
+        padding-left: 24px;
       }
 
       .c45 {
-        padding-right: 24px;
+        -webkit-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
       }
 
-      .c51 {
+      .c55 {
         background: #dcdce4;
-      }
-
-      .c52 {
-        height: 2rem;
-        width: 2rem;
         border-radius: 50%;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
+        cursor: pointer;
+        width: 2rem;
+        height: 2rem;
+        cursor: pointer;
       }
 
-      .c52 svg {
-        height: 0.375rem;
+      .c57 {
+        color: #666687;
         width: 0.6875rem;
       }
 
-      .c52 svg path {
-        fill: #666687;
-      }
-
-      .c41 {
-        border: 1px solid transparent;
-        overflow: hidden;
-      }
-
-      .c41:hover {
-        border: 1px solid #4945ff;
-      }
-
-      .c41:hover .c46 {
-        color: #271fe0;
-      }
-
-      .c41:hover .c48 {
-        color: #4945ff;
-      }
-
-      .c41:hover > .c39 {
-        background: #f0f0ff;
-      }
-
-      .c41:hover .c50 {
-        background: #d9d8ff;
-      }
-
-      .c41:hover .c50 svg path {
-        fill: #4945ff;
-      }
-
-      .c44 {
+      .c43 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -750,13 +713,152 @@ describe('Admin | containers | RoleCreatePage', () => {
         align-items: center;
       }
 
-      .c43 {
-        border: none;
+      .c46 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c56 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c40 {
+        border: 1px solid #ffffff;
+        overflow: hidden;
+      }
+
+      .c40:hover:not([aria-disabled='true']) {
+        border: 1px solid #4945ff;
+      }
+
+      .c40:hover:not([aria-disabled='true']) .c51 {
+        color: #271fe0;
+      }
+
+      .c40:hover:not([aria-disabled='true']) .c49 {
+        color: #4945ff;
+      }
+
+      .c40:hover:not([aria-disabled='true']) > .c41 {
+        background: #f0f0ff;
+      }
+
+      .c40:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
+        background: #d9d8ff;
+      }
+
+      .c40:hover:not([aria-disabled='true']) svg path {
+        fill: #4945ff;
+      }
+
+      .c47 {
         background: transparent;
-        display: block;
-        width: 100%;
-        text-align: unset;
-        padding: 0;
+        border: none;
+        position: relative;
+        outline: none;
+      }
+
+      .c47[aria-disabled='true'] {
+        pointer-events: none;
+      }
+
+      .c47[aria-disabled='true'] svg path {
+        fill: #666687;
+      }
+
+      .c47 svg {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        font-size: 0.625rem;
+      }
+
+      .c47 svg path {
+        fill: #4945ff;
+      }
+
+      .c47:after {
+        -webkit-transition-property: all;
+        transition-property: all;
+        -webkit-transition-duration: 0.2s;
+        transition-duration: 0.2s;
+        border-radius: 8px;
+        content: '';
+        position: absolute;
+        top: -4px;
+        bottom: -4px;
+        left: -4px;
+        right: -4px;
+        border: 2px solid transparent;
+      }
+
+      .c47:focus-visible {
+        outline: none;
+      }
+
+      .c47:focus-visible:after {
+        border-radius: 8px;
+        content: '';
+        position: absolute;
+        top: -5px;
+        bottom: -5px;
+        left: -5px;
+        right: -5px;
+        border: 2px solid #4945ff;
+      }
+
+      .c54 > * {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .c54 > * + * {
+        margin-left: 12px;
+      }
+
+      .c58 path {
+        fill: #666687;
+      }
+
+      .c48 {
+        text-align: left;
+      }
+
+      .c48 svg {
+        width: 0.875rem;
+        height: 0.875rem;
+      }
+
+      .c48 svg path {
+        fill: #8e8ea9;
+      }
+
+      .c44 {
+        height: 5.5rem;
       }
 
       @media (max-width:68.75rem) {
@@ -784,13 +886,13 @@ describe('Admin | containers | RoleCreatePage', () => {
       }
 
       @media (max-width:68.75rem) {
-        .c53 {
+        .c59 {
           grid-column: span;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c53 {
+        .c59 {
           grid-column: span;
         }
       }
@@ -987,69 +1089,78 @@ describe('Admin | containers | RoleCreatePage', () => {
                         </p>
                       </div>
                       <div
-                        class="c39 c40 c41"
+                        aria-disabled="false"
+                        class="c39 c40"
+                        data-strapi-expanded="false"
                       >
                         <div
-                          class="c39 c42"
+                          class="c41 c42 c43 c44"
+                          cursor=""
                         >
                           <button
                             aria-controls="accordion-content-accordion-1"
+                            aria-disabled="false"
                             aria-expanded="false"
                             aria-labelledby="accordion-label-accordion-1"
-                            class="c43"
+                            class="c41 c45 c46 c47 c48"
                             data-strapi-accordion-toggle="true"
                             type="button"
                           >
-                            <div
-                              class="c39 c44"
+                            <span
+                              class="c49 c50"
                             >
-                              <div
-                                class="c39 c45"
-                              >
-                                <span
-                                  class="c46 c47"
-                                  id="accordion-label-accordion-1"
-                                >
-                                  Address
-                                </span>
-                                <p
-                                  class="c48 c49"
-                                  id="accordion-desc-accordion-1"
-                                >
-                                  Define all allowed actions for the api::address plugin.
-                                </p>
-                              </div>
                               <span
-                                aria-hidden="true"
-                                class="c39 c50 c51 c52"
+                                class="c51 c52"
+                                id="accordion-label-accordion-1"
                               >
-                                <svg
-                                  fill="none"
-                                  height="1em"
-                                  viewBox="0 0 14 8"
-                                  width="1em"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    clip-rule="evenodd"
-                                    d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
-                                    fill="#32324D"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
+                                Address
                               </span>
-                            </div>
+                              <p
+                                class="c49 c53"
+                                id="accordion-desc-accordion-1"
+                              >
+                                Define all allowed actions for the api::address plugin.
+                              </p>
+                            </span>
                           </button>
+                          <div
+                            class="c41 c46 c54"
+                          >
+                            <span
+                              aria-hidden="true"
+                              class="c41 c55 c56"
+                              cursor="pointer"
+                              data-strapi-dropdown="true"
+                              height="2rem"
+                              width="2rem"
+                            >
+                              <svg
+                                class="c57 c58"
+                                fill="none"
+                                height="1em"
+                                viewBox="0 0 14 8"
+                                width="0.6875rem"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  clip-rule="evenodd"
+                                  d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
+                                  fill="#32324D"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div
-                  class="c53"
+                  class="c59"
                 >
                   <div
-                    class="c54"
+                    class="c60"
                     style="min-height: 100%;"
                   >
                     <div
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
index d72eecd073..4255641b7d 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
@@ -695,7 +695,7 @@ describe('Admin | containers | RoleEditPage', () => {
         padding-left: 32px;
       }
 
-      .c61 {
+      .c67 {
         background: #eaeaef;
         padding-top: 24px;
         padding-right: 32px;
@@ -723,99 +723,62 @@ describe('Admin | containers | RoleEditPage', () => {
         grid-column: span 7;
       }
 
-      .c60 {
+      .c66 {
         grid-column: span 5;
       }
 
-      .c54 {
+      .c59 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
         color: #4a4a6a;
       }
 
-      .c56 {
+      .c57 {
+        font-weight: 400;
+        font-size: 0.75rem;
+        line-height: 1.33;
+        color: #4945ff;
+      }
+
+      .c60 {
         font-weight: 400;
         font-size: 0.875rem;
         line-height: 1.43;
         color: #666687;
       }
 
-      .c47 {
+      .c46 {
         border-radius: 4px;
       }
 
       .c49 {
-        background: #f6f6f9;
-        padding: 24px;
-        border-radius: 4px;
+        background: #ffffff;
+        padding-right: 24px;
+        padding-left: 24px;
       }
 
       .c52 {
-        padding-right: 24px;
+        -webkit-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
       }
 
-      .c58 {
+      .c62 {
         background: #dcdce4;
-      }
-
-      .c59 {
-        height: 2rem;
-        width: 2rem;
         border-radius: 50%;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
+        cursor: pointer;
+        width: 2rem;
+        height: 2rem;
+        cursor: pointer;
       }
 
-      .c59 svg {
-        height: 0.375rem;
+      .c64 {
+        color: #666687;
         width: 0.6875rem;
       }
 
-      .c59 svg path {
-        fill: #666687;
-      }
-
-      .c48 {
-        border: 1px solid transparent;
-        overflow: hidden;
-      }
-
-      .c48:hover {
-        border: 1px solid #4945ff;
-      }
-
-      .c48:hover .c53 {
-        color: #271fe0;
-      }
-
-      .c48:hover .c55 {
-        color: #4945ff;
-      }
-
-      .c48:hover > .c46 {
-        background: #f0f0ff;
-      }
-
-      .c48:hover .c57 {
-        background: #d9d8ff;
-      }
-
-      .c48:hover .c57 svg path {
-        fill: #4945ff;
-      }
-
-      .c51 {
+      .c50 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -833,13 +796,152 @@ describe('Admin | containers | RoleEditPage', () => {
         align-items: center;
       }
 
-      .c50 {
-        border: none;
+      .c53 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c63 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c47 {
+        border: 1px solid #ffffff;
+        overflow: hidden;
+      }
+
+      .c47:hover:not([aria-disabled='true']) {
+        border: 1px solid #4945ff;
+      }
+
+      .c47:hover:not([aria-disabled='true']) .c58 {
+        color: #271fe0;
+      }
+
+      .c47:hover:not([aria-disabled='true']) .c56 {
+        color: #4945ff;
+      }
+
+      .c47:hover:not([aria-disabled='true']) > .c48 {
+        background: #f0f0ff;
+      }
+
+      .c47:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
+        background: #d9d8ff;
+      }
+
+      .c47:hover:not([aria-disabled='true']) svg path {
+        fill: #4945ff;
+      }
+
+      .c54 {
         background: transparent;
-        display: block;
-        width: 100%;
-        text-align: unset;
-        padding: 0;
+        border: none;
+        position: relative;
+        outline: none;
+      }
+
+      .c54[aria-disabled='true'] {
+        pointer-events: none;
+      }
+
+      .c54[aria-disabled='true'] svg path {
+        fill: #666687;
+      }
+
+      .c54 svg {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        font-size: 0.625rem;
+      }
+
+      .c54 svg path {
+        fill: #4945ff;
+      }
+
+      .c54:after {
+        -webkit-transition-property: all;
+        transition-property: all;
+        -webkit-transition-duration: 0.2s;
+        transition-duration: 0.2s;
+        border-radius: 8px;
+        content: '';
+        position: absolute;
+        top: -4px;
+        bottom: -4px;
+        left: -4px;
+        right: -4px;
+        border: 2px solid transparent;
+      }
+
+      .c54:focus-visible {
+        outline: none;
+      }
+
+      .c54:focus-visible:after {
+        border-radius: 8px;
+        content: '';
+        position: absolute;
+        top: -5px;
+        bottom: -5px;
+        left: -5px;
+        right: -5px;
+        border: 2px solid #4945ff;
+      }
+
+      .c61 > * {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .c61 > * + * {
+        margin-left: 12px;
+      }
+
+      .c65 path {
+        fill: #666687;
+      }
+
+      .c55 {
+        text-align: left;
+      }
+
+      .c55 svg {
+        width: 0.875rem;
+        height: 0.875rem;
+      }
+
+      .c55 svg path {
+        fill: #8e8ea9;
+      }
+
+      .c51 {
+        height: 5.5rem;
       }
 
       @media (max-width:68.75rem) {
@@ -867,13 +969,13 @@ describe('Admin | containers | RoleEditPage', () => {
       }
 
       @media (max-width:68.75rem) {
-        .c60 {
+        .c66 {
           grid-column: span;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c60 {
+        .c66 {
           grid-column: span;
         }
       }
@@ -1104,69 +1206,78 @@ describe('Admin | containers | RoleEditPage', () => {
                         </p>
                       </div>
                       <div
-                        class="c46 c47 c48"
+                        aria-disabled="false"
+                        class="c46 c47"
+                        data-strapi-expanded="false"
                       >
                         <div
-                          class="c46 c49"
+                          class="c48 c49 c50 c51"
+                          cursor=""
                         >
                           <button
                             aria-controls="accordion-content-accordion-1"
+                            aria-disabled="false"
                             aria-expanded="false"
                             aria-labelledby="accordion-label-accordion-1"
-                            class="c50"
+                            class="c48 c52 c53 c54 c55"
                             data-strapi-accordion-toggle="true"
                             type="button"
                           >
-                            <div
-                              class="c46 c51"
+                            <span
+                              class="c56 c57"
                             >
-                              <div
-                                class="c46 c52"
-                              >
-                                <span
-                                  class="c53 c54"
-                                  id="accordion-label-accordion-1"
-                                >
-                                  Address
-                                </span>
-                                <p
-                                  class="c55 c56"
-                                  id="accordion-desc-accordion-1"
-                                >
-                                  Define all allowed actions for the api::address plugin.
-                                </p>
-                              </div>
                               <span
-                                aria-hidden="true"
-                                class="c46 c57 c58 c59"
+                                class="c58 c59"
+                                id="accordion-label-accordion-1"
                               >
-                                <svg
-                                  fill="none"
-                                  height="1em"
-                                  viewBox="0 0 14 8"
-                                  width="1em"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    clip-rule="evenodd"
-                                    d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
-                                    fill="#32324D"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
+                                Address
                               </span>
-                            </div>
+                              <p
+                                class="c56 c60"
+                                id="accordion-desc-accordion-1"
+                              >
+                                Define all allowed actions for the api::address plugin.
+                              </p>
+                            </span>
                           </button>
+                          <div
+                            class="c48 c53 c61"
+                          >
+                            <span
+                              aria-hidden="true"
+                              class="c48 c62 c63"
+                              cursor="pointer"
+                              data-strapi-dropdown="true"
+                              height="2rem"
+                              width="2rem"
+                            >
+                              <svg
+                                class="c64 c65"
+                                fill="none"
+                                height="1em"
+                                viewBox="0 0 14 8"
+                                width="0.6875rem"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  clip-rule="evenodd"
+                                  d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
+                                  fill="#32324D"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div
-                  class="c60"
+                  class="c66"
                 >
                   <div
-                    class="c61"
+                    class="c67"
                     style="min-height: 100%;"
                   >
                     <div
diff --git a/yarn.lock b/yarn.lock
index f3317510bd..d2a968315f 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.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==
+"@strapi/design-system@0.0.1-alpha.54":
+  version "0.0.1-alpha.54"
+  resolved "https://registry.yarnpkg.com/@strapi/design-system/-/design-system-0.0.1-alpha.54.tgz#eade14ae5b8c308ac7685f09fdbfae89e62de3fe"
+  integrity sha512-pcTm4wIf+5z4A2+7SoO7J0h6KlKbybEXO67/4702LXRJemLqzJQtE0Y/TfACmeL5p5xs+G0CIlJ7oX80V4HhVQ==
   dependencies:
     "@internationalized/number" "^3.0.2"
     compute-scroll-into-view "^1.0.17"
     prop-types "^15.7.2"
 
-"@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==
+"@strapi/icons@0.0.1-alpha.54":
+  version "0.0.1-alpha.54"
+  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-0.0.1-alpha.54.tgz#ada430e086237133f69282967797ee797452e5f9"
+  integrity sha512-sJhABYXdOtJrJIewi3iBpDU5mK7GD2/YY+4lUe7EdyVSbUgudGKcZljs2424+rIiKufQoz1L4xqYz0BEpbT06A==
 
 "@stylelint/postcss-css-in-js@^0.37.2":
   version "0.37.2"