diff --git a/.changeset/moody-donkeys-matter.md b/.changeset/moody-donkeys-matter.md
new file mode 100644
index 0000000000..1af7e5836c
--- /dev/null
+++ b/.changeset/moody-donkeys-matter.md
@@ -0,0 +1,9 @@
+---
+"@contentful/f36-forms": patch
+"@contentful/f36-tokens": patch
+"@contentful/f36-typography": patch
+---
+
+- Add high-density `font-size` and `line-height` tokens.
+- Add high-density support to Caption, Heading, Paragraph, Section Heading, and Subheading components.
+- Adjust high-density tokens for BaseCheckbox, FormLabel, HelpText, and ValidationMessage components.
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 6d1eccb9c0..2bcc7326fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -267,7 +267,7 @@
     },
     "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-explode-assignable-expression": "^7.16.0",
@@ -345,7 +345,7 @@
     },
     "node_modules/@babel/helper-create-regexp-features-plugin": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.16.0",
@@ -360,7 +360,7 @@
     },
     "node_modules/@babel/helper-define-polyfill-provider": {
       "version": "0.2.4",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.13.0",
@@ -378,7 +378,7 @@
     },
     "node_modules/@babel/helper-define-polyfill-provider/node_modules/semver": {
       "version": "6.3.0",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -394,7 +394,7 @@
     },
     "node_modules/@babel/helper-explode-assignable-expression": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.16.0"
@@ -487,7 +487,7 @@
     },
     "node_modules/@babel/helper-remap-async-to-generator": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.16.0",
@@ -573,7 +573,7 @@
     },
     "node_modules/@babel/helper-wrap-function": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-function-name": "^7.16.0",
@@ -680,7 +680,7 @@
     },
     "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.16.2",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -694,7 +694,7 @@
     },
     "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5",
@@ -710,7 +710,7 @@
     },
     "node_modules/@babel/plugin-proposal-async-generator-functions": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5",
@@ -726,7 +726,7 @@
     },
     "node_modules/@babel/plugin-proposal-class-properties": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.16.0",
@@ -741,7 +741,7 @@
     },
     "node_modules/@babel/plugin-proposal-class-static-block": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.16.0",
@@ -775,7 +775,7 @@
     },
     "node_modules/@babel/plugin-proposal-dynamic-import": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5",
@@ -805,7 +805,7 @@
     },
     "node_modules/@babel/plugin-proposal-export-namespace-from": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5",
@@ -820,7 +820,7 @@
     },
     "node_modules/@babel/plugin-proposal-json-strings": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5",
@@ -835,7 +835,7 @@
     },
     "node_modules/@babel/plugin-proposal-logical-assignment-operators": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5",
@@ -850,7 +850,7 @@
     },
     "node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5",
@@ -865,7 +865,7 @@
     },
     "node_modules/@babel/plugin-proposal-numeric-separator": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5",
@@ -880,7 +880,7 @@
     },
     "node_modules/@babel/plugin-proposal-object-rest-spread": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.16.0",
@@ -898,7 +898,7 @@
     },
     "node_modules/@babel/plugin-proposal-optional-catch-binding": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5",
@@ -913,7 +913,7 @@
     },
     "node_modules/@babel/plugin-proposal-optional-chaining": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5",
@@ -929,7 +929,7 @@
     },
     "node_modules/@babel/plugin-proposal-private-methods": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.16.0",
@@ -944,7 +944,7 @@
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
       "version": "7.18.6",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
@@ -961,7 +961,7 @@
     },
     "node_modules/@babel/plugin-proposal-unicode-property-regex": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.0",
@@ -976,7 +976,7 @@
     },
     "node_modules/@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
@@ -998,7 +998,7 @@
     },
     "node_modules/@babel/plugin-syntax-class-properties": {
       "version": "7.12.13",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.12.13"
@@ -1009,7 +1009,7 @@
     },
     "node_modules/@babel/plugin-syntax-class-static-block": {
       "version": "7.14.5",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1037,7 +1037,7 @@
     },
     "node_modules/@babel/plugin-syntax-dynamic-import": {
       "version": "7.8.3",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
@@ -1062,7 +1062,7 @@
     },
     "node_modules/@babel/plugin-syntax-export-namespace-from": {
       "version": "7.8.3",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.3"
@@ -1098,7 +1098,7 @@
     },
     "node_modules/@babel/plugin-syntax-json-strings": {
       "version": "7.8.3",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
@@ -1123,7 +1123,7 @@
     },
     "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
       "version": "7.10.4",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.10.4"
@@ -1144,7 +1144,7 @@
     },
     "node_modules/@babel/plugin-syntax-numeric-separator": {
       "version": "7.10.4",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.10.4"
@@ -1165,7 +1165,7 @@
     },
     "node_modules/@babel/plugin-syntax-optional-catch-binding": {
       "version": "7.8.3",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
@@ -1186,7 +1186,7 @@
     },
     "node_modules/@babel/plugin-syntax-private-property-in-object": {
       "version": "7.14.5",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1200,7 +1200,7 @@
     },
     "node_modules/@babel/plugin-syntax-top-level-await": {
       "version": "7.14.5",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1228,7 +1228,7 @@
     },
     "node_modules/@babel/plugin-transform-arrow-functions": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1242,7 +1242,7 @@
     },
     "node_modules/@babel/plugin-transform-async-to-generator": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.0",
@@ -1258,7 +1258,7 @@
     },
     "node_modules/@babel/plugin-transform-block-scoped-functions": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1272,7 +1272,7 @@
     },
     "node_modules/@babel/plugin-transform-block-scoping": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1301,7 +1301,7 @@
     },
     "node_modules/@babel/plugin-transform-classes": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.16.0",
@@ -1321,7 +1321,7 @@
     },
     "node_modules/@babel/plugin-transform-computed-properties": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1335,7 +1335,7 @@
     },
     "node_modules/@babel/plugin-transform-destructuring": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1349,7 +1349,7 @@
     },
     "node_modules/@babel/plugin-transform-dotall-regex": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.0",
@@ -1364,7 +1364,7 @@
     },
     "node_modules/@babel/plugin-transform-duplicate-keys": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1378,7 +1378,7 @@
     },
     "node_modules/@babel/plugin-transform-exponentiation-operator": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-builder-binary-assignment-operator-visitor": "^7.16.0",
@@ -1408,7 +1408,7 @@
     },
     "node_modules/@babel/plugin-transform-for-of": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1422,7 +1422,7 @@
     },
     "node_modules/@babel/plugin-transform-function-name": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-function-name": "^7.16.0",
@@ -1437,7 +1437,7 @@
     },
     "node_modules/@babel/plugin-transform-literals": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1451,7 +1451,7 @@
     },
     "node_modules/@babel/plugin-transform-member-expression-literals": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1465,7 +1465,7 @@
     },
     "node_modules/@babel/plugin-transform-modules-amd": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-transforms": "^7.16.0",
@@ -1497,7 +1497,7 @@
     },
     "node_modules/@babel/plugin-transform-modules-systemjs": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-hoist-variables": "^7.16.0",
@@ -1515,7 +1515,7 @@
     },
     "node_modules/@babel/plugin-transform-modules-umd": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-transforms": "^7.16.0",
@@ -1530,7 +1530,7 @@
     },
     "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.0"
@@ -1544,7 +1544,7 @@
     },
     "node_modules/@babel/plugin-transform-new-target": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1573,7 +1573,7 @@
     },
     "node_modules/@babel/plugin-transform-object-super": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5",
@@ -1632,7 +1632,7 @@
     },
     "node_modules/@babel/plugin-transform-property-literals": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1707,7 +1707,7 @@
     },
     "node_modules/@babel/plugin-transform-regenerator": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "regenerator-transform": "^0.14.2"
@@ -1721,7 +1721,7 @@
     },
     "node_modules/@babel/plugin-transform-reserved-words": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1735,7 +1735,7 @@
     },
     "node_modules/@babel/plugin-transform-shorthand-properties": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1749,7 +1749,7 @@
     },
     "node_modules/@babel/plugin-transform-spread": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5",
@@ -1764,7 +1764,7 @@
     },
     "node_modules/@babel/plugin-transform-sticky-regex": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1778,7 +1778,7 @@
     },
     "node_modules/@babel/plugin-transform-template-literals": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1792,7 +1792,7 @@
     },
     "node_modules/@babel/plugin-transform-typeof-symbol": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1823,7 +1823,7 @@
     },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1837,7 +1837,7 @@
     },
     "node_modules/@babel/plugin-transform-unicode-regex": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.0",
@@ -1852,7 +1852,7 @@
     },
     "node_modules/@babel/preset-env": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.16.0",
