From 6953f90182f701f28211985106ff2b766f8169be Mon Sep 17 00:00:00 2001
From: Kristoffer <denkristoffer@users.noreply.github.com>
Date: Mon, 22 May 2023 09:45:08 +0200
Subject: [PATCH] fix(button): tweak transparent variant backgrounds (#2483)

---
 .changeset/rude-cars-jog.md                   |   5 +
 package-lock.json                             | 583 +++++++++---------
 packages/components/button/package.json       |   1 +
 .../button/src/Button/Button.styles.ts        |  10 +-
 .../components/button/src/Button/README.mdx   |   2 +-
 .../button/stories/Button.stories.tsx         | 202 ++++++
 6 files changed, 497 insertions(+), 306 deletions(-)
 create mode 100644 .changeset/rude-cars-jog.md

diff --git a/.changeset/rude-cars-jog.md b/.changeset/rude-cars-jog.md
new file mode 100644
index 0000000000..4f7ae70561
--- /dev/null
+++ b/.changeset/rude-cars-jog.md
@@ -0,0 +1,5 @@
+---
+"@contentful/f36-button": patch
+---
+
+fix(button): tweak transparent variant backgrounds
diff --git a/package-lock.json b/package-lock.json
index 1aff410bb1..fb38d74d74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37692,14 +37692,14 @@
     },
     "packages/components/accordion": {
       "name": "@contentful/f36-accordion",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-collapse": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-collapse": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       },
       "peerDependencies": {
@@ -37709,14 +37709,14 @@
     },
     "packages/components/asset": {
       "name": "@contentful/f36-asset",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-icon": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-icon": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       },
       "peerDependencies": {
@@ -37726,17 +37726,17 @@
     },
     "packages/components/autocomplete": {
       "name": "@contentful/f36-autocomplete",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-forms": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-forms": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
-        "@contentful/f36-popover": "^4.37.1",
-        "@contentful/f36-skeleton": "^4.37.1",
+        "@contentful/f36-popover": "^4.40.0",
+        "@contentful/f36-skeleton": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "@contentful/f36-utils": "^4.23.2",
         "downshift": "^6.1.12",
         "emotion": "^10.0.17"
@@ -37748,15 +37748,15 @@
     },
     "packages/components/badge": {
       "name": "@contentful/f36-badge",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "emotion": "^10.0.17"
       },
       "devDependencies": {
-        "@contentful/f36-typography": "^4.37.1"
+        "@contentful/f36-typography": "^4.40.0"
       },
       "peerDependencies": {
         "react": ">=16.8",
@@ -37765,16 +37765,17 @@
     },
     "packages/components/button": {
       "name": "@contentful/f36-button",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-spinner": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-spinner": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
+        "@contentful/f36-utils": "^4.24.1",
         "emotion": "^10.0.17"
       },
       "devDependencies": {
-        "@contentful/f36-icon": "^4.37.1",
+        "@contentful/f36-icon": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2"
       },
       "peerDependencies": {
@@ -37784,21 +37785,21 @@
     },
     "packages/components/card": {
       "name": "@contentful/f36-card",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-asset": "^4.37.1",
-        "@contentful/f36-badge": "^4.37.1",
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-drag-handle": "^4.37.1",
-        "@contentful/f36-icon": "^4.37.1",
+        "@contentful/f36-asset": "^4.40.0",
+        "@contentful/f36-badge": "^4.40.0",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-drag-handle": "^4.40.0",
+        "@contentful/f36-icon": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
-        "@contentful/f36-menu": "^4.37.1",
-        "@contentful/f36-skeleton": "^4.37.1",
+        "@contentful/f36-menu": "^4.40.0",
+        "@contentful/f36-skeleton": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-tooltip": "^4.37.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-tooltip": "^4.40.0",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17",
         "truncate": "^3.0.0"
       },
@@ -37812,10 +37813,10 @@
     },
     "packages/components/collapse": {
       "name": "@contentful/f36-collapse",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "emotion": "^10.0.17"
       },
@@ -37826,14 +37827,14 @@
     },
     "packages/components/copybutton": {
       "name": "@contentful/f36-copybutton",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-tooltip": "^4.37.1",
+        "@contentful/f36-tooltip": "^4.40.0",
         "emotion": "^10.0.17"
       },
       "peerDependencies": {
@@ -37843,16 +37844,16 @@
     },
     "packages/components/datepicker": {
       "name": "@contentful/f36-datepicker",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-forms": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-forms": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
-        "@contentful/f36-popover": "^4.37.1",
+        "@contentful/f36-popover": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.0",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "date-fns": "^2.28.0",
         "emotion": "^10.0.17",
         "react-day-picker": "^8.3.5",
@@ -37877,10 +37878,10 @@
     },
     "packages/components/datetime": {
       "name": "@contentful/f36-datetime",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "dayjs": "^1.11.5",
         "emotion": "^10.0.17"
@@ -37892,12 +37893,13 @@
     },
     "packages/components/drag-handle": {
       "name": "@contentful/f36-drag-handle",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
+        "@contentful/f36-utils": "^4.23.2",
         "emotion": "^10.0.17"
       },
       "peerDependencies": {
@@ -37907,11 +37909,11 @@
     },
     "packages/components/empty-state": {
       "name": "@contentful/f36-empty-state",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       },
       "peerDependencies": {
@@ -37921,19 +37923,19 @@
     },
     "packages/components/entity-list": {
       "name": "@contentful/f36-entity-list",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-badge": "^4.37.1",
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-drag-handle": "^4.37.1",
-        "@contentful/f36-icon": "^4.37.1",
+        "@contentful/f36-badge": "^4.40.0",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-drag-handle": "^4.40.0",
+        "@contentful/f36-icon": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
-        "@contentful/f36-menu": "^4.37.1",
-        "@contentful/f36-skeleton": "^4.37.1",
+        "@contentful/f36-menu": "^4.40.0",
+        "@contentful/f36-skeleton": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       },
       "peerDependencies": {
@@ -37943,13 +37945,13 @@
     },
     "packages/components/forms": {
       "name": "@contentful/f36-forms",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       },
       "devDependencies": {
@@ -37963,10 +37965,10 @@
     },
     "packages/components/icon": {
       "name": "@contentful/f36-icon",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "emotion": "^10.0.17"
       },
