Merge pull request #17169 from strapi/chore/update-ds-181

2025-12-27 15:13:21 +00:00 · 2023-07-03 16:22:54 +01:00 · 2023-07-03 16:22:54 +01:00 · 2f67950deb
commit 2f67950deb
parent 8c7ea46ccf d301b8a7ad
51 changed files with 572 additions and 599 deletions
--- a/examples/getstarted/package.json
+++ b/examples/getstarted/package.json
@ -12,7 +12,7 @@
    "strapi": "strapi"
  },
  "dependencies": {
-    "@strapi/icons": "1.8.0",
+    "@strapi/icons": "1.8.1",
    "@strapi/plugin-color-picker": "4.11.3",
    "@strapi/plugin-documentation": "4.11.3",
    "@strapi/plugin-graphql": "4.11.3",
--- a/packages/core/admin/admin/src/components/GuidedTour/Homepage/tests/index.test.js
+++ b/packages/core/admin/admin/src/components/GuidedTour/Homepage/tests/index.test.js
@ -83,7 +83,6 @@ describe('GuidedTour Homepage', () => {
        font-size: 0.75rem;
        line-height: 1.33;
        font-weight: 600;
-        line-height: 0;
        color: #ffffff;
      }

--- a/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js
+++ b/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js
@ -93,7 +93,6 @@ describe('<GuidedTourModal />', () => {
        font-size: 0.75rem;
        line-height: 1.33;
        font-weight: 600;
-        line-height: 0;
        color: #ffffff;
      }

--- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/snapshots/index.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/snapshots/index.test.js.snap
@ -24,7 +24,6 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

@ -1573,7 +1572,6 @@ exports[`EditSettingsView should add field 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js
@ -67,7 +67,6 @@ describe('CONTENT MANAGER | EditView | Header', () => {
        font-size: 0.75rem;
        line-height: 1.33;
        font-weight: 600;
-        line-height: 0;
        color: #ffffff;
      }

--- 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
@ -24,7 +24,6 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

@ -1679,7 +1678,6 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/admin/admin/src/content-manager/pages/ListView/components/CellContent/RelationMultiple/tests/snapshots/index.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/pages/ListView/components/CellContent/RelationMultiple/tests/snapshots/index.test.js.snap
@ -17,7 +17,6 @@ exports[`DynamicTable / Cellcontent / RelationMultiple renders and matches the s
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js
@ -77,7 +77,6 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
        font-size: 0.75rem;
        line-height: 1.33;
        font-weight: 600;
-        line-height: 0;
        color: #ffffff;
      }

--- a/packages/core/admin/admin/src/pages/AuthPage/components/Oops/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Oops/tests/index.test.js
@ -37,7 +37,6 @@ describe('ADMIN | PAGES | AUTH | Oops', () => {
        font-size: 0.75rem;
        line-height: 1.33;
        font-weight: 600;
-        line-height: 0;
        color: #ffffff;
      }

--- a/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js
@ -54,7 +54,6 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
        font-size: 0.75rem;
        line-height: 1.33;
        font-weight: 600;
-        line-height: 0;
        color: #ffffff;
      }

--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/snapshots/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/snapshots/index.test.js.snap
@ -63,7 +63,6 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/snapshots/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/snapshots/index.test.js.snap
@ -67,15 +67,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
  color: #32324d;
 }

-.c52 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  font-weight: 600;
-  line-height: 0;
-  color: #ffffff;
-}
-
-.c54 {
+.c53 {
  font-size: 0.75rem;
  line-height: 1.33;
  color: #666687;
@ -220,7 +212,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
  cursor: pointer;
 }

-.c53 {
+.c52 {
  padding-top: 24px;
 }

@ -459,57 +451,57 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
  fill: #ffffff;
 }

-.c56 {
+.c55 {
  height: 2rem;
  border: 1px solid #dcdce4;
  background: #ffffff;
 }

-.c56 svg {
+.c55 svg {
  height: 0.75rem;
  width: auto;
 }

-.c56[aria-disabled='true'] {
+.c55[aria-disabled='true'] {
  border: 1px solid #dcdce4;
  background: #eaeaef;
 }

-.c56[aria-disabled='true'] .c1 {
+.c55[aria-disabled='true'] .c1 {
  color: #666687;
 }

-.c56[aria-disabled='true'] svg > g,.c56[aria-disabled='true'] svg path {
+.c55[aria-disabled='true'] svg > g,.c55[aria-disabled='true'] svg path {
  fill: #666687;
 }

-.c56[aria-disabled='true']:active {
+.c55[aria-disabled='true']:active {
  border: 1px solid #dcdce4;
  background: #eaeaef;
 }

-.c56[aria-disabled='true']:active .c1 {
+.c55[aria-disabled='true']:active .c1 {
  color: #666687;
 }

-.c56[aria-disabled='true']:active svg > g,.c56[aria-disabled='true']:active svg path {
+.c55[aria-disabled='true']:active svg > g,.c55[aria-disabled='true']:active svg path {
  fill: #666687;
 }

-.c56:hover {
+.c55:hover {
  background-color: #f6f6f9;
 }

-.c56:active {
+.c55:active {
  background-color: #eaeaef;
 }

-.c56 .c1 {
+.c55 .c1 {
  color: #32324d;
 }

-.c56 svg > g,
-.c56 svg path {
+.c55 svg > g,
+.c55 svg path {
  fill: #32324d;
 }

@ -576,7 +568,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
  border-bottom: 1px solid #eaeaef;
 }

-.c55 {
+.c54 {
  border-radius: 0 0 4px 4px;
  border-top: 1px solid #eaeaef;
 }
@ -929,16 +921,16 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                                type="button"
                              >
                                <span
-                                  class="c1 c52"
+                                  class="c1 c23"
                                >
                                  Browse files
                                </span>
                              </button>
                              <div
-                                class="c53"
+                                class="c52"
                              >
                                <span
-                                  class="c1 c54"
+                                  class="c1 c53"
                                >
                                  Max dimension: 750x750, Max size: 100KB
                                </span>
@ -950,7 +942,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                    </div>
                  </form>
                  <div
-                    class="c27 c55"
+                    class="c27 c54"
                  >
                    <div
                      class="c29"
@ -960,11 +952,11 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
                      >
                        <button
                          aria-disabled="false"
-                          class="c49 c50 c16 c56"
+                          class="c49 c50 c16 c55"
                          type="button"
                        >
                          <span
-                            class="c1 c52"
+                            class="c1 c23"
                          >
                            Cancel
                          </span>
@ -1046,14 +1038,6 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
  color: #666687;
 }

-.c47 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  font-weight: 600;
-  line-height: 0;
-  color: #ffffff;
-}
-
 .c4 {
  background: #f6f6f9;
  padding: 8px;
@ -1319,53 +1303,53 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
  border: 2px solid #4945ff;
 }

-.c48 {
+.c47 {
  height: 2rem;
 }

-.c48 svg {
+.c47 svg {
  height: 0.75rem;
  width: auto;
 }

-.c48[aria-disabled='true'] {
+.c47[aria-disabled='true'] {
  border: 1px solid #dcdce4;
  background: #eaeaef;
 }

-.c48[aria-disabled='true'] .c1 {
+.c47[aria-disabled='true'] .c1 {
  color: #666687;
 }

-.c48[aria-disabled='true'] svg > g,.c48[aria-disabled='true'] svg path {
+.c47[aria-disabled='true'] svg > g,.c47[aria-disabled='true'] svg path {
  fill: #666687;
 }

-.c48[aria-disabled='true']:active {
+.c47[aria-disabled='true']:active {
  border: 1px solid #dcdce4;
  background: #eaeaef;
 }

-.c48[aria-disabled='true']:active .c1 {
+.c47[aria-disabled='true']:active .c1 {
  color: #666687;
 }

-.c48[aria-disabled='true']:active svg > g,.c48[aria-disabled='true']:active svg path {
+.c47[aria-disabled='true']:active svg > g,.c47[aria-disabled='true']:active svg path {
  fill: #666687;
 }

-.c48:hover {
+.c47:hover {
  border: 1px solid #7b79ff;
  background: #7b79ff;
 }

-.c48:active {
+.c47:active {
  border: 1px solid #4945ff;
  background: #4945ff;
 }

-.c48 svg > g,
-.c48 svg path {
+.c47 svg > g,
+.c47 svg path {
  fill: #ffffff;
 }

@ -1881,7 +1865,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                            type="button"
                          >
                            <span
-                              class="c1 c47"
+                              class="c1 c23"
                            >
                              Cancel
                            </span>
@ -1892,11 +1876,11 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
                        >
                          <button
                            aria-disabled="false"
-                            class="c45 c44 c16 c48"
+                            class="c45 c44 c16 c47"
                            type="submit"
                          >
                            <span
-                              class="c1 c47"
+                              class="c1 c23"
                            >
                              Next
                            </span>
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/tests/snapshots/AddLogoDialog.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/tests/snapshots/AddLogoDialog.test.js.snap
@ -40,7 +40,6 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

@ -599,7 +598,6 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/tests/snapshots/PendingLogoDialog.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/tests/snapshots/PendingLogoDialog.test.js.snap
@ -30,7 +30,6 @@ exports[`ApplicationInfosPage | PendingLogoDialog should render and match snapsh
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/CreatePage/tests/snapshots/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/CreatePage/tests/snapshots/index.test.js.snap
@ -24,7 +24,6 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
  font-size: 0.875rem;
  line-height: 1.43;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/snapshots/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/snapshots/index.test.js.snap
@ -24,7 +24,6 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
  font-size: 0.875rem;
  line-height: 1.43;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

@ -51,7 +50,6 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js
@ -64,7 +64,6 @@ describe('Admin | UseCasePage', () => {
        font-size: 0.75rem;
        line-height: 1.33;
        font-weight: 600;
-        line-height: 0;
        color: #ffffff;
      }

@ -96,7 +95,6 @@ describe('Admin | UseCasePage', () => {
        font-size: 0.875rem;
        line-height: 1.43;
        font-weight: 600;
-        line-height: 0;
        color: #ffffff;
      }

--- a/packages/core/admin/package.json
+++ b/packages/core/admin/package.json
@ -50,9 +50,9 @@
    "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
    "@strapi/babel-plugin-switch-ee-ce": "4.11.3",
    "@strapi/data-transfer": "4.11.3",
-    "@strapi/design-system": "1.8.0",
+    "@strapi/design-system": "1.8.1",
    "@strapi/helper-plugin": "4.11.3",
-    "@strapi/icons": "1.8.0",
+    "@strapi/icons": "1.8.1",
    "@strapi/permissions": "4.11.3",
    "@strapi/provider-audit-logs-local": "4.11.3",
    "@strapi/typescript-utils": "4.11.3",
--- 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
@ -24,7 +24,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/content-type-builder/package.json
+++ b/packages/core/content-type-builder/package.json
@ -30,10 +30,10 @@
  },
  "dependencies": {
    "@sindresorhus/slugify": "1.1.0",
-    "@strapi/design-system": "1.8.0",
+    "@strapi/design-system": "1.8.1",
    "@strapi/generators": "4.11.3",
    "@strapi/helper-plugin": "4.11.3",
-    "@strapi/icons": "1.8.0",
+    "@strapi/icons": "1.8.1",
    "@strapi/utils": "4.11.3",
    "fs-extra": "10.0.0",
    "immer": "9.0.19",
--- a/packages/core/email/admin/src/pages/Settings/tests/index.test.js
+++ b/packages/core/email/admin/src/pages/Settings/tests/index.test.js
@ -96,7 +96,6 @@ describe('Email | Pages | Settings', () => {
        font-size: 0.75rem;
        line-height: 1.33;
        font-weight: 600;
-        line-height: 0;
        color: #ffffff;
      }

--- a/packages/core/email/package.json
+++ b/packages/core/email/package.json
@ -27,8 +27,8 @@
    "lint": "run -T eslint ."
  },
  "dependencies": {
-    "@strapi/design-system": "1.8.0",
-    "@strapi/icons": "1.8.0",
+    "@strapi/design-system": "1.8.1",
+    "@strapi/icons": "1.8.1",
    "@strapi/provider-email-sendmail": "4.11.3",
    "@strapi/utils": "4.11.3",
    "lodash": "4.17.21",
--- a/packages/core/helper-plugin/package.json
+++ b/packages/core/helper-plugin/package.json
@ -63,8 +63,8 @@
    "@storybook/builder-webpack5": "6.5.15",
    "@storybook/manager-webpack5": "6.5.15",
    "@storybook/react": "^6.5.16",
-    "@strapi/design-system": "1.8.0",
-    "@strapi/icons": "1.8.0",
+    "@strapi/design-system": "1.8.1",
+    "@strapi/icons": "1.8.1",
    "@testing-library/react": "14.0.0",
    "@testing-library/user-event": "14.4.3",
    "browserslist-to-esbuild": "1.2.0",
@ -82,8 +82,8 @@
    "webpack-cli": "^5.1.0"
  },
  "peerDependencies": {
-    "@strapi/design-system": "1.8.0",
-    "@strapi/icons": "1.8.0",
+    "@strapi/design-system": "1.8.1",
+    "@strapi/icons": "1.8.1",
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0",
    "react-router-dom": "^5.3.4",
--- a/packages/core/helper-plugin/src/components/DateTimePicker/tests/snapshots/index.test.js.snap
+++ b/packages/core/helper-plugin/src/components/DateTimePicker/tests/snapshots/index.test.js.snap
@ -313,7 +313,7 @@ exports[`DateTimePicker snapshots the component 1`] = `
          data-state="closed"
          id=":r2:"
          inputmode="numeric"
-          pattern="\\d{2}/\\d{2}/\\d{4}"
+          pattern="\\d2/\\d2/\\d4"
          placeholder="DD/MM/YYYY"
          role="combobox"
          type="text"
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/snapshots/index.test.js.snap
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/snapshots/index.test.js.snap
@ -17,7 +17,6 @@ exports[`BrowseStep renders and match snapshot 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/upload/admin/src/components/Breadcrumbs/tests/snapshots/index.test.js.snap
+++ b/packages/core/upload/admin/src/components/Breadcrumbs/tests/snapshots/index.test.js.snap
@ -48,7 +48,6 @@ exports[`Media Library | Breadcrumbs should render and match snapshot 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

@ -227,7 +226,8 @@ exports[`Media Library | Breadcrumbs should render and match snapshot 1`] = `
 }

 .c11 {
-  padding: 4px 12px;
+  padding: 4px 8px;
+  height: unset;
 }

 .c11:hover,
@ -286,26 +286,6 @@ exports[`Media Library | Breadcrumbs should render and match snapshot 1`] = `
            >
              ...
            </span>
-            <div
-              aria-hidden="true"
-              class="c0"
-            >
-              <svg
-                aria-hidden="true"
-                fill="none"
-                height="0.25rem"
-                viewBox="0 0 14 8"
-                width="0.375rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M14 .889a.86.86 0 0 1-.26.625L7.615 7.736A.834.834 0 0 1 7 8a.834.834 0 0 1-.615-.264L.26 1.514A.861.861 0 0 1 0 .889c0-.24.087-.45.26-.625A.834.834 0 0 1 .875 0h12.25c.237 0 .442.088.615.264a.86.86 0 0 1 .26.625Z"
-                  fill="#32324D"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </div>
          </span>
        </button>
        <div
--- a/packages/core/upload/admin/src/components/BulkMoveDialog/tests/snapshots/BulkMoveDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/BulkMoveDialog/tests/snapshots/BulkMoveDialog.test.js.snap
@ -31,7 +31,6 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/snapshots/EditAssetDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/snapshots/EditAssetDialog.test.js.snap
@ -54,14 +54,6 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
  color: #666687;
 }

-.c47 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  font-weight: 600;
-  line-height: 0;
-  color: #ffffff;
-}
-
 .c0 {
  margin-left: -250px;
  position: fixed;
@ -388,12 +380,74 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
  fill: #32324d;
 }

-.c48 {
+.c47 {
  height: 2rem;
  border: 1px solid #d9d8ff;
  background: #f0f0ff;
 }

+.c47 svg {
+  height: 0.75rem;
+  width: auto;
+}
+
+.c47[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c47[aria-disabled='true'] .c5 {
+  color: #666687;
+}
+
+.c47[aria-disabled='true'] svg > g,.c47[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c47[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c47[aria-disabled='true']:active .c5 {
+  color: #666687;
+}
+
+.c47[aria-disabled='true']:active svg > g,.c47[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c47:hover {
+  background-color: #ffffff;
+}
+
+.c47:active {
+  background-color: #ffffff;
+  border: 1px solid #4945ff;
+}
+
+.c47:active .c5 {
+  color: #4945ff;
+}
+
+.c47:active svg > g,
+.c47:active svg path {
+  fill: #4945ff;
+}
+
+.c47 .c5 {
+  color: #271fe0;
+}
+
+.c47 svg > g,
+.c47 svg path {
+  fill: #271fe0;
+}
+
+.c48 {
+  height: 2rem;
+}
+
 .c48 svg {
  height: 0.75rem;
  width: auto;
@ -426,79 +480,17 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
 }

 .c48:hover {
-  background-color: #ffffff;
-}
-
-.c48:active {
-  background-color: #ffffff;
-  border: 1px solid #4945ff;
-}
-
-.c48:active .c5 {
-  color: #4945ff;
-}
-
-.c48:active svg > g,
-.c48:active svg path {
-  fill: #4945ff;
-}
-
-.c48 .c5 {
-  color: #271fe0;
-}
-
-.c48 svg > g,
-.c48 svg path {
-  fill: #271fe0;
-}
-
-.c49 {
-  height: 2rem;
-}
-
-.c49 svg {
-  height: 0.75rem;
-  width: auto;
-}
-
-.c49[aria-disabled='true'] {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c49[aria-disabled='true'] .c5 {
-  color: #666687;
-}
-
-.c49[aria-disabled='true'] svg > g,.c49[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c49[aria-disabled='true']:active {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c49[aria-disabled='true']:active .c5 {
-  color: #666687;
-}
-
-.c49[aria-disabled='true']:active svg > g,.c49[aria-disabled='true']:active svg path {
-  fill: #666687;
-}
-
-.c49:hover {
  border: 1px solid #7b79ff;
  background: #7b79ff;
 }

-.c49:active {
+.c48:active {
  border: 1px solid #4945ff;
  background: #4945ff;
 }

-.c49 svg > g,
-.c49 svg path {
+.c48 svg > g,
+.c48 svg path {
  fill: #ffffff;
 }

@ -1305,7 +1297,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                    type="button"
                  >
                    <span
-                      class="c5 c47"
+                      class="c5 c6"
                    >
                      Cancel
                    </span>
@ -1316,11 +1308,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                >
                  <button
                    aria-disabled="false"
-                    class="c45 c44 c16 c48"
+                    class="c45 c44 c16 c47"
                    type="button"
                  >
                    <span
-                      class="c5 c47"
+                      class="c5 c6"
                    >
                      Replace media
                    </span>
@ -1338,11 +1330,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                  </div>
                  <button
                    aria-disabled="false"
-                    class="c45 c44 c16 c49"
+                    class="c45 c44 c16 c48"
                    type="button"
                  >
                    <span
-                      class="c5 c47"
+                      class="c5 c6"
                    >
                      Finish
                    </span>
--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/snapshots/RemoveAssetDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/snapshots/RemoveAssetDialog.test.js.snap
@ -30,7 +30,6 @@ exports[`RemoveAssetDialog snapshots the component 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/snapshots/index.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/snapshots/index.test.js.snap
@ -54,14 +54,6 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
  color: #666687;
 }

-.c47 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  font-weight: 600;
-  line-height: 0;
-  color: #ffffff;
-}
-
 .c0 {
  margin-left: -250px;
  position: fixed;
@ -388,12 +380,74 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
  fill: #32324d;
 }

-.c48 {
+.c47 {
  height: 2rem;
  border: 1px solid #d9d8ff;
  background: #f0f0ff;
 }

+.c47 svg {
+  height: 0.75rem;
+  width: auto;
+}
+
+.c47[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c47[aria-disabled='true'] .c5 {
+  color: #666687;
+}
+
+.c47[aria-disabled='true'] svg > g,.c47[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c47[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c47[aria-disabled='true']:active .c5 {
+  color: #666687;
+}
+
+.c47[aria-disabled='true']:active svg > g,.c47[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c47:hover {
+  background-color: #ffffff;
+}
+
+.c47:active {
+  background-color: #ffffff;
+  border: 1px solid #4945ff;
+}
+
+.c47:active .c5 {
+  color: #4945ff;
+}
+
+.c47:active svg > g,
+.c47:active svg path {
+  fill: #4945ff;
+}
+
+.c47 .c5 {
+  color: #271fe0;
+}
+
+.c47 svg > g,
+.c47 svg path {
+  fill: #271fe0;
+}
+
+.c48 {
+  height: 2rem;
+}
+
 .c48 svg {
  height: 0.75rem;
  width: auto;
@ -426,79 +480,17 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
 }

 .c48:hover {
-  background-color: #ffffff;
-}
-
-.c48:active {
-  background-color: #ffffff;
-  border: 1px solid #4945ff;
-}
-
-.c48:active .c5 {
-  color: #4945ff;
-}
-
-.c48:active svg > g,
-.c48:active svg path {
-  fill: #4945ff;
-}
-
-.c48 .c5 {
-  color: #271fe0;
-}
-
-.c48 svg > g,
-.c48 svg path {
-  fill: #271fe0;
-}
-
-.c49 {
-  height: 2rem;
-}
-
-.c49 svg {
-  height: 0.75rem;
-  width: auto;
-}
-
-.c49[aria-disabled='true'] {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c49[aria-disabled='true'] .c5 {
-  color: #666687;
-}
-
-.c49[aria-disabled='true'] svg > g,.c49[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c49[aria-disabled='true']:active {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c49[aria-disabled='true']:active .c5 {
-  color: #666687;
-}
-
-.c49[aria-disabled='true']:active svg > g,.c49[aria-disabled='true']:active svg path {
-  fill: #666687;
-}
-
-.c49:hover {
  border: 1px solid #7b79ff;
  background: #7b79ff;
 }

-.c49:active {
+.c48:active {
  border: 1px solid #4945ff;
  background: #4945ff;
 }

-.c49 svg > g,
-.c49 svg path {
+.c48 svg > g,
+.c48 svg path {
  fill: #ffffff;
 }

@ -1305,7 +1297,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                    type="button"
                  >
                    <span
-                      class="c5 c47"
+                      class="c5 c6"
                    >
                      Cancel
                    </span>
@ -1316,11 +1308,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                >
                  <button
                    aria-disabled="false"
-                    class="c45 c44 c16 c48"
+                    class="c45 c44 c16 c47"
                    type="button"
                  >
                    <span
-                      class="c5 c47"
+                      class="c5 c6"
                    >
                      Replace media
                    </span>
@ -1338,11 +1330,11 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
                  </div>
                  <button
                    aria-disabled="false"
-                    class="c45 c44 c16 c49"
+                    class="c45 c44 c16 c48"
                    type="button"
                  >
                    <span
-                      class="c5 c47"
+                      class="c5 c6"
                    >
                      Finish
                    </span>
--- a/packages/core/upload/admin/src/components/EditFolderDialog/tests/snapshots/EditFolderDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditFolderDialog/tests/snapshots/EditFolderDialog.test.js.snap
@ -31,7 +31,6 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/snapshots/FromComputerForm.test.js.snap
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/snapshots/FromComputerForm.test.js.snap
@ -24,7 +24,6 @@ exports[`FromComputerForm snapshots the component 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/snapshots/PendingAssetStep.test.js.snap
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/snapshots/PendingAssetStep.test.js.snap
@ -37,7 +37,6 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- 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
@ -47,7 +47,6 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

@ -729,7 +728,6 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/upload/admin/src/pages/App/ConfigureTheView/tests/snapshots/ConfigureTheView.test.js.snap
+++ b/packages/core/upload/admin/src/pages/App/ConfigureTheView/tests/snapshots/ConfigureTheView.test.js.snap
@ -24,7 +24,6 @@ exports[`Upload - Configure initial render renders and matches the snapshot 1`]
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/upload/admin/src/pages/App/MediaLibrary/components/tests/snapshots/BulkActions.test.js.snap
+++ b/packages/core/upload/admin/src/pages/App/MediaLibrary/components/tests/snapshots/BulkActions.test.js.snap
@ -23,7 +23,6 @@ exports[`BulkActions renders 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/upload/admin/src/pages/App/MediaLibrary/components/tests/snapshots/BulkDeleteButton.test.js.snap
+++ b/packages/core/upload/admin/src/pages/App/MediaLibrary/components/tests/snapshots/BulkDeleteButton.test.js.snap
@ -17,7 +17,6 @@ exports[`BulkDeleteButton renders 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/upload/admin/src/pages/App/MediaLibrary/components/tests/snapshots/BulkMoveButton.test.js.snap
+++ b/packages/core/upload/admin/src/pages/App/MediaLibrary/components/tests/snapshots/BulkMoveButton.test.js.snap
@ -17,7 +17,6 @@ exports[`BulkMoveButton renders 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/upload/admin/src/pages/App/MediaLibrary/components/tests/snapshots/Header.test.js.snap
+++ b/packages/core/upload/admin/src/pages/App/MediaLibrary/components/tests/snapshots/Header.test.js.snap
@ -30,7 +30,6 @@ exports[`Header renders 1`] = `
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
-  line-height: 0;
  color: #ffffff;
 }

--- a/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js
+++ b/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js
@ -75,7 +75,6 @@ describe('Upload | SettingsPage', () => {
        font-size: 0.75rem;
        line-height: 1.33;
        font-weight: 600;
-        line-height: 0;
        color: #ffffff;
      }

--- a/packages/core/upload/package.json
+++ b/packages/core/upload/package.json
@ -25,9 +25,9 @@
    "lint": "run -T eslint ."
  },
  "dependencies": {
-    "@strapi/design-system": "1.8.0",
+    "@strapi/design-system": "1.8.1",
    "@strapi/helper-plugin": "4.11.3",
-    "@strapi/icons": "1.8.0",
+    "@strapi/icons": "1.8.1",
    "@strapi/provider-upload-local": "4.11.3",
    "@strapi/utils": "4.11.3",
    "axios": "1.4.0",
--- a/packages/plugins/color-picker/package.json
+++ b/packages/plugins/color-picker/package.json
@ -9,9 +9,9 @@
    "displayName": "Color Picker"
  },
  "dependencies": {
-    "@strapi/design-system": "1.8.0",
+    "@strapi/design-system": "1.8.1",
    "@strapi/helper-plugin": "4.11.3",
-    "@strapi/icons": "1.8.0",
+    "@strapi/icons": "1.8.1",
    "prop-types": "^15.8.1",
    "react-colorful": "5.6.1",
    "react-intl": "6.4.1"
--- a/packages/plugins/documentation/admin/src/pages/PluginPage/tests/index.test.js
+++ b/packages/plugins/documentation/admin/src/pages/PluginPage/tests/index.test.js
@ -89,7 +89,6 @@ describe('Plugin | Documentation | PluginPage', () => {
        font-size: 0.75rem;
        line-height: 1.33;
        font-weight: 600;
-        line-height: 0;
        color: #ffffff;
      }

--- a/packages/plugins/documentation/admin/src/pages/SettingsPage/tests/index.test.js
+++ b/packages/plugins/documentation/admin/src/pages/SettingsPage/tests/index.test.js
@ -81,7 +81,6 @@ describe('Plugin | Documentation | SettingsPage', () => {
        font-size: 0.75rem;
        line-height: 1.33;
        font-weight: 600;
-        line-height: 0;
        color: #ffffff;
      }

--- a/packages/plugins/documentation/package.json
+++ b/packages/plugins/documentation/package.json
@ -30,9 +30,9 @@
    "test:front:watch:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js --watchAll"
  },
  "dependencies": {
-    "@strapi/design-system": "1.8.0",
+    "@strapi/design-system": "1.8.1",
    "@strapi/helper-plugin": "4.11.3",
-    "@strapi/icons": "1.8.0",
+    "@strapi/icons": "1.8.1",
    "@strapi/utils": "4.11.3",
    "bcryptjs": "2.4.3",
    "cheerio": "^1.0.0-rc.12",
--- a/packages/plugins/graphql/package.json
+++ b/packages/plugins/graphql/package.json
@ -26,9 +26,9 @@
  "dependencies": {
    "@graphql-tools/schema": "8.5.1",
    "@graphql-tools/utils": "^8.13.1",
-    "@strapi/design-system": "1.8.0",
+    "@strapi/design-system": "1.8.1",
    "@strapi/helper-plugin": "4.11.3",
-    "@strapi/icons": "1.8.0",
+    "@strapi/icons": "1.8.1",
    "@strapi/utils": "4.11.3",
    "apollo-server-core": "3.12.0",
    "apollo-server-koa": "3.10.0",
--- a/packages/plugins/i18n/package.json
+++ b/packages/plugins/i18n/package.json
@ -30,9 +30,9 @@
    "lint": "run -T eslint ."
  },
  "dependencies": {
-    "@strapi/design-system": "1.8.0",
+    "@strapi/design-system": "1.8.1",
    "@strapi/helper-plugin": "4.11.3",
-    "@strapi/icons": "1.8.0",
+    "@strapi/icons": "1.8.1",
    "@strapi/utils": "4.11.3",
    "formik": "2.4.0",
    "immer": "9.0.19",
--- a/packages/plugins/sentry/package.json
+++ b/packages/plugins/sentry/package.json
@ -27,9 +27,9 @@
  },
  "dependencies": {
    "@sentry/node": "6.19.7",
-    "@strapi/design-system": "1.8.0",
+    "@strapi/design-system": "1.8.1",
    "@strapi/helper-plugin": "4.11.3",
-    "@strapi/icons": "1.8.0"
+    "@strapi/icons": "1.8.1"
  },
  "devDependencies": {
    "react": "^18.2.0",
--- a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
@ -79,7 +79,6 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
        font-size: 0.75rem;
        line-height: 1.33;
        font-weight: 600;
-        line-height: 0;
        color: #ffffff;
      }

--- a/packages/plugins/users-permissions/package.json
+++ b/packages/plugins/users-permissions/package.json
@ -29,9 +29,9 @@
    "lint": "run -T eslint ."
  },
  "dependencies": {
-    "@strapi/design-system": "1.8.0",
+    "@strapi/design-system": "1.8.1",
    "@strapi/helper-plugin": "4.11.3",
-    "@strapi/icons": "1.8.0",
+    "@strapi/icons": "1.8.1",
    "@strapi/utils": "4.11.3",
    "bcryptjs": "2.4.3",
    "formik": "2.4.0",
--- a/yarn.lock
+++ b/yarn.lock