@@ -1939,7 +1939,7 @@
     },
     "node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-corejs3": {
       "version": "0.3.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.2.4",
@@ -1951,7 +1951,7 @@
     },
     "node_modules/@babel/preset-env/node_modules/semver": {
       "version": "6.3.0",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -1975,7 +1975,7 @@
     },
     "node_modules/@babel/preset-modules": {
       "version": "0.1.5",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.0.0",
@@ -5320,6 +5320,7 @@
     },
     "node_modules/@jridgewell/source-map": {
       "version": "0.3.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.0",
@@ -12439,6 +12440,7 @@
     },
     "node_modules/@types/eslint": {
       "version": "8.4.6",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "*",
@@ -12447,6 +12449,7 @@
     },
     "node_modules/@types/eslint-scope": {
       "version": "3.7.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/eslint": "*",
@@ -12757,6 +12760,7 @@
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/json5": {
@@ -12821,6 +12825,7 @@
     },
     "node_modules/@types/node": {
       "version": "17.0.21",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/node-fetch": {
@@ -13393,6 +13398,7 @@
     },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.11.1",
@@ -13401,18 +13407,22 @@
     },
     "node_modules/@webassemblyjs/floating-point-hex-parser": {
       "version": "1.11.1",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.11.1",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.11.1",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.11.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.1",
@@ -13422,10 +13432,12 @@
     },
     "node_modules/@webassemblyjs/helper-wasm-bytecode": {
       "version": "1.11.1",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.11.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
@@ -13436,6 +13448,7 @@
     },
     "node_modules/@webassemblyjs/ieee754": {
       "version": "1.11.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
@@ -13443,6 +13456,7 @@
     },
     "node_modules/@webassemblyjs/leb128": {
       "version": "1.11.1",
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@xtuc/long": "4.2.2"
@@ -13450,10 +13464,12 @@
     },
     "node_modules/@webassemblyjs/utf8": {
       "version": "1.11.1",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.11.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
@@ -13468,6 +13484,7 @@
     },
     "node_modules/@webassemblyjs/wasm-edit/node_modules/@webassemblyjs/wast-printer": {
       "version": "1.11.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
@@ -13476,6 +13493,7 @@
     },
     "node_modules/@webassemblyjs/wasm-gen": {
       "version": "1.11.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
@@ -13487,6 +13505,7 @@
     },
     "node_modules/@webassemblyjs/wasm-opt": {
       "version": "1.11.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
@@ -13497,6 +13516,7 @@
     },
     "node_modules/@webassemblyjs/wasm-parser": {
       "version": "1.11.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
@@ -13509,10 +13529,12 @@
     },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
+      "dev": true,
       "license": "BSD-3-Clause"
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
+      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/abab": {
@@ -13569,6 +13591,7 @@
     },
     "node_modules/acorn-import-assertions": {
       "version": "1.8.0",
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "acorn": "^8"
@@ -13667,6 +13690,7 @@
     },
     "node_modules/ajv-keywords": {
       "version": "3.5.2",
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "ajv": "^6.9.1"
@@ -14525,7 +14549,7 @@
     },
     "node_modules/babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "object.assign": "^4.1.0"
@@ -14629,7 +14653,7 @@
     },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.2.3",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.13.11",
@@ -14642,7 +14666,7 @@
     },
     "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
       "version": "6.3.0",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -14688,7 +14712,7 @@
     },
     "node_modules/babel-plugin-polyfill-regenerator": {
       "version": "0.2.3",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.2.4"
@@ -15923,6 +15947,7 @@
     },
     "node_modules/chrome-trace-event": {
       "version": "1.0.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "tslib": "^1.9.0"
@@ -15933,6 +15958,7 @@
     },
     "node_modules/chrome-trace-event/node_modules/tslib": {
       "version": "1.14.1",
+      "dev": true,
       "license": "0BSD"
     },
     "node_modules/ci-info": {
@@ -16214,6 +16240,7 @@
     },
     "node_modules/commander": {
       "version": "2.20.3",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/commitizen": {
@@ -16702,7 +16729,7 @@
     },
     "node_modules/core-js-compat": {
       "version": "3.19.1",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.17.6",
@@ -16715,7 +16742,7 @@
     },
     "node_modules/core-js-compat/node_modules/semver": {
       "version": "7.0.0",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -18594,6 +18621,7 @@
       "version": "5.15.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
       "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
+      "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -18604,6 +18632,7 @@
     },
     "node_modules/enhanced-resolve/node_modules/tapable": {
       "version": "2.2.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -18835,6 +18864,7 @@
     },
     "node_modules/es-module-lexer": {
       "version": "0.9.3",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/es-shim-unscopables": {
@@ -19538,6 +19568,7 @@
     },
     "node_modules/eslint-scope": {
       "version": "5.1.1",
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -19549,6 +19580,7 @@
     },
     "node_modules/eslint-scope/node_modules/estraverse": {
       "version": "4.3.0",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -19729,6 +19761,7 @@
     },
     "node_modules/esrecurse": {
       "version": "4.3.0",
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "estraverse": "^5.2.0"
@@ -19765,6 +19798,7 @@
     },
     "node_modules/estraverse": {
       "version": "5.3.0",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -19862,7 +19896,7 @@
     },
     "node_modules/esutils": {
       "version": "2.0.3",
-      "devOptional": true,
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -19883,6 +19917,7 @@
     },
     "node_modules/events": {
       "version": "3.3.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.8.x"
@@ -26278,6 +26313,7 @@
     },
     "node_modules/jest-worker": {
       "version": "27.5.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -26290,6 +26326,7 @@
     },
     "node_modules/jest-worker/node_modules/supports-color": {
       "version": "8.1.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -27761,6 +27798,7 @@
     },
     "node_modules/loader-runner": {
       "version": "4.3.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.11.5"
@@ -27818,7 +27856,7 @@
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.escaperegexp": {
@@ -32763,6 +32801,7 @@
     },
     "node_modules/randombytes": {
       "version": "2.1.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "safe-buffer": "^5.1.0"
@@ -33463,7 +33502,7 @@
     },
     "node_modules/regenerator-transform": {
       "version": "0.14.5",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.8.4"
@@ -34907,6 +34946,7 @@
     },
     "node_modules/schema-utils": {
       "version": "3.1.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
@@ -36497,6 +36537,7 @@
     },
     "node_modules/terser": {
       "version": "5.15.1",
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.2",
@@ -36513,6 +36554,7 @@
     },
     "node_modules/terser-webpack-plugin": {
       "version": "5.3.6",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.14",
@@ -36545,6 +36587,7 @@
     },
     "node_modules/terser-webpack-plugin/node_modules/serialize-javascript": {
       "version": "6.0.0",
+      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "randombytes": "^2.1.0"
@@ -37457,6 +37500,7 @@
     },
     "node_modules/typescript": {
       "version": "4.7.3",
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -38335,6 +38379,7 @@
     },
     "node_modules/watchpack": {
       "version": "2.4.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
@@ -38346,6 +38391,7 @@
     },
     "node_modules/watchpack/node_modules/glob-to-regexp": {
       "version": "0.4.1",
+      "dev": true,
       "license": "BSD-2-Clause"
     },
     "node_modules/wcwidth": {
@@ -38373,6 +38419,7 @@
     },
     "node_modules/webpack": {
       "version": "5.74.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
@@ -38495,10 +38542,12 @@
     },
     "node_modules/webpack/node_modules/glob-to-regexp": {
       "version": "0.4.1",
+      "dev": true,
       "license": "BSD-2-Clause"
     },
     "node_modules/webpack/node_modules/tapable": {
       "version": "2.2.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -38506,6 +38555,7 @@
     },
     "node_modules/webpack/node_modules/webpack-sources": {
       "version": "3.2.3",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10.13.0"
@@ -39744,6 +39794,7 @@
       "dependencies": {
         "@contentful/f36-core": "^4.58.0",
         "@contentful/f36-tokens": "^4.0.3",
+        "@contentful/f36-utils": "^4.24.2",
         "emotion": "^10.0.17"
       },
       "peerDependencies": {
@@ -43785,7 +43836,7 @@
     },
     "@babel/helper-builder-binary-assignment-operator-visitor": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-explode-assignable-expression": "^7.16.0",
         "@babel/types": "^7.16.0"
@@ -43848,7 +43899,7 @@
     },
     "@babel/helper-create-regexp-features-plugin": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.16.0",
         "regexpu-core": "^4.7.1"
@@ -43856,7 +43907,7 @@
     },
     "@babel/helper-define-polyfill-provider": {
       "version": "0.2.4",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-compilation-targets": "^7.13.0",
         "@babel/helper-module-imports": "^7.12.13",
@@ -43870,7 +43921,7 @@
       "dependencies": {
         "semver": {
           "version": "6.3.0",
-          "devOptional": true
+          "dev": true
         }
       }
     },
@@ -43881,7 +43932,7 @@
     },
     "@babel/helper-explode-assignable-expression": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/types": "^7.16.0"
       }
@@ -43946,7 +43997,7 @@
     },
     "@babel/helper-remap-async-to-generator": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.16.0",
         "@babel/helper-wrap-function": "^7.16.0",