@@ -37994,10 +37996,10 @@
     },
     "packages/components/list": {
       "name": "@contentful/f36-list",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "emotion": "^10.0.17"
       },
@@ -38007,14 +38009,14 @@
     },
     "packages/components/menu": {
       "name": "@contentful/f36-menu",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
-        "@contentful/f36-popover": "^4.37.1",
+        "@contentful/f36-popover": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "@contentful/f36-utils": "^4.23.2",
         "emotion": "^10.0.17"
       },
@@ -38025,14 +38027,14 @@
     },
     "packages/components/modal": {
       "name": "@contentful/f36-modal",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "@types/react-modal": "^3.13.1",
         "emotion": "^10.0.17",
         "react-modal": "^3.16.1"
@@ -38107,7 +38109,7 @@
       "version": "4.1.0-alpha.1",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.0.0",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.0",
         "emotion": "^10.0.17"
       },
@@ -38118,15 +38120,15 @@
     },
     "packages/components/note": {
       "name": "@contentful/f36-note",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-icon": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-icon": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       },
       "devDependencies": {
@@ -38171,15 +38173,15 @@
     },
     "packages/components/notification": {
       "name": "@contentful/f36-notification",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
-        "@contentful/f36-text-link": "^4.37.1",
+        "@contentful/f36-text-link": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "@swc/helpers": "^0.4.14",
         "emotion": "^10.0.17",
         "react-animate-height": "^3.0.4"
@@ -38199,15 +38201,15 @@
     },
     "packages/components/pagination": {
       "name": "@contentful/f36-pagination",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-forms": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-forms": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.0",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       },
       "peerDependencies": {
@@ -38216,14 +38218,14 @@
     },
     "packages/components/pill": {
       "name": "@contentful/f36-pill",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-tooltip": "^4.37.1",
+        "@contentful/f36-tooltip": "^4.40.0",
         "emotion": "^10.0.17"
       },
       "devDependencies": {
@@ -38236,10 +38238,10 @@
     },
     "packages/components/popover": {
       "name": "@contentful/f36-popover",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "@contentful/f36-utils": "^4.23.2",
         "@popperjs/core": "^2.11.5",
@@ -38252,11 +38254,11 @@
     },
     "packages/components/skeleton": {
       "name": "@contentful/f36-skeleton",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-table": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-table": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "emotion": "^10.0.17"
       },
@@ -38267,15 +38269,15 @@
     },
     "packages/components/spinner": {
       "name": "@contentful/f36-spinner",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "emotion": "^10.0.17"
       },
       "devDependencies": {
-        "@contentful/f36-typography": "^4.37.1"
+        "@contentful/f36-typography": "^4.40.0"
       },
       "peerDependencies": {
         "react": ">=16.8"
@@ -38283,13 +38285,13 @@
     },
     "packages/components/table": {
       "name": "@contentful/f36-table",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.25.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       },
       "peerDependencies": {
@@ -38314,10 +38316,10 @@
     },
     "packages/components/tabs": {
       "name": "@contentful/f36-tabs",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "@radix-ui/react-tabs": "^1.0.1",
         "emotion": "^10.0.17"
@@ -38465,10 +38467,10 @@
     },
     "packages/components/text-link": {
       "name": "@contentful/f36-text-link",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "emotion": "^10.0.17"
       },
@@ -38478,10 +38480,10 @@
     },
     "packages/components/tooltip": {
       "name": "@contentful/f36-tooltip",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "@contentful/f36-utils": "^4.23.2",
         "@popperjs/core": "^2.11.5",
@@ -38496,10 +38498,10 @@
     },
     "packages/components/typography": {
       "name": "@contentful/f36-typography",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "emotion": "^10.0.17"
       },