@@ -44004,7 +44055,7 @@
     },
     "@babel/helper-wrap-function": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-function-name": "^7.16.0",
         "@babel/template": "^7.16.0",
@@ -44085,14 +44136,14 @@
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.16.2",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
@@ -44101,7 +44152,7 @@
     },
     "@babel/plugin-proposal-async-generator-functions": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5",
         "@babel/helper-remap-async-to-generator": "^7.16.0",
@@ -44110,7 +44161,7 @@
     },
     "@babel/plugin-proposal-class-properties": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-create-class-features-plugin": "^7.16.0",
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -44118,7 +44169,7 @@
     },
     "@babel/plugin-proposal-class-static-block": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-create-class-features-plugin": "^7.16.0",
         "@babel/helper-plugin-utils": "^7.14.5",
@@ -44138,7 +44189,7 @@
     },
     "@babel/plugin-proposal-dynamic-import": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3"
@@ -44154,7 +44205,7 @@
     },
     "@babel/plugin-proposal-export-namespace-from": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5",
         "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
@@ -44162,7 +44213,7 @@
     },
     "@babel/plugin-proposal-json-strings": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5",
         "@babel/plugin-syntax-json-strings": "^7.8.3"
@@ -44170,7 +44221,7 @@
     },
     "@babel/plugin-proposal-logical-assignment-operators": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
@@ -44178,7 +44229,7 @@
     },
     "@babel/plugin-proposal-nullish-coalescing-operator": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
@@ -44186,7 +44237,7 @@
     },
     "@babel/plugin-proposal-numeric-separator": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5",
         "@babel/plugin-syntax-numeric-separator": "^7.10.4"
@@ -44194,7 +44245,7 @@
     },
     "@babel/plugin-proposal-object-rest-spread": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/compat-data": "^7.16.0",
         "@babel/helper-compilation-targets": "^7.16.0",
@@ -44205,7 +44256,7 @@
     },
     "@babel/plugin-proposal-optional-catch-binding": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
@@ -44213,7 +44264,7 @@
     },
     "@babel/plugin-proposal-optional-chaining": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
@@ -44222,7 +44273,7 @@
     },
     "@babel/plugin-proposal-private-methods": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-create-class-features-plugin": "^7.16.0",
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -44230,7 +44281,7 @@
     },
     "@babel/plugin-proposal-private-property-in-object": {
       "version": "7.18.6",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
         "@babel/helper-create-class-features-plugin": "^7.18.6",
@@ -44240,7 +44291,7 @@
     },
     "@babel/plugin-proposal-unicode-property-regex": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.0",
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -44248,7 +44299,7 @@
     },
     "@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
@@ -44262,14 +44313,14 @@
     },
     "@babel/plugin-syntax-class-properties": {
       "version": "7.12.13",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.12.13"
       }
     },
     "@babel/plugin-syntax-class-static-block": {
       "version": "7.14.5",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
@@ -44283,7 +44334,7 @@
     },
     "@babel/plugin-syntax-dynamic-import": {
       "version": "7.8.3",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
@@ -44297,7 +44348,7 @@
     },
     "@babel/plugin-syntax-export-namespace-from": {
       "version": "7.8.3",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.3"
       }
@@ -44319,7 +44370,7 @@
     },
     "@babel/plugin-syntax-json-strings": {
       "version": "7.8.3",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
@@ -44334,7 +44385,7 @@
     },
     "@babel/plugin-syntax-logical-assignment-operators": {
       "version": "7.10.4",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
@@ -44347,7 +44398,7 @@
     },
     "@babel/plugin-syntax-numeric-separator": {
       "version": "7.10.4",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
@@ -44360,7 +44411,7 @@
     },
     "@babel/plugin-syntax-optional-catch-binding": {
       "version": "7.8.3",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
@@ -44373,14 +44424,14 @@
     },
     "@babel/plugin-syntax-private-property-in-object": {
       "version": "7.14.5",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
     "@babel/plugin-syntax-top-level-await": {
       "version": "7.14.5",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
@@ -44395,14 +44446,14 @@
     },
     "@babel/plugin-transform-arrow-functions": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
     "@babel/plugin-transform-async-to-generator": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-module-imports": "^7.16.0",
         "@babel/helper-plugin-utils": "^7.14.5",
@@ -44411,14 +44462,14 @@
     },
     "@babel/plugin-transform-block-scoped-functions": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
     "@babel/plugin-transform-block-scoping": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
@@ -44434,7 +44485,7 @@
     },
     "@babel/plugin-transform-classes": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.16.0",
         "@babel/helper-function-name": "^7.16.0",
@@ -44447,21 +44498,21 @@
     },
     "@babel/plugin-transform-computed-properties": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
     "@babel/plugin-transform-destructuring": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
     "@babel/plugin-transform-dotall-regex": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.0",
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -44469,14 +44520,14 @@
     },
     "@babel/plugin-transform-duplicate-keys": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
     "@babel/plugin-transform-exponentiation-operator": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-builder-binary-assignment-operator-visitor": "^7.16.0",
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -44493,14 +44544,14 @@
     },
     "@babel/plugin-transform-for-of": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
     "@babel/plugin-transform-function-name": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-function-name": "^7.16.0",
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -44508,21 +44559,21 @@
     },
     "@babel/plugin-transform-literals": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
     "@babel/plugin-transform-member-expression-literals": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
     "@babel/plugin-transform-modules-amd": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-module-transforms": "^7.16.0",
         "@babel/helper-plugin-utils": "^7.14.5",
@@ -44541,7 +44592,7 @@
     },
     "@babel/plugin-transform-modules-systemjs": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-hoist-variables": "^7.16.0",
         "@babel/helper-module-transforms": "^7.16.0",
@@ -44552,7 +44603,7 @@
     },
     "@babel/plugin-transform-modules-umd": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-module-transforms": "^7.16.0",
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -44560,14 +44611,14 @@
     },
     "@babel/plugin-transform-named-capturing-groups-regex": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.0"
       }
     },
     "@babel/plugin-transform-new-target": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
@@ -44583,7 +44634,7 @@
     },
     "@babel/plugin-transform-object-super": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5",
         "@babel/helper-replace-supers": "^7.16.0"
@@ -44616,7 +44667,7 @@
     },
     "@babel/plugin-transform-property-literals": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
@@ -44656,28 +44707,28 @@
     },
     "@babel/plugin-transform-regenerator": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "regenerator-transform": "^0.14.2"
       }
     },
     "@babel/plugin-transform-reserved-words": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
     "@babel/plugin-transform-shorthand-properties": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
     "@babel/plugin-transform-spread": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0"
@@ -44685,21 +44736,21 @@
     },
     "@babel/plugin-transform-sticky-regex": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
     "@babel/plugin-transform-template-literals": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
     "@babel/plugin-transform-typeof-symbol": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
@@ -44717,14 +44768,14 @@
     },
     "@babel/plugin-transform-unicode-escapes": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
     "@babel/plugin-transform-unicode-regex": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.0",
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -44732,7 +44783,7 @@
     },
     "@babel/preset-env": {
       "version": "7.16.0",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/compat-data": "^7.16.0",
         "@babel/helper-compilation-targets": "^7.16.0",
@@ -44812,7 +44863,7 @@
       "dependencies": {
         "babel-plugin-polyfill-corejs3": {
           "version": "0.3.0",
-          "devOptional": true,
+          "dev": true,
           "requires": {
             "@babel/helper-define-polyfill-provider": "^0.2.4",
             "core-js-compat": "^3.18.0"
@@ -44820,7 +44871,7 @@
         },
         "semver": {
           "version": "6.3.0",
-          "devOptional": true
+          "dev": true
         }
       }
     },
@@ -44836,7 +44887,7 @@
     },
     "@babel/preset-modules": {
       "version": "0.1.5",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.0.0",
         "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
@@ -45679,8 +45730,7 @@
       }
     },
     "@code-hike/classer": {
-      "version": "0.0.0-e48fa74",
-      "requires": {}
+      "version": "0.0.0-e48fa74"
     },
     "@codemirror/autocomplete": {
       "version": "0.19.9",
@@ -46508,8 +46558,7 @@
         },
         "@octokit/plugin-request-log": {
           "version": "1.0.4",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "@octokit/plugin-rest-endpoint-methods": {
           "version": "6.6.2",
@@ -49201,6 +49250,7 @@
       "requires": {
         "@contentful/f36-core": "^4.58.0",
         "@contentful/f36-tokens": "^4.0.3",
+        "@contentful/f36-utils": "^4.24.2",
         "emotion": "^10.0.17"
       }
     },
@@ -49318,8 +49368,7 @@
           }
         },
         "@next/mdx": {
-          "version": "11.1.2",
-          "requires": {}
+          "version": "11.1.2"
         },
         "acorn-walk": {
           "version": "8.2.0",
@@ -50466,6 +50515,7 @@
     },
     "@jridgewell/source-map": {
       "version": "0.3.2",
+      "dev": true,
       "requires": {
         "@jridgewell/gen-mapping": "^0.3.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -50701,8 +50751,7 @@
       }
     },
     "@mdx-js/react": {
-      "version": "1.6.22",
-      "requires": {}
+      "version": "1.6.22"
     },
     "@mdx-js/util": {
       "version": "1.6.22"
@@ -51242,8 +51291,7 @@
       }
     },
     "@react-hook/passive-layout-effect": {
-      "version": "1.2.1",
-      "requires": {}
+      "version": "1.2.1"
     },
     "@remix-run/router": {
       "version": "1.7.1",
@@ -52931,8 +52979,7 @@
         },
         "icss-utils": {
           "version": "5.1.0",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "interpret": {
           "version": "2.2.0",
@@ -54393,8 +54440,7 @@
         },
         "icss-utils": {
           "version": "5.1.0",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "lower-case": {
           "version": "2.0.2",
@@ -55156,8 +55202,7 @@
     },
     "@testing-library/user-event": {
       "version": "14.4.3",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@tootallnate/once": {
       "version": "1.1.2",
@@ -55252,6 +55297,7 @@
     },
     "@types/eslint": {
       "version": "8.4.6",
+      "dev": true,
       "requires": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -55259,6 +55305,7 @@
     },
     "@types/eslint-scope": {
       "version": "3.7.4",
+      "dev": true,
       "requires": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -55497,7 +55544,8 @@
       }
     },
     "@types/json-schema": {
-      "version": "7.0.11"
+      "version": "7.0.11",
+      "dev": true
     },
     "@types/json5": {
       "version": "0.0.29",
@@ -55553,7 +55601,8 @@
       "version": "0.7.31"
     },
     "@types/node": {
-      "version": "17.0.21"
+      "version": "17.0.21",
+      "dev": true
     },
     "@types/node-fetch": {
       "version": "2.6.2",
@@ -55902,22 +55951,27 @@
     },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
+      "dev": true,
       "requires": {
         "@webassemblyjs/helper-numbers": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
       }
     },
     "@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.11.1"
+      "version": "1.11.1",
+      "dev": true
     },
     "@webassemblyjs/helper-api-error": {
-      "version": "1.11.1"
+      "version": "1.11.1",
+      "dev": true
     },
     "@webassemblyjs/helper-buffer": {
-      "version": "1.11.1"
+      "version": "1.11.1",
+      "dev": true
     },
     "@webassemblyjs/helper-numbers": {
       "version": "1.11.1",
+      "dev": true,
       "requires": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -55925,10 +55979,12 @@
       }
     },
     "@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.11.1"
+      "version": "1.11.1",
+      "dev": true
     },
     "@webassemblyjs/helper-wasm-section": {
       "version": "1.11.1",
+      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -55938,21 +55994,25 @@
     },
     "@webassemblyjs/ieee754": {
       "version": "1.11.1",
+      "dev": true,
       "requires": {
         "@xtuc/ieee754": "^1.2.0"
       }
     },
     "@webassemblyjs/leb128": {
       "version": "1.11.1",
+      "dev": true,
       "requires": {
         "@xtuc/long": "4.2.2"
       }
     },
     "@webassemblyjs/utf8": {
-      "version": "1.11.1"
+      "version": "1.11.1",
+      "dev": true
     },
     "@webassemblyjs/wasm-edit": {
       "version": "1.11.1",
+      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -55966,6 +56026,7 @@
       "dependencies": {
         "@webassemblyjs/wast-printer": {
           "version": "1.11.1",
+          "dev": true,
           "requires": {
             "@webassemblyjs/ast": "1.11.1",
             "@xtuc/long": "4.2.2"
@@ -55975,6 +56036,7 @@
     },
     "@webassemblyjs/wasm-gen": {
       "version": "1.11.1",
+      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
@@ -55985,6 +56047,7 @@
     },
     "@webassemblyjs/wasm-opt": {
       "version": "1.11.1",
+      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -55994,6 +56057,7 @@
     },
     "@webassemblyjs/wasm-parser": {
       "version": "1.11.1",
+      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -56004,10 +56068,12 @@
       }
     },
     "@xtuc/ieee754": {
-      "version": "1.2.0"
+      "version": "1.2.0",
+      "dev": true
     },
     "@xtuc/long": {
-      "version": "4.2.2"
+      "version": "4.2.2",
+      "dev": true
     },
     "abab": {
       "version": "2.0.5",
@@ -56045,11 +56111,10 @@
     },
     "acorn-import-assertions": {
       "version": "1.8.0",
-      "requires": {}
+      "dev": true
     },
     "acorn-jsx": {
-      "version": "5.3.2",
-      "requires": {}
+      "version": "5.3.2"
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -56111,7 +56176,7 @@
     },
     "ajv-keywords": {
       "version": "3.5.2",
-      "requires": {}
+      "dev": true
     },
     "algoliasearch": {
       "version": "3.35.1",
@@ -56515,8 +56580,7 @@
     "babel-core": {
       "version": "7.0.0-bridge.0",
       "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
-      "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==",
-      "requires": {}
+      "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg=="
     },
     "babel-jest": {
       "version": "29.6.1",
@@ -56695,7 +56759,7 @@
     },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "object.assign": "^4.1.0"
       }
@@ -56780,7 +56844,7 @@
     },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.2.3",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/compat-data": "^7.13.11",
         "@babel/helper-define-polyfill-provider": "^0.2.4",
@@ -56789,7 +56853,7 @@
       "dependencies": {
         "semver": {
           "version": "6.3.0",
-          "devOptional": true
+          "dev": true
         }
       }
     },
@@ -56823,7 +56887,7 @@
     },
     "babel-plugin-polyfill-regenerator": {
       "version": "0.2.3",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/helper-define-polyfill-provider": "^0.2.4"
       }
@@ -57646,12 +57710,14 @@
     },
     "chrome-trace-event": {
       "version": "1.0.2",
+      "dev": true,
       "requires": {
         "tslib": "^1.9.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "1.14.1"
+          "version": "1.14.1",
+          "dev": true
         }
       }
     },
@@ -57840,7 +57906,8 @@
       "version": "1.0.8"
     },
     "commander": {
-      "version": "2.20.3"
+      "version": "2.20.3",
+      "dev": true
     },
     "commitizen": {
       "version": "4.3.0",
@@ -58196,7 +58263,7 @@
     },
     "core-js-compat": {
       "version": "3.19.1",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "browserslist": "^4.17.6",
         "semver": "7.0.0"
@@ -58204,7 +58271,7 @@
       "dependencies": {
         "semver": {
           "version": "7.0.0",
-          "devOptional": true
+          "dev": true
         }
       }
     },
@@ -58228,8 +58295,7 @@
     },
     "cosmiconfig-typescript-loader": {
       "version": "4.1.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "cp-file": {
       "version": "7.0.0",
@@ -58655,8 +58721,7 @@
     },
     "cssnano-utils": {
       "version": "3.1.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "csso": {
       "version": "4.2.0",
@@ -59479,13 +59544,15 @@
       "version": "5.15.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
       "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
+      "dev": true,
       "requires": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
       },
       "dependencies": {
         "tapable": {
-          "version": "2.2.1"
+          "version": "2.2.1",
+          "dev": true
         }
       }
     },
@@ -59646,7 +59713,8 @@
       }
     },
     "es-module-lexer": {
-      "version": "0.9.3"
+      "version": "0.9.3",
+      "dev": true
     },
     "es-shim-unscopables": {
       "version": "1.0.0",
@@ -59887,15 +59955,13 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/eslint-config-dev/-/eslint-config-dev-3.3.1.tgz",
       "integrity": "sha512-qFf7Y8y655tpas8QJxVkJI2MgcyQ1VingfxUm/pkFq/4r9XxW3fBTlGHr9zIizEWnnkTCnSk6uJLB0pl8Z16gQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "eslint-config-prettier": {
       "version": "8.8.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
       "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "eslint-import-resolver-node": {
       "version": "0.3.7",
@@ -60107,8 +60173,7 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
       "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "eslint-plugin-rulesdir": {
       "version": "0.2.2",
@@ -60197,13 +60262,15 @@
     },
     "eslint-scope": {
       "version": "5.1.1",
+      "dev": true,
       "requires": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
       },
       "dependencies": {
         "estraverse": {
-          "version": "4.3.0"
+          "version": "4.3.0",
+          "dev": true
         }
       }
     },