@@ -38539,7 +38541,7 @@
     },
     "packages/core": {
       "name": "@contentful/f36-core",
-      "version": "4.37.1",
+      "version": "4.40.0",
       "license": "MIT",
       "dependencies": {
         "@contentful/f36-tokens": "^4.0.1",
@@ -38825,42 +38827,42 @@
     },
     "packages/forma-36-react-components": {
       "name": "@contentful/f36-components",
-      "version": "4.37.1",
-      "license": "MIT",
-      "dependencies": {
-        "@contentful/f36-accordion": "^4.37.1",
-        "@contentful/f36-asset": "^4.37.1",
-        "@contentful/f36-autocomplete": "^4.37.1",
-        "@contentful/f36-badge": "^4.37.1",
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-card": "^4.37.1",
-        "@contentful/f36-collapse": "^4.37.1",
-        "@contentful/f36-copybutton": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-datepicker": "^4.37.1",
-        "@contentful/f36-datetime": "^4.37.1",
-        "@contentful/f36-drag-handle": "^4.37.1",
-        "@contentful/f36-empty-state": "^4.37.1",
-        "@contentful/f36-entity-list": "^4.37.1",
-        "@contentful/f36-forms": "^4.37.1",
-        "@contentful/f36-icon": "^4.37.1",
+      "version": "4.40.0",
+      "license": "MIT",
+      "dependencies": {
+        "@contentful/f36-accordion": "^4.40.0",
+        "@contentful/f36-asset": "^4.40.0",
+        "@contentful/f36-autocomplete": "^4.40.0",
+        "@contentful/f36-badge": "^4.40.0",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-card": "^4.40.0",
+        "@contentful/f36-collapse": "^4.40.0",
+        "@contentful/f36-copybutton": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-datepicker": "^4.40.0",
+        "@contentful/f36-datetime": "^4.40.0",
+        "@contentful/f36-drag-handle": "^4.40.0",
+        "@contentful/f36-empty-state": "^4.40.0",
+        "@contentful/f36-entity-list": "^4.40.0",
+        "@contentful/f36-forms": "^4.40.0",
+        "@contentful/f36-icon": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
-        "@contentful/f36-list": "^4.37.1",
-        "@contentful/f36-menu": "^4.37.1",
-        "@contentful/f36-modal": "^4.37.1",
-        "@contentful/f36-note": "^4.37.1",
-        "@contentful/f36-notification": "^4.37.1",
-        "@contentful/f36-pagination": "^4.37.1",
-        "@contentful/f36-pill": "^4.37.1",
-        "@contentful/f36-popover": "^4.37.1",
-        "@contentful/f36-skeleton": "^4.37.1",
-        "@contentful/f36-spinner": "^4.37.1",
-        "@contentful/f36-table": "^4.37.1",
-        "@contentful/f36-tabs": "^4.37.1",
-        "@contentful/f36-text-link": "^4.37.1",
+        "@contentful/f36-list": "^4.40.0",
+        "@contentful/f36-menu": "^4.40.0",
+        "@contentful/f36-modal": "^4.40.0",
+        "@contentful/f36-note": "^4.40.0",
+        "@contentful/f36-notification": "^4.40.0",
+        "@contentful/f36-pagination": "^4.40.0",
+        "@contentful/f36-pill": "^4.40.0",
+        "@contentful/f36-popover": "^4.40.0",
+        "@contentful/f36-skeleton": "^4.40.0",
+        "@contentful/f36-spinner": "^4.40.0",
+        "@contentful/f36-table": "^4.40.0",
+        "@contentful/f36-tabs": "^4.40.0",
+        "@contentful/f36-text-link": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-tooltip": "^4.37.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-tooltip": "^4.40.0",
+        "@contentful/f36-typography": "^4.40.0",
         "@contentful/f36-utils": "^4.23.2",
         "@types/react": "16.14.22",
         "@types/react-dom": "16.9.14"
@@ -42050,10 +42052,10 @@
       "version": "1.0.0",
       "dependencies": {
         "@codesandbox/sandpack-react": "^1.17.0",
-        "@contentful/f36-components": "^4.37.1",
+        "@contentful/f36-components": "^4.40.0",
         "@contentful/f36-docs-utils": "^4.0.2",
-        "@contentful/f36-empty-state": "^4.37.1",
-        "@contentful/f36-icon": "^4.37.1",
+        "@contentful/f36-empty-state": "^4.40.0",
+        "@contentful/f36-icon": "^4.40.0",
         "@contentful/f36-icons": "^4.25.0",
         "@contentful/f36-multiselect": "^4.20.11",
         "@contentful/f36-navlist": "4.1.0-alpha.1",
@@ -42106,20 +42108,6 @@
         "wait-on": "^6.0.0"
       }
     },
-    "packages/website/node_modules/@contentful/f36-navlist": {
-      "version": "4.1.0-alpha.0",
-      "resolved": "https://registry.npmjs.org/@contentful/f36-navlist/-/f36-navlist-4.1.0-alpha.0.tgz",
-      "integrity": "sha512-WhDyhD6yVpT5QrXWBtuNMvfLRbVLFejdswhx/1jXYyEuLvEIMEs4KQ6QTdEkdhmqIED45ndFs1MD+Wwxc0Vl2A==",
-      "dependencies": {
-        "@contentful/f36-core": "^4.0.0",
-        "@contentful/f36-tokens": "^4.0.0",
-        "emotion": "^10.0.17"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
-      }
-    },
     "packages/website/node_modules/@mdx-js/loader": {
       "version": "2.1.5",
       "license": "MIT",
@@ -44951,36 +44939,36 @@
     "@contentful/f36-accordion": {
       "version": "file:packages/components/accordion",
       "requires": {
-        "@contentful/f36-collapse": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-collapse": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       }
     },
     "@contentful/f36-asset": {
       "version": "file:packages/components/asset",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-icon": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-icon": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       }
     },
     "@contentful/f36-autocomplete": {
       "version": "file:packages/components/autocomplete",
       "requires": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-forms": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-forms": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
-        "@contentful/f36-popover": "^4.37.1",
-        "@contentful/f36-skeleton": "^4.37.1",
+        "@contentful/f36-popover": "^4.40.0",
+        "@contentful/f36-skeleton": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "@contentful/f36-utils": "^4.23.2",
         "downshift": "^6.1.12",
         "emotion": "^10.0.17"
@@ -44989,38 +44977,39 @@
     "@contentful/f36-badge": {
       "version": "file:packages/components/badge",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       }
     },
     "@contentful/f36-button": {
       "version": "file:packages/components/button",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-icon": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-icon": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
-        "@contentful/f36-spinner": "^4.37.1",
+        "@contentful/f36-spinner": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
+        "@contentful/f36-utils": "^4.24.1",
         "emotion": "^10.0.17"
       }
     },
     "@contentful/f36-card": {
       "version": "file:packages/components/card",
       "requires": {
-        "@contentful/f36-asset": "^4.37.1",
-        "@contentful/f36-badge": "^4.37.1",
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-drag-handle": "^4.37.1",
-        "@contentful/f36-icon": "^4.37.1",
+        "@contentful/f36-asset": "^4.40.0",
+        "@contentful/f36-badge": "^4.40.0",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-drag-handle": "^4.40.0",
+        "@contentful/f36-icon": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
-        "@contentful/f36-menu": "^4.37.1",
-        "@contentful/f36-skeleton": "^4.37.1",
+        "@contentful/f36-menu": "^4.40.0",
+        "@contentful/f36-skeleton": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-tooltip": "^4.37.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-tooltip": "^4.40.0",
+        "@contentful/f36-typography": "^4.40.0",
         "array-move": "^4.0.0",
         "emotion": "^10.0.17",
         "truncate": "^3.0.0"
@@ -45178,7 +45167,7 @@
     "@contentful/f36-collapse": {
       "version": "file:packages/components/collapse",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "emotion": "^10.0.17"
       }
@@ -45186,39 +45175,39 @@
     "@contentful/f36-components": {
       "version": "file:packages/forma-36-react-components",
       "requires": {
-        "@contentful/f36-accordion": "^4.37.1",
-        "@contentful/f36-asset": "^4.37.1",
-        "@contentful/f36-autocomplete": "^4.37.1",
-        "@contentful/f36-badge": "^4.37.1",
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-card": "^4.37.1",
-        "@contentful/f36-collapse": "^4.37.1",
-        "@contentful/f36-copybutton": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-datepicker": "^4.37.1",
-        "@contentful/f36-datetime": "^4.37.1",
-        "@contentful/f36-drag-handle": "^4.37.1",
-        "@contentful/f36-empty-state": "^4.37.1",
-        "@contentful/f36-entity-list": "^4.37.1",
-        "@contentful/f36-forms": "^4.37.1",
-        "@contentful/f36-icon": "^4.37.1",
+        "@contentful/f36-accordion": "^4.40.0",
+        "@contentful/f36-asset": "^4.40.0",
+        "@contentful/f36-autocomplete": "^4.40.0",
+        "@contentful/f36-badge": "^4.40.0",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-card": "^4.40.0",
+        "@contentful/f36-collapse": "^4.40.0",
+        "@contentful/f36-copybutton": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-datepicker": "^4.40.0",
+        "@contentful/f36-datetime": "^4.40.0",
+        "@contentful/f36-drag-handle": "^4.40.0",
+        "@contentful/f36-empty-state": "^4.40.0",
+        "@contentful/f36-entity-list": "^4.40.0",
+        "@contentful/f36-forms": "^4.40.0",
+        "@contentful/f36-icon": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
-        "@contentful/f36-list": "^4.37.1",
-        "@contentful/f36-menu": "^4.37.1",
-        "@contentful/f36-modal": "^4.37.1",
-        "@contentful/f36-note": "^4.37.1",
-        "@contentful/f36-notification": "^4.37.1",
-        "@contentful/f36-pagination": "^4.37.1",
-        "@contentful/f36-pill": "^4.37.1",
-        "@contentful/f36-popover": "^4.37.1",
-        "@contentful/f36-skeleton": "^4.37.1",
-        "@contentful/f36-spinner": "^4.37.1",
-        "@contentful/f36-table": "^4.37.1",
-        "@contentful/f36-tabs": "^4.37.1",
-        "@contentful/f36-text-link": "^4.37.1",
+        "@contentful/f36-list": "^4.40.0",
+        "@contentful/f36-menu": "^4.40.0",
+        "@contentful/f36-modal": "^4.40.0",
+        "@contentful/f36-note": "^4.40.0",
+        "@contentful/f36-notification": "^4.40.0",
+        "@contentful/f36-pagination": "^4.40.0",
+        "@contentful/f36-pill": "^4.40.0",
+        "@contentful/f36-popover": "^4.40.0",
+        "@contentful/f36-skeleton": "^4.40.0",
+        "@contentful/f36-spinner": "^4.40.0",
+        "@contentful/f36-table": "^4.40.0",
+        "@contentful/f36-tabs": "^4.40.0",
+        "@contentful/f36-text-link": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-tooltip": "^4.37.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-tooltip": "^4.40.0",
+        "@contentful/f36-typography": "^4.40.0",
         "@contentful/f36-utils": "^4.23.2",
         "@types/react": "16.14.22",
         "@types/react-dom": "16.9.14",
@@ -47375,11 +47364,11 @@
     "@contentful/f36-copybutton": {
       "version": "file:packages/components/copybutton",
       "requires": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-tooltip": "^4.37.1",
+        "@contentful/f36-tooltip": "^4.40.0",
         "emotion": "^10.0.17"
       }
     },
@@ -47407,13 +47396,13 @@
     "@contentful/f36-datepicker": {
       "version": "file:packages/components/datepicker",
       "requires": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-forms": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-forms": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
-        "@contentful/f36-popover": "^4.37.1",
+        "@contentful/f36-popover": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.0",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "date-fns": "^2.28.0",
         "emotion": "^10.0.17",
         "react-day-picker": "^8.3.5",
@@ -47429,7 +47418,7 @@
     "@contentful/f36-datetime": {
       "version": "file:packages/components/datetime",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "dayjs": "^1.11.5",
         "emotion": "^10.0.17"
@@ -47447,9 +47436,10 @@
     "@contentful/f36-drag-handle": {
       "version": "file:packages/components/drag-handle",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
+        "@contentful/f36-utils": "^4.23.2",
         "emotion": "^10.0.17"
       }
     },
@@ -47457,33 +47447,33 @@
       "version": "file:packages/components/empty-state",
       "requires": {
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       }
     },
     "@contentful/f36-entity-list": {
       "version": "file:packages/components/entity-list",
       "requires": {
-        "@contentful/f36-badge": "^4.37.1",
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-drag-handle": "^4.37.1",
-        "@contentful/f36-icon": "^4.37.1",
+        "@contentful/f36-badge": "^4.40.0",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-drag-handle": "^4.40.0",
+        "@contentful/f36-icon": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
-        "@contentful/f36-menu": "^4.37.1",
-        "@contentful/f36-skeleton": "^4.37.1",
+        "@contentful/f36-menu": "^4.40.0",
+        "@contentful/f36-skeleton": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       }
     },
     "@contentful/f36-forms": {
       "version": "file:packages/components/forms",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17",
         "formik": "^2.2.9",
         "react-hook-form": "^7.15.0"
@@ -47492,7 +47482,7 @@
     "@contentful/f36-icon": {
       "version": "file:packages/components/icon",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "emotion": "^10.0.17",
         "react-icons": "^4.4.0"
@@ -47510,7 +47500,7 @@
     "@contentful/f36-list": {
       "version": "file:packages/components/list",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "emotion": "^10.0.17"
       }
@@ -47518,11 +47508,11 @@
     "@contentful/f36-menu": {
       "version": "file:packages/components/menu",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
-        "@contentful/f36-popover": "^4.37.1",
+        "@contentful/f36-popover": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "@contentful/f36-utils": "^4.23.2",
         "emotion": "^10.0.17"
       }
@@ -47530,11 +47520,11 @@
     "@contentful/f36-modal": {
       "version": "file:packages/components/modal",
       "requires": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "@types/react-modal": "^3.13.1",
         "emotion": "^10.0.17",
         "react-modal": "^3.16.1"
@@ -47588,7 +47578,7 @@
     "@contentful/f36-navlist": {
       "version": "file:packages/components/navlist",
       "requires": {
-        "@contentful/f36-core": "^4.0.0",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.0",
         "emotion": "^10.0.17"
       }
@@ -47596,12 +47586,12 @@
     "@contentful/f36-note": {
       "version": "file:packages/components/note",
       "requires": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-icon": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-icon": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "@emotion/serialize": "^1.1.1",
         "emotion": "^10.0.17"
       },
@@ -47638,12 +47628,12 @@
     "@contentful/f36-notification": {
       "version": "file:packages/components/notification",
       "requires": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
-        "@contentful/f36-text-link": "^4.37.1",
+        "@contentful/f36-text-link": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "@swc/helpers": "^0.4.14",
         "emotion": "^10.0.17",
         "react-animate-height": "^3.0.4"
@@ -47662,23 +47652,23 @@
     "@contentful/f36-pagination": {
       "version": "file:packages/components/pagination",
       "requires": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-forms": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-forms": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.0",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       }
     },
     "@contentful/f36-pill": {
       "version": "file:packages/components/pill",
       "requires": {
-        "@contentful/f36-button": "^4.37.1",
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-button": "^4.40.0",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.23.2",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-tooltip": "^4.37.1",
+        "@contentful/f36-tooltip": "^4.40.0",
         "array-move": "^4.0.0",
         "emotion": "^10.0.17"
       }
@@ -47686,7 +47676,7 @@
     "@contentful/f36-popover": {
       "version": "file:packages/components/popover",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "@contentful/f36-utils": "^4.23.2",
         "@popperjs/core": "^2.11.5",
@@ -47697,8 +47687,8 @@
     "@contentful/f36-skeleton": {
       "version": "file:packages/components/skeleton",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
-        "@contentful/f36-table": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
+        "@contentful/f36-table": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "emotion": "^10.0.17"
       }
@@ -47706,19 +47696,19 @@
     "@contentful/f36-spinner": {
       "version": "file:packages/components/spinner",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       }
     },
     "@contentful/f36-table": {
       "version": "file:packages/components/table",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-icons": "^4.25.0",
         "@contentful/f36-tokens": "^4.0.1",
-        "@contentful/f36-typography": "^4.37.1",
+        "@contentful/f36-typography": "^4.40.0",
         "emotion": "^10.0.17"
       },
       "dependencies": {
@@ -47738,7 +47728,7 @@
     "@contentful/f36-tabs": {
       "version": "file:packages/components/tabs",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "@radix-ui/react-tabs": "^1.0.1",
         "emotion": "^10.0.17"
@@ -47840,7 +47830,7 @@
     "@contentful/f36-text-link": {
       "version": "file:packages/components/text-link",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "emotion": "^10.0.17"
       }
@@ -47884,7 +47874,7 @@
     "@contentful/f36-tooltip": {
       "version": "file:packages/components/tooltip",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "@contentful/f36-utils": "^4.23.2",
         "@popperjs/core": "^2.11.5",
@@ -47896,7 +47886,7 @@
     "@contentful/f36-typography": {
       "version": "file:packages/components/typography",
       "requires": {
-        "@contentful/f36-core": "^4.37.1",
+        "@contentful/f36-core": "^4.40.0",
         "@contentful/f36-tokens": "^4.0.1",
         "emotion": "^10.0.17"
       }
@@ -47911,10 +47901,10 @@
       "version": "file:packages/website",
       "requires": {
         "@codesandbox/sandpack-react": "^1.17.0",
-        "@contentful/f36-components": "^4.37.1",
+        "@contentful/f36-components": "^4.40.0",
         "@contentful/f36-docs-utils": "^4.0.2",
-        "@contentful/f36-empty-state": "^4.37.1",
-        "@contentful/f36-icon": "^4.37.1",
+        "@contentful/f36-empty-state": "^4.40.0",
+        "@contentful/f36-icon": "^4.40.0",
         "@contentful/f36-icons": "^4.25.0",
         "@contentful/f36-multiselect": "^4.20.11",
         "@contentful/f36-navlist": "4.1.0-alpha.1",
@@ -47965,15 +47955,6 @@
         "wait-on": "^6.0.0"
       },
       "dependencies": {
-        "@contentful/f36-navlist": {
-          "version": "https://registry.npmjs.org/@contentful/f36-navlist/-/f36-navlist-4.1.0-alpha.0.tgz",
-          "integrity": "sha512-WhDyhD6yVpT5QrXWBtuNMvfLRbVLFejdswhx/1jXYyEuLvEIMEs4KQ6QTdEkdhmqIED45ndFs1MD+Wwxc0Vl2A==",
-          "requires": {
-            "@contentful/f36-core": "^4.0.0",
-            "@contentful/f36-tokens": "^4.0.0",
-            "emotion": "^10.0.17"
-          }
-        },
         "@mdx-js/loader": {
           "version": "2.1.5",
           "requires": {
@@ -48379,7 +48360,7 @@
         "@emotion/memoize": "0.7.4",
         "@emotion/unitless": "0.7.5",
         "@emotion/utils": "0.11.3",
-        "csstype": "^2.5.7"
+        "csstype": "3.1.1"
       }
     },
     "@emotion/sheet": {
@@ -50513,7 +50494,7 @@
         "ts-dedent": "^2.0.0",
         "url-loader": "^4.1.1",
         "util-deprecate": "^1.0.2",
-        "webpack": "4",
+        "webpack": "5",
         "webpack-dev-middleware": "^3.7.3",
         "webpack-filter-warnings-plugin": "^1.2.1",
         "webpack-hot-middleware": "^2.25.1",
@@ -50683,7 +50664,7 @@
             "telejson": "^6.0.8",
             "ts-dedent": "^2.0.0",
             "util-deprecate": "^1.0.2",
-            "webpack": "4"
+            "webpack": "5"
           },
           "dependencies": {
             "cosmiconfig": {
@@ -51971,7 +51952,7 @@
         "ts-dedent": "^2.0.0",
         "util-deprecate": "^1.0.2",
         "watchpack": "^2.2.0",
-        "webpack": "4",
+        "webpack": "5",
         "ws": "^8.2.3",
         "x-default-browser": "^0.4.0"
       },
@@ -52176,7 +52157,7 @@
             "telejson": "^6.0.8",
             "ts-dedent": "^2.0.0",
             "util-deprecate": "^1.0.2",
-            "webpack": "4"
+            "webpack": "5"
           }
         },
         "@storybook/core-events": {
@@ -52377,7 +52358,7 @@
         "ts-dedent": "^2.0.0",
         "url-loader": "^4.1.1",
         "util-deprecate": "^1.0.2",
-        "webpack": "4",
+        "webpack": "5",
         "webpack-dev-middleware": "^3.7.3",
         "webpack-virtual-modules": "^0.2.2"
       },
@@ -52582,7 +52563,7 @@
             "telejson": "^6.0.8",
             "ts-dedent": "^2.0.0",
             "util-deprecate": "^1.0.2",
-            "webpack": "4"
+            "webpack": "5"
           }
         },
         "@storybook/core-events": {
@@ -53421,7 +53402,7 @@
             "telejson": "^6.0.8",
             "ts-dedent": "^2.0.0",
             "util-deprecate": "^1.0.2",
-            "webpack": "4"
+            "webpack": "5"
           }
         },
         "@storybook/node-logger": {
diff --git a/packages/components/button/package.json b/packages/components/button/package.json
index cfe85fd30c..bd517f01ce 100644
--- a/packages/components/button/package.json
+++ b/packages/components/button/package.json
@@ -9,6 +9,7 @@
     "@contentful/f36-core": "^4.40.2",
     "@contentful/f36-spinner": "^4.40.2",
     "@contentful/f36-tokens": "^4.0.1",
+    "@contentful/f36-utils": "^4.24.1",
     "emotion": "^10.0.17"
   },
   "devDependencies": {
diff --git a/packages/components/button/src/Button/Button.styles.ts b/packages/components/button/src/Button/Button.styles.ts
index ef822261ac..50b7101558 100644
--- a/packages/components/button/src/Button/Button.styles.ts
+++ b/packages/components/button/src/Button/Button.styles.ts
@@ -2,6 +2,7 @@ import { css } from 'emotion';
 import type { CSSObject } from '@emotion/serialize';
 import tokens from '@contentful/f36-tokens';
 import { ButtonSize, ButtonVariant, ButtonStylesProps } from '../types';
+import { hexToRGBA } from '@contentful/f36-utils';
 
 const variantActiveStyles = (variant: ButtonVariant): CSSObject => {
   switch (variant) {
@@ -14,7 +15,7 @@ const variantActiveStyles = (variant: ButtonVariant): CSSObject => {
     case 'negative':
       return { backgroundColor: tokens.red800, borderColor: tokens.red800 };
     case 'transparent':
-      return { backgroundColor: tokens.gray100, borderColor: tokens.gray100 };
+      return { backgroundColor: hexToRGBA(tokens.gray900, 0.1) };
     default:
       return {};
   }
@@ -121,12 +122,13 @@ const variantToStyles = (variant: ButtonVariant): CSSObject => {
         borderColor: 'transparent',
         boxShadow: 'none',
         '&:hover': {
-          backgroundColor: tokens.gray100,
+          backgroundColor: hexToRGBA(tokens.gray900, 0.05),
           color: tokens.gray900,
         },
         '&:active': variantActiveStyles(variant),
         '&:focus': {
-          backgroundColor: 'transparent',
+          backgroundColor: hexToRGBA(tokens.gray900, 0.05),
+          color: tokens.gray900,
           boxShadow: tokens.glowPrimary,
         },
         '&:focus:not(:focus-visible)': {
@@ -224,7 +226,7 @@ export const getStyles = () => ({
       ...(isActive
         ? {
             transition: 'none',
-            '&, &:hover': variantActiveStyles(variant),
+            '&, &:focus': variantActiveStyles(variant),
           }
         : {}),
     }),
diff --git a/packages/components/button/src/Button/README.mdx b/packages/components/button/src/Button/README.mdx
index 04970d9533..372a1af167 100644
--- a/packages/components/button/src/Button/README.mdx
+++ b/packages/components/button/src/Button/README.mdx
@@ -31,7 +31,7 @@ Button has 5 different variants:
 - **Secondary** - Used for secondary actions, the most commonly used button type.
 - **Positive** - For use when the action has a positive connotation such as creating or publishing a new entity.
 - **Negative** - For destructive actions - when something can't be undone. For example, deleting entities.
-- **Transparent** - For having an unstyled button.
+- **Transparent** - For having an unstyled button. Use this only on light backgrounds.
 
 ```jsx file=../../examples/ButtonVariantsExample.tsx
 
diff --git a/packages/components/button/stories/Button.stories.tsx b/packages/components/button/stories/Button.stories.tsx
index 2f039b6b29..7ffdc22826 100644
--- a/packages/components/button/stories/Button.stories.tsx
+++ b/packages/components/button/stories/Button.stories.tsx
@@ -5,6 +5,8 @@ import { Icon } from '@contentful/f36-icon';
 import { Flex, Stack } from '@contentful/f36-core';
 import { SectionHeading } from '@contentful/f36-typography';
 import * as icons from '@contentful/f36-icons';
+import { css } from 'emotion';
+import tokens from '@contentful/f36-tokens';
 
 export default {
   title: 'Components/Button',
@@ -368,6 +370,206 @@ export const Overview = ({ startIcon, endIcon }) => {
           </Button>
         </Flex>
       </Flex>
+
+      <Flex flexDirection="column" marginBottom="spacingL">
+        <SectionHeading as="h3" marginBottom="spacingS">
+          On backgrounds
+        </SectionHeading>
+
+        <div
+          className={css({
+            background: tokens.gray100,
+            padding: tokens.spacingXs,
+          })}
+        >
+          <Stack
+            flexDirection="row"
+            marginBottom="spacingM"
+            spacing="spacingXs"
+          >
+            <Button
+              variant="primary"
+              startIcon={startIcon && <Icon as={icons[startIcon]} />}
+              endIcon={endIcon && <Icon as={icons[endIcon]} />}
+            >
+              Primary
+            </Button>
+
+            <Button
+              variant="secondary"
+              startIcon={startIcon && <Icon as={icons[startIcon]} />}
+              endIcon={endIcon && <Icon as={icons[endIcon]} />}
+            >
+              Secondary
+            </Button>
+
+            <Button
+              variant="positive"
+              startIcon={startIcon && <Icon as={icons[startIcon]} />}
+              endIcon={endIcon && <Icon as={icons[endIcon]} />}
+            >
+              Positive
+            </Button>
+
+            <Button
+              variant="negative"
+              startIcon={startIcon && <Icon as={icons[startIcon]} />}
+              endIcon={endIcon && <Icon as={icons[endIcon]} />}
+            >
+              Negative
+            </Button>
+
+            <Button
+              variant="transparent"
+              startIcon={startIcon && <Icon as={icons[startIcon]} />}
+              endIcon={endIcon && <Icon as={icons[endIcon]} />}
+            >
+              Transparent
+            </Button>
+          </Stack>
+
+          <Stack marginBottom="spacingM" spacing="spacingXs">
+            <Button variant="primary" isActive>
+              Primary isActive
+            </Button>
+
+            <Button variant="secondary" isActive>
+              Secondary isActive
+            </Button>
+
+            <Button variant="positive" isActive>
+              Positive isActive
+            </Button>
+
+            <Button variant="negative" isActive>
+              Negative isActive
+            </Button>
+
+            <Button variant="transparent" isActive>
+              Transparent
+            </Button>
+          </Stack>
+
+          <Stack marginBottom="spacingM" spacing="spacingXs">
+            <Button variant="primary" isDisabled>
+              Primary disabled
+            </Button>
+
+            <Button variant="secondary" isDisabled>
+              Secondary disabled
+            </Button>
+
+            <Button variant="positive" isDisabled>
+              Positive disabled
+            </Button>
+
+            <Button variant="negative" isDisabled>
+              Negative disabled
+            </Button>
+
+            <Button variant="transparent" isDisabled>
+              Transparent
+            </Button>
+          </Stack>
+        </div>
+
+        <div
+          className={css({
+            background: tokens.gray900,
+            padding: tokens.spacingXs,
+          })}
+        >
+          <Stack
+            flexDirection="row"
+            marginBottom="spacingM"
+            spacing="spacingXs"
+          >
+            <Button
+              variant="primary"
+              startIcon={startIcon && <Icon as={icons[startIcon]} />}
+              endIcon={endIcon && <Icon as={icons[endIcon]} />}
+            >
+              Primary
+            </Button>
+
+            <Button
+              variant="secondary"
+              startIcon={startIcon && <Icon as={icons[startIcon]} />}
+              endIcon={endIcon && <Icon as={icons[endIcon]} />}
+            >
+              Secondary
+            </Button>
+
+            <Button
+              variant="positive"
+              startIcon={startIcon && <Icon as={icons[startIcon]} />}
+              endIcon={endIcon && <Icon as={icons[endIcon]} />}
+            >
+              Positive
+            </Button>
+
+            <Button
+              variant="negative"
+              startIcon={startIcon && <Icon as={icons[startIcon]} />}
+              endIcon={endIcon && <Icon as={icons[endIcon]} />}
+            >
+              Negative
+            </Button>
+
+            <Button
+              variant="transparent"
+              startIcon={startIcon && <Icon as={icons[startIcon]} />}
+              endIcon={endIcon && <Icon as={icons[endIcon]} />}
+            >
+              Transparent
+            </Button>
+          </Stack>
+
+          <Stack marginBottom="spacingM" spacing="spacingXs">
+            <Button variant="primary" isActive>
+              Primary isActive
+            </Button>
+
+            <Button variant="secondary" isActive>
+              Secondary isActive
+            </Button>
+
+            <Button variant="positive" isActive>
+              Positive isActive
+            </Button>
+
+            <Button variant="negative" isActive>
+              Negative isActive
+            </Button>
+
+            <Button variant="transparent" isActive>
+              Transparent
+            </Button>
+          </Stack>
+
+          <Stack spacing="spacingXs" marginBottom="spacingM">
+            <Button variant="primary" isDisabled>
+              Primary disabled
+            </Button>
+
+            <Button variant="secondary" isDisabled>
+              Secondary disabled
+            </Button>
+
+            <Button variant="positive" isDisabled>
+              Positive disabled
+            </Button>
+
+            <Button variant="negative" isDisabled>
+              Negative disabled
+            </Button>
+
+            <Button variant="transparent" isDisabled>
+              Transparent
+            </Button>
+          </Stack>
+        </div>
+      </Flex>
     </>
   );
 };