@@ -60253,6 +60320,7 @@
     },
     "esrecurse": {
       "version": "4.3.0",
+      "dev": true,
       "requires": {
         "estraverse": "^5.2.0"
       }
@@ -60275,7 +60343,8 @@
       }
     },
     "estraverse": {
-      "version": "5.3.0"
+      "version": "5.3.0",
+      "dev": true
     },
     "estree-to-babel": {
       "version": "3.2.1",
@@ -60339,7 +60408,7 @@
     },
     "esutils": {
       "version": "2.0.3",
-      "devOptional": true
+      "dev": true
     },
     "etag": {
       "version": "1.8.1",
@@ -60350,7 +60419,8 @@
       "dev": true
     },
     "events": {
-      "version": "3.3.0"
+      "version": "3.3.0",
+      "dev": true
     },
     "exec-sh": {
       "version": "0.3.6",
@@ -64381,8 +64451,7 @@
         },
         "ws": {
           "version": "7.5.3",
-          "dev": true,
-          "requires": {}
+          "dev": true
         }
       }
     },
@@ -64681,8 +64750,7 @@
     },
     "jest-pnp-resolver": {
       "version": "1.2.2",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "jest-regex-util": {
       "version": "29.4.3",
@@ -65036,8 +65104,7 @@
         },
         "ws": {
           "version": "7.5.3",
-          "dev": true,
-          "requires": {}
+          "dev": true
         }
       }
     },
@@ -65345,6 +65412,7 @@
     },
     "jest-worker": {
       "version": "27.5.1",
+      "dev": true,
       "requires": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -65353,6 +65421,7 @@
       "dependencies": {
         "supports-color": {
           "version": "8.1.1",
+          "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -65435,8 +65504,7 @@
     "jscodeshift-find-imports": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/jscodeshift-find-imports/-/jscodeshift-find-imports-2.0.4.tgz",
-      "integrity": "sha512-HxOzjWDOFFSCf8EKSTQGqCxXeRFqZszOywnZ0HuMB9YPDFHVpxftGRsY+QS+Qq8o2qUojlmNU3JEHts5DWYS1A==",
-      "requires": {}
+      "integrity": "sha512-HxOzjWDOFFSCf8EKSTQGqCxXeRFqZszOywnZ0HuMB9YPDFHVpxftGRsY+QS+Qq8o2qUojlmNU3JEHts5DWYS1A=="
     },
     "jsdom": {
       "version": "20.0.0",
@@ -65537,8 +65605,7 @@
         },
         "ws": {
           "version": "8.8.1",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "xml-name-validator": {
           "version": "4.0.0",
@@ -65804,7 +65871,8 @@
       }
     },
     "loader-runner": {
-      "version": "4.3.0"
+      "version": "4.3.0",
+      "dev": true
     },
     "loader-utils": {
       "version": "2.0.0",
@@ -65842,7 +65910,7 @@
     },
     "lodash.debounce": {
       "version": "4.0.8",
-      "devOptional": true
+      "dev": true
     },
     "lodash.escaperegexp": {
       "version": "4.1.2",
@@ -68232,23 +68300,19 @@
     },
     "postcss-discard-comments": {
       "version": "5.1.1",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-flexbugs-fixes": {
       "version": "4.2.1",
@@ -68381,8 +68445,7 @@
     },
     "postcss-modules-extract-imports": {
       "version": "3.0.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -68395,8 +68458,7 @@
       "dependencies": {
         "icss-utils": {
           "version": "5.1.0",
-          "dev": true,
-          "requires": {}
+          "dev": true
         }
       }
     },
@@ -68416,15 +68478,13 @@
       "dependencies": {
         "icss-utils": {
           "version": "5.1.0",
-          "dev": true,
-          "requires": {}
+          "dev": true
         }
       }
     },
     "postcss-normalize-charset": {
       "version": "5.1.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -68711,8 +68771,7 @@
       }
     },
     "prism-react-renderer": {
-      "version": "1.2.1",
-      "requires": {}
+      "version": "1.2.1"
     },
     "prismjs": {
       "version": "1.29.0",
@@ -68878,6 +68937,7 @@
     },
     "randombytes": {
       "version": "2.1.0",
+      "dev": true,
       "requires": {
         "safe-buffer": "^5.1.0"
       }
@@ -68949,8 +69009,7 @@
     "react-day-picker": {
       "version": "8.8.0",
       "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.8.0.tgz",
-      "integrity": "sha512-QIC3uOuyGGbtypbd5QEggsCSqVaPNu8kzUWquZ7JjW9fuWB9yv7WyixKmnaFelTLXFdq7h7zU6n/aBleBqe/dA==",
-      "requires": {}
+      "integrity": "sha512-QIC3uOuyGGbtypbd5QEggsCSqVaPNu8kzUWquZ7JjW9fuWB9yv7WyixKmnaFelTLXFdq7h7zU6n/aBleBqe/dA=="
     },
     "react-devtools-inline": {
       "version": "4.4.0",
@@ -68975,8 +69034,7 @@
       }
     },
     "react-docgen-typescript": {
-      "version": "2.2.2",
-      "requires": {}
+      "version": "2.2.2"
     },
     "react-dom": {
       "version": "17.0.2",
@@ -69026,12 +69084,10 @@
       }
     },
     "react-hook-form": {
-      "version": "7.25.3",
-      "requires": {}
+      "version": "7.25.3"
     },
     "react-icons": {
-      "version": "4.4.0",
-      "requires": {}
+      "version": "4.4.0"
     },
     "react-inspector": {
       "version": "5.1.1",
@@ -69097,8 +69153,7 @@
       }
     },
     "react-simple-code-editor": {
-      "version": "0.11.3",
-      "requires": {}
+      "version": "0.11.3"
     },
     "react-sizeme": {
       "version": "3.0.2",
@@ -69332,7 +69387,7 @@
     },
     "regenerator-transform": {
       "version": "0.14.5",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@babel/runtime": "^7.8.4"
       }
@@ -70278,6 +70333,7 @@
     },
     "schema-utils": {
       "version": "3.1.1",
+      "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -71111,8 +71167,7 @@
       }
     },
     "styled-jsx": {
-      "version": "5.0.7",
-      "requires": {}
+      "version": "5.0.7"
     },
     "stylehacks": {
       "version": "5.1.0",
@@ -71379,6 +71434,7 @@
     },
     "terser": {
       "version": "5.15.1",
+      "dev": true,
       "requires": {
         "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
@@ -71388,6 +71444,7 @@
     },
     "terser-webpack-plugin": {
       "version": "5.3.6",
+      "dev": true,
       "requires": {
         "@jridgewell/trace-mapping": "^0.3.14",
         "jest-worker": "^27.4.5",
@@ -71398,6 +71455,7 @@
       "dependencies": {
         "serialize-javascript": {
           "version": "6.0.0",
+          "dev": true,
           "requires": {
             "randombytes": "^2.1.0"
           }
@@ -71998,7 +72056,8 @@
       }
     },
     "typescript": {
-      "version": "4.7.3"
+      "version": "4.7.3",
+      "dev": true
     },
     "uglify-js": {
       "version": "3.13.5",
@@ -72307,8 +72366,7 @@
       }
     },
     "use-debounce": {
-      "version": "8.0.4",
-      "requires": {}
+      "version": "8.0.4"
     },
     "use-sidecar": {
       "version": "1.1.2",
@@ -72318,8 +72376,7 @@
       }
     },
     "use-sync-external-store": {
-      "version": "1.2.0",
-      "requires": {}
+      "version": "1.2.0"
     },
     "user-home": {
       "version": "1.1.1",
@@ -72552,13 +72609,15 @@
     },
     "watchpack": {
       "version": "2.4.0",
+      "dev": true,
       "requires": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
       },
       "dependencies": {
         "glob-to-regexp": {
-          "version": "0.4.1"
+          "version": "0.4.1",
+          "dev": true
         }
       }
     },
@@ -72577,6 +72636,7 @@
     },
     "webpack": {
       "version": "5.74.0",
+      "dev": true,
       "requires": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -72605,13 +72665,16 @@
       },
       "dependencies": {
         "glob-to-regexp": {
-          "version": "0.4.1"
+          "version": "0.4.1",
+          "dev": true
         },
         "tapable": {
-          "version": "2.2.1"
+          "version": "2.2.1",
+          "dev": true
         },
         "webpack-sources": {
-          "version": "3.2.3"
+          "version": "3.2.3",
+          "dev": true
         }
       }
     },
@@ -72628,8 +72691,7 @@
     },
     "webpack-filter-warnings-plugin": {
       "version": "1.2.1",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "webpack-hot-middleware": {
       "version": "2.25.1",
@@ -72802,8 +72864,7 @@
     },
     "ws": {
       "version": "8.5.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "x-default-browser": {
       "version": "0.4.0",
diff --git a/packages/components/density-container/stories/DensityContainer.stories.tsx b/packages/components/density-container/stories/DensityContainer.stories.tsx
index 5ac819070b..aadb9dac41 100644
--- a/packages/components/density-container/stories/DensityContainer.stories.tsx
+++ b/packages/components/density-container/stories/DensityContainer.stories.tsx
@@ -134,44 +134,45 @@ export const Overview: Story<DensityContainerProps> = ({
         {Densities.map((density) => {
           return (
             <Box key={density.name}>
-              <DensityContainer
-                key={density.name}
-                density={density.density as Density}
-                {...args}
-              >
+              <>
                 <Heading as="h2" marginBottom="spacingXs">
                   {density.name}
                 </Heading>
-
-                {Components.map((Component) => {
-                  return (
-                    <Box
-                      key={Component.name}
-                      marginBottom="spacingL"
-                      style={{ minHeight: '100px' }}
-                    >
-                      <Text>{Component.name}</Text>
-
+                <DensityContainer
+                  key={density.name}
+                  density={density.density as Density}
+                  {...args}
+                >
+                  {Components.map((Component) => {
+                    return (
                       <Box
-                        marginTop="spacingS"
-                        style={{
-                          backgroundColor: tokens.gray200,
-                          padding: tokens.spacingS,
-                          borderRadius: tokens.borderRadiusMedium,
-                        }}
+                        key={Component.name}
+                        marginBottom="spacingL"
+                        style={{ minHeight: '100px' }}
                       >
-                        <Flex gap="spacingS" alignItems="end">
-                          {Component.props.map((props, index) => {
-                            return (
-                              <Component.component key={index} {...props} />
-                            );
-                          })}
-                        </Flex>
+                        <Text>{Component.name}</Text>
+
+                        <Box
+                          marginTop="spacingS"
+                          style={{
+                            backgroundColor: tokens.gray200,
+                            padding: tokens.spacingS,
+                            borderRadius: tokens.borderRadiusMedium,
+                          }}
+                        >
+                          <Flex gap="spacingS" alignItems="end">
+                            {Component.props.map((props, index) => {
+                              return (
+                                <Component.component key={index} {...props} />
+                              );
+                            })}
+                          </Flex>
+                        </Box>
                       </Box>
-                    </Box>
-                  );
-                })}
-              </DensityContainer>
+                    );
+                  })}
+                </DensityContainer>
+              </>
             </Box>
           );
         })}
diff --git a/packages/components/forms/src/BaseCheckbox/BaseCheckbox.styles.ts b/packages/components/forms/src/BaseCheckbox/BaseCheckbox.styles.ts
index f2cf970de8..1001296855 100644
--- a/packages/components/forms/src/BaseCheckbox/BaseCheckbox.styles.ts
+++ b/packages/components/forms/src/BaseCheckbox/BaseCheckbox.styles.ts
@@ -25,8 +25,9 @@ const getHelpTextStyle = ({ size, type, density }) => {
   return {
     marginLeft: `calc(${inputWidth} + ${tokens.spacingXs})`,
     marginTop: 0,
-    fontSize: density === 'high' ? tokens.fontSizeS : tokens.fontSizeM,
-    lineHeight: density === 'high' ? tokens.lineHeightS : tokens.lineHeightM,
+    fontSize: density === 'high' ? tokens.fontSizeMHigh : tokens.fontSizeM,
+    lineHeight:
+      density === 'high' ? tokens.lineHeightMHigh : tokens.lineHeightM,
   };
 };
 
diff --git a/packages/components/forms/src/BaseCheckbox/BaseCheckbox.tsx b/packages/components/forms/src/BaseCheckbox/BaseCheckbox.tsx
index ea5a226b0a..b3cc353b98 100644
--- a/packages/components/forms/src/BaseCheckbox/BaseCheckbox.tsx
+++ b/packages/components/forms/src/BaseCheckbox/BaseCheckbox.tsx
@@ -106,8 +106,8 @@ function _BaseCheckbox(
         as="label"
         fontColor="gray900"
         fontWeight="fontWeightMedium"
-        fontSize={density === 'high' ? 'fontSizeS' : 'fontSizeM'}
-        lineHeight={density === 'high' ? 'lineHeightS' : 'lineHeightM'}
+        fontSize={density === 'high' ? 'fontSizeMHigh' : 'fontSizeM'}
+        lineHeight={density === 'high' ? 'lineHeightMHigh' : 'lineHeightM'}
         className={styles.wrapper}
         htmlFor={id}
         testId={testId}
diff --git a/packages/components/forms/src/FormLabel/FormLabel.tsx b/packages/components/forms/src/FormLabel/FormLabel.tsx
index 16640f080e..2f62d8bfb7 100644
--- a/packages/components/forms/src/FormLabel/FormLabel.tsx
+++ b/packages/components/forms/src/FormLabel/FormLabel.tsx
@@ -83,8 +83,8 @@ function _FormLabel<
       className={cx(styles.root, className)}
       ref={forwardedRef}
       testId={testId}
-      fontSize={density === 'high' ? 'fontSizeS' : 'fontSizeM'}
-      lineHeight={density === 'high' ? 'lineHeightS' : 'lineHeightM'}
+      fontSize={density === 'high' ? 'fontSizeMHigh' : 'fontSizeM'}
+      lineHeight={density === 'high' ? 'lineHeightMHigh' : 'lineHeightM'}
     >
       {children}
       {formControlProps.isRequired && (
diff --git a/packages/components/forms/src/HelpText/HelpText.tsx b/packages/components/forms/src/HelpText/HelpText.tsx
index 4af974e4c5..d92b788cd8 100644
--- a/packages/components/forms/src/HelpText/HelpText.tsx
+++ b/packages/components/forms/src/HelpText/HelpText.tsx
@@ -29,8 +29,8 @@ export const HelpText = React.forwardRef<
     <Text
       as="p"
       fontColor="gray500"
-      fontSize={density === 'high' ? 'fontSizeS' : 'fontSizeM'}
-      lineHeight={density === 'high' ? 'lineHeightS' : 'lineHeightM'}
+      fontSize={density === 'high' ? 'fontSizeMHigh' : 'fontSizeM'}
+      lineHeight={density === 'high' ? 'lineHeightMHigh' : 'lineHeightM'}
       testId={testId}
       id={`${id}-helptext`}
       marginTop="spacingXs"
diff --git a/packages/components/forms/src/ValidationMessage/ValidationMessage.tsx b/packages/components/forms/src/ValidationMessage/ValidationMessage.tsx
index 39eaa54009..b430d2df7f 100644
--- a/packages/components/forms/src/ValidationMessage/ValidationMessage.tsx
+++ b/packages/components/forms/src/ValidationMessage/ValidationMessage.tsx
@@ -49,8 +49,8 @@ export const ValidationMessage = forwardRef<
       <Text
         as="p"
         fontColor="red600"
-        fontSize={density === 'high' ? 'fontSizeS' : 'fontSizeM'}
-        lineHeight={density === 'high' ? 'lineHeightS' : 'lineHeightM'}
+        fontSize={density === 'high' ? 'fontSizeMHigh' : 'fontSizeM'}
+        lineHeight={density === 'high' ? 'lineHeightMHigh' : 'lineHeightM'}
       >
         {children}
       </Text>
diff --git a/packages/components/typography/package.json b/packages/components/typography/package.json
index 8d52cb44dd..bf235b085b 100644
--- a/packages/components/typography/package.json
+++ b/packages/components/typography/package.json
@@ -22,6 +22,7 @@
   "dependencies": {
     "@contentful/f36-core": "^4.58.1",
     "@contentful/f36-tokens": "^4.0.3",
+    "@contentful/f36-utils": "^4.24.2",
     "emotion": "^10.0.17"
   },
   "peerDependencies": {
diff --git a/packages/components/typography/src/Caption/Caption.tsx b/packages/components/typography/src/Caption/Caption.tsx
index c113a0b53d..2c5da8e857 100644
--- a/packages/components/typography/src/Caption/Caption.tsx
+++ b/packages/components/typography/src/Caption/Caption.tsx
@@ -8,6 +8,7 @@ import type {
   ExpandProps,
 } from '@contentful/f36-core';
 import { Text } from '../Text';
+import { useDensity } from '@contentful/f36-utils';
 
 const CAPTION_DEFAULT_TAG = 'span';
 
@@ -34,12 +35,14 @@ function _Caption<E extends React.ElementType = typeof CAPTION_DEFAULT_TAG>(
   }: CaptionProps<E>,
   ref: React.Ref<any>,
 ) {
+  const density = useDensity();
+
   return (
     <Text
       as={CAPTION_DEFAULT_TAG}
       testId={testId}
-      fontSize="fontSizeS"
-      lineHeight="lineHeightS"
+      fontSize={density === 'high' ? 'fontSizeSHigh' : 'fontSizeS'}
+      lineHeight={density === 'high' ? 'lineHeightSHigh' : 'lineHeightS'}
       fontColor="gray900"
       fontWeight={fontWeight}
       {...otherProps}
diff --git a/packages/components/typography/src/Caption/README.mdx b/packages/components/typography/src/Caption/README.mdx
index 26abb22a70..c62213b23a 100644
--- a/packages/components/typography/src/Caption/README.mdx
+++ b/packages/components/typography/src/Caption/README.mdx
@@ -38,3 +38,7 @@ We provide you with `as` property, to allow you to set the tag of the `Caption`
 ## Props (API reference)
 
 <PropsTable of="Caption" />
+
+## Density support
+
+This component supports multiple densities thanks to the [useDensity](/hooks/use-density) hook and automatically adjusts its styling for each density when wrapped with the [Density Container](/components/density-container).
diff --git a/packages/components/typography/src/Heading/Heading.tsx b/packages/components/typography/src/Heading/Heading.tsx
index d8b2026a4a..d1028d28e8 100644
--- a/packages/components/typography/src/Heading/Heading.tsx
+++ b/packages/components/typography/src/Heading/Heading.tsx
@@ -7,6 +7,7 @@ import type {
   ExpandProps,
 } from '@contentful/f36-core';
 import { Text } from '../Text';
+import { useDensity } from '@contentful/f36-utils';
 
 const HEADING_DEFAULT_TAG = 'h1';
 
@@ -27,6 +28,8 @@ function _Heading<E extends React.ElementType = typeof HEADING_DEFAULT_TAG>(
   { children, testId = 'cf-ui-heading', ...otherProps }: HeadingProps<E>,
   ref: React.Ref<any>,
 ) {
+  const density = useDensity();
+
   return (
     <Text
       as={HEADING_DEFAULT_TAG}
@@ -34,8 +37,8 @@ function _Heading<E extends React.ElementType = typeof HEADING_DEFAULT_TAG>(
       marginBottom="spacingM"
       fontWeight="fontWeightDemiBold"
       fontColor="gray900"
-      fontSize="fontSizeXl"
-      lineHeight="lineHeightXl"
+      fontSize={density === 'high' ? 'fontSizeXlHigh' : 'fontSizeXl'}
+      lineHeight={density === 'high' ? 'lineHeightXlHigh' : 'lineHeightXl'}
       {...otherProps}
       ref={ref}
     >
diff --git a/packages/components/typography/src/Heading/README.mdx b/packages/components/typography/src/Heading/README.mdx
index 8113a1d56b..59684d1256 100644
--- a/packages/components/typography/src/Heading/README.mdx
+++ b/packages/components/typography/src/Heading/README.mdx
@@ -58,3 +58,7 @@ Sometimes you might have to truncate the text in the `Heading` component, so we
 ## Props (API reference)
 
 <PropsTable of="Heading" />
+
+## Density support
+
+This component supports multiple densities thanks to the [useDensity](/hooks/use-density) hook and automatically adjusts its styling for each density when wrapped with the [Density Container](/components/density-container).
diff --git a/packages/components/typography/src/Paragraph/Paragraph.tsx b/packages/components/typography/src/Paragraph/Paragraph.tsx
index 1649c4e25f..8ecdde9449 100644
--- a/packages/components/typography/src/Paragraph/Paragraph.tsx
+++ b/packages/components/typography/src/Paragraph/Paragraph.tsx
@@ -6,6 +6,7 @@ import type {
   ExpandProps,
 } from '@contentful/f36-core';
 import { Text } from '../Text';
+import { useDensity } from '@contentful/f36-utils';
 
 export type ParagraphInternalProps = CommonProps &
   MarginProps & {
@@ -20,12 +21,15 @@ export const Paragraph = React.forwardRef<
   HTMLParagraphElement,
   ExpandProps<ParagraphProps>
 >(({ children, testId = 'cf-ui-paragraph', ...otherProps }, ref) => {
+  const density = useDensity();
+
   return (
     <Text
       as="p"
       testId={testId}
+      fontSize={density === 'high' ? 'fontSizeMHigh' : 'fontSizeM'}
+      lineHeight={density === 'high' ? 'lineHeightMHigh' : 'lineHeightM'}
       marginBottom="spacingM"
-      lineHeight="lineHeightM"
       {...otherProps}
       ref={ref}
     >
diff --git a/packages/components/typography/src/Paragraph/README.mdx b/packages/components/typography/src/Paragraph/README.mdx
index ae0eaf1dce..d27a9fd99b 100644
--- a/packages/components/typography/src/Paragraph/README.mdx
+++ b/packages/components/typography/src/Paragraph/README.mdx
@@ -46,3 +46,7 @@ Sometimes you might have to truncate the text in the `Paragraph` component, so w
 ## Props (API reference)
 
 <PropsTable of="Paragraph" />
+
+## Density support
+
+This component supports multiple densities thanks to the [useDensity](/hooks/use-density) hook and automatically adjusts its styling for each density when wrapped with the [Density Container](/components/density-container).
diff --git a/packages/components/typography/src/SectionHeading/README.mdx b/packages/components/typography/src/SectionHeading/README.mdx
index b1d9eaa048..3b40ab4082 100644
--- a/packages/components/typography/src/SectionHeading/README.mdx
+++ b/packages/components/typography/src/SectionHeading/README.mdx
@@ -60,3 +60,7 @@ Sometimes you might have to truncate the text in the `SectionHeading` component,
 ## Props (API reference)
 
 <PropsTable of="SectionHeading" />
+
+## Density support
+
+This component supports multiple densities thanks to the [useDensity](/hooks/use-density) hook and automatically adjusts its styling for each density when wrapped with the [Density Container](/components/density-container).
diff --git a/packages/components/typography/src/SectionHeading/SectionHeading.tsx b/packages/components/typography/src/SectionHeading/SectionHeading.tsx
index a6e7d7be5c..01083cfd5e 100644
--- a/packages/components/typography/src/SectionHeading/SectionHeading.tsx
+++ b/packages/components/typography/src/SectionHeading/SectionHeading.tsx
@@ -10,6 +10,7 @@ import type {
 } from '@contentful/f36-core';
 import type { HeadingElement } from '../Heading';
 import { Text } from '../Text';
+import { useDensity } from '@contentful/f36-utils';
 
 const SECTION_HEADING_DEFAULT_TAG = 'h2';
 
@@ -35,6 +36,8 @@ function _SectionHeading<
   }: SectionHeadingProps<E>,
   ref: React.Ref<any>,
 ) {
+  const density = useDensity();
+
   return (
     <Text
       as={SECTION_HEADING_DEFAULT_TAG}
@@ -42,8 +45,8 @@ function _SectionHeading<
       marginBottom="spacingL"
       fontWeight="fontWeightDemiBold"
       fontColor="gray900"
-      fontSize="fontSizeS"
-      lineHeight="lineHeightS"
+      fontSize={density === 'high' ? 'fontSizeSHigh' : 'fontSizeS'}
+      lineHeight={density === 'high' ? 'lineHeightSHigh' : 'lineHeightS'}
       className={cx(
         css({
           letterSpacing: tokens.letterSpacingWide,
diff --git a/packages/components/typography/src/Subheading/README.mdx b/packages/components/typography/src/Subheading/README.mdx
index 1f292e529b..e6f6b4bf5f 100644
--- a/packages/components/typography/src/Subheading/README.mdx
+++ b/packages/components/typography/src/Subheading/README.mdx
@@ -60,3 +60,7 @@ Sometimes you might have to truncate the text in the `Subheading` component, so
 ## Props (API reference)
 
 <PropsTable of="Subheading" />
+
+## Density support
+
+This component supports multiple densities thanks to the [useDensity](/hooks/use-density) hook and automatically adjusts its styling for each density when wrapped with the [Density Container](/components/density-container).
diff --git a/packages/components/typography/src/Subheading/Subheading.tsx b/packages/components/typography/src/Subheading/Subheading.tsx
index eb63ec64b4..9222421a42 100644
--- a/packages/components/typography/src/Subheading/Subheading.tsx
+++ b/packages/components/typography/src/Subheading/Subheading.tsx
@@ -8,6 +8,7 @@ import type {
 } from '@contentful/f36-core';
 import type { HeadingElement } from '../Heading';
 import { Text } from '../Text';
+import { useDensity } from '@contentful/f36-utils';
 
 const SUBHEADING_DEFAULT_TAG = 'h3';
 
@@ -28,13 +29,15 @@ function _Subheading<
   { children, testId = 'cf-ui-subheading', ...otherProps }: SubheadingProps<E>,
   ref: React.Ref<any>,
 ) {
+  const density = useDensity();
+
   return (
     <Text
       as={SUBHEADING_DEFAULT_TAG}
       testId={testId}
       marginBottom="spacingM"
-      fontSize="fontSizeL"
-      lineHeight="lineHeightL"
+      fontSize={density === 'high' ? 'fontSizeLHigh' : 'fontSizeL'}
+      lineHeight={density === 'high' ? 'lineHeightLHigh' : 'lineHeightL'}
       fontWeight="fontWeightDemiBold"
       fontColor="gray900"
       {...otherProps}
diff --git a/packages/components/typography/stories/Caption.stories.tsx b/packages/components/typography/stories/Caption.stories.tsx
index 344d3f26fa..6aa1d0ae7b 100644
--- a/packages/components/typography/stories/Caption.stories.tsx
+++ b/packages/components/typography/stories/Caption.stories.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import { Flex } from '@contentful/f36-core';
+import type { Density } from '@contentful/f36-utils';
+import { Heading } from '@contentful/f36-typography';
 
+import { DensityContainer } from '../../density-container';
 import { Caption, CaptionProps } from '../src/Caption/Caption';
 import { Paragraph } from '../src/Paragraph/Paragraph';
 
@@ -38,3 +41,39 @@ export const Overview = (props: CaptionProps) => (
 Overview.args = {
   children: 'Caption',
 };
+
+export const WithDensitySupport = (props: CaptionProps) => {
+  const Densities = [
+    {
+      name: 'Low density',
+      density: 'low',
+    },
+    {
+      name: 'High density',
+      density: 'high',
+    },
+  ];
+
+  return (
+    <Flex gap="spacing2Xl">
+      {Densities.map((density) => {
+        return (
+          <Flex
+            key={density.name}
+            flexDirection="column"
+            style={{ width: '230px' }}
+          >
+            <Heading marginBottom="spacingXs">{density.name}</Heading>
+            <DensityContainer density={density.density as Density}>
+              <Caption {...props} />
+            </DensityContainer>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};
+
+WithDensitySupport.args = {
+  children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+};
diff --git a/packages/components/typography/stories/Heading.stories.tsx b/packages/components/typography/stories/Heading.stories.tsx
index fb3e1fe367..46725de0ab 100644
--- a/packages/components/typography/stories/Heading.stories.tsx
+++ b/packages/components/typography/stories/Heading.stories.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
+import type { Density } from '@contentful/f36-utils';
+import { Flex } from '@contentful/f36-core';
 import { Heading, HeadingProps } from '../src/Heading/Heading';
+import { DensityContainer } from '../../density-container/';
 
 export default {
   title: 'Typography/Heading',
@@ -18,3 +21,40 @@ Basic.args = {
   children: 'Heading',
   as: 'h1',
 };
+
+export const WithDensitySupport = (props: HeadingProps<'h1'>) => {
+  const Densities = [
+    {
+      name: 'Low density',
+      density: 'low',
+    },
+    {
+      name: 'High density',
+      density: 'high',
+    },
+  ];
+
+  return (
+    <Flex gap="spacing2Xl">
+      {Densities.map((density) => {
+        return (
+          <Flex
+            key={density.name}
+            flexDirection="column"
+            style={{ width: '230px' }}
+          >
+            <Heading>{density.name}</Heading>
+            <DensityContainer density={density.density as Density}>
+              <Heading {...props} />
+            </DensityContainer>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};
+
+WithDensitySupport.args = {
+  children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  as: 'h1',
+};
diff --git a/packages/components/typography/stories/Paragraph.stories.tsx b/packages/components/typography/stories/Paragraph.stories.tsx
index 669d56aa5a..d829f811df 100644
--- a/packages/components/typography/stories/Paragraph.stories.tsx
+++ b/packages/components/typography/stories/Paragraph.stories.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
-
+import { Flex } from '@contentful/f36-core';
+import { Heading } from '@contentful/f36-typography';
+import type { Density } from '@contentful/f36-utils';
 import { Paragraph, ParagraphProps } from '../src/Paragraph/Paragraph';
+import { DensityContainer } from '../../density-container';
 
 export default {
   title: 'Typography/Paragraph',
@@ -18,3 +21,39 @@ export const Basic = (props: ParagraphProps) => <Paragraph {...props} />;
 Basic.args = {
   children: 'Paragraph',
 };
+
+export const WithDensitySupport = (props: ParagraphProps) => {
+  const Densities = [
+    {
+      name: 'Low density',
+      density: 'low',
+    },
+    {
+      name: 'High density',
+      density: 'high',
+    },
+  ];
+
+  return (
+    <Flex gap="spacing2Xl">
+      {Densities.map((density) => {
+        return (
+          <Flex
+            key={density.name}
+            flexDirection="column"
+            style={{ width: '230px' }}
+          >
+            <Heading>{density.name}</Heading>
+            <DensityContainer density={density.density as Density}>
+              <Paragraph {...props} />
+            </DensityContainer>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};
+
+WithDensitySupport.args = {
+  children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+};
diff --git a/packages/components/typography/stories/SectionHeading.stories.tsx b/packages/components/typography/stories/SectionHeading.stories.tsx
index 5c309a080e..a7410151d4 100644
--- a/packages/components/typography/stories/SectionHeading.stories.tsx
+++ b/packages/components/typography/stories/SectionHeading.stories.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
-
+import { Flex } from '@contentful/f36-core';
+import { Heading } from '@contentful/f36-typography';
+import type { Density } from '@contentful/f36-utils';
+import { DensityContainer } from '../../density-container';
 import {
   SectionHeading,
   SectionHeadingProps,
@@ -23,3 +26,39 @@ export const Basic = (props: SectionHeadingProps<'h3'>) => (
 Basic.args = {
   children: 'Section heading',
 };
+
+export const WithDensitySupport = (props: SectionHeadingProps<'h3'>) => {
+  const Densities = [
+    {
+      name: 'Low density',
+      density: 'low',
+    },
+    {
+      name: 'High density',
+      density: 'high',
+    },
+  ];
+
+  return (
+    <Flex gap="spacing2Xl">
+      {Densities.map((density) => {
+        return (
+          <Flex
+            key={density.name}
+            flexDirection="column"
+            style={{ width: '230px' }}
+          >
+            <Heading>{density.name}</Heading>
+            <DensityContainer density={density.density as Density}>
+              <SectionHeading {...props} />
+            </DensityContainer>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};
+
+WithDensitySupport.args = {
+  children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+};
diff --git a/packages/components/typography/stories/Subheading.stories.tsx b/packages/components/typography/stories/Subheading.stories.tsx
index 9d2c16ab40..73c287540a 100644
--- a/packages/components/typography/stories/Subheading.stories.tsx
+++ b/packages/components/typography/stories/Subheading.stories.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
-
+import { Flex } from '@contentful/f36-core';
+import { Heading } from '@contentful/f36-typography';
+import type { Density } from '@contentful/f36-utils';
+import { DensityContainer } from '../../density-container';
 import { Subheading, SubheadingProps } from '../src/Subheading/Subheading';
 
 export default {
@@ -21,3 +24,39 @@ Basic.args = {
   as: 'h2',
   children: 'Subheading',
 };
+
+export const WithDensitySupport = (props: SubheadingProps<'h2'>) => {
+  const Densities = [
+    {
+      name: 'Low density',
+      density: 'low',
+    },
+    {
+      name: 'High density',
+      density: 'high',
+    },
+  ];
+
+  return (
+    <Flex gap="spacing2Xl">
+      {Densities.map((density) => {
+        return (
+          <Flex
+            key={density.name}
+            flexDirection="column"
+            style={{ width: '230px' }}
+          >
+            <Heading>{density.name}</Heading>
+            <DensityContainer density={density.density as Density}>
+              <Subheading {...props} />
+            </DensityContainer>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};
+
+WithDensitySupport.args = {
+  children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+};
diff --git a/packages/forma-36-tokens/src/tokens/typography/font-size.js b/packages/forma-36-tokens/src/tokens/typography/font-size.js
index e952c37bc2..ef84a8695c 100644
--- a/packages/forma-36-tokens/src/tokens/typography/font-size.js
+++ b/packages/forma-36-tokens/src/tokens/typography/font-size.js
@@ -3,9 +3,13 @@ const fontSize = {
   'font-size-3xl': '2.25rem',
   'font-size-2xl': '1.75rem',
   'font-size-xl': '1.25rem',
+  'font-size-xl-high': '1.125rem',
   'font-size-l': '1rem',
+  'font-size-l-high': '0.875rem',
   'font-size-m': '0.875rem',
+  'font-size-m-high': '0.75rem',
   'font-size-s': '0.75rem',
+  'font-size-s-high': '0.625rem',
 };
 
 module.exports = fontSize;
diff --git a/packages/forma-36-tokens/src/tokens/typography/line-height.js b/packages/forma-36-tokens/src/tokens/typography/line-height.js
index 613208dc29..4ef12355c0 100644
--- a/packages/forma-36-tokens/src/tokens/typography/line-height.js
+++ b/packages/forma-36-tokens/src/tokens/typography/line-height.js
@@ -5,9 +5,13 @@ const lineHeight = {
   'line-height-3xl': '3rem',
   'line-height-2xl': '2.25rem',
   'line-height-xl': '2rem',
+  'line-height-xl-high': '1.5rem',
   'line-height-l': '1.5rem',
+  'line-height-l-high': '1.25rem',
   'line-height-m': '1.25rem',
+  'line-height-m-high': '1rem',
   'line-height-s': '1rem',
+  'line-height-s-high': '0.75rem',
 };
 
 module.exports = lineHeight;